/*
 * PumpSwap dashboard styling.
 *
 * Dark, high contrast, no ornament: the numbers are the interface. Two rules
 * beyond that are load-bearing rather than cosmetic.
 *
 * 1. Risk is never encoded by colour alone. A draining position is sorted to the
 *    front of its list, gains a full-width banner row, a thick left edge, and a
 *    leading glyph; a drained pool shows as a hatched texture, not a red bar. A
 *    reader who cannot separate red from green still reads the page correctly.
 * 2. Nothing scrolls the page sideways. Wide content (tables) lives inside
 *    .scroll-x and scrolls within itself; every grid collapses to one column
 *    before it would overflow a 390px phone.
 */

:root {
  color-scheme: dark;

  /* Contrast ratios against --surface, measured rather than eyeballed. Every
     colour that carries text clears 7:1; bars and tracks clear the lower bars
     noted beside them. The hue and saturation of each was kept and only the
     lightness raised, so the palette reads as the same palette.

       --ink-muted    5.04 -> 7.01    hints, sub-labels, footers
       --good         5.40 -> 7.01
       --serious      6.86 -> 7.01
       --series-1     4.98 -> 6.00    bars
       --series-2     4.66 -> 6.01
       --series-3     5.32 -> 6.03
       --critical     3.77 -> 5.03    edges and bars; text uses --critical-ink
       --series-dim   1.68 -> 2.60    unfilled bar remainder
       --grid         1.29 -> 2.00    tracks and rules

     --ink-muted was the one that mattered: it carries every hint and every
     sub-label on the page, at the smallest sizes on it, and 5:1 is the floor of
     legibility rather than a comfortable place to sit. */
  --plane: #0d0d0d;
  --surface: #161615;
  --surface-2: #1f1f1d;
  --ink: #ffffff;
  --ink-2: #d2d1c6;
  --ink-muted: #a3a19c;
  --grid: #494945;
  --border: rgba(255, 255, 255, 0.22);

  --series-1: #5397e8;
  --series-2: #e0784e;
  --series-3: #1ba978;
  --series-dim: #295b94;

  --good: #0ebb0e;
  --warning: #fab219;
  --serious: #ec865d;
  --critical: #d96161;
  --critical-ink: #ff9a9a;
  --good-ink: #5ee05e;

  --radius: 10px;
  --gap: 14px;
  --pad: 16px;

  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--plane);
  color: var(--ink);
  /* 17px, not 15. This is read on a phone and a tablet, often at arm's length,
     and the old scale bottomed out at 0.62rem — 9.3 physical pixels for the
     funnel's pass rates and the ladder chips. The floor below matters more than
     the root: nothing on this page is small enough to be worth squinting at. */
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 650; }
h1 { font-size: 1.05rem; letter-spacing: -0.01em; }
h2 { font-size: 1.0rem; }
h3 { font-size: 0.93rem; }
p { margin: 0; }

main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad) 48px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.num, .kpi-value, .funnel-counts, .hist-count, .reason-count, table td.num, table th.num {
  font-variant-numeric: tabular-nums;
}

.is-hidden { display: none !important; }

/* --- top bar ------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--pad);
  background: rgba(13, 13, 13, 0.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

.topbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.topbar-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.topbar-right { display: flex; gap: 8px; flex-shrink: 0; }

.chip {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.83rem;
  white-space: nowrap;
}
.chip.is-bad { border-color: var(--critical); color: var(--critical-ink); }
.chip.is-armed { border-color: var(--warning); color: var(--warning); font-weight: 700; }

.button {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.89rem;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
}
.button:hover { background: #33332f; }
/* 0.5 opacity took --ink to 8:1 and --ink-2 under 6:1 — a disabled control still
   has to be readable to say what it is that cannot be pressed right now. */
.button:disabled { opacity: 0.62; cursor: default; }
.button.is-armed { border-color: var(--warning); color: var(--warning); }
/* Destructive, and marked as such without relying on colour: the border is
   heavier and the label carries its own count. */
.button-danger { color: var(--critical-ink); border-color: var(--critical); border-width: 2px; }
.button-danger:hover:not(:disabled) { background: #3a2020; }
.button-quiet { color: var(--ink-2); font-weight: 500; }
.button-wide { width: 100%; padding: 11px; font-size: 1.0rem; }

:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }

/* --- banners and alerts -------------------------------------------------- */

.banner {
  max-width: 1440px;
  margin: 10px auto 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.89rem;
}
.banner.is-critical { border-left-color: var(--critical); color: var(--critical-ink); }
.banner.is-warning { border-left-color: var(--warning); color: var(--warning); }

.alerts {
  max-width: 1440px;
  margin: 12px auto 0;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Size and placement carry the severity, not just the edge colour. */
.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left-width: 6px;
  border-radius: 8px;
  background: var(--surface);
}
.alert-glyph { font-size: 1.1rem; line-height: 1.2; }
.alert-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert-title { font-size: 1rem; }
.alert-detail { font-size: 0.89rem; color: var(--ink-2); overflow-wrap: anywhere; }

.alert.is-critical { border-left-color: var(--critical); background: #241514; }
.alert.is-critical .alert-title { font-size: 1.12rem; }
.alert.is-serious { border-left-color: var(--serious); }
.alert.is-warning { border-left-color: var(--warning); }

/* --- cards --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 0;
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.card-note { font-size: 0.86rem; color: var(--ink-muted); }
.card-foot { margin-top: 10px; font-size: 0.85rem; color: var(--ink-muted); overflow-wrap: anywhere; }
.hint { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 10px; }
.empty { padding: 14px 0; font-size: 0.89rem; color: var(--ink-muted); }
.subhead { margin: 18px 0 8px; color: var(--ink-2); }

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--gap);
}

/* --- KPI tiles ----------------------------------------------------------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: var(--gap);
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}
.kpi-label { font-size: 0.83rem; color: var(--ink-muted); }
.kpi-value { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; }
.kpi-sub { font-size: 0.82rem; color: var(--ink-muted); overflow-wrap: anywhere; }
.kpi-bar { margin: 4px 0 2px; height: 5px; }

.is-up { color: var(--good-ink); }
.is-down { color: var(--critical-ink); }

/* --- bars ---------------------------------------------------------------- */

.bar-track {
  position: relative;
  height: 12px;
  border-radius: 4px;
  background: var(--grid);
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 4px;
  background: var(--series-1);
}

/* --- funnel -------------------------------------------------------------- */

.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: flex; flex-direction: column; gap: 3px; }
.funnel-head, .funnel-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.87rem;
}
.funnel-label { color: var(--ink); }
.funnel-counts { color: var(--ink-2); }
.funnel-foot { font-size: 0.82rem; color: var(--ink-muted); }
.funnel-track { height: 16px; }
.bar-in { background: var(--series-dim); }
.bar-out { background: var(--series-1); }
.funnel-row.is-terminal .bar-out { background: var(--series-3); }
/* A stage that admits nothing is where the money stops; say so in words. */
.funnel-row.is-stalled .funnel-label::after {
  content: " ■ 전량 탈락";
  color: var(--serious);
  font-size: 0.82rem;
}

/* --- histogram ----------------------------------------------------------- */

.hist { display: flex; flex-direction: column; gap: 4px; }
.hist-row {
  display: grid;
  grid-template-columns: 84px 1fr 92px;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  font-size: 0.86rem;
}
.hist-label { color: var(--ink-2); white-space: nowrap; }
.hist-count { color: var(--ink-muted); text-align: right; white-space: nowrap; }
.hist-track { height: 14px; }
.hist-fill { background: var(--series-dim); }
/* The seed band is the one shape the histogram exists to show. */
.hist-row.is-seed .hist-label { color: var(--warning); font-weight: 700; }
.hist-row.is-seed .hist-fill { background: var(--warning); }
.hist-row.passes-gate .hist-fill { background: var(--series-1); }
.hist-row.gate-boundary {
  border-top: 2px solid var(--ink-muted);
  margin-top: 6px;
  padding-top: 8px;
  position: relative;
}
.hist-row.gate-boundary::before {
  content: "게이트 통과 대역 ↓";
  position: absolute;
  top: -9px;
  left: 0;
  padding-right: 6px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 0.78rem;
}

/* --- rejection reasons --------------------------------------------------- */

.reasons { display: flex; flex-direction: column; gap: 6px; }
.reason-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 74px;
  align-items: center;
  gap: 8px;
  font-size: 0.87rem;
}
.reason-label { color: var(--ink-2); overflow-wrap: anywhere; }
.reason-track { height: 10px; }
.reason-fill { background: var(--series-2); }
.reason-count { color: var(--ink-muted); text-align: right; white-space: nowrap; }

/* --- positions ----------------------------------------------------------- */

.position-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
}
.position-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-2);
  border-left: 4px solid var(--border);
}
.position-card.is-watch { border-left-color: var(--serious); }
.position-card.is-draining { border-left-color: var(--critical); background: #241514; }

.position-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.position-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.position-symbol { font-size: 1.05rem; font-weight: 650; overflow-wrap: anywhere; }
.position-gain { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.position-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.84rem;
  color: var(--ink-muted);
}

.position-risk {
  padding: 6px 10px;
  border-radius: 6px;
  background: #2c1a18;
  font-size: 0.94rem;
  font-weight: 650;
  color: var(--serious);
}
.position-risk.is-critical { color: var(--critical-ink); font-size: 1.0rem; }

.gauge, .ladder { display: flex; flex-direction: column; gap: 6px; }
.gauge-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.86rem; }
.gauge-title { color: var(--ink-muted); }
.gauge-value { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.gauge-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.83rem;
  color: var(--ink-muted);
}

/* The empty part of the gauge is the liquidity that left: hatched, so "gone" is
   legible without relying on the fill colour. */
.gauge-track {
  height: 22px;
  margin-bottom: 14px;
  overflow: visible;
  background:
    repeating-linear-gradient(135deg, #3a2422 0 6px, #2a1c1b 6px 12px);
}
.gauge-fill { background: var(--series-3); border-radius: 4px 0 0 4px; }
.position-card.is-draining .gauge-fill { background: var(--critical); }

.gauge-line {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink);
}
.gauge-line-label {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateX(-50%);
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.ladder-track { height: 14px; }
.ladder-fill { background: var(--series-1); }
.ladder-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ladder-chip { font-size: 0.82rem; }
.ladder-chip.is-tp { border-color: var(--good); color: var(--good-ink); }
.ladder-chip.is-empty { color: var(--ink-muted); }

.position-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: 0.86rem;
  color: var(--ink-muted);
}
.position-pnl { font-weight: 650; font-variant-numeric: tabular-nums; }
.position-reason { overflow-wrap: anywhere; }
.position-link { color: var(--series-1); text-decoration: none; margin-left: auto; }
.position-link:hover { text-decoration: underline; }
.position-status { font-size: 0.80rem; }

/* --- tables -------------------------------------------------------------- */

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-y-sm { max-height: 320px; overflow-y: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  white-space: nowrap;
}
.table th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
  padding: 6px 10px 6px 0;
  position: sticky;
  top: 0;
  background: var(--surface);
}
.table td {
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--ink-2);
}
.table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.candidate-row.is-ready td { color: var(--ink); font-weight: 600; }

/* --- breaker ------------------------------------------------------------- */

.breaker-state { font-size: 1.05rem; font-weight: 650; }
.breaker-state.is-tripped { color: var(--critical-ink); font-size: 1.2rem; }
.breaker-reason { font-size: 0.88rem; color: var(--ink-2); margin-bottom: 10px; }
.breaker-track { height: 18px; margin: 16px 0 20px; overflow: visible; }
.breaker-track .bar-fill { background: var(--series-3); }
.breaker-metric { font-size: 0.89rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* --- providers ----------------------------------------------------------- */

.providers { display: flex; flex-direction: column; gap: 8px; }
.provider-row {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--surface-2);
}
.provider-row.is-bad { border-left-color: var(--critical); background: #241514; }
.provider-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.provider-name { font-weight: 650; font-size: 0.94rem; overflow-wrap: anywhere; }
.provider-status.is-bad { border-color: var(--critical); color: var(--critical-ink); font-weight: 700; }
.provider-meta { font-size: 0.83rem; color: var(--ink-muted); overflow-wrap: anywhere; }

/* --- latency ------------------------------------------------------------- */

.latency { display: flex; flex-direction: column; gap: 10px; }
.latency-row { display: flex; flex-direction: column; gap: 3px; }
.latency-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.87rem; }
.latency-label { color: var(--ink-2); }
.latency-value { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.latency-track { height: 12px; }
.latency-p90 { background: var(--series-dim); }
.latency-p50 { background: var(--series-1); }
.latency-meta { font-size: 0.82rem; color: var(--ink-muted); }

/* --- events -------------------------------------------------------------- */

.filter { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--ink-muted); }
.filter select {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font: inherit;
  font-size: 0.86rem;
}

.events { display: flex; flex-direction: column; max-height: 380px; overflow-y: auto; }
.event-row {
  display: grid;
  grid-template-columns: 62px 62px 130px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.86rem;
}
.event-time { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.event-level { font-size: 0.78rem; text-align: center; }
.event-type { color: var(--ink-muted); overflow-wrap: anywhere; }
.event-message { color: var(--ink-2); overflow-wrap: anywhere; }
.event-row.is-warn .event-level { border-color: var(--warning); color: var(--warning); }
.event-row.is-error .event-level { border-color: var(--critical); color: var(--critical-ink); }
.event-row.is-error .event-message { color: var(--critical-ink); }
.event-row.is-trade .event-level { border-color: var(--series-1); color: var(--series-1); }
.event-row.is-trade .event-message { color: var(--ink); font-weight: 600; }

/* --- footer -------------------------------------------------------------- */

.footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px var(--pad) 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

/* --- login --------------------------------------------------------------- */

.login-page { display: block; }
.login-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}
.login-card {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.field { display: flex; flex-direction: column; gap: 4px; font-size: 0.87rem; color: var(--ink-muted); }
.field input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 1.0rem;
  width: 100%;
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 820px) {
  :root { --pad: 12px; --gap: 12px; }
  .kpi-value { font-size: 1.3rem; }
}

@media (max-width: 560px) {
  /* Still 16px. Shrinking the root on the smallest screen is backwards — that is
     the screen being read one-handed, in the dark, to decide whether to disarm.
     Narrow layouts are solved by stacking below, not by shrinking type. */
  html, body { font-size: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-grid, .position-grid { grid-template-columns: minmax(0, 1fr); }
  .topbar { position: static; }
  .hist-row { grid-template-columns: 66px 1fr 74px; gap: 6px; font-size: 0.83rem; }
  .reason-row { grid-template-columns: minmax(0, 1fr) 60px 62px; }
  /* The event grid would force a horizontal scroll at 390px; the type drops to
     its own line rather than squeezing the message into nothing. */
  .event-row { grid-template-columns: 58px 56px minmax(0, 1fr); }
  .event-row .event-message { grid-column: 3; grid-row: 1; }
  .event-row .event-type { grid-column: 1 / -1; grid-row: 2; }
  .position-gain { font-size: 1.1rem; }
}

/* The graduated-ratio bar when its stop rule is off: shown, but visibly not a
   control. A solid bar and a hard stop line read as "about to trip" when the
   number is only being observed. */
.is-advisory {
  opacity: 0.45;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 4px,
    rgba(255, 255, 255, 0.18) 4px 8px
  );
}

/* -------------------------------------------------------------------------
 * Kairos1 visual parity layer
 *
 * Kairos2 keeps its richer 94i telemetry and API contract, but the operating
 * surface deliberately follows Kairos1: narrow mobile-first console, square
 * panels, mono typography, neon-green state, large equity card and fixed
 * five-tab navigation.
 * ---------------------------------------------------------------------- */

:root {
  --plane: #040607;
  --surface: #101517;
  --surface-2: #151c1f;
  --ink: #ffffff;
  --ink-2: #dfe8e4;
  --ink-muted: #afbfba;
  --grid: #2d373a;
  --border: #3a474b;
  --series-1: #9dffca;
  --series-2: #f2c46d;
  --series-3: #55efa0;
  --series-dim: #263b34;
  --good: #55efa0;
  --good-ink: #9dffca;
  --warning: #f2c46d;
  --serious: #ff9a72;
  --critical: #ff7484;
  --critical-ink: #ff9aa7;
  --radius: 0;
  --gap: 14px;
  --pad: 24px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html,
body {
  min-height: 100%;
  background:
    radial-gradient(circle at 80% -10%, rgba(67, 217, 140, .08), transparent 28rem),
    var(--plane);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}

.shell {
  width: min(100%, 768px);
  max-width: 768px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 24px calc(104px + env(safe-area-inset-bottom));
  display: block;
}

.topbar {
  position: static;
  min-height: 104px;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: transparent;
  backdrop-filter: none;
}

.brand,
.stream,
.mode-strip > div,
.equity-head,
.section-head {
  display: flex;
  align-items: center;
}

.brand {
  min-width: 0;
  gap: 14px;
}

.mark {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--good-ink);
  color: #07110b;
  font: 900 21px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -1px;
  box-shadow: 0 0 32px rgba(140, 255, 193, .12);
}

.eyebrow,
.label {
  margin: 0;
  color: var(--series-3);
  font: 800 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.brand h1 {
  margin: 4px 0 0;
  font: 800 27px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}

.brand h1 span,
.login-panel h1 span {
  color: var(--good-ink);
}

.stream {
  gap: 9px;
  text-align: right;
}

.stream i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--critical);
  box-shadow: 0 0 13px rgba(255, 116, 132, .65);
}

.stream.online i {
  background: var(--series-3);
  box-shadow: 0 0 13px rgba(85, 239, 160, .65);
}

.stream strong,
.stream small {
  display: block;
  font: 800 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
}

.stream small {
  color: var(--ink-muted);
  font-weight: 500;
}

.logout {
  margin-left: 7px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--ink-muted);
  font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mode-strip {
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  color: var(--ink-muted);
}

.mode-strip > div {
  gap: 9px;
}

.mode-strip b,
.mode-strip p,
.mode-state {
  margin: 0;
  font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mode {
  padding: 6px 8px;
  border: 1px solid rgba(140, 255, 193, .28);
  color: var(--good-ink);
  font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.banner,
.alerts {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.banner {
  border-radius: 0;
}

.tab-panel {
  display: none;
  margin-top: 22px;
}

.tab-panel.active {
  display: block;
}

.tab-panel > * + * {
  margin-top: 14px;
}

.equity-card {
  margin-top: 0;
  padding: 22px 22px 0;
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(18, 23, 25, .96), rgba(11, 14, 15, .96));
}

.equity-head {
  justify-content: space-between;
}

.equity-head strong {
  display: block;
  margin-top: 8px;
  font: 600 46px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.06em;
}

.equity-head em {
  color: var(--ink-muted);
  font-size: 17px;
  font-style: normal;
  letter-spacing: 0;
}

.pnl {
  text-align: right;
}

.pnl small,
.pnl b {
  display: block;
  font: 700 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pnl small {
  color: var(--ink-muted);
}

.pnl b {
  margin-top: 4px;
  font-size: 17px;
}

.chart {
  display: block;
  width: calc(100% + 44px);
  height: 132px;
  margin: 19px -22px 0;
}

.gridline {
  fill: none;
  stroke: #2d373a;
  stroke-width: 1;
}

.area {
  fill: url(#equity-area);
}

.line {
  fill: none;
  stroke: var(--good-ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.equity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 -22px;
  border-top: 1px solid var(--border);
}

.equity-grid div {
  min-width: 0;
  padding: 15px 12px 17px;
  border-right: 1px solid var(--border);
}

.equity-grid div:last-child {
  border-right: 0;
}

.equity-grid small,
.equity-grid b {
  display: block;
  font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.equity-grid small {
  color: var(--ink-muted);
}

.equity-grid b {
  margin-top: 5px;
  font-size: 16px;
}

.equity-card .kpi-bar {
  height: 3px;
  margin: 0 -22px;
  border-radius: 0;
}

.equity-caption {
  margin: 0 -22px;
  padding: 8px 12px;
  color: var(--ink-muted);
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 10px;
  margin: 14px 0 28px;
}

.controls button {
  height: 62px;
  border: 1px solid #536065;
  border-radius: 0;
  background: #0c0f10;
  color: #edf5f2;
  font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .03em;
}

.controls button span {
  margin-right: 7px;
}

.controls button.start {
  border-color: rgba(67, 217, 140, .52);
  color: var(--good-ink);
}

.controls button.danger {
  border-width: 1px;
  border-color: rgba(255, 116, 132, .45);
  color: var(--critical);
}

.controls button:active {
  transform: translateY(1px);
  background: #161b1d;
}

.controls button:disabled {
  opacity: .45;
}

.strategy-card,
.detail-panel,
.kpi,
.position-card,
.empty {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}

.strategy-card {
  padding: 20px;
}

.strategy-card h2 {
  margin: 5px 0 9px;
  font: 700 24px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.04em;
}

.strategy-card > p:last-child {
  color: var(--ink-muted);
  font: 600 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.kpis.compact-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.kpi {
  padding: 14px;
}

.kpi-label,
.kpi-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.kpi-value {
  color: var(--ink);
  font: 700 24px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.section-head {
  justify-content: space-between;
  margin: 0 0 12px;
}

.section-head h2,
.detail-panel h2 {
  margin: 4px 0 0;
  font: 700 29px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.04em;
}

.section-head > span {
  color: var(--ink-muted);
  font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.position-grid {
  grid-template-columns: 1fr;
}

.position-card {
  padding: 17px 18px 14px;
}

.detail-panel {
  padding: 22px;
  min-height: 0;
}

.detail-panel h2 {
  margin-bottom: 24px;
}

.closed-panel {
  margin-top: 14px;
}

.table,
.event-row,
.provider-row,
.latency-row,
.funnel-row,
.hist-row,
.reason-row {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.providers {
  gap: 0;
}

.provider-row {
  min-height: 76px;
  padding: 14px 0;
  border-width: 1px 0 0;
  background: transparent;
}

.events {
  max-height: 620px;
}

.footnote {
  margin: 0;
  padding: 24px 2px 8px;
  display: flex;
  justify-content: space-between;
  color: #83928e;
  font: 700 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
}

.bottom-nav {
  position: fixed;
  z-index: 30;
  bottom: 0;
  left: 50%;
  width: min(100%, 768px);
  height: calc(88px + env(safe-area-inset-bottom));
  padding: 0 16px env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  transform: translateX(-50%);
  border-top: 1px solid var(--border);
  background: rgba(8, 10, 11, .94);
  backdrop-filter: blur(18px);
}

.bottom-nav button {
  border: 0;
  background: transparent;
  color: #a3b1ad;
  font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.bottom-nav button i {
  width: 4px;
  height: 4px;
  display: block;
  margin: 0 auto 9px;
  border-radius: 50%;
  background: transparent;
}

.bottom-nav button.active {
  color: var(--good-ink);
}

.bottom-nav button.active i {
  background: var(--good-ink);
  box-shadow: 0 0 9px rgba(140, 255, 193, .55);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.login-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-panel {
  width: min(100%, 420px);
  padding: 34px;
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(18, 23, 25, .98), rgba(9, 12, 13, .98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .38);
}

.login-panel .mark {
  margin-bottom: 26px;
}

.login-panel h1 {
  margin: 8px 0 0;
  font: 800 36px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.login-copy {
  margin: 13px 0 30px;
  color: var(--ink-muted);
  font: 600 15px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.login-panel form,
.login-panel label {
  display: grid;
  gap: 10px;
}

.login-panel form {
  gap: 18px;
}

.login-panel label {
  color: var(--ink-muted);
  font: 800 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
}

.login-panel input {
  width: 100%;
  height: 58px;
  padding: 0 14px;
  border: 1px solid #536065;
  border-radius: 0;
  outline: none;
  background: #090c0d;
  color: var(--ink);
  font: 700 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.login-panel input:focus {
  border-color: var(--series-3);
}

.login-panel button {
  height: 60px;
  border: 1px solid rgba(67, 217, 140, .55);
  background: rgba(67, 217, 140, .08);
  color: var(--good-ink);
  font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
}

.login-error {
  margin: -4px 0 0;
  color: var(--critical);
  font: 700 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 560px) {
  :root {
    --pad: 15px;
  }

  .shell {
    padding-left: 15px;
    padding-right: 15px;
  }

  .topbar {
    min-height: 88px;
  }

  .mark {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .eyebrow {
    display: none;
  }

  .brand h1 {
    font-size: 22px;
  }

  .stream strong {
    font-size: 10px;
  }

  .logout {
    margin-left: 2px;
    padding: 7px 6px;
    font-size: 9px;
  }

  .mode-strip p {
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .equity-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .equity-head strong {
    font-size: 38px;
  }

  .chart {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }

  .equity-grid,
  .equity-card .kpi-bar,
  .equity-caption {
    margin-left: -16px;
    margin-right: -16px;
  }

  .equity-grid div {
    padding-left: 8px;
    padding-right: 8px;
  }

  .equity-grid b {
    font-size: 13px;
  }

  .controls {
    gap: 7px;
  }

  .controls button {
    font-size: 11px;
  }

  .kpis.compact-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-panel {
    padding: 18px 15px;
  }

  .section-head h2,
  .detail-panel h2 {
    font-size: 24px;
  }

  .bottom-nav button {
    font-size: 10px;
  }
}