/* AI Studios — экран «Фото» (О55) v1.3.0 (О88: шаблон gen-kit — «Что», «Кто», «Тонкая настройка», этапы, закреплённая «Создать фото»).
   Олива, хаки — только у закреплённой кнопки GenKit.createBar (.gk-go); остальные кнопки контурные. Префикс .sp- (детали набора — .gk-, gen-kit.css) */
.sp-root {
  --sp-bg: var(--ais-d-bg, #121611); --sp-panel: var(--ais-d-panel, #171b14); --sp-cell: var(--ais-d-cell, #1d2219); --sp-line: var(--ais-d-rule, rgba(239, 236, 226, .14));
  --sp-text: var(--ais-d-fg, #efece2); --sp-muted: var(--ais-d-muted, #b3b29f); --sp-khaki: var(--ais-d-khaki, #c9b480); --sp-on-khaki: var(--ais-d-on-khaki, #15180f);
  --sp-ok: var(--ais-d-ok, #a9c48a); --sp-err: var(--ais-d-err, #f0a48c);
  --sp-serif: var(--ais-font-serif, "Playfair Display", Georgia, serif); --sp-sans: var(--ais-font-sans, Inter, system-ui, sans-serif); --sp-mono: var(--ais-font-mono, "IBM Plex Mono", ui-monospace, monospace);
  --sp-tile: 220px;
  color: var(--sp-text); background: var(--sp-bg); font: 400 14px/1.45 var(--sp-sans); display: grid; gap: 18px; min-width: 0; max-width: 1000px; padding: 16px; border-radius: 10px;
}
.sp-root[data-theme="light"] {
  --sp-bg: var(--ais-l-bg, #f4f2ea); --sp-panel: var(--ais-l-panel, #fbfaf5); --sp-cell: var(--ais-l-cell, #eceae0); --sp-line: var(--ais-l-rule, rgba(30, 34, 25, .16));
  --sp-text: var(--ais-l-fg, #1c2018); --sp-muted: var(--ais-l-muted, #545a4b); --sp-khaki: var(--ais-l-khaki, #7a6630); --sp-on-khaki: var(--ais-l-on-khaki, #fbfaf5);
  --sp-ok: var(--ais-l-ok, #3f6328); --sp-err: var(--ais-l-err, #9a3b22);
}
@media (max-width: 600px) { .sp-root { --sp-tile: 160px; padding: 8px; gap: 12px; } .sp-panel, .sp-stage, .sp-hist { padding: 10px; } }
.sp-root *, .sp-root *::before, .sp-root *::after { box-sizing: border-box; }
.sp-root button, .sp-root textarea, .sp-root input { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.sp-root :focus-visible { outline: 2px solid var(--sp-text); outline-offset: 2px; }
.sp-root ul, .sp-root ol { list-style: none; margin: 0; padding: 0; }
.sp-root [hidden] { display: none !important; }
.sp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-top { display: grid; gap: 4px; }
.sp-h { margin: 0; font: 600 26px/1.2 var(--sp-serif); }
.sp-sub, .sp-hint { margin: 0; color: var(--sp-muted); }
.sp-hint { font-size: 13px; }
.sp-h3 { margin: 0 0 8px; padding: 0; font: 500 12px var(--sp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted); display: block; }
.sp-mono { font: 400 12px var(--sp-mono); color: var(--sp-muted); text-transform: none; letter-spacing: 0; }

.sp-panel, .sp-stage, .sp-hist { background: var(--sp-panel); border: 1px solid var(--sp-line); border-radius: 6px; padding: 14px; display: grid; gap: 16px; min-width: 0; }
.sp-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: block; }
.sp-intents { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sp-int { min-height: 64px; text-align: left; display: grid; gap: 2px; align-content: start; padding: 10px; background: var(--sp-cell); border: 1px solid var(--sp-line); border-radius: 6px; cursor: pointer; }
.sp-int b { font-weight: 600; }
.sp-int span { font-size: 12px; color: var(--sp-muted); }
.sp-int.is-on, .sp-asp.is-on { border-color: var(--sp-text); box-shadow: inset 0 0 0 1px var(--sp-text); }
.sp-int[disabled] { opacity: .55; cursor: default; }
.sp-ph { width: 100%; height: 100%; display: block; fill: none; stroke: var(--sp-line); stroke-width: 2; }
.sp-ta, .sp-in { width: 100%; min-height: 44px; padding: 10px 12px; background: var(--sp-bg); border: 1px solid var(--sp-line); border-radius: 6px; resize: vertical; }
.sp-ta::placeholder, .sp-in::placeholder { color: var(--sp-muted); opacity: 1; }
.sp-aspects { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-asp { display: inline-grid; justify-items: center; align-content: center; gap: 2px; min-width: 64px; min-height: 56px; padding: 4px 12px; background: transparent; border: 1px solid var(--sp-line); border-radius: 6px; cursor: pointer; font-family: var(--sp-mono); }
.sp-btn { min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--sp-line); border-radius: 6px; cursor: pointer; }
.sp-btn[disabled] { color: var(--sp-muted); cursor: default; }
.sp-ghost { background: transparent; }

.sp-status { margin: 0; min-height: 1.45em; }
.sp-err { margin: 0; color: var(--sp-err); }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--sp-tile)); gap: 12px; justify-content: start; }
@media (max-width: 600px) { .sp-grid { grid-template-columns: repeat(2, var(--sp-tile)); gap: 8px; justify-content: center; } }
.sp-tile { width: var(--sp-tile); display: grid; gap: 6px; padding: 0; background: none; border: 0; text-align: left; }
button.sp-tile { cursor: pointer; }
.sp-frame { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--sp-cell); border: 1px solid var(--sp-line); border-radius: 6px; overflow: hidden; }
.sp-cell.is-on .sp-frame { border-color: var(--sp-text); box-shadow: inset 0 0 0 1px var(--sp-text); }
.sp-frame .sp-ph { position: absolute; inset: 18%; width: 64%; height: 64%; }
.sp-cell.is-running .sp-frame .sp-ph, .sp-cell.is-queued .sp-frame .sp-ph, .sp-cell.is-accepted .sp-frame .sp-ph { animation: sp-pulse 1.4s ease-in-out infinite; }
@keyframes sp-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sp-root * { animation: none !important; } }
.sp-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-tag { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 3px; background: var(--sp-bg); font: 400 11px var(--sp-mono); }
.sp-cap { display: flex; justify-content: space-between; gap: 6px; font: 400 12px var(--sp-mono); color: var(--sp-muted); }
.sp-st.is-done { color: var(--sp-ok); }
.sp-st.is-fail { color: var(--sp-err); }
.sp-edit { border-top: 1px solid var(--sp-line); padding-top: 12px; display: grid; gap: 8px; }
.sp-ebtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-erm { flex: 1 1 200px; min-width: 0; }

.sp-hlist { display: grid; gap: 10px; }
.sp-hrow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 12px; align-items: start; padding-top: 10px; border-top: 1px solid var(--sp-line); }
@media (max-width: 600px) { .sp-hrow { grid-template-columns: minmax(0, 1fr); } }
.sp-hmeta { display: grid; gap: 2px; min-width: 0; }
.sp-hw { color: var(--sp-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-hims { display: flex; gap: 8px; overflow-x: auto; min-width: 0; }
.sp-hi { flex: none; width: 72px; aspect-ratio: 3 / 4; background: var(--sp-cell); border: 1px solid var(--sp-line); border-radius: 4px; overflow: hidden; }
.sp-hi img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-asp svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sp-asp span { font-size: 12px; }
/* О88: детали gen-kit внутри экрана */
.sp-panel .gk-fine { background: var(--sp-bg); }
.sp-root > .gk-bar { margin: 0 -16px -16px; border-radius: 0 0 10px 10px; }
@media (max-width: 600px) { .sp-root > .gk-bar { margin: 0 -8px -8px; padding-left: 8px; padding-right: 8px; } }
@media (min-width: 900px) { .sp-root > .gk-bar { margin: 0; } }
.sp-stage .gk-stages { background: var(--sp-bg); }
.sp-root .gk-switch { min-width: 0; flex: 1 1 200px; justify-content: flex-end; }
.sp-root .gk-switch > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .sp-stage .gk-stages { padding: 10px; } .sp-root .gk-switch { justify-content: flex-start; } }