@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =================================================================
         BRAND THEME TOKENS
         3 brands × 2 modes = 6 combinations.
         Brand defines accent color, glow, and row tints.
         Mode defines base surface colors (bg, text, borders).
         ================================================================= */

/* Brand-agnostic glass tokens — white highlight overlay for cards.
       * Inherited by every brand×mode block since per-brand rules don't
       * redefine these vars. Light variant kicks in via [data-theme="light"]. */
:root {
  --glass-shine: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.02) 35%,
    transparent 70%
  );
  --glass-inner-top: rgba(255, 255, 255, 0.1);
  --glass-inner-edge: rgba(255, 255, 255, 0.025);
  --glass-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] {
  --glass-shine: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.25) 35%,
    transparent 70%
  );
  --glass-inner-top: rgba(255, 255, 255, 0.7);
  --glass-inner-edge: rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 8px 24px -10px rgba(10, 10, 30, 0.12);
}

/* ── NORTHWIND · violet slate ─────────────────────────────────── */
[data-brand="northwind"][data-theme="dark"] {
  --bg: #0a0a0f;
  --bg-elev: #111118;
  --panel: rgba(255, 255, 255, 0.03);
  --panel-solid: #13131b;
  --panel2: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #ededf0;
  --text2: #9898a3;
  --text3: #5a5a68;
  --row-hover: rgba(167, 139, 250, 0.06);
  --row-active: rgba(167, 139, 250, 0.1);
  --sidebar-bg: rgba(12, 12, 18, 0.85);
  --sidebar-hover: rgba(167, 139, 250, 0.06);
  --sidebar-active: #a78bfa;
  --accent: #a78bfa;
  --accent-strong: #8b5cf6;
  --blue: #a78bfa;
  --blue-bg: rgba(167, 139, 250, 0.1);
  --secondary: #a78bfa;
  --tertiary: #c4b5fd;
  --green: #34d399;
  --green-bg: rgba(52, 211, 153, 0.1);
  --red: #fb7185;
  --red-bg: rgba(251, 113, 133, 0.08);
  --glow:
    radial-gradient(1200px 600px at 20% -10%, rgba(167, 139, 250, 0.18), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(236, 72, 153, 0.1), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(167, 139, 250, 0.1) 0%,
    rgba(167, 139, 250, 0.02) 40%,
    transparent 85%
  );
  --ray-color: rgba(167, 139, 250, 0.045);
  --ray-opacity: 1;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}
[data-brand="northwind"][data-theme="light"] {
  --bg: #f6f6f9;
  --bg-elev: #ffffff;
  --panel: rgba(0, 0, 0, 0.02);
  --panel-solid: #ffffff;
  --panel2: rgba(0, 0, 0, 0.04);
  --border: rgba(10, 10, 20, 0.08);
  --border-strong: rgba(10, 10, 20, 0.14);
  --text: #0f1020;
  --text2: #5a5a68;
  --text3: #9898a3;
  --row-hover: rgba(139, 92, 246, 0.06);
  --row-active: rgba(139, 92, 246, 0.1);
  --sidebar-bg: rgba(255, 255, 255, 0.85);
  --sidebar-hover: rgba(139, 92, 246, 0.06);
  --sidebar-active: #8b5cf6;
  --accent: #8b5cf6;
  --accent-strong: #7c3aed;
  --blue: #8b5cf6;
  --blue-bg: rgba(139, 92, 246, 0.08);
  --secondary: #a78bfa;
  --tertiary: #c4b5fd;
  --green: #059669;
  --green-bg: rgba(5, 150, 105, 0.1);
  --red: #e11d48;
  --red-bg: rgba(225, 29, 72, 0.08);
  --glow:
    radial-gradient(1200px 600px at 20% -10%, rgba(139, 92, 246, 0.12), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(236, 72, 153, 0.06), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(139, 92, 246, 0.05) 0%,
    rgba(139, 92, 246, 0.01) 40%,
    transparent 80%
  );
  --ray-color: rgba(139, 92, 246, 0.025);
  --ray-opacity: 0.4;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}

/* ── ORBIT · warm amber ───────────────────────────────────────── */
[data-brand="orbit"][data-theme="dark"] {
  --bg: #14110d;
  --bg-elev: #1b1612;
  --panel: rgba(255, 240, 220, 0.03);
  --panel-solid: #1e1914;
  --panel2: rgba(255, 240, 220, 0.05);
  --border: rgba(255, 230, 200, 0.09);
  --border-strong: rgba(255, 230, 200, 0.16);
  --text: #f5ecdf;
  --text2: #a89a86;
  --text3: #6b5f4f;
  --row-hover: rgba(245, 158, 11, 0.07);
  --row-active: rgba(245, 158, 11, 0.12);
  --sidebar-bg: rgba(22, 18, 14, 0.88);
  --sidebar-hover: rgba(245, 158, 11, 0.07);
  --sidebar-active: #f59e0b;
  --accent: #f59e0b;
  --accent-strong: #d97706;
  --blue: #f59e0b;
  --blue-bg: rgba(245, 158, 11, 0.1);
  --secondary: #fbbf24;
  --tertiary: #fcd34d;
  --green: #a3e635;
  --green-bg: rgba(163, 230, 53, 0.1);
  --red: #fb923c;
  --red-bg: rgba(251, 146, 60, 0.08);
  --glow:
    radial-gradient(1400px 700px at 85% -10%, rgba(245, 158, 11, 0.22), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(239, 68, 68, 0.1), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(245, 158, 11, 0.1) 0%,
    rgba(245, 158, 11, 0.02) 40%,
    transparent 85%
  );
  --ray-color: rgba(245, 158, 11, 0.05);
  --ray-opacity: 1;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}
[data-brand="orbit"][data-theme="light"] {
  --bg: #faf7f1;
  --bg-elev: #ffffff;
  --panel: rgba(120, 80, 20, 0.03);
  --panel-solid: #ffffff;
  --panel2: rgba(120, 80, 20, 0.05);
  --border: rgba(120, 80, 20, 0.1);
  --border-strong: rgba(120, 80, 20, 0.18);
  --text: #1c140a;
  --text2: #756348;
  --text3: #a8956f;
  --row-hover: rgba(217, 119, 6, 0.07);
  --row-active: rgba(217, 119, 6, 0.12);
  --sidebar-bg: rgba(255, 252, 244, 0.88);
  --sidebar-hover: rgba(217, 119, 6, 0.07);
  --sidebar-active: #d97706;
  --accent: #d97706;
  --accent-strong: #b45309;
  --blue: #d97706;
  --blue-bg: rgba(217, 119, 6, 0.08);
  --secondary: #f59e0b;
  --tertiary: #fbbf24;
  --green: #65a30d;
  --green-bg: rgba(101, 163, 13, 0.1);
  --red: #c2410c;
  --red-bg: rgba(194, 65, 12, 0.08);
  --glow:
    radial-gradient(1400px 700px at 85% -10%, rgba(245, 158, 11, 0.14), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(239, 68, 68, 0.06), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(217, 119, 6, 0.05) 0%,
    rgba(217, 119, 6, 0.01) 40%,
    transparent 80%
  );
  --ray-color: rgba(217, 119, 6, 0.03);
  --ray-opacity: 0.4;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}

/* ── HELIX · teal grid ────────────────────────────────────────── */
[data-brand="helix"][data-theme="dark"] {
  --bg: #07100f;
  --bg-elev: #0c1817;
  --panel: rgba(180, 255, 240, 0.025);
  --panel-solid: #0f1e1c;
  --panel2: rgba(180, 255, 240, 0.05);
  --border: rgba(130, 230, 210, 0.1);
  --border-strong: rgba(130, 230, 210, 0.2);
  --text: #e4fffb;
  --text2: #8fb3ad;
  --text3: #506a65;
  --row-hover: rgba(45, 212, 191, 0.08);
  --row-active: rgba(45, 212, 191, 0.14);
  --sidebar-bg: rgba(9, 22, 20, 0.9);
  --sidebar-hover: rgba(45, 212, 191, 0.08);
  --sidebar-active: #2dd4bf;
  --accent: #2dd4bf;
  --accent-strong: #14b8a6;
  --blue: #2dd4bf;
  --blue-bg: rgba(45, 212, 191, 0.1);
  --secondary: #5eead4;
  --tertiary: #99f6e4;
  --green: #4ade80;
  --green-bg: rgba(74, 222, 128, 0.1);
  --red: #f43f5e;
  --red-bg: rgba(244, 63, 94, 0.08);
  --glow:
    radial-gradient(1200px 700px at 50% -10%, rgba(45, 212, 191, 0.18), transparent 55%),
    radial-gradient(800px 500px at 100% 100%, rgba(56, 189, 248, 0.1), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(45, 212, 191, 0.1) 0%,
    rgba(45, 212, 191, 0.02) 40%,
    transparent 85%
  );
  --ray-color: rgba(45, 212, 191, 0.05);
  --ray-opacity: 1;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}
[data-brand="helix"][data-theme="light"] {
  --bg: #f2faf8;
  --bg-elev: #ffffff;
  --panel: rgba(15, 80, 70, 0.03);
  --panel-solid: #ffffff;
  --panel2: rgba(15, 80, 70, 0.05);
  --border: rgba(15, 80, 70, 0.1);
  --border-strong: rgba(15, 80, 70, 0.2);
  --text: #072a25;
  --text2: #4c6d67;
  --text3: #8fb3ad;
  --row-hover: rgba(20, 184, 166, 0.07);
  --row-active: rgba(20, 184, 166, 0.12);
  --sidebar-bg: rgba(245, 253, 251, 0.88);
  --sidebar-hover: rgba(20, 184, 166, 0.07);
  --sidebar-active: #14b8a6;
  --accent: #14b8a6;
  --accent-strong: #0d9488;
  --blue: #14b8a6;
  --blue-bg: rgba(20, 184, 166, 0.08);
  --secondary: #2dd4bf;
  --tertiary: #5eead4;
  --green: #15803d;
  --green-bg: rgba(21, 128, 61, 0.1);
  --red: #be123c;
  --red-bg: rgba(190, 18, 60, 0.08);
  --glow:
    radial-gradient(1200px 700px at 50% -10%, rgba(20, 184, 166, 0.12), transparent 55%),
    radial-gradient(800px 500px at 100% 100%, rgba(14, 165, 233, 0.06), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(20, 184, 166, 0.05) 0%,
    rgba(20, 184, 166, 0.01) 40%,
    transparent 80%
  );
  --ray-color: rgba(20, 184, 166, 0.025);
  --ray-opacity: 0.4;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}

/* ── CRIMSON · risk-on red ────────────────────────────────────── */
[data-brand="crimson"][data-theme="dark"] {
  --bg: #120a0c;
  --bg-elev: #1a1013;
  --panel: rgba(255, 220, 225, 0.03);
  --panel-solid: #1d1216;
  --panel2: rgba(255, 220, 225, 0.05);
  --border: rgba(255, 200, 210, 0.09);
  --border-strong: rgba(255, 200, 210, 0.16);
  --text: #fbe9ec;
  --text2: #b08a90;
  --text3: #6b4f55;
  --row-hover: rgba(244, 63, 94, 0.07);
  --row-active: rgba(244, 63, 94, 0.12);
  --sidebar-bg: rgba(20, 12, 14, 0.88);
  --sidebar-hover: rgba(244, 63, 94, 0.07);
  --sidebar-active: #f43f5e;
  --accent: #f43f5e;
  --accent-strong: #e11d48;
  --blue: #f43f5e;
  --blue-bg: rgba(244, 63, 94, 0.1);
  --secondary: #fb7185;
  --tertiary: #fda4af;
  --green: #34d399;
  --green-bg: rgba(52, 211, 153, 0.1);
  --red: #fb923c;
  --red-bg: rgba(251, 146, 60, 0.08);
  --glow:
    radial-gradient(1300px 650px at 80% -10%, rgba(244, 63, 94, 0.22), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(190, 18, 60, 0.12), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(244, 63, 94, 0.1) 0%,
    rgba(244, 63, 94, 0.02) 40%,
    transparent 85%
  );
  --ray-color: rgba(244, 63, 94, 0.05);
  --ray-opacity: 1;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}
[data-brand="crimson"][data-theme="light"] {
  --bg: #fdf6f7;
  --bg-elev: #ffffff;
  --panel: rgba(120, 20, 40, 0.03);
  --panel-solid: #ffffff;
  --panel2: rgba(120, 20, 40, 0.05);
  --border: rgba(120, 20, 40, 0.1);
  --border-strong: rgba(120, 20, 40, 0.18);
  --text: #1a0a0e;
  --text2: #75484f;
  --text3: #a87a82;
  --row-hover: rgba(225, 29, 72, 0.07);
  --row-active: rgba(225, 29, 72, 0.12);
  --sidebar-bg: rgba(255, 250, 251, 0.88);
  --sidebar-hover: rgba(225, 29, 72, 0.07);
  --sidebar-active: #e11d48;
  --accent: #e11d48;
  --accent-strong: #be123c;
  --blue: #e11d48;
  --blue-bg: rgba(225, 29, 72, 0.08);
  --secondary: #f43f5e;
  --tertiary: #fb7185;
  --green: #059669;
  --green-bg: rgba(5, 150, 105, 0.1);
  --red: #c2410c;
  --red-bg: rgba(194, 65, 12, 0.08);
  --glow:
    radial-gradient(1300px 650px at 80% -10%, rgba(225, 29, 72, 0.14), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(159, 18, 57, 0.06), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(225, 29, 72, 0.05) 0%,
    rgba(225, 29, 72, 0.01) 40%,
    transparent 80%
  );
  --ray-color: rgba(225, 29, 72, 0.03);
  --ray-opacity: 0.4;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}

/* ── SLATE · neutral graphite ─────────────────────────────────── */
[data-brand="slate"][data-theme="dark"] {
  --bg: #0d1117;
  --bg-elev: #151b23;
  --panel: rgba(255, 255, 255, 0.025);
  --panel-solid: #161c25;
  --panel2: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #e6edf3;
  --text2: #8b949e;
  --text3: #57606a;
  --row-hover: rgba(148, 163, 184, 0.06);
  --row-active: rgba(148, 163, 184, 0.1);
  --sidebar-bg: rgba(13, 17, 23, 0.88);
  --sidebar-hover: rgba(148, 163, 184, 0.06);
  --sidebar-active: #94a3b8;
  --accent: #94a3b8;
  --accent-strong: #64748b;
  --blue: #94a3b8;
  --blue-bg: rgba(148, 163, 184, 0.1);
  --secondary: #cbd5e1;
  --tertiary: #e2e8f0;
  --green: #34d399;
  --green-bg: rgba(52, 211, 153, 0.1);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.08);
  --glow:
    radial-gradient(1200px 600px at 50% -10%, rgba(148, 163, 184, 0.1), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(100, 116, 139, 0.08), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(148, 163, 184, 0.06) 0%,
    rgba(148, 163, 184, 0.01) 40%,
    transparent 85%
  );
  --ray-color: rgba(148, 163, 184, 0.035);
  --ray-opacity: 1;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}
[data-brand="slate"][data-theme="light"] {
  --bg: #f1f5f9;
  --bg-elev: #ffffff;
  --panel: rgba(15, 23, 42, 0.02);
  --panel-solid: #ffffff;
  --panel2: rgba(15, 23, 42, 0.04);
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --row-hover: rgba(71, 85, 105, 0.06);
  --row-active: rgba(71, 85, 105, 0.1);
  --sidebar-bg: rgba(255, 255, 255, 0.88);
  --sidebar-hover: rgba(71, 85, 105, 0.06);
  --sidebar-active: #475569;
  --accent: #475569;
  --accent-strong: #334155;
  --blue: #475569;
  --blue-bg: rgba(71, 85, 105, 0.08);
  --secondary: #64748b;
  --tertiary: #94a3b8;
  --green: #059669;
  --green-bg: rgba(5, 150, 105, 0.1);
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.08);
  --glow:
    radial-gradient(1200px 600px at 50% -10%, rgba(71, 85, 105, 0.08), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(51, 65, 85, 0.05), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(71, 85, 105, 0.04) 0%,
    rgba(71, 85, 105, 0.01) 40%,
    transparent 80%
  );
  --ray-color: rgba(71, 85, 105, 0.02);
  --ray-opacity: 0.4;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}

/* ── SAGE · muted forest ──────────────────────────────────────── */
[data-brand="sage"][data-theme="dark"] {
  --bg: #0d1411;
  --bg-elev: #131b17;
  --panel: rgba(220, 240, 225, 0.025);
  --panel-solid: #141d18;
  --panel2: rgba(220, 240, 225, 0.045);
  --border: rgba(200, 225, 205, 0.09);
  --border-strong: rgba(200, 225, 205, 0.16);
  --text: #e8f0e9;
  --text2: #94a690;
  --text3: #5a6b56;
  --row-hover: rgba(163, 177, 138, 0.07);
  --row-active: rgba(163, 177, 138, 0.12);
  --sidebar-bg: rgba(13, 20, 17, 0.88);
  --sidebar-hover: rgba(163, 177, 138, 0.07);
  --sidebar-active: #a3b18a;
  --accent: #a3b18a;
  --accent-strong: #87a96b;
  --blue: #a3b18a;
  --blue-bg: rgba(163, 177, 138, 0.1);
  --secondary: #c4d0a8;
  --tertiary: #dde6c4;
  --green: #84cc16;
  --green-bg: rgba(132, 204, 22, 0.1);
  --red: #ef9a4a;
  --red-bg: rgba(239, 154, 74, 0.08);
  --glow:
    radial-gradient(1200px 600px at 30% -10%, rgba(163, 177, 138, 0.16), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(135, 169, 107, 0.1), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(163, 177, 138, 0.09) 0%,
    rgba(163, 177, 138, 0.02) 40%,
    transparent 85%
  );
  --ray-color: rgba(163, 177, 138, 0.045);
  --ray-opacity: 1;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}
[data-brand="sage"][data-theme="light"] {
  --bg: #f4f7f0;
  --bg-elev: #ffffff;
  --panel: rgba(50, 80, 40, 0.025);
  --panel-solid: #ffffff;
  --panel2: rgba(50, 80, 40, 0.045);
  --border: rgba(50, 80, 40, 0.1);
  --border-strong: rgba(50, 80, 40, 0.18);
  --text: #1a2516;
  --text2: #586b51;
  --text3: #94a690;
  --row-hover: rgba(88, 129, 87, 0.07);
  --row-active: rgba(88, 129, 87, 0.12);
  --sidebar-bg: rgba(252, 254, 248, 0.88);
  --sidebar-hover: rgba(88, 129, 87, 0.07);
  --sidebar-active: #588157;
  --accent: #588157;
  --accent-strong: #3a5a40;
  --blue: #588157;
  --blue-bg: rgba(88, 129, 87, 0.08);
  --secondary: #84a07e;
  --tertiary: #a3b18a;
  --green: #4d7c0f;
  --green-bg: rgba(77, 124, 15, 0.1);
  --red: #b45309;
  --red-bg: rgba(180, 83, 9, 0.08);
  --glow:
    radial-gradient(1200px 600px at 30% -10%, rgba(88, 129, 87, 0.1), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(58, 90, 64, 0.06), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(88, 129, 87, 0.04) 0%,
    rgba(88, 129, 87, 0.01) 40%,
    transparent 80%
  );
  --ray-color: rgba(88, 129, 87, 0.025);
  --ray-opacity: 0.4;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}

/* ── CYBER · synthwave magenta/cyan ───────────────────────────── */
[data-brand="cyber"][data-theme="dark"] {
  --bg: #0a0814;
  --bg-elev: #110d1f;
  --panel: rgba(230, 200, 255, 0.03);
  --panel-solid: #130f22;
  --panel2: rgba(230, 200, 255, 0.05);
  --border: rgba(220, 180, 255, 0.1);
  --border-strong: rgba(220, 180, 255, 0.18);
  --text: #f0e7ff;
  --text2: #a89bc4;
  --text3: #6a5e85;
  --row-hover: rgba(217, 70, 239, 0.08);
  --row-active: rgba(217, 70, 239, 0.14);
  --sidebar-bg: rgba(10, 8, 20, 0.9);
  --sidebar-hover: rgba(217, 70, 239, 0.08);
  --sidebar-active: #d946ef;
  --accent: #d946ef;
  --accent-strong: #c026d3;
  --blue: #06b6d4;
  --blue-bg: rgba(6, 182, 212, 0.12);
  --secondary: #06b6d4;
  --tertiary: #67e8f9;
  --green: #22d3ee;
  --green-bg: rgba(34, 211, 238, 0.1);
  --red: #f43f5e;
  --red-bg: rgba(244, 63, 94, 0.1);
  --glow:
    radial-gradient(1300px 700px at 15% -10%, rgba(217, 70, 239, 0.22), transparent 55%),
    radial-gradient(1100px 600px at 100% 100%, rgba(6, 182, 212, 0.16), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(217, 70, 239, 0.1) 0%,
    rgba(6, 182, 212, 0.04) 50%,
    transparent 90%
  );
  --ray-color: rgba(217, 70, 239, 0.06);
  --ray-opacity: 1;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}
[data-brand="cyber"][data-theme="light"] {
  --bg: #fbf5ff;
  --bg-elev: #ffffff;
  --panel: rgba(120, 30, 160, 0.03);
  --panel-solid: #ffffff;
  --panel2: rgba(120, 30, 160, 0.05);
  --border: rgba(120, 30, 160, 0.1);
  --border-strong: rgba(120, 30, 160, 0.18);
  --text: #1a0a25;
  --text2: #6b4880;
  --text3: #a890b8;
  --row-hover: rgba(192, 38, 211, 0.07);
  --row-active: rgba(192, 38, 211, 0.12);
  --sidebar-bg: rgba(253, 248, 255, 0.88);
  --sidebar-hover: rgba(192, 38, 211, 0.07);
  --sidebar-active: #c026d3;
  --accent: #c026d3;
  --accent-strong: #a21caf;
  --blue: #0891b2;
  --blue-bg: rgba(8, 145, 178, 0.1);
  --secondary: #0891b2;
  --tertiary: #06b6d4;
  --green: #0d9488;
  --green-bg: rgba(13, 148, 136, 0.1);
  --red: #be123c;
  --red-bg: rgba(190, 18, 60, 0.08);
  --glow:
    radial-gradient(1300px 700px at 15% -10%, rgba(192, 38, 211, 0.12), transparent 55%),
    radial-gradient(1100px 600px at 100% 100%, rgba(8, 145, 178, 0.08), transparent 60%);
  --card-grad: linear-gradient(
    180deg,
    rgba(192, 38, 211, 0.05) 0%,
    rgba(8, 145, 178, 0.02) 50%,
    transparent 85%
  );
  --ray-color: rgba(192, 38, 211, 0.03);
  --ray-opacity: 0.4;
  --chart-1: #f0b90b;
  --chart-2: #627eea;
  --chart-3: #9b59b6;
  --chart-4: #2ecc71;
  --chart-5: #e74c3c;
  --chart-6: #3498db;
  --chart-7: #e67e22;
  --chart-8: #1abc9c;
}

/* Brand dropdown (topbar) */
.brand-dropdown {
  position: relative;
  z-index: 60;
}
.brand-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  z-index: 1000;
  display: none;
}
.brand-menu.open {
  display: block;
}
.brand-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  transition: background 0.12s;
}
.brand-menu-item:hover {
  background: var(--row-hover);
}
.brand-menu-item.active {
  background: var(--row-active);
}
.brand-menu-item .bm-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    0 0 0 2px var(--panel2),
    0 0 8px currentColor;
}
.brand-menu-item .bm-label {
  font-weight: 600;
}
.brand-menu-item .bm-desc {
  color: var(--text3);
  font-size: 10px;
  margin-left: auto;
}
.brand-menu-item.active .bm-check {
  margin-left: auto;
  color: var(--accent);
  display: flex;
}
.brand-menu-item .bm-check {
  display: none;
}

/* Brand gallery (settings view) */
.brand-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px 20px;
}
.brand-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  background: var(--panel);
  transition:
    transform 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
  overflow: hidden;
}
.brand-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.3);
}
.brand-card.active {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 8px 24px -12px rgba(0, 0, 0, 0.3);
}
.brand-card-preview {
  height: 60px;
  border-radius: 8px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.brand-card-swatches {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
}
.brand-card-swatches span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.brand-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  text-transform: capitalize;
}
.brand-card-desc {
  font-size: 11px;
  color: var(--text2);
}
.brand-card-active-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: var(--blue-bg);
  padding: 2px 6px;
  border-radius: 4px;
  display: none;
}
.brand-card.active .brand-card-active-badge {
  display: block;
}

body {
  font-family:
    "Geist",
    -apple-system,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  min-height: 100vh;
}
.main {
  background: var(--glow), var(--bg);
  position: relative;
}
.main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      108deg,
      transparent 18%,
      var(--ray-color) 18.4%,
      transparent 18.8%,
      transparent 24%,
      var(--ray-color) 24.3%,
      transparent 24.6%,
      transparent 72%,
      var(--ray-color) 72.4%,
      transparent 72.8%,
      transparent 78%,
      var(--ray-color) 78.3%,
      transparent 78.6%
    ),
    linear-gradient(
      252deg,
      transparent 12%,
      var(--ray-color) 12.4%,
      transparent 12.8%,
      transparent 82%,
      var(--ray-color) 82.3%,
      transparent 82.6%
    );
  opacity: var(--ray-opacity, 1);
  mix-blend-mode: screen;
}
[data-theme="light"] .main::before {
  mix-blend-mode: multiply;
}
.main > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .main {
    background-size:
      200% 200%,
      100% 100%;
    animation: glowShift 30s ease-in-out infinite;
  }
}

@keyframes glowShift {
  0%,
  100% {
    background-position:
      0% 0%,
      0% 0%;
  }
  50% {
    background-position:
      20% 30%,
      0% 0%;
  }
}

/* Sidebar — hidden on desktop, overlay on mobile */
.sidebar {
  display: none;
  width: 200px;
  background: var(--sidebar-bg);
  flex-direction: column;
  padding: 12px 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 20;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.sidebar.open {
  transform: translateX(0);
}
.sidebar-logo {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 20px;
  letter-spacing: -1px;
  padding: 0 12px;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
  flex: 1;
}
/* Quick-actions section in the sidebar drawer (mobile only).
       * On mobile the topbar hides cmd/brand/theme to save space — but
       * users still need access to search and theme toggle. We surface
       * them here as proper nav-btn entries inside the burger drawer. */
.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 12px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
}
.nav-btn {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  gap: 10px;
  transition: all 0.15s;
}
.nav-btn:hover {
  background: var(--sidebar-hover);
  color: var(--text);
}
.nav-btn.active {
  background: var(--blue-bg);
  color: var(--sidebar-active);
}
.nav-btn svg {
  width: 18px;
  height: 18px;
}
.nav-btn-label {
  font-size: 12px;
}

/* Main */
.main {
  flex: 1;
  min-width: 0;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-elev), transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.topbar-title {
  font-size: 14px;
  font-weight: 600;
}
/* Header navigation tabs */
/* Trackless pill nav — see .bh-tabs/.bh-tab for the same pattern
         shared across all sub-tab bars. */
.topbar-nav {
  display: flex;
  gap: 4px;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.nav-tab {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.nav-tab.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 600;
  box-shadow: none;
}
/* Icon size override for both header + sub-tab bars so inline SVG
         markup stays at 14×14 (cheaper diff) but renders at 16px to
         match the larger pill geometry. */
.nav-tab svg,
.bh-tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.topbar-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.topbar-icon:hover {
  background: var(--panel2);
  color: var(--text);
}
.topbar-icon svg {
  width: 16px;
  height: 16px;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.dot-ok {
  background: var(--green);
}
.dot-warn {
  background: #f0b90b;
}
.dot-err {
  background: var(--red);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text2);
}
.badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 500;
}
.badge-paper {
  color: var(--text2);
  background: var(--panel2);
}
.badge-live {
  color: var(--green);
  background: var(--green-bg);
}

/* Topbar source toggle — shown in place of the static mode badge.
         The bot's actual runtime mode is conveyed by a small indicator dot
         on the active variant; user chooses which dataset to view. */
/* === Workspace Mode Switcher (Paper / Live) ===
       * The mode is a persistent workspace identity, not just a filter.
       * Live mode adds a red bottom border on the topbar so users always
       * know they're looking at real-money data. Mobile-friendly. */
.src-toggle {
  display: inline-flex;
  background: var(--panel2);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
}
.src-toggle button {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border: none;
  background: transparent;
  color: var(--text2);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition:
    background 120ms ease,
    color 120ms ease;
}
.src-toggle button:hover {
  color: var(--text);
}
.src-toggle button.active {
  background: var(--row-active);
  color: var(--text);
}
/* Live mode: brand-accent-tinted active state (kein Rot mehr) */
[data-mode="live"] .src-toggle {
  border-color: var(--accent);
}
[data-mode="live"] .src-toggle button[data-source="live"].active {
  background: var(--accent);
  color: #fff;
}
.src-toggle button .src-rt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
}
.src-toggle button[data-source="live"][data-runtime-active="true"] .src-rt-dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: srcRtPulse 2s ease-in-out infinite;
}
@keyframes srcRtPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* === Strategy Filter Toggle ===
 * Visual variant of .src-toggle used for All|CHP|HA selection.
 * Slightly smaller padding and strategy-specific active colors. */
.strat-toggle {
  gap: 1px;
}
.strat-toggle button {
  padding: 4px 9px;
  font-size: 10px;
}
.strat-toggle button.strat-chip-cph.active {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
.strat-toggle button.strat-chip-ha.active {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
}
/* Hide topbar strategy toggle on mobile — sidebar has its own */
@media (max-width: 767px) {
  #topbarStratToggle {
    display: none;
  }
}

/* === Strategy KPI Cards ===
 * Two-column side-by-side cards for cheap vs HA comparison. */
.a-strat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.a-strat-card {
  background: var(--glass-shine), var(--card-grad), var(--panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.a-strat-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.a-strat-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.a-strat-card-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.a-strat-row-label {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  grid-column: 1;
}
.a-strat-row-value {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  grid-column: 2;
}

/* === Symbol × Strategy Table === */
.a-symstrat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.a-symstrat-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text3);
  padding: 4px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.a-symstrat-table td {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-variant-numeric: tabular-nums;
}
.a-symstrat-table tr:last-child td {
  border-bottom: none;
}

/* Engine-state badge in topbar — global indicator that real-money
       * orders are being placed. Different from the workspace toggle:
       * workspace = which data the UI displays; engine = whether the bot
       * actually trades live. */
/* engine-badge classes removed — engine state now signalled via
       * #brandEngineDot pulse next to the logo + the rt-dot inside the
       * Workspace Live button. enginePulse keyframes kept because they
       * are reused by other dot pulses. */
@keyframes enginePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}

/* Workspace identity: in live mode, .main has a subtle accent
       * gradient fade at the top, so the mode is recognisable across
       * all views. The previous topbar bottom-border was redundant
       * with the gradient + workspace pill and added visual noise.
       * Engine-State (paper/live trading) bleibt rot/grün via .engine-badge
       * und .src-rt-dot — orthogonal zur Workspace-Anzeige. */
[data-mode="live"] .main::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 12%, transparent),
    transparent
  );
  pointer-events: none;
  z-index: 1;
}
/* Mode badge sits inside topbar — visually loud in live, quiet in paper. */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 3px 8px;
  border-radius: 999px;
  margin-right: 4px;
  background: var(--panel2);
  color: var(--text3);
  border: 1px solid var(--border);
}
[data-mode="live"] .mode-badge {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
}

.content {
  padding: 20px;
}

/* Metrics */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.mc {
  background: var(--glass-shine), var(--card-grad), var(--panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 1px 0 var(--glass-inner-top) inset,
    0 0 0 1px var(--glass-inner-edge) inset,
    var(--glass-shadow);
}
[data-theme="light"] .mc {
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 8px 24px -12px rgba(10, 10, 30, 0.15);
}
.mc-label {
  font-size: 10px;
  color: var(--text3);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mc-sub {
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.mc-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mc-value.g {
  color: var(--green);
}
.mc-value.r {
  color: var(--red);
}
.mc-value.n {
  color: var(--text);
}

/* Config form inputs */
.cfg-label {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cfg-hint {
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.cfg-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cfg-prefix {
  color: var(--text3);
  font-size: 14px;
  font-weight: 500;
}
.cfg-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.cfg-input:focus {
  outline: none;
  border-color: var(--blue);
}

.src-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--text3);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* Connection summary rows */
.conn-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: var(--panel2);
  border-radius: 6px;
}
.conn-label {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.conn-value {
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
}
.conn-meta {
  font-size: 11px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .conn-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 12px;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Danger zone — semantic red even on non-Crimson brands */
.pnl.danger-zone {
  border-color: var(--red);
}
.pnl.danger-zone[data-live-active="true"] {
  background: var(--red-bg), var(--panel);
}
.danger-btn {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  transition:
    opacity 0.15s,
    transform 0.05s;
}
.danger-btn:hover:not(:disabled) {
  opacity: 0.9;
}
.danger-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.danger-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.live-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-check.ok {
  color: var(--green);
}
.live-check.fail {
  color: var(--red);
}
.live-check.pending {
  color: var(--text3);
}

/* Global alert bar */
.sys-alert {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 8px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sys-alert.warn {
  background: var(--blue-bg);
  border: 1px solid var(--blue);
  color: var(--text);
}
.sys-alert.error {
  background: var(--red-bg);
  border: 1px solid var(--red);
  color: var(--text);
}

/* Panel */
.pnl {
  background: var(--glass-shine), var(--card-grad), var(--panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 0 var(--glass-inner-top) inset,
    0 0 0 1px var(--glass-inner-edge) inset,
    var(--glass-shadow);
}
[data-theme="light"] .pnl {
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 8px 24px -12px rgba(10, 10, 30, 0.15);
}
.pnl-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.pnl-ttl {
  font-size: 13px;
  font-weight: 600;
}
.pnl-sub {
  font-size: 11px;
  color: var(--text2);
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  padding: 8px 20px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text3);
  background: var(--panel2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
td {
  padding: 9px 20px;
  font-size: 12px;
  border-top: 1px solid var(--border);
}
tr:hover td {
  background: var(--row-hover);
}
.mono {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.g {
  color: var(--green);
}
.r {
  color: var(--red);
}
.d {
  color: var(--text2);
}
.b {
  font-weight: 500;
}

/* Chips */
.chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
}
.chip-a {
  color: var(--blue);
  background: var(--blue-bg);
}
.chip-w {
  color: var(--green);
  background: var(--green-bg);
}
.chip-l {
  color: var(--red);
  background: var(--red-bg);
}
.chip-p {
  color: var(--text3);
  background: var(--panel2);
}

.empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text3);
}

/* Bet History Pro */
.bh-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
/* Trackless pill tabs — no container background, free-floating
         buttons with brand-tinted active fill. Matches the reference
         dashboard design (Overview / Bets / Markets / Analytics / System
         pattern). Icons inline at 14px, generous padding for breathable
         spacing. */
.bh-tabs {
  display: flex;
  gap: 4px;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.bh-tab {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bh-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.bh-tab.active {
  /* Brand-tinted soft pill — consistent ~18% alpha of brand accent
           via color-mix so all 14 brand/theme combinations render the
           same density without per-brand --accent-soft tokens. */
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 600;
  box-shadow: none;
}
.bh-tab .bh-badge {
  font-size: 9px;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--panel2);
  color: var(--text3);
}
.bh-tab.active .bh-badge {
  background: var(--blue-bg);
  color: var(--blue);
}
.bh-assets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.bh-asset {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
}
.bh-asset:hover {
  border-color: var(--text3);
  color: var(--text);
}
.bh-asset.active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-bg);
}
.bh-summary {
  display: flex;
  gap: 20px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.bh-summary-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.bh-summary-label {
  color: var(--text3);
}
.bh-summary-value {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
th.sortable {
  cursor: pointer;
  user-select: none;
}
th.sortable:hover {
  color: var(--text);
}
th .sort-arrow {
  font-size: 9px;
  margin-left: 2px;
  opacity: 0.4;
}
th.sort-active .sort-arrow {
  opacity: 1;
  color: var(--blue);
}
.bh-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  font-size: 11px;
  color: var(--text2);
  border-top: 1px solid var(--border);
}
.bh-pager-btns {
  display: flex;
  gap: 4px;
}
.bh-pager-btn {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
}
.bh-pager-btn:hover:not(:disabled) {
  border-color: var(--text3);
  color: var(--text);
}
.bh-pager-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.bh-timer {
  font-size: 10px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}

/* Hourly Heatmap */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  height: 100%;
}
.heatmap-cell {
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 500;
  color: var(--text);
  cursor: default;
  min-height: 20px;
}

/* Recent Bets compact */
.rb-ago {
  font-size: 11px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
/* Toggle Switch */
.toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--text3);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.toggle.on {
  background: var(--green);
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.toggle.on::after {
  transform: translateX(16px);
}
.mkt-disabled {
  opacity: 0.45;
}

/* Market Cards */
.mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.mkt-card {
  background: var(--glass-shine), var(--card-grad), var(--panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  box-shadow:
    0 1px 0 var(--glass-inner-top) inset,
    0 0 0 1px var(--glass-inner-edge) inset,
    var(--glass-shadow);
}
.mkt-card:hover {
  transform: translateY(-2px);
}
.mkt-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.mkt-card-title {
  font-size: 14px;
  font-weight: 600;
}
.mkt-card-price {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.mkt-mom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
}
.mkt-mom-label {
  width: 28px;
  color: var(--text3);
  flex-shrink: 0;
}
.mkt-mom-bar-bg {
  flex: 1;
  height: 6px;
  background: var(--panel2);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.mkt-mom-bar {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
  transition: width 0.3s;
}
.mkt-mom-val {
  width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  flex-shrink: 0;
}
.mkt-signal {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mkt-signal-bullish {
  color: var(--green);
  background: var(--green-bg);
}
.mkt-signal-bearish {
  color: var(--red);
  background: var(--red-bg);
}
.mkt-signal-neutral {
  color: var(--text3);
  background: var(--panel2);
}
.mkt-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.mkt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.mkt-stat-label {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mkt-stat-value {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.mkt-tokens {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 11px;
}
.mkt-token {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─── Live Trading Toggle Switch (Status tab) ───
         iOS-style switch. 44px width × 26px height = touch-target safe.
         Thumb 22px, slides 18px. Track color shifts on :checked. */
.live-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  width: 48px;
  height: 28px;
}
.live-switch input {
  opacity: 0;
  position: absolute;
  inset: 0;
  cursor: pointer;
  margin: 0;
}
.live-switch-track {
  position: absolute;
  inset: 0;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}
.live-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.live-switch input:checked ~ .live-switch-track {
  background: var(--red);
  border-color: var(--red);
}
.live-switch input:checked ~ .live-switch-track .live-switch-thumb {
  transform: translateX(20px);
}
.live-switch input:focus-visible ~ .live-switch-track {
  box-shadow: 0 0 0 3px var(--blue-bg);
}
@media (prefers-reduced-motion: reduce) {
  .live-switch-track,
  .live-switch-thumb {
    transition: none;
  }
}

/* ─── Modal Overlay (Confirmation Dialogs) ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* z-index must beat .topbar (sticky, z-index 50) AND any
           topbar-internal layers (.brand-menu z-index 1000). The
           topbar's backdrop-filter creates its own stacking context;
           we sit on top of all of them. 10000 is the project-wide
           ceiling for confirmation overlays. */
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Isolation creates a fresh stacking context so the overlay's
           own backdrop-blur does not bleed through to siblings. */
  isolation: isolate;
}
[data-theme="light"] .modal-overlay {
  /* Light themes need a slightly darker scrim to keep contrast
           against the bright shell. */
  background: rgba(15, 23, 42, 0.45);
}
.modal-card {
  /* Per design.md: --panel-solid is the dedicated token for
           modal content. --panel is a glassmorphism layer (alpha < 0.05)
           which made the dialog fully transparent over the System view,
           with body text and headers bleeding through. Solid token
           matches per-brand modal background and stays consistent
           across all 14 brand×mode variants. */
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 460px;
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  isolation: isolate;
}
.modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text3);
  cursor: pointer;
  border-radius: 6px;
}
.modal-close:hover {
  background: var(--panel2);
  color: var(--text);
}
.modal-body {
  padding: 18px 20px 20px;
}
@media (max-width: 480px) {
  .modal-card {
    max-width: 100%;
  }
}

/* System view */
.sys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Mobile: System tabs scroll horizontally instead of wrapping —
         keeps the row clean and avoids the chunky 2-line look. */
#sysTabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}
#sysTabs::-webkit-scrollbar {
  display: none;
}

/* ─── System sub-tabs (Status / Trading / Connection / Diagnostics) ───
         Each card in the System view is tagged with one of:
           .systab-status   .systab-trading   .systab-connection   .systab-diagnostics
         The view container gets `data-systab="X"`. CSS hides anything that
         is not the active tab. Mobile-friendly: hidden cards add no height.
         No DOM reorder; source order remains stable. */
#v-system[data-systab="status"] .systab-trading,
#v-system[data-systab="status"] .systab-connection,
#v-system[data-systab="status"] .systab-diagnostics,
#v-system[data-systab="trading"] .systab-status,
#v-system[data-systab="trading"] .systab-connection,
#v-system[data-systab="trading"] .systab-diagnostics,
#v-system[data-systab="connection"] .systab-status,
#v-system[data-systab="connection"] .systab-trading,
#v-system[data-systab="connection"] .systab-diagnostics,
#v-system[data-systab="diagnostics"] .systab-status,
#v-system[data-systab="diagnostics"] .systab-trading,
#v-system[data-systab="diagnostics"] .systab-connection {
  display: none !important;
}
/* When sys-grid contains only ONE remaining card (e.g. Connection in
         its tab, or Reconcile alone in Diagnostics), let it span full width.
         Otherwise the lone card sits in left column with empty right column. */
#v-system[data-systab="connection"] .sys-grid,
#v-system[data-systab="diagnostics"] .sys-grid,
#v-system[data-systab="trading"] .sys-grid {
  grid-template-columns: 1fr;
}
/* On mobile (≤767px) sys-grid already collapses to single column — see
         mobile media query below. The systab rules above work the same way. */
.sys-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.sys-row:last-child {
  border: none;
}
.sys-key {
  color: var(--text2);
  font-size: 12px;
}
.sys-val {
  font-size: 12px;
  font-weight: 500;
}

/* Views */
.view {
  display: none;
}
.view.active {
  display: block;
}

/* Command palette button — hide on tablet/desktop (has ⌘K shortcut) */
#cmdBtn {
  display: none;
}
@media (max-width: 767px) {
  #cmdBtn {
    display: flex;
  }
}

/* ═══════════════════════════════════════════════════════════════
         COMMAND PALETTE (⌘K)
         ═══════════════════════════════════════════════════════════════ */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
}
.cmd-palette[hidden] {
  display: none;
}
.cmd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cmd-box {
  position: relative;
  width: min(620px, 92vw);
  background: var(--panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  overflow: hidden;
}
.cmd-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cmd-header svg {
  width: 16px;
  height: 16px;
  color: var(--text2);
  flex-shrink: 0;
}
#cmdInput {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 15px;
  font-family: "Geist", sans-serif;
  outline: none;
}
#cmdInput::placeholder {
  color: var(--text3);
}
.cmd-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
}
.cmd-list {
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  transition: background 0.12s ease;
}
.cmd-item:hover,
.cmd-item.selected {
  background: var(--row-active);
}
.cmd-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text2);
  flex-shrink: 0;
}
.cmd-item-icon svg {
  width: 12px;
  height: 12px;
}
.cmd-item-label {
  flex: 1;
}
.cmd-item-kind {
  font-size: 10.5px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cmd-empty {
  padding: 20px;
  text-align: center;
  color: var(--text3);
  font-size: 13px;
}
.cmd-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text3);
  font-size: 10.5px;
}
.cmd-footer span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Footer */
.ftr {
  padding: 8px 20px;
  font-size: 10px;
  color: var(--text3);
  display: flex;
  justify-content: space-between;
}

/* Analytics */
.a-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.a-stat {
  background: var(--glass-shine), var(--card-grad), var(--panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow:
    0 1px 0 var(--glass-inner-top) inset,
    0 0 0 1px var(--glass-inner-edge) inset,
    var(--glass-shadow);
}
[data-theme="light"] .a-stat {
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 6px 16px -10px rgba(10, 10, 30, 0.12);
}
.a-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3);
  margin-bottom: 4px;
}
.a-stat-value {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.a-stat-sub {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}
.a-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.a-chart-panel {
  min-height: 0;
}
.a-chart-wrap {
  padding: 16px 20px 12px;
  height: 240px;
  position: relative;
}
.a-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.streak-bar {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.streak-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.streak-dot.w {
  background: var(--green);
}
.streak-dot.l {
  background: var(--red);
}
.streak-dot.p {
  background: var(--panel2);
}

/* Login Screen */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.login-overlay canvas.shader-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.login-overlay.hidden {
  display: none;
}
/* Login screen always sits on a dark animated shader background,
         independent of the brand×theme of the dashboard behind it. So
         input/label/helper styling is fixed dark-mode — never inherits
         brand surface tokens (which can be near-transparent and unreadable
         on black). */
.login-box {
  position: relative;
  z-index: 1;
  /* Glass-Stack identisch zu .mc/.pnl, aber mit pinned dark-mode
         * Glass-Tokens (Login-Overlay ist immer dunkel — würde sonst im
         * Light-Theme weißes Glas auf schwarzem Shader erzeugen).
         * Brand-tinted --card-grad bleibt aktiv → Login übernimmt subtle
         * die Brand-Farbe. */
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.02) 35%,
      transparent 70%
    ),
    var(--card-grad), rgba(20, 20, 28, 0.55);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 36px 32px 32px;
  width: 380px;
  max-width: calc(100vw - 32px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 32px 64px -28px rgba(0, 0, 0, 0.7);
}
.login-logo {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
  color: #f5f5f7;
  letter-spacing: -0.01em;
}
.login-subtitle {
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 28px;
  letter-spacing: 0.2px;
}
.login-field {
  margin-bottom: 14px;
}
.login-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
  padding-left: 2px;
}
.login-input {
  width: 100%;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}
.login-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.login-input:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}
.login-input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f5f5f7;
  -webkit-box-shadow: 0 0 0 1000px rgba(40, 40, 55, 0.95) inset;
  caret-color: #f5f5f7;
}
.login-btn {
  width: 100%;
  padding: 12px;
  min-height: 46px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  letter-spacing: 0.2px;
  transition:
    filter 0.15s ease,
    transform 0.05s ease;
}
.login-btn:hover {
  filter: brightness(1.1);
}
.login-btn:active {
  transform: translateY(1px);
}
.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.login-error {
  color: #fca5a5;
  font-size: 12px;
  text-align: center;
  margin-top: 12px;
  min-height: 18px;
}

/* ── Magic Link extras ── */
.login-divider {
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  margin: 16px 0;
  letter-spacing: 0.04em;
}
.login-btn--secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.login-btn--secondary:hover {
  background: var(--bg-elev);
  color: var(--text-primary);
}
.login-hint {
  text-align: center;
  color: #86efac;
  font-size: 12px;
  margin-top: 12px;
}

/* ── Onboarding Wizard ── */
.onboarding-box {
  width: min(460px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
}
.ob-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-bottom: 20px;
}
.ob-step {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}
.ob-step.active {
  color: var(--accent);
  font-weight: 600;
}
.ob-step-sep {
  color: var(--border);
  font-size: 11px;
}
.ob-seg {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.ob-seg-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  background: transparent;
  color: var(--text-dim);
  border: none;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.ob-seg-btn.active {
  background: var(--accent);
  color: #fff;
}
.ob-done {
  text-align: center;
  padding: 16px 0 8px;
}
.ob-done-icon {
  font-size: 40px;
  color: #86efac;
  margin-bottom: 12px;
}
.ob-done-hint {
  color: var(--text-dim);
  font-size: 13px;
  margin: 8px 0 20px;
  line-height: 1.5;
}

/* Mobile tables — keep native table layout, just denser + horizontal
         scroll if needed. No card-in-card wrappers. Hidden columns stay
         hidden so the visible data set is identical to the previous design. */
@media (max-width: 767px) {
  .tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tbl-scroll::-webkit-scrollbar {
    display: none;
  }
  .tbl-scroll {
    scrollbar-width: none;
  }
  .tbl-scroll table {
    font-size: 11px;
  }
  .tbl-scroll th,
  .tbl-scroll td {
    padding: 8px 6px;
    white-space: nowrap;
  }
  .tbl-scroll tr {
    border-bottom: 1px solid var(--border);
  }

  /* Hide columns identical to the prior card layout — same data set */
  /* Overview (10 cols): hide ID(1), Entry(6), Resolve(7) */
  #v-overview .tbl-scroll th:nth-child(1),
  #v-overview .tbl-scroll td:nth-child(1),
  #v-overview .tbl-scroll th:nth-child(6),
  #v-overview .tbl-scroll td:nth-child(6),
  #v-overview .tbl-scroll th:nth-child(7),
  #v-overview .tbl-scroll td:nth-child(7) {
    display: none;
  }

  /* Bets (11 cols): hide ID(1), Entry(6), Resolve(7), Prob(9) */
  #v-bets .tbl-scroll th:nth-child(1),
  #v-bets .tbl-scroll td:nth-child(1),
  #v-bets .tbl-scroll th:nth-child(6),
  #v-bets .tbl-scroll td:nth-child(6),
  #v-bets .tbl-scroll th:nth-child(7),
  #v-bets .tbl-scroll td:nth-child(7),
  #v-bets .tbl-scroll th:nth-child(9),
  #v-bets .tbl-scroll td:nth-child(9) {
    display: none;
  }
}

/* Burger button — hidden on desktop */
.burger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.burger-btn:hover {
  background: var(--panel2);
}

/* Sidebar backdrop overlay */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 15;
  transition: background 0.3s ease;
}
.sidebar-backdrop.visible {
  display: block;
  background: rgba(0, 0, 0, 0.5);
}

/* Tablet (768px–1179px) */
@media (max-width: 1179px) {
  .content {
    padding: 12px;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  td,
  th {
    padding: 7px 12px;
    font-size: 11px;
  }
  .sys-grid {
    grid-template-columns: 1fr;
  }
  .a-grid {
    grid-template-columns: 1fr;
  }
  .a-chart-wrap {
    height: 200px;
  }
  .pnl {
    overflow-x: auto;
  }
  .topbar-nav .nav-tab {
    /* Tighter pill on tablet so 5 tabs fit horizontally without
             wrapping — keeps the trackless pill aesthetic but trims
             padding/font down a step. */
    padding: 6px 10px;
    font-size: 12px;
    gap: 5px;
  }
  .topbar-nav .nav-tab svg {
    width: 14px;
    height: 14px;
  }
}

/* Mobile — burger menu + sidebar overlay */
@media (max-width: 767px) {
  .burger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .topbar-nav {
    display: none;
  }
  .sidebar {
    display: flex;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .topbar {
    padding: 8px 12px;
  }
  .topbar-title {
    font-size: 13px;
  }
  .main {
    margin-left: 0;
  }
  .topbar {
    padding: 8px 12px;
  }
  .topbar-title {
    font-size: 13px;
  }
  .mkt-grid {
    grid-template-columns: 1fr;
  }
  .bh-tab {
    padding: 6px 10px;
    min-height: 36px;
  }
  .bh-asset {
    padding: 5px 10px;
    min-height: 32px;
  }
  .bh-pager-btn {
    min-height: 36px;
    padding: 6px 14px;
  }
}

/* Small phone */
@media (max-width: 480px) {
  .content {
    padding: 8px;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .mc {
    padding: 10px;
  }
  .mc-value {
    font-size: 18px;
  }
  .topbar-right #uptime,
  .topbar-right #clock {
    display: none;
  }
  .a-summary {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .a-stat {
    padding: 10px;
  }
  .a-stat-value {
    font-size: 16px;
  }
  .a-chart-wrap {
    height: 180px;
  }
  #aTimeTabs {
    width: 100%;
  }
  #aTimeTabs .bh-tab {
    flex: 1;
    text-align: center;
    font-size: 10px;
    padding: 4px 6px;
  }
  .pnl-hdr {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .bh-toolbar {
    padding: 8px 12px;
    gap: 8px;
    flex-direction: column;
  }
  .bh-toolbar .bh-tabs {
    width: 100%;
  }
  .bh-toolbar .bh-tab {
    flex: 1;
    text-align: center;
    font-size: 10px;
    padding: 4px 6px;
  }
  .bh-summary {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mkt-card {
    padding: 12px;
  }
}

/* ================================================================
       * MOBILE SIDEBAR COMMAND CENTER (≤767px)
       * Sidebar becomes a 100% wide drawer holding workspace, engine,
       * navigation, actions and logout. Topbar shrinks to burger + title
       * + a single engine-state pulsing dot. Desktop UI unchanged.
       * ================================================================ */

/* Topbar engine-state dot (mobile-only). Tap opens the sidebar. */
.engine-dot-btn {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}
.engine-dot-btn:hover {
  background: var(--panel2);
}

/* Pulsing engine-state dot. Green = engine LIVE, red = paper. */
.engine-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}
.engine-dot.is-live {
  background: var(--green);
  box-shadow:
    0 0 8px var(--green),
    0 0 4px rgba(52, 211, 153, 0.6);
  animation: engineDotPulse 1.6s ease-in-out infinite;
}
.engine-dot.is-paper {
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
  animation: engineDotPulse 1.6s ease-in-out infinite;
}
@keyframes engineDotPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.78);
  }
}
@media (prefers-reduced-motion: reduce) {
  .engine-dot {
    animation: none !important;
  }
}

/* Sidebar header (mobile only) — logo + close-X */
.sidebar-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sidebar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sidebar-logo-mobile {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
}
.sidebar-close {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--text2);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-close:hover {
  background: var(--sidebar-hover);
  color: var(--text);
}
.sidebar-close svg {
  width: 20px;
  height: 20px;
}

/* Sidebar sections — labelled groups with separator */
.sidebar-section {
  padding: 12px 12px 14px;
  border-bottom: 1px solid var(--border);
}
.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text3);
  padding: 0 6px;
  margin-bottom: 8px;
}

/* Full-width segmented workspace toggle in sidebar */
.src-toggle--full {
  display: flex;
  width: 100%;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.src-toggle--full button {
  flex: 1;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px;
  min-height: 40px;
  border: none;
  background: transparent;
  color: var(--text2);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition:
    background 120ms ease,
    color 120ms ease;
}
.src-toggle--full button.active {
  background: var(--row-active);
  color: var(--text);
}
[data-mode="live"] .src-toggle--full {
  border-color: var(--accent);
}
[data-mode="live"] .src-toggle--full button[data-source="live"].active {
  background: var(--accent);
  color: #fff;
}
.src-toggle--full button .src-rt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
}
.src-toggle--full button[data-source="live"][data-runtime-active="true"] .src-rt-dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: srcRtPulse 2s ease-in-out infinite;
}

/* Theme icon swap inside #sidebarThemeBtn — show sun when dark, moon when light */
#sidebarThemeBtn .theme-icon-sun,
#sidebarThemeBtn .theme-icon-moon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
[data-theme="dark"] #sidebarThemeBtn .theme-icon-sun {
  display: inline !important;
}
[data-theme="dark"] #sidebarThemeBtn .theme-icon-moon {
  display: none !important;
}
[data-theme="light"] #sidebarThemeBtn .theme-icon-sun {
  display: none !important;
}
[data-theme="light"] #sidebarThemeBtn .theme-icon-moon {
  display: inline !important;
}

/* Sidebar brand-gallery — reuse the System-view brand-card design,
         compact 2-col layout for mobile drawer. */
.sidebar-brand-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
}
@media (max-width: 359px) {
  .sidebar-brand-gallery {
    grid-template-columns: 1fr;
  }
}
.sidebar-brand-gallery .brand-card {
  padding: 10px;
}
.sidebar-brand-gallery .brand-card-preview {
  height: 44px;
  margin-bottom: 8px;
}
.sidebar-brand-gallery .brand-card-name {
  font-size: 12px;
}
.sidebar-brand-gallery .brand-card-desc {
  font-size: 10px;
}
.sidebar-brand-gallery .brand-card-active-badge {
  font-size: 8px;
  padding: 1px 5px;
  top: 8px;
  right: 8px;
}

/* Sidebar footer — sticky bottom for logout */
.sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--sidebar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sidebar-logout {
  color: var(--red);
  justify-content: flex-start;
}
.sidebar-logout:hover {
  background: var(--red-bg);
  color: var(--red);
}

/* === Mobile-only activation (≤767px): show new chrome, hide old === */
@media (max-width: 767px) {
  .sidebar {
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Solid background — at 100% width the translucent sidebar-bg
           * would show content bleeding through. Use bg-elev (solid) so
           * the drawer reads as a true layer over the content. */
    background: var(--bg-elev);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .sidebar-header,
  .sidebar-footer {
    background: var(--bg-elev);
  }
  .sidebar-logo {
    display: none;
  } /* legacy "P_" — replaced by sidebar-header */
  .sidebar-header {
    display: flex;
  }
  .engine-dot-btn {
    display: inline-flex;
  }

  /* Hide the dot next to the logo on mobile — engine state is
         * shown by #topbarEngineDot (right side, opens sidebar on tap).
         * Two pulsing dots in the same row are visual noise. */
  #brandEngineDot {
    display: none;
  }

  /* Hide all topbar-right controls — they live in the sidebar now */
  .topbar-right > #cmdBtn,
  .topbar-right > .brand-dropdown,
  .topbar-right > #themeBtn,
  .topbar-right > #topbarSrcToggle,
  .topbar-right > #logoutBtn {
    display: none !important;
  }
  /* Topbar must NOT scroll horizontally now that everything fits */
  .topbar {
    overflow-x: visible;
  }
}

/* Desktop (≥768px) hides the new mobile-only sidebar chrome */
@media (min-width: 768px) {
  .sidebar-header,
  .sidebar-section,
  .sidebar-footer,
  .engine-dot-btn {
    display: none;
  }
  /* If user resizes from mobile-with-open-sidebar to desktop, the
         * leftover backdrop would still dim the screen — force-hide it. */
  .sidebar-backdrop {
    display: none !important;
  }
}

/* ─── Chart Bet Tooltip ───────────────────────────────── */
#chartBetTooltip {
  display: none;
  position: absolute;
  z-index: 50;
  pointer-events: none;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text);
  min-width: 200px;
  max-width: 240px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  line-height: 1.6;
}

/* ─── Chart View — Header, KPIs, Segmented Controls, Now-Line ─── */
.chart-header {
  margin-bottom: 14px;
}
.chart-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.chart-title {
  font-size: 15px;
  font-weight: 600;
}
.chart-controls {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.chart-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.chart-mode-btn {
  padding: 4px 10px;
  background: transparent;
  color: var(--text2);
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.chart-mode-btn.active {
  background: var(--accent);
  color: var(--accent-fg, #fff);
}
/* Segmented control — used for symbol + range switchers. */
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elev);
}
.seg button {
  padding: 4px 10px;
  background: transparent;
  color: var(--text2);
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  border-left: 1px solid var(--border);
  transition:
    background 120ms,
    color 120ms;
}
.seg button:first-child {
  border-left: 0;
}
.seg button:hover {
  color: var(--text);
}
.seg button.active {
  background: var(--accent);
  color: var(--accent-fg, #fff);
}
/* KPI Chip-Bar above the chart canvas. */
.chart-kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kpi-chip {
  flex: 1 1 140px;
  min-width: 140px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpi-chip .kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text3);
  font-weight: 600;
}
.kpi-chip .kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
}
.kpi-chip[data-status="good"] .kpi-value {
  color: var(--green);
}
.kpi-chip[data-status="bad"] .kpi-value {
  color: var(--red);
}
.kpi-chip[data-status="warn"] .kpi-value {
  color: var(--amber, #d97706);
}
.kpi-chip[data-status="bad"] {
  border-color: var(--red);
}
.kpi-chip[data-status="warn"] {
  border-color: var(--amber, #d97706);
}
/* Now-Line + Live-Dot overlay (rendered inside #chart-container). */
#chartNowLine {
  position: absolute;
  top: 0;
  bottom: 110px;
  width: 1px;
  background: var(--accent);
  opacity: 0.5;
  pointer-events: none;
  z-index: 10;
  display: none;
}
#chartLiveDot {
  position: absolute;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--panel-solid);
  animation: chart-live-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 11;
  display: none;
}
@keyframes chart-live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  #chartLiveDot {
    animation: none;
  }
}

/* OHLC overlay — top-left of chart, always visible. */
#chartOhlcOverlay {
  position: absolute;
  top: 8px;
  left: 8px;
  display: none;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-feature-settings: "tnum";
  pointer-events: none;
  z-index: 9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
#chartOhlcOverlay .ohlc-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
}
#chartOhlcOverlay .ohlc-val.g {
  color: var(--green);
}
#chartOhlcOverlay .ohlc-val.r {
  color: var(--red);
}
#chartOhlcOverlay .ohlc-change {
  margin-left: 6px;
  font-size: 11px;
}
#chartOhlcOverlay .ohlc-change.g {
  color: var(--green);
}
#chartOhlcOverlay .ohlc-change.r {
  color: var(--red);
}