:root {
  /* Палитра «тёплый шоколад» */
  --bg:#F7EFDF; --surface:#FFFCF6; --surface-2:#F0E4CD;
  --ink:#28190E; --ink-2:#6A5340; --ink-3:#7F6B55; --ink-4:#9C8974;
  --line:#E8DBC2; --line-2:#F2E7D2;
  --dark:#2C1810; --on-dark:#F8F0E4;
  --on-dark-2:rgba(248,240,228,.62); --on-dark-3:rgba(248,240,228,.42);
  --on-dark-line:rgba(248,240,228,.12); --on-dark-fill:rgba(248,240,228,.16);

  /* Акцент: --accent для фонов (белый текст проходит AA),
     --accent-hot для крупного текста, полосок и иконок,
     --accent-text для мелкого текста и ссылок на светлом фоне. */
  --accent:#C55009; --accent-hot:#D0560F; --accent-text:#B84A08;
  --accent-strong:#A63F12; --accent-soft:#FBE3D0; --accent-on-dark:#FF7A2B; --on-accent:#FFFFFF;

  --good:#4E8A3C; --good-soft:#EBF3DC; --good-on-dark:#B9DE86;
  --warn:#C9880F; --warn-soft:#F7E9CC;
  --bad:#C43D1B; --bad-soft:#F7D8C2;

  --radius:18px; --radius-sm:13px; --radius-lg:22px; --radius-pill:999px;
  --shadow:0 2px 5px rgba(60,34,16,.04), 0 10px 24px rgba(60,34,16,.06);
  --shadow-lg:0 4px 12px rgba(60,34,16,.05), 0 24px 56px rgba(60,34,16,.10);

  --font:'Public Sans', system-ui, sans-serif;
  --display:'Bricolage Grotesque', 'Public Sans', sans-serif;
  --display-weight:800; --display-tracking:-.03em;
  --vk:#0077FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4 { font-family:var(--display); margin:0; font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking); }
p { margin:0; }
a { color:var(--accent-text); }
a:hover { color:var(--accent-strong); }
[hidden] { display:none !important; }
.num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

::selection { background:var(--accent-soft); color:var(--accent-strong); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:var(--ink-3); border:3px solid transparent; background-clip:padding-box; }

/* ---------- кнопки ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:14.5px; line-height:1; border-radius:var(--radius-sm); padding:14px 20px;
  text-decoration:none; transition:background .16s, color .16s, box-shadow .16s, transform .12s, border-color .16s; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn-accent { background:var(--accent); color:var(--on-accent); }
.btn-accent:hover { background:var(--accent-strong); color:var(--on-accent); }
.btn-ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--ink-4); color:var(--ink); }
.btn-soft { background:var(--surface-2); color:var(--ink); }
.btn-soft:hover { background:var(--line); color:var(--ink); }
.btn-danger { background:transparent; color:var(--bad); border:1px solid var(--bad-soft); }
.btn-danger:hover { background:var(--bad-soft); color:var(--bad); }
.btn-sm { padding:10px 15px; font-size:13.5px; border-radius:11px; }
.btn-lg { padding:16px 26px; font-size:16px; border-radius:14px; }
.btn[disabled] { opacity:.45; pointer-events:none; }

/* ---------- поверхности ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.card-pad { padding:20px 22px; }
.card-pad-lg { padding:22px 24px; }
.hairline { height:1px; background:var(--line); border:none; margin:0; }

/* ---------- пилюли и теги ---------- */
.pill { display:inline-flex; align-items:center; gap:7px; background:var(--surface-2); color:var(--ink-2);
  border-radius:var(--radius-pill); padding:5px 12px; font-size:12.5px; font-weight:500; }
.pill-accent { background:var(--accent-soft); color:var(--accent-strong); font-weight:600; }
.pill-good { background:var(--good-soft); color:var(--good); font-weight:600; }
.pill-warn { background:var(--warn-soft); color:var(--warn); font-weight:600; }
.pill-bad { background:var(--bad-soft); color:var(--bad); font-weight:600; }
.pill-dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }
.tag { display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); color:var(--ink-2);
  border-radius:var(--radius-pill); padding:4px 11px; font-size:12.5px; font-weight:500; }
.tag-accent { background:var(--accent-soft); color:var(--accent-strong); }

/* ---------- поля ---------- */
.label { display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:8px; }
.field-num { font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; font-weight:600; color:var(--accent-text); }
.field-head { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.field-head .label { margin:0; }
.inp, select.inp, textarea.inp { width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px;
  outline:none; transition:border-color .16s, box-shadow .16s; }
.inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.inp::placeholder, textarea.inp::placeholder { color:var(--ink-4); }
.inp-err { border-color:var(--bad) !important; }
.inp-err:focus { box-shadow:0 0 0 3px var(--bad-soft) !important; }
textarea.inp { resize:vertical; min-height:112px; line-height:1.55; }
select.inp { cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239C8974' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.drop { border:1.5px dashed var(--line); background:#FFFDF8; border-radius:14px; padding:26px 20px; text-align:center;
  cursor:pointer; transition:border-color .18s, background .18s;
  /* Positioned so the visually-hidden file input inside it anchors here, and
     the browser's validation bubble points at the drop zone. */
  position:relative; }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--accent-soft); }

/* ---------- оболочка приложения ---------- */
.app { display:flex; height:100vh; overflow:hidden; }
.side { width:238px; flex-shrink:0; background:var(--dark); color:var(--on-dark); display:flex; flex-direction:column; }
.side-brand { height:70px; display:flex; align-items:center; padding:0 22px; border-bottom:1px solid var(--on-dark-line); }
.side-group { padding:20px 12px 8px 22px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-3); font-weight:600; }
.side-nav { padding:0 12px; display:flex; flex-direction:column; gap:2px; }
.side-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; font-size:14.5px;
  font-weight:500; color:rgba(248,240,228,.74); text-decoration:none; transition:background .14s, color .14s;
  border:none; background:none; width:100%; text-align:left; cursor:pointer; font-family:inherit; }
.side-item:hover { background:rgba(248,240,228,.07); color:var(--on-dark); }
.side-item.nav-active { background:rgba(255,122,43,.24); color:#FFB183; font-weight:600; }
.side-spacer { flex:1; }
.side-quota { margin:0 14px 14px; padding:13px 14px; border-radius:14px; background:rgba(248,240,228,.07); }
.side-quota-cap { font-size:11.5px; color:var(--on-dark-2); margin-bottom:8px; }
.side-quota-val { display:flex; align-items:baseline; gap:6px; margin-bottom:9px; }
.side-quota-num { font-family:var(--display); font-weight:700; font-size:19px; }
.side-quota-of { font-size:12.5px; color:var(--on-dark-3); }
.side-user { display:flex; align-items:center; gap:11px; padding:14px 18px; border-top:1px solid var(--on-dark-line);
  text-decoration:none; color:var(--on-dark); }
.side-user:hover, .side-user.nav-active { background:rgba(248,240,228,.06); color:var(--on-dark); }
.side-user-name { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-user-sub { font-size:11.5px; color:var(--on-dark-3); }
.side-ava { width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:var(--accent-on-dark); color:var(--dark); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { height:70px; flex-shrink:0; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 32px; }
.crumbs { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-3); }
.crumbs a { color:var(--ink-3); text-decoration:none; }
.crumb-cur { color:var(--ink); font-weight:600; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.topbar-lead { display:flex; align-items:center; gap:12px; min-width:0; }
.nav-toggle { display:none; }
.nav-backdrop { display:none; }
.scroll { flex:1; overflow-y:auto; }
.page { max-width:960px; padding:34px 32px 44px; display:flex; flex-direction:column; gap:24px; }
.page-wide { max-width:1000px; }
.page-narrow { max-width:820px; }
.h-page { font-size:30px; margin-bottom:6px; }
.h-sec { font-size:19px; }
.h-card { font-size:16px; }
.sub { font-size:15px; color:var(--ink-2); }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.link-accent { font-size:14px; color:var(--accent-text); text-decoration:none; font-weight:600; }

/* ---------- плитки статистики ---------- */
.tiles { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:14px; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; }
.tile-dark { background:var(--dark); color:var(--on-dark); border-radius:var(--radius); padding:20px 22px;
  display:flex; flex-direction:column; justify-content:space-between; }
.tile-cap { font-size:12.5px; color:var(--ink-3); font-weight:500; margin-bottom:14px; }
.tile-dark .tile-cap { color:var(--on-dark-2); margin-bottom:0; }
.tile-num { font-family:var(--display); font-weight:800; font-size:34px; line-height:1; letter-spacing:-.03em; }
.tile-foot { font-size:13px; color:var(--ink-2); margin-top:9px; }
.tile-dark .tile-foot { color:var(--on-dark-2); }
.tile-big { display:flex; align-items:baseline; gap:7px; margin:14px 0 12px; }
.tile-big-num { font-family:var(--display); font-weight:800; font-size:44px; line-height:.9; letter-spacing:-.03em;
  color:var(--good-on-dark); }
.tile-big-of { font-size:13px; color:var(--on-dark-3); }

.meter-track { height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.meter-track-on-dark { background:var(--on-dark-fill); }
.meter-fill { height:100%; border-radius:999px; transition:width 1.1s cubic-bezier(.22,1,.36,1); }
.meter-fill-good-on-dark { background:var(--good-on-dark); }
.meter-fill-accent { background:var(--accent-hot); }

/* ---------- шаги доступа ---------- */
.steps-head { padding:18px 22px 16px; display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.steps-note { font-size:13px; color:var(--ink-3); }
.step { border-top:1px solid var(--line-2); padding:16px 22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.step:first-child { border-top:none; }
.step-ico { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background:var(--surface-2); color:var(--ink-3); }
.step-ico-ok { background:var(--good-soft); color:var(--good); }
.step-body { flex:1; min-width:220px; }
.step-title { font-size:14.5px; font-weight:600; }
.step-text { font-size:13px; color:var(--ink-2); margin-top:3px; line-height:1.5; }
.step-aside { display:flex; align-items:center; gap:12px; flex-shrink:0; }

/* ---------- списки разборов ---------- */
.list { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.list-row { display:flex; align-items:center; gap:16px; padding:14px 20px; text-decoration:none; color:inherit;
  transition:background .14s; }
.list-row + .list-row { border-top:1px solid var(--line-2); }
.list-row:hover { background:#FFFDF8; color:inherit; }
.thumb { width:56px; height:56px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.row-main { flex:1; min-width:0; }
.row-title { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:6px; }
.row-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-3); }
.row-score { text-align:right; flex-shrink:0; min-width:76px; }
.row-score-num { font-family:var(--display); font-weight:800; font-size:26px; line-height:1; letter-spacing:-.03em; }
.row-score-cap { font-size:12px; color:var(--ink-3); margin-top:4px; }
.row-chevron { flex-shrink:0; color:#BFAE99; }

/* заглушка изображения */
.ph { background-color:var(--surface-2);
  background-image:repeating-linear-gradient(135deg, transparent 0 11px, rgba(0,0,0,.03) 11px 12px);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; color:var(--ink-3); }
.ph-label { font-size:11px; letter-spacing:.04em; font-family:ui-monospace,'SF Mono',Menlo,monospace; }

/* ---------- форма разбора ---------- */
.form-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:16px; align-items:start; }
.form-col { display:flex; flex-direction:column; gap:14px; }
.form-bar { flex-shrink:0; background:var(--surface); border-top:1px solid var(--line); padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.form-bar-note { font-size:13px; color:var(--ink-3); }
.aud-list { display:flex; flex-direction:column; gap:9px; max-height:520px; overflow-y:auto; padding-right:4px; }
.aud-label { display:block; cursor:pointer; }
.aud { border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:13px 15px; transition:border-color .16s, background .16s; }
.aud-head { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.aud-name { font-size:14.5px; font-weight:600; }
.aud-meta { font-size:13px; color:var(--ink-3); padding-left:26px; margin-bottom:7px; }
.aud-tags { display:flex; flex-wrap:wrap; gap:6px; padding-left:26px; }
.radio-dot { width:16px; height:16px; border-radius:50%; border:2px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; }
.aud-label:hover .aud { border-color:var(--ink-4); }
.aud-label:has(input:checked) .aud { border-color:var(--accent); border-width:1.5px; background:#FEF4EE; }
.aud-label:has(input:checked) .radio-dot { border-color:var(--accent); }
.aud-label:has(input:checked) .radio-dot::after { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); }
/* Visually hidden but still focusable. `display:none` is not a substitute: a
   browser will not focus such a control to anchor a validation bubble on, so a
   `required` one blocks the submit showing nothing at all. */
.sr-radio, .sr-control { position:absolute; opacity:0; width:0; height:0; }

/* ---------- результат разбора (вариант B) ---------- */
.detail { flex:1; display:grid; grid-template-columns:300px 1fr; min-height:0; }
.detail-rail { border-right:1px solid var(--line); padding:28px 26px; background:#FBF5EA;
  display:flex; flex-direction:column; gap:20px; overflow-y:auto; }
.ring-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; }
.ring-track { stroke:#E9DECC; }
.ring-fill { stroke:currentColor; transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1); }
.ring-num { font-family:var(--display); font-size:52px; font-weight:800; fill:var(--ink); letter-spacing:-2px; }
.ring-of { font-family:var(--font); font-size:13px; fill:var(--ink-3); }
.ring-verdict { font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:-.02em; text-align:center; }
.ring-delta { font-size:13px; color:var(--ink-2); margin-top:4px; text-align:center; }
.metrics { display:flex; flex-direction:column; }
.metric { display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; }
.metric + .metric { border-top:1px solid #E9DECC; }
.metric-cap { font-size:13.5px; color:var(--ink-2); }
.metric-val { font-size:15px; font-weight:700; }
.rail-cap { font-size:11px; color:var(--ink-3); font-weight:700; letter-spacing:.1em; margin-bottom:10px; }
.rail-ph { height:130px; border-radius:14px; margin-bottom:12px; }
.rail-text { font-size:13px; color:var(--ink-2); line-height:1.55; }
.rail-note { font-size:12.5px; color:var(--ink-3); line-height:1.5; margin-top:10px; }
.detail-body { overflow-y:auto; padding:28px 34px 40px; }
.detail-inner { max-width:660px; display:flex; flex-direction:column; gap:22px; }
.verdict-h { font-size:32px; line-height:1.1; letter-spacing:-.035em; margin-bottom:14px; }
.verdict-text { font-size:16px; color:var(--ink-2); line-height:1.65; }
.sec-h-row { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.sec-ico { width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sec-ico-good { background:var(--good-soft); }
.sec-ico-accent { background:var(--accent-soft); }
.sec-note { margin-left:auto; font-size:13px; color:var(--ink-3); }
.strengths { display:flex; flex-direction:column; border-top:1px solid var(--line-2); }
.strength { padding:12px 0; border-bottom:1px solid var(--line-2); font-size:14.5px; color:var(--ink-2); line-height:1.55; }
.recs { display:flex; flex-direction:column; gap:10px; }
.rec { border:1px solid var(--line); border-left:3px solid var(--accent-hot); border-radius:14px; padding:15px 18px; }
.rec-minor { border-left-color:#DCCDB6; }
.rec-text { font-size:14px; color:var(--ink-2); line-height:1.6; }
.rating-bar { border-top:1px solid var(--line-2); padding-top:18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.rating-bar-title { flex:1; min-width:200px; font-size:14.5px; font-weight:600; }
.stars { display:flex; gap:5px; }
.star-btn { background:none; border:none; cursor:pointer; padding:0; line-height:1; transition:transform .12s; }
.star-btn:hover { transform:scale(1.12); }

/* ---------- интеграции ---------- */
.acct-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.acct-name { font-size:16px; font-weight:700; }
.acct-id { font-size:13px; color:var(--ink-3); margin-top:3px; }
.acct-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line-2);
  border-radius:var(--radius-sm); overflow:hidden; margin-bottom:16px; }
.acct-meta-cell { background:#FFFDF8; padding:13px 15px; }
.acct-meta-cap { font-size:12px; color:var(--ink-3); margin-bottom:5px; }
.acct-meta-val { font-size:13.5px; font-weight:600; }
.acct-actions { display:flex; gap:9px; flex-wrap:wrap; }
.acct-actions form { margin:0; }
.alert { border-radius:var(--radius-sm); padding:13px 15px; font-size:13.5px; line-height:1.5; }
.alert-bad { background:#FDF0EA; border:1px solid var(--bad-soft); color:var(--ink); }
.alert-good { background:var(--good-soft); color:var(--good); }
.alert-warn { background:var(--warn-soft); color:var(--ink); }
.alert-info { background:var(--accent-soft); color:var(--ink); }
.vk-badge { width:44px; height:44px; border-radius:13px; background:var(--vk); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; }
.code { font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12.5px; background:var(--surface-2);
  padding:1px 6px; border-radius:5px; }
.log { font-size:11px; color:var(--ink-2); background:var(--surface-2); border-radius:var(--radius-sm); padding:12px;
  overflow:auto; max-height:120px; font-family:ui-monospace,'SF Mono',Menlo,monospace; line-height:1.5; margin:10px 0 0; }

/* ---------- профиль ---------- */
.prof-grid { display:grid; grid-template-columns:1fr 330px; gap:16px; align-items:start; }
.prof-col { display:flex; flex-direction:column; gap:14px; }
.avatar-lg { width:72px; height:72px; border-radius:50%; object-fit:cover; background:var(--accent-soft);
  color:var(--accent-strong); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:26px; margin:0 auto 14px; }
.plan-card { background:var(--dark); color:var(--on-dark); border-radius:var(--radius); padding:22px 24px; }
.plan-cap { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3); font-weight:600; margin-bottom:12px; }
.plan-row { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.plan-name { font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-.03em; }
.plan-price { font-size:15px; font-weight:600; color:var(--on-dark-2); }
.plan-quota { font-size:13.5px; color:var(--on-dark-2); margin-bottom:18px; }
.plan-used { font-size:12.5px; color:var(--on-dark-2); margin-top:9px; }
.btn-on-dark { display:flex; align-items:center; justify-content:center; height:42px; border-radius:var(--radius-sm);
  background:rgba(248,240,228,.12); color:var(--on-dark); font-size:14px; font-weight:600; text-decoration:none; margin-top:18px; }
.btn-on-dark:hover { background:rgba(248,240,228,.18); color:var(--on-dark); }
.form-stack { display:flex; flex-direction:column; gap:14px; }
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-3col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* ---------- лендинг / авторизация ---------- */
.logo { font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.03em; color:var(--ink);
  text-decoration:none; display:inline-flex; align-items:center; }
.logo .dot { width:10px; height:10px; border-radius:40% 60% 62% 38% / 52% 44% 56% 48%; background:var(--accent-hot);
  display:inline-block; margin-right:9px; }
.logo .up { color:var(--accent-hot); }
.side-brand .logo { color:var(--on-dark); }
.side-brand .logo .dot, .side-brand .logo .up { color:var(--accent-on-dark); background-color:var(--accent-on-dark); }
.side-brand .logo .up { background:none; }
/* Which tab is active is `is-active` and nothing else. The markup used to
   carry one fixed state as utilities — `bg-surface c-ink shadow-xs` on the VK
   button, `bg-transparent c-ink-2` on the Email one — which the script never
   touched, so `!important` here had to undo four declarations this repository
   wrote itself. It could not undo the fifth: the `shadow-xs` utility and
   `.auth-tab:not(.is-active)` tie at (0,2,0) and utilities.css loads last, so
   the VK tab kept a raised shadow while Email was selected. */
.auth-tab.is-active { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.06); }
.auth-tab:not(.is-active) { background:transparent; color:var(--ink-2); box-shadow:none; }
/* The consent gate draws itself. It used to be JS: the tick was a `hidden`
   attribute a script cleared, and the button's dimming was `pointer-events:none`
   the same script lifted — so the state of a checkbox the browser already tracks
   was mirrored by hand, and a script that had not run yet left the only VK
   sign-in button on the page permanently unclickable. `:has()` reads the
   checkbox directly, and what the dimming means is now only "not yet ticked":
   the button stays clickable, and `required` is what refuses the submit. */
.consent-check { display:none; }
.vk-login-form:has(#consent:checked) .consent-check { display:block; }
.vk-login-form:has(#consent:checked) .consent-box { background:var(--accent); border-color:var(--accent); }
.vk-login-btn { opacity:.45; }
.vk-login-form:has(#consent:checked) .vk-login-btn { opacity:1; box-shadow:0 6px 18px rgba(0,119,255,.26); }

@keyframes fadeUp { from{transform:translateY(13px);} to{transform:translateY(0);} }
.fu  { animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both; }
.fu1 { animation:fadeUp .55s .07s cubic-bezier(.22,1,.36,1) both; }
.fu2 { animation:fadeUp .6s .14s cubic-bezier(.22,1,.36,1) both; }
.fu3 { animation:fadeUp .65s .21s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .fu,.fu1,.fu2,.fu3 { animation:none; } .side { transition:none; } }

@media (max-width:1100px) {
  .tiles { grid-template-columns:1fr; }
  .form-grid, .prof-grid { grid-template-columns:1fr; }
  .detail { grid-template-columns:1fr; }
  .detail-rail { border-right:none; border-bottom:1px solid var(--line); }
}
@media (max-width:860px) {
  .side { position:fixed; top:0; bottom:0; left:0; z-index:40; width:min(288px,84vw);
    overflow-y:auto; transform:translateX(-100%); transition:transform .22s cubic-bezier(.22,1,.36,1); }
  .side.is-open { transform:none; box-shadow:0 12px 40px rgba(24,12,4,.42); }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:38px; height:38px; border:none; border-radius:11px; cursor:pointer;
    background:var(--surface-2); color:var(--ink); }
  .nav-toggle:hover { background:var(--line); }
  .nav-backdrop { display:block; position:fixed; inset:0; z-index:39; background:rgba(24,12,4,.42); }
  .crumbs { min-width:0; overflow:hidden; }
  .crumb-cur { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .page { padding:24px 18px 40px; }
  .topbar { padding:0 18px; }
  .form-2col, .form-3col { grid-template-columns:1fr; }
  .lp-hero { grid-template-columns:1fr !important; }
  .lp-nav { display:none !important; }
}