:root{
    --theme-color:#facc15;
    --theme-secondary:#fb923c;
}

*{
    -webkit-tap-highlight-color:transparent;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:white;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow-x:hidden;
    min-height:100vh;

    background-image:
    radial-gradient(circle at top left,#f59e0b26,transparent 28%),
    radial-gradient(circle at top right,#fb923c16,transparent 26%),
    radial-gradient(circle at bottom right,#eab30818,transparent 30%),
    linear-gradient(180deg,#050505,#09090b,#050505);
}

::selection{
    background:var(--theme-color);
    color:#050505;
}

/* THEME UTILITIES */
.theme-text{
    color:var(--theme-color);
}

.theme-secondary-text{
    color:var(--theme-secondary);
}

.theme-border{
    border-color:color-mix(in srgb, var(--theme-color) 24%, transparent);
}

.theme-bg-soft{
    background:color-mix(in srgb, var(--theme-color) 12%, transparent);
}

.theme-bg-medium{
    background:color-mix(in srgb, var(--theme-color) 20%, transparent);
}

.theme-glow{
    box-shadow:0 0 32px color-mix(in srgb, var(--theme-color) 25%, transparent);
}

.hover\:theme-text:hover{
    color:var(--theme-color);
}

.hover\:theme-border:hover{
    border-color:color-mix(in srgb, var(--theme-color) 30%, transparent);
}

/* GLASS */
.glass{
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.08);
}

/* NEON */
.neon-text{
    text-shadow:
    0 0 14px color-mix(in srgb, var(--theme-color) 65%, transparent),
    0 0 35px color-mix(in srgb, var(--theme-color) 35%, transparent);
}

/* BUTTON */
.btn-gold{
    background:linear-gradient(135deg,var(--theme-color),var(--theme-secondary));
    color:#050505;
    font-weight:900;
    box-shadow:
    0 12px 35px color-mix(in srgb, var(--theme-color) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.btn-gold:hover{
    filter:brightness(1.06);
}

.btn-gold:disabled,
button:disabled{
    opacity:.75;
    cursor:not-allowed;
}

/* PRESS */
.press{
    transition:
    transform .18s ease,
    filter .18s ease,
    border-color .18s ease,
    opacity .18s ease;
}

.press:active{
    transform:scale(.96);
}

/* CARD */
.card3d{
    transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.card3d:hover{
    transform:translateY(-5px) scale(1.015);
    border-color:color-mix(in srgb, var(--theme-color) 28%, transparent);
    box-shadow:0 18px 55px rgba(0,0,0,.35);
}

/* GLOW */
.glow{
    box-shadow:
    0 0 25px color-mix(in srgb, var(--theme-color) 18%, transparent),
    0 0 55px color-mix(in srgb, var(--theme-secondary) 10%, transparent);
}

/* SOFT CARD */
.soft-card{
    background:linear-gradient(180deg,#18181b,#09090b);
    border:1px solid #27272a;
}

/* TEXT CLAMP */
.line-clamp-1{
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
}

.line-clamp-2{
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.line-clamp-3{
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

/* ANIMATION UTILITIES */
.fade-in{
    animation:fadeIn .45s ease both;
}

.slide-up{
    animation:slideUp .55s cubic-bezier(.2,.8,.2,1) both;
}

.pop-in{
    animation:popIn .38s cubic-bezier(.2,.95,.2,1.15) both;
}

.float{
    animation:float 3s ease-in-out infinite;
}

.pulse-soft{
    animation:pulseSoft 1.8s ease-in-out infinite;
}

@keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(24px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes popIn{
    from{
        opacity:0;
        transform:scale(.92);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-7px)}
}

@keyframes pulseSoft{
    0%,100%{
        opacity:.65;
        transform:scale(1);
    }
    50%{
        opacity:1;
        transform:scale(1.04);
    }
}

/* SHIMMER */
.shimmer{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.04);
}

.shimmer::before{
    content:'';
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );
    animation:shimmer 1.6s infinite;
}

@keyframes shimmer{
    100%{
        transform:translateX(100%);
    }
}

/* LIVE DOT */
.live-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:#22c55e;
    box-shadow:0 0 18px rgba(34,197,94,.9);
    animation:livePulse 1.1s infinite;
}

@keyframes livePulse{
    0%{
        opacity:1;
        transform:scale(1);
    }
    50%{
        opacity:.55;
        transform:scale(1.45);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

/* INPUT */
input,
select,
textarea{
    transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

input:focus,
select:focus,
textarea:focus{
    box-shadow:0 0 0 4px color-mix(in srgb, var(--theme-color) 10%, transparent);
}

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;
}

select{
    appearance:none;
    -webkit-appearance:none;
    background-image:
    linear-gradient(45deg,transparent 50%,#a1a1aa 50%),
    linear-gradient(135deg,#a1a1aa 50%,transparent 50%);
    background-position:
    calc(100% - 20px) calc(50% - 3px),
    calc(100% - 15px) calc(50% - 3px);
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;
}

/* MODAL */
.modal-bg{
    background:rgba(0,0,0,.78);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

/* LOADER */
.loader{
    width:22px;
    height:22px;
    border:3px solid #050505;
    border-top-color:transparent;
    border-radius:999px;
    animation:spin .8s linear infinite;
}

.loader-light{
    width:22px;
    height:22px;
    border:3px solid rgba(255,255,255,.45);
    border-top-color:transparent;
    border-radius:999px;
    animation:spin .8s linear infinite;
}

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

/* PAGE LOADER */
#pageLoader{
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

#pageLoader.flex{
    animation:fadeIn .18s ease both;
}

/* TICKER */
.ticker{
    will-change:transform;
}

/* SCROLLBAR */
::-webkit-scrollbar{
    width:6px;
    height:6px;
}

::-webkit-scrollbar-thumb{
    background:#3f3f46;
    border-radius:10px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

.no-scrollbar::-webkit-scrollbar{
    display:none;
}

.no-scrollbar{
    -ms-overflow-style:none;
    scrollbar-width:none;
}

/* IMAGE */
img{
    max-width:100%;
}

/* MOBILE SAFE */
@supports(padding:max(0px)){
    .safe-bottom{
        padding-bottom:max(1rem,env(safe-area-inset-bottom));
    }
}

/* RESPONSIVE OPTIMIZATION */
@media (max-width:640px){
    body{
        background-image:
        radial-gradient(circle at top left,#f59e0b20,transparent 35%),
        radial-gradient(circle at bottom right,#eab30816,transparent 38%),
        linear-gradient(180deg,#050505,#09090b,#050505);
    }

    .card3d:hover{
        transform:none;
        box-shadow:none;
    }

    .glow{
        box-shadow:
        0 0 18px color-mix(in srgb, var(--theme-color) 12%, transparent),
        0 0 35px color-mix(in srgb, var(--theme-secondary) 8%, transparent);
    }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}