:root{
    --bg: #f7f7fb;
    --card: #ffffff;
    --accent: #4f46e5;
    --muted: #6b7280;
    --danger: #ef4444;
}

*{
    box-sizing: border-box
}
body{
    margin:0; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
    background: var(--bg); color:#111827; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.app{max-width:720px;margin:36px auto;padding:20px}
.app-header h1{margin:0;font-size:1.8rem}
.subtitle{margin:4px 0 18px;color:var(--muted)}

.composer{display:flex;gap:8px;margin-bottom:12px}
.composer input[type="text"]{flex:1;padding:10px 12px;border:1px solid #e6e6f0;border-radius:8px;background:#fff}
.composer button{background:var(--accent);color:white;border:none;padding:10px 14px;border-radius:8px;cursor:pointer}
.composer button:hover{filter:brightness(.95)}

.controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.filters{display:flex;gap:8px}
.filters .filter{background:transparent;border:1px solid transparent;padding:6px 10px;border-radius:6px;cursor:pointer}
.filters .filter.active{background:var(--card);border-color:#e6e6f0;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.actions{display:flex;gap:12px;align-items:center;color:var(--muted)}
.actions button{background:transparent;border:none;color:var(--danger);cursor:pointer}

.list-wrap{background:var(--card);padding:14px;border-radius:10px;box-shadow:0 6px 18px rgba(31,41,55,.06)}
.task-list{list-style:none;margin:0;padding:0}
.task-item{display:flex;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px dashed #f1f3f5}
.task-item:last-child{border-bottom:0}
.task-item .toggle{width:18px;height:18px}
.task-text{flex:1}
.task-item.completed .task-text{ text-decoration:line-through;color:var(--muted)}
.btn{background:transparent;border:1px solid #e6e6f0;padding:6px 8px;border-radius:6px;cursor:pointer}
.btn.delete{border-color:#fee2e2;color:var(--danger)}
.edit-input{flex:1;padding:6px;border-radius:6px;border:1px solid #e6e6f0}
.empty{color:var(--muted);padding:12px;text-align:center}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media (max-width:480px){.app{margin:18px;padding:12px}.composer button{padding:8px 10px}}

/* Drag handle and priority */
.drag-handle{cursor:grab;padding:6px 8px;color:var(--muted);user-select:none}
.task-item.dragging{opacity:0.6}
.priority-select{border:1px solid #e6e6f0;border-radius:6px;padding:6px;background:#fff;color:#111827}
.task-item .priority-select{margin-left:8px}