/* training-list.css — 关卡汇总列表页共享样式 (training.html / english.html / pinyin.html) */
:root {
  --bg-primary: #f4f6f8;
  --bg-light: #ffffff;
  --text-primary: #333333;
  --text-muted: #919191;
  --blue: #007bff;
  --mint: #5cb85c;
  --gold: #f0ad4e;
  --border: #e8ecf3;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.page-wrap { max-width: 1080px; margin: 0 auto; padding: 26px 20px 60px; }

/* 页头 */
.page-head { text-align: center; margin-bottom: 22px; }
.page-head h1 { font-size: 26px; font-weight: 600; }
.page-head .sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

/* 用户横幅 */
.user-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 14px auto 0; padding: 10px 18px; border-radius: 8px;
  font-size: 13px; width: fit-content;
}
.user-banner.guest { background: #fff8e6; color: #8c6d1f; border: 1px solid #ffe58f; }
.user-banner a { color: var(--blue); text-decoration: none; font-weight: 600; }

/* 分组 */
.group-section { margin-bottom: 28px; }
.group-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.group-title .gicon { font-size: 20px; }
.group-title .gcount { font-size: 12px; color: var(--text-muted); font-weight: 400; }

/* 关卡卡片网格 */
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.level-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; position: relative; transition: all .18s;
  display: flex; flex-direction: column; gap: 8px;
}
.level-card .idx { position: absolute; top: 12px; right: 14px; font-size: 12px; color: #c3cbd6; font-family: Consolas, monospace; }
.level-card .name { font-size: 15px; font-weight: 600; padding-right: 30px; }
.level-card .keys { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.key-chip {
  font-family: Consolas, Monaco, monospace; font-size: 12px; font-weight: 600;
  background: #eef4ff; color: #2b6fd6; border-radius: 4px; padding: 2px 7px;
}
.key-chip.more { background: #f2f3f5; color: #999; }
.level-card .meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.badge { font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 10px; font-weight: 600; }
.badge.passed { background: #e6f7ee; color: #1e9e5a; }
.badge.gen { background: #eef1f5; color: #888; }
.level-card .best { font-size: 12px; color: var(--mint); font-weight: 600; }
.level-card .ops { display: flex; gap: 8px; margin-top: 2px; }
.level-card .ops .btn {
  flex: 1; text-align: center; border: none; border-radius: 6px; padding: 8px 0;
  font-size: 13px; cursor: pointer; text-decoration: none; transition: all .15s;
}
.btn-play { background: var(--blue); color: #fff; }
.btn-play:hover { background: #0069d9; }
.btn-rank { background: #f2f3f5; color: #666; flex: 0 0 76px; }
.btn-rank:hover { background: #e6e8eb; }

/* 锁定态 */
.level-card.locked { opacity: .62; background: #fafbfc; }
.level-card.locked .btn-play { background: #b9c2ce; cursor: not-allowed; }
.level-card:not(.locked):hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,123,255,.10); border-color: rgba(0,123,255,.35); }

/* 排行榜弹窗表格 */
.rank-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rank-table th { text-align: left; font-size: 12px; color: #999; font-weight: 400; padding: 6px 8px; border-bottom: 1px solid #eef1f5; }
.rank-table td { padding: 10px 8px; border-bottom: 1px solid #f4f6f8; }
.rank-table tr:last-child td { border-bottom: none; }
.rank-table .rk { font-family: Consolas, monospace; font-weight: 700; color: #888; width: 46px; }
.rank-table tr.top1 .rk { color: #e8a93a; } .rank-table tr.top2 .rk { color: #a3aab5; } .rank-table tr.top3 .rk { color: #c9803c; }
.rank-table .who { display: flex; align-items: center; gap: 8px; }
.rank-table .who img { width: 26px; height: 26px; border-radius: 50%; }
.rank-table .who .em { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.rank-table .sc { font-family: Consolas, monospace; font-weight: 700; color: #007bff; }
.rank-empty { text-align: center; color: #999; padding: 30px 0; }
.my-rank-line { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e8ecf3; font-size: 13px; color: #555; text-align: center; }

/* 空态/加载 */
.loading, .empty { text-align: center; color: var(--text-muted); padding: 60px 0; font-size: 14px; }

@media (max-width: 600px) {
  .page-wrap { padding: 16px 12px 40px; }
  .level-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}