.todo-container{max-width:800px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:40px;color:#fff}.header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.header p{font-size:1.1rem;opacity:.9}.todo-form{background:#fff;border-radius:12px;padding:30px;margin-bottom:30px;box-shadow:0 10px 30px #0003}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#333}.form-group input,.form-group textarea{width:100%;padding:12px;border:2px solid #e1e5e9;border-radius:8px;font-size:16px;transition:border-color .3s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.btn-secondary{background:#f8f9fa;color:#333;border:2px solid #e1e5e9}.btn-danger{background:#dc3545;color:#fff}.btn-success{background:#28a745;color:#fff}.btn-sm{padding:8px 16px;font-size:14px}.search-box{background:#fff;border-radius:12px;padding:20px;margin-bottom:30px;box-shadow:0 10px 30px #0003}.search-box input{width:100%;padding:12px;border:2px solid #e1e5e9;border-radius:8px;font-size:16px}.todo-list{background:#fff;border-radius:12px;padding:20px;box-shadow:0 10px 30px #0003}.todo-item{display:flex;align-items:center;padding:20px;border-bottom:1px solid #e1e5e9;transition:background-color .3s ease}.todo-item:last-child{border-bottom:none}.todo-item:hover{background-color:#f8f9fa}.todo-item.completed{opacity:.6}.todo-item.completed .todo-content h3,.todo-item.completed .todo-content p{text-decoration:line-through}.todo-checkbox{width:24px;height:24px;margin-right:16px;cursor:pointer}.todo-content{flex:1}.todo-content h3{margin-bottom:8px;color:#333;font-size:1.2rem}.todo-content p{color:#666;margin-bottom:8px}.todo-meta{display:flex;gap:16px;font-size:.9rem;color:#999}.todo-actions{display:flex;gap:8px;margin-left:16px}.empty-state{text-align:center;padding:60px 20px;color:#666}.empty-state h3{font-size:1.5rem;margin-bottom:10px}.loading{text-align:center;padding:40px;color:#666}.error{background:#f8d7da;color:#721c24;padding:16px;border-radius:8px;margin-bottom:20px;border:1px solid #f5c6cb}.edit-form{background:#f8f9fa;padding:20px;border-radius:8px;margin-top:16px}