:root{--bg:#eceef2;--surface:#fff;--surface-2:#f6f7f9;--text:#1b2430;--muted:#7a8394;--border:#e4e7ec;--accent:#0f766e;--accent-strong:#0b5f58;--accent-soft:#d6efec;--danger:#e5484d;--danger-soft:#fdecec;--radius:14px;--shadow:0 1px 2px #1018280d, 0 10px 30px #10182812}*{box-sizing:border-box}body{min-height:100vh;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;margin:0;padding:2.5rem 1rem 4rem;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5}.todo-app{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);max-width:30rem;box-shadow:var(--shadow);margin:0 auto;padding:1.6rem 1.5rem 1.5rem}h1{letter-spacing:-.02em;margin:0 0 1.1rem;font-size:1.5rem;font-weight:700}.add-form{flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;display:flex}.add-form input{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem;font-size:1rem;transition:border-color .15s,box-shadow .15s}.add-form .text-input{flex:100%;min-width:0}.add-form .date-input{min-width:0;color:var(--muted);flex:auto}.add-form input::placeholder{color:var(--muted)}.add-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.add-form button{color:#fff;white-space:nowrap;cursor:pointer;background:var(--accent);border:none;border-radius:10px;flex:none;padding:.6rem 1.2rem;font-size:1rem;font-weight:600;transition:background .15s,transform 50ms}.add-form button:hover{background:var(--accent-strong)}.add-form button:active{transform:translateY(1px)}.group+.group{margin-top:1.4rem}.group-title{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;align-items:center;gap:.45rem;margin:0 0 .55rem;font-size:.72rem;font-weight:700;display:flex}.group-title .n{color:var(--accent);font-variant-numeric:tabular-nums;background:var(--accent-soft);border-radius:999px;padding:0 .45rem;font-size:.7rem}.group.completed .group-title .n{color:var(--muted);background:var(--surface-2)}.todo-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.todo-item{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;align-items:flex-start;gap:.7rem;padding:.7rem .8rem;transition:border-color .15s,box-shadow .15s;display:flex}.todo-item:hover{border-color:#d3d8e0;box-shadow:0 2px 6px #1018280d}.todo-item input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--accent);cursor:pointer;flex:none;margin-top:.1rem}.todo-main{flex-direction:column;flex:1;gap:.15rem;min-width:0;display:flex}.todo-text{overflow-wrap:anywhere}.due{color:var(--muted);align-items:center;gap:.3rem;font-size:.75rem;display:inline-flex}.todo-item.done{opacity:.72}.todo-item.done .todo-text{color:var(--muted);text-decoration:line-through}.delete-button{color:var(--muted);white-space:nowrap;cursor:pointer;background:0 0;border:none;border-radius:6px;flex:none;padding:.3rem .55rem;font-size:.85rem;transition:color .15s,background .15s}.delete-button:hover{color:var(--danger);background:var(--danger-soft)}.empty{color:var(--muted);text-align:center;border:1px dashed var(--border);border-radius:10px;padding:2.25rem 1rem}.empty .mark{margin-bottom:.4rem;font-size:1.6rem}.empty p{margin:.15rem 0}.empty .hint{font-size:.85rem}.note{color:var(--muted);border-top:1px solid var(--border);align-items:flex-start;gap:.4rem;margin-top:1.25rem;padding-top:1rem;font-size:.75rem;line-height:1.45;display:flex}.note:before{content:"🔒";flex:none}@media (prefers-reduced-motion:reduce){*{transition:none!important}}