:root { --ink:#1c1914; --muted:#6d6458; --paper:#f3eee4; --green:#1f3d32; --line:#e4dccb; --safe: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; }
body { margin:0; min-height:100%; font-family: Palatino, Georgia, serif; color:var(--ink); background:var(--paper); }
.shell { max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
header { padding:18px 18px 8px; }
.brand { margin:0; font-size:1.7rem; color:var(--green); }
.who { margin:4px 0 0; color:var(--muted); font: 0.85rem/1.3 ui-sans-serif, system-ui, sans-serif; }
main { flex:1; display:flex; flex-direction:column; padding:8px 16px calc(16px + var(--safe)); }
h1 { font-size:1.35rem; margin:8px 0; }
p, label { font-family: ui-sans-serif, system-ui, sans-serif; }
label { display:block; margin:12px 0 6px; font-size:0.85rem; }
input { width:100%; min-height:48px; border:1px solid var(--line); border-radius:12px; padding:0 12px; font:1rem/1.2 ui-sans-serif, system-ui, sans-serif; }
button { min-height:48px; border:0; border-radius:12px; font:1rem ui-sans-serif, system-ui, sans-serif; }
.primary { width:100%; margin-top:16px; background:var(--green); color:#f7f3ea; }
.ghost { background:transparent; color:var(--green); width:100%; margin-top:8px; }
.card { background:#fffaf3; border:1px solid var(--line); border-radius:16px; padding:12px; margin-top:10px; }
.card button { width:100%; background:#efe6d8; }
.hint { color:var(--muted); font-size:0.92rem; line-height:1.45; }
.rule { background:#fff; border-left:4px solid var(--green); padding:10px 12px; border-radius:12px; }
.err { color:#8b2e2e; }
.toprow { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.leave { background:#efe6d8; padding:0 12px; min-height:48px; display:inline-flex; align-items:center; border-radius:12px; color:var(--green); text-decoration:none; font:1rem ui-sans-serif, system-ui, sans-serif; }