/* ===== tokens.css ===== */
/* ============================================================
   Токены «Неона» — единственный источник цветов, шрифта, радиусов
   и кеглей. Всё остальное (оболочка, библиотека компонентов, страницы)
   ссылается только на них. Правишь тему — правишь этот файл.

   Палитра снята с утверждённых макетов (Финалы/Новые, 05.09.2026):
   бренд #FB0260, светлая тема — белые поверхности с подложкой #F5F7FB,
   тёмная — сине-чёрная #0C1420 с приподнятыми слоями #141D2C.

   Светлая палитра лежит на :root, тёмная перекрывает её через
   prefers-color-scheme (пока тема не выбрана) и data-theme (см.
   theme.php). Тёмный блок один — neon_css() подставляет его в оба
   места через --bg:#0C1420; --s1:#0C1420; --s2:#141D2C; --s3:#1C2738; --card:#111B2A;
    --top-bg:#101827; --side-bg:#141E2D;
    --b1:#16202D; --b2:#1C2838; --b3:#283345; --control-border:#283345;
    --t1:#F5F7FB; --t2:#A6B8D8; --t3:#93A4C6; --t4:#6F7C99;
    --brand:#FB0260; --brand-hover:#FF2E7A; --brand-active:#D8024F;
    --brand-text:#FF4D8F; --brand-soft:#351A31; --brand-tint:#201929;
    --brand-glow:0 6px 22px rgba(251,2,96,.30); --brand-ring:rgba(251,2,96,.28);
    --bar-fill:#FC4890; --bar-track:#384059;
    --focus:#8CB8FF;
    --ok:#01CD89; --ok-text:#3FE0A6; --ok-soft:rgba(1,205,137,.14);
    --warn:#FA9103; --warn-text:#FFA531; --warn-soft:rgba(250,145,3,.15);
    --err:#F90405; --err-text:#FF6B6B; --err-fill:#FB0260; --err-on:#FFFFFF; --err-soft:rgba(249,4,5,.16);
    --info:#0356FD; --info-text:#51B5F3; --info-soft:#112748;
    --mute:#95A0D4; --mute-soft:#182334;
    --gold:#FFC24D; --gold-on-dark:#FFC24D; --gold-soft:rgba(255,194,77,.13);
    --violet:#9F82FF; --violet-soft:rgba(159,130,255,.14);
    --telegram:#1479A8; --telegram-hover:#0E719A;
    --shadow-raised:0 4px 14px rgba(0,0,0,.28);
    --shadow-popover:0 14px 36px rgba(0,0,0,.45);
    --shadow-modal:0 24px 64px rgba(0,0,0,.6);
    --shadow-sheet:0 -16px 48px rgba(0,0,0,.5);
    --sel-mix:3.5%;
    --logo-word:#F5F7FB;
    --thm-moon:none; --thm-sun:inline-flex;
    --nav-on-bg:#351A31; --nav-on-tx:#F24989; --nav-on-bd:transparent;
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5z' fill='%23F5F7FB'/%3E%3C/svg%3E");; руками его не дублировать.

   Как читать токены:
     --bg        — фон страницы (в обеих темах равен фону строк таблиц);
     --s1..s3    — поверхности: карточка / подложка (сайдбар, шапка
                   таблицы, поле поиска, счётчики) / наведение;
     --b1..b3    — рамки: волосяная (разделители строк) / карточки и
                   таблицы / контролы и наведение;
     --t1..t4    — текст: основной / второстепенный / подписи / призрачный;
     --brand-*   — фирменный розовый и его производные;
     --*-soft    — заливка под цветной текст того же имени;
     --r-*       — радиусы: xs чипы и бейджи, s кнопки и контролы,
                   m карточки, l модалки и шторки;
     --fs-*      — кегли одной шкалы: 12 подпись / 13 мелкий / 14 текст и
                   метка / 15 лид и подзаголовок / 16 секция / 28 заголовок.
                   На телефоне текст 15 и лид 16: телефонный макет утверждён
                   в своём масштабе, десктоп плотнее;
     --control-h — высота контролов: 40 (на таче 44), крупные 44, малые 32.

   Канонические брейкпоинты оболочки (см. shell.css):
     768  — телефон → планшет: нижняя панель уступает выдвижному меню;
     1280 — планшет → десктоп: сайдбар закреплён.
   Страничные сетки могут добавлять свои пороги, оболочка — нет.
   ============================================================ */
:root{
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --bg:#FFFFFF; --s1:#FFFFFF; --s2:#F5F7FB; --s3:#EDF1F7; --card:#FFFFFF;
  --top-bg:#FFFFFF; --side-bg:#F5F7FB;
  --b1:#EEF1F7; --b2:#E9EDF5; --b3:#DCE2EE; --control-border:#DCE2EE;
  --t1:#0B1020; --t2:#6B75A6; --t3:#7A85B2; --t4:#9AA3C2;

  --brand:#FB0260; --brand-hover:#E20257; --brand-active:#C6024D;
  --brand-text:#EA0258; --brand-soft:#FCE9F1; --brand-tint:#FEF2F6;
  --brand-glow:none; --brand-ring:rgba(251,2,96,.18);
  --action:var(--brand); --action-hover:var(--brand-hover); --action-text:#FFFFFF;
  --bar-fill:#FD73A6; --bar-track:#E5E7F0;
  --focus:#2A6FE8;

  --ok:#02C48E; --ok-text:#0A8F66; --ok-soft:#E3F8F0;
  --warn:#FE8F07; --warn-text:#D96F00; --warn-soft:#FFF3E3;
  --err:#F5150F; --err-text:#D8120D; --err-fill:#FB0260; --err-on:#FFFFFF; --err-soft:#FEECEB;
  --info:#036CF8; --info-text:#1B5FE6; --info-soft:#E1EFFE;
  --mute:#767FAF; --mute-soft:#F3F5FA;
  --gold:#8A5A10; --gold-on-dark:#FFC24D; --gold-soft:rgba(180,123,38,.12);
  --violet:#6C3DF4; --violet-soft:rgba(108,61,244,.10);
  --telegram:#1479A8; --telegram-hover:#0E719A;

  --r-xs:6px; --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:20px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px;
  --control-h:40px; --control-h-l:44px; --control-h-s:32px;
  --fs-caption:12px; --fs-small:13px; --fs-label:14px; --fs-body:14px;
  --fs-lead:15px; --fs-section:16px; --fs-title:clamp(24px,1.95vw,28px); --fs-sub:15px;
  --shadow-raised:0 4px 14px rgba(15,20,32,.06);
  --shadow-popover:0 14px 36px rgba(15,20,32,.16);
  --shadow-modal:0 24px 64px rgba(0,0,0,.28);
  --shadow-sheet:0 -16px 48px rgba(8,12,18,.18);
  --side-w:232px; --side-rail:64px; --top-h:64px; --top-h-m:64px;
  --tabbar-space:66px; --paybar-space:92px; --bulkbar-space:0px;
  --sel-mix:7%;
  --logo-word:#0B1020;
  --thm-moon:inline-flex; --thm-sun:none;
  --nav-on-bg:#FCE9F1; --nav-on-tx:#F0105A; --nav-on-bd:transparent;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5z' fill='%230B1020'/%3E%3C/svg%3E");
}
/* Палец, а не курсор: контролы на таче не ниже 44. Телефон держит кегли
   утверждённого телефонного макета — крупнее десктопных. */
@media (any-pointer:coarse){:root{--control-h:44px}}
@media (max-width:767px){:root{--fs-body:15px;--fs-lead:16px}}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C1420; --s1:#0C1420; --s2:#141D2C; --s3:#1C2738; --card:#111B2A;
    --top-bg:#101827; --side-bg:#141E2D;
    --b1:#16202D; --b2:#1C2838; --b3:#283345; --control-border:#283345;
    --t1:#F5F7FB; --t2:#A6B8D8; --t3:#93A4C6; --t4:#6F7C99;
    --brand:#FB0260; --brand-hover:#FF2E7A; --brand-active:#D8024F;
    --brand-text:#FF4D8F; --brand-soft:#351A31; --brand-tint:#201929;
    --brand-glow:0 6px 22px rgba(251,2,96,.30); --brand-ring:rgba(251,2,96,.28);
    --bar-fill:#FC4890; --bar-track:#384059;
    --focus:#8CB8FF;
    --ok:#01CD89; --ok-text:#3FE0A6; --ok-soft:rgba(1,205,137,.14);
    --warn:#FA9103; --warn-text:#FFA531; --warn-soft:rgba(250,145,3,.15);
    --err:#F90405; --err-text:#FF6B6B; --err-fill:#FB0260; --err-on:#FFFFFF; --err-soft:rgba(249,4,5,.16);
    --info:#0356FD; --info-text:#51B5F3; --info-soft:#112748;
    --mute:#95A0D4; --mute-soft:#182334;
    --gold:#FFC24D; --gold-on-dark:#FFC24D; --gold-soft:rgba(255,194,77,.13);
    --violet:#9F82FF; --violet-soft:rgba(159,130,255,.14);
    --telegram:#1479A8; --telegram-hover:#0E719A;
    --shadow-raised:0 4px 14px rgba(0,0,0,.28);
    --shadow-popover:0 14px 36px rgba(0,0,0,.45);
    --shadow-modal:0 24px 64px rgba(0,0,0,.6);
    --shadow-sheet:0 -16px 48px rgba(0,0,0,.5);
    --sel-mix:3.5%;
    --logo-word:#F5F7FB;
    --thm-moon:none; --thm-sun:inline-flex;
    --nav-on-bg:#351A31; --nav-on-tx:#F24989; --nav-on-bd:transparent;
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5z' fill='%23F5F7FB'/%3E%3C/svg%3E");
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1420; --s1:#0C1420; --s2:#141D2C; --s3:#1C2738; --card:#111B2A;
    --top-bg:#101827; --side-bg:#141E2D;
    --b1:#16202D; --b2:#1C2838; --b3:#283345; --control-border:#283345;
    --t1:#F5F7FB; --t2:#A6B8D8; --t3:#93A4C6; --t4:#6F7C99;
    --brand:#FB0260; --brand-hover:#FF2E7A; --brand-active:#D8024F;
    --brand-text:#FF4D8F; --brand-soft:#351A31; --brand-tint:#201929;
    --brand-glow:0 6px 22px rgba(251,2,96,.30); --brand-ring:rgba(251,2,96,.28);
    --bar-fill:#FC4890; --bar-track:#384059;
    --focus:#8CB8FF;
    --ok:#01CD89; --ok-text:#3FE0A6; --ok-soft:rgba(1,205,137,.14);
    --warn:#FA9103; --warn-text:#FFA531; --warn-soft:rgba(250,145,3,.15);
    --err:#F90405; --err-text:#FF6B6B; --err-fill:#FB0260; --err-on:#FFFFFF; --err-soft:rgba(249,4,5,.16);
    --info:#0356FD; --info-text:#51B5F3; --info-soft:#112748;
    --mute:#95A0D4; --mute-soft:#182334;
    --gold:#FFC24D; --gold-on-dark:#FFC24D; --gold-soft:rgba(255,194,77,.13);
    --violet:#9F82FF; --violet-soft:rgba(159,130,255,.14);
    --telegram:#1479A8; --telegram-hover:#0E719A;
    --shadow-raised:0 4px 14px rgba(0,0,0,.28);
    --shadow-popover:0 14px 36px rgba(0,0,0,.45);
    --shadow-modal:0 24px 64px rgba(0,0,0,.6);
    --shadow-sheet:0 -16px 48px rgba(0,0,0,.5);
    --sel-mix:3.5%;
    --logo-word:#F5F7FB;
    --thm-moon:none; --thm-sun:inline-flex;
    --nav-on-bg:#351A31; --nav-on-tx:#F24989; --nav-on-bd:transparent;
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5z' fill='%23F5F7FB'/%3E%3C/svg%3E");
  color-scheme:dark;
}
:root,:root[data-theme="light"]{color-scheme:light}

/* ===== base.css ===== */
/* ============================================================
   База: шрифт, сброс, типографика, фокус, системные состояния.
   Ничего страничного здесь нет.
   ============================================================ */
/* Inter — вариативный 100–900, свой хостинг (public/fonts): Google Fonts
   у аудитории режут блокировщики, а зависеть видом кабинета от чужого
   CDN незачем. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-var.woff2) format('woff2')}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t1);
  font:var(--fs-body)/1.5 var(--font);
  font-feature-settings:'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  caret-color:var(--brand)}
a{color:inherit;text-decoration:none}
img,svg{vertical-align:middle}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
main{max-width:1360px;margin:0 auto;width:100%;min-width:0;
  padding:16px calc(20px + env(safe-area-inset-right)) 28px calc(20px + env(safe-area-inset-left))}
@media (min-width:768px){
  main{padding:20px calc(24px + env(safe-area-inset-right)) 32px calc(24px + env(safe-area-inset-left))}
}
@media (min-width:1280px){
  main{padding:24px calc(28px + env(safe-area-inset-right)) 36px calc(28px + env(safe-area-inset-left))}
}
h1{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;margin:0 0 4px;line-height:1.15;text-wrap:balance}
h2{font-size:var(--fs-section);font-weight:700;letter-spacing:-.01em;margin:0 0 10px;line-height:1.3}
.sub{color:var(--t2);font-size:var(--fs-lead);margin:0 0 14px;line-height:1.5}
.q{color:var(--t3);font-size:var(--fs-small)}
.linklike{background:none;border:0;padding:0;color:var(--brand-text);font:inherit;cursor:pointer;text-align:left}
.linklike:hover{text-decoration:underline}
.linklike.danger{color:var(--err-text)}
/* Скрытый живой текст для читалок экрана. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0}
.inline{display:inline-flex;margin:0}
:root{scrollbar-color:var(--b3) var(--bg)}
.modal-open{overflow:hidden}

/* Один фокус для клавиатуры: синее кольцо, не спорящее с розовым выбором. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:1px}
/* Коробки, которым фокус отдают скриптом (окно, ящик меню, шторка, просмотр
   фото), рамку не рисуют: кольцо нужно клавиатуре на кнопках, а не на них. */
.mbox:focus,.side:focus,.sheet:focus,.pgal-lb:focus,[tabindex="-1"]:focus{outline:none}

/* Системные состояния браузера следуют выбранной теме. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--t1);caret-color:var(--t1);
  -webkit-box-shadow:0 0 0 1000px var(--s2) inset}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .act,.btn,.chk,.seg,input,select,textarea{forced-color-adjust:auto;border:1px solid ButtonText}
  input[type=checkbox]:checked,input[type=radio]:checked{background:Highlight;border-color:Highlight}
  .bdg,.badge,.cnt,.btop,.bstd,.bfree{border:1px solid ButtonText}
}

/* ===== shell.css ===== */
/* ============================================================
   Оболочка кабинета: сайдбар, шапка, нижняя панель телефона и
   шторка «Ещё». Одна на все страницы — страницы её не перекрывают.

   Три режима (пороги — в tokens.css):
     < 768   телефон: шапка с логотипом, нижняя панель, «Ещё» — шторка;
     768–1279 планшет: сайдбар выезжает ящиком по кнопке в шапке;
     ≥ 1280  десктоп: сайдбар закреплён, кнопка в шапке сворачивает его
             в рейку из значков (состояние помнит localStorage).
   Разметка — neon_side_nav / neon_header / neon_tab_bar / neon_more_sheet
   в view.php, поведение — public/shell.js.
   ============================================================ */

/* ---------- каркас ---------- */
.shell{display:flex;min-height:100vh;min-height:100dvh}
.body{flex:1;min-width:0;display:flex;flex-direction:column;padding-bottom:var(--tabbar-space)}
.side{display:none}
.sovl{display:none}

/* ---------- логотип ---------- */
.brand{display:inline-flex;align-items:center;flex-shrink:0;color:var(--logo-word)}
.brand-logo{display:block;flex-shrink:0;color:inherit}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:12px;
  min-height:var(--top-h-m);
  padding:env(safe-area-inset-top) calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));
  background:var(--top-bg);border-bottom:1px solid var(--b2)}
.top .brand{min-height:40px}
.tools{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto}
/* Разделители между группами инструментов — как на макете. */
.tdiv{width:1px;height:24px;background:var(--b2);flex-shrink:0;display:none}
/* Баланс: значок кошелька, сумма и под ней суточный расход, если он есть. */
.balwrap{display:none;align-items:center;gap:10px;color:var(--t1);min-height:40px}
.balwrap .wico{display:inline-flex;color:var(--t1);flex-shrink:0}
.bal{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  font-size:16px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;
  line-height:1.1;white-space:nowrap;letter-spacing:-.01em}
.balwrap:hover .bal b{color:var(--brand-text)}
.balday{font-size:var(--fs-small);font-weight:500;color:var(--t3);letter-spacing:0}
.refill{display:none;align-items:center;justify-content:center;min-height:var(--control-h);padding:0 16px;
  border-radius:var(--r-s);background:var(--action);color:var(--action-text);
  font-size:var(--fs-body);font-weight:600;white-space:nowrap;box-shadow:var(--brand-glow)}
.refill:hover{background:var(--action-hover)}
/* Круглые кнопки шапки: колокольчик, тема, кнопка сайдбара. */
.bellbtn,.thmbtn,.menubtn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;padding:0;border:0;border-radius:var(--r-s);
  background:transparent;color:var(--t1);cursor:pointer}
.bellbtn:hover,.thmbtn:hover,.menubtn:hover{background:var(--s3)}
.menubtn{display:none;border:1px solid var(--b2);width:40px;height:40px;border-radius:var(--r-s)}
.thm-moon{display:var(--thm-moon)}
.thm-sun{display:var(--thm-sun)}
/* Бейдж непрочитанного: красный кружок с числом у правого верхнего края. */
.cnt{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:var(--err-fill);color:var(--err-on);font-size:10px;font-weight:700;line-height:16px;
  text-align:center;box-shadow:0 0 0 2px var(--top-bg)}
@media (max-width:359px){
  .top{gap:6px;padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right))}
  .tools{gap:2px}
}

/* ---------- нижняя панель телефона ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:var(--top-bg);border-top:1px solid var(--b2);
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 2px 7px;font-size:12px;font-weight:500;color:var(--t2);min-width:0;min-height:56px;justify-content:center}
.tabbar a svg{color:var(--t1);width:20px;height:20px}
.tabbar a.on,.tabbar a.on svg{color:var(--brand-text)}
.tabbar a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ---------- шторка «Ещё» (телефон) ---------- */
.sheet{position:fixed;left:0;right:0;bottom:var(--tabbar-space);z-index:35;
  max-height:min(78vh,720px);max-height:min(78dvh,720px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);border:1px solid var(--b2);border-bottom:0;border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-sheet);padding:8px 20px 20px;
  transform:translateY(110%);visibility:hidden;transition:transform .24s ease,visibility .24s}
.sheet.on{transform:none;visibility:visible}
.sheet .grip{display:block;width:40px;height:4px;border-radius:2px;background:var(--b3);margin:0 auto 14px}
.sheet .shead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.sheet .shead b{font-size:20px;font-weight:700}
.sheet .sclose{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  margin-right:-8px;border:0;border-radius:var(--r-s);background:transparent;color:var(--t1)}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{display:flex;align-items:center;gap:14px;min-height:54px;padding:0 2px;
  font-size:var(--fs-lead);font-weight:500;color:var(--t1);border-bottom:1px solid var(--b1)}
.sheet nav a:last-child{border-bottom:0}
.sheet nav a svg{color:var(--t1);flex-shrink:0}
.sheet nav a .chev{margin-left:auto;color:var(--t3)}
.sheet .promo{margin:8px 0 0;padding:16px 0 14px;border-top:1px solid var(--b2);border-bottom:1px solid var(--b2)}
.sheet .sacct{display:flex;align-items:center;gap:12px;padding-top:14px}
.sheet .sacct .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sheet .sacct .mail{font-size:var(--fs-body);color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet .sacct .sid{display:flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--t2)}
.sheet .slogout button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:0;border-radius:var(--r-s);background:transparent;color:var(--t1)}
.sheet .slogout button:hover{background:var(--s3)}
.sovl-sheet{position:fixed;inset:0;z-index:30;background:rgba(6,9,14,.55);opacity:0;visibility:hidden;
  transition:opacity .2s,visibility .2s}
body.sheet-open .sovl-sheet{opacity:1;visibility:visible}

/* ---------- сайдбар: общие правила (планшет и десктоп) ---------- */
.side{flex-direction:column;width:var(--side-w);flex-shrink:0;
  padding:20px 12px calc(24px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  background:var(--side-bg);border-right:1px solid var(--b2);overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin}
.side .brand{padding:0 0 0 10px;min-height:40px;margin-bottom:20px}
.side .logo-mark{display:none}
/* Главное действие кабинета — всегда на виду. */
.side .snew{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;width:auto;margin:0 4px;
  min-height:var(--control-h);padding:0 14px;border:0;border-radius:var(--r-s);
  background:var(--action);color:var(--action-text);font-size:var(--fs-body);font-weight:600;
  white-space:nowrap;box-shadow:var(--brand-glow)}
.side .snew:hover{background:var(--action-hover)}
.side nav{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.side nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;
  border-radius:var(--r-s);font-size:var(--fs-body);font-weight:500;color:var(--t1);overflow:hidden;white-space:nowrap}
.side nav a svg{flex-shrink:0;width:20px;height:20px;color:var(--t1)}
.side nav a:hover{background:var(--s3)}
.side nav a.on{background:var(--nav-on-bg);color:var(--nav-on-tx);font-weight:600}
.side nav a.on svg{color:var(--nav-on-tx)}
.side nav a.on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
/* Нижние пункты: за чертой, тем же кеглем. */
.side .sfoot{margin-top:20px}
.side .sfoot::before{content:'';display:block;height:1px;margin:0 8px 8px 12px;background:var(--b2)}
/* «Есть идея или нашли ошибку?» — приглашение в поддержку, прижато к низу. */
.promo{display:flex;align-items:flex-start;gap:8px;margin-top:auto;padding:14px 6px 0 12px}
.promo .picon{display:inline-flex;color:var(--brand);flex-shrink:0;margin-top:1px}
.promo .picon svg{width:20px;height:20px}
.promo .txt{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:var(--fs-small);line-height:1.4;color:var(--t2)}
.promo .txt b{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body);font-weight:600;color:var(--brand-text)}
.promo:hover .txt b{color:var(--brand-hover)}
/* Блок аккаунта: почта, номер с копированием, выход. */
.side .sacct{display:flex;flex-direction:column;gap:6px;margin:16px -12px 0 calc(-12px - env(safe-area-inset-left));padding:16px 12px 0 calc(24px + env(safe-area-inset-left));border-top:1px solid var(--b2);min-width:0}
.sacct .mail{font-size:var(--fs-small);color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sacct .sid{display:flex;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--t3);white-space:nowrap}
.sacct .sid b{font-weight:500;color:var(--t3);font-variant-numeric:tabular-nums}
.copyid{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border:0;border-radius:var(--r-xs);background:none;color:var(--t2);cursor:pointer;padding:0;flex-shrink:0}
.copyid:hover{background:var(--s3);color:var(--t1)}
.copyid.did{color:var(--ok-text)}
.slogout{margin:6px 0 0}
.slogout button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 2px 0 3px;border:0;
  background:none;color:var(--t1);font-size:var(--fs-body);font-weight:500;cursor:pointer;border-radius:var(--r-s)}
.slogout button:hover{color:var(--brand-text)}
.side .slogout button svg{color:inherit;width:20px;height:20px}

/* ---------- планшет: сайдбар — выдвижной ящик ---------- */
@media (min-width:768px){
  .tabbar,.sheet,.sovl-sheet{display:none}
  .body{padding-bottom:0}
  .top{min-height:60px;gap:14px;padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right))}
  .menubtn{display:inline-flex}
  .tools{gap:12px}
  .tdiv,.balwrap,.refill{display:inline-flex}
  .balwrap{display:flex}
  .side{display:flex;position:fixed;inset:0 auto 0 0;z-index:80;height:100vh;height:100dvh;
    width:min(280px,86vw);transform:translateX(-104%);transition:transform .22s ease;
    box-shadow:18px 0 48px rgba(6,9,14,.22)}
  body.menu-open .side{transform:none}
  .side .sclose{position:absolute;top:14px;right:10px;display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border:1px solid var(--b2);border-radius:var(--r-s);background:var(--s1);color:var(--t1);cursor:pointer}
  .side .sclose:hover{background:var(--s3)}
  .sovl{display:block;position:fixed;inset:0;z-index:70;background:rgba(6,9,14,.5);opacity:0;visibility:hidden;
    pointer-events:none;transition:opacity .18s,visibility .18s}
  body.menu-open .sovl{opacity:1;visibility:visible;pointer-events:auto}
}

/* ---------- десктоп: сайдбар закреплён, сворачивается в рейку ---------- */
@media (min-width:1280px){
  .top{min-height:var(--top-h);padding-left:calc(28px + env(safe-area-inset-left));padding-right:calc(28px + env(safe-area-inset-right))}
  .top .brand{display:none}
  .top.gst .brand{display:inline-flex}
  .side{position:sticky;inset:auto;top:0;z-index:1;transform:none;box-shadow:none;height:100vh;height:100dvh;width:var(--side-w);transition:none}
  .side .sclose{display:none}
  .sovl{display:none!important}
  /* Рейка: только знак, «+» и значки. */
  body.side-rail .side{width:var(--side-rail);padding-left:calc(12px + env(safe-area-inset-left));padding-right:12px;align-items:stretch}
  body.side-rail .side .snew{margin:0 auto}
  body.side-rail .side .brand{padding:0}
  body.side-rail .side .sfoot::before{margin:0 4px 8px}
  body.side-rail .side .sacct{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  body.side-rail .side .brand{justify-content:center;padding:0}
  body.side-rail .side .logo-full{display:none}
  body.side-rail .side .logo-mark{display:block}
  body.side-rail .side .snew{width:40px;min-height:40px;padding:0;margin:0 auto;border-radius:var(--r-s)}
  body.side-rail .side .snew span,body.side-rail .side nav a span{display:none}
  body.side-rail .side nav a{width:40px;height:40px;min-height:40px;padding:0;margin:0 auto;justify-content:center;gap:0}
  body.side-rail .side nav a.on::before{display:none}
  body.side-rail .side .promo,body.side-rail .side .sacct .mail,body.side-rail .side .sacct .sid{display:none}
  body.side-rail .side .sacct{margin-top:auto;padding-top:14px;align-items:center}
  body.side-rail .side .slogout button span{display:none}
  body.side-rail .side .slogout button{width:40px;justify-content:center;padding:0}
}
@media (prefers-reduced-motion:reduce){.side,.sovl,.sheet,.sovl-sheet{transition:none}}

/* ===== ui.css ===== */
/* ============================================================
   Библиотека компонентов «Неона». Каждый элемент интерфейса — из этого
   файла: кнопки, поля, флажки, бейджи, вкладки, карточки, таблицы,
   меню, пагинация, модалки, уведомления. Страница подключает классы,
   а не заводит свои рамки и фоны. Живая витрина — /ui-kit.

   Оглавление:
     1. Кнопки            .act .btn (.slim .lg .sm .ghost .soft .danger) .ibtn
     2. Поля              .field .input .select .search .lsearch .fi .wform
     3. Флажки            input[type=checkbox|radio] .chk .tgl .seg
     4. Бейджи и статусы  .bdg .btop .bstd .bfree .dot .st .chipn
     5. Вкладки и чипы    .tabs .chips
     6. Карточки          .card .ncard .panel .h1row .h2 .empty
     7. Таблицы           .tbl .tblw
     8. Меню              .kebab .kmenu .dd
     9. Пагинация         .pgnav .pgbar
    10. Модалки           .modal .mbox
    11. Уведомления       .note .ok-note .inote .ebanner .mbanner
    12. Прочее            .bar .quota-bar .sfav .olink .mlist .mrow .backrow
    13. Галерея фото      .pgal .pgal-tile .pgal-chip .pgal-acts .pgal-lb .pgal-sheet .vadd
    14. Оплата            .amt .presets .preset .paym .paym-grid .paydue
    15. Настройки         .sgp .sg .sg-head .sg-rows .sg-row .sg-ico .sg-txt .sg-val .sg-act .sg-note .sg-sub .sg-foot
    16. Графики          .lc .lc-y .lc-y2 .lc-plot .lc-grid .lc-in .lc-pt .lc-hit .lc-cursor .lc-tip .lc-dot .lc-x .lc-none
    17. Статистика       .pstat .pstat-head .pstat-top .pstat-title .pstat-lead .pstat-tiles(.bare) .pstat-tile .pstat-tl .pstat-num .pstat-sub .pstat-ctl .pstat-seg .pstat-range .pstat-panel .pstat-note .pstat-legend .pstat-foot
   ============================================================ */

/* ---------- 1. кнопки ----------
   Одно ядро на два вида: .act — действия кабинета (по умолчанию во всю
   ширину, .slim — в строку), .btn — компактная строчная (гостевые
   страницы). Модификаторы: .ghost — контурная, .soft — розовая мягкая,
   .danger — красная, .lg/.sm — размер. */
.act,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--control-h);padding:0 16px;border:1px solid transparent;border-radius:var(--r-s);
  background:var(--action);color:var(--action-text);font-size:var(--fs-body);font-weight:600;line-height:1.2;
  cursor:pointer;text-align:center;text-decoration:none;white-space:nowrap;box-shadow:var(--brand-glow);
  transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.act:hover,.btn:hover{background:var(--action-hover)}
.act:active,.btn:active{background:var(--brand-active)}
.act{display:flex;flex-direction:column;width:100%}
.act .sub{font-size:var(--fs-caption);font-weight:400;opacity:.9;margin:2px 0 0;color:inherit}
.act.slim{display:inline-flex;flex-direction:row;width:auto;min-height:36px;padding:0 14px;font-size:var(--fs-label)}
.act.ext{flex-direction:row}
.act.ext svg{flex:0 0 auto;opacity:.85}
.act.lg,.btn.lg{min-height:var(--control-h-l);padding:0 22px;font-size:var(--fs-lead);border-radius:var(--r-s)}
.act.sm,.btn.sm{min-height:var(--control-h-s);padding:0 12px;font-size:var(--fs-small)}
.act.ghost,.btn.ghost{background:var(--s1);border-color:var(--b3);color:var(--t1);box-shadow:none}
.act.ghost:hover,.btn.ghost:hover{background:var(--s2);border-color:var(--t4);color:var(--t1)}
.act.soft,.btn.soft{background:var(--brand-soft);color:var(--brand-text);box-shadow:none}
.act.soft:hover,.btn.soft:hover{background:var(--brand-tint)}
/* Мягкая контурная: розовые рамка, подложка и слово — второстепенное
   действие с оттенком «выключить» («Отключить Telegram»). */
.act.ghost.soft,.btn.ghost.soft{background:var(--brand-tint);border-color:color-mix(in srgb,var(--brand) 32%,var(--b3));color:var(--brand-text)}
.act.ghost.soft:hover,.btn.ghost.soft:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-text)}
.act.danger,.btn.danger{background:var(--err-soft);color:var(--err-text);box-shadow:none}
.act.danger:hover,.btn.danger:hover{background:var(--err);color:#fff}
.act:disabled,.btn:disabled,.act[aria-disabled="true"]{opacity:.45;box-shadow:none;cursor:not-allowed}
.act:disabled:hover{background:var(--action)}
.btn.wide{width:100%;display:flex}
/* Квадратная кнопка со значком: карандаш, кебаб, закрыть. .bordered — с рамкой. */
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;
  padding:0;border:1px solid transparent;border-radius:var(--r-s);background:transparent;color:var(--t1);cursor:pointer}
.ibtn:hover{background:var(--s3)}
.ibtn.bordered{border-color:var(--b2);background:var(--s1)}
.ibtn.bordered:hover{border-color:var(--b3);background:var(--s2)}
.ibtn.sm{width:28px;height:28px}
/* «Назад» во вложенной шапке страниц анкеты и размещения: квадрат 44 с рамкой. */
.pv-ctx-back{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--control-h);height:var(--control-h);
  border:1px solid var(--b2);border-radius:var(--r-s);background:var(--s1);color:var(--t1)}
.pv-ctx-back:hover{border-color:var(--b3);background:var(--s2)}
/* «В Telegram»: затемнённый фирменный голубой, один на оба размера. */
.btn.tg,.tgbtn{background:var(--telegram);color:#fff;border:0;box-shadow:none}
.btn.tg:hover,.tgbtn:hover{background:var(--telegram-hover)}
.btn.tg svg,.tgbtn svg{color:#fff;fill:#fff;flex:0 0 auto}
.tgbtn{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;width:auto;padding:0 16px;min-height:var(--control-h)}
.tgbtn.tgbtn-wide{width:100%;display:flex}

/* ---------- 2. поля ----------
   Ядро одно: рамка, радиус, высота, шрифт, стрелка селекта и фокус
   одинаковы у всех полей; контекст меняет только паддинг и фон.
   Новому полю — класс .input/.select или место в этом списке. */
.input,.select,.fi,.field input,.field select,.field textarea,
.lsearch input,.lsearch select,
.wform input[type=text],.wform input[type=email],.wform input[type=password],.wform input[type=url],
.wform input[type=tel],.wform input[type=date],.wform input[type=time],.wform input[type=number],
.wform select,.wform textarea{
  width:100%;min-height:var(--control-h);padding:0 12px;border:1px solid var(--control-border);border-radius:var(--r-s);
  background:var(--s1);color:var(--t1);font:inherit;font-size:var(--fs-body);line-height:1.3;
  appearance:none;-webkit-appearance:none;transition:border-color .12s ease,box-shadow .12s ease}
.wform textarea,.field textarea{padding:10px 12px;line-height:1.5;resize:vertical;min-height:88px}
.select,.field select,.lsearch select,.wform select{
  padding-right:32px;background-image:var(--chevron);background-repeat:no-repeat;
  background-position:right 12px center;background-size:12px 12px;cursor:pointer}
.input::placeholder,.fi::placeholder,.field input::placeholder,.lsearch input::placeholder,
.wform input::placeholder,.wform textarea::placeholder{color:var(--t3);opacity:1}
.input:focus,.select:focus,.fi:focus,.field input:focus,.field select:focus,.field textarea:focus,
.lsearch input:focus,.lsearch select:focus,.wform input:focus,.wform select:focus,.wform textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.input:disabled,.select:disabled,.field input:disabled,.wform input:disabled,.wform select:disabled{
  opacity:.55;cursor:not-allowed;background:var(--s2)}
.input.lg,.select.lg{min-height:var(--control-h-l);border-radius:var(--r-s);font-size:var(--fs-body)}
.input.sm,.select.sm{min-height:var(--control-h-s);padding:0 10px;font-size:var(--fs-small)}
.input.soft,.select.soft{background:var(--s2);border-color:transparent}
.input.soft:focus,.select.soft:focus{background:var(--s1);border-color:var(--brand)}
input[type=search]{appearance:none;-webkit-appearance:none}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
/* Поле поиска: лупа слева внутри поля. */
.search{position:relative;display:block;min-width:0}
.search input{padding-left:40px}
.search .sico{position:absolute;left:13px;top:50%;transform:translateY(-50%);display:inline-flex;color:var(--t2);pointer-events:none}
.search .sbtn{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:inline-flex;
  align-items:center;justify-content:center;border:0;border-radius:var(--r-xs);background:transparent;color:var(--t3);cursor:pointer}
.search .sbtn:hover{background:var(--s3);color:var(--t1)}
/* Группа «подпись — поле — подсказка». */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.fld label,.fld-label{font-size:var(--fs-small);font-weight:600;color:var(--t2)}
.fld-label.flabel{display:flex;align-items:center;gap:6px}
.fld-label i{color:var(--brand-text);font-style:normal;padding-left:3px}
.field .hint{font-size:var(--fs-small);color:var(--t3)}
.field.err input,.field.err select{border-color:var(--err)}
.field .ferr{font-size:var(--fs-small);color:var(--err-text)}
/* Ряд инструментов над списком: поиск, селекты, кнопки. */
.lsearch{display:flex;gap:8px;margin:0 0 10px;flex-wrap:wrap;align-items:center}
.lsearch > .search{flex:1 1 220px}
.lsearch select{width:auto;flex:0 1 auto}
.wform{display:block}
/* Поля столбиком с ровным шагом; кнопка не растягивается на всю ширину. */
.vform{display:flex;flex-direction:column;gap:12px}
.vform > .btn,.vform > .act.slim{align-self:flex-start}
.row{display:flex;gap:9px;flex-wrap:wrap}
.row2{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap}
.row2 .field{flex:1 1 220px}
.row2 .btn{flex:0 0 auto}
/* Поле пароля с кнопкой показа. */
.pwrap{position:relative;display:block}
.field .pwrap input{padding-right:40px}
.pwtog{position:absolute;top:0;right:0;height:100%;width:40px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--t3)}
.pwtog:hover{color:var(--t1)}
.pwtog .e1,.pwtog .e2{display:inline-flex}
.pwtog .e2,.pwtog.on .e1{display:none}
.pwtog.on .e2{display:inline-flex}
/* Строка подписи со ссылкой справа («Забыли пароль?»). */
.lrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lrow a{font-size:var(--fs-small);color:var(--brand-text);white-space:nowrap}
.lrow a:hover{text-decoration:underline}
@media (max-width:767px){
  /* 16px не запускает нежелательный zoom формы в iOS. */
  .input,.select,.fi,.field input,.field select,.field textarea,.lsearch input,.lsearch select,
  .wform input,.wform select,.wform textarea,.wform .nsel-in,.msel .msel-in{font-size:16px}
}

/* ---------- 3. флажки и переключатели ----------
   Рисуем сами: родные браузер красит по color-scheme, и в тёмной теме
   пустой флажок становится чёрной дырой. */
input[type=checkbox],input[type=radio]{
  appearance:none;-webkit-appearance:none;margin:0;flex-shrink:0;
  width:16px;height:16px;border:1.5px solid var(--control-border);background-color:var(--s1);
  border-radius:4px;position:relative;cursor:pointer;
  transition:border-color .12s ease,background-color .12s ease}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--brand)}
input[type=checkbox]:checked,input[type=radio]:checked{border-color:var(--brand);background-color:var(--brand)}
input[type=checkbox]:checked{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 8.4l2.8 2.8L12 5.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:100%}
input[type=checkbox]:indeterminate{border-color:var(--brand);background-color:var(--brand);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-width='2.4' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:100%}
input[type=radio]:checked::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#fff}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:default}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Флажок с подписью в строку — .ckrow. Чип выбора с рамкой (мастер анкеты,
   услуги, площадки) — .chk: заливается брендом при выборе; .bare — голый
   флажок без рамки (колонка выбора в списках). */
.ckrow{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--fs-label);color:var(--t1)}
.ckrow:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.chk{display:inline-flex;align-items:center;gap:8px;padding:0 12px;min-height:36px;border:1px solid var(--control-border);
  border-radius:var(--r-s);background:var(--s1);color:var(--t2);font-size:var(--fs-label);cursor:pointer;user-select:none;position:relative}
.chk:hover{border-color:var(--b3)}
.chk:has(input:checked){border-color:var(--brand);color:var(--t1);background:var(--brand-soft);font-weight:500}
.chk input{width:16px;height:16px}
.chk.bare{padding:0;min-height:0;border:0;background:none;gap:0}
.chk.bare:has(input:checked){background:none;border:0}
.chk:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
/* Тумблер. */
.tgl{position:relative;display:inline-flex;width:40px;height:24px;flex-shrink:0;cursor:pointer}
.tgl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;height:100%;border:0}
.tgl i{position:absolute;inset:0;border-radius:99px;background:var(--b3);transition:background .15s}
.tgl i::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.tgl input:checked + i{background:var(--brand)}
.tgl input:checked + i::after{transform:translateX(16px)}
.tgl:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px;border-radius:99px}
/* Сегмент-переключатель: радио в label или ссылки (.on — выбранная, для
   переключателей-адресов вроде периода статистики). .brand — выбранный
   сегмент розовый мягкий, как активная пилюля разделов анкеты. */
.seg{display:inline-flex;padding:3px;border:1px solid var(--b2);border-radius:var(--r-s);background:var(--s2);gap:2px}
.seg label,.seg a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 12px;
  border-radius:6px;font-size:var(--fs-label);font-weight:500;color:var(--t2);cursor:pointer;white-space:nowrap;text-decoration:none}
.seg label input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;border:0}
.seg a:hover{color:var(--t1)}
.seg label:has(input:checked),.seg a.on{background:var(--s1);color:var(--t1);font-weight:600;box-shadow:0 1px 2px rgba(15,20,32,.08)}
.seg label:has(input:focus-visible),.seg a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.seg.brand label:has(input:checked),.seg.brand a.on{background:var(--brand-soft);color:var(--brand-text);box-shadow:none}

/* ---------- 4. бейджи и статусы ----------
   .bdg — состояние словом на мягкой подложке (тон классом);
   .btop/.bstd/.bfree — тариф размещения: ТОП / Стандарт / Бесплатно;
   .dot + .st — цветная точка со словом (статус в строках таблиц);
   .chipn — счётчик в вкладке; .cnt — красный счётчик на значке. */
.bdg,.btop,.bstd,.bfree{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 8px;
  border-radius:var(--r-xs);font-size:var(--fs-small);font-weight:600;line-height:1;white-space:nowrap;width:fit-content}
.bdg.ok{color:var(--ok-text);background:var(--ok-soft)}
.bdg.warn{color:var(--warn-text);background:var(--warn-soft)}
.bdg.err{color:var(--err-text);background:var(--err-soft)}
.bdg.info{color:var(--info-text);background:var(--info-soft)}
.bdg.brand{color:var(--brand-text);background:var(--brand-soft)}
.bdg.gold{color:var(--gold);background:var(--gold-soft)}
.bdg.mut,.bdg.silver{color:var(--t2);background:var(--mute-soft)}
.bdg.sm,.btop.sm,.bstd.sm,.bfree.sm{min-height:20px;padding:0 6px;font-size:11px}
.btop{color:var(--brand-text);background:var(--brand-soft);text-transform:uppercase;letter-spacing:.02em}
.bstd{color:var(--info-text);background:var(--info-soft)}
.bfree{color:var(--t2);background:var(--mute-soft)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mute);flex-shrink:0}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.err{background:var(--err)}
.dot.info{background:var(--info)} .dot.mut{background:var(--mute)} .dot.brand{background:var(--brand)}
.st{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body);color:var(--t1);white-space:nowrap;min-width:0}
.st span{overflow:hidden;text-overflow:ellipsis}
/* Тон и у слова, не только у точки — статусы строк настроек («Подтверждена»). */
.st.ok{color:var(--ok-text)} .st.warn{color:var(--warn-text)} .st.err{color:var(--err-text)} .st.mut{color:var(--t3)}
.chipn{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;
  border-radius:var(--r-xs);background:var(--s2);color:var(--t1);font-size:var(--fs-small);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums}
.chipn.brand{background:var(--brand);color:#fff}
.vmark{display:inline-flex;vertical-align:middle;color:var(--ok)}

/* ---------- 5. вкладки и чипы ----------
   .tabs — вкладки с подчёркиванием (список анкет); .chips — пилюли. */
.tabs{display:flex;gap:16px;align-items:stretch;margin:0 0 16px;border-bottom:1px solid var(--b2);
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:40px;padding:0 12px;
  margin-bottom:-1px;border-bottom:2px solid transparent;font-size:var(--fs-body);font-weight:500;color:var(--t1);white-space:nowrap}
.tabs a:hover{color:var(--brand-text)}
.tabs a.on{color:var(--brand-text);font-weight:600;border-bottom-color:var(--brand)}
.tabs a.on .chipn{background:var(--brand-tint);color:var(--brand-text)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px 12px;padding:0 20px 2px}
.chips::-webkit-scrollbar{display:none}
.chips a{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;
  border-radius:99px;font-size:var(--fs-label);font-weight:500;color:var(--t2);
  border:1px solid var(--b3);white-space:nowrap;background:var(--s1)}
.chips a:hover{border-color:var(--t4);color:var(--t1)}
.chips a.on{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand-text);font-weight:600}

/* ---------- 6. карточки ---------- */
.card,.ncard,.panel{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-m);padding:var(--space-4)}
.ncard{display:flex;flex-direction:column;gap:var(--space-2)}
.ncard + .ncard{margin-top:10px}
.ncard.warn{border-color:color-mix(in srgb,var(--warn) 55%,var(--b2))}
.ncard.err{border-color:color-mix(in srgb,var(--err) 55%,var(--b2))}
.ncard.accent{border-color:color-mix(in srgb,var(--brand) 55%,var(--b2))}
.ncard.empty,.empty{color:var(--t2);font-size:var(--fs-body);text-align:center;padding:24px 16px;line-height:1.5}
.ncard b{font-weight:600}
.ncard p{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--t1)}
.ncard p.q{font-size:var(--fs-small);color:var(--t3)}
.panel{margin-bottom:var(--space-3)}
.panel[id]{scroll-margin-top:calc(var(--top-h,64px) + 14px)}
.panel h2,.mhead h2{font-size:var(--fs-section);font-weight:700;margin:0 0 10px;color:var(--t1)}
.panel .lead{font-size:var(--fs-label);color:var(--t2);line-height:1.5;margin:0 0 12px}
.panel form{margin-top:12px}
@media (min-width:720px){.panel{padding:18px}}
/* Шапка страницы: заголовок, подзаголовок, действие справа. */
.h1row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.h1row h1{margin:0}
.h1row .sub{margin:2px 0 0;font-size:var(--fs-sub)}
.h1row .htxt{min-width:0}
.h2{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin:var(--space-5) 0 var(--space-3)}
.h2 span{font-size:var(--fs-lead);font-weight:700;color:var(--t1)}
.h2 a{font-size:var(--fs-small);color:var(--brand-text)}
.h2:first-child{margin-top:0}
.h2-site{align-items:center}
.h2-site span{display:inline-flex;align-items:center;gap:9px;min-width:0}

/* ---------- 7. таблицы ----------
   .tblw — обёртка с рамкой и скруглением; .tbl — сама таблица:
   шапка на подложке, строки волосяными линиями, hover. */
.tblw{border:1px solid var(--b2);border-radius:var(--r-m);background:var(--s1);overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.tbl th{height:44px;padding:0 14px;text-align:left;font-size:var(--fs-label);font-weight:500;color:var(--t3);
  background:var(--s2);border-bottom:1px solid var(--b2);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--b1);vertical-align:middle;color:var(--t1)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--s2)}
.tbl th.num,.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.hl td{background:var(--brand-tint)}

/* ---------- 8. меню ----------
   .kebab — <details> с кнопкой-«⋮»; .kmenu — выпадающая панель
   (пункты — ссылки или кнопки-формы, выглядят одинаково). */
.kebab{position:relative}
.kebab summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r-s);color:var(--t1);cursor:pointer;user-select:none}
.kebab summary svg{display:block}
.kebab summary::-webkit-details-marker{display:none}
.kebab summary:hover,.kebab[open] summary{background:var(--s3)}
.kmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:200px;
  background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-m);
  box-shadow:var(--shadow-popover);padding:6px;display:flex;flex-direction:column}
.kmenu a,.kmenu .linklike,.kmenu label.mi{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;
  border-radius:var(--r-s);font-size:var(--fs-body);color:var(--t1);white-space:nowrap;text-decoration:none;font-weight:500}
.kmenu a:hover,.kmenu .linklike:hover,.kmenu label.mi:hover{background:var(--s2);text-decoration:none}
.kmenu a.on{color:var(--brand-text);font-weight:600}
.kmenu a.on .tick{margin-left:auto;color:var(--brand);display:inline-flex}
.kmenu a .tick{display:none}
.kmenu a:has(svg.ext){justify-content:space-between;gap:12px}
.kmenu a svg.ext{color:var(--t3);flex:0 0 auto}
.kmenu form{display:flex;margin:0}
.kmenu form .linklike{flex:1;text-align:left;width:100%}
.kmenu .linklike.danger{color:var(--err-text)}
.kmenu .ksep{height:1px;background:var(--b1);margin:4px 6px}
.kmenu.left{right:auto;left:0}

/* ---------- 9. пагинация ---------- */
.pgnav{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.pgnav a,.pgnav b{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;border-radius:var(--r-s);font-size:var(--fs-body);font-weight:500;
  border:1px solid var(--b2);color:var(--t1);background:var(--s1);font-variant-numeric:tabular-nums}
.pgnav a:hover{border-color:var(--b3);background:var(--s2)}
.pgnav b{background:var(--action);border-color:var(--action);color:var(--action-text);font-weight:600}
.pgnav .gap{color:var(--t3);padding:0 2px}
.pgbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px}
.pgbar .shown{color:var(--t2);font-size:var(--fs-body);white-space:nowrap}
.pgbar .perpage{display:flex;align-items:center;gap:8px}
.pgbar .perpage select{width:auto;min-height:var(--control-h);font-size:var(--fs-body)}
@media (max-width:767px){.pgbar{justify-content:center}.pgbar .shown{width:100%;text-align:center;font-size:var(--fs-label)}.h1row .sub{font-size:var(--fs-small)}}

/* ---------- 10. модалки ---------- */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;
  background:rgba(6,9,14,.55);padding:0}
.modal.on{display:flex}
.mbox{width:100%;max-width:480px;max-height:88vh;max-height:88dvh;overflow-y:auto;background:var(--s1);
  container-type:inline-size;border:1px solid var(--b2);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-modal);
  padding:20px calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}
.mbox h2{font-size:var(--fs-section);font-weight:700;margin:0 0 4px}
.mbox .sub{margin:0 0 14px}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.mclose{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:var(--r-s);
  background:transparent;color:var(--t1);cursor:pointer;flex-shrink:0}
.mclose:hover{background:var(--s3)}
/* Кнопки внизу модалки: справа; на телефоне — поровну во всю ширину. */
.mact{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.mact .act{min-height:var(--control-h)}
@media (max-width:639px){.mact .act{flex:1 1 0}}
.fi{padding:0 14px;background:var(--s2)}
.fi:focus{background:var(--s1)}
@media (min-width:640px){
  .modal{align-items:center;padding:20px calc(20px + env(safe-area-inset-right)) 20px calc(20px + env(safe-area-inset-left))}
  .mbox{border-radius:var(--r-l);padding-left:22px;padding-right:22px}
}

/* ---------- 11. уведомления ----------
   .note — спокойная заметка; .note.err — ошибка; .ok-note — успех;
   .ebanner — напоминание над страницей (жёлтое), .mbanner — синее. */
.note{border:1px solid var(--b2);border-radius:var(--r-m);padding:12px 14px;
  font-size:var(--fs-label);line-height:1.45;color:var(--t2);margin:0 0 4px;background:var(--s2)}
.note.err{border-color:color-mix(in srgb,var(--err) 45%,var(--b2));color:var(--err-text);background:var(--err-soft)}
.note.err b{color:inherit}
/* Черновик формы восстановлен из браузера: спокойная заметка над формой. */
.draft-note{margin:0 0 14px;background:var(--s2)}
.draft-note .linklike{margin-left:6px;padding:0;border:0;background:none;color:var(--brand-text);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
/* Заметка со значком «i» (neon_inote()): карточка с жирной первой строкой и
   пояснением — «здесь учитываются просмотры на наших сайтах» над
   статистикой. Тексты телефона, если другие, лежат в .m, ПК — в .d. */
.inote{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;margin:0 0 16px;
  border:1px solid var(--b2);border-radius:var(--r-m);background:var(--card)}
.inote > svg{flex:0 0 auto;margin-top:2px;color:var(--t2)}
.inote .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.inote b{font-size:var(--fs-body);font-weight:600;line-height:1.45;color:var(--t1)}
.inote span{font-size:var(--fs-body);line-height:1.45;color:var(--t2)}
.inote .m{display:none}
@media (max-width:767px){
  .inote{padding:14px 16px;gap:10px}
  .inote .d{display:none}
  .inote .m{display:revert}
}
.ok-note{border:1px solid color-mix(in srgb,var(--ok) 45%,var(--b2));border-radius:var(--r-m);
  padding:12px 14px;font-size:var(--fs-label);line-height:1.45;color:var(--ok-text);margin:0 0 12px;background:var(--ok-soft)}
.ebanner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;
  background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 45%,var(--b2));
  border-radius:var(--r-m);padding:10px 14px;margin:0 0 14px}
.ebanner span{font-size:var(--fs-label);line-height:1.4;color:var(--t1);flex:1;min-width:200px}
.ebanner b{font-weight:600}
.ebanner form{margin:0}
.mbanner{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 40%,var(--b2))}
.mbanner .bmute{font-size:var(--fs-caption);color:var(--t3);white-space:nowrap}
.mbanner .bmute:hover{color:var(--t1)}
@media (max-width:767px){
  .ebanner{padding:8px 11px;gap:6px}
  .ebanner span{font-size:var(--fs-small)}
  .ebanner .act{padding:7px 12px;font-size:var(--fs-small)}
}

/* ---------- 12. прочее ---------- */
/* Шкала доли: дорожка и заливка. */
.bar{display:block;height:6px;border-radius:99px;background:var(--bar-track);overflow:hidden;min-width:100px}
.bar > span{display:block;height:100%;border-radius:99px;background:var(--bar-fill)}
.quota-bar{display:flex;gap:3px}
.quota-bar span{flex:1;height:6px;border-radius:2px;background:var(--bar-track)}
.quota-bar span.on{background:var(--brand)}
.quota-bar.solid{height:6px;border-radius:99px;background:var(--bar-track);overflow:hidden;display:block}
.quota-bar.solid span{display:block;height:100%;background:var(--bar-fill);border-radius:99px}
/* Значок площадки — её собственная фавиконка, как есть: без плашки и
   скругления. Размер задаётся инлайном (списки плотнее карточек). */
.sfav{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.sfav img{width:100%;height:100%;object-fit:contain;display:block}
.sfav.letters{border-radius:28%;font-size:var(--fs-caption);font-weight:800;letter-spacing:.02em}
.sfav.img-broken{background:var(--s3);color:var(--t2);border-radius:28%}
.sfav.img-broken img{display:none}
/* Бесплатное размещение: значок площадки без цвета, чтобы платное на одной
   площадке не светилось всеми четырьмя. */
.sfav.free img{filter:grayscale(1);opacity:.45}
.sfav.free.letters,.sfav.free.img-broken{background:var(--s3)!important;color:var(--t3)!important}
.sfav.img-broken::before{content:attr(data-fallback-label);font-size:clamp(8px,calc(var(--sfav-size,28px)*.42),12px);
  font-weight:800;letter-spacing:.02em;line-height:1}
.sbset{display:inline-flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
.smore{font-size:var(--fs-body);color:var(--t2);white-space:nowrap}
/* Внешняя ссылка: подпись и знак новой вкладки. */
.olink{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap;
  font-size:var(--fs-small);font-weight:600;color:var(--brand-text)}
.olink:hover{color:var(--brand-hover)}
.olink svg{flex:0 0 auto}
@media (max-width:559px){
  .mlist .olink .otxt{display:none}
  .mlist .olink{justify-content:center;min-width:44px;min-height:44px}
  .mlist .olink svg{width:16px;height:16px}
}
/* Список-строки: значок, текст с подписью, стрелка. */
.mlist{display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-m);overflow:hidden}
.mrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--b1);color:var(--t1)}
.mrow:last-child{border-bottom:0}
.mrow:hover{background:var(--s2)}
.mrow .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mrow .txt b{font-size:var(--fs-body);font-weight:600;color:var(--t1)}
.mrow .txt span{font-size:var(--fs-small);color:var(--t3)}
.mrow .chev{color:var(--t3);transform:rotate(180deg);display:inline-flex}
.mlogout{margin-top:14px}
/* Дорога назад со страниц анкеты. */
.backrow{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px 0 6px;margin:0 0 10px;
  border:1px solid var(--b2);border-radius:var(--r-s);background:var(--s1);color:var(--t2);font-size:var(--fs-label);font-weight:500}
.backrow:hover{color:var(--t1);border-color:var(--b3)}
/* Недоступные изображения: один нейтральный знак во всех размерах. */
[data-img-fallback="photo"]{position:relative}
[data-img-fallback="photo"].img-empty::before,
[data-img-fallback="photo"].img-broken::before{
  content:'';position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(14px,30%,42px);aspect-ratio:1;background:var(--t3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m5 17 4.5-4.5 3 3L16 12l4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m5 17 4.5-4.5 3 3L16 12l4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat}
[data-img-fallback="photo"].img-broken > img,
[data-img-fallback="photo"].img-empty > img{display:none!important}
/* Тач: видимый размер может быть меньше, область нажатия — 44px. */
@media (any-pointer:coarse){
  .act.slim{min-height:44px}
  .kmenu a,.kmenu .linklike{min-height:44px}
  .copyid,.kebab summary,.mclose,.ibtn.sm{position:relative}
  .copyid::before,.kebab summary::before,.mclose::before,.ibtn.sm::before{content:'';position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
}

/* ---------- 13. галерея фото ----------
   .pgal — карточка фотографий анкеты: мастер, страница «Фото и видео»,
   витрина. Сетка равных плиток 3:4: первая — главное фото с фирменной
   меткой и рамкой (.cover), на остальных номер места (.pgal-chip.num);
   плитка «+» внутри сетки, действия по наведению (.pgal-acts) — на
   телефоне их заменяет шторка (.pgal-sheet), чипы состояний (.pgal-chip),
   кольцо загрузки (.pgal-prog), ошибка на плитке (.pgal-fail), тост с
   отменой (.pgal-toast), просмотр крупно (.pgal-lb). Ролик — строкой .vadd.
   Цвета поверх фотографии (плашки, кнопки) намеренно не зависят от темы. */
.pgal{position:relative}
/* Плитка 120–160px: сетка стоит слева компактным блоком и на широком
   экране не расползается в миниатюры. */
.pgal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,160px));justify-content:start;gap:10px;margin:0}
/* Страница «Фото и видео»: фото слева, ролик справа — как на шаге мастера. */
.pgal-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;margin:0 0 12px}
.pgal-layout > *{margin:0}
@media (min-width:900px){.pgal-layout{grid-template-columns:minmax(0,1fr) minmax(260px,320px)}}
.pgal-tile{position:relative;aspect-ratio:3/4;min-width:0;overflow:hidden;border-radius:var(--r-s);background:var(--s2);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y pinch-zoom;
  transition:transform .15s ease,box-shadow .15s ease}
/* Главное фото — рамка фирменного цвета поверх снимка, размер общий. */
.pgal-tile.cover::before{content:'';position:absolute;inset:0;z-index:1;border:2px solid var(--brand);border-radius:inherit;pointer-events:none}
.pgal-tile[data-id],.pgal-tile[data-token]{cursor:pointer}
.pgal-tile:focus-visible{outline:none;box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--focus)}
.pgal-tile img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:var(--s2)}
.pgal-tile::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,16,32,0) 58%,rgba(11,16,32,.42))}
.pgal-tile.img-broken::after,.pgal-tile.no-preview::after,.pgal-add::after{display:none}
.pgal-tile.no-preview,.pgal-tile.img-broken{background:var(--s3)}
.pgal-tile.is-up img{opacity:.55}
.pgal-tile.is-lift{transform:scale(1.04);box-shadow:var(--shadow-popover);z-index:3;cursor:grabbing}
.pgal-tile.flash{animation:pgal-flash .7s ease-out}
@keyframes pgal-flash{0%{box-shadow:0 0 0 3px var(--brand)}100%{box-shadow:0 0 0 3px transparent}}
/* Чипы: «Главное» — фирменный, статус — тёмная плашка с точкой. */
.pgal-chip{position:absolute;left:8px;bottom:8px;z-index:1;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;
  border-radius:var(--r-xs);background:rgba(11,16,32,.72);color:#fff;font-size:11px;font-weight:600;line-height:1;white-space:nowrap;pointer-events:none}
.pgal-chip svg{display:block}
.pgal-chip .dot{width:6px;height:6px}
.pgal-chip.main{height:24px;padding:0 8px;background:var(--brand);font-size:var(--fs-caption)}
.pgal-chip.num{min-width:22px;justify-content:center;padding:0 6px;font-variant-numeric:tabular-nums}
.pgal-chip.wait{top:8px;bottom:auto}
/* Действия — по наведению или фокусу; на телефоне их заменяет шторка. */
.pgal-acts{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:6px;opacity:0;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease}
.pgal-tile:hover .pgal-acts,.pgal-tile:focus-within .pgal-acts,.pgal-tile:focus-visible .pgal-acts{opacity:1;transform:none}
.pgal-tile.is-lift .pgal-acts{opacity:0}
.pgal-ab{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);color:#0B1020;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.pgal-ab svg{display:block}
.pgal-ab:hover{background:#fff}
.pgal-ab.del:hover{background:var(--err-soft);color:var(--err-text)}
.pgal-tile.cover .pgal-ab[data-act="main"]{display:none}
@media (hover:none){.pgal-acts{display:none}}
/* Загрузка: кольцо с процентами поверх приглушённого превью. */
.pgal-prog{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.pgal-ring{grid-area:1/1;width:46px;height:46px;transform:rotate(-90deg)}
.pgal-ring circle{fill:none;stroke-width:3.5}
.pgal-ring .tr{stroke:rgba(255,255,255,.35)}
.pgal-ring .bar{stroke:#fff;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113;transition:stroke-dashoffset .12s linear}
.pgal-tile.no-preview .pgal-ring .tr{stroke:var(--b3)}
.pgal-tile.no-preview .pgal-ring .bar{stroke:var(--brand)}
.pgal-prog b{grid-area:1/1;font-size:11px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pgal-tile.no-preview .pgal-prog b{color:var(--t1);text-shadow:none}
/* Фазы загрузки: «ждёт» в очереди (по три за раз), проценты отправки,
   «обработка» на сервере (кольцо крутится: байты ушли, это не зависание),
   «повтор N» после сбоя сети. */
.pgal-tile.is-up[data-phase="wait"] .pgal-ring,.pgal-tile.is-up[data-phase="retry"] .pgal-ring{opacity:.45}
.pgal-tile.is-up[data-phase="proc"] .pgal-ring{animation:pgal-spin 1.1s linear infinite}
.pgal-tile.is-up[data-phase="proc"] .pgal-ring .bar{stroke-dashoffset:34px !important;transition:none}
.pgal-tile.is-up[data-phase="wait"] .pgal-prog b,.pgal-tile.is-up[data-phase="retry"] .pgal-prog b,
.pgal-tile.is-up[data-phase="proc"] .pgal-prog b{font-size:9px;font-weight:600;letter-spacing:.02em;text-transform:lowercase}
@keyframes pgal-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
/* Ошибка остаётся на плитке — видно, какой снимок не дошёл. */
.pgal-fail{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;
  background:rgba(216,18,13,.58);color:#fff;text-align:center}
.pgal-fail b{font-size:var(--fs-caption);font-weight:600;line-height:1.2}
.pgal-retry{height:28px;padding:0 10px;border:0;border-radius:14px;background:#fff;color:#0B1020;font:600 var(--fs-caption) var(--font);cursor:pointer}
.pgal-fx{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;
  background:rgba(11,16,32,.5);color:#fff;cursor:pointer}
/* Плитка «+» — единственный вход для добавления; вся карточка принимает файлы. */
.pgal-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;
  border:1.5px dashed var(--b3);background:var(--s2);color:var(--t3);font:600 var(--fs-small) var(--font);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.pgal-add svg{display:block;margin-bottom:2px}
.pgal-add small{font-size:11px;font-weight:500;color:var(--t4)}
.pgal-add:hover,.pgal-add:focus-visible,.pgal.over .pgal-add{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-text)}
.pgal.over .pgal-grid{outline:2px dashed var(--brand);outline-offset:6px;border-radius:var(--r-s)}
.pgal.over .pgal-add small{color:var(--brand-text)}
.pgal-add[hidden]{display:none}
.pgal-add:disabled{opacity:.5;cursor:progress}
@media (hover:none){.pgal-add small{display:none}}
/* Подпись под сеткой — одна строка; вариант под мышь и под палец выбирает CSS.
   Свой размер и цвет вместо класса .q, и два класса в селекторе: страничные
   правила («.fset > p.q» в legacy.css, сброс margin-block-start у абзацев в
   profile-form.css) иначе съедали верхний отступ и подпись прилипала к
   нижнему ряду плиток. */
.pgal > .pgal-hint{margin:12px 0 0;font-size:var(--fs-small);color:var(--t3);line-height:1.45}
.pgal-hint b{color:var(--t2);font-weight:600}
.pgal-hint .touch{display:none}
@media (hover:none){.pgal-hint .fine{display:none}.pgal-hint .touch{display:inline}}
.pgal-note{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;color:var(--t2);font-size:var(--fs-small);line-height:1.45}
.pgal-note svg{flex:0 0 auto;margin-top:1px;color:var(--warn-text)}
.pgal-state{color:var(--t3);font-size:var(--fs-caption);font-variant-numeric:tabular-nums;white-space:nowrap}
.pgal-err{margin:12px 0 0}
.pgal-err[hidden]{display:none}
.pgal-err .linklike{color:inherit;font-weight:600;text-decoration:underline}
/* Действия в строке ошибки: «Повторить все» / «Продолжить без них». */
.pgal-err .pgal-err-acts{display:inline-flex;flex-wrap:wrap;gap:4px 14px;margin-left:10px;vertical-align:baseline}
.pgal-err .pgal-err-acts .linklike{padding:0;border:0;background:none;cursor:pointer;font:inherit;font-weight:600}
.pgal .wnav{margin-top:14px}
/* Тост «Фото удалено · Вернуть»: пять секунд на то, чтобы передумать. */
.pgal-toast{position:fixed;left:50%;bottom:calc(var(--tabbar-space) + 16px);z-index:45;transform:translate(-50%,8px);opacity:0;visibility:hidden;
  display:flex;align-items:center;gap:16px;padding:10px 14px;border-radius:var(--r-m);background:var(--t1);color:var(--bg);
  font-size:var(--fs-small);font-weight:500;box-shadow:var(--shadow-popover);white-space:nowrap;
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.pgal-toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.pgal-toast button{padding:0;border:0;background:transparent;color:var(--brand);font:700 var(--fs-small) var(--font);cursor:pointer}
@media (min-width:768px){.pgal-toast{bottom:24px}}
/* Просмотр крупно: кадр целиком, стрелки, те же действия. */
.pgal-lb{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,9,16,.86)}
.pgal-lb[hidden]{display:none}
.pgal-lb-box{position:relative;display:flex;flex-direction:column;gap:14px;width:min(92vw,560px);color:#fff}
.pgal-lb-img{position:relative;height:min(68vh,640px);aspect-ratio:3/4;max-width:100%;margin:0 auto;border-radius:var(--r-m);overflow:hidden;background:#000}
.pgal-lb-img img{width:100%;height:100%;display:block;object-fit:contain}
.pgal-lb-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pgal-lb-t{font-size:var(--fs-label);font-weight:600}
.pgal-lb-t span{margin-left:8px;color:rgba(255,255,255,.6);font-weight:500}
.pgal-lb-acts{display:flex;gap:8px}
.pgal-lb-acts button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-s);background:rgba(255,255,255,.1);color:#fff;font:600 var(--fs-small) var(--font);cursor:pointer}
.pgal-lb-acts button:hover{background:rgba(255,255,255,.18)}
.pgal-lb-acts button:disabled{opacity:.45;cursor:default}
.pgal-lb-acts button.del:hover{background:rgba(216,18,13,.55);border-color:transparent}
.pgal-lb-nav,.pgal-lb-x{position:absolute;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.pgal-lb-nav{top:50%;width:44px;height:44px;transform:translateY(-50%)}
.pgal-lb-nav:hover,.pgal-lb-x:hover{background:rgba(255,255,255,.26)}
.pgal-lb-nav:disabled{opacity:.3;cursor:default}
.pgal-lb-nav.prev{left:-60px}.pgal-lb-nav.next{right:-60px}
.pgal-lb-x{top:-52px;right:0;width:40px;height:40px}
@media (max-width:760px){
  .pgal-lb{padding:16px}
  .pgal-lb-img{height:min(60vh,560px)}
  .pgal-lb-nav.prev{left:8px}.pgal-lb-nav.next{right:8px}
}
/* Место в анкете: ряд номеров, куда фото ставится одним нажатием. */
.pgal-pos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pgal-pos:empty{display:none}
.pgal-pos-l{font-size:var(--fs-small);font-weight:600;white-space:nowrap}
.pgal-pos-row{display:flex;flex-wrap:wrap;gap:6px}
.pgal-pos-b{min-width:34px;height:34px;padding:0 8px;border:1px solid transparent;border-radius:var(--r-xs);
  font:600 var(--fs-small) var(--font);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .12s ease,color .12s ease}
.pgal-pos-b.on{background:var(--brand);border-color:transparent;color:#fff;cursor:default}
.pgal-lb .pgal-pos{color:#fff}
.pgal-lb .pgal-pos-b{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.pgal-lb .pgal-pos-b:hover:not(.on){background:rgba(255,255,255,.2)}
.pgal-sheet .pgal-pos{padding:6px 0 12px;border-top:1px solid var(--b1)}
.pgal-sheet .pgal-pos-l{color:var(--t2)}
.pgal-sheet .pgal-pos-b{background:var(--s2);border-color:var(--b3);color:var(--t1)}
.pgal-sheet .pgal-pos-b:hover:not(.on){background:var(--s3)}
/* Шторка действий — на телефоне вместо кнопок на плитке. */
.pgal-sheet{position:fixed;inset:0;z-index:65}
.pgal-sheet[hidden]{display:none}
.pgal-sheet-bd{position:absolute;inset:0;width:100%;padding:0;border:0;background:rgba(6,9,14,.55);cursor:default}
.pgal-sheet-box{position:absolute;left:0;right:0;bottom:0;padding:10px 16px calc(22px + env(safe-area-inset-bottom));
  background:var(--card);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-sheet)}
.pgal-sheet-box .grip{display:block;width:40px;height:4px;margin:0 auto 14px;border-radius:2px;background:var(--b3)}
.pgal-sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pgal-sheet-mini{position:relative;flex:0 0 56px;width:56px;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-xs);background:var(--s2)}
.pgal-sheet-mini img{width:100%;height:100%;display:block;object-fit:cover}
.pgal-sheet-txt{min-width:0}
.pgal-sheet-txt b{display:block;font-size:var(--fs-body);font-weight:600}
.pgal-sheet-txt span{font-size:var(--fs-small);color:var(--t3)}
.pgal-sheet-row{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0;border:0;border-top:1px solid var(--b1);
  background:transparent;color:var(--t1);font:500 var(--fs-body) var(--font);text-align:left;cursor:pointer}
.pgal-sheet-row svg{flex:0 0 auto;color:var(--t3)}
.pgal-sheet-row.del,.pgal-sheet-row.del svg{color:var(--err-text)}
.pgal-sheet-row:disabled{opacity:.4;cursor:default}
@media (min-width:640px){.pgal-sheet-box{left:50%;right:auto;width:420px;transform:translateX(-50%);border-radius:var(--r-l) var(--r-l) 0 0}}
/* Ролик — компактной строкой в том же языке, что плитка «+». */
.vadd{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px dashed var(--b3);border-radius:var(--r-s);background:var(--s2);
  color:var(--t2);font-size:var(--fs-small);line-height:1.35;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.vadd:hover,.vadd.over{border-color:var(--brand);background:var(--brand-tint)}
.vadd:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.vadd .vadd-ico{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:var(--r-s);background:var(--card);color:var(--t3)}
.vadd:hover .vadd-ico{color:var(--brand-text)}
.vadd .vadd-txt{min-width:0}
.vadd b{display:block;color:var(--t1);font-size:var(--fs-label);font-weight:600}
.vadd .vadd-txt span{display:block;color:var(--t3);font-size:var(--fs-caption)}
@media (max-width:559px){.pgal-grid{grid-template-columns:repeat(3,1fr);gap:8px}}
@media (prefers-reduced-motion:reduce){
  .pgal-tile,.pgal-acts,.pgal-toast,.pgal-add,.vadd,.pgal-ring .bar{transition:none}
  .pgal-tile.flash{animation:none}
  .pgal-tile.is-up[data-phase="proc"] .pgal-ring{animation:none}
}

/* ---------- 14. оплата ----------
   Форма пополнения («Финансы»): поле суммы с валютой .amt, быстрые
   суммы .presets/.preset, способы оплаты карточками .paym в сетке
   .paym-grid (значок .paym-ico, имя и комиссия .paym-txt, отметка —
   сам radio в правом верхнем углу), итог .paydue. Цвета значков
   платёжных систем — фирменные и от темы не зависят. */
.amt{position:relative;display:block;min-width:0}
.amt input{padding-right:34px;font-size:var(--fs-lead);font-weight:600;-moz-appearance:textfield}
.amt input::-webkit-outer-spin-button,.amt input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amt .amt-cur{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:var(--fs-lead);pointer-events:none}
.presets{display:flex;gap:8px;flex-wrap:wrap}
.preset{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-h);padding:0 14px;
  border:1px solid transparent;border-radius:var(--r-s);background:var(--s2);color:var(--t2);font-size:var(--fs-body);font-weight:500;
  cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background-color .12s ease,color .12s ease,border-color .12s ease}
.preset:hover{border-color:var(--b3);color:var(--t1)}
.preset.on{background:var(--brand-soft);color:var(--brand-text);font-weight:600}
.paym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.paym{position:relative;display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 38px 12px 14px;min-width:0;
  border:1px solid var(--b2);border-radius:var(--r-m);background:var(--s1);cursor:pointer;user-select:none;
  transition:border-color .12s ease,background-color .12s ease}
.paym:hover{border-color:var(--b3)}
.paym:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}
.paym:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.paym:has(input:disabled){opacity:.55;cursor:not-allowed}
.paym input{position:absolute;right:12px;top:12px;width:16px;height:16px;margin:0}
.paym input:checked::after{display:none}
.paym input:checked{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 8.4l2.8 2.8L12 5.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:100%}
.paym-ico{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;overflow:hidden}
.paym-ico svg{display:block}
.paym-ico.mute{background:var(--s3);color:var(--t2)}
.paym-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.paym-txt b{font-size:var(--fs-label);font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paym-txt span{font-size:var(--fs-caption);color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paydue{display:flex;flex-direction:column;gap:2px;min-width:0}
.paydue span{font-size:var(--fs-small);color:var(--t3)}
.paydue b{display:flex;align-items:baseline;gap:6px;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--t1);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.paydue b i{font-style:normal;font-size:var(--fs-lead);font-weight:600;letter-spacing:0}
.paydue b .note-only{font-size:var(--fs-body);font-weight:500;letter-spacing:0;color:var(--t2);white-space:normal}

/* ---------- 15. настройки ----------
   Страница «Настройки» по макетам ПК и телефона. Обёртка .sgp —
   контейнер: от 860px строки идут таблицей «плитка значка · подпись ·
   значение · действие», уже — раскладкой телефона (значок без плитки,
   значение отдельной строкой, кнопки во всю ширину; порог тот же, что у
   карточек списка анкет — на планшете таблице тесно). Карточка .sg:
   шапка .sg-head (значок только на ПК), блок строк .sg-rows (на ПК с
   рамкой, на телефоне — линии), строка .sg-row из .sg-ico / .sg-txt /
   .sg-val (значение, статус .st, подпись .s) / .sg-act, серая заметка
   .sg-note, подзаголовок .sg-sub, сноска .sg-foot. Макеты различаются
   и текстами: .d — только ПК, .m — только телефон (neon_sg_dm()).
   Колонка подписи — доля контейнера, а не fr: каждая строка — свой grid,
   и от ширины кнопки справа значения иначе плясали бы по вертикали.
   Модификаторы строки: .sg-full — кнопка во всю ширину телефона,
   .sg-tg — две кнопки поровну, label.sg-row — строка-тумблер.
   Модалки страницы лежат вне .sgp: контейнер — containing block для fixed. */
.sgp{container-type:inline-size;container-name:sgp;min-width:0}
.sgp .m{display:none}
.sg{background:var(--card);border:1px solid var(--b2);border-radius:var(--r-m);padding:16px;margin:0 0 20px;min-width:0}
.sg-head{display:flex;align-items:flex-start;gap:14px;margin:0 0 14px}
.sg-hico{display:inline-flex;flex:0 0 auto;margin-top:1px;color:var(--t1)}
.sg-head .txt{min-width:0}
.sg-head h2{margin:0 0 2px}
.sg-head .lead{margin:0;font-size:var(--fs-label);color:var(--t2);line-height:1.5}
.sg-rows{border:1px solid var(--b2);border-radius:var(--r-m);overflow:hidden}
.sg-rows + .sg-rows,.sg-note + .sg-rows{margin-top:12px}
.sg-row{display:grid;grid-template-columns:32px clamp(180px,30%,360px) minmax(0,1fr) auto;grid-template-areas:"ico txt val act";
  align-items:center;gap:6px 16px;min-height:56px;padding:8px 14px;border-top:1px solid var(--b1);color:var(--t1)}
.sg-rows > .sg-row:first-child{border-top:0}
.sg-row[id]{scroll-margin-top:calc(var(--top-h,64px) + 14px)}
label.sg-row{cursor:pointer}
label.sg-row:hover{background:var(--s2)}
label.sg-row:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}
/* Плитка значка: белый квадрат с волосяной рамкой; Telegram — фирменный круг. */
.sg-ico{grid-area:ico;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;
  border:1px solid var(--b2);border-radius:var(--r-s);background:var(--s1);color:var(--t1);box-shadow:0 1px 2px rgba(15,20,32,.05)}
.sg-ico svg{display:block}
.sg-ico.tg{border:0;border-radius:50%;background:var(--telegram);color:#fff;box-shadow:none}
.sg-ico.tg.mute{background:var(--s3);color:var(--t3)}
.sg-txt{grid-area:txt;display:flex;flex-direction:column;gap:2px;min-width:0}
/* Без колонки значения подпись забирает и её место — не переносится без нужды. */
.sg-row:not(:has(.sg-val)) .sg-txt{grid-column:txt-start/val-end}
.sg-txt b{font-size:var(--fs-body);font-weight:600;line-height:1.35;color:var(--t1)}
.sg-txt span{font-size:var(--fs-small);color:var(--t2);line-height:1.4}
.sg-val{grid-area:val;display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;min-width:0}
.sg-val b{font-size:var(--fs-body);font-weight:600;line-height:1.35;color:var(--t1);overflow-wrap:anywhere}
.sg-val .s{flex:0 0 100%;font-size:var(--fs-small);color:var(--t2);line-height:1.4;overflow-wrap:anywhere}
.sg-act{grid-area:act;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.sg-act form{display:contents}
.sg-act .act svg{flex:0 0 auto}
.sg-note{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;margin:12px 0 0;border-radius:var(--r-m);background:var(--s2)}
.sg-note > svg{flex:0 0 auto;margin-top:1px;color:var(--t1)}
.sg-note .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sg-note b{font-size:var(--fs-body);font-weight:600;line-height:1.4;color:var(--t1)}
.sg-note span{font-size:var(--fs-small);color:var(--t2);line-height:1.4}
.sg-sub{margin:16px 0 8px;font-size:var(--fs-lead);font-weight:600;color:var(--t1)}
.sg-foot{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:var(--fs-small);color:var(--t3);line-height:1.45}
.sg-foot > svg{flex:0 0 auto;margin-top:2px}
.sg-status{margin:8px 0 0}
@container sgp (max-width:859px){
  .sgp .d{display:none}
  .sgp .m{display:revert}
  .sgp .sg-ico.m{display:inline-flex}
  .sg{padding:18px 16px}
  .sg-head{margin:0 0 6px}
  .sg-head h2{font-size:20px;margin-bottom:4px}
  .sg-rows{border:0;border-radius:0}
  .sg-prefs{border-top:1px solid var(--b1);border-bottom:1px solid var(--b1)}
  .sg-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;min-height:0;padding:14px 0}
  label.sg-row:hover{background:transparent}
  .sg-ico{width:20px;height:20px;border:0;border-radius:0;background:none;box-shadow:none}
  .sg-ico.tg{width:40px;height:40px;border-radius:50%}
  .sg-txt{flex:1 1 0;min-width:0}
  .sg-txt b{font-size:var(--fs-lead)}
  .sg-txt span{font-size:var(--fs-label)}
  /* Значение — отдельной строкой во всю ширину; подпись под ним остаётся
     только с .keep; статус и действие занимают следующую строку. */
  .sg-val{display:contents}
  .sg-val > b{flex:0 0 100%;font-size:var(--fs-lead)}
  .sg-val .s{display:none}
  .sg-val .s.keep{display:block;flex:0 0 100%;font-size:var(--fs-label)}
  .sg-act{margin-left:auto}
  .sg-act .act{min-height:var(--control-h)}
  .sg-full .sg-act{flex:0 0 100%;margin:2px 0 0}
  .sg-full .sg-act .act{width:100%}
  .sg-tg .sg-act{flex:0 0 100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 0}
  .sg-tg .sg-act .act{width:100%}
  .sg-note{margin-top:14px}
  .sg-note > svg{display:none}
  .sg-foot{margin-top:14px}
}

/* ---------- 16. графики ----------
   Линейный график .lc (neon_line_chart()): колонка делений .lc-y, поле
   .lc-plot с сеткой .lc-grid; внутри .lc-in — SVG с кривой и заливкой,
   растянутый на всё поле (preserveAspectRatio="none", штрих не
   масштабируется), точки .lc-pt, невидимые колонки-цели .lc-hit (мышь,
   палец, клавиатура), курсор-пунктир .lc-cursor и тултип .lc-tip (.lc-tt
   заголовок, .lc-tv значения с точками цвета серии .lc-dot); подписи
   оси X — .lc-x, на телефоне их короткие варианты .m. Вторая серия
   (.lc.dual) — фиолетовая линия и точки .s2 по правой оси .lc-y2. Высота
   поля — --lc-h, ширина колонок делений — --lc-yw / --lc-yw2 (задаёт
   билдер по самой длинной подписи). .lc-none — пустое поле вместо графика.
   Скрипт тултипов — neon_line_chart_script(). */
.lc{--lc-h:236px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;min-width:0}
.lc.dual{grid-template-columns:auto minmax(0,1fr) auto}
.lc-y{position:relative;height:var(--lc-h);width:calc(var(--lc-yw,5ch) + 2px);
  font-size:var(--fs-small);color:var(--t3);font-variant-numeric:tabular-nums}
.lc-y span{position:absolute;right:0;transform:translateY(-50%);white-space:nowrap;line-height:1}
.lc-y2{position:relative;height:var(--lc-h);width:calc(var(--lc-yw2,5ch) + 2px);
  font-size:var(--fs-small);color:var(--t3);font-variant-numeric:tabular-nums}
.lc-y2 span{position:absolute;left:0;transform:translateY(-50%);white-space:nowrap;line-height:1}
.lc-plot{position:relative;height:var(--lc-h);padding:0 8px;min-width:0}
.lc-grid i{position:absolute;left:0;right:0;border-top:1px solid var(--b2);pointer-events:none}
.lc-in{position:relative;height:100%}
.lc-in svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.lc-line{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.lc-line.s2{stroke:var(--violet)}
.lc-pt{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--card);border:2px solid var(--brand);pointer-events:none}
.lc-pt.on{background:var(--brand);box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--brand)}
.lc-pt.s2{border-color:var(--violet)}
.lc-pt.s2.on{background:var(--violet);box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--violet)}
.lc-dot{display:inline-block;flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--brand)}
.lc-dot.s2{background:var(--violet)}
.lc-cursor{position:absolute;width:0;border-left:1px dashed var(--t4);pointer-events:none}
.lc-hit{position:absolute;top:0;height:100%;padding:0;border:0;border-radius:4px;background:transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.lc-hit:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.lc-tip{position:absolute;z-index:5;display:flex;flex-direction:column;gap:2px;padding:10px 14px;
  border:1px solid var(--b3);border-radius:10px;background:var(--s3);box-shadow:var(--shadow-popover);
  pointer-events:none;white-space:nowrap}
.lc-tt{font-size:var(--fs-small);line-height:1.3;color:var(--t2)}
.lc-tv{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-section);font-weight:600;line-height:1.3;
  color:var(--t1);font-variant-numeric:tabular-nums}
.lc-x{grid-column:2;position:relative;height:18px;margin:10px 8px 0}
.lc-x > span{position:absolute;top:0;transform:translateX(-50%);font-size:var(--fs-small);line-height:1.2;
  color:var(--t3);white-space:nowrap}
.lc-x .m{display:none}
.lc-none{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:180px;
  padding:20px;border:1px dashed var(--b3);border-radius:var(--r-m);text-align:center}
.lc-none p{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--t2)}
@media (max-width:767px){
  .lc{--lc-h:180px;gap:0 8px}
  .lc-y,.lc-x > span{font-size:var(--fs-caption)}
  .lc-x .d{display:none}
  .lc-x .m{display:inline}
  .lc-x.dense > span:nth-child(even){display:none}
  .lc-tip{padding:9px 12px}
  .lc-none{min-height:150px}
}

/* ---------- 17. статистика ----------
   Карточка статистики .pstat — одна на страницу анкеты и «Главную»
   (скрипт переключения периода — neon_stats_card_script()). Шапка:
   .pstat-head — плитки-числа .pstat-tiles/.pstat-tile (точка .lc-dot
   цвета линии делает их легендой графика) и справа .pstat-ctl с сегментом
   .pstat-seg и датами .pstat-range; у «Главной» вместо неё .pstat-top с
   заголовком .pstat-title/.pstat-lead и плитки без рамок .pstat-tiles.bare
   с разделителем. Дальше панели периодов .pstat-panel (одна видна),
   заметка .pstat-note и сноска: абзацы .pstat-legend или строка со значком
   .pstat-foot. */
.pstat{padding:22px 26px 20px;min-width:0}
.pstat-head,.pstat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;margin:0 0 22px}
.pstat-top{margin-bottom:18px}
.pstat-title{min-width:0}
.pstat-title h2{margin:0;font-size:18px;font-weight:700;line-height:1.3;color:var(--t1)}
.pstat-lead{margin:4px 0 0;font-size:var(--fs-body);line-height:1.4;color:var(--t2)}
.pstat-tiles{display:flex;flex-wrap:wrap;gap:12px;min-width:0}
.pstat-tile{display:flex;flex-direction:column;gap:4px;min-width:236px;padding:14px 18px 12px;
  border:1px solid var(--b2);border-radius:var(--r-m);background:var(--s2)}
.pstat-tl{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body);font-weight:600;line-height:1.35;color:var(--t1)}
.pstat-num{margin:2px 0 0;font-size:40px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--t1);font-variant-numeric:tabular-nums}
.pstat-sub{margin:4px 0 0;font-size:var(--fs-small);line-height:1.4;color:var(--t3)}
.pstat-tiles.bare{gap:0;margin:0 0 18px}
.pstat-tiles.bare .pstat-tile{min-width:0;padding:4px 28px 4px 0;border:0;border-radius:0;background:none}
.pstat-tiles.bare .pstat-tile + .pstat-tile{padding-left:28px;border-left:1px solid var(--b2)}
.pstat-tiles.bare .pstat-tl{font-size:var(--fs-small);font-weight:500;color:var(--t2)}
.pstat-tiles.bare .pstat-num{font-size:34px}
.pstat-ctl{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:0 0 auto}
.pstat-seg a{min-height:34px;padding:0 14px}
.pstat-range{margin:0;font-size:var(--fs-small);line-height:1.4;color:var(--t3)}
.pstat-panel{min-width:0}
.pstat-note{margin:14px 0 0}
.pstat-legend{display:flex;flex-direction:column;gap:4px;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--b1)}
.pstat-legend p{margin:0;font-size:var(--fs-small);line-height:1.45;color:var(--t3)}
.pstat-legend b{font-weight:600;color:var(--t2)}
.pstat-foot{display:flex;align-items:flex-start;gap:8px;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--b1);
  font-size:var(--fs-small);line-height:1.45;color:var(--t3)}
.pstat-foot svg{flex:0 0 auto;margin-top:1px}
@media (max-width:767px){
  .pstat{padding:16px}
  .pstat-head,.pstat-top{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:16px}
  .pstat-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pstat-tile{min-width:0;padding:12px 12px 10px}
  .pstat-tl{font-size:var(--fs-small)}
  .pstat-num{font-size:26px}
  .pstat-sub{font-size:var(--fs-caption)}
  .pstat-tiles.bare{gap:0;margin-bottom:14px}
  .pstat-tiles.bare .pstat-tile{padding:4px 12px 4px 0}
  .pstat-tiles.bare .pstat-tile + .pstat-tile{padding-left:12px}
  .pstat-tiles.bare .pstat-num{font-size:24px}
  .pstat-ctl{align-items:stretch;gap:10px}
  .pstat-seg{display:flex}
  .pstat-seg a{flex:1 1 0;min-height:40px;padding:0 8px}
  .pstat-range{text-align:center}
  .pstat-legend,.pstat-foot{margin-top:16px}
}

/* ===== legacy.css ===== */
/* ============================================================
   Страничные стили, ещё не разобранные на компоненты ui.css.
   Токены, база, оболочка и библиотека — в соседних файлах; сюда
   новых общих правил не добавлять.
   ============================================================ */
/* ---------- статистика ---------- */
/* На телефоне плитки ужимаются в один ряд из четырёх — как счётчики,
   а не карточки; «Просмотры» (.desk) там не помещаются и не нужны. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 14px}
.stat{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r-s);padding:8px 10px;
  display:flex;flex-direction:column-reverse;gap:0;min-width:0;align-items:center;text-align:center}
.stat.desk{display:none}
.stat .lbl{font-size:var(--fs-caption);color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stat .val{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3;color:var(--t1)}
.stat .sub{display:none}
@media (min-width:720px){
  .stats{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .stat{border-radius:var(--r-m);padding:12px 13px;flex-direction:column;gap:2px;
    align-items:flex-start;text-align:left}
  .stat.desk{display:flex}
  .stat .lbl{font-size:var(--fs-caption)}
  .stat .val{font-size:21px;line-height:1.25}
  .stat .sub{display:block;font-size:var(--fs-caption);color:var(--t3);margin:0}
  .stat .sub.up{color:var(--ok)}
  .stat .sub.warn{color:var(--warn)}
  .stat .sub.err{color:var(--err)}
}

/* Вопросы и ответы: карточки-раскрывашки. */
.qa{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r-m);margin-bottom:8px}
.qa summary{list-style:none;cursor:pointer;padding:13px 15px;font-size:var(--fs-label);font-weight:600;
  color:var(--t1);display:flex;align-items:center;gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'';margin-left:auto;width:7px;height:7px;flex-shrink:0;
  border-right:1.6px solid var(--t3);border-bottom:1.6px solid var(--t3);
  transform:rotate(45deg);transition:transform .15s}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa p{margin:0;padding:0 15px 13px;font-size:var(--fs-small);line-height:1.55;color:var(--t2)}
.qa p + p{padding-top:0;margin-top:-5px}
.faqwrap{width:min(100%,800px);margin-inline:auto}

/* ---------- ключ-значение ---------- */
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 18px}
.kv > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.kv .k{font-size:var(--fs-caption);color:var(--t3)}
.kv .v{font-size:var(--fs-label);color:var(--t1);overflow:hidden;text-overflow:ellipsis}

/* герой карточки анкеты */
.hero{display:flex;gap:14px;background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-m);padding:14px;margin-bottom:12px;align-items:flex-start}
.hero .hph{width:86px;height:112px;border-radius:11px;overflow:hidden;background:var(--s2);flex-shrink:0}
.hero .hph img{width:100%;height:100%;object-fit:cover;display:block}
.hero .hmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.hero h1{margin:0}
.hero .bset{display:flex;gap:6px;flex-wrap:wrap}
.hero .hmeta{font-size:var(--fs-small);color:var(--t3)}
.hero .hacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.msgr{display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--b3);
  border-radius:99px;font-size:var(--fs-label);font-weight:500;color:var(--t1);background:var(--s1);min-height:36px}
.msgr:hover{border-color:var(--b3);color:var(--t1)}
.msgr.tg{border-color:transparent;background:var(--telegram);color:#fff}
.msgr.tg:hover{border-color:transparent;background:var(--telegram-hover);color:#fff}
.msgr.tg svg{color:#fff;fill:#fff}
.msgr.tg:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- уведомления ---------- */
.nlist{display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-m);overflow:hidden}
.nrow{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--b1)}
.nrow:last-child{border-bottom:0}
.nrow[href]{color:inherit;text-decoration:none}
.nrow[href]:hover{background:var(--s2)}
.nrow[href]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.nrow .pt{width:7px;height:7px;border-radius:99px;background:var(--b3);margin-top:7px;flex-shrink:0}
.nrow .pt.ok{background:var(--ok)} .nrow .pt.err{background:var(--err)} .nrow .pt.warn{background:var(--warn)}
.nrow.unread .pt{background:var(--brand)}
.nrow .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nrow .txt b{font-size:var(--fs-label);font-weight:600;color:var(--t1)}
.nrow .txt span{font-size:var(--fs-small);color:var(--t3);line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
.nrow .when{font-size:var(--fs-caption);color:var(--t4);flex-shrink:0}

/* ---------- разделы анкеты ---------- */
/* Полоса разделов анкеты — карточка с пилюлями, как в макете: иконка,
   имя, счётчик; активная — розовая мягкая пилюля. На телефоне едет вбок. */
.ptabs{display:flex;gap:4px;align-items:center;background:var(--card);border:1px solid var(--b2);
  border-radius:var(--r-m);padding:5px;margin:0 0 16px;overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs a{display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:var(--r-s);
  font-size:var(--fs-body);font-weight:500;color:var(--t2);white-space:nowrap;flex:0 0 auto;
  min-height:38px}
.ptabs a svg{flex:0 0 auto}
.ptabs a:hover{background:var(--s2);color:var(--t1)}
.ptabs a.on{background:var(--brand-soft);color:var(--brand-text);font-weight:600}
.ptabs .tcnt,.pv-fold .tcnt{min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-xs);background:var(--s2);
  color:var(--t1);font-size:var(--fs-caption);font-weight:600;line-height:22px;text-align:center}
.ptabs a.on .tcnt{background:var(--s1);color:var(--brand-text)}

/* ---------- мастер: полоса шагов ---------- */
.steps{display:flex;align-items:center;list-style:none;margin:0 0 18px;padding:0;gap:6px}
.step{flex:1;min-width:0;display:flex;gap:8px;align-items:center}
.step > *{display:flex;align-items:center;gap:8px;min-width:0;color:var(--t3)}
.step a{min-height:36px}
.step i{flex-shrink:0;width:22px;height:22px;border-radius:99px;border:1px solid var(--b2);
  display:inline-flex;align-items:center;justify-content:center;
  font:600 var(--fs-caption)/1 var(--font);font-style:normal}
.step span{font-size:var(--fs-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step.on > *{color:var(--t1)}
.step.on i{background:var(--action);border-color:var(--action);color:var(--action-text);box-shadow:var(--brand-glow)}
.step.done > *{color:var(--t2)}
.step.done i{border-color:var(--brand);color:var(--brand-text)}
.step + .step{padding-left:6px;border-left:1px solid var(--b1)}
@media (max-width:439px){.step span{font-size:var(--fs-caption)}.step{gap:6px}
  .step + .step{padding-left:5px}}

/* ---------- формы ---------- */
.wform{display:block}
.fset{background:var(--card);border:1px solid var(--b2);border-radius:var(--r-m);
  padding:var(--space-4);margin-bottom:var(--space-3)}
.ncard + .fset,.sub + .fset{margin-top:12px}
.ncard + .wform,.sub + .wform{margin-top:12px}
.fset h2{font-size:var(--fs-body);font-weight:700;margin:0 0 2px;color:var(--t1)}
.fset > p.q{font-size:var(--fs-small);color:var(--t3);margin:0 0 12px;line-height:1.45}
.fset h2 + .frow,.fset h2 + .fld,.fset h2 + .checks{margin-top:12px}
/* Длинная общая форма создания/редактирования: нативные раскрывающиеся
   разделы. Несколько разделов можно держать открытыми одновременно — ввод
   не прерывается неожиданным автозакрытием. */
.pform-fold.fset{padding:0;overflow:visible}
.pform-fold > summary{list-style:none;display:flex;align-items:center;gap:12px;
  min-height:48px;padding:12px 16px;cursor:pointer;border-radius:var(--r-m);
  color:var(--t1);background:var(--s1)}
.pform-fold > summary::-webkit-details-marker{display:none}
.pform-fold > summary h2{font-size:var(--fs-section);line-height:1.3;margin:0;flex:1}
.pform-state{max-width:46%;font-size:var(--fs-caption);line-height:1.3;text-align:right;color:var(--t3);font-weight:600}
.pform-state.ok{color:var(--ok)}.pform-state.warn{color:var(--warn)}.pform-state.err{color:var(--err)}
.pform-fold > summary:hover{background:var(--s2)}
.pform-fold > summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pform-chevron{width:9px;height:9px;flex:0 0 auto;border-right:2px solid var(--t3);
  border-bottom:2px solid var(--t3);transform:rotate(45deg);transition:transform .15s ease}
.pform-fold[open] > summary{border-bottom:1px solid var(--b1);
  border-radius:var(--r-m) var(--r-m) 0 0}
.pform-fold[open] > summary .pform-chevron{transform:rotate(-135deg)}
.pform-fold-body{padding:16px}
.pform-fold-body > p.q{font-size:var(--fs-small);color:var(--t3);margin:0 0 16px;line-height:1.5}
.pform-fold.has-error{border-color:color-mix(in srgb,var(--err) 65%,var(--b1))}
.pform-fold.has-error > summary h2{color:var(--err)}
.pform-subhead{font-size:var(--fs-body);font-weight:700;color:var(--t1);margin:20px 0 10px}
@media (min-width:720px){.pform-fold-body{padding:18px 20px}}
.frow{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media (min-width:560px){.frow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frow .fld.wide{grid-column:1/-1}}
@media (min-width:860px){.frow{grid-template-columns:repeat(3,minmax(0,1fr))}}
.frow.two{grid-template-columns:1fr}
@media (min-width:560px){.frow.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.frow.narrow{grid-template-columns:repeat(2,minmax(0,1fr));max-width:320px;margin-top:10px}
.frow.off{display:none}
.fld.off{display:none}
.fld{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.fld:has(.tinfo){position:relative}
.fld + .fld,.frow + .fld,.fld + .frow,.checks + .fld{margin-top:var(--space-3)}
.frow > .fld + .fld{margin-top:0}
.fld label{font-size:var(--fs-caption);color:var(--t2);font-weight:500}
.fld label.flabel{display:flex;align-items:center;gap:6px}
.fld label i{color:var(--brand-text);font-style:normal;padding-left:3px}
.fld .hint{font-size:var(--fs-caption);color:var(--t3);line-height:1.4}
.wform input[type=text],.wform input[type=email],.wform input[type=password],.wform input[type=url],
.wform input[type=tel],.wform input[type=date],.wform input[type=time],
.wform input[type=number],.wform select,.wform textarea{
  width:100%;padding:9px 12px;background:var(--s2);font-size:var(--fs-body);line-height:1.4;
  appearance:none;-webkit-appearance:none}
.wform textarea{resize:vertical;min-height:84px}
.wform input::placeholder,.wform textarea::placeholder{color:var(--t3)}
.wform select{background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;padding-right:32px}
/* Стрелки счётчика у цен не нужны: они лезут ровно туда, где стоит рубль. */
.wform input[type=number]{-moz-appearance:textfield}
.wform input[type=number]::-webkit-inner-spin-button,
.wform input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Рубль — часть поля, а не подсказка: виден и до ввода, и после. */
.rub{position:relative;display:block}
.rub input[type=number]{padding-right:30px}
.rub i{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:var(--fs-label);color:var(--t3);pointer-events:none}

/* сегмент-переключатель */
.seg{display:inline-flex;background:var(--s2);border:1px solid var(--control-border);border-radius:99px;padding:3px;gap:2px}
.seg label{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border-radius:99px;
  font-size:var(--fs-small);color:var(--t2);cursor:pointer;white-space:nowrap}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:var(--action);color:var(--action-text);font-weight:600;box-shadow:var(--brand-glow)}
.segoff{margin-left:6px;font-size:10px;font-weight:800;padding:1.5px 6px;border-radius:99px;
  background:var(--ok-soft);color:var(--ok)}
.seg label:has(input:checked) .segoff{background:rgba(255,255,255,.22);color:#fff}
.segoff[hidden]{display:none}
.pillok{display:inline-block;white-space:nowrap;margin-left:7px;font-size:10px;font-weight:800;
  letter-spacing:.3px;padding:2px 7px;border-radius:99px;background:var(--ok-soft);color:var(--ok);
  vertical-align:2px}
/* Домены сети: на узком экране список в четыре строки — короткая подпись вместо него. */
@media (max-width:559px){.pw-doms{display:none}.pw-doms-s{display:inline}}
.pillok[hidden]{display:none}
.pillvip{margin-left:7px;font-size:9px;letter-spacing:.6px;padding:2px 6px;border-radius:var(--r-xs);
  background:linear-gradient(120deg,#FFC24D,#FF8A3D);color:#241300;font-weight:800;vertical-align:2px}
.tip{border-bottom:1px dotted var(--t3);cursor:help;position:relative;outline:none}
/* .tipbtn — любая кнопка с data-tip вне карточек типа (шкала лимита в списке
   анкет): тот же пузырь, переключение нажатием живёт в shell.js. */
.tip::after,.tinfo::after,.tipbtn::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(-50%);width:max-content;max-width:240px;padding:8px 11px;border-radius:var(--r-s);
  background:var(--t1);color:var(--s1);font-size:var(--fs-caption);line-height:1.45;white-space:normal;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:30}
.tip:hover::after,.tip:focus::after,
.tinfo:hover::after,.tinfo:focus::after,.tinfo.on::after,
.tipbtn:hover::after,.tipbtn:focus-visible::after,.tipbtn.on::after{opacity:1}

/* чипы-мультивыбор */
.checks{display:flex;flex-wrap:wrap;gap:var(--space-2)}
/* в чипах галка не нужна — состояние читается по заливке */
.checks .chk input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.chk.bare{border:0;padding:0;background:none}
.chk.bare input{position:static;opacity:1;width:15px;height:15px;pointer-events:auto}
.radios{display:flex;flex-wrap:wrap;gap:7px}
.radios .chk input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.radios .chk:has(input:checked){border-color:var(--brand);color:var(--t1);background:var(--brand-soft)}
/* поиск по чипам (доп. метро) */
.chkfind{margin:0 0 9px}
.chkfind input{max-width:320px}
.checks.scroll{max-height:176px;overflow-y:auto;padding:2px}

/* цены */
.ptable-wrap{overflow-x:auto;margin-bottom:12px}
.ptable{width:100%;border-collapse:collapse;min-width:280px}
.ptable th{font-size:var(--fs-caption);font-weight:500;color:var(--t2);text-align:left;padding:0 8px 7px 0;
  white-space:nowrap}
.ptable thead th{color:var(--t3);font-size:var(--fs-caption)}
.ptable td{padding:0 8px 8px 0}
.ptable td:last-child,.ptable th:last-child{padding-right:0}
.ptable input{width:100%;min-width:88px}

/* услуги */
.svc{columns:1;column-gap:24px}
@media (min-width:720px){.svc{columns:2}}
.svc-g{break-inside:avoid;margin-bottom:14px}
.svc-g > b{display:block;font-size:var(--fs-caption);letter-spacing:.05em;text-transform:uppercase;
  color:var(--t3);margin-bottom:7px}
.svc-r{display:flex;align-items:center;gap:8px;padding:3px 0}
.svc-r .chk{flex:1;min-width:0}
.svc-r .chk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wform .svc-p{width:104px;flex:0 0 104px;padding:7px 9px;border:1px solid var(--control-border);
  border-radius:var(--r-s);background:var(--s2);color:var(--t1);
  font:var(--fs-small)/1.3 var(--font)}
.svc-p:disabled{opacity:.4;background:var(--s3)}

/* карта и загрузка */
.map-stub{height:132px;border:1px dashed var(--b3);border-radius:var(--r-s);background:var(--s2);
  display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:var(--fs-small);
  text-align:center;padding:12px}
.drop{border:1px dashed var(--b3);border-radius:var(--r-m);background:var(--s2);padding:22px 16px;
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.drop[aria-busy="true"]{cursor:progress;opacity:.72;pointer-events:none}
.drop b{font-size:var(--fs-label);font-weight:600;color:var(--t1)}
.drop span{font-size:var(--fs-small);color:var(--t2);line-height:1.45}
.drop span.q{font-size:var(--fs-caption);color:var(--t3)}
.linklike{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
/* Селект с поиском: обвязка живёт рядом со спрятанным select */
.nsel{position:relative}
.wform .nsel-in{width:100%;padding:10px 12px;border:1px solid var(--control-border);border-radius:var(--r-s);
  background:var(--s2);color:var(--t1);font-size:var(--fs-label)}
.nsel-dd{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);max-height:240px;overflow:auto;
  background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-s);box-shadow:var(--shadow-popover)}
.nsel-g{padding:7px 12px 3px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.nsel-it{display:block;width:100%;text-align:left;padding:8px 12px;border:0;background:none;
  color:var(--t1);font-size:var(--fs-label);cursor:pointer;min-height:38px}
.nsel-it:hover{background:var(--s3)}
/* Мультиселект чипами */
.msel{position:relative;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:6px;border:1px solid var(--control-border);border-radius:var(--r-s);background:var(--s2);cursor:text}
.msel .msel-in{flex:1;min-width:140px;border:0;background:none;color:var(--t1);
  font-size:var(--fs-label);padding:5px 6px;outline:none}
.mchip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;
  background:var(--s3);font-size:var(--fs-small);color:var(--t1)}
.mchip button{background:none;border:0;color:var(--t3);cursor:pointer;padding:0;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.mchip button:hover{color:var(--t1)}
/* Ошибки формы */
.f-err input,.f-err select,.f-err textarea,.f-err .nsel-in,.f-err .msel{border-color:var(--err) !important}
.fld .field-error{color:var(--err);font-weight:600}
.field-error{display:block;font-size:var(--fs-caption);line-height:1.4;color:var(--err);font-weight:600}
.field-ok{display:block;font-size:var(--fs-caption);line-height:1.4;color:var(--ok);font-weight:600}
[aria-invalid="true"]{border-color:var(--err)!important}
.errlist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.errlist a{color:var(--t1);text-decoration:none;display:block;padding:9px 12px;border-radius:var(--r-s);
  background:var(--s3);border-left:3px solid var(--err);font-size:var(--fs-label);min-height:40px}
.errlist a:hover{background:var(--s2)}
/* Метка на карте */
/* Медиа-карточки: шапка со счётчиком; сетка фото — .pgal в ui.css */
.mhead{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.mhead h2{margin:0;font-size:var(--fs-section)}
/* position:static — глобальный .cnt (бейдж колокольчика) абсолютный, и без
   отмены счётчик заголовка улетал в угол страницы, распирая её на 3px. */
.mhead .cnt{position:static;min-width:26px;height:24px;padding:0 7px;border-radius:var(--r-xs);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-label);
  font-weight:600;background:var(--brand-soft);color:var(--brand-text)}
.mhead-r{margin-left:auto}
.drop-ico{color:var(--t2);margin-bottom:2px;display:inline-flex}
.drop-ico svg{display:block}
.pick-btn{margin-top:8px;padding:7px 16px;border:1px solid var(--b3);border-radius:999px;
  font-size:var(--fs-small);font-weight:600;color:var(--t1)}
.drop:hover .pick-btn{border-color:var(--brand)}
/* Ролик анкеты — плеером, а не строкой «загружен вчера» */
/* Строка хода загрузки: заменяет собой белый экран, который человек
   раньше видел, пока уезжали двести мегабайт. */
.uprog{margin:8px 0 0;font-variant-numeric:tabular-nums}
.ask-prev{margin:0 0 10px;border-radius:var(--r-s);overflow:hidden;background:var(--s2);
  width:96px;aspect-ratio:3/4}
.ask-prev img{width:100%;height:100%;object-fit:contain;display:block}
.vplay{border-radius:var(--r-s);overflow:hidden;background:#000;max-width:360px;margin-bottom:8px}
.vplay video{display:block;width:100%;max-height:420px}
.vguide ol{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:var(--fs-label)}
.vguide .vrules{margin:9px 0 0;font-size:var(--fs-small);font-style:italic;color:var(--t3)}
.vguide .vmore{display:block;margin-top:11px;font-size:var(--fs-small)}
.vguide ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;
  font-size:var(--fs-small);font-style:italic;color:var(--t2)}
.vfold > summary{cursor:pointer;font-size:var(--fs-label);font-weight:600;color:var(--t1);
  padding:10px 12px;border:1px solid var(--b1);border-radius:var(--r-s);list-style:none;
  display:flex;align-items:center;gap:7px;min-height:40px}
.vfold > summary::before{content:'';width:7px;height:7px;border-right:1.6px solid var(--t3);
  border-bottom:1.6px solid var(--t3);transform:rotate(-45deg);transition:transform .15s}
.vfold[open] > summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.vfold[open] > summary::before{transform:rotate(45deg)}
.vfold[open] > .guide{border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}
.vsplit{display:grid;grid-template-columns:1fr;gap:12px;margin-top:4px}
@media (min-width:860px){.vsplit{grid-template-columns:3fr 2fr}.vsplit .drop{align-self:start}}
/* Превью анкеты как на сайте */
.gal{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 0 6px;border-radius:var(--r-m);-webkit-overflow-scrolling:touch}
.gal::-webkit-scrollbar{display:none}
.gslide{flex:0 0 68%;max-width:340px;aspect-ratio:3/4;scroll-snap-align:start;
  border-radius:var(--r-s);overflow:hidden;background:var(--s3)}
@media (min-width:860px){.gslide{flex-basis:230px}}
.gslide img{width:100%;height:100%;object-fit:contain;background:var(--s2);display:block}
.gal-count{margin:0 0 10px}
.pv-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 11px}
.pv-chips span{padding:6px 11px;border-radius:999px;background:var(--s2);
  border:1px solid var(--b1);font-size:var(--fs-small);color:var(--t1)}
.pv-prices th{font-weight:500;color:var(--t2)}

/* Герой карточки анкеты: галерея, идентичность, карточка кампании.
   Раскладка считается контейнер-запросами от фактической ширины страницы
   (.pv-wrap), а не от окна: с сайдбаром и без него одинаковая ширина окна
   даёт разное место, и viewport-пороги включали три колонки там, где
   контенту уже тесно. До 660 — колонка; 660–1039 — галерея с идентичностью
   рядом, кампания снизу; с 1040 — три зоны, и главное действие переезжает
   в карточку кампании. */
.pv-wrap{container:pvmain/inline-size}
.pv-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@container pvmain (min-width:660px){.pv-hero{grid-template-columns:320px minmax(0,1fr)}
  .pv-camp{grid-column:1/-1}}
@container pvmain (min-width:1040px){.pv-hero{grid-template-columns:300px minmax(0,1fr) 292px}
  .pv-camp{grid-column:auto}}
/* Галерея: один главный кадр держит иерархию, остальное — рейка миниатюр:
   лентой под кадром, а на трёхзонном герое — колонкой сбоку. */
.pv-gal{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-self:start}
.pv-main{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r-s);
  overflow:hidden;background:var(--s2)}
.pv-main img{width:100%;height:100%;object-fit:cover;display:block}
.pv-count{position:absolute;left:8px;bottom:8px;padding:3px 9px;border-radius:99px;
  background:rgba(10,12,20,.62);color:#fff;font-size:var(--fs-caption);font-weight:600}
.pv-medit{position:absolute;top:8px;right:8px;width:30px;height:30px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:50%;
  background:rgba(10,12,20,.55);color:#fff}
.pv-thumbs{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
.pv-thumbs::-webkit-scrollbar{display:none}
.pv-th{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:var(--r-s);overflow:hidden;background:var(--s2);border:1px solid var(--b2);
  color:var(--t3);flex:0 0 auto}
.pv-th img{width:100%;height:100%;object-fit:cover;display:block}
.pv-th:hover{border-color:var(--b3)}
.pv-add svg{display:block}
@container pvmain (max-width:659px){.pv-main{max-width:420px}}
@container pvmain (min-width:1040px){
  .pv-gal{grid-template-columns:minmax(0,1fr) 56px}
  .pv-thumbs{flex-direction:column;overflow:visible}
}
/* Идентичность: происхождение, имя, независимые состояния, телефон. */
.pv-iden{display:flex;flex-direction:column;gap:9px;min-width:0}
.pv-origin{margin:0;font-size:var(--fs-caption);color:var(--t3)}
.pv-iden h1{margin:0;font-size:24px;overflow-wrap:anywhere;word-break:break-word}
@container pvmain (min-width:660px){.pv-iden h1{font-size:28px}}
.pv-iden .bset{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pv-iden .hmeta{margin:0;font-size:var(--fs-small);color:var(--t3);overflow-wrap:anywhere;word-break:break-word}
/* Телефон — данные с копированием, нарочно не похожие на кнопку звонка. */
.pv-phone{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--b2);
  border-radius:var(--r-s);background:var(--s2);max-width:420px}
.pv-phone .txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.pv-phone .k{font-size:var(--fs-caption);color:var(--t3)}
/* Номер не переносится: перенос телефона читается как два номера. */
.pv-phone b{font-size:var(--fs-body);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:break-word}
.pv-copy.did{color:var(--ok);border-color:var(--ok)}
/* На самых узких экранах остаётся только иконка копирования. */
@media (max-width:559px){.pv-copy span{display:none}}
.pv-msgrs{display:flex;gap:8px;flex-wrap:wrap}
/* Три независимых состояния: модерация, проверка фото, источник.
   Спокойные строки «метка: значение · дата» — коробка вокруг каждого
   пункта делала служебные данные важнее самой анкеты. */
.pv-status{display:flex;flex-direction:column;gap:4px;padding:9px 0;
  border-top:1px solid var(--b1)}
.pv-st{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.pv-st .k{font-size:var(--fs-small);color:var(--t3);min-width:118px}
.pv-st b{font-size:var(--fs-label);font-weight:600}
.pv-st b.ok{color:var(--ok)} .pv-st b.warn{color:var(--warn)}
.pv-st b.err{color:var(--err)} .pv-st b.mut{color:var(--t2)}
.pv-st .d{font-size:var(--fs-small);color:var(--t3)}
.pv-syncnote{margin:0;font-size:var(--fs-small);color:var(--t3)}
/* Карточка кампании: тариф, охват, срок и автопродление — только здесь. */
.pv-camp{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--b2);
  border-radius:var(--r-m);background:var(--s2);align-self:start;min-width:0}
.pv-chead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pv-chead h2{margin:0;font-size:var(--fs-label)}
.pv-ctier{margin:0;font-size:18px;font-weight:800;letter-spacing:-.015em}
.pv-clead{margin:0;font-size:var(--fs-small);color:var(--t3);line-height:1.5}
.pv-crow{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-small);padding:3px 0}
.pv-crow span{color:var(--t3)}
.pv-crow b{font-weight:600;text-align:right}
/* Тумблер автопродления живёт в самой строке — своей строки он не стоит. */
.pv-autoform{display:inline}
.pv-autoform .linklike{margin-left:8px;font-weight:500}
.pv-cnote{margin:2px 0 0;padding:8px 10px;border-radius:var(--r-s);background:var(--info-soft);
  color:var(--info);font-size:var(--fs-caption);line-height:1.45}
.pv-cta .act{width:100%;min-height:var(--control-h)}
.pv-cta form{margin:0}
/* Действия идентичности: на узкой раскладке главная кнопка + «Редактировать»
   рядом; на трёхзонной главная переезжает в карточку кампании, и здесь
   остаётся спокойная правка. Второй экземпляр главной всегда спрятан. */
.pv-acts2{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.pv-acts2 .pv-cta{flex:1 1 220px}
.pv-acts2 > .act{flex:0 0 auto;min-height:var(--control-h)}
@container pvmain (max-width:1039px){.pv-cta-d{display:none}}
@container pvmain (min-width:1040px){.pv-cta-m{display:none}}
/* Средняя ширина (660–1039): карточка кампании на всю ширину столбиком
   растягивала герой; лентой — заголовок сверху, тариф и данные колонками
   в ряд — она вдвое ниже. */
@container pvmain (min-width:660px) and (max-width:1039px){
  .pv-camp{flex-direction:row;flex-wrap:wrap;align-items:center;
    column-gap:28px;row-gap:6px}
  .pv-chead,.pv-clead,.pv-cnote{flex:1 1 100%}
  .pv-crow{flex-direction:column;align-items:flex-start;gap:1px;padding:0}
  .pv-crow b{text-align:left}
}
/* Сводка кампании и строки площадок: публикация и синхронизация отдельно. */
.pv-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 12px;margin:0 0 10px;border:1px solid var(--b2);border-radius:var(--r-s);
  background:var(--s2);font-size:var(--fs-small)}
.pv-sum .l,.pv-sum .r{display:flex;flex-direction:column;gap:1px;min-width:0}
.pv-sum .r{text-align:right}
.pv-sum b{font-size:var(--fs-label)}
.pv-sum span{color:var(--t3)}
.pv-sum .ok{color:var(--ok)} .pv-sum .warn{color:var(--warn)}
/* Колонки общие на весь блок (subgrid): у каждой строки своя сетка давала
   разные ширины — колонка действия «auto» пуста у ожидающих площадок и
   широка у показываемой, и статусы соседних строк разъезжались
   (жалоба владельца 07.09.2026). */
.pv-plats{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 1fr auto;column-gap:10px;
  border:1px solid var(--b2);border-radius:var(--r-s);overflow:hidden}
.pv-prow{display:grid;grid-column:1/-1;grid-template-columns:subgrid;column-gap:10px;row-gap:10px;
  align-items:center;padding:11px 13px;border-bottom:1px solid var(--b1)}
.pv-prow:last-child{border-bottom:0}
.pv-prow .txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.pv-prow .txt b{font-size:var(--fs-label);overflow-wrap:anywhere}
.pv-prow .txt span{font-size:var(--fs-caption);color:var(--t3)}
.pv-prow .cell{display:flex;flex-direction:column;gap:1px;min-width:0}
.pv-prow .cell b{font-size:var(--fs-small);font-weight:600}
.pv-prow .cell b.ok{color:var(--ok)} .pv-prow .cell b.warn{color:var(--warn)}
.pv-prow .cell b.err{color:var(--err)} .pv-prow .cell b.mut{color:var(--t2)}
.pv-prow .cell .d{font-size:var(--fs-caption);color:var(--t3)}
.pv-prow .pact{text-align:right}
/* Узкий экран: домен со ссылкой в первой строке, статусы — строками ниже,
   каждый на всю ширину: колонка auto иначе раздувается от длинных подписей. */
@media (max-width:559px){
  .pv-plats{grid-template-columns:minmax(0,1fr) auto}
  .pv-prow{row-gap:6px}
  .pv-prow .txt{grid-column:1}
  .pv-prow .pact{grid-column:2;grid-row:1}
  .pv-prow .cell{grid-column:1/-1;flex-direction:row;align-items:baseline;
    gap:7px;flex-wrap:wrap}
  /* Телефонная плотность: «Открыть на сайте» сжимается до знака внешней
     ссылки с полным тач-таргетом, второй вход в настройки размещения
     прячется — туда же ведёт главная кнопка страницы. */
  .pv-prow .pact .otxt{display:none}
  .pv-prow .pact .olink{justify-content:center;min-width:44px;min-height:44px}
  .pv-prow .pact .olink svg{width:17px;height:17px}
  .pv-setlink{display:none}
  .ebanner .bx{display:none}
}
/* Шапка страниц анкеты — одна на обзор, фото, анкету, проверку,
   размещение и статистику (neon_page_head / neon_profile_page_head):
   кнопка «назад» (.pv-ctx-back, ui.css), подпись раздела, имя с
   возрастом, строка происхождения, справа — действия. Полоса разделов
   .ptabs идёт следом, содержимое страницы — под ней. */
.pv-head{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0;margin:0 0 16px}
.pv-head-l{display:flex;align-items:center;gap:14px;min-width:0}
.pv-head-t{min-width:0}
.pv-kicker{display:block;margin:0 0 2px;color:var(--t3);font-size:var(--fs-small);font-weight:500;line-height:1.3}
.pv-head h1{margin:0;color:var(--t1);font-size:var(--fs-title);font-weight:700;line-height:1.15;letter-spacing:-.02em;
  overflow-wrap:anywhere;white-space:normal;text-wrap:pretty}
.pv-head h1 span{color:var(--t2);font-weight:600}
.pv-meta{margin:4px 0 0;color:var(--t3);font-size:var(--fs-small);line-height:1.35;overflow-wrap:anywhere}
.pv-head-acts{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.pv-head-primary,.pv-head-primary form{margin:0}
.pv-head-acts .act{width:auto;min-width:150px;min-height:var(--control-h);padding:0 18px;display:inline-flex;flex-direction:row;
  align-items:center;justify-content:center;gap:8px;border-radius:var(--r-s);box-shadow:none;
  font-size:var(--fs-body);font-weight:600;white-space:nowrap}
.pv-head-acts .pv-head-edit{min-width:0}
@media (max-width:759px){
  .pv-head{align-items:flex-start}
  .pv-head-acts .act{min-width:40px}
  .pv-head-edit span{display:none}
}
/* Телефон: заголовок и главное действие друг под другом, во всю ширину. */
@media (max-width:559px){
  .pv-head{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:12px}
  .pv-head-l{align-items:flex-start}
  .pv-head .pv-ctx-back{margin-top:1px}
  .pv-head h1{font-size:24px}
  .pv-head-acts{justify-content:stretch}
  .pv-head-primary{min-width:0;flex:1 1 auto}
  .pv-head-primary form,.pv-head-primary .act{width:100%}
  .pv-head-acts .act{min-height:44px}
  .pv-head-acts .pv-head-edit{width:44px;min-width:44px;padding:0;flex:0 0 44px}
}
@media (max-width:359px){
  .pv-meta{font-size:var(--fs-caption)}
  .pv-head-acts .act{padding-inline:10px;font-size:var(--fs-small)}
}
.pv-prow .txt{flex-direction:row;align-items:center;gap:10px}
.pv-prow .tcol{display:flex;flex-direction:column;gap:1px;min-width:0}
/* Основание показа в строке площадки; бейдж «Бесплатно» — библиотечный .bfree. */
.pv-basis{margin-top:2px}
/* Описание внутри «Данных анкеты» — отделено линией, с меткой. */
.pv-desc{border-top:1px solid var(--b1);margin-top:12px;padding-top:10px}
.pv-desc .k{display:block;font-size:var(--fs-caption);color:var(--t3);margin-bottom:3px}
/* Свёрнутая секция обзора: строка-сводка, разворот на месте. */
.pv-fold summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;min-height:40px}
.pv-fold summary::-webkit-details-marker{display:none}
.pv-fold summary h2{margin:0;font-size:var(--fs-body)}
.pv-fold .pv-fold-hint{margin-left:auto;font-size:var(--fs-small);color:var(--brand-text)}
.pv-fold .pv-fold-hint::after{content:'показать'}
.pv-fold[open] .pv-fold-hint::after{content:'скрыть'}
/* Иконка телефона слева от номера. */
.pv-ph-i{display:inline-flex;color:var(--t3);flex:0 0 auto}
/* Дополнительные действия: тихие ссылки в линию с заголовком. */
.pv-extra{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pv-extra h2{margin:0;font-size:var(--fs-body);flex:1 1 auto}
.pv-exrow{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.pv-exsep{width:1px;align-self:stretch;background:var(--b2)}
.pv-exrow form{margin:0}
.pv-ex{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:var(--t2);font-size:var(--fs-small);min-height:36px}
.pv-ex:hover{color:var(--t1)}
.pv-danger{color:var(--err)}
.pv-danger:hover{color:var(--err)}
/* Скрытый живой текст для читалок экрана (подтверждение копирования). */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.hlink{display:inline-flex;align-items:center;min-height:32px;
  font-size:var(--fs-small);color:var(--brand-text);text-decoration:none}
/* Круглая «+» по центру, без подписи — что она делает, видно по ней самой. */
.tabbar .tb-add{justify-content:center}
.tabbar .tb-add svg{width:44px;height:44px;padding:11px;border-radius:50%;
  background:var(--action);color:var(--action-text);stroke:var(--action-text);box-shadow:var(--brand-glow);
  margin-top:-16px}

.stat-t th a{color:var(--t1);text-decoration:none}
.stat-t th a:hover{color:var(--brand-text)}
.stat-t td{white-space:nowrap}
/* Имя площадки в таблице — со значком: колонка узкая, домены длинные,
   и значок опознаётся раньше, чем строка дочитывается до конца. */
.thsite{display:inline-flex;align-items:center;gap:8px;min-width:0}

/* Поддержка: узкая ровная колонка — кнопка, разделитель и форма одной
   ширины; на широком экране колонка по центру. */
.supwrap{width:min(100%,640px);margin-inline:auto}
/* Разделитель «или …» — как между способами входа при регистрации */
.ordiv{display:flex;align-items:center;gap:12px;margin:14px 0;
  font-size:var(--fs-caption);color:var(--t3)}
.ordiv::before,.ordiv::after{content:'';flex:1;height:1px;background:var(--b1)}

.tkt{display:flex;flex-direction:column;gap:6px;padding:13px 14px;margin-bottom:10px;
  border:1px solid var(--b1);border-radius:var(--r-m);background:var(--s1);
  text-decoration:none;color:var(--t1)}
.tkt:hover{border-color:var(--b3)}
.thread{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.msg{max-width:86%;padding:10px 13px;border-radius:var(--r-m);background:var(--s2);
  border:1px solid var(--b1);align-self:flex-start}
.msg.mine{align-self:flex-end;background:var(--brand-soft);border-color:var(--brand)}
.msg .who{display:block;font-size:var(--fs-caption);color:var(--t3);margin-bottom:3px}
.msg p{margin:0;font-size:var(--fs-label);line-height:1.55;overflow-wrap:anywhere;word-break:break-word}
.adrow-top{display:flex;align-items:center;gap:9px}
.adrow-top .q{margin-left:auto}
.ad-text{margin:0;font-size:var(--fs-label);line-height:1.6;overflow-wrap:anywhere;word-break:break-word}
.adrow-acts{display:flex;gap:8px;margin-top:10px}
.danger-act{color:var(--err)}
.backrow{display:inline-flex;align-items:center;gap:5px;margin:0 0 10px;min-height:36px;
  font-size:var(--fs-small);font-weight:500;color:var(--t2);text-decoration:none;
  padding:7px 12px 7px 8px;border-radius:999px;background:var(--s2);border:1px solid var(--b1)}
.backrow:hover{color:var(--t1);border-color:var(--b3)}
/* minmax(0,…), а не 1fr: иначе минимум колонки — min-content таблицы цен,
   и на 320 она распирала страницу вместо прокрутки внутри своей обёртки. */
.pv-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:860px){
  .pv-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}
.pv-cols .fset{margin:0}
.pv-top{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 11px}
.pv-top span{padding:7px 13px;border-radius:var(--r-s);background:var(--s3);
  font-size:var(--fs-label);font-weight:600;color:var(--t1)}
.pv-place div{padding:5px 0}.pv-place .v{overflow-wrap:anywhere;word-break:break-word}
.pv-trip{margin:10px 0 0;font-size:var(--fs-small);overflow-wrap:anywhere;word-break:break-word}
.pv-trip b{color:var(--t2);font-weight:500}
.pv-svc{columns:1;column-gap:28px}
@media (min-width:640px){.pv-svc{columns:2}}
@media (min-width:1020px){.pv-svc{columns:3}}
.pv-svc-g{break-inside:avoid;margin-bottom:13px}
.pv-svc-g > b{display:block;font-size:var(--fs-caption);letter-spacing:.05em;text-transform:uppercase;
  color:var(--t3);margin-bottom:6px}
.pv-svc-g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pv-svc-g li{display:flex;align-items:flex-start;gap:7px;font-size:var(--fs-label)}
.pv-svc-g li i{font-style:normal;color:var(--ok);display:inline-flex;flex:0 0 auto;margin-top:3px}
.pv-svc-g li em{font-style:normal;color:var(--t3);font-size:var(--fs-caption);margin-left:auto;text-align:right}
.pv-about{margin:0;font-size:var(--fs-label);line-height:1.65;overflow-wrap:anywhere;word-break:break-word}
/* Свёрнутое описание: шесть строк, дальше — «Показать полностью». */
.pv-about.clip{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.pv-more{display:inline-flex;align-items:center;min-height:36px;margin-top:2px;
  font-size:var(--fs-small);color:var(--brand-text);text-decoration:none}
.pv-more:hover{text-decoration:underline}

/* Компактный виджет размещения */
.pmode{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--b2);
  border-radius:var(--r-m);cursor:pointer;background:var(--s2)}
.pmode>input{width:16px;height:16px}
.pmode .txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.pmode .txt b{font-size:var(--fs-label)}
.pmode .pr{display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap}
.pmode .pr b{font-size:var(--fs-label)}
.pmode .pr .was{font-size:var(--fs-caption);color:var(--t3)}
.pmode:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
@keyframes hintin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.trow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tcard{position:relative;display:flex;flex-direction:column;gap:3px;padding:11px 12px;
  border:1px solid var(--b2);border-radius:var(--r-s);background:var(--s2);cursor:pointer}
.tcard input{position:absolute;opacity:0;pointer-events:none}
.tcard b{font-size:var(--fs-label);display:flex;align-items:center;gap:8px}
.tcard i{font-style:normal;font-size:15px;font-weight:700;color:var(--t1);margin-top:auto;
  padding-top:8px}
.tcard span{font-size:var(--fs-caption);color:var(--t3);line-height:1.45}
.tcard:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
@media (max-width:639px){
  .tcard span{padding-right:0}
}
/* ---------- страница заказа размещения (/placement) ----------
   Экран оплаты: поверхности светлее фона, выбранное — рамка и очень
   светлая заливка акцентом, свечения нет. Сетка — 4/8. */
.pgrid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);align-items:start}
/* Вторая колонка появляется, когда для неё есть место рядом с сайдбаром:
   до 1100px форма во всю ширину (иначе она уже телефонной), а итог живёт
   внизу и в липкой панели. */
@media (min-width:1100px){
  .pgrid{grid-template-columns:minmax(0,1fr) 300px;gap:20px}
  .ordbox{position:sticky;top:16px}
}
@media (min-width:1280px){.pgrid{grid-template-columns:minmax(0,1fr) 320px;gap:24px}}
/* Колонка формы — контейнер: карточки внутри считают ширину по ней, а не
   по экрану. На 1280 с сайдбаром и карточкой заказа места ровно столько же,
   сколько на планшете, — и вести себя они должны одинаково. */
.pcol{min-width:0;display:flex;flex-direction:column;gap:28px;container-type:inline-size}
/* Шаги — настоящие fieldset ради доступности, но без рамки браузера. */
.pstep{min-width:0;border:0;margin:0;padding:0}
/* Шапка шага — заголовок и подпись под ним, если она есть; до контента
   всегда 16px. Отступ живёт на шапке, а не на заголовке: у «1. Тип
   размещения» подписи нет, и заголовок отдавал карточкам свои 12px, тогда
   как соседние шаги держали втрое больший зазор — тариф читался
   приклеенным к заголовку (жалоба владельца 07.09.2026). Шаг выбран
   скромный: у шагов с подписью расстояния не меняются вовсе, прибавка
   приходит только туда, где липло. */
.pstep > legend{padding:0;display:block;width:100%;margin:0 0 var(--space-4)}
.pstep > legend:has(+ .steplead:not([hidden])){margin-bottom:var(--space-3)}
.pstep h2{font-size:var(--fs-body);font-weight:700;margin:0}
/* Подпись шага держится заголовка (12px) и отдаёт контенту тот же шаг
   сетки: отрицательный отступ прижимал её к заголовку, и на скриншотах
   владельца пара читалась как слипшаяся (06.09.2026). */
.pstep .steplead{margin:0 0 var(--space-4);font-size:var(--fs-caption);color:var(--t3);line-height:1.45}
.pstep .steplead + .steplead{margin-top:-10px}
.pmodes.duo{display:grid;grid-template-columns:1fr;gap:10px}
@container (min-width:620px){
  .pmodes.duo{grid-template-columns:1fr 1fr}
}
.pgrid .pmode{background:var(--s1);padding:14px;gap:12px;border-radius:var(--r-m);flex-wrap:wrap}
.pgrid .pmode:has(input:checked){background:color-mix(in srgb,var(--brand) var(--sel-mix),var(--s1))}
.pgrid .pmode:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.pgrid .pmode .txt b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Узкая колонка: цена уходит на свою строку, а не давит название. */
.pgrid .pmode{align-items:flex-start}
.pgrid .pmode > input{margin-top:2px}
.pgrid .pmode .txt{flex:1 1 calc(100% - 28px)}
.pgrid .pmode .pr{flex:1 1 100%;flex-direction:column;align-items:flex-start;gap:2px;
  padding-left:28px;white-space:normal}
.pgrid .pmode .pr b{font-size:var(--fs-label)}
.pgrid .pmode .pr .was{font-size:var(--fs-caption);color:var(--t3);line-height:1.35}
@container (min-width:1000px){
  .pgrid .pmode{align-items:center}
  .pgrid .pmode .txt{flex:1 1 auto}
  .pgrid .pmode .pr{flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:1px;
    padding-left:0;text-align:right;white-space:nowrap}
}
.note.info{border-color:color-mix(in srgb,var(--info) 40%,var(--b1));
  background:color-mix(in srgb,var(--info) 6%,var(--s1));color:var(--t1)}
.note.warn{border-color:color-mix(in srgb,var(--warn) 50%,var(--b1));
  background:var(--warn-soft);color:var(--t1)}
.note.slim{margin:8px 0 0}
.ord-hint{margin:0 0 4px;font-size:var(--fs-small);color:var(--t3);line-height:1.45}
.ord-hint[hidden],.note.info[hidden]{display:none}
/* Строка выбранных анкет: ссылка-кнопка с настоящей областью нажатия. */
.pick-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.pick-line b{font-size:var(--fs-label);color:var(--t1);font-weight:600}
.pick-line .linklike{color:var(--brand-text);text-decoration:none;font-weight:600;
  min-height:36px;display:inline-flex;align-items:center;padding:0 4px}
.slist{margin-top:10px;display:flex;flex-direction:column;border:1px solid var(--b1);
  border-radius:var(--r-m);overflow:hidden;background:var(--s1)}
.slist[hidden]{display:none}
.srow{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;min-height:46px}
.srow + .srow,.sdet + .srow,.srow + .sdet{border-top:1px solid var(--b1)}
.srow .txt{display:flex;align-items:center;gap:8px;min-width:0;flex:1;flex-wrap:wrap}
.srow .txt b{font-size:var(--fs-label);font-weight:600;word-break:break-word}
.srow .pr{font-size:var(--fs-small);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.srow:hover{background:var(--s2)}
.srow:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}
/* Телеграм не выбирается руками — вместо выключенного флажка иконка. */
.tgrow{cursor:default;background:var(--s2)}
.tgrow:hover{background:var(--s2)}
.tgspace{width:15px;flex:0 0 auto}
.sfav.tgico{color:#fff;background:var(--telegram);border-color:transparent}
.sbdg{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:99px;
  background:var(--s3);color:var(--t2);white-space:nowrap;cursor:pointer;border:0;font-family:inherit}
.sbdg.mut{color:var(--t3);cursor:default;font-weight:600}
.sbdg[hidden]{display:none}
.sdet{padding:0 14px 10px 41px;background:var(--s2)}
.sdet[hidden]{display:none}
.sdet p{margin:8px 0 0;font-size:var(--fs-caption);color:var(--t2);line-height:1.4}
.sdet p b{display:block;color:var(--t1);font-weight:600;font-size:var(--fs-small)}
.pw-up{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;padding:12px 14px;
  border-radius:var(--r-m);border:1px solid color-mix(in srgb,var(--ok) 40%,var(--b1));
  background:var(--ok-soft);font-size:var(--fs-small);line-height:1.45}
.pw-up[hidden]{display:none}
.pw-up .txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pw-up .txt b{font-size:var(--fs-small);color:var(--t1)}
.pw-up .act{margin-left:auto;box-shadow:none}
/* Тип размещения: на телефоне — одна колонка, описание услуги важнее
   экономии сотни пикселей. */
.pgrid .trow{grid-template-columns:1fr;gap:10px}
@container (min-width:440px){.pgrid .trow{grid-template-columns:1fr 1fr}}
.pgrid .tcard{background:var(--s1);padding:14px 16px;border-radius:var(--r-m);gap:4px}
/* Выбор везде выглядит одинаково. Карточка прячет родную радиокнопку и
   рисует точку сама, поэтому точка повторяет её один в один: тот же размер,
   та же рамка, при выборе — заливка брендом с белым зрачком, при наведении
   бренд в рамке (см. input[type=radio] в ui.css). Раньше выбранная точка
   была кольцом, и рядом с флажками площадок это читалось как другой
   контрол (слово владельца 10.09.2026). */
.rmark{display:inline-flex;width:16px;height:16px;flex-shrink:0;border-radius:50%;
  border:1.5px solid var(--control-border);background:var(--s1);margin-right:9px;
  position:relative;top:2px;transition:border-color .12s ease,background-color .12s ease}
label:hover > b > .rmark{border-color:var(--brand)}
label:has(input:checked) > b > .rmark{border-color:var(--brand);background:var(--brand)}
label:has(input:checked) > b > .rmark::after{content:'';position:absolute;inset:3px;
  border-radius:50%;background:#fff}
label:has(input:disabled) > b > .rmark,label:has(input:disabled):hover > b > .rmark{
  border-color:var(--control-border);opacity:.45}
.tcard b,.dcard b{align-items:flex-start}
.punit{font-size:var(--fs-caption);color:var(--t3);line-height:1.4}
.pgrid .tcard:has(input:checked){background:color-mix(in srgb,var(--brand) var(--sel-mix),var(--s1))}
/* Наведение подсвечивает карточку так же, как строку площадки: до сих пор
   тариф отзывался только на выбор, и рядом со списком площадок выглядел
   неживым. Выбранную и недоступную не трогаем. */
.pgrid .tcard:hover:not(:has(input:checked)):not(:has(input:disabled)){background:var(--s2)}
/* Недоступный тариф говорит курсором, что выбрать его нельзя. */
.pgrid .tcard:has(input:disabled){cursor:not-allowed}
.pgrid .tcard:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.tinfo{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;border:1px solid var(--b3);background:none;padding:0;font:inherit;
  color:var(--t3);font-size:var(--fs-caption);font-weight:700;
  cursor:help;position:relative;flex-shrink:0;line-height:1}
.tinfo::before{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
.tinfo:hover{border-color:var(--brand);color:var(--brand-text)}
.tinfo:focus-visible{border-color:var(--focus);color:var(--t1);outline:2px solid var(--focus);outline-offset:2px}
/* На телефоне пузырь, привязанный к кружку, наполовину уезжал за левый край
   экрана: кружок стоит близко к нему, а подсказка центруется по нему же.
   Вешаем её на карточку целиком, а кружку добавляем размера — подложка
   на 44 px тогда не нужна. */
@media (max-width:639px){
  .tinfo{position:static;width:44px;height:44px;border:0;font-size:var(--fs-caption);
    background:radial-gradient(circle,transparent 0 10px,currentColor 10px 11px,transparent 11px)}
  .tinfo::before{content:none}
  .tinfo::after{left:0;right:0;width:auto;max-width:none;transform:none}
}
.drow{display:grid;grid-template-columns:1fr;gap:10px}
@container (min-width:560px){.drow{grid-template-columns:repeat(3,1fr)}}
.dcard{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 16px;
  border:1px solid var(--b2);border-radius:var(--r-m);background:var(--s1);cursor:pointer}
.dcard input{position:absolute;opacity:0;pointer-events:none}
.dcard b{font-size:var(--fs-label);display:flex;align-items:center;gap:8px}
.dcard .q{font-size:var(--fs-caption)}
.dlines{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.dl{font-size:var(--fs-small);color:var(--t2);line-height:1.4}
.dl b{font-size:var(--fs-body);font-weight:700;color:var(--t1)}
.dl s{color:var(--t3);margin-right:4px}
.dl.dcredit{color:var(--ok)}
.dl.dnote{font-size:var(--fs-caption);color:var(--t3)}
.tocredit{margin:8px 0 0;font-size:var(--fs-caption);color:var(--t2);line-height:1.4}
/* Детали площадки: продление занимает две строки, вторая — итог. */
.sdet p{white-space:pre-line}
/* Область нажатия флажков и радио — не меньше 44px по вертикали. */
.srow,.mrow{min-height:44px}
.chk.bare input{width:18px;height:18px}
.tcard,.dcard,.pmode{position:relative}
.pgrid .pmode .pr .punit{display:block;font-size:var(--fs-caption);color:var(--t3);font-weight:400}
.dcard:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) var(--sel-mix),var(--s1))}
.dcard:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.ocard{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r-m);padding:18px}
@media (min-width:900px){.ocard{box-shadow:var(--shadow-raised)}}
.ocard h2{font-size:var(--fs-body);font-weight:700;margin:0 0 12px}
.ocard .act{box-shadow:0 6px 18px rgba(200,35,90,.18)}
.ocard .act:disabled{background:var(--s3);color:var(--t3);opacity:1;box-shadow:none}
.ocard .act:disabled:hover{background:var(--s3)}
.ocard .act:hover{box-shadow:0 6px 18px rgba(200,35,90,.24)}
.ocard .act.ghost{box-shadow:none}
.orow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:var(--fs-small);color:var(--t2);padding:4px 0}
.orow[hidden]{display:none}
/* Число не переносится никогда: «$45,0 / 0» — не сумма. Переносится
   подпись, места ей хватает. */
.orow{align-items:flex-start}
.orow span{min-width:0;line-height:1.35}
.orow b{color:var(--t1);font-weight:600;text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap;flex-shrink:0}
.orow.ocredit b,.orow b.ok{color:var(--ok)}
.orow b.bad{color:var(--err)}
.osep{border-top:1px solid var(--b1);margin:10px 0}
.ototal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 0 8px}
/* display:flex перебивает атрибут hidden — возвращаем ему силу. */
.ototal[hidden]{display:none}
.ototal span{font-size:var(--fs-small);color:var(--t2)}
.ototal b{font-size:20px;font-variant-numeric:tabular-nums}
.onote{margin:10px 0 0;font-size:var(--fs-caption);line-height:1.45}
.ocard .act[hidden],.ocard .onote[hidden]{display:none}
.pauto{margin-top:16px}
/* Автопродление — условие будущих списаний, поэтому отдельным блоком,
   а не мелкой строкой под кнопкой. */
.arenew{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:12px;
  padding:12px 14px;border:1px solid var(--b2);border-radius:var(--r-m);background:var(--s1)}
.arenew .txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.arenew .txt b{font-size:var(--fs-label)}
.arenew .linklike{color:var(--brand-text);font-weight:600;min-height:36px;
  display:inline-flex;align-items:center}
.arenew-box{flex:1 1 100%;display:flex;flex-direction:column;gap:8px;margin-top:4px;
  padding-top:10px;border-top:1px solid var(--b1)}
.arenew-box[hidden]{display:none}
/* Специфичность выше правила .chk:has(input:checked): внутри настройки это
   строки с флажком, а не крупные плашки-переключатели. */
.arenew-box .chk,.arenew-box .chk:has(input:checked){border:0;padding:0;background:none;
  align-items:flex-start;font-weight:400}
.arenew-box .chk span{font-size:var(--fs-small);color:var(--t2);line-height:1.4}
/* Свёрнутый выбор площадок и кнопка «Готово» — только на узких экранах:
   на широком список короткий и прятать его незачем. */
/* Селектор с родителем: у кнопки есть и .act.slim, чей display иначе
   перебивал бы прятанье, и «Готово» висело на широком экране второй
   главной кнопкой (замечено 19.09.2026). */
.slist .sdone{display:none;margin:10px 14px 14px;width:calc(100% - 28px);justify-content:center}
.slist .sdone[hidden]{display:none}
.sfold{display:none;align-items:center;gap:10px;width:100%;margin-top:10px;padding:12px 14px;
  border:1px solid var(--b2);border-radius:var(--r-m);background:var(--s1);cursor:pointer;
  font:inherit;color:var(--t1);text-align:left;min-height:48px}
.sfold[hidden]{display:none}
.sfold .ok{display:inline-flex;width:20px;height:20px;flex-shrink:0;align-items:center;
  justify-content:center;border-radius:50%;background:var(--ok-soft);color:var(--ok);
  font-weight:700}
.sfold .ok svg{display:block}
.sfold .txt{flex:1;min-width:0;font-size:var(--fs-label);font-weight:600}
.sfold .edit{color:var(--brand-text);font-size:var(--fs-small);font-weight:600;flex-shrink:0}
@media (max-width:899px){
  .slist .sdone:not([hidden]){display:flex}
  .sfold:not([hidden]){display:flex}
}
/* Шаг ждёт предыдущих ответов: виден, но не притворяется рабочим. */
.pstep.locked .drow,.pstep.locked .pmodes,.pstep.locked .slist{opacity:.45;pointer-events:none}
.pstep.locked .steplead{color:var(--t3)}
/* Подпись под ценой пакета — две строки, и до выбора типа её слот пуст.
   Пока карточки стоят рядом, держим её высоту заранее: иначе ответ на
   первый вопрос сдвигал вниз второй и третий шаги прямо под курсором.
   В одну колонку резерв не нужен — там шаги не видны одновременно, а
   пустой хвост карточки был бы заметен. */
@container (min-width:620px){
  .pstep.locked .pmode .was{min-height:2.7em}
}
.note.warn .linklike{color:var(--brand-text);font-weight:600}
/* Мобильная строка мастера вместо четырёх обрезанных подписей. */
.steps-m{display:none;margin:0 0 14px;font-size:var(--fs-small);color:var(--t3);
  align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.steps-m b{color:var(--t1);font-weight:600}
.steps-m a{display:inline-flex;align-items:center;min-height:44px;padding:8px 11px;margin:-8px -8px -8px 0;
  color:var(--brand-text);font-weight:600;border-radius:var(--r-s)}
.steps-m a:hover{background:var(--brand-soft)}
@media (max-width:559px){
  .steps-m{display:flex}
  .steps{display:none}
}
.mrows{display:flex;flex-direction:column;border:1px solid var(--b1);border-radius:var(--r-s);
  max-height:52vh;overflow-y:auto}
.mrows .mrow{cursor:pointer}
.mbox .mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mclose{border:0;background:none;color:var(--t3);line-height:1;cursor:pointer;
  width:36px;height:36px;margin:-8px -8px 0 0;border-radius:var(--r-s);flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center}
.mclose svg{display:block}
.mclose:hover{background:var(--s2);color:var(--t1)}
/* Модалка пополнения: закреплённые шапка и подвал, скролл в середине —
   главная кнопка доступна всегда, в том числе с открытой клавиатурой. */
/* Селектор длиннее .mbox: иначе его overflow-y:auto прокручивает лист
   целиком и уносит подвал за экран. Прокручиваться должна только середина. */
.modal .paysheet{display:flex;flex-direction:column;max-height:min(88vh,100dvh);
  overflow:hidden;padding:0}
.paysheet .mhead{padding:18px 18px 10px;margin:0;border-bottom:1px solid var(--b1)}
.paysheet .mhead h2{margin:0 0 4px}
/* Под подвалом остаётся воздух: последние поля должны докручиваться
   выше кнопки, в том числе с открытой клавиатурой. */
/* Подвал — сосед в колонке, он и так держит своё место; середине нужен
   лишь воздух в конце прокрутки и запас под клавиатуру. */
.paysheet .mbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:12px 18px 24px;scroll-padding-bottom:24px}
/* Диалог получает фокус первым — но без декоративной рамки. */
.paysheet:focus{outline:none}
.paywarn{color:var(--warn);margin:8px 0 0;font-size:var(--fs-caption);line-height:1.4}
.payok{color:var(--ok);margin:8px 0 0;font-size:var(--fs-caption);line-height:1.4}
.paysheet .mfoot{display:flex;flex-direction:column;gap:8px;padding:12px 18px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--b1);
  background:var(--s1)}
.paysheet .mfoot .act{width:100%}
/* Своя кнопка виджета не нужна: её роль исполняет кнопка подвала. */
.paysheet .dsg-payment-selector .dsg-payment-submit{display:none!important}
.paysheet .dsg-payment-selector .dsg-payment-form{grid-template-columns:1fr!important;
  padding-bottom:24px!important}
.plabel{margin:4px 0 8px;font-size:var(--fs-caption);font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--t3)}

/* Пресеты пополнения: срок и сколько под него внести. */
/* Одна колонка и в модалке, и на телефоне: три строки по два уровня текста
   в две колонки складываются рвано (2 + 1). */
.tpresets{display:grid;gap:8px;margin:12px 0 8px}
.tchip{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:11px 13px;
  border:1px solid var(--b2);border-radius:var(--r-m);background:var(--s1);cursor:pointer;
  font:inherit;color:var(--t1);text-align:left;min-height:52px}
.tchip b{font-size:var(--fs-label);font-weight:600;display:flex;align-items:flex-start}
.tchip .rmark{margin-right:8px}
.tchip.on .rmark{border-color:var(--brand);border-width:5px}
.tchip span{font-size:var(--fs-caption);color:var(--t3);line-height:1.35}
.tchip.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) var(--sel-mix),var(--s1))}
.tchip:hover{border-color:var(--b3)}
#ord-pay-note{font-size:var(--fs-caption);color:var(--t3);line-height:1.45;margin:0 0 4px}
#ord-pay-note[hidden]{display:none}
.mbox .onote{font-size:var(--fs-caption);color:var(--t3);line-height:1.45;margin:10px 0 0}
/* Виджет платёжного хаба внутри модалки: своя рамка и заголовок ему тут
   не нужны — они уже есть у модалки. */
.tpay{margin-top:10px}
/* Виджет хаба покрашен своими переменными — перекладываем их на токены
   «Неона», иначе в модалке живёт бирюзовая кнопка из чужого кабинета. */
.tpay .dsg-payment-selector{margin:0;max-width:none;
  --dsg-pay-teal:var(--brand);--dsg-pay-ink:var(--t1);--dsg-pay-muted:var(--t3);
  --dsg-pay-line:var(--b2);--dsg-pay-soft:var(--s2)}
.tpay .dsg-payment-intro{display:none}
.tpay .dsg-payment-card{padding:0;border:0;background:none;box-shadow:none}
.tpay .dsg-payment-form{padding-bottom:6px!important;gap:14px!important}
/* Стили виджета инлайнятся после нашей таблицы, поэтому перебиваем их
   селектором на класс длиннее: иначе в тёмной теме белое поле с белым
   текстом. */
.tpay .dsg-payment-selector .dsg-payment-control{background-color:var(--s2)!important;
  color:var(--t1)!important;border-color:var(--b2)!important;border-radius:var(--r-s)!important;
  font-family:var(--font)!important}
.tpay .dsg-payment-selector .dsg-payment-form label span{color:var(--t3)!important;
  font-weight:600!important}
/* Строка «К оплате» стоит абсолютом под полем — оставляем ей место.
   Специфичность выше правил виджета, иначе кнопка накрывает строку. */
/* Отступа под строку «К оплате» здесь нет намеренно. Место под неё держит
   padding-bottom самой формы (общий виджет), а margin на подписи при
   align-items:end поднимал бы поле суммы над селектом — ровно на свою
   величину. Именно так поле и разъезжалось с выбором способа. */
.tpay .dsg-payment-total{font-family:var(--font)!important;
  color:var(--brand-text)!important}
.tpay .dsg-payment-selector .dsg-payment-submit{background:var(--action)!important;
  border-radius:var(--r-s)!important;font-family:var(--font)!important;
  font-weight:600!important}
.tpay .dsg-payment-selector .dsg-payment-submit:hover{background:var(--action-hover)!important}

/* Липкая панель заказа: заменяет вкладки на время оплаты. */
.paybar{position:fixed;left:0;right:0;bottom:0;z-index:22;display:flex;align-items:center;
  gap:12px;padding:10px calc(16px + env(safe-area-inset-right))
  calc(10px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));background:var(--s1);
  border-top:1px solid var(--b1);box-shadow:0 -4px 16px rgba(0,0,0,.07)}
.paybar .sum{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.paybar .sum span{font-size:var(--fs-caption);color:var(--t3)}
.paybar .sum b{font-size:19px;font-variant-numeric:tabular-nums}
.paybar .sum i{font-style:normal;font-size:var(--fs-caption);color:var(--t3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.paybar .act{width:auto;min-width:150px;max-width:58%;box-shadow:none;padding:9px 16px}
.paybar[hidden]{display:none}
/* На промежуточной ширине панель начинается после компактной рейки. */
@media (min-width:900px) and (max-width:1099px){
  .paybar{left:calc(72px + env(safe-area-inset-left));padding-left:16px}
}
/* Панель нужна ровно там, где карточка заказа не стоит рядом с формой. */
@media (min-width:1100px){.paybar{display:none}}
body.checkout .body{padding-bottom:var(--paybar-space)}
@media (min-width:1100px){body.checkout .body{padding-bottom:0}}

.map-teaser{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 12px;border:1px dashed var(--b2);border-radius:var(--r-s);background:var(--s2)}
.mbox-map{max-width:680px;width:100%}
#map-container{height:56vh;min-height:300px;border-radius:var(--r-s);overflow:hidden;background:var(--s3)}
.linklike.danger{color:var(--err);text-decoration:none}
.kmenu .delform{display:block;padding:8px 12px}
.kmenu .delform .linklike{width:100%;text-align:left}
.vdrop-mini{padding:18px}
.fset > p.q:last-child{margin:11px 0 0}
.guide{border:1px solid var(--b1);border-radius:var(--r-s);padding:12px 13px;margin-bottom:11px;
  background:var(--s2)}
.guide > b{display:block;font-size:var(--fs-small);font-weight:600;margin-bottom:7px;color:var(--t1)}
.guide ol{margin:0;padding-left:19px}
.guide li{font-size:var(--fs-small);line-height:1.5;color:var(--t2)}
.guide li + li{margin-top:4px}
.guide span.q{display:block;margin-top:9px;font-size:var(--fs-caption);color:var(--t3);line-height:1.45}

/* переходы между шагами */
.wnav{display:flex;flex-direction:column-reverse;gap:9px;margin-top:16px}
@media (min-width:560px){.wnav{flex-direction:row;justify-content:flex-end}
  .wnav .act{width:auto;min-width:190px}
  .wnav .act.ghost{min-width:120px}}
/* В обязательном вопросе про почту DOM и визуальный порядок совпадают:
   сначала главное решение, затем смена адреса. */
.eack-actions{flex-direction:column}
@media (min-width:560px){.eack-actions{flex-direction:row}}
.wnote{margin:9px 0 0;font-size:var(--fs-caption);color:var(--t3);line-height:1.45;text-align:center}
@media (min-width:560px){.wnote{text-align:right}}

/* итог мастера */
.flow{margin:0;padding-left:19px}
.flow li{font-size:var(--fs-label);line-height:1.5;color:var(--t2)}
.flow li + li{margin-top:6px}
.flow b{color:var(--t1)}
.tiers{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}
@media (min-width:640px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tier{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r-m);padding:13px 14px;
  display:flex;flex-direction:column;gap:4px}
.tier b{font-size:var(--fs-caption);letter-spacing:.08em;color:var(--gold);font-weight:700}
.tier .lead{font-size:var(--fs-label);font-weight:600;color:var(--t1);line-height:1.35}
.tier .q{font-size:var(--fs-small);color:var(--t3);line-height:1.45}
@media (min-width:900px){}

/* Адрес в вопросе про почту: он здесь главный, его и читают. */
.eack-mail{margin:0;padding:10px 12px;border:1px solid var(--b2);border-radius:var(--r-m);
  background:var(--s2);font-weight:600;word-break:break-all}
/* Сводка об объединении: список найденных кабинетов и главная мысль под ним. */
.wel-list{margin:0 0 14px}
.wel-list .mrow{padding:11px 12px}
.wel-list .mrow:hover{background:none}
.wel-key{margin:0;padding:12px 13px;border-radius:var(--r-m);
  background:var(--brand-soft);border:1px solid var(--brand-soft);
  font-size:var(--fs-small);line-height:1.5;color:var(--t1)}
.wel-key a{color:var(--brand-text);font-weight:600}
.wel-mail{font-weight:700;overflow-wrap:break-word}

/* ---------- вход, регистрация, восстановление ---------- */
.auth{max-width:400px;margin:5vh auto 0;background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-l);padding:26px 22px 22px}
.auth h1{margin:0 0 4px}
.auth .sub{margin:0 0 18px}
.auth form{display:flex;flex-direction:column;gap:13px;margin-top:14px}
.alt{margin-top:18px;font-size:var(--fs-small);color:var(--t3);text-align:center;line-height:1.7}
.alt a{color:var(--brand-text);font-weight:600;text-decoration:none}
.alt a:hover{text-decoration:underline}
/* Регистрация — дверь для другого человека, и стоит она за чертой: иначе
   читается одним списком вместе с «забыли пароль» и «в поддержку». */
.altsep{border-top:1px solid var(--b1);padding-top:16px}
.auth .onote{color:var(--t4);margin-top:10px}
.auth .onote a{color:var(--t3);text-decoration:underline}
.auth .onote a:hover{color:var(--t1)}
.result-wrap{width:min(100%,560px);margin:clamp(8px,4vh,40px) auto 0;padding:clamp(20px,4vw,30px);
  background:var(--s1);border:1px solid var(--b1);border-radius:var(--r-l);box-shadow:var(--shadow-raised)}
.result-wrap.success{border-color:color-mix(in srgb,var(--ok) 52%,var(--b1));
  background:linear-gradient(180deg,var(--ok-soft),var(--s1) 42%)}
.result-wrap.fail{border-color:color-mix(in srgb,var(--err) 52%,var(--b1));
  background:linear-gradient(180deg,var(--err-soft),var(--s1) 42%)}
.result-wrap h1{margin-top:0}
.result-wrap > .sub{max-width:48ch}
.result-actions{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.result-actions .act{width:100%;min-height:var(--control-h)}
@media (min-width:560px){.result-actions{flex-direction:row;justify-content:flex-end}
  .result-actions .act{width:auto;min-width:170px}.result-actions .act:first-child{order:-1}}
/* ---------- настройки ----------
   Страница собрана из компонента .sg* (ui.css, раздел 15); здесь остался
   только отступ набора полей. */
@media (min-width:720px){.fset:not(.pform-fold){padding:18px}}
/* ---------- остатки системной полировки (страничное) ---------- */
.rmark{border-color:var(--control-border)}
.nsel-dd{box-shadow:var(--shadow-popover)}
.nsel-it.is-active{background:var(--s3);outline:2px solid var(--focus);outline-offset:-2px}
@media (max-width:559px){
  .svc-r .chk span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
  .paybar{flex-wrap:wrap}
  .paybar .sum{flex-basis:calc(42% - 6px)}
  .paybar .act{min-width:132px;flex:1}
}
@media (any-pointer:coarse){
  .mhead-r .hlink,.pv-fold .hlink,.pv-ex,.pv-autoform .linklike,.ok-note .linklike,.h2 a,.bmute{
    display:inline-flex;align-items:center;min-height:44px}
  .modal form > .linklike{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px}
  .ptabs a,.nsel-it,.srow,.pv-fold summary,.step a,.errlist a,.vfold > summary,.backrow,.pv-more{min-height:44px}
  .mchip button{position:relative}
  .mchip button::before{content:'';position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
}