html { background-color: #0f172a; -webkit-tap-highlight-color: transparent; }
        body {
            background-color: #0f172a; color: #f8fafc;
            -webkit-user-select: none; user-select: none;
            display: flex; flex-direction: column;
            min-height: 100vh; overflow-x: hidden; overflow-y: auto; width: 100%;
        }
        input, select, textarea { -webkit-user-select: auto; user-select: auto; }
        input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type="number"] { -moz-appearance: textfield; }
        a, button, .item-box, .group { touch-action: manipulation; }

        .glass-panel { background: rgba(255, 255, 255, 0.95); border: 1px solid #e2e8f0; box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1); }
        .glass-nav { background: #ffffff; border-bottom: 1px solid #e2e8f0; }

        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #F59E0B; }
        .hide-scroll::-webkit-scrollbar { display: none; }
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
        .snap-x-mandatory { scroll-snap-type: x mandatory; }
        .snap-center { scroll-snap-align: center; }

        .marquee-container { display: block; overflow: hidden; white-space: nowrap; width: 100%; }
        .marquee-content { display: inline-block; padding-left: 100%; animation: marqueeScroll 30s linear infinite; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
        @keyframes marqueeScroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

        .auto-scroll-box { display: block; width: 100%; overflow: hidden; white-space: nowrap; position: relative; }
        .auto-scroll-text { display: inline-block; padding-left: 100%; animation: autoScrollAnim 10s linear infinite; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
        @keyframes autoScrollAnim { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

        /* --- Custom Seamless Leaderboard Marquee Styles --- */
        .leaderboard-scroller { }
        .leaderboard-track { display: flex; width: max-content; animation: seamlessMarquee 150s linear infinite; will-change: transform; }
        .leaderboard-track:hover { animation-play-state: paused; }
        @keyframes seamlessMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        .shimmer-bg { position: relative; overflow: hidden; }
        .shimmer-bg::after {
            content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            transform: skewX(-20deg); animation: shimmerSweep 2.5s infinite linear;
        }
        @keyframes shimmerSweep { 0% { left: -150%; } 100% { left: 250%; } }

        .shimmer-text {
            background: linear-gradient(110deg, #1e293b 0%, #1e293b 40%, #2563EB 50%, #1e293b 60%, #1e293b 100%);
            background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            animation: textShimmer 3s infinite linear;
        }
        @keyframes textShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .carousel-slide-item { transition: opacity 0.4s ease; opacity: 1; }
        .carousel-slide-item.is-active { opacity: 1; z-index: 10; }

        .item-box { background: #ffffff; border: none; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1); border-radius: 1.25rem; transition: all 0.2s ease; position: relative; cursor: pointer; overflow: hidden; }
        .item-box:active:not(.sold-out) { transform: scale(0.98); }
        .item-box.selected { border-color: #2563EB; background: rgba(37, 99, 235, 0.05); box-shadow: 0 4px 15px rgba(37, 99, 235, 0.15); }
        .item-box.sold-out { cursor: not-allowed; }

        .input-field { background: #ffffff; border: 1px solid #cbd5e1; color: #1e293b; width: 100%; padding: 12px 16px; border-radius: 12px; font-size: 14px !important; font-weight: 600; transition: all 0.3s ease; outline: none; }
        .input-field::placeholder { color: #94a3b8; font-weight: 500; }
        .input-field:focus, .input-field.is-focused { border-color: #2563EB; background: #ffffff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }

        select.input-field { background: #ffffff; border: 1px solid #cbd5e1; color: #1e293b; width: 100%; padding: 12px 16px; border-radius: 12px; font-size: 14px !important; font-weight: 600; transition: all 0.3s ease; outline: none; }
        select.input-field:focus, .input-field.is-focused { border-color: #2563EB; background: #ffffff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
        select.input-field option { background: #ffffff; color: #1e293b; padding: 12px; }

        .btn-primary { background: #2563EB; color: #ffffff; padding: 14px 24px; border-radius: 12px; font-weight: 700; font-size: 15px; transition: all 0.2s ease; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); display: inline-flex; justify-content: center; align-items: center; border: none; cursor: pointer; position: relative; overflow: hidden; }
        .btn-primary::after {
            content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            transform: skewX(-20deg); animation: shimmerSweep 2.5s infinite linear;
        }
        .btn-primary:active:not(:disabled) { transform: scale(0.96); box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3); }
        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

        @keyframes viewFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .view-section { display: none; opacity: 0; background-color: transparent; }
        .view-section.active-view { display: block; opacity: 1; animation: viewFadeIn 0.2s ease-out forwards; will-change: opacity, transform; }

        /* Hardware acceleration for modals */
        #login-sheet, #home-popup-content, #low-balance-content, #gc-confirm-content { will-change: transform, opacity; }

        .circle-progress { animation: rotate 1s linear infinite; }
        .circle-progress circle { stroke: currentColor; stroke-width: 5; stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1s ease-in-out infinite; stroke-linecap: round; fill: none; }
        @keyframes rotate { 100% { transform: rotate(360deg); } }
        @keyframes dash { 
            0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 
            50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; } 
            100% { stroke-dasharray: 90, 200; stroke-dashoffset: -124px; } 
        }

        .fade-in-text { animation: softFadeIn 0.5s ease forwards; opacity: 0; }
        @keyframes softFadeIn { to { opacity: 1; } }
        
        .success-checkmark { width: 60px; height: 60px; border-radius: 50%; display: block; stroke-width: 3; stroke: #34d399; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #34d399; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
        .success-checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: #34d399; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
        .success-checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
        
        .failed-checkmark { width: 60px; height: 60px; border-radius: 50%; display: block; stroke-width: 3; stroke: #ef4444; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #ef4444; animation: fillRed .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
        .failed-checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: #ef4444; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
        .failed-checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
        
        @keyframes stroke { 100% { stroke-dashoffset: 0; } }
        @keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
        @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px rgba(52, 211, 153, 0.1); } }
        @keyframes fillRed { 100% { box-shadow: inset 0px 0px 0px 30px rgba(239, 68, 68, 0.1); } }





.suspicious-checkmark { width: 60px; height: 60px; border-radius: 50%; display: block; stroke-width: 3; stroke: #f97316; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #f97316; animation: fillOrange .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
.suspicious-checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: #f97316; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.suspicious-checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
@keyframes fillOrange { 100% { box-shadow: inset 0px 0px 0px 30px rgba(249, 115, 22, 0.1); } }