/* ============================================================
   MySolver design layer — overrides legacy styles.css
   Phase 1: tokens + app shell (sidebar/header) + base components
   Loaded AFTER styles.css so it wins on equal specificity.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- Raw palette ---- */
  --felt-50:#E8F2EC; --felt-100:#C9E1D2; --felt-200:#93C3A6; --felt-300:#5DA67B;
  --felt-400:#2E8458; --felt-500:#1F6B4A; --felt-600:#155239; --felt-700:#103E2C;
  --felt-800:#0B2A1F; --felt-900:#061812;

  --gold-50:#FBF5E6; --gold-100:#F5E6BD; --gold-200:#EDD391; --gold-300:#E4BE66;
  --gold-400:#D4A24B; --gold-500:#B8852E; --gold-600:#8C621D; --gold-700:#604211;

  --ink-0:#FFFFFF; --ink-50:#FAFAF7; --ink-100:#F1F1EC; --ink-200:#E2E3DC;
  --ink-300:#C9CBC2; --ink-400:#969A91; --ink-500:#6A6E66; --ink-600:#4B4F48;
  --ink-700:#2E322D; --ink-800:#1A1D19; --ink-900:#0E1110; --ink-950:#060807;

  --suit-spade:#0E1110; --suit-heart:#E5484D; --suit-diamond:#2563EB; --suit-club:#16A34A;

  --pos-500:#22C55E; --pos-600:#16A34A; --neg-500:#EF4444; --neg-600:#DC2626;
  --warn-500:#F59E0B; --info-500:#3B82F6;

  /* ---- Semantic (dark, default) ---- */
  --bg-0:#060807; --bg-1:#0B100E; --bg-2:#111815; --bg-3:#182320; --bg-4:#1F2C28;
  --fg-0:#F5F2EA; --fg-1:#C7CCC8; --fg-2:#8B948F; --fg-3:#5C6863; --fg-inv:#060807;
  --border:#1F2C28; --border-strong:#2C3D39; --border-focus:var(--gold-400);
  --accent-fg:#060807;
  --pos:var(--pos-500); --neg:var(--neg-500); --warn:var(--warn-500); --info:var(--info-500);

  /* ---- Type scale ---- */
  --font-display:'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ============================================================
     Legacy variable aliases — remap styles.css vars to new tokens
     so all var-driven rules recolour to felt-green / gold instantly.
     ============================================================ */
  --bg:var(--bg-1);
  --bg2:var(--bg-1);
  --panel:var(--bg-2);
  --panel2:var(--bg-3);
  --panel3:var(--bg-4);
  --text:var(--fg-0);
  --text2:var(--fg-1);
  --muted:var(--fg-2);
  --muted2:var(--fg-3);
  --line:var(--border);
  --line2:var(--border-strong);
  --accent:var(--gold-400);
  --accent2:var(--gold-300);
  --accent-soft:rgba(212,162,75,.14);
  --accent-softer:rgba(212,162,75,.07);
  --danger:var(--neg);
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 16px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  --font:var(--font-body);
}

/* ============================================================
   App shell — sidebar (240px) + header (56px) + scrollable content
   ============================================================ */
html { background: var(--bg-0); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-0) !important;
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

.shell { display: grid; grid-template-columns: 240px 1fr; height: 100vh; overflow: hidden; }

/* Sidebar */
.sidebar { background: var(--bg-1); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 14px 0; gap: 6px; overflow: hidden; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0 18px 16px; }
.sidebar .brand-mark { width: 28px; height: 38px; border-radius: 5px; background: #0E1A14; box-shadow: inset 0 0 0 1px rgba(212,162,75,.45); color: var(--gold-400); display: grid; place-items: center; font: 800 14px/1 var(--font-display); letter-spacing: -.04em; flex-shrink: 0; }
.sidebar .brand-word { font: 700 18px/1 var(--font-display); letter-spacing: -.025em; color: var(--fg-0); }
.sidebar .brand-word .my { color: var(--gold-400); font-weight: 800; font-style: normal; letter-spacing: -.02em; }
.sidebar .brand-byline { font: 500 9px/1.2 var(--font-body); color: var(--fg-3); text-transform: uppercase; letter-spacing: .16em; margin-top: 4px; }

.sidebar .nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.sidebar .nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 0; border-radius: 7px; cursor: pointer; color: var(--fg-2); background: transparent; font: 500 13.5px/1 var(--font-body); text-align: left; width: 100%; transition: background-color var(--dur,180ms) var(--ease,cubic-bezier(.2,.7,.2,1)), color var(--dur,180ms) var(--ease,cubic-bezier(.2,.7,.2,1)); }
.sidebar .nav-item:hover { background: var(--bg-2); color: var(--fg-0); transform: none; }
.sidebar .nav-item.active { background: var(--bg-3); color: var(--fg-0); }
.sidebar .nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: currentColor; }
.sidebar .nav-dot { width: 3px; height: 14px; border-radius: 2px; background: transparent; margin-left: auto; }
.sidebar .nav-item.active .nav-dot { background: var(--gold-400); }

.sidebar .footer { margin-top: auto; padding: 12px 18px 2px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.sidebar .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--felt-500), var(--felt-700)); display: grid; place-items: center; font: 700 11px/1 var(--font-body); color: var(--fg-0); }
.sidebar .user-name { font: 600 12.5px/1.2 var(--font-body); color: var(--fg-0); }
.sidebar .user-meta { font: 500 10px/1.2 var(--font-mono); color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* Main column */
.main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.header { display: flex; align-items: center; gap: 12px; padding: 0 22px; height: 56px; border-bottom: 1px solid var(--border); background: rgba(11,16,14,.85); backdrop-filter: blur(12px); flex-shrink: 0; position: sticky; top: 0; z-index: 20; }
.header h1 { margin: 0; font: 600 16px/1 var(--font-display); color: var(--fg-0); letter-spacing: -.01em; }
.header .crumb-sep { color: var(--fg-3); font-size: 12px; }
.header .meta { font: 500 12px/1.2 var(--font-mono); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.header .spacer { flex: 1; }

/* scrollbar-gutter: stable — резервируем место под вертикальный скроллбар, чтобы
   его появление/исчезновение не сдвигало ширину контента. Без этого при шаге в
   реплеере мигание скроллбара съедало ~17px справа: правый сайдбар «менялся в
   размере», а стол пересчитывал масштаб и дёргался. */
.content { flex: 1; overflow: auto; scrollbar-gutter: stable; padding: 22px 28px 32px; }
.content main { padding: 0; }

/* ============================================================
   Base components
   ============================================================ */
.btn {
  border: 1px solid var(--border-strong);
  background: var(--bg-3);
  color: var(--fg-0);
  border-radius: 8px;
  padding: 9px 14px;
  text-decoration: none;
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color var(--dur,180ms) var(--ease,cubic-bezier(.2,.7,.2,1)), border-color var(--dur,180ms) var(--ease,cubic-bezier(.2,.7,.2,1)), color var(--dur,180ms) var(--ease,cubic-bezier(.2,.7,.2,1));
}
.btn:hover { transform: none; background: var(--bg-4); border-color: var(--border-strong); }
.btn.primary { background: var(--gold-400); border-color: var(--gold-400); color: var(--accent-fg); }
.btn.primary:hover { background: var(--gold-300); border-color: var(--gold-300); box-shadow: var(--shadow-glow, 0 0 0 1px rgba(212,162,75,.35), 0 0 24px rgba(212,162,75,.2)); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-1); }
.btn.ghost:hover { background: var(--bg-3); color: var(--fg-0); }
.btn.danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #FCA5A5; }
.btn.danger:hover { background: rgba(239,68,68,.2); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }

input, textarea, select {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--fg-0);
  font-family: var(--font-body);
}
input::placeholder, textarea::placeholder { color: var(--fg-3); }
input:focus, textarea:focus, select:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(212,162,75,.15);
}
label { color: var(--fg-2); }

/* Cards (only non-prefixed tabs; replayer/saved/stats keep their own look until later phases) */
#tab-import .card, #tab-filters > .card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
  backdrop-filter: none;
}
#tab-import .card-head, #tab-filters > .card .card-head { background: transparent; border-bottom: 1px solid var(--border); }
.card h2 { color: var(--fg-0); letter-spacing: -.01em; }
.card p { color: var(--fg-2); }

/* Status / pipeline cards on import tab */
.status-card, .pipeline div { background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; }
.status-card b { color: var(--fg-0); font-variant-numeric: tabular-nums; }
.status-card span, .pipeline span { color: var(--fg-2); }
.pipeline b { color: var(--gold-400); }
.log { background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; color: var(--fg-1); font-family: var(--font-mono); }

/* ============================================================
   Import tab — drag-drop + right sidebar + recent imports
   ============================================================ */
.import-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.import-main { display: grid; gap: 16px; min-width: 0; }
.dz-picked { margin-top: 12px; display: grid; gap: 2px; max-width: 100%; }
.dz-picked b { font: 600 14px/1.25 var(--font-body); color: var(--fg-0); word-break: break-all; }
.dz-picked span { font-size: 12px; color: var(--fg-2); }

.dropzone {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 40px 24px; border: 1.5px dashed var(--border-strong); border-radius: 14px;
  background: var(--bg-2); cursor: pointer;
  transition: border-color var(--dur,180ms) var(--ease), background-color var(--dur,180ms) var(--ease);
}
.dropzone:hover { border-color: rgba(212,162,75,.5); }
.dropzone.drag { border-color: var(--gold-400); background: rgba(212,162,75,.06); }
.dropzone .dz-icon { width: 34px; height: 34px; color: var(--gold-400); }
.dropzone .dz-title { font: 600 18px/1.2 var(--font-display); color: var(--fg-0); }
.dropzone .dz-sub { font-size: 13px; color: var(--fg-2); max-width: 520px; }
.dropzone .dz-btn { margin-top: 8px; }

.import-fields { display: flex; justify-content: center; }
.import-field { display: grid; gap: 8px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; }
.import-field.opp-field { width: 100%; max-width: 560px; justify-items: center; text-align: center; }
.import-field-label { font: 600 10px/1.2 var(--font-body); color: var(--fg-2); text-transform: uppercase; letter-spacing: .08em; }
.import-field input[type="file"] { background: transparent; border: 0; padding: 0; color: var(--fg-2); font-size: 13px; }
.import-field input[type="file"]::file-selector-button {
  background: var(--bg-3); border: 1px solid var(--border-strong); color: var(--fg-1);
  border-radius: 8px; padding: 7px 12px; margin-right: 10px;
  font: 600 13px/1 var(--font-body); cursor: pointer;
  transition: background-color var(--dur,180ms) var(--ease), border-color var(--dur,180ms) var(--ease);
}
.import-field input[type="file"]::file-selector-button:hover { background: var(--bg-4); border-color: var(--border-strong); }

.import-run { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.import-progress { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.import-progress .ip-bar { height: 6px; border-radius: 999px; background: var(--bg-3); overflow: hidden; opacity: 0; transition: opacity var(--dur,180ms) var(--ease); }
.import-progress.active .ip-bar { opacity: 1; }
.import-progress .ip-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold-400), var(--gold-300)); transition: width var(--dur,180ms) var(--ease); }
.import-progress.running .ip-bar span { background: linear-gradient(90deg, var(--gold-400), var(--gold-300)); }
.import-progress.done .ip-bar span { background: var(--pos); }
.import-progress.error .ip-bar span { background: var(--neg); }
.import-progress .ip-line { font: 500 12px/1.4 var(--font-mono); color: var(--fg-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.import-progress.error .ip-line { color: var(--neg); }
.import-progress.done .ip-line { color: var(--pos); }
.side-note { margin: 0 0 10px; font-size: 12px; line-height: 1.4; color: var(--fg-2); }
.side-block .btn.full { width: 100%; justify-content: center; }

.admin-status {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  font: 500 12px/1.4 var(--font-body);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--fg-1);
}
.admin-status.is-working { border-color: var(--gold-400); color: var(--gold-400); background: rgba(212,162,75,.10); }
.admin-status.is-ok { border-color: var(--pos); color: var(--pos); background: rgba(22,163,74,.10); }
.admin-status.is-error { border-color: var(--neg); color: var(--neg); background: rgba(229,72,77,.10); }

.recent-imports { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.ri-head { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-display); color: var(--fg-0); margin-bottom: 12px; }
.ri-head i { width: 15px; height: 15px; color: var(--gold-400); }
.ri-row { display: grid; grid-template-columns: 1fr 70px 80px 160px 90px; gap: 10px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--fg-1); }
.ri-row .r { text-align: right; font-variant-numeric: tabular-nums; }
.ri-header { font: 600 10px/1.2 var(--font-body); color: var(--fg-2); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--border-strong); }
.ri-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-0); }
.ri-status { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; font-style: normal; }
.ri-status.ok { background: rgba(34,197,94,.14); color: var(--pos); }
.ri-status.warn { background: rgba(245,158,11,.14); color: var(--warn); }
.ri-empty { padding: 16px 8px; color: var(--fg-3); font-size: 13px; }

.import-side { display: grid; gap: 14px; }
.kpi.feat.db-total { background: linear-gradient(135deg, var(--felt-800), var(--felt-700)); border: 1px solid var(--gold-400); border-radius: 12px; padding: 16px; }
.db-total .k { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--gold-200); margin-bottom: 10px; }
.db-total .v { font: 700 36px/1 var(--font-mono); color: var(--gold-300); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.db-total .d { margin-top: 8px; font: 500 11px/1.3 var(--font-mono); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.side-block { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.side-block-h { font: 600 10px/1.2 var(--font-body); color: var(--fg-2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.import-side .status-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.opt-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; color: var(--fg-1); cursor: pointer; }
.opt-row input { width: 14px; height: 14px; accent-color: var(--gold-400); }
.opt-row.muted-opt { color: var(--fg-3); cursor: default; }
.opt-row em { margin-left: auto; font-style: normal; font: 600 9px/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--gold-300); background: rgba(212,162,75,.14); padding: 3px 6px; border-radius: 4px; }

@media (max-width: 1100px) {
  .import-layout { grid-template-columns: 1fr; }
  .import-fields { grid-template-columns: 1fr; }
  .ri-row { grid-template-columns: 1fr 56px 90px; }
  .ri-row span:nth-child(4) { display: none; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 5px; border: 2px solid var(--bg-1); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); border: 2px solid var(--bg-1); background-clip: padding-box; }

/* ============================================================
   PHASE 2 — Replayer table + poker primitives (felt-green / gold)
   Overrides legacy cyan styling, scoped to #tab-replayer.
   ============================================================ */

/* Replayer chrome */
#tab-replayer .card { background: var(--bg-2); border-color: var(--border); box-shadow: none; }
#tab-replayer .card-head { background: transparent; border-bottom: 1px solid var(--border); }
#tab-replayer .card-head h2 { color: var(--fg-0); }
#tab-replayer .card-head p { color: var(--fg-2); }
#tab-replayer .hand-list-card, #tab-replayer .action-card { background: var(--bg-2); border-color: var(--border); }

/* Buttons within replayer → design system */
#tab-replayer .btn.primary { background: var(--gold-400); border: 1px solid var(--gold-400); color: var(--accent-fg); box-shadow: none; font-weight: 600; }
#tab-replayer .btn.primary:hover { background: var(--gold-300); border-color: var(--gold-300); }
#tab-replayer .btn.ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--fg-1); box-shadow: none; }
#tab-replayer .btn.ghost:hover { background: var(--bg-3); border-color: var(--border-strong); color: var(--fg-0); }

/* Meta strip */
.replay-meta-strip { background: var(--bg-2); border: 1px solid var(--border); box-shadow: none; }
.replay-meta-item span, .replay-meta-controls span { color: var(--fg-2); }
.replay-meta-item b, .replay-meta-controls b { color: var(--fg-0); }
.replay-meta-controls { border-left: 1px solid var(--border); color: var(--fg-0); }

/* Table container + felt capsule */
#tab-replayer .table-wrap {
  background: radial-gradient(circle at 50% 46%, rgba(46,132,88,.10), transparent 40%), var(--bg-1);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 25px 70px rgba(0,0,0,.42);
}
#tab-replayer .table-wrap:before { background: radial-gradient(ellipse at 50% 47%, rgba(46,132,88,.10), transparent 58%); }
#tab-replayer .table-rim {
  background: linear-gradient(180deg, #15110B, #0F0D0A);
  box-shadow: 0 28px 60px rgba(0,0,0,.6), inset 0 0 0 2px rgba(212,162,75,.10);
}
#tab-replayer .table-felt {
  background: radial-gradient(ellipse at 50% 45%, var(--felt-400) 0%, var(--felt-700) 60%, var(--felt-900) 100%);
  box-shadow: inset 0 0 0 1px rgba(212,162,75,.18), inset 0 0 60px rgba(0,0,0,.55), 0 30px 80px rgba(0,0,0,.6);
}
.pot { background: rgba(6,24,18,.66); color: var(--fg-0); box-shadow: inset 0 0 0 1px rgba(212,162,75,.16); }

/* Board / hole cards — white 4-colour deck */
#tab-replayer .card-ui {
  background: var(--ink-0) !important;
  color: #0E1110;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 5px 0 rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.05);
  text-shadow: none;
}
#tab-replayer .card-ui .card-rank, #tab-replayer .card-ui .card-suit { color: inherit; }
#tab-replayer .card-ui.suit-spade { color: #0E1110; }
#tab-replayer .card-ui.suit-heart { color: var(--suit-heart); }
#tab-replayer .card-ui.suit-diamond { color: var(--suit-diamond); }
#tab-replayer .card-ui.suit-club { color: var(--suit-club); }
/* Card back (rubashka) — felt + gold "My" */
#tab-replayer .card-ui.hidden {
  background: var(--felt-800) !important;
  border: 1px solid rgba(212,162,75,.4);
  position: relative;
  color: transparent;
}
#tab-replayer .card-ui.hidden::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid var(--gold-400); border-radius: 5px; }
#tab-replayer .card-ui.hidden::before { content: "My"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-400); font: 800 15px/1 var(--font-display); letter-spacing: -.03em; }

/* Seat plates */
#tab-replayer .seat-panel { background: var(--bg-2); border: 1px solid var(--border-strong); box-shadow: 0 12px 26px rgba(0,0,0,.42); }
#tab-replayer .seat.hero .seat-panel { background: linear-gradient(180deg, var(--felt-700), var(--felt-900)); border-color: var(--gold-400); box-shadow: 0 0 0 1px rgba(212,162,75,.3), 0 0 26px rgba(212,162,75,.18), 0 16px 34px rgba(0,0,0,.48); }
#tab-replayer .seat.active .seat-panel { box-shadow: 0 0 0 2px var(--gold-400), 0 0 26px rgba(212,162,75,.22), 0 16px 36px rgba(0,0,0,.44); }
.seat-top span:first-child { background: rgba(212,162,75,.16); color: var(--gold-300); }
#tab-replayer .nick { color: var(--fg-0); }
#tab-replayer .stack { color: var(--fg-1); }
#tab-replayer .seat-action { color: var(--gold-300); }
.hero-hand-label { background: var(--gold-400); color: var(--accent-fg); }

/* Poker chips — design denominations */
.chip-bb01 { background: radial-gradient(circle at 34% 25%, #ffffff, #cfd2cb 38%, #6A6E66 39%, #4B4F48); }
.chip-bb05 { background: radial-gradient(circle at 34% 25%, #ffffff, #F1ECDC 38%, #E8E2D0 39%, #b9b196); }
.chip-bb1  { background: radial-gradient(circle at 34% 25%, #fbe6bd, #E4BE66 38%, #D4A24B 39%, #8C621D); }
.chip-bb5  { background: radial-gradient(circle at 34% 25%, #cfeede, #5DA67B 38%, #2A6C4A 39%, #103E2C); }
.chip-bb10 { background: radial-gradient(circle at 34% 25%, #ffd9d9, #E5484D 38%, #A03A3A 39%, #6e2222); }
.chip-bb20 { background: radial-gradient(circle at 34% 25%, #e7d9ff, #9B6BD8 38%, #5b21b6 39%, #3b0764); }
.chip-bb50 { background: radial-gradient(circle at 34% 25%, #d9e7ff, #4F86E8 38%, #2A6FDB 39%, #14358f); }

.chip-stack-label { background: rgba(6,24,18,.78); color: var(--fg-0); border: 1px solid rgba(212,162,75,.14); }
.chip-stack-pot .chip-stack-label { background: rgba(6,24,18,.82); color: var(--fg-0); }
.bet-stack .chip-stack-label { background: var(--ink-100); color: #0E1110; border-color: rgba(0,0,0,.12); }
.bet-stack.hero-bet .chip-stack-label { box-shadow: 0 0 0 2px rgba(212,162,75,.4), 0 8px 16px rgba(0,0,0,.35); }
.chip-overflow { background: rgba(6,12,9,.88); color: var(--fg-0); border: 1px solid rgba(212,162,75,.2); }

/* Dealer button */
.dealer-btn { background: radial-gradient(circle at 35% 28%, #fbe6bd, #D4A24B 46%, #8C621D); color: #1A1D19; border: 2px solid rgba(96,66,17,.7); }

/* Progress + current action */
.progress-line span { background: linear-gradient(90deg, var(--gold-300), var(--gold-500)); box-shadow: 0 0 16px rgba(212,162,75,.4); }
.current-action { background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-0); }

/* Action flow timeline */
.action-flow:before { background: linear-gradient(var(--gold-400), rgba(139,148,143,.24)); }
.flow-btn { color: var(--fg-1); }
.flow-btn:before { background: var(--fg-3); box-shadow: 0 0 0 3px rgba(92,104,99,.13); }
.flow-btn.active { background: rgba(212,162,75,.12); color: var(--fg-0); }
.flow-btn.active:before { background: var(--gold-400); box-shadow: 0 0 0 5px rgba(212,162,75,.18), 0 0 15px rgba(212,162,75,.6); }

/* Result cards (hand list) */
#tab-replayer .result-card:hover, #tab-replayer .result-card.active { border-color: var(--gold-400); background: var(--bg-3); box-shadow: 0 0 0 1px rgba(212,162,75,.35) inset; }

/* Responsive: collapse sidebar to a top strip on narrow screens */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .sidebar { flex-direction: row; align-items: center; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px 14px; }
  .sidebar .brand { padding: 0 14px 0 0; }
  .sidebar .nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .sidebar .nav-dot { display: none; }
  .sidebar .footer { margin-top: 0; border-top: 0; padding: 0; }
  .content { overflow: visible; }
}

/* ============================================================
   PHASE 3 — Statistics + Saved hands + filter iframe chrome
   Maps the cyan brand accent to gold; keeps semantic multi-hue
   spot/tree/action colours; shifts containers to felt tokens.
   ============================================================ */

/* ---- Remap legacy room-* vars (recolours much of Saved/Replayer) ---- */
#tab-replayer, #tab-saved {
  --room-bg: var(--bg-1);
  --room-panel: var(--bg-2);
  --room-panel2: var(--bg-3);
  --room-edge: var(--border);
  --room-edge2: var(--gold-400);
  --room-blue: var(--gold-400);
  --room-green: var(--felt-500);
  --room-felt: var(--felt-600);
  --room-text: var(--fg-0);
  --room-muted: var(--fg-2);
}

/* ---- Stats toolbar / chrome ---- */
.stats-toolbar h2 { color: var(--fg-0); }
.stats-controls select { background: var(--bg-2); border: 1px solid var(--border-strong); color: var(--fg-0); border-radius: 8px; }
.stats-selected-info { border: 1px solid var(--border); background: var(--bg-2); color: var(--fg-1); }
.stats-empty { border: 1px dashed rgba(212,162,75,.3); color: var(--fg-2); background: var(--bg-1); }
.stats-empty.error { border-color: rgba(239,68,68,.5); color: #FCA5A5; }
.stats-subtabs { border: 1px solid var(--border); background: var(--bg-2); }
.stats-mode-btn { color: var(--fg-2); }
.stats-mode-btn:hover { color: var(--fg-0); border-color: rgba(212,162,75,.3); background: rgba(212,162,75,.08); }
.stats-mode-btn.active { color: var(--accent-fg); background: var(--gold-400); box-shadow: 0 0 0 3px rgba(212,162,75,.14); }

/* ---- New visual dashboard (vd-*) ---- */
.vd-dashboard {
  background: radial-gradient(circle at top left, rgba(31,107,74,.22), transparent 35%), var(--bg-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.vd-card { background: var(--bg-2); border: 1px solid var(--border); box-shadow: none; color: var(--fg-1); }
.vd-card h3 { color: var(--fg-0); }
.vd-kpi { background: var(--bg-3); border: 1px solid var(--border); }
.vd-kpi span { color: var(--fg-2); }
.vd-kpi b { color: var(--fg-0); }
/* cyan brand accent → gold (overview / hud / outcome / preflop "blue") */
.vd-kpi.blue, .vd-card.blue { --vd: var(--gold-400); }
.vd-kpi.blue b, .vd-card.blue header b, .vd-card.blue .vd-click-value { color: var(--gold-300); }
.vd-click-value { background: rgba(212,162,75,.12); color: var(--gold-300); }
.vd-overview header h3::before, .vd-hud header h3::before, .vd-outcome header h3::before { background: var(--gold-400); }
.vd-section-title { border-color: var(--border); background: linear-gradient(90deg, rgba(212,162,75,.16), rgba(31,107,74,.12), transparent); }
.vd-section-title p { color: var(--fg-2); }
.vd-preflop-title { background: linear-gradient(90deg, rgba(212,162,75,.16), rgba(31,107,74,.12), transparent); }
/* bar fills: cyan→gold (semantic action fills like call/fold/3bet kept) */
.vd-bar-row i u, .vd-size-chart i u { background: linear-gradient(90deg, var(--gold-400), var(--gold-300)); }
.vd-triplet u { background: linear-gradient(180deg, var(--gold-400), var(--gold-300)); }
.vd-stacked-row > i u.open, .vd-stacked-row > i u.raise { background: linear-gradient(90deg, var(--gold-400), var(--gold-300)); }
.vd-composite-metric i u.raise { background: linear-gradient(90deg, var(--gold-400), var(--gold-300)); }
.vd-composite-metric i u.limp { background: linear-gradient(90deg, var(--felt-400), var(--felt-300)); }
.vd-heatmap button { background: color-mix(in srgb, var(--gold-400) calc(var(--p)*1%), rgba(255,255,255,.045)); }
/* hover / focus rings: cyan→gold */
.vd-kpi:hover, .vd-simple-metric:hover, .vd-bar-row:hover, .vd-triplet button:hover, .vd-heatmap button:hover, .vd-square button:hover, .vd-size-chart button:hover,
.vd-stacked-row:hover, .vd-donut:hover, .vd-spot-flow .vd-triplet button:hover, .vd-composite-metric:hover {
  outline: 1px solid rgba(212,162,75,.5); box-shadow: 0 0 0 3px rgba(212,162,75,.08);
}
.vd-spot-tab:hover { border-color: rgba(212,162,75,.45); box-shadow: 0 0 0 3px rgba(212,162,75,.07); }
.vd-tree-panel { border-color: var(--border); }
.vd-tree-node:hover, .vd-tree-root:hover, .vd-branch-card:hover { border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(212,162,75,.08), 0 14px 32px rgba(0,0,0,.26); }

/* ---- Old H2N popup (secondary mode): container + cyan values ---- */
.h2n-popup, .h2n-popup-v36 { background: var(--bg-1); border: 1px solid var(--border); }
.h2n-popup-v36 .h2n-card, .h2n-card { background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-1); }
.h2n-popup-v36 .h2n-val.good, .h2n-val.good { color: var(--gold-300); }
.h2n-popup-v36 .h2n-cell.clickable:hover .h2n-val, .h2n-popup-v36 .h2n-win.clickable:hover { filter: drop-shadow(0 0 6px rgba(212,162,75,.5)); }

/* ---- Stat detail popover ---- */
.stats-detail-popover { border: 1px solid rgba(212,162,75,.36); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); color: var(--fg-0); }
.stats-detail-value span { color: var(--gold-300); }
.stats-detail-actions button { border: 1px solid rgba(212,162,75,.3); background: rgba(212,162,75,.12); color: var(--gold-200); }
.stats-detail-actions button:hover { background: rgba(212,162,75,.22); color: var(--fg-0); }

/* ---- Saved hands — remaining cyan literals → gold/felt ---- */
#tab-saved .btn.primary { background: var(--gold-400); border: 1px solid var(--gold-400); color: var(--accent-fg); box-shadow: none; }
#tab-saved .btn.primary:hover { background: var(--gold-300); border-color: var(--gold-300); }
.plus-orb { color: var(--gold-300); border: 1px solid rgba(212,162,75,.4); background: rgba(212,162,75,.08); box-shadow: 0 0 26px rgba(212,162,75,.16); }
.action-illus { background: rgba(212,162,75,.10); border: 1px solid rgba(212,162,75,.33); color: var(--gold-200); }
.action-illus i { background: var(--gold-400); color: var(--accent-fg); }
.saved-action-card { border: 1px solid rgba(212,162,75,.28); background: radial-gradient(circle at 20% 50%, rgba(212,162,75,.12), transparent 44%), var(--bg-2); }
.training-count { border: 1px solid rgba(212,162,75,.28); background: rgba(212,162,75,.10); }
.training-count b { color: var(--gold-300); }
.saved-hands-intro { background: rgba(212,162,75,.07); border: 1px solid rgba(212,162,75,.22); }
.saved-hands-intro b { color: var(--gold-300); }
.hero-sort-btn.active { border-color: rgba(212,162,75,.55); color: var(--fg-0); background: rgba(212,162,75,.12); }
.collection-hero-row.rich .case-pill { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--accent-fg); box-shadow: 0 8px 18px rgba(212,162,75,.22); }
.hero-row-btn:hover { background: rgba(212,162,75,.10); }
.student-row { background: rgba(212,162,75,.06); }
.student-row.missing { background: rgba(245,158,11,.06); }
/* Saved mini replayer table → felt-green */
.saved-preview-table { background: radial-gradient(circle at 50% 45%, rgba(46,132,88,.12), transparent 52%), var(--bg-1); }
.mini-table-felt { background: radial-gradient(circle at 50% 42%, var(--felt-400), transparent 55%), linear-gradient(180deg, var(--felt-600), var(--felt-800)); }
.mini-seat.hero { border-color: var(--gold-400); box-shadow: 0 0 20px rgba(212,162,75,.22); }
.mini-seat small { color: var(--gold-300); }
.alias-mark { color: var(--gold-300); }

/* ============================================================
   PHASE 4 — Replayer: exact MySolver design-system layout
   ============================================================ */

/* Playing card (design-system pcard) */
.pcard { width: 44px; height: 62px; border-radius: 5px; background: var(--ink-0); display: flex; flex-direction: column; padding: 4px 6px; justify-content: space-between; box-shadow: 0 2px 0 rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.06); font-family: var(--font-display); flex-shrink: 0; }
.pcard .rank { font-size: 18px; line-height: 1; font-weight: 700; }
.pcard .suit { font-size: 18px; line-height: 1; align-self: flex-end; }
.pcard.s .rank, .pcard.s .suit { color: #0E1110; }
.pcard.h .rank, .pcard.h .suit { color: var(--suit-heart); }
.pcard.d .rank, .pcard.d .suit { color: var(--suit-diamond); }
.pcard.c .rank, .pcard.c .suit { color: var(--suit-club); }
.pcard.back { background: var(--felt-800); position: relative; }
.pcard.back::after { content: ""; position: absolute; inset: 4px; border: 1.5px solid var(--gold-400); border-radius: 3px; }
.pcard.back::before { content: "My"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-400); font: 800 13px/1 var(--font-display); letter-spacing: -0.03em; }
.pcard.xl { width: 125px; height: 180px; padding: 10px 13px; border-radius: 10px; box-shadow: 0 5px 0 rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.06); }
.pcard.xl .rank, .pcard.xl .suit { font-size: 65px; line-height: 1; font-weight: 800; }
.pcard.xl.back::after { inset: 9px; border-width: 2.5px; border-radius: 6px; }
.pcard.xl.back::before { font-size: 52px; letter-spacing: -0.04em; }

/* Layout */
#tab-replayer.tab-panel.active { display: flex; flex-direction: column; }
.rp-titlebar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 2px 0 14px; }
.rp-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-title h1 { margin: 0; font: 700 22px/1 var(--font-display); color: var(--fg-0); letter-spacing: -.01em; }
.rp-title-sub { font: 500 11px/1 var(--font-mono); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-suit-s { color: var(--fg-0); } .rp-suit-h { color: var(--suit-heart); } .rp-suit-d { color: var(--suit-diamond); } .rp-suit-c { color: var(--suit-club); }
.rp-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rp-nav .btn { padding: 11px 16px; font-size: 15px; }
.rp-nav .btn.primary { box-shadow: 0 0 0 1px rgba(212,162,75,.4), 0 6px 16px rgba(0,0,0,.45); }
.rp-nav .btn.felt { background: linear-gradient(180deg, var(--felt-700), var(--felt-900)); border: 1px solid rgba(212,162,75,.35); color: var(--gold-300); }
.rp-nav .btn.felt:hover { background: linear-gradient(180deg, var(--felt-600), var(--felt-800)); }

.rp-metastrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 18px; padding: 14px 0 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rp-meta-item .label { margin-bottom: 4px; }
.rp-meta-val { font: 600 13px/1.2 var(--font-mono); color: var(--fg-0); font-variant-numeric: tabular-nums; }

.rp-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: stretch; }
.rp-stage { display: flex; flex-direction: column; padding: 22px 28px 0; gap: 14px; min-width: 0; overflow: auto; scrollbar-gutter: stable; }

.rp-tablewrap { position: relative; width: 100%; display: flex; justify-content: center; overflow: hidden; flex: none; }
.rp-table { position: relative; flex: none; width: 2600px; height: 1560px; transform-origin: top center; }
.rp-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-3); }
.rp-felt { position: absolute; top: 28%; bottom: 28%; left: 18%; right: 18%;
  background: radial-gradient(ellipse at 50% 45%, var(--felt-400) 0%, var(--felt-700) 60%, var(--felt-900) 100%);
  border-radius: 9999px; border: 8px solid #0F0D0A;
  box-shadow: inset 0 0 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(212,162,75,.22), 0 30px 80px rgba(0,0,0,.6); }
.rp-felt-ring { position: absolute; inset: 14px; border: 1px solid rgba(212,162,75,.18); border-radius: 9999px; pointer-events: none; }

.rp-pot { position: absolute; top: auto; bottom: 934px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; z-index: 2; white-space: nowrap; }
.rp-pot-k { font: 700 20px/1 var(--font-mono); color: var(--gold-300); letter-spacing: -.01em; }
.rp-pot-v { font: 700 20px/1 var(--font-mono); color: var(--fg-0); font-variant-numeric: tabular-nums; }

.rp-board { position: absolute; top: auto; bottom: 724px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.rp-board-empty { width: 125px; height: 180px; border-radius: 10px; background: rgba(0,0,0,0.18); }

.rp-collected { position: absolute; top: auto; bottom: 600px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 2; }
.rp-collected-label { font: 700 20px/1 var(--font-mono); color: var(--fg-0); font-variant-numeric: tabular-nums; }

/* Фишки ставок — НАД плашками мест (z-index сидений = 3). Иначе FF-хад,
   удлинивший нижние плашки вверх, перекрывал блайнд/ставку (напр. BB). */
.rp-bet { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 5; }
.rp-bet-label { font: 700 20px/1 var(--font-mono); color: var(--fg-0); font-variant-numeric: tabular-nums; }

.rp-pile { position: relative; display: flex; align-items: flex-end; }
.rp-pile-grp { position: relative; }
.rp-pile-chip { position: absolute; left: 0; }
.rp-chip { display: block; filter: drop-shadow(0 4px 5px rgba(0,0,0,.55)); }

.rp-seat { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rp-seat.folded { opacity: .45; }
.rp-cards { display: flex; gap: 8px; }
.rp-cards.closed { gap: 6px; }
.rp-plate { position: relative; width: 260px; border-radius: 12px; padding: 11px 14px 12px; background: linear-gradient(180deg, rgba(20,28,24,.95), rgba(8,12,10,.95)); border: 2px solid var(--border-strong); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.rp-seat.hero .rp-plate { background: linear-gradient(180deg, var(--felt-700), var(--felt-900)); border-color: var(--gold-400); padding: 14px 18px 16px; box-shadow: 0 0 0 1px rgba(212,162,75,.35), 0 10px 28px rgba(0,0,0,.55); }
.rp-seat.active .rp-plate { box-shadow: 0 0 0 2px var(--gold-400), 0 0 26px rgba(212,162,75,.25), 0 10px 28px rgba(0,0,0,.55); }
.rp-plate-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-name { font: 700 17px/1.1 var(--font-display); color: var(--fg-0); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-seat.hero .rp-name { font-size: 22px; color: var(--gold-300); }
/* Размер шрифта подписи позиции = размеру никнейма (17px, у hero 22px). */
.rp-pos { font: 700 17px/1 var(--font-body); padding: 5px 10px; border-radius: 6px; background: var(--bg-3); color: var(--fg-1); letter-spacing: .04em; flex-shrink: 0; }
.rp-seat.hero .rp-pos { font-size: 22px; padding: 6px 12px; background: var(--gold-400); color: var(--ink-950); }
.rp-plate-mid { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-seat.hero .rp-plate-mid { margin-top: 10px; }
.rp-stack { font: 700 20px/1 var(--font-mono); color: var(--fg-0); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.rp-seat.hero .rp-stack { font-size: 28px; }
.rp-bb { font: 500 12px/1 var(--font-body); color: var(--fg-2); letter-spacing: .02em; margin-left: 3px; }
.rp-seat.hero .rp-bb { font-size: 16px; }
.rp-act { font: 700 12px/1 var(--font-body); padding: 5px 9px; border-radius: 5px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; background: rgba(212,162,75,.18); color: var(--gold-300); }
.rp-act-allin { background: rgba(239,68,68,.22); color: #FF8E8E; }
.rp-act-fold { background: rgba(255,255,255,.06); color: var(--fg-3); }
.rp-tag { display: inline-block; margin-top: 8px; font: 700 16px/1.1 var(--font-body); padding: 6px 12px; border-radius: 6px; color: #fff; letter-spacing: .01em; }
.rp-seat.hero .rp-tag { margin-top: 11px; }
.rp-ko { position: absolute; bottom: -14px; right: -14px; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, #D4A24B, #B8852E); border: 2px solid #0F0D0A; box-shadow: 0 5px 10px rgba(0,0,0,.55); font: 800 20px/1 var(--font-mono); color: #0E1110; font-variant-numeric: tabular-nums; z-index: 4; white-space: nowrap; }
.rp-ko.bb { background: linear-gradient(180deg, #2E6F4E, #1C4730); color: #F2EFE6; border-color: #0F0D0A; box-shadow: 0 5px 10px rgba(0,0,0,.55), 0 0 0 2px rgba(212,162,75,.4) inset; }
#koToggleBtn.on { border-color: var(--gold-400); color: var(--gold-400); background: rgba(212,162,75,.10); }
/* Дилерский баттон — лежит на сукне (координаты RP_DEALER_PLACE в app.js),
   увеличен вдвое против старого чипа на плашке (34px → 68px). */
.rp-dealer-felt {
  position: absolute; z-index: 2;
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(180deg, #F4EFE0, #D9CFB0); color: #0E1110;
  display: grid; place-items: center;
  font: 800 30px/1 var(--font-display);
  box-shadow: 0 6px 14px rgba(0,0,0,.6), inset 0 -3px 5px rgba(0,0,0,.18);
}

.rp-progress { margin-top: 6px; }
.rp-progress-bar { height: 3px; background: var(--bg-3); border-radius: 2px; position: relative; overflow: hidden; }
.rp-progress-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold-400); border-radius: 2px; transition: width var(--dur,180ms) var(--ease); }
.rp-current { padding: 12px 18px; background: var(--bg-1); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 13px/1 var(--font-mono); color: var(--fg-0); }

.rp-side { border-left: 1px solid var(--border); background: var(--bg-1); display: flex; flex-direction: column; overflow: hidden; }
.rp-side-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.rp-side-head-flow { border-bottom: 0; border-top: 1px solid var(--border); padding-bottom: 8px; }
.rp-side-sub { margin-top: 8px; font: 500 11px/1.4 var(--font-body); color: var(--fg-2); }
.rp-handlist { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; overflow: auto; max-height: 280px; }
.rp-handlist .result-card { padding: 10px 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--border); box-shadow: none; }
.rp-handlist .result-card:hover { border-color: var(--border-strong); background: var(--bg-2); }
.rp-handlist .result-card.active { background: var(--bg-3); border-color: var(--gold-400); box-shadow: 0 0 0 2px var(--gold-400), 0 0 0 4px rgba(212,162,75,.18); }
.rp-handlist .result-card { scroll-margin: 12px; }

/* Result-card top row: index + mini hero cards + position */
.result-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.result-card-top .result-index { margin: 0; }

/* Mark + delete icon buttons on each result card */
.rc-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.rc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border-radius: 5px;
  border: 1px solid var(--border); background: transparent; color: var(--fg-3);
  font: 600 11px/1 var(--font-body); cursor: pointer; user-select: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rc-icon:hover { color: var(--fg-0); border-color: var(--border-strong); background: var(--bg-3); }
.rc-icon.rc-mark.on { color: var(--gold-400); border-color: var(--gold-400); background: rgba(212,162,75,.12); }
.rc-icon.rc-del:hover { color: var(--neg); border-color: var(--neg); background: rgba(229,72,77,.10); }
/* Перо «есть заметка»: индикатор, виден только у раздач с заметкой. */
.rc-icon.rc-note { display: none; }
.rc-icon.rc-note.on {
  display: inline-flex;
  color: var(--gold-400); border-color: var(--gold-400);
  background: rgba(212,162,75,.12);
}
/* Лайк/дизлайк на карточке: приглушены, пока оценки нет; on — цветная рамка. */
.rc-icon.rc-like, .rc-icon.rc-dislike { font-size: 10px; filter: grayscale(1); opacity: .55; }
.rc-icon.rc-like:hover, .rc-icon.rc-dislike:hover { filter: none; opacity: 1; }
.rc-icon.rc-like.on { filter: none; opacity: 1; border-color: #3fb950; background: rgba(63,185,80,.14); }
.rc-icon.rc-dislike.on { filter: none; opacity: 1; border-color: var(--neg); background: rgba(229,72,77,.14); }

/* Persistent "marked" highlight on the card itself */
.rp-handlist .result-card.marked { border-color: var(--gold-400); box-shadow: inset 0 0 0 1px rgba(212,162,75,.45); }
.rp-handlist .result-card.marked.active { box-shadow: 0 0 0 2px var(--gold-400), 0 0 0 4px rgba(212,162,75,.22); }
.result-pos { margin-left: auto; font: 700 10px/1 var(--font-body); padding: 3px 7px; border-radius: 5px; background: var(--bg-2); color: var(--fg-1); letter-spacing: .04em; }
.rp-handlist .result-card.active .result-pos { background: var(--gold-400); color: var(--accent-fg); }

/* Mini hero cards in the hand list */
.rp-mini-hand { display: inline-flex; gap: 3px; }
.rp-mini-hand.empty { color: var(--fg-3); }
.rp-mini-card { display: inline-flex; align-items: center; gap: 1px; min-width: 22px; height: 26px; padding: 0 4px; border-radius: 4px; background: var(--ink-0); box-shadow: 0 1px 0 rgba(0,0,0,.5); font-family: var(--font-display); }
.rp-mini-card b { font: 800 13px/1 var(--font-display); }
.rp-mini-card i { font-size: 12px; font-style: normal; line-height: 1; }
.rp-mini-card.s b, .rp-mini-card.s i { color: #0E1110 !important; }
.rp-mini-card.h b, .rp-mini-card.h i { color: var(--suit-heart) !important; }
.rp-mini-card.d b, .rp-mini-card.d i { color: var(--suit-diamond) !important; }
.rp-mini-card.c b, .rp-mini-card.c i { color: var(--suit-club) !important; }
/* Folded (not VPIP'd) — plain de-emphasized white card */
.rp-mini-card.plain { background: var(--bg-4); box-shadow: none; opacity: .7; }
.rp-mini-card.plain b, .rp-mini-card.plain i { color: var(--fg-3) !important; }
.rp-handlist .result-index { color: var(--fg-2); }
.rp-handlist .result-card.active .result-index { color: var(--gold-300); }
.rp-handlist .result-card b { color: var(--fg-0); }
.rp-handlist .result-card .meta { color: var(--fg-2); }
.rp-side .info-list { display: none; }
.rp-actionflow { flex: 1; overflow: auto; padding: 0 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.rp-actionflow:before { display: none; }
.rp-actionflow .flow-btn { position: static; border: 0; border-left: 2px solid transparent; border-radius: 6px; background: transparent; padding: 8px 10px; color: var(--fg-1); }
.rp-actionflow .flow-btn:before { display: none; }
.rp-actionflow .flow-btn.active { background: var(--bg-3); border-left-color: var(--gold-400); color: var(--fg-0); }
.rp-actionflow .flow-btn small { color: var(--fg-3); }

@media (max-width: 1280px) {
  .rp-body { grid-template-columns: 1fr; }
  .rp-side { border-left: 0; border-top: 1px solid var(--border); }
  .rp-nav .btn { padding: 9px 12px; font-size: 13px; }
}

/* ============================================================
   PHASE 5 — Statistics (NEW popup only) aligned to design system.
   The "old popup" (.h2n-*) is intentionally left untouched.
   ============================================================ */

/* Toolbar / chrome */
.stats-toolbar { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
.stats-toolbar h2 { font: 600 16px/1.2 var(--font-display); color: var(--fg-0); }
.stats-toolbar p { color: var(--fg-2); }
.stats-controls select { background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--fg-0); }
.stats-selected-info { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; color: var(--fg-1); }
.stats-subtabs { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; gap: 4px; width: fit-content; }
.stats-mode-btn { border-radius: 7px; padding: 7px 14px; font: 500 13px/1 var(--font-body); color: var(--fg-2); }
.stats-mode-btn:hover { background: var(--bg-3); border-color: transparent; color: var(--fg-0); }
.stats-mode-btn.active { background: var(--bg-4); color: var(--fg-0); box-shadow: none; }

/* Dashboard container + cards → design .card language */
.vd-dashboard { background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; box-shadow: none; }
.vd-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: none; color: var(--fg-1); }
.vd-card h3 { font: 600 14px/1.2 var(--font-display); color: var(--fg-0); }
.vd-card p { color: var(--fg-2); }
.vd-card header > div { color: var(--fg-2); }

/* Section sub-labels: muted uppercase instead of legacy yellow */
.vd-card h4, .vd-size-chart h4, .bvb-grid h4, .vd-spot-switcher h4 { color: var(--fg-2); font: 600 10px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.bvb-grid h4 { text-align: center; }
.vd-bar-row span, .vd-heatmap label, .vd-triplet label, .vd-simple-metric span, .vd-composite-head span, .vd-river-table label, .vd-stacked-row > span, .vd-size-chart span { color: var(--fg-2); }
.vd-river-table > b { color: var(--fg-2); }

/* KPIs → design .kpi */
.vd-kpi { background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; }
.vd-kpi span { color: var(--fg-2); font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.vd-kpi b { font: 700 24px/1 var(--font-mono); color: var(--fg-0); font-variant-numeric: tabular-nums; }
.vd-kpi em { color: var(--fg-3); }

/* Numbers → tabular mono */
.vd-click-value, .vd-bar-row b, .vd-triplet b, .vd-simple-metric b, .vd-composite-head b, .vd-stacked-row > b, .vd-size-chart b, .vd-square b, .vd-donut b, .vd-tree-node b, .vd-branch-card b, .rvbb-node b { font-variant-numeric: tabular-nums; }

/* Bar tracks neutral; fills already gold/felt */
.vd-bar-row i, .vd-size-chart i, .vd-triplet i, .vd-composite-metric i, .vd-stacked-row > i { background: var(--bg-1); border: 1px solid var(--border); }

/* Spot switcher → flat design cards */
.vd-spot-switcher { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; }
.vd-spot-switcher h3 { color: var(--fg-0); }
.vd-spot-switcher p { color: var(--fg-2); }
.vd-spot-tab { background: var(--bg-3); border: 1px solid var(--border); box-shadow: none; }
.vd-spot-tab span { color: var(--fg-0); }
.vd-spot-tab em, .vd-spot-tab small { color: var(--fg-2); }

/* Decision-tree panels → flat felt */
.vd-tree-panel, .vd-street-tree-panel, .rvbb-flow-panel { background: var(--bg-1); border: 1px solid var(--border); box-shadow: none; }
.vd-tree-panel h3, .vd-street-tree-panel h3, .rvbb-flow-panel h3 { color: var(--fg-0); }
.vd-tree-panel p, .vd-street-tree-panel p, .rvbb-flow-panel p { color: var(--fg-2); }
.vd-tree-node em, .vd-branch-card em, .rvbb-node em, .vd-tree-root em { color: var(--fg-2); }
/* RvBB tree → 3 equal street columns */
.vd-street-tree-panel .vd-street-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vd-street-column { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px; min-height: 0; }
.vd-street-column h4 { color: var(--fg-0); font: 700 15px/1 var(--font-display); letter-spacing: .12em; text-align: center; margin: 0 0 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.vd-branch-group { background: var(--bg-1); border: 1px solid var(--border); }
.vd-branch-children { margin: 8px 0 0 8px; padding-left: 8px; }

/* Spot types → larger KPI-style cards */
.vd-spot-switch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vd-spot-tab { min-height: 92px; padding: 14px 16px; border-radius: 12px; grid-template-columns: 38px 1fr auto; gap: 12px; }
.vd-spot-tab i { width: 34px; height: 34px; font-size: 20px; }
.vd-spot-tab span { font: 700 15px/1.1 var(--font-display); }
.vd-spot-tab em { font: 700 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-0); }
.vd-spot-tab small { font-size: 11px; margin-top: 6px; }
@media (max-width: 1280px) { .vd-spot-switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Filters tab — slim header (title removed), actions right-aligned */
#tab-filters .filter-head { display: flex; justify-content: flex-end; border-bottom: 1px solid var(--border); }
#tab-filters .filter-head .actions-wrap { flex-wrap: wrap; gap: 8px; }

/* Tournament finder (filters side panel) */
.tournament-finder { display: grid; gap: 8px; margin-bottom: 12px; }
.tournament-hint { margin: 2px 0 4px; font: 500 11px/1.45 var(--font-body); color: var(--fg-3); }

/* Hero (students) picker — floating popover opened from the iframe Lineup badge */
.hero-pick-pop {
  position: fixed; z-index: 9999; width: 340px;
  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.6);
  display: grid; gap: 10px; max-height: 440px;
}
.hero-pick-pop-head { font: 700 12px/1 var(--font-display); color: var(--gold-400); text-transform: uppercase; letter-spacing: .06em; }
.hero-pick-search { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-3); color: var(--fg-0); font: 500 12px/1 var(--font-body); }
.hero-pick-list { display: grid; gap: 4px; overflow: auto; max-height: 300px; padding-right: 2px; }
.hero-pick-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; border: 1px solid transparent; margin: 0; }
.hero-pick-row:hover { background: var(--bg-3); }
.hero-pick-row.on { border-color: var(--gold-400); background: rgba(212,162,75,.10); }
.hero-pick-row.any { border-bottom: 1px solid var(--border); border-radius: 7px; }
.hero-pick-row input[type=checkbox] { accent-color: var(--gold-400); }
.hero-pick-row .hero-pick-name { color: var(--fg-0); font: 600 12px/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-pick-row .hero-pick-meta { color: var(--fg-3); font: 500 11px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-pick-foot { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.hero-pick-foot .btn { flex: 1; justify-content: center; }
.tournament-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.tournament-row { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); }
.tournament-row-main { display: grid; gap: 2px; min-width: 0; }
.tournament-row-main b { color: var(--fg-0); font: 600 13px/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-row-main span { color: var(--fg-2); font: 500 11px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.tournament-row-time { color: var(--fg-3); }
.tournament-row .small-actions { gap: 6px; }
.tournament-row .btn { font-size: 12px; padding: 7px 10px; }

/* ============================================================
   PHASE 6 — Player cards (Saved tab) aligned to design system
   ============================================================ */
.saved-collections-section, .poker-students-panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; }
.saved-section-head h2 { color: var(--fg-0); font: 600 16px/1 var(--font-display); }
.saved-section-head span { background: var(--bg-3); border: 1px solid var(--border); color: var(--fg-1); font-variant-numeric: tabular-nums; }

/* Player summary cards → design card + KPI language */
.player-summary-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
.player-summary-title h4 { color: var(--fg-0); font: 600 16px/1.2 var(--font-display); }
.player-summary-title p { color: var(--fg-2); }
.player-summary-stats div { background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; }
.player-summary-stats span { color: var(--fg-2); font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.player-summary-stats b { color: var(--fg-0); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.player-summary-meta { color: var(--fg-2); }
.player-summary-meta b { color: var(--fg-1); }

/* Avatar dots → felt gradient (design) */
.avatar-dot { background: linear-gradient(135deg, var(--felt-500), var(--felt-700)); color: var(--fg-0); }
.avatar-dot.a1, .avatar-dot.a2, .avatar-dot.a3, .avatar-dot.a4 { background: linear-gradient(135deg, var(--felt-500), var(--felt-700)); }

/* Student summary stat cards */
.student-stat-card { background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; }
.student-stat-card b { color: var(--fg-0); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.student-stat-card span { color: var(--fg-2); }

/* Empty state card */
.collection-empty-card { background: var(--bg-2); border: 1px dashed var(--border-strong); color: var(--fg-2); }
.collection-empty-card h3 { color: var(--fg-0); }
.collection-empty-card p { color: var(--fg-2); }

/* Collection cards → design tokens (replace legacy cyan/blue) */
.collection-card { background: var(--bg-2); border: 1px solid var(--border); box-shadow: none; }
.collection-card-menu { color: var(--fg-3); }
.collection-title, .collection-card .collection-count .count-strong { color: var(--fg-0); }
.collection-count, .collection-count span, .collection-details { color: var(--fg-2); }
.collection-note { color: var(--fg-2); }
/* Tags: training/preflop/postflop → neutral/gold/felt, no bright blue */
.collection-tag { color: var(--fg-1); background: var(--bg-3); }
.collection-tag.tag-green { background: rgba(31,107,74,.5); color: #93C3A6; }
.collection-tag.tag-blue { background: rgba(212,162,75,.18); color: var(--gold-300); }
.collection-tag.tag-preflop, .collection-tag.tag-purple { background: rgba(155,107,216,.25); color: #B998EA; }
.collection-tag.tag-postflop { background: rgba(229,138,46,.22); color: #FFA557; }
/* Count badges (case-pill) blue gradient → gold */
.collection-hero-row.rich .case-pill { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--accent-fg); box-shadow: none; }
.collection-hero-row.rich em, .collection-hero-row.rich i { color: var(--gold-300); }
.collection-hero-row.rich .hero-name { color: var(--fg-0); }
.collection-hero-row.rich .hero-sub, .collection-hero-row.rich small { color: var(--fg-2); }
.collection-hero-head { color: var(--fg-2); }
.hero-sort-btn, .hero-expand-btn { background: var(--bg-3); border: 1px solid var(--border); color: var(--fg-1); }
.hero-sort-btn.active { background: rgba(212,162,75,.14); border-color: rgba(212,162,75,.4); color: var(--gold-300); }
.avatar-dot, .avatar-dot.a1, .avatar-dot.a2, .avatar-dot.a3, .avatar-dot.a4 { background: linear-gradient(135deg, var(--felt-500), var(--felt-700)); color: var(--fg-0); }
/* Collection action buttons */
.collection-actions .btn.ghost { border: 1px solid var(--border-strong); }
.training-title.collection-title { background: var(--bg-3); border: 1px solid var(--border); color: var(--fg-0); }
.training-title.collection-title:focus { border-color: var(--gold-400); box-shadow: 0 0 0 2px rgba(212,162,75,.18); }

/* ============================================================
   Saved (collections) tab v2 — simplified, dashboard + DnD
   ============================================================ */
.collections-shell { display: flex; flex-direction: column; gap: 18px; }
.collections-head { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,2fr) auto; gap: 18px; align-items: center; padding: 18px 20px; }
.collections-head-main .room-kicker { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--gold-400); }
.collections-head-main h2 { margin: 6px 0 4px; font: 700 22px/1 var(--font-display); color: var(--fg-0); }
.collections-head-main p { margin: 0; font: 500 12.5px/1.45 var(--font-body); color: var(--fg-2); max-width: 52ch; }
.collections-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ckpi { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; text-align: center; }
.ckpi b { display: block; font: 700 20px/1 var(--font-display); color: var(--fg-0); font-variant-numeric: tabular-nums; }
.ckpi span { display: block; margin-top: 4px; font: 500 10px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.collections-head-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

.collections-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.collections-toolbar .ct-left { display: flex; align-items: baseline; gap: 8px; }
.collections-toolbar h3 { margin: 0; font: 700 16px/1 var(--font-display); color: var(--fg-0); }
.ct-count { font: 600 12px/1 var(--font-mono); color: var(--fg-3); background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 9px; }
.collections-toolbar .ct-right { display: flex; align-items: center; gap: 8px; }
.ct-search, .ct-sort { background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; color: var(--fg-0); padding: 8px 11px; font: 500 12.5px/1 var(--font-body); }
.ct-search { width: 220px; }

.collections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; align-items: start; }
.collections-grid .collection-card {
  display: flex; flex-direction: column; gap: 9px; padding: 14px 15px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--border); position: relative; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.collection-card.draggable { cursor: grab; }
.collection-card.dragging { opacity: .5; }
.collection-card.drop-before { border-color: var(--gold-400); box-shadow: -3px 0 0 0 var(--gold-400); }
.collection-card .cc-top { display: flex; align-items: center; gap: 8px; }
.cc-grip { color: var(--fg-3); font-size: 13px; cursor: grab; line-height: 1; }
.cc-del { margin-left: auto; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--fg-3); cursor: pointer; font-size: 11px; }
.cc-del:hover { color: var(--neg); border-color: var(--neg); background: rgba(229,72,77,.10); }
.cc-title { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; color: var(--fg-0); font: 600 14px/1.2 var(--font-display); padding: 8px 10px; width: 100%; }
.cc-title:focus { border-color: var(--gold-400); box-shadow: 0 0 0 2px rgba(212,162,75,.18); outline: none; }
.cc-count { font: 500 12px/1.3 var(--font-body); color: var(--fg-2); }
.cc-count-strong { font: 700 16px/1 var(--font-display); color: var(--gold-300); font-variant-numeric: tabular-nums; }
.cc-count small { color: var(--fg-3); }
.cc-source { font: 500 11px/1.35 var(--font-body); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-players { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-chip { font: 600 10.5px/1 var(--font-mono); color: var(--fg-1); background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; }
.cc-chip.more { color: var(--gold-300); }
.cc-note { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; color: var(--fg-1); font: 500 12px/1.4 var(--font-body); padding: 8px 10px; min-height: 38px; resize: vertical; width: 100%; }
/* Четыре действия в ряд переполняли карточку (кнопки не сжимаются уже текста).
   Раскладываем в сетку 2×2 и даём кнопкам сжиматься с многоточием. */
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.cc-actions .btn {
  justify-content: center; padding: 8px 10px; font-size: 12.5px;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   Students tab
   ============================================================ */
.students-shell { display: flex; flex-direction: column; gap: 18px; }
.students-grid2 { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.students-picker, .students-report, .students-compare { padding: 16px 18px; }
.students-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.students-picker-head b { font: 700 13px/1 var(--font-display); color: var(--fg-0); }
.students-picker-head input { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; color: var(--fg-0); padding: 6px 9px; font-size: 12px; width: 130px; }
.hero-picker-list { display: flex; flex-direction: column; gap: 2px; max-height: 460px; overflow: auto; margin-top: 8px; }
.student-manual-label { display: flex; flex-direction: column; gap: 6px; font: 600 12px/1 var(--font-body); color: var(--fg-1); }
.student-manual-label textarea { min-height: 280px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; color: var(--fg-0); font: 500 13px/1.6 var(--font-mono); padding: 12px; resize: vertical; }

.students-compare-table { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.sct-head, .sct-row { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(0,2fr) 64px 80px minmax(0,2.4fr) 28px; gap: 12px; align-items: center; }
.sct-head { padding: 6px 10px; font: 600 10px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); border-bottom: 1px solid var(--border); }
.sct-row { padding: 9px 10px; border-radius: 10px; }
.sct-row:hover { background: var(--bg-2); }
.sct-row.missing { opacity: .6; }
.sct-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sct-name b { display: block; font: 600 13px/1.2 var(--font-display); color: var(--fg-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sct-name small { display: block; font: 500 11px/1.3 var(--font-mono); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sct-vol { display: flex; align-items: center; gap: 8px; }
.sct-bar { flex: 1; height: 7px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.sct-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--felt-400), var(--gold-400)); border-radius: 999px; }
.sct-vol b { font: 700 12px/1 var(--font-mono); color: var(--fg-0); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.sct-pct { font: 600 12px/1 var(--font-mono); color: var(--gold-300); font-variant-numeric: tabular-nums; }
.sct-saved { font: 500 12px/1 var(--font-mono); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sct-pos { font: 500 11px/1.3 var(--font-mono); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sct-row .student-remove { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--fg-3); cursor: pointer; }
.sct-row .student-remove:hover { color: var(--neg); border-color: var(--neg); }

@media (max-width: 1100px) {
  .collections-head { grid-template-columns: 1fr; }
  .students-grid2 { grid-template-columns: 1fr; }
  .sct-head { display: none; }
  .sct-row { grid-template-columns: 1fr auto; row-gap: 6px; }
}

/* ============================================================
   EV / winnings graph (stats tab)
   ============================================================ */
.ev-card { margin: 14px 0; padding: 16px 18px; }
.ev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.ev-title h3 { margin: 0 0 3px; font: 700 16px/1 var(--font-display); color: var(--fg-0); }
.ev-actions { display: flex; gap: 8px; }
.ev-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.ev-kpi { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.ev-kpi b { display: block; font: 700 18px/1 var(--font-display); color: var(--fg-0); font-variant-numeric: tabular-nums; }
.ev-kpi span { display: block; margin-top: 4px; font: 500 10px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.ev-kpi.pos b { color: var(--pos); }
.ev-kpi.neg b { color: var(--neg); }
.ev-chart { width: 100%; }
.ev-empty { display: grid; place-items: center; min-height: 200px; color: var(--fg-3); font: 500 13px/1.4 var(--font-body); }
.ev-empty.error { color: var(--neg); }
.ev-svg { width: 100%; height: 280px; display: block; }
.ev-grid { stroke: var(--border); stroke-width: 1; }
.ev-grid-zero { stroke: var(--border-strong); stroke-dasharray: 3 3; }
.ev-ytick { fill: var(--fg-3); font: 500 10px/1 var(--font-mono); text-anchor: end; }
.ev-area { fill: rgba(212,162,75,.10); stroke: none; }
.ev-line { fill: none; stroke: var(--gold-400); stroke-width: 2; stroke-linejoin: round; }
.ev-svg.up .ev-area { fill: rgba(22,163,74,.12); }
.ev-svg.up .ev-line { stroke: var(--pos); }
.ev-svg.down .ev-area { fill: rgba(229,72,77,.12); }
.ev-svg.down .ev-line { stroke: var(--neg); }
.ev-endlabel { fill: var(--fg-1); font: 700 12px/1 var(--font-mono); }
@media (max-width: 900px) { .ev-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Weighted hand matrix (preflop stat click popover, solver/H2N-style)
   ============================================================ */
[data-stat-id].has-matrix { cursor: pointer; }
/* Two-column detail popover when a matrix is shown */
#statsDetailPopover.with-matrix { width: 700px; max-width: calc(100vw - 24px); }
.stats-detail-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
#statsDetailPopover.with-matrix .stats-detail-cols { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.stats-detail-matrix > b { display: block; font: 600 11px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); margin-bottom: 8px; }
.combo-matrix { display: grid; grid-template-columns: repeat(13, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.cm-cell {
  position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden;
  background: #1b2420; /* unfilled remainder (fold) */
  font: 600 7.5px/1 var(--font-mono); color: var(--fg-2); user-select: none;
}
.cm-cell.w-empty { background: var(--bg-3); color: var(--fg-3); }
/* fractional fill: each action is a full-height vertical column whose width = its
   weight, placed left→right side by side (solver/HRC style). A 12% action fills a
   12%-wide column; the rest stays dark (fold). */
.cm-fill { position: absolute; top: 0; bottom: 0; display: block; }
.cm-cell .cm-combo { position: relative; z-index: 2; font-size: 7px; opacity: .95; text-shadow: 0 1px 1px rgba(0,0,0,.55); }
.cm-cell .cm-pct { position: relative; z-index: 2; font-size: 8px; font-weight: 700; color: #F2EFE6; text-shadow: 0 1px 1px rgba(0,0,0,.55); }
.cm-cell.cm-dark .cm-combo, .cm-cell.cm-dark .cm-pct { color: #0E1110; text-shadow: none; }
/* Clickable cell → open the concrete hands of this combo in the replayer.
   A small ▶ glyph reveals on hover; the whole cell is the hit target. */
.cm-cell.cm-clickable { cursor: pointer; }
.cm-cell.cm-clickable:hover { outline: 2px solid var(--gold-400); outline-offset: -2px; z-index: 3; }
.cm-cell .cm-go {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #0E1110; background: rgba(212,162,75,.92);
  opacity: 0; transition: opacity .08s ease; pointer-events: none;
}
.cm-cell.cm-clickable:hover .cm-go { opacity: 1; }
.combo-matrix-foot { margin-top: 7px; font: 500 10px/1.3 var(--font-body); color: var(--fg-3); }
.cm-legend { display: flex; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.cm-leg { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-2); font: 600 11px/1 var(--font-body); }
.cm-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.combo-matrix-loading, .combo-matrix-empty { display: grid; place-items: center; min-height: 200px; color: var(--fg-3); font: 500 12px/1.4 var(--font-body); text-align: center; padding: 0 8px; }

/* ============================================================
   Stats player multi-select picker
   ============================================================ */
.stats-player-picker { position: relative; }
/* Looks like a select: visible chrome + chevron, so it reads as an active control. */
.stats-pick-toggle.btn.ghost {
  min-width: 240px; max-width: 300px; justify-content: space-between; text-align: left;
  overflow: hidden; white-space: nowrap; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--border-strong); color: var(--fg-0); cursor: pointer;
}
.stats-pick-toggle.btn.ghost::after { content: "▾"; color: var(--fg-3); font-size: 11px; flex-shrink: 0; }
.stats-pick-toggle.btn.ghost:hover { background: var(--bg-3); border-color: var(--gold-400); }
.stats-pick-toggle.btn.ghost.on { border-color: var(--gold-400); color: var(--gold-400); }
.stats-pick-toggle.btn.ghost.on::after { color: var(--gold-400); }
/* Fixed + JS-clamped to the viewport so the menu is ALWAYS fully on screen,
   regardless of toolbar width, horizontal overflow, or zoom. JS sets top/left. */
.stats-pick-menu {
  position: fixed; z-index: 9000; width: 340px; max-width: calc(100vw - 16px);
  background: var(--bg-1); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6); padding: 10px; display: grid; gap: 8px;
}
.stats-pick-menu[hidden] { display: none !important; }
.stats-pick-search { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-3); color: var(--fg-0); font: 500 12.5px/1 var(--font-body); }
.stats-pick-list { display: grid; gap: 2px; max-height: 320px; overflow: auto; }
.stats-pick-group { font: 600 10px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); padding: 8px 6px 4px; }
.stats-pick-opt { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; border: 1px solid transparent; }
.stats-pick-opt:hover { background: var(--bg-3); }
.stats-pick-opt.on { border-color: var(--gold-400); background: rgba(212,162,75,.10); }
.stats-pick-opt input[type=checkbox] { accent-color: var(--gold-400); }
.stats-pick-opt .spo-name { color: var(--fg-0); font: 600 12.5px/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-pick-opt .spo-meta { color: var(--fg-3); font: 500 11px/1.2 var(--font-mono); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-pick-foot { display: flex; align-items: center; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
/* TOT outcome square (WS/WN over LS/LN), like the H2N FF report. */
.mysolver-tot .tot-hands { font: 700 18px/1 var(--font-display); color: var(--fg-0); text-align: center; margin: 4px 0 8px; }
.mysolver-tot .tot-square { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mysolver-tot .tot-square .h2n-cell { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 0; }
.mysolver-tot .tot-square .h2n-val { font: 700 17px/1 var(--font-display); }

/* ============================================================
   Loading status — shown on each data tab while its initial fetch
   is in flight, so the UI never silently blanks out for many seconds
   waiting on the backend (saved hands, students, stats players).
   ============================================================ */
.ms-loading {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; margin: 8px 0;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--border);
  color: var(--fg-2);
  font: 500 13px/1.4 var(--font-body);
  min-height: 56px;
}
.ms-loading .ms-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-strong);
  border-top-color: var(--gold-400);
  animation: ms-spin .9s linear infinite;
}
.ms-loading .ms-loading-text { display: flex; flex-direction: column; gap: 2px; }
.ms-loading .ms-loading-title { color: var(--fg-0); font: 600 13px/1.3 var(--font-body); }
.ms-loading .ms-loading-sub { color: var(--fg-3); font: 500 11.5px/1.3 var(--font-body); }
.ms-loading.error {
  background: rgba(229, 72, 77, .08);
  border-color: rgba(229, 72, 77, .35);
  color: #ffb4b6;
}
.ms-loading.error .ms-spinner { display: none; }
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* Compact pill version for inline use inside an existing card */
.ms-loading-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--fg-2); font: 600 11.5px/1 var(--font-body);
}
.ms-loading-pill .ms-spinner-mini {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--gold-400);
  animation: ms-spin .9s linear infinite;
}

/* ============================================================
   Replayer post-filter panel — narrows the already-fetched
   searchResults list without re-querying the backend.
   ============================================================ */
.rp-postfilter {
  margin: 6px 0 10px;
  padding: 10px 11px 11px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.rp-postfilter[hidden] { display: none !important; }
.rp-postfilter-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.rp-postfilter-title {
  font: 700 11.5px/1 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold-400);
}
.rp-postfilter-count {
  margin-left: auto; font: 600 11.5px/1 var(--font-mono); color: var(--fg-3);
}
.rp-postfilter-reset {
  font: 600 11px/1 var(--font-body) !important;
  padding: 5px 9px !important; border-radius: 6px !important;
  color: var(--fg-2) !important;
}
/* «Ещё 500» — догрузка следующей порции раздач. */
.rp-postfilter-more {
  font: 600 11px/1 var(--font-body) !important;
  padding: 5px 9px !important; border-radius: 6px !important;
  color: var(--gold-400) !important;
  border-color: rgba(212, 162, 75, .45) !important;
  white-space: nowrap;
}
.rp-postfilter-more:hover {
  background: rgba(212, 162, 75, .12) !important;
  border-color: var(--gold-400) !important;
}
.rp-postfilter-more[disabled] { opacity: .55; cursor: wait; }
.rp-postfilter-more[hidden] { display: none !important; }
.rp-postfilter-reset:hover {
  background: rgba(229, 72, 77, .14) !important;
  color: #ffb4b6 !important;
  border-color: rgba(229, 72, 77, .35) !important;
}
.rp-postfilter-reset[disabled] { opacity: .4; cursor: not-allowed; }
/* Панель «Порядок» — кнопки-действия над списком раздач под фильтр. */
.rp-order {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin: 0 0 8px;
}
.rp-order[hidden] { display: none !important; }
.rp-order-label {
  font: 600 10px/1.2 var(--font-body);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-3);
  margin-right: 2px;
}
.rp-order-btn {
  padding: 5px 9px; border-radius: 7px;
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--fg-1); font: 600 11.5px/1.2 var(--font-body);
  cursor: pointer; white-space: nowrap;
}
.rp-order-btn:hover, .rp-order-btn:focus {
  border-color: var(--gold-400); color: var(--fg-0); outline: none;
}
.rp-order-btn.active {
  border-color: var(--gold-400);
  background: rgba(212, 162, 75, .10);
  color: var(--gold-400);
}
/* Заметка по раздаче (сайдбар реплеера). */
.rp-note { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 5px; }
.rp-note-head { display: flex; align-items: center; gap: 8px; }
/* Кнопки оценки/удаления текущей раздачи (рядом с заметкой). */
.rp-hand-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.rp-react-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; padding: 0; border-radius: 6px;
  border: 1px solid var(--border); background: transparent;
  font-size: 13px; line-height: 1; cursor: pointer; user-select: none;
  filter: grayscale(1); opacity: .6;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease, filter .12s ease;
}
.rp-react-btn:hover:not(:disabled) { filter: none; opacity: 1; border-color: var(--border-strong); background: var(--bg-3); }
.rp-react-btn:disabled { opacity: .25; cursor: default; }
#handLikeBtn.on { filter: none; opacity: 1; border-color: #3fb950; background: rgba(63,185,80,.14); }
#handDislikeBtn.on { filter: none; opacity: 1; border-color: var(--neg); background: rgba(229,72,77,.14); }
.rp-react-btn.rp-hand-del:hover:not(:disabled) { border-color: var(--neg); background: rgba(229,72,77,.10); }
.rp-note-status {
  margin-left: auto; font: 600 10.5px/1 var(--font-body); color: var(--gold-400);
}
.rp-note-status.err { color: var(--neg); }
.rp-note-text {
  width: 100%; resize: vertical; min-height: 56px;
  padding: 8px 9px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--fg-0); font: 400 12.5px/1.45 var(--font-body);
}
.rp-note-text::placeholder { color: var(--fg-3); }
.rp-note-text:focus { outline: none; border-color: var(--gold-400); }
.rp-note-text[disabled] { opacity: .55; cursor: not-allowed; }
.rp-postfilter-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
}
.rp-postfilter-field {
  display: flex; flex-direction: column; gap: 3px;
}
.rp-postfilter-field-wide { grid-column: 1 / -1; }
.rp-postfilter-field > span {
  font: 600 10px/1.2 var(--font-body);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-3);
}
.rp-postfilter-sel {
  width: 100%;
  padding: 6px 8px; border-radius: 7px;
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--fg-0); font: 500 12px/1.2 var(--font-body);
  cursor: pointer;
}
.rp-postfilter-sel:hover, .rp-postfilter-sel:focus {
  border-color: var(--gold-400); outline: none;
}
.rp-postfilter-sel.active {
  border-color: var(--gold-400);
  background: rgba(212, 162, 75, .10);
  color: var(--gold-400);
}
/* Multi-select dropdown — every post-filter field uses this shape. */
.rp-postfilter-multi { position: relative; }
.rp-postfilter-multi-toggle {
  display: flex; align-items: center; justify-content: space-between;
  text-align: left; gap: 8px;
  width: 100%;
}
.rp-postfilter-multi-toggle::after {
  content: "▾"; color: var(--fg-3); font-size: 11px; flex-shrink: 0;
}
.rp-postfilter-multi-toggle.active {
  border-color: var(--gold-400);
  background: rgba(212, 162, 75, .10);
  color: var(--gold-400);
}
.rp-postfilter-multi-toggle.active::after { color: var(--gold-400); }
.rp-postfilter-multi-menu {
  position: absolute; z-index: 60;
  top: calc(100% + 2px); left: 0; right: 0;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  display: grid; gap: 6px;
  max-height: 320px;
}
.rp-postfilter-multi-menu[hidden] { display: none !important; }
.rp-postfilter-multi-list { display: grid; gap: 1px; max-height: 240px; overflow: auto; }
.rp-postfilter-multi-opt {
  display: grid; grid-template-columns: 16px 1fr auto;
  align-items: center; gap: 8px;
  padding: 6px 7px; border-radius: 6px;
  cursor: pointer; border: 1px solid transparent;
  font: 500 12px/1.2 var(--font-body); color: var(--fg-0);
}
.rp-postfilter-multi-opt:hover { background: var(--bg-3); }
.rp-postfilter-multi-opt.on {
  border-color: var(--gold-400);
  background: rgba(212, 162, 75, .10);
}
.rp-postfilter-multi-opt input[type=checkbox] { accent-color: var(--gold-400); }
.rp-postfilter-multi-opt .pf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-postfilter-multi-opt .pf-meta { color: var(--fg-3); font: 500 10.5px/1 var(--font-mono); }
.rp-postfilter-multi-foot {
  display: flex; align-items: center; gap: 8px;
  padding-top: 6px; border-top: 1px solid var(--border);
}
.rp-postfilter-multi-foot .btn.ghost {
  font: 600 11px/1 var(--font-body) !important;
  padding: 4px 8px !important; border-radius: 6px !important;
}
.rp-postfilter-multi-empty {
  padding: 12px 8px; text-align: center;
  color: var(--fg-3); font: 500 11.5px/1.3 var(--font-body);
}
/* Banner shown when the server is sending an older compact_hand shape that
   doesn't include tour_type/room/level — those filters won't match anything
   until the server is restarted. */
.rp-postfilter-stale {
  margin: -2px 0 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(229, 165, 78, .10);
  border: 1px solid rgba(229, 165, 78, .35);
  color: #E5A54E;
  font: 500 11.5px/1.4 var(--font-body);
}
.rp-postfilter-stale[hidden] { display: none !important; }

/* ============================================================
   Students tab — Groups section.
   Each group is a card containing draggable student chips. An
   "Без группы" card always exists at the start. Drop targets are
   highlighted in gold while a chip is being dragged over them.
   ============================================================ */
.students-groups { display: flex; flex-direction: column; gap: 12px; }
.student-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.student-group {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  min-height: 140px;
  transition: border-color .12s ease, background .12s ease;
}
.student-group.drop-target {
  border-color: var(--gold-400);
  background: rgba(212, 162, 75, .10);
}
.student-group.ungrouped {
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
}
.student-group-head {
  display: flex; align-items: center; gap: 8px;
}
.student-group-name-input {
  flex: 1; min-width: 0;
  padding: 6px 10px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 7px; color: var(--fg-0);
  font: 700 13px/1.2 var(--font-display);
}
.student-group-name-input:focus {
  border-color: var(--gold-400); outline: none;
}
.student-group-name-input.locked { background: transparent; border-color: transparent; cursor: default; }
.student-group-count {
  flex-shrink: 0;
  font: 600 11px/1 var(--font-mono);
  color: var(--fg-3);
  padding: 4px 8px; border-radius: 999px;
  background: var(--bg-3);
}
.student-group-del {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-3); color: var(--fg-3);
  font: 700 13px/1 var(--font-body); cursor: pointer;
}
.student-group-del:hover {
  background: rgba(229, 72, 77, .15);
  border-color: rgba(229, 72, 77, .4);
  color: #ffb4b6;
}
.student-group-body {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 60px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .15);
  border: 1px dashed transparent;
}
.student-group.drop-target .student-group-body {
  border-color: var(--gold-400);
}
.student-group-empty {
  width: 100%;
  text-align: center;
  color: var(--fg-3);
  font: 500 11px/1.4 var(--font-body);
  align-self: center;
  padding: 12px 4px;
}
.student-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--fg-0); font: 600 11.5px/1 var(--font-body);
  cursor: grab; user-select: none;
}
.student-chip:hover {
  border-color: var(--gold-400);
}
.student-chip.dragging { opacity: 0.4; }
.student-chip .sc-count {
  font: 500 10.5px/1 var(--font-mono);
  color: var(--fg-3);
}

/* «Сохранить локально» — состояние «готово»: коллекция запечена в локальный
   sidecar и открывается в реплеере мгновенно. */
.btn.cc-bake.is-baked {
  color: var(--felt-200);
  border-color: var(--felt-500);
  background: rgba(46, 132, 88, .10);
}
.btn.cc-bake.is-baked:hover { border-color: var(--felt-300); }
.btn.cc-bake[disabled] { opacity: .6; }

/* Коллекция без готовой сводки — считается в фоне, карточка заполнится сама. */
.cc-pending { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1.3 var(--font-body); color: var(--fg-3); }
.cc-pending-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--gold-400); border-right-color: transparent; animation: cc-spin .8s linear infinite; flex: none; }
@keyframes cc-spin { to { transform: rotate(360deg); } }