/* =============================================================
   css/auth-v4-surface.css — Фаза 6 визуального редизайна (владелец,
   2026-09-19): синий #3b82f6 на странице регистрации. Продолжение
   Фаз 1-5. Только визуал.

   register.html — единственная страница, подключающая css/auth-vp.css,
   и до входа в систему у неё нет body.cabinet-role-* (body.auth-shell).
   Файл грузится ТОЛЬКО здесь — отдельного scoping не требует.

   auth-vp.css сам несёт токены (--vp-primary/--vp-primary-2/--vp-primary-3/
   --vp-glow/--vp-grad/--vp-shadow/--vp-border/--vp-border-strong,
   объявлены на :root) — переопределяем их ОДИН РАЗ, это чинит ~30 мест
   автоматически (лейблы, ссылки, рамки полей, буллеты, .reg-step.done и
   т.д.). Плюс ~20 хардкод-дублей, которые токен не читают вовсе.

   ВАЖНАЯ НАХОДКА (живая проверка, не видна по чтению кода): auth-vp.css
   ставит !important на 196 из 552 строк файла — почти на каждое цветовое
   свойство, включая те, что выглядели «обычными» в статическом чтении.
   Первая версия этого файла без !important молча проигрывала ВСЕМ им —
   поэтому здесь !important стоит везде, без исключений. Плюс
   .btn-primary в оригинале — селектор-список `.btn-primary,
   .auth-card .btn-primary` — кнопка физически внутри .auth-card, значит
   реальная работающая специфичность для неё (0,2,0), не (0,1,0); повторяем
   тот же список селекторов, а не только голый .btn-primary.

   НЕ ТРОНУТО: .field-ok/.field-err, .alert-success/.alert-error —
   зелёный/красный/голубой, статусная семантика формы, не акцент. */

:root {
  --vp-primary: #3b82f6;
  --vp-primary-2: #60a5fa;
  --vp-primary-3: #93c5fd;
  --vp-glow: rgba(59, 130, 246, .4);
  --vp-grad: linear-gradient(90deg, #60a5fa 0%, #3b82f6 25%, #93c5fd 50%, #3b82f6 75%, #60a5fa 100%);
  --vp-shadow: 0 20px 60px rgba(29, 78, 216, .18), 0 4px 20px rgba(29, 78, 216, .12);
  --vp-border: rgba(96, 165, 250, .18);
  --vp-border-strong: rgba(96, 165, 250, .32);
}

/* .reg-dir-card (карточки «Мастер»/«Агрегатор») в инлайн <style> самой
   register.html читает var(--primary, #6366f1) — глобальный --primary
   (unified-theme.css :root) не трогаем (общий для 46 страниц), поэтому
   скоуп только на body.auth-shell. */
body.auth-shell {
  --primary: #3b82f6;
}

body.auth-shell::before {
  background:
    radial-gradient(ellipse 900px 560px at 92% -5%, rgba(29, 78, 216, .26), transparent 58%),
    radial-gradient(ellipse 720px 480px at -8% 28%, rgba(96, 165, 250, .2), transparent 55%),
    radial-gradient(ellipse 640px 420px at 50% 100%, rgba(147, 197, 253, .14), transparent 55%) !important;
}
body.auth-shell::after {
  background-image:
    linear-gradient(rgba(96, 165, 250, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, .04) 1px, transparent 1px) !important;
}
.auth-aside {
  background: radial-gradient(circle at 30% 20%, rgba(29, 78, 216, .18), transparent 60%) !important;
}
.auth-aside::before {
  background: radial-gradient(600px 280px at 0% 0%, rgba(96, 165, 250, .18), transparent 60%) !important;
}
.brand-mark-img {
  filter: drop-shadow(0 8px 20px rgba(29, 78, 216, .3)) !important;
}
.brand-accent {
  background: linear-gradient(180deg, #93c5fd, #3b82f6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.eyebrow {
  background: rgba(29, 78, 216, .14) !important;
  border: 1px solid rgba(29, 78, 216, .32) !important;
  color: #93c5fd !important;
}
.eyebrow i {
  color: #60a5fa !important;
}
.auth-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(29, 78, 216, .06)) !important;
}
.auth-card::before {
  background: radial-gradient(500px 240px at 100% 0%, rgba(96, 165, 250, .16), transparent 60%) !important;
}
.auth-card::after {
  background: linear-gradient(90deg, rgba(96, 165, 250, .55), rgba(29, 78, 216, .85), rgba(96, 165, 250, .55)) !important;
}
.auth-card .form-input:focus {
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .18) !important;
}
.captcha-fill {
  background: linear-gradient(90deg, rgba(29, 78, 216, .18), rgba(96, 165, 250, .28)) !important;
}
.captcha-thumb {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, .4) !important;
}
.reg-step.active {
  background: linear-gradient(90deg, rgba(96, 165, 250, .5), rgba(29, 78, 216, .7)) !important;
}
.btn-primary,
.auth-card .btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, .4) !important;
}
.btn-primary:hover:not(:disabled),
.auth-card .btn-primary:hover:not(:disabled) {
  box-shadow: 0 12px 32px rgba(29, 78, 216, .55) !important;
}
.loading-note {
  background: rgba(29, 78, 216, .1) !important;
  border-color: rgba(29, 78, 216, .3) !important;
}
.forgot-hint {
  background: rgba(29, 78, 216, .1) !important;
  border-left-color: #3b82f6 !important;
}