/*
 * 价目页（/pricing/）：一列读到底，像一张安静的价目单。分组标题 → 每个模型一行（名称 · 档位 | 价格），备注小字在下。
 * 价格数字用等宽数字，上下行对得齐；主色只给「更新于」前的小圆点与链接，别处不用。
 * 分组标题、模型名由接口给，字不在细体子集里，所以标题一律用常规体（同弹层标题）。
 */

.pricing {
  width: min(var(--w-text), 100% - var(--page-x) * 2);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--sp-xl)) 0 var(--sp-section);
}

/* ── 页头 ── */
.pricing-title {
  margin-top: 20px;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--c-text-strong);
}

.pricing-lead {
  margin-top: var(--sp-md);
  font-size: var(--fs-lead);
  color: var(--c-text-3);
}

.pricing-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
  font-size: var(--fs-small);
  color: var(--c-text-4);
  font-variant-numeric: tabular-nums;
}

/* display 会盖掉 hidden 属性：没拿到更新时间时连圆点一起藏 */
.pricing-updated[hidden] { display: none; }

.pricing-updated::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 10px var(--c-primary-glow);
}

/* ── 价目 ── */
.price-groups { margin-top: var(--sp-xl); min-height: 240px; }

.price-group + .price-group { margin-top: var(--sp-xl); }

.price-group-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--c-text-strong);
  letter-spacing: 0.04em;
}

.price-rows {
  margin-top: var(--sp-sm);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  overflow: hidden;
}

.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-xs) var(--sp-md);
  padding: 18px var(--sp-md);
}

.price-row + .price-row { border-top: 1px solid var(--c-hairline); }

.price-model { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.price-name { color: var(--c-text); }

.price-tier {
  padding: 1px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-2);
  font-size: var(--fs-tiny);
  color: var(--c-text-3);
}

.price-values {
  display: grid;
  justify-items: end;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-value { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.price-k { font-size: var(--fs-small); color: var(--c-text-3); }
.price-v { color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
.price-u { font-size: var(--fs-small); color: var(--c-text-4); }

.price-note {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-text-4);
}

/* ── 加载占位：几条淡淡的横条，慢慢呼吸 ── */
.price-skeleton { display: grid; gap: var(--sp-sm); }

.sk-line {
  height: 52px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  animation: sk-breathe 1.6s var(--ease) infinite alternate;
}

.sk-title { width: 30%; height: 28px; }
.sk-short { width: 70%; }

@keyframes sk-breathe {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* ── 加载不到 / 没有价目 ── */
.price-empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xl) var(--sp-md);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-card);
  text-align: center;
  color: var(--c-text-3);
}

/* ── 计费说明链接 ── */
.pricing-more {
  margin-top: var(--sp-xl);
  font-size: var(--fs-small);
  color: var(--c-text-3);
}

.pricing-more a { color: var(--c-primary-soft); transition: color var(--t-fast); }
.pricing-more a:hover { color: var(--c-text-strong); }

/* ── 窄屏：价格挪到模型名下面，左对齐 ── */
@media (max-width: 860px) {
  .pricing { padding-top: calc(var(--header-h) + var(--sp-lg)); }
  .price-row { grid-template-columns: 1fr; padding: 16px 18px; }
  .price-values { justify-items: start; }
  .price-value { white-space: normal; flex-wrap: wrap; }
}

/* 减少动态效果：占位不呼吸 */
.reduce-motion .sk-line { animation: none; }