:root{--bg:#f6f7fb;--card:#ffffff;--accent:#6b8ef1;--muted:#9aa3c7;--danger:#ff6b6b}
    *{box-sizing:border-box}
    body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0;background:linear-gradient(180deg,var(--bg),#eef2fb);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
    .app{width:100%;max-width:720px}

    header{display:flex;align-items:center;gap:16px;margin-bottom:18px}
    h1{font-size:20px;margin:0}
    .subtitle{color:var(--muted);font-size:13px}

    .card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 6px 20px rgba(20,24,40,0.06)}

    .input-row{display:flex;gap:10px}
    .input{flex:1;padding:10px 12px;border-radius:8px;border:1px solid #e6e9f6;font-size:15px}
    .add-btn{background:var(--accent);color:white;border:none;padding:10px 14px;border-radius:8px;font-weight:600;cursor:pointer}
    .add-btn:active{transform:translateY(1px)}

    .controls{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
    .filters{display:flex;gap:8px}
    .filter-btn{background:transparent;border:none;padding:6px 10px;border-radius:8px;cursor:pointer;color:var(--muted)}
    .filter-btn.active{background:#eef3ff;color:var(--accent);font-weight:600}

    .list{margin-top:14px;display:flex;flex-direction:column;gap:8px}
    .todo{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;border:1px solid #f1f3fb}
    .todo.done{opacity:0.6;text-decoration:line-through}
    .todo input[type='checkbox']{width:18px;height:18px}
    .todo .title{flex:1}
    .actions{display:flex;gap:8px}
    .action-btn{background:transparent;border:none;cursor:pointer;padding:6px;border-radius:6px}
    .action-btn.edit{color:var(--accent)}
    .action-btn.del{color:var(--danger)}

    .empty{color:var(--muted);text-align:center;padding:18px}

    footer.small{margin-top:10px;color:var(--muted);font-size:13px;text-align:right}

    /* responsive */
    @media (max-width:520px){.input-row{flex-direction:column}.controls{flex-direction:column;gap:8px}}