:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: #1a1a2e;--bg-card-hover: #22223a;--bg-overlay: rgba(10, 10, 15, .85);--text-primary: #f0f0f5;--text-secondary: #9d9db5;--text-muted: #5a5a7a;--accent-primary: #7c5cfc;--accent-secondary: #5b8def;--accent-gradient: linear-gradient(135deg, #7c5cfc 0%, #5b8def 100%);--accent-gradient-hover: linear-gradient(135deg, #8d6ffd 0%, #6c9cf5 100%);--success: #34d399;--danger: #f87171;--warning: #fbbf24;--border-color: rgba(124, 92, 252, .15);--border-color-active: rgba(124, 92, 252, .4);--app-max-width: 430px;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 22px;--radius-xl: 28px;--radius-full: 999px;--shadow-card: 0 8px 32px rgba(0, 0, 0, .3);--shadow-glow: 0 0 40px rgba(124, 92, 252, .15);--shadow-button: 0 4px 20px rgba(124, 92, 252, .3);--font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s cubic-bezier(.22, 1, .36, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%}.app-container{max-width:var(--app-max-width);margin:0 auto;height:100%;position:relative;overflow:hidden;background:var(--bg-primary)}.page{height:100%;display:flex;flex-direction:column;padding:24px 20px;overflow-y:auto;animation:pageIn .4s var(--transition-slow)}@keyframes pageIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.page-center{justify-content:center;align-items:center}.heading-xl{font-size:28px;font-weight:800;letter-spacing:-.5px;line-height:1.2}.heading-lg{font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.3}.heading-md{font-size:18px;font-weight:600;line-height:1.4}.text-body{font-size:15px;font-weight:400;line-height:1.6;color:var(--text-secondary)}.text-small{font-size:13px;font-weight:500;color:var(--text-muted)}.gradient-text{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border:none;border-radius:var(--radius-full);font-family:var(--font-family);font-size:15px;font-weight:600;cursor:pointer;transition:all var(--transition-normal);outline:none;position:relative;overflow:hidden}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:var(--shadow-button)}.btn-primary:hover{background:var(--accent-gradient-hover);transform:translateY(-2px);box-shadow:0 6px 28px #7c5cfc66}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{border-color:var(--border-color-active);background:var(--bg-card-hover)}.btn-icon{width:56px;height:56px;padding:0;border-radius:50%;font-size:24px}.btn-danger{background:#f8717126;color:var(--danger);border:1px solid rgba(248,113,113,.2)}.btn-success{background:#34d39926;color:var(--success);border:1px solid rgba(52,211,153,.2)}.btn-full{width:100%}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.input-group{display:flex;flex-direction:column;gap:8px;width:100%}.input-label{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.input-field{width:100%;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-family);font-size:16px;outline:none;transition:border-color var(--transition-fast)}.input-field:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #7c5cfc1a}.input-field::placeholder{color:var(--text-muted)}.chips-container{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:8px 16px;border-radius:var(--radius-full);background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.chip:hover{border-color:var(--border-color-active);color:var(--text-primary)}.chip.active{background:var(--accent-gradient);border-color:transparent;color:#fff;box-shadow:var(--shadow-button)}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-card)}.progress-bar-container{width:100%;height:4px;background:var(--bg-card);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;background:var(--accent-gradient);border-radius:var(--radius-full);transition:width .5s cubic-bezier(.22,1,.36,1)}.toggle-group{display:flex;background:var(--bg-card);border-radius:var(--radius-full);padding:4px;border:1px solid var(--border-color)}.toggle-option{flex:1;padding:10px 20px;text-align:center;border-radius:var(--radius-full);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-normal);color:var(--text-muted);border:none;background:transparent;font-family:var(--font-family)}.toggle-option.active{background:var(--accent-gradient);color:#fff;box-shadow:var(--shadow-button)}.counter{display:flex;align-items:center;gap:20px}.counter-btn{width:44px;height:44px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);font-size:20px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;font-family:var(--font-family)}.counter-btn:hover{border-color:var(--accent-primary);background:var(--bg-card-hover)}.counter-value{font-size:28px;font-weight:700;min-width:40px;text-align:center}.slider-container{width:100%}.slider-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-full);background:var(--bg-card);outline:none;margin:12px 0}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--accent-gradient);cursor:pointer;box-shadow:var(--shadow-button);border:3px solid var(--bg-primary)}.slider-value{font-size:32px;font-weight:800;text-align:center}.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mood-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-color);cursor:pointer;transition:all var(--transition-normal);font-family:var(--font-family);color:var(--text-secondary)}.mood-card:hover{border-color:var(--border-color-active);transform:translateY(-2px)}.mood-card.active{background:var(--accent-gradient);border-color:transparent;color:#fff;box-shadow:var(--shadow-button);transform:translateY(-2px)}.mood-emoji{font-size:28px}.mood-label{font-size:12px;font-weight:600;text-align:center}.swipe-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:0 8px}.swipe-card{width:100%;max-width:380px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:32px 24px;box-shadow:var(--shadow-card);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;transition:box-shadow var(--transition-normal)}.swipe-card:active{cursor:grabbing}.swipe-card-category{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);background:#7c5cfc1f;color:var(--accent-primary);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px}.swipe-card-title{font-size:24px;font-weight:800;margin-bottom:12px;line-height:1.2}.swipe-card-desc{font-size:15px;color:var(--text-secondary);line-height:1.6;margin-bottom:24px}.swipe-card-meta{display:flex;gap:12px;flex-wrap:wrap}.swipe-card-tag{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--radius-full);background:var(--bg-secondary);font-size:12px;font-weight:500;color:var(--text-secondary)}.swipe-indicator{position:absolute;top:24px;padding:8px 20px;border-radius:var(--radius-md);font-size:18px;font-weight:800;opacity:0;transition:opacity var(--transition-fast);pointer-events:none;z-index:10}.swipe-indicator-like{right:24px;color:var(--success);border:3px solid var(--success);transform:rotate(15deg)}.swipe-indicator-nope{left:24px;color:var(--danger);border:3px solid var(--danger);transform:rotate(-15deg)}.swipe-actions{display:flex;justify-content:center;gap:24px;padding:16px 0 24px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-overlay);z-index:100;display:flex;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{width:100%;max-width:var(--app-max-width);height:100%;background:var(--bg-primary);overflow-y:auto;animation:slideUp .4s cubic-bezier(.22,1,.36,1)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;position:sticky;top:0;background:var(--bg-primary);z-index:5}.modal-close{width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);font-family:var(--font-family)}.modal-close:hover{background:var(--bg-card-hover);border-color:var(--border-color-active)}.modal-body{padding:20px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px;text-align:center}.stat-value{font-size:28px;font-weight:800}.stat-label{font-size:12px;color:var(--text-muted);font-weight:500;margin-top:4px}.chart-container{margin-bottom:24px}.chart-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}.chart-bar-label{font-size:12px;font-weight:500;color:var(--text-secondary);min-width:80px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-bar-track{flex:1;height:24px;background:var(--bg-card);border-radius:var(--radius-full);overflow:hidden}.chart-bar-fill{height:100%;border-radius:var(--radius-full);transition:width .8s cubic-bezier(.22,1,.36,1);min-width:4px}.chart-bar-fill.liked{background:var(--accent-gradient)}.chart-bar-fill.disliked{background:linear-gradient(135deg,#f87171,#ef4444)}.chart-bar-count{font-size:13px;font-weight:600;min-width:24px;color:var(--text-muted)}.results-list{display:flex;flex-direction:column;gap:10px}.result-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-fast)}.result-item:hover{border-color:var(--border-color-active)}.result-number{width:28px;height:28px;border-radius:50%;background:var(--accent-gradient);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.result-info{flex:1;min-width:0}.result-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-category{font-size:12px;color:var(--text-muted)}.result-time{font-size:13px;color:var(--text-secondary);white-space:nowrap}.header-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 0 16px;flex-shrink:0}.header-logo{font-size:20px;font-weight:800}.header-action{width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);position:relative;font-family:var(--font-family)}.header-action:hover{border-color:var(--accent-primary);background:var(--bg-card-hover)}.header-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--accent-gradient);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}.section{margin-bottom:24px}.section-title{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.bg-decoration{position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(80px);opacity:.12;pointer-events:none;z-index:0}.bg-decoration-1{background:var(--accent-primary);top:-100px;right:-100px}.bg-decoration-2{background:var(--accent-secondary);bottom:-100px;left:-100px}.empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 20px;text-align:center}.empty-emoji{font-size:48px}.spinner{width:32px;height:32px;border:3px solid var(--bg-card);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-card-hover);border-radius:var(--radius-full)}