/* SAT Vocab PWA — "playful" theme. Bright, chunky, gamified.
   Same class names as before; pure visual reskin. */

:root{
  --bg:#f7f7f7;
  --card:#ffffff;
  --card-soft:#fbfbfb;
  --ink:#3c3c3c;
  --ink-soft:#5c5c5c;
  --muted:#777777;
  --faint:#afafaf;
  --line:#e5e5e5;
  --green:#58cc02; --green-d:#58a700; --green-bg:#d7ffb8;
  --blue:#1cb0f6;  --blue-d:#1899d6;  --blue-bg:#ddf4ff;
  --purple:#ce82ff;--purple-d:#a568cc;--purple-bg:#f1e0ff;
  --yellow:#ffc800;--yellow-d:#d9a400;--yellow-bg:#fff3c4;
  --orange:#ff9600;--orange-d:#e08600;
  --red:#ff4b4b;   --red-d:#d33131;   --red-bg:#ffdfe0;
  --radius:16px;
  --radius-sm:12px;
  --font:"Nunito",ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,
         "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  margin:0;padding:0;line-height:1.5;font-weight:600;
  background-image:radial-gradient(1000px 420px at 50% -160px,#e9f9d3 0%,rgba(233,249,211,0) 62%);
}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 84px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));}
.hide{display:none!important}

/* ---------- hero ---------- */
.hero{display:flex;align-items:center;gap:14px;margin:8px 0 4px}
.appicon{width:60px;height:60px;border-radius:18px;flex:none;
  border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.herotxt{flex:1;min-width:0}
.hero h1{margin:0}
.streakpill{flex:none;display:flex;align-items:center;gap:6px;background:var(--card);
  border:2px solid var(--line);border-radius:999px;padding:8px 14px;
  font-weight:800;font-size:15px;color:var(--orange-d);box-shadow:0 3px 0 var(--line)}
.streakpill .flame{font-size:18px;line-height:1}

/* ---------- type ---------- */
h1{font-size:31px;line-height:1.15;margin:2px 0 6px;font-weight:800;letter-spacing:-.01em}
h2{font-size:20px;margin:4px 0 6px;font-weight:800;letter-spacing:-.01em}
.kicker{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-d);margin:0 0 2px}
.sub{color:var(--muted);font-size:14px;margin:0 0 16px;max-width:60ch;font-weight:600}
.note{color:var(--muted);font-size:12.5px;margin:18px 2px 0}
.progtxt{color:var(--muted);font-size:13px}
.codewrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;background:var(--card-soft);border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.codebig{font-size:23px;font-weight:800;letter-spacing:.01em;color:var(--ink);flex:1 1 170px;min-width:0;overflow-wrap:anywhere}
.codewrap .btn{min-height:44px;padding:8px 14px}
#syncStatus{margin-top:8px}
.syncsep{border-top:2px solid var(--line);margin:14px 0 10px}
.btn.qbtn{min-height:42px;padding:8px 13px;font-size:12px;background:var(--card-soft);box-shadow:0 3px 0 var(--line)}
.bar-protect .rowline input[type=text]{flex:1 1 160px;width:auto;min-width:0}
.lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:16px 0 4px}
.lbl:first-child{margin-top:2px}
.ipa{color:var(--muted);font-weight:600}
.ex{border-left:5px solid var(--blue);background:var(--blue-bg);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:10px 13px;margin-top:6px;
  font-size:14.5px;color:var(--ink)}
.sent{font-size:15px}
.count{font-size:13px;color:var(--muted);margin:2px 0 8px;font-weight:700}
.cheer{font-size:19px;font-weight:800;color:var(--purple-d);text-align:center;margin:2px 0 8px}

/* ---------- top bar / rows ---------- */
.topbar{display:flex;align-items:center;gap:10px;margin:2px 0 14px}
.topbar h2{margin:0}
.grow{flex:1;min-width:0}
.frow{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.rowline{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;align-items:center}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 4px}
.pinfo{font-size:13px;color:var(--muted);font-weight:700}

/* ---------- chunky 3D buttons ---------- */
.btn{
  appearance:none;font:inherit;cursor:pointer;
  font-weight:800;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);background:var(--card);
  border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 18px;min-height:50px;
  box-shadow:0 4px 0 var(--line);
  transition:transform .05s ease,box-shadow .05s ease,filter .15s ease;
}
.btn:hover{filter:brightness(.985)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--line)}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;
  background:#f0f0f0;color:var(--faint);border-color:var(--line)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff;
  box-shadow:0 4px 0 var(--green-d)}
.btn.primary:active{box-shadow:none}
.btn.big{font-size:15px;padding:14px 18px;flex:1;min-width:150px;border-radius:14px}
.btn.warn{background:var(--yellow);border-color:var(--yellow);color:#fff;
  box-shadow:0 4px 0 var(--yellow-d)}
.btn.warn:active{box-shadow:none}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 4px 0 var(--red-d)}
.btn.danger:active{box-shadow:none}
.btn[data-arm]{border-color:var(--red);color:var(--red);background:var(--red-bg);
  box-shadow:0 4px 0 var(--red-d)}

/* ---------- chips ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{
  appearance:none;font:inherit;cursor:pointer;
  border:2px solid var(--line);background:var(--card);color:var(--muted);
  font-size:13.5px;font-weight:800;border-radius:999px;
  padding:8px 15px;min-height:42px;box-shadow:0 3px 0 var(--line);
  transition:transform .05s ease,box-shadow .05s ease;
}
.chip:active{transform:translateY(3px);box-shadow:none}
.chip.on{background:var(--blue-bg);border-color:var(--blue);color:var(--blue-d);
  box-shadow:0 3px 0 var(--blue)}

/* ---------- section cards ---------- */
.bar{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  padding:16px;margin:0 0 14px;box-shadow:0 4px 0 var(--line)}
.bar>label{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
input[type=text],.typein{
  font:inherit;font-weight:700;font-size:16px;color:var(--ink);
  width:100%;border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;background:var(--card-soft);outline:none;
}
input[type=text]:focus,.typein:focus{border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px var(--blue-bg)}

/* ---------- tier cards ---------- */
#tierList{display:grid;gap:14px;margin-top:6px}
.tiercard{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:0 4px 0 var(--line);cursor:pointer;
  transition:transform .07s ease,box-shadow .07s ease}
.tiercard:hover{transform:translateY(-2px)}
.tiercard:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.tiercard.locked{background:var(--card-soft)}
.gname{font-size:19px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gsub{color:var(--muted);font-size:13.5px;margin-top:3px}
.gcount{margin-top:10px;font-size:13px;font-weight:800;color:var(--green-d)}
.rec,.pro{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  border-radius:999px;padding:4px 10px}
.rec{background:var(--green-bg);color:var(--green-d);border:2px solid var(--green)}
.pro{background:var(--purple);color:#fff;border:2px solid var(--purple-d)}
.pro.mini{font-size:9.5px;padding:3px 8px;margin-left:6px;vertical-align:2px}

/* ---------- theme cards ---------- */
#themeList{display:grid;gap:12px;margin-top:4px}
.themecard{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;box-shadow:0 4px 0 var(--line);cursor:pointer;
  display:flex;align-items:center;gap:12px;
  transition:transform .07s ease,box-shadow .07s ease}
.themecard:hover{transform:translateY(-2px)}
.themecard:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.themecard::after{content:"›";font-size:24px;color:var(--faint);font-weight:800}
.themecard>div:first-child{flex:1;min-width:0}
.tname{font-size:16.5px;font-weight:800}
.tblurb{color:var(--muted);font-size:13px;margin-top:2px}
.tcount{font-size:13px;font-weight:800;color:var(--ink-soft);white-space:nowrap}
.tprog{font-size:12.5px;color:var(--green-d);font-weight:800;margin-top:2px;white-space:nowrap}
.phrasecard{background:var(--yellow-bg);border-color:var(--yellow)}

/* ---------- word rows ---------- */
.word{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  margin:0 0 12px;overflow:hidden;transition:border-color .15s ease}
.whead{padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.whead.notoggle{cursor:default}
.w{font-size:22px;font-weight:800;letter-spacing:-.01em}
.word.open{border-color:var(--blue)}
.word.open .whead{background:var(--card-soft)}
.wbody{display:none;padding:2px 16px 16px;border-top:2px dashed var(--line)}
.word.open .wbody{display:block}
.tag{font-size:11px;font-weight:800;color:var(--muted);background:var(--bg);
  border:2px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.tag.tested{color:#7a5c00;background:var(--yellow-bg);border-color:var(--yellow)}
.ck{color:var(--green-d);font-weight:800;font-size:16px}
.wx{color:var(--red);font-weight:800}
button.x{
  appearance:none;border:2px solid var(--red);background:var(--red-bg);color:var(--red);
  width:32px;height:32px;border-radius:50%;font-size:17px;font-weight:800;line-height:1;
  cursor:pointer;margin-left:auto;box-shadow:0 3px 0 var(--red-d)}
button.x:active{transform:translateY(3px);box-shadow:none}
.hmain{flex:1;min-width:0}
.hpassage{margin-top:10px;background:var(--card-soft);border:2px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px}

/* ---------- phrases / choices ---------- */
.hchoices{margin-top:10px;display:grid;gap:8px}
.chrow{display:flex;align-items:center;gap:10px;background:var(--card-soft);
  border:2px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;
  cursor:pointer;font-size:14.5px;font-weight:700;box-shadow:0 3px 0 var(--line);
  transition:transform .05s ease,box-shadow .05s ease}
.chrow:active{transform:translateY(3px);box-shadow:none}
.chrow .chletter{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;
  border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;color:var(--muted)}
.chrow.correct{background:var(--green-bg);border-color:var(--green)}
.chrow.correct .chletter{background:var(--green);border-color:var(--green-d);color:#fff}
.chrow.wrong{background:var(--red-bg);border-color:var(--red)}
.chrow.wrong .chletter{background:var(--red);border-color:var(--red-d);color:#fff}
.chrow.dim{opacity:.5}
.ansreveal{margin-top:10px;background:var(--green-bg);border:2px solid var(--green);
  border-radius:var(--radius-sm);padding:10px 12px;font-weight:700}
.word.answered{border-color:var(--green)}
.showAnsBtn{margin-top:10px}

/* ---------- flashcards ---------- */
.card{background:#fff;border:2px solid var(--line);border-radius:20px;
  box-shadow:0 6px 0 var(--line);
  min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:36px 26px 52px;cursor:pointer;user-select:none;-webkit-user-select:none;
  position:relative;transition:transform .06s ease}
.card:active{transform:scale(.99)}
.card::after{content:"TAP TO FLIP";position:absolute;bottom:18px;left:0;right:0;
  font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--faint)}
.prompt{font-size:40px;font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.answer{font-size:15.5px;text-align:left;width:100%;max-width:52ch;font-weight:600}
.knowlink{
  appearance:none;background:none;border:none;cursor:pointer;
  font:inherit;font-size:14px;font-weight:800;color:var(--blue-d);
  padding:12px 8px;min-height:44px}
.knowlink.off{color:var(--faint);font-weight:700}
.knowlink.reveal{color:var(--faint)}

/* ---------- progress ---------- */
.progtrack{background:var(--line);border-radius:999px;height:12px;overflow:hidden;margin-top:8px}
.progfill{background:linear-gradient(90deg,var(--green),#7ac70c);height:100%;width:0;
  border-radius:999px;transition:width .3s ease}

/* ---------- list drill / test ---------- */
.typerow{display:flex;gap:8px;margin-top:6px}
.typerow .typein{flex:1;min-width:0}
.typerow .btn{white-space:nowrap;align-self:center}
.typedshow{background:var(--card-soft);border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;margin:8px 0;font-size:14px;font-weight:600}
.tfb{border-radius:var(--radius-sm);padding:10px 13px;margin-top:10px;font-size:14.5px;font-weight:800}
.tfb.ok{background:var(--green-bg);border:2px solid var(--green);color:var(--green-d)}
.tfb.bad{background:var(--red-bg);border:2px solid var(--red);color:var(--red-d)}
.drillans{font-weight:600;margin-top:6px;color:var(--ink)}
.optbtn{
  display:block;width:100%;text-align:left;appearance:none;cursor:pointer;
  font:inherit;font-size:15px;font-weight:700;background:var(--card);color:var(--ink);
  border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 15px;margin:0 0 10px;box-shadow:0 3px 0 var(--line);
  transition:transform .05s ease,box-shadow .05s ease}
.optbtn:active{transform:translateY(3px);box-shadow:none}
.optbtn.correct{background:var(--green-bg);border-color:var(--green);box-shadow:0 3px 0 var(--green)}
.optbtn.wrong{background:var(--red-bg);border-color:var(--red);box-shadow:0 3px 0 var(--red)}
.optbtn.dim{opacity:.55}
.qprompt{font-size:17px;font-weight:800;margin:4px 0 12px}
.qdef{font-size:19px;font-weight:700;background:var(--blue-bg);
  border:2px solid var(--blue);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:14px}
.missrow{background:var(--card);border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 13px;margin-bottom:8px;font-size:14px}
.scorebig{font-size:52px;font-weight:800;text-align:center;margin:10px 0 2px;
  letter-spacing:-.02em;color:var(--ink)}
.empty{background:var(--card);border:2px dashed var(--line);border-radius:var(--radius);
  padding:26px;text-align:center;color:var(--muted);font-size:14.5px;font-weight:700}
.hit{background:var(--yellow-bg);border-radius:4px;padding:0 3px;font-weight:800}

/* ---------- loading ---------- */
#pwaLoading{position:fixed;inset:0;background:var(--bg);z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
.spinner{width:46px;height:46px;border-radius:50%;
  border:5px solid var(--line);border-top-color:var(--green);animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loaderror{max-width:34ch;color:var(--ink-soft);font-size:14.5px}

/* ---------- pro modal ---------- */
#proModal{position:fixed;inset:0;z-index:60;background:rgba(60,60,60,.5);
  display:flex;align-items:center;justify-content:center;padding:22px}
.pro-card{background:var(--card);border:2px solid var(--line);border-radius:20px;
  box-shadow:0 8px 0 rgba(60,60,60,.18);
  max-width:420px;width:100%;padding:26px;position:relative;overflow:hidden}
.pro-card::before{content:"";display:block;height:8px;margin:-26px -26px 18px;
  background:linear-gradient(90deg,var(--purple),var(--blue),var(--green))}
.pro-card h2{font-size:24px;margin:0 0 8px;font-weight:800}
.pro-card p{color:var(--ink-soft);font-size:14.5px;margin:0 0 14px}
.pro-card ul{margin:0 0 18px;padding:0;list-style:none;font-size:14.5px;font-weight:700}
.pro-card li{padding:6px 0 6px 30px;position:relative}
.pro-card li::before{content:"✓";position:absolute;left:2px;color:var(--green-d);font-weight:800;
  background:var(--green-bg);border-radius:50%;width:22px;height:22px;display:flex;
  align-items:center;justify-content:center;font-size:13px}
.pro-price{font-size:32px;font-weight:800;margin:0 0 2px;color:var(--ink)}
.pro-price span{font-size:14px;color:var(--muted);font-weight:700}
#proClose{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  border:2px solid var(--line);background:var(--card);font-size:17px;font-weight:800;
  cursor:pointer;color:var(--muted);z-index:1}

/* ---------- footer ---------- */
.appfoot{margin:34px 2px 0;padding-top:14px;border-top:2px solid var(--line);
  color:var(--muted);font-size:12px;font-weight:700;display:flex;
  justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ---------- focus ---------- */
:focus-visible{outline:3px solid var(--blue-bg);outline-offset:2px}

/* ---------- print ---------- */
#printArea{display:none}
@media print{
  .wrap,#pwaLoading,#proModal{display:none!important}
  #printArea{display:block;font-size:10px;color:#000}
  #printArea table{width:100%;border-collapse:collapse}
  #printArea th,#printArea td{border:1px solid #999;padding:3px 5px;text-align:left;vertical-align:top}
  #printArea h2{font-size:16px;margin:0 0 4px}
}

@media (min-width:640px){
  h1{font-size:36px}
  .prompt{font-size:46px}
}

/* ================= vibrant reskin (2026-10-01) =================
   Tier identity colors: Core=green, Scholar=blue, Apex=purple. */

/* page background: soft multi-color wash */
body{
  background-image:
    radial-gradient(1000px 420px at 50% -160px,#e9f9d3 0%,rgba(233,249,211,0) 62%),
    radial-gradient(620px 420px at 105% 12%,rgba(28,176,246,.10) 0%,rgba(28,176,246,0) 60%),
    radial-gradient(620px 420px at -5% 32%,rgba(206,130,255,.10) 0%,rgba(206,130,255,0) 60%);
}

/* ---------- hero: gradient banner ---------- */
.hero{
  background:linear-gradient(135deg,#58cc02 0%,#1cb0f6 58%,#9b6bff 100%);
  border:none;border-radius:20px;padding:16px 18px;margin:4px 0 18px;
  box-shadow:0 4px 0 rgba(43,74,18,.20);
}
.hero .kicker{color:rgba(255,255,255,.92)}
.hero h1{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.10)}
.hero .appicon{border-color:rgba(255,255,255,.65);box-shadow:0 4px 0 rgba(0,0,0,.14)}
.streakpill{border-color:rgba(255,255,255,.7);box-shadow:0 3px 0 rgba(0,0,0,.14)}

/* ---------- tier cards: full gradients ---------- */
.tiercard{border:none;color:#fff;overflow:hidden;position:relative}
.tiercard::after{content:"";position:absolute;right:-34px;top:-34px;width:130px;height:130px;
  border-radius:50%;background:rgba(255,255,255,.14)}
.tier-core{background:linear-gradient(135deg,#6ede1e 0%,#3da900 100%);box-shadow:0 4px 0 #2c7a00}
.tier-scholar{background:linear-gradient(135deg,#2bbcf7 0%,#0a8fd6 100%);box-shadow:0 4px 0 #0873ad}
.tier-apex{background:linear-gradient(135deg,#d18fff 0%,#9b4fd4 100%);box-shadow:0 4px 0 #7a38ad}
.tiercard .gname{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.12)}
.tier-core .gname::before{content:"🌱"}
.tier-scholar .gname::before{content:"📚"}
.tier-apex .gname::before{content:"🏔️"}
.tiercard .gsub{color:rgba(255,255,255,.93)}
.tiercard .gcount{color:#fff}
.tiercard .rec{background:rgba(255,255,255,.95);border:none;color:#2c7a00}
.tiercard:hover{transform:translateY(-2px);filter:brightness(1.03)}
.tiercard:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.18)}

/* ---------- theme cards: 6 rotating pastel colorways ---------- */
.themecard{border-left-width:7px}
.tcolor-0{background:#f0fbe4;border-left-color:#58cc02}
.tcolor-0 .tname{color:#3d9900}
.tcolor-1{background:#e8f6ff;border-left-color:#1cb0f6}
.tcolor-1 .tname{color:#0b8fd6}
.tcolor-2{background:#f5ebff;border-left-color:#ce82ff}
.tcolor-2 .tname{color:#9b4fd4}
.tcolor-3{background:#fff7dc;border-left-color:#ffc800}
.tcolor-3 .tname{color:#a88400}
.tcolor-4{background:#ffefe0;border-left-color:#ff9600}
.tcolor-4 .tname{color:#cf7600}
.tcolor-5{background:#ffe9ec;border-left-color:#ff6b81}
.tcolor-5 .tname{color:#d33131}
.phrasecard{background:#fff3c4;border-left:7px solid #ffc800}

/* ---------- tier accents across study views ---------- */
body[data-tier="core"] .word{border-left:6px solid #58cc02}
body[data-tier="scholar"] .word{border-left:6px solid #1cb0f6}
body[data-tier="apex"] .word{border-left:6px solid #ce82ff}
.word.open .whead{background:rgba(255,255,255,.55)}
body[data-tier="core"] .card{border-top:8px solid #58cc02}
body[data-tier="scholar"] .card{border-top:8px solid #1cb0f6}
body[data-tier="apex"] .card{border-top:8px solid #ce82ff}
body[data-tier="core"] #tierLabel{color:#3d9900}
body[data-tier="scholar"] #tierLabel{color:#0b8fd6}
body[data-tier="apex"] #tierLabel{color:#9b4fd4}
body[data-tier="scholar"] .progfill{background:linear-gradient(90deg,#1cb0f6,#0b8fd6)}
body[data-tier="apex"] .progfill{background:linear-gradient(90deg,#ce82ff,#9b4fd4)}

/* ---------- flashcard color picker ---------- */
#colorPanel{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin:0 0 12px;box-shadow:0 4px 0 var(--line)}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.swatch{appearance:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);
  cursor:pointer;box-shadow:0 3px 0 var(--line);padding:0;transition:transform .05s ease}
.swatch:active{transform:scale(.92)}
.swatch.on{outline:3px solid var(--blue);outline-offset:2px}
.card.custom .prompt{color:inherit}
.card.custom .answer{color:inherit}
.card.custom .progtxt{color:inherit;opacity:.72}
.card.custom .ipa{color:inherit;opacity:.72}
.card.custom .lbl{color:inherit;opacity:.6}
.card.custom::after{color:inherit;opacity:.45}

/* ---------- extra pops ---------- */
.btn.primary{background:linear-gradient(180deg,#6ede1e,#58cc02)}
.scorebig{background:linear-gradient(135deg,#58cc02,#1cb0f6,#9b4fd4);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bar{border-top:5px solid var(--green)}
.bar-search{background:#e8f6ff;border-top-color:#1cb0f6}
.bar-search>label{color:#0b8fd6}
.bar-mylist{background:#f0fbe4;border-top-color:#58cc02}
.bar-mylist>label{color:#3d9900}
.bar-protect{background:#f5ebff;border-top-color:#ce82ff}
.bar-protect>label{color:#9b4fd4}
.bar-batch{background:#eefbfb;border-top-color:#12b5a5}
.bar-batch>label{color:#0a8a7d}
.bar-show{background:#ffefe0;border-top-color:#ff9600}
.bar-show>label{color:#cf7600}
.bar-format{background:#e8f6ff;border-top-color:#1cb0f6}
.bar-format>label{color:#0b8fd6}
.bar-questions{background:#f5ebff;border-top-color:#ce82ff}
.bar-questions>label{color:#9b4fd4}
.bar-resume{background:#fff7dc;border-top-color:#ffc800}
.bar-resume>label{color:#a88400}
.kicker{color:var(--green-d)}


/* word cards: pastel background by part of speech */
.word.pos-n{background:#e8f6ff}
.word.pos-n .w{color:#0b8fd6}
.word.pos-v{background:#f0fbe4}
.word.pos-v .w{color:#3d9900}
.word.pos-adj{background:#ffefe0}
.word.pos-adj .w{color:#cf7600}
.word.pos-adv{background:#f5ebff}
.word.pos-adv .w{color:#9b4fd4}
/* ---------- flashcard one-screen fit (2026-10-21) ----------
   While the flashcard view is open, the view locks to the viewport
   height: the card takes the space left by the (compact) chrome, and
   fit1-fit3 classes shrink the card content until nothing scrolls. */
body.flashfit .wrap{height:100vh;height:100dvh;height:var(--app-h,100dvh);display:flex;flex-direction:column;padding-bottom:14px}
body.flashfit .appfoot{display:none}
body.flashfit #vFlash{flex:1;min-height:0;display:flex;flex-direction:column}
body.flashfit #flashZone{flex:1;min-height:0;display:flex;flex-direction:column}
body.flashfit .card{flex:1;min-height:0;overflow:hidden}
.card.fit1{padding:26px 22px 44px}
.card.fit1 .prompt{font-size:33px}
.card.fit1 .answer{font-size:14.5px}
.card.fit2{padding:20px 18px 36px}
.card.fit2 .prompt{font-size:27px}
.card.fit2 .answer{font-size:13.5px}
.card.fit2 .ex{font-size:13.5px;padding:8px 11px}
.card.fit3{padding:14px 14px 30px}
.card.fit3 .prompt{font-size:22px}
.card.fit3 .answer{font-size:12.5px}
.card.fit3 .ex{font-size:12.5px;padding:7px 10px}
.card.fit3 .lbl{margin:10px 0 3px}
@media (max-height:540px){
  body.flashfit .wrap{padding-top:10px}
  body.flashfit #vFlash .topbar{margin-bottom:6px}
  body.flashfit #vFlash .topbar h2{font-size:17px}
  body.flashfit #vFlash .chip{min-height:36px;padding:5px 12px}
  body.flashfit #vFlash .count{margin:0 0 4px;font-size:12px}
  body.flashfit #vFlash .progtrack{height:8px}
  body.flashfit #flashTxt{display:none}
  body.flashfit #flashZone{margin-top:6px!important}
  body.flashfit #vFlash .frow{margin-top:8px}
  body.flashfit #vFlash .frow .btn{min-height:42px;padding:8px 13px}
  body.flashfit .knowlink{padding:6px 8px;min-height:36px}
  body.flashfit .card::after{bottom:10px}
}
/* Card text scales with the CARD's own box (container units), not the
   viewport: one fluid rule covers phone, tablet, desktop and split-screen.
   #flashZone is the size container; its height comes from the flex layout,
   never from its content. The fit1-fit6 stages keep higher specificity, so
   they still win whenever a card would overflow. Fallback sizes for engines
   without container units come first. */
body.flashfit #flashZone{container-type:size}
.card .prompt{font-size:clamp(30px,5.2vw + 14px,46px);font-size:clamp(28px,min(9.5cqi,11cqb),76px);letter-spacing:-0.02em}
.card .meta{font-size:13.5px;font-size:clamp(13px,min(2.8cqi,3.2cqb),22px)}
.card .answer{font-size:15.5px;font-size:clamp(16px,min(4cqi,4.5cqb),32px)}
.card .ex{font-size:14.5px;font-size:clamp(14px,min(3.2cqi,3.6cqb),25px)}
.card .ipa{font-size:12.5px;font-size:clamp(12px,min(2.6cqi,3cqb),20px)}
.card .lbl{font-size:11px;font-size:clamp(10.5px,min(2.2cqi,2.6cqb),15px)}
@container (min-width:600px){
  .card .answer{max-width:38ch}
  .card .ex{max-width:42ch}
}
/* wide cards (tablets and up): scale the text up harder - the word should
   fill the card, not float in it. Height still guards via the cqb term,
   and the fit stages override whenever anything would overflow. */
@container (min-width:560px){
  .card .prompt{font-size:clamp(40px,min(13.5cqi,15cqb),120px)}
  .card .meta{font-size:clamp(14px,min(3.2cqi,3.8cqb),23px)}
  .card .answer{font-size:clamp(18px,min(4.3cqi,5cqb),34px)}
  .card .ex{font-size:clamp(15px,min(3.5cqi,4.2cqb),26px)}
}
/* short/narrow screens (phones): Gemini-consulted layout (Oct 21) - the
   color panel stays IN FLOW but compresses to three single rows (label
   beside its swatches, 30px swatches, one button row, about 116px tall),
   and while it is open the bottom nav rows hide so the card keeps room.
   Taller/wider screens keep the roomy panel the user approved. */
@media (max-width:600px), (max-height:800px){
  body.flashfit #colorPanel:not(.hide){display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px 8px;padding:8px 12px;align-items:center}
  body.flashfit #colorPanel .lbl{margin:0;font-size:11px;line-height:1.15}
  body.flashfit #colorPanel .swatches{flex-wrap:nowrap;gap:7px;min-width:0}
  body.flashfit #colorPanel .swatch{flex:1 1 0;width:auto;max-width:30px;height:auto;aspect-ratio:1;min-width:0}
  body.flashfit #colorPanel .rowline{grid-column:1/-1;justify-self:end;margin:0}
  body.flashfit #colorPanel .btn{min-height:28px;padding:0 12px;font-size:12px}
  body.colorsopen #flashZone .frow{display:none}
  body.colorsopen #flashZone .exitrow{display:none}
  body.colorsopen #flashZone .knowlink{display:none}
}
/* flash nav row: Back left, Flip centered, Next far right; Exit row below
   with an Exit under each end (his layout request, Oct 21) */
#flashZone .frow #backBtn{margin-right:auto}
#flashZone .frow #nextBtn{margin-left:auto}
#flashZone .exitrow{position:relative;display:block;height:46px;margin-top:16px}
#flashZone .exitrow .btn{position:absolute;top:0}
/* extreme short screens (e.g. split-screen during a call): fold the chrome
   harder and shrink deeper so the whole card stays visible */
@media (max-height:380px){
  /* squeeze heights: compact Exit row in flow, and the know-link row
     folds away, so the card keeps its height and nothing overlaps */
  #flashZone .exitrow{margin-top:2px;height:26px}
  #flashZone .exitrow .btn{padding:3px 10px;font-size:11.5px;min-height:0}
  #flashZone .knowlink{display:none}
  body.flashfit .wrap{padding-top:6px;padding-bottom:8px}
  body.flashfit #vFlash .topbar{margin-bottom:2px}
  body.flashfit #vFlash .topbar h2{font-size:15px}
  body.flashfit #vFlash .chip{min-height:28px;padding:2px 9px;font-size:12px}
  body.flashfit #vFlash .count{margin:0;font-size:11px}
  body.flashfit #vFlash .progtrack{display:none}
  body.flashfit #flashZone{margin-top:3px!important}
  body.flashfit #vFlash .frow{margin-top:5px}
  body.flashfit #vFlash .frow .btn{min-height:34px;padding:5px 10px;font-size:13px}
  body.flashfit .knowlink{min-height:24px;padding:1px 6px;font-size:12.5px}
  body.flashfit #fitStamp{font-size:9px;margin-top:1px}
}
@media (max-height:300px){
  body.flashfit #vFlash .count{display:none}
  body.flashfit #vFlash .frow .btn{min-height:32px}
}
.card.fit5{padding:8px 10px 10px}
.card.fit5 .prompt{font-size:16px}
.card.fit5 .meta{font-size:10.5px}
.card.fit5 .answer{font-size:11px;line-height:1.35}
.card.fit5 .ex{font-size:11px;padding:5px 8px}
.card.fit5 .lbl{margin:6px 0 2px;font-size:10px}
.card.fit5 .ipa{margin-bottom:2px}
.card.fit5::after{display:none}
.card.fit6{padding:6px 8px 6px}
.card.fit6 .prompt{font-size:14px}
.card.fit6 .meta{font-size:10px}
.card.fit6 .answer{font-size:10.5px;line-height:1.21}
.card.fit6 .ex{font-size:10.5px;line-height:1.28;padding:4px 7px}
.card.fit6 .lbl{margin:5px 0 1px;font-size:9.5px}
.card.fit6::after{display:none}
/* deepest squeeze only (split-screen heights): the definition always stays
   fully visible; the example and IPA yield their height to it */
.card.fit6 .ex{display:none}
.card.fit6 .ipa{display:none}
.card.fit6 .dictsense{display:none}
.card.fit6 .dictlbl{display:none}
.card.fit6 .exlbl{display:none}
.card.fit4{padding:10px 12px 12px}
.card.fit4 .prompt{font-size:19px}
.card.fit4 .answer{font-size:11.5px;line-height:1.38}
.card.fit4 .ex{font-size:11.5px;padding:6px 9px}
.card.fit4 .lbl{margin:8px 0 2px;font-size:10px}
.card.fit4 .ipa{margin-bottom:3px}
.card.fit4::after{display:none}

/* ---------- wide screens: use the space (2026-10-21) ---------- */
@media (min-width:900px){
  .wrap{max-width:1040px}
  #themeList{grid-template-columns:1fr 1fr}
  #batchList{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  #batchList .word{margin:0}
  #drillList{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  #drillList .word{margin:0}
}
@media (min-width:1080px){
  #tierList{grid-template-columns:repeat(3,1fr)}
  .tiercard{min-height:170px}
}

/* Narrow phones (<=360px, Oct 21 full test TC 3.6): the flash topbar and the
   nav button row wrapped onto extra lines and crushed the card to ~39px at
   320x568. Keep both on one line; the title ellipsizes instead. */
@media (max-width:360px){
  body.flashfit #vFlash .topbar{flex-wrap:nowrap}
  body.flashfit #vFlash .topbar .grow{min-width:0}
  body.flashfit #vFlash .topbar h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:17px}
  body.flashfit #vFlash .topbar .chip{flex:none}
  body.flashfit #flashZone .frow{flex-wrap:nowrap}
  body.flashfit #flashZone .frow .btn{padding:8px 10px;font-size:14px;white-space:nowrap}
  body.flashfit #flashZone .knowlink{font-size:13px}
}

/* ================= ARCHIVAL GRID PREVIEW v2 (2026-10-22) =================
   DESIGN ONLY. Structure, controls and functions are the current app's,
   untouched. This layer changes colors, borders, shadows and type.
   The card-color palette still wins: custom colors are inline styles,
   and nothing here uses !important against them. */
:root{
  --bg:#F3EFE6; --card:#FCFBF7; --card-soft:#F7F3E8;
  --ink:#1E1B17; --ink-soft:#575046; --muted:#857C6E; --faint:#B4AB99;
  --line:#1E1B17;
  --green:#1F573E; --green-d:#173F2D; --green-bg:#E9E7D8;
  --blue:#C24928; --blue-d:#9A3A20; --blue-bg:#F7F3E8;
  --purple:#C24928; --purple-d:#9A3A20; --purple-bg:#F7F3E8;
  --yellow:#F7DE68; --yellow-d:#9A3A20; --yellow-bg:#FBF3D3;
  --orange:#C24928; --orange-d:#9A3A20;
  --red:#C24928; --red-d:#9A3A20; --red-bg:#F9E9E2;
  --radius:14px; --radius-sm:10px;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
body{background:#F3EFE6;background-image:none;color:var(--ink);font-weight:500}
h1,h2{letter-spacing:0}
.kicker{color:var(--blue-d);font-family:var(--mono);letter-spacing:.08em}
.sub,.progtxt,.count,.pinfo{color:var(--ink-soft)}
.hero{background:var(--card);border:1.5px solid var(--ink);border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.hero h1{font-family:var(--serif);font-weight:400}
.hero .kicker{color:var(--ink-soft)}
.hero h1{color:var(--ink);text-shadow:none}
.appicon{border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:12px}
.hero .appicon{border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.streakpill{background:var(--card-soft);border:1.5px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);color:var(--blue-d);border-radius:8px}
.btn{background:var(--card);border:1.5px solid var(--ink);color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);border-radius:10px;letter-spacing:.04em}
.btn:hover{filter:none;background:var(--card-soft)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--green);border-color:var(--ink);color:#FCFBF7;
  box-shadow:3px 3px 0 var(--ink)}
.btn.primary:active{box-shadow:1px 1px 0 var(--ink)}
.btn.warn{background:var(--yellow);border-color:var(--ink);color:var(--ink);
  box-shadow:3px 3px 0 var(--ink)}
.btn.danger{background:var(--card);border-color:var(--ink);color:var(--blue-d);
  box-shadow:3px 3px 0 var(--ink)}
.btn:disabled{background:#E9E2D2;color:var(--faint);border-color:var(--faint);
  box-shadow:none}
.btn.qbtn{background:var(--card-soft);box-shadow:2px 2px 0 var(--ink)}
.chip{background:var(--card);border:1.5px solid var(--ink);color:var(--ink-soft);
  box-shadow:2px 2px 0 var(--ink);border-radius:8px;font-family:var(--mono);
  letter-spacing:0;text-transform:none}
.chip:active{transform:translate(2px,2px);box-shadow:none}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--card);
  box-shadow:2px 2px 0 rgba(30,27,23,.35)}
.bar,.tiercard,.themecard,.word,.optbtn,.chrow,.missrow,.pro-card{
  background:var(--card);border:1.5px solid var(--ink);border-radius:14px;
  box-shadow:3px 3px 0 var(--ink)}
.bar{border-top:1.5px solid var(--ink)}
.bar-search,.bar-mylist,.bar-protect,.bar-batch,
.bar-show,.bar-format,.bar-questions,.bar-resume{
  background:var(--card);border-top-color:var(--ink)}
.bar-search>label,.bar-mylist>label,.bar-protect>label,.bar-batch>label,
.bar-show>label,.bar-format>label,.bar-questions>label,.bar-resume>label{
  color:var(--ink-soft)}
.tiercard:active,.themecard:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tiercard:hover,.themecard:hover{transform:none}
.tiercard{color:var(--ink)}
.tiercard::after{display:none}
.tiercard .gname{color:var(--ink);text-shadow:none}
.tiercard .gsub{color:var(--ink-soft)}
.tiercard .gcount{color:var(--green-d)}
.tiercard .rec{background:var(--green-bg);color:var(--green-d);border:1.5px solid var(--ink)}
.tier-core,.tier-scholar,.tier-apex{background:var(--card)}
.themecard{border-left-width:1.5px}
.tcolor-0,.tcolor-1,.tcolor-2,.tcolor-3,.tcolor-4,.tcolor-5{background:var(--card)}
.tcolor-0 .tname,.tcolor-1 .tname,.tcolor-2 .tname,
.tcolor-3 .tname,.tcolor-4 .tname,.tcolor-5 .tname{color:var(--ink)}
.phrasecard{background:var(--yellow-bg);border-color:var(--ink);border-left-width:1.5px}
.bar>label,.lbl{font-family:var(--mono);color:var(--ink-soft);letter-spacing:.06em}
.gname,.tname{font-family:var(--serif);font-weight:400}
.gcount,.tprog{color:var(--green-d)}
.rec{background:var(--green-bg);color:var(--green-d);border:1.5px solid var(--ink)}
.pro{background:var(--ink);color:var(--card);border:1.5px solid var(--ink)}
input[type=text],.typein{background:var(--card);border:1.5px solid var(--ink);
  border-radius:10px;color:var(--ink)}
input[type=text]:focus,.typein:focus{border-color:var(--ink);background:#fff;
  box-shadow:2px 2px 0 var(--ink)}
.tag{background:var(--card-soft);border:1.5px solid var(--ink);color:var(--ink-soft);
  font-family:var(--mono)}
.tag.tested{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.word.open{border-color:var(--ink)}
.word.open .whead{background:var(--card-soft)}
.wbody{border-top:1.5px dashed #BDB3A0}
body[data-tier="core"] .word,body[data-tier="scholar"] .word,
body[data-tier="apex"] .word{border-left:1.5px solid var(--ink)}
body[data-tier="core"] #tierLabel,body[data-tier="scholar"] #tierLabel,
body[data-tier="apex"] #tierLabel{color:var(--ink)}
.word.pos-n,.word.pos-v,.word.pos-adj,.word.pos-adv{background:var(--card)}
.word.pos-n .w,.word.pos-v .w,.word.pos-adj .w,.word.pos-adv .w{color:var(--ink)}
.w{font-family:var(--serif);font-weight:400}
.ck{color:var(--green-d)} .wx{color:var(--blue-d)}
button.x{border:1.5px solid var(--ink);background:var(--card);color:var(--blue-d);
  box-shadow:2px 2px 0 var(--ink)}
.optbtn{box-shadow:2px 2px 0 var(--ink)}
.optbtn.correct{background:var(--green-bg);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.optbtn.wrong{background:var(--red-bg);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.qdef{background:var(--card-soft);border:1.5px solid var(--ink);
  font-family:var(--serif);font-weight:400}
.tfb.ok{background:var(--green-bg);border:1.5px solid var(--ink);color:var(--green-d)}
.tfb.bad{background:var(--red-bg);border:1.5px solid var(--ink);color:var(--blue-d)}
.ansreveal{background:var(--green-bg);border:1.5px solid var(--ink)}
.hit,mark{background:var(--yellow);color:var(--ink);border-radius:3px;
  padding:0 4px;border-bottom:1px solid #CDB23A;font-weight:700}
.empty{background:var(--card-soft);border:1.5px dashed var(--ink-soft);box-shadow:none}
.codewrap{background:var(--card-soft);border:1.5px solid var(--ink);border-radius:10px}
.codebig{font-family:var(--mono)}
.syncsep{border-top:1.5px dashed #BDB3A0}
.appfoot{border-top:1.5px solid var(--ink);color:var(--ink-soft)}
.spinner{border-color:#D6CEBE;border-top-color:var(--green)}
.pro-card::before{background:var(--ink)}
.scorebig{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
/* ---------- flashcard: same structure, archival dress ---------- */
.card{background-color:#FCFBF7;color:#1E1B17;
  border:1.5px solid var(--ink);border-radius:14px;
  box-shadow:4px 4px 0 var(--ink);
  background-image:linear-gradient(to bottom,transparent 35px,rgba(214,206,190,.40) 36px);
  background-size:100% 36px}
body[data-tier="core"] .card,body[data-tier="scholar"] .card,body[data-tier="apex"] .card{
  border-top:1.5px solid var(--ink)}
.card::after{content:"TAP TO FLIP";font-family:var(--mono);font-weight:600;
  letter-spacing:.08em;color:#857C6E;font-size:10.5px}
.prompt{font-family:var(--serif);font-weight:400;color:var(--ink)}
.answer{font-weight:500}
.card:not(.custom) .answer .lbl{display:inline-block;background:#E9E2D2;
  border:1.5px solid var(--ink);border-radius:6px;padding:3px 10px;color:var(--ink-soft)}
.card:not(.custom) .answer .lbl:first-child{margin-top:2px}
.answer>div:not(.lbl){font-family:var(--serif)}
.ipa{font-family:var(--mono);color:var(--ink-soft);font-size:.92em}
.dictsense{font-family:var(--serif)}
.card:not(.custom) .ex{border-left:none;background:var(--card-soft);
  border-top:1.5px dashed #BDB3A0;border-radius:0;padding:10px 4px 2px;
  color:var(--ink-soft)}
.progtrack{background:#E9E2D2;border:1.5px solid var(--ink);border-radius:6px}
.progfill,#flashFill{background:var(--blue)}
body[data-tier="core"] .progfill,body[data-tier="scholar"] .progfill,
body[data-tier="apex"] .progfill{background:var(--blue)}
#flashCount{font-family:var(--mono);color:var(--ink)}
#flashTxt{font-family:var(--mono)}
.knowlink{font-family:var(--mono);color:var(--ink-soft);letter-spacing:0}
.knowlink:not(.off){color:var(--green-d)}

/* ---- ARCHIVAL GRID PREVIEW v3: item distinction (Gemini spec 2026-10-22) ----
   Colored book-spines + mineral paper stock on browse screens only.
   The flashcard/study screens stay neutral paper (guardrail). */
/* Theme colorways, mapped to the app's own tcolor-0..5 rotation */
.themecard{box-shadow:2px 2px 0 var(--ink)}
.themecard .tcount{font-family:var(--mono);padding:2px 9px;border-radius:999px;
  border:1px solid;font-weight:700}
.tcolor-0{background:#EEF4EE;border-left:6px solid #2A6B4E}
.tcolor-0 .tname{color:#153B29}
.tcolor-0 .tcount{background:#DCEADF;border-color:#8AB59B;color:#153B29}
.tcolor-1{background:#FAF0E8;border-left:6px solid #C24928}
.tcolor-1 .tname{color:#6E2310}
.tcolor-1 .tcount{background:#F3DEC9;border-color:#D69B7B;color:#6E2310}
.tcolor-2{background:#EDF2F7;border-left:6px solid #2B5B84}
.tcolor-2 .tname{color:#16324A}
.tcolor-2 .tcount{background:#DAE6F2;border-color:#88ACC9;color:#16324A}
.tcolor-3{background:#F7EEF2;border-left:6px solid #8E3A59}
.tcolor-3 .tname{color:#521B30}
.tcolor-3 .tcount{background:#EEDCE4;border-color:#C48DA2;color:#521B30}
.tcolor-4{background:#FBF5E4;border-left:6px solid #B87314}
.tcolor-4 .tname{color:#5C3806}
.tcolor-4 .tcount{background:#F4E5BE;border-color:#D4AE6A;color:#5C3806}
.tcolor-5{background:#F1EFF8;border-left:6px solid #554385}
.tcolor-5 .tname{color:#2E224D}
.tcolor-5 .tcount{background:#E2DDF0;border-color:#A396C7;color:#2E224D}
/* Tier cards: archival bookcloth gradients, Green -> Blue -> Purple kept */
.tiercard{box-shadow:3px 3px 0 var(--ink)}
.tier-core{background:linear-gradient(135deg,#F4FAF6 0%,#E0EFE6 100%);
  border-left:6px solid #1F573E}
.tier-core .gname{color:#123827}
.tier-core .gcount{color:#1F573E}
.tier-core .rec,.tier-core .pro{background:#1F573E;color:#FCFBF7;border:1.5px solid #1F573E}
.tier-scholar{background:linear-gradient(135deg,#F2F6FA 0%,#DCE7F3 100%);
  border-left:6px solid #234E78}
.tier-scholar .gname{color:#132E4A}
.tier-scholar .gcount{color:#234E78}
.tier-scholar .rec,.tier-scholar .pro{background:#234E78;color:#FCFBF7;border:1.5px solid #234E78}
.tier-apex{background:linear-gradient(135deg,#F8F2F6 0%,#EBE0EC 100%);
  border-left:6px solid #632B53}
.tier-apex .gname{color:#3D1632}
.tier-apex .gcount{color:#632B53}
.tier-apex .rec,.tier-apex .pro{background:#632B53;color:#F7DE68;border:1.5px solid #632B53}
/* Hero icon: Ex-Libris stamp frame */
.appicon{background:#FCFBF7;padding:4px;border:1.5px solid var(--ink);
  border-radius:16px;box-shadow:2px 2px 0 var(--ink)}

/* ================= OBSIDIAN NIGHT (dual preview, 2026-10-22) =================
   Gemini teen-discussion spec: matte slate-black #111318, alabaster text,
   luminous mineral channels. Same structure, same Archival bones.
   Active only when html[data-mode="night"]. */
html[data-mode="night"]{
  --bg:#111318; --card:#171B24; --card-soft:#1E242F;
  --ink:#E6E8EC; --ink-soft:#A7B0BF; --muted:#8A94A6; --faint:#5B6B82;
  --line:#39435A;
  --green:#2F8F5F; --green-d:#7BD8A4; --green-bg:#14301F;
  --blue:#E0683C; --blue-d:#F0A58C; --blue-bg:#1E242F;
  --purple:#E0683C; --purple-d:#F0A58C; --purple-bg:#1E242F;
  --yellow:#F7DE68; --yellow-d:#F0A58C; --yellow-bg:#2A2410;
  --orange:#E0683C; --orange-d:#F0A58C;
  --red:#E0683C; --red-d:#F0A58C; --red-bg:#3A1A12;
}
html[data-mode="night"] body{background:#111318;color:var(--ink)}
html[data-mode="night"] .hero,
html[data-mode="night"] .appicon,
html[data-mode="night"] .streakpill,
html[data-mode="night"] .btn,
html[data-mode="night"] .chip,
html[data-mode="night"] .bar,html[data-mode="night"] .tiercard,
html[data-mode="night"] .themecard,html[data-mode="night"] .word,
html[data-mode="night"] .optbtn,html[data-mode="night"] .chrow,
html[data-mode="night"] .missrow,html[data-mode="night"] .pro-card,
html[data-mode="night"] .card,html[data-mode="night"] button.x,
html[data-mode="night"] .qdef,html[data-mode="night"] .tfb,
html[data-mode="night"] .ansreveal,html[data-mode="night"] .codewrap,
html[data-mode="night"] input[type=text],html[data-mode="night"] .typein,
html[data-mode="night"] .tag,html[data-mode="night"] .progtrack{
  border-color:#39435A;box-shadow:3px 3px 0 #04060A}
html[data-mode="night"] .hero h1{color:var(--ink)}
html[data-mode="night"] .streakpill{color:#E8C93D}
html[data-mode="night"] .btn.primary{background:#1F573E;color:#F2F7F0}
html[data-mode="night"] .btn.warn{background:var(--yellow);color:#1E1B17}
html[data-mode="night"] .btn.danger{color:#F0A58C}
html[data-mode="night"] .btn:disabled{background:#1E242F;color:var(--faint);border-color:#2A3140;box-shadow:none}
html[data-mode="night"] .chip.on{background:#E6E8EC;color:#11131A;border-color:#E6E8EC}
html[data-mode="night"] input[type=text]:focus,html[data-mode="night"] .typein:focus{background:#1E242F;box-shadow:2px 2px 0 #04060A}
html[data-mode="night"] .tag.tested{background:var(--yellow);color:#1E1B17;border-color:#39435A}
html[data-mode="night"] .wbody{border-top-color:#39435A}
html[data-mode="night"] .syncsep{border-top-color:#39435A}
html[data-mode="night"] .appfoot{border-top-color:#39435A}
html[data-mode="night"] .empty{border-color:#5B6B82}
html[data-mode="night"] .spinner{border-color:#2A3140;border-top-color:#2F8F5F}
html[data-mode="night"] .pro{background:#E6E8EC;color:#11131A;border-color:#E6E8EC}
html[data-mode="night"] .phrasecard{background:#2A2410}
/* night theme colorways: dark mineral tints, luminous spines */
html[data-mode="night"] .tcolor-0{background:#122019;border-left:6px solid #3FA46F}
html[data-mode="night"] .tcolor-0 .tname{color:#B9E4CC}
html[data-mode="night"] .tcolor-0 .tcount{background:#1B3024;border-color:#3FA46F;color:#D8F3E3}
html[data-mode="night"] .tcolor-1{background:#261712;border-left:6px solid #E0683C}
html[data-mode="night"] .tcolor-1 .tname{color:#F2C4AC}
html[data-mode="night"] .tcolor-1 .tcount{background:#382016;border-color:#E0683C;color:#FBE3D2}
html[data-mode="night"] .tcolor-2{background:#121E2A;border-left:6px solid #4E93C9}
html[data-mode="night"] .tcolor-2 .tname{color:#BAD4EC}
html[data-mode="night"] .tcolor-2 .tcount{background:#1B2E42;border-color:#4E93C9;color:#DCEBF8}
html[data-mode="night"] .tcolor-3{background:#251319;border-left:6px solid #C65D84}
html[data-mode="night"] .tcolor-3 .tname{color:#EFC3D2}
html[data-mode="night"] .tcolor-3 .tcount{background:#371D28;border-color:#C65D84;color:#F9E2EB}
html[data-mode="night"] .tcolor-4{background:#26200F;border-left:6px solid #D29A3F}
html[data-mode="night"] .tcolor-4 .tname{color:#EFDCAC}
html[data-mode="night"] .tcolor-4 .tcount{background:#38300F;border-color:#D29A3F;color:#F7EAC4}
html[data-mode="night"] .tcolor-5{background:#1B1830;border-left:6px solid #8B76D6}
html[data-mode="night"] .tcolor-5 .tname{color:#D2C8F2}
html[data-mode="night"] .tcolor-5 .tcount{background:#2A2447;border-color:#8B76D6;color:#E7E1FA}
/* night tier bookcloth */
html[data-mode="night"] .tier-core{background:linear-gradient(135deg,#12271C 0%,#0E1B13 100%);border-left:6px solid #2F8F5F}
html[data-mode="night"] .tier-core .gname{color:#CDEEDD}
html[data-mode="night"] .tier-core .gcount{color:#5FC48C}
html[data-mode="night"] .tier-core .rec,html[data-mode="night"] .tier-core .pro{background:#1F573E;color:#EAF5EE;border-color:#2F8F5F}
html[data-mode="night"] .tier-scholar{background:linear-gradient(135deg,#122334 0%,#0D1826 100%);border-left:6px solid #3E74A8}
html[data-mode="night"] .tier-scholar .gname{color:#C3D9EE}
html[data-mode="night"] .tier-scholar .gcount{color:#6FA8D8}
html[data-mode="night"] .tier-scholar .rec,html[data-mode="night"] .tier-scholar .pro{background:#234E78;color:#E8F1F9;border-color:#3E74A8}
html[data-mode="night"] .tier-apex{background:linear-gradient(135deg,#2A1424 0%,#1C0F19 100%);border-left:6px solid #9A4A7E}
html[data-mode="night"] .tier-apex .gname{color:#EDC9DF}
html[data-mode="night"] .tier-apex .gcount{color:#C97FA9}
html[data-mode="night"] .tier-apex .rec,html[data-mode="night"] .tier-apex .pro{background:#632B53;color:#F7DE68;border-color:#9A4A7E}
/* night flashcard: calm slate, no glow on text */
html[data-mode="night"] .card{background-color:#171B24;color:#E6E8EC;
  background-image:linear-gradient(to bottom,transparent 35px,rgba(230,232,236,.05) 36px)}
html[data-mode="night"] .card::after{color:#8A94A6}
html[data-mode="night"] .prompt{color:#E6E8EC}
html[data-mode="night"] .card:not(.custom) .answer .lbl{background:#232B38;color:#B9C2D0;border-color:#39435A}
html[data-mode="night"] .card:not(.custom) .ex{background:#1E242F;border-top-color:#39435A;color:#A7B0BF}
html[data-mode="night"] .progtrack{background:#232B38}
html[data-mode="night"] .progfill,html[data-mode="night"] #flashFill{background:#E0683C}
html[data-mode="night"] .optbtn.correct{background:#14301F}
html[data-mode="night"] .optbtn.wrong{background:#3A1A12}
html[data-mode="night"] .tfb.ok{background:#14301F;color:#7BD8A4}
html[data-mode="night"] .tfb.bad{background:#3A1A12;color:#F0A58C}
/* preview-only mode toggle */
#modeToggle{position:fixed;right:14px;bottom:14px;z-index:9999;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;font-weight:700;
  letter-spacing:.05em;padding:10px 16px;border-radius:999px;cursor:pointer;
  background:#FCFBF7;color:#1E1B17;border:1.5px solid #1E1B17;box-shadow:3px 3px 0 #1E1B17}
html[data-mode="night"] #modeToggle{background:#171B24;color:#E6E8EC;border-color:#39435A;box-shadow:3px 3px 0 #04060A}

/* ---- UTILITY PANEL COLORWAYS (owner feedback 2026-10-22: "이 부분에 너무 색이 없어요")
   His own Oct 1 assignments: My tier list = green, Protect = purple,
   Look up a word = blue. Light tint + top color bar + matching label. */
.bar-mylist{background:#EEF4EE;border-top:6px solid #1F573E}
.bar-mylist>label{color:#153B29}
.bar-mylist .progfill{background:#1F573E}
.bar-protect{background:#F3EDF3;border-top:6px solid #632B53}
.bar-protect>label{color:#4A1F3E}
.bar-protect .codewrap{background:#EFE6EF}
.bar-search{background:#EDF2F7;border-top:6px solid #234E78}
.bar-search>label{color:#16324A}
.bar-teacher{background:#FAF0E8;border-top:6px solid #C24928}
.bar-teacher>label{color:#6E2310}
.bar-batch{background:#FBF5E4;border-top:6px solid #B87314}
.bar-batch>label{color:#5C3806}
.bar-show{background:#EEF4EE;border-top:6px solid #2A6B4E}
.bar-show>label{color:#153B29}
.bar-format{background:#F1EFF8;border-top:6px solid #554385}
.bar-format>label{color:#2E224D}
.bar-questions{background:#F7EEF2;border-top:6px solid #8E3A59}
.bar-questions>label{color:#521B30}
.bar-resume{background:#EDF2F7;border-top:6px solid #2B5B84}
.bar-resume>label{color:#16324A}
/* night versions: dark tints, luminous bars */
html[data-mode="night"] .bar-mylist{background:#122019;border-top:6px solid #3FA46F}
html[data-mode="night"] .bar-mylist>label{color:#B9E4CC}
html[data-mode="night"] .bar-mylist .progfill{background:#3FA46F}
html[data-mode="night"] .bar-protect{background:#221423;border-top:6px solid #B06CA0}
html[data-mode="night"] .bar-protect>label{color:#EFC9DF}
html[data-mode="night"] .bar-protect .codewrap{background:#2A1E2E}
html[data-mode="night"] .bar-search{background:#121E2A;border-top:6px solid #4E93C9}
html[data-mode="night"] .bar-search>label{color:#BAD4EC}
html[data-mode="night"] .bar-teacher{background:#261712;border-top:6px solid #E0683C}
html[data-mode="night"] .bar-teacher>label{color:#F2C4AC}
html[data-mode="night"] .bar-batch{background:#26200F;border-top:6px solid #D29A3F}
html[data-mode="night"] .bar-batch>label{color:#EFDCAC}
html[data-mode="night"] .bar-show{background:#122019;border-top:6px solid #3FA46F}
html[data-mode="night"] .bar-show>label{color:#B9E4CC}
html[data-mode="night"] .bar-format{background:#1B1830;border-top:6px solid #8B76D6}
html[data-mode="night"] .bar-format>label{color:#D2C8F2}
html[data-mode="night"] .bar-questions{background:#251319;border-top:6px solid #C65D84}
html[data-mode="night"] .bar-questions>label{color:#EFC3D2}
html[data-mode="night"] .bar-resume{background:#121E2A;border-top:6px solid #4E93C9}
html[data-mode="night"] .bar-resume>label{color:#BAD4EC}