/* CRM рилсов «Оптики 99» — мини-приложение Telegram, мобильная версия.
   Мир: монтажный стол серии — постеры 4:5 (зона сетки профиля, под неё собраны обложки),
   конвейер статусов от съёмки до публикации, лист рилса снизу, лента роликов как в Reels.
   Движение: одна шкала (160 / 240 / 320 мс) и одна кривая; у каждого элемента свой способ. */

@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("/static/fonts/jost-500-cyrillic.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("/static/fonts/jost-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Jost"; font-weight: 600; font-display: swap; src: url("/static/fonts/jost-600-cyrillic.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Jost"; font-weight: 600; font-display: swap; src: url("/static/fonts/jost-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Manrope"; font-weight: 500 600; font-display: swap; src: url("/static/fonts/manrope-600-cyrillic.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 500 600; font-display: swap; src: url("/static/fonts/manrope-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("/static/fonts/manrope-700-cyrillic.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("/static/fonts/manrope-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }

:root {
  --bg: #F4F2EE;
  --surface: #FFFFFF;
  --surface-2: #EAE7E0;
  --ink: #242A22;
  --muted: #5B6356;
  --line: #DCD8CF;
  --green: #3F8A22;
  --on-green: #FFFFFF;
  --lime: #E3DE1A;
  --poster: #242A22;
  --poster-ink: #F4F2EE;
  --scrim: rgba(18, 21, 17, 0.48);
  --st-rec: #B3372E;   --st-rec-bg: #F8E4E1;
  --st-shot: #2B66A6;  --st-shot-bg: #E1ECF8;
  --st-edit: #995B07;  --st-edit-bg: #FAEDD5;
  --st-wait: #535B4E;  --st-wait-bg: #E7E4DD;
  --st-pub: #2E7A16;   --st-pub-bg: #E1F0D8;
  --font-head: "Jost", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-fast: 160ms;
  --t-mid: 240ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 14px;
  --gutter: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121511; --surface: #1B1F1A; --surface-2: #252A23; --ink: #ECEDE8; --muted: #A6AD9F; --line: #30362D;
    --green: #6CC24A; --on-green: #0E1A0A; --poster: #0B0D0A; --poster-ink: #ECEDE8; --scrim: rgba(0, 0, 0, 0.6);
    --st-rec: #F0958B; --st-rec-bg: #3B2220;
    --st-shot: #8DB9E8; --st-shot-bg: #1D2B3A;
    --st-edit: #E6B25C; --st-edit-bg: #3A2D18;
    --st-wait: #BBC1B5; --st-wait-bg: #2A2F28;
    --st-pub: #8FD472; --st-pub-bg: #1F331C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121511; --surface: #1B1F1A; --surface-2: #252A23; --ink: #ECEDE8; --muted: #A6AD9F; --line: #30362D;
  --green: #6CC24A; --on-green: #0E1A0A; --poster: #0B0D0A; --poster-ink: #ECEDE8; --scrim: rgba(0, 0, 0, 0.6);
  --st-rec: #F0958B; --st-rec-bg: #3B2220;
  --st-shot: #8DB9E8; --st-shot-bg: #1D2B3A;
  --st-edit: #E6B25C; --st-edit-bg: #3A2D18;
  --st-wait: #BBC1B5; --st-wait-bg: #2A2F28;
  --st-pub: #8FD472; --st-pub-bg: #1F331C;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 500 15px/1.45 var(--font-body);
  font-variant-numeric: tabular-nums;
  caret-color: var(--green);
  overscroll-behavior-y: none;
}
body.locked { overflow: hidden; }
::selection { background: var(--lime); color: #1A1E18; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; border-radius: 6px; }
.icon { width: 22px; height: 22px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon.fill { fill: currentColor; stroke: none; }

/* ───────── шапка и конвейер ───────── */
.top {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--gutter) 10px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 0 var(--line);
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { min-width: 0; }
.brand h1 { margin: 0; font: 600 24px/1.05 var(--font-head); letter-spacing: -0.01em; text-wrap: balance; }
.brand h1 b { color: var(--green); font-weight: 600; }
.brand p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.feed-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px 0 11px; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--bg); font-weight: 700; font-size: 14px; cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.feed-btn:active { transform: scale(0.96); }
.feed-btn[disabled] { opacity: 0.4; }
.feed-btn .icon { width: 18px; height: 18px; }

/* шаги по ширине подписи (у «Опубликован» 11 знаков), маркер едет по их настоящим координатам */
.pipe { position: relative; display: flex; gap: 2px; background: var(--surface-2); border-radius: 16px; padding: 4px; }
.pipe-marker {
  position: absolute; top: 4px; bottom: 4px; left: 0; right: 0;
  background: var(--surface);
  clip-path: inset(0 var(--r, 100%) 0 var(--l, 0px) round 12px);
  opacity: var(--on, 0);
  transition: clip-path var(--t-mid) var(--ease), opacity var(--t-fast) linear;
}
.step {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer; flex: 1 1 auto; min-width: 0;
  min-height: 56px; padding: 6px 5px 5px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.step .n { display: flex; align-items: center; gap: 5px; font: 600 21px/1 var(--font-head); color: var(--ink); }
.step .n i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.step .n.zero { color: var(--muted); }
.step .n.zero b { opacity: 0.55; font-weight: 600; }
.step .l { font-size: 10.5px; line-height: 1.1; color: var(--muted); font-weight: 700; white-space: nowrap; letter-spacing: 0; }
.step[aria-pressed="true"] .l { color: var(--ink); }

/* ───────── сетка постеров ───────── */
main { padding: 14px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 28px); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 980px; margin: 0 auto; } }
.card { border: 0; padding: 0; background: none; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.poster {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: var(--poster); color: var(--poster-ink);
  box-shadow: 0 6px 18px -8px rgba(20, 24, 18, 0.45);
  transition: transform var(--t-fast) var(--ease);
}
.card:active .poster { transform: scale(0.97); }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; display: block; }
.plate {
  position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(108, 194, 74, 0.16), transparent 60%),
    var(--poster);
}
.plate .big { font: 600 64px/0.9 var(--font-head); color: #6CC24A; letter-spacing: -0.02em; }
.plate .t { font: 600 16px/1.15 var(--font-head); color: var(--poster-ink); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px 5px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1;
  background: var(--sb); color: var(--sc);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.badge i, .pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.numtag { position: absolute; right: 8px; top: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 999px; background: rgba(12, 14, 11, 0.74); color: #F4F2EE; font: 600 14px/1 var(--font-head); }
.numtag .icon { width: 11px; height: 11px; }
.card .ttl { font: 700 14px/1.25 var(--font-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .ttl b { font: 600 15px/1 var(--font-head); color: var(--green); margin-right: 5px; }
.card .wt { margin-top: -4px; font-size: 12.5px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-rec { --sc: var(--st-rec); --sb: var(--st-rec-bg); --c: var(--st-rec); }
.s-shot { --sc: var(--st-shot); --sb: var(--st-shot-bg); --c: var(--st-shot); }
.s-edit { --sc: var(--st-edit); --sb: var(--st-edit-bg); --c: var(--st-edit); }
.s-wait { --sc: var(--st-wait); --sb: var(--st-wait-bg); --c: var(--st-wait); }
.s-pub { --sc: var(--st-pub); --sb: var(--st-pub-bg); --c: var(--st-pub); }

.skel .poster { background: var(--surface-2); box-shadow: none; }
.skel .bar { height: 12px; border-radius: 6px; background: var(--surface-2); }
.skel .bar.s { width: 60%; }
.state { padding: 36px 20px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line); border-radius: var(--radius); grid-column: 1 / -1; }
.state strong { display: block; color: var(--ink); font: 600 18px/1.2 var(--font-head); margin-bottom: 6px; }

/* ───────── лист рилса ───────── */
.scrim[hidden], .sheet[hidden] { display: none; }
.scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.scrim.on { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 36;
  max-height: calc(var(--tg-viewport-stable-height, 100dvh) - 28px);
  background: var(--bg); border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px -12px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column;
  transform: translateY(104%);
  transition: transform var(--t-slow) var(--ease);
}
.sheet.on { transform: translateY(var(--drag, 0px)); }
.sheet.dragging { transition: none; }
@media (min-width: 640px) { .sheet { left: 50%; right: auto; width: 600px; margin-left: -300px; } }
.grab { flex: 0 0 auto; height: 26px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.grab::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px); display: flex; flex-direction: column; gap: 18px; }
.media { display: flex; justify-content: center; }
.media video, .media img, .media .plate-lg {
  width: min(100%, 300px); aspect-ratio: 9 / 16; border-radius: 18px; background: #000; display: block; object-fit: cover;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55);
}
.media .plate-lg { position: relative; overflow: hidden; }
.media .plate-lg .plate .big { font-size: 96px; }
.media .plate-lg .plate .t { font-size: 22px; -webkit-line-clamp: 6; }
.sheet h2 { margin: 0; font: 600 23px/1.15 var(--font-head); text-wrap: balance; }
.sheet h2 b { color: var(--green); font-weight: 600; margin-right: 6px; }
.sec { display: flex; flex-direction: column; gap: 8px; }
.sec > .cap { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.stages { display: flex; gap: 6px; }
.stage {
  flex: 1 1 auto; min-width: 0; white-space: nowrap;
  min-height: 52px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 5px;
  font-size: 10.5px; font-weight: 700; line-height: 1.15; text-align: center; color: var(--muted);
  transition: background-color var(--t-fast) linear, border-color var(--t-fast) linear, color var(--t-fast) linear, transform var(--t-fast) var(--ease);
}
.stage i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.stage:active { transform: scale(0.95); }
.stage[aria-checked="true"] { background: var(--sb); border-color: var(--sc); color: var(--sc); }
.stage[disabled] { cursor: progress; }

.field { width: 100%; font: 500 16px/1.45 var(--font-body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px; }
.field:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
textarea.field { min-height: 84px; resize: vertical; }
.field::placeholder { color: var(--muted); opacity: 0.8; }
.save-inline { min-height: 48px; border: 0; border-radius: 12px; background: var(--green); color: var(--on-green); font-weight: 700; cursor: pointer; }
.save-inline[hidden] { display: none; }
.save-inline.retry { margin-top: 14px; padding: 0 18px; }

.dls { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.dl {
  display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 8px 12px 8px 10px;
  border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--t-fast) linear;
}
.dl + .dl { border-top: 1px solid var(--line); }
.dl .th { width: 32px; height: 56px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; background: var(--poster); display: block; }
.dl .th.ic { display: grid; place-items: center; color: var(--poster-ink); }
.dl .tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl .tx b { font-size: 16px; font-weight: 700; }
.dl .tx small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dl .go { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--st-pub-bg); color: var(--st-pub); }
.dl .go .icon { transition: transform var(--t-mid) var(--ease); }
.dl:active { background: var(--surface-2); }
.dl:active .go .icon { transform: translateY(3px); }
.dl:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; background: var(--surface); border-radius: var(--radius); }
.facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.facts ul { margin: 0; padding-left: 18px; }
.facts .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.covers figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.covers img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; display: block; }
.covers figcaption { font-size: 12px; color: var(--muted); font-weight: 700; }
.link { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; }

/* ───────── лента роликов ───────── */
.feed { position: fixed; inset: 0; z-index: 30; background: #000; color: #fff; }
.feed[hidden] { display: none; }
.feed-scroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.feed-scroll::-webkit-scrollbar { display: none; }
.slide { position: relative; height: var(--tg-viewport-height, 100dvh); scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; }
.slide video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.slide .over {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 60px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 22px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.slide .over > * { pointer-events: auto; }
.slide .who { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.slide .who h3 { margin: 0; font: 600 20px/1.15 var(--font-head); text-wrap: balance; }
.slide .who h3 b { color: #8FD472; margin-right: 6px; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--sb); color: var(--sc); }
.round { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.round:active { background: rgba(255, 255, 255, 0.28); }
.feed-tools { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: var(--gutter); z-index: 2; display: flex; gap: 10px; }
.feed-count { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 24px); left: var(--gutter); z-index: 2; font: 600 15px/1 var(--font-head); color: rgba(255, 255, 255, 0.82); }

/* ───────── всплывашка ───────── */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 50;
  max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 12px;
  background: var(--ink); color: var(--bg); font-weight: 700; font-size: 14px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, 0) scale(0.94); opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) linear, transform var(--t-fast) var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}