* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0d1117; color: #e6edf3; min-height: 100vh; padding-bottom: 40px; overflow-y: scroll; }
body::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; }

/* 顶部栏 */
.top-bar { position: sticky; top: 0; z-index: 50; background: #161b22; border-bottom: 1px solid #30363d; height: 50px; display: flex; justify-content: center; align-items: center; }
.top-bar-inner { max-width: 800px; width: 100%; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.top-bar img { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(88,166,255,0.25)); }
.top-bar h1 { color: #58a6ff; font-size: 1.1em; white-space: nowrap; }

/* 返回按钮 */
.back-btn { color: #8b949e; text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; flex-shrink: 0; transition: color 0.2s; }
.back-btn:hover { color: #58a6ff; }

/* Tab按钮 */
.tab-group { display: flex; gap: 6px; margin-left: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tab-group::-webkit-scrollbar { display: none; }
.tab-btn { padding: 5px 14px; font-size: 12px; color: #8b949e; background: #21262d; border: 1px solid #30363d; border-radius: 16px; cursor: pointer; white-space: nowrap; transition: all 0.2s; font-weight: 500; }
.tab-btn:hover { color: #e6edf3; background: #30363d; }
.tab-btn.active { color: #fff; background: linear-gradient(135deg, #1f6feb, #388bfd); border-color: #1f6feb; box-shadow: 0 2px 8px rgba(31,111,235,0.35); }

/* 刷新按钮 */
.refresh-btn { width: 36px; height: 36px; border-radius: 50%; background: #21262d; border: 1px solid #30363d; color: #8b949e; font-size: 18px; cursor: pointer; flex-shrink: 0; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.refresh-btn:hover { color: #58a6ff; border-color: #58a6ff; }

/* 内容区 */
.container { max-width: 800px; margin: 0 auto; padding: 0 12px; }
.info-bar { color: #8b949e; font-size: 12px; padding: 10px 0; }

/* 表头 */
.table-header { position: sticky; top: 50px; z-index: 40; background: #161b22; border-bottom: 2px solid #30363d; margin: 0 -12px; padding: 0 12px; }
.table-header .row { display: flex; align-items: center; padding: 10px 0; }
.table-header .cell { font-size: 11px; color: #8b949e; text-transform: uppercase; font-weight: 600; }

/* 数据行 */
.row { display: flex; align-items: center; padding: 10px 0; }
.card { background: #161b22; border-bottom: 1px solid #21262d; padding: 10px 0; border-radius: 6px; margin-bottom: 4px; transition: background 0.15s; }
.card:hover { background: #1c2333; }
.card.rank-1 { box-shadow: inset 3px 0 0 #ffd700; background: rgba(255, 215, 0, 0.05); }
.card.rank-2 { box-shadow: inset 3px 0 0 #c0c0c0; background: rgba(192, 192, 192, 0.05); }
.card.rank-3 { box-shadow: inset 3px 0 0 #cd7f32; background: rgba(205, 127, 50, 0.05); }

/* 列宽 */
.col-rank { width: 50px; text-align: center; flex-shrink: 0; }
.col-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.col-ship { width: 140px; flex-shrink: 0; font-size: 12px; color: #58a6ff; }
.col-count { width: 70px; text-align: right; flex-shrink: 0; font-weight: 600; }

/* 排名数字 */
.rank-num { font-size: 14px; font-weight: 600; color: #8b949e; }

/* 头像 */
.avatar { width: 36px; height: 36px; border-radius: 4px; flex-shrink: 0; object-fit: cover; background: #21262d; }

/* 名字 */
.name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 参团数 */
.count { color: #f0883e; font-size: 14px; }

/* 空状态 */
.empty { text-align: center; padding: 60px; color: #8b949e; }

/* 加载 */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; color: #8b949e; gap: 12px; }
.spinner { width: 32px; height: 32px; border: 3px solid #30363d; border-top-color: #58a6ff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 备案号 */
.footer { position: fixed; bottom: 0; left: 0; right: 0; text-align: center; padding: 6px 0; background: #0d1117; border-top: 1px solid #21262d; z-index: 100; }
.footer a { color: #8b949e; font-size: 12px; text-decoration: none; }
.footer a:hover { color: #58a6ff; }

/* 移动端适配 */
@media (max-width: 600px) {
    .top-bar h1 { font-size: 0.9em; }
    .tab-btn { padding: 4px 10px; font-size: 11px; }
    .col-ship { width: 100px; font-size: 11px; }
    .avatar { width: 30px; height: 30px; }
    .name { font-size: 12px; }
}