:root { color-scheme: light; --forest:#162419; --cream:#f7efe3; --panel:#fffaf2; --ink:#1b1814; --muted:#6f685f; --line:#ddcfbe; --red:#8d170e; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--cream); color:var(--ink); font-family:"Segoe UI",Arial,sans-serif; }
.brand-bar { display:flex; align-items:center; gap:14px; padding:max(16px,env(safe-area-inset-top)) 18px 16px; color:white; background:var(--forest); }
.brand-bar img { width:64px; height:64px; border-radius:10px; }
.brand-bar span { display:block; color:#dacaae; font-size:12px; font-weight:800; letter-spacing:.12em; }
.brand-bar strong { display:block; margin-top:3px; font-size:18px; line-height:1.2; }
main { width:min(100% - 28px,720px); margin:24px auto; }
.card { border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 10px 30px rgba(40,28,16,.08); }
.auth-card { padding:24px; }
.eyebrow { margin:0 0 6px; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(27px,8vw,40px); line-height:1.08; }
.lede,.install-block p,footer { color:var(--muted); line-height:1.5; }
form { display:grid; gap:10px; margin-top:22px; }
label { font-weight:750; } label small { color:var(--muted); font-weight:500; }
input,button { width:100%; min-height:50px; padding:12px 14px; border:1px solid #cbbba8; border-radius:10px; background:white; color:var(--ink); font:inherit; }
button { font-weight:800; cursor:pointer; } .primary { margin-top:8px; border-color:var(--red); background:var(--red); color:white; }
button:focus-visible,input:focus-visible { outline:3px solid #d79428; outline-offset:2px; }
.status { min-height:1.4em; margin:4px 0 0; color:var(--red); font-weight:700; }
.install-block { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
footer { padding:20px 18px max(20px,env(safe-area-inset-bottom)); text-align:center; font-size:13px; }