/* ai4you — оформление. Лаконичная современная тема (тёмная + светлая). */

/* Шрифт Inter (self-hosted, переменный). Отличная кириллица — как у Т-Банка/VK/Ozon. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.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;
}

:root {
  /* Тёмная тема (по умолчанию) */
  --bg: #0b0f1a;
  --bg-soft: #0f1524;
  --surface: #141b2d;
  --surface-2: #1a2338;
  --fg: #eaf0fa;
  --fg-strong: #f5f8fd;
  --muted: #93a2bd;
  --accent: #4f8cff;
  --accent-2: #7c5cff;
  --border: #23304d;
  --border-hover: #35456d;
  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
  --card-shadow: none;
  --ring: 0 0 0 3px rgba(79, 140, 255, .35);
  /* Ширина содержимого. Расширяется на мониторах шире FHD — см. media-запросы
     ниже по файлу: на 4K при 1080 px по краям остаётся по четверти экрана. */
  --maxw: 1080px;
  /* Цвета, зависящие от темы (переопределяются в светлой) */
  --hero-grad: linear-gradient(180deg, #fff, #b9c6e6);
  --topbar-bg: rgba(11, 15, 26, .72);
  --body-bg:
    radial-gradient(900px 500px at 80% -10%, rgba(124, 92, 255, .16), transparent 60%),
    radial-gradient(1000px 600px at 0% 0%, rgba(79, 140, 255, .14), transparent 55%),
    var(--bg);
  --error-bg: #3a1f28;
  --error-fg: #ffb3c1;
  --error-border: #6b2a3a;
  /* Цвет выполненного: галочка у пройденного шага обработки */
  --ok-fg: #4ec27a;
}

/* Светлая тема: авто по системной настройке + ручное [data-theme="light"] */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; }
  :root:not([data-theme="dark"]) {
    --bg: #e7ecf4;
    --bg-soft: #dde5f0;
    --surface: #ffffff;
    --surface-2: #eef2f9;
    --fg: #1b2740;
    --fg-strong: #0c1424;
    --muted: #55627a;
    --accent: #3b6fe0;
    --accent-2: #6a48e6;
    --border: #c9d5e8;
    --border-hover: #b0c2dd;
    --shadow: 0 14px 34px -18px rgba(20, 40, 80, .30);
    --card-shadow: 0 6px 22px -12px rgba(23, 43, 77, .22);
    --ring: 0 0 0 3px rgba(59, 111, 224, .30);
    --hero-grad: linear-gradient(180deg, #10213f, #3b6fe0);
    --topbar-bg: rgba(231, 236, 244, .78);
    --body-bg:
      radial-gradient(900px 500px at 80% -10%, rgba(124, 92, 255, .12), transparent 60%),
      radial-gradient(1000px 600px at 0% 0%, rgba(59, 111, 224, .12), transparent 55%),
      var(--bg);
    --error-bg: #ffe3e9;
    --error-fg: #a3203a;
    --error-border: #f3b6c3;
    --ok-fg: #1f8a4c;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e7ecf4;
  --bg-soft: #dde5f0;
  --surface: #ffffff;
  --surface-2: #eef2f9;
  --fg: #1b2740;
  --fg-strong: #0c1424;
  --muted: #55627a;
  --accent: #3b6fe0;
  --accent-2: #6a48e6;
  --border: #c9d5e8;
  --border-hover: #b0c2dd;
  --shadow: 0 14px 34px -18px rgba(20, 40, 80, .30);
  --card-shadow: 0 6px 22px -12px rgba(23, 43, 77, .22);
  --ring: 0 0 0 3px rgba(59, 111, 224, .30);
  --hero-grad: linear-gradient(180deg, #10213f, #3b6fe0);
  --topbar-bg: rgba(231, 236, 244, .78);
  --body-bg:
    radial-gradient(900px 500px at 80% -10%, rgba(124, 92, 255, .12), transparent 60%),
    radial-gradient(1000px 600px at 0% 0%, rgba(59, 111, 224, .12), transparent 55%),
    var(--bg);
  --error-bg: #ffe3e9;
  --error-fg: #a3203a;
  --error-border: #f3b6c3;
  --ok-fg: #1f8a4c;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  background: var(--body-bg);
  color: var(--fg);
  line-height: 1.65;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Прижимаем подвал к низу окна: на коротких страницах (пустой кабинет,
     список из пары плиток) он иначе повисает посреди экрана, а под ним
     остаётся полоса фона. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: #7ea9ff; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; color: var(--fg-strong); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* --- Шапка --- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  /* body — колонка flex, и без запрета на сжатие шапка с подвалом
     сплющивались бы на длинных страницах */
  flex-shrink: 0;
  background: var(--topbar-bg);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; gap: 12px; flex-wrap: wrap;
}
.brand { font-size: 1.25rem; font-weight: 800; color: var(--fg); letter-spacing: -.02em; }
.brand span { color: var(--accent); }
.topbar nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); font-weight: 500; }
.topbar nav a:hover { color: var(--fg); }
.nav-cta {
  color: var(--fg) !important; background: var(--surface-2);
  border: 1px solid var(--border); padding: 8px 14px; border-radius: 10px;
}
.nav-cta:hover { border-color: var(--accent); }
.inline { display: inline; }
.linkbtn { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; padding: 0; }
.linkbtn:hover { color: var(--fg); }
.lang select {
  background: var(--surface); color: var(--fg); border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 10px; cursor: pointer;
}
/* Баланс минут в шапке: ссылка на пакеты, но не кричит как кнопка */
.balance { white-space: nowrap; }
.balance b { color: var(--accent); }

/* Пометка о неизрасходованном Пробном Заказе — рядом с балансом */
.trial-badge {
  white-space: nowrap; font-size: .8rem; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 2px 8px;
}

/* Кто вошёл: в шапке и на первой строке кабинета */
.whoami { color: var(--muted); font-size: .9rem; }
.topbar .whoami { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.theme-toggle {
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  border-radius: 10px; padding: 6px 10px; font-size: 1rem; line-height: 1;
  transition: border-color .15s ease, transform .15s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }

/* --- Контейнер --- */
/* flex: 1 — основной блок забирает всю свободную высоту, чтобы подвал
   оказался внизу окна. width: 100% нужен потому, что body теперь flex-контейнер
   в колонку: без него max-width сработал бы, а вот на узком экране блок
   сжался бы по содержимому. */
.container { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 32px 24px 56px; flex: 1 0 auto; }

/* Расширение контейнера на больших мониторах. Порог начинается ВЫШЕ 1920,
   чтобы на FHD ничего не поменялось. Расширяются шапка, содержимое и подвал
   разом — они все считают ширину от --maxw, и разъехаться по выравниванию
   им нельзя. Юридических страниц это не касается: у .legal свой предел
   760 px, и растягивать сплошной текст было бы только хуже для чтения. */
@media (min-width: 2000px) { :root { --maxw: 1440px; } }
@media (min-width: 2800px) { :root { --maxw: 1800px; } }

/* --- Кнопки --- */
.btn {
  display: inline-block; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; padding: 13px 26px; border: none; border-radius: 12px;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(79, 140, 255, .6);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(79, 140, 255, .7); color: #fff; }
.btn:active { transform: translateY(0); }

/* --- Hero --- */
.hero { text-align: center; padding: 76px 0 60px; }
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3rem); margin: 0 0 20px; font-weight: 800;
  letter-spacing: -.035em; line-height: 1.08; color: var(--fg-strong);
}
.hero p {
  color: var(--muted); font-size: 1.15rem; line-height: 1.6;
  max-width: 560px; margin: 0 auto 32px;
}
.hero .hint { margin-top: 16px; }

/* --- Секции --- */
.section { padding: 60px 0; border-top: 1px solid var(--border); }
.section h2 {
  text-align: center; font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 800;
  letter-spacing: -.03em; margin: 0 0 40px;
}

/* Шаги */
.steps {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.step {
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px;
  text-align: center; box-shadow: var(--card-shadow);
  transition: transform .18s ease, border-color .18s ease;
}
.step:hover { transform: translateY(-4px); border-color: var(--border-hover); }
.step h3 { margin: 18px 0 8px; font-size: 1.18rem; }
.step p { margin: 0; color: var(--muted); }
.step-num {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  font-size: 1.5rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 24px -8px rgba(124, 92, 255, .65);
}

/* Услуги (витрина на главной) */
.services { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.service-card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 28px;
  box-shadow: var(--card-shadow); color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
a.service-card:hover {
  transform: translateY(-4px); border-color: var(--accent); text-decoration: none;
  box-shadow: 0 18px 42px -16px rgba(79, 140, 255, .4);
}
.service-icon { font-size: 2rem; line-height: 1; margin-bottom: 14px; }
.service-card h3 { margin: 0 0 8px; font-size: 1.2rem; }
.service-card p { margin: 0 0 16px; color: var(--muted); }
.service-link { margin-top: auto; color: var(--accent); font-weight: 600; }
.service-card.is-soon { opacity: .72; }
.soon-badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
}

/* Преимущества */
.features { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.feature {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--card-shadow);
  transition: border-color .18s ease;
}
.feature:hover { border-color: var(--border-hover); }
.feature h3 { margin: 0 0 8px; font-size: 1.08rem; text-align: center; }
.feature p { margin: 0; color: var(--muted); }

/* Цены */
/* Ширины хватает на четыре пакета; на узких экранах сетка сама переносит карточки */
.pricing {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: 1080px; margin: 0 auto; align-items: stretch;
}
.price-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 26px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.price-card:hover {
  transform: translateY(-6px); border-color: var(--accent);
  box-shadow: 0 18px 42px -16px rgba(79, 140, 255, .45);
}
.price-card.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(79, 140, 255, .10), var(--surface));
  box-shadow: 0 0 0 1px rgba(79, 140, 255, .25), var(--shadow);
}
.price-card h3 { margin: 0 0 12px; font-size: 1.2rem; }
.price-card .price { font-size: 2rem; font-weight: 800; margin: 0 0 6px; }
.price-card .price span { font-size: 1rem; font-weight: 400; color: var(--muted); }
.price-card .price-rub { margin: 0 0 12px; color: var(--muted); font-size: .95rem; }
.price-card .muted { min-height: 44px; width: 100%; }
.price-card .pack-minutes { margin: 0 0 4px; font-weight: 600; }
/* Цена за клип — главный аргумент против фриланса, поэтому выделена акцентом */
.price-card .per-clip {
  margin: 0 0 16px; color: var(--accent); font-size: .95rem; font-weight: 600;
}
.price-card .btn { margin-top: auto; }
.pricing-note { text-align: center; max-width: 640px; margin: 22px auto 0; }

/* Таблица выхода клипов */
.yield-table {
  width: 100%; max-width: 520px; margin: 18px auto; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.yield-table th, .yield-table td {
  padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border);
}
.yield-table th { font-size: .9rem; color: var(--muted); font-weight: 600; }
.yield-table tr:last-child td { border-bottom: none; }
.yield-table td:last-child { text-align: right; font-weight: 600; }
.badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 20px;
}

/* CTA */
.cta {
  text-align: center; margin-top: 56px; padding: 56px 24px;
  border: 1px solid var(--border); border-radius: 20px;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(124, 92, 255, .18), transparent 70%),
    var(--surface);
}
.cta h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 12px; }
.cta p { color: var(--muted); margin: 0 0 26px; }

/* --- Карточки форм / кабинет --- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; max-width: 440px; box-shadow: var(--shadow);
}
.card p { margin: 0 0 14px; }
.card input, .card select {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--fg);
}
.card input:focus, .card select:focus { border-color: var(--accent); }
/* Длинная ссылка на видео не имеет пробелов и не переносится сама — без этого
   правила URL вылезает за пределы карточки на странице подтверждения заказа. */
.break { overflow-wrap: anywhere; word-break: break-word; }

/* Сводка заказа: подпись и значение в столбик, значение не растягивает карточку */
.order-summary { margin: 0 0 18px; }
/* Названия полей были еле видны серым: это подписи к тому, что клиент
   пришёл проверить перед списанием минут, — они должны читаться. */
.order-summary dt {
  color: var(--fg-strong); font-size: .82rem; margin-top: 14px;
  font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.order-summary dd { margin: 2px 0 0; min-width: 0; }

.helptext { color: var(--muted); font-size: .85rem; }
.errorlist { color: var(--error-fg); padding-left: 18px; margin: 6px 0; }

/* --- Согласие на обработку ПДн --- */
.consent { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 0 0 14px; }
/* переопределяем .card input { width: 100% } — иначе чекбокс растянется на всю строку */
.consent input[type="checkbox"] { width: auto; flex: none; margin-top: 3px; accent-color: var(--accent); }
.consent label { flex: 1; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.consent .errorlist { flex-basis: 100%; margin: 0; }
.form-legal { color: var(--muted); font-size: .82rem; margin: 14px 0 0; }

/* --- Таблицы / кабинет --- */
table.orders { width: 100%; border-collapse: collapse; }
table.orders th, table.orders td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); }
table.orders th { color: var(--muted); font-weight: 600; font-size: .9rem; }
.url { word-break: break-all; color: var(--muted); }
/* В списке заказов адрес видео — ссылка на заказ, поэтому выглядит как ссылка */
table.orders a.url { color: var(--accent); text-decoration: none; }
table.orders a.url:hover { text-decoration: underline; }
table.orders tbody tr:hover { background: var(--bg-soft); }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .9rem; }
.msg { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; border: 1px solid var(--border); background: var(--surface); }
.msg.error { background: var(--error-bg); color: var(--error-fg); border-color: var(--error-border); }
/* Заголовок страницы и кнопка действия в одной строке. На узком экране
   кнопка переносится под заголовок и растягивается на всю ширину. */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
.page-head h1 { margin: 0; }
.page-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.selection-count { color: var(--muted); font-size: .92rem; }

/* Кнопка опасного действия. Цвета берём из тех же переменных, что и сообщения
   об ошибках, — иначе в светлой теме она осталась бы тёмной */
.btn-danger {
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--error-border); background: var(--error-bg);
  color: var(--error-fg); font: inherit; font-size: .92rem;
}
.btn-danger:hover { filter: brightness(1.08); }

/* Окно подтверждения. <dialog> вместо confirm(): нужен свой текст и две кнопки */
.confirm-dialog {
  max-width: 420px; padding: 24px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
}
.confirm-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.confirm-dialog h2 { margin: 0 0 12px; font-size: 1.15rem; }
.confirm-dialog p { margin: 0 0 16px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin: 0; }

@media (max-width: 480px) {
  .page-head .btn { width: 100%; text-align: center; }
}

/* --- Список заказов плитками ---
   Карточка ровно на ширину обложки плюс внутренние отступы: 192 + 12·2 = 216. */
.order-cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, 216px);
  justify-content: start;
}
.order-card {
  position: relative;  /* якорь для галочки выбора */
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
/* Галочка поверх обложки. Своя, а не системная: системная рисуется толстой
   и непрозрачной и перетягивает внимание с кадра. Здесь тонкая рамка
   и полупрозрачная заливка — читается и на светлом кадре, и на тёмном. */
/* Правый верхний угол превью. Отступы 18px — это padding карточки (12) плюс
   6 от края обложки. Плашке длительности внизу справа не мешает. */
.order-select { position: absolute; top: 18px; right: 18px; z-index: 2; display: flex; }
.order-select input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 4px;
  background: transparent;
  /* Заливки нет — на светлом кадре белая рамка иначе пропадала бы.
     Мягкая тень по контуру держит её видимой, но сама в глаза не бросается. */
  box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  transition: background .15s, border-color .15s;
}
.order-select input:hover { border-color: #fff; background: rgba(255, 255, 255, .15); }
.order-select input:checked { background: var(--accent); border-color: var(--accent); }
/* Галка нарисована двумя сторонами рамки — иначе понадобилась бы картинка */
.order-select input:checked::after {
  content: ""; display: block; box-sizing: content-box;
  width: 4px; height: 8px; margin: 1px auto 0;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.order-select input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.order-card:hover { border-color: var(--accent); }
.order-card {
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
}
/* Ссылка обёрнута вокруг заголовка, но кликабельна вся карточка: псевдоэлемент
   растянут по ней. Так галочка и кнопка правки могут лежать поверх ссылки,
   не будучи внутри неё (кнопка внутри ссылки — невалидная разметка). */
.order-card-link { text-decoration: none; color: inherit; }
.order-card-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
/* Всё интерактивное поверх растянутой ссылки */
.order-select,
.order-edit,
.order-download { position: relative; z-index: 2; }
/* Обложка 16:9 фиксированной ширины: плитки должны быть одинаковыми
   независимо от того, скачалась обложка или нет. Файл при этом прежний —
   растягиваем только показ. */
.order-thumb {
  position: relative; width: 192px; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: var(--bg-soft); display: block;
}
.order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-thumb-empty { display: block; width: 100%; height: 100%; }
.order-duration {
  position: absolute; right: 6px; bottom: 6px;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(0, 0, 0, .75); color: #fff; font-size: .78rem; line-height: 1.4;
}
/* Всё под обложкой в столбик. align-items: flex-start, иначе пилюля статуса
   растянулась бы на всю ширину карточки. */
.order-card-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 0; width: 100%;
}
/* Название переносится по словам. Ограничение в три строки — чтобы длинный
   заголовок с YouTube не растягивал весь ряд плиток. */
.order-title {
  font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Кнопка скачивания внизу плитки: во всю её ширину, с отбивкой от карточки,
   чтобы визуально не сливаться с текстом заказа */
.order-download {
  display: block; margin: 0; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  text-align: center; text-decoration: none; color: inherit;
  font-size: .9rem; background: var(--bg-soft);
}
.order-download:hover { border-color: var(--accent); }
/* Та же кнопка на странице заказа: там ширина контейнера до 1800 px,
   и растянутая во всю строку кнопка выглядела бы нелепо */
.order-download-inline { display: inline-block; margin: 0; padding: 8px 16px; }

/* Статус слева, число клипов прижато к правому краю. width: 100% обязателен:
   родитель выровнен по flex-start, и без него строка сжалась бы по содержимому,
   а «Клипов» встало бы вплотную к статусу. Правый край при этом совпадает
   с краем обложки и кнопки — у всех троих отступ от карточки 12 px. */
.order-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%;
}
.order-clips { color: var(--muted); font-size: .9rem; }
/* Статус подсвечен цветом, чтобы в длинном списке взгляд цеплялся за неудачи */
.status { padding: 2px 8px; border-radius: 999px; font-size: .82rem; background: var(--bg-soft); }
.status-done { background: var(--ok-bg, #e7f6ec); color: var(--ok-fg, #1a7f3c); }
.status-processing { background: #eef2ff; color: #3949ab; }
.status-failed,
.status-rejected { background: var(--error-bg); color: var(--error-fg); }
.order-date { color: var(--muted); font-size: .85rem; }
/* Карандаш правки справа от названия. align-items: flex-end прижимает его
   к последней строке — у названия их может быть до трёх. */
.order-title-row { display: flex; align-items: flex-end; gap: 6px; }
.order-title-row .order-title { flex: 1 1 auto; min-width: 0; }
.order-title-row .order-edit { flex: 0 0 auto; }
.order-edit {
  display: inline-flex; padding: 3px; border: 0; border-radius: 5px;
  background: none; color: var(--muted); cursor: pointer; line-height: 0;
}
.order-edit:hover { background: var(--bg-soft); color: var(--fg); }
.rename-input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-soft);
  color: inherit; font: inherit; font-size: .95rem;
}

/* На узком экране плитка занимает всю ширину, обложка тянется за ней */
@media (max-width: 420px) {
  .order-cards { grid-template-columns: 1fr; }
  .order-thumb { width: 100%; }
}

.rename { margin: 12px 0 20px; }
.rename summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.rename-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rename-form input { flex: 1 1 260px; }

/* Клипы плитками — так же, как заказы в кабинете: видео сверху, под ним
   название, длительность и действия. Ширина плитки на обложку плюс отступы. */
.clips {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, 216px);
  justify-content: start;
}
.clips li.clip {
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.clips li.clip:hover { border-color: var(--accent); }
/* Вертикальное видео 9:16 во всю ширину плитки */
.clip-thumb { position: relative; display: block; width: 192px; }
.clip-player {
  width: 100%; aspect-ratio: 9 / 16;
  background: #000; border-radius: 8px; display: block;
}
/* Плашка длительности поверх превью. Скрипт прячет её на время проигрывания */
.clip-duration {
  position: absolute; right: 6px; bottom: 6px; pointer-events: none;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(0, 0, 0, .75); color: #fff; font-size: .78rem; line-height: 1.4;
}
/* Ход обработки заказа: список шагов с отметками пройденного */
.progress {
  margin: 16px 0; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.progress-steps { list-style: none; margin: 0 0 12px; padding: 0; }

/* Три состояния шага должны различаться СРАЗУ, не приглядываясь: клиент
   смотрит на этот список несколько минут и хочет понимать, где он сейчас.
   Различаем тремя признаками сразу — цветом, начертанием и значком слева. */
.progress-step {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; color: var(--muted); font-size: .95rem;
}

/* Пройденное — приглушённое, но не серое: это сделанная работа, а не мусор */
.progress-step.is-done { color: var(--fg); }
.progress-step.is-done .progress-label { text-decoration: none; }

/* Текущее — самое заметное на странице: крупнее, ярче и жирным */
.progress-step.is-current {
  color: var(--fg-strong); font-weight: 700; font-size: 1.06rem;
}

/* Предстоящее оставляем бледным и обычным начертанием */
.progress-step:not(.is-done):not(.is-current) { opacity: .6; }

/* Значок слева: галочка у сделанного, точка с пульсацией у текущего,
   пустой кружок у будущего. Значок дублирует цвет — на случай, если
   человек различает цвета плохо. */
.progress-mark {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; position: relative; opacity: .6;
}
.progress-step.is-done .progress-mark {
  border-color: var(--ok-fg); background: var(--ok-fg); opacity: 1;
}
.progress-step.is-done .progress-mark::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.progress-step.is-current .progress-mark {
  background: var(--accent); border-color: var(--accent); opacity: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
  /* Пульсация показывает, что работа идёт, а страница не замерла */
  animation: progress-pulse 1.4s ease-in-out infinite;
}
@keyframes progress-pulse { 50% { box-shadow: 0 0 0 8px transparent; } }
/* Уважаем настройку системы: анимация может мешать и укачивать */
@media (prefers-reduced-motion: reduce) {
  .progress-step.is-current .progress-mark { animation: none; }
}
.progress .hint { margin: 4px 0 0; }

/* Оценка потенциала — в противоположном углу от длительности, чтобы плашки
   не сталкивались. Прятать при проигрывании не нужно: контролы плеера внизу */
.clip-score {
  position: absolute; left: 6px; top: 6px; pointer-events: none;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(79, 140, 255, .92); color: #fff;
  font-size: .78rem; line-height: 1.4; font-weight: 600;
}
.clip-info { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
/* Название в две строки: заголовки от подрядчика бывают длинными, а плитки
   в ряду должны оставаться одной высоты */
.clip-title {
  margin: 0; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.clip-meta { margin: 0; font-size: .9rem; }
/* Обе кнопки в одну строку. nowrap плюс уменьшённые кнопки: «Во весь экран»
   и «Скачать» вместе укладываются в 192 px ширины плитки */
.clip-actions { display: flex; gap: 6px; flex-wrap: nowrap; margin: 0; }
.clip-actions .btn-small {
  padding: 6px 9px; font-size: .82rem; white-space: nowrap;
}
/* Ссылка-кнопка «Описание и текст»: выглядит ссылкой, но это button —
   иначе без JS она вела бы в никуда */
.clip-textlink {
  align-self: flex-start; padding: 0; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: .9rem; cursor: pointer;
  text-decoration: underline;
}

/* Окно с описанием, хэштегами и расшифровкой. Расшифровка бывает длинной,
   поэтому окно прокручивается внутри себя, а не растёт за пределы экрана. */
.clip-dialog { max-width: 620px; max-height: 80vh; overflow-y: auto; }
.clip-dialog h3 {
  margin: 18px 0 6px; font-size: .95rem; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
/* Иконка копирования у заголовка блока. Обе картинки лежат в разметке,
   переключаются классом: подменить <use> средствами CSS нельзя. */
.copy-icon {
  display: inline-flex; padding: 3px; border: 0; border-radius: 5px;
  background: none; color: var(--muted); cursor: pointer; line-height: 0;
}
.copy-icon:hover { background: var(--bg-soft); color: var(--fg); }
.copy-icon .i-done { display: none; }
.copy-icon.copied { color: var(--ok-fg, #1a7f3c); }
.copy-icon.copied .i-copy { display: none; }
.copy-icon.copied .i-done { display: inline; }
.clip-dialog h3:first-of-type { margin-top: 0; }
.clip-tags { color: var(--accent); overflow-wrap: anywhere; }
.clip-transcript-text { white-space: pre-wrap; font-size: .95rem; }
/* Используется и на <a>, и на <button>: font/color сбрасываем, иначе кнопка
   унаследует системный шрифт и будет отличаться от соседней ссылки */
.btn-small {
  display: inline-block; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: .9rem; color: inherit;
  text-decoration: none; cursor: pointer;
}
.btn-small:hover { background: var(--bg-soft); }

/* На узком экране плитка клипа во всю ширину, видео тянется за ней */
@media (max-width: 420px) {
  .clips { grid-template-columns: 1fr; }
  .clip-player { width: 100%; }
}

/* --- Подвал --- */
.site-footer {
  border-top: 1px solid var(--border); background: var(--bg-soft);
  margin-top: 40px; flex-shrink: 0;
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 36px 24px 24px;
  display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.footer-brand { max-width: 320px; }
.footer-brand .muted { font-size: .9rem; margin: 10px 0 0; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--muted); font-size: .92rem; }
.footer-links a:hover { color: var(--fg); }
.footer-bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 16px 24px 30px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.footer-bottom .muted { font-size: .85rem; }

/* --- Юридические страницы --- */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 8px 0 18px; }
.legal h2 { font-size: 1.2rem; margin: 30px 0 10px; }
.legal p, .legal li { line-height: 1.7; }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
.legal-updated { color: var(--muted); font-size: .9rem; margin: -6px 0 24px; }
.legal-req { border-collapse: collapse; margin: 18px 0; }
.legal-req td { padding: 9px 18px 9px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-req td:first-child { color: var(--muted); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* Счёт на оплату — печатная форма */
.invoice { max-width: 760px; margin: 0 auto; }
.invoice h1 { font-size: 1.35rem; margin-bottom: 20px; }
.invoice-req, .invoice-items {
  width: 100%; border-collapse: collapse; margin-bottom: 20px;
}
.invoice-req th, .invoice-req td,
.invoice-items th, .invoice-items td {
  border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top;
}
.invoice-req th { width: 30%; font-weight: 600; color: var(--muted); }
.invoice-items td:last-child, .invoice-items th:last-child { text-align: right; }
.invoice-sign { margin-top: 36px; }

@media print {
  /* На бумаге нужен только сам счёт */
  header, footer, .no-print { display: none !important; }
  .invoice { max-width: none; color: #000; }
  .invoice-req th, .invoice-req td,
  .invoice-items th, .invoice-items td { border-color: #000; }
}

/* Выбор типа аккаунта при регистрации */
.account-type {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; margin: 0 0 18px;
}
.account-type legend { padding: 0 8px; font-weight: 600; color: var(--muted); }
/* Разметка та же, что у .radio-group: Django 5 рендерит вложенные <div> */
.account-type > div { display: flex; gap: 20px; flex-wrap: wrap; }
.account-type > div > div > label {
  display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
}
.account-type input[type="radio"] { width: auto; margin: 0; flex: none; accent-color: var(--accent); }
/* Группа переключателей (способ оплаты): кружок и подпись строго в одну строку.
   Каждый вариант — отдельная строка-плашка, чтобы попадать по ней было легко. */
.radio-group { margin: 0 0 18px; }
.radio-group > label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .9rem; }
/* Django 5 рендерит RadioSelect как <div><div><label><input> …, а не списком */
.radio-group > div > div { margin-bottom: 8px; }
.radio-group > div > div:last-child { margin-bottom: 0; }
.radio-group > div > div > label {
  display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: transparent; transition: border-color .15s ease, box-shadow .15s ease;
}
.radio-group > div > div > label:hover { border-color: var(--border-hover); }
.radio-group input[type="radio"] { width: auto; margin: 0; flex: none; accent-color: var(--accent); }
/* Выделяем именно выбранный вариант: невыбранные остаются обычными,
   без серой заливки — она читалась как «недоступно». */
.radio-group > div > div:has(input:checked) > label {
  border-color: var(--accent); box-shadow: var(--ring); color: var(--fg-strong);
  font-weight: 600;
}
.radio-group .helptext { display: block; margin-top: 6px; }

/* Главная кнопка формы — по центру карточки */
.form-actions { display: flex; justify-content: center; margin: 4px 0 0; }

/* Реквизиты для перевода — их копируют, поэтому моноширинный и заметный блок */
.card-details {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; word-break: break-word;
}

/* Кнопка переключения языка — видна только без JS (скрипт прячет её) */
.lang-go {
  background: var(--surface); color: var(--fg); border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 10px; cursor: pointer; margin-left: 6px;
}

/* --- Оформление субтитров -------------------------------------------------
   Плитки той же ширины, что и карточки заказов (216 px), но пропорции 9:16:
   это кадр клипа, и показывать его нужно так, как он будет выглядеть. */
.template-grid {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, 216px);
  list-style: none; padding: 0; margin: 0 0 28px;
}
.template-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; text-align: center;
}
.template-card img {
  width: 192px; height: 341px; object-fit: cover;
  border-radius: 8px; background: var(--surface-2);
}
.template-card h3 { font-size: 1rem; margin: 10px 0 8px; }
.template-card form { display: inline; }

/* Поля выбора цвета: браузер рисует их крохотными, а .card input { width:100% }
   растягивает на всю карточку — и то и другое выглядит сломанным. */
.card input[type="color"] {
  width: 64px; height: 36px; padding: 2px; cursor: pointer;
}

/* Выбор оформления картинками: образец важнее названия — по слову «Хайлайт»
   понять, что получится, невозможно. Сам кружок переключателя прячем:
   выбранное показывает рамка вокруг образца. */
.template-pick { border: 0; padding: 0; margin: 18px 0; }
.template-pick legend { font-weight: 600; padding: 0; }
.template-pick-list {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-top: 10px;
}
.template-pick-item {
  display: block; text-align: center; cursor: pointer;
  border: 2px solid var(--border); border-radius: 12px; padding: 8px;
  background: var(--surface);
}
.template-pick-item:hover { border-color: var(--border-hover); }
.template-pick-item input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.template-pick-item img {
  width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 8px; background: var(--surface-2); display: block;
}
.template-pick-item span { display: block; margin-top: 8px; font-size: 0.94rem; }
/* Выбранная плитка: рамка вокруг образца и жирная подпись. Через соседний
   селектор — по той же причине, что и «Выбрано» выше. */
.template-pick-item input:checked ~ img {
  outline: 3px solid var(--accent); outline-offset: -1px;
}
.template-pick-item input:checked ~ .template-pick-name {
  font-weight: 700; color: var(--fg-strong);
}
.template-pick-item:has(input:checked) {
  border-color: var(--accent); box-shadow: var(--ring);
}
/* Клавиатура: без видимого кружка фокус должен быть заметен на самой плитке */
.template-pick-item input:focus-visible ~ img { outline-color: var(--fg-strong); }

/* Плитка «своё оформление» — тот же размер и рамка, что у образцов, но это
   ссылка, а не выбор: настоящего образца у несозданного шаблона нет. */
.template-pick-new {
  display: flex; flex-direction: column; justify-content: center;
  text-decoration: none; color: var(--fg);
}
.template-pick-new svg {
  width: 100%; height: auto; aspect-ratio: 9 / 16; display: block;
  border-radius: 8px; background: var(--surface-2); color: var(--fg-muted, currentColor);
}
.template-pick-new:hover { border-color: var(--accent); }
.template-pick-new:hover svg { color: var(--accent); }

/* --- Выбор клипов для смены оформления ------------------------------------
   Та же сетка плиток, что у выбора оформления, но плитки мельче: здесь
   их бывает тридцать, и выбирают из них по заголовку, а не по картинке.
   Галочку показываем настоящую: снятая галочка — осмысленное действие
   («оставить как есть»), и она должна читаться с одного взгляда. */
.clip-pick { border: 0; padding: 0; margin: 18px 0; }
.clip-pick legend { font-weight: 600; padding: 0; }
.clip-pick-list {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  margin-top: 10px;
}
.clip-pick-item {
  display: block; text-align: center; cursor: pointer; position: relative;
  border: 2px solid var(--border); border-radius: 12px; padding: 8px;
  background: var(--surface);
}
.clip-pick-item:hover { border-color: var(--border-hover); }
.clip-pick-item input[type="checkbox"] {
  position: absolute; top: 10px; left: 10px; margin: 0; z-index: 1;
  width: 18px; height: 18px; accent-color: var(--accent);
}
.clip-pick-item img {
  width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 8px; background: var(--surface-2); display: block;
}
.clip-pick-title {
  display: block; margin-top: 8px; font-size: 0.9rem;
  /* Заголовки бывают длинными, а плитка узкая: две строки и многоточие */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.clip-pick-style { display: block; font-size: 0.82rem; color: var(--fg-muted); }
.clip-pick-item:has(input:checked) {
  border-color: var(--accent); box-shadow: var(--ring);
}
/* Невыбранный клип гасим: видно, что он останется как есть */
.clip-pick-item:not(:has(input:checked)) img { opacity: 0.45; }
.clip-pick-item input:focus-visible { outline: 2px solid var(--fg-strong); }

/* --- Редактор оформления --------------------------------------------------
   Слева кадр с блоками, справа поля. На узком экране кадр уезжает наверх. */
.template-editor { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.template-stage { flex: 0 0 270px; }
.template-fields { flex: 1 1 320px; }

/* Кадр 9:16 — та же пропорция, что у клипа, иначе блоки врали бы */
.template-frame {
  position: relative; width: 270px; aspect-ratio: 9 / 16;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
  background: var(--surface-2); touch-action: none; user-select: none;
}
.template-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Блок поверх кадра: перетаскивается целиком, растягивается за углы */
.drag-box {
  position: absolute; border: 2px dashed var(--accent); border-radius: 6px;
  background: rgba(79, 140, 255, .10); cursor: move;
}
.drag-box-name {
  position: absolute; top: -9px; left: 6px; padding: 0 5px;
  font-size: 11px; line-height: 16px; border-radius: 4px;
  background: var(--accent); color: #fff; white-space: nowrap;
}
.drag-handle {
  position: absolute; width: 12px; height: 12px; border-radius: 3px;
  background: var(--accent); border: 2px solid #fff; box-sizing: border-box;
}
.drag-handle[data-edge="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.drag-handle[data-edge="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.drag-handle[data-edge="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.drag-handle[data-edge="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* Разделы «Заголовок клипа» и «Субтитры»: рамка показывает, что к чему */
.block-fields {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 4px 14px 10px; margin: 16px 0;
}
.block-fields legend { padding: 0 6px; }
.block-fields legend label {
  display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer;
}
.block-fields legend input[type="checkbox"] { width: auto; margin: 0; }

/* Галочка внутри блока: квадратик перед подписью, всё одной строкой —
   так же, как в легенде блока. Без width:auto поле растянулось бы
   на всю колонку по общему правилу для input. */
.field-check label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.field-check input[type="checkbox"] { width: auto; margin: 0; }

/* Надпись внутри блока — та же, что на картинке, но нарисованная браузером.
   Видна только пока блок тащат: иначе она двоилась бы с картинкой. */
.drag-box-text {
  /* Ровно по блоку, текст прижат к низу — как в самом клипе. Всё, что
     не поместилось, обрезается рамкой, а не вылезает наружу. */
  position: absolute; inset: 0;
  display: none; align-items: flex-end; justify-content: center;
  text-align: center; line-height: 1.15; font-weight: 700;
  pointer-events: none; overflow: hidden;
}
.template-frame.is-dragging .drag-box-text { display: flex; }
/* Картинку гасим: на ней текст ещё на прежнем месте */
.template-frame.is-dragging img { opacity: .25; }

/* Сообщение о том, что с заказом прямо сейчас что-то происходит:
   заметнее подсказки, но не тревожное, как ошибка. */
.notice {
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 16px;
}

/* --- Подтверждение заказа -------------------------------------------------
   Две колонки: слева кадр, справа что заказано. Прежде страница была одной
   карточкой шириной 440 px и на большом экране выглядела узкой полосой. */
.split-layout {
  display: grid; gap: 24px; align-items: start;
  grid-template-columns: 270px minmax(0, 1fr);
  max-width: 900px;
}
@media (max-width: 720px) {
  /* Предпросмотр остаётся сверху: он и есть главное на странице */
  .split-layout { grid-template-columns: 1fr; }
}
.split-media { position: sticky; top: 16px; }
.split-media img {
  width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface-2); box-shadow: var(--shadow); display: block;
}
.split-media-caption {
  color: var(--muted); font-size: .82rem; margin: 10px 0 0; text-align: center;
}
.split-main { display: grid; gap: 16px; }

/* Блок сведений: рамка отделяет «Видео» от «Что получится» и от расхода */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow);
}
.panel p:last-child { margin-bottom: 0; }
.panel-title {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; font-weight: 700;
}
/* Расход — то, ради чего страницу и открыли: выделяем рамкой поярче */
.panel-cost { border-color: var(--border-hover); }
.cost-figure { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  font-size: 1.15rem; margin: 0 0 12px; }
.cost-figure .muted { font-size: .88rem; }

/* Пары «название — значение» в строку, а не столбиком: их немного */
.order-summary-inline {
  display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 14px 0 0;
}
.order-summary-inline > div { min-width: 0; }
.order-summary-inline dt { margin-top: 0; }

/* Врезки: предупреждение о формате видео и нехватка минут */
.callout {
  border-radius: 10px; padding: 11px 14px; margin: 14px 0 0;
  font-size: .9rem; border: 1px solid var(--border); background: var(--surface-2);
}
.callout-warning { border-left: 3px solid #d8a13a; }
/* Пробный заказ: зелёная полоса — это предложение, а не предупреждение */
.callout-trial { border-left: 3px solid #4a8f5b; }
.callout-error { border-left: 3px solid var(--error-fg); color: var(--error-fg); }

/* Главная кнопка страницы — во всю ширину блока: промахнуться невозможно */
.btn-wide { width: 100%; text-align: center; }

/* --- Новая нарезка --------------------------------------------------------
   Блоки в столбик, но во всю доступную ширину: узкая карточка на большом
   экране оставляла половину страницы пустой, а плитки оформления жались. */
.order-form { display: grid; gap: 16px; max-width: 900px; }
.panel-submit { border-color: var(--border-hover); }
.panel-submit .form-actions { margin-bottom: 10px; }
.panel-submit .btn-wide { max-width: 380px; }

/* Поля внутри блока — те же правила, что и в карточке */
.panel input, .panel select, .panel textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--fg);
}
.panel input:focus, .panel select:focus { border-color: var(--accent); }
.panel label { display: block; margin-bottom: 6px; font-weight: 500; }
.field { margin: 0 0 16px; }
.field:last-child { margin-bottom: 0; }
/* Два поля в ряд: язык и длина клипов коротки, столбиком они разрежены */
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.helptext-lead { display: block; margin: -6px 0 14px; }

/* Кнопка в ожидании: кружок слева от текста и приглушённый вид.
   Нажать второй раз нельзя — сама кнопка отключена скриптом. */
.btn.is-busy {
  opacity: .75; cursor: progress;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn.is-busy::before {
  content: ""; width: 15px; height: 15px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Уважаем системную настройку «меньше движения»: кружок замирает,
   но приглушённый вид кнопки остаётся — ожидание всё равно видно. */
@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::before { animation: none; }
}

/* Колонка страницы: заголовок и блоки одной ширины и по центру экрана.
   Без неё заголовок растягивался во всю страницу, а содержимое жалось слева. */
.page-narrow { max-width: 900px; margin: 0 auto; }

/* Заголовок страниц заказа — по центру колонки: он относится ко всей
   странице, а не к левому блоку, и по краю смотрелся сбитым. */
.page-narrow > h1 { text-align: center; margin-bottom: 22px; }

/* --- Ход обработки --------------------------------------------------------
   Заголовок слева, оценка остатка справа: раньше весь текст жался к левому
   краю широкого блока, а правая половина пустовала. */
.panel-progress { border-color: var(--border-hover); }
.progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.progress-head .panel-title { margin: 0; }
.progress-eta {
  margin: 0; font-weight: 700; color: var(--accent); font-size: 1.05rem;
  white-space: nowrap;
}
/* Шаги в две колонки: их семь, и одним столбцом список тянется вниз пустой
   полосой. На узком экране колонка снова одна. */
.progress-steps { columns: 2; column-gap: 28px; }
@media (max-width: 560px) { .progress-steps { columns: 1; } }
.progress-step { break-inside: avoid; }
.panel-progress .hint { margin: 12px 0 0; }

/* --- Заглушка «обработка задерживается» -----------------------------------
   Не красная: это не ошибка клиента и не его вина, пугать незачем. Тёплая
   рамка отличает «мы чиним» от «видео не подошло». */
.panel-stalled { border-color: #d99a2b; border-left-width: 4px; }
.stalled-text { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.panel-stalled .hint { margin: 12px 0 0; }
/* Ссылка на исходник — мелко и приглушённо: это справка, а не действие */
.split-source { font-size: .85rem; margin-top: 14px; }

/* Подпись группы плиток: «Ваши» и «Готовые» */
.pick-group {
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 4px 0 10px; font-weight: 700;
}
.pick-group + .template-pick-list { margin-bottom: 18px; }

/* Отметка выбранного: рамки мало — её не замечают с первого взгляда */
.template-pick-badge {
  display: none; margin-top: 6px; font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}
/* Соседний селектор, а не :has(): тот поддерживают не все браузеры, и там,
   где не поддерживают, надпись «Выбрано» показывалась бы на КАЖДОЙ плитке —
   правило `display: none` осталось бы без пары. */
.template-pick-item input:checked ~ .template-pick-badge { display: block; }

/* --- Редактор готовых клипов ----------------------------------------------
   Устроен как редактор оформления: слева кадр предпросмотра, справа поля.
   Кадр здесь только показывает — двигать по нему нечего, поэтому ни блоков,
   ни рамок перетаскивания. */
.clip-editor { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.clip-edit-stage { flex: 0 0 270px; }
.clip-edit-fields { flex: 1 1 360px; }
.clip-edit-frame {
  width: 270px; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
}

.clip-edit-group { border: 0; padding: 0; margin: 0 0 22px; }
.clip-edit-group legend { padding: 0; margin: 0 0 8px; font-weight: 600; }

/* Подпись слева, ползунок во всю оставшуюся ширину: так две границы
   подрезки стоят друг под другом и их видно как одну шкалу. */
.clip-edit-slider { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.clip-edit-slider span { flex: 0 0 64px; color: var(--fg-muted); font-size: 14px; }
.clip-edit-slider input[type="range"] { flex: 1 1 auto; min-width: 0; }

/* Длительность после подрезки. Цифры моноширинные: иначе строка дёргается
   при каждом движении ползунка. */
.clip-edit-range {
  margin: 0 0 10px; font-variant-numeric: tabular-nums; font-size: 15px;
}

/* Слова субтитров: каждое — своё поле, ширина по содержимому. Строкой,
   как в тексте, чтобы фразу можно было читать глазами. */
.clip-words { display: flex; flex-wrap: wrap; gap: 6px; }
.clip-word input {
  width: auto; min-width: 60px; padding: 4px 8px; font-size: 14px;
  field-sizing: content;
}
/* Уже исправленное слово подсвечено: в длинной расшифровке иначе
   не найти, что ты успел поправить. */
.clip-word.is-changed input { border-color: var(--accent); }