/* WTJX Pulse - shared tokens. Light theme default, [data-theme=dark] overrides. */
:root {
  --brand-red: #ea1f27;
  --brand-pbs: #2638c4;
  --brand-blue: #1e7fc1;
  --brand-navy: #121340;
  --brand-gradient: linear-gradient(90deg, #ea1f27 0%, #a5002f 30%, #625d80 62%, #2638c4 100%);
  --bg: #f3f4fa;
  --panel: #ffffff;
  --panel-2: #f8f9fd;
  --field-bg: #ffffff;
  --line: rgba(18, 19, 64, .11);
  --line-strong: rgba(18, 19, 64, .22);
  --text: #121340;
  --muted: #5d6187;
  --accent: #2638c4;
  --accent-hover: #1d2c9e;
  --accent-rgb: 38, 56, 196;
  --accent-ink: #ffffff;
  --ok: #0d7f52;
  --ok-soft: rgba(13, 160, 100, .1);
  --warn: #8a5d00;
  --warn-soft: rgba(255, 191, 0, .16);
  --danger: #c62828;
  --danger-soft: rgba(198, 40, 40, .07);
  --live: #ea1f27;
  --bar-bg: rgba(255, 255, 255, .94);
  --ink-rgb: 18, 19, 64;
  --shadow: 0 1px 2px rgba(18, 19, 64, .06), 0 8px 24px rgba(18, 19, 64, .06);
  --radius: 16px;
  --radius-sm: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0b0c2c;
  --panel: #14164a;
  --panel-2: #1a1d57;
  --field-bg: #0f1140;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .22);
  --text: #f1f2ff;
  --muted: #a9acd6;
  --accent: #6f7ff0;
  --accent-hover: #8794f5;
  --accent-rgb: 111, 127, 240;
  --accent-ink: #0b0c2c;
  --ok: #3ccf8e;
  --ok-soft: rgba(60, 207, 142, .12);
  --warn: #ffc23d;
  --warn-soft: rgba(255, 194, 61, .14);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .1);
  --live: #ff4d55;
  --bar-bg: rgba(11, 12, 44, .92);
  --ink-rgb: 255, 255, 255;
  --shadow: 0 8px 24px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.stripe { height: 4px; background: var(--brand-gradient); }

.bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-height: 56px; background: var(--bar-bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px); }
.bar .logo { height: 26px; width: auto; display: block; }
.logo-dark { display: none !important; }
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark { display: block !important; }
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: .02em; padding-left: 10px; border-left: 1px solid var(--line-strong); transform: translateY(var(--brand-nudge, 0px)); }
.bar .spacer { flex: 1; }
.icon-btn { margin-left: auto; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--text); }
.icon-btn:hover { background: rgba(var(--ink-rgb), .06); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--panel); cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn:hover { background: rgba(var(--ink-rgb), .05); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.go { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.stop { background: var(--live); border-color: var(--live); color: #fff; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: .88rem; }
.btn.icon { padding: 0; width: 36px; min-height: 36px; }
.field { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--field-bg); }
.field:focus, .btn:focus-visible, .opt:focus-visible, .pip:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .35); outline-offset: 1px; }