/* PRIME PERSONA V3 — сайт.
   Визуальный язык (по референсу «умный дом»):
   · серый холст, белые карточки — слои отделяет РАЗНИЦА ФОНА, а не рамка;
   · обводок и теней нет вообще: слои держит ТОЛЬКО разница заливок (--sh и --sh2 = none,
     вернуть тень можно одним значением токена, компоненты трогать не надо);
   · крупные радиусы, много воздуха;
   · цвет точечный: одна лаймовая плашка и одна барвинковая на экран, остальное — чёрное и серое;
   · иконка = тонкий глиф в светлом кружке (.icw), не цветная плашка.
   Тема живёт ТОЛЬКО на токенах, компоненты про неё не знают. */
:root{
  --motib:#6d8cf7; --brandb:#e2fb4f;
  --edge:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  --sb:rgba(16,17,20,.17); --sbh:rgba(16,17,20,.3);
  --bg:#f2f2f2; --card:#ffffff; --tile:#f0f1f4; --tile2:#e6e8ec;
  --ink:#101114; --mut:#666d79; --hint:#5e6472;
  --acc:#2b5cff; --lime:#e2fb4f; --peri:#6d8cf7; --good:#17824f; --bad:#cf4444; --warn:#a97a10;
  --chip:#101114; --onchip:#fff; --inkblk:#14171d; --hcap:#2b5cff; --plusc:#b5560a;
  /* Округлость по форме из SVG заказчика: там радиус угла ≈75% от ширины блока.
     Буквально столько на реальной карточке съело бы весь контент, поэтому радиусы подняты
     до максимума, при котором углы ещё «читаются» как в макете: карточка 40, плитка 26. */
  --r:40px; --rs:26px; --rx:20px;
  --sh:none;
  --sh2:none;
  --font:'Onest',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
:root[data-theme="dark"]{
  --motib:#e2fb4f; --brandb:#8ea6ff;
  --edge:1px solid color-mix(in srgb,var(--ink) 9%,transparent);
  --sb:rgba(255,255,255,.16); --sbh:rgba(255,255,255,.28);
  --bg:#0b0b0b; --card:#141313; --tile:#1e1d1d; --tile2:#272626;
  --ink:#f0f2f6; --mut:#a7afbc; --hint:#828c9e;
  --acc:#5b81ff; --lime:#e2fb4f; --peri:#8ea6ff; --good:#39c184; --bad:#f06a6a; --warn:#e8b13c;
  --chip:#f0f2f6; --onchip:#101114; --inkblk:#050505; --hcap:#e2fb4f; --plusc:#e2fb4f;
  --sh:none;
  --sh2:none;
}
#app{overflow-x:clip}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
button,input,select,textarea{font:inherit;color:inherit;border:0;outline:0;background:none}
a{color:var(--acc)}
h1,h2,h3{margin:0;font-weight:600;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(28px,5vw,44px)}
h2{font-size:22px}
h3{font-size:17px}
p{margin:0 0 12px}
.mut{color:var(--mut)}
.hint{color:var(--hint);font-size:13px}
.wrap{max-width:1800px;margin:0 auto;padding:0 18px}

/* ---------- шапка: слева вкладки, по центру приветствие, справа кнопки ----------
   Статус («Психотип определён») — ОТДЕЛЬНАЯ плашка, а не бледная подпись внутри лайма:
   на лаймовом фоне светлый мелкий текст не читается. */
.hdr{position:sticky;top:0;z-index:40;background:transparent;padding:14px 0 8px;pointer-events:none}
.hdrin{max-width:1800px;margin:0 auto;padding:0 18px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:12px}
.hdr .hleft,.hdr .hcenter,.hdr .hright{pointer-events:auto}
.hleft{display:flex;min-width:0}
.hcenter{display:flex;justify-content:center;min-width:0}
.hright{display:flex;justify-content:flex-end}
/* Три капсулы шапки: вкладки · аватар+имя+статус · тема+выход.
   Каждая — полупрозрачная плашка с размытием и почти невидимой обводкой; элементы внутри
   своего фона не имеют, чтобы группа читалась как один объект.
   ⚠️ Размытие здесь допустимо: холст статичный. Анимировать фон под backdrop-filter нельзя —
   браузер пересчитывает размытие каждый кадр (грабля из 4u2). */
.hgrp{display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;min-width:0;
  background:color-mix(in srgb,var(--card) 55%,transparent);
  border:var(--edge);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
.hgrp.scroll{overflow-x:auto;scrollbar-width:none}
.hgrp.scroll::-webkit-scrollbar{display:none}
.hgrp .tab,.hgrp .rnd,.hgrp .face,.hgrp .status{background:transparent;box-shadow:none}
.hgrp .tab.on{background:var(--chip)}
.hgrp .rnd:hover,.hgrp .tab:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.hgrp .status{padding:0 14px 0 4px;height:44px}
.hgrp .face{width:44px;height:44px;font-size:17px}
.hgrp .tab{height:44px}
.hgrp .greet{height:44px;padding:0 20px;font-size:15.5px}
.hgrp .rnd{width:44px;height:44px}
/* Лого-надпись: синяя в светлой теме, салатовая в тёмной — тот же токен, что у капсул заголовков */
.wordmark{padding:0 14px;height:44px;display:inline-flex;align-items:center;cursor:pointer;
  font-weight:700;font-size:16px;letter-spacing:-.03em;color:var(--hcap);white-space:nowrap;border-radius:999px}
.wordmark:hover{background:color-mix(in srgb,var(--hcap) 12%,transparent)}
.greet{display:flex;align-items:center;gap:12px;background:var(--lime);color:#101114;border-radius:999px;
  padding:0 24px;height:56px;cursor:pointer;font-size:16.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.status{display:flex;align-items:center;gap:9px;background:var(--card);color:var(--ink);border-radius:999px;
  height:56px;padding:0 20px 0 8px;font-size:14px;white-space:nowrap;box-shadow:var(--sh)}
.status .icw{width:40px;height:40px}
.status .icw svg{width:19px;height:19px}
.status b{font-weight:500}
.face{width:56px;height:56px;border-radius:999px;background:var(--card);display:grid;place-items:center;
  font-weight:600;font-size:20px;color:var(--ink);overflow:hidden;flex:0 0 auto;box-shadow:var(--sh)}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.spacer{flex:1}
.rnd{width:48px;height:48px;border-radius:999px;background:var(--card);display:grid;place-items:center;cursor:pointer;
  color:var(--ink);transition:.15s;flex:0 0 auto;box-shadow:var(--sh)}
.rnd:hover{background:var(--tile)}
.rnd.dark{background:var(--chip);color:var(--onchip)}
.rnd svg,.btn svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:0 20px;height:48px;border-radius:999px;
  background:var(--card);color:var(--mut);cursor:pointer;font-weight:500;transition:.15s;box-shadow:var(--sh);white-space:nowrap}
.tab svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--chip);color:var(--onchip)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;
  background:var(--card);color:var(--ink);cursor:pointer;font-weight:500;transition:.15s}
.btn:hover{background:var(--tile)}
.btn:disabled{opacity:.4;cursor:default}
.btn.pri{background:var(--chip);color:var(--onchip)}
.btn.pri:hover{opacity:.86;background:var(--chip)}
.btn.lime{background:var(--lime);color:#101114}
.btn.lime:hover{background:var(--lime);filter:brightness(.96)}
.btn.gh{background:transparent;color:var(--mut)}
.btn.gh:hover{background:var(--card);color:var(--ink)}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.btn.ic{width:48px;padding:0}
.btn.ic.sm{width:38px}
.btn.wide{width:100%}
.btn.danger{color:var(--bad)}
.btn:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 35%,transparent)}

/* ---------- карточки и поля ---------- */
.card{background:var(--card);border-radius:var(--r);padding:26px;box-shadow:var(--sh);border:var(--edge)}
/* та же капсула и у заголовков обычных карточек */
.card > h3{display:inline-flex;align-items:center;gap:10px;padding:5px 16px;border-radius:999px;
  border:1.5px solid var(--hcap);color:var(--ink);font-size:15.5px}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:var(--mut);margin:0 0 6px 16px}
.inp{width:100%;height:52px;padding:0 18px;border-radius:var(--rs);background:var(--tile);color:var(--ink);transition:.15s}
.inp::placeholder{color:var(--hint)}
.inp:focus{background:var(--tile2);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
textarea.inp{height:auto;min-height:104px;padding:14px 18px;resize:vertical;line-height:1.5}
select.inp{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 22px) 23px,calc(100% - 16px) 23px;background-size:6px 6px;background-repeat:no-repeat}
.err{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad);border-radius:var(--rs);padding:12px 18px;font-size:14px;margin-bottom:12px}
.ok{background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good);border-radius:var(--rs);padding:12px 18px;font-size:14px;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 15px;border-radius:999px;background:var(--tile);font-size:13.5px;color:var(--mut)}
.chip.on{background:var(--chip);color:var(--onchip)}

/* иконка-глиф в светлом кружке — базовый приём референса */
span.icw,.icw{width:44px;height:44px;border-radius:999px;background:var(--tile);display:grid;place-items:center;flex:0 0 auto;color:var(--ink)}
.icw svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icw.sm{width:36px;height:36px}
.icw.sm svg{width:17px;height:17px}
.icw.lime{background:var(--lime);color:#101114}
.icw.peri{background:#8ea6ff;color:#101114}
.icw.dark{background:var(--chip);color:var(--onchip)}

/* ---------- welcome ---------- */
.hero{padding:26px 0 30px;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:26px;align-items:stretch}
.herocard{background:var(--card);border-radius:var(--r);padding:38px;box-shadow:var(--sh);display:flex;flex-direction:column;justify-content:center;border:var(--edge)}
.hero .lead{font-size:17.5px;color:var(--mut);max-width:52ch}
.kicker{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--hint);font-weight:600;margin-bottom:14px}
.tcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:stretch}
.tcard{background:var(--card);border-radius:var(--rs);padding:18px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:10px;min-height:132px;border:var(--edge)}
/* ⚠️ Название и подпись — родные инлайновые <b> и <span>, поэтому без этой обёртки
   они склеиваются в «ТревожныйОголённый нерв» (замер: зазор 0). Колонка с gap, а не
   display:block у span — заголовок и подпись должны быть одним блоком, который
   .tcard:first-child растягивает через flex:1. */
.tcard > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.tcard b{font-size:15.5px;font-weight:600}
.tcard span:not(.icw){font-size:12.5px;color:var(--mut);line-height:1.35}
.tcard .dot{width:34px;height:34px;border-radius:999px;background:var(--tile)}
.tcard:first-child{grid-column:span 2;flex-direction:row;align-items:center;min-height:0}
.tcard:first-child > div{flex:1}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:0 0 26px}
.step{background:var(--card);border-radius:var(--rs);padding:22px;box-shadow:var(--sh);border:var(--edge)}
.step .icw{margin-bottom:14px}

/* ---------- авторизация ---------- */
.authwrap{max-width:460px;margin:20px auto 60px;padding:0 18px}
.codebox{display:flex;gap:8px;justify-content:center;margin:10px 0 18px}
.codebox input{width:50px;height:60px;text-align:center;font-size:23px;font-weight:600;border-radius:var(--rx);background:var(--tile)}
.codebox input:focus{background:var(--tile2);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.devnote{background:var(--tile);border-radius:var(--rs);padding:16px 18px;font-size:14px;margin-bottom:14px;color:var(--mut)}
.devnote b{color:var(--ink)}

/* ---------- колода ----------
   Раздел центрируется по вертикали: карточка садится в середину экрана, а не под шапку. */
.deck{max-width:560px;margin:0 auto;padding:6px 18px 24px;min-height:calc(100dvh - 84px);
  display:flex;flex-direction:column;justify-content:center}
.prog{height:8px;border-radius:99px;background:var(--card);overflow:hidden;margin-bottom:8px}
.prog i{display:block;height:100%;background:var(--chip);border-radius:99px;transition:width .3s}
.progrow{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut);margin-bottom:14px;padding:0 4px}
/* ⚠️ overflow здесь VISIBLE, а не clip: карточка должна улетать поверх всего, а не обрезаться рамкой.
   Страницу это не растягивает — «бывает» летит ВВЕРХ (вверх документ не растёт), а «да/нет» уходят
   по горизонтали, которую гасит body{overflow-x:hidden}. */
.stage{position:relative;height:min(56vh,420px);min-height:320px;overflow:visible;touch-action:pan-y;
  perspective:1500px;perspective-origin:50% 40%;z-index:2}
.qcard{position:absolute;inset:0;background:var(--card);border-radius:40px;box-shadow:var(--sh);border:var(--edge);padding:30px;
  display:flex;flex-direction:column;user-select:none;cursor:grab;will-change:transform;
  transform-style:preserve-3d;backface-visibility:hidden;z-index:3}
.qcard.back{transform:translate3d(0,14px,-70px) scale(.985);opacity:.62;pointer-events:none;z-index:2}
.qcard.back2{transform:translate3d(0,28px,-140px) scale(.97);opacity:.3;pointer-events:none;z-index:1}
.qcard:active{cursor:grabbing}
/* ЭЛАСТИЧНОСТЬ КОЛОДЫ: пружина на возврат, мягкий разгон на вылет, пружинное появление.
   Класс появления снимается по pointerdown / animationend / таймеру — в скрытой вкладке
   animationend не приходит никогда, и без таймера класс висел бы вечно (грабля из aug2). */
.qcard.snap{transition:transform .58s cubic-bezier(.18,1.6,.36,1)}
.qcard.fly{transition:transform .42s cubic-bezier(.3,.05,.2,1),opacity .42s ease-out}
.qcard.pop{animation:cardpop .5s cubic-bezier(.2,1.5,.35,1) both}
@keyframes cardpop{
  from{transform:translate3d(0,26px,-160px) scale(.965);opacity:0}
  to{transform:translate3d(0,0,0) scale(1);opacity:1}}
.qcard.back,.qcard.back2{transition:transform .5s cubic-bezier(.2,1.35,.35,1),opacity .4s}

/* Часть карточек цветная, чтобы колода не была монотонной. Фон константный → текст константный. */
.qcard.tone1{background:var(--lime)}
.qcard.tone2{background:#8ea6ff}
.qcard.tone1,.qcard.tone2{border-color:rgba(16,17,20,.06)}
.qcard.tone1 .qtext,.qcard.tone2 .qtext{color:#101114}
.qcard.tone1 .qnum,.qcard.tone2 .qnum{color:rgba(16,17,20,.5)}
.qcard.tone1 .qhint,.qcard.tone2 .qhint{background:rgba(255,255,255,.42);color:#2b3040}
.qcard.tone3{background:var(--inkblk)}
.qcard.tone3 .qtext{color:#f3f5f9}
.qcard.tone3 .qnum{color:rgba(255,255,255,.45)}
.qcard.tone3 .qhint{background:rgba(255,255,255,.08);color:#c2c9d4}
.qnum{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--hint)}
.qtext{font-size:clamp(21px,4.4vw,28px);line-height:1.24;font-weight:600;letter-spacing:-.02em;margin:auto 0}
.qhint{font-size:13.5px;color:var(--mut);background:var(--tile);border-radius:var(--rx);padding:12px 16px}
.stamp{position:absolute;top:26px;font-size:14px;font-weight:600;letter-spacing:.02em;
  border-radius:999px;padding:8px 16px;opacity:0;transition:opacity .1s}
.stamp.y{right:26px;background:var(--lime);color:#101114;transform:rotate(7deg)}
.stamp.n{left:26px;background:var(--chip);color:var(--onchip);transform:rotate(-7deg)}
.stamp.m{left:50%;top:20px;transform:translateX(-50%);background:#8ea6ff;color:#101114}
.acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px}
.act{background:var(--card);border-radius:var(--rs);padding:16px 12px;cursor:pointer;text-align:center;transition:.15s;box-shadow:var(--sh);border:var(--edge)}
.act:hover{background:var(--tile);transform:translateY(-2px)}
.act .icw{margin:0 auto 8px}
.act b{display:block;font-size:14.5px;margin-bottom:3px}
.act > span:not(.icw){font-size:12px;color:var(--mut);line-height:1.3;display:block}
.deckfoot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px;flex-wrap:wrap;padding:0 4px}

/* ---------- результат и профиль ---------- */
.reveal{max-width:760px;margin:0 auto;padding:0 18px}
.bigtype{background:var(--card);border-radius:var(--r);padding:34px;box-shadow:var(--sh);margin-bottom:14px;position:relative;overflow:hidden;border:var(--edge)}
.bigtype .tcolor{width:56px;height:56px;border-radius:999px;background:var(--tc);margin-bottom:18px}
.bars{display:grid;gap:9px;margin-top:20px}
.bar{display:grid;grid-template-columns:104px 1fr 48px;gap:12px;align-items:center;font-size:14px}
.bar .t{height:10px;border-radius:99px;background:var(--tile);overflow:hidden}
.bar .t i{display:block;height:100%;border-radius:99px;background:var(--bc);transition:width .6s}
.bar b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* ---------- БЕНТО ----------
   ⚠️ Сетка собрана ЯВНЫМИ РЯДАМИ (.brow), а не auto-flow со спанами: авто-раскладка не умеет
   гарантировать полные ряды — широкий блок не влезает в остаток и оставляет дыру. Ряд-контейнер
   протечь не может физически, поэтому недобранных рядов не бывает ни на одной ширине.
   В ряду ровно 1, 2 или 4 ячейки — такие числа делятся на все брейкпоинты (4→2→1).
   Зазор один и тот же у ряда и между рядами, значит расстояния везде одинаковые.
   align-items по умолчанию stretch: блоки ряда одной высоты. Внутри блока заголовок прижат
   к верху, наполнение (.bd) — к низу через margin-top:auto, лишняя высота становится воздухом. */
.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.brow{display:grid;gap:14px}
.brow.one{grid-template-columns:minmax(0,1fr)}
.brow.half{grid-template-columns:repeat(2,minmax(0,1fr))}
.brow.quad{grid-template-columns:repeat(4,minmax(0,1fr))}
.brow.wideL{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.brow.wideR{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.bento .blk{margin-bottom:0;display:flex;flex-direction:column}
/* ⚠️⚠️ Воздух между заголовком и наполнением ОБЯЗАН быть ограничен.
   Было `.bd{margin-top:auto}` — наполнение приклеено к низу, как просил заказчик, и на
   широком экране это читалось хорошо (зазоры 16–118px). Но auto-отступ растёт без предела:
   он забирает ВСЮ разницу высот в ряду, а разница тем больше, чем уже колонка. Замеры на
   одной и той же странице: 1280 → 118px, 1000 → 420px («Сильные стороны» против «Слабых»,
   1154 против 1833 символов), а короткое значение рядом с простынёй давало 570px.
   Пустота в пол-экрана под заголовком выглядит как незагрузившийся блок.
   Решение: распорка-псевдоэлемент с потолком. Она тянется, но не выше 110px; остаток
   разницы уходит ПОД наполнение, где не бросается в глаза. Порядок задаётся flex-order,
   поэтому промежуточные элементы (.val, .hint) остаются под заголовком, где и должны.  */
.bento .blk > .bd{order:2;margin-top:0}
.bento .blk::after{content:'';order:1;flex:1 1 auto;max-height:110px}
/* Медиа-блокам воздух сверху не нужен вовсе: над сеткой портретов даже 110px читались
   как «фото не подгрузились» (замер: 220px на 1920). */
.bento .blk.tight::after{max-height:0}
.blk{background:var(--card);border-radius:var(--r);padding:24px;box-shadow:var(--sh);margin-bottom:14px;border:var(--edge)}
/* Заголовок блока — аутлайн-капсула: в тёмной теме салатовая, в светлой синяя.
   Единственная обводка в проекте, и она смысловая: помогает заголовку отделиться от текста. */
.blk h3{margin:0 0 16px;display:inline-flex;align-self:flex-start;align-items:center;gap:11px;
  padding:6px 18px 6px 6px;border-radius:999px;border:1.5px solid var(--hcap);color:var(--ink);
  font-size:16px;max-width:100%}
.blk h3 .icw{background:color-mix(in srgb,var(--hcap) 18%,transparent);color:var(--hcap)}
/* крупный текст для ритма: короткое значение читается как цифра на приборе */
.blk .val{font-size:clamp(26px,2.5vw,38px);font-weight:600;letter-spacing:-.035em;line-height:1.06;margin:0}
.blk .lead2{font-size:clamp(18px,1.4vw,21px);line-height:1.35;letter-spacing:-.015em;color:var(--ink);margin:0 0 12px}
.blk .cap{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--hint);font-weight:600}
.li{background:var(--tile);border-radius:var(--rs);padding:16px 18px;margin-bottom:8px}
.li:last-child{margin-bottom:0}
.li b{display:block;margin-bottom:4px}
.li p{margin:0;color:var(--mut);font-size:14.5px}
/* список с иконками: воздуха внутри строки больше, а разрыв «заголовок → список» меньше */
.blk.list h3{margin-bottom:8px}
/* ⚠️ Здесь стоял свой `margin-top:auto`, дублировавший общий и перебивавший потолок
   воздуха — именно этот блок и давал дыру 420px на 1000px. Воздухом теперь управляет
   одна распорка `.bento .blk::after`, отдельные правила на .bd не нужны. */
.li.ico{display:block;padding:22px}
.li.ico .icw{display:flex;justify-content:flex-start;width:auto;height:auto;margin:0 0 14px;background:transparent;color:var(--hcap)}
.li.ico .icw svg{width:36px;height:36px;stroke-width:1.5}
.li.ico > div{min-width:0}
.li.ico b{margin-bottom:6px}

/* карточки публичных людей с портретами */
.faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.fcard{background:var(--tile);border-radius:var(--rs);padding:12px;text-align:center}
.fcard .ph{width:100%;aspect-ratio:1;border-radius:calc(var(--rs) - 4px);object-fit:cover;object-position:center top;
  display:block;background:var(--tile2);margin-bottom:10px}
.fcard .mono{width:100%;aspect-ratio:1;border-radius:calc(var(--rs) - 4px);background:var(--tile2);
  display:grid;place-items:center;font-size:30px;font-weight:600;color:var(--hint);margin-bottom:10px}
.fcard b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.plus{margin-top:10px;background:var(--card);border-radius:var(--rx);padding:12px 14px;color:var(--mut);font-size:14px}
/* «Что в этом ценного»: в тёмной теме салатовый, в светлой — тёмно-зелёный (салатовый на белом не читается) */
.plus b{display:inline;color:var(--plusc);font-weight:600}

/* цветные «сцены»: часть блоков красим, остальные белые — цвета не больше двух на экран.
   Фон константный, поэтому текст внутри тоже константный и НЕ флипается в тёмной теме. */
.blk.lime{background:var(--lime)}
.blk.lime,.blk.lime h3,.blk.lime b{color:#101114}
.blk.lime .li{background:rgba(16,17,20,.09)}
.blk.lime .li p,.blk.lime .mut,.blk.lime .kv span{color:#3a3f2a}
.blk.lime .icw{background:rgba(16,17,20,.12);color:#101114}
.blk.lime h3{border-color:rgba(16,17,20,.42);color:#101114}
.blk.lime h3 .icw{background:rgba(16,17,20,.14);color:#101114}
.blk.lime .kv{background:rgba(16,17,20,.09)}
.blk.peri{background:#8ea6ff}
.blk.peri,.blk.peri h3,.blk.peri b{color:#101114}
.blk.peri .li{background:rgba(255,255,255,.42)}
.blk.peri .li p,.blk.peri .mut,.blk.peri .kv span{color:#2c3352}
.blk.peri .icw{background:rgba(16,17,20,.14);color:#101114}
.blk.peri h3{border-color:rgba(16,17,20,.42);color:#101114}
.blk.peri h3 .icw{background:rgba(16,17,20,.16);color:#101114}
.blk.peri .kv{background:rgba(255,255,255,.42)}
/* ⚠️ В тёмной теме карточки чёрные, поэтому тёмная сцена должна быть СВЕТЛЕЕ них,
   иначе сливается. Отсюда собственный токен, а не константа. */
.blk.scene{}
.blk.moti{background:var(--motib)}
.blk.brand{background:var(--brandb)}
.blk.moti,.blk.brand,.blk.moti h3,.blk.brand h3,.blk.moti b,.blk.brand b{color:#101114}
.blk.moti .li,.blk.brand .li,.blk.moti .kv,.blk.brand .kv{background:rgba(255,255,255,.44)}
.blk.moti .li p,.blk.brand .li p,.blk.moti .mut,.blk.brand .mut,
.blk.moti .kv span,.blk.brand .kv span{color:#2b3040}
.blk.moti,.blk.brand{border-color:rgba(16,17,20,.06)}
.blk.ink{border-color:rgba(255,255,255,.05)}
.blk.moti h3,.blk.brand h3{border-color:rgba(16,17,20,.42)}
.blk.moti h3 .icw,.blk.brand h3 .icw{background:rgba(16,17,20,.14);color:#101114}
.blk.moti .val,.blk.brand .val{color:#101114}
.blk.ink{background:var(--inkblk,#14171d)}
.blk.ink,.blk.ink h3,.blk.ink b{color:#f3f5f9}
.blk.ink .li{background:rgba(255,255,255,.07)}
.blk.ink .li p,.blk.ink .mut,.blk.ink .kv span{color:#b6bdc9}
.blk.ink h3{border-color:var(--lime);color:#f3f5f9}
.blk.ink h3 .icw{background:var(--lime);color:#101114}
.blk.ink .icw{background:var(--lime);color:#101114}
.blk.ink .kv{background:rgba(255,255,255,.07)}
.blk.ink .plus{background:rgba(255,255,255,.07);color:#b6bdc9}
.blk.ink .lead2{color:#e6eaf1}
.blk.ink .cap,.blk.lime .cap,.blk.peri .cap{color:inherit;opacity:.62}
.blk.lime .val,.blk.peri .val{color:#101114}

.pgrid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px;align-items:start}
@media(min-width:1500px){.pgrid{grid-template-columns:390px minmax(0,1fr)}}
/* карточка человека едет вместе со страницей, разбор скроллится рядом */
@media(min-width:901px){.pcol{position:sticky;top:96px}}
.ava{width:88px;height:88px;border-radius:28px;object-fit:cover;background:var(--tile);display:block;flex:0 0 auto}
.avaph{width:88px;height:88px;border-radius:28px;background:var(--tile);display:grid;place-items:center;font-size:30px;font-weight:600;color:var(--mut);flex:0 0 auto}
.avarow{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.kv{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--tile);border-radius:var(--rx);
  padding:12px 16px;margin-bottom:6px;font-size:14.5px}
.kv:last-child{margin-bottom:0}
.kv span{color:var(--mut)}
.kv b{text-align:right;font-weight:500}
.kv .k{display:flex;align-items:center;gap:10px;min-width:0}
.kv .k svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.75}
.note{background:var(--card);border-radius:var(--r);padding:22px 24px;font-size:14px;color:var(--mut);line-height:1.55;box-shadow:var(--sh);border:var(--edge)}
.empty{text-align:center;padding:44px 20px;color:var(--mut)}
.sp{height:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* строка-плитка со стрелкой (как список устройств на референсе) */
.rowtile{display:flex;align-items:center;gap:14px;background:var(--tile);border-radius:var(--rs);padding:12px 16px;
  margin-bottom:8px;cursor:pointer;transition:.15s}
.rowtile:hover{background:var(--tile2)}
.rowtile b{display:block;font-size:15px;font-weight:600}
.rowtile span{display:block;font-size:12.5px;color:var(--mut)}
.rowtile .go{margin-left:auto;color:var(--hint);font-size:18px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--chip);color:var(--onchip);
  padding:14px 24px;border-radius:999px;z-index:100;box-shadow:var(--sh2);font-size:14.5px}
.modal{position:fixed;inset:0;background:rgba(10,12,16,.42);z-index:90;display:grid;place-items:center;padding:20px}
.modal .card{max-width:440px;width:100%;box-shadow:var(--sh2)}

/* ⚠️ Брейкпоинты бенто держим В КОНЦЕ файла: специфичность равная, выигрывает последний.
   Ряд из 4 ячеек складывается в 2, асимметричные ряды выравниваются, ниже 760 всё в одну колонку. */
@media(min-width:901px){
  .reveal{min-height:calc(100dvh - 84px);display:flex;flex-direction:column;justify-content:center}
  .reveal > *:last-child{margin-bottom:0}
}
@media(max-width:1279px){.brow.quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){.brow.wideL,.brow.wideR{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:759px){
  .brow.one,.brow.half,.brow.quad,.brow.wideL,.brow.wideR{grid-template-columns:minmax(0,1fr)}
  /* одна колонка: высота ряда = высота блока, воздуху взяться неоткуда — гасим распорку,
     чтобы она не добавляла пустоту там, где прижимать не к чему */
  .bento .blk::after{max-height:0}}

@media(max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);padding:8px 0 20px}
  .herocard{padding:26px}
  .grid2,.pgrid{grid-template-columns:minmax(0,1fr)}
  /* шапка складывается: приветствие сверху по центру, вкладки строкой под ним */
  .hdrin{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"center right" "left left";gap:10px}
  .hcenter{grid-area:center;justify-content:flex-start}
  .hright{grid-area:right}
  .hleft{grid-area:left}
  .status{display:none}
  .wordmark{display:none}
  /* ⚠️ на телефоне шапка занимает две строки (~136px), поэтому запас под колоду больше:
     с прежним calc(100dvh - 130px) страница скроллилась на 6px */
  .deck{min-height:calc(100dvh - 210px)}
}
@media(max-width:520px){
  .card,.blk,.bigtype{padding:20px}
  .act span{display:none}
  .act{padding:14px 8px}
  .bar{grid-template-columns:84px 1fr 44px;font-size:13px}
  .greet{padding-right:16px}
  .greet b{font-size:15px}
}

/* ---------- полосы прокрутки под наш стиль ----------
   Тонкая пилюля вместо системной полосы со стрелками. Трек прозрачный, ползунок —
   полупрозрачный от цвета текста, поэтому автоматически работает в обеих темах.
   Приём с прозрачной рамкой и background-clip даёт «воздух» вокруг ползунка. */
*{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb);border-radius:999px;border:3.5px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--sbh);background-clip:content-box}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}