/* ─────────────────────────────────────────────────────────────────────────
   Сервис видеогенерации. Панель управления одной видеокартой, не витрина.

   Одно семейство на всё — IBM Plex: санс для интерфейса, моно для любых
   чисел. Гарнитуру рисовали для приборных интерфейсов, и здесь она уместна
   буквально. Декоративных начертаний нет вовсе.

   Прямые углы, волосяные границы, без теней. Цвет — почти монохром; синий
   появляется только там, где есть состояние: фокус, выбор, работа.
   Тёмной темы нет намеренно.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --paper:      #FFFFFF;
  --page:       #F4F4F5;
  --sunk:       #FAFAFA;
  --line:       #E0E0E2;
  --line-firm:  #C6C6CB;
  --ink:        #0F0F11;
  --ink-2:      #52525B;
  --ink-3:      #8E8E96;
  --state:      #0F62FE;   /* IBM Blue 60 — из того же семейства, что и шрифт */
  --state-soft: #EDF3FF;
  --warn:       #8A5300;

  --u: 0.5rem;             /* базовая единица сетки */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Каркас ──────────────────────────────────────────────────────────── */

.page {
  max-width: 74rem;
  margin: 0 auto;
  padding: calc(var(--u) * 4) calc(var(--u) * 3) calc(var(--u) * 10);
}

.bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--u);
  padding-bottom: calc(var(--u) * 1.5);
  margin-bottom: calc(var(--u) * 3);
  border-bottom: 1px solid var(--line-firm);
}
.bar h1 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: calc(var(--u) * 2);
  align-items: start;
}
@media (max-width: 60rem) {
  .split { grid-template-columns: 1fr; }
  .queue-col { order: -1; }
}

.panel { background: var(--paper); border: 1px solid var(--line); }
.panel > * { padding: calc(var(--u) * 2); }
.panel > * + * { border-top: 1px solid var(--line); }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--u);
  padding-block: calc(var(--u) * 1.25);
  background: var(--sunk);
}
h2.panel-label { margin: 0; }
.panel-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.avg { font-size: 0.75rem; color: var(--ink-3); }

.queue-col { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }

/* ── Поля ────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: calc(var(--u) * 0.75); }
.field > label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hint { font-size: 0.75rem; color: var(--ink-3); }

textarea, input[type="number"], select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-firm);
  border-radius: 0;
  padding: calc(var(--u) * 0.875) var(--u);
  transition: border-color .12s linear, box-shadow .12s linear;
}
textarea { resize: vertical; line-height: 1.5; }
#prompt { min-height: 5.5rem; }
textarea::placeholder { color: #B6B6BD; }

:is(textarea, input, select):focus-visible {
  outline: none;
  border-color: var(--state);
  box-shadow: inset 0 0 0 1px var(--state);
}

/* ── Файл ────────────────────────────────────────────────────────────── */

.drop {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.25);
  border: 1px dashed var(--line-firm);
  background: var(--sunk);
  cursor: pointer;
  transition: border-color .12s linear, background .12s linear;
}
.drop:hover, .drop:focus-visible { border-color: var(--state); background: var(--state-soft); outline: none; }
.drop .thumb {
  width: 3.5rem; height: 3.5rem; flex: none;
  background: var(--paper) center/cover no-repeat;
  border: 1px solid var(--line-firm);
  transition: width .18s linear, height .18s linear;
}
.drop-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1; }
.drop-clear {
  flex: none;
  font: inherit; font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line-firm);
  cursor: pointer;
  transition: border-color .12s linear, color .12s linear;
}
.drop-clear:hover { border-color: var(--state); color: var(--state); }
.drop-clear:focus-visible { outline: 2px solid var(--state); outline-offset: 2px; }
.drop strong {
  font-weight: 500; font-size: 0.8125rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Выбор из немногих ───────────────────────────────────────────────── */

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-firm); border: 1px solid var(--line-firm); }
@media (max-width: 30rem) { .modes { grid-template-columns: 1fr; } }

.choice {
  display: flex; flex-direction: column; gap: 0.125rem;
  padding: calc(var(--u) * 1.25);
  text-align: left;
  font: inherit; color: inherit;
  background: var(--paper);
  border: 0;
  cursor: pointer;
  transition: background .12s linear;
}
.choice:hover { background: var(--sunk); }
.choice:focus-visible { outline: 2px solid var(--state); outline-offset: -2px; }
.choice strong { font-weight: 500; font-size: 0.8125rem; }
.choice span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem; color: var(--ink-3);
}
.choice[aria-pressed="true"] { background: var(--state-soft); box-shadow: inset 2px 0 0 var(--state); }
.choice[aria-pressed="true"] strong { color: var(--state); }

/* ── Параметры ───────────────────────────────────────────────────────── */

.tuning { }
.tuning > summary {
  display: flex; align-items: center; gap: calc(var(--u) * 0.75);
  cursor: pointer; list-style: none; width: max-content;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2);
  user-select: none;
}
.tuning > summary::-webkit-details-marker { display: none; }
.tuning > summary::before {
  content: "";
  width: 0.375rem; height: 0.375rem; flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s linear;
}
.tuning[open] > summary::before { transform: rotate(45deg); }
.tuning > summary:hover { color: var(--state); }
.tuning > summary:focus-visible { outline: 2px solid var(--state); outline-offset: 3px; }

.tuning-body {
  padding-top: calc(var(--u) * 2);
  display: flex; flex-direction: column;
  gap: calc(var(--u) * 2);
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.5); }
@media (max-width: 30rem) { .grid2 { grid-template-columns: 1fr; } }

/* Кадр */
.tier { display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); }
.tier + .tier { margin-top: var(--u); }
.tier-name { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; color: var(--ink-3); }
.shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-firm); border: 1px solid var(--line-firm); }

.shape {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.5);
  padding: calc(var(--u) * 0.875) calc(var(--u) * 0.5);
  font: inherit; color: inherit;
  background: var(--paper); border: 0;
  cursor: pointer;
  transition: background .12s linear;
}
.shape:hover:not(:disabled) { background: var(--sunk); }
.shape:focus-visible { outline: 2px solid var(--state); outline-offset: -2px; }
.shape[aria-pressed="true"] { background: var(--state-soft); }
.shape:disabled { opacity: .35; cursor: not-allowed; }

.glyph { background: var(--line-firm); transition: background .12s linear; }
.shape[aria-pressed="true"] .glyph { background: var(--state); }
.dim { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; color: var(--ink-3); }
.shape[aria-pressed="true"] .dim { color: var(--state); }

/* Возврат к рекомендованным значениям. Гаснет, когда возвращать нечего —
   так видно, трогали параметры или нет. */
.tuning-reset {
  display: flex;
  justify-content: flex-end;
  padding-top: calc(var(--u) * 1.5);
  border-top: 1px solid var(--line);
}
.reset {
  font: inherit; font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line-firm);
  cursor: pointer;
  transition: border-color .12s linear, color .12s linear;
}
.reset:hover:not(:disabled) { border-color: var(--state); color: var(--state); }
.reset:focus-visible { outline: 2px solid var(--state); outline-offset: 2px; }
.reset:disabled { color: var(--ink-3); border-color: var(--line); cursor: default; }

/* Сводка параметров: имя слева, управление справа. Ширина колонок одна на
   все ряды и на обе сводки, поэтому названия и элементы стоят по линейке. */
.sheet {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.5rem calc(var(--u) * 1.5);
  align-items: center;
}
@media (max-width: 34rem) { .sheet { grid-template-columns: 8.5rem minmax(0, 1fr); } }

.slider-row { display: contents; }

.p-name { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.p-name label { font-size: 0.8125rem; color: var(--ink-2); }

.p-control { display: flex; align-items: center; gap: calc(var(--u) * 1.25); min-width: 0; }
.p-control input[type="range"] { flex: 1; min-width: 0; }
.p-control :is(select, input[type="number"]) { flex: 1; min-width: 0; }

.slider-val {
  flex: none; width: 3rem; text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.slider-val.plain { width: auto; text-align: left; color: var(--ink-3); font-size: 0.6875rem; }

.slider-row.locked :is(.p-name label, .slider-val) { color: var(--ink-3); }
.slider-row.locked input { pointer-events: none; opacity: .35; }

/* Подсказка у названия параметра. */
.q {
  flex: none;
  width: 0.875rem; height: 0.875rem;
  display: grid; place-items: center;
  padding: 0; border: 1px solid var(--line-firm);
  border-radius: 50%;
  background: var(--paper);
  font: inherit; font-size: 0.5625rem; line-height: 1;
  color: var(--ink-3);
  cursor: help;
  position: relative;
  transition: border-color .12s linear, color .12s linear;
}
.q:hover, .q:focus-visible { border-color: var(--state); color: var(--state); outline: none; }

.q::after {
  content: attr(data-help);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: -0.5rem;
  z-index: 5;
  width: 19rem;
  max-width: 60vw;
  padding: calc(var(--u) * 0.875) var(--u);
  background: var(--ink);
  color: #F4F4F5;
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: left;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s linear, visibility .12s linear;
}
.q:hover::after, .q:focus-visible::after { opacity: 1; visibility: visible; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1rem; background: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--line-firm); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--line-firm); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.625rem; height: 0.625rem; margin-top: -0.3125rem;
  background: var(--ink); border: 0; border-radius: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 0.625rem; height: 0.625rem; background: var(--ink); border: 0; border-radius: 0;
}
input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--state); box-shadow: 0 0 0 3px var(--state-soft); }

.sheet :is(select, input[type="number"]) { padding: calc(var(--u) * 0.5) calc(var(--u) * 0.75); font-size: 0.8125rem; }
.sheet input[type="number"] { font-family: "IBM Plex Mono", monospace; }

/* ── Кнопки ──────────────────────────────────────────────────────────── */

.submit-row { display: flex; align-items: center; gap: calc(var(--u) * 1.5); flex-wrap: wrap; }
.estimate { font-size: 0.8125rem; color: var(--ink-2); }

.btn {
  font: inherit; font-weight: 500; font-size: 0.8125rem;
  padding: calc(var(--u) * 0.875) calc(var(--u) * 2.5);
  border: 1px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--paper);
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .12s linear, border-color .12s linear;
}
.btn:hover { background: var(--state); border-color: var(--state); }
.btn:focus-visible { outline: 2px solid var(--state); outline-offset: 2px; }
.btn:disabled { background: var(--line); border-color: var(--line); color: var(--ink-3); cursor: not-allowed; }

.btn.ghost { background: none; color: var(--ink); border-color: var(--line-firm); }
.btn.ghost:hover { border-color: var(--state); color: var(--state); background: none; }

/* ── Очередь ─────────────────────────────────────────────────────────── */

.slot { display: flex; flex-direction: column; gap: calc(var(--u) * 0.75); }
.slot + .slot { border-top: 1px solid var(--line); }
.slot-top { display: flex; align-items: center; gap: var(--u); }

.pos {
  width: 1.25rem; flex: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem; color: var(--ink-3);
}
.slot.live .pos { color: var(--state); }
.slot.you .pos { color: var(--ink); }

.who {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot.you .who { color: var(--state); }

.eta { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; color: var(--ink-3); flex: none; }
.slot.live .eta { color: var(--state); }

.you-tag {
  flex: none; font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0 0.25rem; color: var(--state); border: 1px solid var(--state);
}

/* Ход генерации: плоская линия и засечка на передаче между весами. */
.diffusion { display: flex; flex-direction: column; gap: 0.25rem; }
.track { position: relative; height: 2px; background: var(--line); }
.fill { position: absolute; inset: 0 auto 0 0; background: var(--state); transition: width .4s linear; }
.boundary { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--paper); }
.stage-row {
  display: flex; justify-content: space-between;
  font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; color: var(--ink-3);
}
.stage-row .on { color: var(--ink-2); }

.slot-actions { display: flex; gap: var(--u); }
.empty { margin: 0; color: var(--ink-3); font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; }

/* ── Результат и история ─────────────────────────────────────────────── */

.video-wrap { padding: 0; }
#result { width: 100%; display: block; background: #0F0F11; }
.result-actions { display: flex; align-items: center; gap: calc(var(--u) * 1.5); flex-wrap: wrap; }

.gen {
  display: flex; align-items: center; gap: var(--u);
  width: 100%; padding: calc(var(--u) * 1) 0;
  text-align: left; background: none; border: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.gen + .gen { border-top: 1px solid var(--line); }
.gen:hover .gen-prompt { color: var(--state); }
.gen:focus-visible { outline: 2px solid var(--state); outline-offset: -2px; }
.gen[aria-current="true"] .gen-prompt { color: var(--state); font-weight: 500; }
.gen:disabled { cursor: default; }

.gen-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.gen-prompt { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-meta { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; color: var(--ink-3); }
.gen.failed .gen-prompt { color: var(--warn); }
.gen.gone .gen-meta { color: var(--warn); }

.gen-save {
  flex: none; font-size: 0.75rem; color: var(--ink-2);
  text-decoration: none; border-bottom: 1px solid var(--line-firm);
}
.gen-save:hover { color: var(--state); border-bottom-color: var(--state); }
.gen-save:focus-visible { outline: 2px solid var(--state); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Справочные страницы ─────────────────────────────────────────────────
   Отдельная раскладка для чтения: одна колонка, строка около 70 знаков.
   Главная остаётся инструментом, объяснения живут здесь. */

.doc {
  max-width: 42rem;
  margin: 0 auto;
  padding: calc(var(--u) * 5) calc(var(--u) * 3) calc(var(--u) * 10);
}

.doc-back {
  display: inline-block;
  margin-bottom: calc(var(--u) * 4);
  font-size: 0.75rem;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-firm);
}
.doc-back:hover { color: var(--state); border-bottom-color: var(--state); }
.doc-back:focus-visible { outline: 2px solid var(--state); outline-offset: 3px; }

.doc h1 {
  margin: 0 0 calc(var(--u) * 1.5);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.doc .lead {
  margin: 0 0 calc(var(--u) * 4);
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.6;
}
.doc h2 {
  margin: calc(var(--u) * 4.5) 0 calc(var(--u) * 1.5);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: calc(var(--u) * 0.75);
  border-bottom: 1px solid var(--line);
}
.doc h3 {
  margin: calc(var(--u) * 2.5) 0 calc(var(--u) * 0.75);
  font-size: 0.9375rem;
  font-weight: 600;
}
.doc p { margin: 0 0 calc(var(--u) * 1.5); line-height: 1.65; }
.doc ul { margin: 0 0 calc(var(--u) * 1.5); padding-left: calc(var(--u) * 2.5); }
.doc li { margin-bottom: calc(var(--u) * 0.5); line-height: 1.6; }
.doc strong { font-weight: 600; }
.doc a { color: var(--state); text-decoration: none; border-bottom: 1px solid var(--accent-line, #B9CEFF); }
.doc a:hover { border-bottom-color: var(--state); }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 calc(var(--u) * 2);
  font-size: 0.8125rem;
}
.doc th, .doc td {
  padding: calc(var(--u) * 0.875) calc(var(--u) * 0.75);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.doc th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.doc td.num { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }

.doc .note-box {
  margin: 0 0 calc(var(--u) * 2);
  padding: calc(var(--u) * 1.5);
  background: var(--sunk);
  border-left: 2px solid var(--line-firm);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Подвал главной: тихая строка со ссылками, без меню. */
.foot {
  margin-top: calc(var(--u) * 4);
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--line);
  display: flex;
  gap: calc(var(--u) * 2.5);
  flex-wrap: wrap;
  font-size: 0.75rem;
}
.foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.foot a:hover { color: var(--state); border-bottom-color: var(--state); }
.foot a:focus-visible { outline: 2px solid var(--state); outline-offset: 3px; }