/* ============ Auth pages ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#060818; --panel:#0e1226; --panel-2:#161b35;
  --text:#eef1fb; --muted:#9aa2bd;
  --primary:#7c5cff; --primary-2:#5d3fff;
  --accent:#00d4ff; --danger:#ef4444;
  --border:rgba(255,255,255,.08);
}
body{
  font:14px/1.55 'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--text);
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(ellipse at top left, rgba(124,92,255,.15), transparent 40%),
    radial-gradient(ellipse at bottom right, rgba(0,212,255,.1), transparent 40%),
    var(--bg);
}
.auth{width:100%; max-width:440px}
.auth__logo{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:24px; color:var(--text); font-size:18px; font-weight:700; text-decoration:none}
.logo__mark{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; font-size:18px; box-shadow:0 4px 14px -2px var(--primary)}
.logo__img{display:block; width:34px; height:34px; border-radius:9px; box-shadow:0 4px 14px -2px var(--primary)}
.auth__text strong{background:linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.auth__card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:32px}
.auth__card h1{font-size:22px; margin-bottom:4px}
.muted{color:var(--muted); font-size:13px}
.mt{margin-top:18px}
.center{text-align:center}
form{margin-top:22px; display:flex; flex-direction:column; gap:14px}
label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
input{width:100%; padding:11px 14px; border-radius:9px; background:var(--panel-2); border:1px solid var(--border); color:var(--text); font-size:14px; transition:.2s}
input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,92,255,.18)}
.btn{padding:12px 20px; border-radius:9px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-size:14px; font-weight:500; cursor:pointer; transition:.2s}
.btn--primary{background:linear-gradient(135deg,var(--primary),var(--primary-2)); border-color:transparent; color:#fff; font-weight:600; box-shadow:0 8px 24px -8px var(--primary)}
.btn--primary:hover{filter:brightness(1.1)}
.btn--block{width:100%; justify-content:center}
.alert{padding:11px 14px; border-radius:9px; margin-top:14px; font-size:13px}
.alert--error{background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#fda4af}

/* Responsive */
@media(max-width:480px){
  body{padding:14px}
  .auth__card{padding:22px 18px}
  .auth__card h1{font-size:20px}
  input{padding:13px 14px; font-size:16px} /* 16px prevents iOS zoom */
  .btn--block{padding:14px 20px; font-size:15px}
}