body { font-family: "Microsoft YaHei", sans-serif; background-color: #f5f5f5; color: #333; font-size: 14px; margin: 0;}
.container { max-width: 1000px; margin: 0 auto; background: #fff; min-height: 100vh; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.banner-placeholder { width: 100%; height: auto; max-height: 100px; color: #fff; font-size: 18px; }
.banner-placeholder2 { width: 100%; height: auto; max-height: 100px; background: #2c3e50; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.core-section { padding: 15px; border-bottom: 2px solid #ddd; background: #fff; text-align: center; }
.period-info { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; font-weight: bold; }
.logo-canada { width: 24px; height: 24px; background: #e74c3c; border-radius: 50%; margin-right: 8px; color: #fff; line-height: 24px; font-size: 12px; }
.current-period-text { color:#e74c3c; margin:0 5px; font-size: 18px; }
.countdown-box { margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.time-block { background: #c0392b; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 28px; font-weight: bold; min-width: 50px; }
.label-text { font-size: 14px; color: #666; }
.next-time-hint { font-size: 12px; color: #999; margin-top: 5px; font-family: monospace; } 
.result-display { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 10px; min-height: 60px; }
.ball { width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; font-weight: bold; border-radius: 6px; font-size: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.bg-green { background-color: #27ae60; } .bg-red { background-color: #e74c3c; } .bg-blue { background-color: #2980b9; } .bg-gray { background-color: #7f8c8d; } 
.symbol { font-size: 20px; font-weight: bold; color: #999; margin: 0 5px; }
.attr-tag { width: 36px; height: 36px; line-height: 36px; border-radius: 50%; color: #fff; font-size: 14px; margin-left: 8px; text-align: center; display: inline-block;}
.tag-small { background-color: #3498db; } .tag-big { background-color: #e74c3c; } .tag-odd { background-color: #1abc9c; } .tag-even { background-color: #9b59b6; }
.data-nav { display: flex;text-align: center; cursor: pointer; padding: 0; background: #34495e; justify-content: space-around;}
.nav-item { flex: 1; text-align: center; padding: 12px 0; color: #fff; cursor: pointer; border-right: 1px solid rgba(255,255,255,0.1); }
.nav-item:hover:not(.active) { background-color: #2c3e50; }
.forecast-text { color: #2980b9; font-weight: 500; } /* 蓝色预测字 */
.result-text { color: #666; } /* 灰色结果字 */
.nav-item.active { background: #e74c3c; }
.tab-content { display: none; } .tab-content.active { display: block; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; table-layout: fixed; }
.data-table th { background: #ecf0f1; color: #666; font-weight: normal; padding: 8px 2px; border: 1px solid #ddd; word-break: keep-all;}
.data-table td { border: 1px solid #eee; padding: 6px 2px; height: 36px; overflow: hidden; white-space: nowrap; }
.trend-cell { display: flex; justify-content: center; align-items: center; height: 100%; }
.trend-marker { display: inline-block; width: 100%; height: 24px; line-height: 24px; color: #fff; border-radius: 3px; font-size: 12px; transform: scale(0.9);}
.bg-big-odd { background-color: #e74c3c; } .bg-big-even { background-color: #c0392b; } .bg-small-odd { background-color: #3498db; } .bg-small-even { background-color: #2980b9; }
#statusBar { background: #fff3cd; color: #856404; padding: 8px; text-align: center; font-size: 12px; display:none; }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.load-more-container { text-align: center; padding: 20px 0; background: #fff; }
.load-more-container button { background-color: #f5f5f5; border: 1px solid #ddd; color: #666; padding: 10px 30px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.load-more-container button:hover { background-color: #e0e0e0; color: #333; }
.load-more-container button:disabled { opacity: 0.6; cursor: not-allowed; }

.site-footer { text-align: center; padding: 30px 10px; background-color: #f0f2f5; color: #999; font-size: 12px; border-top: 1px solid #e1e4e8; margin-top: 20px; }
.site-footer p { margin: 5px 0; }

@media (max-width: 768px) {
    .container { width: 100%; } 
    
    .ball { width: 32px; height: 32px; line-height: 32px; font-size: 16px; }
    .attr-tag { width: 30px; height: 30px; line-height: 30px; font-size: 12px; margin-left: 3px; }
    .trend-marker { font-size: 10px; transform: scale(0.85); } 
    .banner-placeholder img { max-width: 200px; width: 100%; max-height: 100px; height: auto; padding-top: 4px;}
    .banner-placeholder2 img { max-width: 200px; width: 100%; max-height: 100px; height: auto; }
    .data-table { font-size: 11px; }
}