:root {
  --paper: #030711;
  --surface: #07101e;
  --ink: #eaf5ff;
  --muted: #7f98ad;
  --line: rgba(132, 211, 255, .16);
  --forest: #50e8f2;
  --lime: #73f7b8;
  --amber: #ffc85c;
  --coral: #ff7067;
  --blue: #5b9dff;
  --purple: #9b81ff;
  --teal: #39d9c4;
  --void: #030711;
  --panel: rgba(9, 19, 35, .78);
  --panel-solid: #0a1424;
  --cyan: #50e8f2;
  --violet: #9b81ff;
  --solar: #ffc85c;
  --positive: #73f7b8;
  --danger: #ff7067;
  --shadow: 0 34px 100px rgba(0, 0, 0, .52), 0 0 0 1px rgba(120, 220, 255, .08);
}

html { color-scheme: dark; }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 12%, rgba(75, 74, 194, .22), transparent 27rem),
    radial-gradient(circle at 86% 78%, rgba(23, 190, 191, .12), transparent 32rem),
    linear-gradient(145deg, #01040a 0%, #070b19 48%, #020811 100%);
  font-family: "Bahnschrift", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(96, 194, 232, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 194, 232, .055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, #000 10%, transparent 82%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 11% 28%, rgba(255,255,255,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 17%, rgba(89,231,244,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 92% 66%, rgba(155,129,255,.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 84%, rgba(255,255,255,.32) 0 1px, transparent 1.5px);
  background-size: 210px 210px, 270px 270px, 320px 320px, 180px 180px;
}

button, input, select, textarea { font-family: inherit; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: rgba(80, 232, 242, .68);
}

.studio { grid-template-columns: minmax(280px, 360px) minmax(370px, 480px); gap: 48px; }

.brief { color: var(--ink); }
.brief .eyebrow, .eyebrow {
  color: var(--cyan);
  letter-spacing: .2em;
  text-shadow: 0 0 18px rgba(80,232,242,.42);
}
.brief h1 {
  color: #f2f7ff;
  text-shadow: 0 15px 50px rgba(0,0,0,.45);
}
.brief h1 span {
  color: transparent;
  background: linear-gradient(90deg, var(--cyan), #9d88ff 54%, #ff85d5);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(90,193,255,.25));
}
.brief > p, .brief li { color: #91a9bb; }
.brief-rule {
  width: 110px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 14px var(--cyan);
}
.brief li::before { color: var(--cyan); }
.demo-note {
  color: #91a9bb;
  background: rgba(8,18,33,.72);
  border-color: rgba(80,232,242,.18);
  box-shadow: inset 3px 0 0 rgba(80,232,242,.42);
}

.app {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% -8%, rgba(83, 104, 255, .22), transparent 29rem),
    linear-gradient(180deg, #080f1c 0%, #050b15 64%, #07101b 100%);
  border-color: rgba(116, 222, 255, .22);
  box-shadow: var(--shadow), 0 0 80px rgba(49, 129, 255, .09);
}

.app::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .55;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(91,157,255,.08) 50%, transparent 50.3%),
    radial-gradient(circle at 50% 15%, rgba(80,232,242,.09), transparent 32%);
}

.app::after {
  content: "";
  position: absolute;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(190,230,255,.08) 4px);
  mix-blend-mode: screen;
}

.topbar {
  background: linear-gradient(180deg, rgba(5,11,22,.98), rgba(5,11,22,.84));
  border-bottom: 1px solid rgba(80,232,242,.12);
  box-shadow: 0 14px 35px rgba(0,0,0,.2);
}
.brand-mark::before {
  border-color: var(--cyan);
  border-right-color: transparent;
  box-shadow: 0 0 14px rgba(80,232,242,.7), inset 0 0 10px rgba(80,232,242,.28);
  animation: nexusSpin 8s linear infinite;
}
.brand-mark::after {
  background: var(--violet);
  border-color: #08101d;
  box-shadow: 0 0 12px var(--violet);
}
.brand b { color: #f1f8ff; letter-spacing: .02em; }
.brand small { color: #66859c; font-family: "Bahnschrift", monospace; letter-spacing: .09em; }
.icon-btn {
  color: var(--cyan);
  background: rgba(9,21,38,.8);
  border-color: rgba(80,232,242,.2);
  box-shadow: inset 0 0 20px rgba(80,232,242,.04), 0 0 18px rgba(80,232,242,.04);
}

main { position: relative; }
.section-head h2 { color: #edf6ff; letter-spacing: -.02em; }
.section-head p, .allocation-title small { color: #6f8ca2; }
.text-btn { color: var(--cyan); text-shadow: 0 0 16px rgba(80,232,242,.25); }

.today-card {
  position: relative;
  overflow: hidden;
  color: #ecfaff;
  background:
    linear-gradient(105deg, rgba(20,51,70,.95), rgba(18,25,52,.96)),
    #0a1725;
  border: 1px solid rgba(80,232,242,.3);
  box-shadow: 0 12px 36px rgba(0,0,0,.22), inset 0 0 28px rgba(80,232,242,.045);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.today-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  left: -100px;
  background: linear-gradient(90deg, transparent, rgba(145,242,255,.12), transparent);
  transform: skewX(-14deg);
  animation: dataSweep 5.5s ease-in-out infinite;
}
.today-icon {
  color: #041012;
  background: linear-gradient(145deg, var(--cyan), var(--positive));
  box-shadow: 0 0 22px rgba(80,232,242,.45);
  border-radius: 10px 16px 10px 16px;
}
.today-card small { color: #8eabba; }
.today-card strong { color: var(--cyan); }

.allocation-card, .panel, .strategy-card, .status-card, .position-card, .summary-tile, .insight {
  position: relative;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(13,27,47,.92), rgba(7,16,30,.84));
  border-color: rgba(109,207,255,.18);
  box-shadow: inset 0 1px 0 rgba(216,242,255,.04), 0 12px 28px rgba(0,0,0,.18);
}

.allocation-card::before, .panel::before, .strategy-card::before, .position-card::before {
  content: "";
  position: absolute;
  left: 13px;
  top: -1px;
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 12px rgba(80,232,242,.65);
}

.allocation-card {
  overflow: hidden;
  border-radius: 18px 30px 18px 30px;
  background:
    linear-gradient(180deg, rgba(15,32,55,.93), rgba(5,14,27,.9)),
    #091421;
}
.allocation-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  top: 0;
  opacity: .65;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 14px var(--cyan);
  animation: verticalScan 5.8s ease-in-out infinite;
  pointer-events: none;
}
.allocation-title h2 { color: #f0f8ff; }
.privacy {
  color: var(--cyan);
  background: rgba(80,232,242,.07);
  border: 1px solid rgba(80,232,242,.16);
  box-shadow: inset 0 0 18px rgba(80,232,242,.04);
}

.wheel-wrap {
  min-height: 270px;
  background:
    radial-gradient(circle, rgba(80,232,242,.055) 0 1px, transparent 2px) center / 14px 14px;
  mask-image: radial-gradient(circle, #000 20%, transparent 72%);
}
.wheel {
  width: 230px;
  height: 230px;
  background: conic-gradient(
    #40e9ff 0 15%, #74f5b6 15% 27%, #2dc8b5 27% 35%, #478dff 35% 45%,
    #9b81ff 45% 50%, #ffc85c 50% 60%, #ff7568 60% 85%, #ca72ff 85% 100%
  );
  box-shadow:
    0 0 0 1px rgba(164,230,255,.3),
    0 0 30px rgba(63,191,255,.2),
    0 0 80px rgba(72,95,255,.14),
    inset 0 0 32px rgba(255,255,255,.14);
  animation: coreFloat 5s ease-in-out infinite;
}
.wheel::before {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 1px dashed rgba(100,221,255,.4);
  border-left-color: rgba(155,129,255,.75);
  box-shadow: 0 0 22px rgba(80,232,242,.12);
  animation: nexusSpin 15s linear infinite;
}
.wheel::after {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px solid rgba(80,232,242,.1);
  border-top-color: var(--cyan);
  border-bottom-color: var(--violet);
  filter: drop-shadow(0 0 5px rgba(80,232,242,.55));
  animation: nexusSpinReverse 9s linear infinite;
}
.target-ring {
  background: conic-gradient(
    #226679 0 18%, #36795e 18% 28%, #247a72 28% 36%, #315d9d 36% 46%,
    #5a4790 46% 52%, #957029 52% 64%, #974a43 64% 84%, #663e91 84% 100%
  );
  box-shadow: 0 0 0 5px #07111f, inset 0 0 25px rgba(0,0,0,.28);
}
.wheel-center {
  color: #f0f9ff;
  background:
    radial-gradient(circle at 50% 40%, rgba(80,232,242,.12), transparent 55%),
    #07101d;
  border: 1px solid rgba(80,232,242,.3);
  box-shadow: 0 0 26px rgba(80,232,242,.16), inset 0 0 30px rgba(80,232,242,.05);
}
.wheel-center small { color: #6f8ca2; }
.wheel-center strong { color: #f3fbff; text-shadow: 0 0 18px rgba(80,232,242,.5); }
.wheel-center span { color: var(--positive); }
.ring-caption { color: #6f8ca2; }
.ring-caption .actual i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.ring-caption .target i { border-color: var(--violet); box-shadow: 0 0 7px rgba(155,129,255,.5); }

.asset-chip {
  color: var(--ink);
  background: rgba(9,21,37,.82);
  border-color: rgba(119,197,238,.15);
  border-radius: 9px 15px 9px 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.asset-chip:hover { transform: translateY(-2px); border-color: rgba(80,232,242,.42); background: rgba(15,34,54,.95); }
.asset-chip i { box-shadow: 0 0 12px var(--asset); }
.asset-chip small, .status-card p, .insight small, .insight span, .strategy-card p, .position-card p, .summary-tile small, .summary-tile span { color: #6f8ca2; }

.status-card, .position-card, .strategy-card { border-radius: 12px 22px 12px 22px; }
.status-card:hover, .position-card:hover, .strategy-card:hover { border-color: rgba(80,232,242,.34); }
.asset-symbol {
  border-radius: 10px 16px 10px 16px;
  border: 1px solid color-mix(in srgb, var(--strong) 55%, transparent);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--strong) 12%, transparent), 0 0 14px color-mix(in srgb, var(--strong) 12%, transparent);
}
.state { border: 1px solid currentColor; background: rgba(255,255,255,.03) !important; }
.state.hold { color: var(--positive); box-shadow: 0 0 16px rgba(115,247,184,.08); }
.state.watch { color: var(--solar); box-shadow: 0 0 16px rgba(255,200,92,.08); }
.state.trim { color: var(--danger); }
.state.stale { color: #8aa0b3; }

.insight { border-radius: 12px 22px 12px 22px; }
.insight strong { color: #f3faff; text-shadow: 0 0 14px rgba(80,232,242,.18); }

.segmented, .asset-switch {
  background: rgba(4,10,19,.86);
  border: 1px solid rgba(117,205,250,.14);
}
.segmented button, .asset-switch button { color: #708ca1; }
.segmented button.active, .asset-switch button.active {
  color: var(--cyan);
  background: linear-gradient(145deg, rgba(23,58,79,.9), rgba(18,25,52,.9));
  box-shadow: inset 0 0 20px rgba(80,232,242,.08), 0 0 18px rgba(80,232,242,.08);
}

.model-card, .asset-hero {
  color: #f0f8ff;
  background:
    radial-gradient(circle at 92% 8%, rgba(155,129,255,.25), transparent 35%),
    linear-gradient(135deg, rgba(15,42,62,.98), rgba(15,19,45,.98));
  border: 1px solid rgba(80,232,242,.24);
  border-radius: 16px 30px 16px 30px;
  box-shadow: inset 0 0 40px rgba(80,232,242,.035), 0 18px 40px rgba(0,0,0,.28);
}
.model-card p, .asset-hero small { color: #819db1; }
.model-score, .hero-price span { color: var(--positive); text-shadow: 0 0 16px rgba(115,247,184,.35); }
.model-meta div { border-color: rgba(125,211,255,.14); }
.model-meta small { color: #6d879a; }

.strategy-card .plan div, .position-numbers div, .driver, .ladder-row {
  color: var(--ink);
  background: rgba(5,13,25,.75);
  border: 1px solid rgba(117,201,244,.1);
}
.strategy-card .plan small, .position-numbers small { color: #68849a; }
.holding-summary .summary-tile.dark {
  background: linear-gradient(145deg, rgba(16,56,67,.95), rgba(12,28,46,.95));
  border-color: rgba(80,232,242,.3);
}
.summary-tile.dark small { color: #84a8b7; }
.summary-tile.dark span { color: var(--positive); }
.position-value small { color: var(--positive); }
.tiny-progress, .build-progress .bar { background: rgba(126,179,194,.13); }
.tiny-progress i, .build-progress .bar i {
  background: linear-gradient(90deg, var(--cyan), var(--positive));
  box-shadow: 0 0 12px rgba(80,232,242,.4);
}

.timeline::before { background: linear-gradient(var(--cyan), rgba(80,232,242,.06)); }
.event-dot {
  color: var(--cyan);
  background: #081321;
  border-color: rgba(80,232,242,.28);
  box-shadow: 0 0 14px rgba(80,232,242,.1);
}
.event-body { border-color: rgba(120,202,243,.12); }
.event-body p, .event-body time { color: #6f8ca2; }

.bottom-nav {
  background: rgba(4,10,19,.92);
  border-color: rgba(102,205,255,.16);
  box-shadow: 0 -16px 40px rgba(0,0,0,.32);
}
.nav-btn { color: #526d82; }
.nav-btn.active { color: var(--cyan); text-shadow: 0 0 12px rgba(80,232,242,.38); }
.nav-add span {
  color: #021014;
  background: linear-gradient(145deg, var(--cyan), var(--positive));
  border: 1px solid rgba(221,255,255,.7);
  box-shadow: 0 0 24px rgba(80,232,242,.42), 0 10px 30px rgba(0,0,0,.4);
  animation: addPulse 2.8s ease-in-out infinite;
}

.detail {
  background:
    radial-gradient(circle at 50% 0, rgba(80,97,255,.18), transparent 25rem),
    linear-gradient(180deg, #07101c, #030811 72%);
}
.detail-header {
  background: rgba(4,10,19,.9);
  border-bottom: 1px solid rgba(80,232,242,.12);
}
.asset-hero::after {
  border-color: rgba(80,232,242,.1);
  box-shadow: 0 0 45px rgba(80,232,242,.1);
}
.asset-hero h1 span { color: var(--positive); text-shadow: 0 0 18px rgba(115,247,184,.42); }
.hero-state { border-color: rgba(130,213,255,.14); }
.hero-state em {
  color: #02100e;
  background: linear-gradient(145deg, var(--positive), var(--cyan));
  box-shadow: 0 0 18px rgba(115,247,184,.3);
}

.panel { border-radius: 13px 23px 13px 23px; }
.panel-title p, .panel-title .asof, .track-caption, .risk-labels { color: #6f8ca2; }
.action-track { border: 1px solid rgba(112,201,245,.13); }
.action-track span { color: #b5c9d8; }
.action-track span:nth-child(1) { background: #142131; }
.action-track span:nth-child(2) { background: #12363a; }
.action-track span:nth-child(3) { background: #15483f; }
.action-track span:nth-child(4) { background: #4b4529; }
.action-track span:nth-child(5) { background: #553326; }
.action-track span:nth-child(6) { background: #54272d; }
.action-marker { background: #f4fbff; box-shadow: 0 0 12px var(--cyan), 0 0 0 1px #04101b; }
.risk-track {
  background: linear-gradient(90deg, var(--positive), var(--solar) 52%, var(--danger));
  box-shadow: 0 0 14px rgba(80,232,242,.1);
}
.risk-track i { background: #eafaff; border-color: #07101d; box-shadow: 0 0 14px var(--cyan); }

.driver .bar { background: rgba(111,156,177,.14); }
.ladder-row.current {
  color: #ecfbff;
  background: linear-gradient(90deg, rgba(20,73,76,.72), rgba(31,39,75,.62));
  border-color: rgba(80,232,242,.34);
  box-shadow: inset 3px 0 0 var(--cyan), 0 0 18px rgba(80,232,242,.06);
}
.ladder-row b { color: var(--cyan); }
.logic-list li { color: #94a9b9; }
.logic-list li::before {
  color: var(--positive);
  background: rgba(115,247,184,.08);
  border: 1px solid rgba(115,247,184,.2);
}
.logic-list li.risk::before { color: var(--solar); background: rgba(255,200,92,.08); border-color: rgba(255,200,92,.2); }
.version-row div { border-color: rgba(109,201,247,.14); background: rgba(5,13,25,.62); }
.version-row small { color: #6f8ca2; }
.version-row .latest { color: #eafff6; border-color: rgba(115,247,184,.25); background: rgba(34,90,70,.18); }

.sheet { background: rgba(0,3,9,.76); backdrop-filter: blur(9px); }
.sheet-card {
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0, rgba(80,232,242,.1), transparent 18rem),
    #08111e;
  border: 1px solid rgba(80,232,242,.22);
  box-shadow: 0 -28px 70px rgba(0,0,0,.52);
}
.sheet-handle { background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 10px var(--cyan); }
label { color: #7e9ab0; }
input, select, textarea {
  color: var(--ink);
  background: rgba(3,9,18,.78);
  border-color: rgba(112,204,249,.16);
}
input:focus, select:focus, textarea:focus { border-color: rgba(80,232,242,.48); box-shadow: inset 0 0 18px rgba(80,232,242,.04); }
.form-help { color: #7892a5; background: rgba(80,232,242,.05); border: 1px solid rgba(80,232,242,.1); }
.primary { color: #031113; background: linear-gradient(90deg, var(--cyan), var(--positive)); box-shadow: 0 0 20px rgba(80,232,242,.2); }
.toast { color: #eafff8; background: #0b2928; border: 1px solid rgba(115,247,184,.34); box-shadow: 0 0 24px rgba(115,247,184,.16); }

@keyframes nexusSpin { to { transform: rotate(360deg); } }
@keyframes nexusSpinReverse { to { transform: rotate(-360deg); } }
@keyframes coreFloat { 0%,100% { transform: rotate(-28deg) translateY(0); } 50% { transform: rotate(-28deg) translateY(-4px); } }
@keyframes dataSweep { 0%,64% { left: -100px; } 82%,100% { left: 120%; } }
@keyframes verticalScan { 0%,15% { top: 0; opacity: 0; } 28% { opacity: .65; } 70% { opacity: .3; } 82%,100% { top: 100%; opacity: 0; } }
@keyframes addPulse { 0%,100% { box-shadow: 0 0 20px rgba(80,232,242,.32), 0 10px 30px rgba(0,0,0,.4); } 50% { box-shadow: 0 0 34px rgba(80,232,242,.58), 0 10px 30px rgba(0,0,0,.4); } }

@media (max-width: 820px) {
  body { background: #030711; }
  .app { background: radial-gradient(circle at 50% 0, rgba(80,97,255,.17), transparent 25rem), linear-gradient(180deg, #07101d, #030811); }
}

@media (prefers-reduced-motion: reduce) {
  .wheel, .wheel::before, .wheel::after, .allocation-card::after, .today-card::after, .nav-add span, .brand-mark::before { animation: none !important; }
}