:root{--primary-color: #2563eb;--primary-hover: #1d4ed8;--success-color: #10b981;--danger-color: #ef4444;--warning-color: #f59e0b;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827}[data-theme=dark]{--bg-primary: var(--gray-900);--bg-secondary: var(--gray-800);--text-primary: var(--gray-100);--text-secondary: var(--gray-300);--border-color: var(--gray-700)}[data-theme=light]{--bg-primary: white;--bg-secondary: var(--gray-50);--text-primary: var(--gray-900);--text-secondary: var(--gray-600);--border-color: var(--gray-200)}*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0;padding:0;line-height:1.5;background:var(--bg-primary, white);color:var(--text-primary, var(--gray-900));transition:background-color .3s,color .3s}#app{max-width:1200px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:2rem;padding:2rem 0;border-bottom:2px solid var(--border-color, var(--gray-200))}.header h1{margin:0;font-size:2.5rem;color:var(--primary-color)}.subtitle{margin:.5rem 0 0;color:var(--text-secondary, var(--gray-600));font-size:1.1rem}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--bg-secondary, var(--gray-50));border:1px solid var(--border-color, var(--gray-200));border-radius:8px;margin-bottom:2rem}.connection-status{display:flex;align-items:center;gap:.5rem}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--danger-color);transition:background-color .3s}.status-dot.connected{background:var(--success-color)}.vibe-info code{background:var(--bg-primary, white);padding:.25rem .5rem;border-radius:4px;border:1px solid var(--border-color, var(--gray-200));font-family:Monaco,Menlo,monospace;font-size:.9rem}.main>section{background:var(--bg-secondary, var(--gray-50));border:1px solid var(--border-color, var(--gray-200));border-radius:12px;padding:2rem;margin-bottom:2rem}.main h2{margin:0 0 1.5rem;color:var(--text-primary, var(--gray-900));font-size:1.5rem}.main h3{margin:1.5rem 0 1rem;color:var(--text-secondary, var(--gray-600))}.preference-controls{display:flex;gap:1rem;align-items:end;flex-wrap:wrap;margin-bottom:2rem}.preference-controls label{display:flex;flex-direction:column;gap:.5rem;color:var(--text-secondary, var(--gray-600))}.task-form{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;align-items:end}.task-filters{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;align-items:center}.filter-btn{padding:.5rem 1rem;border:1px solid var(--border-color, var(--gray-200));background:var(--bg-primary, white);color:var(--text-primary, var(--gray-900));border-radius:6px;cursor:pointer;transition:all .3s}.filter-btn:hover{background:var(--gray-100)}.filter-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.task-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.task-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-primary, white);border:1px solid var(--border-color, var(--gray-200));border-radius:8px;transition:all .3s}.task-item:hover{border-color:var(--primary-color);box-shadow:0 2px 8px #2563eb1a}.task-item.completed{opacity:.6}.task-item.completed .task-title{text-decoration:line-through}.task-checkbox{width:20px;height:20px;cursor:pointer}.task-title{flex:1;font-weight:500;color:var(--text-primary, var(--gray-900))}.task-meta{display:flex;gap:.5rem;align-items:center}.task-category{padding:.25rem .5rem;border-radius:4px;font-size:.8rem;font-weight:500}.task-category.personal{background:#dbeafe;color:#1e40af}.task-category.work{background:#f3e8ff;color:#7c3aed}.task-category.shopping{background:#d1fae5;color:#059669}.task-category.health{background:#fef3c7;color:#d97706}.task-priority{padding:.25rem .5rem;border-radius:4px;font-size:.8rem;font-weight:500}.task-priority.low{background:#f3f4f6;color:#6b7280}.task-priority.medium{background:#fef3c7;color:#d97706}.task-priority.high{background:#fecaca;color:#dc2626}.task-actions{display:flex;gap:.5rem}.kv-demo,.db-demo{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border-color, var(--gray-200))}.db-controls{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.result-box{background:var(--bg-primary, white);border:1px solid var(--border-color, var(--gray-200));border-radius:6px;padding:1rem;font-family:Monaco,Menlo,monospace;font-size:.9rem;white-space:pre-wrap;max-height:300px;overflow-y:auto;color:var(--text-primary, var(--gray-900))}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.stat-card{background:var(--bg-primary, white);border:1px solid var(--border-color, var(--gray-200));border-radius:8px;padding:1.5rem;text-align:center}.stat-value{font-size:2rem;font-weight:700;color:var(--primary-color);margin-bottom:.5rem}.stat-label{color:var(--text-secondary, var(--gray-600));font-size:.9rem}input,select,textarea{padding:.75rem;border:1px solid var(--border-color, var(--gray-200));border-radius:6px;font-size:1rem;background:var(--bg-primary, white);color:var(--text-primary, var(--gray-900));transition:border-color .3s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}textarea{resize:vertical;min-height:80px;font-family:Monaco,Menlo,monospace;font-size:.9rem}.btn{padding:.75rem 1.5rem;border:1px solid var(--border-color, var(--gray-200));border-radius:6px;background:var(--bg-primary, white);color:var(--text-primary, var(--gray-900));cursor:pointer;font-size:1rem;transition:all .3s;display:inline-flex;align-items:center;gap:.5rem}.btn:hover{background:var(--gray-100);transform:translateY(-1px)}.btn-primary{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.btn-danger{background:var(--danger-color);color:#fff;border-color:var(--danger-color)}.btn-danger:hover{background:#dc2626;border-color:#dc2626}.btn-small{padding:.5rem 1rem;font-size:.9rem}.hidden{display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.task-item{animation:fadeIn .3s ease-out}@media (max-width: 768px){#app{padding:10px}.header h1{font-size:2rem}.preference-controls,.task-form,.task-filters{flex-direction:column;align-items:stretch}.status-bar{flex-direction:column;gap:1rem;text-align:center}.task-item{flex-direction:column;align-items:stretch;gap:.5rem}.task-meta{justify-content:space-between}}.container{max-width:800px;margin:0 auto;padding:2rem}.task-input-section{background:var(--bg-secondary);padding:1.5rem;border-radius:12px;margin-bottom:2rem}.task-input-section h2{margin-top:0;margin-bottom:1rem;font-size:1.2rem;color:var(--text-secondary)}.task-input{width:100%;font-size:1.1rem;padding:.875rem;margin-bottom:.75rem}.task-description-input{width:100%;padding:.75rem;margin-bottom:1rem;font-family:inherit;resize:vertical}.task-form-controls{display:flex;gap:1rem;align-items:center}.priority-select{flex:1}.btn-refresh{background:transparent;border:1px solid var(--border-color);padding:.5rem 1rem}.task-content{flex:1;min-width:0}.task-title{font-size:1rem;font-weight:500}.task-description{font-size:.875rem;color:var(--text-secondary);margin-top:.25rem;line-height:1.5}.task-actions{display:flex;align-items:center;gap:.75rem}.task-priority{padding:.25rem .75rem;border-radius:100px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.task-priority.low{background:#e0f2fe;color:#0369a1}.task-priority.medium{background:#fef3c7;color:#92400e}.task-priority.high{background:#fee2e2;color:#991b1b}.btn-icon{background:transparent;border:none;cursor:pointer;font-size:1.2rem;padding:.25rem;opacity:.7;transition:opacity .2s}.btn-icon:hover{opacity:1}.btn-delete{color:var(--red-500, #ef4444)}.empty-state{text-align:center;color:var(--text-secondary);padding:3rem;font-size:1.1rem}.notification{position:fixed;bottom:2rem;right:2rem;padding:1rem 1.5rem;border-radius:8px;background:#fff;box-shadow:0 4px 12px #00000026;transform:translateY(100px);opacity:0;transition:all .3s ease;z-index:1000}.notification.show{transform:translateY(0);opacity:1}.notification-success{background:#10b981;color:#fff}.notification-error{background:#ef4444;color:#fff}.task-item.priority-high{border-left:3px solid #ef4444}.task-item.priority-medium{border-left:3px solid #f59e0b}.task-item.priority-low{border-left:3px solid #3b82f6}