:root { color-scheme: light dark; --bg:#f4f5f7; --fg:#1b1d22; --card:#fff; --line:#d9dce2; --accent:#2563eb; }
@media (prefers-color-scheme: dark) { :root { --bg:#14161a; --fg:#e8eaee; --card:#1e2127; --line:#32363e; --accent:#5b8cff; } }
* { box-sizing: border-box; }
body { margin:0; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background:var(--bg); color:var(--fg); font:16px/1.4 -apple-system, system-ui, "Segoe UI", sans-serif; }
.card { max-width:420px; margin:24px auto; padding:20px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
h1 { margin:0 0 12px; font-size:22px; }
.form { display:flex; flex-direction:column; gap:10px; }
input[type=text], input[type=email], input[type=password] { width:100%; padding:12px; font-size:16px; color:inherit; background:transparent; border:1px solid var(--line); border-radius:10px; }
.btn { display:block; width:100%; padding:12px; margin:8px 0; font-size:16px; text-align:center; text-decoration:none; color:var(--fg); background:transparent; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.btn.primary { color:#fff; background:var(--accent); border-color:var(--accent); }
.btn.small { width:auto; padding:6px 10px; margin:0; font-size:14px; }
.muted { color:#8a8f99; font-size:14px; }
.divider { text-align:center; color:#8a8f99; margin:14px 0; }
.flash { max-width:420px; margin:12px auto 0; padding:10px 14px; border-radius:10px; }
.flash.ok { background:#dcfce7; color:#14532d; }
.flash.err { background:#fee2e2; color:#7f1d1d; }
.list { list-style:none; padding:0; margin:0 0 12px; }
.list li { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }