@tailwind base;@tailwind components;@tailwind utilities;:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@layer utilities{.animate-bounce-x{animation:bounce-x .75s infinite}}@layer base{:root{--background: 0 0% 100%;--foreground: 0 0% 3.9%;--card: 0 0% 100%;--card-foreground: 0 0% 3.9%;--popover: 0 0% 100%;--popover-foreground: 0 0% 3.9%;--primary: 0 0% 9%;--primary-foreground: 0 0% 98%;--secondary: 0 0% 96.1%;--secondary-foreground: 0 0% 9%;--muted: 0 0% 96.1%;--muted-foreground: 0 0% 45.1%;--accent: 0 0% 96.1%;--accent-foreground: 0 0% 9%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 0 0% 89.8%;--input: 0 0% 89.8%;--ring: 0 0% 3.9%;--chart-1: 12 76% 61%;--chart-2: 173 58% 39%;--chart-3: 197 37% 24%;--chart-4: 43 74% 66%;--chart-5: 27 87% 67%;--radius: .5rem}.dark{--background: 0 0% 3.9%;--foreground: 0 0% 98%;--card: 0 0% 3.9%;--card-foreground: 0 0% 98%;--popover: 0 0% 3.9%;--popover-foreground: 0 0% 98%;--primary: 0 0% 98%;--primary-foreground: 0 0% 9%;--secondary: 0 0% 14.9%;--secondary-foreground: 0 0% 98%;--muted: 0 0% 14.9%;--muted-foreground: 0 0% 63.9%;--accent: 0 0% 14.9%;--accent-foreground: 0 0% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 0 0% 98%;--border: 0 0% 14.9%;--input: 0 0% 14.9%;--ring: 0 0% 83.1%;--chart-1: 220 70% 50%;--chart-2: 160 60% 45%;--chart-3: 30 80% 55%;--chart-4: 280 65% 60%;--chart-5: 340 75% 55%}}@layer base{*{@apply border-border;}body{@apply bg-background text-foreground;}}@keyframes gradient-xy{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes tilt{0%,50%,to{transform:rotate(0)}25%{transform:rotate(.5deg)}75%{transform:rotate(-.5deg)}}.animate-gradient-xy{animation:gradient-xy 15s ease infinite;background-size:400% 400%}.animate-tilt{animation:tilt 10s infinite linear}.premium-role{position:relative;display:inline-flex;align-items:center;font-weight:600;padding:.15rem .5rem;border-radius:4px;overflow:hidden;transition:all .3s ease}.free-tier{color:#8b7355}.bronze-tier{color:transparent;background:linear-gradient(45deg,#cd7f32,orange,#cd7f32);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:gradientShift 3s ease infinite,shimmer 2.5s infinite;text-shadow:0 0 10px rgba(205,127,50,.3)}.silver-tier{color:transparent;background:linear-gradient(45deg,silver,#e8e8e8,#a9a9a9);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:gradientShift 3s ease infinite,shimmer 2.5s infinite;text-shadow:0 0 10px rgba(192,192,192,.3);filter:drop-shadow(0 0 1px rgba(255,255,255,.5))}.gold-tier{color:transparent;background:linear-gradient(45deg,#b8860b,gold,#daa520);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:gradientShift 3s ease infinite,shimmer 2s infinite;text-shadow:0 0 10px rgba(255,215,0,.4);filter:drop-shadow(0 0 2px rgba(255,215,0,.5))}.frands-tier{color:transparent;background:linear-gradient(45deg,#dc143c,#c21807,#8b0000);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:gradientShift 3s ease infinite,shimmer 2s infinite;text-shadow:0 0 10px rgba(220,20,60,.4);filter:drop-shadow(0 0 2px rgba(139,0,0,.5))}.frands-tier .sparkle-particle{background-image:radial-gradient(circle,#FF3030 10%,transparent 70%);filter:drop-shadow(0 0 5px rgba(220,20,60,.8))}.platinum-tier{color:transparent;background:linear-gradient(45deg,#a259ff,#7b2cbf,#5f0f40);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:gradientShift 3s ease infinite;text-shadow:0 0 10px rgba(225,0,255,.4);filter:drop-shadow(0 0 3px rgba(255,0,247,.6));letter-spacing:.5px}.role-aura{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:120%;border-radius:50%;z-index:-1;opacity:.2;animation:pulse 3s ease-in-out infinite;pointer-events:none}.premium-sparkles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}.sparkle-particle{position:absolute;width:var(--size);height:var(--size);top:var(--top);left:var(--left);background-image:radial-gradient(circle,white 10%,transparent 70%);border-radius:50%;opacity:0;animation:sparkleFloat var(--duration) ease-in-out infinite;animation-delay:var(--delay);pointer-events:none;z-index:10}.staff-tier{color:transparent;background:linear-gradient(45deg,#1e90ff,#3a8dff,#a7d7ff);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:gradientShift 3s ease infinite,shimmer 2.5s infinite;text-shadow:0 0 10px rgba(30,144,255,.4);filter:drop-shadow(0 0 2px rgba(58,141,255,.6))}.staff-tier .sparkle-particle{background-image:radial-gradient(circle,#3A8DFF 10%,transparent 70%);filter:drop-shadow(0 0 5px rgba(58,141,255,.8))}.bronze-tier .sparkle-particle{background-image:radial-gradient(circle,#FFA500 10%,transparent 70%)}.silver-tier .sparkle-particle{background-image:radial-gradient(circle,#E8E8E8 10%,transparent 70%)}.gold-tier .sparkle-particle{background-image:radial-gradient(circle,#FFD700 10%,transparent 70%)}.premium-role.platinum-tier .sparkle-particle{background-image:radial-gradient(circle,rgb(174,0,255) 10%,transparent 70%);filter:drop-shadow(0 0 5px rgba(137,207,240,.8))}.premium-role:hover{transform:translateY(-1px) scale(1.05);filter:brightness(1.2)}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes shimmer{0%{opacity:.8}50%{opacity:1}to{opacity:.8}}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.9);opacity:.1}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.3}to{transform:translate(-50%,-50%) scale(.9);opacity:.1}}@keyframes sparkleFloat{0%{transform:translate(0) scale(.2) rotate(0);opacity:0}25%{opacity:1}50%{transform:translate(10px,-15px) scale(1) rotate(180deg);opacity:.8}to{transform:translate(20px,-30px) scale(.2) rotate(360deg);opacity:0}}.premium-role:not(.free-tier):hover:before{content:"";position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 70%);border-radius:50%;transform:scale(0);animation:roleRipple 1s ease-out}@keyframes roleRipple{0%{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes bounce-x{0%,to{transform:translate(0)}50%{transform:translate(3px)}}