/* ====================================================
   台湾小龙女论坛 - 白底红黑蓝版
   字体放大、居中、红黑蓝配色
   每行都有详细注释说明功能
   ==================================================== */

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

/* 页面主体样式 */
body {
    font-family: Arial, "微软雅黑", sans-serif; /* 字体顺序：Arial优先，微软雅黑其次 */
    background: #f0f0f0;           /* 灰色背景，突出白底容器 */
    line-height: 1.5;               /* 行高1.5倍，阅读舒适 */
}

/* 链接样式 - 去掉下划线，颜色继承父级 */
a {
    text-decoration: none;        /* 去掉下划线 */
    color: inherit;               /* 继承父级文字颜色 */
}

/* 图片样式 - 防止溢出，保持比例 */
img {
    max-width: 100%;              /* 图片最大宽度100%，防止溢出 */
    height: auto;                 /* 高度自动，保持比例 */
    display: block;               /* 块级显示，去除图片底部间隙 */
}

/* ========== 主容器 ========== */
.main {
    width: 100%;                  /* 宽度100% */
    max-width: 800px;             /* 最大宽度800px，适合手机 */
    margin: 0 auto;               /* 上下0，左右自动，实现居中 */
    background: #ffffff;           /* 白底 */
    padding: 0px;                /* 内边距15px，内容不贴边 改这个可以全屏*/
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 轻微阴影，增加立体感 */
}

/* ========== 顶部信息 ========== */
.top-info {
    background: #f8f8f8;           /* 浅灰背景 */
    padding: 12px;                 /* 内边距12px */
    text-align: center;            /* 文字居中 */
    font-size: 18px;               /* 字体大小18px */
    color: #333333;                /* 黑色文字 */
    border-bottom: 3px solid #1976d2; /* 底部3px蓝色边框 */
    margin-bottom: 0px;           /* 底部外边距20px */
    line-height: 1.6;              /* 行高1.6倍 */
}

/* ========== 开奖直播 ========== */
.live-iframe {
    width: 100%;                  /* 宽度100% */
    height: 200px;                /* 高度200px */
    border: 0px solid #1976d2;    /* 2px蓝色边框 */
    margin-bottom: 0px;          /* 底部外边距20px */
}

/* ========== 板块通用样式 ========== */
.section {
    border: 0px solid #1976d2;    /* 2px蓝色边框 */
    margin-bottom: 0px;          /* 底部外边距25px，板块间距 */
    background: #ffffff;           /* 白底 */
    border-radius: 0;              /* 无圆角，直角边框 */
    overflow: hidden;              /* 隐藏溢出内容 */
}

/* 板块标题 */
.section-title {
    background: #1976d2;           /* 蓝色背景 */
    color: #ffffff;                /* 白色文字 */
    font-size: 24px;               /* 字体大小24px，标题放大 */
    font-weight: bold;             /* 粗体 */
    padding: 12px;                 /* 内边距12px */
    text-align: center;            /* 文字居中 */
    letter-spacing: 0.5px;         /* 字间距0.5px */
}

/* 板块内容区 */
.section-content {
    background: #f0f7e8;           /* 白底 */
    padding: 15px;                 /* 内边距15px */
    text-align: center;            /* 内容居中 */
}

/* ========== 台湾福民彩样式 ========== */
.twfm-item {
    margin-bottom: 25px;           /* 底部外边距25px */
    padding-bottom: 15px;          /* 底部内边距15px */
    border-bottom: 1px solid #dddddd; /* 1px灰色分隔线 */
}

.twfm-item:last-child {
    border-bottom: none;           /* 最后一项无分隔线 */
    margin-bottom: 0;              /* 最后一项无外边距 */
    padding-bottom: 0;             /* 最后一项无内边距 */
}

/* 台湾福民彩头部 */
.twfm-header {
    font-size: 22px;               /* 字体大小22px */
    font-weight: bold;             /* 粗体 */
    color: #1976d2;                /* 蓝色 */
    margin-bottom: 12px;           /* 底部外边距12px */
    display: flex;                 /* 弹性布局 */
    justify-content: center;       /* 水平居中 */
    align-items: center;           /* 垂直居中 */
    gap: 15px;                     /* 子元素间距15px */
    flex-wrap: wrap;               /* 允许换行 */
}

/* 台湾福民彩每一行 */
.twfm-row {
    display: flex;                 /* 弹性布局 */
    justify-content: center;       /* 水平居中 */
    align-items: center;           /* 垂直居中 */
    margin: 8px 0;                 /* 上下外边距8px */
    font-size: 18px;               /* 字体大小18px */
    gap: 10px;                     /* 子元素间距10px */
    flex-wrap: wrap;               /* 允许换行 */
}

/* 台湾福民彩标签（一肖、二肖等） */
.twfm-label {
    color: #333333;                /* 黑色 */
    font-weight: bold;             /* 粗体 */
}

/* 台湾福民彩预测值（生肖、号码） */
.twfm-value {
    color: #d32f2f;                /* 红色 */
    font-weight: 600;              /* 半粗 */
}

/* ========== 开奖徽章 ========== */
.kaijiang {
    background: #ffeb3b;           /* 黄色高亮背景 */
    padding: 5px 12px;             /* 上下5px，左右12px */
    font-size: 18px;               /* 字体大小18px */
    font-weight: bold;             /* 粗体 */
    color: #d32f2f;                /* 红色文字 */
    display: inline-block;         /* 行内块级显示 */
    border-radius: 3px;            /* 3px圆角 */
}

/* ========== 表格样式 ========== */
table {
    width: 100%;                   /* 宽度100% */
    border-collapse: collapse;     /* 合并边框，去掉双线 */
    background: #ffffff;           /* 白底 */
}

/* 表格单元格 */
td {
    padding: 12px 8px;             /* 上下12px，左右8px */
    border-bottom: 1px solid #f0f7e8; /* 1px灰色分隔线 */
    font-size: 18px;               /* 字体大小18px */
    color: #333333;                /* 黑色文字 */
    text-align: center;            /* 文字居中 */
}

/* 最后一行无分隔线 */
tr:last-child td {
    border-bottom: none;
}

/* ========== 号码样式 ========== */
.number {
    display: inline-block;         /* 行内块级显示 */
    margin: 0 3px;                 /* 左右外边距3px */
    font-size: 18px;               /* 字体大小18px */
    color: #333333;                /* 黑色 */
}

/* 中奖号码高亮 */
.number.hit {
    background: #ffeb3b;           /* 黄色高亮背景 */
    padding: 2px 6px;              /* 上下2px，左右6px */
    border-radius: 3px;            /* 3px圆角 */
    font-weight: 600;              /* 半粗 */
}

/* ========== 属性介绍框 ========== */
.attr-box {
    background: #f8f8f8;           /* 浅灰背景 */
    padding: 15px;                 /* 内边距15px */
    margin-bottom: 15px;           /* 底部外边距15px */
    font-size: 18px;               /* 字体大小18px */
    line-height: 1.8;              /* 行高1.8倍，适合多行文字 */
    color: #333333;                /* 黑色 */
    border: 1px solid #1976d2;     /* 1px蓝色边框 */
    text-align: center;            /* 文字居中 */
}

/* ========== 六肖十二码网格 ========== */
.sixiao-grid {
    display: grid;                 /* 网格布局 */
    grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
    gap: 8px;                      /* 网格间距8px */
    margin: 15px 0;                /* 上下外边距15px */
}

/* 网格项 */
.sixiao-item {
    background: #f8f8f8;           /* 浅灰背景 */
    padding: 10px;                 /* 内边距10px */
    font-size: 16px;               /* 字体大小16px */
    border: 1px solid #1976d2;     /* 1px蓝色边框 */
    text-align: center;            /* 文字居中 */
    color: #333333;                /* 黑色 */
}

/* ========== 3头15码网格 ========== */
.tou-grid {
    display: grid;                 /* 网格布局 */
    grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
    gap: 8px;                      /* 网格间距8px */
    margin: 15px 0;                /* 上下外边距15px */
}

/* 网格项 */
.tou-item {
    background: #f8f8f8;           /* 浅灰背景 */
    padding: 10px;                 /* 内边距10px */
    font-size: 16px;               /* 字体大小16px */
    border: 1px solid #1976d2;     /* 1px蓝色边框 */
    text-align: center;            /* 文字居中 */
    color: #333333;                /* 黑色 */
}

/* ========== 一句真言样式 ========== */
.zhenyan-item {
    margin-bottom: 20px;           /* 底部外边距20px */
    padding-bottom: 15px;          /* 底部内边距15px */
    border-bottom: 1px solid #dddddd; /* 1px灰色分隔线 */
}

.zhenyan-item:last-child {
    border-bottom: none;           /* 最后一项无分隔线 */
}

/* 真言诗句 */
.zhenyan-line {
    font-size: 18px;               /* 字体大小18px */
    margin: 5px 0;                 /* 上下外边距5px */
    color: #1976d2;                /* 蓝色 */
}

/* 真言解释 */
.zhenyan-jie {
    font-size: 16px;               /* 字体大小16px */
    color: #333333;                /* 黑色 */
    margin: 5px 0;                 /* 上下外边距5px */
}

/* 真言解肖 */
.zhenyan-xiao {
    font-size: 16px;               /* 字体大小16px */
    color: #d32f2f;                /* 红色 */
    font-weight: 600;              /* 半粗 */
    margin: 5px 0;                 /* 上下外边距5px */
}

/* ========== 28码必中样式 ========== */
.code-block {
    margin-bottom: 20px;           /* 底部外边距20px */
    padding-bottom: 15px;          /* 底部内边距15px */
    border-bottom: 1px solid #dddddd; /* 1px灰色分隔线 */
}

.code-block:last-child {
    border-bottom: none;           /* 最后一项无分隔线 */
}

/* 码行 */
.code-line {
    font-size: 18px;               /* 字体大小18px */
    margin: 8px 0;                 /* 上下外边距8px */
}

/* 单码 - 红色 */
.code-single {
    color: #d32f2f;                /* 红色 */
    font-weight: 600;              /* 半粗 */
}

/* 双码 - 蓝色 */
.code-double {
    color: #1976d2;                /* 蓝色 */
    font-weight: 600;              /* 半粗 */
}

/* ========== 期号样式 ========== */
.issue-number {
    color: #1976d2;                /* 蓝色 */
    font-weight: bold;             /* 粗体 */
    font-size: 20px;               /* 字体大小20px */
    margin-right: 5px;             /* 右边距5px */
}

/* ========== 预测内容颜色类 ========== */

/* 预测内容红色 */
.prediction-red {
    color: #d32f2f;                /* 红色 */
    font-weight: 600;              /* 半粗 */
    font-size: 18px;               /* 字体大小18px */
}

/* 预测内容蓝色 */
.prediction-blue {
    color: #1976d2;                /* 蓝色 */
    font-weight: 600;              /* 半粗 */
    font-size: 18px;               /* 字体大小18px */
}

/* 预测内容黑色 */
.prediction-black {
    color: #333333;                /* 黑色 */
    font-weight: normal;           /* 正常粗细 */
    font-size: 18px;               /* 字体大小18px */
}

/* ========== 字体大小类 ========== */
.font-small {
    font-size: 14px;               /* 小号字体14px */
}

.font-medium {
    font-size: 16px;               /* 中号字体16px */
}

.font-large {
    font-size: 18px;               /* 大号字体18px */
}

.font-xlarge {
    font-size: 20px;               /* 超大字体20px */
}

.font-xxlarge {
    font-size: 22px;               /* 特大字体22px */
}

/* ========== 字体粗细类 ========== */
.weight-light {
    font-weight: 300;              /* 细体 */
}

.weight-normal {
    font-weight: 400;              /* 正常 */
}

.weight-bold {
    font-weight: 600;              /* 半粗 */
}

.weight-bolder {
    font-weight: 700;              /* 粗体 */
}

/* ========== 背景类 ========== */
.bg-highlight {
    background: #ffeb3b;           /* 黄色高亮背景 */
    padding: 2px 5px;              /* 上下2px，左右5px */
    border-radius: 3px;            /* 3px圆角 */
}

.bg-lightgray {
    background: #f5f5f5;           /* 浅灰背景 */
    padding: 2px 5px;              /* 上下2px，左右5px */
    border-radius: 3px;            /* 3px圆角 */
}

.bg-none {
    background: transparent;        /* 透明背景 */
}

/* ========== 边框类 ========== */
.border-blue {
    border: 1px solid #1976d2;     /* 1px蓝色边框 */
    padding: 3px 8px;              /* 上下3px，左右8px */
    border-radius: 3px;            /* 3px圆角 */
}

.border-red {
    border: 1px solid #d32f2f;     /* 1px红色边框 */
    padding: 3px 8px;              /* 上下3px，左右8px */
    border-radius: 3px;            /* 3px圆角 */
}

/* ========== 圆角类 ========== */
.radius-small {
    border-radius: 3px;            /* 小圆角3px */
}

.radius-medium {
    border-radius: 5px;            /* 中圆角5px */
}

.radius-large {
    border-radius: 8px;            /* 大圆角8px */
}

/* ========== 内边距类 ========== */
.padding-small {
    padding: 2px 5px;              /* 小内边距 */
}

.padding-medium {
    padding: 5px 10px;             /* 中内边距 */
}

.padding-large {
    padding: 8px 15px;             /* 大内边距 */
}

/* ========== 外边距类 ========== */
.margin-small {
    margin: 2px 5px;               /* 小外边距 */
}

.margin-medium {
    margin: 5px 10px;              /* 中外边距 */
}

.margin-large {
    margin: 8px 15px;              /* 大外边距 */
}

/* ========== 文字对齐类 ========== */
.text-left {
    text-align: left;              /* 左对齐 */
}

.text-center {
    text-align: center;            /* 居中对齐 */
}

.text-right {
    text-align: right;             /* 右对齐 */
}

/* ========== 文字转换类 ========== */
.text-uppercase {
    text-transform: uppercase;     /* 全部大写 */
}

.text-lowercase {
    text-transform: lowercase;     /* 全部小写 */
}

.text-capitalize {
    text-transform: capitalize;    /* 首字母大写 */
}

/* ========== 显示方式类 ========== */
.display-block {
    display: block;                /* 块级显示 */
}

.display-inline {
    display: inline;               /* 行内显示 */
}

.display-inline-block {
    display: inline-block;         /* 行内块级显示 */
}

/* ========== 清除浮动 ========== */
.clearfix:after {
    content: "";                   /* 伪元素内容为空 */
    display: table;                /* 表格显示 */
    clear: both;                   /* 清除浮动 */
}

/* ========== 分隔线 ========== */
.divider {
    height: 1px;                   /* 高度1px */
    background: #dddddd;           /* 灰色背景 */
    margin: 15px 0;                /* 上下外边距15px */
}

/* ========== 红色文字（兼容旧版）========== */
.text-red {
    color: #d32f2f;                /* 红色 */
}

/* ========== 蓝色文字（兼容旧版）========== */
.text-blue {
    color: #1976d2;                /* 蓝色 */
}

/* ========== 黑色文字（兼容旧版）========== */
.text-black {
    color: #333333;                /* 黑色 */
}

/* ========== 底部说明 ========== */
.footer {
    background: #1976d2;           /* 蓝色背景 */
    color: #ffffff;                /* 白色文字 */
    text-align: center;
    padding: 20px;
    font-size: 16px;
    line-height: 1.8;
    margin-top: 20px;
}

/* ========== 响应式 - 平板 ========== */
@media (max-width: 768px) {
    .section-title {
        font-size: 22px;           /* 平板下标题字体22px */
        padding: 10px;
    }
    
    .twfm-header {
        font-size: 20px;           /* 台湾福民彩头部20px */
    }
    
    .twfm-row {
        font-size: 16px;           /* 台湾福民彩行16px */
    }
    
    td {
        font-size: 16px;           /* 表格字体16px */
        padding: 10px 6px;
    }
    
    .issue-number {
        font-size: 18px;           /* 期号18px */
    }
    
    .kaijiang {
        font-size: 16px;           /* 开奖徽章16px */
        padding: 4px 10px;
    }
    
    .sixiao-grid {
        grid-template-columns: repeat(2, 1fr); /* 平板下6肖变2列 */
    }
    
    .tou-grid {
        grid-template-columns: repeat(2, 1fr); /* 平板下3头变2列 */
    }
}

/* ========== 响应式 - 手机 ========== */
@media (max-width: 480px) {
    .top-info {
        font-size: 15px;           /* 手机下顶部信息15px */
        padding: 8px;
    }
    
    .section-title {
        font-size: 20px;           /* 手机下标题20px */
        padding: 8px;
    }
    
    .twfm-header {
        font-size: 18px;           /* 手机下台湾福民彩头部18px */
        flex-direction: column;    /* 垂直排列 */
        gap: 8px;
    }
    
    .twfm-row {
        font-size: 15px;           /* 手机下台湾福民彩行15px */
        flex-wrap: wrap;
    }
    
    .twfm-label {
        width: auto;               /* 标签宽度自动 */
    }
    
    td {
        font-size: 15px;           /* 手机下表格字体15px */
        padding: 8px 4px;
    }
    
    .issue-number {
        font-size: 16px;           /* 手机下期号16px */
    }
    
    .kaijiang {
        font-size: 14px;           /* 手机下开奖徽章14px */
        padding: 3px 8px;
        margin-left: 0;
        margin-top: 3px;
    }
    
    .attr-box {
        font-size: 15px;           /* 手机下属性介绍15px */
        padding: 10px;
    }
    
    .sixiao-grid {
        grid-template-columns: repeat(2, 1fr); /* 手机下6肖2列 */
        gap: 5px;
    }
    
    .sixiao-item {
        font-size: 14px;           /* 手机下6肖项14px */
        padding: 8px 5px;
    }
    
    .tou-grid {
        grid-template-columns: repeat(2, 1fr); /* 手机下3头2列 */
        gap: 5px;
    }
    
    .tou-item {
        font-size: 14px;           /* 手机下3头项14px */
        padding: 8px 5px;
    }
    
    .code-line {
        font-size: 15px;           /* 手机下码行15px */
    }
    
    .footer {
        font-size: 14px;           /* 手机下底部14px */
        padding: 15px;
    }
}

/* ========== 特码高亮 ========== */
.tema-highlight {
    color: #d32f2f;                /* 红色 */
    font-weight: bold;
    background: #ffeb3b;           /* 黄色背景 */
    padding: 2px 5px;
    border-radius: 3px;
}

/* ========== 生肖高亮 ========== */
.shengxiao-highlight {
    color: #1976d2;                /* 蓝色 */
    font-weight: bold;
}
/* 绿色文字 */
.prediction-green {
    color: #2e7d32;                /* 深绿色 */
    font-weight: 600;
    font-size: 18px;
}

/* 准字徽章 */
.zhun-badge {
    background: #4caf50;           /* 绿色背景 */
    color: #ffffff;                /* 白色文字 */
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
    display: inline-block;
}

/* 错字徽章 */
.cuo-badge {
    background: #f44336;           /* 红色背景 */
    color: #ffffff;                /* 白色文字 */
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
    display: inline-block;
}

/* ===== 财神爷诗句 ===== */
.caishenye-poem {
    font-size: 14px;
    color: #b85e00;
    background: #fff1e0;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 5px;
    line-height: 1.4;
}
.caishenye-poem::before {
    content: "💰";
    margin-right: 4px;
    font-size: 12px;
}

/* ===== 一句真言 ===== */
.zhenyan-text {
    font-size: 14px;
    color: #1f618d;
    background: #e8f0fe;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 5px;
    line-height: 1.4;
    border-left: 3px solid #3498db;
}
.zhenyan-text::before {
    content: "🔮";
    margin-right: 4px;
    font-size: 12px;
}

/* ===== 六肖十二码 ===== */
.sixschool-item {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}
.sixschool-zodiac {
    display: inline-flex;
    align-items: center;
    background: #4CAF50;
    color: white;
    padding: 2px 8px 2px 5px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 1px 0 #2e7d32;
}
.sixschool-zodiac.sixschool-hit {
    background: #ff0000;
    box-shadow: 0 1px 0 #b71c1c;
}
.sixschool-numbers {
    display: inline-flex;
    margin-left: 3px;
}
.sixschool-numbers span {
    background: rgba(255,255,255,0.3);
    padding: 1px 4px;
    margin: 0 1px;
    border-radius: 3px;
    font-size: 12px;
}
.sixschool-numbers span.number-hit {
    background: #ffff00;
    color: #ff0000;
    font-weight: bold;
}