/* Пульт Медиа Обс — кабинет (задание 47; вид — по макету этапа 1, tools/pult/web/maket/)

   1. Работа страницы: войти по коду из письма и открыть свои инструменты рекламы — с историей расчётов и понятным сроком доступа.
   2. Сигнатурный момент — «пульт включается»: на экране входа стена мониторов наблюдения без сигнала (зерно, «нет сигнала»,
      бегущий таймкод); после верного кода мониторы включаются по одному полосой развёртки (шаг 120 мс), главный монитор
      «Эффективность РК» оживает мини-демо, и экран переходит в кабинет. В кабинете та же стена — плитки инструментов.
   3. Объект результата — «монтажная линейка доступа»: дни периода тиками, «сегодня» — красная головка воспроизведения,
      сколько осталось — крупно. История — плёнка кадров: у каждого расчёта фраза-вывод и полоса решений.
   4. Цвет: тёплая бумага и чернила бренда, одна ночная плоскость — стена мониторов; ярко только чипы решений и красный REC
      на главной кнопке. Тот же словарь, что у «Эффективности РК», — человек узнаёт инструмент внутри пульта.
*/
:root{
  --paper:#f7f5f2; --surface:#fffdfb; --sunken:#efece8; --ink:#221e24; --muted:#5e5762; --subtle:#736c76;
  --line:#e5e0db; --line-2:#d9d3ce; --rec:#c42a21; --rec-h:#a8221a; --on-rec:#fffaf8; --focus:#c42a21;
  --night:#17141a; --on-night:#f7f5f2; --night-mut:#b9b1bb; --night-line:rgba(247,245,242,.14); --night-edge:transparent;
  --go:#1d6b47; --go-bg:#dcefe3; --go-s:#3a9467;
  --hold:#465068; --hold-bg:#e5e8ef; --hold-s:#97a0b3;
  --stop:#b3261e; --stop-bg:#f9dedb; --stop-s:#d4483d;
  --check:#7d5300; --check-bg:#fbefd5; --check-s:#d6a032;
  --few:#736c76; --few-s:#cfc8c2;
  --shadow:0 2px 4px rgba(34,30,36,.05),0 16px 40px rgba(34,30,36,.12);
  --f-head:Unbounded,"Arial Black",sans-serif; --f-ui:Onest,"Helvetica Neue",Arial,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --r:12px; --gut:max(16px,env(safe-area-inset-left,0px));
  --in:cubic-bezier(.23,1,.32,1); --mv:cubic-bezier(.77,0,.175,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#17141a; --surface:#201c23; --sunken:#121014; --ink:#f3f0ec; --muted:#b4adb6; --subtle:#958e98;
  --line:#2f2a33; --line-2:#3d3640; --rec:#e0473d; --rec-h:#c43a31; --on-rec:#fff8f6; --focus:#ff5a4e;
  --night:#0e0c10; --night-edge:rgba(247,245,242,.08);
  --go:#6fd49a; --go-bg:#1d3a2a; --go-s:#4fb07c; --hold:#b9c3d8; --hold-bg:#2a2f3b; --hold-s:#6c7690;
  --stop:#ff8a80; --stop-bg:#45211f; --stop-s:#e0574d; --check:#f2c46b; --check-bg:#3a2e15; --check-s:#c99a3a;
  --few:#958e98; --few-s:#4a434e; --shadow:0 2px 4px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#17141a; --surface:#201c23; --sunken:#121014; --ink:#f3f0ec; --muted:#b4adb6; --subtle:#958e98;
  --line:#2f2a33; --line-2:#3d3640; --rec:#e0473d; --rec-h:#c43a31; --on-rec:#fff8f6; --focus:#ff5a4e;
  --night:#0e0c10; --night-edge:rgba(247,245,242,.08);
  --go:#6fd49a; --go-bg:#1d3a2a; --go-s:#4fb07c; --hold:#b9c3d8; --hold-bg:#2a2f3b; --hold-s:#6c7690;
  --stop:#ff8a80; --stop-bg:#45211f; --stop-s:#e0574d; --check:#f2c46b; --check-bg:#3a2e15; --check-s:#c99a3a;
  --few:#958e98; --few-s:#4a434e; --shadow:0 2px 4px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.5); color-scheme:dark}

*{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--f-ui);overflow-x:hidden;min-height:100svh;display:flex;flex-direction:column}
main{flex:1}
::selection{background:var(--stop-bg);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
a{color:inherit;text-underline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:6px;z-index:50}
.skip:focus{left:8px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut);width:100%}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

.btn,button{font:500 14px/1.2 var(--f-ui);color:var(--ink);cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);text-decoration:none;white-space:nowrap;transition:border-color .15s,background-color .15s,transform .12s}
.btn:hover{border-color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn--rec{background:var(--rec);border-color:var(--rec);color:var(--on-rec)}
.btn--rec:hover{background:var(--rec-h);border-color:var(--rec-h)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--night{background:transparent;border-color:rgba(247,245,242,.32);color:var(--on-night)}
.btn--night:hover{border-color:var(--on-night);background:rgba(247,245,242,.06)}
.btn--l{min-height:52px;padding:14px 24px;font-size:16px;font-weight:600}
.btn--s{min-height:36px;padding:6px 12px;font-size:13px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.link{border:0;background:none;padding:6px 2px;color:var(--muted);text-decoration:underline;font-size:14px}
.link:hover{color:var(--ink)}
.link--danger{color:var(--stop)}
input[type=email],input[type=text]{font:16px var(--f-ui);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;min-width:0;width:100%}
input[type=checkbox]{accent-color:var(--rec);width:20px;height:20px;margin:2px 0 0;flex:none}

/* общий ночной фон: зерно и строки развёртки */
.night{position:relative;background:var(--night);color:var(--on-night);isolation:isolate;overflow:hidden;box-shadow:inset 0 0 0 1px var(--night-edge)}
.night::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.night::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}

/* уголки кадра */
.cr{position:absolute;width:30px;height:30px;border:0 solid currentColor;opacity:.85;transition:transform .35s var(--in);pointer-events:none}
.cr--tl{top:12px;left:12px;border-top-width:2px;border-left-width:2px}
.cr--tr{top:12px;right:12px;border-top-width:2px;border-right-width:2px}
.cr--bl{bottom:12px;left:12px;border-bottom-width:2px;border-left-width:2px}
.cr--br{bottom:12px;right:12px;border-bottom-width:2px;border-right-width:2px}
.rec{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 var(--f-mono);letter-spacing:.08em}
.rec b{width:9px;height:9px;border-radius:50%;background:#e2362c}
.rec--off b{background:#7a727e}

/* экраны кабинета: body[data-screen] ставит pult.js */
.scr{display:none}
body[data-screen="vhod"] .scr--vhod,body[data-screen="kabinet"] .scr--kab,body[data-screen="istoriya"] .scr--hist,
body[data-screen="oplata"] .scr--pay,body[data-screen="udalen"] .scr--gone{display:block}
body[data-screen="load"] .ph__nav,body[data-screen="load"] .ph__me,body[data-screen="load"] .ph__site,body[data-screen="vhod"] .ph__nav,body[data-screen="vhod"] .ph__me,body[data-screen="udalen"] .ph__nav,body[data-screen="udalen"] .ph__me{display:none}
body:not([data-screen="vhod"]):not([data-screen="udalen"]) .ph__site{display:none}

/* ================= ВХОД ================= */
.gate-stage{padding:clamp(28px,5vw,64px) 0 clamp(32px,5vw,72px)}
.gate-stage .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
.gate{position:relative;color:var(--on-night);padding:40px clamp(22px,3vw,40px) 34px}
.gate__rec{margin:0 0 22px;color:var(--night-mut)}
.gate__rec .tc{margin-left:10px;font-variant-numeric:tabular-nums}
.gate h1{margin:0 0 14px;font:700 clamp(38px,5vw,72px)/1.02 var(--f-head);letter-spacing:-.035em}
.gate h1 em{font-style:normal;color:#ff6a5e}
.gate__lead{margin:0 0 26px;color:var(--night-mut);font-size:17px;max-width:30em}
.gate form{display:flex;flex-direction:column;gap:14px;max-width:440px}
.gate label.f{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--night-mut)}
.gate input[type=email]{background:rgba(247,245,242,.06);border-color:rgba(247,245,242,.22);color:var(--on-night);font-size:17px;padding:14px 16px}
.gate input[type=email]::placeholder{color:rgba(247,245,242,.4)}
.gate input[type=email]:focus{border-color:var(--on-night);outline:none;box-shadow:0 0 0 3px rgba(247,245,242,.12)}
.gate .chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--night-mut)}
.gate .chk a{color:var(--on-night)}
.gate .btn--rec{align-self:flex-start}
.gate__msg{margin:0;font-size:14px;color:#ffb4ac;min-height:1.5em}
.gate__ok{margin:0;font-size:14px;color:var(--night-mut)}
/* шесть ячеек кода — как шесть кадров плёнки */
.code{display:grid;grid-template-columns:repeat(6,minmax(0,52px));gap:8px}
.code input{width:100%;aspect-ratio:4/5;text-align:center;font:600 26px/1 var(--f-mono);color:var(--on-night);background:rgba(247,245,242,.05);border:1px solid rgba(247,245,242,.22);border-radius:10px;padding:0;caret-color:#e2362c;transition:border-color .15s,background-color .15s,transform .2s var(--in)}
.code input:focus{outline:none;border-color:var(--on-night);background:rgba(247,245,242,.1)}
.code input.full{border-color:rgba(247,245,242,.55)}
.code.bad input{border-color:#ff8a80;animation:shake .32s var(--mv)}
.code.good input{border-color:#6fd49a;background:rgba(111,212,154,.12)}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.code-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--night-mut)}
.code-meta .link{color:var(--night-mut);font-size:13.5px;padding:0}
.code-meta .link:hover{color:var(--on-night)}

/* стена мониторов */
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mon{position:relative;border-radius:12px;background:#0b0a0d;border:1px solid var(--night-line);overflow:hidden;aspect-ratio:4/3;color:var(--night-mut)}
.mon--big{grid-column:1/-1;aspect-ratio:16/9}
.mon canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.mon__osd{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;gap:8px;font:500 11px/1 var(--f-mono);letter-spacing:.06em;z-index:2}
.mon__ns{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:6px;z-index:2;font:500 12px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.mon__name{position:absolute;left:12px;bottom:10px;z-index:2;font:600 13px/1.2 var(--f-ui);letter-spacing:0;text-transform:none;color:var(--on-night)}
.mon__live{position:absolute;inset:34px 14px 34px;z-index:2;opacity:0}
.mon.on canvas{opacity:0;transition:opacity .4s}
.mon.on .mon__ns{display:none}
.mon.on .mon__live{opacity:1;transition:opacity .3s .2s}
.mon.on{background:#121015}
.mon.soon canvas{opacity:.18;transition:opacity .4s}
.mon.soon .mon__ns{color:var(--on-night)}
.mon .sweep{position:absolute;left:0;right:0;top:0;height:100%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent 0,rgba(247,245,242,.0) 40%,rgba(247,245,242,.6) 50%,rgba(247,245,242,0) 52%,transparent);transform:translateY(-100%)}
.mon.powering .sweep{animation:sweep .5s var(--mv) forwards}
@keyframes sweep{to{transform:translateY(100%)}}

.gate-about{padding:clamp(28px,4vw,48px) 0 clamp(40px,6vw,80px)}
.gate-about .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:62ch}
.lines li{display:flex;gap:14px;align-items:baseline;font-size:17px}
.lines li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--ink);transform:translateY(-2px)}
.lines li:first-child::before{background:var(--rec)}
.gate-about .btn{justify-self:start}

/* ================= КАБИНЕТ ================= */
.hello{padding:28px 0 20px}
.hello .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between}
.hello h1{margin:0;font:700 clamp(26px,3vw,36px)/1.15 var(--f-head);letter-spacing:-.03em}
.hello p{margin:0;color:var(--muted)}
.hello b{font-family:var(--f-mono);font-weight:500;color:var(--ink);font-size:.94em}

.console{padding:clamp(18px,2.4vw,28px) 0}
.console .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.tile{position:relative;border-radius:14px;border:1px solid var(--night-line);background:#121015;overflow:hidden;color:var(--on-night);container-type:inline-size}
.tile--main{grid-column:span 8;grid-row:span 3;padding:18px 20px 20px;display:flex;flex-direction:column;gap:16px;min-height:440px}
.tile--soon{grid-column:span 4;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-height:138px;background:#0b0a0d}
.tile--soon canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.35;z-index:0}
.tile--soon>*:not(canvas){position:relative;z-index:1}
.tile__osd{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;font:500 11.5px/1 var(--f-mono);color:var(--night-mut);letter-spacing:.06em}
.tile__osd .pu-chip{margin-left:auto;font-family:var(--f-ui);letter-spacing:0}
.tile__h{margin:0;font:700 clamp(22px,2.4vw,30px)/1.1 var(--f-head);letter-spacing:-.03em}
.tile__h a{text-decoration:none}
.tile__p{margin:0;color:var(--night-mut);font-size:15px;max-width:44ch}
.tile--soon .tile__h{font-size:17px;margin-top:auto}
.tile--soon .tile__p{font-size:13.5px}
.tile--soon .tile__p a{color:var(--on-night)}
.tile--soon .ns{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--night-mut)}

/* мини-демо на главном мониторе */
.mini{border:1px solid var(--night-line);border-radius:10px;background:rgba(247,245,242,.03);padding:10px 12px;flex:1;min-height:150px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.mini__r{display:grid;grid-template-columns:minmax(0,1fr) 90px 104px;gap:10px;align-items:center;height:30px;font-size:13px;transition:transform .45s var(--mv),opacity .3s}
.mini__r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-mono);font-size:12.5px;color:var(--on-night)}
.mini__r i{display:block;height:6px;border-radius:3px;background:rgba(247,245,242,.25);transform-origin:0 50%;transform:scaleX(var(--w,.5));transition:transform .5s var(--in),background-color .3s}
.mini__r em{font-style:normal;justify-self:end;font-size:12px;font-weight:500;border-radius:999px;padding:3px 9px;opacity:0;transform:scale(.92);transition:opacity .2s,transform .25s var(--in)}
.mini__r em.on{opacity:1;transform:none}
.d-go{background:var(--go-bg);color:var(--go)} .d-stop{background:var(--stop-bg);color:var(--stop)} .d-hold{background:var(--hold-bg);color:var(--hold)} .d-check{background:var(--check-bg);color:var(--check)} .d-few{background:var(--sunken);color:var(--few)}
.mini__r.go i{background:var(--go-s)} .mini__r.stop i{background:var(--stop-s)}

/* монтажная линейка доступа */
.track{display:grid;gap:8px}
.track__top{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.track__big{font:700 34px/1 var(--f-head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.track__big small{font:500 15px var(--f-ui);letter-spacing:0;color:var(--night-mut);margin-left:6px}
.track__d{font:500 13px/1.3 var(--f-mono);color:var(--night-mut);margin-left:auto}
.track__line{position:relative;height:34px;display:flex;gap:3px;align-items:flex-end}
.track__line i{flex:1;height:14px;border-radius:2px;background:rgba(247,245,242,.14);transform-origin:50% 100%}
.track__line i.past{background:rgba(247,245,242,.32)}
.track__line i.left{background:var(--check-s)}
.track__line i.add{background:var(--go-s);opacity:.55}
.track__head.end::before{left:auto;right:6px}
.track[data-mode="pay"] .track__head{display:none}
.track[data-acc="paid"] .track__line i.left{background:var(--go-s)}
.track__line i.wk{height:20px}
.track__head{position:absolute;bottom:-4px;width:2px;height:38px;background:#e2362c;transform:translateX(-1px);transition:left .6s var(--mv)}
.track__head::before{content:"сегодня";position:absolute;top:-2px;left:6px;font:500 10.5px/1 var(--f-mono);color:#ff8a80;white-space:nowrap;letter-spacing:.04em}
.track__ax{display:flex;justify-content:space-between;font:500 11.5px/1 var(--f-mono);color:var(--night-mut)}
.tile__acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tile__acts .note{font-size:13px;color:var(--night-mut);margin:0}
.tile--main[data-acc="ended"] .mini{filter:grayscale(1);opacity:.55}
.tile--main[data-acc="ended"] .track__line i.left{background:rgba(247,245,242,.14)}

@container (max-width:520px){
  .mini__r{grid-template-columns:minmax(0,1fr) 54px 96px}
  .track__d{margin-left:0;width:100%}
}

/* плёнка истории */
.sec{padding:clamp(28px,4vw,48px) 0}
.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-bottom:16px}
.sec__head h2{margin:0;font:700 22px/1.2 var(--f-head);letter-spacing:-.025em}
.film{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fr{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px 16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .15s,transform .2s var(--in)}
.fr:hover{border-color:var(--line-2)}
.fr__tc{display:flex;gap:10px;align-items:center;font:500 12px/1 var(--f-mono);color:var(--subtle);font-variant-numeric:tabular-nums}
.fr__tc .g{font-family:var(--f-ui);border:1px solid var(--line-2);border-radius:999px;padding:3px 8px;color:var(--muted);margin-left:auto}
.fr__t{margin:0;font:600 16px/1.3 var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr__v{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink)}
.dbar{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px}
.dbar i{display:block;height:100%}
.dbar .go{background:var(--go-s)}.dbar .hold{background:var(--hold-s)}.dbar .stop{background:var(--stop-s)}.dbar .check{background:var(--check-s)}.dbar .few{background:var(--few-s)}
.fr__n{display:flex;gap:4px 12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.fr__n b{font-weight:600;font-variant-numeric:tabular-nums}
.fr__n .go b{color:var(--go)}.fr__n .stop b{color:var(--stop)}.fr__n .check b{color:var(--check)}
.fr__acts{display:flex;gap:6px;margin-top:auto;padding-top:4px;flex-wrap:wrap}

.acct{padding:8px 0 56px}
.acct .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;border-top:1px solid var(--line);padding-top:20px;font-size:14px;color:var(--muted)}
.acct .wrap .link--danger{margin-left:auto}

/* ================= ИСТОРИЯ ================= */
.hist-head{padding:28px 0 8px}
.hist-head h1{margin:0 0 6px;font:700 clamp(26px,3vw,36px)/1.15 var(--f-head);letter-spacing:-.03em}
.hist-head p{margin:0;color:var(--muted);max-width:60ch}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--sunken);margin:18px 0 6px}
.seg button{border:0;background:none;border-radius:999px;min-height:38px;padding:7px 16px;color:var(--muted)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(34,30,36,.1)}
.ended-note{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;margin:14px 0 4px;padding:12px 16px;border-radius:12px;background:var(--night);color:var(--night-mut);font-size:14.5px}
.ended-note b{color:var(--on-night);font-weight:600}
.ended-note .btn{margin-left:auto}
.month{margin:22px 0 10px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);display:flex;align-items:center;gap:12px}
.month::after{content:"";height:1px;flex:1;background:var(--line)}
.strip{display:flex;flex-direction:column;gap:10px}
.strip .fr{display:grid;grid-template-columns:120px minmax(0,1fr) 220px auto;gap:6px 22px;align-items:center;padding:14px 18px 14px 34px}
.strip .fr::before{content:"";position:absolute;left:10px;top:10px;bottom:10px;width:8px;background:radial-gradient(circle at 4px 5px,var(--line-2) 2.5px,transparent 3px) 0 0/8px 14px repeat-y}
.strip .fr__tc{flex-direction:column;align-items:flex-start;gap:6px}
.strip .fr__tc .g{margin-left:0}
.strip .fr__mid{min-width:0;display:flex;flex-direction:column;gap:4px}
.strip .fr__acts{margin:0;padding:0;justify-content:flex-end}
.strip .fr__bar{display:flex;flex-direction:column;gap:6px}
.profs{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.pf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.pf h3{margin:0;font:600 16px/1.3 var(--f-ui)}
.pf p{margin:0;font-size:13.5px;color:var(--muted)}
.pf .fr__acts{grid-row:span 2;margin:0;padding:0}
.empty-h{padding:24px;border:1px dashed var(--line-2);border-radius:14px;color:var(--muted);text-align:center}

/* окно записи истории */
.rec-view .lists{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rec-view h3{margin:0 0 6px;font:600 13px/1.2 var(--f-ui)}
.rec-view ul{margin:0;padding:0;list-style:none;font:500 12.5px/1.6 var(--f-mono);color:var(--muted)}
.rec-view .go{color:var(--go)}.rec-view .stop{color:var(--stop)}

/* ================= ОПЛАТА ================= */
.pay{padding:28px 0 64px}
.pay .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:start}
.offer{border-radius:20px;padding:30px clamp(22px,3vw,36px) 28px}
.offer .rec{color:var(--night-mut);margin-bottom:22px}
.offer h1{margin:0 0 6px;font:700 clamp(22px,2.4vw,28px)/1.2 var(--f-head);letter-spacing:-.025em}
.offer__price{display:flex;align-items:baseline;gap:12px;margin:18px 0 6px}
.offer__price b{font:700 clamp(56px,6vw,76px)/1 var(--f-head);letter-spacing:-.04em}
.offer__price span{color:var(--night-mut)}
.offer__p{margin:0 0 20px;color:var(--night-mut);font-size:15px}
.offer .track{margin:8px 0 22px}
.offer .btn--l{width:100%}
.offer__chk{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;font-size:14px;color:var(--night-mut)}
.offer__chk a{color:var(--on-night)}
.offer__msg{margin:12px 0 0;font-size:14px;color:#ffb4ac}
.offer__soon{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:rgba(247,245,242,.07);color:var(--on-night);font-size:14.5px}
.offer__law{margin:14px 0 0;font-size:12.5px;color:var(--night-mut)}
.offer__law a{color:var(--on-night)}
.promo{margin-top:18px;border-top:1px solid var(--night-line);padding-top:16px}
.promo summary{cursor:pointer;color:var(--on-night);font-size:14.5px;list-style:none;display:flex;align-items:center;gap:8px;min-height:32px}
.promo summary::-webkit-details-marker{display:none}
.promo summary::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.promo[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.promo__row{display:flex;gap:8px;margin-top:10px}
.promo input{background:rgba(247,245,242,.06);border-color:rgba(247,245,242,.22);color:var(--on-night);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.promo__ok{margin:10px 0 0;font-size:14px;color:#9fe3bc}
.cmp{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px clamp(18px,2.4vw,28px)}
.cmp h2{margin:0 0 4px;font:700 20px/1.25 var(--f-head);letter-spacing:-.02em}
.cmp>p{margin:0 0 16px;color:var(--muted);font-size:14.5px}
.cmp table{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:11px 8px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.cmp th:first-child,.cmp td:first-child{text-align:left;padding-left:0}
.cmp thead th{font:500 12.5px/1.25 var(--f-ui);color:var(--muted);vertical-align:bottom}
.cmp thead th.me{color:var(--ink)}
.cmp thead th.me::after{content:"сейчас";display:block;margin-top:4px;font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;color:var(--rec)}
.cmp tbody tr:last-child td{border-bottom:0}
.y{color:var(--go);font-weight:600}.n{color:var(--subtle)}
.cmp td.me{background:color-mix(in oklch,var(--sunken) 60%,transparent)}
.cmp .ft{margin:14px 0 0;font-size:13px;color:var(--subtle)}

/* удалён */
.gone{padding:72px 0}
.gone h1{margin:0 0 10px;font:700 clamp(26px,3vw,36px)/1.15 var(--f-head);letter-spacing:-.03em}
.gone p{margin:0 0 20px;color:var(--muted);max-width:52ch}

.foot{padding:20px var(--gut) 88px;border-top:1px solid var(--line);font-size:13px;color:var(--subtle);display:flex;gap:6px 24px;flex-wrap:wrap;justify-content:space-between}
.foot p{margin:0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-size:14px;z-index:40;max-width:calc(100% - 32px)}

/* ---------- телефон ---------- */
@media (max-width:960px){
  .gate-stage .wrap{grid-template-columns:1fr}
  .wall{gap:8px}
  .wall .mon--big{grid-column:1/-1}
  .wall .mon:not(.mon--big){aspect-ratio:4/3}
  .wall .mon__name{font-size:11.5px;left:8px;bottom:7px}
  .wall .mon__osd{display:none}
  .wall .mon:not(.mon--big) .mon__ns{font-size:9.5px}
  .tile--main{grid-column:1/-1;min-height:0}
  .tile--soon{grid-column:span 4}
  .film{grid-template-columns:1fr 1fr}
  .film .fr:nth-child(3){display:none}
  .pay .wrap{grid-template-columns:1fr}
  .strip .fr{grid-template-columns:minmax(0,1fr) auto;padding-left:32px}
  .strip .fr__tc{flex-direction:row;grid-column:1/-1}
  .strip .fr__mid,.strip .fr__bar{grid-column:1/-1}
  .strip .fr__acts{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:640px){
  .gate-stage{padding-top:16px}
  .gate{padding:30px 18px 26px}
  .gate .btn--rec{align-self:stretch}
  .code{gap:6px}
  .code input{font-size:22px}
  .gate-about .wrap{grid-template-columns:1fr}
  .lines li{font-size:16px}
  .console .wrap{gap:10px}
  .tile--main{padding:16px 14px}
  .tile--soon{grid-column:1/-1;min-height:0}
  .tile--soon .tile__h{margin-top:6px}
  .track__big{font-size:28px}
  .film{grid-template-columns:1fr}
  .film .fr:nth-child(n+3){display:none}
  .acct .wrap .link--danger{margin-left:0}
  .tile__acts .btn{flex:1}
  .ended-note .btn{margin-left:0;width:100%}
  .cmp{padding-inline:14px}
  .cmp th,.cmp td{padding:10px 4px;font-size:13.5px}
  .rec-view .lists{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .mon.powering .sweep{animation:none}
  .code.bad input{animation:none}
  .mini__r,.mini__r i,.mini__r em,.track__head{transition:none}
}

/* ================= ЭТАП 4: плитки набора, конструктор, результаты, покупки, люди ================= */
body[data-screen="rezultaty"] .scr--res,body[data-screen="pokupki"] .scr--buy,body[data-screen="lyudi"] .scr--team{display:block}
body[data-screen="load"] .ph__nav a,body[data-screen="vhod"] .ph__nav a{display:none}
.console .tile--main{grid-column:1/-1;grid-row:auto;min-height:0}
.tiles-more{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:14px}
.tile--sm{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;min-height:150px}
.tile--sm[data-on="0"]{background:#0b0a0d;opacity:.82}
.tile--sm .tile__h{font-size:17px;margin:0}
.tile--sm .tile__p{font-size:13.5px}
.tile--sm .lim{display:flex;flex-wrap:wrap;gap:4px 10px;font:500 12px/1.3 var(--f-mono);color:var(--night-mut)}
.tile--sm .lim b{color:var(--on-night);font-weight:600}
.tile--sm .bar{height:5px;border-radius:3px;background:rgba(247,245,242,.14);overflow:hidden}
.tile--sm .bar i{display:block;height:100%;background:var(--go-s);transform-origin:0 50%}
.tile--sm .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.tile--sm .acts a{color:var(--on-night);font-size:13.5px}
.nb .wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.nb__kinds{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--sunken);flex-wrap:wrap}
.nb__kind{border:0;background:none;border-radius:999px;min-height:40px;padding:8px 16px;color:var(--muted)}
.nb__kind[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(34,30,36,.12)}
.nb__hint{margin:12px 0 14px;color:var(--muted);font-size:14.5px}
.nb__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px}
.nb__t{display:flex;gap:12px;align-items:flex-start;padding:14px 14px 12px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .15s}
.nb__t:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.nb__t input{accent-color:var(--rec);width:20px;height:20px;margin:2px 0 0;flex:none}
.nb__t b{display:block;font-weight:600}
.nb__t small{display:block;color:var(--muted);font-size:13px;line-height:1.4;margin-top:2px}
.nb__t .pr{font:600 13px/1.3 var(--f-mono);color:var(--ink);margin-top:6px}
.nb__t[data-dis="1"]{opacity:.55;cursor:default}
.nb__per{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.nb__per button{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;min-height:40px;padding:8px 14px}
.nb__per button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nb__sum{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--night-mut)}
.nb__sum b{color:var(--on-night);font-weight:600}
.offer #invBtn{width:100%;margin-top:8px}
.folder{margin:18px 0}
.folder__h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;margin:0 0 8px;font:600 17px/1.3 var(--f-ui)}
.folder ul,.buy{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.folder li,.buy li{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:baseline;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14px}
.folder li .d,.buy li .d{font:500 12.5px/1.2 var(--f-mono);color:var(--subtle)}
.folder li a,.buy li a{color:var(--ink)}
.team__inv{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;max-width:560px}
.team__inv .f{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);flex:1 1 260px}
.team__h{margin:28px 0 6px;font:700 20px/1.25 var(--f-head);letter-spacing:-.02em}
@media (max-width:960px){.nb .wrap{grid-template-columns:1fr}}

/* Пульт — общий слой кабинета (задание 47).
   Подключается и в кабинете (поверх pult.css), и в «Эффективности» внутри пульта (поверх app.css окна).
   Опирается только на переменные, которые есть в обоих: --paper --surface --sunken --ink --muted --subtle --line --line-2
   --rec --rec-h --on-rec --night --on-night --night-mut --night-line --go* --stop* --check* --hold* --f-head --f-ui --f-mono --in --gut. */

/* ---------- шапка кабинета ---------- */
.ph{position:relative;z-index:20;display:flex;align-items:center;gap:10px 18px;padding:12px var(--gut);border-bottom:1px solid var(--line);background:var(--paper);flex-wrap:wrap;view-transition-name:pult-head}
.ph .brand{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.ph .brand__logo{display:block;height:22px;width:auto}
.ph .brand__logo--d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ph .brand__logo--l{display:none}:root:not([data-theme="light"]) .ph .brand__logo--d{display:block}}
:root[data-theme="dark"] .ph .brand__logo--l{display:none}:root[data-theme="dark"] .ph .brand__logo--d{display:block}
.ph__t{display:inline-flex;align-items:center;gap:8px;padding-left:16px;border-left:1px solid var(--line-2);font:700 15px/1 var(--f-head);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.ph__rec{width:8px;height:8px;border-radius:50%;background:var(--rec);flex:none}
.ph__tool{font:600 14px/1.2 var(--f-ui);white-space:nowrap;color:var(--muted)}
.ph__tool::before{content:"/";margin-right:10px;color:var(--line-2)}
.ph__nav{display:flex;gap:4px;margin-left:8px}
.ph__nav a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:999px;text-decoration:none;font-size:14px;color:var(--muted);transition:background-color .15s,color .15s}
.ph__nav a:hover{color:var(--ink);background:var(--sunken)}
.ph__nav a[aria-current="page"]{color:var(--ink);background:var(--sunken);font-weight:500}
.ph__n{font:500 11px/1 var(--f-mono);min-width:20px;padding:3px 6px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);text-align:center;transition:transform .3s var(--in)}
.ph__n.bump{animation:phBump .5s var(--in)}
@keyframes phBump{30%{transform:scale(1.35);background:var(--go-bg);border-color:var(--go-s)}}
.ph__me{margin-left:auto;display:flex;align-items:center;gap:6px}
.ph__mail{font:500 13px/1.2 var(--f-mono);color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph__out{border:0;background:none;min-height:36px;padding:6px 10px;border-radius:999px;font:500 14px var(--f-ui);color:var(--ink);cursor:pointer}
.ph__out:hover{background:var(--sunken)}
.ph__site{margin-left:auto;font-size:14px;color:var(--muted);text-decoration:none;padding:8px 10px}
.ph__site:hover{color:var(--ink)}
@media (max-width:760px){
  .ph{padding-block:10px;gap:8px 12px}
  .ph__mail{display:none}
  .ph__tool{display:none}
  .ph__nav{order:5;width:100%;margin:0 -6px;overflow-x:auto;scrollbar-width:none}
  .ph__nav a{min-height:40px}
}

/* ---------- чип доступа ---------- */
.pu-chip{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:4px 11px;border-radius:999px;font:500 12.5px/1.2 var(--f-ui);white-space:nowrap;border:1px solid transparent}
.pu-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pu-chip--trial{color:var(--check);background:var(--check-bg)}
.pu-chip--paid{color:var(--go);background:var(--go-bg)}
.pu-chip--ended{color:var(--muted);background:var(--sunken);border-color:var(--line-2)}
.pu-chip--soon{color:var(--night-mut);background:transparent;border-color:var(--night-line)}
.pu-chip--soon::before{background:transparent;border:1px solid currentColor}

/* ---------- полоса доступа над инструментом ---------- */
.pu-strip{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:10px var(--gut);border-bottom:1px solid var(--line);background:var(--surface);font-size:14px}
.pu-strip__t{margin:0;min-width:0;flex:1 1 320px}
.pu-strip__t b{font-weight:600}
.pu-strip__days{display:flex;gap:3px;flex:none}
.pu-strip__days i{width:14px;height:6px;border-radius:2px;background:var(--line-2)}
.pu-strip__days i.on{background:var(--check-s)}
.pu-strip__days i.now{background:var(--rec)}
.pu-strip--ended{background:var(--night);color:var(--on-night);border-bottom-color:transparent}
.pu-strip--ended .pu-strip__t{color:var(--night-mut)}
.pu-strip--ended .pu-strip__t b{color:var(--on-night)}
.pu-strip .pu-strip__go{margin-left:auto}

/* ---------- замок у функций, которые закрыты после окончания доступа ---------- */
.pu-lock{position:relative}
.pu-lock[data-locked]{opacity:.62;cursor:not-allowed}
.pu-lock[data-locked]::after{content:"";display:inline-block;width:12px;height:12px;margin-left:2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 5V3.8a2.5 2.5 0 0 1 5 0V5' fill='none' stroke='black' stroke-width='1.4'/%3E%3Crect x='2' y='5' width='8' height='6' rx='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 5V3.8a2.5 2.5 0 0 1 5 0V5' fill='none' stroke='black' stroke-width='1.4'/%3E%3Crect x='2' y='5' width='8' height='6' rx='1.4'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- кнопки пульта рядом с выводом ---------- */
.pu-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pu-save{display:inline-flex;align-items:center;gap:8px}
.pu-save svg{flex:none}
.pu-save.done{border-color:var(--go-s);color:var(--go)}

/* ---------- окно-диалог (сохранить, профиль, удаление, запись истории) ---------- */
.pu-dlg{border:0;border-radius:18px;padding:0;width:min(520px,calc(100vw - 24px));max-height:calc(100svh - 32px);background:var(--surface);color:var(--ink);box-shadow:var(--shadow, 0 16px 40px rgba(34,30,36,.18))}
.pu-dlg::backdrop{background:color-mix(in oklch,var(--night) 55%,transparent)}
.pu-dlg[open]{animation:puIn .22s var(--in)}
@keyframes puIn{from{opacity:0;transform:translateY(16px) scale(.97)}}
.pu-dlg form,.pu-dlg .pu-dlg__in{padding:24px 24px 20px;display:flex;flex-direction:column;gap:14px}
.pu-dlg h2{margin:0;font:700 20px/1.25 var(--f-head);letter-spacing:-.02em}
.pu-dlg p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.pu-dlg label.pu-f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.pu-dlg label.pu-f input{font-size:16px;padding:11px 12px;border-radius:10px;color:var(--ink)}
.pu-dlg__acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.pu-dlg__what{font-size:13px;color:var(--subtle);background:var(--sunken);border-radius:10px;padding:10px 12px;margin:0}
.pu-dlg__what b{color:var(--ink);font-weight:500}
.pu-danger{background:var(--stop)!important;border-color:var(--stop)!important;color:#fff8f6!important}
.pu-danger:disabled{opacity:.45;cursor:not-allowed}

/* ---------- список профилей настроек во всплывашке ---------- */
.pu-prof{min-width:280px;max-width:min(360px,calc(100vw - 24px))}
.pu-prof ul{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:2px}
.pu-prof li button{width:100%;text-align:left;border:0;background:none;padding:9px 10px;border-radius:8px;display:flex;flex-direction:column;gap:2px;font:500 14px var(--f-ui);color:var(--ink);cursor:pointer}
.pu-prof li button:hover{background:var(--sunken)}
.pu-prof li small{font-weight:400;font-size:12.5px;color:var(--subtle)}


@media (prefers-reduced-motion:reduce){.pu-dlg[open],.ph__n.bump{animation:none}}
@media (max-width:640px){#stepResult .ctx .pu-tools{flex:1 1 100%;margin-top:6px}}

/* после окончания доступа: строка «посчитали 30 из N», печать Свода закрыта */
.pu-cut{margin:10px 0 0;padding:10px 14px;border-radius:10px;background:var(--check-bg);color:var(--check);font-size:14px}
.pu-cut a{color:inherit}
@media print{html.pu-ended #main,html.pu-ended .ph,html.pu-ended .pu-strip,html.pu-ended .stepbar,html.pu-ended .foot{display:none!important}
  html.pu-ended body::after{content:"Печать Свода — в полном доступе пульта Медиа Обс.";display:block;padding:40px;font:16px sans-serif}}

/* окно входа прямо на странице инструмента */
.pu-dlg .pu-chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--muted)}
.pu-dlg .pu-chk input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--rec)}
.pu-dlg .pu-chk a{color:var(--ink)}
.pu-dlg #puLg1,.pu-dlg #puLg2{display:flex;flex-direction:column;gap:12px}
.pu-dlg #puLg1[hidden],.pu-dlg #puLg2[hidden]{display:none}
.pu-cut .link{font-size:14px;color:inherit;padding:0;font-weight:600}

/* открытая страница (этап 3): «Как считаем» и вопросы под инструментом */
.pu-how{border-top:1px solid var(--line);background:var(--surface);padding:clamp(40px,6vw,80px) var(--gut)}
.pu-how__in{max-width:1240px;margin:0 auto}
.pu-how__h{margin:0 0 20px;font:700 clamp(22px,2.6vw,30px)/1.2 var(--f-head);letter-spacing:-.025em}
.pu-how__h:not(:first-child){margin-top:48px}
.pu-how__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px 32px}
.pu-how__s h3{margin:0 0 8px;font:600 18px/1.3 var(--f-ui)}
.pu-how__s p,.pu-how__s li,.pu-how .faq__a p{margin:0 0 10px;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:65ch}
.pu-how__s ul{margin:0 0 10px;padding-left:20px}
.pu-how .faq{max-width:880px}
.pu-how .faq__item{border-bottom:1px solid var(--line)}
.pu-how .faq__item summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:44px;padding:18px 0;font:600 17px/1.4 var(--f-ui);cursor:pointer;list-style:none}
.pu-how .faq__item summary::-webkit-details-marker{display:none}
.pu-how .faq__item summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font:500 18px/1 var(--f-ui);color:var(--muted)}
.pu-how .faq__item[open] summary::after{content:"−"}
.pu-how .faq__a{padding:0 0 18px}

/* ---------- этап 5: оплата по счёту, ранний доступ ---------- */
.bill{margin-top:14px;display:grid;gap:10px;border-top:1px solid var(--night-line);padding-top:14px}
.bill[hidden]{display:none}
.bill__h{margin:0;font-size:14px;line-height:1.45;color:rgba(247,245,242,.78)}
.bill__kind{display:flex;gap:18px;color:var(--on-night);font-size:15px}
.bill__kind label{display:flex;align-items:center;gap:6px;min-height:32px;cursor:pointer}
.bill .fld{display:grid;gap:4px;color:rgba(247,245,242,.78);font-size:13.5px}
.bill .fld[hidden]{display:none}
.bill input[type=text],.bill input[type=email]{width:100%;background:rgba(247,245,242,.06);border:1px solid rgba(247,245,242,.22);border-radius:8px;color:var(--on-night);padding:10px 12px;font:inherit;font-size:15px}
.bill input:focus-visible{outline:2px solid var(--on-night);outline-offset:1px}
.bill-done{margin-top:14px;border-top:1px solid var(--night-line);padding-top:14px;color:var(--on-night);font-size:14.5px;line-height:1.45}
.bill-done h3{margin:0 0 8px;font-size:18px}
.bill-done dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 10px}
.bill-done dt{color:rgba(247,245,242,.65)}
.bill-done dd{margin:0}
.bill-done__acts{display:flex;flex-wrap:wrap;gap:8px}
.early-box{grid-column:1/-1;border:1px solid rgba(247,245,242,.18);border-radius:12px;padding:18px 20px;color:var(--on-night);display:grid;gap:8px;justify-items:start}
.early-box[hidden]{display:none}
.early-box h2{margin:0;font-size:20px}
.early-box p{margin:0;font-size:14.5px;line-height:1.45;color:rgba(247,245,242,.8)}
.early-slot[hidden]{display:none}
.early-slot{grid-column:1/-1;margin:0 0 8px}
.early-slot .early-box{max-width:none;grid-template-columns:1fr auto;align-items:center}
.early-slot .early-box > .rec,.early-slot .early-box > h2,.early-slot .early-box > p:not(.early-box__acts){grid-column:1}
.early-slot .early-box__acts{grid-column:2;grid-row:1/span 3}
@media (max-width:860px){.early-slot .early-box{grid-template-columns:1fr}.early-slot .early-box__acts{grid-column:1;grid-row:auto}}
.early-slot .early-box,.nb__pick .early-box{margin-bottom:16px}
.nb__pick .early-box{background:#1d1a20}
.early-box__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.early-box__acts .link{color:var(--on-night)}