/* ═══════════════ FRESH ANALYTICS — DARK ═══════════════
   Restyle of the Team Spirit Predictor. Same selectors and layout
   as the original style.css; only the skin changes. */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ═══════════════ RESET & TOKENS ═══════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0b0d10;
  --surface: #14171c;
  --surface-alt: #1a1e25;
  --ink: #f2f4f6;
  --muted: #8a93a0;
  --faint: #5a6270;
  --border: #252b34;
  --volt: #cdfe00;
  --volt-ink: #141900;
  --green: #cdfe00;               /* accent (was green) → volt */
  --green-soft: rgba(205,254,0,.12);
  --green-dark: #cdfe00;
  --red: #ff5c42;
  --red-soft: rgba(255,92,66,.14);
  --amber: #ffb020;
  --amber-soft: rgba(255,176,32,.14);
  --win: #46c878;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 4px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.5);
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --transition: .2s ease;
}

html { background: var(--bg); }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ═══════════════ TYPOGRAPHY ═══════════════ */
h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 400; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; }
h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; margin-bottom: .75rem; }
h3 { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: .5rem; }
p { color: var(--muted); font-size: 1rem; line-height: 1.6; }

/* ═══════════════ BUTTONS ═══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: .85rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.btn--primary { background: var(--volt); color: var(--volt-ink); }
.btn--primary:hover { background: var(--volt); box-shadow: 0 0 18px rgba(205,254,0,.35); }
.btn--ghost { background: var(--surface-alt); color: var(--muted); }
.btn--ghost:hover { background: var(--border); color: var(--ink); }

/* ═══════════════ HEADER ═══════════════ */
.app-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1400px; margin: 0 auto;
  padding: .75rem clamp(1rem, 4vw, 4rem);
  gap: .75rem; flex-wrap: wrap;
  position: relative;
}
.header-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.header-brand h1 { font-size: clamp(1.05rem, 3vw, 1.45rem); margin: 0; white-space: nowrap; }
.header-brand:hover { opacity: .8; }
.header-logo { flex-shrink: 0; }

/* ═══════════════ NAV ═══════════════ */
.nav-pinned, .nav-more { display: flex; align-items: center; gap: .35rem; }
.nav__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px;
  border: 0; border-radius: 20px;
  font: inherit; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: transparent;
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.nav__item:hover { background: var(--surface-alt); color: var(--ink); }
.nav__item--active { background: var(--ink); color: var(--bg); }
.nav__item--active:hover { background: #fff; color: var(--bg); }
.nav__item--danger { color: var(--red); }
.nav__item--danger:hover { background: var(--red-soft); }
.chpp-notice {
  border: 1px solid var(--amber); color: var(--amber);
  background: var(--amber-soft); border-radius: var(--radius-sm);
  padding: .6rem .9rem; margin-bottom: 1rem; font-size: .82rem; font-weight: 600;
}
.chpp-notice--info {
  border-color: var(--border); color: var(--muted); background: var(--surface-alt);
}
.nav__item--chpp-on { color: var(--volt); }
.nav__item--chpp-on:hover { background: var(--green-soft); color: var(--volt); }
.nav__item--chpp[disabled] { opacity: .6; cursor: wait; }
.nav__item--chpp-out { min-height: 40px; padding: 0 10px; font-size: .8rem; color: var(--faint); }
.nav__item--chpp-out:hover { background: var(--red-soft); color: var(--red); }

/* TS game-level widget (Season Setup) */
.chpp-ts-row {
  display: flex; align-items: center; gap: .75rem;
  min-height: 48px; padding: 0 1rem;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.chpp-ts-value { font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chpp-ts-input {
  width: 64px; min-height: 34px; padding: .2rem .4rem; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-family: var(--font-mono); font-size: .9rem; font-weight: 700; color: var(--volt);
}
.chpp-ts-input:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(205,254,0,.15); }
.chpp-ts-apply {
  border: 1px solid var(--volt); border-radius: 8px;
  background: transparent; color: var(--volt);
  font: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .35rem .7rem; cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.chpp-ts-apply:hover { background: var(--volt); color: var(--volt-ink); }

/* ═══════════════ HAMBURGER ═══════════════ */
.hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  gap: 5px;
}
.hamburger__line {
  display: block; width: 22px; height: 2.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.hamburger--open .hamburger__line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger--open .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger--open .hamburger__line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ═══════════════ MAIN LAYOUT ═══════════════ */
.app-main {
  max-width: 1400px; margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 4rem) 3rem;
}

/* ═══════════════ CARDS ═══════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
}

/* ═══════════════ GUIDE & INFO ═══════════════ */
.panel-view { max-width: 900px; margin: 0 auto; }
.card--guide, .card--info { padding: 2rem; }
.card--guide p, .card--info p { margin-bottom: .75rem; font-size: .95rem; color: var(--ink); line-height: 1.7; }
.card--guide p:last-child, .card--info p:last-child { margin-bottom: 0; }
.card--guide h3, .card--info h3 { margin-top: 1.75rem; }
.card--guide a, .card--info a { color: var(--volt); }

.guide-steps {
  margin: .5rem 0 1.25rem 1.25rem; padding: 0;
  color: var(--ink); font-size: .95rem; line-height: 1.7;
}
.guide-steps li { margin-bottom: .4rem; }
.guide-steps ul { margin: .3rem 0 .3rem 1.25rem; list-style: disc; }
.guide-steps li strong { color: var(--ink); }
.guide-steps li em { font-style: italic; }

.guide-section-break { margin-top: 2.5rem; }

.legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.legend-dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; }
.legend-dl dt { font-weight: 800; color: var(--ink); }
.legend-dl dd { color: var(--muted); }

.ts-scale { display: flex; flex-direction: column; gap: .4rem; }
.ts-chip {
  padding: .3rem .7rem; border-radius: 20px;
  font-size: .8rem; font-weight: 600;
  border: 1px solid var(--border);
}
.ts-chip--low { background: var(--red-soft); color: var(--red); }
.ts-chip--mid { background: var(--amber-soft); color: var(--amber); }
.ts-chip--high { background: var(--green-soft); color: var(--volt); }

/* ═══════════════ COMPARE ═══════════════ */
.panel-view--compare { max-width: 1400px; }
.compare-head { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; }
.compare-head h2 { margin: 0; flex: 1; }
.compare-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .75rem; }
.cmp-legend-item {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--muted);
}
.compare-table-wrap { overflow-x: auto; }
.cmp-table { border-collapse: collapse; width: 100%; font-size: .8rem; }
.cmp-table th, .cmp-table td { border-bottom: 1px solid var(--border); padding: .4rem .55rem; }
.cmp-week {
  font-family: var(--font-mono); font-weight: 700; font-size: .72rem; color: var(--muted);
  white-space: nowrap; min-width: 62px; max-width: 190px; text-align: left;
}
.cmp-week-n { display: block; }
.cmp-opp {
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--font); font-weight: 600; font-size: .62rem;
  color: var(--faint); max-width: 180px; min-width: 0;
}
.cmp-cl { flex: none; font-style: normal; font-weight: 800; letter-spacing: .06em; color: var(--volt); }
.cmp-cl--l { color: #a78bfa; }
.cmp-row--played .cmp-cell, .cmp-row--played .cmp-week { opacity: .68; }
.cmp-att {
  font-size: .55rem; font-weight: 800; letter-spacing: .06em;
  border-radius: 5px; padding: .05rem .3rem;
}
.cmp-att--pic { background: var(--volt); color: var(--volt-ink); }
.cmp-att--mots { background: var(--red); color: #fff; }
.cmp-line--pill { color: var(--volt); }
.cmp-tag--pill { width: auto; font-size: .68rem; }
.cmp-int { font-size: .62rem; font-weight: 700; color: var(--muted); }
.cmp-sum td { border-top: 2px solid var(--border); }
.cmp-sum .cmp-week { color: var(--ink); }
.cmp-sum b { font-family: var(--font-mono); }
.cmp-best { color: var(--volt); }
.cmp-best::after { content: ' ★'; font-size: .6rem; }
th.cmp-col {
  text-align: left; background: var(--surface-alt); cursor: grab;
  min-width: 168px; vertical-align: middle;
}
th.cmp-col.cmp-dragging { opacity: .4; }
th.cmp-col--min { min-width: 34px; width: 34px; background: var(--surface-alt); cursor: grab; }
.cmp-grip { color: var(--faint); margin-right: .4rem; font-size: .8rem; }
.cmp-name {
  font-weight: 800; font-size: .78rem; letter-spacing: .03em;
  display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle;
}
.cmp-name-vert {
  writing-mode: vertical-rl; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  color: var(--faint); max-height: 90px; overflow: hidden; display: inline-block;
}
.cmp-ctls { float: right; display: inline-flex; gap: .15rem; }
.cmp-ctl {
  border: 0; background: transparent; color: var(--faint); cursor: pointer;
  font-size: .78rem; padding: .1rem .3rem; border-radius: 6px; line-height: 1.2;
}
.cmp-ctl:hover { background: var(--border); color: var(--ink); }
.cmp-ctl--del:hover { background: var(--red-soft); color: var(--red); }
.cmp-cell { vertical-align: middle; }
.cmp-cell--min { background: rgba(0,0,0,.15); }
.cmp-line { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.cmp-line b { font-family: var(--font-mono); font-weight: 700; }
.cmp-tag {
  font-size: .58rem; font-weight: 800; letter-spacing: .08em; color: var(--volt);
  width: 12px; display: inline-block;
}
.cmp-tag--l { color: #a78bfa; }
.cmp-arrow { color: var(--faint); font-size: .7rem; }
.cmp-pill { font-size: .68rem; font-family: var(--font-mono); font-weight: 700; color: var(--volt); margin-left: .25rem; cursor: help; }
.cmp-add-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.cmp-add-item {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .6rem .8rem; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: border-color var(--transition);
}
.cmp-add-item:hover { border-color: var(--volt); }
.cmp-add-new { width: 100%; }
.cmp-add-hint { font-size: .78rem; color: var(--muted); margin-top: .5rem; text-align: center; }
.cmp-add-empty { font-size: .85rem; color: var(--muted); }

/* ═══════════════ SETUP ═══════════════ */
.card--setup { padding: 2rem; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field__label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.field__label strong { color: var(--volt); font-family: var(--font-mono); }
.field__select {
  width: 100%; min-height: 48px; padding: .5rem 1rem;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color var(--transition);
}
.field__select:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(205,254,0,.15); }
.field__range { width: 100%; accent-color: var(--volt); height: 6px; }

/* ═══════════════ CHART ═══════════════ */
.card--chart { padding: 1.5rem 2rem; }
.chart-wrap { width: 100%; overflow-x: auto; margin: .75rem 0; }
#tsChart { width: 100%; height: 180px; display: block; }
.chart-legend { display: flex; align-items: center; gap: 1.25rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.chart-legend__dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem;
}
.chart-legend__dot--pre { background: #8a93a0; }
.chart-legend__dot--post { background: var(--volt); }

/* ═══════════════ WEEK CARDS ═══════════════ */
.weeks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.card--week {
  padding: 0; overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card--week:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: #3a4250; }

/* Played weeks kept as history (CHPP sync) */
.card--week-played { opacity: .78; }
.card--week-played:hover { opacity: 1; }
.card--week-played .week-num { background: var(--surface); color: var(--faint); border: 1px solid var(--border); }
.week-played-tag {
  font-size: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--border); border-radius: 999px;
  padding: .15rem .5rem;
}

.week-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
.week-num {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--volt); color: var(--volt-ink);
  font-family: var(--font-display); font-size: .95rem; font-weight: 400; flex-shrink: 0;
}
.week-label { font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }

.week-matches { padding: .6rem 1rem .85rem; overflow: hidden; }

.match-row {
  display: grid;
  grid-template-columns: minmax(52px, 88px) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: .4rem;
  padding: .6rem 0;
}
.match-row + .match-row { border-top: 1px solid var(--border); }

.match-type {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  color: var(--muted); letter-spacing: .1em;
  min-width: 0;
}
.match-opp {
  display: flex; align-items: center; gap: .3rem;
  font-size: .6rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--faint);
  max-width: 100%; min-width: 0;
}
.opp-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opp-ha {
  flex: none; font-style: normal;
  width: 13px; height: 13px; line-height: 13px; text-align: center;
  border-radius: 3px; font-size: .5rem; font-weight: 800;
}
.opp-ha--h { background: var(--muted); color: var(--bg); }
.opp-ha--a { border: 1px solid var(--faint); color: var(--muted); line-height: 11px; }
.match-res { flex: none; font-weight: 800; }
.match-res--w { color: var(--win); }
.match-res--d { color: var(--amber); }
.match-res--l { color: var(--red); }
.match-row--cup .match-type { color: var(--volt); }
.match-row--league .match-type { color: #a78bfa; }

.match-ts { text-align: center; min-width: 0; }
.ts-label { display: block; font-size: .58rem; text-transform: uppercase; color: var(--faint); font-weight: 800; letter-spacing: .12em; }
/* Reserve room for the edit/clear icons at the top-right so the centered
   "Before" text doesn't render underneath them. */
.match-ts--editable .ts-label { padding-right: 30px; }
.ts-value {
  display: inline-block; padding: .25rem .5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .95rem; font-weight: 700;
  white-space: nowrap;
}
.ts-value--pre { background: var(--green-soft); color: var(--volt); }
.ts-value--post { background: var(--amber-soft); color: var(--amber); }

.match-att { text-align: center; min-width: 0; }

/* ═══════════════ WEEK ADVANCED (coach/psy overrides) ═══════════════ */
.week-adv-btn {
  margin-left: auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--faint);
  font-size: .95rem; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.week-adv-btn:hover { background: var(--border); color: var(--ink); }
.week-adv-btn--active { color: var(--volt); }
.week-pill-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 8px;
  background: transparent; font-size: .9rem; cursor: pointer;
  filter: grayscale(1); opacity: .45;
  transition: opacity var(--transition), filter var(--transition), background var(--transition);
}
.week-pill-btn:hover { background: var(--border); opacity: .85; }
.week-pill-btn--active { filter: none; opacity: 1; }
.week-advanced {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  padding: .7rem 1rem .9rem;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.adv-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.adv-field > span {
  font-size: .58rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.adv-select {
  width: 100%; min-height: 34px; padding: .25rem .5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: .78rem; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: border-color var(--transition);
}
.adv-select:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(205,254,0,.15); }
.week-advanced .adv-select option { color: var(--ink); }

/* Nero Pill (training intensity change) */
.pill-row { display: flex; align-items: center; gap: .6rem; }
.pill-slider { flex: 1; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pill-cap {
  font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pill-toggle {
  min-width: 44px; padding: .3rem .5rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.pill-toggle--on { background: var(--volt); color: var(--volt-ink); border-color: var(--volt); }
.pill-range { width: 100%; accent-color: var(--volt); height: 4px; }
.pill-range:disabled { opacity: .35; }
.pill-val { min-width: 34px; text-align: right; font-size: .9rem; font-weight: 700; color: var(--volt); }

/* Nero Pill band between cup and league rows */
.pill-band {
  margin: .15rem 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--volt);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  padding: .5rem .75rem .65rem;
}
.pill-band__head { display: flex; align-items: baseline; gap: .6rem; }
.pill-band__title {
  font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--volt);
}
.pill-band__hint {
  font-size: .55rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1;
}
.pill-band__ts {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--volt);
}
.pill-band__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem;
  margin-top: .5rem;
}
.pill-note-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pill-note-field > span {
  font-size: .5rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: help;
}
.pill-note {
  width: 100%; min-height: 28px; padding: .15rem .4rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-family: var(--font-mono); font-size: .75rem; color: var(--muted);
}
.pill-note:focus { outline: none; border-color: var(--faint); }
@media (max-width: 640px) {
  .pill-band__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════ MARKET (TS impact from transfers) ═══════════════ */
.week-mkt-btn {
  position: relative;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 8px;
  background: transparent; font-size: .9rem; cursor: pointer;
  filter: grayscale(1); opacity: .45;
  transition: opacity var(--transition), filter var(--transition), background var(--transition);
}
.week-mkt-btn:hover { background: var(--border); opacity: .85; }
.week-mkt-btn--active { filter: none; opacity: 1; }
.week-mkt-btn--suggest::after {
  content: '';
  position: absolute;
  top: 1px; right: 1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--surface);
}

.mkt-band {
  margin: .6rem 1rem 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  padding: .5rem .75rem .65rem;
}
.mkt-band__head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.mkt-band__title {
  font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber);
}
.mkt-band__hint {
  font-size: .55rem; font-weight: 600; letter-spacing: .04em;
  color: var(--faint); min-width: 0; flex: 1;
}
.mkt-group + .mkt-group { margin-top: .6rem; }
.mkt-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.mkt-slot { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.mkt-slot__label {
  font-size: .5rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint);
}
.mkt-stepper {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: .15rem .3rem;
}
.mkt-step {
  border: 0; background: transparent; color: var(--muted);
  width: 18px; height: 18px; line-height: 1; font-size: .8rem; font-weight: 700;
  cursor: pointer; border-radius: 4px;
  transition: background var(--transition), color var(--transition);
}
.mkt-step:hover { background: var(--border); color: var(--ink); }
.mkt-count { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--amber); min-width: 12px; text-align: center; }
.mkt-note {
  width: 100%; min-height: 34px; padding: .25rem .4rem; resize: vertical;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: .74rem; line-height: 1.4; color: var(--ink);
}
.mkt-note::placeholder { color: var(--muted); font-size: .68rem; }
.mkt-note:focus { outline: none; border-color: var(--faint); }
@media (max-width: 640px) {
  .mkt-slots { grid-template-columns: repeat(2, 1fr); }
}

/* Edit before button. Sized/positioned to fit within the "Before" label's
   own row (top:-2px, 16px tall) — the value pill sits directly below with
   no gap, so anything taller than the label overlaps it (seen with the
   original 22px buttons: they dipped 8px into the value pill). */
.match-ts--editable { position: relative; }
.ts-edit-btn {
  position: absolute; top: -2px; right: -2px;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--faint);
  font-size: .58rem; cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.ts-edit-btn:hover { color: var(--ink); background: var(--surface-alt); }
.ts-edit-btn--active { color: var(--volt); background: var(--green-soft); }
.ts-edit-btn--edited { color: var(--amber); }
.ts-edit-btn--edited:hover { color: var(--amber); background: var(--amber-soft); }
.ts-clear-btn {
  position: absolute; top: -2px; right: 14px;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--red-soft); color: var(--red);
  font-size: .55rem; font-weight: 700; cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.ts-clear-btn:hover { color: #fff; background: var(--red); }

.ts-edit-input {
  width: 56px; padding: .2rem .3rem;
  border: 1px solid var(--volt); border-radius: 6px;
  font: inherit; font-family: var(--font-mono); font-size: .9rem; font-weight: 700; color: var(--ink);
  text-align: center; background: var(--surface);
  box-shadow: 0 0 0 3px rgba(205,254,0,.15);
}
.att-select {
  width: 100%; min-height: 38px; padding: .35rem .5rem;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
  cursor: pointer; transition: border-color var(--transition);
}
.att-select:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(205,254,0,.15); }

/* ═══════════════ HIDDEN TABLE (ts.js compat) ═══════════════ */
.predictor-table { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 640px) {
  .header-inner { flex-direction: column; align-items: stretch; gap: .5rem; padding: .75rem 1rem; }
  .header-brand { text-align: center; }
  .nav-pinned { justify-content: center; gap: .25rem; }
  .nav-pinned .nav__item { padding: 0 12px; font-size: .74rem; min-height: 36px; }
  .hamburger { display: flex; position: absolute; top: .75rem; right: 1rem; }
  .nav-more {
    display: none;
    flex-direction: column; align-items: stretch;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .5rem;
    box-shadow: var(--shadow-lg); min-width: 140px;
    position: absolute; top: 100%; right: 1rem;
  }
  .nav-more.nav--open { display: flex; }
  .nav-more .nav__item { justify-content: flex-start; min-height: 44px; padding: 0 14px; border-radius: 10px; }
  .legend-grid { grid-template-columns: 1fr; }
  .weeks-grid { grid-template-columns: 1fr; }
  .match-row { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: .3rem; }
  .card--setup, .card--chart, .card--guide, .card--info { padding: 1.25rem; }
  .setup-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
  .weeks-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════ BUTTON DANGER ═══════════════ */
.btn--danger { background: var(--red-soft); color: var(--red); }
.btn--danger:hover { background: rgba(255,92,66,.24); }

/* ═══════════════ SMALL BUTTONS ═══════════════ */
.btn--sm { min-height: 36px; padding: 0 14px; font-size: .72rem; border-radius: 8px; }
.btn--icon { min-height: 36px; width: 36px; padding: 0; font-size: 1.4rem; border-radius: 50%; background: transparent; color: var(--muted); }
.btn--icon:hover { background: var(--surface-alt); color: var(--ink); }
.btn--icon-danger { min-height: 36px; width: 36px; padding: 0; font-size: 1.1rem; border-radius: 50%; background: transparent; color: var(--muted); border: 0; cursor: pointer; }
.btn--icon-danger:hover { background: var(--red-soft); color: var(--red); }
.btn--icon-danger:disabled { opacity: .3; pointer-events: none; }

/* ═══════════════ MODAL ═══════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay--confirm { z-index: 1100; }
.modal {
  width: 100%; max-width: 520px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal--sm { max-width: 380px; }
.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.modal__header h2 { margin: 0; font-size: 1.2rem; }
.modal__body { padding: 1rem 1.5rem; max-height: 60vh; overflow-y: auto; }
.modal__footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); text-align: right; }

/* ═══════════════ SLOTS ═══════════════ */
.slots-list { display: flex; flex-direction: column; gap: .6rem; }
.slot-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  background: var(--surface-alt); border-radius: var(--radius-sm);
}
.slot-num {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--volt); color: var(--volt-ink); border-radius: 7px;
  font-family: var(--font-display); font-size: .7rem; font-weight: 400; flex-shrink: 0;
}
.slot-name {
  flex: 1; min-width: 0;
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink);
  background: var(--surface);
}
.slot-name:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(205,254,0,.15); }
.slot-row .btn:disabled { opacity: .35; pointer-events: none; }

/* ═══════════════ CUSTOM SELECT (themed dropdown, replaces native list) ═══════════════ */
.csel { position: relative; width: 100%; }
/* Native select stays in the DOM (value/change/a11y source of truth) but
   is visually hidden — the themed button below is what's actually shown. */
.csel-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.csel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  text-align: left;
}
.csel-btn:focus-visible { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(205,254,0,.15); }
.csel-btn-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-chevron { flex: none; font-size: .7em; color: var(--muted); transition: transform var(--transition); }
.csel-btn[aria-expanded="true"] .csel-chevron { transform: rotate(180deg); color: var(--volt); }

.csel-popup {
  position: fixed; z-index: 2000;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: .3rem;
}
.csel-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.csel-opt {
  padding: .5rem .7rem; border-radius: 6px; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--transition), color var(--transition);
}
.csel-opt--hi { background: var(--surface); }
.csel-opt--sel { color: var(--volt); font-weight: 800; }
.csel-opt--sel::before { content: '\2713  '; }