:root{--bg:#f4f7f5;--card:#fff;--ink:#12261e;--mut:#5c6f66;--acc:#0f6b4a;--warn:#b45309;--bad:#b91c1c;--line:#dbe5df}
@media (prefers-color-scheme:dark){:root{--bg:#0d1612;--card:#15211b;--ink:#e6f0ea;--mut:#9bb0a5;--acc:#3ecf8e;--warn:#f0a53a;--bad:#f87171;--line:#26362d}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,sans-serif;padding-bottom:72px}
header{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:12px 16px;position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:5}
main{padding:12px 16px;max-width:640px;margin:auto}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;text-align:center;padding:12px 4px;color:var(--mut);text-decoration:none;font-size:13px}nav a.on{color:var(--acc);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
h2{margin:.2em 0;font-size:20px}h3{margin:.2em 0;font-size:16px;color:var(--mut)}
button,select,input,textarea{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
button,select,input:not([type=checkbox]){min-height:44px}
input[type=checkbox]{width:24px;height:24px;vertical-align:middle}
a{color:var(--acc)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
button{background:var(--acc);color:#fff;border:0;font-weight:600;min-width:44px}button.sec{background:transparent;color:var(--acc);border:1px solid var(--acc)}button.bad{background:var(--bad)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row>*{flex:0 1 auto}input.f,textarea.f{width:100%}
.chip{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--line);color:var(--mut)}.chip.ok{background:var(--acc);color:#fff}.chip.warn{background:var(--warn);color:#fff}
.mut{color:var(--mut)}.warn{color:var(--warn)}.bad{color:var(--bad)}img.prev{max-width:100%;border-radius:8px}