:root{--navy:#303e50;--navy-d:#232e3c;--red:#c8102e;--ink:#1d2430;--muted:#5b6675;--line:#e3e7ec;--bg:#fff}
*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
header{background:var(--navy);color:#fff;border-bottom:4px solid var(--red)}
.bar{max-width:760px;margin:auto;padding:14px 18px;display:flex;align-items:center;gap:12px}
.brand{font-weight:700;font-size:20px;letter-spacing:.2px;flex:1}.brand span{color:#fff;opacity:.7;font-weight:500;font-size:13px;display:block}
.who{font-size:13px;opacity:.85}
main{max-width:760px;margin:auto;padding:20px 18px 40px}
button,.btn{font:inherit;border:0;border-radius:8px;padding:10px 16px;cursor:pointer;background:var(--red);color:#fff;font-weight:600}
button.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);padding:7px 12px;font-size:13px}
button.link{background:none;color:var(--muted);padding:4px 8px;font-weight:500}
button.link:hover{color:var(--red)}
input{font:inherit;padding:10px 12px;border:1px solid #cfd5dc;border-radius:8px;width:100%;color:var(--ink)}
input:focus{outline:2px solid var(--navy);border-color:var(--navy)}
.add{display:flex;gap:8px;margin-bottom:20px}
h2{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:26px 0 8px}
ul{list-style:none;margin:0;padding:0}
li{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid var(--line)}
li input[type=checkbox]{width:22px;height:22px;margin-top:1px;accent-color:var(--navy);flex:none}
li .t{flex:1;min-width:0;word-wrap:break-word}.meta{font-size:12px;color:var(--muted);margin-top:3px}
li.done .txt{text-decoration:line-through;color:var(--muted)}
.empty{color:var(--muted);padding:14px 4px;font-style:italic}
.card{border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:18px}
.card h3{margin:0 0 12px;color:var(--navy)}
.grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.grid .full{grid-column:1/-1}
.msg{font-size:14px;margin-top:8px;color:var(--muted)}.err{color:var(--red)}
footer{text-align:center;color:var(--muted);font-size:12px;padding:20px}
.login{max-width:360px;margin:60px auto;padding:0 18px}.login form{display:grid;gap:10px}
.users li{align-items:center}
@media(max-width:520px){.grid{grid-template-columns:1fr}.who{display:none}}