/* ========================================
   福彩预测 - 全局样式表
   所有样式集中管理，一次性加载
   ======================================== */

/* ========== 禁止移动端浏览器自动调整字体大小 ========== */
* {  /* 所有元素 */
    -webkit-text-size-adjust: 100%;  /* 禁止Chrome/Safari自动调整字体 */
    -moz-text-size-adjust: 100%;     /* 禁止Firefox自动调整字体 */
    -ms-text-size-adjust: 100%;      /* 禁止IE自动调整字体 */
    text-size-adjust: 100%;          /* 标准属性，禁止自动调整字体 */
}

/* ========== 全局变量 ========== */
:root {  /* 根元素，定义全局CSS变量 */
    /* ----- 颜色系统（改这里就能改整个网站的颜色）----- */
    --primary-color: #1976d2;      /* 主色调：期号、链接、历史记录按钮文字 */
    --secondary-color: #d32f2f;    /* 强调色：板块标题、重要文字、选中标签 */
    --bg-yellow: #ffeb3b;          /* 高亮黄：开奖结果背景、中奖高亮背景 */
    --border-color: #ddd;           /* 边框色：表格边框、分割线、选项卡下划线 */
    
    --body-bg: #f0f0f0;            /* 整体背景色（页面两边的颜色） */
    --section-bg: #ffffff;          /* 板块背景色（中间内容区域的背景） */
    
    --tab-bg: #ffffff;              /* 选项卡整体背景色 */
    --tab-btn-bg: #fafafa;          /* 选项卡按钮背景色 */
    --tab-btn-color: #666;          /* 选项卡按钮文字颜色 */
    
    --admin-link-bg: #f0f0f0;       /* 底部管理链接背景色 */
    --admin-link-color: #666;       /* 底部管理链接文字颜色 */
    
    --nav-bg: #ffffff;              /* 顶部导航栏背景色 */
    --nav-btn-bg: #f5f5f5;          /* 导航按钮背景色 */
    --nav-btn-border: #eee;         /* 导航按钮边框颜色 */
    
    --history-btn-bg: #e8f0fe;      /* 历史记录按钮背景色 */
    --history-btn-color: #1976d2;   /* 历史记录按钮文字颜色 */
    
    --kaijiang-bg: #e8f4fd;         /* 开奖信息背景色（台湾福民彩里的蓝色框） */
    --prediction-border: #eee;       /* 预测项之间的分隔线颜色 */
    
    /* ----- 字体大小（固定值，不闪烁）----- */
    --title-size: 26px;        /* 板块标题字体大小（如“单双中特”） */
    --cell-size: 16px;         /* 表格单元格字体大小 */
    --issue-size: 15px;        /* 期号字体大小（如“009期”） */
    --label-size: 14px;        /* 预测标签字体大小（一肖/二肖等标签） */
    --result-size: 14px;       /* 开奖结果字体大小（开奖号码旁边的“准/错”） */
    --tab-size: 16px;          /* 选项卡按钮字体大小（香港彩/站点2/站点3） */
    --nav-size: 14px;          /* 导航栏按钮字体大小（稳赚六肖/图片/家野等） */
    --admin-size: 13px;        /* 底部管理链接字体大小（样式管理/板块管理/预测管理） */
    
    /* ----- 对齐方式 ----- */
    --title-align: center;        /* 板块标题对齐方式：left/center/right */
    --cell-align: center;       /* 表格单元格内容对齐方式：left/center/right */
    
    /* ----- 间距系统 ----- */
    --container-padding: 5px;        /* 整个内容容器的内边距 */
    --section-padding: 8px 5px;      /* 每个板块的内边距（上下8px 左右5px） */
    --section-margin: 6px 0;         /* 板块之间的外边距（上下6px 左右0） */
    --section-radius: 6px;           /* 板块圆角大小 */
    
    --tab-padding: 8px;              /* 选项卡内容区内边距 */
    --nav-padding: 5px 3px;          /* 导航栏内边距（上下5px 左右3px） */
    --nav-gap: 3px;                  /* 导航按钮之间的间距 */
    --admin-gap: 10px;               /* 底部管理链接之间的间距 */
    
    /* ----- 其他 ----- */
    --banner-height: 60px;            /* 横幅图片高度（如果你以后加横幅） */
}

/* ========== 基础重置 ========== */
* {  /* 所有元素 */
    box-sizing: border-box;  /* 边框和内边距包含在宽度内，避免撑开 */
    margin: 0;                /* 去掉所有默认外边距 */
    padding: 0;               /* 去掉所有默认内边距 */
}

/* ========== 整体背景 ========== */
body {  /* 页面主体 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "微软雅黑", sans-serif;  /* 字体顺序 */
    background: var(--body-bg);      /* 页面两边的背景色，使用变量 */
    padding: 0;                        /* 去掉body默认内边距 */
    margin: 0;                         /* 去掉body默认外边距 */
    min-height: 100vh;                 /* 最小高度占满整个视口 */
    /* 强制覆盖所有body背景 */
    
    background: var(--body-bg, #f0f0f0) !important;

}

/* ========== 主容器 ========== */
.container {  /* 所有内容的容器 */
    width: 100%;                       /* 宽度100% */
    max-width: 800px !important;                  /* 电脑端固定宽度800px */
    margin: 0 auto !important;                     /* 上下0，左右自动（实现居中） */
    padding: var(--container-padding);  /* 内边距使用变量 */
    background: transparent;            /* 背景透明，显示body背景 */
}

/* ========== 选项卡（香港彩/站点2/站点3） ========== */
.tab-container {  /* 整个选项卡容器 */
    width: 100%;                       /* 宽度100% */
    margin: 5px 0;                      /* 上下5px，左右0 */
    background: var(--tab-bg);          /* 背景色使用变量 */
    border-radius: 8px;                 /* 圆角8px */
    overflow: hidden;                   /* 隐藏溢出内容 */
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);  /* 轻微阴影 */
}

.tab-buttons {  /* 选项卡按钮容器 */
    display: flex;                      /* 弹性布局，按钮水平排列 */
    border-bottom: 1px solid var(--border-color);  /* 底部边框 */
    background: var(--tab-btn-bg);      /* 背景色使用变量 */
}

.tab-btn {  /* 每个选项卡按钮 */
    flex: 1;                            /* 等分宽度 */
    padding: 12px 0;                     /* 上下12px，左右0 */
    text-align: center;                  /* 文字居中 */
    font-size: var(--tab-size);          /* 字体大小使用变量 */
    font-weight: 600;                    /* 字体粗细600（半粗） */
    color: var(--tab-btn-color);         /* 文字颜色使用变量 */
    cursor: pointer;                     /* 鼠标指针变手型 */
    border: none;                        /* 无边框 */
    background: none;                    /* 背景透明 */
    position: relative;                  /* 相对定位，用于伪元素 */
}

/* 当前选中的选项卡 */
.tab-btn.active {  /* 选中状态的按钮 */
    color: var(--secondary-color);       /* 文字颜色变强调色 */
}

/* 选中选项卡底部的红色线条 */
.tab-btn.active::after {  /* 伪元素，创建底部线条 */
    content: '';                         /* 必须有内容 */
    position: absolute;                  /* 绝对定位 */
    bottom: -1px;                        /* 底部-1px（覆盖在边框上） */
    left: 0;                             /* 左边对齐 */
    right: 0;                            /* 右边对齐 */
    height: 2px;                         /* 高度2px */
    background: var(--secondary-color);  /* 背景色使用强调色 */
}

.tab-content {  /* 选项卡内容区 */
    padding: var(--tab-padding);         /* 内边距使用变量 */
    min-height: 135px;                   /* 最小高度135px */
}

.tab-pane {  /* 每个选项卡的面板 */
    display: none;                       /* 默认隐藏 */
}

.tab-pane.active {  /* 当前激活的面板 */
    display: block;                       /* 显示为块级元素 */
}

iframe {  /* 嵌入的页面 */
    width: 100%;                          /* 宽度100% */
    height: 135px;                        /* 高度135px */
    border: none;                         /* 无边框 */
    overflow: hidden;                     /* 隐藏滚动条 */
}

/* ========== 板块样式 ========== */
.section {  /* 每个预测板块 */
    width: 100%;                          /* 宽度100% */
    margin: var(--section-margin);        /* 外边距使用变量 */
    background: var(--section-bg);        /* 板块背景色使用变量 */
    padding: var(--section-padding);      /* 内边距使用变量 */
    border-radius: var(--section-radius); /* 圆角使用变量 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);  /* 轻微阴影 */
    overflow: hidden;                     /* 隐藏溢出 */
    box-sizing: border-box;               /* 边框内边距包含在宽度内 */
}

/* 板块标题 */
h2 {  /* 所有h2标题 */
    font-size: var(--title-size);         /* 字体大小使用变量 */
    border-bottom: 1px solid var(--border-color);  /* 标题下面的横线 */
    padding-bottom: 6px;                  /* 底部内边距6px */
    margin: 0 0 8px 0;                    /* 上下0，左右0，底部8px */
    font-weight: 600;                     /* 字体粗细600 */
    text-align: var(--title-align);       /* 标题对齐方式使用变量 */
    color: var(--secondary-color);         /* 标题颜色使用强调色 */
}

/* ========== 表格样式 ========== */
table {  /* 所有表格 */
    width: 100%;                          /* 宽度100% */
    border-collapse: collapse;             /* 合并边框 */
    table-layout: fixed;                   /* 固定表格布局，防止内容撑开 */
    word-wrap: break-word;                 /* 长单词换行 */
}

td {  /* 表格单元格 */
    border: 1px solid var(--border-color); /* 单元格边框使用变量 */
    padding: 8px 4px;                      /* 上下8px，左右4px */
    font-size: var(--cell-size);           /* 字体大小使用变量 */
    line-height: 1.4;                      /* 行高1.4倍 */
    word-break: break-word;                 /* 长单词自动换行 */
    text-align: var(--cell-align);          /* 单元格对齐方式使用变量 */
}

/* ========== 通用颜色类 ========== */
.text-red {  /* 红色文字类 */
    color: var(--secondary-color);         /* 红色文字（用于单双预测里的单/双） */
    font-weight: 600;                      /* 字体粗细600 */
}

.bg-yellow {
    background: var(--bg-yellow);
    color: var(--secondary-color);
    padding: 3px 6px;
    border-radius: 14px;
    font-weight: 600;
    display: inline-block;
    margin: 1px 0;
    font-size: var(--result-size);
    vertical-align: middle;  /* 加上这一行 */
    line-height: 1;          /* 加上这一行，固定行高 */
}

.highlight {  /* 高亮类（中奖生肖） */
    background: var(--bg-yellow);          /* 黄色背景使用变量 */
    color: var(--secondary-color);         /* 文字颜色使用强调色 */
    font-weight: 600;                      /* 字体粗细600 */
    padding: 2px 5px;                      /* 上下2px，左右5px */
    border-radius: 12px;                   /* 圆角12px */
    display: inline-block;                  /* 行内块级元素 */
    margin: 1px;                            /* 四周1px外边距 */
    font-size: var(--result-size);         /* 字体大小使用变量 */
}

/* ========== 管理链接 ========== */
.admin-link {  /* 底部管理链接 */
    display: inline-block;                  /* 行内块级元素 */
    margin: 10px 5px;                       /* 上下10px，左右5px */
    color: var(--admin-link-color);         /* 文字颜色使用变量 */
    font-size: var(--admin-size);           /* 字体大小使用变量 */
    text-decoration: none;                  /* 去掉下划线 */
    text-align: center;                      /* 文字居中 */
    padding: 8px 15px;                       /* 上下8px，左右15px */
    background: var(--admin-link-bg);        /* 背景色使用变量 */
    border-radius: 20px;                     /* 圆角20px */
}

.admin-link:hover {  /* 鼠标悬停时的管理链接 */
    background: #e0e0e0;                     /* 背景变深灰色 */
}

.admin-links {  /* 管理链接容器 */
    display: flex;                            /* 弹性布局 */
    justify-content: center;                  /* 水平居中 */
    gap: var(--admin-gap);                    /* 间距使用变量 */
    flex-wrap: wrap;                          /* 允许换行 */
    margin: 20px 0;                            /* 上下20px，左右0 */
}

/* ========== 特定颜色类 ========== */
.jiaye-pred {  /* 家野预测文字 */
    color: #2e7d32;                           /* 绿色 */
    font-weight: 600;                          /* 字体粗细600 */
}

.sixiao-pred {  /* 四肖预测文字 */
    color: #c2185b;                           /* 粉色 */
    font-weight: 600;                          /* 字体粗细600 */
}

.issue-number {  /* 期号 */
    color: var(--primary-color);               /* 颜色使用主色调 */
    font-weight: 600;                          /* 字体粗细600 */
    font-size: var(--issue-size);              /* 字体大小使用变量 */
    margin-right: 3px;                          /* 右边距3px */
}

/* ========== 台湾福民彩特定样式 ========== */
.prediction-item {  /* 每条预测项 */
    margin: 4px 0;                              /* 上下4px，左右0 */
    display: flex;                              /* 弹性布局 */
    flex-wrap: wrap;                            /* 允许换行 */
    align-items: center;                        /* 垂直居中 */
    text-align: center;                           /* 文字左对齐 */
    border-bottom: 1px solid var(--prediction-border);  /* 底部横线 */
    padding-bottom: 4px;                         /* 底部内边距4px */
}

.prediction-item:last-child {  /* 最后一条预测项 */
    border-bottom: none;                         /* 去掉底部横线 */
}

.prediction-label {  /* 预测标签（一肖/二肖等） */
    color: var(--secondary-color);               /* 颜色使用强调色 */
    font-weight: 600;                            /* 字体粗细600 */
    width: 50px;                                  /* 固定宽度50px */
    flex-shrink: 0;                               /* 不允许缩小 */
    font-size: var(--label-size);                 /* 字体大小使用变量 */
}

.prediction-value {  /* 预测值 */
    color: #2c3e50;                               /* 深灰色 */
    flex: 1;                                       /* 占据剩余空间 */
    font-size: var(--label-size);                 /* 字体大小使用变量 */
}

.kaijiang-info {  /* 开奖信息框 */
    background: var(--kaijiang-bg);                /* 背景色使用变量 */
    padding: 4px 8px;                              /* 上下4px，左右8px */
    border-radius: 16px;                           /* 圆角16px */
    margin-top: 5px;                                /* 上边距5px */
    font-size: var(--result-size);                 /* 字体大小使用变量 */
    display: inline-block;                          /* 行内块级元素 */
    text-align: left;                               /* 文字左对齐 */
}

/* ========== 顶部导航栏 ========== */
.nav-container {  /* 导航栏容器 */
    background: var(--nav-bg);                     /* 背景色使用变量 */
    padding: var(--nav-padding);                   /* 内边距使用变量 */
    margin: 3px 0;                                  /* 上下3px，左右0 */
    border-radius: 6px;                             /* 圆角6px */
}

.nav-grid {  /* 导航按钮网格 */
    display: grid;                                  /* 网格布局 */
    grid-template-columns: repeat(5, 1fr);         /* 5列等宽 */
    gap: var(--nav-gap);                            /* 间距使用变量 */
}

.nav-btn {  /* 导航按钮 */
    display: block;                                 /* 块级元素 */
    padding: 8px 0;                                 /* 上下8px，左右0 */
    background: var(--nav-btn-bg);                  /* 背景色使用变量 */
    border-radius: 18px;                            /* 圆角18px */
    color: inherit;                                 /* 继承父级文字颜色 */
    text-decoration: none;                          /* 去掉下划线 */
    font-size: var(--nav-size);                     /* 字体大小使用变量 */
    font-weight: 500;                               /* 字体粗细500 */
    text-align: center;                             /* 文字居中 */
    border: 1px solid var(--nav-btn-border);        /* 边框使用变量 */
}

.history-btn {  /* 历史记录按钮 */
    display: block;                                 /* 块级元素 */
    padding: 6px 0;                                 /* 上下8px，左右0 */
    background: var(--history-btn-bg);              /* 背景色使用变量 */
    border-radius: 18px;                            /* 圆角18px */
    color: var(--history-btn-color);                /* 文字颜色使用变量 */
    text-decoration: none;                          /* 去掉下划线 */
    font-size: 12px;                     /* 字体大小使用变量 */
    font-weight: 500;                               /* 字体粗细500 */
    text-align: center;                             /* 文字居中 */
    border: 1px solid #bbdefb;                      /* 浅蓝色边框 */
}

/* ========== 手机端适配 ========== */
@media (max-width: 768px) {  /* 屏幕宽度小于768px时（手机/平板） */
    .container {  /* 主容器 */
        max-width: 100% !important;                   /* 手机端占满全屏 */
        padding: 0;                        /* 去掉内边距 */
    }
    
    .section {  /* 板块 */
        padding: 8px 5px;                  /* 手机端板块内边距稍小 */
        margin: 2px 0;                     /* 手机端板块间距变小 */
        border-radius: 0;                   /* 手机端去掉圆角 */
    }
    
    td {  /* 单元格 */
        padding: 6px 3px;                   /* 手机端单元格内边距稍小 */
    }
    
    h2 {  /* 标题 */
        font-size: calc(var(--title-size) - 2px);  /* 手机端标题小一点 */
    }
    
    .prediction-label {  /* 预测标签 */
        width: 45px;                         /* 手机端标签宽度稍小 */
    }
    
    .tab-btn {  /* 选项卡按钮 */
        padding: 10px 0;                     /* 手机端选项卡按钮内边距稍小 */
        font-size: 15px;                     /* 字体15px */
    }
    
    .admin-link {  /* 管理链接 */
        padding: 6px 12px;                   /* 手机端管理链接内边距稍小 */
        font-size: 12px;                     /* 字体12px */
    }
}

/* 小手机优化 */
@media (max-width: 480px) {  /* 屏幕宽度小于480px（小屏手机） */
    .nav-grid {  /* 导航网格 */
        gap: 2px;                            /* 更小的间距 */
    }
    
    .nav-btn {  /* 导航按钮 */
        padding: 6px 0;                      /* 更小的内边距 */
        font-size: 12px;                     /* 更小的字体 */
    }
}
.tab-container,
.tab-content,
.tab-pane,
iframe {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* 号码球样式（用于挑码） */
.number-ball {
    display: inline-block;
    padding: 2px 6px;
    background: #f0f0f0;
    border-radius: 12px;
    font-size: 12px;
    color: #333;
    margin: 0 2px;
}

/* 开奖结果高亮 */
.kaijiang-result {
    padding: 2px 8px;
    border-radius: 16px;
    margin-left: 5px;
}

.kaijiang-result.bg-yellow {
    background: var(--bg-yellow);
    color: var(--secondary-color);
    font-weight: 600;
}