/* ============================================================
   WANT IT · CLUB — PROTOTYPE — дизайн-система «Editorial Object Club»
   Направление из 02 Design Vision: светлая editorial-база, крупная
   честная предметная фотография, фиолетовый независимый акцент,
   явные цвета жизненного цикла, человеческий ownership-контекст.
   Один файл на все страницы. Секции:
     1  Токены и база              10  Опыт владельцев (experience)
     2  Тёмная тема                11  Q&A
     3  Каркас: шапка/футер        12  Коллекции
     4  Мобильная нижняя навигация 13  Таймлайн жизненного цикла
     5  Типографика и общие блоки  14  Сравнение
     6  Кнопки/поля/формы          15  Профиль
     7  Карточки товара и полки    16  Композер отзыва (степпер)
     8  Состояния и rel-контрол    17  Модалки/шиты/тосты
     9  Truth-strip и бейджи       18  Активность/настройки/служебное
                                   19  Responsive + печать
   Правило: цвет никогда не единственный носитель смысла — у статуса
   всегда есть точка-маркер, подпись и текстовый эквивалент.
   ============================================================ */

/* ---------- 1 · Токены и база ---------- */
:root{
  --font-ui:'Inter',-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-d:'Manrope',var(--font-ui);
  /* чернила и поверхности: тёплая бумага, не стерильный белый экран */
  --ink:#18191d; --ink-2:#43454d; --muted:#6d6f78; --dim:#9b9da5;
  --bg:#f7f5f1; --card:#ffffff; --soft:#faf9f6; --soft-2:#f2f0ea;
  --field:#fdfcfa; --hover:#f4f2ec;
  --line:#e7e4dc; --line-2:#d9d5cb;
  /* бренд: независимый violet, не «сердечко магазина» */
  --brand:#6657e8; --brand-2:#5646d8; --brand-ink:#4f41cf;
  --brand-soft:#efedfc; --brand-line:#d9d4f7;
  /* жизненный цикл: сигнальные токены, не декор */
  --want:#e5486a;     --want-soft:#fdedf1;    --want-line:#f6ccd7;
  --consider:#b57a0e; --consider-soft:#faf1dd;--consider-line:#ecd9ae;
  --own:#178a68;      --own-soft:#e2f4ec;     --own-line:#bfe4d5;
  --past:#6e7890;     --past-soft:#eef0f4;    --past-line:#d7dce5;
  --nouse:#8a8474;    --nouse-soft:#f1efe7;   --nouse-line:#ddd8c8;
  --regret:#c24d4d;   --regret-soft:#faeaea;  --regret-line:#eccaca;
  --focus:#2f6bff;
  /* форма */
  --r:18px; --r-sm:12px; --r-xs:9px;
  --sh-1:0 1px 2px rgba(24,25,29,.04),0 6px 20px -12px rgba(24,25,29,.10);
  --sh-2:0 2px 6px rgba(24,25,29,.05),0 18px 44px -20px rgba(24,25,29,.18);
  --sh-pop:0 8px 16px -8px rgba(24,25,29,.14),0 28px 60px -24px rgba(24,25,29,.22);
  --glass:rgba(247,245,241,.86);
  --img-bg:#efede8;
  --hero-grad:radial-gradient(1200px 480px at 78% -10%,rgba(102,87,232,.10),transparent 60%),
              radial-gradient(900px 420px at 12% 110%,rgba(229,72,106,.05),transparent 55%);
  --ai-soft:#f3f1fb; --ai-ink:#5a4bd6;
  color-scheme:light;
}

/* ---------- 2 · Тёмная тема (тёплый графит, не инверсия) ---------- */
html[data-theme="dark"]{
  --ink:#ecebf1; --ink-2:#c4c3cd; --muted:#9a99a6; --dim:#6f6e7c;
  --bg:#141318; --card:#1d1c23; --soft:#211f28; --soft-2:#26242e;
  --field:#18171e; --hover:#26242e;
  --line:#2c2a35; --line-2:#3a3746;
  --brand:#8578ef; --brand-2:#9488f2; --brand-ink:#a99ff5;
  --brand-soft:#252138; --brand-line:#3d3760;
  --want:#f0698a;     --want-soft:#33202a;    --want-line:#57303e;
  --consider:#dfa93e; --consider-soft:#302818;--consider-line:#4f4225;
  --own:#3dbd93;      --own-soft:#15302a;     --own-line:#245245;
  --past:#98a2b8;     --past-soft:#242731;    --past-line:#3a3f4e;
  --nouse:#a9a28c;    --nouse-soft:#282620;   --nouse-line:#44412f;
  --regret:#e0716f;   --regret-soft:#32211f;  --regret-line:#553634;
  --sh-1:0 1px 2px rgba(0,0,0,.25),0 8px 24px -12px rgba(0,0,0,.5);
  --sh-2:0 2px 6px rgba(0,0,0,.3),0 20px 48px -20px rgba(0,0,0,.6);
  --sh-pop:0 10px 20px -8px rgba(0,0,0,.5),0 32px 70px -24px rgba(0,0,0,.65);
  --glass:rgba(20,19,24,.85);
  --img-bg:#26242c;
  --hero-grad:radial-gradient(1200px 480px at 78% -10%,rgba(133,120,239,.12),transparent 60%),
              radial-gradient(900px 420px at 12% 110%,rgba(240,105,138,.06),transparent 55%);
  --ai-soft:#242138; --ai-ink:#b3a8f5;
  color-scheme:dark;
}
html[data-theme="dark"] .pimg img{opacity:.94}
html[data-theme="dark"] .site-header{border-bottom-color:var(--line)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);
  line-height:1.55;font-size:14.5px;-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:6px}
::selection{background:var(--brand-soft);color:var(--brand-ink)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--card);
  padding:8px 14px;border-radius:10px;box-shadow:var(--sh-2)}
.skip-link:focus{left:8px}

/* ---------- 3 · Каркас: шапка, обёртка, футер ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
.site-header{position:sticky;top:0;z-index:60;background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.sh-in{max-width:1240px;margin:0 auto;padding:0 22px;height:62px;
  display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:baseline;gap:2px;font-family:var(--font-d);
  font-weight:800;font-size:21px;letter-spacing:-.6px;color:var(--ink);white-space:nowrap;flex:none}
.brand:hover{text-decoration:none}
.brand .dot{color:var(--brand);font-size:26px;line-height:0;position:relative;top:1px}
.brand .club{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;
  margin-left:5px;text-transform:uppercase;border:1px solid var(--line-2);
  border-radius:20px;padding:2px 8px;position:relative;top:-3px}
.main-nav{display:flex;gap:2px;flex:none}
.main-nav a{padding:7px 12px;border-radius:10px;color:var(--ink-2);font-weight:600;font-size:13.5px}
.main-nav a:hover{background:var(--hover);text-decoration:none;color:var(--ink)}
.main-nav a.on{color:var(--brand-ink);background:var(--brand-soft)}
.hdr-search{flex:1;max-width:430px;position:relative}
.hdr-search input{width:100%;height:38px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--field);padding:0 64px 0 36px;font:inherit;font-size:13.5px;color:var(--ink)}
.hdr-search input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.hdr-search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.hdr-search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font:600 10.5px var(--font-ui);color:var(--dim);border:1px solid var(--line-2);
  border-radius:6px;padding:2px 6px;background:var(--card)}
.search-pop{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-pop);overflow:hidden;z-index:80}
.search-pop .sp-sec{padding:8px 6px 4px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);padding-left:14px}
.search-pop a{display:flex;align-items:center;gap:10px;padding:8px 14px;color:var(--ink);font-size:13.5px}
.search-pop a:hover,.search-pop a.act{background:var(--hover);text-decoration:none}
.search-pop .thumb{width:34px;height:34px;border-radius:9px;background:var(--img-bg);overflow:hidden;flex:none}
.search-pop .thumb img{width:100%;height:100%;object-fit:cover}
.search-pop .m{color:var(--muted);font-size:12px;margin-left:auto;white-space:nowrap}
.search-pop .sp-all{border-top:1px solid var(--line);color:var(--brand-ink);font-weight:600;justify-content:center}
.hdr-actions{display:flex;align-items:center;gap:9px;margin-left:auto;flex:none}
.icon-btn{width:36px;height:36px;border:1px solid var(--line-2);background:var(--card);
  border-radius:11px;cursor:pointer;color:var(--ink-2);font-size:15px;display:grid;
  place-items:center;transition:all .15s;position:relative}
.icon-btn:hover{border-color:var(--brand);color:var(--brand-ink)}
.icon-btn .ndot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;
  background:var(--want);border:2px solid var(--card)}
.avatar-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);cursor:pointer;
  background:var(--brand-soft);color:var(--brand-ink);font-weight:800;font-size:12.5px;
  display:grid;place-items:center;transition:box-shadow .15s}
.avatar-btn:hover{box-shadow:0 0 0 3px var(--brand-soft)}
.hdr-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-pop);padding:6px;z-index:90}
.hdr-menu a,.hdr-menu button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 11px;
  border:0;background:none;border-radius:9px;color:var(--ink);font:600 13.5px var(--font-ui);
  cursor:pointer;text-align:left}
.hdr-menu a:hover,.hdr-menu button:hover{background:var(--hover);text-decoration:none}
.hdr-menu .sep{height:1px;background:var(--line);margin:6px 4px}
.hdr-menu .mut{color:var(--muted);font-weight:500;font-size:12px;padding:4px 11px}

.site-footer{border-top:1px solid var(--line);margin-top:72px;background:var(--card)}
.ft-in{max-width:1240px;margin:0 auto;padding:40px 22px 26px;display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.ft-in h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.ft-in a{display:block;color:var(--ink-2);padding:3.5px 0;font-size:13.5px}
.ft-brand p{color:var(--muted);font-size:13px;margin-top:10px;max-width:300px}
.ft-note{max-width:1240px;margin:0 auto;padding:14px 22px 22px;color:var(--dim);font-size:12px;
  border-top:1px solid var(--line);display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}

/* ---------- 4 · Мобильная нижняя навигация ---------- */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;
  background:var(--glass);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.bottom-nav .bn-in{display:grid;grid-template-columns:repeat(5,1fr);max-width:520px;margin:0 auto}
.bottom-nav a,.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px 2px;border:0;background:none;color:var(--muted);font:600 10px var(--font-ui);
  cursor:pointer;border-radius:10px}
.bottom-nav a .bi,.bottom-nav button .bi{font-size:18px;line-height:1.2}
.bottom-nav a.on{color:var(--brand-ink)}
.bottom-nav a:hover{text-decoration:none}
.bottom-nav .bn-add .bi{width:44px;height:30px;border-radius:12px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:19px;box-shadow:0 8px 18px -8px rgba(102,87,232,.6)}

/* ---------- 5 · Типографика и общие блоки ---------- */
h1,h2,h3{font-family:var(--font-d);letter-spacing:-.5px;line-height:1.18}
h1{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-1.2px}
h2{font-size:21px;font-weight:800}
h3{font-size:16px;font-weight:700}
.page-pad{padding-top:26px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand)}
.sec{display:flex;align-items:baseline;gap:12px;margin:38px 0 16px;flex-wrap:wrap}
.sec h2 span{color:var(--dim);font-family:var(--font-ui);font-weight:500;font-size:13.5px;letter-spacing:0}
.sec .to-all{margin-left:auto;font-weight:600;font-size:13px;white-space:nowrap}
.crumbs{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--dim);
  margin-bottom:14px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh-1)}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-head b{font-size:15px;font-family:var(--font-d);letter-spacing:-.3px}
.card-head span{color:var(--dim);font-weight:500;font-size:12.5px}
.spacer{flex:1}
.muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:12.5px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hero{position:relative;padding:52px 0 30px;background:var(--hero-grad)}
.hero h1 em{font-style:normal;color:var(--brand-ink)}
.hero .lead{font-size:16px;color:var(--muted);max-width:560px;margin:14px 0 22px}
.big-search{display:flex;gap:8px;max-width:600px;background:var(--card);border:1.5px solid var(--line-2);
  border-radius:16px;padding:7px;box-shadow:var(--sh-2);align-items:center}
.big-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.big-search .ic{padding-left:10px;color:var(--dim);font-size:16px}
.big-search input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);min-width:0}
.big-search input:focus{outline:none}
.mini-note{font-size:12.5px;color:var(--muted);margin-top:12px;display:flex;gap:7px;align-items:center}

/* ---------- 6 · Кнопки, поля, формы ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;
  font:600 13.5px var(--font-ui);padding:10px 18px;cursor:pointer;border:1px solid transparent;
  transition:all .16s;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px -10px rgba(102,87,232,.55)}
.btn-primary:hover{background:var(--brand-2);transform:translateY(-1px)}
.btn-secondary{background:var(--card);border-color:var(--line-2);color:var(--ink)}
.btn-secondary:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn-soft{background:var(--brand-soft);color:var(--brand-ink)}
.btn-soft:hover{background:var(--brand-line)}
.btn-ghost{background:none;color:var(--muted)}
.btn-ghost:hover{background:var(--hover);color:var(--ink)}
.btn-danger{background:var(--regret-soft);color:var(--regret)}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:10px}
.btn-lg{padding:13px 24px;font-size:15px;border-radius:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-own{background:var(--own);color:#fff}
.btn-own:hover{filter:brightness(1.06)}

.field{margin-bottom:15px}
.field label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.field label i{color:var(--dim);font-style:normal;font-weight:500}
.field input[type=text],.field input[type=search],.field input[type=email],.field input[type=password],
.field input[type=date],.field input[type=month],.field select,.field textarea{
  width:100%;border:1px solid var(--line-2);border-radius:11px;background:var(--field);
  padding:10px 12px;font:inherit;font-size:13.5px;color:var(--ink)}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.field .hint{font-size:12px;color:var(--dim);margin-top:5px}
.seg{display:inline-flex;background:var(--soft-2);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:7px 13px;border-radius:9px;font:600 12.5px var(--font-ui);
  color:var(--muted);cursor:pointer;transition:all .14s}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:20px;
  background:var(--card);padding:6px 13px;font:600 12.5px var(--font-ui);color:var(--ink-2);
  cursor:pointer;transition:all .14s;text-decoration:none}
.chip:hover{border-color:var(--brand);color:var(--brand-ink);text-decoration:none}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--card)}
html[data-theme="dark"] .chip.on{background:var(--ink);color:var(--bg)}
.chip .n{color:var(--dim);font-weight:500}
.chip.on .n{color:inherit;opacity:.7}
.filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 18px}
.filter-bar select{border:1px solid var(--line-2);border-radius:10px;background:var(--card);
  padding:7px 10px;font:600 12.5px var(--font-ui);color:var(--ink-2)}
.checkline{display:flex;gap:9px;align-items:flex-start;font-size:13px;cursor:pointer;margin:9px 0}
.checkline input{width:16px;height:16px;accent-color:var(--brand);margin-top:2px;flex:none}

/* видимость: labeled control, не прячем в настройки */
.vis-picker{display:flex;gap:6px;flex-wrap:wrap}
.vis-opt{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line-2);
  border-radius:11px;padding:8px 13px;cursor:pointer;font:600 12.5px var(--font-ui);
  color:var(--muted);background:var(--card);transition:all .14s}
.vis-opt.on{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.vis-pill{display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--font-ui);
  color:var(--muted);background:var(--soft-2);border-radius:20px;padding:3px 10px;white-space:nowrap}
.vis-pill.private{color:var(--consider)}

/* ---------- 7 · Карточки товара, полки, сетки ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pgrid.cols-3{grid-template-columns:repeat(3,1fr)}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;position:relative}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pimg{aspect-ratio:1/1;background:var(--img-bg);position:relative;overflow:hidden;display:block}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.pcard:hover .pimg img{transform:scale(1.035)}
.pimg .ph{width:100%;height:100%;display:grid;place-items:center;font-size:44px;color:var(--dim)}
.pcard .pc-state{position:absolute;top:10px;left:10px;z-index:2}
.pcard .pc-fav{position:absolute;top:10px;right:10px;z-index:2}
.pc-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.pc-brand{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700}
.pc-name{font-family:var(--font-d);font-weight:700;font-size:15px;letter-spacing:-.3px;color:var(--ink)}
a.pc-name:hover{color:var(--brand-ink);text-decoration:none}
.pc-ctx{font-size:12.5px;color:var(--muted)}
.pc-truth{font-size:12px;color:var(--muted);display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:2px}
.pc-truth b{color:var(--own);font-weight:700}
.pc-truth .d{color:var(--line-2)}
.pc-foot{margin-top:auto;padding-top:10px;display:flex;gap:7px;align-items:center}
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:236px;gap:14px;overflow-x:auto;
  padding:4px 4px 12px;scroll-snap-type:x proximity;scrollbar-width:thin}
.shelf>*{scroll-snap-align:start}
.shelf .pcard{min-width:0}
.pmini{display:flex;gap:11px;align-items:center;padding:9px;border:1px solid var(--line);
  border-radius:13px;background:var(--card);color:var(--ink);transition:border-color .15s}
.pmini:hover{border-color:var(--brand);text-decoration:none}
.pmini .thumb{width:52px;height:52px;border-radius:10px;background:var(--img-bg);overflow:hidden;flex:none}
.pmini .thumb img{width:100%;height:100%;object-fit:cover}
.pmini b{font-size:13.5px;font-weight:700;display:block;letter-spacing:-.2px}
.pmini .m{font-size:12px;color:var(--muted)}

/* ---------- 8 · Состояния жизненного цикла и rel-контрол ---------- */
.state-chip{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:4px 11px;
  font:700 11.5px var(--font-ui);white-space:nowrap;border:1px solid transparent}
.state-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.st-want{background:var(--want-soft);color:var(--want);border-color:var(--want-line)}
.st-consider{background:var(--consider-soft);color:var(--consider);border-color:var(--consider-line)}
.st-own{background:var(--own-soft);color:var(--own);border-color:var(--own-line)}
.st-past{background:var(--past-soft);color:var(--past);border-color:var(--past-line)}
.st-nouse{background:var(--nouse-soft);color:var(--nouse);border-color:var(--nouse-line)}
.st-regret{background:var(--regret-soft);color:var(--regret);border-color:var(--regret-line)}
.rel-wrap{position:relative;display:inline-flex}
.rel-btn{display:inline-flex;align-items:center;gap:7px;border-radius:12px;cursor:pointer;
  font:700 13px var(--font-ui);padding:9px 14px;border:1.5px solid var(--line-2);
  background:var(--card);color:var(--ink-2);transition:all .16s}
.rel-btn .car{font-size:10px;opacity:.7}
.rel-btn:hover{border-color:var(--brand);color:var(--brand-ink)}
.rel-btn.s-want{background:var(--want-soft);border-color:var(--want-line);color:var(--want)}
.rel-btn.s-consider{background:var(--consider-soft);border-color:var(--consider-line);color:var(--consider)}
.rel-btn.s-own{background:var(--own-soft);border-color:var(--own-line);color:var(--own)}
.rel-btn.s-past{background:var(--past-soft);border-color:var(--past-line);color:var(--past)}
.rel-btn.s-nouse{background:var(--nouse-soft);border-color:var(--nouse-line);color:var(--nouse)}
.rel-btn.pulse{animation:relpulse .5s ease}
@keyframes relpulse{0%{transform:scale(1)}35%{transform:scale(1.08)}70%{transform:scale(.98)}100%{transform:scale(1)}}
.rel-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-pop);padding:6px;z-index:85}
.rel-menu.up{top:auto;bottom:calc(100% + 6px)}
.rel-menu.portal{position:fixed;top:0;left:0;z-index:150;animation:mup .16s ease}
.rel-menu button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 11px;border:0;
  background:none;border-radius:9px;font:600 13px var(--font-ui);color:var(--ink);cursor:pointer;text-align:left}
.rel-menu button:hover{background:var(--hover)}
.rel-menu button .sdot{width:9px;height:9px;border-radius:50%;flex:none}
.rel-menu button.cur{background:var(--brand-soft)}
.rel-menu button .m{margin-left:auto;font-size:11px;color:var(--dim);font-weight:500}
.rel-menu .sep{height:1px;background:var(--line);margin:5px 4px}
.sdot.want{background:var(--want)}.sdot.consider{background:var(--consider)}
.sdot.own{background:var(--own)}.sdot.past{background:var(--past)}
.sdot.nouse{background:var(--nouse)}.sdot.none{background:var(--line-2)}

/* ---------- 9 · Truth-strip, бейджи, доверие ---------- */
.truth-strip{display:flex;gap:0;border:1px solid var(--line);border-radius:14px;background:var(--card);
  overflow:hidden;flex-wrap:wrap}
.truth-strip .ts{flex:1;min-width:130px;padding:13px 16px;border-right:1px solid var(--line)}
.truth-strip .ts:last-child{border-right:0}
.truth-strip .v{font-family:var(--font-d);font-weight:800;font-size:19px;letter-spacing:-.5px}
.truth-strip .v.pos{color:var(--own)} .truth-strip .v.neg{color:var(--regret)}
.truth-strip .l{font-size:11.5px;color:var(--muted);margin-top:1px}
.sample-note{font-size:11.5px;color:var(--dim);margin-top:7px}
.low-sample{opacity:.65}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:2.5px 8px;
  font:600 11px var(--font-ui);background:var(--soft-2);color:var(--muted);white-space:nowrap}
.b-verified{background:var(--own-soft);color:var(--own)}
.b-long{background:var(--brand-soft);color:var(--brand-ink)}
.b-check{background:#e8f0fb;color:#3567b8}
html[data-theme="dark"] .b-check{background:#1e2a3d;color:#7fa9e8}
.b-aff{background:var(--consider-soft);color:var(--consider)}
.b-gift{background:var(--consider-soft);color:var(--consider)}
.b-ai{background:var(--ai-soft);color:var(--ai-ink)}
.b-brandrep{background:#e8f0fb;color:#3567b8}
html[data-theme="dark"] .b-brandrep{background:#1e2a3d;color:#7fa9e8}
.own-badge{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.own-badge b{color:var(--own);font-weight:700}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  flex:none;border:1px solid var(--line);background:var(--soft-2)}
.avatar.sm{width:30px;height:30px;font-size:14px}
.avatar.lg{width:64px;height:64px;font-size:30px}
.avatar.init{font:800 13px var(--font-d);color:#fff}

/* ---------- 10 · Опыт владельцев ---------- */
.exp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.exp-head{display:flex;gap:11px;align-items:flex-start}
.exp-head .who b{font-size:13.5px;display:block}
.exp-head .who a{color:var(--ink)}
.exp-head .who a:hover{color:var(--brand-ink);text-decoration:none}
.exp-head .who .m{font-size:12px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.exp-title{font-family:var(--font-d);font-weight:700;font-size:15.5px;letter-spacing:-.3px;margin:12px 0 7px}
.exp-text{font-size:13.8px;color:var(--ink-2);line-height:1.62}
.exp-struct{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.exp-struct .cell{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.exp-struct .cell b{font-size:11px;letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:5px}
.exp-struct .plus b{color:var(--own)} .exp-struct .minus b{color:var(--regret)}
.exp-struct .fit b{color:var(--brand-ink)} .exp-struct .unfit b{color:var(--muted)}
.exp-struct ul{list-style:none;font-size:12.8px;color:var(--ink-2)}
.exp-struct li{padding:2px 0 2px 14px;position:relative}
.exp-struct li::before{content:'·';position:absolute;left:2px;font-weight:800}
.exp-verdict{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.verdict-pill{display:inline-flex;gap:6px;align-items:center;border-radius:10px;padding:5px 11px;
  font:700 12px var(--font-ui)}
.verdict-pill.yes{background:var(--own-soft);color:var(--own)}
.verdict-pill.no{background:var(--regret-soft);color:var(--regret)}
.verdict-pill.mid{background:var(--consider-soft);color:var(--consider)}
.exp-updates{margin-top:14px;border-left:2px solid var(--brand-line);padding-left:14px;display:grid;gap:10px}
.exp-upd{position:relative}
.exp-upd::before{content:'';position:absolute;left:-19.5px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--brand);border:2px solid var(--card)}
.exp-upd .w{font:700 11.5px var(--font-ui);color:var(--brand-ink)}
.exp-upd p{font-size:13px;color:var(--ink-2);margin-top:2px}
.exp-foot{display:flex;gap:9px;align-items:center;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.useful-btn{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line-2);
  background:var(--card);border-radius:10px;padding:6px 12px;font:600 12px var(--font-ui);
  color:var(--muted);cursor:pointer;transition:all .14s}
.useful-btn:hover{border-color:var(--own);color:var(--own)}
.useful-btn.on{background:var(--own-soft);border-color:var(--own-line);color:var(--own)}
.exp-foot .date{margin-left:auto;font-size:12px;color:var(--dim)}
.disc-label{display:inline-flex;gap:5px;align-items:center;font:600 11px var(--font-ui);
  border-radius:8px;padding:2.5px 8px}
.disc-self{background:var(--soft-2);color:var(--muted)}
.disc-gift,.disc-aff,.disc-sponsor{background:var(--consider-soft);color:var(--consider)}
.ai-block{background:var(--ai-soft);border:1px dashed var(--brand-line);border-radius:var(--r);padding:16px 18px}
.ai-block .ai-tag{display:inline-flex;gap:6px;align-items:center;font:700 11px var(--font-ui);
  color:var(--ai-ink);letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.ai-block p{font-size:13.5px;color:var(--ink-2)}
.ai-block .src{font-size:12px;margin-top:9px}

/* ---------- 11 · Вопросы и ответы ---------- */
.qrow{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;color:var(--ink);transition:border-color .15s}
.qrow:hover{border-color:var(--brand);text-decoration:none}
.qrow b{font-size:14px;font-weight:700;letter-spacing:-.2px;display:block}
.qrow .m{font-size:12px;color:var(--muted);margin-top:5px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.ask-box{display:flex;gap:8px;background:var(--card);border:1.5px solid var(--line-2);border-radius:14px;
  padding:6px 6px 6px 14px;align-items:center}
.ask-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.ask-box input{flex:1;border:0;background:none;font:inherit;font-size:13.5px;color:var(--ink);min-width:0}
.ask-box input:focus{outline:none}
.answer{display:flex;gap:11px;padding:14px 0;border-top:1px solid var(--line)}
.answer:first-child{border-top:0}
.answer .body{flex:1;min-width:0}
.answer .who{font-size:12.5px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.answer .who b{font-size:13px}
.answer p{font-size:13.5px;color:var(--ink-2);margin-top:5px}
.answer .aft{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.helpful-mark{display:inline-flex;gap:5px;align-items:center;font:700 11px var(--font-ui);
  color:var(--own);background:var(--own-soft);border-radius:8px;padding:3px 9px}

/* ---------- 12 · Коллекции ---------- */
.ccard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;color:var(--ink);transition:transform .18s,box-shadow .18s}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);text-decoration:none}
.ccard .cov{display:block;aspect-ratio:16/9;background:var(--img-bg);overflow:hidden;position:relative;flex:none}
.ccard .cov img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ccard:hover .cov img{transform:scale(1.03)}
.ccard .cov .cnt{position:absolute;right:10px;bottom:10px;background:rgba(24,25,29,.72);color:#fff;
  font:700 11px var(--font-ui);border-radius:8px;padding:3px 9px;backdrop-filter:blur(4px)}
.ccard .cb{display:flex;flex-direction:column;flex:1;padding:13px 15px 14px}
.ccard .ct{font-family:var(--font-d);font-size:15.5px;font-weight:700;letter-spacing:-.3px;
  display:block;line-height:1.25}
.ccard:hover .ct{color:var(--brand-ink)}
.ccard .cs{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard .cm{display:flex;gap:7px;align-items:center;margin-top:auto;padding-top:11px;
  font:600 12px var(--font-ui);color:var(--ink-2);min-width:0}
.ccard .cm>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard .cm .sub{color:var(--dim);font-weight:500;flex:none}
.avatar.xs{width:22px;height:22px;font-size:11px;border-width:1px}
.avatar.init.xs{font-size:10px}
.citem{display:flex;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.citem .thumb{width:84px;height:84px;border-radius:11px;background:var(--img-bg);overflow:hidden;flex:none}
.citem .thumb img{width:100%;height:100%;object-fit:cover}
.citem .body{flex:1;min-width:0}
.citem .note{font-size:13px;color:var(--ink-2);font-style:italic;margin-top:4px}
.citem .ctl{display:flex;flex-direction:column;gap:4px}
.citem .ctl button{width:26px;height:26px;border:1px solid var(--line-2);background:var(--card);
  border-radius:8px;cursor:pointer;color:var(--muted);font-size:12px}
.citem .ctl button:hover{color:var(--brand-ink);border-color:var(--brand)}

/* ---------- 13 · Таймлайн жизненного цикла ---------- */
.timeline{position:relative;padding-left:24px;display:grid;gap:16px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:var(--line-2);border-radius:2px}
.tl-item{position:relative}
.tl-item .dot{position:absolute;left:-24px;top:3px;width:16px;height:16px;border-radius:50%;
  border:3px solid var(--card);box-shadow:0 0 0 1.5px var(--line-2);background:var(--past)}
.tl-item .dot.want{background:var(--want)} .tl-item .dot.consider{background:var(--consider)}
.tl-item .dot.own{background:var(--own)} .tl-item .dot.review{background:var(--brand)}
.tl-item .dot.end{background:var(--past)} .tl-item .dot.nouse{background:var(--nouse)}
.tl-item .tl-date{font-size:11.5px;color:var(--dim);font-weight:600}
.tl-item .tl-t{font-weight:700;font-size:13.5px;margin-top:1px}
.tl-item .tl-n{font-size:12.8px;color:var(--muted);margin-top:2px}
.lifeline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.lifeline .arr{color:var(--dim)}
.repl-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px}
.repl-card .arr{font-size:18px;color:var(--brand);flex:none}
.repl-card .thumb{width:56px;height:56px;border-radius:11px;background:var(--img-bg);overflow:hidden;flex:none}
.repl-card .thumb img{width:100%;height:100%;object-fit:cover}
.repl-card .share{margin-left:auto;font:700 12px var(--font-ui);color:var(--brand-ink);
  background:var(--brand-soft);border-radius:9px;padding:4px 10px;white-space:nowrap}

/* ---------- 14 · Сравнение ---------- */
.cmp-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.cmp-table th,.cmp-table td{padding:11px 16px;border-bottom:1px solid var(--line);
  font-size:13.5px;text-align:left;vertical-align:top}
.cmp-table tr:last-child td{border-bottom:0}
.cmp-table th{width:220px;color:var(--muted);font-weight:600;font-size:12.5px;background:var(--soft)}
.cmp-table td b.win{color:var(--own)}
.cmp-sec td,.cmp-sec th{background:var(--soft-2);font:700 11.5px var(--font-ui);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:8px 16px}
.cmp-head{display:grid;grid-template-columns:220px 1fr 1fr;gap:0;align-items:end}

/* ---------- 15 · Профиль ---------- */
.prof-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.prof-head .who{flex:1;min-width:200px}
.prof-head h1{font-size:clamp(22px,3vw,30px)}
.prof-head .m{color:var(--muted);font-size:13.5px;margin-top:3px}
.tabs{display:flex;gap:2px;border-bottom:1.5px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button,.tabs a{border:0;background:none;padding:10px 14px;font:600 13.5px var(--font-ui);
  color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;
  white-space:nowrap;display:inline-flex;gap:7px;align-items:center;text-decoration:none}
.tabs button:hover,.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs button.on,.tabs a.on{color:var(--ink);border-bottom-color:var(--brand);font-weight:700}
.tabs .cnt{font:700 11px var(--font-ui);background:var(--soft-2);color:var(--muted);
  border-radius:8px;padding:1.5px 7px}
.tabs button.on .cnt{background:var(--brand-soft);color:var(--brand-ink)}
.relcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;position:relative}
.relcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.relcard .pimg{aspect-ratio:4/3}
.relcard .rb{padding:12px 14px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.relcard .dur{font-size:12px;color:var(--muted)}
.stat-tiles{display:flex;gap:10px;flex-wrap:wrap}
.stat-tile{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:10px 16px;min-width:96px}
.stat-tile .v{font-family:var(--font-d);font-weight:800;font-size:20px;letter-spacing:-.5px}
.stat-tile .l{font-size:11.5px;color:var(--muted)}

/* ---------- 16 · Композер отзыва (степпер) ---------- */
.stepper{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.stepper .stp{display:flex;gap:7px;align-items:center;font:600 12px var(--font-ui);color:var(--dim)}
.stepper .stp .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--soft-2);color:var(--muted);font-size:11px;font-weight:700}
.stepper .stp.on{color:var(--ink)}
.stepper .stp.on .n{background:var(--brand);color:#fff}
.stepper .stp.done .n{background:var(--own-soft);color:var(--own)}
.stepper .sln{width:18px;height:1.5px;background:var(--line-2);flex:none}
.rate-row{display:flex;gap:6px}
.rate-btn{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--card);
  font-size:19px;cursor:pointer;display:grid;place-items:center;transition:all .13s;color:var(--dim)}
.rate-btn:hover{border-color:var(--consider)}
.rate-btn.on{border-color:var(--consider);background:var(--consider-soft);color:var(--consider)}
.tag-pick{display:flex;gap:7px;flex-wrap:wrap}
.tag-pick .tp{border:1.5px solid var(--line-2);background:var(--card);border-radius:20px;padding:7px 13px;
  font:600 12.5px var(--font-ui);color:var(--ink-2);cursor:pointer;transition:all .13s}
.tag-pick .tp.on-plus{border-color:var(--own);background:var(--own-soft);color:var(--own)}
.tag-pick .tp.on-minus{border-color:var(--regret);background:var(--regret-soft);color:var(--regret)}
.tag-pick .tp.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.yn-row{display:flex;gap:8px;flex-wrap:wrap}
.yn{flex:1;min-width:130px;border:1.5px solid var(--line-2);background:var(--card);border-radius:13px;
  padding:13px;cursor:pointer;text-align:center;font:700 13px var(--font-ui);color:var(--muted);transition:all .14s}
.yn.on-yes{border-color:var(--own);background:var(--own-soft);color:var(--own)}
.yn.on-no{border-color:var(--regret);background:var(--regret-soft);color:var(--regret)}
.yn.on-mid{border-color:var(--consider);background:var(--consider-soft);color:var(--consider)}
.yn .sub{display:block;font:500 11.5px var(--font-ui);margin-top:3px;color:var(--dim)}
.preview-note{background:var(--soft);border:1px dashed var(--line-2);border-radius:13px;
  padding:11px 14px;font-size:12.5px;color:var(--muted)}

/* ---------- 17 · Модалки, шиты, тосты ---------- */
.overlay{position:fixed;inset:0;background:rgba(20,18,26,.44);z-index:100;display:none;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.overlay.open{display:flex}
.modal{background:var(--card);border-radius:20px;box-shadow:var(--sh-pop);width:100%;max-width:520px;
  max-height:min(86vh,760px);overflow-y:auto;padding:22px;position:relative;
  animation:mup .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes mup{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:18px;letter-spacing:-.4px;margin-bottom:4px;padding-right:36px}
.modal .sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.modal .x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:10px;border:0;
  background:var(--soft-2);color:var(--muted);cursor:pointer;font-size:14px}
.modal .x:hover{background:var(--hover);color:var(--ink)}
.modal .foot{display:flex;gap:9px;margin-top:18px;justify-content:flex-end;flex-wrap:wrap}
.got-glow{text-align:center;padding:10px 0 4px}
.got-glow .ring{width:74px;height:74px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  font-size:32px;background:var(--own-soft);color:var(--own);
  animation:gotring .7s cubic-bezier(.2,.9,.3,1.4)}
@keyframes gotring{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:140;display:grid;gap:8px;
  width:min(430px,calc(100vw - 32px))}
.toast{background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 17px;font:600 13px var(--font-ui);
  box-shadow:var(--sh-pop);display:flex;gap:10px;align-items:center;animation:tup .25s ease}
html[data-theme="dark"] .toast{background:#f0eff5;color:#18191d}
.toast a{color:inherit;text-decoration:underline;margin-left:auto;white-space:nowrap}
@keyframes tup{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ---------- 18 · Активность, настройки, служебное ---------- */
.act-item{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;align-items:flex-start}
.act-item.unread{border-left:3px solid var(--brand)}
.act-item .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;
  flex:none;background:var(--soft-2)}
.act-item .ic.answer{background:var(--brand-soft)} .act-item .ic.remind{background:var(--consider-soft)}
.act-item .ic.follow{background:var(--own-soft)} .act-item .ic.want{background:var(--want-soft)}
.act-item .body{flex:1;min-width:0}
.act-item .body b{font-size:13.5px}
.act-item .body p{font-size:13px;color:var(--muted);margin-top:2px}
.act-item .when{font-size:11.5px;color:var(--dim);white-space:nowrap}
.empty{padding:44px 20px;text-align:center;border:1.5px dashed var(--line-2);border-radius:var(--r);
  background:var(--soft)}
.empty .ei{font-size:32px;margin-bottom:8px;opacity:.6}
.empty h3{margin-bottom:5px}
.empty p{color:var(--muted);font-size:13.5px;max-width:380px;margin:0 auto 14px}
.note-band{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:12px 15px;font-size:13px}
.note-band.info{background:var(--brand-soft);color:var(--brand-ink)}
.note-band.warn{background:var(--consider-soft);color:var(--consider)}
.note-band.priv{background:var(--soft-2);color:var(--muted)}
.proto-tag{display:inline-flex;gap:6px;align-items:center;font:600 11px var(--font-ui);color:var(--dim);
  border:1px dashed var(--line-2);border-radius:9px;padding:3px 9px;cursor:help}
.kv{display:grid;grid-template-columns:180px 1fr;gap:8px 16px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{font-weight:600}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:30px 18px;background:var(--hero-grad),var(--bg)}
.auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--sh-2);padding:28px}
.auth-card .brand{justify-content:center;display:flex;margin-bottom:18px}
.prose{max-width:720px;font-size:15px;line-height:1.72;color:var(--ink-2)}
.prose h2{margin:34px 0 12px} .prose h3{margin:24px 0 8px}
.prose p{margin:12px 0} .prose ul{margin:12px 0 12px 22px}
.prose .lead{font-size:17.5px;color:var(--ink)}
.flow-band{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.flow-band .fs{display:flex;flex-direction:column;gap:2px;min-width:96px}
.flow-band .fs b{font-size:13px}
.flow-band .fs span{font-size:11.5px;color:var(--muted)}
.flow-band .fa{color:var(--dim);font-size:16px;padding:0 4px}
.onb-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.onb-pick .op{border:1.5px solid var(--line-2);border-radius:14px;padding:14px 12px;cursor:pointer;
  background:var(--card);text-align:center;transition:all .14s;font:600 12.5px var(--font-ui);color:var(--ink-2)}
.onb-pick .op .oi{font-size:22px;display:block;margin-bottom:6px}
.onb-pick .op.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}

/* ---------- 19 · Responsive ---------- */
@media(max-width:1080px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  .main-nav{display:none}
  .grid-3{grid-template-columns:1fr 1fr}
  .cmp-head{grid-template-columns:130px 1fr 1fr}
  .cmp-table th{width:130px}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dt{margin-top:8px}
}
@media(max-width:760px){
  body{padding-bottom:64px;font-size:14px}
  .bottom-nav{display:block}
  .hdr-search{display:none}
  .sh-in{height:56px;gap:12px}
  .hdr-hide-m{display:none!important}
  .pgrid,.pgrid.cols-3{grid-template-columns:1fr 1fr;gap:11px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .exp-struct{grid-template-columns:1fr}
  .hero{padding:34px 0 22px}
  .wrap{padding:0 16px}
  .sec{margin:28px 0 13px}
  .shelf{grid-auto-columns:200px}
  .onb-pick{grid-template-columns:1fr 1fr}
  .truth-strip .ts{min-width:calc(50% - 1px);border-bottom:1px solid var(--line)}
  .truth-strip .ts:nth-last-child(-n+2){border-bottom:0}
  .ft-in{grid-template-columns:1fr 1fr;padding:28px 16px 18px}
  .modal{border-radius:20px 20px 0 0;max-width:none;align-self:flex-end;max-height:88vh;
    animation:shup .26s cubic-bezier(.2,.9,.3,1.1)}
  .overlay{padding:0;align-items:flex-end}
  @keyframes shup{from{transform:translateY(40%);opacity:.6}to{transform:none;opacity:1}}
  .sticky-act{position:fixed;left:0;right:0;bottom:64px;z-index:65;background:var(--glass);
    backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:9px 14px;display:flex;gap:8px}
  .sticky-act .rel-wrap{flex:1}
  .sticky-act .rel-btn{width:100%;justify-content:center}
}
@media(min-width:761px){.sticky-act{display:contents}.sticky-act .rel-btn{width:auto}}
@media print{
  .site-header,.bottom-nav,.site-footer,.sticky-act,.btn,.rel-wrap,.toast-wrap{display:none!important}
  body{background:#fff;color:#000}
  .card,.exp-card{border-color:#ccc;box-shadow:none}
}