@import url('/static/css/shrifty.css');

/* ─── палитра: бумага, типографская печать, красная ручка ─────────────── */
:root{
  --bumaga:#F3EFE4;
  --bumaga-2:#EAE4D5;
  --list:#FCFAF4;
  --tush:#16171B;
  --seryy:#6F6B62;
  --slabyy:#9A958A;
  --ruchka:#D0392B;
  --sinyaya:#1E49C9;
  --marker:#FFE566;
  --zelenyy:#2C7150;
  --liniya:rgba(22,23,27,.14);
  --liniya-slabaya:rgba(22,23,27,.07);
  --ten:0 1px 2px rgba(30,25,10,.05), 0 18px 40px -22px rgba(30,25,10,.35);
  --ten-list:0 2px 6px rgba(30,25,10,.06), 0 40px 80px -40px rgba(30,25,10,.45);
  --skruglenie:14px;
  --shirina:1180px;
  --shrift:'Onest','Helvetica Neue',system-ui,sans-serif;
  --shrift-krupno:'Unbounded','Onest',system-ui,sans-serif;
  --shrift-doc:'PT Serif',Georgia,'Times New Roman',serif;
  --shrift-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

:root[data-tema="noch"], :root:not([data-tema="den"]) {
  color-scheme:light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="den"]){
    --bumaga:#121316;
    --bumaga-2:#191A1E;
    --list:#1C1D21;
    --tush:#ECE8DF;
    --seryy:#9A968C;
    --slabyy:#6C685F;
    --ruchka:#FF5C48;
    --sinyaya:#6E92FF;
    --marker:#8A7420;
    --zelenyy:#57B98A;
    --liniya:rgba(236,232,223,.16);
    --liniya-slabaya:rgba(236,232,223,.07);
    --ten:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9);
    --ten-list:0 2px 8px rgba(0,0,0,.5), 0 40px 90px -40px rgba(0,0,0,1);
    color-scheme:dark;
  }
}
:root[data-tema="noch"]{
  --bumaga:#121316; --bumaga-2:#191A1E; --list:#1C1D21; --tush:#ECE8DF;
  --seryy:#9A968C; --slabyy:#6C685F; --ruchka:#FF5C48; --sinyaya:#6E92FF;
  --marker:#8A7420; --zelenyy:#57B98A;
  --liniya:rgba(236,232,223,.16); --liniya-slabaya:rgba(236,232,223,.07);
  --ten:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9);
  --ten-list:0 2px 8px rgba(0,0,0,.5), 0 40px 90px -40px rgba(0,0,0,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bumaga);color:var(--tush);
  font-family:var(--shrift);font-size:17px;line-height:1.6;
  font-feature-settings:'ss01','cv01';
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

/* зерно бумаги: SVG-шум поверх всего, ничего не грузим извне */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="den"]) body::before{mix-blend-mode:screen;opacity:.045}
}
:root[data-tema="noch"] body::before{mix-blend-mode:screen;opacity:.045}

.obolochka{max-width:var(--shirina);margin:0 auto;padding:0 22px;position:relative}

/* поле тетради: красная линия слева на всю страницу */
.pole-tetradi{
  position:fixed;left:max(24px,calc((100vw - var(--shirina))/2 - 26px));top:0;bottom:0;
  width:1px;background:var(--ruchka);opacity:.32;z-index:1;pointer-events:none;
}
@media (max-width:960px){.pole-tetradi{display:none}}

/* ─── шапка ────────────────────────────────────────────────────────────── */
.shapka{
  position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bumaga) 82%, transparent);
  border-bottom:1px solid var(--liniya-slabaya);
}
.shapka .obolochka{display:flex;align-items:center;gap:18px;height:62px}
.znak{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;
  letter-spacing:-.01em;font-size:19px}
.znak .galka{width:22px;height:22px;flex:none}
.shapka nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.shapka nav a,.shapka nav button{
  text-decoration:none;padding:8px 12px;border-radius:10px;border:0;background:none;
  font-size:15px;color:var(--seryy);cursor:pointer;transition:.15s;
}
.shapka nav a:hover,.shapka nav button:hover{color:var(--tush);background:var(--bumaga-2)}
.shapka nav a.glavnaya-knopka{
  background:var(--tush);color:var(--bumaga);font-weight:600;padding:9px 16px;
}
.shapka nav a.glavnaya-knopka:hover{background:var(--ruchka);color:#fff}
@media (max-width:720px){.pryachem-na-telefone{display:none}}

/* ─── герой ────────────────────────────────────────────────────────────── */
.geroy{padding:clamp(40px,7vw,86px) 0 40px;position:relative}
.nadzagolovok{
  font-family:var(--shrift-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slabyy);margin-bottom:26px;
}
.konstruktor-zagolovok{
  font-family:var(--shrift-krupno);font-weight:700;
  font-size:clamp(30px,5.4vw,66px);line-height:1.14;letter-spacing:-.035em;
  margin:0 0 26px;max-width:15em;
}
.konstruktor-zagolovok .tihoe{color:var(--slabyy);font-weight:400}

/* вписанное поле: как вписанное от руки в бланк */
.vpisano{
  display:inline-block;position:relative;cursor:pointer;color:var(--ruchka);
  border:0;background:none;padding:0 .12em;font:inherit;text-align:left;
  border-bottom:2px dashed color-mix(in srgb, var(--ruchka) 45%, transparent);
  transition:.18s;white-space:nowrap;
}
.vpisano:hover{background:color-mix(in srgb, var(--marker) 45%, transparent);
  border-bottom-color:var(--ruchka)}
.vpisano::after{
  content:'▾';font-size:.42em;vertical-align:.35em;margin-left:.22em;opacity:.55;
  font-family:var(--shrift);
}
.vpisano.pole-vvoda::after{content:none}
.vpisano input{font:inherit;color:inherit;background:none;border:0;padding:0;
  min-width:60px;outline:none}

/* выпадашка выбора */
.vybor{
  position:absolute;z-index:70;background:var(--list);border:1px solid var(--liniya);
  border-radius:12px;box-shadow:var(--ten);padding:6px;min-width:230px;max-height:56vh;
  overflow:auto;font-family:var(--shrift);font-size:16px;font-weight:400;
  letter-spacing:0;color:var(--tush);
}
.vybor button{
  display:flex;justify-content:space-between;gap:14px;width:100%;text-align:left;
  border:0;background:none;padding:9px 12px;border-radius:8px;cursor:pointer;
}
.vybor button:hover{background:var(--bumaga-2)}
.vybor button span{color:var(--slabyy);font-family:var(--shrift-mono);font-size:13px}

.itog-stroka{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;
  padding:22px 0 0;border-top:1px solid var(--liniya);max-width:900px;
}
.cifra-ceny{
  font-family:var(--shrift-krupno);font-weight:700;font-size:clamp(30px,4.6vw,52px);
  letter-spacing:-.03em;line-height:1;
}
.cifra-ceny sup{font-size:.42em;font-weight:400;color:var(--seryy);top:-.9em}
.podpis-ceny{color:var(--seryy);font-size:15px;max-width:34ch}
.podpis-ceny b{color:var(--tush)}
.znak-srochno{color:var(--ruchka);font-weight:600}

.geroy-knopki{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.knopka{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  padding:14px 24px;border-radius:12px;font-weight:600;font-size:16px;
  text-decoration:none;transition:.16s;background:var(--tush);color:var(--bumaga);
}
.knopka:hover{transform:translateY(-1px);background:var(--ruchka);color:#fff}
.knopka.vtoraya{background:none;color:var(--tush);border:1px solid var(--liniya)}
.knopka.vtoraya:hover{background:var(--bumaga-2);color:var(--tush);border-color:var(--tush)}
.knopka:disabled{opacity:.45;cursor:default;transform:none}

/* ─── план по дням ─────────────────────────────────────────────────────── */
.plan{margin-top:54px}
.plan-lenta{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);
  gap:0;border-top:1px solid var(--liniya);
}
.plan-shag{
  padding:16px 16px 20px 0;border-right:1px solid var(--liniya-slabaya);position:relative;
}
.plan-shag:last-child{border-right:0}
.plan-shag::before{
  content:'';position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--liniya);
}
.plan-shag.est::before{background:var(--ruchka)}
.plan-data{font-family:var(--shrift-mono);font-size:12px;letter-spacing:.06em;
  color:var(--ruchka);text-transform:uppercase}
.plan-etap{font-weight:600;margin:6px 0 3px}
.plan-chto{font-size:14px;color:var(--seryy);line-height:1.45}
@media (max-width:860px){
  .plan-lenta{grid-auto-flow:row;grid-auto-columns:auto;border-top:0}
  .plan-shag{border-right:0;border-top:1px solid var(--liniya-slabaya);padding:14px 0 14px 18px}
  .plan-shag::before{top:18px;left:0}
}

/* ─── лист, который пишется ────────────────────────────────────────────── */
.stsena{position:relative}
.stsena-lipkaya{position:sticky;top:62px;height:calc(100vh - 62px);display:flex;
  align-items:center;justify-content:center;gap:clamp(24px,4vw,56px)}
.list{
  position:relative;background:var(--list);box-shadow:var(--ten-list);
  /* задаём высоту, а не ширину: иначе лист выше липкой области и уезжает под шапку */
  height:min(72vh,720px);width:auto;aspect-ratio:1/1.414;max-width:86vw;
  padding:7% 8%;overflow:hidden;border:1px solid var(--liniya-slabaya);
}
.list::after{
  content:'';position:absolute;left:9%;top:0;bottom:0;width:1px;
  background:var(--ruchka);opacity:.18;
}
.kadr{position:absolute;inset:0;padding:7% 8%;opacity:0;transition:opacity .5s ease;
  display:flex;flex-direction:column;font-family:var(--shrift-doc);color:var(--tush)}
.kadr.vidno{opacity:1}
.kadr .melko{font-size:clamp(7px,1.5vw,11px);line-height:1.5;text-align:center;
  letter-spacing:.02em;text-transform:uppercase;color:var(--seryy)}
.kadr .tip{font-family:var(--shrift-krupno);font-weight:700;
  font-size:clamp(13px,2.6vw,22px);text-align:center;letter-spacing:-.02em;margin:auto 0 6px}
.kadr .tema{text-align:center;font-size:clamp(10px,2vw,15px);margin-bottom:auto}
.kadr .podpis-doc{font-size:clamp(8px,1.6vw,12px);text-align:right;color:var(--seryy);
  line-height:1.7}
.kadr h4{font-family:var(--shrift-doc);font-size:clamp(10px,2vw,15px);margin:0 0 10px;
  text-align:center;text-transform:uppercase;letter-spacing:.04em}
.oglavlenie-stroka{display:flex;gap:8px;align-items:baseline;font-size:clamp(8px,1.7vw,13px);
  margin-bottom:7px;opacity:0;transform:translateY(4px);
  animation:proyavit .45s ease forwards}
.oglavlenie-stroka .tochki{flex:1;border-bottom:1px dotted var(--liniya);transform:translateY(-3px)}
@keyframes proyavit{to{opacity:1;transform:none}}
.stroka-teksta{height:clamp(5px,.9vw,8px);background:var(--liniya-slabaya);
  border-radius:2px;margin-bottom:clamp(6px,1.1vw,10px)}
.tekst-doc{font-size:clamp(8px,1.65vw,13px);line-height:1.75;text-align:justify;
  text-indent:1.6em;hyphens:auto}
.pometka{
  position:absolute;font-family:'Comic Sans MS','Segoe Print',var(--shrift);
  color:var(--ruchka);font-size:clamp(9px,1.7vw,13px);transform:rotate(-3.5deg);
  opacity:0;transition:opacity .4s ease;max-width:34%;line-height:1.3;
}
.pometka.vidno,.kadr.vidno .pometka{opacity:1;transition-delay:.35s}
.kadr.vidno .pometka:nth-of-type(2){transition-delay:.65s}
.kadr.vidno .pometka:nth-of-type(3){transition-delay:.95s}
.pometka.zacherknuta{text-decoration:line-through;opacity:.45}
.pometka::before{
  content:'';position:absolute;left:-14px;top:6px;width:10px;height:1.5px;
  background:var(--ruchka);
}
.stsena-tekst{width:min(360px,90vw);flex:none}
.stsena-tekst .nomer{font-family:var(--shrift-mono);color:var(--ruchka);font-size:13px;
  letter-spacing:.1em}
.stsena-tekst h3{font-family:var(--shrift-krupno);font-weight:700;
  font-size:clamp(21px,2.7vw,34px);letter-spacing:-.03em;line-height:1.15;margin:10px 0 12px}
.stsena-tekst p{color:var(--seryy);margin:0;font-size:16px}
.stsena-shagi{height:520vh;position:relative}
@media (max-width:960px){
  .stsena-lipkaya{flex-direction:column;gap:20px;height:auto;padding:24px 0;
    position:static}
  .stsena-shagi{height:auto}
  .list{width:min(420px,88vw)}
  .stsena-tekst{width:100%}
}

/* ─── общие блоки ──────────────────────────────────────────────────────── */
section{position:relative;z-index:2}
.razdel{padding:clamp(60px,9vw,120px) 0}
.zagolovok-razdela{
  font-family:var(--shrift-krupno);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(26px,4vw,48px);line-height:1.1;margin:0 0 14px;max-width:16em;
}
.podzagolovok{color:var(--seryy);max-width:52ch;margin:0 0 40px;font-size:17px}
.metka{
  font-family:var(--shrift-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ruchka);margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.metka::after{content:'';flex:1;height:1px;background:var(--liniya);max-width:120px}

.setka-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--liniya);
  border:1px solid var(--liniya)}
.setka-3 > div{background:var(--bumaga);padding:30px 26px}
@media (max-width:860px){.setka-3{grid-template-columns:1fr}}
.karta-nomer{font-family:var(--shrift-krupno);font-size:34px;font-weight:700;
  color:var(--ruchka);letter-spacing:-.04em;line-height:1}
.karta-zagolovok{font-weight:700;font-size:19px;margin:14px 0 8px;letter-spacing:-.01em}
.karta-tekst{color:var(--seryy);font-size:15.5px;margin:0}
.karta-tekst b{color:var(--tush);font-weight:600}

/* ─── прайс ────────────────────────────────────────────────────────────── */
.prays{width:100%;border-collapse:collapse;font-size:16px}
.prays th{
  text-align:left;font-family:var(--shrift-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slabyy);font-weight:400;padding:0 12px 12px 0;
  border-bottom:1px solid var(--tush);
}
.prays td{padding:15px 12px 15px 0;border-bottom:1px solid var(--liniya-slabaya);
  vertical-align:baseline}
.prays tr{cursor:pointer;transition:.14s}
.prays tbody tr:hover td{background:color-mix(in srgb, var(--marker) 28%, transparent)}
.prays .nazvanie{font-weight:600}
.prays .poyasnenie{color:var(--slabyy);font-size:14px;display:block;margin-top:2px}
.prays .cena{font-family:var(--shrift-krupno);font-weight:700;white-space:nowrap;
  text-align:right;letter-spacing:-.02em}
.prays .srok{color:var(--seryy);white-space:nowrap;font-size:15px}
@media (max-width:700px){
  .prays .srok{display:none}
  .prays td,.prays th{padding-right:6px}
}

/* ─── форма заказа ─────────────────────────────────────────────────────── */
.forma-obertka{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
@media (max-width:960px){.forma-obertka{grid-template-columns:1fr;gap:26px}}
.polya{display:grid;gap:22px}
.pole label,.pole .imya-polya{
  display:block;font-family:var(--shrift-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slabyy);margin-bottom:9px;
}
.pole input[type=text],.pole input[type=date],.pole input[type=number],
.pole input[type=email],.pole textarea,.pole select{
  width:100%;padding:13px 15px;border:1px solid var(--liniya);border-radius:10px;
  background:var(--list);color:var(--tush);font:inherit;font-size:16px;outline:none;
  transition:.15s;
}
.pole textarea{min-height:120px;resize:vertical;line-height:1.55}
.pole input:focus,.pole textarea:focus{border-color:var(--ruchka);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ruchka) 14%, transparent)}
.fishki{display:flex;flex-wrap:wrap;gap:8px}
.fishka{
  border:1px solid var(--liniya);background:var(--list);border-radius:999px;
  padding:9px 16px;cursor:pointer;font-size:15px;transition:.14s;
}
.fishka:hover{border-color:var(--tush)}
.fishka.vybrana{background:var(--tush);color:var(--bumaga);border-color:var(--tush)}
.podskazka{color:var(--slabyy);font-size:13.5px;margin-top:7px}

.chek{
  position:sticky;top:82px;background:var(--list);border:1px solid var(--liniya);
  border-radius:var(--skruglenie);padding:24px;box-shadow:var(--ten);
}
.chek h4{margin:0 0 4px;font-family:var(--shrift-mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slabyy);font-weight:400}
.chek-stroka{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px dotted var(--liniya);font-size:14.5px}
.chek-stroka span:first-child{color:var(--seryy)}
.chek-itogo{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:16px;padding-top:14px;border-top:2px solid var(--tush)}
.chek-itogo .cifra{font-family:var(--shrift-krupno);font-weight:700;font-size:30px;
  letter-spacing:-.03em}
.chek .avans{color:var(--seryy);font-size:14px;margin-top:6px}
.chek .knopka{width:100%;justify-content:center;margin-top:18px}

.udacha{
  border:2px solid var(--zelenyy);border-radius:var(--skruglenie);padding:30px;
  background:var(--list);
}
.udacha .nomer-zakaza{font-family:var(--shrift-krupno);font-weight:700;font-size:38px;
  letter-spacing:-.03em;color:var(--zelenyy)}

/* ─── вопросы ──────────────────────────────────────────────────────────── */
.vopros{border-bottom:1px solid var(--liniya-slabaya)}
.vopros summary{
  cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:18px;
  list-style:none;position:relative;
}
.vopros summary::-webkit-details-marker{display:none}
.vopros summary::after{
  content:'+';position:absolute;right:6px;top:19px;font-size:24px;color:var(--ruchka);
  transition:.2s;font-weight:400;
}
.vopros[open] summary::after{transform:rotate(45deg)}
.vopros p{margin:0 0 22px;color:var(--seryy);max-width:66ch}

/* ─── подвал ───────────────────────────────────────────────────────────── */
.podval{border-top:1px solid var(--liniya);padding:44px 0;color:var(--seryy);font-size:15px}
.podval .obolochka{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-start}
.podval a{color:var(--tush);text-decoration:none;border-bottom:1px solid var(--liniya)}
.podval a:hover{border-color:var(--ruchka);color:var(--ruchka)}

/* ─── плавающая цена ───────────────────────────────────────────────────── */
.pilyulya{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(140%);
  background:var(--tush);color:var(--bumaga);border-radius:999px;padding:12px 12px 12px 22px;
  display:flex;align-items:center;gap:16px;box-shadow:0 18px 40px -14px rgba(0,0,0,.5);
  z-index:80;transition:transform .35s cubic-bezier(.2,.8,.3,1);font-size:15px;
  max-width:calc(100vw - 24px);
}
.pilyulya.vidno{transform:translateX(-50%) translateY(0)}
.pilyulya b{font-family:var(--shrift-krupno);letter-spacing:-.02em}
.pilyulya button{
  background:var(--ruchka);color:#fff;border:0;border-radius:999px;padding:9px 18px;
  font-weight:600;cursor:pointer;white-space:nowrap;
}

/* ─── кабинет ──────────────────────────────────────────────────────────── */
.kabinet-shapka{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.kabinet-shapka h1{font-family:var(--shrift-krupno);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(26px,4vw,42px);margin:0}
.zakaz-karta{
  display:block;text-decoration:none;background:var(--list);border:1px solid var(--liniya);
  border-radius:var(--skruglenie);padding:22px 24px;margin-bottom:14px;transition:.15s;
  box-shadow:var(--ten);
}
.zakaz-karta:hover{transform:translateY(-2px);border-color:var(--tush)}
.zakaz-verh{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  flex-wrap:wrap}
.zakaz-kod{font-family:var(--shrift-mono);font-size:13px;letter-spacing:.08em;
  color:var(--ruchka)}
.zakaz-tema{font-weight:600;font-size:19px;margin:6px 0 12px;letter-spacing:-.01em}
.zakaz-niz{display:flex;gap:18px;flex-wrap:wrap;color:var(--seryy);font-size:14.5px}
.polosa{display:flex;gap:4px;margin-top:14px}
.polosa i{flex:1;height:4px;border-radius:2px;background:var(--liniya)}
.polosa i.sdelan{background:var(--zelenyy)}
.polosa i.idet{background:var(--ruchka)}
.yarlyk{
  display:inline-block;font-family:var(--shrift-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--liniya);
  color:var(--seryy);
}
.yarlyk.aktiv{border-color:var(--ruchka);color:var(--ruchka)}
.yarlyk.gotov{border-color:var(--zelenyy);color:var(--zelenyy)}

.dva-stolbca{display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:start}
@media (max-width:960px){.dva-stolbca{grid-template-columns:1fr}}
.blok{background:var(--list);border:1px solid var(--liniya);border-radius:var(--skruglenie);
  padding:24px;margin-bottom:18px;box-shadow:var(--ten)}
.blok h3{margin:0 0 16px;font-size:17px;letter-spacing:-.01em}

.etapy{list-style:none;margin:0;padding:0}
.etapy li{display:flex;gap:14px;padding:11px 0;border-bottom:1px dotted var(--liniya)}
.etapy li:last-child{border-bottom:0}
.etapy .znak{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--liniya);
  flex:none;display:grid;place-items:center;font-size:12px;color:var(--slabyy)}
.etapy li.sdelan .znak{background:var(--zelenyy);border-color:var(--zelenyy);color:#fff}
.etapy li.idet .znak{border-color:var(--ruchka);color:var(--ruchka)}
.etapy .kogda{margin-left:auto;font-family:var(--shrift-mono);font-size:12px;
  color:var(--slabyy)}

.chat{max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  padding-right:6px}
.repl{max-width:78%;padding:12px 16px;border-radius:14px;font-size:15.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word}
.repl.moya{align-self:flex-end;background:var(--tush);color:var(--bumaga);
  border-bottom-right-radius:4px}
.repl.ego{align-self:flex-start;background:var(--bumaga-2);border-bottom-left-radius:4px}
.repl .kogda{display:block;font-size:11.5px;opacity:.55;margin-top:6px;
  font-family:var(--shrift-mono)}
.chat-forma{display:flex;gap:10px;margin-top:16px}
.chat-forma textarea{flex:1;min-height:46px;max-height:160px;padding:12px 14px;
  border:1px solid var(--liniya);border-radius:10px;background:var(--bumaga);
  color:var(--tush);font:inherit;resize:none;outline:none}
.chat-forma button{border:0;border-radius:10px;padding:0 20px;background:var(--tush);
  color:var(--bumaga);font-weight:600;cursor:pointer}

.fajl-stroka{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px dotted var(--liniya);font-size:15px}
.fajl-stroka a{color:var(--tush);text-decoration:none;font-weight:500}
.fajl-stroka a:hover{color:var(--ruchka)}
.fajl-stroka .ves{margin-left:auto;font-family:var(--shrift-mono);font-size:12px;
  color:var(--slabyy)}

.kod-vhoda{
  font-family:var(--shrift-krupno);font-weight:700;font-size:44px;letter-spacing:.14em;
  color:var(--ruchka);text-align:center;padding:18px 0;
}
.pusto{color:var(--slabyy);padding:40px 0;text-align:center}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}