/* ============================================================================
   AegisVPN — Auth flow (cabinet-login)
   Светлая палитра дизайн-системы кабинета. Golos Text, жёлтая CTA, орнамент.
   Самодостаточно: НЕ требует Bootstrap. Адаптивно от десктопа до 320px.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap");

.az-root {
  --page-az:#ECECEF;
  --card:#FFFFFF; --card-2:#F4F4F6; --card-3:#ECECEF;
  --fg-1:#1A1A1A; --fg-2:#6E6E73; --fg-3:#8E8E93; --fg-4:#B0B0B5;
  --border-1:rgba(0,0,0,0.06); --border-2:rgba(0,0,0,0.10); --border-input:#D5D5DA;
  --brand-yellow:#FFB71D; --brand-orange:#FF6400; --tg-blue:#0E80D7;
  --danger:#E5320F; --success:#0BBB59;
  --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-fast:120ms; --dur-med:220ms;
  --font-display:"Golos Text","Inter",system-ui,-apple-system,sans-serif;
  --font-body:"Golos Text","Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;

  min-height:100vh; display:flex; flex-direction:column;
  background:var(--page-az); color:var(--fg-1);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.az-root *, .az-root *::before, .az-root *::after { box-sizing:border-box; }

@keyframes az-spin { to { transform:rotate(360deg); } }
@keyframes az-fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Header ── */
.az-header { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 48px 12px 72px; position:relative; z-index:5; }
.az-brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.az-brand img { width:38px; height:38px; border-radius:8px; display:block; flex-shrink:0; }
.az-brand .word { font:600 18px/1 var(--font-display); letter-spacing:-0.03em; color:var(--fg-1); }
.az-nav { display:flex; align-items:center; gap:8px; }
.az-navbtn { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border:none; border-radius:999px; background:var(--card-2); color:var(--fg-1); font:600 13px/1 var(--font-display); letter-spacing:-0.005em; cursor:pointer; white-space:nowrap; box-sizing:border-box; text-decoration:none; transition:background var(--dur-fast) var(--ease-out); }
.az-navbtn:hover { background:var(--card-3); }
.az-navbtn svg { display:block; }

/* LangSwitch — белая пилюля с рамкой + дропдаун по наведению */
.az-langwrap { position:relative; }
.az-lang { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px 0 12px; border:1px solid var(--border-2); border-radius:12px; background:var(--card); color:var(--fg-1); font:600 13px/1 var(--font-display); letter-spacing:0.02em; cursor:pointer; box-sizing:border-box; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.az-lang:hover { background:var(--card-2); }
.az-lang .code { text-transform:uppercase; }
.az-lang .chev { color:var(--fg-3); transition:transform var(--dur-fast) var(--ease-out); }
.az-lang svg { display:block; }
.az-langwrap.open .az-lang .chev { transform:rotate(180deg); }
.az-lang-bridge { position:absolute; top:100%; left:0; right:0; height:8px; }
.az-lang-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:160px; padding:6px; background:var(--card); border-radius:12px; border:1px solid var(--border-1); box-shadow:0 12px 32px rgba(0,0,0,0.14); display:flex; flex-direction:column; gap:2px; z-index:30; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.az-langwrap.open .az-lang-menu { opacity:1; transform:translateY(0); pointer-events:auto; }
.az-lang-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:8px; background:transparent; border:none; cursor:pointer; text-align:left; font:500 13px/1 var(--font-body); color:var(--fg-1); width:100%; transition:background var(--dur-fast) var(--ease-out); }
.az-lang-opt:hover { background:var(--card-2); }
.az-lang-opt[aria-selected="true"] { background:var(--card-2); }
.az-lang-opt .l { display:inline-flex; align-items:center; gap:8px; }
.az-lang-opt .c { font:700 11px/1 var(--font-display); letter-spacing:0.06em; color:var(--fg-3); text-transform:uppercase; min-width:18px; }
.az-lang-opt .ck { color:var(--fg-1); display:none; }
.az-lang-opt[aria-selected="true"] .ck { display:block; }
.az-lang-form { margin:0; }

/* ── Main ── */
.az-main { flex:1; position:relative; display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden; }
.az-ornament { position:absolute; right:-40px; top:50%; transform:translateY(-50%); height:132vh; width:auto; aspect-ratio:684/900; pointer-events:none; z-index:0; opacity:0.9;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 50%, #000 38%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 78% 50%, #000 38%, transparent 78%); }
.az-ornament svg { display:block; width:100%; height:100%; }
.az-stage { position:relative; z-index:2; width:100%; max-width:560px; }
.az-step { width:100%; }

/* ── Card ── */
.az-card { background:var(--card); border-radius:30px; padding:40px; box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 30px 70px -22px rgba(20,20,30,0.20); display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; animation:az-fade var(--dur-med) var(--ease-out); }
.az-wordmark { font:700 30px/1 var(--font-display); letter-spacing:-0.05em; color:var(--fg-1); }
.az-h1 { margin:24px 0 0; font:700 28px/1.2 var(--font-display); letter-spacing:-0.03em; color:var(--fg-1); max-width:420px; text-wrap:balance; }
.az-sub { margin:10px 0 0; font:400 15px/1.45 var(--font-body); color:var(--fg-3); }

.az-field { margin-top:30px; width:100%; text-align:left; }
.az-label { display:block; font:500 14px/1 var(--font-body); color:var(--fg-2); margin-bottom:10px; padding-left:18px; }
.az-input { width:100%; height:56px; padding:0 18px; border-radius:14px; border:1.5px solid var(--border-input); background:var(--card-3); color:var(--fg-1); font:400 16px/1 var(--font-body); outline:none; transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.az-input::placeholder { color:var(--fg-4); }
.az-input:focus { border-color:#1A1A1A; background:var(--card); }
.az-input.is-invalid { border-color:var(--danger); }

.az-error { display:none; margin-top:14px; font:500 14px/1.4 var(--font-body); color:var(--danger); }
.az-error.show { display:block; }

/* ── CTA pill ── */
.az-cta { width:100%; height:60px; border:none; border-radius:999px; cursor:pointer; background:var(--brand-yellow); color:#1A1A1A; font:600 16px/1 var(--font-display); letter-spacing:-0.01em; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); margin-top:26px; }
.az-cta:hover:not(:disabled) { filter:brightness(1.12); }
.az-cta:active:not(:disabled) { transform:scale(0.985); }
.az-cta:disabled { opacity:0.45; cursor:default; }
.az-cta--code { margin-top:28px; }

/* ── Spinner ── */
.az-spin { display:inline-block; line-height:0; }
.az-spin svg { animation:az-spin 0.8s linear infinite; display:block; }

/* ── Code step ── */
.az-codehead { position:relative; width:100%; display:flex; justify-content:center; align-items:center; }
.az-back { position:absolute; left:0; top:50%; transform:translateY(-50%); width:42px; height:42px; display:grid; place-items:center; border:none; background:transparent; color:var(--fg-2); cursor:pointer; border-radius:12px; transition:background var(--dur-fast) var(--ease-out); }
.az-back:hover { background:var(--card-3); }
.az-h1--code { margin:22px 0 0; font:600 23px/1.35 var(--font-display); letter-spacing:-0.015em; color:var(--fg-1); max-width:400px; text-wrap:balance; }

.az-otp-wrap { position:relative; margin-top:32px; width:100%; }
.az-otp-row { display:flex; gap:clamp(6px, 2.2vw, 13px); justify-content:center; transition:opacity var(--dur-fast), filter var(--dur-fast); }
.az-otp-row.busy { filter:blur(2px); opacity:0.5; }
.az-otp { flex:1 1 0; min-width:0; max-width:66px; aspect-ratio:66/78; text-align:center; border-radius:clamp(12px, 3vw, 16px); border:1.5px solid transparent; background:var(--card); box-shadow:inset 0 0 0 1.5px var(--border-input); color:var(--fg-1); font:600 clamp(22px, 6.5vw, 32px)/1 var(--font-display); outline:none; padding:0; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.az-otp.filled { background:#E8E8EC; box-shadow:none; }
.az-otp:focus { border-color:#1A1A1A; box-shadow:inset 0 0 0 1.5px #1A1A1A; background:var(--card); }
.az-otp-row.error .az-otp { border-color:var(--danger); }
.az-otp-overlay { position:absolute; inset:0; display:none; place-items:center; pointer-events:none; }
.az-otp-overlay.show { display:grid; }

.az-resend { margin-top:20px; }
.az-resend .countdown { font:400 14px/1 var(--font-body); color:var(--fg-3); font-variant-numeric:tabular-nums; }
.az-resend button { border:none; background:transparent; cursor:pointer; font:500 15px/1 var(--font-display); color:var(--fg-1); }
.az-resend button:hover { text-decoration:underline; }

/* ── Footer ── */
.az-footer { display:flex; align-items:center; justify-content:center; gap:18px; padding:20px 48px; position:relative; z-index:5; flex-wrap:wrap; }
.az-footer .copy { display:flex; align-items:center; gap:18px; font:400 12.5px/1.4 var(--font-body); color:var(--fg-4); flex-wrap:wrap; }
.az-footer a { color:var(--fg-3); text-decoration:none; }
.az-footer a:hover { color:var(--fg-1); }
.az-footer .sep { width:1px; height:12px; background:var(--border-2); }

/* ── Loading overlay (на время сетевых запросов, опционально) ── */
.az-loading { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1000; align-items:center; justify-content:center; }
.az-loading.show { display:flex; }

/* ── Adaptive ── */
@media (max-width:760px) {
  .az-header { padding:12px 18px; }
  .az-footer { padding:18px 16px; text-align:center; }
}
@media (max-width:560px) {
  .az-h1 { font-size:25px; }
  .az-sub { font-size:14px; }
  .az-ornament { opacity:0.6; right:-80px; }
}
@media (max-width:480px) {
  .az-header { padding:12px 14px; gap:10px; }
  .az-brand { gap:9px; }
  .az-brand .word { font-size:16px; }
  .az-brand img { width:34px; height:34px; }
  .az-navbtn { width:36px; padding:0; justify-content:center; }
  .az-navbtn .lbl { display:none; }
  .az-main { padding:16px 14px; }
  .az-card { padding:30px 20px; border-radius:26px; }
  .az-wordmark { font-size:27px; }
  .az-h1 { font-size:23px; }
  .az-h1--code { font-size:19px; }
  .az-field { margin-top:24px; }
  .az-otp-wrap { margin-top:26px; }
}
@media (max-width:360px) {
  .az-card { padding:26px 16px; }
  .az-h1 { font-size:22px; }
}
@media (prefers-reduced-motion:reduce) {
  .az-card { animation:none; }
  .az-spin svg { animation:none; }
}