/* ================= 全局基础与背景质感 ================= */
body { background-color: #030612; color: #ffffff; font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; position: relative; scroll-behavior: smooth; }
.fluid-bg { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: radial-gradient(circle at 50% 50%, #0d122b 0%, #02040a 100%); }
.fluid-bg::before, .fluid-bg::after, .fluid-bg-third { content: ''; position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.35; animation: drift 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1); }
.fluid-bg::before { width: 60vw; height: 60vh; background: #3b82f6; top: -10%; left: -10%; }
.fluid-bg::after { width: 60vw; height: 60vh; background: #8b5cf6; bottom: -10%; right: -10%; animation-delay: -10s; animation-direction: alternate-reverse; }
.fluid-bg-third { width: 40vw; height: 40vh; background: #10b981; top: 30%; left: 30%; opacity: 0.2; animation-delay: -5s; animation-duration: 25s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 100% { transform: translate(25%, 25%) scale(1.4) rotate(20deg); } }
.noise-overlay { position: fixed; inset: 0; z-index: 50; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: overlay; }
#neural-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; }
#hero-bg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; overflow: hidden; pointer-events: none; }
.fade-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 20vh; background: linear-gradient(to bottom, transparent, #030612); z-index: 1; pointer-events: none; }
.text-3d-glow { filter: drop-shadow(0 4px 0px rgba(139,92,246,0.8)) drop-shadow(0 15px 25px rgba(16,185,129,0.5)); }

@keyframes spring-up { 0% { transform: translateY(60px) scale(0.8) rotateX(15deg); opacity: 0; filter: blur(15px); } 60% { transform: translateY(-5px) scale(1.02) rotateX(-2deg); opacity: 1; filter: blur(0); } 100% { transform: translateY(0) scale(1) rotateX(0); opacity: 1; filter: blur(0); } }
.anim-spring-1 { animation: spring-up 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; }
.anim-spring-2 { animation: spring-up 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s forwards; opacity: 0; }
.anim-spring-3 { animation: spring-up 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s forwards; opacity: 0; }
.anim-spring-4 { animation: spring-up 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.45s forwards; opacity: 0; }
.text-gradient { background: linear-gradient(to right, #a855f7, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.glow-text-strong { background: linear-gradient(to right, #a855f7, #3b82f6, #10b981, #a855f7); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: textGradient 3s linear infinite; filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.8)) drop-shadow(0 0 50px rgba(59, 130, 246, 0.6)); }
@keyframes textGradient { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes sweepLight { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
.text-sweep { background: linear-gradient(90deg, #ffffff 0%, #ffffff 30%, #8b5cf6 50%, #10b981 70%, #ffffff 100%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: sweepLight 4s linear infinite; }
.scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.marquee-container { overflow: hidden; white-space: nowrap; position: relative; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.marquee-content { display: flex; width: max-content; animation: marquee 22s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.chat-msg { opacity: 0; transform: translateY(10px); animation: fadeInUp 0.5s ease forwards; }
.typing-indicator { display: inline-flex; align-items: center; gap: 4px; animation: fadeOut 0.1s forwards; animation-delay: 2.4s; }
.typing-indicator span { width: 6px; height: 6px; background-color: #8b5cf6; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; } .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { to { opacity: 0; position: absolute; visibility: hidden; } } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
.glass-panel { background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8); }
.svg-donut:hover .svg-segment:not(.active) { opacity: 0.25; }
.svg-segment { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s, opacity 0.3s; transform-origin: 120px 120px; cursor: pointer; }
.svg-segment.active { transform: scale(1.06); filter: drop-shadow(0 0 15px currentColor); z-index: 10; opacity: 1 !important; }
.source-list-item { transition: all 0.3s ease; border-left: 3px solid transparent; }
.source-list-item.active { background: rgba(255, 255, 255, 0.08); border-left-color: var(--item-color); padding-left: 0.5rem; border-radius: 0 6px 6px 0; }
.scroll-reveal { opacity: 0; transform: translateY(50px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .scroll-reveal.active { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 100ms; } .delay-200 { transition-delay: 200ms; } .delay-300 { transition-delay: 300ms; } .delay-400 { transition-delay: 400ms; } .delay-500 { transition-delay: 500ms; }
@keyframes slideFlow { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }
.animate-slide-flow { animation: slideFlow 3s linear infinite; }
#bento-grid:hover .bento-card::after { opacity: 1; }
.bento-card { background: rgba(255, 255, 255, 0.02); border-radius: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s; }
.bento-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); z-index: 10; }
.bento-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(139, 92, 246, 0.12), transparent 40%); opacity: 0; transition: opacity 0.5s; z-index: 0; pointer-events: none; }
.bento-card:hover::before { opacity: 1; }
.bento-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), rgba(16, 185, 129, 0.6), transparent 40%); z-index: -1; padding: 1.5px; border-radius: inherit; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
@keyframes corePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(139, 92, 246, 0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(139, 92, 246, 0.8), inset 0 0 20px rgba(16, 185, 129, 0.5); } }
.algo-core { animation: corePulse 3s ease-in-out infinite; }
@keyframes marqueeLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marqueeRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.marquee-track-left { display: flex; width: max-content; animation: marqueeLeft 15s linear infinite; }
.marquee-track-right { display: flex; width: max-content; animation: marqueeRight 20s linear infinite; }
.brand-logo-item { padding: 0 3rem; display: flex; align-items: center; justify-content: center; } .brand-logo-item img { height: 50px; width: auto; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5)); }
#dashboard-glow { transition: background 1s ease, box-shadow 1s ease; } .color-transition { transition: color 1s ease, text-shadow 1s ease; border-color: 1s ease; }
.chart-group { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; } .glow-stroke { filter: drop-shadow(0 0 8px currentColor); } .glow-fill { filter: drop-shadow(0 0 10px currentColor); }
.hud-grid-bg { background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 25% 100%; }
.bar-row { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: default !important; } .bar-row img { opacity: 1 !important; }
.energy-bar { height: 100%; border-radius: 0 8px 8px 0; width: 0%; transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1); position: relative; }
.energy-node { position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0; transition: opacity 0.5s ease 1s; }
.bar-row.active .energy-bar { width: var(--target-width); } .bar-row.active .energy-node { opacity: 1; }
.matrix-grid-bg { background-image: linear-gradient(to top, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 100% 20%; }
.platform-slot { position: relative; }
.v-bar-container { width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 300px; padding-bottom: 2px; position: relative; }
.v-bar-container::after { content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; height: 2px; background: rgba(255,255,255,0.1); box-shadow: 0 0 10px rgba(255,255,255,0.2); transition: all 0.4s; }
.matrix-chart.is-optimized .v-bar-container::after { background: #8b5cf6; box-shadow: 0 0 15px rgba(139,92,246,0.8); }
.v-bar { width: 24px; border-radius: 4px 4px 0 0; height: var(--h-before); transition: height 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.8s, box-shadow 0.8s, filter 0.8s; position: relative; }
.v-bar.npc-1 { background: rgba(156, 163, 175, 0.3); border: 1px solid rgba(156, 163, 175, 0.2); } .v-bar.npc-2 { background: rgba(75, 85, 99, 0.4); border: 1px solid rgba(75, 85, 99, 0.2); }
.matrix-chart.is-optimized .v-bar.npc-1, .matrix-chart.is-optimized .v-bar.npc-2 { opacity: 0.5; filter: grayscale(100%); }
.v-bar.protagonist { background: rgba(139, 92, 246, 0.2); border: 1px solid rgba(139, 92, 246, 0.3); z-index: 10; }
.matrix-chart.is-optimized .v-bar.protagonist { height: var(--h-after); background: linear-gradient(to top, #3b82f6, #a855f7, #10b981); border: none; box-shadow: 0 0 25px rgba(139, 92, 246, 0.6), inset 0 0 10px rgba(255,255,255,0.5); }
.growth-badge { position: absolute; top: -35px; left: 50%; transform: translateX(-50%) translateY(10px); background: rgba(16, 185, 129, 0.2); border: 1px solid rgba(16, 185, 129, 0.5); color: #10b981; font-size: 12px; font-weight: 900; padding: 2px 6px; border-radius: 6px; opacity: 0; pointer-events: none; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; text-shadow: 0 0 10px rgba(16,185,129,0.8); box-shadow: 0 0 15px rgba(16,185,129,0.3); }
.matrix-chart.is-optimized .growth-badge { opacity: 1; transform: translateX(-50%) translateY(0); }
.toggle-switch { display: inline-flex; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; padding: 4px; position: relative; }
.toggle-btn { padding: 8px 24px; border-radius: 24px; font-size: 14px; font-weight: bold; color: #9ca3af; cursor: pointer; transition: all 0.4s; z-index: 2; position: relative; }
.toggle-btn.active { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
.toggle-slider { position: absolute; top: 4px; left: 4px; bottom: 4px; width: calc(50% - 4px); background: rgba(255,255,255,0.1); border-radius: 24px; z-index: 1; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: inset 0 0 10px rgba(255,255,255,0.05); }
.matrix-chart.is-optimized .toggle-slider, #platform-chart-container.is-optimized .toggle-slider { transform: translateX(100%); background: linear-gradient(90deg, #8b5cf6, #3b82f6); box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); }
.process-container { position: relative; margin-top: 3rem; }
.process-card { background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(10px); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 20px; padding: 24px 16px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; z-index: 2; display: flex; flex-direction: column; flex: 1; }
.process-card:hover { transform: translateY(-8px); border-color: #8b5cf6; box-shadow: 0 20px 40px -10px rgba(139, 92, 246, 0.3); background: rgba(139, 92, 246, 0.08); }
.process-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #8b5cf6, #10b981); opacity: 0; transition: opacity 0.3s ease; }
.process-card:hover::before { opacity: 1; }
.process-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 12px; color: #ffffff; letter-spacing: 0.05em; }
.process-desc { color: #9ca3af; font-size: 0.85rem; line-height: 1.6; }
.process-icon { margin-bottom: 20px; color: #8b5cf6; filter: drop-shadow(0 0 8px rgba(139,92,246,0.6)); transition: all 0.4s; }
.process-card:hover .process-icon { transform: scale(1.15) rotate(-5deg); color: #10b981; filter: drop-shadow(0 0 12px rgba(16,185,129,0.8)); }
.process-arrow { color: #8b5cf6; } .arrow-x { animation: arrowFlowX 2s ease-in-out infinite; } .arrow-y { animation: arrowFlowY 2s ease-in-out infinite; }
@keyframes arrowFlowX { 0% { transform: translateX(-5px); opacity: 0.2; filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.3)); } 50% { transform: translateX(5px); opacity: 1; color: #10b981; filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.8)); } 100% { transform: translateX(-5px); opacity: 0.2; filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.3)); } }
@keyframes arrowFlowY { 0% { transform: translateY(-5px); opacity: 0.2; filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.3)); } 50% { transform: translateY(5px); opacity: 1; color: #10b981; filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.8)); } 100% { transform: translateY(-5px); opacity: 0.2; filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.3)); } }
.delay-a1 { animation-delay: 0s; } .delay-a2 { animation-delay: 0.4s; } .delay-a3 { animation-delay: 0.8s; } .delay-a4 { animation-delay: 1.2s; }
.modal-overlay, .detail-modal-overlay, .consult-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3, 6, 18, 0.95); backdrop-filter: blur(20px); z-index: 1000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
.modal-overlay.active, .detail-modal-overlay.active, .consult-modal-overlay.active { display: flex; opacity: 1; }
.modal-container, .detail-modal-container, .consult-modal-container { background: rgba(10, 15, 30, 0.9); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 32px; padding: 40px; position: relative; overflow-y: auto; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(139, 92, 246, 0.3); transform: scale(0.9); transition: transform 0.3s ease; }
.modal-overlay.active .modal-container, .detail-modal-overlay.active .detail-modal-container, .consult-modal-overlay.active .consult-modal-container { transform: scale(1); }
.modal-close, .detail-close, .consult-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: white; font-size: 20px; z-index: 10; }
.modal-close:hover, .detail-close:hover, .consult-close:hover { background: rgba(139, 92, 246, 0.3); transform: rotate(90deg); border-color: #8b5cf6; }
.detail-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 20px; background: linear-gradient(135deg, #fff, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.3; padding-right: 40px; }
.detail-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; color: #8b5cf6; font-size: 1rem; padding-bottom: 20px; border-bottom: 1px solid rgba(139, 92, 246, 0.2); }
.detail-content { color: #e2e8f0; font-size: 1.1rem; line-height: 1.8; margin-bottom: 30px; }
.consult-modal-overlay .consult-modal-container { width: min(94vw, 760px) !important; max-width: 760px !important; min-width: 320px; background: rgba(15, 20, 35, 0.95); padding: 44px 44px; }
.consult-title { font-size: 2rem; font-weight: 800; margin-bottom: 6px; background: linear-gradient(135deg, #fff, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.consult-sub { font-size: 0.9rem; color: #9ca3af; margin-bottom: 25px; }
.consult-input-group { margin-bottom: 18px; }
.consult-label { display: block; font-size: 0.75rem; font-weight: 600; color: #cbd5e1; margin-bottom: 6px; }
.consult-field { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(139,92,246,0.3); border-radius: 40px; padding: 14px 20px; color: white; font-size: 0.95rem; outline: none; transition: all 0.2s; }
.consult-field:focus { border-color: #8b5cf6; box-shadow: 0 0 20px rgba(139,92,246,0.4); background: rgba(139,92,246,0.1); }
.consult-submit { width: 100%; background: linear-gradient(135deg, #8b5cf6, #3b82f6); border: none; border-radius: 40px; padding: 16px 20px; color: white; font-weight: 700; font-size: 1.1rem; margin-top: 20px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.consult-submit:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(139,92,246,0.7); }
.consult-note { text-align: center; font-size: 0.7rem; color: #6b7280; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; }
@media (max-width: 768px) {
    .consult-modal-overlay .consult-modal-container { width: calc(100vw - 24px) !important; max-width: none !important; padding: 30px 20px; border-radius: 24px; }
    .consult-title { font-size: 1.65rem; }
}
@keyframes dataDrop { 0% { top: 0%; opacity: 0; transform: translateX(-50%) scaleY(0.5); } 20% { opacity: 1; transform: translateX(-50%) scaleY(1); } 80% { opacity: 1; transform: translateX(-50%) scaleY(1); } 100% { top: 100%; opacity: 0; transform: translateX(-50%) scaleY(0.5); } }
.animate-data-drop { animation: dataDrop 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.funnel-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .funnel-card:hover { transform: translateY(-5px) scale(1.02); }
.insight-panel { position: relative; width: 100%; height: 100%; min-height: 320px; }
.insight-content { position: absolute; top: 0; left: 0; width: 100%; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.insight-before { opacity: 1; transform: translateX(0); z-index: 2; pointer-events: auto; }
.insight-after { opacity: 0; transform: translateX(30px); z-index: 1; pointer-events: none; }
.is-optimized .insight-before { opacity: 0; transform: translateX(-30px); z-index: 1; pointer-events: none; }
.is-optimized .insight-after { opacity: 1; transform: translateX(0); z-index: 2; pointer-events: auto; }
#dashboard-slider-track { user-select: none; -webkit-user-select: none; }
@keyframes buttonPulse { 0%, 100% { box-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } 50% { box-shadow: 0 0 60px rgba(139, 92, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.6); } }
#openWechatBtn { animation: buttonPulse 3s ease-in-out infinite; }
.fixed.right-4.md\:right-6.top-1\/2 .group .absolute.right-full { transition: opacity 0.3s ease, transform 0.3s ease, pointer-events 0s; }
.fixed.right-4.md\:right-6.top-1\/2 .group .absolute.right-full.opacity-0 { transition: opacity 0.3s ease, transform 0.3s ease, pointer-events 0s 0.3s; }

/* ================= 分页样式 ================= */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn:hover:not(.disabled) {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.5);
    color: white;
    transform: translateY(-2px);
}

.page-btn.active {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.page-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-btn.disabled:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

.page-ellipsis {
    color: #6b7280;
    font-size: 0.9rem;
    padding: 0 4px;
}

.page-info {
    color: #9ca3af;
    font-size: 0.85rem;
    margin-left: 16px;
}

@media (max-width: 640px) {
    .pagination {
        gap: 8px;
        flex-wrap: wrap;
    }
    .page-btn {
        min-width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
    .page-info {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-top: 12px;
    }
}