:root {
	--text-primary: #0f172a;
	--text-secondary: #334155;
	--text-muted: #475569;
	--primary: #0ea5e9;
	--accent: #2563eb;
}

body {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	color: var(--text-primary);
	background: radial-gradient(circle at 20% 20%, rgba(14,165,233,0.06), transparent 30%), radial-gradient(circle at 80% 0%, rgba(56,189,248,0.08), transparent 25%), linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}
h1, h2, h3 { color: var(--text-primary); }
p, li { color: var(--text-muted); }
.hero-gradient { background: linear-gradient(135deg, rgba(14,165,233,0.16), rgba(59,130,246,0.14)), radial-gradient(circle at 20% 30%, rgba(56,189,248,0.18), transparent 40%), radial-gradient(circle at 80% 10%, rgba(14,165,233,0.14), transparent 35%); backdrop-filter: blur(10px); }
.card-glow { box-shadow: 0 24px 48px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.05); }
.pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.02em; background: rgba(14,165,233,0.12); color: #0ea5e9; }
.pill span { display: inline-flex; width: 8px; height: 8px; border-radius: 999px; background: #06b6d4; box-shadow: 0 0 0 6px rgba(14,165,233,0.08); }
.grid-card { position: relative; overflow: hidden; }
.grid-card::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(226,232,240,0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(226,232,240,0.35) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.5; pointer-events: none; }
.stat-tile { background: linear-gradient(145deg, rgba(14,165,233,0.08), rgba(59,130,246,0.05)); border: 1px solid rgba(148,163,184,0.4); box-shadow: 0 16px 32px rgba(15,23,42,0.08); }
.cta-primary { background: linear-gradient(120deg, #0ea5e9, #2563eb); box-shadow: 0 15px 35px rgba(37,99,235,0.35); }
.cta-outline { border: 1px solid rgba(148,163,184,0.6); }
.icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(14,165,233,0.12); color: #0ea5e9; }
.auth-shell { min-height: 75vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
@media (min-width: 640px) { .auth-shell { padding: 2.5rem 1.25rem; } }
.auth-card { position: relative; max-width: 520px; width: 100%; border-radius: 18px; border: 1px solid rgba(148,163,184,0.35); background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(248,250,252,0.92)); box-shadow: 0 22px 45px rgba(15,23,42,0.10); overflow: hidden; }
@media (min-width: 640px) { .auth-card { border-radius: 24px; } }
.auth-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(14,165,233,0.06), transparent 40%), radial-gradient(circle at 80% 0%, rgba(37,99,235,0.05), transparent 35%); pointer-events: none; }
.auth-inner { position: relative; padding: 1.75rem; }
@media (min-width: 640px) { .auth-inner { padding: 2.25rem; } }
.auth-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(14,165,233,0.12); color: var(--primary); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; }
.auth-badge svg { width: 16px; height: 16px; }
.input-field { width: 100%; border-radius: 12px; border: 1px solid rgba(148,163,184,0.6); background: #fff; padding: 0.75rem 0.9rem; font-size: 0.95rem; color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s; }
.input-field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,0.15); }
.input-label { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); }
.link-soft { color: var(--primary); font-weight: 600; }
.link-soft:hover { color: var(--accent); }
.btn-wide { width: 100%; border-radius: 14px; padding: 0.85rem 1rem; font-weight: 700; font-size: 0.95rem; }
.btn-primary { background: linear-gradient(120deg, #0ea5e9, #2563eb); color: #fff; box-shadow: 0 15px 35px rgba(37,99,235,0.28); }
.btn-primary:hover { filter: brightness(0.97); }
.muted-text { color: var(--text-muted); }