/* ============================================================
 * dark-theme.css  ——  双赢直播 / 白蓝冷色调主题
 *
 * 注:文件名虽叫 dark-theme,但内容是浅色主题(白底蓝调)。
 * 为避免全局改 6 个 HTML 引用,沿用文件名,仅替换内容。
 *
 * 调色板:
 *   主背景       #f5f8fc   (近白带极淡蓝灰,很冷)
 *   卡片        #ffffff   (纯白) + 浅蓝阴影
 *   Header      #1d4ed8   深蓝(PC+移动统一,蓝边 #1e40af,深底白字)
 *   Header 深底用 logo.png(蓝色版,文字本身就有白边)
 *   Hero        #0f1115   黑底 + 足球海报背景图(.living-room)
 *   分割/边框    #e2e8f0   (浅蓝灰)
 *   主文字       #1e293b   (深蓝灰,几乎黑)
 *   次文字       #64748b   (蓝灰)
 *   弱文字       #94a3b8
 *   主色(蓝)     #2563eb   (链接/按钮/激活态)
 *   主色 hover   #1d4ed8   (header 背景同色)
 *   header 高亮   #7dd3fc   (sky-300,深蓝底上的菜单 hover)
 *   浅蓝高亮     #dbeafe
 *   LIVE 红      #ef4444   (保留)
 *
 * 结构(每段在对应位置改,不要追加新块):
 *   PART 1  基础层  (全局 / Header / 卡片 / 表单 / Footer / Hero)
 *   PART 2  Schedule 赛程页
 *   PART 3  Overlay 直播间叠加层
 *   PART 4  响应式断点 (≤1400 / ≤1280 / ≤1100 / ≤1024 / ≤900 / ≤768 / ≤480)
 *           每个断点只能有 1 个 @media 块
 * ============================================================ */


/* ████████████████████████████████████████████████████████████
 * PART 1  基础层
 * ████████████████████████████████████████████████████████████ */

html, body {
    background: #f5f8fc !important;
    color: #1e293b !important;
}

/* === Header / Nav  PC 深灰白字 + 蓝色 hover === */
/* PC 端 header + hero 走深色,内容区(滚动后)走白蓝 —— 见 PART 4 移动端覆盖 */
.header-wrapper,
.header-wrapper.solid {
    background: #1d4ed8 !important;
    border-bottom: 1px solid #1e40af !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35) !important;
}
.header-wrapper .header-inner,
.header-wrapper .header-left,
.header-wrapper .header-right,
.header-wrapper .header-menu,
.header-wrapper .header-menu > ul,
.header-wrapper .header-menu > ul > li {
    background: transparent !important;
    color: #f1f5f9 !important;
}
.header-wrapper .header-menu > ul > li > a {
    color: #d1d5db !important;
    transition: color 0.15s !important;
}
.header-wrapper .header-menu > ul > li > a:hover,
.header-wrapper .header-menu > ul > li.active > a {
    color: #7dd3fc !important;
}
.header-wrapper .header-login,
.header-wrapper .header-register {
    color: #d1d5db !important;
}
.header-wrapper .header-login:hover,
.header-wrapper .header-register:hover {
    color: #7dd3fc !important;
}
.header-wrapper .header-divider {
    background: #4b5563 !important;
}
.header-wrapper .user-avatar-sm {
    border-color: #4b5563 !important;
}
.header-wrapper .mobile-menu-toggle span {
    background: #f1f5f9 !important;
}
.header-wrapper .header-logo-box {
    cursor: pointer !important;
}
/* logo:统一用 logo.png(蓝色版),logo-white.png 是橙黄色不要 */
.header-wrapper .header-logo { display: block !important; }
.header-wrapper .header-logo-active { display: none !important; }
/* screen-footer 浮条 logo 也强制用蓝色(HTML 里 src 已改) */

/* 下拉/子菜单 */
.live-submenu ul,
.user-dropdown {
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.15) !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
}
.live-submenu ul:before { border-bottom-color: #ffffff !important; }
.live-submenu li { color: #475569 !important; }
.live-submenu li:hover { background: #eef4fa !important; color: #2563eb !important; }
.user-dropdown-item { color: #1e293b !important; }
.user-dropdown-item:hover { background: #eef4fa !important; color: #2563eb !important; }

/* === Hero .living-room (桌面) —— 黑底 + 足球海报 === */
.living-room {
    background-color: #0f1115 !important;
    background-image: url('/static/bg/main-bg.jpg') !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    margin-top: var(--header-height, 72px) !important;
}
.living-room .video-section { padding-top: 0 !important; }
.living-room::before { background: transparent !important; }
/* hero 内部的卡片/文字 沿用浅色,衬黑底 */
.living-room .video-title,
.living-room .video-info,
.living-room .anchor-name,
.living-room .room-name { color: #f1f5f9 !important; }

/* === 「正在热播」section header === */
.hot-section .section-header .hot-live-text {
    display: inline-block !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    padding-left: 12px !important;
    border-left: 4px solid #2563eb !important;
    line-height: 1 !important;
    margin-right: auto !important;
}

/* === 「热门主播」title 用纯文字替代失败图 === */
.anchor-section .anchor-title-banner {
    position: relative !important;
    top: 0 !important;
    width: auto !important;
    text-align: center !important;
    margin: 20px auto 24px !important;
    padding: 0 !important;
}
.anchor-section .anchor-title-banner::after {
    content: "热门主播";
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: #2563eb;
    letter-spacing: 2px;
    padding: 0 24px 8px;
    border-bottom: 2px solid #2563eb;
}

/* === 通用容器 === */
.inner, .section, .section-wrapper, .main-container,
.content-wrapper, .page-wrapper, .appointment-section,
.recommend-section, .hot-grid, .live-list-wrapper, .swiper-container {
    background: transparent !important;
    color: #1e293b !important;
}

/* === 卡片 === */
.live-card, .recommend-grid .live-card, .appointment-section .swiper-btn,
.card, .panel, .module-box, .room-item {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
.live-card:hover, .room-item:hover {
    background: #f8fafc !important;
    border-color: #93c5fd !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12) !important;
}
.room-list {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* === 干掉残留黄色:热门标签 / 观看链接 / 个人中心装饰 === */
.live-grid .card-tag,
.card-tag {
    background: #ef4444 !important;
    color: #fff !important;
}
.match-card-full .mc-action .watch-link {
    color: #2563eb !important;
}
.match-card-full .mc-action .watch-link .play-tri {
    border-left-color: #2563eb !important;
}
/* user 个人中心移动端 */
.mobile-user-header:before { background: rgba(29, 78, 216, 0.06) !important; }
.mobile-user-header .m-tag.tag-level {
    background: rgba(29, 78, 216, 0.15) !important;
    color: #2563eb !important;
}
.m-balance-bar .m-balance-value { color: #2563eb !important; }
.edit-sheet-body input:focus { box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important; }
.edit-sheet-footer .btn-confirm { box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3) !important; }

/* === 文字 === */
.card-title, .card-desc, .live-card .title, .section-title,
h1, h2, h3, h4, h5, h6, p, span, a, li, td, th {
    color: #1e293b;
}
.text-secondary, .text-muted, .sub-title, .desc {
    color: #64748b !important;
}
a { color: inherit; }
a:hover { color: #2563eb !important; }

/* === 分割线 === */
hr, .divider, .border-bottom, .border-top {
    border-color: #e2e8f0 !important;
    background: #e2e8f0 !important;
}

/* === 表单 === */
input, textarea, select {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
}
input::placeholder, textarea::placeholder { color: #94a3b8 !important; }
input:focus, textarea:focus {
    border-color: #2563eb !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* === 按钮 === */
button, .btn, .button {
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #cbd5e1;
}
button:hover, .btn:hover, .button:hover {
    background: #eef4fa;
    border-color: #2563eb;
    color: #2563eb;
}
.btn-primary, .button-primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}
.btn-primary:hover, .button-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* === Footer === */
.footer-wrapper, .footer, footer {
    background: #ffffff !important;
    color: #64748b !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* === Room 直播间深色覆盖(白底版)=== */
.room-info, .room-chat, .chat-wrapper, .chat-list, .chat-input-bar,
.room-tabs, .room-anchor-info {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
}
.chat-list .chat-item {
    background: transparent !important;
    color: #1e293b !important;
}
.chat-list .chat-item:hover { background: #f8fafc !important; }
.room-notice {
    background: #eff6ff !important;
    color: #1e40af !important;
    border-color: #bfdbfe !important;
}

/* === 弹窗 / 模态框 === */
.modal, .modal-content, .dialog, .dialog-content, .popup, .popup-content {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15) !important;
}
.modal-mask, .dialog-mask { background: rgba(15, 23, 42, 0.5) !important; }

/* === 表格 === */
table { background: #ffffff !important; color: #1e293b !important; }
table thead, table th {
    background: #f8fafc !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
}
table tbody tr { border-color: #e2e8f0 !important; }
table tbody tr:hover { background: #f8fafc !important; }

/* === 滚动条 === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* === 通用补丁:防止图片/视频/iframe 溢出 === */
img, video, iframe { max-width: 100% !important; height: auto; }
.video-main video, .video-main iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}


/* ████████████████████████████████████████████████████████████
 * PART 2  Schedule 赛程页
 * ████████████████████████████████████████████████████████████ */

.match-card-full,
.match-card-full::after,
.match-card-full::before { all: unset !important; }

.page-schedule {
    width: 1280px !important;
    max-width: calc(100% - 40px) !important;
    margin: 100px auto 60px !important;
    background: transparent !important;
    color: #1e293b !important;
    padding-bottom: 60px !important;
}

.page-schedule .filter-bar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 18px 20px !important;
    margin-bottom: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.page-schedule .sport-tabs {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.page-schedule .sport-pill {
    appearance: none !important;
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 8px 22px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
.page-schedule .sport-pill:hover {
    border-color: #2563eb !important;
    color: #2563eb !important;
}
.page-schedule .sport-pill.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    font-weight: 700 !important;
}

.page-schedule .date-list { background: transparent !important; margin: 0 !important; }
.page-schedule .date-list ul {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.page-schedule .date-list .item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    width: auto !important;
    min-width: 78px !important;
    padding: 8px 16px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    color: #64748b !important;
    position: static !important;
}
.page-schedule .date-list .item::after { display: none !important; }
.page-schedule .date-list .item .day {
    font-size: 12px !important;
    color: #64748b !important;
    display: block !important;
    margin: 0 !important;
}
.page-schedule .date-list .item .date {
    font-size: 16px !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    display: block !important;
    margin: 0 !important;
}
.page-schedule .date-list .item:hover { border-color: #2563eb !important; }
.page-schedule .date-list .item.active {
    background: #eff6ff !important;
    border-color: #2563eb !important;
}
.page-schedule .date-list .item.active .day { color: #2563eb !important; }
.page-schedule .date-list .item.active .date { color: #2563eb !important; font-size: 16px !important; }

.page-schedule .match-list {
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    min-height: auto !important;
}
.schedule-table {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.schedule-head {
    display: grid !important;
    grid-template-columns: 110px 100px 160px 1fr 100px 1fr 130px !important;
    align-items: center !important;
    padding: 14px 24px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}
.schedule-head .col-host { text-align: right !important; }
.schedule-head .col-guest { text-align: left !important; }
.schedule-head .col-status,
.schedule-head .col-league,
.schedule-head .col-score,
.schedule-head .col-action { text-align: center !important; }

/* 赛事名称列(状态后面)*/
.schedule-row .col-league {
    text-align: center !important;
    padding: 0 6px !important;
    overflow: hidden !important;
}
.schedule-row .col-league .league-name {
    display: inline-block !important;
    max-width: 100% !important;
    font-size: 13px !important;
    color: #475569 !important;
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.schedule-row {
    display: grid !important;
    grid-template-columns: 110px 100px 160px 1fr 100px 1fr 130px !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background 0.15s !important;
    color: #1e293b !important;
}
.schedule-row:last-child { border-bottom: none !important; }
.schedule-row:hover { background: #f8fafc !important; }

.schedule-row .col-time { padding-right: 12px !important; }
.schedule-row .league-name {
    font-size: 12px !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.schedule-row .match-date {
    font-size: 12px !important;
    color: #94a3b8 !important;
    display: inline !important;
    margin-right: 6px !important;
}
.schedule-row .match-time {
    font-size: 18px !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    display: inline !important;
    font-family: "D-DIN-PRO", "Helvetica Neue", monospace !important;
}

.schedule-row .col-status { text-align: center !important; }
.status-cell {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.status-live { color: #ef4444 !important; }
.status-live .live-dot {
    width: 8px !important;
    height: 8px !important;
    background: #ef4444 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6) !important;
    animation: livePulse 1.5s ease-in-out infinite !important;
}
.status-end { color: #94a3b8 !important; }
.status-soon { color: #64748b !important; }

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.schedule-row .col-host {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding-right: 16px !important;
}
.schedule-row .col-guest {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding-left: 16px !important;
}
.schedule-row .team-logo {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    background: #f1f5f9 !important;
    flex-shrink: 0 !important;
}
.schedule-row .team-logo-empty { background: #f1f5f9 !important; }
.schedule-row .team-name {
    font-size: 15px !important;
    color: #1e293b !important;
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
}

.schedule-row .col-score { text-align: center !important; }
.score-cell {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ef4444 !important;
    font-family: "D-DIN-PRO", "Helvetica Neue", monospace !important;
    letter-spacing: 1px !important;
}
.score-cell.score-live { color: #ef4444 !important; }
.score-cell.vs-cell {
    color: #94a3b8 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
}

.schedule-row .col-action { text-align: center !important; }
.enter-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-width: 96px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.15s !important;
    cursor: pointer !important;
}
.enter-btn-live { background: #ef4444 !important; color: #ffffff !important; }
.enter-btn-live:hover { background: #dc2626 !important; color: #ffffff !important; }
.enter-btn-live .play-tri {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important;
    border-left: 7px solid #ffffff !important;
}
.enter-btn-soon {
    background: transparent !important;
    color: #2563eb !important;
    border: 1px solid #2563eb !important;
}
.enter-btn-soon:hover { background: #2563eb !important; color: #ffffff !important; }
.enter-btn-end {
    background: transparent !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
}
.enter-btn-end:hover { border-color: #64748b !important; color: #64748b !important; }

.page-schedule .empty-state {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    text-align: center !important;
    padding: 80px 20px !important;
    color: #94a3b8 !important;
}


/* ████████████████████████████████████████████████████████████
 * PART 3  Overlay 直播间叠加层(浮在视频之上,保持深色让文字可读)
 * ████████████████████████████████████████████████████████████ */

.overlay-layer {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 20 !important;
    overflow: hidden !important;
}
.overlay-item {
    position: absolute !important;
    pointer-events: auto !important;
}

.overlay-banner {
    left: 0 !important;
    right: 0 !important;
    padding: 8px 16px !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.overlay-banner.pin-top { top: 0 !important; }
.overlay-banner.pin-bottom { bottom: 0 !important; }

.overlay-marquee {
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.overlay-marquee.pin-top { top: 0 !important; }
.overlay-marquee.pin-bottom { bottom: 0 !important; }
.overlay-marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: overlay-marquee-slide 8s linear infinite;
}
@keyframes overlay-marquee-slide {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

.overlay-free-text {
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 18px;
    line-height: 1.3;
}
.overlay-free-image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* ████████████████████████████████████████████████████████████
 * 移动端专用元素 —— 默认隐藏(只在 ≤ 768px 才显示)
 * 这些元素由 JS 在移动端注入,但 DOM 在大屏切换/F12 模式残留时
 * 也可能出现,默认 display:none 避免污染 PC 布局。
 * ████████████████████████████████████████████████████████████ */
.mobile-poster-carousel,
.mobile-back-btn,
.mobile-home-pill,
.mobile-tv-btn,
.mobile-user-avatar,
.mobile-room-tabs,
.match-score-bar,
.mobile-hot-filter,
.mobile-nav-header {
    display: none !important;
}


/* ████████████████████████████████████████████████████████████
 * PART 4  响应式断点
 * ████████████████████████████████████████████████████████████ */

/* ============= ≤ 1400px (大平板/小桌面) ============= */
@media (max-width: 1400px) {
    .inner { width: 960px !important; max-width: calc(100% - 32px) !important; }
    .living-room { height: 540px !important; }
    .room-list { width: 170px !important; }
    .hot-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; }
    .recommend-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .category-grid { grid-template-columns: repeat(5, 1fr) !important; }
}

/* ============= ≤ 1280px ============= */
@media (max-width: 1280px) {
    .inner { width: 100% !important; padding: 0 24px !important; }
    .page-schedule { width: 100% !important; padding: 0 24px !important; }
    .living-room { height: 480px !important; }
}

/* ============= ≤ 1100px (赛程页改栅格) ============= */
@media (max-width: 1100px) {
    .page-schedule { width: 100% !important; padding: 0 16px !important; }
    .schedule-head { display: none !important; }
    .schedule-row {
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-areas:
            "time   league action"
            "host   score  guest"
            "status status status" !important;
        gap: 8px !important;
        padding: 14px 16px !important;
    }
    .schedule-row .col-time    { grid-area: time !important; }
    .schedule-row .col-status  { grid-area: status !important; }
    .schedule-row .col-league  { grid-area: league !important; }
    .schedule-row .col-host    { grid-area: host !important; padding-right: 8px !important; }
    .schedule-row .col-score   { grid-area: score !important; }
    .schedule-row .col-guest   { grid-area: guest !important; padding-left: 8px !important; }
    .schedule-row .col-action  { grid-area: action !important; }
    .schedule-row .col-league .league-name { max-width: 100% !important; font-size: 12px !important; }
    .schedule-row .team-name   { font-size: 13px !important; max-width: 120px !important; }
    .score-cell                { font-size: 20px !important; }
}

/* ============= ≤ 1024px ============= */
@media (max-width: 1024px) {
    .living-room { height: 420px !important; }
    .video-container { flex-direction: column !important; gap: 12px !important; }
    .video-main { width: 100% !important; }
    .room-list {
        width: 100% !important;
        max-height: 110px !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-radius: 0 0 8px 8px !important;
    }
    .room-list .room-item { flex-shrink: 0 !important; min-width: 130px !important; }
    .hot-grid,
    .recommend-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
    .category-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .footer-inner { flex-direction: column !important; gap: 16px !important; text-align: center !important; }
    .footer-links { display: flex !important; gap: 24px !important; justify-content: center !important; }
}

/* ============= ≤ 900px ============= */
@media (max-width: 900px) {
    .living-room { height: 360px !important; }
    .hot-grid,
    .recommend-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .category-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ████████████████████████████████████████████████████████████
 * ============= ≤ 768px (移动端) —— 唯一的移动端块
 * ████████████████████████████████████████████████████████████ */
@media (max-width: 768px) {

    /* ─────────── 强制还原:解除全局段的 display:none(那是给 PC 用的) ─────────── */
    /* 这一段必须紧跟在 @media 入口,优先级和位置都要早,确保后面具体规则能覆盖 */
    .mobile-poster-carousel { display: block !important; }
    .mobile-back-btn,
    .mobile-home-pill,
    .mobile-tv-btn,
    .mobile-user-avatar { display: inline-flex !important; }
    .mobile-room-tabs { display: flex !important; }
    .match-score-bar { display: flex !important; }
    .mobile-hot-filter { display: flex !important; }
    .mobile-nav-header { display: block !important; }

    /* ─────────── A. 全局移动 ─────────── */
    html, body {
        background: #f5f8fc !important;
        color: #1e293b !important;
    }

    /* 移动端 header —— 继承 PC 默认深蓝 #1d4ed8;只有 hero 区不跟着深 */
    /* 移动端 hero 保持白底 */
    .living-room { background-color: #ffffff !important; }
    /* 移动 nav 二级头 —— 改成深蓝呼应 header */
    .mobile-nav-header {
        background: #1d4ed8 !important;
        border-bottom: 1px solid #1e40af !important;
    }
    .mobile-nav-tabs .nav-tab { color: #cbd5e1 !important; }
    .mobile-nav-tabs .nav-tab.active { color: #7dd3fc !important; }
    .mobile-nav-tabs .nav-tab.active::after { background: #7dd3fc !important; }

    /* (原"去黄覆盖块"已下沉到 src/css/responsive.css 源头,这里不再需要) */

    .mobile-tabbar {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        box-shadow: 0 -1px 0 0 #e2e8f0 !important;
    }
    .mobile-tabbar .tab-item { color: #64748b !important; }
    .mobile-tabbar .tab-item.active { color: #2563eb !important; }

    /* 汉堡按钮 */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        width: 24px !important;
        height: 20px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
    .mobile-menu-toggle span {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background: #475569 !important;
        border-radius: 2px !important;
        transition: transform 0.2s, opacity 0.2s !important;
    }
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    .mobile-menu-toggle.active span:nth-child(2) { opacity: 0 !important; }
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px) !important;
    }

    .mobile-nav {
        display: none !important;
        position: fixed !important;
        top: var(--header-height, 44px) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
        padding: 12px 16px 16px !important;
        max-height: calc(100vh - var(--header-height, 44px)) !important;
        overflow-y: auto !important;
    }
    .mobile-nav.active { display: block !important; }
    .mobile-nav ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .mobile-nav ul li {
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .mobile-nav ul li:last-child { border-bottom: none !important; }
    .mobile-nav ul li a {
        display: block !important;
        padding: 14px 8px !important;
        color: #1e293b !important;
        font-size: 16px !important;
        text-decoration: none !important;
    }
    .mobile-nav ul li.active a,
    .mobile-nav ul li a:active {
        color: #2563eb !important;
        background: #eff6ff !important;
    }
    .mobile-nav .mobile-auth {
        display: flex !important;
        gap: 12px !important;
        padding: 16px 8px 8px !important;
        border-top: 1px solid #e2e8f0 !important;
        margin-top: 8px !important;
    }
    .mobile-nav .mobile-auth .btn-m {
        flex: 1 !important;
        padding: 10px !important;
        text-align: center !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }
    .mobile-nav .mobile-auth .btn-m-login {
        background: transparent !important;
        border: 1px solid #2563eb !important;
        color: #2563eb !important;
    }
    .mobile-nav .mobile-auth .btn-m-register {
        background: #2563eb !important;
        color: #ffffff !important;
    }

    /* 海报轮播 */
    .mobile-poster-carousel {
        margin: 6px 10px 0 !important;
        position: relative !important;
    }
    .mobile-poster-carousel .poster-track {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        border-radius: 12px !important;
    }
    .mobile-poster-carousel .poster-track::-webkit-scrollbar { display: none !important; }
    .mobile-poster-carousel .poster-slide {
        flex: 0 0 100% !important;
        scroll-snap-align: start !important;
        aspect-ratio: 16 / 9 !important;
        min-height: 200px !important;
        height: auto !important;
        position: relative !important;
        background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    .mobile-poster-carousel .poster-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
        display: block !important;
    }
    .mobile-poster-carousel .poster-slide.poster-default {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
    }
    .mobile-poster-carousel .poster-slide.poster-default .default-title {
        font-size: 26px !important;
        font-weight: 800 !important;
        letter-spacing: 2px !important;
    }
    .mobile-poster-carousel .poster-slide.poster-default .default-sub {
        font-size: 13px !important;
        margin-top: 4px !important;
        opacity: 0.85 !important;
    }
    .mobile-poster-carousel .poster-info {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 30px 14px 12px !important;
        background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.85)) !important;
        color: #ffffff !important;
    }
    .mobile-poster-carousel .poster-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
        color: #ffffff !important;
    }
    .mobile-poster-carousel .poster-tag {
        font-size: 12px !important;
        color: #93c5fd !important;
    }
    .mobile-poster-carousel .poster-tag::before {
        content: "● " !important;
        color: #ef4444 !important;
        animation: poster-blink 1.5s ease-in-out infinite !important;
    }
    @keyframes poster-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }
    .mobile-poster-carousel .poster-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }
    .mobile-poster-carousel .poster-dots .dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: rgba(37, 99, 235, 0.25) !important;
        transition: all 0.2s !important;
    }
    .mobile-poster-carousel .poster-dots .dot.active {
        background: #2563eb !important;
        width: 18px !important;
        border-radius: 3px !important;
    }


    /* ─────────── B. 首页 index.html ─────────── */
    body[data-page="index"] .living-room { display: none !important; }
    body[data-page="index"] .mobile-banner { display: none !important; }
    body[data-page="index"] .anchor-section { display: none !important; }
    body[data-page="index"] .category-section { display: none !important; }
    body[data-page="index"] .footer-wrapper { display: none !important; }

    body[data-page="index"] .appointment-section {
        margin: 12px 0 8px !important;
        padding: 0 12px !important;
        background: transparent !important;
    }
    body[data-page="index"] .appointment-section .section-header {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: auto !important;
        padding: 0 0 10px !important;
        margin: 0 !important;
    }
    body[data-page="index"] .appointment-section .section-header::before {
        content: "🔥" !important;
        font-size: 16px !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    body[data-page="index"] .appointment-section .section-header .section-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #2563eb !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    body[data-page="index"] .appointment-section .swiper-prev,
    body[data-page="index"] .appointment-section .swiper-next { display: none !important; }
    body[data-page="index"] .appointment-section .match-slider {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 8px !important;
        padding: 0 !important;
        background: transparent !important;
        height: auto !important;
    }
    body[data-page="index"] .appointment-section .match-slider::-webkit-scrollbar { display: none !important; }
    body[data-page="index"] .appointment-section .match-slider .match-card {
        flex: 0 0 calc(50% - 4px) !important;
        scroll-snap-align: start !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 10px !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        pointer-events: none !important;
        cursor: default !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    }
    body[data-page="index"] .appointment-section .match-slider .match-card a,
    body[data-page="index"] .appointment-section .match-slider .match-card * {
        pointer-events: none !important;
        cursor: default !important;
    }

    body[data-page="index"] .hot-section {
        margin: 16px 12px 80px !important;
        padding: 0 !important;
        background: transparent !important;
    }
    body[data-page="index"] .hot-section .section-header {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 0 10px !important;
        margin: 0 !important;
    }
    body[data-page="index"] .hot-section .section-header::before {
        content: "🌶️" !important;
        font-size: 16px !important;
    }
    body[data-page="index"] .hot-section .section-header .hot-live-icon { display: none !important; }
    body[data-page="index"] .hot-section .section-header .hot-live-text {
        border-left: none !important;
        padding-left: 0 !important;
        font-size: 0 !important;
    }
    body[data-page="index"] .hot-section .section-header .hot-live-text::after {
        content: "今日推荐";
        font-size: 17px;
        font-weight: 700;
        color: #2563eb;
    }
    body[data-page="index"] .hot-section .mobile-hot-filter {
        display: flex !important;
        gap: 6px !important;
        margin-left: auto !important;
    }
    body[data-page="index"] .hot-section .mobile-hot-filter .pill {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
        border-radius: 999px !important;
        padding: 4px 12px !important;
        font-size: 12px !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
    }
    body[data-page="index"] .hot-section .mobile-hot-filter .pill.active {
        background: #2563eb !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
        font-weight: 700 !important;
    }

    body[data-page="index"] .hot-section .hot-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    body[data-page="index"] .hot-section .hot-grid .live-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        padding: 0 !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    }
    body[data-page="index"] .hot-section .hot-grid .live-card .card-cover {
        aspect-ratio: 16/9 !important;
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
    }
    body[data-page="index"] .hot-section .hot-grid .live-card .card-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    body[data-page="index"] .hot-section .hot-grid .live-card .card-title {
        padding: 8px 10px 10px !important;
        font-size: 13px !important;
        color: #1e293b !important;
        line-height: 1.3 !important;
    }
    body[data-page="index"] .hot-section .hot-grid .live-card .live-badge {
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        background: rgba(239, 68, 68, 0.95) !important;
        color: #ffffff !important;
        font-size: 10px !important;
        padding: 1px 6px !important;
        border-radius: 3px !important;
        z-index: 2 !important;
    }
    body[data-page="index"] .hot-section .hot-grid .live-card .bottom-title {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 16px 10px 6px !important;
        background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.85)) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        color: #ffffff !important;
        font-size: 11px !important;
    }


    /* ─────────── C. 直播间 room.html ─────────── */

    body[data-page="room"] .footer-wrapper,
    body[data-page="room"] .mobile-tabbar,
    body[data-page="room"] .screen-footer-wrapper,
    body[data-page="room"] .mobile-nav-header,
    body[data-page="room"] .right-fix,
    body[data-page="room"] .gift-bar,
    body[data-page="room"] .video-recommend { display: none !important; }

    body[data-page="room"] .header-wrapper {
        background: #1d4ed8 !important;
        border-bottom: 1px solid #1e40af !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35) !important;
    }
    body[data-page="room"] .header-inner {
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    body[data-page="room"] .header-menu,
    body[data-page="room"] .header-logo,
    body[data-page="room"] .header-logo-active,
    body[data-page="room"] .mobile-menu-toggle,
    body[data-page="room"] .header-right .no-login,
    body[data-page="room"] .mobile-download-btn { display: none !important; }

    body[data-page="room"] .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    body[data-page="room"] .mobile-back-btn {
        display: inline-flex !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: #eff6ff !important;
        color: #2563eb !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        text-decoration: none !important;
    }
    body[data-page="room"] .mobile-home-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        height: 32px !important;
        padding: 0 12px !important;
        border-radius: 16px !important;
        background: #eff6ff !important;
        color: #2563eb !important;
        text-decoration: none !important;
        font-size: 13px !important;
    }
    body[data-page="room"] .mobile-tv-btn {
        display: inline-flex !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
        border: 1px solid #cbd5e1 !important;
        color: #475569 !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        margin-right: 8px !important;
    }
    body[data-page="room"] .header-right .logged-in,
    body[data-page="room"] .mobile-user-avatar {
        display: flex !important;
        align-items: center !important;
    }
    body[data-page="room"] .mobile-user-avatar img,
    body[data-page="room"] .mobile-user-avatar .placeholder {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: #e2e8f0 !important;
        border: 1px solid #cbd5e1 !important;
    }

    body[data-page="room"] .live-room {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f5f8fc !important;
    }
    body[data-page="room"] .live-room-box,
    body[data-page="room"] .live-room .inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    body[data-page="room"] .media {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body[data-page="room"] .media .center-block { order: 1 !important; }
    body[data-page="room"] .media .top-block    { order: 2 !important; }
    body[data-page="room"] .mobile-room-tabs    { order: 3 !important; }
    body[data-page="room"] .media .right-block,
    body[data-page="room"] .media .gift-bar     { order: 4 !important; }

    body[data-page="room"] .media .center-block {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    body[data-page="room"] .video-player {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        background: #000 !important;
        position: relative !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    body[data-page="room"] .top-block {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        background: #ffffff !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    body[data-page="room"] .top-left-block {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    body[data-page="room"] .top-left-block .head-img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        border: 2px solid #2563eb !important;
        flex-shrink: 0 !important;
    }
    body[data-page="room"] .top-block .text {
        flex: 1 !important;
        min-width: 0 !important;
    }
    body[data-page="room"] .top-block .text-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        margin: 0 0 2px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    body[data-page="room"] .top-block .text-msg {
        font-size: 11px !important;
        color: #2563eb !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    body[data-page="room"] .top-block .text-msg .view-num::before {
        content: "🔥 " !important;
    }
    body[data-page="room"] .top-block .text-msg .room-num,
    body[data-page="room"] .top-block .text-msg .nick-name,
    body[data-page="room"] .top-block .text-msg .mobile-text { display: none !important; }
    body[data-page="room"] .top-block .top-right-block {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    body[data-page="room"] .top-block .follow-btn {
        padding: 4px 14px !important;
        border: 1px solid #2563eb !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #2563eb !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }
    body[data-page="room"] .top-block .report-btn {
        color: #94a3b8 !important;
        font-size: 12px !important;
        margin-left: 4px !important;
    }

    body[data-page="room"] .match-score-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
        font-size: 13px !important;
        color: #1e293b !important;
    }
    body[data-page="room"] .match-score-bar .score-num {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #ef4444 !important;
    }

    body[data-page="room"] .mobile-room-tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    body[data-page="room"] .mobile-room-tabs::-webkit-scrollbar { display: none !important; }
    body[data-page="room"] .mobile-room-tabs .tab {
        flex: 0 0 auto !important;
        padding: 12px 16px !important;
        color: #64748b !important;
        font-size: 14px !important;
        cursor: pointer !important;
        position: relative !important;
        white-space: nowrap !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    body[data-page="room"] .mobile-room-tabs .tab.active {
        color: #2563eb !important;
        font-weight: 700 !important;
    }
    body[data-page="room"] .mobile-room-tabs .tab.active::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 16px !important;
        right: 16px !important;
        height: 2px !important;
        background: #2563eb !important;
        border-radius: 2px !important;
    }

    body[data-page="room"] .right-block,
    body[data-page="room"] .right-side,
    body[data-page="room"] .chat-wrapper,
    body[data-page="room"] .room-chat,
    body[data-page="room"] .chat-list {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
    }
    body[data-page="room"] .chat-list,
    body[data-page="room"] .chat-content {
        max-height: calc(100vh - var(--header-height, 44px) - 56vw - 60px - 60px) !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        color: #1e293b !important;
    }
    body[data-page="room"] .chat-item,
    body[data-page="room"] .chat-row {
        background: transparent !important;
        color: #475569 !important;
    }


    /* ─────────── D. 赛程页(紧凑版)─────────── */
    .page-schedule {
        margin: 60px auto 80px !important;
        padding: 0 12px !important;
    }
    .page-schedule .filter-bar {
        padding: 12px !important;
        gap: 10px !important;
    }
    .page-schedule .sport-pill {
        padding: 6px 14px !important;
        font-size: 13px !important;
    }
    .page-schedule .date-list .item {
        min-width: 56px !important;
        padding: 6px 8px !important;
    }
    .page-schedule .date-list .item .day { font-size: 11px !important; }
    .page-schedule .date-list .item .date { font-size: 13px !important; }
    .schedule-row { padding: 12px !important; }
    .schedule-row .match-time { font-size: 16px !important; }
    .schedule-row .team-name { max-width: 88px !important; font-size: 12px !important; }
    .schedule-row .team-logo { width: 26px !important; height: 26px !important; }
    .score-cell { font-size: 18px !important; }
    .enter-btn {
        min-width: 64px !important;
        height: 28px !important;
        font-size: 11px !important;
        padding: 0 8px !important;
    }


    /* ─────────── E. Footer ─────────── */
    .footer-wrapper { padding: 24px 16px !important; }
    .footer-links { flex-direction: column !important; gap: 8px !important; }
}


/* ============= ≤ 480px (小手机)============= */
@media (max-width: 480px) {
    body[data-page="index"] .hot-section .hot-grid { gap: 8px !important; }

    .schedule-row { padding: 10px 8px !important; gap: 6px !important; }
    .schedule-row .team-name { max-width: 64px !important; font-size: 11px !important; }
    .schedule-row .team-logo { width: 22px !important; height: 22px !important; }
    .schedule-row .match-time { font-size: 14px !important; }
    .score-cell { font-size: 16px !important; }
    .schedule-row .league-name { font-size: 10px !important; }
    .schedule-row .match-date { font-size: 10px !important; }

    .page-schedule .date-list ul {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
    }
    .page-schedule .date-list .item { flex-shrink: 0 !important; }
}

/* 移动端下载条标语"高清无广告 体育直播"强制白色 */
#screenFooterText { color: #fff !important; }

/* 移动端比赛卡片队伍名:最多约4个中文字,去掉省略号(直接裁切) */
@media screen and (max-width: 768px) {
    .match-slider .match-card .team-name {
        max-width: 4em !important;
        text-overflow: clip !important;
    }
}