:root{
  --bg:#0b1220; --bg2:#0f1a2e; --card:#141d31; --line:#243049;
  --fg:#eef2f9; --muted:#9aa6bd; --brand:#4f8cff; --brand2:#7c5cff;
  --ok:#3ecf8e; --err:#ff6b6b; --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(79,140,255,.16), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  -webkit-font-smoothing:antialiased;
}
.auth{min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 16px; gap:18px}

.card{
  width:100%; max-width:392px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 30px 26px; box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:22px}
.brand__logo{width:36px; height:24px; fill:url(#g)}
.brand__logo path{fill:var(--brand)}
.brand__name{font-weight:700; font-size:18px; letter-spacing:.2px}
.brand__name span{color:var(--brand)}

.card__title{margin:0 0 4px; font-size:21px; font-weight:650}
.card__sub{margin:0 0 20px; color:var(--muted); font-size:13.5px}

.field{display:block; margin-bottom:14px}
.field__label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px}
.field input[type=text],.field input[type=password]{
  width:100%; padding:11px 13px; color:var(--fg);
  background:#0e1626; border:1px solid var(--line); border-radius:10px; font-size:14.5px;
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{color:#5b6680}
.field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.field__pw{position:relative; display:block}
.field__toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--muted); font-size:12.5px; cursor:pointer; padding:6px 8px; border-radius:8px;
}
.field__toggle:hover{color:var(--fg); background:#1b2440}

.row{display:flex; align-items:center; justify-content:space-between; margin:4px 0 18px}
.check{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; cursor:pointer}
.check input{accent-color:var(--brand); width:15px; height:15px}
.link{color:var(--brand); text-decoration:none; font-size:13px}
.link:hover{text-decoration:underline}

.btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 14px; border-radius:10px; font-size:14.5px; font-weight:600; cursor:pointer;
  border:1px solid transparent; transition:filter .15s, background .15s, opacity .15s;
}
.btn--primary{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff}
.btn--primary:hover{filter:brightness(1.06)}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--fg)}
.btn--ghost:hover{background:#1b2440}
.btn__icon{width:18px; height:18px; fill:currentColor}
.btn[disabled]{opacity:.7; cursor:default}
.btn__spin{display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}
.btn.is-loading .btn__spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.divider{display:flex; align-items:center; text-align:center; color:#5b6680; font-size:12px; margin:18px 0}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}
.divider span{padding:0 12px}

.alert{
  background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.35); color:#ffb4b4;
  padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:16px;
}

.foot{color:var(--muted); font-size:12px; text-align:center}
.foot nav{display:flex; gap:16px; justify-content:center; margin-bottom:8px}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--fg)}
.foot p{margin:0; opacity:.8}

@media (max-width:420px){ .card{padding:24px 20px} }