.product-recommendation{padding:24px;background:#f5f5f5;min-height:calc(100vh - 64px)}.recommendation-header,.category-filter{background:#fff;padding:16px 24px;border-radius:8px;margin-bottom:16px;box-shadow:0 2px 8px #0000001a}.cards-container{background:transparent}.product-card{border-radius:12px;overflow:hidden;transition:all .3s ease;height:100%;display:flex;flex-direction:column}.product-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.card-image-wrapper{position:relative;width:100%;padding-top:100%;overflow:hidden;background:#f0f0f0}.card-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.product-card:hover .card-image{transform:scale(1.05)}.card-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.product-card:hover .card-overlay{opacity:1}.ant-card-meta-title{font-size:14px;font-weight:500;margin-bottom:8px}.ant-card-meta-description{margin-top:8px}@media (max-width: 768px){.recommendation-header{flex-direction:column;gap:16px}.recommendation-header .ant-space{width:100%;flex-direction:column}.recommendation-header .ant-input-search{width:100%!important}}.product-detail{max-width:1200px;margin:0 auto;padding:24px}.product-detail .ant-card{margin-bottom:24px}.product-detail .ant-image{border-radius:8px;overflow:hidden}.product-detail .ant-descriptions-item-label{font-weight:600;width:150px}.app-container{max-width:1280px;margin:0 auto;padding:var(--spacing-xl)}.page-title{font-size:32px;font-weight:700;margin-bottom:var(--spacing-lg);color:var(--text-primary);letter-spacing:-.02em}.page-subtitle{font-size:18px;font-weight:400;color:var(--text-secondary);margin-bottom:var(--spacing-xl)}.card-section{margin-bottom:var(--spacing-lg)}.gradient-bg{background:linear-gradient(135deg,#667eea,#764ba2)}.gradient-bg-primary{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%)}.gradient-bg-light{background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.glass-effect{background:#fffc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}.modern-card{background:var(--bg-primary);border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-md);border:1px solid var(--gray-200);transition:all .3s cubic-bezier(.4,0,.2,1)}.modern-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}.modern-button{border-radius:var(--radius-md);font-weight:600;padding:12px 24px;height:auto;transition:all .2s ease;box-shadow:var(--shadow-sm)}.modern-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.modern-button-primary{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.modern-button-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--spacing-lg)}.modern-header-menu .ant-menu-item{border-radius:8px;margin:0 4px;transition:all .2s ease}.modern-header-menu .ant-menu-item:hover,.modern-header-menu .ant-menu-item-selected{background:#6366f11a;color:#6366f1}.modern-header-menu .ant-menu-item-selected:after{display:none}@media (max-width: 768px){.container{padding:0 var(--spacing-md)}.app-container{padding:var(--spacing-md)}.page-title{font-size:24px}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #6366f1;--primary-hover: #4f46e5;--secondary-color: #8b5cf6;--accent-color: #ec4899;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--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;--bg-primary: #ffffff;--bg-secondary: #f9fafb;--bg-tertiary: #f3f4f6;--text-primary: #111827;--text-secondary: #6b7280;--text-tertiary: #9ca3af;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6}code{font-family:Fira Code,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}a{color:var(--primary-color);text-decoration:none;transition:color .2s ease}a:hover{color:var(--primary-hover)}.ant-btn{border-radius:var(--radius-md);font-weight:500;transition:all .2s ease}.ant-btn-primary{background:var(--primary-color);border-color:var(--primary-color)}.ant-btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.ant-card{border-radius:var(--radius-lg);border:1px solid var(--gray-200);box-shadow:var(--shadow-sm);transition:all .3s ease}.ant-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.ant-input,.ant-input-password{border-radius:var(--radius-md);border-color:var(--gray-300)}.ant-input:focus,.ant-input-password:focus,.ant-input-focused,.ant-input-password-focused{border-color:var(--primary-color);box-shadow:0 0 0 2px #6366f11a}