/* ============================================================================
   TintTune redesign design system — extracted VERBATIM from
   02_Requirements/tinttune_redesign.html (single source of truth).
   Do not hand-edit tokens/components here; re-extract from the HTML if it changes.
   ============================================================================ */
/* ═══════════ TOKENS ═══════════ */
:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
  --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 16px;
  --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600;
  --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.04em;
  --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.6;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 24px rgba(0,0,0,.07), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl: 0 24px 40px rgba(0,0,0,.09), 0 8px 16px rgba(0,0,0,.05);
  --shadow-focus: 0 0 0 3px rgba(59,130,246,.25);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 350ms; --dur-theme: 300ms;
}
[data-theme="light"] {
  --bg-page: #F7F8FA; --bg-surface: #FFFFFF; --bg-raised: #FFFFFF; --bg-sunken: #F0F2F5;
  --bg-overlay: rgba(15,23,42,.45);
  --border: rgba(0,0,0,.08); --border-strong: rgba(0,0,0,.14); --border-focus: #3B82F6;
  --text-primary: #0D0D0D; --text-secondary: #4B5563; --text-tertiary: #9CA3AF;
  --text-disabled: #D1D5DB; --text-inverse: #FFFFFF; --text-link: #2563EB; --text-link-hover: #1D4ED8;
  --accent: #3B82F6; --accent-hover: #2563EB; --accent-active: #1D4ED8;
  --accent-subtle: #EFF6FF; --accent-muted: #BFDBFE; --on-accent: #FFFFFF;
  --success: #059669; --success-subtle: #ECFDF5; --success-border: #6EE7B7;
  --warning: #D97706; --warning-subtle: #FFFBEB; --warning-border: #FDE68A;
  --danger: #DC2626; --danger-subtle: #FEF2F2; --danger-border: #FECACA;
  --info: #0891B2; --info-subtle: #ECFEFF; --info-border: #A5F3FC;
  --sidebar-bg: #FFFFFF; --sidebar-border: rgba(0,0,0,.07);
  --sidebar-item-hover: #F3F4F6; --sidebar-item-active: #EFF6FF; --sidebar-item-active-text: #2563EB;
  --topbar-bg: rgba(255,255,255,.85); --topbar-border: rgba(0,0,0,.07);
  --input-bg: #FFFFFF; --input-border: rgba(0,0,0,.15); --input-hover: rgba(0,0,0,.22); --input-focus-bg: #FFFFFF;
  --table-header-bg: #F9FAFB; --table-row-hover: #F5F7FA; --table-border: rgba(0,0,0,.07);
  --badge-default-bg: #F3F4F6; --badge-default-text: #374151;
  --card-bg: #FFFFFF; --card-border: rgba(0,0,0,.08); --card-shadow: var(--shadow-sm);
  --dropdown-bg: #FFFFFF; --dropdown-shadow: var(--shadow-lg);
  --code-bg: #F8FAFC; --code-border: rgba(0,0,0,.08);
  --ch-r: #D93036; --ch-g: #2E8B3C; --ch-b: #2F6BDB;
}
[data-theme="dark"] {
  --bg-page: #0C0E12; --bg-surface: #141720; --bg-raised: #1C1F2A; --bg-sunken: #090B0F;
  --bg-overlay: rgba(0,0,0,.65);
  --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.14); --border-focus: #60A5FA;
  --text-primary: #F0F2F5; --text-secondary: #9AA3B0; --text-tertiary: #5C6470;
  --text-disabled: #3A3F4A; --text-inverse: #0D0D0D; --text-link: #60A5FA; --text-link-hover: #93C5FD;
  --accent: #3D7EF0; --accent-hover: #5090F5; --accent-active: #2563EB;
  --accent-subtle: #1A2540; --accent-muted: #1E3A6E; --on-accent: #FFFFFF;
  --success: #34D399; --success-subtle: #052E1A; --success-border: #065F46;
  --warning: #FCD34D; --warning-subtle: #2D1E04; --warning-border: #78350F;
  --danger: #F87171; --danger-subtle: #2A0808; --danger-border: #7F1D1D;
  --info: #22D3EE; --info-subtle: #062430; --info-border: #164E63;
  --sidebar-bg: #111318; --sidebar-border: rgba(255,255,255,.06);
  --sidebar-item-hover: rgba(255,255,255,.05); --sidebar-item-active: rgba(61,126,240,.15); --sidebar-item-active-text: #60A5FA;
  --topbar-bg: rgba(12,14,18,.85); --topbar-border: rgba(255,255,255,.06);
  --input-bg: rgba(255,255,255,.05); --input-border: rgba(255,255,255,.1); --input-hover: rgba(255,255,255,.16); --input-focus-bg: rgba(255,255,255,.07);
  --table-header-bg: rgba(255,255,255,.03); --table-row-hover: rgba(255,255,255,.035); --table-border: rgba(255,255,255,.06);
  --badge-default-bg: rgba(255,255,255,.08); --badge-default-text: #C1C8D4;
  --card-bg: #1C1F2A; --card-border: rgba(255,255,255,.08);
  --card-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --dropdown-bg: #1C1F2A;
  --dropdown-shadow: 0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  --code-bg: rgba(255,255,255,.04); --code-border: rgba(255,255,255,.08);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3); --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 4px 8px rgba(0,0,0,.32), 0 2px 4px rgba(0,0,0,.22);
  --shadow-lg: 0 12px 24px rgba(0,0,0,.38), 0 4px 8px rgba(0,0,0,.22);
  --shadow-xl: 0 24px 40px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.28);
  --shadow-focus: 0 0 0 3px rgba(96,165,250,.28);
  --ch-r: #E5484D; --ch-g: #2FA163; --ch-b: #527FE8;
}
/* ═══════════ BASE ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root * {
  transition: background-color var(--dur-theme) var(--ease-out),
              border-color var(--dur-theme) var(--ease-out),
              color var(--dur-theme) var(--ease-out),
              box-shadow var(--dur-theme) var(--ease-out);
}
img, video, canvas, svg, svg * { transition: none; }
html, body {
  font-family: var(--font); font-size: var(--text-base); font-weight: var(--weight-normal);
  line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-page);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%;
}
button { font-family: var(--font); cursor: pointer; }
input, select { font-family: var(--font); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.lucide { width: 16px; height: 16px; flex-shrink: 0; }

/* ═══════════ APP SHELL ═══════════ */
#app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: 264px; flex-shrink: 0; background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column;
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-theme) var(--ease-out);
  overflow: hidden;
}
body.sb-collapsed .sidebar { width: 64px; }
body.sb-collapsed .sb-label, body.sb-collapsed .sb-sec, body.sb-collapsed .logo-text { display: none; }
.sb-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; height: 52px; border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0; }
.logo-mark {
  width: 28px; height: 28px; border-radius: var(--radius-md); flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #7C3AED);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.logo-mark .lucide { width: 16px; height: 16px; }
.logo-text { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.logo-text b { font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.ver-badge {
  font-size: 10px; font-weight: var(--weight-medium); padding: 1px 6px; border-radius: var(--radius-full);
  background: var(--badge-default-bg); color: var(--badge-default-text); font-family: var(--font-mono);
}
.sb-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 16px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; margin-bottom: 2px;
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-secondary); cursor: pointer; border: none; background: transparent; width: 100%;
  position: relative; white-space: nowrap;
}
.nav-item:hover { background: var(--sidebar-item-hover); color: var(--text-primary); }
.nav-item.active { background: var(--sidebar-item-active); color: var(--sidebar-item-active-text); }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 2px;
  background: var(--accent); border-radius: 2px;
}

/* sidebar collapsible sections */
.sb-sec { margin-top: 14px; }
.sec-head {
  display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none;
  padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-tertiary); white-space: nowrap;
}
.sec-head:hover { color: var(--text-secondary); background: var(--sidebar-item-hover); }
.sec-head .chev { margin-left: auto; width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
.sb-sec.folded .sec-head .chev { transform: rotate(-90deg); }
.sb-sec.folded .sec-body { display: none; }
.sec-body { padding-top: 4px; }

.proj-actions { display: flex; gap: 8px; padding: 2px 0 6px; }
.proj-actions .btn { flex: 1; }
.proj-item {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; margin-bottom: 2px;
  border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; position: relative;
}
.proj-item:hover { background: var(--sidebar-item-hover); color: var(--text-primary); }
.proj-item.active { background: var(--sidebar-item-active); color: var(--sidebar-item-active-text); font-weight: var(--weight-medium); }
.proj-item .proj-del {
  margin-left: auto; opacity: 0; width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; border: none; background: transparent;
  color: var(--text-tertiary); transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.proj-item:hover .proj-del { opacity: 1; }
.proj-del:hover { background: var(--danger-subtle); color: var(--danger); }
.proj-del .lucide { width: 14px; height: 14px; }
.sb-empty { text-align: center; padding: 20px 8px; color: var(--text-tertiary); font-size: var(--text-sm); }
.sb-empty .lucide { width: 26px; height: 26px; margin-bottom: 8px; }

/* sidebar key-value (image details) */
.sb-kv { padding: 2px 8px 4px; }
.sb-kv .kv-row { padding: 5px 0; }
.sb-kv .kv-row dt, .sb-kv .kv-row dd { font-size: 12px; }

/* status tracker */
.log-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; padding: 0 4px; }
.log-item { display: flex; gap: 8px; padding: 4px; border-radius: var(--radius-sm); font-size: 12px; line-height: var(--leading-snug); color: var(--text-secondary); align-items: flex-start; }
.log-item .lucide { width: 13px; height: 13px; margin-top: 2px; color: var(--success); }
.log-item.info .lucide { color: var(--info); }
.log-item time { display: block; font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); }

/* ═══════════ MAIN ═══════════ */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); z-index: 20;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-tertiary); min-width: 0; }
.crumbs .sep { color: var(--text-disabled); }
.crumbs .here { color: var(--text-primary); font-weight: var(--weight-medium); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.btn-icon.active-tool { background: var(--accent-subtle); color: var(--accent); }

.content { flex: 1; overflow-y: auto; padding: 16px 20px 32px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 16px; align-items: start; }
body.rail-collapsed .content-grid { grid-template-columns: minmax(0, 1fr); }
body.rail-collapsed .rail { display: none; }
@media (max-width: 1100px) { .content-grid { grid-template-columns: 1fr; } .rail { position: static !important; max-height: none !important; } }

/* right rail: sticky with its own scrollbar so the viewer never scrolls away */
.rail {
  position: sticky; top: 0; max-height: calc(100vh - 52px - 32px);
  overflow-y: auto; overscroll-behavior: contain; padding-right: 2px;
}

/* ═══════════ BUTTONS ═══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-medium); border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-instant);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-secondary { background: var(--bg-raised); border-color: var(--border-strong); color: var(--text-primary); }
.btn-secondary:hover:not(:disabled) { border-color: var(--border-focus); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--sidebar-item-hover); color: var(--text-primary); }
.btn-danger { background: var(--danger-subtle); color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; }
.btn-icon:hover { background: var(--sidebar-item-hover); color: var(--text-primary); }
.btn-block { width: 100%; }
.btn .spinner { display: none; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-label-icon { display: none; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor;
  border-top-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════ CARDS ═══════════ */
.card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); box-shadow: var(--card-shadow); padding: 20px 24px;
}
.card-title { font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); display: flex; align-items: center; gap: 8px; }
.card-title .lucide { color: var(--text-tertiary); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* rail collapsible cards */
.rail-card { padding: 0; margin-bottom: 12px; overflow: hidden; }
.fold-head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 13px 16px;
  background: none; border: none; text-align: left;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary);
}
.fold-head:hover { background: var(--sidebar-item-hover); }
.fold-head .lucide { color: var(--text-tertiary); width: 15px; height: 15px; }
.fold-head .chev { margin-left: auto; transition: transform var(--dur-fast) var(--ease-out); }
.rail-card.folded .fold-head .chev { transform: rotate(-90deg); }
.fold-body { padding: 2px 16px 16px; }
.rail-card.folded .fold-body { display: none; }
.fold-head .mini-badge { margin-left: auto; margin-right: 8px; }
.rail-card.folded .fold-head .mini-badge ~ .chev { margin-left: 0; }

/* ═══════════ VIEWER ═══════════ */
.viewer-card { padding: 14px; position: relative; }
.viewer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 860px) { .viewer-grid { grid-template-columns: 1fr; } }
.img-panel { min-width: 0; }
.img-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.img-panel-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); display: flex; align-items: center; gap: 7px; }
.img-panel-title .lucide { width: 14px; height: 14px; color: var(--text-tertiary); }
.img-frame {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--bg-sunken); border: 1px solid var(--border);
  touch-action: none; user-select: none; cursor: crosshair;
}
.img-frame.zoomed { cursor: grab; }
.img-frame.panning { cursor: grabbing; }
.img-frame.input-frame { border: 1.5px dashed var(--border-strong); }
.zoom-layer { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.zoom-layer svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.img-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; color: var(--text-tertiary); text-align: center; padding: 24px;
}
.img-empty .lucide { width: 40px; height: 40px; }
.img-empty b { font-size: 15px; font-weight: var(--weight-medium); color: var(--text-secondary); }
.img-empty p { font-size: var(--text-sm); max-width: 280px; line-height: var(--leading-snug); }

/* draggable probes (positioned by JS in frame coords) */
.probe { position: absolute; display: none; z-index: 6; }
.probe-h { left: 0; right: 0; height: 16px; margin-top: -8px; cursor: row-resize; }
.probe-h::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.probe-v { top: 0; bottom: 0; width: 16px; margin-left: -8px; cursor: col-resize; }
.probe-v::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -0.75px; background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.probe-box {
  border: 1.5px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.25);
  cursor: move; border-radius: 2px;
}
.probe-box::after {
  content: ""; position: absolute; inset: -8px; /* generous hit area */
}
.probe:hover::after { background: rgba(255,255,255,.06); }
.viewer-mode-h .probe-h, .viewer-mode-v .probe-v, .viewer-mode-roi .probe-box { display: block; }

/* zoom chip */
.zoom-chip {
  position: absolute; right: 8px; bottom: 8px; z-index: 8; display: flex; align-items: center; gap: 2px;
  background: rgba(17,19,24,.78); backdrop-filter: blur(6px); border-radius: var(--radius-full);
  padding: 3px 6px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); pointer-events: none;
}
.img-frame:hover .zoom-chip, .img-frame.zoomed .zoom-chip { opacity: 1; pointer-events: auto; }
.zoom-chip button { background: none; border: none; color: #E5E9F0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.zoom-chip button:hover { background: rgba(255,255,255,.14); }
.zoom-chip button .lucide { width: 13px; height: 13px; }
.zoom-chip .zoom-pct { color: #E5E9F0; font-size: 11px; font-family: var(--font-mono); min-width: 42px; text-align: center; }

/* processing (non-blocking): thin progress bar + dimmed previous output */
.prog-track { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 9; background: transparent; display: none; }
.prog-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 0 2px 2px 0; transition: width var(--dur-slow) var(--ease-out); }
.img-frame.processing .prog-track { display: block; }
.img-frame.processing .zoom-layer { filter: saturate(.68) brightness(.82); }
.img-frame .zoom-layer { transition: filter var(--dur-slow) var(--ease-out); }
@keyframes flashIn { 0% { opacity: .35; } 100% { opacity: 1; } }
.img-frame.done .zoom-layer { animation: flashIn var(--dur-slow) var(--ease-out); }

/* pipeline stage chips */
.pipeline { display: none; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pipeline.show { display: flex; }
.stage-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--radius-full); font-size: 11.5px; font-weight: var(--weight-medium);
  background: var(--badge-default-bg); color: var(--text-tertiary); border: 1px solid transparent;
}
.stage-chip .lucide, .stage-chip .spinner { width: 12px; height: 12px; }
.stage-chip.running { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-muted); }
.stage-chip.done { background: var(--success-subtle); color: var(--success); }
.stage-arrow { color: var(--text-disabled); font-size: 11px; }

.viewer-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.filename-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-full); background: var(--badge-default-bg); color: var(--badge-default-text);
  font-size: 12px; font-family: var(--font-mono);
}
.filename-chip .lucide { width: 13px; height: 13px; }
.viewer-toolbar .spacer { flex: 1; }

/* ═══════════ TABS ═══════════ */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tab {
  font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 10px 16px;
  color: var(--text-secondary); cursor: pointer; position: relative; background: none; border: none;
  white-space: nowrap;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--accent); }
.tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0;
}

/* ═══════════ CHARTS ═══════════ */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .charts-grid { grid-template-columns: 1fr; } }
.chart-card { padding: 16px 18px; position: relative; }
.chart-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.chart-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.chart-legend { display: flex; gap: 12px; margin-left: auto; }
.chart-meta { font-size: 12px; color: var(--text-tertiary); margin-bottom: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.chart-meta b { color: var(--text-secondary); font-weight: var(--weight-medium); }
.chart-wrap { position: relative; }
.chart-svg { display: block; width: 100%; height: 240px; }
.chart-svg .grid-line { stroke: var(--table-border); stroke-width: 1; }
.chart-svg .axis-text { fill: var(--text-tertiary); font-size: 10.5px; font-family: var(--font); }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 10; display: none;
  background: #1A1D24; color: #F0F2F5; font-size: 12px; border-radius: 6px;
  box-shadow: var(--shadow-md); padding: 6px 10px; max-width: 220px; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
}
.chart-tip .tip-x { color: #9AA3B0; margin-bottom: 2px; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 6px; }
.tip-dot { width: 7px; height: 7px; border-radius: 50%; }

/* ═══════════ FORM CONTROLS ═══════════ */
.field-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); margin-bottom: 6px; display: block; }
.helper-text { font-size: 12px; color: var(--text-tertiary); margin-top: 5px; }
.error-text { font-size: 12px; color: var(--danger); margin-top: 5px; display: none; }
.input {
  height: 36px; width: 100%; padding: 0 12px; border-radius: var(--radius-sm);
  background: var(--input-bg); border: 1px solid var(--input-border);
  font-size: 14px; color: var(--text-primary);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.input::placeholder { color: var(--text-tertiary); }
.input:hover { border-color: var(--input-hover); }
.input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); background: var(--input-focus-bg); outline: none; }
.field.invalid .input { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-subtle); }
.field.invalid .error-text { display: block; }

/* checkbox */
.checkbox { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--text-sm); color: var(--text-primary); user-select: none; }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.cbox {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong);
  background: var(--input-bg); display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background-color var(--dur-fast) var(--ease-spring), border-color var(--dur-fast);
}
.cbox svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; fill: none; opacity: 0; transform: scale(.4); transition: opacity var(--dur-fast) var(--ease-spring), transform var(--dur-fast) var(--ease-spring); }
.checkbox input:checked + .cbox { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked + .cbox svg { opacity: 1; transform: scale(1); }
.checkbox input:focus-visible + .cbox { box-shadow: var(--shadow-focus); }

/* toggle switch */
.switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; border-radius: var(--radius-full);
  background: var(--bg-sunken); border: 1px solid var(--border-strong);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.switch .thumb {
  position: absolute; top: 50%; left: 0; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm);
  transform: translate(3px, -50%); transition: transform var(--dur-base) var(--ease-spring);
}
.switch input:checked ~ .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked ~ .thumb { transform: translate(22px, -50%); }
.switch input:focus-visible ~ .track { box-shadow: var(--shadow-focus); }

/* sliders */
.slider-row { margin-bottom: 14px; }
.slider-row:last-child { margin-bottom: 0; }
.slider-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.slider-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.slider-val { font-size: var(--text-sm); font-family: var(--font-mono); color: var(--accent); font-weight: var(--weight-medium); margin-left: auto; }
.slider-range { font-size: 11px; color: var(--text-tertiary); margin-bottom: 7px; }
.steppers { display: flex; gap: 4px; }
.stepper {
  width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--bg-raised); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center;
}
.stepper:hover { border-color: var(--border-focus); color: var(--text-primary); }
.stepper .lucide { width: 13px; height: 13px; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--bg-sunken) var(--fill, 50%));
  outline: none; border: 1px solid var(--border); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--accent); box-shadow: var(--shadow-sm); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 1.5px solid var(--accent); box-shadow: var(--shadow-sm); cursor: grab;
}
input[type="range"]:focus-visible { box-shadow: var(--shadow-focus); }
input[type="range"]:disabled { opacity: .45; cursor: not-allowed; }
.sub-control { padding-left: 25px; margin-top: 10px; }
.control-group { padding: 11px 0; border-bottom: 1px solid var(--border); }
.control-group:first-child { padding-top: 4px; }
.control-group:last-child { border-bottom: none; padding-bottom: 0; }
.control-row { display: flex; align-items: center; gap: 10px; }
.control-row .name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.control-row .desc { font-size: 11px; color: var(--text-tertiary); }
.control-row .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.temp-badge {
  font-size: 11px; font-weight: var(--weight-medium); font-family: var(--font-mono); padding: 2px 8px;
  border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent);
}

/* key-value list */
.kv { display: flex; flex-direction: column; }
.kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--table-border); }
.kv-row:last-child { border-bottom: none; }
.kv-row dt { font-size: var(--text-sm); color: var(--text-secondary); }
.kv-row dd { font-size: var(--text-sm); font-family: var(--font-mono); color: var(--text-primary); }
.kv-row dd.na { color: var(--text-tertiary); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--weight-medium);
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--badge-default-bg); color: var(--badge-default-text);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-subtle); color: var(--success); }
.badge-info { background: var(--info-subtle); color: var(--info); }
.mini-badge { font-size: 10px; padding: 1px 7px; }

/* ═══════════ DROPDOWNS / MENUS ═══════════ */
.dd { position: relative; }
.dd-panel {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; z-index: 60;
  background: var(--dropdown-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--dropdown-shadow); padding: 4px; display: none;
  animation: ddIn var(--dur-fast) var(--ease-out);
}
.dd.open .dd-panel { display: block; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dd-option {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; width: 100%;
  border: none; background: none; border-radius: 4px; font-size: var(--text-sm); color: var(--text-primary);
  text-align: left;
}
.dd-option:hover { background: var(--sidebar-item-hover); }
.dd-option.selected { color: var(--accent); }
.dd-option .check { margin-left: auto; opacity: 0; width: 14px; height: 14px; }
.dd-option.selected .check { opacity: 1; }
.dd-option .lucide { width: 14px; height: 14px; color: var(--text-tertiary); }
.dd-option.selected .lucide { color: var(--accent); }
.dd-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.dd-header { padding: 8px 10px 6px; font-size: 12px; color: var(--text-tertiary); }
.dd-header b { display: block; color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* context menu */
.ctx-menu {
  position: fixed; z-index: 90; min-width: 180px;
  background: var(--dropdown-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--dropdown-shadow); padding: 4px; display: none;
  animation: ddIn var(--dur-fast) var(--ease-out);
}
.ctx-menu.open { display: block; }

/* avatar */
.avatar {
  width: 32px; height: 32px; border-radius: 50%; position: relative; flex-shrink: 0; border: none;
  background: linear-gradient(135deg, #7C3AED, #3B82F6); color: #fff;
  font-size: 12px; font-weight: var(--weight-semibold); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.avatar .status-dot {
  position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%;
  background: #10B981; box-shadow: 0 0 0 2px var(--bg-surface);
}

/* ═══════════ MODALS ═══════════ */
.modal-overlay {
  position: fixed; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(4px);
  z-index: 50; display: none; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.open { display: flex; animation: fadeIn var(--dur-base) var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 520px; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  animation: modalIn var(--dur-base) var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.modal-head { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.modal-body { padding: 20px 24px; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); padding: 28px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  color: var(--text-tertiary); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast);
  margin-bottom: 16px;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-subtle); }
.dropzone .lucide { width: 26px; height: 26px; color: var(--accent); }
.dropzone b { color: var(--text-secondary); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.dropzone span { font-size: 12px; }

/* ═══════════ TOASTS ═══════════ */
.toast-stack { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--bg-raised); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); color: var(--text-primary); min-width: 260px; max-width: 380px;
  border-left: 3px solid var(--success);
  animation: toastIn var(--dur-base) var(--ease-spring);
}
.toast.leaving { animation: toastOut var(--dur-base) var(--ease-out) forwards; }
.toast .lucide { color: var(--success); }
.toast.t-info { border-left-color: var(--info); } .toast.t-info .lucide { color: var(--info); }
.toast.t-danger { border-left-color: var(--danger); } .toast.t-danger .lucide { color: var(--danger); }
.toast .t-close { margin-left: auto; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ═══════════ LOGIN ═══════════ */
#login-view {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background:
    radial-gradient(1000px 600px at 15% -10%, var(--accent-subtle), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, var(--accent-subtle), transparent 55%),
    var(--bg-page);
  padding: 24px;
}
#login-view.open { display: flex; }
.login-card {
  width: 100%; max-width: 400px; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 40px 36px 36px;
  animation: modalIn var(--dur-slow) var(--ease-out);
}
.login-logo { display: flex; justify-content: center; margin-bottom: 20px; }
.login-logo .logo-mark { width: 44px; height: 44px; border-radius: var(--radius-lg); }
.login-logo .logo-mark .lucide { width: 24px; height: 24px; }
.login-card h1 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); text-align: center; line-height: var(--leading-tight); }
.login-sub { text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); margin: 8px 0 28px; line-height: var(--leading-snug); }
.login-field { margin-bottom: 16px; position: relative; }
.login-field .input-icon { position: absolute; left: 12px; top: 34px; width: 14px; height: 14px; color: var(--text-tertiary); pointer-events: none; }
.login-field .input { padding-left: 36px; }

/* ROI resize handles */
.roi-handle { position: absolute; width: 11px; height: 11px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3); z-index: 2; }
.roi-handle[data-handle="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.roi-handle[data-handle="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.roi-handle[data-handle="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.roi-handle[data-handle="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* channel legend chips (click = toggle, double-click = isolate) */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--bg-raised);
  font-size: 12px; font-weight: var(--weight-medium); color: var(--text-secondary); cursor: pointer; user-select: none;
  transition: opacity var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; }
.chip.off { opacity: .42; background: transparent; }
.chip.off .chip-dot { background: var(--text-tertiary) !important; }

/* editable slider value */
input.slider-val { width: 58px; background: transparent; border: 1px solid transparent; padding: 1px 5px; border-radius: 4px; text-align: right; }
input.slider-val:hover:not(:disabled) { border-color: var(--input-border); }
input.slider-val:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); outline: none; }
input.slider-val:disabled { color: var(--text-tertiary); }

/* trial / license banner */
.trial-banner {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--warning-subtle); border: 1px solid var(--warning-border); border-left: 3px solid var(--warning);
  font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 16px;
}
.trial-banner > .lucide { color: var(--warning); }
.trial-banner b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.trial-banner a { color: var(--text-link); font-weight: var(--weight-medium); text-decoration: none; }
.trial-banner a:hover { color: var(--text-link-hover); text-decoration: underline; }
.trial-banner .btn-icon { margin-left: auto; }

/* app footer */
.app-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-tertiary);
}
.app-footer nav { display: flex; align-items: center; gap: 16px; }
.app-footer a { color: var(--text-secondary); text-decoration: none; }
.app-footer a:hover { color: var(--text-link); }

/* admin: stat tiles + users table */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat-card { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.stat-label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }
.stat-num { font-size: 28px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1.1; }
.tbl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search-wrap { position: relative; width: 240px; }
.search-wrap > .lucide { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-tertiary); pointer-events: none; }
.search-wrap .input { padding-left: 36px; height: 32px; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  height: 40px; padding: 0 16px; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary);
  background: var(--table-header-bg); white-space: nowrap;
}
.tbl th button { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.tbl th button:hover { color: var(--text-primary); }
.tbl th .sort-ic { width: 12px; height: 12px; }
.tbl td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--table-border); font-size: var(--text-sm); white-space: nowrap; }
.tbl tbody tr { transition: background-color var(--dur-fast); }
.tbl tbody tr:hover { background: var(--table-row-hover); }
.tbl tbody tr:last-child td { border-bottom: none; }
.u-cell { display: flex; align-items: center; gap: 10px; }
.u-ava { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: var(--weight-semibold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.u-mail { font-size: 12px; color: var(--text-tertiary); }
.row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-fast); justify-content: flex-end; }
.tbl tbody tr:hover .row-actions { opacity: 1; }
.num-cell { font-family: var(--font-mono); }
.badge-warn { background: var(--warning-subtle); color: var(--warning); }

.section-gap { margin-top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar { width: 8px; }