:root { color-scheme: light dark; --bg:#fff; --card:#f6f6f7; --fg:#111; --muted:#6b7280; --line:#e2e2e5; --accent:#2563eb; --bad:#dc2626; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111; --card:#1b1b1d; --fg:#eee; --muted:#9ca3af; --line:#2e2e33; --accent:#60a5fa; --bad:#f87171; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.4 system-ui,-apple-system,sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
main { max-width:36rem; margin:0 auto; padding:1rem 1rem calc(5rem + env(safe-area-inset-bottom)); }
h1 { font-size:1.6rem; margin:.5rem 0 1rem; }
h2 { font-size:1.1rem; margin:0 0 .6rem; }
h3 { font-size:.8rem; margin:1rem 0 .2rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.card { background:var(--card); border-radius:1rem; padding:1rem; margin:0 0 1rem; }

input, select, button { font:inherit; padding:.6rem .7rem; border:1px solid var(--line); border-radius:.6rem;
  background:var(--bg); color:inherit; min-width:0; }
button { cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.big { width:100%; padding:.9rem; }
button.link { border:none; background:none; color:var(--accent); padding:.3rem .5rem; }
button.icon { border:none; background:none; font-size:1.6rem; padding:.1rem .6rem; line-height:1; }
button.del { border:none; background:none; color:var(--muted); font-size:1.3rem; padding:.2rem .6rem; }
button.plus { width:100%; border-style:dashed; color:var(--accent); background:none; margin-top:.5rem; }

.datenav { display:flex; align-items:center; gap:.3rem; margin-bottom:.5rem; }
.datenav strong { flex:1; text-align:center; font-size:1.15rem; }
.summary { font-weight:600; margin:.2rem 0; }
.muted, .meta { color:var(--muted); font-size:.9rem; margin:.2rem 0; }
.bad { color:var(--bad); font-size:.9rem; margin:.2rem 0; }

.list { list-style:none; margin:.5rem 0 0; padding:0; }
.list li { display:flex; align-items:center; gap:.7rem; padding:.55rem 0; border-top:1px solid var(--line); }
.list li:first-child { border-top:none; }
.list input[type=checkbox] { width:1.4rem; height:1.4rem; flex:none; }
.body { flex:1; min-width:0; overflow-wrap:anywhere; }
li.done .title { text-decoration:line-through; color:var(--muted); }

.row-form { display:flex; gap:.5rem; align-items:center; }
.row-form input:not(.pts-in):not(.amt-in), .row-form select { flex:1; }
.pts-in { width:4.8rem; }
.amt-in { width:6rem; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 .2rem; }
.chip { padding:.3rem .7rem; border-radius:2rem; font-size:.9rem; }
.chip.sel { background:var(--accent); border-color:var(--accent); color:#fff; }
.chip.match:not(.sel) { border-color:var(--accent); color:var(--accent); }
.chip.new { border-style:dashed; color:var(--muted); }

label.field { display:block; margin:.5rem 0; font-size:.9rem; color:var(--muted); }
label.field input { display:block; width:100%; margin-top:.2rem; color:var(--fg); }
progress { width:100%; height:.7rem; accent-color:var(--accent); }
.progress-block { margin:.8rem 0 0; }

nav { position:fixed; left:0; right:0; bottom:0; display:flex; background:var(--bg);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
nav button { flex:1; border:none; border-radius:0; background:none; padding:.9rem 0; color:var(--muted); }
nav button.active { color:var(--accent); font-weight:600; }

#toast { position:fixed; left:50%; bottom:calc(4.5rem + env(safe-area-inset-bottom)); transform:translate(-50%,1rem);
  background:#222; color:#fff; padding:.6rem 1rem; border-radius:.7rem; opacity:0; pointer-events:none;
  transition:.2s; max-width:90%; }
#toast.show { opacity:1; transform:translate(-50%,0); }
.msg { color:var(--bad); min-height:1.4em; }
[hidden] { display:none !important; }