:root { color-scheme:light; --ink:#172f26; --green:#173e31; --paper:#f6f5ed; --card:#fffefa; --line:#dbe1d3; --control:#7a8e7f; --side:18px; --nav-height:73px; --lime:#d9ef9a; --muted:#4e6157; }
[hidden] { display:none !important; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 system-ui,sans-serif; }
main,.app-header { max-width:640px; margin:auto; }
html { scroll-padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom)); }
main { padding:42px max(var(--side), env(safe-area-inset-right)) calc(var(--nav-height) + 24px + env(safe-area-inset-bottom)) max(var(--side), env(safe-area-inset-left)); }
.app-header { padding:calc(16px + env(safe-area-inset-top)) max(var(--side), env(safe-area-inset-right)) 10px max(var(--side), env(safe-area-inset-left)); }
a { color:inherit; text-underline-offset:3px; }
.brand { display:inline-flex; align-items:center; min-height:44px; gap:9px; font-size:22px; font-weight:800; letter-spacing:-.05em; text-decoration:none; }
.brand img { display:block; }
.app-nav svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.app-nav { position:fixed; z-index:2; bottom:0; inset-inline:0; background:var(--card); border-top:1px solid var(--line); padding:6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.app-nav div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; max-width:600px; margin:auto; }
.app-nav a { display:grid; justify-items:center; align-content:center; gap:2px; min-height:51px; border-radius:9px; color:var(--muted); font-size:.8125rem; font-weight:650; text-align:center; text-decoration:none; overflow-wrap:anywhere; padding:4px 2px; }
.app-nav a[aria-current] { background:#e7efc8; color:var(--ink); font-weight:800; box-shadow:inset 0 -3px #54773b; }
h1 { margin:0 0 8px; font-size:clamp(31px,8vw,43px); line-height:1.08; letter-spacing:-.055em; }
h2 { margin:0 0 6px; font-size:20px; line-height:1.2; letter-spacing:-.025em; }
p { margin:0 0 10px; }
.muted { color:var(--muted); font-size:14px; }
.card { margin:14px 0; padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
button,input,select { font:inherit; }
button,select,input:not([type=checkbox]) { min-height:44px; }
button { padding:8px 13px; border:0; border-radius:9px; background:var(--green); color:white; font-weight:750; cursor:pointer; }
button.secondary { background:#e7efc8; color:var(--ink); }
button.quiet { padding-inline:0; background:transparent; color:var(--green); text-decoration:underline; text-underline-offset:3px; font-size:14px; }
button:disabled { opacity:.6; }
select,input:not([type=checkbox]) { border:1px solid var(--control); padding:6px 9px; border-radius:8px; background:var(--card); color:inherit; }
input[type=checkbox] { width:21px; height:21px; margin:0; accent-color:var(--green); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
:focus-visible { outline:3px solid #54773b; outline-offset:3px; }

p:empty { display:none; }
summary { cursor:pointer; min-height:44px; padding-block:10px; font-weight:750; }
.button-link { display:inline-flex; align-items:center; min-height:44px; padding:8px 13px; border-radius:9px; background:var(--green); color:white; font-weight:750; text-decoration:none; }
@media (max-width:360px) { :root { --side:14px; } }