/* KERISX trading-performance analytics.
   Visual reference: /data/project/example/trading-performance-analytics (React + Tailwind).
   This file transcribes the reference design tokens into plain CSS — no build step. */

:root {
  --bg: #0b0e14;
  --bg-deep: #0a0d13;
  --surface: #0f1422;
  --surface-2: #0d1320;
  --surface-3: #151d2a;
  --slate-900: #0f172a;
  --slate-850: #1a2334;
  --line: #1e293b;
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #e2e8f0;
  --white: #ffffff;
  --muted: #94a3b8;
  --muted-dim: #7688a0;   /* 5.1:1 on surface, 5.3:1 on bg: AA for 11px+ */
  --muted-deep: #71829a;  /* weekend labels, same AA floor */
  --emerald: #10b981;
  --emerald-light: #34d399;
  --cyan-light: #7dd3fc;  /* single cool hue, kept for the equity series */
  --rose: #f43f5e;
  --rose-light: #fb7185;
  --amber: #fbbf24;
  --gold: #e8b93a;
  --gold-light: #f4d179;
  --focus: #f6d365;
  --radius: 12px;
  --radius-lg: 16px;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(16, 185, 129, 0.3); color: #a7f3d0; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1e2638; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #2e3a54; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--emerald-light); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.font-mono-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.shell { width: min(1280px, calc(100% - 32px)); margin-inline: auto; }
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 99; padding: 10px 14px; background: var(--emerald); color: #06100e; font-weight: 700; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.positive { color: var(--emerald-light) !important; }
.negative { color: var(--rose-light) !important; }
.cyan { color: var(--cyan-light) !important; }
.amber { color: var(--gold-light) !important; }
.neutral { color: var(--white); }
.muted { color: var(--muted); }

/* ── Header ─────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 40; background: #0d121d; border-bottom: 1px solid var(--line-soft); transition: transform 0.2s ease; }
.site-header.hidden { transform: translateY(-100%); }
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 12px; color: var(--muted); border-bottom: 1px solid rgba(30, 41, 59, 0.4); }
.topbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.topbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.live-feed { display: inline-flex; align-items: center; gap: 6px; color: var(--emerald-light); font-weight: 500; }
.pulse-dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.pulse-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--emerald-light); opacity: .75; animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
.pulse-dot::after { content: ''; position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.topbar-sep { color: var(--muted-deep); opacity: .7; }
.badge-verified { display: inline-flex; align-items: center; gap: 6px; color: var(--emerald-light); font-weight: 500; }
.badge-verified svg { flex: none; }

.header-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; }
.header-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; min-width: 0; }
/* Account picker + tools. One row on mobile so the combo box and the three
   icon buttons fit 375px; desktop keeps them apart via the gap. */
.header-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; min-width: 0; flex: 1 1 auto; }
/* Controls hug the right edge; the picker stays right after the brand. */
.header-controls { margin-left: auto; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.1); }
.brand-mark img { display: block; height: 24px; width: auto; }
.brand strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--white); }
.brand .brand-word { letter-spacing: .06em; }
/* Not scoped to .brand: the footer wordmark uses the same markup. */
.brand-x { color: var(--gold); text-shadow: 0 0 12px rgba(232, 185, 58, 0.35); }
.brand small { display: block; color: var(--muted); font-size: 11px; }
.brand .brand-tagline { color: var(--white); letter-spacing: .04em; }
.brand-row { display: flex; align-items: center; gap: 8px; }
.brand-tag { font-size: 10px; font-weight: 600; color: var(--emerald-light); background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.28); padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }
.header-divider { width: 1px; height: 32px; background: var(--line); }
.account-picker { display: block; width: min(320px, 100%); padding: 9px 12px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(51, 65, 85, 0.7); border-radius: 12px; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.account-picker:hover { border-color: #64748b; background: #16203a; }
.account-picker:focus-visible { border-color: var(--emerald); }
.account-picker .picker-name { display: flex; align-items: center; gap: 8px; }
.account-picker .picker-name b { font-size: 12px; font-weight: 600; color: var(--white); letter-spacing: .02em; }
.account-picker .picker-type { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #1e293b; color: #cbd5e1; font-weight: 500; }
.account-picker .picker-meta { display: flex; gap: 8px; color: var(--muted); font-size: 11px; margin-top: 2px; }
.account-note { font-size: 11px; color: var(--muted); padding: 0 0 0 12px; border-left: 2px solid var(--emerald); }

/* ── Account dropdown: custom menu matching the reference design ── */
.account-menu { position: relative; }
/* The caret used to sit below the two text lines (it was the third flex child
   of a block button), adding a row to the box. The picker is a click target
   with a hover border, so the arrow is gone; the menu still opens on click. */
#share-button .btn-icon-copied { display: none; }
#share-button.is-copied .btn-icon-share { display: none; }
#share-button.is-copied .btn-icon-copied { display: block; }
.account-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  width: min(360px, 92vw); padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
}
.account-dropdown .dropdown-title {
  padding: 8px 10px 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; color: var(--muted);
}
.account-dropdown .dropdown-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 9px 10px; border: 0; border-radius: 10px;
  background: transparent; text-align: left; cursor: pointer; transition: background .12s;
}
.account-dropdown .dropdown-item:hover { background: rgba(51, 65, 85, 0.35); }
.account-dropdown .dropdown-item.active { background: rgba(16, 185, 129, 0.12); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.3); }
.account-dropdown .di-name { display: block; font-size: 12px; font-weight: 600; color: var(--white); }
.account-dropdown .di-meta { display: block; font-size: 10px; color: var(--muted); margin-top: 1px; }
.account-dropdown .di-metrics { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 11px; font-weight: 600; }
.account-dropdown .di-dd { font-size: 10px; color: var(--muted); font-weight: 500; }

/* ── History toolbar: search + filters + paging ── */
.history-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.search-input {
  display: flex; align-items: center; gap: 7px; padding: 7px 11px;
  background: var(--slate-900); border: 1px solid var(--line); border-radius: 10px; color: var(--muted);
}
.search-input input {
  width: 210px; border: 0; background: transparent; color: var(--text);
  font-size: 12px; font-family: inherit; outline: none;
}
.search-input input::placeholder { color: var(--muted); }

.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.filter-bar .spacer { flex: 1 1 auto; }
.select-wrap { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.select-wrap select {
  padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--slate-900); color: var(--text); font-size: 12px; font-family: inherit; cursor: pointer;
}
.select-wrap select:focus-visible { outline: 2px solid var(--emerald); outline-offset: 1px; }

.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 14px;
}
.page-info { font-size: 11px; color: var(--muted); }
.page-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.page-btn {
  min-width: 32px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--slate-900); color: #cbd5e1; font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .12s;
}
.page-btn:hover:not(:disabled) { background: #1a2334; color: var(--white); }
.page-btn.active { background: var(--emerald); border-color: var(--emerald); color: #020617; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-btn:focus-visible { outline: 2px solid var(--emerald); outline-offset: 1px; }

.state { padding: 22px 14px; text-align: center; font-size: 12px; color: var(--muted); font-style: italic; }
.state-error { color: var(--rose-light); }

/* ── Drawdown ledger: severity chips ── */
.sev-light { background: rgba(16, 185, 129, 0.14); color: var(--emerald-light); }
.sev-medium { background: rgba(251, 191, 36, 0.14); color: var(--gold); }
.sev-heavy { background: rgba(244, 63, 94, 0.16); color: var(--rose-light); }
.sev-critical { background: rgba(244, 63, 94, 0.28); color: #fecdd3; box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.5); }

.header-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.segmented { display: flex; align-items: center; padding: 2px; background: var(--slate-900); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.segmented a, .segmented button { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 5px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 500; cursor: pointer; transition: all .15s; }
.segmented a.active, .segmented button.active { background: var(--emerald); color: #020617; font-weight: 700; }
.segmented a:hover, .segmented button:hover { color: var(--white); }
.segmented.compact a, .segmented.compact button { min-width: 40px; padding: 5px 8px; }

.button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; background: transparent; }
.button-primary { background: var(--emerald); color: #020617; }
.button-primary:hover { background: var(--emerald-light); color: #020617; }
.button-ghost { background: var(--slate-900); border-color: var(--line); color: #cbd5e1; }
.button-ghost:hover { background: #1a2334; color: var(--white); }
.button-live { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: var(--emerald-light); }
.button-live.idle { background: var(--slate-900); border-color: var(--line); color: var(--muted); }
.button svg { flex: none; }

/* ── Layout ─────────────────────────────────────────────── */
.dashboard { padding: 24px 0 56px; }
.stack { display: flex; flex-direction: column; gap: 24px; }

.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.06); border-radius: var(--radius); font-size: 12px; color: var(--muted); }
.notice strong { color: var(--emerald-light); }
.notice.error { border-color: rgba(244, 63, 94, 0.3); background: rgba(244, 63, 94, 0.07); }
.notice.error strong { color: var(--rose-light); }

.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(30, 41, 59, 0.8); }
.panel-heading h2, .panel-heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: var(--white); letter-spacing: -0.01em; }
.panel-heading h2 svg, .panel-heading h3 svg { color: var(--emerald-light); flex: none; }
.panel-heading p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.eyebrow { margin: 0 0 4px; color: var(--emerald-light); font-size: 11px; font-weight: 700; }
.data-label { display: inline-block; font-size: 11px; font-weight: 700; color: var(--emerald-light); }
.pill { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 6px; background: rgba(16, 185, 129, 0.1); color: var(--emerald-light); border: 1px solid rgba(16, 185, 129, 0.2); }

/* ── Metric cards ───────────────────────────────────────── */
.metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.metric-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; transition: border-color .15s; }
.metric-card:hover { border-color: #334155; }
.metric-card.accent { border-color: rgba(16, 185, 129, 0.3); }
.metric-card .m-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.metric-card .m-label svg { flex: none; }
.metric-card .m-value { font-family: var(--font-mono); font-size: clamp(18px, 2.1vw, 24px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.metric-card .m-foot { margin-top: 5px; font-size: 11px; color: var(--muted); }
.metric-card .m-foot b { font-family: var(--font-mono); color: #cbd5e1; }

.balance-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #0d1320; }
.balance-strip > div { min-width: 0; }
.balance-strip .b-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.balance-strip .b-value { font-family: var(--font-mono); font-size: clamp(15px, 1.6vw, 19px); font-weight: 700; color: var(--white); letter-spacing: -0.03em; }
.balance-strip .b-foot { margin-top: 3px; font-size: 10px; color: var(--muted); }
.balance-strip .b-foot b { font-family: var(--font-mono); }
.dot-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-live.up { background: var(--emerald-light); box-shadow: 0 0 8px rgba(52, 211, 153, 0.8); }  /* the one glow: live status */
.dot-live.down { background: var(--rose-light); }

/* ── Chart ──────────────────────────────────────────────── */
.chart-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(30, 41, 59, 0.8); }
.chart-tabs { display: flex; align-items: center; gap: 4px; padding: 4px; background: rgba(15, 23, 42, 0.9); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.chart-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .15s; }
.chart-tabs button.active { background: var(--emerald); color: #020617; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.chart-tabs button.active.danger { background: var(--rose); color: var(--white); }
.chart-tabs button:hover:not(.active) { color: var(--white); }
.chart-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.benchmark-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted-dim); font-size: 12px; font-weight: 500; cursor: pointer; }
.benchmark-toggle.on { border-color: rgba(125, 211, 252, 0.5); background: rgba(125, 211, 252, 0.1); color: var(--cyan-light); }
.benchmark-toggle span.swatch { display: inline-block; width: 8px; height: 2px; border-radius: 9999px; background: var(--cyan-light); }
.chart-scrub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; margin-bottom: 12px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(30, 41, 59, 0.8); border-radius: 10px; font-size: 12px; }
.chart-scrub .k { color: var(--muted-dim); margin-right: 6px; }
.chart-scrub .v { font-family: var(--font-mono); font-weight: 700; }
.chart-wrap { width: 100%; overflow: hidden; }
.chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; cursor: crosshair; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 12px; border-top: 1px solid rgba(30, 41, 59, 0.8); font-size: 12px; color: var(--muted); }
.chart-legend .legend-items { display: flex; flex-wrap: wrap; gap: 16px; }
.legend-swatch { display: inline-block; width: 12px; height: 3px; border-radius: 9999px; margin-right: 6px; vertical-align: middle; }
.swatch-emerald { background: var(--emerald-light); }
.swatch-slate { background: #e2e8f0; }
.swatch-cyan { background: var(--cyan-light); }
.swatch-rose { background: var(--rose); }
.swatch-dashed-indigo { height: 0; border-bottom: 1px dashed var(--cyan-light); border-radius: 0; }
/* Legend for the amber dots on the balance line: days cash moved in or out. */
.legend-wd { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-dim); font-size: 12px; font-weight: 500; }
.legend-wd .swatch-wd { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: var(--gold); }

/* ── Tables ─────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 12px; }
table.data thead th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data tbody td { padding: 12px; border-bottom: 1px solid rgba(30, 41, 59, 0.6); white-space: nowrap; }
table.data tbody tr:hover { background: rgba(15, 23, 42, 0.5); }
table.data .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.data .right { text-align: right; }
table.data .center { text-align: center; }
td.muted, .cell-muted { color: var(--muted); }
.cell-sub { display: block; font-size: 10px; color: var(--muted-dim); font-family: var(--font-mono); margin-top: 2px; }
.table-footnote { margin: 12px 0 0; font-size: 11px; color: var(--muted-dim); }

.tag { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.tag.buy { color: var(--emerald-light); background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); }
.tag.sell { color: var(--rose-light); background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.3); }
.tag.flat { color: var(--muted); background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.25); }

.search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.search-field { position: relative; }
.search-field svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted-dim); }
.search-field input { width: 180px; padding: 7px 12px 7px 32px; background: var(--slate-900); border: 1px solid var(--line); border-radius: 9px; font-size: 12px; transition: border-color .15s; }
.search-field input:focus { outline: none; border-color: var(--emerald); }
.search-field input::placeholder { color: var(--muted-dim); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Calendar ───────────────────────────────────────────── */
.summary-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 14px; margin-bottom: 18px; background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(30, 41, 59, 0.8); border-radius: 10px; font-size: 12px; }
.summary-strip .s-label { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.summary-strip .s-value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; }
.summary-strip .s-foot { font-size: 10px; color: var(--muted); margin-top: 2px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.calendar-weekday { text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 0; }
.calendar-weekday.weekend { color: var(--muted-deep); }
.calendar-cell { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 104px; padding: 8px; border: 1px solid rgba(30, 41, 59, 0.8); border-radius: 10px; background: #0c101a; transition: all .15s; }
.calendar-cell .c-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.calendar-cell .c-day { font-family: var(--font-mono); font-weight: 600; color: var(--muted); }
.calendar-cell .c-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted-dim); }
.calendar-cell .c-profit { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.calendar-cell .c-percent { font-family: var(--font-mono); font-size: 10px; }
.calendar-cell .c-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px solid rgba(30, 41, 59, 0.6); font-family: var(--font-mono); font-size: 10px; color: var(--muted-dim); }
.calendar-cell .c-empty { margin: auto; font-size: 11px; font-style: italic; color: var(--muted-deep); text-align: center; }
.calendar-cell.profit { border-color: rgba(16, 185, 129, 0.3); background: #0b151c; }
.calendar-cell.loss { border-color: rgba(244, 63, 94, 0.4); background: #160e14; }
.calendar-cell.today { border-color: rgba(16, 185, 129, 0.7); background: rgba(2, 44, 34, 0.2); }
.calendar-cell.weekend { background: rgba(15, 23, 42, 0.3); border-color: rgba(30, 41, 59, 0.4); }
.calendar-cell.future { background: rgba(15, 23, 42, 0.2); border-color: rgba(30, 41, 59, 0.3); }
.calendar-cell.blank { background: transparent; border-color: transparent; }
.calendar-cell.clickable { cursor: pointer; }
.calendar-cell.clickable:hover { transform: translateY(-2px); border-color: var(--emerald-light); }
.badge-today { font-size: 10px; font-weight: 700; background: var(--emerald); color: #020617; padding: 1px 6px; border-radius: 4px; }

.legend-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 14px; border-top: 1px solid rgba(30, 41, 59, 0.8); font-size: 11px; color: var(--muted); }
.legend-row .legend-items { display: flex; flex-wrap: wrap; gap: 16px; }
.legend-box { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.legend-box.profit { background: rgba(16, 185, 129, 0.2); border: 1px solid rgba(16, 185, 129, 0.5); }
.legend-box.loss { background: rgba(244, 63, 94, 0.2); border: 1px solid rgba(244, 63, 94, 0.5); }

/* ── Monthly returns matrix ─────────────────────────────── */
table.matrix { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 12px; text-align: center; }
table.matrix thead th { padding: 10px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); }
table.matrix thead th:first-child { text-align: left; }
table.matrix thead th:last-child { text-align: right; color: var(--emerald-light); }
table.matrix tbody td { padding: 8px 4px; border-bottom: 1px solid rgba(30, 41, 59, 0.6); }
table.matrix tbody td:first-child { text-align: left; font-size: 13px; font-weight: 700; color: var(--white); padding-left: 12px; }
table.matrix tbody td:last-child { text-align: right; font-family: var(--font-mono); font-size: 13px; font-weight: 800; padding-right: 12px; }
table.matrix .cell { display: inline-block; min-width: 52px; padding: 3px 6px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; transition: transform .15s; }
table.matrix .cell:hover { transform: scale(1.05); }
table.matrix .cell.up { background: rgba(16, 185, 129, 0.1); color: var(--emerald-light); }
table.matrix .cell.up.mid { background: rgba(16, 185, 129, 0.15); color: var(--emerald-light); font-weight: 600; }
table.matrix .cell.up.high { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; font-weight: 700; }
table.matrix .cell.down { background: rgba(244, 63, 94, 0.15); color: var(--rose-light); }
table.matrix .cell.empty { color: var(--muted-deep); }

/* ── Tabs ───────────────────────────────────────────────── */
.section-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(30, 41, 59, 0.8); }
.section-tabs .tabset { display: flex; gap: 3px; padding: 4px; background: rgba(15, 23, 42, 0.9); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; font-size: 12px; }
.section-tabs .tabset a,
.section-tabs .tabset button { padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .15s; }
.section-tabs .tabset a.active,
.section-tabs .tabset button.active { background: var(--emerald); color: #020617; }
.section-tabs .tabset a:hover:not(.active),
.section-tabs .tabset button:hover:not(.active) { color: var(--white); background: rgba(255, 255, 255, 0.05); }
.latency { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.latency::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-light); }

/* ── Advanced stats ─────────────────────────────────────── */
.stats-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stat-box { min-width: 0; padding: 16px; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(30, 41, 59, 0.8); border-radius: var(--radius); }
.stat-box > h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; color: #cbd5e1; }
.row-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(30, 41, 59, 0.4); font-size: 12px; }
.row-list > div:last-child { border-bottom: 0; }
.row-list span { color: var(--muted); }
.row-list .val { font-family: var(--font-mono); font-weight: 700; text-align: right; }
.row-list .val small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); }

/* ── Symbol distribution ────────────────────────────────── */
.distribution-bar { display: flex; height: 12px; overflow: hidden; border-radius: 9999px; background: #0a1017; margin-bottom: 18px; }
.distribution-bar span:first-child { border-radius: 9999px 0 0 9999px; }
.distribution-bar span:last-child { border-radius: 0 9999px 9999px 0; }
.symbol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.symbol-card { padding: 12px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(30, 41, 59, 0.8); border-radius: var(--radius); font-size: 12px; transition: border-color .15s; }
.symbol-card:hover { border-color: #475569; }
.symbol-card .sc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.symbol-card .sc-top b { font-size: 14px; color: var(--white); }
.symbol-card .sc-share { font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.symbol-card .sc-row { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.symbol-card .sc-row b { color: #e2e8f0; }

/* ── Investor callout / footer ──────────────────────────── */
.callout { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #0f1626; font-size: 12px; color: var(--muted); }
.callout-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.callout-head .ct { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #e2e8f0; }
.callout p { margin: 12px 0 0; line-height: 1.7; }
/* The bold lead-in names the paragraph; the rest of the warning is body copy. */
.callout p strong { color: var(--white); font-weight: 700; }
/* The brand name inside running text keeps the wordmark rule: KERIS white,
   X gold. Same size as the sentence, so it reads as a name, not a logo. */
.callout p .brand-inline { font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.callout .meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--muted-dim); }

.site-footer { border-top: 1px solid rgba(30, 41, 59, 0.8); background: var(--bg-deep); padding: 24px 0; margin-top: 32px; }
.site-footer .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--muted); }
.site-footer strong { color: var(--white); font-weight: 800; letter-spacing: .06em; }
.site-footer .foot-meta { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 11px; }

/* ── Modals ─────────────────────────────────────────────── */
dialog.modal { width: min(720px, calc(100% - 32px)); max-height: 90vh; padding: 0; border: 1px solid rgba(51, 65, 85, 0.8); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, .6); }
dialog.modal.wide { width: min(840px, calc(100% - 32px)); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .8); }
.modal-inner { display: flex; flex-direction: column; max-height: 90vh; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: rgba(15, 23, 42, 0.6); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--white); }
.modal-head p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.modal-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.1); color: var(--emerald-light); }
.modal-icon.cyan { border-color: rgba(6, 182, 212, 0.3); background: rgba(6, 182, 212, 0.1); color: var(--cyan-light); }
.modal-title-row { display: flex; align-items: center; gap: 12px; }
.modal-close { padding: 6px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.modal-close:hover { background: #1e293b; color: var(--white); }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--line); background: rgba(15, 23, 42, 0.8); font-size: 12px; }
.modal-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 12px; }
.modal-stat { padding: 12px; background: rgba(15, 23, 42, 0.8); border: 1px solid var(--line); border-radius: 10px; }
.modal-stat .ms-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.modal-stat .ms-value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; }
.modal-stat .ms-foot { font-size: 10px; color: var(--muted); margin-top: 3px; }

.range-field { padding: 12px; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--line); border-radius: 12px; }
.range-field .rf-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 8px; }
.range-field .rf-top span { color: var(--muted); }
.range-field .rf-top b { font-family: var(--font-mono); }
.range-field input[type='range'] { width: 100%; height: 6px; accent-color: var(--emerald); background: #1e293b; border-radius: 9999px; cursor: pointer; }
.range-field .rf-scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--muted-dim); }
.projection { padding: 16px; border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 12px; background: rgba(2, 44, 34, 0.25); }
.projection .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.projection .p-label { font-size: 11px; color: var(--muted); }
.projection .p-value { font-family: var(--font-mono); font-size: 20px; font-weight: 800; }

.scroll-box { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.cert-frame { padding: 20px; border: 1px solid rgba(51, 65, 85, 0.8); border-radius: 12px; background: rgba(15, 23, 42, 0.8); }
.cert-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.cert-head .ch-label { font-size: 11px; font-weight: 700; color: var(--emerald-light); }
.cert-head h2 { margin: 3px 0 0; font-size: 18px; font-weight: 800; color: var(--white); }
.cert-head .ch-sub { margin-top: 4px; font-size: 12px; color: var(--muted); }
.cert-head .ch-sub b { color: #e2e8f0; }
.cert-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; font-size: 12px; }
.cert-stat { padding: 12px; background: rgba(2, 6, 23, 0.7); border: 1px solid rgba(30, 41, 59, 0.8); border-radius: 10px; }
.cert-stat span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.cert-stat b { font-family: var(--font-mono); font-size: 17px; font-weight: 800; }
.cert-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; background: rgba(2, 6, 23, 0.4); border: 1px solid rgba(30, 41, 59, 0.6); border-radius: 10px; font-family: var(--font-mono); font-size: 12px; }
.cert-ledger .row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--muted); }
.cert-ledger .row b { color: var(--white); font-weight: 600; }
.hash-strip { margin-top: 14px; padding: 12px; background: rgba(2, 6, 23, 0.8); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.hash-strip .hs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); }
.hash-strip code { display: block; margin-top: 6px; padding: 8px; background: #0f172a; border-radius: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); word-break: break-all; }

.state { padding: 16px; border-radius: 10px; font-size: 12px; border: 1px solid var(--line); background: #0d131c; color: var(--muted); }
.state-empty { text-align: center; }
.state-error { border-color: rgba(244, 63, 94, 0.4); background: rgba(33, 19, 26, 0.9); color: #fda4af; }
.state-loading { border-color: rgba(251, 191, 36, 0.4); background: rgba(33, 28, 17, 0.9); color: #fcd34d; }

.order-card { padding: 14px; background: rgba(15, 23, 42, 0.8); border: 1px solid var(--line); border-radius: 12px; font-size: 12px; }
.order-card:hover { border-color: #475569; }
.order-card .oc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.order-card .oc-id { display: flex; align-items: center; gap: 8px; }
.order-card .oc-id b { font-size: 14px; color: var(--white); }
.order-card .oc-id .ticket { font-family: var(--font-mono); font-size: 11px; color: var(--muted-dim); }
.order-card .oc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid rgba(30, 41, 59, 0.8); font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.order-card .oc-comment { margin-top: 10px; padding: 6px 10px; background: rgba(2, 6, 23, 0.4); border: 1px solid rgba(30, 41, 59, 0.4); border-radius: 8px; font-size: 10px; color: var(--muted); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .balance-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-columns { grid-template-columns: 1fr 1fr; }
  .symbol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cert-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .shell { width: calc(100% - 24px); }
  /* flex-wrap must go: with wrap, the line's cross size is the widest item's
     min-content, so both rows stretched to the picker's 359px and the header
     overflowed a 320px viewport. */
  .header-main { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .header-divider { display: none; }
  /* Picker and tools share one row: the buttons drop to icons so all four
     controls fit without wrapping. Labels stay in the DOM for screen readers
     and are restored as tooltips by title. */
  .header-tools { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .header-controls { flex-wrap: nowrap; align-items: center; gap: 8px; }
  /* flex-basis 0 so the picker shrinks to whatever the buttons leave; with
     `auto` its min-content (the account name) forced the row past the shell. */
  .account-menu { flex: 1 1 0; min-width: 0; overflow: hidden; }
  .account-picker { width: 100%; min-width: 0; overflow: hidden; }
  .account-picker > span,
  .account-picker .picker-name,
  .account-picker .picker-meta { flex-wrap: nowrap; min-width: 0; overflow: hidden; white-space: nowrap; }
  /* The type chip repeats the "LIVE" state the ticker bar already announces,
     and it eats 108px of the name row. Drop it here rather than truncate both;
     the dropdown still lists each account's type. */
  .account-picker .picker-type { display: none; }
  /* Broker name gives way first; leverage is the number that matters, so it
     never truncates. */
  .account-picker .picker-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .account-picker .picker-meta > span:last-child { flex: none; }
  .header-controls .button { position: relative; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .header-controls .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .balance-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .stats-columns, .symbol-grid { grid-template-columns: 1fr; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-cell { min-height: 82px; padding: 6px; }
  .calendar-cell .c-count, .calendar-cell .c-percent { display: none; }
  .modal-stat-grid, .cert-ledger, .order-card .oc-grid { grid-template-columns: 1fr 1fr; }
  .projection .grid3 { grid-template-columns: 1fr; }
  .panel { padding: 14px; }
  .search-field input { width: 100%; }
}

@media (max-width: 440px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .balance-strip, .summary-strip { grid-template-columns: 1fr; }
  .calendar-cell { min-height: 68px; }
  .calendar-cell .c-profit { font-size: 11px; }
  /* The month switch must fit beside the panel padding: a fixed 130px label
     plus two 30px arrows plus "Bulan Ini" is wider than a 320px screen. */
  .panel .month-switch { flex-wrap: wrap; }
  .panel .month-label { min-width: 0; flex: 1 1 auto; }
}

@media print {
  .site-header, .site-footer, .section-tabs, .chart-controls, .search-bar { display: none !important; }
  body { background: #fff; color: #000; }

  /* Print the open dialog and nothing else. The dialog lives inside <main>,
     so hide main's other children, not main itself. */
  body:has(dialog[open]) #main-content > *:not(dialog[open]) { display: none !important; }
  body:has(dialog[open]) .skip-link { display: none !important; }
  dialog[open] {
    position: static; inset: auto; margin: 0; width: 100%; max-width: none;
    max-height: none; overflow: visible; border: 0; box-shadow: none;
    background: #fff; color: #000;
  }
  dialog[open]::backdrop { display: none; }
  dialog[open] .modal-inner { max-height: none; }
  dialog[open] .modal-body { overflow: visible; padding: 0; }
  dialog[open] .modal-head, dialog[open] .modal-foot { background: #fff; }
  dialog[open] .modal-close, dialog[open] .modal-foot,
  dialog[open] .hash-strip .button { display: none !important; }

  /* The certificate frame is a dark card on screen; invert it for paper. */
  dialog[open] .cert-frame { background: #fff; border-color: #ccc; color: #000; }
  dialog[open] .cert-frame h2,
  dialog[open] .cert-frame b,
  dialog[open] .cert-stat b { color: #000 !important; }
  dialog[open] .cert-frame .row span,
  dialog[open] .ch-sub,
  dialog[open] .table-footnote,
  dialog[open] .muted { color: #333 !important; }
  dialog[open] .hash-strip, dialog[open] .cert-stat { background: #f5f5f5 !important; border-color: #ccc !important; }
  dialog[open] code { color: #000 !important; }
}

/* Provenance line: makes the gap between the broker ledger and the closed-deal
   reconstruction visible instead of letting the two blur together. */
.panel .dd-provenance {
    margin-top: 8px;
    max-width: 78ch;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted, #8b93a7);
}
.panel .dd-provenance strong { color: var(--text, #e6e9f0); font-weight: 600; }
.panel .dd-provenance .negative { color: var(--rose, #fb7185); }
.panel .dd-provenance .positive { color: var(--emerald, #34d399); }

/* Drawdown bars sit under the ledger table; the panel previously showed only a
   table, so a drawdown page had no shape to read at a glance. */
.panel .dd-chart { margin: 4px 0 18px; }
.panel .dd-chart svg { width: 100%; height: 220px; display: block; }
.panel .dd-chart-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
}

/* Month switcher for the profit calendar: chevrons either side of the label,
   plus a jump back to the running month. */
.panel .month-switch {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--surface, #0f1422);
    border: 1px solid var(--border, #1e293b);
    border-radius: 10px;
    padding: 3px;
}
.panel .month-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text, #e6e9f0);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.panel .month-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); }
.panel .month-nav:disabled { color: #475569; cursor: not-allowed; }
.panel .month-label {
    min-width: 130px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #e6e9f0);
}
.panel .month-today {
    border: 1px solid var(--border, #1e293b);
    border-radius: 7px;
    background: transparent;
    color: var(--muted, #8b93a7);
    font-size: 11px;
    padding: 5px 10px;
    margin-left: 4px;
    cursor: pointer;
}
.panel .month-today:hover:not(:disabled) { color: var(--text, #e6e9f0); background: rgba(255, 255, 255, 0.06); }
.panel .month-today:disabled { opacity: 0.4; cursor: not-allowed; }

/* Baseline for every button in the app shell.
   A <button> with no matching rule falls back to the user-agent default
   (background #efefef, light inherited text), which rendered the section tabs
   white-on-white. This keeps an unmapped button dark and readable instead. */
body button,
.modal-backdrop button {
    border: 1px solid var(--line, #1e293b);
    border-radius: 8px;
    background: #131a2a;
    color: var(--text, #e6e9f0);
    font-family: inherit;
}
.site-shell button:disabled,
body button:disabled { opacity: .45; cursor: not-allowed; }

/* The tab strip already supplies its own background; do not double it up. */
.section-tabs .tabset button { border: 0; background: transparent; }

/* The comment names the EA strategy that opened the trade. It sits under the
   P/L as a small caption, the way the reference table shows it. */
.data .row-comment {
    font-family: var(--font, inherit);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--muted-dim, #64748b);
    margin-top: 2px;
    max-width: 150px;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 900px) {
    .data .row-comment { max-width: 200px; }
}

/* ── Running-price ticker ──────────────────────────────────────────────────
   Replaces the two verification badges. The track holds the quote list twice
   and slides -50%, so the loop has no visible seam as it scrolls right to
   left. Same technique as the zs-x-clone reference. */
.price-ticker {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    /* Fade the edges so quotes enter and leave instead of being cut off. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
    display: flex;
    width: max-content;
    gap: 22px;
    animation: ticker 32s linear infinite;
    will-change: transform;
}
.price-ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Respect a reduced-motion preference: show the strip, stop the slide. */
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
}

/* Running prices. Amber so the strip reads as the one live thing in the
   header; the same amber the withdrawal figure uses. A move up or down still
   tints the number green/red, so direction stays readable at a glance. */
.tick {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    white-space: nowrap;
    color: var(--muted);
}
.tick b { color: var(--gold); font-weight: 700; letter-spacing: .04em; opacity: .9; }
.tick-price { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.tick-spread { color: var(--gold-light); font-size: 10px; }
.tick.up .tick-price { color: var(--emerald-light, #34d399); }
.tick.down .tick-price { color: var(--rose-light, #fb7185); }
/* A closed market keeps the amber and just dims; swapping it for grey made the
   whole strip look disabled rather than quiet. */
.tick.stale { opacity: .6; }
.tick.stale .tick-price { color: var(--gold); }

/* ── Placement ────────────────────────────────────────────────────────────
   Desktop: the ticker shares the top status row, so it sits at the right of
   the bar that runs level with the KERISX header.
   Mobile: there is no room beside the status text, so the ticker moves above
   the header and spans the full width. */
@media (max-width: 860px) {
    .topbar { flex-direction: column; align-items: stretch; gap: 6px; }
    .topbar-right { order: -1; width: 100%; }
    .price-ticker { padding-bottom: 6px; border-bottom: 1px solid rgba(30, 41, 59, .6); }
}

/* ── Layout fixes for the ticker ──────────────────────────────────────────
   The topbar wrapped because .topbar-right had no width budget, and an
   unbounded ticker grew to the width of its whole track (2350px) instead of the
   available space. Neither side may shrink below its content, so give the strip
   a real flex basis and let the status text keep its natural width. */
.topbar { flex-wrap: nowrap; }
.topbar-left { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.topbar-right { flex: 1 1 260px; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
.price-ticker { flex: 1 1 auto; min-width: 0; max-width: 100%; }

/* Below this width the status line and a readable strip cannot share one row. */
@media (max-width: 1100px) {
    .topbar { flex-wrap: wrap; }
    .topbar-right { flex: 1 1 100%; }
}

/* ── Touch targets ──────────────────────────────────────── */
/* Desktop keeps its dense rows with a pointing device. Every control below
   44x44 on touch gets a real hit area, not a bigger visual. */
/* Either a coarse pointer or a narrow viewport means a thumb, not a cursor.
   Emulated mobile Chrome reports pointer: fine, so the width rule is what
   actually fires in testing. */
@media (pointer: coarse), (max-width: 900px) {
  .segmented button, .segmented a,
  .chart-tabs button,
  .button, .page-btn, .month-nav, .month-today,
  .benchmark-toggle, .section-tabs .tabset button, .modal-close { min-height: 44px; }
  .segmented.compact button { min-width: 44px; }
  .month-nav, .page-btn { min-width: 44px; }
  .select-wrap select { min-height: 44px; }
  .search-field input, .search-input input { min-height: 44px; }
  .skip-link, a.brand { min-height: 44px; display: inline-flex; align-items: center; }
  .topbar-sep { display: none; }
}

/* Calendar: the hour a day's deepest dip was hit. Small and muted - it is
   context for the percentage beside it, not a figure in its own right. */
.c-dd-at {
    color: var(--muted);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-left: 2px;
    white-space: nowrap;
}