/* Zefiro: интерфейс на Material 3 (m3.material.io) — цветовые роли, типографика, формы, тональные поверхности.
   Сетка экрана презентации: миниатюры | слайд с уведомлениями | панель. */
/* Палитра нейтральная (токены дизайн-системы Zefiro): белый, серые поверхности, графит; синий — действия и фокус.
   Жёлтый — только в логотипе: контент пользователя на слайдах не должен конфликтовать с интерфейсом. */
:root {
  /* типографика M3: type scale tokens (m3.material.io/styles/typography/type-scale-tokens), шрифт Roboto */
  --font-sans: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --title-l: 400 22px/28px var(--font-sans); --title-l-ls: 0;
  --title-m: 500 16px/24px var(--font-sans); --title-m-ls: .15px;
  --title-s: 500 14px/20px var(--font-sans); --title-s-ls: .1px;
  --label-l: 500 14px/20px var(--font-sans); --label-l-ls: .1px;
  --label-m: 500 12px/16px var(--font-sans); --label-m-ls: .5px;
  --label-s: 500 11px/16px var(--font-sans); --label-s-ls: .5px;
  --body-m: 400 14px/20px var(--font-sans); --body-m-ls: .25px;
  --body-s: 400 12px/16px var(--font-sans); --body-s-ls: .4px;
  /* цветовые роли M3 */
  --primary: #365da5; --on-primary: #fff;
  --btn: #191916; --on-btn: #fff;
  --secondary-container: #e8e8ea; --on-secondary-container: #191916;
  --tertiary: #365da5;
  --surface: #fff; --on-surface: #191916; --on-surface-variant: #57565a;
  --surface-container-lowest: #fff;
  --surface-container-low: #f7f7f7; --surface-container: #f2f2f2; --surface-container-high: #ebebeb; --surface-container-highest: #e3e3e3;
  --outline: #8a898d; --outline-variant: #c8c8c8;
  --error: #b43c4b; --on-error: #fff; --error-container: #f8e4e7; --on-error-container: #5c1520;
  --ok: #2e6b3a; --ok-container: #e2f0e4; --on-ok-container: #123a1c;
  --warn-container: #f6efdc; --on-warn-container: #4a3b0c; --amber: #b8860b;
  /* форма и тени */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px;
  --e1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --e2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  /* прежние имена: на них ссылаются разметка и скрипты */
  --bg: var(--surface); --panel: var(--surface-container-lowest); --ink: var(--on-surface); --muted: var(--on-surface-variant);
  --line: var(--outline-variant); --soft: var(--surface-container-low); --accent: var(--primary); --err: var(--error);
  --note-ink: var(--on-warn-container);
}

/* Стили интерфейса не заходят внутрь слайда: у шаблонов слайдов свои классы (.list, .row, .card, .bar …),
   и общие правила студии ломали их вёрстку. Слайд рисует только CSS дизайн-системы. */
@scope (:root) to (.slide) {
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--surface); color: var(--on-surface); font: var(--body-m); letter-spacing: var(--body-m-ls); }
  a { color: var(--primary); }

  /* кнопки: M3 — outlined по умолчанию, filled (.btn), tonal, text (.link) */
  button, select { font: var(--label-l); letter-spacing: var(--label-l-ls); border: 1px solid var(--outline); background: transparent; color: var(--primary); border-radius: 20px; min-height: 40px; padding: 10px 24px; cursor: pointer; transition: background .15s, box-shadow .15s; }
  button:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 8%, transparent); }
  button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
  button:disabled { opacity: .38; cursor: default; }
  button.tonal { border-color: transparent; background: var(--secondary-container); color: var(--on-secondary-container); padding: 10px 20px; }
  button.tonal:hover:not(:disabled) { background: color-mix(in srgb, var(--on-secondary-container) 8%, var(--secondary-container)); box-shadow: var(--e1); }
  .btn { background: var(--btn); border-color: transparent; color: var(--on-btn); }
  .btn:hover:not(:disabled) { background: color-mix(in srgb, #fff 16%, var(--btn)); box-shadow: var(--e1); }
  .btn.small { min-height: 32px; padding: 6px 16px; }
  .btn.ghost { background: transparent; color: var(--primary); border-color: var(--outline); }
  .btn.ghost:hover:not(:disabled) { box-shadow: none; background: color-mix(in srgb, var(--primary) 8%, transparent); }
  .btn.wide { display: block; width: 100%; margin-top: 12px; min-height: 48px; border-radius: 24px; font: var(--title-m); letter-spacing: var(--title-m-ls); }
  .btn.big { display: block; width: 100%; min-height: 48px; padding: 12px 24px; border-radius: 24px; font: var(--title-m); letter-spacing: var(--title-m-ls); }
  .link { font: var(--label-l); letter-spacing: var(--label-l-ls); color: var(--primary); background: none; border: 0; min-height: 32px; padding: 6px 12px; border-radius: 16px; text-decoration: none; cursor: pointer; }
  .link:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 10%, transparent); }

  /* текстовое поле: outlined */
  textarea, input[type=text] { font: var(--body-m); letter-spacing: var(--body-m-ls); color: var(--on-surface); background: var(--surface-container-lowest); border: 1px solid var(--outline); border-radius: var(--r-xs); padding: 12px 14px; transition: border-color .15s; }
  textarea { width: 100%; min-height: 84px; resize: vertical; }
  textarea:hover, input[type=text]:hover { border-color: var(--on-surface); }
  textarea:focus, input[type=text]:focus { outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
  textarea::placeholder, input::placeholder { color: var(--on-surface-variant); opacity: .75; }
  input[type=file] { font: var(--body-m); letter-spacing: var(--body-m-ls); color: var(--on-surface-variant); }
  input[type=file]::file-selector-button { font: var(--label-l); letter-spacing: var(--label-l-ls); border: 1px solid var(--outline); background: transparent; color: var(--primary); border-radius: 16px; padding: 6px 16px; margin-right: 10px; cursor: pointer; }

  .hidden { display: none !important; }
  .hint { color: var(--on-surface-variant); font: 400 13px/20px var(--font-sans); letter-spacing: .2px; }
  div.hint { margin: 10px 0 14px; }
  .composer + .hint, .composer ~ div.hint { margin-top: 12px; }
  .muted { color: var(--on-surface-variant); font: 400 13px/20px var(--font-sans); letter-spacing: .2px; }
  .sp { flex: 1; }
  .row { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
  .row label { display: inline-flex; align-items: center; gap: 8px; font: var(--body-m); letter-spacing: var(--body-m-ls); color: var(--on-surface); }
  input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--btn); }
  .err { color: var(--error); font: 400 13px/20px var(--font-sans); letter-spacing: .2px; margin-top: 8px; }
  .warn { font: 400 13px/20px var(--font-sans); letter-spacing: .2px; color: var(--on-warn-container); background: var(--warn-container); border-radius: var(--r-sm); padding: 8px 12px; margin-top: 8px; }

  /* верхняя панель: логотип Zefiro (жёлтый символ) и слово */
  .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-surface); border-radius: var(--r-sm); flex: none; }
  .brand img { height: 30px; width: auto; display: block; }
  .crumb { color: var(--outline); font: var(--title-l); }

  /* экран презентации */
  .app { display: grid; grid-template-columns: 208px 1fr 360px; grid-template-rows: 64px 1fr; height: 100vh; }
  header { grid-column: 1/-1; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 20px; background: var(--surface-container-low); }
  header h1 { font: var(--title-l); letter-spacing: var(--title-l-ls); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .status { font: var(--label-l); letter-spacing: var(--label-l-ls); padding: 4px 12px; border-radius: var(--r-sm); background: var(--ok-container); color: var(--on-ok-container); white-space: nowrap; }
  .status.failed { background: var(--error-container); color: var(--on-error-container); }
  nav { overflow-y: auto; padding: 12px; background: var(--surface-container-low); display: flex; flex-direction: column; gap: 10px; min-height: 0; }
  .thumb { position: relative; width: 176px; height: 99px; overflow: hidden; border: 2px solid transparent; border-radius: var(--r-md); cursor: default; flex: none; background: #fff; box-shadow: var(--e1); transition: box-shadow .15s; }
  .thumb:hover { box-shadow: var(--e2); }
  .thumb.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
  .thumb .n { position: absolute; left: 6px; top: 4px; font: var(--label-s); letter-spacing: var(--label-s-ls); color: var(--on-surface); z-index: 2; background: rgba(255,251,242,.85); padding: 0 5px; border-radius: var(--r-sm); }
  .thumb .dot { position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; z-index: 2; }
  .thumb .dot.error { background: var(--error); }
  .thumb .dot.warning { background: var(--amber); }
  /* слайд закреплён: колонка не прокручивается, прокручиваются только замечания под слайдом */
  main { overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 24px 24px 0; gap: 12px; min-height: 0; background: var(--surface); }
  .stage { position: relative; box-shadow: var(--e2); border-radius: var(--r-md); overflow: hidden; background: #fff; flex: none; }
  .stage .empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: var(--on-surface-variant); padding: 24px; text-align: center; }
  .notices { display: flex; flex-direction: column; gap: 4px; font: var(--body-m); letter-spacing: var(--body-m-ls); align-self: stretch; width: 100%; max-width: 960px; margin: 0 auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 24px; scrollbar-gutter: stable; }
  main > .stage { flex: none; }
  .notice { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px; border-radius: var(--r-sm); }
  .notice:hover { background: var(--surface-container); }
  .notice .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 7px; }
  .notice.error .dot { background: var(--error); }
  .notice.warning .dot { background: var(--amber); }
  .notice .nt { font-weight: 500; }
  .notice .acts { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
  .stage.drop { outline: 4px dashed var(--tertiary); outline-offset: 4px; }
  aside { background: var(--surface-container-low); overflow-y: auto; padding: 16px; min-height: 0; border-radius: var(--r-xl) 0 0 0; }
  .busy { position: fixed; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, transparent, var(--outline-variant), var(--primary), var(--outline-variant), transparent); background-size: 40% 100%; animation: b 1s linear infinite; display: none; }
  .busy.on { display: block; }

  /* список презентаций */
  .list { max-width: 1180px; margin: 0 auto; padding: 0 16px 64px; }
  .lh { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 4px; margin-bottom: 8px; background: none; }
  .list section { background: var(--surface-container-low); border-radius: var(--r-lg); padding: 20px 24px; margin-top: 16px; }
  .list h2, aside h2 { font: var(--label-m); letter-spacing: var(--label-m-ls); text-transform: uppercase; color: var(--on-surface-variant); margin: 0 0 12px; }
  textarea.tz { min-height: 180px; }
  .tpl-row { margin: 0 0 12px; }
  /* разбор ТЗ на главной: слева поле ТЗ, справа оценка с критериями (высоты сопоставимы), под ними структура презентации */
  .br-grid { display: flex; flex-direction: column; gap: 16px; }
  .br-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
  .br-head h2 { margin: 0; }
  .tpl-select { min-height: 32px; padding: 4px 28px 4px 12px; font-size: 13px; border-radius: 16px; }
  /* поле ТЗ и окно оценки: одна высота с первого экрана (не прыгает при разборе), одинаковые рамка и скругление; оценка внутри прокручивается */
  .br-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; height: 420px; }
  .br-top .field, .br-top .br-rate { border: 1px solid var(--outline); border-radius: var(--r-md); background: var(--surface-container-lowest); }
  .br-top > #rate { display: flex; min-height: 0; }
  .br-top > #rate > .br-rate { flex: 1; min-width: 0; overflow-y: auto; }
  .br-top > #rate > .br-rate.waiting { overflow: hidden; }
  .br-top .br-left, .br-top #briefbox, .br-top .field { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .br-top .field textarea { flex: 1; min-height: 0; resize: none; }
  .br-idle .br-num { color: var(--outline); }
  .br-idle .br-skel b { animation: none; }
  @media (max-width: 900px) { .br-top { grid-template-columns: minmax(0, 1fr); height: auto; } .br-top .field textarea { min-height: 200px; } .br-top > #rate > .br-rate { max-height: 360px; } }
  .br-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .br-left .row, .br-left .tpl-row { margin: 0; }
  .br-rate { position: relative; border: 1px solid var(--outline); border-radius: var(--r-md); background: var(--surface-container-lowest); padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .br-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
  .br-num { font: 700 44px/44px var(--font-sans); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
  .br-num small { font: 400 16px/20px var(--font-sans); color: var(--on-surface-variant); letter-spacing: .15px; margin-left: 2px; }
  .br-num.lv-ok, .br-vt.lv-ok { color: var(--ok); } .br-num.lv-warn, .br-vt.lv-warn { color: var(--on-warn-container); } .br-num.lv-err, .br-vt.lv-err { color: var(--error); }
  .br-vt { font: var(--title-m); letter-spacing: var(--title-m-ls); }
  .br-scale { display: flex; gap: 3px; margin: 8px 0 6px; }
  .br-scale i { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-container-high); }
  .br-scale i.on.lv-ok { background: var(--ok); } .br-scale i.on.lv-warn { background: var(--amber); } .br-scale i.on.lv-err { background: var(--error); }
  .br-cl { list-style: none; margin: 0; padding: 0; }
  .br-c { border-top: 1px solid var(--outline-variant); padding: 8px 0; }
  .br-c:first-child { border-top: 0; }
  .br-cr { display: grid; grid-template-columns: 20px 124px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
  .br-cn { font-weight: 500; }
  .br-ce { color: var(--on-surface-variant); font: 400 13px/18px var(--font-sans); overflow-wrap: anywhere; }
  .br-ce b { color: var(--on-surface); font-weight: 500; }
  .br-ce input[type=text] { width: 100%; padding: 4px 8px; }
  .br-ca { white-space: nowrap; }
  .br-ic { width: 18px; height: 18px; margin-top: 1px; }
  .br-st { font: var(--label-s); letter-spacing: var(--label-s-ls); text-transform: uppercase; padding: 2px 8px 0; display: inline-block; }
  .br-st.ok { color: var(--ok); } .br-st.vague, .br-st.missing { color: var(--on-warn-container); } .br-st.conflict { color: var(--error); }
  @media (max-width: 480px) { .br-cr { grid-template-columns: 20px minmax(0, 1fr) auto; } .br-ce { grid-column: 2 / 4; } }
  .br-fq { margin: 8px 0 4px 28px; border: 1px solid var(--primary); border-radius: var(--r-md); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
  .br-qt { font: var(--title-s); letter-spacing: var(--title-s-ls); }
  .br-tag { align-self: flex-start; font: var(--label-s); letter-spacing: var(--label-s-ls); text-transform: uppercase; padding: 1px 8px; border-radius: var(--r-xs); background: var(--warn-container); color: var(--on-warn-container); }
  .br-note { background: var(--error-container); color: var(--on-error-container); border-radius: var(--r-sm); padding: 8px 10px; font: 400 13px/18px var(--font-sans); }
  .br-fq .chips { margin: 0; }
  .br-fq .chip { margin: 0 8px 0 0; }
  .br-skel { display: flex; flex-direction: column; gap: 10px; }
  .br-skel b { display: block; height: 14px; border-radius: 7px; background: var(--surface-container-high); animation: br-p 1.1s ease-in-out infinite alternate; }
  @keyframes br-p { from { opacity: .45; } to { opacity: 1; } }
  /* те же две колонки и зазор, что у окон ТЗ и оценки сверху; высота колонок фиксирована, список прокручивается внутри */
  .br-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-width: 0; }
  .br-side:empty { display: none; }
  .br-sh { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; height: 20px; }
  .br-sh h2 { margin: 0; }
  .br-col { height: 300px; overflow-y: auto; border: 1px solid var(--outline); border-radius: var(--r-md); padding: 10px; display: flex; flex-direction: column; gap: 2px; background: var(--surface-container-lowest); }
  .br-col > * { flex: none; }
  .br-col.sugg { border-style: dashed; }
  @media (max-width: 900px) { .br-side { grid-template-columns: minmax(0, 1fr); } }
  .br-ch { font: var(--title-s); letter-spacing: var(--title-s-ls); padding: 0 4px; }
  .br-col > .hint { padding: 0 4px 4px; margin: 0; }
  .br-sl { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 5px 4px; border-radius: var(--r-sm); cursor: pointer; }
  .br-sl:hover { background: var(--surface-container-low); }
  .br-sl.off .br-st-t { color: var(--on-surface-variant); text-decoration: line-through; }
  .br-sn { color: var(--on-surface-variant); font: var(--label-m); letter-spacing: var(--label-m-ls); white-space: nowrap; padding-top: 2px; }
  .br-why { grid-column: 2 / 4; margin: 0; }
  .br-left .field textarea { min-height: 200px; padding-bottom: 56px; }
  .br-left .field.has-files .field-tools { top: auto; bottom: 6px; }
  .br-left .field-tools { gap: 6px; }
  /* модель и «Собрать» в углу поля: полупрозрачные, пока поле не в фокусе и не под курсором */
  .field-tools .br-model, .field-tools .br-go { min-height: 32px; opacity: .5; transition: opacity .15s; }
  .field-tools .br-model { padding: 2px 12px; font-size: 13px; }
  .field-tools .br-go { padding: 4px 18px; }
  .field:hover .br-model, .field:hover .br-go, .field:focus-within .br-model, .field:focus-within .br-go, .field-tools .br-go:focus-visible { opacity: 1; }
  .br-sum { color: var(--on-surface-variant); font: 400 13px/20px var(--font-sans); }
  .br-sum:empty { display: none; }
  .decks { display: flex; flex-direction: column; gap: 2px; }
  .deck-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-md); color: inherit; text-decoration: none; transition: background .15s; }
  .deck-row:hover { background: var(--surface-container-high); }
  .deck-row .dt { flex: 1; font: var(--title-m); letter-spacing: var(--title-m-ls); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* полоса этапов — M3 chips: пройденные — зелёные (со снимком — кнопки возврата), текущий — заливка, «↪ Этап» — обводка */
  .stagebox { margin-bottom: 16px; }
  .stages { display: flex; flex-wrap: wrap; gap: 8px; }
  .run { position: relative; }
  .run summary { cursor: pointer; white-space: nowrap; font: var(--label-l); padding: 4px 12px; border-radius: var(--r-sm); border: 1px solid var(--outline-variant); list-style: none; }
  .run-body { position: absolute; z-index: 20; top: 36px; left: 0; min-width: 320px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--r-sm); display: grid; gap: 4px; font: var(--label-l); }
  .stg { font: var(--label-l); letter-spacing: var(--label-l-ls); padding: 6px 16px; border-radius: var(--r-sm); border: 1px solid var(--outline-variant); background: transparent; color: var(--on-surface-variant); white-space: nowrap; }
  .stg.cur { background: var(--secondary-container); border-color: transparent; color: var(--on-secondary-container); }
  .stg.past, .stg.back { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
  button.stg, .chip { min-height: 32px; }
  button.stg { cursor: pointer; }
  .stg.back:hover { background: color-mix(in srgb, var(--ok) 10%, transparent); }

  /* ход работы: шаги, линейный индикатор «прошло / обычно», фраза ожидания, итог */
  .st { margin: 12px 0; font: var(--body-m); letter-spacing: var(--body-m-ls); }
  .st > div { padding: 3px 0; }
  .st .done { color: var(--outline); }
  .st .now { font-weight: 500; }
  .ok { color: var(--ok); font-weight: 500; }
  .part { color: var(--on-warn-container); font-weight: 500; }
  .reply { font: var(--body-m); letter-spacing: var(--body-m-ls); color: var(--on-surface); background: var(--surface-container, rgba(0,0,0,.04)); border-radius: 12px; padding: 10px 14px; margin: 6px 0; }
  .sum { white-space: pre-line; font: var(--body-s); letter-spacing: var(--body-s-ls); color: var(--on-surface-variant); padding: 2px 0; }
  .prog { margin: 8px 0 4px; }
  .bar { height: 4px; background: var(--secondary-container); border-radius: 2px; overflow: hidden; }
  .bar i { display: block; height: 100%; background: var(--primary); border-radius: 2px; transition: width .8s linear; }
  .bar.late i { background: var(--amber); }
  .prog-t { display: flex; justify-content: space-between; font: var(--label-m); letter-spacing: var(--label-m-ls); color: var(--on-surface-variant); margin-top: 6px; }
  .phrase { color: var(--on-surface-variant); font-style: italic; }
  .phrase-row { display: flex; align-items: center; gap: 8px; }
  .br-rate.waiting > :not(.br-wait) { filter: blur(2px); opacity: .55; pointer-events: none; }
  .br-wait { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; border-radius: inherit; background: color-mix(in srgb, var(--surface-container-lowest) 72%, transparent); }
  .br-wait-now { font: var(--title-s); letter-spacing: var(--title-s-ls); }
  .zf-spin.big { width: 48px; height: 48px; }
  .zf-spin { width: 20px; height: 20px; flex: none; animation: zf-spin 1.6s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .zf-spin { animation: none; } }

  /* карточка вопросов: outlined card, варианты — filter chips */
  .card { border: 1px solid var(--outline-variant); border-radius: var(--r-md); margin: 12px 0; background: var(--surface-container-lowest); overflow: hidden; }
  .card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 16px; background: var(--surface-container); font: var(--title-s); letter-spacing: var(--title-s-ls); }
  .cq { padding: 12px 16px; border-top: 1px solid var(--outline-variant); }
  .cq.skipped > :not(.cq-foot) { opacity: .38; }
  .card-h .muted { white-space: nowrap; flex: none; }
  .cq-t { font-weight: 500; }
  .cq-why { color: var(--on-surface-variant); font: 400 13px/20px var(--font-sans); letter-spacing: .2px; margin: 2px 0 8px; }
  .chips { margin: 10px 0 4px; }
  .chip { display: inline-block; border: 1px solid var(--outline); background: transparent; color: var(--on-surface-variant); border-radius: var(--r-sm); padding: 6px 16px; margin: 0 8px 8px 0; font: var(--label-l); letter-spacing: var(--label-l-ls); text-align: left; }
  .chip:hover:not(:disabled) { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
  .chip.on { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }
  .cq-ta { min-height: 52px; height: 52px; margin: 4px 0; padding: 10px 12px; }
  .cq-file { display: flex; align-items: center; gap: 8px; font: var(--body-s); letter-spacing: var(--body-s-ls); margin: 4px 0; flex-wrap: wrap; }
  .cq-file img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--outline-variant); }
  .drop-file { border: 1px dashed var(--outline); border-radius: var(--r-sm); padding: 10px; text-align: center; color: var(--on-surface-variant); font: var(--body-s); letter-spacing: var(--body-s-ls); cursor: pointer; margin: 4px 0; }
  .drop-file.over { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
  .cq-foot { display: flex; justify-content: flex-end; }
  .card-f { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--outline-variant); }

  /* поле просьбы */
  .composer { margin: 16px 0 0; }
  .composer textarea { min-height: 96px; }
  .composer .field { margin-bottom: 8px; }
  /* после генерации — только итог; шаги свёрнуты */
  .st details.steps { margin-top: 4px; }
  .st details.steps summary { cursor: pointer; color: var(--on-surface-variant); font: var(--body-s); letter-spacing: var(--body-s-ls); }
  .st details.steps .done { padding: 2px 0; }

  /* итог проверки ручных правок: готовность, находки по уровням (поправил — зелёный, решите — оранжевый, в порядке — серый) */
  .sec { border-top: 1px solid var(--outline-variant); margin-top: 14px; padding-top: 12px; }
  .sec b { display: block; margin: 12px 0 6px; font: var(--label-m); letter-spacing: var(--label-m-ls); color: var(--on-surface-variant); }
  .rd { font: var(--label-l); letter-spacing: var(--label-l-ls); border-radius: var(--r-sm); padding: 8px 12px; margin: 8px 0 4px; }
  .rd.ready { color: var(--on-ok-container); background: var(--ok-container); }
  .rd.minor { color: var(--on-warn-container); background: var(--warn-container); }
  .rd.blocking { color: var(--on-error-container); background: var(--error-container); }
  .fds { margin: 4px 0 6px; }
  .fd { font: var(--body-m); letter-spacing: var(--body-m-ls); padding: 4px 0 4px 24px; position: relative; }
  .fd::before { position: absolute; left: 2px; top: 3px; font-weight: 700; }
  .fd.fixed { color: var(--ok); }
  .fd.fixed::before { content: '✓'; color: var(--ok); }
  .fd.decide { color: var(--on-warn-container); }
  .fd.decide::before { content: '!'; color: var(--amber); left: 6px; }
  .fd.decide.imp { color: var(--on-error-container); }
  .fd.decide.imp::before { color: var(--error); }
  .fd.okf { color: var(--on-surface-variant); }
  .fd.okf::before { content: '•'; color: var(--outline); left: 5px; }
  .chk { font: var(--body-m); letter-spacing: var(--body-m-ls); padding: 4px 0 4px 24px; position: relative; }
  .chk.no::before { content: '!'; position: absolute; left: 5px; top: 3px; color: var(--amber); font-weight: 700; }

  /* «Отправка»: сводка времени, опросник, крупные кнопки */
  .sendbox { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; }
  .summary { background: var(--surface-container); border-radius: var(--r-md); padding: 12px 16px; font: var(--body-m); letter-spacing: var(--body-m-ls); }
  .sm-l { font-weight: 500; }
  .sm-how { margin-top: 6px; }
  .ts { display: flex; flex-direction: column; gap: 6px; }
  .ts-k { font: var(--label-m); letter-spacing: var(--label-m-ls); color: var(--on-surface-variant); }
  .ts-big { font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--primary); }
  .ts-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; margin-top: 4px; }
  .ts-n, .ts-v { font: var(--body-s); letter-spacing: var(--body-s-ls); color: var(--on-surface-variant); }
  .ts-v { min-width: 56px; text-align: right; }
  .ts-track { height: 14px; background: var(--surface-container-high); border-radius: 7px; overflow: hidden; }
  .ts-bar { height: 100%; display: flex; gap: 2px; border-radius: 7px; overflow: hidden; }
  .ts-zef { background: var(--primary); }
  .ts-seg { min-width: 2px; }
  .ts-c0 { background: #8aa4d4; } .ts-c1 { background: #b8c7e6; } .ts-c2 { background: #6f86ad; } .ts-c3 { background: #d6dff0; }
  .ts-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font: var(--body-s); letter-spacing: var(--body-s-ls); }
  .ts-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
  .survey { border: 1px solid var(--outline-variant); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface-container-lowest); }
  .sv-h { font: var(--title-s); letter-spacing: var(--title-s-ls); margin-bottom: 10px; }
  .sv-q { font: var(--title-s); letter-spacing: var(--title-s-ls); margin: 10px 0 6px; }
  .sv > .sv-q:first-child { margin-top: 0; }
  .sv-scale { display: flex; gap: 4px; }
  .sv-n { flex: 1; min-width: 0; height: 36px; min-height: 0; padding: 0; border: 1px solid var(--outline); border-radius: var(--r-sm); background: transparent; color: var(--on-surface-variant); font: var(--label-m); letter-spacing: var(--label-m-ls); }
  .sv-n.on { background: var(--btn); color: var(--on-btn); border-color: transparent; }
  .sv-edges { display: flex; justify-content: space-between; font: var(--label-m); letter-spacing: var(--label-m-ls); color: var(--on-surface-variant); margin-top: 6px; }
  .sv-more { display: block; margin-top: 8px; font: var(--label-m); letter-spacing: var(--label-m-ls); color: var(--primary); background: none; border: 0; padding: 4px 0; border-radius: 0; text-decoration: underline; }
  .sv-ta { min-height: 56px; height: 56px; margin: 2px 0 0; }
  .stage .empty .empty-t { font: var(--title-l); letter-spacing: var(--title-l-ls); }
  .author { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .author input { width: 200px; padding: 6px 12px; border-radius: var(--r-sm); }
  .author .link.need { color: var(--error); }

  /* отменить / вернуть в шапке */
  .history { display: inline-flex; gap: 4px; }
  .history .icon-h { min-height: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px; background: var(--surface-container-high); color: var(--on-surface); display: grid; place-items: center; }
  .history .icon-h:hover:not(:disabled) { background: var(--surface-container-highest); box-shadow: none; }
  .history .icon-h:disabled { opacity: .38; cursor: default; }
  /* перестановка миниатюр */
  .thumb.dragging { opacity: .4; }
  .thumb.drop-before { box-shadow: 0 -4px 0 0 var(--primary); }
  .thumb.drop-after { box-shadow: 0 4px 0 0 var(--primary); }
  /* замечания под слайдом: заголовок и описание раскрыты */
  .notice .nb { flex: 1; min-width: 0; }
  .notice .nd { color: var(--on-surface-variant); font: var(--body-s); letter-spacing: var(--body-s-ls); margin-top: 2px; }
  /* панель оформления над текстом слайда (textbar.js) */
  .textbar { position: fixed; z-index: 50; display: flex; align-items: center; gap: 2px; padding: 6px; background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 2px 12px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04); }
  .textbar .tb { position: relative; min-height: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-md); color: var(--on-surface); display: grid; place-items: center; }
  .textbar .tb:hover { background: var(--surface-container); box-shadow: none; }
  .textbar .tb.on { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
  .textbar .tb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .textbar .sw { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--outline-variant); }
  .textbar .tb-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--outline-variant); }
  .tb-pal { display: none; position: absolute; top: 46px; left: 0; padding: 8px; gap: 6px; flex-wrap: wrap; width: 176px; background: var(--surface); border-radius: var(--r-md); box-shadow: 0 2px 12px rgba(0,0,0,.18); cursor: default; }
  .tb-pal.open { display: flex; }
  .tb-pal .pal-c { width: 32px; height: 32px; min-height: 0; padding: 0; border: 1px solid var(--outline-variant); border-radius: 8px; }
  .tb-pal .pal-none { min-height: 32px; padding: 4px 10px; width: 100%; border: 0; border-radius: var(--r-sm); color: var(--on-surface); }
  .tb-pal .pal-none:hover { background: var(--surface-container); box-shadow: none; }
  /* окно промта к элементу */
  .el-prompt { position: fixed; z-index: 50; width: 420px; padding: 14px; background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 2px 16px rgba(0,0,0,.2); display: grid; gap: 8px; }
  .el-prompt .ep-head { display: flex; justify-content: space-between; align-items: center; font: var(--title-s); letter-spacing: var(--title-s-ls); }
  .el-prompt textarea { min-height: 72px; }
  .el-prompt .ep-foot { display: flex; justify-content: flex-end; }
  /* материалы к промту (attach.js): поле, скрепка и чипы — одна рамка */
  .field { position: relative; border: 1px solid var(--outline); border-radius: var(--r-xs); background: var(--surface-container-lowest); transition: border-color .15s; cursor: text; }
  .field:hover { border-color: var(--on-surface); }
  .field:focus-within { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
  .field textarea, .field textarea:hover, .field textarea:focus { display: block; border: 0; box-shadow: none; background: transparent; padding-right: 84px; margin: 0; }
  .field-tools { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 2px; align-items: center; }
  .field.has-files .field-tools { bottom: auto; top: 6px; }
  .field .clip, .field .send { min-height: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 16px; display: grid; place-items: center; transition: opacity .15s, background .15s; }
  .field .clip { color: var(--on-surface-variant); opacity: .35; }
  .field:hover .clip, .field:focus-within .clip, .field .clip:focus-visible { opacity: 1; }
  .field .clip:hover { background: var(--surface-container); box-shadow: none; }
  .field .send { background: var(--btn, var(--on-surface)); color: #fff; }
  .field .send:hover:not(:disabled) { box-shadow: var(--e1); }
  .field .send:disabled { background: var(--surface-container-high); color: var(--on-surface-variant); opacity: .6; cursor: default; }
  .field .att-chips { padding: 0 8px; }
  .field.has-files .att-chips { padding: 0 8px 8px; }
  .field .att-err { padding: 0 10px 6px; }
  .field:has(.cq-ta) { margin: 4px 0; }
  .att-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .att-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 2px 4px 2px 8px; border: 1px solid var(--outline-variant); border-radius: var(--r-sm); font: var(--body-s); letter-spacing: var(--body-s-ls); }
  .att-chip img { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; }
  .att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .att-x { min-height: 0; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; color: var(--on-surface-variant); font-size: 18px; line-height: 1; }
  .att-x:hover { background: var(--surface-container); box-shadow: none; }
  .att-err { width: 100%; color: var(--error); font: var(--body-s); }
  .att-err:empty { display: none; }

  @media (max-width: 1100px) { .app { grid-template-columns: 168px 1fr 300px; } .thumb { width: 144px; height: 81px; } }
}

/* правила, которые нарочно касаются слайда: масштаб миниатюр и сцены, подсветка слотов при правке */
.thumb .slide { transform: scale(.0917); transform-origin: 0 0; pointer-events: none; }
.stage .slide { transform-origin: 0 0; }
.stage [data-slot] { cursor: text; }
.stage [data-slot]:hover { outline: 3px dashed rgba(43,95,181,.6); outline-offset: -3px; }
.stage [data-slot].editing { outline: 4px solid var(--tertiary); outline-offset: -4px; background: rgba(255,255,255,.08); }
.stage [data-slot].overflow { outline: 3px dashed var(--error); outline-offset: 6px; border-radius: 10px; }
.stage [data-slot].hl-short { box-shadow: 0 0 0 4px rgba(255, 193, 7, .55); border-radius: 10px; }
.stage [data-slot].hl-strong { outline: 5px solid var(--amber); outline-offset: -5px; }
.stage .drop { outline: 4px dashed var(--tertiary); outline-offset: -4px; }
@media (max-width: 1100px) { .thumb .slide { transform: scale(.075); } }
@keyframes zf-spin { to { transform: rotate(360deg); } }
@keyframes b { from { background-position: -40% 0; } to { background-position: 140% 0; } }