/* Голос заголовков и голос чисел — свои файлы из app/geroy/shrifty, не системное лицо.
   Имя «Golos Display» отдельное от --shrift-tekst: файл один и он Bold, а телом текста
   Bold быть не должен — под этим именем лицо берут только заголовки. */
@font-face{font-family:"Golos Display";src:url("/geroy/shrifty/GolosText-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/geroy/shrifty/JetBrainsMono-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--safe-top:max(env(safe-area-inset-top,0px),var(--tg-safe-top,0px));
  /* Фон глубже (референс Upscale, Кай 26.08): почти чёрный, но тёплый — мир «ночь и янтарь» остаётся */
  --fon:#070605; --sloy:#12100D; --gran:#241D17;
  --tekst:#F3EDE6; --tekst2:#A89A8C;
  --akcent:#FF8A2B; --rost:#4ADE80;   /* --rost: рост за сутки, как плюс в котировках */
  --trevoga:var(--signal);   /* алиас для oferta.css; новый код пишет --signal (комплект §2.3) */
  --shag:8px; --radius:14px;
  color-scheme:dark;   /* поля, списки и полосы прокрутки браузера — тёмные, как и всё вокруг */
  /* ═══ Токены мира «ЦЕХ по Higgsfield» — источник docs/makety/higgsfield/tokeny.css,
     макеты приняты Каем 03.09 11:45. Своих красок здесь нет: те же уголь, янтарь, сигнал,
     рост, что были, плюс недостающие ступени слоя, границы и материя постера. ═══ */
  --sloy2:#181410; --gran2:#33291F; --tekst3:#8E7D6F;
  --na-akcente:#1A0E04; --signal:#FF4F3F;
  --grad-ugol:linear-gradient(158deg,#241B14 0%,#100D0A 62%,#0A0807 100%);
  --grad-yantar:linear-gradient(158deg,#FF8A2B 0%,#D9541A 58%,#7A2A0C 100%);
  --grad-noch:linear-gradient(158deg,#2B211A 0%,#14100C 55%,#090706 100%);
  --scrim:linear-gradient(to top,rgba(7,6,5,.94) 0%,rgba(7,6,5,.72) 34%,rgba(7,6,5,0) 78%);
  --r-postera:26px; --r-plashki:18px; --r-elementa:12px; --r-pilyuli:999px;
  --ten-plashki:0 10px 30px rgba(0,0,0,.45);
  --ten-postera:-18px -10px 40px rgba(255,138,43,.07), 20px 28px 60px rgba(0,0,0,.62);
  --neon-kray:0 0 0 1px var(--akcent), 0 0 14px rgba(255,138,43,.34), 0 0 38px rgba(255,138,43,.14);
  /* Свечение на экране одно, и оно принадлежит главному действию (дизайн Фабрики §0.1,
     снимок 390 от 06.09: три янтарных ореола сразу — вкладка, кадр и «Дальше», — и глаз
     переставал понимать, куда идти). Выбранное держится ЧЁТКИМ краем без ореола. */
  --kray-vybran:0 0 0 1px var(--akcent);
  /* Три роли значков меню находки (ТЗ Кая 04.09, блок «Находки»): собрать — янтарный неон,
     открыть оригинал — сталь (действие наружу, оно тише), подписаться — зелёный неон «рост». */
  --stal:#9FB0BE;
  --neon-akcent:drop-shadow(0 0 5px rgba(255,138,43,.65));
  --neon-rost:drop-shadow(0 0 5px rgba(74,222,128,.6));
  --v1:4px; --v2:8px; --v3:12px; --v4:18px; --v5:28px; --v6:42px;
  /* ═══ Канон кнопок и значков (Кай 05.09: «все кнопки, шрифт и иконки — в едином стиле»,
     образец — лист действий находки). Одна толщина обводки, два размера значка, три радиуса,
     три цвета-роли. Новых значений не заводить: разнобой начинается с «здесь чуть тоньше». */
  --znak:22px;            /* значок в строке списка и в крупной кнопке */
  --znak-sh:18px;         /* значок в кнопке шапки (36×36) — канон плотности §1 */
  --znak-m:16px;          /* значок в компактной кнопке-пилюле */
  --znak-tolshchina:1.7;  /* одна обводка на все контурные значки */
  /* ═══ Канон плотности 06.09 (мандат Кая, docs/KANON-PLOTNOSTI-2026-09-06.md §1).
     Экран «Текст» суфлёра принят по снимку — его числа становятся общими для всех зон.
     Кегли живут токенами, чтобы правка была одна, а не тридцать. ═══ */
  --kegl-pilyuli:13px;    /* вторичная кнопка-пилюля, чип, строка состояния */
  --kegl-podpisi:12px;    /* подпись под значком, мета строки */
  --kegl-zagolovka:16px;  /* заголовок блока h2/h3 */
  --kegl-podzag:13px;     /* подпись под заголовком, поле ввода */
  --kegl-tekst:14px;      /* абзац текста — верхняя граница кегля на экране */
  --kegl-cifry:26px;      /* крупные цифры кольца и счётчиков — единственное исключение, ≤28 */
  --kegl-stroki:13px;     /* строка списка, карточка текста */
  --kegl-imeni:19px;      /* имя раздела в полосе шапки */
  --knopka-shrift:13px;   /* текст кнопки: канон плотности §1 */
  --knopka-vys:36px;      /* высота кнопки и мишени касания — не меньше 36 */
  --neon-glav:0 0 12px rgba(255,138,43,.45);   /* свечение ровно одной кнопки экрана */
  --verh:50px;   /* полоса верхних кнопок: рабочая область начинается под ней */
  --shrift:"Golos Display",system-ui,sans-serif;   /* заголовки: своё лицо, не системное (craft-floor) */
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;   /* числа-измерения: скорость, просмотры, счётчики */
  --shrift-tekst:"Golos Text","Inter Tight",system-ui,sans-serif; /* текст: у Golos кириллица рисована, а не транслитерирована с латиницы */
}
*{box-sizing:border-box;margin:0;padding:0}
/* Жестом масштаб не меняется (Кай 02.09): в рабочем приложении «щипок» ломает раскладку,
   а двойное касание по кнопке отдаёт зум вместо нажатия. touch-action снимает и задержку. */
html, body{touch-action:manipulation}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fon); color:var(--tekst); font-family:var(--shrift-tekst);
  font-size:var(--kegl-tekst); line-height:1.5; letter-spacing:-0.011em;
  padding-top:var(--safe-top,0px);
  /* --tg-niz — невидимый хвост webview под полосой разделов (см. safeNiz в app.js):
     без него последняя карточка уезжала под полосу ровно на эту величину. */
  padding-bottom:calc(72px + env(safe-area-inset-bottom) + var(--tg-niz,0px));
}
::selection{background:var(--akcent); color:#1A0E04}
input, textarea, select{caret-color:var(--akcent)}
:focus-visible{outline:2px solid var(--akcent); outline-offset:3px; border-radius:6px}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:var(--gran); border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* Зоны рабочего пространства не наслаиваются (Кай 02.09 21:40): верхние кнопки живут в
   своей полосе, рабочая область начинается под ней. Материя канона — ткань и дым, не стекло:
   полоса непрозрачна сверху и растворяется книзу, поэтому уезжающий текст гаснет, а не
   сталкивается с кнопкой. До правки «Сети» и «Твой кабинет» уходили прямо под них.
   Раунд 3 (Кай 03.09, снимок «Пакетов»): дым начинался на 34 px, а кнопки стоят до 52 px —
   текст между ними просвечивал под кнопками. Теперь плотная часть доходит до низа кнопок,
   дым — 14 px ниже них. */
.verhnyaya-zona{position:fixed; top:0; left:0; right:0; z-index:40; pointer-events:none;
  height:calc(var(--verh) + 8px + var(--safe-top,0px));
  background:linear-gradient(180deg, var(--fon) 0%, var(--fon) calc(100% - 14px), rgba(7,6,5,0) 100%)}
html[data-redaktor] .verhnyaya-zona{display:none}
.obolochka{--pole:20px; max-width:760px; margin:0 auto; padding:var(--verh) var(--pole) 0}
/* На компьютере разделы стоят столбцом слева во всю высоту, и полоса гасила бы верхний
   пункт (снимок 1440: «Находки» уходили в дым). Там верхних кнопок над содержимым нет —
   «Обновить» стоит в правом поле, вне колонки, — значит и полоса не нужна. */
@media (min-width:1100px){
  :root{--verh:24px}
  .verhnyaya-zona{display:none}
}
/* Компьютер — не растянутый телефон (Кай, 25.08). На широком экране колонка шире,
   а находки становятся сеткой: одна карточка во весь монитор читается как ошибка вёрстки. */
@media (min-width:1000px){
  .obolochka{max-width:1040px; --pole:28px}
  /* Мера строки: абзац шире 70 знаков глаз теряет на возврате. Заголовки и сетки
     ширину не ограничиваем — им она нужна (замер 25.08: было 78 знаков) */
  main p, main li{max-width:60ch}   /* ch считается по ширине нуля — он шире средней буквы,
     поэтому 60ch дают около 72 знаков в строке, ровно верх канона */
}
@media (min-width:1400px){ .obolochka{max-width:1240px} }
/* Компьютер: первый экран — две колонки. Слева баннер, «Привет», карточка; справа портрет во всю
   высоту этих строк — рядом с приветствием, а не в углу (PDF Кая 26.08: «голова в углу несуразна,
   справа пустота»). Карточка широкая, реплика Ильи и скрины — во второй её колонке. */
@media (min-width:1000px){
  /* Портрета в правой колонке больше нет (канон §3): первый экран — одна колонка,
     логотип во всю её ширину, под ним чипы и лента. */
  #ekran-donory .geroy .logo{width:min(100%, 760px)}
  /* Онбординг живёт в том же контейнере, что сетка находок: карточка, тест и темы занимают
     всю ширину колонки, а не одну ячейку сетки из трёх (снимок 1440, 26.08) */
  .lenta > :not(.donor){grid-column:1 / -1}
  .onb{display:grid; grid-template-columns:1.2fr 1fr; grid-auto-flow:dense; gap:8px 28px; padding:24px 26px; max-width:none}
  .onb .onb-n, .onb h2{grid-column:1 / -1}
  .onb p, .onb .deystviya{grid-column:1}
  .onb .replika, .onb .onb-skriny{grid-column:2; margin-bottom:0}
  .onb .onb-skriny{height:300px} .onb .onb-skriny img{width:150px}
  .onb-test{max-width:none}
}
h1,h2,h3,.cifry-plitki span,.sostoyanie-shapka b{font-family:var(--shrift)}
h1{font-size:var(--kegl-imeni); font-weight:700; letter-spacing:-0.035em; line-height:1.02;
   text-wrap:balance}
/* Контраст весов внутри заголовка (реф №3): тонкое слово рядом с очень жирным */
/* Тонкое слово рядом с жирным держится цветом, а не вторым весом: файл лица один (Bold),
   и «тонко» рисовалось бы тем же Bold. Разный вес внутри строки был бы ложью. */
h1 .tonko{color:var(--tekst2); letter-spacing:-0.02em}
h1 .akcent{color:var(--akcent)}
/* Канон плотности §1: заголовок блока 16, подпись под ним 13.5, поле ввода 13.5/10.
   Значения-умолчания: где у блока есть свой кегль ниже по файлу, он остаётся за ним. */
small{font-size:var(--kegl-podpisi)}   /* браузерное «smaller» давало 11.67 — кегль вне канона */
main h2, main h3{font-size:var(--kegl-zagolovka); font-weight:650; letter-spacing:-0.015em; line-height:1.3}
main h2 + p, main h3 + p, .podzag{font-size:var(--kegl-podzag); color:var(--tekst2)}
input, textarea, select{font-size:var(--kegl-podzag); padding:10px}

/* Герой: портрет Ильи во всю ширину, без рамки (мир «ночь и янтарь», Кай 24.08).
   Глаза — отдельные слои: радужки двигаются в прорезях за курсором и пальцем. Угольки — canvas. */
/* Баннер-шапка вместо вырезанного лого над портретом (Кай 26.08: «сделай полноценный баннер
   в нашей айдентике и плавно перейди в видео»). Низ баннера растворяется маской в портрет —
   шва нет; сверху отступ под safe-area Telegram и iPhone. */
/* Раунд 3 (Кай 03.09: «буквы ЦЕХ не видно до конца»): баннер стоит ПОД полосой кнопок, а не
   заезжает под неё; кадр не режется сверху (буквы лежат в 2–72 % высоты файла), маска
   начинается ниже букв. */
.geroy .logo{display:block; width:100%; height:auto; margin:0; aspect-ratio:16/7; object-fit:cover; object-position:50% 0;
  background:#000; position:relative; z-index:1}
.geroy{position:relative; margin:-4px calc(-1*var(--pole,16px)) calc(var(--shag)*2); overflow:hidden; background:#000}
/* Перелив по контуру: узкая тёплая полоса идёт по логотипу слева направо. color-dodge не
   трогает уголь (чёрное остаётся чёрным) и разгоняет только светлые буквы — контур горит
   сам, без маски по растру. Один приём-характер мира: тлеющая кромка. */
.geroy .pereliv{position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:color-dodge;
  background:linear-gradient(105deg, transparent 40%, rgba(255,170,80,.10) 47%, rgba(255,208,150,.18) 50%,
    rgba(255,170,80,.10) 53%, transparent 60%);
  background-size:260% 100%; animation:pereliv-hod 5.6s linear infinite}
@keyframes pereliv-hod{0%{background-position:180% 0} 100%{background-position:-80% 0}}
/* Дымок: две мягкие серые дымки медленно поднимаются и тают — та же материя, что на баннере */
.geroy .dymok{position:absolute; inset:-12% 0 0; z-index:2; pointer-events:none; opacity:.5;
  background:radial-gradient(42% 30% at 26% 74%, rgba(190,180,170,.20), transparent 70%),
             radial-gradient(38% 26% at 74% 66%, rgba(190,180,170,.16), transparent 70%);
  animation:dymok-hod 13s ease-in-out infinite alternate}
@keyframes dymok-hod{0%{transform:translate3d(0,4%,0) scale(1)} 100%{transform:translate3d(-3%,-6%,0) scale(1.12)}}
.iskry{position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none}
/* Искры на всех экранах (Кай 06.09 вечер, карточка п.1): один canvas на весь экран ПОД всеми
   блоками и кнопками. z-index:-1 — ниже потока страницы, выше фона окна (фон body уходит
   на холст окна, сам body его не рисует). pointer-events:none — палец идёт в кнопку. */
.iskry-fon{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
.geroy h1{position:absolute; left:var(--pole,16px); right:var(--pole,16px); bottom:18px; z-index:4; margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.85)}
.geroy::after{content:""; position:absolute; left:0; right:0; bottom:0; height:34%; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,9,7,0) 0%, rgba(11,9,7,.72) 68%, #0B0907 100%)}
@media (min-width:760px){
  /* Логотип — марка во всю колонку: портрета рядом больше нет, делить строку не с кем */
  .geroy{margin:0 0 calc(var(--shag)*2); overflow:hidden; background:none}
  /* §2.5: портрета справа больше нет — логотип встаёт по центру колонки,
     иначе на 1440 справа от него оставалась пустая половина экрана */
  .geroy{display:flex; justify-content:center}
  /* кадр баннера не режем: при 16/6 из файла 16/7 вылезал шов и кусок фона (снимок 1440) */
  .geroy .logo{width:min(100%, 620px); aspect-ratio:16/7; border-radius:18px}
  .geroy h1{position:static; text-shadow:none; padding-bottom:0}
  .geroy::after{display:none}
}
@media (prefers-reduced-motion: reduce){
  .geroy .pereliv, .geroy .dymok{animation:none}
  .geroy .pereliv{opacity:.35}
}
/* Телефон: верх баннера — ниже дыма полосы, буквы не тускнеют */
@media (max-width:759px){ #ekran-donory .geroy{margin-top:8px} }

/* Угольки: тлеющая полоса, из которой поднимаются искры — мир «ночь и янтарь», а не спиннер и не глаз (Кай 26.08) */
.ugolki{position:relative; width:120px; height:64px; margin:0 auto 14px}
.ugolki::before{content:""; position:absolute; left:10px; right:10px; bottom:6px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--akcent), #FFC46B, var(--akcent), transparent);
  filter:blur(.4px); animation:tlenie 2.6s ease-in-out infinite}
.ugolki i{position:absolute; bottom:8px; width:16px; height:16px; border-radius:50%; background:#FFC46B;
  box-shadow:0 0 6px var(--akcent); opacity:0; animation:iskra 2.4s ease-out infinite}
.ugolki i:nth-child(1){left:18%; animation-delay:0s} .ugolki i:nth-child(2){left:31%; animation-delay:.5s; width:16px; height:16px}
.ugolki i:nth-child(3){left:46%; animation-delay:1.1s} .ugolki i:nth-child(4){left:58%; animation-delay:.3s; width:16px; height:16px}
.ugolki i:nth-child(5){left:72%; animation-delay:1.6s} .ugolki i:nth-child(6){left:84%; animation-delay:.8s; width:16px; height:16px}
@keyframes iskra{0%{transform:translate(0,0) scale(1); opacity:0} 12%{opacity:1} 100%{transform:translate(-8px,-52px) scale(.4); opacity:0}}
@keyframes tlenie{0%,100%{opacity:.55} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ugolki i{animation:none; opacity:.8} .ugolki::before{animation:none}}
/* свои по теме */
.svoi{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sosed{background:var(--sloy); border:1px solid var(--gran); border-radius:14px; padding:12px} .sosed b{display:block} .sosed span{display:block; color:var(--tekst2); font-size:var(--kegl-stroki); margin-top:2px} .sosed small{display:block; color:var(--akcent); font-size:var(--kegl-stroki); margin-top:6px}
.pusto-tih{padding:14px 0} .pusto-tih b{display:block; margin-bottom:4px} .pusto-tih span{color:var(--tekst2)}
/* публикация */
.opublikovat{margin-left:10px; background:transparent; color:var(--tekst); border:1px solid var(--gran); border-radius:999px; padding:8px 14px; font:inherit; font-size:var(--kegl-stroki); cursor:pointer}
.publ-seti{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0} .pill-v.tih{color:var(--tekst2); text-decoration:none}
/* Подпись и хэштеги: тихая свёрнутая плашка (атом Higgsfield «Learn more ⌄», снимок Кая 21:03) */
.podpis-plashka{margin:10px 0; border:1px solid var(--gran); border-radius:14px; padding:0 12px}
.podpis-plashka summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:10px 0; cursor:pointer; color:var(--tekst2); font-size:var(--kegl-stroki)}
.podpis-plashka summary::-webkit-details-marker{display:none}
.podpis-plashka summary .shevron{width:16px; height:16px; flex:none; transition:transform .15s}
.podpis-plashka[open] summary .shevron{transform:rotate(180deg)}
.podpis-plashka[open]{padding-bottom:12px}
/* Кросспостинг: площадки отмечаются галочками, время — одним переключателем.
   Раньше каждая площадка была отдельной кнопкой «выложить» — человек жал их по очереди
   и не знал, ушло ли предыдущее (разбор 25.08). */
.pill-v.vybor{display:inline-flex; align-items:center; gap:7px; cursor:pointer}
.pill-v.vybor input{accent-color:var(--akcent); width:16px; height:16px; margin:0}
/* Выбранное должно ГОРЕТЬ (Кай 29.08): пилюля с отмеченным чекбоксом/радио — акцентная */
.pill-v.vybor:has(input:checked){background:var(--akcent); border-color:var(--akcent); color:#160B04; font-weight:600}
.pill-v.vybor:has(input:checked) input{accent-color:#160B04}
.kadr[data-pleer], .kadr[data-pleer-svoy]{cursor:pointer; position:relative}
.pusk-pleer{position:absolute; inset:0; display:grid; place-items:center; font-size:var(--kegl-cifry); color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.7); pointer-events:none}
.kadr iframe + .pusk-pleer, .kadr iframe ~ .skorost{display:none}
.smena-akk{margin-left:6px; padding:3px 9px; font-size:var(--kegl-podpisi); color:var(--tekst2); background:none; border:1px solid var(--gran); border-radius:10px; cursor:pointer}
/* Входы и уведомления — одной короткой строкой: чип площадки с рисованной галкой,
   «сменить» тихой ссылкой, уведомления одним переключателем (Кай 02.09 21:40). */
.smena-akk.tihaya{border:0; padding:3px 4px; text-decoration:underline; text-underline-offset:3px; opacity:.8}
.vhody-ryad{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.vhod-est, .vhod-net{display:inline-flex; align-items:center; gap:6px; font-size:var(--kegl-podpisi); padding:5px 11px}
.vhod-est svg, .vhod-net svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.vhod-est{color:var(--tekst)} .vhod-est svg{stroke:var(--rost)}
.vhod-net{background:none; color:var(--tekst2); font-family:inherit; cursor:pointer}
/* ═══ Панель публикации по макетам publikaciya-A/B-390 (Кай 16:12–16:15) ═══
   Плитки первого захода заменены строками со статусом. Разметка одна: data-vid="A" —
   строки, "B" — плитки-значки; ни одна функция панели не потеряна, все ушли в значки
   и в свёрнутую «Подпись». */
.pub-verh{display:flex; align-items:center; gap:8px; margin:2px 0 10px}
.pub-verh > b{font-size:var(--kegl-imeni); font-weight:800; letter-spacing:-.02em; margin-right:auto}
.pub-kogda-chip{gap:6px; cursor:pointer; font-size:var(--kegl-stroki)}
.pub-kogda-chip input{position:absolute; opacity:0; pointer-events:none}
.pub-kogda-chip:has(input:checked){border-color:var(--akcent); color:var(--tekst)}
.pub-kogda-chip:not(:has(input:checked)){opacity:.55}
.pub-kadr{position:relative; border-radius:var(--r-postera,20px); overflow:hidden; background:var(--sloy2,var(--sloy)); aspect-ratio:16/10; margin-bottom:14px}
.pub-kadr video{width:100%; height:100%; object-fit:cover; display:block}
.pub-dlit{position:absolute; top:10px; right:10px; background:rgba(7,6,5,.72); color:#fff;
  border-radius:8px; padding:3px 8px; font:600 var(--kegl-stroki) var(--mono); font-variant-numeric:tabular-nums}
.pub-podpis-kadra{position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px; display:grid; gap:2px;
  background:linear-gradient(180deg, rgba(7,6,5,0), rgba(7,6,5,.82))}
.pub-podpis-kadra b{font-size:var(--kegl-tekst); line-height:1.25} .pub-podpis-kadra small{font-size:var(--kegl-podpisi); color:#cbbfb2}
.pub-podpis-kadra b:empty, .pub-podpis-kadra small:empty{display:none}
/* Строка площадки: лого, имя и статус словом, действие тихим значком справа */
.publ-ploshchadki{display:grid; gap:10px; margin:0 0 12px}
.ps-stroka{display:flex; align-items:center; gap:10px; background:var(--sloy); border:1px solid var(--gran);
  border-radius:16px; padding:12px 14px; transition:border-color .18s, box-shadow .25s}
.ps-stroka:has(input:checked){border-color:var(--akcent); box-shadow:var(--neon-kray, 0 0 0 1px var(--akcent))}
.ps-telo{display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0; cursor:pointer}
.ps-telo:has(input[hidden]){cursor:default}
.ps-telo input{position:absolute; opacity:0; pointer-events:none}
.ps-stroka .logo{width:34px; height:34px; flex:none; border-radius:11px; border:1px solid var(--gran);
  display:grid; place-items:center; color:var(--tekst2); transition:color .15s, border-color .15s}
.ps-stroka .logo svg{width:22px; height:22px; display:block}
.ps-stroka[data-status="gotovo"]:has(input:checked) .logo{color:var(--c-plat); border-color:var(--c-plat)}
.ps-imya{min-width:0} .ps-imya b{display:block; font-size:var(--kegl-tekst); line-height:1.2}
.ps-imya small{display:block; font-size:var(--kegl-podpisi); color:var(--tekst2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ps-ugol{display:flex; align-items:center; gap:6px; flex:none}
.ps-zhiv{width:16px; height:16px; border-radius:50%; background:var(--rost)}
.ps-deystvie, .ps-tiho{width:38px; height:38px; padding:0; border-radius:50%; border:1px solid var(--gran);
  background:transparent; color:var(--tekst2); display:grid; place-items:center; cursor:pointer;
  transition:border-color .15s, color .15s, transform .16s}
.ps-deystvie svg, .ps-tiho svg{width:16px; height:16px}
.ps-tiho{width:22px; height:22px; opacity:.6} .ps-tiho svg{width:16px; height:16px}
@media (hover:hover) and (pointer:fine){ .ps-deystvie:hover, .ps-tiho:hover{border-color:var(--akcent); color:var(--akcent)} }
.ps-deystvie:active, .ps-tiho:active{transform:scale(.94)}
/* Липкая кнопка пуска над навигацией — как на обоих макетах */
.pub-pusk{position:sticky; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:3; margin:14px 0 0}
.pub-pusk::before{content:""; position:absolute; left:-16px; right:-16px; top:-44px; bottom:-20px;
  background:linear-gradient(180deg, rgba(7,6,5,0), var(--fon) 48%); pointer-events:none; z-index:-1}
.pub-pusk .knopka{display:flex; align-items:center; gap:10px}
.pub-pusk .pub-schet{margin-left:auto; font-variant-numeric:tabular-nums; opacity:.72}
/* Запас под липкой кнопкой: без него «Подпись» на дне панели уходила под бар (снимок 390). */
.publ{padding-bottom:120px}
/* Вариант B: те же данные плитками-значками (три в ряд), выбранная в оранжевой рамке */
.publ[data-vid="B"] .publ-ploshchadki{grid-template-columns:repeat(3,minmax(0,1fr))}
.publ[data-vid="B"] .ps-stroka{flex-direction:column; text-align:center; gap:6px; padding:14px 8px}
.publ[data-vid="B"] .ps-telo{flex-direction:column; gap:7px}
.publ[data-vid="B"] .ps-imya small{display:none}
.publ-kogda{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px}
/* Планер выпуска: месяц сеткой, как биржевой календарь — видно занятые дни, не листая ленту.
   Точка = одна публикация, цвет = чем кончилась. День с планом обведён, сегодня — янтарём. */
.planer{background:var(--sloy); border:1px solid var(--gran); border-radius:18px; padding:12px 12px 14px; margin-top:9px}
.planer-shapka{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.planer-shapka b{font-size:var(--kegl-zagolovka); text-transform:capitalize; margin-right:auto}
.planer-shapka .strelka{position:static; width:38px; height:38px}
.planer-svod{display:flex; flex-wrap:wrap; gap:14px; color:var(--tekst2); font-size:var(--kegl-stroki); margin-bottom:12px}
.planer-svod span{display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums}
.tochka{width:16px; height:16px; border-radius:50%; background:var(--tekst2); display:inline-block; flex:none}
.tochka[data-s="ждёт"]{background:var(--akcent)}
.tochka[data-s="вышло"]{background:#6FCF8F}
.tochka[data-s="ошибка"]{background:var(--signal)}
.tochka[data-s="идёт"]{background:#E9C46A}
.planer-nedelya{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; color:var(--tekst2); font-size:var(--kegl-podpisi); margin-bottom:6px}
.planer-nedelya span{text-align:center}
.planer-setka{display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
  grid-auto-rows:46px; gap:4px}      /* высота строки задана явно: иначе первая и последняя
  строки месяца растягивались на пол-экрана */
/* minmax(0,1fr) обязателен: с обычным 1fr минимальная ширина ячейки считается
   по содержимому, и месяц уезжает за край экрана (проба 25.08: 2777 px при 390) */
.yacheyka{position:relative; min-width:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; background:var(--fon); border:1px solid transparent; border-radius:12px; color:var(--tekst2);
  font:inherit; font-size:var(--kegl-tekst); cursor:pointer; padding:0; transition:border-color .16s ease, color .16s ease, background .16s ease}
.yacheyka.pusto{background:transparent; cursor:default; pointer-events:none}
.yacheyka[data-proshloe]{color:rgba(168,154,140,.45)}
.yacheyka[data-est]{color:var(--tekst); border-color:var(--gran)}
.yacheyka[data-segodnya]{color:var(--akcent); border-color:rgba(255,138,43,.5)}
.yacheyka[data-vybran]{background:rgba(255,138,43,.12); border-color:var(--akcent); color:var(--tekst)}
.yacheyka:hover:not(.pusto){border-color:var(--akcent)}
.yacheyka .chislo{font-variant-numeric:tabular-nums}
.yacheyka .tochki{display:flex; gap:3px; align-items:center; min-height:8px}
.yacheyka .tochki em{font-style:normal; font-size:var(--kegl-podpisi); color:var(--tekst2)}
@media (min-width:760px){ .planer-setka{grid-auto-rows:74px} .yacheyka{min-height:0; font-size:var(--kegl-tekst)} .planer{padding:18px} }
/* Компьютер: календарь слева, выбранный день справа и липко — планер, а не сетка с хвостом внизу.
   В ячейке вместо точки — время и площадка: на 88px высоты это читается, на телефоне нет. */
.yacheyka .kratko{display:none}
@media (min-width:1100px){
  #plan-telo{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start}
  #plan-den{position:sticky; top:16px}
  #plan-den .den-plana{margin-top:0}
  .planer{margin-top:0}
  .planer-setka{grid-auto-rows:92px}
  .yacheyka{justify-content:flex-start; align-items:flex-start; padding:8px 10px; gap:6px}
  .yacheyka .tochki{display:none}
  .yacheyka .kratko{display:grid; gap:2px; width:100%; font-size:var(--kegl-podpisi); line-height:1.3; color:var(--tekst2)}
  .yacheyka .kratko em{font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-variant-numeric:tabular-nums}
  .yacheyka .kratko em[data-s="вышло"]{color:var(--akcent)}
  .yacheyka .kratko em[data-s="ошибка"]{color:var(--signal)}
}

/* День календаря: заголовок дня, под ним записи. Сегодняшний день — заголовок янтарём. */
.den-plana{margin:18px 0 0} .den-plana h2{font-size:var(--kegl-zagolovka); margin:0 0 8px}
.den-plana[data-segodnya] h2{color:var(--akcent)}
.zapis-plana{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:11px 0; border-top:1px solid var(--gran)}
.zapis-plana .sostoyanie{font-size:var(--kegl-stroki); color:var(--tekst2); white-space:nowrap; text-align:right}
.zapis-plana[data-status="вышло"] .sostoyanie{color:var(--akcent)}
.zapis-plana[data-status="ошибка"] .sostoyanie{color:var(--signal)}
.zapis-plana .pill-v{margin-left:6px; padding:3px 9px; font-size:var(--kegl-podpisi)}
/* Кабинет: сводка по площадкам плитками, число крупно — это главное, что человек ищет глазами */
.seti-svod{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin:12px 0}
.set-k{background:var(--sloy); border:1px solid var(--gran); border-radius:16px; padding:14px 16px}
.set-k .cifra{font-size:var(--kegl-cifry); font-weight:700; letter-spacing:-.02em; margin:6px 0 2px;
  font-variant-numeric:tabular-nums}
.knopka.tih{background:transparent; color:var(--tekst); border:1px solid var(--gran); box-shadow:none}
/* тарифы в приложении */
.tarif-k{background:var(--sloy); border:1px solid var(--gran); border-radius:18px; padding:16px; margin:12px 0}
.tarif-k[data-moy]{border-color:var(--akcent)} .tarif-sh{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px}
.tarif-sh b{font-size:var(--kegl-imeni)} .tarif-sh span{font-weight:700} .tarif-k ul{list-style:none; margin:0 0 10px} .tarif-k li{padding:5px 0; border-top:1px solid var(--gran); font-size:var(--kegl-stroki)} .tarif-k li:first-child{border-top:0}

/* «Пакеты», постеры — вариант A ЦЕХ по Higgsfield (03.09), докладка `pak-` не пересекается
   с общими .deystvie/.knopka/.paket: атомы взяты из docs/makety/higgsfield/ekrany.css,
   но своим неймспейсом — .paket (карточки-строки) продолжает жить в oferta.js нетронутым. */
.tarif-k a.knopka{text-decoration:none}   /* «Войти в сообщество» — кнопка, а не ссылка с подчёркиванием */
.knopka{text-decoration:none}
/* «Как пользоваться» — пилюля под заголовком и слой с видео */

/* Интерактивное обучение на экране (Кай 26.08): прожектор на элемент, подпись, голос Ильи;
   шаги идут сами под длину записи, тап — дальше, крестик — закрыть */
/* Подсказка — одно бегущее слово у элемента (Кай 02.09, С4). Экран остаётся видимым:
   затемнение 0,30 вместо 0,78, подпись — узкая пилюля рядом с местом действия, а не
   плашка во всю ширину с портретом и абзацем текста. */
.tur{position:fixed; inset:0; z-index:70}
.tur .zaslon{position:absolute; inset:0; pointer-events:auto}
/* Свет идёт ПО КРАЮ подсвеченного места, а не ореолом из центра: это состояние
   «сейчас работаем здесь», а не украшение (референс Кая 03.09 — неон по рамке). */
.tur .prozhektor{position:absolute; border-radius:18px;
  box-shadow:0 0 0 9999px rgba(7,6,5,.30), 0 0 0 2px var(--akcent),
             0 0 20px rgba(255,138,43,.50), inset 0 0 26px rgba(255,138,43,.09);
  transition:left .45s cubic-bezier(.16,1,.3,1), top .45s cubic-bezier(.16,1,.3,1), width .45s, height .45s; pointer-events:none}
.tur .podpis{position:absolute; left:16px; width:max-content; max-width:calc(100vw - 24px);
  background:linear-gradient(180deg, rgba(255,138,43,.20), rgba(255,138,43,.05) 58%, rgba(14,11,9,.97)), #12100D;
  border:1px solid rgba(255,138,43,.55); border-radius:999px;
  padding:9px 14px; box-shadow:0 0 22px rgba(255,138,43,.26), 0 10px 30px rgba(0,0,0,.6);
  display:flex; align-items:center; gap:10px;
  transition:left .35s cubic-bezier(.16,1,.3,1), top .35s cubic-bezier(.16,1,.3,1)}
.tur .podpis img, .tur .podpis > div > b{display:none}
.tur .podpis span{display:block; font-size:var(--kegl-tekst); font-weight:650; line-height:1.2; letter-spacing:-0.01em}   /* переносится: с «пропустить» и галкой пилюля на 390 px вылезала за край (QA 03.09) */
.tur .podpis .niz{display:flex; align-items:center; gap:8px}
.tur .podpis .shag{font-family:var(--mono); font-size:var(--kegl-podpisi); color:var(--tekst2); white-space:nowrap}
.tur .podpis .deystvie{padding:4px 10px; font-size:var(--kegl-podpisi); border-radius:999px}
/* Кнопка шага — цветная и заметная: она единственная, что человек здесь нажимает */
.tur .podpis [data-dalshe]{background:transparent; color:var(--akcent); border-color:transparent; box-shadow:var(--neon-kray); font-weight:700}
.tur .podpis [data-dalshe]:active{transform:scale(.96)}
.tur .podpis .deystvie svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.tur .podpis [data-dalshe]{padding:5px 9px}
.tur .zakryt-tur{position:absolute; top:calc(12px + var(--safe-top,0px)); right:12px; width:38px; height:38px; border-radius:50%; background:rgba(7,6,5,.7); border:1px solid var(--gran); color:var(--tekst); font-size:var(--kegl-imeni); line-height:1; cursor:pointer}
/* На узком экране подпись тура и «×» делили правый верх: палец на «Дальше» попадал в крестик, а слоение
   прятало крестик под подпись (аудитор 03.09, мера по трём кнопкам). Кнопки разведены: подпись у верха —
   крестик уходит вниз, и наоборот (класс .vniz ставит подпись при каждом шаге). */
.tur .zakryt-tur.vniz{top:auto; bottom:calc(12px + var(--safe-bottom,0px))}
.podskazki{display:flex; flex-wrap:wrap; gap:6px; align-items:center; flex:0 0 auto}
.kak-polzovatsya{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--knopka-vys); margin:2px 0 8px; background:transparent; color:var(--tekst2); border:1px solid var(--gran); border-radius:var(--r-pilyuli); padding:0 13px; font:inherit; font-size:var(--kegl-pilyuli); cursor:pointer}
.kak-polzovatsya::before{content:""; width:16px; height:16px; background:var(--akcent); clip-path:polygon(0 0, 100% 50%, 0 100%)}
.kak-polzovatsya:hover{border-color:var(--akcent); color:var(--tekst)}
.kak-polzovatsya:active{transform:scale(.97)}
.video-sloy{position:fixed; inset:0; z-index:50; background:rgba(11,9,7,.92); display:grid; place-items:center; padding:16px}
.video-sloy iframe{width:100%; height:100%; border-radius:18px}
.video-sloy video{max-height:84vh; max-width:100%; border-radius:18px; border:1px solid var(--gran); background:#000}
.video-sloy .ramka-v{position:relative; display:inline-grid; max-width:100%}
.video-sloy .slovo{position:absolute; left:50%; bottom:64px; transform:translateX(-50%); width:max-content; max-width:88vw; pointer-events:none; font-size:var(--kegl-cifry); font-weight:800; line-height:1.1; letter-spacing:-.01em; color:#fff; padding:6px 16px; border-radius:12px; background:rgba(7,6,5,.62); text-shadow:0 1px 2px rgba(0,0,0,.6); white-space:nowrap}
.video-sloy .slovo:empty{display:none}
.video-sloy .podskazka-tekst{max-width:520px; margin-top:10px; font-size:var(--kegl-podzag); line-height:1.45; color:var(--tekst2)}
.video-sloy .podskazka-tekst p{margin:0 0 6px}
/* Кай 04.09 00:05: «кнопка мешает читать» — «Готово» стало компактным и полупрозрачным,
   чтобы не спорить с сообщениями суфлёра, которые приходят в тот же угол. */
.video-sloy .zakryt{position:absolute; top:calc(10px + var(--safe-top,0px)); right:10px; background:rgba(26,20,15,.72); backdrop-filter:blur(6px); color:var(--tekst); border:1px solid var(--gran); border-radius:999px; padding:6px 12px; font:inherit; font-size:var(--kegl-stroki); cursor:pointer; z-index:2}
/* Находка открывается ЦЕЛИКОМ (Кай 02.09, С4: «ролики и субтитры в находках смотреть
   максимально неудобно, они полностью не открываются»). Раньше вертикальный ролик
   вставлялся в карточку 16:9 с overflow:hidden — от кадра 9:16 оставалась полоса,
   субтитры уезжали за край. Теперь — слой во весь экран, кадр вписан без обрезки. */
.video-sloy[data-vert]{padding:0; background:#000}
.video-sloy[data-vert] .ramka{width:100vw; height:100dvh; display:grid; place-items:center; overflow:hidden}
.video-sloy[data-vert] .ramka > *{width:100%; height:100%; border:0; border-radius:0; max-height:none; max-width:none; background:#000}
.video-sloy[data-vert] .ramka video{object-fit:contain}
.video-sloy[data-vert] .podval{position:absolute; left:0; right:0; bottom:0; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.85) 55%); display:flex; gap:10px; flex-wrap:wrap; align-items:center; z-index:2}
.video-sloy[data-vert] .podval .sobrat{background:transparent; color:var(--akcent); border:1px solid transparent; box-shadow:var(--neon-kray); border-radius:999px; padding:11px 18px; font:inherit; font-weight:700; cursor:pointer}
.video-sloy[data-vert] .podval .otkryt{color:var(--tekst); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:10px 16px; text-decoration:none; font-size:var(--kegl-stroki)}
/* выбор темы — блоки с обложками (Кай 24.08) */
/* Строка состояния биржи: на широком экране цифры человека стоят над рабочей областью.
   На телефоне она скрыта — там те же цифры живут во вкладке «Цифры» кабинета. */
.sostoyanie-shapka{display:none}
@media (min-width:1100px){
  .sostoyanie-shapka{display:flex; gap:28px; align-items:baseline; flex-wrap:wrap;
    padding:12px 0 14px; margin-bottom:6px; border-bottom:1px solid var(--gran)}
  .sostoyanie-shapka span{display:inline-flex; align-items:baseline; gap:7px}
  .sostoyanie-shapka b{font-size:var(--kegl-imeni); font-weight:700; letter-spacing:-.01em;
    font-variant-numeric:tabular-nums}
  .sostoyanie-shapka i{font-style:normal; font-size:var(--kegl-stroki); color:var(--tekst2)}
  /* Название темы целиком, в две строки при нужде — не «здоровье без медицины и с…» (скрин Кая 26.08 14:13);
     подпись «тема» рядом с названием не нужна: слева в строке ничего другого стоять не может */
  .sostoyanie-shapka span:first-child{align-self:center}
  .sostoyanie-shapka span:first-child b{color:var(--akcent); max-width:300px; white-space:normal; line-height:1.15; font-size:var(--kegl-zagolovka)}
  .sostoyanie-shapka span:first-child i{display:none}
}

/* Вкладки кабинета: пять разделов вместо одной длинной ленты. Активная — янтарём,
   остальные ждут; на узком экране полоса едет вбок, а не переносится в три ряда. */
/* ═══ Канон списка (Кай 05.09, образец — лист действий находки): все разделы, меню и
   перечни на всех страницах выглядят одинаково. Один блок со скруглением, строки через
   волосяную линию, значок 22 px контуром в цвете-роли, имя 16 px, подстрочник 12,5.
   Отдельных «своих» списков в приложении больше нет — правила ниже переопределяют старые. */
.razdely, .menyu-list{background:rgba(24,20,16,.92); border:1px solid var(--gran2);
  border-radius:var(--r-plashki); overflow:hidden}
.razdely .razdel, .menyu-list button{border:0; border-top:1px solid var(--gran); border-radius:0;
  background:transparent; box-shadow:none}
.razdely .razdel:first-child, .menyu-list button:first-child{border-top:0}
/* Строка листа: значок · имя · шеврон. Ни рамки, ни своей пилюли, ни жирного —
   ровно как в меню находки, которое принял Кай. */
.razdel > summary.vkladka, .menyu-list button{display:grid;
  grid-template-columns:var(--znak) minmax(0,1fr) 14px; gap:14px; align-items:center;
  min-height:var(--knopka-vys); padding:10px 14px; background:transparent; border:0; border-radius:0;
  color:var(--tekst); font:inherit; font-size:var(--kegl-zagolovka); font-weight:400; text-align:left}
.razdel > summary > svg, .menyu-list button svg{width:var(--znak); height:var(--znak);
  padding:0; border:0; background:none; border-radius:0; stroke:var(--akcent)}
.razdel[data-telo="seti"] > summary > svg, .menyu-list button[data-ekran="smotret"] svg{stroke:var(--stal)}
.razdel[data-telo="avtory"] > summary > svg, .razdel[data-telo="partnerka"] > summary > svg{stroke:var(--rost)}
/* Имя строки — ТЕКСТОВЫМ лицом: у заголовочного Golos Display один файл, Bold, и любое
   имя в нём выходит жирным. В референсе Кая строки набраны обычным весом. */
.razdel > summary b, .menyu-list button b{font-family:var(--shrift-tekst); font-size:var(--kegl-zagolovka);
  font-weight:400; letter-spacing:0; color:var(--tekst)}
/* активная вкладка не красит строку листа: подсветка была нужна пилюле, а не строке */
.razdel > summary.vkladka[aria-selected="true"]{color:var(--tekst); background:transparent; border-color:transparent}
.razdel > summary.vkladka[aria-selected="true"] > svg{background:none; box-shadow:none}
.razdel > summary small, .menyu-list button small{font-size:var(--kegl-podzag); color:var(--tekst2); margin-top:2px}
.razdel > summary::after{width:12px; height:12px; border-width:1.7px; opacity:.6}
.razdel > summary:hover, .menyu-list button:hover{background:rgba(255,255,255,.04)}
.razdel > summary:active, .menyu-list button:active{background:rgba(255,255,255,.06)}

/* Кабинет одной страницей (Кай 26.08 вечер): разделы-строки как в настройках телефона —
   иконка · имя · подстрочник · шеврон; раскрываются на месте, открытых может быть несколько */
.razdely{margin-top:calc(var(--shag)*1.5)}
.razdel{border-bottom:0}
.razdel > summary{cursor:pointer; list-style:none}
.razdel > summary::-webkit-details-marker{display:none}

/* Значок строки — контуром в цвете-роли, без плашки: канон листа (Кай 05.09). Плашка под
   значком делала из списка сетку карточек, а нужен один лист со строками. */
.razdel > summary > svg{width:var(--znak); height:var(--znak); padding:0; border:0; background:none;
  border-radius:0; box-shadow:none; fill:none; stroke:var(--akcent); stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.razdel[open] > summary > svg, .razdel > summary.vkladka[aria-current] > svg{box-shadow:none; background:none}
.razdel > summary b{display:block} .razdel > summary small{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.razdel > summary::after{content:""; width:16px; height:16px; border-right:1.7px solid var(--tekst2); border-bottom:1.7px solid var(--tekst2); transform:rotate(-45deg); justify-self:center; transition:transform .25s}
.razdel[open] > summary::after{transform:rotate(45deg)}
.razdel-telo{padding:4px 4px 20px}
.razdel-telo > h2{font-size:var(--kegl-imeni); margin-top:6px}
.vkladki{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:10px 0 4px; padding-bottom:2px}
.vkladki::-webkit-scrollbar{display:none}
.vkladka{flex:none; background:transparent; border:1px solid var(--gran); border-radius:999px;
  color:var(--tekst2); font:inherit; font-size:var(--kegl-stroki); font-weight:600; padding:8px 14px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease}
.vkladka[aria-selected="true"]{color:var(--akcent); border-color:rgba(255,138,43,.45); background:rgba(255,138,43,.10)}
.vkladka-telo[hidden]{display:none !important}
/* Компьютер: строка «подпись слева — значение у правого края» на 1600px не читается (снимок
   1440 от 25.08). Вкладки держат меру 680px; «Цифры» — две колонки: слева статус и согласия,
   справа четыре числа плитками, число крупно — то, что человек ищет глазами (DESIGN-REF §3). */
/* «Число живёт на плитке» (Higgsfield 03.09) — раньше плитки были только у 1100px, на телефоне
   те же четыре цифры лежали строками-подписями. Правило и разметка — те же (id/`.stroka` не тронуты,
   только материя), просто больше не заперты медиа-запросом: карточка одна на все ширины. */
/* Шесть плиток «число + слово» по три в ряд (макет ya-390): число впереди, подпись тихая,
   одна плитка акцентом. Двадцать две строки кабинета сведены к шести числам и четырём строкам. */
#ekran-ya > .cifry-plitki, #ekran-ya > .slayd > .cifry-plitki{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
#ekran-ya .cifry-plitki .stroka[data-akcent] span{color:var(--akcent)}
.ya-paket{flex:0 0 auto; font:600 var(--kegl-stroki) var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--tekst2)}
/* Значок в каждой плитке — как на макете ya-390 (сверка 03.09). Плитки column-reverse,
   поэтому в разметке значок стоит ПОСЛЕДНИМ, а на экране оказывается первым. */
#ekran-ya .cifry-plitki .stroka svg{width:16px; height:16px; stroke-width:var(--znak-tolshchina); color:var(--tekst2); margin-bottom:2px}
#ekran-ya .cifry-plitki .stroka[data-akcent] svg{color:var(--akcent)}
#ekran-ya .cifry-plitki .stroka{flex-direction:column-reverse; align-items:flex-start; gap:1px;
  background:var(--sloy); border:1px solid var(--gran); border-radius:var(--r-plashki,14px); padding:9px 12px}
#ekran-ya .cifry-plitki .stroka span{font-size:var(--kegl-imeni); font-weight:700; letter-spacing:-.02em; color:var(--tekst); line-height:1.15}
#ekran-ya .cifry-plitki .stroka b{font-size:var(--kegl-podpisi); font-weight:500; color:var(--tekst2); text-wrap:balance}
#ekran-ya .cifry-plitki .stroka span i{font-style:normal; font-size:.52em; color:var(--tekst2); margin-left:.25em}
@media (min-width:1100px){
  /* `.slayd` — обёртка слайдов: на компьютере она display:contents и раскладку не меняет,
     но дочерним селектором «>» родителем считается уже она. Оба пути перечислены явно. */
  #ekran-ya > p, #ekran-ya > .slayd > p, #ekran-ya .razdely, #ekran-ya .eshche-blok, #ekran-ya .ya-fakty{max-width:760px}
  #ekran-ya .schet-karta{max-width:760px}
  #ekran-ya > .cifry-plitki, #ekran-ya > .slayd > .cifry-plitki{grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; max-width:760px}
  #ekran-ya .cifry-plitki .stroka span{font-size:var(--kegl-imeni)}
}

/* Темы каруселью: четырнадцать обложек сеткой растянули бы экран на три пролистывания
   (Кай, 25.08). Лента едет вбок, стрелки листают по одному экрану, палец — свайпом. */
.temy-lenta{position:relative; margin:12px 0 calc(var(--shag)*3)}
.temy{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px, 1fr); gap:10px;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding-bottom:4px}
.temy::-webkit-scrollbar{display:none}
.temy > .tema{scroll-snap-align:start}
.temy > .deystviya{grid-column:auto; scroll-snap-align:start; min-width:180px; align-content:center}
.strelka{position:absolute; top:calc(50% - 34px); z-index:2; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--gran); background:rgba(11,9,7,.82); color:var(--tekst); font:inherit; font-size:var(--kegl-zagolovka);
  cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(6px)}
.strelka:hover{border-color:var(--akcent); color:var(--akcent)}
.strelka[hidden]{display:none}
.strelka.vlevo{left:-6px} .strelka.vpravo{right:-6px}
/* Кабинет (канон плотности §2.1, пересечений 0): стрелки не лежат поверх плиток, а стоят по бокам
   ленты статично — тот же приём, что у стрелок планера (.planer-shapka .strelka). */
#ekran-ya .temy-lenta{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center}
#ekran-ya .temy-lenta .strelka{position:static}
@media (min-width:760px){ .temy{grid-auto-columns:minmax(190px, 1fr)} .strelka.vlevo{left:-14px} .strelka.vpravo{right:-14px} }
/* Компьютер: темы не лентой с прокруткой вбок, а сеткой — все четырнадцать видны сразу (PDF Кая 26.08).
   Стоит после базовых правил .temy, иначе grid-auto-flow:column выше по файлу победил бы. */
@media (min-width:1000px){
  .temy{grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(4, minmax(0,1fr)); overflow:visible; scroll-snap-type:none; gap:12px}
  .temy > .deystviya{grid-column:1 / -1}
  .temy-lenta .strelka{display:none}   /* только у тем: стрелки планера остаются */
}
.onb{background:var(--sloy); border:1px solid var(--gran); border-radius:18px; padding:18px; margin-bottom:14px}
/* веер скринов статистики в первой карточке — тот же приём, что в герое сайта: соцпруф с экрана, не со слов (Кай 26.08) */
.onb-skriny{position:relative; height:250px; margin:14px -6px 4px; overflow:hidden}
.onb-skriny img{position:absolute; top:6px; width:118px; height:auto; border-radius:14px; border:2px solid #1C1714; box-shadow:0 14px 34px rgba(0,0,0,.55); background:#fff}
.onb-skriny img:nth-child(1){left:2%; transform:rotate(-8deg)} .onb-skriny img:nth-child(2){left:34%; top:0; transform:rotate(-1deg); z-index:2} .onb-skriny img:nth-child(3){left:64%; transform:rotate(7deg)}
.onb-skriny i{position:absolute; left:6px; bottom:0; font-style:normal; font-size:var(--kegl-podpisi); letter-spacing:.18em; text-transform:uppercase; color:var(--tekst2)}
.onb-n{font-size:var(--kegl-stroki); color:var(--tekst2); letter-spacing:.08em; margin-bottom:6px}
.onb h2{margin:0 0 8px} .onb p{margin:0 0 14px}
.replika{display:flex; gap:10px; align-items:flex-start; background:var(--fon); border-radius:14px; padding:8px 10px; margin-bottom:10px}
.replika img{width:44px; height:48px; object-fit:cover; border-radius:10px; flex:none}
.replika b{display:block; color:var(--akcent); font-size:var(--kegl-podpisi)} .replika span{color:var(--tekst2); font-size:var(--kegl-podzag)}
.onb .deystviya{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.tema{position:relative} .tema .sovet{position:absolute; top:10px; left:10px; font-style:normal; font-size:var(--kegl-podpisi); font-weight:700; color:#0B0907; background:var(--akcent); border-radius:999px; padding:4px 9px}
.tema{display:block; padding:0; border:1px solid var(--gran); border-radius:14px; overflow:hidden; background:var(--sloy); color:inherit; font:inherit; cursor:pointer; text-align:left}
.tema img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.tema span{display:block; padding:10px 12px; font-weight:650; font-size:var(--kegl-stroki); line-height:1.25}
.tema[data-moya]{border-color:var(--akcent)} .tema[data-moya] span{color:var(--akcent)}
@media (min-width:760px){ .temy{grid-template-columns:repeat(4,1fr)} }
/* тест «твоя тема» */
/* Кай 03.09 23:06: «не нужно тратить так много места, как на окошко „тему подскажет тест“,
   очень крупные шрифты». Плашка стала строкой: одно предложение и кнопка в ряд. */
.test-tema{background:var(--sloy); border:1px solid var(--gran); border-radius:16px; padding:12px 14px;
  margin:0 0 calc(var(--shag)*2); display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.test-tema h2{margin-bottom:8px} .test-tema p{color:var(--tekst2); margin-bottom:14px}
.test-tema .test-stroka{flex:1 1 220px; margin:0; font-size:var(--kegl-stroki); line-height:1.45; color:var(--tekst2)}
.test-tema .test-stroka b{color:var(--tekst); font-weight:650}
.test-tema #test-telo{flex:1 1 100%}
.test-n{color:var(--tekst2); font-size:var(--kegl-podpisi); margin:10px 0 6px} .test-q .vopros{font-weight:650; font-size:var(--kegl-zagolovka); line-height:1.3}
.test-v{display:grid; gap:8px; margin-top:12px}
.pill-v{display:inline-flex; align-items:center; gap:6px; min-height:var(--knopka-vys); text-align:left; background:var(--fon); border:1px solid var(--gran); color:var(--tekst); border-radius:var(--r-elementa); padding:0 13px; font:inherit; font-size:var(--kegl-pilyuli); cursor:pointer}
.pill-v:hover{border-color:var(--akcent)}
.t2{color:var(--tekst2)}
.chek-stroka{font-size:var(--kegl-stroki); color:var(--tekst2); margin-top:6px}
/* Раунд 3 (Кай 03.09: «меньше текста»): под заголовком одна фраза, остальной абзац — по касанию.
   Слово «Подробнее» — тем же штрихом, что иконки; текст абзаца не переписан, только сложен. */
details.eshche{margin:2px 0 0}
details.eshche > summary{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--knopka-vys); list-style:none; cursor:pointer; color:var(--tekst2); font-size:var(--kegl-pilyuli); font-weight:600; padding:0 13px; border:1px solid var(--gran); border-radius:var(--r-pilyuli)}
details.eshche > summary::-webkit-details-marker{display:none}
details.eshche > summary::after{content:""; width:9px; height:9px; flex:none; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-3px) rotate(45deg); transition:transform .2s ease}
details.eshche[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
details.eshche > p{margin-top:6px}
.test-nisha{border-top:1px solid var(--gran); padding:12px 0} .test-nisha b{display:block; font-size:var(--kegl-zagolovka); margin-bottom:6px} .test-nisha .knopka{margin-top:10px}
h2{font-size:var(--kegl-zagolovka); font-weight:700; letter-spacing:-0.02em; margin-bottom:var(--shag)}
h2 .tonko{color:var(--tekst2)} h2 .akcent{color:var(--akcent)}
p{color:var(--tekst2); max-width:62ch}
a{color:var(--akcent); text-underline-offset:3px; text-decoration-thickness:1px}

/* Лента доноров: на телефоне — строки одна под другой, на компьютере — сетка:
   карточка шириной в монитор превращает обложку 16:9 в баннер и съедает экран. */
.lenta{display:flex; flex-direction:column; gap:2px; margin-top:calc(var(--shag)*1.5)}
/* Строки-котировки на компьютере: один столбец до 1400, дальше два — в трёх колонках
   заголовок обрезался до двух слов (снимок 1440, 26.08) */
@media (min-width:1400px){
  .lenta{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 16px; align-items:start}
  .lenta .donor{margin-bottom:0}
  .lenta .lenta-hvost, .lenta .pusto, .lenta .donor.primer{grid-column:1/-1}
}
/* Чипы-фильтры над лентой (референс Upscale, Кай 26.08): одна прокручиваемая строка,
   фильтр работает по уже загруженным карточкам — без похода на сервер */
.filtry{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-top:calc(var(--shag)*1.5);
  padding:2px var(--pole) 6px; margin-left:calc(-1*var(--pole)); margin-right:calc(-1*var(--pole)); -webkit-overflow-scrolling:touch}
.filtry::-webkit-scrollbar{display:none}
.filtry button svg{width:16px; height:16px; flex:none}
.filtry button:active{transform:scale(.95)}
/* Переключатель вида стоит под чипами, а не в шапке: на 390 пять контролов в одну строку
   не влезают — «Крупно» наехало на заголовок и на счётчик новых (снимок 390 17:52). */
.vidy{margin-top:6px}
/* Вкладки смешанно (решение Кая 05.09: «делай смешено»). Площадка зовётся словом —
   «TikTok» узнаётся по имени, а не по контуру; свои вкладки («Новые», «Мои авторы»,
   «Топ-авторы») стоят значком. У площадки значка нет: слово и контур на одной кнопке
   называют одно и то же дважды, и именно эта пара съедала ширину ряда. */
.filtry button{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:var(--knopka-vys); background:var(--sloy); color:var(--tekst2); border:1px solid var(--gran); border-radius:var(--r-pilyuli);
  padding:0 13px; font:inherit; font-size:var(--kegl-pilyuli); font-weight:600; cursor:pointer; white-space:nowrap; transition:color .15s, border-color .15s, background .15s}
.filtry button[data-znachok]{padding:0 9px}      /* без подписи кнопка садится по значку */
.filtry button[data-znachok] span:not(.schet){display:none}   /* прячем подпись, не счёт */
.filtry button:not([data-znachok]) svg{display:none}
.filtry button[aria-pressed="true"]{color:var(--na-akcente); background:var(--akcent); border-color:var(--akcent)}
@media (hover:hover) and (pointer:fine){ .filtry button:hover{border-color:var(--akcent)} }
.filtry button:focus-visible{outline:2px solid var(--akcent); outline-offset:3px}
.filtry button[data-pusto]:not([aria-pressed="true"]){opacity:.55}
.filtry .schet{font-family:var(--mono); font-size:var(--kegl-podpisi); opacity:.8; margin-left:3px; font-variant-numeric:tabular-nums}
/* Ряд длиннее экрана: семь вкладок с четырьмя словами в 390 px не помещаются ни при каком
   кегле (замер — selfcheck_ekran_nahodki, мера B9). Поэтому у правого края он не обрывается,
   а ГАСНЕТ — тем же приёмом, каким гаснет уезжающий текст под верхней полосой. Обрезанная
   вкладка читается как поломка вёрстки, погасшая — как «здесь листается». */
.filtry{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%)}
.filtry[data-konec]{-webkit-mask-image:none; mask-image:none}
/* Вкладки обложки (макет Кая 05.09): те же чипы, что над находками, но внутри карточки —
   поэтому без выхода за поля и по центру, как в макете. */
.obl-vkladki{margin:0 0 10px; padding:2px 0 4px; justify-content:center}
/* Панель обложки живёт по центру карточки, как и кнопки над ней: строка-подсказка,
   прижатая влево под центрованным рядом, читалась чужой (снимок 1440 от 05.09). */
.obl-panel{text-align:center}
.obl-panel p{margin:8px 0 6px}

/* ═══ Лист действий по находке (ТЗ Кая 04.09): касание карточки открывает меню, а не
   раскрывает её. Повадка iOS action sheet: два блока со скруглением, разделители внутри,
   «Отмена» отдельной плашкой снизу, вход снизу вверх. Первым — сама находка: кадр, имя,
   крючок; касание кадра запускает встроенный плеер (решение Кая 29.08 остаётся в силе). ═══ */
.deystviya-sloy{position:fixed; inset:0; z-index:80; display:flex; flex-direction:column;
  justify-content:flex-end; gap:8px; padding:12px 10px calc(12px + env(safe-area-inset-bottom));
  background:rgba(7,6,5,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.deystviya-sloy > *{animation:list-vverh .22s cubic-bezier(.16,1,.3,1) both}
@keyframes list-vverh{from{transform:translateY(14px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ .deystviya-sloy > *{animation:none} }
.deystviya-sloy .list, .deystviya-sloy .otmena{width:min(520px,100%); margin:0 auto;
  background:rgba(24,20,16,.92); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--gran2); border-radius:var(--r-plashki); overflow:hidden}
.deystviya-sloy .punkt{display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center; gap:12px;
  width:100%; padding:15px 16px; background:transparent; border:0; border-top:1px solid var(--gran);
  color:var(--tekst); font:inherit; font-size:var(--kegl-zagolovka); text-align:left; text-decoration:none; cursor:pointer}
.deystviya-sloy .punkt:first-child{border-top:0}
.deystviya-sloy .punkt:active{background:rgba(255,255,255,.05)}
.deystviya-sloy .punkt svg{width:var(--znak); height:var(--znak); fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina);
  stroke-linecap:round; stroke-linejoin:round}
.deystviya-sloy .punkt[data-znak="akcent"] svg{color:var(--akcent); filter:var(--neon-akcent)}
.deystviya-sloy .punkt[data-znak="stal"] svg{color:var(--stal)}
.deystviya-sloy .punkt[data-znak="rost"] svg{color:var(--rost); filter:var(--neon-rost)}
.deystviya-sloy .otmena{padding:15px 16px; color:var(--tekst); font:inherit; font-size:var(--kegl-zagolovka); font-weight:650; cursor:pointer}
.deystviya-sloy .otmena:active{background:rgba(255,255,255,.05)}
.deystviya-sloy .shapka{display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px; align-items:center;
  width:100%; padding:12px 14px; background:transparent; border:0; border-bottom:1px solid var(--gran);
  color:inherit; font:inherit; text-align:left; cursor:pointer}
.deystviya-sloy .shapka .kadr{aspect-ratio:1/1; border-radius:12px; flex:none}
.deystviya-sloy .shapka .kadr .skorost{left:5px; top:5px; padding:3px 7px; font-size:var(--kegl-podpisi)}
.deystviya-sloy .shapka b{display:block; font-size:var(--kegl-tekst); font-weight:650; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.deystviya-sloy .shapka span{display:block; color:var(--tekst2); font-size:var(--kegl-podpisi); margin-top:4px}

/* ═══ Вид находок: крупно / мелко / список (слово Кая 03.09 12:45: «пользователь сам
   выбирает: крупные / мелкие значки / список»). Разметка карточки ОДНА на все три вида —
   меняется только раскладка. Вторая разметка означала бы вторую жизнь каждой кнопки:
   «Собрать», «открыть оригинал», «Подписаться» и раскрытие живут в одном месте. ═══ */
/* Кнопка в работе: крутящийся ободок вместо серой заливки (ТЗ Кая 04.09, C2 — «долгая серая
   кнопка не допускается»). Сама кнопка остаётся живой: повторное нажатие гасится в коде. */
.knopka[data-zhdyot]{position:relative; padding-right:34px; opacity:.9}
.knopka[data-zhdyot]::after{content:""; position:absolute; right:12px; top:50%; width:16px; height:16px;
  margin-top:-7px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent;
  animation:krug-zhdyot .7s linear infinite}
@keyframes krug-zhdyot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .knopka[data-zhdyot]::after{animation-duration:2.4s} }

/* ТЗ Кая 04.09 (E6): текст на странице авторов по центру. Врезка партнёрки (E1) —
   той же колонкой и тем же шагом, что список: одна страница, один ритм. */
#ekran-ya .razdel[data-telo="avtory"] .razdel-telo{display:grid; justify-items:center; gap:12px; text-align:center}
#ekran-ya .razdel[data-telo="avtory"] .razdel-telo > *{width:100%; margin:0}

.vidy{display:flex; gap:6px; margin-top:calc(var(--shag)*1.5); align-items:center}
/* Высота задана явно: подпись показывается только у активной кнопки, и без min-height
   ряд стоял ступенькой — 36 px под активной против 32 под соседями (замер 05.09). */
.vidy button{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px;
  background:var(--sloy); color:var(--tekst2);
  border:1px solid var(--gran); border-radius:var(--r-pilyuli); padding:0 11px; font:inherit; font-size:var(--kegl-stroki);
  font-weight:600; cursor:pointer; transition:color .15s, border-color .15s, box-shadow .25s}
.vidy button svg{width:var(--znak-m); height:var(--znak-m); fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.vidy button span{display:none}
.vidy button:hover{border-color:var(--akcent)}
/* Нажатый вид — контур янтарём без свечения: неон на экране один, и это главное действие
   (канон плотности §1, Кай 06.09), а не переключатель. */
.vidy button[aria-pressed="true"]{color:var(--akcent); border-color:var(--akcent)}
.vidy button[aria-pressed="true"] span{display:inline}

/* Общее для двух кадровых видов: число живёт НА кадре, а не в подписи под ним */
.lenta[data-vid="krupno"] .donor, .lenta[data-vid="melko"] .donor{background:transparent; border:0; border-radius:0; overflow:visible}
.lenta[data-vid="krupno"] .donor .kotirovka, .lenta[data-vid="melko"] .donor .kotirovka{
  grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; gap:7px; padding:0; align-items:start}
.lenta[data-vid="krupno"] .donor .kotirovka:hover, .lenta[data-vid="melko"] .donor .kotirovka:hover{background:none}
.lenta[data-vid="krupno"] .mini, .lenta[data-vid="melko"] .mini,
.lenta[data-vid="krupno"] .mini-pusto, .lenta[data-vid="melko"] .mini-pusto{
  grid-area:1/1; width:100%; height:auto; border-radius:var(--r-elementa)}
/* Дым по низу кадра: без него белые цифры теряются на светлом превью */
.lenta[data-vid="krupno"] .kotirovka::after, .lenta[data-vid="melko"] .kotirovka::after{
  content:""; grid-area:1/1; align-self:stretch; border-radius:var(--r-elementa);
  background:var(--scrim); pointer-events:none}
.lenta[data-vid="krupno"] .chisla, .lenta[data-vid="melko"] .chisla{
  grid-area:1/1; align-self:end; justify-self:start; text-align:left; padding:0 10px 8px; z-index:2}
.lenta[data-vid="krupno"] .chisla .sut, .lenta[data-vid="melko"] .chisla .sut{
  text-shadow:0 1px 10px rgba(7,6,5,.9)}
.lenta[data-vid="krupno"] .chisla .vsego, .lenta[data-vid="melko"] .chisla .vsego{display:none !important}
.lenta[data-vid="krupno"] .kotirovka > span:nth-child(2),
.lenta[data-vid="melko"] .kotirovka > span:nth-child(2){grid-area:2/1}
.lenta[data-vid="krupno"] .dolya, .lenta[data-vid="melko"] .dolya{margin-top:5px}

/* Мелко — сетка 2×N (макет «находки, вариант A»): кадр 4:5, подпись двумя строками под ним.
   4:5, а не 9:16 макета: превью YouTube приходят 16:9, и в 9:16 у ролика срезало бы пол-кадра. */
.lenta[data-vid="melko"]{display:grid; grid-template-columns:1fr 1fr; gap:14px 10px}
.lenta[data-vid="melko"] .mini, .lenta[data-vid="melko"] .mini-pusto{aspect-ratio:4/5; object-fit:cover}
.lenta[data-vid="melko"] .imya{font-size:var(--kegl-podzag); line-height:1.32}
.lenta[data-vid="melko"] .avtor{font-size:var(--kegl-podpisi)}
.lenta[data-vid="melko"] .donor.primer,
.lenta[data-vid="melko"] .lenta-hvost, .lenta[data-vid="melko"] .pusto,
.lenta[data-vid="melko"] > :not(.donor){grid-column:1/-1}

/* Крупно — один кадр во всю ширину (макет «находки, вариант Б»): имя лежит на кадре,
   под ним видно скорость. Находок за экран меньше, зато каждая читается как ролик. */
.lenta[data-vid="krupno"]{display:grid; grid-template-columns:minmax(0,1fr); gap:16px}
.lenta[data-vid="krupno"] .mini, .lenta[data-vid="krupno"] .mini-pusto{aspect-ratio:16/9; object-fit:cover}
.lenta[data-vid="krupno"] .kotirovka > span:nth-child(2){
  grid-area:1/1; align-self:end; z-index:2; padding:0 12px 30px; min-width:0}
.lenta[data-vid="krupno"] .imya{font-size:var(--kegl-zagolovka); text-shadow:0 1px 12px rgba(7,6,5,.95)}
.lenta[data-vid="krupno"] .avtor{text-shadow:0 1px 10px rgba(7,6,5,.9)}
.lenta[data-vid="krupno"] .chisla{padding:0 12px 9px}
/* Одно слово — один смысл (решение Кая 05.09). «Крупно» — самый крупный кадр раздела,
   «мелко» — ровно вдвое плотнее, «список» — строка. Числа: 390 → 1 и 2, ≥1000 → 2 и 4.
   До правки на ≥1000 стояло 3 против 2 — «вдвое» переставало быть правдой посреди шкалы. */
@media (min-width:1000px){
  .lenta[data-vid="melko"]{grid-template-columns:repeat(4, minmax(0,1fr))}
  .lenta[data-vid="krupno"]{grid-template-columns:repeat(2, minmax(0,1fr))}
}
/* Сетка на широком экране считается видом, а не шириной окна: два правила про одну колонку
   спорили бы между собой */
@media (min-width:1400px){ .lenta[data-vid]{grid-template-columns:unset} }
@media (min-width:1400px){
  .lenta[data-vid="spisok"]{grid-template-columns:repeat(2, minmax(0,1fr))}
  .lenta[data-vid="melko"]{grid-template-columns:repeat(4, minmax(0,1fr))}
  .lenta[data-vid="krupno"]{grid-template-columns:repeat(2, minmax(0,1fr))}
}

/* Находка — строка как в списке котировок (референс Upscale, Кай 26.08): превью, имя и автор,
   справа скорость за сутки моноширинным зелёным. Полоса под именем — доля от самой быстрой
   находки дня: это измерение, а не декоративный график. Нажатие раскрывает кадр, крючок и кнопки. */
.donor.primer .kadr video{width:100%; height:100%; object-fit:cover; display:block; background:#000}
.donor.primer{border-color:var(--akcent)}
.donor{display:block; width:100%; text-align:left; color:inherit; font:inherit; background:var(--sloy);
  border:1px solid var(--gran); border-radius:16px; overflow:hidden; margin-bottom:8px; padding:0}
.donor .kotirovka{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; border-radius:var(--r-plashki);
  width:100%; padding:10px 12px; background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer}
.donor .kotirovka:hover{background:rgba(255,138,43,.05)}
.donor .mini{width:56px; height:56px; border-radius:12px; object-fit:cover; background:#000; display:block}
.donor .mini-pusto{width:56px; height:56px; border-radius:12px; background:var(--gran)}
.donor .kotirovka > span:nth-child(2){display:block; min-width:0}
.donor .imya{font-weight:650; font-size:var(--kegl-zagolovka); line-height:1.25; letter-spacing:-0.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.donor .avtor{display:block; color:var(--tekst2); font-size:var(--kegl-podpisi); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.donor .dolya{display:block; height:3px; border-radius:999px; background:var(--gran); margin-top:7px; overflow:hidden}
.donor .dolya i{display:block; height:100%; width:var(--dolya,10%); background:var(--rost); border-radius:999px}
.donor .chisla{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.donor .chisla .sut{color:var(--rost); font-weight:600; font-size:var(--kegl-tekst)}
.donor .chisla .vsego{color:var(--tekst2); font-size:var(--kegl-podpisi); margin-top:4px; font-weight:500}
.donor > .telo{display:none}
.donor .kotirovka .mini-z{width:44px; height:44px; border-radius:10px; background:var(--gran); display:grid; place-items:center; color:var(--tekst2)}
.donor .kotirovka .mini-z svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.donor .telo .kadr{border-radius:12px; margin-bottom:12px}
.donor.primer > .telo{display:block; border-top:0}
.kadr{position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden}
.kadr img{width:100%; height:100%; object-fit:cover; display:block; opacity:.92}
.kadr .skorost{position:absolute; left:12px; top:12px; background:rgba(11,9,7,.78); backdrop-filter:blur(6px);
  border-radius:999px; padding:6px 12px}
.donor .telo{padding:12px 12px 14px}
.donor.primer .imya{font-size:var(--kegl-imeni); letter-spacing:-0.015em; -webkit-line-clamp:unset}
.donor .kryuchok{color:var(--tekst); margin-top:0}
.donor .pod{color:var(--tekst2); font-size:var(--kegl-podpisi); margin-top:8px; font-family:var(--mono); font-variant-numeric:tabular-nums}
.donor .knopki{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.donor .sobrat{background:transparent; color:var(--akcent); border:1px solid transparent; box-shadow:var(--neon-kray); border-radius:999px; padding:11px 18px; font-weight:700; font:inherit; cursor:pointer}
.donor .otkryt{color:var(--tekst2); border:1px solid var(--gran); border-radius:999px; padding:10px 16px; text-decoration:none; font-size:var(--kegl-stroki)}
.donor .sledit{color:var(--tekst2); background:transparent; border:1px solid var(--gran); border-radius:999px;
  padding:10px 16px; font:inherit; font-size:var(--kegl-stroki); cursor:pointer}
.donor .sledit[data-sleju]{color:var(--akcent); background:transparent; border-color:var(--akcent); font-weight:650}
.skorost{
  font-size:var(--kegl-stroki); font-weight:600; color:var(--akcent); font-family:var(--mono);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* Числа-измерения по всему приложению — одним шрифтом, как в терминале котировок */
.cifry-plitki span, .sostoyanie-shapka b, .lenta-hvost > span.t2{font-family:var(--mono); font-variant-numeric:tabular-nums}
/* Хвост ленты — тот же ряд действий, но со счётчиком: кнопки держатся центра,
   счёт и пояснение уходят отдельной строкой под ними (мера центровки, 05.09). */
.lenta-hvost{flex-direction:column}
.lenta-hvost > span.t2, .lenta-hvost > .poisk-otvet{flex-basis:auto; text-align:center}   /* счётчик — да, пояснение прозой — нет (скрин Кая 26.08 18:38) */

/* Строка состояния фабрики: линия, а не проценты и не спиннер */
.rabota{margin-top:calc(var(--shag)*3); padding:16px 0; border-top:1px solid var(--gran)}
.polosa{height:2px; background:var(--gran); border-radius:2px; overflow:hidden; margin-top:10px}
.polosa i{display:block; height:100%; width:38%; background:var(--akcent);
  animation:idet 1.9s cubic-bezier(.16,1,.3,1) infinite}
@keyframes idet{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

.stroka{display:flex; justify-content:space-between; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--gran)}
.stroka b{font-weight:600}
.stroka span{color:var(--tekst2); font-variant-numeric:tabular-nums}
/* Длинное значение — подпись сверху, ниже чипы: «Подписка 15 · обучение · приватка» наезжали
   на слово «Тариф» в одной строке (скрин Кая 26.08 15:42) */
.stroka.stolbik{flex-direction:column; align-items:stretch; gap:8px}
.chipy{display:flex; flex-wrap:wrap; gap:6px}
.chipy i{font-style:normal; color:var(--tekst); border:1px solid var(--gran); background:var(--sloy); border-radius:999px; padding:5px 11px; font-size:var(--kegl-stroki)}
.chipy i em{font-style:normal; color:var(--tekst2)}
/* Партнёрка: ссылка — главный предмет экрана, ниже четыре числа плитками, потом дерево пришедших */
/* Карточка счёта (референс Upscale, Кай 26.08): статус · сборок осталось из N с полосой ·
   дней до продления · кнопка. Один блок вверху «Я», числа моноширинным. */
.schet-karta{background:linear-gradient(160deg, #16120E, var(--sloy)); border:1px solid var(--gran); border-radius:18px; padding:14px; margin:4px 0 10px; display:grid; gap:10px}
.schet-karta .verh{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.schet-karta .verh b{font-size:var(--kegl-zagolovka); font-weight:700; letter-spacing:-0.01em} .schet-karta .verh span{font-family:var(--mono); font-size:var(--kegl-podpisi); color:var(--tekst2); white-space:nowrap}
.schet-karta .chislo{font-family:var(--mono); font-size:var(--kegl-cifry); font-weight:600; letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums}
.schet-karta .chislo small{font-size:var(--kegl-tekst); color:var(--tekst2); font-weight:500; letter-spacing:0}
.schet-karta .pod{color:var(--tekst2); font-size:var(--kegl-podpisi); margin-top:6px}
.schet-karta .polosa-s{height:4px; border-radius:999px; background:var(--gran); overflow:hidden; margin-top:10px}
.schet-karta .polosa-s i{display:block; height:100%; width:var(--dolya,0%); background:var(--akcent); border-radius:999px; transition:width .5s cubic-bezier(.16,1,.3,1)}
.schet-karta .niz{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.schet-karta .niz span{font-size:var(--kegl-stroki); color:var(--tekst2)} .schet-karta .niz span b{font-family:var(--mono); color:var(--tekst); font-weight:600}
.schet-karta[data-status="free"] .chislo{color:var(--tekst2)}
/* Серия дней в плане: две недели точками, число подряд крупно */
.plan-seriya{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-items:center; background:var(--sloy); border:1px solid var(--gran); border-radius:16px; padding:14px 16px; margin:0 0 14px}
.plan-seriya b{font-family:var(--mono); font-size:var(--kegl-cifry); font-weight:600; letter-spacing:-0.03em; line-height:1; grid-row:1/3}
.plan-seriya span{font-size:var(--kegl-stroki); color:var(--tekst2)}
.plan-seriya .tochki{display:flex; gap:5px} .plan-seriya .tochki i{width:16px; height:16px; border-radius:50%; background:var(--gran)}
.plan-seriya .tochki i[data-sdal]{background:var(--akcent)} .plan-seriya .tochki i[data-segodnya]{box-shadow:0 0 0 2px var(--fon), 0 0 0 3px var(--akcent)}
/* Куратор как чат (Кай 26.08): свои реплики справа янтарём, Илья слева; быстрые ответы чипами */
/* Куратор — мессенджером (макет «Куратор», принят Каем 03.09): свои реплики янтарные справа,
   его — угольные слева. На виду шаг на сегодня, рассуждение под «почему ⌄». */
/* Пузырь не растягивается на всю ширину монитора: строка длиннее ~70 знаков теряется
   на возврате. На телефоне ограничение — доля ширины, на компьютере — мера строки. */
.dialog .repl{max-width:min(88%, 62ch); padding:11px 14px; border-radius:var(--r-plashki) var(--r-plashki) var(--r-plashki) 6px;
  justify-self:start; line-height:1.42}
.dialog .repl.user{justify-self:end; background:var(--akcent); border-color:transparent; color:var(--na-akcente);
  border-radius:var(--r-plashki) var(--r-plashki) 6px var(--r-plashki)}
.dialog .repl.user b{color:rgba(26,14,4,.66)}
.dialog .repl.ilya{border-color:var(--akcent)}
.repl .shag-dnya{display:block; font-weight:600; color:var(--tekst)}
/* Живой чат (Кай 07.09): ответ Ильи приходит сам, и приходит мягко — не мигает в ленте.
   Класс вешает app.js на дорисованную реплику и снимает по animationend. */
@keyframes repl-poyavlenie{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.repl-poyavlenie{animation:repl-poyavlenie .28s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){.repl-poyavlenie{animation:none}}
.repl .pochemu{margin-top:8px; white-space:normal}
.repl .pochemu > summary{font-size:var(--kegl-podpisi); padding:4px 10px; border:1px solid var(--gran2); border-radius:var(--r-pilyuli);
  display:inline-block; color:var(--tekst2)}
.repl .pochemu > p{color:var(--tekst2); font-size:var(--kegl-stroki); margin-top:8px; white-space:pre-line}
/* Кадры находок в ответе: настоящие сегодняшние находки, нажатие открывает плеер ленты */
.repl-kadry{display:flex; gap:6px; margin-top:10px; max-width:360px}   /* кадр в чате — миниатюра: на 1440 пузырь широк, и кадры вырастали в полэкрана (снимок desktop-1440-krug.png) */
.repl-kadr{position:relative; flex:1 1 0; min-width:0; padding:0; border:0; background:none; cursor:pointer;
  border-radius:var(--r-elementa); overflow:hidden; line-height:0}
.repl-kadr img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; background:#000}
.repl-kadr::after{content:""; position:absolute; inset:0; background:var(--scrim); pointer-events:none}
.repl-kadr .skorost{position:absolute; left:6px; bottom:5px; z-index:2; font-family:var(--mono); font-size:var(--kegl-podpisi);
  color:var(--rost); line-height:1.2; text-shadow:0 1px 8px rgba(7,6,5,.95)}
.repl-kadr:hover img{filter:brightness(1.08)}
@media (max-width:1099px){
  #ekran-krug > .slayd:has(.dialog){display:flex; flex-direction:column}
  /* Кай 03.09 23:08: «перед первым сообщением дырка, нужно просто сместить всё выше».
     Разговор больше не прижимается к низу экрана — он начинается сразу под шапкой и
     остаётся своим прокручиваемым окном (max-height), чтобы новая реплика не уезжала. */
  #ekran-krug .dialog{margin-top:0}
  /* Разговора ещё нет: подсказка стоит сразу под приветствием Ильи, а форма — следом,
     не у низа экрана (Кай 04.09 06:30: «полезное пространство начинается сразу после
     слова Куратор»). */
  #ekran-krug .dialog[data-pusto]{margin:0 0 6px}
}
#ekran-krug #kurator-privet{margin:0 0 8px}
/* Чипы уезжали за правый край срезом посреди слова («просмотро…») — на снимке это
   читается как поломка, а не как «есть ещё». Затухание к краю показывает прокрутку. */
.bystro{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:6px 0 9px; padding:0 18px 2px 0;
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.bystro::-webkit-scrollbar{display:none}
.bystro button{flex:0 0 auto; display:inline-flex; align-items:center; min-height:var(--knopka-vys); background:var(--sloy); border:1px solid var(--gran); color:var(--tekst); border-radius:var(--r-pilyuli); padding:0 13px; font:inherit; font-size:var(--kegl-pilyuli); cursor:pointer; white-space:nowrap}
.bystro button:hover{border-color:var(--akcent)}
/* Партнёрка: к выплате — главное число, кнопка рядом */
.part-balans{background:var(--sloy); border:1px solid var(--gran); border-radius:18px; padding:16px; margin:8px 0 12px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.part-balans b{display:block; font-family:var(--mono); font-size:var(--kegl-cifry); font-weight:600; letter-spacing:-0.03em; line-height:1; color:var(--rost)} .part-balans span{display:block; color:var(--tekst2); font-size:var(--kegl-stroki); margin-top:6px}
.part-ssylka{background:var(--sloy); border:1px solid var(--gran); border-radius:18px; padding:16px; display:grid; gap:12px; grid-template-columns:1fr auto; align-items:center; margin:8px 0 12px}
.part-ssylka-tekst{grid-column:1 / -1} .part-ssylka-tekst b{display:block; margin-bottom:6px}
.part-ssylka code{display:block; font-family:var(--shrift); font-size:var(--kegl-tekst); color:var(--akcent); word-break:break-all; background:var(--fon); border-radius:10px; padding:10px 12px}
.part-ssylka .deystviya{grid-column:1} .part-qr{grid-column:2; border-radius:12px; background:#fff; padding:6px}
.part-cifry{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.part-cifry .stroka{flex-direction:column-reverse; align-items:flex-start; gap:2px; background:var(--sloy); border:1px solid var(--gran); border-radius:16px; padding:12px 14px}
.part-cifry .stroka span{font-family:var(--shrift); font-size:var(--kegl-cifry); font-weight:700; letter-spacing:-.02em; color:var(--tekst); line-height:1.1}
.part-cifry .stroka b{font-size:var(--kegl-podpisi); font-weight:500; color:var(--tekst2)}
.part-usloviya{margin:10px 0 14px}
/* «Откуда пришли» — владельцу. Таблица, а не плитки: плитка хороша для одного числа,
   здесь их три на площадку, и смысл в сравнении столбцом. Узкий экран прокручивает
   таблицу внутри себя, страница вбок не едет. */
.ist-obertka{overflow-x:auto; margin-bottom:12px}
.ist{width:100%; border-collapse:collapse; font-size:var(--kegl-stroki)}
.ist th, .ist td{padding:9px 10px; text-align:right; border-bottom:1px solid var(--gran); white-space:nowrap}
.ist th:first-child, .ist td:first-child{text-align:left; white-space:normal; padding-left:0}
.ist th{font-size:var(--kegl-podpisi); font-weight:500; color:var(--tekst2)}
.ist td:not(:first-child){font-variant-numeric:tabular-nums; font-family:var(--mono)}
.ist tr:last-child td{border-bottom:0}
.ist .metki{display:block; color:var(--tekst2); font-size:var(--kegl-podpisi); margin-top:2px; font-family:var(--mono)}
.ist tr[data-pryamoy] td:first-child b{color:var(--tekst2)}
.part-derevo{position:relative; padding-left:22px; margin-bottom:16px}
.part-derevo::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--gran)}
.part-uzel{position:relative; display:flex; gap:10px; padding:9px 0}
.part-uzel i{position:absolute; left:-19px; top:15px; width:16px; height:16px; border-radius:50%; background:var(--tekst2); border:2px solid var(--fon)}
.part-uzel[data-status="paid"] i{background:var(--akcent)}
.part-uzel b{display:block} .part-uzel span{color:var(--tekst2); font-size:var(--kegl-stroki)}
@media (min-width:1100px){
  #ekran-ya .razdel[data-telo="partnerka"] .razdel-telo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 32px; align-items:start}
  #ekran-ya .razdel[data-telo="partnerka"] #partnerka{display:contents}
  #partnerka > .part-ssylka, #partnerka > .part-usloviya{grid-column:1}
  #partnerka > .part-cifry{grid-column:2; grid-row:1 / span 2}
  #partnerka > h2, #partnerka > .part-derevo, #partnerka > .deystviya{grid-column:1}
}

/* Стрик: ряд точек по дням, сегодняшняя — акцентом */
.strik{display:flex; gap:6px; align-items:center; padding:11px 0; border-bottom:1px solid var(--gran)}
.strik b{font-weight:600; margin-right:auto}
.strik i{width:16px; height:16px; border-radius:50%; background:var(--gran); display:block}
.strik i[data-sdal]{background:var(--tekst2)}
.strik i[data-segodnya]{outline:2px solid var(--akcent); outline-offset:2px}
.strik i[data-segodnya][data-sdal]{background:var(--akcent)}

.pusto{
  color:var(--tekst2);
  /* пустое состояние живёт по центру доступной высоты, а не висит вверху:
     на снимке 390 было видно, как под ним остаётся полэкрана дыры */
  min-height:46vh; display:flex; flex-direction:column; justify-content:center;
  padding:24px 0;
}
.pusto b{display:block; color:var(--tekst); font-weight:650; margin-bottom:6px}

/* Канон плотности 06.09 §1 (мандат Кая, экран «Текст» суфлёра принят по снимку):
   главная кнопка экрана — ЗАЛИВКА янтарём, текст --na-akcente, высота 36, кегль 13,
   свечение 12 px, ширина по тексту. Канон 05.09 «прозрачная с кантом» им отменён:
   на снимке 06.09 контурная кнопка не читалась как главное действие среди контурных пилюль. */
.knopka{
  appearance:none; border:1px solid var(--akcent); border-radius:var(--r-pilyuli); padding:0 18px;
  min-height:var(--knopka-vys); display:inline-flex; align-items:center; justify-content:center;
  background:var(--akcent); color:var(--na-akcente); font:inherit; font-size:var(--knopka-shrift); font-weight:650;
  letter-spacing:-0.01em; cursor:pointer;
  box-shadow:var(--neon-glav);
  transition:transform .16s cubic-bezier(.16,1,.3,1), box-shadow .25s, filter .16s;
}
.knopka:hover{filter:brightness(1.18)}
.knopka:active{transform:scale(.975)}
.knopka.tih, .knopka[disabled]{box-shadow:none}
.knopka[disabled]{background:var(--gran); color:var(--tekst2); border-color:var(--gran); cursor:not-allowed}

.oshibka{color:var(--signal); font-size:var(--kegl-stroki); margin-top:10px}
.oshibka .deystvie{margin-top:8px; margin-right:8px}
.udacha{color:var(--akcent); font-size:var(--kegl-stroki); margin-top:10px}

/* Поля: один стиль, без рамок-капсул */
.pole{display:block; margin-top:calc(var(--shag)*1.5)}
.pole span{display:block; color:var(--tekst2); font-size:var(--kegl-podzag); margin-bottom:4px}
/* textarea сюда попал не сразу: без него описание публикации оставалось белым
   прямоугольником посреди тёмного экрана — видно только на снимке (25.08) */
.pole input, .pole select, .pole textarea{
  width:100%; min-height:var(--knopka-vys); padding:10px; border-radius:10px; border:1px solid var(--gran);
  background:var(--sloy); color:var(--tekst); font:inherit; font-size:var(--kegl-podzag); resize:vertical;
}
.pole input:focus-visible, .pole select:focus-visible, .pole textarea:focus-visible{border-color:var(--akcent); outline:none}
/* Ряд действий: кнопки по центру, свой воздух сверху и снизу. Без нижнего отступа кнопка
   «Установить тему» налезала на текст под собой (Кай 05.09, снимок «Я»). */
.deystviya{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;
  margin:calc(var(--shag)*2) 0 calc(var(--shag)*2)}
.deystviya > .otvet:empty, .deystviya > div:empty{display:none}   /* пустой ответ не сдвигает кнопку с центра */

/* Выбор настроек: строка переключателей, а не сетка карточек */
.vybor{margin-top:calc(var(--shag)*1.5)}
.vybor > span{display:block; color:var(--tekst2); font-size:var(--kegl-stroki); margin-bottom:6px}
.vybor .varianty{display:flex; flex-wrap:wrap; gap:6px}
.vybor label{
  padding:7px 12px; border-radius:999px; border:1px solid var(--gran); cursor:pointer;
  font-size:var(--kegl-stroki); color:var(--tekst2); transition:border-color .16s, color .16s, background .16s;
}
.vybor label:has(input:checked){border-color:var(--akcent); color:var(--tekst); background:var(--sloy)}
.vybor label:has(input:focus-visible){outline:2px solid var(--akcent); outline-offset:2px}
.vybor input{position:absolute; opacity:0; width:0; height:0}
.vybor .podskazka{color:var(--tekst2); font-size:var(--kegl-stroki); margin-top:8px; min-height:1.3em}
.fayl{display:flex; align-items:center; gap:12px; margin-top:4px; font-size:var(--kegl-stroki); color:var(--tekst2); flex-wrap:wrap}
.fayl.deystvie{margin-top:0; color:var(--tekst)}
/* Пилюля одна: .vybrat внутри кнопки-пилюли рисовал второй контур (снимок 390/1440 06.09, «Выбрать свою запись»). */
.fayl.deystvie .vybrat{border:0; padding:0; border-radius:0} .fayl.deystvie input{position:absolute; opacity:0; width:0; height:0}
.fayl input[type=file]{position:absolute; opacity:0; width:0; height:0}
.fayl .vybrat{
  border:1px solid var(--gran); border-radius:999px; padding:8px 14px; cursor:pointer;
  color:var(--tekst); transition:border-color .16s;
}
.fayl .vybrat:hover{border-color:var(--akcent)}
.fayl label:has(input:focus-visible) .vybrat{outline:2px solid var(--akcent); outline-offset:2px}
.fayl .imya-fayla{color:var(--tekst2)}
.gate{position:sticky; top:8px; z-index:5; background:var(--sloy); border:1px solid var(--akcent); border-radius:18px; padding:16px; margin:10px 0 16px; display:grid; gap:8px}
.gate b{font-size:var(--kegl-zagolovka)} .gate span{color:var(--tekst2)} .gate .knopka{justify-self:start}
section[data-zakryt] > :not(h1):not(.gate):not(.kak-polzovatsya){opacity:.38; pointer-events:none; filter:grayscale(.4)}
section[data-zakryt] .kak-polzovatsya{opacity:1; pointer-events:auto; filter:none}   /* на закрытом экране подсказка — единственное, что можно нажать; в слайде она внуком, и исключение по прямому ребёнку её не спасало */
/* …но то, что человек уже получил, гейт не отнимает. Собрал ролик — фабрика тут же
   закрылась по LIMIT-1 («Следующий можно через 26 минут»), и свой готовый ролик
   нельзя было ни проиграть, ни скачать, ни опубликовать, ни открыть в редакторе.
   Найдено боем на живом проде 02.09: клик перехватывала сама секция.
   Возврат делается ОТДЕЛЬНЫМ правилом, а не исключением в :not() выше: между
   секцией и списком лежит обёртка .slayd, которую ставит механизм слайдов уже
   в браузере, поэтому дочерний селектор `>` до списка не достаёт — это видно
   только на живой странице, в разметке файла такой обёртки нет.
   pointer-events наследуется, и `auto` на потомке возвращает ему касание.
   «Новый ролик» и форма заказа остаются погашенными — их гейт и держит. */
section[data-zakryt] .roliki-shapka,
section[data-zakryt] #zadachi{opacity:1; pointer-events:auto; filter:none}
/* Корзина — своей кнопкой под списком сборок (06.09; до этого жила под «что внутри»):
   вернуть случайно удалённый ролик — это тоже «то, что человек уже получил», гейт паузы
   не про это. */
section[data-zakryt] #korzina-knopka{opacity:1; pointer-events:auto; filter:none}
/* Открытая корзина не притушена целиком. Гашение живёт на прямом ребёнке секции (слайде),
   а opacity предка потомком не отменяется — поэтому исключение снимается со всего слайда
   мастера, и только пока открыта страница 8. Пауза — про сборку нового ролика, а не про
   возврат того, что человек уже собрал. */
section[data-zakryt][data-str="8"] > .slayd:last-child{opacity:1; pointer-events:auto; filter:none}
/* Кай 03.09 23:08: «перед первым сообщением дырка, всё сместить выше, плашки и кнопки
   поменьше». Пустой разговор больше не занимает места вовсе, поля ужаты. */
.dialog{display:grid; gap:6px; margin:8px 0; max-height:52vh; overflow:auto}
.dialog:empty{display:none; margin:0}
#ekran-krug .verh-razdela{margin-bottom:4px}
/* §2.3: «что внутри» и «Как пользоваться» стояли двумя полосами одна под другой —
   место отдано содержимому, обе пилюли идут одним рядом по центру. */
#ekran-krug .podskazki{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 8px}
#ekran-krug .kak-polzovatsya{margin:0}
#ekran-krug .bystro{margin:2px 0 8px}
#ekran-krug .bystro button{padding:0 11px; font-size:var(--kegl-pilyuli)}
#ekran-krug .pole span{font-size:var(--kegl-podpisi)}
#ekran-krug .deystvie{padding:0 13px; font-size:var(--kegl-pilyuli)}
.repl{background:var(--sloy); border:1px solid var(--gran); border-radius:14px; padding:8px 11px; font-size:var(--kegl-podzag); line-height:1.45; white-space:pre-line}
.repl b{display:block; font-size:var(--kegl-podpisi); color:var(--tekst2); margin-bottom:3px} .repl.user{background:transparent} .repl.ilya{border-color:var(--akcent)} .repl.ilya b{color:var(--akcent)}
.urok-video{width:100%; height:100%; display:block; border-radius:14px; background:#000; margin:0}
.urok-video-obertka{position:relative; margin:0 0 14px; border-radius:14px; overflow:hidden; aspect-ratio:16/9; background:#000}
.urok-video-pusk{position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(11,9,7,.55); color:#fff; font-size:var(--kegl-imeni); display:grid; place-items:center; cursor:pointer; padding:0 0 0 3px}
/* Отказ плеера читается словами прямо на кнопке (истёкший токен, 403, файла нет) */
.urok-video-pusk.urok-video-beda{width:auto; height:auto; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:999px; padding:10px 16px; font-size:var(--kegl-podzag); white-space:nowrap}
.urok-video-obertka[data-igraet] .urok-video-pusk{display:none}
/* Кадр урока гаснет, когда окно ушло из фокуса: запись экрана в этот момент берёт заглушку. */
.urok-video-obertka[data-skryto]::after{content:"Урок скрыт, пока окно не в фокусе";
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:12px;
  background:#0B0907; color:var(--tekst2); font-size:var(--kegl-stroki); z-index:3}
/* Форензик-знак (ТЗ 03.09): бегущая подпись поверх плеера — не мешает смотреть, но называет
   зрителя на слитом кадре. Вторая — статичная и почти невидимая: остаётся даже если бегущую
   успели обрезать кадрированием записи. pointer-events:none — знак не перехватывает клики по видео. */
.urok-forenzik, .urok-forenzik-tiho{position:absolute; left:0; top:0; pointer-events:none; color:#fff;
  font-size:var(--kegl-stroki); font-weight:600; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.6)}
.urok-forenzik{opacity:.35}
.urok-forenzik-tiho{opacity:.04; left:8px; top:auto; bottom:6px}
.urok-skoro{position:relative; margin:0 0 14px; border-radius:14px; overflow:hidden} .urok-skoro img{display:block; width:100%; height:auto; opacity:.55}
.urok-skoro span{position:absolute; left:14px; bottom:12px; color:var(--tekst); font-size:var(--kegl-stroki); background:rgba(11,9,7,.7); padding:6px 10px; border-radius:999px}
.master{display:block}
/* Шкала этапов фабрики (референс Upscale «этапы оценки», Кай 26.08): шесть узлов на линии,
   пройденные — янтарная точка с галочкой, текущий — светится, дальше — серые. Нажатие
   открывает этап; открыт всегда один. */
.etapy{--n:5; display:grid; grid-template-columns:repeat(var(--n),1fr); position:relative; margin:14px 0 16px; padding:0; list-style:none}
.etapy::before{content:""; position:absolute; left:calc(100%/(2*var(--n))); right:calc(100%/(2*var(--n))); top:15px; height:2px; background:var(--gran)}
.etapy::after{content:""; position:absolute; left:calc(100%/(2*var(--n))); top:15px; height:2px; background:var(--akcent); width:var(--proyden,0%); transition:width .4s cubic-bezier(.16,1,.3,1)}
.etapy li{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px}
.etapy button{width:38px; height:38px; border-radius:50%; border:2px solid var(--gran); background:var(--fon); color:var(--tekst2); font:inherit; font-family:var(--mono); font-size:var(--kegl-stroki); font-weight:600; cursor:pointer; display:grid; place-items:center; transition:border-color .2s, background .2s, color .2s, box-shadow .2s}
.etapy button svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.etapy li[data-sost="gotov"] button{border-color:var(--akcent); background:var(--akcent); color:#1A0E04}
.etapy li[data-sost="tekushchiy"] button{border-color:var(--akcent); color:var(--akcent); box-shadow:0 0 0 4px rgba(255,138,43,.18)}
.etapy span{font-size:var(--kegl-podpisi); color:var(--tekst2); text-align:center; line-height:1.1; white-space:nowrap}
.etapy li[data-sost="tekushchiy"] span{color:var(--tekst)}
@media (min-width:520px){ .etapy span{font-size:var(--kegl-podpisi)} }
details.shag{background:var(--sloy); border:1px solid var(--gran); border-radius:16px; margin-bottom:9px; padding:0 14px}
/* Сегмент-контроль вместо облака чипов (Кай 26.08): до четырёх вариантов в одну строку,
   иконка над подписью, выбранный — заливка. Больше вариантов — остаются чипы. */
.vybor[data-segment] .varianty{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:0; background:var(--fon); border:1px solid var(--gran); border-radius:14px; padding:3px}
.vybor[data-segment] label{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:44px; min-width:0; padding:0 4px; border:0; border-radius:11px; text-align:center; font-size:var(--kegl-podpisi); line-height:1.1; color:var(--tekst2)}   /* 56 + паддинг 3·2 + кант 1·2 = 64 (канон §1) */
.vybor[data-segment] label svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.vybor[data-segment] label:has(input:checked){background:var(--sloy); color:var(--tekst); box-shadow:inset 0 0 0 1px var(--akcent)}
.vybor[data-segment] label:has(input:checked) svg{color:var(--akcent)}
@media (min-width:520px){ .vybor[data-segment] label{font-size:var(--kegl-pilyuli)} }
/* Кнопки действий иконками — тот же штрих, что в нижней панели */
.deystvie{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--knopka-vys); background:transparent; color:var(--tekst); border:1px solid var(--gran); border-radius:var(--r-pilyuli); padding:0 13px; font:inherit; font-size:var(--kegl-pilyuli); font-weight:600; cursor:pointer; text-decoration:none; transition:border-color .16s}
.deystvie:hover{border-color:var(--akcent)}
.deystvie.glav{background:var(--akcent); color:var(--na-akcente); border-color:var(--akcent); box-shadow:var(--neon-glav)}
.deystvie svg{flex:none; width:var(--znak-m); height:var(--znak-m); fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
details.shag summary{display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; column-gap:11px; align-items:center; padding:11px 0; cursor:pointer; list-style:none}
details.shag summary::-webkit-details-marker{display:none}
details.shag summary i{grid-row:1/3; width:38px; height:38px; font-size:var(--kegl-tekst); border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; background:var(--fon); border:1px solid var(--gran); color:var(--akcent)}
details.shag[open] summary i{background:var(--akcent); color:#0B0907; border-color:var(--akcent)}
details.shag summary b{font-size:var(--kegl-tekst)} details.shag summary span{color:var(--tekst2); font-size:var(--kegl-podpisi)}
details.shag > :not(summary){margin-bottom:11px} details.shag .vybor{margin-top:11px}
details.shag[data-gotov] summary b::after{content:" ✓"; color:var(--akcent)}
/* Кай 03.09 23:13: «разделы языка, голоса, ты в кадре громоздкие, когда их разворачиваешь;
   всё отцентровать, компактно, но без потери функций; текст везде одного размера, кроме
   заголовков; кнопки поменьше и параллельные». Шаг стал плотнее на треть: подписи групп
   12,5 px как везде, чипы ниже, кнопки в ряд одинаковой ширины. Ни один выбор не снят. */
#forma-zakaz details.shag summary{padding:9px 0}
#forma-zakaz .vybor{margin-top:9px}
#forma-zakaz .vybor > span{font-size:var(--kegl-podzag); margin-bottom:5px}
/* Канон плотности §1: пилюля 36h, кегль 13, паддинг 0/13, контур без свечения. */
#forma-zakaz .vybor label{display:inline-flex; align-items:center; min-height:var(--knopka-vys); padding:0 13px; font-size:var(--kegl-pilyuli)}
#forma-zakaz .vybor .podskazka{font-size:var(--kegl-podpisi); margin-top:5px; min-height:0}
#forma-zakaz .t2, #forma-zakaz .pole span{font-size:var(--kegl-podpisi)}
#forma-zakaz details.shag > :not(summary){margin-bottom:9px}
/* Кнопки шага стоят параллельно и одной высоты — «Перевести текст» рядом с «Открыть
   в редакторе» выглядели небрежно из-за разной ширины и кегля подписи. */
/* Канон плотности §1: пилюли 36h, кегль 13, ширина по тексту — а не сетка во всю колонку
   (снимок 1440 06.09: «Перевести текст» растянулась на 750 px). */
#forma-zakaz .deystviya{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; align-items:center}
#forma-zakaz .deystviya > *{justify-content:center; text-align:center; min-height:var(--knopka-vys); padding:0 13px; font-size:var(--kegl-pilyuli)}
/* Образец стиля субтитров прямо на чипе — как листание стилей в CapCut. */
#forma-zakaz .vybor[data-gruppa=styles] .varianty{gap:8px}
#forma-zakaz .vybor[data-gruppa=styles] label{display:grid; justify-items:center; gap:4px; padding:6px 8px; border-radius:12px}
#forma-zakaz .obrazec-stil{display:grid; place-items:center; width:78px; height:44px; border-radius:8px;
  background:#141210; font-size:var(--kegl-tekst); line-height:1.15; overflow:hidden; text-align:center}
details.dopolnitelno{margin-top:calc(var(--shag)*2); border-top:1px solid var(--gran)}
details.dopolnitelno summary{padding:14px 0; cursor:pointer; font-weight:600; list-style:none}
details.dopolnitelno summary::-webkit-details-marker{display:none}
details.dopolnitelno summary::after{content:"＋"; float:right; color:var(--tekst2)}
details.dopolnitelno[open] summary::after{content:"－"}
.zadacha .skachat{color:var(--akcent); font-weight:650; font-size:var(--kegl-stroki); text-decoration:none}

/* Чек-лист «Метод бесплатно» (Кай 03.09): четыре подписки, дальше уроки капельницей */
.metod-chekist{background:var(--sloy); border:1px solid var(--gran); border-radius:18px; padding:14px 16px 16px; margin:14px 0 4px}
.metod-chekist .metod-blok{margin-top:0}
.chekist-punkt{display:grid; grid-template-columns:22px 1fr auto auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--gran)}
.chekist-punkt:last-of-type{border-bottom:0}
.chekist-znak{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:var(--tekst2); border:1px dashed var(--gran)}
.chekist-znak:has(svg){background:var(--akcent); border-color:var(--akcent); border-style:solid; color:#1A0E04}
.chekist-znak svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.chekist-tekst{font-size:var(--kegl-tekst); font-weight:600}
.metod-chekist .knopka{font-size:var(--kegl-podpisi); padding:7px 12px; white-space:nowrap}
.metod-chekist .pole{margin-top:10px}

/* Уроки метода: список строк, закрытые — приглушены, прочитанные — точкой */
/* Блоки разделов как в референсе Кая (скрин 24.08): крупная обложка, под ней заголовок и мета */
/* Метод как оглавление книги (референс Upscale — строки, Кай 26.08): уроки строками — обложка,
   номер mono · название · минуты · галочка. Сколько прочитано, говорит кольцо у заголовка
   (внедрение 03.09; до него — строка «N из 11» с полосой поверх списка).
   Закрытый урок называет, что его открывает. */
.metod-blok{margin:20px 0 6px;color:var(--tekst2);font-size:var(--kegl-stroki);letter-spacing:.12em;text-transform:uppercase}
/* Шапка раздела: заголовок и мера рядом, по общей базовой линии. Мера — кольцо с числом
   внутри (макет «Метод»): число лежит на материи, а не в строке «столько-то из стольких». */
.verh-razdela{display:flex; align-items:center; gap:14px; justify-content:space-between; margin-bottom:6px}
/* «Находки» (ТЗ Кая 04.09): заголовок по центру и на уровне верхних кнопок, значки подсказок —
   строкой под ним. Ряд поднимается ровно на верхнее поле (--verh) минус отступ кнопок, поэтому
   середина заголовка совпадает с серединой «обновить» и «меню», а не считается на глаз. */
/* justify-content обязателен: базовое правило шапки ставит space-between, а в сетке это
   лишает единственную колонку растяжения — трек садится по содержимому и уезжает влево
   (замер 05.09: середина заголовка 92 px при центре экрана 195 px). */
.verh-razdela{display:grid; justify-items:center; justify-content:center;
  gap:6px; margin-bottom:10px}
.verh-razdela h1{flex:none; min-height:var(--knopka-vys); display:flex; align-items:center;
  font-size:var(--kegl-imeni); letter-spacing:-0.02em; text-align:center}   /* канон плотности §1: имя раздела 19 */
.verh-razdela .podskazki{justify-content:center}
/* Заголовок стоит В полосе верхних кнопок (ТЗ B1: «на уровне кнопок управления») — и живёт
   он в самой полосе, а не в разделе. Причина найдена замером 05.09: у секции есть transform
   от анимации входа (`ekran-vhod`), а transform создаёт свой слой — любой z-index ВНУТРИ
   секции остаётся ниже полосы (z-index:40), и непрозрачная полоса закрашивала заголовок
   собой (снимок: строка кнопок пустая, хотя elementFromPoint показывал заголовок сверху).
   Поэтому в полосе стоит своя строка имени: текст в неё кладёт `pokazat` из h1 раздела —
   источник правды один, дубля в разметке нет. Сам h1 на телефоне визуально скрыт, но
   остаётся в разделе для чтения с экрана и как якорь значков подсказок.
   На широком экране полосы нет вовсе — там h1 виден в потоке колонки. */
.polosa-imya{position:absolute; left:62px; right:62px; top:calc(7px + var(--safe-top,0px)); height:36px;
  /* поля равны месту верхних кнопок (12 + 42 + 12 + 42): центр остаётся центром экрана,
     а длинное имя не подлезает под «обновить» и «меню» */
  display:flex; align-items:center; justify-content:center; font-family:var(--shrift);
  font-size:var(--kegl-imeni); font-weight:700; letter-spacing:-0.02em; line-height:1;
  color:var(--tekst)}
.polosa-imya:empty{display:none}
@media (max-width:1099px){
  .verh-razdela h1, main section h1{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap}   /* видимое имя — в полосе, это остаётся для чтения с экрана */
  /* значки — первой строкой раздела, ниже дыма полосы (её плотная часть до 52 px, дым до 66) */
  .verh-razdela{margin-top:12px}
}
/* Чип подсказки в неоне: янтарный контур и подпись, треугольник ::before — заливка акцентом.
   Глаз снят решением Кая 05.09, его правило ушло вместе с кнопкой. */
.kak-polzovatsya[data-instrukciya]{color:var(--akcent); border-color:rgba(255,138,43,.5)}   /* §1: неон на экране один — он у главной кнопки */
.kak-polzovatsya[data-instrukciya]:hover{color:var(--tekst); border-color:var(--akcent)}
.verh-razdela h1{flex:1 1 auto; min-width:0}
.verh-razdela .koltso{flex:0 0 auto}
/* Тихое действие справа в шапке раздела (макеты ya/pakety-390): контур, не заливка —
   раскрывает свёрнутый узел внизу экрана, а не спорит с главной кнопкой за внимание. */
.tihoe{flex:0 0 auto; min-height:var(--knopka-vys); display:inline-flex; align-items:center; gap:6px; background:transparent;
  border:1px solid var(--gran); border-radius:var(--r-pilyuli); color:var(--tekst2);
  padding:0 13px; font:inherit; font-size:var(--kegl-pilyuli); cursor:pointer;
  transition:border-color .18s, color .18s, transform .16s var(--plavno,ease-out)}
.tihoe svg{width:var(--znak-m); height:var(--znak-m)}
@media (hover:hover) and (pointer:fine){ .tihoe:hover{border-color:var(--akcent); color:var(--tekst)} }
.tihoe:active{transform:scale(.97)}
.koltso{position:relative; width:44px; height:44px; display:grid; place-items:center; flex:0 0 44px;
  border-radius:50%; background:conic-gradient(var(--akcent) calc(var(--dolya)*1%), var(--gran) 0)}
.koltso::after{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--fon)}
.koltso .chislo{position:relative; z-index:1; font-family:var(--mono); font-size:var(--kegl-podpisi);
  font-variant-numeric:tabular-nums; letter-spacing:-0.03em; color:var(--tekst)}
.urok{display:block; width:100%; color:inherit; font:inherit; cursor:pointer; padding:0; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--gran); border-radius:0; overflow:hidden; margin-bottom:0; transition:background .2s}
/* Верность макету metod-390 (03.09): обложка = афиша целиком, подписи на ней самой нет —
   название уже нарисовано на постере (alt/aria-label несут его для скринридера и прибора,
   а не второй видимый заголовок под плиткой). */
#uroki, #uroki-put{display:grid; grid-template-columns:1fr 1fr; gap:10px}
/* Открытый урок — не ячейка сетки списка (Кай 04.09 06:39: «текст в правой части экрана,
   ролик тоже»). Причина была именно здесь: тело урока падало во вторую колонку сетки
   уроков и жило в правой половине, пока слева стояла кнопка «← все уроки». */
#uroki[data-urok]{display:block}
#uroki .metod-blok, #uroki-put .metod-blok, #uroki #metod-chekist{grid-column:1/-1}
.urok{position:relative; border-bottom:0; border-radius:14px; background:var(--sloy)}
.urok .oblozhka{aspect-ratio:16/9; object-fit:cover}
.urok[data-zakryt] .oblozhka{filter:grayscale(.35) brightness(.6)}
.urok .znak{position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--akcent); color:#1A0E04}
.urok[data-zakryt] .znak{background:var(--sloy2,var(--gran)); color:var(--tekst2); border:1.5px dashed var(--gran2,var(--gran))}
.urok:not([data-prochitan]):not([data-zakryt]) .znak{display:none}
.urok[data-tekushchiy]{outline:2px solid var(--akcent); outline-offset:2px}
.urok:hover{background:rgba(255,138,43,.05)}
.urok .pod{display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px 6px}
.urok .nomer{font-family:var(--mono); font-size:var(--kegl-stroki); color:var(--tekst2); font-variant-numeric:tabular-nums}
.urok .nazvanie{display:block; font-size:var(--kegl-zagolovka); line-height:1.25; font-weight:650}
.urok .minuty{display:block; margin-top:3px; color:var(--tekst2); font-size:var(--kegl-podpisi); white-space:normal}
.urok .znak{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:var(--tekst2); border:1px solid var(--gran)}
.urok .znak svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.urok[data-prochitan] .znak{background:var(--akcent); border-color:var(--akcent); color:#1A0E04}
.urok[data-zakryt] .znak{border-style:dashed}
.urok[data-zakryt] .minuty{color:var(--akcent)}
.urok[data-tekushchiy], #uroki .urok:first-of-type, #uroki-put .urok:first-of-type{background:var(--sloy); border:1px solid var(--gran); border-radius:var(--r-plashki); margin:0 0 12px}
.urok[data-tekushchiy] .pod, #uroki .urok:first-of-type .pod, #uroki-put .urok:first-of-type .pod{padding:14px 16px 16px}
/* Урок — одна колонка по центру и на компьютере (Кай 04.09 06:39: «текст в правой части экрана,
   ролик тоже — неудобно, некрасиво, занято рабочее пространство»). Боковое оглавление снято:
   разворот книги ставил текст в узкую правую треть, а две трети слева пустовали. */
.urok-razvorot{display:block}
@media (min-width:1100px){
  .urok-razvorot .urok-telo{max-width:760px; margin:0 auto}
  .urok-razvorot .urok-telo p, .urok-razvorot .urok-telo li{max-width:none}
  #uroki[data-urok] > .nazad{display:block; max-width:760px; margin-left:auto; margin-right:auto}
}
.urok:hover{border-color:var(--akcent)}
.urok .oblozhka{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.urok[data-zakryt] .oblozhka{filter:grayscale(.35) brightness(.6)}
.urok[data-zakryt]{color:var(--tekst2)} .urok[data-zakryt] .nazvanie{font-weight:500}
.urok-telo{margin-top:calc(var(--shag)*2)}
.urok-telo h2{font-size:var(--kegl-zagolovka); font-weight:800; letter-spacing:-0.03em; margin-bottom:12px}
.urok-telo p{margin:0 0 12px; max-width:66ch; color:var(--tekst)}
.urok-telo ul, .urok-telo ol{margin:0 0 12px 20px; color:var(--tekst)}
.urok-telo li{margin-bottom:6px}
.urok-telo strong{font-weight:650}
.nazad{background:none; border:0; color:var(--akcent); font:inherit; font-weight:600; cursor:pointer; padding:0; margin-bottom:12px}
.zakryto{color:var(--tekst2); margin-top:10px}

/* Круг: одна огромная цифра рейтинга, подписи мелко; топ и просьбы — строками */
.reyting{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:end; margin:calc(var(--shag)*2) 0}
.reyting .chislo{font-size:var(--kegl-cifry); font-weight:800; letter-spacing:-0.05em; line-height:1;
  color:var(--akcent); font-variant-numeric:tabular-nums}
.reyting .iz{color:var(--tekst2); font-size:var(--kegl-stroki); margin-bottom:10px}
.prichiny{list-style:none; margin-top:4px}
.prichiny li{color:var(--tekst2); font-size:var(--kegl-stroki); padding:6px 0; border-bottom:1px solid var(--gran)}
.top{margin-top:calc(var(--shag)*4)}
.top .stroka span{color:var(--tekst)}
.top .stroka small{color:var(--tekst2); margin-left:10px; font-variant-numeric:tabular-nums}
.prosba{padding:14px 0; border-bottom:1px solid var(--gran)}
.prosba .kto{color:var(--tekst2); font-size:var(--kegl-stroki)}
.prosba .tekst{margin:4px 0 8px}
.prosba .otvet-tekst{color:var(--akcent); margin-top:6px}
.prosba form{display:flex; gap:8px; flex-wrap:wrap}
.prosba form input{flex:1; min-width:180px; padding:10px 12px; border-radius:10px; border:1px solid var(--gran);
  background:var(--sloy); color:var(--tekst); font:inherit}
.svoi{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.svoi span{padding:6px 12px; border:1px solid var(--gran); border-radius:999px; font-size:var(--kegl-stroki); color:var(--tekst2)}

/* Карточка ролика в очереди досмотров */
/* Баланс досмотров в шапке ленты (референс Upscale — баланс счёта, Кай 26.08): четыре числа
   моноширинным, полоса — путь к разгону (5 досмотров = сутки первым) */
/* Сверка с макетом 03.09 16:40: четыре числа сидели ВНУТРИ одной рамки — карточка как
   структура, запрет craft-floor. На макете (ya-390) метрики стоят плитками, каждая своя.
   Полоса-трек с заливкой под ними снята по тому же списку; её строка уехала под «что внутри». */
/* Счётчик обмена (макет «е»): две цифры через волосяную линию — отдал / тебе идёт. */
.balans{display:grid; grid-template-columns:1fr 1px 1fr; align-items:center; margin:0 0 12px; padding:9px 4px;
  border:1px solid var(--gran); border-radius:var(--r-elementa); background:var(--sloy)}
.balans .razdel-lin{height:26px; background:var(--gran)}
.balans div{display:grid; justify-items:center; gap:2px; min-width:0; text-align:center}
.balans b{display:block; font-family:var(--mono); font-size:var(--kegl-imeni); font-weight:700; letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums}
.balans .tebe b{color:var(--akcent)} .balans span{display:block; font-size:var(--kegl-podpisi); color:var(--tekst3); line-height:1.15}
/* Очередь как истории: кружок 56, обод янтарём — ролик ждёт досмотра */
.ochered-kr{display:flex; gap:11px; overflow:auto; scrollbar-width:none; padding:2px 0 var(--v3)}
.ochered-kr::-webkit-scrollbar{display:none}
.ochered-kr .stopka{flex:0 0 auto; display:grid; justify-items:center; gap:5px; width:60px; background:none; border:0; border-radius:var(--r-pilyuli); padding:0; cursor:pointer; color:inherit; font:inherit}
.ochered-kr .obod{width:56px; height:56px; border-radius:50%; padding:2px; background:conic-gradient(var(--akcent) 0 100%); display:block}
.ochered-kr .lico{width:100%; height:100%; border-radius:50%; border:2px solid var(--fon); background:var(--sloy2); display:grid; place-items:center;
  font-family:var(--shrift); font-weight:700; font-size:var(--kegl-zagolovka); color:var(--tekst)}
.ochered-kr .podpis{max-width:60px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* На широком экране ролик остаётся вертикальным: карточка колонкой в ширину телефона,
   иначе кадр 16:9 раздувался на 1168 px и плашка вопроса уезжала за нижний край. */
@media (min-width:1000px){ .rolik{max-width:420px; margin-inline:auto} }
/* Кай 07.09 (снимки Ленты с iPhone 13): плашка вопроса НЕ ложится на ролик — ролик виден
   целиком, во всю ширину и высоту, а вопрос стоит компактной строкой под ним. Прежняя
   стеклянная плашка поверх кадра перекрывала весь ролик. */
.rolik{position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto}
.rolik .kadr-zona{position:relative; min-height:0}   /* пилюли меряются от кадра, не от карточки */
/* Кай 08.09: над кадром живёт РОВНО одна наша пилюля — «Звук». Номер «1 из 19» и «дальше»
   стояли здесь же и ложились на родные кнопки плеера (±10 с, пауза). Номер уехал строкой
   под кадр, «дальше» снята: следующий ролик открывает ответ. Пилюля прибита слева сверху —
   правый верх у YouTube занят своими кнопками, левый низ у <video> — таймлайном. */
.rolik .zvuk{position:absolute; left:10px; top:10px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 13px; border:1px solid var(--gran); border-radius:var(--r-pilyuli);
  background:rgba(7,6,5,.7); backdrop-filter:blur(6px); color:var(--tekst); font:inherit;
  font-size:var(--kegl-pilyuli); font-weight:600; cursor:pointer}
.rolik .zvuk svg{width:var(--znak-m); height:var(--znak-m); fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.rolik .zvuk[aria-pressed="false"] svg{opacity:.55}
.rolik .zvuk[aria-pressed="true"]{border-color:var(--akcent); color:var(--akcent)}
.rolik > .telo{z-index:2; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--gran);
  background:rgba(16,13,10,.92); backdrop-filter:blur(16px) saturate(150%)}
/* строка ответа: поле и «Ответить» в одну линию, обе высотой в кнопку канона */
.rolik .otvet-stroka{display:flex; gap:8px; align-items:center; width:100%; max-width:420px}
.rolik .otvet-stroka .pole{flex:1 1 auto; min-width:0}
.rolik .otvet-stroka .pole input{height:var(--knopka-vys); padding:0 12px}
.rolik .otvet-stroka .deystviya{flex:0 0 auto}
/* Вертикальная лента как TikTok (Кай 26.08): ролик во весь экран, следующий — свайпом вверх,
   вопрос автора — лист снизу. На компьютере остаётся список карточек. */
@media (max-width:999px){
  /* Высота ленты — ОСТАТОК экрана под её шапкой, а не «экран минус 150 px на глаз»: над лентой
     стоят заголовок и плашки чисел, и вычитание постоянной уводило поле ответа с кнопкой под
     нижнюю панель — человек видел ролик и не видел, что с ним делать (замер 05.09: оба
     элемента ниже панели). Теперь раздел — колонка во всю высоту, лента забирает остаток. */
  #ekran-smotret{display:flex; flex-direction:column; min-height:0}
  /* лента забирает остаток, всё остальное — по содержимому. Правило по id перебивало
     класс по специфичности, и кадр ролика сплющивался в полосу (снимок 05.09). */
  #ekran-smotret > *:not(#ochered){flex:0 0 auto}
  /* 06.09 (канон §2.4): свои ролики и лидеры — блоки под лентой, а не свёрнутые узлы; лента
     больше не «остаток колонки» (остатка при блоках не было — 0 px), а высота экрана минус
     шапка, кружки и плашка обмена. Блоки ниже читаются прокруткой страницы. */
  /* 07.09 (слово Кая, снимок 18:13): высота ленты считается от ВИДИМОЙ высоты окна
     (--tg-vidno, safeNiz в app.js), а не от 100dvh — в Telegram dvh = весь webview 844,
     видно 664, и карточка на 180 px уезжала под сгиб вместе с полем и «Ответить».
     Постоянных «минус 214 на шапку» и min-height здесь тоже нет: карточка ровно в окно
     минус полоса разделов, к верхним блокам человек доезжает прокруткой страницы. */
  #ekran-smotret > #ochered{flex:none;
    height:calc(var(--tg-vidno, 100dvh) - var(--verh) - 8px - var(--safe-top,0px) - 72px - env(safe-area-inset-bottom))}
  /* карточка паркуется ПОД верхней полосой кнопок, а не под ней: без scroll-margin «дальше»
     и номер «2 из 19» приезжали ровно под шапку (снимок 07.09). */
  .lenta-vert .rolik{scroll-margin-top:calc(var(--verh) + 8px + var(--safe-top,0px))}
  /* overscroll-behavior НЕ contain (Кай 07.09): палец на ленте крутил только её, и на
     краю прокрутка не передавалась странице — верхние блоки и блоки под лентой были
     недостижимы вовсе («страница не прокручивается дальше»). auto возвращает сцепку. */
  .lenta-vert{height:auto; overflow-y:auto; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior:auto; border-radius:16px; scrollbar-width:none; margin:0 -16px 12px}
  .lenta-vert::-webkit-scrollbar{display:none}
  .lenta-vert .pusto{scroll-snap-align:start; scroll-snap-stop:always; height:100%; margin:0; border:0; border-radius:0; position:relative; background:#000; display:block}
  /* ролик — две строки: кадр забирает остаток, плашка вопроса стоит под ним (Кай 07.09) */
  .lenta-vert .rolik{scroll-snap-align:start; scroll-snap-stop:always; height:100%; margin:0; border:0; border-radius:0; position:relative; background:#000; display:grid; grid-template-rows:minmax(0,1fr) auto}
  /* Ролик держит 9:16 ВНУТРИ доступной высоты: ширину задаёт высота, а не наоборот.
     По ширине карточки 9:16 давало ~800 px — выше всего окна (замер 07.09). По бокам уголь. */
  .lenta-vert .rolik .kadr-zona{
    aspect-ratio:9/16; height:100%; width:auto; max-width:100%; min-height:0; justify-self:center}
  .lenta-vert .rolik .pleer, .lenta-vert .rolik .kadr-ssylka{height:100%; width:100%; aspect-ratio:auto; max-height:none}   /* общий .pleer режет 70vh — тут размер даёт зона */
  .lenta-vert .rolik .pleer iframe{height:100%}
  /* плашка вопроса: одна строка вопроса + строка ответа, высота ≤110 px (прибор Ленты) */
  .lenta-vert .rolik .telo{gap:6px}
  .lenta-vert .rolik .vopros{font-size:var(--kegl-stroki); margin-top:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  /* Строка «1 из 19 · @автор» видна ИМЕННО здесь (Кай 08.09): раньше она пряталась,
     а номер висел пилюлей на кнопках плеера. Место ей стоило две строки вопроса. */
  .lenta-vert .rolik .kadr-ssylka .plosh{display:none}
  .lenta-vert .rolik .deystviya{margin-top:0}
}
/* Лидеры недели: строки как таблица роста — место · маска · досмотров зелёным; своя подсвечена */
.lider{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 4px; border-bottom:1px solid var(--gran)}
.lider i{font-style:normal; font-family:var(--mono); color:var(--tekst2); font-size:var(--kegl-podpisi)}
.lider:nth-child(-n+3) i{color:var(--akcent)} .lider b{font-weight:600; font-size:var(--kegl-stroki); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lider span{font-family:var(--mono); color:var(--rost); font-weight:600; font-variant-numeric:tabular-nums}
.lider[data-ya]{background:rgba(255,138,43,.07); border-radius:10px; box-shadow:inset 0 0 0 1px rgba(255,138,43,.35)}
.lider[data-ya] b::after{content:" · ты"; color:var(--akcent); font-weight:500}
.rolik{background:var(--sloy); border:1px solid var(--gran); border-radius:18px; overflow:hidden; margin-bottom:14px; padding:0}
.rolik .kadr{display:block} .rolik .telo{padding:12px 14px 14px} .rolik .vopros{font-weight:650; font-size:var(--kegl-zagolovka); line-height:1.3}
/* ТЗ Кая 04.09 (D3): текстовые плашки по центру, шаг между ними один и тот же. Раньше
   вопрос, поле и кнопка стояли по левому краю с разными отступами (снимок 390, 05.09). */
.rolik .telo{display:grid; justify-items:center; gap:8px; text-align:center}
.rolik .telo > *{margin:0 !important; width:100%; max-width:420px}   /* свои отступы у поля и кнопок делали шаг рваным: 18 · 12 · 22 (замер 05.09) */
/* Строка под кадром: номер, автор и два органа, которым нельзя лежать на кадре, —
   «на весь экран» и «Открыть на площадке ↗» (Кай 08.09). */
/* Номер и автор — по центру, как все плашки карточки (канон D3, 04.09), поэтому органы
   строки прибиты к её правому краю, а не встают текстом в ряд: иначе центрируется «текст
   плюс иконка», и сам текст уезжает влево (замер прибора 08.09: 179 px при центре 195). */
.rolik .avtor-stroka{position:relative; display:block; text-align:center;
  font-family:var(--mono); font-size:var(--kegl-podpisi); color:var(--tekst2); letter-spacing:.02em}
.rolik .avtor-stroka .ves-kadr{position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  padding:0; background:none; border:0; border-radius:6px; color:var(--tekst2); cursor:pointer}
.rolik .avtor-stroka .ves-kadr svg{width:var(--znak-m); height:var(--znak-m); fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.rolik .avtor-stroka .na-ploshchadku{position:absolute; right:0; top:50%; transform:translateY(-50%);
  color:var(--akcent); text-decoration:none; font-size:var(--kegl-podpisi)}
.rolik .telo .pole input{text-align:center}
.rolik .telo .deystviya{display:flex; justify-content:center}
.pleer{position:relative; aspect-ratio:9/16; max-height:70vh; background:#000} .pleer iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
/* Ролик с нашей фабрики играет своим <video> на всю карточку. «На весь экран» с кадра
   снято (Кай 08.09) — оно ушло иконкой в строку под кадром, к номеру и автору. */
.pleer video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000}
.kadr-ssylka{display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; aspect-ratio:16/9; background:linear-gradient(160deg,#161210,#0B0907); text-decoration:none}
.kadr-ssylka .skorost{position:static} .rolik .kadr-ssylka{display:flex}
.kadr-ssylka .plosh{color:var(--tekst); font-weight:650; font-size:var(--kegl-zagolovka)}
.rolik a{color:var(--tekst); font-weight:600; word-break:break-all}
.rolik .vopros{color:var(--tekst2); margin-top:6px}

/* Домашний экран Фабрики (Кай 01.09, каркас CapCut): большая «Новый ролик», под ней ролики плиткой —
   кадр 9:16, длительность в углу, имя и дата. Открытая плитка растягивается на ряд и показывает
   плеер с кнопками; строк с абзацами и ссылками здесь нет. */
.novyy-rolik{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:12px; width:100%; margin:4px 0 14px; padding:10px 14px; border:1px solid var(--gran); border-radius:18px; background:var(--sloy); color:var(--tekst); font:inherit; text-align:left; cursor:pointer; transition:border-color .16s}
/* «Фабрика», заказ шторкой (Higgsfield 03.09): панель заказа читается как шторка,
   поднятая от нижнего края — своя ступень слоя, скруглённый верх, ручка. Слайд-механика
   (scroll-snap, selfcheck_slaydy.py) не тронута: это только материя. */
@media (max-width:1099px){
  #ekran-rabota .fab-shtorka{background:var(--sloy2,var(--sloy)); border-radius:var(--r-postera,22px) var(--r-postera,22px) 0 0;
    padding:10px var(--pole,16px) 0; margin-top:-6px; position:relative}
  #ekran-rabota .fab-shtorka::before{content:""; display:block; width:36px; height:4px; border-radius:999px;
    background:var(--gran2,var(--gran)); margin:0 auto 8px}
}
.novyy-rolik:hover{border-color:var(--akcent)}
.novyy-rolik svg{grid-row:1/3; width:38px; height:38px; padding:10px; border-radius:50%; background:var(--akcent); color:#1A0E04; fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round}
.novyy-rolik span, .novyy-rolik small{grid-column:2}
.novyy-rolik span{font-family:var(--shrift); font-size:var(--kegl-zagolovka); font-weight:700; letter-spacing:-.02em; line-height:1.1}
.novyy-rolik small{display:block; font-size:var(--kegl-podpisi); color:var(--tekst2); margin-top:3px}
.roliki-shapka{display:flex; align-items:baseline; justify-content:center; gap:8px; margin:0 0 12px}
.roliki-shapka b{font-size:var(--kegl-zagolovka)} .roliki-shapka span{font-family:var(--mono); font-size:var(--kegl-podpisi); color:var(--tekst2); font-variant-numeric:tabular-nums}
/* ТЗ Кая 04.09 (F1 + E8): ролики отцентрированы относительно кнопок, и показываются они
   не только списком. Сетка на grid неполный ряд центровать не умеет: дорожки объявлены
   как 1fr, они занимают всю ширину сами, и `justify-content:center` на них не делал
   НИЧЕГО — одна плитка так и прижималась к левому краю под кнопкой во всю ширину
   (замер 05.09). Поэтому ряд плиток теперь flex: неполный ряд встаёт по центру той же
   оси, что «Новый ролик» и переключатель вида, а число колонок держит одна переменная
   --kol. Три вида отличаются только ею, и потому отличаются на глаз, а не только
   подсветкой кнопки. */
.plitki{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:12px 10px; --kol:2; margin-top:calc(var(--shag)*2)}
.plitki > *{flex:0 0 calc((100% - (var(--kol) - 1) * 10px) / var(--kol)); min-width:0}
/* «Крупно» на Фабрике значит то же, что на Находках: самый крупный кадр раздела, а «мелко» —
   ровно вдвое плотнее. До решения Кая 05.09 здесь стояло 3 и 4 (на ≥700 — 5 и 8): одно слово
   давало 1 колонку в одном разделе и 3 в другом, и разница между видами не читалась. */
.plitki[data-vid="melko"]{--kol:4}
.plitki[data-vid="spisok"]{--kol:1}
.plitki[data-vid="melko"] .imya-z{font-size:var(--kegl-podpisi)}
.plitki[data-vid="melko"] .kogda{display:none}
@media (min-width:700px){ .plitki{--kol:3} .plitki[data-vid="melko"]{--kol:6} }
.plitki .pusto, .plitki .zadacha[data-otkryt]{flex-basis:100%}
/* Корзина (Кай 06.09). Кнопка на хабе — тихая (§4.7): фон прозрачный, кант --gran2,
   текст --tekst2, свечение принадлежит главному действию и сюда не приходит. Счёт
   «N за 7 дней» — моно, tabular-nums: это число-измерение. */
.korzina-knopka{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:var(--knopka-vys); margin-top:var(--v5); padding:0 16px; border:1px solid var(--gran2);
  border-radius:999px; background:transparent; color:var(--tekst2); font:inherit;
  font-size:var(--kegl-stroki); cursor:pointer; transition:border-color .16s, color .16s}
.korzina-knopka:hover{border-color:var(--akcent)}
.korzina-knopka:active{transform:scale(.97)}
.korzina-knopka svg{width:var(--znak-m); height:var(--znak-m); flex:0 0 auto}
/* «2 за 7 дней» — фраза, а не столбец чисел: моно здесь было бы костюмом
   «технологичности» (комплект §3, тот же случай, что «1 из 5 готов»). */
.korzina-knopka small{font-size:var(--kegl-podpisi); font-variant-numeric:tabular-nums; color:var(--tekst3)}
.korzina-knopka small[hidden]{display:none}
/* Срок жизни на плитке корзины — не дата, а единственное, что говорит, сколько осталось:
   вид «мелко» прячет .kogda у сборок, здесь она обязана остаться. */
#korzina .zadacha .kogda{display:block !important; color:var(--tekst3)}
#korzina .zadacha [data-vernut]{width:100%; margin-top:6px; min-height:38px}
#ekran-rabota[data-str="8"] .f-niz{display:none}   /* корзина — не шаг: вести отсюда «Дальше» некуда */
#forma-zakaz > p{margin-top:28px}   /* на компьютере форма идёт следом за плитками — отступ, чтобы конвейер читался своим блоком */
.zadacha{min-width:0}
.zadacha .stroka-z{display:block; width:100%; padding:0; background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; border-radius:12px}
.zadacha .kadr-z{position:relative; display:block; aspect-ratio:9/16; border-radius:12px; overflow:hidden; background:var(--sloy); border:1px solid var(--gran); transition:border-color .16s}
.zadacha .stroka-z:hover .kadr-z{border-color:var(--akcent)}
.zadacha .kadr-z img{width:100%; height:100%; object-fit:cover; display:block}
.zadacha .kadr-z .pusto-kadr{position:absolute; inset:0; display:grid; place-items:center; color:var(--tekst2)}
.zadacha .kadr-z .pusto-kadr svg{width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.zadacha .dlit{position:absolute; right:6px; bottom:6px; font-family:var(--mono); font-size:var(--kegl-podpisi); font-variant-numeric:tabular-nums; color:#fff; background:rgba(7,6,5,.72); padding:2px 6px; border-radius:6px}
.zadacha .sostoyanie{position:absolute; left:6px; top:6px; font-size:var(--kegl-podpisi); font-weight:600; padding:3px 7px; border-radius:6px; background:rgba(7,6,5,.72); color:var(--tekst2)}
.zadacha .sostoyanie[data-s="done"]{display:none}   /* готовый ролик говорит сам за себя — кадром; подпись нужна только пока идёт или упало */
.zadacha .sostoyanie[data-s="working"], .zadacha .sostoyanie[data-s="pravka"]{color:var(--akcent)}
.zadacha .sostoyanie[data-s="failed"]{color:var(--signal)}
.zadacha .imya-z{display:block; font-weight:600; font-size:var(--kegl-podpisi); line-height:1.25; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zadacha .kogda{display:block; font-size:var(--kegl-podpisi); color:var(--tekst2); margin-top:2px; font-variant-numeric:tabular-nums}
.zadacha.tekushchaya .kadr-z{border-color:var(--akcent)}
/* Вид «список» — та же строка, что у раскрытой плитки: кадр слева, имя и дата справа.
   Второй вёрстки для одного и того же ряда не заводим. */
.plitki[data-vid="spisok"] .zadacha .stroka-z,
.zadacha[data-otkryt] .stroka-z{display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:12px; align-items:center}
.plitki[data-vid="spisok"] .zadacha .imya-z,
.zadacha[data-otkryt] .imya-z{font-size:var(--kegl-tekst); margin-top:0}
.plitki[data-vid="spisok"] .zadacha .kogda, .zadacha[data-otkryt] .kogda{grid-column:2}
/* В списке кадр меньше, чем у раскрытой карточки: вертикаль 9:16 на 64 px тянула строку
   до 114 px, и между именем и датой зияла дыра (снимок fabrika-390-spisok 05.09). */
.plitki[data-vid="spisok"] .zadacha .stroka-z{grid-template-columns:44px minmax(0,1fr)}
.plitki[data-vid="spisok"] .zadacha .imya-z{font-size:var(--kegl-tekst)}
/* Кадр в списке — квадратный: вертикаль 9:16 делала строку выше двух строк текста, и имя
   с датой разъезжались по краям пустоты. Квадрат 44 px ровно под две строки. */
.plitki[data-vid="spisok"] .zadacha .kadr-z{aspect-ratio:1/1}
.zadacha .telo-z{display:none; padding:10px 0 6px}
.zadacha[data-otkryt] .telo-z{display:block}
.zadacha .telo-z video{width:100%; max-height:52vh; border-radius:12px; background:#000; display:block; margin-bottom:12px}
.zadacha .telo-z .deystviya{margin-top:0; gap:8px}
.zadacha .prichina{color:var(--signal); font-size:var(--kegl-stroki); margin-bottom:10px}

/* Нижняя навигация: подписи словами, без иконок-эмодзи.
   Стеклянного слоя больше нет (craft-floor, внедрение 03.09): backdrop-filter в этом мире
   не применяется — полоса непрозрачна, содержимое под неё не просвечивает и не смешивается. */
nav{
  /* bottom не 0, а --tg-niz (JS, safeNiz): в Telegram Mini App на iPhone layout viewport выше
     видимой части, и «низ окна» для fixed — не тот низ, который видит человек. Вне Telegram
     переменная равна 0px и правило совпадает с прежним. */
  position:fixed; left:0; right:0; bottom:var(--tg-niz,0px);
  /* Свой слой композитора: WebKit на iPhone не перерисовывает fixed-полосу при прокрутке
     длинной страницы и оставляет её отпечаток посреди содержимого (снимок Кая 07.09). */
  will-change:transform; transform:translateZ(0);
  /* z-index 30: в WebKit (iPhone Ильи, «уменьшение движения») карточка находки без transform
     рисовалась поверх полосы разделов — нажатия уходили в карточку, разделы не открывались (07.09).
     Ниже верхней зоны (40) и всех слоёв поверх (50+). */
  z-index:30;
  background:var(--fon); border-top:1px solid var(--gran);
  padding-bottom:env(safe-area-inset-bottom);
}
nav .ryad{
  /* на широком экране навигация держит ту же колонку, что и содержимое:
     на снимке 1440 кнопки разъезжались к краям и теряли связь с текстом */
  /* minmax(0,1fr): с голым 1fr колонка растёт под длинную подпись («Куратор» шире «Я»),
     и плитки выходили разной ширины — пилюля на «Я» уже, чем на «Куратор» (Кай 03.09) */
  position:relative; max-width:760px; margin:0 auto; display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  padding:10px 12px;
}
/* Полоса идёт за колонкой контента: на широком экране разделы должны стоять над текстом,
   а не разъезжаться по краям монитора */
@media (min-width:1000px){ nav .ryad{max-width:1040px} }
@media (min-width:1400px){ nav .ryad{max-width:1240px} }
/* Компьютер — рабочий кабинет биржи, а не растянутый телефон (Кай, 25.08):
   разделы стоят слева столбцом и всегда на виду, рабочая область занимает остальное.
   --bokom читает JS: пилюля в этой раскладке едет по вертикали. */
@media (min-width:1100px){
  nav{--bokom:1; top:0; bottom:auto; right:auto; width:216px; height:100vh; height:100dvh;
      border-top:0; border-right:1px solid var(--gran); padding:18px 10px}
  nav .ryad{grid-template-columns:1fr; grid-auto-rows:min-content; gap:4px; max-width:none;
            padding:0; align-content:start}
  nav button{font-size:var(--kegl-tekst); text-align:left; padding:12px 14px; white-space:nowrap}
  nav .polzunok{top:0; left:0}
  .obolochka{margin-left:216px; max-width:calc(100vw - 216px - 40px)}
  main{padding-bottom:40px}
}
@media (min-width:1400px){
  .obolochka{max-width:1240px; margin-left:216px; margin-right:auto}
}
/* Пилюля-подложка под активным разделом: одна на всю навигацию, едет к нажатому пункту.
   Двигаем transform'ом, а не left/width — это не заставляет браузер пересчитывать раскладку. */
nav .polzunok{
  position:absolute; left:0; top:10px; height:calc(100% - 20px); width:0;
  border-radius:999px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,138,43,.22), rgba(255,138,43,.10));
  box-shadow:inset 0 0 0 1px rgba(255,138,43,.35);   /* только обводка: цветной ореол — шаблон категории, детектор его и ловит */
  transform:translateX(0); opacity:0;
  transition:transform .34s cubic-bezier(.16,1,.3,1), width .34s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
nav .polzunok[data-vidno]{opacity:1}
/* Иконка над подписью, как в нативной панели (референс Upscale, Кай 26.08). Иконки — свой SVG
   одной толщиной штриха 1.7, не эмодзи и не библиотека: семь знаков должны читаться в 22 px. */
nav button{
  position:relative; z-index:1;
  background:none; border:0; color:var(--tekst2); font:inherit; font-size:var(--kegl-podpisi); letter-spacing:-0.01em;
  font-weight:600; padding:6px 2px 4px; cursor:pointer; border-radius:14px; min-width:0;
  white-space:nowrap;                 /* семь разделов: подпись переносить нельзя, полоса поедет */
  display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1;
  transition:color .2s ease;
}
nav button svg{width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
/* Подпись видна у активного раздела (макет «Общее», принят Каем 03.09): места под подпись
   держится столько же — visibility, а не display, поэтому полоса не дёргается при переходе,
   а экранный диктор и поиск по странице читают все семь имён. Кнопка не пропала: она на месте,
   нажимается и подписана иконкой. */
nav button span{visibility:hidden}
nav button[aria-current="page"] span{visibility:visible}
nav button[aria-current="page"] svg{filter:drop-shadow(0 0 8px rgba(255,138,43,.55))}
@media (min-width:520px){ nav button{font-size:var(--kegl-podpisi); padding:8px 6px 6px} }
@media (min-width:1100px){
  nav button{flex-direction:row; gap:12px; font-size:var(--kegl-tekst)}
  nav button svg{width:22px; height:22px}
  /* На компьютере разделы стоят столбцом и подписаны все: там подпись не отнимает ширину */
  nav button span{visibility:visible}
}
nav .polzunok{border-radius:14px}
@media (min-width:1100px){ nav .polzunok{border-radius:12px} }
nav button[aria-current="page"]{color:var(--akcent)}
/* Пока открыта клавиатура, полоса разделов уезжает вниз: она всё равно под клавиатурой,
   а её высота съедает последние строки формы */
nav[data-spryatan]{transform:translateY(110%); transition:transform .2s ease}
body[data-klaviatura] main{padding-bottom:16px}
@media (prefers-reduced-motion: reduce){ nav .polzunok{transition:opacity .2s ease} }
/* ═══ Слайды и бургер (мандат Кая 27.08) ═══
   Экран листается не вниз, а вбок: один шаг в кадре, палец ведёт вправо. Вниз остаются
   только «Находки» и «Лента» — там лента, её поперёк не режут. Прыжок в дальний раздел —
   бургером: слайдами до седьмого экрана листать долго, и одно другому не мешает. */
.slayd{display:contents}   /* компьютер: раскладка ровно та, что была до слайдов */
@media (max-width:1099px){
  /* Полоса-стопка: слайды едут нативным scroll-snap браузера, а не пересчётом на JS —
     инерция, отскок и доводка уже написаны в движке и работают одинаково в WebView. */
  main > section[data-slaydy]{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
    margin-left:calc(-1*var(--pole)); margin-right:calc(-1*var(--pole));
    /* ровно столько, сколько остаётся между отступом main сверху и полосой разделов снизу:
       если height не сойдётся с ними, страница поедет вниз на эти самые пиксели */
    /* Высота — от ВИДИМОЙ высоты окна (--tg-vidno, safeNiz в app.js), а не от 100dvh: тот же
       урок, что и у ленты (строка «#ekran-smotret > #ochered»). В Telegram на iPhone dvh —
       весь webview (844), а видно 664; слайд кончался на 180 px ниже глаз, и нижняя полоса
       мастера, липнущая к низу СВОЕГО слайда, уезжала вместе с ним (снимок Кая 07.09,
       страница «Язык и голос»). С --tg-vidno низ слайда совпадает с верхом полосы разделов,
       и панель стоит на месте на каждой из шести страниц. Правило М8 прибора меряет это
       и в окне Telegram (--tg-vidno 664 при 844), а не только вне его. */
    height:calc(100vh - var(--verh) - 72px - env(safe-area-inset-bottom)); height:calc(var(--tg-vidno, 100dvh) - var(--verh) - 72px - env(safe-area-inset-bottom));
  }
  main > section[data-slaydy]::-webkit-scrollbar{display:none}
  section[data-slaydy] > .slayd{
    display:block; flex:0 0 100%; min-width:100%; scroll-snap-align:start; scroll-snap-stop:always;
    padding:0 var(--pole) 30px; scrollbar-width:none;   /* низ слайда не уезжает под точки и полосу разделов */
    /* ponytail: клапан на переполнение — календарь, чат и список из одиннадцати уроков
       в 844 px не влезают ничем. Режем дальше по слайдам, когда Кай скажет, где резать. */
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  section[data-slaydy] > .slayd::-webkit-scrollbar{display:none}
  section[data-slaydy] > .slayd > h1{margin-top:6px}
}
/* Точки слайдов: без них человек не знает, что вбок есть ещё. Живут над полосой разделов
   и показывают положение внутри экрана, а не количество экранов. */
.slayd-tochki{position:fixed; left:0; right:0; bottom:calc(78px + env(safe-area-inset-bottom));
  z-index:20; display:flex; gap:6px; justify-content:center; pointer-events:none}
.slayd-tochki i{width:16px; height:16px; border-radius:50%; background:var(--gran); transition:background .2s, width .2s}
.slayd-tochki i[data-tut]{background:var(--akcent); width:18px; border-radius:999px}
@media (min-width:1100px){ .slayd-tochki{display:none} }
/* Бургер — прыжок в любой раздел одним касанием. На компьютере его нет: там разделы
   и так стоят слева столбцом, вторая дверь в то же место только путает. */
.burger{position:fixed; z-index:41; top:calc(7px + var(--safe-top,0px)); right:12px;
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center; cursor:pointer;
  background:rgba(11,9,7,.62); border:1px solid var(--gran); color:var(--tekst);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.burger svg{width:var(--znak-sh); height:var(--znak-sh); fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round}
.burger[aria-expanded="true"]{border-color:var(--akcent); color:var(--akcent)}
@media (min-width:1100px){ .burger, .menyu{display:none !important} }
/* «Обновить» (Кай 01.09: «не вижу, как перезагрузить»). Одна кнопка на всё приложение, не в каждом
   разделе: разделы — это секции одной страницы, шапки у них нет. Рядом с бургером, тот же материал. */
.nazad-app{position:fixed; z-index:41; top:calc(7px + var(--safe-top,0px)); left:12px;
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center; cursor:pointer;
  background:rgba(11,9,7,.62); border:1px solid var(--gran); color:var(--tekst);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.nazad-app svg{width:var(--znak-sh); height:var(--znak-sh); fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.nazad-app:hover{color:var(--akcent); border-color:var(--akcent)}
.nazad-app[hidden]{display:none}
html[data-redaktor] .nazad-app{display:none !important}   /* в редакторе назад — это ✕ в его шапке, второй такой же кнопки не нужно */
.obnovit{position:fixed; z-index:41; top:calc(7px + var(--safe-top,0px)); right:60px;
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center; cursor:pointer;
  background:rgba(11,9,7,.62); border:1px solid var(--gran); color:var(--tekst);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.obnovit svg{width:var(--znak-sh); height:var(--znak-sh); fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round}
.obnovit:hover{color:var(--akcent); border-color:var(--akcent)}
.obnovit.krutitsya svg{animation:obnovit-krug .8s linear infinite}
@keyframes obnovit-krug{to{transform:rotate(360deg)}}
@media (min-width:1100px){ .obnovit{right:12px} .nazad-app{left:auto; right:62px} }
html[data-redaktor] .obnovit{display:none !important}
.menyu{position:fixed; inset:0; z-index:40; overflow-y:auto;
  background:rgba(7,6,5,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  padding:calc(64px + var(--safe-top,0px)) 16px calc(20px + env(safe-area-inset-bottom))}
.menyu-list{display:grid; gap:0; max-width:520px; margin:0 auto}
  .menyu-list button{display:grid; align-items:center;
  text-align:left; color:var(--tekst); font:inherit; cursor:pointer}
.menyu-list button svg{width:var(--znak); height:var(--znak); padding:0; border:0; background:none;
  border-radius:0; fill:none; stroke:var(--akcent); stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.menyu-list button b{display:block; font-size:var(--kegl-zagolovka); font-weight:650}
.menyu-list button small{display:block; color:var(--tekst2); font-size:var(--kegl-podpisi); margin-top:2px}
.menyu-list button[aria-current="page"]{border-color:var(--akcent)}
.menyu-list button[aria-current="page"] b{color:var(--akcent)}
.perekl{display:inline-flex;cursor:pointer} .perekl input{position:absolute;opacity:0;width:0;height:0}
.perekl i{width:40px;height:24px;border-radius:999px;background:var(--gran);position:relative;transition:background .2s}
.perekl i::after{content:"";position:absolute;top:3px;left:3px;width:16px; height:16px;border-radius:50%;background:var(--tekst2);transition:transform .2s,background .2s}
.perekl input:checked + i{background:rgba(255,138,43,.35)} .perekl input:checked + i::after{transform:translateX(16px);background:var(--akcent)}
.perekl input:focus-visible + i{outline:2px solid var(--akcent);outline-offset:2px}
/* Редактор смысла — отдельный экран, в который заходят (§7 ТЗ 01.09, каркас CapCut): ✕ слева,
   «Собрать» справа, превью крупно, дорожка кадрами донора с ролью кантом, лента «иконка над подписью»
   сразу под таймлайном, нижней навигации приложения нет. Предмет правки — роль и строка, не клип:
   эффектов, скорости и слоёв здесь нет (решение Кая). Мир свой: ночь и янтарь, не бирюза CapCut. */
.struktura{position:fixed;inset:0;z-index:45;background:var(--fon);display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto auto auto;row-gap:6px;
  padding:calc(4px + var(--safe-top,0px)) 0 calc(6px + env(safe-area-inset-bottom))}
.struktura[hidden]{display:none}
html[data-redaktor]{overflow:hidden}
html[data-redaktor] nav, html[data-redaktor] .burger, html[data-redaktor] .slayd-tochki{display:none !important}
.tl-shapka{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:0 12px 0 4px}
.tl-shapka .eksport-red{width:40px;height:40px;border:0;background:transparent;color:var(--tekst2);display:grid;place-items:center;cursor:pointer;border-radius:12px;transition:background .16s,color .16s}
.tl-shapka .eksport-red:hover,.tl-shapka .eksport-red[aria-pressed=true]{background:var(--sloy);color:var(--tekst)}
.tl-shapka .eksport-red svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:var(--znak-tolshchina);stroke-linecap:round;stroke-linejoin:round}
.tl-shapka .zakryt-red{width:44px;height:44px;border:0;background:transparent;color:var(--tekst);display:grid;place-items:center;cursor:pointer;border-radius:12px;transition:background .16s}
.tl-shapka .zakryt-red:hover{background:var(--sloy)}
.tl-shapka .zakryt-red svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:var(--znak-tolshchina);stroke-linecap:round}
.tl-shapka .imya-red{font-size:var(--kegl-stroki);color:var(--tekst2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.tl-shapka .sobrat-red{padding:8px 14px;font-size:var(--kegl-stroki)}
.tl-prevyu{display:flex;justify-content:center;min-height:45vh;padding:0 12px}
.tl-kadr{position:relative;aspect-ratio:9/16;height:100%;max-width:100%;border-radius:12px;overflow:hidden;background:#000;user-select:none;cursor:pointer}
/* подложка под субтитром — читаемость белого на любом кадре, не украшение */
.tl-kadr::after{content:"";position:absolute;inset:auto 0 0;height:70%;background:linear-gradient(to top,rgba(7,6,5,.78),transparent);pointer-events:none}
.tl-kadr .kadr-donora{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.tl-kadr video.kadr-donora{background:#000;opacity:1}
/* живой кадр закрывает миниатюру целиком: две картинки друг под другом дают призрак.
   Класс, а не :has(): он с iOS 15.4, а наша нижняя граница по CSS — iOS 14. */
.tl-kadr.zhivoy img.kadr-donora{visibility:hidden}
/* бегунок в обрезанном конце: кадр гаснет (краска — в primenitCvet), а тут метка словом */
.tl-kadr.obrezano::before{content:"обрезано";position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:5;font:600 var(--kegl-podpisi)/1 var(--shrift);color:var(--tekst2);background:rgba(7,6,5,.8);padding:5px 9px;border-radius:8px}
.tl-kadr video.kadr-donora[hidden]{display:none}
.tl-kadr .shapka{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;gap:8px;font-size:var(--kegl-podpisi);color:var(--tekst2);z-index:2}
.tl-kadr .shapka b{font-weight:500;color:var(--tekst);display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-kadr .shapka i{width:16px; height:16px;border-radius:50%;flex:none;font-style:normal}
.tl-kadr .nadpis-donora{position:absolute;left:8%;right:8%;top:22%;text-align:center;font:600 var(--kegl-tekst)/1.3 var(--shrift);color:rgba(243,237,230,.5);letter-spacing:.02em;text-transform:uppercase;z-index:2}
.tl-kadr .figura{position:absolute;bottom:0;width:38%;height:36%;z-index:2;color:var(--akcent);display:flex;align-items:flex-end}
.tl-kadr .figura svg{width:100%;height:100%;fill:rgba(255,138,43,.16);stroke:currentColor;stroke-width:var(--znak-tolshchina)}
/* настоящая фигура: кадр записи без фона стоит на низу рамки, как её ставит сборка */
.tl-kadr .figura img{width:100%;height:100%;object-fit:contain;object-position:bottom;pointer-events:none;-webkit-user-drag:none}
/* С39 (Кай 07.09): пресетов положения нет — до первой поводки фигура стоит слева внизу,
   дальше её место держит только рамка, поставленная пальцем. */
.tl-kadr .figura{left:2%}
/* Ручная рамка (Кай 01.09): человечка тянут по кадру и растягивают за уголок. */
.tl-kadr .figura[data-ramka]{left:auto;right:auto;top:auto;bottom:auto;cursor:grab;touch-action:none}
.tl-kadr .figura[data-ramka].tashchim{cursor:grabbing}
/* уголок ВНУТРИ фигуры: у холста overflow:hidden, и вынесенный наружу он обрезался,
   когда фигура стоит у края кадра — растянуть её было нечем (снимок 01.09) */
.tl-kadr .figura[data-ramka] .ugol{position:absolute;right:2px;bottom:2px;width:22px; height:22px;
  border-radius:50%;background:var(--akcent);border:2px solid var(--fon);cursor:nwse-resize;touch-action:none;
  display:grid;place-items:center}
.tl-kadr .figura[data-ramka] .ugol::before{content:"";width:16px; height:16px;border-right:2px solid #1A0E04;border-bottom:2px solid #1A0E04}
.tl-kadr .sub{position:absolute;left:8%;right:8%;bottom:40%;text-align:center;z-index:3;font:800 clamp(15px,2.2vh,19px)/1.2 var(--shrift);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7);text-wrap:balance}
.tl-kadr .sub.svoya{color:var(--rost)}
/* слово шире полосы ломается по буквам — тем же правилом, что factory._wrap: иначе на
   своём кегле 1,6 длинное слово уезжало за край кадра */
.tl-kadr .sub{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;overflow-wrap:anywhere}
.tl-kadr .sub.tashchim{cursor:grabbing;outline:2px dashed rgba(255,138,43,.7);outline-offset:4px}
/* Анимация текста — зеркало factory._plashka: вход 0,22 с, подъём 40 px от кегля 58 (≈0,7em).
   Двигаем `translate`, а не `transform`: у шаблонов «по центру» transform уже занят. */
@keyframes sub-poyavlenie{from{opacity:0}to{opacity:1}}
@keyframes sub-vsplytie{from{opacity:0;translate:0 .7em}to{opacity:1;translate:0 0}}
.tl-kadr .sub.anim-poyavlenie{animation:sub-poyavlenie .22s ease}
.tl-kadr .sub.anim-vsplytie{animation:sub-vsplytie .22s ease}
.tl-knopki .obrazec.anim-poyavlenie{animation:sub-poyavlenie 1.8s ease-in-out infinite}
.tl-knopki .obrazec.anim-vsplytie{animation:sub-vsplytie 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.tl-kadr .sub,.tl-knopki .obrazec{animation:none!important}}
/* Плитки выбора шрифта и шаблона текста: выбор видно, а не читаешь названия —
   тот же приём, что у переходов и фильтров (там превью файлом с сервера). */
.tl-knopki .obrazec{display:block;font-size:var(--kegl-cifry);line-height:1.1;margin-bottom:4px;color:var(--tekst)}
.tl-knopki .obrazec-stil{display:grid;place-items:center;width:86px;height:48px;margin-bottom:4px;border-radius:8px;background:#141210;font-size:var(--kegl-tekst);line-height:1.15;overflow:hidden;text-align:center}
.tl-knopki .obrazec-stil.kvadrat{width:38px; height:38px;border-radius:10px;font-weight:800}

/* транспорт одной строкой, как у эталона: время слева некрупно · плей по центру · отмена/повтор справа */
.tl-transport{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px 0 12px}
.tl-transport .igrat{width:40px;height:40px;border-radius:50%;border:0;background:var(--akcent);color:#1A0E04;display:grid;place-items:center;cursor:pointer;transition:transform .16s cubic-bezier(.16,1,.3,1),filter .16s}
.tl-transport .igrat:hover{filter:brightness(1.06)} .tl-transport .igrat:active{transform:scale(.96)}
.tl-transport .igrat svg{width:22px; height:22px;fill:currentColor;stroke:none}
.tl-vremya{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--kegl-podpisi);color:var(--tekst)}
.tl-vremya i{font-style:normal;color:var(--tekst2)}
.tl-otmena{display:flex;gap:2px;justify-content:end;align-items:center}
/* масштаб дорожки как в CapCut: «−», ползунок, «+» — щипок есть не у всех и не везде */
.tl-otmena .zum{font:600 var(--kegl-zagolovka)/1 var(--shrift);color:var(--tekst2);width:38px; height:38px;border-radius:9px}
.tl-otmena .zum:hover{color:var(--tekst)}
.tl-otmena input.tl-zum{width:clamp(56px,12vw,120px);margin:0 4px;accent-color:var(--akcent);cursor:pointer}
.tl-otmena button{width:38px; height:38px;border:0;border-radius:10px;background:transparent;color:var(--tekst);display:grid;place-items:center;cursor:pointer;transition:color .16s,background .16s}
.tl-otmena button:hover{background:var(--sloy)}
.tl-otmena button[disabled]{color:var(--gran);cursor:default;background:transparent}
.tl-otmena svg{width:22px; height:22px;fill:none;stroke:currentColor;stroke-width:var(--znak-tolshchina);stroke-linecap:round;stroke-linejoin:round}
/* таймлайн: головы дорожек слева, окно до правой кромки без рамки-карточки */
.tl{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px;padding-left:8px}
.tl-golovy{display:grid;grid-template-rows:22px 48px 30px 26px;gap:6px}
.tl-golovy button{border:0;background:var(--sloy);border-radius:8px;color:var(--tekst2);display:grid;place-items:center;cursor:pointer;padding:0;transition:color .16s,background .16s}
.tl-golovy button:hover{color:var(--tekst);background:var(--gran)}
.tl-golovy svg{width:16px; height:16px;fill:none;stroke:currentColor;stroke-width:var(--znak-tolshchina);stroke-linecap:round;stroke-linejoin:round}
.tl-okno{position:relative;overflow:hidden}
.tl-skroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain;cursor:grab}
.tl-skroll::-webkit-scrollbar{display:none}
.tl-polotno{position:relative;height:150px}
.tl-lineyka{position:absolute;left:0;right:0;top:0;height:22px;cursor:pointer}
.tl-lineyka i{position:absolute;top:15px;width:1px;height:5px;background:var(--gran)}
.tl-lineyka i[data-t]{top:0;height:22px;background:transparent}
.tl-lineyka i[data-t]::before{content:"";position:absolute;left:0;top:13px;width:1px;height:9px;background:var(--tekst2)}
.tl-lineyka i[data-t]::after{content:attr(data-t);position:absolute;left:4px;top:2px;font:500 var(--kegl-podpisi)/1 var(--mono);color:var(--tekst2);font-variant-numeric:tabular-nums}
.tl-doroga{position:absolute;left:0;right:0}
.struktura-lenta{top:28px;height:48px}
.tl-doroga.golos{top:88px;height:30px}
/* дорожка «Текст»: свободные надписи в кадре (паритет CapCut) — плашки той же формы, что в превью */
.tl-doroga.tekst{top:124px;height:26px}
.tl-doroga.tekst button{border-radius:6px;padding:0 8px;background:var(--sloy);color:var(--tekst);box-shadow:inset 0 0 0 1px var(--gran);font-size:var(--kegl-podpisi);overflow:hidden;text-overflow:ellipsis}
.tl-doroga.tekst button.vybran{background:var(--gran)}
.tl-kadr .nadpis{position:absolute;transform:translate(-50%,-50%);z-index:4;max-width:84%;padding:.4em .8em;border-radius:.5em;background:rgba(11,9,7,.84);color:#F2F3F5;font:800 clamp(11px,1.7vh,15px)/1.2 var(--shrift);text-align:center;text-wrap:balance;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.tl-kadr .nadpis.vybran{outline:2px solid var(--akcent);outline-offset:2px}
.tl-kadr .nadpis.tashchim{cursor:grabbing;box-shadow:0 8px 24px rgba(0,0,0,.55)}
/* дорожка структуры: кадры донора плёнкой под отрезками; роль — кант сверху и метка, текст строки — при выделении */
.tl-plyonka{position:absolute;top:0;height:100%;background-color:var(--sloy);background-repeat:repeat-x;background-size:auto 100%;border-radius:4px;overflow:hidden;pointer-events:none}
.tl-plyonka img{position:absolute;top:0;height:100%;object-fit:cover;display:block}
.tl-doroga button{position:absolute;top:0;height:100%;appearance:none;border:0;padding:0;margin:0;cursor:pointer;min-width:3px;border-radius:0;background:transparent;font:600 var(--kegl-podpisi)/1 var(--shrift-tekst);color:#fff;text-align:left;overflow:hidden;white-space:nowrap;transition:filter .16s}
.tl-doroga button:hover{filter:brightness(1.18)}
.struktura-lenta button{box-shadow:inset 0 3px 0 var(--rol,var(--gran)),inset 1px 0 0 rgba(7,6,5,.85)}
.struktura-lenta button .rol-metka{position:absolute;left:4px;top:7px;max-width:calc(100% - 8px);font:600 var(--kegl-podpisi)/1 var(--shrift-tekst);font-style:normal;color:var(--tekst);background:rgba(7,6,5,.74);padding:3px 6px;border-radius:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.struktura-lenta button .rol-metka::before{content:"";display:inline-block;width:16px; height:16px;border-radius:50%;background:var(--rol,var(--gran));margin-right:4px}
.struktura-lenta button .tekst{display:none;position:absolute;left:4px;right:4px;bottom:4px;font:500 var(--kegl-podpisi)/1.2 var(--shrift-tekst);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.struktura-lenta button.vybran .tekst{display:block}
.struktura-lenta button.slabaya{background-image:repeating-linear-gradient(135deg,rgba(7,6,5,.55) 0 4px,transparent 4px 8px)}
.tl-doroga button[data-tip=tishina],.tl-doroga button[data-tip=ekran],.tl-doroga button[data-tip=ne_chitaem],.tl-doroga button[data-tip=muzyka]{background-color:rgba(7,6,5,.55);color:var(--tekst2)}
.tl-doroga button[data-tip=ne_chitaem] .rol-metka{text-decoration:line-through}
.tl-doroga button.pod-begunkom{filter:brightness(1.22)}
.tl-doroga button.vybran{outline:2px solid var(--tekst);outline-offset:-2px;z-index:2}
.tl-doroga.golos button{border-radius:6px;padding:0 8px;overflow:hidden;text-overflow:ellipsis}
.tl-doroga.golos .zapis{position:absolute;top:0;height:100%;background:rgba(255,138,43,.12);border:1px dashed rgba(255,138,43,.45);border-radius:6px;padding:0 8px;font:500 var(--kegl-podpisi)/28px var(--shrift-tekst);color:var(--tekst2);white-space:nowrap;overflow:hidden;pointer-events:none}
.tl-doroga.golos .svoya{background:var(--rost);color:#0B2A17}
.tl-doroga.golos .metka{width:3px;min-width:3px;padding:0;background:var(--akcent);border-radius:2px;font-size:0}
.tl-doroga.golos .pusto-golos,.tl-doroga.tekst .pusto-golos{position:absolute;top:0;height:100%;display:flex;align-items:center;padding:0 10px;font-size:var(--kegl-podpisi);color:var(--tekst2);pointer-events:none;white-space:nowrap}
.tl-doroga .plyus{width:30px;min-width:30px;padding:0;border-radius:8px;background:var(--tekst);color:#1A0E04;display:grid;place-items:center}
.tl-doroga .plyus svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:var(--znak-tolshchina);stroke-linecap:round}
.tl-obrez{position:absolute;top:24px;bottom:0;background:repeating-linear-gradient(45deg,rgba(7,6,5,.82) 0 6px,rgba(7,6,5,.6) 6px 12px);pointer-events:none;z-index:2;border-radius:6px}
.tl-doroga button.ruchka{box-shadow:inset 0 3px 0 var(--rol,var(--gran)),inset 0 -3px 0 var(--tekst)}   /* клиент задал громкость или фигуру сам */
.struktura-lenta button.udalen .rol-metka{text-decoration:line-through;color:var(--tekst2)}   /* отрезок удалён из ролика — под штриховкой, как обрез */
/* перестановка перетаскиванием (CapCut: долгое нажатие → тянуть): поднятый кусок, метка места */
.struktura-lenta button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.struktura-lenta button.tashchim{opacity:.6;transform:translateY(-3px) scale(1.02);z-index:4;box-shadow:0 8px 20px rgba(0,0,0,.55),inset 0 3px 0 var(--rol,var(--gran));transition:transform .16s cubic-bezier(.16,1,.3,1),opacity .16s}
.struktura-lenta .tl-vstavka{position:absolute;top:-5px;bottom:-5px;width:3px;margin-left:-1px;background:var(--akcent);border-radius:2px;z-index:5;pointer-events:none;box-shadow:0 0 0 1px rgba(7,6,5,.85)}
.tl-doroga button[data-tip=stop]{background-color:rgba(232,213,181,.14)}
.tl-doroga button[data-tip=stop] .rol-metka::before{border-radius:1px}   /* квадрат, не точка: кадр стоит */
.struktura-lenta button.rev{background-image:repeating-linear-gradient(-45deg,rgba(7,6,5,.28) 0 3px,transparent 3px 9px)}
.tl-begunok{position:absolute;left:var(--begunok,50%);top:0;bottom:0;width:2px;margin-left:-1px;background:var(--tekst);pointer-events:none;z-index:3;border-radius:2px}
/* разбор структуры — одна тонкая строка над лентой; длинная тянется вбок, а не ломается абзацем */
.struktura-razbor{margin:0;padding:0 14px;font-size:var(--kegl-podpisi);line-height:1.4;color:var(--tekst2);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.struktura-razbor::-webkit-scrollbar{display:none}
.struktura-razbor b{color:var(--tekst);font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
/* лента действий: иконка над подписью ровным рядом, прилипает к таймлайну, тянется вбок без обрезания */
.tl-deystviya{display:grid;gap:2px;min-height:78px;align-content:end}
.tl-deystviya .chto{font-size:var(--kegl-podpisi);line-height:1.4;color:var(--tekst2);padding:0 14px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.tl-deystviya .chto::-webkit-scrollbar{display:none}
.tl-deystviya .chto b{color:var(--tekst);font-weight:500}
.tl-knopki{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;padding:0 6px;scroll-padding:0 6px}
.tl-knopki::-webkit-scrollbar{display:none}
.tl-knopki .deystvie{flex:none;flex-direction:column;justify-content:end;gap:6px;min-width:66px;padding:6px 6px 8px;border:0;border-radius:10px;background:transparent;font-size:var(--kegl-podpisi);font-weight:600;letter-spacing:-.01em;color:var(--tekst);line-height:1;transition:background .16s,color .16s}
/* Одна высота на всю ленту действий (Кай 03.09: «значки несоразмерны»): плитка-пример и
   иконка-контур стоят в ряду одного роста, подписи выровнены по низу. Ползунки цвета —
   свой ряд, туда высота кнопок не идёт. */
.tl-knopki:not(.tl-cvet) .deystvie{height:78px}
.tl-knopki .deystvie svg{width:22px; height:22px;stroke-width:var(--znak-tolshchina)}
.tl-knopki .deystvie img.prevyu,.tl-knopki .deystvie .prevyu-kadr{width:38px;height:50px;border-radius:6px;object-fit:cover;display:block;background:var(--sloy)}
.tl-knopki .deystvie img.prevyu.kvadrat,.tl-knopki .deystvie .prevyu-kadr.kvadrat{width:38px; height:38px;border-radius:8px}
.tl-cvet{align-items:end;gap:12px;padding:4px 14px 8px}
.tl-cvet .polzunok{flex:none;display:grid;gap:7px;font-size:var(--kegl-podpisi);font-weight:600;color:var(--tekst)}
.tl-cvet .polzunok span{display:flex;justify-content:space-between;gap:8px;padding:0 2px}
.tl-cvet .polzunok output{color:var(--tekst2);font-weight:500;font-variant-numeric:tabular-nums}
.tl-cvet input[type=range]{width:128px;margin:0}
.tl-knopki .deystvie:hover{background:var(--sloy)}
.tl-knopki .deystvie.glav{background:transparent;color:var(--akcent);border:0}   /* заливкой «Собрать» стоит в шапке; в ленте — цветом, в общем ряду */
.tl-knopki .deystvie[aria-pressed=true]{color:var(--akcent)}
/* На плитке шрифта и шаблона выбор цветом подписи не читается: сам образец нарисован
   своим шрифтом и своим цветом. Кольцо вокруг образца — как выделение стиля в CapCut. */
.tl-knopki .deystvie[aria-pressed=true] .obrazec,
.tl-knopki .deystvie[aria-pressed=true] .obrazec-stil{box-shadow:0 0 0 2px var(--akcent);border-radius:8px}
.tl-knopki .deystvie[disabled],
.tl-knopki .deystvie[aria-disabled=true]{color:var(--tekst2);opacity:.45;cursor:not-allowed}
.tl-redaktor{display:grid;gap:8px;padding:0 14px}
.tl-redaktor textarea{width:100%;background:var(--sloy);color:var(--tekst);border:1px solid var(--gran);border-radius:10px;padding:10px;font:inherit;font-size:var(--kegl-tekst);resize:vertical}
/* тосты: в редакторе — снизу над лентой, короткие, гаснут сами и не ложатся на превью */
#plashka-sloy{position:fixed;top:calc(8px + var(--safe-top,0px));left:50%;transform:translateX(-50%);z-index:90;display:grid;gap:8px;width:min(92vw,480px)}
.plashka{background:var(--akcent);color:#160B04;font-weight:650;padding:12px 16px;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.45);animation:plashka-vhod .25s ease}
@keyframes plashka-vhod{from{opacity:0;transform:translateY(-12px)}to{opacity:1}}
html[data-redaktor] #plashka-sloy{top:auto;bottom:calc(128px + env(safe-area-inset-bottom));width:min(88vw,340px)}
html[data-redaktor] .plashka{background:rgba(36,29,23,.97);color:var(--tekst);font-weight:600;font-size:var(--kegl-stroki);padding:9px 14px;border-radius:10px;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,.4);animation-name:plashka-vhod-niz}
@keyframes plashka-vhod-niz{from{opacity:0;transform:translateY(10px)}to{opacity:1}}

/* ═══════════════ ФАБРИКА В СЕМЬ СТРАНИЦ (ТЗ и дизайн 05.09) ═══════════════════
   ТЗ      docs/TZ-FABRIKA-7-STRANIC-2026-09-05.md
   дизайн  docs/DIZAYN-FABRIKA-7-STRANIC-2026-09-05.md
   эталон разметки, чисел и текстов — app/maket/fabrika-7.html.

   Почему у классов приставка f-. Имена макета (plashka, stroka, kadr, chip, pusto,
   oshibka, pleer, figura, list) в этом файле УЖЕ заняты другими компонентами —
   плашкой уведомления, строкой корзины, кадром находки. Порт без приставки молча
   унаследовал бы их правила и разошёлся бы с макетом ровно там, где этого не видно
   в коде. Структура и числа — макета, приставка только у имён.

   Кнопки берутся продуктовые (.deystvie / .deystvie.glav): они уже стоят под каноном
   app/selfcheck_kanon_knopok.py — прозрачный фон и неон-кант у главной, радиус-пилюля,
   значок 16/22 обводкой 1.7. Вторая система кнопок была бы вторым каноном.
   Вкладки страницы висят на общем .filtry: там же живут вкладки находок, и палец
   меряется по одному правилу.                                                     */

/* Шапка мастера — ОДНА на приложение (спец §1.1, правка П1 акта приёмки 06.09).
   Имя шага «N · Имя» на телефоне живёт в полосе верхних кнопок, ровно там же, где имя
   любого раздела: своя вторая шапка со своей стрелкой давала на 1440 две кнопки «назад»
   на одном экране. На компьютере полосы нет — там видимым становится этот заголовок,
   и он же остаётся для чтения с экрана на телефоне. Источник строки один: fabIdti().  */
.f-shapka{margin-top:2px}
.f-shapka h2{font-family:var(--shrift); font-weight:700; font-size:var(--kegl-imeni);
  letter-spacing:-0.035em; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.f-nomer{color:var(--akcent); font-variant-numeric:tabular-nums}
.f-pod{margin-top:var(--v2); color:var(--tekst2); font-size:var(--kegl-podzag); line-height:1.45}
@media (max-width:1099px){
  .f-shapka h2{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap}   /* видимое имя — в полосе, как у разделов */
  /* Имя шага короче имени раздела и стоит кеглем спецификации, а не 57 px раздела. */
  html[data-fab-master] .polosa-imya{font-size:var(--kegl-imeni); letter-spacing:-0.02em;
    display:block; text-align:center; line-height:var(--knopka-vys); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis}
  /* «Обновить» на страницах мастера не нужна: перезагружает раздел, а человек внутри шага. */
  html[data-fab-master] .obnovit{display:none}
}

.f-str[hidden]{display:none !important}
.f-telo{margin-top:var(--v3)}
/* Липкая полоса мастера лежит ПОВЕРХ прокрутки, и последняя строка уезжала под неё
   (снимок 390 «Расстановка»: «годится почти всегда» обрезано). Запас снизу равен её
   высоте: индикатор 22+3 + кнопка 46 + паддинги 22 и 12 = 105, с округлением 110. */
.f-str{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
@media (min-width:1100px){ .f-str{padding-bottom:0} }
/* Мастер занимает слайд целиком, полоса низа прижата к его нижнему краю: на коротком шаге
   (снимок 390, «Суфлёр» без перевода) sticky-полоса вставала посреди экрана, а под ней
   зияла пустота. margin-top:auto держит её внизу и на коротком, и на длинном шаге. */
#ekran-rabota[data-str] #forma-zakaz{display:flex; flex-direction:column; min-height:100%}
/* У слайда мастера нет нижнего поля: липкая полоса встаёт ровно по нижнему краю прокрутки,
   и содержимое не проглядывает ПОД ней (снимок 390, «Расстановка»: чипы стиля субтитров
   светились из-под кнопки «Дальше»). Воздух снизу даёт сама полоса своим паддингом. */
@media (max-width:1099px){ #ekran-rabota[data-str] > .slayd{padding-bottom:0} }
/* Точки слайдов гаснут, пока открыта страница мастера: они ложились прямо на кнопку низа
   (снимок 390, «Расстановка»), а внутри мастера человек ходит кнопкой и стрелкой назад,
   а не пальцем вбок. Метка ставится на <html> из fabIdti — без :has(), она есть не везде. */
html[data-fab-master] .slayd-tochki{display:none}

/* Плашка со строками через волосяную линию — наша замена сетке карточек (§4.9). */
.f-plashka{background:rgba(24,20,16,.92); border:1px solid var(--gran2); border-radius:var(--r-plashki)}
.f-list{margin-top:var(--v4)}
.f-stroka{display:grid; grid-template-columns:var(--znak) minmax(0,1fr) auto; gap:var(--v3);
  align-items:center; padding:14px 16px; width:100%; text-align:left; background:none; border:0;
  border-radius:var(--r-plashki); color:inherit; font:inherit; cursor:pointer}
.f-stroka + .f-stroka{border-top:1px solid var(--gran); border-radius:0}
.f-stroka > svg{width:var(--znak); height:var(--znak); fill:none; stroke:currentColor;
  stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.f-stroka b{display:block; font-size:var(--kegl-zagolovka); font-weight:600; line-height:1.3}
.f-stroka i{display:block; font-style:normal; font-size:var(--kegl-podzag); color:var(--tekst2); line-height:1.4; margin-top:2px}
.f-shevron{width:var(--znak-m); height:var(--znak-m); color:var(--tekst3); fill:none; stroke:currentColor;
  stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.f-zagolovok{margin:var(--v5) 0 var(--v3); font-family:var(--shrift); font-weight:700;
  font-size:var(--kegl-zagolovka); letter-spacing:-0.02em}

/* Вкладки страницы. Ряд — общий .filtry (свой скролл и своя плотность), вид —
   §0.1: выбранное держится ЧЁТКИМ краем без ореола, свечение занято действием. */
.f-vkladki{margin-top:var(--v4)}
.f-vkladki button{background:none; height:var(--knopka-vys); padding:0 13px; font-size:var(--kegl-pilyuli)}
.f-vkladki button[aria-selected="true"]{color:var(--akcent); border-color:transparent;
  box-shadow:var(--kray-vybran); font-weight:600}

/* Кадр и число на кадре (приём-характер: число живёт на кадре, а не в подписи). */
.f-kadr{position:relative; display:block; border-radius:var(--r-elementa); overflow:hidden;
  background:var(--grad-noch)}
.f-kadr img{width:100%; height:100%; object-fit:cover; display:block}
.f-kadr::after{content:""; position:absolute; inset:0; background:var(--scrim); pointer-events:none}
.f-169{aspect-ratio:16/9} .f-916{aspect-ratio:9/16}
.f-chislo{font-family:var(--mono); font-variant-numeric:tabular-nums; word-spacing:-0.34em}
.f-kadr .f-dlit{position:absolute; right:10px; bottom:9px; z-index:2; font-size:var(--kegl-stroki); color:var(--tekst);
  text-shadow:0 1px 10px rgba(7,6,5,.9)}
.f-kadr .f-prirost{position:absolute; right:10px; top:9px; z-index:2; font-size:var(--kegl-stroki); color:var(--rost);
  text-shadow:0 1px 10px rgba(7,6,5,.9)}
.f-donor-imya{margin-top:var(--v3); font-size:var(--kegl-zagolovka); font-weight:600; line-height:1.25}
.f-donor-meta{margin-top:4px; font-size:var(--kegl-podzag); color:var(--tekst2)}
/* Дефект 9 снимка: в закрытом details пряталось ВСЁ описание. Первое предложение
   видно всегда, «Показать больше» раскрывает остальное. */
.f-opis{margin-top:var(--v3); color:var(--tekst2); font-size:var(--kegl-tekst); line-height:1.45}
.f-opis details summary{list-style:none; cursor:pointer; color:var(--akcent); font-size:var(--kegl-podzag); margin-top:6px}
.f-opis details summary::-webkit-details-marker{display:none}
.f-opis details p{margin-top:8px}

/* Нить готовности и линия хода. */
.f-nit{height:3px; border-radius:999px; background:var(--gran2); overflow:hidden}
.f-nit i{display:block; height:100%; background:var(--akcent); border-radius:999px}
.f-hod{height:2px; border-radius:999px; background:var(--gran2); overflow:hidden; margin-top:var(--v4)}
.f-hod i{display:block; height:100%; width:38%; background:var(--akcent); border-radius:999px}
.f-gotovnost{display:flex; align-items:center; justify-content:space-between; gap:var(--v3); margin-top:var(--v5)}
.f-gotovnost b{font-family:var(--shrift); font-size:var(--kegl-zagolovka); letter-spacing:-0.02em}
.f-gotovnost .f-chislo{font-size:var(--kegl-tekst); color:var(--akcent)}
.f-gotovnost[data-vse] .f-chislo{color:var(--rost)}

/* Карточка черновика на хабе: имя карточки — то, что произойдёт по нажатию,
   а не ярлык «Черновик» над названием (надстрочник запрещён craft-floor). */
.f-chernovik{display:grid; grid-template-columns:64px minmax(0,1fr) var(--znak-m); gap:var(--v3);
  align-items:stretch; width:100%; padding:14px; margin:4px 0 14px; text-align:left;
  background:rgba(24,20,16,.92); border:1px solid var(--gran2); border-radius:var(--r-plashki);
  color:inherit; font:inherit; cursor:pointer}
.f-chernovik .f-kadr{width:64px; min-height:84px; align-self:stretch}
.f-chernovik b{display:block; font-size:var(--kegl-zagolovka); font-weight:600; line-height:1.3}
.f-chernovik i{display:block; font-style:normal; font-size:var(--kegl-podzag); color:var(--tekst2); margin-top:2px}
.f-chernovik i + i{color:var(--tekst3); font-size:var(--kegl-stroki)}
.f-chernovik .f-hodok{display:flex; align-items:center; gap:8px; margin-top:10px; max-width:320px}
.f-chernovik .f-hodok .f-nit{flex:1}
.f-chernovik .f-shevron{align-self:center}
.f-chernovik.f-bez-kadra{grid-template-columns:minmax(0,1fr) var(--znak-m)}

/* Состояния (§4.12): скелет повторяет форму страницы, у пустого и у ошибки — одно
   действие и выход. Спиннеров и процентов нет. */
.f-skelet > div{background:var(--sloy); border-radius:var(--r-elementa)}
.f-skelet > div.plash{border-radius:var(--r-plashki)}
/* Состояния зон (07.09): скелет зоны — тот же .f-skelet; в сетке ленты и плиток занимает всю ширину,
   действие пустого состояния — одна кнопка под текстом, в диалоге куратора пустое не растягивается */
.zona-skelet > div + div{margin-top:var(--v3)}
.lenta > .zona-skelet, .plitki > .zona-skelet{grid-column:1/-1; flex-basis:100%}
.pusto .deystvie{margin-top:14px; align-self:flex-start}
.dialog .pusto, #ya-sost .pusto, .plitki .pusto{min-height:0; padding:8px 0}
/* Проба голоса (07.09): вторичная пилюля под сегментом голоса; играет — заливка акцентом */
.proba-golosa{margin-top:10px}
.proba-golosa svg{width:var(--znak-m); height:var(--znak-m); fill:currentColor; stroke:none}
.proba-golosa[data-igraet]{background:var(--akcent); color:var(--na-akcente); border-color:var(--akcent)}
.proba-golosa[aria-busy="true"]{opacity:.55}
.f-plita{margin-top:var(--v5); padding:22px 18px; text-align:left;
  background:rgba(24,20,16,.92); border:1px solid var(--gran2); border-radius:var(--r-plashki)}
.f-plita b{display:block; font-family:var(--shrift); font-weight:700; font-size:var(--kegl-imeni);
  letter-spacing:-0.02em; line-height:1.2}
.f-plita[data-vid="oshibka"] b{color:var(--signal)}
.f-plita p{margin-top:8px; color:var(--tekst2); font-size:var(--kegl-tekst); max-width:44ch}
.f-plita .deystvie{margin-top:var(--v4)}

/* ═══ Запись эфира в «Методе» (Кай 07.09) ══════════════════════════════════════════════
   Карточка живёт по правилам урока: тот же ритм заголовка блока, та же плашка, тот же
   постер 16:9. Своей типографики она не заводит — иначе в разделе два вида карточек. */
.efir-kart{display:grid; gap:2px; width:100%; padding:14px; text-align:left; color:inherit;
  font:inherit; cursor:pointer; background:var(--sloy); border:1px solid var(--gran2);
  border-radius:var(--r-plashki)}
.efir-kart b{font-size:var(--kegl-zagolovka); font-weight:600; letter-spacing:-0.015em}
.efir-kart i{font-style:normal; font-size:var(--kegl-stroki); color:var(--tekst2)}
.efir-kart[aria-current="true"]{border-color:var(--akcent)}
.efir-pleer{margin-top:var(--v3); border-radius:var(--r-elementa); overflow:hidden; background:#000}
.efir-pleer video{display:block; width:100%; aspect-ratio:16/9; background:#000}
.efir-glavy{list-style:none; margin:var(--v3) 0 0; padding:0; display:grid; gap:6px}
.efir-glavy button{display:grid; grid-template-columns:56px minmax(0,1fr); gap:10px; width:100%;
  padding:8px 10px; text-align:left; color:var(--tekst2); font:inherit; font-size:var(--kegl-stroki);
  background:transparent; border:1px solid var(--gran2); border-radius:var(--r-elementa); cursor:pointer}
.efir-glavy button:hover{color:var(--tekst); border-color:var(--gran)}
.efir-glavy .t{color:var(--akcent); font-variant-numeric:tabular-nums}
.efir-tekst{margin-top:var(--v3)}
.efir-tekst summary{list-style:none; cursor:pointer; color:var(--akcent); font-size:var(--kegl-podzag)}
.efir-tekst summary::-webkit-details-marker{display:none}
.efir-tekst p{margin-top:8px; color:var(--tekst2); font-size:var(--kegl-stroki); line-height:1.5;
  white-space:pre-wrap}

/* ═══ Экран сборки (стр. 7 «Публикация», состояние zagruzka) ══════════════════════════
   Кай 07.09 15:06: «нет красивого анимированного экрана загрузки, непонятно, что
   происходит». Три вещи и ни одной лишней: кадр донора 9:16 с мягким дыханием, колонка
   этапов с отметками и строка «где ты в очереди». Процентов-цифр на кадре нет — число
   одно и живёт в строке срока. */
/* Две колонки на ЛЮБОЙ ширине: кадр 9:16 во всю колонку 390 съедал экран
   целиком, и колонка этапов — главное на этом экране — уезжала за край (снимок 390). */
.f-sborka{margin-top:var(--v4); display:grid; gap:var(--v4);
  grid-template-columns:118px minmax(0,1fr); align-items:start}
.sb-kadr{position:relative; aspect-ratio:9/16; width:100%; overflow:hidden;
  border-radius:var(--r-postera); border:1px solid var(--gran2); background:var(--sloy);
  background-size:cover; background-position:center; animation:sb-dyhanie 3.6s ease-in-out infinite}
.sb-kadr img{width:100%; height:100%; object-fit:cover; display:block}
/* Блик идёт по углу карточки — движение есть, а мигания, которое ловит глаз, нет. */
.sb-bliki{position:absolute; inset:-40% -60%; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,138,43,.22) 50%, transparent 58%);
  animation:sb-blik 2.6s linear infinite}
@keyframes sb-dyhanie{0%,100%{transform:scale(1); opacity:.92} 50%{transform:scale(1.015); opacity:1}}
@keyframes sb-blik{0%{transform:translate3d(-45%,0,0)} 100%{transform:translate3d(45%,0,0)}}
/* На 1440 колонка не растягивается во всю ширину: строка длиннее ~60 знаков читается
   рывками, а нить в 1300 px перестаёт быть мерой хода. */
.sb-telo{min-width:0; max-width:520px}
.sb-srok{margin-top:10px; font-size:var(--kegl-stroki); color:var(--tekst2)}
.sb-etapy{list-style:none; margin:0; padding:0; display:grid; gap:10px}
/* Третья колонка — проценты этапа (Кай 07.09: «справа от названия процесса пусть бегут
   % выполнения процесса»). Колонка объявлена всегда, а не появляется вместе с числом:
   иначе имена этапов прыгали бы влево-вправо на каждом опросе. */
.sb-etapy li{display:grid; grid-template-columns:var(--znak-m) minmax(0,1fr) auto; gap:10px;
  align-items:center; font-size:var(--kegl-stroki); color:var(--tekst3)}
/* Процент — число-измерение: моно и tabular-nums, чтобы «7 %» и «73 %» не дёргали строку. */
.sb-etapy li .sb-procent{font-family:var(--mono); font-size:var(--kegl-podpisi);
  font-variant-numeric:tabular-nums; color:var(--tekst2)}
.sb-etapy li[data-e="idet"] .sb-procent{color:var(--akcent)}
.sb-etapy li svg{width:var(--znak-m); height:var(--znak-m); fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.sb-etapy li[data-e="bylo"]{color:var(--tekst2)}
.sb-etapy li[data-e="bylo"] svg{color:var(--rost)}
.sb-etapy li[data-e="idet"]{color:var(--tekst); font-weight:600}
.sb-etapy li[data-e="idet"] svg{color:var(--akcent); animation:sb-puls 1.8s ease-in-out infinite}
@keyframes sb-puls{0%,100%{opacity:.35; transform:scale(.86)} 50%{opacity:1; transform:scale(1)}}
.sb-nit{margin-top:var(--v4)}
.sb-primerno{margin-top:8px; font-size:var(--kegl-podpisi); color:var(--tekst3)}
@media (min-width:760px){.f-sborka{grid-template-columns:190px minmax(0,1fr)}}
/* Кому движение мешает — карточка стоит, а слова остаются те же. */
@media (prefers-reduced-motion:reduce){
  .sb-kadr, .sb-bliki, .sb-etapy li[data-e="idet"] svg{animation:none}
}

/* Полоса мастера: индикатор и ОДНО действие. Липнет к низу своего слайда, а не
   висит fixed поверх всего приложения: слайдов у Фабрики два, и полоса принадлежит
   второму. Верхние 22 px — чтобы содержимое не попадало в прозрачный край. */
/* margin-top:auto прижимает полосу к низу слайда (флекс-колонка выше). Отдельного
   правила margin-top быть не может: сокращение margin ниже по файлу его перебьёт —
   ровно так полоса и повисла посреди экрана на снимке 390. */
/* Полоса липнет к низу СВОЕГО слайда, а слайд (section[data-slaydy], высота 100dvh − верх − 72px −
   safe-area) заканчивается на верхе таб-бара: bottom:0 ставит «Дальше» на 6 px над навигацией.
   Блокер c09967b (Кай 06.09: «кнопка внизу, не видно, не пролистать») лечили bottom:78px — но
   сдвиг считается от края слайда, а не окна, и полоса повисла на 84 px выше таб-бара (М8 06.09).
   Что кнопка не ушла ПОД таб-бар, меряет М8 прибора: зазор до навигации не меньше нуля. */
.f-niz{position:sticky; bottom:0; z-index:6; margin:auto calc(-1 * var(--pole, 16px)) 0;
  padding:10px var(--pole, 16px) 10px; border-top:1px solid var(--gran); background:var(--fon)}
/* Канон плотности §1: главная кнопка 36h, кегль 13, заливка, ширина по тексту, отдельной
   строкой под волосяной линией. Единственный неон экрана — у неё (--neon-glav из .deystvie.glav). */
.f-niz .f-vnutri{display:flex; flex-direction:column; align-items:center}
.f-niz .f-ind{width:100%}
.f-niz .deystvie{width:auto; min-width:234px; justify-content:center; min-height:var(--knopka-vys)}
/* П3 акта: `.deystvie.glav` раздаёт --neon-kray каждой главной кнопке, и на странице
   «Язык и голос» рядом светились «Перевести текст» и «Дальше». Внутри мастера главное
   действие одно — кнопка нижней полосы; всё остальное в теле страницы вторично. */
#forma-zakaz:not([data-glav-v-tele]) .f-str .deystvie.glav{box-shadow:none; color:var(--tekst); border-color:var(--gran2)}
/* Исключение — «Язык и голос» без перевода (Кай 07.09, снимок: «нужно подсветить неоном
   кнопку перевести — её не видно»). Пока перевода нет, главное действие страницы — не
   «Дальше», а «Перевести текст»: без перевода следующий шаг пуст. Неон при этом остаётся
   ОДИН на экран — атрибут data-glav-v-tele (fabGlavnoe в app.js) отдаёт заливку кнопке
   тела и тем же движением гасит её у кнопки низа. Как перевод готов, атрибут снимается,
   и главной снова становится «Дальше». Два неона одновременно арифметически невозможны. */
#forma-zakaz[data-glav-v-tele] .f-niz .deystvie{background:transparent; box-shadow:none;
  color:var(--tekst2); border-color:var(--gran2)}
/* Ряд действий шага: кнопки одной высоты в 46 px, а не растянутые до высоты соседа.
   На «Суфлёре» выбор файла переносил значок и подпись на две строки, ряд тянулся по нему,
   и обе кнопки раздувались в овалы высотой 180 px (снимок 390). */
#forma-zakaz .f-str .deystviya{align-items:center}
#forma-zakaz .f-str .deystviya > *{min-height:var(--knopka-vys); align-self:center}
#forma-zakaz .f-str .fayl.deystvie{flex-wrap:nowrap; white-space:nowrap; overflow:hidden}
/* Недоступное не светится: класс glav снимается вместе со свечением — иначе канон
   кнопок справедливо ловит «главную кнопку без свечения». */
.f-niz .deystvie[disabled]{opacity:.45; cursor:not-allowed; background:transparent; box-shadow:none; border-color:var(--gran2); color:var(--tekst3)}

/* Индикатор — вариант B (нитка шагов): слева «дальше: <шаг>», справа «N из 6»,
   под ними шесть сегментов. Один блок разметки и один блок стилей: замена на
   вариант A (шесть номеров) правится здесь и в fabInd(), а не по всей странице. */
.f-ind{margin-bottom:8px}
.f-ind-shapka{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:2px}
.f-ind-imya{font-size:var(--kegl-podpisi); color:var(--tekst2)}
.f-ind-schet{font-family:var(--mono); font-size:var(--kegl-podpisi); color:var(--tekst2); font-variant-numeric:tabular-nums}
.f-lenta{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; list-style:none; margin:0; padding:0}
.f-lenta button{width:100%; height:22px; padding:0; background:none; border:0; border-radius:var(--r-pilyuli);
  position:relative; font:inherit; cursor:pointer}
.f-lenta button[disabled]{cursor:default}
.f-lenta button::after{content:""; position:absolute; left:0; right:0; top:9px; height:3px;
  border-radius:999px; background:var(--gran2)}
.f-lenta button[data-proyden]::after{background:var(--akcent); opacity:.55}
.f-lenta button[aria-current="step"]::after{background:var(--akcent); opacity:1}

/* Плашка «ролик собран» и площадки публикации: значки контуром, логотипов-картинок
   и эмодзи нет. */
.f-zelenaya{border-color:rgba(74,222,128,.35)}
.f-zelenaya > svg{color:var(--rost)}
.f-ploshchadki{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:var(--v3)}
.f-ploshchadki button{display:grid; justify-items:center; gap:8px; padding:14px 6px;
  border:1px solid var(--gran2); border-radius:var(--r-elementa); background:none; color:var(--tekst2);
  font:inherit; font-size:var(--kegl-podpisi); cursor:pointer}
.f-ploshchadki button svg{width:var(--znak); height:var(--znak); color:var(--tekst); fill:none;
  stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.f-pleer video{display:block; margin-inline:auto; max-width:100%; height:46svh; aspect-ratio:9/16;
  object-fit:contain; border-radius:var(--r-elementa); background:#000}
/* ═══ Страница 7 «Публикация» по макетам pub1/pub2 (Кай 06.09): ролик сценой 9:16 с Play и
   пилюлей «Готов · 0:47», обмен нитью, площадки строками со статусом и одной кнопкой,
   хроника выкладки нитью. Один неон — «Поделиться» в полосе мастера. ═══ */
.pub-scena{position:relative; max-width:220px; aspect-ratio:9/16; margin:var(--v2) auto 0; border-radius:var(--r-elementa);
  overflow:hidden; background:#000; border:1px solid var(--gran2)}
.f-pleer .pub-scena video{width:100%; height:100%; margin:0; object-fit:cover; border-radius:0}
.pub-scena .scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,6,5,.3), rgba(7,6,5,0) 30%, rgba(7,6,5,0) 55%, rgba(7,6,5,.86))}
.pub-scena .gotov{position:absolute; left:10px; top:10px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r-pilyuli); background:rgba(10,8,7,.6); backdrop-filter:blur(8px);
  font:600 var(--kegl-podpisi) var(--mono); color:var(--tekst); white-space:nowrap}
.pub-scena .gotov i{width:6px; height:6px; border-radius:50%; background:var(--rost)}
.pub-scena .play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:52px; height:52px;
  border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(10,8,7,.5); backdrop-filter:blur(12px);
  display:grid; place-items:center; cursor:pointer; padding:0; color:var(--tekst)}
.pub-scena .play svg{width:22px; height:22px; fill:currentColor; margin-left:3px}
.pub-scena[data-igraet] .play, .pub-scena[data-igraet] .scrim, .pub-scena[data-igraet] .niz, .pub-scena[data-igraet] .gotov{display:none}
.pub-scena .niz{position:absolute; left:10px; right:10px; bottom:10px; z-index:2; display:grid; gap:4px; pointer-events:none}
.pub-scena .niz b{font-size:var(--kegl-podzag); font-weight:600; line-height:1.25; text-shadow:0 1px 8px rgba(0,0,0,.7);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pub-scena .niz b:empty{display:none}
.pub-podpis{margin:var(--v3) 0 0; text-align:center; color:var(--tekst2); font-size:var(--kegl-stroki); line-height:1.4}
.pub-obmen{margin-top:var(--v4); padding:11px 13px; display:grid; gap:8px}
.pub-obmen .ryad{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.pub-obmen b{font-size:var(--kegl-zagolovka); font-weight:600; line-height:1.3}
.pub-obmen .schyot{font-family:var(--mono); font-weight:700; font-size:var(--kegl-stroki); color:var(--akcent); white-space:nowrap}
.pub-obmen p{margin:0; font-size:var(--kegl-stroki); color:var(--tekst2); line-height:1.4}
.pub-stroka{grid-template-columns:26px minmax(0,1fr) auto; padding:12px 16px; cursor:default}
.pub-stroka b{font-size:var(--kegl-tekst)} .pub-stroka i{font-size:var(--kegl-stroki)}
.pub-stroka i[data-sost="zhiv"]{color:var(--rost)} .pub-stroka i[data-sost="zhdyot"]{color:var(--akcent)} .pub-stroka i[data-sost="otkaz"]{color:var(--signal)}
.kn-mal{height:36px; padding:0 12px; border-radius:var(--r-pilyuli); border:1px solid var(--gran2); background:transparent;
  color:var(--tekst); font:600 var(--kegl-podpisi)/1 var(--shrift-tekst); cursor:pointer; white-space:nowrap}
.kn-mal[disabled]{opacity:.5; cursor:default}
.pub-hronika ol{list-style:none; margin:0; padding:0; position:relative; display:grid; gap:2px}
.pub-hronika ol::before{content:""; position:absolute; left:10px; top:14px; bottom:14px; width:2px; background:var(--gran2); border-radius:2px}
.pub-shag{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:start; padding:8px 0; min-height:36px}
.pub-shag .uzel{width:22px; height:22px; border-radius:50%; background:var(--fon); border:2px solid var(--gran2);
  display:grid; place-items:center; position:relative; z-index:1}
.pub-shag .uzel svg{width:11px; height:11px; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke:var(--rost)}
.pub-shag[data-sost="da"] .uzel{border-color:var(--rost)}
.pub-shag[data-sost="tek"] .uzel{border-color:var(--akcent)} .pub-shag[data-sost="tek"] .uzel::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--akcent)}
.pub-shag[data-sost="otkaz"] .uzel{border-color:var(--signal)} .pub-shag[data-sost="otkaz"] .uzel svg{stroke:var(--signal)}
.pub-shag b{display:block; font-size:var(--kegl-stroki); font-weight:600; line-height:1.4}
.pub-shag i{display:block; font-style:normal; font-size:var(--kegl-podpisi); color:var(--tekst2); margin-top:2px; line-height:1.35}
.pub-shag[data-sost="otkaz"] i{color:var(--signal)}
.pub-shag .vremya{font-family:var(--mono); font-weight:700; font-size:var(--kegl-podpisi); color:var(--tekst3); padding-top:3px}
/* Лист «Поделиться»: ряд круглых адресатов внутри той же материи листа действий (§5 канона) */
.deystviya-sloy .shapka.pub-list-shapka{cursor:default; grid-template-columns:52px minmax(0,1fr)}
.deystviya-sloy .shapka.pub-list-shapka .kadr{width:52px; height:52px; aspect-ratio:auto; border:1px solid var(--gran2); background:#000 center/cover}
.deystviya-sloy .adresaty{display:flex; gap:12px; overflow:auto; scrollbar-width:none; padding:13px 16px}
.deystviya-sloy .adresaty::-webkit-scrollbar{display:none}
.deystviya-sloy .adresat{flex:0 0 auto; width:60px; display:grid; justify-items:center; gap:6px; border:0; background:none;
  padding:0; cursor:pointer; color:var(--tekst2); font:inherit; font-size:var(--kegl-podpisi)}
.deystviya-sloy .adresat .krug{width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--gran2); background:var(--sloy); color:var(--tekst2)}
.deystviya-sloy .adresat .krug svg{width:20px; height:20px; display:block; fill:none; stroke:currentColor;
  stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.deystviya-sloy .adresat[data-podelitsya="youtube"] .krug{color:#FF3B30} .deystviya-sloy .adresat[data-podelitsya="tiktok"] .krug{color:#25F4EE}
.deystviya-sloy .adresat[data-podelitsya="instagram"] .krug{color:#E1306C} .deystviya-sloy .adresat[data-tg] .krug{color:#2AABEE}
.deystviya-sloy .adresat > span:last-child{max-width:60px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.deystviya-sloy .adresat[disabled]{opacity:.5}
.deystviya-sloy .podelitsya-otvet{padding:0 16px} .deystviya-sloy .podelitsya-otvet:empty{display:none}
.deystviya-sloy .podelitsya-otvet > *{margin:0 0 12px}

@media (min-width:1100px){
  /* Слева кадр или то, что человек разглядывает, справа органы управления: столбец
     из плашек во всю ширину читается как растянутый телефон, а не как рабочее место. */
  .f-telo[data-dve]{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
    gap:32px; align-items:start}
  .f-telo[data-dve] > div{min-width:0}
  .f-telo[data-dve] .f-pravo > :first-child{margin-top:0}
  /* «Источник»: на компьютере слева стоит кадр донора — то, что человек разглядывает, —
     а органы управления справа (комплект §5). В разметке вкладки идут первыми, потому что
     на телефоне порядок чтения именно такой: сначала откуда берём, потом что взяли. */
  .f-str[data-str="2"] .f-telo[data-dve] .f-levo{order:2}
  .f-str[data-str="2"] .f-telo[data-dve] .f-pravo{order:1}
  /* Одна колонка во всю ширину 1620 px читается как растянутый телефон — и чеклист
     «Сборки», и плашка состояния. Ширина строки ограничена: это документ, а не панель. */
  .f-telo:not([data-dve]), .f-plita{max-width:720px}
  .f-shapka h2{font-size:var(--kegl-cifry)}
  /* На компьютере полоса — строка: кнопка во всю ширину 1040 перестаёт быть кнопкой. */
  .f-niz .f-vnutri{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center}
  .f-niz .f-ind{margin-bottom:0}
  .f-niz .deystvie{width:auto; min-width:230px}
  /* На компьютере слайдов нет и высоту слайда взять неоткуда: мастер держит свою сам,
     иначе полоса низа встаёт посреди экрана, а под ней зияет пустота (снимок 1440).
     86 px — замер 06.09: столько от верха окна до начала раздела, запаса снизу нет.
     Число не на веру: правило М8 прибора app/selfcheck_fabrika_stranicy.py меряет, что
     полоса действительно стоит у нижнего края, и краснеет, если она уехала. */
  #ekran-rabota[data-str] #forma-zakaz{min-height:calc(100dvh - 86px)}
  /* Под открытым мастером на компьютере нет ни таб-бара (навигация — столбец слева), ни
     хвоста колонки: запас body 72 px под мобильную навигацию и 40 px main давали под
     полосой «Дальше» 34–72 px пустоты (М8 1440, 06.09). Снимается только у мастера. */
  html[data-fab-master] body{padding-bottom:0}
  html[data-fab-master] main{padding-bottom:0}
}
/* Открытая страница мастера — это страница: хаб под ней не стоит вторым экраном ни на
   компьютере, ни на телефоне. С36 (Кай 06.09 23:05): свайпа между страницами мастера нет —
   без хаба-соседа полосе слайдов листать нечего, остаются «Дальше»/«Назад» и нить шагов;
   свайп между экранами на время мастера глушит обработчик touchend (data-fab-master). */
/* Фабрика — ОДИН слайд (Кай 07.09), и хаб с мастером делят его по очереди, а не по
   соседству. Раньше мастер был вторым слайдом и на хабе просто уезжал за кадр; теперь
   он в том же слайде, и без этой пары правил его свёрнутая шапка («Откуда берём видео»
   + «Дальше») висела бы прямо под «Корзиной» — та самая пустая страница, только выше. */
#ekran-rabota:not([data-str]) #forma-zakaz{display:none}
#ekran-rabota[data-str] > .slayd > :not(#forma-zakaz){display:none}
[hidden]{display:none !important}

/* ═══ Атомы макетов-предложений 06.09 (work/makety-refresh/app/refresh-tokeny.css), принятых
   Каем: одна главная кнопка с заливкой и свечением 12, тихие пилюли, кольцо-счётчик, метка
   и круглый орган на кадре, стекло поверх медиа. Правило канона §6: сцена — Higgsfield,
   органы — Apple. Своих красок нет — те же токены, что выше. ═══ */
.kn-glav{height:36px; padding:0 22px; border:0; border-radius:var(--r-pilyuli); background:var(--akcent);
  color:var(--na-akcente); font:650 var(--knopka-shrift)/1 var(--shrift-tekst); letter-spacing:-0.01em;
  box-shadow:var(--neon-glav); cursor:pointer; display:inline-grid; place-items:center; white-space:nowrap}
.kn-glav[disabled]{opacity:.45; box-shadow:none; cursor:default}
.kn2{height:36px; padding:0 13px; border:1px solid var(--gran2); border-radius:var(--r-pilyuli); background:transparent;
  color:var(--tekst2); font:500 var(--kegl-pilyuli)/1 var(--shrift-tekst); cursor:pointer; white-space:nowrap}
.kn2:hover{border-color:var(--akcent); color:var(--tekst)}
.kn-tiho{height:36px; padding:0 13px; border:0; border-radius:var(--r-pilyuli); background:transparent; color:var(--tekst2);
  font:500 var(--kegl-pilyuli)/1 var(--shrift-tekst); cursor:pointer; white-space:nowrap}
.kn-tiho:hover{color:var(--tekst)}
.kn-tiho svg{width:18px; height:18px}
.dno-deystviya{margin-top:var(--v4); padding-top:10px; border-top:1px solid var(--gran);
  display:flex; flex-wrap:wrap; gap:var(--v2) var(--v3); align-items:center}
.podpis{font-size:var(--kegl-podpisi); color:var(--tekst3); line-height:1.35}
.podzag{font-size:var(--kegl-podzag); color:var(--tekst2)}
.zag{font-size:var(--kegl-zagolovka); font-family:var(--shrift); font-weight:700; letter-spacing:-0.02em; line-height:1.2}
.blok{margin-top:var(--v4)}
.blok-shapka{display:flex; align-items:baseline; justify-content:space-between; gap:var(--v3); margin-bottom:10px}
.kolco{--dolya:0; width:96px; height:96px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--akcent) calc(var(--dolya)*1%), var(--gran) 0)}
.kolco::before{content:""; position:absolute; inset:7px; border-radius:50%; background:var(--sloy)}
.kolco .chislo{position:relative; font-family:var(--mono); font-weight:700; font-size:var(--kegl-imeni); letter-spacing:-0.03em;
  line-height:1; text-align:center; font-variant-numeric:tabular-nums}
.kolco .chislo small{display:block; font-family:var(--shrift-tekst); font-weight:400; font-size:var(--kegl-podpisi);
  color:var(--tekst3); letter-spacing:0; margin-top:3px}
.metka{height:24px; padding:0 10px; border-radius:var(--r-pilyuli); display:inline-grid; place-items:center;
  font-size:var(--kegl-podpisi); font-weight:600; letter-spacing:.02em; color:var(--tekst2);
  background:rgba(10,8,7,.6); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.13)}
.organy{position:absolute; top:12px; right:12px; z-index:2; display:grid; gap:var(--v2)}
.organ{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(10,8,7,.55); backdrop-filter:blur(12px)}
.organ svg{width:var(--znak-m); height:var(--znak-m); fill:none; stroke:var(--tekst2); stroke-width:var(--znak-tolshchina);
  stroke-linecap:round; stroke-linejoin:round}
.organ.a svg{stroke:var(--akcent)} .organ.s svg{stroke:var(--stal)} .organ.r svg{stroke:var(--rost)}
.steklo{background:rgba(24,20,16,.72); backdrop-filter:blur(14px) saturate(140%); border:1px solid var(--gran2)}
.lico-kr{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none;
  border:1px solid var(--gran2); background:var(--sloy2); color:var(--tekst2)}
.lico-kr svg{width:var(--znak); height:var(--znak); fill:none; stroke:currentColor; stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round}
.lico-kr img, .ochered-kr .lico img{width:100%; height:100%; border-radius:50%; object-fit:cover}

/* ─── Фабрика · Источник по макету «л»: одна строка поиска и карта донора-сцена ─── */
.poisk{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--v2); align-items:center; margin-top:var(--v4)}
.pole-poiska{position:relative; display:block}
.pole-poiska input{height:44px; width:100%; border-radius:var(--r-pilyuli); border:1px solid var(--gran2); background:var(--sloy);
  color:var(--tekst); padding:0 15px 0 42px; outline:none; font:400 var(--kegl-podzag)/1 var(--shrift-tekst)}
.pole-poiska input:focus{border-color:var(--akcent); box-shadow:var(--kray-vybran)}
.pole-poiska input::placeholder{color:var(--tekst3)}
.pole-poiska .lupa{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:var(--znak-sh); height:var(--znak-sh);
  fill:none; stroke:var(--tekst3); stroke-width:var(--znak-tolshchina); stroke-linecap:round; stroke-linejoin:round; pointer-events:none}
.poisk .kn2{height:var(--knopka-vys)}
#fab-donor{margin-top:var(--v3)}
.donor-scena{position:relative; aspect-ratio:16/10; border-radius:var(--r-postera); overflow:hidden; border:1px solid var(--gran2); background:var(--grad-ugol)}
.donor-scena > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.donor-scena .scrim{position:absolute; inset:0; background:var(--scrim); pointer-events:none}
.donor-scena .niz{position:absolute; left:12px; right:12px; bottom:12px; z-index:2; display:grid; gap:9px}
.donor-scena h2{font-size:var(--kegl-zagolovka); font-weight:650; font-family:var(--shrift-tekst); line-height:1.28; text-shadow:0 1px 8px rgba(0,0,0,.7);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; letter-spacing:-0.01em}
.donor-scena .cifry{display:flex; flex-wrap:wrap; gap:6px 14px; padding:9px 13px; border-radius:var(--r-plashki)}
.donor-scena .cifry div{display:grid; gap:2px}
.donor-scena .cifry b{font-size:var(--kegl-tekst); font-weight:700; letter-spacing:-0.03em; line-height:1}
.donor-scena .cifry .rastet b{color:var(--rost)}
@media (min-width:1000px){ .donor-scena{aspect-ratio:16/9} }

/* ─── Фабрика · Корзина по макету «с13»: строки с превью, срок на кадре ─── */
#korzina.plitki{display:grid; gap:var(--v3); margin-top:var(--v3); --kol:1; justify-content:stretch}
#korzina .zadacha{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:var(--v3); align-items:center;
  padding:10px; border-radius:var(--r-plashki); background:var(--sloy2); border:1px solid var(--gran)}
#korzina .zadacha .stroka-z{display:contents}
#korzina .zadacha .kadr-z{aspect-ratio:9/16; border-color:var(--gran2); grid-row:1 / span 2; align-self:center}
#korzina .zadacha .kadr-z img{filter:grayscale(.6) brightness(.62)}
#korzina .zadacha .sostoyanie{display:none}
#korzina .zadacha .dlit{left:3px; right:3px; bottom:3px; text-align:center; font-weight:700; font-size:var(--kegl-podpisi); color:var(--tekst2); padding:2px 0}
#korzina .zadacha[data-zhzhyot] .dlit{color:var(--signal)}
#korzina .zadacha .imya-z{font-size:var(--kegl-podzag); white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0}
#korzina .zadacha .kogda{grid-column:2; margin-top:-6px; align-self:start}
#korzina .zadacha .imya-z{align-self:end}
#korzina .zadacha [data-vernut]{width:auto; margin:0; min-height:36px; grid-column:3; grid-row:1 / span 2}
.korzina-ochistit{display:block; margin:var(--v4) auto 0; color:var(--tekst2)}
.korzina-ochistit:hover{border-color:var(--signal); color:var(--signal)}
.deystviya-sloy .slovo-lista{padding:15px 16px} .deystviya-sloy .slovo-lista b{display:block; font-size:var(--kegl-zagolovka); font-weight:650}
.deystviya-sloy .slovo-lista span{display:block; color:var(--tekst2); font-size:var(--kegl-podzag); margin-top:5px}
.deystviya-sloy .punkt[data-znak="signal"]{color:var(--signal)} .deystviya-sloy .punkt[data-znak="signal"] svg{color:var(--signal)}
@media (min-width:1000px){ #korzina.plitki{max-width:640px} }

/* ─── Зона «Я» по макету «и» ─── */
.paket-karta{display:grid; grid-template-columns:1fr 96px; gap:var(--v4); align-items:center; margin-top:var(--v2);
  padding:var(--v4); border-radius:var(--r-postera); border:1px solid var(--gran2); background:var(--grad-ugol); box-shadow:var(--ten-plashki)}
.paket-karta h2{font-size:var(--kegl-cifry); letter-spacing:.02em; line-height:1.12; text-transform:uppercase; overflow-wrap:anywhere}
.paket-karta .levo{display:grid; gap:9px; align-content:center; min-width:0}
.paket-karta .srok{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.paket-karta .srok b{font-family:var(--mono); font-weight:700; font-size:var(--kegl-imeni); color:var(--akcent); letter-spacing:-0.03em; line-height:1}
.paket-karta .srok-polosa{height:4px; border-radius:2px; background:var(--gran2); overflow:hidden}
.paket-karta .srok-polosa i{display:block; height:100%; width:var(--dolya,0%); background:var(--akcent); border-radius:2px}
.ya-bloki .razdel-telo{padding:0}
/* Хвост «Я» одной сеткой (карточка 06.09 п.4): строки-кнопки — как .stroka, те же поля 11/0,
   волосяной разделитель, без своих рамок и inline-полей; ряд ровный. */
.ya-fakty{margin:8px 0 0; text-align:center}
#ekran-ya .ya-ryad{display:flex; width:100%; margin:0; justify-content:space-between; align-items:baseline;
  padding:8px 0; min-height:0; background:none; border:0; border-bottom:1px solid var(--gran); border-radius:var(--r-elementa);
  font-size:inherit; color:var(--tekst); text-decoration:none}
#ekran-ya .ya-ryad b{font-weight:600}
#ekran-ya .ya-ryad::after{content:"›"; color:var(--tekst3); font-size:var(--kegl-zagolovka); line-height:1}
#ekran-ya .eshche-blok{margin-top:var(--v4)}
#ekran-ya .eshche-blok .razdel-telo{padding:0}   /* «Согласия и вход» — те же поля, что у строк выше */
.part-fakt{margin:0; font-size:var(--kegl-podpisi); color:var(--tekst2); line-height:1.4; text-align:center}
.partnerka-vrezka > .podpis{text-align:center}
.part-fakt b{color:var(--tekst); font-weight:650}
.partnerka-vrezka .deystviya{display:grid; gap:8px}
.ya-bloki .razdel-telo > .podpis{margin-top:9px}
.ploshchadki{background:rgba(24,20,16,.92); border:1px solid var(--gran2); border-radius:var(--r-plashki); overflow:hidden}
.ploshchadka{display:grid; grid-template-columns:26px minmax(0,1fr) auto auto; align-items:center; gap:11px; padding:12px 15px; border-top:1px solid var(--gran)}
.ploshchadka:first-child{border-top:0}
.ploshchadka > svg{width:var(--znak); height:var(--znak)}
.ploshchadka .imya{font-size:var(--kegl-zagolovka); font-weight:650; display:block; color:var(--tekst)}
.ploshchadka .sost{display:block; font-size:var(--kegl-podpisi); color:var(--tekst3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ploshchadka .sost.zhivaya{color:var(--rost)} .ploshchadka .sost.upala{color:var(--signal)}
.ploshchadka .kn2{padding:0 12px}
.ploshchadka .perekl{align-items:center; min-height:36px}
#ekran-ya .razdel[data-telo="avtory"] .razdel-telo{gap:var(--v4)}
#moi-avtory, .partnerka-vrezka{text-align:left}
.avtory-kr{display:flex; gap:11px; overflow:auto; scrollbar-width:none; padding:2px 0}
.avtory-kr::-webkit-scrollbar{display:none}
.avtor-kr{flex:0 0 auto; width:62px; display:grid; justify-items:center; gap:5px; border:0; border-radius:var(--r-pilyuli); background:none; padding:0; cursor:pointer; color:inherit; font:inherit}
.avtor-kr .lico-kr{width:54px; height:54px}
.avtor-kr .podpis{max-width:62px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.avtor-kr.novoe .lico-kr{border-color:var(--akcent); box-shadow:var(--kray-vybran); color:var(--akcent)}
.avtory-list{background:rgba(24,20,16,.92); border:1px solid var(--gran2); border-radius:var(--r-plashki); overflow:hidden}
.avtory-list .avtor-blok{border:0; border-top:1px solid var(--gran)}
.avtory-list .avtor-blok:first-child{border-top:0}
.avtory-list summary.avtor-golova{list-style:none; cursor:pointer; display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; gap:11px; align-items:center; padding:10px 13px}
.avtory-list summary.avtor-golova::-webkit-details-marker{display:none}
.avtory-list .avtor-golova b{font-size:var(--kegl-podzag); font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.avtory-list .avtor-golova .meta{display:block; margin-top:2px; font-size:var(--kegl-podpisi); color:var(--tekst2)}
.avtory-list .znachok-novyh{background:var(--akcent); color:var(--na-akcente); border-radius:999px; padding:2px 9px; font-size:var(--kegl-podpisi); font-weight:700}
.avtory-list .shevron{width:16px; height:16px; fill:none; stroke:var(--tekst3); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s}
.avtory-list .avtor-blok[open] .shevron{transform:rotate(90deg)}
.avtory-list .roliki{display:flex; gap:var(--v2); overflow:auto; scrollbar-width:none; padding:0 13px 12px}
.avtory-list .roliki::-webkit-scrollbar{display:none}
.avtory-list .avtor-rolik{flex:0 0 96px; display:grid; gap:5px; text-decoration:none; color:inherit; border:0; background:none; padding:0; text-align:left; font:inherit; cursor:pointer}
.avtory-list .kadrik{position:relative; aspect-ratio:9/16; border-radius:var(--r-elementa); overflow:hidden; border:1px solid var(--gran2); background:var(--grad-ugol); display:block}
.avtory-list .kadrik img{width:100%; height:100%; object-fit:cover; display:block}
.avtory-list .cifra{position:absolute; left:5px; bottom:5px; font-family:var(--mono); font-weight:700; font-size:var(--kegl-podpisi); color:var(--tekst); background:rgba(7,6,5,.74); border-radius:5px; padding:2px 5px}
.avtory-list .titul{font-size:var(--kegl-podpisi); line-height:1.3; color:var(--tekst2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.avtory-list .dno-avtora{display:flex; gap:var(--v2); padding:0 13px 12px; flex-wrap:wrap}
.avtory-list .roliki .t2{padding:0 0 4px; font-size:var(--kegl-stroki)}
.partnerka-vrezka{display:grid; justify-items:stretch; gap:11px; padding:14px 15px; background:rgba(24,20,16,.92); border:1px solid var(--gran2); border-radius:var(--r-plashki)}
.partnerka-vrezka .blok-shapka{margin:0}
.partnerka-vrezka .chisla{display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--v3)}
.partnerka-vrezka .chisla div{display:grid; gap:3px}
.partnerka-vrezka .chisla b{font-family:var(--mono); font-weight:700; font-size:var(--kegl-imeni); letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums}
.partnerka-vrezka .kod{display:flex; align-items:center; justify-content:space-between; gap:var(--v3); padding:9px 12px; border-radius:var(--r-elementa);
  background:rgba(255,255,255,.04); border:1px dashed var(--gran2); font-family:var(--mono); font-weight:700; font-size:var(--kegl-stroki); min-width:0}
.partnerka-vrezka .kod span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
@media (min-width:1000px){
  .ya-bloki{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--v5); align-items:start; max-width:760px}
  .paket-karta, #ekran-ya > .dno-deystviya{max-width:760px}
}

/* Кай 07.09: внешняя пилюля «Готово» садилась на правую кнопку шапки суфлёра — под слоем суфлёра она ниже полосы шапки (50 px + 8) */
.video-sloy:has(iframe[src^="/sufler"]) .zakryt{top:calc(58px + var(--safe-top,0px))}

/* подсказка, если iOS не дал звук без касания (видео «Как пользоваться») */
.video-sloy .kosnis{position:absolute; left:0; right:0; bottom:12px; text-align:center; font-size:var(--kegl-podpisi); color:var(--tekst2); pointer-events:none}