.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

#live-section {
    transition: opacity 0.3s ease;
}

@keyframes scorePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.animate-pulse-score {
    animation: scorePulse 0.5s ease;
}

.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

a[href^="/match/"] {
    text-decoration: none;
}

.overflow-x-auto::-webkit-scrollbar {
    height: 4px;
}
.overflow-x-auto::-webkit-scrollbar-track {
    background: #1e293b;
    border-radius: 2px;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 2px;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

.skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

html:not(.dark) body {
    background-color: #f8fafc;
    color: #0f172a;
}
html:not(.dark) .bg-surface-900 {
    background-color: #f8fafc;
}
html:not(.dark) .bg-surface-800 {
    background-color: #ffffff;
}
html:not(.dark) .bg-surface-700\/50 {
    background-color: #f1f5f9;
}
html:not(.dark) .bg-surface-700 {
    background-color: #e2e8f0;
}
html:not(.dark) .border-slate-700\/40 {
    border-color: #e2e8f0;
}
html:not(.dark) .border-slate-700\/50 {
    border-color: #e2e8f0;
}
html:not(.dark) .border-slate-700\/30 {
    border-color: #e2e8f0;
}
html:not(.dark) .border-slate-700 {
    border-color: #e2e8f0;
}
html:not(.dark) .border-slate-800\/50 {
    border-color: #f1f5f9;
}
html:not(.dark) .border-slate-800\/30 {
    border-color: #f1f5f9;
}
html:not(.dark) .text-slate-50 {
    color: #0f172a;
}
html:not(.dark) .text-slate-200 {
    color: #334155;
}
html:not(.dark) .text-slate-300 {
    color: #475569;
}
html:not(.dark) .text-slate-400 {
    color: #64748b;
}
html:not(.dark) .text-slate-500 {
    color: #64748b;
}
html:not(.dark) .text-slate-600 {
    color: #94a3b8;
}
html:not(.dark) .text-slate-100 {
    color: #0f172a;
}
html:not(.dark) .hover\:bg-surface-700:hover {
    background-color: #e2e8f0;
}
html:not(.dark) .hover\:bg-surface-700\/30:hover {
    background-color: rgba(226, 232, 240, 0.3);
}
html:not(.dark) .hover\:bg-surface-700\/20:hover {
    background-color: rgba(226, 232, 240, 0.2);
}
html:not(.dark) input[type="date"] {
    background-color: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}
html:not(.dark) input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
}