/* AI Studios — экран «Видео» (О56; О88 — 1.3.0, шаблон GenKit: .sv-gk; без gen-kit.js — прежняя форма .sv-legacy).
   Олива, хаки — только у главной кнопки (закреплённая «Создать видео» или «Повторить» при ошибке). Префикс .sv-, токены О54 с запасными. */
.sv-root {
  --sv-bg: var(--ais-d-bg, #121611); --sv-panel: var(--ais-d-panel, #171b14); --sv-cell: var(--ais-d-cell, #1d2219); --sv-line: var(--ais-d-rule, rgba(239, 236, 226, .14));
  --sv-text: var(--ais-d-fg, #efece2); --sv-muted: var(--ais-d-muted, #b3b29f); --sv-khaki: var(--ais-d-khaki, #c9b480); --sv-on-khaki: var(--ais-d-on-khaki, #15180f);
  --sv-ok: var(--ais-d-ok, #a9c48a); --sv-err: var(--ais-d-err, #f0a48c); --sv-ph: #3a3f33; --sv-ph2: #2c3127;
  --sv-serif: var(--ais-font-serif, "Playfair Display", Georgia, serif); --sv-sans: var(--ais-font-sans, Inter, system-ui, sans-serif); --sv-mono: var(--ais-font-mono, "IBM Plex Mono", ui-monospace, monospace);
  color: var(--sv-text); background: var(--sv-bg); font: 400 14px/1.45 var(--sv-sans); display: grid; gap: 16px; min-width: 0; max-width: 1000px; padding: 4px 0;
}
.sv-root[data-theme="light"] {
  --sv-bg: var(--ais-l-bg, #f4f2ea); --sv-panel: var(--ais-l-panel, #fbfaf5); --sv-cell: var(--ais-l-cell, #eceae0); --sv-line: var(--ais-l-rule, rgba(30, 34, 25, .16));
  --sv-text: var(--ais-l-fg, #1c2018); --sv-muted: var(--ais-l-muted, #545a4b); --sv-khaki: var(--ais-l-khaki, #7a6630); --sv-on-khaki: var(--ais-l-on-khaki, #fbfaf5);
  --sv-ok: var(--ais-l-ok, #3f6328); --sv-err: var(--ais-l-err, #9a3b22); --sv-ph: #c9c6b8; --sv-ph2: #dcd9cc;
}
.sv-root *, .sv-root *::before, .sv-root *::after { box-sizing: border-box; }
.sv-root button, .sv-root textarea { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.sv-root :focus-visible { outline: 2px solid var(--sv-khaki); outline-offset: 2px; }
.sv-root [hidden] { display: none !important; }
.sv-top { display: grid; gap: 4px; }
.sv-h { margin: 0; font: 600 26px/1.2 var(--sv-serif); }
.sv-sub, .sv-hint { margin: 0; color: var(--sv-muted); }
.sv-h3 { padding: 0; margin: 0 0 8px; font: 500 12px var(--sv-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sv-muted); display: block; }

.sv-form { display: grid; gap: 12px; min-width: 0; }
.sv-box { margin: 0; min-width: 0; background: var(--sv-panel); border: 1px solid var(--sv-line); border-radius: 6px; padding: 12px 14px; }
.sv-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
.sv-pick { flex: 0 0 auto; width: 96px; display: grid; gap: 4px; justify-items: center; padding: 6px; background: var(--sv-cell); border: 1px solid var(--sv-line); border-radius: 6px; cursor: pointer; scroll-snap-align: start; position: relative; }
.sv-pick:hover { border-color: var(--sv-muted); }
.sv-pick.is-on { border-color: var(--sv-text); box-shadow: inset 0 0 0 1px var(--sv-text); }
.sv-pick.is-on::after { content: "✓"; position: absolute; top: 4px; right: 6px; font: 600 13px var(--sv-sans); }
.sv-th { width: 80px; height: 80px; display: grid; place-items: center; background: var(--sv-bg); border-radius: 4px; overflow: hidden; }
.sv-th svg { width: 70%; height: 70%; }
.sv-img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; }
.sv-ph-a { fill: var(--sv-ph); } .sv-ph-b { fill: var(--sv-ph2); }
.sv-root[data-theme="light"] .sv-ph-b { fill: #b7b4a6; }
.sv-nm { font-size: 12px; text-align: center; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; }

.sv-ta { width: 100%; min-height: 64px; resize: vertical; padding: 10px; background: var(--sv-cell); border: 1px solid var(--sv-line); border-radius: 6px; }
.sv-ta::placeholder { color: var(--sv-muted); }
.sv-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sv-chip { min-height: 44px; padding: 6px 12px; background: transparent; border: 1px solid var(--sv-line); border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--sv-muted); }
.sv-chip:hover { color: var(--sv-text); border-color: var(--sv-muted); }

.sv-more { background: var(--sv-panel); border: 1px solid var(--sv-line); border-radius: 6px; min-width: 0; }
.sv-sum { cursor: pointer; padding: 12px 14px; min-height: 44px; font: 500 13px var(--sv-mono); color: var(--sv-text); list-style-position: inside; }
.sv-more-in { display: grid; gap: 12px; padding: 0 14px 14px; min-width: 0; }
.sv-cam { min-width: 0; }
.sv-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-seg-b { min-height: 44px; min-width: 64px; padding: 6px 14px; background: var(--sv-cell); border: 1px solid var(--sv-line); border-radius: 6px; cursor: pointer; }
.sv-seg-b.is-on { border-color: var(--sv-text); box-shadow: inset 0 0 0 1px var(--sv-text); }

.sv-act-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.sv-act-row .sv-go, .sv-err .sv-go { min-height: 48px; padding: 0 28px; border: 0; border-radius: 6px; background: var(--sv-khaki); color: var(--sv-on-khaki); font-weight: 600; font-size: 15px; cursor: pointer; }
.sv-act-row .sv-go:disabled { background: var(--sv-cell); color: var(--sv-muted); border: 1px solid var(--sv-line); cursor: default; }
.sv-root .sv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--sv-line); border-radius: 6px; background: transparent; color: var(--sv-text); text-decoration: none; cursor: pointer; }
.sv-btn:hover { border-color: var(--sv-muted); }

.sv-stage { background: var(--sv-panel); border: 1px solid var(--sv-line); border-radius: 6px; padding: 14px; display: grid; gap: 12px; min-width: 0; }
.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sv-step { display: grid; gap: 6px; justify-items: start; font: 500 12px var(--sv-mono); color: var(--sv-muted); border-top: 2px solid var(--sv-line); padding-top: 8px; }
.sv-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--sv-muted); }
.sv-step.is-done { color: var(--sv-text); border-top-color: var(--sv-ok); }
.sv-step.is-done .sv-dot { background: var(--sv-ok); border-color: var(--sv-ok); }
.sv-step.is-cur { color: var(--sv-text); border-top-color: var(--sv-text); }
.sv-step.is-cur .sv-dot { border-color: var(--sv-text); animation: sv-pulse 1.4s ease-in-out infinite; }
@keyframes sv-pulse { 50% { background: var(--sv-text); } }
@media (prefers-reduced-motion: reduce) { .sv-step.is-cur .sv-dot { animation: none; background: var(--sv-text); } }
.sv-status { margin: 0; font: 500 14px var(--sv-mono); }
.sv-err { display: grid; gap: 10px; justify-items: start; }
.sv-err-t { margin: 0; color: var(--sv-err); }
.sv-player { display: grid; gap: 10px; }
.sv-screen { background: #000; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; max-height: 70vh; display: grid; }
.sv-video { width: 100%; height: 100%; object-fit: contain; display: block; }
.sv-pl-row { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 900px) {
  .sv-legacy .sv-form { grid-template-columns: 1fr 1fr; }
  .sv-legacy .sv-form > .sv-box:nth-child(3), .sv-more { grid-column: 1 / -1; }
}

/* 1.3.0 (О88): шаблон GenKit — «Опиши действие» → «Кто» / «Где» → «Тонкая настройка» → этапы → закреплённая «Создать видео» */
.sv-gk .sv-form { gap: 18px; }
.sv-who-where { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.sv-gk .sv-form { grid-template-columns: minmax(0, 1fr); }
.sv-gk .sv-form > div, .sv-who-where > div { min-width: 0; }
.sv-where { min-width: 0; }
.sv-gk .sv-pick { border-radius: 12px; }
.sv-gk .sv-th { border-radius: 8px; }
.sv-gk .gk-fine .sv-box { background: transparent; border: 0; padding: 0; }
.sv-check { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; min-height: 44px; cursor: pointer; }
.sv-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--sv-text); }
.sv-check .sv-hint { grid-column: 2; font-size: 13px; }
.sv-gk .sv-stage { border-radius: 20px; }
.sv-gk .sv-screen { border-radius: 12px; }
@media (min-width: 900px) {
  .sv-who-where { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}