:root{--bg:#f7f8fb;--card:#ffffff;--muted:#6b7280;--accent:#2563eb}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:#111}
.container{max-width:760px;margin:28px auto;padding:18px}
h1{margin:0 0 12px 0}
.task-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.task-form input,.task-form select{padding:8px;border:1px solid #ddd;border-radius:6px;background:#fff}
.task-form button{padding:8px 12px;border:none;background:var(--accent);color:#fff;border-radius:6px;cursor:pointer}
.controls{display:flex;gap:8px;margin-bottom:12px}
.controls input{flex:1;padding:8px;border:1px solid #ddd;border-radius:6px}
.task-list{list-style:none;padding:0;margin:0}
.task{display:flex;justify-content:space-between;align-items:center;background:var(--card);padding:10px;border-radius:8px;margin-bottom:8px;border:1px solid #eee}
.task.completed{opacity:0.65;text-decoration:line-through}
.task .main{display:flex;gap:10px;align-items:center}
.task .meta .when{font-size:12px;color:var(--muted)}
.actions button{margin-left:6px;padding:6px 8px;border:none;border-radius:6px;background:#eee;cursor:pointer}
@media(max-width:560px){.task-form input[type="date"],.task-form input[type="time"]{flex-basis:48%}}

/* Empty state */
.empty{padding:18px;border-radius:8px;background:#fff;text-align:center;color:var(--muted);border:1px dashed #eee;margin-bottom:12px}

/* Priority badges */
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;color:#fff;margin-left:8px}
.badge.low{background:#10b981}
.badge.medium{background:#f59e0b}
.badge.high{background:#ef4444}

/* Due soon */
.task.due-soon{box-shadow:0 0 0 4px rgba(239,68,68,0.04);border-color:#fca5a5}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);z-index:40}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background:var(--card);padding:16px;border-radius:10px;max-width:520px;width:92%;box-shadow:0 10px 30px rgba(2,6,23,0.08)}
.edit-form{display:flex;flex-direction:column;gap:8px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.edit-form input,.edit-form select,.edit-form textarea{padding:8px;border:1px solid #ddd;border-radius:6px}

@media(max-width:420px){.task .meta .when{display:block}}