:root{--bg: #f7f8fb;--card: #ffffff;--muted: #6b7280;--accent: #2563eb;--danger: #ef4444}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:var(--bg);color:#0f172a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:2rem}.app{max-width:720px;margin:0 auto;background:var(--card);padding:1.25rem 1.5rem;border-radius:12px;box-shadow:0 8px 30px #02061714}nav{display:flex;gap:1rem;margin-bottom:.75rem}nav a{color:var(--muted);text-decoration:none;font-weight:600}h1{margin:.25rem 0 .5rem;font-size:1.5rem}p{margin:0 0 1rem;color:var(--muted)}form{display:flex;gap:.5rem;align-items:center}input[type=text],input[type=search]{flex:1;padding:.6rem .75rem;border-radius:8px;border:1px solid #e6e9ef;font-size:.95rem}button{background:var(--accent);color:#fff;border:none;padding:.55rem .85rem;border-radius:8px;cursor:pointer;font-weight:600}button:hover{opacity:.95}ul{list-style:none;padding:0;margin:1rem 0}li{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid #f0f2f5}li label{display:flex;align-items:center;gap:.6rem;flex:1}li input[type=checkbox]{width:18px;height:18px}li span{font-size:.98rem}.done{color:var(--muted);text-decoration:line-through}.controls{display:flex;gap:.5rem;align-items:center}.delete{background:transparent;color:var(--danger);border:none;padding:.35rem .6rem;border-radius:8px;cursor:pointer}@media(max-width:520px){body,.app{padding:1rem}nav{flex-wrap:wrap}h1{font-size:1.25rem}button{padding:.5rem .7rem}}input:focus,button:focus,.delete:focus{outline:3px solid rgba(37,99,235,.12);outline-offset:2px}
