/* Score color utilities */
.score-high { color: #22c55e; }
.score-mid { color: #eab308; }
.score-low { color: #94a3b8; }

/* Loading spinner */
.spinner {
    border: 3px solid rgba(255,255,255,0.1);
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Table hover */
.player-row:hover {
    background-color: rgba(59, 130, 246, 0.08);
}

/* Active nav link */
.nav-active {
    color: #3b82f6;
    border-bottom: 2px solid #3b82f6;
}

/* Benchmark bar */
.benchmark-bar {
    position: relative;
    height: 8px;
    background: #1e293b;
    border-radius: 4px;
    overflow: visible;
}
.benchmark-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.benchmark-marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    transform: translateX(-50%);
}

/* Prediction delta */
.delta-positive { color: #22c55e; }
.delta-negative { color: #ef4444; }
.delta-neutral { color: #94a3b8; }

/* Card component */
.card {
    background: #1e293b;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid #334155;
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text-sm { height: 10px; margin-bottom: 6px; }
.skeleton-card { height: 120px; border-radius: 0.75rem; }
.skeleton-row { height: 44px; margin-bottom: 2px; }
.skeleton-circle { border-radius: 50%; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Mobile optimization */
@media (max-width: 767px) {
    .card { padding: 1rem; }
    table th, table td { padding: 0.375rem 0.5rem; font-size: 0.75rem; }
    .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}