/* =====================================================================
   ANTRENAMENT LICENȚĂ — design system
   Direcție: "blueprint paper meets code editor"
   ===================================================================== */

:root {
  --paper:        #EDF1F7;
  --grid:         rgba(45, 91, 255, 0.055);
  --card:         #FFFFFF;
  --card-2:       #F6F8FC;
  --ink:          #0F1B3D;
  --ink-soft:     #46517A;
  --ink-faint:    #8893B2;
  --line:         #DCE3F0;
  --line-strong:  #C4CEE2;
  --accent:       #2D5BFF;
  --accent-ink:   #1B3FCC;
  --accent-wash:  rgba(45, 91, 255, 0.08);
  --good:         #16794C;
  --good-wash:    rgba(22, 121, 76, 0.10);
  --bad:          #C7382F;
  --bad-wash:     rgba(199, 56, 47, 0.09);
  --amber:        #B4710A;
  --amber-wash:   rgba(180, 113, 10, 0.12);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --shadow:    0 1px 2px rgba(15, 27, 61, 0.04), 0 8px 30px rgba(15, 27, 61, 0.06);
  --shadow-lg: 0 4px 14px rgba(15, 27, 61, 0.08), 0 24px 60px rgba(15, 27, 61, 0.10);

  --maxw: 940px;
}

[data-theme="dark"] {
  --paper:        #0A1020;
  --grid:         rgba(120, 150, 255, 0.05);
  --card:         #121A30;
  --card-2:       #0E1528;
  --ink:          #E8EDFA;
  --ink-soft:     #9BA7C8;
  --ink-faint:    #67749B;
  --line:         #25304F;
  --line-strong:  #34416B;
  --accent:       #5B8CFF;
  --accent-ink:   #A3BCFF;
  --accent-wash:  rgba(91, 140, 255, 0.15);
  --good:         #3CCB8E;
  --good-wash:    rgba(60, 203, 142, 0.14);
  --bad:          #FF6B61;
  --bad-wash:     rgba(255, 107, 97, 0.13);
  --amber:        #E0A23A;
  --amber-wash:   rgba(224, 162, 58, 0.15);

  --shadow:    0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  /* signature: faint graph-paper grid */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

kbd {
  font-family: var(--font-mono);
  font-size: 0.78em;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink-soft);
}

::selection { background: var(--accent-wash); }

/* ============ TOPBAR ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  padding: 4px;
  border-radius: var(--r-sm);
}
.brand__mark {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-sm);
  padding: 7px 9px;
  line-height: 1;
}
.brand__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.brand__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.brand__sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }

.topbar__actions { display: flex; align-items: center; gap: 14px; }
.topbar__hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.topbar__hint kbd { font-size: 10px; }

.iconbtn {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 18px;
  display: grid;
  place-items: center;
  transition: border-color .18s, color .18s, transform .18s;
}
.iconbtn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

.toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 13px 6px 7px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  transition: border-color .18s, color .18s;
}
.toggle:hover { border-color: var(--accent); }
.toggle__track { width: 30px; height: 17px; border-radius: 99px; background: var(--line-strong); position: relative; flex-shrink: 0; transition: background .18s; }
.toggle__thumb { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .18s; }
.toggle.is-on { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.toggle.is-on .toggle__track { background: var(--accent); }
.toggle.is-on .toggle__thumb { transform: translateX(13px); }

/* ============ STAGE / SCREENS ============ */
.stage {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px) 40px;
}
.screen { display: none; }
.screen.is-active { display: block; animation: screen-in .4s ease both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ HERO ============ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
  margin-bottom: 18px;
}
.hero { margin-bottom: 36px; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 6.5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.hero__title-accent { color: var(--accent); }
.hero__lead {
  margin-top: 20px;
  max-width: 60ch;
  font-size: clamp(15px, 2vw, 17px);
  color: var(--ink-soft);
}

/* ============ CĂUTARE ============ */
.search { position: relative; margin-bottom: 30px; }
.search__icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--ink-faint); pointer-events: none; line-height: 1;
}
.search__input {
  width: 100%; box-sizing: border-box;
  padding: 15px 16px 15px 46px;
  font-family: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.search__input::placeholder { color: var(--ink-faint); }
.search__input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow);
}
.search__results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  max-height: min(58vh, 460px); overflow-y: auto; padding: 6px;
}
.sr {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 9px;
  padding: 11px 13px; color: var(--ink); font-family: inherit;
}
.sr + .sr { border-top: 1px solid var(--line); }
.sr:hover, .sr.is-active { background: var(--accent-wash); }
.sr__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.sr__cap {
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700;
  color: var(--accent-ink); letter-spacing: .02em;
}
.sr__src { font-size: 10px; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line-strong); text-transform: uppercase; }
.sr__q { display: block; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.sr__q mark { background: color-mix(in srgb, var(--accent) 26%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.search__none, .search__more { padding: 12px 13px; font-size: 13px; color: var(--ink-faint); }
.search__more { border-top: 1px solid var(--line); }

/* ============ STAT BAR ============ */
.statbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 48px;
}
.stat { background: var(--card); padding: 20px 22px; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat__label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}

/* ============ SECTION HEAD ============ */
.section-head { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; }
.section-head__title { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.section-head__rule { flex: 1; height: 1px; background: var(--line); }

/* ============ MODES ============ */
.modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.mode {
  position: relative;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 22px 20px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.mode:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.mode__code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-faint); }
.mode__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.mode__desc { font-size: 13.5px; color: var(--ink-soft); flex: 1; }
.mode__go { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-top: 6px; transition: transform .18s; }
.mode:hover .mode__go { transform: translateX(4px); }
.mode--exam { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: linear-gradient(180deg, var(--accent-wash), transparent 60%), var(--card); }
.mode--exam .mode__code { color: var(--accent); }
.mode.is-empty { opacity: .5; cursor: not-allowed; }
.mode.is-empty:hover { transform: none; border-color: var(--line); box-shadow: none; }

/* ============ CHAPTERS ============ */
.chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.chap {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.chap:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.chap__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chap__code { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--accent); }
.chap__count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.chap__name { font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; min-height: 2.5em; }
.chap__bar { height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.chap__bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); width: 0; transition: width .6s ease; }
.chap__mastery { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }

/* ============ QUIZ BAR ============ */
.quizbar { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.quizbar__back {
  font-family: var(--font-mono);
  font-size: 12px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s, color .18s;
}
.quizbar__back:hover { border-color: var(--bad); color: var(--bad); }
.progress { flex: 1; height: 7px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .35s ease; }
.quizbar__meta { display: flex; align-items: center; gap: 12px; }
.counter { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.timer { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-wash); padding: 4px 9px; border-radius: var(--r-sm); }
.timer.is-warning { color: var(--bad); background: var(--bad-wash); }

/* ============ CARD / QUESTION ============ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 4vw, 38px);
  box-shadow: var(--shadow);
}
.card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.tag--chapter { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-wash); }
.tag--source { text-transform: uppercase; }
.tag--source[data-src="examen"]    { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-wash); }
.tag--source[data-src="facultate"] { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 38%, transparent); background: var(--amber-wash); }
.tag--source[data-src="grile"]     { color: var(--good); border-color: color-mix(in srgb, var(--good) 32%, transparent); background: var(--good-wash); }

.question {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 3vw, 25px);
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.code {
  margin-top: 20px;
  background: #0C1326;
  color: #D9E1F5;
  border: 1px solid #1B2742;
  border-radius: var(--r);
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
}
.code code { font-family: inherit; }

/* ============ OPTIONS ============ */
.options { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--card-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 15px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .15s, background .15s, transform .12s;
}
.opt:hover:not(:disabled) { border-color: var(--accent); transform: translateX(3px); }
.opt:disabled { cursor: default; }
.opt__letter {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  transition: inherit;
}
.opt__text { padding-top: 3px; }
.opt:hover:not(:disabled) .opt__letter { border-color: var(--accent); color: var(--accent); }

.opt.is-correct { border-color: var(--good); background: var(--good-wash); }
.opt.is-correct .opt__letter { background: var(--good); border-color: var(--good); color: #fff; }
.opt.is-wrong { border-color: var(--bad); background: var(--bad-wash); }
.opt.is-wrong .opt__letter { background: var(--bad); border-color: var(--bad); color: #fff; }
.opt.is-chosen-exam { border-color: var(--accent); background: var(--accent-wash); }
.opt.is-chosen-exam .opt__letter { background: var(--accent); border-color: var(--accent); color: #fff; }
.opt.is-wrong.shake { animation: shake .35s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ============ FEEDBACK ============ */
.feedback {
  margin-top: 22px;
  border-radius: var(--r);
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--card-2);
  animation: fb-in .3s ease both;
}
@keyframes fb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.feedback.is-good { border-color: color-mix(in srgb, var(--good) 35%, transparent); background: var(--good-wash); }
.feedback.is-bad  { border-color: color-mix(in srgb, var(--bad) 35%, transparent);  background: var(--bad-wash); }
.feedback__verdict { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.feedback.is-good .feedback__verdict { color: var(--good); }
.feedback.is-bad  .feedback__verdict { color: var(--bad); }
.feedback__text { font-size: 14.5px; color: var(--ink-soft); }
.feedback__ref { font-size: 12.5px; color: var(--ink-soft); opacity: .85; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-style: italic; }

/* ============ QUIZ FOOT ============ */
.quizfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.quizfoot__note { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

/* ============ BUTTONS ============ */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--r-sm);
  padding: 12px 22px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, opacity .15s;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 22px var(--accent-wash); }
.btn--primary:disabled { opacity: .4; cursor: not-allowed; }
.btn--ghost { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ============ RESULTS ============ */
.result-hero { text-align: center; margin-bottom: 48px; }
.scorering {
  width: 180px; height: 180px;
  margin: 8px auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.scorering__pct { font-family: var(--font-display); font-weight: 700; font-size: 46px; letter-spacing: -0.03em; line-height: 1; }
.scorering__frac { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); margin-top: 6px; }
.result-msg { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 3.5vw, 26px); letter-spacing: -0.01em; }

.breakdown { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.bd-row { display: grid; grid-template-columns: 130px 1fr 56px; align-items: center; gap: 14px; }
.bd-row__name { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.bd-row__track { height: 9px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bd-row__fill { display: block; height: 100%; border-radius: 99px; transition: width .7s ease; }
.bd-row__val { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--ink-soft); }

.result-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 44px; flex-wrap: wrap; }

/* ============ REVIEW ============ */
.review { display: flex; flex-direction: column; gap: 14px; }
.rev {
  background: var(--card);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--r);
  padding: 18px 20px;
}
.rev.is-good { border-left-color: var(--good); }
.rev.is-bad  { border-left-color: var(--bad); }
.rev.is-skip { border-left-color: var(--ink-faint); }
.rev__head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; }
.rev__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.rev__q { font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.35; }
.rev__code { margin: 10px 0; font-size: 12px; }
.rev__ans { font-size: 14px; margin-top: 8px; }
.rev__ans b { font-family: var(--font-mono); font-weight: 700; }
.rev__ans--yours-bad { color: var(--bad); }
.rev__ans--correct { color: var(--good); }
.rev__exp { font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.rev__ref { font-size: 12px; color: var(--ink-soft); opacity: .85; margin-top: 6px; font-style: italic; }

/* ============ SITE FOOT ============ */
.sitefoot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 40px) 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
}
.sitefoot__mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

/* ============ FOCUS / A11Y ============ */
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 760px) {
  .modes, .chapters { grid-template-columns: 1fr; }
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .topbar__hint { display: none; }
  .toggle__label { display: none; }
  .toggle { padding: 6px 8px; }
  .bd-row { grid-template-columns: 90px 1fr 48px; }
  .bd-row__name { font-size: 11px; }
}
@media (max-width: 460px) {
  .statbar { grid-template-columns: 1fr 1fr; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}