:root{--primary:#6366f1;--primary-hover:#4f46e5;--bg-gradient:whitesmoke;--glass:#fffffff2;--text-main:#1e293b;--text-muted:#64748b;--danger:#ef4444;--success:#10b981}body{background:var(--bg-gradient);min-height:100vh;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif}.box-container{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:40px 20px}.box-heading .Heading{color:#000;text-align:center;letter-spacing:-1px;text-shadow:0 4px 12px #0000001a;margin-bottom:30px;font-size:3rem;font-weight:800}.input-box{background:var(--glass);border-radius:20px;gap:15px;margin-bottom:50px;padding:15px;display:flex;box-shadow:0 20px 25px -5px #0000001a}.input-task{color:var(--text-main);background:0 0;border:none;outline:none;flex:1;padding:10px 20px;font-size:1.2rem}.addbtn{background:var(--primary);color:#fff;text-transform:uppercase;letter-spacing:1px;cursor:pointer;border:none;border-radius:12px;padding:15px 40px;font-size:1rem;font-weight:700;transition:all .3s}.addbtn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 10px 15px -3px #6366f166}.tasklist-wrapper{grid-template-columns:1fr 1fr;gap:30px;display:grid}.tasklist{background:var(--glass);border-radius:24px;min-height:100px;margin:10px;padding:30px;box-shadow:0 10px 15px -3px #0000000d}.tasklist h2{color:var(--text-main);align-items:center;gap:10px;margin-bottom:20px;font-size:1.5rem;display:flex}hr{border:0;border-top:2px solid #f1f5f9;margin-bottom:25px}.tasklist>div{background:#fff;border:1px solid #f1f5f9;border-radius:16px;align-items:center;margin-bottom:12px;padding:18px;transition:all .2s;display:flex}.tasklist>div:hover{border-color:var(--primary);box-shadow:0 4px 12px #0000000d}.checkBox{cursor:pointer;width:22px;height:22px;accent-color:var(--primary);margin-right:15px}.deletebtn,.updatebtn{cursor:pointer;border:none;border-radius:8px;margin-left:8px;padding:8px 16px;font-size:.85rem;font-weight:600}.deletebtn{color:var(--danger);background:#fef2f2;margin-left:auto}.deletebtn:hover{background:var(--danger);color:#fff}.updatebtn{color:var(--primary);background:#eef2ff}.updatebtn:hover{background:var(--primary);color:#fff}.complete-task>div{background:#f8fafc}.complete-task span{color:var(--text-muted);text-decoration:line-through}@media (width<=900px){.tasklist-wrapper{grid-template-columns:1fr}.box-heading .Heading{text-align:center;font-size:2rem}}@media (width<=600px){.input-box{border-radius:15px;flex-direction:column}.addbtn{width:100%}}