/* Вход и регистрация (кабинет). Собрано из лендинга v5: токены, кнопки, «обои» (styles.css)
   + auth.css + вариант B2 из docs/design/landing-v5/auth-dark.html. Иконки — инлайн-SVG (auth.js). */
@import url("../lib/fonts.css");
:root {
  --p-bg: #fdfdff;
  --p-bg-tint: #f5f8fe;
  --p-surface: #ffffff;
  --p-surface-2: #f3f6fc;
  --p-text: #0c1324;
  --p-text-2: #485269;
  --p-text-3: #69728a;
  --p-line: #e6eaf2;
  --p-line-2: #d3d9e5;
  --p-accent: #1f5bff;
  --p-accent-ink: #1646d1;
  --p-accent-soft: #e6edff;
  --p-ok: #0d8f61;
  --p-ok-soft: #e1f5ec;
  --p-shadow: 0 1px 2px rgb(12 19 36 / .05), 0 12px 30px -14px rgb(12 19 36 / .16);
  --p-shadow-lg: 0 2px 6px rgb(12 19 36 / .05), 0 36px 70px -30px rgb(20 50 140 / .32);

  /* обои: база и четыре мягких пятна */
  --wp-base: #dfe8fb;
  --wp-1: #b6cdff;
  --wp-2: #c4ecef;
  --wp-3: #fbe3d4;
  --wp-4: #d8dcff;
  --wp-doodle: rgb(31 70 180 / .1);

  --ink: #0c1324;
  --blue: #1f5bff;
  --sky: #2bb3ff;
  --warn: #c2410c;
  --warn-soft: #fdeee4;

  --f: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-blk: 32px;
  --r-card: 20px;
  --r-in: 12px;
  --r-pill: 999px;
  --maxw: 1240px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p-bg: #070b16;
    --p-bg-tint: #0b1121;
    --p-surface: #0f1628;
    --p-surface-2: #151d33;
    --p-text: #e9edf7;
    --p-text-2: #a7b0c7;
    --p-text-3: #8690aa;
    --p-line: #1c253c;
    --p-line-2: #2b3653;
    --p-accent: #5585ff;
    --p-accent-ink: #7b9fff;
    --p-accent-soft: #152246;
    --p-ok: #34c795;
    --p-ok-soft: #0f2c24;
    --p-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -14px rgb(0 0 0 / .6);
    --p-shadow-lg: 0 2px 6px rgb(0 0 0 / .3), 0 36px 70px -30px rgb(0 0 0 / .8);
    --wp-base: #0c1530;
    --wp-1: #1a3486;
    --wp-2: #0f4250;
    --wp-3: #3a2638;
    --wp-4: #231f5c;
    --wp-doodle: rgb(170 195 255 / .07);
    --ink: #0f1830;
    --warn: #ff9a5c;
    --warn-soft: #2e1b10;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --p-bg: #070b16;
  --p-bg-tint: #0b1121;
  --p-surface: #0f1628;
  --p-surface-2: #151d33;
  --p-text: #e9edf7;
  --p-text-2: #a7b0c7;
  --p-text-3: #8690aa;
  --p-line: #1c253c;
  --p-line-2: #2b3653;
  --p-accent: #5585ff;
  --p-accent-ink: #7b9fff;
  --p-accent-soft: #152246;
  --p-ok: #34c795;
  --p-ok-soft: #0f2c24;
  --p-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -14px rgb(0 0 0 / .6);
  --p-shadow-lg: 0 2px 6px rgb(0 0 0 / .3), 0 36px 70px -30px rgb(0 0 0 / .8);
  --wp-base: #0c1530;
  --wp-1: #1a3486;
  --wp-2: #0f4250;
  --wp-3: #3a2638;
  --wp-4: #231f5c;
  --wp-doodle: rgb(170 195 255 / .07);
  --ink: #0f1830;
  --warn: #ff9a5c;
  --warn-soft: #2e1b10;
  color-scheme: dark;
}

/* Рабочие токены страницы */
:root, .lead-form, .phone-in, .tgb {
  --bg: var(--p-bg);
  --bg-tint: var(--p-bg-tint);
  --surface: var(--p-surface);
  --surface-2: var(--p-surface-2);
  --text: var(--p-text);
  --text-2: var(--p-text-2);
  --text-3: var(--p-text-3);
  --line: var(--p-line);
  --line-2: var(--p-line-2);
  --accent: var(--p-accent);
  --accent-ink: var(--p-accent-ink);
  --accent-soft: var(--p-accent-soft);
  --accent-on: #ffffff;
  --ok: var(--p-ok);
  --ok-soft: var(--p-ok-soft);
  --shadow: var(--p-shadow);
  --shadow-lg: var(--p-shadow-lg);
}
.lead-form, .phone-in, .tgb { color: var(--text); }

/* Тёмные поверхности */
#ai, .ex-r, .ftr, .bdg.ru, .cs.start, .promo, .app.tg, .case.big {
  --text: #eef2fb;
  --text-2: #b3bcd3;
  --text-3: #8b95b0;
  --line: rgb(255 255 255 / .1);
  --line-2: rgb(255 255 255 / .2);
  --surface: rgb(255 255 255 / .05);
  --surface-2: rgb(255 255 255 / .08);
  --accent: #7ea2ff;
  --accent-ink: #a3bdff;
  --accent-soft: rgb(126 162 255 / .16);
  --ok: #3ad29f;
  --ok-soft: rgb(58 210 159 / .14);
  background-color: var(--ink);
  color: var(--text);
}

/* Синие поверхности */
.plan.pop, .wp-blue, .ba-after, .ch-card.feat {
  --text: #ffffff;
  --text-2: rgb(255 255 255 / .86);
  --text-3: rgb(255 255 255 / .72);
  --line: rgb(255 255 255 / .2);
  --line-2: rgb(255 255 255 / .34);
  --surface: rgb(255 255 255 / .12);
  --surface-2: rgb(255 255 255 / .16);
  --accent: #ffffff;
  --accent-ink: #ffffff;
  --accent-soft: rgb(255 255 255 / .18);
  --accent-on: #1646d1;
  --ok: #ffffff;
  --ok-soft: rgb(255 255 255 / .2);
  background-color: var(--blue);
  color: var(--text);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
p { margin: 0; }

/* ---------- обои мессенджера ---------- */
.wp { position: relative; isolation: isolate; overflow: hidden; background-color: var(--wp-base); }
.wp::before {
  content: ""; position: absolute; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(closest-side at 22% 28%, var(--wp-1), transparent),
    radial-gradient(closest-side at 78% 22%, var(--wp-2), transparent),
    radial-gradient(closest-side at 70% 78%, var(--wp-3), transparent),
    radial-gradient(closest-side at 24% 80%, var(--wp-4), transparent);
  animation: drift 26s ease-in-out infinite alternate;
}
.wp::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--wp-doodle);
  -webkit-mask: var(--doodle, none) 0 0 / 300px 300px repeat; mask: var(--doodle, none) 0 0 / 300px 300px repeat;
}
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(4%, -3%) rotate(8deg) scale(1.06); }
  100% { transform: translate(-3%, 3%) rotate(-6deg) scale(1); }
}
/* На первом экране узор не нужен: там своя 3D-композиция, остаётся только градиент */
.hero.wp::after, .hero .ib-msgs::after { display: none; }
/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: var(--r-pill);
  font-weight: 500; font-size: 16px; white-space: nowrap;
  transition: transform .3s var(--ease), background .2s, box-shadow .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: 0 10px 24px -12px rgb(31 91 255 / .8); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-primary i { transition: transform .3s var(--ease); }
.btn-primary:hover i.ph-arrow-right { transform: translateX(4px); }
.btn-ghost { border: 1px solid var(--line-2); background: var(--surface); }
.btn-ghost:hover { border-color: var(--text-3); }
.wp .btn-ghost { background: color-mix(in srgb, var(--p-surface) 70%, transparent); backdrop-filter: blur(8px); border-color: transparent; }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn-lg { height: 58px; padding: 0 30px; font-size: 17px; }
.btn i { font-size: 18px; }
.icon-btn { width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--text-2); font-size: 20px; transition: background .15s, color .15s; }
.icon-btn:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); }

body.auth {
  --wp-base: #1f5bff; --wp-1: #3f8cff; --wp-2: #2bb3ff; --wp-3: #5b6dff; --wp-4: #1646d1;
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 0 16px 28px;
  position: relative;
}
body.auth.wp { overflow: visible; }
body.auth::before { position: fixed; }
body.auth::after { display: none; }
:root[data-theme="dark"] body.auth { --wp-base: #10235f; --wp-1: #1a3486; --wp-2: #0f4a78; --wp-3: #2a2f86; --wp-4: #0b1640; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.auth { --wp-base: #10235f; --wp-1: #1a3486; --wp-2: #0f4a78; --wp-3: #2a2f86; --wp-4: #0b1640; }
}

/* шапка: логотип и тема */
.au-top { width: 100%; max-width: 1240px; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; position: relative; z-index: 2; }
.au-logo img { height: 38px; width: auto; }
.au-top .icon-btn { color: rgb(255 255 255 / .85); }
.au-top .icon-btn:hover { background: rgb(255 255 255 / .14); color: #fff; }

/* ---------- карточка ---------- */
.au-card {
  position: relative; z-index: 1; width: 100%; max-width: 400px; margin: auto 0;
  padding: 28px; border-radius: 28px; background: var(--surface); color: var(--text);
  box-shadow: 0 2px 6px rgb(12 19 36 / .06), 0 40px 80px -30px rgb(8 24 90 / .55);
}
.au-help { position: relative; z-index: 1; margin-top: 20px; font-size: 14px; color: rgb(255 255 255 / .78); }
.au-help a { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .4); }

.au-view[hidden], .au-form[hidden], .au-alert[hidden] { display: none !important; }

.au-form { display: grid; gap: 16px; animation: auIn .45s var(--ease) both; }
@keyframes auIn { from { opacity: 0; translate: 0 8px; } }
.au-form h1, .au-sent h1 { font-size: 28px; letter-spacing: -0.035em; }
.au-lead { color: var(--text-2); font-size: 15px; margin-top: -10px; }
.au-switch { text-align: center; font-size: 14px; color: var(--text-2); padding-top: 4px; }
.au-switch a, .fld-row a { color: var(--accent); font-weight: 500; }
.au-switch a:hover, .fld-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* поле */
.fld { display: grid; gap: 8px; }
.fld > span:first-child { font-size: 14px; font-weight: 500; color: var(--text); }
.fld-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.fld input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; font: 400 16px var(--f); color: var(--text);
  background: var(--surface-2); border: 1px solid transparent; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.fld input::placeholder { color: var(--text-3); }
.fld input:hover { border-color: var(--line-2); }
.fld input:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.fld-err { display: none; font-size: 13px; color: #d93a3a; padding-left: 4px; }
.fld.bad input { border-color: #d93a3a; box-shadow: 0 0 0 4px rgb(217 58 58 / .12); }
.fld.bad .fld-err { display: block; }
.pw { position: relative; display: block; }
.pw input { padding-right: 52px; }
.pw-eye { position: absolute; right: 5px; top: 5px; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; color: var(--text-3); }
.pw-eye:hover { color: var(--text); }

/* согласие: свой чекбокс */
.chk { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; font-size: 13px; color: var(--text-2); line-height: 1.4; cursor: pointer; position: relative; padding: 2px 2px 4px; }
.chk input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.chk > i { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 12px; color: transparent; background: var(--surface); transition: background .15s, border-color .15s, color .15s; }
.chk input:checked + i { background: var(--accent); border-color: var(--accent); color: #fff; }
.chk input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.chk.bad > i { border-color: #d93a3a; }
.chk a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-2); }

.au-submit { width: 100%; margin-top: 4px; }
.au-submit.loading { pointer-events: none; opacity: .85; }
.au-submit.loading i { animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.au-alert { font-size: 14px; color: #d93a3a; background: rgb(217 58 58 / .08); padding: 10px 14px; border-radius: 12px; }
.au-link { justify-self: center; font-size: 14px; font-weight: 500; color: var(--text-2); padding: 6px 10px; border-radius: 8px; }
.au-link:hover { color: var(--accent); }

/* письмо отправлено */
.au-sent { display: grid; gap: 12px; text-align: center; justify-items: center; padding-top: 6px; animation: auIn .45s var(--ease) both; }
.au-sub { color: var(--text-2); font-size: 15px; margin: -4px 0 6px; }
.au-sub b { color: var(--text); font-weight: 600; white-space: nowrap; }
.au-env { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 32px; color: #fff; margin-bottom: 4px; background: linear-gradient(140deg, #3f8cff, #1f5bff 60%, #1646d1); box-shadow: 0 16px 32px -16px rgb(31 91 255 / .8); animation: envPop .6s var(--ease) both; }
@keyframes envPop { from { scale: .6; opacity: 0; } }
.au-card .au-resend { width: 100%; backdrop-filter: none; color: var(--text); font-variant-numeric: tabular-nums; background: var(--surface-2); border-color: transparent; }
.au-resend:disabled { opacity: .6; cursor: default; transform: none; }

@media (max-width: 767px) {
  .au-top { height: 72px; padding: 0; }
  .au-logo img { height: 32px; }
  .au-card { padding: 22px 18px; border-radius: 24px; margin: 8px 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .au-form, .au-sent, .au-env, .wp::before { animation: none; }
}

/* ---------- B2: графитовый фон (цвет боковой панели кабинета), знак логотипа в карточке ---------- */
body.auth, :root[data-theme="dark"] body.auth{--wp-base:#0b1526;--wp-1:#14264d;--wp-2:#1b2f5c;--wp-3:#2a1d3d;--wp-4:#070b16}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.auth{--wp-base:#0b1526;--wp-1:#14264d;--wp-2:#1b2f5c;--wp-3:#2a1d3d;--wp-4:#070b16}}
.au-card{box-shadow:0 2px 6px rgb(0 0 0 / .2),0 40px 80px -30px rgb(0 0 0 / .7)}
.au-top{height:24px}
.au-mark{display:block;width:52px;height:auto;margin:0 0 18px}
.au-card [hidden]{display:none!important}
.fld-hint{display:block;margin-top:-2px;font-size:13px;line-height:1.45;color:var(--text-3)}
.fld.bad .fld-hint{display:none}

/* инлайн-иконки */
i.ic{display:inline-grid;place-items:center;line-height:0}
i.ic svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chk > i.ic svg{stroke-width:3.2}

/* «Телефон / Почта» */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--surface-2)}
.seg button{height:40px;border-radius:11px;font-size:14.5px;font-weight:600;color:var(--text-2);display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,color .15s,box-shadow .15s}
.seg button i{font-size:18px}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgb(12 19 36 / .08),0 4px 12px -6px rgb(12 19 36 / .2)}

/* код */
.au-code{display:flex;flex-direction:column;gap:16px;animation:auIn .45s var(--ease) both}
.au-code h1{font-size:26px;letter-spacing:-0.035em}
.au-code .au-sub{margin:-8px 0 0}
.au-tg{width:64px;height:64px;border-radius:20px;box-shadow:0 16px 32px -16px rgb(42 171 238 / .9);animation:envPop .6s var(--ease) both}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp input{width:100%;min-width:0;height:56px;border-radius:14px;border:1.5px solid transparent;background:var(--surface-2);text-align:center;font:600 24px var(--f);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.otp input:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.otp.bad input{border-color:#e5484d;background:rgb(229 72 77 / .06)}
.otp.ok input{border-color:#0d8f61}
.otp input:disabled{opacity:.6}
.au-code .au-alert{margin:0}
.au-code .au-link,.au-fail .au-link{align-self:center;justify-self:center}
.au-note{margin:0;padding:12px 14px;border-radius:14px;background:var(--surface-2);font-size:13.5px;line-height:1.5;color:var(--text-2);display:flex;gap:8px;align-items:flex-start}
.au-note i{color:var(--accent);font-size:17px;flex:none;margin-top:1px}
.au-note a{color:var(--accent);font-weight:500}

/* другие способы получить код */
.alt{display:grid;gap:8px}
.alt-t{font-size:13.5px;color:var(--text-2);text-align:center}
.alt-b{display:flex;align-items:center;gap:12px;width:100%;height:52px;padding:0 16px;border-radius:14px;background:var(--surface-2);font-size:15px;font-weight:500;color:var(--text);text-align:left;transition:background .15s}
.alt-b:hover:not(:disabled){background:color-mix(in srgb,var(--surface-2) 70%,var(--line-2))}
.alt-b img{width:26px;height:26px;border-radius:7px;flex:none}
.alt-b span{flex:1}
.alt-b small{font-size:12px;font-weight:500;color:var(--text-3);padding:2px 8px;border-radius:99px;border:1px solid var(--line-2)}
.alt-b:disabled{cursor:default}
.alt-b:disabled img,.alt-b:disabled span{opacity:.55}
.au-fail{display:grid;gap:14px;text-align:center;justify-items:center;animation:auIn .45s var(--ease) both}
.au-fail h1{font-size:24px;letter-spacing:-0.035em}
.au-fail .au-sub{margin:-6px 0 0}
.au-fail .alt,.au-fail .btn{width:100%;text-align:left}
.au-warn{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:30px;color:#fff;background:linear-gradient(140deg,#ffb547,#f08c00)}
.au-alert a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}