/* Экран входа кабинета, прототип r3 (22.10, правки CD .claude/agent-briefs/cd-verdict-app-login-r2.md).
   Разбор research/pixelpoint-login-reference-analysis.md. Сетка сайта: 12 колонок, поле --pad (1440 → 128), гаттер clamp(16, 1.25vw, 32).
   Форма = 4 колонки (1440 → 384) и встаёт краем на поле шапки. Ритм 8. Радиусы — токены сайта: кнопки var(--r-btn) squircle, поле 12. */
@font-face { font-family: 'Geologica'; src: url('/fonts/Geologica-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('/fonts/Onest-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('/fonts/Onest-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('/fonts/Onest-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* QA М1 (29.10): страницы кабинета включают cross-document View Transition; вход тоже участвует, но без анимации —
   иначе переход кабинет → вход (выход) прерывался ошибкой в консоли. Свой переход «вход → Обзор» (tr.js) не меняется */
@view-transition { navigation: auto; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
:root {
  color-scheme: dark;
  --t1: #FFFFFF;
  --t2: #E0E3E8;            /* 14/500 на #000: 16.3 / Lc −89.6 */
  --t3: #CACDD2;            /* «или», 14/400 на #000: 13.2 / Lc −76 */
  --acc: #BCE2FF;           /* ссылки и фокус: 15.5 / Lc −86 */
  --err: #FF9E94;
  --line: rgb(255 255 255 / 0.16);
  --r-fld: 12px;            /* поле; кнопки — var(--r-btn) сайта (12, squircle 16) */
  --gut: clamp(16px, 1.25vw, 32px);
  --col: calc((100vw - 2 * var(--pad) - 11 * var(--gut)) / 12);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
html, body { margin: 0; background: #000; color: var(--t1); }
body { font: 400 16px/24px var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
::selection { background: rgb(24 119 242 / 0.55); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
button, a, input { touch-action: manipulation; }
/* шапка на экране входа: «Войти» скрыта — главное действие уже в форме (CD r2 п.11) */
.hd .login { display: none; }

.stage { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-content: center;
  padding: calc(var(--header-h) + 48px) var(--pad) max(48px, env(safe-area-inset-bottom)); }
.panel { position: relative; z-index: 2; grid-column: 9 / 13; }
.brand { position: absolute; z-index: 0; overflow: hidden; pointer-events: none; }

/* ---------- форма ---------- */
.ttl { margin: 0; font: 500 28px/1.15 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.ttl:focus { outline: none; }
.sub { margin: 8px 0 0; color: #EEF0F3; text-wrap: pretty; }
.sub b { color: var(--t1); font-weight: 500; overflow-wrap: anywhere; }
.tick { font-variant-numeric: tabular-nums; }
.frm { display: grid; gap: 16px; margin-top: 32px; }
.fld { display: grid; gap: 8px; }
.lbl { font: 500 14px/20px var(--font); color: var(--t2); }
.box { position: relative; }
.fld input { box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: var(--r-fld);
  font: 400 16px/24px var(--font); letter-spacing: -0.01em; color: var(--t1); caret-color: var(--acc);
  background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px var(--line); outline: none; appearance: none;
  transition: box-shadow 140ms ease, background-color 140ms ease; }
.fld:has(.peek) input { padding-right: 104px; }
@media (hover: hover) and (pointer: fine) { .fld input:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28); } }
.fld input:focus { background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1.5px var(--acc); }
.fld.bad input, .fld.bad input:focus { box-shadow: inset 0 0 0 1.5px var(--err); }
.fld input:-webkit-autofill { -webkit-text-fill-color: var(--t1); caret-color: var(--acc); transition: background-color 600000s 0s;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 100px #0E1116; }
.fld input:-webkit-autofill:focus { box-shadow: inset 0 0 0 1.5px var(--acc), inset 0 0 0 100px #0E1116; }
.peek { position: absolute; right: 0; top: 0; height: 44px; min-width: 92px; padding: 0 14px; border: 0; border-radius: 0 var(--r-fld) var(--r-fld) 0;
  background: none; color: var(--t2); font: 500 14px/1 var(--font); letter-spacing: -0.01em; cursor: pointer; transition: color 140ms ease, background-color 140ms ease; }
@media (hover: hover) and (pointer: fine) { .peek:hover { color: var(--t1); background: rgb(255 255 255 / 0.05); } }
.peek:focus-visible { outline-offset: -3px; }
.fe { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--err); font: 400 14px/20px var(--font); }
.ic { flex: none; width: 20px; height: 20px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-fld); font: 400 14px/20px var(--font);
  color: #FFE1DC; background: rgb(255 110 96 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 130 110 / 0.28); }
.alert .ic { color: var(--err); }
.alert[hidden], .fe[hidden] { display: none; }

.lnk { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--acc); font: 500 14px/20px var(--font); letter-spacing: -0.01em; text-decoration: none; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .lnk:hover { text-decoration: underline; } }
.lnk .ic { margin-left: -4px; }
.row-forgot { display: flex; justify-content: flex-end; margin: -12px 0 -8px; }
.row-back { display: flex; margin-top: -4px; }

/* кнопки: высота поля, радиус — токен сайта (squircle 16 где есть corner-shape, иначе 12), плоские, без свечения */
.b { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--r-btn); cursor: pointer; font: 500 16px/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
  transition: background-color 160ms ease, transform 140ms var(--ease); }
@supports (corner-shape: squircle) { .b { corner-shape: squircle; } }
.b:active { transform: scale(0.97); }
.b-main { color: #fff; background: var(--cta); }
@media (hover: hover) and (pointer: fine) { .b-main:hover { background: var(--cta-hover); } }
.b-main.is-ok { background: #0F57B8; }
.b-quiet { color: var(--t1); background: none; box-shadow: inset 0 0 0 1px var(--line); }
.b-quiet:disabled { color: var(--t3); cursor: default; transform: none; }
@media (hover: hover) and (pointer: fine) { .b-quiet:not(:disabled):hover { background: rgb(255 255 255 / 0.05); } }
/* Google: Branding Guidelines, тёмная тема — #131314, обводка #8E918F 1 px внутри, текст #E3E3E3, Roboto Medium (гайд допускает
   вместо Google Sans). Эталон 40 px: отступ 12 · G 20 · 10 · текст 14/20 · 12 → ×1.1 под 44: 13 · G 22 · 11 · 15.4/22 · 13 */
.b-google { gap: 11px; padding: 0 13px; color: #E3E3E3; background: #131314; box-shadow: inset 0 0 0 1px #8E918F;
  font: 500 15.4px/22px Roboto, 'Google Sans', var(--font); letter-spacing: 0.25px; }
.b-google svg { width: 22px; height: 22px; flex: none; }
@media (hover: hover) and (pointer: fine) { .b-google:hover { background: #1F1F21; } }
.b.is-busy { cursor: progress; }
.b.is-busy .b-t::after { content: '…'; }
@media (prefers-reduced-motion: no-preference) {
  .b.is-busy .b-t { animation: busy 900ms ease-in-out infinite alternate; }
  @keyframes busy { to { opacity: 0.55; } }
  /* смена экрана (вход → сброс → письмо): короткое появление 200 мс, ease-out; первый показ без анимации */
  /* v2 final: переход по направлению — вперёд (вход → сброс → письмо) въезжает справа, назад — слева; 220 мс, лесенка 40 мс */
  .panel.swap > * { animation: swap-f 220ms var(--ease) both; }
  .panel.swap[data-dir="back"] > * { animation-name: swap-b; }
  .panel.swap > :nth-child(2) { animation-delay: 40ms; }
  .panel.swap > :nth-child(3) { animation-delay: 80ms; }
  @keyframes swap-f { from { opacity: 0; transform: translate3d(14px, 0, 0); } }
  @keyframes swap-b { from { opacity: 0; transform: translate3d(-14px, 0, 0); } }
  @keyframes swap { from { opacity: 0; transform: translateY(6px); } }
  .alert:not([hidden]) { animation: swap 160ms var(--ease); }
}
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--t3); font: 400 14px/20px var(--font); }
.or::before, .or::after { content: ''; height: 1px; background: rgb(255 255 255 / 0.12); }

.req { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.req li { display: flex; gap: 8px; align-items: center; color: var(--t3); font: 400 14px/20px var(--font); transition: color 140ms ease; }
.req li .ic { opacity: 0.45; transition: opacity 140ms ease; }
.req li.ok { color: var(--t1); }
.req li.ok .ic { opacity: 1; color: var(--acc); }
.foot { margin: 24px 0 0; color: var(--t2); font: 400 14px/20px var(--font); }
.foot .lnk { display: inline; min-height: 0; padding-block: 12px; }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* v1 «Пиксели» удалён (Илья 23.10: «удали пожалуйста там 1 пиксели»), копия — _stable-r9/ */

/* =========================================================== 2 «Кабинеты» (Slash) ===
   Форма колонки 1–4 (левый край = поле шапки). Панель-предмет выходит в правый край и вниз (как Neon/Slash, CD r2 п.9):
   от 50 % + полгаттера до края экрана, под шапкой. Предмет — 2 крупных агентских кабинета внахлёст (CD r2 п.2–3):
   передний графитовый (Meta), задний синий (TikTok), подписи нет — знак площадки говорит сам. Свет за верхним правым углом стопки. */
html[data-v="2"] .panel { grid-column: 1 / 5; }
html[data-v="2"] .brand { left: calc(50% + var(--gut) / 2); right: 0; top: 0; bottom: 0; background: #050608; box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.06); }
/* v2 final r3: ряды карт как у Slash поверх шейдерного vibrant Sui. Механика — замер Slash (rows.json): карта 220×140 r12,
   зазор 24, rotate(−15°) scale(1.9), ряды навстречу 24.3 px/с; вход 500 мс ease-out.
   r3 «мыльно»: блок больше не масштабируется — все размеры карты умножены на --u (1.9 на десктопе, 1 на телефоне) и рисуются
   вектором в итоговом размере; прозрачность рядов 1 (полупрозрачность давала муть); зерно — в шейдере, только на фоне. */
html[data-v="2"] .brand { --u: 1.4; background: #000; /* r10b: 1.6 → 1.4 (308×196): в панели 711 px целиком читаются 2–3 карты, а не ни одной */ top: var(--header-h) !important; } /* под стеклом шапки карты размывались в мутную полосу */
/* r4: края панели свободнее за счёт размера карты (352×224 вместо 418×266) и виньетки шейдера; маску-растворение рядов
   не ставлю — растворённые края карт читались мылом */
/* r5: свет ядра поверх карт — WebGL-оверлей (cards.js, FS_GLOW), screen: засветка против света, ореол съедает край,
   дисперсия по кромке; прозрачен вдали от ядра */
/* r6: без mix-blend-mode (blend над движущимися рядами заставлял перекомпоновывать всю панель каждый кадр) — свет складывается
   через premultiplied alpha холста; плёночное зерно — в этом же шейдере, отдельного слоя .film больше нет */
.glow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; pointer-events: none; }
.vib { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.brand[data-nogl] .vib { background: radial-gradient(60% 40% at 40% 65%, #1877F2, #002E6A 55%, #000 80%); }
/* r10b: ряды r9 (Илья: «прошлые были как будто лучше»). Вход рядов 700 мс strong ease-out без fill: в неотрисованной вкладке шкала
   стоит, и fill both держал ряды в opacity 0 («через 6 и 10 с карт не видно», оркестратор 01:31) */
.rows-host { position: absolute; inset: 0; z-index: 1; overflow: hidden; animation: rows-in 700ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes rows-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
.rows { position: absolute; left: 50%; top: 50%; width: calc(1400px * var(--u)); display: flex; flex-direction: column; gap: calc(24px * var(--u));
  transform: translate(-50%, -50%) rotate(-15deg); }
.track { display: flex; gap: calc(24px * var(--u)); width: max-content; will-change: transform; animation: mq 60.25s linear infinite; } /* 6 × 244 px / 24.3 px/с, ×u на экране */
.row[data-dir="r"] .track { animation-direction: reverse; }
.row:nth-child(even) .track { margin-left: calc(-122px * var(--u)); } /* кирпичная кладка: ряды сдвинуты на полкарты, как у Slash */
@keyframes mq { to { transform: translate3d(calc(-1464px * var(--u)), 0, 0); } }
.brand[data-paused="1"] .track, .brand[data-still] .track { animation-play-state: paused; }

/* карта r10b: формат и материалы r9 (Slash, палитра Sui). Чипа нет (Илья). Знак площадки — справа сверху, 30 вместо 26 (главный
   опознаватель карты, читается первым); BlueWave — слева снизу, тише (0.7); тиснёные кривые r9 остались. */
.cd { position: relative; flex: none; width: calc(220px * var(--u)); height: calc(140px * var(--u)); border-radius: calc(12px * var(--u)); overflow: hidden;
  --ink: 255 255 255; --hi: 0.14; --lo: 0.35;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.22), 0 calc(10px * var(--u)) calc(20px * var(--u)) calc(-4px * var(--u)) rgb(0 0 0 / 0.5); }
.cd[data-m="black"]    { background: linear-gradient(135deg, #1D2026 0%, #0A0B0D 52%, #16191D 100%); }
.cd[data-m="graphite"] { background: linear-gradient(135deg, #3B4048 0%, #1C1F24 58%, #2C3036 100%); }
.cd[data-m="steel"]    { background: linear-gradient(135deg, #AFB7C2 0%, #7E8792 44%, #A1AAB5 68%, #68717C 100%); --ink: 8 14 26; --hi: 0.45; --lo: 0.16; }
.cd[data-m="blue"]     { background: linear-gradient(135deg, #2A7CEB 0%, #0D4AA8 52%, #1A66D6 100%); }
.cd[data-m="midnight"] { background: linear-gradient(135deg, #102344 0%, #050C1A 58%, #0C1A34 100%); }
.cd[data-m="sky"]      { background: linear-gradient(135deg, #A6D2FF 0%, #5CA9FF 50%, #8FC7FF 100%); --ink: 4 20 48; --hi: 0.5; --lo: 0.14; }
.cd-cv { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 0.9; stroke-dasharray: 1.6 1.4; stroke-linecap: round; }
.cd-cv .cv-l { stroke: rgb(255 255 255 / var(--hi)); transform: translate(0.5px, 0.5px); }
.cd-cv .cv-d { stroke: rgb(0 0 0 / var(--lo)); }
.cd-pl { position: absolute; right: calc(16px * var(--u)); top: calc(16px * var(--u)); width: calc(30px * var(--u)); height: calc(30px * var(--u)); fill: rgb(var(--ink) / 0.88); }
.cd-br { position: absolute; left: calc(16px * var(--u)); bottom: calc(16px * var(--u)); width: calc(70px * var(--u)); height: calc(13px * var(--u)); background: url('/brand/bluewave_horizontal-small_white.svg') left center / contain no-repeat; opacity: 0.7; }
.cd[data-m="steel"] .cd-br, .cd[data-m="sky"] .cd-br { background-image: url('/brand/bluewave_horizontal-small_ink.svg'); opacity: 0.66; }
/* ---------- r10f: левая половина (Илья, выбрал карточкой) ---------- */
/* 1) свет сцены на форме: cards.js ставит --sl (0…1) — насколько плавающее ядро близко к левому краю панели; правая сторона полей
   и кнопки чуть светлеет тем же синим, градиентом внутри элемента (без линии по краю) */
html[data-v="2"] .fld input, html[data-v="2"] .b-google { background-image: linear-gradient(to left, rgb(92 169 255 / calc(var(--sl, 0) * 0.13)), rgb(92 169 255 / 0) 55%); }
/* 3) фокус поля: вместо обводки 1.5 px — мягкое синее свечение снизу, растекается за 150 мс (ease-out) */
html[data-v="2"] .fld input { transition: box-shadow 150ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease; }
html[data-v="2"] .fld input:focus { background-color: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(143 203 255 / 0.22), 0 12px 22px -12px rgb(24 119 242 / 0.95), 0 18px 34px -18px rgb(92 169 255 / 0.7); }
html[data-v="2"] .fld.bad input, html[data-v="2"] .fld.bad input:focus { box-shadow: inset 0 0 0 1.5px var(--err); }
/* 2) «Войти»: тёмное матовое стекло, внутри медленно плавает мини-ядро (стопка 3 смещённых мягких пятен разного размера и оттенка,
   blur 10 px — растр считается один раз, двигается только transform). hover — разгорается, press — стягивается к центру (180 мс),
   загрузка — пульс ядра. */
html[data-v="2"] .b-main { overflow: hidden; isolation: isolate; background: #0A1220; box-shadow: inset 0 0 0 1px rgb(143 203 255 / 0.18); }
html[data-v="2"] .b-main .b-t { position: relative; z-index: 1; }
html[data-v="2"] .b-main::before { content: ''; position: absolute; z-index: 0; left: 20%; top: -60%; width: 60%; height: 220%; pointer-events: none;
  background: radial-gradient(34% 22% at 38% 52%, rgb(143 203 255 / 0.55), rgb(143 203 255 / 0) 100%),
              radial-gradient(46% 30% at 58% 46%, rgb(24 119 242 / 0.85), rgb(24 119 242 / 0) 100%),
              radial-gradient(70% 40% at 48% 56%, rgb(10 46 110 / 0.9), rgb(10 46 110 / 0) 100%);
  filter: blur(10px); opacity: 0.8; transform: translate3d(-18%, 0, 0) scale(1);
  transition: opacity 220ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  html[data-v="2"] .b-main::before { animation: core-float 13s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
  @keyframes core-float { 0% { translate: -22% 4%; } 37% { translate: 14% -6%; } 71% { translate: -6% 8%; } 100% { translate: 20% -2%; } }
  html[data-v="2"] .b-main.is-busy::before { animation: core-pulse 1100ms cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
  @keyframes core-pulse { from { opacity: 0.55; scale: 0.85; } to { opacity: 1; scale: 1.12; } }
}
@media (hover: hover) and (pointer: fine) { html[data-v="2"] .b-main:hover { background: #0C1628; } html[data-v="2"] .b-main:hover::before { opacity: 1; transform: translate3d(-18%, 0, 0) scale(1.15); } }
html[data-v="2"] .b-main:active::before { transform: translate3d(-18%, 0, 0) scale(0.55); opacity: 1; }
html[data-v="2"] .b-main.is-ok { background: #0A1220; }
/* 4) знак горы под формой — отвергнут Ильёй 23.10 («логотип… стоит все же убрать»), левая половина под формой — чистый чёрный */
@media (max-width: 1023px) {
  /* телефон r10: форма сверху в первом экране, колода встаёт под ней и режется нижним краем; сцена на всю высоту под шапкой,
     над формой — чёрный (градиент от --fold, ставит cards.js по низу формы) */
  html[data-v="2"] .stage { align-content: start; padding-top: calc(var(--header-h) + 28px); }
  html[data-v="2"] .brand { --u: 1.1; left: 0; right: 0; bottom: 0; }
  html[data-v="2"] .brand::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(to bottom, #000 0, #000 calc(var(--fold, 60%) + 4px), rgb(0 0 0 / 0) calc(var(--fold, 60%) + 110px)); }
  html[data-v="2"] .panel { grid-column: 1 / -1; max-width: 420px; width: 100%; justify-self: center; }
}

/* v3 «Знак» удалён (Илья 23.10: «удали… 3 знак»), копия — _stable-r9/ */

/* телефон: заголовок 24, паузы короче — кнопка в первом экране 360×740 в состоянии ошибки (CD r2 п.6) */
@media (max-width: 767px) {
  .ttl { font-size: 24px; }
  .frm { gap: 12px; margin-top: 20px; }
  .fld { gap: 6px; }
  .foot { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; } }

/* ---------- переключатель прототипа (не часть дизайна; ?bare убирает). ≤ 768 свёрнут в одну кнопку (CD r2 п.7) ---------- */
.proto { position: fixed; z-index: 100; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100% - 24px);
  border-radius: 12px; background: rgb(22 24 28 / 0.94); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); font: 500 12px/16px var(--font); }
.proto summary { display: flex; align-items: center; min-height: 36px; padding: 0 12px; color: #fff; cursor: pointer; list-style: none; }
.proto summary::-webkit-details-marker { display: none; }
.proto[open] summary { display: none; }
.proto .pr-in { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; padding: 6px; }
.proto span { padding: 0 6px 0 8px; color: #A9AEB5; }
.proto .hint { font-weight: 400; }
.proto a, .proto button { padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--t3); font: inherit; text-decoration: none; cursor: pointer; }
.proto a[aria-current] { background: rgb(255 255 255 / 0.14); color: #fff; }
html[data-bare] .proto { display: none; }
/* телефон: свёрнутая кнопка вверху справа под шапкой — внизу она ложилась на кнопку формы в «приглашении» 360×740 */
@media (max-width: 768px) { .proto:not([open]) { left: auto; right: 12px; bottom: auto; top: calc(var(--header-h) + 8px); } }

/* ================= этап 2 (29.10): вход по коду, онбординг ================= */
.fh { margin: 0; color: var(--t3); font: 400 14px/20px var(--font); }
/* код: 6 лунок той же формы r11, шаг 8, высота 56; цифра Geologica 24/400 (крупная цифра — 400, не 700) */
.cdf { gap: 12px; }   /* .cd занят картой бренда (cards.js) */
.cd-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
html[data-v="2"] .cdf .box { height: 56px; }
html[data-v="2"] .fld .cd-i { height: 56px; padding: 0; text-align: center; font: 400 24px/1 var(--display); letter-spacing: 0; font-variant-numeric: tabular-nums; caret-color: var(--acc); }
html[data-v="2"] .fld .cd-i:disabled { -webkit-text-fill-color: rgb(220 230 245 / 0.52); }
.cd-demo, .cd-ok { margin: 0; color: var(--t3); font: 400 14px/20px var(--font); }
.cd-demo b { color: var(--t1); font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.cd-ok { color: var(--t2); }
/* онбординг: два пути равной высоты, заголовок + строка пояснения + стрелка; не карточки-клоны: одна колонка, общая кромка формы */
.onb-c { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.onb-o { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 2px;
  height: auto; min-height: 72px; padding: 14px 14px 14px 16px; text-align: left; white-space: normal; color: var(--t1); background: none; box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) and (pointer: fine) { .onb-o:hover { background: rgb(255 255 255 / 0.05); } }
.onb-t { display: inline-flex; align-items: center; gap: 8px; font: 500 16px/22px var(--font); }
.onb-s { grid-row: 2; color: var(--t3); font: 400 14px/20px var(--font); }
.onb-o .ic { grid-column: 2; grid-row: 1 / 3; color: var(--t3); }
.onb-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; background: #1670E8; color: #fff; font: 600 12px/1 var(--font); }
/* входящие приглашения */
.inv-l { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.inv-r { padding: 16px; border-radius: var(--r-fld); box-shadow: inset 0 0 0 1px var(--line); }
.inv-t { margin: 0; color: var(--t2); text-wrap: pretty; } .inv-t b { color: var(--t1); font-weight: 500; }
.inv-s { margin: 4px 0 0; color: var(--t3); font: 400 14px/20px var(--font); }
.inv-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.alert[role="status"] { color: var(--t2); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.alert[role="status"] .ic { color: var(--acc); }
@media (max-width: 767px) { .cd-row { gap: 6px; } html[data-v="2"] .cdf .box, html[data-v="2"] .fld .cd-i { height: 52px; } }