/* =============================================================================
 * <copyright>
 * Copyright (c) 2026 3LC Inc. All rights reserved.
 *
 * All rights are reserved. Reproduction or transmission in whole or in part, in
 * any form or by any means, electronic, mechanical or otherwise, is prohibited
 * without the prior written permission of the copyright owner.
 * </copyright>
 * ============================================================================= */
/* ============================================================
   3LC Hub - Main Stylesheet
   Design system: tlc-ui  |  Accent #2a4a61  |  Golden #F5D8A0
   Icons: #2A4A61 (light) / #909090 (dark)
   Font: Inter 13px base
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   Light mode (default) — tlc-ui design system
   ============================================================ */
:root {
  /* Sidebar — TLC filter-panel style */
  --sidebar-bg:          #ffffff;
  --sidebar-border:      #c8d3de;
  --sidebar-hover:       #fef4e6;
  --sidebar-active-bg:   #F5D8A0;
  --sidebar-active-bar:  #F5D8A0;
  --sidebar-text:        #000000;
  --sidebar-text-active: #1a1a1a;
  --sidebar-width:       200px;
  --logo-banner-bg:      #1e3e58;

  /* Main canvas */
  --bg:                  #e8edf2;
  --bg-card:             #ffffff;
  --border:              #c8d3de;
  --border-light:        #d8e0e8;
  --border-input-focus:  #c0cdd6;

  /* Text — matches tlc-ui ColorFontNormal / ColorFontDisabled */
  --text:                #000000;
  --text-secondary:      #2a4a61;
  --text-muted:          #707070;

  /* 3LC accent — dark blue (buttons, links, active states, interactive elements) */
  --accent:              #2a4a61;
  --accent-hover:        #1e3e58;
  --accent-light:        rgba(42,74,97,0.08);
  --accent-text:         #2a4a61;

  /* Primary button — same as accent (single source of truth) */
  --btn-primary-bg:      var(--accent);
  --btn-primary-hover:   var(--accent-hover);
  --btn-primary-text:    #ffffff;

  /* Golden selection — matches tlc-ui --ds-accent-orange */
  --golden:              #F5D8A0;
  --golden-hover:        #F8E2B8;
  --golden-border:       #F5D8A0;
  --golden-border-hover: #e8d4a8;
  --golden-light:        #fef4e6;
  --golden-dim:          rgba(245,216,160,0.13);

  /* Icons — matches tlc-ui ColorIcon / ColorIconHover */
  --icon-color:          #2A4A61;
  --icon-hover:          #3A5A71;
  --icon-selected:       var(--accent);

  /* Status — vivid teal / muted terracotta palette, cohesive with accent navy */
  --success:             #1a8a9a;
  --success-bg:          #ecf7f9;
  --warning:             #d97706;
  --warning-bg:          #fffbeb;
  --error:               #b06048;
  --error-bg:            #faf0ed;

  /* Best/worst run indicators */
  --best-run:            #1a8a9a;
  --best-run-bg:         rgba(26,138,154,0.10);
  --worst-run:           #b06048;
  --worst-run-bg:        rgba(176,96,72,0.10);
  --best-run-label:      var(--accent);
  --info:                var(--accent);
  --info-bg:             var(--accent-light);

  /* Object type colours */
  --type-yolo:           #3b82f6;
  --type-coco:           #7c5cbf;
  --type-folder:         #3a7a9a;
  --type-csv:            #2a7a5a;
  --type-edited:         #5a7093;
  --type-filtered:       #4a6fa5;
  --type-joined:         #8b5094;
  --type-reduced:        #1a8a9a;

  /* Chrome */
  --radius:              6px;
  --radius-sm:           4px;
  --radius-lg:           10px;
  --shadow:              0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:           0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg:           0 10px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --topbar-height:       0px;
  --transition:          150ms ease;
  --transition-fast:     100ms ease;
  --transition-slow:     250ms ease;
  --topbar-bg:           #ffffff;
  --topbar-border:       #e0e8ef;

  /* Scrollbar — matches tlc-ui exactly */
  --scrollbar-thumb:     #c4c9ce;
  --scrollbar-hover:     #9ca3ab;

  /* Row selection — warm golden (matches tlc-ui --ds-accent-orange) */
  --row-selected-bg:     var(--golden);
  --row-hover-bg:        var(--golden-light);

  /* DAG canvas */
  --dag-bg:              #f5f8fa;

  /* Table header — tlc-ui blue-gray (lighter) */
  --th-bg:               #d4dce5;
  /* Stronger blue-gray accent band */
  --band-bg:             #b8c5d1;

  /* Code block */
  --code-bg:             #1e2638;
  --code-fg:             #cdd6f4;

  /* Chart palette — tlc-ui Rgb.staticCohesivePalette (Tableau 10) */
  --chart-1:             #4e79a7;   /* Steel Blue   */
  --chart-2:             #f28e2c;   /* Amber        */
  --chart-3:             #e15759;   /* Brick Red    */
  --chart-4:             #76b7b2;   /* Sage Teal    */
  --chart-5:             #59a14f;   /* Forest Green */
  --chart-6:             #edc949;   /* Marigold     */
  --chart-7:             #af7aa1;   /* Dusty Plum   */
  --chart-8:             #9c755f;   /* Umber        */
  --chart-9:             #ff9da7;   /* Blush        */
  --chart-10:            #bab0ab;   /* Warm Gray    */
  --chart-11:            #86bcb6;   /* Sea Glass    */
  --chart-12:            #8cd17d;   /* Leaf Green   */

  /* Metric colours — from Tableau 10 cohesive palette */
  --metric-precision:    #f28e2c;
  --metric-recall:       #4e79a7;
  --metric-f1:           #76b7b2;

  /* Histogram fallback bar */
  --histogram-bar:       var(--accent);
  --histogram-bg:        #e0e0e0;

  /* Slider — tlc-ui ColorSlider */
  --slider-fg:           #2a4a61;
  --slider-bg:           #a0b8c8;

  /* Severity (insight cards) */
  --severity-good:       #1a8a9a;
  --severity-info:       var(--accent);
  --severity-warning:    #d0880c;
  --severity-critical:   #b06048;

  /* Danger — muted terracotta for destructive actions */
  --danger:              #b06048;
  --danger-hover:        #964e3a;
  --danger-bg:           #faf0ed;
  --danger-text:         #8a3030;
  --danger-border:       #e0b0b0;

  /* Status badges */
  --status-completed-bg:   #e5f2f5;
  --status-completed-text: #1d4f5e;
  --status-running-bg:     #dbeafe;
  --status-running-text:   #1e40af;
  --status-failed-bg:      #fdf0f0;
  --status-failed-text:    #8a3030;
  --status-paused-bg:      #fef3c7;
  --status-paused-text:    #92400e;
  --status-cancelled-bg:   #f3f4f6;
  --status-cancelled-text: #374151;

  /* Chart text */
  --chart-text:          #4d6275;
}

/* ============================================================
   Dark mode overrides — tlc-ui design system
   ============================================================ */
[data-theme="dark"] {
  --bg:                  #161622;
  --bg-card:             #1e1e2e;
  --border:              #2e2e40;
  --border-light:        #383850;
  --border-input-focus:  #3d6a7a;

  /* Text — matches tlc-ui ColorFontNormal / ColorFontDisabled (dark) */
  --text:                #cdd6f4;
  --text-secondary:      #bac2de;
  --text-muted:          #a6adc8;

  /* Sidebar (dark mode) */
  --sidebar-bg:          #1a1a28;
  --sidebar-border:      #2e2e40;
  --sidebar-hover:       #1e2838;
  --sidebar-active-bg:   #2a2014;
  --sidebar-active-bar:  rgb(217,146,60);
  --sidebar-text:        #cdd6f4;
  --sidebar-text-active: #ffffff;
  --logo-banner-bg:      #161622;

  /* Accent — lighter dark blue for dark backgrounds */
  --accent:              #5a8aaa;
  --accent-hover:        #4a7a9a;
  --accent-light:        rgba(90,138,170,0.12);
  --accent-text:         #5a8aaa;

  /* Primary button — same as accent */
  --btn-primary-bg:      var(--accent);
  --btn-primary-hover:   var(--accent-hover);
  --btn-primary-text:    #ffffff;

  /* Selection — dark mode: opaque warm tints, visible against bg-card #0f1926 */
  --golden:              #2a2014;
  --golden-hover:        #332618;
  --golden-border:       rgb(217,146,60);
  --golden-border-hover: rgba(217,146,60,0.45);
  --golden-light:        #1a1610;
  --golden-dim:          #14120e;

  /* Icons — matches tlc-ui dark ColorIcon / ColorIconHover */
  --icon-color:          #a0b0c0;
  --icon-hover:          #ffffff;
  --icon-selected:       var(--accent);

  --success:             #40c4d8;
  --success-bg:          #0e2a30;
  --warning:             #f59e0b;
  --warning-bg:          #2a1d00;
  --error:               #d9917e;

  --best-run:            #40c4d8;
  --best-run-bg:         rgba(64,196,216,0.12);
  --worst-run:           #d9917e;
  --worst-run-bg:        rgba(217,145,126,0.12);
  --best-run-label:      var(--accent);
  --error-bg:            #2a1414;
  --info:                var(--accent);
  --info-bg:             var(--accent-light);

  --shadow:              0 1px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md:           0 4px 14px rgba(0,0,0,0.30), 0 1px 4px rgba(0,0,0,0.20);
  --shadow-lg:           0 10px 30px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.20);

  --topbar-bg:           #1e1e2e;
  --topbar-border:       #2e2e40;

  /* Scrollbar — matches tlc-ui dark exactly */
  --scrollbar-thumb:     #4a4e54;
  --scrollbar-hover:     #6b7078;

  /* Row selection — warm gold for selected items */
  --row-selected-bg:     var(--golden);
  --row-hover-bg:        var(--golden-light);

  --dag-bg:              #161622;
  --th-bg:               #2e2e40;
  --band-bg:             #1a1a28;

  --code-bg:             #141420;
  --code-fg:             #cdd6f4;

  /* Chart palette — lighter for dark backgrounds */
  --chart-1:             #6d99c1;
  --chart-2:             #f5a854;
  --chart-3:             #e87a7c;
  --chart-4:             #8eccc7;
  --chart-5:             #72b868;
  --chart-6:             #f2d56a;
  --chart-7:             #c494b8;
  --chart-8:             #b39080;
  --chart-9:             #ffb3bb;
  --chart-10:            #cbc3be;
  --chart-11:            #9dd0ca;
  --chart-12:            #a3df96;

  /* Metrics */
  --metric-precision:    #f5a854;
  --metric-recall:       #6d99c1;
  --metric-f1:           #8eccc7;

  --histogram-bar:       var(--accent);
  --histogram-bg:        #2a3d50;

  /* Slider — tlc-ui dark */
  --slider-fg:           #5a8a9d;
  --slider-bg:           #c0c8cc;

  /* Severity */
  --severity-good:       #40c4d8;
  --severity-info:       var(--accent);
  --severity-warning:    #fbbf24;
  --severity-critical:   #d9917e;

  /* Danger */
  --danger:              #d9917e;
  --danger-hover:        #c47c68;
  --danger-bg:           #2a1a14;
  --danger-text:         #e8b0b0;
  --danger-border:       #5a2020;

  /* Status badges */
  --status-completed-bg:   #0d2535;
  --status-completed-text: #5ab5cf;
  --status-running-bg:     #1e3a6e;
  --status-running-text:   #93c5fd;
  --status-failed-bg:      #2a1414;
  --status-failed-text:    #e8b0b0;
  --status-paused-bg:      #451a03;
  --status-paused-text:    #fcd34d;
  --status-cancelled-bg:   #172536;
  --status-cancelled-text: #9ab4c8;

  /* Chart text */
  --chart-text:          #7a9cb4;
}

/* Dark-mode sidebar shadow — matches tlc-ui dark panel shadow */
[data-theme="dark"] .sidebar {
  box-shadow: 2px 0 20px rgba(0,0,0,0.4);
}
[data-theme="dark"] .nav-section-label {
  color: var(--text-muted);
}
[data-theme="dark"] .nav-section-label::before {
  opacity: 0.2;
}

/* All dark theme sidebar shadows + nav labels */
[data-theme="dark"] .sidebar,
[data-theme="catppuccin-frappe"] .sidebar,
[data-theme="catppuccin-macchiato"] .sidebar,
[data-theme="catppuccin-mocha"] .sidebar,
[data-theme="nord-dark"] .sidebar,
[data-theme="gruvbox-dark"] .sidebar,
[data-theme="rosepine-dark"] .sidebar,
[data-theme="tokyonight-dark"] .sidebar {
  box-shadow: 2px 0 20px rgba(0,0,0,0.4);
}
/* All non-3LC themes: borderless cards, no outlines — 3 bg levels only */
[data-theme^="catppuccin"] .item-card,
[data-theme^="nord"] .item-card,
[data-theme^="gruvbox"] .item-card,
[data-theme^="rosepine"] .item-card,
[data-theme^="tokyonight"] .item-card { border-color: transparent; }
[data-theme^="catppuccin"] .item-card:hover,
[data-theme^="nord"] .item-card:hover,
[data-theme^="gruvbox"] .item-card:hover,
[data-theme^="rosepine"] .item-card:hover,
[data-theme^="tokyonight"] .item-card:hover { border-color: transparent; }
[data-theme^="catppuccin"] .row-selectable.selected,
[data-theme^="nord"] .row-selectable.selected,
[data-theme^="gruvbox"] .row-selectable.selected,
[data-theme^="rosepine"] .row-selectable.selected,
[data-theme^="tokyonight"] .row-selectable.selected { outline: none; }
[data-theme^="catppuccin"] .row-selectable:not(.selected):hover,
[data-theme^="nord"] .row-selectable:not(.selected):hover,
[data-theme^="gruvbox"] .row-selectable:not(.selected):hover,
[data-theme^="rosepine"] .row-selectable:not(.selected):hover,
[data-theme^="tokyonight"] .row-selectable:not(.selected):hover { outline: none; }

/* ── Catppuccin Latte (light) ─────────────────────────────── */
[data-theme="catppuccin-latte"] {
  /* Sidebar — Surface0 fill for active, no outline */
  --sidebar-bg:#eff1f5;--sidebar-border:#ccd0da;--sidebar-hover:#e6e9ef;
  --sidebar-active-bg:#ccd0da;--sidebar-active-bar:#7287fd;--sidebar-hover:#dce0e8;--sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --sidebar-text:#4c4f69;--sidebar-text-active:#4c4f69;--logo-banner-bg:#4c4f69;
  /* Canvas */
  --bg:#e6e9ef;--bg-card:#ffffff;--border:#bcc0cc;--border-light:#ccd0da;--border-input-focus:#1e66f5;
  /* Text */
  --text:#4c4f69;--text-secondary:#5c5f77;--text-muted:#6c6f85;
  /* Accent — Blue for text readability, Lavender for buttons/hover */
  --accent:#1e66f5;--accent-hover:#7287fd;--accent-light:rgba(30,102,245,0.08);--accent-text:#1e66f5;
  --btn-primary-bg:#7287fd;--btn-primary-hover:#8839ef;--btn-primary-text:#ffffff;
  /* Selection — Overlay2 @ 25% per style guide */
  --golden:rgba(124,127,147,0.25);--golden-hover:rgba(124,127,147,0.30);
  --golden-border:#7287fd;--golden-border-hover:#7287fd;
  --golden-light:rgba(124,127,147,0.12);--golden-dim:rgba(124,127,147,0.06);
  /* Icons */
  --icon-color:#6c6f85;--icon-hover:#1e66f5;--icon-selected:var(--accent);
  /* Status — Catppuccin semantic colors */
  --success:#40a02b;--success-bg:rgba(64,160,43,0.10);
  --warning:#df8e1d;--warning-bg:rgba(223,142,29,0.08);
  --error:#d20f39;--error-bg:rgba(210,15,57,0.08);
  /* Runs */
  --best-run:#40a02b;--best-run-bg:rgba(64,160,43,0.10);
  --worst-run:#d20f39;--worst-run-bg:rgba(210,15,57,0.08);
  --best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  /* Type badges */
  --type-yolo:#1e66f5;--type-coco:#8839ef;--type-folder:#209fb5;--type-csv:#40a02b;--type-edited:#7287fd;--type-filtered:#04a5e5;--type-joined:#ea76cb;--type-reduced:#179299;
  /* Chrome */
  --shadow:0 1px 3px rgba(76,79,105,0.06),0 1px 2px rgba(76,79,105,0.04);--shadow-md:0 4px 12px rgba(76,79,105,0.08),0 1px 3px rgba(76,79,105,0.06);--shadow-lg:0 10px 30px rgba(76,79,105,0.10),0 2px 8px rgba(76,79,105,0.06);
  --topbar-bg:#ffffff;--topbar-border:#dce0e8;--scrollbar-thumb:#acb0be;--scrollbar-hover:#7c7f93;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#ffffff;--th-bg:#ccd0da;--band-bg:#bcc0cc;--code-bg:#4c4f69;--code-fg:#eff1f5;
  /* Charts — full Catppuccin rainbow */
  --chart-1:#1e66f5;--chart-2:#fe640b;--chart-3:#d20f39;--chart-4:#179299;--chart-5:#40a02b;--chart-6:#df8e1d;--chart-7:#8839ef;--chart-8:#dc8a78;--chart-9:#ea76cb;--chart-10:#9ca0b0;--chart-11:#209fb5;--chart-12:#7287fd;
  --metric-precision:#fe640b;--metric-recall:#1e66f5;--metric-f1:#179299;
  --histogram-bar:var(--accent);--histogram-bg:#ccd0da;--slider-fg:#5c5f77;--slider-bg:#bcc0cc;
  /* Severity */
  --severity-good:#40a02b;--severity-info:#179299;--severity-warning:#df8e1d;--severity-critical:#d20f39;
  /* Danger */
  --danger:#d20f39;--danger-hover:#e64553;--danger-bg:rgba(210,15,57,0.08);--danger-text:#d20f39;--danger-border:rgba(210,15,57,0.25);
  /* Status badges */
  --status-completed-bg:rgba(64,160,43,0.12);--status-completed-text:#40a02b;
  --status-running-bg:rgba(30,102,245,0.12);--status-running-text:#1e66f5;
  --status-failed-bg:rgba(210,15,57,0.10);--status-failed-text:#d20f39;
  --status-paused-bg:rgba(223,142,29,0.10);--status-paused-text:#df8e1d;
  --status-cancelled-bg:#ccd0da;--status-cancelled-text:#6c6f85;
  --chart-text:#6c6f85;
  /* Badges */
  --badge-blue-bg:rgba(30,102,245,0.12);--badge-blue-text:#1e66f5;
  --badge-purple-bg:rgba(136,57,239,0.10);--badge-purple-text:#8839ef;
  --badge-green-bg:rgba(64,160,43,0.10);--badge-green-text:#40a02b;
  --badge-yellow-bg:rgba(223,142,29,0.10);--badge-yellow-text:#df8e1d;
  --badge-orange-bg:rgba(254,100,11,0.10);--badge-orange-text:#fe640b;
  --badge-red-bg:rgba(210,15,57,0.08);--badge-red-text:#d20f39;
  --badge-gray-bg:#ccd0da;--badge-gray-text:#5c5f77;
  --badge-cyan-bg:rgba(32,159,181,0.10);--badge-cyan-text:#209fb5;
  --badge-pink-bg:rgba(234,118,203,0.10);--badge-pink-text:#ea76cb;
  --badge-teal-bg:rgba(23,146,153,0.10);--badge-teal-text:#179299;
}

/* ── Catppuccin Frappé (medium-dark) ──────────────────────── */
[data-theme="catppuccin-frappe"] {
  --sidebar-bg:#292c3c;--sidebar-border:#414559;--sidebar-hover:#383c50;
  --sidebar-active-bg:#414559;--sidebar-active-bar:#babbf1;--sidebar-hover:#383c50;--sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --sidebar-text:#c6d0f5;--sidebar-text-active:#c6d0f5;--logo-banner-bg:#232634;
  --bg:#232634;--bg-card:#303446;--border:#51576d;--border-light:#414559;--border-input-focus:#babbf1;
  --text:#c6d0f5;--text-secondary:#b5bfe2;--text-muted:#a5adce;
  --accent:#8caaee;--accent-hover:#babbf1;--accent-light:rgba(140,170,238,0.12);--accent-text:#8caaee;
  --btn-primary-bg:var(--accent);--btn-primary-hover:var(--accent-hover);--btn-primary-text:#232634;
  --golden:rgba(98,104,128,0.25);--golden-hover:rgba(98,104,128,0.30);
  --golden-border:#babbf1;--golden-border-hover:#babbf1;
  --golden-light:rgba(98,104,128,0.12);--golden-dim:rgba(98,104,128,0.06);
  --icon-color:#b5bfe2;--icon-hover:#c6d0f5;--icon-selected:var(--accent);
  --success:#a6d189;--success-bg:rgba(166,209,137,0.12);
  --warning:#e5c890;--warning-bg:rgba(229,200,144,0.12);
  --error:#e78284;--error-bg:rgba(231,130,132,0.12);
  --best-run:#a6d189;--best-run-bg:rgba(166,209,137,0.12);
  --worst-run:#e78284;--worst-run-bg:rgba(231,130,132,0.12);
  --best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#8caaee;--type-coco:#ca9ee6;--type-folder:#85c1dc;--type-csv:#a6d189;--type-edited:#babbf1;--type-filtered:#99d1db;--type-joined:#f4b8e4;--type-reduced:#81c8be;
  --shadow:0 1px 4px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.15);--shadow-md:0 4px 14px rgba(0,0,0,0.30),0 1px 4px rgba(0,0,0,0.20);--shadow-lg:0 10px 30px rgba(0,0,0,0.35),0 2px 8px rgba(0,0,0,0.20);
  --topbar-bg:#303446;--topbar-border:#414559;--scrollbar-thumb:#51576d;--scrollbar-hover:#626880;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#232634;--th-bg:#414559;--band-bg:#292c3c;--code-bg:#232634;--code-fg:#c6d0f5;
  --chart-1:#8caaee;--chart-2:#ef9f76;--chart-3:#e78284;--chart-4:#81c8be;--chart-5:#a6d189;--chart-6:#e5c890;--chart-7:#ca9ee6;--chart-8:#babbf1;--chart-9:#f4b8e4;--chart-10:#626880;--chart-11:#85c1dc;--chart-12:#eebebe;
  --metric-precision:#ef9f76;--metric-recall:#8caaee;--metric-f1:#81c8be;
  --histogram-bar:var(--accent);--histogram-bg:#414559;--slider-fg:#8caaee;--slider-bg:#626880;
  --severity-good:#a6d189;--severity-info:#81c8be;--severity-warning:#e5c890;--severity-critical:#e78284;
  --danger:#e78284;--danger-hover:#ea999c;--danger-bg:rgba(231,130,132,0.12);--danger-text:#e78284;--danger-border:rgba(231,130,132,0.30);
  --status-completed-bg:rgba(166,209,137,0.15);--status-completed-text:#a6d189;
  --status-running-bg:rgba(140,170,238,0.15);--status-running-text:#8caaee;
  --status-failed-bg:rgba(231,130,132,0.15);--status-failed-text:#e78284;
  --status-paused-bg:rgba(229,200,144,0.15);--status-paused-text:#e5c890;
  --status-cancelled-bg:#414559;--status-cancelled-text:#a5adce;
  --chart-text:#a5adce;
  --badge-blue-bg:rgba(140,170,238,0.15);--badge-blue-text:#8caaee;
  --badge-purple-bg:rgba(202,158,230,0.15);--badge-purple-text:#ca9ee6;
  --badge-green-bg:rgba(166,209,137,0.15);--badge-green-text:#a6d189;
  --badge-yellow-bg:rgba(229,200,144,0.15);--badge-yellow-text:#e5c890;
  --badge-orange-bg:rgba(239,159,118,0.15);--badge-orange-text:#ef9f76;
  --badge-red-bg:rgba(231,130,132,0.15);--badge-red-text:#e78284;
  --badge-gray-bg:#414559;--badge-gray-text:#a5adce;
  --badge-cyan-bg:rgba(133,193,220,0.15);--badge-cyan-text:#85c1dc;
  --badge-pink-bg:rgba(244,184,228,0.15);--badge-pink-text:#f4b8e4;
  --badge-teal-bg:rgba(129,200,190,0.15);--badge-teal-text:#81c8be;
}

/* ── Catppuccin Macchiato (dark) ──────────────────────────── */
[data-theme="catppuccin-macchiato"] {
  --sidebar-bg:#1e2030;--sidebar-border:#363a4f;--sidebar-hover:#2f3245;
  --sidebar-active-bg:#363a4f;--sidebar-active-bar:#b7bdf8;--sidebar-hover:#2f3245;--sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --sidebar-text:#cad3f5;--sidebar-text-active:#cad3f5;--logo-banner-bg:#181926;
  --bg:#181926;--bg-card:#24273a;--border:#494d64;--border-light:#363a4f;--border-input-focus:#b7bdf8;
  --text:#cad3f5;--text-secondary:#b8c0e0;--text-muted:#a5adcb;
  --accent:#8aadf4;--accent-hover:#b7bdf8;--accent-light:rgba(138,173,244,0.12);--accent-text:#8aadf4;
  --btn-primary-bg:var(--accent);--btn-primary-hover:var(--accent-hover);--btn-primary-text:#181926;
  --golden:rgba(91,96,120,0.25);--golden-hover:rgba(91,96,120,0.30);
  --golden-border:#b7bdf8;--golden-border-hover:#b7bdf8;
  --golden-light:rgba(91,96,120,0.12);--golden-dim:rgba(91,96,120,0.06);
  --icon-color:#b8c0e0;--icon-hover:#cad3f5;--icon-selected:var(--accent);
  --success:#a6da95;--success-bg:rgba(166,218,149,0.12);
  --warning:#eed49f;--warning-bg:rgba(238,212,159,0.12);
  --error:#ed8796;--error-bg:rgba(237,135,150,0.12);
  --best-run:#a6da95;--best-run-bg:rgba(166,218,149,0.12);
  --worst-run:#ed8796;--worst-run-bg:rgba(237,135,150,0.12);
  --best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#8aadf4;--type-coco:#c6a0f6;--type-folder:#7dc4e4;--type-csv:#a6da95;--type-edited:#b7bdf8;--type-filtered:#91d7e3;--type-joined:#f5bde6;--type-reduced:#8bd5ca;
  --shadow:0 1px 4px rgba(0,0,0,0.30),0 1px 2px rgba(0,0,0,0.18);--shadow-md:0 4px 14px rgba(0,0,0,0.35),0 1px 4px rgba(0,0,0,0.22);--shadow-lg:0 10px 30px rgba(0,0,0,0.40),0 2px 8px rgba(0,0,0,0.22);
  --topbar-bg:#24273a;--topbar-border:#363a4f;--scrollbar-thumb:#494d64;--scrollbar-hover:#5b6078;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#181926;--th-bg:#363a4f;--band-bg:#1e2030;--code-bg:#181926;--code-fg:#cad3f5;
  --chart-1:#8aadf4;--chart-2:#f5a97f;--chart-3:#ed8796;--chart-4:#8bd5ca;--chart-5:#a6da95;--chart-6:#eed49f;--chart-7:#c6a0f6;--chart-8:#b7bdf8;--chart-9:#f5bde6;--chart-10:#5b6078;--chart-11:#7dc4e4;--chart-12:#f0c6c6;
  --metric-precision:#f5a97f;--metric-recall:#8aadf4;--metric-f1:#8bd5ca;
  --histogram-bar:var(--accent);--histogram-bg:#363a4f;--slider-fg:#8aadf4;--slider-bg:#5b6078;
  --severity-good:#a6da95;--severity-info:#8bd5ca;--severity-warning:#eed49f;--severity-critical:#ed8796;
  --danger:#ed8796;--danger-hover:#ee99a0;--danger-bg:rgba(237,135,150,0.12);--danger-text:#ed8796;--danger-border:rgba(237,135,150,0.30);
  --status-completed-bg:rgba(166,218,149,0.15);--status-completed-text:#a6da95;
  --status-running-bg:rgba(138,173,244,0.15);--status-running-text:#8aadf4;
  --status-failed-bg:rgba(237,135,150,0.15);--status-failed-text:#ed8796;
  --status-paused-bg:rgba(238,212,159,0.15);--status-paused-text:#eed49f;
  --status-cancelled-bg:#363a4f;--status-cancelled-text:#a5adcb;
  --chart-text:#a5adcb;
  --badge-blue-bg:rgba(138,173,244,0.15);--badge-blue-text:#8aadf4;
  --badge-purple-bg:rgba(198,160,246,0.15);--badge-purple-text:#c6a0f6;
  --badge-green-bg:rgba(166,218,149,0.15);--badge-green-text:#a6da95;
  --badge-yellow-bg:rgba(238,212,159,0.15);--badge-yellow-text:#eed49f;
  --badge-orange-bg:rgba(245,169,127,0.15);--badge-orange-text:#f5a97f;
  --badge-red-bg:rgba(237,135,150,0.15);--badge-red-text:#ed8796;
  --badge-gray-bg:#363a4f;--badge-gray-text:#a5adcb;
  --badge-cyan-bg:rgba(125,196,228,0.15);--badge-cyan-text:#7dc4e4;
  --badge-pink-bg:rgba(245,189,230,0.15);--badge-pink-text:#f5bde6;
  --badge-teal-bg:rgba(139,213,202,0.15);--badge-teal-text:#8bd5ca;
}

/* ── Catppuccin Mocha (darkest) ───────────────────────────── */
[data-theme="catppuccin-mocha"] {
  --sidebar-bg:#181825;--sidebar-border:#313244;--sidebar-hover:#28283a;
  --sidebar-active-bg:#313244;--sidebar-active-bar:#b4befe;--sidebar-hover:#28283a;--sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --sidebar-text:#cdd6f4;--sidebar-text-active:#cdd6f4;--logo-banner-bg:#11111b;
  --bg:#11111b;--bg-card:#1e1e2e;--border:#45475a;--border-light:#313244;--border-input-focus:#b4befe;
  --text:#cdd6f4;--text-secondary:#bac2de;--text-muted:#a6adc8;
  --accent:#89b4fa;--accent-hover:#b4befe;--accent-light:rgba(137,180,250,0.12);--accent-text:#89b4fa;
  --btn-primary-bg:var(--accent);--btn-primary-hover:var(--accent-hover);--btn-primary-text:#11111b;
  --golden:rgba(88,91,112,0.25);--golden-hover:rgba(88,91,112,0.30);
  --golden-border:#b4befe;--golden-border-hover:#b4befe;
  --golden-light:rgba(88,91,112,0.12);--golden-dim:rgba(88,91,112,0.06);
  --icon-color:#bac2de;--icon-hover:#cdd6f4;--icon-selected:var(--accent);
  --success:#a6e3a1;--success-bg:rgba(166,227,161,0.12);
  --warning:#f9e2af;--warning-bg:rgba(249,226,175,0.12);
  --error:#f38ba8;--error-bg:rgba(243,139,168,0.12);
  --best-run:#a6e3a1;--best-run-bg:rgba(166,227,161,0.12);
  --worst-run:#f38ba8;--worst-run-bg:rgba(243,139,168,0.12);
  --best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#89b4fa;--type-coco:#cba6f7;--type-folder:#74c7ec;--type-csv:#a6e3a1;--type-edited:#b4befe;--type-filtered:#89dceb;--type-joined:#f5c2e7;--type-reduced:#94e2d5;
  --shadow:0 1px 4px rgba(0,0,0,0.35),0 1px 2px rgba(0,0,0,0.20);--shadow-md:0 4px 14px rgba(0,0,0,0.40),0 1px 4px rgba(0,0,0,0.25);--shadow-lg:0 10px 30px rgba(0,0,0,0.45),0 2px 8px rgba(0,0,0,0.25);
  --topbar-bg:#1e1e2e;--topbar-border:#313244;--scrollbar-thumb:#45475a;--scrollbar-hover:#585b70;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#11111b;--th-bg:#313244;--band-bg:#181825;--code-bg:#11111b;--code-fg:#cdd6f4;
  --chart-1:#89b4fa;--chart-2:#fab387;--chart-3:#f38ba8;--chart-4:#94e2d5;--chart-5:#a6e3a1;--chart-6:#f9e2af;--chart-7:#cba6f7;--chart-8:#b4befe;--chart-9:#f5c2e7;--chart-10:#585b70;--chart-11:#74c7ec;--chart-12:#f2cdcd;
  --metric-precision:#fab387;--metric-recall:#89b4fa;--metric-f1:#94e2d5;
  --histogram-bar:var(--accent);--histogram-bg:#313244;--slider-fg:#89b4fa;--slider-bg:#585b70;
  --severity-good:#a6e3a1;--severity-info:#94e2d5;--severity-warning:#f9e2af;--severity-critical:#f38ba8;
  --danger:#f38ba8;--danger-hover:#eba0ac;--danger-bg:rgba(243,139,168,0.12);--danger-text:#f38ba8;--danger-border:rgba(243,139,168,0.30);
  --status-completed-bg:rgba(166,227,161,0.15);--status-completed-text:#a6e3a1;
  --status-running-bg:rgba(137,180,250,0.15);--status-running-text:#89b4fa;
  --status-failed-bg:rgba(243,139,168,0.15);--status-failed-text:#f38ba8;
  --status-paused-bg:rgba(249,226,175,0.15);--status-paused-text:#f9e2af;
  --status-cancelled-bg:#313244;--status-cancelled-text:#a6adc8;
  --chart-text:#a6adc8;
  --badge-blue-bg:rgba(137,180,250,0.15);--badge-blue-text:#89b4fa;
  --badge-purple-bg:rgba(203,166,247,0.15);--badge-purple-text:#cba6f7;
  --badge-green-bg:rgba(166,227,161,0.15);--badge-green-text:#a6e3a1;
  --badge-yellow-bg:rgba(249,226,175,0.15);--badge-yellow-text:#f9e2af;
  --badge-orange-bg:rgba(250,179,135,0.15);--badge-orange-text:#fab387;
  --badge-red-bg:rgba(243,139,168,0.15);--badge-red-text:#f38ba8;
  --badge-gray-bg:#313244;--badge-gray-text:#a6adc8;
  --badge-cyan-bg:rgba(116,199,236,0.15);--badge-cyan-text:#74c7ec;
  --badge-pink-bg:rgba(245,194,231,0.15);--badge-pink-text:#f5c2e7;
  --badge-teal-bg:rgba(148,226,213,0.15);--badge-teal-text:#94e2d5;
}

/* ============================================================
   Nord Dark
   ============================================================ */
[data-theme="nord-dark"] {
  --sidebar-bg:#2e3440;--sidebar-border:#3b4252;--sidebar-hover:#434c5e;--sidebar-active-bg:#4c566a;--sidebar-active-bar:#88c0d0;--sidebar-text:#d8dee9;--sidebar-text-active:#eceff4;--logo-banner-bg:#2e3440;
  --sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --bg:#2e3440;--bg-card:#3b4252;--border:#434c5e;--border-light:#4c566a;--border-input-focus:#81a1c1;
  --text:#eceff4;--text-secondary:#d8dee9;--text-muted:#909aab;
  --accent:#88c0d0;--accent-hover:#8fbcbb;--accent-light:rgba(136,192,208,0.12);--accent-text:#88c0d0;
  --btn-primary-bg:#5e81ac;--btn-primary-hover:#81a1c1;--btn-primary-text:#eceff4;
  --golden:#434c5e;--golden-hover:#4c566a;--golden-border:#88c0d0;--golden-border-hover:rgba(136,192,208,0.45);--golden-light:#3b4252;--golden-dim:#353c4a;
  --icon-color:#d8dee9;--icon-hover:#eceff4;--icon-selected:var(--accent);
  --success:#a3be8c;--success-bg:rgba(163,190,140,0.12);--warning:#ebcb8b;--warning-bg:rgba(235,203,139,0.12);--error:#bf616a;--error-bg:rgba(191,97,106,0.12);
  --best-run:#a3be8c;--best-run-bg:rgba(163,190,140,0.10);--worst-run:#bf616a;--worst-run-bg:rgba(191,97,106,0.10);--best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#81a1c1;--type-coco:#b48ead;--type-folder:#8fbcbb;--type-csv:#a3be8c;--type-edited:#5e81ac;--type-filtered:#81a1c1;--type-joined:#b48ead;--type-reduced:#88c0d0;
  --shadow:0 1px 4px rgba(0,0,0,0.30),0 1px 2px rgba(0,0,0,0.20);--shadow-md:0 4px 14px rgba(0,0,0,0.35),0 1px 4px rgba(0,0,0,0.25);--shadow-lg:0 10px 30px rgba(0,0,0,0.40),0 2px 8px rgba(0,0,0,0.25);
  --topbar-bg:#3b4252;--topbar-border:#434c5e;--scrollbar-thumb:#4c566a;--scrollbar-hover:#5c6a7e;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#2e3440;--th-bg:#434c5e;--band-bg:#3b4252;--code-bg:#2e3440;--code-fg:#d8dee9;
  --chart-1:#81a1c1;--chart-2:#d08770;--chart-3:#bf616a;--chart-4:#8fbcbb;--chart-5:#a3be8c;--chart-6:#ebcb8b;--chart-7:#b48ead;--chart-8:#d08770;--chart-9:#bf616a;--chart-10:#4c566a;--chart-11:#88c0d0;--chart-12:#a3be8c;
  --chart-text:#d8dee9;
  --metric-precision:#d08770;--metric-recall:#81a1c1;--metric-f1:#8fbcbb;
  --histogram-bar:var(--accent);--histogram-bg:#434c5e;
  --slider-fg:#88c0d0;--slider-bg:#4c566a;
  --severity-good:#a3be8c;--severity-info:var(--accent);--severity-warning:#ebcb8b;--severity-critical:#bf616a;
  --danger:#bf616a;--danger-hover:#a5525a;--danger-bg:rgba(191,97,106,0.15);--danger-text:#d8878e;--danger-border:#6b3338;
  --status-completed-bg:rgba(163,190,140,0.15);--status-completed-text:#a3be8c;--status-running-bg:rgba(129,161,193,0.15);--status-running-text:#81a1c1;--status-failed-bg:rgba(191,97,106,0.15);--status-failed-text:#d8878e;--status-paused-bg:rgba(235,203,139,0.15);--status-paused-text:#ebcb8b;--status-cancelled-bg:rgba(76,86,106,0.25);--status-cancelled-text:#909aab;
  --badge-blue-bg:rgba(129,161,193,0.18);--badge-blue-text:#81a1c1;--badge-purple-bg:rgba(180,142,173,0.18);--badge-purple-text:#b48ead;--badge-green-bg:rgba(163,190,140,0.18);--badge-green-text:#a3be8c;--badge-yellow-bg:rgba(235,203,139,0.18);--badge-yellow-text:#ebcb8b;--badge-orange-bg:rgba(208,135,112,0.18);--badge-orange-text:#d08770;--badge-red-bg:rgba(191,97,106,0.18);--badge-red-text:#d8878e;--badge-gray-bg:rgba(76,86,106,0.30);--badge-gray-text:#909aab;--badge-cyan-bg:rgba(136,192,208,0.18);--badge-cyan-text:#88c0d0;--badge-pink-bg:rgba(180,142,173,0.18);--badge-pink-text:#b48ead;--badge-teal-bg:rgba(143,188,187,0.18);--badge-teal-text:#8fbcbb;
}

/* ============================================================
   Nord Light
   ============================================================ */
[data-theme="nord-light"] {
  --sidebar-bg:#e5e9f0;--sidebar-border:#d8dee9;--sidebar-hover:#dce1e9;--sidebar-active-bg:#d8dee9;--sidebar-active-bar:#5e81ac;--sidebar-text:#2e3440;--sidebar-text-active:#2e3440;--logo-banner-bg:#3b4252;
  --sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --bg:#eceff4;--bg-card:#ffffff;--border:#d8dee9;--border-light:#e5e9f0;--border-input-focus:#81a1c1;
  --text:#2e3440;--text-secondary:#3b4252;--text-muted:#4c566a;
  --accent:#5e81ac;--accent-hover:#4e71a0;--accent-light:rgba(94,129,172,0.08);--accent-text:#5e81ac;
  --btn-primary-bg:#5e81ac;--btn-primary-hover:#4e71a0;--btn-primary-text:#eceff4;
  --golden:#d8dee9;--golden-hover:#e5e9f0;--golden-border:#5e81ac;--golden-border-hover:#81a1c1;--golden-light:#eef1f5;--golden-dim:rgba(94,129,172,0.06);
  --icon-color:#4c566a;--icon-hover:#2e3440;--icon-selected:var(--accent);
  --success:#a3be8c;--success-bg:#eaf3e5;--warning:#d08770;--warning-bg:#fdf1ec;--error:#bf616a;--error-bg:#f9e8e9;
  --best-run:#689d55;--best-run-bg:rgba(163,190,140,0.12);--worst-run:#bf616a;--worst-run-bg:rgba(191,97,106,0.10);--best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#5e81ac;--type-coco:#b48ead;--type-folder:#8fbcbb;--type-csv:#a3be8c;--type-edited:#4c566a;--type-filtered:#5e81ac;--type-joined:#b48ead;--type-reduced:#88c0d0;
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 12px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.06);--shadow-lg:0 10px 30px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.06);
  --topbar-bg:#ffffff;--topbar-border:#d8dee9;--scrollbar-thumb:#c4c9ce;--scrollbar-hover:#a0a8b4;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#ffffff;--th-bg:#d8dee9;--band-bg:#c8d1dc;--code-bg:#2e3440;--code-fg:#d8dee9;
  --chart-1:#5e81ac;--chart-2:#d08770;--chart-3:#bf616a;--chart-4:#8fbcbb;--chart-5:#a3be8c;--chart-6:#ebcb8b;--chart-7:#b48ead;--chart-8:#d08770;--chart-9:#bf616a;--chart-10:#4c566a;--chart-11:#88c0d0;--chart-12:#a3be8c;
  --chart-text:#3b4252;
  --metric-precision:#d08770;--metric-recall:#5e81ac;--metric-f1:#8fbcbb;
  --histogram-bar:var(--accent);--histogram-bg:#d8dee9;
  --slider-fg:#5e81ac;--slider-bg:#b8c5d4;
  --severity-good:#689d55;--severity-info:var(--accent);--severity-warning:#c47a60;--severity-critical:#bf616a;
  --danger:#bf616a;--danger-hover:#a5525a;--danger-bg:#f9e8e9;--danger-text:#8b3a40;--danger-border:#e0b0b0;
  --status-completed-bg:#eaf3e5;--status-completed-text:#4a7340;--status-running-bg:#dfe8f7;--status-running-text:#3d6296;--status-failed-bg:#f9e8e9;--status-failed-text:#8b3a40;--status-paused-bg:#fdf1ec;--status-paused-text:#8a5b4e;--status-cancelled-bg:#e8ecf0;--status-cancelled-text:#4c566a;
  --badge-blue-bg:#dfe8f7;--badge-blue-text:#3d6296;--badge-purple-bg:#f0e4f0;--badge-purple-text:#8e5f87;--badge-green-bg:#eaf3e5;--badge-green-text:#4a7340;--badge-yellow-bg:#fcf3e0;--badge-yellow-text:#8a6a20;--badge-orange-bg:#fdf1ec;--badge-orange-text:#8a5b4e;--badge-red-bg:#f9e8e9;--badge-red-text:#8b3a40;--badge-gray-bg:#e8ecf0;--badge-gray-text:#4c566a;--badge-cyan-bg:#e0f2f5;--badge-cyan-text:#346a7a;--badge-pink-bg:#f5e4ef;--badge-pink-text:#8e4a70;--badge-teal-bg:#e0f0ef;--badge-teal-text:#3a7a76;
}

/* ============================================================
   Gruvbox Dark
   ============================================================ */
[data-theme="gruvbox-dark"] {
  --sidebar-bg:#282828;--sidebar-border:#3c3836;--sidebar-hover:#3c3836;--sidebar-active-bg:#504945;--sidebar-active-bar:#7daea3;--sidebar-text:#d4be98;--sidebar-text-active:#e2d3b2;--logo-banner-bg:#1d2021;
  --sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --bg:#282828;--bg-card:#32302f;--border:#3c3836;--border-light:#504945;--border-input-focus:#7daea3;
  --text:#d4be98;--text-secondary:#a89984;--text-muted:#928374;
  --accent:#7daea3;--accent-hover:#89b482;--accent-light:rgba(125,174,163,0.12);--accent-text:#7daea3;
  --btn-primary-bg:#7daea3;--btn-primary-hover:#6d9e93;--btn-primary-text:#282828;
  --golden:#3c3836;--golden-hover:#504945;--golden-border:#7daea3;--golden-border-hover:rgba(125,174,163,0.45);--golden-light:#32302f;--golden-dim:#2c2a28;
  --icon-color:#a89984;--icon-hover:#d4be98;--icon-selected:var(--accent);
  --success:#a9b665;--success-bg:rgba(169,182,101,0.12);--warning:#d8a657;--warning-bg:rgba(216,166,87,0.12);--error:#ea6962;--error-bg:rgba(234,105,98,0.12);
  --best-run:#a9b665;--best-run-bg:rgba(169,182,101,0.10);--worst-run:#ea6962;--worst-run-bg:rgba(234,105,98,0.10);--best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#7daea3;--type-coco:#d3869b;--type-folder:#89b482;--type-csv:#a9b665;--type-edited:#7c6f64;--type-filtered:#7daea3;--type-joined:#d3869b;--type-reduced:#89b482;
  --shadow:0 1px 4px rgba(0,0,0,0.30),0 1px 2px rgba(0,0,0,0.20);--shadow-md:0 4px 14px rgba(0,0,0,0.35),0 1px 4px rgba(0,0,0,0.25);--shadow-lg:0 10px 30px rgba(0,0,0,0.40),0 2px 8px rgba(0,0,0,0.25);
  --topbar-bg:#32302f;--topbar-border:#3c3836;--scrollbar-thumb:#504945;--scrollbar-hover:#665c54;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#1d2021;--th-bg:#3c3836;--band-bg:#32302f;--code-bg:#1d2021;--code-fg:#d4be98;
  --chart-1:#7daea3;--chart-2:#e78a4e;--chart-3:#ea6962;--chart-4:#89b482;--chart-5:#a9b665;--chart-6:#d8a657;--chart-7:#d3869b;--chart-8:#e78a4e;--chart-9:#ea6962;--chart-10:#7c6f64;--chart-11:#7daea3;--chart-12:#a9b665;
  --chart-text:#a89984;
  --metric-precision:#e78a4e;--metric-recall:#7daea3;--metric-f1:#89b482;
  --histogram-bar:var(--accent);--histogram-bg:#3c3836;
  --slider-fg:#7daea3;--slider-bg:#504945;
  --severity-good:#a9b665;--severity-info:var(--accent);--severity-warning:#d8a657;--severity-critical:#ea6962;
  --danger:#ea6962;--danger-hover:#d45a52;--danger-bg:rgba(234,105,98,0.15);--danger-text:#f08880;--danger-border:#6b3030;
  --status-completed-bg:rgba(169,182,101,0.15);--status-completed-text:#a9b665;--status-running-bg:rgba(125,174,163,0.15);--status-running-text:#7daea3;--status-failed-bg:rgba(234,105,98,0.15);--status-failed-text:#f08880;--status-paused-bg:rgba(216,166,87,0.15);--status-paused-text:#d8a657;--status-cancelled-bg:rgba(124,111,100,0.25);--status-cancelled-text:#928374;
  --badge-blue-bg:rgba(125,174,163,0.18);--badge-blue-text:#7daea3;--badge-purple-bg:rgba(211,134,155,0.18);--badge-purple-text:#d3869b;--badge-green-bg:rgba(169,182,101,0.18);--badge-green-text:#a9b665;--badge-yellow-bg:rgba(216,166,87,0.18);--badge-yellow-text:#d8a657;--badge-orange-bg:rgba(231,138,78,0.18);--badge-orange-text:#e78a4e;--badge-red-bg:rgba(234,105,98,0.18);--badge-red-text:#f08880;--badge-gray-bg:rgba(124,111,100,0.30);--badge-gray-text:#928374;--badge-cyan-bg:rgba(137,180,130,0.18);--badge-cyan-text:#89b482;--badge-pink-bg:rgba(211,134,155,0.18);--badge-pink-text:#d3869b;--badge-teal-bg:rgba(125,174,163,0.18);--badge-teal-text:#7daea3;
}

/* ============================================================
   Gruvbox Light
   ============================================================ */
[data-theme="gruvbox-light"] {
  --sidebar-bg:#f4e8be;--sidebar-border:#e0d0a0;--sidebar-hover:#efe0b4;--sidebar-active-bg:#e8d8b0;--sidebar-active-bar:#45707a;--sidebar-text:#654735;--sidebar-text-active:#4f3829;--logo-banner-bg:#654735;
  --sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --bg:#f9f0c8;--bg-card:#fbf1c7;--border:#e0d0a0;--border-light:#e8dbb0;--border-input-focus:#45707a;
  --text:#654735;--text-secondary:#4f3829;--text-muted:#7c6f64;
  --accent:#45707a;--accent-hover:#3a6068;--accent-light:rgba(69,112,122,0.08);--accent-text:#45707a;
  --btn-primary-bg:#45707a;--btn-primary-hover:#3a6068;--btn-primary-text:#fbf1c7;
  --golden:#e8d8b0;--golden-hover:#f0e0b8;--golden-border:#45707a;--golden-border-hover:#7daea3;--golden-light:#f4ecc8;--golden-dim:rgba(69,112,122,0.06);
  --icon-color:#7c6f64;--icon-hover:#4f3829;--icon-selected:var(--accent);
  --success:#6c782e;--success-bg:#eef2de;--warning:#b47109;--warning-bg:#fdf3e0;--error:#c14a4a;--error-bg:#fae8e8;
  --best-run:#6c782e;--best-run-bg:rgba(108,120,46,0.12);--worst-run:#c14a4a;--worst-run-bg:rgba(193,74,74,0.10);--best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#45707a;--type-coco:#945e80;--type-folder:#4c7a5d;--type-csv:#6c782e;--type-edited:#7c6f64;--type-filtered:#45707a;--type-joined:#945e80;--type-reduced:#4c7a5d;
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 12px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.06);--shadow-lg:0 10px 30px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.06);
  --topbar-bg:#fbf1c7;--topbar-border:#e0d0a0;--scrollbar-thumb:#c8b890;--scrollbar-hover:#a89870;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#fbf1c7;--th-bg:#e0d0a0;--band-bg:#d0c098;--code-bg:#282828;--code-fg:#d4be98;
  --chart-1:#45707a;--chart-2:#c35e0a;--chart-3:#c14a4a;--chart-4:#4c7a5d;--chart-5:#6c782e;--chart-6:#b47109;--chart-7:#945e80;--chart-8:#c35e0a;--chart-9:#c14a4a;--chart-10:#7c6f64;--chart-11:#45707a;--chart-12:#6c782e;
  --chart-text:#4f3829;
  --metric-precision:#c35e0a;--metric-recall:#45707a;--metric-f1:#4c7a5d;
  --histogram-bar:var(--accent);--histogram-bg:#e0d0a0;
  --slider-fg:#45707a;--slider-bg:#c0b090;
  --severity-good:#6c782e;--severity-info:var(--accent);--severity-warning:#a06508;--severity-critical:#c14a4a;
  --danger:#c14a4a;--danger-hover:#a83a3a;--danger-bg:#fae8e8;--danger-text:#8a2a2a;--danger-border:#e0b0b0;
  --status-completed-bg:#eef2de;--status-completed-text:#4a5a20;--status-running-bg:#dfeef0;--status-running-text:#2a5a66;--status-failed-bg:#fae8e8;--status-failed-text:#8a2a2a;--status-paused-bg:#fdf3e0;--status-paused-text:#7a5500;--status-cancelled-bg:#ede0c0;--status-cancelled-text:#7c6f64;
  --badge-blue-bg:#dfeef0;--badge-blue-text:#2a5a66;--badge-purple-bg:#f0e0ec;--badge-purple-text:#7a4a6a;--badge-green-bg:#eef2de;--badge-green-text:#4a5a20;--badge-yellow-bg:#fdf3e0;--badge-yellow-text:#7a5500;--badge-orange-bg:#fceadc;--badge-orange-text:#8a4a08;--badge-red-bg:#fae8e8;--badge-red-text:#8a2a2a;--badge-gray-bg:#ede0c0;--badge-gray-text:#7c6f64;--badge-cyan-bg:#dff0ea;--badge-cyan-text:#3a6a4a;--badge-pink-bg:#f5e0ec;--badge-pink-text:#7a4060;--badge-teal-bg:#dff0ea;--badge-teal-text:#3a6a4a;
}

/* ============================================================
   Rose Pine Dark (Main)
   ============================================================ */
[data-theme="rosepine-dark"] {
  --sidebar-bg:#191724;--sidebar-border:#26233a;--sidebar-hover:#232030;--sidebar-active-bg:#26233a;--sidebar-active-bar:#c4a7e7;--sidebar-text:#e0def4;--sidebar-text-active:#e0def4;--logo-banner-bg:#131120;
  --sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --bg:#191724;--bg-card:#1f1d2e;--border:#26233a;--border-light:#393552;--border-input-focus:#c4a7e7;
  --text:#e0def4;--text-secondary:#908caa;--text-muted:#6e6a86;
  --accent:#c4a7e7;--accent-hover:#d4baf0;--accent-light:rgba(196,167,231,0.12);--accent-text:#c4a7e7;
  --btn-primary-bg:#c4a7e7;--btn-primary-hover:#b098d8;--btn-primary-text:#191724;
  --golden:#26233a;--golden-hover:#393552;--golden-border:#c4a7e7;--golden-border-hover:rgba(196,167,231,0.45);--golden-light:#1f1d2e;--golden-dim:#1b1928;
  --icon-color:#908caa;--icon-hover:#e0def4;--icon-selected:var(--accent);
  --success:#9ccfd8;--success-bg:rgba(156,207,216,0.12);--warning:#f6c177;--warning-bg:rgba(246,193,119,0.12);--error:#eb6f92;--error-bg:rgba(235,111,146,0.12);
  --best-run:#9ccfd8;--best-run-bg:rgba(156,207,216,0.10);--worst-run:#eb6f92;--worst-run-bg:rgba(235,111,146,0.10);--best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#31748f;--type-coco:#c4a7e7;--type-folder:#9ccfd8;--type-csv:#9ccfd8;--type-edited:#6e6a86;--type-filtered:#31748f;--type-joined:#c4a7e7;--type-reduced:#ebbcba;
  --shadow:0 1px 4px rgba(0,0,0,0.30),0 1px 2px rgba(0,0,0,0.20);--shadow-md:0 4px 14px rgba(0,0,0,0.35),0 1px 4px rgba(0,0,0,0.25);--shadow-lg:0 10px 30px rgba(0,0,0,0.40),0 2px 8px rgba(0,0,0,0.25);
  --topbar-bg:#1f1d2e;--topbar-border:#26233a;--scrollbar-thumb:#393552;--scrollbar-hover:#524d6a;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#191724;--th-bg:#26233a;--band-bg:#1f1d2e;--code-bg:#131120;--code-fg:#e0def4;
  --chart-1:#31748f;--chart-2:#f6c177;--chart-3:#eb6f92;--chart-4:#9ccfd8;--chart-5:#9ccfd8;--chart-6:#f6c177;--chart-7:#c4a7e7;--chart-8:#ebbcba;--chart-9:#eb6f92;--chart-10:#6e6a86;--chart-11:#31748f;--chart-12:#9ccfd8;
  --chart-text:#908caa;
  --metric-precision:#f6c177;--metric-recall:#31748f;--metric-f1:#9ccfd8;
  --histogram-bar:var(--accent);--histogram-bg:#26233a;
  --slider-fg:#c4a7e7;--slider-bg:#393552;
  --severity-good:#9ccfd8;--severity-info:var(--accent);--severity-warning:#f6c177;--severity-critical:#eb6f92;
  --danger:#eb6f92;--danger-hover:#d45e80;--danger-bg:rgba(235,111,146,0.15);--danger-text:#f0a0b4;--danger-border:#6a2840;
  --status-completed-bg:rgba(156,207,216,0.15);--status-completed-text:#9ccfd8;--status-running-bg:rgba(49,116,143,0.20);--status-running-text:#5aa4c0;--status-failed-bg:rgba(235,111,146,0.15);--status-failed-text:#f0a0b4;--status-paused-bg:rgba(246,193,119,0.15);--status-paused-text:#f6c177;--status-cancelled-bg:rgba(110,106,134,0.25);--status-cancelled-text:#807c98;
  --badge-blue-bg:rgba(49,116,143,0.20);--badge-blue-text:#5aa4c0;--badge-purple-bg:rgba(196,167,231,0.18);--badge-purple-text:#c4a7e7;--badge-green-bg:rgba(156,207,216,0.18);--badge-green-text:#9ccfd8;--badge-yellow-bg:rgba(246,193,119,0.18);--badge-yellow-text:#f6c177;--badge-orange-bg:rgba(246,193,119,0.18);--badge-orange-text:#f6c177;--badge-red-bg:rgba(235,111,146,0.18);--badge-red-text:#f0a0b4;--badge-gray-bg:rgba(110,106,134,0.30);--badge-gray-text:#807c98;--badge-cyan-bg:rgba(156,207,216,0.18);--badge-cyan-text:#9ccfd8;--badge-pink-bg:rgba(235,188,186,0.18);--badge-pink-text:#ebbcba;--badge-teal-bg:rgba(156,207,216,0.18);--badge-teal-text:#9ccfd8;
}

/* ============================================================
   Rose Pine Light (Dawn)
   ============================================================ */
[data-theme="rosepine-light"] {
  --sidebar-bg:#fffaf3;--sidebar-border:#f2e9e1;--sidebar-hover:#f8f2ea;--sidebar-active-bg:#f2e9e1;--sidebar-active-bar:#907aa9;--sidebar-text:#575279;--sidebar-text-active:#464261;--logo-banner-bg:#575279;
  --sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --bg:#faf4ed;--bg-card:#fffaf3;--border:#f2e9e1;--border-light:#f5ede5;--border-input-focus:#907aa9;
  --text:#575279;--text-secondary:#797593;--text-muted:#9893a5;
  --accent:#907aa9;--accent-hover:#806a99;--accent-light:rgba(144,122,169,0.08);--accent-text:#907aa9;
  --btn-primary-bg:#907aa9;--btn-primary-hover:#806a99;--btn-primary-text:#faf4ed;
  --golden:#f2e9e1;--golden-hover:#f8f0e8;--golden-border:#907aa9;--golden-border-hover:#b09cc0;--golden-light:#f8f2ea;--golden-dim:rgba(144,122,169,0.06);
  --icon-color:#797593;--icon-hover:#464261;--icon-selected:var(--accent);
  --success:#56949f;--success-bg:#e6f2f4;--warning:#ea9d34;--warning-bg:#fcf0dc;--error:#b4637a;--error-bg:#f9e6ec;
  --best-run:#56949f;--best-run-bg:rgba(86,148,159,0.12);--worst-run:#b4637a;--worst-run-bg:rgba(180,99,122,0.10);--best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#286983;--type-coco:#907aa9;--type-folder:#56949f;--type-csv:#56949f;--type-edited:#9893a5;--type-filtered:#286983;--type-joined:#907aa9;--type-reduced:#d7827e;
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 12px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.06);--shadow-lg:0 10px 30px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.06);
  --topbar-bg:#fffaf3;--topbar-border:#f2e9e1;--scrollbar-thumb:#d4ccc4;--scrollbar-hover:#b4aca4;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#fffaf3;--th-bg:#f2e9e1;--band-bg:#e4dbd2;--code-bg:#191724;--code-fg:#e0def4;
  --chart-1:#286983;--chart-2:#ea9d34;--chart-3:#b4637a;--chart-4:#56949f;--chart-5:#56949f;--chart-6:#ea9d34;--chart-7:#907aa9;--chart-8:#d7827e;--chart-9:#b4637a;--chart-10:#9893a5;--chart-11:#286983;--chart-12:#56949f;
  --chart-text:#797593;
  --metric-precision:#ea9d34;--metric-recall:#286983;--metric-f1:#56949f;
  --histogram-bar:var(--accent);--histogram-bg:#e8e0d8;
  --slider-fg:#907aa9;--slider-bg:#c8c0b8;
  --severity-good:#56949f;--severity-info:var(--accent);--severity-warning:#d08a28;--severity-critical:#b4637a;
  --danger:#b4637a;--danger-hover:#a0556a;--danger-bg:#f9e6ec;--danger-text:#8a3a52;--danger-border:#e0b0c0;
  --status-completed-bg:#e6f2f4;--status-completed-text:#20707c;--status-running-bg:#dfe8f2;--status-running-text:#1a5068;--status-failed-bg:#f9e6ec;--status-failed-text:#8a3a52;--status-paused-bg:#fcf0dc;--status-paused-text:#8a7020;--status-cancelled-bg:#ede6de;--status-cancelled-text:#797593;
  --badge-blue-bg:#dfe8f2;--badge-blue-text:#1a5068;--badge-purple-bg:#ece4f2;--badge-purple-text:#6a5a82;--badge-green-bg:#e6f2f4;--badge-green-text:#20707c;--badge-yellow-bg:#fcf0dc;--badge-yellow-text:#8a7020;--badge-orange-bg:#fceadc;--badge-orange-text:#8a6020;--badge-red-bg:#f9e6ec;--badge-red-text:#8a3a52;--badge-gray-bg:#ede6de;--badge-gray-text:#797593;--badge-cyan-bg:#e0f0f2;--badge-cyan-text:#1a5a68;--badge-pink-bg:#f8e0ea;--badge-pink-text:#8a3060;--badge-teal-bg:#e0f0ee;--badge-teal-text:#1a6a5a;
}

/* ============================================================
   Tokyo Night Dark (Night)
   ============================================================ */
[data-theme="tokyonight-dark"] {
  --sidebar-bg:#1a1b26;--sidebar-border:#1f2335;--sidebar-hover:#252840;--sidebar-active-bg:#283457;--sidebar-active-bar:#7aa2f7;--sidebar-text:#a9b1d6;--sidebar-text-active:#c0caf5;--logo-banner-bg:#13141e;
  --sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --bg:#1a1b26;--bg-card:#1f2335;--border:#283457;--border-light:#3b4261;--border-input-focus:#7aa2f7;
  --text:#c0caf5;--text-secondary:#a9b1d6;--text-muted:#565f89;
  --accent:#7aa2f7;--accent-hover:#89aff8;--accent-light:rgba(122,162,247,0.12);--accent-text:#7aa2f7;
  --btn-primary-bg:#7aa2f7;--btn-primary-hover:#6992e8;--btn-primary-text:#1a1b26;
  --golden:#283457;--golden-hover:#3b4261;--golden-border:#7aa2f7;--golden-border-hover:rgba(122,162,247,0.45);--golden-light:#1f2335;--golden-dim:#1c1e2e;
  --icon-color:#a9b1d6;--icon-hover:#c0caf5;--icon-selected:var(--accent);
  --success:#9ece6a;--success-bg:rgba(158,206,106,0.12);--warning:#e0af68;--warning-bg:rgba(224,175,104,0.12);--error:#f7768e;--error-bg:rgba(247,118,142,0.12);
  --best-run:#9ece6a;--best-run-bg:rgba(158,206,106,0.10);--worst-run:#f7768e;--worst-run-bg:rgba(247,118,142,0.10);--best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#7aa2f7;--type-coco:#bb9af7;--type-folder:#9ece6a;--type-csv:#9ece6a;--type-edited:#565f89;--type-filtered:#2ac3de;--type-joined:#bb9af7;--type-reduced:#7aa2f7;
  --shadow:0 1px 4px rgba(0,0,0,0.30),0 1px 2px rgba(0,0,0,0.20);--shadow-md:0 4px 14px rgba(0,0,0,0.35),0 1px 4px rgba(0,0,0,0.25);--shadow-lg:0 10px 30px rgba(0,0,0,0.40),0 2px 8px rgba(0,0,0,0.25);
  --topbar-bg:#1f2335;--topbar-border:#283457;--scrollbar-thumb:#3b4261;--scrollbar-hover:#565f89;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#1a1b26;--th-bg:#283457;--band-bg:#1f2335;--code-bg:#13141e;--code-fg:#c0caf5;
  --chart-1:#7aa2f7;--chart-2:#ff9e64;--chart-3:#f7768e;--chart-4:#9ece6a;--chart-5:#9ece6a;--chart-6:#e0af68;--chart-7:#bb9af7;--chart-8:#ff9e64;--chart-9:#f7768e;--chart-10:#565f89;--chart-11:#2ac3de;--chart-12:#7aa2f7;
  --chart-text:#a9b1d6;
  --metric-precision:#ff9e64;--metric-recall:#7aa2f7;--metric-f1:#9ece6a;
  --histogram-bar:var(--accent);--histogram-bg:#283457;
  --slider-fg:#7aa2f7;--slider-bg:#3b4261;
  --severity-good:#9ece6a;--severity-info:var(--accent);--severity-warning:#e0af68;--severity-critical:#f7768e;
  --danger:#f7768e;--danger-hover:#e06678;--danger-bg:rgba(247,118,142,0.15);--danger-text:#faa0b0;--danger-border:#6a2838;
  --status-completed-bg:rgba(158,206,106,0.15);--status-completed-text:#9ece6a;--status-running-bg:rgba(122,162,247,0.15);--status-running-text:#7aa2f7;--status-failed-bg:rgba(247,118,142,0.15);--status-failed-text:#faa0b0;--status-paused-bg:rgba(224,175,104,0.15);--status-paused-text:#e0af68;--status-cancelled-bg:rgba(86,95,137,0.25);--status-cancelled-text:#7a83a8;
  --badge-blue-bg:rgba(122,162,247,0.18);--badge-blue-text:#7aa2f7;--badge-purple-bg:rgba(187,154,247,0.18);--badge-purple-text:#bb9af7;--badge-green-bg:rgba(158,206,106,0.18);--badge-green-text:#9ece6a;--badge-yellow-bg:rgba(224,175,104,0.18);--badge-yellow-text:#e0af68;--badge-orange-bg:rgba(255,158,100,0.18);--badge-orange-text:#ff9e64;--badge-red-bg:rgba(247,118,142,0.18);--badge-red-text:#faa0b0;--badge-gray-bg:rgba(86,95,137,0.30);--badge-gray-text:#7a83a8;--badge-cyan-bg:rgba(42,195,222,0.18);--badge-cyan-text:#2ac3de;--badge-pink-bg:rgba(187,154,247,0.18);--badge-pink-text:#bb9af7;--badge-teal-bg:rgba(42,195,222,0.18);--badge-teal-text:#2ac3de;
}

/* ============================================================
   Tokyo Night Light (Day)
   ============================================================ */
[data-theme="tokyonight-light"] {
  --sidebar-bg:#d5d6db;--sidebar-border:#c4c8da;--sidebar-hover:#cccdd4;--sidebar-active-bg:#c4c8da;--sidebar-active-bar:#2959aa;--sidebar-text:#343b58;--sidebar-text-active:#343b58;--logo-banner-bg:#343b58;
  --sidebar-active-outline:none;--selection-outline:none;--selection-outline-hover:none;--card-hover-border:transparent;--card-selected-bg:var(--sidebar-active-bg);
  --bg:#d5d6db;--bg-card:#e6e7ed;--border:#c4c8da;--border-light:#d0d2dc;--border-input-focus:#2959aa;
  --text:#343b58;--text-secondary:#4a5070;--text-muted:#6c6e75;
  --accent:#2959aa;--accent-hover:#1e4a98;--accent-light:rgba(41,89,170,0.08);--accent-text:#2959aa;
  --btn-primary-bg:#2959aa;--btn-primary-hover:#1e4a98;--btn-primary-text:#e6e7ed;
  --golden:#c4c8da;--golden-hover:#d0d4e0;--golden-border:#2959aa;--golden-border-hover:#5080cc;--golden-light:#d8dae2;--golden-dim:rgba(41,89,170,0.06);
  --icon-color:#6c6e75;--icon-hover:#343b58;--icon-selected:var(--accent);
  --success:#385f0d;--success-bg:#e4f0d4;--warning:#8f5e15;--warning-bg:#f8f0dc;--error:#8c4351;--error-bg:#f6e4e6;
  --best-run:#385f0d;--best-run-bg:rgba(56,95,13,0.12);--worst-run:#8c4351;--worst-run-bg:rgba(140,67,81,0.10);--best-run-label:var(--accent);--info:var(--accent);--info-bg:var(--accent-light);
  --type-yolo:#2959aa;--type-coco:#5a3e8e;--type-folder:#385f0d;--type-csv:#385f0d;--type-edited:#6c6e75;--type-filtered:#006c86;--type-joined:#5a3e8e;--type-reduced:#2959aa;
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 12px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.06);--shadow-lg:0 10px 30px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.06);
  --topbar-bg:#e6e7ed;--topbar-border:#c4c8da;--scrollbar-thumb:#b0b4c0;--scrollbar-hover:#9498a8;
  --row-selected-bg:var(--sidebar-active-bg);--row-hover-bg:var(--sidebar-hover);
  --dag-bg:#e6e7ed;--th-bg:#c4c8da;--band-bg:#b4b8ca;--code-bg:#1a1b26;--code-fg:#c0caf5;
  --chart-1:#2959aa;--chart-2:#965027;--chart-3:#8c4351;--chart-4:#385f0d;--chart-5:#385f0d;--chart-6:#8f5e15;--chart-7:#5a3e8e;--chart-8:#965027;--chart-9:#8c4351;--chart-10:#6c6e75;--chart-11:#006c86;--chart-12:#2959aa;
  --chart-text:#4a5070;
  --metric-precision:#965027;--metric-recall:#2959aa;--metric-f1:#385f0d;
  --histogram-bar:var(--accent);--histogram-bg:#c4c8da;
  --slider-fg:#2959aa;--slider-bg:#b0b8c8;
  --severity-good:#385f0d;--severity-info:var(--accent);--severity-warning:#7a5010;--severity-critical:#8c4351;
  --danger:#8c4351;--danger-hover:#7a3545;--danger-bg:#f6e4e6;--danger-text:#6a2a38;--danger-border:#d0a0a8;
  --status-completed-bg:#e4f0d4;--status-completed-text:#2a4a08;--status-running-bg:#dce4f6;--status-running-text:#1a3a80;--status-failed-bg:#f6e4e6;--status-failed-text:#6a2a38;--status-paused-bg:#f8f0dc;--status-paused-text:#6a480a;--status-cancelled-bg:#d4d6de;--status-cancelled-text:#6c6e75;
  --badge-blue-bg:#dce4f6;--badge-blue-text:#1a3a80;--badge-purple-bg:#e8e0f4;--badge-purple-text:#402e70;--badge-green-bg:#e4f0d4;--badge-green-text:#2a4a08;--badge-yellow-bg:#f8f0dc;--badge-yellow-text:#6a480a;--badge-orange-bg:#f6eadc;--badge-orange-text:#6a3a10;--badge-red-bg:#f6e4e6;--badge-red-text:#6a2a38;--badge-gray-bg:#d4d6de;--badge-gray-text:#6c6e75;--badge-cyan-bg:#dcf0f4;--badge-cyan-text:#004a60;--badge-pink-bg:#f0e0f0;--badge-pink-text:#4a2a6a;--badge-teal-bg:#dcf0f0;--badge-teal-text:#004a5a;
}


/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

html {
  font-size: 13px;
  background: var(--bg);          /* prevents white flash between page loads */
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: .85em;
  font-feature-settings: "liga" 0; /* disable ligatures for clarity */
}

/* ============================================================
   Typography
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

h1 { font-size: 22px; letter-spacing: -0.02em; }
h2 { font-size: 18px; letter-spacing: -0.01em; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }
h5 { font-size: 13px; font-weight: 500; }
h6 { font-size: 12px; font-weight: 500; color: var(--text-secondary); }

p { margin: 0 0 0.6em; line-height: 1.6; }
p:last-child { margin-bottom: 0; }

small, .text-sm { font-size: 11px; }
.text-xs { font-size: 10px; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
strong, .text-bold { font-weight: 600; }

/* ============================================================
   Custom checkbox — rounded rectangle (iOS-style)
   ============================================================ */

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--text-muted);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

input[type="checkbox"]:hover {
  border-color: var(--text-muted);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-light), 0 0 0 3px var(--accent);
}

input[type="checkbox"]:checked {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Range slider — matches tlc-ui DesignSystem ────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: var(--slider-bg);
  border-radius: 0;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--slider-fg);
  border: none;
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--slider-fg);
  border: none;
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--slider-bg);
  border: none;
  border-radius: 0;
}

/* ── Dual-handle range slider (reusable) ───────────────── */
.range-slider { position: relative; flex: 1; height: 12px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.range-slider-track { position: absolute; left: 0; right: 0; top: 4.5px; height: 3px; background: var(--slider-bg); border-radius: 2px; }
.range-slider-fill { position: absolute; top: 4.5px; height: 3px; background: var(--slider-fg); border-radius: 2px; }
.range-slider-thumb { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--slider-fg); cursor: pointer; z-index: 3; touch-action: none; border: none; transition: transform .1s; }
.range-slider-thumb:hover { transform: scale(1.3); }

/* ============================================================
   Layout — sidebar + main
   ============================================================ */

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  overflow: hidden;
  box-shadow: 2px 0 16px rgba(0,0,0,0.05);
  border-right: 1px solid var(--sidebar-border);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
[data-theme="dark"] .sidebar {
  box-shadow: 2px 0 24px rgba(0,0,0,0.3);
}

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  min-width: 0;
}


/* ============================================================
   Sidebar — header (logo + toggle)
   ============================================================ */

.sidebar-header {
  background: var(--logo-banner-bg);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: none;
  flex-shrink: 0;
}

.sidebar-logo-link {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  text-decoration: none;
}

.sidebar-logo-img {
  display: block;
  height: 32px;
  width: auto;
}

/* ============================================================
   Sidebar — nav
   ============================================================ */

.sidebar-nav { padding: 0; flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: none; }
.sidebar-nav:hover { scrollbar-width: thin; }
.sidebar-nav::-webkit-scrollbar { width: 0; }
.sidebar-nav:hover::-webkit-scrollbar { width: 6px; }

.nav-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 18px 4px;
  position: relative;
}
.nav-section-label::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 6px;
  height: 1px;
  background: var(--sidebar-text);
  opacity: 0.12;
}
.sidebar-nav > .nav-section-label:first-child {
  padding-top: 10px;
}
.sidebar-nav > .nav-section-label:first-child::before {
  display: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: 28px;
  color: var(--sidebar-text);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0;
  margin: 0;
  border-left: 2.5px solid transparent;
  transition: all .12s ease;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.nav-item .icon {
  font-size: 15px; width: 20px; text-align: center; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.4; transition: opacity .12s, color .12s;
}
.nav-item .icon svg { width: 15px; height: 15px; flex-shrink: 0; }

.nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
  text-decoration: none;
}
.nav-item:hover .icon { opacity: 0.7; }

.nav-item.active {
  border-left-color: transparent;
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-active);
  font-weight: 600;
  position: relative;
  border-radius: var(--radius-sm);
  margin: 1px 6px;
  outline: var(--sidebar-active-outline, 1px solid var(--golden-border));
}
.nav-item.active .icon { opacity: 1; color: var(--sidebar-text-active); }

.nav-item .badge {
  margin-left: auto;
  background: var(--border-light);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}
.nav-item.active .badge { background: var(--sidebar-hover); color: var(--sidebar-text-active); }

.plugin-badge {
  margin-left: auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.25;
  font-size: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.plugin-badge-update {
  width: auto; height: auto; border-radius: 3px; font-size: 8px;
  padding: 2px 5px; opacity: 1; background: var(--badge-orange-bg);
  color: var(--badge-orange-text); font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
}
.nav-item-disabled { cursor: not-allowed; pointer-events: none; }
.nav-item-disabled .icon { opacity: 0.35; }
.nav-item-disabled .nav-label { color: var(--text-muted); }

/* ── Plugin group (collapsible sidebar sub-group) ── */
.nav-group-header { user-select: none; }
.nav-group-header .nav-label { flex: 1; }
.nav-group-chevron { margin-left: auto; flex-shrink: 0; opacity: 0.4; transition: transform .2s; }
.nav-group-chevron.open { transform: rotate(180deg); }
.nav-group-header.active-group { color: var(--sidebar-text-active); }
.nav-group-children { overflow: hidden; }
.nav-group-child { padding-left: 38px; font-size: 11.5px; height: 28px; }
.nav-group-child .icon { font-size: 13px; width: 16px; }

/* ============================================================
   Sidebar — footer
   ============================================================ */

.sidebar-footer {
  padding: 8px 16px 12px;
  border-top: none;
}

.service-status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--sidebar-text);
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.ok      { background: var(--success); box-shadow: 0 0 0 2px rgba(5,150,105,.2); }
.status-dot.error   { background: var(--error); box-shadow: 0 0 0 2px rgba(225,87,89,.2); }
.status-dot.checking{ background: var(--warning); animation: pulse 1s ease-in-out infinite; }

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

/* ============================================================
   Sidebar — user menu (footer)
   ============================================================ */

.sidebar-footer-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.user-menu-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.user-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.user-button:hover,
.user-button[aria-expanded="true"] {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active, var(--text));
}
.user-button .icon { display: flex; flex-shrink: 0; }
.user-button .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.user-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
}
.user-menu.open { display: block; }

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
}
.user-menu-item:hover { background: var(--sidebar-hover); color: var(--text); }
.user-menu-item .icon { display: flex; flex-shrink: 0; opacity: 0.75; }

.user-menu-sep { height: 1px; background: var(--border-light); margin: 4px 0; }

.user-menu-versions {
  padding: 6px 12px 4px;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.55;
  text-align: center;
  line-height: 1.5;
}

/* ============================================================
   Top bar
   ============================================================ */

.topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  padding: 0 16px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky; top: 0; z-index: 50;
  transition: background var(--transition), border-color var(--transition);
}

.topbar-breadcrumb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  flex: 1;
}

.topbar-breadcrumb span { color: var(--text); font-weight: 600; }

/* Dark mode toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  font-size: 14px;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--golden-light); color: var(--text); border-color: var(--golden-border-hover); }

/* ============================================================
   Page body
   ============================================================ */

.page-body { padding: 24px 28px; flex: 1; min-width: 0; overflow-x: hidden; }

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition-slow);
}

.card-header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.card-body { padding: 14px 16px; }

/* ============================================================
   Grid layouts
   ============================================================ */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }

/* ============================================================
   Project / table / run item cards
   ============================================================ */

@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card-animate {
  animation: cardIn 0.4s cubic-bezier(.2,.8,.3,1) both;
  /* Stagger: each child delays 50ms more. Works for any number of cards. */
}
.card-animate:nth-child(n)  { animation-delay: calc((var(--i, 0)) * 50ms); }
.card-animate:nth-child(1)  { --i: 0; }
.card-animate:nth-child(2)  { --i: 1; }
.card-animate:nth-child(3)  { --i: 2; }
.card-animate:nth-child(4)  { --i: 3; }
.card-animate:nth-child(5)  { --i: 4; }
.card-animate:nth-child(6)  { --i: 5; }
.card-animate:nth-child(7)  { --i: 6; }
.card-animate:nth-child(8)  { --i: 7; }
.card-animate:nth-child(9)  { --i: 8; }
.card-animate:nth-child(10) { --i: 9; }
.card-animate:nth-child(n+11) { animation-delay: 500ms; }

.item-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform 0.22s cubic-bezier(.2,.8,.3,1), box-shadow 0.22s ease, border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: var(--text);
}

.item-card:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: var(--shadow-lg);
  border-color: var(--card-hover-border, var(--golden-border-hover));
  background: var(--row-hover-bg);
  text-decoration: none;
  color: var(--text);
}
.item-card:active {
  transform: translateY(0) scale(0.995);
  box-shadow: var(--shadow);
  transition-duration: 80ms;
}

.item-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.item-card-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  background: var(--accent-light);
  flex-shrink: 0;
}

.item-card-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text);
}

.item-card-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.item-card-stats {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-pill-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.stat-pill-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ============================================================
   Summary bar (dashboard)
   ============================================================ */

/* ============================================================
   Badges / pills
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.badge-sm { padding: 1px 5px; font-size: 9px; }
.badge-lg { padding: 3px 10px; font-size: 11px; }

/* Badge colours — use CSS vars for theme support */
.badge-blue   { background: var(--badge-blue-bg, #dbeafe); color: var(--badge-blue-text, #1e40af); }
.badge-purple { background: var(--badge-purple-bg, #ede9fe); color: var(--badge-purple-text, #6d28d9); }
.badge-green  { background: var(--badge-green-bg, #d1fae5); color: var(--badge-green-text, #065f46); }
.badge-yellow { background: var(--badge-yellow-bg, #fef3c7); color: var(--badge-yellow-text, #92400e); }
.badge-orange { background: var(--badge-orange-bg, #ffedd5); color: var(--badge-orange-text, #9a3412); }
.badge-red    { background: var(--badge-red-bg, #fdf0f0); color: var(--badge-red-text, #8a3030); }
.badge-gray   { background: var(--badge-gray-bg, #f3f4f6); color: var(--badge-gray-text, #374151); }
.badge-cyan   { background: var(--badge-cyan-bg, #e5f2f5); color: var(--badge-cyan-text, #1d4f5e); }
.badge-pink   { background: var(--badge-pink-bg, #fce7f3); color: var(--badge-pink-text, #9d174d); }
.badge-teal   { background: var(--badge-teal-bg, #e5f2f5); color: var(--badge-teal-text, #1d4f5e); }

/* Dark mode badge vars */
[data-theme="dark"] {
  --badge-blue-bg:#1e3a6e;--badge-blue-text:#93c5fd;
  --badge-purple-bg:#2d1b69;--badge-purple-text:#c4b5fd;
  --badge-green-bg:#064e3b;--badge-green-text:#6ee7b7;
  --badge-yellow-bg:#451a03;--badge-yellow-text:#fcd34d;
  --badge-orange-bg:#431407;--badge-orange-text:#fdba74;
  --badge-red-bg:#2a1414;--badge-red-text:#e8b0b0;
  --badge-gray-bg:#1e2d3f;--badge-gray-text:#9ab4c8;
  --badge-cyan-bg:#0d2535;--badge-cyan-text:#5ab5cf;
  --badge-teal-bg:#0d2535;--badge-teal-text:#5ab5cf;
  --badge-pink-bg:#4a0d2a;--badge-pink-text:#f9a8d4;
}

/* Run status badges */
.badge-status-completed      { background: var(--status-completed-bg); color: var(--status-completed-text); }
.badge-status-running        { background: var(--status-running-bg);   color: var(--status-running-text); }
.badge-status-failed         { background: var(--status-failed-bg);    color: var(--status-failed-text); }
.badge-status-paused         { background: var(--status-paused-bg);    color: var(--status-paused-text); }
.badge-status-cancelled      { background: var(--status-cancelled-bg); color: var(--status-cancelled-text); }
.badge-status-empty          { background: var(--status-cancelled-bg); color: var(--status-cancelled-text); }
.badge-status-collecting     { background: var(--status-running-bg);   color: var(--status-running-text); }
.badge-status-post_processing{ background: var(--status-paused-bg);    color: var(--status-paused-text); }
.badge-status-stale          { background: var(--status-cancelled-bg); color: var(--text-muted); font-style: italic; }
.stale-run                   { opacity: 0.55; }

/* ============================================================
   Data tables
   ============================================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--th-bg);
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover:not(.selected) td { background: var(--row-hover-bg); }

/* ── Shared row selection — mirrors .item-card hover/active ── */
.row-selectable { cursor: pointer; user-select: none; outline: none; }
.row-selectable:focus-visible { outline: none; }
.row-selectable:not(.selected):hover { outline: var(--selection-outline-hover, 1px solid var(--golden-border-hover)); outline-offset: -1px; border-radius: var(--radius); }
.row-selectable:not(.selected):hover td { background: var(--row-hover-bg); }
.row-selectable.selected { outline: var(--selection-outline, 1px solid var(--golden-border)); outline-offset: -1px; border-radius: var(--radius); }
.row-selectable.selected td { background: var(--row-selected-bg) !important; }

.data-table td code {
  background: var(--border-light);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .85em;
  color: var(--accent-text);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition-fast);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}

.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); transition-duration: 60ms; }

.btn-primary,
.btn-plugin {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.08);
}
.btn-primary:hover,
.btn-plugin:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-text);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.1);
}

/* Plugin action dropdown */
.plugin-action-dropdown { position: relative; display: inline-block; }
.plugin-action-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  min-width: 160px;
  margin-top: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  max-height: 320px;
  overflow-y: auto;
}
.plugin-action-item {
  display: block;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.plugin-action-item:hover {
  background: var(--sidebar-hover);
  color: var(--text);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--golden-light);
  color: var(--text);
  border-color: var(--card-hover-border, var(--golden-border-hover));
}

/* Metric pills — neutral chip style, no golden hover/selection */
.metric-pill {
  background: var(--bg-card);
  color: var(--text-muted);
  border-color: var(--border);
}
.metric-pill:hover {
  background: var(--row-hover-bg);
  color: var(--text);
  border-color: var(--border);
}
.metric-pill-active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.metric-pill-active:hover {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: #fff; }

.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-ghost:hover { background: var(--row-hover-bg); color: var(--text); }

.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-lg { padding: 9px 18px; font-size: 14px; font-weight: 500; }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Dark mode: muted text is hard to read on golden selected cards */
[data-theme="dark"] .item-card.active .stat-pill-label,
[data-theme="dark"] .item-card.active .proj-date,
[data-theme="dark"] .item-card.active .item-card-meta,
[data-theme="dark"] .item-card.active .text-muted {
  color: var(--text);
}
[data-theme="dark"] .item-card.active .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-primary-text);
}

/* ============================================================
   Forms
   ============================================================ */

.form-group { margin-bottom: 12px; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}

.form-label.required::after { content: ' *'; color: var(--error); }

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition);
  font-family: inherit;
}

/* Select element — match form-control sizing */
.form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition);
}
.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.form-control:hover {
  border-color: var(--border-input-focus);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.form-control::placeholder { color: var(--text-muted); opacity: 0.7; }

textarea.form-control { resize: vertical; min-height: 80px; }
select.form-control { cursor: pointer; }

.form-control[readonly] {
  background: var(--bg);
  color: var(--text-muted);
  cursor: default;
  border-color: var(--border-light);
  opacity: .65;
}
.form-control[readonly]:focus {
  box-shadow: none;
  border-color: var(--border-light);
}
.form-group.readonly .form-label {
  color: var(--text-muted);
  opacity: .65;
}

.form-help {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ============================================================
   Alerts / flash messages
   ============================================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}

.alert-success { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.alert-error   { background: var(--error-bg);   color: var(--danger-text); border-color: var(--danger-border); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.alert-info    { background: var(--info-bg);    color: var(--accent-text); border-color: rgba(42,74,97,.3); }

/* Dark alert overrides no longer needed — vars handle it */
[data-theme="dark"] .alert-info    { color: var(--accent-text); border-color: rgba(42,74,97,.3); }

.alert-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   Import format selector
   ============================================================ */

.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.format-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  text-align: center;
  background: var(--bg-card);
  text-decoration: none;
  color: var(--text);
  display: block;
}

.format-card:hover:not(.active) {
  border-color: var(--golden-border-hover);
  background: var(--golden-light);
  text-decoration: none;
  color: var(--text);
}

.format-card.active {
  border-color: var(--golden-border);
  background: var(--golden-dim);
}

.format-card-icon { font-size: 24px; margin-bottom: 6px; }
.format-card-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.format-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* ============================================================
   Stats panels
   ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.col-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 11px 13px;
  transition: background var(--transition), border-color var(--transition);
}

.col-stat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-stat-type {
  font-size: 10px;
  font-weight: 500;
  background: var(--border-light);
  color: var(--text-secondary);
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.col-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 0;
  color: var(--text-secondary);
}

.col-stat-row span { color: var(--text); font-weight: 500; }

.chart-container { position: relative; height: 72px; margin-top: 6px; }

/* ============================================================
   DAG
   ============================================================ */

#dag-canvas {
  width: 100%;
  height: calc(100vh - 120px);
  background: var(--dag-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
}

.dag-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
}

.dag-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.dag-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ============================================================
   Tabs
   ============================================================ */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  gap: 0;
}

.tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ============================================================
   Empty state
   ============================================================ */

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

.empty-state-icon  { font-size: 36px; margin-bottom: 10px; opacity: 0.5; }
.empty-state-icon svg { width: 48px; height: 48px; color: var(--text-muted); }
.empty-state-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state-desc  { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; line-height: 1.6; }

/* ── Common layout utilities (reduce inline styles) ── */
.flex-row { display: flex; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.gap-sm { gap: 6px; }
.gap-md { gap: 10px; }
.gap-lg { gap: 16px; }

/* ============================================================
   Section headers
   ============================================================ */

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

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.section-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Breadcrumbs ───────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 0;
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 6px;
}
.breadcrumb a {
  color: var(--text-muted); text-decoration: none;
  transition: color 0.12s;
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep {
  margin: 0 6px; opacity: 0.5; font-size: 10px;
}
.breadcrumb .current {
  color: var(--text); font-weight: 500;
}

/* ── Sidebar last-project sub-item ─────────────────────────── */
.nav-item-sub {
  padding-left: 36px; font-size: 12px;
}
.nav-item-sub .nav-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   JSON viewer
   ============================================================ */

.json-viewer {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 11px;
  overflow: auto;
  max-height: 360px;
  line-height: 1.6;
}

/* ============================================================
   Loading spinner
   ============================================================ */

.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
}
.spinner-lg {
  display: inline-block;
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Scrollbar
   ============================================================ */

/* Scrollbar — themed for both light and dark mode.
   Uses CSS variables --scrollbar-thumb / --scrollbar-hover defined in :root and [data-theme="dark"].
   Firefox uses scrollbar-color; WebKit uses ::-webkit-scrollbar pseudo-elements.
   Autohide: scrollbar thumb is transparent until container is hovered. */
* { scrollbar-color: transparent transparent; scrollbar-width: thin; }
*:hover { scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background-color: transparent; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 4px; }
*:hover > ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); }
*:hover > ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-hover); }

/* ============================================================
   Workflow suggestion placeholder
   ============================================================ */

.workflow-suggestion-card {
  border: 1px dashed rgba(42,74,97,.3);
  background: var(--accent-light);
  border-radius: var(--radius-lg);
  padding: 13px 15px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.workflow-suggestion-icon { font-size: 19px; flex-shrink: 0; }

.workflow-suggestion-content .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-text);
  margin-bottom: 2px;
}

.workflow-suggestion-content .desc {
  font-size: 12px;
  color: var(--accent);
}

.workflow-coming-soon {
  font-size: 11px;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid rgba(42,74,97,.3);
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  display: inline-block;
  margin-top: 4px;
}

/* ============================================================
   Utilities
   ============================================================ */

.mt-0  { margin-top: 0; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

.text-sm  { font-size: 11px; }
.text-xs  { font-size: 10px; }
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

.hidden    { display: none !important; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-all { word-break: break-all; }
.w-full    { width: 100%; }

.divider { border: none; border-top: 1px solid var(--border-light); margin: 14px 0; }

/* ============================================================
   Modal
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(2px);
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: modal-in .15s ease;
}

.modal-body { overflow-y: auto; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(-12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border-light);
}

.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.modal-close:hover { background: var(--border-light); color: var(--text); }

.modal-body  { padding: 16px 18px 6px; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border-light);
}

/* ============================================================
   Theme transition — smooth cross-fade on toggle
   ============================================================ */

body,
.card, .item-card, .col-stat-card, .summary-stat,
.topbar, .form-control, .btn-secondary,
.data-table th, .data-table td {
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
}

/* ============================================================
   Queue & Progress — shared by project_detail and queue page
   ============================================================ */

.queue-job { border-bottom: 1px solid var(--border-light); padding: 16px 0; }
.queue-job:last-child { border-bottom: none; padding-bottom: 0; }
.queue-job:first-child { padding-top: 0; }
.queue-job-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.queue-job-title { font-size: 14px; font-weight: 600; color: var(--text); }
.queue-job-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.queue-progress-wrap { margin-bottom: 10px; }
.queue-progress-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.queue-progress-label { font-size: 12px; color: var(--text); white-space: nowrap; }
.queue-progress-pct { font-size: 12px; font-weight: 600; color: var(--text); }
.queue-progress-bar { height: 10px; background: var(--border-light); border-radius: 5px; overflow: hidden; }
.queue-progress-fill { height: 100%; background: var(--btn-primary-bg); border-radius: 5px; transition: width 1s linear; }
.queue-progress-fill.indeterminate {
  width: 30% !important; animation: indeterminate-slide 1.5s ease-in-out infinite;
}
@keyframes indeterminate-slide {
  0% { margin-left: 0%; }
  50% { margin-left: 70%; }
  100% { margin-left: 0%; }
}
.queue-timing { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; font-size: 12px; color: var(--text-muted); }
.queue-timing b { color: var(--text); font-weight: 600; }
.queue-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.queue-metric-card { background: var(--border-light); border-radius: var(--radius-sm); padding: 8px 14px; text-align: center; min-width: 100px; }
.queue-metric-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.queue-metric-value { font-size: 18px; font-weight: 700; color: var(--text); }

/* Sidebar queue indicator pulse */
@keyframes pulse-dot { 0%,100% { opacity:1 } 50% { opacity:.4 } }
.queue-dot-pulse { animation: pulse-dot 2s ease-in-out infinite; }