:root {
  --ink: #f4efe4; --muted: #b7b0a2; --dim: #7d776c; --bg0: #0b1014;
  --sun: #f0a33a; --card: #141a20; --line: rgba(255,255,255,.1);
  --ok: #4cba84; --bad: #e53935; --blue: #2a7fd4;
  --font: "IBM Plex Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; font-family: var(--font); color: var(--ink);
  background:
    radial-gradient(700px 420px at 10% -10%, rgba(42,127,212,.22), transparent 55%),
    radial-gradient(600px 380px at 90% 0%, rgba(240,163,58,.14), transparent 50%),
    var(--bg0);
  display: grid; place-items: center; padding: 1.25rem;
}
.auth-card {
  width: min(26rem, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.35rem 1.35rem 1.2rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.auth-logo { margin: 0 0 1rem; text-align: center; }
.auth-logo img {
  display: block; width: 100%; max-width: 17.5rem; height: auto;
  aspect-ratio: 524 / 332; object-fit: contain; margin: 0 auto;
}
.auth-card h1 {
  margin: 0 0 .2rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em;
}
.auth-card h1 span { color: var(--sun); }
.auth-card .sub { color: var(--muted); font-size: .88rem; margin: 0 0 1.1rem; line-height: 1.4; }
.auth-card .sub.tight { margin-top: .35rem; }
label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dim); margin: .65rem 0 .3rem; }
input, select {
  width: 100%; appearance: none; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.04); color: var(--ink); font: inherit; font-size: .95rem;
  padding: .65rem .75rem;
}
input:focus, select:focus { outline: none; border-color: rgba(42,127,212,.65);
  box-shadow: 0 0 0 3px rgba(42,127,212,.2); }
.pw-reveal { display: flex; align-items: center; gap: .4rem; }
.pw-reveal input { flex: 1 1 auto; min-width: 0; width: auto; }
.pw-reveal-btn {
  appearance: none; flex: 0 0 auto; margin: 0; padding: .55rem .65rem;
  border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06);
  color: var(--muted); font: inherit; font-size: .75rem; font-weight: 750; cursor: pointer;
  white-space: nowrap;
}
.pw-reveal-btn:hover { color: var(--ink); }
.pw-reveal-btn[aria-pressed="true"] { color: var(--sun); border-color: rgba(240,163,58,.45); }
.btn {
  appearance: none; width: 100%; margin-top: 1rem; border: 0; border-radius: 999px;
  padding: .7rem 1rem; font: inherit; font-weight: 700; cursor: pointer;
  background: linear-gradient(165deg, #5eb3f0, #1a5fa8); color: #fff;
}
.btn:hover { filter: brightness(1.06); }
.btn.secondary {
  background: transparent; border: 1px solid var(--line); color: var(--ink); margin-top: .55rem;
}
.msg { margin: 0 0 .75rem; padding: .55rem .7rem; border-radius: 10px; font-size: .88rem; line-height: 1.35; white-space: pre-line; }
.msg.err { background: rgba(229,57,53,.15); color: #ff8a80; border: 1px solid rgba(229,57,53,.35); }
.msg.ok { background: rgba(76,186,132,.12); color: #9fd9b8; border: 1px solid rgba(76,186,132,.35); }
.links { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .85rem; }
.links a { color: var(--sun); text-decoration: none; border-bottom: 1px solid rgba(240,163,58,.35); }
.links a:hover { color: var(--ink); }
.ver { margin-top: .9rem; text-align: center; color: var(--dim); font-size: .7rem; }