/* ======================================= */
/* 1. 基础重置与全局排版                     */
/* ======================================= */
* { padding: 0; margin: 0; box-sizing: border-box; }
html, body {
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
    color: #333;
    font-size: 14px;
    background: #333; /* PC端两侧背景 */
    min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
table { table-layout: fixed; width: 100%; border-collapse: collapse; }

.app-container {
    max-width: 720px;
    margin: 0 auto;
    background-color: #F4F4F4; /* 统一浅灰色底板 */
    min-height: 100vh;
    position: relative;
    padding-bottom: 20px;
}

/* ======================================= */
/* 2. 核心积木容器 (Box 蓝灰大卡片)           */
/* ======================================= */
.box {
    /* 👉 上下边距改成 5px，左右保持 10px */
    margin: 5px 10px !important;

    background: #7b8cdc !important;
    border-radius: 12px !important;
    padding: 8px !important;
    border: 1px solid #ebeef5 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
    position: relative;
}

/* 标题默认黑色、去底色 */
.box .list-title {
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center !important;
    background-color: transparent !important;
    color: #333 !important;
    padding: 10px 12px 15px 12px !important;
    border-bottom: none !important;
    margin: 0 !important;
}

/* ======================================= */
/* 3. 内部列表：纯白底色与内嵌卡片化           */
/* ======================================= */

/* 玩法表格白底化 */
.box table {
    background-color: #ffffff !important; /* 强制白底 */
    border-radius: 8px !important; /* 内部小圆角 */
    overflow: hidden;
}
.box table td {
    background-color: #ffffff !important;
}

/* 标准文章列表白底化 */
.box .article-list-standard {
    background-color: #ffffff !important; /* 强制白底 */
    border-radius: 8px !important; /* 内部小圆角 */
    overflow: hidden;
    padding: 0 10px !important;
}
.box .article-list-standard a {
    display: block !important;
    text-align: center !important;
    padding: 12px 5px !important;
    color: #c0392b !important;
    border-bottom: 1px dashed #ccc !important;
    background-color: #ffffff !important;
}
.box .article-list-standard a:last-child {
    border-bottom: none !important;
}
.box .article-list-standard a:active {
    background-color: #f9f9f9 !important;
}

/* 友情链接 (四宫格) 白底化 */
.article-list-yqlj {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
}
.article-list-yqlj a {
    display: block !important; text-align: center !important; padding: 8px 2px !important;
    background: #ffffff !important; /* 强制白底 */
    border: 1px solid #e0e0e0 !important; border-radius: 4px !important;
    font-size: 13px !important; color: #2980b9 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* ======================================= */
/* 4. 颜色辅助类与全局加粗                   */
/* ======================================= */
.box table td, .box .article-list-standard a, .box .bold { font-weight: bold !important; }
.c-red { color: red; }
.c-blue { color: blue; }
.c-green { color: green; }
.bg-yellow { background-color: yellow; color: red; padding: 0 2px; }
.pad { padding: 10px; }
.text-center { text-align: center; }

/* ======================================= */
/* 5. 头部、导航、直播条与页尾               */
/* ======================================= */
.fixed-header { position: sticky; top: 0; z-index: 999; background: #fff; width: 100%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.main-header { height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; border-bottom: 1px solid #eee; }
.main-header .logo { font-size: 18px; font-weight: bold; color: #c0392b; }
.main-header .right-img { height: 30px; }
.main-header .back-btn { background: #e74c3c; color: #fff; padding: 5px 12px; border-radius: 4px; font-size: 13px; font-weight: bold; }

.tab-switcher { display: flex; background: #fff; }
.tab-btn { flex: 1; text-align: center; padding: 12px; font-weight: bold; color: #666; }
.tab-btn.active { color: #e74c3c; border-bottom: 3px solid #e74c3c; }

.nav-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; background-color: #ffffff; border-radius: 8px;}
.nav-btns a { display: block; background: #c0392b; color: #fff; text-align: center; padding: 10px 0; border-radius: 4px; font-weight: bold; font-size: 14px !important; }

.notice-text-line { padding: 12px 10px; text-align: center; font-size: 15px !important; color: #c0392b; font-weight: bold; background: #fff; border-radius: 8px; }
.calendar-line { color: #2980b9; font-size: 14px !important; background: #fff; border-radius: 8px; }

#kjLive iframe { width: 100%; background: #000; display: block; border-radius: 8px; }

/* ======================================= */
/* 6. 开奖记录核心样式                       */
/* ======================================= */
.kj-header { display: flex; align-items: stretch; background: #fff; padding: 6px 4px; border-bottom: 1px solid #ddd; text-align: center; }
.kj-info { display: flex; flex-direction: column; justify-content: center; padding: 0 4px; font-weight: bold; font-size: 13px; border: 1px solid #eee; margin-right: 4px; }
.kj-link { color: #0000ff; background: #f4f4ff; margin-top: 4px; padding: 2px; font-size: 12px; font-weight: normal; }
.kj-balls { display: flex; flex: 6; }
.special-ball { flex: 1; }
.ball-col { display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #ccc; margin: 0 1px; flex: 1; }
.kj-num { color: #fff; font-weight: bold; padding: 4px 0; font-size: 15px; }
.kj-zodiac { padding: 4px 0; font-size: 13px; background: #fff; color: #333; border-top: 1px solid #ccc; }
.kj-refresh { width: 40px; display: flex; align-items: center; justify-content: center; background: #ffcc00; color: red; font-weight: bold; font-size: 12px; cursor: pointer; border: 1px solid #ccc; margin: 0 2px; }
.bg-red { background-color: #ff0000; } .bg-blue { background-color: #0000ff; } .bg-green { background-color: #008000; }

/* ======================================= */
/* 7. 广告样式 (绿底文字)                    */
/* ======================================= */
.ad-text-list-green { background-color: #00FF00 !important; display: block !important; padding: 0 !important; border-radius: 8px; overflow: hidden; }
.ad-text-item-green {
    display: block !important; padding: 5px 5px !important; text-align: center !important;
    font-weight: 900 !important; border-bottom: 1px solid #9b59b6 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.ad-text-item-green:active { background-color: #32cd32 !important; }
.ad-text-item-green:last-child { border-bottom: none !important; }

/* ======================================= */
/* 8. 对照表专属豁免样式 (.sx)               */
/* ======================================= */
.sx { background: transparent; overflow: hidden; margin: 0 !important; border: none !important; }
.sx table { width: 100%; border-radius: 8px; overflow: hidden; background: #fff; margin-bottom: 8px; }
.box .sx table th { background: #f4f4f4 !important; padding: 6px 0 !important; border: 1px solid #ddd !important; font-weight: bold !important; color: #333 !important; font-size: 14px !important;}

/* 👉 核心修复：用 .box .sx 更高的优先级，强行把对照表里的字号变小、取消加粗、允许换行 */
.box .sx table td {
    padding: 6px 4px !important;
    border: 1px solid #eee !important;
    vertical-align: middle !important;
    font-size: 13px !important;          /* 恢复小字体 */
    line-height: 1.8 !important;
    font-weight: normal !important;      /* 坚决取消加粗 */
    white-space: normal !important;      /* 允许自然换行，防止撑爆屏幕 */
    word-break: break-all !important;
}

.sx .a-left { text-align: left; }
.sx1 { display: flex; flex-wrap: wrap; padding: 5px 0; margin: 0; }
.sx1 li { width: 33.33%; padding: 8px 0; text-align: center; }
.sx1 dt { font-size: 13px !important; font-weight: normal !important; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; }
.sx1 dt img { width: 26px; height: 26px; margin: 0 4px; }
.sx1 dd { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; padding: 0 2px;}

/* 修复波色球体内的数字也被误伤加粗的问题 */
.box .sx table td span, .sx1 dd span {
    display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center;
    background-color: #ff0000; color: #fff !important; font-size: 12px !important; border-radius: 2px; margin: 2px;
    font-weight: normal !important; /* 取消球里数字的加粗 */
}
.box .sx table td span.blue, .sx1 dd span.blue { background-color: #3366ff !important; }
.box .sx table td span.green, .sx1 dd span.green { background-color: #009933 !important; }
.box .sx table td:first-child font { font-weight: bold !important; }
/* ======================================= */
/* 9. 终极响应式字体 (手机/PC 自动适配)        */
/* ======================================= */

/* 电脑端 (PC) 默认超大字体 24px */
.box table td,
.box .article-list-standard a,
.box .bold,
.ad-text-item-green,
.box .c-red, .box .c-blue, .box .c-green, .box .bg-yellow {
    font-size: 24px !important;
    line-height: 1.5 !important;
}

/* 终极响应式：手机端自动变小，坚决防止换行挤爆屏幕 */
@media screen and (max-width: 768px) {
    .box table td,
    .box .article-list-standard a,
    .box .bold,
    .ad-text-item-green,
    .box .c-red, .box .c-blue, .box .c-green, .box .bg-yellow {
        font-size: 15px !important; /* 👉 放弃 pt，使用 15px 黄金小字 */
        padding: 6px 2px !important; /* 缩小内边距 */
        word-break: keep-all !important; /* 👉 核心：强行禁止中文字拆行 */
        white-space: nowrap !important; /* 👉 核心：强行单行显示 */
    }
    .box .list-title {
        font-size: 16px !important;
    }
}