/* Background palette inspired by dongguanting/ToolSpace's README hero.
   The decorative star field is original; no project logos or text are reused. */
:root {
  --bg: #05070e;
  --panel: #0c1221; --panel2: #111b2f; --panel3: #18253c;
  --line: #202d45; --line2: #354764;
  --text: #edf2ff; --text2: #c1cbe0; --muted: #9baac4;
  --accent: #91afff; --accent2: #b1a1ff; --accent-bg: #142344;
  --button: #365bc4; --button-hover: #476fdc; --selection: #203457;
  --space-mint: #72d8c1;
  --glass-surface: rgba(11, 17, 31, .86);
  --glass-raised: rgba(19, 29, 49, .78);
  --glass-chrome: rgba(7, 11, 21, .94);
  --glass-overlay: rgba(11, 18, 33, .97);
  --glass-line: rgba(152, 179, 237, .17);
  --glass-shadow: inset 0 1px 0 rgba(183, 203, 255, .035), 0 12px 32px rgba(0, 0, 0, .18);
}
html { background: var(--bg); scrollbar-color: var(--line2) var(--bg); }
body {
  background-color: var(--bg);
  background-image: url('/static/space-field.svg'),
    radial-gradient(ellipse at 83% 16%, rgba(36, 60, 118, .27), transparent 48%),
    radial-gradient(ellipse at 22% 76%, rgba(66, 46, 116, .12), transparent 44%);
  background-size: 1600px 1000px, 100% 100vh, 100% 100vh;
  background-position: top center;
  background-repeat: repeat-y, no-repeat, no-repeat;
  background-attachment: fixed;
}
::selection { color: #fff; background: #334b7e; }
body::before { background: var(--glass-chrome); border-right-color: var(--glass-line); }
header { border-bottom-color: var(--glass-line); }
.brand-si { color: var(--space-mint); }
.brand-caption, .workspace-title, .workspace-title small, .nav-group,
.nav-group > span, .nav-code, nav a.active .nav-code { color: var(--muted); }
.workspace-dot, .signal-dot { background: var(--space-mint); box-shadow: 0 0 10px #72d8c133; }
nav { scrollbar-color: var(--line2) transparent; }
nav a:hover { color: var(--text); background: #91afff0d; }
nav a.active { color: #e5ecff; background: #6389ff1c; border-color: #91afff36; box-shadow: inset 2px 0 #91afff; }
nav a.active::before { background: var(--accent); }
.page-head, .page-head.home { border-color: var(--glass-line); }
.page-head.home {
  background: radial-gradient(ellipse at 93% 20%, #23396d3d, transparent 58%),
    radial-gradient(ellipse at 12% 100%, #62518c17, transparent 48%), var(--glass-surface);
  box-shadow: var(--glass-shadow);
}
.page-head.home h1 { color: #f0f4ff; }
.page-head .page-eyebrow, .page-head.home .page-eyebrow { color: #afc0e9; }
.home .hero-facts { border-top-color: var(--glass-line); }
.hero-facts b { color: #cdd9f4; }
.hero-facts > span:last-child b { color: var(--space-mint); }
.button-primary, a.global-x-follow, .about a.contact-link--follow {
  background: linear-gradient(120deg, #365bc4, #6257b8); border-color: #91afff45;
}
.button-primary:hover, a.global-x-follow:hover, .about a.contact-link--follow:hover {
  background: linear-gradient(120deg, #476fdc, #7567ce); border-color: #b1a1ff70;
}
.button-secondary:hover, button.ghost:hover:not(:disabled), .about .contact-link:hover {
  background: var(--selection); border-color: var(--line2);
}
.sec-title h2::before { background: linear-gradient(var(--accent), var(--accent2)); }
.tablewrap { scrollbar-color: var(--line2) var(--panel); }
tbody tr:nth-child(even):not(.detail) { background: #91afff04; }
tr.row:hover, .prediction-table tr.row:hover > td { background: #91afff0b; }
tr.detail td { background: #080e1a; box-shadow: inset 2px 0 var(--accent); }
.conf i b { background: var(--accent); }
.prediction-time-banner { background: #121f38; border-color: #32466b; border-left-color: var(--accent); color: #b5ccff; }
.prediction-time-banner strong, .prediction-time-banner strong small,
.prediction-time-banner > span:last-child { color: #d1e0ff; }
.ag.both, .gate-icon, .tts-beta { color: #b5ccff; background: #14233e; border-color: #32466b; }
.tts-copy h2 span, .tts-intro strong, .tts-footer span, .vis-atlas .vis-atlas-eyebrow { color: var(--accent); }
.cm-form textarea, .cm-form input, .cm-form select, .tokbox input,
#panel-EVOLVE select, #pl-filters input, #pl-filters select { background: var(--panel2); border-color: var(--line2); }
input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); }
.vis-atlas.card { background: #0a1422e6; }
.crypto-leverage { display: inline-block; min-width: 34px; padding: 2px 7px; border: 1px solid #72d8c135; border-radius: 6px; color: #9be4d2; background: #72d8c10c; text-align: center; font-size: 12px; font-weight: 600; }
#panel-CRYPTO .crypto-direction button { padding: 5px 12px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: 12px; }
#panel-CRYPTO .crypto-direction button.active { color: var(--text); background: var(--selection); border-color: var(--line2); }
#panel-CRYPTO .crypto-direction button:hover { color: var(--text); background: var(--selection); }
dialog::backdrop { background: #03060dd9; }
@media (max-width: 760px) {
  body { background-size: 1000px 900px, 100% 100vh, 100% 100vh; background-position: top right; }
  nav { background: var(--glass-overlay); border-color: var(--glass-line); }
  .status { border-top-color: var(--glass-line); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --glass-surface: var(--panel); --glass-raised: var(--panel2);
    --glass-chrome: var(--bg); --glass-overlay: var(--panel);
    --glass-line: var(--line2); --glass-shadow: none;
  }
  body { background: var(--bg); }
  .page-head.home { background: var(--panel); }
}