:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --ink:#26352f; --muted:#64726d; --paper:#f7f6f1; --card:#fff; --accent:#315f52; --error:#9a342c; }
* { box-sizing:border-box; }
body.auth-page { margin:0; min-height:100svh; display:grid; place-items:center; padding:24px; color:var(--ink); background:radial-gradient(circle at top,#e7eee9,var(--paper) 55%); }
.auth-card { width:min(100%,420px); padding:clamp(28px,8vw,48px); border:1px solid rgba(49,95,82,.18); border-radius:28px; background:var(--card); box-shadow:0 24px 70px rgba(38,53,47,.12); }
.auth-mark { margin:0 0 32px; color:var(--accent); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.auth-card h1 { margin:0 0 8px; font-size:clamp(2rem,8vw,2.6rem); line-height:1.05; }
.auth-intro { margin:0 0 28px; color:var(--muted); }
.auth-error { padding:12px 14px; border-radius:12px; color:var(--error); background:#fff0ee; }
.auth-card form { display:grid; gap:10px; }
.auth-card label { margin-top:8px; font-weight:700; }
.auth-card input { width:100%; min-height:48px; padding:10px 12px; border:1px solid #9aa7a2; border-radius:12px; background:transparent; color:inherit; font:inherit; }
.auth-card button { min-height:48px; margin-top:14px; padding:10px 18px; border:0; border-radius:999px; color:white; background:var(--accent); font:inherit; font-weight:800; cursor:pointer; }
.auth-card :focus-visible { outline:3px solid #e0a34a; outline-offset:3px; }
@media (prefers-color-scheme:dark) { :root { --ink:#edf2ef; --muted:#afbbb6; --paper:#121916; --card:#1d2823; --accent:#75b29e; } .auth-error{background:#3a201f;color:#ffb7ae;} }