/* ───────── Tokens — deep-space command centre ───────── */
:root {
  --paper: #060913;            /* page */
  --surface: rgba(13, 19, 38, .78);   /* panels */
  --surface-solid: #0c1224;
  --surface-2: rgba(36, 48, 92, .38);
  --ink: #e6ecff;
  --ink-2: #aab4d6;
  --muted: #6c789f;
  --rule: rgba(122, 140, 255, .14);
  --rule-strong: rgba(122, 140, 255, .28);
  --accent: #39f0c3;            /* signal teal */
  --accent-ink: #03140f;
  --accent-soft: rgba(57, 240, 195, .12);
  --violet: #8f7cff;
  --gold: #f4c95d;
  --win: #39f0c3; --win-soft: rgba(57, 240, 195, .12);
  --loss: #ff5d7d; --loss-soft: rgba(255, 93, 125, .13);
  --be: #f4c95d; --be-soft: rgba(244, 201, 93, .13);
  --miss: #8b95b8; --miss-soft: rgba(139, 149, 184, .14);
  --s1: #8f7cff; --s2: #f4c95d; --s3: #4fb7ff; --s4: #ff8fd0; --s5: #9ff06b; --s6: #ff9f5a;
  --glow: 0 0 0 1px rgba(122, 140, 255, .06), 0 20px 50px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .03);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(122, 140, 255, .12);
  --serif: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --sans: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --radius: 10px;
  color-scheme: dark;
}

/* ───────── Base ───────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; color: var(--ink); min-height: 100vh;
  font: 400 14px/1.55 var(--sans); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(143, 124, 255, .16), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(57, 240, 195, .07), transparent 60%),
    radial-gradient(1000px 800px at 50% 120%, rgba(79, 183, 255, .08), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}
/* starfield */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #cfd6ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 38% 66%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 52%, #bfefff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 84%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 34%, #e3dcff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 88%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 50%, #cfd6ff 50%, transparent 51%);
  background-size: 640px 640px, 520px 520px, 760px 760px, 480px 480px, 580px 580px, 700px 700px, 820px 820px, 440px 440px;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.serif { font-family: var(--serif); }
.eyebrow {
  font: 500 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.num, .hero-figure, .kpi-value, .row-r, .day-r, .detail-r .big, .tp .v, table.months td, .bar-row .val { font-variant-numeric: tabular-nums; }


/* ───────── Header ───────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.top-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 68px;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: inherit; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--accent);
  display: grid; place-items: center; color: var(--accent);
  font: 500 16px/1 var(--serif); align-self: center;
}
.brand-name { font: 500 22px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.brand-sub { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav button {
  background: none; border: 0; padding: 8px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.nav button:hover { color: var(--ink); }
.nav button[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.store-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--rule); background: var(--surface); font-size: 12px; color: var(--ink-2);
}
.store-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--be); }
.store-chip.ok .dot { background: var(--win); }
.store-chip.warn .dot { background: var(--accent); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  height: 38px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--rule-strong);
  background: var(--surface); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: none; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--loss); }
.btn.icon { width: 38px; padding: 0; }
.btn svg { width: 16px; height: 16px; }

.menu { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: 46px; min-width: 240px; padding: 8px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow);
  display: none;
}
.menu.open .menu-pop { display: block; }
.menu-pop button {
  display: flex; width: 100%; text-align: left; gap: 10px; align-items: center;
  border: 0; background: none; padding: 10px 12px; border-radius: 6px; font-size: 14px;
}
.menu-pop button:hover { background: var(--surface-2); }
.menu-pop [hidden] { display: none; }
.menu-pop hr { border: 0; border-top: 1px solid var(--rule); margin: 6px 4px; }
.menu-pop .hint { font-size: 12px; color: var(--muted); padding: 4px 12px 8px; }

/* ───────── Layout ───────── */
main { max-width: 1240px; margin: 0 auto; padding: 36px 28px 96px; }
.banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 28px; border: 1px solid var(--accent-soft);
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); border-radius: 8px; font-size: 14px;
}
.banner p { margin: 0; flex: 1; min-width: 220px; }

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.seg {
  display: inline-flex; padding: 3px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--rule);
}
.seg button {
  border: 0; background: none; padding: 6px 14px; border-radius: 99px; font-size: 12px; letter-spacing: .08em; color: var(--ink-2);
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.select {
  height: 36px; padding: 0 34px 0 14px; border-radius: 99px; border: 1px solid var(--rule); background: var(--surface);
  appearance: none; font-size: 13px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.search {
  height: 36px; padding: 0 14px 0 36px; border-radius: 99px; border: 1px solid var(--rule); background: var(--surface);
  min-width: 220px; font-size: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238d7f73' stroke-width='1.6'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='m9.5 9.5 3 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px 50%;
}
.spacer { flex: 1; }

/* ───────── Overview ───────── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: end; padding-bottom: 36px; border-bottom: 1px solid var(--rule); margin-bottom: 36px; }
.hero-figure { font: 400 clamp(64px, 9vw, 112px)/.9 var(--serif); letter-spacing: -.02em; }
.hero-figure small { font-size: .38em; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.hero-caption { margin-top: 14px; color: var(--ink-2); font-size: 14px; max-width: 34ch; }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-left: 1px solid var(--rule); }
.kpi { padding: 4px 20px; border-right: 1px solid var(--rule); }
.kpi:last-child { border-right: 0; }
.kpi-value { font: 400 34px/1.1 var(--serif); margin-top: 8px; }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.grid { display: grid; gap: 24px; }
.grid.two { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 24px 26px; min-width: 0;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-title { font: 500 24px/1.15 var(--serif); margin: 4px 0 0; }
.card-note { font-size: 12px; color: var(--muted); }
.section-title { display: flex; align-items: baseline; gap: 18px; margin: 48px 0 20px; }
.section-title h2 { font: 400 34px/1 var(--serif); margin: 0; }
.section-title::after { content: ""; flex: 1; border-top: 1px solid var(--rule); transform: translateY(-6px); }

.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis text { font: 11px var(--sans); fill: var(--muted); }
.chart .grid-line { stroke: var(--rule); stroke-width: 1; }
.chart .zero { stroke: var(--rule-strong); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 12px; }
.legend i { display: inline-block; width: 16px; height: 2px; vertical-align: middle; margin-right: 6px; background: var(--accent); }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }
.tip {
  position: absolute; pointer-events: none; z-index: 5; padding: 8px 12px; border-radius: 6px;
  background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.45; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity .1s;
}
.tip.show { opacity: 1; }

.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; font-size: 13px; }
.bar-row .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .val { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bar-row .val b { font-weight: 500; color: var(--ink); }
.bar-track { grid-column: 1 / -1; height: 6px; background: var(--surface-2); border-radius: 3px; position: relative; overflow: hidden; }
.bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.bar-fill.neg { background: var(--loss); }
.bar-track.center::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--rule-strong); }
.bar-row.best .label { color: var(--accent); font-weight: 500; }

.split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; margin: 4px 0 10px; }
.split span { display: block; }

table.months { width: 100%; border-collapse: collapse; font-size: 13px; }
table.months th { text-align: right; font-weight: 500; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 0 8px 10px; }
table.months th:first-child, table.months td:first-child { text-align: left; padding-left: 0; }
table.months td { text-align: right; padding: 10px 8px; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
table.months td:first-child { font: 500 17px var(--serif); }
.pos { color: var(--win); }
.neg { color: var(--loss); }

/* ───────── Journal list ───────── */
.day { margin-bottom: 30px; }
.day-head {
  display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong); margin-bottom: 6px;
}
.day-head h3 { font: 500 22px/1.2 var(--serif); margin: 0; }
.day-head .meta { font-size: 12px; color: var(--muted); }
.day-head .day-r { margin-left: auto; font: 500 18px var(--serif); }
.row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 12px 10px; margin: 0 -10px; border-radius: 6px; cursor: pointer; border: 0; background: none; width: calc(100% + 20px); text-align: left;
}
.row:hover { background: var(--surface); }
.thumb {
  width: 92px; height: 58px; border-radius: 3px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--rule);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.thumb.empty { display: grid; place-items: center; color: var(--muted); font: italic 13px var(--serif); }
.row-main { min-width: 0; }
.row-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.row-title .no { font: 500 18px/1.2 var(--serif); }
.row-title .sess { font-size: 13px; color: var(--ink-2); }
.row-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.row-note { font-size: 13px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.row-end { text-align: right; display: grid; gap: 4px; justify-items: end; }
.row-r { font: 500 22px/1 var(--serif); font-variant-numeric: tabular-nums; }
.row-r small { font-size: 12px; color: var(--muted); font-family: var(--sans); }

.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px;
  font-size: 11px; letter-spacing: .04em; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule); white-space: nowrap;
}
.tag.accent { background: var(--accent-soft); border-color: transparent; color: var(--ink); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px;
  font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.badge.win { background: var(--win-soft); color: var(--win); }
.badge.loss { background: var(--loss-soft); color: var(--loss); }
.badge.be { background: var(--be-soft); color: var(--be); }
.badge.miss { background: var(--miss-soft); color: var(--miss); }
.badge.none { background: var(--surface-2); color: var(--muted); }
.exec { font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.exec.no { text-decoration: line-through; }
.count-line { font-size: 13px; color: var(--muted); margin: -12px 0 24px; }
.empty-state { padding: 80px 0; text-align: center; color: var(--muted); font: italic 22px var(--serif); }
.more { display: flex; justify-content: center; margin-top: 24px; }

/* ───────── Sheet (detail / editor) ───────── */
.scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(30, 20, 12, .42); backdrop-filter: blur(2px);
  display: flex; justify-content: flex-end; animation: fade .18s ease;
}
.sheet {
  width: min(980px, 100%); height: 100%; overflow-y: auto; background: var(--paper);
  box-shadow: var(--shadow); animation: slide .24s cubic-bezier(.2, .8, .2, 1);
}
.sheet-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 14px 28px;
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule);
}
.sheet-body { padding: 32px 40px 80px; }
.detail-title { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
.detail-title h2 { font: 400 48px/1 var(--serif); margin: 6px 0 0; }
.detail-r { margin-left: auto; text-align: right; }
.detail-r .big { font: 400 48px/1 var(--serif); font-variant-numeric: tabular-nums; }
.shots { display: grid; gap: 14px; margin-bottom: 36px; }
.shot { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); cursor: zoom-in; padding: 0; }
.shot-cap { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.facts .card { padding: 20px 22px; }
dl.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 14px; }
dl.kv dt { color: var(--muted); font-size: 12px; padding-top: 1px; }
dl.kv dd { margin: 0; text-align: right; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.tp { border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; background: var(--surface); }
.tp .k { font-size: 10px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.tp .v { font: 500 22px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.quote {
  font: italic 400 24px/1.35 var(--serif); margin: 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--accent);
  white-space: pre-wrap;
}
.linked { display: flex; gap: 8px; flex-wrap: wrap; }
.block { margin-top: 28px; }
.block > .eyebrow { display: block; margin-bottom: 10px; }

.lightbox {
  position: fixed; inset: 0; z-index: 60; background: rgba(12, 8, 5, .92); display: grid; place-items: center; cursor: zoom-out; padding: 24px;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Editor */
.form { display: grid; gap: 28px; }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend { font: 500 24px var(--serif); padding: 0; margin-bottom: 14px; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.input, .field select, .field textarea {
  width: 100%; height: 40px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--rule-strong); background: var(--surface);
  font-size: 14px;
}
.field textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
.checks { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.checks label { display: inline-flex; gap: 8px; align-items: center; }
.checks input { accent-color: var(--accent); width: 16px; height: 16px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--rule-strong); background: var(--surface); font-size: 13px;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.add { border-style: dashed; color: var(--muted); }
.result-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.result-pick button { height: 44px; border-radius: var(--radius); border: 1px solid var(--rule-strong); background: var(--surface); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.result-pick button[aria-pressed="true"].win { background: var(--win); color: var(--surface); border-color: var(--win); }
.result-pick button[aria-pressed="true"].loss { background: var(--loss); color: var(--surface); border-color: var(--loss); }
.result-pick button[aria-pressed="true"].be { background: var(--be); color: var(--surface); border-color: var(--be); }
.result-pick button[aria-pressed="true"].miss { background: var(--miss); color: var(--surface); border-color: var(--miss); }
.result-pick button[aria-pressed="true"].none { background: var(--ink-2); color: var(--surface); border-color: var(--ink-2); }
.drop {
  border: 1px dashed var(--rule-strong); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted);
  background: var(--surface); font-size: 14px;
}
.drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.drop b { color: var(--ink); font-weight: 500; }
.edit-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.edit-shot { position: relative; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.edit-shot img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.edit-shot button { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(20,14,10,.75); color: #fff; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); z-index: 80;
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 99px; font-size: 13px; opacity: 0; transition: .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%); }

@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(40px); opacity: .4; } }

/* ───────── Responsive ───────── */
@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .grid.two, .grid.three, .facts { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .kpi:nth-child(3) { border-right: 0; }
}
@media (max-width: 720px) {
  .top-inner { padding: 0 16px; gap: 12px; height: 60px; }
  .brand-sub, .store-chip .label { display: none; }
  .nav { margin-left: 0; }
  .nav button { padding: 8px 10px; letter-spacing: .1em; }
  .top-actions .btn.primary .label { display: none; }
  .top-actions .btn.primary { width: 38px; padding: 0; }
  main { padding: 24px 16px 80px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; }
  .kpi { padding: 0 14px 0 0; border-right: 0; }
  .card { padding: 18px; }
  .search { min-width: 0; width: 100%; }
  .row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
  .thumb { width: 64px; height: 44px; }
  .sheet-body { padding: 24px 16px 64px; }
  .sheet-head { padding: 12px 16px; }
  .detail-title h2, .detail-r .big { font-size: 36px; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.months .hide-sm { display: none; }
}

/* ═════════ Command-centre skin (overrides) ═════════ */
.top { background: rgba(6, 9, 19, .72); border-bottom: 1px solid var(--rule); }
.brand { align-items: center; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--accent); color: var(--accent);
  font: 600 14px/1 var(--mono); box-shadow: 0 0 18px rgba(57, 240, 195, .25), inset 0 0 12px rgba(57, 240, 195, .12);
}
.brand-name { font: 600 15px/1 var(--mono); letter-spacing: .5em; }
.brand-sub { font: 500 9px var(--mono); letter-spacing: .28em; }
.nav button { font: 500 11px var(--mono); letter-spacing: .18em; border-radius: 6px; border: 1px solid transparent; }
.nav button[aria-current="page"] { color: var(--accent); background: var(--accent-soft); border-color: rgba(57, 240, 195, .3); }
.clock { font: 500 12px var(--mono); color: var(--ink-2); letter-spacing: .08em; }
.clock b { color: var(--ink); font-weight: 500; }
.store-chip { font: 500 10.5px var(--mono); letter-spacing: .08em; border-radius: 6px; background: rgba(13, 19, 38, .6); }
.store-chip .dot { box-shadow: 0 0 8px currentColor; color: var(--be); }
.store-chip.ok .dot { color: var(--win); }
.store-chip.warn .dot { color: var(--loss); background: var(--loss); }

.btn { font: 500 11px var(--mono); letter-spacing: .14em; border-radius: 6px; background: rgba(13, 19, 38, .7); border-color: var(--rule-strong); }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 22px rgba(57, 240, 195, .35); }
.btn.primary:hover { color: var(--accent-ink); filter: brightness(1.08); }
.btn.ghost { background: none; }
.btn[disabled] { opacity: .35; pointer-events: none; }
.menu-pop { background: var(--surface-solid); border-color: var(--rule-strong); border-radius: 10px; }
.menu-pop button { font-size: 13px; }

.seg { border-radius: 8px; background: rgba(13, 19, 38, .7); border-color: var(--rule-strong); }
.seg button { font: 500 11px var(--mono); letter-spacing: .1em; border-radius: 6px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(57, 240, 195, .3); }
.select, .search { border-radius: 8px; background-color: rgba(13, 19, 38, .7); border-color: var(--rule-strong); font: 500 12px var(--mono); }
.select option { background: var(--surface-solid); color: var(--ink); }

.card, .hero {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--glow); backdrop-filter: blur(12px); position: relative;
}
.card::before, .hero::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57, 240, 195, .5), rgba(143, 124, 255, .4), transparent);
}
.card-head .eyebrow::before, .hero .eyebrow:first-child::before { content: "◆ "; color: var(--accent); }
.card-title { font: 500 17px/1.25 var(--sans); letter-spacing: .01em; }
.card-note { font: 400 11px var(--mono); letter-spacing: .04em; }

.hero { padding: 30px 32px; border-bottom: 1px solid var(--rule); align-items: center; }
.hero-figure { font: 500 clamp(56px, 7.5vw, 96px)/1 var(--mono); letter-spacing: -.04em; color: var(--accent); text-shadow: 0 0 42px rgba(57, 240, 195, .35); }
.hero-figure.neg { color: var(--loss); text-shadow: 0 0 42px rgba(255, 93, 125, .35); }
.hero-figure small { font: 500 .36em var(--mono); color: var(--muted); text-shadow: none; }
.hero-caption { font-size: 13px; color: var(--ink-2); }
.kpis { border-left-color: var(--rule); }
.kpi { border-right-color: var(--rule); }
.kpi-value { font: 500 24px/1.2 var(--mono); letter-spacing: -.02em; }
.kpi-sub { font: 400 11px var(--mono); }

.section-title h2 { font: 500 12px var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-2); }
.section-title h2::before { content: "◆  "; color: var(--violet); }
.section-title::after { border-top-color: var(--rule); transform: translateY(-4px); }

.chart .axis text { font: 10px var(--mono); }
.chart .grid-line { stroke: rgba(122, 140, 255, .1); stroke-dasharray: 2 4; }
.chart .zero { stroke: rgba(122, 140, 255, .35); stroke-dasharray: none; }
.chart svg path[stroke="var(--accent)"] { filter: drop-shadow(0 0 6px rgba(57, 240, 195, .55)); }
.tip { background: var(--surface-solid); color: var(--ink); border: 1px solid var(--rule-strong); font: 400 11px/1.6 var(--mono); box-shadow: var(--shadow); }
.legend { font: 400 11px var(--mono); }

.acct-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 16px; }
.acct {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--rule); background: rgba(6, 9, 19, .4); color: var(--ink-2); font: 500 11px var(--mono); letter-spacing: .04em;
}
.acct i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.acct b { font-weight: 500; margin-left: 2px; }
.acct:hover { border-color: var(--rule-strong); color: var(--ink); }
.acct[aria-pressed="true"] { border-color: rgba(57, 240, 195, .45); background: var(--accent-soft); color: var(--ink); }

.bar-row { font-size: 12.5px; }
.bar-row .val { font: 400 11.5px var(--mono); }
.bar-track { background: rgba(122, 140, 255, .08); height: 5px; }
.bar-fill { background: var(--accent); box-shadow: 0 0 10px rgba(57, 240, 195, .6); }
.bar-fill.neg { background: var(--loss); box-shadow: 0 0 10px rgba(255, 93, 125, .5); }

table.months th { font: 500 9.5px var(--mono); letter-spacing: .2em; }
table.months td { font: 400 12.5px var(--mono); border-top-color: var(--rule); }
table.months td:first-child { font: 500 14px var(--sans); }
table.months tbody tr:hover { background: var(--surface-2); }
.pos { color: var(--win); }
.neg { color: var(--loss); }

.day-head { border-bottom-color: var(--rule-strong); }
.day-head h3 { font: 500 16px/1.3 var(--sans); }
.day-head .meta { font: 400 11px var(--mono); }
.day-head .day-r { font: 500 15px var(--mono); }
.row { border-radius: 8px; }
.row:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); }
.thumb { border-radius: 6px; border-color: var(--rule-strong); background: #0a1020; }
.row-title .no { font: 600 15px var(--mono); }
.row-title .sess { font: 400 12px var(--mono); color: var(--ink-2); }
.row-r { font: 500 17px var(--mono); }
.row-note { font-style: normal; color: var(--muted); }
.tag { font: 400 10.5px var(--mono); border-radius: 4px; background: rgba(36, 48, 92, .3); border-color: var(--rule); height: 21px; }
.tag.accent { background: rgba(143, 124, 255, .16); color: #cfc6ff; border-color: rgba(143, 124, 255, .35); }
.badge { font: 600 9.5px var(--mono); letter-spacing: .16em; border-radius: 4px; border: 1px solid currentColor; }
.badge.win { box-shadow: 0 0 12px rgba(57, 240, 195, .18); }
.exec { font: 400 10.5px var(--mono); }
.count-line { font: 400 12px var(--mono); }
.empty-state { font: 400 14px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

.scrim { background: rgba(2, 4, 10, .7); backdrop-filter: blur(4px); }
.sheet {
  background:
    radial-gradient(800px 500px at 100% 0, rgba(143, 124, 255, .12), transparent 60%),
    radial-gradient(700px 500px at 0 100%, rgba(57, 240, 195, .06), transparent 60%), #070b17;
  border-left: 1px solid var(--rule-strong);
}
.sheet-head { background: rgba(7, 11, 23, .85); }
.detail-title h2 { font: 600 34px/1.1 var(--mono); letter-spacing: -.02em; }
.detail-r .big { font: 500 40px/1 var(--mono); }
.detail-r .big.pos { text-shadow: 0 0 30px rgba(57, 240, 195, .4); }
.shot { border-color: var(--rule-strong); border-radius: 8px; background: #0a1020; }
.shot-cap { font: 500 10px var(--mono); }
dl.kv dt { font: 400 11px var(--mono); }
dl.kv dd { font-size: 13px; }
.tp { border-radius: 6px; background: rgba(6, 9, 19, .5); }
.tp .k { font: 500 9.5px var(--mono); }
.tp .v { font: 500 17px var(--mono); }
.quote { font: 400 17px/1.55 var(--sans); color: var(--ink); background: rgba(57, 240, 195, .05); padding: 14px 18px; border-radius: 0 8px 8px 0; }

.fieldset legend { font: 500 12px var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); }
.fieldset legend::before { content: "◆  "; color: var(--accent); }
.field > span { font: 500 9.5px var(--mono); letter-spacing: .18em; }
.input, .field select, .field textarea { background: rgba(6, 9, 19, .65); border-color: var(--rule-strong); border-radius: 6px; }
.input:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.chip { border-radius: 6px; background: rgba(6, 9, 19, .5); border-color: var(--rule-strong); font: 400 12px var(--mono); }
.chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: rgba(57, 240, 195, .5); }
.result-pick button { border-radius: 6px; background: rgba(6, 9, 19, .5); font: 500 11px var(--mono); }
.result-pick button[aria-pressed="true"] { color: var(--accent-ink) !important; }
.drop { border-radius: 8px; background: rgba(6, 9, 19, .45); border-color: var(--rule-strong); }
.drop.over { background: var(--accent-soft); border-color: var(--accent); }
.banner { background: rgba(143, 124, 255, .1); border-color: rgba(143, 124, 255, .35); border-radius: 10px; }
.toast { background: var(--surface-solid); color: var(--ink); border: 1px solid rgba(57, 240, 195, .4); font: 400 12px var(--mono); box-shadow: 0 0 24px rgba(57, 240, 195, .2); }

@media (max-width: 1040px) { .clock { display: none; } }
@media (max-width: 720px) { .hero { padding: 22px 18px; } .brand-name { letter-spacing: .3em; } }
/* quieter account switcher + tooltip */
.acct { height: 26px; padding: 0 10px; gap: 7px; font-size: 10.5px; color: var(--muted); background: transparent; border-color: rgba(122, 140, 255, .1); }
.acct i { width: 6px; height: 6px; box-shadow: none; opacity: .85; }
.acct b { font-weight: 400; color: var(--ink-2); opacity: .75; }
.acct b.pos, .acct b.neg { color: inherit; }
.acct[aria-pressed="true"] { background: rgba(57, 240, 195, .06); border-color: rgba(57, 240, 195, .28); color: var(--ink); }
.acct[aria-pressed="true"] b { opacity: 1; }
.tip {
  background: rgba(12, 18, 36, .82); backdrop-filter: blur(8px); color: var(--ink-2);
  border: 1px solid rgba(122, 140, 255, .16); border-radius: 6px; padding: 7px 10px;
  font: 400 10.5px/1.6 var(--mono); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8);
}
.tip b { color: var(--ink); font-weight: 500; }
/* header fit + hero eyebrow fix */
.hero .kpi .eyebrow::before { content: none; }
.store-chip, .brand-sub, .nav button { white-space: nowrap; }
@media (max-width: 1100px) { .brand-sub { display: none; } .store-chip .label { display: none; } .store-chip { padding: 8px; } }
/* hero caption: one fact per line, numbers emphasised */
.hero-caption { display: grid; gap: 8px; margin-top: 20px; max-width: none; font-size: 13px; color: var(--muted); }
.hero-caption > span { white-space: nowrap; }
.hero-caption b { font: 500 13px var(--mono); color: var(--ink); margin-right: 4px; }
.hero-caption .split-line { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hero-caption .be-c { color: var(--be); }.hero-caption b.pos { color: var(--win); }
.hero-caption b.neg { color: var(--loss); }