/* apex – terminal

   An instrument, not a website.
   - Near-black field with a faint measuring grid; flat panels on hairlines.
   - Two voices: Geist for content and figures, Geist Mono in capitals for
     every label, unit and axis — the way an instrument is labelled.
   - One signal colour, lime: money you make. Blue is the Polymarket order
     book, red is loss and live, amber is stale data and your favorites.
   - Precise, small radii. A lime top edge marks the panel that matters. */

/* ============================== tokens ============================== */

:root,
/* The palette: neutrals in one cool hue (OKLCH h 286) in both themes; the
   brand lime; red, amber and blue in one band of lightness and chroma per
   theme, so no status colour shouts over another; acid accents beside the
   lime – gold for favourites, orange for the 50/50 risk, pink for selection. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0a0a0c; /* the page, the top and bottom bars, the side panels */
  --bg: #0a0a0c; /* fields, switches and segmented controls */
  --grid-line: rgba(255, 255, 255, 0.016);
  --panel: #111114;
  --panel-2: #17171b;
  --line: #222228;
  --line-strong: #303038;
  --bracket: #74747e;
  --fill: #1b1b20;
  --fill-hover: #24242a;
  --label: #f2f2f3;
  --secondary: #8b8b94;
  --tertiary: #6c6c75;
  --magenta: #ff2fb9; /* acid pink, the lime's pair */
  --signal: #d7ff3f; /* the lime itself: fills */
  --signal-ink: #d7ff3f; /* lime as text */
  --signal-mark: #d7ff3f; /* lime as thin lines, bars and dots */
  --signal-tint: rgba(215, 255, 63, 0.11);
  --signal-line: rgba(215, 255, 63, 0.35);
  --on-signal: #0a0a0c;
  /* A ticked box and a switch that is on; selected text. */
  --check: #d7ff3f;
  --check-line: #d7ff3f;
  --check-tick: #0a0a0c;
  --badge-new: #d7ff3f; /* the count of new deals by the journal's ← */
  --on-badge-new: #0a0a0c;
  --selection: #ff2fb9;
  --on-selection: #0a0a0c;
  --switch-on: rgba(215, 255, 63, 0.11);
  --switch-on-line: rgba(215, 255, 63, 0.35);
  --switch-knob-on: #d7ff3f;
  --blue: #6799f7;
  --blue-tint: rgba(103, 153, 247, 0.2);
  --red: #ff655a;
  --red-tint: rgba(255, 101, 90, 0.12);
  --amber: #ffb800; /* acid gold: favourites and soft warnings, clear of the lime */
  --amber-tint: rgba(255, 184, 0, 0.13);
  --risk: #ff8c1a; /* the 50/50 risk: acid orange, midway between the gold and the red */
  --risk-tint: rgba(255, 140, 26, 0.18);
  --risk-line: rgba(255, 140, 26, 0.45);
  --solid: #f2f2f3; /* the second solid button */
  --on-solid: #0a0a0c;
  --backdrop: rgba(0, 0, 0, 0.62);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] {
  color-scheme: light;
  /* A light grey page with white panels lifted off it by a hairline and the
     faintest shadow; neutrals in one cool grey, ink near black. Colour is
     kept for meaning, each in one calm band so none shouts: green for money
     made and the main action, blue for Polymarket, red for loss and live,
     gold for stale data and favourites, orange for the 50/50 risk. */
  --canvas: #f5f6f8; /* the page, the top and bottom bars, the side panels */
  --bg: #ffffff; /* fields */
  --grid-line: rgba(16, 24, 40, 0.028);
  --panel: #ffffff;
  --panel-2: #f7f8fa; /* a row under the pointer, the open row */
  --line: #e4e7ec;
  --line-strong: #d0d5dd;
  --bracket: #98a2b3;
  --fill: #f2f4f7;
  --fill-hover: #eaecf0;
  --label: #101828;
  --secondary: #475467;
  --tertiary: #98a2b3;
  --magenta: #ff2fb9;
  /* The controls are ink and white, as a printed page; colour is left to
     the data – green for every gain and its marks, blue for Polymarket,
     red for loss, gold for a warning. The main button is ink. */
  --signal: #101828;
  --signal-ink: #16a34a;
  --signal-mark: #16a34a;
  --signal-tint: rgba(22, 163, 74, 0.09);
  --signal-line: rgba(22, 163, 74, 0.45);
  --on-signal: #ffffff;
  --check: #16a34a;
  --check-line: #16a34a;
  --check-tick: #ffffff;
  --badge-new: #16a34a;
  --on-badge-new: #ffffff;
  --selection: rgba(22, 163, 74, 0.16);
  --on-selection: #101828;
  --switch-on: #16a34a;
  --switch-on-line: #16a34a;
  --switch-knob-on: #ffffff;
  --blue: #1a56db; /* the bids and Polymarket's buttons */
  --blue-tint: rgba(26, 86, 219, 0.09);
  --red: #d92d20;
  --red-tint: rgba(217, 45, 32, 0.08);
  --amber: #d97706; /* warnings: a clear amber – the mustard gold looked dull on white */
  --amber-tint: rgba(217, 119, 6, 0.1);
  --risk: #e04f16;
  --risk-tint: rgba(224, 79, 22, 0.1);
  --risk-line: rgba(224, 79, 22, 0.4);
  --solid: #ffffff; /* the second button: white with a border, as the plain ones */
  --on-solid: #101828;
  /* Polymarket's actions: the white second button beside the ink one. */
  --poly: #ffffff;
  --on-poly: #101828;
  --poly-line: #d0d5dd;
  --poly-hover: #f9fafb;
  --backdrop: rgba(16, 24, 40, 0.32);
  --shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.06);
  --lift: 0 1px 2px rgba(16, 24, 40, 0.05); /* panels off the page */
  --field-line: #d0d5dd;
  --focus-ring: #101828;
  --focus-line: #667085;
}

:root {
  --field-line: var(--line); /* the border of a field: the panels' hairline, a step darker on light */
  --primary-line: transparent; /* the main button's edge: none on the lime */
  --focus-ring: var(--signal-ink); /* keyboard focus: lime on dark, ink on light */
  --focus-line: var(--signal-line); /* a field being typed in */
  --lift: none; /* a panel's shadow: none on the dark page */
  --poly: var(--solid); /* Polymarket's buttons: the second button here, drawn in its blue in the light theme */
  --on-poly: var(--on-solid);
  --poly-line: transparent;
  --poly-hover: var(--solid);
  --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --topbar: 48px;
  --statusbar: 30px;
  --zoom: 1; /* the "Масштаб" setting; heights taken from the window divide by it */
  --radius: 2px; /* panels: square */
  --radius-s: 3px; /* controls and surfaces inside panels */
  --radius-xs: 2px; /* chips */
  /* The page field: a measuring grid fixed to the viewport, so every surface
     painted with it (body, sticky toolbar) lines up seamlessly. */
  --page-bg:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 120px 120px fixed,
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 120px 120px fixed,
    var(--canvas);
}

/* =============================== base =============================== */

* { box-sizing: border-box; }
::selection { background: var(--selection); color: var(--on-selection); }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--canvas); }
body {
  margin: 0;
  min-height: calc(100vh / var(--zoom));
  padding-bottom: var(--statusbar);
  color: var(--label);
  font: 14px/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  background: var(--page-bg);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; }
:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 2px; }
input::placeholder { color: var(--tertiary); }

/* Slider (util.js sliderHTML), the volume: a quiet line across the row, lit
   lime up to the thumb – the lime square of the switches – and the value beside
   it. The line keeps 6px in from each end, so the square is never cut; the
   invisible native input on top has a 12px thumb to travel the same span. */
.mini-slider { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; max-width: 320px; }
.mini-slider .slider-value { min-width: 36px; color: var(--label); font: 500 12.5px var(--mono); text-align: right; }
.slider { --inset: 6px; position: relative; flex: 1; min-width: 140px; height: 24px; }
.slider-track { position: absolute; inset: 0; }
.slider-track::before, .slider-fill { content: ""; position: absolute; top: 50%; left: var(--inset); height: 2px; border-radius: 1px; transform: translateY(-50%); }
.slider-track::before { right: var(--inset); background: var(--line); }
.slider-fill { width: calc((100% - 2 * var(--inset)) * var(--pos)); background: var(--signal-mark); }
.slider-thumb { position: absolute; top: 50%; left: calc(var(--inset) + (100% - 2 * var(--inset)) * var(--pos)); width: 12px; height: 12px; border-radius: 2px; background: var(--signal-mark); box-shadow: 0 0 0 3px var(--panel); transform: translate(-50%, -50%); }
.slider input[type="range"] { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; opacity: 0; cursor: pointer; }
.slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 24px; }
.slider input[type="range"]::-moz-range-thumb { width: 12px; height: 24px; border: 0; }
.slider:has(input:focus-visible) .slider-thumb { outline: 1px solid var(--focus-ring); outline-offset: 3px; }

.is-good { color: var(--signal-ink); }
.is-bad { color: var(--red); }

/* The instrument label: mono capitals. */
.section-label, .field-label, .stat-label, .j-label, .list-head, .book-head, .set-title, .group-label,
.hero-meta span, .leg-nums span, .src-group, .j-thead, .card-title, .panel-title,
.calc-leg-head, .calc-grid label, .calc-budget, .kv dt, .edit-field > span, .edit-summary span {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary);
}
.field-label b { color: var(--label); font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 13px; line-height: 1; }
.note { margin: 8px 0 0; color: var(--secondary); font-size: 12px; line-height: 1.5; }
.link-btn { padding: 0; border: 0; background: none; color: var(--label); font-size: 13px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.link-btn:hover { text-decoration-color: var(--label); }

/* ============================== panels ============================== */

/* Every panel is one frame: a hairline with square corners. Only the panel
   with the result carries a lime top edge. */
.card, .feed-list, .hero, .legs, .panel, .j-table, .group, .modal-panel {
  position: relative; border: 1px solid var(--line); border-radius: 2px; background-color: var(--panel);
}
/* The profit panel is the one that matters: a lime hairline runs along its
   top edge from above the profit and fades out across, with a faint light
   falling from it. A deal that went – or a loss – turns it grey or red. The
   sign-in and subscription cards wear the same edge. */
.hero, .signin-form, .auth-card { --edge: var(--signal-mark); background-image: radial-gradient(60% 140% at 0% 0%, color-mix(in srgb, var(--edge) 8%, transparent), transparent 70%); }
.hero::after, .signin-form::after, .auth-card::after {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, var(--edge), color-mix(in srgb, var(--edge) 35%, transparent) 45%, transparent 90%);
}


/* On white the light from the edge only muddies the panel: the edge alone stays. */
:root[data-theme="light"] :is(.hero, .signin-form, .auth-card) { background-image: none; }

/* The light theme's parts. The dark theme's flat strips read as holes on a
   light page: here the panels lift off it, a segmented control is a grey
   track with the chosen cell in white, chips sit on white, and a button
   darkens under the pointer instead of glowing. */
.card, .feed-list, .hero, .legs, .panel, .j-table, .group, .more, .wallet-status, .wallet-balances, .trade-confirm, .admin-panel, .admin-kpis, .ch-stage { box-shadow: var(--lift); }
:root[data-theme="light"] :is(.signin-form, .auth-card) { box-shadow: 0 16px 40px -16px rgba(16, 24, 40, 0.16), var(--lift); }
:root[data-theme="light"] :is(.seg, .mini-seg) { border-color: transparent; background: var(--fill-hover); }
:root[data-theme="light"] :is(.seg, .mini-seg) button.is-on { background: var(--panel); color: var(--label); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 0 0 1px rgba(16, 24, 40, 0.04); }
:root[data-theme="light"] .chip { background: var(--panel); }
:root[data-theme="light"] .btn-primary:hover { filter: none; background: #1d2939; }
/* Favourites and the journal's count are marks, not warnings: ink, not gold. */
:root[data-theme="light"] :is(.fav-btn.is-on, .mark.fav) { color: var(--label); }
:root[data-theme="light"] .fav-card .card-empty kbd { border-color: var(--line-strong); color: var(--secondary); }
:root[data-theme="light"] .journal-btn .nav-badge { background: var(--label); color: #ffffff; }
:root[data-theme="light"] .trade-confirm { border-color: var(--field-line); }
:root[data-theme="light"] .presets button.is-on { border-color: var(--label); color: var(--label); } /* chosen as a chip is: in ink */
:root[data-theme="light"] :is(.row.is-open, .fav-row.is-open) { box-shadow: inset 2px 0 0 var(--label); } /* the open deal: a selection, not a gain */
:root[data-theme="light"] .btn-solid:not(.btn-poly) { border-color: var(--field-line); }
:root[data-theme="light"] .btn-solid:hover { filter: none; background: var(--fill); }
:root[data-theme="light"] .btn-poly:hover { background: var(--poly-hover); }

.topbar, .statusbar, .drawer-panel { background: var(--canvas); }

/* =============================== controls =============================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--panel); color: var(--label);
  font-size: 13px; font-weight: 500; white-space: nowrap; transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--fill-hover); border-color: var(--tertiary); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.is-on { border-color: var(--signal-line); background: var(--signal-tint); color: var(--signal-ink); }
.btn-primary { min-height: 38px; border-color: var(--primary-line); background: var(--signal); color: var(--on-signal); font-weight: 600; }
.btn-primary:hover { background: var(--signal); border-color: var(--primary-line); filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }
/* The second step of a deal: solid, but not the signal colour. */
.btn-solid { border-color: transparent; background: var(--solid); color: var(--on-solid); font-weight: 600; }
.btn-solid:hover { background: var(--solid); border-color: transparent; filter: brightness(0.92); }
.btn-plain { justify-self: start; min-height: 30px; padding: 0 10px; border-color: transparent; background: none; }
.btn-plain:hover { background: var(--fill); border-color: transparent; }
.btn-plain.is-on { background: var(--signal-tint); border-color: transparent; }
kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin-left: 2px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: transparent; color: var(--secondary);
  font: 500 10px var(--mono); text-transform: uppercase;
}
.btn-poly { border-color: var(--poly-line); background: var(--poly); color: var(--on-poly); }
.btn-poly:hover { border-color: var(--poly-line); background: var(--poly-hover); }
:root[data-theme="light"] .btn-poly:hover { filter: none; }
.btn-primary kbd, .btn-solid kbd { border-color: currentColor; color: inherit; opacity: 0.55; }

.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 1px solid transparent; border-radius: var(--radius-s); background: none; color: var(--secondary); font-size: 17px; line-height: 1;
}
.icon-btn:hover { border-color: var(--line); background: var(--panel); color: var(--label); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.x-icon { display: block; flex: none; }
/* The top bar's icons: thin lines with rounded ends and corners, like the risk
   sign, over a faint fill of their shape in the same colour. */
.ui-icon { display: block; flex: none; }
.ui-icon .ui-fill { fill: currentColor; fill-opacity: 0.16; stroke: none; }
.ui-icon .ui-dot { fill: currentColor; stroke: none; }

/* Segmented control: a bordered strip on the page's dark ground, the chosen
   cell filled. */
.seg { display: inline-flex; flex: none; gap: 0; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); }
.seg button { height: 26px; padding: 0 12px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--secondary); font-size: 13px; font-weight: 500; white-space: nowrap; }
.seg button:hover { color: var(--label); }
.seg button.is-on { background: var(--fill-hover); color: var(--label); }
.mini-seg { display: inline-flex; flex: none; padding: 1px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--bg); }
.mini-seg button { width: 22px; height: 18px; padding: 0; border: 0; border-radius: 1px; background: none; color: var(--tertiary); font: 500 11px var(--mono); }
.mini-seg button.is-on { background: var(--fill-hover); color: var(--label); }

select {
  height: 30px; padding: 0 28px 0 10px; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--field-line); border-radius: var(--radius-s); color: var(--label); font-size: 13px;
  background:
    linear-gradient(45deg, transparent 50%, var(--secondary) 50%) calc(100% - 14px) 52% / 4px 4px no-repeat,
    linear-gradient(135deg, var(--secondary) 50%, transparent 50%) calc(100% - 10px) 52% / 4px 4px no-repeat,
    var(--panel);
}
select:hover { border-color: var(--line-strong); }
/* The ring sits on the border: the scrolling list column would clip an outer outline */
select:focus-visible { outline: 0; border-color: var(--focus-ring); }

/* Text fields */
.input-suffix, .calc-grid input, .calc-budget input, .set-control, .j-search, .edit-field input, .edit-money {
  border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--bg); color: var(--label); outline: 0;
}
.input-suffix:focus-within, .calc-grid input:focus, .calc-budget input:focus, .set-control:focus-within,
.j-search:focus, .edit-field input:focus, .edit-money:focus-within { border-color: var(--focus-line); }
.input-suffix { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; }
.input-suffix input { flex: 1; width: 0; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font-size: 17px; font-weight: 500; }
.input-suffix input[readonly] { color: var(--secondary); }
/* A word in an amount field ("без лимита") is a note, not an amount: mono and small, as the hints. */
.input-suffix input::placeholder { font: 400 13px var(--mono); }
.input-suffix span { color: var(--secondary); font: 12px var(--mono); }

/* Switch: a square track; on, a lime thumb on dark, a white thumb on a green
   track in the light theme. */
.switch { position: relative; flex: none; width: 34px; height: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--bg); transition: background 0.15s, border-color 0.15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 1px; background: var(--tertiary); transition: transform 0.15s, background 0.15s; }
.toggle-row input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row input:checked + .switch { border-color: var(--switch-on-line); background: var(--switch-on); }
.toggle-row input:checked + .switch::after { transform: translateX(16px); background: var(--switch-knob-on); }
.toggle-row input:disabled + .switch { opacity: 0.4; }
.toggle-row input:focus-visible + .switch { outline: 1px solid var(--focus-ring); outline-offset: 2px; }

/* Status dots */

/* Chips */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 0 5px; border-radius: var(--radius-xs); font: 500 10.5px/16px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.tag.is-live { background: var(--red-tint); color: var(--red); }
/* The risk mark: a thin warning sign in orange, drawn like the top bar's
   icons, with no plate under it; what the risk is shows on hover (and in the
   deal, on a click). */
.tag.is-cancel { justify-content: center; width: 16px; height: 16px; padding: 0; color: var(--risk); }
.tag.is-cancel svg { display: block; flex: none; } /* RISK_ICON, 14 px */
/* The panel of the ⚠ and Health tags: a small card under the tag that opened
   it (.detail-headline is its frame), over the page. The title, the reason,
   the sum a cancellation leaves on one line, what to do. */
.cancel-alert {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(360px, 100%);
  display: grid; gap: 7px; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--panel); box-shadow: var(--shadow);
}
.cancel-alert[hidden] { display: none; }
.tag-risk, .tag-health { border: 0; cursor: pointer; }
.tag-risk { background: none; }
.tag-risk:hover, .tag-risk[aria-expanded="true"] { background: var(--risk-tint); }
.tag-health:hover, .tag-health[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--signal-line); }
.cancel-title { display: flex; align-items: center; gap: 7px; color: var(--label); font-size: 13px; font-weight: 500; }
/* The title in the colour of the mark that opened it: orange for ⚠, lime for Health. */
.cancel-alert.is-risk .cancel-title { color: var(--risk); }
.cancel-alert.is-health .cancel-title { color: var(--signal-ink); }
.cancel-alert p { margin: 0; color: var(--label); font-size: 12.5px; line-height: 1.45; }
.cancel-alert p.cancel-foot { color: var(--secondary); }
.cancel-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--secondary); font-size: 12.5px; }
.cancel-sum b { color: var(--label); font: 500 13px var(--mono); white-space: nowrap; }
.cancel-sum b.is-bad { color: var(--red); }
.cancel-alert.is-health .cancel-sum b { color: var(--signal-ink); }
/* How many bookmakers list the match: a status line, a dot and the count. */
.void-signal { color: var(--secondary); font: 12px var(--mono); }
.void-signal.is-few { color: var(--amber); }
.void-signal[hidden] { display: none; }
/* The cases, as cards like the market moves: the case, the result, the rules.
   The cards share their rows, so the results line up whatever the label. */
.void-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.void-cell { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.void-cell > span { color: var(--secondary); font: 11px/1.45 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.void-cell b { font: 500 15px var(--mono); font-variant-numeric: tabular-nums; }
.void-cell b.is-good { color: var(--signal-ink); }
.void-cell b.is-bad { color: var(--red); }
.void-range { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.void-range em { color: var(--tertiary); font-style: normal; }
.void-cell i { color: var(--secondary); font: normal 11px/1.6 var(--mono); }
.void-cell i u { color: var(--tertiary); text-decoration: none; }
.tag.is-warn { background: var(--amber-tint); color: var(--amber); }
.tag.is-safe { background: var(--signal-tint); color: var(--signal-ink); }
/* A square on whole pixels: 6 px in the 16 px tag sits 5 px from each edge. */
.tag.is-live::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: currentColor; animation: blink 1.4s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } } /* opacity: run by the compositor, no restyle each frame */
.mark { flex: none; font-size: 12px; line-height: 1; }
.mark.filled { color: var(--signal-ink); }
.mark.fav { color: var(--amber); }

.logo { width: 20px; height: 20px; flex: none; border-radius: 4px; object-fit: cover; background: var(--fill); }
.logo-letter { display: inline-grid; place-items: center; color: var(--secondary); font: 600 10px var(--mono); }

/* A warning is a line in the type of the leg notes ("кэф подтверждён …"),
   where it belongs, with the square of LIVE ■ before it: red when it blocks
   the deal, amber when it is worth a look, grey while something loads. No
   boxes – the colour and the square carry it. */
.leg-alerts { display: grid; gap: 4px; }
.leg-alerts:empty { display: none; }
.leg-alert, .calc-note, .skew-warn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; color: var(--secondary); font: 11.5px/1.45 var(--mono); }
.leg-alert > span, .calc-note, .skew-warn { position: relative; padding-left: 13px; }
.leg-alert > span::before, .calc-note::before, .skew-warn::before { content: ""; position: absolute; top: 0.5em; left: 0; width: 6px; height: 6px; background: currentColor; }
.leg-alert.is-bad, .skew-warn { color: var(--red); }
.calc-note { color: var(--amber); }
.leg-alert .link-btn { font: 12px var(--sans); }

.empty { display: grid; justify-items: center; gap: 6px; padding: 64px 20px; text-align: center; color: var(--secondary); }
.empty strong { color: var(--label); font-size: 16px; font-weight: 500; }
.empty > span { max-width: 560px; color: var(--tertiary); font-size: 12px; line-height: 1.5; text-wrap: balance; }
.empty-actions { display: flex; gap: 8px; margin-top: 8px; }
.spinner { width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-top-color: var(--signal-mark); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================== chrome ============================== */

.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px;
  height: var(--topbar); padding: 0 24px; border-bottom: 1px solid var(--line);
}
.topbar-spacer { flex: 1; }
/* The brand (the admin's top bar): the name, the second word quieter. */
.brand { display: inline-flex; flex: none; align-items: center; gap: 10px; color: var(--label); font: 600 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.brand b { font-weight: 600; }
.brand span { color: var(--tertiary); font-weight: 400; }
/* The profile button leads to the journal; the badge sits on its corner. */
.journal-btn.is-on { border-color: var(--line); background: var(--panel); color: var(--label); cursor: default; } /* the page you are on */
.journal-btn .nav-badge { position: absolute; top: -3px; right: -8px; min-width: 16px; padding: 0 4px; background: var(--amber); color: #0a0a0c; font-size: 9.5px; line-height: 15px; }
.nav-badge { min-width: 18px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--amber-tint); color: var(--amber); font: 500 10.5px/17px var(--mono); text-align: center; }
.settings-btn.is-active, .alerts-btn.is-enabled { color: var(--signal-ink); }

.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; height: var(--statusbar);
  display: flex; align-items: center; gap: 14px; padding: 0 24px; border-top: 1px solid var(--line);
  font-family: var(--mono);
}
.health { display: inline-flex; flex: none; align-items: center; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; cursor: default; }
.health.is-error { color: var(--red); }
.statusbar-list { display: flex; align-items: center; gap: 14px; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.statusbar-list::-webkit-scrollbar { display: none; }
.src-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--secondary); font-size: 11px; cursor: default; }
.src-chip:hover { color: var(--label); }
.src-chip.is-error { color: var(--red); } /* the colour of the name tells the state, no square */

/* ============================== layout ============================== */

.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start;
  max-width: 1680px; margin: 0 auto; padding: 20px 24px;
}
.layout.has-detail { grid-template-columns: 360px minmax(0, 1fr) 300px; }
.detail, .rail {
  position: sticky; top: calc(var(--topbar) + 20px);
  min-width: 0; max-height: calc(100vh / var(--zoom) - var(--topbar) - var(--statusbar) - 20px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
/* The list scrolls with the page; the toolbar, the deal and the rail stay put */
.feed { display: flex; flex-direction: column; min-width: 0; }
.rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; padding-bottom: 20px; } /* as the deal: the last card clear of the status bar */
.card { padding: 16px; }
.card-title { margin-bottom: 4px; color: var(--label); }

/* ============================== deal list ============================== */

.toolbar { position: sticky; top: var(--topbar); z-index: 5; display: grid; gap: 10px; margin-top: -20px; padding: 20px 0 10px; background: var(--page-bg); }
.toolbar > * { min-width: 0; } /* a long chip row scrolls instead of widening the column */
.toolbar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
/* Sports stay on one line: they scroll sideways instead of wrapping */
.toolbar-row .chips { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.toolbar-row .chips::-webkit-scrollbar { display: none; }
.toolbar-row .chip { flex: none; height: 32px; }
.toolbar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 20px; color: var(--secondary); font: 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.filter-note { display: inline-flex; align-items: center; gap: 10px; }
#result-count { min-width: 9.5ch; } /* "4 вилки" and "128 вилок" leave the search where it was */
/* Search: an ordinary field in the count line, the same in every state – a
   fixed width, a neutral border that lightens in use, the "/" hint until
   something is typed and the clear cross in its place after. */
.list-search { display: inline-flex; flex: none; align-items: center; gap: 8px; width: 240px; height: 28px; margin: -4px 0; padding: 0 5px 0 9px; border: 1px solid var(--field-line); border-radius: var(--radius-xs); background: var(--bg); color: var(--tertiary); letter-spacing: 0; text-transform: none; cursor: text; transition: border-color 0.12s; }
.list-search:hover { border-color: var(--line-strong); }
.list-search:focus-within { border-color: color-mix(in srgb, var(--label) 55%, transparent); color: var(--secondary); }
.list-search svg { flex: none; }
.list-search input { flex: 1; width: 0; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--label); font: 12.5px var(--sans); }
.list-search input::placeholder { color: var(--tertiary); opacity: 1; }
.list-search kbd { flex: none; margin: 0; }
.list-search.has-query kbd { display: none; }
.search-clear { display: none; place-items: center; flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--tertiary); }
.search-clear:hover { background: var(--fill-hover); color: var(--label); }
.list-search.has-query .search-clear { display: grid; }
@media (pointer: coarse) { .list-search kbd { display: none; } } /* a phone has no key to press */
/* The narrow list beside an open deal has no room for it: the field shows
   there only while a search is on, on a line of its own. A phone gives it
   that line always. */
.layout.has-detail .list-search { order: 4; flex: 1 1 100%; width: auto; margin: 2px 0 0; }
.layout.has-detail .list-search:not(.has-query) { display: none; }
@media (max-width: 640px) {
  .list-search { order: 4; flex: 1 1 100%; width: auto; margin: 2px 0 0; }
  .filter-note { order: 3; flex-basis: 100%; } /* the count, Health and the sort keep their line */
}
/* Sorting is a quiet text switch at the end of the count line */
#sort {
  field-sizing: content; /* the caret sits right after the current option */
  height: 20px; padding: 0 16px 0 0; border: 0; color: var(--label); font: inherit; letter-spacing: 0.02em; text-transform: none; cursor: pointer; /* the options are written in lower case: "по ROI" keeps its capitals */
  background:
    linear-gradient(45deg, transparent 50%, var(--secondary) 50%) calc(100% - 4px) 50% / 4px 4px no-repeat,
    linear-gradient(135deg, var(--secondary) 50%, transparent 50%) 100% 50% / 4px 4px no-repeat;
}
#sort:hover { color: var(--signal-ink); }
#sort:focus-visible { outline: 0; color: var(--signal-ink); }
/* Narrow list next to an open deal: modes full width, sports fade at the edge */
.layout.has-detail #mode-tabs { flex: 1 1 100%; }
.layout.has-detail #mode-tabs button { flex: 1; }
/* The count and the sort keep their line; what the filters hide goes under them. */
.layout.has-detail .filter-note { order: 3; flex-basis: 100%; }
.layout.has-detail .toolbar-row .chips { flex-basis: 100%; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.filter-note .link-btn { font: inherit; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: none; color: var(--secondary); font-size: 13px;
}
.chip:hover { border-color: var(--line-strong); color: var(--label); }
.chip.is-active { border-color: var(--label); color: var(--label); }
.chip sup { color: var(--tertiary); font: 11px var(--mono); vertical-align: baseline; }
.chip.is-active sup { color: var(--signal-ink); }
/* Health: a quiet switch on the count line – a check box, the word, the count.
   On, it reads as a chosen chip: the word in full ink, the count in lime. */
.meta-toggle { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 20px; margin-left: auto; padding: 0; border: 0; background: none; color: var(--secondary); font: inherit; letter-spacing: 0.02em; text-transform: none; cursor: pointer; }
.meta-toggle::before { content: ""; flex: none; box-sizing: border-box; width: 12px; height: 12px; border: 1px solid var(--bracket); border-radius: var(--radius-xs); }
.meta-toggle b { color: var(--tertiary); font-weight: 400; }
.meta-toggle:hover { color: var(--label); }
.meta-toggle:hover::before { border-color: var(--label); }
.meta-toggle.is-on { color: var(--label); }
.meta-toggle.is-on::before { border-color: var(--check-line); background: var(--check); }
.meta-toggle.is-on::after { content: ""; position: absolute; top: 4px; left: 0; width: 12px; height: 12px; background: var(--check-tick); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 5.2 4.2 7.2 7.8 3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 5.2 4.2 7.2 7.8 3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.meta-toggle.is-on b { color: var(--signal-ink); }
.meta-toggle:focus-visible { outline: 1px solid var(--label); outline-offset: 3px; border-radius: var(--radius-xs); }

.list-head, .row {
  display: grid; align-items: center; column-gap: 16px;
  grid-template-columns: 44px 72px minmax(0, 1fr) 132px 60px 64px 96px 64px 22px;
}
.list-head { padding: 2px 16px 0; white-space: nowrap; }
.list-head > :nth-child(n + 5):nth-child(-n + 8) { text-align: right; }
.list-head button { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.list-head button:hover { color: var(--label); }
.list-head button.is-on { color: var(--label); }
.list-head button.is-on::after { content: " ↓"; }


.feed-list:empty { display: none; }
.row { position: relative; scroll-margin: 190px 0 calc(var(--statusbar) + 12px); min-height: 56px; padding: 9px 16px; cursor: pointer; transition: background 0.1s; }
.row + .row { border-top: 1px solid var(--line); }
.row:hover { background: var(--panel-2); }
.row:focus-visible { outline: 0; background: var(--panel-2); }
/* The open deal: the row lit and a lime bar down its left edge. */
.row.is-open, .fav-row.is-open { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--signal-mark); }
.row.is-stale { opacity: 0.45; }
.row.is-gone { opacity: 0.28; pointer-events: none; }
.row.is-gone .c-title strong { text-decoration: line-through; }

.c-time b { color: var(--tertiary); font: 400 12px var(--mono); white-space: nowrap; }
/* The edge on a lime plate under its heading, one width on every row (seven
   characters, "+43.38%"), the number right-aligned so the points line up. */
/* Sized for the usual "+1.23%": a rare "+12.34%" widens its own plate only. */
.c-edge { justify-self: start; min-width: calc(6ch + 12px); padding: 2px 6px; border-radius: var(--radius-xs); background: var(--signal-tint); color: var(--signal-ink); font: 500 12px var(--mono); text-align: right; white-space: nowrap; }
.c-event { display: grid; gap: 3px; min-width: 0; }
.c-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.c-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
/* The game first – sport · series · map · tournament – then its marks. The
   text gives way to the marks: it is cut short, they always show. */
.c-sub { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; color: var(--secondary); font-size: 12px; }
.c-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c-info > span + span::before { content: "·"; margin: 0 6px; color: var(--tertiary); }
.c-tags { display: inline-flex; flex: none; gap: 4px; }
.c-book { display: flex; align-items: center; gap: 8px; min-width: 0; }
.c-book .logo { width: 18px; height: 18px; }
/* A price older than 10 s: the row dims and the late price turns amber. */
.row .is-late { color: var(--amber); }
.c-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary); font-size: 13px; }
.c-poly b { font: 500 13px var(--mono); color: inherit; }
.c-odds { text-align: right; font: 500 13px var(--mono); font-variant-numeric: tabular-nums; }
.c-poly { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
/* The profit, in lime: with the edge, the two numbers a row is read for. */
.c-profit { text-align: right; color: var(--signal-ink); font: 500 14px var(--mono); white-space: nowrap; }
.c-profit.is-bad { color: var(--red); }
.c-avail { text-align: right; color: var(--secondary); font: 12px var(--mono); }
.row-hide { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--tertiary); opacity: 0; }
.row:hover .row-hide { opacity: 1; }
.row-hide:hover { background: var(--fill); color: var(--label); }

.layout.has-detail .list-head { display: none; }
/* A narrow row (beside an open deal, and on a phone below): the time, the
   game, and at the right the profit over its bookmaker, so the same match at
   three books reads as three rows (the name only, no logo). The profit takes the width of the widest
   one on the list (--profit-ch, set by list.js), so the marks after a cut
   game line stand in one column from row to row. */
.layout.has-detail .row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "time event profit" "time event book"; column-gap: 10px; row-gap: 3px; padding: 9px 14px; }
.layout.has-detail .c-time { grid-area: time; }
.layout.has-detail .c-event { grid-area: event; }
.layout.has-detail .c-profit { grid-area: profit; align-self: end; min-width: calc(var(--profit-ch, 0) * 1ch); }
.layout.has-detail .c-book { grid-area: book; justify-self: end; align-self: start; gap: 5px; }
.layout.has-detail .c-book .logo { display: none; } /* the name alone: logos would crowd the narrow column */
.layout.has-detail .c-book .c-name { color: var(--tertiary); font-size: 11.5px; }
.layout.has-detail .c-edge, .layout.has-detail .c-odds, .layout.has-detail .c-poly,
.layout.has-detail .c-avail, .layout.has-detail .row-hide { display: none; }

/* ============================== deal view ============================== */

.detail { display: grid; gap: 12px; align-content: start; padding-bottom: 20px; }
.detail-head { display: flex; align-items: flex-start; gap: 10px; }
.detail-back { color: var(--label); }
.detail-headline { position: relative; flex: 1; min-width: 0; display: grid; gap: 6px; }
.detail-headline h2 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; }
.detail-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--secondary); font-size: 13px; }
/* A dot between plain parts; a tag (Live, Большая вилка) is its own divider. */
/* The dot closes the part before it, so a wrapped line never starts with one. */
.detail-tags > span:not(.tag):has(+ span:not(.tag))::after { content: "·"; margin-left: 6px; color: var(--tertiary); }

/* Profit */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding: 14px 18px; }
.stat-main { display: grid; gap: 3px; }
.stat-main strong { color: var(--signal-ink); font-size: 36px; font-weight: 400; line-height: 1.05; letter-spacing: -0.04em; }
.stat-main.is-loss strong { color: var(--red); }
.hero.is-gone .stat-label { color: var(--amber); }
/* A deal that is gone goes grey: the profit, its figures and the lime corners. */
.hero.is-gone .stat-main strong { color: var(--tertiary); }
.hero.is-gone .hero-meta b { opacity: 0.55; }
.hero.is-gone { --edge: var(--line-strong); }
.hero:has(.stat-main.is-loss):not(.is-gone) { --edge: var(--red); }
.stat-main small { color: var(--secondary); font: 12px var(--mono); }
.hero-meta { display: flex; align-items: flex-start; gap: 0; }
.hero-meta div { display: grid; gap: 4px; padding: 0 18px; border-left: 1px solid var(--line); }
.hero-meta div:first-child { border-left: 0; padding-left: 0; }
.hero-meta b { font-size: 18px; font-weight: 400; letter-spacing: -0.02em; }
.hero-meta i { color: var(--tertiary); font: normal 11px var(--mono); }
.hero-meta i:empty { display: none; }
.stat-main small .is-down { color: var(--amber); }
.stat-main small .is-up { color: var(--signal-ink); }

.deal-grid { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(330px, 1.1fr); gap: 14px; align-items: start; }
.deal-main, .deal-side { display: grid; gap: 12px; align-content: start; min-width: 0; }

/* Order book */
.panel { display: grid; gap: 2px; padding: 14px 14px 12px; }
.panel-title { color: var(--label); }
/* The book as an exchange shows it: asks red above the spread, bids blue
   below, depth bars from the right; the asks this stake takes are lit, and a
   dashed line marks where buying more stops paying */
.book-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; padding: 0 4px; }
.book-top .panel-title { flex: none; }
.book-outcome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary); font-size: 12px; }
.book-head, .book-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 2px 8px; font: 12.5px var(--mono); }
.book-head { padding-bottom: 6px; font-size: 10.5px; }
.book-head span:not(:first-child), .book-row span:not(:first-of-type) { text-align: right; }
.book-row { position: relative; border-radius: var(--radius-xs); color: var(--secondary); }
.book-row i { position: absolute; inset: 2px 0 2px auto; border-radius: 2px; background: color-mix(in srgb, var(--red) 10%, transparent); }
.book-row span { position: relative; }
.book-row span:first-of-type { color: var(--red); }
.book-row.is-used { background: var(--fill); color: var(--label); }
.book-row.is-used i { background: color-mix(in srgb, var(--red) 22%, transparent); }
.book-row.is-beyond { opacity: 0.45; }
.book-row.is-bid span:first-of-type { color: var(--blue); }
.book-row.is-bid i { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.book-spread { display: flex; align-items: center; gap: 8px; margin: 3px 0; padding: 0 8px; color: var(--secondary); font: 10.5px var(--mono); letter-spacing: 0.04em; white-space: nowrap; }
.book-spread::before, .book-spread::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
/* The limit: a dashed rule under the cheapest level that no longer pays; it
   takes no room, so the ladder keeps its height */
.book-row.has-edge::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; border-top: 1px dashed var(--signal-mark); }
.book-row.is-empty { visibility: hidden; }
.book-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 6px; padding: 8px 8px 0; border-top: 1px solid var(--line); color: var(--secondary); font: 11px var(--mono); }
.book-foot > span { white-space: nowrap; }
.book-foot > span:empty { display: none; }

/* Price history: Polymarket's price, the deal's limit dashed */
.panel.hist { gap: 8px; }
.hist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.seg-mini { padding: 1px; }
.seg-mini button { height: 22px; padding: 0 8px; font: 500 11px var(--mono); }
.hist-chart { position: relative; height: 96px; margin-bottom: 14px; touch-action: none; }
.hist-chart .dyn-empty { display: grid; place-items: center; height: 100%; padding: 0; }
.hist-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hist-line { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linejoin: round; }
.hist-area { fill: color-mix(in srgb, var(--red) 8%, transparent); }
.hist-limit { stroke: var(--signal-mark); stroke-width: 1; stroke-dasharray: 4 4; }
.hist-limit-label { position: absolute; right: 0; padding: 0 4px; transform: translateY(-115%); border-radius: 2px; background: var(--panel); color: var(--signal-ink); font: 10px var(--mono); pointer-events: none; }
.hist-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); pointer-events: none; }
.hist-axis { position: absolute; color: var(--tertiary); font: 10px var(--mono); pointer-events: none; }
.hist-axis-top { top: -2px; left: 0; }
.hist-axis-bottom { bottom: 0; left: 0; }
.hist-axis-left { bottom: -16px; left: 0; }
.hist-axis-right { bottom: -16px; right: 0; }
.hist-cross { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.hist-cross i { position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid var(--line-strong); }
.hist-cross span { position: absolute; top: 0; left: 6px; padding: 2px 6px; border-radius: var(--radius-xs); background: var(--fill-hover); color: var(--label); font: 11px var(--mono); white-space: nowrap; }
.hist-cross.is-right span { left: auto; right: 6px; }
.hist-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hist-stats div { display: grid; gap: 3px; min-width: 0; }
.hist-stats b { font: 500 13px var(--mono); white-space: nowrap; }
.hist-stats b.is-good { color: var(--signal-ink); }
.hist-stats b.is-bad { color: var(--red); }
.hist-note { grid-column: 1 / -1; margin: 0; color: var(--tertiary); font: 11px var(--mono); }

/* Stake */
.quick { display: grid; gap: 8px; }
.quick .seg { display: flex; }
.quick .seg button { flex: 1; height: 28px; padding: 0 8px; }
.quick-main { display: grid; gap: 6px; min-width: 0; }
.quick .presets:empty { display: none; }
.presets { display: flex; gap: 4px; flex-wrap: wrap; }
.presets button { height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--bg); color: var(--secondary); font: 11.5px var(--mono); } /* on the dark ground, as the switches */
.presets button:hover { border-color: var(--line-strong); color: var(--label); }
.presets button:active { transform: translateY(1px); }
.presets button.is-on { border-color: var(--signal-mark); color: var(--signal-ink); } /* a lime outline, no fill */

/* Legs */
.legs { display: grid; }
/* Both legs are on one market: which one, said once above them */
.legs-market { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.legs-market b { font-size: 14px; font-weight: 500; }
.legs-market i { color: var(--secondary); font-size: 13px; font-style: normal; }
.leg { position: relative; display: grid; gap: 8px; padding: 12px 16px; }
.leg + .leg { border-top: 1px solid var(--line); }
.leg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.leg-book { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 14px; font-weight: 500; }
.leg-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary); font-size: 13px; }
.leg-kind b { color: var(--label); font-weight: 500; }
.leg-nums { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 24px; }
.leg-nums div { display: grid; gap: 3px; }
.leg-nums span { white-space: nowrap; }
.leg-nums span i { font-style: normal; text-transform: none; }
.leg-nums b { font-size: 17px; font-weight: 400; line-height: 26px; letter-spacing: -0.01em; }
.leg-nums .leg-key { margin-left: auto; text-align: right; }
.leg-key b { font-size: 22px; letter-spacing: -0.03em; }
.leg-note { display: flex; align-items: center; gap: 7px; color: var(--secondary); font: 11px var(--mono); }
.leg-note:empty { display: none; }
.leg-note.is-stale { color: var(--amber); }

.deal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* The trade panel takes no gap while it is empty */
#d-trade:empty { display: none; }


.deal-actions .btn { min-height: 46px; font-size: 14px; }
.leg-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 2px; border-radius: var(--radius-xs); color: var(--tertiary); }
.leg-link:hover { background: var(--fill); color: var(--label); }

/* Stake row: modes on the left, parameters on the right */
.quick-top { display: flex; align-items: center; gap: 8px; }
.quick-top .seg { flex: 1; }
.params-sum { justify-self: start; padding: 0; border: 0; background: none; color: var(--amber); font: 11px var(--mono); text-decoration: underline dotted; text-underline-offset: 3px; }
.params-sum:hover { color: var(--label); }
/* The limit the stake ran into: a data line, not an alert. */
.calc-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0 0; border-top: 1px dashed var(--line); color: var(--tertiary); font: 11px var(--mono); }
.calc-cap b { color: var(--secondary); font-weight: 500; }
.calc-cap[hidden] { display: none; }
.params { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr); gap: 20px; }
.params-hint { color: var(--tertiary); font-size: 11.5px; }
.cfield { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cfield input[type="range"] { width: 100%; margin: 10px 0 4px; }
.skew-scale { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--secondary); font: 11px var(--mono); }
.skew-scale span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skew-scale span:last-child { text-align: right; }
.skew-scale .link-btn { font: inherit; }
.skew-scale .link-btn:disabled { color: var(--tertiary); text-decoration: none; cursor: default; }
.skew-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skew-out { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); transition: border-color 0.15s, background 0.15s; }
.skew-out:last-child { text-align: right; }
.skew-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary); font-size: 12px; }
.skew-team i { display: block; color: var(--tertiary); font: normal 10px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.skew-sum { font: 600 20px var(--mono); letter-spacing: -0.02em; color: var(--signal-ink); font-variant-numeric: tabular-nums; }
.skew-out.is-favored { border-color: var(--signal-line); background: var(--signal-tint); }
.skew-out.is-loss { border-color: var(--red); background: var(--red-tint); }
.skew-out.is-loss .skew-sum { color: var(--red); }
.skew.is-loss input[type="range"]::-webkit-slider-thumb { background: var(--red); }
.skew.is-loss input[type="range"]::-moz-range-thumb { background: var(--red); }

/* Reserve: how far prices may move before the deal stops paying */
/* Reserve: how far each leg may move before the deal stops paying. The
   colour of the values, the bars and the verdict says it at a glance */
.panel.reserve { gap: 8px; }
.reserve-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.reserve-verdict { color: var(--secondary); font: 500 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.reserve.is-good .reserve-verdict { color: var(--signal-ink); }
.reserve.is-warn .reserve-verdict { color: var(--amber); }
.reserve.is-bad .reserve-verdict { color: var(--red); }
.reserve-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 4px; }
.reserve-item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; min-width: 0; }
.reserve-item > span { grid-column: 1 / -1; overflow: hidden; color: var(--secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reserve-item b { font-size: 18px; font-weight: 400; letter-spacing: -0.02em; }
.reserve-item i { font: normal 12px var(--mono); color: var(--secondary); }
.reserve-bar { grid-column: 1 / -1; height: 2px; margin-top: 6px; border-radius: 1px; background: var(--fill-hover); overflow: hidden; }
.reserve-bar u { display: block; height: 100%; width: 0; transition: width 0.3s; }
.reserve.is-good .reserve-item b { color: var(--signal-ink); }
.reserve.is-good .reserve-bar u { background: var(--signal-mark); }
.reserve.is-warn .reserve-item b { color: var(--amber); }
.reserve.is-warn .reserve-bar u { background: var(--amber); }
.reserve.is-bad .reserve-item b, .reserve.is-bad .reserve-item i { color: var(--red); }

/* "Детали": a full-width row that opens the limit, the match check and the rules */
.more { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.more > summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { background: var(--panel-2); }
/* The detail column scrolls and clips an outer outline down to two stray lines */
.more > summary:focus-visible { outline: 0; background: var(--panel-2); }
.more[open] > summary { border-bottom: 1px solid var(--line); }
.more-icon { position: relative; flex: none; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); }
.more-icon::before, .more-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--label); transform: translate(-50%, -50%); transition: transform 0.2s; }
.more-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.more[open] .more-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.more-text { display: grid; gap: 2px; min-width: 0; }
.more-text b { font-size: 14px; font-weight: 500; }
.more-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary); font-size: 12px; }
.more-body { display: grid; }
/* Hedge ("Если букмекер принял меньше"): the four numbers, what to do, and
   each outcome now and after – the void cards' quiet frame, as a table. */
.hedge-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hedge-source { margin: -4px 0 0; }
.hedge-source .link-btn { font: inherit; color: var(--secondary); }
.hedge-verdict { display: grid; gap: 4px; }
.hedge-verdict b { font-size: 17px; font-weight: 500; }
.hedge-verdict b.is-muted { color: var(--secondary); font-size: 13px; font-weight: 400; }
.hedge-verdict span { color: var(--secondary); font: 11.5px/1.5 var(--mono); }
.hedge-verdict span.is-bad, .hedge-action .params-hint.is-bad { color: var(--red); }
.hedge-table { display: grid; border: 1px solid var(--line); border-radius: var(--radius-s); }
.hedge-row { display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: baseline; gap: 12px; padding: 9px 12px; }
.hedge-table.is-two .hedge-row { grid-template-columns: minmax(0, 1fr) 118px 118px; }
.hedge-row + .hedge-row { border-top: 1px solid var(--line); }
.hedge-row:not(.is-head) > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hedge-row b { text-align: right; font: 500 13.5px var(--mono); font-variant-numeric: tabular-nums; }
.hedge-row b.is-good { color: var(--signal-ink); }
.hedge-row b.is-bad { color: var(--red); }
.hedge-row.is-head { padding-block: 7px; color: var(--secondary); font: 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.hedge-row.is-head span + span { text-align: right; }
.hedge-action { display: grid; gap: 8px; justify-items: start; }
.hedge-action:empty { display: none; }
.hedge-action .trade-confirm, .hedge-action .trade-result { justify-self: stretch; }
@media (max-width: 640px) {
  .hedge-table.is-two .hedge-row { grid-template-columns: minmax(0, 1fr) 86px 86px; }
  .hedge-row b { font-size: 12.5px; }
  .hedge-row.is-head { font-size: 9.5px; letter-spacing: 0.04em; }
}
.more-block { display: grid; gap: 12px; padding: 18px 16px; }
.more-block + .more-block { border-top: 1px solid var(--line); }
.more-block header h3 { font-size: 15px; font-weight: 500; }
.more-block header p { margin: 3px 0 0; color: var(--secondary); font-size: 12.5px; }

.match-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.match-side { display: grid; align-content: start; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel-2); min-width: 0; }
.match-src { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; color: var(--secondary); font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.match-src .logo { width: 16px; height: 16px; border-radius: 3px; }
.match-side strong { font-size: 14px; font-weight: 500; }
.match-side > span { color: var(--secondary); font-size: 12px; }
.match-side .match-time { font: 11px var(--mono); color: var(--label); }
.match-link { align-self: center; color: var(--tertiary); font-size: 16px; }
/* The match check: a coloured square for its verdict, then text. */
.match-verdict { font: 12px var(--mono); color: var(--secondary); }
.match-verdict.is-warn { color: var(--amber); }
.match-verdict.is-bad { color: var(--red); }

.dyn-empty { padding: 18px 0; color: var(--tertiary); font: 11.5px var(--mono); }

.rules-hint { padding: 10px 12px; border-left: 2px solid var(--amber); background: var(--amber-tint); color: var(--label); font-size: 13px; line-height: 1.5; }
/* Polymarket's rules: the question as a title, the risky clauses in red,
   the text folded to a few lines */
.rules { display: grid; gap: 10px; }
.rules-title { display: grid; gap: 4px; }
.rules-title b { font-size: 13.5px; font-weight: 500; }
.rules-legend { margin: 0; color: var(--tertiary); font-size: 11.5px; }
.rules-body { display: grid; gap: 6px; }
.rules-body p { margin: 0; color: var(--secondary); font-size: 12.5px; line-height: 1.55; }
.rules-body.is-clamped { max-height: 9.4em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.rule-risk { padding: 0 3px; border-radius: 2px; background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.rules-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ============================== rail cards ============================== */

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* A count as the chips write it: a plain number after the title, quieter. */
.card-count { margin-left: 6px; color: var(--tertiary); font-weight: 400; }
.card-count:empty { display: none; }
.card-empty { margin: 10px 0 0; color: var(--secondary); font-size: 12px; line-height: 1.5; }
.card-empty kbd { margin: 0 1px; }
.card-empty .link-btn { font: inherit; color: var(--label); }

/* Positions: what waits for its result – recorded deals with both legs and
   what they should bring, Polymarket holdings, payouts to collect. */
.card-link { padding: 0; border: 0; background: none; color: var(--secondary); font: 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.card-link:hover { color: var(--label); }
/* Rail rows (favourites, positions) are the list's rows in small: a hairline
   between them across the card, the name and the number on top – the number
   in lime, as the list's profit – and the details below. The open deal is
   marked as in the list. */
#favorites-list, #positions-list { display: grid; margin: 12px -16px -16px; }
#favorites-list:has(.card-empty), #positions-list:has(> .card-empty:only-child) { margin: 0; }
.fav-row, .pos-row { position: relative; padding: 10px 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; transition: background 0.1s; }
.pos-row { display: grid; gap: 5px; width: 100%; color: var(--label); text-align: left; }
.fav-row:hover, .fav-row:has(.fav-open:focus-visible), .pos-row:hover, .pos-row:focus-visible { outline: 0; background: var(--panel-2); }
.positions-card .card-empty { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); }
.positions-card .card-empty:only-child { margin: 10px 0 0; padding: 0; border: 0; }
.pos-top, .pos-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pos-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; }
.pos-value { flex: none; color: var(--signal-ink); font: 500 13px var(--mono); }
.pos-value.is-bad { color: var(--red); }
.pos-value.is-plain { color: var(--label); font-weight: 400; } /* what a holding is worth: no profit known */
.pos-leg { display: inline-flex; flex: none; align-items: center; gap: 5px; color: var(--secondary); font: 11px var(--mono); }
.pos-leg + .pos-leg::before { content: "+"; margin-right: 1px; color: var(--tertiary); }
.pos-leg .logo { width: 14px; height: 14px; border-radius: var(--radius-xs); }
.pos-state { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; overflow: hidden; color: var(--tertiary); font: 10.5px var(--mono); white-space: nowrap; }
.pos-state.is-due { color: var(--signal-ink); }
.pos-leg:has(.pos-text) { flex: 0 1 auto; min-width: 0; } /* a long team name gives way to the state */
.pos-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-state { flex: none; }
a.pos-row { text-decoration: none; }

/* ============================== favorites ============================== */

.fav-btn { font-size: 18px; }
.fav-btn.is-on { color: var(--amber); } /* the star alone, no plate: like the risk sign */
.fav-card .card-empty kbd { border-color: color-mix(in srgb, var(--amber) 40%, transparent); color: var(--amber); }
.fav-card .card-empty { margin: 10px 0 0; }
.fav-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.fav-open:focus-visible { outline: 0; }
.fav-side { display: grid; justify-items: end; gap: 5px; }
.fav-row.is-gone .fav-title { color: var(--secondary); }
.fav-open { display: grid; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: var(--label); text-align: left; }
.fav-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; }
/* The second line reads like the list's: the bookmaker and the sport, the marks after. */
.fav-meta { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--secondary); font-size: 12px; }
.fav-meta .logo { width: 14px; height: 14px; border-radius: var(--radius-xs); }
.fav-meta .c-info { flex: 0 1 auto; }
.fav-profit { color: var(--signal-ink); font: 500 13px var(--mono); }
.fav-profit.is-bad { color: var(--red); }
.fav-gone { color: var(--tertiary); font-size: 12px; font-weight: 400; line-height: 19px; }
/* The cross sits flush with the number above it; its hover box reaches past the edge. */
.fav-remove { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--tertiary); opacity: 0; }
.fav-row:hover .fav-remove, .fav-remove:focus-visible { opacity: 1; }
.fav-remove:hover { background: var(--fill-hover); color: var(--label); }

/* ============================== calculator ============================== */

.calc-intro { margin: 0 0 14px; }
.calc-leg { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.calc-leg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.calc-leg-head .seg button { height: 22px; padding: 0 8px; font-size: 12px; }
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.calc-grid label, .calc-budget { display: grid; gap: 5px; min-width: 0; }
.calc-grid input, .calc-budget input { width: 100%; min-width: 0; height: 32px; padding: 0 10px; font: 14px var(--mono); text-transform: none; letter-spacing: 0; }
.calc-budget { padding-top: 12px; border-top: 1px solid var(--line); }
.calc-budget span span { font: inherit; }
.kv { margin: 14px 0 0; display: grid; }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; }
.kv > div + div { border-top: 1px dashed var(--line); }
.kv dd { margin: 0; font: 13px var(--mono); text-align: right; }
.kv-total dt { color: var(--label); }
.kv-total dd { font-size: 16px; font-weight: 500; }
.calc-fx { margin: 12px 0 0; font: 11px var(--mono); }
.calc-fx b { color: var(--label); font-weight: 500; }

/* ============================== sheets ============================== */

.has-drawer { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.drawer-backdrop, .modal-backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.drawer-panel { position: relative; display: flex; flex-direction: column; width: min(520px, 100%); height: 100%; box-shadow: var(--shadow); border-left: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px 22px 12px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.drawer-head h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.drawer-foot { display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--line); }
.drawer-foot .spacer { flex: 1; }
.drawer-foot [data-reset] { border-color: transparent; background: none; color: var(--red); }

.set-section { padding-top: 22px; }
.set-title { padding: 0 2px 8px; }
.set-title-row { display: flex; align-items: baseline; justify-content: space-between; padding-right: 2px; }
.set-title-row .link-btn { font-size: 12px; }
.group-label { padding: 12px 2px 8px; }
.group-foot { margin: 8px 2px 0; color: var(--secondary); font-size: 12px; }

.group > .set-row, .toggle-main { position: relative; min-height: 48px; padding: 0 16px; }
.group > .set-row + .set-row, .group > .toggle-main + .toggle-main, .group > .set-row + .toggle-main, .group > .toggle-main + .set-row:not(.tg-actions) { border-top: 1px solid var(--line); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.set-text { min-width: 0; padding: 10px 0; }
.set-label { font-size: 14px; }
.set-hint { margin-top: 2px; color: var(--secondary); font-size: 12px; }
/* A settings field is one box: the number and its unit (or the ₽/$ switch)
   inside, every box the same width so the column lines up */
.set-control { display: flex; align-items: center; gap: 6px; flex: none; width: 132px; height: 34px; padding: 0 4px 0 10px; cursor: text; }
.set-control input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--label); text-align: right; font: 13px var(--mono); }
.set-unit { min-width: 26px; padding-right: 4px; color: var(--secondary); font: 12px var(--mono); text-align: center; }
/* The currency of a money floor sits where a unit does: both signs, the chosen one lit */
.unit-switch { display: inline-flex; align-items: center; flex: none; padding-right: 2px; font: 12px var(--mono); }
.unit-switch i { color: var(--line-strong); font-style: normal; }
.unit-switch button { min-width: 18px; height: 22px; padding: 0 3px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--tertiary); font: inherit; cursor: pointer; transition: color 0.12s, background 0.12s; }
.unit-switch button:hover { color: var(--label); background: var(--fill); }
.unit-switch button.is-on { color: var(--label); cursor: default; }
.unit-switch button.is-on:hover { background: none; }

/* Picks (util.js pickHTML): the bookmakers and sports that can be switched
   off, a grid of cells – the logo, the name and the terminal's checkbox (as
   .meta-toggle): lime with a check, empty when off, the name and logo faded
   then. Each cell draws its right and bottom line; the group clips the outer
   ones, so a short last row needs no blank cells. */
.pick-group { overflow: hidden; }
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 -1px -1px 0; }
.pick-grid.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pick { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; height: 40px; padding: 0 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.1s; }
.pick:hover { background: var(--panel-2); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .logo { transition: opacity 0.12s, filter 0.12s; }
.pick-name { flex: 1; min-width: 0; overflow: hidden; color: var(--label); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: color 0.12s; }
.pick-mark { position: relative; flex: none; box-sizing: border-box; width: 12px; height: 12px; border: 1px solid var(--check-line); border-radius: var(--radius-xs); background: var(--check); }
.pick-mark::after { content: ""; position: absolute; inset: -1px; background: var(--check-tick); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 5.2 4.2 7.2 7.8 3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 5.2 4.2 7.2 7.8 3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.pick .unit-switch { transition: opacity 0.12s; }
.pick:has(input:not(:checked)) .pick-mark { border-color: var(--line-strong); background: none; }
.pick:has(input:not(:checked)) .pick-mark::after { content: none; }
.pick:hover:has(input:not(:checked)) .pick-mark { border-color: var(--secondary); }
.pick:has(input:not(:checked)) .pick-name { color: var(--tertiary); }
.pick:has(input:not(:checked)) .logo { opacity: 0.4; filter: grayscale(1); }
/* A switched-off bookmaker's account currency does not matter for now */
.pick:has(input:not(:checked)) .unit-switch { opacity: 0.35; }
.pick:has(input:focus-visible) { outline: 1px solid var(--focus-ring); outline-offset: -2px; }

.toggle-row { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 0 14px 0 16px; background: var(--panel); cursor: pointer; }
.toggle-main { background: transparent; }
.toggle-name { flex: 1; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.toggle-hint { display: block; color: var(--secondary); font-size: 12px; }
/* In the settings and the alerts a switch row reads like the field rows around it. */
:is(#settings, #alerts) .toggle-main .toggle-name { padding: 10px 0; white-space: normal; }
:is(#settings, #alerts) .toggle-main .toggle-hint { margin-top: 2px; }

/* A row that depends on a switch that is off: dimmed, but still at hand – the
   melody can be heard and the volume set before the sound is turned on. */
.group > .is-dim { opacity: 0.55; }
/* Telegram: the token field, then the bot and its actions */
.tg-connect { display: grid; gap: 2px; padding: 12px 16px 14px; }
.tg-connect .set-hint a { color: var(--label); }
.tg-token { display: flex; gap: 8px; margin-top: 10px; }
.tg-token .set-control { flex: 1; width: auto; }
.tg-token .set-control input { text-align: left; }
.group > .tg-actions { justify-content: flex-start; gap: 16px; min-height: 52px; }
.tg-error { margin: 0; padding: 0 16px 12px; color: var(--red); font-size: 12px; }
.tg-connect .tg-error { padding: 8px 0 0; }

/* Modal (PnL card, deal editor) */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.modal-panel { position: relative; display: grid; gap: 14px; width: min(760px, 100%); padding: 16px; box-shadow: var(--shadow); }
.modal-actions { display: flex; align-items: center; gap: 8px; }
.modal-actions .spacer { flex: 1; }
.pnl-image { display: block; width: 100%; height: auto; border-radius: var(--radius-s); }

.edit-panel { grid-template-columns: minmax(0, 1fr); width: min(880px, 100%); max-height: calc(100vh / var(--zoom) - 48px); overflow-y: auto; gap: 16px; padding: 22px; }
.edit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.edit-head h2 { margin-top: 4px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.edit-grid-top { grid-template-columns: 1.5fr 1fr 0.8fr 1.15fr; }
.edit-lead { margin: 6px 0 0; color: var(--secondary); font-size: 13px; }
.edit-field select { width: 100%; height: 36px; }
.edit-result { display: flex; align-items: center; gap: 10px; }
.edit-result select { height: 34px; }
/* Names are text, amounts are numbers: only the numbers are set in mono */
.edit-field input[type="text"]:not([data-decimal]), .edit-book { font-family: var(--sans); }
.edit-empty { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-s); color: var(--secondary); font-size: 13px; }
.edit-field { display: grid; gap: 6px; min-width: 0; }
.edit-field input, .edit-money { width: 100%; min-width: 0; height: 36px; padding: 0 12px; font: 14px var(--mono); }
.edit-money { display: flex; align-items: center; gap: 8px; padding-right: 6px; }
.edit-money input { flex: 1; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: 14px var(--mono); }
.edit-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.edit-leg, .edit-summary div { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel-2); }
.edit-leg { display: grid; align-content: start; gap: 10px; padding: 14px; }
.edit-leg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.edit-book { width: 160px; height: 28px; padding: 0 10px; border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--bg); color: var(--label); font-size: 13px; font-weight: 500; outline: 0; }
.edit-book:focus { border-color: var(--focus-line); }
.edit-book-logo { display: inline-flex; }
.edit-book-logo:empty { display: none; } /* no bookmaker yet: no empty square */
/* The bookmaker field's list: the scanner's bookmakers with their logos, under the field. */
.edit-book-pick { position: relative; }
.book-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: grid; width: max(100%, 220px); max-height: 268px; overflow-y: auto; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--panel); box-shadow: var(--shadow); }
.book-menu[hidden] { display: none; }
.book-menu button { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--label); font-size: 13px; font-weight: 500; text-align: left; }
.book-menu button:hover, .book-menu button.is-active { background: var(--fill-hover); }
.book-menu .logo { width: 18px; height: 18px; }
.edit-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.edit-summary div { display: grid; gap: 6px; min-width: 0; padding: 12px 14px; }
.edit-summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-summary b { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.edit-invalid { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: var(--radius-s); background: var(--amber-tint); color: var(--amber); font-size: 13px; }
/* What follows the fields as they are typed: the stake in the other
   currency, the purchase's shares and fee, the rate and fee line. */
.edit-note { min-height: 16px; margin: -2px 0 0; color: var(--secondary); font: 11px var(--mono); }
.edit-note:empty { visibility: hidden; }
/* The bookmaker's side: the title's two teams; a long name is cut, its title shows it. */
.edit-side { display: flex; width: 100%; }
.edit-side button { flex: 1; min-width: 0; height: 30px; overflow: hidden; text-overflow: ellipsis; }
/* The rate and the fee: worked out by themselves, changed on request. */
.edit-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; color: var(--secondary); font: 11px var(--mono); }
.edit-more .link-btn { font: 12px var(--sans); }
.edit-more-fields { flex: 0 0 100%; grid-template-columns: repeat(2, minmax(0, 200px)); }

/* ============================== journal ============================== */

/* #journal is also the page's address: the browser's jump to it on a reload
   stops under the top bar, not behind it. The page is built from the deal
   view's parts – its head, its hero, its panels – so it reads as the same
   instrument. */
.journal { padding: 24px; scroll-margin-top: var(--topbar); }
.j-wrap { display: grid; gap: 14px; max-width: 1480px; margin: 0 auto; }
.j-head { gap: 14px; }
.j-head .detail-headline { gap: 4px; }
/* The way back to the scanner; with deals that appeared meanwhile the button
   widens to carry their count beside the arrow. */
.j-back:has(.j-back-new:not([hidden])) { display: inline-flex; width: auto; padding: 0 7px 0 9px; gap: 7px; }
.j-back-new { min-width: 16px; padding: 0 4px; border-radius: var(--radius-xs); background: var(--badge-new); color: var(--on-badge-new); font: 600 9.5px/15px var(--mono); }
.j-head-actions { display: flex; flex: none; align-self: center; align-items: center; gap: 8px; }
.j-head-actions .btn { min-height: 32px; }

/* Hero: the deal view's .hero – the period's profit, then its figures */
.stat-main.is-empty strong { color: var(--tertiary); }
.hero-meta b.is-good { color: var(--signal-ink); }
.hero-meta b.is-bad { color: var(--red); }

/* Profit by day: a bar per day (per week over long spans) on one line –
   lime above it for a day in profit, red below for a loss, an amber mark on
   it for a day still waiting. A bar picked narrows the table; the others fade. */
.j-days { gap: 12px; }
.j-days .hist-head { min-height: 24px; }
.j-bars-wrap { position: relative; margin: 6px 4px 18px; }
.j-bars { position: relative; display: flex; height: 132px; }
.j-bars::before { content: ""; position: absolute; left: 0; right: 0; top: var(--zero); border-top: 1px dashed var(--line-strong); }
.j-bar { position: relative; flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; cursor: pointer; }
.j-bar:disabled { cursor: default; }
.j-bar:hover:not(:disabled), .j-bar.is-on { background: var(--panel-2); }
.j-bar:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: -1px; }
.j-bar-fill { position: absolute; left: 50%; width: min(62%, 22px); transform: translateX(-50%); border-radius: 1px; transition: opacity 0.12s; }
.j-bar-fill.is-good { background: var(--signal-mark); }
.j-bar-fill.is-bad { background: var(--red); }
.j-bar-wait { position: absolute; top: var(--zero); left: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); background: var(--amber); }
.j-bars.has-pick .j-bar:not(.is-on) .j-bar-fill { opacity: 0.35; }
.j-bars-wrap .hist-axis-top { top: -4px; transform: translateY(-100%); }
.j-tip {
  position: absolute; z-index: 2; display: grid; gap: 3px; max-width: 300px; padding: 8px 10px; transform: translate(-50%, calc(-100% - 12px));
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--panel-2); color: var(--secondary); font: 11px var(--mono); white-space: nowrap; pointer-events: none;
}
.j-tip strong { overflow: hidden; text-overflow: ellipsis; color: var(--label); font: 500 13px var(--sans); }
.j-tip b { color: var(--label); font-weight: 500; }
.j-tip b.is-good { color: var(--signal-ink); }
.j-tip b.is-bad { color: var(--red); }

/* Share dialog */
.share-panel { width: min(780px, 100%); }
.share-preview { display: grid; place-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); }
.share-preview .pnl-image { width: 100%; max-height: calc(64vh / var(--zoom)); object-fit: contain; }
.share-preview .pnl-image.is-tall { width: auto; }
.share-opts { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.share-opts [data-share-formats][hidden] + .share-hide { margin-left: auto; }
.share-hide { display: inline-flex; align-items: center; gap: 10px; color: var(--label); font-size: 13px; cursor: pointer; }
.share-hide input { position: absolute; opacity: 0; pointer-events: none; }
.share-hide input:checked + .switch { border-color: var(--switch-on-line); background: var(--switch-on); }
.share-hide input:checked + .switch::after { transform: translateX(16px); background: var(--switch-knob-on); }
.share-hide input:focus-visible + .switch { outline: 1px solid var(--focus-ring); outline-offset: 2px; }

.j-filters { display: flex; align-items: center; gap: 8px; }
.j-search { flex: 1; min-width: 0; height: 30px; padding: 0 12px; font-size: 13px; }
.j-count { min-width: 80px; color: var(--secondary); font: 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; text-align: right; }
/* The calendar day the table is narrowed to; a click lets it go. */
.j-day-chip { margin-left: 2px; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: none; color: var(--label); font: inherit; letter-spacing: inherit; text-transform: none; cursor: pointer; }
.j-day-chip:hover { border-color: var(--label); }

/* Table: the deals by day, each day under a line with its count and result
   in the columns they sum. A row is the time, the game, both legs (the one
   that lost dimmed), the bank, the result and how the match ended. */

.j-thead, .j-row { display: grid; align-items: center; column-gap: 18px; grid-template-columns: 44px minmax(160px, 1.1fr) minmax(300px, 2fr) 110px 130px 300px; }
.j-thead { padding: 10px 18px; border-bottom: 1px solid var(--line); }
.j-thead span:nth-child(4), .j-thead span:nth-child(5) { text-align: right; }
/* The day: one line above its deals – the date, then the count, the result
   and what still waits, side by side. */
.j-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 18px 18px 8px; color: var(--secondary); font: 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.j-day-head:not(:first-child) { border-top: 1px solid var(--line); }
.j-day-name { color: var(--label); }
.j-day-facts { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.j-day-facts i { color: var(--tertiary); font-style: normal; }
.j-day-facts b { font-weight: 500; letter-spacing: 0; }
.j-day-facts b.is-good { color: var(--signal-ink); }
.j-day-facts b.is-bad { color: var(--red); }
.j-day-wait { color: var(--amber); }
.j-row { position: relative; padding: 10px 18px; transition: background 0.1s; }
.j-row:hover { background: var(--panel-2); }
.j-row + .j-row { border-top: 1px solid var(--line); }
.j-time { color: var(--tertiary); font: 12px var(--mono); }
/* The game's line as the list writes it; the figures under the sums in mono. */
.j-event span { overflow: hidden; color: var(--secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.j-bank span, .j-result span { color: var(--secondary); font: 11px var(--mono); }
.j-event { display: grid; gap: 3px; min-width: 0; }
.j-event strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.j-legs { display: grid; gap: 3px; min-width: 0; }
.j-leg { display: grid; grid-template-columns: 16px 92px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 22px; font-size: 13px; }
.j-leg.is-lost { opacity: 0.4; }
.j-leg .logo { width: 16px; height: 16px; border-radius: 3px; }
.j-leg-book { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary); font-size: 12.5px; }
.j-leg-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-leg-num { font: 12px var(--mono); white-space: nowrap; }
.j-bank, .j-result { display: grid; justify-items: end; gap: 2px; text-align: right; }
.j-bank b { font: 400 15px var(--mono); }
.j-result b { font: 500 15px var(--mono); }
.j-result.is-good b { color: var(--signal-ink); }
.j-result.is-bad b { color: var(--red); }
.j-result span { white-space: nowrap; }
.j-status { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.j-pick { display: grid; gap: 3px; flex: 1; min-width: 0; max-width: 220px; }
/* How the match ended: a quiet field – the text and its arrow, the frame
   only under the pointer or in focus – so the column is not a wall of boxes. */
.j-pick select { width: 100%; border-color: transparent; background-color: transparent; }
.j-pick select:hover { border-color: var(--line-strong); }
.j-pick select.is-wait { color: var(--secondary); }
.j-auto { overflow: hidden; padding-left: 10px; color: var(--tertiary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
/* Row actions: PNL card, edit, delete – shown on the row under the pointer */
.j-acts { display: flex; flex: none; gap: 2px; }
.j-act { width: 28px; height: 28px; }
.j-act:hover { border-color: transparent; background: var(--fill); }
.j-delete:hover { color: var(--red); }
@media (hover: hover) {
  .j-acts { opacity: 0; transition: opacity 0.1s; }
  .j-row:hover .j-acts, .j-acts:focus-within { opacity: 1; }
}
.j-table .empty { padding: 48px 20px; }

/* ============================== responsive ============================== */

@media (max-width: 1500px) {
  .layout { gap: 18px; }
  .layout.has-detail { grid-template-columns: 300px minmax(0, 1fr); }
  .layout.has-detail .rail { display: none; }
  .layout:not(.has-detail) .list-head, .layout:not(.has-detail) .row { grid-template-columns: 40px 68px minmax(0, 1fr) 118px 52px 60px 90px; column-gap: 12px; }
  .c-avail, .row-hide, .list-head span:nth-child(n + 8) { display: none; }
}
@media (max-width: 1280px) {
  .j-thead { display: none; }
  .j-row { grid-template-columns: 44px minmax(0, 1fr) 110px 130px; grid-template-areas: "time event bank result" ". legs legs legs" ". status status status"; row-gap: 10px; }
  .j-time { grid-area: time; } .j-event { grid-area: event; } .j-legs { grid-area: legs; } .j-bank { grid-area: bank; } .j-result { grid-area: result; }
  .j-status { grid-area: status; justify-content: flex-start; }
}
@media (max-width: 1180px) {
  .layout, .layout.has-detail { grid-template-columns: minmax(0, 1fr); }
  .rail, .detail { max-height: none; overflow: visible; position: static; }
  .layout.has-detail .feed, .layout.has-detail .rail { display: none; }
  .row-hide { opacity: 1; }
}
@media (max-width: 900px) {
  .list-head { display: none; }
  /* The narrow row of an open deal's list, as above. */
  .row, .layout:not(.has-detail) .row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "time event profit" "time event book"; column-gap: 12px; row-gap: 3px; }
  .c-time { grid-area: time; }
  .c-event { grid-area: event; }
  .c-profit { grid-area: profit; align-self: end; min-width: calc(var(--profit-ch, 0) * 1ch); }
  .c-book { grid-area: book; justify-self: end; align-self: start; gap: 5px; }
  .c-book .logo { display: none; }
  .c-book .c-name { color: var(--tertiary); font-size: 11.5px; }
  .c-edge, .c-odds, .c-poly { display: none; }
  .deal-grid { grid-template-columns: minmax(0, 1fr); }
  .deal-side { order: 2; }
}
@media (max-width: 640px) {
  .topbar { gap: 10px; padding: 0 14px; }
  .toolbar-row .chips { flex-basis: 100%; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  #mode-tabs { flex: 1 1 100%; }
  #mode-tabs button { flex: 1; }
  .brand span { display: none; }
  .statusbar { padding: 0 14px; }
  .layout, .journal { padding: 14px; }
  .layout { gap: 14px; }
  .detail-headline h2 { font-size: 19px; }
  .hero { padding: 16px; }
  .stat-main strong { font-size: 38px; }
  .hero-meta div { padding: 0 12px; }
  .quick .seg { overflow-x: auto; scrollbar-width: none; }
  .quick .seg button { flex: 1 0 auto; padding: 0 10px; } /* the three modes fill the line; more would scroll */
  .leg-head { flex-wrap: wrap; }
  .leg-nums .leg-key { margin-left: 0; text-align: left; flex-basis: 100%; }
  .deal-actions { grid-template-columns: 1fr; }
  .params, .match-grid { grid-template-columns: 1fr; }
  .match-link { display: none; }
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick-grid.is-wide { grid-template-columns: minmax(0, 1fr); }
  .set-row { flex-wrap: wrap; }
  /* A number field stays beside its name, its hint wrapping instead: every
     such row reads the same, however long the hint. */
  .set-row:has(> .set-control) { flex-wrap: nowrap; gap: 12px; }
  .set-row > .set-control { width: 124px; }
  .edit-legs, .edit-grid-top { grid-template-columns: 1fr; }
  .edit-summary { grid-template-columns: 1fr 1fr; }
  .j-head { flex-wrap: wrap; }
  /* The period across the width, the two buttons side by side under it. */
  .j-head-actions { display: grid; grid-template-columns: 1fr 1fr; flex-basis: 100%; }
  .j-head-actions .seg { display: flex; grid-column: 1 / -1; }
  .j-head-actions .seg button { flex: 1; }
  .j-head-actions .btn { padding: 0 10px; }
  .j-filters { flex-wrap: wrap; }
  .j-search { flex-basis: 100%; }
  .j-filters .seg { overflow-x: auto; max-width: 100%; }
  /* A phone: the game beside its result and bank, the legs, then how it
     ended across the row; the day line above already says when. */
  .j-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "event result" "event bank" "legs legs" "status status"; row-gap: 8px; padding: 12px 14px; }
  .j-event { align-self: start; }
  .j-pick { max-width: none; }
  .j-time { display: none; }
  .j-event strong { white-space: normal; }
  .j-status { justify-content: flex-start; }
  .j-day-head { flex-wrap: wrap; gap: 4px 14px; padding: 16px 14px 6px; }
  .j-day-name { flex-basis: 100%; }
  .j-leg { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .j-leg-book { display: none; }
  /* The journal's four figures two by two. */
  .journal .hero-meta { display: grid; grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .journal .hero-meta div:nth-child(3) { border-left: 0; padding-left: 0; }
  .journal .hero-meta b { white-space: nowrap; }
  /* The editor: how the match ended gets a line of its own above the buttons. */
  .edit-panel .modal-actions { flex-wrap: wrap; }
  /* The share window fits a phone: its three buttons in three equal columns. */
  .modal { padding: 12px; }
  .modal-panel { min-width: 0; }
  .share-panel .modal-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .share-panel .modal-actions .spacer { display: none; }
  .share-panel .modal-actions .btn { padding: 0 8px; }
  .share-opts { flex-wrap: wrap; gap: 10px; }
  .edit-result { flex-basis: 100%; }
  .edit-result select { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner, .tag.is-live::after { animation: none; }
  .switch, .switch::after, .row, .j-row, .j-acts, .j-bar-fill { transition: none; }
}

/* ============================== trading ============================== */

.wallet-btn { width: auto; min-width: 32px; gap: 6px; padding: 0 7px; display: inline-flex; align-items: center; }
.wallet-btn.is-ready { color: var(--signal-ink); }
.wallet-btn.is-error { color: var(--red); }
.wallet-balance { font: 500 12px var(--mono); color: var(--label); }
.wallet-balance:empty { display: none; }

.wallet-status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.wallet-status > div { display: grid; gap: 3px; flex: 1; min-width: 0; }
.wallet-status b { font-size: 14px; font-weight: 500; }
.wallet-status span { color: var(--secondary); font-size: 12.5px; line-height: 1.45; }
.wallet-status strong { font: 500 18px var(--mono); }
.wallet-status code { color: var(--label); font: 12px var(--mono); }
.wallet-balances { display: grid; gap: 10px; margin: 12px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.wallet-balances div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wallet-balances dt { display: grid; gap: 2px; font-size: 13.5px; }
.wallet-balances small { color: var(--secondary); font-size: 12px; }
.wallet-balances dd { margin: 0; font: 500 16px var(--mono); white-space: nowrap; }
.wallet-status.is-blocked, .wallet-status.is-error { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.wallet-actions { display: flex; gap: 8px; }
.wallet-facts { display: grid; gap: 8px; margin: 0; padding: 0 0 0 18px; color: var(--secondary); font-size: 13px; line-height: 1.5; }

.trade-confirm { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--signal-line); border-radius: var(--radius); background: var(--panel); }
.trade-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.trade-nums div { display: grid; gap: 3px; min-width: 0; }
.trade-nums span { color: var(--secondary); font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.trade-nums b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 16px var(--mono); }
.trade-error { margin: 0; color: var(--red); font-size: 13px; }
.trade-wait { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--secondary); font-size: 13px; }
.trade-wait .spinner { width: 14px; height: 14px; }
.trade-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.trade-result { padding: 10px 14px; border-radius: var(--radius-s); font-size: 13px; }
.trade-result.is-ok { background: var(--signal-tint); color: var(--signal-ink); }
.trade-result.is-bad { background: var(--red-tint); color: var(--red); }
.trade-result.is-warn { background: var(--amber-tint); color: var(--amber); }
@media (max-width: 640px) {
  .trade-nums { grid-template-columns: 1fr 1fr; }
}

/* ============================== sign-in ============================== */

.auth-page { padding-bottom: 0; }
.auth-shell { display: grid; place-content: center; justify-items: center; gap: 22px; min-height: 100vh; padding: 32px 16px; }
.auth-card { position: relative; display: grid; gap: 16px; width: min(400px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 2px; background-color: var(--panel); }
.auth-card h1 { font-size: 26px; font-weight: 400; letter-spacing: -0.03em; }
.auth-lead { margin: -8px 0 0; color: var(--secondary); font-size: 13.5px; line-height: 1.5; }
/* Sign-in: one panel of the terminal on its measuring grid, under the apex
   mark – the lime top edge of the deal's profit block, the title as a
   drawer's, mono labels, the deal view's fields and its lime button with the
   key that presses it. The people who come here already have access, so there
   is nothing else to show. */
.signin-wrap { display: grid; place-content: center; justify-items: center; gap: 22px; min-height: 100vh; padding: 48px 20px 12vh; }
.signin-brand { display: flex; align-items: center; gap: 10px; color: var(--signal-mark); }
.signin-brand span { color: var(--label); font: 500 13px var(--mono); letter-spacing: 0.02em; }
.signin-form { position: relative; display: grid; gap: 18px; width: min(380px, calc(100vw - 40px)); padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 2px; background-color: var(--panel); }
.signin-form h1 { margin: 0 0 4px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.signin-field { display: grid; gap: 8px; }
/* Each field numbered, 01 and 02; the number turns lime once its field is
   reached, so the form shows how far along it is. */
.signin-label { display: flex; align-items: baseline; gap: 10px; color: var(--secondary); font: 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.signin-label b { color: var(--tertiary); font-weight: 500; transition: color 0.12s; }
.signin-field.is-lit .signin-label b { color: var(--signal-ink); }
.signin-field input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--bg); color: var(--label); font: 500 14px var(--mono); outline: 0; caret-color: var(--signal-mark); transition: border-color 0.12s; }
.signin-field input:focus { border-color: var(--focus-line); }
.signin-field input.is-empty { border-color: var(--red); }
.signin-field input:-webkit-autofill, .signin-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--bg) inset; -webkit-text-fill-color: var(--label); caret-color: var(--signal-mark); transition: background-color 9999s; }
.signin-caps { color: var(--amber); font: 11px var(--mono); }
/* "Войти" stays in the middle of the button, its key at the right edge. */
.signin-submit { position: relative; min-height: 46px; margin-top: 6px; font-size: 14px; }
.signin-submit kbd { position: absolute; top: 50%; right: 14px; margin: 0; transform: translateY(-50%); }
.signin-submit:disabled { opacity: 0.6; }
@media (pointer: coarse) { .signin-submit kbd { display: none; } } /* a phone has no Enter to press */
@media (max-width: 640px) {
  .signin-wrap { place-content: start center; padding-top: 14vh; }
}
.auth-error { margin: 0; color: var(--red); font: 12px/1.45 var(--mono); }
.auth-submit { min-height: 44px; font-size: 14px; }
.auth-submit:disabled { opacity: 0.6; cursor: default; }
.auth-kv { display: grid; margin: 0; }
.auth-kv div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--line); }
.auth-kv dt { color: var(--secondary); font: 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.auth-kv dd { margin: 0; font: 13px var(--mono); }
.auth-steps { display: grid; gap: 6px; padding: 12px 14px; border-left: 2px solid var(--amber); background: var(--amber-tint); }
.auth-steps p { margin: 0; color: var(--label); font-size: 13px; line-height: 1.5; }
.auth-actions { display: flex; gap: 8px; }
.auth-actions .btn-primary { flex: 1; }

.logout-btn:hover { color: var(--red); }

/* ============================== admin ============================== */
/* A working dashboard: sections in the top bar, figures in rows, dense tables
   with mono numbers, one-series column charts in the muted lime. */

:root, :root[data-theme="dark"] { --chart-bar: #7ca210; } /* lime stepped into the chart lightness band */
:root[data-theme="light"] { --chart-bar: #16a34a; }

.admin-page { padding-bottom: 0; }
.admin-top { gap: 18px; }
.admin-nav { display: flex; align-self: stretch; gap: 2px; margin-left: 14px; }
.admin-nav a { display: inline-flex; align-items: center; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--secondary); font-size: 13px; font-weight: 500; text-decoration: none; }
.admin-nav a:hover { color: var(--label); }
.admin-nav a.is-on { border-bottom-color: var(--label); color: var(--label); }

.admin-wrap { max-width: 1480px; margin: 0 auto; padding: 22px 24px 40px; }
.admin-view { display: grid; gap: 14px; align-content: start; }
.admin-viewbar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.admin-viewbar h1 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.admin-viewbar .seg { align-self: center; }
.admin-muted { color: var(--secondary); font: 11.5px var(--mono); letter-spacing: 0.02em; }
.admin-mono { font: 12px var(--mono); color: var(--label); }
.admin-mono small { color: var(--secondary); font-size: 11px; }
.admin-link { color: var(--secondary); font: 11.5px var(--mono); text-decoration: none; }
.admin-link:hover { color: var(--label); }
.admin-link::after { content: " →"; }

/* Figures: label, value, a note under it */
.admin-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.admin-kpis.is-wide { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.admin-kpi { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 14px 18px 16px; }
.admin-kpi + .admin-kpi { border-left: 1px solid var(--line); }
.admin-kpi-label { color: var(--secondary); font: 11px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-kpi strong { font-size: 26px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
.admin-kpi small { color: var(--tertiary); font: 11.5px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-kpi.is-warn small { color: var(--amber); }
.admin-kpi.is-bad small { color: var(--red); }

/* Sources: one small cell each */
.admin-srcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); overflow: hidden; margin: 0 -1px -1px 0; }
.admin-src { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; height: 38px; padding: 0 14px; box-shadow: inset -1px -1px 0 var(--line); color: var(--label); cursor: default; }
.admin-src b { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.admin-src span { color: var(--secondary); font: 11.5px var(--mono); white-space: nowrap; }
.admin-src.is-bad span { color: var(--red); }
.admin-src.is-warn span { color: var(--amber); }

/* Panels */
.admin-panel { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.admin-panel.is-flush { gap: 0; padding: 0; overflow: hidden; }
.admin-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.admin-panel-head h2 { margin: 0; font-size: 14px; font-weight: 500; }
.admin-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.admin-split.is-wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.admin-split.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-gap { margin-top: 10px; }
.admin-panel .admin-kpis { border: 0; border-radius: 0; background: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-panel .admin-kpi { padding: 0 14px 0 0; }
.admin-panel .admin-kpi + .admin-kpi { padding-left: 14px; }
.admin-panel .admin-kpi strong { font-size: 22px; }
.ov-money { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 32px; }
.ov-money[hidden] { display: none; }
.ov-money .ov-side { margin-left: 8px; }
.ov-money .ov-price { display: flex; align-items: flex-end; gap: 10px; margin-left: auto; }
.ov-money .admin-field input { width: 120px; }
.ov-hero { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; padding-bottom: 6px; }
.ov-main { display: grid; gap: 4px; }
.ov-main strong { font-size: 48px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.ov-main small { color: var(--secondary); font: 12px var(--mono); }
.ov-side { display: flex; margin: 0; }
.ov-side div { display: grid; gap: 4px; padding: 0 18px; border-left: 1px solid var(--line); }
.ov-side div:last-child { padding-right: 0; }
.ov-side dt { color: var(--secondary); font: 10.5px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.ov-side dd { margin: 0; font: 400 20px var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-caption { margin: -4px 0 0; color: var(--tertiary); font: 11px var(--mono); }
.ov-leaders { display: grid; align-content: space-between; min-width: 0; }
.ov-lrow { display: grid; grid-template-columns: 26px minmax(90px, 1.5fr) repeat(4, minmax(54px, 0.7fr)); align-items: center; gap: 12px; min-height: 50px; border-top: 1px solid var(--line); font: 13px var(--mono); font-variant-numeric: tabular-nums; }
.ov-lrow > span:nth-child(n+3) { text-align: right; }
.ov-lrow.is-head { min-height: 0; padding-bottom: 8px; border-top: 0; color: var(--secondary); font: 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.ov-rank { color: var(--tertiary); font-size: 11px; }
.ov-lname { display: grid; gap: 7px; min-width: 0; }
.ov-lname b { overflow: hidden; font: 500 14px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.ov-lname i { display: block; height: 3px; min-width: 2px; border-radius: 0 2px 2px 0; background: var(--chart-bar); }
.admin-chart.has-now .chart-bar:not(.is-now) { opacity: 0.55; }
.chart-peak { fill: var(--secondary); font: 10.5px var(--mono); }
.admin-empty { margin: 0; padding: 22px 0; color: var(--secondary); font-size: 13px; text-align: center; }

/* Tables */
.admin-table { display: grid; min-width: 0; overflow-x: auto; }
.admin-trow { display: grid; align-items: center; gap: 14px; min-width: 640px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.admin-trow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-trow b { font-weight: 500; }
.admin-thead { padding: 0 0 8px; border-top: 0; color: var(--secondary); font: 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.admin-thead .is-sortable { cursor: pointer; user-select: none; }
.admin-thead .is-sortable:hover, .admin-thead .is-sorted { color: var(--label); }
.admin-trow .is-num { font: 12.5px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.admin-thead .is-num { font-size: 10.5px; }
.admin-trow .is-mono { font: 12px var(--mono); color: var(--secondary); }
.admin-trow small { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--secondary); font-size: 11.5px; }
.admin-share { display: inline-block; width: calc(100% - 56px); height: 6px; margin-right: 8px; vertical-align: middle; border-radius: 1px; background: var(--fill); }
.admin-share i { display: block; height: 100%; border-radius: 1px; background: var(--chart-bar); }
.admin-share-num { font: 12px var(--mono); }

/* Charts: one series, hairline grid, mono ticks */
.admin-chart { min-width: 0; min-height: 168px; }
.admin-chart svg { display: block; width: 100%; height: 168px; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-tick { fill: var(--tertiary); font: 10px var(--mono); }
.chart-bar { fill: var(--chart-bar); }
.chart-bar.is-neg { fill: var(--red); }
.chart-grid.is-zero { stroke: var(--line-strong); }
.chart-hit { fill: transparent; }
.chart-col:hover .chart-hit { fill: var(--fill); }
.admin-tip { position: fixed; top: 0; left: 0; z-index: 50; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--panel-2); color: var(--label); font: 12px var(--mono); white-space: nowrap; pointer-events: none; }

/* Team: ranked horizontal bars, money, the member card */
.admin-hbars { display: grid; gap: 2px; }
.admin-hbar { display: grid; grid-template-columns: minmax(84px, 0.9fr) minmax(0, 1.6fr) 40px 92px; align-items: center; gap: 12px; padding: 5px 0; font-size: 13px; }
.admin-hbar:hover { background: var(--fill); }
.admin-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-hbar-track { height: 8px; border-radius: 1px; background: var(--fill); }
.admin-hbar-track i { display: block; height: 100%; min-width: 2px; border-radius: 0 2px 2px 0; background: var(--chart-bar); }
.admin-hbar-value, .admin-hbar-note { font: 12.5px var(--mono); text-align: right; white-space: nowrap; }
.admin-hbar-note { color: var(--secondary); }
.admin-money.is-good, .admin-hbar-note.is-good { color: var(--signal-ink); }
.admin-money.is-bad, .admin-hbar-note.is-bad { color: var(--red); }
#team-members .admin-trow[data-member] { cursor: pointer; }
#team-members .admin-trow[data-member]:hover, #team-members .admin-trow[data-member]:focus-visible { outline: 0; background: var(--panel-2); }
.admin-kpis.is-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 4px; }
.admin-kpis.is-compact .admin-kpi { padding: 10px 12px; }
.admin-kpis.is-compact .admin-kpi strong { font-size: 18px; }
.admin-deal { display: grid; gap: 3px; padding: 9px 0; border-top: 1px solid var(--line); }
.admin-deal-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.admin-deal-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.admin-deal-head .admin-money { font: 12.5px var(--mono); white-space: nowrap; }
.admin-deal-meta { color: var(--secondary); font: 11.5px var(--mono); }

/* Users */
.admin-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-toolbar .j-search { flex: 1 1 260px; }
.admin-chip { display: inline-block; padding: 1px 7px; border-radius: var(--radius-xs); background: var(--fill-hover); color: var(--secondary); font: 500 11px/18px var(--mono); font-style: normal; white-space: nowrap; }
.admin-chip.is-good { background: var(--signal-tint); color: var(--signal-ink); }
.admin-chip.is-warn { background: var(--amber-tint); color: var(--amber); }
.admin-chip.is-bad { background: var(--red-tint); color: var(--red); }
.admin-chip.is-admin { background: var(--blue-tint); color: var(--blue); }
.admin-online { color: var(--signal-ink); font-style: normal; }

/* Audit */
#admin-audit { max-height: calc(100vh - 200px); overflow-y: auto; }
.admin-event { display: grid; grid-template-columns: 110px minmax(160px, 1fr) 150px minmax(0, 2fr) 120px; gap: 12px; align-items: baseline; padding: 8px 18px; border-top: 1px solid var(--line); font-size: 13px; }
#admin-audit .admin-event:first-child { border-top: 0; }
.admin-event.is-compact { grid-template-columns: 100px 130px minmax(0, 1fr); padding: 7px 0; }
.admin-event b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.admin-action { font: 12px var(--mono); }
.admin-action.a-login_failed, .admin-action.a-blocked { color: var(--red); }
.admin-action.a-subscription { color: var(--signal-ink); }

/* The user card */
.admin-kv { margin: 6px 0 4px; }
.admin-btns, .admin-until { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-until { margin-top: 10px; }
.admin-until input { height: 34px; padding: 0 10px; border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--bg); color: var(--label); font: 13px var(--mono); }
.admin-danger { border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.admin-note { width: 100%; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--bg); color: var(--label); font: 13px/1.5 var(--sans); resize: vertical; outline: 0; }
.admin-note:focus { border-color: var(--focus-line); }
.admin-temp { display: grid; gap: 6px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--signal-line); border-radius: var(--radius-s); background: var(--signal-tint); }
.admin-temp code { font: 500 17px var(--mono); letter-spacing: 0.04em; user-select: all; }
.admin-error { margin: 14px 0 0; padding: 9px 12px; border-radius: var(--radius-s); background: var(--red-tint); color: var(--red); font-size: 13px; }

/* A new member: the form, then the login and password shown once */
.ch-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: start; }
.ch-controls { gap: 16px; position: sticky; top: 14px; }
.ch-controls .seg { display: flex; }
.ch-controls .seg button { flex: 1; }
.ch-controls textarea { width: 100%; padding: 10px; border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--bg); color: var(--label); font: 12.5px/1.5 var(--mono); resize: vertical; outline: 0; }
.ch-actions { display: grid; gap: 8px; }
.ch-stage { display: grid; justify-items: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.ch-stage canvas { display: block; width: min(100%, 620px); height: auto; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.ch-stage canvas[hidden] { display: none; }
@media (max-width: 900px) { .ch-layout { grid-template-columns: minmax(0, 1fr); } .ch-controls { position: static; } }
.admin-create { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); }
.admin-create[hidden], .admin-hbars[hidden] { display: none; }
.admin-panel-head .seg { align-self: center; }
.admin-panel-head h2 .admin-muted { margin-left: 8px; }
.admin-create-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.admin-field { display: grid; gap: 5px; }
.admin-field.is-grow { flex: 1 1 260px; }
.admin-field span { color: var(--secondary); font: 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.admin-field input, .admin-field select, #admin-role { height: 34px; min-width: 0; padding: 0 10px; border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--bg); color: var(--label); font-size: 13px; outline: 0; }
.admin-field input:focus, .admin-field select:focus { border-color: var(--focus-line); }
.admin-created { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 12px 14px; border: 1px solid var(--signal-line); border-radius: var(--radius-s); background: var(--signal-tint); }
.admin-created-pair { display: grid; gap: 3px; }
.admin-created-pair code { font: 500 16px var(--mono); letter-spacing: 0.03em; user-select: all; }
.admin-created-actions { display: flex; gap: 6px; margin-left: auto; }

@media (max-width: 1280px) {
  .admin-kpis, .admin-kpis.is-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-kpis > .admin-kpi:nth-child(4n + 1) { border-left: 0; }
  .admin-kpis > .admin-kpi:nth-child(n + 5) { border-top: 1px solid var(--line); }
  .admin-panel .admin-kpis > .admin-kpi { border-top: 0; }
}
@media (max-width: 1000px) {
  .admin-split, .admin-split.is-three, .admin-split.is-wide { grid-template-columns: minmax(0, 1fr); }
  .admin-event { grid-template-columns: 100px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .admin-top { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 0; }
  .admin-nav { order: 9; flex-basis: 100%; margin: 0; overflow-x: auto; }
  .admin-nav a { padding: 10px 12px; }
  .admin-wrap { padding: 14px 16px 32px; }
  .admin-kpis, .admin-kpis.is-wide { grid-template-columns: 1fr 1fr; }
  .admin-kpis > .admin-kpi:nth-child(odd) { border-left: 0; }
  .admin-kpis > .admin-kpi:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .admin-panel .admin-kpis { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .admin-hbar { grid-template-columns: 90px minmax(0, 1fr) 36px 84px; gap: 8px; }
  .admin-kpis.is-compact { grid-template-columns: 1fr 1fr; }
}