/* ============================================================
   BLD TRAINER — SIGNAL DESIGN SYSTEM
   Chakra Petch display · JetBrains Mono data
   Palette: near-black / electric cyan (edges) / vivid orange (corners)
   ============================================================ */

:root {
  --bg:      #070a0e;
  --panel:   #0c1018;
  --panel2:  #111622;
  --panel3:  #161d2c;
  --line:    #19253a;
  --line2:   #22304a;
  --ink:     #c8d8ea;
  --ink-dim: #637894;
  --ink-faint:#364a62;
  --accent:  #00e5c8;  /* edges / primary CTA */
  --amber:   #f09030;  /* corners / secondary */
  --bad:     #ff4030;
  --good:    #2ed870;
  --W:#f0f0ea; --Y:#ffd23f; --R:#de3b30; --O:#ef8a2e; --G:#2ea850; --B:#2d7ed4;
  --fs: clamp(20px,6.4vw,31px);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --disp: 'Chakra Petch', system-ui, sans-serif;
  --body: 'Chakra Petch', system-ui, sans-serif;
  --r: 3px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
}

body {
  padding: 36px 20px 100px;
  background-image:
    radial-gradient(circle, rgba(0,229,200,0.045) 1px, transparent 1px),
    radial-gradient(circle at 15% 10%, rgba(0,229,200,0.04) 0, transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(240,144,48,0.03) 0, transparent 40%);
  background-size: 28px 28px, 100% 100%, 100% 100%;
}

.wrap { max-width: 1100px; margin: 0 auto; }
a { color: var(--accent); }

/* ── PAGE-LOAD STAGGER ── */
@keyframes up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

header                    { animation: up 0.4s 0.00s ease both; }
.wrap > .panel:nth-child(2){ animation: up 0.4s 0.05s ease both; }
.wrap > .panel:nth-child(3){ animation: up 0.4s 0.10s ease both; }
.main                     { animation: up 0.4s 0.15s ease both; }
.wrap > .panel:nth-child(5){ animation: up 0.4s 0.20s ease both; }
.wrap > .panel:nth-child(6){ animation: up 0.4s 0.22s ease both; }
.wrap > .panel:nth-child(7){ animation: up 0.4s 0.24s ease both; }
.wrap > .panel:nth-child(8){ animation: up 0.4s 0.26s ease both; }

/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
}

@media(max-width:600px){ header { grid-template-columns: 1fr; } }

.brand {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(32px, 7.5vw, 58px);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.brand b { color: var(--accent); font-weight: 700; }
.brand .slash {
  color: var(--ink-faint);
  font-weight: 300;
  font-size: 0.5em;
  letter-spacing: 0.12em;
  margin-left: 0.4em;
}

.tag {
  color: var(--ink-dim);
  font-size: 12.5px;
  max-width: 60ch;
  line-height: 1.65;
  font-weight: 300;
  grid-column: 1 / -1;
  margin-top: 6px;
}
.tag code { font-family: var(--mono); color: var(--accent); font-size: 0.88em; }

/* account / sign-in */
.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--mono);
}
@media(max-width:600px){ .account { justify-content: flex-start; } }
.account .acct-form { display: flex; gap: 6px; }
.account .acct-input {
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 9px;
  width: 16ch;
}
.account .acct-input:focus { outline: none; border-color: var(--accent); }
.account .acct-btn { font-size: 11px; padding: 6px 11px; }
.account .acct-email {
  color: var(--ink-dim);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.account .acct-msg { font-size: 11px; color: var(--ink-dim); width: 100%; text-align: right; }
@media(max-width:600px){ .account .acct-msg { text-align: left; } }
.account .acct-msg.good { color: var(--good); }
.account .acct-msg.bad  { color: var(--bad); }

/* ══════════════════════════════════════════════════════════
   PANELS
   ══════════════════════════════════════════════════════════ */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-top: 10px;
  position: relative;
}

/* accent rail — left edge */
.panel::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  border-radius: var(--r) 0 0 var(--r);
  opacity: 0.45;
  pointer-events: none;
}
#attempt-panel::before { background: var(--amber); }

.panel-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.25);
}
.panel-h h2 {
  font-family: var(--disp);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.panel-h .hint {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  margin-left: auto;
}

.panel-b { padding: 14px 16px 16px 18px; }

/* ══════════════════════════════════════════════════════════
   SOLVE ORDER
   ══════════════════════════════════════════════════════════ */
.flow { display: flex; flex-wrap: wrap; gap: 6px; }

.step {
  flex: 1 1 110px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
}
.step .n {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.15em;
  opacity: 0.7;
}
.step .t {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 3px;
}
.step .d { font-size: 11px; color: var(--ink-dim); margin-top: 2px; font-weight: 300; }
.step.opt { border-style: dashed; opacity: 0.65; }

.refgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
@media(max-width:620px){ .refgrid { grid-template-columns: 1fr; } }

.ref {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 13px;
}
.ref .lbl {
  font-family: var(--disp);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.ref .alg {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  margin-top: 5px;
  word-spacing: 2px;
  line-height: 1.8;
}
.ref .meta { font-size: 11.5px; color: var(--ink-dim); margin-top: 4px; font-weight: 300; }
.ref .meta b { color: var(--amber); font-weight: 600; }
.ref .meta i { color: var(--accent); font-style: normal; }

/* ══════════════════════════════════════════════════════════
   SCRAMBLE
   ══════════════════════════════════════════════════════════ */
.scrline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

.scr {
  flex: 1 1 280px;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 1px;
  word-spacing: 5px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  color: var(--ink);
  min-height: 46px;
  line-height: 1.75;
}

.btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
button {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--r);
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--ink-dim);
  padding: 8px 14px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
button:hover {
  border-color: var(--ink-dim);
  color: var(--ink);
  background: rgba(200,216,234,0.04);
}
button.primary {
  background: rgba(0,229,200,0.08);
  border-color: rgba(0,229,200,0.55);
  color: var(--accent);
}
button.primary:hover {
  background: rgba(0,229,200,0.16);
  border-color: var(--accent);
}
button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-faint);
}
button.ghost:hover {
  border-color: var(--line2);
  color: var(--ink-dim);
  background: transparent;
}
button:disabled { opacity: 0.28; cursor: not-allowed; pointer-events: none; }

.custom-row {
  display: none;
  margin-top: 10px;
  gap: 8px;
  flex-wrap: wrap;
}
.custom-row input {
  flex: 1 1 240px;
  font-family: var(--mono);
  font-size: 13px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  padding: 10px 12px;
}
.custom-row input:focus { outline: none; border-color: var(--accent); }

.err {
  color: var(--bad);
  font-size: 11px;
  margin-top: 6px;
  min-height: 14px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT GRID
   ══════════════════════════════════════════════════════════ */
.main {
  display: grid;
  grid-template-columns: minmax(0,auto) minmax(0,1fr);
  gap: 10px;
  margin-top: 10px;
}
@media(max-width:780px){ .main { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   CUBE NET
   ══════════════════════════════════════════════════════════ */
.netwrap { display: flex; justify-content: center; padding: 8px 0 4px; }

.net {
  display: grid;
  grid-template-columns: repeat(12, var(--fs));
  grid-template-rows: repeat(9, var(--fs));
  gap: 3px;
}

.cell {
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: calc(var(--fs) * 0.4);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), inset 0 -2px 5px rgba(0,0,0,0.28);
}
.cell.dark  { color: rgba(0,0,0,0.85); }
.cell.light { color: rgba(255,255,255,0.9); }

.cell.cur {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
  z-index: 3;
  animation: cellpulse 1.0s infinite;
}
.cell.tgt {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  z-index: 2;
}
.cell.buf {
  box-shadow: inset 0 0 0 2px #111, inset 0 0 0 4px var(--amber);
}

@keyframes cellpulse {
  0%,100% { outline-color: var(--amber); }
  50%     { outline-color: rgba(240,144,48,0.3); }
}

/* ── 3D cube ─────────────────────────────────────────── */
.cube3d-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0 8px;
}
.cube3d-stage {
  width: 320px;
  height: 320px;
  max-width: 100%;
  perspective: 1100px;
  position: relative;
}
.cube3d-cube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.cube3d-sticker {
  position: absolute;
  top: 0;
  left: 0;
  margin: -27px 0 0 -27px;
  width: 54px;
  height: 54px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 22px;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45), inset 0 -3px 9px rgba(0,0,0,0.32);
}
.cube3d-sticker.dark  { color: rgba(0,0,0,0.85); }
.cube3d-sticker.light { color: rgba(255,255,255,0.92); }
.cube3d-sticker.cur {
  outline: 3px solid var(--amber);
  outline-offset: -2px;
  z-index: 3;
  animation: cellpulse 1.0s infinite;
}
.cube3d-sticker.tgt {
  outline: 3px solid var(--accent);
  outline-offset: -2px;
  z-index: 2;
}
.cube3d-sticker.buf {
  box-shadow: inset 0 0 0 2px #111, inset 0 0 0 5px var(--amber);
}

.cube3d-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cube3d-controls-row { display: flex; align-items: center; gap: 6px; }
.c3d-arrow, .c3d-preset {
  background: var(--panel2);
  border: 1px solid var(--line2);
  color: var(--ink-dim);
  border-radius: var(--r);
  font-family: var(--mono);
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.c3d-arrow  { width: 36px; height: 30px; font-size: 12px; }
.c3d-preset { height: 30px; padding: 0 14px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.c3d-arrow:hover, .c3d-preset:hover { color: var(--accent); border-color: var(--accent); }

.cube3d-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  min-height: 56px;
}
.cube3d-demo button { font-size: 12px; padding: 8px 16px; }
.op-phase {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--accent);
  min-height: 16px;
  text-align: center;
}

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  font-family: var(--disp);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.legend span { display: flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; border-radius: 1px; display: inline-block; }
.sw-buf  { box-shadow: inset 0 0 0 2px var(--amber); background: #1a1a1a; }
.sw-cur  { outline: 2px solid var(--amber); background: #1a1a1a; width: 8px; height: 8px; }
.sw-tgt  { outline: 2px solid var(--accent); background: #1a1a1a; width: 8px; height: 8px; }

/* ══════════════════════════════════════════════════════════
   TOGGLES
   ══════════════════════════════════════════════════════════ */
.toggle {
  display: flex;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  overflow: hidden;
}
.toggle button {
  border: 0;
  border-right: 1px solid var(--line2);
  border-radius: 0;
  background: transparent;
  padding: 7px 12px;
  font-size: 10px;
  color: var(--ink-faint);
}
.toggle button:last-child { border-right: 0; }
.toggle button:hover { color: var(--ink); background: rgba(255,255,255,0.04); border-color: transparent; }
.toggle button.on { background: rgba(0,229,200,0.1); color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   GUIDED TRACE
   ══════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: 6px; }
.tabs button { flex: 1; border-radius: var(--r); }
.tabs button.on { background: var(--panel2); border-color: var(--line2); color: var(--ink); }
.tabs button.on[data-tab=edge]   { border-bottom: 2px solid var(--accent); color: var(--accent); }
.tabs button.on[data-tab=corner] { border-bottom: 2px solid var(--amber); color: var(--amber); }

.stepbox {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-top: 10px;
  min-height: 100px;
}
.stepbox .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cyc-first { color: var(--accent); }
.cyc-new   { color: var(--amber); }
.cyc-flip  { color: #a882e8; }
.cyc-done  { color: var(--good); }

.stepbox .txt { font-size: 14px; line-height: 1.65; }
.stepbox .txt b { color: var(--amber); font-family: var(--mono); font-weight: 700; }

.memostrip { margin-top: 10px; }
.memostrip .lbl {
  font-family: var(--disp);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}

.pairs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; min-height: 28px; }

.pair {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 2px;
  padding: 4px 9px;
  letter-spacing: 2.5px;
  transition: border-color 0.12s, color 0.12s, box-shadow 0.12s;
  cursor: default;
}
.pair:hover { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0,229,200,0.15); }
.pair.last { color: var(--amber); border-color: rgba(240,144,48,0.5); box-shadow: 0 0 8px rgba(240,144,48,0.15); }
.pair.solo { color: var(--amber); border-color: rgba(240,144,48,0.55); box-shadow: 0 0 8px rgba(240,144,48,0.15); }

.ctrls { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ctrls button { flex: 1 1 auto; }

/* ══════════════════════════════════════════════════════════
   MEMO SUMMARY
   ══════════════════════════════════════════════════════════ */
.sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width:620px){ .sumgrid { grid-template-columns: 1fr; } }

.sumcard {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
}
.sumcard h3 {
  font-family: var(--disp);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sumcard h3 .ct { color: var(--ink-dim); font-size: 10px; }

.parity {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: 12px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.parity.yes { background: rgba(255,64,48,0.07); border-color: rgba(255,64,48,0.35); color: var(--bad); }
.parity.no  { background: rgba(46,216,112,0.06); border-color: rgba(46,216,112,0.3); color: var(--good); }
.parity b   { font-weight: 700; }

.tipline {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 12px;
  line-height: 1.65;
  font-weight: 300;
}
.tipline b { font-weight: 600; color: var(--ink); font-family: var(--mono); font-size: 11.5px; }

/* ══════════════════════════════════════════════════════════
   NAVIGATION DRILL
   ══════════════════════════════════════════════════════════ */
.drill { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.q { flex: 1 1 260px; font-size: 14px; line-height: 1.5; }
.q .slot {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--amber);
  font-size: 17px;
}
.drill input {
  width: 60px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  text-transform: uppercase;
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  color: var(--ink);
  padding: 10px;
}
.drill input:focus { outline: none; border-color: var(--accent); }

.verdict {
  font-size: 12px;
  min-height: 18px;
  margin-top: 10px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.06em;
}
.verdict.ok { color: var(--good); }
.verdict.no { color: var(--bad); }
.score { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); }

/* ══════════════════════════════════════════════════════════
   ATTEMPT MODE
   ══════════════════════════════════════════════════════════ */
.attempt-phase-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.attempt-badge {
  font-family: var(--disp);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
}
.attempt-badge.cyan  { background: rgba(0,229,200,0.1);  color: var(--accent); border: 1px solid rgba(0,229,200,0.3); }
.attempt-badge.amber { background: rgba(240,144,48,0.1); color: var(--amber);  border: 1px solid rgba(240,144,48,0.3); }
.attempt-sub { font-size: 12px; color: var(--ink-dim); font-weight: 300; }

.attempt-timer {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(68px, 17vw, 116px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 14px 0;
  text-align: center;
  width: 100%;
}
.attempt-timer.amber { color: var(--amber); }
.attempt-timer.cyan  { color: var(--accent); }

@keyframes timerBreath {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.72; }
}
.attempt-timer.amber { animation: timerBreath 2s infinite; }

.attempt-ctrls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.attempt-times {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media(max-width:500px){ .attempt-times { grid-template-columns: 1fr 1fr; } }

.time-cell {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
}
.time-cell .lbl {
  font-family: var(--disp);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.time-cell .val {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 22px;
  margin-top: 5px;
}
.time-cell .val.amber { color: var(--amber); }
.time-cell .val.cyan  { color: var(--accent); }

.attempt-hist { margin-top: 14px; }

.hist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 12px;
  font-size: 11.5px;
  padding: 7px 10px;
  border-radius: var(--r);
  margin-top: 5px;
  background: var(--panel2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  transition: border-color 0.12s;
}
.hist-row:hover { border-color: var(--line2); }
.hist-row.ok  { border-left: 2px solid rgba(46,216,112,0.55); }
.hist-row.dnf { border-left: 2px solid rgba(255,64,48,0.5); }

.hist-scr {
  font-size: 10.5px;
  color: var(--ink-dim);
  flex: 1 1 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-row .verdict-tag {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.15em;
}
.hist-row.ok  .verdict-tag { color: var(--good); }
.hist-row.dnf .verdict-tag { color: var(--bad); }

.hist-mode-tag {
  font-family: var(--disp);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: rgba(0,229,200,0.08);
  border: 1px solid rgba(0,229,200,0.25);
  padding: 1px 5px;
  border-radius: 2px;
}

/* ── BLINDFOLD MODE ── */
body.blindfold .panel:not(#attempt-panel),
body.blindfold .main,
body.blindfold header,
body.blindfold footer { display: none; }

/* ══════════════════════════════════════════════════════════
   MEMORY STORY
   ══════════════════════════════════════════════════════════ */
.story-wrap { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.story-box {
  display: none;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  font-weight: 300;
}
.story-box p { margin: 0; }

.story-section-lbl {
  font-family: var(--disp);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.edge-lbl   { color: var(--accent); }
.corner-lbl { color: var(--amber); }

.story-divider {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  margin: 12px 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.story-divider::before { content: '── '; }
.story-divider::after  { content: ' ──'; }

.story-quota {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   STICKER ENTRY DRAWER
   ══════════════════════════════════════════════════════════ */
.entry-row {
  display: none;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
  padding: 16px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.entry-grids { display: flex; flex-wrap: wrap; gap: 12px; }
.entry-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entry-status { font-size: 12px; font-family: var(--mono); color: var(--ink-dim); }
.entry-status.err { color: var(--bad); }

.face-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
}
.face-lbl {
  font-family: var(--disp);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: 8px;
}
.face-grid { display: grid; grid-template-columns: repeat(3,32px); grid-template-rows: repeat(3,32px); gap: 3px; }
.face-orient-wrap { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.face-adj-mid { display: flex; gap: 3px; align-items: stretch; }
.face-adj { border-radius: 1px; opacity: 0.6; }
.face-adj-h { height: 5px; }
.face-adj-v { width: 5px; }
.face-cell {
  width: 32px; height: 32px;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s;
  padding: 0;
}
.face-cell:hover { transform: scale(1.12); }
.face-center { cursor: default; opacity: 0.85; border: 1px solid rgba(255,255,255,0.1); }

/* ══════════════════════════════════════════════════════════
   PAIR FLASHCARDS
   ══════════════════════════════════════════════════════════ */
.fc-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.fc-card {
  min-height: 180px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Radial glow behind the pair */
.fc-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(0,229,200,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.fc-pair {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(56px, 14vw, 88px);
  letter-spacing: 0.1em;
  color: var(--ink);
  line-height: 1;
  position: relative;
  z-index: 1;
}

.fc-word {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 34px);
  color: var(--amber);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.2s;
  position: relative;
  z-index: 1;
}

.fc-input {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 28px;
  text-align: center;
  text-transform: uppercase;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  color: var(--ink);
  padding: 10px 16px;
  width: 90px;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 1;
}
.fc-input:focus { outline: none; border-color: var(--accent); }

.fc-feedback {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  min-height: 18px;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
}
.fc-feedback.ok { color: var(--good); }
.fc-feedback.no { color: var(--bad); }

.fc-ctrls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fc-ctrls:empty { margin: 0; }
.fc-ctrls button { flex: 1 1 auto; }

.fc-weak {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fc-weak-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-family: var(--mono);
}
.fc-acc { font-size: 10.5px; color: var(--ink-dim); margin-left: auto; letter-spacing: 0.04em; }
.fc-acc.no { color: var(--bad); }

/* ══════════════════════════════════════════════════════════
   WORD LIST
   ══════════════════════════════════════════════════════════ */
.wl-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  align-items: center;
}
.wl-controls input {
  flex: 1 1 200px;
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  padding: 8px 12px;
}
.wl-controls input:focus { outline: none; border-color: var(--accent); }
.wl-controls input::placeholder { color: var(--ink-faint); }

.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}
/* custom scrollbar */
.wl-grid::-webkit-scrollbar { width: 3px; }
.wl-grid::-webkit-scrollbar-track { background: transparent; }
.wl-grid::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 2px; }

.wl-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background 0.1s;
}
.wl-row:hover { background: var(--panel2); border-color: var(--line); }
.wl-custom {
  border-color: rgba(240,144,48,0.18) !important;
  background: rgba(240,144,48,0.03) !important;
}

.wl-badge {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 2px;
  padding: 2px 6px;
  min-width: 30px;
  text-align: center;
  flex-shrink: 0;
  color: var(--accent);
}
.wl-custom .wl-badge { color: var(--amber); border-color: rgba(240,144,48,0.4); }

.wl-input {
  flex: 1 1 auto;
  font-family: var(--mono);
  font-size: 12px;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  padding: 2px 4px;
  border-radius: 2px;
  min-width: 0;
  font-weight: 400;
}
.wl-input:focus {
  outline: 1px solid var(--accent);
  background: var(--panel2);
  color: var(--ink);
}

.wl-reset-row {
  padding: 2px 6px;
  font-size: 9px;
  color: var(--ink-faint);
  flex-shrink: 0;
  border-color: transparent;
}
.wl-reset-row:hover { color: var(--amber); border-color: rgba(240,144,48,0.35); background: transparent; }

/* ══════════════════════════════════════════════════════════
   SHARED PANEL INTRO TEXT
   ══════════════════════════════════════════════════════════ */
.panel-b > p {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 12px;
}
.panel-b > p b { color: var(--ink); font-weight: 600; }

/* ── Attempt idle intro text ── */
#attempt-idle > p { margin-bottom: 14px; }

/* ── Active timer glow ── */
#attempt-panel .attempt-timer.amber {
  text-shadow: 0 0 40px rgba(240,144,48,0.35), 0 0 80px rgba(240,144,48,0.15);
}
#attempt-panel .attempt-timer.cyan {
  text-shadow: 0 0 40px rgba(0,229,200,0.35), 0 0 80px rgba(0,229,200,0.15);
}

/* ── Attempt panel when active gets extra presence ── */
#attempt-panel:has(#attempt-memo:not([style*="none"])),
#attempt-panel:has(#attempt-exec:not([style*="none"])),
#attempt-panel:has(#attempt-sighted:not([style*="none"])) {
  border-color: rgba(240,144,48,0.4);
  box-shadow: 0 0 0 1px rgba(240,144,48,0.1), 0 4px 32px rgba(240,144,48,0.08);
}

/* ── Inputs global focus ring ── */
input:focus {
  outline: none;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
footer {
  margin-top: 36px;
  font-size: 10.5px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.9;
  letter-spacing: 0.06em;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--disp);
  font-weight: 300;
}