:root{
  --color-bg:#0b0f18;--color-surface:#121826;--color-surface-2:#151d2e;
  --color-border:#233049;--color-divider:#1a2334;--color-code-bg:#0a0f1a;
  --color-code-text:#c7d2e6;--color-text:#e6ebf4;--color-text-muted:#8b97b0;
  --color-text-faint:#5f6c86;--color-primary:#5b8dff;--color-primary-hover:#7aa3ff;
  --color-primary-soft:#16233f;--color-green:#27c93f;
  --font-body:'Inter','system-ui',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--color-primary);text-decoration:none}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(900px 500px at 50% -10%, rgba(91,141,255,.12), transparent 70%)}

.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--color-divider)}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.01em;font-size:1.05rem;color:var(--color-text)}
.brand .mark{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(150deg,#1c2c52,#0e1730);border:1px solid #2b3f6b}
.brand .mark svg{width:17px;height:17px}
.topbar-right{display:flex;align-items:center;gap:14px}
.email-tag{font-size:.82rem;color:var(--color-text-muted)}
.plan-pill{font-size:.74rem;font-weight:600;letter-spacing:.02em;color:var(--color-primary);background:var(--color-primary-soft);border:1px solid #24365f;border-radius:999px;padding:5px 11px}
.link-btn{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted);font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:inherit}
.link-btn:hover{border-color:var(--color-primary);color:var(--color-text)}

.wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:44px 24px 80px}
.narrow{max-width:440px}

/* auth cards */
.auth-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:32px 28px;box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.auth-card h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.auth-card .sub{color:var(--color-text-muted);font-size:.95rem;margin-bottom:24px}
label{display:block;font-size:.82rem;font-weight:600;color:var(--color-text-muted);margin-bottom:7px}
input[type=email],input[type=password],input[type=text],select{width:100%;background:var(--color-code-bg);border:1px solid var(--color-border);color:var(--color-text);font-family:var(--font-body);font-size:.95rem;padding:12px 14px;border-radius:10px;transition:.15s;margin-bottom:16px}
input:focus,select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(91,141,255,.15)}
.btn-primary{width:100%;background:var(--color-primary);color:#04122e;font-family:var(--font-body);font-size:1rem;font-weight:700;padding:13px;border:none;border-radius:11px;cursor:pointer;transition:.15s}
.btn-primary:hover{background:var(--color-primary-hover)}
.err{background:#2a1417;border:1px solid #5c2731;color:#ff9ba6;font-size:.86rem;padding:11px 14px;border-radius:10px;margin-bottom:18px}
.auth-alt{text-align:center;margin-top:20px;font-size:.9rem;color:var(--color-text-muted)}

/* landing */
.hero{text-align:center;padding:70px 0 40px}
.hero h1{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;margin-bottom:16px;color:var(--color-text)}
.hero p{color:var(--color-text-muted);font-size:1.1rem;max-width:560px;margin:0 auto 30px}
.hero .cta{display:inline-flex;gap:12px}
.btn-lg{font-size:1rem;font-weight:700;padding:13px 28px;border-radius:11px;cursor:pointer;border:none}
.btn-fill{background:var(--color-primary);color:#04122e}
.btn-fill:hover{background:var(--color-primary-hover)}
.btn-ghost{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}
.btn-ghost:hover{border-color:var(--color-primary)}