@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

:root {
  color-scheme: dark;
  --bg:#07090c;
  --panel:#0b0e13;
  --panel2:#0e1219;
  --surface-elevated:#111722;
  --border:#141c26;
  --border2:#1c2a3a;
  --text:#d7e3ef;
  --dim:#7f95ad;
  --muted:#162131;
  --logo-text:#f8fbff;
  --input-bg:#0e1623;
  --input-hover-bg:#172437;
  --focus-ring:0 0 0 3px rgba(64,196,255,.18);
  --shadow-soft:0 14px 36px rgba(0,0,0,.28);
  --row-hover:rgba(255,255,255,.035);
  --green:#00e676;
  --green2:rgba(0,230,118,.14);
  --red:#ff1744;
  --red2:rgba(255,23,68,.14);
  --blue:#40c4ff;
  --blue2:rgba(64,196,255,.12);
  --amber:#ffd740;
  --amber2:rgba(255,215,64,.12);
  --purple:#ce93d8;
  --purple2:rgba(206,147,216,.12);
  --teal:#64ffda;
  --teal2:rgba(100,255,218,.10);
  --orange:#ff9100;
  --orange2:rgba(255,145,0,.12);
  --hl:var(--blue);
  --hl2:var(--blue2);
  --overlay-bg:rgba(7,9,12,.92);
  --overlay-border:var(--border2);
  --menu-shadow:0 4px 14px rgba(0,0,0,.5);
  --chart-grid:rgba(20,28,38,.9);
  --chart-axis-text:#7890ad;
  --chart-future-mask:rgba(7,9,12,.52);
  --chart-price-inner:#07090c;
  --chart-crosshair:rgba(168,189,208,.18);
  --chart-footer:rgba(148,168,190,.95);
  --chart-hov-time:rgba(196,181,253,.98);
  --chart-sq-stroke:rgba(255,255,255,.35);
  --chart-x-exit:rgba(255,255,255,.7);
}

[data-theme="light"] {
  color-scheme: light;
  --bg:#eef2f7;
  --panel:#f9fbfe;
  --panel2:#f2f5fa;
  --surface-elevated:#ffffff;
  --border:#dce4ee;
  --border2:#c6d2df;
  --text:#1d2733;
  --dim:#607185;
  --muted:#e7edf5;
  --logo-text:#111827;
  --input-bg:#ffffff;
  --input-hover-bg:#edf3fa;
  --focus-ring:0 0 0 3px rgba(45,92,247,.16);
  --shadow-soft:0 16px 40px rgba(30,41,59,.10);
  --row-hover:rgba(45,92,247,.055);
  --green:#15803d;
  --green2:rgba(21,128,61,.12);
  --red:#dc2626;
  --red2:rgba(220,38,38,.12);
  --blue:#2563eb;
  --blue2:rgba(37,99,235,.12);
  --amber:#b7791f;
  --amber2:rgba(183,121,31,.14);
  --purple:#7c3aed;
  --purple2:rgba(124,58,237,.12);
  --teal:#0f766e;
  --teal2:rgba(15,118,110,.12);
  --orange:#ea580c;
  --orange2:rgba(234,88,12,.13);
  --hl:var(--blue);
  --hl2:var(--blue2);
  --overlay-bg:rgba(255,255,255,.96);
  --overlay-border:var(--border2);
  --menu-shadow:0 8px 24px rgba(30,41,59,.12);
  --chart-grid:rgba(15,23,42,.08);
  --chart-axis-text:#64748b;
  --chart-future-mask:rgba(238,242,247,.78);
  --chart-price-inner:#ffffff;
  --chart-crosshair:rgba(15,23,42,.12);
  --chart-footer:#64748b;
  --chart-hov-time:rgba(37,99,235,.95);
  --chart-sq-stroke:rgba(15,23,42,.22);
  --chart-x-exit:rgba(15,23,42,.65);
}

body.ui-page {
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(64,196,255,.08), transparent 34rem),
    radial-gradient(circle at 85% 12%, rgba(0,230,118,.055), transparent 26rem),
    var(--bg);
  color:var(--text);
  font-family:'JetBrains Mono', monospace;
}

[data-theme="light"] body.ui-page {
  background:
    radial-gradient(circle at 20% 0%, rgba(37,99,235,.10), transparent 34rem),
    radial-gradient(circle at 85% 12%, rgba(15,118,110,.07), transparent 26rem),
    var(--bg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, sans-serif;
}

body.ui-page h1,
body.ui-page h2,
body.ui-page .card-title,
body.ui-page .modal-title {
  color:var(--logo-text);
}

body.ui-page .sub,
body.ui-page label,
body.ui-page .form-label,
body.ui-page .stat-label,
body.ui-page .empty-state,
body.ui-page .tabs button {
  color:var(--dim);
}

body.ui-page header,
body.ui-page .panel,
body.ui-page .card,
body.ui-page .modal-content,
body.ui-page .trader-card {
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-soft);
}

body.ui-page .panel h2,
body.ui-page .card-header,
body.ui-page .modal-title {
  border-color:var(--border);
}

body.ui-page input,
body.ui-page select,
body.ui-page textarea,
body.ui-page pre {
  background:var(--input-bg);
  border:1px solid var(--border2);
  border-radius:8px;
  color:var(--text);
  font-family:inherit;
}

body.ui-page input::placeholder,
body.ui-page textarea::placeholder {
  color:var(--dim);
  opacity:.75;
}

body.ui-page input:focus,
body.ui-page select:focus,
body.ui-page textarea:focus {
  border-color:var(--blue);
  box-shadow:var(--focus-ring);
}

body.ui-page button,
body.ui-page .btn {
  border-radius:8px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text);
  transition:background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body.ui-page button:hover,
body.ui-page .btn:hover {
  border-color:var(--blue);
  color:var(--blue);
  background:var(--blue2);
}

body.ui-page button:focus-visible,
body.ui-page .btn:focus-visible {
  outline:none;
  box-shadow:var(--focus-ring);
}

body.ui-page .btn.primary,
body.ui-page button.primary,
body.ui-page button:not(.secondary):not(.theme-toggle):not(.stop-btn):not(.delete-trader-btn):not(.btn-destructive) {
  border-color:var(--green);
  color:var(--green);
  background:var(--green2);
}

body.ui-page .btn.primary:hover,
body.ui-page button.primary:hover,
body.ui-page button:not(.secondary):not(.theme-toggle):not(.stop-btn):not(.delete-trader-btn):not(.btn-destructive):hover {
  background:rgba(0,230,118,.20);
}

[data-theme="light"] body.ui-page .btn.primary,
[data-theme="light"] body.ui-page button.primary,
[data-theme="light"] body.ui-page button:not(.secondary):not(.theme-toggle):not(.stop-btn):not(.delete-trader-btn):not(.btn-destructive) {
  background:var(--blue);
  border-color:var(--blue);
  color:#ffffff;
}

[data-theme="light"] body.ui-page .btn.primary:hover,
[data-theme="light"] body.ui-page button.primary:hover,
[data-theme="light"] body.ui-page button:not(.secondary):not(.theme-toggle):not(.stop-btn):not(.delete-trader-btn):not(.btn-destructive):hover {
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#ffffff;
}

body.ui-page button.secondary,
body.ui-page .btn.secondary {
  background:transparent;
  color:var(--text);
}

body.ui-page button:disabled {
  opacity:.45;
  cursor:not-allowed;
}

body.ui-page .badge,
body.ui-page .tabs button.on {
  border-radius:999px;
}

body.ui-page .badge.running,
body.ui-page .ok {
  color:var(--green);
}

body.ui-page .err {
  color:var(--red);
}

body.ui-page .trader-card:hover,
body.ui-page .card:hover,
body.ui-page .stat-row:hover {
  background:var(--row-hover);
}

body.ui-page a {
  color:var(--blue);
}

[data-theme="light"] body.ui-page .port,
[data-theme="light"] body.ui-page .chip {
  background:var(--surface-elevated);
  border-color:var(--border2);
  color:var(--dim);
}

[data-theme="light"] body.ui-page .card:hover .port,
[data-theme="light"] body.ui-page .chip:hover {
  background:var(--input-hover-bg);
  border-color:var(--blue);
  color:var(--text);
}

.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:32px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--input-bg);
  color:var(--dim);
  font:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;
}

.theme-toggle:hover {
  color:var(--blue);
  border-color:var(--blue);
  background:var(--blue2);
}

.ui-page .topbar {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.ui-page .topbar h1 {
  margin-bottom:4px;
}

body.trader-dashboard-page header {
  border-radius:14px;
}

body.trader-dashboard-page .card {
  border-radius:14px;
}

/* Market Physics dashboard: acento turquesa del sistema (sustituye verde en primarios y LIVE) */
body.trader-dashboard-page .btn.primary,
body.trader-dashboard-page button.primary {
  border-color:var(--teal);
  color:var(--teal);
  background:var(--teal2);
}
body.trader-dashboard-page .btn.primary:hover,
body.trader-dashboard-page button.primary:hover {
  background:rgba(100,255,218,.20);
  border-color:var(--teal);
  color:var(--teal);
}
body.trader-dashboard-page .badge.running {
  color:var(--teal);
  border-color:var(--teal);
  background:var(--teal2);
}
body.trader-dashboard-page .stat-value.green {
  color:var(--teal);
}
[data-theme="light"] body.trader-dashboard-page .btn.primary,
[data-theme="light"] body.trader-dashboard-page button.primary {
  background:var(--teal);
  border-color:var(--teal);
  color:#042018;
}
[data-theme="light"] body.trader-dashboard-page .btn.primary:hover,
[data-theme="light"] body.trader-dashboard-page button.primary:hover {
  background:#0d9488;
  border-color:#0d9488;
  color:#ffffff;
}

body.quant-page {
  max-width:760px;
}

body.quant-page .panel {
  padding:18px;
}

body.quant-page code {
  color:var(--teal);
}