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

/* этапы-слоты */
.sc-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sc-stage { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; background: var(--sc-panel); border: 1px solid var(--sc-line); border-radius: 6px; min-width: 0; }
.sc-dot { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--sc-line); display: grid; place-items: center; font: 500 11px var(--sc-mono); color: var(--sc-muted); }
.sc-sl { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-ss { font: 400 11px var(--sc-mono); color: var(--sc-muted); min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-stage.is-cur { border-color: var(--sc-text); }
.sc-stage.is-cur .sc-dot { border-color: var(--sc-text); color: var(--sc-text); }
.sc-stage.is-done .sc-dot { background: var(--sc-cell); color: var(--sc-ok); border-color: var(--sc-ok); }
.sc-stage.is-err { border-color: var(--sc-err); }
@media (max-width: 640px) {
  .sc-stages { grid-template-columns: 1fr; gap: 4px; }
  .sc-stage { padding: 6px 10px; grid-template-columns: auto 1fr auto; }
  .sc-dot { grid-row: auto; }
}

.sc-panel { background: var(--sc-panel); border: 1px solid var(--sc-line); border-radius: 6px; padding: 14px; display: grid; gap: 12px; min-width: 0; }
.sc-ph2 { display: grid; gap: 4px; }
.sc-seg { display: inline-flex; border: 1px solid var(--sc-line); border-radius: 6px; overflow: hidden; justify-self: start; }
.sc-seg button { background: none; border: 0; padding: 0 14px; min-height: 44px; cursor: pointer; color: var(--sc-muted); }
.sc-seg button[aria-checked="true"] { background: var(--sc-cell); color: var(--sc-text); box-shadow: inset 0 -2px 0 var(--sc-text); }
.sc-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sc-track { width: 100%; min-height: 48px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--sc-cell); border: 1px solid var(--sc-line); border-radius: 6px; cursor: pointer; text-align: left; }
.sc-track.is-on { border-color: var(--sc-text); box-shadow: inset 0 0 0 1px var(--sc-text); }
.sc-tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sc-file { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; background: var(--sc-cell); border: 1px dashed var(--sc-line); border-radius: 6px; cursor: pointer; min-width: 0; }
.sc-input { width: 100%; max-width: 230px; min-height: 44px; color: var(--sc-muted); }
.sc-fl { min-width: 0; overflow-wrap: anywhere; color: var(--sc-muted); }
.sc-ferr, .sc-err { margin: 0; color: var(--sc-err); }
.sc-chk { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; justify-self: start; }
.sc-chk input { width: 20px; height: 20px; accent-color: var(--sc-text); margin: 0; }
.sc-chk.is-off { color: var(--sc-muted); cursor: default; }
.sc-chosen { margin: 0; font-weight: 500; }

/* раскадровка */
.sc-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sc-card { background: var(--sc-cell); border: 1px solid var(--sc-line); border-radius: 6px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.sc-card.is-edited { border-color: var(--sc-text); }
.sc-card.is-error { border-color: var(--sc-err); }
.sc-media { position: relative; aspect-ratio: 3 / 2; background: var(--sc-ph1); }
.sc-ph { width: 100%; height: 100%; display: block; }
.sc-ph-bg { fill: var(--sc-ph1); } .sc-ph-fg { fill: var(--sc-ph2); } .sc-ph-sun { fill: var(--sc-muted); opacity: .5; }
.sc-card.is-running .sc-ph { animation: sc-pulse 1.6s ease-in-out infinite; }
@keyframes sc-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sc-card.is-running .sc-ph { animation: none; } }
.sc-t { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: var(--sc-bg); color: var(--sc-text); }
.sc-body { padding: 10px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.sc-n { margin: 0; font: 600 15px var(--sc-serif); }
.sc-text { display: grid; gap: 6px; }
.sc-words { margin: 0; overflow-wrap: anywhere; }
.sc-ta { width: 100%; resize: vertical; min-height: 72px; padding: 8px; background: var(--sc-panel); border: 1px solid var(--sc-line); border-radius: 6px; }
.sc-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-slot { margin: 0; font: 400 12px var(--sc-mono); color: var(--sc-muted); }
.sc-card.is-done .sc-slot { color: var(--sc-ok); }
.sc-card.is-error .sc-slot { color: var(--sc-err); }
.sc-mini { min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--sc-line); border-radius: 6px; cursor: pointer; justify-self: start; }
.sc-mini:hover { border-color: var(--sc-muted); }

/* плеер */
.sc-player { background: #000; border-radius: 6px; overflow: hidden; max-width: 720px; }
.sc-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }

/* действия: хаки — только у главной */
.sc-act { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sc-act .sc-go { min-height: 48px; padding: 0 22px; border: 0; border-radius: 6px; background: var(--sc-khaki); color: var(--sc-on-khaki) !important; font-weight: 600 !important; cursor: pointer; }
.sc-act .sc-go.is-off { background: var(--sc-cell); color: var(--sc-muted) !important; border: 1px solid var(--sc-line); cursor: default; }
.sc-sec { min-height: 48px; padding: 0 18px; background: none; border: 1px solid var(--sc-line); border-radius: 6px; cursor: pointer; }
@media (max-width: 640px) { .sc-root { padding: 12px; } .sc-act .sc-go { flex: 1 1 100%; } .sc-scenes { grid-template-columns: 1fr 1fr; } .sc-tracks { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .sc-scenes { grid-template-columns: 1fr; } }
/* 1.1.0 (О61): «Сюжет до запуска» — theme/lyrics уходят в createClipOrder */
.sc-brief { display: block; }
.sc-brief[open] { display: grid; }
.sc-sum { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 500 12px var(--sc-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-muted); }
.sc-lbl { font-size: 13px; color: var(--sc-text); }
.sc-brief .sc-ta { background: var(--sc-cell); color: inherit; font: inherit; box-sizing: border-box; }
/* 1.3.0 (О88): единый шаблон генератора — детали gen-kit берут цвета экрана (в т.ч. data-theme="auto") */
.sc-root.sc-kit .gk-what, .sc-root.sc-kit .gk-who, .sc-root.sc-kit .gk-fine, .sc-root.sc-kit .gk-bar, .sc-root.sc-kit .gk-stages, .sc-root.sc-kit .gk-next {
  --gk-bg: var(--sc-bg); --gk-panel: var(--sc-panel); --gk-cell: var(--sc-cell); --gk-line: var(--sc-line); --gk-text: var(--sc-text); --gk-muted: var(--sc-muted);
  --gk-khaki: var(--sc-khaki); --gk-on-khaki: var(--sc-on-khaki); --gk-ok: var(--sc-ok); --gk-err: var(--sc-err);
}
.sc-kit .sc-hero { display: grid; gap: 6px; min-width: 0; }
.sc-kit .sc-hero .gk-who { min-width: 0; }
.sc-fs { display: grid; gap: 8px; min-width: 0; }
.sc-fs .sc-h3 { display: block; }
.sc-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sc-style { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 6px 6px; background: var(--sc-cell); border: 1px solid var(--sc-line); border-radius: 12px; cursor: pointer; text-align: left; min-width: 0; }
.sc-style.is-on { border-color: var(--sc-text); box-shadow: inset 0 0 0 1px var(--sc-text); }
.sc-style > span:last-child { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.sc-sw { flex: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--sc-line); }
.sc-sw0 { background: linear-gradient(160deg, #2b3024, #5b5a45); } .sc-sw1 { background: linear-gradient(160deg, #1d2219, #4f5e48 60%, #a7b48f); }
.sc-sw2 { background: linear-gradient(160deg, #6d5b3a, #b3a27a); } .sc-sw3 { background: linear-gradient(160deg, #3b4733, #9fb08a); }
.sc-sw4 { background: linear-gradient(160deg, #d9d6c8, #8e8c7e); } .sc-sw5 { background: linear-gradient(160deg, #262b21, #7a6630); }
.sc-kit .sc-seg { justify-self: start; max-width: 100%; }
.sc-kit .gk-bar[hidden] { display: none !important; }
@media (max-width: 640px) { .sc-root.sc-kit .gk-bar { margin: 0 -12px; padding-left: 12px; padding-right: 12px; } .sc-styles { grid-template-columns: 1fr 1fr; } }

.st-create-center:has([data-cloud-studio-host="clip"], [data-cloud-studio-host="universal"]) .st-native-extra { display: none; }
.sc-root.sc-kit { padding-bottom: calc(var(--gk-nav-h, 0px) + env(safe-area-inset-bottom, 0px) + 16px) !important; }
.sc-root.sc-kit .gk-bar { position: relative !important; bottom: auto; left: auto; transform: none; width: 100%; }
.sc-track-row { min-width: 0; display: grid; gap: 6px; }
.sc-track-copy { min-width: 0; display: grid; gap: 6px; width: 100%; }
.sc-root .sc-tt { white-space: normal; overflow-wrap: anywhere; font-weight: 500; }
.sc-track-meta { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 12px; color: var(--sc-muted); }
.sc-listen { min-height: 44px; border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-panel); padding: 6px 12px; text-align: left; cursor: pointer; }
.sc-listen[aria-pressed="true"] { border-color: var(--sc-text); }
.sc-listen:disabled { cursor: default; opacity: .6; }
.sc-preview { display: grid; gap: 8px; min-width: 0; }
.sc-preview audio { width: 100%; max-width: 640px; }

.st-form-skeleton { display:grid; gap:16px; min-height:360px; padding:20px 0; color:var(--st-muted); }
.st-form-skeleton p { margin:0; font-size:14px; }
.st-skeleton-block { display:block; height:84px; border-radius:10px; border:1px solid var(--st-line); background:var(--st-surface,#20251d); }
@media(max-width:760px) {
 .st-topbar .ais-orders-host { margin-inline:0; }
 .st-topbar .ais-orders-host .ob-pill { width:44px; padding:0; justify-content:center; gap:2px; font-size:0; }
 .st-topbar .ais-orders-host .ob-pill::before { content:"☷"; font-size:20px; }
 .st-topbar .ais-orders-host .ob-dot { display:none; }
 .st-topbar .ais-orders-host .ob-n { font-size:10px; padding:1px 4px; }
 .st-mobile-nav > button,.st-mobile-nav > a { flex:1 1 0; min-width:0; min-height:44px; font-size:10px; font-weight:500; line-height:1.2; }
 .st-mobile-nav > button > svg,.st-mobile-nav > a > svg { width:20px; height:20px; flex:none; }
}