/* Custom Styles - DeFi/Exchange Theme */
.nav-link {
    @apply text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors;
}

.nav-link.active {
    @apply bg-gray-800 text-cyan-400 border-b-2 border-cyan-400;
}

.sidebar-link {
    @apply flex items-center space-x-3 px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-cyan-400 transition-colors;
}

.sidebar-link.active {
    @apply bg-gray-800 text-cyan-400 border-l-2 border-cyan-400;
}

.sidebar-link i {
    @apply text-center;
}

/* Game Card Styles */
.game-card {
    @apply bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-cyan-500 transition-all cursor-pointer;
}

.game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(6, 182, 212, 0.2);
}

/* Status Badges */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-live {
    @apply bg-red-500/20 text-red-400 border border-red-500/50;
}

.status-pending {
    @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/50;
}

.status-closed {
    @apply bg-green-500/20 text-green-400 border border-green-500/50;
}

/* Progress Bar */
.progress-bar {
    @apply w-full bg-gray-700 rounded-full h-3 overflow-hidden;
}

.progress-fill {
    @apply h-full rounded-full transition-all duration-300;
}

/* Button Styles */
.btn-primary {
    @apply bg-cyan-600 hover:bg-cyan-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors;
}

.btn-secondary {
    @apply bg-gray-700 hover:bg-gray-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors;
}

/* Input Field */
.input-field {
    @apply w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent;
}

/* Stat Card */
.stat-card {
    @apply bg-gray-800 rounded-lg p-4 border border-gray-700;
}

/* 动画 */
@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse-glow {
    animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}