/* ============================================
   LIVESCORE - 企业级足球直播平台
   V4.0 - 统一设计系统
   ============================================ */

:root {
    /* 背景色系 - 深色科技风 */
    --bg-primary: #060a10;
    --bg-secondary: #0c1929;
    --bg-tertiary: #0f1f33;
    --bg-card: #0c1929;
    --bg-card-hover: #0f1f33;
    --bg-elevated: #101d2e;
    
    /* 边框 - 主题蓝色调 */
    --border-default: rgba(14, 165, 233, 0.15);
    --border-hover: rgba(14, 165, 233, 0.4);
    --border-active: rgba(14, 165, 233, 0.6);
    --border-color: rgba(14, 165, 233, 0.15);
    
    /* 气泡已更紧致 */

    /* 文字色系 */
    --text-primary: #f0f6fc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Bootstrap body 文字颜色覆盖 */
    --bs-body-color: #f0f6fc;
    
    /* 强调色 - 统一色板 */
    --accent-primary: #0ea5e9;
    --accent-blue: #3b82f6;
    --accent-cyan: #06b6d4;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --accent-orange: #f59e0b;
    --accent-purple: #a855f7;
    
    /* 渐变 - 企业级风格 */
    --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --gradient-live: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-hot: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --gradient-brand: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    --gradient-card: linear-gradient(180deg, #0c1929 0%, #080f1a 100%);
    
    /* 阴影 - 发光效果 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow-blue: 0 0 30px rgba(14, 165, 233, 0.2);
    --shadow-glow-red: 0 0 30px rgba(239, 68, 68, 0.2);
    --shadow-glow-green: 0 0 30px rgba(34, 197, 94, 0.2);
    
    /* 过渡 - 统一动效 */
    --transition-fast: 0.15s ease;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 自定义更小的左边距 */
.ms-05 {
    margin-left: 0.125rem !important;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body.dark-theme {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ==================== 导航栏（统一设计系统） ==================== */
.navbar {
    background: linear-gradient(180deg, rgba(6, 10, 16, 0.98) 0%, rgba(6, 10, 16, 0.95) 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(14, 165, 233, 0.1);
    padding: 0.5rem 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 0 60px rgba(14, 165, 233, 0.05);
    z-index: 1000;
    position: relative;
}

/* 导航栏顶部微妙光晕 */
.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.3), transparent);
    opacity: 0.5;
}

.brand-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: white;
    transition: var(--transition);
}

.brand-icon:hover {
    transform: scale(1.05);
}

.brand-text {
    font-weight: 800;
    font-size: 1.3rem;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 导航菜单项 - 类似筛选标签风格 */
.nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.6rem 1.3rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #a8b3cf;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.2;
    height: 40px;
    position: relative;
    overflow: hidden;
}

/* 微妙的背景动画效果 */
.nav-link-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
    z-index: -1;
}

.nav-link-icon:hover::before {
    left: 100%;
}

.nav-link-icon:hover {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 20px rgba(14, 165, 233, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.nav-link-icon.active {
    background: rgba(14, 165, 233, 0.08);
    color: #e9f4ff;
    border: 1px solid rgba(96, 165, 250, 0.35);
    box-shadow: 0 12px 28px rgba(9, 16, 33, 0.35);
    border-radius: 9px;
    letter-spacing: 0.4px;
    text-shadow: none;
    animation: activatePulse 0.4s ease-out;
    position: relative;
    overflow: hidden;
}

@keyframes activatePulse {
    0% { transform: translateY(-2px) scale(1); }
    50% { transform: translateY(-3px) scale(1.02); }
    100% { transform: translateY(-2px) scale(1); }
}

.nav-link-icon.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    animation: none;
}

@keyframes activeShimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* 徽章样式 */
.nav-link-icon .badge {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3) 0%, rgba(6, 95, 170, 0.3) 100%);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: 16px;
    border: 1px solid rgba(14, 165, 233, 0.4);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-link-icon:hover .badge {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link-icon .badge.bg-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border: 1px solid rgba(220, 38, 38, 0.6);
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.6rem;
    padding: 2px 5px;
    min-height: 14px;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 红色徽章闪烁效果 */
.nav-link-icon .badge.bg-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: badgeShimmer 2s ease-in-out infinite;
}

@keyframes badgeShimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.nav-link-icon .badge.bg-primary {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35) 0%, rgba(6, 95, 170, 0.35) 100%);
    color: #ffffff;
    border: 1px solid rgba(14, 165, 233, 0.5);
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-link-icon.active .badge {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.4) 0%, rgba(6, 95, 170, 0.4) 100%);
    color: #ffffff;
    border-color: rgba(14, 165, 233, 0.6);
    box-shadow: 0 3px 15px rgba(14, 165, 233, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 图标样式 - 垂直居中 */
.nav-link-icon i {
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    position: relative;
    height: 1.2em;
}

.nav-link-icon:hover i {
    transform: scale(1.05);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

.nav-link-icon.active i {
    color: #60d5ff;
    filter: drop-shadow(0 0 6px rgba(96, 213, 255, 0.35));
    transform: scale(1.05);
}

/* 菜单文字垂直居中 */
.nav-link-icon span {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    font-weight: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.nav-link-icon:hover span {
    color: #f0f6fc;
}

.nav-link-icon.active span {
    color: #60d5ff;
    text-shadow: 0 0 10px rgba(96, 213, 255, 0.3);
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #22d3ee;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.search-box {
    background: rgba(14, 165, 233, 0.05);
    border-radius: var(--radius-full);
    padding: 0.5rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-default);
    transition: var(--transition);
}

.search-box:focus-within {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow-blue);
    background: rgba(14, 165, 233, 0.08);
}

.search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    width: 180px;
    font-size: 0.875rem;
}

/* 顶部语言切换按钮：图标 + 简称，无圆形底、无边框 */
.lang-switch-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    padding-inline: 0.25rem;
    width: auto;
    height: auto;
    border-radius: 0;
    margin-left: 0;
}

.lang-switch-btn:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--accent-primary);
    transform: none;
}

/* 导航栏语言下拉菜单使用暗色背景样式 */
.navbar .dropdown-menu {
    background: linear-gradient(180deg, #0b1220 0%, #020617 100%);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.navbar .dropdown-menu .dropdown-item {
    color: var(--text-secondary);
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.85);
}

.search-box input::placeholder { color: var(--text-muted); }
.search-box i { 
    color: var(--accent-primary); 
    font-size: 0.875rem;
    transition: var(--transition);
}

.search-box:focus-within i {
    transform: scale(1.1);
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    margin-left: 4px;
    position: relative;
    font-size: 0.875rem;
}

.btn-icon:hover {
    color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-blue);
}

.notification-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--gradient-live);
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-glow-red);
    animation: pulse 2s ease-in-out infinite;
}

/* ==================== 导航菜单智能自适应 ==================== */

/* 导航栏容器优化 */
.navbar-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    height: 68px;
    gap: 0.5rem;
    justify-content: space-between;
    position: relative;
}

/* 容器内部微妙光效 */
.navbar-container::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ==================== 导航菜单 ==================== */
.navbar-nav {
    display: flex;
    align-items: start;
    gap: 3px;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 品牌区域优化 */
.navbar-brand {
    flex-shrink: 0;
    margin-right: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-brand:hover {
    transform: translateY(-1px);
}

.navbar-brand:hover .brand-icon {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
}

.navbar-brand:hover .brand-text {
    filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.4));
}

/* 搜索框优化 */
.search-box {
    flex-shrink: 0;
    margin-left: 1rem;
}

/* 响应式断点 */
@media (max-width: 1399px) {
    .nav-link-icon {
        padding: 0.55rem 1.1rem;
        gap: 7px;
        font-size: 0.85rem;
        height: 38px;
        border-radius: 9px;
    }
    .nav-link-icon i { 
        font-size: 0.85rem;
        line-height: 1.2;
        height: 1.2em;
    }
    .navbar-nav { gap: 2px; }
}

@media (max-width: 1199px) {
    .nav-link-icon {
        padding: 0.5rem 0.9rem;
        gap: 6px;
        font-size: 0.8rem;
        height: 36px;
        border-radius: 8px;
    }
    .nav-link-icon i { 
        font-size: 0.8rem;
        line-height: 1.2;
        height: 1.2em;
    }
    .navbar-nav { gap: 1px; }
    .navbar-brand { margin-right: 0.5rem; }
}

@media (max-width: 1099px) {
    .nav-link-icon {
        padding: 0.45rem 0.8rem;
        gap: 5px;
        font-size: 0.75rem;
        height: 34px;
        border-radius: 7px;
    }
    .nav-link-icon i { 
        font-size: 0.75rem;
        line-height: 1.2;
        height: 1.2em;
    }
    .navbar-nav { gap: 1px; }
    .nav-link-icon .badge { 
        font-size: 0.55rem; 
        padding: 2px 6px;
        min-height: 16px;
    }
}

/* ==================== 智能搜索框 ==================== */

/* 搜索图标按钮（PC 端显示，移动端隐藏） */
.search-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: none;
}

.search-icon-btn i {
    font-size: 0.9rem;
}

/* hover 效果与收藏按钮一致 */
.search-icon-btn:hover,
.search-icon-btn:focus {
    color: var(--accent-primary);
    background: transparent;
    border: none;
    box-shadow: var(--shadow-glow-blue);
    transform: translateY(-2px);
}

/* 搜索弹出框 */
.search-popup {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.search-popup.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.search-popup-content {
    /* 简化为透明容器，仅保留中间的胶囊输入框 */
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    min-width: 0;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
    border-radius: 999px;
    padding: 0.45rem 1.4rem;
    transition: all 0.25s ease;
    border: 1px solid rgba(148, 163, 184, 0.6); /* 实线边框 */
    box-shadow: none;
}

.search-input-wrapper:focus-within {
    border-color: rgba(56, 189, 248, 0.9);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.25);
}

.search-input-wrapper i {
    color: var(--accent-primary);
    font-size: 1rem;
}

.search-input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.search-input-wrapper input::placeholder {
    color: var(--text-muted);
}

.search-close-btn {
    color: var(--text-secondary);
    transition: var(--transition);
}

.search-close-btn:hover {
    color: var(--accent-primary);
}

/* 搜索框默认收起状态 - 显示搜索图标，隐藏完整搜索框 */

/* 默认状态：隐藏搜索框，显示图标 */
.navbar-container.search-collapsed .search-box {
    display: none !important;
}

.navbar-container.search-collapsed .search-icon-btn {
    display: flex !important;
}

/* 搜索收起时菜单项紧凑 */
.navbar-container.search-collapsed .nav-link-icon {
    padding: 0.6rem 0.95rem;
    font-size: 0.9rem;
    height: 40px;
    border-radius: 10px;
}

/* 992px 以下：移动端隐藏搜索图标按钮（使用移动端搜索） */
@media (max-width: 991.98px) {
    .search-icon-btn {
        display: none !important;
    }
}

/* ==================== 移动端菜单内用户操作区 ==================== */

.mobile-menu-actions {
    display: none;
    padding: 0 0 0.75rem 0;
    margin-top: 0.25rem;
    border-top: none;
}

/* 当顶部按钮溢出时隐藏顶部按钮 */
.navbar-container.mobile-overflow .mobile-user-actions {
    display: none !important;
}

/* 移动端菜单内操作区始终显示 */
@media (max-width: 991.98px) {
    .mobile-menu-actions {
        display: block !important;
    }
}

/* PC端隐藏移动端菜单操作区 */
@media (min-width: 992px) {
    .mobile-menu-actions {
        display: none !important;
    }
}

/* 确保移动端用户操作区在移动端始终可见 */
@media (max-width: 991.98px) {
    .mobile-user-actions {
        display: flex !important;
    }
}

/* 移动端快捷操作标题简化为小号文字，贴近菜单 */
.mobile-menu-actions-title {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.4rem 0.15rem;
    font-weight: 500;
}

.mobile-menu-actions-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    cursor: pointer;
}

.mobile-action-btn:hover {
    background: rgba(15, 23, 42, 0.6);
    color: var(--accent-primary);
}

.mobile-action-btn i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.mobile-action-btn .notification-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    min-width: 16px;
    height: 16px;
    font-size: 0.6rem;
}

.mobile-action-dropdown {
    width: 100%;
}

.mobile-action-dropdown .dropdown-toggle::after {
    margin-left: auto;
}

.mobile-action-dropdown .dropdown-menu {
    width: 100%;
}

/* 移动端搜索弹出框位置调整 */
@media (max-width: 768px) {
    .search-popup {
        top: 60px;
        left: 1rem;
        right: 1rem;
        transform: none;
        width: auto;
    }
    
    .search-popup-content {
        min-width: auto;
        padding: 0.75rem;
    }
    
    .search-input-wrapper {
        padding: 0.6rem 0.75rem;
    }
}

/* 超大屏幕优化 */
@media (min-width: 1920px) {
    .navbar-container {
        padding: 0 3rem;
    }
}

@media (min-width: 2560px) {
    .navbar-container {
        padding: 0 5rem;
    }
}

@media (max-width: 991.98px) {
    .navbar-container {
        padding: 0 1rem !important;
    }
}

/* PC端用户操作区样式（现在在容器内部） */
.user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* 用户操作区渐进式缩放 */
@media (max-width: 1199px) {
    .user-actions {
        gap: 5px;
    }
    
    .btn-icon {
        padding: 0.4rem !important;
    }
}

@media (max-width: 1099px) {
    .user-actions {
        gap: 4px;
    }
    
    .btn-icon {
        padding: 0.35rem !important;
    }
    
    .lang-switch-btn span {
        display: none;
    }
}

/* ==================== 主内容区 ==================== */
.main-content {
    padding-bottom: 80px;
    min-height: calc(100vh - 160px);
}

.main-content .container,
.main-content .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.container-fluid {
    max-width: none; /* 移除固定宽度限制，跟随页面宽度 */
    padding: 0 2rem;
}

/* 超大屏幕优化 - 增加两侧边距 */
@media (min-width: 1920px) {
    .navbar-container {
        padding: 0 4rem;
    }
    
    .main-content .container,
    .main-content .container-fluid {
        padding: 0 4rem;
    }
    
    .container-fluid {
        padding: 0 4rem;
    }
}

@media (min-width: 2560px) {
    .navbar-container {
        padding: 0 6rem;
    }
    
    .main-content .container,
    .main-content .container-fluid {
        padding: 0 6rem;
    }
    
    .container-fluid {
        padding: 0 6rem;
    }
}

/* ==================== 导视带 ==================== */
.broadcast-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(180deg, #0c1929 0%, #080f1a 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.08);
    overflow: hidden;
}

/* 移动端：快讯条与导航栏之间增加间距 */
@media (max-width: 991.98px) {
    .broadcast-strip {
        margin-top: 0.75rem;
    }
    
    .navbar-container {
        padding: 0 1rem;
    }
    
    .main-content .container,
    .main-content .container-fluid {
        padding: 0 1rem;
    }

    /* 移动端焦点区观看按钮稍小 */
    .focus-btn {
        padding: 0.5rem 1.3em;
        font-size: 0.85rem;
        gap: 6px;
    }
}

.strip-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 999px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.strip-label i {
    font-size: 0.7rem;
}

.strip-content {
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.strip-scroll {
    display: flex;
    gap: 2rem;
    animation: stripScroll 30s linear infinite;
}

.strip-scroll:hover {
    animation-play-state: paused;
}

@keyframes stripScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: #e2e8f0;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.strip-item:hover {
    color: #0ea5e9;
}

.strip-item.no-live {
    color: #64748b;
}

.strip-live-dot {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

.strip-teams {
    font-weight: 600;
}

.strip-time {
    color: #ef4444;
    font-weight: 700;
    font-size: 0.75rem;
}

.strip-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-item.live {
    color: #ef4444;
}

.stat-item.live i {
    font-size: 0.5rem;
    animation: pulse 1.5s ease-in-out infinite;
}

/* ==================== 今日焦点 ==================== */
.focus-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, #0a1628 0%, #060d14 100%);
    border: 1px solid rgba(14, 165, 233, 0.3);
    box-shadow: 0 0 60px rgba(14, 165, 233, 0.12), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.focus-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14, 165, 233, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 100%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    animation: focusBgPulse 6s ease-in-out infinite;
}

@keyframes focusBgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.focus-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

.focus-badge {
    margin-bottom: 1.5rem;
}

.focus-live, .focus-hot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 桌面端左对齐 */
.focus-badge {
    display: flex;
    justify-content: flex-start;
}

/* 隐藏桌面端状态徽章 */
.focus-status-desktop {
    display: none !important;
}

.focus-live {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    animation: focusLivePulse 2s ease-in-out infinite;
}

/* 顶部栏 - 桌面端也显示 */
.focus-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: relative;
    z-index: 2;
}

/* 右上角状态标签样式 */
.focus-status-corner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 999px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.focus-status-corner .status-text {
    color: white;
    font-weight: 700;
}

.focus-status-corner .status-minute {
    padding-left: 0.35rem;
    color: white;
    font-weight: 700;
}

.focus-status-corner.focus-status-text .status-text {
    color: white;
}

.focus-status-corner.focus-status-text .status-minute {
    color: white;
}

@keyframes focusLivePulse {
    0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 40px rgba(239, 68, 68, 0.5); }
}

.focus-hot {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
}

/* ==================== 直播类型标签 ==================== */
/* 视频直播 - 红色动态 */
.stream-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.stream-badge-video {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    animation: streamBadgePulse 2s ease-in-out infinite;
}

.stream-badge-video .stream-dot {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: blink 1s infinite;
}

.stream-badge-video i {
    font-size: 0.65rem;
}

/* 文字直播 - 绿色静态 */
.stream-badge-text {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.1) 100%);
    /* border: 1px solid rgba(34, 197, 94, 0.4); */
    color: #22c55e;
}

.stream-badge-text i {
    font-size: 0.65rem;
}

@keyframes streamBadgePulse {
    0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.4); }
}

/* 即将开始 - 柔和的小标签 */
.stream-badge-subtle {
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    opacity: 0.85;
}

.stream-badge-subtle.stream-badge-video {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.stream-badge-subtle.stream-badge-text {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.focus-match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1.5rem;
}

.focus-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 120px;
    flex: 1;
    max-width: 200px;
}

.focus-team img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

.focus-hero:hover .focus-team img {
    border-color: rgba(14, 165, 233, 0.3);
}

/* 仅保留音量图标，隐藏 Plyr 视频控件中的音量滑块 */
.plyr__controls .plyr__volume input[type="range"],
.plyr__controls .plyr__volume .plyr__volume-input {
    display: none !important;
}

.focus-team span {
    font-size: 1rem;
    font-weight: 700;
    color: #f0f6fc;
}

.focus-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.score-big {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 3.5rem;
    font-weight: 800;
    color: #f0f6fc;
    font-feature-settings: 'tnum';
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.score-big .sep {
    color: #374151;
    font-weight: 300;
}

.score-big.vs {
    font-size: 2rem;
    color: #64748b;
    font-weight: 700;
}

.focus-minute {
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 999px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    animation: pulse 1.5s ease-in-out infinite;
}

/* 焦点区域状态徽章 - 同时显示状态和分钟数 */
.focus-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 999px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.focus-status-badge .pulse-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: blink 1s infinite;
}

.focus-status-badge .status-text {
    font-weight: 700;
    color: white;
}

.focus-status-badge .status-minute {
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: 700;
    color: white;
}

.focus-time {
    color: #64748b;
    font-size: 1rem;
    font-weight: 600;
}

.focus-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    color: #64748b;
    font-size: 0.875rem;
}

.focus-meta i {
    margin-right: 6px;
    color: #0ea5e9;
}

.focus-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 999px;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.3), 0 4px 15px rgba(14, 165, 233, 0.2);
}

.focus-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 50px rgba(14, 165, 233, 0.4), 0 8px 25px rgba(14, 165, 233, 0.3);
    color: #fff;
}

/* ==================== 筛选标签（企业级升级） ==================== */
.filter-tabs {
    display: flex;
    gap: 6px;
    padding: 0.5rem;
    background: linear-gradient(180deg, #0c1929 0%, #080f1a 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(14, 165, 233, 0.15);
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.05);
}

.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tab {
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-tab:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

.filter-tab.active {
    background: linear-gradient(180deg, #0c2d4d 0%, #061525 100%);
    color: #0ea5e9;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(14, 165, 233, 0.1);
}

.filter-tab.live-tab.active {
    background: linear-gradient(180deg, #0c2d4d 0%, #061525 100%);
    color: #0ea5e9;
}

.filter-tab .badge {
    background: rgba(14, 165, 233, 0.15);
    color: #0ea5e9;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.filter-tab.active .badge {
    background: rgba(14, 165, 233, 0.25);
}


/* ==================== 比赛卡片（企业级升级） ==================== */
.match-card {
    background: linear-gradient(180deg, #0c1929 0%, #080f1a 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: block;
    box-shadow: 0 0 25px rgba(14, 165, 233, 0.06), 0 10px 30px -10px rgba(0, 0, 0, 0.4);
    position: relative;
}

.match-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.match-card:hover::before {
    opacity: 1;
}

.match-card:hover {
    border-color: rgba(14, 165, 233, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 0 40px rgba(14, 165, 233, 0.12), 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* 直播卡片保持和普通卡片一样的外观 */
.match-card.live {
    /* 继承普通卡片样式 */
    border-color: inherit;
}

/* 视频直播 - 左边框红色 */
.match-card.stream-video {
    border-left: 3px solid #ef4444;
    box-shadow: -2px 0 12px rgba(239, 68, 68, 0.3);
}

/* 文字直播 - 左边框绿色 */
.match-card.stream-text {
    border-left: 3px solid #22c55e;
    box-shadow: -2px 0 12px rgba(34, 197, 94, 0.3);
}

@keyframes liveCardPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.match-card.hot {
    border-color: rgba(245, 158, 11, 0.25);
}

.match-card.hot::before {
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.4), transparent);
    opacity: 0.5;
}

.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.league-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.league-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    background: white;
}

.league-name {
    font-size: 0.75rem;
    color: #a0aec0;
    font-weight: 600;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match-time {
    font-size: 0.75rem;
    color: #a0aec0;
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
}

.match-body {
    padding: 1rem;
}

.teams-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.team-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: var(--transition);
}

.match-card:hover .team-logo {
    border-color: var(--border-hover);
    transform: scale(1.05);
}

.team-name {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    color: #e2e8f0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.5rem;
}

.score {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.75rem;
    font-weight: 800;
}

.score-home, .score-away {
    min-width: 28px;
    text-align: center;
    color: #f0f6fc;
}

.score-divider {
    color: #6b7280;
    font-weight: 300;
    font-size: 1.25rem;
}

.match-status {
    margin-top: 12px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.match-status .pulse-dot {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    animation: blink 1s infinite;
}

/* 直播状态按钮 - 转换为观看直播按钮样式 */
.match-card.live .match-status.status-live {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    color: white;
    padding: 6px 14px;
    font-size: 0.7rem;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
    animation: liveStatusPulse 2s ease-in-out infinite;
    cursor: pointer;
}

.match-card.live .match-status.status-live .pulse-dot {
    background: white;
}

.match-card.live .match-status.status-live::before {
    display: none;
}

@keyframes liveStatusPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.6); }
}

.status-live {
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.4);
    color: var(--accent-primary);
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.2);
}

.status-live::before {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--accent-primary);
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

.status-ht {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: var(--accent-orange);
}

.status-ft {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--text-secondary);
}

.status-ns {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: var(--accent-blue);
}

.match-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
    border-top: 1px solid rgba(14, 165, 233, 0.08);
}

.match-stats {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.match-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color var(--transition);
}

.match-card:hover .match-stats span {
    color: var(--text-secondary);
}

.match-stats i {
    font-size: 0.6875rem;
}

.watch-btn {
    padding: 0.375rem 0.875rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: var(--radius-full);
    color: var(--accent-green);
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.watch-btn:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: var(--shadow-glow-green);
    color: #4ade80;
    transform: translateY(-1px);
}

.watch-btn i {
    font-size: 0.5rem;
}

/* ==================== 区块标题 ==================== */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(14, 165, 233, 0.1);
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #0ea5e9, transparent);
}

.section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    letter-spacing: -0.01em;
}

.section-title i {
    color: #0ea5e9;
    font-size: 1rem;
}

.section-title .badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    /* color: #ef4444; */
}

.view-all {
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-sm);
    transition: all 0.25s ease;
}

.view-all:hover {
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.1);
}

.view-all i {
    font-size: 0.625rem;
    transition: transform 0.25s ease;
}

.view-all:hover i {
    transform: translateX(3px);
}

/* ==================== VS 样式 ==================== */
.vs-style {
    background: transparent !important;
}

.vs-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 2px;
}

/* ==================== 统一按钮系统 ==================== */
.btn-unified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-unified::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.btn-unified:hover::before {
    left: 100%;
}

/* 主按钮 - 蓝色 */
.btn-primary-unified {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: var(--shadow-glow-blue), var(--shadow-sm);
}

.btn-primary-unified:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(14, 165, 233, 0.35), var(--shadow-md);
    color: #fff;
}

/* 成功按钮 - 绿色 */
.btn-success-unified {
    background: var(--gradient-success);
    color: #fff;
    box-shadow: var(--shadow-glow-green), var(--shadow-sm);
}

.btn-success-unified:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.35), var(--shadow-md);
    color: #fff;
}

/* 危险按钮 - 红色 */
.btn-danger-unified {
    background: var(--gradient-live);
    color: #fff;
    box-shadow: var(--shadow-glow-red), var(--shadow-sm);
}

.btn-danger-unified:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.35), var(--shadow-md);
    color: #fff;
}

/* 幽灵按钮 - 透明边框 */
.btn-ghost-unified {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}

.btn-ghost-unified:hover {
    background: rgba(14, 165, 233, 0.1);
    border-color: var(--border-hover);
    color: var(--accent-primary);
    transform: translateY(-1px);
}

/* 胶囊按钮 */
.btn-pill {
    border-radius: var(--radius-full);
}

/* 小尺寸 */
.btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
}

/* 大尺寸 */
.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}

/* ==================== 统一图标样式 ==================== */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.2);
    color: var(--accent-primary);
    font-size: 0.875rem;
    transition: var(--transition);
}

.icon-box:hover {
    background: rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.4);
    transform: scale(1.05);
}

.icon-box.icon-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
    color: var(--accent-green);
}

.icon-box.icon-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.icon-box.icon-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
    color: var(--accent-orange);
}

/* 圆形图标 */
.icon-circle {
    border-radius: var(--radius-full);
}

/* ==================== 统一徽章样式 ==================== */
.badge-unified {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-live {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-red);
}

.badge-live::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent-red);
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

.badge-hot {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--accent-orange);
}

.badge-new {
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.3);
    color: var(--accent-primary);
}

.badge-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--accent-green);
}

/* ==================== 统一 hover 动效 ==================== */
.hover-lift {
    transition: transform var(--transition), box-shadow var(--transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-glow {
    transition: box-shadow var(--transition);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow-blue);
}

.hover-scale {
    transition: transform var(--transition);
}

.hover-scale:hover {
    transform: scale(1.02);
}

.hover-border {
    transition: border-color var(--transition);
}

.hover-border:hover {
    border-color: var(--border-hover);
}

/* 图标旋转效果 */
.hover-rotate i {
    transition: transform var(--transition);
}

.hover-rotate:hover i {
    transform: rotate(15deg);
}

/* 箭头位移效果 */
.hover-arrow i:last-child {
    transition: transform var(--transition);
}

.hover-arrow:hover i:last-child {
    transform: translateX(4px);
}

/* ==================== 统一动画 ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.animate-fadeInUp {
    animation: fadeInUp 0.4s ease forwards;
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease forwards;
}

.animate-slideInRight {
    animation: slideInRight 0.4s ease forwards;
}

/* 加载骨架屏 */
.skeleton {
    background: linear-gradient(90deg, #0c1929 25%, #1a2e44 50%, #0c1929 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ==================== 侧边栏（企业级升级） ==================== */
.league-sidebar {
    background: var(--gradient-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    overflow: hidden;
    box-shadow: var(--shadow-glow-blue), var(--shadow-md);
}

/* ==================== 通用卡片样式（基于 league-sidebar 设计） ==================== */
.custom-card {
    background: var(--gradient-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    overflow: hidden;
    box-shadow: var(--shadow-glow-blue), var(--shadow-md);
    margin-bottom: 1.5rem;
}

.custom-card .card-header {
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid var(--border-default);
    padding: 0.875rem 1rem;
    position: relative;
}

.custom-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.2), transparent);
}

.custom-card .card-body {
    padding: 1rem;
}

.league-sidebar .card-header {
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid var(--border-default);
    padding: 0.875rem 1rem;
    position: relative;
}

.league-sidebar .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.2), transparent);
}

.league-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: var(--transition);
    position: relative;
}

.league-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-primary);
    opacity: 0;
    transition: opacity var(--transition);
}

.league-item:last-child {
    border-bottom: none;
}

.league-item:hover {
    background: rgba(14, 165, 233, 0.08);
}

.league-item:hover::before {
    opacity: 1;
}

.league-item.active {
    background: rgba(14, 165, 233, 0.1);
}

.league-item.active::before {
    opacity: 1;
}

.league-item:hover .league-item-name {
    color: var(--accent-primary);
}

.league-item img,
.league-item i {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.15);
    padding: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: var(--accent-primary);
    transition: var(--transition);
}

.league-item:hover img,
.league-item:hover i {
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.15);
}

.league-item-info {
    flex: 1;
    min-width: 0;
}

.league-item-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition);
}

.league-item-country {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.league-item-count {
    background: var(--accent-red);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    min-width: 20px;
    text-align: center;
}

.league-item.active {
    background: rgba(88, 166, 255, 0.1);
}

.league-item.active .league-item-name {
    color: var(--accent-primary);
}

/* ==================== Footer（统一设计系统） ==================== */
.footer {
    background: linear-gradient(180deg, #0c1929 0%, var(--bg-primary) 100%);
    border-top: 1px solid var(--border-default);
    padding: 2.5rem 0 1.5rem;
    margin-top: 3rem;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.3), transparent);
}

.footer-brand {
    font-size: 1.25rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.footer-brand i {
    color: var(--accent-primary);
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

.footer-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-title::before {
    content: '';
    width: 3px;
    height: 12px;
    background: var(--accent-primary);
    border-radius: 2px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.625rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-links a:hover {
    color: var(--accent-primary);
    transform: translateX(4px);
}

.social-links {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

.social-links a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-blue);
}

.app-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.app-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.625rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: var(--transition);
}

.app-btn i {
    font-size: 1.125rem;
}

.app-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.footer-bottom-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.footer-bottom-links a {
    color: #8b949e;
    text-decoration: none;
    font-size: 0.75rem;
    transition: var(--transition);
}

.footer-bottom-links a:hover {
color: var(--accent-primary);
}

/* ==================== 响应式布局优化 ==================== */

/* ==================== 超大屏幕优化 (4K 及以上 2560px+) ==================== */
@media (min-width: 2560px) {

/* 主内容区网格：大屏幕时3列卡片 */
.row.g-3 > .col-md-6 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}

/* 侧边栏宽度调整 */
.col-lg-3 {
flex: 0 0 20%;
max-width: 20%;
}

.col-lg-9 {
flex: 0 0 80%;
max-width: 80%;
}

.section-title {
font-size: 1.5rem;
}

.match-card {
min-height: 220px;
}

.team-logo {
width: 56px;
height: 56px;
}

.team-name {
font-size: 1rem;
}

.score {
font-size: 2.25rem;
}

/* 侧边栏项目优化 */
.league-item {
padding: 1rem 1.25rem;
}

.league-item img {
width: 40px;
height: 40px;
}

/* 新闻卡片优化 */
.news-card {
min-height: 280px;
}

.news-title {
font-size: 1.25rem;
}
}

/* ==================== 大屏幕优化 (1920px+) ==================== */
@media (min-width: 1920px) {
.focus-hero {
padding: 0.5rem;
}

.focus-content {
padding: 3rem 4rem;
}

.focus-team img {
width: 100px;
height: 100px;
}

.score-big {
font-size: 4.5rem;
}

.focus-btn {
padding: 1rem 2.5rem;
font-size: 1.1rem;
}

/* 主内容区优化 */
.section-header {
margin-bottom: 1.5rem;
}

.section-title {
font-size: 1.25rem;
}

/* 卡片间距优化 */
.row.g-3 {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 1.5rem;
}
}

/* ==================== 宽屏优化 (1600px-1919px) ==================== */
@media (min-width: 1600px) and (max-width: 1919px) {
.container-fluid {
padding: 0 3rem;
}

.focus-content {
padding: 2.75rem 3.5rem;
}

.focus-team img {
width: 90px;
height: 90px;
}

.score-big {
font-size: 4rem;
}
}

/* ==================== 中等屏幕 (1400px-1599px) ==================== */
@media (min-width: 1400px) and (max-width: 1599px) {
.container-fluid {
padding: 0 2.5rem;
}

.navbar-container {
padding: 0 2.5rem;
}

.focus-content {
padding: 2.5rem 3rem;
}
}

/* ==================== 响应式布局优化 ==================== */

/* 常规屏幕 (1200px-1399px) */
@media (max-width: 1399px) {
    .container-fluid {
        padding: 0 1.5rem;
    }
    
    .navbar-container {
        padding: 0 1.5rem;
    }
}

@media (max-width: 1200px) {
    .container-fluid {
        padding: 0 1rem;
    }
    
    .navbar-container {
        padding: 0 1rem;
    }
}

@media (max-width: 992px) {
    
    .search-box {
        display: none;
    }
    
    .user-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .user-actions .btn-icon:not(:last-child) {
        display: flex;
    }
    
    .col-lg-3 {
        margin-top: 2rem;
    }
    
    /* 平板端卡片布局优化 */
    .match-card {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    
    /* 导视带响应式 */
    .broadcast-strip {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 1.3rem;
    }
    
    .strip-label {
        font-size: 0.6875rem;
        padding: 0.25rem 0.625rem;
    }
    
    .strip-content {
        order: 3;
        width: 100%;
    }
    
    .strip-stats {
        border-left: none;
        padding-left: 0;
        gap: 0.75rem;
    }
    
    .stat-item {
        font-size: 0.6875rem;
    }
    
    /* 焦点区域响应式 */
    .focus-hero {
        margin: 0 -0.75rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        position: relative;
    }
    
    /* 移动端顶部栏 - 调整内边距 */
    .focus-top-bar {
        padding: 0.75rem 1rem;
    }
    
    .focus-badge-left .focus-live,
    .focus-badge-left .focus-hot {
        padding: 0.35rem 0.75rem;
        font-size: 0.7rem;
    }
    
    .focus-badge-left .pulse-dot {
        width: 6px;
        height: 6px;
    }
    
    .focus-content {
        padding: 0.5rem 1rem 1.25rem;
    }
    
    .focus-match {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .focus-team {
        min-width: 70px;
        flex: 1;
    }
    
    .focus-team img {
        width: 48px;
        height: 48px;
        padding: 4px;
    }
    
    .focus-team span {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    .focus-score {
        flex-shrink: 0;
        text-align: center;
        min-width: 80px;
    }
    
    .score-big {
        font-size: 2rem;
        gap: 0.25rem;
        justify-content: center;
    }
    
    .focus-meta {
        flex-direction: row;
        gap: 1rem;
        margin-bottom: 1rem;
        font-size: 0.75rem;
        justify-content: center;
        text-align: center;
    }
    
    .focus-btn {
        padding: 0.5rem 1.25rem;
        font-size: 0.8rem;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: fit-content;
    }

    .filter-tabs {
        padding: 0.375rem;
        margin: 0 -0.75rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .filter-tab {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .section-header {
        /* flex-direction: column; */
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .match-body {
        padding: 1rem;
    }
    
    .team-logo {
        width: 44px;
        height: 44px;
    }
    
    .team-name {
        font-size: 0.75rem;
    }
    
    .score {
        font-size: 1.5rem;
    }
    
    .vs-text {
        font-size: 1rem;
    }
    
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer .row > div {
        margin-bottom: 1.5rem;
    }
    
    .footer .col-lg-4:last-child {
        margin-top: 0.5rem;
    }
    
    .app-buttons {
        justify-content: flex-start;
    }
    
    .footer-bottom-links {
        justify-content: center;
        margin-top: 1rem;
    }
    
    /* 比赛详情页移动端 */
    .match-detail-hero {
        margin: 0 0.5rem;
        border-radius: var(--radius-md);
        background: 
            url('/images/match-detail-bg.svg') center/cover,
            linear-gradient(180deg, rgba(10, 22, 40, 0.95) 0%, rgba(6, 13, 20, 0.95) 100%);
    }
    
    .match-detail-teams {
        padding: 2rem 1rem;
        gap: 1rem;
    }
    
    .match-detail-team img {
        width: 70px;
        height: 70px;
    }
    
    .match-detail-team h4 {
        font-size: 1rem;
    }
    
    .match-detail-score .score-display {
        font-size: 2.5rem;
        gap: 0.75rem;
    }
    
    .match-detail-score .match-status-badge {
        padding: 0.375rem 1rem;
        font-size: 0.75rem;
    }
    
    .btn-live-watch {
        padding: 0.5rem 1.25rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .brand-text {
        font-size: 1.1rem;
    }
    
    .brand-icon {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }
    
    .navbar-toggler {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .match-header,
    .match-footer {
        padding: 0.625rem 0.75rem;
    }
    
    .league-name {
        max-width: 100px;
    }
    
    .team-logo {
        width: 40px;
        height: 40px;
        padding: 6px;
    }
    
    .score {
        font-size: 1.25rem;
        gap: 6px;
    }
    
    .match-status {
        padding: 3px 8px;
        font-size: 0.625rem;
    }
    
    .footer-bottom-links {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    .social-links,
    .app-buttons {
        justify-content: center;
    }
    
    /* Footer H5 响应式 */
    .footer {
        padding: 1.5rem 0 1rem;
        margin-top: 2rem;
    }
    
    .footer .container {
        padding: 0 1rem;
    }
    
    .footer-brand {
        font-size: 1.1rem;
        justify-content: center;
    }
    
    .footer .col-lg-4:first-child {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    .footer .col-lg-4:first-child p {
        max-width: 280px;
        margin: 0 auto 1rem;
    }

    /* 移动端 footer 列表整体居中 */
    .footer .row {
        text-align: center;
        justify-content: center;
    }

    .footer .col-6 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-title {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .footer-links li {
        margin-bottom: 0.5rem;
    }
    
    .footer-links a {
        font-size: 0.75rem;
    }
    
    .footer .col-lg-4:last-child {
        margin-top: 1rem;
        text-align: center;
    }
    
    .footer .col-lg-4:last-child p {
        max-width: 250px;
        margin: 0 auto 0.75rem;
        font-size: 0.75rem;
    }
    
    .app-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
    }
    
    .app-btn i {
        font-size: 1rem;
    }
    
    .social-links a {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
    
    .footer hr {
        margin: 1.25rem 0;
    }
    
    .footer .row:last-child p {
        font-size: 0.6875rem;
        margin-bottom: 0.5rem;
    }
    
    /* 比赛详情页小屏幕 - 保持左右布局 */
    .match-detail-hero {
        margin: 0 -0.75rem;
        border-radius: 0;
        background: 
            url('/images/match-detail-bg.svg') center/cover,
            linear-gradient(180deg, rgba(10, 22, 40, 0.97) 0%, rgba(6, 13, 20, 0.97) 100%);
    }
    
    .match-detail-teams {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 1rem 0.5rem;
        gap: 0.25rem;
    }
    
    .match-detail-team {
        flex: 1;
    }
    
    .match-detail-team img {
        width: 45px;
        height: 45px;
    }
    
    .match-detail-team h4 {
        font-size: 0.75rem;
    }
    
    .match-detail-team small {
        font-size: 0.6rem;
    }
    
    .match-detail-score {
        flex-shrink: 0;
        padding: 0 0.25rem;
    }
    
    .match-detail-score .score-display {
        font-size: 1.75rem;
        gap: 0.25rem;
    }
    
    .match-detail-score .match-status-badge {
        padding: 0.2rem 0.5rem;
        font-size: 0.625rem;
        margin-top: 0.5rem;
    }
    
    .btn-live-watch {
        padding: 0.625rem 1.5rem;
        font-size: 0.8125rem;
    }
}

/* ==================== 新闻卡片 ==================== */
.news-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(180deg, #0c1929 0%, #0a1520 100%);
    border: 1px solid rgba(14, 165, 233, 0.3);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.1);
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 30px rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.4);
}

.news-card .news-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.news-featured .news-image {
    height: 280px;
}

.news-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: white;
}

.news-content {
    padding: 0.875rem;
}

.news-category {
    display: inline-block;
    background: var(--accent-primary);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.news-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.news-featured .news-title {
    font-size: 1.125rem;
    color: white;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.news-meta {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.breaking-badge {
    display: inline-block;
    background: var(--accent-red);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* ==================== 联赛卡片 ==================== */
.league-card {
    transition: var(--transition);
    background: linear-gradient(180deg, #0c1929 0%, #0a1520 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.1), inset 0 1px 0 rgba(14, 165, 233, 0.05);
}

.league-card:hover {
    transform: translateY(-3px);
    border-color: rgba(14, 165, 233, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 25px rgba(14, 165, 233, 0.2);
}

.league-card-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: 6px;
}

.league-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.league-card-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e2e8f0;
    transition: var(--transition);
}

.league-card:hover .league-card-name {
    color: #58a6ff;
}

/* ==================== 联赛详情页 ==================== */
.standings-table {
    width: 100%;
    border-collapse: collapse;
}

.standings-table th,
.standings-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.8125rem;
}

.standings-table th {
    background: rgba(3, 7, 18, 0.9);
    color: #e5e7eb;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.standings-table td {
    color: #d1d5db;
}

.standings-table tbody tr {
    transition: var(--transition);
}

.standings-table tbody tr:hover {
    background: rgba(88, 166, 255, 0.08);
}

.standings-table .position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.75rem;
}

.standings-table .position-1,
.standings-table .position-2,
.standings-table .position-3,
.standings-table .position-4 {
    background: linear-gradient(135deg, #1a5f2a 0%, #0d3518 100%);
    color: #3fb950;
}

.standings-table .position-5,
.standings-table .position-6 {
    background: linear-gradient(135deg, #1a3a5f 0%, #0d1f35 100%);
    color: #58a6ff;
}

.standings-table .team-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.standings-table .team-cell img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.standings-table .team-cell span {
    color: #e2e8f0;
    font-weight: 500;
}

.form-indicator {
    display: flex;
    gap: 3px;
}

.form-indicator span {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
}

.form-indicator .form-w {
    background: #3fb950;
    color: white;
}

.form-indicator .form-d {
    background: #8b949e;
    color: white;
}

.form-indicator .form-l {
    background: #f85149;
    color: white;
}

/* ==================== 比赛详情页（企业级升级） ==================== */
.match-detail-hero {
    background: 
        url('/images/match-detail-bg.svg') center/cover,
        linear-gradient(180deg, rgba(10, 22, 40, 0.95) 0%, rgba(6, 13, 20, 0.95) 100%);
    border: none;
    border-radius: var(--radius-lg);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 0 60px rgba(14, 165, 233, 0.12),
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
}

.match-detail-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(14, 165, 233, 0.1) 0%, transparent 100%),
        radial-gradient(ellipse 60% 30% at 20% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 100%),
        radial-gradient(ellipse 60% 30% at 80% 0%, rgba(6, 182, 212, 0.08) 0%, transparent 100%);
    pointer-events: none;
    /* 移除闪烁动画，固定亮度 */
}

.match-detail-hero.live {
    box-shadow: 
        0 0 80px rgba(14, 165, 233, 0.2),
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(14, 165, 233, 0.06);
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 16px;
}

@media (min-width: 992px) {
    .match-detail-hero,
    .match-detail-hero.live {
        width: calc(100% + 3rem);
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
}

/* 移动端修复 */
@media (max-width: 991px) {
    .match-detail-hero,
    .match-detail-hero.live {
        width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

@media (max-width: 576px) {
    .match-detail-hero,
    .match-detail-hero.live {
        width: calc(100% + 1.5rem);
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }
}

.match-detail-hero.live::before {
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(239, 68, 68, 0.15) 0%, transparent 100%),
        radial-gradient(ellipse 60% 30% at 20% 0%, rgba(251, 146, 60, 0.1) 0%, transparent 100%),
        radial-gradient(ellipse 60% 30% at 80% 0%, rgba(239, 68, 68, 0.1) 0%, transparent 100%);
    /* 直播时固定红色光晕，不闪烁 */
}

.match-detail-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem 3rem;
    gap: 1.5rem;
    position: relative;
}

.match-detail-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    transition: transform 0.3s ease;
}

.match-detail-team:hover {
    transform: translateY(-4px);
}

.match-detail-team img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 1rem;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

.match-detail-team:hover img {
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.15);
}

.match-detail-team h4 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.match-detail-team small {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.match-detail-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.5rem;
    position: relative;
}

.match-detail-score .score-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    font-feature-settings: 'tnum';
    letter-spacing: -0.02em;
}

.match-detail-score .score-display .home-score,
.match-detail-score .score-display .away-score {
    color: #f0f6fc;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.2);
    min-width: 60px;
    text-align: center;
}

.match-detail-hero.live .match-detail-score .score-display .home-score,
.match-detail-hero.live .match-detail-score .score-display .away-score {
    animation: scoreGlow 3s ease-in-out infinite;
}

@keyframes scoreGlow {
    0%, 100% { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2); }
    50% { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 30px rgba(14, 165, 233, 0.3); }
}

.match-detail-score .score-display .score-sep {
    color: #374151;
    font-weight: 200;
    font-size: 3rem;
}

.match-detail-score .match-status-badge {
    margin-top: 1.25rem;
    padding: 0.625rem 1.5rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

/* 直播中 - 红色脉冲 */
.match-detail-score .match-status-badge.live {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    color: white;
    box-shadow: 
        0 0 30px rgba(239, 68, 68, 0.5),
        0 4px 15px rgba(239, 68, 68, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: liveBadgePulse 1.5s ease-in-out infinite;
}

.match-detail-score .match-status-badge.live::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: pulse 1s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

@keyframes liveBadgePulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.5), 0 4px 15px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 45px rgba(239, 68, 68, 0.7), 0 4px 20px rgba(239, 68, 68, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: scale(1.02);
    }
}

/* 已结束 - 灰色渐变 */
.match-detail-score .match-status-badge.finished {
    background: linear-gradient(135deg, #374151 0%, #1f2937 50%, #111827 100%);
    color: #d1d5db;
    border: 1px solid rgba(75, 85, 99, 0.5);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.match-detail-score .match-status-badge.finished::before {
    content: '✓';
    font-size: 0.75rem;
}

/* 未开始 - 蓝色科技感 */
.match-detail-score .match-status-badge.upcoming {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
    color: white;
    border: 1px solid rgba(14, 165, 233, 0.4);
    box-shadow: 
        0 0 25px rgba(14, 165, 233, 0.3),
        0 4px 15px rgba(14, 165, 233, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.match-detail-score .match-status-badge.upcoming::before {
    content: '';
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

/* 中场休息 - 橙色 */
.match-detail-score .match-status-badge.halftime {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
    color: white;
    box-shadow: 
        0 0 25px rgba(249, 115, 22, 0.4),
        0 4px 15px rgba(249, 115, 22, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.match-detail-score .match-status-badge.halftime::before {
    content: '⏸';
    font-size: 0.7rem;
}

/* 加时赛 - 紫色 */
.match-detail-score .match-status-badge.extra-time {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 50%, #7e22ce 100%);
    color: white;
    box-shadow: 
        0 0 25px rgba(168, 85, 247, 0.4),
        0 4px 15px rgba(168, 85, 247, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: liveBadgePulse 2s ease-in-out infinite;
}

/* 点球大战 - 金色 */
.match-detail-score .match-status-badge.penalties {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    color: #1f2937;
    box-shadow: 
        0 0 25px rgba(251, 191, 36, 0.5),
        0 4px 15px rgba(251, 191, 36, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: liveBadgePulse 1.5s ease-in-out infinite;
}

.match-detail-score .match-status-badge.penalties::before {
    content: '⚽';
    font-size: 0.75rem;
}

/* 比赛统计 */
.stats-row {
    display: flex;
    align-items: center;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stats-row:last-child {
    border-bottom: none;
}

.stats-row .stats-value {
    width: 60px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: #f0f6fc;
}

.stats-row .stats-label {
    flex: 1;
    text-align: center;
    color: #8b949e;
    font-size: 0.8125rem;
}

.stats-row .stats-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.stats-row .stats-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.stats-row .stats-bar-fill.home {
    background: linear-gradient(90deg, #58a6ff 0%, #3b82f6 100%);
    float: right;
}

.stats-row .stats-bar-fill.away {
    background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
}

/* 比赛事件 */
.event-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: var(--transition);
}

.event-item:hover {
    background: rgba(88, 166, 255, 0.05);
}

.event-item:last-child {
    border-bottom: none;
}

.event-minute {
    width: 50px;
    text-align: center;
}

.event-minute span {
    background: #21262d;
    color: #8b949e;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.event-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8125rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.event-icon.goal {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(22, 163, 74, 0.15) 100%);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}

.event-row:hover .event-icon.goal {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.35);
    transform: scale(1.1);
}

.event-icon.yellow {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.15) 100%);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.event-icon.red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.15) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

.event-icon.sub {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.15) 100%);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.event-details {
    flex: 1;
}

.event-details strong {
    color: #e2e8f0;
    font-weight: 600;
}

.event-details span {
    color: #8b949e;
    margin-left: 0.5rem;
    font-size: 0.875rem;
}

.event-team {
    color: #6b7280;
    font-size: 0.8125rem;
}

/* 比赛事件时间线（企业级升级） */
.events-timeline {
    padding: 0.5rem 0;
    position: relative;
}

.events-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.3) 0%, rgba(14, 165, 233, 0.1) 50%, rgba(14, 165, 233, 0.3) 100%);
    transform: translateX(-50%);
}

.event-row {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.25s ease;
    position: relative;
}

.event-row:hover {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.05) 0%, transparent 30%, transparent 70%, rgba(14, 165, 233, 0.05) 100%);
}

.event-row:last-child {
    border-bottom: none;
}

.event-left,
.event-right {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 44px;
}

.event-left {
    justify-content: flex-end;
    text-align: right;
    padding-right: 1.5rem;
}

.event-right {
    justify-content: flex-start;
    text-align: left;
    padding-left: 1.5rem;
}

.event-time {
    width: 70px;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.event-time span {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #e2e8f0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(14, 165, 233, 0.2);
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.1);
    display: inline-block;
}

.event-row:hover .event-time span {
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.2);
}

.event-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.event-left .event-content {
    align-items: flex-end;
}

.event-left .event-icon {
    margin-left: 0.75rem;
    order: 1;
}

.event-left .event-content {
    order: 0;
}

.event-right .event-content {
    align-items: flex-start;
}

.event-right .event-icon {
    margin-right: 0.75rem;
}

.event-player {
    color: #f0f6fc;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
}

.event-detail {
    color: #64748b;
    font-size: 0.75rem;
}

/* 直播按钮（首页主 CTA，蓝色版卡片按钮风格） */
.btn-live-watch {
	padding: 0.5rem 1.25rem;
	background: rgba(14, 165, 233, 0.1);
	border: 1px solid rgba(14, 165, 233, 0.35);
	border-radius: var(--radius-md);
	color: #0ea5e9;
	font-size: 0.8rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.btn-live-watch:hover {
	background: rgba(14, 165, 233, 0.2);
	border-color: rgba(14, 165, 233, 0.6);
	box-shadow: var(--shadow-glow-blue);
	color: #38bdf8;
	transform: translateY(-1px);
}

.btn-live-watch:active {
	transform: translateY(0);
}

.btn-live-watch i {
	font-size: 0.6rem;
}

/* 首页焦点区观看按钮（蓝色版卡片按钮风格） */
.focus-btn {
	padding: 0.75rem 1.9rem;
	background: rgba(14, 165, 233, 0.1);
	border: 1px solid rgba(14, 165, 233, 0.35);
	border-radius: var(--radius-md);
	color: #0ea5e9;
	font-size: 0.95rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	text-decoration: none;
}

.focus-btn:hover {
	background: rgba(14, 165, 233, 0.2);
	border-color: rgba(14, 165, 233, 0.6);
	box-shadow: var(--shadow-glow-blue);
	color: #38bdf8;
	transform: translateY(-1px);
	text-decoration: none;
}

.focus-btn:active {
	transform: translateY(0);
}

.focus-btn i {
	font-size: 0.6rem;
}

/* ==================== 工具类 ==================== */
.text-warning {
    color: var(--accent-orange) !important;
}

.text-danger {
    color: var(--accent-red) !important;
}

.text-success {
    color: var(--accent-green) !important;
}

.text-muted-75 {
    color: rgb(255 255 255 / 75%) !important;
}

/* 覆盖 Bootstrap text-muted 让其更清晰 */
.text-muted {
    color: #9ca3af !important;
}

.card-body .text-muted {
    color: #a1a1aa !important;
}

/* 比赛数据标签更亮 */
.card-body .text-center.text-muted {
    color: #d1d5db !important;
}

/* 比赛详情页数据标签专用样式 */
.match-detail-hero .card-body .text-center.text-muted,
.card-body .text-center.text-muted.small {
    color: #f3f4f6;
    font-weight: 500;
}

.bg-danger {
    background: var(--accent-red) !important;
}

.bg-primary {
    background: var(--accent-primary) !important;
}

.bg-secondary {
    background: var(--bg-tertiary) !important;
}

.border-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.progress {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar.bg-primary {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%) !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.progress-bar.bg-warning {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* 比赛详情页-比赛数据卡片（企业级升级） */
.match-stats-card {
    background: linear-gradient(180deg, #0c1929 0%, #080f1a 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    box-shadow: 0 0 40px rgba(14, 165, 233, 0.08), 0 10px 40px -10px rgba(0, 0, 0, 0.4);
}

.match-stats-card .card-header {
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
    padding: 1rem 1.25rem;
}

.match-stats-card .card-header h5 {
    font-size: 0.9375rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.match-stats-card .card-header h5 i {
    color: #0ea5e9;
    font-size: 0.875rem;
}

.match-stats-card .card-body {
    color: #e2e8f0 !important;
    padding: 1.25rem;
}

.match-stats-card .card-body .row {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 0 !important;
}

.match-stats-card .card-body .row:last-of-type {
    border-bottom: none;
}

.match-stats-card .card-body .col-4 {
    font-weight: 600;
    font-size: 1rem;
}

.match-stats-card .card-body .text-muted,
.match-stats-card .card-body .text-center.text-muted,
.match-stats-card .card-body .text-center.text-muted.small {
    color: #94a3b8 !important;
    font-weight: 500;
    font-size: 0.8125rem;
}

/* 比赛详情页响应式 */
@media (max-width: 768px) {
    .match-detail-hero {
        border-radius: 0;
        margin: 0 -0.75rem;
        background: 
            url('/images/match-detail-bg.svg') center/cover,
            linear-gradient(180deg, rgba(10, 22, 40, 0.98) 0%, rgba(6, 13, 20, 0.98) 100%);
    }
    
    .match-detail-teams {
        flex-direction: row !important;
        padding: 1.5rem 0.5rem;
        gap: 0.5rem;
    }
    
    .match-detail-team {
        flex: 1;
    }
    
    .match-detail-team img {
        width: 50px;
        height: 50px;
        margin-bottom: 0.5rem;
    }
    
    .match-detail-team h4 {
        font-size: 0.8rem;
    }
    
    .match-detail-team small {
        font-size: 0.65rem;
    }
    
    .match-detail-score {
        flex-shrink: 0;
        padding: 0 0.25rem;
    }
    
    .match-detail-score .score-display {
        font-size: 2rem;
        gap: 0.375rem;
    }
    
    .match-detail-score .match-status-badge {
        padding: 0.25rem 0.75rem;
        font-size: 0.7rem;
        margin-top: 0.5rem;
    }
    
    .btn-live-watch {
        padding: 0.5rem 1.25rem;
        font-size: 0.8125rem;
    }

    /* 比赛事件左右内容在移动端更靠近中线，保留少量间距 */
    .events-timeline .event-left {
        padding-right: 0.3rem;
    }

    .events-timeline .event-right {
        padding-left: 0.3rem;
    }

    /* 比赛数据卡片字体缩放（仅移动端，布局保持不变） */
    .match-stats-card .card-header h5 {
        font-size: 0.85rem;
    }

    .match-stats-card .card-header h5 i {
        font-size: 0.8rem;
    }

    .match-stats-card .card-body .col-4 {
        font-size: 0.9rem;
    }

    .match-stats-card .card-body .text-muted,
    .match-stats-card .card-body .text-center.text-muted,
    .match-stats-card .card-body .text-center.text-muted.small {
        font-size: 0.75rem;
    }

    /* 比赛事件时间线字体缩放（仅移动端） */
    .events-timeline .event-player {
        font-size: 0.8rem;
    }

    .events-timeline .event-detail {
        font-size: 0.75rem;
    }

    .events-timeline .event-time span {
        font-size: 0.7rem;
    }

    /* 相关比赛卡片字体缩放（仅移动端） */
    .match-detail-page .card .card-header h5 {
        font-size: 0.9rem;
    }

    .match-detail-page .card .card-body {
        font-size: 0.85rem;
    }
}

/* 超小屏幕优化 (小于480px) */
@media (max-width: 480px) {
    .match-detail-hero {
        background: 
            url('/images/match-detail-bg.svg') center/cover,
            linear-gradient(180deg, rgba(10, 22, 40, 1) 0%, rgba(6, 13, 20, 1) 100%);
    }
}

@media (max-width: 576px) {
    .match-detail-teams {
        flex-direction: row !important;
        padding: 1rem 0.25rem;
        gap: 0.25rem;
    }
    
    .match-detail-team img {
        width: 40px;
        height: 40px;
    }
    
    .match-detail-team h4 {
        font-size: 0.7rem;
    }
    
    .match-detail-team small {
        font-size: 0.6rem;
    }
    
    .match-detail-score .score-display {
        font-size: 1.75rem;
    }
    
    .match-detail-score .match-status-badge {
        padding: 0.2rem 0.5rem;
        font-size: 0.625rem;
    }
}

.progress-bar {
    border-radius: var(--radius-sm);
}

/* ==================== 直播播放器（企业级升级） ==================== */
.live-player-section {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, #080f18 0%, #040810 100%);
    border: 1px solid rgba(14, 165, 233, 0.35);
    box-shadow: 
        0 0 60px rgba(14, 165, 233, 0.15),
        0 25px 80px -20px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    /* 平滑展开动画 */
    max-height: 800px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.4s ease;
}

/* 播放器收起状态 */
.live-player-section.collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-20px);
    margin-bottom: 0 !important;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
}

/* 播放器展开动画 */
@keyframes playerSlideDown {
    from {
        max-height: 0;
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        max-height: 800px;
        opacity: 1;
        transform: translateY(0);
    }
}

.live-player-section.expanding {
    animation: playerSlideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.live-player-wrapper {
    position: relative;
}

.live-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.12) 0%, transparent 100%);
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
    position: relative;
}

.live-player-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.3), transparent);
}

.live-indicator-pulse {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ef4444;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.375rem 0.875rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

@keyframes livePulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px rgba(239, 68, 68, 0.6); }
    50% { transform: scale(1.2); opacity: 0.8; box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); }
}

.live-player-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.live-player-info span {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
}

.live-player-info i {
    color: #0ea5e9;
}

.live-player-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-player-container {
    position: relative;
    background: #000;
    aspect-ratio: 16 / 9;
}

/* 播放器全屏态样式 - 播放器+聊天室浮层单页 */
.live-player-section.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #0a0f1a !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: -webkit-fill-available;
    /* 只保留顶部和左右安全区，底部不用额外 padding，避免多出的空白 */
    padding-top: env(safe-area-inset-top, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
    padding-bottom: 0 !important;
    padding-left: env(safe-area-inset-left, 0) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.live-player-section.fullscreen .live-player-wrapper {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* 全屏时隐藏 header 和 footer */
.live-player-section.fullscreen .live-player-header,
.live-player-section.fullscreen .live-player-footer {
    display: none !important;
}

.live-player-section.fullscreen .live-player-container {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    position: relative !important;
    background: #000 !important;
}

/* 全屏退出按钮 */
.fullscreen-exit-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(71, 85, 105, 0.5);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.fullscreen-exit-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
    transform: scale(1.05);
}

/* 全屏时的聊天室容器 - PC端 */
.live-player-section.fullscreen .fullscreen-chat-container {
    width: 360px !important;
    min-width: 300px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(15, 23, 42, 0.98) !important;
    border-left: 1px solid rgba(71, 85, 105, 0.3) !important;
    overflow: hidden !important;
}

.live-player-section.fullscreen .fullscreen-chat-container .chat-room-container {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    max-height: none !important;
}

.live-player-section.fullscreen .fullscreen-chat-container .chat-messages {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow-y: auto !important;
}

/* 覆盖聊天室内部结构的高度限制 */
.live-player-section.fullscreen .fullscreen-chat-container .chat-messages-wrapper {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column-reverse !important;
}

.live-player-section.fullscreen .fullscreen-chat-container .chat-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
}

.live-player-section.fullscreen .fullscreen-chat-container .chat-footer {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding-bottom: 4px !important;
}

.live-player-section.fullscreen .fullscreen-chat-container .chat-input-container {
    flex-shrink: 0 !important;
}

/* 移动端全屏：上下布局 */
@media (max-width: 991px) {
    .live-player-section.fullscreen .live-player-wrapper {
        flex-direction: column !important;
    }
    
    .live-player-section.fullscreen .live-player-container {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 180px !important;
        max-height: 45% !important;
        width: 100% !important;
    }
    
    .live-player-section.fullscreen .fullscreen-chat-container {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(71, 85, 105, 0.3) !important;
    }
    
    /* 移动端聊天室内部结构 */
    .live-player-section.fullscreen .fullscreen-chat-container .chat-messages-wrapper {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
    
    .fullscreen-exit-btn {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }
}

/* 覆盖所有移动端聊天室固定高度 */
@media (max-width: 767px) {
    .live-player-section.fullscreen .fullscreen-chat-container .chat-messages-wrapper {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

@media (max-width: 375px) {
    .live-player-section.fullscreen .fullscreen-chat-container .chat-messages-wrapper {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

body.live-player-fullscreen-open,
html.live-player-fullscreen-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* 确保全屏时其他元素不显示 */
body.live-player-fullscreen-open .navbar,
body.live-player-fullscreen-open .offcanvas,
body.live-player-fullscreen-open .offcanvas-backdrop,
body.live-player-fullscreen-open > *:not(.live-player-section):not(script):not(style):not(link) {
    visibility: hidden !important;
    pointer-events: none !important;
}

body.live-player-fullscreen-open .live-player-section.fullscreen {
    visibility: visible !important;
    pointer-events: auto !important;
}

.live-player-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Plyr 播放器自定义样式 */
.live-player-container .plyr {
    --plyr-color-main: #0ea5e9;
    --plyr-video-control-color: #fff;
    --plyr-video-control-color-hover: #0ea5e9;
    --plyr-video-control-background-hover: rgba(14, 165, 233, 0.2);
    --plyr-range-fill-background: #0ea5e9;
    --plyr-badge-background: #0ea5e9;
    --plyr-control-radius: 8px;
    height: 100%;
}

.live-player-container .plyr__control--overlaid {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.4);
    transition: background 0.18s ease-out, box-shadow 0.18s ease-out, transform 0.18s ease-out;
}

.live-player-container .plyr__control--overlaid:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    /* 移除 transform 避免抖動，只用陰影變化 */
    box-shadow: 0 6px 24px rgba(14, 165, 233, 0.55);
}

.live-player-container .plyr__controls {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    padding: 40px 16px 16px;
}

.live-player-container .plyr__progress__container {
    flex: 1;
}

.live-player-container .plyr__progress input[type=range] {
    height: 6px;
}

.live-player-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.7) 100%);
    border-top: 1px solid rgba(14, 165, 233, 0.1);
    position: relative;
}

.live-player-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.2), transparent);
}

.quality-selector {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.quality-btn {
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quality-btn:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.06);
}

.quality-btn.active {
    background: linear-gradient(180deg, #0c2d4d 0%, #061525 100%);
    color: #0ea5e9;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.2), inset 0 1px 0 rgba(14, 165, 233, 0.1);
}

/* 直播源切换选择器 */
.stream-source-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.stream-source-selector .source-label {
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.stream-source-selector .source-buttons {
    display: flex;
    gap: 6px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.stream-source-selector .source-btn {
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stream-source-selector .source-btn:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.06);
}

.stream-source-selector .source-btn.active {
    background: linear-gradient(180deg, #0c2d4d 0%, #061525 100%);
    color: #0ea5e9;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.2), inset 0 1px 0 rgba(14, 165, 233, 0.1);
}

/* 视频加载状态 */
.live-player-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(14, 165, 233, 0.3);
    border-top-color: #0ea5e9;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 预约提醒按钮 */
.reminder-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 20px;
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reminder-btn:hover {
    background: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
    border-color: #0ea5e9;
}

.reminder-btn.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.reminder-btn.active:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

/* 比赛提醒弹窗容器 */
.match-reminder-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    width: 100%;
    pointer-events: none;
}

/* 提醒弹窗 */
.match-reminder-popup {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #0c2d4d 0%, #0a1929 100%);
    border: 1px solid rgba(14, 165, 233, 0.4);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(14, 165, 233, 0.2);
    animation: slideInRight 0.3s ease;
    pointer-events: auto;
}

.match-reminder-popup.fade-out {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

.reminder-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.reminder-content {
    flex: 1;
    min-width: 0;
}

.reminder-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 4px;
}

.reminder-match {
    font-size: 1rem;
    font-weight: 700;
    color: #f0f6fc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reminder-league {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
}

.reminder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.reminder-btn-watch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.reminder-btn-watch:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    color: white;
}

.reminder-btn-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reminder-btn-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* 简单提示 Toast */
.simple-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 8px;
    color: #f0f6fc;
    font-size: 0.9rem;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10001;
    pointer-events: none;
}

.simple-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 576px) {
    .match-reminder-container {
        top: auto;
        bottom: 20px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .match-reminder-popup {
        padding: 12px;
    }
    
    .reminder-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .reminder-btn-watch {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

/* 音量控制（图标 + 浮层） */
.volume-control {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.volume-btn {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.875rem;
}

.volume-btn:hover {
    color: var(--accent-primary);
}

.volume-btn.muted {
    color: var(--accent-red);
}

.volume-popover {
    position: absolute;
    right: 0;
    bottom: 46px;
    display: none;
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.98);
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    z-index: 20;
}

.volume-popover.open {
    display: block;
}

.volume-popover::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 12px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: rgba(148, 163, 184, 0.8) transparent transparent transparent;
}

.volume-slider {
    width: 110px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(51, 65, 85, 0.9);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0ea5e9;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
    transition: var(--transition);
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0ea5e9;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
}


/* 播放器响应式 */
@media (max-width: 768px) {
    .live-player-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 0.75rem 1rem;
    }
    
    .live-player-info {
        order: 3;
        width: 100%;
        justify-content: center;
        font-size: 0.75rem;
    }
    
    .live-player-footer {
        flex-wrap: wrap;
        gap: 12px;
        padding: 0.75rem 1rem;
    }
    
    .quality-selector {
        flex: 1;
    }
    
    .volume-control {
        flex: 1;
        justify-content: center;
    }
    
    .player-lock-toggle {
        width: 100%;
    }
    
    .lock-toggle-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .live-player-section {
        margin: 0 -0.75rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .player-action-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8125rem;
    }
    
    .quality-btn {
        padding: 5px 10px;
        font-size: 0.6875rem;
    }
    
    .volume-slider {
        width: 60px;
    }
    
    .lock-icon i {
        font-size: 2.5rem;
    }
}

/* ============================================
   聊天室样式 - 企业级现代风格 V2
   ============================================ */

/* 聊天室容器 */
.chat-room-container {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 12, 20, 1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(59, 130, 246, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    position: relative;
    /* 非弹窗聊天室：固定高度，不受弹窗样式影响 */
    max-height: 500px;
    display: flex;
    flex-direction: column;
}

/* 聊天室头部 */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    position: relative;
}

.chat-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-icon-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 10px;
    font-size: 0.95rem;
    color: #fff;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
}

.chat-live-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #0f172a;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.chat-title-info {
    display: flex;
    flex-direction: column;
}

.chat-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f1f5f9;
    letter-spacing: 0.01em;
}

.chat-subtitle {
    font-size: 0.7rem;
    color: #64748b;
}

.chat-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 在线用户弹层 */
.online-users-popover {
    position: absolute;
    top: 110%;
    right: 12px;
    min-width: 160px;
    max-height: 220px;
    padding: 8px 0;
    background: rgba(15, 23, 42, 0.98);
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: var(--shadow-md);
    z-index: 30;
}

.online-users-header {
    padding: 4px 12px 6px;
    font-size: 0.72rem;
    color: #94a3b8;
    border-bottom: 1px solid rgba(51, 65, 85, 0.7);
}

.online-users-list {
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 6px 4px 6px;
}

.online-users-list::-webkit-scrollbar {
    width: 4px;
}

.online-users-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.6);
    border-radius: 999px;
}

.online-user-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: #e2e8f0;
    font-size: 0.76rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.online-user-item:hover {
    background: rgba(37, 99, 235, 0.16);
    color: #bfdbfe;
}

.online-user-empty {
    padding: 6px 12px 4px;
    font-size: 0.72rem;
    color: #64748b;
}

/* 在线人数指示器 */
.online-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 16px;
    font-size: 0.75rem;
    color: #22c55e;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.online-indicator i {
    font-size: 0.75rem;
}

.online-num {
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}

.online-indicator:hover {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
}

/* 连接状态 */
.connection-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(100, 116, 139, 0.1);
    border-radius: 16px;
    font-size: 0.75rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.status-dot.connecting {
    background: #f59e0b;
    animation: blink 1s infinite;
}

.status-dot.connected {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.status-dot.reconnecting {
    background: #f59e0b;
    animation: blink 0.5s infinite;
}

.status-dot.disconnected {
    background: #ef4444;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* 聊天消息区域 */
.chat-body {
    background: linear-gradient(180deg, #080c14 0%, #0a0f1a 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 非弹窗聊天室：限制消息区高度 */
    flex: 0 0 auto;
}

/* 弹窗内的 chat-body 才使用弹性高度 */
.chat-modal .chat-room-container .chat-body {
    flex: 1;
}

.chat-messages-wrapper {
    height: 350px;
    overflow-y: auto;
    padding: 12px;
    /* 反向列表：消息从底部向上堆叠，进入时自动在底部 */
    display: flex;
    flex-direction: column-reverse;
    /* 禁用浏览器自动滚动锚点，由 JS 手动控制 */
    overflow-anchor: none;
}

/* 反向列表内容容器 */
.chat-messages-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-messages-wrapper::-webkit-scrollbar {
    width: 5px;
}

.chat-messages-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages-wrapper::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 10px;
}

.chat-messages-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5);
}

/* 加载动画 */
.chat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
}

.loading-spinner {
    position: relative;
    width: 50px;
    height: 50px;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1) {
    border-top-color: #3b82f6;
    animation-delay: -0.45s;
}

.spinner-ring:nth-child(2) {
    border-top-color: #8b5cf6;
    animation-delay: -0.3s;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

.spinner-ring:nth-child(3) {
    border-top-color: #06b6d4;
    animation-delay: -0.15s;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
}

/* 空状态 */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px 20px;
}

.empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 50%;
    margin-bottom: 16px;
}

.empty-icon i {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-title {
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 4px;
}

.empty-subtitle {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
}

/* 消息项 */
.chat-message-item {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    animation: fadeInUp 0.25s ease;
}

/* 被引用消息高亮 */
.chat-message-item.message-highlight .message-bubble {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.7);
    border-color: rgba(59, 130, 246, 0.8);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-avatar {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
    object-fit: cover;
}

.message-avatar-img {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

.message-bubble {
    min-width: 0;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(25, 35, 50, 0.75) 100%);
    border: 1px solid rgba(59, 130, 246, 0.08);
    border-radius: 4px 14px 14px 14px;
    padding: 8px 12px;
    /* padding-bottom: 10px; */
    position: relative;
    transition: all 0.2s ease;
    /* margin-bottom: 4px; */
}

.chat-message-item:hover .message-bubble {
    background: linear-gradient(135deg, rgba(35, 48, 68, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
    border-color: rgba(59, 130, 246, 0.15);
}

.message-bubble::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid rgba(30, 41, 59, 0.85);
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.message-author {
    font-size: 0.68rem;
    font-weight: 500;
    color: #60a5fa;
}

.message-timestamp {
    font-size: 0.58rem;
    color: #64748b;
}

.message-text {
    color: #e2e8f0;
    font-size: 0.76rem;
    line-height: 1.3;
    word-break: break-word;
}

/* 单行消息布局：昵称 + 时间 + 文本 */
.message-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.message-text-inline {
    color: #e2e8f0;
    font-size: 0.76rem;
    line-height: 1.3;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

/* 系统消息 */
.system-message {
    display: flex;
    justify-content: center;
    margin: 12px 0;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.system-message-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.1);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #64748b;
}

.system-message-content i {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* 消息内容包装器 */
.message-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-width: 0;
    position: relative;
}

/* 消息文本（多行布局） */
.message-text {
    color: #e2e8f0;
    font-size: 0.8rem;
    line-height: 1.5;
    word-break: break-word;
    margin-top: 2px;
}

/* @@提及标签 */
.mention-tag {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 500;
}

/* 消息引用 */
.message-quote {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(100, 116, 139, 0.15);
    border-left: 2px solid #3b82f6;
    border-radius: 0 6px 6px 0;
    font-size: 0.72rem;
}

.message-quote i {
    color: #64748b;
    font-size: 0.65rem;
}

.message-quote .quote-author {
    color: #60a5fa;
    font-weight: 500;
}

.message-quote .quote-text {
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

/* 消息操作按钮组 */
.message-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    align-self: center;
}

.chat-message-item:hover .message-actions {
    opacity: 1;
}

/* 觸摸/點擊激活的消息顯示操作按鈕（移動端用 JS 添加 active 類） */
.chat-message-item.message-actions-active .message-actions {
    opacity: 1;
}

.message-action-btn {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #64748b;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.message-action-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

/* VIP删除按钮 - 红色 */
.message-delete-btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

/* 删除确认对话框 */
.delete-confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12000;
    animation: fadeIn 0.2s ease;
}

.delete-confirm-dialog.fade-out {
    animation: fadeOut 0.2s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.delete-confirm-content {
    background: linear-gradient(135deg, #0c2d4d 0%, #0a1929 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    max-width: 320px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 68, 68, 0.1);
    animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.delete-confirm-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ef4444;
}

.delete-confirm-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f0f6fc;
    margin-bottom: 8px;
}

.delete-confirm-text {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 20px;
}

.delete-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.delete-confirm-cancel,
.delete-confirm-submit {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.delete-confirm-cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #94a3b8;
}

.delete-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #f0f6fc;
}

.delete-confirm-submit {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    color: white;
}

.delete-confirm-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

/* 消息表情反应容器 */
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    min-height: 0;
}

.message-reaction-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.message-reaction-item:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(1.1);
}

/* 表情反应选择器 */
.reaction-picker {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    display: flex;
    gap: 4px;
    padding: 6px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 100;
    animation: popupSlide 0.15s ease;
}

.reaction-picker-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.reaction-picker-item:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(1.15);
}

/* 输入区域 */
.chat-footer {
    padding: 6px 10px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 25, 1) 100%);
    border-top: 1px solid rgba(59, 130, 246, 0.1);
    position: relative;
}

/* 引用预览 */
.chat-quote-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quote-preview-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.quote-preview-content i {
    color: #3b82f6;
    font-size: 0.75rem;
}

.quote-preview-text {
    color: #94a3b8;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-preview-close {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}

.quote-preview-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.chat-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(30, 41, 59, 0.4) 100%);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: 14px;
    /* padding: 6px 8px 6px 12px; */
    transition: all 0.25s ease;
}

.chat-input-container:focus-within {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 
        0 0 0 4px rgba(59, 130, 246, 0.08),
        0 4px 16px rgba(59, 130, 246, 0.12);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%);
}

.chat-input-wrapper {
    flex: 1;
    position: relative;
    min-width: 0;
}

.emoji-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    font-size: 1rem;
}

.emoji-btn:hover {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    transform: scale(1.1);
}

.chat-input-field {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #f1f5f9;
    font-size: 0.9rem;
    padding: 10px 0;
}

.chat-input-field::placeholder {
    color: #64748b;
}

.chat-input-field[readonly] {
    cursor: pointer;
}

.send-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.send-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
}

.send-btn:active {
    transform: translateY(0) scale(0.98);
}

.send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* @@提及弹窗 */
.mention-popup {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 50;
    animation: popupSlide 0.2s ease;
}

@keyframes popupSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mention-popup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    font-size: 0.75rem;
    color: #94a3b8;
}

.mention-popup-header i {
    color: #3b82f6;
}

.mention-popup-list {
    max-height: 180px;
    overflow-y: auto;
    padding: 6px;
}

.mention-popup-list::-webkit-scrollbar {
    width: 4px;
}

.mention-popup-list::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 4px;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.mention-item:hover,
.mention-item.active {
    background: rgba(59, 130, 246, 0.15);
}

.mention-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.mention-name {
    color: #e2e8f0;
    font-size: 0.85rem;
}

.mention-empty {
    padding: 16px;
    text-align: center;
    color: #64748b;
    font-size: 0.8rem;
}

/* 表情选择器 */
.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    width: 280px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 50;
    animation: popupSlide 0.2s ease;
}

.emoji-picker-header {
    padding: 10px 14px;
    background: rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.emoji-picker-title {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 500;
}

.emoji-picker-content {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.emoji-picker-content::-webkit-scrollbar {
    width: 4px;
}

.emoji-picker-content::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 4px;
}

.emoji-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s;
}

.emoji-item:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(1.2);
}

/* 滚动到底部按钮 + 未读计数（输入框上方，真正居中） */
.chat-scroll-bottom {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin: 0 auto 6px auto;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    z-index: 10;
}

.chat-scroll-bottom:hover {
    transform: none;
}

.chat-scroll-bottom:hover i {
    color: #3b82f6;
}

.chat-scroll-bottom i {
    color: #60a5fa;
    font-size: 1.1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 未读徽标 - 简洁实心小红点（用于输入框上方的未读提示） */
.unread-badge {
    position: absolute;
    top: -10px;
    right: -16px;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    border: none;
    box-shadow: none;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 全局浮动按钮组 */
.global-fab-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1050;
}

.global-fab-btn {
    width: 48px;
    height: 48px;
    display: flex;
    touch-action: manipulation; /* 禁用300ms点击延迟 */
    -webkit-tap-highlight-color: transparent; /* 移除iOS点击高亮 */
    user-select: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.25s ease;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.global-fab-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.global-fab-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
    transform: scale(1.08);
}

/* 回到顶部按钮样式 */
.global-fab-btn.back-to-top-fab {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
    color: #fff;
    border-color: transparent;
}

.global-fab-btn.back-to-top-fab:hover {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.95) 0%, rgba(168, 85, 247, 0.95) 100%);
    transform: scale(1.08);
}

.global-fab-btn.back-to-top-fab:hover i {
    animation: rocketLaunch 0.6s ease-out;
}

@keyframes rocketLaunch {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

/* 聊天室按钮样式 */
.global-fab-btn.chat-fab {
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    width: auto;
    height: auto;
    padding: 0;
}

.global-fab-btn.chat-fab:hover {
    background: transparent;
    color: inherit;
    transform: none;
}

.global-fab-btn.chat-fab:hover i {
    animation: chatBounce 0.4s ease;
}

@keyframes chatBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* 聊天按钮角标 - 与未读气泡一致的简洁小红点样式 */
.fab-chat-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    border-radius: 999px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
}

/* 聊天室 FAB：联赛头像 + 右下角小聊天图标 */
.chat-fab-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    box-shadow: 
        0 6px 20px rgba(15, 23, 42, 0.6),
        0 0 0 2px rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.chat-fab-avatar:hover {
    transform: scale(1.08);
    box-shadow: 
        0 8px 25px rgba(15, 23, 42, 0.7),
        0 0 0 3px rgba(59, 130, 246, 0.5),
        0 0 20px rgba(59, 130, 246, 0.3);
}

.chat-fab-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.4);
}

.chat-fab-mini-icon {
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: 2px solid rgba(15, 23, 42, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 2px 8px rgba(59, 130, 246, 0.5),
        0 0 12px rgba(59, 130, 246, 0.3);
    animation: miniIconGlow 3s ease-in-out infinite;
}

@keyframes miniIconGlow {
    0%, 100% { box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5), 0 0 12px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 2px 12px rgba(59, 130, 246, 0.7), 0 0 20px rgba(59, 130, 246, 0.5); }
}

.chat-fab-mini-icon i {
    font-size: 0.65rem;
    color: #fff;
}

/* 聊天室弹窗遮罩 */
.chat-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1060;
    animation: fadeIn 0.2s ease;
}

/* 聊天室弹窗 */
.chat-modal {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    height: 520px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 1070;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideInUp 0.25s ease;
}

.chat-modal.fullscreen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 12px;
    background: transparent;
    border-bottom: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.chat-modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e2e8f0;
}

.chat-modal-title i {
    margin-right: 8px;
    color: #60a5fa;
}

.chat-modal-actions {
    display: flex;
    gap: 6px;
}

.chat-modal-btn {
    width: 30px;
    height: 30px;
    display: flex;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chat-modal-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* 收起按钮特殊样式 */
.chat-modal-btn.chat-modal-close-btn:hover {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.chat-modal-btn.chat-modal-close-btn i {
    transition: transform 0.2s ease;
}

.chat-modal-btn.chat-modal-close-btn:hover i {
    transform: translateY(2px);
}

.chat-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

/* 弹窗内的聊天室样式调整 - 只在移动端弹窗中才100%高度 */
@media (max-width: 767px) {
    .chat-room-container.in-modal {
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: none !important;
        /* 弹窗内恢复弹性布局 */
        display: flex;
        flex-direction: column;
    }
}

/* 移动端浮动按钮调整 */
@media (max-width: 767px) {
    /* 移动端弹窗：全屏覆盖，高度100vh，输入框在底部 */
    .chat-modal {
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        border-radius: 0;
        animation: slideInUpMobile 0.3s ease;
        display: flex;
        flex-direction: column;
    }
    
    @keyframes slideInUpMobile {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    
    .chat-modal.fullscreen {
        height: 100%;
        top: 0;
        border-radius: 0;
    }
    
    /* 移动端按钮放到弹窗上方外部 */
    .chat-modal .chat-modal-header {
        position: absolute;
        top: -44px;
        right: 8px;
        left: auto;
        padding: 0;
        background: transparent;
        z-index: 20;
    }
    
    .chat-modal .chat-modal-actions {
        gap: 8px;
    }
    
    .chat-modal .chat-modal-btn {
        width: 36px;
        height: 36px;
        background: rgba(30, 41, 59, 0.9);
        color: #cbd5e1;
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .chat-modal .chat-modal-btn:hover {
        background: rgba(59, 130, 246, 0.3);
    }
    
    /* 移动端弹窗内容区域布局 */
    .chat-modal .chat-modal-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* 移动端视频播放器在弹窗中的样式 */
    .chat-modal .mobile-video-section {
        border-bottom: 1px solid rgba(59, 130, 246, 0.2);
        position: relative;
    }
    
    /* 移除视频播放器header */
    .chat-modal .mobile-video-header {
        display: none;
    }
    
    .chat-modal .mobile-video-wrapper {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
        border: none;
        box-shadow: none;
    }
    
    .chat-modal .mobile-video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* 关闭按钮直接放在视频右上角，透明背景 */
    .chat-modal .mobile-video-close {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 28px;
        height: 28px;
        background: rgba(0, 0, 0, 0.3);
        border: none;
        border-radius: 50%;
        color: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 10;
        backdrop-filter: blur(4px);
    }

    .chat-modal .mobile-video-close i {
        font-size: 0.7rem;
        line-height: 1;
    }
    
    .chat-modal .mobile-video-close:hover {
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        transform: scale(1.1);
    }
    
    /* 移动端聊天室在视频下方 */
    .chat-modal .chat-room-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 0;
        border: none;
        background: var(--bg-card);
        height: 100%;
        overflow: hidden;
    }
    
    .chat-modal .chat-room-container .chat-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
    
    .chat-modal .chat-room-container .chat-messages-wrapper {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        height: auto !important;
        max-height: none !important;
    }
    
    .chat-modal .chat-room-container .chat-footer {
        /* 弹窗内底部输入区域：紧贴底部，仅保留 4px 间距 */
        flex-shrink: 0;
        margin-top: 0;
        padding: 2px 10px 4px 10px;
        margin-bottom: 4px;
        border-radius: 14px;
    }
    
    .global-fab-container {
        bottom: 16px;
        right: 16px;
        gap: 10px;
    }
    
    .global-fab-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
    
    .chat-scroll-bottom {
        width: 36px;
        height: 36px;
        bottom: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        margin-bottom: 8px;
    }
    
    .chat-scroll-bottom i {
        font-size: 0.9rem;
    }
    
    .unread-badge {
        min-width: 20px;
        height: 20px;
        font-size: 0.68rem;
        top: -8px;
        right: -14px;
    }
    
    /* 移动端弹窗内的滚动按钮位置修复 */
    .chat-room-container.in-modal .chat-scroll-bottom {
        bottom: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        margin-bottom: 6px;
    }
}

/* 加载更多区域 - 采用骨架屏风格 */
.load-more-area {
    padding: 8px 12px;
    min-height: 40px;
    /* 使用固定高度，避免内容加载时高度变化导致抖动 */
    height: 56px;
    box-sizing: border-box;
}

.load-more-skeleton {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    opacity: 0.6;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.load-more-skeleton .skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 25%, rgba(59, 130, 246, 0.2) 50%, rgba(59, 130, 246, 0.1) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.load-more-skeleton .skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.load-more-skeleton .skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 25%, rgba(59, 130, 246, 0.2) 50%, rgba(59, 130, 246, 0.1) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.load-more-skeleton .skeleton-line:nth-child(1) { width: 60%; }
.load-more-skeleton .skeleton-line:nth-child(2) { width: 80%; }

@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

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

/* 旧版加载提示（兼容） */
.load-more-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    color: #94a3b8;
    font-size: 0.85rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    margin-top: 8px;
    animation: fadeIn 0.3s ease;
}

.load-more-indicator i {
    font-size: 0.9rem;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 错误 Toast */
.chat-error-toast {
    position: absolute;
    bottom: 70px;
    left: 16px;
    right: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(185, 28, 28, 0.95) 100%);
    border-radius: 10px;
    color: #fff;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.chat-error-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   聊天室响应式 - 移动端优化 V2
   ============================================ */

/* 平板端 */
@media (max-width: 991px) {
    .chat-messages-wrapper {
        height: 320px;
    }
    
    .chat-header {
        padding: 10px 12px;
    }
    
    .chat-icon-wrapper {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }
    
    .chat-title {
        font-size: 0.88rem;
    }
    
    .emoji-picker {
        width: 260px;
    }
    
    .emoji-picker-content {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* 移动端 */
@media (max-width: 767px) {
    /* 移动端聊天室优化 */
    .chat-room-container {
        border-radius: 16px;
        margin: 0;
        border: 1px solid rgba(59, 130, 246, 0.1);
    }
    
    .chat-messages-wrapper {
        height: 280px;
    }
    
    .chat-header {
        padding: 6px 10px;
    }
    
    .chat-header-left {
        gap: 8px;
    }
    
    .chat-icon-wrapper {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
        border-radius: 8px;
    }
    
    .chat-title {
        font-size: 0.82rem;
    }
    
    .chat-subtitle {
        display: none;
    }
    
    .online-indicator {
        padding: 3px 6px;
        font-size: 0.7rem;
    }
    
    .connection-status {
        padding: 3px 6px;
    }
    
    .status-text {
        display: none;
    }
    
    .chat-message-item {
        gap: 8px;
    }
    
    .message-avatar,
    .message-avatar-img {
        width: 26px;
        height: 26px;
        font-size: 0.72rem;
        border-radius: 8px;
    }
    
    .message-bubble {
        padding: 6px 9px;
        border-radius: 4px 12px 12px 12px;
    }
    
    .message-author {
        font-size: 0.72rem;
    }
    
    .message-text,
    .message-text-inline {
        font-size: 0.78rem;
        line-height: 1.45;
    }
    
    .message-action-btn {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
    
    .message-reactions {
        bottom: -6px;
        right: -2px;
    }
    
    .message-reaction-item {
        font-size: 0.7rem;
        padding: 2px 4px;
    }
    
    .reaction-count {
        font-size: 0.6rem;
    }
    
    .reaction-picker {
        bottom: calc(100% + 2px);
        padding: 5px;
        gap: 3px;
    }
    
    .reaction-picker-item {
        width: 30px;
        height: 30px;
        font-size: 1.1rem;
    }
    
    .chat-footer {
        padding: 6px 10px;
    }
    
    .chat-quote-preview {
        padding: 6px 8px;
        margin-bottom: 5px;
        border-radius: 6px;
    }
    
    .quote-preview-text {
        font-size: 0.72rem;
    }
    
    .chat-input-container {
        padding: 4px 6px 4px 10px;
        border-radius: 12px;
        gap: 8px;
    }
    
    .emoji-btn {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    
    .chat-input-field {
        font-size: 16px;
        padding: 7px 0;
    }
    
    .send-btn {
        width: 32px;
        height: 32px;
        font-size: 0.78rem;
        border-radius: 9px;
    }
    
    /* 移动端弹窗优化 */
    .emoji-picker {
        left: -10px;
        right: -10px;
        width: auto;
        border-radius: 12px;
    }
    
    .emoji-picker-content {
        grid-template-columns: repeat(8, 1fr);
        max-height: 160px;
        padding: 8px;
    }
    
    .emoji-item {
        width: 100%;
        height: 36px;
        font-size: 1.3rem;
    }
    
    .mention-popup {
        border-radius: 10px;
    }
    
    .mention-popup-header {
        padding: 8px 12px;
    }
    
    .mention-popup-list {
        max-height: 100px;
    }
    
    .mention-item {
        padding: 10px 12px;
    }
    
    .mention-avatar {
        width: 30px;
        height: 30px;
    }
    
    .mention-name {
        font-size: 0.88rem;
    }
    
    /* 消息引用移动端 */
    .message-quote {
        padding: 4px 7px;
        font-size: 0.68rem;
    }
    
    .message-quote .quote-text {
        max-width: 120px;
    }
}

/* 小屏手机 */
@media (max-width: 375px) {
    .chat-room-container {
        border-radius: 12px;
    }
    
    .chat-messages-wrapper {
        height: 240px;
    }
    
    .chat-header {
        padding: 5px 8px;
    }
    
    .chat-message-item {
        gap: 6px;
        margin-bottom: 8px;
    }
    
    .message-avatar,
    .message-avatar-img {
        width: 24px;
        height: 24px;
        font-size: 0.68rem;
        border-radius: 7px;
    }
    
    .message-bubble {
        padding: 5px 7px;
    }
    
    .message-author {
        font-size: 0.68rem;
    }
    
    .message-text,
    .message-text-inline {
        font-size: 0.75rem;
    }
    
    .message-action-btn {
        width: 18px;
        height: 18px;
        font-size: 0.65rem;
    }
    
    .message-reaction-item {
        font-size: 0.75rem;
        padding: 1px 4px;
    }
    
    .online-indicator {
        padding: 3px 6px;
    }
    
    .online-indicator i {
        display: none;
    }
    
    .chat-footer {
        padding: 5px 8px;
    }
    
    .emoji-picker-content {
        grid-template-columns: repeat(7, 1fr);
    }
    
    .emoji-item {
        height: 32px;
        font-size: 1.15rem;
    }
    
    .reaction-picker-item {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
}

/* 横屏模式优化 */
@media (max-height: 500px) and (orientation: landscape) {
    .chat-messages-wrapper {
        height: 180px;
    }
    
    .emoji-picker-content {
        max-height: 120px;
    }
    
    .mention-popup-list {
        max-height: 100px;
    }
}

/* PC端隐藏浮动聊天按钮 */
@media (min-width: 768px) {
    .global-fab-container {
        display: none !important;
    }
}

/* ============================================
   VIP禁言对话框样式
   ============================================ */
.mute-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.mute-dialog {
    background: var(--bg-secondary, #0c1929);
    border: 1px solid var(--border-default, rgba(14, 165, 233, 0.15));
    border-radius: 16px;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
}

.mute-dialog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-default);
    color: #ef4444;
    font-weight: 600;
    font-size: 1rem;
}

.mute-dialog-header i {
    font-size: 1.2rem;
}

.mute-dialog-body {
    padding: 20px;
    color: var(--text-primary, #f0f6fc);
}

.mute-dialog-body p {
    margin: 0 0 16px;
    font-size: 0.95rem;
}

.mute-dialog-body strong {
    color: var(--accent-primary, #0ea5e9);
}

.mute-duration-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.mute-duration-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s;
    font-size: 0.9rem;
}

.mute-duration-options label:hover {
    background: rgba(14, 165, 233, 0.1);
}

.mute-duration-options input[type="radio"] {
    accent-color: var(--accent-primary);
}

.mute-reason-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-primary, #060a10);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}

.mute-reason-input:focus {
    border-color: var(--accent-primary);
}

.mute-reason-input::placeholder {
    color: var(--text-muted);
}

.mute-dialog-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-default);
    justify-content: flex-end;
}

.mute-btn-cancel,
.mute-btn-confirm {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.mute-btn-cancel {
    background: var(--bg-tertiary, #0f1f33);
    color: var(--text-secondary);
}

.mute-btn-cancel:hover {
    background: var(--bg-elevated);
}

.mute-btn-confirm {
    background: #ef4444;
    color: white;
}

.mute-btn-confirm:hover {
    background: #dc2626;
}

/* 头像wrapper样式 */
.message-avatar-wrapper {
    flex-shrink: 0;
    position: relative;
}

.message-avatar-wrapper[style*="cursor: pointer"]:hover::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--accent-primary);
    animation: pulse 1s infinite;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==================== 新闻摘要样式 ==================== */
.news-summary-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0.5rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-summary-small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0.25rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 首页最新资讯区块优化 */
.news-overlay .news-summary-text {
    color: #e2e8f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.news-content .news-summary-small {
    color: #94a3b8;
}

/* ==================== 移动端搜索框样式 ==================== */
.mobile-search-box {
    background: rgba(14, 165, 233, 0.05);
    border-radius: var(--radius-full);
    padding: 0.45rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-default);
    transition: var(--transition);
    margin-top: 0.3rem;
    margin-bottom: 0.6rem;
}

.mobile-search-box:focus-within {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow-blue);
    background: rgba(14, 165, 233, 0.08);
}

.mobile-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    width: 100%;
    font-size: 0.85rem;
}

.mobile-search-box input::placeholder {
    color: var(--text-muted);
}

.mobile-search-box i {
    color: var(--accent-primary);
    font-size: 0.85rem;
}


/* ==================== 移动端语言切换按钮优化 ==================== */
@media (max-width: 991px) {
    .mobile-lang-switcher {
        /* padding: 0.5rem; */
        margin-bottom: 1rem;
        background: rgba(30, 41, 59, 0.5);
        border-radius: 10px;
    }
    
    .mobile-lang-switcher .lang-current {
        background: rgba(14, 165, 233, 0.1);
        border: 1px solid rgba(14, 165, 233, 0.2);
    }
    
    .mobile-lang-switcher .lang-option {
        padding: 0.6rem 1rem;
    }
}
/* ==================== 空数据占位卡片 - 酷炫风格 ==================== */
.empty-state-card {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.empty-state-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(100, 116, 139, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: glowPulse 3s ease-in-out infinite;
}

.empty-state-glow.hot-glow {
    background: radial-gradient(circle, rgba(251, 146, 60, 0.15) 0%, transparent 70%);
}

.empty-state-glow.upcoming-glow {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
}

@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.empty-state-content {
    position: relative;
    z-index: 1;
}

.empty-state-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 2px solid rgba(100, 116, 139, 0.3);
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: rgba(148, 163, 184, 0.8);
}

.empty-state-icon.live-icon {
    border-color: rgba(239, 68, 68, 0.4);
    color: rgba(239, 68, 68, 0.7);
    animation: iconFloat 3s ease-in-out infinite;
}

.empty-state-icon.hot-icon {
    border-color: rgba(251, 146, 60, 0.4);
    color: rgba(251, 146, 60, 0.8);
}

.empty-state-icon.upcoming-icon {
    border-color: rgba(14, 165, 233, 0.4);
    color: rgba(14, 165, 233, 0.7);
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* 直播脉冲环 */
.empty-state-icon .pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(239, 68, 68, 0.4);
    animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* 火焰粒子效果 */
.empty-state-icon .fire-particles {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: rgba(251, 146, 60, 0.8);
    border-radius: 50%;
    box-shadow: 
        -8px 5px 0 rgba(251, 146, 60, 0.6),
        8px 5px 0 rgba(251, 146, 60, 0.6),
        -4px -5px 0 rgba(251, 191, 36, 0.7),
        4px -5px 0 rgba(251, 191, 36, 0.7);
    animation: fireFloat 1.5s ease-in-out infinite;
}

@keyframes fireFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50% { transform: translateX(-50%) translateY(-5px); opacity: 0.7; }
}

/* 时钟指针动画 */
.empty-state-icon .clock-hand {
    position: absolute;
    width: 2px;
    height: 20px;
    background: rgba(14, 165, 233, 0.8);
    top: 20%;
    left: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: clockRotate 4s linear infinite;
}

@keyframes clockRotate {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

.empty-state-content h5 {
    color: rgba(226, 232, 240, 0.9);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

.empty-state-content p {
    color: rgba(148, 163, 184, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

/* 装饰边框光效 */
.empty-state-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(100, 116, 139, 0.3) 20%, 
        rgba(100, 116, 139, 0.5) 50%, 
        rgba(100, 116, 139, 0.3) 80%, 
        transparent 100%);
}

.empty-state-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(100, 116, 139, 0.2) 20%, 
        rgba(100, 116, 139, 0.4) 50%, 
        rgba(100, 116, 139, 0.2) 80%, 
        transparent 100%);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .empty-state-card {
        padding: 2rem 1.5rem;
    }
    
    .empty-state-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .empty-state-content h5 {
        font-size: 1rem;
    }
    
    .empty-state-content p {
        font-size: 0.85rem;
    }
}