:root {
     --primary: #4361ee;
     --primary-dark: #3651ce;
     --secondary: #e57373;
     --accent: #06d6a0;
     --dark: #1e1e2e;
     --light: #ffffff;
     --gray: #64748b;
     --light-gray: #f1f5f9;
     --gradient-primary: linear-gradient(135deg, #4361ee, #3651ce);
     --gradient-secondary: linear-gradient(135deg, #e57373, #ff6b9d);
     --gradient-accent: linear-gradient(135deg, #06d6a0, #00b894);
     --shadow: 0 4px 20px rgba(0, 0, 0, .08);
     --shadow-hover: 0 8px 30px rgba(0, 0, 0, .15);
     --transition: all .3s ease;
     --background-overlay: rgba(255, 255, 255, .95);
     --card-bg: rgba(255, 255, 255, .98);
     --text-primary: #1e293b;
     --text-secondary: #475569;
     --footer-bg: #1e293b;
     --footer-text: rgba(255, 255, 255, .9)
}

.dark-theme {
     --primary: #5a75ff;
     --primary-dark: #4c6bff;
     --secondary: #ff8e8e;
     --accent: #06d6a0;
     --dark: #f8f9fa;
     --light: #1e2130;
     --gray: #a0a4b8;
     --light-gray: #2b2d42;
     --gradient-primary: linear-gradient(135deg, #5a75ff, #4c1dc6);
     --gradient-secondary: linear-gradient(135deg, #ff8e8e, #ffb18e);
     --gradient-accent: linear-gradient(135deg, #06d6a0, #1199c2);
     --background-overlay: rgba(18, 20, 33, .9);
     --card-bg: rgba(30, 33, 48, .9);
     --text-primary: #f8f9fa;
     --text-secondary: #d0d0e0;
     --footer-bg: #121826;
     --footer-text: rgba(255, 255, 255, .9)
}

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

/* Smooth Theme Transition */
*,
*::before,
*::after {
     transition:
          background-color 0.4s ease,
          border-color 0.4s ease,
          color 0.3s ease,
          box-shadow 0.4s ease,
          opacity 0.3s ease;
}

/* Exclude animations from theme transition */
.spinner,
.spinner::before,
.spinner::after,
.loader-spinner,
.particle,
.orb,
.aurora-item,
.shape,
.beam,
.pulse-ring,
.bokeh-dot,
.star,
[class*="animation"],
.vouch-card::after {
     transition: none !important;
}

html {
     scrollbar-gutter: stable;
     scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
     width: 10px;
     height: 10px;
}

::-webkit-scrollbar-track {
     background: var(--light-gray);
     border-radius: 10px;
}

::-webkit-scrollbar-thumb {
     background: linear-gradient(135deg, var(--primary), #764ba2);
     border-radius: 10px;
     border: 2px solid var(--light-gray);
}

::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(135deg, #5a75ff, #8b5cf6);
}

.dark-theme ::-webkit-scrollbar-track {
     background: #1e2130;
}

.dark-theme ::-webkit-scrollbar-thumb {
     border-color: #1e2130;
}

/* Firefox Scrollbar */
* {
     scrollbar-width: thin;
     scrollbar-color: var(--primary) var(--light-gray);
}

body {
     font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 25%, #e1f5fe 50%, #f3e5f5 75%, #fce4ec 100%);
     background-size: 400% 400%;
     animation: gradientShift 15s ease infinite;
     color: #37474f;
     overflow-x: hidden;
     position: relative;
     transition: background 0.5s ease, background-color 0.5s ease;
     will-change: background-position;
}

@keyframes gradientShift {
     0% {
          background-position: 0% 50%;
     }

     50% {
          background-position: 100% 50%;
     }

     100% {
          background-position: 0% 50%;
     }
}

body.dark-theme {
     background: linear-gradient(135deg, #0c0d13 0%, #1a1b2e 30%, #16213e 60%, #0f3460 100%);
     background-size: 400% 400%;
     animation: gradientShiftDark 20s ease infinite;
     color: #f0f0f0
}

@keyframes gradientShiftDark {
     0% {
          background-position: 0% 50%;
     }

     50% {
          background-position: 100% 50%;
     }

     100% {
          background-position: 0% 50%;
     }
}

/* ========== BACKGROUND EFFECTS ========== */
.background-effects {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     overflow: hidden;
     pointer-events: none;
     contain: strict;
     will-change: auto;
}

/* Mesh Gradient */
.mesh-gradient {
     position: absolute;
     width: 100%;
     height: 100%;
     background:
          radial-gradient(at 40% 20%, rgba(92, 107, 192, 0.15) 0px, transparent 50%),
          radial-gradient(at 80% 0%, rgba(126, 87, 194, 0.12) 0px, transparent 50%),
          radial-gradient(at 0% 50%, rgba(77, 182, 172, 0.1) 0px, transparent 50%),
          radial-gradient(at 80% 50%, rgba(179, 157, 219, 0.15) 0px, transparent 50%),
          radial-gradient(at 0% 100%, rgba(79, 195, 247, 0.1) 0px, transparent 50%),
          radial-gradient(at 80% 100%, rgba(229, 115, 115, 0.1) 0px, transparent 50%);
     transform: translateZ(0);
     backface-visibility: hidden;
     transition: background 0.6s ease;
}

.dark-theme .mesh-gradient {
     background:
          radial-gradient(at 40% 20%, rgba(102, 126, 234, 0.2) 0px, transparent 50%),
          radial-gradient(at 80% 0%, rgba(118, 75, 162, 0.2) 0px, transparent 50%),
          radial-gradient(at 0% 50%, rgba(79, 172, 254, 0.15) 0px, transparent 50%),
          radial-gradient(at 80% 50%, rgba(240, 147, 251, 0.15) 0px, transparent 50%),
          radial-gradient(at 0% 100%, rgba(0, 242, 254, 0.1) 0px, transparent 50%);
}

/* Aurora Effect */
.aurora {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow: hidden;
     contain: strict;
}

.aurora-item {
     position: absolute;
     width: 200%;
     height: 50%;
     opacity: 0.3;
     filter: blur(80px);
     transform: translateZ(0);
     backface-visibility: hidden;
}

.aurora-1 {
     background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.4), rgba(118, 75, 162, 0.4), transparent);
     top: -20%;
     left: -50%;
}

.aurora-2 {
     background: linear-gradient(90deg, transparent, rgba(240, 147, 251, 0.3), rgba(245, 87, 108, 0.3), transparent);
     top: 30%;
     left: -30%;
}

.aurora-3 {
     background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.3), rgba(0, 242, 254, 0.3), transparent);
     bottom: 0%;
     left: -40%;
}

.dark-theme .aurora-item {
     opacity: 0.4;
}

/* Floating Shapes */
.floating-shapes {
     position: absolute;
     width: 100%;
     height: 100%;
     contain: strict;
}

.shape {
     position: absolute;
     border-radius: 50%;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
     border: 1px solid rgba(255, 255, 255, 0.1);
     transform: translateZ(0);
}

.shape-1 {
     width: 80px;
     height: 80px;
     top: 10%;
     left: 5%;
}

.shape-2 {
     width: 120px;
     height: 120px;
     top: 60%;
     left: 10%;
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.shape-3 {
     width: 60px;
     height: 60px;
     top: 20%;
     right: 10%;
}

.shape-4 {
     width: 100px;
     height: 100px;
     bottom: 20%;
     right: 5%;
     border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.shape-5 {
     width: 50px;
     height: 50px;
     top: 50%;
     left: 50%;
}

.shape-6 {
     width: 70px;
     height: 70px;
     bottom: 30%;
     left: 30%;
     border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
}

/* Glow Lines */
.glow-lines {
     position: absolute;
     width: 100%;
     height: 100%;
     contain: strict;
}

.glow-line {
     position: absolute;
     height: 2px;
     background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.5), rgba(240, 147, 251, 0.5), transparent);
     filter: blur(1px);
     transform: translateZ(0);
}

.gl-1 {
     width: 60%;
     top: 20%;
     left: 10%;
}

.gl-2 {
     width: 40%;
     top: 50%;
     left: 20%;
}

.gl-3 {
     width: 50%;
     top: 80%;
     left: 15%;
}

/* Noise Overlay */
.noise-overlay {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0.03;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
     contain: strict;
}

/* Gradient Orbs - Light Mode */
.gradient-orbs {
     position: absolute;
     width: 100%;
     height: 100%;
}

.orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(60px);
     opacity: 0.35;
     animation: floatOrb 20s ease-in-out infinite;
}

.orb-1 {
     width: 400px;
     height: 400px;
     background: linear-gradient(135deg, #c5cae9, #e1bee7);
     top: -10%;
     left: -5%;
     animation-delay: 0s;
}

.orb-2 {
     width: 350px;
     height: 350px;
     background: linear-gradient(135deg, #b3e5fc, #e1bee7);
     top: 40%;
     right: -10%;
     animation-delay: -5s;
}

.orb-3 {
     width: 300px;
     height: 300px;
     background: linear-gradient(135deg, #b2dfdb, #b3e5fc);
     bottom: -5%;
     left: 30%;
     animation-delay: -10s;
}

.orb-4 {
     width: 250px;
     height: 250px;
     background: linear-gradient(135deg, #ffe0b2, #ffccbc);
     top: 60%;
     left: -8%;
     animation-delay: -7s;
}

.orb-5 {
     width: 200px;
     height: 200px;
     background: linear-gradient(135deg, #b2ebf2, #f8bbd0);
     top: 10%;
     right: 20%;
     animation-delay: -12s;
}

@keyframes floatOrb {

     0%,
     100% {
          transform: translate(0, 0) scale(1);
     }

     25% {
          transform: translate(30px, -30px) scale(1.1);
     }

     50% {
          transform: translate(-20px, 20px) scale(0.95);
     }

     75% {
          transform: translate(20px, 10px) scale(1.05);
     }
}

/* Dark Mode Orbs */
.dark-theme .orb-1 {
     background: linear-gradient(135deg, #667eea, #764ba2);
     opacity: 0.3;
}

.dark-theme .orb-2 {
     background: linear-gradient(135deg, #f093fb, #f5576c);
     opacity: 0.25;
}

.dark-theme .orb-3 {
     background: linear-gradient(135deg, #4facfe, #00f2fe);
     opacity: 0.2;
}

.dark-theme .orb-4 {
     background: linear-gradient(135deg, #43e97b, #38f9d7);
     opacity: 0.15;
}

.dark-theme .orb-5 {
     background: linear-gradient(135deg, #fa709a, #fee140);
     opacity: 0.2;
}

/* Particles Effect */
.particles {
     position: absolute;
     width: 100%;
     height: 100%;
     contain: strict;
}

.particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: rgba(255, 255, 255, 0.6);
     border-radius: 50%;
     animation: floatParticle 15s ease-in-out infinite;
     will-change: transform, opacity;
}

@keyframes floatParticle {

     0%,
     100% {
          transform: translateY(0) translateX(0);
          opacity: 0;
     }

     10% {
          opacity: 1;
     }

     90% {
          opacity: 1;
     }

     100% {
          transform: translateY(-100vh) translateX(20px);
          opacity: 0;
     }
}

.dark-theme .particle {
     background: rgba(255, 255, 255, 0.4);
     box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

/* Grid Pattern Overlay */
.grid-pattern {
     position: absolute;
     width: 100%;
     height: 100%;
     background-image:
          linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
     background-size: 60px 60px;
     animation: gridMove 30s linear infinite;
     will-change: transform;
     contain: strict;
}

@keyframes gridMove {
     0% {
          transform: perspective(500px) rotateX(60deg) translateY(0);
     }

     100% {
          transform: perspective(500px) rotateX(60deg) translateY(60px);
     }
}

.dark-theme .grid-pattern {
     background-image:
          linear-gradient(rgba(102, 126, 234, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(102, 126, 234, 0.05) 1px, transparent 1px);
}

/* Scan Line Effect */
.scan-line {
     position: absolute;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg,
               transparent 0%,
               rgba(102, 126, 234, 0.3) 20%,
               rgba(240, 147, 251, 0.5) 50%,
               rgba(102, 126, 234, 0.3) 80%,
               transparent 100%);
     filter: blur(1px);
     animation: scanMove 8s linear infinite;
     opacity: 0.6;
     will-change: top;
     contain: layout style;
}

@keyframes scanMove {
     0% {
          top: -5%;
     }

     100% {
          top: 105%;
     }
}

/* Light Beam */
.light-beams {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow: hidden;
     contain: strict;
}

.beam {
     position: absolute;
     width: 3px;
     height: 150%;
     background: linear-gradient(to bottom,
               transparent 0%,
               rgba(255, 255, 255, 0.15) 50%,
               transparent 100%);
     transform-origin: top center;
     animation: beamRotate 20s ease-in-out infinite;
}

.beam-1 {
     left: 10%;
     animation-delay: 0s;
     transform: rotate(-15deg);
}

.beam-2 {
     left: 30%;
     animation-delay: -5s;
     transform: rotate(-5deg);
}

.beam-3 {
     right: 20%;
     animation-delay: -10s;
     transform: rotate(10deg);
}

@keyframes beamRotate {

     0%,
     100% {
          opacity: 0.3;
          transform: rotate(-15deg);
     }

     50% {
          opacity: 0.6;
          transform: rotate(15deg);
     }
}

/* Circular Gradient Pulse */
.pulse-rings {
     position: absolute;
     width: 100%;
     height: 100%;
     contain: strict;
}

.pulse-ring {
     position: absolute;
     border-radius: 50%;
     border: 2px solid rgba(102, 126, 234, 0.2);
     animation: pulseExpand 6s ease-out infinite;
     will-change: transform, opacity;
}

.pulse-ring-1 {
     width: 100px;
     height: 100px;
     top: 20%;
     left: 20%;
     animation-delay: 0s;
}

.pulse-ring-2 {
     width: 80px;
     height: 80px;
     bottom: 30%;
     right: 25%;
     animation-delay: -2s;
}

.pulse-ring-3 {
     width: 120px;
     height: 120px;
     top: 60%;
     left: 60%;
     animation-delay: -4s;
}

@keyframes pulseExpand {
     0% {
          transform: scale(1);
          opacity: 0.5;
     }

     100% {
          transform: scale(4);
          opacity: 0;
     }
}

/* Bokeh Effect */
.bokeh {
     position: absolute;
     width: 100%;
     height: 100%;
     contain: strict;
}

.bokeh-dot {
     position: absolute;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
     animation: bokehFloat 15s ease-in-out infinite;
     will-change: transform, opacity;
}

.bokeh-1 {
     width: 20px;
     height: 20px;
     top: 15%;
     left: 25%;
     animation-delay: 0s;
}

.bokeh-2 {
     width: 35px;
     height: 35px;
     top: 45%;
     left: 15%;
     animation-delay: -3s;
}

.bokeh-3 {
     width: 15px;
     height: 15px;
     top: 70%;
     left: 40%;
     animation-delay: -6s;
}

.bokeh-4 {
     width: 25px;
     height: 25px;
     top: 30%;
     right: 20%;
     animation-delay: -9s;
}

.bokeh-5 {
     width: 18px;
     height: 18px;
     bottom: 25%;
     right: 35%;
     animation-delay: -12s;
}

@keyframes bokehFloat {

     0%,
     100% {
          transform: translate(0, 0) scale(1);
          opacity: 0.4;
     }

     25% {
          transform: translate(20px, -30px) scale(1.3);
          opacity: 0.7;
     }

     50% {
          transform: translate(-10px, 20px) scale(0.8);
          opacity: 0.3;
     }

     75% {
          transform: translate(15px, 10px) scale(1.1);
          opacity: 0.5;
     }
}

.dark-theme .bokeh-dot {
     background: radial-gradient(circle, rgba(102, 126, 234, 0.6) 0%, transparent 70%);
}

.celestial-body {
     position: absolute;
     border-radius: 50%;
     z-index: 2;
     transition: all 1.5s cubic-bezier(.65, 0, .35, 1)
}

.sun {
     width: 120px;
     height: 120px;
     background: radial-gradient(circle, gold, orange);
     box-shadow: 0 0 80px #ffd700cc, 0 0 120px #ffa50099;
     top: 15%;
     right: 15%
}

.moon {
     width: 100px;
     height: 100px;
     background: radial-gradient(circle, #f0f0f0, silver);
     box-shadow: 0 0 60px #f0f0f0b3;
     top: 120%;
     left: 20%;
     opacity: 0
}

.dark-theme .sun {
     top: -50%;
     opacity: 0
}

.dark-theme .moon {
     top: 15%;
     opacity: 1
}

.stars {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 2s ease
}

.dark-theme .stars {
     opacity: 1
}

.star {
     position: absolute;
     background: #fff;
     border-radius: 50%;
     animation: twinkle 4s infinite
}

.theme-toggle {
     position: fixed;
     top: 25px;
     right: 25px;
     width: 55px;
     height: 55px;
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(15px);
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: #333;
     font-size: 1.5rem;
     z-index: 100;
     transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.theme-toggle i {
     transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle:active i {
     transform: rotate(360deg) scale(1.2);
}

.theme-toggle:hover {
     transform: scale(1.12) rotate(15deg);
     background: rgba(255, 255, 255, 0.35);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.dark-theme .theme-toggle {
     color: #ffd43b;
     background: rgba(255, 212, 59, 0.15);
     border-color: rgba(255, 212, 59, 0.3);
}

.dark-theme .theme-toggle:hover {
     background: rgba(255, 212, 59, 0.25);
     box-shadow: 0 15px 40px rgba(255, 212, 59, 0.18);
}

/* Theme Transition Ripple Effect */
.theme-ripple {
     position: fixed;
     border-radius: 50%;
     transform: translate(-50%, -50%) scale(0);
     animation: themeRipple 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
     pointer-events: none;
     z-index: 9999;
     width: 20px;
     height: 20px;
     background: radial-gradient(circle, rgba(255, 212, 59, 0.35) 0%, rgba(102, 126, 234, 0.25) 50%, transparent 70%);
}

.dark-theme .theme-ripple {
     background: radial-gradient(circle, rgba(102, 126, 234, 0.35) 0%, rgba(118, 75, 162, 0.25) 50%, transparent 70%);
}

@keyframes themeRipple {
     0% {
          transform: translate(-50%, -50%) scale(0);
          opacity: 1;
     }

     60% {
          opacity: 0.7;
     }

     100% {
          transform: translate(-50%, -50%) scale(250);
          opacity: 0;
     }
}

@keyframes twinkle {
     0% {
          opacity: .3
     }

     50% {
          opacity: 1
     }

     to {
          opacity: .3
     }
}

.container {
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
     flex: 1;
     position: relative;
     z-index: 10;
     min-height: 100vh;
     contain: layout style;
}

.header {
     text-align: center;
     padding: 50px 0 40px;
     margin-bottom: 30px;
     position: relative;
     min-height: 450px;
     contain: layout style;
}

.header-glow {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     pointer-events: none;
     z-index: 0;
}

/* Header Decorations - Floating Icons */
.header-decoration {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 1;
     contain: strict;
}

.floating-icon {
     position: absolute;
     font-size: 1.5rem;
     color: rgba(255, 255, 255, 0.3);
     animation: floatIcon 6s ease-in-out infinite;
     will-change: transform, opacity;
}

.floating-icon.fi-1 {
     top: 15%;
     left: 10%;
     animation-delay: 0s;
     color: rgba(255, 215, 0, 0.4);
}

.floating-icon.fi-2 {
     top: 25%;
     right: 12%;
     animation-delay: 1.5s;
     color: rgba(255, 107, 107, 0.4);
}

.floating-icon.fi-3 {
     bottom: 30%;
     left: 15%;
     animation-delay: 3s;
     color: rgba(6, 214, 160, 0.4);
}

.floating-icon.fi-4 {
     bottom: 20%;
     right: 10%;
     animation-delay: 4.5s;
     color: rgba(255, 215, 0, 0.5);
}

@keyframes floatIcon {

     0%,
     100% {
          transform: translateY(0) rotate(0deg);
          opacity: 0.3;
     }

     50% {
          transform: translateY(-20px) rotate(10deg);
          opacity: 0.6;
     }
}

.logo-container {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 1.5rem;
     position: relative;
     min-height: 200px;
     min-width: 200px;
}

.logo-ring {
     position: absolute;
     width: 200px;
     height: 200px;
     border-radius: 50%;
     border: 3px solid rgba(255, 255, 255, 0.2);
     animation: ringPulse 3s ease-in-out infinite;
     will-change: transform, opacity;
}

.logo-ring-2 {
     position: absolute;
     width: 230px;
     height: 230px;
     border-radius: 50%;
     border: 2px dashed rgba(255, 255, 255, 0.15);
     animation: ringRotate 20s linear infinite;
     will-change: transform;
}

@keyframes ringRotate {
     from {
          transform: rotate(0deg);
     }

     to {
          transform: rotate(360deg);
     }
}

/* Logo Sparkles */
.logo-sparkles {
     position: absolute;
     width: 180px;
     height: 180px;
     pointer-events: none;
     contain: strict;
}

.logo-sparkles span {
     position: absolute;
     width: 8px;
     height: 8px;
     background: white;
     border-radius: 50%;
     animation: sparkle 2s ease-in-out infinite;
     will-change: transform, opacity;
}

.logo-sparkles span:nth-child(1) {
     top: 10%;
     left: 20%;
     animation-delay: 0s;
}

.logo-sparkles span:nth-child(2) {
     top: 15%;
     right: 15%;
     animation-delay: 0.5s;
}

.logo-sparkles span:nth-child(3) {
     bottom: 20%;
     left: 10%;
     animation-delay: 1s;
}

.logo-sparkles span:nth-child(4) {
     bottom: 10%;
     right: 20%;
     animation-delay: 1.5s;
}

@keyframes sparkle {

     0%,
     100% {
          transform: scale(0);
          opacity: 0;
     }

     50% {
          transform: scale(1);
          opacity: 1;
     }
}

@keyframes ringPulse {

     0%,
     100% {
          transform: scale(1);
          opacity: 0.5;
     }

     50% {
          transform: scale(1.1);
          opacity: 0.2;
     }
}

.logo-img {
     width: 160px;
     height: 160px;
     min-width: 160px;
     min-height: 160px;
     border-radius: 50%;
     object-fit: cover;
     border: 4px solid rgba(255, 255, 255, 0.4);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 60px rgba(102, 126, 234, 0.3);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     z-index: 2;
}

.verified-seller {
     position: absolute;
     bottom: 5px;
     right: calc(50% - 90px);
     width: 35px;
     height: 35px;
     background: linear-gradient(135deg, #00b894, #00cec9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 16px;
     box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
     z-index: 3;
     border: 3px solid white;
     animation: verifiedPulse 2s ease-in-out infinite;
}

@keyframes verifiedPulse {

     0%,
     100% {
          box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
     }

     50% {
          box-shadow: 0 4px 25px rgba(0, 184, 148, 0.7), 0 0 40px rgba(0, 184, 148, 0.3);
     }
}

.title {
     margin-bottom: 15px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, .1);
     position: relative;
     z-index: 2;
     font-size: 2.6rem;
     font-family: 'Space Grotesk', 'Inter', sans-serif;
     font-weight: 700;
     letter-spacing: -0.5px;
     background: linear-gradient(90deg, #5c6bc0, #7e57c2, #9575cd);
     background-size: 200% auto;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: shineText 4s infinite linear;
     min-height: 40px;
     will-change: background-position;
     contain: layout style;
}

.dark-theme .title {
     color: #fff
}

.subtitle {
     font-size: 1.1rem;
     max-width: 800px;
     margin: 0 auto 25px;
     line-height: 1.6;
     background: rgba(92, 107, 192, 0.15);
     backdrop-filter: blur(10px);
     padding: 14px 28px;
     border-radius: 50px;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     position: relative;
     z-index: 2;
     color: var(--text-primary);
     text-shadow: none;
     border: 1px solid rgba(92, 107, 192, 0.2);
     min-height: 50px;
}

.subtitle i {
     color: #5c6bc0;
}

/* Trust Indicators */
.trust-indicators {
     display: flex;
     justify-content: center;
     gap: 30px;
     margin-top: 25px;
     flex-wrap: wrap;
     perspective: 500px;
     min-height: 50px;
     contain: layout style;
}

.trust-item {
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--text-primary);
     font-size: 0.9rem;
     font-weight: 500;
     padding: 12px 22px;
     background: var(--card-bg);
     backdrop-filter: blur(15px);
     border-radius: 35px;
     border: 1px solid rgba(92, 107, 192, 0.2);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.trust-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(92, 107, 192, 0.15), transparent);
     transition: left 0.5s ease;
}

.trust-item:hover::before {
     left: 100%;
}

.trust-item:hover {
     background: linear-gradient(135deg, var(--primary), #764ba2);
     transform: translateY(-5px) scale(1.05);
     box-shadow: 0 15px 35px rgba(92, 107, 192, 0.2), 0 0 20px rgba(126, 87, 194, 0.15);
}

.trust-item i {
     color: #fff !important;
     font-size: 1.1rem;
     transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.trust-item:hover i {
     transform: scale(1.2) rotate(10deg);
}

.trust-item span {
     position: relative;
     z-index: 1;
}

@keyframes shineText {
     0% {
          background-position: -200% center
     }

     to {
          background-position: 200% center
     }
}

.logo-container:hover img {
     transform: scale(1.05) rotate(1deg)
}

.stats {
     display: flex;
     justify-content: center;
     gap: 2rem;
     padding: 2rem 0;
     flex-wrap: wrap;
     min-height: 200px;
     contain: layout style;
}

.stat-card {
     background: var(--card-bg);
     border-radius: 24px;
     padding: 2rem 2.5rem 1.5rem;
     text-align: center;
     min-width: 220px;
     min-height: 180px;
     box-shadow: var(--shadow);
     transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease, border-color 0.4s ease;
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     contain: layout style paint;
}

.stat-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, var(--primary), var(--accent));
     animation: shimmerBar 3s linear infinite;
     background-size: 200% 100%;
}

@keyframes shimmerBar {
     0% {
          background-position: -200% 0;
     }

     100% {
          background-position: 200% 0;
     }
}

.stat-card::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
     pointer-events: none;
}

/* Stat Glow Effect */
.stat-glow {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 150px;
     height: 150px;
     background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
     opacity: 0;
     transform: translate(-50%, -50%);
     transition: opacity 0.5s ease;
     pointer-events: none;
     z-index: 0;
     filter: blur(40px);
}

.stat-glow.success {
     background: radial-gradient(circle, #06d6a0 0%, transparent 70%);
}

.stat-glow.warning {
     background: radial-gradient(circle, #ffc107 0%, transparent 70%);
}

.stat-card:hover .stat-glow {
     opacity: 0.4;
}

/* Stat Sparkles */
.stat-sparkles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     overflow: hidden;
     contain: strict;
}

.stat-sparkles span {
     position: absolute;
     width: 6px;
     height: 6px;
     background: var(--primary);
     border-radius: 50%;
     opacity: 0;
     animation: sparkle 2s ease-in-out infinite;
     will-change: transform, opacity;
}

.stat-sparkles span:nth-child(1) {
     top: 20%;
     left: 15%;
     animation-delay: 0s;
}

.stat-sparkles span:nth-child(2) {
     top: 60%;
     right: 20%;
     animation-delay: 0.7s;
}

.stat-sparkles span:nth-child(3) {
     bottom: 25%;
     left: 30%;
     animation-delay: 1.4s;
}

@keyframes sparkle {

     0%,
     100% {
          opacity: 0;
          transform: scale(0);
     }

     50% {
          opacity: 1;
          transform: scale(1);
          box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
     }
}

.stat-card:hover {
     transform: translateY(-10px) scale(1.03);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* Stat Icon */
.stat-icon {
     width: 60px;
     height: 60px;
     margin: 0 auto 15px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary), #764ba2);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: white;
     box-shadow: 0 10px 30px rgba(67, 97, 238, 0.3);
     position: relative;
     z-index: 2;
     animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

     0%,
     100% {
          transform: translateY(0);
     }

     50% {
          transform: translateY(-5px);
     }
}

.stat-icon.success {
     background: linear-gradient(135deg, #06d6a0, #00b894);
     box-shadow: 0 10px 30px rgba(6, 214, 160, 0.3);
}

.stat-icon.warning {
     background: linear-gradient(135deg, #ffc107, #ff9800);
     box-shadow: 0 10px 30px rgba(255, 193, 7, 0.3);
}

/* Stat Bar */
.stat-bar {
     width: 100%;
     height: 6px;
     background: rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     margin-top: 15px;
     overflow: hidden;
     position: relative;
     z-index: 2;
}

.stat-bar-fill {
     height: 100%;
     width: 0%;
     background: linear-gradient(90deg, var(--primary), var(--accent));
     border-radius: 10px;
     animation: fillBar 2s ease forwards;
     animation-delay: 0.5s;
     position: relative;
}

.stat-bar-fill::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     animation: barShine 2s linear infinite;
}

@keyframes barShine {
     0% {
          transform: translateX(-100%);
     }

     100% {
          transform: translateX(100%);
     }
}

.stat-bar-fill.success {
     background: linear-gradient(90deg, #06d6a0, #00b894);
}

.stat-bar-fill.warning {
     background: linear-gradient(90deg, #ffc107, #ff9800);
}

@keyframes fillBar {
     to {
          width: 100%;
     }
}

.stat-value {
     font-size: 2.8rem;
     font-weight: 800;
     font-family: 'Space Grotesk', sans-serif;
     background: linear-gradient(135deg, var(--primary), var(--accent));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 0.5rem;
     line-height: 1.2;
     position: relative;
     z-index: 2;
}

.stat-label {
     color: var(--gray);
     font-size: 0.85rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     position: relative;
     z-index: 2;
}

.filters {
     display: flex;
     justify-content: center;
     gap: 1rem;
     flex-wrap: wrap;
     margin: 2rem 0;
     perspective: 500px;
     min-height: 60px;
     contain: layout style;
}

.filter-btn {
     background: var(--card-bg);
     border: none;
     border-radius: 50px;
     padding: .75rem 1.8rem;
     font-weight: 600;
     color: var(--text-primary);
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: .6rem;
     box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     backdrop-filter: blur(10px);
     position: relative;
     overflow: hidden;
     font-size: 0.95rem;
}

.filter-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
     transform: translateX(-100%);
     transition: transform 0.6s ease;
}

.filter-btn:hover::before {
     transform: translateX(100%);
}

.filter-btn i {
     font-size: 1rem;
     transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.filter-btn:hover i {
     transform: scale(1.15) rotate(8deg);
}

.filter-btn:hover {
     background: linear-gradient(135deg, var(--primary), #764ba2);
     color: #fff;
     transform: translateY(-5px) scale(1.03);
     box-shadow: 0 18px 40px rgba(67, 97, 238, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.filter-btn.active {
     background: linear-gradient(135deg, var(--primary), #764ba2);
     color: #fff;
     box-shadow: 0 10px 30px rgba(67, 97, 238, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.filter-btn.active::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 50%;
     transform: translateX(-50%);
     width: 30px;
     height: 4px;
     background: #fff;
     border-radius: 2px;
     animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

     0%,
     100% {
          opacity: 0.6;
          width: 30px;
     }

     50% {
          opacity: 1;
          width: 50px;
     }
}

.vouch-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
     gap: 2rem;
     margin: 2rem 0;
     min-height: 600px;
     contain: layout style;
}

.vouch-card {
     background: var(--card-bg);
     border-radius: 28px;
     overflow: hidden;
     box-shadow:
          0 10px 40px rgba(0, 0, 0, 0.08),
          0 0 0 1px rgba(255, 255, 255, 0.1) inset;
     transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
          background-color 0.4s ease,
          border-color 0.4s ease;
     opacity: 1;
     transform: none;
     display: flex;
     flex-direction: column;
     min-height: 520px;
     height: auto;
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.15);
     position: relative;
     contain: layout style paint;
     will-change: transform, box-shadow;
}

/* Card glow effect on hover */
.vouch-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 28px;
     padding: 2px;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(240, 147, 251, 0.3), rgba(6, 214, 160, 0.3));
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     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.4s ease;
     pointer-events: none;
}

.vouch-card:hover::before {
     opacity: 1;
}

/* Shine effect */
.vouch-card::after {
     content: "";
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(to bottom right,
               rgba(255, 255, 255, 0) 0%,
               rgba(255, 255, 255, 0) 40%,
               rgba(255, 255, 255, 0.1) 50%,
               rgba(255, 255, 255, 0) 60%,
               rgba(255, 255, 255, 0) 100%);
     transform: rotate(45deg);
     transition: all 0.8s ease;
     pointer-events: none;
     opacity: 0;
}

.vouch-card:hover::after {
     animation: cardShine 1.5s ease;
}

@keyframes cardShine {
     0% {
          transform: rotate(45deg) translateY(-100%);
          opacity: 1;
     }

     100% {
          transform: rotate(45deg) translateY(100%);
          opacity: 0;
     }
}

@keyframes cardEntrance {
     0% {
          opacity: 0;
          transform: translateY(20px) scale(0.98);
     }

     100% {
          opacity: 1;
          transform: translateY(0) scale(1);
     }
}

.vouch-card:hover {
     transform: translateY(-12px) scale(1.02);
     box-shadow:
          0 35px 70px rgba(0, 0, 0, 0.18),
          0 0 0 1px rgba(255, 255, 255, 0.2) inset,
          0 0 50px rgba(102, 126, 234, 0.12);
}

/* Dark theme card adjustments */
.dark-theme .vouch-card {
     background: rgba(30, 33, 48, 0.85);
     border-color: rgba(255, 255, 255, 0.08);
     box-shadow:
          0 10px 40px rgba(0, 0, 0, 0.3),
          0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.dark-theme .vouch-card:hover {
     box-shadow:
          0 35px 70px rgba(0, 0, 0, 0.35),
          0 0 0 1px rgba(255, 255, 255, 0.1) inset,
          0 0 60px rgba(102, 126, 234, 0.18);
}

.vouch-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.2rem 1.5rem;
     background: linear-gradient(135deg, #5c6bc0 0%, #7e57c2 50%, #9575cd 100%);
     color: #fff;
     position: relative;
     overflow: hidden;
}

/* Multiple shine layers for header */
.vouch-header::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
     animation: headerShine 3s infinite;
}

.vouch-header::after {
     content: "";
     position: absolute;
     top: -50%;
     right: -50%;
     width: 100%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
     animation: headerGlow 4s ease-in-out infinite;
}

@keyframes headerGlow {

     0%,
     100% {
          transform: translate(0, 0);
          opacity: 0.5;
     }

     50% {
          transform: translate(-20px, 10px);
          opacity: 0.8;
     }
}

@keyframes headerShine {
     0% {
          transform: translateX(-100%);
     }

     100% {
          transform: translateX(100%);
     }
}

.vouch-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem 1.5rem;
     background: var(--light);
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     position: relative;
}

.vouch-footer::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(92, 107, 192, 0.3), rgba(126, 87, 194, 0.3), transparent);
}

.vouch-product {
     font-weight: 700;
     font-size: 1.15rem;
     background: linear-gradient(135deg, #5c6bc0, #7e57c2);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
}

.vouch-date {
     font-size: .9rem;
     opacity: .85;
     display: flex;
     align-items: center;
     gap: 5px;
}

.vouch-date::before {
     content: "📅";
     font-size: 0.85rem;
}

.vouch-body {
     padding: 1.2rem;
     flex: 1;
     display: flex;
     flex-direction: column;
     position: relative;
}

.vouch-users {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem
}

.user-card {
     display: flex;
     align-items: center;
     gap: 0.8rem;
     flex: 1;
     padding: 8px 12px;
     background: rgba(0, 0, 0, 0.03);
     border-radius: 12px;
     transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     max-width: 45%;
     overflow: hidden;
}

.user-card:hover {
     background: rgba(0, 0, 0, 0.05);
     transform: scale(1.02);
}

.dark-theme .user-card {
     background: rgba(255, 255, 255, 0.03);
}

.dark-theme .user-card:hover {
     background: rgba(255, 255, 255, 0.06);
}

.user-avatar {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 1.5rem;
     flex-shrink: 0;
     background: var(--gradient-primary);
     position: relative;
     box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
     contain: layout style;
}

.user-avatar::after {
     content: "";
     position: absolute;
     inset: -3px;
     border-radius: 50%;
     border: 2px solid transparent;
     background: linear-gradient(135deg, var(--primary), var(--accent)) border-box;
     -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
     mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     opacity: 0;
     transition: opacity 0.3s ease;
}

.user-card:hover .user-avatar::after {
     opacity: 1;
}

.user-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
}

.user-info {
     flex: 1;
     min-width: 0;
     overflow: hidden;
}

.user-name {
     font-size: .85rem;
     line-height: 1.2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--text-primary);
     font-weight: 600;
     max-width: 100%;
     display: block;
}

.user-role {
     font-size: .72rem;
     opacity: .8;
     color: var(--text-secondary);
     display: flex;
     align-items: center;
     gap: 4px;
}

.user-role::before {
     content: "";
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--accent);
     animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: 0.5;
          transform: scale(0.8);
     }
}

.vouch-arrow {
     color: var(--primary);
     font-size: 1.5rem;
     margin: 0 8px;
     position: relative;
}

.vouch-arrow i {
     animation: arrowPulse 1.5s ease-in-out infinite;
     will-change: transform, opacity;
}

@keyframes arrowPulse {

     0%,
     100% {
          transform: translateX(0);
          opacity: 1;
     }

     50% {
          transform: translateX(3px);
          opacity: 0.7;
     }
}

.vouch-proof {
     height: 180px;
     min-height: 180px;
     border-radius: 20px;
     overflow: hidden;
     margin-bottom: 1.2rem;
     cursor: pointer;
     position: relative;
     background: linear-gradient(135deg, var(--light-gray), rgba(67, 97, 238, 0.08));
     flex-shrink: 0;
     transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     contain: layout style paint;
}

.vouch-proof::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg,
               rgba(102, 126, 234, 0.1) 0%,
               transparent 50%,
               rgba(240, 147, 251, 0.1) 100%);
     opacity: 0;
     transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     z-index: 1;
     pointer-events: none;
}

.vouch-proof:hover::before {
     opacity: 1;
}

.vouch-proof::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     z-index: 3;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.vouch-proof:hover::after {
     opacity: 0.9;
}

.vouch-proof:hover {
     transform: translateY(-6px) scale(1.01);
     box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

/* Image Loader */
.image-loader {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--light-gray), rgba(67, 97, 238, 0.05));
     z-index: 2;
}

.loader-spinner {
     width: 40px;
     height: 40px;
     border: 3px solid rgba(67, 97, 238, 0.2);
     border-top-color: var(--primary);
     border-radius: 50%;
     animation: loaderSpin 0.8s linear infinite;
}

@keyframes loaderSpin {
     to {
          transform: rotate(360deg);
     }
}

.vouch-proof img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: opacity 0.3s ease;
     opacity: 0;
     position: absolute;
     top: 0;
     left: 0;
}

.vouch-proof img.loaded {
     opacity: 1;
}

.vouch-proof:hover img.loaded {
     transform: scale(1.02);
}

/* No Image State */
.vouch-proof .no-image {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100%;
     background: linear-gradient(135deg, var(--light-gray) 0%, rgba(67, 97, 238, 0.05) 100%);
     color: var(--gray);
     padding: 20px;
     text-align: center;
}

.vouch-proof .no-image i {
     font-size: 2.5rem;
     margin-bottom: 10px;
     opacity: 0.5;
     color: var(--primary);
}

.vouch-proof .no-image p {
     font-size: 0.95rem;
     font-weight: 600;
     margin: 0;
     color: var(--text-secondary);
}

.vouch-proof .no-image .no-image-sub {
     font-size: 0.8rem;
     opacity: 0.7;
     margin-top: 5px;
     display: flex;
     align-items: center;
     gap: 5px;
}

.vouch-proof .no-image .no-image-sub::before {
     content: "✓";
     color: var(--accent);
     font-weight: bold;
}

/* Dark theme adjustments for no-image */
.dark-theme .vouch-proof .no-image {
     background: linear-gradient(135deg, var(--light-gray) 0%, rgba(90, 117, 255, 0.1) 100%);
}

.vouch-content {
     background: linear-gradient(135deg, var(--light-gray) 0%, rgba(67, 97, 238, 0.03) 100%);
     padding: 1.2rem;
     border-radius: 18px;
     position: relative;
     flex: 1;
     display: flex;
     flex-direction: column;
     font-size: 0.9rem;
     line-height: 1.6;
     color: var(--text-primary);
     border: 1px solid rgba(0, 0, 0, 0.03);
     overflow: hidden;
}

.vouch-content::before {
     content: "❝";
     position: absolute;
     top: 5px;
     left: 12px;
     font-size: 2.5rem;
     color: var(--primary);
     opacity: 0.15;
     font-family: Georgia, serif;
}

.rating-stars {
     color: #ffc107;
     font-size: 1.3rem;
     margin-bottom: 0.8rem;
     letter-spacing: 3px;
     text-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
     animation: starGlow 2s ease-in-out infinite;
}

@keyframes starGlow {

     0%,
     100% {
          filter: brightness(1);
     }

     50% {
          filter: brightness(1.2);
     }
}

.vouch-text {
     flex: 1;
     overflow: hidden;
     position: relative;
     max-height: 80px;
     transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
     font-style: italic;
     padding-left: 5px;
}

.vouch-text.expanded {
     max-height: 500px
}

.vouch-text:after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 30px;
     background: linear-gradient(to bottom, transparent, var(--light-gray));
     transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     pointer-events: none;
}

.vouch-text.expanded:after {
     opacity: 0
}

.expand-toggle {
     color: var(--primary);
     cursor: pointer;
     font-weight: 600;
     text-align: right;
     margin-top: 8px;
     font-size: .85rem;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 5px;
     transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.expand-toggle:hover {
     color: var(--accent);
}

.vouch-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem 1.5rem;
     background: linear-gradient(135deg, var(--light), rgba(67, 97, 238, 0.02));
     border-top: 1px solid rgba(0, 0, 0, .03);
     position: relative;
}

.vouch-id {
     font-size: .85rem;
     font-weight: 700;
     color: var(--primary);
     font-family: 'Space Grotesk', monospace;
     letter-spacing: 0.5px;
     padding: 4px 10px;
     background: rgba(67, 97, 238, 0.08);
     border-radius: 8px;
}

.verify-badge {
     background: linear-gradient(135deg, var(--accent), #00b894);
     color: #fff;
     padding: .5rem 1.2rem;
     border-radius: 50px;
     font-size: .8rem;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: .5rem;
     box-shadow: 0 4px 15px rgba(6, 214, 160, 0.3);
     animation: verifyPulse 3s ease-in-out infinite;
}

@keyframes verifyPulse {

     0%,
     100% {
          box-shadow: 0 4px 15px rgba(6, 214, 160, 0.3);
     }

     50% {
          box-shadow: 0 4px 25px rgba(6, 214, 160, 0.5);
     }
}

.verify-badge i {
     animation: checkMark 2s ease-in-out infinite;
}

@keyframes checkMark {

     0%,
     100% {
          transform: scale(1);
     }

     50% {
          transform: scale(1.1);
     }
}

.loading {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 3rem 0;
     gap: 1.5rem;
     display: none;
     contain: layout style;
}

.spinner {
     width: 60px;
     height: 60px;
     position: relative;
     will-change: transform;
}

.spinner::before,
.spinner::after {
     content: '';
     position: absolute;
     border-radius: 50%;
}

.spinner::before {
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, var(--primary), var(--accent), #764ba2);
     animation: spinnerRotate 1.5s linear infinite;
     will-change: transform;
}

.spinner::after {
     width: 70%;
     height: 70%;
     background: var(--bg-primary);
     top: 15%;
     left: 15%;
}

@keyframes spinnerRotate {
     0% {
          transform: rotate(0deg);
     }

     100% {
          transform: rotate(360deg);
     }
}

.loading-text {
     color: var(--text-primary);
     font-size: 0.9rem;
     font-weight: 500;
     animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {

     0%,
     100% {
          opacity: 0.5;
     }

     50% {
          opacity: 1;
     }
}

/* Dots loader alternative */
.loading-dots {
     display: flex;
     gap: 8px;
}

.loading-dots span {
     width: 12px;
     height: 12px;
     background: var(--primary);
     border-radius: 50%;
     animation: dotBounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) {
     animation-delay: 0s;
}

.loading-dots span:nth-child(2) {
     animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
     animation-delay: 0.4s;
}

@keyframes dotBounce {

     0%,
     80%,
     100% {
          transform: scale(0.8);
          opacity: 0.5;
     }

     40% {
          transform: scale(1.2);
          opacity: 1;
     }
}

.pagination {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: .75rem;
     margin: 3rem 0;
     flex-wrap: wrap;
     perspective: 500px;
     min-height: 60px;
     contain: layout style;
}

.page-btn {
     width: 45px;
     height: 45px;
     border-radius: 14px;
     border: none;
     background: var(--card-bg);
     color: var(--text-primary);
     font-weight: 600;
     font-size: 1rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     backdrop-filter: blur(10px);
     position: relative;
     overflow: hidden;
}

.page-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
     opacity: 0;
     transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-btn:hover::before {
     opacity: 1;
}

.page-btn:hover:not(.active) {
     background: var(--light-gray);
     transform: translateY(-4px) scale(1.08);
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.page-btn.active {
     background: linear-gradient(135deg, var(--primary), #764ba2);
     color: #fff;
     transform: scale(1.1);
     box-shadow: 0 10px 30px rgba(67, 97, 238, 0.4);
}

.page-btn.active::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
     animation: pageShine 2s linear infinite;
}

@keyframes pageShine {
     0% {
          transform: translateX(-100%) rotate(45deg);
     }

     100% {
          transform: translateX(100%) rotate(45deg);
     }
}

.page-btn i {
     font-size: 0.9rem;
     transition: transform 0.3s ease;
}

.page-btn:hover i {
     transform: translateX(3px);
}

.page-btn:first-child:hover i {
     transform: translateX(-3px);
}

/* Page ellipsis */
.page-ellipsis {
     color: var(--text-secondary);
     font-weight: 600;
     padding: 0 5px;
}

/* ========== FOOTER STYLES ========== */
.footer {
     background: linear-gradient(135deg, var(--footer-bg) 0%, #1a1a2e 100%);
     color: var(--footer-text);
     padding: 0 0 0;
     margin-top: auto;
     width: 100%;
     position: relative;
     overflow: hidden;
     min-height: 400px;
     contain: layout style;
     transition: background 0.5s ease, color 0.4s ease;
}

.footer-wave {
     position: relative;
     width: 100%;
     height: 80px;
     overflow: hidden;
}

.footer-wave svg {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100%;
     fill: var(--footer-bg);
}

.footer::before {
     content: "";
     position: absolute;
     top: 80px;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
     background-size: 300% 100%;
     animation: gradientFlow 4s linear infinite;
}

@keyframes gradientFlow {
     0% {
          background-position: 0% 50%;
     }

     100% {
          background-position: 300% 50%;
     }
}

.footer-content {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 40px;
     padding: 50px 30px;
     position: relative;
     z-index: 2;
}

.footer-brand {
     text-align: center;
}

.footer-logo {
     width: 70px;
     height: 70px;
     margin: 0 auto 15px;
     border-radius: 50%;
     overflow: hidden;
     border: 3px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.footer-logo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.footer-brand h3 {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
}

.footer-brand h3 i {
     color: #06d6a0;
}

.footer-brand p {
     opacity: 0.8;
     font-size: 0.95rem;
     margin-bottom: 15px;
}

.footer-social {
     display: flex;
     justify-content: center;
     gap: 12px;
     margin-top: 15px;
}

.social-link {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     color: white;
     transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     position: relative;
     overflow: hidden;
}

.social-link::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.social-link:hover::before {
     transform: scale(1.3);
     opacity: 0;
}

.social-link.discord {
     background: linear-gradient(135deg, #5865F2, #7289da);
}

.social-link.telegram {
     background: linear-gradient(135deg, #0088cc, #00b2ff);
}

.social-link.facebook {
     background: linear-gradient(135deg, #1877f2, #42a5f5);
}

.social-link:hover {
     transform: translateY(-6px) scale(1.12);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.footer-links {
     text-align: center;
}

.footer-links h4,
.footer-info h4 {
     font-size: 1.1rem;
     margin-bottom: 20px;
     color: #06d6a0;
     font-weight: 600;
     position: relative;
     display: inline-block;
}

.footer-links h4::after,
.footer-info h4::after {
     content: "";
     position: absolute;
     bottom: -5px;
     left: 50%;
     transform: translateX(-50%);
     width: 40px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #06d6a0, transparent);
}

.footer-links a {
     color: var(--footer-text);
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 10px 0;
     font-size: 0.9rem;
     transition: all 0.3s ease;
     opacity: 0.8;
}

.footer-links a:hover {
     opacity: 1;
     color: #06d6a0;
     transform: translateX(5px);
}

.footer-links a i {
     font-size: 1rem;
     width: 20px;
}

.footer-info {
     text-align: center;
}

.footer-stats {
     display: flex;
     flex-direction: column;
     gap: 12px;
}

.footer-stat-item {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 10px 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
     font-size: 0.9rem;
     transition: all 0.3s ease;
}

.footer-stat-item:hover {
     background: rgba(255, 255, 255, 0.1);
     transform: scale(1.02);
}

.footer-stat-item i {
     color: #06d6a0;
     font-size: 1rem;
}

.footer-bottom {
     text-align: center;
     padding: 25px 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(0, 0, 0, 0.2);
}

.footer-bottom p {
     margin: 5px 0;
     font-size: 0.9rem;
     opacity: 0.8;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
}

.footer-note {
     font-size: 0.85rem !important;
     opacity: 0.6 !important;
}

.modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 50, 0.95) 100%);
     backdrop-filter: blur(15px);
     justify-content: center;
     align-items: center;
     opacity: 0;
     transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal.show {
     display: flex;
     opacity: 1;
}

.modal-wrapper {
     position: relative;
     max-width: 90%;
     max-height: 90%;
}

.modal-content {
     max-width: 100%;
     max-height: 85vh;
     object-fit: contain;
     border-radius: 16px;
     box-shadow:
          0 30px 60px rgba(0, 0, 0, 0.5),
          0 0 0 1px rgba(255, 255, 255, 0.1),
          0 0 100px rgba(67, 97, 238, 0.2);
     animation: modalZoomIn 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modalZoomIn {
     0% {
          transform: scale(0.4) translateY(30px);
          opacity: 0;
          filter: blur(15px);
     }

     60% {
          transform: scale(1.03) translateY(-5px);
          filter: blur(2px);
     }

     80% {
          transform: scale(0.98) translateY(2px);
     }

     100% {
          transform: scale(1) translateY(0);
          opacity: 1;
          filter: blur(0);
     }
}

.modal-controls {
     position: absolute;
     bottom: -60px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 15px;
}

.modal-control-btn {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: white;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     backdrop-filter: blur(10px);
}

.modal-control-btn:hover {
     background: var(--primary);
     transform: scale(1.12);
}

.close-btn {
     position: absolute;
     top: 20px;
     right: 30px;
     color: #fff;
     font-size: 40px;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     z-index: 1001;
     width: 50px;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
}

.close-btn:hover {
     color: var(--secondary);
     transform: rotate(90deg) scale(1.1);
     background: rgba(255, 107, 107, 0.3);
}

@keyframes pulse {
     0% {
          transform: scale(1)
     }

     50% {
          transform: scale(1.05)
     }

     to {
          transform: scale(1)
     }
}

.discord-btn {
     position: fixed;
     bottom: 25px;
     right: 25px;
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #5865f2, #7289da);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 28px;
     box-shadow: 0 8px 30px rgba(88, 101, 242, 0.4);
     z-index: 99;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border: 3px solid rgba(255, 255, 255, 0.2);
     text-decoration: none;
}

.discord-btn::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: linear-gradient(135deg, #5865f2, #7289da);
     animation: discordPulse 2s infinite;
     z-index: -1;
}

@keyframes discordPulse {

     0%,
     100% {
          transform: scale(1);
          opacity: 0.5;
     }

     50% {
          transform: scale(1.3);
          opacity: 0;
     }
}

.discord-btn:hover {
     transform: scale(1.15) translateY(-5px) rotate(10deg);
     box-shadow: 0 15px 40px rgba(88, 101, 242, 0.5);
}

/* Scroll to Top Button */
.scroll-top-btn {
     position: fixed;
     bottom: 100px;
     right: 25px;
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, var(--primary), #764ba2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 20px;
     box-shadow: 0 8px 25px rgba(67, 97, 238, 0.4);
     z-index: 98;
     cursor: pointer;
     border: none;
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scroll-top-btn.visible {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}

.scroll-top-btn:hover {
     transform: translateY(-5px) scale(1.1);
     box-shadow: 0 15px 40px rgba(67, 97, 238, 0.5);
}

.scroll-top-btn::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary), #764ba2);
     animation: scrollBtnPulse 2s infinite;
     z-index: -1;
}

@keyframes scrollBtnPulse {

     0%,
     100% {
          transform: scale(1);
          opacity: 0.5;
     }

     50% {
          transform: scale(1.3);
          opacity: 0;
     }
}

.scroll-top-btn i {
     transition: transform 0.3s ease;
}

.scroll-top-btn:hover i {
     transform: translateY(-3px);
}

@media (max-width: 992px) {
     .vouch-grid {
          grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))
     }
}

@media (max-width: 768px) {
     .stats {
          gap: 1rem
     }

     .stat-card {
          min-width: 140px;
          padding: 1.2rem 1.5rem
     }

     .stat-value {
          font-size: 2.2rem;
     }

     .stat-icon {
          width: 50px;
          height: 50px;
          font-size: 1.2rem;
     }

     .vouch-grid {
          grid-template-columns: 1fr
     }

     .title {
          font-size: 1.8rem
     }

     .trust-indicators {
          gap: 10px;
     }

     .trust-item {
          padding: 8px 14px;
          font-size: 0.8rem;
     }

     .filters {
          gap: .5rem
     }

     .filter-btn {
          padding: .5rem 1rem;
          font-size: .9rem
     }

     .vouch-card {
          min-height: auto;
          border-radius: 20px;
     }

     .discord-btn {
          right: 15px;
          bottom: 15px;
          width: 55px;
          height: 55px;
          font-size: 24px;
     }

     .theme-toggle {
          top: 15px;
          right: 15px;
          width: 45px;
          height: 45px;
          font-size: 1.2rem
     }

     .footer-wave {
          height: 50px;
     }

     .footer-content {
          grid-template-columns: 1fr;
          gap: 30px;
          padding: 30px 20px;
     }

     .footer-brand h3 {
          font-size: 1.3rem;
     }

     .footer-social {
          gap: 10px;
     }

     .social-link {
          width: 40px;
          height: 40px;
          font-size: 1rem;
     }

     .footer-links a {
          padding: 8px 0;
          font-size: 0.85rem;
     }

     .footer-stat-item {
          padding: 8px 12px;
          font-size: 0.85rem;
     }

     .floating-icon {
          font-size: 1rem;
     }

     .sun {
          width: 80px;
          height: 80px;
          right: 10%
     }

     .moon {
          width: 70px;
          height: 70px
     }
}

/* ========== BADGES / HUY HIỆU THÀNH TỰU ========== */
.badges-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 12px;
     margin-top: 20px;
     padding: 15px 20px;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
     min-height: 80px;
     contain: layout style;
}

.badge-item {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 45px;
     height: 45px;
     padding: 8px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     color: #fff;
     font-size: 1.5rem;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     border: 2px solid rgba(255, 255, 255, 0.3);
     position: relative;
     overflow: visible;
}

.badge-item img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: 50%;
}

.badge-item::before {
     display: none;
}

.badge-item:hover {
     transform: translateY(-5px) scale(1.15);
     box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
     border-color: rgba(255, 255, 255, 0.6);
}

/* Tooltip on hover */
.badge-item::after {
     content: attr(title);
     position: absolute;
     bottom: -35px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(0, 0, 0, 0.85);
     color: #fff;
     padding: 5px 10px;
     border-radius: 8px;
     font-size: 0.7rem;
     white-space: nowrap;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     z-index: 100;
     pointer-events: none;
}

.badge-item:hover::after {
     opacity: 1;
     visibility: visible;
     bottom: -40px;
}

/* Gold Badge */
.badge-item.gold {
     background: rgba(255, 215, 0, 0.2);
     border-color: rgba(255, 215, 0, 0.5);
     animation: goldGlow 2s infinite;
}

.badge-item.gold:hover {
     box-shadow: 0 8px 30px rgba(255, 210, 0, 0.5);
}

@keyframes goldGlow {

     0%,
     100% {
          box-shadow: 0 4px 15px rgba(255, 210, 0, 0.3);
     }

     50% {
          box-shadow: 0 4px 25px rgba(255, 210, 0, 0.6);
     }
}

/* Legendary Badge */
.badge-item.legendary {
     background: rgba(138, 43, 226, 0.2);
     border-color: rgba(138, 43, 226, 0.5);
     animation: legendaryGlow 3s ease infinite;
}

.badge-item.legendary:hover {
     box-shadow: 0 8px 35px rgba(138, 43, 226, 0.6);
}

@keyframes legendaryGlow {

     0%,
     100% {
          box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
          border-color: rgba(138, 43, 226, 0.5);
     }

     50% {
          box-shadow: 0 4px 25px rgba(138, 43, 226, 0.6);
          border-color: rgba(138, 43, 226, 0.8);
     }
}

/* Premium Badge */
.badge-item.premium {
     background: rgba(56, 239, 125, 0.2);
     border-color: rgba(56, 239, 125, 0.5);
}

.badge-item.premium:hover {
     box-shadow: 0 8px 25px rgba(56, 239, 125, 0.5);
}

/* Fire Badge */
.badge-item.fire {
     background: rgba(255, 107, 107, 0.2);
     border-color: rgba(255, 107, 107, 0.5);
     animation: fireGlow 1.5s ease infinite;
}

@keyframes fireGlow {

     0%,
     100% {
          box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
     }

     50% {
          box-shadow: 0 4px 25px rgba(255, 107, 107, 0.6);
     }
}

/* Dark theme adjustments */
.dark-theme .badges-container {
     background: rgba(0, 0, 0, 0.3);
}

.dark-theme .badge-item {
     background: rgba(255, 255, 255, 0.05);
     border-color: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
     .badges-container {
          gap: 8px;
          padding: 12px;
     }

     .badge-item {
          width: 40px;
          height: 40px;
          font-size: 1.2rem;
     }
}

@media (max-width: 480px) {
     .badges-container {
          gap: 8px;
          padding: 10px;
     }

     .badge-item {
          width: 35px;
          height: 35px;
          font-size: 1rem;
     }
}

/* Reduced Motion - Only for UI elements, NOT background effects */
@media (prefers-reduced-motion: reduce) {

     /* Smooth scroll behavior */
     html {
          scroll-behavior: auto !important;
     }

     /* Keep ALL background effects visible and animated */
     .mesh-gradient,
     .gradient-orbs,
     .grid-pattern,
     .background-effects {
          display: block !important;
          opacity: 1 !important;
          visibility: visible !important;
     }

     /* Noise overlay should stay subtle */
     .noise-overlay {
          opacity: 0.03 !important;
     }
}

/* ========== PAGE ENTRANCE ANIMATIONS - PREMIUM ========== */
/* Initial hidden state */
.header,
.stats,
.filters,
.vouch-grid,
.footer {
     opacity: 0;
     transform: translateY(60px) perspective(1000px) rotateX(10deg);
     transform-origin: center bottom;
}

/* ===== KEYFRAMES ===== */

/* 3D Flip Up - Premium reveal */
@keyframes flipReveal {
     0% {
          opacity: 0;
          transform: translateY(80px) perspective(1000px) rotateX(15deg);
     }

     40% {
          opacity: 0.8;
          transform: translateY(-10px) perspective(1000px) rotateX(-3deg);
     }

     70% {
          transform: translateY(5px) perspective(1000px) rotateX(1deg);
     }

     100% {
          opacity: 1;
          transform: translateY(0) perspective(1000px) rotateX(0deg);
     }
}

/* Elastic Scale */
@keyframes elasticScale {
     0% {
          opacity: 0;
          transform: scale(0.3);
     }

     40% {
          opacity: 1;
          transform: scale(1.15);
     }

     60% {
          transform: scale(0.9);
     }

     80% {
          transform: scale(1.05);
     }

     100% {
          opacity: 1;
          transform: scale(1);
     }
}

/* Smooth Glide In */
@keyframes glideIn {
     0% {
          opacity: 0;
          transform: translateY(40px) scale(0.95);
     }

     60% {
          opacity: 1;
          transform: translateY(-8px) scale(1.02);
     }

     100% {
          opacity: 1;
          transform: translateY(0) scale(1);
     }
}

/* Swing In from Left */
@keyframes swingFromLeft {
     0% {
          opacity: 0;
          transform: translateX(-60px) rotate(-8deg);
          transform-origin: left center;
     }

     50% {
          opacity: 1;
          transform: translateX(10px) rotate(3deg);
     }

     70% {
          transform: translateX(-5px) rotate(-1deg);
     }

     100% {
          opacity: 1;
          transform: translateX(0) rotate(0deg);
     }
}

/* Swing In from Right */
@keyframes swingFromRight {
     0% {
          opacity: 0;
          transform: translateX(60px) rotate(8deg);
          transform-origin: right center;
     }

     50% {
          opacity: 1;
          transform: translateX(-10px) rotate(-3deg);
     }

     70% {
          transform: translateX(5px) rotate(1deg);
     }

     100% {
          opacity: 1;
          transform: translateX(0) rotate(0deg);
     }
}

/* Bounce Drop */
@keyframes bounceDrop {
     0% {
          opacity: 0;
          transform: translateY(-50px) scale(0.8);
     }

     50% {
          opacity: 1;
          transform: translateY(15px) scale(1.05);
     }

     70% {
          transform: translateY(-8px) scale(0.98);
     }

     85% {
          transform: translateY(4px) scale(1.01);
     }

     100% {
          opacity: 1;
          transform: translateY(0) scale(1);
     }
}

/* Pop Elastic */
@keyframes popElastic {
     0% {
          opacity: 0;
          transform: scale(0);
     }

     50% {
          opacity: 1;
          transform: scale(1.2);
     }

     65% {
          transform: scale(0.85);
     }

     80% {
          transform: scale(1.1);
     }

     90% {
          transform: scale(0.95);
     }

     100% {
          opacity: 1;
          transform: scale(1);
     }
}

/* Fade Rise */
@keyframes fadeRise {
     0% {
          opacity: 0;
          transform: translateY(30px);
     }

     100% {
          opacity: 1;
          transform: translateY(0);
     }
}

/* ===== APPLY ANIMATIONS ===== */
body.loaded .header {
     animation: flipReveal 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.loaded .stats {
     animation: glideIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

body.loaded .filters {
     animation: fadeRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.24s forwards;
}

body.loaded .vouch-grid {
     animation: fadeRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
}

body.loaded .footer {
     animation: fadeRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

/* ========== LOGO & HEADER ELEMENTS ========== */
/* Logo animation - 3D Spin In */
.logo-container {
     opacity: 0;
     transform: scale(0.3) rotate(-180deg);
}

body.loaded .logo-container {
     animation: logoSpinIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes logoSpinIn {
     0% {
          opacity: 0;
          transform: scale(0.3) rotate(-180deg);
     }

     40% {
          opacity: 1;
          transform: scale(1.15) rotate(15deg);
     }

     60% {
          transform: scale(0.9) rotate(-8deg);
     }

     80% {
          transform: scale(1.05) rotate(3deg);
     }

     100% {
          opacity: 1;
          transform: scale(1) rotate(0deg);
     }
}

/* Title animation - Typewriter slide */
.title {
     opacity: 0;
     transform: translateY(50px) skewY(3deg);
}

body.loaded .title {
     animation: titleReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

@keyframes titleReveal {
     0% {
          opacity: 0;
          transform: translateY(50px) skewY(3deg);
     }

     60% {
          opacity: 1;
          transform: translateY(-8px) skewY(-1deg);
     }

     100% {
          opacity: 1;
          transform: translateY(0) skewY(0deg);
     }
}

/* Subtitle animation - Smooth fade */
.subtitle {
     opacity: 0;
     transform: translateY(25px);
}

body.loaded .subtitle {
     animation: fadeRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

/* Trust indicators - Swing animation */
.trust-item {
     opacity: 0;
}

.trust-item:nth-child(1) {
     transform: translateX(-50px) rotate(-10deg);
}

.trust-item:nth-child(2) {
     transform: translateY(40px) scale(0.8);
}

.trust-item:nth-child(3) {
     transform: translateX(50px) rotate(10deg);
}

body.loaded .trust-item:nth-child(1) {
     animation: swingFromLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

body.loaded .trust-item:nth-child(2) {
     animation: bounceDrop 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.38s forwards;
}

body.loaded .trust-item:nth-child(3) {
     animation: swingFromRight 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.46s forwards;
}

/* ========== BADGES - Elastic Pop ========== */
.badge-item {
     opacity: 0;
     transform: scale(0);
}

body.loaded .badge-item {
     animation: popElastic 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

body.loaded .badge-item:nth-child(1) {
     animation-delay: 0.35s;
}

body.loaded .badge-item:nth-child(2) {
     animation-delay: 0.4s;
}

body.loaded .badge-item:nth-child(3) {
     animation-delay: 0.45s;
}

body.loaded .badge-item:nth-child(4) {
     animation-delay: 0.5s;
}

body.loaded .badge-item:nth-child(5) {
     animation-delay: 0.55s;
}

body.loaded .badge-item:nth-child(6) {
     animation-delay: 0.6s;
}

body.loaded .badge-item:nth-child(7) {
     animation-delay: 0.65s;
}

body.loaded .badge-item:nth-child(8) {
     animation-delay: 0.7s;
}

/* ========== STAT CARDS - 3D Flip animation ========== */
.stat-card {
     opacity: 0;
     transform-style: preserve-3d;
}

.stat-card:nth-child(1) {
     transform: translateX(-60px) rotateY(-20deg) scale(0.8);
}

.stat-card:nth-child(2) {
     transform: translateY(60px) rotateX(20deg) scale(0.8);
}

.stat-card:nth-child(3) {
     transform: translateX(60px) rotateY(20deg) scale(0.8);
}

@keyframes cardFlipLeft {
     0% {
          opacity: 0;
          transform: translateX(-60px) rotateY(-20deg) scale(0.8);
     }

     50% {
          opacity: 1;
          transform: translateX(10px) rotateY(5deg) scale(1.02);
     }

     70% {
          transform: translateX(-5px) rotateY(-2deg) scale(0.99);
     }

     100% {
          opacity: 1;
          transform: translateX(0) rotateY(0deg) scale(1);
     }
}

@keyframes cardFlipUp {
     0% {
          opacity: 0;
          transform: translateY(60px) rotateX(20deg) scale(0.8);
     }

     50% {
          opacity: 1;
          transform: translateY(-10px) rotateX(-5deg) scale(1.02);
     }

     70% {
          transform: translateY(5px) rotateX(2deg) scale(0.99);
     }

     100% {
          opacity: 1;
          transform: translateY(0) rotateX(0deg) scale(1);
     }
}

@keyframes cardFlipRight {
     0% {
          opacity: 0;
          transform: translateX(60px) rotateY(20deg) scale(0.8);
     }

     50% {
          opacity: 1;
          transform: translateX(-10px) rotateY(-5deg) scale(1.02);
     }

     70% {
          transform: translateX(5px) rotateY(2deg) scale(0.99);
     }

     100% {
          opacity: 1;
          transform: translateX(0) rotateY(0deg) scale(1);
     }
}

body.loaded .stat-card:nth-child(1) {
     animation: cardFlipLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

body.loaded .stat-card:nth-child(2) {
     animation: cardFlipUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
}

body.loaded .stat-card:nth-child(3) {
     animation: cardFlipRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.29s forwards;
}

/* ========== FLOATING ACTIONS CONTAINER ========== */
.floating-actions {
     position: fixed;
     top: 20px;
     right: 20px;
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 10px;
     z-index: 1000;
}

.floating-actions .theme-toggle {
     position: relative;
     top: auto;
     right: auto;
}

/* ========== LANGUAGE SWITCHER ========== */
.language-switcher {
     position: relative;
}

.lang-toggle {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 16px;
     background: var(--card-bg);
     border: none;
     border-radius: 50px;
     cursor: pointer;
     box-shadow: var(--shadow);
     transition: var(--transition);
     backdrop-filter: blur(10px);
     color: var(--text-primary);
     font-weight: 600;
     font-size: 0.9rem;
}

.lang-toggle:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-hover);
     background: var(--gradient-primary);
     color: white;
}

.lang-toggle i {
     font-size: 1.1rem;
}

.lang-text {
     font-size: 0.85rem;
}

.lang-dropdown {
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
     background: var(--card-bg);
     border-radius: 16px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     padding: 8px;
     min-width: 180px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
}

.language-switcher:hover .lang-dropdown,
.lang-dropdown.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}

.lang-option {
     display: flex;
     align-items: center;
     gap: 12px;
     width: 100%;
     padding: 12px 16px;
     background: transparent;
     border: none;
     border-radius: 12px;
     cursor: pointer;
     transition: var(--transition);
     color: var(--text-primary);
     font-size: 0.95rem;
}

.lang-option:hover {
     background: rgba(67, 97, 238, 0.1);
}

.lang-option.active {
     background: var(--gradient-primary);
     color: white;
}

.lang-option .flag {
     font-size: 1.3rem;
}

/* ========== SEARCH CONTAINER ========== */
.search-container {
     width: 100%;
     max-width: 600px;
     margin: 0 auto 30px;
     padding: 0 20px;
}

.search-box {
     position: relative;
     display: flex;
     align-items: center;
     background: var(--card-bg);
     border-radius: 50px;
     box-shadow: var(--shadow);
     overflow: hidden;
     transition: var(--transition);
     border: 2px solid transparent;
     backdrop-filter: blur(10px);
}

.search-box:focus-within {
     border-color: var(--primary);
     box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.2);
}

.search-icon {
     position: absolute;
     left: 20px;
     color: var(--gray);
     font-size: 1rem;
     transition: var(--transition);
}

.search-box:focus-within .search-icon {
     color: var(--primary);
}

.search-input {
     width: 100%;
     padding: 16px 50px 16px 50px;
     border: none;
     background: transparent;
     font-size: 1rem;
     color: var(--text-primary);
     outline: none;
}

.search-input::placeholder {
     color: var(--gray);
}

.search-clear {
     position: absolute;
     right: 16px;
     background: none;
     border: none;
     color: var(--gray);
     cursor: pointer;
     padding: 8px;
     border-radius: 50%;
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
}

.search-clear.visible {
     opacity: 1;
     visibility: visible;
}

.search-clear:hover {
     background: rgba(0, 0, 0, 0.1);
     color: var(--secondary);
}

.search-results-info {
     text-align: center;
     margin-top: 10px;
     font-size: 0.9rem;
     color: var(--text-secondary);
     opacity: 0;
     transition: var(--transition);
}

.search-results-info.visible {
     opacity: 1;
}

/* ========== QUICK ACTIONS ========== */
.quick-actions {
     display: flex;
     gap: 15px;
     justify-content: center;
     flex-wrap: wrap;
     margin: 25px 0;
}

.action-btn {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 14px 28px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 0.95rem;
     cursor: pointer;
     transition: var(--transition);
     border: none;
     text-decoration: none;
}

.action-btn.primary {
     background: var(--gradient-primary);
     color: white;
     box-shadow: 0 8px 25px rgba(67, 97, 238, 0.3);
}

.action-btn.primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(67, 97, 238, 0.4);
}

.action-btn.secondary {
     background: var(--card-bg);
     color: var(--text-primary);
     box-shadow: var(--shadow);
     backdrop-filter: blur(10px);
}

.action-btn.secondary:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-hover);
     background: var(--gradient-accent);
     color: white;
}

.action-btn i {
     font-size: 1.1rem;
}

/* ========== FILTERS ENHANCED ========== */
.filters {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
     margin-bottom: 30px;
     padding: 0 20px;
}

.filter-group {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: center;
}

.filter-btn {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     background: var(--card-bg);
     border: 2px solid transparent;
     border-radius: 50px;
     cursor: pointer;
     transition: var(--transition);
     font-weight: 600;
     font-size: 0.85rem;
     color: var(--text-primary);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
}

.filter-btn:hover {
     border-color: var(--primary);
     transform: translateY(-2px);
}

.filter-btn.active {
     background: var(--gradient-primary);
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 25px rgba(67, 97, 238, 0.3);
}

.filter-btn i {
     font-size: 0.9rem;
}

/* ========== VIEW TOGGLE ========== */
.view-toggle {
     display: flex;
     background: var(--card-bg);
     border-radius: 50px;
     padding: 5px;
     box-shadow: var(--shadow);
     backdrop-filter: blur(10px);
}

.view-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 42px;
     height: 42px;
     background: transparent;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     transition: var(--transition);
     color: var(--text-secondary);
}

.view-btn:hover {
     color: var(--primary);
}

.view-btn.active {
     background: var(--gradient-primary);
     color: white;
     box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}

/* ========== LIST VIEW ========== */
.vouch-grid.list-view {
     display: flex;
     flex-direction: column;
     gap: 16px;
}

.vouch-grid.list-view .vouch-card {
     max-width: 100%;
     min-height: auto !important;
     height: auto !important;
     display: flex;
     flex-direction: column;
     border-radius: 20px;
     overflow: visible;
}

.vouch-grid.list-view .vouch-card .date-badge {
     position: absolute;
     top: 15px;
     left: 15px;
     transform: none;
     padding: 6px 12px;
     font-size: 0.75rem;
     border-radius: 8px;
     z-index: 5;
}

.vouch-grid.list-view .vouch-header {
     padding: 1rem 1.2rem;
     padding-left: 130px;
     background: linear-gradient(135deg, #00b894 0%, #00cec9 50%, #00d4aa 100%);
     min-height: 70px;
}

.vouch-grid.list-view .vouch-id {
     position: absolute;
     top: 15px;
     right: 15px;
     transform: none;
}

.vouch-grid.list-view .vouch-content {
     padding: 1rem 1.2rem;
     flex: 0 0 auto;
}

.vouch-grid.list-view .vouch-content .message-box {
     max-height: 120px;
     overflow: hidden;
}

.vouch-grid.list-view .vouch-footer {
     padding: 0.8rem 1.2rem;
     margin-top: auto;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.vouch-grid.list-view .verified-badge {
     position: absolute;
     bottom: 15px;
     right: 15px;
}

.vouch-grid.list-view .rating {
     padding: 0.6rem 1.2rem;
}

.vouch-grid.list-view .image-gallery {
     padding: 0 1.2rem 1rem;
}

.vouch-grid.list-view .image-gallery img {
     max-height: 80px;
}

/* ========== RESPONSIVE FOR NEW FEATURES ========== */
@media (max-width: 768px) {
     .floating-actions {
          top: 10px;
          right: 10px;
          gap: 6px;
          flex-direction: row;
     }

     .floating-actions .theme-toggle {
          width: 40px;
          height: 40px;
          font-size: 1rem;
     }

     .lang-toggle {
          padding: 8px 12px;
          min-width: auto;
     }

     .lang-text {
          display: none;
     }

     .lang-toggle i {
          font-size: 1rem;
     }

     .search-container {
          padding: 0 15px;
     }

     .search-input {
          padding: 14px 45px 14px 45px;
          font-size: 0.95rem;
     }

     .quick-actions {
          padding: 0 15px;
     }

     .action-btn {
          padding: 12px 20px;
          font-size: 0.9rem;
     }

     .action-btn span {
          display: none;
     }

     .action-btn i {
          font-size: 1.2rem;
     }

     .filters {
          gap: 10px;
     }

     .filter-btn {
          padding: 10px 16px;
          font-size: 0.8rem;
     }

     .filter-btn span {
          display: none;
     }

     .view-toggle {
          display: none;
     }

     .vouch-grid.list-view .vouch-card {
          border-radius: 16px;
     }

     .vouch-grid.list-view .vouch-header {
          padding-left: 1rem;
          padding-top: 2.5rem;
     }

     .vouch-grid.list-view .vouch-card .date-badge {
          top: 10px;
          left: 10px;
          font-size: 0.7rem;
          padding: 5px 10px;
     }

     .vouch-grid.list-view .vouch-id {
          top: 10px;
          right: 10px;
     }

     .vouch-grid.list-view .vouch-content {
          padding: 0.8rem 1rem;
     }
}

@media (max-width: 480px) {
     .lang-dropdown {
          min-width: 150px;
          right: -10px;
     }

     .quick-actions {
          gap: 10px;
     }

     .action-btn {
          padding: 10px 16px;
     }
}

/* ========== ANIMATION ENHANCEMENTS ========== */
@keyframes slideInFromRight {
     from {
          opacity: 0;
          transform: translateX(30px);
     }

     to {
          opacity: 1;
          transform: translateX(0);
     }
}

@keyframes bounceIn {
     0% {
          opacity: 0;
          transform: scale(0.3);
     }

     50% {
          transform: scale(1.05);
     }

     70% {
          transform: scale(0.9);
     }

     100% {
          opacity: 1;
          transform: scale(1);
     }
}

.floating-actions>* {
     animation: slideInFromRight 0.5s ease forwards;
}

.floating-actions>*:nth-child(1) {
     animation-delay: 0.1s;
}

.floating-actions>*:nth-child(2) {
     animation-delay: 0.2s;
}

.floating-actions>*:nth-child(3) {
     animation-delay: 0.3s;
}

.search-container {
     animation: bounceIn 0.6s ease forwards;
     animation-delay: 0.3s;
     opacity: 0;
}

body.loaded .search-container {
     opacity: 1;
}

/* ========== NO RESULTS STATE ========== */
.no-results {
     text-align: center;
     padding: 60px 20px;
     color: var(--text-secondary);
}

.no-results-icon {
     font-size: 4rem;
     margin-bottom: 20px;
     opacity: 0.5;
}

.no-results h3 {
     font-size: 1.5rem;
     margin-bottom: 10px;
     color: var(--text-primary);
}

.no-results p {
     font-size: 1rem;
     max-width: 400px;
     margin: 0 auto;
}

/* ========== HIGHLIGHT SEARCH MATCH ========== */
.highlight {
     background: linear-gradient(120deg, rgba(255, 193, 7, 0.3) 0%, rgba(255, 193, 7, 0.5) 100%);
     border-radius: 4px;
     padding: 0 2px;
}

.dark-theme .highlight {
     background: linear-gradient(120deg, rgba(255, 193, 7, 0.4) 0%, rgba(255, 193, 7, 0.6) 100%);
}

/**
 * Enhanced Features Styles for HQ Shop Vouch System
 */

/* ============================================
   User Profile Modal
   ============================================ */
.profile-modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(10px);
     z-index: 10000;
     opacity: 0;
     transition: opacity 0.3s ease;
}

.profile-modal.active {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 1;
}

.profile-modal-content {
     background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
     border-radius: 20px;
     padding: 2.5rem;
     max-width: 600px;
     width: 90%;
     max-height: 90vh;
     overflow-y: auto;
     position: relative;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
     border: 1px solid rgba(255, 255, 255, 0.1);
     animation: slideUp 0.3s ease;
}

@keyframes slideUp {
     from {
          transform: translateY(30px);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

.profile-close-btn {
     position: absolute;
     top: 1rem;
     right: 1rem;
     background: rgba(255, 255, 255, 0.1);
     border: none;
     color: #fff;
     font-size: 2rem;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
}

.profile-close-btn:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: rotate(90deg);
}

.profile-header {
     display: flex;
     align-items: center;
     gap: 1.5rem;
     margin-bottom: 2rem;
     padding-bottom: 1.5rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-avatar {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     border: 3px solid #4361ee;
     box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
}

.profile-info {
     flex: 1;
}

.profile-name {
     font-size: 1.8rem;
     font-weight: 700;
     color: #fff;
     margin: 0 0 0.5rem 0;
}

.profile-role {
     color: #b0b0c5;
     font-size: 1rem;
}

.profile-stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1rem;
     margin-bottom: 2rem;
}

.profile-stat-item {
     background: rgba(255, 255, 255, 0.05);
     padding: 1.5rem;
     border-radius: 12px;
     display: flex;
     align-items: center;
     gap: 1rem;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
}

.profile-stat-item:hover {
     background: rgba(255, 255, 255, 0.08);
     transform: translateY(-2px);
}

.profile-stat-item i {
     font-size: 1.5rem;
     color: #4361ee;
}

.profile-stat-content {
     flex: 1;
}

.profile-stat-value {
     font-size: 1.8rem;
     font-weight: 700;
     color: #fff;
}

.profile-stat-label {
     font-size: 0.85rem;
     color: #b0b0c5;
     margin-top: 0.25rem;
}

.profile-vouches-section h3 {
     color: #fff;
     font-size: 1.2rem;
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-vouches-list {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     max-height: 400px;
     overflow-y: auto;
     padding-right: 0.5rem;
}

/* Custom Scrollbar */
.profile-vouches-list::-webkit-scrollbar {
     width: 6px;
}

.profile-vouches-list::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
}

.profile-vouches-list::-webkit-scrollbar-thumb {
     background: rgba(67, 97, 238, 0.5);
     border-radius: 10px;
}

.profile-vouches-list::-webkit-scrollbar-thumb:hover {
     background: rgba(67, 97, 238, 0.7);
}

.profile-vouch-item {
     background: rgba(255, 255, 255, 0.05);
     padding: 1rem;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
}

.profile-vouch-item:hover {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(67, 97, 238, 0.5);
}

.profile-vouch-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 0.5rem;
}

.profile-vouch-product {
     font-weight: 600;
     color: #fff;
     font-size: 0.95rem;
}

.profile-vouch-date {
     color: #b0b0c5;
     font-size: 0.85rem;
}

.profile-vouch-rating {
     font-size: 0.9rem;
     margin-bottom: 0.5rem;
}

.profile-vouch-content {
     color: #d0d0e0;
     font-size: 0.9rem;
     line-height: 1.5;
}

.profile-loading,
.empty-state {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 3rem 1rem;
     color: #b0b0c5;
}

.profile-loading i,
.empty-state i {
     font-size: 3rem;
     margin-bottom: 1rem;
     opacity: 0.5;
}

/* ============================================
   Share Modal
   ============================================ */
.share-modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(5px);
     z-index: 9999;
     opacity: 0;
     transition: opacity 0.3s ease;
}

.share-modal.active {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 1;
}

.share-modal-content {
     background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
     border-radius: 20px;
     padding: 2rem;
     max-width: 400px;
     width: 90%;
     position: relative;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
     border: 1px solid rgba(255, 255, 255, 0.1);
     animation: scaleIn 0.3s ease;
}

@keyframes scaleIn {
     from {
          transform: scale(0.8);
          opacity: 0;
     }

     to {
          transform: scale(1);
          opacity: 1;
     }
}

.share-modal-content h3 {
     color: #fff;
     margin: 0 0 1.5rem 0;
     font-size: 1.5rem;
     text-align: center;
}

.share-buttons {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}

.share-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
     padding: 1rem;
     border: none;
     border-radius: 12px;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     color: #fff;
}

.share-btn.facebook {
     background: linear-gradient(135deg, #1877f2 0%, #165ed0 100%);
}

.share-btn.twitter {
     background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
}

.share-btn.copy {
     background: linear-gradient(135deg, #4361ee 0%, #3651ce 100%);
}

.share-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(67, 97, 238, 0.4);
}

.share-btn.success {
     background: linear-gradient(135deg, #26de81 0%, #20bf6b 100%);
}

.share-close {
     position: absolute;
     top: 1rem;
     right: 1rem;
     background: rgba(255, 255, 255, 0.1);
     border: none;
     color: #fff;
     font-size: 1.5rem;
     width: 35px;
     height: 35px;
     border-radius: 50%;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
}

.share-close:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: rotate(90deg);
}

/* ============================================
   Share Button in Vouch Card
   ============================================ */
.vouch-actions {
     display: flex;
     gap: 0.5rem;
     margin-top: 1rem;
     padding-top: 1rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.share-vouch-btn {
     flex: 1;
     background: rgba(67, 97, 238, 0.1);
     border: 1px solid rgba(67, 97, 238, 0.3);
     color: #4361ee;
     padding: 0.75rem;
     border-radius: 10px;
     font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
}

.share-vouch-btn:hover {
     background: rgba(67, 97, 238, 0.2);
     border-color: rgba(67, 97, 238, 0.5);
     transform: translateY(-2px);
}

/* ============================================
   Error States
   ============================================ */
.error-state-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 4rem 2rem;
     text-align: center;
     min-height: 400px;
}

.error-icon {
     font-size: 4rem;
     color: #ff6b6b;
     margin-bottom: 1.5rem;
     opacity: 0.8;
}

.error-title {
     color: #fff;
     font-size: 1.8rem;
     margin-bottom: 1rem;
}

.error-message {
     color: #b0b0c5;
     font-size: 1.1rem;
     margin-bottom: 2rem;
     max-width: 500px;
}

.error-retry-btn {
     background: linear-gradient(135deg, #4361ee 0%, #3651ce 100%);
     color: #fff;
     border: none;
     padding: 1rem 2rem;
     border-radius: 12px;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
}

.error-retry-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(67, 97, 238, 0.4);
}

/* ============================================
   Loading States
   ============================================ */
.loading-state {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 4rem 2rem;
     min-height: 400px;
}

.loading-state .spinner {
     width: 60px;
     height: 60px;
     border: 4px solid rgba(67, 97, 238, 0.2);
     border-top-color: #4361ee;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 1.5rem;
}

@keyframes spin {
     to {
          transform: rotate(360deg);
     }
}

.loading-state p {
     color: #b0b0c5;
     font-size: 1.1rem;
}

/* ============================================
   User Card Click Enhancement
   ============================================ */
.user-card {
     cursor: pointer;
     transition: all 0.3s ease;
}

.user-card:hover {
     transform: translateY(-2px);
     background: rgba(255, 255, 255, 0.05);
}

.user-card:focus {
     outline: 2px solid #4361ee;
     outline-offset: 2px;
}

/* ============================================
   Accessibility: Screen Reader Only
   ============================================ */
.sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0;
}

/* ============================================
   No Image Placeholder Enhancement
   ============================================ */
.no-image {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 3rem 2rem;
     background: rgba(67, 97, 238, 0.05);
     border: 2px dashed rgba(67, 97, 238, 0.3);
     border-radius: 12px;
     min-height: 180px;
}

.no-image i {
     font-size: 3rem;
     color: #4361ee;
     opacity: 0.6;
     margin-bottom: 1rem;
}

.no-image p {
     color: #b0b0c5;
     font-size: 1rem;
     font-weight: 600;
     margin: 0;
}

.no-image-sub {
     color: #8a8a9e;
     font-size: 0.85rem;
     margin-top: 0.5rem;
     display: block;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
     .profile-modal-content {
          padding: 1.5rem;
          max-height: 95vh;
     }

     .profile-header {
          flex-direction: column;
          text-align: center;
     }

     .profile-avatar {
          width: 70px;
          height: 70px;
     }

     .profile-name {
          font-size: 1.5rem;
     }

     .profile-stats {
          grid-template-columns: 1fr;
     }

     .share-modal-content {
          padding: 1.5rem;
     }

     .error-title {
          font-size: 1.5rem;
     }

     .error-message {
          font-size: 1rem;
     }
}

/* ============================================
   Dark Mode Specific Adjustments
   ============================================ */
body.light-mode .profile-modal-content,
body.light-mode .share-modal-content {
     background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
     border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .profile-name,
body.light-mode .profile-stat-value,
body.light-mode .error-title,
body.light-mode .share-modal-content h3 {
     color: #1e1e2e;
}

body.light-mode .profile-role,
body.light-mode .profile-stat-label,
body.light-mode .profile-vouch-date,
body.light-mode .error-message {
     color: #6a6a7e;
}

body.light-mode .profile-stat-item,
body.light-mode .profile-vouch-item {
     background: rgba(0, 0, 0, 0.03);
     border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .profile-stat-item:hover,
body.light-mode .profile-vouch-item:hover {
     background: rgba(0, 0, 0, 0.05);
}

/**
 * Mobile-specific enhancements for HQ Shop
 * Better touch interactions and responsive design
 */

/* ============================================
   Mobile-First Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {

     /* Vouch Grid */
     .vouch-grid {
          grid-template-columns: 1fr;
          gap: 1rem;
          padding: 0 0.5rem;
     }

     /* Vouch Card Touch Optimization */
     .vouch-card {
          margin: 0;
          touch-action: manipulation;
     }

     .vouch-header {
          flex-wrap: wrap;
          gap: 0.5rem;
     }

     .vouch-product {
          font-size: 0.9rem;
          flex: 1 1 100%;
     }

     .vouch-date {
          font-size: 0.8rem;
     }

     /* User Cards - Better Touch Targets */
     .vouch-users {
          flex-direction: column;
          gap: 0.75rem;
     }

     .user-card {
          min-height: 60px;
          padding: 0.75rem;
     }

     .vouch-arrow {
          transform: rotate(90deg);
          margin: 0.5rem 0;
     }

     /* Vouch Actions - Stacked on Mobile */
     .vouch-actions {
          flex-direction: column;
     }

     .share-vouch-btn {
          width: 100%;
          padding: 1rem;
          font-size: 1rem;
     }

     /* Stats Section */
     .stats {
          grid-template-columns: 1fr;
          gap: 1rem;
     }

     .stat-card {
          padding: 1.5rem;
     }

     /* Filters - Mobile Friendly */
     .filters {
          flex-direction: column;
          gap: 1rem;
     }

     .filter-group {
          flex-wrap: wrap;
          gap: 0.5rem;
     }

     .filter-btn {
          flex: 1 1 calc(50% - 0.25rem);
          min-width: 140px;
          font-size: 0.85rem;
          padding: 0.75rem 1rem;
     }

     .view-toggle {
          width: 100%;
          justify-content: center;
     }

     /* Search Bar */
     .search-box {
          padding: 0.75rem 1rem;
     }

     .search-input {
          font-size: 16px;
          /* Prevent zoom on iOS */
     }

     /* Header */
     .header {
          padding: 2rem 1rem;
     }

     .title {
          font-size: 1.8rem;
     }

     .subtitle {
          font-size: 0.95rem;
     }

     .logo-img {
          width: 120px;
          height: 120px;
     }

     /* Trust Indicators */
     .trust-indicators {
          flex-direction: column;
          gap: 0.75rem;
     }

     .trust-item {
          padding: 0.75rem 1rem;
     }

     /* Quick Actions */
     .quick-actions {
          flex-direction: column;
          gap: 0.75rem;
     }

     .action-btn {
          width: 100%;
          padding: 1rem;
     }

     /* Badges */
     .badges-container {
          gap: 0.5rem;
     }

     .badge-item {
          width: 35px;
          height: 35px;
     }

     .badge-item img {
          width: 24px !important;
          height: 24px !important;
     }

     /* Pagination */
     .pagination {
          gap: 0.25rem;
          flex-wrap: wrap;
     }

     .page-btn {
          min-width: 40px;
          height: 40px;
          font-size: 0.9rem;
     }

     /* Footer */
     .footer-content {
          flex-direction: column;
          gap: 2rem;
          text-align: center;
     }

     /* Profile Modal - Full Screen on Mobile */
     .profile-modal-content {
          width: 100%;
          height: 100vh;
          max-height: 100vh;
          border-radius: 0;
          padding: 1.5rem;
     }

     .profile-header {
          flex-direction: column;
          text-align: center;
     }

     .profile-stats {
          grid-template-columns: 1fr;
     }

     .profile-vouches-list {
          max-height: calc(100vh - 500px);
     }

     /* Share Modal */
     .share-modal-content {
          width: 95%;
          padding: 1.5rem;
     }

     .share-btn {
          padding: 1.25rem;
          font-size: 1.05rem;
     }

     /* Rating Filter Dropdown */
     .rating-dropdown {
          position: fixed;
          left: 50%;
          transform: translateX(-50%);
          width: calc(100% - 2rem);
          max-width: 300px;
     }

     .rating-dropdown.active {
          transform: translateX(-50%) translateY(0);
     }
}

/* ============================================
   Small Mobile Devices (< 480px)
   ============================================ */

@media (max-width: 480px) {
     .container {
          padding: 1rem 0.5rem;
     }

     .title {
          font-size: 1.5rem;
     }

     .subtitle {
          font-size: 0.85rem;
     }

     .vouch-card {
          padding: 1rem;
     }

     .vouch-content {
          padding: 1rem 0;
     }

     .vouch-text {
          font-size: 0.9rem;
     }

     .rating-stars {
          font-size: 1.1rem;
     }

     .user-name {
          font-size: 0.9rem;
     }

     .user-role {
          font-size: 0.75rem;
     }

     .stat-value {
          font-size: 2rem;
     }

     .stat-label {
          font-size: 0.75rem;
     }

     .filter-btn {
          min-width: 120px;
          padding: 0.625rem 0.75rem;
     }

     .error-title {
          font-size: 1.3rem;
     }

     .error-message {
          font-size: 0.9rem;
     }

     .profile-name {
          font-size: 1.3rem;
     }

     .profile-stat-value {
          font-size: 1.5rem;
     }
}

/* ============================================
   Tablet Landscape
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
     .vouch-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;
     }

     .stats {
          grid-template-columns: repeat(3, 1fr);
     }
}

/* ============================================
   Touch-Specific Enhancements
   ============================================ */

@media (hover: none) and (pointer: coarse) {

     /* Larger touch targets */
     .user-card {
          min-height: 64px;
          padding: 1rem;
     }

     .share-vouch-btn,
     .filter-btn,
     .action-btn {
          min-height: 48px;
     }

     /* Remove hover effects on touch devices */
     .vouch-card:hover,
     .user-card:hover,
     .share-vouch-btn:hover,
     .filter-btn:hover {
          transform: none;
     }

     /* Active states for touch feedback */
     .vouch-card:active {
          transform: scale(0.98);
     }

     .user-card:active,
     .share-vouch-btn:active,
     .filter-btn:active,
     .action-btn:active {
          transform: scale(0.95);
          opacity: 0.9;
     }

     /* Better scroll performance */
     .profile-vouches-list,
     .vouch-grid {
          -webkit-overflow-scrolling: touch;
          scroll-behavior: smooth;
     }
}

/* ============================================
   iOS Specific Fixes
   ============================================ */

@supports (-webkit-touch-callout: none) {

     /* Fix iOS input zoom */
     input,
     select,
     textarea {
          font-size: 16px !important;
     }

     /* Fix iOS modal positioning */
     .profile-modal,
     .share-modal {
          position: fixed;
          -webkit-overflow-scrolling: touch;
     }

     /* Fix iOS safe areas */
     @media (max-width: 768px) {
          .profile-modal-content {
               padding-top: max(1.5rem, env(safe-area-inset-top));
               padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
          }
     }

     /* Prevent iOS bounce scroll */
     .profile-modal-content,
     .share-modal-content {
          overscroll-behavior: contain;
     }
}

/* ============================================
   Accessibility - High Contrast Mode
   ============================================ */

@media (prefers-contrast: high) {

     .vouch-card,
     .profile-modal-content,
     .share-modal-content {
          border: 2px solid currentColor;
     }

     .filter-btn,
     .share-vouch-btn,
     .action-btn {
          border: 2px solid currentColor;
     }

     .user-card:focus,
     .share-vouch-btn:focus,
     .filter-btn:focus {
          outline: 3px solid currentColor;
          outline-offset: 3px;
     }
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {

     /* Only reduce specific UI animations, NOT background effects */
     .profile-modal,
     .share-modal,
     .vouch-card,
     .user-card,
     .share-vouch-btn {
          transition: none;
     }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {

     /* Hide UI elements not needed for print */
     .floating-actions,
     .discord-btn,
     .scroll-top-btn,
     .filters,
     .search-container,
     .vouch-actions,
     .share-vouch-btn,
     .profile-modal,
     .share-modal,
     .background-effects {
          display: none !important;
     }

     /* Optimize vouch cards for print */
     .vouch-grid {
          grid-template-columns: 1fr;
     }

     .vouch-card {
          page-break-inside: avoid;
          border: 1px solid #000;
          margin-bottom: 1rem;
     }

     /* Black & white optimization */
     body {
          background: white;
          color: black;
     }

     .vouch-card {
          background: white;
          box-shadow: none;
     }
}

/* ============================================
   Landscape Orientation (Mobile)
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
     .profile-modal-content {
          height: 100vh;
          overflow-y: auto;
     }

     .header {
          padding: 1.5rem 1rem;
     }

     .logo-img {
          width: 80px;
          height: 80px;
     }

     .title {
          font-size: 1.5rem;
     }

     .stats {
          grid-template-columns: repeat(3, 1fr);
     }
}

/* ============================================
   PWA Install Prompt (Optional)
   ============================================ */

.pwa-install-prompt {
     position: fixed;
     bottom: 1rem;
     left: 1rem;
     right: 1rem;
     background: linear-gradient(135deg, #4361ee 0%, #3651ce 100%);
     color: white;
     padding: 1rem;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     z-index: 9998;
     display: none;
     animation: slideInUp 0.5s ease;
}

.pwa-install-prompt.show {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
}

.pwa-install-prompt button {
     background: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: white;
     padding: 0.75rem 1.5rem;
     border-radius: 8px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     white-space: nowrap;
}

.pwa-install-prompt button:hover {
     background: rgba(255, 255, 255, 0.3);
}

@keyframes slideInUp {
     from {
          transform: translateY(100%);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

/* ============================================
   Loading Skeleton (Better UX)
   ============================================ */

.skeleton {
     background: linear-gradient(90deg,
               rgba(255, 255, 255, 0.05) 25%,
               rgba(255, 255, 255, 0.1) 50%,
               rgba(255, 255, 255, 0.05) 75%);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
     0% {
          background-position: 200% 0;
     }

     100% {
          background-position: -200% 0;
     }
}

.skeleton-card {
     width: 100%;
     height: 400px;
     border-radius: 12px;
}

.skeleton-text {
     height: 1rem;
     border-radius: 4px;
     margin-bottom: 0.5rem;
}

/* ============================================
   Offline Indicator
   ============================================ */

.offline-indicator {
     position: fixed;
     bottom: 1rem;
     left: 50%;
     transform: translateX(-50%);
     background: #ff6b6b;
     color: white;
     padding: 0.75rem 1.5rem;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
     z-index: 9999;
     display: none;
     font-weight: 600;
}

.offline-indicator.show {
     display: block;
     animation: pulse 2s infinite;
}

@keyframes pulse {

     0%,
     100% {
          opacity: 1;
     }

     50% {
          opacity: 0.7;
     }
}


/* ============================================
   CUSTOM FIXES & IMPROVEMENTS
   ============================================ */

/* Share Button - Compact */
.vouch-footer {
     display: flex !important;
     justify-content: space-between !important;
     align-items: center !important;
}

.share-vouch-btn {
     background: rgba(67, 97, 238, 0.1) !important;
     border: 1px solid rgba(67, 97, 238, 0.3) !important;
     color: #4361ee !important;
     padding: 0.5rem 0.75rem !important;
     border-radius: 8px !important;
     font-size: 1rem !important;
     cursor: pointer !important;
     transition: all 0.3s ease !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
}

.share-vouch-btn:hover {
     background: rgba(67, 97, 238, 0.2) !important;
     transform: scale(1.1) !important;
}

/* Rating Filter Dropdown - Fix z-index */
.rating-filter-container {
     position: relative;
     z-index: 100;
}

.rating-dropdown {
     position: absolute;
     top: calc(100% + 0.5rem);
     left: 0;
     background: #1e1e2e;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 0.5rem;
     min-width: 200px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     z-index: 999 !important;
}

.rating-dropdown.active {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}

.rating-option {
     width: 100%;
     padding: 0.75rem 1rem;
     background: transparent;
     border: none;
     color: #b0b0c5;
     text-align: left;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 0.9rem;
}

.rating-option:hover {
     background: rgba(67, 97, 238, 0.1);
     color: #fff;
}

.rating-option.active {
     background: rgba(67, 97, 238, 0.2);
     color: #4361ee;
     font-weight: 600;
}

/* Vouch Card Animation */
.vouch-card {
     animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
     from {
          opacity: 0;
          transform: translateY(20px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

.vouch-card:nth-child(1) {
     animation-delay: 0.05s;
}

.vouch-card:nth-child(2) {
     animation-delay: 0.1s;
}

.vouch-card:nth-child(3) {
     animation-delay: 0.15s;
}

.vouch-card:nth-child(4) {
     animation-delay: 0.2s;
}

.vouch-card:nth-child(5) {
     animation-delay: 0.25s;
}

.vouch-card:nth-child(6) {
     animation-delay: 0.3s;
}

.vouch-card:nth-child(7) {
     animation-delay: 0.35s;
}

.vouch-card:nth-child(8) {
     animation-delay: 0.4s;
}

/* Product info in header - Make it stand out */
.vouch-product {
     font-weight: 700 !important;
     font-size: 1rem !important;
     color: #4361ee !important;
}

/* Light mode fixes */
body.light-mode .rating-dropdown {
     background: #ffffff;
     border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .rating-option {
     color: #6a6a7e;
}

body.light-mode .rating-option:hover {
     background: rgba(67, 97, 238, 0.05);
     color: #1e1e2e;
}

/*
 * CRITICAL FIXES - Load sau tất cả
 * Fix z-index, spacing, animations
 */

/* ==================== FIX 1: Rating Filter Z-Index ==================== */
.filters {
     position: relative;
     z-index: 50 !important;
}

.rating-filter-container {
     position: relative;
     z-index: 100 !important;
}

.rating-dropdown {
     position: absolute !important;
     top: calc(100% + 0.5rem) !important;
     left: 0 !important;
     background: #1e1e2e !important;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
     border-radius: 12px !important;
     padding: 0.5rem !important;
     min-width: 220px !important;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
     opacity: 0 !important;
     visibility: hidden !important;
     transform: translateY(-10px) !important;
     transition: all 0.3s ease !important;
     z-index: 10000 !important;
}

.rating-dropdown.active {
     opacity: 1 !important;
     visibility: visible !important;
     transform: translateY(0) !important;
}

.rating-option {
     width: 100%;
     padding: 0.75rem 1rem;
     background: transparent;
     border: none;
     color: #b0b0c5;
     text-align: left;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 0.9rem;
     white-space: nowrap;
}

.rating-option:hover {
     background: rgba(67, 97, 238, 0.1);
     color: #fff;
}

.rating-option.active {
     background: rgba(67, 97, 238, 0.2);
     color: #4361ee;
     font-weight: 600;
}

#rating-filter-btn .fa-chevron-down {
     margin-left: 0.5rem;
     font-size: 0.8rem;
     transition: transform 0.3s ease;
}

/* ==================== FIX 2: Share Button Spacing ==================== */
.vouch-footer {
     display: flex !important;
     justify-content: space-between !important;
     align-items: center !important;
     gap: 1rem !important;
     padding: 1rem !important;
}

.share-vouch-btn {
     background: rgba(67, 97, 238, 0.1) !important;
     border: 1px solid rgba(67, 97, 238, 0.3) !important;
     color: #4361ee !important;
     padding: 0.6rem 1rem !important;
     border-radius: 8px !important;
     font-size: 1.1rem !important;
     cursor: pointer !important;
     transition: all 0.3s ease !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     min-width: 44px !important;
     min-height: 44px !important;
}

.share-vouch-btn:hover {
     background: rgba(67, 97, 238, 0.2) !important;
     border-color: rgba(67, 97, 238, 0.5) !important;
     transform: scale(1.1) !important;
}

.share-vouch-btn i {
     font-size: 1.1rem;
}

/* ==================== FIX 3: Vouch Card Animation ==================== */
.vouch-card {
     opacity: 0;
     transform: translateY(30px) scale(0.95);
     animation: fadeInUpScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes fadeInUpScale {
     0% {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
     }

     100% {
          opacity: 1;
          transform: translateY(0) scale(1);
     }
}

/* Stagger animations */
.vouch-card:nth-child(1) {
     animation-delay: 0s;
}

.vouch-card:nth-child(2) {
     animation-delay: 0.1s;
}

.vouch-card:nth-child(3) {
     animation-delay: 0.2s;
}

.vouch-card:nth-child(4) {
     animation-delay: 0.3s;
}

.vouch-card:nth-child(5) {
     animation-delay: 0.4s;
}

.vouch-card:nth-child(6) {
     animation-delay: 0.5s;
}

.vouch-card:nth-child(7) {
     animation-delay: 0.6s;
}

.vouch-card:nth-child(8) {
     animation-delay: 0.7s;
}

.vouch-card:nth-child(9) {
     animation-delay: 0.8s;
}

.vouch-card:nth-child(10) {
     animation-delay: 0.9s;
}

.vouch-card:nth-child(n+11) {
     animation-delay: 1s;
}

/* Hover effect */
.vouch-card:hover {
     transform: translateY(-5px) !important;
     box-shadow: 0 10px 30px rgba(67, 97, 238, 0.3) !important;
}

/* ==================== FIX 4: Product Name Styling ==================== */
.vouch-product {
     font-weight: 700 !important;
     font-size: 1.05rem !important;
     color: #4361ee !important;
     text-decoration: none !important;
}

/* ==================== FIX 5: Profile Modal Stats ==================== */
.profile-stat-value {
     font-size: 2rem !important;
     font-weight: 700 !important;
     color: #fff !important;
     line-height: 1 !important;
}

.profile-stat-label {
     font-size: 0.85rem !important;
     color: #b0b0c5 !important;
     margin-top: 0.25rem !important;
}

/* ==================== FIX 6: Light Mode Support ==================== */
body.light-mode .rating-dropdown {
     background: #ffffff !important;
     border-color: rgba(0, 0, 0, 0.1) !important;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

body.light-mode .rating-option {
     color: #6a6a7e;
}

body.light-mode .rating-option:hover {
     background: rgba(67, 97, 238, 0.05);
     color: #1e1e2e;
}

body.light-mode .rating-option.active {
     background: rgba(67, 97, 238, 0.1);
     color: #4361ee;
}

/* ==================== FIX 7: Mobile Responsive ==================== */
@media (max-width: 768px) {
     .rating-dropdown {
          left: auto !important;
          right: 0 !important;
          min-width: 200px !important;
     }

     .share-vouch-btn {
          padding: 0.5rem !important;
          min-width: 40px !important;
          min-height: 40px !important;
          font-size: 1rem !important;
     }

     .vouch-card {
          animation-delay: 0s !important;
     }
}

/* ==================== FIX 8: Grid Container ==================== */
.vouch-grid {
     position: relative;
     z-index: 1 !important;
}

/* ==================== FIX 9: Loading State ==================== */
.vouch-card.loading {
     opacity: 0.5;
     pointer-events: none;
}

/* ==================== FIX 10: Smooth Transitions ==================== */
* {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

.vouch-card,
.share-vouch-btn,
.rating-dropdown,
.filter-btn {
     will-change: transform, opacity;
}

/**
 * ULTIMATE FIXES - Final polish
 * 1. Product name styling
 * 2. Page loader
 * 3. Scroll reveal animations
 */

/* ==================== FIX 1: Product Name Super Visible ==================== */
.vouch-product {
     font-weight: 800 !important;
     font-size: 1.15rem !important;
     color: #4361ee !important;
     background: linear-gradient(135deg, #4361ee 0%, #3651ce 100%) !important;
     -webkit-background-clip: text !important;
     -webkit-text-fill-color: transparent !important;
     background-clip: text !important;
     text-shadow: 0 0 20px rgba(67, 97, 238, 0.3) !important;
     letter-spacing: 0.3px !important;
     position: relative !important;
     display: inline-block !important;
     padding: 0.25rem 0.5rem !important;
}

.vouch-product::before {
     content: '📦 ';
     -webkit-text-fill-color: initial !important;
     background: none !important;
     margin-right: 0.25rem;
}

.vouch-product::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, #4361ee, #3651ce);
     border-radius: 2px;
     opacity: 0.5;
}

/* ==================== FIX 2: Professional Page Loader ==================== */
.page-loader {
     position: fixed;
     inset: 0;
     width: 100vw;
     height: 100vh;
     min-height: 100%;
     background: radial-gradient(circle at center, #1b1b29 0%, #11111a 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     z-index: 999999;
     transition: opacity 0.6s cubic-bezier(0.8, 0, 0.2, 1), visibility 0.6s cubic-bezier(0.8, 0, 0.2, 1), filter 0.6s ease;
     overflow: hidden;
}

.page-loader.loaded {
     opacity: 0;
     visibility: hidden;
     filter: blur(10px);
     pointer-events: none;
}

.loader-bg-glow {
     position: absolute;
     width: 60vh;
     height: 60vh;
     background: radial-gradient(circle, rgba(67,97,238,0.15) 0%, transparent 70%);
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse-bg 4s ease-in-out infinite alternate;
     z-index: 0;
}

@keyframes pulse-bg {
     0% { transform: scale(0.8); opacity: 0.5; }
     100% { transform: scale(1.2); opacity: 1; }
}

.loader-content {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     position: relative;
     z-index: 1;
}

.loader-logo {
     width: 140px;
     height: 140px;
     margin-bottom: 2.5rem;
     border-radius: 50%;
     box-shadow: 0 0 30px rgba(67, 97, 238, 0.4), 0 0 60px rgba(67, 97, 238, 0.2);
     animation: float-logo 4s ease-in-out infinite;
     border: 2px solid rgba(255, 255, 255, 0.1);
}

@keyframes float-logo {
     0%, 100% {
          transform: translateY(0) scale(1);
          filter: drop-shadow(0 0 20px rgba(67, 97, 238, 0.6));
     }
     50% {
          transform: translateY(-15px) scale(1.03);
          filter: drop-shadow(0 20px 40px rgba(67, 97, 238, 0.9));
     }
}

/* CRITICAL: Lock scroll on BOTH html and body while loading */
html:has(.page-loader:not(.loaded)),
body:has(.page-loader:not(.loaded)) {
     overflow: hidden !important;
     height: 100vh !important;
}

/* Modern Multi-ring spinner */
.loader-spinner {
     width: 60px;
     height: 60px;
     margin: 1rem auto 2.5rem;
     position: relative;
}

.loader-spinner::before,
.loader-spinner::after {
     content: '';
     position: absolute;
     border-radius: 50%;
     border: 3px solid transparent;
}

.loader-spinner::before {
     inset: 0;
     border-top-color: #4361ee;
     border-right-color: rgba(67, 97, 238, 0.3);
     animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
     box-shadow: 0 0 20px rgba(67, 97, 238, 0.5);
}

.loader-spinner::after {
     inset: 10px;
     border-bottom-color: #06d6a0;
     border-left-color: rgba(6, 214, 160, 0.3);
     animation: spin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite reverse;
}

@keyframes spin {
     to { transform: rotate(360deg); }
}

/* Base Stars Background used in loading */
#stars {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow: hidden;
     pointer-events: none;
}

.star {
     position: absolute;
     background: #fff;
     border-radius: 50%;
     animation: twinkle 3s ease-in-out infinite;
     box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

@keyframes twinkle {
     0%, 100% { opacity: 0.3; transform: scale(1); }
     50% { opacity: 1; transform: scale(1.2); }
}

.loader-text {
     color: #fff;
     font-size: 1.4rem;
     font-weight: 700;
     letter-spacing: 2px;
     margin-bottom: 0.5rem;
     text-transform: uppercase;
     background: linear-gradient(90deg, #fff, #b0b0c5, #fff);
     background-size: 200% auto;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: gradient-text 2s linear infinite;
}

@keyframes gradient-text {
     0% { background-position: 0% center; }
     100% { background-position: 200% center; }
}

.loader-subtext {
     color: #8c8cbd;
     font-size: 1rem;
     font-weight: 500;
     letter-spacing: 1px;
}

.loader-progress {
     width: 250px;
     height: 6px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
     margin: 2.5rem auto 0;
     overflow: hidden;
     position: relative;
     box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
     border: 1px solid rgba(255, 255, 255, 0.1);
}

.loader-progress-bar {
     height: 100%;
     background: linear-gradient(90deg, #4361ee, #06d6a0, #4361ee);
     background-size: 200% 100%;
     /* Width is now controlled dynamically via inline style in JS */
     width: 0%;
     transition: width 0.3s ease;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(67, 97, 238, 0.8);
}

/* ==================== FIX 3: Scroll Reveal Animation ==================== */
.vouch-card {
     opacity: 0;
     transform: translateY(50px) scale(0.9);
     transition: none;
}

.vouch-card.reveal {
     animation: revealCard 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes revealCard {
     0% {
          opacity: 0;
          transform: translateY(50px) scale(0.9);
     }

     100% {
          opacity: 1;
          transform: translateY(0) scale(1);
     }
}

/* Stagger delays for revealed cards */
.vouch-card.reveal:nth-child(1) {
     animation-delay: 0s;
}

.vouch-card.reveal:nth-child(2) {
     animation-delay: 0.1s;
}

.vouch-card.reveal:nth-child(3) {
     animation-delay: 0.15s;
}

.vouch-card.reveal:nth-child(4) {
     animation-delay: 0.2s;
}

.vouch-card.reveal:nth-child(5) {
     animation-delay: 0.25s;
}

.vouch-card.reveal:nth-child(6) {
     animation-delay: 0.3s;
}

.vouch-card.reveal:nth-child(7) {
     animation-delay: 0.35s;
}

.vouch-card.reveal:nth-child(8) {
     animation-delay: 0.4s;
}

.vouch-card.reveal:nth-child(9) {
     animation-delay: 0.45s;
}

/* Smooth hover when revealed */
.vouch-card.reveal:hover {
     transform: translateY(-8px) scale(1.02) !important;
     box-shadow: 0 15px 40px rgba(67, 97, 238, 0.4) !important;
}

/* ==================== FIX 4: Stats Counter Animation ==================== */
.stat-value {
     font-variant-numeric: tabular-nums;
     transition: all 0.3s ease;
}

/* ==================== FIX 5: Header Fade In ==================== */
.header,
.stats,
.search-container,
.filters {
     opacity: 0;
     transform: translateY(20px);
     animation: fadeInDown 0.8s ease forwards;
}

.stats {
     animation-delay: 0.1s;
}

.search-container {
     animation-delay: 0.2s;
}

.filters {
     animation-delay: 0.3s;
}

@keyframes fadeInDown {
     to {
          opacity: 1;
          transform: translateY(0);
     }
}

/* ==================== FIX 6: Light Mode Support ==================== */
body.light-mode .page-loader {
     background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
}

body.light-mode .loader-text {
     color: #1e1e2e;
}

body.light-mode .loader-subtext {
     color: #6a6a7e;
}

body.light-mode .vouch-product {
     text-shadow: 0 0 20px rgba(67, 97, 238, 0.2) !important;
}

/* ==================== FIX 7: Mobile Optimizations ==================== */
@media (max-width: 768px) {
     .vouch-product {
          font-size: 1rem !important;
     }

     .loader-logo {
          width: 80px;
          height: 80px;
     }

     .loader-text {
          font-size: 1rem;
     }

     .loader-progress {
          width: 150px;
     }
}

/* ==================== FIX 8: Reduce Motion Support ==================== */
@media (prefers-reduced-motion: reduce) {

     /* Page loader - disable animations but still allow hiding */
     .page-loader {
          animation: none !important;
          transition: opacity 0.3s ease, visibility 0.3s ease !important;
     }

     /* Page loader when loaded - MUST hide */
     .page-loader.loaded {
          opacity: 0 !important;
          visibility: hidden !important;
          pointer-events: none !important;
     }

     /* Content elements - show immediately without animation */
     .vouch-card,
     .header,
     .stats,
     .search-container,
     .filters {
          animation: none !important;
          transition: none !important;
          /* CRITICAL: Ensure visibility when animations are disabled */
          opacity: 1 !important;
          transform: none !important;
     }

}

/* ==================== Effects Toggle Button ==================== */
.effects-toggle {
     position: fixed;
     top: calc(60px + 60px + 10px);
     /* Below theme toggle */
     right: 20px;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     border: none;
     background: linear-gradient(135deg, #4361ee 0%, #764ba2 100%);
     color: #fff;
     cursor: pointer;
     z-index: 9998;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
     transition: all 0.3s ease;
}

.effects-toggle:hover {
     transform: scale(1.1) rotate(15deg);
     box-shadow: 0 6px 20px rgba(67, 97, 238, 0.6);
}

.effects-toggle.off {
     background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
     box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
}

.effects-toggle.off i {
     opacity: 0.6;
}

/* When effects are OFF - Kill ALL animations and hide background */
body.effects-off .background-effects {
     opacity: 0 !important;
     visibility: hidden !important;
     pointer-events: none !important;
}

body.effects-off *,
body.effects-off *::before,
body.effects-off *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
}

/* EXCEPTION: Loading spinner must ALWAYS animate */
body.effects-off .loader-spinner {
     animation: spin 1s linear infinite !important;
}

/* EXCEPTION: Progress bar must ALWAYS animate */
body.effects-off .loader-progress-bar {
     animation: progress-slide 1.5s ease-in-out infinite !important;
}

/* Keep page loader working even when effects are off */
body.effects-off .page-loader {
     opacity: 1;
     visibility: visible;
     transition: opacity 0.5s ease, visibility 0.5s ease !important;
}

body.effects-off .page-loader.loaded {
     opacity: 0 !important;
     visibility: hidden !important;
}

/* ========================================
   LIGHT MODE SPECIFIC STYLES
   Thêm vào cuối file style.css
======================================== */

/* ========== 2. VOUCH CARDS - LIGHT MODE ========== */
/* Border: Thêm viền đen mờ để tách card khỏi background */
/* Shadow: Tăng độ đậm giúp card nổi bật hơn */
body:not(.dark-theme) .vouch-card {
     background: rgba(255, 255, 255, 0.98);
     border: 2px solid rgba(0, 0, 0, 0.08);
     box-shadow:
          0 10px 40px rgba(0, 0, 0, 0.12),
          0 4px 15px rgba(0, 0, 0, 0.08),
          0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}

body:not(.dark-theme) .vouch-card:hover {
     border-color: rgba(67, 97, 238, 0.25);
     box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.15),
          0 8px 30px rgba(67, 97, 238, 0.2),
          0 0 0 1px rgba(67, 97, 238, 0.1) inset;
}

/* Header gradient: Giữ xanh đậm để "Sản phẩm" nổi bật */
body:not(.dark-theme) .vouch-header {
     background: linear-gradient(135deg, #4361ee 0%, #3651ce 50%, #5a75ff 100%);
     box-shadow: 0 4px 15px rgba(67, 97, 238, 0.25);
}

/* Product name: Không có background, hiển thị cùng màu với thanh card */
body:not(.dark-theme) .vouch-product {
     color: #ffffff !important;
     font-weight: 800 !important;
     font-size: 1.15rem !important;
     text-shadow:
          0 2px 8px rgba(0, 0, 0, 0.4),
          0 1px 4px rgba(0, 0, 0, 0.3) !important;
     letter-spacing: 0.3px;
     /* Bỏ hết background */
     background: none !important;
     background-image: none !important;
     background-clip: unset !important;
     -webkit-background-clip: unset !important;
     -webkit-text-fill-color: #ffffff !important;
}

body:not(.dark-theme) .vouch-date {
     color: rgba(255, 255, 255, 0.95);
     font-weight: 600;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ========== 3. FILTER BUTTONS - LIGHT MODE ========== */
/* Default: Màu trắng với viền và shadow rõ ràng */
body:not(.dark-theme) .filter-btn {
     background: rgba(255, 255, 255, 0.95);
     color: #1e293b;
     border: 2px solid rgba(0, 0, 0, 0.08);
     box-shadow:
          0 4px 15px rgba(0, 0, 0, 0.08),
          0 2px 8px rgba(0, 0, 0, 0.05);
}

body:not(.dark-theme) .filter-btn i {
     color: #4361ee;
     transition: color 0.3s ease;
}

/* Hover: Gradient xanh với text trắng */
body:not(.dark-theme) .filter-btn:hover {
     background: linear-gradient(135deg, #4361ee, #3651ce);
     color: #ffffff;
     border-color: transparent;
     box-shadow:
          0 8px 25px rgba(67, 97, 238, 0.35),
          0 4px 15px rgba(67, 97, 238, 0.25);
}

body:not(.dark-theme) .filter-btn:hover i {
     color: #ffffff;
}

/* Active: Gradient xanh đậm với shadow để nhận biết */
body:not(.dark-theme) .filter-btn.active {
     background: linear-gradient(135deg, #4361ee, #3651ce);
     color: #ffffff;
     border-color: transparent;
     box-shadow:
          0 10px 30px rgba(67, 97, 238, 0.4),
          0 4px 15px rgba(67, 97, 238, 0.3),
          0 0 0 3px rgba(67, 97, 238, 0.1);
}

body:not(.dark-theme) .filter-btn.active i {
     color: #ffffff;
}

/* ========== 4. USER CARDS - LIGHT MODE ========== */
/* Background xám nhạt và viền để tách khỏi card chính */
body:not(.dark-theme) .user-card {
     background: rgba(0, 0, 0, 0.03);
     border: 1px solid rgba(0, 0, 0, 0.06);
}

body:not(.dark-theme) .user-card:hover {
     background: rgba(0, 0, 0, 0.06);
     border-color: rgba(0, 0, 0, 0.1);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body:not(.dark-theme) .user-name {
     color: #1e293b;
     font-weight: 600;
}

body:not(.dark-theme) .user-role {
     color: #64748b;
}

body:not(.dark-theme) .user-avatar {
     border: 2px solid rgba(67, 97, 238, 0.2);
     box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
}

body:not(.dark-theme) .user-card:hover .user-avatar {
     border-color: rgba(67, 97, 238, 0.4);
     box-shadow: 0 6px 18px rgba(67, 97, 238, 0.25);
}

/* ========== BONUS FIXES ========== */
body:not(.dark-theme) .vouch-content {
     background: rgba(0, 0, 0, 0.02);
     border: 1px solid rgba(0, 0, 0, 0.05);
}

body:not(.dark-theme) .vouch-text {
     color: #334155;
}

body:not(.dark-theme) .vouch-footer {
     background: rgba(248, 250, 252, 0.8);
     border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body:not(.dark-theme) .vouch-id {
     color: #4361ee;
     background: rgba(67, 97, 238, 0.1);
}

body.dark-theme .vouch-product {
     color: #ffffff !important;
     font-weight: 800 !important;
     font-size: 1.15rem !important;
     text-shadow:
          0 2px 8px rgba(0, 0, 0, 0.4),
          0 1px 4px rgba(0, 0, 0, 0.3) !important;
     letter-spacing: 0.3px;
     /* Bỏ hết background */
     background: none !important;
     background-image: none !important;
     background-clip: unset !important;
     -webkit-background-clip: unset !important;
     -webkit-text-fill-color: #ffffff !important;
}

body:not(.dark-theme) .trust-item i {
     color: #5c6bc0 !important;
}

body:not(.dark-theme) .trust-item:hover {
     color: #fff !important;
}

body:not(.dark-theme) .trust-item:hover i {
     color: #fff !important;
}