:root {
  --hp-void: #040A0E;
  --hp-environment: #061016;
  --hp-workspace: #08141A;
  --hp-workspace-raised: #0A1820;
  --hp-surface-1: #0C1920;
  --hp-surface-2: #101F27;
  --hp-surface-3: #142730;
  --hp-surface-deep: #071219;
  --hp-surface-selected: #132830;
  --hp-surface-floating: #172B34;
  --hp-text-primary: #EDF6F4;
  --hp-text-secondary: #B4C6C8;
  --hp-text-muted: #8A9FA4;
  --hp-text-faint: #6A8288;
  --hp-text-disabled: #304247;
  --hp-cyan: #17D4E3;
  --hp-cyan-bright: #54EAF2;
  --hp-cyan-deep: #087F8A;
  --hp-cyan-soft: rgba(23, 212, 227, 0.11);
  --hp-blue: #659CFF;
  --hp-violet: #9878F5;
  --hp-violet-bright: #B29AFF;
  --hp-silver: #D7E1E0;
  --hp-slate: #41565C;
  --hp-gold: #D4B36B;
  --hp-gold-bright: #F0D18C;
  --hp-gold-deep: #775B29;
  --hp-gold-soft: rgba(212, 179, 107, 0.13);
  --hp-positive: #48D49A;
  --hp-negative: #FF687C;
  --hp-warning: #E7AD4C;
  --hp-info: #659CFF;
  --hp-border-subtle: rgba(206, 230, 229, 0.055);
  --hp-border-default: rgba(206, 230, 229, 0.09);
  --hp-border-strong: rgba(206, 230, 229, 0.16);
  --hp-canvas: var(--hp-environment);
  --hp-canvas-deep: var(--hp-void);
  --hp-surface: var(--hp-surface-1);
  --hp-surface-raised: var(--hp-surface-2);
  --hp-surface-soft: var(--hp-surface-3);
  --hp-ink: var(--hp-text-primary);
  --hp-ink-soft: var(--hp-text-secondary);
  --hp-muted: var(--hp-text-muted);
  --hp-faint: var(--hp-text-faint);
  --hp-header: var(--hp-void);
  --hp-header-raised: var(--hp-workspace-raised);
  --hp-border: var(--hp-border-default);
  --hp-shadow-quiet: none;
  --hp-shadow-raised: 0 18px 40px -28px rgba(0, 0, 0, 0.7);
  --route-accent: #17D4E3;
  --route-accent-2: #D4B36B;
  --route-deep: #071219;
  --route-tint: rgba(23, 212, 227, 0.10);
  --route-haze: rgba(23, 212, 227, 0.06);
  --chart-line: var(--hp-cyan);
  --chart-bar: #24343C;
  --chart-bar-hi: var(--hp-gold);
  --chart-bar-near: #355056;
  --chart-area: var(--hp-cyan);
  --chart-grid: rgba(101, 156, 255, 0.10);
  --chart-pin: var(--hp-gold);
  --chart-cum: var(--hp-silver);
  --chart-oi: var(--hp-violet);
  --canvas: var(--hp-environment);
  --app: var(--hp-environment);
  --paper: var(--hp-surface-1);
  --panel: var(--hp-surface-2);
  --ink: var(--hp-text-primary);
  --ink-2: var(--hp-text-secondary);
  --mute: var(--hp-text-muted);
  --line: var(--hp-border-default);
  --line-2: var(--hp-border-strong);
  --cyan: var(--hp-cyan);
  --cyan-deep: var(--hp-cyan-deep);
  --cyan-ink: var(--hp-void);
  --lime: var(--hp-positive);
  --up: var(--hp-positive);
  --down: var(--hp-negative);
  --danger: var(--hp-negative);
  --top: var(--hp-void);
  --top-btn: var(--hp-workspace-raised);
  --shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.72);
  --shadow-tip: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  --r: 11px;
  --r-sm: 9px;
  --r-ctrl: 7px;
  --r-side: 10px;
  --pill: 999px;
  --top-h: 56px;
  --btn-h: 36px;
  --btn-h-lg: 40px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-firm: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-cine: cubic-bezier(0.65, 0.05, 0.2, 1);
  --t-now: 100ms;
  --t-ctrl: 160ms;
  --t-tip: 180ms;
  --t-card: 280ms;
  --t-panel: 420ms;
  --t-route: 560ms;
  --t-tone: 240ms;
  --font: "Manrope", "Segoe UI", sans-serif;
  --display: "Sora", "Manrope", sans-serif;
  --figure: "IBM Plex Sans", "Manrope", sans-serif;
  --gold: var(--hp-gold);
  --gold-2: var(--hp-gold-bright);
  --gold-dim: var(--hp-gold-soft);
  --gold-rgb: 212, 179, 107;
  --dash: var(--hp-surface-deep);
  --dash-2: var(--hp-surface-3);
  --oi: var(--hp-violet);
}

[data-route="overview"],
body[data-page="overview"] {
  --route-accent: #17D4E3;
  --route-accent-2: #D4B36B;
  --route-deep: #071219;
  --route-tint: rgba(23, 212, 227, 0.10);
  --route-haze: rgba(23, 212, 227, 0.07);
  --chart-line: #17D4E3;
  --chart-bar: #24343C;
  --chart-bar-hi: #D4B36B;
  --chart-bar-near: #355056;
  --chart-area: #17D4E3;
  --chart-grid: rgba(101, 156, 255, 0.10);
  --chart-pin: #F0D18C;
  --chart-cum: #D7E1E0;
  --chart-oi: #9878F5;
}
[data-route="whales"],
body[data-page="whales"] {
  --route-accent: #9878F5;
  --route-accent-2: #17D4E3;
  --route-deep: #0B101C;
  --route-tint: rgba(152, 120, 245, 0.12);
  --route-haze: rgba(152, 120, 245, 0.08);
  --chart-line: #17D4E3;
  --chart-bar: #2A2744;
  --chart-bar-hi: #B29AFF;
  --chart-bar-near: #3C3860;
  --chart-area: #9878F5;
  --chart-grid: rgba(152, 120, 245, 0.12);
  --chart-pin: #F0D18C;
}
[data-route="copy"],
body[data-page="copy-trading"] {
  --route-accent: #48D49A;
  --route-accent-2: #659CFF;
  --route-deep: #071612;
  --route-tint: rgba(72, 212, 154, 0.10);
  --route-haze: rgba(72, 212, 154, 0.07);
  --chart-line: #48D49A;
  --chart-bar: #1C3330;
  --chart-bar-hi: #659CFF;
  --chart-bar-near: #2A4844;
  --chart-area: #48D49A;
  --chart-grid: rgba(72, 212, 154, 0.10);
  --chart-pin: #D4B36B;
}
[data-route="agents"],
body[data-page="ai-agents"] {
  --route-accent: #659CFF;
  --route-accent-2: #17D4E3;
  --route-deep: #081018;
  --route-tint: rgba(101, 156, 255, 0.11);
  --route-haze: rgba(101, 156, 255, 0.08);
  --chart-line: #17D4E3;
  --chart-bar: #1C2A44;
  --chart-bar-hi: #E7AD4C;
  --chart-bar-near: #2C3C5C;
  --chart-area: #659CFF;
  --chart-grid: rgba(101, 156, 255, 0.12);
  --chart-pin: #F0D18C;
}
[data-route="vaults"],
body[data-page="vaults"] {
  --route-accent: #2EC4B6;
  --route-accent-2: #D4B36B;
  --route-deep: #071614;
  --route-tint: rgba(46, 196, 182, 0.10);
  --route-haze: rgba(46, 196, 182, 0.07);
  --chart-line: #2EC4B6;
  --chart-bar: #1A3330;
  --chart-bar-hi: #D4B36B;
  --chart-bar-near: #2A4844;
  --chart-area: #2EC4B6;
  --chart-grid: rgba(46, 196, 182, 0.10);
  --chart-pin: #F0D18C;
}
[data-route="markets"],
body[data-page="markets"] {
  --route-accent: #17D4E3;
  --route-accent-2: #D4B36B;
  --route-deep: #050E14;
  --route-tint: rgba(23, 212, 227, 0.08);
  --route-haze: rgba(23, 212, 227, 0.05);
  --chart-line: #17D4E3;
  --chart-bar: #1C2A32;
  --chart-bar-hi: #D4B36B;
  --chart-bar-near: #2C3C44;
  --chart-area: #17D4E3;
  --chart-grid: rgba(101, 156, 255, 0.10);
  --chart-pin: #F0D18C;
}
[data-route="portfolio"],
body[data-page="portfolio"] {
  --route-accent: #659CFF;
  --route-accent-2: #9878F5;
  --route-deep: #07101A;
  --route-tint: rgba(101, 156, 255, 0.10);
  --route-haze: rgba(101, 156, 255, 0.08);
  --chart-line: #659CFF;
  --chart-bar: #1A2838;
  --chart-bar-hi: #17D4E3;
  --chart-bar-near: #2A384C;
  --chart-area: #659CFF;
  --chart-grid: rgba(101, 156, 255, 0.12);
  --chart-pin: #F0D18C;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
body.hp {
  min-height: 100dvh;
  background: var(--hp-void);
  color: var(--hp-text-primary);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.45;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 2px; }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Cursor light */
.hp-cursor {
  position: fixed; inset: 0; pointer-events: none; z-index: 70;
  background: radial-gradient(220px circle at var(--mx, -400px) var(--my, -400px), rgba(0, 219, 235, 0.09), transparent 62%);
  transition: opacity var(--t-ctrl) var(--ease);
}
.hp-spot {
  position: fixed; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border: 1px solid rgba(0, 219, 235, 0.4);
  background: rgba(0, 219, 235, 0.08);
  border-radius: 50%; pointer-events: none; z-index: 90;
  left: var(--mx, -40px); top: var(--my, -40px);
  transition: transform var(--t-now) var(--ease), opacity var(--t-ctrl);
  opacity: 0.55;
}
body.hp.is-press .hp-spot { transform: scale(0.7); }

/* Full-bleed application shell */
.hp-app {
  width: 100%;
  margin: 0;
  background: var(--app);
  border-radius: 0;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  position: relative;
}

/* Top bar */
.hp-top {
  height: var(--top-h);
  background: var(--hp-void);
  color: var(--hp-text-primary);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 14px 0 0;
  gap: 12px;
  flex: none;
  position: sticky; top: 0; z-index: 50;
  box-shadow: inset 0 -1px 0 var(--hp-border-subtle);
}
.hp-brand {
  display: flex; align-items: center; gap: 14px;
  height: 100%; padding: 0 18px 0 0;
  color: #fff;
  min-width: 0;
}
.hp-brand-mark {
  width: 86px; height: var(--top-h);
  min-width: 86px;
  background: #05070a;
  display: grid; place-items: center;
  flex: none;
  align-self: stretch;
  box-shadow: inset -1px 0 0 rgba(0,219,235,0.18);
}
.hp-brand-mark svg, .hp-brand-mark img {
  width: 64px; height: 32px; display: block;
  filter: drop-shadow(0 0 10px rgba(0,219,235,0.55));
}
.hp-brand b {
  font-family: var(--display);
  font-size: 18px; font-weight: 700; letter-spacing: -0.04em;
  padding-right: 8px;
}

.hp-nav {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  position: relative;
}
.hp-nav-pill {
  position: absolute; bottom: 8px; height: 2px;
  background: linear-gradient(90deg, var(--hp-cyan), var(--hp-gold));
  border-radius: 2px;
  transition: left var(--t-panel) var(--ease-firm), width var(--t-panel) var(--ease-firm);
  pointer-events: none;
  box-shadow: 0 0 10px rgba(23, 212, 227, 0.45);
  z-index: 0;
}
.hp-nav a { z-index: 1; }
.hp-nav a {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hp-text-muted);
  font-size: 13px; font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  transition: color 0.16s, background 0.16s, box-shadow 0.16s;
}
.hp-nav a:hover { color: var(--hp-text-primary); }
.hp-nav a[aria-current="page"] {
  color: var(--hp-text-primary);
  background: transparent;
  box-shadow: none;
}
.hp-nav a[aria-current="page"]::after { display: none; }

.hp-top-tools { display: flex; align-items: center; gap: 8px; padding-right: 8px; }
.hp-icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--top-btn);
  color: #e8eaee;
  position: relative;
  transition: background 0.16s, transform 0.16s, box-shadow 0.16s;
}
.hp-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-icon-btn:hover { background: #2a2c32; box-shadow: 0 0 0 1px rgba(0,219,235,0.28); }
.hp-icon-btn:active { transform: translateY(1px); }
.hp-icon-btn.is-light {
  background: var(--hp-surface-3);
  color: var(--hp-text-primary);
  border: 1px solid var(--hp-border-default);
  box-shadow: none;
}
.hp-icon-btn.is-light:hover { background: var(--hp-surface-floating); }
.hp-user {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px 0 4px;
  background: var(--top-btn);
  border-radius: 12px;
  color: #fff; font-weight: 650; font-size: 13.5px;
}
.hp-user i {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--lime);
  display: grid; place-items: center; color: #111;
}
.hp-user i svg, .hp-user > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Main */
.hp-main {
  flex: 1;
  padding: 28px clamp(16px, 3.2vw, 48px) 64px;
  width: 100%;
  max-width: none;
}
.hp-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.hp-kicker {
  margin: 0 0 6px;
  color: var(--hp-cyan-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.hp-lede {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.5;
}
.hp-pagehead-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-h1 {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin: 0 0 8px;
  color: var(--ink);
}
.hp-updated {
  display: flex; align-items: center; gap: 8px;
  color: var(--mute); font-size: 13.5px; margin: 0;
}
.hp-updated svg { width: 16px; height: 16px; color: var(--cyan-deep); }
.hp-updated a { color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

.hp-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  text-align: center;
}
.hp-kpi label {
  display: block;
  color: var(--mute);
  font-size: 12.5px; font-weight: 600;
  margin-bottom: 4px;
}
.hp-kpi b {
  font-family: var(--figure);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hp-kpi small {
  display: inline-block;
  font-size: 14px; font-weight: 650; margin: 4px 0 0 3px;
  color: var(--ink-2);
  align-self: flex-start;
}
.hp-kpi .row { display: flex; align-items: center; justify-content: center; gap: 8px; }

.pill {
  display: inline-flex; align-items: center; gap: 3px;
  min-height: 20px; padding: 0 7px;
  border-radius: 6px;
  font-family: var(--figure);
  font-size: 11px; font-weight: 700;
  letter-spacing: -0.01em;
}
.pill.up { background: rgba(22, 140, 96, 0.16); color: #0f5c3e; }
.pill.down { background: rgba(221, 83, 97, 0.14); color: #9f2434; }
.pill.cyan { background: rgba(18, 203, 217, 0.18); color: #087D87; }
.pill.warn { background: rgba(212, 147, 50, 0.18); color: #866128; }

/* Tabs */
.hp-tabs {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; margin: 18px 0 6px;
}
.hp-tabs a, .hp-tabs button {
  position: relative;
  color: var(--mute);
  font-size: 13.5px; font-weight: 650;
  padding: 8px 2px 10px;
  background: none;
}
.hp-tabs a:hover, .hp-tabs button:hover { color: var(--ink); }
.hp-tabs a[aria-current="page"],
.hp-tabs button[aria-current="page"],
.hp-tabs button.is-on,
.hp-tabs a.is-on {
  color: var(--ink);
}
.hp-tabs a[aria-current="page"]::after,
.hp-tabs button[aria-current="page"]::after,
.hp-tabs button.is-on::after,
.hp-tabs a.is-on::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--ink); border-radius: 2px;
}

/* Buttons */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 16px;
  border-radius: 12px;
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.015em;
  transition: transform var(--t-ctrl) var(--ease), background var(--t-ctrl), box-shadow var(--t-ctrl), opacity var(--t-ctrl), border-color var(--t-ctrl);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.hp-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hp-btn-primary { background: var(--hp-ink); color: #fff; box-shadow: 0 8px 18px -12px rgba(17,18,20,0.7); }
.hp-btn-primary:hover { background: #04161a; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(0,0,0,0.55); }
.hp-btn-primary:active { transform: translateY(1px) scale(0.985); }
.hp-btn-secondary { background: var(--hp-surface-raised); color: var(--ink); border: 1px solid var(--hp-border-strong); }
.hp-btn-secondary:hover { background: var(--hp-surface-soft); border-color: var(--hp-border-strong); }
.hp-btn-quiet { background: transparent; color: var(--ink-2); }
.hp-btn-quiet:hover { background: rgba(8,36,42,0.05); }
.hp-btn-cyan { background: var(--hp-cyan); color: var(--hp-ink); }
.hp-btn-cyan:hover { background: var(--hp-cyan-bright); transform: translateY(-1px); }
.hp-btn-gold { background: var(--hp-ink); color: #fff; box-shadow: 0 0 0 1px var(--hp-gold), 0 8px 18px -12px rgba(17,18,20,0.7); }
.hp-btn-gold:hover { background: #04161a; box-shadow: 0 0 0 1px var(--hp-gold-bright); }
.hp-btn-positive { background: var(--hp-positive); color: #fff; }
.hp-btn-positive:hover { background: #127552; }
.hp-btn-route { background: var(--route-accent); color: #fff; }
.hp-btn-route:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hp-btn-danger { background: rgba(255,104,124,0.12); color: var(--hp-negative); border: 1px solid rgba(255,104,124,0.28); }
.hp-btn-danger:hover { background: rgba(255,104,124,0.2); }
.hp-btn:disabled { opacity: 0.45; pointer-events: none; }
.hp-btn.is-loading { pointer-events: none; }
.hp-btn.is-loading::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
  background: rgba(255,255,255,0.18);
  animation: load-bar 480ms var(--ease-out) forwards;
}
.hp-btn.is-loading::after {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes load-bar { to { width: 100%; } }

/* Cards */
.hp-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.hp-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.hp-work {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: 16px;
  margin-top: 16px;
}
.hp-card {
  background: var(--hp-surface);
  border-radius: var(--r-sm);
  padding: 20px 20px 16px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  transition: background var(--t-tone) var(--ease), box-shadow var(--t-card) var(--ease), border-color var(--t-tone) var(--ease);
}
.hp-card::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 0%), rgba(0,219,235,0.12), transparent 58%);
  opacity: 0; transition: opacity var(--t-ctrl);
}
.hp-card > * { position: relative; z-index: 1; }
.hp-card > .hp-trace, .hp-card > .hp-scan, .hp-card > .hp-spark,
.hp-box > .hp-trace, .hp-box > .hp-scan, .hp-box > .hp-spark,
.hp-dash > .hp-trace, .hp-dash > .hp-scan, .hp-dash > .hp-spark { z-index: 6; }
.hp-card.is-paper { background: var(--hp-surface-raised); box-shadow: 0 0 0 1px var(--hp-border-strong), var(--hp-shadow-quiet); }
.hp-card:has(.iso), .hp-card:has(.gadget) { overflow: visible; }
.hp-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.hp-h2 {
  font-family: var(--display);
  font-size: 18px; font-weight: 650;
  letter-spacing: -0.03em; margin: 0;
}
.hp-h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.hp-meta { color: var(--mute); font-size: 13.5px; margin: 0; line-height: 1.45; }
.hp-sub { color: var(--mute); font-size: 13.5px; margin: 4px 0 0; max-width: 56ch; }
.hp-body { color: var(--ink-2); margin: 0; max-width: 56ch; font-size: 15px; }

/* Chart */
.hp-chart {
  position: relative;
  height: 380px;
  cursor: crosshair;
  user-select: none;
  padding-right: 52px;
}
.hp-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hp-yaxis {
  position: absolute; right: 0; top: 8px; bottom: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--figure); font-size: 11px; color: var(--mute); text-align: right;
  pointer-events: none;
}
.hp-tooltip {
  position: absolute; z-index: 8; min-width: 148px;
  background: var(--hp-surface-floating); color: var(--hp-text-primary);
  border-radius: 8px; padding: 10px 12px 8px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.7);
  border: 1px solid var(--hp-border-strong);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity 0.12s;
}
.hp-tooltip.is-on { opacity: 1; }
.hp-tooltip b {
  font-family: var(--figure);
  font-size: 22px; font-weight: 650; letter-spacing: -0.04em;
  display: flex; align-items: center; gap: 8px;
}
.hp-tooltip p { margin: 6px 0 0; color: var(--mute); font-size: 12px; }

.hp-scroller {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; color: var(--mute); font-size: 12px; font-weight: 600;
  overflow: auto; padding-bottom: 4px;
}
.hp-scroller button { color: inherit; padding: 6px 4px; white-space: nowrap; }
.hp-range-pill {
  background: var(--ink); color: #fff;
  border-radius: var(--pill); padding: 6px 12px !important;
  font-size: 12px;
}

/* Table */
.hp-table { width: 100%; border-collapse: collapse; }
.hp-table th {
  text-align: left; color: var(--mute); font-size: 12px; font-weight: 600;
  padding: 0 8px 10px; border: 0;
}
.hp-table tbody tr { transition: background 0.18s; }
.hp-table tbody tr:hover { background: color-mix(in srgb, var(--route-accent) 8%, transparent); }
.hp-table td {
  padding: 14px 8px; border-top: 1px solid #e7e9ee;
  font-size: 14px; font-weight: 600;
  vertical-align: middle;
}
.hp-table td.num, .num {
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.net {
  display: flex; align-items: center; gap: 10px; font-weight: 700;
}
.net img, .net .mark {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 12px;
}
.chg.up { color: var(--hp-positive); }
.chg.down { color: var(--hp-negative); }

/* Forms */
.hp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.hp-field label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.hp-field input, .hp-field select, .hp-search-field {
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.hp-field input:hover, .hp-field select:hover, .hp-search-field:hover {
  border-color: #b9eef3;
  box-shadow: 0 0 0 4px rgba(0,219,235,0.08);
}
.hp-field input:focus, .hp-field select:focus, .hp-search-field:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0,219,235,0.18), 0 0 24px rgba(0,219,235,0.12);
}
.hp-range { width: 100%; accent-color: var(--cyan-deep); }
.hp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.hp-list button.hp-row { width: 100%; text-align: left; border-radius: 10px; padding: 10px 8px; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; min-width: 0; }
.hp-list .net img { width: 20px; height: 20px; flex: none; }
.hp-list .net { gap: 8px; min-width: 0; }
.hp-list .hp-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-list button.hp-row:hover { background: var(--hp-surface-selected); }
.hp-list button.hp-row.is-on { background: var(--hp-surface-selected); }

.hp-seg {
  display: inline-flex; background: var(--hp-surface-deep); border: 1px solid var(--hp-border-default);
  border-radius: var(--pill); padding: 3px;
}
.hp-seg button {
  min-height: 30px; padding: 0 12px; border-radius: var(--pill);
  font-size: 12.5px; font-weight: 700; color: var(--mute);
}
.hp-seg button.is-on, .hp-seg button[aria-pressed="true"] {
  background: var(--ink); color: #fff;
}

.hp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Dialog */
.hp-dialog {
  position: fixed; inset: 0; z-index: 120;
  display: none; place-items: center;
  background: rgba(10,12,16,0.42);
  padding: 20px;
}
.hp-dialog.is-on { display: grid; }
.hp-dialog-card {
  width: min(440px, 100%);
  background: var(--hp-surface-floating); border-radius: 12px; padding: 22px;
  box-shadow: 0 0 0 1px var(--hp-border-strong), var(--shadow);
}
.hp-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: #fff; border-radius: var(--pill);
  padding: 10px 16px; font-size: 13px; font-weight: 650; z-index: 140;
  opacity: 0; pointer-events: none; transition: 0.2s var(--ease);
}
.hp-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Depth / heat */
.hp-depth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-family: var(--figure); font-size: 12px; }
.hp-depth .bid { color: var(--up); }
.hp-depth .ask { color: #dc2626; text-align: right; }
.hp-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hp-heat i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--cyan); }
.hp-log { font-family: var(--figure); font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.hp-log .ok { color: var(--up); font-weight: 700; }
.hp-log .warn { color: #ca8a04; font-weight: 700; }

/* Isometric */
.iso {
  height: 210px; perspective: 900px;
  display: grid; place-items: center;
}
.iso-rig {
  width: 260px; height: 140px;
  transform: rotateX(58deg) rotateZ(-32deg);
  transform-style: preserve-3d;
}
.iso:hover .iso-rig, .iso:focus-within .iso-rig {
  animation: iso-sway 1.6s var(--ease-cine) both;
}
.iso-block { cursor: pointer; }
.iso-block:hover, .iso-block:focus-visible { filter: brightness(1.18); }
.iso-block {
  position: absolute; width: 72px; height: 72px;
  transform-style: preserve-3d;
}
.iso-block span {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #2a3138, #11161b);
  border: 1px solid rgba(0,219,235,0.35);
  box-shadow: inset 0 0 18px rgba(0,219,235,0.18);
}
.iso-block span:nth-child(1) { transform: translateZ(18px); background: linear-gradient(180deg, #00dbeb, #0891a0); }
.iso-block span:nth-child(2) { transform: rotateY(90deg) translateZ(18px); }
.iso-block span:nth-child(3) { transform: rotateX(90deg) translateZ(18px); background: #0e1518; }
.iso-block.a { left: 20px; top: 30px; }
.iso-block.b { left: 96px; top: 8px; }
.iso-block.c { left: 168px; top: 40px; }
.iso:hover .iso-block.a { animation: iso-bob 1.8s ease-in-out both; }
.iso:hover .iso-block.b { animation: iso-bob 1.8s 0.12s ease-in-out both; }
.iso:hover .iso-block.c { animation: iso-bob 1.8s 0.24s ease-in-out both; }

.macro {
  height: 120px; border-radius: 16px;
  background:
    radial-gradient(120px 80px at 70% 30%, rgba(0,219,235,0.35), transparent 60%),
    linear-gradient(160deg, #0b1014, #1a232a);
  position: relative; overflow: hidden;
}
.macro::after {
  content: ""; position: absolute; inset: -20%;
  background: conic-gradient(from 120deg, transparent, rgba(255,255,255,0.18), transparent 32%);
  animation: sweep 6s linear infinite;
}

/* Welcome boot */
body.welcome,
body.is-booting {
  background: #040A0E;
  cursor: default;
}
body.welcome .hp-app,
body.welcome .hp-cursor,
body.welcome .hp-spot,
body.welcome .hp-deskbar,
body.welcome .hp-dock,
body.welcome::before,
body.welcome::after,
body.is-booting .hp-cursor,
body.is-booting .hp-spot { display: none !important; }
.hp-boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(520px 300px at 50% 46%, rgba(23, 212, 227, 0.16), transparent 62%),
    #040A0E;
  color: #EDF6F4;
  overflow: hidden;
}
.hp-boot-core {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
}
.hp-boot-halo {
  position: absolute;
  width: min(420px, 78vw);
  height: 220px;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(23, 212, 227, 0.38), rgba(23, 212, 227, 0.08) 42%, transparent 70%);
  filter: blur(8px);
  animation: boot-halo 1.4s var(--ease) both;
  pointer-events: none;
}
.hp-boot-logo {
  position: relative;
  width: min(280px, 68vw);
  z-index: 1;
  animation: boot-mark 1.1s var(--ease) both;
}
.hp-boot-logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(23, 212, 227, 0.55)) drop-shadow(0 0 42px rgba(23, 212, 227, 0.28));
}
.hp-boot-logo::after {
  content: "";
  position: absolute;
  inset: -18% -8%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(23, 212, 227, 0) 38%,
    rgba(244, 255, 254, 0.85) 50%,
    rgba(23, 212, 227, 0.35) 58%,
    transparent 72%
  );
  transform: translateX(-130%);
  animation: boot-sweep 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.85s 1 both;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hp-w-bar,
.hp-w-dot,
.hp-w-hz {
  transform-box: fill-box;
  transform-origin: center;
}
.hp-w-a { animation: boot-pulse 0.55s cubic-bezier(0.18, 0.84, 0.22, 1) 1.05s 1 both; }
.hp-w-b { animation: boot-pulse 0.55s cubic-bezier(0.18, 0.84, 0.22, 1) 1.14s 1 both; }
.hp-w-c { animation: boot-pulse-hz 0.6s cubic-bezier(0.18, 0.84, 0.22, 1) 1.24s 1 both; }
.hp-w-d { animation: boot-pulse 0.55s cubic-bezier(0.18, 0.84, 0.22, 1) 1.36s 1 both; }
.hp-w-e { animation: boot-pulse 0.55s cubic-bezier(0.18, 0.84, 0.22, 1) 1.46s 1 both; }
.hp-boot-name {
  position: relative;
  z-index: 1;
  margin: 28px 0 0;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #c6ecee;
  opacity: 0;
  animation: boot-name 0.7s var(--ease) 1.35s forwards;
}
.hp-boot-skip {
  position: fixed;
  right: 28px;
  bottom: 28px;
  margin: 0;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: #6d8388;
  font: 700 10px/1 var(--ui, inherit);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: boot-skip 0.4s ease 1.6s forwards;
  z-index: 2;
}
.hp-boot-skip:hover,
.hp-boot-skip:focus-visible { color: #17D4E3; }
body.is-boot-out .hp-boot {
  animation: boot-out 0.52s var(--ease) both;
}
@keyframes boot-halo {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  to { opacity: 0.78; transform: translate(-50%, -50%) scale(1); }
}
@keyframes boot-mark {
  from { opacity: 0; transform: scale(0.92); filter: saturate(0.4); }
  60% { opacity: 1; transform: scale(1.02); filter: saturate(1); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes boot-name {
  from { opacity: 0; transform: translateY(8px); letter-spacing: 0.5em; }
  to { opacity: 1; transform: none; letter-spacing: 0.34em; }
}
@keyframes boot-pulse {
  0% { transform: scaleY(1); }
  42% { transform: scaleY(1.34); }
  100% { transform: scaleY(1); }
}
@keyframes boot-pulse-hz {
  0% { transform: scaleY(1); }
  42% { transform: scaleY(1.12); }
  100% { transform: scaleY(1); }
}
@keyframes boot-sweep {
  from { transform: translateX(-130%); opacity: 0; }
  12% { opacity: 1; }
  to { transform: translateX(130%); opacity: 0; }
}
@keyframes boot-skip {
  to { opacity: 1; }
}
@keyframes boot-out {
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-boot-core,
  .hp-boot-halo,
  .hp-boot-logo,
  .hp-boot-logo::after,
  .hp-boot-name,
  .hp-w-a, .hp-w-b, .hp-w-c, .hp-w-d, .hp-w-e,
  .hp-boot-skip,
  body.is-boot-out .hp-boot { animation: none; opacity: 1; transform: none; }
}

/* Dock */
.hp-dock {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  background: var(--top); color: #9aa0a8;
  border-radius: 18px; padding: 8px;
  z-index: 60;
  justify-content: space-around;
}
.hp-dock a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 650; padding: 6px;
}
.hp-dock a[aria-current="page"] { color: var(--cyan); }
.hp-dock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.hp-progress { height: 3px; background: #1b2428; border-radius: 3px; overflow: hidden; }
.hp-progress span { display: block; height: 100%; background: var(--cyan); width: 0; }

.hp-h1 .ch {
  display: inline-block;
  animation: letter 0.45s var(--ease) both;
}
.hp-reveal {
  animation: rise 0.55s var(--ease);
}
.hp-crosshair-v, .hp-crosshair-h {
  position: absolute; pointer-events: none; background: rgba(0,219,235,0.35); z-index: 4; opacity: 0;
}
.hp-crosshair-v { top: 0; bottom: 0; width: 1px; }
.hp-crosshair-h { left: 0; right: 48px; height: 1px; }

.gadget {
  position: relative; min-height: 64px; border-radius: 12px; overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
  padding: 8px 10px 6px;
}
.gadget canvas, .gadget svg { position: relative; width: 100%; height: 48px; display: block; pointer-events: auto; }
.gadget .ghit { pointer-events: all; }
.gadget .gbar.is-on { filter: brightness(1.2); }
.gadget polyline, .gadget polygon, .gadget .gbar, .gadget .gpin { pointer-events: none; }
.gadget .sheen { display: none; }
.gadget .cap {
  position: static;
  color: var(--mute); font-size: 11px; font-weight: 650; margin-top: 4px;
}
.iso { height: 240px; }

.search-overlay {
  position: fixed; inset: 0; z-index: 130;
  display: none; place-items: start center;
  padding-top: 14vh;
  background: rgba(8,10,14,0.46);
  backdrop-filter: blur(8px);
}
.search-overlay.is-on { display: grid; }
.search-overlay form {
  width: min(640px, calc(100% - 32px));
  background: var(--hp-surface-floating); border-radius: 12px; padding: 10px;
  box-shadow: 0 0 0 1px var(--hp-border-strong), var(--shadow-tip);
}
.search-overlay input {
  width: 100%; min-height: 52px; border: 0; padding: 0 16px;
  font-size: 16px; font-weight: 600;
}
.search-overlay input:focus { outline: none; }
.search-hits { padding: 6px; }
.search-hits button {
  width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px;
  font-weight: 650;
}
.search-hits button:hover { background: rgba(0,219,235,0.1); }

.eq {
  display: flex; align-items: flex-end; gap: 2px; height: 16px; width: 22px;
}
.eq i {
  width: 3px; background: var(--cyan); border-radius: 2px;
  animation: eq 0.9s ease-in-out infinite;
  height: 40%;
}
.eq i:nth-child(2) { animation-delay: 0.12s; height: 70%; }
.eq i:nth-child(3) { animation-delay: 0.24s; height: 50%; }
.eq.is-off i { animation: none; opacity: 0.25; height: 20% !important; }

.wave-mark {
  transform-style: preserve-3d;
  animation: mark-in 1.1s var(--ease) both;
}
.welcome-eq {
  display: flex; justify-content: center; gap: 3px; height: 28px; margin-top: 22px;
}
.welcome-eq i {
  width: 3px; background: var(--cyan); border-radius: 2px;
  animation: eq 0.8s ease-in-out infinite;
}
.welcome-eq i:nth-child(2) { animation-delay: .08s; height: 40%; }
.welcome-eq i:nth-child(3) { animation-delay: .16s; }
.welcome-eq i:nth-child(4) { animation-delay: .22s; height: 70%; }
.welcome-eq i:nth-child(5) { animation-delay: .1s; }
.welcome-eq i:nth-child(6) { animation-delay: .28s; height: 55%; }
.welcome-eq i:nth-child(7) { animation-delay: .14s; }
.welcome-eq i:nth-child(8) { animation-delay: .2s; height: 80%; }
.welcome-eq i:nth-child(9) { animation-delay: .05s; }
.welcome-eq i:nth-child(10) { animation-delay: .18s; height: 45%; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes eq { 50% { height: 100%; } }
@keyframes cam-sweep {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg) scale(1); }
  40% { transform: rotateX(8deg) rotateY(-10deg) scale(1.04); }
  70% { transform: rotateX(-4deg) rotateY(8deg) scale(1.02); }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes iso-sway { 50% { transform: rotateX(58deg) rotateZ(-24deg) translateY(-6px); } }
@keyframes iso-bob { 50% { transform: translateY(-10px); } }
@keyframes mark-in { from { transform: scale(0.4) rotate(-8deg); opacity: 0; } }
@keyframes letter { from { transform: translateY(10px); opacity: 0.15; } to { transform: none; opacity: 1; } }
@keyframes bar { from { transform: translateX(-120%); } to { transform: translateX(280%); } }
@keyframes kpi-glow {
  0%, 100% { text-shadow: none; }
  40% { text-shadow: 0 0 18px rgba(0,219,235,0.35); }
}
.kpi-number.is-counting { animation: kpi-glow 0.8s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .iso-rig { animation: none; transform: rotateX(58deg) rotateZ(-32deg); }
  .hp-cursor, .hp-spot { display: none !important; }
}
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .hp-cursor, html[data-motion="off"] .hp-spot { display: none !important; }
@media (prefers-reduced-transparency: reduce) {
  .search-overlay { backdrop-filter: none; background: rgba(8,10,14,0.78); }
  .hp-dialog { background: rgba(10,12,16,0.72); }
}

@media (max-width: 1100px) {
  .hp-pagehead { grid-template-columns: 1fr; }
  .hp-kpis { text-align: left; }
  .hp-kpi .row { justify-content: flex-start; }
  .hp-nav { justify-content: flex-start; overflow: auto; }
  .hp-grid-2, .hp-grid-3, .hp-work { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hp-brand b { font-size: 16px; }
  .hp-nav { display: none; }
  .hp-main { padding: 20px 16px 92px; }
  .hp-dock { display: flex; }
  .hp-kpis { grid-template-columns: 1fr; gap: 16px; }
  .hp-h1 { font-size: 32px; }
  .hp-chart { height: 240px; }
  .hp-updated { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .hp-user span { display: none; }
  .hp-top-tools .hp-icon-btn:nth-child(2) { display: none; }
}

/* Environment: calm page atmosphere, no sparkle field */
body.hp {
  background:
    radial-gradient(880px 380px at 0% -10%, var(--route-haze), transparent 52%),
    var(--hp-canvas);
}
body.hp::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(720px 420px at 88% 8%, var(--route-haze), transparent 58%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--route-deep) 3.5%, transparent) 100%);
  opacity: 1;
}
body.hp::after { content: none; display: none; }
.hp-app, .hp-main, .hp-top, .hp-dock { position: relative; z-index: 2; }

.hp-tape {
  overflow: hidden;
  border-bottom: 1px solid rgba(18, 203, 217, 0.16);
  background: var(--hp-header);
  color: #8eb8be;
  font-family: var(--figure);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  height: 30px;
  display: flex; align-items: center;
}
.hp-tape-track {
  display: flex; gap: 42px; white-space: nowrap;
  animation: tape 28s linear infinite;
  padding-left: 100%;
}
.hp-tape b { color: #fff; font-weight: 700; letter-spacing: 0; text-transform: none; }
.hp-tape .dot { color: var(--cyan); }

.hp-pagehead { grid-template-columns: 1fr; align-items: start; }
.hp-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 8px;
}
.hp-box {
  --gx: 50%; --gy: 0%;
  --glow: 0, 219, 235;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #f3fcfd, #e4f6f8);
  border-radius: 16px;
  padding: 16px 18px 14px;
  min-height: 108px;
  box-shadow: 0 0 0 1px rgba(0, 184, 198, 0.2);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), filter 0.28s;
}
.hp-box::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(200px circle at var(--gx) var(--gy), rgba(var(--glow), 0.38), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.28), transparent 46%);
  opacity: 0; transition: opacity 0.22s;
}
.hp-box > * { position: relative; z-index: 1; }
.hp-box label, .hp-kpi label, .hp-stat label, .hp-strip-cell label {
  display: block;
  color: var(--mute);
  font-size: 13px; font-weight: 650;
  letter-spacing: -0.01em; text-transform: none;
  margin-bottom: 6px;
}
.hp-box b, .hp-box .fig {
  font-family: var(--figure);
  font-size: clamp(22px, 2.1vw, 32px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1;
}
.hp-box .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-box .hp-meta { margin-top: 8px; }
.hp-box.is-hero {
  --glow: 0, 219, 235;
  grid-column: span 2;
  background:
    radial-gradient(120% 140% at 92% -18%, rgba(0,219,235,0.38), transparent 44%),
    radial-gradient(80% 80% at 0% 120%, rgba(0,219,235,0.16), transparent 50%),
    #06141a;
  color: #e8f8fa;
  box-shadow: 0 0 0 1px rgba(0,219,235,0.38), 0 18px 40px -24px rgba(0,0,0,0.5);
  min-height: 132px;
}
.hp-box.is-hero label { color: #7eeef5; }
.hp-box.is-hero b { font-size: clamp(36px, 4.4vw, 54px); color: #fff; text-shadow: 0 0 28px rgba(0,219,235,0.55); }
.hp-box.is-hero .hp-meta { color: #8eb8be; }
.hp-box.is-dark {
  --glow: 181, 124, 255;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(181,124,255,0.22), transparent 46%),
    #0b1018;
  color: #eee;
  box-shadow: 0 0 0 1px rgba(181,124,255,0.28);
}
.hp-box.is-dark label { color: #c4b0ea; }
.hp-box.tone-cyan {
  --glow: 0, 219, 235;
  background: linear-gradient(165deg, #e9fcff, #c8f3f8);
  box-shadow: 0 0 0 1px rgba(0,184,198,0.32);
}
.hp-box.tone-ice {
  --glow: 0, 219, 235;
  background: linear-gradient(165deg, #f7fdfe, #def4f8);
  box-shadow: 0 0 0 1px rgba(0,184,198,0.18);
}
.hp-box.tone-gold {
  --glow: 240, 196, 90;
  background: linear-gradient(165deg, #fff8e6, #f3e7c2);
  box-shadow: 0 0 0 1px rgba(240,196,90,0.4);
}
.hp-box.tone-violet {
  --glow: 109, 40, 217;
  background: linear-gradient(165deg, #f6f0ff, #e6dcf8);
  box-shadow: 0 0 0 1px rgba(109,40,217,0.22);
}
.hp-box.tone-lime {
  --glow: 198, 240, 74;
  background: linear-gradient(165deg, #f6fce6, #e3f4b8);
  box-shadow: 0 0 0 1px rgba(198,240,74,0.5);
}
.hp-box.tone-teal {
  --glow: 16, 185, 160;
  background: linear-gradient(165deg, #e8faf5, #cdeee6);
  box-shadow: 0 0 0 1px rgba(16,185,160,0.28);
}
.hp-box.tone-signal {
  --glow: 0, 219, 235;
  background: linear-gradient(165deg, #d5f8fc, #b6eef4);
  box-shadow: 0 0 0 1px rgba(0,219,235,0.42);
}
/* L1 ordinary surfaces */
.hp-stat:hover, .hp-strip-cell:hover, .hp-box:hover, .hp-card:hover, .hp-intel:hover {
  box-shadow: 0 0 0 1px var(--hp-border-strong), var(--hp-shadow-raised);
}
.hp-card:hover::before { opacity: 0; }
/* L2 analysis / interactive modules */
.hp-lv2:hover, .hp-dash:hover, .hp-pick:hover, .hp-stat.is-hero:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--route-accent) 40%, var(--hp-border-strong)), var(--hp-shadow-raised);
}
.hp-lv2:hover::before, .hp-dash:hover::before, .hp-stat.is-hero:hover::before, .hp-pick:hover::before {
  opacity: 1;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 0%), rgba(0,219,235,0.12), transparent 58%);
}

.hp-card {
  --gx: 50%; --gy: 0%;
}
.hp-card.is-dash, .hp-dash {
  background:
    radial-gradient(70% 80% at 100% 0%, color-mix(in srgb, var(--route-accent) 16%, transparent), transparent 46%),
    var(--route-deep);
  color: #ececec;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  border-radius: var(--r);
}
.hp-dash { border-radius: var(--r); padding: 18px 20px 16px; position: relative; isolation: isolate; }
.hp-dash .hp-h2, .hp-card.is-dash .hp-h2 { color: #fff; font-size: 17px; letter-spacing: -0.03em; text-transform: none; font-weight: 650; }
.hp-dash .hp-meta, .hp-card.is-dash .hp-meta { color: #8b9098; }
.hp-legend {
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  font-size: 11.5px; color: #b7bcc4; font-weight: 650;
  margin: 4px 0 8px;
}
.hp-legend i {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px;
  box-shadow: 0 0 8px currentColor;
}
.hp-legend .btc { background: #f0c45a; color: #f0c45a; }
.hp-legend .eth { background: #c9cdd4; color: #c9cdd4; }
.hp-legend .sol { background: #8b9098; color: #8b9098; }
.hp-legend .oth { background: #3a3d44; color: #3a3d44; }
.hp-legend .cum { width: 16px; height: 2px; border-radius: 2px; background: #fff; vertical-align: middle; box-shadow: 0 0 8px #fff; }
.hp-legend .oi { width: 16px; height: 2px; border-radius: 2px; background: var(--oi); vertical-align: middle; box-shadow: 0 0 8px var(--oi); }

.hp-range-seg {
  display: inline-flex; background: #1a1b1f; border-radius: 999px; padding: 3px;
  border: 1px solid #2a2c32;
}
.hp-range-seg button {
  min-height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #8b9098; letter-spacing: 0.04em;
}
.hp-range-seg button.is-on {
  background: var(--cyan); color: var(--cyan-ink);
  box-shadow: none;
}

.hp-chart.is-dark {
  background: transparent;
  height: 320px;
  padding-right: 56px;
}
.hp-chart.is-dark .hp-yaxis { color: #8b9098; }
.hp-chart.is-dark .hp-crosshair-v,
.hp-chart.is-dark .hp-crosshair-h { background: rgba(240, 198, 109, 0.45); }
.is-dash .hp-seg, .hp-dash .hp-seg {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.is-dash .hp-seg button, .hp-dash .hp-seg button { color: #b7bcc4; }
.is-dash .hp-seg button.is-on, .hp-dash .hp-seg button.is-on {
  background: var(--hp-cyan); color: var(--hp-ink);
}
.hp-tooltip.is-rich {
  min-width: 210px;
  background: #16171b;
  color: #eee;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.7);
  transform: translate(12px, -12px);
  border-radius: 14px;
  padding: 12px 14px;
}
.hp-tooltip.is-rich b { font-size: 13px; color: #c9cdd4; font-weight: 700; }
.hp-tooltip.is-rich ul { list-style: none; margin: 8px 0 0; padding: 0; }
.hp-tooltip.is-rich li {
  display: flex; justify-content: space-between; gap: 18px;
  font-family: var(--figure); font-size: 12.5px; padding: 3px 0;
  color: #d7dbe2;
}
.hp-tooltip.is-rich li span:last-child { font-weight: 700; }
.hp-tooltip.is-rich .sum {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid #2a2c32;
}
.hp-tooltip.is-rich .gold { color: var(--gold); }
.hp-tooltip.is-rich .vio { color: var(--oi); }
.hp-tooltip.is-rich p { color: #b7bcc4; margin: 6px 0 0; }
.hp-tooltip.is-rich b { font-size: 18px; color: #fff; }

.hp-donut-wrap {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 8px 16px;
  align-items: center;
  min-height: 260px;
}
.hp-donut { position: relative; width: 210px; height: 210px; margin: 0 auto; }
.hp-donut svg { width: 100%; height: 100%; }
.hp-donut .center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.hp-donut .center b {
  font-family: var(--figure); font-size: 26px; letter-spacing: -0.04em; color: #fff;
}
.hp-donut .center small { color: #8b9098; letter-spacing: 0.02em; font-size: 12px; font-weight: 650; }
.hp-share { width: 100%; }
.hp-share table { width: 100%; border-collapse: collapse; }
.hp-share th {
  color: #6f7480; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: left; padding: 0 6px 8px;
}
.hp-share td {
  padding: 10px 6px; border-top: 1px solid #232428;
  font-size: 13px; font-weight: 650; color: #e8eaee;
}
.hp-share td.num { text-align: right; font-family: var(--figure); }
.hp-share .sw { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; box-shadow: 0 0 8px currentColor; }

.hp-ranks { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.hp-bars {
  display: flex; align-items: flex-end; gap: 18px;
  height: 220px; padding: 8px 8px 0;
}
.hp-bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.hp-bars .col b { font-family: var(--figure); font-size: 13px; color: #fff; }
.hp-bars .col span.bar {
  width: 100%; max-width: 72px; border-radius: 8px 8px 4px 4px;
  transform-origin: bottom;
  animation: bar-in 0.9s var(--ease) both;
  box-shadow: 0 0 18px color-mix(in srgb, var(--c, #888) 50%, transparent);
}
.hp-rank-table th { color: #6f7480; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.hp-rank-table td { border-top-color: #232428; color: #e8eaee; }
.hp-rank-table .tier { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.hp-rank-table .gem {
  width: 16px; height: 16px; border-radius: 4px;
  box-shadow: 0 0 10px currentColor;
}

.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: pulse 1.4s ease infinite;
  display: inline-block; margin-right: 6px;
}

.hp-spark { display: none; }
.hp-burst {
  position: fixed; pointer-events: none; z-index: 160; inset: 0;
}
.hp-burst i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #ffe7a3;
  box-shadow: 0 0 10px #f0c45a;
  animation: burst-spark 0.42s var(--ease-out) forwards;
}

.net img { width: 28px; height: 28px; border-radius: 50%; background: #0b0b0d; }

.hp-grid-2.is-dash { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr); }

@keyframes tape { to { transform: translateX(-100%); } }
@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.75; }
}
@keyframes bar-in { from { transform: scaleY(0.08); opacity: 0.2; } }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}
@keyframes burst-spark {
  0% { transform: translate(0,0) scale(0.4); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

@media (max-width: 1100px) {
  .hp-metrics { grid-template-columns: repeat(2, 1fr); }
  .hp-box.is-hero { grid-column: span 2; }
  .hp-donut-wrap, .hp-ranks, .hp-grid-2.is-dash { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hp-metrics { grid-template-columns: 1fr 1fr; }
  .hp-box.is-hero { grid-column: span 2; }
  .hp-brand-mark { width: 64px; min-width: 64px; }
  .hp-brand-mark svg, .hp-brand-mark img { width: 48px; height: 24px; }
}

/* —— Senior desk pass —— */
.hp-stats {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.hp-stat {
  --gx: 50%; --gy: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hp-surface-raised);
  border-radius: var(--r-sm);
  padding: 16px 18px 14px;
  min-height: 112px;
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  transition: background var(--t-tone) var(--ease), box-shadow 0.28s var(--ease);
}
.hp-stat::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.22s;
}
.hp-stat > * { position: relative; z-index: 1; }
.hp-stat .row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hp-stat b {
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1;
}
.hp-stat small { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.hp-stat .hp-meta { margin-top: 8px; }
.hp-stat.is-hero {
  background:
    radial-gradient(120% 140% at 92% -18%, rgba(0,219,235,0.38), transparent 44%),
    #06141a;
  color: #e8f8fa;
  box-shadow: 0 0 0 1px rgba(0,219,235,0.38);
}
.hp-stat.is-hero label { color: #7eeef5; }
.hp-stat.is-hero b { font-size: clamp(34px, 4vw, 48px); color: #fff; }
.hp-stat.is-hero small, .hp-stat.is-hero .hp-meta { color: #8eb8be; }
.hp-stat.is-dark {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(181,124,255,0.22), transparent 46%),
    #0b1018;
  color: #eee;
  box-shadow: 0 0 0 1px rgba(181,124,255,0.28);
}
.hp-stat.is-dark label { color: #c4b0ea; }
.hp-stat.tone-violet { background: linear-gradient(165deg, #f6f0ff, #e6dcf8); box-shadow: 0 0 0 1px rgba(109,40,217,0.22); }
.hp-stat.tone-lime { background: linear-gradient(165deg, #f6fce6, #e3f4b8); box-shadow: 0 0 0 1px rgba(198,240,74,0.5); }
.hp-stat.tone-cyan { background: linear-gradient(165deg, #e9fcff, #c8f3f8); box-shadow: 0 0 0 1px rgba(0,184,198,0.32); }
.hp-stat.tone-gold { background: linear-gradient(165deg, #fff8e6, #f3e7c2); box-shadow: 0 0 0 1px rgba(240,196,90,0.4); }

.hp-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0 18px;
  background: var(--hp-surface-raised);
  border-radius: var(--r-side);
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  overflow: hidden;
}
.hp-strip-cell {
  --gx: 50%; --gy: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  background: transparent;
  border-radius: 0;
  padding: 12px 16px;
  box-shadow: none;
  border-right: 1px solid var(--hp-border);
  transition: background 0.22s var(--ease);
}
.hp-strip-cell:last-child { border-right: 0; }
.hp-strip-cell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.hp-strip-cell > * { position: relative; z-index: 1; }
.hp-strip-cell b {
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.03em;
  display: block;
}
.hp-strip-cell label { margin-bottom: 4px; font-size: 12.5px; }

.hp-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.hp-toolbar .hp-legend { margin: 6px 0 0; }
.hp-range-seg button, .hp-seg button, .hp-btn-tool {
  min-height: 32px; min-width: 36px;
}
.hp-btn-tool {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; border-radius: 10px;
  background: #1a1b1f; color: #c9cdd4; font-size: 12.5px; font-weight: 700;
}
.hp-btn-tool:hover { background: #24262c; color: #fff; }

.hp-pick {
  --gx: 50%; --gy: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hp-surface-raised);
  border-radius: var(--r-side);
  padding: 18px 18px 16px;
  box-shadow: 0 0 0 1px var(--hp-border);
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: flex; flex-direction: column; gap: 8px;
  transition: background var(--t-tone) var(--ease), box-shadow 0.28s var(--ease);
}
.hp-pick:hover {
  box-shadow: 0 0 0 1px var(--hp-border-strong), var(--hp-shadow-raised);
}
.hp-pick.is-selected {
  box-shadow: 0 0 0 1px var(--route-accent);
  background: var(--hp-surface-selected);
}
.hp-pick.is-selected::after {
  content: "Selected";
  position: absolute; top: 14px; right: 14px;
  font-size: 11px; font-weight: 800; color: var(--hp-cyan-bright);
  background: var(--hp-cyan-soft); border-radius: 999px; padding: 4px 8px;
}
.hp-pick .num { font-size: 26px; }

.hp-status {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 0 8px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 700;
  background: var(--hp-cyan-soft); color: var(--hp-cyan-bright);
}
.hp-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.hp-status.is-running { background: rgba(72,212,154,0.14); color: var(--hp-positive); }
.hp-status.is-paused { background: rgba(231,173,76,0.16); color: var(--hp-warning); }
.hp-status.is-warning { background: rgba(231,173,76,0.16); color: var(--hp-warning); }
.hp-status.is-failed { background: rgba(255,104,124,0.14); color: var(--hp-negative); }
.hp-status.is-draft { background: rgba(206,230,229,0.08); color: var(--hp-text-muted); }
.hp-status.is-ready { background: var(--hp-cyan-soft); color: var(--hp-cyan-bright); }
.hp-status.is-deploying { background: var(--hp-gold-soft); color: var(--hp-gold); }
.hp-status.is-done { background: rgba(72,212,154,0.14); color: var(--hp-positive); }

.hp-hint { font-size: 12.5px; color: var(--mute); margin: 4px 0 0; }
.hp-scrollx { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.hp-scrollx .hp-table { min-width: 640px; }

.hp-empty, .hp-error {
  padding: 28px 16px; text-align: center; color: var(--mute);
}
.hp-skel {
  background: linear-gradient(90deg, #d7eef2, #eef9fb, #d7eef2);
  background-size: 200% 100%;
  animation: skel 1.2s linear infinite;
  border-radius: 8px; min-height: 12px;
}
.hp-tip[data-tip] { position: relative; }
.hp-tip[data-tip]:hover::after,
.hp-tip[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #06141a; color: #fff; font-size: 12px; font-weight: 650;
  padding: 6px 8px; border-radius: 8px; white-space: nowrap; z-index: 20;
}

.hp-dock a { min-width: 44px; min-height: 44px; justify-content: center; }
.hp-field .hp-hint { margin-top: 0; }
.hp-chart { max-width: 100%; }
.hp-work { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(240px, 300px); }

.hp-btn:focus-visible, .hp-icon-btn:focus-visible, .hp-nav a:focus-visible,
.hp-seg button:focus-visible, .hp-pick:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
.hp-btn:disabled, .hp-pick:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

html, body.hp { overflow-x: hidden; width: 100%; }
.hp-app, .hp-main { min-width: 0; }

@media (max-width: 1280px) {
  .hp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-nav a { padding: 0 14px; font-size: 15px; }
}
@media (max-width: 1100px) {
  .hp-stats { grid-template-columns: 1fr 1fr; }
  .hp-stat.is-hero { grid-column: span 2; }
  .hp-work { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hp-stats, .hp-strip { grid-template-columns: 1fr 1fr; }
  .hp-stat.is-hero { grid-column: span 2; }
  .hp-pagehead { align-items: flex-start; }
  .hp-h1 { font-size: 28px; }
  .hp-main { padding: 18px 14px 108px; }
  .hp-chart, .hp-chart.is-dark { height: 240px; }
  .hp-donut-wrap { grid-template-columns: 1fr; }
  .hp-ranks { grid-template-columns: 1fr; }
  .hp-card, .hp-dash, .hp-stat { padding: 16px 14px; }
  .hp-table { font-size: 13px; }
  .hp-dialog { padding: 12px; align-items: end; }
  .hp-dialog-card { width: 100%; border-radius: 18px 18px 12px 12px; }
  .hp-tape { display: none; }
  .hp-toast { bottom: 88px; }
}
@media (max-width: 430px) {
  .hp-stats, .hp-metrics { grid-template-columns: 1fr; }
  .hp-strip { grid-template-columns: 1fr 1fr; }
  .hp-stat.is-hero, .hp-box.is-hero { grid-column: span 1; }
  .hp-nav { display: none; }
  .hp-h1 { font-size: 26px; }
}

@keyframes skel { to { background-position: -200% 0; } }

/* —— Motion system —— */
.hp-main { min-height: calc(100dvh - var(--top-h) - 32px); }
.hp-h1 { outline: none; }
.hp-h1.is-reveal {
  animation: reveal-x var(--t-panel) var(--ease-out) both;
}
@keyframes reveal-x {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.hp-main.is-exit {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
  transition: opacity 240ms var(--ease-in), transform 240ms var(--ease-in), filter 240ms var(--ease-in);
  pointer-events: none;
}
.hp-main.is-exit.is-left { transform: translateX(-12px) translateY(4px); }
.hp-main.is-exit.is-right { transform: translateX(12px) translateY(4px); }
.hp-main.is-enter {
  animation: route-in var(--t-route) var(--ease-out) both;
}
.hp-main.is-enter.is-from-left { --enter-x: 18px; }
.hp-main.is-enter.is-from-right { --enter-x: -18px; }
@keyframes route-in {
  from { opacity: 0; transform: translateX(var(--enter-x, 10px)) translateY(6px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.hp-enter-group { animation: group-in 420ms var(--ease-out) both; }
.hp-enter-group:nth-of-type(1) { animation-delay: 20ms; }
.hp-enter-group:nth-of-type(2) { animation-delay: 45ms; }
.hp-enter-group:nth-of-type(3) { animation-delay: 70ms; }
@keyframes group-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.hp-lv2 { position: relative; overflow: hidden; }
.hp-lv2::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.38) 50%, transparent 70%);
  transform: translateX(-120%);
  opacity: 0;
}
.hp-lv2:hover::after { animation: specular 420ms var(--ease-out) both; }
@keyframes specular {
  0% { transform: translateX(-80%); opacity: 0; }
  35% { opacity: 0.45; }
  100% { transform: translateX(80%); opacity: 0; }
}

.hp-btn:hover { transform: translateY(-1px); }
.hp-btn:active { transform: translateY(1px) scale(0.985); }
.hp-btn.is-success { background: #128a45; color: #fff; }
.hp-num {
  font-variant-numeric: tabular-nums;
  font-family: var(--figure);
  display: inline-block; min-width: 1ch;
}
.hp-num.is-up { color: var(--up); }
.hp-num.is-down { color: #dc2626; }
.hp-num.is-flash { animation: num-flash 360ms var(--ease-out); }
@keyframes num-flash {
  0% { background: rgba(198,240,74,0.35); }
  100% { background: transparent; }
}

.hp-chart polyline.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line 720ms var(--ease-out) both;
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.cbar, .sbar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: bar-grow 560ms var(--ease-out) both;
}
@keyframes bar-grow { from { transform: scaleY(0.04); } }
.hp-donut circle { animation: donut-draw 700ms var(--ease-out) both; }
@keyframes donut-draw { from { opacity: 0.2; } }

.hp-chart-state {
  position: absolute; inset: 12px; z-index: 6;
  display: grid; place-items: center;
  background: rgba(12,12,14,0.72);
  color: #d7dbe2; border-radius: 12px; text-align: center; padding: 16px;
}
.hp-chart { position: relative; }
.hp-stale { color: #ca8a04; font-weight: 700; font-size: 12.5px; }

.hp-journey {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px; margin-top: 12px;
}
.hp-journey li {
  list-style: none;
  background: var(--paper);
  border-radius: 10px; padding: 10px 8px;
  font-size: 12px; font-weight: 700; text-align: center;
  box-shadow: 0 0 0 1px var(--line);
  color: var(--mute);
}
.hp-journey { padding: 0; margin: 12px 0 0; }
.hp-journey li.is-on { color: var(--ink); box-shadow: 0 0 0 1px var(--cyan); background: #e9fcff; }
.hp-journey li.is-done { color: var(--up); }

.hp-pipe {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.hp-pipe span {
  min-height: 32px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 700; color: var(--mute);
  box-shadow: 0 0 0 1px var(--line); background: var(--paper);
}
.hp-pipe span.is-on { color: var(--cyan-ink); background: var(--cyan); box-shadow: none; }
.hp-pipe span.is-done { color: var(--up); }

.hp-routes {
  height: 160px; position: relative;
}
.hp-routes svg { width: 100%; height: 100%; }
.hp-routes path {
  fill: none; stroke-width: 2.2;
}
.hp-routes path.is-live {
  stroke: var(--hp-gold);
  stroke-dasharray: none;
}
.hp-routes path.is-idle {
  stroke: var(--hp-faint);
  stroke-dasharray: 6 6;
  animation: dash-flow 1.6s linear infinite;
}
.hp-routes .n-wallet { fill: var(--hp-cyan); }
.hp-routes .n-perps { fill: var(--hp-positive); }
.hp-routes .n-rfq { fill: var(--hp-violet); }
.hp-routes text { fill: var(--hp-muted); font-family: var(--font); font-weight: 650; }
@keyframes dash-flow { to { stroke-dashoffset: -28; } }
.hp-routes.is-paused path { animation: none; }

.hp-alloc { display: grid; gap: 8px; margin-top: 10px; }
.hp-alloc b { display: flex; justify-content: space-between; font-size: 13px; }
.hp-alloc i {
  display: block; height: 8px; border-radius: 99px; background: #d5eef2; overflow: hidden;
}
.hp-alloc i em {
  display: block; height: 100%; width: var(--w, 40%);
  background: linear-gradient(90deg, var(--cyan), #0891a0);
  border-radius: inherit;
  transform-origin: left;
  animation: fill-bar 600ms var(--ease-out) both;
}
@keyframes fill-bar { from { transform: scaleX(0); } }

.hp-attr { display: grid; gap: 8px; }
.hp-attr .row { display: grid; grid-template-columns: 110px 1fr 64px; gap: 8px; align-items: center; font-size: 13px; }
.hp-attr .bar { height: 8px; background: #d7eef2; border-radius: 99px; overflow: hidden; }
.hp-attr .bar i { display: block; height: 100%; background: var(--hp-positive); border-radius: inherit; }

.hp-depth-live { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-family: var(--figure); font-size: 12px; margin-top: 12px; }
.hp-depth-live .row { display: grid; grid-template-columns: 1fr 64px; gap: 8px; align-items: center; padding: 4px 0; }
.hp-depth-live .ask .row { grid-template-columns: 64px 1fr; }
.hp-depth-live .meter { height: 8px; border-radius: 4px; background: #e8eef0; overflow: hidden; }
.hp-depth-live .meter i { display: block; height: 100%; }
.hp-depth-live .bid i { background: rgba(18,138,69,0.55); margin-left: auto; }
.hp-depth-live .ask i { background: rgba(220,38,38,0.45); }
.hp-depth-live span { font-variant-numeric: tabular-nums; color: var(--ink-2); }

.hp-intel {
  margin-top: 16px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--route-tint) 55%, var(--hp-surface-raised));
  border-radius: var(--r-side);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--route-accent) 16%, var(--hp-border));
}
.hp-intel h2 { margin: 0 0 10px; font-size: 16px; }
.hp-intel ol { margin: 0; padding: 0; list-style: none; }
.hp-intel li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.hp-intel time { color: var(--mute); font-family: var(--figure); font-variant-numeric: tabular-nums; }

.hp-ctx {
  position: fixed; z-index: 150; min-width: 180px;
  background: var(--hp-surface-floating); border-radius: 10px; padding: 6px;
  box-shadow: 0 0 0 1px var(--hp-border-strong), var(--shadow-tip); display: none;
  color: var(--hp-text-primary);
}
.hp-ctx.is-on { display: grid; }
.hp-ctx button { text-align: left; padding: 10px 12px; border-radius: 8px; font-weight: 650; }
.hp-ctx button:hover { background: rgba(0,219,235,0.1); }

.hp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%);
  background: var(--hp-surface-floating); z-index: 125; padding: 20px;
  transform: translateX(100%);
  transition: transform var(--t-panel) var(--ease-firm);
  box-shadow: -18px 0 40px -24px rgba(0,0,0,0.55), 0 0 0 1px var(--hp-border-strong);
  color: var(--hp-text-primary);
}
.hp-drawer.is-on { transform: none; }
.hp-drawer-bg {
  position: fixed; inset: 0; background: rgba(8,10,14,0.28); z-index: 124;
  opacity: 0; pointer-events: none; transition: opacity var(--t-ctrl);
}
.hp-drawer-bg.is-on { opacity: 1; pointer-events: auto; }

.hp-toast { display: flex; align-items: center; gap: 10px; }
.hp-toast button { color: var(--cyan); font-weight: 800; }

body.hp.is-dense .hp-main { padding-top: 18px; }
body.hp.is-dense .hp-stat { min-height: 88px; padding: 12px 14px; }

.welcome-lock {
  position: absolute; left: 50%; top: 58%;
  width: 10px; height: 10px; margin: -5px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 18px var(--cyan);
  animation: pulse 1.4s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hp-main.is-exit, .hp-main.is-enter, .hp-h1.is-reveal, .hp-enter-group,
  .hp-lv2:hover::after, .cbar, .sbar, .hp-chart polyline.draw, .hp-donut circle {
    animation: none !important; transition: none !important; transform: none !important;
    clip-path: none !important; filter: none !important; opacity: 1 !important;
  }
  .hp-cursor, .hp-spot { display: none; }
}
@media (max-width: 820px) {
  .hp-journey { grid-template-columns: repeat(3, 1fr); }
  .hp-cursor, .hp-spot { display: none; }
  .hp-drawer { width: 100%; top: auto; height: 72dvh; border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .hp-drawer.is-on { transform: none; }
  .hp-risk { grid-template-columns: 1fr; }
}

/* Depth stack */
.hp-main { background: transparent; }
.hp-card, .hp-stat, .hp-strip-cell { /* working surface */ }
.hp-dash, .hp-stat.is-hero, .hp-card.is-paper { /* analysis */ }
.hp-drawer, .search-overlay form, .hp-ctx { /* inspector / tool */ }
.hp-dialog { /* modal */ }

.hp-table tbody tr.is-linked {
  background: rgba(0,219,235,0.12);
}
.hp-legend span { cursor: pointer; }
.hp-legend span.is-dim { opacity: 0.35; }
.hp-legend span.is-on { color: #fff; }

.hp-note {
  position: absolute; z-index: 5;
  font-size: 10.5px; font-weight: 700; color: var(--hp-text-primary);
  background: var(--hp-surface-floating); border-radius: 6px; padding: 3px 8px;
  box-shadow: 0 0 0 1px var(--hp-gold);
  transform: translate(-50%, -120%);
  pointer-events: none;
}

.hp-risk {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px; margin-top: 10px;
}
.hp-risk .meter {
  height: 6px; border-radius: 99px; background: var(--hp-surface-3); overflow: hidden;
}
.hp-risk .meter i { display: block; height: 100%; background: var(--cyan); }
.hp-risk .meter.is-warn i { background: #ca8a04; }
.hp-risk .meter.is-hot i { background: var(--danger); }
.hp-risk b { font-family: var(--figure); font-variant-numeric: tabular-nums; font-size: 18px; }
.hp-risk label { display: block; font-size: 12px; color: var(--mute); margin-bottom: 4px; }

.hp-iso-legend {
  display: flex; gap: 12px; justify-content: center;
  font-size: 12px; color: var(--mute); margin-top: 8px;
}
.hp-iso-legend b { color: var(--ink); }

.hp-user-menu {
  position: absolute; right: 8px; top: calc(100% + 8px);
  min-width: 220px; background: var(--hp-surface-floating); color: var(--hp-text-primary);
  border-radius: 10px; padding: 8px; z-index: 80;
  box-shadow: 0 0 0 1px var(--hp-border-strong), var(--shadow-tip); display: none;
}
.hp-user-menu.is-on { display: grid; }
.hp-user-menu button {
  text-align: left; padding: 10px 12px; border-radius: 10px; font-weight: 650;
}
.hp-user-menu button:hover { background: rgba(0,219,235,0.1); }
.hp-top-tools { position: relative; }

.hp-btn-danger.is-armed { background: var(--danger); color: #fff; }

html[data-density="compact"] .hp-main { padding-top: 16px; }
html[data-density="compact"] .hp-stat { min-height: 88px; padding: 12px 14px; }
html[data-density="compact"] .hp-card, html[data-density="compact"] .hp-dash { padding: 16px; }

.hp-pagehead { min-height: 92px; }
.hp-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px;
}
.hp-compare article {
  background: var(--paper); border-radius: 12px; padding: 12px;
  box-shadow: 0 0 0 1px var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .hp-main.is-exit, .hp-main.is-enter, .hp-h1.is-reveal, .hp-enter-group,
  .hp-lv2:hover::after, .cbar, .sbar, .hp-chart polyline.draw, .hp-donut circle,
  .gadget .sheen, .hp-routes path, .live-dot {
    animation: none !important; transition: none !important; transform: none !important;
    clip-path: none !important; filter: none !important; opacity: 1 !important;
  }
}

/* HertzPulse ice desk — gold lives only as a pointer-driven rim */
.hp-aura {
  --gx: 50%; --gy: 20%; --g-int: 0; --g-ang: 0deg;
  position: relative;
  isolation: isolate;
  transition: box-shadow 0.22s var(--ease), transform 0.22s var(--ease);
}
.hp-aura .hp-gold {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 6;
}
.hp-gold-edge {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(
    from var(--g-ang),
    rgba(var(--gold-rgb), 0) 0deg,
    rgba(0, 219, 235, calc(var(--g-int) * 0.18)) 40deg,
    rgba(var(--gold-rgb), calc(var(--g-int) * 0.95)) 78deg,
    rgba(243, 213, 138, calc(var(--g-int) * 1)) 96deg,
    rgba(var(--gold-rgb), calc(var(--g-int) * 0.35)) 128deg,
    rgba(var(--gold-rgb), 0) 180deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.hp-gold-fill {
  position: absolute; inset: 2px; border-radius: inherit;
  background: radial-gradient(240px circle at var(--gx) var(--gy), rgba(var(--gold-rgb), calc(var(--g-int) * 0.09)), transparent 64%);
}
.hp-aura > *:not(.hp-gold) { position: relative; z-index: 1; }
.hp-aura.is-hot {
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.42), 0 16px 32px -22px rgba(6, 32, 38, 0.28);
}
.hp-aura.is-selected, .hp-pick.is-selected, .hp-row.is-on {
  box-shadow: 0 0 0 2px var(--route-accent);
}
.hp-aura.is-selected.is-hot, .hp-pick.is-selected.is-hot, .hp-row.is-on.is-hot {
  box-shadow: 0 0 0 1.5px rgba(var(--gold-rgb), 0.92), 0 0 22px rgba(var(--gold-rgb), 0.28);
}
.hp-aura:focus-visible, .hp-aura:focus-within {
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.7);
}
.hp-aura.is-pulse .hp-gold-edge { animation: gold-sweep 480ms var(--ease-out) 1; }
@keyframes gold-sweep {
  from { filter: brightness(1.35); }
  to { filter: none; }
}

/* Surface roles */
.hp-surf {
  background: var(--hp-surface-raised);
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
}
.hp-surf-tint, .hp-card.is-tint {
  background: color-mix(in srgb, var(--route-tint) 78%, var(--hp-surface-raised));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--route-accent) 22%, var(--hp-border));
}
.hp-surf-dark, .hp-card.is-dash, .hp-dash {
  --chart-grid: rgba(180, 198, 208, 0.14);
}
.hp-surf-act, .hp-card.is-action {
  background:
    linear-gradient(180deg, #FFFBF4, var(--hp-surface-raised) 42%);
  box-shadow: 0 0 0 1px rgba(134, 97, 40, 0.16), var(--hp-shadow-quiet);
  border-radius: var(--r-side);
}
.hp-card.is-action .hp-h2, .hp-card.is-action .hp-h3 { color: var(--hp-ink); }
.hp-rail {
  position: relative;
  padding-left: 16px;
}
.hp-rail::before {
  content: "";
  position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 99px;
  background: var(--route-accent);
}
.hp-ico-well {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--route-accent) 14%, #fff);
  color: var(--route-accent);
  flex: none;
}

/* Unique route compositions on the ice desk */
body[data-page="overview"] .hp-pagehead {
  align-items: center;
  margin-bottom: 18px;
}
body[data-page="overview"] .hp-h1 {
  font-size: clamp(26px, 2.6vw, 32px);
  margin: 0;
}
body[data-page="overview"] .hp-kicker { margin-bottom: 4px; }
body[data-page="overview"] .hp-intel { display: none; }
body[data-page="overview"] .hp-board-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}
body[data-page="overview"] .hp-board-kpi {
  position: relative;
  background: var(--hp-surface-raised);
  min-height: 118px;
  padding: 16px 18px 14px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  overflow: hidden;
}
body[data-page="overview"] .hp-board-kpi::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--kpi-rail, var(--hp-cyan));
}
body[data-page="overview"] .hp-board-kpi.tone-cyan {
  --kpi-rail: var(--hp-cyan);
  background: var(--hp-surface-1);
}
body[data-page="overview"] .hp-board-kpi.tone-violet {
  --kpi-rail: var(--hp-violet);
  background: var(--hp-surface-1);
}
body[data-page="overview"] .hp-board-kpi.tone-coral {
  --kpi-rail: var(--hp-negative);
  background: var(--hp-surface-1);
}
body[data-page="overview"] .hp-board-kpi.tone-gold {
  --kpi-rail: var(--hp-gold);
  background: var(--hp-surface-1);
}
body[data-page="overview"] .hp-board-kpi.tone-violet .hp-ico { background: var(--hp-cyan-soft); color: var(--hp-violet); }
body[data-page="overview"] .hp-board-kpi.tone-coral .hp-ico { background: rgba(255,104,124,0.14); color: var(--hp-negative); }
body[data-page="overview"] .hp-board-kpi.tone-gold .hp-ico { background: var(--hp-gold-soft); color: var(--hp-gold); }
body[data-page="overview"] .hp-board-kpi .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
body[data-page="overview"] .hp-board-kpi label {
  font-size: 10px;
  font-weight: 800;
  color: var(--hp-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-page="overview"] .hp-board-kpi b {
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 700;
}
body[data-page="overview"] .hp-board-kpi .chg {
  font-size: 13px;
  font-weight: 750;
}
body[data-page="overview"] .hp-board-kpi .hp-meta {
  margin-top: 8px;
  font-size: 12.5px;
}
.hp-ico {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--hp-cyan-soft);
  color: var(--hp-cyan);
  flex: none;
}
.hp-ico svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.hp-board-range {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 0 12px;
  background: var(--hp-surface-2);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--hp-border-default);
  font-size: 12.5px; font-weight: 650; color: var(--hp-text-secondary);
}
.hp-board-range svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.hp-board-range i {
  width: 1px; height: 16px; background: var(--line);
}
.hp-board-range b { color: var(--ink); font-weight: 750; }

body[data-page="overview"] .hp-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.72fr);
  gap: 14px;
  align-items: start;
}
.hp-board-main, .hp-board-side { display: grid; gap: 14px; }
body[data-page="overview"] .hp-board-card {
  background: var(--hp-surface-raised);
  border-radius: var(--r);
  padding: 20px 22px 18px;
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  overflow: hidden;
}
body[data-page="overview"] #vol-card,
body[data-page="overview"] .hp-board-card.is-dash {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(18, 203, 217, 0.14), transparent 46%),
    var(--route-deep);
  color: #ececec;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07);
}
body[data-page="overview"] #vol-card .hp-h2,
body[data-page="overview"] #vol-card .hp-board-figure b { color: #fff; }
body[data-page="overview"] #vol-card .hp-meta { color: #93A9AD; }
body[data-page="overview"] .hp-board-card .hp-h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.hp-board-pnl {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
}
.hp-board-figure {
  margin: 10px 0 6px;
}
.hp-board-figure b {
  font-family: var(--figure);
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 750;
  letter-spacing: -0.05em;
  line-height: 1;
}
body[data-page="overview"] .hp-board-chart {
  height: 188px;
  padding-right: 40px;
}
body[data-page="overview"] .hp-board-chart.is-dark { height: 188px; }
body[data-page="overview"] .hp-board-chart .cbar { display: none; }
body[data-page="overview"] .hp-note {
  background: var(--hp-surface-floating);
  color: var(--hp-text-primary);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--hp-gold);
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  transform: translate(-50%, -140%);
}
.hp-mix3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.hp-mix3 .cell {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 12px 14px 12px 16px;
  border-left: 4px solid var(--cyan);
  color: #ececec;
}
#vol-card .hp-mix3 label { color: #93A9AD; }
#vol-card .hp-mix3 b { color: #fff; }
.hp-mix3 .cell.btc { border-left-color: #f0c45a; }
.hp-mix3 .cell.eth { border-left-color: #3b82f6; }
.hp-mix3 .cell.sol { border-left-color: #22c55e; }
body[data-page="overview"] .hp-strip {
  margin: 0 0 14px;
}
body[data-page="overview"] .hp-strip-cell {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.hp-mix3 label {
  display: block;
  font-size: 12px; font-weight: 650; color: var(--mute);
}
.hp-mix3 b {
  font-family: var(--figure);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.04em;
}
.hp-board-table { min-width: 520px; }
.hp-board-table th {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hp-board-table td { padding: 12px 8px; }
.hp-board-table .mute { color: var(--mute); font-weight: 600; }
.stars {
  color: var(--gold);
  letter-spacing: 1px;
  font-size: 13px;
  white-space: nowrap;
}
.stars b {
  color: var(--mute);
  font-family: var(--figure);
  font-weight: 650;
  letter-spacing: 0;
  margin-left: 6px;
}
.hp-week {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 168px;
  margin-top: 18px;
  padding: 0 4px;
}
.hp-week .col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
}
.hp-week .bar {
  width: 26px;
  height: var(--h, 40%);
  border-radius: 8px 8px 4px 4px;
  background: #e7eef1;
}
.hp-week .col.is-on .bar {
  background: var(--hp-gold);
  box-shadow: 0 10px 20px -8px rgba(214, 166, 74, 0.55);
}
.hp-week label {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--mute);
}
.hp-week .col.is-on label { color: var(--ink); }
.hp-week .col.is-on b {
  font-family: var(--figure);
  font-size: 12px;
  font-weight: 750;
  color: var(--hp-text-primary);
  background: var(--hp-surface-floating);
  border-radius: 6px;
  padding: 3px 7px;
  box-shadow: 0 0 0 1px var(--hp-gold);
}
.hp-gauge {
  position: relative;
  margin-top: 4px;
}
.hp-gauge svg { width: 100%; height: auto; display: block; }
.hp-gauge .track { stroke: #e6eef0; }
.hp-gauge .read {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
}
.hp-gauge .read b {
  font-family: var(--figure);
  font-size: 36px;
  font-weight: 750;
  letter-spacing: -0.05em;
  display: block;
  line-height: 1;
}
.hp-gauge .read p {
  margin: 6px 0 4px;
  color: var(--mute);
  font-size: 12.5px;
}
.hp-link {
  color: var(--cyan-deep);
  font-size: 13px;
  font-weight: 750;
}
.hp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-assist { text-align: center; }
.hp-assist .hp-h2 { text-align: left; }
.hp-assist-orb {
  width: 92px; height: 92px;
  margin: 18px auto 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #b8fbff 0%, #00dbeb 42%, #007f8c 100%);
  box-shadow:
    0 18px 36px -14px rgba(0, 219, 235, 0.6),
    0 0 0 10px rgba(0, 219, 235, 0.08);
  position: relative;
}
.hp-assist-orb i {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.55), transparent 58%);
}
.hp-assist-form {
  display: flex; align-items: center; gap: 8px;
  background: #f4f8f9;
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 184, 198, 0.1);
}
.hp-assist-form input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  min-height: 36px;
  font-size: 13.5px;
}
.hp-assist-form input:focus { outline: none; }
.hp-assist-form .hp-btn {
  width: 36px; min-height: 36px; padding: 0; border-radius: 50%;
}
.hp-assist-form .hp-btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

body[data-page="overview"] .hp-card.tone-gold {
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border-default);
}
body[data-page="overview"] .hp-card.tone-emerald {
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border-default);
}
body[data-page="overview"] .hp-assist {
  background: var(--hp-surface-1);
}

body[data-page="whales"] .hp-invest {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
body[data-page="whales"] .hp-wallet-rail {
  background: color-mix(in srgb, var(--route-accent) 8%, var(--hp-surface-1));
  border-radius: var(--r-side);
}
body[data-page="whales"] #whale-table .hp-row.is-on {
  background: var(--hp-surface-selected);
  box-shadow: inset 2px 0 0 var(--hp-violet), 0 0 0 1px color-mix(in srgb, var(--hp-cyan) 45%, transparent);
}
body[data-page="whales"] #wallet-inspector {
  background: color-mix(in srgb, var(--route-accent) 8%, var(--hp-surface-1));
}
body[data-page="whales"] .hp-kpi:nth-child(1) b { color: var(--hp-cyan-deep); }
body[data-page="whales"] .hp-kpi:nth-child(2) b { color: var(--hp-violet); }
body[data-page="whales"] .hp-kpi:nth-child(3) b { color: var(--hp-gold-deep); }
.hp-timeline { list-style: none; padding: 0; margin: 12px 0 0; background: #080E16; border-radius: 10px; overflow: hidden; }
.hp-timeline li {
  display: grid; grid-template-columns: 54px 1fr; gap: 10px;
  padding: 8px 12px; color: #d7dbe8;
  font-size: 13px;
}
.hp-timeline li:nth-child(even) { background: rgba(255,255,255,0.04); }
.hp-timeline time { color: var(--hp-cyan); font-family: var(--figure); font-size: 11px; }
.hp-timeline span { color: #ececf4; }
.hp-whale-pos { margin-top: 14px; }
.hp-whale-pos table { width: 100%; }
body[data-page="whales"] .hp-flow {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(115, 87, 213, 0.22), transparent 46%),
    var(--route-deep);
  color: #ececec;
}
body[data-page="whales"] .hp-flow .hp-h2 { color: #fff; }
body[data-page="whales"] .hp-flow .hp-sub { color: #b7bcc8; }
.hp-routes {
  margin-top: 14px;
  height: 176px;
  background: color-mix(in srgb, var(--route-deep) 8%, var(--hp-surface));
  border-radius: var(--r-side);
  padding: 10px 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--route-accent) 18%, transparent);
}

body[data-page="copy-trading"] .hp-mandate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
}
body[data-page="copy-trading"] .hp-pick.fam-trend { background: color-mix(in srgb, #48D49A 8%, var(--hp-surface-1)); }
body[data-page="copy-trading"] .hp-pick.fam-mean { background: color-mix(in srgb, #659CFF 8%, var(--hp-surface-1)); }
body[data-page="copy-trading"] .hp-pick.fam-basis { background: color-mix(in srgb, #9878F5 8%, var(--hp-surface-1)); }
body[data-page="copy-trading"] .hp-pick.is-selected { box-shadow: 0 0 0 2px var(--route-accent); }
body[data-page="copy-trading"] .hp-perf {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(22, 140, 96, 0.18), transparent 46%),
    var(--route-deep);
  color: #ececec;
}
body[data-page="copy-trading"] .hp-perf .hp-h2 { color: #fff; }
body[data-page="copy-trading"] .hp-perf .hp-sub { color: #b7c8c2; }
body[data-page="copy-trading"] .hp-card.is-action { }

.hp-journey {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px; margin-top: 12px; padding: 0;
}
.hp-journey li {
  list-style: none;
  background: var(--hp-surface-soft);
  border-radius: 8px; padding: 10px 8px;
  font-size: 12px; font-weight: 700; text-align: center;
  box-shadow: 0 0 0 1px var(--hp-border);
  color: var(--mute);
}
.hp-journey li:nth-child(1) { --stage: var(--hp-cyan); }
.hp-journey li:nth-child(2) { --stage: var(--hp-warning); }
.hp-journey li:nth-child(3) { --stage: var(--hp-info); }
.hp-journey li:nth-child(4) { --stage: var(--hp-violet); }
.hp-journey li:nth-child(5) { --stage: var(--hp-positive); }
.hp-journey li:nth-child(6) { --stage: var(--hp-gold); }
.hp-journey li.is-on { color: var(--hp-text-primary); box-shadow: 0 0 0 1px var(--stage); background: color-mix(in srgb, var(--stage) 16%, var(--hp-surface-2)); }
.hp-journey li.is-done {
  color: color-mix(in srgb, var(--stage) 70%, var(--hp-text-primary));
  background: color-mix(in srgb, var(--stage) 12%, var(--hp-surface-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--stage) 35%, transparent);
}

body[data-page="ai-agents"] .hp-lab {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 14px;
}
body[data-page="ai-agents"] .hp-arch-rail {
  background: color-mix(in srgb, var(--route-accent) 8%, var(--hp-surface-1));
}
body[data-page="ai-agents"] .hp-arch .hp-pick.is-selected {
  background: var(--hp-surface-selected);
  box-shadow: 0 0 0 1px var(--hp-cyan);
}
body[data-page="ai-agents"] .hp-arch .fam-basis { box-shadow: inset 3px 0 0 #0C857B; }
body[data-page="ai-agents"] .hp-arch .fam-sweep { box-shadow: inset 3px 0 0 #7357D5; }
body[data-page="ai-agents"] .hp-arch .fam-guard { box-shadow: inset 3px 0 0 #4657C9; }
body[data-page="ai-agents"] .hp-arch .fam-guard.is-selected { box-shadow: inset 3px 0 0 #12CBD9, 0 0 0 2px #12CBD9; }
body[data-page="ai-agents"] .hp-machine-card {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(70, 87, 201, 0.22), transparent 46%),
    var(--route-deep);
  color: #ececec;
}
body[data-page="ai-agents"] .hp-machine-card .hp-h2 { color: #fff; }
body[data-page="ai-agents"] .hp-machine-card .hp-sub { color: #b7bcc8; }
.hp-machine { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; position: relative; }
.hp-machine span {
  position: relative;
  text-align: center; padding: 10px 6px; border-radius: 8px;
  font-size: 11.5px; font-weight: 700; color: #c9cdd8;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.hp-machine span:nth-child(1) { --stage: #8b9098; }
.hp-machine span:nth-child(2) { --stage: #347FD1; }
.hp-machine span:nth-child(3) { --stage: #7357D5; }
.hp-machine span:nth-child(4) { --stage: #12CBD9; }
.hp-machine span:nth-child(5) { --stage: #168C60; }
.hp-machine span.is-on { color: #fff; background: color-mix(in srgb, var(--stage) 55%, #111); border-color: var(--stage); }
.hp-machine span.is-done { color: var(--stage); border-color: color-mix(in srgb, var(--stage) 40%, transparent); }
.hp-machine span:not(:last-child)::after {
  content: "";
  position: absolute; right: -7px; top: 50%;
  width: 8px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--hp-cyan-bright));
  transform: translateY(-50%);
  pointer-events: none;
}
body[data-page="ai-agents"] .hp-card.is-action #killSwitch + .hp-hint { color: var(--hp-negative); }
body[data-page="ai-agents"] .hp-card.is-action #invCap + .hp-hint { color: var(--hp-positive); }
.hp-log {
  font-family: var(--figure); font-size: 13px; line-height: 1.8; color: var(--ink-2);
  background: #F3F5FA; border-radius: 10px; padding: 10px 12px;
  box-shadow: inset 3px 0 0 var(--route-accent);
}
.hp-log .ok { color: var(--hp-positive); font-weight: 700; }
.hp-log .note { color: var(--hp-info); font-weight: 700; }
.hp-log .warn { color: var(--hp-warning); font-weight: 700; }
.hp-log .err { color: var(--hp-negative); font-weight: 700; }
.hp-log time, .hp-log .ts { color: var(--hp-faint); font-weight: 600; }

body[data-page="vaults"] .hp-underwrite {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 340px;
  gap: 14px;
}
body[data-page="vaults"] .hp-pick.fam-delta { background: color-mix(in srgb, #2EC4B6 8%, var(--hp-surface-1)); }
body[data-page="vaults"] .hp-pick.fam-basis { background: color-mix(in srgb, #659CFF 8%, var(--hp-surface-1)); }
body[data-page="vaults"] .hp-pick.fam-rwa { background: color-mix(in srgb, #D4B36B 8%, var(--hp-surface-1)); }
body[data-page="vaults"] .hp-pick .num { color: var(--hp-gold-deep); }
body[data-page="vaults"] .hp-hist {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(12, 133, 123, 0.2), transparent 46%),
    var(--route-deep);
  color: #ececec;
}
body[data-page="vaults"] .hp-hist .hp-h2 { color: #fff; }
body[data-page="vaults"] .hp-hist .hp-sub { color: #b7c8c2; }
.hp-apy-stack { display: grid; gap: 8px; margin-top: 10px; }
.hp-apy-stack i { display: block; height: 8px; border-radius: 99px; background: #d7eef2; overflow: hidden; }
.hp-apy-stack i:nth-child(2) em { background: #4657C9; }
.hp-apy-stack i:nth-child(4) em { background: #168C60; }
.hp-apy-stack i:nth-child(6) em { background: var(--hp-gold); }
.hp-apy-stack i em { display: block; height: 100%; background: linear-gradient(90deg, #0C857B, var(--hp-gold)); }
.hp-grade {
  display: inline-flex; min-height: 22px; padding: 0 8px; border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
}
.hp-grade.a { background: rgba(22,140,96,0.14); color: #0f5c3e; }
.hp-grade.b { background: rgba(212,147,50,0.16); color: #866128; }
.hp-grade.c { background: rgba(221,83,97,0.14); color: #9f2434; }

body[data-page="markets"] .hp-desk {
  display: grid;
  grid-template-columns: 200px minmax(0, 1.15fr) 248px 292px;
  grid-template-rows: minmax(520px, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  min-height: calc(100dvh - 132px);
}
body[data-page="markets"] .hp-pagehead { display: none; }
body[data-page="markets"] .hp-screener { grid-column: 1; grid-row: 1; padding: 14px 12px; border-radius: var(--r-side); }
body[data-page="markets"] .hp-mkt-chart {
  grid-column: 2; grid-row: 1; padding: 16px;
  display: flex; flex-direction: column;
}
body[data-page="markets"] .hp-mkt-chart .hp-chart,
body[data-page="markets"] .hp-mkt-chart .hp-chart.is-dark {
  flex: 1;
  min-height: 240px;
  height: auto;
}
body[data-page="markets"] .hp-bookmod {
  grid-column: 3; grid-row: 1; padding: 12px 12px 10px;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--route-tint) 42%, #fff);
}
body[data-page="markets"] .hp-ticket { grid-column: 4; grid-row: 1; }
body[data-page="markets"] .hp-mkt-floor { grid-column: 1 / -1; grid-row: 2; padding: 12px 16px; }
body[data-page="markets"] .hp-mkt-chart.is-dash .hp-h1,
body[data-page="markets"] .hp-mkt-chart.is-dash .px { color: #fff; }
body[data-page="markets"] .hp-mkt-chart.is-dash .hp-meta,
body[data-page="markets"] .hp-mkt-chart.is-dash .hp-sub { color: #93A9AD; }
.hp-mkt-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.hp-mkt-head h1 { font-size: 26px; margin: 0; }
.hp-mkt-head .px { font-family: var(--figure); font-size: 26px; letter-spacing: -0.04em; }
.hp-ob {
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
}
.hp-ob-head, .hp-ob-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-items: center;
}
.hp-ob-head { color: var(--hp-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 0 6px; }
.hp-ob-asks, .hp-ob-bids { display: grid; gap: 1px; flex: 1; }
.hp-ob-row {
  position: relative;
  min-height: 22px;
  padding: 3px 6px;
  border-radius: 4px;
  z-index: 0;
}
.hp-ob-row i {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
}
.hp-ob-row.ask { color: var(--hp-negative); }
.hp-ob-row.ask i { background: linear-gradient(270deg, rgba(221,83,97,0.22), transparent); width: var(--d, 40%); left: auto; right: 0; }
.hp-ob-row.bid { color: var(--hp-positive); }
.hp-ob-row.bid i { background: linear-gradient(90deg, rgba(22,140,96,0.22), transparent); width: var(--d, 40%); }
.hp-ob-row .px { text-align: center; font-weight: 700; color: var(--hp-ink); }
.hp-ob-row .qty { font-weight: 650; }
.hp-ob-row .qty:last-child { text-align: right; }
.hp-ob-row:hover, .hp-ob-row.is-hot {
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.85);
}
.hp-ob-spread {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 8px 0; padding: 8px 10px;
  background: var(--route-deep); color: #fff; border-radius: 8px;
}
.hp-ob-spread b { font-size: 16px; letter-spacing: -0.03em; color: var(--hp-cyan-bright); }
.hp-ob-spread small { color: #93A9AD; font-size: 11px; }
.hp-ticket-est { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12.5px; color: var(--mute); margin: 8px 0; }
.hp-pct { display: flex; gap: 6px; margin: 8px 0; }
.hp-pct button {
  flex: 1; min-height: 32px; border-radius: 8px;
  border: 1px solid var(--hp-border); color: var(--ink-2); font-size: 12px; font-weight: 700;
  background: var(--hp-surface);
}
.hp-pct button.is-on { background: var(--hp-cyan-soft); color: var(--hp-cyan-bright); border-color: var(--hp-cyan); }
.hp-ticket.is-buy .hp-btn-primary { background: var(--hp-positive); }
.hp-ticket.is-sell .hp-btn-primary { background: var(--hp-negative); }
.hp-ticket.is-buy .hp-seg button.is-on { background: var(--hp-positive); color: #fff; }
.hp-ticket.is-sell .hp-seg button.is-on { background: var(--hp-negative); color: #fff; }
.hp-mkt-floor .hp-tabs { margin: 0 0 8px; justify-content: flex-start; }
.hp-tape-mini { display: grid; gap: 4px; font-family: var(--figure); font-size: 12.5px; }
.hp-tape-mini .row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--hp-border); }

body[data-page="portfolio"] .hp-book {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 320px;
  gap: 14px;
}
body[data-page="portfolio"] .hp-equity {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(52, 112, 207, 0.22), transparent 46%),
    var(--route-deep);
  color: #ececec;
}
body[data-page="portfolio"] .hp-equity .hp-h2 { color: #fff; }
body[data-page="portfolio"] .hp-equity .hp-sub { color: #b7bcc8; }
body[data-page="portfolio"] .hp-xrow { border-radius: 8px; padding: 8px 10px; margin: 0 -4px; }
body[data-page="portfolio"] .hp-xrow.btc { background: color-mix(in srgb, #D4B36B 10%, transparent); }
body[data-page="portfolio"] .hp-xrow.eth { background: color-mix(in srgb, #9878F5 10%, transparent); }
body[data-page="portfolio"] .hp-xrow.sol { background: color-mix(in srgb, #48D49A 10%, transparent); }
body[data-page="portfolio"] .hp-xrow.vaults { background: color-mix(in srgb, #2EC4B6 10%, transparent); }
body[data-page="portfolio"] .hp-xrow.cash { background: color-mix(in srgb, #41565C 16%, transparent); }
.hp-heat i.btc { background: color-mix(in srgb, #D4B36B 55%, #0C1920); }
.hp-heat i.eth { background: color-mix(in srgb, #9878F5 50%, #0C1920); }
.hp-heat i.sol { background: color-mix(in srgb, #48D49A 50%, #0C1920); }
.hp-heat i.vaults { background: color-mix(in srgb, #2EC4B6 50%, #0C1920); }
.hp-heat i.cash { background: color-mix(in srgb, #41565C 70%, #0C1920); }
body[data-page="portfolio"] .hp-table tr.is-long { background: color-mix(in srgb, var(--hp-positive) 6%, transparent); }
body[data-page="portfolio"] .hp-table tr.is-short { background: color-mix(in srgb, var(--hp-negative) 6%, transparent); }
body[data-page="portfolio"] .hp-table tr.is-on { box-shadow: inset 3px 0 0 var(--route-accent); }

.hp-sparkline { width: 100%; height: 48px; display: block; }
.gadget .cap { font-size: 10.5px; color: var(--hp-text-faint); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-arch { display: grid; gap: 6px; }
.hp-arch button, .hp-arch .hp-pick {
  text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--hp-border); background: var(--hp-surface-raised); color: var(--ink);
}
.hp-arch .hp-pick.is-selected { border-color: var(--route-accent); background: var(--hp-surface-selected); }
.hp-arch .hp-pick.is-selected::after { display: none; }

.hp-mark {
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  border-radius: 8px; margin-right: 8px; vertical-align: middle;
  background: var(--hp-cyan-soft);
  color: var(--route-accent);
}
.hp-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1280px) {
  body[data-page="markets"] .hp-desk {
    grid-template-columns: 180px minmax(0, 1fr) 280px;
    grid-template-rows: auto minmax(420px, 1fr) auto;
  }
  body[data-page="markets"] .hp-screener { grid-column: 1; grid-row: 1 / 3; }
  body[data-page="markets"] .hp-mkt-chart { grid-column: 2; grid-row: 1 / 3; }
  body[data-page="markets"] .hp-bookmod { grid-column: 3; grid-row: 1; min-height: 280px; }
  body[data-page="markets"] .hp-ticket { grid-column: 3; grid-row: 2; }
  body[data-page="markets"] .hp-mkt-floor { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 1100px) {
  body[data-page="overview"] .hp-board,
  body[data-page="whales"] .hp-invest,
  body[data-page="copy-trading"] .hp-mandate,
  body[data-page="ai-agents"] .hp-lab,
  body[data-page="vaults"] .hp-underwrite,
  body[data-page="markets"] .hp-desk,
  body[data-page="portfolio"] .hp-book { grid-template-columns: 1fr; grid-template-rows: none; }
  body[data-page="overview"] .hp-board-kpis { grid-template-columns: 1fr 1fr; }
  .hp-board-pnl { grid-template-columns: 1fr; }
  body[data-page="markets"] .hp-screener,
  body[data-page="markets"] .hp-mkt-chart,
  body[data-page="markets"] .hp-bookmod,
  body[data-page="markets"] .hp-ticket,
  body[data-page="markets"] .hp-mkt-floor { grid-column: auto; grid-row: auto; }
  .hp-ob { min-height: 280px; }
}
@media (max-width: 820px) {
  body[data-page="markets"] .hp-desk { display: flex; flex-direction: column; min-height: 0; }
  body[data-page="markets"] .hp-screener { order: 6; }
  body[data-page="markets"] .hp-mkt-chart { order: 1; }
  body[data-page="markets"] .hp-ticket { order: 2; }
  body[data-page="markets"] .hp-bookmod { order: 3; }
  body[data-page="markets"] .hp-mkt-floor { order: 4; }
  .hp-nav { display: none; }
  .hp-board-range { width: 100%; justify-content: space-between; }
  .hp-strip { grid-template-columns: repeat(3, 1fr); }
  .hp-strip-cell:nth-child(3) { border-right: 0; }
  .hp-journey { grid-template-columns: repeat(3, 1fr); }
  .hp-machine { grid-template-columns: repeat(3, 1fr); }
  body.hp { --r: 12px; }
}
@media (max-width: 430px) {
  body[data-page="overview"] .hp-board-kpis,
  .hp-mix3 { grid-template-columns: 1fr; }
  .hp-strip { grid-template-columns: 1fr 1fr; }
}

@media (pointer: coarse) {
  .hp-aura.is-hot, .hp-aura:active {
    box-shadow: 0 0 0 1.5px rgba(var(--gold-rgb), 0.9), 0 0 18px rgba(var(--gold-rgb), 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-gold-edge { animation: none !important; }
  .hp-aura { --g-ang: 0deg; }
  .hp-card, .hp-pick, .hp-stat, .hp-btn, .hp-journey li, .hp-machine span {
    transition: none !important;
  }
  .hp-signal { animation: none !important; }
}

/* ============================================================
   OBSIDIAN PULSE — petroleum terminal materials
   ============================================================ */
body.hp {
  background:
    radial-gradient(900px 420px at 8% -18%, var(--route-haze), transparent 52%),
    var(--hp-void);
}
body.hp::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(206,230,229,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206,230,229,0.018) 1px, transparent 1px),
    radial-gradient(720px 380px at 92% 0%, var(--route-haze), transparent 58%);
  background-size: 72px 72px, 72px 72px, auto;
  opacity: 1;
}
body.hp::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.hp-app { background: transparent; }
.hp-main {
  padding: 18px clamp(14px, 2.4vw, 32px) 48px;
  background: transparent;
}

.hp-brand-mark { background: #03080c; box-shadow: inset -1px 0 0 rgba(23,212,227,0.16); }
.hp-brand b { color: var(--hp-text-primary); font-size: 16px; letter-spacing: 0.02em; }
.hp-icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--hp-workspace-raised);
  color: var(--hp-silver);
  box-shadow: 0 0 0 1px var(--hp-border-subtle);
}
.hp-icon-btn:hover { background: var(--hp-surface-3); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.45); }
.hp-icon-btn.is-light {
  background: var(--hp-surface-3); color: var(--hp-text-primary);
  border: 1px solid var(--hp-border-default); box-shadow: none;
}
.hp-user {
  height: 36px; border-radius: 8px;
  background: var(--hp-workspace-raised);
  box-shadow: 0 0 0 1px var(--hp-border-subtle);
  color: var(--hp-text-primary);
}
.hp-user i { background: var(--hp-cyan); color: var(--hp-void); }

.hp-telem {
  height: 32px; overflow: visible;
  background: var(--hp-workspace);
  border-bottom: 0;
  color: var(--hp-text-secondary);
  position: relative;
}
.hp-telem-row {
  height: 32px;
  display: flex; align-items: center; gap: 22px;
  padding: 0 18px;
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
.hp-telem .cell { display: inline-flex; align-items: baseline; gap: 8px; }
.hp-telem label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--hp-text-faint);
}
.hp-telem b { color: var(--hp-text-primary); font-weight: 650; }
.hp-telem .vol label { color: var(--hp-cyan); }
.hp-telem .oi label { color: var(--hp-violet); }
.hp-telem .fund label { color: var(--hp-positive); }
.hp-telem .liq label { color: var(--hp-negative); }
.hp-telem .lat label { color: var(--hp-blue); }
.hp-signal {
  display: block; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--hp-cyan) 18%, var(--hp-violet) 46%, var(--hp-gold) 72%, transparent 100%);
  background-size: 220% 100%;
  opacity: 0.7;
  animation: signal-flow 8s linear infinite;
}
@keyframes signal-flow { to { background-position: 220% 0; } }

.hp-kicker {
  color: var(--hp-text-muted);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.hp-h1 { color: var(--hp-text-primary); font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 4px; }
.hp-lede { color: var(--hp-text-muted); font-size: 13.5px; max-width: 68ch; }
.hp-h2 { color: var(--hp-text-primary); font-size: 15px; }
.hp-h3 { color: var(--hp-text-primary); }
.hp-meta, .hp-sub { color: var(--hp-text-muted); }
.hp-pagehead { min-height: 0; margin-bottom: 14px; }

.hp-card, .hp-stat, .hp-pick, .hp-intel, .hp-board-card, .hp-board-kpi {
  background: var(--hp-surface-1);
  color: var(--hp-text-primary);
  border-radius: var(--r-sm);
  box-shadow:
    0 0 0 1px var(--hp-border-default),
    inset 0 1px 0 rgba(206, 230, 229, 0.045);
}
.hp-card.is-paper,
.hp-card.is-tint,
.hp-surf, .hp-surf-tint {
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border-default), inset 0 1px 0 rgba(206,230,229,0.04);
}
.hp-card.is-dash, .hp-dash, .hp-surf-dark {
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--route-accent) 12%, transparent), transparent 50%),
    var(--hp-surface-deep);
  color: var(--hp-text-primary);
  box-shadow: 0 0 0 1px var(--hp-border-strong), inset 0 1px 0 rgba(206,230,229,0.05);
  border-radius: var(--r);
}
.hp-card.is-action, .hp-surf-act {
  background: var(--hp-surface-2);
  box-shadow: 0 0 0 1px var(--hp-border-strong), inset 0 1px 0 rgba(206,230,229,0.06);
}
.hp-card.is-action .hp-h2, .hp-card.is-action .hp-h3 { color: var(--hp-text-primary); }

.hp-stat, .hp-board-kpi {
  min-height: 0; padding: 12px 14px 10px;
  background: var(--hp-surface-1);
}
.hp-board-kpi::after { display: none !important; }
.hp-board-kpi.tone-cyan,
.hp-board-kpi.tone-violet,
.hp-board-kpi.tone-coral,
.hp-board-kpi.tone-gold,
.hp-stat.tone-cyan, .hp-stat.tone-violet, .hp-stat.tone-gold, .hp-stat.tone-lime {
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border-default), inset 0 1px 0 rgba(206,230,229,0.04);
}
.hp-stat label, .hp-board-kpi label, .hp-kpi label {
  color: var(--hp-text-muted);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.hp-stat b, .hp-board-kpi b, .hp-kpi b { color: var(--hp-text-primary); }
.hp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hp-cyan); box-shadow: 0 0 8px currentColor;
}
.hp-dot.violet { background: var(--hp-violet); color: var(--hp-violet); }
.hp-dot.coral { background: var(--hp-negative); color: var(--hp-negative); }
.hp-dot.live { background: var(--hp-positive); color: var(--hp-positive); }
.hp-mini { margin-top: 6px; }
.hp-mini.gadget, .gadget {
  background: transparent; box-shadow: none; padding: 0; min-height: 40px; border-radius: 0;
}
.hp-mini .cap, .gadget .cap { color: var(--hp-text-faint); font-size: 10.5px; }

.hp-strip {
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border-default);
}
.hp-strip-cell { border-right-color: var(--hp-border-subtle); background: transparent; }
.hp-strip-cell b { color: var(--hp-text-primary); }
.hp-strip-cell label { color: var(--hp-text-muted); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; font-weight: 800; }

.hp-btn { border-radius: var(--r-ctrl); min-height: 36px; }
.hp-btn-primary {
  background: linear-gradient(180deg, #1AD8E6, var(--hp-cyan-deep));
  color: var(--hp-void);
  box-shadow: 0 8px 18px -12px rgba(23,212,227,0.55), inset 0 1px 0 rgba(255,255,255,0.28);
}
.hp-btn-primary:hover { filter: brightness(1.08); transform: none; }
.hp-btn-cyan {
  background: var(--hp-cyan); color: var(--hp-void);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}
.hp-btn-gold {
  background: linear-gradient(180deg, #E4C57A, var(--hp-gold-deep));
  color: #1a1408;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}
.hp-btn-gold:hover { filter: brightness(1.06); }
.hp-btn-secondary {
  background: var(--hp-surface-3); color: var(--hp-silver);
  border: 1px solid var(--hp-border-strong);
}
.hp-btn-secondary:hover { background: var(--hp-surface-floating); }
.hp-btn-quiet { color: var(--hp-text-secondary); }
.hp-btn-quiet:hover { background: rgba(206,230,229,0.05); }
.hp-btn-route { background: var(--route-accent); color: var(--hp-void); }
.hp-btn-positive { background: var(--hp-positive); color: var(--hp-void); }
.hp-btn-danger {
  background: rgba(255,104,124,0.12); color: var(--hp-negative);
  border: 1px solid rgba(255,104,124,0.28);
}
.hp-btn-danger:hover { background: rgba(255,104,124,0.2); }
.hp-btn-tool { background: var(--hp-surface-3); color: var(--hp-silver); }

.hp-field input, .hp-field select, .hp-search-field,
input[type="date"], input[type="number"], input[type="text"] {
  background: var(--hp-surface-deep) !important;
  color: var(--hp-text-primary) !important;
  border: 1px solid var(--hp-border-default) !important;
  border-radius: var(--r-ctrl);
  caret-color: var(--hp-cyan);
}
.hp-field input:hover, .hp-field select:hover, .hp-search-field:hover {
  border-color: var(--hp-border-strong) !important;
  box-shadow: none;
}
.hp-field input:focus, .hp-field select:focus, .hp-search-field:focus {
  border-color: var(--hp-gold) !important;
  box-shadow: 0 0 0 3px var(--hp-gold-soft) !important;
}
.hp-field input::placeholder, .hp-search-field::placeholder { color: var(--hp-text-faint); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hp-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--hp-surface-deep) inset;
  transition: background-color 9999s ease-out;
}
.hp-field label { color: var(--hp-text-secondary); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
.hp-hint { color: var(--hp-text-faint); }

.hp-table th { color: var(--hp-text-faint); letter-spacing: 0.1em; text-transform: uppercase; }
.hp-table td { border-top-color: var(--hp-border-subtle); color: var(--hp-text-primary); }
.hp-table tbody tr:hover { background: color-mix(in srgb, var(--route-accent) 8%, transparent); }
.hp-row { border-bottom-color: var(--hp-border-subtle); }
.hp-list button.hp-row:hover { background: var(--hp-surface-selected); }
.hp-list button.hp-row.is-on {
  background: var(--hp-surface-selected);
  box-shadow: inset 2px 0 0 var(--route-accent);
}

.pill.up { background: rgba(72,212,154,0.14); color: var(--hp-positive); }
.pill.down { background: rgba(255,104,124,0.14); color: var(--hp-negative); }
.pill.cyan { background: var(--hp-cyan-soft); color: var(--hp-cyan-bright); }
.pill.warn { background: rgba(231,173,76,0.16); color: var(--hp-warning); }
.chg.up { color: var(--hp-positive); }
.chg.down { color: var(--hp-negative); }

.hp-seg {
  background: var(--hp-surface-deep);
  border: 1px solid var(--hp-border-default);
}
.hp-seg button { color: var(--hp-text-muted); }
.hp-seg button.is-on, .hp-seg button[aria-pressed="true"] {
  background: var(--hp-surface-3); color: var(--hp-text-primary);
}
.is-dash .hp-seg button.is-on, .hp-dash .hp-seg button.is-on {
  background: var(--hp-cyan); color: var(--hp-void);
}
.hp-tabs a, .hp-tabs button { color: var(--hp-text-muted); }
.hp-tabs a:hover, .hp-tabs button:hover,
.hp-tabs button.is-on, .hp-tabs a.is-on { color: var(--hp-text-primary); }
.hp-tabs button.is-on::after, .hp-tabs a.is-on::after { background: var(--hp-cyan); }

.hp-dialog { background: rgba(4,10,14,0.72); }
.hp-dialog-card {
  background: var(--hp-surface-floating);
  color: var(--hp-text-primary);
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--hp-border-strong), var(--shadow);
}
.search-overlay { background: rgba(4,10,14,0.72); }
.search-overlay form {
  background: var(--hp-surface-floating);
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--hp-border-strong);
}
.search-overlay input { color: var(--hp-text-primary); background: transparent; }
.search-hits button:hover { background: var(--hp-cyan-soft); }
.hp-user-menu {
  background: var(--hp-surface-floating); color: var(--hp-text-primary);
  box-shadow: 0 0 0 1px var(--hp-border-strong), var(--shadow);
}
.hp-user-menu button:hover { background: var(--hp-cyan-soft); }
.hp-toast { background: var(--hp-surface-floating); color: var(--hp-text-primary); box-shadow: 0 0 0 1px var(--hp-border-strong); }

.hp-chart { background: transparent; }
.hp-chart.is-dark { background: transparent; }
.hp-yaxis { color: var(--hp-text-muted); }
.hp-tooltip {
  background: var(--hp-surface-floating); color: var(--hp-text-primary);
  border: 1px solid var(--hp-border-strong);
}
.hp-tooltip p { color: var(--hp-text-muted); }
.hp-tooltip.is-rich { background: #0B161C; color: #EDF6F4; }
.hp-crosshair-v, .hp-crosshair-h { background: rgba(212, 179, 107, 0.45); }
.hp-note {
  background: var(--hp-surface-floating); color: var(--hp-text-primary);
  box-shadow: 0 0 0 1px var(--hp-gold);
}

.hp-pick {
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border-default);
}
.hp-pick.is-selected {
  background: var(--hp-surface-selected);
  box-shadow: 0 0 0 1px var(--route-accent);
}
.hp-pick.is-selected::after {
  color: var(--hp-cyan-bright);
  background: var(--hp-cyan-soft);
}
body[data-page="copy-trading"] .hp-pick.fam-trend { background: color-mix(in srgb, #48D49A 8%, var(--hp-surface-1)); }
body[data-page="copy-trading"] .hp-pick.fam-mean { background: color-mix(in srgb, #659CFF 8%, var(--hp-surface-1)); }
body[data-page="copy-trading"] .hp-pick.fam-basis { background: color-mix(in srgb, #9878F5 8%, var(--hp-surface-1)); }
body[data-page="vaults"] .hp-pick.fam-delta { background: color-mix(in srgb, #2EC4B6 8%, var(--hp-surface-1)); }
body[data-page="vaults"] .hp-pick.fam-basis { background: color-mix(in srgb, #659CFF 8%, var(--hp-surface-1)); }
body[data-page="vaults"] .hp-pick.fam-rwa { background: color-mix(in srgb, #D4B36B 8%, var(--hp-surface-1)); }
body[data-page="vaults"] .hp-pick .num { color: var(--hp-gold); }

body[data-page="overview"] .hp-board-kpi {
  background: var(--hp-surface-1);
}
body[data-page="overview"] .hp-board-card {
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border-default), inset 0 1px 0 rgba(206,230,229,0.04);
}
body[data-page="overview"] #vol-card,
body[data-page="overview"] .hp-board-card.is-dash {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(23,212,227,0.12), transparent 48%),
    var(--hp-surface-deep);
}
body[data-page="overview"] .hp-card.tone-gold,
body[data-page="overview"] .hp-card.tone-emerald,
body[data-page="overview"] .hp-assist {
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border-default);
}
.hp-board-range {
  background: var(--hp-surface-2); color: var(--hp-text-secondary);
  box-shadow: 0 0 0 1px var(--hp-border-default);
  border-radius: 8px;
}
.hp-week .bar { background: var(--hp-surface-3); }
.hp-week .col.is-on .bar { background: var(--hp-gold); }
.hp-week .col.is-on b {
  background: var(--hp-surface-floating); color: var(--hp-text-primary);
  box-shadow: 0 0 0 1px var(--hp-border-default);
}
.hp-gauge .track { stroke: var(--hp-surface-3); }
.hp-assist-form {
  background: var(--hp-surface-deep);
  box-shadow: inset 0 0 0 1px var(--hp-border-default);
}
.hp-assist-form input { color: var(--hp-text-primary); }
.hp-ico {
  background: var(--hp-cyan-soft); color: var(--hp-cyan);
}
.hp-mix3 .cell { background: rgba(255,255,255,0.03); color: var(--hp-text-primary); }

body[data-page="whales"] .hp-wallet-rail,
body[data-page="whales"] #wallet-inspector {
  background: color-mix(in srgb, var(--route-accent) 8%, var(--hp-surface-1));
}
body[data-page="whales"] #whale-table .hp-row.is-on {
  background: var(--hp-surface-selected);
  box-shadow: inset 2px 0 0 var(--hp-violet), 0 0 0 1px color-mix(in srgb, var(--hp-cyan) 45%, transparent);
}
body[data-page="whales"] .hp-kpi:nth-child(1) b { color: var(--hp-cyan); }
body[data-page="whales"] .hp-kpi:nth-child(2) b { color: var(--hp-violet-bright); }
body[data-page="whales"] .hp-kpi:nth-child(3) b { color: var(--hp-gold); }
.hp-routes {
  background: var(--hp-surface-deep);
  box-shadow: inset 0 0 0 1px var(--hp-border-default);
}
.hp-timeline { background: #080E16; }
.hp-intel {
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border-default);
}

body[data-page="copy-trading"] .hp-perf,
body[data-page="ai-agents"] .hp-machine-card,
body[data-page="vaults"] .hp-hist,
body[data-page="portfolio"] .hp-equity,
body[data-page="whales"] .hp-flow {
  background:
    radial-gradient(70% 80% at 100% 0%, color-mix(in srgb, var(--route-accent) 14%, transparent), transparent 48%),
    var(--hp-surface-deep);
}
body[data-page="ai-agents"] .hp-arch-rail {
  background: color-mix(in srgb, var(--route-accent) 8%, var(--hp-surface-1));
}
.hp-log {
  background: var(--hp-surface-deep);
  color: var(--hp-text-secondary);
  box-shadow: inset 2px 0 0 var(--route-accent);
}
.hp-journey li {
  background: var(--hp-surface-deep);
  color: var(--hp-text-muted);
  box-shadow: 0 0 0 1px var(--hp-border-subtle);
}
.hp-journey li.is-on, .hp-journey li.is-done {
  background: color-mix(in srgb, var(--stage) 16%, var(--hp-surface-2));
  color: var(--hp-text-primary);
}

body[data-page="markets"] .hp-bookmod {
  background: var(--hp-surface-1);
}
body[data-page="markets"] .hp-screener { background: var(--hp-surface-1); }
.hp-ob-row .px { color: var(--hp-silver); }
.hp-ob-spread { background: var(--hp-surface-deep); }
.hp-pct button {
  background: var(--hp-surface-deep);
  color: var(--hp-text-secondary);
  border-color: var(--hp-border-default);
}
.hp-pct button.is-on {
  background: var(--hp-cyan-soft);
  color: var(--hp-cyan-bright);
  border-color: var(--hp-cyan);
}
.hp-ticket.is-buy .hp-btn-primary { background: var(--hp-positive); color: var(--hp-void); }
.hp-ticket.is-sell .hp-btn-primary { background: var(--hp-negative); color: #1a0608; }

body[data-page="portfolio"] .hp-xrow.btc { background: color-mix(in srgb, #D4B36B 10%, transparent); }
body[data-page="portfolio"] .hp-xrow.eth { background: color-mix(in srgb, #9878F5 10%, transparent); }
body[data-page="portfolio"] .hp-xrow.sol { background: color-mix(in srgb, #48D49A 10%, transparent); }
body[data-page="portfolio"] .hp-xrow.vaults { background: color-mix(in srgb, #2EC4B6 10%, transparent); }
body[data-page="portfolio"] .hp-xrow.cash { background: color-mix(in srgb, #41565C 16%, transparent); }
.hp-heat i { background: var(--hp-slate); }
.hp-heat i.btc { background: color-mix(in srgb, #D4B36B 55%, #0C1920); }
.hp-heat i.eth { background: color-mix(in srgb, #9878F5 50%, #0C1920); }
.hp-heat i.sol { background: color-mix(in srgb, #48D49A 50%, #0C1920); }
.hp-heat i.vaults { background: color-mix(in srgb, #2EC4B6 50%, #0C1920); }
.hp-heat i.cash { background: color-mix(in srgb, #41565C 70%, #0C1920); }
.hp-attr .bar { background: var(--hp-surface-3); }
.hp-risk .meter { background: var(--hp-surface-3); }
.hp-risk .meter i { background: var(--hp-cyan); }
.hp-grade.a { background: rgba(72,212,154,0.14); color: var(--hp-positive); }
.hp-grade.b { background: rgba(231,173,76,0.16); color: var(--hp-warning); }
.hp-grade.c { background: rgba(255,104,124,0.14); color: var(--hp-negative); }
.hp-apy-stack i { background: var(--hp-surface-3); }
.hp-status { background: var(--hp-cyan-soft); color: var(--hp-cyan-bright); }
.hp-dock { background: var(--hp-void); color: var(--hp-text-muted); box-shadow: 0 0 0 1px var(--hp-border-default); }
.hp-empty { color: var(--hp-text-muted); }

body.welcome, .hp-welcome { background: var(--hp-void); color: var(--hp-text-primary); }
.hp-cursor {
  background: radial-gradient(220px circle at var(--mx, -400px) var(--my, -400px), rgba(23,212,227,0.07), transparent 62%);
}
.hp-spot { border-color: rgba(23,212,227,0.4); background: rgba(23,212,227,0.08); }
.hp-gold-fill {
  background: radial-gradient(240px circle at var(--gx) var(--gy), rgba(var(--gold-rgb), calc(var(--g-int) * 0.11)), transparent 64%);
}
.hp-aura.is-hot {
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.55), 0 0 22px rgba(var(--gold-rgb), 0.16);
}
:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 2px; }

@media (max-width: 820px) {
  body.hp { --r: 10px; }
  .hp-telem-row { gap: 12px; overflow: auto; }
}

/* Punch-through lock: ice-desk leftovers cannot return as white SaaS */
body[data-page="overview"] .hp-note,
.hp-note {
  background: var(--hp-surface-floating) !important;
  color: var(--hp-text-primary) !important;
  box-shadow: 0 0 0 1px var(--hp-gold) !important;
}
.hp-week .col.is-on b {
  background: var(--hp-surface-floating) !important;
  color: var(--hp-text-primary) !important;
}
.hp-stat.tone-cyan, .hp-stat.tone-violet, .hp-stat.tone-gold, .hp-stat.tone-lime,
.hp-box, .hp-box.tone-cyan, .hp-box.tone-ice, .hp-box.tone-gold, .hp-box.tone-violet, .hp-box.tone-lime, .hp-box.tone-teal {
  background: var(--hp-surface-1) !important;
  color: var(--hp-text-primary);
  box-shadow: 0 0 0 1px var(--hp-border-default), inset 0 1px 0 rgba(206,230,229,0.04);
}
.search-overlay form, .hp-ctx, .hp-drawer, .hp-user-menu, .hp-dialog-card {
  background: var(--hp-surface-floating) !important;
  color: var(--hp-text-primary) !important;
}
.hp-table td { border-top-color: var(--hp-border-subtle); }
.hp-kicker { color: var(--hp-text-muted); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85) sepia(0.2); }
.hp-mini .cap, .gadget .cap { max-width: 100%; }
.hp-ob-row.ask .px, .hp-ob-row.ask .qty { color: var(--hp-negative); }
.hp-ob-row.bid .px, .hp-ob-row.bid .qty { color: var(--hp-positive); }
.hp-ob-row .px { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .hp-signal { animation: none !important; background-position: 40% 0; }
}

/* ══════════════════════════════════════════════
   REFINE PASS — geometry, depth, motion, OS
   Theme tokens stay locked (Obsidian Pulse)
   ══════════════════════════════════════════════ */

@property --g-int {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --g-ang {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

:root {
  --r-canvas: 6px;
  --r-instrument: 8px;
  --r-inspect: 10px;
  --r-tech: 8px;
  --depth-0: none;
  --depth-1: 0 0 0 1px var(--hp-border-default), inset 0 1px 0 rgba(206,230,229,0.05);
  --depth-2: 0 0 0 1px var(--hp-border-strong), inset 0 1px 0 rgba(206,230,229,0.08), 0 18px 36px -28px rgba(0,0,0,0.55);
  --depth-3: 0 0 0 1px var(--hp-border-strong), 0 28px 64px -24px rgba(0,0,0,0.72);
}

/* Route continuity — never empty the canvas */
.hp-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hp-main.is-ghost {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  opacity: 0.32;
  filter: saturate(0.55);
  pointer-events: none;
  z-index: 0;
  transform: none;
}
.hp-main.is-enter {
  position: relative;
  z-index: 1;
  animation: route-in 380ms var(--ease-out) both;
}
.hp-h1.is-reveal { animation: none; clip-path: none; }
@keyframes route-in {
  from { opacity: 0.2; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
::view-transition-old(root) { animation: vt-out 280ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 380ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0.2; } }
@keyframes vt-in { from { opacity: 0.35; } }
.hp-h1 { view-transition-name: hp-title; }
.hp-h1:focus, .hp-h1:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.hp-nav-pill { view-transition-name: hp-pill; }

/* Depth */
.hp-lv0 { box-shadow: var(--depth-0); }
.hp-stat, .hp-board-kpi, .hp-strip, .hp-row, .hp-table {
  box-shadow: var(--depth-1);
}
.hp-card.is-dash, .hp-dash, .hp-geo-canvas, .hp-pick.is-selected, .hp-row.is-on {
  box-shadow: var(--depth-2);
}
.hp-dialog-card, .search-overlay form, .hp-ctx-inspect, .hp-toast, .hp-user-menu {
  box-shadow: var(--depth-3);
  backdrop-filter: blur(10px);
}

/* Geometry A — instruments */
.hp-stat, .hp-board-kpi, .hp-geo-instrument {
  border-radius: var(--r-instrument);
  position: relative;
  overflow: hidden;
}
.hp-stat::before, .hp-board-kpi::before {
  content: "";
  position: absolute; top: 8px; right: 10px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hp-cyan);
  box-shadow: 0 0 8px var(--hp-cyan);
  opacity: 0.7;
}
.hp-board-kpi.inst-oi::before { background: var(--hp-violet); box-shadow: 0 0 8px var(--hp-violet); }
.hp-board-kpi.inst-liq::before { background: var(--hp-negative); box-shadow: 0 0 8px var(--hp-negative); }
.hp-board-kpi.inst-fund::before { background: var(--hp-positive); box-shadow: 0 0 8px var(--hp-positive); }

/* Geometry B — analytical canvas */
.hp-card.is-dash, .hp-geo-canvas, .hp-mkt-chart, .hp-perf, .hp-equity, .hp-hist, .hp-flow, .hp-machine-card {
  border-radius: var(--r-canvas);
  overflow: hidden;
}
.hp-card.is-dash .hp-chart,
.hp-geo-canvas .hp-chart {
  margin-inline: -4px;
  min-height: 220px;
}
.hp-chart-tools {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0;
  margin-left: auto;
  position: relative;
  z-index: 8;
  pointer-events: auto;
}
.hp-chart-tools button {
  pointer-events: auto;
  cursor: pointer;
}
.hp-toolbar .hp-chart-tools { align-self: center; }
.hp-chart-tools .hp-seg { margin: 0; }
.hp-last {
  position: absolute; right: 48px; top: 10px;
  font-family: var(--figure); font-size: 11px; font-weight: 700;
  color: var(--hp-cyan-bright);
  background: var(--hp-surface-floating);
  padding: 2px 7px; border-radius: 4px;
  box-shadow: 0 0 0 1px var(--hp-border-default);
  pointer-events: none; z-index: 3;
}
.hp-hl { position: absolute; font-size: 10px; color: var(--hp-text-muted); pointer-events: none; }

/* Geometry C — inspector */
.hp-card.is-action, .hp-geo-inspect, #wallet-inspector, .hp-ticket {
  border-radius: var(--r-inspect);
  background: var(--hp-workspace-raised);
  box-shadow: var(--depth-2);
}
.hp-ctx-inspect {
  position: fixed; width: min(340px, calc(100vw - 24px));
  max-height: min(72vh, 640px);
  overflow: auto;
  background: var(--hp-surface-floating);
  color: var(--hp-text-primary);
  border-radius: 10px;
  padding: 14px 16px 16px;
  z-index: 60;
}
.hp-ctx-inspect h3 { margin: 0 0 8px; font-size: 15px; }
.hp-ctx-inspect .hp-micro { margin-bottom: 10px; }

/* Geometry D — data rail */
.hp-strip, .hp-delta, .hp-geo-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-radius: 8px;
  overflow: hidden;
  background: var(--hp-surface-1);
  box-shadow: var(--depth-1);
}
.hp-delta {
  grid-template-columns: auto repeat(6, minmax(0, 1fr));
  margin: 0 0 14px;
  align-items: stretch;
}
.hp-delta > .hp-micro {
  display: flex; align-items: center; padding: 10px 14px;
  border-right: 1px solid var(--hp-border-subtle);
  white-space: nowrap;
}
.hp-delta a, .hp-delta button {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; text-align: left;
  border-right: 1px solid var(--hp-border-subtle);
  color: inherit; background: transparent;
  min-width: 0;
}
.hp-delta a:hover, .hp-delta button:hover { background: var(--hp-surface-selected); }
.hp-delta label, .hp-delta .k {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hp-text-muted);
}
.hp-delta b { font-family: var(--figure); font-size: 13px; font-weight: 700; color: var(--hp-text-primary); }

/* Geometry E — technical (one notch, high-value only) */
.hp-geo-tech, .hp-machine-card {
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.hp-machine { position: relative; }
.hp-pkt {
  position: absolute; top: 18px; left: 4%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hp-cyan); box-shadow: 0 0 8px var(--hp-cyan);
  animation: pkt 2.8s linear infinite;
  pointer-events: none; z-index: 2;
}
@keyframes pkt {
  0% { left: 4%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 92%; opacity: 0; }
}
.hp-machine span small {
  display: block; font-size: 9px; font-weight: 600; color: var(--hp-text-faint); margin-top: 2px;
}

/* Geometry F — transaction */
.hp-geo-tx .hp-tx-sum, .hp-ticket-est, .hp-risk-box {
  background: var(--hp-surface-deep);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
  box-shadow: inset 0 0 0 1px var(--hp-border-subtle);
}
.hp-ticket .hp-btn-primary { margin-top: 8px; }

/* Geometry G — table workspace */
.hp-geo-table, .hp-card:has(.hp-table) {
  border-radius: 8px;
  padding-top: 8px;
}
.hp-table thead th {
  position: sticky; top: 0;
  background: var(--hp-surface-1);
  z-index: 1;
}
.hp-table tbody tr.is-linked,
.hp-table tbody tr.is-on {
  background: var(--hp-surface-selected);
  box-shadow: inset 2px 0 0 var(--route-accent);
}

.hp-micro {
  margin: 0;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hp-text-muted);
}

/* Asymmetry — chart under header, mix overlapping */
.hp-board-pnl { align-items: stretch; }
body[data-page="overview"] .hp-board-chart { margin-top: -8px; }
.hp-mix3 { margin-top: -6px; }
.hp-week .col.is-on b { transform: translateY(-4px); }

/* Nested gold — only the nearest module glows */
.hp-aura .hp-aura:not(.hp-btn):not(.hp-row):not(.hp-pick):not(a):not(.hp-ob-row) > .hp-gold {
  display: none;
}
.hp-gold-edge {
  transition: filter 280ms var(--ease-out);
}
.hp-aura.is-pulse .hp-gold-edge {
  animation: gold-travel 560ms var(--ease-out) 1;
}
@keyframes gold-travel {
  0% { --g-int: 1; --g-ang: 0deg; filter: brightness(1.35); }
  100% { --g-int: 0.25; --g-ang: 340deg; filter: none; }
}

/* Unglossed controls */
.hp-btn-gold,
.hp-btn-gold:hover {
  background: var(--hp-surface-3) !important;
  color: var(--hp-gold-bright) !important;
  box-shadow: 0 0 0 1px var(--hp-gold), inset 0 1px 0 rgba(240,209,140,0.14) !important;
  filter: none !important;
  text-shadow: none;
}
.hp-btn-gold:hover { box-shadow: 0 0 0 1px var(--hp-gold-bright), 0 0 16px rgba(212,179,107,0.18) !important; }
.hp-btn-gold.is-confirm {
  background: #C9A45A !important;
  color: #16110a !important;
  box-shadow: 0 0 0 1px var(--hp-gold-deep), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.hp-btn-primary {
  background: linear-gradient(180deg, #2ADCE8, var(--hp-cyan)) !important;
  color: var(--hp-void) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 16px -12px rgba(23,212,227,0.45) !important;
}
.hp-btn-cyan {
  background: var(--hp-cyan) !important;
  color: var(--hp-void) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.hp-btn-danger.is-armed {
  background: var(--hp-negative) !important;
  color: #1a0608 !important;
}

/* Focus workstation */
body.is-focus .is-focus-hide { display: none !important; }
body.is-focus .is-focus-panel {
  position: relative; z-index: 5;
  grid-column: 1 / -1 !important;
  min-height: min(72vh, 720px);
}
.hp-focus-btn {
  min-width: 32px; min-height: 28px; padding: 0 8px;
  font-size: 11px; font-weight: 700;
  background: var(--hp-surface-3); color: var(--hp-silver);
  border-radius: 6px;
}

/* Lead microvisuals */
.hp-lead-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
  margin-top: 10px; text-align: left;
}
.hp-lead-meta span { font-size: 10px; color: var(--hp-text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.hp-lead-meta b { display: block; font-family: var(--figure); font-size: 12px; color: var(--hp-text-primary); }
.hp-pick .hp-mini { margin-top: 8px; min-height: 28px; }
.hp-compare {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px; margin: 12px 0; padding: 12px;
  background: var(--hp-surface-deep); border-radius: 8px;
}
.hp-compare div { min-width: 0; }
.hp-compare label { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hp-text-muted); }
.hp-compare b { font-family: var(--figure); font-size: 14px; }

.hp-proj { display: grid; gap: 6px; margin-top: 10px; }
.hp-proj i { display: block; height: 6px; border-radius: 99px; background: var(--hp-surface-3); overflow: hidden; }
.hp-proj i em { display: block; height: 100%; background: var(--hp-cyan); }
.hp-journey {
  position: relative;
}
.hp-journey::before {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 18px; height: 1px;
  background: linear-gradient(90deg, var(--hp-cyan), var(--hp-warning), var(--hp-blue), var(--hp-violet), var(--hp-positive), var(--hp-gold));
  opacity: 0.45; z-index: 0;
}
.hp-journey li { position: relative; z-index: 1; }

.hp-water { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.hp-water li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 6px;
  background: var(--hp-surface-deep); font-size: 13px;
}
.hp-scen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hp-scen button {
  min-height: 28px; padding: 0 10px; border-radius: 6px;
  background: var(--hp-surface-deep); color: var(--hp-text-secondary);
  border: 1px solid var(--hp-border-default); font-size: 11.5px; font-weight: 700;
}
.hp-scen button.is-on { border-color: var(--hp-gold); color: var(--hp-gold-bright); }
.hp-scen-out { margin-top: 8px; font-family: var(--figure); font-size: 13px; color: var(--hp-text-primary); }

.hp-flowpath {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 12px;
}
.hp-flowpath span {
  display: block; padding: 8px 6px; text-align: center;
  background: var(--hp-surface-deep); border-radius: 6px;
  font-size: 11px; color: var(--hp-text-secondary);
}
.hp-flowpath span b { display: block; color: var(--hp-text-primary); font-family: var(--figure); }
.hp-alloc-mini {
  display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin: 8px 0 6px;
  background: var(--hp-surface-3);
}
.hp-alloc-mini i { height: 100%; }
.hp-alloc-mini i:nth-child(1) { background: #2EC4B6; }
.hp-alloc-mini i:nth-child(2) { background: var(--hp-blue); }
.hp-alloc-mini i:nth-child(3) { background: var(--hp-gold); }

.hp-log {
  max-height: 220px; overflow: auto;
  background: var(--hp-surface-deep) !important;
  color: var(--hp-text-secondary);
}
.hp-log-row {
  display: grid; grid-template-columns: 54px 52px 72px 1fr;
  gap: 8px; padding: 4px 0; font-size: 12px;
  border-bottom: 1px solid var(--hp-border-subtle);
}
.hp-log-tools { display: flex; gap: 6px; flex-wrap: wrap; }

.hp-conv { display: grid; gap: 6px; margin: 10px 0; }
.hp-conv .row { display: grid; grid-template-columns: 88px 1fr 40px; gap: 8px; align-items: center; font-size: 12px; }
.hp-conv i { height: 5px; background: var(--hp-surface-3); border-radius: 99px; overflow: hidden; display: block; }
.hp-conv i em { display: block; height: 100%; background: var(--hp-violet); }

.hp-date { font-family: var(--figure); font-variant-numeric: tabular-nums; color: var(--hp-text-secondary); font-size: 13px; }

body[data-page="markets"][data-col-screener="off"] .hp-screener { display: none; }
body[data-page="markets"][data-col-screener="off"] .hp-desk { grid-template-columns: minmax(0, 1.15fr) 248px 292px; }
body[data-page="markets"][data-col-screener="off"] .hp-mkt-chart { grid-column: 1; }
body[data-page="markets"][data-col-screener="off"] .hp-bookmod { grid-column: 2; }
body[data-page="markets"][data-col-screener="off"] .hp-ticket { grid-column: 3; }
.hp-ob-row.is-mark { box-shadow: inset 0 0 0 1px var(--hp-cyan); }
.hp-ob-row.is-pick { box-shadow: inset 0 0 0 1px var(--hp-gold); }

.hp-assist-orb {
  background: radial-gradient(circle at 34% 30%, #54EAF2 0%, #17D4E3 42%, #087F8A 100%) !important;
}

/* KPI series highlight */
.hp-stat.is-hot-series, .hp-board-kpi.is-hot-series {
  box-shadow: 0 0 0 1px var(--route-accent);
}
[data-combo].dim-vol .cbar, [data-volume].dim-vol .sbar { opacity: 0.25; }

/* Responsive product order */
@media (max-width: 1280px) {
  .hp-delta { grid-template-columns: auto repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .hp-delta { grid-template-columns: 1fr 1fr; }
  .hp-delta > .hp-micro { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--hp-border-subtle); }
  .hp-geo-tech, .hp-machine-card { clip-path: none; }
}
@media (max-width: 820px) {
  body[data-page="overview"] .hp-board-kpis { order: 1; grid-template-columns: 1fr 1fr; }
  body[data-page="whales"] .hp-invest { display: flex; flex-direction: column; }
  body[data-page="whales"] .hp-wallet-rail { order: 1; }
  body[data-page="whales"] .hp-invest > div { order: 2; }
  body[data-page="copy-trading"] .hp-mandate { display: flex; flex-direction: column; }
  body[data-page="copy-trading"] .hp-mandate > div { order: 1; }
  body[data-page="copy-trading"] .hp-card.is-action { order: 2; }
  body[data-page="ai-agents"] .hp-lab { display: flex; flex-direction: column; }
  body[data-page="ai-agents"] .hp-arch-rail { order: 1; }
  body[data-page="ai-agents"] .hp-machine-card { order: 2; }
  body[data-page="ai-agents"] .hp-card.is-action { order: 3; }
  body[data-page="vaults"] .hp-underwrite { display: flex; flex-direction: column; }
  body[data-page="vaults"] .hp-card.is-action { order: 2; }
  body[data-page="portfolio"] .hp-book { display: flex; flex-direction: column; }
  .hp-compare { grid-template-columns: 1fr 1fr; }
  .hp-ctx-inspect { left: 8px !important; right: 8px; width: auto; bottom: 72px; top: auto !important; }
}
@media (max-width: 430px) {
  .hp-delta { grid-template-columns: 1fr; }
  .hp-flowpath { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-pkt, .hp-main.is-enter, .hp-aura.is-pulse .hp-gold-edge { animation: none !important; }
  .hp-main.is-ghost { opacity: 0; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   ALIGN PASS — grid, chart fill, families, taxonomy
   Theme tokens stay locked (Obsidian Pulse)
   ══════════════════════════════════════════════════════════ */

:root {
  --gutter: 32px;
  --mod-gap: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
}

html, body.hp { overflow-x: hidden; }
.hp-main, .hp-pagehead, .hp-board, .hp-invest, .hp-mandate, .hp-lab,
.hp-underwrite, .hp-desk, .hp-book {
  min-width: 0;
}

.hp-main {
  padding: 16px var(--gutter) 48px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mod-gap);
  align-content: start;
}
.hp-pagehead {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 16px;
  row-gap: 8px;
  margin-bottom: 0 !important;
  min-height: 0;
}
.hp-pagehead-act {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}
.hp-h1 {
  font-size: clamp(24px, 2.2vw, 30px) !important;
  letter-spacing: -0.04em;
  margin: 0 0 4px !important;
}
.hp-lede { color: var(--hp-text-secondary) !important; font-size: 13.5px; }
.hp-kicker, .hp-micro {
  color: var(--hp-text-secondary) !important;
  letter-spacing: 0.16em;
}
.hp-meta, .hp-sub { color: var(--hp-text-secondary) !important; }
.hp-yaxis { color: var(--hp-text-secondary) !important; }

body[data-page="overview"] .hp-board,
body[data-page="whales"] .hp-invest,
body[data-page="copy-trading"] .hp-mandate,
body[data-page="ai-agents"] .hp-lab,
body[data-page="vaults"] .hp-underwrite,
body[data-page="portfolio"] .hp-book {
  gap: var(--mod-gap) !important;
}

/* Chart fill — kill leftover 188px / 0.34fr canvas */
.hp-chart {
  width: 100%;
  min-width: 0;
  height: 280px;
  padding-right: 44px;
  box-sizing: border-box;
}
.hp-chart svg { width: 100%; height: 100%; display: block; }
body[data-page="overview"] .hp-board-chart,
body[data-page="overview"] .hp-board-chart.is-dark {
  height: 100% !important;
  min-height: 280px !important;
  margin-top: 0 !important;
}
.hp-board-pnl { display: contents; }

.hp-geo-canvas#vol-card,
#vol-card.hp-geo-canvas {
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto;
  gap: 10px;
  padding: 12px 12px 12px !important;
  border-radius: 6px !important;
}
.hp-canvas-rail {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
}
.hp-canvas-rail .hp-board-figure { margin: 4px 0 0; }
.hp-canvas-rail .hp-board-figure b { font-size: clamp(26px, 2.4vw, 34px); }
.hp-canvas-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(168px, 22%);
  grid-template-areas: "tools tools" "plot intel";
  gap: 12px;
  min-height: 280px;
  align-items: stretch;
}
.hp-canvas-body .hp-chart-tools { grid-area: tools; justify-self: end; }
.hp-canvas-body .hp-chart {
  grid-area: plot;
  min-height: 280px;
  height: 100%;
  min-width: 0;
  width: 100%;
  margin: 0 !important;
}
.hp-intel-col {
  grid-area: intel;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 0 4px 12px;
  border-left: 1px solid var(--hp-border-subtle);
  min-width: 0;
}
.hp-intel-col div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.hp-intel-col label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-text-secondary);
}
.hp-intel-col b {
  font-family: var(--figure);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-mix3 { margin-top: 0 !important; }

/* Family A — instrument tiles */
.hp-board-kpi, .hp-stat {
  border-radius: 8px !important;
  padding: 12px 14px 10px !important;
  cursor: pointer;
}
.hp-board-kpi.is-on,
.hp-stat.is-on {
  box-shadow: 0 0 0 1px var(--hp-gold), 0 0 18px rgba(212,179,107,0.12);
}
.hp-board-kpi .hp-mini { min-height: 36px; }
.inst-vol { box-shadow: inset 3px 0 0 var(--hp-cyan), 0 0 0 1px var(--hp-border-default); }
.inst-oi { box-shadow: inset 3px 0 0 var(--hp-violet), 0 0 0 1px var(--hp-border-default); }
.inst-liq { box-shadow: inset 3px 0 0 var(--hp-negative), 0 0 0 1px var(--hp-border-default); }
.inst-fund { box-shadow: inset 3px 0 0 var(--hp-positive), 0 0 0 1px var(--hp-border-default); }

/* Family B — analytical canvases */
.hp-card.is-dash, .hp-geo-canvas, .hp-mkt-chart, .hp-perf, .hp-equity, .hp-hist, .hp-flow, .hp-machine-card {
  border-radius: 6px !important;
  padding: 12px !important;
}
.hp-card.is-dash .hp-chart { min-height: 240px; }

/* Family C/D — investigation + tickets */
.hp-card.is-action, .hp-ticket, #wallet-inspector {
  border-radius: 10px !important;
  background: var(--hp-workspace-raised) !important;
  box-shadow: var(--depth-2), 0 16px 40px -32px rgba(0,0,0,0.7);
}
.hp-sticky-act { position: sticky; bottom: 0; margin-top: 12px; width: 100%; }

/* Family E — data rails */
.hp-tape-mod {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0 12px;
  align-items: center;
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border-default);
  border-radius: 8px;
  padding: 8px 12px;
  overflow: hidden;
}
.hp-tape-mod > .hp-micro {
  border-right: 1px solid var(--hp-border-subtle);
  padding-right: 12px;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.hp-tape-mod ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
.hp-tape-mod li {
  display: grid;
  grid-template-columns: 40px 10px 1fr;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-right: 1px solid var(--hp-border-subtle);
  font-size: 12.5px;
  cursor: pointer;
  min-width: 0;
}
.hp-tape-mod li:last-child { border-right: 0; }
.hp-tape-mod li:hover { background: var(--hp-surface-selected); }
.hp-tape-mod time { font-family: var(--figure); font-size: 11px; color: var(--hp-text-secondary); }
.hp-tape-mod i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hp-blue);
}
.hp-tape-mod li[data-sev="ok"] i { background: var(--hp-positive); }
.hp-tape-mod li[data-sev="warn"] i { background: var(--hp-warning); }
.hp-tape-mod li[data-sev="bad"] i { background: var(--hp-negative); box-shadow: 0 0 8px var(--hp-negative); }
.hp-tape-mod li[data-sev="intel"] i { background: var(--hp-gold); }
.hp-tape-mod li[data-sev="sys"] i { background: var(--hp-slate); }
.hp-tape-mod span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--hp-text-primary);
}

/* Family F — event / terminal */
.hp-term, .hp-log.hp-term {
  font-family: var(--figure);
  font-size: 12px;
  line-height: 1.35;
  background: #060E14 !important;
  color: var(--hp-text-secondary);
  border-radius: 4px;
  padding: 0 !important;
  max-height: none;
  box-shadow: inset 2px 0 0 var(--route-accent);
}
.hp-log-head, .hp-log-row {
  display: grid;
  grid-template-columns: 52px 48px 78px 1fr 56px;
  gap: 8px;
  padding: 6px 12px;
  text-align: left;
  width: 100%;
  background: transparent;
  color: inherit;
  border: 0;
  border-bottom: 1px solid var(--hp-border-subtle);
}
.hp-log-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
.hp-log-row:hover, .hp-log-row.is-on { background: var(--hp-surface-selected); }
.hp-log-row.is-on { box-shadow: inset 2px 0 0 var(--hp-gold); }

/* Family G — comparison */
.hp-pick { border-radius: 8px; }
.hp-pick:not(.is-selected) { opacity: 0.78; }
.hp-pick.is-selected {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--hp-gold), 0 18px 32px -24px rgba(0,0,0,0.55);
}
.hp-fp, .hp-topo { width: 100%; height: 36px; display: block; margin: 8px 0 4px; }

/* Week profile */
.hp-week { position: relative; }
.hp-week .avg {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(18px + var(--avg, 48%));
  height: 1px;
  background: var(--hp-gold);
  opacity: 0.55;
  pointer-events: none;
}
.hp-week .col { position: relative; }
.hp-week .col.is-anomaly .bar { box-shadow: 0 0 0 1px var(--hp-warning); }

/* Alloc ring */
.hp-alloc-ring {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
}
.hp-alloc-ring svg { width: 72px; height: 72px; }
.hp-alloc-ring ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hp-alloc-ring li {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12.5px; color: var(--hp-text-secondary);
}
.hp-alloc-ring li b { font-family: var(--figure); color: var(--hp-text-primary); }
.hp-alloc-ring i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.hp-alloc-ring i.h { background: #2EC4B6; }
.hp-alloc-ring i.l { background: #659CFF; }
.hp-alloc-ring i.c { background: #D4B36B; }
.hp-tx-sum {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 6px 12px;
  padding: 10px 12px;
  background: var(--hp-surface-deep);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--hp-text-secondary);
}
.hp-tx-sum b { font-family: var(--figure); color: var(--hp-text-primary); }

/* Execution rail */
.hp-exec-rail {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 !important;
  margin-top: 16px;
  padding: 0;
  position: relative;
}
.hp-exec-rail::before {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 14px; height: 1px;
  background: linear-gradient(90deg, var(--hp-cyan), var(--hp-warning), var(--hp-blue), var(--hp-violet), var(--hp-positive), var(--hp-gold));
  opacity: 0.5;
}
.hp-exec-rail li {
  list-style: none;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 4px 0 !important;
  text-align: center;
  font-size: 11px;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.hp-exec-rail li b {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hp-surface-deep);
  box-shadow: 0 0 0 1px var(--hp-border-strong);
  font-family: var(--figure); font-size: 10px;
  position: relative; z-index: 1;
}
.hp-exec-rail li.is-on b { background: var(--hp-gold); color: #16110a; }
.hp-exec-rail li.is-done b { background: var(--hp-cyan); color: var(--hp-void); }

/* Machine stages */
.hp-machine span {
  border-radius: 4px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
}
.hp-machine span:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.hp-machine span:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); }
.hp-machine span[data-state="queued"] { opacity: 0.55; }
.hp-machine span[data-state="failed"] { background: rgba(255,104,124,0.16); color: var(--hp-negative); }
.hp-machine span.is-on { z-index: 1; }

/* Ticket groups */
.hp-tk-group { margin: 10px 0; }
.hp-tk-group > .hp-micro { margin-bottom: 6px; }
.hp-tk-opts { display: flex; gap: 12px; flex-wrap: wrap; }
.hp-ticket.is-buy { box-shadow: var(--depth-2), inset 3px 0 0 var(--hp-positive); }
.hp-ticket.is-sell { box-shadow: var(--depth-2), inset 3px 0 0 var(--hp-negative); }
.hp-ticket.is-buy .hp-btn-primary { background: var(--hp-positive) !important; color: var(--hp-void) !important; }
.hp-ticket.is-sell .hp-btn-primary { background: var(--hp-negative) !important; color: #1a0608 !important; }
.hp-ohlc {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  font-family: var(--figure); font-size: 12px;
  color: var(--hp-text-secondary);
  padding: 4px 0 8px;
}
.hp-ohlc b { color: var(--hp-text-primary); }
.hp-xhair-read { color: var(--hp-gold-bright); margin-left: auto; }
.hp-term-tabs {
  background: var(--hp-surface-deep);
  border-radius: 4px;
  padding: 2px;
  gap: 0;
}
.hp-term-tabs button {
  border-radius: 3px;
  min-height: 28px;
  font-family: var(--figure);
  font-size: 12px;
}
.hp-term-tabs button.is-on {
  background: var(--hp-surface-3);
  color: var(--hp-cyan-bright);
}
.hp-ob-row { transition: background-color 180ms var(--ease), transform 180ms var(--ease); }
.hp-ob-row i { opacity: 0.55; }
.hp-field input.is-flash {
  box-shadow: 0 0 0 1px var(--hp-gold) !important;
  animation: flash-gold 700ms var(--ease-out) 1;
}
@keyframes flash-gold {
  from { background: color-mix(in srgb, var(--hp-gold) 22%, var(--hp-surface-deep)) !important; }
}

/* Forensic whales */
.hp-wprint svg { width: 120px; height: 36px; }
.hp-fact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 12px;
}
.hp-fact-split > div { padding: 8px 10px; border-radius: 6px; background: var(--hp-surface-deep); }
.hp-fact-split .is-fact { box-shadow: inset 2px 0 0 var(--hp-cyan); }
.hp-fact-split .is-infer { box-shadow: inset 2px 0 0 var(--hp-violet); opacity: 0.92; }
.hp-fact-split p { margin: 4px 0 0; font-size: 12.5px; color: var(--hp-text-secondary); }

/* Portfolio radial + waterfall */
.hp-radial {
  position: relative;
  width: 140px; height: 140px;
  margin: 0 auto 12px;
}
.hp-radial svg { width: 100%; height: 100%; }
.hp-radial .read {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
}
.hp-radial .read b { font-family: var(--figure); font-size: 18px; }
.hp-radial .read span { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hp-text-muted); }
.hp-water { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.hp-water li {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  padding: 4px 0;
  background: transparent !important;
}
.hp-water li i {
  grid-column: 2;
  height: 8px;
  width: var(--w, 40%);
  background: var(--hp-cyan);
  border-radius: 1px;
  justify-self: start;
}
.hp-water li.up i { background: var(--hp-positive); }
.hp-water li.dn i { background: var(--hp-negative); }
.hp-water li.end i { background: var(--hp-gold); }
.hp-water li b { grid-column: 3; font-family: var(--figure); }
.hp-xrow.is-on { box-shadow: inset 2px 0 0 var(--hp-gold); }

/* Button taxonomy */
.hp-btn {
  min-height: 36px;
  border-radius: 6px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.hp-btn-primary, .hp-btn-cyan {
  background: var(--hp-cyan) !important;
  color: var(--hp-void) !important;
  box-shadow: none !important;
  filter: none !important;
}
.hp-btn-primary:hover, .hp-btn-cyan:hover { background: var(--hp-cyan-bright) !important; }
.hp-btn-primary:active, .hp-btn-cyan:active { transform: translateY(1px); }
.hp-btn-gold {
  background: var(--hp-surface-3) !important;
  color: var(--hp-gold-bright) !important;
  box-shadow: 0 0 0 1px var(--hp-gold) !important;
  filter: none !important;
}
.hp-btn-gold:hover { box-shadow: 0 0 0 1px var(--hp-gold-bright), 0 0 14px rgba(212,179,107,0.2) !important; }
.hp-btn-gold.is-confirm {
  background: #C9A45A !important;
  color: #16110a !important;
  box-shadow: none !important;
}
.hp-btn-secondary {
  background: var(--hp-surface-3) !important;
  color: var(--hp-silver) !important;
  border: 1px solid var(--hp-border-strong);
}
.hp-btn-quiet { background: transparent !important; box-shadow: none !important; }
.hp-btn-quiet:hover { background: rgba(206,230,229,0.05) !important; }
.hp-btn-danger {
  background: rgba(255,104,124,0.12) !important;
  color: var(--hp-negative) !important;
  border: 1px solid rgba(255,104,124,0.32);
}
.hp-btn:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 2px; }
.hp-icon-btn, .hp-btn-tool { min-width: 36px; min-height: 36px; border-radius: 6px; }
.hp-seg { border-radius: 6px; overflow: hidden; display: inline-flex; }
.hp-seg button { border-radius: 0 !important; min-height: 32px; }

/* Inspector motion */
.hp-card.is-action, .hp-ticket, #wallet-inspector {
  transition: transform 280ms var(--ease-out), opacity 280ms var(--ease-out);
}
.hp-chart polyline.draw { animation: draw-line 420ms var(--ease-out) both; }
@keyframes draw-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (max-width: 1440px) {
  :root { --gutter: 28px; }
}
@media (max-width: 1280px) {
  :root { --gutter: 24px; --mod-gap: 14px; }
  .hp-canvas-body { grid-template-columns: minmax(0, 1fr) 160px; }
  .hp-tape-mod ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-page="ai-agents"] .hp-lab { grid-template-columns: 200px minmax(0, 1fr) 260px !important; }
}
@media (max-width: 1100px) {
  .hp-pagehead { grid-template-columns: 1fr; }
  .hp-pagehead-act { justify-content: flex-start; }
  .hp-canvas-body {
    grid-template-columns: 1fr;
    grid-template-areas: "tools" "plot" "intel";
  }
  .hp-intel-col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    border-left: 0;
    border-top: 1px solid var(--hp-border-subtle);
    padding: 10px 0 0;
  }
  .hp-tape-mod { grid-template-columns: 1fr; }
  .hp-tape-mod > .hp-micro { border-right: 0; border-bottom: 1px solid var(--hp-border-subtle); padding: 4px 0 8px; }
  body[data-page="copy-trading"] .hp-mandate { grid-template-columns: 1fr !important; }
  body[data-page="vaults"] .hp-underwrite { grid-template-columns: 1fr !important; }
}
@media (max-width: 1180px) {
  .hp-nav a { padding: 0 10px; font-size: 12px; letter-spacing: 0.08em; }
}
@media (max-width: 1100px) {
  body[data-page="markets"] .hp-mkt-chart { order: 1; }
  body[data-page="markets"] .hp-ticket { order: 2; }
  body[data-page="markets"] .hp-bookmod { order: 3; }
  body[data-page="markets"] .hp-screener { order: 4; }
  body[data-page="markets"] .hp-mkt-floor { order: 5; }
}
.hp-gauge svg { max-height: 168px; width: auto; margin-inline: auto; display: block; }
.is-dash .hp-chart-tools .hp-seg + .hp-seg button.is-on {
  background: var(--hp-surface-3) !important;
  color: var(--hp-gold-bright) !important;
  box-shadow: inset 0 0 0 1px var(--hp-gold);
}
@media (max-width: 820px) {
  :root { --gutter: 20px; }
  .hp-main { padding: 14px var(--gutter) 96px !important; }
  body[data-page="overview"] .hp-pagehead { order: 0; }
  body[data-page="overview"] .hp-board-kpis { order: 1; grid-template-columns: 1fr 1fr !important; }
  body[data-page="overview"] .hp-tape-mod { order: 2; }
  body[data-page="overview"] .hp-board { order: 3; }
  .hp-tape-mod ol { grid-template-columns: 1fr 1fr; }
  .hp-exec-rail { grid-template-columns: 1fr 1fr 1fr !important; row-gap: 12px; }
  .hp-exec-rail::before { display: none; }
  .hp-fact-split { grid-template-columns: 1fr; }
  .hp-log-head, .hp-log-row { grid-template-columns: 44px 40px 1fr; }
  .hp-log-head span:nth-child(n+4), .hp-log-row span:nth-child(n+4) { display: none; }
  .hp-machine span { clip-path: none !important; }
}
@media (max-width: 480px) {
  :root { --gutter: 14px; }
  .hp-main { padding: 12px 14px 108px !important; }
  body[data-page="overview"] .hp-board-kpis { grid-template-columns: 1fr !important; }
  .hp-tape-mod ol { grid-template-columns: 1fr; }
  .hp-intel-col { grid-template-columns: 1fr 1fr; }
  .hp-mix3 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   ALIGN FIX — chrome stacking, desk tape off, colored segs
   ══════════════════════════════════════════════════════════ */

.hp-top {
  z-index: 80 !important;
  overflow: visible;
  isolation: isolate;
}
.hp-top-tools {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hp-main, .hp-pagehead, .hp-pagehead-act {
  z-index: 1;
}
.hp-pagehead {
  min-height: 0 !important;
  align-items: center !important;
}
.hp-pagehead-act {
  position: relative;
  z-index: 1;
}

.hp-intel { display: none !important; }

.hp-user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(280px, calc(100vw - 24px));
  display: none;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 14px 12px;
  background: var(--hp-surface-floating) !important;
  color: var(--hp-text-primary);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--hp-border-strong), 0 24px 48px -20px rgba(0,0,0,0.72);
  z-index: 90;
}
.hp-user-menu.is-on { display: grid !important; }
.hp-user-menu .hp-micro { margin: 0; }
.hp-user-id {
  margin: 0;
  font-family: var(--figure);
  font-size: 14px;
  font-weight: 700;
  color: var(--hp-cyan-bright);
}
.hp-menu-row {
  display: grid;
  gap: 6px;
}
.hp-menu-row > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-text-secondary);
}
.hp-user-menu .hp-seg { width: 100%; }
.hp-user-menu .hp-seg button { flex: 1; }
.hp-user-menu .hp-btn { width: 100%; justify-content: center; }
.hp-user-menu .hp-btn-quiet { min-height: 32px; color: var(--hp-text-secondary); }

.hp-seg, .hp-pct {
  display: inline-flex;
  align-items: stretch;
  gap: 3px;
  padding: 3px;
  background: var(--hp-surface-deep);
  border: 1px solid var(--hp-border-default);
  border-radius: 8px;
  overflow: hidden;
}
.hp-tk-group .hp-seg, .hp-tk-group .hp-pct, .hp-ticket .hp-seg, .hp-ticket .hp-pct {
  display: flex;
  width: 100%;
}
.hp-seg button, .hp-pct button {
  flex: 1;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 6px !important;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--hp-text-secondary);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.01em;
}
.hp-seg button:hover, .hp-pct button:hover {
  color: var(--hp-text-primary);
  background: rgba(206,230,229,0.05);
}
.hp-seg button.is-on,
.hp-seg button[aria-pressed="true"],
.hp-pct button.is-on {
  background: var(--hp-cyan) !important;
  color: var(--hp-void) !important;
  box-shadow: none !important;
}
.is-dash .hp-seg button.is-on,
.hp-dash .hp-seg button.is-on {
  background: var(--hp-cyan) !important;
  color: var(--hp-void) !important;
}
.hp-ticket.is-buy [aria-label="Side"] button.is-on {
  background: var(--hp-positive) !important;
  color: var(--hp-void) !important;
}
.hp-ticket.is-sell [aria-label="Side"] button.is-on {
  background: var(--hp-negative) !important;
  color: #1a0608 !important;
}
.is-dash .hp-chart-tools .hp-seg + .hp-seg button.is-on {
  background: var(--hp-gold) !important;
  color: #16110a !important;
}

/* ══════════════════════════════════════════════════════════
   FINAL POLISH — contrast, distinct viz, grid, selected states
   ══════════════════════════════════════════════════════════ */

.hp-lede, .hp-sub, .hp-meta, .hp-hint, .hp-yaxis, .hp-xaxis {
  color: var(--hp-text-secondary) !important;
}
.hp-kicker, .hp-micro {
  color: var(--hp-text-muted) !important;
}
.gadget .cap, .hp-mini .cap {
  color: var(--hp-text-secondary) !important;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-field input, .hp-search-field, input[type="number"], input[type="date"], input[type="text"] {
  min-height: 36px;
}
.hp-grade.a { background: rgba(72,212,154,0.16); color: #8BE8C0; }
.hp-grade.b { background: rgba(212,179,107,0.18); color: #F0D18C; }
.hp-grade.c { background: rgba(255,104,124,0.16); color: #FF8A98; }

body[data-page="markets"] .hp-bookmod {
  background: var(--hp-surface-1) !important;
}
body[data-page="vaults"] .hp-pick .num { color: var(--hp-gold-bright) !important; }

.hp-xaxis {
  position: absolute;
  left: 8px;
  right: 48px;
  bottom: 2px;
  height: 16px;
  pointer-events: none;
  z-index: 2;
}
.hp-xaxis span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--figure);
  font-size: 10.5px;
  font-weight: 650;
  color: var(--hp-text-secondary);
  white-space: nowrap;
}
.hp-chart {
  padding-bottom: 18px;
}
.hp-yaxis {
  bottom: 22px !important;
  color: var(--hp-text-secondary) !important;
  font-size: 11px;
}
.hp-last {
  top: 8px;
  right: 50px;
}
.hp-note {
  top: 28px !important;
  max-width: 46%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Surfaces */
body.hp { background: var(--hp-void); }
.hp-card, .hp-stat, .hp-pick, .hp-board-kpi {
  background: var(--hp-surface-1);
}
.hp-card.is-dash, .hp-geo-canvas, .hp-mkt-chart, .hp-perf, .hp-equity, .hp-hist, .hp-flow, .hp-machine-card, .hp-contrib {
  background: var(--hp-environment) !important;
}
.hp-card.is-action, .hp-ticket, #wallet-inspector {
  background: var(--hp-workspace-raised) !important;
}

/* Overview KPIs — distinct compositions */
body[data-page="overview"] .hp-board-kpi {
  min-height: 148px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 10px !important;
}
body[data-page="overview"] .hp-board-kpi .hp-mini,
body[data-page="overview"] .hp-board-kpi .gadget {
  flex: 1;
  min-height: 64px;
  margin-top: auto;
}
body[data-page="overview"] .hp-board-kpi .hp-sparkline { height: 56px; }
.hp-tension {
  margin-top: auto;
  display: grid;
  gap: 6px;
}
.hp-tension .track {
  display: flex;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--hp-surface-deep);
}
.hp-tension .lng { display: block; height: 100%; background: var(--hp-violet); }
.hp-tension .sht { display: block; height: 100%; background: var(--hp-negative); opacity: 0.85; }
.hp-tension .lbl {
  display: flex;
  justify-content: space-between;
  font-family: var(--figure);
  font-size: 11.5px;
  color: var(--hp-text-secondary);
}
.hp-tension .lbl span:first-child { color: var(--hp-violet-bright); }
.hp-tension .lbl span:last-child { color: var(--hp-negative); }
.inst-vol { box-shadow: inset 3px 0 0 var(--hp-cyan), 0 0 0 1px var(--hp-border-default) !important; }
.inst-oi { box-shadow: inset 3px 0 0 var(--hp-violet), 0 0 0 1px var(--hp-border-default) !important; }
.inst-liq { box-shadow: inset 3px 0 0 var(--hp-negative), 0 0 0 1px var(--hp-border-default) !important; }
.inst-fund { box-shadow: inset 3px 0 0 var(--hp-positive), 0 0 0 1px var(--hp-border-default) !important; }
.hp-board-kpi.is-on {
  background: var(--hp-surface-selected) !important;
  box-shadow: inset 3px 0 0 var(--hp-gold), 0 0 0 1px var(--hp-gold) !important;
}

/* Tape */
.hp-tape-mod {
  align-items: stretch;
}
.hp-tape-mod ol {
  grid-template-columns: 1.45fr repeat(5, minmax(0, 1fr));
}
.hp-tape-mod li {
  grid-template-columns: 40px 8px minmax(0, 1fr);
  min-height: 36px;
}
.hp-tape-mod li.is-lead {
  background: color-mix(in srgb, var(--hp-cyan) 10%, var(--hp-surface-1));
  box-shadow: inset 2px 0 0 var(--hp-cyan);
}
.hp-tape-mod li.is-on {
  background: var(--hp-surface-selected);
  box-shadow: inset 2px 0 0 var(--hp-gold);
}
.hp-tape-mod time { color: var(--hp-text-secondary); font-variant-numeric: tabular-nums; }

/* Chart vs intel */
.hp-canvas-body {
  grid-template-columns: minmax(0, 1fr) minmax(148px, 176px) !important;
  min-height: 300px;
}
.hp-intel-col {
  padding-left: 10px;
}
.hp-intel-col label {
  color: var(--hp-text-muted);
  letter-spacing: 0.08em;
}
.hp-intel-col b { font-size: 13px; }

/* Vaults */
.hp-fp, .hp-topo {
  width: 100%;
  height: 80px !important;
  margin: 8px 0 4px;
}
.hp-fp-cap {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--hp-text-secondary);
}
.hp-vault-kind {
  margin: 0;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
.hp-vault-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
.hp-vault-stats span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
.hp-vault-stats b {
  font-family: var(--figure);
  font-size: 16px;
  color: var(--hp-text-primary);
}
.hp-vault-stats .num { font-size: 18px !important; }
.hp-pick {
  opacity: 1 !important;
}
.hp-pick:not(.is-selected) {
  opacity: 1 !important;
  filter: none;
}
body[data-page="vaults"] .hp-pick.is-selected,
body[data-page="copy-trading"] .hp-pick.is-selected,
body[data-page="ai-agents"] .hp-arch .hp-pick.is-selected {
  background: var(--hp-surface-selected) !important;
  box-shadow: inset 3px 0 0 var(--hp-gold), 0 0 0 1px var(--hp-gold) !important;
  transform: none;
}
body[data-page="vaults"] .hp-pick.fam-delta.is-selected {
  background: color-mix(in srgb, #2EC4B6 14%, var(--hp-surface-selected)) !important;
}
body[data-page="vaults"] .hp-pick.fam-basis.is-selected {
  background: color-mix(in srgb, #659CFF 14%, var(--hp-surface-selected)) !important;
}
body[data-page="vaults"] .hp-pick.fam-rwa.is-selected {
  background: color-mix(in srgb, #D4B36B 14%, var(--hp-surface-selected)) !important;
}
.hp-pick.is-selected::after {
  top: 10px;
  right: 10px;
}

/* Copy leads */
body[data-page="copy-trading"] .hp-pick .hp-mini,
body[data-page="copy-trading"] .hp-pick .gadget {
  min-height: 72px;
}
body[data-page="copy-trading"] .hp-pick .hp-sparkline { height: 64px; }
body[data-page="copy-trading"].is-compare .hp-pick:not(.is-selected) {
  opacity: 0.72 !important;
}
.hp-compare {
  display: block;
  padding: 0;
  overflow: auto;
}
.hp-cmp-table { min-width: 520px; }
.hp-cmp-table th, .hp-cmp-table td { text-align: right; }
.hp-cmp-table th:first-child, .hp-cmp-table td:first-child, .hp-cmp-table tbody th { text-align: left; }
.hp-cmp-table th, .hp-cmp-table td { text-align: center; }
.hp-cmp-table .is-focus {
  background: color-mix(in srgb, var(--hp-gold) 7%, transparent);
  box-shadow: inset 0 -2px 0 var(--hp-gold);
  color: var(--hp-text-primary);
  font-weight: 750;
}
.hp-lead-meta {
  grid-template-columns: 1fr 1fr;
}
.hp-lead-meta span { color: var(--hp-text-muted); }
.hp-exec-rail li {
  font-size: 11px;
  color: var(--hp-text-secondary);
  white-space: nowrap;
}
.hp-exec-rail li b { flex: none; }

/* Whales */
.hp-inv-head { display: grid; gap: 4px; }
.hp-inv-head .hp-h2 { margin: 4px 0 0; }
.hp-inv-score {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
  text-align: left;
}
.hp-inv-score .is-score b {
  font-size: 32px;
  color: var(--hp-cyan-bright);
}
.hp-fact-split .is-fact {
  box-shadow: inset 3px 0 0 var(--hp-cyan);
  background: color-mix(in srgb, var(--hp-cyan) 6%, var(--hp-surface-deep));
}
.hp-fact-split .is-infer {
  box-shadow: inset 3px 0 0 var(--hp-violet);
  background: color-mix(in srgb, var(--hp-violet) 7%, var(--hp-surface-deep));
  opacity: 1;
}
.hp-fact-split p { color: var(--hp-text-secondary); }
.hp-routes {
  height: auto !important;
  min-height: 188px;
  margin: 8px 0 12px;
  background: var(--hp-surface-deep);
  border-radius: 8px;
  padding: 8px 10px 6px;
}
.hp-routes svg { height: 168px; width: 100%; }
.hp-routes path.is-live { stroke: var(--hp-gold); stroke-width: 2.4; fill: none; }
.hp-routes path.is-idle { stroke: var(--hp-slate); stroke-width: 1.6; stroke-dasharray: 5 5; fill: none; }
.hp-routes text { fill: var(--hp-text-secondary); }
.hp-wprint svg { width: 140px; height: 40px; }
.hp-timeline {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.hp-timeline li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  padding: 7px 8px;
  border-left: 2px solid var(--hp-border-default);
  font-size: 13px;
  color: var(--hp-text-secondary);
}
.hp-timeline li.is-on {
  border-left-color: var(--hp-gold);
  background: var(--hp-surface-selected);
  color: var(--hp-text-primary);
}
.hp-timeline time { font-family: var(--figure); color: var(--hp-text-muted); }

/* Agents */
.hp-machine span {
  min-height: 44px;
  display: grid;
  place-content: center;
  font-size: 12px;
  font-weight: 750;
  color: var(--hp-text-secondary);
  background: var(--hp-surface-deep);
  border: 1px solid var(--hp-border-default);
}
.hp-machine span small {
  display: block;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--hp-text-muted);
}
.hp-machine span.is-done,
.hp-machine span[data-state="done"] {
  color: var(--hp-positive);
  background: rgba(72,212,154,0.10);
  border-color: rgba(72,212,154,0.32);
}
.hp-machine span.is-on,
.hp-machine span[data-state="running"] {
  color: var(--hp-void);
  background: var(--hp-cyan);
  border-color: var(--hp-cyan);
}
.hp-machine span.is-on small,
.hp-machine span[data-state="running"] small { color: var(--hp-void); }
.hp-machine span[data-state="pending"] {
  color: var(--hp-text-secondary);
  background: var(--hp-surface-deep);
  opacity: 0.8;
}
.hp-machine span[data-state="warning"],
.hp-machine span[data-state="failed"] {
  color: var(--hp-warning);
  background: rgba(231,173,76,0.14);
  border-color: rgba(231,173,76,0.4);
}
.hp-agent-acts {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 8px;
  align-items: stretch;
}
.hp-agent-acts .hp-btn { width: 100%; justify-content: center; }
.hp-log.hp-term, .hp-log {
  background: #060E14 !important;
  color: var(--hp-text-secondary);
}
.hp-log-head, .hp-log-row {
  align-items: center;
  min-height: 32px;
}
.hp-log-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Markets workstation */
body[data-page="markets"] .hp-screener h2,
body[data-page="markets"] .hp-bookmod h2,
body[data-page="markets"] .hp-ticket h2 {
  min-height: 24px;
  margin: 0 0 8px;
}
body[data-page="markets"] .hp-ob-head {
  color: var(--hp-text-muted);
}
.hp-ob-row {
  min-height: 24px;
  font-variant-numeric: tabular-nums;
}
.hp-ob-spread b { color: var(--hp-cyan-bright); }
.hp-ticket.is-buy {
  box-shadow: var(--depth-2), inset 3px 0 0 var(--hp-cyan) !important;
}
.hp-ticket.is-sell {
  box-shadow: var(--depth-2), inset 3px 0 0 var(--hp-negative) !important;
}
.hp-ticket.is-buy .hp-btn-primary {
  background: var(--hp-cyan) !important;
  color: var(--hp-void) !important;
}
.hp-ticket.is-sell .hp-btn-primary {
  background: var(--hp-negative) !important;
  color: #1a0608 !important;
}
.hp-ticket.is-buy [aria-label="Side"] button.is-on {
  background: var(--hp-cyan) !important;
  color: var(--hp-void) !important;
}

/* Portfolio split */
body[data-page="portfolio"] .hp-book {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 260px) minmax(280px, 0.95fr) !important;
  gap: 14px;
  align-items: stretch;
}
body[data-page="portfolio"] .hp-book > div { min-width: 0; }
.hp-exposure {
  padding: 14px 14px 12px;
}
.hp-radial { width: 120px; height: 120px; }
.hp-contrib .hp-water {
  margin-top: 10px;
  gap: 6px;
}
.hp-contrib .hp-water li {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) 88px !important;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--hp-surface-deep) !important;
  border-radius: 6px;
}
.hp-contrib .hp-water li i {
  grid-column: 2;
  height: 10px;
  width: var(--w, 40%);
  max-width: 100%;
}
.hp-contrib .hp-water li.is-on {
  box-shadow: inset 2px 0 0 var(--hp-gold);
  background: var(--hp-surface-selected) !important;
}
.hp-scen-out {
  width: 100%;
  padding: 8px 10px;
  background: var(--hp-surface-deep);
  border-radius: 6px;
  color: var(--hp-gold-bright) !important;
}
.hp-scen button.is-on {
  background: color-mix(in srgb, var(--hp-gold) 16%, var(--hp-surface-deep));
}

@media (max-width: 1280px) {
  body[data-page="portfolio"] .hp-book {
    grid-template-columns: minmax(0, 1fr) 280px !important;
  }
  body[data-page="portfolio"] .hp-contrib { grid-column: 1 / -1; }
  .hp-tape-mod ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .hp-canvas-body {
    grid-template-columns: 1fr !important;
  }
  body[data-page="portfolio"] .hp-book {
    grid-template-columns: 1fr !important;
  }
  .hp-agent-acts { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hp-tape-mod ol { grid-template-columns: 1fr 1fr; }
  .hp-exec-rail {
    grid-template-columns: 1fr 1fr 1fr !important;
    row-gap: 14px;
  }
  .hp-exec-rail li { white-space: normal; }
  .hp-fp, .hp-topo { height: 72px !important; }
  .hp-inv-score { grid-template-columns: 1fr 1fr 1fr; }
  .hp-routes svg { height: 140px; }
  body[data-page="overview"] .hp-board-kpi { min-height: 132px !important; }
}
@media (max-width: 480px) {
  .hp-tape-mod ol { grid-template-columns: 1fr; }
  .hp-vault-stats { grid-template-columns: 1fr 1fr 1fr; }
  .hp-exec-rail { grid-template-columns: 1fr 1fr !important; }
  .hp-pagehead-act { justify-content: flex-start; }
  .hp-inv-score { grid-template-columns: 1fr; }
}

.hp-pick .hp-mini,
.hp-pick .gadget,
.hp-pick .hp-sparkline {
  width: 100% !important;
  display: block;
}
.hp-canvas-rail {
  flex-wrap: wrap;
}
.hp-geo-canvas .hp-chart-tools {
  margin-left: auto;
}
.hp-cmp-table {
  width: 100%;
  table-layout: fixed;
}
.hp-cmp-table th:first-child,
.hp-cmp-table td:first-child,
.hp-cmp-table tbody th {
  width: 22%;
}
@media (max-width: 820px) {
  .hp-geo-canvas .hp-chart-tools,
  .hp-canvas-rail .hp-chart-tools {
    width: 100%;
    justify-content: flex-start;
    margin: 8px 0 0;
  }
  .hp-note { max-width: 42%; font-size: 10px; }
  .hp-log-head, .hp-log-row {
    grid-template-columns: 48px 44px 1fr !important;
  }
  .hp-log-head span:nth-child(3),
  .hp-log-row span:nth-child(3),
  .hp-log-head span:nth-child(5),
  .hp-log-row span:nth-child(5) { display: none !important; }
  .hp-log-head span:nth-child(4),
  .hp-log-row span:nth-child(4) { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-chart polyline.draw { animation: none !important; }
  .hp-pick.is-selected { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════
   DESK 10K — command palette, live tape, shortcuts, as-of
   ══════════════════════════════════════════════════════════ */
.hp-cmdchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 12px;
  border-radius: 8px;
  background: var(--hp-workspace-raised);
  color: var(--hp-text-secondary);
  box-shadow: 0 0 0 1px var(--hp-border-subtle);
  font-size: 13px;
  font-weight: 650;
}
.hp-cmdchip svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.hp-cmdchip span { color: var(--hp-text-muted); }
.hp-cmdchip:hover {
  color: var(--hp-text-primary);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.45);
}
.hp-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--hp-surface-deep);
  box-shadow: 0 0 0 1px var(--hp-border-default);
  color: var(--hp-text-secondary);
  font-family: var(--figure);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.hp-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hp-text-faint);
  display: inline-block;
}
.hp-led.is-live {
  background: var(--hp-positive);
  box-shadow: 0 0 0 3px rgba(72, 212, 154, 0.18);
  animation: led-breathe 2.4s ease-in-out infinite;
}
@keyframes led-breathe {
  50% { box-shadow: 0 0 0 5px rgba(72, 212, 154, 0.08); }
}
.hp-telem { overflow-x: auto; overflow-y: hidden; }
.hp-telem-row { white-space: nowrap; scrollbar-width: none; }
.hp-telem-row::-webkit-scrollbar { display: none; }
.hp-telem .cell { white-space: nowrap; }
.hp-telem .cell.venue { gap: 6px; }
.hp-telem .cell.venue label { color: var(--hp-positive); }
.hp-telem .cell.last label { color: var(--hp-gold); }
.hp-telem .cell.utc label { color: var(--hp-text-muted); }
.hp-telem .cell.utc b,
.hp-telem .cell.last b,
[data-tick],
[data-last-print],
[data-utc] {
  font-variant-numeric: tabular-nums;
  font-family: var(--figure);
}
[data-tick].is-tick,
[data-last-print].is-tick {
  color: var(--hp-cyan-bright);
}

.hp-deskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 28px;
  padding: 0 18px;
  background: var(--hp-void);
  color: var(--hp-text-muted);
  font-family: var(--figure);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 -1px 0 var(--hp-border-subtle);
}
.hp-deskbar b { color: var(--hp-text-secondary); font-weight: 650; }
.hp-deskbar-live {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--hp-positive);
  font-weight: 700;
}
.hp-deskbar-keys {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--hp-text-secondary);
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
}
.hp-deskbar-keys:hover { color: var(--hp-text-primary); background: var(--hp-surface-2); }
body.hp .hp-main { padding-bottom: 56px; }
.hp-toast {
  display: flex;
  align-items: baseline;
  gap: 10px;
  left: auto !important;
  right: 18px;
  top: auto !important;
  bottom: 40px !important;
  transform: translateY(6px) !important;
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--hp-surface-floating) !important;
  color: var(--hp-text-primary);
  box-shadow: 0 0 0 1px var(--hp-border-strong), 0 18px 40px -20px rgba(0,0,0,0.7);
  font-weight: 650;
}
.hp-toast.is-on { transform: translateY(0) !important; }
.hp-toast time {
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--hp-gold);
}
.hp-toast em {
  font-style: normal;
  font-size: 11px;
  color: var(--hp-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hp-toast.is-l3 { box-shadow: 0 0 0 1px var(--hp-gold), 0 18px 40px -20px rgba(0,0,0,0.7); }

.search-overlay form.hp-kbar,
.search-overlay .hp-kbar {
  width: min(560px, calc(100% - 32px));
  padding: 8px 8px 0;
  background: var(--hp-surface-floating);
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--hp-border-strong), 0 32px 64px -28px rgba(0,0,0,0.78);
}
.hp-kbar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  border-bottom: 1px solid var(--hp-border-subtle);
}
.hp-kbar-head input {
  flex: 1;
  min-height: 48px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--hp-text-primary);
  background: transparent;
  border: 0;
}
.hp-kbar-head input:focus { outline: none; }
.search-hits {
  max-height: min(52vh, 420px);
  overflow: auto;
  padding: 8px 4px 6px;
}
.hp-kbar-group {
  margin: 8px 10px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
.search-hits button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  background: transparent;
}
.search-hits button span { display: grid; gap: 1px; min-width: 0; }
.search-hits button b {
  color: var(--hp-text-primary);
  font-size: 13.5px;
  font-weight: 650;
}
.search-hits button em {
  font-style: normal;
  font-size: 12px;
  color: var(--hp-text-muted);
}
.search-hits button.is-on,
.search-hits button:hover {
  background: var(--hp-surface-selected) !important;
  box-shadow: inset 2px 0 0 var(--hp-gold);
}
.hp-kbar-empty {
  padding: 18px 12px;
  color: var(--hp-text-muted);
  font-size: 13px;
}
.hp-kbar-foot {
  display: flex;
  gap: 14px;
  padding: 8px 12px;
  border-top: 1px solid var(--hp-border-subtle);
  color: var(--hp-text-muted);
  font-size: 11px;
}
.hp-kbar-foot span { display: inline-flex; align-items: center; gap: 6px; }

.hp-keys {
  position: fixed; inset: 0; z-index: 132;
  display: none; place-items: center;
  background: rgba(4, 10, 14, 0.72);
  padding: 20px;
}
.hp-keys.is-on { display: grid; }
.hp-keys-card {
  width: min(440px, 100%);
  background: var(--hp-surface-floating);
  border-radius: 12px;
  padding: 18px 18px 12px;
  box-shadow: 0 0 0 1px var(--hp-border-strong), var(--shadow);
}
.hp-keys-card header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  margin-bottom: 12px;
}
.hp-keys-card header .hp-icon-btn { grid-column: 2; grid-row: 1 / span 2; }
.hp-keys-card dl { display: grid; gap: 8px; }
.hp-keys-card dl div {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--hp-border-subtle);
}
.hp-keys-card dt { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.hp-keys-then { color: var(--hp-text-muted); font-size: 11px; }
.hp-keys-card dd { margin: 0; color: var(--hp-text-secondary); font-size: 13px; }

#inspector-addr,
.hp-user-id[data-copy] { cursor: pointer; }
#inspector-addr:hover { color: var(--hp-cyan-bright); }

@media (max-width: 1100px) {
  .hp-telem .cell.venue b { display: none; }
  .hp-cmdchip span { display: none; }
}
@media (max-width: 820px) {
  .hp-deskbar { display: none; }
  .hp-toast { right: 12px; bottom: 88px !important; top: auto !important; }
  body.hp .hp-main { padding-bottom: 96px; }
  .hp-telem .cell.last,
  .hp-telem .cell.utc { display: none; }
}
@media (max-width: 480px) {
  .hp-cmdchip { width: 36px; padding: 0; justify-content: center; }
  .hp-cmdchip .hp-kbd { display: none; }
  .hp-telem .cell.venue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-led.is-live { animation: none; }
  [data-tick].is-tick, [data-last-print].is-tick { color: inherit; }
}

/* ══════════════════════════════════════════════════════════
   TAPE FIT + HOVER SCRUB
   ══════════════════════════════════════════════════════════ */
.hp-telem {
  height: 34px !important;
  overflow: hidden !important;
  background: #061016 !important;
  box-shadow: inset 0 -1px 0 var(--hp-border-subtle);
  flex: none;
  position: relative;
}
.hp-telem::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--hp-cyan) 18%, var(--hp-violet) 50%, var(--hp-gold) 82%, transparent);
  opacity: 0.65;
}
.hp-telem-row {
  height: 34px;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px !important;
  padding: 0 16px;
  min-width: 0;
  overflow: hidden !important;
  white-space: nowrap;
}
.hp-telem-metrics,
.hp-telem-end {
  display: flex;
  align-items: center;
  min-width: 0;
}
.hp-telem-metrics {
  gap: 18px;
  overflow: hidden;
}
.hp-telem-end {
  gap: 16px;
  flex: none;
}
.hp-telem .cell {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: none;
  min-width: 0;
  overflow: hidden;
}
.hp-telem .cell b {
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-telem-spark {
  display: block;
  width: 36px;
  height: 12px;
  background:
    linear-gradient(var(--hp-cyan), var(--hp-cyan)) 0 100% / 3px 45% no-repeat,
    linear-gradient(var(--hp-cyan), var(--hp-cyan)) 7px 100% / 3px 80% no-repeat,
    linear-gradient(var(--hp-gold), var(--hp-gold)) 14px 100% / 3px 100% no-repeat,
    linear-gradient(var(--hp-cyan), var(--hp-cyan)) 21px 100% / 3px 60% no-repeat,
    linear-gradient(var(--hp-violet), var(--hp-violet)) 28px 100% / 3px 72% no-repeat;
  opacity: 0.8;
}
.hp-last.is-scan {
  color: var(--hp-gold-bright, #E8C57A);
  box-shadow: 0 0 0 1px var(--hp-gold);
}
.hp-note { pointer-events: none !important; }
.hp-chart, .hp-week, .gadget, [data-gadget] { cursor: crosshair; }
.hp-week .col {
  cursor: crosshair;
  min-width: 0;
}
.hp-week .col b {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
  pointer-events: none;
  font-family: var(--figure);
  font-size: 11px;
  font-weight: 750;
  color: var(--hp-text-primary);
  background: var(--hp-surface-floating);
  border-radius: 6px;
  padding: 2px 6px;
  box-shadow: 0 0 0 1px var(--hp-gold);
  white-space: nowrap;
  z-index: 2;
}
.hp-week .col.is-on b {
  opacity: 1;
  transform: translate(-50%, -2px);
  color: var(--hp-text-primary) !important;
  background: var(--hp-surface-floating) !important;
}
.hp-week .col:first-child b {
  left: 0;
  transform: none;
}
.hp-week .col:last-child b {
  left: auto;
  right: 0;
  transform: none;
}
.hp-week .col.is-on:first-child b,
.hp-week .col.is-on:last-child b {
  transform: translateY(-2px);
}
.hp-week .col.is-on label {
  color: var(--hp-gold) !important;
}
.hp-week .col.is-dim .bar { opacity: 0.38; }
.hp-week .bar {
  background: var(--hp-surface-3);
  transition: height 0.16s var(--ease, ease), background 0.16s ease, opacity 0.16s ease;
}
.hp-week .col.is-on .bar {
  background: var(--hp-gold);
  box-shadow: 0 10px 20px -8px rgba(214, 166, 74, 0.55);
}
.hp-week-read {
  color: var(--hp-text-primary);
  font-family: var(--figure);
  font-weight: 700;
}
.hp-scan-read {
  color: var(--hp-gold);
  font-family: var(--figure);
  font-variant-numeric: tabular-nums;
}
.gadget .cap {
  font-variant-numeric: tabular-nums;
}
.gadget.is-scan .cap {
  color: var(--hp-gold);
}
.hp-tape-mod li,
.hp-board-table tbody tr,
.hp-ob-row,
.hp-xrow,
.hp-water li,
#whale-table [data-pick],
.hp-pick {
  cursor: pointer;
}
@media (max-width: 1280px) {
  .hp-telem .cell.venue label { display: none; }
  .hp-telem-row { gap: 12px !important; }
  .hp-telem-metrics { gap: 12px; }
}
@media (max-width: 1100px) {
  .hp-telem .cell.venue { display: none; }
  .hp-telem-end { gap: 12px; }
}
@media (max-width: 820px) {
  .hp-telem-row { gap: 10px !important; }
  .hp-telem-metrics { gap: 10px; }
  .hp-telem .cell.spark,
  .hp-telem .cell.last,
  .hp-telem .cell.utc { display: none; }
}
@media (max-width: 480px) {
  .hp-telem .cell.venue { display: none; }
  .hp-telem-metrics { gap: 8px; }
  .hp-telem label { letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-week .bar,
  .hp-week .col b { transition: none; }
}

.hp-feed-status {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
.hp-feed-status[data-state="live"] { color: var(--hp-positive); }
.hp-feed-status[data-state="stale"] { color: var(--hp-gold); }
.hp-feed-status[data-state="wait"] { color: var(--hp-cyan); }
.hp-feed-status[data-state="error"] { color: var(--hp-negative); }
.hp-board-kpi.is-wait b,
.hp-board-figure b:is([data-live]) { min-width: 4ch; }
.hp-tape-mod .hp-trust,
[data-live="tape-src"] {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hp-text-faint);
  font-weight: 700;
}

body[data-page="whales"] .hp-board-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}
body[data-page="whales"] .hp-board-kpi {
  position: relative;
  background: var(--hp-surface-1);
  min-height: 118px;
  padding: 16px 18px 14px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  overflow: hidden;
}
body[data-page="whales"] .hp-board-kpi::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--kpi-rail, var(--hp-cyan));
}
body[data-page="whales"] .hp-board-kpi.inst-vol { --kpi-rail: var(--hp-cyan); }
body[data-page="whales"] .hp-board-kpi.inst-oi { --kpi-rail: var(--hp-violet); }
body[data-page="whales"] .hp-board-kpi.inst-liq { --kpi-rail: var(--hp-positive); }
body[data-page="whales"] .hp-board-kpi.inst-fund { --kpi-rail: var(--hp-negative); }
body[data-page="whales"] .hp-board-kpi .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
body[data-page="whales"] .hp-board-kpi label {
  font-size: 10px;
  font-weight: 800;
  color: var(--hp-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-page="whales"] .hp-board-kpi b {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
}
body[data-page="whales"] .hp-board-kpi .hp-meta {
  margin-top: 8px;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="whales"] .hp-whale-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.72fr);
  gap: 14px;
  align-items: start;
}
body[data-page="whales"] .hp-board-card {
  background: var(--hp-surface-raised);
  border-radius: var(--r);
  padding: 20px 22px 18px;
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
}
body[data-page="whales"] .hp-whale-table-card .hp-card-head {
  align-items: center;
  gap: 12px;
}
body[data-page="whales"] .hp-whale-table-card .hp-search-field {
  min-width: 180px;
  max-width: 240px;
}
body[data-page="whales"] .hp-th-sort {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
body[data-page="whales"] .hp-th-sort.is-on {
  color: var(--hp-cyan);
}
body[data-page="whales"] .hp-th-sort.is-on::after {
  content: " ↓";
  font-size: 10px;
}
body[data-page="whales"] .hp-whale-table td,
body[data-page="whales"] .hp-whale-table th { white-space: nowrap; }
body[data-page="whales"] .hp-whale-table tbody tr {
  cursor: pointer;
}
body[data-page="whales"] .hp-whale-table tbody tr.is-on {
  background: var(--hp-surface-selected);
  box-shadow: inset 2px 0 0 var(--hp-cyan);
}
body[data-page="whales"] .hp-whale-table .addr {
  font-family: var(--figure);
  font-weight: 650;
  letter-spacing: -0.02em;
}
body[data-page="whales"] .hp-whale-table .rank {
  color: var(--hp-text-muted);
  font-variant-numeric: tabular-nums;
  width: 48px;
}
body[data-page="whales"] .hp-whale-note { margin-top: 12px; }
body[data-page="whales"] .hp-whale-lead .hp-h2 {
  font-family: var(--figure);
  letter-spacing: -0.03em;
}
body[data-page="whales"] .hp-whale-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
body[data-page="whales"] .hp-whale-kpis .hp-kpi {
  background: var(--hp-surface-2);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
body[data-page="whales"] .hp-whale-kpis b {
  display: block;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="whales"] .hp-whale-kpis label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
body[data-page="whales"] .hp-whale-facts {
  display: grid;
  gap: 8px;
}
body[data-page="whales"] .hp-whale-facts p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  color: var(--hp-text-secondary);
}
body[data-page="whales"] .hp-whale-facts b { color: var(--hp-text-primary); }
body[data-page="whales"] .hp-whale-prints {
  max-height: 360px;
  overflow: auto;
}
body[data-page="whales"] .hp-whale-prints li,
body[data-page="whales"] .hp-timeline li {
  grid-template-columns: 54px 1fr;
}
@media (max-width: 1100px) {
  body[data-page="whales"] .hp-whale-board { grid-template-columns: 1fr; }
  body[data-page="whales"] .hp-board-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  body[data-page="whales"] .hp-board-kpis { grid-template-columns: 1fr 1fr; }
  body[data-page="whales"] .hp-pagehead-act { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  body[data-page="whales"] .hp-board-kpis { grid-template-columns: 1fr; }
}

body[data-page="copy-trading"] .hp-copy-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hp-gold) 10%, var(--hp-surface-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hp-gold) 35%, transparent);
  color: var(--hp-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-page="copy-trading"] .hp-board-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}
body[data-page="copy-trading"] .hp-board-kpi {
  position: relative;
  background: var(--hp-surface-1);
  min-height: 118px;
  padding: 16px 18px 14px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  overflow: hidden;
}
body[data-page="copy-trading"] .hp-board-kpi::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--kpi-rail, var(--hp-cyan));
}
body[data-page="copy-trading"] .hp-board-kpi.inst-vol { --kpi-rail: var(--hp-cyan); }
body[data-page="copy-trading"] .hp-board-kpi.inst-oi { --kpi-rail: var(--hp-positive); }
body[data-page="copy-trading"] .hp-board-kpi.inst-liq { --kpi-rail: var(--hp-violet); }
body[data-page="copy-trading"] .hp-board-kpi.inst-fund { --kpi-rail: var(--hp-gold); }
body[data-page="copy-trading"] .hp-board-kpi .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
body[data-page="copy-trading"] .hp-board-kpi label {
  font-size: 10px;
  font-weight: 800;
  color: var(--hp-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-page="copy-trading"] .hp-board-kpi b {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
}
body[data-page="copy-trading"] .hp-board-kpi .hp-meta {
  margin-top: 8px;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="copy-trading"] .hp-copy-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.78fr);
  gap: 14px;
  align-items: start;
}
body[data-page="copy-trading"] .hp-board-card {
  background: var(--hp-surface-raised);
  border-radius: var(--r);
  padding: 20px 22px 18px;
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
}
body[data-page="copy-trading"] .hp-copy-table-card .hp-card-head {
  align-items: center;
  gap: 12px;
}
body[data-page="copy-trading"] .hp-copy-table-card .hp-search-field {
  min-width: 180px;
  max-width: 240px;
}
body[data-page="copy-trading"] .hp-th-sort {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
body[data-page="copy-trading"] .hp-th-sort.is-on { color: var(--hp-cyan); }
body[data-page="copy-trading"] .hp-th-sort.is-on::after { content: " ↓"; font-size: 10px; }
body[data-page="copy-trading"] .hp-copy-table td,
body[data-page="copy-trading"] .hp-copy-table th { white-space: nowrap; }
body[data-page="copy-trading"] .hp-copy-table tbody tr { cursor: pointer; }
body[data-page="copy-trading"] .hp-copy-table tbody tr.is-on {
  background: var(--hp-surface-selected);
  box-shadow: inset 2px 0 0 var(--hp-positive);
}
body[data-page="copy-trading"] .hp-copy-table .addr {
  font-family: var(--figure);
  font-weight: 650;
  letter-spacing: -0.02em;
}
body[data-page="copy-trading"] .hp-copy-table .rank {
  color: var(--hp-text-muted);
  font-variant-numeric: tabular-nums;
  width: 48px;
}
body[data-page="copy-trading"] .hp-copy-note { margin-top: 12px; }
body[data-page="copy-trading"] .hp-copy-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
body[data-page="copy-trading"] .hp-copy-kpis .hp-kpi {
  background: var(--hp-surface-2);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
body[data-page="copy-trading"] .hp-copy-kpis b {
  display: block;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="copy-trading"] .hp-copy-kpis label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
body[data-page="copy-trading"] .hp-copy-facts {
  display: grid;
  gap: 8px;
}
body[data-page="copy-trading"] .hp-copy-facts p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  color: var(--hp-text-secondary);
}
body[data-page="copy-trading"] .hp-copy-facts b { color: var(--hp-text-primary); }
body[data-page="copy-trading"] .hp-copy-warn {
  color: var(--hp-gold);
  margin: 10px 0 12px;
}
body[data-page="copy-trading"] .hp-inline-num {
  width: 52px;
  margin: 0 4px;
  padding: 4px 6px;
  background: var(--hp-surface-2);
  color: inherit;
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--hp-border);
  font: inherit;
}
body[data-page="copy-trading"] .hp-copy-ticket .hp-sticky-act { width: 100%; }
body[data-page="copy-trading"] .hp-tk-group label.hp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
body[data-page="copy-trading"] .hp-copy-book { margin-top: 0; }
@media (max-width: 1100px) {
  body[data-page="copy-trading"] .hp-copy-board { grid-template-columns: 1fr; }
  body[data-page="copy-trading"] .hp-board-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  body[data-page="copy-trading"] .hp-board-kpis { grid-template-columns: 1fr 1fr; }
  body[data-page="copy-trading"] .hp-pagehead-act { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  body[data-page="copy-trading"] .hp-board-kpis { grid-template-columns: 1fr; }
}

body[data-page="vaults"] .hp-copy-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hp-gold) 10%, var(--hp-surface-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hp-gold) 35%, transparent);
  color: var(--hp-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-page="vaults"] .hp-board-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}
body[data-page="vaults"] .hp-board-kpi {
  position: relative;
  background: var(--hp-surface-1);
  min-height: 118px;
  padding: 16px 18px 14px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  overflow: hidden;
}
body[data-page="vaults"] .hp-board-kpi::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--kpi-rail, var(--hp-cyan));
}
body[data-page="vaults"] .hp-board-kpi.inst-vol { --kpi-rail: var(--hp-cyan); }
body[data-page="vaults"] .hp-board-kpi.inst-oi { --kpi-rail: var(--hp-positive); }
body[data-page="vaults"] .hp-board-kpi.inst-liq { --kpi-rail: var(--hp-violet); }
body[data-page="vaults"] .hp-board-kpi.inst-fund { --kpi-rail: var(--hp-gold); }
body[data-page="vaults"] .hp-board-kpi .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
body[data-page="vaults"] .hp-board-kpi label {
  font-size: 10px;
  font-weight: 800;
  color: var(--hp-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-page="vaults"] .hp-board-kpi b {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
}
body[data-page="vaults"] .hp-board-kpi .hp-meta {
  margin-top: 8px;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="vaults"] .hp-vault-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.78fr);
  gap: 14px;
  align-items: start;
}
body[data-page="vaults"] .hp-board-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
body[data-page="vaults"] .hp-board-card {
  background: var(--hp-surface-raised);
  border-radius: var(--r);
  padding: 20px 22px 18px;
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  overflow: hidden;
}
body[data-page="vaults"] .hp-vgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body[data-page="vaults"] .hp-vcard {
  display: grid;
  gap: 10px;
  text-align: left;
  padding: 16px 16px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--hp-surface-1);
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--hp-border);
  cursor: pointer;
  min-width: 0;
}
body[data-page="vaults"] .hp-vcard.is-on {
  background: var(--hp-surface-selected);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--route-accent) 55%, var(--hp-border)), inset 2px 0 0 var(--route-accent);
}
body[data-page="vaults"] .hp-vcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
body[data-page="vaults"] .hp-vault-kind {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
body[data-page="vaults"] .hp-vcard .hp-h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.03em;
}
body[data-page="vaults"] .hp-vcard-addr {
  margin: 0;
  font-size: 12px;
  color: var(--hp-text-secondary);
}
body[data-page="vaults"] .hp-vpill {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--hp-gold) 16%, transparent);
  color: var(--hp-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-page="vaults"] .hp-vault-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body[data-page="vaults"] .hp-vault-stats span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
body[data-page="vaults"] .hp-vault-stats b {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="vaults"] .hp-util {
  height: 6px;
  border-radius: 99px;
  background: var(--hp-surface-2);
  overflow: hidden;
}
body[data-page="vaults"] .hp-util i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--route-accent), var(--route-accent-2));
}
body[data-page="vaults"] .hp-mchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body[data-page="vaults"] .hp-mchip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--hp-surface-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
body[data-page="vaults"] .hp-vault-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
body[data-page="vaults"] .hp-vault-kpis .hp-kpi {
  background: var(--hp-surface-2);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
body[data-page="vaults"] .hp-vault-kpis b {
  display: block;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="vaults"] .hp-vault-kpis label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
body[data-page="vaults"] .hp-vault-facts {
  display: grid;
  gap: 8px;
}
body[data-page="vaults"] .hp-vault-facts p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  color: var(--hp-text-secondary);
}
body[data-page="vaults"] .hp-vault-facts b { color: var(--hp-text-primary); }
body[data-page="vaults"] .hp-copy-warn {
  color: var(--hp-gold);
  margin: 10px 0 12px;
}
body[data-page="vaults"] .hp-vault-ticket .hp-sticky-act { width: 100%; }
body[data-page="vaults"] .hp-vault-ticket .hp-tabs {
  justify-content: flex-start;
  margin: 0 0 12px;
}
body[data-page="vaults"] .hp-tx-sum {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--hp-text-secondary);
}
body[data-page="vaults"] .hp-tx-sum b { color: var(--hp-text-primary); }
body[data-page="vaults"] .hp-hist {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(12, 133, 123, 0.2), transparent 46%),
    var(--route-deep);
  color: #ececec;
}
body[data-page="vaults"] .hp-hist .hp-h2 { color: #fff; }
body[data-page="vaults"] .hp-hist .hp-sub { color: #b7c8c2; }
body[data-page="vaults"] .hp-hist .hp-chart {
  height: 280px;
  min-height: 240px;
  overflow: hidden;
}
@media (max-width: 1100px) {
  body[data-page="vaults"] .hp-vault-board { grid-template-columns: 1fr; }
  body[data-page="vaults"] .hp-board-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  body[data-page="vaults"] .hp-board-kpis { grid-template-columns: 1fr 1fr; }
  body[data-page="vaults"] .hp-pagehead-act { flex-wrap: wrap; }
  body[data-page="vaults"] .hp-vgrid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  body[data-page="vaults"] .hp-board-kpis { grid-template-columns: 1fr; }
}

body[data-page="portfolio"] .hp-copy-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hp-gold) 10%, var(--hp-surface-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hp-gold) 35%, transparent);
  color: var(--hp-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-page="portfolio"] .hp-board-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}
body[data-page="portfolio"] .hp-board-kpi {
  position: relative;
  background: var(--hp-surface-1);
  min-height: 118px;
  padding: 16px 18px 14px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  overflow: hidden;
}
body[data-page="portfolio"] .hp-board-kpi::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--kpi-rail, var(--hp-cyan));
}
body[data-page="portfolio"] .hp-board-kpi.inst-vol { --kpi-rail: var(--hp-cyan); }
body[data-page="portfolio"] .hp-board-kpi.inst-oi { --kpi-rail: var(--hp-positive); }
body[data-page="portfolio"] .hp-board-kpi.inst-liq { --kpi-rail: var(--hp-violet); }
body[data-page="portfolio"] .hp-board-kpi.inst-fund { --kpi-rail: var(--hp-gold); }
body[data-page="portfolio"] .hp-board-kpi .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
body[data-page="portfolio"] .hp-board-kpi label {
  font-size: 10px;
  font-weight: 800;
  color: var(--hp-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-page="portfolio"] .hp-board-kpi b {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
}
body[data-page="portfolio"] .hp-board-kpi .hp-meta {
  margin-top: 8px;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="portfolio"] .hp-pf-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.78fr);
  gap: 14px;
  align-items: start;
}
body[data-page="portfolio"] .hp-board-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
body[data-page="portfolio"] .hp-board-card {
  background: var(--hp-surface-raised);
  border-radius: var(--r);
  padding: 20px 22px 18px;
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
  overflow: hidden;
}
body[data-page="portfolio"] .hp-pf-table-head {
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
body[data-page="portfolio"] .hp-pf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
body[data-page="portfolio"] .hp-pf-table td,
body[data-page="portfolio"] .hp-pf-table th { white-space: nowrap; }
body[data-page="portfolio"] .hp-pf-table tbody tr { cursor: pointer; }
body[data-page="portfolio"] .hp-pf-table tbody tr.is-on {
  background: var(--hp-surface-selected);
  box-shadow: inset 2px 0 0 var(--route-accent);
}
body[data-page="portfolio"] .hp-pf-table tr.is-long { background: color-mix(in srgb, var(--hp-positive) 6%, transparent); }
body[data-page="portfolio"] .hp-pf-table tr.is-short { background: color-mix(in srgb, var(--hp-negative) 6%, transparent); }
body[data-page="portfolio"] .hp-btn-tiny {
  padding: 4px 10px;
  font-size: 11px;
  min-height: 28px;
}
body[data-page="portfolio"] .hp-pf-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
body[data-page="portfolio"] .hp-pf-kpis .hp-kpi {
  background: var(--hp-surface-2);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
body[data-page="portfolio"] .hp-pf-kpis b {
  display: block;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="portfolio"] .hp-pf-kpis label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
body[data-page="portfolio"] .hp-pf-facts {
  display: grid;
  gap: 8px;
}
body[data-page="portfolio"] .hp-pf-facts p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  color: var(--hp-text-secondary);
}
body[data-page="portfolio"] .hp-pf-facts b { color: var(--hp-text-primary); }
body[data-page="portfolio"] .hp-copy-warn {
  color: var(--hp-gold);
  margin: 10px 0 12px;
}
body[data-page="portfolio"] .hp-pf-ticket .hp-sticky-act { width: 100%; }
body[data-page="portfolio"] .hp-pf-xrow { margin: 0 0 12px; }
body[data-page="portfolio"] .hp-pf-xlab {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
body[data-page="portfolio"] .hp-util {
  height: 6px;
  border-radius: 99px;
  background: var(--hp-surface-2);
  overflow: hidden;
}
body[data-page="portfolio"] .hp-util i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--route-accent), var(--route-accent-2));
}
body[data-page="portfolio"] .hp-hist {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(101, 156, 255, 0.18), transparent 46%),
    var(--route-deep);
  color: #ececec;
}
body[data-page="portfolio"] .hp-hist .hp-h2 { color: #fff; }
body[data-page="portfolio"] .hp-hist .hp-sub { color: #b7c8c2; }
body[data-page="portfolio"] .hp-hist .hp-chart {
  height: 280px;
  min-height: 240px;
  overflow: hidden;
}
body[data-page="portfolio"] .net {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body[data-page="portfolio"] .net img {
  width: 18px;
  height: 18px;
}
@media (max-width: 1100px) {
  body[data-page="portfolio"] .hp-pf-board { grid-template-columns: 1fr; }
  body[data-page="portfolio"] .hp-board-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  body[data-page="portfolio"] .hp-board-kpis { grid-template-columns: 1fr 1fr; }
  body[data-page="portfolio"] .hp-pagehead-act { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  body[data-page="portfolio"] .hp-board-kpis { grid-template-columns: 1fr; }
}

/* Cohesion — shared desk chrome, KPIs, banners, empty/error */
.hp-desk-banner,
.hp-copy-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hp-gold) 10%, var(--hp-surface-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hp-gold) 35%, transparent);
  color: var(--hp-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-page="overview"] .hp-board-kpis,
body[data-page="whales"] .hp-board-kpis,
body[data-page="copy-trading"] .hp-board-kpis,
body[data-page="vaults"] .hp-board-kpis,
body[data-page="portfolio"] .hp-board-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}
body[data-page="overview"] .hp-board-kpi,
body[data-page="whales"] .hp-board-kpi,
body[data-page="copy-trading"] .hp-board-kpi,
body[data-page="vaults"] .hp-board-kpi,
body[data-page="portfolio"] .hp-board-kpi {
  position: relative;
  min-height: 118px;
  padding: 16px 18px 14px;
  border-radius: var(--r-sm);
  background: var(--hp-surface-1);
  box-shadow: 0 0 0 1px var(--hp-border), var(--hp-shadow-quiet);
}
body[data-page="overview"] .hp-board-kpi b,
body[data-page="whales"] .hp-board-kpi b,
body[data-page="copy-trading"] .hp-board-kpi b,
body[data-page="vaults"] .hp-board-kpi b,
body[data-page="portfolio"] .hp-board-kpi b {
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--hp-text-primary);
}
body[data-page="overview"] .hp-board-kpi .chg,
body[data-page="overview"] .hp-board-kpi .hp-meta,
body[data-page="overview"] .hp-board-kpi small,
body[data-page="whales"] .hp-board-kpi .chg,
body[data-page="whales"] .hp-board-kpi .hp-meta,
body[data-page="whales"] .hp-board-kpi small,
body[data-page="copy-trading"] .hp-board-kpi .chg,
body[data-page="copy-trading"] .hp-board-kpi .hp-meta,
body[data-page="copy-trading"] .hp-board-kpi small,
body[data-page="vaults"] .hp-board-kpi .chg,
body[data-page="vaults"] .hp-board-kpi .hp-meta,
body[data-page="vaults"] .hp-board-kpi small,
body[data-page="portfolio"] .hp-board-kpi .chg,
body[data-page="portfolio"] .hp-board-kpi .hp-meta,
body[data-page="portfolio"] .hp-board-kpi small {
  font-size: 12px;
  font-weight: 650;
  color: var(--hp-text-muted);
}
body[data-page="overview"] .hp-board-kpi label,
body[data-page="whales"] .hp-board-kpi label,
body[data-page="copy-trading"] .hp-board-kpi label,
body[data-page="vaults"] .hp-board-kpi label,
body[data-page="portfolio"] .hp-board-kpi label {
  font-size: 10px;
  font-weight: 800;
  color: var(--hp-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hp-feed-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}
.hp-feed-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex: none;
}
.hp-feed-status[data-state="live"] { color: var(--hp-positive); }
.hp-feed-status[data-state="stale"] { color: var(--hp-gold); }
.hp-feed-status[data-state="wait"] { color: var(--hp-cyan); }
.hp-feed-status[data-state="error"] { color: var(--hp-negative); }
.hp-board-kpi.is-wait b {
  color: var(--hp-text-faint);
  font-weight: 600;
}
.hp-empty,
.hp-error,
.hp-table td.hp-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--hp-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hp-error { color: var(--hp-negative); }
.hp-user[data-wallet-state="disconnected"] span { color: var(--hp-text-secondary); }
.hp-user[data-wallet-state="connecting"] span { color: var(--hp-gold); }
.hp-user[data-wallet-state="connected"] span { color: var(--hp-cyan-bright); font-family: var(--figure); }
.hp-user[data-wallet-state="wrong-chain"] span { color: var(--hp-gold); font-family: var(--figure); }
.hp-user-id[data-wallet-id] { color: var(--hp-text-secondary); }
.hp-user-id[data-copy]:not([data-copy=""]) { color: var(--hp-cyan-bright); cursor: pointer; }
.hp-addr,
.addr {
  font-family: var(--figure);
  letter-spacing: 0.02em;
}
@media (max-width: 1100px) {
  body[data-page="overview"] .hp-board-kpis,
  body[data-page="whales"] .hp-board-kpis,
  body[data-page="copy-trading"] .hp-board-kpis,
  body[data-page="vaults"] .hp-board-kpis,
  body[data-page="portfolio"] .hp-board-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  body[data-page="overview"] .hp-board-kpis,
  body[data-page="whales"] .hp-board-kpis,
  body[data-page="copy-trading"] .hp-board-kpis,
  body[data-page="vaults"] .hp-board-kpis,
  body[data-page="portfolio"] .hp-board-kpis { grid-template-columns: 1fr; }
}

.hp-wallet-card { width: min(440px, 100%); }
.hp-wallet-net {
  margin: 4px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hp-text-faint);
}
.hp-wallet-net.is-on { color: var(--hp-positive); }
.hp-wallet-net.is-off { color: var(--hp-gold); }
.hp-wallet-list { display: grid; gap: 8px; margin: 14px 0 10px; }
.hp-wallet-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--hp-surface-1);
  box-shadow: inset 0 0 0 1px var(--hp-border-default);
  color: var(--hp-text-primary);
}
.hp-wallet-opt:hover {
  box-shadow: inset 0 0 0 1px var(--hp-cyan);
}
.hp-wallet-opt img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
}
.hp-wallet-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hp-cyan);
  background: color-mix(in srgb, var(--hp-cyan) 12%, transparent);
}
.hp-wallet-mark svg { width: 16px; height: 16px; }
.hp-wallet-opt b { display: block; font-size: 14px; font-weight: 750; }
.hp-wallet-opt span span {
  display: block;
  margin-top: 2px;
  color: var(--hp-text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.hp-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.hp-pill.cyan {
  color: var(--hp-cyan);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hp-cyan) 45%, transparent);
}
.hp-pill.gold {
  color: var(--hp-gold);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hp-gold) 45%, transparent);
}
.hp-whale-acts {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hp-whale-acts .hp-btn { flex: 1; min-width: 132px; }
body[data-page="whales"] .hp-whale-book .hp-timeline { max-height: 220px; overflow: auto; }