/* =====================================================================
   内页（zh-Hans/**）样式。在 styles.css 之后加载，只新增内页特有的组件。
   规则：
   - 字号、字重只用 docs/conventions/typography.md 的 --fs-* / --fw-*，不新增层级；
   - 卡片、按钮的 hover 套用 styles.css 的「统一 hover 规范」：卡片上浮 4px + 主题色描边与光晕；
   - 每个组件只声明自己的主题色 --glow（RGB）。
   ===================================================================== */
/* ---------- 页面骨架 ---------- */
.page-main {
  background: var(--ink);
}

.page-section {
  padding: var(--space-24) 0;
}

.page-section.tone-raised {
  background: var(--surface-inset);
}

.page-section.is-tight {
  padding-top: var(--space-16);
}

.section-narrow {
  max-width: 880px;
  margin-inline: auto;
}

.page-section .section-heading {
  margin-bottom: var(--space-10);
}

/* 区块标题与首页一致：一律居中，说明在标题下方 */
.page-section .section-heading,
.page-section .section-heading-row {
  display: block;
  text-align: center;
}

.page-section .section-heading .eyebrow {
  justify-content: center;
}

.page-section .section-heading>p,
.page-section .section-heading-row>p {
  max-width: 640px;
  margin: 17px auto 0;
}

.page-section .section-heading h2 {
  margin-inline: auto;
  max-width: 900px;
  margin-top: 17px;
}

.page-section .section-heading:not(.section-heading-row) h2 {
  max-width: none;
}

.section-heading-center {
  text-align: center;
}

.section-heading-center>p {
  margin: 17px auto 0;
  max-width: 620px;
}

.section-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
}

.section-foot-center {
  justify-content: center;
}

/* ---------- 页头区：面包屑 → 眉题 → 主标题 → 引导正文 → 按钮 → 注释 ---------- */
/* overflow 用 clip 不用 hidden：hidden 会成为滚动容器，画面里的按钮获得焦点、轨道一滑，浏览器就把整个页头横向滚走 */
.page-hero {
  --hero-rgb: var(--brand-blue-rgb);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--space-16) 0 var(--space-20);
  background: var(--ink);
}

.page-hero:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 640px;
  right: -240px;
  top: -240px;
  background: radial-gradient(circle,rgba(var(--hero-rgb),.17),transparent 66%);
  pointer-events: none;
}

.page-hero:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(var(--overlay-rgb),.08) 30%,rgba(var(--overlay-rgb),.08) 70%,transparent);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--space-12);
  align-items: center;
}

.page-hero-grid.has-visual {
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
}

.page-hero-copy {
  min-width: 0;
}

.page-hero .eyebrow {
  justify-content: flex-start;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: var(--space-5) 0 0;
  max-width: 860px;
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: -.04em;
  text-wrap: balance;
}

/* 写进 h1 的搜索词小字：外观同眉题，占眉题的位置 */
.page-hero h1.has-kicker {
  margin-top: 0;
}

.page-hero .h1-kicker {
  display: flex;
  width: fit-content;
  margin-bottom: var(--space-5);
}

/* 两段式标题：只在两段之间换行（与首页 .section-heading h2 strong 同一做法） */
.page-hero h1 .h-part,
.page-hero h1 strong,
.page-section h2 .h-part,
.faq-intro h2 .h-part,
.faq-intro h2 strong {
  display: inline-block;
}

.page-hero h1 strong {
  font-weight: inherit;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-lead {
  margin: var(--space-6) 0 0;
  max-width: 640px;
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  color: var(--text-tertiary);
}

.page-hero .hero-actions {
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.page-hero .hero-actions .button {
  width: auto;
  font-size: var(--fs-body);
}

.page-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-tertiary);
}

.page-note .plan {
  color: var(--text-secondary);
}

.page-hero-visual {
  min-width: 0;
}

.page-hero-center {
  text-align: center;
}

.page-hero-center .eyebrow,
.page-hero-center .hero-actions,
.page-hero-center .page-note {
  justify-content: center;
}

/* 面包屑一律居左，居中的页头区（价格页）也一样 */
.page-hero-center .crumbs {
  justify-content: flex-start;
  text-align: left;
}

.page-hero-center h1,
.page-hero-center .page-lead {
  margin-inline: auto;
}

/* 面包屑 */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: calc(var(--space-4) * -1) 0 var(--space-10);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-tertiary);
}

.crumbs a {
  transition: color var(--hover-ease);
}

.crumbs a:hover,
.crumbs a:focus-visible {
  color: var(--text-primary);
}

.crumbs li+li:before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--muted-dark);
}

.crumbs [aria-current] {
  color: var(--text-secondary);
}

/* 示例内容提示条 */
.sample-banner {
  border-bottom: 1px solid rgba(var(--orange-rgb),.25);
  background: rgba(var(--orange-rgb),.08);
  color: var(--notice);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.sample-banner .shell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 0;
}

.sample-banner b {
  flex: none;
  padding: 0 7px;
  border: 1px solid rgba(var(--orange-rgb),.4);
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  line-height: 1.7;
}

/* ---------- 图标：线性图标用 mask 着色，跟随组件主题色 ---------- */
.ic {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

.card-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid rgba(var(--glow),.27);
  border-radius: var(--radius-control);
  background: rgba(var(--glow),.14);
  color: rgb(var(--glow));
}

.card-ic .ic {
  width: 19px;
  height: 19px;
}

/* ---------- 信息卡：三步卡 / 场景卡同一底色与 hover ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-grid.cols-2 {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.card-grid.cols-4 {
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.info-card {
  --glow: var(--brand-cyan-rgb);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--layout-card-padding);
  border: 1px solid rgba(var(--overlay-rgb),.14);
  border-radius: var(--radius-card);
  background: linear-gradient(150deg,rgba(var(--glow),.1),transparent 50%),var(--surface);
  transition: transform var(--hover-ease),border-color var(--hover-ease),box-shadow var(--hover-ease),background var(--hover-ease);
}

.info-card:hover,
.info-card:focus-visible,
.info-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(var(--glow),.6);
  box-shadow: 0 0 0 1px rgba(var(--glow),.18),0 18px 40px -12px rgba(var(--glow),.45);
  background: linear-gradient(150deg,rgba(var(--glow),.16),transparent 60%),var(--surface);
}

.info-card h3 {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-card);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.info-card p {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  color: var(--text-tertiary);
}

.info-card .card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}

.info-card .card-foot {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-tertiary);
}

.info-card .card-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--glow));
}

.info-card .card-arrow {
  position: absolute;
  top: var(--layout-card-padding);
  right: var(--layout-card-padding);
  color: rgb(var(--glow));
  font-size: var(--fs-card);
  line-height: 1;
  transition: transform var(--hover-ease);
}

.info-card:hover .card-arrow,
.info-card:focus-visible .card-arrow {
  transform: translate(2px,-2px);
}

@media (prefers-reduced-motion:reduce) {
  .info-card:hover,
  .info-card:focus-visible,
  .info-card:focus-within {
    transform: none;
  }
}

/* 卡片内的勾选清单（沿用六条线面板的 ✓ 清单） */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-secondary);
}

.check-list li:before {
  content: "✓";
  flex: none;
  color: rgb(var(--glow,var(--brand-cyan-rgb)));
  font-size: var(--fs-small);
}

.check-list.is-equal li:before {
  content: "=";
  font-weight: var(--fw-semibold);
}

.check-list.is-cross li:before {
  content: "×";
}

.check-list.is-dot li:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: rgb(var(--glow,var(--brand-cyan-rgb)));
  transform: translateY(-2px);
}

/* 价格页页头：左栏 3 份、右侧宣传卡 2 份，卡片放得下名称与价格同一行 */
[data-page="pricing"] .page-hero-grid.has-visual {
  grid-template-columns: minmax(0,3fr) minmax(0,2fr);
}

/* 价格页页头右侧：三张付费项宣传卡错落叠放（Premium 在后、品牌机器人在前），色调同价格卡、品牌机器人用品牌青；
   卡内名称与价格同一行、卖点在下一行，卡片矮、叠放间距小；窄屏改三列小卡 */
.promo-stack {
  position: relative;
  height: 290px;
}

.promo-card {
  position: absolute;
  display: grid;
  width: 86%;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(var(--glow),.4);
  border-radius: var(--radius-card);
  background: linear-gradient(150deg,rgba(var(--glow),.16),rgba(var(--glow),.04) 65%),var(--surface-raised);
  box-shadow: 0 24px 60px -28px rgba(var(--shadow-rgb),.75);
  transition: transform .25s ease;
}

.promo-card.is-premium {
  --glow: var(--plan-premium-accent-rgb);
  top: 0;
  left: 0;
  transform: rotate(-3deg);
}

.promo-card.is-ultimate {
  --glow: var(--plan-ultimate-accent-rgb);
  top: 96px;
  left: 7%;
  transform: rotate(1.5deg);
}

.promo-card.is-brand {
  --glow: var(--brand-cyan-rgb);
  top: 192px;
  left: 14%;
  transform: rotate(-1deg);
}

.promo-card:hover {
  z-index: 1;
  transform: translateY(-6px) rotate(0);
}

.promo-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.promo-ic {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--radius-compact);
  background: rgba(var(--glow),.16);
  color: rgb(var(--glow));
}

.promo-ic .vip-badge {
  width: 16px;
  height: 16px;
}

.promo-card.is-premium .vip-badge path {
  fill: url(#vip-g-premium);
}

.promo-card.is-ultimate .vip-badge path {
  fill: url(#vip-g-ultimate);
}

.promo-name {
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.promo-card.is-premium .promo-name {
  color: var(--plan-premium);
}

.promo-card.is-ultimate .promo-name {
  background: var(--plan-ultimate-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.promo-line {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

.promo-price {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--fs-lead);
  text-align: right;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.promo-price small {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
}

/* 套餐胶囊：沿用 .plan，按档位着色 */
.plan-premium {
  border-color: rgba(var(--plan-premium-accent-rgb),.45);
  color: var(--plan-premium);
}

.plan-ultimate {
  border-color: rgba(var(--plan-ultimate-accent-rgb),.45);
  color: var(--plan-ultimate);
}

.plan-free {
  border-color: rgba(var(--brand-cyan-rgb),.4);
  color: var(--plan-free);
}

/* ---------- 步骤：编号圆点 + 一句话 ---------- */
.step-list {
  display: grid;
  grid-template-columns: repeat(var(--cols,3),minmax(0,1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-list.is-vertical {
  grid-template-columns: minmax(0,1fr);
  gap: var(--space-3);
}

.step-list>li {
  --glow: var(--brand-cyan-rgb);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: border-color var(--hover-ease),background var(--hover-ease);
}

.step-list.is-vertical>li {
  flex-direction: row;
  align-items: flex-start;
}

.step-list>li:hover {
  border-color: rgba(var(--glow),.45);
  background: linear-gradient(150deg,rgba(var(--glow),.08),transparent 60%),var(--surface);
}

.step-no {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid rgba(var(--glow),.35);
  border-radius: 999px;
  background: rgba(var(--glow),.12);
  color: rgb(var(--glow));
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.step-list p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

.step-list.is-vertical p {
  padding-top: 3px;
}

.step-list h3 {
  margin: 0;
  font-size: var(--fs-card);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.step-list h3+p {
  color: var(--text-tertiary);
}

/* ---------- 两栏：左说明 / 右画面 ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--space-8);
  align-items: start;
}

.split.is-wide-left {
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
}

.split-label {
  display: block;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---------- 控制台画面：与 Hero 流程图第 1 张卡同一画法 ---------- */
.console-card {
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: var(--surface-inset);
  box-shadow: 0 24px 60px -30px rgba(var(--shadow-rgb),.6);
}

.console-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border-bottom: 1px solid rgba(var(--overlay-rgb),.08);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--text-tertiary);
}

.console-head .window-dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #3a4150;
}

.console-head b {
  margin-left: auto;
  padding: 0 6px;
  border: 1px solid rgba(var(--brand-cyan-rgb),.35);
  border-radius: 999px;
  color: var(--brand-cyan);
  font-weight: var(--fw-semibold);
}

.console-body {
  padding: var(--space-5);
}

.console-title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.console-fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.console-fields div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(var(--overlay-rgb),.08);
  border-radius: var(--radius-compact);
  background: rgba(var(--overlay-rgb),.04);
}

.console-fields dt {
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--text-tertiary);
}

.console-fields dd {
  margin: 2px 0 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.console-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  margin-top: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--brand-gradient);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

/* Discord 画面外框（.dc 本身沿用首页的 Discord 真实界面） */
.dc-frame .dc {
  margin: 0;
}

.dc-frame .dc+.dc {
  margin-top: var(--space-3);
}

/* ---------- Discord 画面：多条消息左右轮播 ---------- */
/* overflow 同样用 clip（理由见 .page-hero），滑动用 transform 不用滚动 */
.dc-slides {
  overflow: clip;
  touch-action: pan-y;
}

.dc-track {
  display: flex;
  transform: translateX(calc(var(--i,0) * -100%));
  transition: transform .4s var(--ease);
}

.dc-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.dc-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.dc-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.dc-dot:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--overlay-rgb),.25);
  transition: width .3s var(--ease),background .3s var(--ease);
}

.dc-dot[aria-pressed="true"]:before {
  width: 20px;
  background: var(--brand-cyan);
}

.dc-dot:hover:before,
.dc-dot:focus-visible:before {
  background: rgba(var(--overlay-rgb),.5);
}

.dc-dot[aria-pressed="true"]:hover:before,
.dc-dot[aria-pressed="true"]:focus-visible:before {
  background: var(--brand-cyan);
}

@media (prefers-reduced-motion: reduce) {
  .dc-track,
  .dc-dot:before {
    transition: none;
  }
}

/* ---------- Discord 画面：点按钮看回复（discordPreview 的 reply 按钮） ---------- */
/* 画面里能点的那颗是真 <button>，呼吸光圈提示可点（同首页演示的 dc-pulse 节奏），光圈颜色跟按钮；点了沿轮播轨道滑到 bot 的回复，几秒后滑回 */
.dc-btn-live {
  --ring-rgb: var(--overlay-rgb);
  border: 0;
  font-family: inherit;
  cursor: pointer;
  animation: dc-ring 2.2s ease-out infinite;
  transition: filter var(--hover-ease);
}

.dc-btn-live.green {
  --ring-rgb: var(--dc-green-bright-rgb);
}

.dc-btn-live.blurple {
  --ring-rgb: var(--dc-blurple-rgb);
}

.dc-btn-live:hover,
.dc-btn-live:focus-visible {
  filter: brightness(1.15);
}

@keyframes dc-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--ring-rgb),.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(var(--ring-rgb),0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--ring-rgb),0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-btn-live {
    animation: none;
  }
}

/* ---------- Discord 画面：普通成员的消息与反应条（discordPreview 的 member / reactions） ---------- */
/* 没给头像的成员画 Discord 默认头像那种纯色圆 + 首字母；反应条照客户端：emoji + 人数的小圆角块，「你也点了」的那颗描蓝边 */
.dc-av-letter {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--dc-blurple);
  color: var(--dc-text-bright);
  font-size: 15px;
  font-weight: 600;
}

.dc-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.dc-reaction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--dc-embed);
  color: var(--dc-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.dc-reaction-count {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.dc-reaction.is-me {
  border-color: var(--dc-blurple);
  background: rgba(var(--dc-blurple-rgb),.15);
  color: var(--dc-mention);
}

/* 能点的那颗（标了 reply）：真 <button>，光圈同按钮的 dc-ring；点了滑到人数 +1、变成高亮态的那张 */
.dc-reaction-live {
  --ring-rgb: var(--dc-blurple-rgb);
  font-family: inherit;
  cursor: pointer;
  animation: dc-ring 2.2s ease-out infinite;
  transition: border-color var(--hover-ease);
}

.dc-reaction-live:hover,
.dc-reaction-live:focus-visible {
  border-color: var(--dc-line);
}

@media (prefers-reduced-motion: reduce) {
  .dc-reaction-live {
    animation: none;
  }
}

/* ---------- Tab（下划线式，同 dashboard-v2 Tabs 的 line 变体）：切换同一位置的视图 ---------- */
/* 当前项用 aria-pressed（切换状态）或 aria-selected（配 role="tab"）标；分段按钮（.period-toggle）、筛选 chip（.filter-chip）不是 Tab */
.line-tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid rgba(var(--overlay-rgb),.1);
}

.line-tab {
  position: relative;
  padding: 0 2px 10px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  white-space: nowrap;
  transition: color var(--hover-ease);
}

.line-tab:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--brand-cyan);
  opacity: 0;
  transition: opacity var(--hover-ease);
}

.line-tab:hover {
  color: var(--text-primary);
}

.line-tab[aria-pressed="true"],
.line-tab[aria-selected="true"] {
  color: var(--text-primary);
}

.line-tab[aria-pressed="true"]:after,
.line-tab[aria-selected="true"]:after {
  opacity: 1;
}

/* ---------- Discord 画面：同一条消息在几种身份间切换（品牌机器人页） ---------- */
/* 上方一排 .line-tabs，说明放同一排靠右，底线贯通；头像、名字、底栏各叠放几份，只有 .is-on 的那份可见 */
.dc-tabs {
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 0 0 var(--space-3);
}

.dc-tabs-note {
  margin-left: auto;
  padding-bottom: 10px;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.dc-av-in {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.dc-swap {
  display: grid;
}

.dc-swap>* {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .35s var(--ease);
}

.dc-swap>.is-on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dc-swap>* {
    transition: none;
  }
}

/* ---------- Discord 画面：斜杠命令弹出框（命令参考页页头，照 Discord 客户端输入「/」后的样子） ---------- */
.dc-slash {
  overflow: hidden;
  border: 1px solid var(--dc-line-soft);
  border-radius: 8px;
  background: var(--dc-embed);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),.35);
}

.dc-slash-app {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 6px;
  color: var(--dc-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.dc-slash-app img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.dc-slash ul {
  margin: 0;
  padding: 0 6px 6px;
  list-style: none;
}

.dc-slash li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 8px 8px;
  border-radius: 4px;
  font-size: 13px;
}

.dc-slash li.is-on {
  background: var(--dc-line-soft);
}

.dc-slash b {
  flex: none;
  color: var(--dc-text-bright);
  font-weight: 600;
}

.dc-slash li span {
  overflow: hidden;
  color: var(--dc-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-composer {
  display: flex;
  align-items: center;
  height: 44px;
  margin-top: 8px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--dc-line-soft);
  color: var(--dc-text);
  font-size: 15px;
}

.dc-composer i {
  width: 1px;
  height: 18px;
  margin-left: 1px;
  background: var(--dc-text);
  animation: dc-caret 1.1s steps(1) infinite;
}

@keyframes dc-caret {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-composer i {
    animation: none;
  }
}

/* ---------- 活跃曲线示意（关于页页头）：上线后普通服务器与用 Engagerly 的成员活跃度对比 ---------- */
.activity-card {
  padding: var(--layout-card-padding);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: linear-gradient(150deg,rgba(var(--brand-cyan-rgb),.1),rgba(var(--brand-cyan-rgb),0) 60%),var(--surface-raised);
  box-shadow: 0 24px 60px -28px rgba(var(--shadow-rgb),.75);
}

.activity-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.activity-head b {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.activity-head span {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.activity-plot {
  position: relative;
}

.activity-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.activity-svg stop {
  stop-color: var(--brand-cyan);
}

.activity-svg stop[offset="0"] {
  stop-opacity: .28;
}

.activity-svg stop[offset="1"] {
  stop-opacity: 0;
}

.activity-grid {
  stroke: var(--surface-border);
  stroke-dasharray: 3 5;
}

.activity-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: activity-draw 1.6s var(--ease) .2s forwards;
}

.activity-line.is-typical {
  stroke: var(--text-tertiary);
  stroke-opacity: .7;
}

.activity-line.is-engagerly {
  stroke: var(--brand-cyan);
  stroke-width: 3;
}

.activity-dot {
  fill: var(--brand-cyan);
  stroke: rgba(var(--brand-cyan-rgb),.3);
  stroke-width: 8;
}

.activity-tag {
  position: absolute;
  right: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.activity-tag.is-engagerly {
  top: calc(var(--space-3)*-1);
  right: var(--space-6);
  color: var(--brand-cyan);
}

.activity-tag.is-typical {
  bottom: 22%;
  color: var(--text-tertiary);
}

.activity-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-border);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

@keyframes activity-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .activity-line {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* ---------- 栏目页页头示意（lib.mjs 的 heroPanel / heroStack）：博客、客户案例、共建感谢、2.0 新功能、品牌资源页右侧 ---------- */
.hero-panel {
  padding: var(--layout-card-padding);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: linear-gradient(150deg,rgba(var(--glow),.1),rgba(var(--glow),0) 60%),var(--surface-raised);
  box-shadow: 0 24px 60px -28px rgba(var(--shadow-rgb),.75);
}

.hero-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.hero-panel-head b {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.hero-panel-head span {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* 标签云：2.0 新功能页，十一项新增 */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(var(--glow),.35);
  border-radius: 999px;
  background: rgba(var(--glow),.08);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.hero-chips .ic {
  width: 14px;
  height: 14px;
  color: rgb(var(--glow));
}

/* 错落叠卡：博客、客户案例、共建感谢页，三张卡依次右移、交替微倾 */
.hero-stack {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0;
}

.hero-stack-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 86%;
  padding: var(--space-5);
  border: 1px solid rgba(var(--glow),.4);
  border-radius: var(--radius-card);
  background: linear-gradient(150deg,rgba(var(--glow),.16),rgba(var(--glow),.04) 65%),var(--surface-raised);
  box-shadow: 0 24px 60px -28px rgba(var(--shadow-rgb),.75);
  transform: rotate(-2deg);
}

.hero-stack-card+.hero-stack-card {
  margin-top: calc(var(--space-3)*-1);
}

.hero-stack-card:nth-child(2) {
  margin-inline-start: 7%;
  transform: rotate(1.5deg);
}

.hero-stack-card:nth-child(3) {
  margin-inline-start: 14%;
  transform: rotate(-1deg);
}

.hero-stack-card small {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.hero-stack-card small .ic {
  width: 14px;
  height: 14px;
  color: rgb(var(--glow));
}

.hero-stack-card b {
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--text-primary);
}

.hero-stack-card span {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.hero-stack-card strong {
  color: rgb(var(--glow));
  font-weight: var(--fw-semibold);
}

/* 品牌页：完整 logo、五个色值、品牌渐变 */
.brand-board-logo {
  display: grid;
  height: 132px;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--surface-inset);
}

.brand-board-logo img {
  width: 62%;
  max-width: 260px;
}

.brand-board-swatches {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.brand-board-swatches li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand-board-swatches li:before {
  height: 48px;
  margin-bottom: var(--space-2);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-compact);
  background: var(--swatch);
  content: "";
}

.brand-board-swatches span {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.brand-board-swatches code {
  overflow: hidden;
  font-size: var(--fs-label);
  color: var(--text-tertiary);
  text-overflow: ellipsis;
}

.brand-board-gradient {
  height: 28px;
  margin-top: var(--space-4);
  border-radius: var(--radius-compact);
  background: linear-gradient(120deg,var(--brand-cyan-tint),var(--brand-cyan) 40%,var(--brand-blue));
}

/* ---------- Discord 画面：授权弹窗（安全页页头，照 Discord「添加到服务器」的权限确认页） ---------- */
/* 照 Discord 弹窗的比例限宽，靠右对齐页头栏；列表只露四项多一点，整体不比左栏文字高 */
.dc-oauth-frame {
  max-width: 340px;
  margin-inline-start: auto;
}

.dc-oauth {
  padding-top: 16px;
}

.dc-oauth-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.dc-oauth-head img {
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 50%;
  background: var(--dc-deep);
}

.dc-oauth-head b {
  color: var(--dc-text-bright);
  font-size: 16px;
  font-weight: 600;
}

.dc-oauth-ask {
  margin: 0 0 10px;
  color: var(--dc-muted);
  font-size: 13px;
  text-align: center;
}

.dc-oauth-ask b {
  color: var(--dc-text-bright);
  font-weight: 600;
}

/* Discord 里权限列表在框内滚动：只露前几项，底部渐隐 */
.dc-oauth-perms {
  max-height: 136px;
  margin: 0;
  padding: 4px 2px 0;
  overflow: hidden;
  border-top: 1px solid var(--dc-line-soft);
  list-style: none;
  mask-image: linear-gradient(black 70%,transparent);
}

.dc-oauth-perms li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  color: var(--dc-text);
  font-size: 14px;
}

.dc-oauth-box {
  display: grid;
  flex: none;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 4px;
  background: var(--dc-blurple);
  color: var(--dc-text-bright);
}

.dc-oauth-box .ic {
  width: 14px;
  height: 14px;
}

.dc-oauth-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px -14px -14px;
  padding: 10px 14px;
  border-radius: 0 0 var(--radius-control) var(--radius-control);
  background: var(--dc-embed);
}

.dc-oauth-back {
  color: var(--dc-text);
  font-size: 14px;
}

/* ---------- 法律页页头：一页纸预览（本文标题、更新日期、前三节小标题，正文画成灰条；后面错开叠两张纸） ---------- */
.doc-sheet {
  position: relative;
  max-width: 400px;
  margin-inline: auto;
  padding: var(--space-3) var(--space-6) 0 var(--space-3);
}

.doc-sheet:before,
.doc-sheet:after {
  position: absolute;
  inset: var(--space-3) var(--space-6) 0 var(--space-3);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  content: "";
  mask-image: linear-gradient(black 55%,transparent);
}

.doc-sheet:before {
  opacity: .5;
  transform: translate(22px,-8px) rotate(4deg);
}

.doc-sheet:after {
  transform: translate(11px,-4px) rotate(2deg);
}

.doc-sheet-page {
  position: relative;
  z-index: 1;
  height: 340px;
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: linear-gradient(160deg,rgba(var(--brand-cyan-rgb),.08),rgba(var(--brand-cyan-rgb),0) 45%),var(--surface-raised);
  box-shadow: 0 24px 60px -28px rgba(var(--shadow-rgb),.75);
  color: var(--text-primary);
  mask-image: linear-gradient(black 78%,transparent);
}

/* 右上角折角：纸角切掉，补一块翻折的三角 */
.doc-sheet-page:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-bottom-left-radius: var(--radius-compact);
  background: linear-gradient(225deg,var(--surface) 50%,var(--surface-border) 50%);
  content: "";
}

.doc-sheet-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

.doc-sheet-brand img {
  width: 18px;
  height: 18px;
}

.doc-sheet-title,
.doc-sheet-date,
.doc-sheet-h {
  display: block;
}

.doc-sheet-title {
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.doc-sheet-date {
  margin: var(--space-1) 0 var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--surface-border);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.doc-sheet-h {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.doc-sheet-line {
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 3px;
  background: rgba(var(--overlay-rgb),.07);
}

.doc-sheet-line.is-short {
  width: 58%;
}

/* ---------- 状态页页头：状态页窗口（appWindow 外框；总状态横条 + 五个组件） ---------- */
.status-win-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) var(--space-4) 0;
  padding: 12px 14px;
  border: 1px solid rgba(var(--success-rgb),.3);
  border-radius: var(--radius-control);
  background: rgba(var(--success-rgb),.1);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.status-win-banner .ic {
  width: 18px;
  height: 18px;
  color: var(--success);
}

.status-win-list {
  margin: var(--space-2) var(--space-4) var(--space-3);
  padding: 0;
  list-style: none;
}

.status-win-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 11px 2px;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.06);
}

.status-win-list li:last-child {
  border-bottom: 0;
}

.status-win-list span {
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

.status-win-list b {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--success);
  white-space: nowrap;
}

.status-win-list b:before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  content: "";
}

/* ---------- 支持页页头：写给支持邮箱的新邮件（appWindow 外框；收件人、主题，正文是「提问前准备好」四项） ---------- */
.mail-win-fields {
  margin: 0;
  padding: 0 var(--space-4);
}

.mail-win-fields div {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: 42px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.08);
}

.mail-win-fields dt {
  flex: none;
  width: 56px;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.mail-win-fields dd {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-primary);
}

.mail-win-body {
  margin: 0;
  padding: var(--space-4) var(--space-4) 0 calc(var(--space-4) + 18px);
}

.mail-win-body li {
  margin-bottom: var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-secondary);
}

.mail-win-body li::marker {
  color: var(--text-tertiary);
}

.mail-win-foot {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.mail-win-foot span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  background: var(--brand-gradient);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

/* ---------- 资源页页头：文档站窗口（appWindow 外框；侧栏是文档站一级目录，停在 Getting Started，正文画成灰条） ---------- */
.docs-win-body {
  display: grid;
  grid-template-columns: minmax(0,9fr) minmax(0,16fr);
  min-height: 248px;
}

.docs-win-nav {
  margin: 0;
  padding: var(--space-3) var(--space-2);
  border-right: 1px solid rgba(var(--overlay-rgb),.08);
  list-style: none;
}

.docs-win-nav li {
  padding: 7px 10px;
  border-radius: var(--radius-compact);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.docs-win-nav li.is-on {
  background: rgba(var(--brand-cyan-rgb),.1);
  font-weight: var(--fw-medium);
  color: var(--brand-cyan);
}

.docs-win-page {
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.docs-win-page b {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.docs-win-line {
  display: block;
  height: 6px;
  margin-top: 10px;
  border-radius: 3px;
  background: rgba(var(--overlay-rgb),.07);
}

.docs-win-line.is-short {
  width: 62%;
  margin-bottom: var(--space-4);
}

/* ---------- 套餐额度表 / 完整对比表 ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.plan-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.plan-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.plan-table th,
.plan-table td {
  padding: 13px var(--space-5);
  border-top: 1px solid rgba(var(--overlay-rgb),.06);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.plan-table thead th {
  position: sticky;
  top: 0;
  border-top: 0;
  background: var(--surface);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.plan-table thead th:first-child,
.plan-table tbody th {
  text-align: left;
}

.plan-table tbody th {
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
}

.plan-table td {
  color: var(--text-primary);
}

.plan-table .th-premium {
  color: var(--plan-premium);
}

.plan-table .th-ultimate {
  color: var(--plan-ultimate);
}

.plan-table .group-row th {
  padding-top: var(--space-5);
  background: rgba(var(--overlay-rgb),.02);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-cyan);
}

/* 价格页对比表的分组名链到功能页 */
.plan-table .group-row a {
  text-decoration: underline;
  text-decoration-color: rgba(var(--brand-cyan-rgb),.4);
  text-underline-offset: 3px;
  transition: color var(--hover-ease),text-decoration-color var(--hover-ease);
}

.plan-table .group-row a:hover,
.plan-table .group-row a:focus-visible {
  color: var(--text-primary);
  text-decoration-color: currentColor;
}

.cell-yes,
.cell-no {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

.cell-yes {
  background: var(--brand-cyan);
}

.cell-no {
  background: var(--muted-dark);
}

.cell-text {
  color: var(--text-primary);
}

.cell-unlimited {
  color: var(--brand-cyan);
}

/* 说明气泡（infoTip 输出）：悬停、键盘聚焦或点按（.is-open）时显示 */
.tip {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.tip-btn {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-tertiary);
  cursor: help;
  transition: color var(--hover-ease);
}

.tip-btn .ic {
  width: 14px;
  height: 14px;
}

.tip-btn:hover,
.tip-btn:focus-visible,
.tip.is-open .tip-btn {
  color: var(--text-primary);
}

.tip-bubble {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: min(260px, calc(100vw - 64px));
  padding: 10px 12px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-compact);
  background: var(--surface-raised);
  box-shadow: 0 12px 32px rgba(var(--shadow-rgb),.4);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  color: var(--text-secondary);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hover-ease),visibility var(--hover-ease);
}

.tip:hover .tip-bubble,
.tip-btn:focus-visible + .tip-bubble,
.tip.is-open .tip-bubble {
  opacity: 1;
  visibility: visible;
}

/* 对比表里气泡从行首对齐，窄屏第一列很窄时也不会被表格的 overflow: clip 裁掉 */
.plan-table th:has(.tip) {
  position: relative;
}

.plan-table .tip {
  position: static;
}

.plan-table .tip-tail {
  white-space: nowrap;
}

.plan-table .tip-bubble {
  top: calc(100% - 6px);
  left: var(--space-5);
}

/* 表格末两行往上弹，免得被裁（功能页的额度表可能只有几行） */
.plan-table tbody tr:nth-last-child(-n+2) .tip-bubble {
  top: auto;
  bottom: calc(100% - 6px);
}

/* 套餐对比表（planTable 输出）：列数固定，不做横向滚动。
   overflow: clip 只裁圆角、不形成滚动容器，表头才能贴着页头吸顶。 */
.table-wrap-plans {
  overflow: clip;
}

.table-wrap-plans .plan-table {
  min-width: 0;
  table-layout: fixed;
}

.table-wrap-plans .col-feature {
  width: 40%;
}

.table-wrap-plans thead th {
  top: 80px;
  z-index: 1;
  box-shadow: inset 0 -1px 0 rgba(var(--overlay-rgb),.12);
}

.table-wrap-plans tbody tr:not(.group-row) {
  transition: background-color var(--hover-ease);
}

.table-wrap-plans tbody tr:not(.group-row):hover {
  background: rgba(var(--overlay-rgb),.03);
}

.table-wrap-plans tbody th {
  overflow-wrap: anywhere;
}

/* ---------- 横幅卡：推荐套餐、安全入口、联系我们 ---------- */
.banner-card {
  --glow: var(--brand-cyan-rgb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  border: 1px solid rgba(var(--glow),.3);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg,rgba(var(--glow),.12),transparent 55%),var(--surface);
  transition: transform var(--hover-ease),border-color var(--hover-ease),box-shadow var(--hover-ease);
}

a.banner-card:hover,
a.banner-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--glow),.6);
  box-shadow: 0 0 0 1px rgba(var(--glow),.18),0 18px 40px -12px rgba(var(--glow),.45);
}

.banner-card .banner-copy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  min-width: 0;
}

.banner-card h2,
.banner-card h3 {
  margin: 0;
  font-size: var(--fs-panel);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: -.03em;
}

.banner-card p {
  margin: var(--space-2) 0 0;
  max-width: 640px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-tertiary);
}

.banner-card .banner-kicker {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--glow));
}

.banner-card .button {
  flex: none;
  width: auto;
}

.banner-card.is-premium {
  --glow: var(--plan-premium-accent-rgb);
}

.banner-card.is-ultimate {
  --glow: var(--plan-ultimate-accent-rgb);
}

.banner-card.is-premium h2 {
  color: var(--plan-premium);
}

.banner-card.is-ultimate h2 {
  background: var(--plan-ultimate-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion:reduce) {
  a.banner-card:hover,
  a.banner-card:focus-visible {
    transform: none;
  }
}

/* 文字链接（与「浏览玩法库」同一画法） */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--brand-cyan);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  transition: color var(--hover-ease);
}

.text-link span {
  display: inline-block;
  transition: transform var(--hover-ease);
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--brand-cyan-tint);
}

.text-link:hover span,
.text-link:focus-visible span {
  transform: translate(2px,-2px);
}

.text-link.is-back:hover span {
  transform: translateX(-2px);
}

/* 胶囊链接：「会用到的功能」 */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-link {
  --glow: var(--brand-cyan-rgb);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid rgba(var(--overlay-rgb),.14);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: transform var(--hover-ease),border-color var(--hover-ease),color var(--hover-ease),background var(--hover-ease);
}

.chip-link .ic {
  width: 15px;
  height: 15px;
  color: rgb(var(--glow));
}

.chip-link:hover,
.chip-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--glow),.55);
  background: rgba(var(--glow),.08);
  color: var(--text-primary);
}

/* ---------- 产品总览：六条线卡 ---------- */
.line-card {
  --glow: var(--g);
}

.line-card .line-no {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .12em;
  color: rgb(var(--glow));
}

.line-card .line-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.line-card .line-name strong {
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.line-card h3 {
  font-size: var(--fs-card);
}

.line-card .outcome-relief {
  margin-top: var(--space-1);
}

.line-card .outcome-relief b {
  color: rgb(var(--glow));
  background: rgba(var(--glow),.1);
  border: 1px solid rgba(var(--glow),.35);
}

.line-card .chip-row {
  margin-top: auto;
  padding-top: var(--space-3);
}

.line-card .chip-link {
  min-height: 30px;
  padding: 0 var(--space-3);
}

/* 功能页面包屑的分组层链到 /product#goal-<key> */
.group-block {
  scroll-margin-top: 110px;
}

.group-block+.group-block {
  margin-top: var(--space-12);
}

.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(var(--overlay-rgb),.08);
}

.group-head h3 {
  margin: 0;
  font-size: var(--fs-card);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.group-head p {
  margin: 0;
  max-width: 560px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-tertiary);
  text-align: right;
}

/* ---------- 价格页 ---------- */
.period-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.period-toggle button {
  min-height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-compact);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  transition: background var(--hover-ease),color var(--hover-ease);
}

.period-toggle button:hover {
  color: var(--text-primary);
}

.period-toggle button[aria-pressed="true"] {
  background: var(--brand-gradient);
  color: var(--ink);
}

/* 时长切换在上、说明在下，整组居中 */
.period-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: 0;
  text-align: center;
}

.period-note {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.pricing-page .pricing-grid {
  margin-top: var(--space-8);
  text-align: left;
}

.pricing-page .price-card {
  display: flex;
  flex-direction: column;
}

.pricing-page .price-card ul {
  flex: 1;
}

.pricing-page .price-card .button {
  width: 100%;
  margin-top: auto;
}

.price-extra {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 20px;
  margin: -10px 0 16px;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

/* 赠送 Credits 与说明图标不拆行；气泡以整行为准从行首展开、不超过行宽，免得超出卡片 */
.price-extra .price-credits {
  white-space: nowrap;
}

.price-extra .tip {
  position: static;
}

.price-extra .tip-btn {
  width: 16px;
  height: 16px;
  margin-top: -2px;
}

.price-extra .tip-bubble {
  max-width: 100%;
}

.price-extra .save {
  color: var(--brand-cyan);
  font-weight: var(--fw-semibold);
}

/* 写成 .price-card 下的后代，优先级才压得过 .price-card p；字重沿用 .price-card p 的常规字重（原来写的 semibold 一直没生效） */
.price-card .price-bestfor {
  margin: 0 0 4px;
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--text-secondary);
}

.tax-note {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.buy-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-6) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.buy-grid li {
  display: flex;
  gap: var(--space-4);
}

.buy-grid h3 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.buy-grid p {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-tertiary);
}

.buy-grid .card-ic {
  width: 36px;
  height: 36px;
  --glow: var(--brand-cyan-rgb);
}

.buy-grid .card-ic .ic {
  width: 17px;
  height: 17px;
}

/* ---------- 玩法库：筛选 + 卡片 ---------- */
.filter-bar {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.filter-group>span {
  min-width: 72px;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.filter-chip {
  min-height: 32px;
  padding: 0 var(--space-4);
  border: 1px solid rgba(var(--overlay-rgb),.14);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: border-color var(--hover-ease),background var(--hover-ease),color var(--hover-ease);
}

.filter-chip:hover {
  border-color: rgba(var(--brand-cyan-rgb),.5);
  color: var(--text-primary);
}

.filter-chip[aria-pressed="true"] {
  border-color: rgba(var(--brand-cyan-rgb),.7);
  background: rgba(var(--brand-cyan-rgb),.14);
  color: var(--brand-cyan-tint);
}

.filter-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.filter-reset {
  padding: 0;
  background: none;
  color: var(--brand-cyan);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.filter-empty {
  padding: var(--space-10);
  border: 1px dashed rgba(var(--overlay-rgb),.14);
  border-radius: var(--radius-card);
  text-align: center;
  font-size: var(--fs-body);
  color: var(--text-tertiary);
}

.playbook-card h3 {
  padding-right: var(--space-6);
}

/* ---------- 文章：博客、法律、关于、感谢信 ---------- */
.prose {
  max-width: 720px;
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.8;
  color: var(--text-secondary);
}

/* 区块标题居中时（关于页 Our Story），正文块跟着居中，避免右侧大片空白 */
.prose.is-centered {
  margin-inline: auto;
}

.prose>*:first-child {
  margin-top: 0;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose .table-wrap {
  margin: 0 0 var(--space-5);
}

.prose h2 {
  margin: var(--space-12) 0 var(--space-4);
  font-size: var(--fs-card);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--text-primary);
  scroll-margin-top: 110px;
}

.prose h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.prose strong {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.prose a {
  color: var(--brand-cyan);
  text-decoration: underline;
  text-decoration-color: rgba(var(--brand-cyan-rgb),.35);
  text-underline-offset: 3px;
}

.prose a:hover {
  text-decoration-color: var(--brand-cyan);
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li {
  margin: var(--space-1) 0;
}

.prose li::marker {
  color: var(--brand-cyan);
}

.prose blockquote {
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--brand-cyan);
  border-radius: 0 var(--radius-compact) var(--radius-compact) 0;
  background: rgba(var(--brand-cyan-rgb),.05);
  color: var(--text-primary);
}

.prose blockquote p {
  margin: 0;
}

.prose code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(var(--overlay-rgb),.07);
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: var(--fs-body);
  color: var(--code-value);
}

.prose .plan-table {
  min-width: 480px;
  font-size: var(--fs-body);
}

.prose .plan-table th,
.prose .plan-table td {
  text-align: left;
}

.prose .plan-table thead th {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-small);
}

.letter-card {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--space-10) var(--space-12);
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-card);
  background: linear-gradient(150deg,rgba(var(--plan-ultimate-rgb),.08),transparent 50%),var(--surface);
}

.letter-card .prose {
  max-width: none;
}

.letter-sign {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-body);
  color: var(--text-tertiary);
}

/* 双语长文：中英文各一份，按当前语言显示（博客正文） */
/* 法律页：左侧目录 + 正文 */
.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  gap: var(--space-16);
  align-items: start;
}

.legal-aside {
  position: sticky;
  top: 112px;
  display: grid;
  gap: var(--space-8);
}

.legal-nav,
.legal-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-compact);
  font-size: var(--fs-body);
  color: var(--text-tertiary);
  transition: background var(--hover-ease),color var(--hover-ease);
}

.legal-nav a:hover {
  color: var(--text-primary);
  background: rgba(var(--overlay-rgb),.04);
}

.legal-nav a[aria-current="page"] {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--brand-cyan);
}

.legal-toc-label {
  margin: 0 0 var(--space-2);
  padding-left: 12px;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.legal-toc a {
  display: block;
  padding: 4px 12px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-tertiary);
  transition: color var(--hover-ease);
}

.legal-toc a:hover {
  color: var(--text-primary);
}

.legal-notice {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(var(--overlay-rgb),.08);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-tertiary);
}

.legal-notice a {
  color: var(--brand-cyan);
}

/* ---------- 更新日志：时间线 ---------- */
.timeline {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.timeline:before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 1px;
  background: linear-gradient(var(--brand-cyan),rgba(var(--brand-blue-rgb),.3) 40%,rgba(var(--overlay-rgb),.06));
}

.timeline>li {
  position: relative;
  padding: 0 0 var(--space-12) var(--space-12);
  scroll-margin-top: 110px;
}

/* 旧条目折叠（pages.js）：折叠处那一条只露上半截并渐隐，其后的条目 hidden，下面是「展开」按钮 */
.timeline>li.is-fold-edge {
  max-height: 240px;
  padding-bottom: 0;
  overflow: hidden;
  mask-image: linear-gradient(black 15%,transparent);
}

.timeline-more {
  display: flex;
  justify-content: center;
  margin: var(--space-6) 0 0;
}

.timeline>li:before {
  content: "";
  position: absolute;
  top: 6px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 99px;
  background: var(--ink);
  border: 2px solid var(--brand-cyan);
  box-shadow: 0 0 12px rgba(var(--brand-cyan-rgb),.5);
}

.timeline time {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.timeline h2 {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-panel);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: -.03em;
}

.timeline h2 a:hover {
  color: var(--brand-cyan);
}

.timeline .entry-summary {
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-tertiary);
}

.change-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid rgba(var(--overlay-rgb),.1);
  border-radius: var(--radius-card);
  background: var(--surface);
  list-style: none;
}

.change-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

.change-type {
  flex: none;
  min-width: 40px;
  padding: 0 7px;
  border: 1px solid;
  border-radius: 999px;
  text-align: center;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.7;
  letter-spacing: .04em;
}

.change-type.t-new {
  border-color: rgba(var(--brand-cyan-rgb),.45);
  color: var(--brand-cyan);
}

.change-type.t-improved {
  border-color: rgba(var(--brand-blue-soft-rgb),.5);
  color: var(--brand-blue-tint);
}

.change-type.t-fixed {
  border-color: rgba(var(--overlay-rgb),.18);
  color: var(--text-tertiary);
}

/* ---------- 开发者：接口与代码 ---------- */
.endpoint-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.endpoint-list li {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(var(--overlay-rgb),.1);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.method {
  justify-self: start;
  padding: 0 8px;
  border-radius: 6px;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.9;
  letter-spacing: .04em;
}

.method-get {
  background: rgba(var(--brand-cyan-rgb),.14);
  color: var(--brand-cyan);
}

.method-post {
  background: rgba(var(--brand-blue-rgb),.2);
  color: var(--brand-blue-tint);
}

.method-delete {
  background: rgba(var(--danger-rgb),.14);
  color: var(--danger);
}

.endpoint-list code {
  display: block;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: var(--fs-small);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.endpoint-list p {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-tertiary);
}

.scope {
  padding: 0 8px;
  border: 1px solid rgba(var(--overlay-rgb),.14);
  border-radius: 999px;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: var(--fs-label);
  line-height: 1.8;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.code-block {
  position: relative;
  margin: 0;
  overflow-x: auto;
  padding: var(--space-6);
  border: 1px solid rgba(var(--overlay-rgb),.1);
  border-radius: var(--radius-card);
  background: var(--ink);
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--text-secondary);
}

.code-block .tok-k {
  color: var(--code-keyword);
}

.code-block .tok-s {
  color: var(--code-string);
}

.code-block .tok-v {
  color: var(--code-value);
}

/* 命令清单（给成员） */
.command-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-3);
  margin: 0;
}

.command-list div {
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(var(--overlay-rgb),.1);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.command-list dt {
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: var(--fs-body);
  color: var(--brand-cyan);
}

.command-list dd {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* 权限说明（安全与权限） */
.perm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 8px 14px;
  border: 1px solid rgba(var(--dc-green-bright-rgb),.35);
  border-radius: 999px;
  background: rgba(var(--dc-green-bright-rgb),.08);
  color: var(--dc-green-soft);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.perm-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 var(--space-8);
  margin: 0;
  border-top: 1px solid rgba(var(--overlay-rgb),.08);
}

.perm-list div {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.08);
}

.perm-list dt {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.perm-list dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-tertiary);
}

/* ---------- 客户案例 ---------- */
.case-card {
  --glow: var(--accent-rgb,var(--brand-cyan-rgb));
}

.case-card .case-bar {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: rgb(var(--glow));
}

.case-metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-3);
  width: 100%;
  margin: var(--space-2) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(var(--overlay-rgb),.08);
}

.case-metrics dd {
  margin: 0;
  font-size: var(--fs-card);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.case-metrics dt {
  order: 2;
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--text-tertiary);
}

.case-metrics div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: var(--space-16);
  align-items: start;
}

.case-aside {
  position: sticky;
  top: 112px;
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.case-facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.case-facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-body);
}

.case-facts dt {
  color: var(--text-tertiary);
}

.case-facts dd {
  margin: 0;
  color: var(--text-primary);
}

.case-aside .split-label {
  margin-bottom: var(--space-2);
}

.case-aside .chip-row {
  gap: 6px;
}

.case-aside .text-link {
  display: flex;
}

.case-quote {
  margin: var(--space-10) 0;
  padding: var(--space-6) var(--space-8);
  border-left: 2px solid rgb(var(--accent-rgb,var(--brand-cyan-rgb)));
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: rgba(var(--accent-rgb,var(--brand-cyan-rgb)),.06);
}

.case-quote blockquote {
  margin: 0;
  font-size: var(--fs-card);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--text-primary);
}

.case-quote figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.metric-strip {
  padding: var(--space-10) 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.06);
  background: var(--surface-inset);
}

.metric-strip .stat-list {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.metric-strip .stat-item:nth-child(3) {
  border-left: 1px solid rgba(var(--overlay-rgb),.08);
}

/* ---------- 共建感谢：精选轮播 + 双向跑马灯 ---------- */
.idea-wall {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--space-4);
}

.idea-spot {
  position: relative;
  overflow: hidden;
  padding: var(--space-10) var(--space-8) var(--space-5);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  text-align: center;
}

.idea-spot-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand-cyan);
}

.idea-spot-track {
  display: grid;
}

.idea-spot-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease),visibility .4s;
}

.idea-spot-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.idea-spot-title {
  max-width: 680px;
  margin: 0 auto var(--space-3);
  font-size: var(--fs-panel);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-wrap: balance;
  color: var(--text-primary);
}

.idea-spot-who {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-tertiary);
}

.idea-spot-dots {
  margin-top: var(--space-5);
}

.idea-spot-bar {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--brand-cyan);
}

.idea-spot.is-running .idea-spot-bar {
  animation: idea-bar var(--spot-ms) linear forwards;
}

@keyframes idea-bar {
  to {
    width: 100%;
  }
}

.idea-marquee {
  display: grid;
  gap: var(--space-3);
  overflow: hidden;
  mask-image: linear-gradient(90deg,transparent,rgba(var(--shadow-rgb),1) 6%,rgba(var(--shadow-rgb),1) 94%,transparent);
}

/* 卡片用右外边距而不用 gap：两份内容总宽正好是一份的两倍，平移 50% 才无缝 */
.idea-row {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: idea-marquee var(--dur) linear infinite;
}

.idea-row.is-reverse {
  animation-direction: reverse;
}

.idea-marquee:hover .idea-row,
.idea-marquee:focus-within .idea-row,
.idea-wall.is-paused .idea-row {
  animation-play-state: paused;
}

@keyframes idea-marquee {
  to {
    transform: translateX(-50%);
  }
}

.idea-card {
  flex: none;
  width: 260px;
  margin-inline-end: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.idea-who {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.idea-title {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-primary);
}

.idea-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

@media (max-width: 600px) {
  .idea-spot {
    padding: var(--space-8) var(--space-5) var(--space-4);
  }
  .idea-card {
    width: 220px;
  }
}

/* 减少动效：轮播不自动切、切换无过渡；跑马灯停下，改成可手动横向滚动，复制的那份不显示 */
@media (prefers-reduced-motion: reduce) {
  .idea-spot-slide {
    transition: none;
  }
  .idea-spot.is-running .idea-spot-bar {
    animation: none;
  }
  .idea-marquee {
    overflow-x: auto;
    mask-image: none;
  }
  .idea-row {
    animation: none;
  }
  .idea-card[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- 品牌资源 ---------- */
.asset-card .asset-preview {
  display: grid;
  place-items: center;
  width: 100%;
  height: 160px;
  border-radius: var(--radius-control);
  background: repeating-conic-gradient(var(--surface-inset) 0 25%,var(--surface) 0 50%) 0 0/20px 20px;
}

.asset-card .asset-preview img {
  max-width: 70%;
  max-height: 96px;
}

.asset-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}

.asset-meta small {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.swatch {
  overflow: hidden;
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.swatch-color {
  height: 96px;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.08);
}

.swatch-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.swatch-meta p {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.swatch-meta code {
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-compact);
  background: transparent;
  color: var(--text-tertiary);
  transition: color var(--hover-ease),border-color var(--hover-ease);
}

.copy-btn:hover,
.copy-btn:focus-visible {
  border-color: rgba(var(--brand-cyan-rgb),.55);
  color: var(--brand-cyan);
}

.copy-btn .ic {
  width: 14px;
  height: 14px;
}

.gradient-bar {
  height: 72px;
  margin-top: var(--space-4);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg,var(--brand-cyan-tint),var(--brand-cyan) 40%,var(--brand-blue));
}

.gradient-label {
  margin: var(--space-8) 0 0;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.type-specimen {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.type-specimen .specimen-name {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -.04em;
}

.type-specimen .specimen-weights {
  display: flex;
  gap: var(--space-6);
  margin: var(--space-4) 0 0;
  font-size: var(--fs-card);
}

.type-specimen .specimen-weights span:nth-child(1) {
  font-weight: var(--fw-regular);
}

.type-specimen .specimen-weights span:nth-child(2) {
  font-weight: var(--fw-medium);
}

.type-specimen .specimen-weights span:nth-child(3) {
  font-weight: var(--fw-semibold);
}

.type-specimen p.desc {
  max-width: 420px;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-tertiary);
}

.boiler {
  display: grid;
  gap: var(--space-4);
}

.boiler-item {
  padding: var(--space-5) var(--space-6);
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.boiler-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.boiler-item header span {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.boiler-item p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text-secondary);
}

/* ---------- 博客 ---------- */
.post-feature {
  --glow: var(--brand-cyan-rgb);
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-10);
  border: 1px solid rgba(var(--overlay-rgb),.14);
  border-radius: var(--radius-card);
  background: radial-gradient(70% 120% at 100% 0%,rgba(var(--brand-blue-rgb),.18),transparent 60%),linear-gradient(150deg,rgba(var(--glow),.1),transparent 50%),var(--surface);
  transition: transform var(--hover-ease),border-color var(--hover-ease),box-shadow var(--hover-ease);
}

.post-feature:hover,
.post-feature:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--glow),.6);
  box-shadow: 0 0 0 1px rgba(var(--glow),.18),0 18px 40px -12px rgba(var(--glow),.45);
}

.post-feature h2 {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-panel);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: -.03em;
}

.post-feature p {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-tertiary);
}

.post-feature .post-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16/10;
  border: 1px solid rgba(var(--overlay-rgb),.08);
  border-radius: var(--radius-control);
  background: radial-gradient(circle at 30% 30%,rgba(var(--brand-cyan-rgb),.3),transparent 50%),radial-gradient(circle at 70% 70%,rgba(var(--brand-blue-rgb),.35),transparent 55%),var(--ink);
}

.post-feature .post-art img {
  width: 96px;
  opacity: .9;
}

.post-meta {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.archive-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(var(--overlay-rgb),.08);
}

.archive-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.08);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  transition: color var(--hover-ease);
}

.archive-list a small {
  flex: none;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.archive-list a:hover {
  color: var(--text-primary);
}

/* ---------- 响应式 ---------- */
@media (max-width:1080px) {
  .card-grid.cols-4,
  .swatch-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .buy-grid,
  .command-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .case-layout {
    grid-template-columns: minmax(0,1fr);
  }
  .case-aside {
    position: static;
  }
  /* 价格页宣传卡：右栏变窄，去掉一句话卖点，价格的时长另起一行，叠放间距随之收紧 */
  .promo-stack {
    height: 240px;
  }
  .promo-card.is-ultimate {
    top: 74px;
  }
  .promo-card.is-brand {
    top: 148px;
  }
  .promo-line {
    display: none;
  }
  .promo-price small {
    display: block;
  }
}

@media (max-width:820px) {
  .dc-oauth-frame {
    max-width: none;
    margin-inline-start: 0;
  }
  .table-wrap-plans thead th {
    top: 69px;
  }
  .page-section {
    padding: var(--space-16) 0;
  }
  .page-hero {
    padding: var(--space-10) 0 var(--space-16);
  }
  .page-hero-grid.has-visual,
  [data-page="pricing"] .page-hero-grid.has-visual,
  .split,
  .split.is-wide-left,
  .post-feature {
    grid-template-columns: minmax(0,1fr);
  }
  .promo-stack {
    display: grid;
    height: auto;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--space-2);
  }
  .promo-card {
    position: static;
    display: block;
    width: auto;
    padding: var(--space-3);
  }
  .promo-card.is-premium,
  .promo-card.is-ultimate,
  .promo-card.is-brand,
  .promo-card:hover {
    transform: none;
  }
  .promo-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .promo-name {
    font-size: var(--fs-body);
  }
  .promo-line {
    display: none;
  }
  .promo-price {
    margin-top: var(--space-2);
    font-size: var(--fs-body);
    text-align: left;
  }
  .promo-price small {
    display: block;
  }
  .card-grid,
  .card-grid.cols-2 {
    grid-template-columns: minmax(0,1fr);
  }
  .step-list {
    grid-template-columns: minmax(0,1fr);
  }
  .banner-card,
  .type-specimen {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6);
  }
  .banner-card .banner-copy {
    flex-direction: column;
  }
  .group-head {
    display: block;
  }
  .group-head p {
    margin-top: var(--space-2);
    text-align: left;
  }
  .legal-layout {
    grid-template-columns: minmax(0,1fr);
    gap: var(--space-8);
  }
  .legal-aside {
    position: static;
  }
  .legal-toc {
    display: none;
  }
  .perm-list {
    grid-template-columns: minmax(0,1fr);
  }
  .letter-card {
    padding: var(--space-6);
  }
  .metric-strip .stat-list {
    grid-template-columns: minmax(0,1fr);
    gap: var(--space-6);
  }
  .metric-strip .stat-item+.stat-item {
    border-left: 0;
  }
  .page-hero .hero-actions {
    flex-direction: row;
    max-width: none;
  }
}

@media (max-width:600px) {
  .table-wrap-plans .col-feature {
    width: 34%;
  }
  .table-wrap-plans th,
  .table-wrap-plans td {
    padding: var(--space-3) var(--space-1);
    font-size: var(--fs-small);
  }
  .table-wrap-plans tbody th,
  .table-wrap-plans thead th:first-child {
    padding-right: var(--space-2);
    padding-left: var(--space-4);
  }
  .table-wrap-plans thead th {
    font-size: var(--fs-label);
    letter-spacing: .04em;
  }
  .shell {
    width: min(calc(100% - 32px),var(--max));
  }
  .card-grid.cols-4,
  .swatch-grid,
  .buy-grid,
  .command-list {
    grid-template-columns: minmax(0,1fr);
  }
  .endpoint-list li {
    grid-template-columns: minmax(0,1fr);
  }
  .perm-list div {
    grid-template-columns: minmax(0,1fr);
    gap: var(--space-1);
  }
  .page-hero .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-hero .hero-actions .button {
    width: 100%;
  }
  .filter-group>span {
    min-width: 0;
    width: 100%;
  }
  .case-metrics {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

.card-divider {
  width: 100%;
  height: 1px;
  margin: var(--space-2) 0;
  background: rgba(var(--overlay-rgb),.08);
}

.info-card .split-label {
  margin: 0;
}

.info-card .card-foot b {
  margin-right: 8px;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

.page-hero-visual .code-block {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- 功能页：安装 /install、登录 /login（信息架构 §4.7、§4.8：只有 logo 与返回首页） ---------- */
.flow-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.08);
  background: rgba(var(--ink-rgb),.92);
  backdrop-filter: blur(16px);
}

.flow-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.flow-header .brand img {
  height: 30px;
  width: auto;
  display: block;
}

.flow-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - 72px);
  padding: var(--space-16) 0 var(--space-20);
}

.flow-page:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 640px;
  left: 50%;
  top: -320px;
  transform: translateX(-50%);
  background: radial-gradient(circle,rgba(var(--brand-cyan-rgb),.12),transparent 64%);
  pointer-events: none;
}

.flow-shell {
  width: min(calc(100% - 32px),640px);
  margin: 0 auto;
  text-align: center;
}

.flow-shell.is-narrow {
  width: min(calc(100% - 32px),460px);
}

.flow-shell .eyebrow {
  justify-content: center;
}

.flow-shell h1 {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-panel);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -.03em;
}

.flow-shell h1 .h-part,
.flow-shell h1 strong {
  display: inline-block;
}

.flow-shell h1 strong {
  font-weight: inherit;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.flow-lead {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.flow-card {
  margin-top: var(--space-8);
  padding: var(--space-8);
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-align: left;
  box-shadow: 0 28px 70px -30px rgba(var(--shadow-rgb),.6);
}

.flow-panel {
  --glow: var(--brand-cyan-rgb);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.flow-panel h2 {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-card);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.flow-desc {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-tertiary);
}

.flow-panel .install-status {
  width: 100%;
  margin-top: var(--space-2);
  border-top: 1px solid var(--surface-border);
}

.flow-panel .check-list {
  margin-top: var(--space-2);
}

.flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-3);
}

.flow-actions .button {
  width: auto;
  font-size: var(--fs-body);
}

.flow-actions .button[data-copy-invite] {
  font-size: var(--fs-small);
}

.flow-wait {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.flow-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--brand-cyan-rgb),.25);
  border-top-color: var(--brand-cyan);
  border-radius: 99px;
  animation: flow-spin .9s linear infinite;
}

@keyframes flow-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .flow-spinner {
    animation: none;
  }
}

.flow-preview {
  width: 100%;
  margin-top: var(--space-2);
}

.flow-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.flow-demo>span {
  width: 100%;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.flow-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-tertiary);
}

.flow-foot a:hover {
  color: var(--text-primary);
}

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.login-card h1 {
  margin: var(--space-2) 0 0;
}

.login-mark {
  width: 48px;
  height: 48px;
}

.login-discord {
  width: 100%;
  margin-top: var(--space-3);
  font-size: var(--fs-body);
}

.login-discord .ic {
  width: 18px;
  height: 18px;
  color: var(--ink);
}

.login-scope {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.login-links {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.login-links li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  text-align: left;
}

@media (max-width:600px) {
  .flow-card {
    padding: var(--space-5);
  }
  .flow-actions .button {
    width: 100%;
  }
  .login-links li {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- 资源中心：站内搜索 ---------- */
.search-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  max-width: 720px;
}

.search-field {
  flex: 1 1 360px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height-primary);
  padding: 0 var(--space-4);
  border: 1px solid rgba(var(--overlay-rgb),.16);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text-tertiary);
  transition: border-color var(--hover-ease),box-shadow var(--hover-ease);
}

.search-field:focus-within {
  border-color: rgba(var(--brand-cyan-rgb),.6);
  box-shadow: 0 0 0 3px rgba(var(--brand-cyan-rgb),.12);
}

.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-body);
}

.search-field input::placeholder {
  color: var(--text-tertiary);
}

.search-results {
  max-width: 720px;
  margin-top: var(--space-4);
}

.search-results .filter-count {
  margin: 0 0 var(--space-2);
}

.search-results ul {
  display: grid;
  gap: var(--space-2);
  max-height: 420px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-results a {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 2px var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(var(--overlay-rgb),.1);
  border-radius: var(--radius-control);
  background: var(--surface);
  transition: border-color var(--hover-ease);
}

.search-results a:hover,
.search-results a:focus-visible {
  border-color: rgba(var(--brand-cyan-rgb),.55);
}

.search-group {
  grid-row: span 2;
  align-self: start;
  padding: 0 7px;
  border: 1px solid rgba(var(--overlay-rgb),.18);
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.8;
  color: var(--text-tertiary);
}

.search-results strong {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.search-results small {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-tertiary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 命令参考：表格式清单 ---------- */
.command-list.is-table {
  grid-template-columns: minmax(0,1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.command-list.is-table div {
  display: grid;
  grid-template-columns: 140px minmax(0,1fr) auto;
  align-items: baseline;
  gap: var(--space-4);
  border: 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid rgba(var(--overlay-rgb),.06);
}

.command-list.is-table div:first-child {
  border-top: 0;
}

.command-list.is-table dd {
  margin: 0;
}

.command-list .cmd-who {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  white-space: nowrap;
}

@media (max-width:600px) {
  .command-list.is-table div {
    grid-template-columns: minmax(0,1fr);
  }
  .command-list .cmd-who {
    white-space: normal;
  }
}

/* 带 hidden 的元素一律不显示（组件自己的 display 不能盖过它） */
.page-main [hidden] {
  display: none!important;
}

/* 404：插图底色与页面底色相同，直接铺；上下留白用负外边距收掉；去掉页头右上角的亮斑 */
[data-page="404"] .page-hero:before {
  display: none;
}

.not-found-art {
  display: block;
  width: min(100%,740px);
  height: auto;
  margin: -20px auto -24px;
}

.not-found-art + h1 {
  margin-top: 0;
}

/* 手机上插图放大，两侧的星云裁到屏幕外，404 字样不至于太小 */
@media (max-width:600px) {
  .not-found-art {
    width: 154%;
    max-width: none;
    margin: -12px -27% -8px;
  }
}