:root{--ink:#263e37;--muted:#5f7068;--paper:#f7f5ee;--card:#fffdf7;--line:#dce1d6;--accent:#234d3f;--gold:#bb9254;--error:#923e31}
@media (prefers-color-scheme:dark){:root{--ink:#e8ece6;--muted:#a9b6ae;--paper:#141b18;--card:#1c2521;--line:#2f3b35;--accent:#8fc3ab;--gold:#d9b27a;--error:#f0a090;color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}button{cursor:pointer;min-height:44px}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--line)}
.brand{font:400 22px Georgia,serif}.brand span{color:var(--gold)}
select,input{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
main{max-width:560px;margin:auto;padding:32px max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left));outline:none}
h1{font:400 30px/1.15 Georgia,serif;margin:0 0 8px;text-wrap:balance}.meta{color:var(--muted);margin:6px 0 16px}
form,.panel{display:grid;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin:16px 0}
label{font-size:14px;color:var(--muted)}input.code{font-size:24px;letter-spacing:6px;text-align:center;font-variant-numeric:tabular-nums}
.primary{background:var(--accent);color:var(--paper);border:1px solid var(--accent);border-radius:8px;padding:10px 18px}
.link{background:none;border:0;color:var(--accent);text-decoration:underline;padding:8px 0;justify-self:start}
ul.cals{list-style:none;padding:0;margin:0;display:grid;gap:10px}ul.cals li{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.status{max-width:560px;margin:0 auto;padding:0 16px;min-height:24px;font-size:14px}.status.error{color:var(--error)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}