/* ============================================================
   ArabTV Live — PC Theme v2.0 (2026-05-30)
   float-based 两列布局（body_right 在 body_box DOM 之外，
   两列各自 float:left 并排显示，不使用 flexbox）
   ============================================================ */

:root{
    --brand:#0a66c2;
    --brand-dark:#084c97;
    --brand-soft:#e8f1fb;
    --accent:#f97316;
    --live:#e8362b;
    --ink:#1a1f2e;
    --ink-soft:#6b7280;
    --line:#e5e9f0;
    --bg:#f0f4fa;
    --card:#ffffff;
    --nav-h:72px;
    --left-w:220px;
    --right-w:948px;
    --gap:28px;
    --r:10px;
    --sh:0 2px 12px rgba(15,30,70,.07);
    --sh-hover:0 8px 28px rgba(10,102,194,.15);
}

*{ box-sizing:border-box; }

body{
    background:var(--bg);
    margin:0;
    padding:0 0 60px;
    font-size:15px;
    color:var(--ink);
    font-family:'Segoe UI','PingFang SC','Helvetica Neue',Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

a{ color:var(--ink); text-decoration:none; outline:none; transition:color .15s; }
a:hover{ color:var(--brand); }
img{ border:0; display:block; }
input,button,select,textarea{ outline:0; font-family:inherit; }

/* ============================================================
   顶部导航
   ============================================================ */
.top_box{
    height:var(--nav-h);
    width:100%;
    background:linear-gradient(135deg,#0d1b3e 0%,#0a3880 50%,var(--brand) 100%);
    box-shadow:0 3px 18px rgba(8,20,60,.35);
    position:sticky;
    top:0;
    z-index:100;
}
.top_dh{
    width:1196px;
    margin:0 auto;
    height:var(--nav-h);
    display:flex;
    align-items:center;
    gap:0;
}

/* Logo */
.top_logo{
    display:flex;
    align-items:center;
    margin-right:36px;
    flex-shrink:0;
}
.top_logo img{ height:44px; width:auto; }

/* 导航链接组 */
.top_nav{
    display:flex;
    align-items:center;
    gap:4px;
    flex:1;
}
.top_nav_item{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 20px;
    border-radius:999px;
    font-size:15px;
    font-weight:600;
    color:rgba(220,235,255,.85);
    transition:background .18s,color .18s;
    white-space:nowrap;
}
.top_nav_item svg{ flex-shrink:0; opacity:.8; }
.top_nav_item:hover{
    background:rgba(255,255,255,.14);
    color:#fff;
}
.top_nav_item.active{
    background:rgba(255,255,255,.18);
    color:#fff;
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);
}

/* User area (right side of nav) */
.top_user_area{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

/* Sign In — solid white pill, very visible on dark nav */
.top_user_btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 22px;
    border-radius:999px;
    font-size:14px; font-weight:700;
    color:#0a3880;
    background:#fff;
    border:2px solid #fff;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
    transition:background .15s, color .15s, box-shadow .15s;
    white-space:nowrap;
    letter-spacing:.01em;
}
.top_user_btn:hover{
    background:#e8f1fb;
    color:#0a3880;
    box-shadow:0 4px 16px rgba(0,0,0,.22);
}

/* Logged-in VIP badge */
.top_user_vip{
    background:linear-gradient(135deg,#f97316,#fbbf24);
    border-color:#f97316;
    color:#fff;
}
.top_user_vip:hover{ background:linear-gradient(135deg,#ea6800,#f59e0b); color:#fff; }

/* Subscribe — accent orange, animated pulse ring */
.top_sub_btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 22px;
    background:linear-gradient(135deg,#f97316,#ef4444);
    color:#fff; border-radius:999px;
    font-size:14px; font-weight:800;
    letter-spacing:.02em;
    box-shadow:0 0 0 0 rgba(249,115,22,.5);
    animation:sub_pulse 2.4s ease-in-out infinite;
    white-space:nowrap;
    border:2px solid transparent;
    transition:filter .15s, transform .12s;
}
.top_sub_btn:hover{
    filter:brightness(1.1);
    color:#fff;
    transform:scale(1.04);
    animation:none;
    box-shadow:0 4px 18px rgba(249,115,22,.5);
}
@keyframes sub_pulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(249,115,22,.5); }
    50%     { box-shadow:0 0 0 7px rgba(249,115,22,0); }
}

/* ── Social login bar (below nav, only when logged out) ── */
.social_bar{
    width:100%;
    background:linear-gradient(90deg,#0d1b3e,#0a3880 60%,#0a66c2);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:0;
}
.social_bar_inner{
    width:1196px;
    margin:0 auto;
    height:44px;
    display:flex;
    align-items:center;
    gap:14px;
}
.social_bar_label{
    font-size:12.5px;
    color:rgba(200,220,255,.7);
    font-weight:600;
    white-space:nowrap;
    flex-shrink:0;
}
.social_bar_btns{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.social_bar_btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 13px;
    border-radius:999px;
    font-size:12.5px; font-weight:700;
    background:rgba(255,255,255,.1);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    transition:background .15s, border-color .15s;
    white-space:nowrap;
}
.social_bar_btn:hover{
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.4);
    color:#fff;
}
.social_bar_btn svg{ width:14px; height:14px; flex-shrink:0; }
.social_bar_sep{
    color:rgba(200,220,255,.3);
    font-size:13px;
    flex-shrink:0;
}
.social_bar_email{
    font-size:12px;
    color:rgba(200,220,255,.6);
    margin-left:auto;
    white-space:nowrap;
    flex-shrink:0;
}
.social_bar_email a{
    color:rgba(200,220,255,.9);
    font-weight:600;
    border-bottom:1px solid rgba(200,220,255,.35);
}
.social_bar_email a:hover{ color:#fff; border-color:#fff; }
@media(max-width:1220px){
    .social_bar_inner{ width:100%; padding:0 16px; }
}
@media(max-width:760px){
    .social_bar{ display:none; }
}

/* 旧的 top_link / lang_switch（保留兼容，但不再显示） */
.top_link{ float:none; margin:0; line-height:var(--nav-h); }
.top_link a{ font-size:15px; color:rgba(220,235,255,.85); padding:9px 20px; border-radius:999px; display:inline-block; font-weight:600; }
.top_link a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.lang_switch{ display:none; }


/* ============================================================
   主体布局 — float（body_right 在 body_box DOM 之外）
   ============================================================ */
.body_box{
    width:1196px;
    margin:28px auto 0;
}
.body_left{
    float:left;
    width:var(--left-w);
}
.body_right{
    float:left;
    width:var(--right-w);
    margin-left:var(--gap);
}


/* ============================================================
   左侧分类面板
   ============================================================ */
.left_list{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r);
    margin-bottom:18px;
    overflow:hidden;
    box-shadow:var(--sh);
}
.left_first{
    height:44px; line-height:44px;
    background:linear-gradient(90deg,var(--brand) 0%,var(--brand-dark) 100%);
    padding:0 18px;
    color:#fff; font-weight:700; font-size:14px; letter-spacing:.4px;
}
.left_link{
    height:42px; line-height:42px;
    padding:0 18px;
    border-bottom:1px solid #f1f4f9;
    transition:background .14s;
}
.left_link:last-child{ border-bottom:0; }
.left_link:hover{ background:var(--brand-soft); }
.left_link a{
    display:block;
    font-size:14px;
    color:#3a4460;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.left_link:hover a{ color:var(--brand); }


/* ============================================================
   右侧日期分隔
   ============================================================ */
.right_date{
    border-bottom:0 !important;
    height:auto !important;
    clear:both;
    margin:20px 0 8px;
}
.right_date span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 18px;
    background:var(--ink);
    color:#fff;
    font-size:13px;
    font-weight:700;
    border-radius:999px;
    letter-spacing:.4px;
}


/* ============================================================
   单场比赛行 — flexbox 布局，自动撑满宽度
   ============================================================ */
.right_saishi{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r);
    margin-top:10px !important;
    padding:8px 14px;
    display:flex;
    align-items:center;
    gap:0;
    box-shadow:var(--sh);
    transition:box-shadow .2s,transform .2s,border-color .2s;
}
.right_saishi:hover{
    box-shadow:var(--sh-hover);
    transform:translateY(-2px);
    border-color:#c8ddf5;
}

/* 百分比列宽，加起来 = 100%，均匀铺满整行 */
.r_0{ flex:0 0 13%; min-width:0; display:flex; align-items:center; color:var(--ink-soft); font-size:11px; line-height:1.3; overflow:hidden; }
.r_1{ flex:0 0 8%;  min-width:0; display:flex; align-items:center; color:var(--accent); font-weight:700; font-size:13px; }
.r_3{ flex:0 0 4%;  min-width:0; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-weight:700; font-size:12px; }
.r_5{ flex:0 0 15%; min-width:0; display:flex; align-items:center; justify-content:flex-end; }

/* r_2 主队 29%（整体右对齐靠近 VS，名称+logo 紧凑排列）*/
.r_2{
    flex:0 0 29%; min-width:0;
    display:flex; align-items:center; justify-content:flex-end;
    gap:8px; font-size:13px; font-weight:600; overflow:hidden;
}
.r_2 .tname{
    /* 不用 flex:1，文字只占自身宽度，gap 才真正显示在文字和 logo 之间 */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width: calc(100% - 42px); /* 留出 logo 26px + gap 8px + padding */
}

/* r_4 客队 29%（整体左对齐靠近 VS，logo+名称 紧凑排列）*/
.r_4{
    flex:0 0 29%; min-width:0;
    display:flex; align-items:center;
    gap:8px; font-size:13px; font-weight:600; overflow:hidden;
}
.r_4 .tname{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width: calc(100% - 42px);
}

.r_2 img,.r_4 img{
    width:26px; height:26px;
    border-radius:50%;
    background:#f0f4fa;
    padding:2px;
    box-shadow:0 0 0 1px var(--line);
    flex-shrink:0;
    object-fit:contain;
}
.r_0 img{ width:18px; height:18px; border-radius:4px; flex-shrink:0; }

/* 状态标签 */
.part_c_guankan{
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 11px;
    background:rgba(232,54,43,.1);
    color:var(--live);
    border-radius:999px; font-size:12px; font-weight:700;
}
.part_c_guankan::before{
    content:''; display:inline-block;
    width:6px; height:6px; border-radius:50%;
    background:var(--live);
    animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.5; transform:scale(1.4); }
}

.part_dianji_guankan{
    display:inline-block;
    padding:8px 18px;
    background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
    color:#fff !important;
    border-radius:999px;
    font-size:13px; font-weight:700;
    box-shadow:0 4px 12px rgba(10,102,194,.3);
    transition:filter .15s,transform .15s;
    white-space:nowrap;
}
.part_dianji_guankan:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.r_5 .part_dianji_guankan{
    background:#eef2f8; color:var(--ink-soft) !important;
    box-shadow:none; font-size:12px; padding:6px 12px;
}


/* ============================================================
   电视频道列表
   ============================================================ */
.right_date span { }   /* 复用 */

.right_tv_move{
    float:left;
    margin:16px 20px 10px 0;
    transition:transform .2s;
}
.right_tv_move:hover{ transform:translateY(-4px); }

.right_tv_img img{
    width:186px; height:116px;
    object-fit:cover;
    border-radius:10px;
    box-shadow:var(--sh);
    transition:box-shadow .2s;
    background:#e8edf5;
}
.right_tv_move:hover .right_tv_img img{ box-shadow:var(--sh-hover); }

.right_tv_name{
    font-size:13px;
    font-weight:600;
    margin-top:9px;
    text-align:center;
    color:#3a4460;
    max-width:186px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* tv.php 移动端分类标题（PC 也引用） */
.tv_pindao{
    font-size:17px; font-weight:700;
    color:var(--ink);
    margin:22px 0 4px;
    padding-left:14px;
    border-left:4px solid var(--brand);
}


/* ============================================================
   播放页 — 全新现代设计
   ============================================================ */

/* ── 面包屑 ── */
.show_place{
    width:1196px;
    margin:0 auto;
    padding:14px 0 10px;
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    font-size:13px; color:var(--ink-soft);
}
.show_place a{ color:var(--ink-soft); font-size:13px; transition:color .15s; }
.show_place a:hover{ color:var(--brand); }
.show_place .bc_sep{ color:#c0c8d8; font-size:12px; }
.vs{ color:var(--live); font-weight:800; font-size:16px; letter-spacing:.05em; }

/* ── 主容器 ── */
.show_page{
    width:1196px;
    margin:0 auto 40px;
}

/* ── 播放页紧凑信息条（替代原大英雄区） ── */
.show_meta_strip{
    background:linear-gradient(90deg,#0d1b3e 0%,#0a3880 70%,#0a52a8 100%);
    border-radius:12px 12px 0 0;
    padding:0 22px;
    height:52px;
    display:flex;
    align-items:center;
    gap:14px;
    overflow:hidden;
}
.show_meta_live{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--live);
    border-radius:5px;
    padding:3px 10px;
    font-size:11px; font-weight:800; color:#fff;
    letter-spacing:.08em; text-transform:uppercase;
    flex-shrink:0;
}
.show_meta_live_dot{
    width:6px; height:6px; border-radius:50%;
    background:#fff;
    animation:live_blink 1.4s ease-in-out infinite;
}
@keyframes live_blink{
    0%,100%{ opacity:1; }
    50%     { opacity:.35; }
}
.show_meta_title{
    font-size:15px; font-weight:700; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    flex:1; min-width:0;
}
.show_meta_title .vs{ color:var(--live); font-size:13px; margin:0 6px; }
.show_meta_badge{
    flex-shrink:0;
    font-size:12px; color:rgba(200,220,255,.7);
    background:rgba(255,255,255,.08);
    border-radius:5px; padding:3px 10px;
    white-space:nowrap;
}

/* ── 播放器容器 ── */
.player_outer{
    background:#000;
    position:relative;
}
.player_ratio{
    position:relative;
    width:100%;
    padding-bottom:52%; /* slightly less than 16:9 for sidebar feel */
    background:#000;
    overflow:hidden;
}
.player_ratio iframe,
.player_ratio video,
.player_ratio object,
.player_ratio embed,
.player_ratio easy-player{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border:0;
}
/* EasyPlayer custom element */
.player_ratio easy-player{
    display:block;
}
.player_loading{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#0a0e1a;
    color:rgba(200,220,255,.5);
    font-size:14px; gap:14px;
    pointer-events:none;
    z-index:1;
    transition:opacity .4s;
}
.player_loading.hidden{ opacity:0; pointer-events:none; }
.player_spinner{
    width:36px; height:36px;
    border:3px solid rgba(200,220,255,.15);
    border-top-color:var(--brand);
    border-radius:50%;
    animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── 信号线路选择栏 ── */
.signal_bar{
    background:#fff;
    border:1px solid var(--line);
    border-radius:0 0 14px 14px;
    padding:16px 20px;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    box-shadow:var(--sh);
    margin-bottom:16px;
}
.signal_bar_label{
    font-size:12px; font-weight:700;
    color:var(--ink-soft);
    letter-spacing:.06em; text-transform:uppercase;
    flex-shrink:0;
}
.signal_bar_btns{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.xinhao_list_but{
    display:inline-flex; align-items:center; gap:5px;
    border-radius:8px;
    font-size:13px;
    padding:7px 18px;
    color:#3a4460;
    background:#f0f4fa;
    border:1.5px solid var(--line);
    white-space:nowrap;
    font-weight:600;
    transition:all .15s;
    cursor:pointer;
}
.xinhao_list_but:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.xinhao_list_focus{
    color:#fff !important;
    background:linear-gradient(135deg,var(--brand),var(--brand-dark)) !important;
    border-color:transparent !important;
    box-shadow:0 4px 12px rgba(10,102,194,.28);
}
.xinhao_list_limit{
    color:rgba(255,255,255,.7) !important;
    background:#9ca3af !important;
    border-color:transparent !important;
    cursor:not-allowed !important;
}
/* Legacy wrapper used by old HTML */
.xinhao_list{ display:none; }

/* ── 分享 / 复制链接栏 ── */
.share_bar{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:12px 20px;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    box-shadow:var(--sh);
    margin-bottom:16px;
}
.share_bar_label{
    font-size:12px; font-weight:700; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.06em;
    flex-shrink:0;
}
.fuzhi_input{
    border:1.5px solid var(--line);
    background:#f7f9fc;
    font-size:13px;
    padding:8px 14px;
    border-radius:8px 0 0 8px;
    color:#222;
    flex:1; min-width:200px; height:38px;
    line-height:22px;
    vertical-align:top;
}
.fuzhi_but{
    border:1.5px solid var(--line);
    border-left:0;
    background:#fff;
    font-size:13px;
    border-radius:0 8px 8px 0;
    color:var(--brand);
    height:38px; width:80px;
    cursor:pointer;
    font-weight:700;
    transition:background .15s, color .15s;
    flex-shrink:0;
}
.fuzhi_but:hover{ background:var(--brand); color:#fff; }
.xinhao_tishi{ display:none; }

/* ── 分栏布局（信息 + 推荐） ── */
.show_grid{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:16px;
    align-items:start;
}

/* 赛事信息 */
.show_info_card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:var(--sh);
    overflow:hidden;
}
.show_info_head{
    display:flex; align-items:center; gap:10px;
    padding:14px 20px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(90deg,#f0f4fa,#fff);
}
.show_info_head svg{ color:var(--brand); flex-shrink:0; }
.show_info_head span{ font-size:15px; font-weight:700; color:var(--ink); }
.show_info_body{ padding:16px 20px; }
.show_info_row{
    display:flex; align-items:baseline; gap:10px;
    padding:8px 0;
    border-bottom:1px dashed var(--line);
    font-size:14px;
}
.show_info_row:last-child{ border-bottom:none; }
.show_info_key{
    font-weight:700; color:var(--ink-soft);
    white-space:nowrap; flex-shrink:0; min-width:90px;
}
.show_info_val{ color:var(--ink); line-height:1.6; }
.show_info_desc{ padding:12px 20px 16px; font-size:14px; color:var(--ink-soft); line-height:1.8; }

/* 推荐列表 */
.show_recommend{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:var(--sh);
    overflow:hidden;
}
.show_recommend_head{
    display:flex; align-items:center; gap:10px;
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(90deg,#f0f4fa,#fff);
}
.show_recommend_head span{ font-size:15px; font-weight:700; color:var(--ink); }
.show_recommend_list{ padding:8px 0; max-height:480px; overflow-y:auto; }
.show_recommend_list::-webkit-scrollbar{ width:4px; }
.show_recommend_list::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:2px; }
.rec_item{
    display:flex; align-items:center; gap:10px;
    padding:10px 18px;
    border-bottom:1px solid #f3f4f6;
    transition:background .15s;
}
.rec_item:last-child{ border-bottom:none; }
.rec_item:hover{ background:var(--brand-soft); }
.rec_item a{ color:var(--ink); font-size:13.5px; font-weight:600; flex:1; line-height:1.3; }
.rec_item a:hover{ color:var(--brand); }
.rec_item_meta{ font-size:11.5px; color:var(--ink-soft); white-space:nowrap; flex-shrink:0; }
.rec_item_dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--live); flex-shrink:0;
    animation:live_blink 1.4s ease-in-out infinite;
}
.rec_empty{
    padding:24px; text-align:center;
    color:var(--ink-soft); font-size:13px;
}

/* Legacy wrappers — hidden in new design */
.tuijian{ display:none; }
.tuijian_pk{ display:none; }
.xinhao_text{ display:none; }

/* Section title (legacy inline-style replacer) */
.sec_title{
    display:flex; align-items:center; gap:10px;
    margin:0 0 10px;
}
.sec_title_bar{
    display:inline-block;
    background:linear-gradient(135deg,var(--brand),var(--brand-dark));
    color:#fff;
    font-size:14px; font-weight:700;
    padding:8px 20px;
    border-radius:8px;
    letter-spacing:.03em;
}


/* ============================================================
   页脚
   ============================================================ */
.foot{
    background:#0d1b3e;
    color:#8fa3c8;
    clear:both;
    padding:36px 0 28px;
    margin-top:48px;
    font-size:14px;
}
.foot_inner{
    width:1196px;
    margin:0 auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
}
.foot_logo img{ height:32px; width:auto; filter:brightness(0) invert(1) opacity(.7); }
.foot_links{
    display:flex; gap:20px; flex-wrap:wrap;
    flex:1;
}
.foot_links a{ color:#8fa3c8; font-size:14px; transition:color .15s; }
.foot_links a:hover{ color:#fff; }
.foot_copy{
    width:100%;
    text-align:center;
    font-size:12px;
    color:#5a6e8f;
    margin-top:12px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.06);
}
.foot_copy a{ color:#5a6e8f; }
.foot_copy a:hover{ color:#8fa3c8; }

/* 旧 foot_copy（兼容旧 foot.php 输出的 div） */
.foot > div{ line-height:26px; text-align:center; font-size:13px; color:#8fa3c8; }
.foot > div a{ color:#8fa3c8; }


/* ============================================================
   侧边广告位（隐藏浮动广告，避免遮挡内容）
   ============================================================ */
#ad_left_div,#ad_right_div{ display:none !important; }


/* ============================================================
   响应式适配
   ============================================================ */
@media (max-width:1260px){
    .top_dh,.body_box,.show_place,.foot_inner,.show_page{ width:98%; }
    .body_right{ width:calc(100% - var(--left-w) - var(--gap)); }
}
@media (max-width:1024px){
    :root{ --left-w:190px; --gap:20px; }
    .body_right{ width:calc(100% - 190px - 20px); }
    .show_grid{ grid-template-columns:1fr 290px; }
}
@media (max-width:820px){
    .body_left,.body_right{ float:none; width:100% !important; margin-left:0 !important; }
    .top_box{ height:auto; }
    .top_dh{ flex-wrap:wrap; padding:10px 0; height:auto; gap:8px; }
    .top_logo{ margin-right:0; }
    .top_nav{ flex-wrap:wrap; }
    .show_hero{ border-radius:10px 10px 0 0; padding:20px 18px 16px; }
    .show_hero_team_name{ font-size:18px; }
    .show_hero_vs{ font-size:22px; }
    .show_grid{ grid-template-columns:1fr; }
    .player_ratio{ padding-bottom:56.25%; }
    .signal_bar{ border-radius:0 0 10px 10px; flex-wrap:wrap; gap:8px; padding:12px 14px; }
    .share_bar{ flex-wrap:wrap; gap:8px; }
    .fuzhi_input{ min-width:120px; }
    .social_bar_inner{ gap:10px; }
}

/* ============================================================
   Date Tab Bar (Homepage)
   ============================================================ */
.date_tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.date_tabs::-webkit-scrollbar { display: none; }

.date_tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
    padding: 7px 12px;
    border-radius: 8px;
    text-decoration: none;
    background: #f0f4fa;
    color: #555;
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.date_tab:hover { background: #dde6f5; color: #1a3a6e; }
.date_tab.active { background: #1a3a6e; color: #fff; }
.dt_label { font-weight: 700; font-size: 13px; line-height: 1.3; }
.dt_week  { font-size: 11px; opacity: 0.8; line-height: 1.2; }
.date_tab.active .dt_week { opacity: 0.85; }

/* No-match empty state */
.no_match_tip {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.no_match_tip p { margin-top: 12px; font-size: 15px; }