/* AI Studios — экран «Музыка» (О58; 1.4.0 — О88 единый шаблон). Олива; хаки — только у закреплённой «Создать песню» («Повторить»). Префикс .sm-
   Детали шаблона — gen-kit.css (.gk-, подключить раньше); без GenKit — упрощённые детали .sm-lite (свои стили ниже).
   Встроенные aimusic-lead-sheet (.ls-) и aimusic-player (.mp-) — в .sm-embed; с 1.2.0 (О66) получают тему экрана (светлые в светлом). */
.sm-root {
  --sm-bg: var(--ais-d-bg, #121611); --sm-panel: var(--ais-d-panel, #171b14); --sm-cell: var(--ais-d-cell, #1d2219); --sm-line: var(--ais-d-rule, rgba(239, 236, 226, .14));
  --sm-text: var(--ais-d-fg, #efece2); --sm-muted: var(--ais-d-muted, #b3b29f); --sm-gold: var(--ais-d-gold, #d6be80); --sm-khaki: var(--ais-d-khaki, #c9b480); --sm-on-khaki: var(--ais-d-on-khaki, #15180f);
  --sm-ok: var(--ais-d-ok, #a9c48a); --sm-err: var(--ais-d-err, #f0a48c);
  --sm-serif: var(--ais-font-serif, "Playfair Display", Georgia, serif); --sm-sans: var(--ais-font-sans, Inter, system-ui, sans-serif); --sm-mono: var(--ais-font-mono, "IBM Plex Mono", ui-monospace, monospace);
  color: var(--sm-text); background: var(--sm-bg); font: 400 15px/1.45 var(--sm-sans); display: grid; gap: 18px; min-width: 0; max-width: 1240px; margin: 0 auto; padding: 4px 0;
}
.sm-root[data-theme="light"] {
  --sm-bg: var(--ais-l-bg, #f4f2ea); --sm-panel: var(--ais-l-panel, #fbfaf5); --sm-cell: var(--ais-l-cell, #eceae0); --sm-line: var(--ais-l-rule, rgba(30, 34, 25, .16));
  --sm-text: var(--ais-l-fg, #1c2018); --sm-muted: var(--ais-l-muted, #545a4b); --sm-gold: var(--ais-l-gold, #7a6630); --sm-khaki: var(--ais-l-khaki, #7a6630); --sm-on-khaki: var(--ais-l-on-khaki, #fbfaf5);
  --sm-ok: var(--ais-l-ok, #3f6328); --sm-err: var(--ais-l-err, #9a3b22);
}
.sm-root *, .sm-root *::before, .sm-root *::after { box-sizing: border-box; }
.sm-root [hidden] { display: none !important; }
.sm-root > * { min-width: 0; }
.sm-root :where(button, textarea, select) { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.sm-root :where(.sm-top, .sm-form, .sm-stage, .sm-stages, .sm-next, .sm-bar, .sm-block) :focus-visible { outline: var(--ais-focus-w, 2px) solid var(--sm-khaki); outline-offset: var(--ais-focus-offset, 2px); }
.sm-top { display: grid; gap: 4px; }
.sm-h { margin: 0; font: 600 28px/1.15 var(--sm-serif); }
.sm-sub, .sm-hint, .sm-note { margin: 0; color: var(--sm-muted); }
.sm-h3, .sm-lab { margin: 0 0 8px; padding: 0; font: 500 12px var(--sm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sm-muted); display: block; }

.sm-form, .sm-stage { background: var(--sm-panel); border: 1px solid var(--sm-line); border-radius: 6px; padding: 16px; display: grid; gap: 14px; }
.sm-ta { width: 100%; min-height: 88px; resize: vertical; padding: 10px 12px; background: var(--sm-cell); border: 1px solid var(--sm-line); border-radius: 6px; line-height: 1.45; }
.sm-ta::placeholder { color: var(--sm-muted); opacity: 1; }
.sm-ta:disabled { opacity: .7; }
.sm-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--sm-line); border-radius: var(--ais-r-pill, 999px); background: var(--sm-cell); cursor: pointer; }
.sm-chip:hover:not(:disabled) { border-color: var(--sm-muted); }
.sm-chip[aria-checked="true"] { border-color: var(--sm-text); box-shadow: inset 0 0 0 1px var(--sm-text); font-weight: 600; }
.sm-chip:disabled { opacity: .6; cursor: default; }
.sm-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; color: var(--sm-text); justify-self: start; }
.sm-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--sm-text); cursor: pointer; }
.sm-check input:disabled + span { opacity: .7; }
.sm-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--sm-text); }
.sm-more[open] summary { margin-bottom: 8px; }
.sm-fine-in { display: grid; gap: 10px; min-width: 0; }
.sm-fine-in .sm-lab { margin: 4px 0 0; }
.sm-sel { min-height: 44px; width: 100%; max-width: 320px; padding: 0 12px; background: var(--sm-cell); border: 1px solid var(--sm-line); border-radius: 6px; }
.sm-sel:disabled { opacity: .7; }
.sm-act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* 1.4.0: жанр и голос — компактные ряды чипов (на телефоне — лента с прокруткой) */
.sm-pick { display: grid; gap: 12px; min-width: 0; }
.sm-pick .sm-lab { margin-bottom: 6px; }
.sm-pick .sm-chip { padding: 0 14px; font-size: 14px; }
/* упрощённые детали без GenKit (.sm-lite): «Создать песню» закреплена внизу, одна хаки */
.sm-what { display: grid; gap: 8px; }
.sm-what .sm-lab { margin: 0; }
.sm-exc { color: var(--sm-muted); font-size: 13px; }
.sm-bar { position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 5; padding: 10px 0 12px; background: var(--sm-bg); }
.sm-bar-in { display: grid; gap: 6px; max-width: 640px; }
.sm-bar .sm-go { width: 100%; min-height: 56px; border: 0; border-radius: 12px; background: var(--sm-khaki); color: var(--sm-on-khaki); font-weight: 600; font-size: 16px; cursor: pointer; }
.sm-bar .sm-go:disabled { background: var(--sm-cell); color: var(--sm-muted); border: 1px solid var(--sm-line); cursor: default; }
.sm-next { display: grid; gap: 4px; }
.sm-sec { min-height: 44px; padding: 0 18px; border: 1px solid var(--sm-line); border-radius: 6px; background: none; cursor: pointer; }
.sm-sec:hover { border-color: var(--sm-muted); }

.sm-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sm-slot { display: grid; gap: 2px; padding: 10px 12px; background: var(--sm-cell); border: 1px solid var(--sm-line); border-radius: 6px; min-width: 0; }
.sm-slot b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-n { font: 500 11px var(--sm-mono); color: var(--sm-muted); }
.sm-tag { font: 400 12px var(--sm-mono); color: var(--sm-muted); }
.sm-slot.is-done .sm-tag { color: var(--sm-ok); }
.sm-slot.is-run { border-color: var(--sm-gold); }
.sm-slot.is-run .sm-tag { color: var(--sm-gold); }
.sm-slot.is-run .sm-tag::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: currentColor; animation: sm-pulse 1.2s ease-in-out infinite; vertical-align: middle; }
.sm-slot.is-review { border-color: var(--sm-text); }
.sm-slot.is-err { border-color: var(--sm-err); }
.sm-slot.is-err .sm-tag { color: var(--sm-err); }
.sm-status { margin: 0; color: var(--sm-muted); min-height: 1.45em; }
.sm-err { color: var(--sm-err); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sm-stage { gap: 10px; }
.sm-block[data-part="sheet"] .sm-h3:focus { outline: none; }
.sm-block[data-part="sheet"] .sm-h3:focus-visible { outline: 2px solid var(--sm-khaki); outline-offset: 2px; }
@keyframes sm-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sm-slot.is-run .sm-tag::after { animation: none; } }

/* изоляция встроенных модулей: своя раскладка и цвета, не шире экрана */
.sm-block { min-width: 0; }
.sm-embed { min-width: 0; max-width: 100%; overflow-x: clip; isolation: isolate; contain: layout paint; border-radius: 6px; }
.sm-embed > .ls-root, .sm-embed > .mp-root { max-width: none; }

@media (max-width: 600px) {
  .sm-h { font-size: 24px; }
  .sm-form, .sm-stage { padding: 12px; }
  .sm-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-pick .sm-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
  .sm-pick .sm-row::-webkit-scrollbar { display: none; }
  .sm-pick .sm-chip { flex: none; }
  /* 4 этапа музыки помещаются на 390 без прокрутки ленты */
  .sm-root .gk-st { flex: 1 1 0; min-width: 0; }
  .sm-root .gk-st-t { font-size: 10px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}