* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f5f5; color: #333; font-size: 14px; }

.topbar { background: #c62828; color: #fff; padding: 0 16px; display: flex; align-items: center; height: 48px; position: sticky; top: 0; z-index: 100; }
.brand { font-size: 18px; font-weight: bold; margin-right: 24px; white-space: nowrap; }
.lottery-tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; }
.lottery-tabs::-webkit-scrollbar { display: none; }
.tab { padding: 6px 14px; border-radius: 4px; cursor: pointer; white-space: nowrap; color: #ffcdd2; font-size: 13px; transition: all .15s; }
.tab:hover { background: rgba(255,255,255,.15); }
.tab.active { background: #fff; color: #c62828; font-weight: bold; }

.toolbar { padding: 10px 16px; background: #fff; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: sticky; top: 48px; z-index: 99; }
.toolbar label { font-size: 13px; color: #666; }
.toolbar select { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; margin-left: 4px; }
.toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.latest-info { margin-left: auto; color: #c62828; font-weight: bold; font-size: 13px; }

.table-wrap { overflow-x: auto; padding: 8px; }
.trend-table { border-collapse: collapse; white-space: nowrap; background: #fff; }
.trend-table th, .trend-table td { border: 1px solid #e8e8e8; text-align: center; padding: 4px 2px; font-size: 12px; min-width: 28px; height: 30px; }
.trend-table thead th { background: #f5f5f5; position: sticky; top: 0; z-index: 5; font-weight: normal; color: #666; }
.trend-table thead th.group-front { background: #ffebee; color: #c62828; font-weight: bold; }
.trend-table thead th.group-back { background: #e3f2fd; color: #1565c0; font-weight: bold; }
.trend-table thead th.stat-col { background: #fff8e1; color: #e65100; }
.trend-table tbody tr:hover { background: #fafafa; }
.trend-table .issue-col { position: sticky; left: 0; background: #fafafa; z-index: 3; font-weight: bold; min-width: 70px; }
.trend-table .date-col { position: sticky; left: 70px; background: #fafafa; z-index: 3; min-width: 80px; color: #999; }
.trend-table tfoot td { background: #f5f5f5; font-weight: bold; color: #666; }

/* 号码球 */
.ball { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: bold; }
.ball-red { background: #e53935; }
.ball-blue { background: #1e88e5; }
.ball-green { background: #43a047; }
.ball-gray { background: #9e9e9e; }

/* 遗漏值 */
.omission { color: #bbb; font-size: 11px; }
.omission-hot { color: #c62828; }
.omission-cold { color: #1565c0; }

/* 频率条 */
.freq-cell { font-size: 11px; color: #888; }

/* 统计列 */
.stat-val { font-size: 12px; color: #555; }

.loading { text-align: center; padding: 40px; color: #999; }

@media (max-width: 600px) {
  .trend-table th, .trend-table td { min-width: 24px; height: 26px; font-size: 11px; padding: 2px; }
  .ball { width: 20px; height: 20px; font-size: 11px; }
  .brand { font-size: 16px; margin-right: 12px; }
  .tab { padding: 5px 10px; font-size: 12px; }
}