:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#172033;background:#f4f7fb}*{box-sizing:border-box}body{margin:0;min-width:320px}main{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(140deg,#e8f0ff,#f8fbff 55%,#edf8f3)}.card{width:min(100%,620px);background:#fff;padding:clamp(24px,6vw,48px);border-radius:22px;box-shadow:0 18px 60px #42628b20}h1{margin:0;font-size:2.2rem;letter-spacing:-.04em}.subtitle{color:#68758a;margin:8px 0 28px}form{display:flex;gap:10px}input[aria-label="Ny todo"]{flex:1;min-width:0;padding:13px 15px;border:1px solid #d6deeb;border-radius:10px;font-size:1rem}button{border:0;border-radius:10px;padding:0 17px;background:#356ae6;color:#fff;font-weight:700;cursor:pointer}button:hover{background:#2858c9}ul{list-style:none;padding:0;margin:24px 0 0}li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #edf0f5}li span{flex:1}li.done span{color:#8a96a8;text-decoration:line-through}li input[type=checkbox]{width:18px;height:18px;accent-color:#356ae6}.delete{background:transparent;color:#9aa5b5;font-size:1.4rem;padding:0 6px}.delete:hover{background:#fff0f0;color:#c43d3d}.empty{color:#7b8798;text-align:center;padding:24px 0}.error{color:#b42318;background:#fff1f0;padding:10px;border-radius:8px}