/* ==========================================================================
   MusicTag Web Portal — Components & Layout
   依赖 tokens.css（必须先加载）。类名采用语义化命名，业务模板只组合不嵌套样式。
   ========================================================================== */

/* ── 1. Reset & Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: none;
}

h1, h2, h3, h4, p, figure, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--c-ink);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

code, kbd, pre, .mono { font-family: var(--f-mono); }

:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: rgba(42, 68, 216, .16); color: var(--c-ink); }

/* 自定义滚动条：细、无边框感 */
* { scrollbar-width: thin; scrollbar-color: #C9C9C4 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C9C9C4; border-radius: var(--r-full); border: 2px solid var(--c-canvas); }
::-webkit-scrollbar-thumb:hover { background: #AFADA8; }

/* 键盘可达性：鼠标点击不显示焦点环 */
:focus:not(:focus-visible) { outline: none; }

/* ── 2. Layout ───────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (min-width: 640px)  { .container { padding-inline: var(--s-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--s-8); } }

.container--narrow { max-width: var(--w-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }

.section--dark { background: var(--c-dark); color: var(--c-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-on-dark); }

.section--tint { background: var(--c-surface-sunk); }

.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-5 { display: flex; flex-direction: column; gap: var(--s-5); }
.stack-6 { display: flex; flex-direction: column; gap: var(--s-6); }

.row      { display: flex; align-items: center; gap: var(--s-3); }
.row-2    { display: flex; align-items: center; gap: var(--s-2); }
.row-btwn { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.row-wrap { flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--center { justify-content: center; }

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px)  { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px)  { .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.mt-auto { margin-top: auto; }

/* ── 3. Typography ───────────────────────────────────────────────────── */
.eyebrow {
  font-size: var(--t-micro);
  font-weight: var(--w-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.title-display {
  font-size: var(--t-display);
  font-weight: var(--w-bold);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.title-h2 { font-size: var(--t-h2); }
@media (min-width: 768px) { .title-h2 { font-size: 26px; } }

.title-h3 { font-size: var(--t-h3); }

.lead { font-size: var(--t-lead); line-height: 1.75; color: var(--c-ink-2); }
.text-body { font-size: var(--t-body); color: var(--c-ink-2); line-height: 1.75; }
.text-caption { font-size: var(--t-caption); color: var(--c-ink-2); line-height: 1.7; }
.text-micro { font-size: var(--t-micro); color: var(--c-ink-3); }
.text-mono { font-family: var(--f-mono); }
.text-brand { color: var(--c-brand); }
.text-green { color: var(--c-green); }
.text-brass { color: var(--c-brass); }

.section-head { max-width: 620px; }
.section-head .lead { margin-top: var(--s-3); }
.measure { max-width: 660px; }
.measure-sm { max-width: 480px; }
.center-x { margin-inline: auto; }
.center-text { text-align: center; }

/* ── 4. Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 42px;
  padding-inline: var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--primary { background: var(--c-brand); color: #fff; box-shadow: var(--sh-1); }
.btn--primary:hover { background: var(--c-brand-strong); }

.btn--secondary { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--secondary:hover { background: var(--c-surface-sunk); border-color: #C6C6C0; }

.btn--ghost { color: var(--c-ink-2); }
.btn--ghost:hover { background: rgba(22, 24, 28, .05); color: var(--c-ink); }

.btn--onDark { background: rgba(255, 255, 255, .07); color: var(--c-on-dark); border-color: var(--c-dark-line-2); }
.btn--onDark:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); }

.btn--solidOnDark { background: var(--c-brand); color: #fff; }
.btn--solidOnDark:hover { background: var(--c-brand-strong); }

.btn--lg { height: 50px; padding-inline: var(--s-6); font-size: var(--t-lead); border-radius: var(--r-md); }
.btn--sm { height: 32px; padding-inline: var(--s-3); font-size: var(--t-caption); border-radius: 7px; }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn .spin { border-color: currentColor; border-top-color: transparent; }

/* 文字型链接按钮 */
.link--tap { padding: 8px 10px; margin: -8px -10px; }
.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  color: var(--c-brand);
  border-radius: 6px;
  transition: color var(--d-fast) var(--e-out), gap var(--d-fast) var(--e-out);
}
.link:hover { color: var(--c-brand-strong); gap: 9px; }

/* ── 5. Forms ────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; }

.label {
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--c-ink-2);
}
.label .req { color: var(--c-red); margin-left: 2px; }
.label .hint { font-weight: var(--w-regular); color: var(--c-ink-3); }

/* 表单控件：纯白底 + 可见描边。
   后台存在"下沉灰面板"承载表单，若控件也用同色下沉底会完全糊在一起，
   因此统一用白底描边，保证任何底色上都有清晰边界。 */
.input, .select, .textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--t-body);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  transition: background-color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.input, .select { height: 44px; padding-inline: var(--s-4); }
.input::placeholder, .textarea::placeholder { color: var(--c-ink-3); }

.input:hover, .select:hover, .textarea:hover { border-color: #C2C2BC; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: var(--focus-ring);
}
.input.is-readonly { background: var(--c-surface-sunk); color: var(--c-ink-2); border-color: var(--c-line); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(176, 36, 27, .12);
}

.textarea { min-height: 96px; padding: var(--s-3) var(--s-4); line-height: 1.7; resize: vertical; }
.textarea--code {
  font-family: var(--f-mono);
  font-size: var(--t-body-s);
  background: var(--c-dark);
  color: #B9E6CB;
  border-color: var(--c-dark-2);
  min-height: 260px;
}
.textarea--code:focus { background: var(--c-dark); border-color: var(--c-brand-soft); color: #CDEFD9; box-shadow: 0 0 0 3px rgba(108, 126, 238, .25); }

.select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23555B64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  cursor: pointer;
}

.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.check input {
  appearance: none;
  flex: none;
  width: 18px; height: 18px;
  margin: 2px 0 0;
  border: 1px solid var(--c-line-strong);
  border-radius: 5px;
  background: var(--c-surface);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.check input:checked { background: var(--c-brand); border-color: var(--c-brand); }
.check input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 10px; height: 6px;
  margin: 3px auto 0;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.check input:focus-visible { box-shadow: var(--focus-ring); }

/* ── 6. Cards & Surfaces ─────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.card--pad { padding: var(--s-6); }
@media (min-width: 640px) { .card--pad { padding: var(--s-8); } }
.card--flat { box-shadow: none; }
.card--sunken { background: var(--c-surface-sunk); border-color: transparent; }

.card--interactive { transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out); }
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--c-line-strong); }

/* 分区标题：一条短横线 + 标题，克制的信息分组 */
.part-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.part-head::before { content: ""; width: 20px; height: 1px; background: var(--c-line-strong); flex: none; }

.divider { height: 1px; background: var(--c-line); border: 0; margin: 0; }

/* ── 7. Badges ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding-inline: 9px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: var(--t-micro);
  font-weight: var(--w-semi);
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge--brand { background: var(--c-brand-tint); color: var(--c-brand); border-color: var(--c-brand-line); }
.badge--brass { background: var(--c-brass-tint); color: var(--c-brass); border-color: var(--c-brass-line); }
.badge--green { background: var(--c-green-tint); color: var(--c-green); border-color: var(--c-green-line); }
.badge--red   { background: var(--c-red-tint);   color: var(--c-red);   border-color: var(--c-red-line); }
.badge--amber { background: var(--c-amber-tint); color: var(--c-amber); border-color: var(--c-amber-line); }
.badge--muted { background: var(--c-surface-sunk); color: var(--c-ink-2); border-color: var(--c-line); }

/* 状态点 */
.dot { width: 7px; height: 7px; border-radius: var(--r-full); flex: none; }
.dot--live { background: var(--c-green); box-shadow: 0 0 0 3px rgba(27, 113, 71, .14); animation: pulse 2.4s var(--e-in-out) infinite; }
.dot--idle { background: var(--c-ink-3); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(27, 113, 71, .16); }
  50%      { box-shadow: 0 0 0 6px rgba(27, 113, 71, .05); }
}

/* ── 8. Navigation ───────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.nav.is-stuck { box-shadow: var(--sh-1); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--h-nav);
}

.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--c-ink);
  color: #fff;
  transition: transform var(--d-mid) var(--e-spring);
}
.brand:hover .brand__mark { transform: scale(1.06) rotate(-3deg); }
.brand__name { font-size: 16px; font-weight: var(--w-bold); letter-spacing: -0.025em; line-height: 1.2; }
.brand__sub { font-size: 11px; color: var(--c-ink-3); letter-spacing: .01em; }

.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  color: var(--c-ink-2);
  white-space: nowrap;
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.nav__link .ico { font-size: 12px; color: var(--c-ink-3); transition: color var(--d-fast) var(--e-out); }
.nav__link:hover { background: rgba(22, 24, 28, .045); color: var(--c-ink); }
.nav__link:hover .ico { color: var(--c-ink-2); }
.nav__link.is-active { color: var(--c-ink); background: rgba(22, 24, 28, .05); font-weight: var(--w-semi); }
.nav__link.is-active .ico { color: var(--c-brand); }

.nav__actions { display: flex; align-items: center; gap: var(--s-2); }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out);
}
.nav__toggle:hover { background: var(--c-surface-sunk); }
.nav__toggle .ico { font-size: 14px; }

.nav__drawer { display: none; border-top: 1px solid var(--c-line); background: var(--c-surface); }
.nav__drawer.is-open { display: block; animation: dropIn var(--d-mid) var(--e-out); }
.nav__drawer-inner { display: flex; flex-direction: column; padding-block: var(--s-2) var(--s-4); }
.nav__drawer .nav__link { height: 46px; justify-content: space-between; border-radius: var(--r-sm); }
.nav__drawer .nav__link:hover, .nav__drawer .nav__link.is-active { background: var(--c-surface-sunk); }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (max-width: 539px) {
  .nav__cta-desktop { display: none; }
}

/* ── 9. Page header（内页统一头部）──────────────────────────────────── */
.page-head { padding-block: var(--s-12) var(--s-10); }
@media (min-width: 768px) { .page-head { padding-block: var(--s-16) var(--s-12); } }
.page-head__title { margin-top: var(--s-4); }

/* ── 10. Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto 0;
  height: 620px;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(42, 68, 216, .30), transparent 70%),
    radial-gradient(45% 55% at 82% 12%, rgba(150, 104, 30, .16), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 20%, #000, transparent);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 20%, #000, transparent);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; padding-block: clamp(72px, 9vw, 128px); }
/* 深色面上的标题需显式继承为浅色，否则会落到 --c-ink 深色值 */
.hero :is(h1, h2, h3, h4) { color: inherit; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding-inline: var(--s-3);
  border: 1px solid var(--c-dark-line-2);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .04);
  font-size: var(--t-caption);
  color: var(--c-on-dark-2);
}
.status-pill .mono { color: var(--c-on-dark); font-size: var(--t-micro); }

.hero__title { margin-top: var(--s-6); }
.hero__lead { margin-top: var(--s-5); max-width: 640px; }
/* 居中的标题组下方，按钮必须真正居中：
   flex 容器上 text-align 不生效，必须显式 justify-content。 */
.hero__actions {
  margin-top: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}
.hero__actions .btn--primary { background: var(--c-brand); }
.hero__actions .btn--primary:hover { background: var(--c-brand-strong); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-1);
  margin-top: clamp(48px, 6vw, 80px);
}
.feature {
  padding: var(--s-5) var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--c-dark-line);
  transition: background-color var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.feature:hover { background: rgba(255, 255, 255, .06); border-color: var(--c-dark-line-2); transform: translateY(-2px); }
.feature__head { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); font-weight: var(--w-semi); color: var(--c-on-dark); }
.feature__head .ico { color: var(--c-brand-soft); font-size: 13px; }
.feature__body { margin-top: var(--s-3); font-size: var(--t-caption); line-height: 1.7; color: var(--c-on-dark-2); }

/* ── 11. Plans / Pricing ─────────────────────────────────────────────── */
.plans { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out);
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.plan--featured { border-color: var(--c-brand-line); box-shadow: var(--sh-2); }
.plan--featured:hover { box-shadow: var(--sh-3); }

/* 徽标进入文档流：绝对定位的徽标不参与排版，
   一旦文案换行就会顶到标题上，且两张卡的头部高度无法保证一致。 */
.plan__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.plan__headtext { flex: 1 1 auto; min-width: 0; }
.plan__ribbon { flex: none; }

.plan__body { padding: var(--s-8) var(--s-6) 0; }
.plan__name { font-size: var(--t-sub); }
/* 固定两行高度：保证描述长短不同时，下面的一格仍落在同一水平线 */
.plan__desc {
  margin-top: var(--s-2);
  font-size: var(--t-caption);
  color: var(--c-ink-2);
  line-height: 1.7;
  min-height: 42px;
}

.plan__price { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--c-line); }
.plan__amount { font-size: var(--t-price); font-weight: var(--w-bold); letter-spacing: -0.04em; line-height: 1; }
.plan__was { font-size: var(--t-body); color: var(--c-ink-3); text-decoration: line-through; }
.plan__unit { font-size: var(--t-caption); color: var(--c-ink-2); }

.plan__list { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.plan__list li { display: flex; gap: var(--s-3); font-size: var(--t-body); color: var(--c-ink-2); line-height: 1.6; }
.plan__list .ico { color: var(--c-green); font-size: 13px; margin-top: 4px; flex: none; }
.plan__list b { color: var(--c-ink); font-weight: var(--w-semi); }

/* 两张卡的 CTA 必须同宽同高，视觉上才是一组 */
.plan__foot { padding: var(--s-6); margin-top: auto; }
.plan__foot .btn { width: 100%; }

/* ── 12. Tables ──────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--t-body-s); }
.table th, .table td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: middle; }
.table thead th {
  position: sticky;
  top: 0;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--c-ink-2);
  white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid var(--c-line); transition: background-color var(--d-fast) var(--e-out); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-surface-2); }
.table td.nowrap, .table th.nowrap { white-space: nowrap; }
.table .num { font-variant-numeric: tabular-nums; }
.table .mono { font-size: var(--t-caption); }
.table--dense th, .table--dense td { padding: 10px var(--s-3); }

.matrix thead th { background: var(--c-surface-sunk); }
.matrix tbody td:first-child { font-weight: var(--w-semi); color: var(--c-ink); }

/* ── 13. Tabs ────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: var(--s-1);
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding-inline: var(--s-4);
  border: 0;
  background: none;
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  color: var(--c-ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out);
}
.tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: 50%;
  transition: transform var(--d-mid) var(--e-out);
}
.tab:hover { color: var(--c-ink); }
.tab.is-active { color: var(--c-ink); font-weight: var(--w-semi); }
.tab.is-active::after { transform: scaleX(1); }
.tab .ico { font-size: 12px; color: var(--c-ink-3); }
.tab.is-active .ico { color: var(--c-brand); }

/* ── 14. Stats ───────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--s-4); }
.stat {
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.stat:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.stat__label { font-size: var(--t-caption); color: var(--c-ink-2); }
.stat__value { margin-top: var(--s-2); font-size: 26px; font-weight: var(--w-bold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__foot { margin-top: var(--s-2); font-size: var(--t-micro); color: var(--c-ink-3); display: flex; align-items: center; gap: 6px; }

/* ── 15. Modal / Backdrop ────────────────────────────────────────────── */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: rgba(14, 16, 20, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), visibility var(--d-base) var(--e-out);
}
.backdrop.is-open { opacity: 1; visibility: visible; }

.modal {
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: var(--s-6);
  transform: translateY(10px) scale(.98);
  transition: transform var(--d-mid) var(--e-spring);
}
.backdrop.is-open .modal { transform: translateY(0) scale(1); }
.modal__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin-inline: auto;
  border-radius: var(--r-md);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  font-size: 17px;
}
.modal__title { margin-top: var(--s-4); font-size: var(--t-sub); text-align: center; }
.modal__sub { margin-top: 6px; font-size: var(--t-caption); color: var(--c-ink-2); text-align: center; }

/* 面板（订单 / 支付结果等主内容区） */
.panel {
  margin-top: var(--s-6);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
@media (min-width: 640px) { .panel { padding: var(--s-8); } }

/* ── 16. Terminal / Code ─────────────────────────────────────────────── */
.term {
  background: var(--c-dark);
  border: 1px solid var(--c-dark-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.term__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 11px var(--s-4);
  border-bottom: 1px solid var(--c-dark-line);
  font-size: var(--t-micro);
  color: var(--c-on-dark-3);
}
.term__dots { display: flex; gap: 6px; }
.term__dots i { width: 9px; height: 9px; border-radius: var(--r-full); display: block; }
.term__dots i:nth-child(1) { background: #3A3F49; }
.term__dots i:nth-child(2) { background: #2A2E36; }
.term__dots i:nth-child(3) { background: #1F232B; }

.term__body {
  padding: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-caption);
  line-height: 1.8;
  color: var(--c-on-dark-2);
  overflow-x: auto;
}
.term__body .k { color: #8FA9F8; }
.term__body .p { color: #C6D2F5; }
.term__body pre { margin: 0; white-space: pre; }
.term__label {
  display: block;
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-dark-line);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.term__label + pre { margin-top: var(--s-2); }

/* 深色代码块（密钥回显等） */
.codebox {
  background: var(--c-dark);
  border: 1px solid var(--c-dark-2);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-caption);
  line-height: 1.8;
  color: #A8DEBE;
  user-select: all;
  overflow-x: auto;
}

/* ── 17. Check-list（功能点纵向）────────────────────────────────────── */
.checklist { display: flex; flex-direction: column; gap: var(--s-5); }
.checkitem { display: flex; gap: var(--s-4); }
.checkitem__icon {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  font-size: 15px;
}
.checkitem__icon--brand { background: rgba(42, 68, 216, .12); color: var(--c-brand); }
.checkitem__icon--green { background: rgba(27, 113, 71, .11); color: var(--c-green); }
.checkitem__icon--brass { background: rgba(150, 104, 30, .12); color: var(--c-brass); }
.checkitem__title { font-size: var(--t-body); font-weight: var(--w-semi); }
.checkitem__text { margin-top: 5px; font-size: var(--t-caption); line-height: 1.7; color: var(--c-ink-2); }

/* ── 18. Steps ───────────────────────────────────────────────────────── */
.steps { display: grid; gap: var(--s-8); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.step { display: flex; flex-direction: column; gap: var(--s-3); }
.step__no {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
}
@media (min-width: 760px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 13px; left: 32px; right: calc(-1 * var(--s-6));
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--c-line-strong) 0 4px, transparent 4px 8px);
  }
}
.step__title { font-size: var(--t-h3); }
.step__text { font-size: var(--t-caption); color: var(--c-ink-2); line-height: 1.7; }

/* 方案 / 支付渠道选择卡 */
.choice {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.choice:hover { border-color: #C0CEDB; transform: translateY(-2px); box-shadow: var(--sh-1); }
.choice.is-selected { border-color: var(--c-brand); box-shadow: 0 0 0 1px var(--c-brand) inset, var(--sh-2); background: var(--c-brand-tint); }
.choice__name { font-size: var(--t-body); font-weight: var(--w-semi); padding-right: var(--s-4); }
.choice__text { margin-top: var(--s-2); font-size: var(--t-caption); color: var(--c-ink-2); line-height: 1.65; }
.choice__price { margin-top: var(--s-3); display: flex; align-items: baseline; gap: var(--s-2); }
.choice__price .amount { font-size: 28px; font-weight: var(--w-bold); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.choice__price .was { font-size: var(--t-caption); color: var(--c-ink-3); text-decoration: line-through; }
.choice__flag {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
}

.pay-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .pay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 19. States: loading / empty / skeleton ─────────────────────────── */
.spin {
  width: 16px; height: 16px;
  border: 2px solid var(--c-brand);
  border-top-color: transparent;
  border-radius: var(--r-full);
  display: inline-block;
  animation: spin .7s linear infinite;
}
.spin--lg { width: 26px; height: 26px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-16) var(--s-5);
}
.state__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-lg);
  background: var(--c-surface-sunk);
  color: var(--c-ink-3);
  font-size: 20px;
}
.state__title { font-size: var(--t-body); font-weight: var(--w-semi); }
.state__text { font-size: var(--t-caption); color: var(--c-ink-2); line-height: 1.7; max-width: 380px; }

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, #ECECE8 25%, #F6F6F4 37%, #ECECE8 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s var(--e-in-out) infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.skeleton-card { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }

/* ── 20. Toast ───────────────────────────────────────────────────────── */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 11px var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-dark);
  color: var(--c-on-dark);
  font-size: var(--t-caption);
  box-shadow: var(--sh-3);
  animation: toastIn var(--d-mid) var(--e-spring);
}
.toast .ico { font-size: 12px; }
.toast--ok .ico { color: #6FD79E; }
.toast--err .ico { color: #F29A92; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 21. Utilities ───────────────────────────────────────────────────── */
.hide { display: none !important; }
.d-none-sm { display: revert; }
@media (max-width: 539px) { .d-none-sm { display: none !important; } }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }

/* 入场动画：逐项错落淡入 */
.fade-up { animation: fadeUp var(--d-slow) var(--e-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 滚动进入视口时触发（由 ui.js 添加 .is-in） */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── 21b. 后台控制台（Admin console）───────────────────────────────────
   后台表单字段密集，若沿用前后台的"裸 label + 灰底输入框"会全部糊成一片。
   这里改用四层结构：面板 → 通道/分区 → 字段栅格 → 字段，
   每个字段带序号与说明，让密集表单在扫读时仍有清晰层级。          */

/* 表单 + 说明双栏：表单占主宽，说明与结果固定在侧边，不抢注意力 */
.workbench {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) { .workbench { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.workbench > aside { position: sticky; top: calc(var(--h-nav) + var(--s-4)); }

/* 面板：一条边框、一个抬头条，body 内才是内容 */
.pane {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-sunk);
}
.pane__titling { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.pane__icon {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-brand);
  font-size: 14px;
}
.pane__title { font-size: var(--t-body); font-weight: var(--w-semi); }
.pane__sub { margin-top: 3px; font-size: var(--t-caption); color: var(--c-ink-2); line-height: 1.65; }
.pane__body { padding: var(--s-6); }
.pane--flush .pane__body { padding: 0; }

/* 字段栅格：两列，窄屏单列 */
.fgrid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 719px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }
/* 四列变体：仅在够宽时生效，窄屏自动回落到单列 */
.fgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .fgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px)  { .fgrid--4 { grid-template-columns: minmax(0, 1fr); } }

/* 单个字段 */
.f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.f--full { grid-column: 1 / -1; }

.f__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--c-ink-2);
}
/* 字段序号：密集表单里靠它建立"这一块有几步"的空间感 */
.f__no {
  flex: none;
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  color: var(--c-brand);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: var(--w-semi);
}
.f__req { color: var(--c-red); }
.f__hint { font-size: var(--t-micro); color: var(--c-ink-3); line-height: 1.6; }

/* 通道卡片（支付宝 / 微信 / SMTP 共用一套骨架） */
.chan {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.chan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
.chan__titling { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.chan__icon {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
/* 状态灯：比"未配置"三个字更快判断 */
.chan__light {
  flex: none;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--c-ink-3);
}
.chan__light--on { background: var(--c-green); box-shadow: 0 0 0 3px var(--c-green-tint); }
.chan__light--off { box-shadow: 0 0 0 3px var(--c-ink-3); opacity: .35; }
.chan__title { font-size: var(--t-body); font-weight: var(--w-semi); }
.chan__sub { margin-top: 3px; font-size: var(--t-caption); color: var(--c-ink-2); line-height: 1.65; }
.chan__body { padding: var(--s-6); }

/* 开关：通道总开关用它，比裸 checkbox 更清晰 */
.switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; user-select: none; }
.switch input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.switch__track {
  position: relative;
  flex: none;
  width: 40px; height: 22px;
  border-radius: var(--r-full);
  background: var(--c-line-strong);
  transition: background-color var(--d-base) var(--e-out);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: var(--r-full);
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform var(--d-base) var(--e-spring);
}
.switch input:checked + .switch__track { background: var(--c-brand); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }
.switch__txt { font-size: var(--t-caption); font-weight: var(--w-semi); color: var(--c-ink-2); }

/* 内联开关（放在通道头部右侧的短语式开关） */
.switch--sm .switch__track { width: 34px; height: 20px; }
.switch--sm .switch__track::after { width: 14px; height: 14px; }
.switch--sm input:checked + .switch__track::after { transform: translateX(14px); }
.switch--sm .switch__txt { font-weight: var(--w-regular); }

/* 提示条 */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  color: var(--c-ink-2);
  font-size: var(--t-caption);
  line-height: 1.7;
}
.callout > i { margin-top: 3px; flex: none; color: var(--c-brand); }
.callout--warn { background: var(--c-amber-tint); border-color: var(--c-amber-line); }
.callout--warn > i { color: var(--c-amber); }
.callout b { color: var(--c-ink); font-weight: var(--w-semi); }

/* 发布前自检清单 */
.checklist { display: flex; flex-direction: column; gap: var(--s-2); }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-caption);
  color: var(--c-ink-2);
  line-height: 1.65;
}
.checklist .tick {
  flex: none;
  margin-top: 3px;
  width: 15px; height: 15px;
  display: grid; place-items: center;
  border-radius: 4px;
  background: var(--c-green-tint);
  color: var(--c-green);
  font-size: 9px;
  font-weight: var(--w-bold);
}
.checklist .tick--idle { background: var(--c-surface-sunk); color: var(--c-ink-3); }

/* 底部保存条 */
.savebar {
  position: sticky;
  bottom: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-2);
}

/* ── 22. Footer ──────────────────────────────────────────────────────── */
.footer { background: var(--c-dark); color: var(--c-on-dark-2); margin-top: var(--s-20); }
.footer__grid {
  display: grid;
  gap: var(--s-10);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--s-16) var(--s-10);
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .footer__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); } }

.footer__brand { display: flex; align-items: center; gap: var(--s-2); font-size: 16px; font-weight: var(--w-bold); color: var(--c-on-dark); }
.footer__desc { margin-top: var(--s-4); font-size: var(--t-caption); line-height: 1.8; max-width: 320px; }
.footer__colhead { font-size: var(--t-micro); font-weight: var(--w-semi); letter-spacing: .12em; text-transform: uppercase; color: var(--c-on-dark-3); }
.footer__list { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.footer__list a, .footer__list span { font-size: var(--t-caption); color: var(--c-on-dark-2); transition: color var(--d-fast) var(--e-out); }
.footer__list a:hover { color: var(--c-on-dark); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-top: 1px solid var(--c-dark-line);
  font-size: var(--t-caption);
  color: var(--c-on-dark-3);
}

/* ── 23. Motion preferences ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}