/* Основа: сброс, палитра, шрифты, типовые мелочи.
   Значения перенесены из исходного макета один в один — вид не меняется. */

:root {
  --bg: #0A0A09;          /* фон страницы */
  --fg: #E8DFCD;          /* основной текст и акцент */
  --panel: #0F0F0D;       /* фон полей ввода */
  --ok: #8FBF7F;          /* успех */
  --err: #C96B5B;         /* ошибка */
  --mono: 'JetBrains Mono', monospace;
  /* Один шрифт на весь интерфейс. Archivo из макета убран: панель
     техническая, и моноширинный текст в ней читается ровнее — цифры
     параметров и тайм-коды стоят в колонку сами собой. */
  --sans: 'JetBrains Mono', monospace;

  /* Оттенки основного цвета. В макете они заданы как rgba(232,223,205,a);
     вынесены сюда, потому что повторяются в каждом втором правиле. */
  --l07: rgba(232, 223, 205, 0.07);
  --l10: rgba(232, 223, 205, 0.10);
  --l12: rgba(232, 223, 205, 0.12);
  --l14: rgba(232, 223, 205, 0.14);
  --l16: rgba(232, 223, 205, 0.16);
  --l18: rgba(232, 223, 205, 0.18);
  --l20: rgba(232, 223, 205, 0.20);
  --l22: rgba(232, 223, 205, 0.22);
  --l25: rgba(232, 223, 205, 0.25);
  --l28: rgba(232, 223, 205, 0.28);
  --l30: rgba(232, 223, 205, 0.30);
  /* Оттенки от 35 и выше — это текст: подсказки, подписи, метки. Они
     подняты ярче номинала, иначе мелкий текст на тёмном фоне не читается.
     Оттенки до 30 — рамки и заливки, их не трогаем. */
  --l35: rgba(232, 223, 205, 0.50);
  --l40: rgba(232, 223, 205, 0.56);
  --l42: rgba(232, 223, 205, 0.58);
  --l45: rgba(232, 223, 205, 0.62);
  --l50: rgba(232, 223, 205, 0.66);
  --l55: rgba(232, 223, 205, 0.70);
  --l60: rgba(232, 223, 205, 0.74);
  --l65: rgba(232, 223, 205, 0.78);
  --l70: rgba(232, 223, 205, 0.82);
  --l75: rgba(232, 223, 205, 0.85);
  --l80: rgba(232, 223, 205, 0.88);
  --l85: rgba(232, 223, 205, 0.91);
}

* { box-sizing: border-box; }

/* Атрибут hidden должен скрывать всегда.
   По умолчанию он ставит display:none с обычным весом, и любое правило вида
   `.card { display: flex }` его перебивает — элемент остаётся на экране, хотя
   разметка считает его скрытым. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  min-height: 100vh;
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--fg); text-decoration: none; }
a:hover { color: #ffffff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--l18); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Типографика ─────────────────────────────────────────────────────────── */

.mono { font-family: var(--mono); }

/* Подпись над полем: мелкие разряженные прописные. */
.label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l40);
}

/* Заголовок блока. */
.caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.caption-strong { color: var(--l80); }

/* Поясняющий текст под элементом. */
.hint { font-size: 12px; color: var(--l40); line-height: 1.4; }
.hint-soft { font-size: 12px; color: var(--l42); line-height: 1.45; }
.hint-lg { font-size: 12px; color: var(--l45); line-height: 1.5; }

.meta { font-family: var(--mono); font-size: 12px; color: var(--l45); }
.meta-dim { font-family: var(--mono); font-size: 11px; color: var(--l40); }

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.break-all { word-break: break-all; }

.ok { color: var(--ok); }
.err { color: var(--err); }

/* ── Раскладка ───────────────────────────────────────────────────────────── */

.page {
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-studio { max-width: 1080px; gap: 20px; }
.page-narrow { max-width: 940px; }
.page-settings { max-width: 720px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row-center { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.stack { display: flex; flex-direction: column; gap: 7px; }

/* Обёртка для списков, которые рисует JS.
   Без display:contents она стала бы одним flex-элементом и съела бы gap
   родителя — карточки слиплись бы в одну колонку без отступов. */
.contents { display: contents; }