/* ==========================================================================
   名字列表页（/report/{accessToken}/names.html）
   付费报告 50 / 200 组候选的完整列表：工具条 + 分页器 + 报告页入口卡。
   名字卡本体复用 qiming-v2.css 的 .nmc* 规则，此处只补列表页外壳。
   ========================================================================== */

/* ---------- 报告页上的列表入口 ---------- */
.nml-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
  padding: 22px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}

.nml-entry[hidden] { display: none }

.nml-entry:hover {
  transform: translateY(-2px);
  border-color: var(--gutongjin);
  box-shadow: var(--shadow-md);
}

.nml-entry-copy { display: grid; gap: 6px; min-width: 0 }

.nml-entry-copy strong {
  font: 700 26px var(--font-serif);
  color: var(--zhuyin);
  letter-spacing: .04em;
}

.nml-entry-copy small {
  font: 19px var(--font-sans);
  color: var(--ink-muted);
}

.nml-entry .icon { width: 26px; height: 26px; flex: none; color: var(--zhuyin) }

/* ---------- Mock 支付确认按钮 ---------- */
/* 与 .qr-pay-btn 同宽同形，用澄青区分「创建订单」与「确认支付」两步。 */
.qr-pay-confirm {
  margin-top: 14px;
  background: linear-gradient(135deg, var(--chengqing-light), var(--chengqing));
  color: var(--xuanbai);
  text-decoration: none;
}

.qr-pay-confirm:hover { filter: brightness(1.08) }

/* ---------- 列表页工具条 ---------- */
.nml-bar {
  margin-top: 26px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 112px;
}

.nml-bar-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.nml-title { margin: 0; display: grid; gap: 6px }

.nml-title-main {
  font: 700 34px/1.3 var(--font-serif);
  color: var(--moxuan);
  letter-spacing: .06em;
}

.nml-title-sub {
  font: 20px var(--font-sans);
  color: var(--ink-muted);
}

.nml-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font: 500 20px var(--font-sans);
  color: var(--zhuyin);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color .18s ease;
}

.nml-back:hover { text-decoration-color: var(--zhuyin) }
.nml-back .icon { width: 20px; height: 20px }

.nml-controls {
  display: grid;
  gap: 18px;
  padding-top: 20px;
}

.nml-field {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
}

.nml-field-key {
  flex: none;
  width: 48px;
  font: 500 20px var(--font-sans);
  color: #4a433c;
}

.nml-chips { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0 }

.nml-chip {
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--xuanbai);
  color: var(--ink-muted);
  font: 500 19px var(--font-sans);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.nml-chip:hover { border-color: var(--gutongjin); color: var(--moxuan) }

.nml-chip.is-on {
  background: linear-gradient(135deg, var(--zhuyin-light), var(--zhuyin));
  border-color: var(--zhuyin);
  color: var(--xuanbai);
}

/* 五行筛选：单字圆章，与报告页五行配色呼应 */
.nml-chip-wx {
  width: 44px;
  padding: 8px 0;
  border-radius: 50%;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
}

.nml-field-search { align-items: center }

.nml-search {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--xuanbai);
  color: var(--moxuan);
  font: 20px var(--font-sans);
}

.nml-search:focus {
  outline: none;
  border-color: var(--zhuyin);
  background: var(--paper);
}

.nml-search::placeholder { color: var(--ink-muted); opacity: .7 }

.nml-count {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font: 20px var(--font-sans);
  color: var(--ink-muted);
}

.nml-reset {
  padding: 4px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--zhuyin);
  font: 500 18px var(--font-sans);
  cursor: pointer;
}

.nml-reset:hover { border-color: var(--zhuyin); background: rgba(183, 62, 62, .06) }

/* ---------- 分页器 ---------- */
.nml-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.nml-page-nums { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }

.nml-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  color: var(--chengqing);
  font: 500 20px var(--font-sans);
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s ease, color .18s ease, border-color .18s ease;
}

.nml-page:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--gutongjin);
  box-shadow: var(--shadow-sm);
}

.nml-page:disabled { opacity: .45; cursor: default }

.nml-page-step { padding: 11px 22px }
.nml-page-step .icon { width: 20px; height: 20px }

.nml-page-num {
  min-width: 46px;
  padding: 11px 0;
  font-family: var(--font-serif);
}

.nml-page-num.is-on {
  background: linear-gradient(135deg, var(--zhuyin-light), var(--zhuyin));
  border-color: var(--zhuyin);
  color: var(--xuanbai);
  font-weight: 700;
}

.nml-page-gap {
  padding: 0 4px;
  color: var(--ink-muted);
  font: 20px var(--font-sans);
}

/* ---------- 移动端 ---------- */
@media (max-width: 760px) {
  .nml-bar { padding: 20px 18px }

  .nml-title-main { font-size: 28px }
  .nml-title-sub { font-size: 18px }

  .nml-entry { padding: 18px 20px }
  .nml-entry-copy strong { font-size: 22px }
  .nml-entry-copy small { font-size: 17px }

  /* 窄屏改为纵向堆叠，标签独占一行，避免筛选项被挤成一列 */
  .nml-field { flex-direction: column; align-items: stretch; gap: 10px }
  .nml-field-key { width: auto }
  .nml-search { max-width: none }

  .nml-chip { font-size: 18px; padding: 7px 15px }
  .nml-chip-wx { width: 40px; padding: 7px 0 }

  .nml-page-step { padding: 10px 16px; font-size: 18px }
  .nml-page-num { min-width: 40px; padding: 10px 0; font-size: 18px }
}