*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f5f7fa;color:#333;line-height:1.6;padding:20px}.todo-app{max-width:600px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014;overflow:hidden}.app-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;text-align:center}.app-title{font-size:2rem;font-weight:600;margin-bottom:8px}.app-subtitle{font-size:1rem;opacity:.9;font-weight:300}.stats-section{padding:20px 30px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.stat-item{text-align:center;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000000d}.stat-number{font-size:1.5rem;font-weight:700;color:#4a5568;margin-bottom:4px}.stat-label{font-size:.8rem;color:#718096;text-transform:uppercase;letter-spacing:.5px}.task-form{padding:30px;background:#fff;border-bottom:1px solid #e2e8f0}.form-row{display:flex;gap:12px;align-items:center}.task-input{flex:1;padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:border-color .2s ease}.task-input:focus{outline:none;border-color:#667eea}.task-input::placeholder{color:#a0aec0}.btn{padding:12px 20px;border:none;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-primary{background-color:#48bb78;color:#fff}.btn-primary:hover{background-color:#38a169;transform:translateY(-1px)}.filter-select{padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:.95rem;background:#fff;cursor:pointer;transition:border-color .2s ease}.filter-select:focus{outline:none;border-color:#667eea}.task-list{list-style:none;padding:0;margin:0}.task-item{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;border-bottom:1px solid #e2e8f0;background:#fff;transition:all .2s ease}.task-item:hover{background-color:#f7fafc}.task-item.completed{background-color:#f0fff4;opacity:.7}.task-item.completed .task-text{text-decoration:line-through;color:#68d391}.task-content{display:flex;align-items:center;flex:1}.task-checkbox{width:18px;height:18px;border:2px solid #cbd5e0;border-radius:4px;margin-right:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.task-checkbox.checked{background-color:#48bb78;border-color:#48bb78;color:#fff}.task-checkbox.checked:after{content:"✓";font-size:12px;font-weight:700}.task-text{font-size:1rem;color:#2d3748;font-weight:400}.complete-btn{background-color:#48bb78;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .2s ease}.complete-btn:hover{background-color:#38a169;transform:translateY(-1px)}.empty-state{padding:40px 30px;text-align:center;color:#718096}.empty-state-icon{font-size:3rem;margin-bottom:15px;opacity:.6}.empty-state-text{font-size:1.1rem;margin-bottom:8px;color:#4a5568}.empty-state-subtext{font-size:.9rem;opacity:.8}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){body{padding:10px}.todo-app{margin:0}.app-header{padding:20px}.app-title{font-size:1.5rem}.stats-section,.task-form{padding:20px}.form-row{flex-direction:column;gap:10px}.task-input,.btn,.filter-select{width:100%}.task-item{padding:15px 20px;flex-direction:column;align-items:flex-start;gap:10px}.task-content{width:100%}.stats-grid{grid-template-columns:1fr;gap:10px}}