:root {
    --primary-color: #1F9EFF;
    --primary-dark: #1F9EFF;
    --primary-light: #A5D6A7;
    --accent-color: #FFEB3B;
    --text-on-primary: #FFFFFF;
    --background-color: #F9FFF9;
    --border-radius: 8px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    color: #333;
    line-height: 1.6;
    padding: 0;
    margin: 0 auto;
    min-height: 100vh;
    font-size: 0.9rem;
    max-width: 100%;
    width: 100%;
}

.main-container {
    background-color: white;
    /* border-radius: var(--border-radius); */
    box-shadow: var(--box-shadow);
    overflow: hidden;
    margin: 0;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
}

.header {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-dark));
    color: var(--text-on-primary);
    text-align: center;
    padding: 12px;
    font-weight: bold;
    font-size: 1.1rem;
}

.header h1 {
    font-size: 1.1rem;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.section {
    margin-bottom: 5px;
    width: 100%;
}

.section-header {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    padding: 8px 0;
    font-weight: bold;
    text-align: center;
    font-size: 1rem;
    width: 100%;
}

.section-content {
    padding: 0 12px;
    width: 100%;
}

.item-row {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.item-row:last-child {
    border-bottom: none;
    padding: 0;
}


.left-element {
    width: 26%;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    color: var(--primary-dark);
}

.right-content {
    width: 32%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.hot-text {
    width: 26%;
    display: inline-block;
    text-align: right;
    vertical-align: middle;
}

.hit-number {
    color: red !important;
    font-weight: bold !important;
}

.hit-zodiac {
    color: red !important;
    font-weight: bold !important;
}

.footer {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-dark));
    color: var(--text-on-primary);
    text-align: center;
    padding: 12px;
    font-weight: bold;
    font-size: 1.1rem;
}

.history-section {
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.history-title {
    text-align: center;
    color: var(--primary-dark);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

/* 琴棋书画样式 */
.zodiac-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: center;
    margin: 10px 0;
}

.zodiac-item {
    padding: 15px 10px;
    font-weight: bold;
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zodiac-item:hover {
    background: inherit;
}

.zodiac-item:nth-child(1) {
    background: linear-gradient(to bottom right, #f9f9f9, #ffe8e8);
}

.zodiac-item:nth-child(2) {
    background: linear-gradient(to bottom right, #f9f9f9, #e8f0ff);
}

.zodiac-item:nth-child(3) {
    background: linear-gradient(to bottom right, #f9f9f9, #fff0e0);
}

.zodiac-item:nth-child(4) {
    background: linear-gradient(to bottom right, #f9f9f9, #f0ffe0);
}

.zodiac-title {
    color: var(--primary-dark);
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    position: relative;
    font-size: 1.05em;
}

.zodiac-title:after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
    margin: 4px auto;
    opacity: 0.6;
}

.zodiac-animals {
    color: #333;
    font-size: 1.05em;
    letter-spacing: 1px;
    display: block;
    position: relative;
}

.zodiac-item:hover .zodiac-animals {
    color: inherit;
}

/* 琴棋书画历史记录样式 */
.qqsh-history-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.5;
}

.qqsh-history-item:last-child {
    border-bottom: none;
}

.qqsh-period {
    flex: 0 0 15%;
    font-weight: bold;
    text-align: left;
    font-size: 0.9rem;
}

.qqsh-content {
    flex: 0 0 55%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 0.9rem;
}

.qqsh-result {
    flex: 0 0 30%;
    text-align: right;
    font-weight: normal;
    white-space: nowrap;
    font-size: 0.9rem;
}

.qqsh-item {
    display: inline-block;
    padding: 0 3px;
    font-weight: bold;
}

.qqsh-item-separator {
    display: inline-block;
    font-weight: normal;
}

.qqsh-item.qqsh-correct {
    color: red;
    font-weight: bold;
}

.qqsh-correct {
    font-weight: bold;
}

.qqsh-incorrect {
    color: #333;
    font-weight: normal;
}

.qqsh-unknown {
    color: #333;
    font-weight: normal;
}

#qin-qi-shu-hua {
    width: 100%;
}

.qqsh-zhun {
    font-weight: bold;
    color: red;
}

.qqsh-cuo {
    color: #333;
    font-weight: bold;
}

/* 七尾样式 */
.ball {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    margin: 0 2px;
    font-weight: bold;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.ball.hit {
    background-color: #FF0000;
}

.no-data-message {
    text-align: center;
    padding: 30px 0;
    color: #666;
    font-weight: bold;
    font-size: 0.9rem; 
    background-color: #f9fff9;
}

/* 七尾表格样式 */
.qiwei-table {
    width: 100%; 
    background-color: #fff; 
    font-size: 0.9rem;  
    border-collapse: collapse;
}

.qiwei-row {
    border-bottom: 1px solid #f0f0f0;
}

.qiwei-row:last-child {
    border-bottom: none;
}

.qiwei-period {
    padding: 8px 0px; 
    width: 14%; 
    font-weight: bold; 
    text-align: left;
}

.qiwei-content {
    padding: 8px 0px; 
    width: 60%; 
    text-align: center; 
    font-weight: bold;
}

.qiwei-result {
    padding: 8px 0px; 
    width: 26%; 
    text-align: right; 
    font-weight: bold;
}

/* 六肖样式 */
.liuxiao-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0px;
    border-bottom: 1px solid #f0f0f0;
    background-color: white;
    margin-bottom: 0;
}
.liuxiao-item:nth-child(odd) {
    background-color: white;
}
.liuxiao-item:last-child {
    border-bottom: none;
}
.liuxiao-qishu {
    flex: 0 0 15%;
    font-weight: bold;
    color: #333;
    text-align: left;
    display: flex;
    align-items: center;
}
.liuxiao-content {
    flex: 1;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    width: 59%;
}
.liuxiao-result {
    flex: 0 0 30%;
    text-align: right;
    white-space: normal;
    display: block;
    overflow: visible;
    min-width: 100px;
}
.liuxiao-result span:first-child {
    margin-right: 0px;
}
.liuxiao-correct {
    color: red;
    font-weight: bold;
}
.liuxiao-incorrect {
    color: #333;
    font-weight: bold;
}

/* 大小中特样式 */
.daxiao-title {
    width: 20%;
    font-weight: bold;
    color: var(--primary-dark);
}

.daxiao-row {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 0px;
}

.daxiao-row:last-child {
    border-bottom: none;
}

.daxiao-period {
    width: 16%;
    font-weight: bold;
}

.daxiao-prediction {
    width: 38%;
    text-align: center;
    font-weight: bold;
}

.daxiao-kaijiang {
    width: 26%;
    text-align: right;
    font-weight: bold;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.daxiao-result {
    display: inline-block;
    margin-left: 5px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.prediction-text {
    color: #333;
    text-align: center;
}

.prediction-correct {
    color: red;
    text-align: center;
}

.result-correct {
    color: red;
    font-weight: bold;
}

.result-incorrect {
    color: #333;
    font-weight: bold;
}

/* 三头预测样式 */
#santou-container {
    width: 100%;
}

.santou-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.santou-item:last-child {
    border-bottom: none;
}

.santou-period-label {
    flex: 0 0 16%;
    font-weight: bold;
    white-space: nowrap;
}

.santou-highlight {
    flex: 0 0 20%;
    color: var(--primary-dark);
    font-weight: bold;
    white-space: nowrap;
}

.santou-content-area {
    flex: 0 0 37%;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.santou-number {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #1F9EFF;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

.santou-number.hit {
    background-color: red;
}

.santou-result-area {
    flex: 0 0 35%;
    text-align: right;
    font-weight: bold;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.santou-result-number {
    display: inline-block;
    margin: 0 3px 0px 0px;
}

.santou-result-number.hit {
    background-color: red;
    color: white;
    padding: 0 4px;
    border-radius: 3px;
}

.santou-result-zodiac {
    display: inline-block;
    margin: 0;
}

.santou-result-correctness {
    display: inline-block;
    margin-left: 8px;
}

.santou-result-correctness.correct {
    color: red;
}

.santou-result-area.correct {
    color: red;
}

.santou-result-area.incorrect {
    color: #333;
}

.santou-result-area.pending {
    color: red;
}

.santou-loading-message, .santou-error-message {
    text-align: center;
    padding: 20px;
    color: #666;
}

.santou-error-message {
    color: red;
}

@media (max-width: 768px) {
    .santou-period-label {
        flex: 0 0 18%;
    }
    
    .santou-highlight {
        flex: 0 0 20%;
    }
    
    .santou-content-area {
        flex: 0 0 25%;
    }
    
    .santou-result-area {
        flex: 0 0 37%;
    }
    
    .santou-number {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .santou-item {
        flex-wrap: wrap;
        padding: 8px 0;
    }
    
    .santou-period-label {
        flex: 0 0 15%;
        font-size: 0.9rem;
    }
    
    .santou-highlight {
        flex: 0 0 20%;
        font-size: 0.9rem;
    }
    
    .santou-content-area {
        flex: 0 0 38%;
        font-size: 0.9rem;
    }
    
    .santou-result-area {
        flex: 0 0 26%;
        text-align: right;
        margin-top: 5px;
        font-size: 0.9rem;
    }
    
    .santou-number {
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 0.9rem;
        margin: 0 2px;
    }
}

/* 前后生肖样式 */
.zodiac-container {
    display: flex;
    gap: 15px;
    padding: 10px 0;
    width: 100%;
}

.zodiac-row {
    flex: 1;
    padding: 15px 5px;
    border-radius: 8px;
    text-align: center;
}

.zodiac-row:first-child {
    background: rgba(255, 192, 203, 0.1);  /* 淡粉色背景 */
}

.zodiac-row:last-child {
    background: rgba(173, 216, 230, 0.1);  /* 淡蓝色背景 */
}

.zodiac-label {
    font-weight: bold;
    color: var(--primary-dark);
    font-size: 1.05rem;
    margin-bottom: 10px;
    display: block;
}

.zodiac-signs {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.zodiac-sign {
    color: #333;
    font-weight: bold;
    font-size: 0.9rem;
}

.number-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

.number-row:last-child {
    border-bottom: none;
}

.period {
    font-weight: bold;
    flex: 0 0 16%;
    font-size: 0.9rem;
}

.period-type {
    font-weight: bold;
    font-size: 0.9rem;
    flex: 0 0 25%;
    color: #1F9EFF;
}

.qianhoux-content {
    color: #333;
    font-weight: bold;
}

.qianhoux-content.correct {
    color: #FF0000;
}

/* 平特三尾 - 无数据提示 */
.no-data-message {
    text-align: center;
    padding: 30px 0;
    color: #666;
    font-weight: bold;
    font-size: 0.9rem; 
    background-color: #f9fff9;
}

/* 二肖杀样式 */
.erxiao-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    line-height: 1.6;
}

.erxiao-row:last-child {
    border-bottom: none;
}

.left-col {
    text-align: left;
    align-items: center;
    width: 16%;
}

.center-col {
    text-align: center;
    display: flex;
    align-items: center;
    flex: 1;
}

.right-col {
    text-align: right;
    color: #000;
    font-weight: bold;
    min-width: 100px;
}

.period {
    font-weight: bold;
    min-width: 16%;
}

.erxiao-title {
    color: var(--primary-dark);
    font-weight: bold;
    margin-right: 10%;
}

.erxiao-content {
    font-weight: bold;
    margin-left: 10%;
}

.star {
    color: var(--primary-dark);
    margin: 0 2px;
}

.correct {
    color: #ff0000; /* 红色 - 用于显示"准" */
    font-weight: bold;
}

/* 四肖四码样式 */
.item-qishu {
    flex: 0 0 16%;
    font-weight: bold;
    white-space: nowrap;
}

.item-content {
    flex: 1;
    font-weight: bold;
}

.item-result {
    flex: 0 0 30%;
    text-align: right;
    font-weight: bold;
}

#sixiaosima-container .item-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0px;
    border-bottom: 1px solid #f0f0f0;
}

#sixiaosima-container .item-row:last-child {
    border-bottom: none;
}

.loading-message, .no-data-message {
    text-align: center;
    padding: 30px 0;
    color: #666;
    font-weight: bold;
    font-size: 0.9rem; 
    background-color: #f9fff9;
}

/* 五行分类样式 */
.wuxing-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.wuxing-item {
    padding: 5px 2px 5px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
}

.wuxing-jin {
    border-left-color: #ffd700;
    background-color: rgba(255, 215, 0, 0.05);
}

.wuxing-mu {
    border-left-color: #6ca583;
    background-color: rgba(108, 165, 131, 0.05);
}

.wuxing-shui {
    border-left-color: #7fb5d9;
    background-color: rgba(127, 181, 217, 0.05);
}

.wuxing-huo {
    border-left-color: #f19e97;
    background-color: rgba(241, 158, 151, 0.05);
}

.wuxing-tu {
    border-left-color: #deb887;
    background-color: rgba(222, 184, 135, 0.05);
}

.wuxing-label {
    font-weight: bold;
    font-size: 0.9rem;
    min-width: 30px;
    color: #333;
}

.wuxing-numbers {
    font-size: 14px;
    color: #555;
    letter-spacing: 0.5px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.number-circle {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
}

.wuxing-jin .number-circle {
    background-color: rgba(255, 215, 0, 0.15);
    color: #9e7c0a;
}

.wuxing-mu .number-circle {
    background-color: rgba(108, 165, 131, 0.15);
    color: #3c7351;
}

.wuxing-shui .number-circle {
    background-color: rgba(127, 181, 217, 0.15);
    color: #2b6a9c;
}

.wuxing-huo .number-circle {
    background-color: rgba(241, 158, 151, 0.15);
    color: #c03e34;
}

.wuxing-tu .number-circle {
    background-color: rgba(222, 184, 135, 0.15);
    color: #996633;
}

/* 平肖成语样式 */
.pxcy-item {
    display: flex;
    align-items: center;
    padding: 8px 0px;
    border-bottom: 1px solid #f0f0f0;
}

.pxcy-item:last-child {
    border-bottom: none;
}

.period-num {
    flex: 0 0 16%;
    font-weight: bold;
    font-size: 0.9rem;
}

.period-type {
    flex: 0 0 26%;
    font-weight: bold;
    font-size: 0.9rem;
}

.content {
    flex: 0 0 32%;
    text-align: center;
}
.contentt {
    flex: 0 0 32%;
    text-align: center;
    padding: 8px 10px;
}
.result {
    flex: 0 0 26%;
    text-align: right;
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
}

.zhun {
    color: red;
    font-weight: bold;
}

.cuo {
    color: #333;
    font-weight: bold;
}

.highlight {
    font-weight: bold !important;
}

.bracket {
    color: #333;
    font-weight: bold;
}

.normal-content {
    color: #333;
    font-weight: bold;
}

.hit-content {
    color: red;
    font-weight: bold;
}

#pxcy-container {
    min-height: 300px;
}

.loading {
    text-align: center;
    padding: 20px;
    font-weight: bold;
    color: #666;
}

/* 单双生肖样式 */
.danssx-list {
    width: 100%;
}

.danssx-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.danssx-item:last-child {
    border-bottom: none;
}

.qishu {
    width: 16%;
    font-weight: bold;
}

.danssx-title {
    width: 26%;
    font-weight: bold;
    color: #1F9EFF;
}

.danssx-content {
    width: 32%;
    text-align: center;
}

.kj-result {
    width: 26%;
    text-align: right;
}

/* .hit {
    color: red;
} */

/* 春夏秋冬样式 */
.chunxqd-history-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.5;
}

.chunxqd-history-item:last-child {
    border-bottom: none;
}

.chunxqd-period {
    flex: 0 0 15%;
    font-weight: bold;
    text-align: left;
    font-size: 0.9rem;
}

.chunxqd-content {
    flex: 0 0 55%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 0.9rem;
}

.chunxqd-result {
    flex: 0 0 30%;
    text-align: right;
    font-weight: normal;
    white-space: nowrap;
    font-size: 0.9rem;
}

.chunxqd-item {
    display: inline-block;
    padding: 0 3px;
    font-weight: bold;
}

.chunxqd-item-separator {
    display: inline-block;
    font-weight: normal;
}

.chunxqd-item.chunxqd-correct {
    color: red;
    font-weight: bold;
}

.chunxqd-correct {
    color: red;
    font-weight: bold;
}

.chunxqd-incorrect {
    color: #333;
    font-weight: normal;
}

.chunxqd-unknown {
    color: #333;
    font-weight: normal;
}

#chun-xia-qiu-dong {
    width: 100%;
}

.chunxqd-zhun {
    font-weight: bold;
    color: red;
}

.chunxqd-cuo {
    font-weight: bold;
    color: #333;
}

.section-content {
    padding: 5px 10px;
}

/* 绝杀一波的样式 */
.sha-bo-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
}

.sha-bo-row:last-child {
    border-bottom: none;
}

.sha-bo-period {
    width: 16%;
    font-weight: bold;
}

.sha-bo-title {
    width: 26%;
    color: var(--primary-dark);
}

.sha-bo-content {
    width: 32%;
    text-align: center;
}

.sha-bo-result {
    width: 26%;
    text-align: right;
}

.red-text {
    color: red;
}

.black-text {
    color: #333;
}

/* 绝杀二头样式 */
.shaertou-number-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
    width: 100%;
}

.shaertou-number-row:last-child {
    border-bottom: none;
}

.shaertou-period {
    font-weight: bold;
    flex: 0 0 16%;
    font-size: 0.9rem;
}
.numbers {
    width: 58%;
    text-align: center;
}
.shaertou-numbers {
    flex: 0 0 26%;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
}

.shaertou-title-text {
    color: var(--primary-dark);
    font-weight: bold;
}

.shaertou-balls-container {
    flex: 0 0 32%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shaertou-result {
    flex: 0 0 26%;
    text-align: right;
    font-weight: bold;
    font-size: 0.9rem;
}

.shaertou-result .correct {
    color: red;
}

.shaertou-result .black-text {
    color: #333;
}

.shaertou-result .incorrect {
    color: #333;
}

.shaertou-ball {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    margin: 0 10px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.shaertou-ball.hit {
    background-color: red;
}

.shaertou-no-data-message {
    text-align: center;
    padding: 30px 0;
    color: #666;
    font-weight: bold;
    font-size: 0.9rem; 
    background-color: #f9fff9;
}

/* 家禽野兽样式 */
.zodiac-container {
    display: flex;
    gap: 15px;
    padding: 10px 0;
}

.zodiac-row {
    flex: 1;
    padding: 15px 5px;
    border-radius: 8px;
    text-align: center;
}

.zodiac-row:first-child {
    background: rgba(255, 192, 203, 0.1);  /* 淡粉色背景 */
}

.zodiac-row:last-child {
    background: rgba(173, 216, 230, 0.1);  /* 淡蓝色背景 */
}

.zodiac-label {
    font-weight: bold;
    color: var(--primary-dark);
    font-size: 1.05rem;
    margin-bottom: 10px;
    display: block;
}

.zodiac-signs {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.zodiac-sign {
    color: #333;
    font-weight: bold;
    font-size: 0.9rem;
}

.jiaye-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

.jiaye-row:last-child {
    border-bottom: none;
}

.jiaye-period {
    font-weight: bold;
    flex: 0 0 16%;
    font-size: 0.9rem;
}

.jiaye-type {
    font-weight: bold;
    font-size: 0.9rem;
    flex: 0 0 25%;
    color: #1F9EFF;
}

.jiaye-content {
    flex: 0 0 34%;
    text-align: center;
    font-weight: bold;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.jiaye-result {
    flex: 0 0 25%;
    text-align: right;
    font-weight: bold;
    font-size: 0.9rem;
}

.jiaye-correct {
    color: #FF0000;
}

.jiaye-incorrect {
    color: #000000;
}

/* 以下样式从 ziliao.html 移动过来 */

/* 导航样式 */
.nav-container {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: -5px;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
    background: #3E9742;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 9999;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.main-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    height: 50px;
}

.nav-item {
    padding: 15px 0;
    color: white;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    flex: 1;
    position: relative;
    transition: all 0.3s ease;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 0.9rem; 
    border-radius: 0;
    margin: 0;
}

.nav-item.active {
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 15px rgba(255,255,255,0.15);
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 3px;
    background: white;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -1px 3px rgba(255,255,255,0.3);
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    .nav-item {
        font-size: 14px;
        padding: 16px 0;
        letter-spacing: 0;
    }
}

/* 添加导航栏占位空间 */
body::before {
    content: "";
    display: block;
}

/* 幻灯片样式 */
.slideshow-wrapper {
    margin-bottom: 10px;
    margin-left: -5px;
    margin-right: -5px;
    margin-top: -10px; /* 移除顶部边距，因为导航栏现在是固定定位 */
}

.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
    /* border-radius: 0px 0px 20px 20px; */
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.mySlides {
    display: none;
}

.mySlides img {
    vertical-align: middle;
    width: 100%;
    /* border-radius: 0px 0px 20px 20px; */
}

/* 标题文本 */
.text {
    color: #fff;
    font-size: 15px;
    padding: 10px 16px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(0,0,0,0.6);
    font-weight: bold;
}

/* 前/后按钮 */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -22px;
    padding: 10px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 50%;
    /* background-color: rgba(0,0,0,0.4); */
    text-align: center;
    line-height: 20px;
    -webkit-user-select: none;
    user-select: none;
}

.next {
    right: 15px;
}

.prev {
    left: 15px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* 指示点 */
.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    margin-top: 8px;
}

/* 期数标签样式 */
.period-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
}

.period-header-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 5px 0;
}

.period-tab {
    padding: 6px 6px;
    background-color: #FFF;
    color: var(--primary-dark);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 0.82rem;
}

.period-tab:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.period-tab.active {
    background-color: #ff4d4d;
    color: white;
}

#period-image-container {
    text-align: center;
    padding: 0;
    line-height: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#current-period-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
    vertical-align: top;
    object-fit: contain;
}

@media (max-width: 768px) {
    #current-period-image {
        max-width: 100%;
    }
}

/* 波色样式 */
.ball-red {
    background-color: #e74c3c;
    color: white;
}

.ball-green {
    background-color: #1F9EFF;
    color: white;
}

.ball-blue {
    background-color: #3498db;
    color: white;
}

/* 波色文本样式 */
.bo-red {
    color: #e74c3c;
}

.bo-blue {
    color: #3498db;
}

.bo-green {
    color: #1F9EFF;
}

/* 保证前导零显示 - 修复五码小于10的数字显示问题 */
#prediction-container .ball {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

#prediction-container .ball::before {
    content: attr(data-original-num);
}

/* 三尾显示样式 */
.tail-number {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 24px;
    text-align: center;
    background-color: #1F9EFF;
    color: white;
    border-radius: 50%;
    margin: 0;
    margin-right: 4px;  /* 添加右边距 */
    font-weight: bold;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

.tail-number:last-child {
    margin-right: 0;  /* 最后一个数字移除右边距 */
}

.tail-number.hit {
    background-color: #e74c3c;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

#three-tails-history-container {
    min-height: 100px;
}

#three-tails-history-container .item-row {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

#three-tails-history-container .item-row:last-child {
    border-bottom: none;
}

#three-tails-history-container .item-content {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

#three-tails-history-container .period-label {
    width: 16%;
    font-weight: bold;
    text-align: left;
    min-width: auto;
}

#three-tails-history-container .highlight {
    color: var(--primary-dark);
    font-weight: bold;
    width: 40%;
    display: inline-block;
}

#three-tails-history-container .content-area {
    width: 60%;
    display: flex;
}

#three-tails-history-container .hot-text {
    width: 26%;
    text-align: right;
    font-weight: bold;
    min-width: auto;
}

.three-tails-balls {
    display: inline-flex;
    width: 60%;

}

.three-tails-balls .tail-number {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    margin: 0 3px;
    color: white;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.three-tails-balls .tail-number.hit {
    background-color: #e74c3c; /* 红色背景表示命中 */
    /* animation: pulse 1s infinite; */
}

.three-tails-balls .tail-number:not(.hit) {
    background-color: #1f9eff; /* 绿色背景表示未命中 */
}

/* 平肖历史记录样式 */
#ping-xiao-history-container {
    min-height: 100px;
}

#ping-xiao-history-container .item-row {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

#ping-xiao-history-container .item-row:last-child {
    border-bottom: none;
}

#ping-xiao-history-container .item-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#ping-xiao-history-container .period-label {
    min-width: 16%;
    font-weight: bold;
}

#ping-xiao-history-container .highlight {
    color: var(--primary-dark);
    font-weight: bold;
}

#ping-xiao-history-container .content-area {
    flex: 1;
    text-align: center;
}

#ping-xiao-history-container .hot-text {
    min-width: 26%;
    text-align: right;
    font-weight: bold;
}

/* 修复平肖内容中的span样式，移除margin-left */
#ping-xiao-history-container .content-area span {
    margin-left: 0;
}

/* 确保.content-area内的元素不使用inline样式添加margin */
.content-area > span {
    margin-left: 0 !important;
}

/* 特殊样式 */
.accent {
    color: #ff7600;
}

.shengxiao-item {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.shengxiao-item .qishu {
    font-weight: bold;
    margin-bottom: 5px;
}

.shengxiao-item .content {
    font-size: 0.9rem; 
    color: #333;
    margin-bottom: 5px;
}

.history-list-wrap {
    padding: 0 15px 15px;
}

.history-list-wrap .list-title {
    font-weight: bold;
    margin: 15px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.history-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.history-list li {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.history-list li:last-child {
    border-bottom: none;
}

.history-list li .qishu {
    flex: 0 0 20%;
    font-weight: bold;
}

.history-list li .content {
    flex: 1;
}

.history-list li .result {
    flex: 0 0 20%;
    text-align: right;
}

/* 响应式适配 */
@media only screen and (max-width: 480px) {
    .text {font-size: 14px; padding: 8px;}
    .prev, .next {
        width: 30px;
        height: 30px;
        line-height: 12px;
    }
    .dot {
        height: 8px;
        width: 8px;
    }
    body {
        margin-bottom: 65px;
    }
    .header h1 {
        font-size: 1.1rem;
    }
    .section-header {
        padding: 8px;
    }
    .section-content {
        padding: 10px 10px 5px 10px;
    }
    .ball {
        width: 26px;
        height: 26px;
        line-height: 26px;
        margin: 0 2px;
        font-size: 0.8rem;
    }
}

/* 双波中特布局样式 */
.item-content {
    /* display: flex; */
    width: 100%;
    align-items: center;
}

.period-label {
    width: 16%;
    display: inline-block;
    vertical-align: middle;
}

.left-element {
    width: 26%;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.right-content {
    width: 32%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.hot-text {
    width: 26%;
    display: inline-block;
    text-align: right;
    vertical-align: middle;
}

/* 修复content-area内部的子元素，使其不继承父元素的flex样式 */
.content-area > * {
    display: inline-block !important;
    vertical-align: middle;
    margin-left: 0 !important;
}

/* 修复highlight类，确保它作为content-area的子元素也有正确的宽度 */
.content-area .highlight {
    width: 26%;
    text-align: left;
    font-weight: bold;
    color: var(--primary-dark);
    display: inline-block !important;
}

/* 创建一个新的类来包装波色内容 */
.bo-se-content-wrapper {
    width: 34%;
    text-align: center;
    font-weight: bold;
    display: inline-block !important;
}

.content-area {
    width: 60%;
    text-align: center;
}

/* 为前后生肖专门创建样式 */
#qian-hou-xiao {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#qian-hou-xiao .number-row {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    flex-wrap: nowrap;
    border-bottom: 1px solid #f0f0f0;
}

#qian-hou-xiao .number-row:last-child,
#qian-hou-xiao .number-row.last-item {
    border-bottom: none;
}

#qian-hou-xiao .period {
    width: 16%;
    min-width: 16%;
    font-weight: bold;
    text-align: left;
    margin: 0;
    padding: 0;
}

#qian-hou-xiao .period-type {
    width: 26%;
    min-width: 26%;
    font-weight: bold;
    color: var(--primary-dark);
    margin: 0;
    padding: 0;
}

#qian-hou-xiao .numbers {
    width: 32%;
    min-width: 32%;
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#qian-hou-xiao .result {
    width: 26%;
    min-width: 26%;
    text-align: right;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

#qian-hou-xiao .qianhoux-content {
    color: #333;
    font-weight: bold;
    display: inline;
}

.qianhoux-content.correct {
    color: #FF0000;
}


/* 六合连肖样式 */
.liuxiao-item {
    padding: 8px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}


.liuxiao-item:last-child {
    border-bottom: none;
}

.liuxiao-qishu {
    width: 16%;
    font-weight: bold;
    text-align: center;
    font-size: 0.9rem;
}

.liuxiao-content {
    width: 32%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.liuxiao-title {
    color: var(--primary-dark);
    font-weight: bold;
}

.liuxiao-result {
    width: 26%;
    text-align: right;
    font-weight: normal;
    font-size: 0.9rem;
    white-space: nowrap;
}

.liuxiao-result strong {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.liuxiao-correct {
    color: red;
}

.liuxiao-incorrect {
    color: black;
}

.loading-message, .no-data-message {
    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic;
}

.no-data-message {
    color: #999;
}

.footer p {
    margin: 5px 0;
    text-align: center;
}

.footer a {
    color: #1F9EFF;
    text-decoration: none;
    margin: 0 5px;
}

.footer a:hover {
    text-decoration: underline;
}


/* 三合生肖样式 */
.sanhe-item {
    padding: 8px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.sanhe-item:last-child {
    border-bottom: none;
}

.sanhe-qishu {
    width: 16%;
    font-weight: bold;
    font-size: 0.9rem;
}

.sanhe-title {
    width: 26%;
    color: var(--primary-dark);
    font-weight: bold;
    font-size: 0.9rem;
}

.sanhe-content {
    width: 32%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.sanhe-result {
    width: 26%;
    text-align: right;
    font-weight: normal;
    font-size: 0.9rem;
    white-space: nowrap;
}

.sanhe-result strong {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sanhe-correct {
    color: red;
    font-weight: bold;
}

.sanhe-incorrect {
    color: black;
    font-weight: bold;
}

.loading-message, .no-data-message {
    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic;
}

.no-data-message {
    color: #999;
}


        /* 黑白生肖专用样式 */
        .heibai-item {
            display: flex;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
            font-weight: bold;
        }
        .heibai-item:last-child {
            border-bottom: none;
        }
        .heibai-period {
            width: 16%;
            text-align: left;
        }
        .heibai-title {
            width: 26%;
            color: var(--primary-dark);
        }
        .heibai-content {
            width: 32%;
            text-align: center;
        }
        .heibai-result {
            width: 26%;
            text-align: right;
        }
        .zhun {
            color: red;
            font-weight: bold;
        }
        .cuo {
            color: black;
            font-weight: bold;
        }
        .hit-text {
            color: red;
            font-weight: bold;
        }
        /* 生肖颜色 */
        .red-sx {
            color: red;
        }
        .green-sx {
            color: green;
        }
        .blue-sx {
            color: blue;
        }

/* 神料宝塔样式 */
.jinzita-number.hit, .jinzita-zodiac.hit {
    color: red !important;
    font-weight: bold !important;
}

.jinzita-zhun {
    color: red !important;
    font-weight: bold !important;
}

.jinzita-cuo {
    color: #333 !important;
}

/* 添加神料宝塔专用样式 */
.jinzita-history-item {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}

.jinzita-period {
    width: 16%;
    font-weight: bold;
}

.jinzita-content {
    width: 58%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jinzita-numbers, .jinzita-zodiacs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 3px 0;
}

.jinzita-number, .jinzita-zodiac {
    padding: 2px 5px;
}

.jinzita-result {
    width: 26%;
    text-align: right;
}

/* 添加未开奖状态的样式 */
.hlvxiao-result {
    width: 26%;
    text-align: right;
    font-weight: bold;
}

.hlvxiao-item .hlvxiao-result {
    position: relative;
}

/* 未开奖样式 */
.wei-kaijang {
    color: #888;
    font-style: italic;
}

.zhun {
    color: red;
    font-weight: bold;
}

.cuo {
    color: black;
    font-weight: bold;
}

/* 天地生肖样式 */
.tiandi-item {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}
.tiandi-item:last-child {
    border-bottom: none;
}
.tiandi-period {
    width: 16%;
    text-align: left;
}
.tiandi-title {
    width: 26%;
    color: var(--primary-dark);
}
.tiandi-content {
    width: 32%;
    text-align: center;
}
.tiandi-result {
    width: 26%;
    text-align: right;
}

/* 单笔双笔样式 */
.danbi-shuangbi-item {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}
.danbi-shuangbi-item:last-child {
    border-bottom: none;
}
.danbi-shuangbi-period {
    width: 16%;
    text-align: left;
}
.danbi-shuangbi-title {
    width: 26%;
    color: var(--primary-dark);
}
.danbi-shuangbi-content {
    width: 32%;
    text-align: center;
}
.danbi-shuangbi-result {
    width: 26%;
    text-align: right;
}

/* 白边黑中样式 */
.baibian-heizhong-item {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}
.baibian-heizhong-item:last-child {
    border-bottom: none;
}
.baibian-heizhong-period {
    width: 16%;
    text-align: left;
}
.baibian-heizhong-title {
    width: 26%;
    color: var(--primary-dark);
}
.baibian-heizhong-content {
    width: 32%;
    text-align: center;
}
.baibian-heizhong-result {
    width: 26%;
    text-align: right;
}

/* 阴阳生肖样式 */
.yinyang-item {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}
.yinyang-item:last-child {
    border-bottom: none;
}
.yinyang-period {
    width: 16%;
    text-align: left;
}
.yinyang-title {
    width: 26%;
    color: var(--primary-dark);
}
.yinyang-content {
    width: 32%;
    text-align: center;
}
.yinyang-result {
    width: 26%;
    text-align: right;
}

/* 未开奖状态样式 - 适用于所有生肖预测 */
.wei-kaijiang {
    color: #888;
    font-style: italic;
}

/* 通用样式 - 所有预测板块 */
.zhun, .correct {
    color: red;
    font-weight: bold;
}

.cuo, .incorrect {
    color: #333;
    font-weight: bold;
}

.hit-text {
    color: red;
    font-weight: bold;
}

/* 特准马料样式 */
.tezma-item {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}
.tezma-item:last-child {
    border-bottom: none;
}
.tezma-period {
    width: 16%;
    text-align: left;
}
.tezma-title {
    width: 17%;
    color: var(--primary-dark);
}
.tezma-content {
    width: 50%;
    text-align: center;
}
.tezma-result {
    width: 17%;
    text-align: right;
}

/* 修改content-area样式以匹配要求的宽度比例 */
.content-area {
    width: 60%;
    text-align: center;
}

/* 特准马料自定义样式 */
.tezama-content-area {
    flex: 0 0 50% !important;
    width: 50% !important;
    text-align: center;
}

.tezama-period-label {
    width: 16% !important;
    font-weight: bold;
    text-align: left;
}

.tezama-highlight {
    width: 17% !important;
    font-weight: bold;
    color: var(--primary-dark);
}

.tezama-hot-text {
    width: 17% !important;
    text-align: right;
    font-weight: bold;
}

/* 新的大小中特样式 */
.new-daxiao-row {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 0px;
}

.new-daxiao-row:last-child {
    border-bottom: none;
}

.new-daxiao-period {
    width: 16%;
    font-weight: bold;
}

.new-daxiao-title {
    width: 26%;
    color: var(--primary-dark);
    font-weight: bold;
}

.new-daxiao-prediction {
    width: 32%;
    text-align: center;
    font-weight: bold;
}

.new-daxiao-result {
    width: 26%;
    text-align: right;
    font-weight: bold;
}

.new-daxiao-zhun {
    color: red;
    font-weight: bold;
}

.new-daxiao-cuo {
    color: #333;
    font-weight: bold;
}

/* 大小中特首页样式 */
.daxiaozt-index-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
}

.daxiaozt-index-item:last-child {
    border-bottom: none;
}

.daxiaozt-index-period {
    width: 16%;
    font-weight: bold;
    font-size: 0.9rem;
}

.daxiaozt-index-title {
    width: 26%;
    font-weight: bold;
    color: var(--primary-dark);
    font-size: 0.9rem;
}

.daxiaozt-index-content {
    width: 32%;
    text-align: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.daxiaozt-index-result {
    width: 26%;
    text-align: right;
    font-weight: bold;
    font-size: 0.9rem;
}

.daxiaozt-index-zhun {
    color: red;
    font-weight: bold;
}

.daxiaozt-index-cuo {
    color: #333;
    font-weight: bold;
}

/* 必中三头新样式 */
.new-santou-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
}

.new-santou-item:last-child {
    border-bottom: none;
}

.new-santou-period {
    width: 16%;
    font-weight: bold;
    text-align: left;
}

.new-santou-title {
    width: 20%;
    color: var(--primary-dark);
    font-weight: bold;
}

.new-santou-content {
    width: 38%;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.new-santou-result {
    width: 26%;
    text-align: right;
    font-weight: bold;
}

.new-santou-number {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    margin: 0 3px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.new-santou-number.hit {
    background-color: #FF0000;
}

.new-santou-zhun {
    color: red;
    font-weight: bold;
}

.new-santou-cuo {
    color: #333;
    font-weight: bold;
}

/* 必中三头首页样式 */
.santou-index-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
}

.santou-index-item:last-child {
    border-bottom: none;
}

.santou-index-period {
    width: 16%;
    font-weight: bold;
    font-size: 0.9rem;
}

.santou-index-title {
    width: 20%;
    color: var(--primary-dark);
    font-weight: bold;
    font-size: 0.9rem;
}

.santou-index-content {
    width: 38%;
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 0.9rem;
}

.santou-index-result {
    width: 26%;
    text-align: right;
    font-weight: bold;
    font-size: 0.9rem;
}

.santou-index-number {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    margin: 0 2px;
    font-weight: bold;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    font-size: 0.85rem;
}

.santou-index-number.hit {
    background-color: #FF0000;
}

.santou-index-zhun {
    color: red;
    font-weight: bold;
}

.santou-index-cuo {
    color: #333;
    font-weight: bold;
}

/* 神料宝塔容器样式 */
#jinzita-container {
    width: 100%;
    padding: 10px;
}

.loading-message {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

.no-data-message {
    text-align: center;
    padding: 20px;
    color: #999;
}