/* ============================================================
 * plan.css —— 账号分级（Freemium）前端样式层
 * 2026-10-05 建立。类名一律 pl- 前缀，不复用主站 class（主站多为
 * #page-xxx .cls 容器限定，跨页零生效）。
 * 设计语言沿用 Galaxy / uiverse.io：cubic-bezier 缓动、ripple 填充、
 * scale 按压；颜色全部走 design-tokens.css 变量，不写死色值。
 * ============================================================ */

/* ---------- 一、顶部额度徽标 ---------- */
.pl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6, 6px);
  height: 28px;
  padding: 0 var(--s-10, 10px);
  border-radius: 999px;
  border: 1px solid var(--border-default, #E8E2E4);
  background: var(--bg-surface, #fff);
  color: var(--text-secondary, #5B5457);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.22, .61, .36, 1),
              box-shadow .18s cubic-bezier(.22, .61, .36, 1),
              border-color .18s cubic-bezier(.22, .61, .36, 1);
}
.pl-badge:hover {
  border-color: var(--xhs-red-ring, rgba(255, 36, 66, .18));
  box-shadow: 0 2px 10px rgba(31, 27, 29, .06);
}
.pl-badge:active { transform: scale(.97); }
.pl-badge .pl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success, #1E9E6A);
  flex: none;
}
.pl-badge[data-low="1"] .pl-dot { background: var(--warning, #D98E0B); }
.pl-badge[data-low="2"] .pl-dot { background: var(--danger, #E01230); }
.pl-badge[data-plan="pro"] {
  border-color: var(--xhs-red-ring, rgba(255, 36, 66, .18));
  color: var(--xhs-red-text, #D81B37);
  background: var(--xhs-red-tint, rgba(255, 36, 66, .08));
}

/* ---------- 二、额度条（页面内嵌） ---------- */
.pl-quota {
  display: flex;
  align-items: center;
  gap: var(--s-8, 8px);
  font-size: 12px;
  color: var(--text-tertiary, #6E6869);
}
.pl-quota-track {
  position: relative;
  flex: 1;
  min-width: 60px;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-warm, #F5F3F4);
  overflow: hidden;
}
.pl-quota-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--success, #1E9E6A);
  transition: width .42s cubic-bezier(.22, .61, .36, 1);
}
.pl-quota[data-low="1"] .pl-quota-fill { background: var(--warning, #D98E0B); }
.pl-quota[data-low="2"] .pl-quota-fill { background: var(--danger, #E01230); }
.pl-quota-num { font-variant-numeric: tabular-nums; color: var(--text-secondary, #5B5457); font-weight: 600; }

/* ---------- 三、Pro 锁标 ---------- */
.pl-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--xhs-red-tint, rgba(255, 36, 66, .08));
  color: var(--xhs-red-text, #D81B37);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

/* ---------- 四、升级弹窗 ---------- */
.pl-mask {
  position: fixed;
  inset: 0;
  z-index: var(--z-critical, 12000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-16, 16px);
  background: rgba(31, 27, 29, .42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .22s cubic-bezier(.22, .61, .36, 1);
}
.pl-mask[data-open="1"] { opacity: 1; }

.pl-modal {
  position: relative;
  width: min(420px, 100%);
  max-height: 86vh;
  overflow: auto;
  padding: var(--s-24, 24px);
  border-radius: 20px;
  background: var(--bg-surface, #fff);
  box-shadow: 0 24px 64px rgba(31, 27, 29, .22);
  transform: translateY(14px) scale(.97);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.pl-mask[data-open="1"] .pl-modal { transform: translateY(0) scale(1); }

.pl-modal h3 {
  margin: 0 0 var(--s-6, 6px);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary, #1F1B1D);
}
.pl-modal .pl-sub {
  margin: 0 0 var(--s-16, 16px);
  font-size: 13px;
  line-height: 1.62;
  color: var(--text-secondary, #5B5457);
}
.pl-modal .pl-usage {
  display: flex;
  align-items: center;
  gap: var(--s-10, 10px);
  margin-bottom: var(--s-16, 16px);
  padding: var(--s-12, 12px);
  border-radius: 12px;
  background: var(--bg-subtle, #FBF9FA);
  font-size: 12px;
  color: var(--text-secondary, #5B5457);
}
.pl-modal .pl-usage .pl-quota { flex: 1; }

.pl-perks {
  margin: 0 0 var(--s-20, 20px);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-8, 8px);
}
.pl-perks li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-8, 8px);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #5B5457);
}
.pl-perks li i { color: var(--success-text, #137A52); flex: none; margin-top: 2px; }

.pl-actions { display: flex; gap: var(--s-10, 10px); }
.pl-btn {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 44px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.22, .61, .36, 1),
              box-shadow .16s cubic-bezier(.22, .61, .36, 1),
              background .16s cubic-bezier(.22, .61, .36, 1);
}
.pl-btn:active { transform: scale(.97); }
.pl-btn-primary {
  background: var(--xhs-red-solid, #E01230);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 36, 66, .26);
}
.pl-btn-primary:hover { background: var(--xhs-red-hover, #E01230); }
.pl-btn-ghost {
  background: var(--bg-subtle, #FBF9FA);
  color: var(--text-secondary, #5B5457);
  border: 1px solid var(--border-default, #E8E2E4);
}
.pl-btn-ghost:hover { background: var(--bg-hover, #F4EFF0); }

/* 2026-10-17 P1-G：「本次会话不再提示」勾选行
 * 触摸目标 >=44px；字号 13px>=12px；焦点环可见（a11y 3.4） */
.pl-mute {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8, 8px);
  min-height: 44px;
  margin-top: var(--s-10, 10px);
  font-size: 13px;
  color: var(--text-secondary, #5B5457);
  cursor: pointer;
  user-select: none;
}
.pl-mute input[type="checkbox"] {
  width: 18px; height: 18px; flex: none;
  accent-color: var(--xhs-red-solid, #E01230);
  cursor: pointer;
}
.pl-mute:hover { color: var(--text-primary, #1F1B1D); }
.pl-mute input:focus-visible { outline: 3px solid rgba(255, 36, 66, .45); outline-offset: 2px; }

/* ripple 填充（uiverse 观感） */
.pl-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .38);
  pointer-events: none;
  animation: pl-ripple .58s cubic-bezier(.22, .61, .36, 1);
}
.pl-btn-ghost .pl-ripple { background: rgba(31, 27, 29, .12); }
@keyframes pl-ripple { to { transform: scale(2.6); opacity: 0; } }

.pl-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--text-tertiary, #6E6869);
  cursor: pointer;
  transition: background .16s cubic-bezier(.22, .61, .36, 1), transform .16s cubic-bezier(.22, .61, .36, 1);
}
.pl-close:hover { background: var(--bg-hover, #F4EFF0); }
.pl-close:active { transform: scale(.92); }

/* ---------- 五、定价页 #page-pricing ---------- */
.pl-price-wrap { max-width: 960px; margin: 0 auto; padding: var(--s-24, 24px) 0 var(--s-40, 40px); }
.pl-price-head { text-align: center; margin-bottom: var(--s-32, 32px); }
.pl-price-head h1 {
  margin: 0 0 var(--s-8, 8px);
  font-size: 26px; font-weight: 800; letter-spacing: -.4px;
  color: var(--text-primary, #1F1B1D);
}
.pl-price-head p { margin: 0; font-size: 14px; color: var(--text-secondary, #5B5457); }

.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-16, 16px); }
.pl-card {
  padding: var(--s-24, 24px);
  border-radius: 18px;
  border: 1px solid var(--border-default, #E8E2E4);
  background: var(--bg-surface, #fff);
  transition: box-shadow .2s cubic-bezier(.22, .61, .36, 1), transform .2s cubic-bezier(.22, .61, .36, 1);
}
.pl-card:hover { box-shadow: 0 10px 30px rgba(31, 27, 29, .08); transform: translateY(-2px); }
.pl-card[data-tier="pro"] {
  border-color: var(--xhs-red-ring, rgba(255, 36, 66, .18));
  background: linear-gradient(180deg, var(--xhs-red-tint, rgba(255, 36, 66, .08)), var(--bg-surface, #fff) 62%);
}
.pl-card h2 { margin: 0 0 var(--s-4, 4px); font-size: 18px; font-weight: 800; color: var(--text-primary, #1F1B1D); }
.pl-card .pl-tier-desc { margin: 0 0 var(--s-16, 16px); font-size: 13px; color: var(--text-tertiary, #6E6869); }
.pl-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-8, 8px); }
.pl-card li { display: flex; gap: var(--s-8, 8px); font-size: 13px; line-height: 1.55; color: var(--text-secondary, #5B5457); }
.pl-card li i { flex: none; margin-top: 2px; }
.pl-card li.pl-no i { color: var(--text-disabled, #6E6869); }
.pl-card li.pl-no { color: var(--text-tertiary, #6E6869); }

.pl-usage-table { margin-top: var(--s-32, 32px); }
.pl-usage-table h3 { margin: 0 0 var(--s-12, 12px); font-size: 15px; font-weight: 700; color: var(--text-primary, #1F1B1D); }
.pl-ut {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--border-subtle, #F2EDEE);
  border-radius: 12px;
  overflow: hidden;
}
.pl-ut th, .pl-ut td { padding: var(--s-10, 10px) var(--s-12, 12px); text-align: left; }
.pl-ut th { background: var(--bg-subtle, #FBF9FA); font-weight: 700; color: var(--text-secondary, #5B5457); }
.pl-ut td { border-top: 1px solid var(--border-subtle, #F2EDEE); color: var(--text-secondary, #5B5457); }
.pl-ut td.pl-num { font-variant-numeric: tabular-nums; font-weight: 600; }

.pl-note {
  margin-top: var(--s-24, 24px);
  padding: var(--s-14, 14px) var(--s-16, 16px);
  border-radius: 12px;
  background: var(--info-bg, rgba(47, 107, 255, .10));
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-secondary, #5B5457);
}

/* ---------- 页面级额度条（plan.js 切页时注入到业务页顶部） ---------- */
.pl-quota-page {
  margin: 0 0 var(--s-12, 12px);
  padding: var(--s-8, 8px) var(--s-12, 12px);
  border-radius: 10px;
  background: var(--bg-subtle, #FBF9FA);
  border: 1px solid var(--border-subtle, #F2EDEE);
  font-size: 12px;
}
.pl-quota-page .pl-quota-track { flex: 0 1 120px; max-width: 120px; }

/* ---------- 开通申请表单 ---------- */
.pl-apply { margin-top: var(--s-16, 16px); display: grid; gap: var(--s-8, 8px); }
.pl-input {
  width: 100%;
  padding: var(--s-10, 10px) var(--s-12, 12px);
  border: 1px solid var(--border-default, #E8E2E4);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary, #1F1B1D);
  background: var(--bg-surface, #fff);
  outline: none;
  resize: vertical;
  transition: border-color .18s cubic-bezier(.22, .61, .36, 1);
}
.pl-input:focus { border-color: var(--xhs-red-ring, rgba(255, 36, 66, .18)); }
.pl-input::placeholder { color: var(--text-disabled, #6E6869); }
.pl-apply-tip { font-size: 12px; color: var(--text-tertiary, #6E6869); min-height: 16px; }

/* ---------- 六、无障碍与降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pl-badge, .pl-btn, .pl-card, .pl-modal, .pl-close, .pl-quota-fill { transition: none !important; }
  .pl-card:hover { transform: none; }
  .pl-ripple { display: none; }
}
@media (max-width: 640px) {
  .pl-modal { padding: var(--s-18, 18px); border-radius: 16px; }
  .pl-actions { flex-direction: column; }
  /* 2026-10-17 P1-G 实测补刀：窄屏 .pl-actions 转成 column 后，
     .pl-btn 的 flex:1 会把 flex-basis:0% 作用到**高度**上，
     44px 被压到 min-height 的 24px（375 视口实测 height:24px）。
     这里显式关掉收缩并钉住 44px，守住触摸目标（WCAG 2.5.8）。 */
  .pl-actions .pl-btn { flex: 0 0 auto; height: 44px; }
  .pl-price-head h1 { font-size: 22px; }
}