/* Конструктор киноафиш — стили админки. Тёмно-нейтральные, чтобы не спорить с афишей.
   Все размеры шрифта ≥ 16 px, кнопки ≥ 44 px высотой. */

:root {
  --bg: #101114;
  --top: rgba(14, 15, 18, 0.94);
  --panel: #18191e;
  --panel-2: #202127;
  --field: #0e0f12;
  --line: #2a2c33;
  --line-2: #3a3d46;
  --text: #f2f2f4;
  --muted: #b3b5bd;
  --faint: #8f929c;
  --accent: #f4c152;
  --accent-hi: #ffd06b;
  --accent-ink: #1d1503;
  --danger: #ff6f61;
  --danger-t: #ff9d93;
  --ok: #5ad08a;
  --warn: #ffb547;
  --focus: #8ab4ff;
  --off-bg: rgba(255, 168, 64, 0.11);
  --off-line: rgba(255, 168, 64, 0.5);
  --off-text: #ffc477;
  --age0: #3ccf7d;
  --age6: #2cc6c0;
  --age12: #ffd23f;
  --age16: #ff8a3d;
  --age18: #ff5a52;
  --r: 12px;
  --font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --top-h: 80px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(244, 193, 82, 0.35); }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
/* касание: без задержки и без двойного «зума» на кнопках и полях */
button, a, label, input, select, textarea, .seg-it, .th-card, .daychip { touch-action: manipulation; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h2, h3, p { margin: 0; }

.boot { padding: 40px 24px; font-size: 18px; color: var(--muted); }
.noscript { padding: 24px; font-size: 18px; }

/* ── иконки ── */
.ic { display: inline-flex; width: 22px; height: 22px; flex: none; }
.ic svg { width: 100%; height: 100%; display: block; }
.ic.inl { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }

/* ── кнопки ── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border: 1.5px solid var(--line-2); border-radius: var(--r);
  background: var(--panel-2); color: var(--text);
  font-size: 17px; font-weight: 600; line-height: 1.15;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: #2a2c33; border-color: #4b4e58; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #1c0503; }
.btn.danger:hover { background: #ff8579; border-color: #ff8579; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.btn.danger-t { color: var(--danger-t); }
.btn.icon { width: 44px; min-height: 44px; padding: 0; flex: none; }
.btn.small { min-height: 44px; padding: 0 14px; font-size: 16px; }
.btn.busy { color: transparent !important; pointer-events: none; }
.btn.busy .ic { opacity: 0; }
.btn.busy::after {
  content: ''; position: absolute; left: calc(50% - 11px); top: calc(50% - 11px);
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .85); border-right-color: transparent;
  animation: spin .8s linear infinite;
}
.btn.primary.busy::after { border-color: var(--accent-ink); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

.link {
  min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--muted); font-size: 16px; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; text-align: left;
}
.link:hover { color: var(--text); }

/* ── поля ── */
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lbl { font-size: 16px; font-weight: 500; color: var(--muted); }
.lbl i { font-style: normal; color: var(--faint); }
.inp {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1.5px solid var(--line-2); border-radius: 10px;
  background: var(--field); color: var(--text);
  font-size: 18px;
  transition: border-color .15s, box-shadow .15s;
}
.inp::placeholder { color: #6c6f79; }
.inp:hover { border-color: #4b4e58; }
.inp:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(138, 180, 255, .25); outline: none; }
.inp.big { height: 52px; font-size: 20px; font-weight: 600; }
input[type="date"].inp { padding-right: 8px; }
input[type="date"].inp::-webkit-calendar-picker-indicator { filter: invert(.85); cursor: pointer; padding: 6px; }
.suffix-wrap { position: relative; display: block; }
.suffix-wrap .inp { padding-right: 52px; }
.suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 17px; pointer-events: none; }

/* переключатели-сегменты (качество, число дней) */
.seg {
  display: inline-flex; gap: 3px; padding: 3px;
  border: 1.5px solid var(--line-2); border-radius: 13px; background: var(--field);
}
.seg-it { position: relative; display: flex; }
.seg-it input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-it span {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  border-radius: 10px; font-weight: 700; color: var(--muted);
  transition: background-color .15s, color .15s;
}
.seg-it:hover span { color: var(--text); }
.seg-it input:checked + span { background: var(--text); color: #111216; }
.seg-it input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.seg.nums .seg-it span { padding: 0; }

/* ── шапка ── */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  padding: 10px 24px;
  background: var(--top);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: 6px; }
.brand-ic {
  width: 44px; height: 44px; padding: 9px; border-radius: 12px;
  background: linear-gradient(140deg, #f7cb63, #e3862e); color: var(--accent-ink);
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; color: var(--muted); white-space: nowrap; }
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.status[data-state="saving"] .dot, .status[data-state="loading"] .dot { background: var(--warn); }
.status[data-state="error"], .status[data-state="memory"] { color: #ffb4ab; }
.status[data-state="error"] .dot, .status[data-state="memory"] .dot { background: var(--danger); }

.fmt { display: flex; gap: 8px; }
.fmt-btn {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 6px 18px 6px 14px;
  border: 2px solid var(--line-2); border-radius: 14px;
  background: var(--panel-2); color: var(--text);
  cursor: pointer; text-align: left;
  transition: background-color .15s, border-color .15s, color .15s;
}
.fmt-btn:hover { border-color: #565a65; background: #282a31; }
.fmt-btn.on { background: var(--text); border-color: var(--text); color: #111216; }
.fmt-btn.on small { color: #3b3d44; }
.fmt-shape { flex: none; border: 2.5px solid currentColor; border-radius: 4px; }
.fmt-shape.wide { width: 30px; height: 18px; }
.fmt-shape.tall { width: 18px; height: 30px; }
.fmt-txt { display: flex; flex-direction: column; line-height: 1.15; }
.fmt-txt b { font-size: 18px; font-weight: 800; white-space: nowrap; }
.fmt-txt small { font-size: 16px; color: var(--muted); white-space: nowrap; }
.top-gap { flex: 1 1 0; min-width: 0; }
.dl { display: flex; align-items: center; gap: 8px; }
.pg-cnt { font-weight: 700; margin-left: -2px; }
.pg-cnt::before { content: '· '; }
.pg-cnt:empty { display: none; }
.dl-all { position: relative; }
.cnt { color: var(--muted); font-weight: 600; }
.dl-all .cnt:empty { display: none; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  display: flex; flex-direction: column; min-width: 250px; padding: 6px;
  background: #24252b; border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.menu-it {
  min-height: 48px; padding: 0 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font-size: 17px; font-weight: 600; text-align: left; cursor: pointer;
}
.menu-it:hover, .menu-it:focus-visible { background: #33353d; outline: none; }

/* ── раскладка ── */
.layout {
  display: grid;
  grid-template-columns: minmax(540px, 1fr) minmax(0, 1.08fr);
  gap: 24px; align-items: start;
  padding: 20px 24px 96px;
  max-width: 1880px; margin: 0 auto;
}
.editor { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.preview {
  grid-column: 2; grid-row: 1;
  position: sticky; top: calc(var(--top-h) + 16px);
  max-height: calc(100vh - var(--top-h) - 32px);
  max-height: calc(100dvh - var(--top-h) - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  scrollbar-width: thin;
}
.preview > * { flex-shrink: 0; }
.preview { container-type: inline-size; }

/* 9:16 на широком экране: афиша слева во всю высоту, темы и кнопки справа (250 px) */
@media (min-width: 1180px) {
  .preview.tall {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: repeat(5, min-content) 1fr;
    column-gap: 16px; row-gap: 12px; align-items: start;
  }
  .preview.tall .stage { grid-column: 1; grid-row: 1 / span 6; min-height: 0; }
  .preview.tall > :not(.stage) { grid-column: 2; }
  .preview.tall .pv {
    height: clamp(380px, min(calc(100vh - var(--top-h) - 64px), calc((100cqw - 294px) * 16 / 9)), 1300px);
    height: clamp(380px, min(calc(100dvh - var(--top-h) - 64px), calc((100cqw - 294px) * 16 / 9)), 1300px);
    width: auto; max-width: none; max-height: none;
  }
  .preview.tall .themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .preview.tall .th-card { width: auto; }
  .preview.tall .th-name { white-space: normal; line-height: 1.2; }
  .preview.tall #optsLbl { flex-basis: 100%; }
  .preview.tall .pv-size { margin-left: 0; }
  /* узкая колонка рядом с афишей 9:16 (iPad в альбомной): «‹ Страница 1 из 2 ›» не вылезает за край */
  .preview.tall .pager { max-width: 100%; }
  .preview.tall .pager-txt { min-width: 0; flex: 1 1 auto; font-size: 16px; }
}

/* ── предпросмотр ── */
.pv-themes { display: flex; flex-direction: column; gap: 8px; }
.pv-label { font-size: 16px; font-weight: 600; color: var(--muted); }
.themes { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.th { position: relative; flex: none; }
.th input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.th-card {
  display: flex; flex-direction: column; width: 132px;
  border: 2px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--panel); cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.th-card:hover { border-color: #565a65; }
.th-cv { display: block; width: 100%; aspect-ratio: 16 / 9; background: #1b1c21; }
.th-name { padding: 6px 10px 8px; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th input:checked + .th-card { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244, 193, 82, .22); }
.th input:checked + .th-card .th-name { color: var(--accent); }
.th input:focus-visible + .th-card { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Тем восемь: на ПК — две строки по четыре, все видны сразу, без прокрутки вбок;
   на телефоне (до 959 px) остаётся лента, которую листают пальцем. */
@media (min-width: 960px) {
  .themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .themes > .th { display: flex; }
  .th-card { flex: 1 1 auto; width: auto; }
  .th-name { white-space: normal; line-height: 1.2; }
}

.pv-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.tick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; cursor: pointer; }
.tick input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }

.stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; padding: 14px;
  border: 1px solid var(--line); border-radius: 16px;
  background: radial-gradient(120% 90% at 50% 0%, #1a1b21 0%, #0b0b0e 70%);
}
.pv {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: max(320px, calc(100vh - var(--top-h) - 330px));
  max-height: max(320px, calc(100dvh - var(--top-h) - 330px));
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  background: #000;
}
.pv:fullscreen { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; object-fit: contain; border-radius: 0; box-shadow: none; }
.pv:-webkit-full-screen { width: 100vw; height: 100vh; max-width: none; max-height: none; object-fit: contain; }
.stage-msg {
  position: absolute; inset: 14px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; border-radius: 8px;
  background: rgba(10, 10, 12, .86); color: var(--text);
  font-size: 18px; font-weight: 600; line-height: 1.45;
}
.stage-msg.soft { background: rgba(10, 10, 12, .62); }
.stage-note { color: var(--muted); font-size: 16px; text-align: center; }
.txt-short { display: none; }
body.top-tall .top { position: static; }
.pv-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pager { display: flex; align-items: center; gap: 8px; }
.pager-txt { min-width: 150px; text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-size { margin-left: auto; color: var(--faint); font-size: 16px; font-variant-numeric: tabular-nums; }
.qcheck { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; color: #a6ebc3; }
.qcheck.bad { color: var(--warn); }
.qcheck .ic { margin-top: 2px; }
.warns {
  list-style: none; margin: 0; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid rgba(255, 181, 71, .38); border-radius: var(--r);
  background: rgba(255, 181, 71, .08); color: #ffe3bd; font-size: 16px;
}
.warns li { display: flex; align-items: flex-start; gap: 8px; }
.warns .ic { margin-top: 2px; color: var(--warn); }

/* ── разделы редактора ── */
.sec { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.sec h2 { margin-bottom: 14px; font-size: 22px; font-weight: 800; letter-spacing: .005em; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sec-head h2 { margin-bottom: 0; }
.sec-head .cnt { font-size: 20px; }
.hint { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.45; }
.hint .ic.inl { color: var(--text); }

/* кинотеатр */
.cin { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
.cin-logo { display: flex; flex-direction: column; align-items: flex-start; }
.cin-fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* зоны для картинок */
.drop {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 0; overflow: hidden; cursor: pointer;
  border: 2px dashed var(--line-2); border-radius: 12px;
  background: var(--field); color: var(--muted);
  transition: border-color .15s, background-color .15s;
}
.drop:hover { border-color: #5b5f6a; color: var(--text); }
.drop.has { border-style: solid; border-color: var(--line); }
.drop.drag { border-color: var(--accent); border-style: solid; background: rgba(244, 193, 82, .1); }
.drop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drop.logo { width: 112px; height: 112px; }
.drop.logo img {
  object-fit: contain; padding: 8px;
  background: repeating-conic-gradient(#1b1c21 0% 25%, #24262c 0% 50%) 50% / 16px 16px;
}
.drop.poster { width: 132px; aspect-ratio: 2 / 3; }
.drop-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; text-align: center; font-size: 16px; line-height: 1.25; }
.drop-ph b { color: var(--text); font-weight: 700; }
.drop-ph small { font-size: 16px; color: var(--faint); }
.drop-ph .ic { width: 28px; height: 28px; margin-bottom: 2px; }
.drop.busy::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(10, 10, 12, .6) no-repeat center;
}
.drop.busy::before {
  content: ''; position: absolute; z-index: 1; left: calc(50% - 14px); top: calc(50% - 14px);
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--text); border-right-color: transparent;
  animation: spin .8s linear infinite;
}

/* даты */
.dates-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.dates-row > .fld:first-child { width: 210px; }
.range { margin: 14px 0 10px; font-size: 18px; font-weight: 700; }
#secDates { container-type: inline-size; container-name: dates; }
.days { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 6px; max-width: 700px; }
.daychip small { letter-spacing: -0.01em; }
.daychip .ls { display: none; }
@container dates (max-width: 600px) {
  .days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .daychip .lf { display: none; }
  .daychip .ls { display: inline; }
}
.daychip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; min-height: 72px; padding: 6px 2px;
  border: 1.5px solid var(--line-2); border-radius: 12px;
  background: var(--field); color: var(--text); line-height: 1.15; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.daychip:hover:not(:disabled) { border-color: #5b5f6a; }
.daychip b { font-size: 16px; font-weight: 800; letter-spacing: .03em; }
.daychip .dc-date { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.daychip small { font-size: 16px; color: var(--faint); }
.daychip.we, .daychip.hol { background: var(--off-bg); border-color: var(--off-line); }
.daychip.we b, .daychip.hol b, .daychip.we small, .daychip.hol small { color: var(--off-text); }
.daychip:disabled { cursor: default; }

/* фильмы */
.films-sec { padding: 0; border: 0; background: none; }
.films-sec > .hint { margin-top: 6px; }
.films { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.add-film {
  width: 100%; min-height: 58px; margin-top: 14px;
  border-style: dashed; background: transparent; font-size: 18px;
}
.add-film:hover { background: var(--panel); }
.empty {
  padding: 30px 20px; text-align: center;
  border: 1.5px dashed var(--line-2); border-radius: 18px; background: var(--panel);
}
.empty p { color: var(--muted); }
.empty .empty-t { margin-bottom: 6px; color: var(--text); font-size: 20px; font-weight: 800; }
.empty-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

.film {
  container-type: inline-size;
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
}
.film:focus-within { border-color: #464955; }
.film-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 14px; }
.film-num {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--panel-2); color: var(--muted); font-size: 16px; font-weight: 800;
}
.film-toggle {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 48px;
  padding: 0 6px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer;
}
.film-toggle:hover { background: var(--panel-2); }
.film-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 800; }
.film-name.muted { color: var(--faint); font-weight: 600; }
.film-sum { flex: none; white-space: nowrap; color: var(--muted); font-size: 16px; }
.film-sum .bad-t { color: #ff9d93; font-weight: 600; }
.film-sum .warn-t { color: var(--warn); font-weight: 600; }
.film.off-afisha .film-name { color: var(--muted); }
.film-toggle .chev { margin-left: auto; color: var(--faint); transition: transform .2s; }
.film.collapsed .chev { transform: rotate(-90deg); }
.film-age {
  display: grid; place-items: center; flex: none;
  min-width: 46px; height: 32px; padding: 0 8px; border-radius: 8px;
  color: #111216; font-size: 16px; font-weight: 800;
}
.film-age:empty { display: none; }
.film-age.a0 { background: var(--age0); }
.film-age.a6 { background: var(--age6); }
.film-age.a12 { background: var(--age12); }
.film-age.a16 { background: var(--age16); }
.film-age.a18 { background: var(--age18); }

.film-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 14px; }
.film-top {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start;
  grid-template-areas: "poster fields" "tools tools";
}
.poster-col { grid-area: poster; display: flex; flex-direction: column; gap: 4px; }
.film-fields { grid-area: fields; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* рамка постера в карточке: тот же кадр, что на афише; двигается пальцем или мышью */
.pframe { cursor: default; }
.pf-cv { display: block; width: 100%; height: 100%; border-radius: 10px; touch-action: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pframe.can-pan .pf-cv { cursor: grab; }
.pframe.can-pan .pf-cv.dragging { cursor: grabbing; }
.pf-cv:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.pf-move {
  position: absolute; right: 6px; bottom: 6px; display: none; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10, 10, 12, .62); color: #fff; pointer-events: none;
}
.pf-move .ic { width: 18px; height: 18px; }
.pframe.can-pan .pf-move { display: grid; }
.pframe.drag .pf-move { display: none; }

.ptools {
  grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0;
  padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2);
}
.ptools.empty { display: none; }
.pt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pt-auto { color: var(--faint); font-size: 16px; }
.pt-auto:empty { display: none; }
.fitseg .seg-it span { padding: 0 12px; }
.pt-zoomrow { display: flex; align-items: center; gap: 10px; flex: 1 1 180px; min-width: 0; min-height: 44px; }
.pt-zoomrow .lbl { flex: none; }
.pt-zoom { flex: 1 1 auto; min-width: 90px; height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; touch-action: pan-y; }
.pt-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-btns .btn { padding: 0 12px; }
.pt-btns .btn .ic { width: 20px; height: 20px; }
.pt-note { flex-basis: 100%; color: var(--muted); font-size: 16px; line-height: 1.4; }
.pt-note:empty { display: none; }
.pt-warn {
  flex-basis: 100%; display: flex; gap: 8px; align-items: flex-start;
  color: #ffe3bd; font-size: 16px; line-height: 1.4;
}
.pt-warn::before { content: '!'; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: #1d1503; font-weight: 900; font-size: 15px; line-height: 1; }
.row-dur-age { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: start; }
.row-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.age-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.age-it { position: relative; display: flex; }
.age-it input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.age-it span {
  display: flex; align-items: center; justify-content: center;
  min-width: 54px; height: 48px; padding: 0 8px;
  border: 2px solid var(--line-2); border-radius: 10px;
  background: var(--field); color: var(--age, var(--text));
  font-size: 18px; font-weight: 800;
  transition: background-color .15s, border-color .15s, color .15s;
}
.age-it:hover span { border-color: var(--age); }
.age-it input:checked + span { background: var(--age); border-color: var(--age); color: #111216; }
.age-it input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.age-it.a0 { --age: var(--age0); }
.age-it.a6 { --age: var(--age6); }
.age-it.a12 { --age: var(--age12); }
.age-it.a16 { --age: var(--age16); }
.age-it.a18 { --age: var(--age18); }
.age-opts.need .age-it span { border-color: rgba(255, 181, 71, .55); border-style: dashed; }

/* сеансы */
.sess-wrap { padding-top: 14px; border-top: 1px solid var(--line); }
.sess-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.sess-title h3 { font-size: 18px; font-weight: 800; }
.sess-hint { color: var(--faint); font-size: 16px; }
.sess-cq { container-type: inline-size; }
.sess-grid { display: grid; grid-template-columns: repeat(var(--days, 7), minmax(0, 1fr)); gap: 6px; }
.day {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 8px 5px 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
}
.day.off { background: var(--off-bg); border-color: var(--off-line); }
.day-head { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; }
.day-head b { font-size: 16px; font-weight: 800; letter-spacing: .03em; }
.day-head span { font-size: 16px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.day-head small { font-size: 16px; color: var(--off-text); }
.day.off .day-head b { color: var(--off-text); }
.day-rows { display: flex; flex-direction: column; gap: 8px; }
.sess { display: flex; flex-direction: column; gap: 4px; }
.t-in {
  width: 100%; height: 46px; padding: 0 2px;
  border: 1.5px solid var(--line-2); border-radius: 9px;
  background: var(--field); color: var(--text);
  font-size: 18px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.t-in::placeholder { color: #5f626c; font-weight: 500; }
.t-in:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(138, 180, 255, .25); outline: none; }
.t-in.bad, .t-in.bad:focus {
  border-color: var(--danger); background: rgba(255, 111, 97, .14); color: #ffd6d1;
  box-shadow: 0 0 0 3px rgba(255, 111, 97, .3);
}
/* мягкие подсказки «проверьте»: ночной сеанс, подозрительная цена (на афишу всё равно уходит) */
.t-in.night:not(.bad), .p-in.suspect { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(255, 181, 71, .28); }
.p-in.suspect { color: #ffe3bd; }
.p-wrap { position: relative; display: block; }
.p-in {
  width: 100%; height: 40px; padding: 0 16px 0 2px;
  border: 1.5px solid var(--line); border-radius: 9px;
  background: transparent; color: var(--muted);
  font-size: 16px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
}
.p-in::placeholder { color: #5f626c; font-weight: 500; }
.p-in:focus { border-color: var(--focus); color: var(--text); outline: none; box-shadow: 0 0 0 3px rgba(138, 180, 255, .25); }
.p-cur { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 16px; pointer-events: none; }
.p-in:placeholder-shown + .p-cur { display: none; }
.p-in:placeholder-shown { padding-right: 2px; }   /* пока цены нет, значка ₽ нет — подсказке «цена» хватает места */
.day-tools { display: flex; gap: 4px; margin-top: auto; }
.btn.icon.tiny { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; border-radius: 9px; background: transparent; border-color: var(--line); color: var(--muted); }
.btn.icon.tiny:hover { background: var(--panel); color: var(--text); border-color: #4b4e58; }
.btn.icon.tiny .ic { width: 20px; height: 20px; }
/* подпись «во все дни» — там, где строке дня хватает ширины: планшет и узкое окно (строка 420–539 px) и телефон,
   где кнопки стоят своей строкой; в промежутке (большие телефоны) значок объясняет подсказка над фильмами */
.btn.icon.tiny .tl { display: none; }
@container (min-width: 420px) and (max-width: 539px) {
  .btn.icon.tiny.all-days { width: auto; padding: 0 10px; gap: 6px; }
  .btn.icon.tiny.all-days .tl { display: inline; font-size: 16px; }
}
/* телефон: «+» и «во все дни» стоят своей строкой под временем и ценой — места на подпись хватает */
@container (max-width: 300px) {
  .btn.icon.tiny.all-days { width: auto; padding: 0 12px; gap: 6px; }
  .btn.icon.tiny.all-days .tl { display: inline; font-size: 16px; }
}
.day-note { margin: 0; color: var(--warn); font-size: 16px; text-align: center; line-height: 1.2; }

/* узкая карточка: дни идут строками */
@container (max-width: 539px) {
  .sess-grid { grid-template-columns: minmax(0, 1fr); }
  .day { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 8px; }
  .day-head { align-items: flex-start; text-align: left; padding-top: 3px; }
  .sess { flex-direction: row; gap: 6px; }
  .sess .t-in { flex: 1 1 0; min-width: 0; height: 44px; }
  .sess .p-wrap { flex: 1 1 0; min-width: 0; }
  .sess .p-in { height: 44px; }
  .day-tools { margin-top: 0; }
  .btn.icon.tiny { flex: none; width: 44px; }
  .day-note { grid-column: 2 / -1; text-align: left; }
}
@container (max-width: 480px) {
  /* шапка карточки: кнопки сверху, название — отдельной строкой во всю ширину */
  .film-head { flex-wrap: wrap; row-gap: 0; padding: 6px 6px 4px 10px; }
  .film-toggle { order: 9; flex: 1 1 100%; padding: 0 4px; }
  .film-head [data-act="up"] { margin-left: auto; }
  /* постер над полями, рядом с ним — как фото ложится в рамку */
  .film-top { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "poster tools" "fields fields"; gap: 14px 12px; }
  .poster-col .drop.poster { width: 104px; }
  .ptools { padding: 0; border: 0; background: none; gap: 8px; align-self: stretch; align-content: flex-start; }
  .ptools.empty { display: flex; }
  .fitseg { width: 100%; }
  .fitseg .seg-it { flex: 1 1 0; }
  .fitseg .seg-it span { width: 100%; padding: 0 6px; }
  .pt-zoomrow { flex-basis: 100%; }
  .pt-btns .btn { flex: 1 1 auto; padding: 0 10px; }
  .pt-btns .btn .ic { display: none; }   /* узко: «Авто» и «Заменить» в одну строку */
  .row-dur-age { grid-template-columns: minmax(0, 1fr); }
  .row-dur-age .fld.dur { max-width: 170px; }
  .row-prices { align-items: end; }
  .age-it span { min-width: 52px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .sess-grid { grid-template-columns: minmax(0, 1fr); }
    .day { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 8px; }
    .day-head { align-items: flex-start; text-align: left; padding-top: 3px; }
    .sess { flex-direction: row; gap: 6px; }
    .sess .t-in, .sess .p-wrap { flex: 1 1 0; min-width: 0; }
    .day-tools { margin-top: 0; }
    .btn.icon.tiny { flex: none; width: 44px; }
    .row-dur-age, .row-prices { grid-template-columns: minmax(0, 1fr); }
  }
}

.film-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.confirm-slot { flex-basis: 100%; }
.confirm-slot:empty { display: none; }

/* проект */
.proj { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pbtn {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 76px; padding: 14px;
  border: 1.5px solid var(--line-2); border-radius: 14px;
  background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.pbtn:hover { background: #2a2c33; border-color: #4b4e58; }
.pbtn .ic { margin-top: 1px; color: var(--accent); }
.pbtn-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pbtn b { font-size: 17px; font-weight: 700; }
.pbtn small { color: var(--muted); font-size: 16px; line-height: 1.35; }
.pbtn.danger .ic, .pbtn.danger b { color: var(--danger-t); }
.pbtn.busy { opacity: .6; pointer-events: none; }
.pbtn.busy .ic { animation: spin 1s linear infinite; }
#projConfirm:empty { display: none; }

/* подтверждение прямо на странице */
.confirm {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 12px; padding: 14px 16px;
  border: 1.5px solid rgba(244, 193, 82, .5); border-radius: 14px;
  background: #29231a;
  animation: pop .18s ease-out;
}
.confirm.danger { border-color: rgba(255, 111, 97, .55); background: #2d1b19; }
.confirm p { font-size: 17px; line-height: 1.45; }
.confirm-act { display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* сообщения */
.toasts {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  width: min(580px, calc(100vw - 32px)); transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 16px; border-radius: 14px;
  background: #f2f2f4; color: #121316; font-size: 17px; line-height: 1.35;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  pointer-events: auto;
  animation: tin .2s ease-out;
}
.toast.error { background: #ffdcd7; color: #3d0b06; }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.toast-txt { flex: 1; padding: 6px 0; }
.toast-act {
  flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px;
  background: #121316; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
}
.toast-x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer;
}
.toast-x:hover { background: rgba(0, 0, 0, .08); }
.toast-x .ic { width: 20px; height: 20px; }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* картинка для «нажмите и удерживайте» (iPhone без «Поделиться») */
.lightbox {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto;
  padding: 16px; background: rgba(5, 5, 7, .96);
  /* iPhone в альбомной ориентации: «Закрыть» не уходит под вырез экрана */
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lb-bar p { font-size: 18px; font-weight: 600; }
.lightbox img { display: block; width: 100%; height: auto; margin-bottom: 16px; border-radius: 8px; }

body.exporting { cursor: progress; }

/* вырез экрана и полоска «Домой» на iPhone; в установленном приложении — и строка состояния */
:root { --gx-top: 24px; --gx-lay: 24px; --pt-top: 10px; }
@media (max-width: 1320px) { :root { --gx-top: 16px; } }
@media (max-width: 1240px) { :root { --gx-lay: 20px; } }
@media (max-width: 959px) { :root { --gx-top: 16px; --gx-lay: 16px; --pt-top: 12px; } }
.top {
  padding-left: max(var(--gx-top), env(safe-area-inset-left)); padding-right: max(var(--gx-top), env(safe-area-inset-right));
  padding-top: max(var(--pt-top), env(safe-area-inset-top));
}
.layout {
  padding-left: max(var(--gx-lay), env(safe-area-inset-left)); padding-right: max(var(--gx-lay), env(safe-area-inset-right));
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.toasts { bottom: calc(16px + env(safe-area-inset-bottom)); }
/* на телефоне «Сохранить в Фото» / «Поделиться» — главная кнопка, во всю ширину над PNG и JPG */
.btn.share { border-color: rgba(244, 193, 82, .7); color: var(--accent-hi); }
@media (max-width: 959px) {
  .dl .share { grid-column: 1 / -1; order: -1; }
}

/* «Поделиться» (телефон, планшет) */
.btn.share .ic { width: 20px; height: 20px; }

/* установка на экран и честная подсказка про хранение */
.install-hint, .store-note {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  font-size: 16px; line-height: 1.45;
}
.install-hint { border: 1.5px solid rgba(138, 180, 255, .45); background: rgba(138, 180, 255, .1); color: #dfe8ff; }
.store-note { border: 1.5px solid rgba(255, 181, 71, .4); background: rgba(255, 181, 71, .08); color: #ffe3bd; }
.store-note.bad { border-color: rgba(255, 111, 97, .55); background: rgba(255, 111, 97, .1); color: #ffd6d1; }
.app-note { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 0; }

/* плашка «Есть обновление» */
.upd {
  position: fixed; z-index: 70; left: 50%; top: calc(env(safe-area-inset-top) + 10px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 6px 6px 6px 14px; border-radius: 14px;
  background: #24252b; border: 1px solid var(--line-2); color: var(--text);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55); font-size: 17px; font-weight: 600;
  animation: tin .2s ease-out;
}
.upd > .ic { color: var(--accent); }
.upd .toast-x { color: var(--muted); }

/* ── экраны поуже ── */
/* афиша на нескольких страницах: в шапке на одну кнопку больше («Эта страница») — подписи форматов убираем раньше */
@media (min-width: 960px) and (max-width: 1700px) {
  .top.many .fmt-txt small { display: none; }
  .top.many .fmt-btn { min-height: 52px; }
  .dl-all .txt-full { display: none; }
  .dl-all .txt-short { display: inline; }
}
@media (min-width: 960px) and (max-width: 1420px) {
  .top.many .fmt-btn { padding: 6px 14px; gap: 10px; }
  .top.many .fmt-shape { display: none; }
  .top.many .dl { gap: 6px; }
  .top.many .dl .btn { padding: 0 10px; }
  .top.many .brand { margin-right: 0; }
}
@media (max-width: 1420px) {
  .fmt-txt small { display: none; }
  .fmt-btn { min-height: 52px; }
  .dl-all .txt-full { display: none; }
  .dl-all .txt-short { display: inline; }
}
@media (max-width: 1320px) {
  .top { padding: 10px 16px; gap: 10px; }
}
@media (max-width: 1240px) {
  .layout { grid-template-columns: minmax(500px, 1fr) minmax(0, 1fr); gap: 20px; padding: 16px 20px 96px; }
}
@media (max-width: 959px) {
  .top {
    position: static; padding: 12px 16px; gap: 10px;
    background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .dl-all .txt-full { display: inline; }
  .dl-all .txt-short { display: none; }
  .brand { order: 1; flex: 1 1 auto; margin: 0; }
  .quality { order: 2; }
  .fmt { order: 3; width: 100%; }
  .fmt-btn { flex: 1 1 0; justify-content: center; min-height: 60px; padding: 6px 10px; }
  .fmt-txt small { display: block; }
  .top-gap { display: none; }
  .dl { order: 4; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .dl .btn { width: 100%; padding: 0 10px; }
  .dl-all { grid-column: 1 / -1; }
  .menu { left: 0; right: 0; }

  .layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 12px 16px 96px; }
  .preview { grid-column: 1; grid-row: 1; position: static; max-height: none; overflow: visible; }
  .editor { grid-column: 1; grid-row: 2; }
  .stage { padding: 10px; min-height: 180px; }
  .pv { max-height: 72vh; max-height: 72dvh; }
  .themes { margin: 0 -16px; padding: 2px 16px 6px; }
  .th-card { width: 126px; }
  .th-name { padding: 6px 8px 8px; }
  .sec { padding: 16px; border-radius: 16px; }
  .sec h2 { font-size: 21px; }
}
@media (max-width: 480px) {
  .fmt-btn { min-width: 0; padding: 6px 10px; gap: 10px; }
  .fmt-txt { min-width: 0; }
  .fmt-txt small { white-space: normal; line-height: 1.2; }
  .fmt-txt b { font-size: 17px; }
  .fmt-shape.wide { width: 24px; height: 15px; }
  .fmt-shape.tall { width: 15px; height: 24px; }
  .cin { grid-template-columns: minmax(0, 1fr); }
  .dates-row > .fld:first-child { width: 100%; }
  .daychip { min-width: calc((100% - 24px) / 4); }
  .film-body { padding: 4px 12px 12px; }
  .pv-size { display: none; }
  .proj { grid-template-columns: minmax(0, 1fr); }
  /* «Скачать PNG · 2 стр.» в половину ширины телефона не влезает в строку — число страниц уходит вниз */
  .dl .btn { white-space: normal; flex-wrap: wrap; column-gap: 6px; row-gap: 0; padding-top: 4px; padding-bottom: 4px; text-align: center; }
  .pg-cnt { margin-left: 0; }
  .pg-cnt::before { content: none; }
}

/* телефон боком (высота 320–500 px): шапка в две строки вместо четырёх, чтобы афиша была видна без долгой прокрутки */
@media (max-width: 959px) and (max-height: 500px) and (orientation: landscape) {
  .top { gap: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
  .brand { flex: 0 1 auto; }
  .brand-ic { width: 40px; height: 40px; padding: 8px; }
  .fmt { order: 2; width: auto; flex: 1 1 auto; }
  .fmt-btn { min-height: 48px; }
  .fmt-txt small { display: none; }
  .quality { order: 3; }
  .dl { order: 4; display: flex; flex-wrap: wrap; }
  .dl .btn { width: auto; flex: 1 1 auto; }
  .dl .share { order: 0; }
  .dl-all { flex: 1 1 auto; }
  .dl-all .btn { width: 100%; }
  .pv { max-height: 82vh; max-height: 82dvh; }
}

/* совсем узкие телефоны (320–380 px): кнопки сжимаются, а не раздвигают страницу */
@media (max-width: 380px) {
  .fmt-btn { gap: 8px; padding: 6px 8px; min-width: 0; }
  .fmt-shape { display: none; }
  .fmt-txt { min-width: 0; }
  .fmt-txt b { font-size: 16px; }
  .fmt-txt small { white-space: normal; line-height: 1.2; }
  .dl .btn { padding: 0 6px; font-size: 16px; min-width: 0; }
  .dl .btn:not(.share) .ic { display: none; }
}
@media (max-width: 400px) {
  /* «Сколько дней»: семь кнопок по 44 px в ряд не помещаются — две строки, 4 + 3 */
  .dates-row > .fld { width: 100%; }
  .seg.nums { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); width: 100%; }
}
@container (max-width: 360px) {
  .fitseg { flex-direction: column; }
  .pt-zoomrow { flex-wrap: wrap; gap: 4px 10px; }
  .pt-zoom { min-width: 0; width: 100%; }
}
@container (max-width: 300px) {
  /* строка дня: время и цена во всю ширину, «+» и «во все дни» — под ними */
  .day { grid-template-columns: 46px minmax(0, 1fr); }
  .day-tools { grid-column: 2; justify-content: flex-end; }
  .btn.icon.tiny { width: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn.busy::after, .drop.busy::before { animation-duration: 1.6s !important; }
}