/* ============================================================
   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:24px;
    flex-shrink:0;
}
.top_logo img{ height:36px; width:auto; }

/* 导航链接组 */
.top_nav{
    display:flex;
    align-items:center;
    gap:4px;
    flex:1;
}
.top_nav_item{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    color:rgba(220,235,255,.85);
    transition:background .18s,color .18s;
    white-space:nowrap;
    text-decoration:none;
    cursor:pointer;
    border:none;
    background:transparent;
    font-family:inherit;
}
.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:8px;
    flex-shrink:0;
}

/* Sign In — solid white pill, very visible on dark nav */
.top_user_btn{
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    padding:7px 0;
    width:100px;
    border-radius:999px;
    font-size:13px; 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; justify-content:center; gap:5px;
    padding:7px 0;
    width:100px;
    background:linear-gradient(135deg,#f97316,#ef4444);
    color:#fff; border-radius:999px;
    font-size:13px; 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); }

/* Other sports dropdown in left sidebar */
.left_other_sel {
    width: 100%;
    padding: 8px 10px;
    background: #fff;
    color: #3a4460;
    border: 1px solid #e2e6f0;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}
.left_other_sel:focus { border-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;
}


/* ============================================================
   单场比赛行 — grid 固定列，各行联赛/时间/状态纵向对齐
   ============================================================ */
.right_saishi{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r);
    margin-top:10px !important;
    padding:8px 14px;
    display:grid;
    align-items:center;
    column-gap:8px;
    box-shadow:var(--sh);
    transition:box-shadow .2s,transform .2s,border-color .2s;
}
/* 对阵：联赛 | 时间 | 主队 | VS | 客队 | 状态 */
.right_saishi--h2h,
.right_saishi--solo{
    grid-template-columns:130px 58px minmax(0,1fr) 36px minmax(0,1fr) 112px;
}
.right_saishi:hover{
    box-shadow:var(--sh-hover);
    transform:translateY(-2px);
    border-color:#c8ddf5;
}

/* 联赛列 — 左对齐 */
.r_0{
    min-width:0;
    color:var(--ink-soft);
    font-size:11px;
    line-height:1.3;
    overflow:hidden;
}
.r_0 > div{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* 时间列 — 左对齐，各行列对齐 */
.r_1{
    min-width:0;
    color:var(--accent);
    font-weight:700;
    font-size:13px;
    white-space:nowrap;
}

/* 直播状态 — 右对齐 */
.r_5{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.r_3{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9ca3af;
    font-weight:700;
    font-size:12px;
}

/* 主队（靠 VS）*/
.r_2{
    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{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:calc(100% - 34px);
}

/* 客队（靠 VS）*/
.r_4{
    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% - 34px);
}

.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_novs{
    width:100%;
    max-width:100%;
    text-align:center;
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    padding:0 4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.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_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; }

/* ============================================================
   Match Section Cards  (BingSport-style card boxes)
   ============================================================ */

/* Outer card wrapper */
.match_section_card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #eef0f4;
}

/* Card header strip */
.match_section_hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.sec_icon { font-size: 15px; line-height: 1; }
.sec_count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    padding: 2px 9px;
    background: rgba(0,0,0,.10);
}

/* Header colour variants */
.sec_hd_live     { background: #e74c3c; color: #fff; }
.sec_hd_soon     { background: #f39c12; color: #fff; }
.sec_hd_upcoming { background: #2980b9; color: #fff; }
.sec_hd_ended    { background: #95a5a6; color: #fff; }

/* Rows inside card: add divider between rows */
.match_section_card .right_saishi {
    border-bottom: 1px solid #f0f2f5;
    margin: 0;
    border-radius: 0;
}
.match_section_card .right_saishi:last-child { border-bottom: none; }

/* Live row: subtle left accent */
.right_saishi.rs_live {
    background: #fffafa;
    border-left: 3px solid #e74c3c;
}
/* Ended row: muted */
.right_saishi.rs_ended { opacity: .75; }

/* Starting-soon countdown badge */
.status_soon  { color: #c0720e !important; font-weight: 700; }
.status_ended { color: #aaa; font-size: 12px; }

/* ============================================================
   Date tabs row + Timezone selector
   ============================================================ */
.date_tabs_row {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
}
.date_tabs_row .date_tabs {
    flex: 1;
    min-width: 0;
    padding: 12px 0 14px;
}


/* ══════════════════════════════════════════════════════════
   LANGUAGE SWITCHER — Desktop & Mobile
══════════════════════════════════════════════════════════ */

/* ── Desktop: nav-integrated language button ── */
.top_nav_lang {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 4px;
}

/* The trigger button — looks like a nav item */
.top_nav_lang_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.9);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
    line-height: 1;
    letter-spacing: .04em;
}
.top_nav_lang_btn:hover,
.top_nav_lang.open .top_nav_lang_btn {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.45);
    color: #fff;
}
.nav_flag_img  { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); display:block; }
.nav_lang_code { font-size: 12px; letter-spacing: .05em; }
.nav_lang_chev { opacity: .65; transition: transform .2s; flex-shrink:0; }
.top_nav_lang.open .nav_lang_chev { transform: rotate(180deg); }

/* Shared dropdown panel */
.top_lang_wrap { position: relative; }
.top_lang_menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    width: 280px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,.18);
    overflow: hidden;
    padding: 6px;
}
.top_lang_menu.open { display: block; }

.top_lang_menu.open { display: block; }

.top_lang_opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #1f2937;
    font-size: 13px;
    transition: background .12s;
}
.top_lang_opt:hover  { background: #f3f4f6; }
.top_lang_opt.active { background: #eff6ff; color: #1d4ed8; font-weight: 700; }
.lang_opt_flag       { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); flex-shrink:0; display:block; }
.top_lang_opt_native { font-size: 12.5px; flex: 1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top_lang_opt_code   { font-size: 10.5px; color: #9ca3af; font-weight: 700; flex-shrink:0; }
.top_lang_opt.active .top_lang_opt_code { color: #60a5fa; }

/* ── Mobile language button ── */
.mob_lang_wrap { position: relative; }
.mob_lang_btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px;
    padding: 5px 7px;
    cursor: pointer;
    line-height: 1;
}
.mob_lang_menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 600;
    width: 200px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
    overflow: hidden;
    padding: 5px;
}
.mob_lang_menu.open { display: block; }
.mob_lang_opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: #1f2937;
    font-size: 13px;
    transition: background .12s;
}
.mob_lang_opt img    { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.mob_lang_opt:hover  { background: #f3f4f6; }
.mob_lang_opt.active { background: #eff6ff; color: #1d4ed8; font-weight: 700; }

/* JW Player — fill container, hide PiP */
.player_ratio .jwplayer,
.player_ratio .jw-wrapper { width:100% !important; height:100% !important; }
.player_ratio .jw-icon-pip { display:none !important; }