/*
  Ширины экрана:
    телефон      до 599 px   — одна колонка, всё крупно под палец
    планшет      600–1023    — две колонки карточек с 720 px
    компьютер    от 1024     — вкладки в одну строку с логотипом, крупнее фото
    широкий      от 1440     — три колонки карточек
*/
:root {
  --ink: #090b12;
  --panel: #10131d;
  --panel2: #151a26;
  --line: rgba(255, 255, 255, .09);
  --text: #e7eaf0;
  --muted: #8c94a7;
  --cyan: #47f5ff;
  --violet: #a78bfa;
  --green: #58f29a;
  --amber: #f7c76b;
  --red: #ff6b8a;
  --radius: 18px;
  --maxw: 1100px;      /* ширина содержимого */
  --gutter: 16px;      /* поля по бокам */
  --thumb: 64px;       /* миниатюра в ленте */
  --thumb-big: 104px;  /* миниатюра в хронологии и карточке сцены */
  --header-h: 112px;   /* уточняется из app.js */
  --tap: 44px;         /* минимальный размер того, на что нажимают */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background:
    radial-gradient(circle at 20% 0%, rgba(71, 245, 255, .10), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(167, 139, 250, .12), transparent 32%),
    var(--ink);
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: var(--cyan); }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- шапка ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
  padding: max(10px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(21, 26, 38, .96), rgba(12, 15, 24, .94));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Лягушонок — кнопка меню: сброс вида кнопки и едва заметный признак (три точки в углу). */
button.brand { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; min-height: var(--tap); }
.logo { position: relative; }
.logo-dots { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 4px; border-radius: 2px;
  background: radial-gradient(circle, rgba(231, 234, 240, .85) 1.2px, transparent 1.5px) 0 0 / 4px 4px repeat-x; }
button.brand:focus-visible .logo { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* У logo.svg своя тёмная плитка — фон не нужен, только подсветка контура. */
.logo {
  flex: none; width: 38px; height: 38px; border-radius: 9px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(71, 245, 255, .35), 0 0 22px rgba(71, 245, 255, .16);
}
.logo img { display: block; width: 100%; height: 100%; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1; }
.top-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.top-right .ghost { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync { font-size: 13px; color: var(--muted); white-space: nowrap; background: none; border: 0; padding: 0 4px; min-height: var(--tap); cursor: pointer; }
.sync.ok { color: var(--green); }
.sync.bad { color: var(--red); }

.tabs {
  grid-column: 1 / -1; display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 8px;
  margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  scrollbar-width: none; scroll-padding-inline: var(--gutter);
}
.tabs::-webkit-scrollbar { display: none; }
/* Подсказка, что вкладки прокручиваются: край затухает, пока есть что листать. */
.tabs.more-right { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.tabs.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
.tabs.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.tabs button {
  flex: none; border: 0; background: transparent; color: var(--muted);
  min-height: var(--tap); padding: 0 14px; border-radius: 14px; font-weight: 600; font-size: 15px;
}
/* Название проекта — справа от вкладок, тихо; не помещается — многоточие, тесно — прячется (есть в меню). */
.proj-name {
  flex: 0 1 auto; min-width: 0; align-self: center; margin-left: 10px; padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .1);
  display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px;
  white-space: nowrap; overflow: hidden;
}
.proj-name[hidden] { display: none; }
.proj-name .proj-title { overflow: hidden; text-overflow: ellipsis; }
.proj-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.menu-project { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; color: var(--muted); font-size: 13px; }
.proj-list { display: flex; flex-direction: column; gap: 6px; }
.proj-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  text-align: left; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03); color: inherit; font: inherit; cursor: pointer;
}
.proj-row:hover { background: rgba(255, 255, 255, .06); }
.proj-row.current { border-color: rgba(71, 245, 255, .3); cursor: default; }
.proj-row .proj-url { grid-column: 2 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-chip { display: inline-flex; align-items: center; gap: 6px; }
.tabs button.active {
  background: rgba(71, 245, 255, .13); color: #eaffff; box-shadow: inset 0 0 0 1px rgba(71, 245, 255, .25);
}

main {
  position: relative; z-index: 1; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto;
  padding: 16px max(var(--gutter), env(safe-area-inset-right)) calc(80px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
}
h1 { font-size: 21px; margin: 4px 0 12px; overflow-wrap: anywhere; }
h2 { font-size: 17px; margin: 20px 0 10px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- кнопки, чипы ---------- */
.ghost, .primary, .chip {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .045);
  border-radius: 12px; padding: 0 14px; min-height: var(--tap);
}
.ghost.small { padding: 0 12px; font-size: 14px; min-height: 36px; }
.primary {
  background: var(--cyan); color: var(--ink); border-color: transparent; font-weight: 700;
  box-shadow: 0 0 22px rgba(71, 245, 255, .25);
}
.danger { color: var(--red); }
.chips {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px;
  scrollbar-width: thin; overscroll-behavior-x: contain;
}
.chip { flex: none; font-size: 14px; color: var(--muted); white-space: nowrap; }
.chip.active { color: var(--cyan); border-color: rgba(71, 245, 255, .4); background: rgba(71, 245, 255, .1); }
.chip.past { opacity: .6; }
.tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 13px;
  background: rgba(71, 245, 255, .1); color: var(--cyan); border: 0; overflow-wrap: anywhere;
}
.tag.violet { background: rgba(167, 139, 250, .12); color: var(--violet); }
.tag.amber { background: rgba(247, 199, 107, .12); color: var(--amber); }
.tag.dim { background: rgba(255, 255, 255, .06); color: var(--muted); }
.tag.red { background: rgba(255, 107, 138, .12); color: var(--red); }
.tag.green { background: rgba(88, 242, 154, .12); color: var(--green); }
/* Маленькие кнопки выглядят компактно, но место для пальца у них 44 px. */
button.tag, .ghost.small { position: relative; }
button.tag::after, .ghost.small::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: var(--tap); transform: translateY(-50%);
}
.cast { display: flex; flex-wrap: wrap; gap: 8px 6px; }

/* ---------- списки: лента на телефоне, сетка на больших экранах ---------- */
.panel {
  background: rgba(16, 19, 29, .9); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 10px;
}
details.panel > summary { min-height: var(--tap); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.shift-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 18px 0 8px; }
.shift-head b { font-size: 16px; }
.shift-info { margin: -4px 0 8px; overflow-wrap: anywhere; }
.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* Смена — это порядок съёмки со служебными строками между сценами, поэтому внутри
   смены одна колонка. На широком экране группы одного дня стоят рядом. */
.shifts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; align-items: start; }
.shift { min-width: 0; }
/* Служебные строки и заголовки дней — во всю ширину сетки, чтобы не рвать порядок. */
.list > .service, .list > .day-head, .list > .empty, .list > .full { grid-column: 1 / -1; }

.scene {
  container-type: inline-size;
  background: rgba(16, 19, 29, .92); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; text-align: left; width: 100%; min-width: 0;
}
.scene.deleted { opacity: .45; }
.scene-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.scene-left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.scene-key { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.scene-time { font-size: 14px; color: var(--cyan); font-weight: 600; }
.scene-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.scene-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
.scene-object { font-weight: 600; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.synopsis {
  color: #c9cfdb; font-size: 15px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.makeup-line {
  font-size: 14px; padding: 6px 10px; border-radius: 10px; overflow-wrap: anywhere;
  background: rgba(71, 245, 255, .06); border: 1px solid rgba(71, 245, 255, .16);
}
.makeup-line b { color: var(--cyan); font-weight: 600; }
/* Карточке хватает ширины — номер и время слева отдельной колонкой. */
@container (min-width: 440px) {
  .scene-grid { grid-template-columns: 92px minmax(0, 1fr); gap: 4px 14px; }
  .scene-left { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
}

.strip { display: flex; gap: 6px; flex-wrap: wrap; }
.thumb {
  width: var(--thumb); height: var(--thumb); border-radius: 10px; object-fit: cover; display: block;
  background: var(--panel2); border: 1px solid var(--line); cursor: zoom-in;
}
.thumb.big { width: var(--thumb-big); height: var(--thumb-big); }
.more { display: grid; place-items: center; width: var(--thumb); height: var(--thumb); border-radius: 10px; background: var(--panel2); color: var(--muted); font-size: 14px; }

.service {
  display: flex; gap: 12px; padding: 6px 14px; font-size: 14px; color: var(--amber);
  border-left: 2px solid rgba(247, 199, 107, .35); margin-left: 6px; overflow-wrap: anywhere;
}
.service .t { color: var(--muted); flex: none; min-width: 96px; }
.service.lunch { color: var(--green); border-color: rgba(88, 242, 154, .35); }

.empty {
  text-align: center; padding: 40px 16px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius);
}

/* ---------- номер сцены, статус, даты, синопсис ---------- */
/* Номер сцены — просто жирным, без рамки и плашки. Если он ведёт в Либретто — цветом акцента
   (едва заметно); зона нажатия при этом не меньше 44 px. */
.key-btn {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); min-width: var(--tap);
  padding: 0 2px; margin: 0 -2px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font: inherit; font-weight: 800; font-size: 18px; letter-spacing: -.01em;
  width: fit-content; text-align: left; white-space: nowrap;
}
button.key-btn { color: #bdf6fb; cursor: pointer; }
.key-btn.small { font-size: 15px; min-height: 36px; }
/* В Либретто номер сцены — просто номер, не кнопка. */
.key-btn.static { cursor: default; color: var(--text); }
@media (pointer: coarse) { .key-btn.small { min-height: var(--tap); } }
/* Отснятая сцена — мягкий зелёный фон всей строки / карточки / шапки окна сцены.
   Цвет непрозрачный (зелёный 22% поверх фона панели): закреплённые колонки при прокрутке
   вбок не просвечивают, а светлый текст читается с запасом (контраст около 10:1). */
:root { --shot-bg: #20443a; --shot-bg-hover: #255043; --shot-line: rgba(88, 242, 154, .45); }
.key-btn.mini { min-height: 0; min-width: 0; padding: 0 2px; vertical-align: middle; }
.dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.date-btn {
  min-height: var(--tap); padding: 0 12px; border-radius: 12px; border: 1px solid rgba(71, 245, 255, .3);
  background: rgba(71, 245, 255, .07); color: var(--cyan); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.date-btn.other { border-color: var(--line); background: rgba(255, 255, 255, .04); color: var(--muted); }
.synopsis-btn {
  display: block; cursor: pointer; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; min-height: var(--tap);
}
.syn-more { display: inline-block; margin-top: 2px; font-size: 13px; color: var(--cyan); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0 0 10px; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.gap-chip.active { color: var(--cyan); border-color: rgba(71, 245, 255, .5); background: rgba(71, 245, 255, .1); }
.legend-shot { display: inline-block; width: 18px; height: 14px; border-radius: 4px; background: var(--shot-bg); border: 1px solid var(--shot-line); vertical-align: -2px; }
.scene.shot, .neighbor.shot { background: var(--shot-bg); border-color: var(--shot-line); }
.modal-head { margin: -4px -6px 4px; padding: 4px 6px 8px; border-radius: 14px; }
.modal-head.shot { background: var(--shot-bg); border: 1px solid var(--shot-line); }
.shot-label { color: var(--green); font-weight: 600; }
.kpp-day > summary { flex-wrap: wrap; }
.neighbor-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 4px; }
.neighbor { cursor: default; }
.modal-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Переход к сцене: подсветка на 2 секунды. */
.flash { animation: flash 2s ease-out; }
@keyframes flash {
  0%, 60% { box-shadow: 0 0 0 3px var(--cyan), 0 0 28px rgba(71, 245, 255, .45); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- день по вызывному ---------- */
.day-info { margin: 0 0 6px; overflow-wrap: anywhere; }
.cs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
/* Следующая смена: бледный переключатель, тихая плашка, приглушённый заголовок; таблица — как обычно. */
.chip.chip-next:not(.active) { opacity: .55; }
.not-started { display: inline-block; margin: 0 0 6px; padding: 3px 10px; border-radius: 8px; font-size: 13px;
  color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
h1.day-upcoming { color: var(--muted); }
/* КПП: у дня, на который есть вызывной, — маленькая неяркая метка (ссылка на файл, если он есть). */
.cs-mark { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px;
  text-decoration: none; white-space: nowrap; }
/* Страница из меню (не вкладка): «Назад» и заголовок. */
.page-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.page-head h1 { margin: 0; }
.export-links { display: flex; flex-wrap: wrap; gap: 6px; }
/* Шапка смены (вызывной СП): смена, объект, адрес, метро, караван, освоение / мотор / обед. */
.call-head { display: grid; gap: 4px; margin: 0 0 10px; }
.ch-shift { font-size: 15px; }
.ch-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 14px; overflow-wrap: anywhere; }
.sched-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.sched { white-space: nowrap; }
/* Вторая сторона: списки групповки и спец. вызовов. */
.cs-list { display: grid; gap: 4px; }
.cs-li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 4px; overflow-wrap: anywhere; }
.cs-li:first-child { border-top: 0; padding-top: 0; }
.actors-table .mk-time { color: var(--cyan); }
/* Две стороны вызывного: «План съёмки» и «Вызывной». */
.side-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 12px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); max-width: 480px; }
.side-tabs button { min-height: var(--tap); border: 0; border-radius: 12px; background: none; color: var(--muted);
  font: inherit; font-weight: 600; cursor: pointer; }
.side-tabs button.active { background: rgba(71, 245, 255, .12); color: var(--cyan); }
.day-side > .panel, .day-side > .makeup-line { margin-bottom: 10px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.de-check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); align-self: end; }
.de-check input { width: 22px; height: 22px; min-height: 0; }
.day-makeup { margin: 0 0 8px; }
.day-note { color: var(--amber); }
.actors { padding: 10px 12px; }
.actors > summary { min-height: var(--tap); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.table-wrap { overflow-x: auto; }
.actors-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.actors-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 4px 6px; }
.actors-table td { padding: 4px 6px; border-top: 1px solid var(--line); white-space: nowrap; }
.scene.unknown { cursor: default; border-style: dashed; }

/* ---------- таблицы как в документах (КПП, либретто, план съёмки, вызов актёров) ---------- */
/* Таблица во всю свою высоту: вверх-вниз листается только страница, внутри таблицы — только вбок.
   Пока справа есть ещё колонки — у правого края затухание (поверх, на обёртке .doc-box:
   маска на самом прокручиваемом блоке на iPhone мешала листать). */
.doc-box { position: relative; margin: 0 0 10px; }
.doc-box.more-right::after { content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 40px;
  border-radius: 0 13px 13px 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(9, 11, 18, .75)); }
.doc-wrap { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin: 0 0 10px;
  max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.doc-box > .doc-wrap { margin: 0; }
/* Строка заголовков колонок: когда уходит под шапку приложения, у верха экрана — её копия
   (.doc-sticky, высотой 0 — ничего не сдвигает); вбок копия едет вместе с таблицей. */
.doc-sticky { position: sticky; top: var(--header-h, 0px); z-index: 15; height: 0; }
.doc-sticky .ds-in { overflow: hidden; visibility: hidden; border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .8); }
.doc-box.head-stuck .ds-in { visibility: visible; }
.doc-sticky .doc-table { table-layout: fixed; }
/* Компьютер: пока низ таблицы за краем экрана, у нижнего края — полоса прокрутки вбок. */
.doc-hbar { display: none; position: sticky; bottom: 0; z-index: 14; height: 14px; margin-top: -14px;
  overflow-x: auto; overflow-y: hidden; background: rgba(9, 11, 18, .85); border-radius: 7px; }
.doc-hbar > div { height: 1px; }
@media (pointer: fine) {
  .doc-box.hbar-on .doc-hbar { display: block; }
  .doc-wrap, .doc-hbar { scrollbar-width: auto; scrollbar-color: rgba(71, 245, 255, .45) rgba(255, 255, 255, .05); }
  .doc-wrap::-webkit-scrollbar, .doc-hbar::-webkit-scrollbar { height: 12px; }
  .doc-wrap::-webkit-scrollbar-thumb, .doc-hbar::-webkit-scrollbar-thumb { background: rgba(71, 245, 255, .4); border-radius: 6px; }
  .doc-wrap::-webkit-scrollbar-track, .doc-hbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); }
}
.doc-table { border-collapse: separate; border-spacing: 0; font-size: 14px; width: 100%; }
.doc-table th { position: relative; z-index: 2; background: var(--panel2); text-align: left; vertical-align: bottom;
  color: var(--muted); font-size: 12px; font-weight: 600; padding: 8px; border-bottom: 1px solid var(--line); }
.doc-table td { vertical-align: top; padding: 8px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  overflow-wrap: break-word; word-break: normal; }
.doc-table td:last-child { border-right: 0; }
.doc-table tbody tr:last-child td { border-bottom: 0; }
/* Строка ничего не открывает; нажимается ячейка цеха (заметки) и синопсис (текст сцены). */
.doc-table .c-dept.dept-zone { cursor: pointer; }
.doc-table .srow.deleted td { opacity: .45; }
/* Закреплённые колонки: непрозрачный фон и тень справа — видно, что под ними проезжают другие. */
.doc-table .c-scene { position: sticky; left: 0; z-index: 1; background: var(--panel); min-width: 84px;
  box-shadow: 1px 0 0 var(--line), 6px 0 8px -6px rgba(0, 0, 0, .7); }
.doc-table th.c-scene { z-index: 3; background: var(--panel2); }
/* Отснятая строка — зелёная целиком, включая закреплённые «Время» и «Сцена» и колонки цехов. */
.doc-table .srow.shot td, .doc-table .srow.shot td.c-scene, .doc-table .srow.shot td.c-time,
.doc-table .srow.shot td.c-dept, .doc-table .srow.shot td.c-dept-script { background: var(--shot-bg); }
@media (hover: hover) {
  .doc-table .c-dept.dept-zone:hover, .dept-zone:hover { box-shadow: inset 0 0 0 1px rgba(71, 245, 255, .3); }
  .synopsis-btn:hover .syn-more { text-decoration: underline; }
}
/* Серый мелкий текст на зелёном — светлее, чтобы читался и на солнце (контраст ≥ 5:1). */
.srow.shot .muted, .scene.shot .muted, .neighbor.shot, .modal-head.shot .muted { color: #b9c1d1; }
.doc-table .c-date { min-width: 64px; background: rgba(167, 139, 250, .06); }
.doc-table td.c-mode, .doc-table td.c-storyDay, .doc-table td.c-duration { white-space: nowrap; }
.doc-table td.c-time { white-space: nowrap; }
.doc-table .c-object { min-width: 150px; }
.doc-table .c-synopsis { min-width: 240px; max-width: 360px; }
.doc-table .synopsis { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 14px; }
.doc-table .c-cast { min-width: 150px; }
.doc-table .c-set, .doc-table .c-props, .doc-table .c-costume, .doc-table .c-notes, .doc-table .c-note, .doc-table .c-transport, .doc-table .c-stunts, .doc-table .c-tech { min-width: 140px; max-width: 260px; }
.doc-table .c-dept { min-width: 230px; max-width: 320px; background: rgba(71, 245, 255, .035); }
.doc-table th.c-dept { color: var(--muted); background: var(--panel2); }
.doc-table th.c-dept.mine { color: var(--cyan); }
/* Цех ещё не подключён — один раз в заголовке колонки. */
.dept-off { font-weight: 400; color: var(--muted); opacity: .8; }
.dept-off .link-btn { font-size: 12px; }
/* Колонки цехов: у каждого свой оттенок, чтобы «своя» колонка находилась сразу. */
.doc-table td.c-dept-script { background: rgba(167, 139, 250, .05); }
.dept-empty { font-style: italic; margin: 2px 0 4px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--cyan); font: inherit; text-decoration: underline; cursor: pointer; min-height: 0; }
.dept-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; }
.nb-dept { margin-top: 6px; }
.dept-select { display: inline-flex; align-items: center; gap: 6px; }
.dept-select select { min-height: var(--tap); }
.dept-tag { background: rgba(167, 139, 250, .14); }
.doc-table .c-dept .strip { margin: 6px 0 0; }
.doc-table .c-shoots { min-width: 110px; }
.doc-table .cast { display: flex; flex-wrap: wrap; gap: 4px; }
.doc-table .synopsis-btn { margin: 0; padding: 0; min-height: var(--tap); }
/* Служебная строка: время и текст держатся у левого края видимой части и переносятся по её ширине. */
.doc-table .c-svc { padding: 0; }
.doc-table .svc-in { position: sticky; left: 0; display: flex; gap: 12px; align-items: baseline; box-sizing: border-box;
  max-width: var(--vis, 100%); padding: 6px 8px; overflow-wrap: anywhere; }
.doc-table .svc-t { flex: none; white-space: nowrap; opacity: .85; }
.doc-table .svc td { background: rgba(247, 199, 107, .05); color: var(--amber); }
.doc-table .svc.lunch td { color: var(--green); background: rgba(88, 242, 154, .05); }
/* Служебные строки про грим («Поправки по гриму», «подготовка гриму») — цвет цеха. */
.doc-table .svc.mk td { color: var(--cyan); background: rgba(71, 245, 255, .08); font-weight: 600; }
.doc-table td.c-intExt { white-space: nowrap; }
/* Про грим из примечания (в КПП СП нет колонки «Грим»). */
.dept-doc.from-notes { border-left: 3px solid var(--cyan); padding-left: 8px; color: var(--text); }
.scene-fields { display: grid; gap: 6px; }
.sf-row { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 10px; overflow-wrap: anywhere; }
/* Вызов актёров: та же прокрутка, закреплён персонаж. */
.doc-wrap .actors-table th { position: sticky; top: 0; z-index: 2; background: var(--panel2); }
.doc-wrap .actors-table td:first-child, .doc-wrap .actors-table th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .7); }
.doc-wrap .actors-table th:first-child { z-index: 3; background: var(--panel2); }
.actors .doc-wrap { border: 0; border-radius: 0; margin: 0; background: none; }

/* Телефон и планшет: время и номер сцены закреплены вместе (время — узкой колонкой в две строки). */
@media (max-width: 1023px) {
  .doc-table.frz-time .c-time { position: sticky; left: 0; z-index: 1; background: var(--panel); white-space: normal;
    box-sizing: border-box; width: 68px; min-width: 68px; max-width: 68px; }
  .doc-table.frz-time th.c-time { z-index: 3; background: var(--panel2); }
  .doc-table.frz-time .c-scene { left: 68px; }
}
/* Либретто: № сцены и Дата первыми и закреплены обе, узкие — на 375 px остаётся место. */
.doc-table.frz-lib .c-scene { box-sizing: border-box; width: 64px; min-width: 64px; max-width: 64px; box-shadow: 1px 0 0 var(--line); }
.doc-table.frz-lib .c-shoots { position: sticky; left: 64px; z-index: 1; background: var(--panel); box-sizing: border-box;
  width: 72px; min-width: 72px; max-width: 72px; padding-left: 4px; padding-right: 4px;
  box-shadow: 1px 0 0 var(--line), 6px 0 8px -6px rgba(0, 0, 0, .7); }
.doc-table.frz-lib th.c-shoots { z-index: 3; background: var(--panel2); }
.doc-table.frz-lib .c-shoots .dates { flex-direction: column; align-items: stretch; gap: 4px; }
.doc-table.frz-lib .c-shoots .date-btn { padding: 0 6px; font-size: 13px; }
.doc-table .srow.shot td.c-shoots { background: var(--shot-bg); }
/* Компьютер: колонки ужимаются, чтобы таблица по возможности помещалась без прокрутки. */
@media (min-width: 1024px) {
  .doc-table { font-size: 13px; }
  .doc-table td { padding: 6px 7px; }
  .doc-table .c-object { min-width: 110px; }
  .doc-table .c-synopsis { min-width: 170px; max-width: 320px; }
  .doc-table .synopsis { font-size: 13px; }
  .doc-table .c-cast { min-width: 110px; }
  .doc-table .c-set, .doc-table .c-props, .doc-table .c-costume, .doc-table .c-notes, .doc-table .c-note, .doc-table .c-transport, .doc-table .c-stunts, .doc-table .c-tech { min-width: 80px; }
  .doc-table .c-dept { min-width: 160px; --thumb: 56px; }
  .doc-table .c-scene { min-width: 70px; }
  .doc-table.frz-lib .c-scene { min-width: 64px; }
  .doc-table .c-date { min-width: 52px; }
  .doc-table .char-btn { min-height: 30px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
  .doc-table .c-set, .doc-table .c-props, .doc-table .c-costume, .doc-table .c-notes, .doc-table .c-note, .doc-table .c-transport, .doc-table .c-stunts, .doc-table .c-tech {
    min-width: 76px; max-width: 130px; }
  .doc-table .key-btn { min-height: 36px; font-size: 15px; }
  .doc-table .c-synopsis { min-width: 150px; }
  /* В КПП на колонку больше (дата): время переносится в две строки, колонки чуть уже. */
  .doc-table td.c-time { white-space: normal; min-width: 52px; }
  .kpp-day .doc-table .c-object, .kpp-day .doc-table .c-cast { min-width: 96px; }
  .kpp-day .doc-table .c-set, .kpp-day .doc-table .c-props, .kpp-day .doc-table .c-costume, .kpp-day .doc-table .c-notes,
  .kpp-day .doc-table .c-transport, .kpp-day .doc-table .c-stunts, .kpp-day .doc-table .c-tech { min-width: 68px; }
  .doc-table .c-scene .tag { white-space: normal; }
}
.nowrap { white-space: nowrap; }
.kpp-compare { margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 12px; }
.kpp-compare > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--muted); }
.day-editor { display: flex; flex-direction: column; gap: 8px; }
.day-editor label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.day-editor input, .day-editor textarea {
  min-height: var(--tap); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .3); font-size: 16px; color: var(--text); min-width: 0; width: 100%;
}
.day-editor textarea { min-height: 70px; resize: vertical; }
.de-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.de-item { border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: rgba(255, 255, 255, .02); }
.de-item.service-item { border-style: dashed; }
.de-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.de-row > input { flex: 1 1 140px; }
.de-key { font-size: 17px; }
.de-label { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.de-btns { display: flex; gap: 4px; margin-left: auto; }
.de-btns .ghost.small { min-width: 40px; }
.de-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.de-list { display: flex; flex-direction: column; gap: 6px; }
.de-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.de-final { position: sticky; bottom: 0; z-index: 2; padding: 10px 0 8px; background: rgb(12, 15, 24); border-top: 1px solid var(--line); }
.de-sug { display: flex; flex-direction: column; gap: 4px; }
.de-sug-item { text-align: left; min-height: var(--tap); padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(71, 245, 255, .05); }
.de-add { display: flex; flex-direction: column; gap: 6px; }
.preview-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cs-rows { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; margin-top: 6px; }
.cs-rows table { border-collapse: collapse; font-size: 12px; }
.cs-rows td { padding: 3px 6px; border-top: 1px solid var(--line); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.cs-rows tr.used td:first-child { font-weight: 700; }
.cs-rows tr.used-scene { background: rgba(71, 245, 255, .08); }
.cs-rows tr.used-actor { background: rgba(167, 139, 250, .1); }
.cs-rows tr.used-service { background: rgba(247, 199, 107, .08); }
.cs-rows tr.used-note, .cs-rows tr.used-info { background: rgba(88, 242, 154, .07); }
@media (min-width: 1024px) {
  .preview-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cs-rows { max-height: 75vh; }
}

/* ---------- очередь отправки ---------- */
.queue-btn { color: var(--amber); border-color: rgba(247, 199, 107, .5); background: rgba(247, 199, 107, .12); }
.thumb-wrap { position: relative; display: inline-block; }
.thumb-wrap .thumb { opacity: .8; outline: 2px dashed var(--amber); outline-offset: -2px; }
.pend-badge {
  position: absolute; right: 3px; bottom: 3px; padding: 1px 4px; border-radius: 6px;
  background: rgba(9, 11, 18, .85); font-size: 12px; pointer-events: none;
}
.pend-mark { font-size: 14px; }
.pend-tag { margin-bottom: 4px; }
.note-item.pending-del .note-text { text-decoration: line-through; opacity: .6; }

/* ---------- фильтр по персонажу ---------- */
.cast { gap: 8px 6px; }
/* Имя — кнопка 36 px; с зоной нажатия по 4 px сверху и снизу выходит 44 px, а соседние ряды не перекрываются. */
.char-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.char-btn::after { top: -4px; bottom: -4px; height: auto; transform: none; }
.char-btn.active { background: var(--cyan); color: var(--ink); }
.char-filter {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px;
  padding: 4px 4px 4px 14px; border-radius: 14px; border: 1px solid rgba(71, 245, 255, .45);
  background: rgba(71, 245, 255, .1); font-size: 15px;
}
.char-filter b { color: var(--cyan); }
.photo-status { display: flex; flex-direction: column; gap: 4px; }
.char-filter .ghost.small { min-height: var(--tap); min-width: var(--tap); font-size: 16px; }
.chip.dim { opacity: .45; }
.chip.dim.active { opacity: .8; }
/* «!N» у серии: отснятые сцены без фото грима — видно и у приглушённой серии. */
/* КПП: прошедшие смены одним блоком; к сегодняшнему дню прокручиваем с учётом шапки. */
.kpp-past > summary { min-height: var(--tap); }
.kpp-past .kpp-day { margin: 10px 0 0; background: rgba(0, 0, 0, .18); }
.kpp-day { scroll-margin-top: calc(var(--header-h) + 8px); }

/* ---------- блок цеха: фото, текст из документов, заметки ---------- */
/* Блоки цехов стоят рядом, на узкой карточке — друг под другом. */
.depts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.dept-block {
  min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  border-radius: 14px; border: 1px solid rgba(71, 245, 255, .18); background: rgba(71, 245, 255, .04);
}
.dept-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dept-head b { color: var(--cyan); }
.dept-doc { font-size: 14px; overflow-wrap: anywhere; }
.dept-note { font-size: 14px; overflow-wrap: anywhere; }
.dept-note-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.add-photo-btn {
  min-width: var(--tap); min-height: max(var(--tap), var(--thumb)); height: var(--thumb); padding: 0 12px;
  border-radius: 10px; border: 1px dashed rgba(71, 245, 255, .5); background: rgba(71, 245, 255, .07);
  color: var(--cyan); font-weight: 600; font-size: 14px; white-space: nowrap;
}
.add-photo-btn.big { height: var(--thumb-big); min-width: var(--thumb-big); }
.feed { display: flex; flex-direction: column; gap: 8px; }
.note-item { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; }
.note-meta > span { flex: 1 1 100%; }
.note-edit { min-height: 80px; }
.note-add { display: grid; gap: 8px; }
.note-add .primary { justify-self: end; }
.neighbor-doc { color: var(--text); }
.album .album-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; }
.album { display: flex; flex-direction: column; gap: 8px; }
.trash-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.trash-item:first-child { border-top: 0; }
.trash-item .device-info { flex: 1; }
@media (min-width: 720px) {
  .char-block .neighbors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- грим: хронология персонажа ---------- */
.day-head {
  position: sticky; top: calc(var(--header-h) + 6px); z-index: 2; margin: 12px 0 2px; padding: 6px 12px;
  border-radius: 12px; background: rgba(21, 26, 38, .96); border: 1px solid var(--line);
  font-size: 14px; font-weight: 700; color: var(--violet); justify-self: start;
}
.look {
  background: rgba(16, 19, 29, .92); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.look-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.look-head .scene-key { font-size: 17px; }
.note {
  width: 100%; min-height: 52px; resize: vertical; border-radius: 12px; padding: 10px 12px;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--line); outline: none; font-size: 16px;
}
.note:focus { border-color: rgba(71, 245, 255, .45); }
.add-photo {
  width: var(--thumb); height: var(--thumb); border-radius: 10px; border: 1px dashed rgba(71, 245, 255, .45);
  background: rgba(71, 245, 255, .06); color: var(--cyan); font-size: 24px;
}
.add-photo.big { width: var(--thumb-big); height: var(--thumb-big); }

/* ---------- документы ---------- */
.docs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.doc h3 { margin: 0 0 4px; font-size: 17px; }
.doc p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.file-row { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.file-row .name { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 12px 0; }

/* ---------- документы: действующие и предыдущие версии ---------- */
.doc-search, .looks-search {
  width: 100%; min-height: var(--tap); padding: 8px 12px; margin-bottom: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .3); font-size: 16px;
}
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.doc-head h3 { margin: 0; }
.doc-file { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); align-items: center; }
.doc-file .muted { grid-column: 1; }
.doc-del { grid-column: 2; grid-row: 1 / span 2; }
.doc-link { display: block; min-height: var(--tap); padding: 10px 0 2px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.doc-link .doc-name { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.doc-old { margin-top: 8px; }
.doc-old > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--muted); font-size: 14px; }

/* ---------- окно сцены ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .7);
  overflow-y: auto; overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.modal-box {
  position: relative; max-width: 760px; margin: 0 auto; padding: 16px;
  background: linear-gradient(180deg, rgba(21, 26, 38, .98), rgba(12, 15, 24, .98));
  border: 1px solid var(--line); border-radius: 22px;
}
.modal-close { position: absolute; top: 10px; right: 10px; width: var(--tap); padding: 0; }
.modal h2 { margin: 0 48px 4px 0; font-size: 21px; }
.section { margin-top: 16px; overflow-wrap: anywhere; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 6px; }
details.section > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; }
.char-block { border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin-top: 10px; background: rgba(0, 0, 0, .18); }
.char-name { font-weight: 800; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.char-body { display: grid; gap: 10px; }
.char-current { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.neighbors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.neighbor { font-size: 13px; color: var(--muted); border-radius: 12px; padding: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); text-align: left; min-height: var(--tap); overflow-wrap: anywhere; }
.neighbor b { color: var(--text); }
.neighbor .strip { margin-top: 6px; }
.script-text { font-family: "Courier New", monospace; font-size: 16px; line-height: 1.55; background: #f5f1e8; color: #1b1d24; border-radius: 14px; padding: 16px; max-width: 72ch; overflow-wrap: anywhere; }
.script-text .character { margin: 12px 0 0 20%; font-weight: 700; }
.script-text .dialogue { margin: 0 4% 0 8%; }
.script-text .action { margin: 12px 0 0; }
.script-text .paren { margin: 0 10% 0 14%; font-style: italic; }

/* ---------- просмотр фото ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .94);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.lightbox .bar { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--muted); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 72px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(21, 26, 38, .8); font-size: 26px; color: var(--text);
}
.lb-prev { left: max(10px, env(safe-area-inset-left)); }
.lb-next { right: max(10px, env(safe-area-inset-right)); }
.lb-count { color: var(--text); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5); max-width: calc(100vw - 32px); overflow-wrap: anywhere;
}
.toast { white-space: pre-line; }
.toast.error { border-color: rgba(255, 107, 138, .5); color: var(--red); }

.login { max-width: 380px; margin: 10vh auto; display: flex; flex-direction: column; gap: 10px; }
.login-msg { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 107, 138, .4); background: rgba(255, 107, 138, .08); color: var(--red); }
.who { font-size: 14px; color: var(--text); max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .brand без overflow: hidden — иначе обрезается подсветка лягушонка слева; длинное название
   обрезается многоточием у самого .brand-name. */
.brand-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* На узком телефоне имя не помещается рядом с кнопками — его видно в «Команде». */
@media (max-width: 479px) { .who { display: none !important; } }

/* ---------- команда ---------- */
.invite-form { display: grid; gap: 8px; grid-template-columns: 1fr; }
.invite-form input, .invite-form select, .login select {
  min-height: var(--tap); padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .3); font-size: 16px; min-width: 0;
}
.person.off { opacity: .6; }
.person-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 16px; }
.person-mail { overflow-wrap: anywhere; margin: 2px 0 4px; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.device-info { min-width: 0; overflow-wrap: anywhere; }
.person-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.button-link { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
.mail-text { min-height: 220px; font-size: 14px; }
.code-big { font-size: 26px; font-weight: 800; letter-spacing: .2em; color: var(--cyan); }
@media (min-width: 720px) {
  .invite-form { grid-template-columns: 1fr 1.3fr auto auto; align-items: center; }
  .invite-form .section-title { grid-column: 1 / -1; }
}
.login input { min-height: var(--tap); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); font-size: 16px; }

/* ---------- наведение — только где есть мышь ---------- */
@media (hover: hover) {
  .key-btn:hover, .date-btn:hover { filter: brightness(1.15); }
  .synopsis-btn:hover { background: rgba(71, 245, 255, .05); }
  .tabs button:hover { background: rgba(255, 255, 255, .06); }
  .ghost:hover, .chip:hover { background: rgba(255, 255, 255, .08); }
  button.tag:hover { background: rgba(71, 245, 255, .2); }
  .scene:hover, .neighbor:hover { border-color: rgba(71, 245, 255, .3); }
  .lb-nav:hover { background: rgba(71, 245, 255, .15); }
}

/* ---------- телефон ---------- */
@media (max-width: 599px) {
  :root { --gutter: 12px; --thumb: 60px; --thumb-big: 96px; }
  .modal-box { padding: 14px 12px; border-radius: 18px; }
  .lb-nav { width: 44px; height: 60px; font-size: 22px; background: rgba(21, 26, 38, .6); }
}
@media (max-width: 380px) {
  .top-right .ghost { max-width: 28vw; }
  .service .t { min-width: 84px; }
}

/* Телефон боком: мало высоты — шапка не прилипает, чтобы не съедать экран. */
@media (max-height: 520px) and (orientation: landscape) {
  .top { position: static; }
  .doc-sticky { top: 0; }
  .day-head { position: static; }
  .lightbox img { max-height: calc(100vh - 80px); }
}

/* ---------- планшет и маленький ноутбук ---------- */
@media (min-width: 600px) {
  :root { --gutter: 20px; --maxw: 1100px; }
  h1 { font-size: 22px; }
  .modal-box { padding: 20px; }
}
@media (min-width: 720px) {
  .list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---------- компьютер ---------- */
@media (min-width: 1024px) {
  :root { --maxw: 1240px; --thumb: 80px; --thumb-big: 150px; --gutter: 28px; }
  body { font-size: 15px; }
  /* Логотип, вкладки и кнопки справа — одной строкой, выровнены по содержимому. */
  .top {
    grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px;
    padding-bottom: 0;
    padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  }
  .tabs { grid-column: 2; grid-row: 1; margin: 0; padding: 10px 0; overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; }
  .tabs button { min-height: 40px; }
  .top-right { grid-column: 3; }
  main { padding-top: 20px; }
  .modal { padding: 40px 24px; }
  .modal-box { max-width: 1100px; padding: 24px 28px; }
  .char-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
  .neighbors .thumb { --thumb: 72px; }
  .lb-nav { width: 60px; height: 88px; }
  .lb-prev { left: 24px; }
  .lb-next { right: 24px; }
  .lightbox { padding: 24px 100px; }
}

/* ---------- широкий монитор ---------- */
@media (min-width: 1440px) {
  :root { --maxw: 1560px; --gutter: 32px; }
  .list.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .modal-box { max-width: 1200px; }
}

/* ---------- место на диске (администратор) ---------- */
.disk-panel { display: grid; gap: 4px; font-size: 14px; }
.disk-low { color: var(--amber); font-weight: 600; }
.disk-warn { border-color: var(--amber); color: var(--amber); }

/* ---------- меню по лягушонку ---------- */
.menu { position: fixed; inset: 0; z-index: 60; background: rgba(5, 7, 12, .55); }
.menu-panel { position: absolute; inset: 0; overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) 16px 24px;
  background: linear-gradient(180deg, rgba(21, 26, 38, .99), rgba(12, 15, 24, .99)); display: flex; flex-direction: column; gap: 10px; }
.menu-head { display: flex; align-items: center; gap: 8px; }
.menu-head b { flex: 1; font-size: 17px; }
.menu-who { display: grid; gap: 2px; padding: 8px 0 4px; border-bottom: 1px solid var(--line); }
.menu-list { display: grid; gap: 6px; }
.menu-item { display: grid; gap: 2px; text-align: left; min-height: 52px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text); font: inherit; cursor: pointer; }
.menu-item > span:first-child { font-weight: 600; }
.menu-docs { display: grid; gap: 6px; }
.menu-doc { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.menu-doc .doc-name { color: var(--cyan); }
.menu-ver { margin-top: auto; padding-top: 12px; text-align: center; }
.fix-btn { color: var(--muted); font-size: 13px; }
@media (min-width: 720px) {
  .menu { background: transparent; }
  .menu-panel { inset: auto; top: calc(var(--header-h) - 4px); left: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
    width: 380px; max-height: calc(100dvh - var(--header-h) - 16px); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
}

/* ---------- новая версия, «Что нового», замечания ---------- */
.update-bar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 14px; font-size: 14px;
  background: var(--panel2); border: 1px solid rgba(71, 245, 255, .4); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); max-width: calc(100vw - 32px); }
.update-bar[hidden] { display: none; }
.whats-new { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }
/* Новые замечания у администратора — точка на лягушонке. */
#menuBtn.has-new .logo::after { content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px var(--ink); }
.fb-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber); color: var(--ink);
  font-size: 12px; font-weight: 800; text-align: center; }
.fb-form { display: grid; gap: 10px; }
.fb-photo { display: flex; align-items: center; gap: 10px; }
.fb-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fb-check input { width: 22px; height: 22px; }
.fb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fb-item { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); overflow-wrap: anywhere; }
.fb-item.fb-new { border-color: rgba(247, 199, 107, .45); }
.fb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fb-comment { padding: 6px 8px; border-left: 3px solid var(--cyan); background: rgba(71, 245, 255, .05); border-radius: 6px; }
.fb-admin { display: grid; gap: 6px; }
.fb-admin select { min-height: var(--tap); }

/* ---------- зона цеха: нажатие открывает заметки цеха в окне сцены ---------- */
.dept-zone { cursor: pointer; border-radius: 10px; }
.dept-zone:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.dept-open { margin-top: 6px; min-height: 22px; font-size: 12px; color: var(--cyan); opacity: .6; }
.doc-table td.c-dept { min-height: var(--tap); border-radius: 0; }
.album .dept-zone { margin: 0 -6px; padding: 2px 6px 4px; }
.syn-note { margin-top: 6px; }

/* ---------- окно текста сцены (нажатие на синопсис) ---------- */
.tm-head { font-size: 17px; line-height: 1.35; margin: 0 36px 6px 0; overflow-wrap: anywhere; }
.tm-cast { font-size: 13px; color: var(--muted); margin: 0 0 12px; overflow-wrap: anywhere; }
.script-text .part { margin: 22px 0 0; padding-top: 10px; border-top: 1px dashed rgba(27, 29, 36, .35); font-weight: 700; }
.script-text .part:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.script-text .castline { margin: 4px 0 0; font-size: 14px; opacity: .75; }
.text-modal.shot .tm-head { color: var(--green); }
/* Синопсис из сценария (в КПП и либретто его нет) — мелкая пометка. */
.syn-src { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---------- окно цеха (нажатие на ячейку цеха) ---------- */
.dm-head { font-weight: 700; margin: 0 36px 10px 0; overflow-wrap: anywhere; }

/* ---------- «План съёмки»: одна строка смены; Либретто «Все серии»: разделитель серии ---------- */
.shift-line { margin: 0 0 8px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.shift-line b { color: var(--text); }
.doc-table .ser-sep td { background: rgba(167, 139, 250, .08); color: #cfc3ff; font-size: 12px; font-weight: 600; }
.doc-table .ser-sep .svc-in { padding: 4px 8px; }

/* ---------- КПП календарём ---------- */
/* Месяц сеткой, неделя с понедельника; на 375 px семь колонок помещаются без прокрутки вбок. */
.kpp-mode { max-width: 320px; margin-bottom: 10px; }
.cal { margin: 0 0 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.cal-title { font-size: 17px; }
.cal-nav { min-width: var(--tap); min-height: var(--tap); font-size: 22px; line-height: 1; padding: 0; }
.cal-nav:disabled { opacity: .3; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; touch-action: pan-y; }
.cal-wd { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0; }
.cal-wd.we { color: #b9a6ff; }
.cal-cell { position: relative; min-width: 0; min-height: 62px; border-radius: 10px; padding: 4px 3px 4px 5px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; font: inherit; color: var(--text); }
.cal-cell.out { opacity: .25; }
.cal-cell.out .cal-num { font-weight: 400; }
button.cal-cell { border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.cal-num { font-weight: 700; font-size: 15px; }
.cal-sub { display: flex; flex-direction: column; font-size: 11px; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; }
.cal-sub .cal-gap { color: var(--amber); }
.cal-cell.off { background: rgba(255, 255, 255, .02); }
.cal-cell.off .cal-num, .cal-cell.off .cal-sub { opacity: .55; }
.cal-cell.shot { background: var(--shot-bg); border-color: var(--shot-line); }
.cal-cell.shot .cal-sub { color: #b9c1d1; }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--cyan); }
.cal-cell.sel { border-color: var(--cyan); background: rgba(71, 245, 255, .14); }
.cal-cell.shot.sel { background: #2a5a4b; }
/* Фильтр по персонажу или «Без фото»: подсвечены дни, где есть такие сцены, остальные приглушены. */
.cal-cell.dim { opacity: .35; }
.cal-cell.hit { border-color: rgba(71, 245, 255, .6); }
.cal-cell.hit .cal-sub { color: var(--cyan); }
.cal-mark { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #b9a6ff; opacity: .7; }
.cal-open { padding: 10px 12px; }
.cal-open-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.cal-open-head .ghost { margin-left: auto; }
@media (min-width: 720px) {
  .cal { max-width: 760px; }
  .cal-cell { min-height: 74px; padding: 6px 8px; }
  .cal-sub { font-size: 12px; }
}
/* Подпись дня без съёмки («выходной», «по объектам») — словами целиком, без разрыва посреди слова. */
.cal-cell.off .cal-sub { overflow-wrap: normal; word-break: normal; font-size: 10px; letter-spacing: -.02em; }
@media (max-width: 400px) {
  .cal-grid { gap: 3px; }
  .cal-cell { padding: 4px 2px 4px 4px; }
}

/* ---------- фото на телефоне по цехам ---------- */
.pf-depts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.pf-dept { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.pf-dept-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-keep { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: 14px; }
.pf-keep input { width: 22px; height: 22px; accent-color: var(--cyan); }
.pf-keep input:disabled + * , .pf-keep:has(input:disabled) { opacity: .75; }
/* Без сети фото, которого нет на телефоне: заглушка того же размера, таблица не разъезжается. */
.thumb-missing { display: grid; place-items: center; text-align: center; padding: 4px; box-sizing: border-box;
  font-size: 10px; line-height: 1.2; color: var(--muted); background: rgba(255, 255, 255, .04);
  border: 1px dashed var(--line); }

/* ---------- компактные таблицы (телефон ~360–390 px) ---------- */
/* Время — узкая колонка: начало над концом, мелко; не закреплена, уезжает вбок вместе со всеми. */
.doc-table td.c-time, .doc-table th.c-time { position: static; box-sizing: border-box; width: 46px; min-width: 46px; max-width: 46px;
  padding-left: 5px; padding-right: 4px; white-space: nowrap; font-size: 12px; line-height: 1.3; }
.doc-table .t-part { display: block; }
.doc-table .t-part + .t-part { color: var(--muted); }
/* Номер сцены — уже и чуть мельче (жирный остаётся). */
.doc-table .c-scene { box-sizing: border-box; min-width: 60px; width: 60px; padding-left: 6px; padding-right: 4px; }
.doc-table .key-btn { font-size: 16px; min-height: 36px; }
@media (pointer: coarse) { .doc-table .key-btn { min-height: var(--tap); } }
/* Либретто: номер и дата закреплены, дата — одной строкой «19.11», несколько — друг под другом. */
.doc-table.frz-lib .c-scene { width: 60px; min-width: 60px; max-width: 60px; }
.doc-table.frz-lib .c-shoots { left: 60px; width: 58px; min-width: 58px; max-width: 58px; padding-left: 3px; padding-right: 3px; }
.doc-table.frz-lib .c-shoots .date-btn { padding: 0 4px; font-size: 12px; min-width: 0; width: 100%; }
/* Текст цеха (из документа или примечания) переносится по словам, не режется посреди слова. */
.dept-doc { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
/* Кнопка добавления фото: на компьютере — «＋ 📷 фото» небольшой кнопкой, на телефоне — квадрат «＋📷» 44×44. */
.add-photo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  height: 40px; min-height: 40px; padding: 0 10px; font-size: 13px; }
.add-photo-btn .ap-plus { font-size: 15px; line-height: 1; }
.add-photo-btn .ap-cam { flex: none; }
.add-photo-btn.big { height: var(--thumb-big); min-width: var(--thumb-big); flex-direction: column; font-size: 14px; }
@media (max-width: 599px) {
  .add-photo-btn:not(.big) { width: var(--tap); min-width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; gap: 0; }
  .add-photo-btn:not(.big) .ap-text { display: none; }
  .add-photo-btn:not(.big) .ap-plus { font-size: 13px; margin-right: -1px; }
  .doc-table .c-dept { min-width: 150px; }
  .doc-table td { padding: 6px 6px; }
  .doc-table .c-dept .strip { margin-top: 4px; }
  .doc-table .dept-open { margin-top: 3px; min-height: 0; }
}
@media (pointer: coarse) { .add-photo-btn:not(.big) { min-width: var(--tap); min-height: var(--tap); } }

/* ---------- календарь: наглядные цвета ---------- */
/* Прошедший день, отснятый целиком, — нейтральная клетка и крупная полупрозрачная зелёная галочка;
   прошедший не целиком — приглушён; предстоящая смена — мягкий фиолетовый; выходные — тёмные. */
.cal-cell.day { background: var(--panel); border-color: var(--line); }
.cal-cell.done::after { content: '✓'; position: absolute; right: 4px; bottom: 0; font-size: 30px; line-height: 1;
  font-weight: 800; color: var(--green); opacity: .38; pointer-events: none; }
.cal-cell.past .cal-num, .cal-cell.past .cal-sub { opacity: .6; }
.cal-cell.upcoming { background: rgba(167, 139, 250, .16); border-color: rgba(167, 139, 250, .35); }
.cal-cell.upcoming .cal-sub { color: #d6ccff; }
.cal-cell.off { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .05); }
.cal-cell.off .cal-sub { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }
.cal-cell .cal-sub { max-width: 100%; overflow: hidden; }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--cyan); }
.cal-cell.sel { border-color: var(--cyan); background: rgba(71, 245, 255, .14); }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 0; }
.cal-check { color: var(--green); font-weight: 800; }
.cal-up { display: inline-block; width: 14px; height: 12px; border-radius: 3px; background: rgba(167, 139, 250, .35);
  border: 1px solid rgba(167, 139, 250, .5); vertical-align: -1px; }
/* Персонажи в таблице на телефоне: колонка шире, имена компактнее — по два в ряд, строка ниже.
   Зона нажатия имени остаётся 44 px (невидимые поля сверху и снизу). */
@media (max-width: 599px) {
  .doc-table .c-cast { min-width: 210px; }
  .doc-table .cast { gap: 4px; }
  .doc-table .char-btn { min-height: 30px; padding: 0 8px; font-size: 12px; }
  .doc-table .char-btn::after { top: -7px; bottom: -7px; }
}
/* Галочка — под текстом клетки: число, «№N» и «K сц» всегда читаются поверх неё. */
.cal-cell .cal-num, .cal-cell .cal-sub { position: relative; z-index: 1; }
.cal-cell.done::after { z-index: 0; right: 3px; bottom: 2px; font-size: 32px; opacity: .3; }
@media (min-width: 600px) {
  .doc-table .c-cast { min-width: 200px; }
  .doc-table .cast { gap: 4px; }
}

/* Окна сцены (цех, текст): строка «номер · объект» — на одной высоте с крестиком закрытия,
   справа место под крестик; блок цеха начинается ниже и крестиком не перекрывается. */
.modal-line { display: flex; align-items: center; min-height: var(--tap); margin: -4px 52px 10px 0; }
.tm-head.modal-line { margin-bottom: 4px; }
/* «Сегодня»: смена, возвращённая из архива, — неброская пометка для администратора. */
.reopened-note { font-size: 12px; color: var(--amber); opacity: .85; }

/* Окно текста сцены: заголовок и строка персонажей — как в файле сценария (жирным, первой строкой
   «бумажного» блока); внизу мелким серым — из какого файла текст. */
.script-text .doc-heading { font-weight: 700; margin: 0 0 4px; }
.script-text .doc-cast { margin: 0 0 4px; }
.script-text .doc-legacy { margin: 8px 0 0; font-size: 13px; color: #6b6f7a; font-style: italic; }
.script-text .doc-source { margin: 18px 0 0; padding-top: 8px; border-top: 1px dashed rgba(27, 29, 36, .25);
  font-family: system-ui, sans-serif; font-size: 12px; color: #6b6f7a; overflow-wrap: anywhere; }

/* ---------- вкладка «Образы» ---------- */
/* Две колонки на всю ширину: узкая закреплённая «Персонаж» и «Образы»; без вложенной прокрутки вниз. */
.looks-search { box-sizing: border-box; color: var(--text); }
.looks-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.looks-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px;
  background: var(--panel2); border-bottom: 1px solid var(--line); }
.looks-table td { vertical-align: top; padding: 8px; border-bottom: 1px solid var(--line); }
.looks-table tbody tr:last-child td { border-bottom: 0; }
.looks-table .lk-char { width: 34%; max-width: 160px; position: sticky; left: 0; background: var(--panel);
  border-right: 1px solid var(--line); overflow-wrap: anywhere; }
.looks-table th.lk-char { background: var(--panel2); }
.looks-table .lk-char .char-btn { white-space: normal; text-align: left; height: auto; min-height: 36px; }
/* Ячейка остаётся ячейкой таблицы (иначе строки персонажа и его образов расходятся по высоте);
   столбиком раскладывается обёртка внутри неё. */
.lk-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.look-item { cursor: pointer; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.look-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.look-title { font-weight: 700; overflow-wrap: anywhere; }
.look-add { align-self: flex-start; min-height: var(--tap); color: var(--cyan); }
.look-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.look-block + .look-block { margin-top: 10px; }
.char-filter .look-show { min-height: 36px; }
@media (max-width: 599px) {
  .looks-table .lk-char { width: 40%; }
  .looks-table td { padding: 6px; }
}
@media (hover: hover) { .look-item:hover { border-color: rgba(71, 245, 255, .35); } }

/* ---------- просмотр документа внутри приложения ---------- */
/* На весь экран поверх приложения; вниз листается сам просмотрщик, таблица — только вбок. */
.doc-viewer { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink); padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
  max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
body.dv-open { overflow: hidden; }
.dv-top { position: sticky; top: calc(-1 * max(8px, env(safe-area-inset-top))); z-index: 2; background: var(--ink);
  border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.dv-head { display: flex; align-items: center; gap: 8px; padding: 6px 0 8px; }
.dv-top .dv-tools, .dv-top .dv-sheets { margin: 0; padding: 0 0 8px; }
.dv-title { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.dv-close { flex: none; width: var(--tap); min-height: var(--tap); padding: 0; font-size: 18px; }
.dv-head [data-action="dv-save"] { flex: none; min-height: var(--tap); }
.dv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.dv-search { flex: 1 1 200px; min-height: var(--tap); padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .3); color: var(--text); font-size: 16px; }
.dv-sheets { margin: 0 0 10px; }
.dv-msg { padding: 24px 4px; }
.dv-paper { max-width: 80ch; margin: 0 auto; }
.dv-paper .dv-p { margin: 0 0 8px; white-space: pre-wrap; }
.dv-paper .dv-b { font-weight: 700; margin-top: 14px; }
.dv-paper .dv-hit { background: rgba(247, 199, 107, .35); }
.dv-paper .dv-cur { background: rgba(247, 199, 107, .75); outline: 2px solid #c58a10; }
.dv-tablewrap { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.dv-table { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.dv-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  vertical-align: top; min-width: 40px; max-width: 320px; overflow-wrap: break-word; }
.dv-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel2);
  box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .7); }
.dv-pdf { display: flex; flex-direction: column; gap: 6px; }
.dv-frame { width: 100%; height: calc(100dvh - 140px); border: 0; border-radius: 10px; background: #fff; }
@media (max-width: 599px) { .dv-head [data-action="dv-save"] { font-size: 12px; padding: 0 8px; } }

/* Предвызывной — черновик плана: бледный переключатель с явной подписью и заметная плашка. */
.chip.chip-pre { border-style: dashed; }
.precall-note { display: inline-block; margin: 0 0 6px; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--amber); background: rgba(247, 199, 107, .1); border: 1px dashed rgba(247, 199, 107, .5); }

/* Объединение сцен (сняты одним кадром): у группы дня свой спокойный цвет — полоска слева у строки
   и метка «🔗 с …» у номера; выбранная группа подсвечена. Внизу — панель выбора и состава группы. */
:root { --lc0: #7dd3fc; --lc1: #f9a8d4; --lc2: #fcd34d; --lc3: #86efac; --lc4: #c4b5fd; --lc5: #fdba74; }
.lc0 { --lcc: var(--lc0); } .lc1 { --lcc: var(--lc1); } .lc2 { --lcc: var(--lc2); }
.lc3 { --lcc: var(--lc3); } .lc4 { --lcc: var(--lc4); } .lc5 { --lcc: var(--lc5); }
.doc-table tr.linked > td:first-child { box-shadow: inset 4px 0 0 var(--lcc); }
.doc-table tr.link-hi > td { background-image: linear-gradient(color-mix(in srgb, var(--lcc) 16%, transparent), color-mix(in srgb, var(--lcc) 16%, transparent)); }
.link-tag { display: inline-block; margin-top: 5px; padding: 3px 7px; border-radius: 8px; font: inherit; font-size: 12px; line-height: 1.25;
  color: var(--lcc); background: color-mix(in srgb, var(--lcc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--lcc) 45%, transparent);
  cursor: pointer; text-align: left; max-width: 140px; }
.link-tag.quiet { color: var(--muted); background: transparent; border-color: var(--line); }
.link-check { display: flex; justify-content: center; padding: 2px 0 6px; cursor: pointer; }
.link-check input { width: 26px; height: 26px; margin: 0; accent-color: var(--cyan); }
.link-start { white-space: nowrap; }
.link-bar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40;
  width: min(560px, calc(100% - 20px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 14px; background: #171c2a; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.link-bar[class*=" lc"] { border-color: color-mix(in srgb, var(--lcc) 50%, transparent); }
.link-bar .lb-text { flex: 1 1 170px; min-width: 0; }
.link-bar button { min-height: var(--tap); }
.link-check.off { opacity: .35; cursor: not-allowed; }

/* Подтверждение и ввод в самом приложении (вместо системных confirm/prompt) — поверх всех окон. */
.ask-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .6); }
.ask-box { width: min(420px, 100%); padding: 18px 16px 14px; border-radius: 16px; background: #171c2a;
  border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); }
.ask-text { line-height: 1.45; margin-bottom: 14px; }
.ask-input { width: 100%; margin-bottom: 14px; }
.ask-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ask-actions button { min-height: var(--tap); min-width: 96px; }
.ask-actions .ask-danger { border-color: var(--red); font-weight: 700; }

/* День по вызывному: персонаж есть в Либретто/КПП, но убран из вызывного — бледно и зачёркнуто, не фильтр. */
.char-gone { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; font-size: 13px;
  color: var(--muted); background: transparent; border: 1px dashed var(--line); text-decoration: line-through; opacity: .6; cursor: default; }
.doc-table .char-gone { min-height: 30px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
/* Окно текста: перебивка — общий текст нескольких сцен; текст сценария с чужими персонажами — тихо. */
.script-text .doc-shared { margin: 4px 0 10px; font-size: 13px; color: #4f5566; }
.script-text .doc-mismatch { color: #8a6d2b; }

/* Демо-проект: тихая плашка под вкладками, на всю ширину шапки. */
.demo-bar { grid-column: 1 / -1; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter); font-size: 12px;
  color: var(--amber); background: rgba(247, 199, 107, .08); border-top: 1px solid rgba(247, 199, 107, .18); text-align: center; }