/* ===== 17-wxpay-settings.css —— 设置中心版式 + 「选购 · 续期」模块（V3.95） =====
 *
 * 用户口径：一次性预付，月 / 季 / 年三档任选；到期后再次购买即可顺延授权时效；
 *           不自动续费、不代扣。
 * 版式口径（V3.93，用户明确要求）：
 *   · 整体左右平分两列（1fr / 1fr）；
 *   · 左列自上而下「身份与授权」→「选购 · 续期」（本组由 V3.91 的上排右侧移到左列下）；
 *   · 右列「安全与留痕」，与左列同排、跨左列两行；
 *   · 「身份与授权」组内的身份 / 授权时效两块改为上下堆叠（见 08-pipeline.css）；
 *   · 收款组标题「扫码购买」四字改为「选购」，卡片内容不变。
 * 卡片口径（V3.92 仍现行）：付款码在【上】、月 / 季 / 年三块在【下】，
 *           金额写在各块内部，点任一块即生成对应金额的付款码；无授权档位下拉。
 * V3.95：三块是任何状态都可点击的按钮（不再用 disabled 锁死未开通态），
 *         补齐 hover / focus-visible / active / 生成中四种反馈与块内 CTA 文案。
 *
 * 为什么布局仍在本文件：08-pipeline.css 里的 .settings-grid{grid-template-columns:1fr}
 * 是 V3.64 的单列基线，_settings-reorg-probe.js 仍在守它；这里用更高特异性的
 * #page-settings 选择器做两栏定位，不改基线。窄屏由本文件自己的媒体查询收回单列
 * （11-polish.css 的 .settings-grid 特异性低于本文件的覆盖，不能只靠它）。
 */

/* ---------- 左右平分：左列上下两组 / 右列一组 ---------- */
#page-settings .settings-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;align-items:start;
}
#page-settings .settings-col-identity{grid-column:1;grid-row:1;}
#page-settings .settings-col-pay{grid-column:1;grid-row:2;}
#page-settings .settings-col-security{grid-column:2;grid-row:1/span 2;}

/* 右栏只有半屏宽：操作日志五列按窄列重排，避免整表横向滚动。
   ≤1100px 收回单列后由本文件末尾的媒体查询恢复宽表列宽。 */
#page-settings .settings-col-security .grid-log{
  grid-template-columns:120px 84px 96px minmax(0,1fr) 68px;min-width:0;
}

/* ---------- 收款卡片 ---------- */
.pay-card{padding:16px;}
.pay-card .card-header{margin-bottom:12px;}
.pay-card .card-title{font-size:16px;}
.pay-card .card-link{font-size:12.5px;background:none;border:none;padding:0;}

/* ---------- ① 上方：付款码 ---------- */
/* 未生成时是明确的占位说明，不画一张看起来能扫的假码 */
.pay-qrbox{
  display:flex;align-items:center;justify-content:center;
  min-height:172px;padding:10px;
  border:1px dashed #D8DEE9;border-radius:10px;background:#FAFBFD;
}
.pay-qrbox.has-qr{border-style:solid;border-color:var(--border);background:#fff;}
.pay-qr-idle{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#9AA5B4;font:400 12.5px/1.5 var(--font-cn);text-align:center;
}
.pay-qr-idle svg{color:#C3A257;}
#payQr{max-width:100%;height:auto;image-rendering:pixelated;}
.pay-qr-tip{text-align:center;margin-top:9px;}
.pay-countdown{text-align:center;margin-top:3px;color:#A8821F;}

/* 出码后才出现：放弃当前码 / 演练支付。容器由 JS 切换 display，未出码时不占空白 */
.pay-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.pay-actions .btn-plain{
  flex:1 1 0;justify-content:center;height:38px;font-size:12.5px;padding:0 10px;
}

/* ---------- ② 下方：月 / 季 / 年三块【可点击按钮】，金额写在块内 ----------
   V3.95：三块不再出现 disabled（未开通 / 单机分发版也必须能点且点了有反馈）。
    hover / focus-visible / active 三级反馈让「这是按钮」在视觉与键盘上都成立。 */
.pay-cycles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;}
.pay-cycle{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:106px;padding:10px 4px;
  border:1px solid var(--border);border-radius:10px;background:#fff;
  cursor:pointer;text-align:center;
  transition:border-color .15s,background .15s,box-shadow .15s,transform .12s;
}
.pay-cycle-name{font:600 12.5px/1.3 var(--font-cn);color:var(--text-label);}
.pay-cycle-price{
  font:700 19px/1.15 var(--font-num);color:#A8821F;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pay-cycle-days{
  font:400 11px/1.3 var(--font-cn);color:var(--text-meta);white-space:nowrap;
  min-height:14px;   /* 未开通时天数为空也保持三行等高 */
}
.pay-cycle-cta{
  font:600 10.5px/1.3 var(--font-cn);color:#A8821F;
  white-space:nowrap;margin-top:4px;padding:2px 7px;border-radius:20px;
  background:var(--gold-tint);
}
.pay-cycle:hover:not(.is-busy){
  border-color:var(--gold);background:var(--gold-tint);
  box-shadow:0 3px 10px rgba(14,42,71,.09);transform:translateY(-1px);
}
.pay-cycle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.pay-cycle:active:not(.is-busy){transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(14,42,71,.14);}
.pay-cycle.on{
  border-color:var(--gold);background:var(--gold-tint);
  box-shadow:inset 0 0 0 1px var(--gold);
}
.pay-cycle.on .pay-cycle-name{color:#8A6D1F;}
.pay-cycle.on .pay-cycle-cta{color:#8A6D1F;}
.pay-cycle.is-busy{cursor:progress;opacity:.72;}
/* 未开通态仍是按钮，但动作标签降为中性灰，不冒充「可付款」 */
.pay-cycle.is-off .pay-cycle-cta{color:var(--text-meta);background:#F2F4F8;}
.pay-cycle-hint{text-align:center;margin-top:8px;}

/* ---------- 口径条与卡脚 ---------- */
.pay-terms{margin-top:12px;border-top:1px solid var(--border);padding-top:10px;}
.pay-term{
  display:flex;align-items:center;gap:8px;margin-bottom:3px;
  font:400 12px/1.6 var(--font-cn);color:var(--text-label);
}
.pay-term i{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:17px;height:17px;border-radius:50%;background:var(--gold-tint);color:#8A6D1F;
  font:700 10px/1 var(--font-num);font-style:normal;
}
.pay-term-note{font:400 11.5px/1.6 var(--font-cn);color:var(--text-meta);margin-top:4px;}
.pay-foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
  font:400 12px/1.5 var(--font-cn);color:var(--text-meta);
}

/* ---------- 窄屏回退（≤1100px）：三组纵向堆叠、日志宽表恢复宽列 ---------- */
@media (max-width:1100px){
  #page-settings .settings-grid{grid-template-columns:1fr;}
  #page-settings .settings-col-identity,
  #page-settings .settings-col-pay,
  #page-settings .settings-col-security{grid-column:1;grid-row:auto;}
  #page-settings .settings-col-security .grid-log{
    grid-template-columns:140px 110px 120px minmax(0,1fr) 90px;min-width:760px;
  }
  .pay-cycles{grid-template-columns:repeat(3,minmax(0,1fr));}
}