/* ============================================================
   开通会员引导层（2026-10-08 会员机制）
   配色沿用 tokens.css 的墨绿 + 暖金铜；付费卡用金铜强调，与主色区分。
   ============================================================ */

.upg-ovl {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7);
  background: rgba(10, 46, 39, 0.42);
  backdrop-filter: blur(2px);
}
.upg-ovl.is-open { display: flex; }

.upg-ovl__box {
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  animation: upg-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes upg-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

/* ---------- 头 ---------- */
.upg__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7);
  border-bottom: var(--border-soft);
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
}
.upg__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--ink-900); letter-spacing: -0.2px; }
.upg__sub { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 4px; }
.upg__x {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  color: var(--ink-400);
  /* 必须显式清掉浏览器给 <button> 的默认边框与灰底 —— 不清的话它会渲染成一个方块，
     配上里面的图标看着像个没写完的控件（老板 2026-10-09 报的「很别扭」有一半来自这里）。 */
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  /* 🔴 这里原来有个 `transform: rotate(45deg)`（2026-10-09 老板报「右上角是个右下箭头」时才查出来）：
     它当初是为了让「→」这个图标转成斜向的装饰效果 —— 而图标本身早就该是「×」了。
     × 再转 45° 就变成「＋」，箭头转 45° 就变成「↘」：**右上角的关闭永远不要再加任何旋转**。 */
}
.upg__x:hover { background: var(--ink-100); color: var(--ink-800); }

/* 触发原因（如「AI 助手为会员专属功能」）。没内容时不占位。 */
.upg__why:empty { display: none; }
.upg__why {
  margin: var(--sp-5) var(--sp-7) 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--warn-100);
  border: 1px solid rgba(209, 143, 22, 0.22);
  font-size: var(--fs-xs);
  color: var(--warn-700);
  line-height: 1.6;
}

.upg__body { padding: var(--sp-6) var(--sp-7) var(--sp-7); }

/* ---------- 三档对比卡（2026-10-09 老板定：要能一眼比出三档差别，不能只摆付费两档） ---------- */
.upg__tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  align-items: start;      /* 三张卡各自按内容高度，不被最高的那张拉齐（免费档条目多） */
}
.upg__tier {
  border: var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
}
.upg__tier.is-cur { border-color: var(--brand-400); background: var(--brand-50); }

.upg__tier-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: var(--border-soft);
}
.upg__tier-nm {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.upg__cur {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-normal);
  color: var(--brand-700);
  background: var(--brand-100);
  padding: 1px 6px;
  border-radius: var(--r-full);
}
.upg__tier-pr { display: flex; align-items: baseline; gap: 2px; color: var(--accent-700); }
.upg__tier-pr b { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: -0.5px; }
.upg__tier-pr small { font-size: var(--fs-2xs); color: var(--ink-400); }

.upg__tier-dev {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-600);
  margin-bottom: var(--sp-4);
  /* 三档并排后每列只剩 1/3 宽，中文若允许逐字断行会出现「可用设/备 3/台」这种竖排观感。
     keep-all：中文短语整体成块、只在短语边界换行。 */
  flex-wrap: wrap;
  word-break: keep-all;
  line-height: 1.5;
}
.upg__tier-dev svg { color: var(--brand-400); flex: none; }
.upg__tier-dev b { color: var(--ink-900); font-weight: var(--fw-semibold); }

.upg__perks { display: flex; flex-direction: column; gap: 7px; flex: 1; margin-bottom: var(--sp-5); }
.upg__perks li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-700);
  line-height: 1.55;
}
.upg__perks svg { color: var(--ok-600); flex: none; margin-top: 3px; }

.upg__buy {
  height: 34px;
  border-radius: var(--r-md);
  background: var(--accent-500);
  color: #2b2410;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: background var(--t-fast);
}
.upg__buy:hover { background: var(--accent-600); color: var(--white); }

/* ---------- 今日额度 ---------- */
.upg__used {
  border: var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  background: var(--ink-50);
}
.upg__used-t {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-800);
  margin-bottom: var(--sp-3);
}
.upg__used-t svg { color: var(--brand-500); }
.upg__used-g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3) var(--sp-5);
}
.upg__q-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
  margin-bottom: 4px;
}
.upg__q-top b { color: var(--ink-800); font-weight: var(--fw-semibold); font-family: var(--font-mono); }
.upg__q-bar { height: 4px; border-radius: var(--r-full); background: var(--ink-200); overflow: hidden; }
.upg__q-bar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--warn-500); }
/* 用尽项：条变红、文案变红。铁律是「用尽必须一眼看见」，
   进度条走完 100% 但颜色还是琥珀色的话，用户会以为是"还有一点"。 */
.upg__q.is-out .upg__q-top b { color: var(--danger-700); }
.upg__q.is-out .upg__q-bar i { background: var(--danger-500); }

/* ---------- 没有券时的三条出路 ----------
   单独一块而不是塞进 .upg__why 一句话：出路要能点，就必须是真元素。 */
.upg__tk {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-5);
  border: var(--border);
  border-left: 3px solid var(--accent-500);
  border-radius: var(--r-md);
  background: var(--accent-100);
}
.upg__tk-t {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent-700);
}
.upg__tk-h { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); line-height: var(--lh-loose); color: var(--ink-700); }
.upg__tk-l { margin: var(--sp-3) 0 0; padding-left: var(--sp-6); }
.upg__tk-l li {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); color: var(--ink-700); line-height: var(--lh-normal);
}
.upg__tk-b {
  flex: none; padding: 2px 10px;
  border: var(--border); border-radius: var(--r-full);
  background: var(--white); color: var(--brand-700);
  font-family: inherit; font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  cursor: pointer;
}
.upg__tk-b:hover { border-color: var(--brand-500); background: var(--brand-50); }
.upg__tk-n { margin: var(--sp-3) 0 0; font-size: var(--fs-2xs); color: var(--accent-700); }
.upg__tk-n:empty { display: none; }

/* ---------- 开通方式 ---------- */
.upg__pay {
  border: var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}
.upg__pay-t {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-800);
  margin-bottom: var(--sp-3);
}
.upg__pay-t svg { color: var(--brand-500); }
.upg__pay-l {
  display: flex;
  flex-direction: column;
  gap: 5px;
  counter-reset: upg;
  list-style: none;
}
.upg__pay-l li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--ink-600);
  line-height: 1.6;
  counter-increment: upg;
}
.upg__pay-l li::before {
  content: counter(upg);
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.upg__pay-n {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--ink-400);
}

/* 三列在中窄屏会挤成一团 —— 先降两列，再降单列 */
@media (max-width: 980px) {
  .upg__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .upg__tiers { grid-template-columns: minmax(0, 1fr); }
  .upg__body, .upg__head { padding-left: var(--sp-5); padding-right: var(--sp-5); }
}