:root{
  color-scheme:dark;
  --auth-card:rgba(18,8,45,.88);
  --auth-border:rgba(255,255,255,.14);
  --auth-muted:#d8d0ec;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body.auth-page{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#07021a;
  color:#fff;
  overflow-x:hidden;
}
.auth-page .hama-page-backdrop{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter:brightness(.62) saturate(1.08);
}
.auth-shade{
  position:fixed;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,79,198,.28),transparent 34%),
    radial-gradient(circle at 82% 30%,rgba(79,220,255,.22),transparent 38%),
    linear-gradient(180deg,rgba(6,2,23,.20),rgba(6,2,23,.72));
  pointer-events:none;
}
.auth-header{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:20px 0;
}
.auth-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:900;font-size:1.05rem}
.auth-brand img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 30px rgba(255,79,198,.24)}
.auth-home{color:#fff;text-decoration:none;font-weight:850;border:1px solid rgba(255,255,255,.18);padding:.72rem 1rem;border-radius:999px;background:rgba(10,5,30,.48);backdrop-filter:blur(10px)}
.auth-main{
  position:relative;
  z-index:5;
  min-height:calc(100vh - 92px);
  display:grid;
  place-items:center;
  padding:34px 16px 60px;
}
.auth-card{
  width:min(100%,520px);
  padding:clamp(24px,5vw,42px);
  border:1px solid var(--auth-border);
  border-radius:32px;
  background:
    radial-gradient(circle at 16% 0%,rgba(255,79,198,.15),transparent 36%),
    radial-gradient(circle at 90% 10%,rgba(79,220,255,.12),transparent 36%),
    var(--auth-card);
  box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px);
}
.auth-eyebrow{margin:0 0 8px;color:#64e9ff;font-size:.76rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.auth-card h1{margin:0;font-size:clamp(2rem,6vw,3.1rem);line-height:1.02}
.auth-lead{margin:14px 0 26px;color:var(--auth-muted);line-height:1.65}
.auth-form{display:grid;gap:16px}
.auth-field{display:grid;gap:8px}
.auth-field label{font-weight:850;font-size:.92rem}
.auth-field input{
  width:100%;
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  padding:14px 15px;
  background:rgba(4,2,17,.62);
  color:#fff;
  font:inherit;
  outline:none;
}
.auth-field input:focus{border-color:#64e9ff;box-shadow:0 0 0 4px rgba(79,220,255,.11)}
.auth-submit{
  border:0;
  border-radius:17px;
  padding:15px 18px;
  color:#fff;
  font:inherit;
  font-weight:950;
  cursor:pointer;
  background:linear-gradient(135deg,#ff4fc6,#7c5cff 52%,#4fdcff);
  box-shadow:0 16px 34px rgba(0,0,0,.28),0 0 34px rgba(255,79,198,.18);
}
.auth-submit:disabled{opacity:.65;cursor:wait}
.auth-message{min-height:24px;margin:2px 0 0;color:#ffd1ea;font-weight:800;line-height:1.45}
.auth-message.is-success{color:#78ffc4}
.auth-switch{margin:22px 0 0;color:var(--auth-muted);text-align:center}
.auth-switch a{color:#72eeff;font-weight:900}
.auth-safe{margin:20px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.10);color:#bdb4d4;font-size:.83rem;line-height:1.5;text-align:center}
@media(max-width:600px){.auth-header{padding-top:14px}.auth-card{border-radius:24px}.auth-home{padding:.65rem .85rem}}