:root {
            /* 基础变量 - 标准化 */
            --primary: #0778b8;
            --danger: #ff4d4f;
            --gray-100: #f8f9fa;
            --gray-200: #e9ecef;
            --gray-300: #dee2e6;
            --gray-600: #6c757d;
            --gray-800: #343a40;
            
            /* 固定列宽 - 核心排版规范 */
            --col-time: 90px;      /* 时间列宽度 */
            --col-league: 150px;   /* 联赛名列宽度 */
            --col-status: 100px;   /* 状态列宽度 */
            --col-team-logo: 40px; /* 队徽尺寸 */
            
            /* 间距标准化 */
            --gap-col: 16px;       /* 列间距 */
            --padding-item: 16px;  /* 列表项内边距 */
            --padding-container: 20px; /* 容器内边距 */
            
            /* 视觉样式 */
            --radius-6: 6px;
            --radius-10: 10px;
            --border-color: var(--gray-200);
            --transition: all 0.2s ease;
        }

        /* 容器重置 - 保证基础整齐 */
        .liveview {
            margin-bottom: 20px;
            border-radius: 8px;
            background: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        /* 标题栏 - 对齐规范 */
        .liveview .panel-title {
            background: var(--primary);
            padding: 7px var(--padding-container);
        }

        .liveview .panel-title h2 {
            color: white;
            font-size: 16px;
            font-weight: 600;
            margin: 0;
            /* line-height: 1.2; */ /* 固定行高保证对齐 */
        }

        /* 列表容器 - 消除默认样式 */
        .liveview .panel-body {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* 列表项 - 核心整齐化 */
        .liveview .panel-body li {
            padding: var(--padding-item) var(--padding-container);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center; /* 强制垂直居中 */
            height: 80px; /* 固定行高，保证每行高度一致 */
            box-sizing: border-box;
        }

        .liveview .panel-body li:last-child {
            border-bottom: none;
        }

        /* ========== PC端极致整齐排版 (769px以上) ========== */
        @media (min-width: 769px) {
            /* 父容器 - 网格布局（比flex更整齐） */
            .liveview .panel-body li > div {
                width: 100%;
                display: grid;
                /* 固定列宽网格，保证每列对齐 */
                grid-template-columns: 
                    var(--col-time) 
                    var(--col-league) 
                    1fr 
                    var(--col-status);
                grid-gap: var(--gap-col);
                align-items: center; /* 全局垂直居中 */
            }

            /* 1. 时间列 - 完全固定 */
            .liveview time {
                font-size: 14px;
                color: var(--gray-800);
                font-weight: 600;
                text-align: center;
                width: var(--col-time);
                height: 32px;
                line-height: 32px; /* 行高=高度，文字垂直居中 */
                background: var(--gray-100);
                border-radius: var(--radius-6);
                display: block;
                /* 强制不换行 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* 2. 联赛列 - 固定宽度+文本规范 + 时间同款背景（核心修改） */
            .liveview li > div > a:first-of-type {
                font-size: 13px;
                color: var(--gray-600);
                text-decoration: none;
                width: var(--col-league);
                height: 32px;          /* 新增：和时间列同高度 */
                line-height: 32px;     /* 新增：垂直居中 */
                text-align: center;    /* 新增：文字居中 */
                background: var(--gray-100); /* 新增：和时间列同背景 */
                border-radius: var(--radius-6); /* 新增：和时间列同圆角 */
                /* 文本强制规范 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: block;
            }

            /* 3. 对阵信息列 - 结构化对齐 */
            .match-info {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 12px; /* 内部固定间距 */
                width: 100%;
                padding: 0 8px;
                /* 增加竖线分隔，强化列边界 */
                border-left: 1px solid var(--border-color);
                padding-left: var(--gap-col);
            }

            /* 队徽 - 固定尺寸 */
            .team-logo, .team-logo-placeholder {
                width: var(--col-team-logo);
                height: var(--col-team-logo);
                border-radius: 50%;
                display: block;
                flex-shrink: 0; /* 不压缩 */
            }

            .team-logo-placeholder {
                background: var(--gray-100);
                line-height: var(--col-team-logo);
                text-align: center;
                font-size: 11px;
                color: var(--gray-600);
            }

            /* 队名 - 对齐+文本规范 */
            .team-name {
                font-size: 15px;
                color: var(--gray-800);
                font-weight: 500;
                /* 固定宽度，保证两队名对齐 */
                width: 80px;
                display: inline-block;
                /* 文本规范 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
            }

            /* VS文本 - 固定位置 */
            .vs-text {
                font-size: 12px;
                color: var(--gray-600);
                font-weight: 600;
                width: 30px;
                text-align: center;
                display: inline-block;
                flex-shrink: 0;
            }

            /* 热门标签 - 固定样式（位置已调整到客队图标后） */
            .popular-tag {
                background: var(--danger);
                color: white;
                font-size: 10px;
                padding: 2px 6px;
                border-radius: 4px;
                margin-left: 8px; /* 与客队图标保持间距 */
                flex-shrink: 0;
            }

            /* 4. 状态列 - 固定宽度 */
            .live-status {
                font-size: 14px;
                font-weight: 600;
                text-decoration: none;
                width: var(--col-status);
                height: 32px;
                line-height: 32px;
                text-align: center;
                border-radius: var(--radius-10);
                display: block;
                /* 强制文本规范 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* 状态色值规范 */
            .live-status[style*="#0778b8"] {
                background: rgba(7, 120, 184, 0.1);
                color: #0778b8 !important;
            }
            .live-status[style*="red"] {
                background: rgba(255, 77, 79, 0.1);
                color: red !important;
            }
            .live-status[style*="#94a3b8"] {
                background: rgba(148, 163, 184, 0.1);
                color: #94a3b8 !important;
            }
        }

        /* ========== 移动端样式（核心修改） ========== */
        @media (max-width: 768px) {
            /* 父容器布局修改：时间居左，联赛居右 */
            .liveview .panel-body li > div {
                width: 100%;
                display: grid;
                /* 修改网格布局：时间列auto，联赛列占剩余空间 */
                grid-template-columns: auto 1fr;
                grid-template-rows: auto auto auto;
                align-items: center;
                gap: 4px 8px;
            }
            
            .liveview {
                margin-bottom: 16px;
                border-radius: 8px;
            }
            
            .liveview .panel-title {
                padding: 8px 12px;
            }
            
            .liveview .panel-title h2 {
                font-size: 15px;
            }
            
            .liveview .panel-body li {
                padding: 8px 12px;
                height: auto; /* 移动端取消固定高度 */
            }
            
            /* 移动端时间：靠最左侧 */
            .liveview time {
                font-size: 13px;
                color: var(--gray-700);
                font-weight: 500;
                text-align: left;     /* 修改：居左 */
                display: block;
                white-space: nowrap;
                grid-row: 1 / 2;
                /* 可选：添加和PC端一致的背景 */
                background: var(--gray-100);
                padding: 4px 8px;
                border-radius: var(--radius-6);
            }
            
            /* 移动端联赛：靠最右侧 */
            .liveview li > div > a:first-of-type {
                font-size: 11px;
                color: var(--gray-600);
                text-decoration: none;
                display: block;
                grid-column: 2 / 3;
                grid-row: 1 / 2;
                text-align: right;    /* 修改：居右 */
                /* 可选：添加和PC端一致的背景 */
                background: var(--gray-100);
                padding: 4px 8px;
                border-radius: var(--radius-6);
                height: 24px;
                line-height: 24px;
                box-sizing: border-box;
            }
            
            .match-info {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
                grid-column: 1 / 3;
                grid-row: 2 / 3;
                justify-content: center;
                padding: 4px 0;
            }
            
            .team-logo, .team-logo-placeholder {
                width: 28px;
                height: 28px;
            }
            
            .vs-text {
                font-size: 12px;
                color: var(--gray-500);
                padding: 0 8px;
                font-weight: 600;
            }
            
            /* 移动端直播状态：添加背景色（核心修改） */
            .live-status {
                grid-column: 1 / 3;
                grid-row: 3 / 4;
                text-align: center;
                width: 100%;
                padding: 6px 0;       /* 增加内边距 */
                font-size: 13px;
                margin-top: 4px;
                border-radius: var(--radius-6); /* 圆角 */
                /* 状态背景色（和PC端逻辑一致） */
            }
            /* 移动端状态背景色补充 */
            .live-status[style*="#0778b8"] {
                background: rgba(7, 120, 184, 0.15) !important;
                color: #0778b8 !important;
            }
            .live-status[style*="red"] {
                background: rgba(255, 77, 79, 0.15) !important;
                color: red !important;
            }
            .live-status[style*="#94a3b8"] {
                background: rgba(148, 163, 184, 0.15) !important;
                color: #94a3b8 !important;
            }
            
            .popular-tag {
                background: var(--danger);
                color: white;
                font-size: 10px;
                padding: 2px 6px;
                border-radius: 4px;
                margin-left: 8px;
            }
        }
  .liveview .panel-title {
                padding: 12px 16px;
                background: #fff;
                border-bottom: 1px solid #f5f5f5;
            }
            .liveview .panel-title h2 {
                font-size: 16px;
                color: #333;
            }
            .liveview .panel-title h2::after {
                width: 7px;
                height: 7px;
                margin-left: 8px;
            }