:root { --bg:#f6f6f4; --card:#ffffff; --ink:#16171a; --muted:#6b6e76; --line:#e4e4e0; --accent:#2f6fed; --amber:#d99a1e; --green:#2f9e5b; --grey:#a3a6ad; --danger:#c8432b; }
@media (prefers-color-scheme: dark) { :root { --bg:#111214; --card:#1b1c20; --ink:#ececee; --muted:#9a9ca3; --line:#2a2b31; --accent:#6d9bff; } }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust:100%; }
main { max-width:640px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 96px); }
header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
h1 { font-size:28px; margin:0; letter-spacing:-0.02em; }
h2 { font-size:18px; margin:0 0 8px; }
.badge { font-size:11px; font-weight:600; color:var(--danger); border:1px solid var(--danger); border-radius:6px; padding:1px 6px; }
.pill { margin-left:auto; border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:999px; padding:6px 12px; font-size:13px; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill.pending { color:var(--amber); border-color:var(--amber); }
nav { display:flex; gap:6px; margin-bottom:12px; }
nav button { flex:1; border:0; background:transparent; color:var(--muted); padding:8px; border-radius:10px; font-size:15px; }
nav button.on { background:var(--card); color:var(--ink); font-weight:600; }
.list { list-style:none; margin:0; padding:0; background:var(--card); border-radius:14px; overflow:hidden; }
.list li { padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
.list li:last-child { border-bottom:0; }
.list li.deleted { opacity:.5; }
.row1 { display:flex; align-items:center; gap:8px; }
.name { font-weight:600; flex:1; }
.sub { color:var(--muted); font-size:13px; margin-top:2px; }
.dot { width:9px; height:9px; border-radius:50%; }
.dot.green { background:var(--green); } .dot.amber { background:var(--amber); } .dot.grey { background:var(--grey); }
.card { background:var(--card); border-radius:14px; padding:16px; margin-bottom:12px; }
label { display:block; color:var(--muted); font-size:13px; margin:12px 0 4px; }
label.inline { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:15px; }
input, textarea, select { width:100%; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
input[type=checkbox] { width:auto; }
button { font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:6px 6px 0 0; cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
button.link { border:0; background:transparent; color:var(--accent); padding:4px 8px; }
.actions { margin-top:14px; }
.items { list-style:none; padding:0; margin:0; }
.items li { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); }
.fab { position:fixed; right:20px; bottom:calc(env(safe-area-inset-bottom) + 20px); width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; border:0; font-size:28px; line-height:1; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.notice { background:var(--card); border-left:3px solid var(--amber); padding:10px 12px; border-radius:10px; margin-bottom:12px; font-size:14px; }
.cmp { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cmp small { color:var(--muted); }
.cmp p { margin:4px 0; white-space:pre-wrap; word-break:break-word; }
.muted { color:var(--muted); font-size:14px; }
.center { text-align:center; }