/* ═══════════════════════════════════════════════════════════════════════════
   STEPS — KIRISH: welcome, phone, otp (screens/welcome.js, phone.js, otp.js).
   Har qoida o'z overlay ildiziga cheklangan. Rang/soya/radius — faqat tokenlar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───── Umumiy: sahifa ustuni ───── */
[data-overlay="welcome"],[data-overlay="phone"],[data-overlay="otp"]{display:flex;flex-direction:column}
[data-overlay="phone"] .topbar,[data-overlay="otp"] .topbar{flex:none}

:is([data-overlay="phone"],[data-overlay="otp"]) .au-page{flex:1;display:flex;flex-direction:column;min-height:0}
:is([data-overlay="phone"],[data-overlay="otp"]) .au-head{margin:6px 0 24px}
:is([data-overlay="phone"],[data-overlay="otp"]) .au-title{font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.12}
:is([data-overlay="phone"],[data-overlay="otp"]) .au-sub{font-size:15px;font-weight:600;color:var(--muted);line-height:1.45;margin-top:8px}
:is([data-overlay="phone"],[data-overlay="otp"]) .au-nowrap{white-space:nowrap;color:var(--fg);font-weight:600;font-size:15px}
:is([data-overlay="welcome"],[data-overlay="phone"],[data-overlay="otp"]) .au-link{
  display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;padding:0 2px;
  color:var(--brand-ink);font-weight:800;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
:is([data-overlay="phone"],[data-overlay="otp"]) .au-err{display:flex;align-items:flex-start;gap:6px;min-height:22px;margin-top:12px;
  font-size:14px;font-weight:700;line-height:1.4;color:var(--off-ink)}
:is([data-overlay="phone"],[data-overlay="otp"]) .au-err svg.i{margin-top:2px}
:is([data-overlay="phone"],[data-overlay="otp"]) .au-err:empty{visibility:hidden}
:is([data-overlay="phone"],[data-overlay="otp"]) .au-foot{margin-top:auto;padding-top:20px;display:grid;gap:12px}
:is([data-overlay="phone"],[data-overlay="otp"]) .au-note{font-size:13px;font-weight:600;color:var(--muted);text-align:center}
:is([data-overlay="phone"],[data-overlay="otp"]) .btn .spinner{width:18px;height:18px}

/* ───── Welcome ───── */
[data-overlay="welcome"] .au{flex:1;display:flex;flex-direction:column;min-height:0}
[data-overlay="welcome"] .wl-main{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding-bottom:12px}
[data-overlay="welcome"] .wl-hero{position:relative;height:290px;flex:none;display:grid;place-items:center}
[data-overlay="welcome"] .wl-glow{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--brand-soft),transparent);pointer-events:none}
[data-overlay="welcome"] .wl-a{position:absolute;display:grid;place-items:center}
[data-overlay="welcome"] .wl-a--plate{left:50%;top:50%;transform:translate(-50%,-44%)}
[data-overlay="welcome"] .wl-a--cam{left:calc(50% - 142px);top:calc(50% - 104px)}
[data-overlay="welcome"] .wl-a--spark{left:calc(50% + 86px);top:calc(50% - 116px)}
[data-overlay="welcome"] .wl-a--leaf{left:calc(50% + 92px);top:calc(50% + 38px)}
[data-overlay="welcome"] .wl-a .art3d-float.d1{animation-delay:-1.4s}
[data-overlay="welcome"] .wl-a .art3d-float.d2{animation-delay:-2.8s;animation-duration:4.8s}
[data-overlay="welcome"] .wl-a .art3d-float.d3{animation-delay:-4.1s}
[data-overlay="welcome"] .wl-copy{text-align:center;margin:4px 0 26px}
[data-overlay="welcome"] .wl-brand{font-family:var(--font-num);font-size:44px;font-weight:700;letter-spacing:.06em;line-height:1;color:var(--fg)}
[data-overlay="welcome"] .wl-brand::after{content:"";display:block;width:34px;height:4px;border-radius:var(--r-pill);margin:12px auto 0;background:var(--brand)}
[data-overlay="welcome"] .wl-brand:focus-visible{outline:none}
[data-overlay="welcome"] .wl-lead{font-size:17px;font-weight:700;line-height:1.4;color:var(--muted);margin:14px auto 0;max-width:28ch;text-wrap:balance}
[data-overlay="welcome"] .au-actions{display:grid;gap:10px}
[data-overlay="welcome"] .au-google{background:var(--surface);color:var(--fg);box-shadow:var(--e1)}
[data-overlay="welcome"] .au-google .g-logo{width:20px;height:20px;flex:none}
[data-overlay="welcome"] .au-guest{height:48px;font-size:16px}
/* vebda rasmiy Google tugmasi (One Tap ko'rsatilmaganda) */
[data-overlay="welcome"] .au-gsi{display:flex;justify-content:center;align-items:center;min-height:56px;border-radius:calc(var(--r-sm) + 6px)}
[data-overlay="welcome"] .au-gsi-t{margin:-4px 0 2px;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
[data-overlay="welcome"] .au-legal{font-size:13px;font-weight:600;color:var(--muted);text-align:center;margin-top:2px}
[data-overlay="welcome"] .btn .spinner{width:18px;height:18px}
/* past ekran: illyustratsiya siqiladi */
@media (max-height:700px){
  [data-overlay="welcome"] .wl-hero{height:230px;transform:scale(.84)}
  [data-overlay="welcome"] .wl-copy{margin-bottom:18px}
}

/* ───── Telefon raqami ───── */
[data-overlay="phone"] .au-phone{display:flex;align-items:center;gap:0;height:64px;padding:0 6px 0 18px;border-radius:calc(var(--r-sm) + 6px);
  background:var(--surface);box-shadow:var(--e1);cursor:text;transition:box-shadow .2s}
[data-overlay="phone"] .au-phone:focus-within{box-shadow:0 0 0 2px var(--focus),0 0 0 6px var(--brand-soft)}
[data-overlay="phone"] .au-phone.is-bad{box-shadow:0 0 0 2px var(--off),0 0 0 6px var(--off-soft)}
[data-overlay="phone"] .au-cc{font-size:22px;font-weight:700;color:var(--fg);padding-right:12px;margin-right:12px;box-shadow:1px 0 0 var(--sep);line-height:32px}
[data-overlay="phone"] .au-phone input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;padding:0;
  font-size:22px;font-weight:700;letter-spacing:.02em;color:var(--fg);caret-color:var(--brand)}
[data-overlay="phone"] .au-phone input::placeholder{color:var(--faint);opacity:1}
[data-overlay="phone"] .au-clear{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:none}
[data-overlay="phone"] .au-clear:focus-visible{outline-offset:-4px}

/* ───── SMS kod ───── */
[data-overlay="otp"] .otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:380px}
[data-overlay="otp"] .otp-cell{width:100%;min-width:0;height:60px;padding:0;border:0;border-radius:calc(var(--r-sm) + 2px);text-align:center;
  font-size:26px;font-weight:700;color:var(--fg);caret-color:var(--brand);background:var(--surface);box-shadow:inset 0 0 0 1px var(--field-edge),var(--e1);outline:none;   /* tungi temada bo'sh katakchalar ko'rinsin */
  transition:box-shadow .2s,background-color .2s,transform .2s var(--spring)}
[data-overlay="otp"] .otp-cell:focus{box-shadow:0 0 0 2px var(--focus),0 0 0 4px var(--brand-soft)}
[data-overlay="otp"] .otp.is-bad .otp-cell{box-shadow:0 0 0 2px var(--off);background:color-mix(in srgb,var(--off) 5%,var(--surface))}
[data-overlay="otp"] .otp.is-bad .otp-cell:focus{box-shadow:0 0 0 2px var(--off),0 0 0 4px var(--off-soft)}
[data-overlay="otp"] .otp.is-ok .otp-cell{box-shadow:0 0 0 2px var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
[data-overlay="otp"] .otp.is-busy .otp-cell{opacity:.6}
[data-overlay="otp"] .otp.is-shake{animation:otpShake .42s var(--ease)}
@keyframes otpShake{
  0%,100%{transform:none}
  20%{transform:translateX(-8px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)}
}
[data-overlay="otp"] .otp-status{display:flex;align-items:center;gap:8px;min-height:0;margin-top:14px;font-size:14px;font-weight:700;color:var(--muted)}
[data-overlay="otp"] .otp-status:empty{margin-top:0}
[data-overlay="otp"] .otp-status .spinner{width:16px;height:16px;border-width:2px;color:var(--brand)}
[data-overlay="otp"] .otp-dev{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:8px 8px 8px 14px;
  border-radius:calc(var(--r-sm) + 4px);background:var(--info-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--info) 16%,transparent)}
[data-overlay="otp"] .otp-dev-t{font-size:13px;font-weight:700;color:var(--info-ink)}
[data-overlay="otp"] .otp-dev-t b{font-size:15px;letter-spacing:.08em;margin-left:2px}
[data-overlay="otp"] .otp-dev-b{height:44px;padding:0 14px;font-size:14px}
[data-overlay="otp"] .otp-resend{font-size:15px}
[data-overlay="otp"] .otp-resend:disabled{opacity:1;color:var(--muted);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--edge)}
[data-overlay="otp"] .otp-resend svg.i{width:18px;height:18px}

@supports (corner-shape:squircle){
  [data-overlay="phone"] .au-phone,[data-overlay="otp"] .otp-cell,[data-overlay="otp"] .otp-dev{corner-shape:squircle}
}
@media (prefers-reduced-motion:reduce){
  [data-overlay="otp"] .otp.is-shake{animation:none}
}
:root[data-motion="reduce"] [data-overlay="otp"] .otp.is-shake{animation:none}