/* ============================================================
   QUANTRA TERMINAL - MULTIPLE PROFESSIONAL THEMES
   Theme Switcher System with 5 Premium Themes
   ============================================================ */

/* ============================================================
   THEME 1: MIDNIGHT BLUE (Default - Current)
   Professional dark blue theme
   ============================================================ */
[data-theme="midnight-blue"],
:root {
  /* Backgrounds */
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-alt: #334155;
  --surface-hover: #475569;
  --surface-active: #64748b;
  --bg-elevated: #1e293b;
  
  /* Borders */
  --border: #334155;
  --border-light: #475569;
  --border-dark: #1e293b;
  --border-focus: #3b82f6;
  
  /* Text */
  --text: #f1f5f9;
  --text-dim: #cbd5e1;
  --text-vdim: #94a3b8;
  --text-bright: #ffffff;
  --text-muted: #64748b;
  
  /* Accent */
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.15);
  
  /* Semantic Colors */
  --green: #10b981;
  --green-soft: rgba(16, 185, 129, 0.15);
  --green-text: #34d399;
  --green-hover: #059669;
  
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.15);
  --red-text: #f87171;
  --red-hover: #dc2626;
  
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.15);
  --blue-text: #60a5fa;
  
  --orange: #f97316;
  --orange-soft: rgba(249, 115, 22, 0.15);
  
  --purple: #a855f7;
  --purple-soft: rgba(168, 85, 247, 0.15);
  
  --yellow: #eab308;
  --yellow-soft: rgba(234, 179, 8, 0.15);
  
  --cyan: #06b6d4;
  --gold: #fbbf24;
  
  /* Theme Name */
  --theme-name: "Midnight Blue";
  --theme-description: "Professional dark blue theme";
}

/* ============================================================
   THEME 2: OBSIDIAN BLACK
   Pure black theme for OLED displays
   ============================================================ */
:root[data-theme="obsidian-black"] {
  /* Backgrounds */
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-alt: #141414;
  --surface-hover: #1f1f1f;
  --surface-active: #2a2a2a;
  --bg-elevated: #0a0a0a;
  
  /* Borders */
  --border: #1f1f1f;
  --border-light: #2a2a2a;
  --border-dark: #141414;
  --border-focus: #3b82f6;
  
  /* Text */
  --text: #ffffff;
  --text-dim: #d4d4d4;
  --text-vdim: #a3a3a3;
  --text-bright: #ffffff;
  --text-muted: #737373;
  
  /* Accent */
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.2);
  
  /* Semantic Colors */
  --green: #22c55e;
  --green-soft: rgba(34, 197, 94, 0.2);
  --green-text: #4ade80;
  --green-hover: #16a34a;
  
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.2);
  --red-text: #f87171;
  --red-hover: #dc2626;
  
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.2);
  --blue-text: #60a5fa;
  
  --orange: #f97316;
  --orange-soft: rgba(249, 115, 22, 0.2);
  
  --purple: #a855f7;
  --purple-soft: rgba(168, 85, 247, 0.2);
  
  --yellow: #eab308;
  --yellow-soft: rgba(234, 179, 8, 0.2);
  
  --cyan: #06b6d4;
  --gold: #fbbf24;
  
  --theme-name: "Obsidian Black";
  --theme-description: "Pure black for OLED";
}

/* ============================================================
   THEME SWITCHER UI
   ============================================================ */

.theme-switcher-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  border: 2px solid var(--border);
  cursor: pointer;
  z-index: 199;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.theme-switcher-btn:hover {
  transform: scale(1.1) rotate(180deg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

.theme-switcher-btn svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.theme-panel {
  position: fixed;
  bottom: 140px;
  right: 20px;
  width: 360px;
  max-height: 600px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  z-index: 198;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

.theme-panel.open {
  display: flex;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.theme-panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elevated);
}

.theme-panel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-panel-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-panel-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.theme-panel-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.theme-panel-body::-webkit-scrollbar {
  width: 6px;
}

.theme-panel-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.theme-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.theme-card {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.theme-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.theme-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.theme-card.active::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.theme-preview {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
}

.theme-preview-color {
  flex: 1;
  transition: all 0.2s;
}

.theme-card:hover .theme-preview-color {
  transform: scaleY(1.1);
}

.theme-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.theme-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.theme-description {
  font-size: 11px;
  color: var(--text-dim);
}

/* Theme preview colors */
.theme-card[data-theme="midnight-blue"] .theme-preview-color:nth-child(1) { background: #0f172a; }
.theme-card[data-theme="midnight-blue"] .theme-preview-color:nth-child(2) { background: #1e293b; }
.theme-card[data-theme="midnight-blue"] .theme-preview-color:nth-child(3) { background: #3b82f6; }
.theme-card[data-theme="midnight-blue"] .theme-preview-color:nth-child(4) { background: #10b981; }
.theme-card[data-theme="midnight-blue"] .theme-preview-color:nth-child(5) { background: #ef4444; }

.theme-card[data-theme="obsidian-black"] .theme-preview-color:nth-child(1) { background: #000000; }
.theme-card[data-theme="obsidian-black"] .theme-preview-color:nth-child(2) { background: #0a0a0a; }
.theme-card[data-theme="obsidian-black"] .theme-preview-color:nth-child(3) { background: #3b82f6; }
.theme-card[data-theme="obsidian-black"] .theme-preview-color:nth-child(4) { background: #22c55e; }
.theme-card[data-theme="obsidian-black"] .theme-preview-color:nth-child(5) { background: #ef4444; }





/* Mobile responsive */
@media (max-width: 768px) {
  .theme-panel {
    width: calc(100vw - 40px);
    right: 20px;
    left: 20px;
    max-height: 500px;
  }
  
  .theme-switcher-btn {
    bottom: 70px;
  }
}


/* ============================================================
   NAVIGATION BAR FIX - Proper Alignment
   ============================================================ */

.q-nav {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  gap: 14px;
}

.q-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.q-nav-brand svg {
  width: 22px;
  height: 22px;
}

.brand-text {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.q-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.q-nav-links a {
  padding: 5px 11px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.q-nav-links a:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.q-nav-links a.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.q-nav-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 10px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-left: auto;
  flex-shrink: 0;
}

.q-nav-user-dropdown {
  position: relative;
  flex-shrink: 0;
  margin-left: 0;
}

.q-nav-user-btn {
  padding: 4px 10px 4px 4px !important;
}
.q-nav-user-btn .user-name {
  font-size: 12px !important;
}
.q-avatar-sm {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}

/* Dropdown section labels */
.q-dropdown-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-vdim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 8px 12px 4px;
}

.q-dropdown-admin {
  color: var(--gold) !important;
}
.q-dropdown-admin svg {
  color: var(--gold) !important;
}

/* Connection status indicators */
.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}

.conn-dot.off {
  background: var(--red);
  animation: none;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Responsive navigation */
@media (max-width: 1200px) {
  .q-nav-links a {
    padding: 5px 8px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .q-nav {
    padding: 0 10px;
    gap: 6px;
    height: 44px;
  }
  
  .q-nav-links {
    display: none;
  }
  
  .q-nav-status {
    font-size: 10px;
    padding: 3px 7px;
  }
  
  .q-nav-user-dropdown {
    margin-left: 0;
  }
}


/* ============================================================
   QUICK FILTER CHIP BAR
   ============================================================ */

.quick-chip-bar {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  overflow-x: auto;
  z-index: 98;
}
.quick-chip-bar::-webkit-scrollbar { height: 0; }

.qcb-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: nowrap;
}

.qchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  letter-spacing: 0.2px;
}
.qchip:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-hover);
}
.qchip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.qchip .qc-ico {
  font-size: 12px;
  line-height: 1;
}
.qc-count {
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 2px;
  min-width: 14px;
  text-align: center;
}
.qchip-clear {
  border-color: var(--border) !important;
  color: var(--text-vdim) !important;
  background: var(--bg) !important;
  margin-left: 4px;
  cursor: default;
  transition: all 0.18s;
}
.qchip-clear:hover {
  background: var(--bg) !important;
}
.qchip-clear.has-filters {
  border-color: var(--red) !important;
  color: var(--red) !important;
  background: var(--red-soft, rgba(239,68,68,0.12)) !important;
  cursor: pointer;
  font-weight: 700;
}
.qchip-clear.has-filters:hover {
  background: var(--red, #ef4444) !important;
  color: #fff !important;
  border-color: var(--red, #ef4444) !important;
  box-shadow: 0 0 0 2px var(--red-soft, rgba(239,68,68,0.2));
}
.qchip-clear.has-filters:hover .qc-count {
  background: #fff !important;
  color: var(--red, #ef4444) !important;
}
.qchip-clear.has-filters .qc-count {
  background: var(--red) !important;
  color: #fff;
}

.qcb-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

.qcb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.qcb-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.qcb-toggle:hover { color: var(--text); }

.qcb-slider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.qcs-label {
  font-weight: 500;
}
.qcb-slider input[type="range"] {
  width: 90px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.qcb-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--bg);
}
.qcb-slider input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--bg);
}
.qcs-val {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--accent);
  min-width: 32px;
  font-size: 11px;
}

.qcb-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 4px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
  white-space: nowrap;
}
.qcc-shown {
  font-weight: 700;
  color: var(--accent);
  font-size: 13px;
}
.qcc-sep { color: var(--text-vdim); }
.qcc-total { color: var(--text); font-weight: 600; }
.qcc-suffix {
  color: var(--text-vdim);
  font-size: 10px;
  margin-left: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Watchlist star button on rows */
.row-watch-btn {
  background: transparent;
  border: none;
  color: var(--text-vdim);
  cursor: pointer;
  padding: 0;
  margin-right: 6px;
  font-size: 13px;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
  vertical-align: middle;
}
.row-watch-btn:hover { color: var(--gold, #fbbf24); transform: scale(1.2); }
.row-watch-btn.active { color: var(--gold, #fbbf24); }

@media (max-width: 768px) {
  .quick-chip-bar {
    padding: 6px 10px;
    gap: 8px;
  }
  .qchip { font-size: 10px; padding: 3px 9px; }
  .qcb-slider input[type="range"] { width: 60px; }
  .qcb-counter { padding: 3px 9px; }
}


/* ============================================================
   COLUMNS & EXPORT MODAL
   ============================================================ */

.ce-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 350;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ce-modal {
  width: 560px;
  max-width: 100%;
  max-height: 80vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ce-pop 0.18s ease-out;
}
@keyframes ce-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ce-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.ce-tabs {
  display: flex;
  gap: 4px;
}
.ce-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ce-tab:hover { color: var(--text); }
.ce-tab.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}
.ce-tab-ico { font-size: 13px; }

.ce-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.ce-close:hover { background: var(--surface-hover); color: var(--text); }

.ce-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
}

.ce-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ce-hint {
  font-size: 11px;
  color: var(--text-dim);
}
.ce-presets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ce-preset-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.ce-preset-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.ce-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.ce-col-group {
  background: var(--surface-alt);
  color: var(--text-vdim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
}
.ce-col-group:first-child { border-top: none; }

.ce-col-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  cursor: grab;
  background: var(--bg);
  transition: background 0.12s;
}
.ce-col-item:hover { background: var(--surface-hover); }
.ce-col-item.dragging { opacity: 0.5; cursor: grabbing; background: var(--accent-soft); }
.ce-col-item.locked { cursor: default; }
.ce-col-item.locked:hover { background: var(--bg); }

.ce-drag-handle {
  color: var(--text-vdim);
  font-size: 14px;
  width: 18px;
  text-align: center;
  user-select: none;
  flex-shrink: 0;
}
.ce-col-item.locked .ce-drag-handle { color: var(--text-vdim); opacity: 0.6; }

.ce-col-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  user-select: none;
}
.ce-col-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.ce-col-label input[type="checkbox"]:disabled { cursor: not-allowed; }

.ce-col-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
.ce-col-key {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-vdim);
  margin-left: auto;
  padding: 1px 6px;
  background: var(--surface-alt);
  border-radius: 4px;
}

.ce-meta {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
}
.ce-meta span { color: var(--accent); font-weight: 700; }

/* Export tab */
.ce-export-section {
  margin-bottom: 14px;
}
.ce-export-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-vdim);
  margin-bottom: 6px;
}
.ce-radio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ce-radio {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.ce-radio:hover { border-color: var(--accent); }
.ce-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ce-radio:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ce-radio span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.ce-radio span em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  margin-left: 4px;
}
.ce-radio small {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 400;
}

.ce-export-go {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}
.ce-export-go:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-soft);
}
.ce-export-go:active { transform: translateY(0); }

.ce-export-status {
  margin-top: 8px;
  font-size: 11px;
  text-align: center;
  color: var(--text-dim);
  min-height: 14px;
}
.ce-export-status.ok { color: var(--green); }
.ce-export-status.warn { color: var(--orange, #f97316); }

/* Mobile */
@media (max-width: 600px) {
  .ce-overlay { padding: 12px; }
  .ce-modal { max-height: 92vh; }
  .ce-radio-row { grid-template-columns: 1fr; }
  .ce-section-row { flex-direction: column; align-items: stretch; }
}

/* The new Columns/Export trigger button color tweak */
.btn-cols {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.btn-cols:hover {
  background: var(--accent-soft) !important;
}


/* ============================================================
   QUANTRA THEMES — added 2026-05-26
   Five themes designed for the Quantra Terminal brand. Each follows
   the existing CSS-variable contract (bg, surface*, border*, text*,
   accent*, semantic colors). Same structure as obsidian-black above
   so adding new themes only needs vars, not new selectors.
   ============================================================ */

/* ---- Quantra Carbon ---------------------------------------- */
/* Refined dark, true-black background, sharper grid lines, blue   */
/* accent. Default-ready for power users who want maximum contrast. */
:root[data-theme="quantra-carbon"] {
  --bg: #050508;
  --surface: #0d0e12;
  --surface-alt: #14161c;
  --surface-hover: #1c1f27;
  --surface-active: #262a35;
  --bg-elevated: #0d0e12;

  --border: #1f232c;
  --border-light: #2a2f3a;
  --border-dark: #161922;
  --border-focus: #3b82f6;

  --text: #f5f7fa;
  --text-dim: #c2c8d2;
  --text-vdim: #8a92a0;
  --text-bright: #ffffff;
  --text-muted: #5b6271;

  --accent: #3b82f6;
  --accent-hover: #5b9bff;
  --accent-soft: rgba(59, 130, 246, 0.15);

  --green: #10b981;
  --green-soft: rgba(16, 185, 129, 0.18);
  --green-text: #34d399;
  --green-hover: #059669;

  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.18);
  --red-text: #f87171;
  --red-hover: #dc2626;

  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.18);
  --blue-text: #60a5fa;

  --orange: #f59e0b;
  --orange-soft: rgba(245, 158, 11, 0.18);

  --purple: #a855f7;
  --purple-soft: rgba(168, 85, 247, 0.18);

  --yellow: #eab308;
  --yellow-soft: rgba(234, 179, 8, 0.18);

  --cyan: #06b6d4;
  --gold: #fbbf24;

  --theme-name: "Quantra Carbon";
  --theme-description: "Refined dark, sharp blue accents";
}

/* ---- Quantra Slate ----------------------------------------- */
/* Softer dark, deep slate-navy. Easier on the eyes for long       */
/* sessions. Same structure, mellower palette.                     */
:root[data-theme="quantra-slate"] {
  --bg: #0f1419;
  --surface: #161c24;
  --surface-alt: #1d2530;
  --surface-hover: #25303c;
  --surface-active: #2f3b48;
  --bg-elevated: #161c24;

  --border: #25303c;
  --border-light: #34404e;
  --border-dark: #1d2530;
  --border-focus: #6366f1;

  --text: #e6ebf2;
  --text-dim: #b6bdc8;
  --text-vdim: #7d8593;
  --text-bright: #ffffff;
  --text-muted: #535b69;

  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-soft: rgba(99, 102, 241, 0.16);

  --green: #14b8a6;
  --green-soft: rgba(20, 184, 166, 0.18);
  --green-text: #2dd4bf;
  --green-hover: #0d9488;

  --red: #f43f5e;
  --red-soft: rgba(244, 63, 94, 0.18);
  --red-text: #fb7185;
  --red-hover: #e11d48;

  --blue: #6366f1;
  --blue-soft: rgba(99, 102, 241, 0.18);
  --blue-text: #818cf8;

  --orange: #f97316;
  --orange-soft: rgba(249, 115, 22, 0.18);

  --purple: #8b5cf6;
  --purple-soft: rgba(139, 92, 246, 0.18);

  --yellow: #facc15;
  --yellow-soft: rgba(250, 204, 21, 0.18);

  --cyan: #22d3ee;
  --gold: #fbbf24;

  --theme-name: "Quantra Slate";
  --theme-description: "Soft slate, indigo accents";
}

/* ---- Quantra Paper ----------------------------------------- */
/* Clean light theme. Off-white background, dark text, blue accent.*/
/* Daytime / printing / screenshots.                                */
:root[data-theme="quantra-paper"] {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-alt: #f4f4f5;
  --surface-hover: #e4e4e7;
  --surface-active: #d4d4d8;
  --bg-elevated: #ffffff;

  --border: #e4e4e7;
  --border-light: #f4f4f5;
  --border-dark: #d4d4d8;
  --border-focus: #2563eb;

  --text: #18181b;
  --text-dim: #3f3f46;
  --text-vdim: #71717a;
  --text-bright: #09090b;
  --text-muted: #a1a1aa;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.10);

  --green: #15803d;
  --green-soft: rgba(21, 128, 61, 0.12);
  --green-text: #16a34a;
  --green-hover: #166534;

  --red: #b91c1c;
  --red-soft: rgba(185, 28, 28, 0.10);
  --red-text: #dc2626;
  --red-hover: #991b1b;

  --blue: #2563eb;
  --blue-soft: rgba(37, 99, 235, 0.10);
  --blue-text: #1d4ed8;

  --orange: #c2410c;
  --orange-soft: rgba(194, 65, 12, 0.10);

  --purple: #7c3aed;
  --purple-soft: rgba(124, 58, 237, 0.10);

  --yellow: #a16207;
  --yellow-soft: rgba(161, 98, 7, 0.10);

  --cyan: #0e7490;
  --gold: #b45309;

  --theme-name: "Quantra Paper";
  --theme-description: "Clean light, daytime use";
}

/* ---- Quantra Onyx ------------------------------------------ */
/* High-contrast OLED-friendly. Pure black with neon-accent        */
/* highlights for momentum cells. Punchy.                          */
:root[data-theme="quantra-onyx"] {
  --bg: #000000;
  --surface: #060608;
  --surface-alt: #0c0c10;
  --surface-hover: #14141a;
  --surface-active: #1d1d25;
  --bg-elevated: #060608;

  --border: #1d1d25;
  --border-light: #2a2a35;
  --border-dark: #0c0c10;
  --border-focus: #00e5ff;

  --text: #ffffff;
  --text-dim: #d4d4dc;
  --text-vdim: #8a8a98;
  --text-bright: #ffffff;
  --text-muted: #5a5a68;

  --accent: #00e5ff;
  --accent-hover: #6efbff;
  --accent-soft: rgba(0, 229, 255, 0.18);

  --green: #00ff9d;
  --green-soft: rgba(0, 255, 157, 0.20);
  --green-text: #00ff9d;
  --green-hover: #00cc7e;

  --red: #ff3860;
  --red-soft: rgba(255, 56, 96, 0.20);
  --red-text: #ff3860;
  --red-hover: #ff1f4a;

  --blue: #00e5ff;
  --blue-soft: rgba(0, 229, 255, 0.18);
  --blue-text: #6efbff;

  --orange: #ff9500;
  --orange-soft: rgba(255, 149, 0, 0.18);

  --purple: #c63cff;
  --purple-soft: rgba(198, 60, 255, 0.18);

  --yellow: #ffd60a;
  --yellow-soft: rgba(255, 214, 10, 0.18);

  --cyan: #00e5ff;
  --gold: #ffcc00;

  --theme-name: "Quantra Onyx";
  --theme-description: "OLED black, neon accents";
}

/* ---- Quantra Mint ------------------------------------------ */
/* Analytical, warm-grey background, mint-green positives,         */
/* terracotta negatives — softer alternative to red/green.         */
:root[data-theme="quantra-mint"] {
  --bg: #1a1f1d;
  --surface: #21262a;
  --surface-alt: #2a3036;
  --surface-hover: #343b42;
  --surface-active: #404852;
  --bg-elevated: #21262a;

  --border: #343b42;
  --border-light: #444c54;
  --border-dark: #2a3036;
  --border-focus: #5eead4;

  --text: #e8ede8;
  --text-dim: #b9c0bc;
  --text-vdim: #828a86;
  --text-bright: #ffffff;
  --text-muted: #555c58;

  --accent: #5eead4;
  --accent-hover: #99f6e4;
  --accent-soft: rgba(94, 234, 212, 0.16);

  --green: #5eead4;
  --green-soft: rgba(94, 234, 212, 0.18);
  --green-text: #5eead4;
  --green-hover: #2dd4bf;

  --red: #e07a5f;
  --red-soft: rgba(224, 122, 95, 0.18);
  --red-text: #e07a5f;
  --red-hover: #cb6848;

  --blue: #38bdf8;
  --blue-soft: rgba(56, 189, 248, 0.18);
  --blue-text: #7dd3fc;

  --orange: #f5b061;
  --orange-soft: rgba(245, 176, 97, 0.18);

  --purple: #c4b5fd;
  --purple-soft: rgba(196, 181, 253, 0.18);

  --yellow: #facc15;
  --yellow-soft: rgba(250, 204, 21, 0.18);

  --cyan: #67e8f9;
  --gold: #f5b061;

  --theme-name: "Quantra Mint";
  --theme-description: "Warm grey, mint/terracotta";
}

/* ---- Quantra theme-card preview swatches ------------------ */
.theme-card[data-theme="quantra-carbon"] .theme-preview-color:nth-child(1) { background: #050508; }
.theme-card[data-theme="quantra-carbon"] .theme-preview-color:nth-child(2) { background: #0d0e12; }
.theme-card[data-theme="quantra-carbon"] .theme-preview-color:nth-child(3) { background: #3b82f6; }
.theme-card[data-theme="quantra-carbon"] .theme-preview-color:nth-child(4) { background: #10b981; }
.theme-card[data-theme="quantra-carbon"] .theme-preview-color:nth-child(5) { background: #ef4444; }

.theme-card[data-theme="quantra-slate"] .theme-preview-color:nth-child(1) { background: #0f1419; }
.theme-card[data-theme="quantra-slate"] .theme-preview-color:nth-child(2) { background: #161c24; }
.theme-card[data-theme="quantra-slate"] .theme-preview-color:nth-child(3) { background: #6366f1; }
.theme-card[data-theme="quantra-slate"] .theme-preview-color:nth-child(4) { background: #14b8a6; }
.theme-card[data-theme="quantra-slate"] .theme-preview-color:nth-child(5) { background: #f43f5e; }

.theme-card[data-theme="quantra-paper"] .theme-preview-color:nth-child(1) { background: #fafafa; }
.theme-card[data-theme="quantra-paper"] .theme-preview-color:nth-child(2) { background: #ffffff; }
.theme-card[data-theme="quantra-paper"] .theme-preview-color:nth-child(3) { background: #2563eb; }
.theme-card[data-theme="quantra-paper"] .theme-preview-color:nth-child(4) { background: #15803d; }
.theme-card[data-theme="quantra-paper"] .theme-preview-color:nth-child(5) { background: #b91c1c; }

.theme-card[data-theme="quantra-onyx"] .theme-preview-color:nth-child(1) { background: #000000; }
.theme-card[data-theme="quantra-onyx"] .theme-preview-color:nth-child(2) { background: #060608; }
.theme-card[data-theme="quantra-onyx"] .theme-preview-color:nth-child(3) { background: #00e5ff; }
.theme-card[data-theme="quantra-onyx"] .theme-preview-color:nth-child(4) { background: #00ff9d; }
.theme-card[data-theme="quantra-onyx"] .theme-preview-color:nth-child(5) { background: #ff3860; }

.theme-card[data-theme="quantra-mint"] .theme-preview-color:nth-child(1) { background: #1a1f1d; }
.theme-card[data-theme="quantra-mint"] .theme-preview-color:nth-child(2) { background: #21262a; }
.theme-card[data-theme="quantra-mint"] .theme-preview-color:nth-child(3) { background: #5eead4; }
.theme-card[data-theme="quantra-mint"] .theme-preview-color:nth-child(4) { background: #5eead4; }
.theme-card[data-theme="quantra-mint"] .theme-preview-color:nth-child(5) { background: #e07a5f; }


/* ============================================================
   PREMIUM THEMES — added 2026-05-26 (replacement set)
   Replaces the older emerald-dark / royal-purple / crimson-red /
   arctic-blue / glassmorphism / neumorphism / terminal-hacker themes.
   These four are designed for the Quantra brand: trader-grade,
   visually distinct, professional. All follow the same CSS-variable
   contract used by midnight-blue and the Quantra themes above.
   ============================================================ */

/* ---- Aurora ----------------------------------------------- */
/* Deep purple-blue gradient feel, neon-violet accent. Premium      */
/* night-mode for late-session trading.                             */
:root[data-theme="aurora"] {
  --bg: #0a0717;
  --surface: #11102a;
  --surface-alt: #1a1838;
  --surface-hover: #25224a;
  --surface-active: #302d5e;
  --bg-elevated: #11102a;

  --border: #2a2855;
  --border-light: #3a3870;
  --border-dark: #1d1c40;
  --border-focus: #a78bfa;

  --text: #ece9ff;
  --text-dim: #b8b3e0;
  --text-vdim: #7e7aae;
  --text-bright: #ffffff;
  --text-muted: #524f78;

  --accent: #a78bfa;
  --accent-hover: #c4b5fd;
  --accent-soft: rgba(167, 139, 250, 0.16);

  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.18);
  --green-text: #6ee7b7;
  --green-hover: #10b981;

  --red: #fb7185;
  --red-soft: rgba(251, 113, 133, 0.18);
  --red-text: #fda4af;
  --red-hover: #f43f5e;

  --blue: #818cf8;
  --blue-soft: rgba(129, 140, 248, 0.18);
  --blue-text: #a5b4fc;

  --orange: #fb923c;
  --orange-soft: rgba(251, 146, 60, 0.18);

  --purple: #a78bfa;
  --purple-soft: rgba(167, 139, 250, 0.18);

  --yellow: #fcd34d;
  --yellow-soft: rgba(252, 211, 77, 0.18);

  --cyan: #67e8f9;
  --gold: #fbbf24;

  --theme-name: "Aurora";
  --theme-description: "Deep violet, premium night";
}

/* ---- Trader Pro ------------------------------------------- */
/* Bloomberg-style: pure black, dense type, signature orange accent.*/
/* For traders who came from professional terminals.                 */
:root[data-theme="trader-pro"] {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-alt: #131313;
  --surface-hover: #1c1c1c;
  --surface-active: #262626;
  --bg-elevated: #0a0a0a;

  --border: #1c1c1c;
  --border-light: #2a2a2a;
  --border-dark: #131313;
  --border-focus: #ff9800;

  --text: #f5f5f5;
  --text-dim: #c4c4c4;
  --text-vdim: #8a8a8a;
  --text-bright: #ffffff;
  --text-muted: #555555;

  --accent: #ff9800;
  --accent-hover: #ffa726;
  --accent-soft: rgba(255, 152, 0, 0.18);

  --green: #00c853;
  --green-soft: rgba(0, 200, 83, 0.20);
  --green-text: #00e676;
  --green-hover: #00a042;

  --red: #ff1744;
  --red-soft: rgba(255, 23, 68, 0.20);
  --red-text: #ff5252;
  --red-hover: #d50000;

  --blue: #2196f3;
  --blue-soft: rgba(33, 150, 243, 0.18);
  --blue-text: #64b5f6;

  --orange: #ff9800;
  --orange-soft: rgba(255, 152, 0, 0.18);

  --purple: #ab47bc;
  --purple-soft: rgba(171, 71, 188, 0.18);

  --yellow: #ffc107;
  --yellow-soft: rgba(255, 193, 7, 0.18);

  --cyan: #00bcd4;
  --gold: #ffc107;

  --theme-name: "Trader Pro";
  --theme-description: "Bloomberg-style, orange accent";
}

/* ---- Sunset Trade ----------------------------------------- */
/* Warm professional dark — coral/amber accents, easier on eyes for */
/* long evening sessions. Less stark than carbon, less cold than    */
/* slate.                                                           */
:root[data-theme="sunset-trade"] {
  --bg: #1a1410;
  --surface: #221c17;
  --surface-alt: #2c241e;
  --surface-hover: #382f27;
  --surface-active: #443a30;
  --bg-elevated: #221c17;

  --border: #382f27;
  --border-light: #4a4036;
  --border-dark: #2c241e;
  --border-focus: #fb923c;

  --text: #f5ede5;
  --text-dim: #c8bcb0;
  --text-vdim: #8a7e72;
  --text-bright: #ffffff;
  --text-muted: #5c5246;

  --accent: #fb923c;
  --accent-hover: #fdba74;
  --accent-soft: rgba(251, 146, 60, 0.16);

  --green: #65a30d;
  --green-soft: rgba(101, 163, 13, 0.18);
  --green-text: #84cc16;
  --green-hover: #4d7c0f;

  --red: #dc2626;
  --red-soft: rgba(220, 38, 38, 0.18);
  --red-text: #ef4444;
  --red-hover: #b91c1c;

  --blue: #0ea5e9;
  --blue-soft: rgba(14, 165, 233, 0.18);
  --blue-text: #38bdf8;

  --orange: #fb923c;
  --orange-soft: rgba(251, 146, 60, 0.18);

  --purple: #c084fc;
  --purple-soft: rgba(192, 132, 252, 0.18);

  --yellow: #fbbf24;
  --yellow-soft: rgba(251, 191, 36, 0.18);

  --cyan: #22d3ee;
  --gold: #f59e0b;

  --theme-name: "Sunset Trade";
  --theme-description: "Warm coral / amber, evening sessions";
}

/* ---- Ocean Deep ------------------------------------------- */
/* Deep teal-blue water palette. Calm, focused. Aqua accent reads   */
/* trustworthy and clean — fintech-adjacent without being generic.  */
:root[data-theme="ocean-deep"] {
  --bg: #051221;
  --surface: #0a1c30;
  --surface-alt: #11283f;
  --surface-hover: #1a3550;
  --surface-active: #234360;
  --bg-elevated: #0a1c30;

  --border: #1a3550;
  --border-light: #294966;
  --border-dark: #11283f;
  --border-focus: #22d3ee;

  --text: #e6f1f9;
  --text-dim: #b3c5d6;
  --text-vdim: #7892a8;
  --text-bright: #ffffff;
  --text-muted: #4d6378;

  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --accent-soft: rgba(34, 211, 238, 0.16);

  --green: #2dd4bf;
  --green-soft: rgba(45, 212, 191, 0.18);
  --green-text: #5eead4;
  --green-hover: #14b8a6;

  --red: #fb7185;
  --red-soft: rgba(251, 113, 133, 0.18);
  --red-text: #fda4af;
  --red-hover: #f43f5e;

  --blue: #38bdf8;
  --blue-soft: rgba(56, 189, 248, 0.18);
  --blue-text: #7dd3fc;

  --orange: #f97316;
  --orange-soft: rgba(249, 115, 22, 0.18);

  --purple: #818cf8;
  --purple-soft: rgba(129, 140, 248, 0.18);

  --yellow: #facc15;
  --yellow-soft: rgba(250, 204, 21, 0.18);

  --cyan: #22d3ee;
  --gold: #fcd34d;

  --theme-name: "Ocean Deep";
  --theme-description: "Calm teal, focus mode";
}

/* ---- Bloomberg Pro ---------------------------------------- */
/* Authentic terminal experience: pure black + signature amber +    */
/* cyan headers. Inspired by the classic Bloomberg terminal that    */
/* every desk on Wall Street has glowed at since the 80s.           */
:root[data-theme="bloomberg-pro"] {
  --bg: #000000;
  --surface: #0a0805;
  --surface-alt: #14100a;
  --surface-hover: #1f1810;
  --surface-active: #2a2015;
  --bg-elevated: #0a0805;

  --border: #2a2015;
  --border-light: #3d2f1f;
  --border-dark: #14100a;
  --border-focus: #ffb000;

  --text: #ffb000;
  --text-dim: #cc8c00;
  --text-vdim: #8c6000;
  --text-bright: #ffd06b;
  --text-muted: #5a3d00;

  --accent: #ffb000;
  --accent-hover: #ffc94d;
  --accent-soft: rgba(255, 176, 0, 0.18);

  --green: #00cc66;
  --green-soft: rgba(0, 204, 102, 0.20);
  --green-text: #33ff99;
  --green-hover: #00a352;

  --red: #ff3333;
  --red-soft: rgba(255, 51, 51, 0.20);
  --red-text: #ff6666;
  --red-hover: #cc0000;

  --blue: #00bfff;
  --blue-soft: rgba(0, 191, 255, 0.18);
  --blue-text: #66d9ff;

  --orange: #ffb000;
  --orange-soft: rgba(255, 176, 0, 0.18);

  --purple: #c77dff;
  --purple-soft: rgba(199, 125, 255, 0.18);

  --yellow: #ffd700;
  --yellow-soft: rgba(255, 215, 0, 0.18);

  --cyan: #00bfff;
  --gold: #ffb000;

  --theme-name: "Bloomberg Pro";
  --theme-description: "Authentic terminal amber, cyan headers";
}

/* ---- Premium swatches for theme-explorer cards ------------ */
.theme-card[data-theme="bloomberg-pro"] .theme-preview-color:nth-child(1) { background: #000000; }
.theme-card[data-theme="bloomberg-pro"] .theme-preview-color:nth-child(2) { background: #0a0805; }
.theme-card[data-theme="bloomberg-pro"] .theme-preview-color:nth-child(3) { background: #ffb000; }
.theme-card[data-theme="bloomberg-pro"] .theme-preview-color:nth-child(4) { background: #00bfff; }
.theme-card[data-theme="bloomberg-pro"] .theme-preview-color:nth-child(5) { background: #00cc66; }

.theme-card[data-theme="aurora"] .theme-preview-color:nth-child(1) { background: #0a0717; }
.theme-card[data-theme="aurora"] .theme-preview-color:nth-child(2) { background: #11102a; }
.theme-card[data-theme="aurora"] .theme-preview-color:nth-child(3) { background: #a78bfa; }
.theme-card[data-theme="aurora"] .theme-preview-color:nth-child(4) { background: #34d399; }
.theme-card[data-theme="aurora"] .theme-preview-color:nth-child(5) { background: #fb7185; }

.theme-card[data-theme="trader-pro"] .theme-preview-color:nth-child(1) { background: #000000; }
.theme-card[data-theme="trader-pro"] .theme-preview-color:nth-child(2) { background: #0a0a0a; }
.theme-card[data-theme="trader-pro"] .theme-preview-color:nth-child(3) { background: #ff9800; }
.theme-card[data-theme="trader-pro"] .theme-preview-color:nth-child(4) { background: #00c853; }
.theme-card[data-theme="trader-pro"] .theme-preview-color:nth-child(5) { background: #ff1744; }

.theme-card[data-theme="sunset-trade"] .theme-preview-color:nth-child(1) { background: #1a1410; }
.theme-card[data-theme="sunset-trade"] .theme-preview-color:nth-child(2) { background: #221c17; }
.theme-card[data-theme="sunset-trade"] .theme-preview-color:nth-child(3) { background: #fb923c; }
.theme-card[data-theme="sunset-trade"] .theme-preview-color:nth-child(4) { background: #65a30d; }
.theme-card[data-theme="sunset-trade"] .theme-preview-color:nth-child(5) { background: #dc2626; }

.theme-card[data-theme="ocean-deep"] .theme-preview-color:nth-child(1) { background: #051221; }
.theme-card[data-theme="ocean-deep"] .theme-preview-color:nth-child(2) { background: #0a1c30; }
.theme-card[data-theme="ocean-deep"] .theme-preview-color:nth-child(3) { background: #22d3ee; }
.theme-card[data-theme="ocean-deep"] .theme-preview-color:nth-child(4) { background: #2dd4bf; }
.theme-card[data-theme="ocean-deep"] .theme-preview-color:nth-child(5) { background: #fb7185; }


/* ============================================================
   Top navbar revamp — propagated to every page (2026-05-26)
   Icons + grouped pill background + gradient active state.
   To revert: comment out this entire block (everything between
   the BEGIN/END markers below).
   ============================================================ */
/* BEGIN: navbar revamp */
.q-nav { padding: 0 18px; gap: 18px; }

.q-nav-brand .brand-text {
  font-size: 17px !important;
  letter-spacing: 1.6px !important;
  background: linear-gradient(135deg, var(--accent), var(--cyan, #06b6d4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.q-nav-links {
  gap: 4px;
  background: var(--bg-elevated, var(--surface));
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.q-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  transition: all 0.18s ease;
}

.q-nav-links a .nav-ico {
  width: 14px; height: 14px;
  opacity: 0.85;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.q-nav-links a:hover {
  color: var(--text-bright);
  background: var(--surface-hover);
}
.q-nav-links a:hover .nav-ico { opacity: 1; transform: translateY(-1px); }

.q-nav-links a.active {
  color: var(--text-bright) !important;
  background: linear-gradient(135deg, var(--accent), var(--cyan, #06b6d4)) !important;
  box-shadow: 0 4px 12px var(--accent-soft);
}
.q-nav-links a.active .nav-ico { opacity: 1; }

/* Hide the older underline-slider effect from premium-polish.css that some
   pages still load alongside themes.css. We want the pill style only. */
.q-nav-links a::before { display: none !important; }

@media (max-width: 1100px) {
  .q-nav-links a span { display: none; }
  .q-nav-links a { padding: 7px 10px !important; }
}
/* END: navbar revamp */


/* 2026-05-27: Nifty 50 page paused — hide the nav link everywhere.
   Re-enable: delete this rule (and set NIFTY_PAGE_ENABLED=True in
   ws_server.py). */
.q-nav-links a#nav-nifty { display: none !important; }


/* ============================================================
   Bloomberg Pro consistency overrides — 2026-05-27
   These pull the dashboard's hardcoded sector/signal/buildup
   palettes into a single amber-on-black aesthetic so the live
   dashboard matches what the theme_explorer preview shows.

   Revert: comment out this block (everything between the
   BEGIN/END markers below). Other themes are unaffected.
   ============================================================ */
/* BEGIN: bloomberg-pro overrides */

/* All sector chips → amber tint */
:root[data-theme="bloomberg-pro"] .sector-pill,
:root[data-theme="bloomberg-pro"] .sector-IT,
:root[data-theme="bloomberg-pro"] .sector-BANK,
:root[data-theme="bloomberg-pro"] .sector-PSU_BANK,
:root[data-theme="bloomberg-pro"] .sector-FIN,
:root[data-theme="bloomberg-pro"] .sector-FINANCE,
:root[data-theme="bloomberg-pro"] .sector-AUTO,
:root[data-theme="bloomberg-pro"] .sector-METAL,
:root[data-theme="bloomberg-pro"] .sector-PHARMA,
:root[data-theme="bloomberg-pro"] .sector-HEALTHCARE,
:root[data-theme="bloomberg-pro"] .sector-ENERGY,
:root[data-theme="bloomberg-pro"] .sector-REALTY,
:root[data-theme="bloomberg-pro"] .sector-INFRA,
:root[data-theme="bloomberg-pro"] .sector-CONSUMER,
:root[data-theme="bloomberg-pro"] .sector-HEALTH,
:root[data-theme="bloomberg-pro"] .sector-MEDIA,
:root[data-theme="bloomberg-pro"] .sector-INSURANCE,
:root[data-theme="bloomberg-pro"] .sector-INDEX,
:root[data-theme="bloomberg-pro"] .sector-OTHER,
:root[data-theme="bloomberg-pro"] .sector-DEFAULT {
  background: rgba(255, 176, 0, 0.10) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(255, 176, 0, 0.25) !important;
}

/* Signal pills: BULLISH = green, BEARISH = red, NEUTRAL = amber-muted */
:root[data-theme="bloomberg-pro"] .sig-pill.sig-BULLISH,
:root[data-theme="bloomberg-pro"] .sig-pill.sig-MILDLY_BULL {
  background: var(--green-soft) !important;
  color: var(--green-text) !important;
  border-color: var(--green) !important;
}
:root[data-theme="bloomberg-pro"] .sig-pill.sig-BEARISH,
:root[data-theme="bloomberg-pro"] .sig-pill.sig-MILDLY_BEAR {
  background: var(--red-soft) !important;
  color: var(--red-text) !important;
  border-color: var(--red) !important;
}
:root[data-theme="bloomberg-pro"] .sig-pill.sig-NEUTRAL {
  background: rgba(255, 176, 0, 0.06) !important;
  color: var(--text-vdim) !important;
  border-color: rgba(255, 176, 0, 0.18) !important;
}

/* Buildup pills: keep semantic colors but tone bg into the terminal palette */
:root[data-theme="bloomberg-pro"] .bu-pill.bu-LONG_BUILD,
:root[data-theme="bloomberg-pro"] .bu-pill.bu-SHORT_COVER {
  background: rgba(0, 204, 102, 0.16) !important;
  color: var(--green-text) !important;
}
:root[data-theme="bloomberg-pro"] .bu-pill.bu-SHORT_BUILD,
:root[data-theme="bloomberg-pro"] .bu-pill.bu-LONG_UNWIND {
  background: rgba(255, 51, 51, 0.16) !important;
  color: var(--red-text) !important;
}
:root[data-theme="bloomberg-pro"] .bu-pill.bu-NEUTRAL {
  background: rgba(255, 176, 0, 0.06) !important;
  color: var(--text-vdim) !important;
}

/* Conviction tier badges (TRIPLE/DOUBLE/SINGLE on the volume confluence column,
   STRONG/WATCH on the top-picks card) → amber-toned */
:root[data-theme="bloomberg-pro"] .pick-card .pc-tier.tier-strong,
:root[data-theme="bloomberg-pro"] .vol-conf-TRIPLE {
  background: rgba(0, 204, 102, 0.18) !important;
  color: var(--green-text) !important;
}
:root[data-theme="bloomberg-pro"] .pick-card .pc-tier.tier-watch,
:root[data-theme="bloomberg-pro"] .vol-conf-DOUBLE {
  background: rgba(255, 176, 0, 0.18) !important;
  color: var(--accent) !important;
}
:root[data-theme="bloomberg-pro"] .vol-conf-SINGLE {
  background: rgba(255, 176, 0, 0.10) !important;
  color: var(--accent) !important;
}

/* Direction badges next to symbol (BUY CE / BUY PE) */
:root[data-theme="bloomberg-pro"] .dir-badge.dir-CE,
:root[data-theme="bloomberg-pro"] .pc-dir.dir-CE {
  background: rgba(0, 204, 102, 0.18) !important;
  color: var(--green-text) !important;
}
:root[data-theme="bloomberg-pro"] .dir-badge.dir-PE,
:root[data-theme="bloomberg-pro"] .pc-dir.dir-PE {
  background: rgba(255, 51, 51, 0.18) !important;
  color: var(--red-text) !important;
}

/* N50 + READY badges on symbol cell */
:root[data-theme="bloomberg-pro"] .n50-badge {
  background: rgba(255, 176, 0, 0.18) !important;
  color: var(--accent) !important;
  border-color: rgba(255, 176, 0, 0.35) !important;
}
:root[data-theme="bloomberg-pro"] .poised-badge {
  background: rgba(0, 204, 102, 0.18) !important;
  color: var(--green-text) !important;
}

/* Filter buttons (NIFTY 50, TRADE READY, [Filter: OFF] Overall OI) */
:root[data-theme="bloomberg-pro"] .btn-toggle.btn-n50,
:root[data-theme="bloomberg-pro"] .btn-toggle.btn-poised {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
:root[data-theme="bloomberg-pro"] .btn-toggle.btn-n50.active,
:root[data-theme="bloomberg-pro"] .btn-toggle.btn-poised.active {
  background: var(--accent-soft) !important;
  color: var(--text-bright) !important;
}

/* Watchlist + Hot footer buttons */
:root[data-theme="bloomberg-pro"] .footer-watch-btn.active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* Top navbar gradient — replace cyan→cyan with amber→cyan so the active
   pill reads as proper Bloomberg amber to cyan sweep */
:root[data-theme="bloomberg-pro"] .q-nav-links a.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--cyan) 100%) !important;
  color: #000 !important;
}
:root[data-theme="bloomberg-pro"] .q-nav-links a.active .nav-ico { color: #000 !important; }
:root[data-theme="bloomberg-pro"] .q-nav-brand .brand-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--cyan) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Top index ticker (NIFTY/BANKNIFTY/MIDCAP/VIX) — amber numbers */
:root[data-theme="bloomberg-pro"] .idx-val {
  color: var(--accent) !important;
}
:root[data-theme="bloomberg-pro"] .idx-vix .idx-val {
  color: var(--yellow) !important;
}
:root[data-theme="bloomberg-pro"] .idx-label {
  color: var(--text-dim) !important;
}

/* Fresh pill — keep the green/red semantic but use the bloomberg palette */
:root[data-theme="bloomberg-pro"] .fresh-pill.fresh   { color: var(--green-text) !important; background: rgba(0,204,102,0.10) !important; }
:root[data-theme="bloomberg-pro"] .fresh-pill.warm    { color: var(--accent) !important; background: var(--accent-soft) !important; }
:root[data-theme="bloomberg-pro"] .fresh-pill.stale   { color: var(--red-text) !important; background: rgba(255,51,51,0.10) !important; }
:root[data-theme="bloomberg-pro"] .fresh-pill.offline { color: var(--text-vdim) !important; background: rgba(140,96,0,0.10) !important; }

/* END: bloomberg-pro overrides */