/* Preserve the two-weight visual hierarchy without contacting a third-party
   font CDN before visitor consent. The aliases prefer an installed brand
   font and otherwise use the platform's native text/display sans. */
@font-face{font-family:Inter;src:local('Inter'),local('SF Pro Text'),local('Segoe UI Variable Text'),local('Segoe UI'),local('Arial');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Manrope;src:local('Manrope'),local('Avenir Next'),local('SF Pro Display'),local('Segoe UI Variable Display'),local('Segoe UI'),local('Arial');font-style:normal;font-weight:100 900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* The `hidden` attribute is only `display:none` in the UA stylesheet, so any
   author rule setting `display` beats it. Several layout rules here do
   exactly that (`label{display:grid}`), which left `<label hidden>` visible:
   the "Особенности вашего бизнеса" free-text field showed on the register
   page and in the cabinet regardless of the selected niche, even though the
   JS toggling it was correct. Same normalization normalize.css applies. */
[hidden]{display:none!important}

/* ==================== index.css ==================== */
body.pg-landing {--cream:#f5f6f7; --cream-2:#e6e9ea; --ink:#1b2226; --ink-soft:#59646a;
  --copper:#0f9438; --copper-dark:#0a7029; --sage:#12a04b; --gold:#6fbd8e;
  /* Приподнятая поверхность: карточки, тарифы, вопросы. Фон страницы —
     --cream, и белого в палитре до сих пор не было, поэтому каждая
     карточка держала #ffffff у себя. */
  --surface:#ffffff;
  /* Бледная заливка под акцентным текстом — метки статей. */
  --copper-soft:#eef8f0;
  /* Тон линий и полупрозрачных подложек. Отдельные переменные под каждую
     прозрачность превратились бы в десяток имён, поэтому переменная —
     сам тон, а прозрачность остаётся в месте использования. */
  --ink-rgb:27,34,38;
  --cream-rgb:245,246,247;
  /* Тень — не тот же тон, что линии: на тёмном фоне подсветка вместо тени
     читается как ореол, поэтому там она становится чёрной. */
  --shadow-rgb:27,34,38;}
@keyframes rise-landing{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pop-landing{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes blink-landing{0%,80%,100%{opacity:.25}40%{opacity:1}}
body.pg-landing *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.pg-landing{font-family:'Inter',sans-serif;background:var(--cream);color:var(--ink);line-height:1.65;font-size:17px}
body.pg-landing h1, body.pg-landing h2, body.pg-landing h3, body.pg-landing .serif{font-family:'Manrope',sans-serif;font-weight:400;line-height:1.25}
body.pg-landing .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
body.pg-landing a{color:inherit;text-decoration:none}
body.pg-landing header{position:sticky;top:0;z-index:50;background:rgba(var(--cream-rgb),.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(var(--ink-rgb),.08)}
body.pg-landing .nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
body.pg-landing .nav-actions{display:flex;align-items:center;gap:16px}
/* Кнопкой в шапке стало «Войти», а не «Подключить». Причина не в весе
   действий, а в том, что ниже 900px в строке остаётся ровно одно из них, и
   остаётся именно «Войти»: у «Подключить» есть ещё три кнопки на самой
   странице, у входа в кабинет — ни одной. Раз на телефоне «Войти» и так
   рисуется кнопкой, пусть будет ею везде: одна деталь вместо двух.

   Значка темы в этой строке больше нет — он переехал в подвал вместе с
   выбором языка, и правило, гасившее его 44-пиксельную зону нажатия
   отрицательным отступом, ушло вместе с ним. */
body.pg-landing .nav-connect{font-size:14px;font-weight:700;color:var(--ink-soft);text-decoration:none}
body.pg-landing .nav-connect:hover{color:var(--copper)}
body.pg-landing .nav-login{display:inline-block;background:var(--copper);color:var(--cream);padding:11px 22px;border-radius:10px;font-weight:600;font-size:15px;transition:.25s}
body.pg-landing .nav-login:hover{background:var(--copper-dark);color:var(--cream)}
body.pg-landing .logo{display:flex;align-items:center;gap:4px;font-family:'Manrope',sans-serif;font-size:22px}
body.pg-landing .logo-mark{width:38px;height:38px;display:block;object-fit:contain;margin-top:-4px}
body.pg-landing .logo-ai{margin-inline-start:4px;color:var(--copper)}
body.pg-landing .nav-links{display:flex;gap:28px;font-size:15px;color:var(--ink-soft)}
body.pg-landing .nav-links a:hover{color:var(--copper)}
/* Дубли действий внутри меню: на широком экране «Войти» и «Подключить» стоят
   в шапке, поэтому здесь их быть не должно — ни на виду, ни в порядке обхода
   по Tab, ни в дереве доступности. Показывает их только блок до 900px. */
body.pg-landing .nav-menu-action{display:none}
body.pg-landing .btn{display:inline-block;background:var(--copper);color:var(--cream);padding:13px 28px;border-radius:10px;font-weight:600;font-size:16px;transition:.25s}
body.pg-landing .btn:hover{background:var(--copper-dark);transform:translateY(-2px)}
body.pg-landing .btn-ghost{background:transparent;color:var(--copper);box-shadow:inset 0 0 0 1.5px var(--copper)}
body.pg-landing .btn-ghost:hover{background:var(--copper);color:var(--cream)}
body.pg-landing .hero{position:relative;overflow:hidden;padding:90px 0 110px}
body.pg-landing .hero::before{content:"";position:absolute;inset-inline-end:-180px;top:-120px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,var(--cream-2) 0%,transparent 70%)}
body.pg-landing .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;position:relative}
body.pg-landing .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin-bottom:22px;font-weight:600}
body.pg-landing .eyebrow::before{content:"";width:34px;height:1.5px;background:var(--copper)}
body.pg-landing .hero h1{font-size:clamp(34px,4.6vw,56px);margin-bottom:24px}
body.pg-landing .hero h1 em{font-style:normal;color:var(--copper)}
body.pg-landing .hero p.lead{font-size:19px;color:var(--ink-soft);max-width:520px;margin-bottom:36px}
body.pg-landing .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
body.pg-landing .hero-note{font-size:14px;color:var(--ink-soft);margin-top:18px}
body.pg-landing .chat-card{background:var(--surface);border-radius:26px;box-shadow:0 30px 70px rgba(var(--shadow-rgb),.16);padding:26px;position:relative;animation:rise-landing .9s ease both .2s}
body.pg-landing .chat-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--cream-2);margin-bottom:16px}
body.pg-landing .chat-ava{width:44px;height:44px;display:block;object-fit:contain}
body.pg-landing .chat-head div{display:flex;flex-direction:column;gap:1px}
body.pg-landing .chat-head b{display:block;font-size:16px;line-height:1.2}
body.pg-landing .chat-head span{font-size:13px;color:var(--sage);line-height:1.2}
body.pg-landing .chat-head span::before{content:"●";margin-right:5px;font-size:9px;vertical-align:2px}
body.pg-landing .msg{max-width:82%;padding:11px 16px;border-radius:18px;margin-bottom:10px;font-size:15px;opacity:0;animation:pop-landing .5s ease forwards;animation-delay:var(--message-delay,0s)}
/* The first exchange is visible on paint. It used to animate in like the
   rest, so the hero's main proof — a real conversation — was a blank card
   for the first second of every visit, which is also what a full-page
   screenshot or a slow device captures. */
body.pg-landing .chat-card > .msg:nth-of-type(2),
body.pg-landing .chat-card > .msg:nth-of-type(3){opacity:1;animation:none}
body.pg-landing .msg.in{background:var(--cream-2);border-end-start-radius:6px}
body.pg-landing .msg.out{background:var(--copper);color:var(--cream);margin-inline-start:auto;border-end-end-radius:6px}
/* .chat-head is also a div, so message divs start at :nth-of-type(2).
   Keeping the sequence explicit prevents the final answer appearing first. */
body.pg-landing .chat-card > .msg:nth-of-type(4){--message-delay:.5s}
body.pg-landing .chat-card > .msg:nth-of-type(5){--message-delay:1.2s}
body.pg-landing .typing{display:inline-flex;gap:4px;padding:12px 16px;background:var(--cream-2);border-radius:18px;border-end-start-radius:6px;opacity:0;animation:pop-landing .4s ease forwards 1.9s}
body.pg-landing .typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);animation:blink-landing 1.2s infinite}
body.pg-landing .typing i:nth-child(2){animation-delay:.2s}
body.pg-landing .typing i:nth-child(3){animation-delay:.4s}
body.pg-landing .chat-tag{position:absolute;top:-16px;inset-inline-end:26px;background:var(--sage);color:var(--cream);font-size:12.5px;padding:7px 16px;border-radius:999px;letter-spacing:.06em}
/* Reduced motion: the conversation is content, not decoration, so it stays
   fully visible — only the staged reveal and the typing blink are dropped. */
@media(prefers-reduced-motion:reduce){
body.pg-landing .msg, body.pg-landing .typing{opacity:1;animation:none}
body.pg-landing .typing i{animation:none}
body.pg-landing .btn:hover{transform:none}
}
body.pg-landing section{padding:88px 0}
body.pg-landing .sec-title{font-size:clamp(28px,3.4vw,40px);margin-bottom:14px}
body.pg-landing .sec-sub{color:var(--ink-soft);max-width:640px;margin-bottom:52px;font-size:18px}
body.pg-landing .center{text-align:center}
body.pg-landing .center .sec-sub{margin-left:auto;margin-right:auto}
body.pg-landing .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
body.pg-landing .feat{background:var(--surface);border-radius:20px;padding:30px 28px;border:1px solid rgba(var(--ink-rgb),.06);transition:.3s}
body.pg-landing .feat:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(var(--shadow-rgb),.1)}
body.pg-landing .feat .num{font-family:'Manrope',sans-serif;font-size:15px;color:var(--gold);letter-spacing:.1em;display:block;margin-bottom:14px}
body.pg-landing .feat h3{font-size:19px;margin-bottom:10px}
body.pg-landing .feat p{font-size:15px;color:var(--ink-soft)}
body.pg-landing .strip{background:var(--surface);color:var(--ink);border:1px solid rgba(var(--ink-rgb),.08);border-radius:32px;padding:70px 60px}
body.pg-landing .strip .sec-title{color:var(--ink)}
body.pg-landing .strip .sec-sub{color:var(--ink-soft)}
body.pg-landing .scen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body.pg-landing .scen{border:1px solid rgba(var(--ink-rgb),.1);border-radius:16px;padding:24px;transition:.3s;background:var(--cream)}
body.pg-landing .scen:hover{background:var(--surface);border-color:var(--copper);box-shadow:0 10px 26px rgba(var(--shadow-rgb),.07)}
body.pg-landing .scen h3{font-size:17px;color:var(--copper-dark);margin-bottom:8px}
body.pg-landing .scen p{font-size:14.5px;color:var(--ink-soft)}
body.pg-landing .steps{counter-reset:step;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
body.pg-landing .step{position:relative;padding-top:64px}
body.pg-landing .step::before{counter-increment:step;content:counter(step);position:absolute;top:0;inset-inline-start:0;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--copper);color:var(--copper);font-family:'Manrope',sans-serif;font-size:19px;display:flex;align-items:center;justify-content:center;background:var(--cream)}
body.pg-landing .step::after{content:"";position:absolute;top:23px;inset-inline-start:56px;inset-inline-end:-8px;height:1px;background:rgba(var(--ink-rgb),.15)}
body.pg-landing .step:last-child::after{display:none}
body.pg-landing .step h3{font-size:16.5px;margin-bottom:6px}
body.pg-landing .step p{font-size:14px;color:var(--ink-soft)}
body.pg-landing .mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
body.pg-landing .mod{border-radius:20px;padding:32px 28px;background:var(--cream-2)}
body.pg-landing .mod.hl{background:var(--copper);color:var(--cream)}
body.pg-landing .mod.hl p{color:rgba(var(--cream-rgb),.85)}
body.pg-landing .mod h3{font-size:19px;margin-bottom:10px}
body.pg-landing .mod p{font-size:15px;color:var(--ink-soft)}
body.pg-landing .mod .lvl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;display:block;margin-bottom:12px;font-weight:600}
body.pg-landing .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
body.pg-landing .price{display:flex;flex-direction:column;background:var(--surface);border:1px solid rgba(var(--ink-rgb),.1);border-radius:20px;padding:32px 28px;transition:.3s}
body.pg-landing .price:hover{border-color:var(--copper);box-shadow:0 10px 26px rgba(var(--shadow-rgb),.07)}
body.pg-landing .price.hl{background:var(--copper);border-color:var(--copper);color:var(--cream)}
body.pg-landing .price.hl:hover{box-shadow:0 14px 32px rgba(15,148,56,.22)}
body.pg-landing .price .lvl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;display:block;margin-bottom:16px;font-weight:600}
body.pg-landing .price-amount{font-family:'Manrope',sans-serif;display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
body.pg-landing .price-amount b{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1}
body.pg-landing .price-amount span{font-size:15px;color:var(--ink-soft)}
body.pg-landing .price.hl .price-amount span{color:rgba(var(--cream-rgb),.8)}
body.pg-landing .price-for{font-size:15px;color:var(--ink-soft);margin-bottom:22px;min-height:2.9em}
body.pg-landing .price.hl .price-for{color:rgba(var(--cream-rgb),.85)}
body.pg-landing .price-list{list-style:none;margin:0 0 26px;padding:0;font-size:15px;display:grid;gap:11px}
body.pg-landing .price-list li{position:relative;padding-inline-start:26px}
body.pg-landing .price-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.5em;width:11px;height:6px;border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg)}
body.pg-landing .price.hl .price-list li::before{border-color:var(--cream)}
body.pg-landing .price-cta{margin-top:auto;text-align:center}
body.pg-landing .price.hl .price-cta{background:var(--cream);color:var(--copper-dark)}
body.pg-landing .price.hl .price-cta:hover{background:var(--surface)}
body.pg-landing .price-foot{margin-top:26px;font-size:14.5px;color:var(--ink-soft);max-width:760px}
body.pg-landing .aud{display:flex;flex-wrap:wrap;gap:12px}
body.pg-landing .aud span{background:var(--surface);border:1px solid rgba(var(--ink-rgb),.1);padding:10px 20px;border-radius:999px;font-size:15px;transition:.25s}
body.pg-landing .aud span:hover{border-color:var(--copper);color:var(--copper)}
body.pg-landing details{background:var(--surface);border-radius:16px;margin-bottom:12px;border:1px solid rgba(var(--ink-rgb),.07)}
body.pg-landing summary{cursor:pointer;padding:20px 26px;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
body.pg-landing summary::after{content:"+";font-family:'Manrope',sans-serif;font-size:22px;color:var(--copper);transition:.25s}
body.pg-landing details[open] summary::after{transform:rotate(45deg)}
body.pg-landing details p{padding:0 26px 22px;color:var(--ink-soft);font-size:15.5px}
body.pg-landing .cta{background:linear-gradient(135deg,var(--copper) 0%,var(--copper-dark) 100%);border-radius:32px;padding:80px 60px;text-align:center;color:var(--cream);position:relative;overflow:hidden}
body.pg-landing .cta::before{content:"К";position:absolute;font-family:'Manrope',sans-serif;font-size:420px;inset-inline-end:-60px;bottom:-140px;color:rgba(var(--cream-rgb),.07)}
body.pg-landing .cta h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:18px}
body.pg-landing .cta p{max-width:560px;margin:0 auto 36px;color:rgba(var(--cream-rgb),.85);font-size:18px}
body.pg-landing .cta .btn{background:var(--cream);color:var(--copper-dark)}
body.pg-landing .cta .btn:hover{background:var(--surface)}
body.pg-landing footer{font-size:14px;color:var(--ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
body.pg-landing footer a{text-decoration:underline}
body.pg-landing h1, body.pg-landing h2, body.pg-landing h3, body.pg-landing .serif{font-weight:800;letter-spacing:-.015em}
body.pg-landing .logo, body.pg-landing .chat-ava, body.pg-landing .step::before, body.pg-landing .feat .num{font-weight:700}
body.pg-landing .nav-toggle{display:none}
body.pg-landing .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;cursor:pointer}
body.pg-landing .nav-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
@media(max-width:900px){body.pg-landing .wrap.nav{padding:18px 24px;position:relative;flex-wrap:wrap}body.pg-landing .hero-grid{grid-template-columns:1fr}body.pg-landing .feat-grid, body.pg-landing .scen-grid, body.pg-landing .mod-grid, body.pg-landing .price-grid{grid-template-columns:1fr}body.pg-landing .price-for{min-height:0}body.pg-landing .steps{grid-template-columns:1fr;gap:30px}body.pg-landing .step::after{display:none}body.pg-landing .strip, body.pg-landing .cta{padding:48px 28px}body.pg-landing .nav-burger{display:flex;order:2;margin-inline-start:auto}body.pg-landing .nav-actions{order:1;margin-inline-start:auto}body.pg-landing .logo{order:0}body.pg-landing .nav-links{display:none;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid rgba(var(--ink-rgb),.08);box-shadow:0 16px 30px rgba(var(--shadow-rgb),.1);padding:6px 24px 14px;order:3}body.pg-landing .nav-links a{padding:13px 0;border-bottom:1px solid rgba(var(--ink-rgb),.07)}body.pg-landing .nav-toggle:checked ~ .nav-links{display:flex}}

/* Ниже 900px логотип, бургер и два действия делят одну строку, и на телефоне
   она не сходится. Поэтому в шапке остаётся одно действие — «Войти»;
   «Подключить» уезжает в бургер-меню (.nav-menu-action), туда же уходит и
   выбор языка (.lang-select-menu).

   Действий в строке стало одно, и свободного места прибавилось. Оба auto-margin
   поделили бы его поровну и увели кнопку на середину шапки, поэтому у бургера
   отступ становится фиксированным: всё свободное место забирает .nav-actions,
   и пара «кнопка + бургер» остаётся прижатой вправо, как и было.

   Чекбокс бургера прячется размером и прозрачностью, а не display:none:
   иначе меню нельзя открыть с клавиатуры, а «Подключить» теперь живёт
   только там — и для тех, кто не пользуется мышью, действие бы исчезло. */
@media(max-width:900px){
  body.pg-landing .nav-connect{display:none}
  /* Бургер уходит влево, до логотипа: так делают почти все мобильные
     интерфейсы, и большой палец дотягивается до него, не перехватывая
     телефон. Порядок переопределяется здесь, а не в минифицированном блоке
     выше — тот описывает исходную раскладку, и переписывать его значило бы
     потерять историю того, как было.

     margin-left:0 обязателен: выше на бургере стоит auto, и без сброса он
     остался бы прижат вправо, куда бы его ни поставили по order.

     5px против 4px внутри самого логотипа. Отступ намеренно почти совпадает
     с внутренним: бургер и знак читаются как один плотный блок у левого края,
     а не как две конкурирующие детали. Разделяет их не пробел, а форма —
     три полосы против круглого знака. */
  body.pg-landing .nav-burger{order:0;margin-inline-start:0;margin-inline-end:5px}
  body.pg-landing .logo{order:1}
  body.pg-landing .nav-actions{order:2;margin-inline-start:auto}
  body.pg-landing .nav-menu-action{display:block}
  body.pg-landing .nav-toggle{display:block;position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  body.pg-landing .nav-toggle:focus-visible + .nav-burger{outline:2px solid var(--copper);outline-offset:6px}
}

/* Сразу за порогом бургера строка шапки шире окна: логотип (162px), семь
   пунктов навигации (516px) и три действия (229px) требуют 907px, а на 901px
   под содержимое остаётся 853px. Так было и раньше — «Войти» кнопкой шире
   «Войти» ссылкой ровно настолько, чтобы запас в шесть пикселей кончился.

   Уплотняется навигация: из трёх блоков только она тянется, а 16px между
   пунктами всё ещё читаются как отдельные ссылки. Полоса узкая, поэтому и
   правило узкое — выше 1000px возвращается исходный разрядка в 28px. */
@media(min-width:901px) and (max-width:1000px){body.pg-landing .nav-links{gap:16px}}

/* На 320px — самом узком телефоне в обиходе — логотип, кнопка и бургер
   сходятся в строку только если кнопка чуть уже. Ужимается ширина, а не
   высота: 14px текста при вертикальных 11px дают 45px, то есть кнопка
   остаётся выше порога в 44px, ради которого написан блок pointer:coarse. */
@media(max-width:420px){body.pg-landing .wrap.nav{padding:16px 20px}body.pg-landing .logo{gap:4px;font-size:19px}body.pg-landing .logo-mark{width:34px;height:34px;margin-top:-3px}body.pg-landing .nav-login{padding:11px 16px;font-size:14px}}

/* ==================== register.css ==================== */
@keyframes rise-register{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
body.pg-register .wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
body.pg-register header{padding:22px 0}
body.pg-register .nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
body.pg-register .back{font-size:15px;color:var(--ink-soft);transition:.2s}
body.pg-register .back:hover{color:var(--green)}
body.pg-register main{display:grid;grid-template-columns:1fr 440px;gap:70px;align-items:center;min-height:calc(100svh - 84px);padding:42px 0 76px}
body.pg-register .copy{max-width:620px;animation:rise-register .55s ease both}
body.pg-register .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:22px}
body.pg-register .eyebrow::before{content:"";width:34px;height:1.5px;background:var(--green)}
body.pg-register h1{font-family:'Manrope',sans-serif;font-size:clamp(36px,5vw,62px);line-height:1.08;letter-spacing:-.01em;margin-bottom:24px}
body.pg-register .lead{font-size:19px;color:var(--ink-soft);max-width:540px;margin-bottom:34px}
body.pg-register .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:620px}
body.pg-register .proof div{border-top:1px solid var(--line);padding-top:16px}
body.pg-register .proof b{display:block;font-family:'Manrope',sans-serif;font-size:24px;margin-bottom:4px}
body.pg-register .proof span{font-size:14px;color:var(--ink-soft)}
body.pg-register .panel{background:var(--surface);border:1px solid rgba(var(--ink-rgb),.08);border-radius:22px;padding:30px;box-shadow:0 24px 70px rgba(var(--shadow-rgb),.13);animation:rise-register .65s ease both .08s}
body.pg-register .panel h2{font-family:'Manrope',sans-serif;font-size:24px;line-height:1.2;margin-bottom:8px}
body.pg-register .panel p{color:var(--ink-soft);font-size:15px;margin-bottom:22px}
body.pg-register .consent{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:400;line-height:1.45;color:var(--ink-soft)}
body.pg-register .consent input{width:16px;min-width:16px;margin:3px 0 0;padding:0}
body.pg-register .consent a{color:var(--green-dark)}
body.pg-register button{margin-top:4px}
body.pg-register button:hover{transform:translateY(-1px)}
body.pg-register button:disabled{transform:none}
body.pg-register .note{font-size:13px;color:var(--ink-soft);margin-top:14px}
@media(max-width:860px){body.pg-register main{grid-template-columns:1fr;gap:36px;align-items:start;padding-top:28px}body.pg-register .proof{grid-template-columns:1fr}body.pg-register .panel{padding:24px}}

/* ==================== auth-shared.css ==================== */
body.pg-register, body.pg-auth, body.pg-verify {--cream:#f5f6f7; --cream-2:#e6e9ea; --ink:#1b2226; --ink-soft:#59646a;
  --green:#0f9438; --green-dark:#0a7029; --line:rgba(27,34,38,.1);
  --surface:#fff;
  --danger:#9b1c1c; --danger-soft:#fde8e8;
  --ink-rgb:27,34,38; --shadow-rgb:27,34,38;}
body.pg-register *, body.pg-auth *, body.pg-verify *{box-sizing:border-box;margin:0;padding:0}
body.pg-register, body.pg-auth, body.pg-verify{min-height:100svh;font-family:'Inter',sans-serif;background:var(--cream);color:var(--ink);line-height:1.55}
body.pg-register a, body.pg-auth a, body.pg-verify a{color:inherit;text-decoration:none}
body.pg-register .logo, body.pg-auth .logo, body.pg-verify .logo{display:flex;align-items:center;gap:4px;font-family:'Manrope',sans-serif;font-size:22px;font-weight:700}
body.pg-register .logo-mark, body.pg-auth .logo-mark, body.pg-verify .logo-mark{width:38px;height:38px;display:block;object-fit:contain;margin-top:-4px}
body.pg-register .logo-ai, body.pg-auth .logo-ai, body.pg-verify .logo-ai{margin-left:4px;color:var(--green)}
body.pg-register form, body.pg-auth form, body.pg-verify form{display:grid;gap:15px}
body.pg-register label, body.pg-auth label, body.pg-verify label{display:grid;gap:7px;font-size:14px;font-weight:600}
/* select/textarea are included deliberately: the niche dropdown and the
   free-text business description were added to register.html without
   extending this rule, so they rendered with browser defaults next to the
   styled inputs. min-width:0 is what stops the layout blowing out — a
   <select>'s intrinsic minimum width is that of its longest option
   ("Аренда и прокат оборудования"), which propagated up through the grid
   track and forced ~562px of content into a 390px viewport. */
body.pg-register input, body.pg-auth input, body.pg-verify input,
body.pg-register select, body.pg-auth select, body.pg-verify select,
body.pg-register textarea, body.pg-auth textarea, body.pg-verify textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 15px;font:inherit;color:var(--ink);outline:none;transition:.2s}
body.pg-register textarea, body.pg-auth textarea, body.pg-verify textarea{resize:vertical;min-height:96px}
body.pg-register select, body.pg-auth select, body.pg-verify select{appearance:none;cursor:pointer;
  /* Inline chevron: a data: URI keeps this within the page's own CSP
     (img-src 'self' data:) and adds no request. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2359646a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
body.pg-register input:focus, body.pg-auth input:focus, body.pg-verify input:focus,
body.pg-register select:focus, body.pg-auth select:focus, body.pg-verify select:focus,
body.pg-register textarea:focus, body.pg-auth textarea:focus, body.pg-verify textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(15,148,56,.12)}
body.pg-register button, body.pg-auth button, body.pg-verify button{border:0;border-radius:12px;background:var(--green);color:var(--cream);padding:15px 18px;font:inherit;font-weight:700;cursor:pointer;transition:.22s}
body.pg-register button:hover, body.pg-auth button:hover, body.pg-verify button:hover{background:var(--green-dark)}
body.pg-register button:disabled, body.pg-auth button:disabled, body.pg-verify button:disabled{opacity:.65;cursor:wait}
body.pg-register .status, body.pg-auth .status, body.pg-verify .status{display:none;border-radius:12px;padding:13px 14px;font-size:14px;margin-top:16px}
body.pg-register .status.ok, body.pg-auth .status.ok, body.pg-verify .status.ok{display:block;background:rgba(15,148,56,.1);color:var(--green-dark)}
body.pg-register .status.err, body.pg-auth .status.err, body.pg-verify .status.err{display:block;background:var(--danger-soft);color:var(--danger)}
body.pg-register .btn, body.pg-auth .btn, body.pg-verify .btn{display:inline-block;background:var(--green);color:var(--cream);padding:13px 24px;border-radius:12px;font-weight:700;font-size:15px;transition:.22s}
body.pg-register .btn:hover, body.pg-auth .btn:hover, body.pg-verify .btn:hover{background:var(--green-dark)}

/* ==================== auth-panel.css ==================== */
body.pg-auth{display:grid;place-items:center;padding:24px}
body.pg-auth .panel{width:min(460px,100%);background:var(--surface);border:1px solid rgba(var(--ink-rgb),.08);border-radius:22px;padding:32px;box-shadow:0 24px 70px rgba(var(--shadow-rgb),.13)}
body.pg-auth .logo{margin-bottom:24px}
body.pg-auth h1{font-family:'Manrope',sans-serif;font-size:26px;line-height:1.2;margin-bottom:10px}
body.pg-auth p{color:var(--ink-soft);font-size:15px;margin-bottom:20px}
body.pg-auth .btn-link{display:none;margin-top:14px;background:var(--green);color:var(--cream);padding:13px 24px;border-radius:12px;font-weight:700;font-size:15px;text-align:center}
body.pg-auth .back{display:block;margin-top:16px;font-size:14px;color:var(--ink-soft)}
body.pg-auth .back:hover{color:var(--green)}

/* ==================== verify-email.css ==================== */
body.pg-verify{display:grid;place-items:center;padding:24px}
body.pg-verify .panel{width:min(460px,100%);background:var(--surface);border:1px solid rgba(var(--ink-rgb),.08);border-radius:22px;padding:32px;box-shadow:0 24px 70px rgba(var(--shadow-rgb),.13)}
body.pg-verify .logo{margin-bottom:24px}
body.pg-verify h1{font-family:'Manrope',sans-serif;font-size:26px;line-height:1.2;margin-bottom:10px}
body.pg-verify p{color:var(--ink-soft);font-size:15px;margin-bottom:18px}
body.pg-verify .status{margin-top:0;margin-bottom:18px}
body.pg-verify .back{display:block;margin-top:16px;font-size:14px;color:var(--ink-soft)}
body.pg-verify .back:hover{color:var(--green)}

/* ==================== style.css ==================== */
body.pg-admin, body.pg-platform {--bg:#f5f6f7;
  --surface:#ffffff;
  /* Поверхность на полтона в сторону: наведение, полоса ответа, пузырь
     сообщения. Раньше это были четыре почти одинаковых литерала
     (#fafafa, #fbfcfb, #f8faf9), различие между которыми не имело смысла. */
  --surface-2:#fbfcfb;
  --panel:#eef2ef;
  --ink:#1b2226;
  --muted:#59646a;
  /* Тише, чем --muted: подписи колонок, мета строки, надписи капителью. */
  --faint:#718078;
  --line:#d9dfdc;
  /* Та же линия под курсором — заметнее обычной. */
  --line-strong:#aab5af;
  --accent:#0f9438;
  --accent-dark:#0a7029;
  --accent-soft:#e5f4ea;
  --accent-line:#c8e6d0;
  /* Текст поверх заливки акцентом. На светлой теме белый, на тёмной —
     почти чёрный: зелёный там осветлён, и белое по нему не читается. */
  --on-accent:#fff;
  --danger:#a33b3b;
  --danger-soft:#fdeaea;
  --warn:#9a6700;
  --warn-soft:#fff3d8;
  --warn-line:#f0dcae;
  /* Не тревога и не успех: черновик ИИ, пометка «бета», системная реплика. */
  --info:#31539b;
  --info-soft:#e8efff;
  --ink-rgb:27,34,38; --shadow-rgb:27,34,38;
  --radius:8px;}
body.pg-admin *, body.pg-platform *{box-sizing:border-box}
body.pg-admin, body.pg-platform{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.45}
body.pg-admin button, body.pg-platform button, body.pg-admin input, body.pg-platform input, body.pg-admin select, body.pg-platform select, body.pg-admin textarea, body.pg-platform textarea{font:inherit}
body.pg-admin button, body.pg-platform button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius);padding:9px 12px;cursor:pointer;transition:.16s}
body.pg-admin button:hover, body.pg-platform button:hover{border-color:var(--line-strong);background:var(--surface-2)}
body.pg-admin button.primary, body.pg-platform button.primary{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
body.pg-admin button.primary:hover, body.pg-platform button.primary:hover{background:var(--accent-dark)}
body.pg-admin button.danger, body.pg-platform button.danger{color:var(--danger)}
body.pg-admin button:disabled, body.pg-platform button:disabled{opacity:.55;cursor:wait}
body.pg-admin input, body.pg-platform input, body.pg-admin select, body.pg-platform select, body.pg-admin textarea, body.pg-platform textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);padding:10px 11px;outline:none}
body.pg-admin input:focus, body.pg-platform input:focus, body.pg-admin select:focus, body.pg-platform select:focus, body.pg-admin textarea:focus, body.pg-platform textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,148,56,.12)}
body.pg-admin label, body.pg-platform label{display:grid;gap:6px;font-size:13px;font-weight:600}
body.pg-admin .login, body.pg-platform .login{min-height:100svh;display:grid;place-items:center;padding:24px}
body.pg-admin .login-box, body.pg-platform .login-box{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
body.pg-admin .brand, body.pg-platform .brand{display:flex;align-items:center;gap:4px;font-family:Manrope,Inter,sans-serif;font-weight:700;font-size:20px;margin-bottom:22px}
body.pg-admin .brand .ai, body.pg-platform .brand .ai{margin-left:4px;color:var(--accent)}
body.pg-admin .rail .brand .ai, body.pg-platform .rail .brand .ai{color:#6fbd8e}
body.pg-admin .mark, body.pg-platform .mark{width:34px;height:34px;display:block;object-fit:contain;margin-top:-3px}
body.pg-admin h1, body.pg-platform h1, body.pg-admin h2, body.pg-platform h2, body.pg-admin h3, body.pg-platform h3{font-family:Manrope,Inter,sans-serif;letter-spacing:-.015em}
body.pg-admin .login h1, body.pg-platform .login h1{font-size:24px;line-height:1.2;margin:0 0 8px}
body.pg-admin .login p, body.pg-platform .login p{margin:0 0 22px;color:var(--muted)}
body.pg-admin .login form, body.pg-platform .login form{display:grid;gap:13px}
body.pg-admin .status-line, body.pg-platform .status-line{min-height:20px;margin-top:14px;color:var(--danger)}
body.pg-admin .login-links, body.pg-platform .login-links{margin:14px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
body.pg-admin .login-links a, body.pg-platform .login-links a{color:var(--accent-dark)}
body.pg-admin .login-links-separator, body.pg-platform .login-links-separator{margin:0 6px}
body.pg-admin .link-button, body.pg-platform .link-button{appearance:none;border:0;background:transparent;padding:0;color:var(--accent-dark);font:inherit;text-decoration:underline;cursor:pointer}
body.pg-admin .rail, body.pg-platform .rail{background:#1b2226;color:white;padding:18px 14px;display:flex;flex-direction:column;gap:16px}
body.pg-admin .rail .brand, body.pg-platform .rail .brand{font-size:18px;margin:0}
body.pg-admin .org, body.pg-platform .org{color:#adbbb5;font-size:13px;word-break:break-word}
/* Admin parks the buttons right after the menu and status filters (below the
   divider), so a short sidebar no longer hides them at the bottom of the
   viewport; the platform cabinet keeps them pinned to the rail's bottom edge. */
body.pg-admin .rail-foot{display:grid;gap:8px}
body.pg-platform .rail-foot{margin-top:auto;display:grid;gap:8px}
body.pg-admin .rail-divider{border:0;border-top:1px solid rgba(255,255,255,.16);margin:0}
/* Divider + action buttons form one block below the status filters; the gap
   keeps the first button's border clear of the divider line. */
body.pg-admin .rail-actions{display:grid;gap:16px}
body.pg-admin .rail-foot button, body.pg-platform .rail-foot button{background:transparent;color:#dfe7e3;border-color:rgba(255,255,255,.22)}
body.pg-admin .rail-foot button:hover, body.pg-platform .rail-foot button:hover{background:rgba(255,255,255,.1);color:white}
body.pg-admin .topbar, body.pg-platform .topbar{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
body.pg-admin .topbar h1, body.pg-platform .topbar h1{font-size:20px;margin:0}
body.pg-admin .badge, body.pg-platform .badge{display:inline-flex;align-items:center;min-height:22px;border-radius:999px;padding:2px 8px;background:var(--panel);color:var(--muted);font-size:12px;white-space:nowrap}
body.pg-admin .empty, body.pg-platform .empty{color:var(--muted);padding:28px 18px;text-align:center}
body.pg-admin .notice, body.pg-platform .notice{color:var(--muted)}
body.pg-admin .card, body.pg-platform .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
body.pg-admin .card h2, body.pg-platform .card h2{font-size:17px;margin:0 0 12px}
body.pg-admin .card .sub, body.pg-platform .card .sub{color:var(--muted);font-size:13px;margin:-8px 0 14px}
body.pg-admin .card form, body.pg-platform .card form{display:grid;gap:12px}
body.pg-admin .table, body.pg-platform .table{width:100%;border-collapse:collapse;font-size:13px}
body.pg-admin .table td, body.pg-platform .table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
body.pg-admin .table tr:last-child td, body.pg-platform .table tr:last-child td{border-bottom:0}
body.pg-admin .inline-actions, body.pg-platform .inline-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* `.card form` above is one specificity point heavier than `.inline-actions`,
   so a <form class="inline-actions"> inside a card silently stayed a grid and
   stacked every field and its button full width — the MAX/VK/WhatsApp connect
   forms, whose `flex:1` / `min-width` / `align-self:end` were all inert. This
   restores the row layout the markup asks for. */
body.pg-admin .card form.inline-actions, body.pg-platform .card form.inline-actions{display:flex;align-items:flex-start}
/* Fields share the row and wrap together at a common width. Kept here rather
   than as inline style="flex:1;min-width:..." on each label, because an inline
   style also outranks the one-field-per-row rule in the phone media query. */
body.pg-admin .card form.inline-actions>label, body.pg-platform .card form.inline-actions>label{flex:1 1 200px}
body.pg-admin .alert, body.pg-platform .alert{border-radius:var(--radius);padding:12px 13px;font-size:14px}
body.pg-admin .alert.err, body.pg-platform .alert.err{background:var(--danger-soft);color:var(--danger)}
body.pg-admin .alert.ok, body.pg-platform .alert.ok{background:var(--accent-soft);color:var(--accent-dark)}
body.pg-admin .page-status, body.pg-platform .page-status{min-height:20px;color:var(--muted);font-size:13px}

/* ==================== admin.css ==================== */
body.pg-admin textarea{min-height:88px;resize:vertical}
body.pg-admin .shell{display:none;min-height:100svh;grid-template-columns:230px minmax(360px,1fr) minmax(380px,520px)}
body.pg-admin .mobile-shellbar, body.pg-admin .drawer-backdrop{display:none}
body.pg-admin .nav-main, body.pg-admin .filters{display:grid;gap:4px}
/* Status filters pack tighter than the main menu (the 5px vertical padding
   override lives after the shared rule below to win the cascade; the mobile
   44px min-height rule keeps touch targets). */
body.pg-admin .filters{gap:2px}
body.pg-admin .nav-title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7a8780;margin:4px 10px 2px}
body.pg-admin .nav-item, body.pg-admin .filter{display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;color:#dfe7e3;text-align:left;padding:9px 10px;border-radius:var(--radius)}
body.pg-admin .filter{padding:5px 10px}
/* Menu items carry a leading icon, so their children flow from the left;
   filters keep space-between for their trailing counts. */
body.pg-admin .nav-item{justify-content:flex-start;gap:10px}
body.pg-admin .nav-icon{width:17px;height:17px;flex:none;opacity:.85}
body.pg-admin .nav-item:hover, body.pg-admin .filter:hover, body.pg-admin .nav-item.active, body.pg-admin .filter.active{background:rgba(255,255,255,.1);color:white}
body.pg-admin .count{color:#adbbb5;font-size:12px}
body.pg-admin .workspace{border-right:1px solid var(--line);min-width:0}
body.pg-admin .topbar-actions{display:flex;align-items:center;gap:10px}
body.pg-admin .list{padding:14px;display:grid;gap:8px;align-content:start}
body.pg-admin .row{display:grid;grid-template-columns:1fr auto;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:12px;text-align:left}
body.pg-admin .row:hover, body.pg-admin .row.active{border-color:var(--line-strong);background:var(--surface-2)}
body.pg-admin .row-main{min-width:0}
body.pg-admin .row-title{display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap}
body.pg-admin .row-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.pg-admin .badge.needs_manager, body.pg-admin .badge.in_progress, body.pg-admin .badge.processing, body.pg-admin .badge.pending, body.pg-admin .badge.draft, body.pg-admin .badge.sending{background:var(--warn-soft);color:var(--warn)}
body.pg-admin .badge.ai_draft_pending{background:var(--info-soft);color:var(--info)}
body.pg-admin .badge.open, body.pg-admin .badge.new, body.pg-admin .badge.ready, body.pg-admin .badge.done, body.pg-admin .badge.active, body.pg-admin .badge.trial, body.pg-admin .badge.completed{background:var(--accent-soft);color:var(--accent-dark)}
body.pg-admin .badge.spam, body.pg-admin .badge.rejected, body.pg-admin .badge.failed, body.pg-admin .badge.suspended, body.pg-admin .badge.cancelled, body.pg-admin .badge.deactivated{background:var(--danger-soft);color:var(--danger)}
/* A qualifier, not an error: an unverified connector is usable, it just has
   not met a real provider account yet. Reads as information, not alarm. */
body.pg-admin .badge.beta{background:var(--info-soft);color:var(--info);margin-left:8px;vertical-align:middle;letter-spacing:.02em}
body.pg-admin .beta-note{margin:-8px 0 14px}
/* display:block is load bearing: .snippet is a <span>, and overflow/text-overflow
   do not apply to inline boxes — the ellipsis silently never happened, and a
   long last message pushed the whole page wider than the viewport on mobile.
   Same reason .kv b sets it. */
body.pg-admin .snippet{display:block;margin-top:7px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.pg-admin .meta{margin-top:8px;display:flex;gap:8px;color:var(--faint);font-size:12px;flex-wrap:wrap}
body.pg-admin .detail{background:var(--surface);min-width:0;display:grid;grid-template-rows:auto 1fr auto}
body.pg-admin .detail-head{padding:18px 20px;border-bottom:1px solid var(--line);display:grid;gap:12px}
body.pg-admin .detail-title{display:flex;justify-content:space-between;gap:12px}
body.pg-admin .detail-title h2{font-size:18px;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.pg-admin .contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.pg-admin .kv{border-top:1px solid var(--line);padding-top:8px;color:var(--muted);font-size:12px;min-width:0}
body.pg-admin .kv b{display:block;color:var(--ink);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.pg-admin .detail-body{overflow:auto;padding:18px 20px;display:grid;align-content:start;gap:18px}
body.pg-admin .section h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:0 0 8px}
body.pg-admin .summary{background:var(--panel);border-radius:var(--radius);padding:11px 12px;color:var(--ink)}
body.pg-admin .chips{display:flex;flex-wrap:wrap;gap:7px}
body.pg-admin .chip{background:var(--panel);border-radius:999px;padding:6px 9px;color:var(--ink);font-size:12px}
body.pg-admin .messages{display:grid;gap:10px}
body.pg-admin .msg{max-width:86%;border-radius:var(--radius);padding:10px 11px;border:1px solid var(--line);background:var(--surface-2)}
body.pg-admin .msg.customer{justify-self:start;background:var(--panel)}
body.pg-admin .msg.ai, body.pg-admin .msg.manager{justify-self:end;background:var(--accent-soft);border-color:var(--accent-line)}
body.pg-admin .msg.system{justify-self:center;background:var(--info-soft)}
body.pg-admin .msg.broadcast{justify-self:end;background:var(--warn-soft);border-color:var(--warn-line)}
body.pg-admin .msg-meta{margin-top:6px;color:var(--faint);font-size:11px}
body.pg-admin .failed{color:var(--danger)}
body.pg-admin .composer{border-top:1px solid var(--line);padding:14px 20px;display:grid;gap:10px;background:var(--surface-2)}
body.pg-admin .composer-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
body.pg-admin .draft{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--radius);padding:12px;display:grid;gap:10px}
body.pg-admin .draft textarea{background:var(--surface)}
body.pg-admin .draft-actions{display:flex;gap:8px;flex-wrap:wrap}
body.pg-admin .draft-error{color:var(--danger);font-size:12px}
body.pg-admin .page{grid-column:2 / -1;min-width:0;overflow:auto;padding:0 0 40px}
body.pg-admin .page-inner{padding:18px 22px;display:grid;gap:16px;align-content:start;max-width:1080px}
body.pg-admin .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body.pg-admin .stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
body.pg-admin .stat{border:1px solid var(--line);border-radius:var(--radius);padding:12px}
body.pg-admin .stat b{display:block;font-family:Manrope,Inter,sans-serif;font-size:22px;margin-bottom:2px}
body.pg-admin .stat span{color:var(--muted);font-size:12px}
body.pg-admin .table th{text-align:left;color:var(--faint);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--line)}
body.pg-admin .alert.warn{background:var(--warn-soft);color:var(--warn)}
body.pg-admin .code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--panel);border-radius:var(--radius);padding:10px 12px;word-break:break-all}
body.pg-admin .usage-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
body.pg-admin .usage-row:last-child{border-bottom:0}
body.pg-admin .usage-row b{font-weight:600}
/* The shell drops to rail + one content column here. `.detail` spans both so a
   conversation opens as a full-width row under the list — but `.page` must NOT:
   spanning the rail's column forces it onto its own grid row, which pushed every
   non-conversation view below the rail and left a tall empty gap beside it at
   tablet/small-laptop widths. It keeps the base `grid-column:2 / -1`, and only
   goes full width below 720px, where the shell is a single column. */
@media(max-width:1060px){body.pg-admin .shell{grid-template-columns:200px 1fr}body.pg-admin .detail{grid-column:1 / -1;border-top:1px solid var(--line);min-height:55svh}body.pg-admin .grid-2{grid-template-columns:1fr}}
@media(max-width:720px){
body.pg-admin{overflow-x:hidden}
body.pg-admin.mobile-nav-open{overflow:hidden}
body.pg-admin .shell{grid-template-columns:minmax(0,1fr);width:100%;max-width:100vw}
body.pg-admin .mobile-shellbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:10px 14px;background:rgba(27,34,38,.97);color:#fff;border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
body.pg-admin .mobile-shellbar .brand{font-size:18px;margin:0}
body.pg-admin .mobile-shellbar .brand .ai{color:#6fbd8e}
body.pg-admin .mobile-nav-toggle{position:relative;width:44px;height:44px;flex:0 0 44px;padding:0;border-color:rgba(255,255,255,.24);background:transparent}
body.pg-admin .mobile-nav-toggle:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.1)}
body.pg-admin .mobile-nav-toggle span{position:absolute;left:11px;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .18s ease,opacity .18s ease,top .18s ease}
body.pg-admin .mobile-nav-toggle span:nth-child(1){top:13px}
body.pg-admin .mobile-nav-toggle span:nth-child(2){top:20px}
body.pg-admin .mobile-nav-toggle span:nth-child(3){top:27px}
body.pg-admin .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
body.pg-admin .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
body.pg-admin .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}
body.pg-admin .drawer-backdrop{position:fixed;z-index:30;inset:64px 0 0;display:block;width:100%;height:auto;padding:0;border:0;border-radius:0;background:rgba(8,12,10,.52);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
body.pg-admin .drawer-backdrop:hover{background:rgba(8,12,10,.52)}
body.pg-admin .rail{position:fixed;z-index:40;top:64px;bottom:0;left:0;width:min(320px,calc(100vw - 48px));max-width:100%;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-102%);visibility:hidden;box-shadow:18px 0 48px rgba(0,0,0,.24);transition:transform .22s ease,visibility 0s linear .22s}
body.pg-admin .rail>.brand{display:none}
body.pg-admin .nav-item, body.pg-admin .filter, body.pg-admin .rail-foot button{min-height:44px}
body.pg-admin.mobile-nav-open .drawer-backdrop{opacity:1;visibility:visible;pointer-events:auto}
body.pg-admin.mobile-nav-open .rail{transform:translateX(0);visibility:visible;transition-delay:0s,0s}
body.pg-admin .workspace, body.pg-admin .detail, body.pg-admin .page{min-width:0;max-width:100vw}
body.pg-admin .page{grid-column:1 / -1}
body.pg-admin .page-inner{min-width:0;padding-inline:14px}
/* Grid and form children default to min-width:auto, so a table, a file input,
   or a long select option can make the entire page-inner track wider than the
   phone. Keep every working surface shrinkable; content below is allowed to
   wrap instead of being clipped by the shell. */
body.pg-admin .page-inner>*, body.pg-admin .grid-2>*, body.pg-admin .card,
body.pg-admin .card form, body.pg-admin .card label, body.pg-admin .card label>span,
body.pg-admin .usage-row>*, body.pg-admin .table-wrap{min-width:0;max-width:100%}
body.pg-admin .card input, body.pg-admin .card select, body.pg-admin .card textarea,
body.pg-admin .card button{min-width:0;max-width:100%}
body.pg-admin .card, body.pg-admin .card p, body.pg-admin .card td,
body.pg-admin .usage-row b{overflow-wrap:anywhere}
/* Dense desktop tables become calm stacked records on a phone. This keeps
   values and row actions in the reading flow instead of hiding the right-hand
   columns behind page-level horizontal overflow. */
body.pg-admin .card .table, body.pg-admin .card .table tbody,
body.pg-admin .card .table tr, body.pg-admin .card .table td{display:block;width:100%;max-width:100%}
/* Keep the real headers available to assistive technology while moving them
   out of the visual flow; each cell gets its corresponding heading as a
   visible label from the table enhancer in admin/table-labels.js. */
body.pg-admin .card .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body.pg-admin .card .table tbody{display:grid;gap:10px}
body.pg-admin .card .table tr{padding:8px 0;border-bottom:1px solid var(--line)}
body.pg-admin .card .table tr:last-child{border-bottom:0}
body.pg-admin .card .table td{padding:4px 0;border:0;white-space:normal!important}
body.pg-admin .card .table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;color:var(--faint);font-size:10px;font-weight:700;letter-spacing:.06em;line-height:1.35;text-transform:uppercase}
body.pg-admin .card .table td.inline-actions{display:flex;width:auto}
body.pg-admin .card .table td.inline-actions[data-label]::before{flex:0 0 100%}
body.pg-admin .usage-row{grid-template-columns:minmax(0,1fr);gap:2px}
body.pg-admin #invite-form .inline-actions{grid-template-columns:minmax(0,1fr)!important}
body.pg-admin #invite-form button{width:100%}
body.pg-admin .topbar{align-items:flex-start;flex-direction:column;padding:16px}
body.pg-admin .topbar-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
body.pg-admin .contact{grid-template-columns:1fr}
body.pg-admin .composer-row{grid-template-columns:1fr}
/* One field per row on a phone. Without this the last field of a connect form
   is narrow enough to share a line with the submit button (VK's "Secret key"
   did), so one input ends up half the width of the ones above it. */
body.pg-admin .card form.inline-actions>label{flex-basis:100%}
}

@media(max-width:540px){
body.pg-admin .login p.login-links, body.pg-platform .login p.login-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:14px 0 0}
body.pg-admin .login-links-separator, body.pg-platform .login-links-separator{display:none}
body.pg-admin .login-links a, body.pg-platform .login-links a,
body.pg-admin .link-button, body.pg-platform .link-button{min-height:44px;margin-block:0;text-align:left}
}

@media(max-width:380px){body.pg-admin .login-box, body.pg-platform .login-box{padding:22px 20px}}

@media(prefers-reduced-motion:reduce){
body.pg-admin .mobile-nav-toggle span, body.pg-admin .drawer-backdrop, body.pg-admin .rail{transition:none}
}

/* Support view (PRD 6.12): ticket list rows and the chat-like thread. */
body.pg-admin .support-ticket-row{cursor:pointer}
body.pg-admin .support-ticket-row:hover td{background:var(--accent-soft)}
body.pg-admin #support-thread{display:grid;gap:10px}
body.pg-admin .support-msg{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--surface)}
body.pg-admin .support-msg.manager{background:var(--accent-soft);border-color:transparent}
body.pg-admin .support-msg.ai{border-left:3px solid var(--accent)}
body.pg-admin .support-msg.admin{border-left:3px solid var(--muted)}
body.pg-admin .support-meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:4px}
body.pg-admin .support-text{white-space:pre-wrap;word-break:break-word}

/* ==================== platform.css ==================== */
body.pg-platform textarea{min-height:70px;resize:vertical}
body.pg-platform .shell{display:none;min-height:100svh;grid-template-columns:230px 1fr}
body.pg-platform .mobile-shellbar, body.pg-platform .drawer-backdrop{display:none}
body.pg-platform .nav-main{display:grid;gap:4px}
body.pg-platform .nav-item{display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;color:#dfe7e3;text-align:left;padding:9px 10px;border-radius:var(--radius)}
body.pg-platform .nav-item:hover, body.pg-platform .nav-item.active{background:rgba(255,255,255,.1);color:white}
body.pg-platform .page{min-width:0;overflow:auto;padding:0 0 40px}
body.pg-platform .page-inner{padding:18px 22px;display:grid;gap:16px;align-content:start;max-width:1240px}
body.pg-platform .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.pg-platform .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body.pg-platform .table-wrap{overflow-x:auto}
body.pg-platform .table th{text-align:left;color:var(--faint);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
body.pg-platform .table tr.clickable{cursor:pointer}
body.pg-platform .table tr.clickable:hover td{background:var(--surface-2)}
body.pg-platform .table tr.selected td{background:var(--accent-soft)}
body.pg-platform .badge.active, body.pg-platform .badge.trial{background:var(--accent-soft);color:var(--accent-dark)}
body.pg-platform .badge.past_due, body.pg-platform .badge.pending_email_verification{background:var(--warn-soft);color:var(--warn)}
body.pg-platform .badge.suspended, body.pg-platform .badge.cancelled, body.pg-platform .badge.exceeded{background:var(--danger-soft);color:var(--danger)}
body.pg-platform .mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
body.pg-platform .filters-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
@media(max-width:900px){
body.pg-platform{overflow-x:hidden}
body.pg-platform.mobile-nav-open{overflow:hidden}
body.pg-platform .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;max-width:100vw}
body.pg-platform .mobile-shellbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:10px 14px;background:rgba(27,34,38,.97);color:#fff;border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
body.pg-platform .mobile-shellbar .brand{font-size:18px;margin:0}
body.pg-platform .mobile-shellbar .brand .ai{color:#6fbd8e}
body.pg-platform .mobile-nav-toggle{position:relative;width:44px;height:44px;flex:0 0 44px;padding:0;border-color:rgba(255,255,255,.24);background:transparent}
body.pg-platform .mobile-nav-toggle:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.1)}
body.pg-platform .mobile-nav-toggle span{position:absolute;left:11px;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .18s ease,opacity .18s ease,top .18s ease}
body.pg-platform .mobile-nav-toggle span:nth-child(1){top:13px}
body.pg-platform .mobile-nav-toggle span:nth-child(2){top:20px}
body.pg-platform .mobile-nav-toggle span:nth-child(3){top:27px}
body.pg-platform .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
body.pg-platform .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
body.pg-platform .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}
body.pg-platform .drawer-backdrop{position:fixed;z-index:30;inset:64px 0 0;display:block;width:100%;height:auto;padding:0;border:0;border-radius:0;background:rgba(8,12,10,.52);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
body.pg-platform .drawer-backdrop:hover{background:rgba(8,12,10,.52)}
body.pg-platform .rail{position:fixed;z-index:40;top:64px;bottom:0;left:0;width:min(320px,calc(100vw - 48px));max-width:100%;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-102%);visibility:hidden;box-shadow:18px 0 48px rgba(0,0,0,.24);transition:transform .22s ease,visibility 0s linear .22s}
body.pg-platform .rail>.brand{display:none}
body.pg-platform .nav-item, body.pg-platform .rail-foot button{min-height:44px}
body.pg-platform.mobile-nav-open .drawer-backdrop{opacity:1;visibility:visible;pointer-events:auto}
body.pg-platform.mobile-nav-open .rail{transform:translateX(0);visibility:visible;transition-delay:0s,0s}
body.pg-platform .page{min-width:0;max-width:100vw}
body.pg-platform .page-inner{min-width:0;padding-inline:14px}
body.pg-platform .page-inner>*, body.pg-platform .grid-2>*, body.pg-platform .grid-3>*,
body.pg-platform .card, body.pg-platform .card form, body.pg-platform .card label,
body.pg-platform .table-wrap{min-width:0;max-width:100%}
body.pg-platform .grid-2, body.pg-platform .grid-3{grid-template-columns:1fr}
}

/* Support inbox (PRD 6.12) in the platform console. */
body.pg-platform .support-ticket-row{cursor:pointer}
body.pg-platform .support-ticket-row:hover td{background:var(--accent-soft)}
body.pg-platform .platform-support-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
body.pg-platform .platform-support-head h2{margin:0}
body.pg-platform #support-thread{display:grid;gap:10px}
body.pg-platform .support-msg{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--surface)}
body.pg-platform .support-msg.manager{background:var(--accent-soft);border-color:transparent}
body.pg-platform .support-msg.ai{border-left:3px solid var(--accent)}
body.pg-platform .support-msg.admin{border-left:3px solid var(--muted)}
body.pg-platform .support-meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:4px}
body.pg-platform .support-text{white-space:pre-wrap;word-break:break-word}

@media(prefers-reduced-motion:reduce){
body.pg-platform .mobile-nav-toggle span, body.pg-platform .drawer-backdrop, body.pg-platform .rail{transition:none}
}

/* ==================== legal.css ==================== */
body.pg-legal {--ink:#1b2226;--soft:#59646a;--green:#0f9438;--green-dark:#0a7029;--line:rgba(27,34,38,.12);--bg:#f5f6f7;
  /* Лист документа и панель выпадающего меню. */
  --surface:#fff;
  /* Вложенный в лист блок: форма запроса на права субъекта данных. */
  --panel:#f8faf8;
  --green-soft:#eef8f0;
  --on-accent:#fff;
  --danger:#b42318;
  --ink-rgb:27,34,38; --shadow-rgb:27,34,38}
body.pg-legal *{box-sizing:border-box}
body.pg-legal{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,system-ui,sans-serif}
body.pg-legal a{color:var(--green-dark);text-underline-offset:3px}
body.pg-legal .wrap{width:min(860px,calc(100% - 40px));margin:auto}
body.pg-legal .nav{display:flex;justify-content:space-between;align-items:center;padding:24px 0}
body.pg-legal .brand{display:flex;align-items:center;gap:4px;font:800 21px Manrope,Inter,sans-serif;color:var(--ink);text-decoration:none}
body.pg-legal .brand span{color:var(--green)}
body.pg-legal .brand .mark{width:28px;height:28px;display:block;object-fit:contain;margin-top:-3px}
/* Вертикальные отступы здесь не работают и не работали: main размечен как
   .wrap, а `body.pg-legal .wrap{margin:auto}` весит на один класс больше и
   обнуляет их. Значения оставлены как есть — правка не относится к задаче,
   а её исправление добавило бы 28px пустого места над полосой подвала,
   то есть ровно то, что просили убрать. */
body.pg-legal main{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,5vw,56px);margin:18px auto 28px;box-shadow:0 18px 48px rgba(var(--shadow-rgb),.08)}
body.pg-legal h1, body.pg-legal h2{font-family:Manrope,Inter,sans-serif;line-height:1.2}
body.pg-legal h1{font-size:clamp(28px,5vw,42px);margin:0 0 12px}
body.pg-legal h2{font-size:22px;margin:36px 0 10px}
body.pg-legal p, body.pg-legal li{color:var(--soft)}
body.pg-legal ul{padding-inline-start:22px}
body.pg-legal .meta{color:var(--soft);font-size:14px;border-bottom:1px solid var(--line);padding-bottom:22px}
body.pg-legal .notice{background:var(--green-soft);border-inline-start:4px solid var(--green);border-radius:8px;padding:14px 16px;color:var(--ink)}
/* На переведённых документах врезок подряд две: оговорка о том, что силу имеет
   русский оригинал, и собственная врезка документа. Без отступа они сливаются
   в один блок с полосой во всю высоту и читаются как одна мысль. */
body.pg-legal .notice + .notice{margin-top:12px}
body.pg-legal .links{display:flex;flex-wrap:wrap;gap:10px 18px;margin:24px 0 0;font-size:14px}
/* Подвал повторяет лендинговый: копирайт слева, тот же набор ссылок в том же
   порядке справа. Раньше здесь стоял один копирайт, и дойти до соседнего
   документа можно было только через строку .links внутри main — а у статей
   блога её нет вовсе, и подвал был тупиком. */
body.pg-legal footer{color:var(--soft);font-size:13px;padding:0 0 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
body.pg-legal footer a{color:var(--soft);text-decoration:underline}
body.pg-legal footer a:hover{color:var(--green-dark)}
body.pg-legal .legal-form{display:grid;gap:16px;margin-top:18px;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
body.pg-legal .legal-form label{display:grid;gap:6px;color:var(--ink);font-weight:650}
body.pg-legal .legal-form input, body.pg-legal .legal-form select, body.pg-legal .legal-form textarea{width:100%;padding:11px 12px;border:1px solid rgba(var(--ink-rgb),.34);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
body.pg-legal .legal-form textarea{resize:vertical}
body.pg-legal .legal-form button{justify-self:start;border:0;border-radius:8px;padding:11px 18px;background:var(--green);color:var(--on-accent);font:700 15px/1.2 Inter,system-ui,sans-serif;cursor:pointer}
body.pg-legal .legal-form button:hover{background:var(--green-dark)}
body.pg-legal .legal-form button:disabled{opacity:.65;cursor:wait}
body.pg-legal .form-status{min-height:1.5em;margin:0;font-size:14px}
body.pg-legal .form-status.success{color:var(--green-dark)}
body.pg-legal .form-status.error{color:var(--danger)}
body.pg-legal .honeypot{position:absolute!important;left:-9999px!important}
@media(max-width:540px){body.pg-legal .wrap{width:min(100% - 28px,860px)}body.pg-legal .nav{padding:16px 0}body.pg-legal main{border-radius:14px}}

/* Меню на страницах документов и статей блога.

   Раньше шапка здесь состояла из знака и одной ссылки — «На главную» или
   «← Блог». С документа и со статьи посетитель мог уйти ровно в одно место
   и там начинал искать заново, хотя приходят на эти страницы чаще всего из
   поиска, а не с лендинга. Разметка меню — та же, что на лендинге: скрытый
   чекбокс, метка-бургер и панель .nav-links, никакого JS.

   Бургер виден на любой ширине, а не только ниже 900px, как на лендинге.
   Колонка документа — 860px, и восемь пунктов в строку рядом со знаком и
   двумя действиями в неё не помещаются. Расширять колонку ради навигации
   значило бы испортить то единственное, ради чего страница существует, —
   ширину строки, удобную для чтения. */
body.pg-legal .nav{position:relative;gap:5px}
body.pg-legal .nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
body.pg-legal .nav-toggle:focus-visible + .nav-burger{outline:2px solid var(--green);outline-offset:6px}
body.pg-legal .nav-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:34px;height:34px;flex:0 0 auto;cursor:pointer}
body.pg-legal .nav-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
/* margin-inline-start, а не margin-left: на арабской версии строка идёт
   справа налево, и физический отступ прижал бы действия к той же стороне,
   где стоит знак. Логическое свойство в русской вёрстке даёт ровно то же
   самое, что стояло здесь раньше. */
body.pg-legal .nav-actions{display:flex;align-items:center;gap:16px;margin-inline-start:auto}
body.pg-legal .nav-connect{font-size:14px;font-weight:700;color:var(--soft);text-decoration:none}
body.pg-legal .nav-connect:hover{color:var(--green)}
body.pg-legal .nav-login{display:inline-block;background:var(--green);color:var(--on-accent);padding:11px 22px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;transition:.25s}
body.pg-legal .nav-login:hover{background:var(--green-dark);color:var(--on-accent)}
body.pg-legal .nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 30px rgba(var(--shadow-rgb),.12);padding:6px 20px 14px;font-size:15px}
body.pg-legal .nav-links a{color:var(--ink);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line)}
body.pg-legal .nav-links a:last-child{border-bottom:0}
body.pg-legal .nav-links a:hover{color:var(--green)}
body.pg-legal .nav-menu-action{display:none}
body.pg-legal .nav-toggle:checked ~ .nav-links{display:flex}
/* Ниже 900px в шапке остаётся одно действие — «Войти»; «Подключить» уезжает
   в меню. Правило то же, что на лендинге. */
@media(max-width:900px){
  body.pg-legal .nav-connect{display:none}
  body.pg-legal .nav-menu-action{display:block}
}
/* На 320px бургер, знак и кнопка в строку не сходятся: колонка здесь ýже
   лендинговой на 12px. Ужимается ширина, а не высота, — 14px текста при
   вертикальных 11px дают 45px, то есть кнопка остаётся выше порога в 44px.
   Те же числа, что и в блоке 420px на лендинге. */
@media(max-width:420px){body.pg-legal .brand{font-size:19px}body.pg-legal .nav-login{padding:11px 16px;font-size:14px}}

/* ==================== blog.css ==================== */
body.pg-landing .blog-hero{padding:56px 0 8px}
body.pg-landing .blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px}
body.pg-landing .blog-filters button{background:var(--surface);border:1px solid rgba(var(--ink-rgb),.1);padding:8px 16px;border-radius:999px;font:inherit;font-size:14px;line-height:1.2;color:var(--ink-soft);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
body.pg-landing .blog-filters button:hover{border-color:rgba(var(--ink-rgb),.26);color:var(--ink)}
body.pg-landing .blog-filters button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
/* Выбранный фильтр залит акцентом. Акцент лендинга — --copper, а не зелёный:
   --green в этой палитре не определён, и правило с ним молча не сработало бы —
   ровно так уже ломался .nav-login:hover. */
body.pg-landing .blog-filters button[aria-pressed="true"]{background:var(--copper);border-color:var(--copper);color:var(--cream)}
/* Текст только для скринридера: сообщает, сколько статей осталось после
   фильтрации. Видящий человек считывает это по самой сетке. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
body.pg-landing .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
body.pg-landing .blog-card{background:var(--surface);border-radius:20px;border:1px solid rgba(var(--ink-rgb),.06);padding:28px;display:flex;flex-direction:column;gap:12px;transition:.3s}
body.pg-landing .blog-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(var(--shadow-rgb),.1)}
body.pg-landing .blog-tag{align-self:flex-start;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--copper-dark);background:var(--copper-soft);padding:5px 12px;border-radius:999px}
body.pg-landing .blog-card h3{font-size:19px;line-height:1.3}
body.pg-landing .blog-card p{font-size:14.5px;color:var(--ink-soft)}
body.pg-landing .blog-meta{font-size:13px;color:var(--ink-soft);margin-top:auto;display:flex;gap:10px}
@media(max-width:900px){body.pg-landing .blog-grid{grid-template-columns:1fr}}

body.pg-legal .post-tag{display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--green-dark);background:var(--green-soft);padding:5px 12px;border-radius:999px;margin-bottom:14px}
body.pg-legal .post-lead{font-size:18px;color:var(--ink);margin-bottom:4px}
body.pg-legal blockquote{border-left:4px solid var(--green);margin:20px 0;padding:4px 0 4px 18px;color:var(--ink);font-style:italic}
body.pg-legal .post-related{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
body.pg-legal .post-related h2{margin-top:0}
body.pg-legal .post-related ul{list-style:none;padding:0;display:grid;gap:10px}
body.pg-legal .post-related a{font-weight:650}

/* ==================== touch targets ==================== */
/* Standalone navigation links (logo, "Войти", "Вернуться на сайт", legal
   footer links) rendered 17-31px tall, below the ~44px a finger reliably
   hits. Scoped to `pointer:coarse` so mouse layouts are untouched, and
   implemented as padding with matching negative margin: the hit area grows,
   the text stays exactly where it was.

   Links sitting inside a sentence are deliberately left alone — WCAG 2.5.8
   exempts inline targets in a block of text, and padding them would break
   the line rhythm of the legal pages. */
@media (pointer: coarse) {
  /* «Подключить» — текстовая ссылка, и только на широком экране: ниже 900px
     она уезжает в меню, где строка и так выше 44px. «Войти» здесь не нужен —
     он теперь залитая кнопка ростом в 45px на любой ширине, и отрицательный
     margin, который держит текст на месте, вырезал бы у неё десять пикселей
     строки хэдера. */
  @media (min-width: 901px) {
    body.pg-landing .nav-connect,
    body.pg-legal .nav-connect {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      margin-block: -10px;
    }
  }
  /* Бургер документов и статей: коробка 34px, полосы в ней по центру.
     Отрицательный отступ со всех сторон гасит прирост целиком, поэтому
     ни высота шапки, ни расстояние до знака не меняются. */
  body.pg-legal .nav-burger {
    min-width: 44px;
    min-height: 44px;
    margin: -5px;
  }
  body.pg-landing .logo,
  body.pg-register .logo, body.pg-auth .logo, body.pg-verify .logo,
  body.pg-register .back, body.pg-auth .back, body.pg-verify .back,
  body.pg-legal .brand,
  body.pg-legal .nav > a,
  body.pg-legal .links > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -10px;
  }
  /* .back on the auth/verify panels is a block-level link under the form;
     inline-flex would collapse it onto the previous line. */
  body.pg-auth .back, body.pg-verify .back { display: flex; }
  /* The legal footer link row uses a flex gap; without this the taller
     items would stretch the row's own line box. */
  body.pg-legal .links { align-items: center; }

  /* Landing footer, and the "Забыли пароль?" / resend-verification pair
     under both login forms. */
  body.pg-landing footer a,
  body.pg-legal footer a,
  body.pg-admin .login-links a, body.pg-platform .login-links a,
  body.pg-admin .link-button, body.pg-platform .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -10px;
  }
}

/* ==================== установка приложения ==================== */
/* Баннер живёт только в кабинете и только у вошедших — см. js/pwa-install.js.
   Прижат к низу: в кабинете верх занят шапкой с навигацией, а на телефоне
   ещё и списком обращений, и всплывать поверх работы он не должен. */
.pwa-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  background:var(--cream, var(--surface));
  border:1px solid rgba(var(--ink-rgb),.10);
  border-radius:14px;
  box-shadow:0 12px 32px rgba(var(--shadow-rgb),.16);
  /* Безопасная зона: на телефонах с жестовой навигацией нижние 34 пикселя
     перекрыты полосой, и кнопка «Установить» попадала бы под неё. */
  margin-bottom:env(safe-area-inset-bottom,0);
}
.pwa-banner-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pwa-banner-text strong{font-size:14px;font-weight:700;color:var(--ink)}
.pwa-banner-text span{font-size:13px;color:var(--ink-soft, var(--muted))}
.pwa-banner-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pwa-banner-install{
  background:var(--green, var(--accent));
  color:var(--cream, var(--on-accent));
  border:0;
  padding:10px 16px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  min-height:44px;
}
.pwa-banner-install:hover{filter:brightness(1.06)}
.pwa-banner-hint{font-size:12px;color:var(--ink-soft, var(--muted));max-width:190px}
.pwa-banner-close{
  background:none;
  border:0;
  color:var(--ink-soft, var(--muted));
  font-size:22px;
  line-height:1;
  cursor:pointer;
  /* 44 пикселя — тот же минимум касательной цели, что у остальных
     мелких управляющих элементов в файле. */
  min-width:44px;
  min-height:44px;
}
.pwa-banner-close:hover{color:var(--ink)}
@media(max-width:480px){
  .pwa-banner{flex-direction:column;align-items:stretch;gap:10px}
  .pwa-banner-actions{justify-content:space-between}
  .pwa-banner-install{flex:1}
  .pwa-banner-hint{max-width:none}
}

/* ==================== футер: колонки ==================== */
/* Восемь ссылок в одну строку читались как свалка, а при переносе
   разделитель «·» оказывался в начале строки и выглядел обрывом вёрстки.
   Колонки решают и то и другое: разделители не нужны вовсе, группировка
   сама объясняет, что где искать.

   Средняя колонка отдана статьям блога намеренно. Это внутренние ссылки
   с каждой страницы сайта на материалы — то, что поисковые системы читают
   как структуру, а не как навигационный шум. Якоря лендинга в первой
   колонке работают так же для его разделов. */
/* Серая полоса перед футером — парная той, что отделяет шапку.
   Футер размечен как .wrap, то есть ограничен по ширине и с боковыми полями,
   поэтому border-top на нём дал бы линию по ширине колонки, а не экрана.
   Псевдоэлемент растягивается на всю ширину окна: left:50% плюс отрицательный
   margin в половину вьюпорта — приём, не требующий менять разметку 29 страниц. */
body.pg-landing footer, body.pg-legal footer{position:relative}
body.pg-landing footer::before, body.pg-legal footer::before{
  content:'';position:absolute;top:0;left:50%;margin-left:-50vw;width:100vw;height:1px;
  background:rgba(var(--ink-rgb),.08);pointer-events:none
}
/* Пустое место под полосой — 20px на обеих палитрах.

   На лендинге его до сих пор не было вовсе, хотя в правиле подвала стояло
   `padding:44px 0`: подвал размечен как <footer class="wrap">, а
   `body.pg-landing .wrap{padding:0 24px}` весит на один класс больше, чем
   `body.pg-landing footer`, и обнулял вертикальные отступы. Правило ниже
   весит столько же, сколько .wrap, и стоит после него — отсюда и подвал
   получает свои отступы, и боковые 24px остаются на месте.

   У документов .wrap боковых полей не задаёт, конфликта нет, и хватает
   обычного правила. Было 32px — стало 20px, чтобы расстояние от полосы до
   первой строки на всех публичных страницах читалось одинаково. */
body.pg-landing footer.wrap{padding:20px 24px 44px}
body.pg-legal footer{padding-top:20px}

/* Пустое место над полосой. Полоса стоит по верхнему краю подвала, значит
   всё, что над ней, принадлежит предыдущему блоку: на лендинге это нижний
   отступ последнего раздела (88px у всех section), у документов — нижний
   отступ листа. Ужимается только последний раздел, а не правило section
   целиком: между разделами 88px читаются как задумано, лишними они были
   лишь перед подвалом. */
body.pg-landing section:last-of-type{padding-bottom:68px}

footer .foot-cols{
  display:flex;
  flex-wrap:wrap;
  gap:20px 40px;
  align-items:flex-start;
}
footer .foot-col{
  display:flex;
  flex-direction:column;
  gap:6px;
  /* Ширины хватает самой длинной подписи — «Права и удаление данных»,
     — чтобы колонка не рвалась по словам. */
  min-width:160px;
}
footer .foot-title{
  font-weight:700;
  color:var(--ink, var(--soft));
  margin-bottom:2px;
}
footer .foot-col a{ text-decoration:none; }
footer .foot-col a:hover{ text-decoration:underline; }

/* «Приложение» — единственный пункт футера, который никуда не ведёт: он
   открывает диалог установки браузера, а это действие, а не переход, — то
   есть кнопка. Всё остальное у неё от соседних ссылок: в колонке пункт не
   должен отличаться ничем.

   Скрыт атрибутом hidden и показывается скриптом в <head> только тогда,
   когда браузер действительно предложил установку. */
footer .foot-install{
  appearance:none;
  border:0;
  padding:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:start;
  cursor:pointer;
}
/* Вес селектора такой же, как у body.pg-* footer a выше: подчёркивание
   ссылкам футера задаёт именно оно, перебивая общее .foot-col a. Кнопка
   повторяет соседей, а не общее правило, которого они не слушают. */
body.pg-landing footer .foot-install,
body.pg-legal footer .foot-install{ text-decoration:underline; }
body.pg-legal footer .foot-install:hover{ color:var(--green-dark); }

/* ==================== подвал: язык и тема ==================== */
/* Оба переключателя стоят под строкой копирайта — отсюда колонка. Раньше
   значок темы жил в шапке и дублировался внутри бургер-меню; в подвале для
   пары «язык + тема» есть своя строка, и дублировать ничего не нужно.

   Порядок в строке: сначала язык, потом тема. Язык меняет содержимое
   страницы, тема — только её вид; более весомое действие идёт первым. */
footer .foot-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
footer .foot-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}

/* Выбор языка — обычный <select>, а не собственный выпадающий список.
   Родной элемент открывается колесом прокрутки на телефоне, читается
   скринридером без единого aria-атрибута и не требует ни строчки на
   открытие и закрытие.

   Флагов здесь нет, и это решение, а не упущение. Эмодзи Windows не рисует
   вовсе — показывает двухбуквенный код, и «GB English» читается поломкой.
   Картинку в <option> вставить нельзя: браузеры показывают там только текст.
   Флаг фоном на самом элементе пробовался и наезжал на текст, а в арабской
   вёрстке — на стрелку: место под него резервируется логически, а позиция
   задаётся физически, и в RTL они расходятся.

   Но главное не в технике. Флага у языка не бывает: английский не британский,
   испанский не только испанский, арабский не саудовский. Название на своём
   языке однозначнее любого флага. */
.lang-select{
  font:inherit;
  color:inherit;
  /* Прозрачный фон, а не --surface: подвал лендинга стоит на --cream, и белый
     прямоугольник читался бы как отдельная карточка. Границы достаточно,
     чтобы элемент был опознан как управляющий. */
  background:transparent;
  border:1px solid rgba(var(--ink-rgb),.18);
  border-radius:8px;
  padding:8px 10px;
  /* Тот же минимум касательной цели, что у соседней кнопки темы. */
  min-height:44px;
  max-width:100%;
  cursor:pointer;
}
/* Отступ приходится повторять с большей специфичностью: на лендинге стоит
   `body.pg-landing *{padding:0}` (строка 36), а универсальный селектор внутри
   класса весит больше, чем сам класс. Пока флаг рисовался фоном, эту роль
   выполняло правило из отдельного файла; после его удаления текст в селекте
   упёрся в рамку. */
body.pg-landing .lang-select{ padding:8px 10px; }

.lang-select:focus-visible{
  outline:2px solid var(--copper, var(--green, var(--accent)));
  outline-offset:2px;
}
/* Список пунктов рисует не страница, а браузер, и по умолчанию он рисует его
   светлым поверх тёмной страницы. color-scheme — единственный способ это
   изменить; ставится точечно на сам элемент, а не на :root, чтобы не менять
   заодно полосы прокрутки и поля ввода во всём кабинете. */
:root[data-theme="dark"] .lang-select{ color-scheme:dark; }

/* Копия выбора языка внутри бургер-меню. Появляется там же, где появляется
   сам бургер как единственная навигация, — ниже 900px. Приём тот же, что у
   «Подключить» в шапке и в меню (.nav-menu-action): CSS не переносит узел к
   другому родителю, поэтому в разметке их два, а виден всегда один. */
.lang-select-menu{ display:none; }
@media(max-width:900px){
  body.pg-landing .lang-select-menu,
  body.pg-legal .lang-select-menu{
    display:block;
    width:100%;
    margin:10px 0 4px;
  }
}

@media(max-width:720px){
  /* Копирайт уходит под колонки: рядом с тремя столбцами он смотрелся
     обрывком, а внизу читается как подпись ко всему футеру. */
  footer.wrap{ flex-direction:column-reverse; align-items:flex-start; gap:20px; }
  footer .foot-cols{ gap:18px 28px; }
  footer .foot-col{ min-width:140px; }
}
@media (pointer: coarse){
  /* Ссылки в колонках стоят плотным столбцом, и без этого промах пальцем
     попадает в соседнюю строку. Отрицательный отступ гасит прибавку,
     чтобы столбец не разъезжался визуально. */
  footer .foot-col a,
  footer .foot-install{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    margin-block:-9px;
  }
}
/* ==================== тёмная тема ==================== */
/* Атрибут data-theme проставляется скриптом в <head> до первой отрисовки —
   иначе человек с тёмной темой ловил бы вспышку светлого фона на каждой
   загрузке. Скрипт синхронный и встроенный по той же причине: внешний файл
   откладывается и не успевает отработать раньше отрисовки.

   Палитр в этом файле четыре, и у каждой свои имена переменных: фон —
   то --cream, то --bg; акцент — то --copper, то --green, то --accent.
   Свести их к одному набору было бы правильнее, но это переписывание всего
   файла, а не добавление темы. Поэтому каждая палитра переопределяется по
   своим собственным именам, значения при этом общие.

   Фон не чёрный (#14181a, не #000): на чистом чёрном белый текст даёт
   ореол, а OLED-экраны показывают смазывание при прокрутке. Текст не
   чисто белый (#e8eaeb) по той же причине — контраст 15:1 вместо 21:1
   читается спокойнее и всё равно вдвое выше требования AA.

   Зелёный осветлён с #0f9438 до #22a84c. Исходный на тёмном фоне даёт
   4.8:1 — проходит для крупного текста и проваливает для обычного,
   а он используется и в ссылках. Осветлённый даёт 7.1:1. Как фон кнопки
   с светлым текстом остаётся исходный: там контраст считается наоборот. */

:root[data-theme="dark"] body.pg-landing {
  --cream: #14181a;
  --cream-2: #1c2225;
  --ink: #e8eaeb;
  --ink-soft: #9aa5aa;
  --copper: #22a84c;
  --copper-dark: #17a343;
  --sage: #2fb85c;
  --gold: #4e8f68;
  --surface: #1c2225;
  --copper-soft: #16241a;
  --ink-rgb: 232,234,235;
  --cream-rgb: 20,24,26;
  --shadow-rgb: 0,0,0;
}

:root[data-theme="dark"] body.pg-register,
:root[data-theme="dark"] body.pg-auth,
:root[data-theme="dark"] body.pg-verify {
  --cream: #14181a;
  --cream-2: #1c2225;
  --ink: #e8eaeb;
  --ink-soft: #9aa5aa;
  --green: #22a84c;
  --green-dark: #17a343;
  --line: rgba(232,234,235,.14);
  --surface: #1c2225;
  --danger: #e69a9a; --danger-soft: #3a2020;
  --ink-rgb: 232,234,235; --shadow-rgb: 0,0,0;
}

:root[data-theme="dark"] body.pg-legal {
  --bg: #14181a;
  --ink: #e8eaeb;
  --soft: #9aa5aa;
  --green: #22a84c;
  --green-dark: #17a343;
  --line: rgba(232,234,235,.16);
  --surface: #1c2225;
  --panel: #232a2d;
  --green-soft: #16241a;
  --on-accent: #14181a;
  --danger: #e07a7a;
  --ink-rgb: 232,234,235; --shadow-rgb: 0,0,0;
}

/* Кабинет и платформа наследуют тему тем же атрибутом: переключателя в их
   шапках пока нет, но если человек выбрал тёмную на публичной части,
   кабинет обязан её уважать — иначе переход в него слепит. */
:root[data-theme="dark"] body.pg-admin,
:root[data-theme="dark"] body.pg-platform {
  --bg: #14181a;
  --surface: #1c2225;
  --surface-2: #232a2d;
  --panel: #232a2d;
  --ink: #e8eaeb;
  --muted: #9aa5aa;
  /* Светлее прямого пересчёта светлого #718078: этим цветом набраны мета
     строки и подписи столбцов в 11–12px, и на самой светлой из подложек
     (--panel #232a2d) он должен оставаться выше 4.5:1. Даёт 5.2:1 и всё
     ещё звучит тише, чем --muted. */
  --faint: #8f9ba0;
  --line: #2c3438;
  --line-strong: #3d474b;
  --accent: #22a84c;
  --accent-dark: #17a343;
  --accent-soft: #1a2f22;
  --accent-line: #2c4d37;
  --on-accent: #14181a;
  --danger: #e07a7a;
  --danger-soft: #3a2020;
  --warn: #d9a441;
  --warn-soft: #33291a;
  --warn-line: #4a3a1c;
  --info: #9fb8e8;
  --info-soft: #1e2836;
  --ink-rgb: 232,234,235; --shadow-rgb: 0,0,0;
}

/* Изображения и логотипы, нарисованные под светлый фон, на тёмном
   выглядят вырезанными из белой бумаги. Небольшое приглушение убирает
   этот эффект, не искажая цвета. */
:root[data-theme="dark"] img:not([src$=".svg"]) {
  filter: brightness(.92);
}

/* Переключатель темы.

   Живёт в подвале, под строкой копирайта, и на публичных страницах он один.
   В шапке его больше нет: там он занимал место, которого на телефоне не было
   вовсе, и ради узкого экрана приходилось держать второй такой же узел внутри
   бургер-меню. В подвале строка своя, дублировать нечего.

   Значок здесь идёт с подписью. В шапке одинокая иконка читалась как значок
   и большего не требовала; в подвале, рядом с выбором языка, безымянная
   картинка выглядит обрывком вёрстки — и на слух у неё нет имени. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 44px — тот же минимум касательной цели, что у остальных мелких
     управляющих элементов в файле. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  /* Кнопка не наследует шрифт сама: без этого подпись рисовалась бы
     системным 13px рядом с текстом подвала. */
  font: inherit;
  color: var(--ink-soft, var(--soft, var(--muted)));
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg { width: 20px; height: 20px; flex: none; }
/* Значок и подпись показывают ТЕКУЩУЮ тему, а не ту, что включится:
   в светлой — солнце и «Светлая тема», в тёмной — луна и «Тёмная тема».

   Раньше было наоборот, показывалось действие. Обе договорённости
   распространены, но рядом стоит выбор языка, а он показывает текущий язык,
   а не тот, на который переключит. Два соседних элемента по разным правилам
   читаются как ошибка — и именно так это и прочли.

   Видимая подпись перестала описывать действие, поэтому доступное имя кнопке
   ставит site.js: оно содержит и состояние, и то, что произойдёт. Подпись
   входит в имя целиком — иначе управление голосом по видимому тексту
   перестало бы попадать в кнопку (WCAG 2.5.3 Label in Name). */
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

.theme-toggle .theme-label-dark{ display:none; }
.theme-toggle .theme-label-light{ display:inline; }
:root[data-theme="dark"] .theme-toggle .theme-label-dark{ display:inline; }
:root[data-theme="dark"] .theme-toggle .theme-label-light{ display:none; }

/* Бургер жирнее — под стать FoodGPT, где это SVG со stroke-width 2 на сетке
   24, то есть линии примерно 2.2px при ширине 17px. Здесь тот же вес даётся
   утолщением существующих span: метка и чекбокс завязаны на эту структуру,
   и замена на SVG сломала бы открытие меню. */
body.pg-landing .nav-burger span,
body.pg-legal .nav-burger span{ width:20px; height:2.5px; }

/* Кабинет: значок прижимается вправо в обеих шапках. */
body.pg-admin .mobile-shellbar .theme-toggle,
body.pg-platform .mobile-shellbar .theme-toggle{ margin-left:auto; }
body.pg-admin .topbar .theme-toggle,
body.pg-platform .topbar .theme-toggle{ margin-left:auto; }

/* ==================== страница 404 ==================== */
/* 404.html построена на палитре документов (pg-legal): тот же лист, та же шапка
   с бургером, тот же подвал — человек, промахнувшийся мимо статьи, не должен
   при этом ещё и попасть на страницу от другого сайта.

   Своих цветов и размеров здесь нет ни одного: всё берётся из переменных
   pg-legal, поэтому тёмная тема работает сама, без второго блока правил.

   Списки ссылок сделаны строками с разделителем, а не карточками. Карточка
   уместна там, где выбирают одно из нескольких равных — на 404 человек не
   выбирает, а ищет знакомое название, и плотный список сканируется глазами
   быстрее сетки из плиток. */
body.pg-legal .nf-code{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--green)}
body.pg-legal .nf-groups{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:8px}
body.pg-legal .nf-list{list-style:none;padding:0;margin:0}
/* Строка целиком — одна ссылка: название сверху, пояснение под ним. Кликается
   вся строка, а не два слова в ней. Вертикальные 10px при 1.6 строки дают
   заметно больше 44px, то есть касательная цель здесь и так в норме. */
body.pg-legal .nf-list a{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:650}
body.pg-legal .nf-list li:last-child a{border-bottom:0}
body.pg-legal .nf-list a:hover{color:var(--green-dark)}
body.pg-legal .nf-list a span{display:block;font-size:14px;font-weight:400;color:var(--soft);margin-top:2px}
/* Статьи идут во всю ширину листа: заголовки у них длиннее пунктов навигации и
   в половинной колонке ломались бы на три строки. */
body.pg-legal .nf-list-wide{margin-bottom:4px}
@media(max-width:640px){body.pg-legal .nf-groups{grid-template-columns:1fr;gap:0}}

/* ==================== арабская версия: письмо справа налево ==================== */
/* Переведённые страницы — главная и юридические документы — существуют в семи
   языках, и один из них пишется справа налево. На таких страницах у <html>
   стоит dir="rtl", и браузер сам разворачивает поток: flex-строки, порядок
   колонок подвала, отступы списков.

   Сам разворот держится не на правилах ниже, а на том, что в файле почти не
   осталось физических отступов по горизонтали: margin-left:auto у действий
   в шапке, padding-left у списков, left/right у декоративных элементов и
   углов пузырей переписки заменены на логические свойства (margin-inline-*,
   padding-inline-*, inset-inline-*, border-end-start-radius). В русской и
   любой другой левосторонней вёрстке они дают ровно то же, что давали
   физические, — поэтому замена ничего не сдвинула.

   Здесь остаётся то, что логическими свойствами не выражается. */

/* Арабское письмо выше латиницы и кириллицы по рисунку строки, а знаки огласовок
   уходят над и под неё. При межстрочном 1.65, рассчитанном под кириллицу,
   строки сцепляются. Шрифтовые псевдонимы Inter и Manrope арабских глифов не
   содержат, и подстановку делает система; за ней и остаётся выбор начертания. */
html[lang="ar"] body.pg-landing,
html[lang="ar"] body.pg-legal{ line-height:1.95; }
html[lang="ar"] body.pg-landing h1, html[lang="ar"] body.pg-landing h2, html[lang="ar"] body.pg-landing h3,
html[lang="ar"] body.pg-legal h1, html[lang="ar"] body.pg-legal h2{ line-height:1.5; }

/* Нумерация разделов в документах набрана арабскими цифрами внутри арабского
   текста, и двунаправленный алгоритм разворачивает «1.2.» в «2.1.». Изоляция
   заголовка от окружения решает это без разметки внутри строки. */
html[lang="ar"] body.pg-legal h2{ unicode-bidi:isolate; }

/* Счётчик шагов на главной: цифра в кружке — самостоятельный фрагмент, и в
   правостороннем потоке она не должна наследовать направление абзаца. */
html[lang="ar"] body.pg-landing .step::before{ direction:ltr; }

/* Название бренда набрано латиницей и состоит из двух слов. В правостороннем
   потоке двунаправленный алгоритм меняет их местами — знак получается
   «AI Kristina», — а в строке копирайта уводит © в конец. Обоим блокам
   возвращается левостороннее направление: сам блок остаётся там, где ему
   положено в RTL, но внутри читается как латинская надпись. */
html[lang="ar"] body.pg-legal .brand,
html[lang="ar"] footer .foot-meta > span{ direction:ltr; }

/* ==================== экраны входа на семи языках ==================== */
/* Регистрация, подтверждение почты, две страницы восстановления пароля и
   приглашение переведены на те же шесть языков, что главная и документы. У
   этих экранов нет ни подвала, ни бургер-меню — там комбобокс языка живёт на
   остальных страницах, — поэтому он стоит в шапке у регистрации и последним
   элементом панели у остальных четырёх.

   Выбор языка возвращается здесь к тому виду, который у него на остальных
   страницах (.lang-select выше по файлу). Свойства перечислены заново, а не
   унаследованы, потому что правила полей формы на этих экранах — селектор
   `body.pg-register select` и соседние — специфичнее и перебивают .lang-select.
   Отсюда каждая строка ниже:

     appearance   — на этих экранах у полей она снята ради своего шеврона;
                    выбору языка нужна родная стрелка, как в подвале сайта;
     width        — поля формы растянуты на колонку, выбору языка это не нужно:
                    он не поле формы и не должен на него походить. */
body.pg-register .lang-select,
body.pg-auth .lang-select,
body.pg-verify .lang-select{
  appearance:auto;
  width:auto;
  max-width:100%;
  min-height:44px;
  /* background-image, а не только -color: на этих экранах у полей формы своя
     стрелка, нарисованная фоном (правило `body.pg-register select` выше). Выбору
     языка вернули родную через appearance:auto — и обе стали видны разом.
     Раньше это не проявлялось: фоном стоял флаг и шеврон перекрывал. Флаги
     убрали, и шеврон вышел наружу. */
  background-color:transparent;
  background-image:none;
  border:1px solid rgba(var(--ink-rgb),.18);
  border-radius:8px;
  padding-block:9px;
  padding-inline:12px 10px;
  font-size:14px;
  color:var(--ink-soft);
}
body.pg-auth .lang-select,
body.pg-verify .lang-select{margin-top:18px}

/* Две сноски на переведённой форме.
   .consent-note — оговорка о том, что силу имеет русский оригинал документа.
   Стоит вплотную к отметкам согласия, а не в конце страницы: человек должен
   прочитать её там, где ставит галочку, а не после того, как её поставил.
   .note — предупреждение о том, что кабинет и письма пока только по-русски.
   Ему место после кнопки: это не условие согласия, а то, что ждёт дальше.

   Оба селектора названы через .panel: правило `body.pg-register .panel p` выше
   по файлу специфичнее короткой записи и вернуло бы им размер основного текста
   вместе с отступом в 22px. */
body.pg-register .panel .consent-note{font-size:12px;line-height:1.45;color:var(--ink-soft);margin:-4px 0 0}
body.pg-register .panel .consent-note a{color:var(--green-dark)}
body.pg-register .panel .note{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:14px 0 0}

/* Арабская вёрстка. Разворот потока делает сам браузер по dir="rtl" у <html>;
   здесь — то, что логическими свойствами не выражается, ровно как это уже
   сделано для главной и документов выше по файлу.

   Межстрочное: арабское письмо выше кириллицы по рисунку строки, и при 1.55
   строки сцепляются. Знак «Kristina AI» набран латиницей из двух слов —
   двунаправленный алгоритм поменял бы их местами. */
html[lang="ar"] body.pg-register,
html[lang="ar"] body.pg-auth,
html[lang="ar"] body.pg-verify{ line-height:1.9; }
html[lang="ar"] body.pg-register h1, html[lang="ar"] body.pg-register h2,
html[lang="ar"] body.pg-auth h1, html[lang="ar"] body.pg-verify h1{ line-height:1.45; }
html[lang="ar"] body.pg-register .logo,
html[lang="ar"] body.pg-auth .logo,
html[lang="ar"] body.pg-verify .logo{ direction:ltr; }
/* В панелях знак — блок во всю ширину строки, и левостороннее направление,
   заданное строкой выше, прижало бы его к левому краю. В шапке регистрации
   этого не случается: там знак стоит в flex-строке, и место ему отводит она. */
html[lang="ar"] body.pg-auth .logo,
html[lang="ar"] body.pg-verify .logo{ justify-content:flex-end; }