*,*::before,*::after { box-sizing: border-box; }
:root {
  --bg: #07070a; --bg-elev: #101015; --bg-elev2: #16161d;
  --line: #1f1f28; --line-strong: #2a2a36;
  --text: #ececf1; --text-dim: #8a8a99; --text-faint: #4d4d59;
  --accent: #7c5cff; --accent-2: #2dd4ff;
  --green: #3ddc97; --red: #ff6b6b; --amber: #f7c948;
}
html,body { margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh; }
a { color:inherit; text-decoration:none; }

body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(700px 500px at 95% 0%, rgba(45,212,255,.10), transparent 60%);
}
main, header, footer { position:relative; z-index:1; }

.nav { display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 2rem; max-width:1200px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:600; letter-spacing:-.02em; }
.brand .logo { width:24px; height:24px; border-radius:6px;
  background:conic-gradient(from 200deg at 50% 50%, var(--accent), var(--accent-2), var(--accent));
  box-shadow:0 0 24px rgba(124,92,255,.45); }
.nav-right { display:flex; gap:1.5rem; color:var(--text-dim); font-size:.9rem; }
.nav-right a:hover, .nav-right button:hover { color:var(--text); }
.nav-right button { background:none; border:none; color:inherit; cursor:pointer;
  font:inherit; padding:0; }

.auth-wrap { display:flex; justify-content:center; padding:3rem 1.5rem 4rem; }
.card-auth { width:100%; max-width:400px;
  background:linear-gradient(180deg, var(--bg-elev2), var(--bg-elev));
  border:1px solid var(--line); border-radius:14px; padding:2rem 1.75rem;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
.card-auth h1 { margin:0 0 .35rem; font-size:1.4rem; font-weight:600; letter-spacing:-.02em; }
.card-auth .sub { color:var(--text-dim); font-size:.9rem; margin:0 0 1.5rem; }
.field { margin-bottom:.9rem; }
.field label { display:block; font-size:.8rem; color:var(--text-dim); margin-bottom:.35rem;
  text-transform:uppercase; letter-spacing:.06em; }
.field input { width:100%; padding:.65rem .8rem; font:inherit; font-size:.95rem;
  background:#0c0c10; border:1px solid var(--line); border-radius:8px; color:var(--text);
  outline:none; transition:border-color .15s ease, background .15s ease; }
.field input:focus { border-color:var(--accent); background:#0e0e14; }
.field .hint { color:var(--text-faint); font-size:.75rem; margin-top:.35rem; }
.field .pw-wrap { position:relative; }
.field .pw-wrap input { padding-right:2.5rem; }
.field .pw-toggle { position:absolute; right:.45rem; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:var(--text-faint); cursor:pointer;
  padding:.35rem; border-radius:6px; display:inline-flex; align-items:center;
  justify-content:center; transition:color .12s ease, background .12s ease; }
.field .pw-toggle:hover { color:var(--text); background:rgba(255,255,255,.04); }
.field .pw-toggle svg { display:block; }
.match-ok { color:var(--green); font-size:.75rem; margin-top:.35rem; display:none; }
.match-bad { color:#ff9b9b; font-size:.75rem; margin-top:.35rem; display:none; }
.match-ok.show, .match-bad.show { display:block; }

.btn { width:100%; padding:.75rem; border-radius:9px; border:none; cursor:pointer;
  background:linear-gradient(180deg, #ffffff, #d8d8df); color:#0a0a0c;
  font:inherit; font-size:.95rem; font-weight:600;
  transition:transform .12s ease, opacity .12s ease; }
.btn:hover { transform:translateY(-1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.alt { text-align:center; margin-top:1.25rem; color:var(--text-dim); font-size:.85rem; }
.alt a { color:var(--accent-2); }
.alt a:hover { text-decoration:underline; }

.msg { padding:.6rem .8rem; border-radius:8px; font-size:.85rem; margin-bottom:1rem;
  border:1px solid transparent; display:none; }
.msg.show { display:block; }
.msg.err { background:rgba(255,107,107,.08); border-color:rgba(255,107,107,.25); color:#ff9b9b; }
.msg.ok  { background:rgba(61,220,151,.07);  border-color:rgba(61,220,151,.25);  color:var(--green); }
.msg.info { background:rgba(45,212,255,.06); border-color:rgba(45,212,255,.22); color:#7cdcff; }

footer.app-foot { text-align:center; color:var(--text-faint); font-size:.78rem;
  padding:2rem 0; }

@media (max-width:720px) {
  .auth-wrap { padding:1.5rem 1rem 3rem; }
  .card-auth { padding:1.5rem 1.25rem; }
  .card-auth h1 { font-size:1.25rem; }
  .field input { font-size:16px; /* iOS won't zoom */ }
  .nav { padding:1rem 1.25rem; }
}