@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#172033;background:#f5f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,textarea{font:inherit}button{cursor:pointer}main{min-height:100vh}header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1180px)/2));background:#101828;color:#fff}.brand{display:flex;align-items:center;gap:10px;font:800 19px Manrope}.brand svg{color:#7ef0c3}.status{display:flex;gap:8px;align-items:center;font-size:13px;color:#cbd5e1}.status i{width:8px;height:8px;border-radius:50%;background:#54dba6;box-shadow:0 0 0 4px #54dba620}.hero{padding:55px max(24px,calc((100vw - 1180px)/2)) 44px;display:flex;justify-content:space-between;align-items:end;background:#101828;color:#fff}.eyebrow{color:#7ef0c3;font-size:12px;letter-spacing:.17em;font-weight:700;margin:0 0 14px}h1{font:800 clamp(36px,5vw,60px)/1.05 "Manrope";letter-spacing:-.04em;margin:0}.subtitle{color:#aeb9cb;font-size:16px;margin:17px 0 0}.progress{text-align:right;display:grid}.progress strong{font:700 28px Manrope;color:#7ef0c3}.progress span{color:#8e9bb0;font-size:13px}.layout{max-width:1180px;margin:0 auto;padding:34px 24px 70px;display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start}.card{background:#fff;border:1px solid #e5e9f1;border-radius:16px;box-shadow:0 8px 30px #19243c0b}.form-card{padding:24px;position:sticky;top:24px}.card-title{display:flex;align-items:center;gap:12px;margin-bottom:25px}.icon-box{width:39px;height:39px;background:#e9fcf5;color:#087f5b;border-radius:10px;display:grid;place-items:center}h2,.card-title p{margin:0}h2{font:700 17px Manrope}.card-title p{color:#8791a3;font-size:13px;margin-top:3px}label{display:grid;gap:8px;font-weight:600;font-size:13px;margin-bottom:17px}input,textarea{width:100%;border:1px solid #dce1e9;border-radius:10px;padding:12px 13px;outline:0;background:#fbfcfe;color:#172033;resize:vertical;transition:.2s}input:focus,textarea:focus{border-color:#1bb386;box-shadow:0 0 0 3px #1bb38617;background:#fff}.primary,.secondary{width:100%;border:0;border-radius:10px;padding:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px}.primary{background:#18a87e;color:#fff}.primary:hover{background:#128966}.primary:disabled{opacity:.65;cursor:wait}.secondary{background:#edf1f6;margin-top:8px;color:#4a5669}.toolbar{display:flex;justify-content:space-between;gap:16px;margin-bottom:17px}.search{position:relative;flex:1;max-width:340px}.search svg{position:absolute;left:12px;top:12px;color:#99a3b2}.search input{padding-left:39px;background:#fff}.filters{display:flex;background:#e9edf3;padding:4px;border-radius:10px}.filters button{border:0;background:transparent;padding:7px 13px;border-radius:7px;text-transform:capitalize;font-size:13px;color:#657185}.filters button.active{background:#fff;color:#172033;font-weight:700;box-shadow:0 2px 8px #18223812}.task-list{display:grid;gap:11px}.task{background:#fff;border:1px solid #e4e8ef;border-radius:13px;padding:17px;display:flex;gap:14px;align-items:flex-start;transition:.2s}.task:hover{border-color:#cbd3de;transform:translateY(-1px);box-shadow:0 6px 18px #1720330a}.check{flex:0 0 21px;width:21px;height:21px;margin-top:2px;border:1.5px solid #bdc6d3;border-radius:6px;background:#fff;padding:0;display:grid;place-items:center;color:#fff}.completed .check{background:#18a87e;border-color:#18a87e}.task-copy{flex:1;min-width:0}.task-copy h3{font:700 15px Manrope;margin:0 0 5px}.task-copy p{color:#6b7689;margin:0 0 8px;font-size:14px;line-height:1.5}.task-copy small{color:#a0a9b6;font-size:11px}.completed .task-copy h3{color:#929cab;text-decoration:line-through}.actions{display:flex;gap:4px}.actions button,.error button{border:0;background:transparent;color:#8b95a5;padding:7px;border-radius:7px}.actions button:hover{background:#eef2f6;color:#313d50}.actions .danger:hover{background:#fff0f0;color:#d23c3c}.empty{min-height:280px;border:1px dashed #d4dae3;border-radius:15px;display:grid;place-content:center;justify-items:center;text-align:center;color:#8b95a5;background:#fafbfc}.empty h3{margin:13px 0 5px;color:#455165}.empty p{margin:0;font-size:14px}.error{display:flex;align-items:center;justify-content:space-between;background:#fff0f0;color:#b62f2f;border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px}@media(max-width:760px){.hero{align-items:flex-start;flex-direction:column;gap:28px;padding-top:40px}.progress{text-align:left}.layout{grid-template-columns:1fr}.form-card{position:static}.toolbar{flex-direction:column}.search{max-width:none}.filters button{flex:1}.filters{width:100%}}