/* ════════════════════════════════════════════
   CSS VARIABLES — DARK (default) + LIGHT
════════════════════════════════════════════ */
:root,[data-theme="dark"] {
  --bg-root:#0C0F1E; --bg-dark:#080B16; --bg-card:#111828; --bg-card2:#172038;
  --bg-panel:#0E1220; --bg-input:#0A0E1A;
  --gold:#C9A227; --gold-light:#E8CE6B; --gold-bright:#F5E18C; --gold-dim:#8A6E1A;
  --gold-glow:rgba(201,162,39,0.18); --gold-border:rgba(201,162,39,0.32); --gold-bg:rgba(201,162,39,0.08);
  --teal:#0D6B6E; --teal-light:#4AC8CC; --teal-bg:rgba(13,107,110,0.14); --teal-border:rgba(13,107,110,0.42);
  --navy:#1F3864; --green:#4CAF7D; --green-bg:rgba(76,175,125,0.13);
  --red:#E05555; --purple:#7B5EA7;
  --text-white:#F0EBE0; --text-body:#9BAAC8; --text-muted:#5A6A8A; --text-faint:#2A3555;
  --border:#1E2A42; --border-gold:rgba(201,162,39,0.32);
  --shadow:rgba(0,0,0,0.6);
  --font-d:'Barlow Condensed',sans-serif; --font-h:'Rajdhani',sans-serif;
  --font-b:'Barlow',sans-serif; --font-m:'Space Mono',monospace;
  --r:8px; --rl:14px; --nav-w:272px; --t:0.2s ease;
}
[data-theme="light"] {
  --bg-root:#F4F6FB; --bg-dark:#E8EDF5; --bg-card:#FFFFFF; --bg-card2:#EFF2F9;
  --bg-panel:#F0F3FA; --bg-input:#E8EDF5;
  --gold:#A07C10; --gold-light:#C9A227; --gold-bright:#E8CE6B; --gold-dim:#8A6E1A;
  --gold-glow:rgba(160,124,16,0.12); --gold-border:rgba(160,124,16,0.28); --gold-bg:rgba(160,124,16,0.06);
  --teal:#0A5558; --teal-light:#0D6B6E; --teal-bg:rgba(10,85,88,0.08); --teal-border:rgba(10,85,88,0.25);
  --navy:#1F3864; --green:#2E8B57; --green-bg:rgba(46,139,87,0.1);
  --red:#C0392B; --purple:#6A4E9A;
  --text-white:#1A2035; --text-body:#3A4A6A; --text-muted:#6A7A9A; --text-faint:#A0AABF;
  --border:#D4DCF0; --border-gold:rgba(160,124,16,0.28);
  --shadow:rgba(0,0,0,0.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{background:var(--bg-root);color:var(--text-white);font-family:var(--font-b);min-height:100vh;overflow-x:hidden;transition:background 0.3s,color 0.3s;}
a{color:var(--gold);text-decoration:none}
button{cursor:pointer;border:none;outline:none;font-family:var(--font-h)}
input,textarea,select{font-family:var(--font-b);outline:none}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg-dark)}
::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:10px}
[data-theme="dark"] body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(201,162,39,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,39,0.03) 1px,transparent 1px);background-size:56px 56px;pointer-events:none;z-index:0;}
/* ─── LIGHT MODE OVERRIDES ─── */
[data-theme="light"] .cl-box{border-color:#8A9ABF;}
[data-theme="light"] .cl-item{background:#F0F3FA;border-color:#C8D0E8;}
[data-theme="light"] .cl-item:hover{background:#E8EDF5;border-color:rgba(160,124,16,0.3);}
[data-theme="light"] .cl-item.done{background:rgba(46,139,87,0.06);border-color:rgba(46,139,87,0.3);}
[data-theme="light"] .checklist-wrap{background:#FFFFFF;border-color:rgba(160,124,16,0.25);}
[data-theme="light"] .welcome-banner{background:#FFFFFF;}
[data-theme="light"] .stat-card{background:#FFFFFF;}
[data-theme="light"] .goal-panel{background:#F0F3FA;}
[data-theme="light"] .goal-metric{background:#FFFFFF;border-color:#D4DCF0;}
[data-theme="light"] .goal-setter-card{background:#FFFFFF;border-color:#D4DCF0;}
[data-theme="light"] .module-card{background:#FFFFFF;}
[data-theme="light"] .module-hero{background:#FFFFFF;}
[data-theme="light"] .lesson-card{background:#FFFFFF;}
[data-theme="light"] .lesson-summary-card{background:#FFFFFF;}
[data-theme="light"] .ls-card{background:#FFFFFF;}
[data-theme="light"] .lesson-controls{background:#FFFFFF;}
[data-theme="light"] .video-placeholder{background:linear-gradient(135deg,#D8E0F0,#E8EDF5);}
[data-theme="light"] .question-card{background:#FFFFFF;}
[data-theme="light"] .option{background:#F0F3FA;}
[data-theme="light"] .quiz-result,[data-theme="light"] .quiz-header{background:#FFFFFF;}
[data-theme="light"] .wallet-hero{background:linear-gradient(135deg,#E8EDF5,#F0F3FA);}
[data-theme="light"] .wallet-notice{background:rgba(160,124,16,0.06);}
[data-theme="light"] .reward-card,[data-theme="light"] .earn-history,[data-theme="light"] .card-block{background:#FFFFFF;}
[data-theme="light"] .profile-form-card,[data-theme="light"] .profile-avatar-wrap{background:#FFFFFF;}
[data-theme="light"] .profile-stats{background:#FFFFFF;border:1px solid #D4DCF0;}
[data-theme="light"] .comm-card{background:#FFFFFF;}
[data-theme="light"] .eco-card{background:#EFF2F9;}
[data-theme="light"] .rs-card{background:#FFFFFF;}
[data-theme="light"] .rs-card.active{background:rgba(160,124,16,0.06);}
[data-theme="light"] .week-header{background:rgba(31,56,100,0.08);border-color:rgba(31,56,100,0.15);}
[data-theme="light"] .pricing-card{background:#FFFFFF;}
[data-theme="light"] #sidebar{background:#F0F3FA;border-right-color:#D4DCF0;}
[data-theme="light"] .nav-item:hover{background:#E8EDF5;}
[data-theme="light"] .nav-item.active{background:rgba(160,124,16,0.1);}
[data-theme="light"] .checklist-progress,[data-theme="light"] .progress-track,[data-theme="light"] .quiz-pbar{background:#D4DCF0;}
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:#F0F3FA;border-color:#C8D0E8;color:#1A2035;}
[data-theme="light"] .lnav-item:hover{background:#E8EDF5;}
[data-theme="light"] .lnav-item.current{background:rgba(160,124,16,0.1);}
[data-theme="light"] .ps-item,[data-theme="light"] .eh-item{border-bottom-color:#D4DCF0;}
[data-theme="light"] .eh-header{border-bottom-color:#D4DCF0;}
[data-theme="light"] .lesson-summary-card h3,[data-theme="light"] .ls-card h4{border-bottom-color:#D4DCF0;}
[data-theme="light"] .wh-points{text-shadow:none;}
/* ─── LIGHT MODE CONTRAST FIXES ─── */
[data-theme="light"] .page-header h2{color:#1A2035;}
[data-theme="light"] .mc-title{color:#1A2035;}
[data-theme="light"] .mc-desc{color:#3A4A6A;}
[data-theme="light"] .wh-title{color:#1A2035;}
[data-theme="light"] .wh-status{color:#6A7A9A;}
[data-theme="light"] .stat-label{color:#5A6A8A;}
[data-theme="light"] .stat-value{color:#1A2035;}  
[data-theme="light"] .mh-title{color:#1A2035;}
[data-theme="light"] .mh-desc{color:#3A4A6A;}
[data-theme="light"] .lc-title{color:#1A2035;}
[data-theme="light"] .lc-sub{color:#5A6A8A;}
[data-theme="light"] .q-text{color:#1A2035;}
[data-theme="light"] .option{color:#1A2035;}
[data-theme="light"] .eh-desc{color:#1A2035;}
[data-theme="light"] .ps-label{color:#5A6A8A;}
[data-theme="light"] .breadcrumb{color:#6A7A9A;}
[data-theme="light"] .page-header p{color:#3A4A6A;}
[data-theme="light"] .wb-text p{color:#3A4A6A;}
[data-theme="light"] .lesson-summary{color:#3A4A6A;}
[data-theme="light"] .rs-sub{color:#5A6A8A;}
[data-theme="light"] .eco-card p{color:#3A4A6A;}
[data-theme="light"] .comm-card p{color:#5A6A8A;}
[data-theme="light"] .cl-desc{color:#5A6A8A;}
[data-theme="light"] .gc-name{color:#3A4A6A;}
[data-theme="light"] .lnav-item{color:#5A6A8A;}
[data-theme="light"] .nav-item{color:#5A6A8A;}
[data-theme="light"] .nav-label{color:#8A9ABF;}
[data-theme="light"] .sb-logo-sub{color:#0D6B6E;}
[data-theme="light"] .sw-label{color:#8A6E1A;}
[data-theme="light"] .sw-sub{color:#6A7A9A;}
[data-theme="light"] .vp-label{color:#5A6A8A;}
[data-theme="light"] .mc-num{color:#8A9ABF;}
[data-theme="light"] .wh-sub{color:#6A7A9A;}
[data-theme="light"] .eh-time{color:#6A7A9A;}
[data-theme="light"] .activity-time{color:#6A7A9A;}
[data-theme="light"] .goal-setter-card .gs-desc{color:#3A4A6A;}
[data-theme="light"] .sidebar-brand{border-bottom-color:#D4DCF0;}
[data-theme="light"] .sidebar-footer{border-top-color:#D4DCF0;}
[data-theme="light"] .sidebar-plan-badge{background:linear-gradient(135deg,rgba(31,56,100,0.08),rgba(10,85,88,0.05));}
[data-theme="light"] .user-name{color:#1A2035;}
[data-theme="light"] .user-email{color:#6A7A9A;}
[data-theme="light"] .sb-owned{color:#8A9ABF;}
[data-theme="light"] .module-card.locked{opacity:0.55;}
[data-theme="light"] .wh-label{color:#8A6E1A;}


/* ─── LOADING ─── */
#loading-screen{position:fixed;inset:0;z-index:9999;background:var(--bg-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;}
.loader-emblem{position:relative;width:96px;height:96px}
.loader-ring{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;animation:spin 2s linear infinite;}
.loader-ring.r1{border-top-color:var(--gold);border-right-color:var(--gold-dim);}
.loader-ring.r2{inset:14px;border-bottom-color:var(--teal);border-left-color:var(--teal-border);animation-direction:reverse;animation-duration:1.5s;}
.loader-core{position:absolute;inset:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold-dim),var(--gold));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1rem;font-weight:800;color:#0A0A0A;}
.loader-bar-wrap{width:240px;height:2px;background:var(--border);border-radius:10px;overflow:hidden}
.loader-bar-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--gold),var(--gold-bright));border-radius:10px;animation:load 2.8s ease forwards}
.loader-text{font-family:var(--font-d);font-size:1.4rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);}
.loader-tag{font-family:var(--font-m);font-size:0.64rem;color:var(--text-muted);letter-spacing:1.5px;text-align:center;line-height:1.9}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes load{from{width:0}to{width:100%}}

/* ─── CONFETTI ─── */
@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(105vh) rotate(900deg);opacity:0}}
.confetti-piece{position:fixed;pointer-events:none;z-index:99999;animation:confetti-fall linear forwards;}

/* ─── TOAST ─── */
.points-toast{position:fixed;top:1.5rem;right:1.5rem;z-index:9998;background:var(--bg-card);border:1px solid var(--gold-border);border-top:2px solid var(--gold);border-radius:var(--rl);padding:1rem 1.5rem;display:flex;align-items:center;gap:0.9rem;box-shadow:0 8px 40px var(--shadow),0 0 30px var(--gold-glow);transform:translateX(160%);transition:transform 0.4s cubic-bezier(.34,1.56,.64,1);min-width:260px;}
.points-toast.show{transform:translateX(0)}
.pt-coin{font-size:1.8rem}
.pt-main{font-family:var(--font-d);font-weight:700;font-size:1.05rem;color:var(--gold);letter-spacing:1px}
.pt-sub{font-size:0.73rem;color:var(--text-body);margin-top:0.15rem}

/* ─── AUTH ─── */
#auth-view{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem;position:relative;z-index:1;}
.auth-chain{display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem;}
.auth-chain-item{padding:0.28rem 0.8rem;border:1px solid var(--gold-border);border-radius:20px;font-size:0.68rem;font-weight:700;color:var(--gold);font-family:var(--font-h);letter-spacing:0.5px;background:var(--gold-bg);}
.auth-chain-arrow{color:var(--text-muted);font-size:0.85rem}
.auth-card{background:var(--bg-card);border:1px solid var(--border-gold);border-radius:var(--rl);padding:2rem;width:100%;max-width:460px;position:relative;box-shadow:0 0 80px var(--shadow),0 0 40px var(--gold-glow);animation:fadeUp 0.5s ease;}
.auth-card::before{content:'';position:absolute;top:0;left:5%;right:5%;height:2px;background:linear-gradient(90deg,transparent,var(--teal),var(--gold),transparent);}
.auth-resume{background:var(--teal-bg);border:1px solid var(--teal-border);border-radius:var(--r);padding:0.85rem 1rem;margin-bottom:1.2rem;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;}
.auth-resume-text{font-size:0.82rem;color:var(--teal-light);font-family:var(--font-h);font-weight:600}
.btn-resume{background:var(--teal);color:#fff;padding:0.45rem 1.1rem;border-radius:var(--r);font-family:var(--font-d);font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;transition:var(--t);}
.btn-resume:hover{background:var(--teal-light);color:#0A0A0A}
.auth-brand{text-align:center;margin-bottom:1.75rem}
.auth-brand-badge{display:inline-block;padding:0.22rem 0.9rem;background:var(--teal-bg);border:1px solid var(--teal-border);border-radius:20px;font-family:var(--font-m);font-size:0.6rem;color:var(--teal-light);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:0.85rem;}
.auth-brand h1{font-family:var(--font-d);font-size:clamp(1.6rem,7vw,2.2rem);font-weight:800;letter-spacing:clamp(1px,0.3vw,3px);text-transform:uppercase;background:linear-gradient(135deg,var(--gold-light),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;}
.auth-new-era{font-family:var(--font-h);font-size:0.88rem;font-weight:600;color:var(--teal-light);margin-top:0.3rem;letter-spacing:1px;-webkit-text-fill-color:initial;}
.auth-tagline{color:var(--text-muted);font-size:0.7rem;font-family:var(--font-m);letter-spacing:1px;margin-top:0.2rem;-webkit-text-fill-color:initial}
.auth-sub{color:var(--text-body);font-size:0.8rem;margin-top:0.5rem;line-height:1.55}
.auth-tabs{display:flex;margin-bottom:1.6rem;background:var(--bg-panel);border-radius:var(--r);padding:4px;border:1px solid var(--border);}
.auth-tab{flex:1;padding:0.55rem;font-size:0.83rem;font-weight:700;border-radius:6px;background:transparent;color:var(--text-muted);transition:var(--t);font-family:var(--font-h);letter-spacing:0.5px;text-transform:uppercase;}
.auth-tab.active{background:var(--gold);color:#0A0A0A}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:0.68rem;font-weight:700;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:0.38rem;font-family:var(--font-h);}
.form-group input,.form-group select{width:100%;padding:0.72rem 1rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r);color:var(--text-white);font-size:0.86rem;transition:var(--t);}
.form-group input:focus,.form-group select:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.form-group select option{background:var(--bg-card)}
.btn-primary{width:100%;padding:0.85rem;background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:#0A0A0A;font-weight:800;font-size:0.95rem;border-radius:var(--r);transition:var(--t);letter-spacing:1.5px;text-transform:uppercase;font-family:var(--font-d);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--gold-glow)}
.btn-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.auth-error{background:rgba(224,85,85,0.1);border:1px solid rgba(224,85,85,0.35);border-radius:var(--r);padding:0.65rem 1rem;color:var(--red);font-size:0.8rem;margin-bottom:0.9rem;display:none;}
.auth-info{background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:var(--r);padding:0.7rem 1rem;color:var(--gold);font-size:0.78rem;margin-top:1.1rem;line-height:1.55;}
.auth-info code{background:var(--bg-dark);padding:1px 6px;border-radius:4px;font-family:var(--font-m);font-size:0.78em;}
.auth-divider{display:flex;align-items:center;gap:1rem;margin:1.1rem 0;color:var(--text-muted);font-size:0.72rem;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.btn-google{width:100%;padding:0.75rem;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r);color:var(--text-body);font-size:0.83rem;display:flex;align-items:center;justify-content:center;gap:0.7rem;transition:var(--t);}
.btn-google:hover{border-color:var(--gold-border);color:var(--text-white)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ─── APP SHELL ─── */
/* No z-index/positioning context here on purpose — #sidebar and
   #sidebarOverlay are position:fixed and need their z-index values
   (10000 vs 9999) to compare at the ROOT stacking context. Giving
   #app-shell its own z-index would trap the sidebar's z-index inside
   it, letting the overlay (a root-level sibling) cover the whole
   app — including the sidebar's own buttons. That was the bug. */
#app-shell{display:none;min-height:100vh}
#app-shell.visible{display:flex}

/* ─── SIDEBAR ─── */
#sidebar{width:var(--nav-w);background:var(--bg-dark);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;overflow-y:auto;transition:transform var(--t),background 0.3s;}
.sidebar-brand{padding:1.3rem 1.1rem 0.9rem;border-bottom:1px solid var(--border);}
.sb-logo-main{font-family:var(--font-d);font-size:1.15rem;font-weight:800;letter-spacing:2px;color:var(--gold);text-transform:uppercase;line-height:1}
.sb-logo-sub{font-family:var(--font-m);font-size:0.58rem;color:var(--teal-light);letter-spacing:1.5px;text-transform:uppercase;margin-top:0.15rem}
.sb-owned{font-family:var(--font-m);font-size:0.5rem;color:var(--text-muted);letter-spacing:1px;margin-top:0.2rem}
.sidebar-plan-badge{margin:0.7rem 1rem 0;padding:0.55rem 0.9rem;background:linear-gradient(135deg,rgba(31,56,100,0.4),var(--teal-bg));border:1px solid var(--teal-border);border-radius:var(--r);display:flex;align-items:center;justify-content:space-between;}
.spb-label{font-family:var(--font-m);font-size:0.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.spb-plan{font-family:var(--font-d);font-size:0.85rem;font-weight:700;color:var(--teal-light);letter-spacing:1px}
.sidebar-wallet{margin:0.65rem 1rem 0;background:linear-gradient(135deg,var(--gold-bg),rgba(201,162,39,0.03));border:1px solid var(--border-gold);border-radius:var(--r);padding:0.85rem;cursor:pointer;transition:var(--t);position:relative;overflow:hidden;}
.sidebar-wallet::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.sidebar-wallet:hover{border-color:var(--gold)}
.sw-label{font-size:0.62rem;color:var(--gold-dim);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-family:var(--font-h)}
.sw-points{font-family:var(--font-d);font-size:1.7rem;font-weight:700;color:var(--gold);line-height:1.1;letter-spacing:2px;}
.sw-sub{font-size:0.62rem;color:var(--text-muted);margin-top:0.15rem}
.nav-section{padding:0.9rem 0.75rem 0}
.nav-label{font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-faint);padding:0 0.38rem;margin-bottom:0.38rem;font-family:var(--font-h);}
.nav-item{display:flex;align-items:center;gap:0.7rem;padding:0.58rem 0.85rem;border-radius:var(--r);color:var(--text-muted);font-size:0.76rem;font-weight:600;cursor:pointer;transition:var(--t);margin-bottom:2px;border:1px solid transparent;font-family:var(--font-h);letter-spacing:0.3px;text-transform:uppercase;position:relative;}
.nav-item:hover{background:var(--bg-card);color:var(--text-white)}
.nav-item.active{background:var(--gold-bg);color:var(--gold);border-color:var(--border-gold);}
.nav-icon{width:17px;text-align:center;flex-shrink:0;font-size:0.88rem}
.sidebar-footer{margin-top:auto;padding:0.85rem;border-top:1px solid var(--border);}
.user-pill{display:flex;align-items:center;gap:0.65rem;padding:0.45rem 0;margin-bottom:0.5rem;cursor:pointer;}
.user-pill:hover .user-name{color:var(--gold)}
.user-avatar-wrap{position:relative;flex-shrink:0;}
.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--teal));border:1px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem;color:var(--gold);font-family:var(--font-d);overflow:hidden;}
.user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.user-name{font-size:0.82rem;font-weight:600;color:var(--text-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px;font-family:var(--font-h);transition:var(--t);}
.user-email{font-size:0.66rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px}
.sb-footer-actions{display:flex;gap:0.5rem;align-items:center;}
.btn-logout{flex:1;background:transparent;color:var(--text-muted);font-size:0.7rem;padding:0.42rem;border:1px solid var(--border);border-radius:6px;transition:var(--t);font-family:var(--font-h);letter-spacing:0.5px;text-transform:uppercase;}
.btn-logout:hover{color:var(--red);border-color:var(--red)}
.btn-theme{width:34px;height:34px;background:var(--bg-card2);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.95rem;transition:var(--t);flex-shrink:0;}
.btn-theme:hover{border-color:var(--gold-border);background:var(--gold-bg)}
.hamburger{display:none;position:fixed;top:0.85rem;left:0.85rem;z-index:200;width:42px;height:42px;background:var(--bg-card);border:1px solid var(--border-gold);border-radius:var(--r);align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;color:var(--gold);}
.sidebar-overlay{display:none;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,0.55);pointer-events:none;}
.sidebar-overlay.open{pointer-events:auto;}
body.sb-open{overflow:hidden;}

/* ─── MAIN ─── */
#main-content{margin-left:var(--nav-w);flex:1;padding:2rem;min-height:100vh;}
.view{display:none;animation:fadeUp 0.3s ease}
.view.active{display:block}
.page-header{margin-bottom:1.75rem}
.breadcrumb{font-family:var(--font-m);font-size:0.64rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:0.45rem;}
.page-header h2{font-family:var(--font-d);font-size:2rem;font-weight:800;color:var(--text-white);text-transform:uppercase;letter-spacing:2px;line-height:1;}
.page-header h2 span{color:var(--gold)}
.page-header p{color:var(--text-body);margin-top:0.45rem;font-size:0.83rem;max-width:620px;line-height:1.65;}

/* ─── BACK BUTTON ─── */
.btn-back{display:inline-flex;align-items:center;gap:0.55rem;padding:0.55rem 1.1rem;background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--r);color:var(--text-body);font-family:var(--font-h);font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;cursor:pointer;transition:var(--t);margin-bottom:1.5rem;}
.btn-back:hover{border-color:var(--gold-border);color:var(--gold);background:var(--gold-bg)}

/* ─── WELCOME BANNER ─── */
.welcome-banner{background:var(--bg-card);border:1px solid var(--border-gold);border-left:3px solid var(--teal);border-radius:var(--rl);padding:1.65rem 1.85rem;margin-bottom:1.5rem;position:relative;overflow:hidden;display:flex;align-items:center;gap:1.4rem;}
.welcome-banner::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--teal),var(--gold),transparent);}
.wb-emblem{font-size:3rem;flex-shrink:0;filter:drop-shadow(0 0 14px var(--gold-glow))}
.wb-text h3{font-family:var(--font-d);font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:0.28rem;}
.wb-text p{color:var(--text-body);font-size:0.81rem;line-height:1.55}
.wb-text strong{color:var(--gold)}

/* ─── ECOSYSTEM BANNER ─── */
.ecosystem-banner{background:linear-gradient(135deg,rgba(31,56,100,0.45),var(--teal-bg));border:1px solid var(--teal-border);border-radius:var(--rl);padding:1.35rem 1.6rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;}
.eco-banner-text h4{font-family:var(--font-d);font-size:0.95rem;font-weight:700;color:var(--gold);margin-bottom:0.3rem;}
.eco-banner-text p{font-size:0.78rem;color:var(--text-body);line-height:1.55;max-width:400px}
.eco-pills{display:flex;flex-wrap:wrap;gap:0.45rem;}
.eco-pill{padding:0.28rem 0.8rem;border-radius:20px;font-family:var(--font-m);font-size:0.62rem;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border:1px solid;}
.eco-pill.studio{background:var(--teal-bg);border-color:var(--teal-border);color:var(--teal-light)}
.eco-pill.market{background:var(--gold-bg);border-color:var(--gold-border);color:var(--gold)}
.eco-pill.now{background:rgba(31,56,100,0.25);border-color:rgba(100,140,220,0.3);color:#7AABEF}
.eco-pill.proto{background:var(--green-bg);border-color:rgba(76,175,125,0.3);color:var(--green)}

/* ─── STATS ─── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:0.9rem;margin-bottom:1.4rem;}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.2rem 1.3rem;transition:var(--t);position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:var(--t);}
.stat-card:hover{border-color:var(--border-gold);transform:translateY(-2px)}
.stat-card:hover::before{opacity:1}
.sc-gold::before{background:linear-gradient(90deg,var(--gold),transparent)}.sc-teal::before{background:linear-gradient(90deg,var(--teal),transparent)}.sc-p::before{background:linear-gradient(90deg,var(--purple),transparent)}.sc-g::before{background:linear-gradient(90deg,var(--green),transparent)}
.stat-label{font-family:var(--font-h);font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:0.45rem;}
.stat-value{font-family:var(--font-d);font-size:2rem;font-weight:700;line-height:1;letter-spacing:1px;}
.stat-sub{font-size:0.68rem;color:var(--text-muted);margin-top:0.28rem}
.sv-g{color:var(--gold)}.sv-t{color:var(--teal-light)}.sv-p{color:var(--purple)}.sv-gr{color:var(--green)}
.progress-wrap{margin-bottom:1.4rem}
.progress-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.45rem;}
.progress-meta-label{font-family:var(--font-h);font-size:0.74rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;}
.progress-meta-pct{font-family:var(--font-d);font-size:0.95rem;font-weight:700;color:var(--gold);}
.progress-track{height:6px;background:var(--border);border-radius:10px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--gold),var(--gold-bright));border-radius:10px;transition:width 1s ease;}

/* ─── ACTIVATION CHECKLIST ─── */
.checklist-wrap{background:var(--bg-card);border:1px solid var(--border-gold);border-radius:var(--rl);padding:1.75rem;margin-bottom:1.4rem;}
.checklist-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:0.75rem;}
.checklist-hdr h3{font-family:var(--font-d);color:var(--gold);font-size:1.05rem;margin:0;font-weight:700;}
.act-pill{font-family:var(--font-m);font-size:0.7rem;padding:0.28rem 0.8rem;border-radius:20px;background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--gold);letter-spacing:0.05em;}
.act-pill.done{background:rgba(76,175,125,0.15);border-color:var(--green);color:var(--green)}
.checklist-progress{height:5px;background:var(--border);border-radius:10px;margin-bottom:1.4rem;overflow:hidden}
.checklist-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:10px;transition:width 0.55s ease;}
.checklist{display:grid;gap:0.6rem}
.cl-item{display:flex;align-items:center;gap:0.9rem;padding:0.9rem 1.1rem;background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all 0.2s;}
.cl-item:hover{border-color:var(--border-gold);background:var(--bg-panel)}
.cl-item.done{border-color:rgba(76,175,125,0.32);background:rgba(76,175,125,0.04);}
.cl-box{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.78rem;transition:all 0.3s;}
.cl-item.done .cl-box{background:var(--green);border-color:var(--green);color:#fff;}
.cl-item:not(.done) .cl-box{color:transparent;}
.cl-text{flex:1}
.cl-title{font-weight:600;font-size:0.86rem;margin-bottom:0.12rem}
.cl-desc{font-size:0.74rem;color:var(--text-muted)}
.cl-action{font-size:0.72rem;color:var(--gold);font-weight:600;white-space:nowrap;opacity:0;transition:opacity 0.2s;}
.cl-item:hover:not(.done) .cl-action{opacity:1}

/* ─── GOAL PANEL ─── */
.goal-panel{background:var(--bg-card2);border:1px solid var(--border-gold);border-radius:var(--rl);padding:1.4rem;margin-bottom:1.4rem;}
.goal-panel h4{color:var(--gold);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.9rem;font-family:var(--font-h);font-weight:700;}
.goal-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0.65rem;margin-top:0.7rem;}
.goal-metric{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:0.8rem;text-align:center;}
.gm-value{font-family:var(--font-d);font-size:1.3rem;color:var(--gold);}
.gm-label{font-size:0.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:0.18rem;}

/* ─── GOAL SETTER ─── */
.goal-setter-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.75rem;margin-bottom:1.4rem;}
.goal-setter-card h3{font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--gold);margin-bottom:0.5rem;}
.goal-setter-card .gs-desc{color:var(--text-body);font-size:0.82rem;margin-bottom:1.2rem;line-height:1.55}

/* ─── MODULES ─── */
.week-section{margin-bottom:1.4rem}
.week-header{display:flex;align-items:center;gap:0.7rem;padding:0.65rem 0.95rem;background:rgba(31,56,100,0.28);border:1px solid rgba(31,56,100,0.5);border-radius:var(--r);margin-bottom:0.7rem;}
.wh-badge{background:var(--gold);color:#0A0A0A;font-family:var(--font-d);font-size:0.7rem;font-weight:700;padding:0.18rem 0.55rem;border-radius:4px;letter-spacing:1px;}
.wh-title{font-family:var(--font-d);font-size:0.86rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-white);flex:1}
.wh-status{font-size:0.7rem;color:var(--text-muted);font-family:var(--font-h)}
.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:0.9rem;}
.module-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.3rem;cursor:pointer;transition:var(--t);position:relative;overflow:hidden;}
.module-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:var(--t);}
.module-card:hover{border-color:var(--border-gold);transform:translateY(-2px)}
.module-card:hover::before{opacity:1;background:linear-gradient(90deg,var(--gold),var(--teal),transparent)}
.module-card.completed{border-color:rgba(76,175,125,0.28)}
.module-card.completed::before{background:linear-gradient(90deg,var(--green),transparent);opacity:1}
.module-card.locked{opacity:0.38;cursor:not-allowed}
.module-card.locked:hover{transform:none;border-color:var(--border)}
.module-card.locked:hover::before{opacity:0}
.mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:0.7rem;margin-bottom:0.7rem}
.mc-num{font-family:var(--font-m);font-size:0.62rem;color:var(--gold-dim);letter-spacing:1px}
.mc-badge{font-size:0.6rem;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;font-family:var(--font-h);letter-spacing:0.5px;text-transform:uppercase;}
.badge-done{background:rgba(76,175,125,0.15);color:var(--green)}.badge-active{background:var(--gold-bg);color:var(--gold)}.badge-locked{background:rgba(50,60,90,0.5);color:var(--text-muted)}.badge-plan{background:var(--teal-bg);color:var(--teal-light)}
.mc-title{font-family:var(--font-d);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-white);margin-bottom:0.32rem;line-height:1.25;}
.mc-desc{font-size:0.78rem;color:var(--text-body);line-height:1.5;margin-bottom:0.8rem}
.gate-msg{background:var(--teal-bg);border:1px solid var(--teal-border);border-radius:var(--r);padding:0.65rem 0.9rem;margin-top:0.6rem;font-size:0.78rem;color:var(--teal-light);font-family:var(--font-h);font-weight:600;}
.mc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.mc-lessons{font-size:0.68rem;color:var(--text-muted);font-family:var(--font-h);letter-spacing:0.3px}
.mc-pts{font-family:var(--font-d);font-size:0.8rem;font-weight:700;color:var(--gold);letter-spacing:1px;}

/* ─── MODULE HERO ─── */
.module-hero{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.85rem;margin-bottom:1.4rem;position:relative;overflow:hidden;}
.module-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--gold),var(--gold-bright),transparent);}
.module-hero::after{content:attr(data-num);position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);font-family:var(--font-d);font-size:8rem;font-weight:800;color:rgba(201,162,39,0.04);line-height:1;pointer-events:none;}
.mh-week{display:inline-block;padding:0.18rem 0.7rem;background:rgba(31,56,100,0.4);border:1px solid rgba(31,56,100,0.6);border-radius:20px;font-family:var(--font-h);font-size:0.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:0.55rem;}
.mh-num{font-family:var(--font-m);font-size:0.66rem;color:var(--teal-light);letter-spacing:1.5px;margin-bottom:0.45rem;}
.mh-title{font-family:var(--font-d);font-size:1.8rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;margin-bottom:0.55rem;}
.mh-desc{color:var(--text-body);max-width:560px;line-height:1.65;font-size:0.83rem}
.mh-meta{display:flex;gap:1.3rem;margin-top:1.1rem;flex-wrap:wrap}
.mh-meta-item{display:flex;align-items:center;gap:0.38rem;font-size:0.76rem;color:var(--text-muted);font-family:var(--font-h);font-weight:600;}
.mh-meta-item strong{color:var(--text-white)}
.lessons-list{display:flex;flex-direction:column;gap:0.6rem}
.lesson-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:0.95rem 1.3rem;display:flex;align-items:center;gap:0.9rem;cursor:pointer;transition:var(--t);}
.lesson-card:hover{border-color:var(--border-gold);background:var(--bg-card2)}
.lesson-card.completed{border-color:rgba(76,175,125,0.25)}
.lesson-card.locked{opacity:0.38;cursor:not-allowed}
.lesson-card.locked:hover{background:var(--bg-card);border-color:var(--border)}
.lc-icon{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.85rem;}
.lc-icon.done{background:rgba(76,175,125,0.15);color:var(--green)}.lc-icon.active{background:var(--gold-bg);color:var(--gold)}.lc-icon.locked{background:var(--border);color:var(--text-muted)}.lc-icon.quiz{background:rgba(123,94,167,0.15);color:var(--purple)}
.lc-info{flex:1}
.lc-title{font-family:var(--font-h);font-weight:700;color:var(--text-white);font-size:0.86rem;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:0.12rem;}
.lc-sub{font-size:0.71rem;color:var(--text-muted)}
.lc-arrow{color:var(--text-muted);font-size:1rem;transition:var(--t)}
.lesson-card:not(.locked):hover .lc-arrow{color:var(--gold)}

/* ─── LESSON VIEW ─── */
.lesson-layout{display:grid;grid-template-columns:1fr 300px;gap:1.4rem}
.video-box{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:0.9rem;}
.video-placeholder{aspect-ratio:16/9;background:linear-gradient(135deg,#060810,#0E1220);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.9rem;position:relative;overflow:hidden;}
[data-theme="light"] .video-placeholder{background:linear-gradient(135deg,#E8EDF5,#D4DCF0);}
.video-placeholder::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--gold-bg) 1px,transparent 1px),linear-gradient(90deg,var(--gold-bg) 1px,transparent 1px);background-size:32px 32px;}
.vp-play{width:60px;height:60px;border-radius:50%;border:2px solid var(--gold-border);background:var(--gold-bg);display:flex;align-items:center;justify-content:center;font-size:1.4rem;z-index:1;}
.vp-label{font-family:var(--font-h);font-size:0.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;z-index:1;text-align:center;}
.vp-url{font-family:var(--font-m);font-size:0.62rem;color:var(--gold-dim);background:var(--gold-bg);padding:3px 9px;border-radius:6px;z-index:1;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lesson-controls{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:0.8rem 1.1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.65rem;margin-bottom:0.9rem;}
.lc-saved{font-family:var(--font-m);font-size:0.68rem;color:var(--text-muted)}
.lesson-btns{display:flex;gap:0.5rem;flex-wrap:wrap}
.btn-complete{background:linear-gradient(135deg,var(--green),#35A067);color:#fff;font-weight:700;font-size:0.78rem;padding:0.55rem 1.2rem;border-radius:var(--r);transition:var(--t);font-family:var(--font-d);letter-spacing:0.5px;text-transform:uppercase;}
.btn-complete:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(76,175,125,0.3)}
.btn-complete:disabled{background:var(--border);cursor:not-allowed;transform:none;color:var(--text-muted)}
.btn-manual{background:var(--teal-bg);color:var(--teal-light);font-weight:700;font-size:0.78rem;padding:0.55rem 1.1rem;border-radius:var(--r);transition:var(--t);font-family:var(--font-d);letter-spacing:0.5px;text-transform:uppercase;border:1px solid var(--teal-border);}
.btn-manual:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.lesson-summary-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.65rem;}
.lesson-summary-card h3{font-family:var(--font-d);font-size:0.88rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);padding-bottom:0.7rem;border-bottom:1px solid var(--border);margin-bottom:0.9rem;}
.lesson-summary{font-size:0.84rem;line-height:1.78;color:var(--text-body)}
.lesson-summary p{margin-bottom:0.7rem}
.lesson-summary ul,.lesson-summary ol{padding-left:1.3rem}
.lesson-summary li{margin-bottom:0.35rem}
.lesson-summary li::marker{color:var(--gold)}
.lesson-summary strong{color:var(--text-white);font-weight:600}
.ls-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.2rem;margin-bottom:0.9rem;}
.ls-card h4{font-family:var(--font-d);font-weight:700;font-size:0.8rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:0.8rem;padding-bottom:0.55rem;border-bottom:1px solid var(--border);color:var(--text-white);}
.lnav-item{display:flex;align-items:center;gap:0.6rem;padding:0.48rem 0.62rem;border-radius:6px;font-size:0.74rem;cursor:pointer;transition:var(--t);color:var(--text-muted);margin-bottom:2px;font-family:var(--font-h);font-weight:600;text-transform:uppercase;letter-spacing:0.3px;}
.lnav-item:hover{background:var(--bg-card2);color:var(--text-white)}
.lnav-item.current{background:var(--gold-bg);color:var(--gold)}
.lnav-item.done-l{color:var(--green)}
.lnav-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ─── QUIZ ─── */
.quiz-container{max-width:640px;margin:0 auto}
.quiz-header{background:var(--bg-card);border:1px solid var(--border);border-top:3px solid var(--purple);border-radius:var(--rl);padding:1.85rem;margin-bottom:1.4rem;text-align:center;}
.quiz-icon{font-size:2.2rem;margin-bottom:0.45rem;}
.quiz-header h2{font-family:var(--font-d);font-size:1.35rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;margin-bottom:0.35rem;}
.quiz-header p{color:var(--text-body);font-size:0.81rem;}
.quiz-pbar{height:3px;background:var(--border);border-radius:10px;margin-bottom:1.85rem;overflow:hidden}
.quiz-pfill{height:100%;background:linear-gradient(90deg,var(--teal),var(--purple));transition:width 0.4s ease}
.question-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.75rem;margin-bottom:0.9rem;}
.q-num{font-family:var(--font-m);font-size:0.66rem;color:var(--purple);letter-spacing:1.5px;margin-bottom:0.7rem;}
.q-text{font-family:var(--font-d);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:1.25rem;line-height:1.45;}
.options{display:flex;flex-direction:column;gap:0.55rem}
.option{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r);padding:0.85rem 1.15rem;cursor:pointer;transition:var(--t);font-size:0.84rem;display:flex;align-items:center;gap:0.75rem;}
.option:hover{border-color:rgba(123,94,167,0.4);background:rgba(123,94,167,0.05)}
.option.selected{border-color:var(--purple);background:rgba(123,94,167,0.1);color:var(--text-white)}
.option.correct{border-color:var(--green);background:var(--green-bg);color:var(--green)}
.option.wrong{border-color:var(--red);background:rgba(224,85,85,0.1);color:var(--red)}
.opt-letter{width:25px;height:25px;border-radius:50%;background:var(--border);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:0.68rem;font-weight:700;flex-shrink:0;font-family:var(--font-m);}
.option.selected .opt-letter{background:var(--purple);color:#fff}
.option.correct .opt-letter{background:var(--green);color:#0A0A0A}
.option.wrong .opt-letter{background:var(--red);color:#fff}
.quiz-actions{display:flex;justify-content:space-between;align-items:center;margin-top:0.9rem}
.btn-quiz-next{background:var(--purple);color:#fff;font-weight:700;font-size:0.84rem;padding:0.7rem 1.65rem;border-radius:var(--r);transition:var(--t);font-family:var(--font-d);text-transform:uppercase;letter-spacing:1px;}
.btn-quiz-next:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(123,94,167,0.35)}
.btn-quiz-next:disabled{background:var(--border);cursor:not-allowed;transform:none;color:var(--text-muted)}
.q-counter{font-family:var(--font-m);font-size:0.71rem;color:var(--text-muted)}
.quiz-result{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:2.5rem;text-align:center;}
.qr-ring{width:110px;height:110px;border-radius:50%;border:3px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 1.4rem;}
.qr-ring.pass{border-color:var(--green);box-shadow:0 0 30px rgba(76,175,125,0.2)}
.qr-ring.fail{border-color:var(--red)}
.qr-score{font-family:var(--font-d);font-size:2.2rem;font-weight:800;}
.qr-score.pass{color:var(--green)}.qr-score.fail{color:var(--red)}
.qr-title{font-family:var(--font-d);font-size:1.4rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:0.38rem;}
.qr-sub{color:var(--text-body);font-size:0.81rem;margin-bottom:1.4rem;line-height:1.5}
.btn-retry{background:var(--bg-panel);border:1px solid var(--border);color:var(--text-muted);font-weight:600;font-size:0.8rem;padding:0.62rem 1.3rem;border-radius:var(--r);transition:var(--t);margin-right:0.65rem;font-family:var(--font-d);text-transform:uppercase;letter-spacing:0.5px;cursor:pointer;}
.btn-retry:hover{border-color:var(--text-muted);color:var(--text-white)}

/* ─── ROADMAP ─── */
.roadmap{position:relative;padding-left:2rem}
.roadmap::before{content:'';position:absolute;left:10px;top:16px;bottom:16px;width:2px;background:linear-gradient(180deg,var(--teal),var(--gold),var(--border));border-radius:10px;}
.roadmap-week{margin-bottom:0.9rem}
.rw-label{font-family:var(--font-d);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:0.45rem;margin-left:-2rem;padding-left:2rem;}
.roadmap-step{position:relative;margin-bottom:0.55rem}
.rs-dot{position:absolute;left:-2rem;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);background:var(--bg-dark);display:flex;align-items:center;justify-content:center;font-size:0.58rem;font-weight:700;color:var(--text-muted);z-index:1;transition:var(--t);font-family:var(--font-m);}
.rs-dot.done{background:var(--green);border-color:var(--green);color:#0A0A0A}
.rs-dot.active{background:var(--gold);border-color:var(--gold);color:#0A0A0A;box-shadow:0 0 16px var(--gold-glow);animation:glow 1.5s ease infinite;}
@keyframes glow{0%,100%{box-shadow:0 0 10px var(--gold-glow)}50%{box-shadow:0 0 24px rgba(201,162,39,0.6)}}
.rs-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:0.82rem 1.15rem;display:flex;align-items:center;justify-content:space-between;transition:var(--t);cursor:pointer;}
.rs-card.done{border-color:rgba(76,175,125,0.18)}.rs-card.active{border-color:var(--border-gold);background:var(--gold-bg);}
.rs-title{font-family:var(--font-d);font-weight:700;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.08rem;}
.rs-title.done{text-decoration:line-through;color:var(--text-muted)}.rs-title.active{color:var(--gold)}
.rs-sub{font-size:0.68rem;color:var(--text-muted);font-family:var(--font-h)}
.rs-icon{font-size:0.95rem}

/* ─── WALLET ─── */
.wallet-hero{background:linear-gradient(135deg,var(--bg-dark),var(--bg-card),var(--bg-panel));border:1px solid var(--border-gold);border-radius:var(--rl);padding:2.75rem 2rem;text-align:center;margin-bottom:1.4rem;position:relative;overflow:hidden;}
.wallet-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--teal),var(--gold),transparent);}
.wh-coin{font-size:3.2rem;margin-bottom:0.7rem;filter:drop-shadow(0 0 20px var(--gold-glow));}
.wh-label{font-family:var(--font-h);font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--gold-dim);margin-bottom:0.38rem;}
.wh-points{font-family:var(--font-d);font-size:4.5rem;font-weight:800;color:var(--gold);line-height:1;letter-spacing:3px;text-shadow:0 0 60px var(--gold-glow);}
.wh-sub{color:var(--text-muted);font-size:0.75rem;margin-top:0.38rem;font-family:var(--font-m)}
.wallet-notice{background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:var(--r);padding:0.95rem 1.15rem;margin-bottom:1.4rem;font-size:0.8rem;color:var(--text-body);line-height:1.6;}
.wallet-notice strong{color:var(--gold)}
.rewards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0.85rem;margin-bottom:1.4rem;}
.reward-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.1rem;position:relative;}
.reward-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--teal),var(--gold),transparent);}
.rc-type{font-size:0.63rem;color:var(--text-muted);font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.rc-pts{font-family:var(--font-d);font-size:1.65rem;font-weight:700;color:var(--gold);margin:0.28rem 0;letter-spacing:1px;}
.rc-name{font-size:0.75rem;color:var(--text-body)}
.earn-history{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);}
.eh-header{padding:0.95rem 1.3rem;border-bottom:1px solid var(--border);font-family:var(--font-d);font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-white);}
.eh-item{display:flex;align-items:center;gap:0.9rem;padding:0.78rem 1.3rem;border-bottom:1px solid var(--border);transition:var(--t);}
.eh-item:last-child{border-bottom:none}
.eh-item:hover{background:var(--bg-card2)}
.eh-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0}
.eh-info{flex:1}
.eh-desc{font-size:0.8rem;color:var(--text-white);font-family:var(--font-h);font-weight:600}
.eh-time{font-size:0.66rem;color:var(--text-muted)}
.eh-pts{font-family:var(--font-d);font-size:0.9rem;font-weight:700;color:var(--green);letter-spacing:0.5px;}
.eh-empty{padding:1.85rem;text-align:center;color:var(--text-muted);font-size:0.8rem}

/* ─── COMMUNITY ─── */
.community-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:1rem;margin-top:1rem}
.comm-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.35rem;text-align:center;cursor:pointer;transition:all 0.25s;}
.comm-card:hover{border-color:var(--border-gold);transform:translateY(-3px)}
.comm-card-icon{font-size:1.9rem;margin-bottom:0.5rem;display:block}
.comm-card h4{font-family:var(--font-d);font-size:0.88rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:0.35rem;}
.comm-card p{font-size:0.74rem;color:var(--text-muted);line-height:1.5;margin-bottom:0.6rem}
.access-tag{display:inline-block;padding:0.18rem 0.6rem;border-radius:20px;font-size:0.65rem;font-weight:700;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-border);}
.access-tag.locked{background:rgba(224,85,85,0.08);color:var(--red);border-color:rgba(224,85,85,0.3);}

/* ─── LIVE WORKSHOPS ─── */
.ws-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:1.5rem;background:var(--bg-card);border:1px solid var(--border-gold);border-radius:var(--rl);padding:1.6rem;margin-top:1rem;align-items:center;}
.ws-status-badge{display:inline-block;font-family:var(--font-h);font-size:0.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:0.3rem 0.8rem;border-radius:20px;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-border);margin-bottom:0.6rem;}
.ws-status-badge.live{background:var(--green-bg);color:var(--green);border-color:rgba(76,175,125,0.4);animation:wsPulse 1.6s ease-in-out infinite;}
.ws-status-badge.ended{background:rgba(90,106,138,0.12);color:var(--text-muted);border-color:var(--border);}
@keyframes wsPulse{0%,100%{opacity:1}50%{opacity:0.55}}
.ws-hero-left h3{font-family:var(--font-d);font-size:1.3rem;color:var(--text-white);margin-bottom:0.35rem;}
.ws-hero-desc{font-size:0.85rem;color:var(--text-body);margin-bottom:1rem;line-height:1.55;}
.ws-countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem;max-width:320px;}
.ws-cbox{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r);padding:0.55rem 0.3rem;text-align:center;}
.ws-cnum{display:block;font-family:var(--font-d);font-size:1.35rem;font-weight:800;color:var(--gold);}
.ws-clabel{display:block;font-size:0.62rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:0.15rem;}
.ws-video-frame{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--bg-panel),var(--bg-dark));border-radius:var(--rl);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.ws-video-overlay{text-align:center;padding:1rem;}
.ws-video-icon{font-size:2.2rem;display:block;margin-bottom:0.5rem;opacity:0.6;}
.ws-video-msg{font-size:0.8rem;color:var(--text-muted);font-family:var(--font-h);letter-spacing:0.5px;}
.ws-split{display:grid;grid-template-columns:1.4fr 1fr;gap:1.2rem;margin-top:1.2rem;}
.ws-chat-panel,.ws-team-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);display:flex;flex-direction:column;overflow:hidden;}
.ws-panel-hdr{display:flex;justify-content:space-between;align-items:center;padding:0.85rem 1.1rem;border-bottom:1px solid var(--border);font-family:var(--font-h);font-size:0.85rem;font-weight:700;color:var(--text-white);}
.ws-chat-count{font-size:0.68rem;color:var(--text-muted);font-family:var(--font-m);}
.ws-chat-messages{flex:1;min-height:220px;max-height:320px;overflow-y:auto;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:0.6rem;}
.ws-chat-locked-note{margin:auto;text-align:center;color:var(--text-muted);font-size:0.78rem;padding:1rem;}
.ws-msg{font-size:0.8rem;line-height:1.4;}
.ws-msg .ws-msg-name{font-family:var(--font-h);font-weight:700;color:var(--gold);margin-right:0.35rem;}
.ws-msg.ws-msg-ai .ws-msg-name{color:var(--teal-light);}
.ws-msg .ws-msg-text{color:var(--text-body);}
.ws-chat-input-row{display:flex;gap:0.5rem;padding:0.8rem 1rem;border-top:1px solid var(--border);}
.ws-chat-input-row input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r);color:var(--text-white);padding:0.55rem 0.8rem;font-size:0.82rem;}
.ws-team-list{padding:0.9rem 1.1rem;display:flex;flex-direction:column;gap:0.85rem;}
.ws-team-item{display:flex;align-items:flex-start;gap:0.65rem;}
.ws-team-icon{font-size:1.15rem;flex-shrink:0;}
.ws-team-name{font-family:var(--font-h);font-size:0.8rem;font-weight:700;color:var(--text-white);}
.ws-team-role{font-size:0.7rem;color:var(--text-muted);}
@media (max-width:768px){
  .ws-hero{grid-template-columns:1fr;}
  .ws-split{grid-template-columns:1fr;}
}

/* ─── ECOSYSTEM CARDS ─── */
.eco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0.9rem;margin-top:0.9rem}
.eco-card{background:var(--bg-card2);border:1px solid var(--teal-border);border-radius:var(--rl);padding:1.2rem;text-align:center;cursor:pointer;transition:all 0.25s;}
.eco-card:hover{border-color:var(--border-gold);transform:translateY(-3px)}
.eco-card-icon{font-size:1.65rem;margin-bottom:0.45rem;display:block}
.eco-card h4{font-family:var(--font-d);font-size:0.86rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:0.32rem;}
.eco-card p{font-size:0.73rem;color:var(--text-muted);line-height:1.5}
.eco-earn{display:inline-block;margin-top:0.5rem;padding:0.18rem 0.65rem;border-radius:20px;font-size:0.63rem;font-weight:700;background:var(--green-bg);color:var(--green);border:1px solid rgba(76,175,125,0.3);}

/* ─── RECENT ACTIVITY ─── */
.activity-feed{margin-top:0.75rem}
.activity-item{display:flex;gap:0.7rem;padding:0.65rem 0;border-bottom:1px solid var(--border);font-size:0.81rem;}
.activity-item:last-child{border:none}
.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:0.28rem;flex-shrink:0}
.activity-time{font-family:var(--font-m);font-size:0.65rem;color:var(--text-muted);margin-top:0.14rem;}

/* ─── PROFILE VIEW ─── */
.profile-grid{display:grid;grid-template-columns:280px 1fr;gap:1.4rem}
.profile-left{display:flex;flex-direction:column;gap:1rem;}
.profile-avatar-wrap{background:var(--bg-card);border:1px solid var(--border-gold);border-radius:var(--rl);padding:2rem;text-align:center;}
.profile-avatar-img{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--teal));border:3px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:2.2rem;font-weight:800;color:var(--gold);margin:0 auto 1rem;overflow:hidden;cursor:pointer;position:relative;transition:var(--t);}
.profile-avatar-img:hover::after{content:'📷';position:absolute;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;font-size:1.4rem;border-radius:50%;}
.profile-avatar-img img{width:100%;height:100%;object-fit:cover;}
.photo-input{display:none}
.profile-name-display{font-family:var(--font-d);font-size:1.2rem;font-weight:700;color:var(--text-white);margin-bottom:0.2rem}
.profile-plan-display{font-family:var(--font-h);font-size:0.78rem;color:var(--teal-light);font-weight:600}
.profile-stats{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.2rem;}
.ps-item{display:flex;justify-content:space-between;align-items:center;padding:0.55rem 0;border-bottom:1px solid var(--border);font-size:0.8rem;}
.ps-item:last-child{border:none}
.ps-label{color:var(--text-muted);font-family:var(--font-h);font-weight:600}
.ps-value{color:var(--gold);font-family:var(--font-d);font-weight:700}
.profile-right{display:flex;flex-direction:column;gap:1rem;}
.profile-form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.75rem;}
.profile-form-card h3{font-family:var(--font-d);font-size:0.95rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);margin-bottom:1.3rem;}
.btn-save{background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:#0A0A0A;font-weight:800;font-size:0.85rem;padding:0.7rem 1.8rem;border-radius:var(--r);transition:var(--t);font-family:var(--font-d);text-transform:uppercase;letter-spacing:1px;margin-top:0.75rem;}
.btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--gold-glow)}

/* ─── SECTION TITLE ─── */
.section-title{font-family:var(--font-d);font-size:0.92rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;margin-bottom:0.9rem;color:var(--gold);display:flex;align-items:center;gap:0.75rem;}
.section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--gold-dim),transparent);}
.card-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);padding:1.65rem;margin-bottom:1.4rem;}
.card-block h3{font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--gold);margin-bottom:1.1rem;}

/* ─── PAYMENT/PLANS ─── */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.1rem;margin:1.3rem 0;}
.pricing-card{background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--rl);padding:1.85rem;text-align:center;position:relative;transition:all 0.3s;}
.pricing-card:hover{border-color:var(--border-gold);transform:translateY(-4px)}
.pricing-card.popular{border-color:var(--gold);background:linear-gradient(135deg,var(--bg-card2) 0%,var(--gold-bg) 100%);}
.popular-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:#0A0A0A;font-size:0.68rem;font-weight:700;padding:0.25rem 0.9rem;border-radius:20px;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;}
.pricing-name{font-family:var(--font-m);font-size:0.73rem;text-transform:uppercase;letter-spacing:0.15em;color:var(--text-muted);margin-bottom:0.6rem;}
.pricing-amount{font-family:var(--font-d);font-size:2.5rem;color:var(--gold);margin:0.45rem 0 1.3rem;line-height:1;}
.pricing-amount sup{font-size:0.95rem;vertical-align:super;}
.features{list-style:none;text-align:left;margin-bottom:1.5rem;}
.features li{padding:0.48rem 0;font-size:0.82rem;color:var(--text-muted);border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:0.55rem;line-height:1.45;}
.features li::before{content:"◆";font-size:0.45rem;color:var(--gold);flex-shrink:0;margin-top:0.32rem;}
.features li:last-child{border:none}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  #sidebar{transform:translateX(-100%);z-index:10000!important;box-shadow:none;}
  #sidebar.open{transform:translateX(0)!important;box-shadow:6px 0 32px rgba(0,0,0,0.6);}
  .sidebar-overlay{z-index:9999!important;}
  .sidebar-overlay.open{display:block}
  .hamburger{display:flex}
  #main-content{margin-left:0;padding:1rem;padding-top:3.5rem}
  .modules-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .lesson-layout{grid-template-columns:1fr}
  .welcome-banner{flex-direction:column;gap:0.75rem}
  .rewards-grid{grid-template-columns:repeat(2,1fr)}
  .profile-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  #app-shell{position:relative;}
  .page-header h2{font-size:1.6rem;}
  .wb-emblem{font-size:2.2rem;}
  .eco-pills{gap:0.35rem;}
  .eco-pill{font-size:0.58rem;padding:0.22rem 0.6rem;}
  .goal-metrics{grid-template-columns:repeat(2,1fr);}
  .mh-title{font-size:1.4rem;letter-spacing:1px;}
  .module-card{padding:1.1rem;}
  .wh-points{font-size:3.5rem;}
  .community-grid{grid-template-columns:repeat(2,1fr);}
  .eco-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:0.6rem;}
  .stat-value{font-size:1.65rem;}
  .stat-card{padding:0.9rem 0.8rem;}
  .community-grid{grid-template-columns:1fr;}
  .eco-grid{grid-template-columns:1fr;}
  .lesson-controls{flex-direction:column;align-items:flex-start;}
  .lesson-btns{width:100%;}
  .btn-complete,.btn-manual{width:100%;text-align:center;justify-content:center;}
  .mh-meta{gap:0.75rem;}
  .auth-card{padding:1.5rem;}
}