:root{
  --primary:#1a78c6; --primary-d:#0f63a9; --primary-soft:#f0f7fd; --primary-line:#c7e1f7;
  --bg:#ffffff; --card:#ffffff; --card-hover:#fafafa; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
  --danger:#e11d48; --danger-soft:#fff1f2; --ok:#059669; --ok-soft:#ecfdf5;
  --font-en:'Inter',sans-serif; --font-bn: 'Potro Sans Bangla', serif;
}
[data-theme="dark"]{
  --bg:#0f0d17; --card:#171426; --card-hover:#1d1a30; --text:#f3f4f6; --muted:#9ca3af; --line:#2a2640;
  --primary-soft:#241a45; --primary-line:#4c3a8a; --danger-soft:#3a1420; --ok-soft:#0d2b22;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  font-family:var(--font-en),var(--font-bn); font-size:15px; color:var(--text); background:var(--bg);
  padding-bottom:env(safe-area-inset-bottom); -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,label,button,.brand span{font-family:var(--font-en),var(--font-bn)}

/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:10px 14px;
  border:1px solid var(--line);border-radius:16px;background:var(--card);max-width:1000px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:600;font-size:16px}
.brand img{height:36px;width:auto}
.icon-btn{width:38px;height:38px;border:1px solid var(--line);background:var(--card);color:var(--text);
  border-radius:10px;display:grid;place-items:center;transition:.15s}
.icon-btn:hover{border-color:var(--primary-line);background:var(--primary-soft);color:var(--primary)}
.icon-btn:active{transform:scale(.94)}

/* Auth layout */
.auth-wrap{display:flex;justify-content:center;padding-top:16px;padding-bottom:32px}
.auth-card{width:100%;max-width:440px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.auth-head{display:flex;align-items:center;gap:12px;padding:16px;
  background:linear-gradient(90deg,var(--primary-soft),transparent);border-bottom:1px solid var(--primary-line)}
.auth-head .badge-ic{width:42px;height:42px;border-radius:12px;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:20px;flex:none}
.auth-head h1{font-size:18px;font-weight:600;margin:0;line-height:1.2}
.auth-head p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.auth-body{padding:18px 16px 20px}

/* Form */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.input-wrap{position:relative}
.input-wrap>i.lead{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:.15s}
.form-control.ex{height:46px;padding:0 42px 0 40px;font-size:15px;font-family:var(--font-en),var(--font-bn);
  background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px;transition:.15s}
.form-control.ex::placeholder{color:var(--muted);opacity:.7}
.form-control.ex:hover{border-color:var(--primary-line);background:var(--card-hover)}
.form-control.ex:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.15);background:var(--card)}
.input-wrap:focus-within>i.lead{color:var(--primary)}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);width:34px;height:34px;border-radius:8px}
.eye:hover{color:var(--primary);background:var(--primary-soft)}

.btn-ex{width:100%;height:46px;border:1px solid var(--primary);background:var(--primary);color:#fff;
  font-weight:600;font-size:15px;border-radius:12px;transition:.15s}
.btn-ex:hover{background:var(--primary-d);border-color:var(--primary-d);box-shadow:0 6px 16px rgba(124,58,237,.25)}
.btn-ex:active{transform:scale(.98);box-shadow:none}
.btn-ex:focus-visible,.icon-btn:focus-visible,.eye:focus-visible{outline:3px solid rgba(124,58,237,.35);outline-offset:2px}
.btn-ex:disabled{opacity:.6;pointer-events:none}
.btn-outline-ex{background:var(--card);color:var(--primary);border-color:var(--primary-line)}
.btn-outline-ex:hover{background:var(--primary-soft);color:var(--primary);border-color:var(--primary);box-shadow:none}

.alt{text-align:center;margin:16px 0 0;font-size:14px;color:var(--muted)}
.alt a,.link{color:var(--primary);font-weight:600;text-decoration:none}
.alt a:hover,.link:hover{text-decoration:underline}

.alert-ex{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;font-size:13.5px;margin-bottom:14px}
.alert-ex.err{background:var(--danger-soft);color:var(--danger);border:1px solid rgba(225,29,72,.25)}
.alert-ex.ok{background:var(--ok-soft);color:var(--ok);border:1px solid rgba(5,150,105,.25)}
.hint{font-size:12px;color:var(--muted);margin-top:5px}
.field-err{font-size:12px;color:var(--danger);margin-top:5px}

/* OTP boxes */
.otp-row{display:flex;gap:8px;justify-content:space-between;margin:6px 0 14px}
.otp-row input{width:100%;max-width:56px;height:52px;text-align:center;font-size:22px;font-weight:600;
  border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);transition:.15s;font-family:var(--font-en)}
.otp-row input:hover{border-color:var(--primary-line)}
.otp-row input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.dev-box{background:var(--primary-soft);border:1px dashed var(--primary-line);color:var(--primary);
  padding:8px 12px;border-radius:10px;font-size:13px;margin-bottom:14px;text-align:center}

@media (min-width:768px){.auth-wrap{padding-top:40px}.auth-body{padding:22px 24px 26px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}