/* ============================================================
   Экран входа, вариант B «Пульт владельца».
   Самостоятельный файл, с общими стилями системы не связан.

   Слева панель владельца, парящая в тёмном пространстве: деньги
   на человека против нормы и тарифа, фудкост, склад в тенге,
   раздача, закладка и обе столовые. При загрузке шум за две
   секунды собирается в систему, как стрелки часов. Справа смысл
   и форма.

   Цвет со смыслом, как во всей системе: зелёный «в порядке»,
   янтарный «посмотри», красный «ошибка и потери». Латунь только
   для эталонов: тариф и норма, то, с чем сверяются.
   ============================================================ */

:root{
  --bg-0:#040b08;          /* почти чёрный с хвойным подтоном */
  --bg-1:#08160f;
  --pine:#0f2a20;          /* фирменный тёмно-зелёный системы, углублённый */
  --surface:rgba(16,38,30,.72);
  --surface-2:rgba(22,48,38,.6);
  --hair:rgba(196,236,218,.09);
  --hair-2:rgba(196,236,218,.16);

  --text:#eef5f1;
  --text-2:#a9bdb4;
  --muted:#71897f;

  --ok:#52d69a;
  --ok-deep:#1f8a5e;
  --ok-soft:rgba(82,214,154,.14);
  --brass:#cdb07a;
  --brass-soft:rgba(205,176,122,.10);
  --warn:#f0b54a;
  --warn-soft:rgba(240,181,74,.13);
  --bad:#ff6e61;
  --bad-soft:rgba(255,110,97,.12);

  --focus:#8fd8ff;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display",
         "Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg-0)}

body.vhod-b{
  margin:0;min-height:100vh;min-height:100dvh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,520px);
  font-family:var(--font);font-size:16px;line-height:1.5;color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 1;
  background:
    radial-gradient(60% 70% at 30% 46%, rgba(40,120,86,.30), transparent 70%),
    radial-gradient(40% 50% at 92% 100%, rgba(205,176,122,.07), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, var(--bg-1), var(--bg-0) 70%);
  overflow-x:hidden;
}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Сцена с пультом ---------- */

.stsena{
  position:relative;
  display:grid;place-items:center;
  padding:56px 48px 56px 64px;
  min-height:100dvh;
  isolation:isolate;
}
/* Тонкая сетка, гаснущая к краям: пространство, а не миллиметровка. */
.stsena::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(196,236,218,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,236,218,.045) 1px, transparent 1px);
  background-size:48px 48px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(70% 70% at 45% 50%, #000 30%, transparent 80%);
          mask-image:radial-gradient(70% 70% at 45% 50%, #000 30%, transparent 80%);
}

.pult{
  --u:1cqw;                       /* единица чертежа: сотая ширины пульта */
  position:relative;
  container-type:inline-size;
  width:min(100%, 880px, calc((100dvh - 112px) * 1.36));
  aspect-ratio:1.36;
  transform:perspective(2400px) rotateX(7deg) rotateY(-9deg) rotateZ(.6deg);
  transform-style:flat;
}

/* Безель часов за панелью. */
.bezel{
  position:absolute;left:50%;top:50%;z-index:0;
  width:116%;aspect-ratio:1;transform:translate(-50%,-50%);
  overflow:visible;pointer-events:none;
}
.bezel-krug{fill:none;stroke:rgba(205,176,122,.10);stroke-width:.3}
.bezel-krug.k2{stroke:rgba(196,236,218,.05)}
.bezel line{
  stroke:rgba(205,176,122,.20);stroke-width:.35;stroke-linecap:round;
  transform:rotate(var(--ugol));
}
.bezel line.d5{stroke:rgba(205,176,122,.42);stroke-width:.55}

/* ---------- Карточки ---------- */

.karta{
  position:absolute;z-index:1;
  display:flex;flex-direction:column;
  padding:calc(var(--u) * 2.1);
  border-radius:calc(var(--u) * 1.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 40%),
    var(--surface);
  border:1px solid var(--hair);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * -2) rgba(0,0,0,.65),
    0 0 0 1px rgba(0,0,0,.25);
  color:var(--text);
  overflow:hidden;
}

.k-glav  {left:0;   top:0;   width:63%; height:58%; border-radius:calc(var(--u) * 2.2); z-index:3;
          background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 35%), rgba(14,34,27,.86)}
.k-fud   {left:66%; top:0;   width:34%; height:31%}
.k-sklad {left:66%; top:34%; width:34%; height:24%}
.k-razd  {left:0;   top:62.5%; width:38%; height:37.5%}
.k-karta {left:41%; top:62.5%; width:26%; height:37.5%; padding:0}
.k-zakl  {left:70%; top:62.5%; width:30%; height:37.5%}
.korotko{display:none}

.k-shapka{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 1)}
.k-nazv{font-size:calc(var(--u) * 1.5);line-height:1.3;color:var(--text-2);font-weight:500;letter-spacing:.005em}
.mel{font-size:calc(var(--u) * 1.3);color:var(--muted)}
.val{color:var(--text-2);font-weight:400}

/* Статус: в шуме красный «Перерасход», в системе зелёный «Под контролем». */
.status{
  position:relative;display:inline-grid;white-space:nowrap;
  font-size:calc(var(--u) * 1.6);font-weight:600;line-height:1;
}
.status > span{
  grid-area:1/1;display:inline-flex;align-items:center;gap:calc(var(--u) * .55);
  padding:calc(var(--u) * .65) calc(var(--u) * 1.05);border-radius:999px;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.status-shum{color:var(--bad);background:var(--bad-soft);opacity:0}
.status-ok{color:var(--ok);background:var(--ok-soft);box-shadow:inset 0 0 0 1px rgba(82,214,154,.25)}
.status-ok svg{width:calc(var(--u) * 1.3);height:calc(var(--u) * 1.3);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.k-glav-cifry{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u) * 2);margin-top:calc(var(--u) * 1.2)}
.bolshoe{
  font-size:calc(var(--u) * 6.4);line-height:.95;font-weight:300;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.bolshoe .val{font-size:.5em;margin-left:.18em;letter-spacing:0}
.ryad{display:flex;gap:calc(var(--u) * 2.4);margin:0 0 calc(var(--u) * .4)}
.ryad div{display:flex;flex-direction:column;gap:calc(var(--u) * .3)}
.ryad dt{font-size:calc(var(--u) * 1.2);color:var(--muted);white-space:nowrap}
.ryad dd{margin:0;font-size:calc(var(--u) * 1.9);font-weight:500;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.ok-cvet{color:var(--ok)}

.grafik-zona{position:relative;flex:1;min-height:0;margin-top:calc(var(--u) * 1.6)}
.grafik{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Запас до тарифа: деньги, которые остаются с каждого человека. */
.zapas{
  position:absolute;right:7%;top:6.65%;bottom:22.6%;width:calc(var(--u) * .9);
  border:1px solid rgba(82,214,154,.55);border-left:0;
  transition:opacity .6s ease .2s;
}
.zapas > span{
  position:absolute;right:calc(var(--u) * 2);top:50%;transform:translateY(-50%);
  font-size:calc(var(--u) * 1.2);line-height:1.35;color:var(--text-2);text-align:right;white-space:nowrap;
}
.zapas b{font-size:calc(var(--u) * 2.2);font-weight:400;color:var(--ok);letter-spacing:-.02em}
html.anim .pult:not(.gotovo) .zapas{opacity:0;transition-delay:0s}
.setka path{stroke:rgba(196,236,218,.06);stroke-width:1;vector-effect:non-scaling-stroke}
.koridor{fill:var(--brass-soft);stroke:rgba(205,176,122,.28);stroke-width:1;stroke-dasharray:0;vector-effect:non-scaling-stroke}
.tarif{stroke:var(--brass);stroke-width:1.2;stroke-dasharray:5 5;vector-effect:non-scaling-stroke;opacity:.8}
.zaliv{fill:url(#g-zaliv)}
.liniya{fill:none;stroke:var(--ok);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vspleski circle{fill:var(--bad);vector-effect:non-scaling-stroke}
.seichas{fill:var(--ok);stroke:rgba(82,214,154,.3);stroke-width:8;vector-effect:non-scaling-stroke}

.podpisi-grafika{
  display:flex;justify-content:space-between;margin-top:calc(var(--u) * .8);
  font-size:calc(var(--u) * 1.15);color:var(--muted);
}
.p-tarif{color:var(--brass)}
.p-norma::before{
  content:"";display:inline-block;width:calc(var(--u) * 1.4);height:calc(var(--u) * .7);
  margin-right:calc(var(--u) * .5);vertical-align:middle;border-radius:2px;
  background:var(--brass-soft);box-shadow:inset 0 0 0 1px rgba(205,176,122,.35);
}

/* Фудкост кольцом. Латунная дуга до 62 % — норма, зелёная — факт. */
.k-fud{align-items:flex-start}
.kolco{position:relative;flex:1;align-self:stretch;display:grid;place-items:center;min-height:0;margin-top:calc(var(--u) * .6)}
.kolco svg{height:100%;max-height:100%;aspect-ratio:1;transform:rotate(-90deg);overflow:visible}
.kolco circle{fill:none;stroke-width:7}
.kolco-fon{stroke:rgba(196,236,218,.07)}
.kolco-norma{stroke:rgba(205,176,122,.35);stroke-dasharray:194.8 400;stroke-width:1.5;transform:scale(1.16);transform-origin:60px 60px}
.kolco-znach{stroke:var(--ok);stroke-linecap:round;stroke-dasharray:188.5 400;transition:stroke-dasharray 1.6s cubic-bezier(.2,.8,.2,1), stroke .5s}
.kolco-tekst{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:calc(var(--u) * .2)}
.kolco-tekst b{font-size:calc(var(--u) * 3.6);font-weight:300;line-height:1;letter-spacing:-.03em}
.kolco-tekst small{font-size:.5em;color:var(--text-2);margin-left:.08em}
.kolco-tekst > span{font-size:calc(var(--u) * 1.1);color:var(--muted)}

/* Склад */
.sredn{margin-top:calc(var(--u) * .8);font-size:calc(var(--u) * 3.3);font-weight:300;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.sredn .val{font-size:.45em;letter-spacing:0}
.stolbiki{flex:1;display:flex;align-items:flex-end;gap:calc(var(--u) * .45);margin:calc(var(--u) * 1) 0 calc(var(--u) * .8);min-height:0}
.stolbiki i{
  flex:1;height:calc(var(--h) * 100%);border-radius:calc(var(--u) * .3) calc(var(--u) * .3) 1px 1px;
  background:linear-gradient(180deg, rgba(82,214,154,.55), rgba(82,214,154,.12));
  transform-origin:bottom;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.stolbiki i:last-child{background:linear-gradient(180deg, var(--ok), rgba(82,214,154,.25))}

/* Раздача */
.priemy{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:calc(var(--u) * 1.15)}
.priemy li{display:grid;grid-template-columns:calc(var(--u) * 7) 1fr calc(var(--u) * 3.6);align-items:center;gap:calc(var(--u) * 1);font-size:calc(var(--u) * 1.3);color:var(--text-2)}
.priemy i{
  height:calc(var(--u) * .7);border-radius:99px;background:rgba(196,236,218,.07);position:relative;overflow:hidden;
}
.priemy i::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg, rgba(82,214,154,.35), var(--ok));
  transform-origin:left;transform:scaleX(var(--d));
  transition:transform 1.3s cubic-bezier(.2,.8,.2,1);
}
.priemy b{font-weight:500;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}

/* Закладка */
.zakl{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:calc(var(--u) * .5)}
.zakl li{
  display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u) * 1);
  padding:calc(var(--u) * .75) calc(var(--u) * 1);border-radius:calc(var(--u) * .8);
  font-size:calc(var(--u) * 1.25);color:var(--text-2);
  transition:background .5s, color .5s;
}
.zakl li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zakl b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.zakl .ok b{color:var(--ok)}
.zakl .smotri{background:var(--warn-soft);color:var(--text)}
.zakl .smotri b{color:var(--warn)}

/* Карта ВКО */
.k-karta .k-nazv{position:absolute;left:calc(var(--u) * 2.1);top:calc(var(--u) * 2.1);z-index:1}
.vko{position:absolute;inset:0;width:100%;height:100%;padding:calc(var(--u) * 4.6) calc(var(--u) * 1) calc(var(--u) * 1.4)}
.vko-tochki{fill:url(#vko-tochki)}
#vko-tochki circle{fill:rgba(196,236,218,.26)}
.vko-kontur{fill:none;stroke:rgba(196,236,218,.14);stroke-width:.6;stroke-linejoin:round}
.vko-put{fill:none;stroke:rgba(82,214,154,.55);stroke-width:.9;stroke-dasharray:2 2}
.tochka .yadro{fill:var(--ok)}
.tochka .puls{fill:rgba(82,214,154,.16);stroke:rgba(82,214,154,.4);stroke-width:.6}
.metka{
  position:absolute;font-size:calc(var(--u) * 1.15);color:var(--text);font-weight:500;
  padding:calc(var(--u) * .3) calc(var(--u) * .6);border-radius:calc(var(--u) * .5);
  background:rgba(4,11,8,.7);border:1px solid var(--hair);white-space:nowrap;
}
.metka b{font-weight:500;color:var(--ok);margin-left:.35em}
.m1{left:9%;top:24%}
.m2{right:6%;top:79%}

/* Красные всплески потерь: живут только в шуме. */
.poterya{
  position:absolute;z-index:4;pointer-events:none;opacity:0;
  font-size:calc(var(--u) * 1.6);font-weight:600;color:var(--bad);white-space:nowrap;
  padding:calc(var(--u) * .4) calc(var(--u) * .8);border-radius:calc(var(--u) * .6);
  background:rgba(40,8,6,.75);border:1px solid rgba(255,110,97,.35);
  box-shadow:0 0 calc(var(--u) * 3) rgba(255,110,97,.25);
}
.pt1{left:40%;top:22%}
.pt2{left:72%;top:47%}
.pt3{left:12%;top:70%}

/* ---------- Шум: исходное состояние анимации ----------
   Включается только классом anim на html (его ставит скрипт в шапке,
   если человек не просил меньше движения). Без него сразу система. */

.karta{
  transition:
    transform 1.7s cubic-bezier(.3,.7,.2,1) var(--z, 0s),
    opacity .8s ease var(--z, 0s),
    border-color 1s ease;
}
.k-fud{--z:.08s}.k-sklad{--z:.16s}.k-razd{--z:.12s}.k-karta{--z:.22s}.k-zakl{--z:.28s}
.bezel line{transition:transform 1.3s cubic-bezier(.16,.84,.24,1) calc(var(--pauza) + .1s), stroke .8s}
.poterya{transition:opacity .9s ease .2s}
.metka b{transition:opacity .6s ease 1.2s}

html.anim .pult:not(.sobran) .karta{border-color:rgba(255,110,97,.18)}
html.anim .pult:not(.sobran) .k-glav {transform:translate(-5%, 7%) rotate(-6deg)}
html.anim .pult:not(.sobran) .k-fud  {transform:translate(14%, -22%) rotate(11deg)}
html.anim .pult:not(.sobran) .k-sklad{transform:translate(-30%, 34%) rotate(-14deg)}
html.anim .pult:not(.sobran) .k-razd {transform:translate(12%, 22%) rotate(8deg)}
html.anim .pult:not(.sobran) .k-karta{transform:translate(-14%, -30%) rotate(-17deg);opacity:.55}
html.anim .pult:not(.sobran) .k-zakl {transform:translate(22%, 10%) rotate(15deg)}
html.anim .pult:not(.sobran) .metka b{opacity:0}
html.anim .pult:not(.sobran) .bezel line{transform:rotate(calc(var(--ugol) + var(--sdvig)));stroke:rgba(255,110,97,.35)}
html.anim .pult:not(.sobran) .poterya{opacity:1;animation:drozh .18s steps(2) infinite}
html.anim .pult:not(.sobran) .kolco-znach{stroke-dasharray:276 400;stroke:var(--bad)}
html.anim .pult:not(.sobran) .stolbiki i:nth-child(odd){transform:scaleY(1.35)}
html.anim .pult:not(.sobran) .stolbiki i:nth-child(3n){transform:scaleY(.35)}
html.anim .pult:not(.sobran) .priemy li:nth-child(odd) i::after{transform:scaleX(calc(var(--d) * .4))}
html.anim .pult:not(.sobran) .priemy li:nth-child(even) i::after{transform:scaleX(1)}
html.anim .pult:not(.sobran) .zakl li{background:var(--bad-soft)}
html.anim .pult:not(.sobran) .zakl b{color:var(--bad)}
html.anim .pult:not(.sobran) .liniya{stroke:#ff8f6b}

/* Пока система собирается, статус ещё красный, зелёный загорается в конце. */
html.anim .pult:not(.gotovo) .status-shum{opacity:1}
html.anim .pult:not(.gotovo) .status-ok{opacity:0;transform:scale(.92)}
.liniya{transition:stroke 1.2s ease .3s}
html.anim .pult.gotovo .status-ok{animation:zagoraetsya 1.4s ease-out}
html.anim .pult.gotovo .tochka .puls{animation:puls 1.6s ease-out 2}
html.anim .pult.gotovo .tochka.t2 .puls{animation-delay:.35s}

/* Потери полностью гаснут по мере сборки */
html.anim .pult.sobran .poterya{opacity:0}

@keyframes drozh{
  0%{transform:translate(0,0)}
  50%{transform:translate(2px,-1px)}
  100%{transform:translate(-1px,1px)}
}
@keyframes zagoraetsya{
  0%{box-shadow:inset 0 0 0 1px rgba(82,214,154,.25), 0 0 0 0 rgba(82,214,154,.55)}
  100%{box-shadow:inset 0 0 0 1px rgba(82,214,154,.25), 0 0 0 calc(var(--u) * 1.6) rgba(82,214,154,0)}
}
@keyframes puls{
  0%{transform:scale(.4);opacity:1}
  100%{transform:scale(1.8);opacity:0}
}
.tochka .puls{transform-box:fill-box;transform-origin:center}

/* ---------- Сторона формы ---------- */

.storona{
  position:relative;
  display:flex;align-items:center;
  padding:56px 64px 56px 40px;
}
.storona-vnutri{width:100%;max-width:408px}
.zagolovok span{display:block}

.marka{display:flex;align-items:center;gap:10px;margin-bottom:56px}
.marka-mob{display:none}
.marka-znak{width:32px;height:32px;flex:none}
.marka-znak rect{fill:var(--pine);stroke:rgba(205,176,122,.4);stroke-width:1}
.marka-deleniya path{stroke:var(--brass);stroke-width:1.3;stroke-linecap:round;opacity:.85}
.marka-strelka{stroke:var(--text);stroke-width:1.8;stroke-linecap:round}
.marka-znak circle{fill:var(--ok)}
.marka-imya{font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--text)}

.zagolovok{
  margin:0;
  font-size:clamp(30px, 2.65vw, 40px);line-height:1.1;font-weight:600;
  letter-spacing:-.032em;
  background:linear-gradient(180deg, #fff 40%, #d3e2db);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pod{margin:16px 0 0;font-size:16px;line-height:1.5;color:var(--text-2);max-width:30em;text-wrap:pretty}

.forma-blok{
  margin-top:40px;padding:28px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -30px rgba(0,0,0,.7);
}
.forma-zag{margin:0 0 20px;font-size:17px;font-weight:600;letter-spacing:-.01em}

.forma{display:grid;gap:16px}
.pole{display:grid;gap:7px}
.pole label{font-size:14px;font-weight:500;color:var(--text-2)}
.pole input{
  width:100%;height:50px;padding:0 14px;
  font:inherit;font-size:17px;color:var(--text);
  background:rgba(4,11,8,.55);
  border:1px solid var(--hair-2);border-radius:12px;
  transition:border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance:none;appearance:none;
}
.pole input:focus{outline:none;border-color:var(--ok);box-shadow:0 0 0 4px rgba(82,214,154,.16);background:rgba(4,11,8,.75)}
.pole input:focus-visible{outline:none}
.pole input[aria-invalid="true"]{border-color:rgba(255,110,97,.7)}
.pole input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(255,110,97,.16)}
@media (hover:hover){.pole input:hover:not(:focus){border-color:rgba(196,236,218,.28)}}

/* Автозаполнение браузера не должно красить поле в жёлтое. */
.pole input:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 100px #0a1813 inset;caret-color:var(--text);
}

.parol-ramka{position:relative}
.parol-ramka input{padding-right:54px}
.glaz{
  position:absolute;right:3px;top:3px;
  width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:10px;background:transparent;color:var(--text-2);cursor:pointer;
}
.glaz[hidden]{display:none}
.glaz svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.glaz .glaz-zakryt{display:none}
.glaz[aria-pressed="true"] .glaz-otkryt{display:none}
.glaz[aria-pressed="true"] .glaz-zakryt{display:block}
.glaz:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media (hover:hover){.glaz:hover{color:var(--text);background:rgba(196,236,218,.07)}}

.caps{
  margin:2px 0 0;font-size:13.5px;color:var(--warn);
  display:flex;align-items:center;gap:6px;
}
.caps[hidden]{display:none}
.caps::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn)}

.voiti{
  margin-top:8px;height:52px;width:100%;
  font:inherit;font-size:16.5px;font-weight:600;letter-spacing:-.005em;
  color:#03140c;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg, #6ee3ac, #3cc283);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -10px rgba(82,214,154,.55), 0 0 0 1px rgba(82,214,154,.5);
  transition:filter .15s, transform .1s;
}
@media (hover:hover){.voiti:hover{filter:brightness(1.06)}}
.voiti:active{transform:translateY(1px)}
.voiti[aria-busy="true"]{filter:saturate(.6) brightness(.9);cursor:progress}
.voiti:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.podskazka{margin:18px 0 0;font-size:13.5px;color:var(--muted)}

.oshibka{
  display:flex;gap:10px;align-items:flex-start;
  margin:0 0 18px;padding:12px 14px;border-radius:12px;
  background:var(--bad-soft);border:1px solid rgba(255,110,97,.35);
  color:var(--text);font-size:14px;line-height:1.4;
}
.oshibka svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--bad);stroke-width:1.8;stroke-linecap:round}
.oshibka b{display:block;font-weight:600;color:#ffb3ab}
.oshibka span{color:var(--text-2)}

/* ---------- Средняя ширина ---------- */

@media (max-width: 1180px) and (min-width: 861px){
  body.vhod-b{grid-template-columns:minmax(0,1fr) 420px}
  .stsena{padding:40px 24px 40px 36px}
  .storona{padding:40px 36px 40px 16px}
}

/* ---------- Телефон и узкий планшет ----------
   Высоты образа в пикселях, без vh: когда открывается клавиатура,
   ничего не пересчитывается и кнопка не уезжает из-под пальца. */

@media (max-width: 860px){
  body.vhod-b{
    display:block;
    background:
      radial-gradient(90% 40% at 50% 12%, rgba(40,120,86,.32), transparent 70%),
      var(--bg-0);
  }
  .stsena{
    min-height:0;display:block;
    padding:calc(18px + env(safe-area-inset-top)) 16px 0;
  }
  .stsena::before{-webkit-mask-image:linear-gradient(#000, transparent 90%);mask-image:linear-gradient(#000, transparent 90%)}

  /* На телефоне одна главная карточка: деньги на человека против тарифа. */
  .marka-mob{display:flex;margin:0 auto 14px;max-width:520px}
  .pult{
    --u:calc(100cqw / 52);
    width:100%;max-width:520px;margin:0 auto;
    aspect-ratio:auto;height:228px;
    transform:none;
  }
  .bezel,.k-fud,.k-sklad,.k-razd,.k-karta,.k-zakl,.pt2,.pt3{display:none}
  .k-glav{width:100%;height:100%;padding:16px 16px 12px;border-radius:18px}
  .k-nazv{font-size:12.5px;white-space:nowrap}
  .dlinno{display:none}
  .korotko{display:inline}
  .zapas > span{font-size:11px;right:14px}
  .zapas b{font-size:16px}
  .status{font-size:12px}
  .status > span{padding:5px 9px;gap:5px}
  .status-ok svg{width:12px;height:12px}
  .bolshoe{font-size:42px}
  .ryad{gap:14px}
  .ryad dt{font-size:11.5px}
  .ryad dd{font-size:15px}
  .ryad div:nth-child(2){display:none}
  body.est-oshibka .pod{display:none}
  .grafik{margin-top:10px}
  .podpisi-grafika{font-size:11px;margin-top:6px}
  .p-mesyac{display:none}
  .pt1{left:auto;right:14px;top:96px;font-size:13px;padding:3px 8px}

  html.anim .pult:not(.sobran) .k-glav{transform:translate(0, 6px) rotate(-1.8deg)}

  .storona{display:block;padding:22px 20px calc(24px + env(safe-area-inset-bottom))}
  .storona-vnutri{max-width:440px;margin:0 auto}
  .storona .marka{display:none}
  .zagolovok span{display:inline}
  .zagolovok{font-size:27px;line-height:1.12}
  .pod{font-size:14.5px;margin-top:8px}
  .forma-blok{margin-top:22px;padding:0;border:0;background:none;box-shadow:none}
  .forma-zag{display:none}
  .forma{gap:12px}
  .pole{gap:6px}
  .pole input{height:48px}
  .glaz{top:2px}
  .voiti{margin-top:6px}
  .podskazka{margin-top:14px;text-align:center}
}

/* ---------- Меньше движения: сразу собранная система ---------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}