/* ===========================================================
   Token system
   bg / surface / border : structural darks
   gold                  : money, the thing everyone's watching
   green / red           : bargain vs. overpay signal
   position colors       : instant visual scan of a crowded board
   =========================================================== */
:root {
  /* Tells the browser to render native controls -- crucially the OS-drawn
     open <select> dropdown list, which page CSS can't reach -- in dark
     mode. Without it that list stays white-on-white against our light
     option text. */
  color-scheme: dark;

  --bg: #0b0f14;
  --surface: #121820;
  --surface-2: #182028;
  --surface-hover: #1c2530;
  --border: #232e3a;
  --border-soft: #1a232d;

  --text: #e9eef3;
  --text-dim: #92a0af;
  --text-faint: #5b6b7b;

  --gold: #e8b93f;
  --gold-dim: #a9873a;
  --green: #4cc38a;
  --green-dim: #2f7a56;
  --red: #e2564f;
  --red-dim: #8f3733;
  /* DraftBoard's own identity color -- used only for the two nav
     buttons that bridge between the Auction Board and DraftBoard, and
     for DraftBoard's own brand mark, so the two apps read as visually
     distinct even though they share one stylesheet. */
  --blue: #4f8fe2;
  --blue-dim: #3a6bb0;

  /* Position colors (user-defined) */
  --pos-qb: #e2564f;   /* Red */
  --pos-wr: #4f8fe2;   /* Blue */
  --pos-rb: #4cc38a;   /* Green */
  --pos-te: #e8973f;   /* Orange */
  --pos-k:  #9b6fe0;   /* Purple */
  --pos-dst: #a8703f;  /* Brown */

  --callout-blue-bg: #0f1f2e;
  --callout-green-bg: #112a1e;
  --callout-red-bg: #2a1210;

  --display: "Bahnschrift", "SF Pro Display", "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
  --body: "Segoe UI", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "Cascadia Mono", "Consolas", "JetBrains Mono", "Menlo", monospace;
}

* { box-sizing: border-box; }

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #edf0f3;
  --surface-hover: #e2e6eb;
  --border: #d6dce2;
  --border-soft: #e6e9ed;

  --text: #1b2430;
  --text-dim: #55606d;
  --text-faint: #8a97a6;

  --gold-dim: #9c7a2e;
  --green-dim: #1f7a52;
  --red-dim: #8f3733;

  --callout-blue-bg: #eaf1fc;
  --callout-green-bg: #eaf7f0;
  --callout-red-bg: #fdecec;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  height: 100%;
}

button, input, select {
  font-family: inherit;
  color: inherit;
}

/* Baseline surface for any <select> that doesn't carry its own classed
   rule. `color: inherit` alone left them as theme text on the browser's
   default white control background -- unreadable in dark mode. Kept at
   element specificity so .owner-select / .access-email-input / etc. still
   win where they set their own look. */
select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 24px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
  flex-wrap: wrap;
}

.topbar-brand {
  font-family: var(--display);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.brand-mark { color: var(--text); font-weight: 700; font-size: 18px; }
.brand-mark-sub { color: var(--gold); font-weight: 700; font-size: 18px; margin-left: 4px; }
.league-name-display {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--body);
  letter-spacing: normal;
}

.stat-strip {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
  flex-wrap: wrap;
}

.stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.stat-value {
  font-family: var(--mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-value--accent { color: var(--gold); }

.stat--gauge { min-width: 150px; }
.gauge { display: flex; align-items: center; gap: 10px; }
.gauge-track {
  position: relative;
  width: 100px;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.gauge-fill {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 0%;
  background: var(--green);
  transition: width 0.35s ease, background 0.35s ease, left 0.35s ease;
}
.gauge-center-line {
  position: absolute;
  left: 50%; top: -2px; bottom: -2px;
  width: 1px;
  background: var(--text-faint);
}
.gauge-value {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  min-width: 46px;
}

/* ---------- Top-right callouts (next pick + watch alert) ---------- */
.callout-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.best-available-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--callout-blue-bg);
  border: 1px solid var(--pos-wr);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 190px;
  box-shadow: 0 0 0 1px rgba(79, 143, 226, 0.15);
}
.best-available-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pos-wr);
  font-weight: 700;
}
.best-available-body {
  display: flex;
  align-items: center;
  gap: 8px;
}
.best-available-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
}
.best-available-cost {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--pos-wr);
  margin-left: auto;
}
.best-available-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 2px;
}
.best-available-sub b { color: var(--green); }

.next-pick-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--callout-green-bg);
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 170px;
  box-shadow: 0 0 0 1px rgba(76, 195, 138, 0.15);
}
.next-pick-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green);
  font-weight: 700;
}
.next-pick-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.next-pick-number {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--green);
}
.next-pick-owner {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
}

/* ---------- "Watch" alert box (req #6) ---------- */
.alert-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--callout-red-bg);
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 200px;
  box-shadow: 0 0 0 1px rgba(226, 86, 79, 0.15);
}
.alert-box-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--red);
  font-weight: 700;
}
.alert-box-body {
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
}
.alert-score {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--red);
  margin-left: auto;
}

.topbar-actions { display: flex; gap: 10px; margin-left: auto; }

.btn {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); }
.btn-ghost { color: var(--text-dim); }
.btn-danger-ghost { color: var(--red); border-color: #3a2323; }
.btn-danger-ghost:hover { background: #221616; }
.btn-primary { background: var(--gold); color: #1a1406; border-color: var(--gold); }
.btn-primary:hover { background: #f2c65a; }
.btn-danger { background: var(--red); color: #200c0a; border-color: var(--red); }
.btn-danger:hover { background: #ea6b64; }
.btn-small { padding: 5px 10px; font-size: 12px; }

/* Bridge buttons between the two independent apps in this repo -- the
   only two places the Auction Board and DraftBoard link to each other.
   Colored to match the destination app's own identity (gold = Auction,
   blue = DraftBoard) so it reads as "leaving," not as a normal nav item. */
.btn-launch-draftboard { background: var(--blue); color: #071626; border-color: var(--blue); }
.btn-launch-draftboard:hover { background: #6ba3ec; }
.btn-exit-draftboard { color: var(--gold); border-color: var(--gold-dim); background: transparent; }
.btn-exit-draftboard:hover { background: rgba(232, 185, 63, 0.12); }

/* ---------- Position live-value strip ---------- */
.pos-live-strip {
  display: flex;
  gap: 1px;
  background: var(--border-soft);
  border-bottom: 1px solid var(--border);
}
.pos-chip-block {
  flex: 1;
  min-width: 120px;
  background: var(--bg);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pos-chip-block-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pos-chip-block .pos-chip { font-size: 10px; }
.pos-chip-block-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}
.pos-chip-block-value {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.pos-chip-block-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
}
.pos-chip-block-top {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 1px;
}

/* ---------- Controls row ---------- */
.controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}

.view-tabs { display: flex; gap: 6px; padding-right: 14px; border-right: 1px solid var(--border-soft); }
.view-tab {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.view-tab:hover { color: var(--text); }
.view-tab.active { background: var(--surface-2); border-color: var(--border); color: var(--gold); }

.pos-tabs { display: flex; gap: 6px; }
.pos-tab {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.pos-tab:hover { border-color: var(--text-faint); color: var(--text); }
.pos-tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }

.search-wrap { flex: 1; max-width: 320px; }
/* Every page's search box, not just the Board's #search -- the other six
   (#template-search, #analysis-search, #sheet-search, #adp-search) were
   rendering as theme text on the browser's default white input. */
.search-wrap input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
}
.search-wrap input:focus { outline: none; border-color: var(--gold-dim); }
.search-wrap input::placeholder { color: var(--text-faint); }

.hide-drafted-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* ---------- Table ---------- */
.board-wrap { padding: 0 24px 60px; }
.table-scroll { overflow-x: auto; }

/* Bounds the Board's own player table to a scrollable region separate
   from the rest of the page, so table.board's existing sticky thead
   (position: sticky; top: 0 below) sticks to the top of THIS box
   instead of the whole viewport -- where it would otherwise slide
   underneath the also-sticky topbar as soon as you scroll. Scoped by id
   rather than added to the shared .table-scroll class so every other
   page reusing that class (Player Template, Projections, Draft
   Analysis) keeps its current whole-page-scrolls behavior. */
#board-table-scroll { max-height: calc(100vh - 260px); overflow-y: auto; }

.board-add-player-row { margin-top: 10px; }

/* Add Player: an inline editable row at the top of the table. Inputs
   are sized to sit inside the same narrow table cells everything else
   uses, rather than the roomier modal-field styling elsewhere. */
.new-player-row .np-input {
  width: 100%;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
}
.new-player-row .np-num { text-align: right; font-family: var(--mono); }
.new-player-row td { vertical-align: middle; }
.new-player-row .col-owner { display: flex; gap: 6px; white-space: nowrap; }

/* While adding a player, every other control on the page is inert and
   dimmed until Save or Cancel -- "no other changes until saved." The
   new row itself (and the Add Player button, toggled separately in JS)
   stay fully interactive. */
body.board-locked .topbar-actions,
body.board-locked .controls,
body.board-locked .board-sidebar {
  opacity: 0.45;
  pointer-events: none;
}
body.board-locked #board-body tr:not(.new-player-row) {
  opacity: 0.5;
  pointer-events: none;
}

.board-layout { display: flex; gap: 16px; align-items: flex-start; }
.board-main { flex: 1; min-width: 0; }

.board-sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.board-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.board-sidebar-empty { color: var(--text-faint); font-size: 12px; font-style: italic; padding: 4px 0; }

.board-sidebar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 12px;
}
.board-sidebar-row .pos-chip { flex-shrink: 0; }

.owner-panel-row .owner-panel-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.owner-panel-row .owner-panel-maxbid {
  flex-shrink: 0;
  width: 44px;
  text-align: right;
  font-family: var(--mono);
  color: var(--green);
  font-weight: 700;
}
.owner-panel-row .owner-panel-spots {
  flex-shrink: 0;
  width: 46px;
  text-align: right;
  color: var(--text-faint);
  font-size: 11px;
}

.queue-row .queue-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.queue-row .queue-value {
  flex-shrink: 0;
  font-family: var(--mono);
  color: var(--gold);
  font-weight: 700;
}
.queue-row .queue-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.queue-row .queue-remove:hover { color: var(--red); }

.recent-bid-row .recent-bid-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.recent-bid-row .recent-bid-amount {
  flex-shrink: 0;
  width: 38px;
  text-align: right;
  font-family: var(--mono);
  color: var(--gold);
  font-weight: 700;
}
.recent-bid-row .recent-bid-owner {
  flex-shrink: 0;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 11px;
}

.player-name-clickable { cursor: pointer; }
.player-name-clickable:hover { text-decoration: underline; color: var(--gold); }

table.board {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  margin-top: 14px;
}

.board thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  z-index: 10;
}
.board thead th:hover { color: var(--text-dim); }
.board thead th.col-num { text-align: right; }
.board thead th.sorted { color: var(--gold); }
.board thead th.col-index,
.board td.col-index {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  white-space: nowrap;
}
.board thead th.col-index {
  text-align: center;
  cursor: default;
}
.board thead th.col-index:hover { color: var(--text-faint); }
.board td.col-index {
  text-align: center;
  color: var(--text-faint);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.board tbody tr {
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.1s;
}
.board tbody tr:hover { background: var(--surface); }
.board tbody tr.is-drafted { opacity: 0.5; }
.board tbody tr.is-drafted:hover { opacity: 0.8; }
.board tbody tr.is-pending { box-shadow: inset 3px 0 0 var(--gold-dim); background: rgba(232, 185, 63, 0.06); }

.board td { padding: 9px 12px; font-size: 13.5px; vertical-align: middle; }
.board td.col-num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.pos-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 4px;
  color: #0b0f14;
}
.pos-chip.QB { background: var(--pos-qb); }
.pos-chip.RB { background: var(--pos-rb); }
.pos-chip.WR { background: var(--pos-wr); }
.pos-chip.TE { background: var(--pos-te); }
.pos-chip.K { background: var(--pos-k); }
.pos-chip.DST { background: var(--pos-dst); }
/* Generic slot labels (FLEX/SUPERFLEX/BENCH on the Owners panel, or the
   "—" dash when a team has no next-needed position) aren't tied to one
   position's color, so they had no background at all -- the base rule's
   dark text then landed on a dark row background with no contrast in
   dark mode. Theme tokens (not a fixed color) so it also flips correctly
   in light mode instead of just picking one theme to work in. */
.pos-chip:not(.QB):not(.RB):not(.WR):not(.TE):not(.K):not(.DST) {
  background: var(--border);
  color: var(--text);
}

.player-name { font-weight: 600; color: var(--text); }
.team-name { color: var(--text-faint); font-size: 12.5px; }

.col-live .live-value {
  font-weight: 700;
  color: var(--gold);
  font-size: 14.5px;
}
.col-live-pos .live-value-pos {
  font-weight: 600;
  color: var(--text);
  font-size: 13.5px;
}

.val-positive { color: var(--green) !important; }
.val-negative { color: var(--red) !important; }

.price-input, .adj-input {
  width: 68px;
  text-align: right;
  font-family: var(--mono);
  font-size: 13.5px;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.price-input:focus, .adj-input:focus { outline: none; border-color: var(--gold-dim); background: var(--surface-hover); }
.price-input.has-value { border-color: var(--gold-dim); color: var(--gold); font-weight: 700; }
.adj-input.val-positive { border-color: var(--green-dim); font-weight: 700; }
.adj-input.val-negative { border-color: var(--red-dim); font-weight: 700; }

.owner-select {
  font-family: var(--body);
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  max-width: 140px;
}
.owner-select:disabled { opacity: 0.4; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-faint);
  font-size: 14px;
}

/* ---------- Rosters view ---------- */
.rosters-wrap { padding: 20px 24px 60px; }
.rosters-layout { display: flex; gap: 16px; align-items: flex-start; }
.rosters-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
/* Unlike the Board sidebar's short lists, All Bids should show every
   pick from the whole draft with no inner scrollbar of its own -- the
   page scrolls instead. */
.board-sidebar-list--noscroll { max-height: none; overflow-y: visible; }
.roster-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.roster-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.roster-owner {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
}
.roster-team-num {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
}
.roster-budget {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.roster-budget b { color: var(--gold); }
.roster-budget .max-bid b { color: var(--green); font-weight: 700; font-size: 20px; }
.roster-players { display: flex; flex-direction: column; gap: 6px; }
.roster-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.roster-player-name { flex: 1; color: var(--text); font-size: 16px; font-weight: 600; }
.roster-player-price { font-family: var(--mono); color: var(--gold); font-weight: 700; }
.roster-empty { color: var(--text-faint); font-size: 12.5px; font-style: italic; }

/* ---------- Draft grid view (two grids) ---------- */
.grid-wrap { padding: 20px 24px 60px; }
.grid-scroll { overflow-x: auto; margin-bottom: 8px; }
.grid-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.grid-section-label {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 4px 0 10px;
}
.grid-section-label--second { margin-top: 30px; }

table.draft-grid-table {
  border-collapse: collapse;
  min-width: 100%;
}
.draft-grid-table th {
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  font-size: 11.5px;
  white-space: nowrap;
  z-index: 5;
}
#top-grid-table thead tr:first-child th,
#bottom-grid-table thead tr:first-child th {
  border-bottom: none;
  padding-bottom: 2px;
}
#top-grid-table thead tr:last-child th,
#bottom-grid-table thead tr:last-child th {
  top: 30px;
  border-bottom: 1px solid var(--border);
  padding-top: 2px;
}
.grid-corner { background: var(--bg); }
.draft-grid-table th.grid-owner-head {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
  font-size: 17px;
}
.draft-grid-table th.grid-max-head {
  font-family: var(--mono);
  font-size: 26px;
  color: var(--green);
  font-weight: 700;
}
.grid-spots-left {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: normal;
}
.draft-grid-table td.grid-round-label,
.draft-grid-table td.grid-slot-label {
  position: sticky;
  background: var(--bg);
  font-family: var(--mono);
  color: var(--text-faint);
  font-size: 11px;
  padding: 8px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-soft);
}
.draft-grid-table td.grid-round-label { left: 0; }
.draft-grid-table td.grid-slot-label.side-left { left: 0; }
.draft-grid-table td.grid-slot-label.side-right { }
.grid-cell {
  min-width: 140px;
  padding: 6px 8px;
  border: 1px solid var(--border-soft);
  vertical-align: top;
}
.grid-cell-empty { background: var(--surface); }
/* Dark theme (default): bold white border around drafted players in both
   grids. Light theme: bold dark border instead, for the same contrast. */
.grid-cell-filled { background: var(--surface-2); border: 2px solid #ffffff; position: relative; }
html[data-theme="light"] .grid-cell-filled { border-color: var(--text); }

/* Color Grid Mode -- background shaded by the pick's position, rounded
   into a speech-bubble shape (one sharp corner breaks the symmetry so it
   reads as a bubble rather than just a rounded rectangle) instead of the
   plain surface + white outline above. Text stays legible via a dark
   scrim behind the name/price rather than per-position text-color
   tuning, since the position palette spans both light and dark colors. */
.color-grid-mode .grid-cell-filled {
  border: none;
  border-radius: 14px 14px 14px 3px;
}
.color-grid-mode .grid-cell-filled[data-pos="QB"] { background: var(--pos-qb); }
.color-grid-mode .grid-cell-filled[data-pos="RB"] { background: var(--pos-rb); }
.color-grid-mode .grid-cell-filled[data-pos="WR"] { background: var(--pos-wr); }
.color-grid-mode .grid-cell-filled[data-pos="TE"] { background: var(--pos-te); }
.color-grid-mode .grid-cell-filled[data-pos="K"] { background: var(--pos-k); }
.color-grid-mode .grid-cell-filled[data-pos="DST"] { background: var(--pos-dst); }
.color-grid-mode .grid-cell-filled .grid-pick-name,
.color-grid-mode .grid-cell-filled .grid-pick-nominator { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.color-grid-mode .grid-cell-filled .grid-pick-price { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.color-grid-mode .grid-cell-filled .pos-chip {
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
.grid-pick-name { font-size: 16px; font-weight: 600; color: var(--text); padding-right: 44px; }
.grid-pick-meta {
  position: absolute;
  top: 6px;
  right: 8px;
}
.grid-pick-price { font-family: var(--mono); font-size: 13.5px; color: var(--gold); font-weight: 700; }
.grid-pick-nominator { font-size: 10px; color: var(--text-faint); margin-top: 2px; }

/* ---------- Modals ---------- */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 9, 0.7);
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  width: 340px;
  max-height: 88vh;
  overflow-y: auto;
}
.modal-wide { width: 680px; max-width: 100%; }
.modal h2 { margin: 0 0 14px; font-family: var(--display); font-size: 17px; }
.modal-copy { color: var(--text-dim); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }
.modal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-dim); }
.modal-field input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 14px;
}

/* Plain <input> elements only get `color: inherit` from the global
   button/input/select rule above -- no background -- so without this
   they render as light theme text on the browser's default white input
   background (invisible while typing). --surface-2/--text/--border are
   already theme-aware tokens (light surface + dark text in light theme,
   dark surface + light text in dark theme), so this fixes both themes
   at once rather than hardcoding either black-on-white or white-on-black. */
.access-email-input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
}
.access-email-input:focus { outline: none; border-color: var(--gold-dim); background: var(--surface-hover); }
.modal-field textarea {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
#owner-profiles-list { max-height: 50vh; overflow-y: auto; padding-right: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-actions--wrap { flex-wrap: wrap; }

.modal-subhead {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin: 16px 0 10px;
}
.settings-columns { display: flex; gap: 24px; }
.settings-col { flex: 1; min-width: 0; }

.lineup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.lineup-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}
.lineup-field em { color: var(--text-faint); font-style: normal; font-size: 10px; display: block; }
.lineup-field input {
  width: 52px;
  text-align: right;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 13px;
}
.lineup-total {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
  margin-top: 8px;
}

.owner-name-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.owner-name-row { display: flex; align-items: center; gap: 8px; }
.owner-name-row .owner-name-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  width: 22px;
  text-align: right;
}
.owner-name-row input[type="text"] {
  flex: 1;
  padding: 6px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
}
.owner-name-row .draft-order-field {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--text-faint);
}
.owner-name-row .draft-order-field input {
  width: 44px;
  text-align: center;
  padding: 6px 4px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 12.5px;
}

.owner-name-row .my-team-radio {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}

.toggle-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  margin-bottom: 10px;
}

.highlight-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.highlight-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  border-left: 3px solid var(--border);
}
.highlight-field--blue { border-left-color: var(--pos-wr); }
.highlight-field--green { border-left-color: var(--green); }
.highlight-field--red { border-left-color: var(--red); }
.highlight-field input {
  width: 52px;
  text-align: right;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 13px;
}

.theme-toggle-row { margin-top: 4px; }

/* ---------- Board highlight backgrounds (name cell only) ---------- */
.player-name.highlight-blue { background: rgba(79, 143, 226, 0.35); border-radius: 4px; padding: 2px 6px; }
.player-name.highlight-green { background: rgba(76, 195, 138, 0.32); border-radius: 4px; padding: 2px 6px; }
.player-name.highlight-red { background: rgba(226, 86, 79, 0.32); border-radius: 4px; padding: 2px 6px; }

.owner-select.team-full-hidden { display: none; }

.share-link-box {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 6px;
  word-break: break-all;
}

.template-load-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.template-load-row select {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
}

/* ---------- Player Template page ---------- */
.templates-wrap {
  display: flex;
  gap: 0;
  align-items: flex-start;
  min-height: calc(100vh - 60px);
}
.templates-sidebar {
  width: 300px;
  flex-shrink: 0;
  padding: 20px;
  border-right: 1px solid var(--border-soft);
  min-height: calc(100vh - 60px);
}
.templates-sidebar-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.templates-sidebar-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
}
.templates-sidebar-actions { display: flex; gap: 8px; }
.template-row {
  cursor: pointer;
}
.template-row.active { border-color: var(--gold-dim); background: var(--surface-hover); }
.template-row .saved-draft-name { cursor: pointer; }

.templates-main {
  flex: 1;
  min-width: 0;
  padding: 20px 24px 60px;
}
.templates-main-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.templates-main-title h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
}
.templates-main-meta {
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--mono);
}
.templates-main-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.templates-placeholder {
  flex: 1;
  padding: 60px 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}

.tpl-name-input, .tpl-team-input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
}
.tpl-name-input { font-weight: 600; min-width: 160px; }
.tpl-team-input { min-width: 60px; color: var(--text-faint); font-size: 12.5px; }
.tpl-name-input:hover, .tpl-team-input:hover, .tpl-num-input:hover {
  border-color: var(--border);
  background: var(--surface-2);
}
.tpl-name-input:focus, .tpl-team-input:focus, .tpl-num-input:focus {
  outline: none;
  border-color: var(--gold-dim);
  background: var(--surface-hover);
}
.tpl-readonly-num {
  color: var(--text-faint);
  font-family: var(--mono);
  padding: 6px 8px;
}
.tpl-num-input {
  width: 72px;
  text-align: right;
  font-family: var(--mono);
  font-size: 13.5px;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
}

.saved-drafts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}
.saved-drafts-empty { color: var(--text-faint); font-size: 12.5px; font-style: italic; }
.saved-draft-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}
.saved-draft-info { flex: 1; min-width: 0; }
.saved-draft-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-draft-date { font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); }

/* ---------- Projections: Tiers ---------- */
.rules-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.rules-share-row .pos-chip { width: 40px; text-align: center; flex-shrink: 0; }
.rules-share-row input[type="range"] { flex: 1; }
.rules-share-readout {
  width: 130px;
  flex-shrink: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}
.rules-count-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.rules-count-row .pos-chip { width: 40px; text-align: center; flex-shrink: 0; }
.rules-count-row .rules-count-current {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
}
.rules-count-row input[type="number"] {
  width: 70px;
  text-align: right;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--mono);
}
.rules-count-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 4px;
}
.rules-count-header-spacer { width: 40px; flex-shrink: 0; }
.rules-count-header .rules-count-current { flex: 1; }
.rules-count-col-label {
  width: 70px;
  flex-shrink: 0;
  text-align: right;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.row-count-badge {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

.tier-sensitivity-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.tier-sensitivity-field input {
  width: 64px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--mono);
}
.tier-position-section { margin-bottom: 24px; }
.tier-position-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tier-position-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 14px;
}
.tier-boxes-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.tier-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  min-width: 180px;
  flex: 1;
}
.tier-box-label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 8px;
}
.tier-box.unranked .tier-box-label { color: var(--text-faint); }
.tier-box-player {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-soft);
}
.tier-box-player:last-child { border-bottom: none; }
.tier-box-player-name { color: var(--text); }
.tier-box-player-pts { font-family: var(--mono); color: var(--text-faint); white-space: nowrap; }

/* ---------- Draft Analysis ---------- */
.analysis-wrap {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 24px;
}
.analysis-left { flex: 2; min-width: 0; }
.redux-overpay-wrap {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0 24px 20px;
}
.redux-overpay-wrap .analysis-panel { flex: 1; min-width: 0; }
.analysis-right {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.analysis-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

table.board-compact { min-width: 760px; }
.board-compact thead th { padding: 7px 8px; font-size: 10px; }
.board-compact td { padding: 6px 8px; font-size: 12px; }

.analysis-info-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 5px 0;
  border-bottom: 1px solid var(--border-soft);
}
.analysis-info-row:last-child { border-bottom: none; }
.analysis-info-label { color: var(--text-faint); }
.analysis-info-value { font-family: var(--mono); color: var(--text); }

.grade-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 5px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
}
.grade-a { background: rgba(76, 195, 138, 0.15); color: var(--green); }
.grade-b { background: rgba(232, 185, 63, 0.15); color: var(--gold); }
.grade-c { background: rgba(226, 86, 79, 0.12); color: var(--red); }
.grade-d { background: rgba(226, 86, 79, 0.22); color: var(--red); }
.grade-none { color: var(--text-faint); }

.ref-note { cursor: help; color: var(--text-faint); margin-left: 2px; }
.pct-note { color: var(--text-faint); font-size: 10.5px; }
.rank-top3 { color: var(--green); font-weight: 700; cursor: help; }
.rank-bottom3 { color: var(--red); font-weight: 700; cursor: help; }
#position-rankings-table td[title] { cursor: help; }

.owner-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.owner-link:hover { color: var(--gold); }
.owner-analysis-body p { margin: 0 0 12px; line-height: 1.55; color: var(--text); }
.owner-analysis-body p:last-child { margin-bottom: 0; }
.owner-analysis-meta { color: var(--text-faint); font-size: 11px; margin-top: 12px; }

.value-chart-svg { width: 100%; height: auto; display: block; }

.insight-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.insight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.insight-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.insight-card-owner { font-family: var(--display); font-size: 14px; }
.insight-card-assessment { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 8px 0; }
.insight-bullets {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 8px 0;
  padding-left: 18px;
}
.insight-bullets li { margin-bottom: 4px; }
.insight-bullets li:last-child { margin-bottom: 0; }
.insight-card-chart-svg { width: 100%; height: auto; display: block; margin-top: 8px; }
.insight-card-legend { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.round-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-dim);
  margin: 2px 8px 2px 0;
}
.round-legend-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Feedback widget ---------- */
.feedback-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.feedback-fab:hover { background: var(--surface-hover); color: var(--gold); border-color: var(--gold-dim); }
.feedback-fab:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }

/* ---------- Rank movement ----------
   Green = climbed, red = slid, in both cases smaller than the number
   they annotate so the rank itself still reads first. .rank-delta is the
   per-vendor "(+5)" on Source Ranks; .rank-arrow is the aggregate-rank
   arrow next to a player's name on the two boards. */
.rank-delta {
  font-size: 9.5px;
  font-family: var(--mono);
  margin-left: 3px;
  vertical-align: 1px;
}
.rank-delta.up { color: var(--green); }
.rank-delta.down { color: var(--red); }

.rank-arrow {
  font-size: 9px;
  margin-left: 4px;
  letter-spacing: -1px;
  vertical-align: 1px;
}
.rank-arrow.up { color: var(--green); }
.rank-arrow.down { color: var(--red); }

.adp-hold-note {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--red);
  border-left: 2px solid var(--red-dim);
  padding-left: 8px;
}
.adp-movement-badge {
  display: inline-block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--green); border: 1px solid var(--green-dim); border-radius: 4px;
  padding: 1px 5px; margin-left: 6px;
}
.adp-movement-pick {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text-dim); cursor: pointer; white-space: nowrap;
}

/* ---------- Admin hub ---------- */
.admin-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.admin-hub-card {
  display: block;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.admin-hub-card:hover { background: var(--surface-hover); border-color: var(--gold-dim); }
.admin-hub-card-title {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.admin-hub-card-body { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .stat-strip { gap: 16px; }
  .analysis-wrap { flex-direction: column; }
  .redux-overpay-wrap { flex-direction: column; }
  .analysis-right { min-width: 0; }
  .admin-hub-grid { grid-template-columns: 1fr; }
}