/* layout.css — App shell, top navigation, sidebar and module-section layout.
   Extracted from the original single-file index.html (2026-08-29 split).
*/

/* ═══════════════════════════════════════════════ LAYOUT */
.app-shell{display:flex;min-height:100vh;position:relative}
.sidebar{width:var(--sidebar);min-height:100vh;background:var(--bg2);border-right:1px solid var(--border2);position:fixed;top:0;left:0;overflow-y:auto;z-index:200;transition:transform var(--transition),background var(--transition);scrollbar-width:thin;scrollbar-color:var(--bg3) transparent}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:4px}
.main-wrapper{margin-left:var(--sidebar);flex:1;display:flex;flex-direction:column;min-height:100vh}
.topnav{position:sticky;top:0;z-index:100;height:var(--nav);background:var(--bg2);border-bottom:1px solid var(--border2);display:flex;align-items:center;padding:0 1.5rem;gap:1rem;backdrop-filter:blur(12px)}
main{flex:1;padding:2rem 2.5rem 4rem;max-width:960px;margin:0 auto;width:100%}

/* ═══════════════════════════════════════════════ TOPNAV */
.nav-brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1rem;white-space:nowrap}
.nav-brand-icon{font-size:1.4rem}
.nav-spacer{flex:1}
.nav-xp-wrap{display:flex;align-items:center;gap:.6rem;background:var(--bg3);padding:.35rem .75rem;border-radius:999px}
.nav-xp-label{font-size:.75rem;color:var(--text2);font-weight:600}
.nav-xp-bar{width:80px;height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.nav-xp-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:3px;transition:width .4s ease}
.nav-level{font-size:.75rem;font-weight:700;color:var(--accent2)}
.nav-streak{display:flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--amber)}
.nav-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--text);width:36px;height:36px;border-radius:var(--r);font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.nav-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.hamburger{display:none}

/* ═══════════════════════════════════════════════ SIDEBAR */
.sidebar-inner{padding:.75rem 0 2rem}
.sidebar-brand{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.2rem 1rem;border-bottom:1px solid var(--border2);margin-bottom:.5rem}
.sidebar-logo{font-size:1.6rem}
.sidebar-title{font-weight:800;font-size:1rem;background:linear-gradient(135deg,var(--accent2),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sidebar-section{margin-bottom:.5rem}
.sidebar-section-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);padding:.5rem 1.2rem .3rem}
.s-link{display:flex;align-items:center;gap:.65rem;padding:.5rem 1.2rem;color:var(--text2);font-size:.82rem;font-weight:500;transition:all var(--transition);border-left:3px solid transparent;position:relative}
.s-link:hover{color:var(--text);background:var(--border2);border-left-color:var(--accent2)}
.s-link.active{color:var(--accent2);background:rgba(99,102,241,.1);border-left-color:var(--accent)}
.s-link.done .s-num::after{content:'✓';position:absolute;font-size:.6rem;top:-2px;right:-2px;color:var(--green)}
.s-num{position:relative;font-size:.68rem;font-weight:700;color:var(--text3);background:var(--bg3);width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.s-link.active .s-num{background:var(--accent);color:#fff}
.s-link.done .s-num{background:rgba(16,185,129,.2);color:var(--green)}
.s-icon{font-size:.95rem;flex-shrink:0}

/* ═══════════════════════════════════════════════ MODULE SECTIONS */
.module-section{margin-bottom:4rem;scroll-margin-top:calc(var(--nav) + 1.5rem)}
.module-header{border-radius:var(--r2);padding:2rem 2rem 1.6rem;margin-bottom:2rem;position:relative;overflow:hidden}
.module-header::before{content:'';position:absolute;inset:0;background:var(--grad,linear-gradient(135deg,rgba(99,102,241,.3),rgba(6,182,212,.2)));z-index:0}
.module-header-content{position:relative;z-index:1}
.module-num{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent3);margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem}
.module-num::before{content:'';display:block;width:24px;height:2px;background:var(--accent)}
.module-title{font-size:1.9rem;font-weight:800;margin-bottom:.5rem}
.module-desc{color:var(--text2);font-size:1rem;max-width:600px}
.module-complete-btn{margin-top:2rem;display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--accent),var(--cyan));color:#fff;border:none;padding:.55rem 1.3rem;border-radius:999px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition);box-shadow:0 4px 14px rgba(99,102,241,.35)}
.module-complete-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.45)}
.module-complete-btn.done{background:linear-gradient(135deg,var(--green),#059669);cursor:default}