@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Plus+Jakarta+Sans:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ================================================================
   TechWorld Labs — global.css  (refactored + full responsive)
   ================================================================ */

/* ── Variables ── */
:root {
  --bg:#080E1A;--bg2:#0D1525;--bg3:#111D30;--bg4:#162035;--bg5:#1a2640;
  --border:rgba(0,180,255,0.12);--border2:rgba(0,180,255,0.25);
  --accent:#00B4FF;--accent2:#00FFB2;--accent3:#FF6B35;--accent4:#FFD600;--accent5:#BB86FC;
  --text:#E8EDF5;--text2:#9AAFC8;--text3:#6A7F9A;--text4:#3d5170;
  --sidebar-w:270px;--header-h:60px;--nav-h:46px;
  --font-main:'DM Sans',sans-serif;--font-display:'Plus Jakarta Sans',sans-serif;--font-mono:'JetBrains Mono',monospace;
  --radius:12px;--shadow:0 4px 24px rgba(0,0,0,0.4);--transition:all 0.2s ease;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-main);font-size:15px;line-height:1.7;min-height:100vh;overflow-x:hidden;overflow-wrap:break-word;word-break:break-word}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{cursor:pointer;font-family:inherit}ul,ol{list-style:none}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ── Nav overlay ── */
#nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:998;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .3s ease}
#nav-overlay.active{display:block;opacity:1}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:850;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .3s ease;pointer-events:none}
#sidebar-overlay.active{display:block;opacity:1;pointer-events:auto}

/* ── Topbar ── */
#topbar{position:fixed;top:0;left:0;right:0;height:var(--header-h);background:rgba(13,21,37,0.95);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:1000;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);gap:12px;overflow:visible}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:34px;height:34px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:13px;color:#000;flex-shrink:0}
.logo-text{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--text);letter-spacing:-.3px;white-space:nowrap}
.logo-text span{color:var(--accent)}
.top-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:flex-end;margin-right:20px}
.top-nav a{color:var(--text2);font-size:13px;font-weight:500;padding:6px 13px;border-radius:6px;transition:var(--transition);white-space:nowrap}
.top-nav a:hover{color:var(--accent);background:rgba(0,180,255,0.08)}
.top-nav a.active{color:var(--accent);background:rgba(0,180,255,0.1)}

/* ── Dropdown Navigation ── */
.nav-dropdown{position:relative;display:inline-block;z-index:2001}
.nav-dropdown-btn{background:none;border:none;color:var(--text2);font-size:13px;font-weight:500;padding:6px 13px;border-radius:6px;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:6px;white-space:nowrap}
.nav-dropdown-btn:hover{color:var(--accent);background:rgba(0,180,255,0.08)}
.nav-dropdown-btn[aria-expanded="true"]{color:var(--accent);background:rgba(0,180,255,0.1)}
.dropdown-arrow{font-size:10px;transition:transform 0.3s ease;display:inline-block}
.nav-dropdown-btn[aria-expanded="true"] .dropdown-arrow{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:40px;left:-20px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;min-width:200px;box-shadow:0 12px 40px rgba(0,0,0,0.6);padding:8px 0;display:none;flex-direction:column;z-index:3000;list-style:none;margin:0}
.dropdown-menu.show{display:flex !important}
.dropdown-menu li{list-style:none;margin:0;padding:0}
.dropdown-menu a{display:block;padding:12px 16px;color:var(--text2);font-size:13px;font-weight:500;transition:all 0.2s;border-radius:0;text-decoration:none;white-space:nowrap}
.dropdown-menu a:hover{color:var(--accent);background:rgba(0,180,255,0.15)}
.dropdown-menu li:first-child a{border-radius:6px 6px 0 0}
.dropdown-menu li:last-child a{border-radius:0 0 6px 6px}

.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.topbar-stats{display:flex;gap:16px;align-items:center}
.topbar-stats .stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.topbar-stats .stat-num{font-size:14px;font-weight:700;color:var(--accent);font-family:var(--font-display)}
.topbar-stats .stat-label{font-size:10px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
.top-badge{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#000;font-size:11px;font-weight:700;padding:5px 13px;border-radius:20px;font-family:var(--font-display);white-space:nowrap}

/* ── Hamburger ── */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:0;flex-shrink:0;transition:var(--transition);position:relative;z-index:1010}
.hamburger:hover{border-color:var(--border2);background:var(--bg4)}
.hamburger span{display:block;width:18px;height:2px;background:var(--text2);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--accent)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--accent)}

/* ── Mobile menu dropdown ── */
.mobile-menu{display:none;position:fixed;top:var(--header-h);left:0;right:0;background:rgba(13,21,37,0.98);border-bottom:1px solid var(--border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:999;max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px rgba(0,0,0,.5)}
.mobile-menu.open{max-height:680px;overflow-y:auto}
.mobile-menu-inner{padding:12px 0 20px}
.mobile-menu a{display:flex;align-items:center;gap:10px;padding:11px 20px;font-size:14px;font-weight:500;color:var(--text2);transition:var(--transition);border-left:2px solid transparent}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--accent);background:rgba(0,180,255,0.06);border-left-color:var(--accent)}
.mobile-menu-divider{height:1px;background:var(--border);margin:8px 20px}
.mobile-menu-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text4);padding:8px 20px 4px;font-family:var(--font-mono)}
.mm-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ── Skill nav ── */
#skillnav{position:fixed;top:var(--header-h);left:0;right:0;height:var(--nav-h);background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:2px;padding:0 16px;z-index:997;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
#skillnav::-webkit-scrollbar{display:none}
.skill-dropdown{position:relative;display:inline-flex;align-items:center}
.skill-dropdown-toggle{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-size:12px;font-weight:600;transition:all .2s ease;white-space:nowrap}
.skill-dropdown-toggle:hover{background:rgba(0,180,255,0.1);border-color:#00B4FF;color:#00B4FF}
.skill-dropdown-icon{transition:transform .3s ease;font-size:10px}
.skill-dropdown-menu{position:absolute;top:100%;left:0;margin-top:4px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;min-width:200px;z-index:1000;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s ease;box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.skill-dropdown.active .skill-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.skill-dropdown.active .skill-dropdown-icon{transform:rotate(180deg)}
.skill-dropdown-menu a{display:flex;align-items:center;gap:8px;padding:10px 14px;color:var(--text2);font-size:12px;border-bottom:1px solid var(--border);transition:all .2s ease;text-decoration:none}
.skill-dropdown-menu a:last-child{border-bottom:none}
.skill-dropdown-menu a:hover{background:rgba(0,180,255,0.1);color:#00B4FF;padding-left:18px}
.skill-dropdown-menu .menu-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.skill-tab{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text3);white-space:nowrap;border:1px solid transparent;font-family:var(--font-display);letter-spacing:.3px;transition:var(--transition)}
.skill-tab:hover{color:var(--text);background:var(--bg4)}
.skill-tab.active{color:var(--accent);background:rgba(0,180,255,0.1);border-color:rgba(0,180,255,0.25)}
.skill-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ── Layout ── */
#layout{display:flex;margin-top:calc(var(--header-h) + var(--nav-h));min-height:calc(100vh - var(--header-h) - var(--nav-h))}

/* ── Sidebar ── */
#sidebar{width:var(--sidebar-w);background:#162035;border-right:1px solid var(--border);position:sticky;top:calc(var(--header-h) + var(--nav-h));height:calc(100vh - var(--header-h) - var(--nav-h));overflow-y:auto;flex-shrink:0;transition:transform .3s ease;scrollbar-width:thin}
.sidebar-header{padding:18px 20px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);margin-bottom:6px;position:relative}
.sidebar-icon-wrap{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:#00B4FF;color:#000;font-weight:bold}
.sidebar-title{font-family:var(--font-display);font-size:14px;font-weight:700;color:#F0F4F8;line-height:1.3}
.sidebar-subtitle{font-size:11px;color:var(--text3);font-family:var(--font-mono)}
.sidebar-section-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#00B4FF;padding:16px 20px 5px;font-family:var(--font-mono)}
.sidebar-link{display:flex;align-items:center;gap:8px;padding:8px 20px 8px 18px;font-size:13px;color:#D0D8E0;cursor:pointer;border-left:2px solid transparent;transition:var(--transition);line-height:1.4}
.sidebar-link:hover{color:var(--text);background:rgba(255,255,255,0.03);border-left-color:var(--border2)}
.sidebar-link.active{color:var(--accent);background:rgba(0,180,255,0.07);border-left-color:var(--accent);font-weight:600}
.sidebar-link-num{font-family:var(--font-mono);font-size:10px;color:var(--text4);flex-shrink:0;min-width:18px}
.sidebar-close{display:none;position:absolute;top:14px;right:14px;width:28px;height:28px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text3);font-size:14px;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}
.sidebar-close:hover{color:var(--text);border-color:var(--border2)}

/* ── Main ── */
#main{flex:1;width:0;padding:36px 44px 80px;min-width:0;overflow-x:hidden}
#main .topic-section>*:not(.topic-nav){max-width:820px}

/* ── Topic sections ── */
.topic-section{display:none}
.topic-section.active{display:block;animation:fadeSlideIn .3s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.topic-hero{display:flex;align-items:flex-start;gap:18px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.topic-icon-big{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.topic-meta{flex:1;min-width:0}
.topic-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent2);font-family:var(--font-mono);margin-bottom:6px}
.topic-title{font-family:var(--font-display);font-size:30px;font-weight:800;color:var(--text);line-height:1.15;margin-bottom:5px;letter-spacing:-.5px}
.topic-updated{font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-bottom:8px}
.topic-desc{font-size:14px;color:var(--text2);line-height:1.7;max-width:600px}

/* ── Content tabs ── */
.content-tabs{display:flex;gap:2px;margin-bottom:28px;border-bottom:1px solid var(--border);overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.content-tabs::-webkit-scrollbar{display:none}
.ctab{padding:9px 16px;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--transition);font-family:var(--font-display);white-space:nowrap;flex-shrink:0}
.ctab:hover{color:var(--text2)}
.ctab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-pane{display:none}.tab-pane.active{display:block}

/* ── Typography ── */
h2.section-h{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text);margin:26px 0 12px;letter-spacing:-.3px}
h3.section-h3{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--accent);margin:20px 0 9px}
p.body{color:var(--text2);font-size:14.5px;line-height:1.75;margin-bottom:14px}

/* ── Step cards ── */
.steps-grid{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.step-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;transition:var(--transition)}
.step-card:hover{border-color:var(--border2);background:var(--bg4)}
.step-num{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#000;font-family:var(--font-mono);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-content h4{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px}
.step-content p{font-size:13px;color:var(--text2);line-height:1.6}

/* ── Code blocks ── */
.code-block{background:#050d1a;border:1px solid var(--border);border-radius:10px;margin:14px 0;overflow:hidden;max-width:100%}
.code-header{background:var(--bg4);padding:7px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:8px}
.code-lang{font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--accent2);letter-spacing:.5px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-copy{font-size:11px;color:var(--text3);cursor:pointer;font-family:var(--font-mono);background:none;border:none;transition:var(--transition);padding:2px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}
.code-copy:hover{color:var(--accent);background:rgba(0,180,255,0.1)}
pre{padding:16px 18px;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:#A8C7FA;overflow-x:auto;white-space:pre;word-break:normal;overflow-wrap:normal;-webkit-overflow-scrolling:touch}
pre .kw{color:#FF79C6}pre .str{color:#F1FA8C}pre .cm{color:#5a6a8a;font-style:italic}
pre .fn{color:#50FA7B}pre .num{color:#BD93F9}pre .cls{color:#8BE9FD}pre .op{color:#FF79C6}

/* ── Info boxes ── */
.info-box,.success-box,.warn-box{border-radius:10px;padding:13px 16px;margin:14px 0;display:flex;gap:11px}
.info-box{background:rgba(0,180,255,0.06);border:1px solid rgba(0,180,255,0.18)}
.success-box{background:rgba(0,255,178,0.05);border:1px solid rgba(0,255,178,0.18)}
.warn-box{background:rgba(255,107,53,0.06);border:1px solid rgba(255,107,53,0.18)}
.info-icon{font-size:15px;flex-shrink:0;margin-top:1px}
.info-text,.success-text,.warn-text{font-size:13px;color:var(--text2);line-height:1.65}
.info-text strong{color:var(--accent)}.success-text strong{color:var(--accent2)}.warn-text strong{color:var(--accent3)}

/* ── Feature grid ── */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:14px 0}
.feature-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px 15px;transition:var(--transition)}
.feature-card:hover{border-color:var(--border2)}
.feature-card .fc-icon{font-size:20px;margin-bottom:8px}
.feature-card .fc-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px;font-family:var(--font-display)}
.feature-card .fc-desc{font-size:12px;color:var(--text3);line-height:1.5}

/* ── Table ── */
.table-wrap{overflow-x:auto;margin:14px 0;border-radius:10px;border:1px solid var(--border)}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{background:var(--bg4);color:var(--accent);font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;padding:9px 13px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td{padding:9px 13px;border-bottom:1px solid rgba(0,180,255,0.06);color:var(--text2);vertical-align:top}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(255,255,255,0.02)}
.data-table code{font-family:var(--font-mono);color:var(--accent2);font-size:11px}

/* ── Topic nav ── */
.topic-nav{display:flex;justify-content:space-between;gap:12px;margin-top:44px;padding-top:22px;border-top:1px solid var(--border)}
.tnav-btn{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:13px 16px;cursor:pointer;transition:var(--transition);text-align:center;display:block;min-width:0}
.tnav-btn:hover{border-color:var(--border2);background:var(--bg4)}
.tnav-btn .tnav-dir{font-size:10px;color:var(--text3);font-family:var(--font-mono);margin-bottom:3px}
.tnav-btn .tnav-title{font-size:13px;font-weight:600;color:var(--text);font-family:var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnav-btn.fwd{text-align:right}

/* ── Pills ── */
.pill{display:inline-block;background:rgba(0,255,178,0.1);border:1px solid rgba(0,255,178,0.2);color:var(--accent2);font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;font-family:var(--font-mono);margin:2px}
.pill.blue{background:rgba(0,180,255,0.1);border-color:rgba(0,180,255,0.2);color:var(--accent)}
.pill.orange{background:rgba(255,107,53,0.1);border-color:rgba(255,107,53,0.2);color:var(--accent3)}
.pill.yellow{background:rgba(255,214,0,0.1);border-color:rgba(255,214,0,0.2);color:var(--accent4)}
.pill.purple{background:rgba(187,134,252,0.1);border-color:rgba(187,134,252,0.2);color:var(--accent5)}
code.inline{font-family:var(--font-mono);color:var(--accent2);font-size:12px;background:rgba(0,255,178,0.07);padding:2px 6px;border-radius:4px}

/* ── Footer ── */
#footer{background:var(--bg2);border-top:1px solid var(--border);margin-top:auto}
.footer-inner{max-width:1200px;margin:0 auto;padding:40px 32px 28px;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px}
.footer-brand .logo{margin-bottom:12px}
.footer-brand p{font-size:13px;color:var(--text3);line-height:1.7;max-width:240px;margin-bottom:16px}
.footer-social{display:flex;gap:8px}
.footer-social a{width:32px;height:32px;background:var(--bg3);border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text3);transition:var(--transition)}
.footer-social a:hover{color:var(--accent);border-color:var(--border2);background:var(--bg4)}
.footer-col h4{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px;letter-spacing:.3px}
.footer-col ul{display:flex;flex-direction:column;gap:7px}
.footer-col ul li a{font-size:13px;color:var(--text3);transition:var(--transition)}
.footer-col ul li a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding:16px 32px;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer-bottom p{font-size:12px;color:var(--text4);font-family:var(--font-mono)}
.footer-bottom span{color:var(--accent3)}
.footer-tags{display:flex;gap:6px;flex-wrap:wrap}
.footer-tags .pill{font-size:10px}

/* ── Progress bar ── */
#progress-bar{position:fixed;top:var(--header-h);left:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:1001;width:0%;transition:width .1s linear}

/* ── Highlight / skeleton ── */
.highlight{background:rgba(255,214,0,0.25);border-radius:2px}
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ================================================================
   RESPONSIVE — Large Tablet ≤1024px
   ================================================================ */
@media(max-width:1024px){
  .hamburger{display:flex}
  .top-nav{display:none}
  .topbar-stats{display:none}
  .top-badge{display:none}
  .mobile-menu{display:block}
  /* Sidebar hide on tablet */
  #sidebar{display:block;position:fixed;top:0;left:-280px;width:280px;height:100vh;z-index:900;transition:left .3s cubic-bezier(.4,0,.2,1);overflow-y:auto}
  #sidebar.open{left:0}
  /* Footer responsive */
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:none}
}

/* ================================================================
   RESPONSIVE — Tablet ≤768px
   ================================================================ */
@media(max-width:768px){
  :root{--header-h:56px;--nav-h:42px}
  #topbar{padding:0 14px}
  .logo-text{font-size:15px}
  #sidebar{display:block;position:fixed;top:0;left:-280px;width:280px;height:100vh;z-index:900;transition:left .3s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 32px rgba(0,0,0,.5);padding-top:calc(var(--header-h) + var(--nav-h));overflow-y:auto}
  #sidebar.open{left:0}
  .sidebar-close{display:flex}
  /* ── Core fix: column layout, main fills full width ── */
  #layout{flex-direction:column;width:100%}
  #main{width:100%;max-width:100%;padding:20px 16px 72px;box-sizing:border-box;overflow-x:hidden}
  /* Remove 820px cap — let content fill the phone screen */
  #main .topic-section>*:not(.topic-nav){max-width:100%}
  #skillnav{padding:0 10px;gap:4px}
  .skill-tab{padding:6px 10px;font-size:12px}
  .topic-hero{flex-direction:column;gap:12px}
  .topic-icon-big{width:44px;height:44px;font-size:20px}
  .topic-title{font-size:24px}
  .feature-grid{grid-template-columns:1fr 1fr;gap:8px}
  pre{font-size:11.5px;padding:14px}
  .topic-nav{flex-direction:column;gap:8px}
  .tnav-btn,.tnav-btn.fwd{text-align:left;flex:auto;width:100%}
  .table-wrap{overflow-x:auto;border-radius:8px}
  /* Bare data-table scrolls instead of overflowing */
  .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
  p.body{font-size:14px}
  code.inline{font-size:11.5px}
  /* Footer responsive — 2 columns: Brand+Courses left, Resources+About right */
  .footer-inner{grid-template-columns:1fr 1fr;padding:28px 20px 20px;gap:20px}
  .footer-brand{grid-column:1;grid-row:1}
  .footer-col:nth-child(2){grid-column:1;grid-row:2}
  .footer-col:nth-child(3){grid-column:2;grid-row:1}
  .footer-col:nth-child(4){grid-column:2;grid-row:2}
  .footer-bottom{padding:14px 20px;flex-direction:column;align-items:flex-start}
}

/* ================================================================
   RESPONSIVE — Large Phone ≤600px
   ================================================================ */
@media(max-width:600px){
  /* 2-column feature grid */
  .feature-grid{grid-template-columns:1fr 1fr;gap:8px}
  .feature-card{padding:12px 13px;border-radius:9px}
  .feature-card .fc-icon{font-size:18px;margin-bottom:5px}
  .feature-card .fc-title{font-size:12px}
  .feature-card .fc-desc{font-size:11px;line-height:1.45}
  /* Step cards */
  .step-card{padding:12px 13px;gap:10px}
  .step-num{width:28px;height:28px;font-size:11px;border-radius:6px}
  .step-content h4{font-size:13px}
  .step-content p{font-size:12.5px}
  /* Topic hero */
  .topic-title{font-size:22px}
  .topic-hero{gap:10px;margin-bottom:20px}
  .topic-badge{font-size:9px}
  .topic-desc{font-size:13px}
  /* Info boxes */
  .info-box,.success-box,.warn-box{padding:11px 13px;gap:9px}
  .info-text,.success-text,.warn-text{font-size:12.5px}
  /* Content tabs */
  .ctab{padding:8px 13px;font-size:12px}
  /* Topic nav */
  .topic-nav{margin-top:32px;gap:8px}
  .tnav-btn{padding:12px 14px}
}

/* ================================================================
   RESPONSIVE — Mobile ≤480px
   ================================================================ */
@media(max-width:480px){
  :root{--header-h:52px;--nav-h:40px}
  .logo-text{font-size:14px}
  .skill-tab .skill-label{display:none}
  .skill-tab{padding:6px 9px}
  #main{width:100%;padding:14px 12px 72px}
  /* Feature cards — CSS grid: icon spans both rows, title+desc stack right */
  .feature-grid{grid-template-columns:1fr;gap:8px}
  .feature-card{
    display:grid;
    grid-template-columns:32px 1fr;
    grid-template-rows:auto auto;
    column-gap:11px;
    row-gap:1px;
    padding:13px 14px;
    align-items:start;
    border-radius:10px;
  }
  .feature-card .fc-icon{grid-row:1/3;font-size:22px;margin-bottom:0;padding-top:1px}
  .feature-card .fc-title{font-size:13px;font-weight:600;margin-bottom:0;line-height:1.3}
  .feature-card .fc-desc{font-size:12px;line-height:1.45;color:var(--text3)}
  /* Step cards */
  .step-card{padding:11px 12px;gap:10px;border-radius:10px}
  .step-num{width:28px;height:28px;font-size:11px}
  .step-content h4{font-size:13px;margin-bottom:2px}
  .step-content p{font-size:12.5px;line-height:1.55}
  /* Topic title & headings */
  .topic-title{font-size:20px;letter-spacing:-.3px}
  h2.section-h{font-size:17px}
  h3.section-h3{font-size:14px}
  /* Info boxes */
  .info-box,.success-box,.warn-box{padding:11px 12px;gap:8px;border-radius:9px}
  .info-text,.success-text,.warn-text{font-size:12px}
  /* Content tabs */
  .content-tabs{margin-bottom:18px}
  .ctab{padding:8px 11px;font-size:12px}
  /* Topic nav */
  .topic-nav{flex-direction:column;gap:6px;margin-top:28px}
  .tnav-btn,.tnav-btn.fwd{text-align:left;flex:auto;padding:11px 13px;border-radius:9px}
  .tnav-btn .tnav-dir{font-size:9px}
  .tnav-btn .tnav-title{font-size:12px}
  /* Code blocks */
  .code-block{margin:10px 0;border-radius:8px}
  pre{font-size:11px;padding:12px}
  .code-lang{font-size:9px}
  /* Tables */
  .data-table th{padding:8px 10px;font-size:9px}
  .data-table td{padding:8px 10px;font-size:12.5px}
  /* Footer responsive */
  .footer-inner{padding:22px 14px 14px}
  .footer-bottom{padding:12px 14px}
}

/* ================================================================
   RESPONSIVE — Small Mobile ≤360px
   ================================================================ */
@media(max-width:360px){
  :root{--header-h:50px;--nav-h:38px}
  .logo-text{display:none}
  .logo-icon{width:28px;height:28px;font-size:11px}
  .hamburger{width:34px;height:34px}
  .hamburger span{width:16px}
  #main{width:100%;padding:12px 10px 72px}
  /* Feature cards — tighter at 360px */
  .feature-grid{gap:6px}
  .feature-card{padding:11px 12px;column-gap:9px;border-radius:9px}
  .feature-card .fc-icon{font-size:20px;grid-template-columns:28px 1fr}
  .feature-card .fc-title{font-size:12px}
  .feature-card .fc-desc{font-size:11px}
  /* Step cards */
  .step-card{padding:10px 11px;gap:9px}
  .step-num{width:26px;height:26px;font-size:10px;border-radius:6px}
  .step-content h4{font-size:12px}
  .step-content p{font-size:12px}
  /* Headings */
  .topic-title{font-size:18px}
  h2.section-h{font-size:15px}
  h3.section-h3{font-size:13px}
  /* Code */
  .code-block{margin:8px -2px;border-radius:8px}
  pre{font-size:10.5px;padding:10px}
  .code-lang{font-size:8.5px}
  /* Tables */
  .data-table th{font-size:8.5px;padding:6px 8px}
  .data-table td{font-size:11.5px;padding:7px 8px}
  /* Info boxes */
  .info-box,.success-box,.warn-box{padding:10px 11px}
  .info-text,.success-text,.warn-text{font-size:11.5px}
  /* Topic nav */
  .tnav-btn{padding:10px 12px;border-radius:8px}
  .tnav-btn .tnav-title{font-size:11.5px}
  /* Footer responsive */
  .footer-inner{padding:20px 12px 12px}
  .footer-bottom{padding:10px 12px}
  .footer-col h4{font-size:12px}
  .footer-col ul li a{font-size:12px}
}