.default{background:var(--color);color:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a,0 6px 8px -2px #0000001a}.default:hover{transform:translateY(-2px);box-shadow:0 6px 8px #00000026,0 8px 16px -4px #0003}.default:active{transform:translateY(0);box-shadow:0 3px 5px #00000026,0 4px 10px -2px #0003}.rounded{background:var(--color);color:#fff;border-radius:32px;box-shadow:0 3px 6px #0000001a,0 6px 12px -2px #00000026}.rounded:hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000026,0 10px 18px -4px #0003}.rounded:active{transform:translateY(0);box-shadow:0 4px 8px #00000026,0 6px 12px -2px #0003}.gradient{background:linear-gradient(135deg,var(--color)0%,color-mix(in srgb,var(--color)60%,black)100%);color:#fff;box-shadow:0 4px 8px #0000001a,0 6px 12px -2px #00000026,inset 0 -2px 0 color-mix(in srgb,var(--color)70%,black);border-radius:8px}.gradient:hover{background:linear-gradient(135deg,var(--color)0%,color-mix(in srgb,var(--color)50%,black)100%);box-shadow:0 6px 10px #00000026,0 8px 16px -4px #00000040,inset 0 -2px 0 color-mix(in srgb,var(--color)70%,black);transform:translateY(-2px)}.gradient:active{background:linear-gradient(135deg,color-mix(in srgb,var(--color)80%,black)0%,var(--color)100%);box-shadow:0 3px 6px #00000026,0 5px 10px -2px #0003,inset 0 -2px 0 color-mix(in srgb,var(--color)70%,black);transform:translateY(0)}.wave{z-index:1;color:#fff;background:#000;border-radius:8px;overflow:hidden}.wave:before,.wave:after{color:#fff;z-index:-1;width:100%;height:100%;position:absolute;inset:0}.wave:before{content:"";background:var(--color);color:#fff;width:120%;transition:transform .4s cubic-bezier(.3,1,.8,1);left:-10%;transform:skew(30deg)}.wave:hover{color:var(--color);transform:translateY(-2px)}.wave:hover:before{transform:translate(100%)}.wave:active{transform:translateY(2px)}.fold{background-color:var(--color);color:#fff;border-radius:8px;box-shadow:.5em .5em .5em #0000004f}.fold:before{content:"";background:linear-gradient(135deg,#fff 0%,#fff 50%,rgba(var(--color-rgb),1)50%,rgba(var(--color-rgb),1)60%);border-radius:0 0 .5em;width:0;height:0;transition-duration:.2s;position:absolute;inset:0;box-shadow:.2em .2em .2em #0000004f}.fold:hover:before{width:1.2em;height:1.2em}.fold:active{scale:.95}.pop{background:var(--color);color:#fff;box-shadow:0 0 0 2px rgba(var(--color-rgb),.3),3px 6px 0 0 color-mix(in srgb,var(--color)70%,black),6px 12px 15px #0003;border-radius:12px;transition:all .2s cubic-bezier(.4,0,.2,1);transform:perspective(500px)translateZ(0)translateY(1px)}.pop:hover{box-shadow:0 0 0 2px rgba(var(--color-rgb),.4),4px 8px 0 0 color-mix(in srgb,var(--color)70%,black),10px 16px 20px #0000004d;transform:perspective(500px)translateZ(6px)translateY(-2px)}.pop:active{box-shadow:0 0 0 2px rgba(var(--color-rgb),.3),2px 4px 0 0 color-mix(in srgb,var(--color)70%,black),4px 8px 10px #0003;transform:perspective(500px)translateZ(-4px)translateY(0)}.outline{border:2px solid var(--color);color:var(--color);box-shadow:0 0 0 2px rgba(var(--color-rgb),.1);background:0 0;border-radius:8px;transition:all .3s}.outline:hover{box-shadow:0 0 0 4px rgba(var(--color-rgb),.2),0 4px 8px #00000026;transform:translateY(-4px)}.outline:active{box-shadow:0 0 0 3px rgba(var(--color-rgb),.3),0 2px 4px #0003;transform:translateY(0)}.glow{border:2px solid var(--color);color:var(--color);box-shadow:0 0 0 0 rgba(var(--color-rgb),.3);background:0 0;border-radius:8px;animation:2s ease-in-out infinite pulse}.glow:hover{background:var(--color);color:#fff;box-shadow:0 0 0 4px rgba(var(--color-rgb),.3),0 0 20px rgba(var(--color-rgb),.6);transform:translateY(-2px)}.glow:active{box-shadow:0 0 0 4px rgba(var(--color-rgb),.5),0 0 15px rgba(var(--color-rgb),.7);transform:translateY(0)}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--color-rgb),.3)}70%{box-shadow:0 0 0 10px rgba(var(--color-rgb),0)}to{box-shadow:0 0 0 0 rgba(var(--color-rgb),0)}}.neon{border:2px solid var(--color);background:rgba(var(--color-rgb),.1);color:var(--color);text-shadow:0 0 8px rgba(var(--color-rgb),.5),0 0 16px rgba(var(--color-rgb),.4);box-shadow:0 0 5px rgba(var(--color-rgb),.2),0 0 10px rgba(var(--color-rgb),.3),0 0 15px rgba(var(--color-rgb),.4),0 0 20px rgba(var(--color-rgb),.5);border-radius:8px}.neon:hover{background:var(--color);color:#fff;text-shadow:0 0 8px #fff,0 0 16px #fff;box-shadow:0 0 5px rgba(var(--color-rgb),.5),0 0 10px rgba(var(--color-rgb),.6),0 0 15px rgba(var(--color-rgb),.7),0 0 20px rgba(var(--color-rgb),.8);transform:translateY(-2px)}.neon:active{box-shadow:0 0 5px rgba(var(--color-rgb),.7),0 0 10px rgba(var(--color-rgb),.8),0 0 15px rgba(var(--color-rgb),1),0 0 20px rgba(var(--color-rgb),1);transform:translateY(0)}.liquid{z-index:1;border:2px solid var(--color);color:var(--color);background:0 0;border-radius:8px;overflow:hidden}.liquid:before{content:"";z-index:-1;background:var(--color);transform-origin:bottom;transition:transform .3s;position:absolute;inset:0;transform:scaleY(0)}.liquid:hover{color:#fff}.liquid:hover:before{transform:scaleY(1)}.liquid:active{transform:translateY(2px)}.retro{z-index:1;border:2px solid var(--color);color:var(--color);background:0 0;border-radius:8px;width:100%;overflow:hidden}.retro:before{z-index:-1;content:"";background:var(--color);width:0;height:800%;transition:all .5s;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.retro:hover{color:#fff}.retro:hover:before{width:105%}.retro:active{transform:translateY(2px)}.nightlife{color:var(--color);background:linear-gradient(#fff,#fff) padding-box padding-box,linear-gradient(45deg,#ff6b6b,#4ecdc4) border-box;border:2px solid #0000;border-radius:8px}.nightlife:hover{transform:translateY(-2px)}.nightlife:active{transform:translateY(2px)}.glitch{color:var(--color);background:0 0;border-radius:8px;box-shadow:0 2px 4px #0000001a,0 4px 8px -2px #0000001a,inset 0 -2px #0003}.glitch:hover{animation:.3s linear infinite glitch}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}to{transform:translate(0)}}.bubble{z-index:1;box-shadow:0 2px 4px rgba(var(--color-rgb),.2),0 4px 8px -2px rgba(var(--color-rgb),.2),inset 0 -2px 0 #0003;background:0 0;border-radius:8px;position:relative}.bubble:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026,0 8px 16px -4px #00000026,inset 0 -2px #0003}.bubble:before{content:"";z-index:-1;background:var(--color);border-radius:8px;transition:transform .3s;position:absolute;inset:0;transform:scale(0)}.bubble:hover:before{border-radius:8px;transform:scale(1)}.bubble:active{transform:translateY(0)}.appearance{outline-offset:0;color:#fff;box-shadow:0 0 0 0 var(--color);border:1px solid #0000;border-radius:8px;outline:2px solid #fff;transition:all .3s cubic-bezier(.36,.63,.5,.73)}.appearance:hover{outline-offset:15px;color:var(--color);box-shadow:0 0 0 2px var(--color);outline-color:#fff0;transform:translateY(-2px)}.appearance:active{transform:translateY(2px)}.metallic{color:var(--color);background:linear-gradient(145deg,#e6e6e6,#fff);border-radius:12px;box-shadow:inset 2px 2px 5px #fff,inset -2px -2px 5px #bababa}.metallic:hover{transform:translateY(-2px)}.metallic:active{transform:translateY(0)}.glass{border:1px solid rgba(var(--color-rgb),.4);background:rgba(var(--color-rgb),.4);box-shadow:0 4px 6px -1px rgba(var(--color-rgb),.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px}.glass.light,.glass.gray{color:#1f2937}.glass.dark,.glass.purple,.glass.blue{color:#fff}.glass:hover{background:rgba(var(--color-rgb),.5);box-shadow:0 6px 8px -1px rgba(var(--color-rgb),.4);transform:translateY(-2px)}.glass:active{transform:translateY(0)}.neumorphic{background:var(--color);border-radius:12px}.neumorphic.light,.neumorphic.gray{color:#1f2937;box-shadow:12px 12px 24px #0003,-12px -12px 24px #ffffffe6,inset 0 0 #0003,inset 0 0 #ffffffe6}.neumorphic.light:hover,.neumorphic.gray:hover{box-shadow:16px 16px 32px #0003,-16px -16px 32px #ffffffe6,inset 0 0 #0003,inset 0 0 #ffffffe6}.neumorphic.light:active,.neumorphic.gray:active{box-shadow:0 0 #0003,0 0 #ffffffe6,inset 12px 12px 24px #0003,inset -12px -12px 24px #ffffffe6}.neumorphic.dark,.neumorphic.purple,.neumorphic.blue{color:#fff;box-shadow:12px 12px 24px #00000080,-12px -12px 24px #ffffff1a,inset 0 0 #00000080,inset 0 0 #ffffff1a}.neumorphic.dark:hover,.neumorphic.purple:hover,.neumorphic.blue:hover{box-shadow:16px 16px 32px #00000080,-16px -16px 32px #ffffff1a,inset 0 0 #00000080,inset 0 0 #ffffff1a}.neumorphic.dark:active,.neumorphic.purple:active,.neumorphic.blue:active{box-shadow:0 0 #00000080,0 0 #ffffff1a,inset 12px 12px 24px #00000080,inset -12px -12px 24px #ffffff1a}.loading{background:var(--color);border-radius:8px;padding-left:6px;padding-right:32px}.loading:after{content:"";border:2px solid #0000;border-top-color:currentColor;border-radius:50%;width:16px;height:16px;margin-left:12px;animation:.6s linear infinite spin;position:absolute}@keyframes spin{to{transform:rotate(360deg)}}.progress{border:1px solid var(--color);color:var(--color);background-color:#0000;overflow:hidden}.progress{border:1px solid var(--color);color:var(--color);background-color:#0000;border-radius:8px;overflow:hidden}.progress:before{content:"";background:var(--color);transform-origin:0;width:100%;height:2.5px;transition:transform 1s;position:absolute;bottom:0;left:0;transform:scaleX(0)}.progress:hover:before{transform:scaleX(1)}.success{border:1px solid var(--color);color:var(--color);background:0 0;border-radius:8px;overflow:hidden}.success:before{content:"✓";background:var(--color);color:#01eb01;justify-content:center;align-items:center;transition:transform .3s;display:flex;position:absolute;inset:0;transform:translateY(100%)}.success:hover:before{transform:translateY(0)}.error{border:1px solid var(--color);color:var(--color);background:0 0;border-radius:8px;overflow:hidden}.error:before{content:"×";color:red;background:#fff;justify-content:center;align-items:center;transition:transform .3s;display:flex;position:absolute;inset:0;transform:translateY(100%)}.error:hover:before{transform:translateY(0)}.button:focus-visible{outline-offset:2px;outline:2px solid #000}@media (max-width:768px){.button{width:100%}}