/* --- CSS Variables & Reset --- */
 :root {
   /* Core Colors - Dark Neutral Gradient Base */
   --bg-dark: #0f172a;
   /* Deep Slate */
   --bg-darker: #0b1120;

   /* Accent - Single confident blue/cyan */
   --accent: #0ea5e9;
   --accent-hover: #38bdf8;

   /* Typography Colors */
   --text-primary: #f1f5f9;
   --text-secondary: #94a3b8;
   /* Muted for meta info */
   --text-code: #e2e8f0;

   /* Glassmorphism Engine Variables */
   /* Subtle white tint for dark mode glass */
   --glass-bg: rgba(255, 255, 255, 0.03);
   --glass-border: rgba(255, 255, 255, 0.08);
   --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
   --blur-strength: 16px;

   /* Spacing & Structure */
   --container-narrow: 980px;
   --container-wide: 1200px;
   --border-radius: 12px;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   font-family: "Inter", sans-serif;
   /* Subtle dark gradient background gives depth to glass elements */
   background: radial-gradient(at top center,
       var(--bg-dark),
       var(--bg-darker));
   color: var(--text-primary);
   line-height: 1.7;
   /* Optimized for long-form reading */
   min-height: 100vh;
 }

 a {
   text-decoration: none;
   color: inherit;
   transition: color 0.2s ease;
 }

 a.accent-link {
   color: var(--accent);
   font-weight: 500;
 }

 a.accent-link:hover {
   color: var(--accent-hover);
 }

 /* --- Global Utilities --- */
 .container-narrow {
   max-width: var(--container-narrow);
   margin: 0 auto;
   padding: 0 24px;
 }

 .container-wide {
   max-width: var(--container-wide);
   margin: 0 auto;
   padding: 1.25rem;
 }

 .text-muted {
   color: var(--text-secondary);
 }

 .mb-4 {
   margin-bottom: 1.5rem;
 }

 .mb-8 {
   margin-bottom: 3rem;
 }

 /* THE GLASS ENGINE - Core Component style */
 .glass-panel {
   background: var(--glass-bg);
   /* The core blur effect */
   backdrop-filter: blur(var(--blur-strength));
   -webkit-backdrop-filter: blur(var(--blur-strength));
   /* Subtle border for definition */
   border: 1px solid var(--glass-border);
   /* Soft shadow for lifting */
   box-shadow: var(--glass-shadow);
   border-radius: var(--border-radius);
 }

 /* Subtle hover state for interactive glass cards */
 .glass-card-interactive {
   transition:
     transform 0.2s ease,
     border-color 0.2s ease;
 }

 .glass-card-interactive:hover {
   /* Minimal movement, no flashy scaling */
   transform: translateY(-3px);
   border-color: rgba(255, 255, 255, 0.15);
 }

 /* --- Components --- */
 /* Navbar */
 .nav-header {
   padding: 24px 0;
   margin-bottom: 60px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .nav-logo {
   font-weight: 700;
   letter-spacing: -0.02em;
   font-size: 1.1rem;
 }

 .nav-links a {
   margin-left: 24px;
   font-weight: 500;
   font-size: 0.95rem;
   color: var(--text-secondary);
 }

 .nav-links a:hover,
 .nav-links a.active {
   color: var(--text-primary);
 }

 .nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
 }

 .brand {
   display: flex;
   gap: 0.75rem;
   align-items: center;
 }

 .brand .logo {
   width: 46px;
   height: 46px;
   border-radius: 8px;
   background: linear-gradient(135deg, #0f169e, #0ea5e9);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: 700;
 }

 .brand h1 {
   font-size: 1rem;
   margin: 0;
 }

 nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   gap: 1rem;
 }

 nav a {
   color: var(--text-primary);
   text-decoration: none;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   transition: color 0.2s ease, transform 0.2s ease;
 }

 .social-icon {
   color: var(--text-primary);
   display: inline-flex;
   align-items: center;
   transition: color 0.2s ease, transform 0.2s ease;
   padding: 0.2rem 0;
 }

 .social-icon:hover,
 nav a:hover {
   color: var(--accent);
   /* your accent blue */
   transform: translateY(-1px);
 }

 /* Buttons */
 .btn {
   display: inline-block;
   padding: 12px 28px;
   border-radius: var(--border-radius);
   font-weight: 600;
   transition: all 0.2s ease;
 }

 .btn-accent {
   background-color: var(--accent);
   color: var(--bg-darker);
 }

 .btn-accent:hover {
   background-color: var(--accent-hover);
 }

 .btn-glass {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
 }

 .btn-glass:hover {
   border-color: var(--text-secondary);
 }

 .chips {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 1rem;
   justify-content: center;
 }

 .chip {
   background: var(--glass);
   padding: 0.35rem 0.6rem;
   border-radius: 999px;
   font-size: 0.85rem;
   color: var(--muted);
   border: 1px solid rgba(255, 255, 255, 0.02);
 }



 header {
   backdrop-filter: blur(6px);
   position: sticky;
   top: 0;
   z-index: 40;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   background: linear-gradient(180deg,
       rgba(2, 6, 23, 0.6),
       rgba(2, 6, 23, 0.35));
   box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 25px -5px, rgba(0, 0, 0, 0.2) 0px 10px 10px -5px;
 }

 footer {
   padding: 1rem 0;
   color: var(--text-secondary);
   text-align: center;
   font-size: 0.9rem;
   border-top: 1px dashed var(--glass-border);
   margin-top: 40px;
 }

 /* -------------------------------------------------- */
 /* --- PAGE 1: HOME / PORTFOLIO STYLES --- */
 /* -------------------------------------------------- */
 .hero-section {
   text-align: center;
   padding: 60px 0;
 }

 .hero-profile-photo {
   width: 200px;
   height: 200px;
   border-radius: 50%;
   overflow: hidden;
   margin: 0 auto 24px auto;
 }

 .hero-name {
   font-size: 3.5rem;
   font-weight: 700;
   letter-spacing: -0.03em;
   line-height: 1.1;
 }

 .hero-title {
   font-size: 1.25rem;
   color: var(--accent);
   font-weight: 500;
   margin: 16px 0 24px 0;
 }

 .hero-intro {
   font-size: 1.1rem;
   color: var(--text-secondary);
   margin: 0 auto;
 }

 .section-title {
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 32px;
   border-left: 4px solid var(--accent);
   padding-left: 16px;
 }

 .grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
 }

 .grid-3 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 24px;
 }

 @media (max-width: 768px) {
   .grid-2 {
     grid-template-columns: 1fr;
   }

   /* Mobile Header Fixes */
   .brand-text {
     display: none;
   }

   header {
     position: relative;
     border-bottom: none;
   }

   /* Mobile Spacing Optimizations */
   .reading-container {
     padding: 16px !important;
   }

   .nav,
   .container-narrow {
     padding: 8px;
   }


   .nav-header {
     padding: 12px 0;
     margin-bottom: 24px;
   }

   .section-title {
     margin-bottom: 16px;
   }

   .hero-section {
     padding: 32px 0;
   }
 }

 .focus-card {
   padding: 32px;
 }

 .focus-card h3 {
   margin-bottom: 12px;
   font-weight: 600;
 }

 .focus-card p {
   color: var(--text-secondary);
   font-size: 0.95rem;
 }

 .project-card {
   padding: 32px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .project-meta {
   color: var(--accent);
   font-size: 0.9rem;
   font-weight: 500;
   display: block;
   margin-bottom: 8px;
 }

 /* -------------------------------------------------- */
 /* --- PAGE 2: BLOGS INDEX STYLES (Split Layout) --- */
 /* -------------------------------------------------- */
 .blog-index-layout {
   display: grid;
   /* 30% sidebar, 70% content */
   grid-template-columns: 300px 1fr;
   gap: 24px;
   max-width: var(--container-wide);
   margin: 0 auto;
   padding: 0 24px;
 }

 /* Sticky Sidebar Styles */
 .sidebar-sticky {
   position: sticky;
   top: 100px;
   padding: 24px;
   max-height: fit-content;
 }

 .category-list {
   list-style: none;
 }

 .category-list li {
   margin-bottom: 12px;
 }

 .category-list a {
   display: block;
   color: var(--text-secondary);
   font-weight: 500;
   padding: 8px 12px;
   border-radius: 8px;
 }

 .category-list a:hover,
 .category-list a.active {
   color: var(--text-primary);
   background: rgba(14, 165, 233, 0.1);
   /* Accent fade */
 }

 /* Blog Post Excerpt Cards */
 .post-card {
   padding: 32px;
   margin-bottom: 24px;
   display: block;
 }

 .post-card h2 {
   font-size: 1.5rem;
   margin-bottom: 12px;
 }

 .post-meta-row {
   display: flex;
   gap: 16px;
   font-size: 0.9rem;
   color: var(--text-secondary);
   align-items: center;
   justify-content: space-between;
 }

 .read-more {
   color: var(--accent);
   font-weight: 600;
   margin-top: 16px;
   display: inline-block;
 }

 @media (max-width: 900px) {

   /* Collapse to single column on tablet/mobile */
   .blog-index-layout {
     grid-template-columns: 1fr;
   }

   #theme-toggle {
     display: none;
   }

   .sidebar-sticky {
     position: relative;
     top: 0;
     margin-bottom: 40px;
   }

   .category-list {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
   }

   .category-list li {
     margin-bottom: 0;
   }
 }

 /* -------------------------------------------------- */
 /* --- PAGE 3: BLOG POST STYLES (Reading Optimized) --- */
 /* -------------------------------------------------- */

 .post-header-container {
   backdrop-filter: blur(12px);
   position: sticky;
   top: 0;
   z-index: 40;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   /* background: linear-gradient(180deg,
       rgba(2, 6, 23, 0.6),
       rgba(2, 6, 23, 0.35)); */
 }

 .post-header {
   text-align: center;
   padding-top: 10px;
 }

 .post-title-large {
   font-size: 1.5rem;
   font-weight: 600;
   letter-spacing: -0.02em;
   margin-bottom: 16px;
   line-height: 1.2;
 }

 /* The Reading Container - Glass panel holding the content */
 .reading-container {
   padding: 48px;
 }

 @media (max-width: 768px) {
   .reading-container {
     padding: 24px;
   }
 }

 /* Typography within the article */
 .article-content h2 {
   font-size: 1.75rem;
   margin-top: 48px;
   margin-bottom: 24px;
 }

 .article-content h3 {
   font-size: 1.25rem;
   margin-top: 32px;
   margin-bottom: 16px;
 }

 .article-content p {
   margin-bottom: 24px;
   font-size: 1.05rem;
 }

 .article-content ul {
   margin-bottom: 24px;
   padding-left: 24px;
   color: var(--text-secondary);
 }

 .article-content li {
   margin-bottom: 8px;
 }

 /* Technical elements styling */
 blockquote {
   border-left: 4px solid var(--accent);
   padding-left: 24px;
   margin: 32px 0;
   font-style: italic;
   color: var(--text-secondary);
   font-size: 1.1rem;
 }

 /* Code blocks - Dark theme to match */
 pre {
   background: #0b1120;
   /* Darker than main bg */
   border: 1px solid var(--glass-border);
   border-radius: var(--border-radius);
   padding: 24px;
   overflow-x: auto;
   margin: 32px 0;
 }

 code {
   font-family: "IBM Plex Mono", monospace;
   /* Or similar monospace */
   font-size: 0.9rem;
   color: var(--text-code);
 }

 /* Inline code */
 p code {
   background: rgba(255, 255, 255, 0.1);
   padding: 2px 6px;
   border-radius: 4px;
 }



 /* --- Light Mode Theme --- */
 :root[data-theme="light"] {
   --bg-dark: #f8fafc;
   --bg-darker: #ffffff;
   --text-primary: #1e293b;
   --text-secondary: #64748b;
   --text-code: #334155;
   --glass-bg: rgba(255, 255, 255, 0.7);
   --glass-border: rgba(0, 0, 0, 0.1);
   --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   --bg-header: #1e293b;
   --text-header: #f8fafc;
 }

 :root[data-theme="light"] body {
   background: radial-gradient(at top center, var(--bg-dark), var(--bg-darker));
 }

 :root[data-theme="light"] pre {
   background: #f1f5f9;
   border-color: #cbd5e1;
 }

 :root[data-theme="light"] .brand .logo {
   color: white;
   /* Keep logo text white as background is gradient */
 }

 /* Keep headers looking "Dark Mode" (Light text on Dark BG) even in Light Mode */
 :root[data-theme="light"] header,
 :root[data-theme="light"] .post-header-container {
   color: var(--text-header);
   background-color: var(--bg-header);
 }

 :root[data-theme="light"] nav a,
 :root[data-theme="light"] .brand,
 :root[data-theme="light"] .social-icon,
 :root[data-theme="light"] .post-header-container .post-title-large,
 :root[data-theme="light"] .post-header-container .project-meta {
   color: #f1f5f9;
 }

 :root[data-theme="light"] .brand .logo {
   color: white;
 }

 :root[data-theme="light"] .nav-links a:hover,
 :root[data-theme="light"] .social-icon:hover {
   color: var(--accent);
 }

 /* --- Markdown Element Styling --- */
 .article-content h1,
 .article-content h2,
 .article-content h3,
 .article-content h4,
 .article-content h5,
 .article-content h6 {
   color: var(--text-primary);
   margin-top: 2rem;
   margin-bottom: 1rem;
   font-weight: 700;
 }

 .article-content h1 {
   font-size: 2.25rem;
 }

 .article-content h2 {
   font-size: 1.8rem;
   border-bottom: 1px solid var(--glass-border);
   padding-bottom: 0.5rem;
 }

 .article-content h3 {
   font-size: 1.5rem;
 }

 .article-content h4 {
   font-size: 1.25rem;
 }

 .article-content strong {
   font-weight: 700;
   color: var(--accent);
 }

 .article-content ul,
 .article-content ol {
   margin-bottom: 1.5rem;
   padding-left: 1.5rem;
 }

 .article-content li {
   margin-bottom: 0.5rem;
 }

 .article-content table {
   width: 100%;
   margin-bottom: 1.5rem;
   border-collapse: collapse;
 }

 .article-content th,
 .article-content td {
   padding: 0.75rem;
   border: 1px solid var(--glass-border);
   text-align: left;
 }

 .article-content th {
   background-color: var(--glass-bg);
   font-weight: 600;
 }

 .article-content img {
   max-width: 100%;
   height: auto;
   border-radius: var(--border-radius);
   margin: 1.5rem 0;
 }

 /* --- Post Tags --- */
 .post-tags {
   margin-top: 3rem;
   padding-top: 1.5rem;
   border-top: 1px solid var(--glass-border);
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
 }

 .post-tag {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   padding: 4px 12px;
   border-radius: 999px;
   font-size: 0.85rem;
   color: var(--text-secondary);
 }

 /* --- Related Posts --- */
 .related-posts {
   margin-top: 3rem;
   padding-top: 3rem;
   border-top: 1px solid var(--glass-border);
 }

 .related-posts h3 {
   font-size: 1.5rem;
   margin-bottom: 1.5rem;
 }

 .related-posts-list {
   list-style: none;
   padding: 0;
 }

 .related-posts-list li {
   margin-bottom: 0.75rem;
   border-bottom: 1px dashed var(--glass-border);
   padding-bottom: 0.75rem;
 }

 .related-posts-list li:last-child {
   border-bottom: none;
 }

 .related-post-link {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: var(--text-primary);
   transition: color 0.2s;
 }

 .related-post-link:hover {
   color: var(--accent);
 }

 .related-post-date {
   font-size: 0.85rem;
   color: var(--text-secondary);
   white-space: nowrap;
   margin-left: 1rem;
 }

 /* --- Syntax Highlighting (Rouge/Github Dark) --- */
 .highlight {
   color: #c9d1d9;
   background-color: #0d1117;
 }

 .highlight .c,
 .highlight .ch,
 .highlight .cd,
 .highlight .cm,
 .highlight .cps,
 .highlight .c1,
 .highlight .cs {
   color: #8b949e;
   font-style: italic;
 }

 .highlight .err {
   color: #f85149;
   background-color: #3e1b1e;
 }

 .highlight .k,
 .highlight .kv {
   color: #ff7b72;
 }

 .highlight .o,
 .highlight .ow {
   color: #ff7b72;
   font-weight: bold;
 }

 .highlight .kd,
 .highlight .kt,
 .highlight .kr {
   color: #79c0ff;
 }

 .highlight .s,
 .highlight .sb,
 .highlight .sc,
 .highlight .sd,
 .highlight .s2,
 .highlight .se,
 .highlight .sh,
 .highlight .si,
 .highlight .sx,
 .highlight .s1 {
   color: #a5d6ff;
 }

 .highlight .na {
   color: #d2a8ff;
 }

 .highlight .nc,
 .highlight .no {
   color: #f0883e;
   font-weight: bold;
 }

 .highlight .nf,
 .highlight .fm {
   color: #d2a8ff;
   font-weight: bold;
 }

 .highlight .nt {
   color: #7ee787;
 }

 .highlight .nb {
   color: #ffa657;
 }

 .highlight .nv,
 .highlight .vc,
 .highlight .vg,
 .highlight .vi {
   color: #79c0ff;
 }

 :root[data-theme="light"] .highlight {
   background-color: #f6f8fa;
   color: #24292e;
   border: 1px solid #e1e4e8;
 }

 :root[data-theme="light"] .highlight .c,
 :root[data-theme="light"] .highlight .c1 {
   color: #6a737d;
 }

 :root[data-theme="light"] .highlight .k {
   color: #d73a49;
 }

 :root[data-theme="light"] .highlight .s,
 :root[data-theme="light"] .highlight .s1 {
   color: #032f62;
 }

 :root[data-theme="light"] .highlight .nf {
   color: #6f42c1;
 }

 :root[data-theme="light"] .highlight .nt {
   color: #22863a;
 }

 /* --- Light Mode Header Opaque --- */
 :root[data-theme="light"] header {
   background: var(--bg-header) !important;
   color: var(--text-header);
   /* Force dark background */
   backdrop-filter: none;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

 :root[data-theme="light"] .post-header-container {
   background: #0e7ad2 !important;
   /* Force dark background */
 }