/* ============================================================
   ATELIER — DESIGN SYSTEM
   Palette rationale: this is drawn from the literal desk of a
   drawing student, not a generic SaaS template — graphite/paper
   neutrals, non-photo-blue for "construction" (in-progress, the
   underdrawing you build with), and a crit-pen vermillion for
   "verified / mastered" (the mark an instructor makes when
   something is right). Serif for voice, mono for measurement.
   ============================================================ */
:root{
  --font-display:'Instrument Serif', Georgia, serif;
  --font-body:'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --shadow-sm:0 1px 2px rgba(10,9,7,.30);
  --shadow-md:0 8px 24px rgba(10,9,7,.28);
  --shadow-lg:0 24px 60px rgba(10,9,7,.38);

  --dur-fast:120ms; --dur:220ms; --dur-slow:400ms;
  --ease:cubic-bezier(.4,0,.2,1);

  --sidebar-w:296px;
  --topbar-h:64px;
  --font-scale:1;
}

/* ---- Theme tokens: dark is default (the drafting-desk mode), light is the paper alternative ---- */
:root, [data-theme="dark"]{
  --bg:#151318; --bg-raised:#1B1920; --surface:#1F1D25; --surface-2:#26232C;
  --border:#332F3B; --border-soft:#28252E;
  --text:#F1EEE9; --text-muted:#A8A2AE; --text-faint:#9791A0;
  --blue:#6FB2E8; --blue-ink:#0E2A3E; --blue-soft:#1C2E3B;
  --red:#E2664A; --red-ink:#3A1712; --red-soft:#33201C;
  --green:#7CB88F;
  --paper-tint: rgba(241,238,233,.03);
}
[data-theme="light"]{
  --bg:#EEECE6; --bg-raised:#F5F3EE; --surface:#FFFFFF; --surface-2:#F1EEE7;
  --border:#DCD7CB; --border-soft:#E6E2D8;
  --text:#1B1812; --text-muted:#655F52; --text-faint:#6B6558;
  --blue:#2F6CA6; --blue-ink:#E4EEF7; --blue-soft:#E4EEF7;
  --red:#B23F26; --red-ink:#FBE7E1; --red-soft:#FBE7E1;
  --green:#3E7A56;
  --paper-tint: rgba(27,24,18,.025);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
body{
  margin:0; background:var(--bg); color:var(--text); position:relative;
  font-family:var(--font-body); font-size:calc(16px*var(--font-scale)); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 800px 500px at 15% -10%, var(--paper-tint), transparent),
    radial-gradient(ellipse 700px 500px at 100% 0%, var(--paper-tint), transparent);
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:400; margin:0; letter-spacing:.2px;}
p{margin:0;}
a{color:var(--blue);}
button{font-family:inherit; cursor:pointer;}
ul{margin:0; padding:0; list-style:none;}
svg{display:block;}

/* ---- Accessibility utilities ---- */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--red); color:#fff;
  padding:var(--sp-3) var(--sp-4); z-index:1000; border-radius:0 0 var(--radius-sm) 0;
  font-family:var(--font-mono); font-size:calc(13px * var(--font-scale)); text-decoration:none;
}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:100; height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--sp-4);
  padding:0 var(--sp-5);
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.brand{display:flex; align-items:center; gap:var(--sp-2); text-decoration:none; color:var(--text); flex-shrink:0;}
.brand-mark{width:26px; height:26px; color:var(--blue);}
.brand-word{font-family:var(--font-mono); font-weight:600; font-size:calc(15px * var(--font-scale)); letter-spacing:2.5px; text-transform:uppercase;}
.menu-btn{
  display:none; background:none; border:1px solid var(--border); color:var(--text);
  width:38px; height:38px; border-radius:var(--radius-sm); align-items:center; justify-content:center;
}
.topbar-search{
  flex:1; max-width:420px; display:flex; align-items:center; gap:var(--sp-2);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-full);
  padding:var(--sp-2) var(--sp-4); transition:border-color var(--dur) var(--ease);
}
.topbar-search:focus-within{border-color:var(--blue);}
.topbar-search svg{width:16px; height:16px; color:var(--text-faint); flex-shrink:0;}
.topbar-search input{
  border:none; background:none; outline:none; color:var(--text); font-size:calc(14px * var(--font-scale)); width:100%; font-family:var(--font-body);
}
.topbar-search input::placeholder{color:var(--text-faint);}
.topbar-spacer{flex:1;}
.topbar-actions{display:flex; align-items:center; gap:var(--sp-2);}
.icon-btn{
  background:none; border:1px solid transparent; color:var(--text-muted);
  width:38px; height:38px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  transition:all var(--dur) var(--ease);
}
.icon-btn svg{width:18px; height:18px;}
.icon-btn:hover{color:var(--text); background:var(--surface); border-color:var(--border);}
.icon-btn[aria-pressed="true"]{color:var(--blue); border-color:var(--border);}
.lang-toggle{width:auto; padding:0 var(--sp-3); font-size:calc(13px * var(--font-scale)); font-weight:600; letter-spacing:0.3px;}
.xp-pill{
  display:flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono); font-size:calc(12px * var(--font-scale));
  color:var(--text-muted); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-full);
  padding:var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2); white-space:nowrap;
}
.xp-pill b{color:var(--blue); font-weight:600;}

/* ============================================================
   LAYOUT
   ============================================================ */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:calc(100vh - var(--topbar-h));}

/* ---- Sidebar ---- */
.sidebar{
  border-right:1px solid var(--border-soft); padding:var(--sp-5) var(--sp-4) var(--sp-8);
  position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); overflow-y:auto;
}
.sidebar::-webkit-scrollbar{width:8px;}
.sidebar::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;}
.side-section{margin-bottom:var(--sp-6);}
.side-label{
  font-family:var(--font-mono); font-size:calc(11px * var(--font-scale)); letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-faint); padding:0 var(--sp-3); margin-bottom:var(--sp-2); display:block;
}
.side-path-group{margin-bottom:var(--sp-3);}
.side-path-header{
  display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  font-size:calc(13px * var(--font-scale)); font-weight:600; color:var(--text);
}
.path-dot{width:7px; height:7px; border-radius:50%; background:var(--blue); flex-shrink:0;}
.path-dot.soon{background:var(--text-faint);}
.side-module-list{padding-left:var(--sp-5); border-left:1px solid var(--border-soft); margin-left:var(--sp-4); margin-top:var(--sp-1);}
.side-module-item{
  display:flex; align-items:center; gap:var(--sp-2); width:100%; text-align:left; background:none; border:none;
  color:var(--text-muted); font-size:calc(13px * var(--font-scale)); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm);
  transition:all var(--dur-fast) var(--ease); position:relative;
}
.side-module-item:hover{background:var(--surface); color:var(--text);}
.side-module-item.active{background:var(--blue-soft); color:var(--blue); font-weight:500;}
.side-module-item .m-check{width:14px; height:14px; flex-shrink:0; color:var(--red);}
.side-module-item .m-num{font-family:var(--font-mono); font-size:calc(10.5px * var(--font-scale)); color:var(--text-faint); flex-shrink:0; width:16px;}
.side-module-item .tool-icon{width:15px; height:15px; flex-shrink:0; color:var(--text-faint);}
.side-module-item.active .tool-icon{color:var(--blue);}
.side-locked{opacity:.45; padding:var(--sp-1) var(--sp-3); font-size:calc(12.5px * var(--font-scale)); color:var(--text-faint); display:flex; justify-content:space-between;}

/* ---- Main ---- */
.main{padding:var(--sp-6) var(--sp-7) var(--sp-9); max-width:920px; min-width:0;}

/* ============================================================
   HERO / HOME VIEW
   ============================================================ */
.hero{margin-bottom:var(--sp-8);}
.eyebrow{
  font-family:var(--font-mono); font-size:calc(12px * var(--font-scale)); letter-spacing:2px; text-transform:uppercase;
  color:var(--blue); margin-bottom:var(--sp-3); display:flex; align-items:center; gap:var(--sp-2);
}
.eyebrow::before{content:''; width:24px; height:1px; background:var(--blue);}
.hero h1{font-size:clamp(38px,5.5vw,58px); line-height:1.05; max-width:15ch; margin-bottom:var(--sp-4);}
.hero h1 em{color:var(--blue); font-style:italic;}
.hero-sub{font-size:calc(17px * var(--font-scale)); color:var(--text-muted); max-width:56ch; margin-bottom:var(--sp-6);}
.hero-row{display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-7);}

.btn{
  display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-body); font-weight:600; font-size:calc(14.5px * var(--font-scale));
  padding:var(--sp-3) var(--sp-5); border-radius:var(--radius-full); border:1px solid transparent;
  transition:all var(--dur) var(--ease); text-decoration:none;
}
.btn svg{width:16px; height:16px;}
.btn-primary{background:var(--blue); color:var(--bg-raised);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-ghost{background:none; border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--text-muted); background:var(--surface);}
.btn:disabled{opacity:.45; cursor:not-allowed; background:var(--surface-2); color:var(--text-faint); box-shadow:none; transform:none;}
.btn:disabled:hover{transform:none; box-shadow:none;}

.stat-strip{display:flex; gap:var(--sp-6); flex-wrap:wrap;}
.streak-flame{width:16px; height:16px; display:inline-block; vertical-align:-2px; color:var(--red);}
.stat{font-family:var(--font-mono);}
.stat b{display:block; font-size:calc(22px * var(--font-scale)); color:var(--text); font-weight:600;}
.stat span{font-size:calc(11px * var(--font-scale)); color:var(--text-faint); letter-spacing:.5px; text-transform:uppercase;}

.quote-card{
  border-left:2px solid var(--red); padding:var(--sp-4) var(--sp-5); background:var(--surface);
  border-radius:0 var(--radius-md) var(--radius-md) 0; margin-bottom:var(--sp-8); max-width:60ch;
}
.quote-card p{font-family:var(--font-display); font-size:calc(19px * var(--font-scale)); font-style:italic; line-height:1.5;}
.quote-card cite{display:block; margin-top:var(--sp-2); font-family:var(--font-mono); font-size:calc(11px * var(--font-scale)); color:var(--text-faint); font-style:normal; letter-spacing:.5px;}

/* ---- Path map (signature element): a blueprint-style route of the whole curriculum ---- */
.pathmap-wrap{margin-bottom:var(--sp-8);}
.pathmap-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-5); gap:var(--sp-3); flex-wrap:wrap;}
.pathmap-head h2{font-size:calc(26px * var(--font-scale));}
.pathmap-head p{color:var(--text-muted); font-size:calc(14px * var(--font-scale));}
.pathmap{display:flex; flex-direction:column; gap:0; position:relative;}
.station{
  display:flex; gap:var(--sp-5); position:relative; padding-bottom:var(--sp-6); cursor:pointer;
  background:none; border:none; text-align:left; width:100%; color:inherit; font-family:inherit;
}
.station:last-child{padding-bottom:0;}
.station-rail{display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:36px;}
.station-node{
  width:36px; height:36px; border-radius:50%; border:1.5px dashed var(--border);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:calc(12px * var(--font-scale));
  color:var(--text-faint); background:var(--bg); z-index:1; transition:all var(--dur) var(--ease); flex-shrink:0;
}
.station.is-open .station-node{border-style:solid; border-color:var(--blue); color:var(--blue); background:var(--blue-soft);}
.station.is-done .station-node{border-style:solid; border-color:var(--red); color:var(--red); background:var(--red-soft);}
.station-line{width:1.5px; flex:1; background-image:linear-gradient(var(--border) 60%, transparent 0%); background-size:1.5px 6px; margin-top:4px;}
.station:last-child .station-line{display:none;}
.station-body{flex:1; padding-top:2px; transition:transform var(--dur) var(--ease);}
.station.is-open:hover .station-body{transform:translateX(3px);}
.station-top{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-1);}
.station-title{font-family:var(--font-display); font-size:calc(21px * var(--font-scale)); color:var(--text);}
.tag{
  font-family:var(--font-mono); font-size:calc(10.5px * var(--font-scale)); letter-spacing:.5px; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--radius-sm); border:1px solid var(--border); color:var(--text-faint);
}
.tag.open{color:var(--blue); border-color:var(--blue);}
.station-desc{font-size:calc(14px * var(--font-scale)); color:var(--text-muted); max-width:60ch;}
.station-modcount{font-family:var(--font-mono); font-size:calc(11px * var(--font-scale)); color:var(--text-faint); margin-top:var(--sp-2);}

/* ============================================================
   MODULE CARDS (used inside an open path on the home view)
   ============================================================ */
.module-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:var(--sp-4); margin-top:var(--sp-4);}
.mcard{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:var(--sp-5); cursor:pointer; transition:all var(--dur) var(--ease); position:relative; overflow:hidden;
  text-align:left; width:100%; color:inherit; font-family:inherit;
}
.mcard:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.mcard.start-here{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue), var(--shadow-md);}
.mcard-deco{position:absolute; top:-10px; right:-10px; width:90px; height:90px; opacity:.5; color:var(--border); pointer-events:none;}
.mcard-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--sp-3); gap:var(--sp-2);}
.plate-id{font-family:var(--font-mono); font-size:calc(11px * var(--font-scale)); color:var(--text-faint); letter-spacing:1px;}
.stamp{
  font-family:var(--font-mono); font-size:calc(9px * var(--font-scale)); letter-spacing:1px; color:var(--red); border:1.5px solid var(--red);
  border-radius:4px; padding:2px 6px; transform:rotate(-6deg); text-transform:uppercase; flex-shrink:0; display:inline-flex; align-items:center; gap:3px;
}
.stamp svg{width:9px; height:9px;}
.stamp.start-stamp{color:var(--blue); border-color:var(--blue); transform:rotate(-3deg);}
.mcard h3{font-size:calc(19px * var(--font-scale)); margin-bottom:var(--sp-2); position:relative;}
.mcard-hook{font-size:calc(13.5px * var(--font-scale)); color:var(--text-muted); margin-bottom:var(--sp-4); min-height:36px;}
.mcard-meta{display:flex; gap:var(--sp-3); flex-wrap:wrap;}
.meta-chip{display:flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:calc(11px * var(--font-scale)); color:var(--text-faint);}
.meta-chip svg{width:12px; height:12px;}
.mcard-progress{height:3px; background:var(--border-soft); border-radius:2px; margin-top:var(--sp-4); overflow:hidden;}
.mcard-progress-fill{height:100%; background:var(--red); border-radius:2px; transition:width var(--dur-slow) var(--ease);}

/* ============================================================
   MODULE DETAIL VIEW
   ============================================================ */
.breadcrumb{display:flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono); font-size:calc(12px * var(--font-scale)); color:var(--text-faint); margin-bottom:var(--sp-5); flex-wrap:wrap;}
.breadcrumb button{background:none; border:none; color:var(--text-faint); font-family:inherit; font-size:inherit; padding:2px 0;}
.breadcrumb button:hover{color:var(--blue);}
.breadcrumb svg{width:10px; height:10px;}

.module-head{margin-bottom:var(--sp-6); position:relative;}
.status-banner{
  display:flex; align-items:center; gap:var(--sp-2); font-size:calc(13px * var(--font-scale)); padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-full); margin-bottom:var(--sp-4); width:fit-content;
}
.status-banner svg{width:14px; height:14px; flex-shrink:0;}
.status-banner.is-complete{background:var(--red-soft); color:var(--red); border:1px solid var(--red);}
.status-banner.is-progress{background:var(--surface); color:var(--text-muted); border:1px solid var(--border-soft);}
.status-banner.is-prereq-warning{background:var(--blue-soft); color:var(--blue); border:1px solid var(--blue); margin-top:calc(-1 * var(--sp-3)); max-width:100%;}
.status-banner b{color:var(--blue); font-weight:600;}
.module-head-top{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-4);}
.module-head h1{font-size:clamp(32px,4.5vw,46px); margin-bottom:var(--sp-2); line-height:1.08; max-width:18ch;}
.module-hook{font-size:calc(16px * var(--font-scale)); color:var(--text-muted); max-width:55ch; margin-bottom:var(--sp-5);}
.fav-btn{background:none; border:1px solid var(--border); width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-muted); flex-shrink:0;}
.fav-btn svg{width:18px; height:18px;}
.fav-btn[aria-pressed="true"]{color:var(--red); border-color:var(--red);}
.fav-btn[aria-pressed="true"] svg{fill:var(--red);}

.meta-row{display:flex; gap:var(--sp-5); flex-wrap:wrap; padding:var(--sp-4) 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);}
.meta-item{display:flex; flex-direction:column; gap:2px;}
.meta-item span{font-family:var(--font-mono); font-size:calc(10px * var(--font-scale)); letter-spacing:1px; text-transform:uppercase; color:var(--text-faint);}
.meta-item b{font-size:calc(14px * var(--font-scale)); font-weight:500;}
.meta-item a{color:var(--blue); font-size:calc(13px * var(--font-scale)); text-decoration:none;}

/* ---- Tabs ---- */
.tabs{display:flex; gap:var(--sp-2); margin:var(--sp-6) 0 var(--sp-5); border-bottom:1px solid var(--border-soft); overflow-x:auto; min-width:0; max-width:100%;}
.tab{
  background:none; border:none; padding:var(--sp-3) var(--sp-2); font-size:calc(14px * var(--font-scale)); color:var(--text-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; font-family:var(--font-body); font-weight:500;
  transition:all var(--dur) var(--ease);
}
.tab:hover{color:var(--text);}
.tab[aria-selected="true"]{color:var(--blue); border-color:var(--blue);}
.tabpanel{animation:fadeIn var(--dur) var(--ease);}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

.prose{font-size:calc(15.5px * var(--font-scale)); line-height:1.75; color:var(--text);}
.prose p{margin-bottom:var(--sp-4);}
.prose h4{font-family:var(--font-body); font-size:calc(12px * var(--font-scale)); letter-spacing:1px; text-transform:uppercase; color:var(--text-faint); margin:var(--sp-6) 0 var(--sp-3); font-weight:600;}
.prose h4:first-child{margin-top:0;}
.prose ul{margin-bottom:var(--sp-4);}
.prose li{position:relative; padding-left:var(--sp-5); margin-bottom:var(--sp-2); font-size:calc(15px * var(--font-scale));}
.prose li::before{content:''; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--blue);}
.mistake-list li::before{background:var(--red); border-radius:1px;}
.tip-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:var(--sp-4) var(--sp-5); margin:var(--sp-5) 0;}
.tip-card h4{margin-top:0;}

/* ---- Practice tab ---- */
.practice-grid{display:grid; gap:var(--sp-4); margin-bottom:var(--sp-5);}
.practice-block{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:var(--sp-5);}
.practice-block-head{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3);}
.practice-icon{width:34px; height:34px; border-radius:var(--radius-sm); background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.practice-icon svg{width:17px; height:17px;}
.practice-block h4{font-family:var(--font-body); font-weight:600; font-size:calc(14.5px * var(--font-scale)); color:var(--text); text-transform:none; letter-spacing:0; margin:0;}
.practice-block p{font-size:calc(14.5px * var(--font-scale)); color:var(--text-muted); line-height:1.65;}

/* ---- Resources tab ---- */
.res-note{font-size:calc(13px * var(--font-scale)); color:var(--text-faint); margin-bottom:var(--sp-5); padding:var(--sp-3) var(--sp-4); background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--border-soft);}
.res-card{
  display:flex; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  margin-bottom:var(--sp-3); transition:border-color var(--dur) var(--ease); align-items:flex-start;
  background:var(--surface); position:relative; z-index:1;
}
.res-card:hover{border-color:var(--border);}
.res-type{
  font-family:var(--font-mono); font-size:calc(10px * var(--font-scale)); letter-spacing:1px; text-transform:uppercase; color:var(--blue);
  border:1px solid var(--blue); border-radius:var(--radius-sm); padding:3px 7px; flex-shrink:0; margin-top:2px;
}
.res-body{flex:1;}
.res-title{font-size:calc(15.5px * var(--font-scale)); font-weight:600; margin-bottom:2px;}
.res-title a{color:var(--text); text-decoration:none;}
.res-title a:hover{color:var(--blue);}
.res-creator{font-size:calc(12.5px * var(--font-scale)); color:var(--text-faint); margin-bottom:var(--sp-2); font-family:var(--font-mono);}
.res-why{font-size:calc(13.5px * var(--font-scale)); color:var(--text-muted); line-height:1.6;}
.res-summary{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:var(--sp-3) var(--sp-4); margin-top:var(--sp-2); font-size:calc(13px * var(--font-scale)); color:var(--text-muted); line-height:1.6;
}
.res-summary-label{
  display:block; font-family:var(--font-mono); font-size:calc(9.5px * var(--font-scale)); letter-spacing:.5px; text-transform:uppercase; color:var(--text-faint); margin-bottom:4px;
}
.res-verified{
  display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:calc(9.5px * var(--font-scale)); letter-spacing:.5px;
  color:var(--red); border:1px solid var(--red); border-radius:3px; padding:2px 6px; margin-top:var(--sp-2);
  transform:rotate(-2deg); text-transform:uppercase;
}
.res-verified svg{width:9px; height:9px;}
.res-badges{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;}
.res-opened{
  display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:calc(9.5px * var(--font-scale)); letter-spacing:.5px;
  color:var(--green); border:1px solid var(--green); border-radius:3px; padding:2px 6px; margin-top:var(--sp-2);
  text-transform:uppercase;
}
.res-opened svg{width:9px; height:9px;}

.video-embed-wrap{
  position:relative; margin-top:var(--sp-4); border-radius:var(--radius-md); overflow:hidden; background:#000;
  aspect-ratio:16/9; width:100%; max-width:480px;
}
.video-embed-wrap img{width:100%; height:100%; object-fit:cover; display:block; opacity:.75;}
.video-embed-wrap iframe{width:100%; height:100%; border:0; display:block;}
.video-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#151318; border:none; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.4); transition:transform var(--dur-fast) var(--ease);
}
.video-play-btn:hover{transform:translate(-50%,-50%) scale(1.08);}
.video-play-btn svg{width:20px; height:20px; margin-left:3px;}

/* ---- Floating video player: draggable, stays open across tabs/pages, has its own notes ---- */
.floating-player{
  position:fixed; z-index:500; width:min(92vw, 340px); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg); overflow:hidden; touch-action:none;
  min-width:280px; max-width:96vw;
}
@media (min-width:900px){
  /* Desktop default: the 340px cap made sense on a phone but was tiny on a wide screen.
     This is still just a default — the resize handle lets you go bigger or smaller. */
  .floating-player{width:min(34vw, 620px);}
}
.fp-resize-handle{
  position:absolute; right:0; bottom:0; width:22px; height:22px; cursor:nwse-resize;
  display:flex; align-items:flex-end; justify-content:flex-end; padding:3px; color:var(--text-faint); touch-action:none;
}
.fp-resize-handle svg{width:12px; height:12px;}
.fp-resize-handle:hover{color:var(--text-muted);}
.floating-player[hidden]{display:none;}
.fp-header{
  display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); background:var(--surface-2);
  border-bottom:1px solid var(--border-soft); cursor:grab; user-select:none;
}
.fp-header:active{cursor:grabbing;}
.fp-drag-dots{flex-shrink:0; color:var(--text-faint); letter-spacing:2px; font-size:calc(12px * var(--font-scale));}
.fp-title{flex:1; font-size:calc(12.5px * var(--font-scale)); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fp-actions{display:flex; gap:var(--sp-1); flex-shrink:0;}
.fp-btn{
  width:24px; height:24px; border-radius:var(--radius-sm); border:1px solid var(--border-soft); background:var(--bg-raised);
  color:var(--text-muted); font-size:calc(14px * var(--font-scale)); line-height:1; display:flex; align-items:center; justify-content:center;
  transition:all var(--dur-fast) var(--ease); cursor:pointer;
}
.fp-btn:hover{color:var(--text); border-color:var(--border);}
.floating-player.minimized .fp-body{display:none;}
.fp-video{position:relative; width:100%; aspect-ratio:16/9; background:#000; flex-shrink:0;}
.fp-video iframe{width:100%; height:100%; border:0; display:block;}
.fp-notes{padding:var(--sp-3); border-top:1px solid var(--border-soft);}
.fp-notes-label{font-size:calc(11px * var(--font-scale)); color:var(--text-faint); margin-bottom:var(--sp-1); text-transform:uppercase; letter-spacing:.03em;}
.fp-notes-textarea{
  width:100%; min-height:80px; resize:vertical; background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-3); color:var(--text); font-family:var(--font-body);
  font-size:calc(13px * var(--font-scale)); line-height:1.6; transition:border-color var(--dur) var(--ease);
}
.fp-notes-textarea:focus{border-color:var(--blue); outline:none;}
.fp-notes-status{font-family:var(--font-mono); font-size:calc(10.5px * var(--font-scale)); color:var(--text-faint); margin-top:var(--sp-1); text-align:right; height:12px;}
@media (max-width:520px){
  .floating-player{width:min(94vw, 320px);}
}

/* ---- Mastery tab ---- */
.checklist{display:flex; flex-direction:column; gap:var(--sp-1);}
.check-item{
  display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md);
  cursor:pointer; transition:background var(--dur-fast) var(--ease); background:none; border:none; width:100%; text-align:left; font-family:inherit;
}
.check-item:hover{background:var(--surface);}
.check-box{
  width:20px; height:20px; border-radius:5px; border:1.5px solid var(--border); flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast) var(--ease);
}
.check-item[aria-checked="true"] .check-box{background:var(--red); border-color:var(--red);}
.check-box svg{width:12px; height:12px; color:var(--bg); opacity:0; transition:opacity var(--dur-fast) var(--ease);}
.check-item[aria-checked="true"] .check-box svg{opacity:1;}
.check-text{font-size:calc(14.5px * var(--font-scale)); color:var(--text); line-height:1.5;}
.check-item[aria-checked="true"] .check-text{color:var(--text-muted); text-decoration:line-through; text-decoration-color:var(--border);}
.mastery-cta{margin-top:var(--sp-6); padding:var(--sp-5); background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--border-soft); text-align:center;}
.mastery-cta p{font-size:calc(13.5px * var(--font-scale)); color:var(--text-muted); margin-bottom:var(--sp-4);}

/* ---- Quiz (Mastery tab) ---- */
.quiz-list{display:flex; flex-direction:column; gap:var(--sp-4); margin-bottom:var(--sp-6);}
.quiz-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:var(--sp-5);}
.quiz-question{font-size:calc(14.5px * var(--font-scale)); font-weight:600; margin-bottom:var(--sp-4); color:var(--text);}
.quiz-progress{font-family:var(--font-mono); font-size:calc(11px * var(--font-scale)); color:var(--text-faint); text-transform:none; letter-spacing:0; font-weight:400; margin-left:var(--sp-2);}
.quiz-options{display:flex; flex-direction:column; gap:var(--sp-2);}
.quiz-option{
  text-align:left; padding:var(--sp-3) var(--sp-4); border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-raised); color:var(--text); font-size:calc(13.5px * var(--font-scale)); font-family:inherit; transition:all var(--dur-fast) var(--ease);
}
.quiz-option:not(:disabled):hover{border-color:var(--blue);}
.quiz-option:disabled{cursor:default;}
.quiz-option.correct{border-color:var(--green); background:color-mix(in srgb, var(--green) 14%, var(--surface)); color:var(--text);}
.quiz-option.incorrect{border-color:var(--red); background:var(--red-soft);}
.quiz-explain{font-size:calc(13px * var(--font-scale)); color:var(--text-muted); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px dashed var(--border-soft);}

/* ---- Notes tab ---- */
.notes-textarea{
  width:100%; min-height:280px; resize:vertical; background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); padding:var(--sp-4); color:var(--text); font-family:var(--font-body); font-size:calc(14.5px * var(--font-scale));
  line-height:1.7; transition:border-color var(--dur) var(--ease);
}
.notes-textarea:focus{border-color:var(--blue); outline:none;}
.notes-status{font-family:var(--font-mono); font-size:calc(11px * var(--font-scale)); color:var(--text-faint); margin-top:var(--sp-2); text-align:right; height:14px;}

/* ---- Achievements ---- */
.achievement-card{cursor:default;}
.achievement-card:hover{transform:none; box-shadow:none; border-color:var(--border-soft);}
.achievement-card.locked{opacity:.5;}
.achievement-card.locked .plate-id{color:var(--text-faint);}
.achievement-card.locked svg{width:18px; height:18px;}
.achievement-card.unlocked{border-color:var(--red);}
.achievement-card.unlocked .plate-id{color:var(--red);}
.achievement-card.unlocked svg{width:18px; height:18px;}

/* ---- Dashboard ---- */
.dash-arc-list{display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-7);}
.dash-arc-row{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:var(--sp-4) var(--sp-5);
  text-align:left; width:100%; font-family:inherit; cursor:pointer; transition:border-color var(--dur) var(--ease);
}
.dash-arc-row:hover{border-color:var(--blue);}
.dash-arc-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-2); font-size:calc(14.5px * var(--font-scale)); font-weight:500;}
.dash-arc-count{font-family:var(--font-mono); font-size:calc(12px * var(--font-scale)); color:var(--text-faint); font-weight:400;}
.dash-stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:var(--sp-4);}
.dash-stat-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:var(--sp-5);}
.dash-stat-label{display:block; font-family:var(--font-mono); font-size:calc(10.5px * var(--font-scale)); letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); font-weight:600; margin-bottom:var(--sp-2);}
.dash-stat-value{display:block; font-family:var(--font-display); font-size:calc(32px * var(--font-scale)); color:var(--text); margin-bottom:var(--sp-1);}
.dash-stat-sub{display:block; font-size:calc(12px * var(--font-scale)); color:var(--text-muted);}

/* ---- Practice Center ---- */
.prompt-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:var(--sp-6); margin-bottom:var(--sp-4); text-align:center;
}
.prompt-category{
  display:inline-block; font-family:var(--font-mono); font-size:calc(10.5px * var(--font-scale)); letter-spacing:1px; text-transform:uppercase;
  color:var(--blue); border:1px solid var(--blue); border-radius:var(--radius-full); padding:3px 10px; margin-bottom:var(--sp-4);
}
.prompt-text{font-family:var(--font-display); font-size:calc(22px * var(--font-scale)); line-height:1.5; max-width:44ch; margin:0 auto;}
.timer-station{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:var(--sp-7);
  text-align:center; max-width:min(420px,100%);
}
.timer-display{font-family:var(--font-mono); font-size:calc(56px * var(--font-scale)); font-weight:600; color:var(--text); margin-bottom:var(--sp-5); letter-spacing:2px;}
.timer-presets{display:flex; justify-content:center; gap:var(--sp-2); margin-bottom:var(--sp-5); flex-wrap:wrap;}
.timer-presets button{
  font-family:var(--font-mono); font-size:calc(12.5px * var(--font-scale)); padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-full);
  border:1px solid var(--border); background:none; color:var(--text-muted);
}
.timer-presets button.active{border-color:var(--blue); color:var(--blue); background:var(--blue-soft);}
.timer-controls{display:flex; justify-content:center; gap:var(--sp-3); flex-wrap:wrap;}

/* ---- Module footer nav ---- */
.module-nav{display:flex; justify-content:space-between; gap:var(--sp-4); margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--border-soft);}
.nav-link-card{
  display:flex; flex-direction:column; gap:4px; padding:var(--sp-4) var(--sp-5); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  max-width:280px; text-decoration:none; color:var(--text); transition:all var(--dur) var(--ease); background:none; text-align:left; font-family:inherit; cursor:pointer;
}
.nav-link-card:hover{border-color:var(--blue);}
.nav-link-card.next{margin-left:auto; text-align:right; align-items:flex-end;}
.nav-link-card span{font-family:var(--font-mono); font-size:calc(10px * var(--font-scale)); letter-spacing:1px; text-transform:uppercase; color:var(--text-faint);}
.nav-link-card span svg{width:14px; height:14px; display:inline; vertical-align:-3px;}
.nav-link-card b{font-size:calc(15px * var(--font-scale)); font-weight:500;}

/* ============================================================
   FOOTER + misc floating UI
   ============================================================ */
.site-footer{border-top:1px solid var(--border-soft); padding:var(--sp-7) var(--sp-7); margin-top:var(--sp-9); font-size:calc(13px * var(--font-scale)); color:var(--text-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-4);}
.site-footer a{color:var(--text-faint);}
.footer-actions{display:flex; gap:var(--sp-4);}
.footer-actions button{background:none; border:none; color:var(--text-faint); font-size:calc(13px * var(--font-scale)); text-decoration:underline; font-family:inherit; padding:0;}
.storage-status{font-family:var(--font-mono); font-size:calc(11px * var(--font-scale)); color:var(--text-faint);}

.scroll-top{
  position:fixed; bottom:var(--sp-6); right:var(--sp-6); width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(8px); transition:all var(--dur) var(--ease); box-shadow:var(--shadow-md); z-index:50;
}
.scroll-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.scroll-top svg{width:18px; height:18px;}

.toast{
  position:fixed; bottom:var(--sp-6); left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface-2);
  border:1px solid var(--border); color:var(--text); padding:var(--sp-3) var(--sp-5); border-radius:var(--radius-full);
  font-size:calc(13.5px * var(--font-scale)); box-shadow:var(--shadow-lg); z-index:200; opacity:0; pointer-events:none; transition:all var(--dur) var(--ease);
  display:flex; align-items:center; gap:var(--sp-2);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast svg{width:15px; height:15px; color:var(--red); flex-shrink:0;}

.recovery-banner{
  position:fixed; top:var(--topbar-h); left:0; right:0; z-index:300;
  background:var(--red); color:#fff; padding:var(--sp-3) var(--sp-5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  font-size:calc(13.5px * var(--font-scale)); box-shadow:var(--shadow-lg);
}
.recovery-banner svg{width:14px; height:14px; display:inline; vertical-align:-2px; margin-right:4px;}
.recovery-banner button{
  background:#fff; color:var(--red); border:none; border-radius:var(--radius-full); padding:var(--sp-2) var(--sp-4);
  font-weight:600; font-size:calc(13px * var(--font-scale)); flex-shrink:0;
}

.font-adjust{display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius-full); overflow:hidden;}
.font-adjust button{background:none; border:none; color:var(--text-muted); width:32px; height:38px; font-family:var(--font-mono); font-size:calc(13px * var(--font-scale));}
.font-adjust button:hover{color:var(--text); background:var(--surface);}
.font-adjust button:first-child{border-right:1px solid var(--border);}

.empty-state{text-align:center; padding:var(--sp-8) var(--sp-4); color:var(--text-muted);}
.empty-state svg{width:40px; height:40px; color:var(--text-faint); margin:0 auto var(--sp-4);}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:900px){
  .menu-btn{display:flex;}
  .app{grid-template-columns:1fr;}
  .sidebar{
    position:fixed; left:0; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); width:min(84vw,320px);
    background:var(--bg-raised); z-index:90; transform:translateX(-105%); transition:transform var(--dur-slow) var(--ease);
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop{position:fixed; inset:0; top:var(--topbar-h); background:rgba(0,0,0,.5); z-index:80; opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease);}
  .sidebar-backdrop.show{opacity:1; pointer-events:auto;}
  .main{padding:var(--sp-5) var(--sp-4) var(--sp-8);}
  .hero h1{max-width:100%;}
  .module-nav{flex-direction:column;}
  .nav-link-card.next{margin-left:0; text-align:left; align-items:flex-start;}
  .nav-link-card{max-width:100%;}
  .xp-pill span.xp-label{display:none;}
}
@media (max-width:520px){
  .topbar{padding:0 var(--sp-3); gap:var(--sp-2);}
  .brand-word{display:none;}
  .stat-strip{gap:var(--sp-4);}
  .meta-row{gap:var(--sp-4);}
}


/* ---- Calendar view ---- */
.cal-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:var(--sp-5); margin-bottom:var(--sp-5);}
.cal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-5);}
.cal-header b{font-family:var(--font-display); font-size:calc(19px * var(--font-scale));}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-family:var(--font-mono); font-size:calc(10px * var(--font-scale)); letter-spacing:.5px; color:var(--text-faint); margin-bottom:var(--sp-3);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); row-gap:var(--sp-2);}
.cal-cell{display:flex; align-items:center; justify-content:center; padding:2px 0;}
.cal-cell-empty{visibility:hidden;}
.cal-day-badge{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:calc(12.5px * var(--font-scale)); color:var(--text-muted); position:relative;
  transition:all var(--dur) var(--ease);
}
.cal-cell.cal-active .cal-day-badge{background:var(--blue); color:var(--bg-raised); font-weight:700;}
.cal-cell.cal-today .cal-day-badge{box-shadow:0 0 0 1.5px var(--blue); color:var(--blue); font-weight:600;}
.cal-cell.cal-active.cal-today .cal-day-badge{color:var(--bg-raised); box-shadow:0 0 0 1.5px var(--blue), 0 0 0 4px var(--blue-soft);}
.cal-legend{display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4); font-size:calc(12px * var(--font-scale)); color:var(--text-faint);}
.cal-legend-dot{width:12px; height:12px; border-radius:50%; background:var(--blue); display:inline-block;}
.cal-reminder-sub{color:var(--text-muted); font-size:calc(14px * var(--font-scale)); margin-bottom:var(--sp-4); max-width:48ch;}
.cal-reminder-row{display:flex; gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap;}
.cal-reminder-row select, .cal-reminder-row input[type="time"]{
  background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:var(--sp-2) var(--sp-3); color:var(--text); font-family:var(--font-body); font-size:calc(14px * var(--font-scale));
}
.cal-reminder-actions{display:flex; gap:var(--sp-3); flex-wrap:wrap;}
@media (max-width:520px){
  .cal-day-badge{width:30px; height:30px; font-size:calc(12px * var(--font-scale));}
  .cal-reminder-actions{flex-direction:column;}
  .cal-reminder-actions .btn{width:100%; justify-content:center;}
}

/* ---- Practice timer: custom duration ---- */
.timer-custom{display:flex; align-items:center; gap:var(--sp-2); justify-content:center; margin-top:var(--sp-4);}
.timer-custom input{
  width:96px; background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:var(--sp-2) var(--sp-3); color:var(--text); font-family:var(--font-body); font-size:calc(14px * var(--font-scale)); text-align:center;
}
.timer-custom span{font-size:calc(13px * var(--font-scale)); color:var(--text-faint);}

/* ---- Achievements: progress hints on locked cards ---- */
.achievement-card.locked.in-progress{opacity:.78; border-color:var(--border);}
.achv-progress{font-family:var(--font-mono); font-size:calc(11px * var(--font-scale)); color:var(--text-faint); margin-top:var(--sp-1);}
.achievement-card.unlocked .achv-progress{color:var(--red); opacity:.8;}


/* ============================================================
   ART BACKDROP — decorative construction-line / sketch motifs.
   One fixed layer behind all content; which motif shows is
   driven entirely by [data-theme], so no JS is needed for it.
   ============================================================ */
.art-backdrop{
  /* Fixed on purpose: this is meant to feel like the background of the whole
     site, present no matter where you've scrolled to \u2014 not a banner that
     scrolls away, and not tiled/repeated (which looks jarring as one copy
     ends and the next begins). One image, always there, everywhere. */
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; background-repeat:no-repeat;
  background-position:-60px -40px, right -80px bottom -100px;
  background-size:420px 420px, 480px 480px;
  transition:opacity var(--dur-slow) var(--ease);
  will-change:transform; transform:translateZ(0); contain:paint;
}
[data-theme="dark"] .art-backdrop{
  opacity:.16;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%236FB2E8' stroke-width='1'%3E%3Ccircle cx='210' cy='210' r='150'/%3E%3Ccircle cx='210' cy='210' r='90'/%3E%3Cline x1='210' y1='10' x2='210' y2='410'/%3E%3Cline x1='10' y1='210' x2='410' y2='210'/%3E%3Cline x1='60' y1='60' x2='360' y2='360'/%3E%3Cline x1='360' y1='60' x2='60' y2='360'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%23E2664A' stroke-width='1'%3E%3Cpath d='M60 420 L280 90 L320 130 L100 460 Z'/%3E%3Cpath d='M280 90 L310 50 L350 90 L320 130 Z'/%3E%3Cpath d='M60 420 L40 460 L80 440 Z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="light"] .art-backdrop{
  opacity:.10;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%231B1812' stroke-width='1'%3E%3Ccircle cx='210' cy='210' r='150'/%3E%3Ccircle cx='210' cy='210' r='90'/%3E%3Cline x1='210' y1='10' x2='210' y2='410'/%3E%3Cline x1='10' y1='210' x2='410' y2='210'/%3E%3Cline x1='60' y1='60' x2='360' y2='360'/%3E%3Cline x1='360' y1='60' x2='60' y2='360'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%23B23F26' stroke-width='1'%3E%3Cpath d='M60 420 L280 90 L320 130 L100 460 Z'/%3E%3Cpath d='M280 90 L310 50 L350 90 L320 130 Z'/%3E%3Cpath d='M60 420 L40 460 L80 440 Z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="sketchbook"] .art-backdrop{
  opacity:.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%238A7A5E' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='150' cy='150' r='95' stroke-dasharray='2 6'/%3E%3Ccircle cx='150' cy='150' r='60'/%3E%3Cpath d='M60 150 A90 90 0 0 1 240 150'/%3E%3Cpath d='M300 260 L360 200 M300 260 L340 320 M360 200 L340 320' /%3E%3Crect x='40' y='300' width='70' height='70' rx='4' transform='rotate(-8 75 335)'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%23A6472E' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M80 420 L300 90 L340 130 L120 460 Z'/%3E%3Cpath d='M300 90 L330 50 L370 90 L340 130 Z'/%3E%3Cpath d='M80 420 L60 460 L100 440 Z'/%3E%3Ccircle cx='390' cy='340' r='38' stroke-dasharray='1 5'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ .art-backdrop{transition:none;} }
@media (max-width:768px){ .art-backdrop{background-size:280px 280px, 320px 320px;} }

/* ---- Theme: Sketchbook (warm cream paper, visible pencil/sketch art) ---- */
[data-theme="sketchbook"]{
  --bg:#F3ECDC; --bg-raised:#FAF5E9; --surface:#FFFCF4; --surface-2:#F0E8D5;
  --border:#DED0AE; --border-soft:#E9E0C9;
  --text:#3A2E1E; --text-muted:#6E6047; --text-faint:#7A6C50;
  --blue:#3D6E8C; --blue-ink:#E3EEF3; --blue-soft:#E3EEF3;
  --red:#A6472E; --red-ink:#F7E5DE; --red-soft:#F7E5DE;
  --green:#4C7A4A;
  --paper-tint: rgba(58,46,30,.04);
}
[data-theme="sketchbook"] .topbar{background:color-mix(in srgb, var(--bg) 80%, transparent);}

/* ============================================================
   THEME PICKER — replaces the single dark/light toggle
   ============================================================ */
.theme-picker{position:relative;}
.theme-picker-menu{
  position:absolute; top:calc(100% + var(--sp-2)); right:0; z-index:200;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); padding:var(--sp-2); min-width:168px;
  display:none; flex-direction:column; gap:2px;
}
.theme-picker-menu.open{display:flex;}
.theme-option{
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm); border:none; background:none; color:var(--text);
  font-family:var(--font-body); font-size:calc(13.5px * var(--font-scale)); text-align:left; width:100%;
}
.theme-option:hover{background:var(--surface-2);}
.theme-option[aria-pressed="true"]{background:var(--blue-soft); color:var(--blue);}
.theme-swatch{width:18px; height:18px; border-radius:var(--radius-full); border:1px solid var(--border); flex-shrink:0;}
.theme-swatch.dark{background:linear-gradient(135deg,#151318 50%,#6FB2E8 50%);}
.theme-swatch.light{background:linear-gradient(135deg,#EEECE6 50%,#2F6CA6 50%);}
.theme-swatch.sketchbook{background:linear-gradient(135deg,#F3ECDC 50%,#A6472E 50%);}

/* ============================================================
   LIBRARY — every resource across all live arcs, browsable
   ============================================================ */
.library-filters{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-5);}
.library-filter-btn{
  padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-full); border:1px solid var(--border);
  background:var(--surface); color:var(--text-muted); font-size:calc(13px * var(--font-scale)); font-family:var(--font-body);
  display:flex; align-items:center; gap:var(--sp-2);
}
.library-filter-btn.active{background:var(--blue-soft); border-color:var(--blue); color:var(--blue);}
.library-search{
  display:flex; align-items:center; gap:var(--sp-2); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-full); padding:var(--sp-2) var(--sp-4); margin-bottom:var(--sp-5); max-width:420px;
}
.library-search input{border:none; background:none; outline:none; color:var(--text); font-size:calc(14px * var(--font-scale)); width:100%; font-family:var(--font-body);}
.library-search svg{width:16px; height:16px; color:var(--text-faint); flex-shrink:0;}
.library-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:var(--sp-4);}
.library-source{
  font-size:calc(11.5px * var(--font-scale)); color:var(--text-faint); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.5px;
  margin-top:var(--sp-2); display:block;
}
.library-empty{padding:var(--sp-8) 0; text-align:center; color:var(--text-faint);}


/* ---- Ask a doubt (Gemini-powered) ---- */
.doubt-fab{
  position:fixed; z-index:400; bottom:var(--sp-6); right:var(--sp-6);
  display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4);
  background:var(--blue); color:var(--bg-raised); border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:calc(13.5px * var(--font-scale)); box-shadow:var(--shadow-md);
  cursor:pointer; transition:all var(--dur) var(--ease); user-select:none;
}
.doubt-fab:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.doubt-fab svg{width:18px; height:18px; flex-shrink:0;}
.doubt-fab[hidden]{display:none;}
.doubt-panel{
  position:fixed; z-index:500; bottom:var(--sp-6); right:var(--sp-6);
  width:min(92vw,360px); max-height:min(70vh,520px); display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.doubt-panel[hidden]{display:none;}
.doubt-backdrop{position:fixed; inset:0; z-index:450; background:rgba(10,9,8,.55);}
.doubt-backdrop[hidden]{display:none;}
.doubt-header{
  display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) var(--sp-4);
  background:var(--surface-2); border-bottom:1px solid var(--border-soft); flex-shrink:0;
}
.doubt-title{font-family:var(--font-display); font-size:calc(17px * var(--font-scale));}
.doubt-messages{flex:1; overflow-y:auto; overflow-x:hidden; padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); font-size:calc(13.5px * var(--font-scale)); line-height:1.5;}
.doubt-msg{max-width:88%; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-md); overflow-wrap:break-word; word-break:break-word;}
.doubt-msg-bot{background:var(--bg-raised); color:var(--text); align-self:flex-start; border:1px solid var(--border-soft);}
.doubt-msg-user{background:var(--blue); color:var(--bg-raised); align-self:flex-end; font-weight:500;}
.doubt-msg-error{background:transparent; color:var(--red); align-self:flex-start; font-size:calc(12.5px * var(--font-scale)); border:1px solid var(--red); opacity:.85;}
.doubt-msg-loading{color:var(--text-faint); align-self:flex-start; font-style:italic; font-size:calc(12.5px * var(--font-scale)); background:none; padding:var(--sp-1) var(--sp-2);}
.doubt-input-row{display:flex; gap:var(--sp-2); padding:var(--sp-3); border-top:1px solid var(--border-soft); flex-shrink:0;}
.doubt-input-row input{
  flex:1; background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:var(--sp-2) var(--sp-3); color:var(--text); font-family:var(--font-body); font-size:calc(13.5px * var(--font-scale));
}
@media (max-width:520px){
  .doubt-fab span{display:none;}
  .doubt-fab{padding:var(--sp-3); border-radius:50%;}
  .doubt-panel{left:var(--sp-3); right:var(--sp-3); width:auto;}
}


/* ---- Ask a doubt: engine chooser ---- */
.doubt-chooser{display:flex; flex-direction:column; gap:var(--sp-2); align-self:stretch;}
.doubt-chooser p{font-size:calc(12.5px * var(--font-scale)); color:var(--text-faint); margin-bottom:var(--sp-1);}
.doubt-chooser .btn{width:100%; justify-content:flex-start; text-align:left; white-space:normal; line-height:1.4; font-size:calc(12.5px * var(--font-scale)); padding:var(--sp-3);}


/* ---- Custom theme (user-supplied background image URL) ---- */
[data-theme="custom"]{
  --bg:#EDECE8; --bg-raised:#F5F4F0; --surface:#FCFBF8; --surface-2:#EFEEE9;
  --border:#D8D5CC; --border-soft:#E5E2D9;
  --text:#22201B; --text-muted:#5C584D; --text-faint:#726D5E;
  --blue:#2F6CA6; --blue-ink:#E3EEF5; --blue-soft:#E3EEF5;
  --red:#B23F26; --red-ink:#F7E5DE; --red-soft:#F7E5DE;
}
[data-theme="custom"] .art-backdrop{
  opacity:1; background-image:var(--custom-bg-image, none); background-size:cover;
  background-position:center;
  /* The photo itself is shown at full strength — readability now comes from
     detecting whether the photo is bright or dark (see applyCustomThemeColors in
     app.js) and switching to a matching light/dark text-and-surface scheme, plus
     a moderate scrim below, rather than just fading the photo into invisibility. */
}
[data-theme="custom"] .art-backdrop::after{
  content:''; position:absolute; inset:0;
  background:var(--custom-scrim-gradient, var(--custom-scrim-color, var(--bg))); opacity:1;
}
[data-theme="custom"] .hero, [data-theme="custom"] .stat-strip, [data-theme="custom"] .meta-row,
[data-theme="custom"] .mcard, [data-theme="custom"] .quote-card, [data-theme="custom"] .quiz-card,
[data-theme="custom"] .res-card, [data-theme="custom"] .tip-card, [data-theme="custom"] .prompt-card,
[data-theme="custom"] .nav-link-card, [data-theme="custom"] .cal-card, [data-theme="custom"] .dash-stat-card{
  background:var(--surface); border-radius:var(--radius-lg);
  border:1px solid var(--border-soft); backdrop-filter:blur(6px);
}
.theme-swatch.custom{background:repeating-linear-gradient(45deg, var(--border), var(--border) 3px, var(--surface) 3px, var(--surface) 6px);}
.theme-custom-row{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); margin-top:2px;}
.theme-custom-row[hidden]{display:none;}
.theme-custom-url-row{display:flex; gap:var(--sp-2);}
.theme-custom-row input{
  flex:1; min-width:0; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2);
  color:var(--text); font-size:calc(12.5px * var(--font-scale)); padding:var(--sp-2); font-family:var(--font-body);
}
.theme-custom-row button{
  padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm); border:1px solid var(--blue);
  background:var(--blue-soft); color:var(--blue); font-size:calc(12.5px * var(--font-scale)); font-weight:600; white-space:nowrap;
}
.theme-custom-upload{
  display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-2); border-radius:var(--radius-sm);
  border:1px dashed var(--border); color:var(--text-muted); font-size:calc(12px * var(--font-scale)); cursor:pointer;
  background:none; text-align:left;
}
.theme-custom-upload:hover{background:var(--surface-2); color:var(--text);}
.theme-custom-upload svg{width:16px; height:16px; flex-shrink:0;}
.theme-custom-status{font-size:calc(11px * var(--font-scale)); color:var(--text-faint); padding:0 var(--sp-2);}


/* ============================================================
   THEMES PAGE
   ============================================================ */
.theme-preset-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-6);}
.theme-preset-card{
  position:relative; text-align:left; padding:var(--sp-4); border-radius:var(--radius-lg);
  border:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; gap:var(--sp-2);
}
.theme-preset-card.active{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset;}
.theme-preset-swatch{width:100%; height:56px; border-radius:var(--radius-md); display:block;}
.theme-preset-swatch.dark{background:linear-gradient(135deg,#151318,#1f1c22);}
.theme-preset-swatch.light{background:linear-gradient(135deg,#EEECE6,#F7F6F2);}
.theme-preset-swatch.sketchbook{background:linear-gradient(135deg,#F3ECDC,#E9DFC4);}
.theme-preset-name{font-weight:600; font-size:calc(14px * var(--font-scale)); color:var(--text);}
.theme-preset-desc{font-size:calc(12px * var(--font-scale)); color:var(--text-muted);}
.theme-preset-check{position:absolute; top:var(--sp-3); right:var(--sp-3); color:var(--blue); display:flex;}
.theme-preset-check svg{width:16px; height:16px;}

.theme-custom-panel{
  display:grid; grid-template-columns:220px 1fr; gap:var(--sp-5); margin-bottom:var(--sp-6);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-4);
}
@media (max-width:640px){ .theme-custom-panel{grid-template-columns:1fr;} }
.theme-custom-preview{
  width:100%; min-height:160px; border-radius:var(--radius-md); background-size:cover; background-position:center;
  background-color:var(--surface-2); position:relative; display:flex; align-items:flex-end; justify-content:flex-start;
}
.theme-custom-preview-empty{align-items:center; justify-content:center; color:var(--text-faint); font-size:calc(12.5px * var(--font-scale));}
.theme-custom-active-badge{
  position:static; margin:var(--sp-2); background:var(--blue); color:#fff; padding:var(--sp-1) var(--sp-2);
  border-radius:var(--radius-full); font-size:calc(11px * var(--font-scale)); display:inline-flex; align-items:center; gap:4px;
}
.theme-custom-active-badge svg{width:12px; height:12px;}
.theme-custom-controls{display:flex; flex-direction:column; gap:var(--sp-3); justify-content:center;}
.theme-url-row{margin:0; max-width:none;}
.theme-url-row .btn-sm{padding:var(--sp-2) var(--sp-3); font-size:calc(12.5px * var(--font-scale)); border-radius:var(--radius-sm); border:1px solid var(--blue); background:var(--blue-soft); color:var(--blue); font-weight:600; white-space:nowrap;}
.theme-opacity-row{display:flex; align-items:center; gap:var(--sp-3);}
.theme-opacity-row label{font-size:calc(12.5px * var(--font-scale)); color:var(--text-muted); white-space:nowrap;}
.theme-opacity-row input[type="range"]{flex:1;}
.theme-opacity-value{font-family:var(--font-mono); font-size:calc(12px * var(--font-scale)); color:var(--text-muted); min-width:36px; text-align:right;}
.theme-opacity-hint{font-size:calc(11.5px * var(--font-scale)); color:var(--text-faint); margin:0;}

.theme-history-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-6);}
.theme-history-item{position:relative;}
.theme-history-thumb{
  width:100%; aspect-ratio:1; border-radius:var(--radius-md); background-size:cover; background-position:center;
  border:1px solid var(--border); display:block;
}
.theme-history-remove{
  position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center;
}


/* ---- Collapsed "coming soon" roadmap (kept out of the way of live content by default) ---- */
.soon-arcs-details{margin-top:var(--sp-4);}
.soon-arcs-details summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md); border:1px dashed var(--border);
  color:var(--text-muted); font-size:calc(13px * var(--font-scale)); font-family:var(--font-mono);
}
.soon-arcs-details summary::-webkit-details-marker{display:none;}
.soon-arcs-details summary::before{content:'\25B8'; transition:transform var(--dur) var(--ease);}
.soon-arcs-details[open] summary::before{transform:rotate(90deg);}
.soon-arcs-details summary:hover{background:var(--surface); color:var(--text);}
.soon-pathmap{margin-top:var(--sp-3);}