/* Mizino — Auth Pulse (v1.0) — Mobile-first, modern, professional */
:root{
  --bg:#0a0f14; --bg2:#0d1520;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.12);
  --text:#eaf2ff; --muted:#a7b3cc;
  --primary:#5aa1ff; --primary-2:#7bb3ff;
  --ok:#2ee6a6; --danger:#ff5a7a;
  --radius:22px; --r-sm:14px;
  --shadow:0 24px 60px rgba(0,0,0,.40);
  --container: 1024px;
  --h1: clamp(24px, 6vw, 36px);
  --h2: clamp(18px, 4.5vw, 22px);
  --lead: clamp(14px, 4vw, 16px);
  --pad: clamp(14px, 5vw, 24px);
}
*{box-sizing:border-box}
html,body{height:100%}
html{
  background:
  radial-gradient(900px 520px at 110% -10%, rgba(90,161,255,.22), transparent 60%),
  radial-gradient(880px 520px at -10% 120%, rgba(46,230,166,.20), transparent 62%),
  linear-gradient(180deg, var(--bg), var(--bg2));
}
body{margin:0; color:var(--text); font-family:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Naskh Arabic','Noto Sans Arabic','Tahoma','Helvetica Neue',Arial,sans-serif}

a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

.pulse-shell{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:18px}
.pulse-container{width:100%; max-width:var(--container)}
.pulse-grid{display:grid; grid-template-columns:1fr; gap:16px; align-items:center}
@media (min-width: 992px){
  .pulse-grid{grid-template-columns: 1.05fr .95fr; gap:22px}
}
/* Hero */
.pulse-hero{padding:var(--pad)}
.pulse-badge{display:inline-flex; gap:8px; align-items:center; background:var(--surface);
  border:1px solid var(--line); color:var(--muted); padding:8px 12px; border-radius:999px; font-size:13px; margin-bottom:10px}
.pulse-title{font-size:var(--h1); margin:0 0 6px}
.pulse-lead{color:var(--muted); font-size:var(--lead); margin:0 0 10px}
.pulse-bullets{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.pulse-bullet{padding:8px 12px; border-radius:999px; background:var(--surface); color:var(--muted); font-size:13px}
/* Card */
.pulse-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.pulse-head{padding:14px var(--pad); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.pulse-body{padding:var(--pad)}
.pulse-foot{padding:10px; text-align:center; color:var(--muted); font-size:.92rem}
/* Form */
.pulse-form{display:flex; flex-direction:column; gap:12px}
.pulse-field{display:flex; flex-direction:column; gap:6px}
.pulse-label{font-size:.94rem; color:var(--muted)}
.pulse-input{appearance:none; outline:none; width:100%; border-radius:14px; padding:12px 14px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text); font-size:1rem}
.pulse-input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(90,161,255,.18)}
.ltr{direction:ltr; text-align:left}
/* OTP */
.pulse-otp{display:grid; grid-template-columns:repeat(4, minmax(48px, 1fr)); gap:10px}
.pulse-otp input{height:56px; text-align:center; font-size:20px; border-radius:14px; background:rgba(255,255,255,.04);
  border:1px solid var(--line); color:var(--text)}
.pulse-otp input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(90,161,255,.18)}
@media (max-width:420px){ .pulse-otp input{height:48px; font-size:18px} }
/* Actions */
.pulse-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-top:6px}
.pulse-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px;
  border-radius:12px; border:1px solid transparent; cursor:pointer; font-weight:600}
.pulse-btn.primary{
    font-family: 'Vazirmatn';
    background: linear-gradient(180deg, #0b4a9d, #2d76eb);
    color: #ffffff;
    font-size: 16px;    
}
.pulse-btn.primary:hover{filter:brightness(1.06)}
.pulse-btn.ghost{background:transparent; border-color:var(--line); color:var(--text)}
.pulse-btn.ghost:hover{background:var(--surface)}
/* Countdown */
.pulse-timer{display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:.95rem}
.pulse-timer .pill{display:inline-flex; align-items:center; justify-content:center; min-width:42px; padding:6px 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; font-feature-settings:"tnum" on; font-variant-numeric:tabular-nums}
.pulse-timer .sep{opacity:.6}
.pulse-resend{display:flex; align-items:center; justify-content:center; margin-top:12px}
.pulse-resend .pulse-btn{width:100%}
.pulse-btn[disabled]{opacity:.55; cursor:not-allowed}
/* Alerts */
.alert{padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03)}
.alert.error{border-color:rgba(255,90,122,.5); background:rgba(255,90,122,.08); color:#ffd7df}
.alert.success{border-color:rgba(46,230,166,.5); background:rgba(46,230,166,.08); color:#d7fff3}
/* Footer */
.pulse-copy{margin-top:14px; text-align:center; color:var(--muted); font-size:.9rem}


/* Mobile keyboard-friendly tweaks */
.pulse-input, .pulse-otp input, .pulse-btn { scroll-margin: 20vh; }
body{overscroll-behavior-y: contain;}