/* Extracted from front-page.php */

    
    body { background-color: var(--main-bg); font-family: -apple-system, "Microsoft YaHei", sans-serif; }
    .portal-home-wrap { padding: 5px 0 50px; overflow-x: hidden; }
    .jzt-portal-inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box;}
    .home-grid { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 30px; width: 100%;}
    .home-main { flex: 1; min-width: 0; }
    .home-side { width: 340px; flex-shrink: 0; }
    .mod-box { background: #fff; margin-bottom: 20px; border: 1px solid var(--border-color); box-shadow: 0 2px 5px rgba(0,0,0,0.02);}
    .mod-hd { display: flex; background: #fafafa; border-bottom: 1px solid var(--border-color); align-items: center;}
    .schedule-tabs { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; background: #fafafa; -webkit-overflow-scrolling: touch; width: 100%;}
    .schedule-tabs::-webkit-scrollbar { display: none; }
    .schedule-tabs li { padding: 14px 22px; font-size: 15px; cursor: pointer; color: #444; transition: 0.2s; white-space: nowrap; font-weight: bold;}
    .schedule-tabs li.active { background: var(--theme-primary); color: #fff;}
    .schedule-tabs li:hover:not(.active) { color: var(--theme-primary); background: #fff;}
    .mod-bd { position: relative; }
    .jzt-match-row { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #f0f0f0; background: #fff; text-decoration: none; color: #333; font-size: 13px; transition: background 0.2s; }
    .jzt-match-row:hover { background-color: #f9f9fa; }
    .jzt-match-row:last-child { border-bottom: none; }
    .jzt-m-status-box { width: 60px; flex-shrink: 0; text-align: center; }
    .jzt-m-badge { display: inline-block; padding: 3px 6px; border-radius: 3px; font-size: 12px; color: #fff; }
    .jzt-m-badge.ns { background-color: var(--theme-primary); } 
    .jzt-m-badge.live { background-color: var(--theme-primary); animation: blink 1.5s infinite;}
    .jzt-m-badge.ft { background-color: #65b53c; }
    .jzt-m-time { width: 90px; text-align: center; color: #555; font-family: Arial, sans-serif; flex-shrink: 0;}
    .m-league { width: 70px; color: #888; text-align: center; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .jzt-m-team { flex: 1; display: flex; align-items: center; min-width: 0; font-size: 14px; font-weight: bold; color:#333; }
    .jzt-m-team.h { justify-content: flex-end; text-align: right; }
    .jzt-m-team.a { justify-content: flex-start; text-align: left; }
    .jzt-jzt-m-team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
    .jzt-m-logo { width: 26px; height: 26px; object-fit: contain; margin: 0 10px; }
    .jzt-m-score { width: 90px; text-align: center; font-weight: bold; font-size: 16px; color: #333; flex-shrink: 0; font-family: Tahoma, sans-serif;}
    .jzt-m-score.is-live { color: var(--theme-primary); }
    
    .m-links { width: 160px; font-size: 12px; text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; line-height: 1.2; justify-content: center; margin-left:15px;}
    .m-link-row1 { font-weight: bold; color: #333; font-size: 13px;}
    .m-link-row1 i { color: var(--theme-primary); margin-right: 4px;}
    .m-link-row2 { display: flex; justify-content: flex-end; gap: 8px;}
    
    .dynamic-src { color: var(--theme-primary); border: 1px solid var(--theme-primary); padding: 2px 6px; border-radius: 3px; text-decoration: none; font-size: 11px; transition: 0.2s;}
    .dynamic-src:hover { background: var(--theme-primary); color: #fff; }
    
    .mob-status { display: none; }
    .jzt-m-time span { display: inline; }
    @keyframes blink { 50% { opacity: 0.6; } }
    /* ====================================================
       侧边栏双 Tab：黑底白字激活
       ==================================================== */
    .side-tabs-hd { display: flex; background: #fafafa; border-bottom: 1px solid var(--border-color); margin: 0; padding: 0;}
    .side-tabs-hd li { flex: 1; text-align: center; padding: 14px 0; font-size: 15px; font-weight: bold; color: #444; cursor: pointer; list-style: none; transition: 0.2s;}
    .side-tabs-hd li.active { background: var(--theme-primary); color: #fff;}
    .side-tabs-hd li:hover:not(.active) { color: var(--theme-primary); background: #fff;}
    .side-pane { display: none; }
    .side-pane.active { display: block; animation: fadeIn 0.3s; }
    .side-news-list { list-style: none; padding: 15px 20px; margin: 0; }
    .side-news-list li { margin-bottom: 14px; padding-left: 12px; position: relative; line-height: 1.6; font-size: 14px; border-bottom: 1px dashed #f5f5f5; padding-bottom: 8px;}
    .side-news-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
    .side-news-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background: #ccc; border-radius: 50%; }
    .side-news-list a { color: #444; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .side-news-list a:hover { color: var(--theme-primary); }
    .side-video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 15px; }
    .v-card { text-decoration: none; display: block; position: relative; }
    .v-thumb { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 4px; overflow: hidden; position: relative;}
    .v-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: 0.3s;}
    .v-card:hover .v-thumb img { opacity: 1; transform: scale(1.05); }
    .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .play-icon::after { content: ''; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 4px; }
    .v-title { font-size: 12px; color: #333; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4;}
    /* 矩阵区样式 */
    .matrix-box { background: #fff; margin-bottom: 20px; width: 100%; box-sizing: border-box;}
    .matrix-tabs { display: flex; list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--theme-primary); background: #fdfdfd; border-bottom: 1px solid var(--border-color); flex-wrap: wrap;}
    .matrix-tabs li { padding: 15px 25px; font-size: 15px; cursor: pointer; color: #333; transition: 0.2s; border-right: 1px solid #f0f0f0; }
    .matrix-tabs li:hover, .matrix-tabs li.active { background: var(--theme-primary); color: #fff; }
    .matrix-bd { padding: 20px; background: #fff; border: 1px solid #eee; border-top: none;}
    .matrix-pane { display: none; }
    .matrix-pane.active { display: block; animation: fadeIn 0.3s; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .matrix-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
    .matrix-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; color: #333; padding: 15px 5px; background: #fff; border: 1px solid #eee; border-radius: 4px; transition: 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.02);}
    .matrix-item:hover { border-color: var(--theme-primary); box-shadow: 0 4px 10px rgba(0,0,0,0.08); transform: translateY(-2px);}
    .matrix-item img { width: 45px; height: 45px; object-fit: contain; margin-bottom: 10px; border-radius: 4px; display: block; }
    .matrix-item.rounded img { border-radius: 50%; object-fit: cover;}
    .matrix-item span { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; width: 100%;}
    .partner-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
    .partner-item { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: #fdfdfd; border: 1px solid #eee; border-radius: 4px; text-decoration: none; color: #444; transition: 0.2s;}
    .partner-item:hover { border-color: var(--theme-primary); color: var(--theme-primary); background: #fffafb;}
    .partner-item img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0;}
    .partner-item span { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* ====================================================
   移动端极致自适应重构版 (全宽大图 + 还原筛选 + 雷速卡片)
   ==================================================== */
@media (max-width: 768px) {
    .portal-home-wrap { padding: 0 0 30px; }
    .jzt-portal-inner { padding: 0 !important; overflow-x: hidden; display: flex; flex-direction: column; } 
    
    /* 1. 顶部矩阵：暴力抹除 padding 20px，实现 100% 贴边全宽 */
    .home-top-matrix { display: flex; flex-direction: column; gap: 10px; padding: 0 !important; margin-bottom: 10px; background: transparent; box-shadow: none; border: none; }
    .htm-left { width: 100%; border: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .htm-slider { width: 100%; border-radius: 0; margin-bottom: 0; } 
    .htm-small-cards { width: 100%; padding: 0 10px; box-sizing: border-box; }
    
    /* 2. 两张小图的标题：强制 1 行，多余的用 ... 代替 */
    .htm-sm-tit { height: auto !important; max-height: none !important; white-space: nowrap !important; display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 10px 8px !important; font-size: 13px !important; }
    
    /* 隐藏 PC 端才需要的中间资讯和右侧视频 */
    .htm-mid, .htm-right { display: none !important; }
    
    /* 3. 赛程与下半部分结构 */
    .home-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
    .home-main { width: 100%; max-width: 100%; } 
    .home-side { width: 100%; max-width: 100%; } 
    
    .seo-hub-full { margin: 0 0 10px 0; border-radius: 0; border-left: none; border-right: none;}
    .matrix-box { border-radius: 0; border-left: none; border-right: none; margin-top: 0;}
    
    /* =========================================================
       🔥 4. 核心重构：还原筛选菜单 + 雷速风格高级赛程卡片
       ========================================================= */
    .mod-box { border-radius: 0; border-left: none; border-right: none; margin-bottom: 10px; width: 100%; box-sizing: border-box; background: transparent; box-shadow: none;}
    
    /* 【还原菜单】恢复原有的联赛筛选器，并让它横向可滑动 */
    .mod-hd { display: flex !important; flex-direction: row; align-items: center; width: 100%; padding: 0; background: #fff; border-bottom: 1px solid #f0f0f0; }
    .schedule-tabs { width: 100%; padding: 0; border-bottom: none; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .schedule-tabs::-webkit-scrollbar { display: none; }
    .schedule-tabs li { padding: 12px 16px; font-size: 14px; flex-shrink: 0; }
    
    /* 给赛程列表区加一个淡灰色背景，让白色的卡片更立体 */
    .mod-bd#scheduleList { background: #f5f6f7 !important; padding: 10px !important; }
    
    /* 独立卡片化设计，加深边界和阴影 */
    .jzt-match-row, .jzt-match-row-div { 
        position: relative;
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 38px 12px 12px !important; /* 顶部留出 38px 给时间和状态 */
        background: #fff;
        margin-bottom: 12px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    /* 时间：放左上角，同排展示 */
    .jzt-m-time { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: row; gap: 6px; width: auto; }
    .jzt-m-time .t-md, .jzt-m-time .t-hi { font-size: 12px !important; font-weight: normal !important; color: #888 !important; display: block; }
    
    /* 比赛状态：放右上角，更清晰 */
    .jzt-m-status-box { position: absolute; top: 10px; right: 12px; width: auto; z-index: 2; margin: 0;}
    .jzt-m-badge { background: #65b53c; color: #777; padding: 1px 5px; font-size: 11px; border-radius: 4px; font-weight: bold; letter-spacing: 0;}
    .jzt-m-badge.live { background: #ffebee; color: #e11d48; border: 1px solid #fecdd3; animation: blink 1.5s infinite;}
    .pc-status { display: none; }
    .mob-status { display: inline; } 
    
    /* 球队布局：主队(名+Logo) VS 客队(Logo+名) */
    .jzt-m-team { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px;}
    .jzt-m-team.h { justify-content: flex-end; flex-direction: row; text-align: right;}
    .jzt-m-team.a { justify-content: flex-start; flex-direction: row; text-align: left;}
    
    .jzt-jzt-m-team-name { font-weight: bold; color: #333; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .jzt-m-logo { width: 28px !important; height: 28px !important; margin: 0 !important; }
    
    /* 居中比分/VS */
    .jzt-m-score { flex: 0 0 65px; text-align: center; font-size: 18px; font-weight: 900; color: #222; font-family: Impact, sans-serif; letter-spacing: 0; margin-top: 0; display: flex; justify-content: center; align-items: center;}
    .jzt-m-score.is-live { color: #e11d48; }
    .m-league { display: none; } 
    
    /* 底部按钮组按胶囊样式居中显示 */
    .m-links, .m-links-new { 
        display: flex !important; 
        width: 100% !important; 
        flex-direction: row !important; 
        justify-content: center !important; 
        gap: 15px !important; 
        margin-top: 15px !important; 
        padding-top: 12px !important; 
        border-top: 1px dashed #f0f0f0; 
        margin-left: 0 !important;
    }
    .m-link-row1, .m-link-row2 { display: flex; gap: 10px; align-items: center; justify-content: center; width: auto;}
    
    /* 按钮样式精修：高亮主按钮，置灰副按钮 */
    .dynamic-src, .m-btn-hd { 
        background: #fff !important; 
        color: var(--theme-primary) !important;
        border: 1px solid var(--theme-primary) !important;
        padding: 5px 20px !important; 
        border-radius: 30px !important; 
        font-size: 12px !important; 
        font-weight: bold;
    }
    .m-btn-bak { 
        background: #f5f6f7 !important; 
        color: #666 !important; 
        border: none !important; 
        padding: 6px 20px !important; 
        font-size: 12px !important; 
        border-radius: 30px !important;
    }
    .src-divider { display: none; } 

    /* 底部通用网格保持不变 */
    .matrix-bd { padding: 15px; border: none; }
    .matrix-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .matrix-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; border-top: none;}
    .matrix-tabs::-webkit-scrollbar { display: none; }
    .matrix-tabs li { padding: 12px 15px; font-size: 14px; flex-shrink: 0; border-bottom: 2px solid transparent;}
    .matrix-tabs li.active { border-bottom-color: var(--theme-primary); border-right: none;}
    .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 10px;}
    .sh-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}