/* 4 Themes (Surface Polarity Modes: Obsidian Dark, Dark Paper, Warm Paper, Pure White) */
:root, [data-surface="obsidian"], [data-surface="dark"] { color-scheme: dark; --bg-canvas: #0b0d10; --bg-shell: #101318; --bg-card: #13171d; --bg-elevated: #191e26; --text-main: #eceff4; --text-secondary: #9aa3b2; --text-dim: #6e7889; --border-grid: #222832; --border-hairline: #1a2029; --accent-focal: #10b981; --accent-focal-dim: rgba(16, 185, 129, 0.14); --status-warn: #f59e0b; --status-warn-bg: rgba(245, 158, 11, 0.14); --status-err: #ef4444; --plot-canvas-bg: rgba(255, 255, 255, 0.015); --grid-major: rgba(226, 232, 240, 0.22); --grid-minor: rgba(226, 232, 240, 0.09); --axis-spine: rgba(226, 232, 240, 0.55); --ref-p95: #fb7185; --heat-0: #212936; --heat-border: #344054; --heat-future-bg: rgba(255, 255, 255, 0.02); --heat-future-border: #2b3545; --heat-1: #0e4429; --heat-2: #006d32; --heat-3: #26a641; --heat-4: #39d353; --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "DejaVu Sans Mono", "Liberation Mono", "Noto Sans Mono", "SFMono-Regular", Consolas, Menlo, monospace; }
[data-surface="dark-paper"] { color-scheme: dark; --bg-canvas: #151412; --bg-shell: #1c1b18; --bg-card: #21201c; --bg-elevated: #2a2823; --text-main: #ede8df; --text-secondary: #a8a195; --text-dim: #817a6e; --border-grid: #322f29; --border-hairline: #282520; --accent-focal: #10b981; --accent-focal-dim: rgba(16, 185, 129, 0.15); --status-warn: #f59e0b; --status-warn-bg: rgba(245, 158, 11, 0.15); --status-err: #ef4444; --plot-canvas-bg: rgba(255, 248, 230, 0.018); --grid-major: rgba(237, 232, 223, 0.22); --grid-minor: rgba(237, 232, 223, 0.09); --axis-spine: rgba(237, 232, 223, 0.55); --ref-p95: #fb7185; --heat-0: #312e27; --heat-border: #484339; --heat-future-bg: rgba(255, 248, 230, 0.02); --heat-future-border: #3c382f; --heat-1: #134e32; --heat-2: #0f763e; --heat-3: #22a552; --heat-4: #34d369; }
[data-surface="warm-paper"], [data-surface="paper"] { color-scheme: light; --bg-canvas: #f6f4f0; --bg-shell: #edeae4; --bg-card: #ffffff; --bg-elevated: #f3f1ec; --text-main: #14171a; --text-secondary: #525a65; --text-dim: #6c7581; --border-grid: #d8d4cc; --border-hairline: #e6e2da; --accent-focal: #059669; --accent-focal-dim: rgba(5, 150, 105, 0.12); --status-warn: #d97706; --status-warn-bg: rgba(217, 119, 6, 0.12); --status-err: #dc2626; --plot-canvas-bg: rgba(20, 23, 26, 0.018); --grid-major: rgba(20, 23, 26, 0.20); --grid-minor: rgba(20, 23, 26, 0.08); --axis-spine: rgba(20, 23, 26, 0.54); --ref-p95: #e11d48; --heat-0: #e6e3db; --heat-border: #ccc7bc; --heat-future-bg: rgba(20, 23, 26, 0.02); --heat-future-border: #d5d0c5; --heat-1: #9be9a8; --heat-2: #40c463; --heat-3: #30a14e; --heat-4: #216e39; }
[data-surface="white"], [data-surface="pure-white"], [data-theme="pure-white"] { color-scheme: light; --bg-canvas: #ffffff; --bg-shell: #ffffff; --bg-card: #ffffff; --bg-elevated: #f8fafc; --text-main: #0f172a; --text-secondary: #475569; --text-dim: #64748b; --border-grid: #cbd5e1; --border-hairline: #e2e8f0; --accent-focal: #059669; --accent-focal-dim: rgba(5, 150, 105, 0.12); --status-warn: #d97706; --status-warn-bg: rgba(217, 119, 6, 0.12); --status-err: #dc2626; --plot-canvas-bg: rgba(15, 23, 42, 0.018); --grid-major: rgba(15, 23, 42, 0.20); --grid-minor: rgba(15, 23, 42, 0.08); --axis-spine: rgba(15, 23, 42, 0.54); --ref-p95: #e11d48; --heat-0: #eef2f6; --heat-border: #cbd5e1; --heat-future-bg: rgba(15, 23, 42, 0.02); --heat-future-border: #cbd5e1; --heat-1: #86efac; --heat-2: #4ade80; --heat-3: #16a34a; --heat-4: #15803d; }

/* 4 Spacing / Compactness Levels (D1 Spacious -> D4 Ultra-Compact) */
:root, [data-density="D2"] { --card-pad: 16px; --grid-gap: 14px; --cell-pad: 7px 4px; --chart-h: 214px; --hero-size: 24px; --base-font: 13px; }
[data-density="D1"] { --card-pad: 22px; --grid-gap: 18px; --cell-pad: 9px 6px; --chart-h: 248px; --hero-size: 27px; --base-font: 14px; }
[data-density="D3"] { --card-pad: 11px; --grid-gap: 9px; --cell-pad: 5px 4px; --chart-h: 184px; --hero-size: 21px; --base-font: 12px; }
[data-density="D4"] { --card-pad: 7px; --grid-gap: 6px; --cell-pad: 3px 3px; --chart-h: 156px; --hero-size: 18px; --base-font: 11px; }

html { scrollbar-gutter: stable; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg-canvas); color: var(--text-main); font-family: var(--font-sans); font-size: var(--base-font); line-height: 1.45; -webkit-font-smoothing: antialiased; padding-bottom: 48px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Top Navigation Bar & Segmented Metric Toggle */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--bg-shell); border-bottom: 1px solid var(--border-grid); padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: safe center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; }
.sq-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent-focal); display: inline-block; }
.brand-title { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
.brand-sub { color: var(--text-secondary); font-size: 11px; }
.controls, .hdr-group { display: flex; flex-wrap: wrap; flex-wrap: balance; align-items: safe center; gap: 6px; }
.btn, .tab-btn { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-grid); border-radius: 6px; padding: 5px 10px; font-size: 11px; font-family: var(--font-sans); font-weight: 500; cursor: pointer; transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover, .tab-btn:hover { color: var(--text-main); border-color: var(--text-secondary); }
.tab-btn.active { background: var(--text-main); color: var(--bg-canvas); border-color: var(--text-main); font-weight: 600; }
.metric-toggle { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border-grid); border-radius: 6px; padding: 1px; gap: 1px; }
.metric-btn { background: transparent; color: var(--text-secondary); border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; font-family: var(--font-mono); cursor: pointer; transition: all 0.12s ease; }
.metric-btn:hover { color: var(--text-main); }
.metric-btn.active { background: var(--accent-focal-dim); color: var(--accent-focal); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent-focal); }

/* 4 Themes + 4 Compactness Icons Dropdown Popover */
.style-menu-wrap { position: relative; display: inline-block; }
.style-popover { position: absolute; top: calc(100% + 6px); right: 0; width: 268px; background: var(--bg-card); border: 1px solid var(--border-grid); border-radius: 10px; padding: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38); z-index: 60; }
.pop-sec-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 6px; }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.theme-opt { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-grid); border-radius: 6px; padding: 6px 8px; font-size: 11px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 7px; text-align: left; transition: all 0.12s ease; }
.theme-opt:hover { color: var(--text-main); border-color: var(--text-secondary); }
.theme-opt.active { background: var(--accent-focal-dim); color: var(--text-main); border-color: var(--accent-focal); font-weight: 600; }
.theme-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex-shrink: 0; border: 1.5px solid rgba(128, 128, 128, 0.45); forced-color-adjust: none; }
.density-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.density-opt { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-grid); border-radius: 6px; padding: 6px 4px; font-size: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.12s ease; }
.density-opt:hover { color: var(--text-main); border-color: var(--text-secondary); }
.density-opt.active { background: var(--accent-focal-dim); color: var(--text-main); border-color: var(--accent-focal); font-weight: 600; }
.density-opt svg { width: 16px; height: 13px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Passphrase Gate */
.auth-overlay { max-width: 440px; margin: 48px auto; background: var(--bg-card); border: 1px solid var(--border-grid); border-radius: 12px; padding: 24px 20px; }
.auth-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 6px; }
.auth-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.auth-desc { color: var(--text-secondary); font-size: 12px; margin-bottom: 16px; }
.input-row { display: flex; gap: 8px; margin-bottom: 10px; }
.pass-input { flex: 1; background: var(--bg-canvas); color: var(--text-main); border: 1px solid var(--border-grid); border-radius: 6px; padding: 9px 12px; font-size: 13px; font-family: var(--font-mono); }
.btn-primary { background: var(--text-main); color: var(--bg-canvas); border: 1px solid var(--text-main); font-weight: 600; padding: 9px 14px; }
.auth-status { font-size: 11px; color: var(--status-warn); min-height: 16px; margin-top: 6px; }

/* Main 12-Col Container */
.container { width: min(1380px, calc(100% - 28px)); margin-inline: auto; margin-top: 14px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.card { background: var(--bg-card); border: 1px solid var(--border-grid); border-radius: 10px; padding: var(--card-pad); display: flex; flex-direction: column; justify-content: flex-start; min-inline-size: 0; }
.col-3 { grid-column: span 3; }
.col-12 { grid-column: span 12; }
@media (max-width: 1024px) { .col-3 { grid-column: span 6; } }
@media (max-width: 640px) {
  .col-3, .col-12 { grid-column: span 12; }
  .topbar { padding: 10px 12px; }
  .container { width: calc(100% - 16px); }
  .style-popover { left: 0; right: auto; max-width: calc(100dvw - 24px); }
}

/* Card Anatomy & Progress Bars */
.card-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.card-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.card-tag { font-size: 11px; color: var(--text-dim); border: 1px solid var(--border-grid); padding: 1px 6px; border-radius: 4px; }
.hero-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.hero-val { font-size: var(--hero-size); font-weight: 700; color: var(--text-main); }
.delta-pill { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--accent-focal-dim); color: var(--accent-focal); font-weight: 600; }
.delta-pill.warn { background: var(--status-warn-bg); color: var(--status-warn); }
.bar-track { width: 100%; height: 6px; background: var(--bg-elevated); border-radius: 3px; position: relative; overflow: visible; margin: 8px 0 12px; }
.bar-fill { height: 100%; border-radius: 3px; background: var(--text-main); transition: width 0.25s ease; }
.bar-fill.focal { background: var(--accent-focal); }
.bar-fill.warn { background: var(--status-warn); }
.bar-marker { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--accent-focal); }
.card-ftr { margin-top: auto; border-top: 1px solid var(--border-hairline); padding-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 11px; color: var(--text-secondary); }
.card-ftr.ftr-5col { margin-top: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 720px) { .card-ftr.ftr-5col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ftr-item span { display: block; font-size: 10px; color: var(--text-dim); }

/* Daily Activity Heatmap */
.heatmap-scroll { overflow-x: auto; padding: 6px 0 8px; display: flex; justify-content: safe center; }
.heatmap-matrix-wrap { display: inline-flex; align-items: flex-start; gap: 8px; margin: 0 auto; padding: 2px 6px; }
.heatmap-dow-col { display: grid; grid-template-rows: 16px repeat(7, 16px); gap: 4px; font-size: 10px; color: var(--text-dim); text-align: right; padding-right: 2px; user-select: none; }
.heatmap-dow-col span { line-height: 16px; height: 16px; display: block; }
.heatmap-main-col { display: flex; flex-direction: column; gap: 4px; }
.heatmap-months-row { display: grid; grid-auto-flow: column; grid-auto-columns: 16px; gap: 4px; height: 16px; font-size: 10px; color: var(--text-secondary); align-items: center; user-select: none; }
.heatmap-month-lbl { white-space: nowrap; overflow: visible; line-height: 16px; font-weight: 600; }
.heatmap-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 16px); grid-auto-columns: 16px; gap: 4px; width: max-content; }
.heat-cell { width: 16px; height: 16px; border-radius: 3px; background: var(--heat-0); cursor: pointer; border: 1px solid var(--heat-border); forced-color-adjust: none; }
.heat-cell.pad { background: transparent !important; border-color: transparent !important; pointer-events: none; cursor: default; }
.heat-cell[data-level="-1"] { background: var(--heat-future-bg); border: 1px dashed var(--heat-future-border); opacity: 0.65; }
.heat-cell[data-level="1"] { background: var(--heat-1); border-color: rgba(16, 185, 129, 0.28); }
.heat-cell[data-level="2"] { background: var(--heat-2); border-color: rgba(16, 185, 129, 0.35); }
.heat-cell[data-level="3"] { background: var(--heat-3); border-color: rgba(57, 211, 83, 0.42); }
.heat-cell[data-level="4"] { background: var(--heat-4); border-color: rgba(57, 211, 83, 0.55); }
.heat-cell:hover, .heat-cell.selected { outline: 1.5px solid var(--text-main); outline-offset: 1px; z-index: 2; }
.heat-cell.out-window { opacity: 0.72; }
.heat-legend { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-hairline); font-size: 11px; color: var(--text-secondary); }
.legend-scale { display: flex; align-items: center; gap: 4px; }

/* LibreNMS / RRDTool Full-Width Stacked Bar SVG & Foreground Axes */
.chart-box { inline-size: 100%; block-size: var(--chart-h); position: relative; margin: 4px 0 8px; }
svg.line-plot { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.fg-grid-major { stroke: var(--grid-major); stroke-width: 1; stroke-dasharray: 2 2; shape-rendering: crispEdges; }
.fg-grid-minor { stroke: var(--grid-minor); stroke-width: 1; stroke-dasharray: 1 3; shape-rendering: crispEdges; }
.fg-axis-spine, .fg-axis-tick { stroke: var(--axis-spine); stroke-width: 1; shape-rendering: crispEdges; }
.fg-axis-arrow { fill: var(--axis-spine); }
.axis-label { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 10px; }
.ref-line-avg { stroke: var(--status-warn); stroke-width: 1.2; stroke-dasharray: 4 3; shape-rendering: crispEdges; }
.ref-line-p95 { stroke: var(--ref-p95); stroke-width: 1.2; stroke-dasharray: 5 2; shape-rendering: crispEdges; }
.ref-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; }
.ref-label.avg { fill: var(--status-warn); }
.ref-label.p95 { fill: var(--ref-p95); }
.hover-crosshair { stroke: var(--text-main); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.75; shape-rendering: crispEdges; }

/* Interactive Hover Bin Tooltip */
.plot-tooltip { position: absolute; top: 8px; left: 56px; z-index: 15; min-width: 215px; max-width: 320px; background: var(--bg-card); border: 1px solid var(--border-grid); border-radius: 8px; padding: 7px 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.36); pointer-events: none; font-size: 11px; }
.tip-hdr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--border-hairline); font-size: 10.5px; color: var(--text-secondary); }
.tip-hdr strong { color: var(--text-main); }
.tip-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 1.5px 0; }
.tip-lbl { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 205px; color: var(--text-main); }
.tip-pct { color: var(--text-dim); font-size: 10px; }
.tip-more { font-size: 10px; color: var(--text-dim); padding-top: 3px; }
.swatch-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; forced-color-adjust: none; }

/* Container-Queried 1-to-3 Column Combined Legend-Tables (Plots 1 & 2) */
.legend-wrap { container: legend / inline-size; inline-size: 100%; margin-top: 2px; }
.plot-legend-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@container legend (inline-size >= 600px) { .plot-legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container legend (inline-size >= 960px) { .plot-legend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.legend-cell { background: var(--bg-elevated); color: var(--text-main); border: 1px solid var(--border-hairline); border-radius: 7px; padding: 7px 10px; text-align: left; font-family: var(--font-sans); cursor: pointer; display: flex; flex-direction: column; gap: 5px; min-inline-size: 0; transition: border-color 0.12s ease, opacity 0.12s ease, background 0.12s ease; }
.legend-cell:hover { border-color: var(--text-secondary); }
.legend-cell.is-solo { border-color: var(--accent-focal); box-shadow: inset 0 0 0 1px var(--accent-focal); background: var(--accent-focal-dim); }
.legend-cell.is-dimmed { opacity: 0.44; }
.lcell-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; min-inline-size: 0; }
.lcell-name { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatch-sq { width: 10px; height: 10px; border-radius: 2px; border: 1px solid transparent; display: inline-block; flex-shrink: 0; forced-color-adjust: none; }
.lcell-sub { font-size: 10.5px; color: var(--text-dim); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcell-pct { font-size: 11.5px; flex-shrink: 0; }
.lcell-dim { color: var(--text-dim); font-size: 10.5px; }
.lcell-bar-track { width: 100%; height: 5px; background: var(--bg-canvas); border-radius: 3px; position: relative; overflow: visible; }
.lcell-bar-fill { height: 100%; border-radius: 3px; transition: width 0.2s ease; forced-color-adjust: none; }
.lcell-bar-pin { position: absolute; top: -2px; width: 2px; height: 9px; background: var(--text-main); opacity: 0.75; }
.lcell-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 10.5px; color: var(--text-secondary); }

/* Breakdown & Code Health Tables */
.table-region-wrap { overflow-x: auto; max-inline-size: 100%; scrollbar-gutter: stable; }
.table-clean { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.table-clean th { text-align: left; font-size: 10px; text-transform: uppercase; color: var(--text-dim); padding: var(--cell-pad); border-bottom: 1px solid var(--border-grid); background: var(--bg-card); position: sticky; inset-block-start: 0; z-index: 1; }
.table-clean td { padding: var(--cell-pad); border-bottom: 1px solid var(--border-hairline); }

/* Plot 3 Merged Project, Chat & Session Hierarchy Legend */
.card-tag.tag-ok { color: var(--accent-focal); border-color: var(--border-grid); }
.card-tag.tag-warn { color: var(--status-warn); border-color: var(--status-warn); }
.hier-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.hier-empty { padding: 12px; color: var(--text-secondary); font-size: 11px; border: 1px dashed var(--border-grid); border-radius: 6px; text-align: center; }
.hier-proj-card { background: transparent; border: 1px solid var(--border-grid); border-radius: 6px; overflow: clip; transition: opacity 0.12s ease, border-color 0.12s ease; }
.hier-proj-card.is-solo { border-color: var(--accent-focal); box-shadow: inset 0 0 0 1px var(--accent-focal); }
.hier-proj-card.is-dimmed { opacity: 0.46; }
.hier-proj-hdr { padding: 7px 12px; background: var(--bg-elevated); cursor: pointer; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; user-select: none; }
.hier-proj-hdr::-webkit-details-marker { display: none; }
.hier-proj-card[open] > .hier-proj-hdr { border-bottom: 1px solid var(--border-grid); }
.hier-caret { display: inline-block; width: 12px; color: var(--text-dim); font-size: 12px; font-weight: 600; text-align: center; }
.hier-caret::before { content: "+"; }
.hier-proj-card[open] .hier-caret { color: var(--accent-focal); }
.hier-proj-card[open] .hier-caret::before { content: "−"; }
.hier-proj-left { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12px; min-inline-size: 0; }
.proj-swatch-pill { width: 18px; height: 10px; border-radius: 3px; border: 1px solid transparent; display: inline-block; flex-shrink: 0; forced-color-adjust: none; }
.hier-proj-idx { color: var(--text-dim); font-size: 11px; }
.hier-proj-name { color: var(--text-main); font-weight: 600; }
.hier-proj-id { color: var(--text-dim); font-size: 11px; }
.hier-micro-tag { font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-secondary); border: 1px solid var(--border-grid); padding: 0 5px; border-radius: 3px; }
.hier-proj-right { color: var(--text-secondary); font-size: 11px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.hier-active-count { color: var(--accent-focal); font-weight: 600; }
.proj-share-pill { padding: 1px 6px; border-radius: 4px; background: var(--bg-card); border: 1px solid var(--border-grid); color: var(--text-main); font-size: 10.5px; font-weight: 600; }
.btn-solo { font-size: 10px; padding: 1.5px 7px; border-radius: 4px; background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-grid); cursor: pointer; transition: all 0.12s ease; }
.btn-solo:hover { color: var(--text-main); border-color: var(--text-secondary); }
.btn-solo.active { background: var(--accent-focal-dim); color: var(--accent-focal); border-color: var(--accent-focal); font-weight: 700; }
.hier-table-wrap { overflow-x: auto; max-inline-size: 100%; background: var(--bg-card); scrollbar-gutter: stable; overscroll-behavior: contain; }
.hier-table { table-layout: fixed; width: 100%; min-width: 780px; }
.hier-col-sess { width: 35%; }
.hier-col-uuid { width: 26%; }
.hier-col-ws { width: 16%; }
.hier-col-mode { width: 8%; }
.hier-col-steps { width: 7%; }
.hier-col-upd { width: 8%; }
.hier-col-act { width: 84px; text-align: center; }
.hier-table th { padding: 5px 10px; font-size: 10px; color: var(--text-dim); background: var(--bg-card); border-bottom: 1px solid var(--border-hairline); font-weight: 600; letter-spacing: 0.04em; }
.hier-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-hairline); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hier-table tr:last-child td { border-bottom: none; }
.hier-table tbody tr:hover td { background: var(--bg-elevated); }
.hier-session-row.sess-zero-win { opacity: 0.62; }
.num-col { text-align: right !important; }
.sess-cell { display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.sess-shade-swatch { width: 10px; height: 10px; border-radius: 2px; border: 1px solid transparent; display: inline-block; flex-shrink: 0; forced-color-adjust: none; }
.sess-dot { font-size: 10px; line-height: 1; display: inline-block; width: 10px; text-align: center; flex-shrink: 0; }
.sess-dot.running { color: var(--accent-focal); }
.sess-dot.pinned { color: var(--text-main); }
.sess-dot.idle { color: var(--text-dim); }
.hier-idx { color: var(--text-dim); font-size: 11px; min-width: 22px; }
.hier-title-txt { color: var(--text-main); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.hier-copy-inline { cursor: pointer; border-bottom: 1px dashed transparent; transition: color 0.12s ease, border-color 0.12s ease; }
.hier-copy-inline:hover { color: var(--text-main); border-bottom-color: var(--text-secondary); }
.hier-copy-inline.copied { color: var(--accent-focal) !important; border-bottom-color: var(--accent-focal) !important; font-weight: 600; }
.hier-uuid, .hier-ws { color: var(--text-secondary); font-size: 11px; }
.hier-mode-lbl { font-size: 10px; letter-spacing: 0.04em; color: var(--text-secondary); }
.hier-mode-lbl.writer { color: var(--accent-focal); font-weight: 600; }
.hier-mode-lbl.warn { color: var(--status-warn); }
.hier-updated { color: var(--text-dim); font-size: 11px; }
.hier-act-cell { text-align: center; overflow: visible !important; text-overflow: clip !important; }
.hier-upload-btn { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-grid); cursor: pointer; }
.hier-upload-btn:hover { color: var(--accent-focal); border-color: var(--accent-focal); }
.hidden { display: none !important; }

/* Version Tag, 6px Status Dots & Code Health KPIs */
.version-tag { font-size: 11px; vertical-align: middle; display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px; border-radius: 4px; background: var(--bg-elevated); color: var(--text-main); border: 1px solid var(--border-grid); margin-left: 6px; }
.status-dot-6px { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; forced-color-adjust: none; }
.status-dot-6px.green { background: #10b981; }
.status-dot-6px.amber { background: #f59e0b; }
.status-dot-6px.cyan { background: #38bdf8; }
.status-dot-6px.slate { background: #94a3b8; }
.health-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); margin-top: 10px; }
@media (max-width: 900px) { .health-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .health-kpi-row { grid-template-columns: 1fr; } }
.health-kpi-item { background: var(--bg-elevated); border: 1px solid var(--border-hairline); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.kpi-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); font-weight: 600; }
.kpi-val { font-size: 14px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 6px; }
.kpi-sub { font-size: 11px; color: var(--text-secondary); }

/* Scratch Upload Modal */
dialog#uploadDialog { margin: auto; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-grid); border-radius: 12px; padding: 0; max-width: 540px; width: min(540px, calc(100% - 24px)); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); overflow: clip; }
dialog#uploadDialog::backdrop { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); }
.upload-modal-hdr { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 18px 12px; border-bottom: 1px solid var(--border-hairline); }
.upload-modal-heading { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.upload-modal-sub { font-size: 11px; color: var(--text-dim); }
.btn-icon { background: transparent; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
.btn-icon:hover { color: var(--text-main); }
.upload-modal-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.upload-dropzone { border: 1.5px dashed var(--border-grid); border-radius: 8px; padding: 20px 14px; text-align: center; cursor: pointer; background: var(--bg-elevated); transition: all 0.12s ease; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.upload-dropzone:hover, .upload-dropzone.dragover { border-color: var(--accent-focal); background: var(--accent-focal-dim); }
.upload-icon { color: var(--text-dim); }
.upload-dropzone:hover .upload-icon { color: var(--accent-focal); }
.upload-dropzone-txt { font-size: 12px; color: var(--text-secondary); }
.upload-browse-link { color: var(--accent-focal); text-decoration: underline; font-weight: 600; }
.upload-dropzone-hint { font-size: 11px; color: var(--text-dim); }
.upload-opt-row { display: flex; align-items: center; gap: 10px; }
.upload-lbl { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.input-text { flex: 1; background: var(--bg-canvas); color: var(--text-main); border: 1px solid var(--border-grid); border-radius: 6px; padding: 6px 10px; font-size: 11px; }
.upload-file-list { background: var(--bg-canvas); border: 1px solid var(--border-hairline); border-radius: 6px; padding: 8px; }
.upload-file-list-hdr { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); border-bottom: 1px solid var(--border-hairline); padding-bottom: 4px; margin-bottom: 4px; }
.upload-file-items { max-height: 132px; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.upload-file-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 4px; font-size: 11px; }
.upload-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.upload-file-sz { color: var(--text-dim); font-size: 11px; flex-shrink: 0; }
.upload-file-del { background: transparent; border: none; color: var(--text-dim); font-size: 14px; cursor: pointer; padding: 0 4px; }
.upload-file-del:hover { color: var(--status-err); }
.upload-progress-wrap { display: flex; flex-direction: column; gap: 4px; }
.upload-progress-status { font-size: 11px; color: var(--text-secondary); text-align: center; }
.upload-success-wrap { background: var(--bg-elevated); border: 1px solid var(--border-hairline); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.upload-success-badge { color: var(--accent-focal); font-weight: 700; font-size: 12px; }
.upload-summary-path { font-size: 11px; color: var(--text-dim); word-break: break-all; }
.upload-prompt-box { background: var(--bg-canvas); border: 1px solid var(--border-grid); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.upload-prompt-hdr { font-size: 11px; color: var(--text-dim); text-transform: uppercase; font-weight: 600; }
.upload-prompt-text { font-size: 11px; color: var(--text-main); word-break: break-word; line-height: 1.4; }
.upload-error-msg { color: var(--status-err); font-size: 11px; padding: 6px; background: rgba(239, 68, 68, 0.1); border-radius: 4px; border: 1px solid var(--status-err); }
.upload-modal-ftr { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-hairline); background: var(--bg-shell); }
.btn-focal { background: var(--accent-focal); color: #ffffff; border: 1px solid var(--accent-focal); font-weight: 600; }
.btn-focal:hover:not(:disabled) { opacity: 0.9; }
.btn-focal:disabled { opacity: 0.45; cursor: not-allowed; }