:root{--bg-gradient-start: #667eea;--bg-gradient-end: #764ba2;--card-bg: #ffffff;--text-primary: #333333;--text-secondary: #666666;--border-color: #e0e0e0;--input-bg: #ffffff;--button-bg: #667eea;--button-hover: #5568d3;--secondary-bg: #f8f9fa;--secondary-hover: #e9ecef}[data-theme=dark]{--bg-gradient-start: #1a1a2e;--bg-gradient-end: #16213e;--card-bg: #0f3460;--text-primary: #eaeaea;--text-secondary: #b0b0b0;--border-color: #1f4068;--input-bg: #16213e;--button-bg: #e94560;--button-hover: #d63447;--secondary-bg: #1f4068;--secondary-hover: #2a5280}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,var(--bg-gradient-start) 0%,var(--bg-gradient-end) 100%);min-height:100vh;padding:2rem;color:var(--text-primary);transition:background .3s ease,color .3s ease}.container{max-width:800px;margin:0 auto}header{text-align:center;color:#fff;margin-bottom:3rem}header h1{font-size:2.5rem;margin-bottom:.5rem}header .subtitle{font-size:1.2rem;opacity:.9}.theme-toggle{background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);color:#fff}.theme-toggle:hover{background:#ffffff4d;border-color:#ffffff80}.todo-card{background:var(--card-bg);border-radius:12px;padding:2rem;box-shadow:0 10px 30px #0000001a;margin-bottom:2rem;transition:background .3s ease}.todo-input-group{display:flex;gap:.5rem;margin-bottom:1.5rem}.todo-input{flex:1;padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;background:var(--input-bg);color:var(--text-primary);transition:border-color .2s,background .3s,color .3s}.todo-input:focus{outline:none;border-color:var(--button-bg)}.todo-input.error{border-color:#dc3545}button{padding:.75rem 1.5rem;background:var(--button-bg);color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s;font-weight:500}button:hover{background:var(--button-hover);transform:translateY(-1px)}button:active{transform:translateY(0)}button.secondary{background:#6c757d}button.secondary:hover{background:#5a6268}button.danger{background:#dc3545;padding:.5rem 1rem;font-size:.9rem}button.danger:hover{background:#c82333}button.icon-btn{background:transparent;color:#667eea;padding:.5rem;font-size:1.2rem}button.icon-btn:hover{background:#f8f9fa;transform:none}.todo-stats{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-bottom:1rem;padding:.5rem;background:var(--secondary-bg);border-radius:6px;transition:background .3s,color .3s}.filter-bar{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.5rem}.filter-btn{padding:.5rem 1rem;background:var(--secondary-bg);color:var(--text-secondary);border:2px solid var(--border-color);border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s}.filter-btn:hover{background:var(--secondary-hover);border-color:var(--text-secondary);transform:none}.filter-btn.active{background:var(--button-bg);color:#fff;border-color:var(--button-bg)}.todo-list{list-style:none}.todo-item{background:#f8f9fa;border-radius:8px;padding:1rem;margin-bottom:.5rem;display:flex;align-items:center;gap:1rem;transition:all .3s;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}.todo-item.completed{opacity:.6}.todo-item.completed .todo-text{text-decoration:line-through;color:#999}.todo-checkbox{width:20px;height:20px;cursor:pointer}.todo-text{flex:1;font-size:1rem}.todo-actions{display:flex;gap:.5rem}.empty-state{text-align:center;padding:3rem 1rem;color:#999;display:none}.empty-state-icon{font-size:4rem;margin-bottom:1rem}.empty-state p{font-size:1.1rem}.actions-bar{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #e0e0e0}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:none}.modal.active{display:block}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000;transition:background .3s}.modal-overlay.active{background:#00000080}.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);background:var(--card-bg);border-radius:12px;padding:2rem;max-width:500px;width:90%;opacity:0;transition:all .3s}.modal-content.active{transform:translate(-50%,-50%) scale(1);opacity:1}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-title{font-size:1.5rem;color:#667eea}.modal-close{background:transparent;color:#999;font-size:1.5rem;padding:0;cursor:pointer}.modal-close:hover{color:#333}.modal-body{margin-bottom:1.5rem}.modal-footer{display:flex;gap:.5rem;justify-content:flex-end}.toast-container{position:fixed;top:2rem;right:2rem;z-index:2000;display:flex;flex-direction:column;gap:.5rem}.toast{background:#fff;border-radius:8px;padding:1rem 1.5rem;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;gap:.75rem;min-width:300px;transform:translate(400px);opacity:0;transition:all .3s}.toast.show{transform:translate(0);opacity:1}.toast-icon{font-size:1.5rem}.toast-message{flex:1;font-weight:500}.toast-success{border-left:4px solid #28a745}.toast-error{border-left:4px solid #dc3545}.toast-warning{border-left:4px solid #ffc107}.toast-info{border-left:4px solid #17a2b8}.form-group{margin-bottom:1.5rem}.form-label{display:block;margin-bottom:.5rem;font-weight:500;color:#333}.form-input{width:100%;padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .2s}.form-input:focus{outline:none;border-color:#667eea}.form-input.error{border-color:#dc3545}.error-message{display:none;color:#dc3545;font-size:.875rem;margin-top:.25rem}.demo-card{background:var(--card-bg);border-radius:12px;padding:2rem;box-shadow:0 10px 30px #0000001a;margin-bottom:2rem;transition:background .3s}.demo-card h2{color:var(--button-bg);margin-bottom:1rem;transition:color .3s}.demo-card p{color:var(--text-secondary);margin-bottom:1.5rem;transition:color .3s}footer{text-align:center;color:#fff;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.2)}footer a{color:#fff;text-decoration:underline}footer a:hover{opacity:.8}