@font-face { font-family: 'Urbanist'; src: url('/login-assets/urbanist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #f1f2ef; --card: rgba(255, 255, 255, .72); --ink: #16191d; --muted: #5b6168; --line: rgba(22, 26, 30, .12);
  --field: #fff; --accent: #16191d; --on-accent: #f6f7f5; --err: #b4352a;
  --mesh-a: #cde9e4; --mesh-b: #f3e3c8; --mesh-c: #d3e6f3;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131518; --card: rgba(255, 255, 255, .06); --ink: #eef0ee; --muted: #a2a8ae; --line: rgba(255, 255, 255, .12);
    --field: #1b1e22; --accent: #eef0ee; --on-accent: #16191d; --err: #ff8a7a;
    --mesh-a: #183330; --mesh-b: #33291a; --mesh-c: #182a36; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; color: var(--ink);
  background:
    radial-gradient(40vw 40vw at 15% 20%, var(--mesh-a), transparent 70%),
    radial-gradient(45vw 45vw at 85% 30%, var(--mesh-b), transparent 70%),
    radial-gradient(50vw 50vw at 50% 95%, var(--mesh-c), transparent 70%),
    var(--bg);
}
.wrap { min-height: 100%; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-left)); }
.card {
  width: min(400px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 32px 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .25);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 14px; }
.brand svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
h1 { margin: 0; font-size: 30px; letter-spacing: -.02em; }
.sub { margin: 0 0 14px; color: var(--muted); line-height: 1.45; font-size: 15px; }
label { font-weight: 600; font-size: 14px; margin-top: 6px; }
input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); font: inherit; }
input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
button { margin-top: 12px; height: 48px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.err { min-height: 20px; margin: 4px 0 0; color: var(--err); font-size: 14px; }
.foot { margin: 10px 0 0; color: var(--muted); font-size: 13px; text-align: center; }