/* ============================================================
   JAMAICA DASHBOARD — DESIGN SYSTEM
   All colors via CSS variables. No hardcoded colors in HTML.
   ============================================================ */

/* ── THEME: FIRSTONE (DEFAULT) ───────────────────────────── */
:root,
[data-theme="firstOne"] {
  --bg:           #f5f5f0;
  --surface:      #ffffff;
  --surface-alt:  #fafaf8;
  --border:       #e0e0d8;
  --border-light: #f0f0e8;

  --text:         #1a1a1a;
  --text-2:       #888888;
  --text-3:       #aaaaaa;

  --accent:       #1a1a1a;
  --accent-bg:    #f0f0e8;

  --green:        #1D9E75;
  --green-bg:     #EAF3DE;
  --green-text:   #3B6D11;

  --orange-bg:    #FAEEDA;
  --orange-text:  #854F0B;

  --red-bg:       #FCEBEB;
  --red-text:     #A32D2D;

  --blue:         #185FA5;
  --blue-bg:      #E6F1FB;
  --blue-text:    #185FA5;

  --header-bg:    #1a1a1a;
  --header-text:  #ffffff;
  --header-text2: rgba(255,255,255,0.5);

  --btn-bg:       #ffffff;
  --btn-border:   #e0e0d8;
  --btn-text:     #1a1a1a;
  --btn-hover:    #f5f5f0;

  --btn-primary-bg:   #1a1a1a;
  --btn-primary-text: #ffffff;
  --btn-primary-hover:#333333;

  --tab-active:       #1a1a1a;
  --tab-active-line:  #1a1a1a;

  --chart-1: #1D9E75;
  --chart-2: #185FA5;
  --chart-3: #E24B4A;

  --shadow:       0 1px 3px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.1);
  --radius:       12px;

  --insight-bg:     #f0f7ff;
  --insight-border: #185FA5;
  --insight-text:   #0C447C;
  --insight-warn-bg:     #fff5f5;
  --insight-warn-border: #A32D2D;
  --insight-warn-text:   #791F1F;

  --toggle-active: #1a1a1a;
}

/* ── THEME: CYBER GRAPHITE ───────────────────────────────── */
[data-theme="cyberGraphite"] {
  --bg:           #0B0F14;
  --surface:      #121821;
  --surface-alt:  #161D28;
  --border:       #1E2A38;
  --border-light: #192130;

  --text:         #E6EDF3;
  --text-2:       #8B9BB0;
  --text-3:       #4A5568;

  --accent:       #7C5CFF;
  --accent-bg:    rgba(124,92,255,0.1);

  --green:        #00E0FF;
  --green-bg:     rgba(0,224,255,0.08);
  --green-text:   #00E0FF;

  --orange-bg:    rgba(255,183,0,0.08);
  --orange-text:  #FFB700;

  --red-bg:       rgba(255,61,154,0.1);
  --red-text:     #FF3D9A;

  --blue:         #7C5CFF;
  --blue-bg:      rgba(124,92,255,0.12);
  --blue-text:    #A78BFA;

  --header-bg:    #080C10;
  --header-text:  #E6EDF3;
  --header-text2: #4A5568;

  --btn-bg:       #121821;
  --btn-border:   #1E2A38;
  --btn-text:     #8B9BB0;
  --btn-hover:    #1E2A38;

  --btn-primary-bg:   #7C5CFF;
  --btn-primary-text: #ffffff;
  --btn-primary-hover:#9B7FFF;

  --tab-active:       #E6EDF3;
  --tab-active-line:  #7C5CFF;

  --chart-1: #00E0FF;
  --chart-2: #7C5CFF;
  --chart-3: #FF3D9A;

  --shadow:       0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(124,92,255,0.06);
  --shadow-hover: 0 4px 20px rgba(124,92,255,0.15), 0 0 0 1px rgba(124,92,255,0.2);
  --radius:       12px;

  --insight-bg:     rgba(124,92,255,0.08);
  --insight-border: #7C5CFF;
  --insight-text:   #A78BFA;
  --insight-warn-bg:     rgba(255,61,154,0.08);
  --insight-warn-border: #FF3D9A;
  --insight-warn-text:   #FF3D9A;

  --toggle-active: #7C5CFF;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BASE ────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  transition: background 0.25s, color 0.25s;
}

/* ── HEADER ──────────────────────────────────────────────── */
.header {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-logo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--header-text);
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--header-text2);
}

.logout {
  cursor: pointer;
  color: var(--header-text2);
  text-decoration: underline;
}

.logout:hover { color: var(--header-text); }

.theme-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--header-text);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: background 0.2s;
}

.theme-select:hover { background: rgba(255,255,255,0.1); }
.theme-select option { background: #1a1a1a; color: #fff; }

.toggle { cursor: pointer; }

.toggle-track {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--toggle-active);
  position: relative;
  transition: background 0.3s;
  border: 1px solid rgba(255,255,255,0.1);
}

.toggle-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px 32px;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

/* ── METRICS ─────────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.metric {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 20px;
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s;
}

.metric:hover { box-shadow: var(--shadow-hover); }

.metric-label {
  font-size: 11px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.metric-value {
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
}

.metric-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* ── CARD ────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.card:hover { box-shadow: var(--shadow-hover); }

.card-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-header .card-title { margin-bottom: 0; }

/* ── CHART ───────────────────────────────────────────────── */
.chart-wrap {
  position: relative;
  height: 240px;
}

/* ── TABS ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 0.5px solid var(--border);
}

.tab {
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-2);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  transition: color 0.2s;
}

.tab:hover { color: var(--text); }

.tab.active {
  color: var(--tab-active);
  border-bottom-color: var(--tab-active-line);
  font-weight: 500;
}

.panel { display: none; }
.panel.active { display: block; }

/* ── TABLE ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }

th {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 0.5px solid var(--border);
  font-weight: 500;
  color: var(--text-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

td {
  padding: 7px 8px;
  border-bottom: 0.5px solid var(--border-light);
  color: var(--text);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-alt); }

.cell-truncate {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 0.5px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: background 0.2s, box-shadow 0.2s;
}

.btn:hover { background: var(--btn-hover); }

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
}

[data-theme="cyberGraphite"] .btn-primary {
  box-shadow: 0 0 16px rgba(124,92,255,0.3);
}

/* ── BADGE ───────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

.badge-new        { background: var(--orange-bg); color: var(--orange-text); }
.badge-done       { background: var(--green-bg);  color: var(--green-text); }
.badge-inprogress { background: var(--blue-bg);   color: var(--blue-text); }
.badge-geo        { background: var(--blue-bg);   color: var(--blue-text); }

/* ── AP POSITION BADGES ──────────────────────────────────── */
.ap-good {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: var(--green-bg);
  color: var(--green-text);
}

.ap-mid {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: var(--orange-bg);
  color: var(--orange-text);
}

.ap-bad {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: var(--red-bg);
  color: var(--red-text);
}

.ap-na {
  color: var(--text-3);
  font-size: 12px;
}

/* ── PRIORITY ────────────────────────────────────────────── */
.priority-1 { color: var(--red-text);    font-weight: 500; }
.priority-2 { color: var(--orange-text); }
.priority-3 { color: var(--text-3); }

/* ── INSIGHT BOX ─────────────────────────────────────────── */
.insight {
  border-left: 3px solid var(--insight-border);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--insight-text);
  background: var(--insight-bg);
  margin-bottom: 20px;
  line-height: 1.6;
}

.insight.warn {
  border-color: var(--insight-warn-border);
  color: var(--insight-warn-text);
  background: var(--insight-warn-bg);
}

/* ── LINKS ───────────────────────────────────────────────── */
.link {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.2s;
}

.link:hover { border-color: var(--blue); }

/* ── UTILITY ─────────────────────────────────────────────── */
.fw500        { font-weight: 500; }
.text-secondary { font-size: 12px; color: var(--text-2); }
.empty        { text-align: center; color: var(--text-3); padding: 32px; font-size: 13px; }

/* ── FILTERS ─────────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filter-input,
.filter-select {
  padding: 7px 12px;
  font-size: 13px;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.filter-input { width: 220px; }

.filter-input:focus,
.filter-select:focus {
  border-color: var(--blue);
}

/* ── PERIOD BUTTONS ──────────────────────────────────────── */
.period-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 0.5px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text-2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.period-btn:hover:not(.active) {
  background: var(--btn-hover);
  color: var(--text);
}

.period-btn.active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

[data-theme="cyberGraphite"] .period-btn.active {
  box-shadow: 0 0 12px rgba(124,92,255,0.35);
}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── CYBER GRAPHITE EXTRAS ───────────────────────────────── */
[data-theme="cyberGraphite"] .header-logo {
  background: linear-gradient(135deg, #7C5CFF, #00E0FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="cyberGraphite"] .tab.active {
  text-shadow: 0 0 12px rgba(124,92,255,0.5);
}

[data-theme="cyberGraphite"] .metric-value {
  background: linear-gradient(135deg, #E6EDF3 60%, #8B9BB0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CYBER GRAPHITE — DAY MODE ───────────────────────────── */
[data-theme="cyberGraphite"][data-mode="day"] {
  --bg:           #F0F2F7;
  --surface:      #FFFFFF;
  --surface-alt:  #F7F8FC;
  --border:       #E2E5EF;
  --border-light: #ECEEF5;
  --text:         #1A1F2E;
  --text-2:       #5A6478;
  --text-3:       #9BA3B5;
  --accent:       #7C5CFF;
  --green:        #00B8D4;
  --green-bg:     rgba(0,184,212,0.1);
  --green-text:   #007A8F;
  --orange-bg:    rgba(255,183,0,0.1);
  --orange-text:  #A06800;
  --red-bg:       rgba(255,61,154,0.08);
  --red-text:     #CC1A6E;
  --blue:         #7C5CFF;
  --blue-bg:      rgba(124,92,255,0.1);
  --blue-text:    #5B3FCC;
  --header-bg:    #1A1F2E;
  --header-text:  #E6EDF3;
  --header-text2: #8B9BB0;
  --btn-bg:       #FFFFFF;
  --btn-border:   #E2E5EF;
  --btn-text:     #1A1F2E;
  --btn-hover:    #F0F2F7;
  --btn-primary-bg:   #7C5CFF;
  --btn-primary-text: #ffffff;
  --btn-primary-hover:#9B7FFF;
  --tab-active:       #7C5CFF;
  --tab-active-line:  #7C5CFF;
  --chart-1: #7C5CFF;
  --chart-2: #00B8D4;
  --chart-3: #FF3D9A;
  --shadow:       0 1px 4px rgba(0,0,0,0.08);
  --shadow-hover: 0 4px 16px rgba(124,92,255,0.15);
  --insight-bg:     rgba(124,92,255,0.06);
  --insight-border: #7C5CFF;
  --insight-text:   #5B3FCC;
  --insight-warn-bg:     rgba(255,61,154,0.06);
  --insight-warn-border: #FF3D9A;
  --insight-warn-text:   #CC1A6E;
  --toggle-active: #7C5CFF;
}

[data-theme="cyberGraphite"][data-mode="day"] .metric-value {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
}

[data-theme="cyberGraphite"][data-mode="day"] .header-logo {
  background: linear-gradient(135deg, #7C5CFF, #00B8D4) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── NEO MINT — NIGHT MODE (DEFAULT) ────────────────────── */
[data-theme="neoMint"],
[data-theme="neoMint"][data-mode="night"] {
  --bg:           #0E1116;
  --surface:      #151A21;
  --surface-alt:  #1A2028;
  --border:       #1F2630;
  --border-light: #1A2028;

  --text:         #F5F7FA;
  --text-2:       #7C8A9A;
  --text-3:       #4A5568;

  --accent:       #3EF2B1;
  --accent-bg:    rgba(62,242,177,0.08);

  --green:        #3EF2B1;
  --green-bg:     rgba(62,242,177,0.1);
  --green-text:   #3EF2B1;

  --orange-bg:    rgba(251,191,36,0.1);
  --orange-text:  #FBB824;

  --red-bg:       rgba(239,68,68,0.1);
  --red-text:     #F87171;

  --blue:         #3EF2B1;
  --blue-bg:      rgba(62,242,177,0.1);
  --blue-text:    #8EF9D1;

  --header-bg:    #0A0D11;
  --header-text:  #F5F7FA;
  --header-text2: #7C8A9A;

  --btn-bg:       #151A21;
  --btn-border:   #1F2630;
  --btn-text:     #7C8A9A;
  --btn-hover:    #1A2028;

  --btn-primary-bg:   #3EF2B1;
  --btn-primary-text: #0E1116;
  --btn-primary-hover:#5FF5BE;

  --tab-active:       #3EF2B1;
  --tab-active-line:  #3EF2B1;

  --chart-1: #3EF2B1;
  --chart-2: #8EF9D1;
  --chart-3: #FBB824;

  --shadow:       0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(62,242,177,0.04);
  --shadow-hover: 0 4px 16px rgba(62,242,177,0.1);
  --radius:       12px;

  --insight-bg:     rgba(62,242,177,0.06);
  --insight-border: #3EF2B1;
  --insight-text:   #8EF9D1;
  --insight-warn-bg:     rgba(251,184,36,0.08);
  --insight-warn-border: #FBB824;
  --insight-warn-text:   #FBB824;

  --toggle-active: #3EF2B1;
}

[data-theme="neoMint"] .header-logo,
[data-theme="neoMint"][data-mode="night"] .header-logo {
  color: #3EF2B1;
}

[data-theme="neoMint"] .tab.active,
[data-theme="neoMint"][data-mode="night"] .tab.active {
  color: #3EF2B1;
}

[data-theme="neoMint"] .metric-value,
[data-theme="neoMint"][data-mode="night"] .metric-value {
  background: none;
  -webkit-text-fill-color: var(--text);
}

[data-theme="neoMint"] .toggle-thumb,
[data-theme="neoMint"][data-mode="night"] .toggle-thumb {
  background: #0E1116;
}

/* ── NEO MINT — DAY MODE ─────────────────────────────────── */
[data-theme="neoMint"][data-mode="day"] {
  --bg:           #F6F8FB;
  --surface:      #FFFFFF;
  --surface-alt:  #F1F5F9;
  --border:       #E2E8F0;
  --border-light: #EEF2F7;

  --text:         #0F172A;
  --text-2:       #64748B;
  --text-3:       #94A3B8;

  --accent:       #10B981;
  --accent-bg:    rgba(16,185,129,0.08);

  --green:        #10B981;
  --green-bg:     rgba(16,185,129,0.1);
  --green-text:   #065F46;

  --orange-bg:    rgba(245,158,11,0.1);
  --orange-text:  #92400E;

  --red-bg:       rgba(239,68,68,0.08);
  --red-text:     #DC2626;

  --blue:         #10B981;
  --blue-bg:      rgba(16,185,129,0.08);
  --blue-text:    #065F46;

  --header-bg:    #0F172A;
  --header-text:  #F5F7FA;
  --header-text2: #7C8A9A;

  --btn-bg:       #FFFFFF;
  --btn-border:   #E2E8F0;
  --btn-text:     #0F172A;
  --btn-hover:    #F1F5F9;

  --btn-primary-bg:   #10B981;
  --btn-primary-text: #ffffff;
  --btn-primary-hover:#059669;

  --tab-active:       #10B981;
  --tab-active-line:  #10B981;

  --chart-1: #10B981;
  --chart-2: #6EE7B7;
  --chart-3: #F59E0B;

  --shadow:       0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-hover: 0 4px 12px rgba(16,185,129,0.12);

  --insight-bg:     rgba(16,185,129,0.06);
  --insight-border: #10B981;
  --insight-text:   #065F46;
  --insight-warn-bg:     rgba(245,158,11,0.08);
  --insight-warn-border: #F59E0B;
  --insight-warn-text:   #92400E;

  --toggle-active: #10B981;
}

[data-theme="neoMint"][data-mode="day"] .header-logo {
  color: #3EF2B1;
}

[data-theme="neoMint"][data-mode="day"] .metric-value {
  background: none;
  -webkit-text-fill-color: var(--text);
}

/* ── SIGNAL CORE UI — DARK MODE (DEFAULT) ────────────────── */
[data-theme="signalCore"],
[data-theme="signalCore"][data-mode="night"] {
  --bg:           #0D0F13;
  --surface:      #151821;
  --surface-alt:  #1C1F2A;
  --border:       #232735;
  --border-light: #1C1F2A;

  --text:         #E5E7EB;
  --text-2:       #6B7280;
  --text-3:       #374151;

  --accent:       #5E6AD2;
  --accent-bg:    rgba(94,106,210,0.1);

  --green:        #22C55E;
  --green-bg:     rgba(34,197,94,0.1);
  --green-text:   #22C55E;

  --orange-bg:    rgba(245,158,11,0.1);
  --orange-text:  #F59E0B;

  --red-bg:       rgba(239,68,68,0.1);
  --red-text:     #EF4444;

  --blue:         #5E6AD2;
  --blue-bg:      rgba(94,106,210,0.1);
  --blue-text:    #818CF8;

  --header-bg:    #0A0C10;
  --header-text:  #E5E7EB;
  --header-text2: #6B7280;

  --btn-bg:       #151821;
  --btn-border:   #232735;
  --btn-text:     #9CA3AF;
  --btn-hover:    #1C1F2A;

  --btn-primary-bg:   #5E6AD2;
  --btn-primary-text: #ffffff;
  --btn-primary-hover:#6E7AE2;

  --tab-active:       #E5E7EB;
  --tab-active-line:  #5E6AD2;

  --chart-1: #5E6AD2;
  --chart-2: #8B5CF6;
  --chart-3: #F59E0B;

  --shadow:       0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(94,106,210,0.15);
  --radius:       8px;

  --insight-bg:     rgba(94,106,210,0.08);
  --insight-border: #5E6AD2;
  --insight-text:   #818CF8;
  --insight-warn-bg:     rgba(245,158,11,0.08);
  --insight-warn-border: #F59E0B;
  --insight-warn-text:   #F59E0B;

  --toggle-active: #5E6AD2;
}

[data-theme="signalCore"] .metric-value,
[data-theme="signalCore"][data-mode="night"] .metric-value {
  background: none;
  -webkit-text-fill-color: var(--text);
}

[data-theme="signalCore"] .header-logo,
[data-theme="signalCore"][data-mode="night"] .header-logo {
  color: var(--text);
  letter-spacing: 0.12em;
}

[data-theme="signalCore"] .tab.active,
[data-theme="signalCore"][data-mode="night"] .tab.active {
  text-shadow: none;
}

/* ── SIGNAL CORE UI — LIGHT MODE ─────────────────────────── */
[data-theme="signalCore"][data-mode="day"] {
  --bg:           #F6F9FC;
  --surface:      #FFFFFF;
  --surface-alt:  #F1F5F9;
  --border:       #E2E8F0;
  --border-light: #EEF2F7;

  --text:         #0A2540;
  --text-2:       #6B7C93;
  --text-3:       #94A3B8;

  --accent:       #635BFF;
  --accent-bg:    rgba(99,91,255,0.06);

  --green:        #16A34A;
  --green-bg:     rgba(22,163,74,0.08);
  --green-text:   #15803D;

  --orange-bg:    rgba(217,119,6,0.08);
  --orange-text:  #B45309;

  --red-bg:       rgba(220,38,38,0.08);
  --red-text:     #DC2626;

  --blue:         #635BFF;
  --blue-bg:      rgba(99,91,255,0.08);
  --blue-text:    #4F46E5;

  --header-bg:    #0A2540;
  --header-text:  #F6F9FC;
  --header-text2: #94A3B8;

  --btn-bg:       #FFFFFF;
  --btn-border:   #E2E8F0;
  --btn-text:     #0A2540;
  --btn-hover:    #F1F5F9;

  --btn-primary-bg:   #635BFF;
  --btn-primary-text: #ffffff;
  --btn-primary-hover:#4F46E5;

  --tab-active:       #0A2540;
  --tab-active-line:  #635BFF;

  --chart-1: #635BFF;
  --chart-2: #0EA5E9;
  --chart-3: #D97706;

  --shadow:       0 1px 3px rgba(10,37,64,0.06), 0 0 0 1px rgba(10,37,64,0.04);
  --shadow-hover: 0 4px 12px rgba(99,91,255,0.12);
  --radius:       8px;

  --insight-bg:     rgba(99,91,255,0.06);
  --insight-border: #635BFF;
  --insight-text:   #4F46E5;
  --insight-warn-bg:     rgba(217,119,6,0.06);
  --insight-warn-border: #D97706;
  --insight-warn-text:   #92400E;

  --toggle-active: #635BFF;
}

[data-theme="signalCore"][data-mode="day"] .metric-value {
  background: none;
  -webkit-text-fill-color: var(--text);
}

[data-theme="signalCore"][data-mode="day"] .header-logo {
  color: var(--header-text);
  letter-spacing: 0.12em;
}

/* ── STRIPE CORE UI — DAY MODE (PRIMARY) ─────────────────── */
[data-theme="stripeCore"],
[data-theme="stripeCore"][data-mode="day"] {
  --bg:           #F6F9FC;
  --surface:      #FFFFFF;
  --surface-alt:  #F1F5F9;
  --border:       #E6EBF1;
  --border-light: #EEF2F8;

  --text:         #0A2540;
  --text-2:       #6B7C93;
  --text-3:       #9FB3C8;

  --accent:       #635BFF;
  --accent-bg:    rgba(99,91,255,0.06);

  --green:        #16A34A;
  --green-bg:     rgba(22,163,74,0.08);
  --green-text:   #15803D;

  --orange-bg:    rgba(217,119,6,0.08);
  --orange-text:  #B45309;

  --red-bg:       rgba(220,38,38,0.08);
  --red-text:     #DC2626;

  --blue:         #635BFF;
  --blue-bg:      rgba(99,91,255,0.08);
  --blue-text:    #4F46E5;

  --header-bg:    #0A2540;
  --header-text:  #FFFFFF;
  --header-text2: #94A3B8;

  --btn-bg:       #FFFFFF;
  --btn-border:   #E6EBF1;
  --btn-text:     #0A2540;
  --btn-hover:    #F1F5F9;

  --btn-primary-bg:   #635BFF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover:#4F46E5;

  --tab-active:       #0A2540;
  --tab-active-line:  #635BFF;

  --chart-1: #635BFF;
  --chart-2: #0EA5E9;
  --chart-3: #D97706;

  --shadow:       0 1px 3px rgba(10,37,64,0.06), 0 0 0 1px rgba(10,37,64,0.04);
  --shadow-hover: 0 4px 16px rgba(99,91,255,0.1);
  --radius:       8px;

  --insight-bg:     rgba(99,91,255,0.05);
  --insight-border: #635BFF;
  --insight-text:   #4338CA;
  --insight-warn-bg:     rgba(217,119,6,0.06);
  --insight-warn-border: #D97706;
  --insight-warn-text:   #92400E;

  --toggle-active: #635BFF;
}

[data-theme="stripeCore"] .metric-value,
[data-theme="stripeCore"][data-mode="day"] .metric-value {
  background: none;
  -webkit-text-fill-color: var(--text);
}

[data-theme="stripeCore"] .header-logo,
[data-theme="stripeCore"][data-mode="day"] .header-logo {
  color: var(--header-text);
  letter-spacing: 0.1em;
}

/* ── STRIPE CORE UI — NIGHT MODE ─────────────────────────── */
[data-theme="stripeCore"][data-mode="night"] {
  --bg:           #0A0F1C;
  --surface:      #12182A;
  --surface-alt:  #17203A;
  --border:       #1F2A44;
  --border-light: #1A2236;

  --text:         #E6EDF3;
  --text-2:       #94A3B8;
  --text-3:       #4A5568;

  --accent:       #7C8CFF;
  --accent-bg:    rgba(124,140,255,0.1);

  --green:        #22C55E;
  --green-bg:     rgba(34,197,94,0.1);
  --green-text:   #22C55E;

  --orange-bg:    rgba(245,158,11,0.1);
  --orange-text:  #F59E0B;

  --red-bg:       rgba(239,68,68,0.1);
  --red-text:     #EF4444;

  --blue:         #7C8CFF;
  --blue-bg:      rgba(124,140,255,0.1);
  --blue-text:    #A5B4FC;

  --header-bg:    #060B16;
  --header-text:  #E6EDF3;
  --header-text2: #4A5568;

  --btn-bg:       #12182A;
  --btn-border:   #1F2A44;
  --btn-text:     #94A3B8;
  --btn-hover:    #17203A;

  --btn-primary-bg:   #7C8CFF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover:#8E9DFF;

  --tab-active:       #E6EDF3;
  --tab-active-line:  #7C8CFF;

  --chart-1: #7C8CFF;
  --chart-2: #38BDF8;
  --chart-3: #F59E0B;

  --shadow:       0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-hover: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(124,140,255,0.1);
  --radius:       8px;

  --insight-bg:     rgba(124,140,255,0.08);
  --insight-border: #7C8CFF;
  --insight-text:   #A5B4FC;
  --insight-warn-bg:     rgba(245,158,11,0.08);
  --insight-warn-border: #F59E0B;
  --insight-warn-text:   #F59E0B;

  --toggle-active: #7C8CFF;
}

[data-theme="stripeCore"][data-mode="night"] .metric-value {
  background: none;
  -webkit-text-fill-color: var(--text);
}

[data-theme="stripeCore"][data-mode="night"] .header-logo {
  color: var(--header-text);
  letter-spacing: 0.1em;
}

/* ── POSITION BADGES — fixed green regardless of theme ───── */
.ap-good {
  background: rgba(34,197,94,0.12) !important;
  color: #16A34A !important;
}

[data-theme="cyberGraphite"] .ap-good,
[data-theme="cyberGraphite"][data-mode="day"] .ap-good {
  background: rgba(34,197,94,0.12) !important;
  color: #22C55E !important;
}

/* ── SIGNAL DOTS ─────────────────────────────────────────── */
.signal-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.signal-green  { background: var(--green-bg); box-shadow: 0 0 0 2px var(--green-text); }
.signal-yellow { background: var(--orange-bg); box-shadow: 0 0 0 2px var(--orange-text); }
.signal-orange { background: var(--orange-bg); box-shadow: 0 0 0 2px var(--orange-text); }
.signal-red    { background: var(--red-bg); box-shadow: 0 0 0 2px var(--red-text); }
.signal-grey   { background: var(--border); box-shadow: 0 0 0 2px var(--text-3); }

/* ── SIGNAL DOTS v2 — soft filled ───────────────────────── */
.signal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.signal-green  { background: #4ADE80; opacity: 0.75; }
.signal-yellow { background: #FCD34D; opacity: 0.75; }
.signal-orange { background: #FB923C; opacity: 0.75; }
.signal-red    { background: #F87171; opacity: 0.75; }
.signal-grey   { background: #6B7280; opacity: 0.5; }