:root{--bg-primary:#f0f2f5;--bg-card:#ffffffd9;--bg-card-hover:#fffffff2;--text-primary:#1a1a2e;--text-secondary:#4a4a6a;--text-muted:#88a;--border-color:#e0e0e0;--shadow-sm:0 4px 12px #0000000d;--shadow-md:0 8px 30px #0000001f;--shadow-lg:0 20px 60px #00000026;--radius:16px;--radius-sm:8px;--transition:.25s ease;--font-sans:"Segoe UI", system-ui, -apple-system, sans-serif}[data-theme=dark]{--bg-primary:#1a1a2e;--bg-card:#1e1e32e6;--bg-card-hover:#282841f2;--text-primary:#e8e8f0;--text-secondary:#b0b0d0;--text-muted:#77a;--border-color:#3a3a5a;--shadow-sm:0 4px 12px #0000004d;--shadow-md:0 8px 30px #00000080;--shadow-lg:0 20px 60px #0009}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;transition:background var(--transition), color var(--transition);justify-content:center;align-items:center;padding:1.5rem;line-height:1.6;display:flex}#root{width:100%;max-width:700px}.app-container{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius);box-shadow:var(--shadow-md);transition:background var(--transition), box-shadow var(--transition);border:1px solid #ffffff26;padding:2rem 1.8rem;animation:.5s fadeUp}.header{text-align:center;margin-bottom:2rem}.header h1{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:2.2rem;font-weight:700}.header .subtitle{color:var(--text-secondary);margin-top:.2rem;font-size:.95rem}.task-form{gap:.75rem;margin-bottom:2rem;display:flex}.task-input{border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);transition:border var(--transition), box-shadow var(--transition);flex:1;padding:.8rem 1.2rem;font-size:1rem}.task-input::placeholder{color:var(--text-muted)}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition), transform .15s, box-shadow var(--transition);color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;box-shadow:0 4px 12px #667eea4d}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn:active{transform:scale(.96)}.btn-add{background:linear-gradient(135deg,#667eea,#764ba2)}.filter-section{border-bottom:1px solid var(--border-color);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;margin-bottom:2rem;padding-bottom:.5rem;display:flex}.filter-buttons{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.filter-btn{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;border-radius:20px;padding:.4rem 1rem;font-size:.9rem;font-weight:500}.filter-btn:hover{background:#667eea14;border-color:#667eea}.filter-btn.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-color:#0000;box-shadow:0 2px 8px #667eea4d}.search-box{flex:1;min-width:150px}.search-input{border:1px solid var(--border-color);background:var(--bg-primary);width:100%;color:var(--text-primary);transition:border var(--transition), box-shadow var(--transition);border-radius:20px;justify-content:center;margin-bottom:1rem;padding:.4rem 1rem;font-size:.9rem}.search-input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea26}.task-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.empty-message{text-align:center;color:var(--text-muted);padding:3rem 0;font-size:1.1rem}.task-item{background:var(--bg-primary);border-radius:var(--radius-sm);transition:all var(--transition);border:1px solid #0000;align-items:center;gap:.75rem;padding:.7rem 1rem;display:flex}.task-item:hover{border-color:var(--border-color);background:var(--bg-card-hover);box-shadow:var(--shadow-sm)}.task-item.completed .task-title{color:var(--text-muted);text-decoration:line-through}.task-checkbox{accent-color:#667eea;cursor:pointer;border-radius:4px;flex-shrink:0;width:20px;height:20px}.task-title{cursor:default;color:var(--text-primary);word-break:break-word;flex:1;font-size:1rem}.task-actions{flex-shrink:0;gap:.3rem;display:flex}.btn-edit,.btn-delete{cursor:pointer;transition:background var(--transition), transform .15s;color:var(--text-secondary);background:0 0;border:none;border-radius:4px;padding:.2rem .4rem;font-size:1.1rem}.btn-edit:hover{color:#667eea;background:#667eea26;transform:scale(1.1)}.btn-delete:hover{color:#ef4444;background:#ef444426;transform:scale(1.1)}.edit-form{flex-wrap:wrap;flex:1;gap:.4rem;display:flex}.edit-input{border-radius:var(--radius-sm);background:var(--bg-primary);min-width:100px;color:var(--text-primary);border:2px solid #667eea;flex:1;padding:.3rem .7rem;font-size:.95rem}.edit-input:focus{outline:none;box-shadow:0 0 0 3px #667eea40}.btn-save{color:#fff;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition);background:#10b981;border:none;padding:.3rem .9rem;font-weight:600}.btn-save:hover{background:#059669}.btn-cancel{color:#fff;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition);background:#ef4444;border:none;padding:.3rem .9rem;font-weight:600}.btn-cancel:hover{background:#dc2626}@media (width<=640px){#root{padding:.5rem}.app-container{border-radius:12px;padding:1.2rem 1rem}.header h1{font-size:1.6rem}.task-form{flex-direction:column;gap:.5rem}.filter-section{flex-direction:column;align-items:stretch;gap:.75rem}.filter-buttons{justify-content:center}.search-box{min-width:unset}.task-item{flex-wrap:wrap;gap:.5rem}.task-title{flex:100%;order:2;margin-left:0;padding-left:0}.task-checkbox{order:1}.task-actions{order:3;margin-left:auto}.edit-form{flex:100%;order:2}.btn{padding:.7rem 1rem}}