:root {
  /* Default Theme (Midnights - Dark Mode) */
  --bg-dark: #080c14;
  --card-bg: rgba(13, 20, 32, 0.7);
  --border-color: rgba(96, 165, 250, 0.08);
  --accent-emerald: #10b981;
  --accent-emerald-glow: rgba(16, 185, 129, 0.15);
  --accent-blue: #3b82f6;
  --accent-blue-light: #60a5fa;
  --accent-blue-glow: rgba(59, 130, 246, 0.15);
  --accent-red: #f43f5e;
  --accent-orange: #fbbf24;
  --text-primary: #e2eaf4;
  --text-secondary: #8da2bb;
  --text-muted: #576d85;
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --glass-blur: blur(12px);
  --card-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.35);
  --header-height: 70px;
  
  --bg-main: var(--bg-dark);
  --bg-card: var(--card-bg);
  --primary: #60a5fa;
  --primary-hover: #3b82f6;
  --success: #10b981;
  --danger: #f43f5e;
  --danger-hover: #e11d48;
  --text-main: var(--text-primary);
  
  --header-bg: rgba(8, 12, 20, 0.85);
  --card-inner-bg: rgba(96, 165, 250, 0.02);
  --canvas-bg: rgba(96, 165, 250, 0.01);
  --terminal-bg: #05070a;
  --terminal-text-info: #e2eaf4;
  --terminal-text-debug: #576d85;
  
  --card-top-glow: rgba(96, 165, 250, 0.12);
  --input-bg: rgba(13, 20, 32, 0.8);
  --input-border: rgba(96, 165, 250, 0.15);
  --sidebar-bg: rgba(96, 165, 250, 0.01);
  --code-bg: rgba(96, 165, 250, 0.03);
  --alert-bg: rgba(96, 165, 250, 0.04);
  --th-bg: rgba(96, 165, 250, 0.05);
  --tr-even-bg: rgba(96, 165, 250, 0.02);
  --console-timestamp: #4b5563;
  --console-node: var(--primary);
  --console-fields: #60a5fa;
  --console-warn: #fbbf24;
  --console-error: #f43f5e;
  --console-system: #60a5fa;

  /* Helper Color Overlays */
  --primary-alpha: rgba(96, 165, 250, 0.08);
  --primary-alpha-hover: rgba(96, 165, 250, 0.15);
  --primary-glow: rgba(96, 165, 250, 0.25);
  --warning: var(--accent-orange);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2360a5fa' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(8, 12, 20, 0.85);

  /* Semantic Dynamic Colors */
  --success-bg: rgba(16, 185, 129, 0.15);
  --danger-bg: rgba(244, 63, 94, 0.15);
  --chart-grid: #1e293b;
  --chart-bg: rgba(15, 23, 42, 0.4);
  --btn-run-text: #080c14;
  --chart-cp: #f43f5e;
  --chart-cp-alpha: rgba(244, 63, 94, 0.15);
  --chart-up: #60a5fa;
  --chart-up-alpha: rgba(96, 165, 250, 0.15);
  --terminal-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
  --status-online: #10b981;
  --status-online-bg: rgba(16, 185, 129, 0.15);
  --status-online-border: rgba(16, 185, 129, 0.3);
  --status-offline: #f43f5e;
  --status-offline-bg: rgba(244, 63, 94, 0.15);
  --status-offline-border: rgba(244, 63, 94, 0.3);
  --worker-active-border: #10b981;
  --worker-active-text: #10b981;
  --btn-start-bg: #60a5fa;
  --btn-start-hover-bg: #3b82f6;
  --btn-start-text: #080c14;
  --btn-stop-bg: #f43f5e;
  --btn-stop-hover-bg: #e11d48;
  --btn-stop-text: #ffffff;
  --btn-capture-start-bg: #10b981;
  --btn-capture-start-hover-bg: #059669;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #f43f5e;
  --btn-capture-stop-hover-bg: #e11d48;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #f43f5e;
  --error-text: #f43f5e;
  --error-bg: rgba(244, 63, 94, 0.15);
  --error-border: #f43f5e;
  --alert-success-border: #10b981;
  --alert-warning-border: #fbbf24;
}

body.noc-contrast {
  --bg-dark: #000000;
  --card-bg: #000000;
  --border-color: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --text-muted: #888888;
  --accent-emerald: #00ff00;
  --accent-blue-light: #00ffff;
  --accent-red: #ff0000;
  --accent-orange: #ffff00;
  --glass-blur: none;
  --card-shadow: none;
  
  --bg-main: var(--bg-dark);
  --bg-card: var(--card-bg);
  --primary: var(--accent-blue-light);
  --text-main: var(--text-primary);
  
  --header-bg: #000000;
  --card-inner-bg: #000000;
  --canvas-bg: #000000;
  --terminal-bg: #000000;
  --terminal-text-info: #ffffff;
  --terminal-text-debug: #888888;
  
  --card-top-glow: rgba(255, 255, 255, 0.3);
  --input-bg: #000000;
  --input-border: #ffffff;
  --sidebar-bg: #000000;
  --code-bg: #000000;
  --alert-bg: #000000;
  --th-bg: #000000;
  --tr-even-bg: #000000;
  --console-timestamp: #ffffff;
  --console-node: #ffffff;
  --console-fields: #ffffff;
  --console-warn: #ffff00;
  --console-error: #ff0000;
  --console-system: #00ffff;

  /* Helper Color Overlays */
  --primary-alpha: rgba(0, 255, 255, 0.15);
  --primary-alpha-hover: rgba(0, 255, 255, 0.25);
  --primary-glow: rgba(0, 255, 255, 0.4);
  --warning: var(--accent-orange);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300ffff' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(0, 0, 0, 0.95);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--text-main);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: var(--glass-blur);
  z-index: 10;
}

.logo {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-main);
}

.logo span {
  color: var(--primary);
}

.nav-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

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

.nav-tab.active {
  background: var(--primary-alpha);
  border-color: var(--primary);
  color: var(--primary);
}

.status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--status-offline-bg);
  border: 1px solid var(--status-offline-border);
  color: var(--status-offline);
  margin-left: 1rem;
}

.status-badge.online {
  background: var(--status-online-bg);
  border-color: var(--status-online-border);
  color: var(--status-online);
}

.stats-bar {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.stats-bar span span {
  color: var(--primary);
}

main {
  flex: 1;
  display: flex;
  padding: 1.5rem;
  gap: 1.5rem;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.tab-view {
  width: 100%;
  height: 100%;
}

section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--glass-blur);
  position: relative;
  overflow: hidden;
}

section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--card-top-glow), transparent);
}

section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#view-live {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  grid-template-rows: 100%;
  height: 100%;
  gap: 1.5rem;
}

#scenario-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scenario-card {
  background: var(--card-inner-bg);
  border: 1px solid var(--border-color);
  padding: 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scenario-card:hover {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.scenario-card.active {
  border-color: var(--primary);
  background: var(--primary-alpha-hover);
  box-shadow: 0 0 10px var(--primary-glow);
}

.scenario-card h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.scenario-card p {
  font-size: 0.75rem;
  color: var(--text-muted);
}

#inspector-content {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

#composer-panel {
  display: flex;
  flex-direction: column;
}

#composer-canvas {
  flex: 1;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--canvas-bg);
  min-height: 90px;
}

.empty-hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.btn-primary {
  background: var(--btn-start-bg);
  color: var(--btn-start-text);
  border: none;
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

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

.btn-danger {
  background: var(--btn-stop-bg);
  color: var(--btn-stop-text);
  border: none;
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

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

#worker-grid {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.worker-card {
  background: var(--card-inner-bg);
  border: 1px solid var(--border-color);
  padding: 0.85rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.worker-card.active {
  border-color: var(--worker-active-border);
  box-shadow: 0 0 10px var(--primary-glow);
}

.worker-card h4 {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.worker-card .status {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.worker-card.active .status {
  color: var(--worker-active-text);
}

.loading {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  font-size: 0.9rem;
}

pre {
  font-family: var(--font-mono);
}

.btn-pager {
  background: var(--primary-alpha);
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-pager:hover {
  background: var(--primary);
  color: var(--bg-main);
}

.btn-close {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-close:hover {
  background: var(--error-border);
  color: var(--btn-stop-text);
}

#console-terminal {
  box-shadow: var(--terminal-shadow);
}
.console-line {
  margin-bottom: 4px;
  white-space: pre-wrap;
  word-break: break-all;
}
.console-line .timestamp {
  color: var(--console-timestamp);
  margin-right: 8px;
}
.console-line .node {
  color: var(--console-node);
  margin-right: 8px;
  font-weight: 600;
}
.console-line.DEBUG { color: var(--terminal-text-debug); }
.console-line.INFO { color: var(--terminal-text-info); }
.console-line.WARN { color: var(--console-warn); }
.console-line.ERROR { color: var(--console-error); }
.console-line.system-msg { color: var(--console-system); }
.console-line .fields {
  color: var(--console-fields);
  font-size: 0.75rem;
  margin-left: 8px;
}

/* --- Help Portal Scope Styles --- */
#view-help {
  height: 100%;
  width: 100%;
}

.help-portal-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.help-sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

.search-container {
  position: relative;
  flex: 1;
  max-width: 400px;
}

#search-input {
  width: 100%;
  padding: 0.55rem 1rem 0.55rem 2.25rem;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px 16px;
}

#search-input:focus {
  border-color: var(--primary);
  background-color: var(--input-bg);
  box-shadow: 0 0 0 3px var(--primary-alpha);
  background-image: var(--search-focus-svg);
}

#search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.help-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  width: 100%;
}

.help-sidebar {
  width: 250px;
  border-right: 1px solid var(--border-color);
  padding-right: 1.25rem;
  overflow-y: auto;
  height: 100%;
  background: var(--sidebar-bg);
}

.help-sidebar-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  font-weight: 700;
  margin-top: 1.5rem;
}
.help-sidebar-title:first-child {
  margin-top: 0;
}

.help-sidebar-menu {
  list-style: none;
  margin-bottom: 1.5rem;
}

.help-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  margin-bottom: 0.25rem;
  border-left: 2px solid transparent;
}

.help-sidebar-link:hover {
  color: var(--text-main);
  background-color: var(--bg-card);
  border-left-color: var(--primary);
}

.help-sidebar-link.active {
  color: var(--primary);
  background-color: var(--bg-card);
  border-left-color: var(--primary);
  font-weight: 500;
}

.help-sidebar-link .match-count {
  background-color: var(--primary);
  color: var(--bg-main);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
  margin-left: auto;
  line-height: 1.2;
}

.help-content {
  flex: 1;
  padding-left: 2rem;
  padding-right: 1rem;
  overflow-y: auto;
  height: 100%;
  scroll-behavior: smooth;
}

.help-content .doc-section {
  margin-bottom: 3.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 2.5rem;
}

.help-content .doc-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.help-content h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 1.25rem;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-content h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: var(--primary);
  border-radius: 2px;
}

.help-content h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 1.75rem 0 0.75rem 0;
  text-transform: none;
  border-bottom: none;
  padding-bottom: 0;
  letter-spacing: normal;
}

.help-content p {
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.help-content ul, .help-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  color: var(--text-muted);
}

.help-content li {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.help-content code {
  font-family: var(--font-mono);
  background-color: var(--code-bg);
  color: var(--primary);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.help-content pre {
  background-color: var(--code-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.85rem;
  overflow-x: auto;
  margin-bottom: 1.25rem;
}

.help-content pre code {
  background-color: transparent;
  color: var(--text-main);
  padding: 0;
  font-size: 0.8rem;
}

.help-content .alert {
  background-color: var(--alert-bg);
  border-left: 4px solid var(--primary);
  padding: 0.85rem;
  border-radius: 0 6px 6px 0;
  margin-bottom: 1.25rem;
}

.help-content .alert-title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-main);
}

.help-content .alert-warning {
  border-left-color: var(--alert-warning-border);
}

.help-content .alert-success {
  border-left-color: var(--alert-success-border);
}

.help-content .alert p {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.help-content .table-container {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 1.25rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.help-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  text-align: left;
}

.help-content th, .help-content td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.help-content th {
  background-color: var(--th-bg);
  color: var(--text-main);
  font-weight: 600;
}

.help-content tr:last-child td {
  border-bottom: none;
}

.help-content tr:nth-child(even) {
  background-color: var(--tr-even-bg);
}

.help-content mark,
.search-highlight {
  background-color: var(--primary-glow) !important;
  color: var(--text-main) !important;
  border-bottom: 2px solid var(--primary) !important;
  border-radius: 2px !important;
  padding: 0 2px !important;
  font-weight: 600 !important;
}

/* Print layout scoped overrides */
@media print {
  body *, header, aside, .help-sub-header, .help-sidebar {
    display: none !important;
  }
  .tab-view, #view-help, .help-portal-container, .help-layout, .help-content, .help-content * {
    display: block !important;
    background: white !important;
    color: black !important;
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
  }
  .help-content .doc-section {
    page-break-inside: avoid;
    border-bottom: 1px dashed #ccc !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1.5rem !important;
  }
  .help-content h2, .help-content h3 {
    page-break-after: avoid;
  }
  .help-content pre, .help-content code {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
  }
  .help-content .alert {
    background-color: #f8fafc !important;
    border-left: 4px solid #64748b !important;
  }
}

/* Pre-Run Modal styling */
.modal {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-backdrop);
    backdrop-filter: blur(4px);
    overflow-y: auto;
    padding: 2rem 1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--bg-card);
    padding: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 100%;
    max-width: 440px;
    box-shadow: var(--card-shadow);
    box-sizing: border-box;
    position: relative;
}

.modal-content input[type="range"] {
    accent-color: var(--primary);
    cursor: pointer;
    width: 100%;
}

.theme-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--primary) !important;
}


/* RESPONSIVE LAYOUT (Liquid Fold) */
@media (max-width: 900px) {
    main {
        height: auto !important;
        overflow: visible !important;
    }
    
    #view-live {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        height: auto !important;
        overflow-y: auto !important;
        gap: 1.5rem;
    }
    
    #view-live > div, #grid-panel {
        height: auto !important;
        overflow: visible !important;
    }
    
    section {
        height: auto !important;
        max-height: 450px !important;
    }
    
    #inspector-panel, #console-terminal {
        height: 200px !important;
    }
    
    header {
        flex-direction: column;
        gap: 0.75rem;
        height: auto;
        padding: 1rem;
    }
    
    header > div {
        flex-direction: column;
        width: 100%;
        align-items: center;
        gap: 0.5rem;
    }
    
    #tab-navigation {
        margin-left: 0 !important;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* License bar styling */
.license-bar {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    gap: 15px;
    background: var(--card-inner-bg);
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

/* Console terminal theme rules */
#console-terminal {
    background: var(--terminal-bg) !important;
    color: var(--terminal-text-info) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--terminal-shadow) !important;
}

.console-line.DEBUG { color: var(--terminal-text-debug) !important; }
.console-line.INFO { color: var(--terminal-text-info) !important; }
.console-line.WARN { color: var(--console-warn) !important; }
.console-line.ERROR { color: var(--console-error) !important; }
.console-line.system-msg { color: var(--console-system) !important; }

/* --- Theme Selection Variables --- */

/* Base Light variables inherited by L1-L10 */
body.theme-light-base {
  --bg-dark: #faf8f5;
  --card-bg: #ffffff;
  --border-color: rgba(0, 0, 0, 0.06);
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 4px 12px -2px rgba(0, 0, 0, 0.02);
  
  --bg-main: var(--bg-dark);
  --bg-card: var(--card-bg);
  --text-main: var(--text-primary);
  
  --header-bg: rgba(255, 255, 255, 0.85);
  --card-inner-bg: rgba(0, 0, 0, 0.02);
  --canvas-bg: rgba(0, 0, 0, 0.01);
  --terminal-bg: #f8fafc;
  --terminal-text-info: #1e293b;
  --terminal-text-debug: #64748b;
  
  --card-top-glow: rgba(0, 0, 0, 0.02);
  --input-bg: #ffffff;
  --input-border: rgba(0, 0, 0, 0.1);
  --sidebar-bg: rgba(0, 0, 0, 0.01);
  --alert-bg: rgba(0, 0, 0, 0.03);
  --th-bg: rgba(0, 0, 0, 0.04);
  --tr-even-bg: rgba(0, 0, 0, 0.015);
  --console-timestamp: #64748b;
  --console-node: var(--primary);

  /* Semantic Dynamic Colors */
  --success-bg: rgba(21, 128, 61, 0.1);
  --danger-bg: rgba(185, 28, 28, 0.1);
  --chart-grid: #cbd5e1;
  --chart-bg: rgba(255, 255, 255, 0.8);
  --btn-run-text: #ffffff;
  --chart-cp: #dc2626;
  --chart-cp-alpha: rgba(220, 38, 38, 0.1);
  --chart-up: #0284c7;
  --chart-up-alpha: rgba(2, 132, 199, 0.1);
  --terminal-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
  --status-online: #16a34a;
  --status-online-bg: rgba(22, 163, 74, 0.1);
  --status-online-border: rgba(22, 163, 74, 0.2);
  --status-offline: #dc2626;
  --status-offline-bg: rgba(220, 38, 38, 0.1);
  --status-offline-border: rgba(220, 38, 38, 0.2);
  --worker-active-border: #16a34a;
  --worker-active-text: #16a34a;
  --btn-start-bg: #2563eb;
  --btn-start-hover-bg: #1d4ed8;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #dc2626;
  --btn-stop-hover-bg: #b91c1c;
  --btn-stop-text: #ffffff;
  --btn-capture-start-bg: #16a34a;
  --btn-capture-start-hover-bg: #15803d;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #e11d48;
  --btn-capture-stop-hover-bg: #be123c;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #dc2626;
  --error-text: #dc2626;
  --error-bg: rgba(220, 38, 38, 0.05);
  --error-border: #dc2626;
  --alert-success-border: #16a34a;
  --alert-warning-border: #ea580c;
}

/* 10 Dark Themes Overrides (D1 Midnights is defined in :root) */

body.theme-midnights {
  --bg-dark: #070b19;
  --card-bg: #0e1424;
  --card-inner-bg: #16203a;
  --input-bg: #050812;
  --sidebar-bg: #090e1c;
  --border-color: rgba(92, 157, 242, 0.15);
  --header-bg: rgba(7, 11, 25, 0.85);
  --terminal-bg: #03050c;
  --modal-backdrop: rgba(7, 11, 25, 0.85);
  --primary: #5c9df2;
  --primary-hover: #3d80db;
  --primary-alpha: rgba(92, 157, 242, 0.08);
  --primary-alpha-hover: rgba(92, 157, 242, 0.15);
  --primary-glow: rgba(92, 157, 242, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235c9df2' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(92, 157, 242, 0.12);
  --console-fields: #8cb8f7;
  --console-system: #5c9df2;
  --success: #12b27a;
  --success-bg: rgba(18, 178, 122, 0.15);
  --danger: #eb3f59;
  --danger-bg: rgba(235, 63, 89, 0.15);
  --warning: #f2a93c;
  --console-warn: #f2a93c;
  --console-node: #8cb8f7;
  --btn-start-bg: #5c9df2;
  --btn-start-hover-bg: #3d80db;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #eb3f59;
  --btn-stop-hover-bg: #c92c43;
  --btn-stop-text: #ffffff;
  --status-online: #12b27a;
  --status-online-bg: rgba(18, 178, 122, 0.15);
  --status-online-border: rgba(18, 178, 122, 0.3);
  --status-offline: #eb3f59;
  --status-offline-bg: rgba(235, 63, 89, 0.15);
  --status-offline-border: rgba(235, 63, 89, 0.3);
  --worker-active-border: #12b27a;
  --worker-active-text: #12b27a;
  --btn-capture-start-bg: #12b27a;
  --btn-capture-start-hover-bg: #0e8c60;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #eb3f59;
  --btn-capture-stop-hover-bg: #c92c43;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #eb3f59;
  --error-text: #eb3f59;
  --error-bg: rgba(235, 63, 89, 0.15);
  --error-border: #eb3f59;
  --alert-success-border: #12b27a;
  --alert-warning-border: #f2a93c;
}

body.theme-ultramarine {
  --bg-dark: #04081b;
  --card-bg: #0d1330;
  --card-inner-bg: #151e44;
  --input-bg: #020514;
  --sidebar-bg: #080c21;
  --border-color: rgba(44, 182, 245, 0.2);
  --header-bg: rgba(4, 8, 27, 0.85);
  --terminal-bg: #01030f;
  --modal-backdrop: rgba(4, 8, 27, 0.85);
  --primary: #2cb6f5;
  --primary-hover: #129fdc;
  --primary-alpha: rgba(44, 182, 245, 0.08);
  --primary-alpha-hover: rgba(44, 182, 245, 0.15);
  --primary-glow: rgba(44, 182, 245, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232cb6f5' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(44, 182, 245, 0.12);
  --console-fields: #78d2fb;
  --console-system: #2cb6f5;
  --success: #05abc2;
  --success-bg: rgba(5, 171, 194, 0.15);
  --danger: #e03158;
  --danger-bg: rgba(224, 49, 88, 0.15);
  --warning: #eca31d;
  --console-warn: #eca31d;
  --console-node: #5055db;
  --btn-start-bg: #129fdc;
  --btn-start-hover-bg: #0f85b8;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #e03158;
  --btn-stop-hover-bg: #bb2345;
  --btn-stop-text: #ffffff;
  --status-online: #05abc2;
  --status-online-bg: rgba(5, 171, 194, 0.15);
  --status-online-border: rgba(5, 171, 194, 0.3);
  --status-offline: #e03158;
  --status-offline-bg: rgba(224, 49, 88, 0.15);
  --status-offline-border: rgba(224, 49, 88, 0.3);
  --worker-active-border: #05abc2;
  --worker-active-text: #05abc2;
  --btn-capture-start-bg: #05abc2;
  --btn-capture-start-hover-bg: #038b9e;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #e03158;
  --btn-capture-stop-hover-bg: #bb2345;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #e03158;
  --error-text: #e03158;
  --error-bg: rgba(224, 49, 88, 0.15);
  --error-border: #e03158;
  --alert-success-border: #05abc2;
  --alert-warning-border: #eca31d;
}

body.theme-cyberpunk {
  --bg-dark: #110118;
  --card-bg: #240131;
  --card-inner-bg: #3b024e;
  --input-bg: #0c0515;
  --sidebar-bg: #180624;
  --border-color: rgba(245, 2, 123, 0.3);
  --header-bg: rgba(17, 1, 24, 0.85);
  --terminal-bg: #040108;
  --modal-backdrop: rgba(17, 1, 24, 0.85);
  --primary: #f5027b;
  --primary-hover: #dc026e;
  --primary-alpha: rgba(245, 2, 123, 0.08);
  --primary-alpha-hover: rgba(245, 2, 123, 0.15);
  --primary-glow: rgba(245, 2, 123, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f5027b' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(245, 2, 123, 0.12);
  --console-fields: #02f2fc;
  --console-system: #f5027b;
  --success: #02f2fc;
  --success-bg: rgba(2, 242, 252, 0.15);
  --danger: #fa3030;
  --danger-bg: rgba(250, 48, 48, 0.15);
  --warning: #f7e202;
  --console-warn: #f7e202;
  --console-node: #f7e202;
  --btn-start-bg: #f5027b;
  --btn-start-hover-bg: #dc026e;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #b802d5;
  --btn-stop-hover-bg: #9e02b7;
  --btn-stop-text: #ffffff;
  --status-online: #02f2fc;
  --status-online-bg: rgba(2, 242, 252, 0.15);
  --status-online-border: rgba(2, 242, 252, 0.3);
  --status-offline: #f5027b;
  --status-offline-bg: rgba(245, 2, 123, 0.15);
  --status-offline-border: rgba(245, 2, 123, 0.3);
  --worker-active-border: #02f2fc;
  --worker-active-text: #02f2fc;
  --btn-capture-start-bg: #02f2fc;
  --btn-capture-start-hover-bg: #02d0d8;
  --btn-capture-start-text: #040108;
  --btn-capture-stop-bg: #f5027b;
  --btn-capture-stop-hover-bg: #dc026e;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #f5027b;
  --error-text: #f5027b;
  --error-bg: rgba(245, 2, 123, 0.15);
  --error-border: #f5027b;
  --alert-success-border: #02f2fc;
  --alert-warning-border: #f7e202;
}

body.theme-matrix {
  --bg-dark: #010f0a;
  --card-bg: #05241b;
  --card-inner-bg: #0a3327;
  --input-bg: #010d08;
  --sidebar-bg: #031a14;
  --border-color: rgba(10, 190, 130, 0.3);
  --header-bg: rgba(2, 20, 15, 0.85);
  --terminal-bg: #010f0b;
  --modal-backdrop: rgba(2, 20, 15, 0.85);
  --primary: #0abe82;
  --primary-hover: #089c6b;
  --primary-alpha: rgba(10, 190, 130, 0.08);
  --primary-alpha-hover: rgba(10, 190, 130, 0.15);
  --primary-glow: rgba(10, 190, 130, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230abe82' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(10, 190, 130, 0.12);
  --console-fields: #9bf2d0;
  --console-system: #0abe82;
  --success: #28e5a3;
  --success-bg: rgba(40, 229, 163, 0.15);
  --danger: #ea3c3c;
  --danger-bg: rgba(234, 60, 60, 0.15);
  --warning: #e2a518;
  --console-warn: #e2a518;
  --console-node: #28e5a3;
  --btn-start-bg: #0abe82;
  --btn-start-hover-bg: #089c6b;
  --btn-start-text: #010f0a;
  --btn-stop-bg: #036b4b;
  --btn-stop-hover-bg: #02543b;
  --btn-stop-text: #ffffff;
  --status-online: #28e5a3;
  --status-online-bg: rgba(40, 229, 163, 0.15);
  --status-online-border: rgba(40, 229, 163, 0.3);
  --status-offline: #089c6b;
  --status-offline-bg: rgba(8, 156, 107, 0.15);
  --status-offline-border: rgba(8, 156, 107, 0.3);
  --worker-active-border: #28e5a3;
  --worker-active-text: #28e5a3;
  --btn-capture-start-bg: #28e5a3;
  --btn-capture-start-hover-bg: #089c6b;
  --btn-capture-start-text: #010f0a;
  --btn-capture-stop-bg: #036b4b;
  --btn-capture-stop-hover-bg: #02543b;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #089c6b;
  --error-text: #ea3c3c;
  --error-bg: rgba(234, 60, 60, 0.15);
  --error-border: #ea3c3c;
  --alert-success-border: #28e5a3;
  --alert-warning-border: #e2a518;
}

body.theme-solar {
  --bg-dark: #1f0b00;
  --card-bg: #331401;
  --card-inner-bg: #4e2003;
  --input-bg: #150700;
  --sidebar-bg: #280e00;
  --border-color: rgba(247, 120, 20, 0.3);
  --header-bg: rgba(31, 11, 0, 0.85);
  --terminal-bg: #0a0300;
  --modal-backdrop: rgba(31, 11, 0, 0.85);
  --primary: #f77814;
  --primary-hover: #e06509;
  --primary-alpha: rgba(247, 120, 20, 0.08);
  --primary-alpha-hover: rgba(247, 120, 20, 0.15);
  --primary-glow: rgba(247, 120, 20, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f77814' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(247, 120, 20, 0.12);
  --console-fields: #ffecd2;
  --console-system: #f77814;
  --success: #12c388;
  --success-bg: rgba(18, 195, 136, 0.15);
  --danger: #eb4848;
  --danger-bg: rgba(235, 72, 72, 0.15);
  --warning: #e2a118;
  --console-warn: #e2a118;
  --console-node: #e2a118;
  --btn-start-bg: #e06509;
  --btn-start-hover-bg: #b85106;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #993608;
  --btn-stop-hover-bg: #7c2a05;
  --btn-stop-text: #ffffff;
  --status-online: #fdae61;
  --status-online-bg: rgba(253, 174, 97, 0.15);
  --status-online-border: rgba(253, 174, 97, 0.3);
  --status-offline: #eb4848;
  --status-offline-bg: rgba(235, 72, 72, 0.15);
  --status-offline-border: rgba(235, 72, 72, 0.3);
  --worker-active-border: #fdae61;
  --worker-active-text: #fdae61;
  --btn-capture-start-bg: #fdae61;
  --btn-capture-start-hover-bg: #f77814;
  --btn-capture-start-text: #1f0b00;
  --btn-capture-stop-bg: #eb4848;
  --btn-capture-stop-hover-bg: #d13b3b;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #e06509;
  --error-text: #eb4848;
  --error-bg: rgba(235, 72, 72, 0.15);
  --error-border: #eb4848;
  --alert-success-border: #fdae61;
  --alert-warning-border: #fa913a;
}

body.theme-amethyst {
  --bg-dark: #150722;
  --card-bg: #260d3d;
  --card-inner-bg: #3a145c;
  --input-bg: #0e0319;
  --sidebar-bg: #1c092d;
  --border-color: rgba(196, 128, 250, 0.3);
  --header-bg: rgba(21, 7, 34, 0.85);
  --terminal-bg: #07010d;
  --modal-backdrop: rgba(21, 7, 34, 0.85);
  --primary: #c480fa;
  --primary-hover: #ab61e8;
  --primary-alpha: rgba(196, 128, 250, 0.08);
  --primary-alpha-hover: rgba(196, 128, 250, 0.15);
  --primary-glow: rgba(196, 128, 250, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23c480fa' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(196, 128, 250, 0.12);
  --console-fields: #ecd3ff;
  --console-system: #c480fa;
  --success: #28d9c2;
  --success-bg: rgba(40, 217, 194, 0.15);
  --danger: #fa3b59;
  --danger-bg: rgba(250, 59, 89, 0.15);
  --warning: #f3a812;
  --console-warn: #f3a812;
  --console-node: #7d8aff;
  --btn-start-bg: #ab61e8;
  --btn-start-hover-bg: #914ad1;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #681ebf;
  --btn-stop-hover-bg: #53149c;
  --btn-stop-text: #ffffff;
  --status-online: #ecd3ff;
  --status-online-bg: rgba(236, 211, 255, 0.15);
  --status-online-border: rgba(236, 211, 255, 0.3);
  --status-offline: #fa3b59;
  --status-offline-bg: rgba(250, 59, 89, 0.15);
  --status-offline-border: rgba(250, 59, 89, 0.3);
  --worker-active-border: #ecd3ff;
  --worker-active-text: #ecd3ff;
  --btn-capture-start-bg: #ecd3ff;
  --btn-capture-start-hover-bg: #c480fa;
  --btn-capture-start-text: #150722;
  --btn-capture-stop-bg: #fa3b59;
  --btn-capture-stop-hover-bg: #e22d48;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #ab61e8;
  --error-text: #fa3b59;
  --error-bg: rgba(250, 59, 89, 0.15);
  --error-border: #fa3b59;
  --alert-success-border: #ecd3ff;
  --alert-warning-border: #eca1fe;
}

body.theme-nordic {
  --bg-dark: #0c1322;
  --card-bg: #1a2333;
  --card-inner-bg: #2b374d;
  --input-bg: #080d17;
  --sidebar-bg: #101726;
  --border-color: rgba(132, 149, 173, 0.3);
  --header-bg: rgba(12, 19, 34, 0.85);
  --terminal-bg: #05080f;
  --modal-backdrop: rgba(12, 19, 34, 0.85);
  --primary: #8495ad;
  --primary-hover: #5e708a;
  --primary-alpha: rgba(132, 149, 173, 0.08);
  --primary-alpha-hover: rgba(132, 149, 173, 0.15);
  --primary-glow: rgba(132, 149, 173, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238495ad' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(132, 149, 173, 0.12);
  --console-fields: #cbd0d9;
  --console-system: #8495ad;
  --success: #0ebca5;
  --success-bg: rgba(14, 188, 165, 0.15);
  --danger: #eb3c56;
  --danger-bg: rgba(235, 60, 86, 0.15);
  --warning: #eca412;
  --console-warn: #eca412;
  --console-node: #cbd0d9;
  --btn-start-bg: #5e708a;
  --btn-start-hover-bg: #44546b;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #2b374d;
  --btn-stop-hover-bg: #1a2333;
  --btn-stop-text: #ffffff;
  --status-online: #cbd0d9;
  --status-online-bg: rgba(203, 208, 217, 0.15);
  --status-online-border: rgba(203, 208, 217, 0.3);
  --status-offline: #eb3c56;
  --status-offline-bg: rgba(235, 60, 86, 0.15);
  --status-offline-border: rgba(235, 60, 86, 0.3);
  --worker-active-border: #cbd0d9;
  --worker-active-text: #cbd0d9;
  --btn-capture-start-bg: #cbd0d9;
  --btn-capture-start-hover-bg: #8495ad;
  --btn-capture-start-text: #0c1322;
  --btn-capture-stop-bg: #eb3c56;
  --btn-capture-stop-hover-bg: #d12942;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #5e708a;
  --error-text: #eb3c56;
  --error-bg: rgba(235, 60, 86, 0.15);
  --error-border: #eb3c56;
  --alert-success-border: #cbd0d9;
  --alert-warning-border: #8495ad;
}

body.theme-blood-orange {
  --bg-dark: #1f040d;
  --card-bg: #380a1b;
  --card-inner-bg: #540f2b;
  --input-bg: #120207;
  --sidebar-bg: #2d0617;
  --border-color: rgba(247, 59, 90, 0.3);
  --header-bg: rgba(31, 4, 13, 0.85);
  --terminal-bg: #0a0104;
  --modal-backdrop: rgba(31, 4, 13, 0.85);
  --primary: #f73b5a;
  --primary-hover: #e22342;
  --primary-alpha: rgba(247, 59, 90, 0.08);
  --primary-alpha-hover: rgba(247, 59, 90, 0.15);
  --primary-glow: rgba(247, 59, 90, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f73b5a' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(247, 59, 90, 0.12);
  --console-fields: #ffd8de;
  --console-system: #f73b5a;
  --success: #0ebd8b;
  --success-bg: rgba(14, 189, 139, 0.15);
  --danger: #e22342;
  --danger-bg: rgba(226, 35, 66, 0.15);
  --warning: #fca51f;
  --console-warn: #fca51f;
  --console-node: #fda3b2;
  --btn-start-bg: #e22342;
  --btn-start-hover-bg: #be1a35;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #991530;
  --btn-stop-hover-bg: #7c0f24;
  --btn-stop-text: #ffffff;
  --status-online: #fda3b2;
  --status-online-bg: rgba(253, 163, 178, 0.15);
  --status-online-border: rgba(253, 163, 178, 0.3);
  --status-offline: #be1a35;
  --status-offline-bg: rgba(190, 26, 53, 0.15);
  --status-offline-border: rgba(190, 26, 53, 0.3);
  --worker-active-border: #fda3b2;
  --worker-active-text: #fda3b2;
  --btn-capture-start-bg: #fda3b2;
  --btn-capture-start-hover-bg: #f73b5a;
  --btn-capture-start-text: #1f040d;
  --btn-capture-stop-bg: #be1a35;
  --btn-capture-stop-hover-bg: #991530;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #e22342;
  --error-text: #e22342;
  --error-bg: rgba(226, 35, 66, 0.15);
  --error-border: #e22342;
  --alert-success-border: #fda3b2;
  --alert-warning-border: #f73b5a;
}

body.theme-gold-rush {
  --bg-dark: #161206;
  --card-bg: #2e240b;
  --card-inner-bg: #44350f;
  --input-bg: #0c0a03;
  --sidebar-bg: #211a08;
  --border-color: rgba(224, 122, 5, 0.3);
  --header-bg: rgba(22, 18, 6, 0.85);
  --terminal-bg: #070501;
  --modal-backdrop: rgba(22, 18, 6, 0.85);
  --primary: #e07a05;
  --primary-hover: #bc6503;
  --primary-alpha: rgba(224, 122, 5, 0.08);
  --primary-alpha-hover: rgba(224, 122, 5, 0.15);
  --primary-glow: rgba(224, 122, 5, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23e07a05' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(224, 122, 5, 0.12);
  --console-fields: #fff2cf;
  --console-system: #e07a05;
  --success: #0ebfa0;
  --success-bg: rgba(14, 191, 160, 0.15);
  --danger: #e53b3b;
  --danger-bg: rgba(229, 59, 59, 0.15);
  --warning: #fca512;
  --console-warn: #fca512;
  --console-node: #fcd45c;
  --btn-start-bg: #bc6503;
  --btn-start-hover-bg: #7e4301;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #4c1c02;
  --btn-stop-hover-bg: #3e1601;
  --btn-stop-text: #ffffff;
  --status-online: #fcd45c;
  --status-online-bg: rgba(252, 212, 92, 0.15);
  --status-online-border: rgba(252, 212, 92, 0.3);
  --status-offline: #bc6503;
  --status-offline-bg: rgba(188, 101, 3, 0.15);
  --status-offline-border: rgba(188, 101, 3, 0.3);
  --worker-active-border: #fcd45c;
  --worker-active-text: #fcd45c;
  --btn-capture-start-bg: #fcd45c;
  --btn-capture-start-hover-bg: #e07a05;
  --btn-capture-start-text: #161206;
  --btn-capture-stop-bg: #bc6503;
  --btn-capture-stop-hover-bg: #7e4301;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #bc6503;
  --error-text: #bc6503;
  --error-bg: rgba(188, 101, 3, 0.15);
  --error-border: #bc6503;
  --alert-success-border: #fcd45c;
  --alert-warning-border: #e07a05;
}

body.theme-vampire {
  --bg-dark: #180101;
  --card-bg: #2e0202;
  --card-inner-bg: #470303;
  --input-bg: #0f0000;
  --sidebar-bg: #230101;
  --border-color: rgba(214, 30, 30, 0.3);
  --header-bg: rgba(24, 1, 1, 0.85);
  --terminal-bg: #080000;
  --modal-backdrop: rgba(24, 1, 1, 0.85);
  --primary: #d61e1e;
  --primary-hover: #b51515;
  --primary-alpha: rgba(214, 30, 30, 0.08);
  --primary-alpha-hover: rgba(214, 30, 30, 0.15);
  --primary-glow: rgba(214, 30, 30, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d61e1e' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(214, 30, 30, 0.12);
  --console-fields: #ffc3c3;
  --console-system: #d61e1e;
  --success: #2bd18c;
  --success-bg: rgba(43, 209, 140, 0.15);
  --danger: #b51515;
  --danger-bg: rgba(181, 21, 21, 0.15);
  --warning: #f39f15;
  --console-warn: #f39f15;
  --console-node: #fa9191;
  --btn-start-bg: #d61e1e;
  --btn-start-hover-bg: #b51515;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #781919;
  --btn-stop-hover-bg: #420707;
  --btn-stop-text: #ffffff;
  --status-online: #fa9191;
  --status-online-bg: rgba(250, 145, 145, 0.15);
  --status-online-border: rgba(250, 145, 145, 0.3);
  --status-offline: #b51515;
  --status-offline-bg: rgba(181, 21, 21, 0.15);
  --status-offline-border: rgba(181, 21, 21, 0.3);
  --worker-active-border: #fa9191;
  --worker-active-text: #fa9191;
  --btn-capture-start-bg: #d61e1e;
  --btn-capture-start-hover-bg: #b51515;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #781919;
  --btn-capture-stop-hover-bg: #420707;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #d61e1e;
  --error-text: #d61e1e;
  --error-bg: rgba(214, 30, 30, 0.15);
  --error-border: #d61e1e;
  --alert-success-border: #fa9191;
  --alert-warning-border: #f39f15;
}

body.theme-mint-forest {
  --bg-dark: #031611;
  --card-bg: #092c23;
  --card-inner-bg: #104437;
  --input-bg: #010e0b;
  --sidebar-bg: #06211a;
  --border-color: rgba(40, 209, 187, 0.3);
  --header-bg: rgba(3, 22, 17, 0.85);
  --terminal-bg: #010a08;
  --modal-backdrop: rgba(3, 22, 17, 0.85);
  --primary: #28d1bb;
  --primary-hover: #12b5a1;
  --primary-alpha: rgba(40, 209, 187, 0.08);
  --primary-alpha-hover: rgba(40, 209, 187, 0.15);
  --primary-glow: rgba(40, 209, 187, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2328d1bb' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(40, 209, 187, 0.12);
  --console-fields: #c7faf0;
  --console-system: #28d1bb;
  --success: #31d195;
  --success-bg: rgba(49, 209, 149, 0.15);
  --danger: #fa6b7f;
  --danger-bg: rgba(250, 107, 127, 0.15);
  --warning: #f39c09;
  --console-warn: #f39c09;
  --console-node: #12b5a1;
  --btn-start-bg: #12b5a1;
  --btn-start-hover-bg: #0b9483;
  --btn-start-text: #031611;
  --btn-stop-bg: #0d7367;
  --btn-stop-hover-bg: #0e5b51;
  --btn-stop-text: #ffffff;
  --status-online: #94f2df;
  --status-online-bg: rgba(148, 242, 223, 0.15);
  --status-online-border: rgba(148, 242, 223, 0.3);
  --status-offline: #fca2af;
  --status-offline-bg: rgba(252, 162, 175, 0.15);
  --status-offline-border: rgba(252, 162, 175, 0.3);
  --worker-active-border: #94f2df;
  --worker-active-text: #94f2df;
  --btn-capture-start-bg: #94f2df;
  --btn-capture-start-hover-bg: #28d1bb;
  --btn-capture-start-text: #031611;
  --btn-capture-stop-bg: #fca2af;
  --btn-capture-stop-hover-bg: #f23c57;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #12b5a1;
  --error-text: #fca2af;
  --error-bg: rgba(252, 162, 175, 0.15);
  --error-border: #fca2af;
  --alert-success-border: #94f2df;
  --alert-warning-border: #28d1bb;
}

body.theme-obsidian-abyss {
  --bg-dark: #000000;
  --card-bg: #111111;
  --card-inner-bg: #1c1c1c;
  --input-bg: #000000;
  --sidebar-bg: #070707;
  --border-color: #242424;
  --header-bg: rgba(0, 0, 0, 0.85);
  --terminal-bg: #000000;
  --modal-backdrop: rgba(0, 0, 0, 0.85);
  --primary: #cad4df;
  --primary-hover: #92a2b7;
  --primary-alpha: rgba(202, 212, 223, 0.08);
  --primary-alpha-hover: rgba(202, 212, 223, 0.15);
  --primary-glow: rgba(202, 212, 223, 0.25);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cad4df' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --card-top-glow: rgba(202, 212, 223, 0.12);
  --console-fields: #e1e7ee;
  --console-system: #cad4df;
  --success: #0ebc82;
  --success-bg: rgba(14, 188, 130, 0.15);
  --danger: #ed4242;
  --danger-bg: rgba(237, 66, 66, 0.15);
  --warning: #f39c0b;
  --console-warn: #f39c0b;
  --console-node: #92a2b7;
  --btn-start-bg: #cad4df;
  --btn-start-hover-bg: #92a2b7;
  --btn-start-text: #000000;
  --btn-stop-bg: #445266;
  --btn-stop-hover-bg: #313b4a;
  --btn-stop-text: #ffffff;
  --status-online: #e1e7ee;
  --status-online-bg: rgba(225, 231, 238, 0.15);
  --status-online-border: rgba(225, 231, 238, 0.3);
  --status-offline: #445266;
  --status-offline-bg: rgba(68, 82, 102, 0.15);
  --status-offline-border: rgba(68, 82, 102, 0.3);
  --worker-active-border: #e1e7ee;
  --worker-active-text: #e1e7ee;
  --btn-capture-start-bg: #cad4df;
  --btn-capture-start-hover-bg: #92a2b7;
  --btn-capture-start-text: #000000;
  --btn-capture-stop-bg: #445266;
  --btn-capture-stop-hover-bg: #313b4a;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #cad4df;
  --error-text: #e11f1f;
  --error-bg: rgba(225, 231, 238, 0.15);
  --error-border: #cad4df;
  --alert-success-border: #e1e7ee;
  --alert-warning-border: #92a2b7;
}

/* 10 Light Themes Overrides */

body.theme-frost-glacier {
  --bg-dark: #d9f2ff;
  --card-bg: #ecf7ff;
  --card-inner-bg: #b3e3fc;
  --input-bg: #ecf7ff;
  --sidebar-bg: rgba(0, 128, 196, 0.01);
  --border-color: rgba(0, 128, 196, 0.08);
  --primary: #0080c4;
  --primary-hover: #01659a;
  --primary-alpha: rgba(0, 128, 196, 0.08);
  --primary-alpha-hover: rgba(0, 128, 196, 0.15);
  --primary-glow: rgba(0, 128, 196, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230080c4' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(0, 128, 196, 0.2);
  --code-bg: #d9f2ff;
  --console-fields: #0080c4;
  --console-warn: #ca8400;
  --console-error: #b21212;
  --console-system: #087068;
  --success: #087068;
  --success-bg: rgba(8, 112, 104, 0.1);
  --danger: #b21212;
  --danger-bg: rgba(178, 18, 18, 0.1);
  --warning: #b25000;
  --btn-start-bg: #0080c4;
  --btn-start-hover-bg: #01659a;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #b21212;
  --btn-stop-hover-bg: #990c0c;
  --btn-stop-text: #ffffff;
  --status-online: #0080c4;
  --status-online-bg: rgba(0, 128, 196, 0.1);
  --status-online-border: rgba(0, 128, 196, 0.2);
  --status-offline: #b21212;
  --status-offline-bg: rgba(178, 18, 18, 0.1);
  --status-offline-border: rgba(178, 18, 18, 0.2);
  --worker-active-border: #0080c4;
  --worker-active-text: #0080c4;
  --btn-capture-start-bg: #0080c4;
  --btn-capture-start-hover-bg: #01659a;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #b21212;
  --btn-capture-stop-hover-bg: #990c0c;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #0080c4;
  --error-text: #b21212;
  --error-bg: rgba(178, 18, 18, 0.1);
  --error-border: #b21212;
  --alert-success-border: #0080c4;
  --alert-warning-border: #ca8400;
}

body.theme-desert-dune {
  --bg-dark: #f4eccf;
  --card-bg: #f9f6e6;
  --card-inner-bg: #e7dbbd;
  --input-bg: #f9f6e6;
  --sidebar-bg: rgba(186, 60, 10, 0.01);
  --border-color: rgba(186, 60, 10, 0.08);
  --primary: #ba3c0a;
  --primary-hover: #922c04;
  --primary-alpha: rgba(186, 60, 10, 0.08);
  --primary-alpha-hover: rgba(186, 60, 10, 0.15);
  --primary-glow: rgba(186, 60, 10, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ba3c0a' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(186, 60, 10, 0.2);
  --code-bg: #fff0dc;
  --console-fields: #ba3c0a;
  --console-warn: #a85002;
  --console-error: #ac1010;
  --console-system: #922c04;
  --success: #107533;
  --success-bg: rgba(16, 117, 51, 0.1);
  --danger: #ac1010;
  --danger-bg: rgba(172, 16, 16, 0.1);
  --warning: #a85002;
  --btn-start-bg: #ba3c0a;
  --btn-start-hover-bg: #922c04;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #762508;
  --btn-stop-hover-bg: #922c04;
  --btn-stop-text: #ffffff;
  --status-online: #ba3c0a;
  --status-online-bg: rgba(186, 60, 10, 0.1);
  --status-online-border: rgba(186, 60, 10, 0.2);
  --status-offline: #ac1010;
  --status-offline-bg: rgba(172, 16, 16, 0.1);
  --status-offline-border: rgba(172, 16, 16, 0.2);
  --worker-active-border: #ba3c0a;
  --worker-active-text: #ba3c0a;
  --btn-capture-start-bg: #ba3c0a;
  --btn-capture-start-hover-bg: #922c04;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #ac1010;
  --btn-capture-stop-hover-bg: #900b0b;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #ba3c0a;
  --error-text: #ac1010;
  --error-bg: rgba(172, 16, 16, 0.1);
  --error-border: #ac1010;
  --alert-success-border: #ba3c0a;
  --alert-warning-border: #a85002;
}

body.theme-mint-tea {
  --bg-dark: #dbedf0;
  --card-bg: #eef9fa;
  --card-inner-bg: #c6e3e5;
  --input-bg: #eef9fa;
  --sidebar-bg: rgba(10, 114, 102, 0.01);
  --border-color: rgba(10, 114, 102, 0.08);
  --primary: #0a7266;
  --primary-hover: #0b574f;
  --primary-alpha: rgba(10, 114, 102, 0.08);
  --primary-alpha-hover: rgba(10, 114, 102, 0.15);
  --primary-glow: rgba(10, 114, 102, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230a7266' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(10, 114, 102, 0.2);
  --code-bg: #c7faf2;
  --console-fields: #0a7266;
  --console-warn: #9e5a04;
  --console-error: #b51010;
  --console-system: #0b574f;
  --success: #126131;
  --success-bg: rgba(18, 97, 49, 0.1);
  --danger: #991035;
  --danger-bg: rgba(153, 16, 53, 0.15);
  --warning: #9e5a04;
  --btn-start-bg: #0a7266;
  --btn-start-hover-bg: #0b574f;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #991035;
  --btn-stop-hover-bg: #820f2d;
  --btn-stop-text: #ffffff;
  --status-online: #0a7266;
  --status-online-bg: rgba(10, 114, 102, 0.1);
  --status-online-border: rgba(10, 114, 102, 0.2);
  --status-offline: #991035;
  --status-offline-bg: rgba(153, 16, 53, 0.15);
  --status-offline-border: rgba(153, 16, 53, 0.3);
  --worker-active-border: #0a7266;
  --worker-active-text: #0a7266;
  --btn-capture-start-bg: #0a7266;
  --btn-capture-start-hover-bg: #0b574f;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #991035;
  --btn-capture-stop-hover-bg: #820f2d;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #0a7266;
  --error-text: #991035;
  --error-bg: rgba(153, 16, 53, 0.1);
  --error-border: #991035;
  --alert-success-border: #0a7266;
  --alert-warning-border: #9e5a04;
}

body.theme-rose-garden {
  --bg-dark: #ffdbe1;
  --card-bg: #fff0f3;
  --card-inner-bg: #fcaec1;
  --input-bg: #fff0f3;
  --sidebar-bg: rgba(186, 12, 85, 0.01);
  --border-color: rgba(186, 12, 85, 0.08);
  --primary: #ba0c55;
  --primary-hover: #980541;
  --primary-alpha: rgba(186, 12, 85, 0.08);
  --primary-alpha-hover: rgba(186, 12, 85, 0.15);
  --primary-glow: rgba(186, 12, 85, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ba0c55' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(186, 12, 85, 0.2);
  --code-bg: #ffdbe1;
  --console-fields: #ba0c55;
  --console-warn: #a84501;
  --console-error: #ac0b15;
  --console-system: #980541;
  --success: #0a6e60;
  --success-bg: rgba(10, 110, 96, 0.1);
  --danger: #980541;
  --danger-bg: rgba(152, 5, 65, 0.1);
  --warning: #a84501;
  --btn-start-bg: #ba0c55;
  --btn-start-hover-bg: #980541;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #980541;
  --btn-stop-hover-bg: #6d066f;
  --btn-stop-text: #ffffff;
  --status-online: #ba0c55;
  --status-online-bg: rgba(186, 12, 85, 0.1);
  --status-online-border: rgba(186, 12, 85, 0.2);
  --status-offline: #980541;
  --status-offline-bg: rgba(152, 5, 65, 0.1);
  --status-offline-border: rgba(152, 5, 65, 0.2);
  --worker-active-border: #ba0c55;
  --worker-active-text: #ba0c55;
  --btn-capture-start-bg: #ba0c55;
  --btn-capture-start-hover-bg: #980541;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #980541;
  --btn-capture-stop-hover-bg: #6d066f;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #ba0c55;
  --error-text: #980541;
  --error-bg: rgba(152, 5, 65, 0.1);
  --error-border: #980541;
  --alert-success-border: #ba0c55;
  --alert-warning-border: #a84501;
}

body.theme-royal-velvet {
  --bg-dark: #e0e6fc;
  --card-bg: #f0f3ff;
  --card-inner-bg: #ccd7fc;
  --input-bg: #f0f3ff;
  --sidebar-bg: rgba(20, 68, 206, 0.01);
  --border-color: rgba(20, 68, 206, 0.08);
  --primary: #1444ce;
  --primary-hover: #15329f;
  --primary-alpha: rgba(20, 68, 206, 0.08);
  --primary-alpha-hover: rgba(20, 68, 206, 0.15);
  --primary-glow: rgba(20, 68, 206, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231444ce' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(20, 68, 206, 0.2);
  --code-bg: #d0dcfe;
  --console-fields: #1444ce;
  --console-warn: #ac4b01;
  --console-error: #b20c0c;
  --console-system: #15329f;
  --success: #086b62;
  --success-bg: rgba(8, 107, 98, 0.1);
  --danger: #b20c0c;
  --danger-bg: rgba(178, 12, 12, 0.1);
  --warning: #ac4b01;
  --btn-start-bg: #1444ce;
  --btn-start-hover-bg: #15329f;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #b20c0c;
  --btn-stop-hover-bg: #940a0a;
  --btn-stop-text: #ffffff;
  --status-online: #1444ce;
  --status-online-bg: rgba(20, 68, 206, 0.1);
  --status-online-border: rgba(20, 68, 206, 0.2);
  --status-offline: #b20c0c;
  --status-offline-bg: rgba(178, 12, 12, 0.15);
  --status-offline-border: rgba(178, 12, 12, 0.3);
  --worker-active-border: #1444ce;
  --worker-active-text: #1444ce;
  --btn-capture-start-bg: #1444ce;
  --btn-capture-start-hover-bg: #15329f;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #b20c0c;
  --btn-capture-stop-hover-bg: #940a0a;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #1444ce;
  --error-text: #b20c0c;
  --error-bg: rgba(178, 12, 12, 0.1);
  --error-border: #b20c0c;
  --alert-success-border: #1444ce;
  --alert-warning-border: #ac4b01;
}

body.theme-matcha-latte {
  --bg-dark: #eff2ea;
  --card-bg: #fcfcf9;
  --card-inner-bg: #dee5d5;
  --input-bg: #fcfcf9;
  --sidebar-bg: rgba(61, 96, 16, 0.01);
  --border-color: rgba(61, 96, 16, 0.08);
  --primary: #3d6010;
  --primary-hover: #33500d;
  --primary-alpha: rgba(61, 96, 16, 0.08);
  --primary-alpha-hover: rgba(61, 96, 16, 0.15);
  --primary-glow: rgba(61, 96, 16, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233d6010' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(61, 96, 16, 0.25);
  --code-bg: #f0fcf3;
  --console-fields: #3d6010;
  --console-warn: #824b0c;
  --console-error: #9c1c1c;
  --console-system: #3d6010;
  --success: #105e2e;
  --success-bg: rgba(16, 94, 46, 0.1);
  --danger: #9c2828;
  --danger-bg: rgba(156, 40, 40, 0.1);
  --warning: #824b0c;
  --btn-start-bg: #3d6010;
  --btn-start-hover-bg: #33500d;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #9c2828;
  --btn-stop-hover-bg: #7a1717;
  --btn-stop-text: #ffffff;
  --status-online: #3d6010;
  --status-online-bg: rgba(61, 96, 16, 0.1);
  --status-online-border: rgba(61, 96, 16, 0.2);
  --status-offline: #9c2828;
  --status-offline-bg: rgba(156, 40, 40, 0.1);
  --status-offline-border: rgba(156, 40, 40, 0.2);
  --worker-active-border: #3d6010;
  --worker-active-text: #3d6010;
  --btn-capture-start-bg: #619e0b;
  --btn-capture-start-hover-bg: #4a770e;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #9c2828;
  --btn-capture-stop-hover-bg: #7a1717;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #9c2828;
  --error-text: #9c2828;
  --error-bg: rgba(156, 40, 40, 0.05);
  --error-border: #9c2828;
  --alert-success-border: #3d6010;
  --alert-warning-border: #824b0c;
}

body.theme-grape-soda {
  --bg-dark: #f2e6ff;
  --card-bg: #faf4ff;
  --card-inner-bg: #e8d2fc;
  --input-bg: #faf4ff;
  --sidebar-bg: rgba(120, 55, 235, 0.01);
  --border-color: rgba(120, 55, 235, 0.08);
  --primary: #7837eb;
  --primary-hover: #6925d6;
  --primary-alpha: rgba(120, 55, 235, 0.08);
  --primary-alpha-hover: rgba(120, 55, 235, 0.15);
  --primary-glow: rgba(120, 55, 235, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237837eb' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(120, 55, 235, 0.2);
  --code-bg: #f2e6ff;
  --console-fields: #7837eb;
  --console-warn: #824a0c;
  --console-error: #a61414;
  --console-system: #6925d6;
  --success: #026fa8;
  --success-bg: rgba(2, 111, 168, 0.1);
  --danger: #981448;
  --danger-bg: rgba(152, 20, 72, 0.1);
  --warning: #824a0c;
  --btn-start-bg: #7837eb;
  --btn-start-hover-bg: #6925d6;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #981448;
  --btn-stop-hover-bg: #801440;
  --btn-stop-text: #ffffff;
  --status-online: #7837eb;
  --status-online-bg: rgba(120, 55, 235, 0.1);
  --status-online-border: rgba(120, 55, 235, 0.2);
  --status-offline: #981448;
  --status-offline-bg: rgba(152, 20, 72, 0.1);
  --status-offline-border: rgba(152, 20, 72, 0.2);
  --worker-active-border: #7837eb;
  --worker-active-text: #7837eb;
  --btn-capture-start-bg: #a586fa;
  --btn-capture-start-hover-bg: #7837eb;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #d62372;
  --btn-capture-stop-hover-bg: #981448;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #7837eb;
  --error-text: #981448;
  --error-bg: rgba(152, 20, 72, 0.05);
  --error-border: #981448;
  --alert-success-border: #7837eb;
  --alert-warning-border: #824a0c;
}

body.theme-sunset-glow {
  --bg-dark: #ffecd0;
  --card-bg: #fffaf3;
  --card-inner-bg: #fed2a5;
  --input-bg: #fffaf3;
  --sidebar-bg: rgba(230, 84, 10, 0.01);
  --border-color: rgba(230, 84, 10, 0.08);
  --primary: #e65410;
  --primary-hover: #bd3e08;
  --primary-alpha: rgba(230, 84, 10, 0.08);
  --primary-alpha-hover: rgba(230, 84, 10, 0.15);
  --primary-glow: rgba(230, 84, 10, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23e65410' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(230, 84, 10, 0.2);
  --code-bg: #ffecd0;
  --console-fields: #e65410;
  --console-warn: #b24e05;
  --console-error: #b51818;
  --console-system: #bd3e08;
  --success: #127b37;
  --success-bg: rgba(18, 123, 55, 0.1);
  --danger: #b51818;
  --danger-bg: rgba(181, 24, 24, 0.1);
  --warning: #b24e05;
  --btn-start-bg: #e65410;
  --btn-start-hover-bg: #bd3e08;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #b51818;
  --btn-stop-hover-bg: #991717;
  --btn-stop-text: #ffffff;
  --status-online: #e65410;
  --status-online-bg: rgba(230, 84, 10, 0.1);
  --status-online-border: rgba(230, 84, 10, 0.2);
  --status-offline: #b51818;
  --status-offline-bg: rgba(181, 24, 24, 0.15);
  --status-offline-border: rgba(181, 24, 24, 0.3);
  --worker-active-border: #e65410;
  --worker-active-text: #e65410;
  --btn-capture-start-bg: #f76e10;
  --btn-capture-start-hover-bg: #e65410;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #d92121;
  --btn-capture-stop-hover-bg: #b51818;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #e65410;
  --error-text: #b51818;
  --error-bg: rgba(181, 24, 24, 0.05);
  --error-border: #b51818;
  --alert-success-border: #e65410;
  --alert-warning-border: #b24e05;
}

body.theme-coffee-latte {
  --bg-dark: #f4ebd9;
  --card-bg: #fcf8f0;
  --card-inner-bg: #e0d1be;
  --input-bg: #fcf8f0;
  --sidebar-bg: rgba(118, 50, 10, 0.01);
  --border-color: rgba(118, 50, 10, 0.08);
  --primary: #76320a;
  --primary-hover: #421901;
  --primary-alpha: rgba(118, 50, 10, 0.08);
  --primary-alpha-hover: rgba(118, 50, 10, 0.15);
  --primary-glow: rgba(118, 50, 10, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2376320a' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(118, 50, 10, 0.25);
  --code-bg: #f4ebd9;
  --console-fields: #76320a;
  --console-warn: #804a08;
  --console-error: #a81b1b;
  --console-system: #421901;
  --success: #126030;
  --success-bg: rgba(18, 96, 48, 0.1);
  --danger: #8e2a0b;
  --danger-bg: rgba(142, 42, 11, 0.1);
  --warning: #804a08;
  --btn-start-bg: #76320a;
  --btn-start-hover-bg: #421901;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #8e2a0b;
  --btn-stop-hover-bg: #781515;
  --btn-stop-text: #ffffff;
  --status-online: #76320a;
  --status-online-bg: rgba(118, 50, 10, 0.1);
  --status-online-border: rgba(118, 50, 10, 0.2);
  --status-offline: #8e2a0b;
  --status-offline-bg: rgba(142, 42, 11, 0.15);
  --status-offline-border: rgba(142, 42, 11, 0.3);
  --worker-active-border: #76320a;
  --worker-active-text: #76320a;
  --btn-capture-start-bg: #8c3c0a;
  --btn-capture-start-hover-bg: #76320a;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #a81b1b;
  --btn-capture-stop-hover-bg: #8e2a0b;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #76320a;
  --error-text: #8e2a0b;
  --error-bg: rgba(142, 42, 11, 0.05);
  --error-border: #8e2a0b;
  --alert-success-border: #76320a;
  --alert-warning-border: #804a08;
}

body.theme-winter-sky {
  --bg-dark: #d8f0fc;
  --card-bg: #ecf7fd;
  --card-inner-bg: #b0e1fa;
  --input-bg: #ecf7fd;
  --sidebar-bg: rgba(1, 102, 157, 0.01);
  --border-color: rgba(1, 102, 157, 0.08);
  --primary: #01669d;
  --primary-hover: #055682;
  --primary-alpha: rgba(1, 102, 157, 0.08);
  --primary-alpha-hover: rgba(1, 102, 157, 0.15);
  --primary-glow: rgba(1, 102, 157, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2301669d' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(1, 102, 157, 0.2);
  --code-bg: #d8f0fc;
  --console-fields: #01669d;
  --console-warn: #b04f05;
  --console-error: #b21515;
  --console-system: #055682;
  --success: #0a7268;
  --success-bg: rgba(10, 114, 104, 0.1);
  --danger: #b21515;
  --danger-bg: rgba(178, 21, 21, 0.1);
  --warning: #b04f05;
  --btn-start-bg: #01669d;
  --btn-start-hover-bg: #055682;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #b21515;
  --btn-stop-hover-bg: #8f1a1a;
  --btn-stop-text: #ffffff;
  --status-online: #01669d;
  --status-online-bg: rgba(1, 102, 157, 0.1);
  --status-online-border: rgba(1, 102, 157, 0.2);
  --status-offline: #b21515;
  --status-offline-bg: rgba(178, 21, 21, 0.15);
  --status-offline-border: rgba(178, 21, 21, 0.3);
  --worker-active-border: #01669d;
  --worker-active-text: #01669d;
  --btn-capture-start-bg: #34b9f2;
  --btn-capture-start-hover-bg: #0180c4;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #de1a42;
  --btn-capture-stop-hover-bg: #b20f32;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #01669d;
  --error-text: #b21515;
  --error-bg: rgba(178, 21, 21, 0.05);
  --error-border: #b21515;
  --alert-success-border: #01669d;
  --alert-warning-border: #b04f05;
}

body.theme-mono-slate {
  --bg-dark: #ebeff2;
  --card-bg: #f6f8fa;
  --card-inner-bg: #dee4ea;
  --input-bg: #f6f8fa;
  --sidebar-bg: rgba(12, 20, 36, 0.01);
  --border-color: rgba(12, 20, 36, 0.08);
  --primary: #0c1424;
  --primary-hover: #1a2436;
  --primary-alpha: rgba(12, 20, 36, 0.08);
  --primary-alpha-hover: rgba(12, 20, 36, 0.15);
  --primary-glow: rgba(12, 20, 36, 0.2);
  --search-focus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230c1424' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  --modal-backdrop: rgba(12, 20, 36, 0.25);
  --code-bg: #ebeff2;
  --console-fields: #313e4f;
  --console-warn: #875112;
  --console-error: #b21818;
  --console-system: #0c1424;
  --success: #146b36;
  --success-bg: rgba(20, 107, 54, 0.1);
  --danger: #a11f1f;
  --danger-bg: rgba(161, 31, 31, 0.1);
  --warning: #875112;
  --btn-start-bg: #0c1424;
  --btn-start-hover-bg: #1a2436;
  --btn-start-text: #ffffff;
  --btn-stop-bg: #3a4654;
  --btn-stop-hover-bg: #313e4f;
  --btn-stop-text: #ffffff;
  --status-online: #0c1424;
  --status-online-bg: rgba(12, 20, 36, 0.1);
  --status-online-border: rgba(12, 20, 36, 0.2);
  --status-offline: #3a4654;
  --status-offline-bg: rgba(58, 70, 84, 0.1);
  --status-offline-border: rgba(58, 70, 84, 0.2);
  --worker-active-border: #0c1424;
  --worker-active-text: #0c1424;
  --btn-capture-start-bg: #617082;
  --btn-capture-start-hover-bg: #3a4654;
  --btn-capture-start-text: #ffffff;
  --btn-capture-stop-bg: #313e4f;
  --btn-capture-stop-hover-bg: #1a2436;
  --btn-capture-stop-text: #ffffff;
  --btn-logout-color: #0c1424;
  --error-text: #3a4654;
  --error-bg: rgba(58, 70, 84, 0.05);
  --error-border: #3a4654;
  --alert-success-border: #0c1424;
  --alert-warning-border: #875112;
}

/* Styled options inside dropdown */
.theme-select option {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

.theme-select:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--primary) !important;
}