/* Frameforge — производственный пульт.
   Направление «Аппаратная»: числа и таймкоды первичны, данные плотные и прижаты влево,
   глубина показана заливкой, а не рамками. Machine voice — Martian Mono, человеческий
   текст — Onest. Один акцент на весь интерфейс: ледяной cyan. Всё остальное — семантика
   состояния (ждёт / ошибка / готово) и четыре уровня поверхностей. */

@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/unbounded-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/unbounded-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/unbounded-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/unbounded-cyrillic-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JB Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/jb-mono-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JB Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/jb-mono-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JB Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/jb-mono-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JB Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/jb-mono-cyrillic-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/onest-latin-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/onest-cyrillic-300.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/onest-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/onest-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/onest-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/onest-cyrillic-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  color-scheme: dark;

  /* четыре уровня поверхностей, соседние различаются минимум на 7 пунктов L* */
  --bg: #05080e;        /* L* 2.1  — фон страницы */
  --panel: #141f2c;     /* L* 11.3 — панель, боковой рельс */
  --inset: #1e3042;     /* L* 19.2 — вставка внутри панели, выбранное */
  --hover: #29405a;     /* L* 26.4 — наведение */
  --well: #0b131c;      /* L* 5.0  — колодец: поля ввода и медиа-рамки уходят вниз */

  --line: #2b3d4e;
  --line-2: #3f5771;

  --text: #eaf2f8;
  --muted: #9fb2c1;
  --dim: #7288a0;

  /* единственный акцент интерфейса */
  --accent: #6fe3ff;
  --accent-ink: #04222c;
  --accent-dim: rgba(111, 227, 255, .13);
  --accent-edge: rgba(111, 227, 255, .42);

  /* только семантика состояний: ждёт / ошибка / готово */
  --amber: #f0b64f;
  --red: #ff7b84;
  --green: #4fd39b;
  --amber-dim: rgba(240, 182, 79, .13);
  --red-dim: rgba(255, 123, 132, .13);
  --green-dim: rgba(79, 211, 155, .13);
  --amber-edge: rgba(240, 182, 79, .42);
  --red-edge: rgba(255, 123, 132, .42);
  --green-edge: rgba(79, 211, 155, .42);
  --amber-text: #f8dfae;
  --red-text: #ffd6d9;
  --green-text: #c2f1de;

  --mono: "JB Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "Unbounded", "Onest", ui-sans-serif, sans-serif;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-full: 999px;
  --sans: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sheen: rgba(160, 190, 215, .09);
  --shadow: 0 18px 40px rgba(2, 5, 10, .55);

  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100%; background: var(--bg);
  font-size: 13.5px; font-weight: 300; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: var(--accent); text-underline-offset: 2px; }

/* атмосфера: холодный ключевой свет слева сверху, отражённый снизу справа,
   и едва различимая построчная развёртка под всем этим */
.app-root { position: relative; min-height: 100vh; }
.app-root::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 85% at 10% -14%, rgba(52, 152, 192, .18), transparent 58%),
    radial-gradient(85% 70% at 100% 110%, rgba(30, 72, 128, .24), transparent 62%),
    radial-gradient(50% 40% at 50% 50%, rgba(52, 110, 160, .05), transparent 70%);
}
.app-root > * { position: relative; z-index: 1; }

/* один видимый фокус на все интерактивные элементы */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.mode-card:has(input:focus-visible), .switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* одна поставленная анимация появления, ступенчатая через animation-delay */
.rise { animation: rise .44s cubic-bezier(.22, .75, .3, 1) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .skeleton::after { display: none; }
}

/* ---------- машинная строка: id, лицензии, таймкоды, счётчики ---------- */
.record { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: 1.6; letter-spacing: -.01em; color: var(--muted); }
.record > span { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.record .k { color: var(--dim); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.record .v { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44ch; }
.record .v.wrap { white-space: normal; max-width: 72ch; }
.record .v.acc { color: var(--accent); }
.record a { color: var(--accent); }

.mono { font-family: var(--mono); font-weight: 400; letter-spacing: -.01em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- служебные слои ---------- */
.offline-banner { position: fixed; z-index: 100; inset: 0 0 auto; padding: 9px 20px; text-align: center; background: var(--amber-dim); color: var(--amber-text); font-family: var(--mono); font-size: 11px; letter-spacing: .02em; border-bottom: 1px solid var(--amber-edge); backdrop-filter: blur(8px); }
.toast-region { position: fixed; z-index: 120; top: 16px; right: 16px; max-width: min(390px, calc(100vw - 32px)); display: grid; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; padding: 11px 14px; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--inset); box-shadow: var(--shadow); font-size: 12.5px; }
.toast.error { border-left-color: var(--red); }
.toast.success { border-left-color: var(--green); }

/* ---------- вход и регистрация: просто карточка по центру ---------- */
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.auth-card { width: min(100%, 420px); padding: 30px 28px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow); }
.auth-card .brand { justify-content: center; margin-bottom: 22px; }
.auth-card h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 42px); text-align: center; }
.auth-card > p { margin: 0 auto; color: var(--muted); font-size: 13px; max-width: 40ch; text-align: center; }
.auth-card .inline-alert { margin-top: 16px; }
.auth-switch { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12.5px; text-align: center; }

.brand { display: flex; align-items: center; gap: 9px; }
.brand-name { font-family: var(--display); font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--text); }
.stamp { display: grid; gap: 3px; }
.stamp .k { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.stamp .v { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.stamp .v.big { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--text); }

/* ---------- каркас ---------- */
.shell { min-height: 100vh; display: grid; grid-template-columns: 214px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 16px 0 12px; border-right: 1px solid var(--line); background: linear-gradient(180deg, #0e1823, #0a121a); }
.sidebar .brand { padding: 4px 20px 22px; }
.nav { display: grid; gap: 2px; padding: 0 10px; }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: var(--r-sm); color: var(--dim); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .14s, background .14s; }
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--text); background: var(--inset); }
.nav-num { font-family: var(--mono); font-size: 9px; font-weight: 500; color: var(--dim); letter-spacing: -.02em; }
.nav-link.active .nav-num { color: var(--accent); }
.sidebar-footer { margin-top: auto; padding: 14px 16px 0; border-top: 1px solid var(--line); color: var(--dim); font-size: 11.5px; line-height: 1.45; }
.sidebar-footer strong { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); background: rgba(11, 18, 26, .97); backdrop-filter: blur(12px); }
.topbar-crumb { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.topbar-spacer { flex: 1; }
.menu-button { display: none; }
.connection { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.connection::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.connection.offline::before { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
/* Занятость диска стоит в шапке на каждом экране, а не всплывает в аварии. Поэтому она
   намеренно тихая: тон подписи как у индикатора связи рядом, и цвет меняется только когда
   свободного места меньше порога и новое видео уже не запустится. */
.disk-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: var(--r-full); background: var(--panel); font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.disk-label { color: var(--dim); }
.disk-track { width: 46px; height: 4px; border-radius: var(--r-full); background: var(--well); overflow: hidden; }
.disk-fill { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width .3s; }
.disk-value { color: var(--muted); }
.disk-chip.low { background: var(--red-dim); box-shadow: inset 0 0 0 1px var(--red-edge); color: var(--red-text); }
.disk-chip.low .disk-fill { background: var(--red); }
.disk-chip.low .disk-label, .disk-chip.low .disk-value { color: var(--red-text); }
/* Материал, убранный после монтажа: вместо плеера, который вернул бы 404, - прямое
   объяснение, что случилось и где теперь смотреть результат. */
.swept { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; min-height: 150px; padding: 22px 18px; border: 1px dashed var(--line-2); border-radius: var(--r-md); text-align: center; color: var(--dim); }
.swept strong { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.swept span { max-width: 44ch; font-size: 11.5px; }
.swept-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--inset); color: var(--dim); }
.swept-mark svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.5; fill: none; }
/* В списке материалов место под превью - узкая полоска, а не панель, поэтому там от
   заглушки остаётся только заголовок. */
.asset-thumb .swept { min-height: 80px; gap: 5px; padding: 12px 10px; border: 0; }
.asset-thumb .swept span:not(.swept-mark) { display: none; }
.asset-thumb .swept-mark { width: 22px; height: 22px; }
.asset-thumb .swept-mark svg { width: 12px; height: 12px; }
.lang-toggle { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-full); background: var(--panel); }
.lang-toggle button { padding: 3px 9px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--dim); font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .04em; transition: color .14s, background .14s; }
.lang-toggle button:hover { color: var(--text); }
.lang-toggle button.active { color: var(--accent-ink); background: var(--accent); }
.account-chip { display: flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: var(--r-full); background: var(--panel); color: var(--muted); font-size: 12px; text-decoration: none; transition: color .14s, background .14s; }
.account-chip:hover { background: var(--inset); }
.account-chip:hover { color: var(--text); }
.avatar { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--accent-dim); color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.content { padding: 18px 22px 30px; }

/* ---------- шапка экрана ---------- */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 26px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.eyebrow { margin: 0 0 9px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 0; font-family: var(--display); font-size: clamp(24px, 2.9vw, 42px); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; overflow-wrap: anywhere; }
h2, h3 { font-weight: 700; letter-spacing: -.01em; }
.page-description { max-width: 64ch; margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.head-readout { display: flex; align-items: flex-end; gap: 26px; text-align: right; }
.head-readout .stamp { justify-items: end; }
.head-readout .stamp .v.big { font-size: clamp(24px, 2.6vw, 38px); }

/* ---------- панели ---------- */
.card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.card-pad { padding: 16px 18px; }
.section + .section { margin-top: 12px; }
.section-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 10px; margin: 0 0 13px; font-size: 13.5px; font-weight: 700; }
.section-title .idx { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .04em; color: var(--accent); }
.section-help { color: var(--dim); font-size: 12px; font-weight: 300; line-height: 1.5; max-width: 62ch; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stack { display: grid; gap: 12px; }
/* Вертикальный ритм экрана и вкладки. Расстояние между блоками задаёт контейнер, а не сам
   блок: иначе оно зависит от того, какая карточка попалась - у одной свой margin, у другой
   класс `section`, у третьей ничего, - и на разных вкладках блоки стоят то вплотную, то
   через отступ. Собственные margin-ы внутри контейнера гасятся, чтобы зазор не удваивался,
   а пустой слот (например, очередь у проекта, который уже работает) не создавал пустоты. */
.page-stack, .tab-stack { display: grid; gap: 12px; align-content: start; }
.page-stack > .section + .section, .tab-stack > .section + .section { margin-top: 0; }
.page-stack > :empty, .tab-stack > :empty { display: none; }
.divider { height: 1px; margin: 18px 0; border: 0; background: var(--line); }

details.card > summary { display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--text); }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--dim); }
details.card[open] > summary::after { content: "–"; }
.advanced-body { margin-top: 14px; }

/* ---------- формы ---------- */
.field { display: grid; gap: 5px; }
.field-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.field-help { color: var(--dim); font-size: 11.5px; line-height: 1.5; max-width: 66ch; }
input, textarea, select { width: 100%; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--well); color: var(--text); font-size: 13px; outline: none; transition: border-color .14s, box-shadow .14s; }
input::placeholder, textarea::placeholder { color: #5d7387; }
textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
input:disabled, textarea:disabled, select:disabled { color: var(--dim); background: #0a1017; }
input[type=number] { font-family: var(--mono); font-size: 12.5px; }
select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* ---------- кнопки ---------- */
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 17px; border: 1px solid transparent; border-radius: var(--r-full); background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .14s, color .14s, border-color .14s; }
.button:hover:not(:disabled) { background: #a4eeff; }
.button.secondary { border-color: var(--line-2); background: var(--inset); color: var(--text); font-weight: 500; }
.button.secondary:hover:not(:disabled) { background: var(--hover); }
.button.ghost { background: transparent; color: var(--muted); font-weight: 500; }
.button.ghost:hover:not(:disabled) { background: var(--inset); color: var(--text); }
.button.danger { border-color: var(--red-edge); background: var(--red-dim); color: var(--red-text); font-weight: 500; }
.button.danger:hover:not(:disabled) { background: rgba(255, 123, 132, .24); }
.button.small { min-height: 29px; padding: 0 13px; font-size: 12px; }
.button .nav-icon svg { stroke-width: 1.9; }
.nav-icon { display: grid; place-items: center; width: 16px; height: 16px; }
.nav-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; }

/* ---------- создание: режимы, переключатели, ссылки ---------- */
.brief-layout { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 16px; align-items: start; }
.brief-guide { border-left: 1px solid var(--line-2); padding-left: 13px; }
.brief-guide h3 { margin: 0 0 9px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.brief-guide ul { margin: 0; padding: 0; list-style: none; display: grid; }
.brief-guide li { padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.45; }
.brief-guide li:last-child { border-bottom: 0; }

.mode-grid { display: grid; gap: 8px; padding: 0 18px 16px; }
.mode-card { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(110px, 210px); gap: 14px; align-items: center; padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--inset); cursor: pointer; transition: background .14s, border-color .14s; }
.mode-card:hover { background: var(--hover); border-color: var(--line-2); }
.mode-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mode-mark { width: 12px; height: 12px; border-radius: var(--r-full); border: 1.5px solid var(--line-2); transition: border-color .14s, background .14s, box-shadow .14s; }
.mode-card:has(input:checked) { background: var(--accent-dim); border-color: var(--accent-edge); }
.mode-card:has(input:checked) .mode-mark { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 2.5px var(--panel); }
.mode-card strong { display: block; font-size: 12.5px; font-weight: 500; }
.mode-desc { display: block; margin-top: 2px; color: var(--dim); font-size: 11.5px; line-height: 1.45; max-width: 62ch; }
.mode-state { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .04em; text-align: right; color: var(--green); }
.mode-state.warn { color: var(--amber); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1px solid var(--line); }
.switch-row:first-child { padding-top: 0; border-top: 0; }
.switch-row:last-child { padding-bottom: 0; }
.switch-copy strong { display: block; font-size: 12.5px; font-weight: 500; }
.switch-copy span { display: block; margin-top: 2px; color: var(--dim); font-size: 11.5px; line-height: 1.45; max-width: 62ch; }
.switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--inset); transition: background .16s, border-color .16s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--r-full); background: var(--dim); transition: transform .16s, background .16s; }
.switch[aria-checked="true"] { border-color: var(--accent-edge); background: var(--accent-dim); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--accent); }

.url-add { display: flex; gap: 7px; }
.url-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.url-chips:empty { margin-top: 0; }
.url-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 6px 5px 12px; border-radius: var(--r-full); background: var(--inset); color: var(--muted); font-family: var(--mono); font-size: 10px; }
.url-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.url-chip button { width: 17px; height: 17px; display: grid; place-items: center; border: 0; border-radius: var(--r-full); background: var(--hover); color: var(--muted); font-size: 11px; line-height: 1; transition: background .14s, color .14s; }
.url-chip button:hover { background: rgba(255, 123, 132, .26); color: var(--text); }

/* правая приборная колонка */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 258px; gap: 14px; align-items: start; }
.slate-rail { position: sticky; top: 58px; display: grid; gap: 12px; }
.slate-title { margin: 0 0 11px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.kv:first-of-type { border-top: 0; padding-top: 0; }
.kv .k { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.kv .v { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv .v.acc { color: var(--accent); }
.kv .v.muted { color: var(--dim); }
.svc-line { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 5px 0; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.svc-line > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-line i { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--green); }
.svc-line.off i { background: var(--amber); }
.svc-line .st { font-size: 9px; font-weight: 500; letter-spacing: .08em; color: var(--dim); }

/* шкала готовности: сегменты с числом, а не тонкая полосочка */
.gauge { margin-top: 11px; }
.gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.gauge-head b { font-size: 13px; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.gauge-head b.acc { color: var(--accent); }
.bar { display: flex; gap: 2px; height: 6px; }
.bar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--hover); }
.bar i.on { background: var(--accent); }
.bar i.warn { background: var(--amber); }
.bar i.bad { background: var(--red); }
.bar i.done { background: var(--green); }

/* липкая панель запуска */
#create-form :is(input, textarea, select, button, .mode-card) { scroll-margin-bottom: 96px; }
.summary-bar { position: sticky; z-index: 10; bottom: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 12px; padding: 12px 12px 12px 18px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: linear-gradient(180deg, rgba(24, 36, 50, .95), rgba(16, 25, 35, .99)); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.slate { display: flex; flex-wrap: wrap; gap: 6px 26px; min-width: 0; }
.slate-cell { display: grid; gap: 2px; min-width: 0; }
.slate-key { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.slate-value { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slate-value.muted { color: var(--muted); }

/* ---------- сообщения ---------- */
.inline-alert { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; padding: 11px 14px; border: 1px solid var(--accent-edge); border-left-width: 3px; border-radius: var(--r-sm); background: var(--accent-dim); color: var(--text); font-size: 12.5px; line-height: 1.5; }
.inline-alert.error { border-color: var(--red-edge); background: var(--red-dim); color: var(--red-text); }
.inline-alert.success { border-color: var(--green-edge); background: var(--green-dim); color: var(--green-text); }
.inline-alert.wait { border-color: var(--amber-edge); background: var(--amber-dim); color: var(--amber-text); }
.inline-alert strong { font-weight: 700; }
.inline-alert .button { flex: 0 0 auto; }

/* ---------- статусы: точка плюс машинный код ---------- */
.status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.status::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--dim); }
.status.queued::before, .status.processing::before, .status.rendering::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.status.awaiting_review::before { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.status.completed::before { background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.status.failed::before, .status.cancelled::before { background: var(--red); box-shadow: 0 0 0 3px var(--red-dim); }
.status .human { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); }

/* ---------- история ---------- */
.bus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); margin-bottom: 12px; }
.bus > div { padding: 10px 14px; border-left: 1px solid var(--line); }
.bus > div:first-child { border-left: 0; }
.bus .k { display: block; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
.bus .v { display: block; font-family: var(--display); font-size: 23px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.bus .v.acc { color: var(--accent); }
.bus .v.wait { color: var(--amber); }
.bus .v.done { color: var(--green); }
.bus .sub { display: block; margin-top: 5px; font-family: var(--mono); font-size: 9px; color: var(--dim); }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
table { width: 100%; min-width: 820px; border-collapse: collapse; text-align: left; }
th { padding: 9px 12px; border-bottom: 1px solid var(--line-2); background: var(--inset); color: var(--dim); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; vertical-align: middle; }
th:first-child, td:first-child { padding-left: 15px; }
th:last-child, td:last-child { padding-right: 15px; text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .14s; }
tbody tr:hover { background: var(--inset); }
.project-link { display: block; max-width: 30ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); font-weight: 500; text-decoration: none; }
.project-link:hover { color: var(--accent); }
.subline { display: block; max-width: 30ch; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.cell-time { color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.cell-event { max-width: 24ch; color: var(--dim); font-size: 12px; }
.progress-cell { min-width: 128px; }
.progress-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.progress-label b { font-size: 12px; font-weight: 700; letter-spacing: -.03em; color: var(--text); }

/* ---------- карточка проекта ---------- */
.detail-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; padding: 18px; }
.detail-top h1 { font-size: clamp(24px, 2.5vw, 36px); }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 11px; }
.detail-top .page-description { margin-top: 12px; }
.detail-top .inline-alert { margin-top: 14px; }
.detail-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-left: 24px; border-left: 1px solid var(--line); }
.detail-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.progress-panel { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px 18px; }
.progress-figure .v { display: block; font-family: var(--display); font-size: 40px; font-weight: 700; line-height: .95; letter-spacing: -.02em; }
.progress-figure .k { display: block; margin-top: 8px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.progress-figure .bar { margin-top: 10px; height: 8px; }
.pipeline { display: grid; }
.stage { display: grid; grid-template-columns: 10px 108px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line); }
.stage:first-child { border-top: 0; padding-top: 0; }
.stage-dot { position: relative; top: 1px; width: 9px; height: 9px; border-radius: var(--r-full); background: var(--hover); }
.stage.completed .stage-dot, .stage.skipped .stage-dot { background: var(--green); }
.stage.skipped .stage-dot { opacity: .45; }
.stage.running .stage-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.stage.waiting .stage-dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.stage.failed .stage-dot, .stage.cancelled .stage-dot { background: var(--red); box-shadow: 0 0 0 3px var(--red-dim); }
.stage-name { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .04em; color: var(--dim); }
.stage.completed .stage-name, .stage.running .stage-name, .stage.waiting .stage-name, .stage.failed .stage-name { color: var(--text); }
.stage-detail { color: var(--dim); font-size: 12px; line-height: 1.45; max-width: 66ch; }
.stage.failed .stage-detail { color: var(--red-text); }
.stage-count { font-family: var(--mono); font-size: 10px; color: var(--dim); white-space: nowrap; }

/* Шкала готовности проекта: одна непрерывная заливка вместо сегментов, потому что за ней
   следят минутами. Ширина меняется только когда сервер сообщил новую измеренную готовность,
   а переход растягивает это изменение во времени - полоса едет, а не прыгает. Блик поверх
   заливки означает «работа идёт» и включается классом live; когда движения нет полторы
   минуты, класс снимается, блик гаснет, и рядом появляется подпись. Полоса при этом не
   двигается ни на пиксель: единственный источник её ширины - завершённая работа. */
.pmeter { position: relative; height: 10px; margin-top: 10px; border-radius: var(--r-full); background: var(--well); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.pmeter-fill { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width 1.6s cubic-bezier(.25, .8, .3, 1); }
.pmeter-fill.warn { background: var(--amber); }
.pmeter-fill.bad { background: var(--red); }
.pmeter-fill.done { background: var(--green); }
.pmeter.live .pmeter-fill { position: relative; overflow: hidden; }
.pmeter.live .pmeter-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent); transform: translateX(-100%); animation: sweep 1.9s linear infinite; }
@keyframes sweep { to { transform: translateX(100%); } }
.pmeter.stalled .pmeter-fill { opacity: .6; }
.p-note { display: block; margin-top: 7px; min-height: 13px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }

/* ---------- время производства ----------
   Коэффициент стоит первым и крупным: это число, ради которого экран открывают. Цвет -
   единственное, что здесь оценочно: зелёный внутри цели, янтарный на четверть выше, красный
   дальше. Полоски стадий лежат на общей шкале прогона, поэтому наложение монтажа на картинки
   видно глазом, а не пересчётом; самая длинная подсвечена как узкое место. */
.tgrid { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); gap: 20px; align-items: center; }
.thero { display: grid; gap: 3px; padding-right: 20px; border-right: 1px solid var(--line); }
.thero-v { font-family: var(--display); font-size: clamp(34px, 4.6vw, 54px); font-weight: 700; line-height: .92; letter-spacing: -.03em; color: var(--text); }
.thero-v.good { color: var(--green); }
.thero-v.warn { color: var(--amber); }
.thero-v.bad { color: var(--red); }
.thero-k { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); line-height: 1.5; }
.thero-note { margin-top: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.thero-note.good { color: var(--green-text); }
.thero-note.warn { color: var(--amber-text); }
.thero-note.bad { color: var(--red-text); }
.tfigures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; }
.tfig { display: grid; gap: 2px; align-content: start; min-width: 0; }
.tfig .k { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.tfig .v { font-family: var(--mono); font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--text); }
.tfig .n { font-family: var(--mono); font-size: 9px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.t-live { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.t-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.t-foot .v.warn { color: var(--amber); }
.tspan { margin-top: 14px; display: grid; gap: 2px; }
.tspan-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 62px 38px; gap: 10px; align-items: center; padding: 3px 0; }
.tspan-name { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tspan-track { position: relative; height: 9px; border-radius: var(--r-full); background: var(--well); overflow: hidden; }
.tspan-track i { position: absolute; top: 0; height: 100%; min-width: 2px; border-radius: var(--r-full); background: var(--accent); opacity: .68; }
.tspan-row.peak .tspan-track i { background: var(--amber); opacity: 1; }
.tspan-row.peak .tspan-name, .tspan-row.peak .tspan-val { color: var(--amber-text); }
.tspan-row.live .tspan-track i { box-shadow: 0 0 0 1px var(--accent-edge); }
.tspan-val { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }
.tspan-share { font-family: var(--mono); font-size: 9.5px; color: var(--dim); text-align: right; }

/* Обновление, которое отложили, потому что человек работал в панели. */
.panel-stale { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 7px 12px; border: 1px solid var(--accent-edge); border-radius: var(--r-full); background: var(--accent-dim); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text); width: fit-content; }
.panel-stale[hidden] { display: none; }
.asset-picker-note { display: block; margin: 0; }
#asset-picker-slot .asset-picker + .asset-picker-note { margin-top: 6px; }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.tab { position: relative; min-height: 32px; padding: 0 15px; border: 0; border-radius: var(--r-full); background: var(--panel); color: var(--dim); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: color .14s, background .14s; }
.tab:hover { color: var(--text); background: var(--inset); }
.tab.active { color: var(--accent-ink); background: var(--accent); font-weight: 700; }
.tab-panel { margin-top: 12px; }

/* ---------- сцены и материалы ---------- */
.scene-list { display: grid; gap: 8px; }
.card > .scene-list { padding: 0 18px 16px; }
.scene { display: grid; grid-template-columns: 44px minmax(0, 1fr) 140px; gap: 14px; padding: 13px 15px; border-radius: var(--r-sm); background: var(--inset); }
.scene-number { align-self: start; width: 44px; padding: 4px 0; text-align: center; border-radius: var(--r-full); background: var(--accent-dim); color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: -.02em; }
.scene-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.scene-title strong { font-size: 12.5px; font-weight: 700; }
.scene-copy { margin: 7px 0 0; color: var(--text); font-size: 13px; line-height: 1.55; max-width: 76ch; }
.scene-visual { margin: 6px 0 0; color: var(--dim); font-size: 12px; line-height: 1.5; max-width: 76ch; }
.scene-visual .k { margin-right: 6px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.scene .record { margin-top: 8px; }
.scene-aside { display: grid; align-content: start; gap: 5px; justify-items: end; text-align: right; }
.asset-mini { color: var(--dim); font-family: var(--mono); font-size: 9.5px; line-height: 1.5; }

.media-frame { overflow: hidden; border-radius: var(--r-sm); background: var(--well); }
.media-frame img, .media-frame video { display: block; width: 100%; max-height: 240px; object-fit: contain; background: var(--well); }
.media-frame audio { width: 100%; padding: 12px; }
.output-frame video { max-height: 480px; }
.media-row { display: grid; gap: 7px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--inset); }
.media-row audio { width: 100%; height: 32px; }
.media-title { font-size: 12.5px; font-weight: 500; }
.tag { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 3px 9px; border-radius: var(--r-full); background: var(--hover); color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.asset-item { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 13px 15px; border-radius: var(--r-sm); background: var(--inset); }
.asset-thumb { align-self: start; background: var(--well); }
.asset-thumb img, .asset-thumb video { height: 80px; object-fit: cover; }
.asset-item .scene-visual { margin-top: 5px; }
.asset-item .record { margin-top: 8px; }

/* ---------- ТАЙМЛАЙН: сцены как клипы, ширина пропорциональна длительности ---------- */
.timeline { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.tl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; padding: 9px 13px; border-bottom: 1px solid var(--line); background: var(--inset); }
.tl-head .stamp { grid-auto-flow: row; }
.tl-head .stamp .v { font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: -.03em; }
.tl-head .stamp .v.acc { color: var(--accent); }
.tl-head .spacer { flex: 1; }
.tl-scroll { overflow-x: auto; scrollbar-width: thin; }
.tl-body { min-width: 620px; padding: 12px 13px 0; }
.tl-track { display: flex; gap: 4px; align-items: stretch; }
.tl-clip { position: relative; display: flex; flex-direction: column; justify-content: space-between; flex-basis: 0; min-width: 46px; height: 68px; padding: 8px 9px 7px; border: 0; border-top: 3px solid var(--line-2); border-radius: 7px; background: var(--inset); color: var(--muted); text-align: left; overflow: hidden; transition: background .14s, color .14s, border-color .14s; }
.tl-clip:hover { background: var(--hover); color: var(--text); }
.tl-clip.active { background: var(--accent-dim); border-top-color: var(--accent); color: var(--text); }
.tl-clip.pending { border-top-color: var(--amber); background-image: repeating-linear-gradient(135deg, rgba(240, 182, 79, .09) 0 6px, transparent 6px 12px); }
.tl-clip.pending.active { background-color: var(--accent-dim); }
.tl-n { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: -.03em; color: var(--accent); }
.tl-clip.pending .tl-n { color: var(--amber); }
.tl-copy { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tl-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 4px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: -.01em; color: var(--dim); }
.tl-clip.active .tl-foot { color: var(--muted); }
.tl-kind { text-transform: uppercase; letter-spacing: .06em; }
.tl-ruler { position: relative; height: 24px; margin: 0 13px; border-top: 1px solid var(--line); }
.tl-tick { position: absolute; top: 0; padding-top: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: -.02em; color: var(--dim); white-space: nowrap; transform: translateX(-50%); }
.tl-tick::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 4px; background: var(--line-2); }
.tl-tick.first { transform: translateX(0); }
.tl-tick.first::before { left: 0; }
.tl-tick.last { transform: translateX(-100%); }
.tl-tick.last::before { left: auto; right: 0; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 4px 13px 11px; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tl-legend i { width: 14px; height: 4px; border-radius: var(--r-full); background: var(--line-2); }
.tl-legend i.ready { background: var(--accent); }
.tl-legend i.wait { background: var(--amber); }

/* ---------- проверка плана ---------- */
.review-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 12px; align-items: start; margin-top: 12px; }
.inspector { display: grid; gap: 12px; padding: 15px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.inspector-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.inspector-head h3 { margin: 0; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0; }
.inspector .media-frame { background: var(--well); }
.inspector .media-frame img, .inspector .media-frame video { max-height: 250px; }
.inspector .empty { min-height: 130px; }
.asset-picker { display: flex; align-items: flex-end; gap: 9px; }
.asset-picker .field { flex: 1; min-width: 0; }
.review-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }

/* ---------- настройки ---------- */
.provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 18px 16px; }
.provider-card { display: grid; align-content: start; gap: 9px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--inset); }
.provider-card h3 { margin: 0; font-size: 13px; font-weight: 700; }
.provider-card p { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.45; max-width: 52ch; }
.provider-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.provider-status::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--dim); }
.provider-status.configured::before { background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.provider-status.warning::before { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }
.provider-status .mask { color: var(--dim); text-transform: none; letter-spacing: -.01em; }
.provider-fields { display: grid; gap: 11px; margin-top: 3px; padding-top: 12px; border-top: 1px solid var(--line); }
.provider-fields[hidden] { display: none; }
.secret-note { color: var(--dim); font-size: 11px; line-height: 1.45; }
.json-area { min-height: 90px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; }
.code-box { padding: 11px 14px; overflow: auto; border-radius: var(--r-sm); background: var(--well); color: var(--accent); font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: .14em; }

/* ---------- музыкальная библиотека ---------- */
/* Карточка трека — та же карточка сервиса, плюс прослушивание прямо в списке. */
.track-card audio { width: 100%; height: 30px; margin-top: 2px; border-radius: var(--r-full); background: var(--well); }
.track-card p a { color: var(--accent); }

/* ---------- аккаунт ---------- */
.account-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(270px, .95fr); gap: 12px; align-items: start; }
.account-credentials { grid-column: 1 / -1; }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.list-item:first-child { padding-top: 0; border-top: 0; }
.list-item strong { font-size: 12.5px; font-weight: 500; }
.list-item .list-sub { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; max-width: 64ch; }
.list-item .record { margin-top: 3px; }
.session-row { display: grid; gap: 5px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--inset); }
.session-row strong { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--text); }

/* ---------- пусто и загрузка ---------- */
.empty { display: grid; min-height: 210px; place-items: center; align-content: center; gap: 10px; padding: 32px 24px; border: 1px dashed var(--line-2); border-radius: var(--r-md); text-align: center; color: var(--dim); }
.empty-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--accent-dim); color: var(--accent); }
.empty-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.empty h2 { margin: 2px 0 0; color: var(--text); font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.empty p { max-width: 52ch; margin: 0; font-size: 12.5px; }
.skeleton { position: relative; overflow: hidden; min-height: 18px; border-radius: var(--r-sm); background: var(--inset); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--sheen), transparent); animation: shimmer 1.5s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- адаптив ---------- */
@media (max-width: 1180px) {
  .desk { grid-template-columns: 1fr; }
  .slate-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .content { padding: 16px 18px 28px; }
  .detail-top { grid-template-columns: 1fr; }
  .detail-actions { align-items: flex-start; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .detail-buttons { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { grid-template-columns: 14px minmax(0, 1fr); }
  .mode-state { grid-column: 2; text-align: left; }
  .provider-grid { grid-template-columns: 1fr; }
  .account-panel { grid-template-columns: 1fr; }
  .bus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bus > div:nth-child(3) { border-left: 0; }
  .bus > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .brief-layout { grid-template-columns: 1fr; }
  .brief-guide { border-left: 0; border-top: 1px solid var(--line-2); padding: 11px 0 0; }
  .progress-panel { grid-template-columns: 1fr; gap: 14px; }
  .tgrid { grid-template-columns: 1fr; gap: 14px; }
  .thero { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tfigures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .shell { display: block; }
  .sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(264px, 84vw); transform: translateX(-105%); transition: transform .2s; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .menu-button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; -webkit-appearance: none; appearance: none; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--inset); color: var(--muted); }
  .menu-button .nav-icon { margin: 0; flex: 0 0 auto; }
  .menu-button .nav-icon svg { display: block; }
  .menu-button:hover { color: var(--text); background: var(--hover); }
  .topbar { padding: 0 14px; }
  .topbar-crumb, .connection { display: none; }
  /* Полоска остаётся - именно она отвечает на вопрос "сколько места". Подпись уходит,
     чтобы шапка не переполнялась на узком экране. */
  .disk-chip { padding: 3px 8px; gap: 6px; }
  .disk-label { display: none; }
  .content { padding: 14px 14px 26px; }
  .page-head { grid-template-columns: 1fr; gap: 14px; }
  .head-readout { justify-content: flex-start; text-align: left; }
  .head-readout .stamp { justify-items: start; }
  .grid-2 { grid-template-columns: 1fr; }
  .slate-rail { grid-template-columns: 1fr; }
  .summary-bar { grid-template-columns: 1fr; gap: 10px; }
  .summary-bar .button { width: 100%; }
  .asset-picker { flex-direction: column; align-items: stretch; }
  .asset-picker .button { width: 100%; }
  .scene { grid-template-columns: 40px minmax(0, 1fr); }
  .scene-aside { grid-column: 2; justify-items: start; text-align: left; }
  .asset-item { grid-template-columns: 1fr; }
  .asset-thumb img, .asset-thumb video { height: 150px; }
  .auth-card { padding: 24px 20px 22px; }
}
@media (max-width: 480px) {
  .topbar { min-height: 42px; gap: 8px; }
  .account-chip span:last-child { display: none; }
  .disk-value { display: none; }
  .disk-track { width: 32px; }
  .content { padding: 12px 12px 24px; }
  .card-pad, .detail-top { padding: 14px; }
  .mode-grid, .provider-grid, .card > .scene-list { padding: 0 14px 14px; }
  .url-add { flex-direction: column; }
  .url-add .button { width: 100%; }
  .switch-row { align-items: flex-start; gap: 12px; }
  .detail-buttons .button { flex: 1 1 auto; }
  .media-frame img, .media-frame video { max-height: 190px; }
  .code-box { font-size: 15px; letter-spacing: .1em; }
  .bus { grid-template-columns: 1fr; }
  .bus > div { border-left: 0; border-top: 1px solid var(--line); }
  .bus > div:first-child { border-top: 0; }
  .progress-figure .v { font-size: 38px; }
  .tfigures { grid-template-columns: 1fr; }
  .tspan-row { grid-template-columns: 74px minmax(0, 1fr) 54px 32px; gap: 7px; }
}