@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

:root{
  --bg:#080909;
  --bg-1:#0d0e0e;
  --bg-elev:#121313;
  --bg-card:#121313;
  --bg-card-2:#18191a;
  --border:#292a29;
  --border-strong:#3c3d3c;
  --gold:#d6a83e;
  --gold-bright:#e5bb58;
  --gold-highlight:#f0cd73;
  --gold-dim:#8b671c;
  --gold-gradient: linear-gradient(135deg, #8b671c 0%, #d6a83e 35%, #f0cd73 65%, #d6a83e 100%);
  --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:'Playfair Display',serif;}

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);}}

.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:'Playfair Display',serif;font-weight:700;font-size:1.2rem;letter-spacing:.16em;color:var(--text);}
.auth-visual-content h1{font-family:'Playfair Display',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-size:.72rem;font-weight:700;letter-spacing:.09em;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:'Playfair Display',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:'Playfair Display',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:'Playfair Display',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:'Playfair Display',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:'Playfair Display',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-size:.74rem;font-weight:700;letter-spacing:.12em;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(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
}
.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-size:.7rem;letter-spacing:.09em;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:'Playfair Display',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;}
@media (max-width:1020px){.hero-emblem{width:280px;}.hero-emblem-glyph{font-size:46px;}.hero-emblem-img{width:340px;right:-20px;}}
@media (max-width:820px){.hero-emblem{display:none;}}
.hero-eyebrow{display:flex;align-items:center;gap:8px;color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;}
.hero-card h2{font-family:'Playfair Display',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-size:.72rem;font-weight:700;letter-spacing:.08em;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-size:.68rem;letter-spacing:.1em;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(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);}
.module-idx{width:26px;flex-shrink:0;text-align:center;font-family:'Playfair Display',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:'Playfair Display',serif;font-size:1.9rem;font-weight:700;}
.ring-label{font-size:.68rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;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:'Playfair Display',serif;font-size:1.15rem;color:var(--gold-bright);}
.ring-stats span{font-size:.62rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}

.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(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);}
.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:'Playfair Display',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:'Playfair Display',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:'Playfair Display',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:'Playfair Display',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:'Playfair Display',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:'Playfair Display',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:'Playfair Display',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-size:.72rem;letter-spacing:.22em;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:'Playfair Display',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:'Playfair Display',serif;font-size:1.3rem;margin:0 0 18px;color:var(--text-dim);}
.cert-award-label{color:var(--text-dim);font-size:.82rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em;}
.cert-title{font-family:'Playfair Display',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-size:.66rem;text-transform:uppercase;letter-spacing:.08em;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:'Playfair Display',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;}
}