/* training-list.css — 关卡汇总列表页共享样式 (training.html / english.html / pinyin.html / tangshi.html / jingdian.html / ciyu.html / number.html / computer-* / wubi.html / shuangpin.html / ladder.html)
   v3 · 新主题（2026-09, 与首页/下载中心同源: 靛蓝+青绿+霓虹渐变） */
:root {
  --bg-primary: #f5f7fb;   /* 浅雾底 */
  --bg-light: #FFFFFF;
  --text-primary: #1e2233; /* 冷墨 */
  --text-muted: #5b6478;
  --blue: linear-gradient(135deg, #6366f1, #14b8a6); /* 靛青渐变(行动色) */
  --mint: #4f46e5;
  --teal: #14b8a6;
  --indigo: #6366f1;
  --gold: #f59e0b;         /* 琥珀 */
  --border: #e9ecf3;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: "Noto Sans SC","PingFang SC",-apple-system, BlinkMacSystemFont, "Segoe UI", "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: 28px; font-weight: 900; letter-spacing: -.5px; }
.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: 999px;
  font-size: 13px; width: fit-content;
}
.user-banner.guest { background: rgba(99,102,241,.09); color: #4f46e5; border: 1.5px solid rgba(99,102,241,.3); }
.user-banner a { color: var(--indigo); text-decoration: none; font-weight: 800; }

/* 分组 */
.group-section { margin-bottom: 28px; }
.group-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.group-title .gicon { font-size: 21px; }
.group-title .gcount { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.group-title::after { content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--border), transparent); }

/* 关卡卡片网格 */
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.level-card {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 12px 28px -14px rgba(70,80,140,.18);
  padding: 16px; position: relative; transition: all .18s;
  display: flex; flex-direction: column; gap: 8px;
}
.level-card::before { content:""; position:absolute; top:0; left:14px; right:14px; height:2px; border-radius:0 0 4px 4px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.45), transparent); }
.level-card .idx { position: absolute; top: 12px; right: 14px; font-size: 12px; color: #b8bfd4; font-family: Consolas, monospace; }
.level-card .name { font-size: 15px; font-weight: 800; 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: 700;
  background: rgba(99,102,241,.09); color: #4f46e5; border-radius: 6px; padding: 2px 7px;
}
.key-chip.more { background: var(--bg-primary); color: #8d95ad; }
.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: 4px 9px; border-radius: 999px; font-weight: 800; }
.badge.passed { background: rgba(20,184,166,.1); color: #0f9d8f; }
.badge.gen { background: rgba(99,102,241,.08); color: #4f46e5; }
.level-card .best { font-size: 12px; color: #0f9d8f; font-weight: 800; }
.level-card .ops { display: flex; gap: 8px; margin-top: 2px; }
.level-card .ops .btn {
  flex: 1; text-align: center; border: none; border-radius: 999px; padding: 9px 0;
  font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none;
  transition: transform .12s, box-shadow .12s, filter .14s;
}
/* 开始按钮: 靛青渐变 */
.btn-play { background: linear-gradient(135deg, var(--indigo), var(--teal)); color: #fff; box-shadow: 0 6px 16px -6px rgba(99,102,241,.5); }
.btn-play:hover { filter: brightness(1.08); }
.btn-play:active { transform: translateY(2px); box-shadow: none; }
.btn-rank { background: var(--bg-primary); color: #5b6478; flex: 0 0 76px; border: 1.5px solid var(--border); }
.btn-rank:hover { background: rgba(99,102,241,.07); border-color: rgba(99,102,241,.3); color: #4f46e5; }

/* 锁定态 */
.level-card.locked { opacity: .62; background: #fbfcfe; }
.level-card.locked .btn-play { background: #c3cde0; box-shadow: none; cursor: not-allowed; }
.level-card:not(.locked):hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -14px rgba(70,80,140,.3);
  border-color: rgba(99,102,241,.4);
}

/* 排行榜弹窗表格 */
.rank-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rank-table th { text-align: left; font-size: 12px; color: #8d95ad; font-weight: 400; padding: 6px 8px; border-bottom: 1px solid var(--bg-primary); }
.rank-table td { padding: 10px 8px; border-bottom: 1px solid var(--bg-primary); }
.rank-table tr:last-child td { border-bottom: none; }
.rank-table .rk { font-family: Consolas, monospace; font-weight: 700; color: #8d95ad; width: 46px; }
.rank-table tr.top1 .rk { color: #f59e0b; } .rank-table tr.top2 .rk { color: #8d95ad; } .rank-table tr.top3 .rk { color: #c97a2e; }
.rank-table .who { display: flex; align-items: center; gap: 8px; }
.rank-table .who img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; }
.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: 800; color: #0f9d8f; }
.rank-empty { text-align: center; color: #8d95ad; padding: 30px 0; }
.my-rank-line { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13px; color: #5b6478; 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)); }
}

/* 分组锚点(#grp-N): 深链定位时留出吸顶导航空间并高亮 */
.group-section { scroll-margin-top: 76px; }
.group-section:target > .group-title { color: var(--mint, #14b8a6); }