@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#08090b;
  --bg-1:#0c0d10;
  --bg-elev:#141519;
  --bg-card:#111216;
  --bg-card-2:#191a1f;
  --border:rgba(255,255,255,0.07);
  --border-strong:rgba(255,255,255,0.15);
  --gold:#c6a05a;
  --gold-bright:#e2c07f;
  --gold-highlight:#f0d69f;
  --gold-dim:#7a5f34;
  --gold-gradient: linear-gradient(135deg, #7a5f34 0%, #c6a05a 35%, #f0d69f 65%, #c6a05a 100%);
  --signal:#7fe3c9;
  --signal-dim:#3d6b60;
  --text:#f1f0ec;
  --text-dim:#a7a6a1;
  --text-faint:#6f706d;
  --success:#4ade80;
  --danger:#f16565;
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:18px;
  --shadow-gold: 0 0 0 1px rgba(255,255,255,0.03), 0 8px 24px rgba(0,0,0,0.5);
  font-size:16px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Shared page backdrop — every page (landing, sales, app, admin) pulls this
   from the same rule so it's identical everywhere. Fixed + cover + centered
   so the symmetric artwork always fills the viewport with no seam/repeat and
   never shifts as content scrolls; the dim overlay keeps it from competing
   with foreground text or clashing with card content sitting on top of it. */
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(5,6,6,0.6), rgba(5,6,6,0.6)),
    url('../assets/page-bg.png');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.font-display{font-family:'Fraunces',serif;}
.font-mono{font-family:'JetBrains Mono',ui-monospace,'SF Mono',monospace;}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
::selection{background:rgba(214,168,62,0.28);}

.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;flex-shrink:0;}

/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(241,240,236,0.1);border-radius:10px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(241,240,236,0.18);background-clip:content-box;}

/* ============ layout / screens ============ */
.screen{display:none;min-height:100vh;}
.screen.active{display:block;}
.fade-in{animation:fadeIn .35s ease both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* Boot loader — covers every screen until init() (js/app.js) resolves the
   real auth state, so a signed-in student never sees the auth screen flash
   before the dashboard swaps in. See app.html for the markup. */
.boot-loading{display:none;position:fixed;inset:0;z-index:1000;background:var(--bg);align-items:center;justify-content:center;}
.boot-loading.active{display:flex;}
.boot-loading-mark{width:40px;height:40px;animation:bootPulse 1.4s ease-in-out infinite;}
.boot-loading-mark img{width:100%;height:100%;object-fit:contain;}
@keyframes bootPulse{0%,100%{opacity:.4;}50%{opacity:1;}}

.hidden{display:none !important;}

/* ============ shared card ============ */
.card{
  background:linear-gradient(180deg, var(--bg-card), var(--bg-1));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-gold);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;border:1px solid transparent;
  padding:11px 20px;font-size:.92rem;font-weight:600;letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-gold{
  background:var(--gold-gradient);
  color:#161207;box-shadow:0 6px 18px rgba(139,103,28,0.28);
}
.btn-gold:hover{box-shadow:0 8px 22px rgba(139,103,28,0.38);filter:brightness(1.05);}
.btn-ghost{
  background:rgba(255,255,255,0.02);color:var(--text);border-color:var(--border);
}
.btn-ghost:hover{border-color:var(--border-strong);background:rgba(255,255,255,0.04);}
.btn-outline-gold{background:transparent;color:var(--gold-bright);border-color:rgba(214,168,62,0.4);}
.btn-outline-gold:hover{background:rgba(214,168,62,0.08);border-color:var(--gold);}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none;}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px;font-size:.82rem;}
.btn-lg{padding:14px 26px;font-size:1rem;}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid var(--border);color:var(--text-dim);}
.pill.gold{color:var(--gold-bright);border-color:rgba(214,168,62,0.35);background:rgba(214,168,62,0.08);}
.pill.success{color:var(--gold-bright);border-color:rgba(214,168,62,0.3);background:rgba(214,168,62,0.08);}

/* ============================================================
   AUTH SCREEN
   ============================================================ */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;}
@media (max-width:900px){.auth-wrap{grid-template-columns:1fr;}}

/* Student sign-in visual panel (index.html only — admin-login.html keeps the
   original .auth-brand CSS pattern below, untouched). Full-bleed photographic
   background with a bottom-anchored scrim so the overlaid brand/headline stays
   legible regardless of what's bright in the source image. */
.auth-visual{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:60px;
  background-image:url('../assets/auth-bg.png');
  background-size:cover;background-position:center;
  border-right:1px solid var(--border);
}
.auth-visual::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg, rgba(8,9,9,0.94) 0%, rgba(8,9,9,0.62) 32%, rgba(8,9,9,0.2) 58%, rgba(8,9,9,0.06) 78%, transparent 100%);
}
.auth-visual-content{position:relative;z-index:1;}
.auth-visual-content .mark{display:flex;align-items:center;gap:12px;margin-bottom:30px;}
.auth-visual-content .mark img{width:32px;height:auto;display:block;}
.auth-visual-content .mark .wordmark{font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;letter-spacing:.16em;color:var(--text);}
.auth-visual-content h1{font-family:'Fraunces',serif;font-size:2.5rem;line-height:1.18;font-weight:700;color:var(--text);margin:0 0 14px;}
.auth-visual-content p{color:var(--text-dim);font-size:1rem;max-width:420px;line-height:1.6;margin:0;}
@media (max-width:900px){
  .auth-visual{min-height:180px;padding:32px 28px;border-right:none;border-bottom:1px solid var(--border);}
  .auth-visual-content h1{font-size:1.5rem;}
  .auth-visual-content p{display:none;}
}

.trust-line{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:26px;}
.trust-line .icon{width:14px;height:14px;color:var(--gold);}

.input-with-action{position:relative;}
.input-with-action input{padding-right:44px;}
.field-icon-btn{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:8px;color:var(--text-faint);
}
.field-icon-btn:hover{color:var(--gold-bright);background:rgba(255,255,255,0.04);}
.field-icon-btn .icon{width:18px;height:18px;}

.checkbox-row{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-dim);padding:8px 0;cursor:pointer;}
.checkbox-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold);cursor:pointer;}

.auth-or-divider{display:flex;align-items:center;gap:12px;color:var(--text-faint);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:22px 0;}
.auth-or-divider::before,.auth-or-divider::after{content:'';flex:1;height:1px;background:var(--border);}

.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:12px 20px;border-radius:10px;background:var(--bg-elev);border:1px solid var(--border);
  color:var(--text);font-size:.92rem;font-weight:600;
  transition:border-color .15s ease, background .15s ease, opacity .15s ease;
}
.btn-google:hover{border-color:var(--border-strong);background:rgba(255,255,255,0.03);}
.btn-google:disabled{opacity:.6;cursor:not-allowed;}
.btn-google svg{width:19px;height:19px;flex-shrink:0;}

.auth-privacy-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.76rem;color:var(--text-faint);margin-top:22px;text-align:center;line-height:1.5;}
.auth-privacy-note .icon{width:13px;height:13px;flex-shrink:0;}

.auth-brand{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:60px;
  background:
    radial-gradient(circle at 30% 20%, rgba(214,168,62,0.1), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(214,168,62,0.05), transparent 50%),
    linear-gradient(160deg, #0d0e0e, #080909 70%);
  border-right:1px solid var(--border);
}
@media (max-width:900px){.auth-brand{padding:40px 32px;min-height:280px;}}
.auth-brand::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(214,168,62,0.035) 1px, transparent 1px),linear-gradient(90deg, rgba(214,168,62,0.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 30% 30%, black, transparent 70%);
}
.auth-brand .mark{display:flex;align-items:center;gap:14px;margin-bottom:44px;position:relative;z-index:1;}
.auth-brand .mark img{width:38px;height:auto;display:block;}
.auth-brand .mark .wordmark{font-family:'Fraunces',serif;font-weight:700;font-size:1.5rem;letter-spacing:.14em;}
.brand-watermark{
  position:absolute;top:50%;right:-60px;width:520px;height:auto;max-width:none;
  transform:translateY(-50%);opacity:.06;pointer-events:none;z-index:0;
}
.auth-brand h1{position:relative;z-index:1;font-family:'Fraunces',serif;font-size:2.7rem;line-height:1.15;font-weight:700;max-width:520px;margin:0 0 18px;background:linear-gradient(180deg,#fff, #cfcfd6 70%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.auth-brand p{position:relative;z-index:1;color:var(--text-dim);font-size:1.02rem;max-width:440px;line-height:1.6;margin:0 0 36px;}
.auth-stats{position:relative;z-index:1;display:flex;gap:36px;flex-wrap:wrap;}
.auth-stats div b{display:block;font-size:1.5rem;font-family:'Fraunces',serif;color:var(--gold-bright);}
.auth-stats div span{font-size:.76rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;}

.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px 24px;}
.auth-box{width:100%;max-width:400px;}
.auth-box h2{font-family:'Fraunces',serif;font-size:1.6rem;margin:0 0 6px;}
.auth-box .sub{color:var(--text-dim);font-size:.9rem;margin:0 0 26px;}

.field{margin-bottom:16px;}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--text-dim);margin-bottom:7px;letter-spacing:.02em;}
.field input{
  width:100%;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;color:var(--text);font-size:.92rem;transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{color:var(--text-faint);}
.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,168,62,0.12);}
.field input.invalid{border-color:var(--danger);}
.field .err{display:none;color:var(--danger);font-size:.76rem;margin-top:6px;}
.field.error .err{display:block;}
.field.error input{border-color:var(--danger);}

.field-row{display:flex;justify-content:space-between;align-items:center;margin:-6px 0 18px;}
.field-row a{font-size:.8rem;color:var(--gold);padding:8px 0;display:inline-block;}

.auth-foot{text-align:center;font-size:.84rem;color:var(--text-dim);margin-top:18px;}
.auth-foot a{color:var(--gold);font-weight:600;}

.form-msg{display:none;align-items:center;gap:8px;background:rgba(214,168,62,0.08);border:1px solid rgba(214,168,62,0.3);color:var(--gold-bright);border-radius:10px;padding:11px 14px;font-size:.84rem;margin-bottom:16px;}
.form-msg.show{display:flex;}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-shell{display:flex;min-height:100vh;}
.dash-sidebar{
  width:330px;flex-shrink:0;background:var(--bg-1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:28px 22px;position:sticky;top:0;height:100vh;
}
.dash-brand{display:flex;align-items:center;gap:13px;padding:0 4px 26px;border-bottom:1px solid var(--border);margin-bottom:22px;width:100%;background:transparent;border-left:none;border-right:none;border-top:none;text-align:left;cursor:pointer;}
.dash-brand:hover .word{color:var(--gold-bright);}
.dash-brand img{width:32px;height:auto;display:block;}
.dash-brand .word{color:var(--gold);font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;letter-spacing:.13em;transition:color .15s ease;}
.dash-brand .tag{display:block;font-size:.68rem;color:var(--text-faint);letter-spacing:.09em;margin-top:3px;}

.tier-list-toggle{
  display:none;width:100%;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);
  color:var(--text-dim);font-size:.8rem;font-weight:700;letter-spacing:.03em;margin-bottom:14px;
}
.tier-list-toggle-chevron{color:var(--gold);display:flex;transition:transform .2s ease;}
.tier-list-toggle-chevron .icon{width:14px;height:14px;}
.tier-list-toggle[aria-expanded="true"] .tier-list-toggle-chevron{transform:rotate(90deg);}

.tier-list-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding:0 2px;margin-bottom:14px;}
.tier-list{display:flex;flex-direction:column;gap:14px;flex:1;overflow-y:auto;padding-right:2px;}
.tier-card{
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 18px 16px;
  background:var(--bg-card);transition:border-color .18s ease, background .18s ease;
  position:relative;
}
.tier-card:hover{border-color:var(--border-strong);}
.tier-card.selected{border-color:var(--gold);background:linear-gradient(160deg, rgba(214,168,62,0.08), var(--bg-card));box-shadow:0 0 0 1px rgba(214,168,62,0.12), 0 10px 20px rgba(0,0,0,0.35);}
.tier-card.locked{background:linear-gradient(180deg, var(--bg-card), rgba(18,19,19,0.7));}
.tier-card-top{display:flex;align-items:center;gap:14px;cursor:pointer;}
.tier-badge{
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--bg-elev);border:1px solid var(--border);color:var(--text-faint);
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.tier-badge .icon{width:20px;height:20px;}
.tier-card.selected .tier-badge{background:var(--gold-gradient);color:#161207;border-color:transparent;}
.tier-card.complete .tier-badge{background:var(--gold-gradient);color:#161207;border-color:transparent;}
.tier-card-info{flex:1;min-width:0;}
.tier-card-info .k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.05em;color:var(--text-faint);text-transform:uppercase;}
.tier-card-info .t{font-weight:700;font-size:1.05rem;margin-top:2px;}
.tier-card-arrow{color:var(--gold);transition:transform .2s ease;flex-shrink:0;}
.tier-card.open .tier-card-arrow{transform:rotate(90deg);}
.tier-bar{height:6px;border-radius:4px;background:var(--bg-elev);overflow:hidden;margin-top:14px;}
.tier-bar > span{display:block;height:100%;background:linear-gradient(90deg, var(--gold-dim), var(--gold-bright));border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.tier-bar-row{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:.78rem;color:var(--text-faint);}
.tier-card.locked .tier-bar-row .pct{display:none;}

/* ---- sidebar tier accordion: preview curriculum of ANY tier, locked or not.
   Previewing never grants lesson access — module rows inside a locked tier's
   preview still route through openModule()'s existing unlock check. ---- */
.tier-card-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;}
.tier-card-body>*{overflow:hidden;}
.tier-card.open .tier-card-body{grid-template-rows:1fr;margin-top:12px;}
.tier-card-body-inner{display:flex;flex-direction:column;gap:2px;}
.tier-preview-note{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--text-faint);padding:2px 2px 10px;}
.tier-preview-note .icon{color:var(--gold);width:13px;height:13px;flex-shrink:0;}
.tier-preview-row{display:flex;align-items:flex-start;gap:11px;padding:9px 3px;border-radius:8px;cursor:pointer;transition:background .15s ease;}
.tier-preview-row:hover{background:rgba(255,255,255,0.03);}
.tier-preview-idx{width:20px;flex-shrink:0;text-align:center;font-size:.74rem;font-weight:700;color:var(--text-faint);margin-top:2px;}
.tier-preview-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.tier-preview-info .t{display:block;font-size:.86rem;font-weight:600;white-space:normal;overflow-wrap:break-word;}
.tier-preview-info .d{display:block;font-size:.74rem;color:var(--text-faint);white-space:normal;overflow-wrap:break-word;}
.tier-preview-row .module-state{width:22px;height:22px;flex-shrink:0;margin-top:2px;}
.tier-preview-row .module-state .icon{width:12px;height:12px;}

.tier-unlock-note{
  border:1px dashed var(--border);border-radius:var(--radius-sm);padding:16px;text-align:center;color:var(--text-dim);font-size:.78rem;margin-top:2px;
}
.tier-unlock-note .icon{color:var(--gold);width:20px;height:20px;margin-bottom:6px;}
.tier-unlock-note b{color:var(--gold);display:block;margin-top:2px;font-size:.85rem;}

.sidebar-profile{display:flex;align-items:center;gap:10px;padding:14px 6px 4px;border-top:1px solid var(--border);margin-top:16px;}
.avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(160deg,#1e1f1f,#101111);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;color:var(--gold-bright);font-size:.85rem;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.sidebar-profile .who{flex:1;min-width:0;}
.sidebar-profile .name{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-profile .role{font-size:.68rem;color:var(--gold);letter-spacing:.04em;}

.nav-icons{display:flex;justify-content:space-between;gap:8px;margin-top:16px;padding:8px 2px 0;}
.nav-icons button{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 2px 10px;border-radius:10px;
  font-size:1.35rem;background:transparent;border:1px solid transparent;color:var(--text-faint);transition:all .15s ease;
}
.nav-icons button:hover{color:var(--text);background:rgba(255,255,255,0.04);}
.nav-icons button.active{color:#161207;background:var(--gold-gradient);}
.nav-icons .nav-icon-img{width:24px;height:24px;object-fit:contain;flex-shrink:0;display:block;}
.nav-icons .nav-label{font-size:.72rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;flex-shrink:0;}

/* ---- main column ---- */
.dash-main{flex:1;min-width:0;padding:26px 26px 60px;}
.dash-topbar{display:flex;align-items:center;gap:14px;justify-content:flex-end;margin-bottom:20px;}

.topbar-user{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 10px;cursor:pointer;position:relative;}
.topbar-user .who{text-align:right;}
.topbar-user .name{font-size:.85rem;font-weight:700;}
.topbar-user .role{font-size:.68rem;color:var(--gold);}
.topbar-user .chev{color:var(--text-faint);transition:transform .15s ease;}
.topbar-user.open .chev{transform:rotate(180deg);}
.user-menu{
  position:absolute;top:calc(100% + 8px);right:0;width:190px;background:var(--bg-card-2);border:1px solid var(--border);
  border-radius:12px;padding:8px;box-shadow:0 14px 40px rgba(0,0,0,0.5);z-index:40;display:none;
}
.user-menu.show{display:block;}
.user-menu button{width:100%;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;background:transparent;border:none;color:var(--text-dim);font-size:.84rem;text-align:left;}
.user-menu button:hover{background:rgba(255,255,255,0.04);color:var(--text);}

/* hero card */
.hero-card{position:relative;overflow:hidden;padding:32px 34px;margin-bottom:26px;}
.hero-card::before{
  content:'';position:absolute;right:-60px;top:-60px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(214,168,62,0.1), transparent 70%);pointer-events:none;
}
/* Per-tier hero backdrop. No final art assets exist yet (design owner hasn't delivered
   tier-1/2/3 imagery) — this is a CSS placeholder standing in for future artwork, per
   tier via .hero-emblem--{peak|hex|ascend} (driven by tier.heroShape in data.js) so the
   backdrop actually swaps per tier rather than being identical across all three, plus
   the tier's own icon glyph swapped in as the center mark. Swap the .peak/.hero-emblem-glyph
   rules below for a real <img> once assets land — the container/mask/breakpoints stay put. */
.hero-emblem{
  position:absolute;right:0;bottom:0;width:420px;height:100%;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to left, black 60%, transparent 100%);
  mask-image:linear-gradient(to left, black 60%, transparent 100%);
}
.hero-emblem .peak{
  position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);width:520px;height:340px;
  clip-path:polygon(50% 6%, 100% 100%, 0% 100%);
  background:linear-gradient(180deg, rgba(214,168,62,0.22), rgba(214,168,62,0.03) 45%, transparent 68%);
  border-top:1px solid rgba(214,168,62,0.22);
}
.hero-emblem--hex .peak{
  clip-path:polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
  bottom:-10px;height:300px;
}
.hero-emblem--ascend .peak{
  clip-path:polygon(35% 100%, 35% 65%, 55% 65%, 55% 40%, 75% 40%, 75% 15%, 100% 15%, 100% 100%);
  bottom:-40px;
  background:linear-gradient(180deg, rgba(214,168,62,0.28), rgba(214,168,62,0.05) 45%, transparent 68%);
}
.hero-emblem .peak::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(214,168,62,0.07) 1px, transparent 1px),linear-gradient(90deg, rgba(214,168,62,0.07) 1px, transparent 1px);
  background-size:26px 26px;mix-blend-mode:overlay;
}
.hero-emblem .glow{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(240,205,115,0.22), transparent 70%);}
.hero-emblem-glyph{
  position:absolute;left:50%;top:26%;transform:translateX(-50%);
  font-size:64px;line-height:1;color:var(--gold-bright);
  filter:drop-shadow(0 0 16px rgba(214,168,62,0.4));
}
.hero-emblem-glyph .icon{width:1em;height:1em;stroke-width:1.1;}
/* Centered vertically (not bottom-anchored) so it looks balanced regardless
   of the card's height — the Continue Learning card is taller than a tier's
   own hero card (it has the extra lessons-completed row below the button),
   and a fixed bottom offset left it sitting low with dead space above it and
   its podium clipped off at the bottom. */
.hero-emblem-img{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:480px;max-width:none;height:auto;}
/* Home-hero status art (trophy on Curriculum Complete, lock on No Active
   Tier): a sibling of .hero-emblem, not nested in it, so it isn't clipped
   by that container's edge-fade mask (that fade is meant for art bleeding
   off the card edge — this mark should read as a complete, centered image
   instead). max-width/max-height keep it fully inside its box at every
   size so it never gets cut off. */
.hero-mark{position:absolute;right:0;top:0;bottom:0;width:420px;display:flex;align-items:center;justify-content:center;padding:20px 0;box-sizing:border-box;pointer-events:none;}
.hero-mark-img{max-width:200px;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 18px rgba(214,168,62,0.4));}
@media (max-width:1020px){.hero-emblem{width:280px;}.hero-emblem-glyph{font-size:46px;}.hero-emblem-img{width:340px;right:-20px;}.hero-mark{width:280px;}.hero-mark-img{max-width:150px;}}
@media (max-width:820px){.hero-emblem{display:none;}.hero-mark{display:none;}}
.hero-eyebrow{display:flex;align-items:center;gap:8px;color:var(--gold);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.hero-card h2{font-family:'Fraunces',serif;font-size:2.1rem;margin:0 0 12px;font-weight:700;}
.hero-card p{color:var(--text-dim);max-width:640px;line-height:1.6;margin:0 0 22px;font-size:.94rem;}
.hero-content{position:relative;z-index:1;}
.hero-lock-msg{display:flex;align-items:center;gap:9px;color:var(--text-dim);font-size:.92rem;margin:0;}
.hero-lock-msg .icon{color:var(--gold);width:18px;height:18px;flex-shrink:0;}

/* ---- Continue Learning (home view) — the strongest visual action on the
   page, so it borrows .hero-card's per-tier geometric-artwork backdrop
   wholesale rather than introducing a second art system. ---- */
.continue-card{border-color:rgba(214,168,62,0.3);box-shadow:0 0 0 1px rgba(214,168,62,0.1), 0 16px 36px rgba(0,0,0,0.45);}
.continue-kicker{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;}
.continue-progress{margin-top:20px;max-width:420px;}
.continue-progress-label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;}

/* ---- home view (post-login landing) — Continue Learning (.continue-card,
   reuses .hero-card) + Today's Plan (.today-plan, reuses .module-row). The
   right sidebar (progress ring + latest achievement) renders outside this
   .view-panel swap, on every dashboard view, home included. No background
   of its own — the shared page background (body, css/styles.css) reads
   straight through, same as every other tab. */
#view-home{
  position:relative;border-radius:var(--radius);padding:26px;margin:-26px;
}
.home-welcome{position:relative;z-index:1;margin-bottom:16px;}
.home-welcome .k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:2px;text-shadow:0 2px 10px rgba(0,0,0,0.7);}
.home-welcome h2{font-size:1.4rem;margin:0;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,0.7);}
@media (max-width:1020px){#view-home{margin:-22px -18px;padding:22px 18px;}}
@media (max-width:760px){#view-home{margin:-20px -16px;padding:20px 16px;}}

/* Let the background art read through the card instead of sitting under an
   opaque box — same card, just a translucent + blurred fill so the page
   feels like one continuous scene rather than UI floating on top of a photo. */
#view-home .continue-card{
  background:linear-gradient(180deg, rgba(18,19,19,0.82), rgba(13,14,14,0.86));
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
}
.modules-head h3{text-shadow:0 2px 8px rgba(0,0,0,0.6);}
.modules-head .count{text-shadow:0 2px 8px rgba(0,0,0,0.6);}

/* ---- Your Journey (home-view tier grid) — every course tier with its own
   progress bar, lined up so the full curriculum reads at a glance without
   leaving Home. Own class names (not .tier-card) so this never inherits the
   sidebar accordion's open/expand behavior — this grid is always static. ---- */
.home-tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:26px;position:relative;z-index:1;}
.home-tier-card{
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px 15px 14px;
  background:linear-gradient(180deg, rgba(18,19,19,0.8), rgba(13,14,14,0.82));
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  transition:border-color .18s ease;
}
.home-tier-card:hover{border-color:var(--border-strong);}
.home-tier-card.complete{background:linear-gradient(160deg, rgba(214,168,62,0.1), rgba(18,19,19,0.8));border-color:rgba(214,168,62,0.3);}
.home-tier-card.locked{opacity:.6;}
.home-tier-card .tier-card-top{display:flex;align-items:center;gap:12px;}
.home-tier-card-desc{font-size:.76rem;color:var(--text-dim);margin:10px 0 12px;line-height:1.45;}
.home-tier-card .tier-bar{margin-top:0;}
.home-tier-card.locked .tier-bar-row .pct{display:none;}
.home-tier-card-cta{margin-top:auto;padding-top:14px;}
.home-tier-card-cta .btn{width:100%;}

/* ---- Today's Plan — deliberately card-less: typography + spacing only,
   per "avoid unnecessary cards/borders" — sits directly on the page. ---- */
.today-plan{padding:4px 2px 0;position:relative;z-index:1;}
.today-plan .module-row{padding:10px 6px;}

.modules-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding:0 2px;}
.modules-head h3{font-size:.98rem;margin:0;}
.modules-head .count{font-size:.76rem;color:var(--text-faint);}

.module-row{
  display:grid;grid-template-columns:auto auto auto 1fr auto;gap:14px;align-items:center;
  padding:14px 16px;border-radius:12px;border:1px solid transparent;margin-bottom:6px;transition:background .15s ease, border-color .15s ease;
  position:relative;
}
.module-row.clickable{cursor:pointer;}
.module-row.clickable:hover{background:var(--bg-card);border-color:var(--border);}
.module-row.locked{opacity:.42;cursor:not-allowed;}
.module-row.current{background:linear-gradient(90deg, rgba(214,168,62,0.08), transparent);border-color:rgba(214,168,62,0.25);}

.module-rail{display:flex;flex-direction:column;align-items:center;width:14px;position:relative;align-self:stretch;}
.module-rail::before{content:'';position:absolute;top:-9px;bottom:-9px;left:50%;width:1px;background:var(--border);transform:translateX(-50%);}
.module-row:first-child .module-rail::before{top:50%;}
.module-row:last-child .module-rail::before{bottom:50%;}
.module-dot{width:9px;height:9px;border-radius:50%;background:var(--bg-elev);border:2px solid var(--border-strong);position:relative;z-index:1;}
.module-row.completed .module-dot{background:var(--gold);border-color:var(--gold);}
.module-row.current .module-dot{background:var(--gold-bright);border-color:var(--gold-bright);box-shadow:0 0 0 4px rgba(214,168,62,0.16);}

.module-num{width:44px;height:44px;background:var(--bg-elev);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-faint);position:relative;clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);}
.module-idx{width:26px;flex-shrink:0;text-align:center;font-family:'Fraunces',serif;font-weight:700;color:var(--text-faint);font-size:1rem;}
.module-row.completed .module-idx,.module-row.current .module-idx{color:var(--gold-bright);}
.module-row.completed .module-num,.module-row.current .module-num{background:linear-gradient(160deg, rgba(214,168,62,0.18), rgba(214,168,62,0.04));border-color:rgba(214,168,62,0.35);color:var(--gold-bright);}
.module-num .icon{width:19px;height:19px;}
.module-info .t{font-weight:700;font-size:.92rem;margin-bottom:2px;}
.module-info .d{font-size:.78rem;color:var(--text-dim);}
.module-dur{font-size:.78rem;color:var(--text-faint);white-space:nowrap;}
.module-state{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.module-state.done{background:rgba(214,168,62,0.14);color:var(--gold-bright);}
.module-state.play{background:var(--gold-gradient);color:#161207;}
.module-state.locked-icon{background:var(--bg-elev);color:var(--text-faint);}
.module-state .icon{width:15px;height:15px;}

@media (max-width: 640px){
  .module-row{grid-template-columns:auto 1fr auto;gap:10px;}
  .module-rail{display:none;}
  .module-idx{display:none;}
  .module-dur{display:none;}
}

/* ---- right column ---- */
.dash-right{width:320px;flex-shrink:0;padding:26px 26px 26px 0;display:flex;flex-direction:column;gap:18px;}
/* Tablet: drop the right column rather than squeeze it (3-col -> 2-col).
   Mobile (<=760px, .dash-shell goes column) restores it full-width below
   main content — see the 760px block — so progress stays reachable
   everywhere, just reordered instead of hidden outright. */
@media (max-width:1180px) and (min-width:761px){.dash-right{display:none;}}
.panel{padding:20px;}
.panel h4,.today-plan h4{margin:0 0 16px;font-size:.86rem;letter-spacing:.03em;display:flex;align-items:center;justify-content:space-between;}
.panel h4 .see-all{font-size:.72rem;color:var(--gold);font-weight:600;cursor:pointer;}
.panel h4 .ach-count,.today-plan h4 .ach-count{font-size:.66rem;color:var(--gold-bright);font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:rgba(214,168,62,0.1);border:1px solid rgba(214,168,62,0.25);border-radius:100px;padding:3px 9px;}
.view-all-btn{width:100%;margin-top:14px;padding:10px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--gold-bright);font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.view-all-btn:hover{border-color:var(--border-strong);background:rgba(255,255,255,0.03);}

.ring-wrap{display:flex;flex-direction:column;align-items:center;}
.ring-wrap svg{width:150px;height:150px;}
.ring-pct{font-family:'Fraunces',serif;font-size:1.9rem;font-weight:700;}
.ring-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
.ring-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;width:100%;}
.ring-stats div{text-align:center;border-top:1px solid var(--border);padding-top:10px;}
.ring-stats b{display:block;font-family:'Fraunces',serif;font-size:1.15rem;color:var(--gold-bright);}
.ring-stats span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.03em;}

.ach-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border);}
.ach-row:first-of-type{border-top:none;padding-top:0;}
.ach-badge{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg-elev);border:1px solid var(--border);color:var(--text-faint);clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);}
.ach-badge.unlocked{background:var(--gold-gradient);color:#161207;border-color:transparent;}
.ach-info{flex:1;min-width:0;}
.ach-info .t{font-size:.82rem;font-weight:700;}
.ach-info .d{font-size:.72rem;color:var(--text-dim);margin:1px 0 5px;}
.mini-bar{height:4px;border-radius:3px;background:var(--bg-elev);overflow:hidden;}
.mini-bar>span{display:block;height:100%;background:var(--gold);border-radius:3px;transition:width .4s ease;}
.ach-frac{font-size:.66rem;color:var(--text-faint);margin-top:3px;}

/* ---- progress / achievements alt views ---- */
.view-panel{display:none;}
.view-panel.active{display:block;}
.big-tier-progress{margin-bottom:20px;padding:22px;}
.big-tier-progress .row{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.big-tier-progress .row:last-child{margin-bottom:0;}
.big-tier-progress .row .tb-icon{width:40px;height:40px;border-radius:10px;background:var(--bg-elev);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);flex-shrink:0;}
.big-tier-progress .row .tb-info{flex:1;}
.big-tier-progress .row .tb-info .t{font-weight:700;font-size:.9rem;margin-bottom:6px;display:flex;justify-content:space-between;}
.big-tier-progress .row .tb-info .t span:last-child{color:var(--gold-bright);font-family:'Fraunces',serif;}

.ach-sections{display:flex;flex-direction:column;gap:10px;}
.ach-section{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);overflow:hidden;}
.ach-section-header{
  width:100%;display:flex;align-items:center;gap:10px;padding:16px 18px;
  background:transparent;border:none;text-align:left;color:var(--text);
}
.ach-section-header:hover{background:rgba(255,255,255,0.02);}
.ach-section-chevron{color:var(--text-faint);flex-shrink:0;transition:transform .2s ease;width:16px;height:16px;}
.ach-section.open .ach-section-chevron{transform:rotate(90deg);color:var(--gold-bright);}
.ach-section-title-text{flex:1;font-size:.86rem;font-weight:700;letter-spacing:.02em;}
.ach-section-header .count{font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-faint);background:var(--bg-elev);border:1px solid var(--border);border-radius:100px;padding:4px 10px;flex-shrink:0;}
.ach-section.open .ach-section-header .count{color:var(--gold-bright);border-color:rgba(214,168,62,0.25);}
.ach-section-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;}
.ach-section-body>*{overflow:hidden;}
.ach-section.open .ach-section-body{grid-template-rows:1fr;}
.ach-section-body .ach-grid{padding:0 18px 18px;}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.ach-grid.small{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.ach-grid.small .ach-card{padding:14px;}
.ach-grid.small .ach-badge{width:32px;height:32px;margin-bottom:9px;}
.ach-grid.small .t{font-size:.82rem;}
.ach-grid.small .d{font-size:.72rem;margin-bottom:8px;}
.ach-card{padding:18px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card);}
.ach-card.unlocked{border-color:rgba(214,168,62,0.3);background:linear-gradient(160deg, rgba(214,168,62,0.06), var(--bg-card));}
.ach-card .ach-badge{width:44px;height:44px;margin-bottom:12px;}
.ach-card .t{font-weight:700;font-size:.92rem;margin-bottom:4px;}
.ach-card .d{font-size:.78rem;color:var(--text-dim);margin-bottom:12px;}

.settings-panel{max-width:520px;padding:26px;}
.settings-panel .field{margin-bottom:18px;}
.avatar-picker{display:flex;gap:12px;flex-wrap:wrap;}
.avatar-swatch{
  width:56px;height:56px;border-radius:50%;padding:3px;flex-shrink:0;
  background:transparent;border:2px solid transparent;transition:border-color .15s ease, transform .15s ease;
}
.avatar-swatch:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.avatar-swatch.selected{border-color:var(--gold);}
.avatar-swatch-inner{
  width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1e1f1f,#101111);border:1px solid var(--border-strong);
  font-family:'Fraunces',serif;font-weight:700;color:var(--gold-bright);font-size:.85rem;
}
.avatar-swatch-inner img{width:100%;height:100%;object-fit:cover;display:block;}
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--border);}
.settings-row:first-of-type{border-top:none;}
.settings-row .t{font-weight:600;font-size:.88rem;}
.settings-row .d{font-size:.76rem;color:var(--text-dim);}
.toggle{width:42px;height:24px;border-radius:100px;background:var(--bg-elev);border:1px solid var(--border);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s ease;}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text-faint);transition:all .2s ease;}
.toggle.on{background:rgba(214,168,62,0.22);border-color:var(--gold);}
.toggle.on::after{left:20px;background:var(--gold-bright);}

/* ============================================================
   MODULE VIEW
   ============================================================ */
.module-shell{max-width:880px;margin:0 auto;padding:26px 24px 80px;}
.module-topbar{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.topbar-brand{display:flex;align-items:center;flex-shrink:0;background:transparent;border:1px solid var(--border);border-radius:9px;padding:8px;cursor:pointer;transition:border-color .15s ease;}
.topbar-brand:hover{border-color:var(--border-strong);}
.topbar-brand img{width:18px;height:auto;display:block;}
.back-btn{display:flex;align-items:center;gap:7px;color:var(--text-dim);font-size:.84rem;font-weight:600;padding:8px 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg-card);}
.back-btn:hover{color:var(--text);border-color:var(--border-strong);}
.crumb{font-size:.76rem;color:var(--text-faint);}
.crumb b{color:var(--gold);}

.module-hero-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap;}
.module-hero-title h1{font-family:'Fraunces',serif;font-size:2rem;margin:0 0 8px;}
.module-hero-title .meta{display:flex;gap:14px;color:var(--text-dim);font-size:.82rem;flex-wrap:wrap;}
.module-hero-title .meta span{display:flex;align-items:center;gap:6px;}

.section-block{margin-bottom:26px;padding:26px;}
.section-block h3{font-family:'Fraunces',serif;font-size:1.25rem;margin:0 0 14px;display:flex;align-items:center;gap:9px;}
.section-block h3 .icon{color:var(--gold);width:20px;height:20px;}
.lesson-sub{margin-bottom:18px;}
.lesson-sub:last-child{margin-bottom:0;}
.lesson-sub h4{font-size:.9rem;color:var(--gold-bright);margin:0 0 8px;letter-spacing:.01em;}
.lesson-sub p{color:var(--text-dim);line-height:1.75;font-size:.92rem;margin:0 0 12px;}
.lesson-sub p:last-child{margin-bottom:0;}
.lesson-sub p b, .lesson-sub li b{color:var(--text);}
.lesson-list{margin:0 0 12px;padding-left:20px;color:var(--text-dim);line-height:1.7;font-size:.92rem;}
.lesson-list:last-child{margin-bottom:0;}
.lesson-list li{margin-bottom:8px;}
.lesson-list li:last-child{margin-bottom:0;}

/* ---- lesson diagram (source-book figure, native light background kept
   intentionally — recoloring 40+ hand-laid-out diagrams to the dark theme
   isn't reliable, so it's presented as a contained reference card instead,
   same pattern as embedding a documentation screenshot). ---- */
.lesson-figure{margin:4px 0 16px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);background:#f7f5f0;}
.lesson-figure img{display:block;width:100%;height:auto;}
.lesson-figure figcaption{padding:12px 16px;background:var(--bg-elev);border-top:1px solid var(--border);font-size:.78rem;line-height:1.55;color:var(--text-dim);}
.lesson-figure figcaption b{color:var(--gold-bright);}

/* ---- lesson reference table (restored source-book tables — technique
   lookups, comparison grids, QA checklists). Time-sensitive ones carry the
   book's own "Verified" dating instead of presenting vendor specifics as
   permanent fact. ---- */
.lesson-table-wrap{margin:4px 0 16px;overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);}
.lesson-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.lesson-table th{background:var(--bg-elev);color:var(--gold-bright);text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--border-strong);white-space:nowrap;}
.lesson-table td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-dim);line-height:1.55;vertical-align:top;}
.lesson-table tr:last-child td{border-bottom:none;}
.lesson-table td:first-child{color:var(--text);font-weight:600;}
.lesson-table-verified{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-bright);background:rgba(214,168,62,0.1);border:1px solid rgba(214,168,62,0.25);border-radius:100px;padding:4px 10px;margin-bottom:10px;}
.lesson-table-note{color:var(--text-faint);font-size:.78rem;line-height:1.6;margin:10px 0 0;font-style:italic;}

.exercise-block textarea{
  width:100%;min-height:120px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;
  padding:14px;color:var(--text);font-size:.9rem;line-height:1.6;resize:vertical;font-family:inherit;
}
.exercise-block textarea::placeholder{color:var(--text-faint);}
.exercise-block textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,168,62,0.12);}
.exercise-block .prompt{color:var(--text-dim);font-size:.9rem;line-height:1.65;margin:0 0 14px;padding:14px 16px;background:var(--bg-elev);border-left:2px solid var(--gold);border-radius:0 8px 8px 0;}
.exercise-block .actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
.exercise-saved{display:none;align-items:center;gap:6px;color:var(--gold-bright);font-size:.8rem;font-weight:600;}
.exercise-saved.show{display:flex;}

.checklist-items{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;}
.checklist-item{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:10px;cursor:pointer;transition:background .15s ease;}
.checklist-item:hover{background:var(--bg-elev);}
.checklist-item .box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border-strong);background:var(--bg-elev);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;color:transparent;transition:all .15s ease;}
.checklist-item.checked .box{background:var(--gold-gradient);border-color:transparent;color:#161207;}
.checklist-item .box .icon{width:14px;height:14px;}
.checklist-item .label{font-size:.9rem;color:var(--text-dim);line-height:1.5;}
.checklist-item.checked .label{color:var(--text);}
#checklist-share-row{display:none;justify-content:flex-start;margin-top:10px;}
#checklist-share-row.show{display:flex;}

.module-footer-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:6px;}

/* ============================================================
   QUIZ VIEW
   ============================================================ */
.quiz-shell{max-width:720px;margin:0 auto;padding:40px 24px 80px;}
.quiz-progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.78rem;color:var(--text-dim);}
.quiz-progress-bar{height:6px;border-radius:5px;background:var(--bg-elev);overflow:hidden;margin-bottom:34px;}
.quiz-progress-bar>span{display:block;height:100%;background:var(--gold-gradient);border-radius:5px;transition:width .4s ease;}

.quiz-card{padding:32px;}
.quiz-q{font-family:'Fraunces',serif;font-size:1.35rem;line-height:1.4;margin:0 0 24px;}
.quiz-options{display:flex;flex-direction:column;gap:10px;}
.quiz-opt{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:11px;border:1px solid var(--border);
  background:var(--bg-elev);cursor:pointer;transition:border-color .15s ease, background .15s ease;font-size:.92rem;
}
.quiz-opt:hover:not(.locked){border-color:var(--border-strong);background:var(--bg-card-2);}
.quiz-opt .letter{width:26px;height:26px;border-radius:7px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:700;color:var(--text-dim);flex-shrink:0;}
.quiz-opt.locked{cursor:default;}
.quiz-opt.selected{border-color:var(--gold);background:rgba(214,168,62,0.08);}
.quiz-opt.correct{border-color:var(--success);background:rgba(74,222,128,0.09);}
.quiz-opt.correct .letter{background:var(--success);border-color:var(--success);color:#04220f;}
.quiz-opt.incorrect{border-color:var(--danger);background:rgba(241,101,101,0.09);}
.quiz-opt.incorrect .letter{background:var(--danger);border-color:var(--danger);color:#2a0808;}
.quiz-opt .res-icon{margin-left:auto;width:18px;height:18px;flex-shrink:0;}
.quiz-opt.correct .res-icon{color:var(--success);}
.quiz-opt.incorrect .res-icon{color:var(--danger);}

.quiz-feedback{display:none;margin-top:20px;padding:16px 18px;border-radius:11px;font-size:.87rem;line-height:1.6;}
.quiz-feedback.show{display:block;animation:fadeIn .25s ease;}
.quiz-feedback.correct{background:rgba(74,222,128,0.08);border:1px solid rgba(74,222,128,0.3);color:#c9f5da;}
.quiz-feedback.incorrect{background:rgba(241,101,101,0.08);border:1px solid rgba(241,101,101,0.3);color:#f9d3d3;}
.quiz-feedback b{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:.86rem;}
.quiz-feedback.correct b{color:var(--success);}
.quiz-feedback.incorrect b{color:var(--danger);}

.quiz-footer{display:flex;justify-content:flex-end;margin-top:24px;}

.quiz-results{text-align:center;padding:50px 32px;}
.quiz-results .ring-wrap svg{width:170px;height:170px;}
.quiz-results h2{font-family:'Fraunces',serif;font-size:1.7rem;margin:18px 0 8px;}
.quiz-results p{color:var(--text-dim);max-width:420px;margin:0 auto 28px;line-height:1.6;font-size:.92rem;}
.quiz-results .actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}

/* ============================================================
   CERTIFICATE
   ============================================================ */
.cert-shell{max-width:920px;margin:0 auto;padding:48px 24px 90px;}
.cert-intro{text-align:center;margin-bottom:34px;}
.cert-intro .icon-badge{width:64px;height:64px;border-radius:50%;background:var(--gold-gradient);display:flex;align-items:center;justify-content:center;color:#161207;margin:0 auto 18px;box-shadow:0 10px 24px rgba(139,103,28,0.32);}
.cert-intro .icon-badge .icon{width:28px;height:28px;}
.cert-intro h1{font-family:'Fraunces',serif;font-size:2rem;margin:0 0 10px;}
.cert-intro p{color:var(--text-dim);max-width:520px;margin:0 auto;line-height:1.6;}

.certificate{
  position:relative;border-radius:18px;padding:56px 50px;
  background:
    radial-gradient(circle at 15% 15%, rgba(214,168,62,0.09), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(214,168,62,0.06), transparent 55%),
    linear-gradient(160deg,#101111,#080909);
  border:1px solid var(--border-strong);
  box-shadow:0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(214,168,62,0.05);
  text-align:center;overflow:hidden;
}
.certificate::before{
  content:'';position:absolute;inset:10px;border:1px solid rgba(214,168,62,0.18);border-radius:12px;pointer-events:none;
}
.cert-mark{display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.cert-mark img{width:120px;height:auto;display:block;}
.cert-kicker{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:26px;}
.cert-presented{color:var(--text-dim);font-size:.85rem;letter-spacing:.04em;margin-bottom:10px;}
.cert-name{font-family:'Fraunces',serif;font-size:2.6rem;font-weight:700;color:var(--gold-bright);margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--border);display:inline-block;min-width:60%;}
.cert-for{color:var(--text-dim);font-size:.9rem;margin-bottom:6px;}
.cert-tier{font-family:'Fraunces',serif;font-size:1.3rem;margin:0 0 18px;color:var(--text-dim);}
.cert-award-label{font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--text-dim);font-size:.76rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em;}
.cert-title{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;color:var(--gold-bright);margin:0 0 26px;}
.cert-meta{display:flex;justify-content:center;gap:50px;margin-top:20px;flex-wrap:wrap;}
.cert-meta div{text-align:center;}
.cert-meta .l{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin-bottom:5px;}
.cert-meta .v{font-size:.86rem;font-weight:700;color:var(--text);}
.cert-sig{margin-top:34px;display:flex;justify-content:center;gap:70px;flex-wrap:wrap;}
.cert-sig div{text-align:center;}
.cert-sig .line{width:150px;height:1px;background:var(--border-strong);margin-bottom:8px;}
.cert-sig .l{font-size:.72rem;color:var(--text-faint);}

.cert-actions{display:flex;justify-content:center;gap:12px;margin-top:34px;flex-wrap:wrap;}

/* ============================================================
   TOAST + MODAL
   ============================================================ */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--bg-card-2);border:1px solid var(--border-strong);border-radius:12px;padding:13px 20px;
  display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,0.5);
  opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .icon{color:var(--gold-bright);}

.modal-overlay{
  position:fixed;inset:0;background:rgba(5,5,8,0.7);backdrop-filter:blur(3px);display:none;
  align-items:center;justify-content:center;z-index:150;padding:20px;
}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--bg-card-2);border:1px solid var(--border-strong);border-radius:16px;max-width:560px;width:100%;max-height:85vh;overflow-y:auto;padding:26px;box-shadow:0 30px 70px rgba(0,0,0,0.6);}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.modal-head h3{margin:0;font-family:'Fraunces',serif;font-size:1.3rem;}
.modal-close{width:32px;height:32px;border-radius:9px;background:var(--bg-elev);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);flex-shrink:0;}
.modal-close:hover{color:var(--text);border-color:var(--border-strong);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .dash-sidebar{width:250px;padding:22px 16px;}
  .dash-main{padding:22px 18px 50px;}
}
@media (max-width:760px){
  .dash-shell{flex-direction:column;}
  .dash-sidebar{width:100%;height:auto;position:relative;flex-direction:row;flex-wrap:wrap;align-items:center;padding:16px 20px;gap:14px;}
  .dash-brand{border-bottom:none;padding:0;margin:0;flex:1;min-width:200px;}
  .nav-icons{width:100%;order:1;}

  /* Course tier navigation is retained on mobile, not dropped — but collapsed
     behind one toggle by default so it doesn't push Continue Learning below
     the fold. No horizontal scroll: everything stacks full-width. */
  .tier-list-toggle{display:flex;order:2;}
  .tier-list-label{display:none;}
  .tier-list{width:100%;order:3;max-height:0;overflow:hidden;flex:none;gap:10px;transition:max-height .3s ease;}
  .dash-sidebar.tiers-expanded .tier-list{max-height:2000px;}
  #tier-unlock-note{order:4;width:100%;}

  .dash-main{padding:20px 16px 50px;}

  /* Column stack puts .dash-right after .dash-main in source order already —
     Continue Learning + CTA + Today's Plan land first, Progress/Latest
     Achievement follow, matching the required mobile priority order. */
  .dash-right{display:flex;width:100%;padding:0;}
}
@media (max-width:640px){
  .dash-topbar{flex-direction:column;align-items:stretch;gap:12px;}
  .hero-card{padding:24px 20px;}
  .hero-card h2{font-size:1.6rem;}
  .module-row{padding:12px 10px;}
  .certificate{padding:36px 20px;}
  .cert-name{font-size:1.8rem;}
  .cert-sig{gap:28px;}
}

/* ============================================================
   ACCESSIBILITY — skip link + reduced motion
   ============================================================ */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:1000;
  background:var(--gold-gradient);color:#161207;
  font-weight:700;font-size:.86rem;
  padding:10px 18px;border-radius:8px;
  transition:top .15s ease;
}
.skip-link:focus{top:12px;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}