/* ============================================================
   鸣潮抽卡记录查询 · 样式
   ============================================================

   配色：暖棕深色渐变主题。
   色值来自参考界面（鸣潮工坊）的逐像素实测，不是估计值：
     背景色带  #181008 / #201810 / #281810 / #302018 / #504038
     金色      #ffcc65（主）/ #f0b040 / #fbbd08
     条形三色  红 #e54d42  黄 #fbbd08  绿 #39b54a
     「歪」红   #da3737
     分隔亮线  #6f6157（1px，参考界面用亮线而非阴影）
   参考界面几乎无卡片边框，靠留白和背景明度差分区。

   结构（自上而下，结论优先）：
     顶部结论卡 → 五星图鉴墙 → 卡池 tab → 池内柱状图 → 可折叠全记录
   只有一套深色主题，不跟随系统浅色，避免两套配色都要维护。
   ============================================================ */

:root {
  --bg: #201810;
  --bg-deep: #181008;
  --surface: #281e18;
  --surface-lit: #302018;
  --surface-hi: #382a20;

  --fg: #f0f0f0;
  --muted: #b0a79f;
  --faint: #8a7f75;
  --border: #3a2c22;
  --hairline: #6f6157;

  --gold: #ffcc65;
  --gold-dim: #f0b040;
  --accent: #39b54a;

  /* 星级色 */
  --q5: #ffcc65;
  --q5-bg: rgba(255, 204, 101, 0.1);
  --q4: #c08cf0;
  --q4-bg: rgba(192, 140, 240, 0.1);
  --q3: #9a8f85;

  /* 条形/状态三色（实测值） */
  --bar-red: #e54d42;
  --bar-red-lit: #e75b51;
  --bar-yellow: #fbbd08;
  --bar-yellow-lit: #fbc21b;
  --bar-green: #39b54a;
  --bar-green-lit: #49bb58;

  --danger: #e54d42;
  --danger-bg: rgba(229, 77, 66, 0.12);
  --ok-bg: rgba(57, 181, 74, 0.12);
  --skew: #da3737;

  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Source Han Sans SC", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --radius: 6px;
  --radius-lg: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* 参考界面是整页连续的暖棕垂直渐变，顶部深、中部偏亮、底部再变深 */
  background: linear-gradient(180deg, #1a130c 0%, #281e18 30%, #231712 65%, #34231a 100%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  /* 数字等宽对齐，表格里数字才不会跳 */
  font-variant-numeric: tabular-nums;
}

/* ============ 顶栏 ============ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(24, 16, 8, 0.82);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

/* 小圆点：服务在线的视觉暗示 */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 204, 101, 0.7);
  flex: none;
}

.tag {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

.doclink {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.doclink:hover { color: var(--gold); }

/* ============ 布局 ============ */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.panel-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ============ 表单 ============ */

#form {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field { display: flex; flex-direction: column; gap: 6px; }

.label { font-size: 12px; color: var(--muted); }

input[type="password"],
input[type="tel"],
input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

input[type="password"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 3px rgba(255, 204, 101, 0.14);
}

input::placeholder { color: var(--faint); }

/* ============ 遮挡输入框（替代 type=password） ============
   type=password 会干扰中文输入法，所以改用 text + text-security。
   视觉上一样是圆点，但输入法照常工作。 */

.pw-wrap { position: relative; display: block; }
/* 右侧留出"显示"按钮的位置。
   登录页需要左右对称的 padding，由 login.html 里更具体的
   `.gate-card input` 规则覆盖这一条。 */
.pw-wrap input { padding-right: 54px; }

input.masked {
  -webkit-text-security: disc;
  text-security: disc;
}
input.shown {
  -webkit-text-security: none;
  text-security: none;
}

.pw-eye {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
.pw-eye:hover { color: var(--gold); background: var(--surface-lit); }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.check input { cursor: pointer; margin: 0; accent-color: var(--gold-dim); }

button.primary {
  padding: 10px 22px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #2a1c0a;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter 0.12s;
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

.linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--gold);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============ 帮助说明 ============ */

.help {
  padding: 14px 16px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.help ol { margin: 0 0 12px; padding-left: 20px; }
.help li { margin-bottom: 7px; }

/* 步骤说明：群友照着一步步做，行距放宽一点更好读 */
.help .steps li { line-height: 1.65; }

/* 步骤里的补充提示，单独一行、弱化显示 */
.help .note {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 1px;
}
.help .note.calm {
  margin: 8px 0 0;
  padding: 8px 11px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.help .warn {
  margin: 0;
  padding: 9px 11px;
  background: var(--danger-bg);
  border: 1px solid rgba(229, 77, 66, 0.35);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ============ 状态行 ============ */

.status {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 13px;
  min-height: 0;
}
.status:empty { padding: 0; }
.status.err { color: var(--danger); }
.status.ok { color: var(--bar-green); }
.status.busy { color: var(--gold); }

/* ============================================================
   结论卡：参考界面顶部那一整块
   ============================================================ */

.verdict {
  position: relative;
  background: linear-gradient(165deg, #33251a 0%, #281e18 55%, #231710 100%);
  border: 1px solid var(--border);
  border-top: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  overflow: hidden;
}

/* 右上角一团柔光，纯装饰 */
.verdict::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 204, 101, 0.13), transparent 70%);
  pointer-events: none;
}

.verdict-lead {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--muted);
}

/* 「欧气满满大欧皇」那行大字 */
.verdict-title {
  margin: 0;
  font-size: clamp(26px, 6.4vw, 38px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  background: linear-gradient(92deg, #ffd97a, #f0a830);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 样本不足时不用金渐变 —— 免得「没数据」看起来像好结果 */
.verdict-title.plain {
  background: none;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  font-size: 22px;
  font-weight: 700;
}

.verdict-sub {
  margin: 9px 0 0;
  font-size: 12.5px;
  color: var(--faint);
}

/* 「总抽卡数 1311 抽 / 平均出金 45.2 抽」 */
.verdict-lines {
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vline { font-size: 14px; color: var(--muted); }
.vline b {
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 700;
  color: var(--gold);
  margin: 0 3px;
  letter-spacing: -0.01em;
}
.vline i { font-style: normal; font-size: 12px; color: var(--muted); }

/* ---- 成就标签胶囊 ---- */

.vtags {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vtag {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface-lit);
  color: var(--muted);
}
.vtag.good {
  color: var(--gold);
  border-color: rgba(255, 204, 101, 0.4);
  background: var(--q5-bg);
}
.vtag.bad {
  color: var(--danger);
  border-color: rgba(229, 77, 66, 0.4);
  background: var(--danger-bg);
}

/* ---- 派生数字条 ---- */

.vstats {
  margin: 17px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 14px;
}

.vstat .n {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.vstat .n small {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}
.vstat .k {
  margin-top: 3px;
  font-size: 12px;
  color: var(--faint);
}

/* 数据不足的格子弱化，不假装有值 */
.vstat.na .n { color: var(--faint); font-size: 19px; }

.ov-warn {
  margin: 14px 0 0;
  padding: 9px 12px;
  background: var(--danger-bg);
  border: 1px solid rgba(229, 77, 66, 0.35);
  color: var(--fg);
  border-radius: var(--radius);
  font-size: 12.5px;
}

/* ============================================================
   五星图鉴墙
   ============================================================ */

.collection {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.coll-head {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 14px;
}
.coll-head b {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 16px;
  margin: 0 3px;
}

.coll-group + .coll-group { margin-top: 17px; }

.coll-sub {
  font-size: 12px;
  color: var(--faint);
  letter-spacing: 0.04em;
  margin-bottom: 9px;
}

.coll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 9px;
}

/* 单个头像格 */
.av {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  /* 参考界面的头像底是暖棕渐变 */
  background: linear-gradient(165deg, #6b5136, #3a2a1c);
}

/* 限定五星描金边，常驻用冷灰底 —— 一眼分出稀有度 */
.av.limited {
  border-color: rgba(255, 204, 101, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 204, 101, 0.22);
}
.av.standard { background: linear-gradient(165deg, #4a4640, #2b2825); }

.av img {
  width: 100%;
  height: 100%;
  /* 角色是 128x171 竖版立绘，从顶部裁才能框住脸 */
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* 武器是方图，整张放进去别裁 */
.av.weapon img {
  object-fit: contain;
  object-position: center;
  padding: 3px;
}

/* 没有图标时的兜底：首字方块 */
.av-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #ffe4ae;
}

/* 右上角重复次数（只在 ≥2 时显示） */
.av-count {
  position: absolute;
  top: 2px;
  right: 3px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(24, 16, 8, 0.85);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.45;
}

/* 底部名字条 */
.av-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 3px 2px;
  background: linear-gradient(transparent, rgba(20, 13, 6, 0.94));
  color: #f4ecdf;
  font-size: 10.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coll-empty { color: var(--faint); font-size: 12.5px; margin: 0; }

/* ============================================================
   卡池 tab
   ============================================================ */

.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.tab {
  flex: none;
  padding: 8px 15px;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.tab:hover:not(.on) { color: var(--fg); border-color: var(--hairline); }
.tab.on {
  color: #2a1c0a;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  border-color: transparent;
  font-weight: 700;
}
.tab .tn {
  font-family: var(--font-mono);
  font-size: 11.5px;
  opacity: 0.72;
  margin-left: 5px;
}
/* 空池/失败池的 tab 压暗，但仍可点开看原因 */
.tab.dim { opacity: 0.5; }

/* 排行榜把 .tabs 放在 .panel 里（记录页是直接放在 .wrap 里的），
   所以这里补内边距，免得胶囊贴着面板边框。
   .panel 自带 overflow:hidden，配上 .tabs 的 overflow-x:auto，
   窄屏上选项卡是**在面板内横向滚动**，不会把整页撑宽。 */
.panel > .tabs { padding: 12px 16px; }

/* ============ 统计卡片 ============ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.stat {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.stat .k {
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.stat .v {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-family: var(--font-mono);
}

.stat .v small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 3px;
  font-family: var(--font-body);
}

/* 五星相关的卡片用金色点出来 */
.stat.hl .v { color: var(--q5); }

/* ============ 表格 ============ */

.tablewrap { overflow-x: auto; }

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tbl th {
  text-align: left;
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--surface);
}

/* 细线分隔，无斑马纹 */
.tbl td {
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-lit); }

.tbl .idx { color: var(--faint); font-family: var(--font-mono); font-size: 12px; width: 1%; }
.tbl .num { text-align: right; font-family: var(--font-mono); }
.tbl .time { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }

/* 原神总览：群友名字这一列稍微突出，面板取不到的行整行压暗。
   压暗而不是隐藏 —— 那个人确实绑了 UID，只是面板没公开，
   把他从表里抹掉反而会让人以为没绑。 */
.tbl .who { font-weight: 600; }
.tbl tr.dim td { color: var(--faint); }

/* 五星行整行加浅金底，扫一眼就能找到 */
.tbl tr.r5 { background: var(--q5-bg); }
.tbl tr.r5:hover { background: rgba(255, 204, 101, 0.16); }
.tbl tr.r5 .name { font-weight: 600; color: var(--q5); }

.tbl tr.r4 .name { color: var(--q4); }

/* 记录表里的「歪」小标 */
.tbl .off-tag {
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--danger-bg);
  border: 1px solid rgba(229, 77, 66, 0.45);
  color: var(--skew);
  font-size: 10.5px;
  font-weight: 700;
}

/* 星级徽章 */
.q {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
}
.q.q5 { background: var(--q5-bg); color: var(--q5); }
.q.q4 { background: var(--q4-bg); color: var(--q4); }
.q.q3 { color: var(--q3); }

/* ============ 筛选 chip ============ */

.filters { display: flex; gap: 6px; }

.chip {
  padding: 3px 11px;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
}
.chip:hover { color: var(--fg); }
.chip.on {
  background: var(--q5-bg);
  color: var(--gold);
  border-color: rgba(255, 204, 101, 0.45);
  font-weight: 600;
}

/* ============================================================
   分池面板
   ============================================================ */

.poolgrid { display: flex; flex-direction: column; gap: 16px; }

.pool {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pool.empty,
.pool.bad { opacity: 0.85; }

.pool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-lit);
}

.pool-head h2 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
}

.badge {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--muted);
  background: var(--surface-hi);
  border: 1px solid var(--border);
}
.badge.err {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: rgba(229, 77, 66, 0.4);
}

.pool-empty,
.pool-note {
  margin: 0;
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--faint);
}

/* ---- 池内统计 ---- */

.pool-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: 0;
  background: var(--border);
}

.pool-stats .stat {
  border: none;
  border-radius: 0;
  background: var(--surface);
  padding: 11px 14px;
}

.pool-stats .v { font-size: 19px; }

/* ---- 当前垫抽状态 ----
   只用文字，不做进度条底槽：一个池里出现两种条形语义会互相干扰，
   条形留给下面的五星柱状图。 */

.pity-now {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}

.pity-now b {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}
.pity-now .sep { color: var(--faint); }
.pity-now .lim { margin-left: auto; font-size: 11.5px; color: var(--faint); }

/* 接近保底时把数字点红/黄 */
.pity-now.mid b { color: var(--bar-yellow); }
.pity-now.near b { color: var(--bar-red); }

/* ============================================================
   五星垫抽柱状图
   条形宽度 = 垫抽数 / 该池保底上限（满宽 = 保底），和参考界面一致。
   没有未填充底槽 —— 条形右边直接是背景。
   ============================================================ */

.five-wrap { padding: 14px 16px 16px; border-top: 1px solid var(--border); }

.sub-head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 12px;
}
.sub-head .muted { font-weight: 400; letter-spacing: 0; }

.five-list { list-style: none; margin: 0; padding: 0; }

/* 一行 = 头像 + 名字 + 条形 + 歪标记 */
.five {
  display: grid;
  grid-template-columns: 34px 92px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.five:last-child { margin-bottom: 0; }

/* 行内小头像 */
.five-av {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, #6b5136, #3a2a1c);
  flex: none;
}
.five-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.five-av.weapon img { object-fit: contain; padding: 2px; }
.five-av .av-fallback { font-size: 14px; }
.five-av.standard { background: linear-gradient(165deg, #4a4640, #2b2825); }

.five-name {
  font-size: 13px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 常驻五星的名字弱化一点，限定的保持亮色 */
.five-name.std { color: var(--muted); }

/* 条形本体 */
.bar {
  position: relative;
  height: 26px;
  display: flex;
  align-items: center;
  min-width: 0;
}

.bar-fill {
  height: 26px;
  min-width: 34px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  box-sizing: border-box;
  /* 45° 斜条纹：两种同色系明暗交替，周期 24px */
  background-image: repeating-linear-gradient(
    45deg,
    var(--c-lit) 0 12px,
    var(--c-base) 12px 24px
  );
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  transition: width 0.35s ease;
}

/* 三色阈值 */
.bar-fill.g { --c-base: var(--bar-green); --c-lit: var(--bar-green-lit); }
.bar-fill.y { --c-base: var(--bar-yellow); --c-lit: var(--bar-yellow-lit); }
.bar-fill.r { --c-base: var(--bar-red); --c-lit: var(--bar-red-lit); }

.bar-num {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
/* 黄条上白字看不清，改深色 */
.bar-fill.y .bar-num { color: #4a3600; text-shadow: none; }

/* 「歪」标记：限定池里抽到常驻 */
.skew-mark {
  flex: none;
  margin-left: 7px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1.5px solid var(--skew);
  color: var(--skew);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 印章感 */
  transform: rotate(-12deg);
}

.five-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  grid-column: 2 / -1;
  margin-top: -9px;
}

/* 图例 */
.legend {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 13px;
  font-size: 11.5px;
  color: var(--faint);
}
.legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}
.legend .lc { background: var(--bar-green); }
.legend .lm { background: var(--bar-yellow); }
.legend .lh { background: var(--bar-red); }
.legend .ls {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--skew);
  background: none;
}

/* ---- 可折叠记录表 ---- */

.rec { border-top: 1px solid var(--border); }

.rec > summary {
  padding: 11px 16px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.rec > summary:hover { color: var(--gold); background: var(--surface-lit); }
.rec[open] > summary { border-bottom: 1px solid var(--border); }

.rec .filters { padding: 10px 16px 0; }
.rec .tablewrap { max-height: 420px; overflow-y: auto; }

.muted { color: var(--muted); font-size: 12.5px; }
.small { font-size: 12px; }

.recfoot { margin: 0; padding: 10px 16px; color: var(--faint); font-size: 12px; }
.recfoot:empty { display: none; }

.foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 20px 32px;
  color: var(--faint);
  font-size: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.foot .sep { opacity: 0.5; }

/* ============ 账号页面共用外壳（登录 / 注册 / 找回） ============
   login.html / register.html / recover.html 三页共用这一套，
   所以它在 style.css 里只有一份 —— 早先 .gate 写在 login.html 的
   <style> 里，复制成三份的话改一次配色就会漏两处。 */

.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gate-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}

.gate-card h1 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.gate-card .sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.gate-form { display: flex; flex-direction: column; gap: 13px; }

/* 账号页的输入框是普通左对齐文本框：多字段表单里居中文字很难读。
   口令框仍然用 .masked（text-security）而不是 type=password，
   原因见上面「遮挡输入框」那一节：type=password 会干扰中文输入法。 */
.gate-form input { font-family: var(--font-body); font-size: 14px; }

/* 排除 .pw-eye：否则"显示"按钮会继承 width:100% 把输入框撑满 */
.gate-card button:not(.pw-eye) {
  width: 100%;
  padding: 11px;
  font-size: 14px;
}

.gate-msg { margin: 0; font-size: 13px; min-height: 18px; line-height: 1.6; }
.gate-msg.err { color: var(--danger); }
.gate-msg.ok { color: var(--bar-green); }

/* 字段下面的一行小字说明（为什么要手机号、口令多长之类） */
.gate-hint {
  margin: -5px 0 0;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.6;
}

/* 必须让用户看见的坦白话（找回页"没有短信验证码"就用它）。
   用 danger 底色是有意的：这不是装饰性提示，是安全边界。 */
.gate-warn {
  margin: 0 0 4px;
  padding: 10px 12px;
  background: var(--danger-bg);
  border: 1px solid rgba(229, 77, 66, 0.45);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.7;
}
.gate-warn b { color: var(--danger); }

.gate-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  font-size: 12.5px;
}
.gate-links a { color: var(--muted); text-decoration: none; }
.gate-links a:hover { color: var(--gold); }

.gate-foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 12px;
  line-height: 1.7;
}

/* ============ 顶栏里的账号区（记录页） ============ */

.acctbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
  /* flex 项默认 min-width:auto，会被内容的最小宽度撑住。用户名不限字符、
     可以长到 32 位且不含空格，没有这一行手机上会把顶栏顶出横向滚动条。
     .brand 早就因为同样的原因加了 min-width:0。 */
  min-width: 0;
}
.acctbar .who {
  color: var(--fg);
  font-weight: 600;
  /* 32 位不带空格的用户名没有换行点，必须允许任意位置断行 */
  overflow-wrap: anywhere;
  min-width: 0;
}
.acctbar .who.anon { color: var(--faint); font-weight: 400; }
.acctbar a, .acctbar .linkbtn { color: var(--muted); text-decoration: none; font-size: 12.5px; }
.acctbar a:hover, .acctbar .linkbtn:hover { color: var(--gold); }

/* 已绑定的游戏账号列表（记录页的一小块） */
.bindlist { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; margin: 0; list-style: none; }
.bindlist li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.bindlist .bname { color: var(--fg); font-weight: 600; }
.bindlist .bmeta { color: var(--faint); font-size: 12px; }
.bindempty { margin: 0; padding: 14px 16px; color: var(--faint); font-size: 12.5px; line-height: 1.7; }

/* ============ 排行榜 ============ */

.lb-note { margin: 0; padding: 12px 16px; color: var(--faint); font-size: 12px; line-height: 1.7; }
.lb-note:empty { display: none; }

.lb-list { list-style: none; margin: 0; padding: 0; }

.lbrow {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
.lbrow:last-child { border-bottom: none; }
.lbrow:hover { background: var(--surface-lit); }

.lbrank {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.lbrow.top1 .lbrank { color: var(--gold); }
.lbrow.top2 .lbrank, .lbrow.top3 .lbrank { color: var(--gold-dim); }
/* 不合格条目没有名次：显示破折号，绝不显示 0 或者一个假名次 */
.lbrank.none { color: var(--faint); font-size: 13px; font-weight: 400; }

.lbwho { min-width: 0; }
.lbname {
  display: block;
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.lbmeta {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lbval {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--q5);
  text-align: right;
  white-space: nowrap;
}
.lbval small { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.lbval .tier { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--muted); }

/* 不合格：整行压暗，值那一格换成原因标签。
   服务端已经把它们排在合格条目后面，前端**不要**再排序。 */
.lbrow.unq { opacity: 0.72; background: var(--bg-deep); }
.lbrow.unq .lbname { color: var(--muted); font-weight: 400; }
.lbwhy {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--faint);
  font-size: 11.5px;
  /* 这里装的是"该游戏还没接入"这类短句，不是数字。窄屏上让它换行，
     好过为了保持一行把名字列挤掉。 */
  overflow-wrap: anywhere;
}
.lbwhy.na { border-color: rgba(229, 77, 66, 0.35); color: var(--danger); }

.lb-empty { margin: 0; padding: 22px 16px; color: var(--faint); font-size: 13px; text-align: center; }

/* ============ 移动端 ============ */

@media (max-width: 560px) {
  .wrap { padding: 14px; }
  .gate { padding: 14px; align-items: flex-start; padding-top: 28px; }
  .gate-card { padding: 20px 16px; }
  .lbrow { grid-template-columns: 30px 1fr auto; gap: 9px; padding: 10px 12px; }
  .lbval { font-size: 15px; }
  .lbrank { font-size: 14px; }
  .bindlist, .bindempty, .lb-note { padding-left: 12px; padding-right: 12px; }
  .verdict { padding: 17px 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat .v { font-size: 18px; }
  .row { flex-direction: column; align-items: stretch; }
  button.primary { width: 100%; }

  .pool-stats { grid-template-columns: repeat(2, 1fr); }
  .vstats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .vstat .n { font-size: 22px; }
  .vline b { font-size: 20px; }

  .coll-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 7px; }
  .av-name { font-size: 9.5px; }

  /* 手机上头像收窄、名字列压缩，给条形留出长度 */
  .five { grid-template-columns: 28px 66px 1fr; gap: 7px; }
  .five-av { width: 28px; height: 28px; }
  .five-name { font-size: 12px; }
  .bar, .bar-fill { height: 24px; }
  .bar-num { font-size: 12px; }
}

/* 尊重「减少动画」偏好 */
@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
}

/* 主题本身就是深色暖棕，不需要 prefers-color-scheme 覆盖。 */

/* ============ 抽卡详情页（detail.html） ============
   前缀用 .gr*（gacha record），不用 .rec* —— .rec 在上面已经被
   折叠面板占用了，复用会串样式。 */

.grs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gr {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.gr:last-child { border-bottom: none; }

/* min-width:0 是必需的：没有它，长角色名会把右侧的垫抽数挤出屏幕。
   顶栏就踩过这个坑。 */
.grmain { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.grname {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.grmeta {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.grside {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.grpity {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--gold);
}

.groff {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--q4);
  color: var(--q4);
}

.grq { font-size: 12px; color: var(--muted); }

/* 品质配色：五星和四星要一眼看出来 */
.gr.q5 .grname { color: var(--q5); }
.gr.q5 { background: linear-gradient(90deg, rgba(255, 204, 101, 0.09), transparent 70%); }
.gr.q4 .grname { color: var(--q4); }
.gr.q3 .grname { color: var(--q3); }

/* 排行榜每一行现在是 <a>，要压掉链接默认样式并给出可点的反馈 */
a.lbrow {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.lbrow:hover { background: var(--surface-lit); }
a.lbrow:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.ghost:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 480px) {
  .gr { padding: 9px 12px; }
  .grname { font-size: 14px; }
  .grmeta { font-size: 11px; }
}