body { font-family: "IBM Plex Sans", sans-serif; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0B0E11; 
}
::-webkit-scrollbar-thumb {
    background: #2B3139; 
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #FCD535; 
}
:root {
    --theme-accent: #FCD535;
    --theme-accent-soft: rgba(252,213,53,.12);
    --theme-accent-rgb: 252,213,53;
    --theme-accent-space: 252 213 53;
}
body.theme-gold{
    --theme-accent:#fcd535;
    --theme-accent-soft: rgba(252,213,53,.12);
    --theme-accent-rgb: 252,213,53;
    --theme-accent-space: 252 213 53;
}
body.theme-matrix{
    --theme-accent:#00ff7f;
    --theme-accent-soft: rgba(0,255,127,.12);
    --theme-accent-rgb: 0,255,127;
    --theme-accent-space: 0 255 127;
}
body.theme-neon {
    --theme-accent: #ff2bd6;
    --theme-accent-soft: rgba(255,43,214,.12);
    --theme-accent-rgb: 255,43,214;
    --theme-accent-space: 255 43 214;
}
body.theme-ocean {
    --theme-accent: #00c2ff;
    --theme-accent-soft: rgba(0,194,255,.12);
    --theme-accent-rgb: 0,194,255;
    --theme-accent-space: 0 194 255;
}
body.theme-violet {
    --theme-accent: #7c3aed;
    --theme-accent-soft: rgba(124,58,237,.12);
    --theme-accent-rgb: 124,58,237;
    --theme-accent-space: 124 58 237;
}
body.theme-lava {
    --theme-accent: #ff4d00;
    --theme-accent-soft: rgba(255,77,0,.12);
    --theme-accent-rgb: 255,77,0;
    --theme-accent-space: 255 77 0;
}
body.theme-ice {
    --theme-accent: #5eead4;
    --theme-accent-soft: rgba(94,234,212,.12);
    --theme-accent-rgb: 94,234,212;
    --theme-accent-space: 94 234 212;
}

body[class*="theme-"] .text-primary{ color: var(--theme-accent) !important; }
body[class*="theme-"] .bg-primary{ background-color: var(--theme-accent) !important; }
body[class*="theme-"] .border-primary{ border-color: var(--theme-accent) !important; }
body[class*="theme-"] .ring-primary\/20{ --tw-ring-color: var(--theme-accent-soft) !important; }

body[class*="theme-"] .glass-panel,
body[class*="theme-"] .glass-card,
body[class*="theme-"] .glass-panel.border-primary\/30{
    box-shadow: 0 0 0 1px var(--theme-accent-soft) inset, 0 0 30px rgba(0,0,0,.35);
}

body[class*="theme-"] ::selection{
    background: var(--theme-accent);
    color: #000;
}
.hover\:text-primary,.text-primary\/80{
    color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 80%,
        transparent
    ) !important;
}
.group:hover .group-hover\:text-primary{
    --tw-text-opacity: 1;
    color: var(--theme-accent) !important;
}
.group:hover .group-hover\:bg-primary{
    background-color: var(--theme-accent) !important;
}
.border-primary\/20{
    border-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 20%,
        transparent
    ) !important;
}
.border-primary\/30{
    border-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 30%,
        transparent
    ) !important;
}
.border-primary\/40{
    border-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 40%,
        transparent
    ) !important;
}
.hover\:border-primary\/20:hover,.border-primary\/20{
    border-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 20%,
        transparent
    ) !important;
}
.hover\:border-primary\/50:hover,.border-primary\/50{
    border-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 50%,
        transparent
    ) !important;
}
.hover\:bg-primary\/5:hover,.bg-primary\/5{
    background-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 5%,
        transparent
    ) !important;
}
.bg-primary\/10{
    background-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 10%,
        transparent
    ) !important;
}
.hover\:bg-primary:hover{
    --tw-bg-opacity: 1;
    background-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 10%,
        transparent
    ) !important;
}
.bg-primary\/20{
    background-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 20%,
        transparent
    ) !important;
}
.to-primary\/20{
    --tw-gradient-to:
        color-mix(
            in srgb,
            var(--theme-accent, #FCD535) 20%,
            transparent
        )
        var(--tw-gradient-to-position);
}
.from-primary\/5{
    --tw-gradient-from:
        color-mix(
            in srgb,
            var(--theme-accent, #FCD535) 5%,
            transparent
        )
        var(--tw-gradient-from-position) !important;

    --tw-gradient-to:
        color-mix(
            in srgb,
            var(--theme-accent, #FCD535) 0%,
            transparent
        )
        var(--tw-gradient-to-position) !important;

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/20{
    --tw-gradient-from:
        color-mix(
            in srgb,
            var(--theme-accent, #FCD535) 20%,
            transparent
        )
        var(--tw-gradient-from-position) !important;

    --tw-gradient-to:
        color-mix(
            in srgb,
            var(--theme-accent, #FCD535) 0%,
            transparent
        )
        var(--tw-gradient-to-position) !important;

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.peer:checked ~ .peer-checked\:bg-primary\/10 {
    background-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 5%,
        transparent
    ) !important;
}
.group-hover\:shadow-colored\/20,.shadow-colored\/20 {
    --tw-shadow: 0 0 100px rgba(var(--theme-accent-rgb), 0.2);
    --tw-shadow-colored: 0 0 100px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-colored {
    --tw-shadow: 0 0 100px rgba(var(--theme-accent-rgb), 0.5);
    --tw-shadow-colored: 0 0 100px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
#slide-1:checked ~ div .slider-content {
    transform: translateX(0%);
}

#slide-2:checked ~ div .slider-content {
    transform: translateX(-25%);
}

#slide-3:checked ~ div .slider-content {
    transform: translateX(-50%);
}

#slide-4:checked ~ div .slider-content {
    transform: translateX(-75%);
}

#slide-1:checked ~ div .slider-dot-1,
#slide-2:checked ~ div .slider-dot-2,
#slide-3:checked ~ div .slider-dot-3,
#slide-4:checked ~ div .slider-dot-4 {
    background-color: var(--theme-accent, #FCD535);
    box-shadow: 0 0 8px var(--theme-accent-soft, rgba(252, 213, 53, 0.8));
    width: 1.5rem;
}
.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner {
    -moz-appearance: textfield;
}
.peer:checked ~ .peer-checked\:text-primary {
    --tw-text-opacity: 1;
    color: var(--theme-accent, #FCD535) !important;
}
.peer:checked ~ .peer-checked\:bg-primary\/5{
    background-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 5%,
        transparent
    ) !important;
}
.group:hover .group-hover\:bg-primary\/30 {
    background-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 5%,
        transparent
    ) !important;
}
.group:hover .group-hover\:bg-primary\/70 {
    background-color: color-mix(
        in srgb,
        var(--theme-accent, #FCD535) 25%,
        transparent
    ) !important;
}
.before\:shadow-\[0_0_5px_theme\(\'colors\.primary\'\)\]::before {
    content: var(--tw-content);
    --tw-shadow: 0 0 5px var(--theme-accent, #FCD535);
    --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group:hover .group-hover\:text-primary {
    --tw-text-opacity: 1;
    color: var(--theme-accent, #FCD535) !important;
}
#tab-available:checked ~ .content-available { display: grid; }
#tab-mine:checked ~ .content-mine { display: grid; }
#tab-history:checked ~ .content-history { display: grid; }#tab-available:checked ~ div label[for="tab-available"] { color: var(--theme-accent); border-bottom-color: var(--theme-accent); font-weight: 700; }
#tab-mine:checked ~ div label[for="tab-mine"] { color: var(--theme-accent); border-bottom-color: var(--theme-accent); font-weight: 700; }
#tab-history:checked ~ div label[for="tab-history"] { color: var(--theme-accent); border-bottom-color: var(--theme-accent); font-weight: 700; }
#modal-toggle:checked ~ .modal-overlay { display: flex; }
#modal-toggle:checked ~ .flex .main-content { filter: blur(8px); }
#terms-modal-toggle:checked ~ .modal-overlay-terms { display: flex; }
#terms-modal-toggle:checked ~ .flex .main-content { filter: blur(8px); }

.modal-anim-root {
    opacity: 0;
    transition: opacity .22s ease;
}

.modal-anim-box {
    opacity: 0;
    transform: translateY(14px) scale(.975);
    transition:
        opacity .22s ease,
        transform .26s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, opacity;
}

.modal-anim-root.is-open {
    opacity: 1;
}

.modal-anim-root.is-open .modal-anim-box {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.modal-anim-root.is-closing {
    opacity: 0;
}

.modal-anim-root.is-closing .modal-anim-box {
    opacity: 0;
    transform: translateY(10px) scale(.985);
}

@media (prefers-reduced-motion: reduce) {
    .modal-anim-root,
    .modal-anim-box {
        transition: none !important;
    }
}