:root {
      --white: #ffffff;
      --canvas: #f5f5f7;
      --canvas2: #ebebed;
      --ink: #1d1d1f;
      --ink2: #424245;
      --muted: #6e6e73;
      --muted2: #86868b;
      --border: #d2d2d7;
      --border2: #c7c7cc;
      --blue: #0071e3;
      --blue-dark: #0077ed;
      --blue-light: #e8f1fc;
      --teal: #0a9e80;
      --teal-light: #e6f5f1;
      --teal-mid: #b3e2d8;
      --teal-dark: #076e59;
      --red-soft: #dc2626;
      --amber: #d97706;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
      --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.10);
      --r: 8px;
      --rmd: 12px;
      --rlg: 16px;
      --fd: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --fb: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --fm: 'JetBrains Mono', ui-monospace, monospace;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    img,video,svg{max-width:100%;height:auto;display:block}
    table{border-collapse:collapse}
    html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;-webkit-text-size-adjust:100%}
    body{background:var(--canvas);color:var(--ink);font-family:var(--fb);line-height:1.55;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:0;width:100%}
    .container{max-width:1160px;margin:0 auto;padding:0 1.5rem;width:100%}

    /* NAV — matches index.html */
    nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(245,245,247,0.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,0.08);transition:box-shadow 0.3s;width:100%}
    nav.elevated{box-shadow:var(--shadow-md)}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;min-width:0;gap:0.5rem}
    .nav-start{display:flex;align-items:center;gap:0.1rem;min-width:0;flex:1}
    .logo{display:flex;align-items:center;align-self:stretch;height:64px;padding:8px 0.8rem 8px 0;text-decoration:none;flex-shrink:0}
    .logo-img{height:100%;width:auto;max-height:40px;object-fit:contain;object-position:left center;display:block}
    .logo-mark{width:32px;height:32px;background:#1d1d1f;border-radius:9px;display:flex;align-items:center;justify-content:center;color:white;font-family:var(--fd);font-weight:700;font-size:1rem}
    .logo-text{font-family:var(--fd);font-weight:700;font-size:1.2rem;color:var(--ink);letter-spacing:-0.02em;white-space:nowrap}
    .logo-text span{color:var(--ink)}
    .nav-links{display:flex;align-items:center;gap:0.1rem;list-style:none}
    .nav-links a{color:var(--ink2);text-decoration:none;font-size:0.875rem;font-weight:500;padding:0.4rem 0.8rem;border-radius:var(--r);transition:background 0.15s,color 0.15s}
    .nav-links a:hover{background:var(--canvas2);color:var(--ink)}
    .nav-learn{position:relative}
    .nav-learn > a{display:inline-flex;align-items:center;gap:0.28rem}
    .nav-learn > a svg{width:11px;height:11px;opacity:0.7}
    .nav-learn-menu{display:none;position:absolute;top:calc(100% - 2px);left:0;min-width:200px;margin:0;padding:0.4rem;list-style:none;background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,0.1);z-index:230}
    .nav-learn:hover .nav-learn-menu,.nav-learn:focus-within .nav-learn-menu{display:block}
    .nav-learn-menu a{display:block;padding:0.55rem 0.75rem;border-radius:8px;white-space:nowrap}
    .mob-nav-sub a{padding-left:1.15rem !important;font-size:0.92rem !important;color:var(--muted) !important}
    .nav-actions{display:flex;align-items:center;gap:0.6rem}
    .btn-ghost{font-family:var(--fb);font-size:0.875rem;font-weight:500;color:var(--ink2);text-decoration:none;padding:0.45rem 0.9rem;border-radius:var(--r);border:1px solid var(--border2);background:transparent;transition:all 0.15s;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
    .btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
    .btn-primary{font-family:var(--fb);font-size:0.875rem;font-weight:600;color:white;text-decoration:none;padding:0.5rem 1.2rem;border-radius:980px;background:#1d1d1f;border:none;cursor:pointer;transition:background 0.2s,transform 0.2s,box-shadow 0.2s;display:inline-flex;align-items:center;gap:0.4rem;min-height:44px;justify-content:center}
    .btn-primary:hover{background:#000;box-shadow:0 4px 18px rgba(0,0,0,0.18);transform:scale(1.02)}
    .btn-lg{font-size:1rem;padding:0.75rem 1.9rem;border-radius:980px;min-height:48px}
    .btn-outline-lg{font-family:var(--fb);font-size:1rem;font-weight:500;color:var(--ink2);text-decoration:none;padding:0.75rem 1.9rem;border-radius:980px;border:1px solid var(--border2);background:var(--white);display:inline-flex;align-items:center;gap:0.4rem;transition:all 0.15s;min-height:48px;justify-content:center}
    .btn-outline-lg:hover{border-color:var(--blue);color:var(--blue)}

    .hamburger{display:none;flex-direction:column;gap:4.5px;cursor:pointer;padding:0.45rem;border-radius:var(--r);border:1px solid var(--border2);background:transparent;transition:all 0.15s;flex-shrink:0}
    .hamburger:hover{border-color:var(--ink);background:var(--canvas2)}
    .hamburger span{display:block;width:20px;height:2px;background:var(--ink2);border-radius:2px;transition:all 0.25s}
    .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
    .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
    .hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}
    .hamburger.open{border-color:var(--ink);background:var(--canvas2)}
    .hamburger.open span{background:var(--ink)}
    .mobile-nav-drawer{position:fixed;top:64px;left:0;right:0;background:rgba(245,245,247,0.92);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,0.08);z-index:199;padding:0.75rem 1rem 1.2rem;box-shadow:0 8px 32px rgba(0,0,0,0.08);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s;width:100%}
    .mobile-nav-drawer.open{opacity:1;visibility:visible;transform:translateY(0)}
    .mob-nav-links{list-style:none;display:flex;flex-direction:column;gap:0.1rem;margin-bottom:0.9rem}
    .mob-nav-links a{display:block;color:var(--ink2);text-decoration:none;font-size:0.95rem;font-weight:500;padding:0.62rem 0.75rem;border-radius:var(--r);transition:background 0.15s,color 0.15s}
    .mob-nav-links a:hover{background:var(--canvas2);color:var(--ink)}
    .mob-nav-divider{height:1px;background:var(--border);margin:0.3rem 0 0.8rem}
    .mob-nav-actions{display:flex;gap:0.6rem}
    .mob-cta-ghost{flex:1;text-align:center;text-decoration:none;font-family:var(--fb);font-size:0.9rem;font-weight:500;color:var(--ink2);padding:0.65rem 1rem;border-radius:var(--r);border:1px solid var(--border2);background:transparent;transition:all 0.15s;display:flex;align-items:center;justify-content:center}
    .mob-cta-primary{flex:1;text-align:center;text-decoration:none;font-family:var(--fb);font-size:0.9rem;font-weight:600;color:white;padding:0.7rem 1rem;border-radius:980px;background:#1d1d1f;border:none;cursor:pointer;transition:background 0.2s;display:flex;align-items:center;justify-content:center;gap:0.35rem}
    .mob-cta-primary:hover{background:#000}
    @media(max-width:768px){
      .hamburger{display:flex !important}
      .nav-actions .btn-ghost,.nav-actions .btn-primary{display:none !important}
      .nav-links{display:none}
      .logo-img{max-height:36px}
    }

    /* DSA Layout */
    .dsa-container{max-width:100%;margin:0;padding:0;overflow-x:hidden}
    .dsa-layout{display:grid;grid-template-columns:280px 300px 1fr;gap:0;min-height:calc(100vh - 64px);padding-top:5rem;transition:all 0.3s ease;width:100%}
    .dsa-layout.collapsed-topics{grid-template-columns:40px 300px 1fr}
    .dsa-layout.collapsed-problems{grid-template-columns:280px 40px 1fr}
    .dsa-layout.collapsed-both{grid-template-columns:40px 40px 1fr}

    .topics-sidebar{background:var(--white);border:1px solid var(--border);border-radius:var(--rmd);padding:1.5rem;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 160px);position:sticky;top:84px;width:280px;transition:width 0.3s ease, opacity 0.3s ease;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
    .topics-sidebar.collapsed{width:40px;padding:0.5rem;overflow:hidden;border-right:none;border-radius:0}
    .topics-sidebar.collapsed .topic-btn{display:none}
    .topics-sidebar.collapsed h3{display:none}

    .problems-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--rmd);padding:1.5rem;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 160px);position:sticky;top:84px;width:300px;transition:width 0.3s ease, opacity 0.3s ease;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
    .problems-panel.collapsed{width:40px;padding:0.5rem;overflow:hidden;border-left:none;border-right:none;border-radius:0}
    .problems-panel.collapsed .problem-card{display:none}
    .problems-panel.collapsed h3{display:none}

    .visualizer-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--rmd);overflow:hidden;min-height:calc(100vh - 160px);flex:1;transition:all 0.3s ease;margin:0;position:relative;-webkit-overflow-scrolling:touch}

    /* Fullscreen Button */
    .fullscreen-btn{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--border2);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:all 0.15s;z-index:20;opacity:0.7;min-width:40px;min-height:40px}
    .fullscreen-btn:hover{opacity:1;border-color:var(--teal);color:var(--teal);background:var(--teal-light);transform:scale(1.05)}
    .fullscreen-btn:active{transform:scale(0.98)}
    .fullscreen-btn svg{margin:0;width:16px;height:16px}

    /* Expand Buttons for Collapsed Panels */
    .expand-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--border2);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:all 0.15s;z-index:10;opacity:0;animation:fadeIn 0.3s ease forwards;min-width:40px;min-height:40px}
    .expand-btn:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light);transform:translate(-50%,-50%) scale(1.1)}
    .expand-btn:active{transform:translate(-50%,-50%) scale(0.95)}
    .topics-sidebar.collapsed .expand-btn{opacity:1}
    .problems-panel.collapsed .expand-btn{opacity:1}

    /* Collapse Buttons */
    .collapse-btn{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--border2);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:all 0.15s;z-index:10;min-width:36px;min-height:36px}
    .collapse-btn:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light)}
    .collapse-btn:active{transform:scale(0.95)}
    .topics-sidebar .collapse-btn{right:10px}
    .problems-panel .collapse-btn{right:10px}

    /* Topic Buttons */
    .topic-btn{display:block;width:100%;text-align:left;padding:0.75rem 1rem;border-radius:var(--r);border:none;background:transparent;color:var(--ink2);font-family:var(--fb);font-size:0.9rem;font-weight:500;margin-bottom:0.25rem;cursor:pointer;transition:all 0.15s;text-decoration:none;min-height:44px;display:flex;align-items:center;user-select:none;-webkit-user-select:none}
    .topic-btn:hover{background:var(--canvas2);color:var(--ink)}
    .topic-btn:active{transform:scale(0.98)}
    .topic-btn.active{background:var(--teal);color:white}
    .topic-btn.active:hover{background:var(--teal-dark);color:white}

    /* Problem Cards */
    .problem-card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r);padding:1rem;margin-bottom:0.75rem;cursor:pointer;transition:all 0.2s;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
    .problem-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
    .problem-card:active{transform:translateY(0);opacity:0.95}
    .problem-title{font-family:var(--fd);font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:0.25rem;line-height:1.3}
    .problem-desc{font-size:0.85rem;color:var(--muted);line-height:1.5;word-break:break-word}
    .problem-difficulty{display:inline-block;font-size:0.7rem;font-weight:600;padding:0.2rem 0.6rem;border-radius:100px;margin-top:0.5rem;user-select:none}
    .difficulty-easy{background:#dcfce7;color:#15803d;border:1px solid #86efac}
    .difficulty-medium{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
    .difficulty-hard{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}

    /* Visualizer Header */
    .visualizer-header{background:var(--white);border-bottom:1px solid var(--border);padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;border-radius:var(--rmd) var(--rmd) 0 0;gap:1rem;flex-wrap:wrap;min-height:56px}
    .visualizer-title{font-family:var(--fd);font-size:1.2rem;font-weight:700;color:var(--ink);margin:0;flex:1;min-width:200px;line-height:1.3;word-break:break-word}
    .visualizer-controls{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center}
    .control-btn{font-family:var(--fm);font-size:0.8rem;padding:0.4rem 0.8rem;border-radius:var(--r);border:1px solid var(--border2);background:var(--white);color:var(--ink2);cursor:pointer;transition:all 0.15s;min-height:40px;display:flex;align-items:center;white-space:nowrap;user-select:none}
    .control-btn:hover{border-color:var(--teal);color:var(--teal)}
    .control-btn:active{transform:scale(0.98)}
    .visualizer-content{height:100%;overflow:hidden;border-radius:var(--rmd)}
    .visualizer-content iframe{width:100%;height:100%;border:none;display:block;border-radius:var(--rmd)}

    /* Tablet Responsive (1024px and below) */
    @media(max-width:1024px){
      .dsa-layout{grid-template-columns:1fr;gap:1rem;padding-top:1.5rem;padding-bottom:2rem}
      .topics-sidebar,.problems-panel{position:static;max-height:none;width:100%!important;border-radius:var(--rmd);margin-bottom:1rem;max-height:none}
      .topics-sidebar.collapsed,.problems-panel.collapsed{display:none}
      .collapse-btn,.expand-btn{display:none}
      .visualizer-panel{border-radius:var(--rmd)}
      .container{padding:0 1rem}
    }

    /* Landscape Mobile & iPad (768px) */
    @media(max-width:768px){
      html{font-size:14px}
      .container{padding:0 1rem}
      .dsa-layout{padding-top:1rem;padding-bottom:1.5rem;gap:0.75rem}
      .topics-sidebar,.problems-panel{margin-bottom:0.75rem;padding:1rem}
      .visualizer-header{padding:0.75rem 1rem;font-size:0.95rem}
      .visualizer-title{font-size:1rem}
      .control-btn{padding:0.3rem 0.6rem;font-size:0.75rem}
      .problem-card{padding:0.75rem;margin-bottom:0.5rem}
      .problem-title{font-size:0.95rem}
      .problem-desc{font-size:0.8rem}
      .topic-btn{padding:0.65rem 0.75rem;font-size:0.85rem}
    }

    /* Portrait Mobile (480px) */
    @media(max-width:480px){
      html{font-size:13px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
      body{padding:0;-webkit-text-size-adjust:100%}
      .container{padding:0 0.75rem}

      /* DSA Layout */
      .dsa-layout{grid-template-columns:1fr;padding-top:0;padding-bottom:0;gap:0;min-height:auto}
      .dsa-layout.collapsed-topics,.dsa-layout.collapsed-problems,.dsa-layout.collapsed-both{grid-template-columns:1fr}
      .topics-sidebar,.problems-panel{width:100%!important;margin-bottom:0.5rem;padding:0.75rem;border-radius:var(--r);position:relative;top:auto}
      .topics-sidebar{
        order:1;
        max-height:32vh;
        overflow-y:auto;
        border:1px solid var(--border);
      }
      .problems-panel{
        order:2;
        max-height:36vh;
        overflow-y:auto;
        border:1px solid var(--border);
      }
      .topics-sidebar h3,.problems-panel h3{font-size:1rem;margin-bottom:0.75rem;margin-top:1rem}
      .collapse-btn,.expand-btn{display:none}
      
      /* Sidebar buttons */
      .topic-btn{padding:0.65rem 0.7rem;font-size:0.82rem;margin-bottom:0.3rem;border-radius:var(--r);min-height:44px}
      .problem-card{padding:0.65rem;margin-bottom:0.4rem;border-radius:var(--r);-webkit-user-select:none;user-select:none;min-height:auto}
      .problem-title{font-size:0.9rem;margin-bottom:0.2rem}
      .problem-desc{font-size:0.75rem;line-height:1.4}
      .problem-difficulty{font-size:0.65rem;padding:0.15rem 0.5rem;margin-top:0.3rem}

      /* Visualizer */
      .visualizer-panel{
        order:3;
        min-height:68vh;
        border-radius:var(--r);
        max-height:none;
      }
      .visualizer-header{padding:0.6rem 0.75rem;font-size:0.9rem;min-height:48px}
      .visualizer-title{font-size:0.95rem;min-width:auto}
      .visualizer-controls{gap:0.35rem;flex-wrap:wrap}
      .control-btn{padding:0.3rem 0.5rem;font-size:0.7rem;border-radius:var(--r);min-height:40px}
      .fullscreen-btn{width:36px;height:36px;font-size:0.65rem;top:8px;right:8px;min-width:36px;min-height:36px}

      /* Spacing */
      .container{padding:0 0.75rem}
    }

    /* Small Mobile (320px) */
    @media(max-width:360px){
      html{font-size:12px}
      .container{padding:0 0.5rem}
      
      .topics-sidebar{max-height:34vh}
      .problems-panel{max-height:38vh}
      .topics-sidebar h3,.problems-panel h3{font-size:0.9rem}
      .topic-btn{padding:0.5rem 0.5rem;font-size:0.75rem}
      .problem-card{padding:0.6rem;margin-bottom:0.3rem}
      .problem-title{font-size:0.85rem}
      .problem-desc{font-size:0.7rem}
      
      .visualizer-panel{min-height:64vh;max-height:none}
      .visualizer-header{padding:0.5rem}
      .visualizer-title{font-size:0.9rem}
      .control-btn{padding:0.25rem 0.45rem;font-size:0.65rem}
    }

    /* Loading */
    .loading{text-align:center;padding:2rem;color:var(--muted)}
    .loading::after{content:'';display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top:2px solid var(--teal);border-radius:50%;animation:spin 1s linear infinite;margin-left:0.5rem}
    @keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

    /* Back to Home */
    .back-home{position:absolute;top:1rem;left:1rem;z-index:10}
    .back-home a{display:flex;align-items:center;gap:0.5rem;color:var(--ink2);text-decoration:none;font-size:0.9rem;padding:0.5rem 1rem;border-radius:var(--r);border:1px solid var(--border2);background:var(--white);transition:all 0.15s;min-height:44px;min-width:44px;justify-content:center}
    .back-home a:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light)}

    /* Touch-friendly improvements */
    button, a {
      -webkit-tap-highlight-color:transparent;
      -webkit-user-select:none;
      user-select:none;
    }
    
    /* Ensure smooth scrolling on iOS */
    .topics-sidebar, .problems-panel {
      -webkit-overflow-scrolling:touch;
      scroll-behavior:smooth;
    }

    /* ══ MOBILE TAB UX (≤768px) ══ */
    @media(max-width:768px){
      /* Hide the old stacked panels — tabs handle nav */
      .dsa-layout{
        display:flex;
        flex-direction:column;
        padding:0;
        gap:0;
        min-height:calc(100vh - 56px);
        margin-top:56px; /* nav height */
      }

      /* Each panel becomes a full-screen tab pane */
      .topics-sidebar,
      .problems-panel,
      .visualizer-panel{
        display:none;
        position:fixed;
        top:56px;
        left:0;
        right:0;
        bottom:60px; /* tab bar height */
        width:100%;
        max-height:none;
        height:calc(100vh - 116px);
        overflow-y:auto;
        border-radius:0;
        border:none;
        border-top:1px solid var(--border);
        padding:1rem;
        margin:0;
        -webkit-overflow-scrolling:touch;
      }
      .topics-sidebar.tab-active,
      .problems-panel.tab-active,
      .visualizer-panel.tab-active{
        display:block;
      }
      .visualizer-panel.tab-active{
        padding:0;
        overflow:hidden;
      }
      .visualizer-content,
      .visualizer-content iframe{
        width:100%;
        height:100%;
        display:block;
        border:none;
      }
      /* Hide desktop collapse buttons on mobile */
      .collapse-btn,.expand-btn{ display:none!important; }

      /* Topics sidebar inner spacing */
      .topics-sidebar h3{ margin-top:0.25rem; }

      /* ── Bottom Tab Bar ── */
      .mobile-tabs{
        display:flex;
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        height:60px;
        background:var(--white);
        border-top:1px solid var(--border);
        z-index:300;
        box-shadow:0 -2px 12px rgba(0,0,0,0.06);
      }
      .tab-btn{
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        border:none;
        background:transparent;
        color:var(--muted);
        font-family:var(--fb);
        font-size:0.65rem;
        font-weight:500;
        cursor:pointer;
        transition:color 0.15s, background 0.15s;
        padding:0;
        min-height:60px;
        -webkit-tap-highlight-color:transparent;
        position:relative;
      }
      .tab-btn.active{
        color:var(--teal);
      }
      .tab-btn.active::after{
        content:'';
        position:absolute;
        top:0;
        left:15%;
        right:15%;
        height:2px;
        background:var(--teal);
        border-radius:0 0 3px 3px;
      }
      .tab-btn svg{
        width:20px;
        height:20px;
        stroke:currentColor;
        fill:none;
        stroke-width:1.8;
      }
      /* Badge for problems count */
      .tab-badge{
        position:absolute;
        top:8px;
        right:calc(50% - 18px);
        background:var(--teal);
        color:white;
        font-size:0.55rem;
        font-weight:700;
        min-width:14px;
        height:14px;
        border-radius:7px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 3px;
        line-height:1;
      }
    }

    /* On desktop, hide tab bar */
    @media(min-width:769px){
      .mobile-tabs{ display:none; }
      .tab-active-class-ignored{}
    }

    /* ── Mobile Fullscreen Overlay ── */
    .mobile-fullscreen-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 999;
      background: #000;
      flex-direction: column;
    }
    .mobile-fullscreen-overlay.active {
      display: flex;
    }
    .mobile-fs-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.6rem 1rem;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      min-height: 48px;
    }
    .mobile-fs-back {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      border: none;
      background: transparent;
      color: var(--teal);
      font-family: var(--fb);
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      padding: 0.3rem 0.5rem 0.3rem 0;
      min-height: 44px;
      min-width: 44px;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-fs-back svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.5;
      flex-shrink: 0;
    }
    .mobile-fs-title {
      font-family: var(--fd);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--ink);
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-fs-iframe {
      flex: 1;
      width: 100%;
      border: none;
      display: block;
    }
    /* Hide the desktop fullscreen btn on mobile — we use our own */
    @media(max-width: 768px) {
      .fullscreen-btn { display: none !important; }
    }