:root{color:#0f172a;background:#f3f7fc;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none}body{margin:0;min-width:320px;background:#f3f7fc}button,input,select{font:inherit}.page{max-width:780px;margin:0 auto;padding:56px 24px 160px}.todo{display:grid;gap:22px;padding:28px;border:1px solid #dbe6f2;border-radius:20px;background:#fff;box-shadow:0 20px 60px #23456b14}.todo__header{display:flex;align-items:end;justify-content:space-between;gap:24px}.todo__eyebrow{margin:0 0 6px;color:#2e9df7;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}h1{margin:0;font-size:clamp(30px,5vw,42px);line-height:1.06;letter-spacing:-.04em}.todo__count{flex:none;margin:0;padding:6px 10px;border-radius:999px;background:#eaf5fe;color:#0d6ebd;font-size:12px;font-weight:700}.composer{display:grid;gap:8px}.composer__label{color:#425a70;font-size:12px;font-weight:700}.composer__row{display:flex;gap:10px}.composer input,.composer select{padding:12px 13px;border:1px solid #cfdeed;border-radius:10px;background:#fff;color:inherit}.composer input{min-width:0;flex:1}.composer select{width:112px;flex:none;color:#3d5369;cursor:pointer}.composer input:focus,.composer select:focus,.search-box input:focus{border-color:#2e9df7;outline:3px solid rgb(46 157 247 / 18%)}.composer button{padding:0 18px;border:0;border-radius:10px;background:#0d6ebd;color:#fff;font-weight:700}.composer button:disabled,.todo__clear:disabled{cursor:not-allowed;opacity:.45}.search-box{position:relative;display:flex;align-items:center}.search-box__icon{position:absolute;left:13px;color:#7c91a6;font-size:18px;line-height:1;pointer-events:none}.search-box input{width:100%;padding:10px 13px 10px 40px;border:1px solid #dbe6f2;border-radius:10px;background:#f8fbfe;color:inherit}.tasks{display:grid;gap:8px;max-height:360px;margin:0;padding:0 4px 0 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;list-style:none}.tasks:focus-visible{outline:3px solid rgb(46 157 247 / 18%);outline-offset:4px}.task{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e3edf7;border-radius:12px;background:#fbfdff}.task__check{display:grid;width:24px;height:24px;flex:none;place-items:center;border:1px solid #bdd4e9;border-radius:999px;background:#fff;color:#0d6ebd;font-size:13px;font-weight:800;cursor:pointer}.task__body{display:flex;flex:1;min-width:0;flex-wrap:wrap;align-items:center;gap:7px 9px}.task__text{overflow-wrap:anywhere}.task.is-done .task__text{color:#8295a8;text-decoration:line-through}.task__actions{display:flex;flex:none;align-items:center;gap:2px}.task__edit,.task__remove{display:grid;width:28px;height:28px;flex:none;place-items:center;border:0;border-radius:8px;background:transparent;color:#8aa0b5;font-size:20px;line-height:1;cursor:pointer}.task__edit:hover,.task__edit:focus-visible{background:#eaf5fe;color:#0d6ebd;outline:none}.task__remove:hover,.task__remove:focus-visible{background:#fff1f2;color:#be123c;outline:none}.task__priority{padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5}.priority--today{background:#e0f2fe;color:#0369a1}.priority--soon{background:#fef3c7;color:#92400e}.priority--later{background:#eef2f7;color:#52677d}.tasks__empty{margin:0;padding:18px 0;color:#94a3b8;font-size:13px;text-align:center}.todo__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid #eef3f9}.filters{display:flex;gap:4px;padding:3px;border-radius:999px;background:#f1f5f9}.filters button{padding:5px 11px;border:0;border-radius:999px;background:transparent;color:#52677d;font-size:13px;cursor:pointer}.filters button.is-active{background:#fff;color:#0f172a;box-shadow:0 1px 4px #0f172a1f}.bulk{position:relative}.bulk__trigger,.todo__clear{padding:7px 11px;border:1px solid #d5e0ec;border-radius:9px;background:#fff;color:#52677d;font-size:13px;cursor:pointer}.bulk__trigger:hover,.bulk__trigger[aria-expanded=true]{border-color:#b9cee2;background:#f8fbfe}.bulk__menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:3;padding:6px;border:1px solid #dbe6f2;border-radius:10px;background:#fff;box-shadow:0 12px 30px #23456b29}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:24px;background:#0f172a6b}.dialog{display:grid;width:min(420px,100%);gap:9px;padding:22px;border:1px solid #dbe6f2;border-radius:16px;background:#fff;box-shadow:0 24px 70px #0f172a3d}.dialog h2{margin:0 0 4px;font-size:20px;letter-spacing:-.02em}.dialog__label{color:#3d5369;font-size:13px;font-weight:700}.dialog input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #c9d8e7;border-radius:10px;color:inherit}.dialog input:focus{border-color:#2e9df7;outline:3px solid rgb(46 157 247 / 18%)}.dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.dialog__cancel,.dialog__save{padding:9px 13px;border-radius:9px;font-weight:700;cursor:pointer}.dialog__cancel{border:1px solid #d5e0ec;background:#fff;color:#52677d}.dialog__save{border:0;background:#0d6ebd;color:#fff}.dialog__save:disabled{cursor:not-allowed;opacity:.45}@media(max-width:560px){.todo__header,.todo__footer,.composer__row{align-items:stretch;flex-direction:column}.composer select{width:100%}.composer button{min-height:44px}}