/* =============================================================================
 * <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:       236px;
  --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);
}

/* 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; }
.nav-section-label.nav-section-sep { height: 1px; padding: 0; margin: 10px 14px 8px; background: var(--sidebar-border); font-size: 0; line-height: 0; }  /* a group without a title */
.sidebar-nav:hover { scrollbar-width: thin; }
.sidebar-nav::-webkit-scrollbar { width: 0; }
.sidebar-nav:hover::-webkit-scrollbar { width: 6px; }

/* Sections are separated by air, not hairlines: the label alone carries the grouping. */
.nav-section-label {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 18px 18px 6px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-nav > .nav-section-label:first-child {
  padding-top: 10px;
}

/* One row per item: fixed icon column, a label that never wraps (ellipsis + title), an
   optional trailing badge. Rounded hover/active rows with an inset accent bar on the active one. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  height: 32px;
  margin: 1px 8px;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s ease, color .12s ease;
  text-decoration: none;
  letter-spacing: 0.005em;
  min-width: 0;
}
.nav-item .nav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-active);
  font-weight: 600;
  position: relative;
}
.nav-item.active .icon { opacity: 1; color: var(--accent); }

.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); }

/* The old grey dot that said "plugin" on every row meant nothing to a reader: gone. A badge
   appears only when it says something ("update"). */
.plugin-badge { display: none; }
.plugin-badge-update {
  display: inline-block; margin-left: auto; border-radius: 999px; font-size: 9.5px; line-height: 1;
  padding: 3px 7px; background: var(--badge-orange-bg);
  color: var(--badge-orange-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
}
.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: 40px; font-size: 12.5px; height: 30px; }
.nav-group-child .icon { font-size: 13px; width: 16px; }

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

/* The footer is the sidebar's fixed frame: the nav scrolls above it and visibly ends here.
   A tint one step off the sidebar ground (darker on light themes, lighter on dark ones —
   mixing with the text colour goes the right way in both), a hairline, and a short fade
   so a half-scrolled item never looks pasted behind the controls. */
.sidebar-footer {
  position: relative;
  flex: none;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--sidebar-border);
  background: color-mix(in srgb, var(--sidebar-bg) 92%, var(--text) 8%);
}
.sidebar-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -18px; height: 18px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sidebar-bg));
}
.sidebar-footer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0 4px 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-footer-chip.busy { background: var(--warning-bg); color: var(--warning); }
.sidebar-footer-chip.quiet { background: transparent; color: var(--text-muted); padding-left: 4px; }
/* The "Run on" chooser lives in the frame too, as its own block. */
.sidebar-footer-block { margin: 0 0 8px; }
.sidebar-footer-block .nav-section-label { padding: 2px 4px 6px; margin: 0; }
.sidebar-footer-block select { width: 100%; }
/* the same chooser when the dock is on: a slim bar at the top of the plugin view, in the flow — it never covers
   anything (see _placeRunTargetPanel). Falls back to a floating card when there is no plugin view to sit in. */
/* On a plugin page (dock mode) the chooser is centred at the top: "Run on" + the dropdown, as wide as they are,
   never a full-width bar, with the cards' corner radius. The note line, when there is one, sits under the dropdown. */
.tlc-run-target-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; width: max-content; max-width: 100%;
  margin: 0 auto 14px; padding: 6px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-card); }
.tlc-run-target-bar .nav-section-label { padding: 0; margin: 0; flex: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tlc-run-target-bar > div:last-child { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; flex-wrap: wrap; padding: 0 !important; }
.tlc-run-target-bar select.form-control { width: auto !important; min-width: 240px; max-width: 100%; }
.tlc-run-target-bar .text-muted { flex-basis: 100%; max-width: 440px; margin-top: 0 !important; text-align: center; }
.tlc-run-target-bar .text-muted:empty { display: none; }
.tlc-run-target-floating { position: fixed; top: 62px; right: 16px; z-index: 850; width: 272px; padding: 4px 8px 6px;
  border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-card); box-shadow: var(--shadow-lg); }
.tlc-run-target-floating .nav-section-label { padding: 4px 4px 6px; margin: 0; }
.tlc-run-target-floating select { width: 100%; }

.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 — footer: who you are + flat tools (no submenu)
   ============================================================ */
.sidebar-footer-row { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--sidebar-border) 70%, transparent); }
.sidebar-user { display: flex; flex-direction: column; min-width: 0; padding: 0 6px; }
.sidebar-user .name { font-size: 12.5px; color: var(--sidebar-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .versions { font-size: 10px; color: var(--text-muted); opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-tools { display: flex; align-items: center; gap: 2px; }
.sb-tool { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--sidebar-text); background: transparent; border: 0; cursor: pointer; text-decoration: none; font: inherit; }
.sb-tool:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active, var(--text)); }
.sb-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sb-tool svg { width: 16px; height: 16px; }
a.sidebar-footer-chip { text-decoration: none; cursor: pointer; }
/* ============================================================
   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 */

/* ============================================================
   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;
}

/* ============================================================
   Project locations (roots / scan URLs) — see location.js
   ============================================================ */

.loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: default;
}

.loc-chip svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* Muted mono path on project cards; ellipsized from the left so the
   distinctive tail of the root stays visible. */
.loc-path-line {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}

.loc-path-line bdo {
  unicode-bidi: bidi-override;
  direction: ltr;
}

/* Segmented location filter (project detail, only when a project spans roots) */
.loc-filter {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-card);
}

.loc-filter button {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.loc-filter button + button {
  border-left: 1px solid var(--border);
}

.loc-filter button.on {
  background: var(--accent-light);
  color: var(--accent);
}

.loc-filter button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.loc-filter button svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.loc-filter .loc-filter-count {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.75;
}

/* ============================================================
   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);
}

/* Placeholder must read as a hint, not a value: dimmer than --text-muted and
   italic, so an empty field is unmistakable from one the user has filled in. */
.form-control::placeholder { color: var(--text-muted); opacity: 0.55; font-style: italic; }

/* A required field left empty (its placeholder still showing) gets a muted red
   wash — enough to say "not yet right" without the alarm of a saturated error
   red. --badge-red-* is the only red redefined in every theme, so this tracks
   the palette. The wash clears the moment the field holds a value. */
.form-control:required:placeholder-shown {
  background: var(--badge-red-bg);
  border-color: var(--badge-red-text);
}
.form-control:required:placeholder-shown:focus {
  border-color: var(--badge-red-text);
}

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; }

/* ============================================================
   Announcement banner (3LC-controlled, top of content)
   ============================================================ */

.announcement-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 24px 0;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.45;
}

/* Level → colour, straight off the semantic theme vars so it tracks every palette / mode. */
.announcement-banner.info    { background: var(--info-bg);    border-color: var(--info, var(--accent)); color: var(--text); }
.announcement-banner.success { background: var(--success-bg); border-color: var(--success);            color: var(--text); }
.announcement-banner.warning { background: var(--warning-bg); border-color: var(--warning);            color: var(--text); }

.announcement-icon { flex-shrink: 0; margin-top: 1px; }
.announcement-banner.info    .announcement-icon { color: var(--info, var(--accent)); }
.announcement-banner.success .announcement-icon { color: var(--success); }
.announcement-banner.warning .announcement-icon { color: var(--warning); }

.announcement-message { flex: 1; min-width: 0; }

.announcement-cta {
  flex-shrink: 0;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.announcement-banner.info    .announcement-cta { color: var(--info, var(--accent)); }
.announcement-banner.success .announcement-cta { color: var(--success); }
.announcement-banner.warning .announcement-cta { color: var(--warning); }
.announcement-cta:hover { text-decoration: underline; }

.announcement-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, var(--text));
  opacity: 0.65;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}
.announcement-close:hover { opacity: 1; }

/* ============================================================
   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); } }

/* "Loading plugin..." — the dot count grows 0 → 3 on a 1.2s cycle so a long wait (a venv
   build can take minutes) reads as progress rather than a hang. Pure CSS: nothing to cancel
   when the element is replaced. Dots stay in the DOM at opacity 0, so the count changes
   without shifting layout. */
.loading-dots span { opacity: 0; animation: 1.2s steps(1, end) infinite; }
.loading-dots span:nth-child(1) { animation-name: loading-dot-1; }
.loading-dots span:nth-child(2) { animation-name: loading-dot-2; }
.loading-dots span:nth-child(3) { animation-name: loading-dot-3; }
@keyframes loading-dot-1 { 25%, 100% { opacity: 1; } }
@keyframes loading-dot-2 { 50%, 100% { opacity: 1; } }
@keyframes loading-dot-3 { 75%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  /* :nth-child(n) matches the per-dot rules' specificity so this actually wins. */
  .loading-dots span:nth-child(n) { animation: none; opacity: 1; }
}

/* ============================================================
   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: 1000;  /* above the dock (960) and its fly-out/panel (950): a modal greys out the whole app, dock included */
  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; }


/* ============================================================
   Dock — the sidebar as a rail of icons (static/js/dock.js)
   ============================================================ */
:root { --dock-width: 72px; }
body.sb-dock #app-sidebar { display: none !important; }
/* Glass needs something behind it. In dock mode the page gets a quiet wash in the theme's own colours —
   two large soft glows, accent top-left and a second palette colour bottom-left — that the dock blurs through.
   Fixed to the viewport, so it is under the dock whatever the page scrolls to. */
body.sb-dock {
  background:
    radial-gradient(1100px 760px at 9% -6%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(700px 560px at 3% 50%, color-mix(in srgb, var(--chart-4, var(--accent)) 14%, transparent), transparent 60%),
    radial-gradient(940px 680px at 11% 104%, color-mix(in srgb, var(--chart-2, var(--accent)) 20%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed, fixed, fixed, scroll;
}
#tlc-dock[hidden], body.sb-list #tlc-dock { display: none; }  /* 'Full sidebar' really puts the dock away */
body.sb-dock .main-content { margin-left: var(--dock-width); }
/* With a see-through dock the eye reads the dock column as page margin, so equal paddings look left-heavy
   (72 + 28 against 28). The content sits closer to the dock and further from the window edge to balance it. */
body.sb-dock .page-body { padding-left: 20px; padding-right: 36px; }
body.sb-dock.sb-autohide .main-content { margin-left: 0; }
#tlc-dock {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--dock-width); z-index: 960;  /* above its own panel: the user menu opens over it */
  display: flex; flex-direction: column; align-items: stretch;
  background: transparent; color: var(--sidebar-text); transition: transform .22s ease, box-shadow .22s ease;
}
/* frosted glass as a layer BEHIND the glyphs (a filtered element rasterises its children softly; a pseudo-element keeps
   the glyphs in the crisp, unfiltered layer above it) */
#tlc-dock::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--sidebar-bg) 30%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.25); backdrop-filter: blur(10px) saturate(1.25);
  border-right: 1px solid color-mix(in srgb, var(--sidebar-border) 55%, transparent);
}
/* hidden until needed: fully away (no sliver); a 10px hot zone at the window's left edge brings it back */
body.sb-autohide #tlc-dock { transform: translateX(-100%); box-shadow: none; }
/* shown by dock.js after a dwell at the edge (body.dk-shown): the same glass, now over the content, with a shadow */
body.sb-autohide.dk-shown #tlc-dock, body.sb-autohide.dk-open #tlc-dock { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,.22); }
#tlc-dock .dk-logo { display: grid; place-items: center; height: 56px; flex: none; }
#tlc-dock .dk-mark { display: block; width: 32px; height: 32px; image-rendering: -webkit-optimize-contrast; background: var(--sidebar-text-active, var(--sidebar-text)); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
#tlc-dock .dk-rail-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
#tlc-dock .dk-rail { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; }  /* gap/pad/sep: see fit() */
#tlc-dock .dk-rail::-webkit-scrollbar { display: none; }
/* "there is more": a fade and a chevron at the end that has more, only while the rail scrolls */
#tlc-dock .dk-rail-wrap::before, #tlc-dock .dk-rail-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; height: 34px; pointer-events: none; opacity: 0; transition: opacity .15s ease;
  display: grid; place-items: end center; font-size: 11px; color: var(--sidebar-text); padding-bottom: 2px;
}
#tlc-dock .dk-rail-wrap::before { top: 0; background: linear-gradient(var(--sidebar-bg) 35%, transparent); place-items: start center; padding: 2px 0 0; }
#tlc-dock .dk-rail-wrap::after { bottom: 0; background: linear-gradient(transparent, var(--sidebar-bg) 65%); }
#tlc-dock.dk-more-top .dk-rail-wrap::before { opacity: 1; content: "︿"; }
#tlc-dock.dk-more-bottom .dk-rail-wrap::after { opacity: 1; content: "﹀"; }
/* tile size: fit() sets --dk-size so the whole rail fits the window (48px down to 30px) */
#tlc-dock .dk-sep { width: 22px; height: 1px; background: var(--sidebar-border); margin: 2px 0; flex: none; }
/* Every entry is a small coloured tile. --tile-c is one of the theme's --chart-N colours (dock.js picks a stable
   slot per plugin), mixed with the theme's own ground and text: the tiles follow Catppuccin, Rosé Pine, Nord… */
/* One tonal family for every glyph: mid-tones built on the theme's muted text colour, so nothing is black on a
   light theme or glaring on a dark one. Hub pages lean toward the accent, plugin sections toward their own colour. */
#tlc-dock .dk-item, #tlc-dock .dk-grid span {
  --tile-fg: color-mix(in srgb, var(--accent) 85%, var(--text));   /* the Hub is the theme's own colour, clearly */
}
#tlc-dock .dk-item[data-tinted], #tlc-dock .dk-grid span[data-tinted] {
  --tile-fg: color-mix(in srgb, var(--tile-c) 55%, var(--text));   /* closer to the text tone: less variation */
}
#tlc-dock .dk-item.active:not([data-tinted]) .dk-icon { color: var(--accent); }         /* the selected Hub page: the accent */
#tlc-dock-panel .dkp-tile { --tile-bg: color-mix(in srgb, var(--text) 8%, var(--bg-card)); --tile-fg: var(--text); }
#tlc-dock-panel .dkp-tile[data-tinted] {
  --tile-bg: color-mix(in srgb, var(--tile-c) 20%, var(--bg-card));
  --tile-fg: color-mix(in srgb, var(--tile-c) 72%, var(--text));
}
#tlc-dock { --dk-size: 48px; --dk-box: 38px; --dk-glyph: 24px; --dk-mini: 14px; --dk-mini-glyph: 12px; }
#tlc-dock .dk-item {
  position: relative; width: var(--dk-size); height: var(--dk-size); border-radius: calc(var(--dk-size) * .28); display: grid; place-items: center; flex: none;
  color: var(--sidebar-text); background: transparent; border: 0; cursor: pointer; text-decoration: none;
  transform-origin: center; transition: transform .16s cubic-bezier(.2,.8,.2,1);
}

#tlc-dock .dk-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the selected page: the accent bar at the edge and a soft glow in the tile's own colour */
/* the selected glyph carries a soft glow in its own colour; everything else is flat and crisp */
#tlc-dock .dk-item.active .dk-icon { border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); }  /* the one plate: where you are */
#tlc-dock .dk-item.disabled { opacity: .45; }
/* glyphs sit straight on the sidebar: no plate, a colour per plugin, a drop shadow for depth */
#tlc-dock .dk-icon {
  display: grid; place-items: center; width: var(--dk-box); height: var(--dk-box); font-size: var(--dk-glyph); line-height: 1;
  color: var(--tile-fg); transition: filter .12s ease;
}
#tlc-dock .dk-icon svg { width: var(--dk-glyph); height: var(--dk-glyph); shape-rendering: geometricPrecision; }
/* a section stack: four small glyphs in a 2×2, each in its own colour */
#tlc-dock .dk-grid { grid-template-columns: 1fr 1fr; gap: 3px; padding: 0; }
#tlc-dock .dk-grid span { display: grid; place-items: center; width: var(--dk-mini); height: var(--dk-mini); font-size: var(--dk-mini-glyph); overflow: hidden; color: var(--tile-fg); }
#tlc-dock .dk-grid span svg { width: var(--dk-mini-glyph); height: var(--dk-mini-glyph); shape-rendering: geometricPrecision; }
/* the tools divider hugs the bottom when there is room; tool glyphs are neutral (pages are coloured) */
#tlc-dock .dk-sep-tools { margin-top: auto; }
#tlc-dock .dk-tool .dk-icon { color: var(--text-muted); filter: none; }                 /* tools: quieter still */
#tlc-dock .dk-tool:hover .dk-icon { color: var(--sidebar-text-active, var(--text)); }
#tlc-dock .dk-tool .dk-icon svg { width: calc(var(--dk-glyph) - 4px); height: calc(var(--dk-glyph) - 4px); }
#tlc-dock .dk-tool .dk-icon #theme-icon, #tlc-dock .dk-tool .dk-icon span { font-size: calc(var(--dk-glyph) - 6px); }
/* GPU nodes: a dot on the Workspace tile — green ready, amber starting */
#tlc-dock .dk-dot { position: absolute; right: calc(var(--dk-size) * .12); bottom: calc(var(--dk-size) * .12); width: 9px; height: 9px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 2px var(--bg); }
#tlc-dock .dk-dot.busy { background: var(--warning); }
#tlc-dock .dk-dot.pulse { animation: pulse-dot 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #tlc-dock .dk-dot.pulse { animation: none; } }
#tlc-dock .dk-dot[hidden] { display: none; }
#tlc-dock-panel .dkp-versions { margin-top: 10px; padding: 8px 4px 0; border-top: 1px solid var(--border-light); font-size: 11px; color: var(--text-muted); line-height: 1.5; }
#tlc-dock .dk-badge, #tlc-dock-panel .dk-badge {
  position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg);
}
#tlc-dock .dk-item.failed .dk-badge { background: var(--danger, #c0392b); }
@keyframes dk-bounce { 0% { translate: 0 0; } 28% { translate: 0 -12px; } 50% { translate: 0 0; } 70% { translate: 0 -5px; } 100% { translate: 0 0; } }
#tlc-dock .dk-item.bounce { animation: dk-bounce .9s cubic-bezier(.3,.7,.3,1); }
/* the label flyout for single icons */
#tlc-dock-fly { position: fixed; z-index: 950; transform: translateY(-50%); pointer-events: none;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.18)); font-size: 13px; white-space: nowrap; }
#tlc-dock-fly .n { font-weight: 600; } #tlc-dock-fly .s { color: var(--text-muted); font-size: 11.5px; margin-left: 8px; }
#tlc-dock-fly[hidden] { display: none; }
/* the stack panel */
#tlc-dock-panel { position: fixed; z-index: 950; width: min(420px, calc(100vw - 100px)); max-height: calc(100vh - 24px); overflow: auto;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: var(--shadow-lg, 0 18px 48px rgba(0,0,0,.28)); }
#tlc-dock-panel[hidden] { display: none; }
/* A small stack (no search box) is as wide as its tiles: two entries make a two-tile panel, not a 420px one. */
#tlc-dock-panel.dkp-compact { width: max-content; min-width: 176px; max-width: min(420px, calc(100vw - 100px)); }
#tlc-dock-panel.dkp-compact .dkp-grid { display: flex; flex-wrap: wrap; }
#tlc-dock-panel.dkp-compact .dkp-tile { width: 96px; box-sizing: border-box; }
#tlc-dock-panel.in { animation: dkp-in .16s ease-out; }
@keyframes dkp-in { from { opacity: 0; translate: -6px 0; } to { opacity: 1; translate: 0 0; } }
#tlc-dock-panel .dkp-head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 10px; }
#tlc-dock-panel .dkp-title { font-weight: 650; font-size: 14px; } #tlc-dock-panel .dkp-count { color: var(--text-muted); font-size: 11.5px; }
#tlc-dock-panel .dkp-finished { margin: -4px 4px 10px; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
#tlc-dock-panel .dkp-search { width: 100%; margin: 0 0 10px; height: 32px; font-size: 13px; }
#tlc-dock-panel .dkp-label { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 6px 4px 4px; }
#tlc-dock-panel .dkp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
#tlc-dock-panel .dkp-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 10px; border-radius: 12px; text-decoration: none; color: var(--text); border: 1px solid transparent; text-align: center; }
#tlc-dock-panel .dkp-tile:hover, #tlc-dock-panel .dkp-tile:focus-visible { background: var(--sidebar-hover, rgba(0,0,0,.05)); outline: none; }
#tlc-dock-panel .dkp-tile.active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
#tlc-dock-panel .dkp-tile.disabled { opacity: .5; }
#tlc-dock-panel .dkp-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--tile-bg); color: var(--tile-fg); font-size: 18px; }
#tlc-dock-panel .dkp-ic svg { width: 20px; height: 20px; }
#tlc-dock-panel .dkp-name { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#tlc-dock-panel .dkp-update { position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; background: var(--badge-orange-bg); color: var(--badge-orange-text); }
#tlc-dock-panel .dkp-options { display: flex; flex-direction: column; gap: 4px; }
#tlc-dock-panel .dkp-option { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; font: inherit; }
#tlc-dock-panel .dkp-option:hover { background: var(--sidebar-hover, rgba(0,0,0,.05)); }
#tlc-dock-panel .dkp-option.on { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
#tlc-dock-panel .dkp-option .mark { color: var(--accent); font-size: 12px; line-height: 1.5; }
#tlc-dock-panel .dkp-option .t { display: block; font-weight: 600; font-size: 13px; } #tlc-dock-panel .dkp-option .d { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { #tlc-dock .dk-item, #tlc-dock { transition: none; } #tlc-dock .dk-item.bounce { animation: none; } #tlc-dock-panel.in { animation: none; } }