:root{--background-color: #f4f7f9;--container-bg: #ffffff;--primary-color: #4a90e2;--primary-hover-color: #357abd;--text-color: #333;--border-color: #e0e0e0;--danger-color: #e24a4a;--danger-hover-color: #c93e3e;--completed-color: #999}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.6;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px}#root{width:100%;max-width:600px;margin:20px auto}.app-container{background:var(--container-bg);border-radius:12px;box-shadow:0 4px 12px #00000014;padding:32px}header{text-align:center;margin-bottom:24px}header h1{font-size:2.5rem;color:var(--primary-color)}.task-form{display:flex;gap:10px;margin-bottom:32px}.task-input{flex-grow:1;padding:12px 16px;font-size:1rem;border:1px solid var(--border-color);border-radius:8px;transition:border-color .2s}.task-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4a90e233}.add-btn{padding:12px 20px;font-size:1rem;font-weight:500;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s}.add-btn:hover{background-color:var(--primary-hover-color)}.task-list-section h2{font-size:1.5rem;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.task-list{list-style:none;padding:0;margin-bottom:24px}.task-item{display:flex;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid var(--border-color);transition:background-color .2s}.task-item:last-child{border-bottom:none}.task-item.completed .task-title{text-decoration:line-through;color:var(--completed-color)}.task-checkbox{width:20px;height:20px;cursor:pointer}.task-title{flex-grow:1;font-size:1.1rem}.delete-btn{background:none;border:none;color:var(--danger-color);cursor:pointer;font-size:1.2rem;padding:4px;transition:color .2s,transform .2s}.delete-btn:hover{color:var(--danger-hover-color);transform:scale(1.1)}.empty-message{text-align:center;color:#888;padding:20px}