/* ============================================================
   Overlord — ECLYPSE Theme v2 (Full Coverage)
   Background: #050505 | Surface: #111111 | Accent: #dc2626
   ============================================================ */

/* ── 1. CSS Custom Properties (Design Tokens) ─────────────── */
:root {
  /* Color scale remaps — blue/indigo/violet/cyan → ECLYPSE red */
  --color-sky-50:#fff1f2;    --color-sky-100:#fee2e2;    --color-sky-200:#fecaca;
  --color-sky-300:#fca5a5;   --color-sky-400:#f87171;    --color-sky-500:#ef4444;
  --color-sky-600:#dc2626;   --color-sky-700:#b91c1c;    --color-sky-800:#991b1b;
  --color-sky-900:#7f1d1d;   --color-sky-950:#450a0a;

  --color-indigo-50:#fff1f2;  --color-indigo-100:#fee2e2;  --color-indigo-200:#fecaca;
  --color-indigo-300:#fca5a5; --color-indigo-400:#f87171;  --color-indigo-500:#ef4444;
  --color-indigo-600:#dc2626; --color-indigo-700:#b91c1c;  --color-indigo-800:#991b1b;
  --color-indigo-900:#7f1d1d; --color-indigo-950:#450a0a;

  --color-violet-50:#fff1f2;  --color-violet-100:#fee2e2;  --color-violet-200:#fecaca;
  --color-violet-300:#fca5a5; --color-violet-400:#f87171;  --color-violet-500:#ef4444;
  --color-violet-600:#dc2626; --color-violet-700:#b91c1c;  --color-violet-800:#991b1b;
  --color-violet-900:#7f1d1d; --color-violet-950:#450a0a;

  --color-blue-50:#fff1f2;   --color-blue-100:#fee2e2;   --color-blue-200:#fecaca;
  --color-blue-300:#fca5a5;  --color-blue-400:#f87171;   --color-blue-500:#ef4444;
  --color-blue-600:#dc2626;  --color-blue-700:#b91c1c;   --color-blue-800:#991b1b;
  --color-blue-900:#7f1d1d;  --color-blue-950:#450a0a;

  --color-cyan-50:#fff1f2;   --color-cyan-100:#fee2e2;   --color-cyan-200:#fecaca;
  --color-cyan-300:#fca5a5;  --color-cyan-400:#f87171;   --color-cyan-500:#ef4444;
  --color-cyan-600:#dc2626;  --color-cyan-700:#b91c1c;   --color-cyan-800:#991b1b;
  --color-cyan-900:#7f1d1d;  --color-cyan-950:#450a0a;

  /* Primary & accent */
  --color-primary:        #dc2626;
  --color-primary-hover:  #ef4444;
  --brand-accent:         #dc2626;
  --color-text-muted:     #9a9a9a;

  /* Surfaces — remove ALL blue tint */
  --color-surface:        rgba(20, 8, 8, 0.32);
  --color-surface-dark:   rgba(8, 3, 3, 0.72);

  /* UI system vars */
  --ui-surface:           rgba(12, 5, 5, 0.75);
  --ui-surface-strong:    rgba(15, 6, 6, 0.92);
  --ui-surface-elevated:  rgba(18, 7, 7, 0.96);
  --ui-border:            rgba(220, 38, 38, 0.14);
  --ui-border-strong:     rgba(220, 38, 38, 0.48);
  --ui-ring:              rgba(220, 38, 38, 0.24);
  --ui-shadow:            0 14px 34px rgba(0,0,0,0.5);

  /* Client view vars */
  --cv-bg:                #100808;
  --cv-bg-selected:       #1e0808;
  --cv-bg-hover:          rgba(220,38,38,0.05);
  --cv-surface2:          #160808;
  --cv-border:            rgba(220,38,38,0.12);
  --cv-border-strong:     rgba(220,38,38,0.28);
  --cv-text:              #e8edf2;
  --cv-text-mute:         #9a9a9a;
  --cv-text-dim:          #6b7070;
  --cv-accent:            #dc2626;
  --cv-accent-bg:         rgba(220,38,38,0.14);
  --cv-accent-border:     rgba(220,38,38,0.48);
  --cv-danger:            #fca5a5;
  --cv-warn:              #fbbf24;
}

/* ── 2. Page Background ───────────────────────────────────── */
html, body {
  background:
    radial-gradient(circle at 50% 0%, rgba(220,38,38,0.07), transparent 38%),
    #050505 !important;
  color: #e8edf2 !important;
}

/* ── 3. Tailwind Class Overrides (inline HTML classes) ────── */
/* Background scale overrides */
[class*="bg-slate-950"] { background-color: #050505 !important; }
[class*="bg-slate-900"] { background-color: #0e0606 !important; }
[class*="bg-slate-800"] { background-color: #180808 !important; }
[class*="bg-slate-700"] { background-color: #220a0a !important; }

/* Border scale overrides */
[class*="border-slate-800"] { border-color: rgba(220,38,38,0.18) !important; }
[class*="border-slate-700"] { border-color: rgba(220,38,38,0.28) !important; }
[class*="border-slate-600"] { border-color: rgba(220,38,38,0.38) !important; }

/* Text scale overrides */
[class*="text-slate-500"] { color: #6b6b6b !important; }
[class*="text-slate-400"] { color: #9a9a9a !important; }
[class*="text-slate-300"] { color: #cccccc !important; }
[class*="text-slate-200"] { color: #e0e0e0 !important; }
[class*="text-slate-100"] { color: #f0f0f0 !important; }

/* Accent icon colors → ECLYPSE red */
[class*="text-indigo-4"], [class*="text-sky-4"], [class*="text-blue-4"],
[class*="text-cyan-4"], [class*="text-violet-4"] { color: #dc2626 !important; }
[class*="text-indigo-3"], [class*="text-sky-3"], [class*="text-blue-3"],
[class*="text-cyan-3"] { color: #f87171 !important; }
[class*="text-sky-2"], [class*="text-blue-2"], [class*="text-indigo-2"] { color: #fca5a5 !important; }

/* Blue/indigo/sky/cyan action buttons → red */
[class*="bg-blue-6"], [class*="bg-sky-6"], [class*="bg-indigo-6"], [class*="bg-cyan-6"],
[class*="bg-blue-7"], [class*="bg-sky-7"], [class*="bg-cyan-7"] {
  background-color: #dc2626 !important;
}
[class*="hover:bg-blue-7"]:hover, [class*="hover:bg-sky-5"]:hover,
[class*="hover:bg-indigo-5"]:hover, [class*="hover:bg-cyan-7"]:hover {
  background-color: #b91c1c !important;
}
[class*="border-indigo-5"] { border-color: rgba(220,38,38,0.5) !important; }
[class*="border-blue-7"]   { border-color: rgba(220,38,38,0.5) !important; }

/* Icon container backgrounds */
[class*="bg-sky-5"][class*="/10"],
[class*="bg-indigo-5"][class*="/10"],
[class*="bg-blue-5"][class*="/5"] {
  background-color: rgba(220,38,38,0.10) !important;
}
[class*="border-sky-5"][class*="/30"],
[class*="border-indigo-5"][class*="/30"],
[class*="border-blue-5"][class*="/20"] {
  border-color: rgba(220,38,38,0.30) !important;
}

/* Focus rings */
[class*="focus:ring-sky"],
[class*="focus:ring-blue"],
[class*="focus:ring-indigo"] {
  --tw-ring-color: rgba(220,38,38,0.45) !important;
}
[class*="focus:border-blue"], [class*="focus:border-sky"],
[class*="focus:border-indigo"], [class*="focus:border-purple"] {
  border-color: rgba(220,38,38,0.55) !important;
}

/* Accordion backgrounds (build page) */
[class*="bg-slate-8"][class*="/50"], [class*="bg-slate-8"][class*="/40"],
[class*="bg-slate-8"][class*="/60"] { background-color: #140808 !important; }
[class*="hover:bg-slate-8"]:hover { background-color: #1e0a0a !important; }
[class*="border-slate-8"], [class*="rounded-xl"][class*="border"] {
  border-color: rgba(220,38,38,0.18) !important;
}

/* Backstage canvas */
[class*="bg-slate-950"] canvas { background-color: #050505 !important; }

/* Build page platform labels */
[class*="hover:border-blue-5"]:hover,
[class*="hover:border-sky-5"]:hover,
[class*="hover:border-cyan-5"]:hover { border-color: rgba(220,38,38,0.6) !important; }
[class*="hover:text-blue-3"]:hover,
[class*="hover:text-blue-4"]:hover { color: #f87171 !important; }
[class*="hover:border-blue-5"]:hover { border-color: rgba(220,38,38,0.6) !important; }

/* macOS SDK upload panel */
#macos-sdk-upload-section {
  background: rgba(80,10,10,0.28) !important;
  border-color: rgba(220,38,38,0.40) !important;
}
[class*="bg-blue-950"] { background-color: rgba(60,5,5,0.30) !important; }
[class*="border-blue-7"] { border-color: rgba(220,38,38,0.45) !important; }

/* ── 4. App Loader / Splash ───────────────────────────────── */
.app-loader-bg {
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(220,38,38,0.18), transparent 70%),
    radial-gradient(50% 45% at 80% 10%, rgba(153,27,27,0.16), transparent 72%),
    radial-gradient(65% 55% at 50% 100%, rgba(127,7,7,0.10), transparent 75%) !important;
}
#app-loader { background: rgba(5,2,2,0.94) !important; }
.app-loader-core {
  border-color: rgba(220,38,38,0.28) !important;
  background: linear-gradient(150deg, rgba(15,6,6,0.93), rgba(8,3,3,0.97)) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,0.6), 0 0 0 1px rgba(239,68,68,0.08) !important;
}
.app-loader-core::before {
  background: linear-gradient(110deg, transparent 20%, rgba(220,38,38,0.12) 50%, transparent 80%) !important;
}
.ring-a { border-top-color: rgba(239,68,68,0.95) !important; border-right-color: rgba(220,38,38,0.62) !important; border-bottom-color: transparent !important; border-left-color: transparent !important; }
.ring-b { border-top-color: transparent !important; border-right-color: transparent !important; border-left-color: rgba(239,68,68,0.90) !important; border-bottom-color: rgba(153,27,27,0.55) !important; }
.ring-c { border-top-color: rgba(252,165,165,0.90) !important; border-right-color: rgba(239,68,68,0.65) !important; border-bottom-color: transparent !important; border-left-color: transparent !important; }
.loader-title   { text-shadow: 0 0 18px rgba(220,38,38,0.30) !important; }
.loader-brand   { color: rgba(200,180,180,0.95) !important; }
.loader-percent { color: #fca5a5 !important; }
.loader-track   { background: rgba(25,8,8,0.90) !important; border-color: rgba(220,38,38,0.22) !important; }
.loader-bar {
  background: linear-gradient(90deg, rgba(239,68,68,0.90), rgba(220,38,38,0.96)) !important;
  box-shadow: 0 0 14px rgba(220,38,38,0.36) !important;
}

/* ── 5. Topbar / Top Nav ──────────────────────────────────── */
.topbar, .console-topbar, #top-nav {
  background: linear-gradient(170deg, rgba(5,3,3,0.97), rgba(5,2,2,0.95)) !important;
  border-bottom: 1px solid rgba(220,38,38,0.16) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55) !important;
}
html.nav-pre-sidebar #top-nav,
body.sb-ready #top-nav {
  background: rgba(5,2,2,0.99) !important;
  border-right: 1px solid rgba(220,38,38,0.12) !important;
}
#sb-mobile-bar {
  background: rgba(5,2,2,0.99) !important;
  border-bottom: 1px solid rgba(220,38,38,0.12) !important;
}
#top-nav nav a {
  border-color: rgba(60,20,20,0.55) !important;
}
#top-nav nav a:hover {
  border-color: rgba(220,38,38,0.45) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
}
#top-nav nav a.nav-active {
  border-color: rgba(220,38,38,0.62) !important;
  background: linear-gradient(135deg, rgba(100,5,5,0.45), rgba(15,5,5,0.92)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(239,68,68,0.16),
    0 10px 26px rgba(153,27,27,0.22) !important;
}
#top-nav nav a.nav-active i {
  filter: drop-shadow(0 0 10px rgba(239,68,68,0.42)) !important;
}

/* Topbar nav toggle (compact mode) */
.topbar-nav-toggle {
  background: rgba(220,38,38,0.10) !important;
  border: 1px solid rgba(220,38,38,0.28) !important;
  color: #f87171 !important;
}
.topbar-nav-toggle:hover {
  background: rgba(220,38,38,0.18) !important;
  border-color: rgba(220,38,38,0.45) !important;
  color: #fca5a5 !important;
}

/* Topbar compact center panel */
body.topbar-compact .topbar-center {
  background: rgba(8,4,4,0.98) !important;
  border: 1px solid rgba(40,10,10,0.82) !important;
}
body.topbar-compact .nav-dd-menu {
  background: rgba(5,2,2,0.85) !important;
  border-color: rgba(220,38,38,0.25) !important;
}

/* ── 6. Sidebar / Nav ─────────────────────────────────────── */
.sb-link { color: #9a7a7a !important; }
.sb-link:hover { color: #e0e0e0 !important; }
.sb-link.nav-active {
  background: rgba(220,38,38,0.13) !important;
  color: #f87171 !important;
}
.sb-link.nav-active:hover { background: rgba(220,38,38,0.20) !important; }
.sb-collapse-btn { color: #6b6b6b !important; }
.sb-chevron { color: #5a4040 !important; }
#nav-reveal-btn {
  background: rgba(8,4,4,0.85) !important;
  color: #6b6b6b !important;
}
#nav-reveal-btn::after {
  color: #9a9a9a !important;
  background: rgba(8,4,4,0.94) !important;
}

/* Nav Dropdown Groups */
.nav-dd-group-btn {
  background: rgba(18,8,8,0.85) !important;
  border: 1px solid rgba(50,15,15,0.70) !important;
  color: #9a9a9a !important;
}
.nav-dd-group-btn:hover {
  background: rgba(30,10,10,0.85) !important;
}
.nav-dd-group-btn[aria-expanded="true"],
.nav-dd-group-btn.expanded {
  border-color: rgba(220,38,38,0.28) !important;
}
.nav-dd-menu {
  background: rgba(8,3,3,0.98) !important;
  border: 1px solid rgba(45,12,12,0.80) !important;
}
.nav-dd-item { color: #9a9a9a !important; }
.nav-dd-item:hover { background: rgba(220,38,38,0.10) !important; }
.nav-dd-item.nav-active {
  background: rgba(220,38,38,0.16) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(220,38,38,0.28) !important;
}

/* User actions (account menu) */
.user-actions-trigger {
  background: rgba(18,8,8,0.70) !important;
  border: 1px solid rgba(50,15,15,0.60) !important;
  color: #cccccc !important;
}
.user-actions-trigger[aria-expanded="true"] {
  border-color: rgba(220,38,38,0.30) !important;
}
.user-actions-item:hover { background: rgba(220,38,38,0.10) !important; }

/* ── 7. Client Count Pill ─────────────────────────────────── */
#total-pill {
  background: linear-gradient(135deg, rgba(100,5,5,0.55), rgba(10,4,4,0.78)) !important;
  border-color: rgba(220,38,38,0.48) !important;
  box-shadow: 0 8px 20px rgba(153,27,27,0.22) !important;
}

/* ── 8. Cards ─────────────────────────────────────────────── */
.card {
  background: rgba(20,8,8,0.72) !important;
  border: 1px solid rgba(50,15,15,0.60) !important;
}
.card.card-offline {
  background: rgba(10,4,4,0.65) !important;
  border-color: rgba(40,10,10,0.35) !important;
}
.console-card {
  background: linear-gradient(145deg, rgba(22,8,8,0.35), rgba(8,3,3,0.90)) !important;
}
.cv-card {
  background: var(--cv-bg) !important;
  border: 1px solid var(--cv-border) !important;
}
.cv-card-header { background: #0a0404 !important; }

/* Hardware panel */
.hw-panel {
  background: linear-gradient(135deg, rgba(28,10,10,0.55), rgba(16,6,6,0.65)) !important;
  border-color: rgba(220,38,38,0.18) !important;
}

/* ── 9. Grid Card Hover ───────────────────────────────────── */
#grid article.card {
  border-color: var(--group-color, rgba(60,15,15,0.55)) !important;
}
#grid article.card:hover {
  border-color: var(--group-color, rgba(220,38,38,0.45)) !important;
  box-shadow:
    0 18px 36px rgba(2,0,0,0.50),
    0 0 0 1px rgba(220,38,38,0.12) !important;
}

/* ── 10. Tabulator Table ──────────────────────────────────── */
.overlord-tabulator.tabulator {
  background: #080303 !important;
  border: 1px solid rgba(220,38,38,0.15) !important;
}
.overlord-tabulator .tabulator-header {
  background: #0d0505 !important;
  border-bottom-color: rgba(220,38,38,0.18) !important;
  color: #9a9a9a !important;
}
.overlord-tabulator .tabulator-header .tabulator-col {
  background: #0d0505 !important;
  border-right-color: rgba(220,38,38,0.12) !important;
}
.overlord-tabulator .tabulator-header .tabulator-col:hover { background: #140707 !important; }
.overlord-tabulator .tabulator-row {
  background: #080303 !important;
  border-bottom-color: rgba(220,38,38,0.10) !important;
}
.overlord-tabulator .tabulator-row.tabulator-row-even { background: #0a0404 !important; }
.overlord-tabulator .tabulator-row:hover { background: rgba(220,38,38,0.08) !important; }
.overlord-tabulator .tabulator-placeholder { background: #080303 !important; color: #9a9a9a !important; }
--vscode-editor-background: #080303 !important;

/* ── 11. Global Table ─────────────────────────────────────── */
thead th {
  background: rgba(20,8,8,0.65) !important;
  color: #f0f0f0 !important;
}
tbody tr:nth-child(even) { background: rgba(10,4,4,0.45) !important; }
tbody tr:hover { background: rgba(220,38,38,0.16) !important; }

/* ── 12. Filter / Search ──────────────────────────────────── */
#filter-status:focus, #filter-os:focus, #sort:focus {
  border-color: rgba(220,38,38,0.62) !important;
  box-shadow:   0 0 0 3px rgba(220,38,38,0.14) !important;
}
#search-shell {
  background: rgba(14,6,6,0.85) !important;
  border-color: rgba(50,15,15,0.60) !important;
}
#search-shell:focus-within {
  border-color: rgba(220,38,38,0.62) !important;
  box-shadow:   0 0 0 3px rgba(220,38,38,0.14) !important;
}

/* ── 13. Pagination / Selection Buttons ───────────────────── */
#select-all:hover, #clear-selection:hover, #prev:hover, #next:hover {
  border-color: rgba(220,38,38,0.42) !important;
}

/* ── 14. Bulk Action Toolbar ──────────────────────────────── */
#bulk-toolbar {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(220,38,38,0.14), transparent 55%),
    rgba(100,5,5,0.28) !important;
  border-color: rgba(220,38,38,0.42) !important;
}

/* ── 15. Primary Button ───────────────────────────────────── */
.button.primary {
  background: linear-gradient(120deg, #b91c1c, #dc2626) !important;
  border-color: rgba(239,68,68,0.50) !important;
  box-shadow: 0 10px 24px rgba(153,27,27,0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.button.primary:hover {
  box-shadow: 0 6px 24px rgba(220,38,38,0.42), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.button.ghost {
  background: linear-gradient(170deg, rgba(20,8,8,0.32), rgba(10,4,4,0.28)) !important;
}
.cv-btn-primary {
  background: #dc2626 !important;
}
.cv-btn-primary:hover { background: #b91c1c !important; }

/* ── 16. Input / Form Focus ───────────────────────────────── */
input, select, textarea {
  background: var(--ui-surface) !important;
  border-color: rgba(220,38,38,0.14) !important;
  color: #e8edf2 !important;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(220,38,38,0.50) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
  outline: none !important;
}
.input-row {
  background: rgba(12,5,5,0.80) !important;
  border: 1px solid rgba(50,15,15,0.60) !important;
}
.input-row:focus-within {
  border-color: rgba(220,38,38,0.50) !important;
  box-shadow:   0 0 0 4px rgba(220,38,38,0.10) !important;
}
.input-row i { color: #7a5a5a !important; }
.input-row:focus-within i { color: #dc2626 !important; }
input::placeholder, textarea::placeholder { color: #5a4040 !important; }
input[type="checkbox"] { accent-color: #dc2626 !important; }
input[type="range"] { accent-color: #dc2626 !important; }

/* ── 17. Dashboard Toolbar & Menus ───────────────────────── */
.dashboard-icon-btn,
.dashboard-toggle,
.dashboard-menu > summary {
  border: 1px solid rgba(50,15,15,0.72) !important;
  background: #100606 !important;
  color: #9a9a9a !important;
}
.dashboard-icon-btn:hover,
.dashboard-toggle:hover,
.dashboard-menu > summary:hover {
  border-color: rgba(220,38,38,0.45) !important;
  background: #180808 !important;
}
.dashboard-menu[open] > summary {
  color: #f87171 !important;
  border-color: rgba(220,38,38,0.45) !important;
  background: #1a0808 !important;
}
.dashboard-menu-panel {
  border: 1px solid rgba(50,15,15,0.78) !important;
  background: #0d0505 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.60) !important;
}
.dashboard-menu-panel select,
.dashboard-menu-panel #country-picker-btn {
  background-color: #100606 !important;
  border-color: rgba(50,15,15,0.70) !important;
  color: #cccccc !important;
}
.dashboard-menu-panel select:hover {
  border-color: rgba(220,38,38,0.45) !important;
}
.dashboard-fields-panel input { accent-color: #dc2626 !important; }
.dashboard-card-menu-panel {
  border: 1px solid rgba(50,15,15,0.82) !important;
  background: rgba(8,3,3,0.98) !important;
}
.dashboard-card-menu-panel input { accent-color: #dc2626 !important; }

/* ── 18. Dashboard Stat/Chart Cards ──────────────────────── */
.dashboard-stat-card,
.dashboard-chart-card,
.dashboard-health-card {
  border: 1px solid rgba(220,38,38,0.16) !important;
  background: rgba(10,4,4,0.72) !important;
}
.dashboard-stat-card--sessions { border-color: rgba(220,38,38,0.24) !important; }
.dashboard-stat-card--online   { border-color: rgba(220,38,38,0.22) !important; }
.dashboard-stat-topline i      { color: #f87171 !important; }
.dashboard-stats-title i       { color: #dc2626 !important; }
.dashboard-chart-pill {
  border: 1px solid rgba(220,38,38,0.22) !important;
  background: rgba(60,10,10,0.32) !important;
  color: #fca5a5 !important;
}
.dashboard-stats-resizer:hover span { background: rgba(220,38,38,0.72) !important; }
.dashboard-stat-card.is-dragging,
.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
  border-color: rgba(220,38,38,0.55) !important;
}
.dashboard-stats-content .grid-stack-placeholder > .placeholder-content {
  border: 1px dashed rgba(220,38,38,0.50) !important;
  background: rgba(60,10,10,0.22) !important;
}
.dashboard-health-row {
  border: 1px solid rgba(220,38,38,0.14) !important;
  background: rgba(10,4,4,0.46) !important;
  color: #9a9a9a !important;
}
.dashboard-health-row.is-dragging { border-color: rgba(220,38,38,0.55) !important; }

/* ── 19. Page Jump ────────────────────────────────────────── */
.page-jump {
  background: rgba(10,4,4,0.72) !important;
  border: 1px solid rgba(50,15,15,0.62) !important;
  color: #9a9a9a !important;
}
.page-jump input { background: #0a0404 !important; color: #cccccc !important; }
.page-jump button { background: #100606 !important; }

/* ── 20. Graph Page ───────────────────────────────────────── */
.graph-toolbar {
  border: 1px solid rgba(220,38,38,0.18) !important;
  background: rgba(5,2,2,0.80) !important;
}
.graph-title > i {
  background: rgba(220,38,38,0.12) !important;
  color: #f87171 !important;
  border: 1px solid rgba(220,38,38,0.22) !important;
}
.graph-field {
  border: 1px solid rgba(50,15,15,0.95) !important;
  background: rgba(8,3,3,0.92) !important;
  color: #9a9a9a !important;
}
.graph-field:focus-within {
  border-color: rgba(220,38,38,0.55) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}
.graph-select {
  border: 1px solid rgba(50,15,15,0.95) !important;
  background: #080303 !important;
  color: #f0f0f0 !important;
}
.graph-canvas {
  border: 1px solid rgba(220,38,38,0.16) !important;
  background: linear-gradient(rgba(8,3,3,0.86), rgba(5,2,2,0.94)) !important;
}
.graph-inspector {
  border: 1px solid rgba(220,38,38,0.14) !important;
  background: #0a0404 !important;
}
.graph-meta-row:hover { background: rgba(50,15,15,0.32) !important; }
.graph-action:hover   { background: rgba(50,15,15,0.55) !important; }
.graph-action--files i { color: #f87171 !important; }

/* ── 21. Layout Toggle ────────────────────────────────────── */
.layout-toggle-btn.is-active {
  background: var(--cv-accent-bg) !important;
  color: var(--cv-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(220,38,38,0.48) !important;
}

/* ── 22. Checkbox ─────────────────────────────────────────── */
.cv-checkbox input:checked + .cv-checkbox-box {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* ── 23. Login Page ───────────────────────────────────────── */
.login-body {
  background:
    radial-gradient(circle at 50% 0%, rgba(220,38,38,0.10), transparent 42%),
    linear-gradient(160deg, #090303 0%, #050505 100%) !important;
}
.login-body::before {
  background:
    radial-gradient(40% 40% at 20% 20%, rgba(220,38,38,0.15), transparent 55%),
    radial-gradient(35% 35% at 80% 30%, rgba(153,27,27,0.12), transparent 55%),
    linear-gradient(120deg, rgba(220,38,38,0.08), rgba(153,27,27,0.04)) !important;
}
.login-card {
  background: linear-gradient(145deg, rgba(17,6,6,0.96), rgba(10,4,4,0.98)) !important;
  border: 1px solid rgba(220,38,38,0.22) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.68),
    0 0 0 1px rgba(220,38,38,0.08),
    0 0 80px rgba(220,38,38,0.06) !important;
}
.login-card::before {
  background: linear-gradient(145deg, rgba(220,38,38,0.24), transparent) !important;
}
.particle {
  background: radial-gradient(circle, rgba(220,38,38,0.8), transparent) !important;
}
.login-crown { color: #dc2626 !important; }
.login-brand {
  background: linear-gradient(135deg, #dc2626, #f87171) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.login-enterprise-footer { color: #6b6b6b !important; }
.login-support-link { color: #f87171 !important; }

/* Password policy card */
.password-policy-card {
  border: 1px solid rgba(220,38,38,0.14) !important;
  background: rgba(10,4,4,0.50) !important;
}
.password-policy-title i { color: #fca5a5 !important; }
.password-policy-item    { color: #9a9a9a !important; }
.password-policy-item i  { color: #6b6b6b !important; }

/* ── 24. Login Particles (click effect) ───────────────────── */
.login-btn-particle {
  background: radial-gradient(circle, rgba(239,68,68,1), rgba(220,38,38,0.9)) !important;
  box-shadow:
    0 0  6px rgba(220,38,38,1.0),
    0 0 12px rgba(220,38,38,0.9),
    0 0 24px rgba(220,38,38,0.7),
    0 0 36px rgba(153,27,27,0.5) !important;
}

/* ── 25. Admin Crown ──────────────────────────────────────── */
.header-crown {
  background: linear-gradient(135deg, #f87171, #dc2626) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── 26. Console ──────────────────────────────────────────── */
.console-body {
  background:
    radial-gradient(circle at 50% 0%, rgba(220,38,38,0.08), transparent 38%),
    #050505 !important;
}
.console-topbar { background: rgba(5,2,2,0.92) !important; }
.console-output {
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(220,38,38,0.06), transparent 50%),
    radial-gradient(80%  80% at 80%  0%, rgba(153,27,27,0.06), transparent 60%),
    #080303 !important;
}
#console-input {
  background: rgba(5,2,2,0.85) !important;
  color: #e8edf2 !important;
}
.console-input-row .prompt { color: #fca5a5 !important; }

/* ── 27. Toast Notifications ──────────────────────────────── */
.toast {
  background: linear-gradient(135deg, rgba(18,8,8,0.98), rgba(10,4,4,0.98)) !important;
  border: 1px solid rgba(220,38,38,0.22) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.60) !important;
}
.toast-info .toast-icon {
  background: rgba(220,38,38,0.18) !important;
  color: #f87171 !important;
}
.toast-close { color: #9a9a9a !important; }

/* ── 28. Pills / Badges ───────────────────────────────────── */
.pill-hw {
  background: rgba(220,38,38,0.14) !important;
  color: #fca5a5 !important;
  border-color: rgba(220,38,38,0.30) !important;
}
.pill-hw:hover { background: rgba(220,38,38,0.24) !important; }
.pill-offline {
  background: rgba(30,10,10,0.30) !important;
  color: #9a9a9a !important;
  border-color: rgba(50,15,15,0.55) !important;
}
/* Windows pill → keep blue (OS brand), override others */
.pill-win { background: rgba(40,20,20,0.10) !important; color: #fca5a5 !important; border-color: rgba(220,38,38,0.22) !important; }
.cv-plugin-badge {
  color: #fca5a5 !important;
  background: rgba(220,38,38,0.12) !important;
  border-color: rgba(220,38,38,0.30) !important;
}

/* ── 29. Scrollbar ────────────────────────────────────────── */
* { scrollbar-color: rgba(220,38,38,0.55) rgba(10,4,4,0.60) !important; }
*::-webkit-scrollbar-track { background: rgba(10,4,4,0.55) !important; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(220,38,38,0.72), rgba(153,27,27,0.66)) !important;
  border: 2px solid rgba(10,4,4,0.75) !important;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(239,68,68,0.86), rgba(220,38,38,0.80)) !important;
}

/* ── 30. Monaco / VS Code Editor ─────────────────────────── */
.monaco-editor, .monaco-editor .margin { background: #080303 !important; }