/*
  W&W Terminal V5 — Horizon Glass
  Completely new skin/theme built for a premium trading-agent website.
  Plain CSS by design so Claude Code can keep editing without framework lock-in.
*/
:root {
  color-scheme: dark;
  --bg: #050910;
  --bg-2: #07111f;
  --bg-3: #0c1726;
  --ink: #f4f8ff;
  --text: #e9f2ff;
  --muted: #9eb0c9;
  --quiet: #64728a;
  --surface: rgba(9, 18, 32, 0.76);
  --surface-2: rgba(14, 26, 44, 0.84);
  --surface-3: rgba(255,255,255,0.065);
  --frost: rgba(238, 246, 255, 0.08);
  --line: rgba(181, 214, 255, 0.16);
  --line-2: rgba(181, 214, 255, 0.28);
  --cobalt: #4aa3ff;
  --cyan: #50f5ff;
  --emerald: #48ffb5;
  --mint: #9cffdd;
  --violet: #a788ff;
  --rose: #ff5fa7;
  --amber: #ffcb6b;
  --red: #ff5576;
  --green: #45f5a6;
  --blue: #5ea4ff;
  --orange: #ffb35f;
  --gold: #ffcb6b;
  --shadow: 0 36px 120px rgba(0, 0, 0, 0.55);
  --soft-shadow: 0 20px 70px rgba(4, 10, 22, .44);
  --blur: blur(26px) saturate(135%);
  --radius-xl: 34px;
  --radius-lg: 25px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --nav: 292px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  background:
    radial-gradient(circle at 9% 10%, rgba(80,245,255,.22), transparent 32vw),
    radial-gradient(circle at 82% 8%, rgba(167,136,255,.18), transparent 34vw),
    radial-gradient(circle at 70% 82%, rgba(72,255,181,.14), transparent 36vw),
    linear-gradient(135deg, #050910 0%, #061220 42%, #0d1424 100%);
  overflow-x: hidden;
  letter-spacing: -0.01em;
}
body::selection { background: rgba(80,245,255,.33); color: #fff; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
strong { font-weight: 800; }
code, pre, .console { font-family: var(--mono); }
.hidden { display: none !important; }
.noscript { margin: 18px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 85, 118, .16); border: 1px solid rgba(255, 85, 118, .42); }

.background-spectra, .background-orbit {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  overflow: hidden;
}
.spectra-field {
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(105deg, transparent 0 42%, rgba(80,245,255,.08) 43% 44%, transparent 45% 100%),
    linear-gradient(22deg, transparent 0 51%, rgba(72,255,181,.08) 52% 53%, transparent 54% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 74px);
  transform: rotate(-8deg) scale(1.1);
  mask-image: radial-gradient(circle at 55% 40%, #000 0 48%, transparent 75%);
}
.spectra-ring, .orbit {
  position: absolute;
  width: 58vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(181,214,255,.12);
  box-shadow: inset 0 0 80px rgba(80,245,255,.05), 0 0 90px rgba(80,245,255,.06);
}
.ring-a, .orbit-a { right: -18vmax; top: -18vmax; }
.ring-b, .orbit-b { width: 42vmax; left: -16vmax; bottom: -12vmax; border-color: rgba(72,255,181,.12); }
.ring-c, .orbit-c { width: 28vmax; right: 18vw; bottom: 12vh; border-color: rgba(167,136,255,.13); }
.spectra-noise {
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image: radial-gradient(rgba(255,255,255,.5) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  mix-blend-mode: screen;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--mint);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.lede {
  color: #c9d8ee;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.72;
  max-width: 760px;
}
.hint, .muted, .page-subtitle { color: var(--muted); line-height: 1.55; }
.hint { font-size: 12px; }
.muted { font-size: 14px; }
.up, .green { color: var(--green) !important; }
.down, .red { color: var(--red) !important; }
.warn, .gold { color: var(--amber) !important; }
.violet { color: var(--violet) !important; }
.rt { color: var(--emerald); font-style: normal; font-size: .8em; }

/* Auth */
.auth-screen {
  min-height: 100vh;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .62fr);
  align-items: center;
  gap: 42px;
  padding: 54px 0;
}
.auth-hero {
  position: relative;
  min-height: 620px;
  padding: clamp(30px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(181,214,255,.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.018)),
    radial-gradient(circle at 24% 24%, rgba(80,245,255,.24), transparent 36%),
    radial-gradient(circle at 75% 15%, rgba(167,136,255,.18), transparent 34%),
    radial-gradient(circle at 74% 82%, rgba(72,255,181,.16), transparent 36%),
    rgba(8, 18, 33, .62);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.auth-hero::before {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  background:
    linear-gradient(90deg, transparent 0 30%, rgba(80,245,255,.14), transparent 60% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.034) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.024) 0 1px, transparent 1px 62px);
  transform: perspective(900px) rotateX(57deg) translateY(22%);
  transform-origin: bottom center;
  z-index: -1;
}
.auth-hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  top: 70px;
  right: 48px;
  border-radius: 50%;
  background: conic-gradient(from 160deg, transparent, rgba(80,245,255,.78), rgba(167,136,255,.58), rgba(72,255,181,.62), transparent 75%);
  filter: blur(.2px) drop-shadow(0 0 44px rgba(80,245,255,.22));
  opacity: .48;
  mask-image: radial-gradient(circle, transparent 0 43%, #000 44% 50%, transparent 51% 100%);
}
.luxury-mark {
  position: absolute;
  left: 44px;
  top: 42px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px solid rgba(80,245,255,.25);
  background: radial-gradient(circle, rgba(80,245,255,.18), transparent 70%);
}
.luxury-mark span { position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.luxury-mark span:nth-child(2) { inset: 36px; border-color: rgba(72,255,181,.34); }
.luxury-mark span:nth-child(3) { inset: 56px; background: var(--ink); box-shadow: 0 0 32px rgba(80,245,255,.46); }
.auth-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(44px, 7vw, 86px);
  line-height: .92;
  letter-spacing: -.075em;
}
.auth-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}
.auth-proof-grid div {
  min-height: 110px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(181,214,255,.15);
  background: rgba(255,255,255,.06);
  backdrop-filter: var(--blur);
}
.auth-proof-grid strong { display: block; font-size: 28px; letter-spacing: -.04em; }
.auth-proof-grid span { display: block; color: var(--muted); margin-top: 6px; font-size: 13px; }
.auth-panel, .glass-panel {
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(181,214,255,.18);
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    rgba(8, 17, 31, .78);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  overflow: hidden;
}
.auth-panel { padding: 26px; }
.panel-glow {
  position: absolute;
  inset: -30% -20% auto auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(80,245,255,.18);
  filter: blur(48px);
  pointer-events: none;
}
.auth-tabs { display: flex; gap: 10px; margin-bottom: 22px; }
.auth-tabs button {
  color: var(--text);
  border: 1px solid rgba(181,214,255,.15);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 10px 14px;
}
.auth-tabs .selected { background: linear-gradient(135deg, rgba(80,245,255,.18), rgba(72,255,181,.11)); border-color: rgba(80,245,255,.32); }
.auth-form { position: relative; display: grid; gap: 14px; }
.auth-form h2 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
label { display: grid; gap: 7px; color: #d8e7fb; font-size: 13px; font-weight: 760; }
input, select, textarea {
  width: 100%;
  color: var(--text);
  background: rgba(2, 8, 18, .62);
  border: 1px solid rgba(181,214,255,.16);
  border-radius: 16px;
  padding: 13px 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(80,245,255,.58);
  box-shadow: 0 0 0 4px rgba(80,245,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  background: rgba(5, 14, 27, .86);
}
summary { color: var(--muted); }

/* Buttons */
.primary-button, .ghost-button, .danger-button, .soft-button {
  min-height: 42px;
  border: 0;
  border-radius: 15px;
  padding: 11px 16px;
  color: var(--text);
  font-weight: 900;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.primary-button {
  color: #00131b;
  background: linear-gradient(135deg, #50f5ff, #48ffb5 72%, #dfffea);
  box-shadow: 0 18px 46px rgba(80,245,255,.20), inset 0 1px 0 rgba(255,255,255,.65);
}
.ghost-button, .soft-button {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(181,214,255,.16);
}
.soft-button { color: var(--mint); }
.danger-button {
  background: rgba(255,85,118,.12);
  border: 1px solid rgba(255,85,118,.28);
  color: #ffd7df;
}
.primary-button:hover, .ghost-button:hover, .danger-button:hover, .soft-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,.26), 0 0 0 1px rgba(80,245,255,.16) inset;
}
.full { width: 100%; }

/* Shell */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--nav) minmax(0, 1fr);
}
.side-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(4, 11, 22, .78);
  border-right: 1px solid rgba(181,214,255,.14);
  backdrop-filter: var(--blur);
  overflow-y: auto;
  scrollbar-width: thin;
  box-shadow: 18px 0 70px rgba(0,0,0,.24);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(181,214,255,.13);
}
.brand-emblem {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #01151e;
  font-size: 26px;
  font-weight: 950;
  background: linear-gradient(135deg, var(--cyan), var(--emerald));
  box-shadow: 0 18px 44px rgba(80,245,255,.22);
}
.brand strong { display: block; font-size: 20px; letter-spacing: -.04em; }
.brand em { display: block; margin-top: 2px; color: var(--muted); font-style: normal; font-size: 12px; }
.mini-glass {
  border-radius: 20px;
  border: 1px solid rgba(181,214,255,.13);
  background: rgba(255,255,255,.048);
  backdrop-filter: var(--blur);
}
.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
}
.avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #00131b;
  background: linear-gradient(135deg, #dff8ff, #48ffb5);
  font-weight: 950;
}
.user-card strong { display: block; font-size: 14px; }
.user-card span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.route-rail {
  display: grid;
  gap: 6px;
  padding: 5px;
}
.route-link {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 16px;
  color: #dce9fa;
  border: 1px solid transparent;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease), color .16s var(--ease);
}
.route-link::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}
.route-link:hover { background: rgba(255,255,255,.055); border-color: rgba(181,214,255,.12); transform: translateX(2px); }
.route-link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(80,245,255,.14), rgba(72,255,181,.07));
  border-color: rgba(80,245,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.route-link.active::before { background: linear-gradient(180deg, var(--cyan), var(--emerald)); box-shadow: 0 0 22px rgba(80,245,255,.65); }
.route-icon { display: grid; place-items: center; color: var(--mint); font-size: 18px; }
.route-link span:nth-child(2) { font-size: 13px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-link small { display: block; margin-top: 1px; color: var(--quiet); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.route-lock { color: var(--quiet); }
.nav-footer { margin-top: auto; padding: 13px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.mode-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.live-dot, .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 18px rgba(72,255,181,.8);
}
.mode-badge, .badge, .pill, .status-pill, .live-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 26px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #dbe9ff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(181,214,255,.15);
  background: rgba(255,255,255,.06);
}
.mode-badge.paper, .badge.gold { border-color: rgba(255,203,107,.32); color: var(--amber); background: rgba(255,203,107,.09); }
.mode-badge.safe, .badge.green, .status-pill { border-color: rgba(72,255,181,.32); color: var(--emerald); background: rgba(72,255,181,.085); }
.mode-badge.live, .badge.red { border-color: rgba(255,85,118,.36); color: var(--red); background: rgba(255,85,118,.10); }
.badge.violet, .pill { border-color: rgba(167,136,255,.28); color: #d7ccff; background: rgba(167,136,255,.09); }

.workspace {
  min-width: 0;
  padding: 22px clamp(16px, 2.4vw, 34px) 46px;
}
.top-command {
  position: sticky;
  top: 16px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(181,214,255,.14);
  border-radius: 26px;
  background: rgba(6, 14, 27, .74);
  backdrop-filter: var(--blur);
  box-shadow: 0 18px 60px rgba(0,0,0,.24);
}
.top-command h1 { margin: 0; font-size: clamp(25px, 3.1vw, 44px); line-height: .95; letter-spacing: -.06em; }
.page-subtitle { margin: 6px 0 0; max-width: 820px; font-size: 13px; }
.command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}
.command-search {
  width: min(380px, 30vw);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  border-radius: 16px;
  border: 1px solid rgba(181,214,255,.15);
  background: rgba(255,255,255,.045);
  padding: 0 10px;
}
.command-search input { border: 0; background: transparent; padding: 12px 4px; box-shadow: none; }
.command-search span { color: var(--mint); font-weight: 900; }
.mobile-row { display: none; }
.market-strip {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 6px 2px 14px;
  scrollbar-width: none;
}
.market-strip::-webkit-scrollbar { display: none; }
.market-strip span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 9px 12px;
  border: 1px solid rgba(181,214,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: 12px;
  backdrop-filter: blur(14px);
}
.market-strip strong { color: var(--text); }
.market-strip em { font-style: normal; font-weight: 900; }
.app-view { display: grid; gap: 16px; }

/* Cards and layout primitives */
.card, .stat-card, .metric-card, .progress-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(181,214,255,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.026)),
    rgba(9, 18, 34, .72);
  box-shadow: var(--soft-shadow);
  backdrop-filter: var(--blur);
  overflow: hidden;
}
.card { padding: 20px; }
.card::before, .metric-card::before, .stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(80,245,255,.52), transparent);
  opacity: .7;
}
.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.card-header h3 { margin: 0; font-size: 18px; letter-spacing: -.035em; }
.grid-2, .grid-3, .grid-4, .split-layout, .hero-layout, .admin-layout {
  display: grid;
  gap: 16px;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split-layout { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); }
.hero-layout { grid-template-columns: minmax(0, 1fr) 310px; }
.admin-layout { grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr); }
.stack, .feed-list, .journal-list, .timeline, .sensor-stack { display: grid; gap: 10px; }
.metric-card, .stat-card, .progress-card {
  padding: 18px;
  min-height: 128px;
}
.metric-card span, .stat-card .eyebrow { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.metric-card strong, .stat-card strong {
  display: block;
  margin: 10px 0 8px;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1;
  letter-spacing: -.055em;
}
.metric-card em, .stat-card p { color: var(--muted); font-style: normal; font-size: 13px; line-height: 1.45; }
.stat-card { background: rgba(255,255,255,.05); }
.executive-title { margin: 0; font-size: clamp(38px, 5.4vw, 74px); line-height: .92; letter-spacing: -.075em; }
.executive-card { padding: clamp(24px, 3vw, 36px); }
.executive-grid, .kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.executive-grid div, .kpi, .lab-row, .matrix-cell, .feed-item, .timeline-item, .journal-item, .risk-tile, .admin-user-row, .news-item, .note {
  border: 1px solid rgba(181,214,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.047);
}
.executive-grid div, .kpi { padding: 14px; }
.executive-grid strong, .kpi strong { display: block; font-size: 22px; letter-spacing: -.045em; }
.executive-grid span, .kpi span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.agent-orb {
  min-height: 320px;
  background:
    radial-gradient(circle at center, rgba(80,245,255,.22), transparent 28%),
    conic-gradient(from 180deg, rgba(80,245,255,.36), rgba(167,136,255,.22), rgba(72,255,181,.28), rgba(80,245,255,.36));
  mask-image: radial-gradient(circle, #000 0 58%, transparent 72%);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* V5 flagship */
.v5-floor { display: grid; gap: 16px; }
.v5-command-banner {
  min-height: 450px;
  padding: clamp(24px, 4vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, .72fr);
  gap: 26px;
  align-items: stretch;
  border-radius: 38px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.11), rgba(255,255,255,.024) 48%, rgba(72,255,181,.08)),
    radial-gradient(circle at 18% 16%, rgba(80,245,255,.26), transparent 31%),
    radial-gradient(circle at 84% 20%, rgba(167,136,255,.20), transparent 32%),
    radial-gradient(circle at 76% 86%, rgba(72,255,181,.16), transparent 34%),
    rgba(5, 13, 25, .82);
  overflow: hidden;
  isolation: isolate;
}
.v5-command-banner::after {
  content: "";
  position: absolute;
  inset: auto -8% -38% 18%;
  height: 72%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 54px),
    linear-gradient(90deg, transparent, rgba(80,245,255,.13), transparent);
  transform: perspective(900px) rotateX(64deg) rotateZ(-1deg);
  transform-origin: bottom;
  border-radius: 40px;
  opacity: .88;
  z-index: -1;
}
.v5-hero-copy { align-self: end; max-width: 850px; }
.v5-hero-copy .lede { max-width: 780px; }
.v5-orbit-stack {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
  border-radius: 32px;
  border: 1px solid rgba(181,214,255,.14);
  background:
    radial-gradient(circle at center, rgba(80,245,255,.13), transparent 33%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.028));
  overflow: hidden;
}
.v5-orbit-stack::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  border: 1px dashed rgba(181,214,255,.18);
}
.v5-signal-rings {
  position: relative;
  width: min(280px, 72%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,.04) 31%, transparent 32%),
    conic-gradient(from 60deg, rgba(80,245,255,.05), rgba(80,245,255,.9), rgba(72,255,181,.72), rgba(167,136,255,.58), rgba(80,245,255,.05));
  box-shadow: 0 0 70px rgba(80,245,255,.18);
  mask-image: radial-gradient(circle, transparent 0 34%, #000 35% 48%, transparent 49% 55%, #000 56% 58%, transparent 59% 100%);
}
.v5-signal-rings span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  color: #00151b;
  background: linear-gradient(135deg, #effcff, var(--emerald));
  font-weight: 1000;
  letter-spacing: -.07em;
  mask-image: none;
}
.v5-signal-rings i { position: absolute; inset: 22%; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.v5-signal-rings i:nth-child(3) { inset: 12%; border-style: dashed; }
.v5-signal-rings i:nth-child(4) { inset: 4%; border-color: rgba(72,255,181,.2); }
.v5-signal-rings b {
  position: absolute;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
  transform-origin: 0 50%;
  animation: sweep 5.5s linear infinite;
}
@keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.v5-mode-console {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 7px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(2,8,18,.68);
  border: 1px solid rgba(181,214,255,.14);
  backdrop-filter: blur(18px);
}
.v5-mode-console strong { font-size: 20px; letter-spacing: -.035em; }
.v5-mode-console em { color: var(--muted); font-style: normal; font-size: 12px; }
.v5-capsule-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.v5-capsule {
  min-height: 138px;
  padding: 18px;
  border-radius: 27px;
  border: 1px solid rgba(181,214,255,.13);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.026)),
    rgba(7, 16, 30, .74);
  box-shadow: var(--soft-shadow);
  position: relative;
  overflow: hidden;
}
.v5-capsule::after {
  content: "";
  position: absolute;
  inset: auto 14px 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--emerald), transparent);
  opacity: .65;
}
.v5-capsule span { display: block; color: var(--muted); font-size: 12px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.v5-capsule strong { display: block; margin: 13px 0 7px; font-size: clamp(21px, 2.2vw, 32px); line-height: 1; letter-spacing: -.06em; }
.v5-capsule em { color: var(--muted); font-style: normal; font-size: 12px; }
.v5-horizon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(350px, .72fr);
  gap: 16px;
}
.v5-liquidity-lens, .v5-risk-tower, .v5-agent-rail, .v5-notes { min-height: 100%; }
.v5-breadth-meter {
  position: relative;
  height: 46px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(181,214,255,.13);
  background: rgba(0,0,0,.22);
  margin-bottom: 12px;
}
.v5-breadth-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(80,245,255,.72), rgba(72,255,181,.72));
  box-shadow: 0 0 34px rgba(80,245,255,.20);
}
.v5-breadth-meter strong {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 16px;
  color: #eefcff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.v5-chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.v5-chip-cloud span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(181,214,255,.13);
  background: rgba(255,255,255,.05);
}
.v5-chip-cloud em { font-style: normal; font-weight: 900; }
.v5-dual-market { align-items: stretch; }
.v5-risk-core {
  width: min(260px, 88%);
  aspect-ratio: 1;
  margin: 16px auto 18px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(5, 13, 25, .98) 0 55%, transparent 56%),
    conic-gradient(var(--emerald) calc(var(--value) * 1%), rgba(255,255,255,.08) 0);
  box-shadow: inset 0 0 42px rgba(0,0,0,.5), 0 0 60px rgba(72,255,181,.12);
}
.v5-risk-core strong { font-size: 46px; letter-spacing: -.08em; color: #f8fffd; }
.v5-risk-core span { display: block; color: var(--muted); font-size: 12px; margin-top: 8px; letter-spacing: .08em; text-transform: uppercase; }
.v5-runway { display: grid; gap: 9px; }
.v5-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .52fr);
  gap: 16px;
}
.v5-decision-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Shared inner components */
.dual-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dual-table h4 { margin: 0 0 9px; color: #dbe9ff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.table-wrap { overflow: auto; border-radius: 18px; border: 1px solid rgba(181,214,255,.11); }
table { width: 100%; border-collapse: collapse; min-width: 420px; }
th, td { padding: 11px 12px; border-bottom: 1px solid rgba(181,214,255,.09); text-align: left; font-size: 13px; }
th { color: var(--quiet); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; background: rgba(255,255,255,.035); }
td { color: #dce8f8; }
tr:last-child td { border-bottom: 0; }
.asset strong { letter-spacing: -.02em; }
.chart-wrap { height: 340px; border-radius: 20px; border: 1px solid rgba(181,214,255,.11); background: rgba(0,0,0,.18); overflow: hidden; }
.chart-wrap canvas { width: 100%; height: 100%; display: block; }
.matrix, .premium-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.matrix-cell { padding: 14px; }
.matrix-cell h4 { margin: 10px 0 5px; font-size: 15px; letter-spacing: -.02em; }
.matrix-cell p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.matrix-cell strong, .risk-tile strong { display: block; margin: 8px 0; font-size: 18px; }
.lab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
}
.lab-row strong { display: block; font-size: 14px; }
.lab-row p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.toggle {
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(181,214,255,.14);
  background: rgba(255,255,255,.05);
}
.toggle::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--quiet); transition: transform .18s var(--ease), background .18s var(--ease); }
.toggle.on { background: rgba(72,255,181,.13); border-color: rgba(72,255,181,.25); }
.toggle.on::before { transform: translateX(17px); background: var(--emerald); box-shadow: 0 0 18px rgba(72,255,181,.54); }
.feed-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
}
.feed-rank {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(80,245,255,.1);
  color: var(--mint);
  font-weight: 950;
}
.feed-item h4 { margin: 0 0 4px; font-size: 14px; }
.feed-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.timeline-item {
  display: grid;
  grid-template-columns: 92px auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
}
.timeline-time { color: var(--quiet); font-family: var(--mono); font-size: 11px; }
.timeline-detail { color: #dce9fa; font-size: 13px; }
.journal-item { padding: 14px; }
.journal-item header { display: flex; justify-content: space-between; gap: 10px; }
.journal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.empty-state {
  min-height: 130px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed rgba(181,214,255,.18);
  border-radius: 20px;
  color: var(--muted);
  background: rgba(255,255,255,.028);
  padding: 18px;
}
.skeleton-line {
  height: 16px;
  width: 86%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(80,245,255,.14), rgba(255,255,255,.05));
  background-size: 260% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton-line.short { width: 46%; margin-top: 10px; }
@keyframes shimmer { 0% { background-position: 0 0; } 100% { background-position: -260% 0; } }

/* Forms and admin */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.journal-form { display: grid; gap: 10px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}
.user-admin { display: grid; gap: 10px; }
/* Conviction bar (Strategy Lab scan) — a thin track with a coloured fill set inline by width %. */
.bar {
  display: inline-block;
  width: 70px;
  height: 7px;
  border-radius: 999px;
  background: rgba(158, 176, 201, .18);
  overflow: hidden;
  vertical-align: middle;
}
.bar span { display: block; height: 100%; border-radius: 999px; }
/* Graduation progress (Backtests) — track + fill driven by the inline --value custom property. */
.progress-line {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: rgba(158, 176, 201, .18);
  overflow: hidden;
  margin-top: 8px;
}
.progress-line span {
  position: absolute;
  inset: 0;
  width: var(--value, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cobalt), var(--emerald));
}
.note, .news-item { padding: 14px; }
.note h4, .news-item h4 { margin: 0 0 6px; }
.news-item a { color: #eaf6ff; }
.news-item p, .note p { margin: 0; color: var(--muted); line-height: 1.5; }
.console {
  white-space: pre-wrap;
  overflow: auto;
  color: #bdfdee;
  background: rgba(0, 9, 17, .76);
  border: 1px solid rgba(80,245,255,.18);
  border-radius: 18px;
  padding: 14px;
  font-size: 12px;
  line-height: 1.55;
  box-shadow: inset 0 0 26px rgba(80,245,255,.035);
}
.px.flash-up, .flash-up { animation: flashUp .7s ease; }
.px.flash-down, .flash-down { animation: flashDown .7s ease; }
@keyframes flashUp { 0% { color: var(--emerald); text-shadow: 0 0 16px rgba(72,255,181,.7); } 100% { } }
@keyframes flashDown { 0% { color: var(--red); text-shadow: 0 0 16px rgba(255,85,118,.65); } 100% { } }

/* Drawer, palette, dialog, toast */
.copilot-drawer {
  position: fixed;
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: min(470px, calc(100vw - 36px));
  z-index: 70;
  transform: translateX(calc(100% + 38px));
  transition: transform .28s var(--ease);
  padding: 24px;
  border-radius: 30px;
  border: 1px solid rgba(181,214,255,.18);
  background: rgba(5, 14, 27, .88);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  overflow: auto;
}
body.copilot-open .copilot-drawer { transform: translateX(0); }
.copilot-drawer h2 { margin: 0 0 8px; font-size: 30px; line-height: 1; letter-spacing: -.055em; }
.copilot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.copilot-grid article {
  border-radius: 18px;
  border: 1px solid rgba(181,214,255,.13);
  background: rgba(255,255,255,.05);
  padding: 13px;
}
.copilot-grid span, .copilot-grid em { display: block; color: var(--muted); font-size: 11px; font-style: normal; }
.copilot-grid strong { display: block; margin: 7px 0; font-size: 13px; }
.copilot-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(181,214,255,.15);
  border-radius: 50%;
  color: var(--text);
  background: rgba(255,255,255,.06);
}
.palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 4, 12, .62);
  backdrop-filter: blur(8px);
  display: none;
}
.command-palette {
  position: fixed;
  left: 50%;
  top: 13vh;
  width: min(680px, calc(100vw - 32px));
  z-index: 90;
  transform: translate(-50%, -18px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  padding: 20px;
  border-radius: 28px;
  border: 1px solid rgba(181,214,255,.18);
  background: rgba(6, 15, 29, .93);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
}
body.palette-open .palette-backdrop { display: block; }
body.palette-open .command-palette { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.palette-input {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  border: 1px solid rgba(80,245,255,.23);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  padding: 5px 10px;
}
.palette-input input { border: 0; background: transparent; box-shadow: none; padding: 14px 4px; }
.palette-input span { color: var(--mint); font-weight: 950; }
.palette-routes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.palette-routes button {
  color: var(--text);
  border: 1px solid rgba(181,214,255,.14);
  background: rgba(255,255,255,.055);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 850;
}
.dialog-card {
  width: min(520px, calc(100vw - 30px));
  border: 1px solid rgba(181,214,255,.18);
  border-radius: 28px;
  color: var(--text);
  background: rgba(6, 15, 29, .96);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  padding: 0;
}
.dialog-card::backdrop { background: rgba(0,4,12,.68); backdrop-filter: blur(8px); }
.dialog-card form { position: relative; padding: 26px; }
.dialog-card h2 { margin: 0 0 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 36px));
}
.toast {
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(80,245,255,.25);
  background: rgba(6, 15, 29, .91);
  color: #eaffff;
  box-shadow: 0 18px 60px rgba(0,0,0,.36);
  backdrop-filter: blur(18px);
}

/* Focus / stealth mode */
body.focus-mode .market-strip,
body.focus-mode .page-subtitle,
body.focus-mode .nav-footer { opacity: .36; }
body.focus-mode .card:not(.v5-command-banner):not(.v5-risk-tower) { background-color: rgba(4, 10, 20, .88); }
body.focus-mode .background-spectra { opacity: .42; }

/* Responsive */
@media (max-width: 1280px) {
  :root { --nav: 260px; }
  .grid-4, .v5-capsule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5-decision-map { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .command-search { width: 280px; }
}
@media (max-width: 1060px) {
  .app-shell { grid-template-columns: 1fr; }
  .side-nav { position: relative; height: auto; display: none; }
  .workspace { padding: 14px 12px 36px; }
  .top-command { position: relative; top: 0; grid-template-columns: 1fr; }
  .mobile-row { display: block; }
  .command-actions { justify-content: flex-start; }
  .command-search { width: 100%; max-width: none; }
  .auth-screen, .v5-command-banner, .v5-horizon-grid, .v5-bottom-grid, .split-layout, .hero-layout, .admin-layout { grid-template-columns: 1fr; }
  .auth-hero { min-height: 520px; }
  .copilot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .auth-screen { width: min(100% - 22px, 680px); gap: 14px; padding: 12px 0 30px; }
  .auth-hero, .auth-panel { border-radius: 24px; }
  .auth-proof-grid, .grid-2, .grid-3, .grid-4, .v5-capsule-grid, .dual-table, .matrix, .premium-matrix, .v5-decision-map, .form-grid { grid-template-columns: 1fr; }
  .auth-hero h1, .executive-title { font-size: clamp(38px, 13vw, 56px); }
  .v5-command-banner { min-height: auto; padding: 22px; border-radius: 28px; }
  .v5-orbit-stack { min-height: 300px; }
  .top-command { padding: 14px; border-radius: 22px; }
  .command-actions .ghost-button:not(.icon-command), .command-actions .danger-button { flex: 1 1 calc(50% - 8px); }
  .chart-wrap { height: 270px; }
  .table-wrap { border-radius: 14px; }
  .timeline-item { grid-template-columns: 1fr; }
  .journal-item header, .card-header { display: grid; }
  .admin-user-row { grid-template-columns: 1fr; }
}