:root {
    --color-bg-body: #030303;
    --color-bg-sidebar: #050505;
    --color-bg-card: #0a0a0c;
    --color-bg-elevated: #111114;
    --color-bg-deep: #000000;
    --color-brand-primary: #ffea00;
    --color-brand-primary-dark: #ccbb00;
    --color-brand-primary-deeper: #8c8000;
    --gold-gradient: linear-gradient(135deg, #fff04d 0%, #ffea00 40%, #ccbb00 100%);
    --gold-gradient-hover: linear-gradient(135deg, #ffffff 0%, #ffea00 30%, #e6d300 100%);
    --color-border: rgba(255, 234, 0, 0.08);
    --color-border-light: rgba(255, 234, 0, 0.15);
    --color-border-subtle: rgba(255, 255, 255, 0.03);
    --color-text-bright: #ffffff;
    --color-text-light: #e0e0e0;
    --color-text-dim: #8a8a8a;
}
body, .main-content, #app {
    background-color: var(--color-bg-body) !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 234, 0, 0.03) 0%, transparent 60%) !important;
    color: var(--color-text-light);
}
header.bg-bg-card {
    background: rgba(3, 3, 3, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
}
@media (max-width: 640px) {
    #user-menu .bg-brand-primary\/10 {
        display: none !important;
    }
}
#top-menu-buttons a[style*="background: #ffea00"] {
    background: var(--gold-gradient) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #000 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(255, 234, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
#top-menu-buttons a[style*="background: #ffea00"]:hover {
    background: var(--gold-gradient-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 234, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
#top-menu-buttons a[style*="background: #570080"] {
    background: linear-gradient(135deg, #111, #000) !important;
    border: 1px solid var(--color-brand-primary) !important;
    color: var(--color-brand-primary) !important;
}
#sidebar {
    background: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(15px);
    border-right: 1px solid var(--color-border) !important;
}
#sidebar .nav-card, #sidebar .list-item {
    transition: all 0.3s ease !important;
}
#sidebar .nav-card:hover, #sidebar .list-item:hover {
    background: rgba(255, 234, 0, 0.05) !important;
    border-color: rgba(255, 234, 0, 0.3) !important;
    transform: translateX(4px);
}
#sidebar .nav-card[style*="background: linear-gradient"] {
    background: var(--gold-gradient) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(255, 234, 0, 0.2) !important;
}
#sidebar .nav-card[style*="background: linear-gradient"] svg {
    color: #000 !important;
}
.bg-bg-card, .ss-card, .site-card, .bonus-item, .from-bg-card, .bf-slide .relative {
    background: linear-gradient(160deg, #0f0f11 0%, #050505 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative;
    overflow: hidden;
}
.ss-card:hover, .site-card:hover, .bonus-item:hover {
    border-color: var(--color-brand-primary) !important;
    background: linear-gradient(160deg, #141417 0%, #0a0a0c 100%) !important;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 234, 0, 0.15) !important;
    transform: translateY(-5px);
}
.ss-card::before, .bonus-item::before, .from-bg-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 234, 0, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.4s;
}
.ss-card:hover::before, .bonus-item:hover::before, .from-bg-card:hover::before {
    opacity: 1;
}
.from-brand-primary\/20 {
    background: linear-gradient(135deg, rgba(255, 234, 0, 0.15) 0%, rgba(204, 187, 0, 0.05) 100%) !important;
    border-color: rgba(255, 234, 0, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 234, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}
.bg-brand-primary\/10 {
    background: rgba(255, 234, 0, 0.08) !important;
}
.border-brand-primary\/20 {
    border-color: rgba(255, 234, 0, 0.25) !important;
}
.text-brand-primary {
    color: var(--color-brand-primary) !important;
}
.text-brand-primary\/60 {
    color: rgba(255, 234, 0, 0.7) !important;
}
.ring-brand-primary\/20 {
    --tw-ring-color: rgba(255, 234, 0, 0.2) !important;
}
#daily-rewards-section {
    background: linear-gradient(145deg, #0a0a0c 0%, #030303 100%) !important;
    border: 1px solid var(--color-border-light) !important;
    box-shadow: inset 0 0 60px rgba(255, 234, 0, 0.02) !important;
}
#dr-days > div.border-brand-primary\/20 {
    background: linear-gradient(135deg, rgba(255, 234, 0, 0.1), rgba(255, 234, 0, 0.02)) !important;
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.1);
}
.bg-gradient-to-r.from-brand-primary.to-brand-primary-dark,
button[onclick*="AuthModal('register')"],
.bf-detail-btn {
    background: var(--gold-gradient) !important;
    color: #000 !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 234, 0, 0.25), inset 0 1px 1px rgba(255,255,255,0.4) !important;
    text-shadow: none !important;
}
.bg-gradient-to-r.from-brand-primary.to-brand-primary-dark:hover,
button[onclick*="AuthModal('register')"]:hover,
.bf-detail-btn:hover {
    background: var(--gold-gradient-hover) !important;
    box-shadow: 0 6px 25px rgba(255, 234, 0, 0.4), inset 0 1px 1px rgba(255,255,255,0.6) !important;
}
#chat-sidebar {
    background: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(25px) !important;
    border-left: 1px solid var(--color-border) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8) !important;
}
#chat-sidebar > div:first-child {
    background: linear-gradient(135deg, rgba(255, 234, 0, 0.05) 0%, transparent 100%) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
}
#chat-input-wrap input {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 234, 0, 0.1) !important;
    color: #fff !important;
}
#chat-input-wrap input:focus {
    border-color: var(--color-brand-primary) !important;
    background: rgba(255, 234, 0, 0.02) !important;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.1);
}
.marquee-wrapper > div.absolute {
    background: linear-gradient(to right, #030303, transparent) !important;
}
.marquee-wrapper > div.absolute.right-0 {
    background: linear-gradient(to left, #030303, transparent) !important;
}
.marquee-pill {
    background: rgba(15, 15, 15, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px);
}
.marquee-pill:hover {
    background: rgba(255, 234, 0, 0.05) !important;
    border-color: rgba(255, 234, 0, 0.4) !important;
    box-shadow: 0 0 20px rgba(255, 234, 0, 0.1) !important;
}
.marquee-pill:hover .bg-brand-primary\/40 {
    background-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 8px var(--color-brand-primary) !important;
}
.bl-modal-box {
    background: #0a0a0c !important;
    border: 1px solid rgba(255, 234, 0, 0.2) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 234, 0, 0.08) !important;
}
.bl-modal-box .bg-bg-card {
    background: #050505 !important;
}
#site-list-6a32a34518f9f-search {
    color: #fff !important;
}
.focus-within\:border-brand-primary\/40:focus-within {
    border-color: rgba(255, 234, 0, 0.5) !important;
}
.bg-gradient-to-br.from-bg-card\/60.to-bg-deep\/60 {
    background: rgba(10, 10, 12, 0.65) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 20px rgba(0,0,0,0.5) !important;
}
.score-filter-tab, .bl-filter {
    background: transparent !important;
    color: var(--color-text-dim) !important;
    border: 1px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.score-filter-tab svg, .bl-filter svg {
    transition: color 0.3s ease !important;
}
.score-filter-tab:hover:not(.active), .bl-filter:hover:not(.active) {
    background: rgba(255, 234, 0, 0.05) !important;
    color: var(--color-brand-primary) !important;
    border-color: rgba(255, 234, 0, 0.15) !important;
    transform: translateY(-1px);
}
.score-filter-tab:hover:not(.active) svg, .bl-filter:hover:not(.active) svg {
    color: var(--color-brand-primary) !important;
}
.score-filter-tab.active, .bl-filter.active {
    background: var(--gold-gradient) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(255, 234, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
}
.score-filter-tab.active svg, .bl-filter.active svg {
    color: #000000 !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.3));
}
.bg-gradient-to-br.from-\[\#0d2818\].via-\[\#1a1a0a\].to-\[\#2d1a0a\] {
    background: linear-gradient(135deg, #0a0a0c 0%, #151500 50%, #050505 100%) !important;
    border: 1px solid rgba(255, 234, 0, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), inset 0 0 60px rgba(255, 234, 0, 0.03) !important;
}
.bg-emerald-500\/20 {
    background: rgba(255, 234, 0, 0.15) !important;
    border: 1px solid rgba(255, 234, 0, 0.3) !important;
}
.text-emerald-400, .lucide-gift.text-emerald-400 {
    color: var(--color-brand-primary) !important;
}
a.bg-emerald-500 {
    background: var(--gold-gradient) !important;
    color: #000 !important;
    box-shadow: 0 4px 20px rgba(255, 234, 0, 0.3) !important;
}
a.bg-emerald-500:hover {
    background: var(--gold-gradient-hover) !important;
    box-shadow: 0 8px 30px rgba(255, 234, 0, 0.5) !important;
}
div[class*="radial-gradient(circle_at_20%_80%,rgba(16,185,129"] {
    background: radial-gradient(circle at 20% 80%, rgba(255, 234, 0, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(204, 187, 0, 0.1) 0%, transparent 50%) !important;
}
div[class*="shadow-[inset_0_-8px_20px_rgba(0,0,0,0.3)"] {
    box-shadow: inset 0 -8px 20px rgba(0,0,0,0.3), inset 0 8px 20px rgba(255,255,255,0.4), 0 20px 60px rgba(255, 234, 0, 0.3) !important;
}
div[class*="radial-gradient(circle,rgba(38,186,193,0.4)"] {
    background: radial-gradient(circle, rgba(255, 234, 0, 0.2) 0%, transparent 70%) !important;
}