/* TVM · Frost — light liquid-glass design system. */

:root {
  --card-solid: #FBFCFE;
  --ground: #ECF0F7;
  --ink: #14213A;
  --ink2: #46546E;
  --muted: #76839A;
  --line: rgba(20, 33, 58, 0.08);
  --line2: rgba(20, 33, 58, 0.14);
  --track: rgba(20, 33, 58, 0.08);
  --accent: #3257D6;
  --accent-soft: rgba(50, 87, 214, 0.11);
  --accent-text: #2B4CC2;
  --field: rgba(255, 255, 255, 0.72);
  --field-line: rgba(20, 33, 58, 0.12);
  --r-card: 20px;
  --r-ctrl: 12px;
  --font: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Pipeline states: foreground, tint, ring. */
  --scheduled: #5B6B82;   --scheduled-bg: rgba(91, 107, 130, 0.10);  --scheduled-ring: rgba(91, 107, 130, 0.35);
  --recording: #D9363E;   --recording-bg: rgba(229, 72, 77, 0.10);   --recording-ring: rgba(229, 72, 77, 0.24);
  --queued: #9A6200;      --queued-bg: rgba(217, 154, 6, 0.14);      --queued-ring: rgba(217, 154, 6, 0.30);
  --transcoding: #5B45C2; --transcoding-bg: rgba(110, 86, 207, 0.11); --transcoding-ring: rgba(110, 86, 207, 0.25);
  --transcoded: #3B2A96;  --transcoded-bg: rgba(59, 42, 150, 0.11);  --transcoded-ring: rgba(59, 42, 150, 0.25);
  --syncing: #0A6FA6;     --syncing-bg: rgba(11, 132, 198, 0.11);    --syncing-ring: rgba(11, 132, 198, 0.25);
  --synced: #157A3C;      --synced-bg: rgba(22, 163, 74, 0.11);      --synced-ring: rgba(22, 163, 74, 0.25);
  --failed: #B0174F;      --failed-bg: rgba(194, 24, 91, 0.09);      --failed-ring: rgba(194, 24, 91, 0.26);
  --warn: #9A6200;        --warn-bg: rgba(217, 154, 6, 0.14);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0; min-height: 100vh; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: #1D3AA6; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ink2 { color: var(--ink2); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.rot45 { transform: rotate(45deg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Background: soft colour fields + crisp spheres for the glass to refract ── */
.orbs { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orbs span { position: absolute; border-radius: 50%; }
.orbs .o1 { left: -180px; top: -220px; width: 760px; height: 760px; background: radial-gradient(circle, #AFC3FF 0%, rgba(175, 195, 255, 0) 68%); }
.orbs .o2 { right: -200px; top: 60px; width: 680px; height: 680px; background: radial-gradient(circle, #FFD3BF 0%, rgba(255, 211, 191, 0) 66%); }
.orbs .o3 { left: 30%; bottom: -300px; width: 820px; height: 820px; background: radial-gradient(circle, #BFEBDC 0%, rgba(191, 235, 220, 0) 64%); }
.orbs .s1 { left: 300px; top: 150px; width: 150px; height: 150px; background: radial-gradient(circle at 32% 30%, #FFFFFF 0%, #C8D5FF 38%, #7F9BF0 100%); }
.orbs .s2 { right: 90px; top: 420px; width: 110px; height: 110px; background: radial-gradient(circle at 32% 30%, #FFFFFF 0%, #FFD9C8 40%, #F3A27F 100%); }
.orbs .s3 { left: 46%; bottom: 120px; width: 190px; height: 190px; background: radial-gradient(circle at 32% 30%, #FFFFFF 0%, #C9F0E1 40%, #6FC7A6 100%); }

/* ── Glass material ── */
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.48));
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3),
              0 1px 2px rgba(22, 35, 70, 0.05), 0 22px 44px -24px rgba(22, 35, 70, 0.28);
}
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 38%);
}
.soft { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.85); }

/* ── App shell ── */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 16px; height: calc(100vh - 32px); margin: 16px 0 16px 16px; border-radius: 26px;
  padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 26px; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; color: var(--ink); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #FFFFFF; background: linear-gradient(145deg, #5C7EF0, #2D50CC);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 16px -8px rgba(50, 87, 214, 0.7);
}
.brand b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.brand small { display: block; font-size: 12px; color: var(--muted); }
.nav { display: flex; flex-direction: column; gap: 18px; }
.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-label { padding: 0 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.nav-item {
  display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 13px;
  font-size: 14.5px; font-weight: 500; color: var(--ink2);
}
.nav-item svg { color: var(--muted); }
.nav-item:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.nav-item.active { background: rgba(255, 255, 255, 0.95); color: var(--ink); font-weight: 700; box-shadow: 0 10px 20px -12px rgba(22, 35, 70, 0.4), inset 0 1px 0 #FFFFFF; }
.nav-item.active svg { color: var(--accent); }
.nav-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.nas-mini { padding: 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 9px; }
.logout-btn { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 12px; border: 0; background: transparent; font-size: 14px; color: var(--ink2); cursor: pointer; width: 100%; }
.logout-btn:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }

.main { display: flex; flex-direction: column; gap: 22px; padding: 16px 28px 32px 24px; min-width: 0; }
.topbar { position: sticky; top: 16px; z-index: 5; border-radius: 18px; height: 60px; padding: 0 10px 0 20px; display: flex; align-items: center; gap: 12px; }
.crumb { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.crumb b { color: var(--ink); font-weight: 600; }
.topbar .spacer { margin-left: auto; }
.pill { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.55); font-size: 13.5px; color: var(--ink2); white-space: nowrap; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.55); color: var(--ink2); border: 0; cursor: pointer; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.85); color: var(--ink); }
.dot-alert { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--failed); box-shadow: 0 0 0 2px #FFFFFF; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.55); border: 0; cursor: pointer; text-align: left; }
.user-chip b { display: block; font-size: 13.5px; font-weight: 700; }
.menu { position: relative; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 20; }
.menu-panel a, .menu-panel button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; color: var(--ink2); border: 0; background: transparent; width: 100%; cursor: pointer; text-align: left; }
.menu-panel a:hover, .menu-panel button:hover { background: rgba(255, 255, 255, 0.8); color: var(--ink); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.page-head p { margin-top: 6px; font-size: 14.5px; color: var(--ink2); }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Layout helpers ── */
.stack { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.ml-auto { margin-left: auto; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.grid-wide { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.start { align-items: start; }

/* ── Cards ── */
.card { border-radius: var(--r-card); padding: 22px; min-width: 0; }
.card.pad-sm { padding: 16px; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-head .title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.card-head h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.card-head .sub { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.card-icon { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rule { height: 1px; background: var(--line); }
/* A row's play button becomes its stop button while that file is open. */
[data-play-btn] .i-busy, [data-play-btn].playing .i-idle { display: none; }
[data-play-btn].playing .i-busy { display: inline-flex; }
[data-play-btn].playing { background: var(--accent); color: #FFFFFF; border-color: transparent; }
/* Executive summary: the figure leads, the explanation stays quiet under it. */
.sum-row { display: flex; align-items: flex-start; gap: 12px; }
.sum-icon { width: 32px; height: 32px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.sum-row p { font-size: 14.5px; line-height: 1.45; }
.sum-row p b { font-weight: 700; letter-spacing: -0.01em; }
.sum-note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.ch-row { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(60px, 1.4fr) 42px 62px; align-items: center; gap: 10px; }
.ch-row .track { height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; }
.ch-row .track > span { display: block; height: 100%; border-radius: 99px; }
@media (max-width: 900px) { .ch-grid { grid-template-columns: minmax(0, 1fr); } }
.pager { gap: 10px; padding: 4px 2px; align-items: center; }
.pager [data-page-label] { font-size: 12px; color: var(--muted); }
.btn:disabled, .btn.disabled { opacity: 0.45; pointer-events: none; }
.icon-btn.danger-hover:hover { background: var(--failed-bg); color: var(--failed); }
.scroll-y { overflow-y: auto; }

/* ── KPI ── */
.kpi { border-radius: var(--r-card); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.kpi-icon { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.kpi-value { display: flex; align-items: baseline; gap: 7px; }
.kpi-value b { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-value span { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.kpi-sub { font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* ── State colours (chips, icons, bars) ── */
.st-scheduled { --st: var(--scheduled); --st-bg: var(--scheduled-bg); --st-ring: var(--scheduled-ring); }
.st-recording { --st: var(--recording); --st-bg: var(--recording-bg); --st-ring: var(--recording-ring); }
.st-queued { --st: var(--queued); --st-bg: var(--queued-bg); --st-ring: var(--queued-ring); }
.st-transcoding { --st: var(--transcoding); --st-bg: var(--transcoding-bg); --st-ring: var(--transcoding-ring); }
.st-transcoded { --st: var(--transcoded); --st-bg: var(--transcoded-bg); --st-ring: var(--transcoded-ring); }
.st-syncing { --st: var(--syncing); --st-bg: var(--syncing-bg); --st-ring: var(--syncing-ring); }
.st-synced { --st: var(--synced); --st-bg: var(--synced-bg); --st-ring: var(--synced-ring); }
.st-failed { --st: var(--failed); --st-bg: var(--failed-bg); --st-ring: var(--failed-ring); }
.st-fg { color: var(--st); }
.st-tint { background: var(--st-bg); color: var(--st); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px;
  background: var(--st-bg, var(--track)); color: var(--st, var(--ink2)); box-shadow: inset 0 0 0 1px var(--st-ring, transparent);
  font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.chip.sm { padding: 3px 9px 3px 7px; font-size: 12px; }
/* Completed milestones are marked with a solid fill; scheduled is outlined. */
.chip.st-transcoded, .chip.st-synced { background: var(--st); color: #FFFFFF; box-shadow: none; }
.chip.st-scheduled { background: transparent; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

.bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--st, var(--accent)); }
.bar.thin { height: 5px; }

.stepper { display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 132px; }
.stepper .nodes { display: flex; align-items: center; gap: 4px; }
.stepper .node { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #FFFFFF; }
.stepper .node.wait { box-shadow: inset 0 0 0 2px var(--line2); }
.stepper .link { flex: 1; height: 2px; min-width: 14px; border-radius: 2px; background: var(--line2); }
.stepper .labels { display: flex; justify-content: space-between; gap: 6px; line-height: 1; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.stepper .labels .on { font-weight: 600; }

.status-cell { display: flex; flex-direction: column; gap: 7px; min-width: 0; max-width: 240px; }
.status-cell .detail { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-cell.st-failed .detail { color: var(--failed); }

[data-filter] { border: 1px solid rgba(255, 255, 255, 0.85); }
[data-filter]:hover { background: rgba(255, 255, 255, 0.8); }
[data-filter].on { background: #FFFFFF; box-shadow: 0 0 0 2px var(--st); }

/* ── Segmented pipeline bar ── */
.segbar { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; }
.segbar > span { display: block; height: 100%; border-radius: 3px; min-width: 6px; background: var(--st); }
.legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; }
.legend > span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink2); }
.legend > span b { margin-left: auto; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Channel mark, avatar, role ── */
.ch-mark { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); color: #2B3A57; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; }
.prog { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prog .name { font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.prog .meta { font-size: 12px; color: var(--muted); white-space: nowrap; display: block; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.av-0 { background: #DCE5FF; color: #2B4CC2; } .av-1 { background: #FFE2D6; color: #A4431C; } .av-2 { background: #D8F2E6; color: #17693C; }
.av-3 { background: #EDE4FF; color: #5B45C2; } .av-4 { background: #E6EAF0; color: #46546E; }
.role { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.role-Admin { background: rgba(50, 87, 214, 0.12); color: #2B4CC2; }
.role-Operator { background: rgba(11, 132, 198, 0.12); color: #0A6FA6; }
.role-Viewer { background: rgba(91, 107, 130, 0.12); color: #46546E; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
.wide-560 { min-width: 560px; } .wide-1000 { min-width: 1000px; } .wide-1040 { min-width: 1040px; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th { padding: 12px 14px; text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); background: rgba(255, 255, 255, 0.42); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
.tbl tbody tr:first-child td { border-top: 0; }
.tbl tr.tone-failed td { background: rgba(194, 24, 91, 0.045); }
.tbl tr.tone-active td { background: rgba(50, 87, 214, 0.035); }
.tbl td.right, .tbl th.right { text-align: right; }
.tbl.fixed { table-layout: fixed; }
.tbl.fixed td { overflow: hidden; }
.tbl.fixed .status-cell { max-width: none; }
.tbl tr.expand td { border-top: 0; padding-top: 0; }
.tbl-foot { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink2); flex-wrap: wrap; }
.tbl-bar { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink2); flex-wrap: wrap; }
.files-cell { display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.files-cell span { display: flex; align-items: center; gap: 6px; }
.empty { padding: 40px 22px; text-align: center; color: var(--muted); font-size: 14px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-ctrl);
  border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.7); color: var(--ink);
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
  box-shadow: 0 4px 12px -6px rgba(22, 35, 70, 0.25), inset 0 1px 0 #FFFFFF;
}
.btn:hover { background: rgba(255, 255, 255, 0.92); }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.icon { padding: 0; width: 34px; height: 34px; }
.btn.full { width: 100%; }
.btn-primary { background: linear-gradient(180deg, #4167E6, #2D50CC); color: #FFFFFF; border-color: rgba(30, 55, 160, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 18px -8px rgba(50, 87, 214, 0.6); }
.btn-primary:hover { background: linear-gradient(180deg, #4A70EC, #3355D6); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent-text); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.55); }
.btn-danger { background: var(--failed-bg); color: var(--failed); border-color: var(--failed-ring); box-shadow: none; }
.btn-danger:hover { background: rgba(194, 24, 91, 0.14); }
.btn[disabled], .btn.disabled { opacity: 0.5; cursor: not-allowed; }
.htmx-request .btn, .btn.htmx-request { opacity: 0.7; }

/* ── Form controls ── */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--ink2); letter-spacing: 0.01em; }
.field .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.input, .select {
  height: 40px; width: 100%; padding: 0 12px; border-radius: var(--r-ctrl); background: var(--field);
  border: 1px solid var(--field-line); box-shadow: inset 0 1px 2px rgba(20, 33, 58, 0.04); color: var(--ink); font-size: 14px;
}
.input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.mono { font-family: var(--mono); font-size: 13px; }
.select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2376839A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.select.inline { width: auto; }
.with-icon { position: relative; display: flex; align-items: center; }
.with-icon svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.with-icon .input { padding-left: 38px; }
.search { width: 300px; max-width: 100%; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink2); }
.check input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: 1 / -1; }

.switch { position: relative; display: inline-flex; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px var(--line2); transition: background 0.15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.switch input:checked + span { background: var(--accent); box-shadow: none; }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Tabs ── */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.8); }
.seg a, .seg button { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--r-ctrl); font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--ink2); border: 0; background: transparent; cursor: pointer; }
.seg a:hover, .seg button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.5); }
.seg .on { background: #FFFFFF; color: var(--ink); font-weight: 600; box-shadow: 0 6px 14px -8px rgba(22, 35, 70, 0.35); }
.seg .count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg .on .count { color: var(--accent); }
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line2); overflow-x: auto; overflow-y: hidden; }
.tabs a { display: flex; align-items: center; gap: 8px; padding: 0 2px 12px; margin-bottom: -1px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

/* ── Day strip ── */
.days { display: flex; gap: 3px; overflow-x: auto; }
.day { flex: 1 0 30px; min-width: 30px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 6px; border-radius: 12px; color: var(--ink); }
.day:hover { background: rgba(255, 255, 255, 0.6); }
.day small { font-size: 10px; letter-spacing: 0.02em; opacity: 0.7; }
.day b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.day i { width: 5px; height: 5px; border-radius: 50%; }
.day.future { color: var(--muted); opacity: 0.45; pointer-events: none; }
.day.on { background: linear-gradient(180deg, #4167E6, #2D50CC); color: #FFFFFF; box-shadow: 0 8px 18px -8px rgba(50, 87, 214, 0.6); }
.day.on small { opacity: 0.85; }

/* ── Feedback ── */
.flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.flash-ok { background: var(--synced-bg); color: var(--synced); }
.flash-err { background: var(--failed-bg); color: var(--failed); }
.flash-warn { background: var(--warn-bg); color: var(--warn); }
.flash-info { background: rgba(255, 255, 255, 0.6); color: var(--ink2); border: 1px solid rgba(255, 255, 255, 0.85); }
.toast-host { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.log { margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink2); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; }

/* ── Modal ── */
dialog.modal { border: 0; padding: 0; background: transparent; max-width: min(760px, calc(100vw - 32px)); width: 100%; }
dialog.modal::backdrop { background: rgba(20, 33, 58, 0.28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.modal:has(.modal-player) { max-width: min(1180px, calc(100vw - 32px)); }
dialog.modal:has(.modal-player)::backdrop { background: rgba(8, 14, 28, 0.62); }
.modal-player { padding: 18px; gap: 14px; }
.modal-player .player video { aspect-ratio: 16 / 9; max-height: calc(100vh - 230px); object-fit: contain; }
.modal-card { border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px; background: rgba(255, 255, 255, 0.92); }

/* ── Login ── */
.auth { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 16px; }
.auth-card { position: relative; z-index: 1; width: 1040px; max-width: 100%; border-radius: 32px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); overflow: hidden; }
.auth-side { padding: 44px 44px 36px; display: flex; flex-direction: column; gap: 30px; background: linear-gradient(160deg, rgba(50, 87, 214, 0.10), rgba(255, 255, 255, 0) 60%); border-right: 1px solid rgba(255, 255, 255, 0.7); }
.auth-side h1 { font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.auth-side p { font-size: 15.5px; line-height: 1.55; color: var(--ink2); max-width: 40ch; }
.auth-form { padding: 48px 48px 40px; display: flex; flex-direction: column; gap: 20px; }
.auth-form h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.stage-pill { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 6px 14px -8px rgba(22, 35, 70, 0.35); font-size: 13.5px; font-weight: 600; color: var(--st); }
.colorbars { display: flex; height: 6px; border-radius: 999px; overflow: hidden; }
.colorbars span { flex: 1; }
.auth-small { position: relative; z-index: 1; width: 460px; max-width: 100%; border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }

/* ── Explorer ── */
.explorer { border-radius: var(--r-card); overflow: hidden; display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; grid-template-rows: auto minmax(560px, 1fr) auto; }
.ex-toolbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ex-path { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--r-ctrl); background: var(--field); border: 1px solid var(--field-line); font-size: 13.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; }
.ex-path a { color: var(--ink2); } .ex-path a:hover { color: var(--accent-text); }
.ex-tree { padding: 12px 8px; border-right: 1px solid var(--line); min-width: 0; overflow-y: auto; max-height: 720px; }
.tree-row { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; color: var(--ink2); white-space: nowrap; }
.tree-row:hover { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
.tree-row.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.tree-row.on svg { color: var(--accent-text); }
.tree-row svg { color: var(--muted); flex-shrink: 0; }
.tree-row .count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ex-list { min-width: 0; overflow-y: auto; max-height: 720px; }
.ex-list .tbl td { padding: 7px 14px; font-size: 13px; }
.ex-list .tbl th { padding: 10px 14px; }
.ex-list tr.file { cursor: pointer; }
.ex-list tr.file:hover td { background: rgba(255, 255, 255, 0.5); }
.ex-list tr.file.sel td { background: var(--accent-soft); }
.thumb { width: 52px; height: 30px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #0F1B36 0%, #22427F 55%, #5B7FC4 100%); display: block; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.audio { background: var(--syncing-bg); color: var(--syncing); display: flex; align-items: center; justify-content: center; }
.ex-preview { padding: 16px; border-left: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: 720px; }
.player { border-radius: 14px; overflow: hidden; background: #05070B; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.6); }
.player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #05070B; }
.player-empty.audio { aspect-ratio: auto; padding: 26px 0; }
.player-empty { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #C9D3E6; font-size: 13px; background: linear-gradient(135deg, #0F1B36 0%, #22427F 55%, #5B7FC4 100%); }
.meta-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.meta-row span:first-child { color: var(--muted); }
.meta-row span:last-child { word-break: break-word; }
.ex-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }

/* ── Charts ── */
.hbar { display: grid; grid-template-columns: 118px minmax(0, 1fr) 62px; align-items: center; gap: 12px; }
.hbar .track { display: block; height: 10px; border-radius: 999px; background: var(--track); }
.hbar .track span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

/* ── Responsive ── */
@media (max-width: 1280px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .explorer { grid-template-columns: 220px minmax(0, 1fr); }
  .ex-preview { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .app { grid-template-columns: 84px minmax(0, 1fr); }
  .sidebar { padding: 18px 10px; }
  .brand div, .nav-label, .nav-item span.label, .nav-badge, .nas-mini, .logout-btn span { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .grid-main, .grid-wide, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .topbar .pill.clock { display: none; }
}
/* ── Phones: the sidebar becomes a drawer opened from the topbar ── */
.nav-toggle { display: none; }
.nav-scrim { display: none; }

@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; width: min(272px, 84vw); height: auto; margin: 0;
    border-radius: 0 22px 22px 0; overflow-y: auto; transform: translateX(-101%); transition: transform 0.22s ease;
  }
  /* Solid enough to read even where backdrop-filter is unavailable. */
  .sidebar { background: rgba(255, 255, 255, 0.96); box-shadow: 0 24px 60px -22px rgba(20, 33, 58, 0.5); }
  body.nav-open .sidebar { transform: none; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(20, 33, 58, 0.42);
               opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .nav-toggle { display: inline-flex; flex: none; }
  .main { padding: 12px 14px 24px; }
  .grid-2, .grid-4, .form-grid, .legend { grid-template-columns: minmax(0, 1fr); }
  /* The two-column page grids collapse here too — at 390px they squeezed cards to 125px. */
  .grid-main, .grid-wide, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tables give up what the screen cannot hold: the stepper repeats what the
     status cell already says, and the action column stays pinned to the edge
     so its buttons are reachable without scrolling the row sideways. */
  .wide-560 { min-width: 0; }
  .wide-1000, .wide-1040 { min-width: 700px; }
  .col-step, .col-dur, .col-mod { display: none; }
  /* The file list has no scroll container of its own, so it must simply fit. */
  .ex-list .tbl { table-layout: fixed; width: 100%; }
  .ex-list .tbl th:nth-child(3), .ex-list .tbl td:nth-child(3) { width: 74px; }
  .ex-list .tbl th.col-act, .ex-list .tbl td.col-act { width: 50px; }
  .ex-list .thumb { width: 44px; height: 30px; }
  .tbl th.col-act, .tbl td.col-act {
    position: sticky; right: 0; z-index: 2; background: var(--card-solid);
    box-shadow: -10px 0 12px -10px rgba(20, 33, 58, 0.35);
  }
  .tbl tr:hover td.col-act, .tbl tr.sel td.col-act { background: var(--card-solid); }
  .form-grid .span-2 { grid-column: auto; }
  .auth-card { grid-template-columns: minmax(0, 1fr); }
  .auth-side { display: none; }
  .search { width: 100%; }
  .topbar { height: auto; padding: 8px 10px; flex-wrap: nowrap; gap: 8px; }
  .topbar .pill.clock { display: none; }
  .topbar .crumb { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topbar .spacer { display: none; }
  .topbar .menu, .topbar .user-chip { flex: none; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .card-head .title { min-width: 0; }
  .topbar .crumb { font-size: 12.5px; min-width: 0; }
  .user-chip span b { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-head h1 { font-size: 26px; }
  .page-actions { width: 100%; }

  /* Explorer: no room for the tree beside the list — the list itself navigates. */
  .explorer { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  .ex-tree { display: none; }
  .ex-list, .ex-preview { max-height: none; }
  .ex-preview { border-left: 0; border-top: 1px solid var(--line); }
  /* Browsing folders on a phone: no point in a player placeholder taking a screen. */
  .ex-preview.idle { display: none; }
  .modal-player { padding: 14px; }
  .modal-player .player video { max-height: 46vh; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-scrim { transition: none; }
}

/* ── Print (Reports → PDF) ── */
@media print {
  body { background: #FFFFFF; }
  .orbs, .sidebar, .topbar, .page-actions, .toast-host, .no-print { display: none !important; }
  .app { display: block; }
  .main { padding: 0; }
  .glass { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border: 1px solid #D8DEE8; }
  .glass::before { display: none; }
  .card, .kpi, section { break-inside: avoid; }
}