/* ========== THEME TOKENS ========== */
    :root{
      --primary:#007BFF; --primary-dark:#0056b3;
      --secondary:#28a745; --accent:#ffc107; --danger:#dc3545; --warning:#fd7e14; --info:#17a2b8;

      --bg:#ffffff; --bg-2:#f8f9fa; --bg-3:#ffffffEE; --bg-hero-grad:linear-gradient(135deg,#007BFF 0%,#28a745 100%);
      --text:#212529; --text-2:#6c757d; --text-muted:#9097a3;

      --nav-bg:rgba(255,255,255,.92); --nav-border:rgba(0,0,0,.08); --nav-text:#111;
      --shadow-sm:0 2px 4px rgba(0,0,0,.08);
      --shadow-md:0 6px 20px rgba(0,0,0,.10);
      --shadow-lg:0 14px 40px rgba(0,0,0,.16);
      --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
      --t-fast:.18s cubic-bezier(.4,0,.2,1);
      --t-slow:.35s cubic-bezier(.4,0,.2,1);
    }
    [data-theme="dark"]{
      --bg:#1a1a1a; --bg-2:#232425; --bg-3:#1e1f21;
      --text:#ffffff; --text-2:#c9c9c9; --text-muted:#9aa0a6;
      --nav-bg:rgba(28,28,30,.9); --nav-border:rgba(255,255,255,.08); --nav-text:#f1f1f1;
      --shadow-md:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 18px 50px rgba(0,0,0,.55);
    }

    /* ========== BASE ========== */
    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
      line-height:1.6;
      background:var(--bg);
      color:var(--text);
      overflow-x:hidden;
      transition:background var(--t-slow),color var(--t-slow)
    }

    /* ========== NAVBAR ========== */
    .navbar{
      position:fixed;
      inset:0 0 auto;
      z-index:1000;
      background:var(--nav-bg);
      backdrop-filter:saturate(140%) blur(16px);
      border-bottom:1px solid var(--nav-border);
      transition:box-shadow var(--t-slow),background var(--t-slow)
    }
    .navbar.scrolled{box-shadow:var(--shadow-sm)}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
    .logo{display:flex;align-items:center;font-weight:800;font-size:1.25rem;color:var(--primary)}
    .logo-img{height:40px;margin-right:10px}
    .logo-pulse{width:8px;height:8px;border-radius:999px;background:skyblue;margin-left:10px;animation:pulse 2s infinite}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}}

    .nav-links{display:flex;gap:24px;align-items:center}
    .nav-link{
      position:relative;
      text-decoration:none;
      color:var(--nav-text);
      font-weight:600;
      padding:8px 12px;
      border-radius:10px;
      transition:background var(--t-fast),color var(--t-fast)
    }
    .nav-link:hover{background:rgba(0,123,255,.12);color:var(--primary)}

    /* Mobile toggle */
    .mobile-toggle{
      display:none;
      width:42px;
      height:42px;
      border-radius:50%;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      border:1px solid var(--nav-border);
      background:transparent;
      position:fixed;
      top:2px;
      right:18px;
      z-index:1002
    }
    .mobile-toggle-bars{
      position:relative;
      width:20px;
      height:2px;
      background:var(--nav-text);
      transition:transform var(--t-slow),background var(--t-slow)
    }
    .mobile-toggle-bars::before,.mobile-toggle-bars::after{
      content:"";
      position:absolute;
      left:0;
      width:20px;
      height:2px;
      background:var(--nav-text);
      transition:transform var(--t-slow),top var(--t-slow)
    }
    .mobile-toggle-bars::before{top:-6px}
    .mobile-toggle-bars::after{top:6px}
    .mobile-toggle.active .mobile-toggle-bars{background:transparent}
    .mobile-toggle.active .mobile-toggle-bars::before{top:0;transform:rotate(45deg)}
    .mobile-toggle.active .mobile-toggle-bars::after{top:0;transform:rotate(-45deg)}

    /* Mobile drawer */
    .nav-drawer{
      display:none;
      flex-direction:column;
      background:var(--nav-bg);
      border-top:1px solid var(--nav-border);
      box-shadow:var(--shadow-sm)
    }
    .nav-drawer a{padding:12px 20px}
    .nav-drawer.show{display:flex;animation:slideDown var(--t-slow)}
    @keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

    /* Theme toggle & back-to-top */
    .theme-toggle,.back-to-top{
      position:fixed;
      z-index:1001;
      border:none;
      cursor:pointer;
      border-radius:999px;
      box-shadow:var(--shadow-sm);
      transition:transform var(--t-slow),box-shadow var(--t-slow)
    }
    .theme-toggle{
      bottom:78px;
      right:30px;
      background:var(--primary);
      color:#fff;
      width:46px;
      height:46px;
      font-size:18px
    }
    .theme-toggle:hover{transform:scale(1.08);box-shadow:var(--shadow-md)}

    .back-to-top{
      bottom:20px;
      right:28px;
      background:linear-gradient(135deg,#007BFF,#0056b3);
      color:#fff;
      width:55px;
      height:55px;
      font-size:18px;
      transform:translateY(120px)
    }
    .back-to-top.visible{transform:translateY(0)}
    .back-to-top:hover{transform:translateY(-6px) scale(1.05);box-shadow:var(--shadow-lg)}

    /* ========== MAIN CONTENT ========== */
    .container {
      width: 90%;
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    h1 {
      text-align: center;
      margin: 100px 10px 20px;
      color: var(--text);
      font-size: 2.5rem;
      font-weight: 800;
    }

    .code-section {
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding: 20px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .code-box {
      background: var(--bg-3);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
      padding: 25px;
      position: relative;
      border: 1px solid var(--nav-border);
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease, box-shadow var(--t-slow);
    }

    .code-box.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .code-box:hover {
      box-shadow: var(--shadow-lg);
    }

    .code-title {
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 15px;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .code-title::before {
      content: "💻";
      font-size: 1.2rem;
    }

    .code-wrapper {
      position: relative;
    }

    .copy-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: var(--primary);
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 600;
      transition: all var(--t-fast);
      z-index: 10;
      box-shadow: var(--shadow-sm);
    }

    .copy-btn:hover {
      background: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .copy-btn.copied {
      background: var(--secondary);
      transform: scale(0.95);
    }

    pre.code-block {
      background-color: #1e1e1e;
      color: #dcdcdc;
      padding: 20px;
      border-radius: var(--radius-sm);
      overflow-x: auto;
      font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
      white-space: pre-wrap;
      font-size: 0.9rem;
      margin-top: 40px;
      line-height: 1.5;
      box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
    }

    /* GitHub section */
    .code-link {
      text-align: center;
      background: var(--bg-hero-grad);
      color: #fff;
      padding: 40px 30px;
      border-radius: var(--radius-lg);
      margin-bottom: 20px;
    }

    .code-link h2 {
      font-size: 2rem;
      font-weight: 800;
      margin-bottom: 15px;
    }

    .code-link p {
      font-size: 1.1rem;
      margin-bottom: 25px;
      opacity: 0.95;
    }

    .code-link .btn {
      display: inline-block;
      background: #fff;
      color: var(--primary);
      padding: 14px 30px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 700;
      transition: transform var(--t-fast), box-shadow var(--t-fast);
      box-shadow: var(--shadow-sm);
    }

    .code-link .btn:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }

    /* Copy feedback tooltip */
    .copy-btn::after {
      content: '';
      position: absolute;
      top: -35px;
      right: 0;
      background: var(--secondary);
      color: #fff;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 0.75rem;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--t-fast);
    }

    .copy-btn.copied::after {
      content: '✅ Copied!';
      opacity: 1;
      animation: copyFeedback 2s forwards;
    }

    @keyframes copyFeedback {
      0% { transform: translateY(5px); opacity: 0; }
      20%, 80% { transform: translateY(0); opacity: 1; }
      100% { transform: translateY(-3px); opacity: 0; }
    }

    /* Responsive */
    @media(max-width:768px){
      .nav-links{display:none}
      .mobile-toggle{display:flex}
      
      .theme-toggle{
        bottom:20px;
        right:20px;
        top:auto;
        left:auto;
        width:50px;
        height:50px;
      }
      
      .back-to-top{
        bottom:20px;
        right:20px;
        width:50px;
        height:50px;
      }

      h1 {
        font-size: 2rem;
        margin-top: 80px;
      }

      .code-section {
        padding: 15px;
      }

      .code-box {
        padding: 20px;
      }

      .code-title {
        font-size: 1.2rem;
      }

      pre.code-block {
        font-size: 0.8rem;
        padding: 15px;
      }
    }

    @media(max-width: 480px) {
      .theme-toggle {
        bottom: 20px;
        right: 75px;
        width: 48px;
        height: 48px;
      }
      
      .back-to-top {
        right: 15px;
        width: 48px;
        height: 48px;
      }

      .code-section {
        padding: 10px;
      }

      .code-box {
        padding: 15px;
      }
    }

    /* Scroll animations */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }