:root{--bg:#f6efe2;--card:#fffaf0;--ink:#1f2a44;--mut:#6b7385;--acc:#1f2a44;--onacc:#f6efe2;--line:#e2d8c3;--warn:#8a5a00;--warnbg:#fbeccb;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--bg:#141b2e;--card:#1d2742;--ink:#f1e9d8;--mut:#9aa3b8;--acc:#f1e9d8;--onacc:#141b2e;--line:#2c3858;--warn:#f3d391;--warnbg:#3b3014;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app{max-width:720px;margin:0 auto;padding:12px 14px 96px;min-height:100%}
header{display:flex;align-items:center;gap:8px;margin-block:4px 10px}
header h1{flex:1;margin:0;font-size:1.5rem}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;min-height:44px;min-width:44px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:0 14px}
button.pri{background:var(--acc);color:var(--onacc);border-color:var(--acc)}
button.danger{color:#b3261e}
input,textarea,select{width:100%;min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 12px}
textarea{min-height:55vh;resize:vertical;line-height:1.7}
.title{font-size:1.25rem;font-weight:600;margin-block:8px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-block:10px}
.chip{white-space:nowrap;min-height:38px;border-radius:999px}
.chip[aria-pressed=true]{background:var(--acc);color:var(--onacc)}
.note{display:block;width:100%;text-align:start;margin-block:8px;padding:12px 14px;min-height:0}
.note b{display:block}.note span{color:var(--mut);font-size:.9rem}
.note small{display:block;color:var(--mut);margin-top:4px}
.banner{background:var(--warnbg);color:var(--warn);border-radius:12px;padding:10px 12px;margin-block:8px;font-size:.92rem}
.fab{position:fixed;inset-block-end:calc(18px + env(safe-area-inset-bottom));inset-inline-end:18px;min-height:56px;border-radius:28px;padding:0 22px;box-shadow:0 4px 14px #0004}
.row{display:flex;gap:8px;align-items:center;margin-block:8px;flex-wrap:wrap}
.row>*{flex:1}
.st{color:var(--mut);font-size:.9rem;min-height:1.4em}
.st.bad{color:#b3261e;font-weight:600}
.empty{text-align:center;color:var(--mut);margin-block:48px}
h2{font-size:1.05rem;margin-block:22px 6px}
@media(prefers-reduced-motion:no-preference){button{transition:opacity .15s}button:active{opacity:.7}}