/* ==========================================================================
   词元之王 /token-king：复用 rankings.css 的 hero/sub-tabs/rank-table 视觉，
   这里只补筛选条、我的排名卡片、8 列网格与加载更多。
   ========================================================================== */

/* 筛选条：标签 + 二级 tab + 下拉，窄屏自动换行 */
.tk-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.tk-filter-row .sub-tabs { margin-bottom: 0; }
.tk-label { font-size: 13px; color: #8b8b9e; white-space: nowrap; }
.tk-select, .tk-date {
  padding: 8px 12px; border-radius: 8px; border: 1px solid #23233a; background: #16161f;
  color: #e8e8ed; font-size: 13px; min-width: 160px; outline: none; color-scheme: dark;
}
.tk-select:focus, .tk-date:focus { border-color: #6366f1; }
.tk-select:disabled { opacity: 0.45; cursor: not-allowed; }
.tk-date[hidden] { display: none; }

/* 我的排名 */
.tk-mine {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 20px;
  padding: 14px 20px; border-radius: 12px; border: 1px solid #23233a;
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(167,139,250,0.06));
}
.tk-mine-title { font-size: 13px; font-weight: 600; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.5px; }
.tk-mine-body { font-size: 14px; color: #e8e8ed; }
.tk-mine-body strong { font-size: 20px; font-weight: 800; color: #fbbf24; margin: 0 4px; }
.tk-mine-body .tk-mine-sub { color: #8b8b9e; font-size: 13px; margin-left: 8px; }
.tk-login-link { color: #a78bfa; text-decoration: underline; }

/* 榜单 8 列：# 昵称 国家 地区 调用 词元 输入 输出 */
.tk-table .rank-header, .tk-table .rank-row { grid-template-columns: 60px 2fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.tk-table .col-geo { color: #8b8b9e; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-table .col-calls, .tk-table .col-tokens { font-variant-numeric: tabular-nums; }
.tk-table .name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-table .rank-row.mine { background: rgba(251,191,36,0.06); box-shadow: inset 3px 0 0 #fbbf24; }

/* 加载更多 */
.tk-more { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.tk-meta { font-size: 13px; color: #5c5c72; }
.tk-more-btn { padding: 10px 28px; font-size: 14px; }
.tk-more-btn[hidden] { display: none; }
.tk-more-btn:disabled { opacity: 0.5; cursor: wait; }

@media (max-width: 768px) {
  .tk-table .rank-header, .tk-table .rank-row { grid-template-columns: 50px 1fr 90px 90px; }
  .tk-table .col-geo, .tk-table .col-io { display: none; }
  .tk-select, .tk-date { min-width: 0; flex: 1 1 120px; }
}