*{box-sizing:border-box}
:root{
  --bg1:#F7F4EF;
  --bg2:#FFFFFF;
  --card:#FFFFFF;
  --text:#0F3A37;
  --muted:#4F7C78;
  --accent:#0F766E;
  --border:#E8E2D9;
  --radius:20px;
  --shadow:0 10px 30px rgba(15,118,110,.12);
}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg1), var(--bg2));
  display:flex; flex-direction:column;
}
header{
  padding:26px 20px 8px;
  text-align:center;
}
h1{margin:0;font-size:28px;letter-spacing:.3px}
.date{color:var(--muted);margin-top:6px}
main{padding:12px; max-width:820px; margin:0 auto; width:100%}
.block{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 14px 6px;
  margin:12px 0;
  box-shadow:var(--shadow);
}
.block h2{margin:4px 2px 10px; font-size:18px}
.checklist{list-style:none; padding:0; margin:0}
.item{
  display:flex; align-items:center; gap:10px;
  padding:12px 8px; border-radius:14px;
}
.item + .item{border-top:1px dashed var(--border)}
input[type=checkbox]{width:22px;height:22px; accent-color:var(--accent)}
.label{flex:1; line-height:1.35}
.label.done{color:#8aa9a6; text-decoration:line-through}
footer{
  display:flex; gap:10px; justify-content:center; align-items:center;
  padding:16px 12px 28px;
}
footer button, .add-row button{
  background:var(--accent); color:white; border:none; padding:10px 14px;
  border-radius:14px; font-weight:600; cursor:pointer; box-shadow:var(--shadow);
}
footer button#reset-day{background:#3A6D69}
footer .howto{color:var(--accent); text-decoration:underline; font-weight:600}
.hidden{display:none}
.add-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  margin:12px 0 20px;
  box-shadow:var(--shadow);
}
.add-row{display:flex; gap:8px; align-items:center}
.add-row input{flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:12px}
.add-row select{padding:10px; border:1px solid var(--border); border-radius:12px}
.hint{color:var(--muted); font-size:13px; margin-top:8px}

dialog{
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(0,0,0,.25)}