:root{
  --bg:#F5F8FC; --surface:#FFFFFF; --surface2:#F0F4FA;
  --navy:#101E38; --navy2:#1B2E50; --navy3:#26406B;
  --ink:#17233E; --ink2:#54617D; --muted:#8B96AD; --faint:#AAB4C8;
  --line:#E4E9F1; --line2:#D3DAE6;
  --acc:#12A98D; --acc-d:#0D8A73; --acc-soft:#E2F5F0; --on-acc:#FFFFFF;
  --on-navy:#EAF1FB; --on-navy-mut:#9DB0CF; --navy-line:rgba(255,255,255,.1);
  --ok:#12A98D; --warn:#E0A000; --amber:#F0A93B;
  --r:12px; --r-sm:9px; --r-lg:18px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1160px; --pad:clamp(20px,4vw,40px);
}
/* Ночной режим. Меняем только значения переменных — вся вёрстка на них и
   опирается, поэтому переключение обходится без перезагрузки страницы. */
:root[data-theme="dark"]{
  --bg:#0B1524; --surface:#132135; --surface2:#1A2B44;
  --navy:#0A1322; --navy2:#16273E; --navy3:#26406B;
  --ink:#E8EEF8; --ink2:#A9B7CE; --muted:#7F8FA8; --faint:#5C6C85;
  --line:#22334D; --line2:#2E4260;
  --acc:#1FC5A4; --acc-d:#3FD9BC; --acc-soft:rgba(31,197,164,.14); --on-acc:#06261F;
  --on-navy:#E8EEF8; --on-navy-mut:#93A6C4; --navy-line:rgba(255,255,255,.14);
}
:root[data-theme="dark"] body{ color:var(--ink); }
:root[data-theme="dark"] .btn-oauth{ background:var(--surface); color:var(--ink); border-color:var(--line2); }
:root[data-theme="dark"] .btn-oauth:hover{ background:var(--surface2); }
:root[data-theme="dark"] .btn-navy{ background:var(--surface2); }
:root[data-theme="dark"] .btn-danger{ background:var(--surface); color:#FF8A8D; border-color:#5C2A2E; }
:root[data-theme="dark"] .btn-danger:hover{ background:#2A1417; border-color:#8A3A3E; color:#FFA5A8; }
:root[data-theme="dark"] .otp-cells .cell.filled,
:root[data-theme="dark"] .otp.on .cell.now,
:root[data-theme="dark"] .csel.open .cselbtn,
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field select:focus,
:root[data-theme="dark"] .field textarea:focus{ background:var(--surface2); }
:root[data-theme="dark"] .mailer .body{ fill:#0A1322; }
:root[data-theme="dark"] .mailer .paper{ fill:var(--surface2); stroke:var(--line2); }
/* шапка публичных страниц залита фиксированным светлым цветом — в тёмной теме
   она бы осталась белой полосой */
:root[data-theme="dark"] header{ background:rgba(11,21,36,.82); }
:root[data-theme="dark"] .hero .bg img,
:root[data-theme="dark"] .mock{ filter:brightness(.92); }
:root[data-theme="dark"] .badge-off{ background:var(--surface2); color:var(--ink2); }
:root[data-theme="dark"] .toast{ background:var(--surface2); color:var(--ink); }
:root[data-theme="dark"] .modal{ background:rgba(4,10,20,.6); }
:root[data-theme="dark"] img,
:root[data-theme="dark"] .brand .mk{ filter:none; }

*{ box-sizing:border-box; margin:0; padding:0; }
/* иначе блок с display:flex/grid игнорирует атрибут hidden и висит на экране */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html{ background:var(--bg); }
body{ background:transparent; color:var(--ink); font-family:var(--sans); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-weight:700; line-height:1.12; letter-spacing:-.02em; color:var(--ink); }
.num{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--mono); }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.ey{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--acc); text-transform:uppercase; }
.ey::before{ content:""; width:16px; height:2px; background:var(--acc); border-radius:2px; }

/* buttons */
.btn{ font-family:var(--sans); font-weight:700; font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:var(--r-sm); cursor:pointer; border:1px solid transparent; transition:.16s var(--ease); white-space:nowrap; }
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--acc); color:#fff; box-shadow:0 8px 20px -8px rgba(18,169,141,.6); }
.btn-primary:hover{ background:var(--acc-d); transform:translateY(-1px); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy2); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line2); }
.btn-ghost:hover{ background:var(--surface); border-color:var(--ink2); }
.btn-lg{ padding:16px 28px; font-size:16px; }
.btn-block{ width:100%; }

/* header */
header{ position:sticky; top:0; z-index:50; background:rgba(245,248,252,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; gap:26px; height:70px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mk{ width:34px; height:34px; flex:none; }
.brand b{ font-weight:800; font-size:18px; letter-spacing:-.02em; }
.brand b span{ color:var(--acc); }
.nav .lk{ margin-left:auto; display:flex; gap:26px; align-items:center; }
.nav .lk a{ font-size:14.5px; font-weight:600; color:var(--ink2); transition:color .15s; }
.nav .lk a:hover{ color:var(--ink); }
.nav .act{ display:flex; align-items:center; gap:12px; }
.nav .login{ font-weight:700; font-size:14.5px; }
.lang{ font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink2); border:1px solid var(--line2); border-radius:7px; padding:6px 9px; }
.burger{ display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line2); background:var(--surface); border-radius:9px; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger i{ width:18px; height:2px; background:var(--ink); display:block; }

/* hero */
.hero{ padding:clamp(30px,5vw,80px) 0 clamp(30px,4.4vw,68px); }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
.hero h1{ font-size:clamp(34px,4.6vw,54px); letter-spacing:-.03em; margin-top:20px; }
.hero h1 .g{ color:var(--acc); }
.hero .lead{ font-size:clamp(16px,1.6vw,19px); color:var(--ink2); margin-top:20px; max-width:44ch; line-height:1.6; }
/* check form card */
.checkcard{ position:relative; z-index:5; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-top:30px; box-shadow:0 24px 60px -34px rgba(16,30,56,.35); max-width:520px; }
.checkcard .t{ font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:9px; }
.checkcard .t svg{ width:19px; height:19px; stroke:var(--acc); fill:none; stroke-width:1.9; }
.checkcard .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:15px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--ink2); margin-bottom:6px; }
.field textarea{ width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--surface2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 13px; resize:vertical; line-height:1.5; }
.field textarea:focus{ outline:none; border-color:var(--acc); background:#fff; }
.field input,.field select{ width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 13px; }
.field input.mono{ font-family:var(--mono); letter-spacing:.04em; }
.field input:focus,.field select:focus{ outline:none; border-color:var(--acc); background:#fff; }
/* custom country dropdown */
.csel{ position:relative; }
.cselbtn{ width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 13px; display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left; transition:border-color .15s, background .15s; }
.cselbtn .ph{ color:var(--muted); }
.cselbtn .chev{ width:16px; height:16px; margin-left:auto; color:var(--ink2); transition:transform .22s var(--ease); flex:none; }
.cselbtn:hover{ border-color:var(--line2); }
.csel.open .cselbtn{ border-color:var(--acc); background:#fff; box-shadow:0 0 0 3px var(--acc-soft); }
.csel.open .cselbtn .chev{ transform:rotate(180deg); }
.cselopts{ position:absolute; left:0; right:0; top:calc(100% + 7px); z-index:30; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:0 22px 48px -20px rgba(16,30,56,.42); max-height:248px; overflow-y:auto; padding:5px; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .16s var(--ease), transform .16s var(--ease); }
.csel.open .cselopts{ opacity:1; transform:none; pointer-events:auto; }
/* если снизу мало места — список раскрывается вверх */
.csel.up .cselopts{ top:auto; bottom:calc(100% + 7px); transform:translateY(6px); }
.csel.up.open .cselopts{ transform:none; }
.csel .cselbtn:focus-visible{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.cselopts .o{ padding:10px 12px; border-radius:7px; cursor:pointer; font-size:14.5px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:10px; transition:background .12s, color .12s; }
.cselopts .o:hover{ background:var(--acc-soft); color:var(--acc-d); }
.cselopts .o.sel{ background:var(--acc-soft); color:var(--acc-d); font-weight:600; }
.cselopts .o .tick{ width:15px; height:15px; flex:none; opacity:0; }
.cselopts .o.sel .tick{ opacity:1; }
.cselopts::-webkit-scrollbar{ width:9px; }
.cselopts::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:9px; border:2.5px solid var(--surface); }
.cselopts::-webkit-scrollbar-track{ background:transparent; }
.cselopts{ scrollbar-width:thin; scrollbar-color:var(--line2) transparent; }
.checkcard .btn{ margin-top:14px; }
.checkcard .fine{ font-size:12px; color:var(--muted); margin-top:12px; display:flex; align-items:center; gap:7px; }
.checkcard .fine svg{ width:14px; height:14px; stroke:var(--muted); fill:none; stroke-width:1.7; flex:none; }
.hero .strip{ position:relative; z-index:1; display:flex; gap:26px; margin-top:26px; flex-wrap:wrap; }
.hero .strip .s{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink2); font-weight:600; }
.hero .strip .s svg{ width:18px; height:18px; stroke:var(--acc); fill:none; stroke-width:1.9; }

/* status card mockup (right side) */
.mock{ background:var(--navy); border-radius:var(--r-lg); padding:24px; color:var(--on-navy); box-shadow:0 40px 90px -40px rgba(16,30,56,.6); position:relative; overflow:hidden; }
.mock::after{ content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%; background:var(--acc); opacity:.14; }
.mock .top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.mock .top .who{ font-family:var(--mono); font-size:12px; color:var(--on-navy-mut); }
.mock .pill{ display:inline-flex; align-items:center; gap:7px; background:rgba(18,169,141,.16); color:#4FE0C4; border:1px solid rgba(18,169,141,.4); font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; }
.mock .pill .d{ width:7px; height:7px; border-radius:50%; background:#3EE0C0; }
.mock h3{ color:#fff; font-size:22px; margin-top:18px; }
.mock .a{ font-family:var(--mono); font-size:13px; color:var(--on-navy-mut); margin-top:5px; }
.mock .rows{ margin-top:20px; border-top:1px solid var(--navy-line); }
.mock .r{ display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--navy-line); }
.mock .r .k{ font-size:13px; color:var(--on-navy-mut); }
.mock .r .v{ font-size:13.5px; font-weight:600; color:#fff; font-family:var(--mono); }
.mock .r .v.g{ color:#4FE0C4; }
.mock .foot{ display:flex; align-items:center; gap:9px; margin-top:16px; font-size:12.5px; color:var(--on-navy-mut); }
.mock .foot svg{ width:16px; height:16px; stroke:#4FE0C4; fill:none; stroke-width:1.8; }

/* trust bar */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.trust .in{ display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px var(--pad); flex-wrap:wrap; }
.trust .t{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--ink2); min-width:0; }
.trust .t svg{ width:19px; height:19px; stroke:var(--acc); fill:none; stroke-width:1.8; flex:none; }

/* section */
section{ padding:clamp(40px,6.4vw,92px) 0; }
.sh{ text-align:center; max-width:620px; margin:0 auto clamp(36px,4vw,54px); }
.sh h2{ font-size:clamp(28px,3.6vw,42px); letter-spacing:-.03em; margin-top:12px; }
.sh p{ color:var(--ink2); font-size:17px; margin-top:14px; }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; position:relative; }
.step .n{ font-family:var(--mono); font-weight:700; font-size:26px; line-height:1; color:var(--acc); order:2; letter-spacing:-.02em; }
.step .ic{ width:42px; height:42px; border-radius:11px; background:var(--acc-soft); display:grid; place-items:center; order:1; }
.step .ic svg{ width:24px; height:24px; stroke:var(--acc); fill:none; stroke-width:1.8; }
.step .top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.step h3{ font-size:19px; }
.step p{ color:var(--ink2); font-size:14.5px; margin-top:8px; }

/* features bento */
.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:.18s var(--ease); }
.feat:hover{ border-color:var(--line2); box-shadow:0 20px 40px -30px rgba(16,30,56,.35); transform:translateY(-2px); }
.feat .ic{ width:42px; height:42px; border-radius:11px; background:var(--acc-soft); display:grid; place-items:center; margin-bottom:15px; }
.feat .ic svg{ width:22px; height:22px; stroke:var(--acc); fill:none; stroke-width:1.8; }
.feat h3{ font-size:18px; }
.feat p{ color:var(--ink2); font-size:14px; margin-top:8px; line-height:1.55; }

/* telegram band */
.tg{ background:var(--navy); color:var(--on-navy); }
.tg .in{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; padding:clamp(40px,5vw,64px) 0; }
.tg h2{ color:#fff; font-size:clamp(26px,3vw,36px); letter-spacing:-.02em; }
.tg p{ color:var(--on-navy-mut); font-size:16px; margin-top:14px; max-width:46ch; }
.tg .act{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.tg .btn-tgline{ background:#fff; color:var(--navy); }
.tg .linkacc{ background:var(--navy2); border:1px solid var(--navy-line); border-radius:var(--r); padding:22px; }
.tg .linkacc .t{ font-weight:700; color:#fff; display:flex; align-items:center; gap:9px; }
.tg .linkacc .t svg{ width:20px; height:20px; stroke:#4FE0C4; fill:none; stroke-width:1.8; }
.tg .linkacc p{ font-size:13.5px; margin-top:10px; }
.tg .linkacc .chip{ font-family:var(--mono); font-size:12.5px; color:#4FE0C4; background:rgba(18,169,141,.14); border:1px solid rgba(18,169,141,.34); padding:9px 12px; border-radius:8px; margin-top:14px; display:inline-block; }

/* pricing */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:780px; margin:0 auto; }
.plan{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; position:relative; }
.plan.pro{ border-color:var(--acc); box-shadow:0 30px 70px -40px rgba(18,169,141,.5); }
.plan .badge{ position:absolute; top:-11px; left:32px; background:var(--acc); color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; }
.plan .name{ font-weight:700; font-size:15px; color:var(--ink2); text-transform:uppercase; letter-spacing:.03em; }
.plan .price{ font-size:44px; font-weight:800; letter-spacing:-.03em; margin-top:14px; }
.plan .price small{ font-size:16px; font-weight:600; color:var(--muted); }
.plan .sub{ font-size:14px; color:var(--ink2); margin-top:4px; }
.plan ul{ list-style:none; margin:22px 0 24px; display:flex; flex-direction:column; gap:12px; }
.plan li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink); align-items:flex-start; }
.plan li svg{ width:18px; height:18px; stroke:var(--acc); fill:none; stroke-width:2.2; flex:none; margin-top:2px; }

/* faq */
.faq{ max-width:760px; margin:0 auto; }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{ list-style:none; cursor:pointer; padding:20px 0; font-weight:700; font-size:17px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .pl{ width:22px; height:22px; flex:none; position:relative; }
.qa summary .pl::before,.qa summary .pl::after{ content:""; position:absolute; background:var(--acc); border-radius:2px; }
.qa summary .pl::before{ left:0; top:10px; width:22px; height:2px; }
.qa summary .pl::after{ left:10px; top:0; width:2px; height:22px; transition:transform .2s var(--ease); }
.qa[open] summary .pl::after{ transform:scaleY(0); }
.qa p{ color:var(--ink2); font-size:15px; padding:0 0 22px; max-width:64ch; }

/* cta */
.cta{ background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%); color:#fff; border-radius:var(--r-lg); text-align:center; padding:clamp(44px,5vw,72px) var(--pad); position:relative; overflow:hidden; }
.cta::after{ content:""; position:absolute; left:50%; top:-40%; width:600px; height:600px; transform:translateX(-50%); background:radial-gradient(circle,var(--acc) 0%,transparent 60%); opacity:.16; }
.cta h2{ color:#fff; font-size:clamp(28px,3.6vw,42px); letter-spacing:-.02em; position:relative; }
.cta p{ color:var(--on-navy-mut); font-size:17px; margin-top:14px; position:relative; }
.cta .act{ display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap; position:relative; }

/* footer */
footer{ background:var(--navy); color:var(--on-navy); padding:56px 0 28px; margin-top:clamp(40px,5vw,72px); }
.fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
.fgrid .about p{ color:var(--on-navy-mut); font-size:14px; line-height:1.7; margin-top:16px; max-width:34ch; }
.fgrid h4{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--on-navy-mut); margin-bottom:16px; }
.fgrid ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.fgrid ul a{ font-size:14.5px; color:var(--on-navy); opacity:.85; }
.fgrid ul a:hover{ opacity:1; color:#4FE0C4; }
.fbot{ display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:24px; border-top:1px solid var(--navy-line); flex-wrap:wrap; }
.fbot p{ font-size:12.5px; color:var(--on-navy-mut); }
.disclaimer{ font-size:11.5px; color:var(--faint); text-align:center; margin-top:14px; max-width:80ch; margin-left:auto; margin-right:auto; }

/* reveal */
html.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
html.js .rv.in{ opacity:1; transform:none; }
/* when GSAP drives the motion, it owns opacity/transform — kill the CSS transition so they don't double up */
html.gsapx .rv{ transition:none; transform:none; }
/* Когда анимациями правит GSAP, начальный сдвиг задаёт он сам инлайном.
   Держать сдвиг ещё и в CSS нельзя: в конце анимации GSAP стирает свой
   transform, CSS-правило оживает, и карточка отскакивает вниз — соседние
   на мгновение наезжают друг на друга. */
html.gsapx .rv.in{ transition:none; }
/* header lifts on scroll */
header{ transition:box-shadow .25s var(--ease), background-color .25s var(--ease); }
header.scrolled{ box-shadow:0 10px 34px -20px rgba(16,30,56,.5); background:rgba(245,248,252,.92); }
@media (prefers-reduced-motion: reduce){
  html.js .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* drawer */
/* Шторка: сайт под ней размывается, панель выезжает мягко и чуть дольше —
   резкий сдвиг за четверть секунды читался как рывок. */
.drawer{ overflow:hidden; position:fixed; inset:0; z-index:80; background:rgba(16,30,56,.34);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  opacity:0; pointer-events:none; transition:opacity .32s var(--ease), backdrop-filter .32s var(--ease); }
.drawer.on{ opacity:1; pointer-events:auto; }
.drawer .pn{ position:absolute; top:0; right:0; height:100%; width:min(84vw,320px); background:var(--surface);
  border-left:1px solid var(--line); transform:translateX(100%);
  transition:transform .44s cubic-bezier(.22,.8,.24,1); padding:22px; display:flex; flex-direction:column;
  box-shadow:-24px 0 60px -30px rgba(16,30,56,.55); }
.drawer.on .pn{ transform:none; }
.drawer .pn .x{ align-self:flex-end; width:42px; height:42px; border:1px solid var(--line2); border-radius:9px; background:var(--surface); color:var(--ink); font-size:18px; cursor:pointer; }
.drawer .pn a{ font-weight:600; font-size:16px; padding:15px 4px; border-bottom:1px solid var(--line); }
.drawer .pn .btn{ margin-top:16px; }

@media(max-width:900px){
  .nav .lk{ display:none; } .burger{ display:flex; }
  /* язык и день-ночь остаются в шапке: прятать их в бургер неудобно и некрасиво,
     а вот ссылки и кнопка регистрации уезжают в меню */
  .nav .act{ display:flex; gap:10px; margin-left:auto; }
  .nav .act > a{ display:none; }
  .auth-page .nav .act > a{ display:inline-flex; }
  .burger{ margin-left:14px; }
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .steps,.feats{ grid-template-columns:1fr; }
  .tg .in{ grid-template-columns:1fr; gap:28px; }
  .fgrid{ grid-template-columns:1fr 1fr; } .fgrid .about{ grid-column:span 2; }
}
@media(max-width:560px){
  .checkcard .row{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .trust .in{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; } .trust .t{ font-size:12.5px; align-items:flex-start; }
  .fgrid{ grid-template-columns:1fr 1fr; gap:26px 22px; } .fgrid .about{ grid-column:span 2; }
  .fbot{ flex-direction:column; }
}

/* ─────────── авторизация ─────────── */
.auth{ min-height:calc(100vh - 72px); display:grid; place-items:center; padding:44px var(--pad) 64px; }
.auth-card{ width:100%; max-width:428px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,4vw,36px); box-shadow:0 30px 70px -40px rgba(16,30,56,.4); }
.auth-card h1{ font-size:clamp(24px,3vw,29px); }
.auth-card .sub{ color:var(--ink2); font-size:15px; margin-top:8px; }
.auth-card .field{ margin-top:16px; }
.auth-card .btn{ margin-top:20px; }
.auth-sep{ display:flex; align-items:center; gap:12px; margin:22px 0 4px; color:var(--muted); font-size:12.5px; }
.auth-sep::before,.auth-sep::after{ content:""; height:1px; background:var(--line); flex:1; }
.btn-tg{ background:#229ED9; color:#fff; }
.btn-tg:hover{ background:#1c8cc2; }
.auth-alt{ text-align:center; font-size:14px; color:var(--ink2); margin-top:22px; }
.auth-alt a{ color:var(--acc-d); font-weight:600; }
.auth-fine{ font-size:12px; color:var(--muted); text-align:center; margin-top:18px; line-height:1.5; }
.auth-fine a{ color:var(--ink2); text-decoration:underline; }

/* ─────────── личный кабинет ─────────── */
.appbar{ background:var(--navy); border-bottom:1px solid var(--navy2); position:sticky; top:0; z-index:60; }
.appbar .brand b{ color:#fff; } .appbar .brand b span{ color:#4FE0C4; }
.appbar .me .login{ color:var(--on-navy-mut); } .appbar .me .login:hover{ color:#fff; }
.appbar .lang{ color:var(--on-navy-mut); border-color:var(--navy-line); }
/* в тёмной шапке кабинета кнопка тем же цветом сливалась бы с фоном */
.appbar .lang-fab-btn{ background:rgba(255,255,255,.14); border-color:var(--navy-line); }
.appbar .lang-fab-btn:hover{ background:rgba(255,255,255,.22); }
.appbar .avatar{ background:rgba(255,255,255,.14); color:#fff; }
.appbar .nav{ height:68px; display:flex; align-items:center; gap:26px; }
/* шапка кабинета живёт по той же сетке, что и каркас: логотип над боковой навигацией,
   правый край — над правым краем содержимого */
.appbar > .wrap{ max-width:1440px; padding-left:24px; padding-right:clamp(18px,2.6vw,40px); }
.appbar .tabs{ display:flex; gap:4px; margin-left:14px; }
.appbar .tabs a{ padding:9px 14px; border-radius:var(--r-sm); font-size:14.5px; font-weight:600; color:var(--ink2); transition:.15s var(--ease); }
.appbar .tabs a:hover{ background:var(--surface2); color:var(--ink); }
.appbar .tabs a.on{ background:var(--acc-soft); color:var(--acc-d); }
.appbar .me{ margin-left:auto; display:flex; align-items:center; gap:20px; }
.appbar .me .login{ padding:8px 15px; border:1px solid var(--navy-line); border-radius:var(--r-sm);
  font-size:13.5px; font-weight:600; color:#fff; transition:.15s var(--ease); }
.appbar .me .login:hover{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.08); color:#fff; }
.avatar{ width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:14px; flex:none; }

.app{ padding:clamp(26px,3.4vw,40px) 0 70px; }
.app-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.app-head h1{ font-size:clamp(23px,2.8vw,30px); }
.app-head p{ color:var(--ink2); font-size:14.5px; margin-top:6px; }

.plan-note{ display:flex; align-items:center; gap:14px; background:linear-gradient(90deg,var(--acc-soft),transparent);
  border:1px solid var(--line); border-left:3px solid var(--acc); border-radius:var(--r); padding:14px 18px; margin-bottom:24px; }
.plan-note svg{ width:20px; height:20px; stroke:var(--acc-d); fill:none; stroke-width:1.9; flex:none; }
.plan-note b{ font-size:14.5px; } .plan-note span{ color:var(--ink2); font-size:14px; }
.plan-note .btn{ margin-left:auto; padding:9px 16px; font-size:14px; }

.cases{ display:grid; gap:14px; }
.case{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px;
  display:grid; grid-template-columns:1fr auto; gap:14px 20px; transition:border-color .15s, box-shadow .15s; }
.case:hover{ border-color:var(--line2); box-shadow:0 16px 40px -30px rgba(16,30,56,.5); }
.case .who{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.case .who b{ font-size:16.5px; }
.case .anum{ font-family:var(--mono); font-size:13px; color:var(--ink2); letter-spacing:.04em; }
.case .meta{ display:flex; gap:22px; flex-wrap:wrap; margin-top:12px; }
.case .meta div{ font-size:13px; color:var(--muted); }
.case .meta b{ display:block; font-size:14.5px; color:var(--ink); font-weight:600; margin-top:2px; }
.case .side{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; justify-content:space-between; }
.case .upd{ font-size:12.5px; color:var(--muted); }

.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:5px 10px; border-radius:99px; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-ok{ background:var(--acc-soft); color:var(--acc-d); }
.badge-warn{ background:#FDF3DF; color:#9A7100; }
.badge-off{ background:var(--surface2); color:var(--muted); }
.badge-none{ background:#FBEBEB; color:#B3453D; }

.sw{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--ink2); cursor:pointer; }
.sw i{ width:38px; height:22px; border-radius:99px; background:var(--line2); position:relative; transition:background .18s var(--ease); flex:none; }
.sw i::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff;
  transition:transform .18s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.sw.on i{ background:var(--acc); } .sw.on i::after{ transform:translateX(16px); }

.grid2{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; margin-top:26px; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.panel h3{ font-size:16.5px; display:flex; align-items:center; gap:9px; }
.panel h3 svg,.addcase h3 svg{ width:18px; height:18px; stroke:var(--acc); fill:none; stroke-width:1.9; flex:none; }
.addcase h3{ font-size:16.5px; display:flex; align-items:center; gap:9px; }
.addcase .hint{ color:var(--ink2); font-size:13.5px; margin-top:7px; }
.panel .hint{ color:var(--ink2); font-size:13.5px; margin-top:7px; line-height:1.55; }

.tl{ margin-top:16px; display:grid; gap:0; }
.tl .it{ display:grid; grid-template-columns:14px 1fr; gap:14px; padding-bottom:18px; position:relative; }
.tl .it::before{ content:""; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--line); }
.tl .it:last-child{ padding-bottom:0; } .tl .it:last-child::before{ display:none; }
.tl .dot{ width:14px; height:14px; border-radius:50%; background:var(--surface); border:2px solid var(--line2); margin-top:3px; }
.tl .it.new .dot{ border-color:var(--acc); background:var(--acc-soft); }
.tl .when{ font-size:12.5px; color:var(--muted); }
.tl .what{ font-size:14.5px; margin-top:2px; }

.tglink{ display:flex; align-items:center; gap:14px; }
.tglink .ic{ width:42px; height:42px; border-radius:12px; background:#229ED9; display:grid; place-items:center; flex:none; }
.tglink .ic svg{ width:22px; height:22px; fill:#fff; }
.code{ font-family:var(--mono); font-size:19px; letter-spacing:.16em; background:var(--surface2); border:1px dashed var(--line2);
  border-radius:var(--r-sm); padding:11px 14px; text-align:center; margin-top:14px; color:var(--ink); }

.addcase{ background:var(--surface); border:1px dashed var(--line2); border-radius:var(--r); padding:20px; }
.addcase .row{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; margin-top:14px; }

@media(max-width:900px){
  .grid2{ grid-template-columns:1fr; }
  .appbar .tabs{ display:none; }
  .case{ grid-template-columns:1fr; }
  .case .side{ flex-direction:row; align-items:center; justify-content:space-between; }
  .addcase .row{ grid-template-columns:1fr; }
  .plan-note{ flex-wrap:wrap; } .plan-note .btn{ margin-left:0; width:100%; }
}

/* ─────────── шлюз: проверка только после регистрации ─────────── */
.gate{ display:none; }
.checkcard.gated .gate{ display:block; }
.checkcard.gated .row,
.checkcard.gated > .btn,
.checkcard.gated .fine,
.checkcard.gated > .t{ display:none; }   /* в шлюзе свой заголовок, два подряд лишние */
.gate .sum{ display:flex; align-items:center; gap:10px; background:var(--surface2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 13px; margin-top:14px; }
.gate .sum .an{ font-family:var(--mono); font-size:14.5px; letter-spacing:.04em; }
.gate .sum .cn{ font-size:13.5px; color:var(--ink2); }
.gate .sum .edit{ margin-left:auto; font-size:13px; color:var(--acc-d); font-weight:600; cursor:pointer; }
.gate .why{ font-size:13px; color:var(--ink2); line-height:1.55; margin-top:14px; display:flex; gap:9px; }
.gate .why svg{ width:15px; height:15px; stroke:var(--acc); fill:none; stroke-width:1.9; flex:none; margin-top:2px; }
.gate .btn{ margin-top:14px; }
.gate .btn + .btn{ margin-top:9px; }
.field .err{ display:none; font-size:12.5px; color:#B3453D; margin-top:5px; }
.field.bad .err{ display:block; }
.field.bad input,.field.bad .cselbtn{ border-color:#D98A84; background:#FDF6F5; }

/* карточка дела, которое сейчас проверяется */
.case.checking{ border-style:dashed; }
.case.checking .who b{ color:var(--ink2); }
.spin{ width:15px; height:15px; border:2px solid var(--line2); border-top-color:var(--acc); border-radius:50%;
  display:inline-block; animation:sp 0.8s linear infinite; vertical-align:-2px; }
@keyframes sp{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spin{ animation:none; } }

.auth-card .sum{ display:flex; align-items:center; gap:10px; background:var(--surface2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 13px; margin-top:14px; }
.auth-card .sum .an{ font-family:var(--mono); font-size:14px; letter-spacing:.04em; }
.auth-card .sum .cn{ font-size:13px; color:var(--ink2); }

/* ─────────── каналы уведомлений ─────────── */
.chan{ display:grid; grid-template-columns:44px 1fr auto; gap:16px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; }
.chan + .chan{ margin-top:12px; }
.chan .ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; }
.chan .ic svg{ width:22px; height:22px; }
.ic-tg{ background:#229ED9; } .ic-tg svg{ fill:#fff; }
.ic-wa{ background:#25D366; } .ic-wa svg{ fill:#fff; }
.ic-mail{ background:var(--navy); } .ic-mail svg{ stroke:#fff; fill:none; stroke-width:1.8; }
.ic-sms{ background:var(--surface2); } .ic-sms svg{ stroke:var(--ink2); fill:none; stroke-width:1.8; }
.chan b{ font-size:16px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.chan .d{ font-size:13.5px; color:var(--ink2); margin-top:3px; }
.chan .act{ display:flex; align-items:center; gap:12px; }
/* кнопки в строках каналов одного размера — иначе колонка справа пляшет */
.chan .act .btn{ width:148px; padding-left:0; padding-right:0; }
.chan.locked{ background:var(--surface2); border-style:dashed; }
.price-tag{ font-size:12.5px; font-weight:700; color:var(--acc-d); background:var(--acc-soft); padding:4px 9px; border-radius:99px; }

.events{ margin-top:14px; display:grid; gap:2px; }
.ev{ display:flex; align-items:flex-start; gap:12px; padding:12px 4px; border-top:1px solid var(--line); }
.ev:first-child{ border-top:0; }
.ev .txt b{ font-size:14.5px; } .ev .txt span{ display:block; font-size:13px; color:var(--ink2); margin-top:2px; }
.ev .sw{ margin-left:auto; }
.cbx{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line2); flex:none; margin-top:2px;
  display:grid; place-items:center; cursor:pointer; transition:.15s var(--ease); }
.cbx svg{ width:13px; height:13px; stroke:#fff; fill:none; stroke-width:3; opacity:0; }
.cbx.on{ background:var(--acc); border-color:var(--acc); } .cbx.on svg{ opacity:1; }

.ferr{ display:none; margin-top:14px; padding:11px 13px; border-radius:var(--r-sm);
  background:#FBEBEB; border:1px solid #F0C9C5; color:#B3453D; font-size:13.5px; line-height:1.5; }

@media(max-width:560px){
  .steps{ gap:16px; } .step{ padding:20px; }
  .trust .in{ gap:14px 16px; padding:16px var(--pad); }
  .sh p{ margin-top:8px; }
}

@media(max-width:700px){
  /* на телефоне шапка уже отделяет герой — большой отступ сверху не нужен */
  .hero{ padding-top:18px; }
  .hero .ey{ margin-bottom:2px; }
}

/* вход через провайдеров */
/* фирменные кнопки: Google — светлая с цветной «G», Apple — чёрная с белым яблоком */
.pay2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
@media(max-width:520px){ .pay2{ grid-template-columns:1fr; } }

.btn-danger{ background:#fff; color:#C93B3F; border:1px solid #F0C2C4; }
.btn-danger:hover{ background:#FFF5F5; border-color:#E5484D; color:#B3282D; }
.chan.gone{ opacity:.62; }
.chan.gone .ic{ filter:grayscale(1); }

.btn-oauth{ background:#fff; color:#1F1F1F; border:1px solid #DADCE0; box-shadow:0 1px 2px rgba(16,30,56,.06); }
.btn-oauth:hover{ background:#F7F9FC; border-color:#C6CBD4; box-shadow:0 3px 10px -4px rgba(16,30,56,.25); }
.btn-oauth svg{ width:19px; height:19px; }
.btn-apple{ background:#000; color:#fff; }
.btn-apple:hover{ background:#1a1a1a; box-shadow:0 3px 10px -4px rgba(0,0,0,.5); }
.btn-apple svg{ width:18px; height:18px; margin-top:-2px; }
.btn-oauth + .btn-apple, .btn-primary + .btn-oauth{ margin-top:10px; }
/* ─── переключатель языка: круглая кнопка раскрывается веером ─── */
.lang-fab{ position:relative; width:36px; height:36px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.lang-fab-btn{ position:relative; z-index:3; display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  border:2px solid var(--line2); background:var(--navy); background-clip:padding-box; color:#fff; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.02em;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1), border-color .18s, box-shadow .18s;
  box-shadow:0 8px 20px -8px rgba(16,30,56,.5); }
.lang-fab-btn > *{ grid-area:1/1; transition:opacity .18s, transform .24s cubic-bezier(.34,1.56,.64,1); }
.lang-fab-btn:hover{ box-shadow:0 10px 24px -8px rgba(16,30,56,.6); }
.lang-fab.is-open .lang-fab-btn{ transform:scale(1.14); border-color:var(--acc); }
.lang-fab-x{ width:17px; height:17px; stroke:#fff; fill:none; opacity:0; transform:rotate(-45deg) scale(.6); }
.lang-fab.is-open .lang-fab-cur{ opacity:0; transform:scale(.6); }
.lang-fab.is-open .lang-fab-x{ opacity:1; transform:none; }

.lang-orbs{ position:absolute; inset:0; pointer-events:none; z-index:2; }
/* дробная ширина обводки (1.4px) попадает между пикселями и мылит край, а фон
   по умолчанию заходит под обводку и просвечивает сквозь сглаживание — отсюда
   «рыхлость». Целые 2px и обрезка фона по внутреннему краю дают чистый круг. */
.lang-orb{ position:absolute; z-index:2; top:-3px; left:-3px; display:grid; place-items:center; width:42px; height:42px;
  border-radius:50%; border:2px solid var(--acc); background:var(--navy); background-clip:padding-box;
  color:#fff; cursor:pointer; pointer-events:none;
  font-family:var(--sans); font-weight:700; font-size:12.5px;
  opacity:0; transform:scale(.2); box-shadow:0 6px 14px -8px rgba(16,30,56,.55);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, background .15s; }
.lang-fab.is-open .lang-orb{ pointer-events:auto; opacity:1; }
.lang-orb:hover{ background:var(--navy2); }
/* невыбранные орбы держат ту же тонкую акцентную обводку — иначе тонут в тёмной шапке */
.lang-orb.soon .lang-orb-txt{ opacity:.86; }
.lang-orb-txt{ position:relative; z-index:1; }
.lang-orb-puck{ position:absolute; z-index:3; top:-3px; left:-3px; width:42px; height:42px; border-radius:50%;
  background:var(--acc); background-clip:padding-box; border:2px solid var(--acc); color:#fff; display:grid; place-items:center;
  font-family:var(--sans); font-weight:700; font-size:12.5px;
  pointer-events:none; opacity:0; transform:scale(.2);
  transition:transform .34s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.lang-fab.is-open .lang-orb-puck{ opacity:1; }

.drawer .pn .lang-fab{ margin-top:18px; align-self:flex-start; }

/* кнопка ночного режима — тот же круг, что у языка */
.theme-btn{ position:relative; width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:2px solid var(--line2); background:var(--navy); background-clip:padding-box;
  color:#fff; cursor:pointer; box-shadow:0 8px 20px -8px rgba(16,30,56,.5);
  transition:transform .24s cubic-bezier(.34,1.56,.64,1), border-color .18s, box-shadow .18s; }
/* солнце и месяц лежат друг на друге и сменяются поворотом */
.theme-btn .ic-sun,.theme-btn .ic-moon{ grid-area:1/1; width:18px; height:18px;
  transition:transform .42s cubic-bezier(.34,1.4,.5,1), opacity .26s var(--ease); }
.theme-btn .ic-sun{ opacity:0; transform:rotate(-80deg) scale(.5); }
.theme-btn .ic-moon{ opacity:1; transform:none; }
.theme-btn.night .ic-sun{ opacity:1; transform:none; }
.theme-btn.night .ic-moon{ opacity:0; transform:rotate(80deg) scale(.5); }
.theme-btn:hover{ border-color:var(--acc); }
.theme-btn:active{ transform:scale(.92); }
.appbar .theme-btn{ background:rgba(255,255,255,.14); border-color:var(--navy-line); }
.appbar .theme-btn:hover{ background:rgba(255,255,255,.22); }
/* кольцо расходится от самой кнопки в момент нажатия */
.theme-btn .ring{ position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--acc);
  opacity:0; pointer-events:none; }
.theme-btn.hit .ring{ animation:themeRing .75s cubic-bezier(.2,.7,.2,1); }

@keyframes themeRing{ 0%{ opacity:.85; transform:scale(1); } 100%{ opacity:0; transform:scale(2.6); } }
@keyframes themeSpin{ 0%{ transform:rotate(-70deg) scale(.5); opacity:0; } 100%{ transform:none; opacity:1; } }

/* Волна нового цвета идёт ПОД содержимым: отрицательный слой рисуется выше
   фона страницы, но ниже любого её элемента, поэтому экран не перекрывается. */
.theme-wave{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
/* на время подмены темы цвета переезжают переходом, а не скачком */
:root.theming, :root.theming *{ transition:background-color .5s var(--ease), border-color .5s var(--ease),
  color .5s var(--ease), fill .5s var(--ease), stroke .5s var(--ease) !important; }

@media(prefers-reduced-motion:reduce){
  .theme-btn.hit .ring{ animation:none; }
  .theme-btn .ic-sun,.theme-btn .ic-moon{ transition:none; }
}

/* короткое сообщение внизу экрана */
.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:200;
  max-width:min(420px,calc(100vw - 32px)); background:var(--navy); color:#fff; font-size:14px; font-weight:600;
  padding:12px 18px; border-radius:var(--r); box-shadow:0 24px 60px -24px rgba(16,30,56,.8);
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease), transform .28s var(--ease); }
.toast.on{ opacity:1; transform:translate(-50%,0); }
@media(prefers-reduced-motion:reduce){
  .lang-orb,.lang-orb-puck,.lang-fab-btn,.lang-fab-btn > *,.toast{ transition-duration:.01s; }
}

/* конверт над шагом с кодом: открывается один раз, потом чуть покачивается */
.mailer{ width:76px; margin:0 auto 14px; }
.mailer svg{ width:100%; display:block; overflow:visible; animation:mailFloat 4.5s ease-in-out 1.1s infinite; }
.mailer .body{ fill:var(--navy); }
.mailer .paper{ fill:#fff; stroke:var(--line2); stroke-width:1.4;
  transform-box:fill-box; transform-origin:bottom center;
  animation:mailPaper .55s cubic-bezier(.2,.9,.25,1) .45s backwards; }
.mailer .line{ stroke:var(--acc); stroke-width:2.6; stroke-linecap:round; fill:none;
  animation:mailPaper .55s cubic-bezier(.2,.9,.25,1) .45s backwards; }
.mailer .flap{ fill:none; stroke:#2A3C5F; stroke-width:3.2; stroke-linejoin:round;
  transform-box:fill-box; transform-origin:top center;
  animation:mailFlap .5s cubic-bezier(.4,0,.2,1) backwards; }
@keyframes mailFlap{ from{ transform:scaleY(-1); } }
/* код принят: письмо закрывается и на нём проявляется галочка */
.mailer .stamp{ fill:none; stroke:#4FE0C4; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:34; stroke-dashoffset:34; opacity:0; }
.mailer.sealed svg{ animation:none; }
.mailer.sealed .paper,.mailer.sealed .line{ opacity:0; transition:opacity .18s; }
.mailer.sealed .flap{ animation:none; }
.mailer.sealed .stamp{ opacity:1; stroke-dashoffset:0;
  transition:stroke-dashoffset .45s .12s cubic-bezier(.4,0,.2,1), opacity .1s .12s; }
@keyframes mailPaper{ from{ transform:translateY(16px) scaleY(.6); opacity:0; } }
@keyframes mailFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@media(prefers-reduced-motion:reduce){
  .mailer svg,.mailer .paper,.mailer .line,.mailer .flap{ animation:none; }
}

/* ─── поле кода из письма ─── */
.otp{ position:relative; margin-bottom:26px; }
.otp input{ position:absolute; inset:0 0 26px; width:100%; opacity:0; z-index:2;
  border:0; padding:0; font-size:16px; }          /* 16px — иначе iOS зумит страницу */
.otp-cells{ --h:60px; display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }

.otp-cells .cell{ position:relative; height:var(--h); overflow:hidden; background:var(--surface2);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  animation:otpIn .5s cubic-bezier(.2,.9,.25,1) backwards; animation-delay:calc(var(--i) * 55ms);
  transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
@keyframes otpIn{ from{ opacity:0; transform:translateY(14px) scale(.9); } }

/* лента цифр: пустая ячейка сверху, дальше 0–9 — двигаем барабан по вертикали */
.otp-cells .roll{ display:block; transform:translateY(calc(var(--d,0) * var(--h) * -1));
  transition:transform .42s cubic-bezier(.22,1.15,.36,1); }
.otp-cells .roll i{ display:block; height:var(--h); line-height:var(--h); text-align:center;
  font-family:var(--mono); font-size:25px; font-weight:500; font-style:normal; color:var(--ink); }
.otp-cells .cell.filled{ background:#fff; border-color:var(--line2); }

/* активная клетка светится и показывает мигающую черту вместо курсора */
.otp.on .cell.now{ border-color:var(--acc); background:#fff; box-shadow:0 0 0 3px var(--acc-soft); }
.otp.on .cell.now::after{ content:""; position:absolute; left:50%; top:50%; width:2px; height:26px;
  margin:-13px 0 0 -1px; background:var(--acc); border-radius:2px;
  animation:otpCaret 1.05s steps(1,end) infinite; }
.otp.on .cell.now.filled::after{ display:none; }
@keyframes otpCaret{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }

/* код набран — по клеткам слева направо проходит волна */
.otp.full .cell{ border-color:var(--acc); }
.otp.win .cell,
.otp.win.on .cell.now{ background:var(--acc); border-color:var(--acc); box-shadow:none;
  transition-duration:.16s; transition-delay:calc(var(--i) * 60ms); }
/* последняя клетка активна, и её подсветка перебивала зелёную волну по весу правила */
.otp.win .cell.now::after{ display:none; }
/* цвет цифры меняем чуть позже фона, иначе на миг белое по белому */
.otp.win .roll i{ color:#fff; transition:color .14s calc(var(--i) * 60ms + 60ms); }

.otp.bad .otp-cells{ animation:otpShake .38s var(--ease); }
.otp.bad .cell{ border-color:#E5484D; background:#FFF5F5; }
@keyframes otpShake{ 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-7px);} 40%{ transform:translateX(6px);} 60%{ transform:translateX(-4px);} 80%{ transform:translateX(2px);} }

/* сколько код ещё жив: полоса тает, под ней время */
.otp-life{ margin-top:10px; height:3px; border-radius:99px; background:var(--line); position:relative; }
.otp-life i{ display:block; height:100%; border-radius:99px; background:var(--acc);
  transform-origin:left; transition:transform 1s linear, background .3s; }
.otp-life::after{ content:"code expires in " attr(data-left); position:absolute; right:0; top:8px;
  font-size:11.5px; color:var(--muted); letter-spacing:.01em; }
.otp-life.warn i{ background:#E5484D; }
.otp-life.warn::after{ color:#E5484D; font-weight:600; }
.otp.dead .cell{ opacity:.5; }
.otp.dead .otp-life::after{ content:"the code has expired — send a new one"; }

@media(max-width:380px){
  .otp-cells{ --h:52px; gap:6px; }
  .otp-cells .roll i{ font-size:21px; }
}
@media(prefers-reduced-motion:reduce){
  .otp-cells .cell{ animation:none; }
  .otp-cells .roll{ transition:none; }
  .otp.bad .otp-cells{ animation:none; }
  .otp.on .cell.now::after{ animation:none; }
}

/* ─── пароль: полоса надёжности и список правил ─── */
.field.has-eye{ position:relative; }
.field.has-eye input{ padding-right:44px; }
.eye{ position:absolute; right:6px; bottom:6px; width:34px; height:34px; display:grid; place-items:center;
  border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:8px; transition:color .15s, background .15s; }
.eye:hover{ color:var(--ink2); background:var(--surface2); }
.eye svg{ width:19px; height:19px; }
.eye .slash{ stroke-dasharray:24; stroke-dashoffset:0; transition:stroke-dashoffset .22s var(--ease); }
.eye.on .slash{ stroke-dashoffset:24; }          /* открыли пароль — перечёркивание уезжает */

.pw{ margin-top:12px; }
.pw-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.pw-bar i{ height:5px; border-radius:99px; background:var(--line); position:relative; overflow:hidden; }
.pw-bar i::after{ content:""; position:absolute; inset:0; border-radius:99px; background:var(--acc);
  transform:scaleX(0); transform-origin:left; transition:transform .38s cubic-bezier(.22,1,.36,1), background-color .3s; }
.pw-bar i.on::after{ transform:scaleX(1); }
.pw[data-lvl="1"] .pw-bar i::after{ background:#E5484D; }
.pw[data-lvl="2"] .pw-bar i::after{ background:#F5A524; }
.pw[data-lvl="3"] .pw-bar i::after{ background:#3E9BFF; }
.pw[data-lvl="4"] .pw-bar i::after{ background:var(--acc); }
.pw-word{ font-size:12.5px; font-weight:700; color:var(--muted); margin-top:7px; transition:color .25s; }
.pw[data-lvl="1"] .pw-word{ color:#E5484D; }
.pw[data-lvl="2"] .pw-word{ color:#B4761A; }
.pw[data-lvl="3"] .pw-word{ color:#2A7FD4; }
.pw[data-lvl="4"] .pw-word{ color:var(--acc-d); }

.pw-reqs{ list-style:none; margin:10px 0 0; display:grid; gap:6px; }
.pw-reqs .req{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted);
  transition:color .25s var(--ease); }
.pw-reqs .dot{ width:17px; height:17px; border-radius:50%; border:1.6px solid var(--line2); flex:none;
  display:grid; place-items:center; color:#fff; background:transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.pw-reqs .tk{ width:11px; height:11px; }
.pw-reqs .tk path{ stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .3s .05s var(--ease); }
.pw-reqs .req.ok{ color:var(--ink2); }
.pw-reqs .req.ok .dot{ background:var(--acc); border-color:var(--acc); transform:scale(1.08); }
.pw-reqs .req.ok .tk path{ stroke-dashoffset:0; }

.pw-match{ font-size:12.5px; font-weight:600; margin-top:8px; opacity:0; transform:translateY(-3px);
  transition:opacity .2s var(--ease), transform .2s var(--ease); }
.pw-match.show{ opacity:1; transform:none; }
.pw-match.ok{ color:var(--acc-d); }
.pw-match.bad{ color:#B4761A; }

/* подпись под кнопкой, пока провайдер не подключён */
.soon-note{ color:var(--ink2); font-size:12.5px; margin-top:8px; text-align:center; }

/* ─────────── каркас кабинета: слева навигация, справа содержимое ─────────── */
.shell{ display:grid; grid-template-columns:242px minmax(0,1fr); min-height:calc(100vh - 68px);
  max-width:1440px; margin:0 auto; }
/* снизу 32: у части окон нижние ~20px перекрыты (панель задач, окно ниже экрана),
   и кнопка у самого края режется — визуально этот отступ читается как боковые 16 */
.side{ border-right:1px solid var(--line); background:var(--surface); padding:22px 16px 32px; position:sticky;
  top:69px; height:calc(100vh - 69px); overflow-y:auto;
  display:flex; flex-direction:column; }   /* 69 = шапка вместе с её линией, иначе колонка на пиксель выше экрана */
/* почта — тихой подписью над меню, а сам профиль такой же пункт, как остальные:
   отдельная карточка с аватаром выбивалась из списка */
.side .acct{ font-size:11.5px; color:var(--muted); letter-spacing:.02em; padding:0 12px 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side nav{ display:grid; gap:2px; }
.side nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-sm);
  font-size:14.5px; font-weight:600; color:var(--ink2); transition:.15s var(--ease); }
.side nav a svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none; }
.side nav a:hover{ background:var(--surface2); color:var(--ink); }
.side nav a.on{ background:var(--acc-soft); color:var(--acc-d); }
/* поддержка стоит сразу под меню: у нижнего края экрана её срезает
   и панелью задач, и любым уменьшением окна */
.side .sup{ display:flex; align-items:center; gap:11px; width:100%; margin-top:auto; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface2);
  font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink2); cursor:pointer;
  transition:.15s var(--ease); }
.side .sup svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none; }
.side .sup:hover{ border-color:var(--acc); color:var(--acc-d); background:var(--acc-soft); }
.side .sup.on{ border-color:transparent; background:var(--acc-soft); color:var(--acc-d); }
.btn-tg svg{ width:18px; height:18px; }
.side .foot a{ color:var(--ink2); }

.main{ padding:clamp(22px,2.6vw,34px) clamp(18px,2.6vw,40px) 60px; min-width:0; }
/* ширину держит каркас — внутри main ничего не центрируем, иначе поля пляшут */
.main .head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.main .head h1{ font-size:clamp(22px,2.4vw,28px); }
.main .head p{ color:var(--ink2); font-size:14px; margin-top:5px; }

/* сводка сверху: что важно знать одним взглядом */
.sum3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.sum3 .b{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 17px; }
.sum3 .k{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.sum3 .v{ font-size:21px; font-weight:700; margin-top:5px; }
.sum3 .v small{ font-size:13px; font-weight:500; color:var(--ink2); }

/* дело — плотная строка, а не карточка-простыня */
.row-case{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 18px;
  display:grid; grid-template-columns:minmax(215px,1.5fr) repeat(3,minmax(86px,1fr)) auto 18px; gap:16px; align-items:center; }
.row-case + .row-case{ margin-top:10px; }
.row-case{ cursor:pointer; }
.row-case:hover{ border-color:var(--acc); box-shadow:0 10px 30px -22px rgba(18,169,141,.8); }
.row-case .go{ width:18px; height:18px; stroke:var(--faint); fill:none; stroke-width:2; flex:none; }
.row-case:hover .go{ stroke:var(--acc); }
.row-case .nm{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.row-case .nm b{ font-size:15.5px; }
.row-case .an{ font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.03em; margin-top:3px; }
.row-case .c-k{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.row-case .c-v{ font-size:14px; font-weight:600; margin-top:3px; }
.row-case .end{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.row-case .upd{ font-size:12px; color:var(--muted); }
.empty{ background:var(--surface); border:1px dashed var(--line2); border-radius:var(--r); padding:36px 22px; text-align:center; }
.empty h3{ font-size:17px; } .empty p{ color:var(--ink2); font-size:14px; margin-top:7px; }

/* окно добавления дела */
.modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px;
  background:rgba(16,30,56,.45); opacity:0; pointer-events:none; transition:opacity .18s var(--ease); }
.modal.on{ opacity:1; pointer-events:auto; }
.modal .win{ width:100%; max-width:460px; background:var(--surface); border-radius:var(--r-lg); padding:26px;
  box-shadow:0 40px 90px -40px rgba(16,30,56,.6); transform:translateY(10px); transition:transform .2s var(--ease); }
.modal.on .win{ transform:none; }
.modal h3{ font-size:19px; } .modal .hint{ color:var(--ink2); font-size:13.5px; margin-top:7px; }
.modal .acts{ display:flex; gap:10px; margin-top:18px; }
.modal .acts .btn{ flex:1; }

@media(max-width:900px){
  .appbar > .wrap{ padding-left:var(--pad); padding-right:var(--pad); }
  .shell{ grid-template-columns:1fr; }
  .side{ position:static; height:auto; overflow:visible; border-right:0; border-bottom:1px solid var(--line); padding:14px 12px; }
  .side .sup{ margin-top:10px; }
  .side .who{ display:none; } .side .foot{ display:none; }
  .side nav{ grid-template-columns:repeat(2,1fr); gap:6px; }
  .side .acct{ padding:2px 4px 10px; }
  .side nav a{ justify-content:center; padding:9px 6px; font-size:13.5px; }
  .side nav a svg{ display:none; }
  .sum3{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .sum3 .b:last-child{ grid-column:1 / -1; }
  .row-case{ grid-template-columns:1fr; gap:10px; }
  .row-case .end{ flex-direction:row; align-items:center; justify-content:space-between; }
  .row-case .go{ display:none; }   /* на телефоне тапается вся карточка, стрелка только мусорит */
  .row-case .c-empty{ display:none; }
}

/* способы входа на странице профиля */
.signins{ display:grid; gap:9px; margin-top:14px; }
.si{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface2); }
.si .dot{ width:22px; height:22px; border-radius:50%; border:1.6px solid var(--line2); flex:none;
  display:grid; place-items:center; color:#fff; }
.si .dot svg{ width:12px; height:12px; }
.si.on .dot{ background:var(--acc); border-color:var(--acc); }
.si b{ display:block; font-size:14.5px; }
.si span{ font-size:12.5px; color:var(--muted); }

/* ─────────── технические страницы: условия, приватность, вопросы ─────────── */
.doc{ padding:clamp(30px,4vw,54px) 0 clamp(40px,5vw,72px); }
.doc .wrap{ max-width:760px; }
.doc h1{ font-size:clamp(28px,3.4vw,38px); margin-top:6px; }
.doc .upd{ color:var(--muted); font-size:13px; margin-top:10px; }
.doc .lead{ font-size:17.5px; color:var(--ink2); line-height:1.62; margin-top:22px; }
.doc h2{ font-size:20px; margin-top:34px; }
.doc p{ margin-top:12px; line-height:1.68; color:var(--ink2); }
.doc p b,.doc li b{ color:var(--ink); }
.doc a{ color:var(--acc-d); font-weight:600; }
.doc a:hover{ text-decoration:underline; }
.doc .note{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:var(--r-sm); padding:14px 16px; margin-top:18px; font-size:14.5px; }
.doc ul.dots{ list-style:none; margin-top:14px; display:grid; gap:10px; }
.doc ul.dots li{ position:relative; padding-left:20px; color:var(--ink2); line-height:1.6; }
.doc ul.dots li::before{ content:""; position:absolute; left:2px; top:10px; width:7px; height:7px;
  border-radius:50%; background:var(--acc); }
.doc .faq .qa{ background:var(--surface); }

/* ─────────── страница дела ─────────── */
.main .head h1 .badge{ vertical-align:middle; margin-left:9px; position:relative; top:-2px; }
.back{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink2); margin-bottom:14px; }
.back svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.back:hover{ color:var(--acc-d); }
.facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.facts div{ padding:16px 18px; border-top:1px solid var(--line); }
.facts div:nth-child(-n+2){ border-top:0; }
.facts div:nth-child(odd){ border-right:1px solid var(--line); }
.facts dt{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.facts dd{ font-size:15.5px; font-weight:600; margin-top:5px; }
.facts dd.mono{ font-family:var(--mono); font-size:14.5px; letter-spacing:.03em; }
@media(max-width:640px){ .facts{ grid-template-columns:1fr; } .facts div:nth-child(odd){ border-right:0; } .facts div:nth-child(2){ border-top:1px solid var(--line); } }