/**
 * WC 2026 · Neon Slate 风格 UI（参考热门体育/AI预测 Dashboard）
 * 深色高对比 · 玻璃卡片 · 霓虹强调 · 紧凑赔率 pill
 */
:root {
    --bg-dark: #06080f;
    --bg-card: rgba(12, 18, 32, 0.72);
    --bg-elevated: rgba(18, 26, 46, 0.85);
    --wc-gold: #f0c040;
    --wc-gold-dark: #c8960a;
    --neon-cyan: #00d4ff;
    --neon-green: #00e676;
    --live: #ff4757;
    --text: #eef2f8;
    --text-muted: #7a8ba8;
    --border: rgba(255, 255, 255, 0.07);
    --glass-blur: blur(16px);
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-glow: 0 0 24px rgba(0, 212, 255, 0.12);
}

body {
    background: var(--bg-dark);
    font-feature-settings: 'tnum' 1;
}

.bg-field {
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(0, 212, 255, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 50%, rgba(240, 192, 64, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, #06080f 0%, #0a1018 50%, #061018 100%) !important;
}

.bg-field::before { opacity: 0.25 !important; }

/* ── 顶栏：BetMGM / Neon Slate 紧凑导航 ── */
.wc-header {
    background: rgba(6, 8, 15, 0.92) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(240, 192, 64, 0.12) !important;
}

.wc-brand-text h1 {
    font-size: 1.25rem !important;
    letter-spacing: 1px !important;
    background: linear-gradient(90deg, #fff 30%, var(--neon-cyan) 70%, var(--wc-gold)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.wc-nav-btn {
    border-radius: var(--radius-pill) !important;
    font-size: 0.78rem !important;
    padding: 7px 12px !important;
    border: 1px solid transparent !important;
}

.wc-nav-btn.active {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(240, 192, 64, 0.2)) !important;
    color: #fff !important;
    border-color: rgba(0, 212, 255, 0.35) !important;
    box-shadow: var(--shadow-glow) !important;
    font-weight: 600 !important;
}

.wc-search {
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
    border-radius: var(--radius-pill) !important;
}

.wc-search:focus {
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.15) !important;
}

.btn-refresh {
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    border-radius: 50% !important;
}

/* ── Hero 精简：AI Football Dashboard 风格 ── */
.wc-hero {
    border-radius: var(--radius-lg) !important;
    margin-bottom: 12px !important;
    padding: 18px 16px !important;
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.06) 0%, rgba(240, 192, 64, 0.04) 100%),
        var(--bg-card) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.hero-badge {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.2), rgba(240, 192, 64, 0.25)) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.wc-hero-sub {
    font-size: 0.8rem !important;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.countdown-unit {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(0, 212, 255, 0.15) !important;
}

.countdown-unit .num {
    color: var(--neon-cyan) !important;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}

/* ── 指标卡片：模块化 token 设计 ── */
.dashboard-metrics {
    gap: 8px !important;
}

.metric-card {
    background: var(--bg-card) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.metric-card .metric-val {
    font-variant-numeric: tabular-nums;
    color: var(--text) !important;
}

.metric-card.live-metric .metric-val {
    color: var(--live) !important;
    text-shadow: 0 0 8px rgba(255, 71, 87, 0.4);
}

/* ── 状态栏 / 筛选 pill ── */
.status-bar {
    background: var(--bg-card) !important;
    backdrop-filter: var(--glass-blur);
    border-radius: 12px !important;
    padding: 10px 14px !important;
}

.filter-tab.active {
    background: linear-gradient(135deg, var(--neon-cyan), #0099cc) !important;
    color: #001018 !important;
    font-weight: 700 !important;
}

.group-chips .chip.active {
    background: rgba(0, 212, 255, 0.15) !important;
    border-color: var(--neon-cyan) !important;
    color: var(--neon-cyan) !important;
}

/* ── 比赛卡片：Sportsbook 紧凑 scoreboard ── */
.matches-grid {
    display: grid;
    gap: 12px;
}

@media (min-width: 768px) {
    .matches-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .matches-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.match-card {
    background: var(--bg-card) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.match-card:hover {
    border-color: rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), var(--shadow-glow);
}

.match-card.is-live {
    border-color: rgba(255, 71, 87, 0.45) !important;
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.12);
}

.match-card.is-live::before {
    background: linear-gradient(90deg, var(--live), transparent) !important;
}

.score {
    font-size: 1.75rem !important;
    color: var(--wc-gold) !important;
    letter-spacing: 2px;
}

.status-badge.live {
    background: rgba(255, 71, 87, 0.15) !important;
    color: var(--live) !important;
    animation: pulse-live 2s ease infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* 赔率 pill：Neon Slate chunky odds */
.odds-pill, .odds-val, .lottery-board .odds-cell strong {
    border-radius: 8px !important;
}

.lottery-board {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 10px !important;
}

.odds-type-tab.active {
    color: var(--neon-cyan) !important;
    border-bottom-color: var(--neon-cyan) !important;
}

.match-pick-badge {
    background: rgba(0, 230, 118, 0.12) !important;
    border-color: rgba(0, 230, 118, 0.35) !important;
    color: var(--neon-green) !important;
}

.btn-detail {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(240, 192, 64, 0.08)) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: var(--radius-pill) !important;
}

.btn-detail:hover {
    border-color: var(--neon-cyan) !important;
    color: var(--neon-cyan) !important;
}

/* ── 侧栏 / 区块 ── */
.wc-sidebar .sidebar-card {
    background: var(--bg-card) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.section-header {
    font-weight: 600;
    color: var(--text);
}

.section-count {
    background: rgba(0, 212, 255, 0.1) !important;
    color: var(--neon-cyan) !important;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-pill) !important;
    padding: 2px 10px !important;
}

/* ── AI / 荐彩 / 机器人卡片 ── */
.ai-predict-card, .scheme-card, .bot-match-card, .bot-stat-card {
    background: var(--bg-card) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.scheme-card.recommended {
    border-color: rgba(240, 192, 64, 0.4) !important;
    box-shadow: 0 0 16px rgba(240, 192, 64, 0.08);
}

.picks-tab.active, .ai-predict-tab.active, .bot-tab.active {
    background: rgba(0, 212, 255, 0.15) !important;
    color: var(--neon-cyan) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
}

/* ── 弹窗 ── */
.match-modal .modal-content {
    background: rgba(8, 12, 22, 0.96) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    border-radius: 20px !important;
}

.detail-tab.active {
    background: rgba(0, 212, 255, 0.12) !important;
    color: var(--neon-cyan) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
}

/* ── 加载 / 状态 ── */
.loading-spinner {
    border-top-color: var(--neon-cyan) !important;
}

.db-status.ok {
    color: var(--neon-green) !important;
}

/* ── 移动端底栏 ── */
.mobile-nav {
    background: rgba(6, 8, 15, 0.96) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.15) !important;
}

.mobile-nav-btn.active {
    color: var(--neon-cyan) !important;
}

/* ── 隐藏重复 Tabbar（桌面用顶栏即可，更简洁） ── */
@media (min-width: 901px) {
    .wc-tabbar { display: none !important; }
}

@media (max-width: 900px) {
    .wc-header .wc-nav { display: none !important; }
    .wc-hero { border-radius: 0 !important; }
    .dashboard-metrics { grid-template-columns: repeat(4, 1fr) !important; }
}

/* 弹窗 · 阵容/阵型 */
.modal { max-width: 920px !important; }
.lineup-subtab { min-height: 44px; }
.pitch-duo { gap: 20px; }
.pitch-formation { min-height: 320px !important; }

@media (max-width: 640px) {
    .lineup-columns { grid-template-columns: 1fr !important; }
    .pitch-formation { min-height: 260px !important; }
}

/* 快捷入口条 */
.quick-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 0 2px;
}

.quick-nav-btn {
    flex: 1;
    min-width: calc(25% - 8px);
    padding: 10px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: 0.2s;
}

.quick-nav-btn:hover, .quick-nav-btn:focus {
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--neon-cyan);
}

.quick-nav-btn i, .quick-nav-btn [data-lucide] {
    width: 18px;
    height: 18px;
}

@media (min-width: 768px) {
    .quick-nav-btn { min-width: auto; flex: 0 1 auto; flex-direction: row; padding: 8px 14px; font-size: 0.78rem; }
}