/* ============================================================================
   XtraPush · brutalist-athletic rewrite - COMPLETE REPLACEMENT app.css
   Inherits the EXTRA PUSH vocabulary:
     - Palette: void / bone / concrete / volt / blood
     - Fonts: Big Shoulders Display | Archivo | JetBrains Mono | Instrument Serif italic
     - Grain SVG overlay, brutalist asymmetry, mono kickers, volt discipline
   No new deps. WCAG AA. Voseo. No em dashes. Tabular nums. prefers-reduced-motion.
   ============================================================================ */

/* ─── ROOT ─────────────────────────────────────────────────────────────── */
:root {
  --void:       #0A0A0A;
  --void-2:     #111111;
  --concrete:   #1C1C1C;
  --concrete-2: #2A2A2A;
  --bone:       #F4F1EA;
  --bone-dim:   #D6D2C7;
  --mute:       #948E80;
  --line:       #2C2C2C;
  --volt:       #D7FE3C;
  --volt-deep:  #BBE82B;
  --blood:      #FF3B1F;

  --font-display: "Big Shoulders Display", "Bebas Neue", Impact, system-ui, sans-serif;
  --font-body:    "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-italic:  "Instrument Serif", Georgia, serif;

  --r: 0px;                /* brutalist: hard corners everywhere */
  --tap: 56px;
  --ease:      cubic-bezier(.2, .8, .2, 1);
  --ease-snap: cubic-bezier(.6, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
*::selection { background: var(--volt); color: var(--void); }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--bone);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  line-height: 1.5;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input  { font-family: inherit; color: inherit; }
a      { color: inherit; text-decoration: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(215, 254, 60, .22);
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ─── GRAIN ────────────────────────────────────────────────────────────── */
.xp-grain {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 60; opacity: .07; mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* ─── REG MARK ─────────────────────────────────────────────────────────── */
.xp-reg-mark {
  position: fixed; top: 14px; right: 22px; z-index: 55;
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-dim);
  pointer-events: none;
}
.xp-reg-mark__lead, .xp-reg-mark__year { color: var(--mute); }
.xp-reg-mark__sep  { color: var(--line); }
.xp-reg-mark__code { color: var(--bone); font-weight: 500; }
.xp-reg-mark__dot {
  width: 7px; height: 7px; background: var(--mute);
  border-radius: 50%; margin-left: 4px;
}
.xp-reg-mark.is-live .xp-reg-mark__dot {
  background: var(--volt);
  animation: xp-pulse 1.4s var(--ease) infinite;
}
@keyframes xp-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(.45); opacity: .55; }
}

/* ─── SHELL ────────────────────────────────────────────────────────────── */
.app.xp-shell {
  width: 100%; max-width: 560px; margin: 0 auto;
  height: 100dvh; height: var(--app-h, 100dvh);
  background: var(--void); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  border-left:  1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* ─── TOP BAR ──────────────────────────────────────────────────────────── */
.bar.xp-topbar {
  min-height: 60px; flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 12px; align-items: center;
  padding: env(safe-area-inset-top) 18px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(10,10,10,.78);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  position: sticky; top: 0; z-index: 20;
}
.xp-back {
  width: 44px; height: 44px; margin-left: -8px;
  display: none; align-items: center; justify-content: center;
  color: var(--bone); font-size: 22px; font-family: var(--font-mono);
}
.xp-back.show { display: flex; }
.xp-back:active { background: var(--concrete); }

.xp-mark {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--volt); color: var(--void);
  font-family: var(--font-display); font-weight: 900;
  font-size: 15px; letter-spacing: 0;
  border: 1.5px solid var(--void);
  box-shadow: 2px 2px 0 var(--bone);
}
.xp-name {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone);
}
.xp-name em {
  font-family: var(--font-italic); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  color: var(--mute); margin-left: 6px;
}
.xp-date {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .12em; color: var(--bone-dim);
  font-variant-numeric: tabular-nums;
}
.xp-step {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--volt);
}

/* ─── SPINE (desktop only) ─────────────────────────────────────────────── */
.xp-spine {
  display: none;
  position: absolute; top: 60px; bottom: 0; left: 6px;
  width: 18px; padding: 18px 0;
  flex-direction: column; align-items: center; justify-content: space-between;
  pointer-events: none; z-index: 4;
}
.xp-spine__text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--mute);
}
.xp-spine__ticks {
  width: 2px; height: 28px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 2px, transparent 2px 6px);
}
@media (min-width: 981px) { .xp-spine { display: flex; } }

/* ─── VIEW SYSTEM ──────────────────────────────────────────────────────── */
.view, .xp-view {
  flex: 1 1 auto; display: none; flex-direction: column; min-height: 0;
}
.view.active {
  display: flex;
  animation: xp-flip-in 220ms var(--ease);
}
.view.is-leaving { animation: xp-flip-out 180ms var(--ease) forwards; }
@keyframes xp-flip-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}
@keyframes xp-flip-out {
  0%   { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-8px); }
}

.pad.xp-pad { padding: 22px 20px 28px; }
.grow, .scrollbody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.muted  { color: var(--mute); }

/* ─── KICKER ───────────────────────────────────────────────────────────── */
.xp-kicker {
  display: flex; gap: 6px; align-items: baseline;
  padding: 18px 22px 0;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--volt);
}
.xp-kicker__num   { font-weight: 700; }
.xp-kicker__slash { color: var(--mute); }
.xp-kicker__word  { color: var(--bone); }
.xp-kicker--inverse { color: var(--bone); }
.xp-kicker--inverse .xp-kicker__word { color: var(--volt); }

/* ─── DISPLAY TYPOGRAPHY ───────────────────────────────────────────────── */
.xp-display {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 11vw, 80px); line-height: .92;
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--bone); margin: 12px 0 8px;
  overflow-wrap: anywhere;
}
.xp-display__em {
  font-family: var(--font-italic); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: -.01em; color: var(--volt);
  margin-left: 6px;
}
.xp-editorial {
  font-family: var(--font-body); font-size: 15px; color: var(--bone-dim);
  margin-top: 14px;
}
.xp-editorial em {
  font-family: var(--font-italic); font-style: italic; font-size: 22px;
  color: var(--volt); margin-right: 6px;
}

/* ─── BUTTONS ──────────────────────────────────────────────────────────── */
.btn.xp-btn {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; min-height: var(--tap);
  padding: 0 18px;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1.5px solid var(--bone); color: var(--bone);
  background: transparent;
  transition: transform .12s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn.xp-btn:active { transform: translateY(1px); }
.btn.xp-btn .xp-btn__lbl { text-align: left; }
.btn.xp-btn .xp-btn__icon {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  letter-spacing: 0;
}

.btn.xp-btn--volt {
  background: var(--volt); color: var(--void);
  border-color: var(--volt);
  box-shadow: 4px 4px 0 var(--bone);
}
.btn.xp-btn--volt:hover { background: var(--volt-deep); border-color: var(--volt-deep); box-shadow: 2px 2px 0 var(--bone); transform: translate(2px, 2px); }
.btn.xp-btn--volt:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--bone); }

.btn.xp-btn--ghost { background: transparent; color: var(--bone); border-color: var(--line); }
.btn.xp-btn--ghost:hover { border-color: var(--volt); color: var(--volt); }

.btn.xp-btn--ghost-light { background: rgba(244,241,234,.06); color: var(--bone); border-color: rgba(244,241,234,.45); }
.btn.xp-btn--ghost-light:hover { background: var(--volt); color: var(--void); border-color: var(--volt); }

.btn.xp-btn--xl { min-height: 72px; padding: 0 22px; font-size: 14px; letter-spacing: .16em; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-row.xp-btn-row { display: flex; gap: 10px; margin-bottom: 12px; }
.btn-row.xp-btn-row .btn { width: auto; flex: 1; }

.linkish.xp-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--bone-dim); font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1.5px solid transparent; padding-bottom: 2px;
}
.linkish.xp-link:hover { color: var(--volt); border-bottom-color: var(--volt); }
.linkish.xp-link--danger { color: var(--blood); }
.linkish.xp-link--danger:hover { color: var(--blood); border-bottom-color: var(--blood); }
.linkish.xp-link--ghost  { margin: 18px auto 0; }
.linkish.xp-link--muted  { color: var(--mute); }
.xp-link.finish-machine { margin: 8px auto 0; display: flex; }

/* ─── FOOT ─────────────────────────────────────────────────────────────── */
.foot.xp-foot {
  flex: 0 0 auto;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--void-2);
  position: sticky; bottom: 0; z-index: 10;
  display: flex; flex-direction: column; gap: 10px;
}
.xp-foot--split { gap: 8px; }
.xp-foot--scan { background: transparent; border-top: 0; }

.foot-brand.xp-foot-brand {
  flex: 0 0 auto; text-align: center; padding: 12px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
  border-top: 1px solid var(--line);
}
.foot-brand.xp-foot-brand b { color: var(--volt); }
.app[data-view="set"]     .xp-foot-brand,
.app[data-view="machine"] .xp-foot-brand,
.app[data-view="summary"] .xp-foot-brand,
.app[data-view="edit"]    .xp-foot-brand,
.app[data-view="history"] .xp-foot-brand,
.app[data-view="scan"]    .xp-foot-brand { display: none; }

/* ─── 01 / SCAN ────────────────────────────────────────────────────────── */
.xp-view--scan { background: var(--void); color: var(--bone); }
.scan-stage {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: stretch; padding: 14px 18px 6px; gap: 18px;
}
.scanwrap.xp-scanwrap {
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.xp-reader {
  width: 100%; max-width: 460px; aspect-ratio: 3 / 4;
  border: 1.5px solid var(--line); background: #000;
  overflow: hidden;
}
.xp-reader video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.scan-frame.xp-reticle { position: absolute; inset: 0; pointer-events: none; }
.xp-reticle__ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60%; max-width: 260px; aspect-ratio: 1;
  box-shadow: 0 0 0 2px var(--volt), 0 0 0 9999px rgba(10,10,10,.55);
}
.xp-reticle__corner {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--volt);
}
.xp-reticle__corner--tl { top: 8%;    left: 8%;    border-right: 0; border-bottom: 0; }
.xp-reticle__corner--tr { top: 8%;    right: 8%;   border-left: 0;  border-bottom: 0; }
.xp-reticle__corner--bl { bottom: 8%; left: 8%;    border-right: 0; border-top: 0;    }
.xp-reticle__corner--br { bottom: 8%; right: 8%;   border-left: 0;  border-top: 0;    }

.scan-editorial.xp-editorial { padding: 0 6px; }

/* ─── 02 / MACHINE ─────────────────────────────────────────────────────── */
.machine-hero.xp-machine-hero {
  display: grid; gap: 6px;
  padding: 22px 20px; border: 1px solid var(--line);
  background: var(--void-2); margin: 8px 0 14px;
}
.xp-machine-hero__grp {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--volt);
}
.xp-machine-hero__name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 9vw, 64px); line-height: .92;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--bone);
  overflow-wrap: anywhere; margin-top: 2px;
}
.xp-machine-hero__editorial {
  font-family: var(--font-italic); font-style: italic; font-size: 18px;
  color: var(--mute); margin-top: 4px;
}
.xp-machine-hero__lede.sub {
  color: var(--bone-dim); font-size: 14px; margin-top: 10px; text-align: center;
}

.stepper.xp-stepper {
  margin: 28px auto 8px; display: grid;
  grid-template-columns: 76px 1fr 76px; gap: 0;
  border: 1px solid var(--line); max-width: 360px;
}
.xp-stepper__btn {
  height: 96px; background: var(--concrete); color: var(--bone);
  font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.xp-stepper__btn--up { border-right: 0; border-left: 1px solid var(--line); }
.xp-stepper__btn:hover  { background: var(--volt); color: var(--void); }
.xp-stepper__btn:active { transform: translateY(1px); }
.xp-stepper__val {
  display: grid; place-items: center; padding: 12px 8px;
  background: var(--void-2);
}
.xp-stepper__valkick {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
}
.xp-stepper__n {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(56px, 14vw, 84px); line-height: .92;
  color: var(--bone); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.xp-stepper__u {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--volt);
}
.lastnote.xp-lastnote {
  text-align: center; color: var(--mute); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  margin-top: 14px; min-height: 18px;
}

/* ─── 03 / SET ─────────────────────────────────────────────────────────── */
.setmeta.xp-set-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 8px;
}
.xp-set-meta__machine {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone-dim);
  overflow-wrap: anywhere;
}
.weight-chip.xp-weight-chip {
  display: inline-flex; gap: 6px; align-items: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--void);
  background: var(--volt); border: 1.5px solid var(--void);
  box-shadow: 2px 2px 0 var(--bone);
  padding: 7px 12px; font-variant-numeric: tabular-nums;
}

/* mode tabs (brutalist) */
.mode-toggle.xp-mode-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--bone); margin: 18px 0 6px;
  background: transparent; padding: 0; border-radius: 0;
}
.xp-mode-tab {
  display: flex; gap: 8px; align-items: baseline; justify-content: flex-start;
  padding: 14px 16px; min-height: 56px;
  background: transparent; color: var(--bone);
  border-right: 1.5px solid var(--bone);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; text-align: left; border-radius: 0;
  box-shadow: none;
}
.xp-mode-tab:last-child { border-right: 0; }
.xp-mode-tab__num   { font-size: 10px; color: var(--mute); }
.xp-mode-tab__label {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: -.01em; text-transform: uppercase;
}
.xp-mode-tab.is-active, .xp-mode-tab.on {
  background: var(--volt); color: var(--void);
}
.xp-mode-tab.is-active .xp-mode-tab__num { color: rgba(10,10,10,.6); }

/* scoreboard layout */
.xp-scoreboard {
  display: grid; grid-template-columns: 1fr 180px;
  gap: 18px; align-items: end;
  padding: 18px 0 12px; border-bottom: 1px solid var(--line);
  margin-top: 14px;
}
.counter.xp-rep-stage { text-align: left; padding: 0; }
.big.xp-rep-numeral {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(180px, 38vw, 280px); line-height: .82;
  letter-spacing: -.03em; color: var(--bone);
  font-variant-numeric: tabular-nums;
  transition: text-shadow .24s var(--ease), color .24s var(--ease);
  will-change: text-shadow;
}
.xp-rep-spark {
  position: absolute; top: -6px; right: -14px;
  width: 16px; height: 16px; background: var(--volt);
  opacity: 0; pointer-events: none;
  box-shadow: 2px 2px 0 var(--bone);
}
.big.xp-rep-numeral.is-pulsing {
  animation: xp-rep-pulse 220ms var(--ease-snap);
  text-shadow: 0 0 48px rgba(215, 254, 60, .45);
}
.big.xp-rep-numeral.is-pulsing .xp-rep-spark {
  animation: xp-rep-spark 240ms var(--ease-snap);
}
.big.xp-rep-numeral.bump { /* legacy ±10 spike: kept for app.js compat */
  animation: xp-rep-bump 200ms var(--ease);
}
@keyframes xp-rep-pulse {
  0%   { transform: scale(1);    text-shadow: 0 0 0 transparent; }
  35%  { transform: scale(1.02); text-shadow: 0 0 48px rgba(215,254,60,.55); }
  100% { transform: scale(1);    text-shadow: 0 0 0 transparent; }
}
@keyframes xp-rep-spark {
  0%   { opacity: 0; transform: translate(0,0)    scale(.4); }
  35%  { opacity: 1; transform: translate(6px,-6px) scale(1); }
  100% { opacity: 0; transform: translate(22px,-22px) scale(.5); }
}
@keyframes xp-rep-bump {
  0%   { transform: scale(1); color: var(--bone); }
  45%  { transform: scale(1.06); color: var(--volt); }
  100% { transform: scale(1); color: var(--bone); }
}
.lbl.xp-rep-numeral__lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute); margin-top: 6px;
}
.xp-rep-whisper {
  font-family: var(--font-italic); font-style: italic; font-size: 20px;
  color: var(--bone-dim); margin-top: 2px;
}
.xp-rep-whisper em { color: var(--volt); }

/* set board (replaces dots) */
.xp-set-board {
  display: grid; gap: 8px;
  border-left: 1px solid var(--line); padding-left: 16px;
  align-self: end;
}
.xp-set-board__kick {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
}
.xp-set-board__count {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 7vw, 56px); line-height: .92;
  color: var(--bone); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.xp-set-board__divider { color: var(--mute); margin: 0 4px; font-weight: 700; }
.dots.xp-set-board__bar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 3px; padding: 3px;
  border: 1px solid var(--line); height: 14px;
  background: var(--void-2);
}
.xp-set-board__seg { background: var(--concrete); }
.xp-set-board__seg.is-done { background: var(--volt); }
.xp-set-board__seg.is-now {
  background: var(--void);
  box-shadow: inset 0 0 0 2px var(--volt);
}
/* legacy dots passthrough so app.js's existing dot loop still styles */
.dots.xp-set-board__bar .d {
  background: var(--concrete);
}
.dots.xp-set-board__bar .d.done { background: var(--volt); }
.dots.xp-set-board__bar .d.now  { background: var(--void); box-shadow: inset 0 0 0 2px var(--volt); }

/* tap zone */
.reps-pane.xp-reps-pane { display: flex; flex-direction: column; }
.rep-actions.xp-rep-actions { display: flex; margin-top: 16px; }
.tapzone.xp-tapzone {
  flex: 1 1 auto; width: 100%; min-height: 132px;
  background: var(--void-2); border: 1.5px dashed var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.xp-tapzone__cap {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
}
.xp-tapzone__plus {
  font-family: var(--font-display); font-weight: 900; font-size: 44px;
  letter-spacing: -.01em; color: var(--bone);
}
.tapzone.xp-tapzone:hover  { border-color: var(--volt); }
.tapzone.xp-tapzone:active {
  background: rgba(215,254,60,.06); border-color: var(--volt);
}
.tapzone.xp-tapzone:active .xp-tapzone__plus { color: var(--volt); }

/* rep strip (−10 / input / +10) */
.rep-input-row.xp-rep-strip {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr;
  gap: 0; border: 1px solid var(--line); margin-top: 16px;
  background: var(--void-2);
}
.xp-rep-strip__cell {
  min-height: 64px; padding: 10px 8px;
  background: var(--concrete);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border-right: 1px solid var(--line);
  font-family: inherit; color: var(--bone);
  transition: background .12s var(--ease);
}
.xp-rep-strip__cell:last-child { border-right: 0; }
.xp-rep-strip__cell:active { background: var(--concrete-2); transform: translateY(1px); }
.xp-rep-strip__cap {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
}
.xp-rep-strip__face {
  font-family: var(--font-display); font-weight: 900; font-size: 28px;
  line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums;
}
.xp-rep-strip__cell--plus .xp-rep-strip__face { color: var(--volt); }
.xp-rep-strip__cell--plus { box-shadow: inset 0 -2px 0 var(--volt); }
.xp-rep-strip__cell--input { position: relative; padding: 6px 8px; }
.rep-input.xp-rep-strip__input {
  width: 100%; min-height: 36px;
  background: transparent; border: 0; color: var(--bone);
  font-family: var(--font-display); font-weight: 900; font-size: 36px;
  line-height: 1; text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield; outline: 0;
}
.rep-input.xp-rep-strip__input::-webkit-outer-spin-button,
.rep-input.xp-rep-strip__input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.xp-rep-strip__cell--input:focus-within {
  box-shadow: inset 0 -2px 0 var(--volt), 0 0 0 2px rgba(215,254,60,.18);
}

/* rep undo */
.rep-undo-row.xp-rep-undo-row {
  display: flex; justify-content: center; margin-top: 18px;
}
.rep-undo.xp-rep-undo {
  min-height: 44px; padding: 10px 16px;
  background: transparent; color: var(--bone-dim);
  border: 1.5px dashed var(--line);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.rep-undo.xp-rep-undo:hover {
  color: var(--volt); border-color: var(--volt);
}

/* session log strip */
.xp-session-log {
  margin-top: 28px; border-top: 1px solid var(--line); padding-top: 14px;
}
.xp-session-log__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.xp-session-log__kick {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--volt);
}
.xp-session-log__count {
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
.xp-session-log__list {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 0;
  max-height: 168px; overflow-y: auto;
}
.xp-session-log__list li {
  display: grid; grid-template-columns: 38px 1fr auto;
  gap: 10px; align-items: baseline; padding: 8px 0;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.xp-session-log__list li:first-child { border-top: 0; }
.xp-session-log__list li .xp-log__idx {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute);
}
.xp-session-log__list li .xp-log__main {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--bone);
  letter-spacing: .04em;
}
.xp-session-log__list li .xp-log__main b {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  margin-right: 2px;
}
.xp-session-log__list li .xp-log__ago {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute);
}
.xp-session-log__list li.is-current { background: rgba(215,254,60,.04); }
.xp-session-log__list li.is-current .xp-log__main { color: var(--volt); }
.xp-session-log__list li.is-current em {
  font-family: var(--font-italic); font-style: italic; color: var(--volt);
}

/* timer */
.xp-timer-pane { display: grid; gap: 18px; padding-top: 18px; }
.counter.timer.xp-timer-stage { text-align: left; }
.big.xp-timer-numeral {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(140px, 32vw, 220px); line-height: .82;
  letter-spacing: -.02em; color: var(--volt);
  font-variant-numeric: tabular-nums;
}
.xp-timer-numeral__lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute); margin-top: 6px;
}
.counter.timer.xp-timer-stage.done .big {
  color: var(--void); background: var(--volt); padding: 0 6px;
  animation: xp-restflash .5s steps(1,end) 3;
}
@keyframes xp-restflash {
  0%, 100% { background: var(--volt); }
  50%      { background: var(--volt-deep); }
}
.timer-controls.xp-timer-controls {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px;
}

/* ─── 04 / SUMMARY ─────────────────────────────────────────────────────── */
.session-head.xp-summary-head {
  display: grid; gap: 4px; margin-bottom: 14px;
}
.xp-summary-head__date {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute);
}

.totals.xp-totals {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--line); margin: 12px 0 22px;
  background: var(--void-2);
}
.tot.xp-totals__cell {
  display: grid; gap: 6px; padding: 14px;
  border-right: 1px solid var(--line);
}
.tot.xp-totals__cell:last-child { border-right: 0; }
.l.xp-totals__lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
}
.n.xp-totals__n {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 8vw, 52px); line-height: .92;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
.n.xp-totals__n--accent { color: var(--volt); }

.xp-entries { display: grid; gap: 0; margin-top: 8px; }
.entry.xp-entry {
  background: var(--void-2); border: 1px solid var(--line);
  padding: 16px; margin-bottom: -1px;
}
.entry.xp-entry .eh {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.entry.xp-entry .grp {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--volt);
}
.entry.xp-entry .en {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--bone); overflow-wrap: anywhere; margin-top: 2px;
}
.entry.xp-entry .editbtn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-dim);
  border-bottom: 1.5px solid var(--volt);
  min-height: 44px; padding: 0 6px;
}
.entry.xp-entry .editbtn:hover { color: var(--volt); }
.entry.xp-entry .sets {
  margin-top: 12px; display: grid; gap: 0;
  border-top: 1px solid var(--line); padding-top: 6px;
}
.entry.xp-entry .set {
  display: grid; grid-template-columns: 60px 1fr;
  gap: 10px; align-items: baseline;
  padding: 8px 0; border-top: 1px dashed var(--line);
  font-variant-numeric: tabular-nums;
}
.entry.xp-entry .set:first-child { border-top: 0; }
.entry.xp-entry .sn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute);
}
.entry.xp-entry .rk {
  font-family: var(--font-mono); font-size: 13px; color: var(--bone);
}

.empty.xp-empty {
  display: grid; justify-items: center; gap: 8px;
  padding: 48px 20px; border: 1.5px dashed var(--line);
  background: rgba(28,28,28,.25); margin-top: 12px;
}
.xp-empty__big {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 11vw, 68px); line-height: .9;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--bone);
  text-align: center;
}
.xp-empty__sub {
  font-family: var(--font-italic); font-style: italic; font-size: 22px;
  color: var(--volt);
}
.xp-empty__hint {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute); margin-top: 6px;
}

/* ─── 05 / EDIT ────────────────────────────────────────────────────────── */
.xp-edit-head { display: grid; gap: 6px; margin-bottom: 14px; }
.xp-edit-head__kick {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--volt);
}
.xp-edit-head__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 8vw, 52px); line-height: .92;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--bone);
  overflow-wrap: anywhere;
}
.xp-edit-head__lede.sub { color: var(--bone-dim); font-size: 14px; margin-top: 4px; }
.xp-edit-cols {
  display: grid; grid-template-columns: 50px 1fr 1fr 44px;
  gap: 10px; padding: 0 4px 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
  border-bottom: 1px solid var(--line);
}
.xp-edit-rows { display: grid; gap: 0; }
.editrow {
  display: grid; grid-template-columns: 50px 1fr 1fr 44px;
  gap: 10px; align-items: center; padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.editrow input {
  width: 100%; min-height: 48px;
  background: var(--void-2); color: var(--bone);
  border: 1px solid var(--line);
  padding: 0 12px; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.editrow input:focus { outline: 0; border-color: var(--volt); box-shadow: inset 0 0 0 1px var(--volt); }
.editrow .rm { color: var(--blood); font-size: 22px; min-height: 44px; font-family: var(--font-mono); }
.editrow .lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute);
}
.xp-edit-add { margin-top: 8px; }

/* ─── 06 / HISTORY ─────────────────────────────────────────────────────── */
.xp-view--history { background: var(--void); }
.xp-demo-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; background: var(--volt); color: var(--void);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; border-bottom: 2px solid var(--void);
}
.xp-demo-banner__tick { font-family: var(--font-display); font-weight: 900; font-size: 16px; }
.xp-demo-banner__count { color: rgba(10,10,10,.65); }
.xp-demo-banner__exit {
  margin-left: auto; padding: 6px 12px;
  background: var(--void); color: var(--volt);
  font: inherit; border: 1.5px solid var(--void);
}
.xp-demo-banner__exit:hover { background: var(--bone); color: var(--void); }

.xp-history-head { display: grid; gap: 10px; margin-bottom: 18px; }
.xp-history-head__lede {
  font-family: var(--font-body); font-size: 14px; color: var(--bone-dim);
  max-width: 38ch;
}

.xp-mode-tabs--history { margin: 4px 0 18px; }

.xp-hist-scoreboard {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--line); margin-bottom: 18px; background: var(--void-2);
}
.xp-hist-score {
  padding: 12px 14px; border-right: 1px solid var(--line);
  display: grid; gap: 4px;
}
.xp-hist-score:last-child { border-right: 0; }
.xp-hist-score__lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
}
.xp-hist-score__val {
  font-family: var(--font-display); font-weight: 900; font-size: 28px;
  line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums;
}
.xp-hist-score__val small {
  font-family: var(--font-mono); font-size: 10px; color: var(--mute);
  font-weight: 500; margin-left: 4px; letter-spacing: .12em;
}
.xp-hist-score__val--accent { color: var(--volt); font-size: 18px; line-height: 1.2; }

/* MODE A: session ledger */
.xp-hist-ledger { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.xp-session-card {
  background: var(--void-2); border: 1px solid var(--line);
  margin-bottom: -1px; transition: border-color .2s var(--ease);
}
.xp-session-card.is-open { border-color: var(--bone); position: relative; z-index: 2; }
.xp-session-card[data-demo="1"] { position: relative; }
.xp-session-card[data-demo="1"]::after {
  content: "DEMO";
  position: absolute; top: 8px; left: 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em;
  color: var(--mute); border: 1px solid var(--line); padding: 1px 5px;
}
.xp-session-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px; align-items: start;
  width: 100%; padding: 18px 16px; background: transparent;
  text-align: left; color: var(--bone);
}
.xp-session-card__date {
  display: grid; gap: 2px; min-width: 84px;
  padding-top: 14px;
}
.xp-session-card__day {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(56px, 12vw, 84px); line-height: .82;
  letter-spacing: -.04em; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.xp-session-card__wd {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
}
.xp-session-card__summary { display: grid; gap: 10px; align-self: center; }
.xp-session-card__machines {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  line-height: 1.15; text-transform: uppercase; color: var(--bone-dim);
  letter-spacing: -.005em;
  overflow-wrap: anywhere; word-break: break-word;
}
.xp-session-card__totals {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mute);
}
.xp-session-card__totals b {
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  color: var(--bone); margin-right: 2px; font-variant-numeric: tabular-nums;
}
.xp-session-card__totals small {
  color: var(--mute); font-family: var(--font-mono); font-size: 10px;
  margin-left: 2px; text-transform: lowercase;
}
.xp-session-card__time { color: var(--bone-dim); }
.xp-session-card__vol {
  font-family: var(--font-display); font-weight: 900; font-size: 24px;
  color: var(--volt); font-variant-numeric: tabular-nums; align-self: end;
}
.xp-session-card__vol small {
  font-family: var(--font-mono); font-size: 10px; color: var(--mute);
  margin-left: 2px; text-transform: lowercase;
}
.xp-session-card__chevron {
  align-self: center; color: var(--mute);
  font-family: var(--font-mono); font-size: 18px;
  transition: transform .25s var(--ease), color .2s var(--ease);
}
.xp-session-card.is-open .xp-session-card__chevron {
  transform: rotate(180deg); color: var(--volt);
}
.xp-session-card__body {
  padding: 0 16px 16px; display: none;
  border-top: 1px solid var(--line);
}
.xp-session-card.is-open .xp-session-card__body { display: grid; gap: 14px; }

.xp-hist-machine {
  padding: 10px 0 4px; border-bottom: 1px solid var(--line);
}
.xp-hist-machine:last-child { border-bottom: 0; }
.xp-hist-machine__head {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 10px; align-items: baseline; margin-bottom: 6px;
}
.xp-hist-machine__grp {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
}
.xp-hist-machine__name {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--bone);
  margin: 0;
}
.xp-hist-machine__top {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--bone-dim);
}
.xp-hist-machine__top b { color: var(--volt); font-weight: 600; }

.xp-hist-sets { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.xp-hist-set {
  display: grid; grid-template-columns: 36px 1.2fr 1fr .8fr 1fr;
  gap: 8px; align-items: baseline; padding: 6px 0;
  border-top: 1px dashed var(--line);
  font-variant-numeric: tabular-nums;
}
.xp-hist-set:first-child { border-top: 0; }
.xp-hist-set__n {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--mute);
}
.xp-hist-set__load {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  color: var(--bone); letter-spacing: -.005em;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.xp-hist-set__rxs {
  font-family: var(--font-mono); font-size: 12px; color: var(--bone-dim);
}
.xp-hist-set__rxs b { color: var(--bone); font-weight: 700; }
.xp-hist-set__rpe {
  font-family: var(--font-mono); font-size: 11px; color: var(--mute);
  letter-spacing: .06em;
}
.xp-hist-set__delta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); text-align: right;
}
.xp-hist-set__delta--up   { color: var(--volt); }
.xp-hist-set__delta--flat { color: var(--bone-dim); }
.xp-hist-set__delta--down { color: var(--blood); }

/* PR badge */
.xp-pr-badge {
  display: inline-grid; place-items: center;
  padding: 2px 6px; background: var(--volt); color: var(--void);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1.5px solid var(--void);
  box-shadow: 2px 2px 0 var(--bone);
}

/* MODE B: machine timeline */
.xp-hist-machine-view { display: grid; gap: 14px; }
.xp-hist-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-hist-pill {
  padding: 8px 12px; background: transparent; color: var(--bone-dim);
  border: 1.5px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; min-height: 44px;
}
.xp-hist-pill small {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  border: 1px solid var(--line); color: var(--mute); font-size: 9.5px;
}
.xp-hist-pill.is-active {
  background: var(--volt); color: var(--void); border-color: var(--volt);
}
.xp-hist-pill.is-active small { border-color: rgba(10,10,10,.45); color: rgba(10,10,10,.7); }

.xp-hist-timeline__head {
  display: grid; grid-template-columns: .9fr 1.1fr 1.1fr .6fr 1.1fr;
  gap: 10px; padding: 0 4px 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
}
.xp-hist-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.xp-hist-row {
  display: grid; grid-template-columns: .9fr 1.1fr 1.1fr .6fr 1.1fr;
  gap: 10px; align-items: baseline; padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  transition: background .15s var(--ease);
}
.xp-hist-row:hover { background: rgba(28,28,28,.5); }
.xp-hist-row__date { display: flex; gap: 6px; align-items: baseline; font-variant-numeric: tabular-nums; }
.xp-hist-row__date b {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  letter-spacing: -.01em; color: var(--bone);
}
.xp-hist-row__date small {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--mute); text-transform: uppercase;
}
.xp-hist-row__load {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  color: var(--bone); display: flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.xp-hist-row__rxs {
  font-family: var(--font-mono); font-size: 13px; color: var(--bone-dim);
  font-variant-numeric: tabular-nums;
}
.xp-hist-row__rxs b { color: var(--bone); font-weight: 700; }
.xp-hist-row__rpe {
  font-family: var(--font-mono); font-size: 12px; color: var(--bone-dim);
  letter-spacing: .06em;
}
.xp-hist-row__rpe--high { color: var(--volt); }
.xp-hist-row__delta {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); text-align: right;
}
.xp-hist-row__delta--up   { color: var(--volt); }
.xp-hist-row__delta--flat { color: var(--bone-dim); }
.xp-hist-row__delta--down { color: var(--blood); }
.xp-hist-row__delta em {
  font-family: var(--font-italic); font-style: italic; font-size: 13px;
  letter-spacing: 0; text-transform: none; color: var(--mute); margin-left: 4px;
}

/* History empty */
.xp-hist-empty {
  display: grid; justify-items: center; gap: 12px;
  padding: 48px 24px; margin-top: 12px;
  border: 1.5px dashed var(--line); background: rgba(28,28,28,.25);
}
.xp-hist-empty__big {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(48px, 12vw, 84px); line-height: .9;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--bone);
  text-align: center;
}
.xp-hist-empty__sub {
  font-family: var(--font-italic); font-style: italic;
  font-size: clamp(18px, 4vw, 24px); color: var(--volt);
}
.xp-hist-empty__load {
  margin-top: 6px; padding: 12px 16px;
  background: transparent; color: var(--bone);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; border: 1.5px solid var(--bone);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.xp-hist-empty__load:hover {
  background: var(--volt); color: var(--void); border-color: var(--volt);
}

/* ─── MARQUEE ──────────────────────────────────────────────────────────── */
.xp-marquee {
  margin: 28px -20px 0; padding: 14px 0;
  border-top: 1.5px solid var(--bone); border-bottom: 1.5px solid var(--bone);
  background: var(--void-2); overflow: hidden;
}
.xp-marquee__track {
  display: flex; gap: 0; width: max-content;
  animation: xp-marquee 38s linear infinite;
  animation-play-state: paused;
}
.xp-marquee.is-running .xp-marquee__track { animation-play-state: running; }
.xp-marquee__group {
  display: flex; align-items: center; gap: 26px; padding-right: 26px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 6vw, 32px); text-transform: uppercase;
  letter-spacing: -.005em; color: var(--bone); white-space: nowrap;
}
.xp-marquee__group b { color: var(--volt); font-weight: 900; font-size: .9em; }
@keyframes xp-marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* ─── TOAST ────────────────────────────────────────────────────────────── */
.toast.xp-toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--volt); color: var(--void);
  padding: 12px 18px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  border: 2px solid var(--void); box-shadow: 4px 4px 0 var(--bone);
  opacity: 0; transition: all .3s var(--ease);
  z-index: 70; pointer-events: none;
}
.toast.xp-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ─── SHEET ────────────────────────────────────────────────────────────── */
.sheet-bg.xp-sheet-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 40;
}
.sheet-bg.xp-sheet-bg.show { opacity: 1; pointer-events: auto; }
.sheet.xp-sheet {
  position: fixed; left: 50%; bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%; max-width: 560px;
  background: var(--void-2); color: var(--bone);
  border-top: 1.5px solid var(--volt);
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  z-index: 41; max-height: 80dvh; overflow: auto;
  visibility: hidden; pointer-events: none;
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.sheet.xp-sheet.show {
  transform: translate(-50%, 0); visibility: visible; pointer-events: auto;
  transition: transform .3s var(--ease), visibility 0s linear 0s;
}
.sheet-head.xp-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; position: sticky; top: 0; background: var(--void-2);
  padding: 6px 0 8px; border-bottom: 1px solid var(--line);
}
.xp-sheet__title {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  letter-spacing: -.01em; text-transform: uppercase; color: var(--bone);
}
.xp-sheet__close {
  min-height: 44px; padding: 0 14px;
  background: transparent; color: var(--bone-dim);
  border: 1.5px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
}
.xp-sheet__close:hover { color: var(--volt); border-color: var(--volt); }
.xp-sheet__list .m {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 64px; padding: 12px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left; width: 100%;
  background: transparent; color: var(--bone);
  font-family: inherit;
}
.xp-sheet__list .m:hover { background: rgba(215,254,60,.04); }
.xp-sheet__list .m .mn {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  letter-spacing: -.01em; text-transform: uppercase;
}
.xp-sheet__list .m .mg {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--volt);
}

/* ─── RESPONSIVE: ≤980px ───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .xp-spine, .xp-reg-mark { display: none; }
}

/* ─── RESPONSIVE: ≤560px ───────────────────────────────────────────────── */
@media (max-width: 560px) {
  .bar.xp-topbar { grid-template-columns: auto auto 1fr auto; }
  .xp-step { display: none; }

  .xp-scoreboard {
    grid-template-columns: 1fr; gap: 6px;
    border-bottom: 1px solid var(--line);
  }
  .xp-set-board {
    display: flex; align-items: center; gap: 12px;
    border-left: 0; border-top: 1px solid var(--line);
    padding: 10px 0 0;
  }
  .xp-set-board__count { font-size: clamp(28px, 7vw, 40px); }
  .dots.xp-set-board__bar { flex: 1 1 auto; }

  .big.xp-rep-numeral { font-size: clamp(180px, 50vw, 240px); }

  .xp-hist-scoreboard { grid-template-columns: 1fr 1fr; }
  .xp-hist-score:nth-child(3) {
    grid-column: 1 / -1; border-top: 1px solid var(--line); border-right: 0;
  }
  .xp-session-card__head { grid-template-columns: auto 1fr; }
  .xp-session-card__chevron { display: none; }
  .xp-session-card__vol { grid-column: 1 / -1; justify-self: start; }
  .xp-hist-timeline__head { display: none; }
  .xp-hist-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "date load"
      "date rxs"
      "rpe  delta";
    gap: 4px 12px;
  }
  .xp-hist-row__date  { grid-area: date; }
  .xp-hist-row__load  { grid-area: load; }
  .xp-hist-row__rxs   { grid-area: rxs; }
  .xp-hist-row__rpe   { grid-area: rpe; }
  .xp-hist-row__delta { grid-area: delta; }
}

/* ─── RESPONSIVE: short height (gym fits no scroll) ────────────────────── */
@media (max-height: 720px) and (min-height: 481px) {
  .pad.xp-pad { padding: 16px 18px 18px; }
  .big.xp-rep-numeral { font-size: clamp(120px, 28vw, 200px); }
  .tapzone.xp-tapzone { min-height: 108px; }
  .xp-tapzone__plus { font-size: 36px; }
  .xp-rep-strip__cell { min-height: 56px; }
  .xp-rep-strip__face { font-size: 24px; }
  .rep-input.xp-rep-strip__input { font-size: 30px; }
  .xp-rep-whisper { display: none; }
  .xp-session-log { margin-top: 16px; }
  .xp-session-log__list { max-height: 96px; }
}
@media (max-height: 480px) {
  .pad.xp-pad { padding: 10px 18px 14px; }
  .big.xp-rep-numeral { font-size: clamp(72px, 22vh, 140px); }
  .tapzone.xp-tapzone { min-height: 80px; }
  .xp-tapzone__plus { font-size: 28px; }
  .xp-rep-strip__cell { min-height: 48px; }
  .xp-rep-strip__face { font-size: 20px; }
  .rep-input.xp-rep-strip__input { font-size: 24px; }
  .xp-rep-whisper { display: none; }
  .btn.xp-btn--xl { min-height: 56px; }
  .xp-session-log__list { max-height: 72px; }
  .machine-hero.xp-machine-hero { padding: 14px; }
  .stepper.xp-stepper { margin: 14px auto 4px; }
  .xp-stepper__btn { height: 64px; font-size: 32px; }
  .xp-stepper__n { font-size: 48px; }
}

/* ─── REDUCED MOTION ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .view.active, .view.is-leaving { animation: none; }
  .big.xp-rep-numeral.is-pulsing,
  .big.xp-rep-numeral.bump,
  .xp-rep-spark { animation: none !important; text-shadow: none !important; opacity: 0 !important; }
  .xp-marquee__track { animation: none !important; }
  .xp-reg-mark__dot { animation: none !important; }
  .counter.timer.xp-timer-stage.done .big { animation: none !important; }
}

/* ─── DESKTOP STRUCTURE (no camera) ──────────────────────────────────────
   On desktops there's no usable mobile camera, so the scan view becomes
   a picker-first surface: hide the camera frame, swap the kicker and the
   editorial line, promote the picker button to the primary CTA.
   Touch devices keep the original scan-first layout. */
.xp-kicker--desk,
.xp-editorial--desk,
.xp-btn__lbl--desk { display: none; }

@media (hover: hover) and (pointer: fine) {
  .xp-kicker--touch,
  .xp-editorial--touch,
  .xp-btn__lbl--touch { display: none; }
  .xp-kicker--desk,
  .xp-editorial--desk { display: inline-flex; }
  .xp-editorial--desk { display: block; }
  .xp-btn__lbl--desk { display: inline; }

  /* Kill the camera surface entirely on desktop. */
  #view-scan .xp-scanwrap,
  #view-scan #reader,
  #view-scan .xp-reticle,
  #view-scan #retryCam { display: none !important; }

  /* Tighten the empty space without leaving a void. */
  #view-scan .scan-stage {
    min-height: 28vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* Promote the picker as the primary action. */
  #view-scan #pickBtn {
    background: var(--volt);
    color: var(--void);
    border: 0;
    padding: 18px 32px;
    font-size: 17px;
    font-weight: 700;
  }
}