:root{font-family:Inter,system-ui,-apple-system,sans-serif;color:#202938;background:#f7f8fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{background:#243b5a;color:#fff;border:0;border-radius:8px;padding:11px 17px;cursor:pointer}button:hover{background:#36557c}button:disabled{opacity:.5;cursor:not-allowed}.page{min-height:100vh}.header{display:flex;justify-content:space-between;align-items:center;padding:20px max(24px,calc((100vw - 900px)/2));background:#fff;border-bottom:1px solid #e7eaf0}.brand{font-size:22px}.secondary{background:#eef1f5;color:#243b5a}.secondary:hover{background:#e2e8f0}.container{max-width:850px;margin:70px auto;padding:0 24px}h1{font-size:36px;margin:0 0 8px}.subtitle{color:#718096;margin-bottom:36px}.task-card,.login-card{background:#fff;border:1px solid #e7eaf0;border-radius:14px;padding:28px;box-shadow:0 6px 24px #18243808}.task-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.task-heading h2{margin:0;font-size:21px}.task-heading span,.footer{color:#8993a2;font-size:13px}.add-form{display:flex;gap:10px;margin-bottom:20px}.add-form input{flex:1;min-width:0;padding:12px;border:1px solid #d7dce4;border-radius:8px}.tasks{border-top:1px solid #edf0f4}.task{display:flex;justify-content:space-between;align-items:center;padding:16px 0;gap:16px;border-bottom:1px solid #edf0f4}.task-label{display:flex;align-items:center;gap:12px;cursor:pointer}.task-label input{width:18px;height:18px;accent-color:#243b5a}.done{color:#98a1ae;text-decoration:line-through}.delete{background:transparent;color:#a0a8b4;font-size:24px;padding:2px 10px}.delete:hover{background:#fff0f0;color:#cb4444}.error{color:#b42318;font-size:14px}.empty{color:#8993a2;padding:24px 0}.footer{text-align:center;margin-top:30px}.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}.login-card{width:100%;max-width:380px;text-align:center}.login-card p{color:#718096}.login-card button{margin-top:20px;width:100%}@media(max-width:600px){.container{margin-top:40px}.task-card{padding:20px}.add-form{flex-direction:column}}