:root{font-family:system-ui,-apple-system,"Noto Sans Thai",sans-serif;color:#17212b;background:#f4f7fb}*{box-sizing:border-box}body{margin:0}.app-shell{max-width:1000px;margin:auto;padding:48px 24px 80px}header{display:flex;justify-content:space-between;align-items:start;gap:20px}.eyebrow{letter-spacing:.12em;font-size:.72rem;font-weight:800;color:#63748c;margin:0}h1{font-size:2.25rem;margin:6px 0}.subtitle{color:#63748c;margin:0}.primary{border:0;border-radius:10px;padding:12px 17px;background:#1769e0;color:#fff;font-weight:700;cursor:pointer}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0}.stats article{background:white;padding:18px;border-radius:14px;box-shadow:0 3px 15px #1b2b4510}.stats span{display:block;color:#63748c;font-size:.9rem}.stats strong{font-size:1.8rem}.toolbar{display:flex;justify-content:space-between;gap:15px;margin-bottom:18px;flex-wrap:wrap}input,select{border:1px solid #d4dce8;border-radius:9px;padding:11px;background:#fff;font:inherit}#search{min-width:240px}.filters{display:flex;gap:6px;flex-wrap:wrap}.filter{border:0;background:transparent;padding:9px 10px;border-radius:8px;color:#52647b;cursor:pointer}.filter.active{background:#dceaff;color:#1557b0;font-weight:700}.task-list{display:grid;gap:10px}.task{display:flex;align-items:center;gap:14px;background:white;padding:15px;border-radius:12px;box-shadow:0 2px 10px #1b2b450b}.check{width:22px;height:22px;border-radius:50%;border:2px solid #91a3b9;background:white;cursor:pointer;flex:none}.task.completed .check{background:#22a06b;border-color:#22a06b}.task.completed h3{text-decoration:line-through;color:#8090a2}.task-body{flex:1;min-width:0}.task h3{margin:0;font-size:1rem}.meta{margin:4px 0 0;color:#6b7d92;font-size:.85rem}.status-select{padding:7px;font-size:.85rem}.delete{border:0;background:transparent;color:#c23636;cursor:pointer}.empty{text-align:center;background:#fff;border-radius:12px;padding:48px;color:#63748c}dialog{border:0;border-radius:16px;box-shadow:0 20px 80px #17212b55;width:min(450px,calc(100% - 32px)}dialog::backdrop{background:#17212b66}form{display:grid;gap:16px}label{display:grid;gap:7px;font-weight:650}.dialog-title{display:flex;justify-content:space-between;align-items:center}.dialog-title h2{margin:0}.icon{border:0;background:transparent;font-size:1.8rem;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.full{width:100%}@media(max-width:620px){.app-shell{padding:28px 16px}header{align-items:stretch;flex-direction:column}.stats{grid-template-columns:1fr}.task{align-items:flex-start;flex-wrap:wrap}.task-body{min-width:65%}.status-select{margin-left:36px}.form-grid{grid-template-columns:1fr}}