/* components: 严格按 DESIGN.md front-matter components 块 + §Components 正文实现。
   文档明确：无 hover 态记录，只有 Default 与 Pressed/Active/Focused。
   故交互态用 :active / :focus，不写 :hover。 */

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  border-radius: var(--rounded-md);
  padding: var(--space-md) var(--space-lg);
  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

/* button-primary — 浅色面上的主 CTA */
.btn-primary {
  background-color: var(--primary);
  color: var(--on-primary);
}
.btn-primary:active {
  background-color: var(--surface-press-stronger);
  color: var(--ink-press);
}
/* 深色 hero 上的主 CTA 加 level-3 辉光 */
.btn-primary.on-hero {
  box-shadow: var(--elev-3);
}

/* button-inverted — 深色面上的主 CTA，极性翻转 */
.btn-inverted {
  background-color: var(--on-primary);
  color: var(--ink-deep);
  box-shadow: var(--elev-1);
}
.btn-inverted:active {
  background-color: var(--surface-press-light);
  color: var(--ink-press);
  box-shadow: var(--elev-4);
}

/* button-ghost-on-dark — 深色面次级 CTA */
.btn-ghost-on-dark {
  background-color: var(--on-dark-faint);
  color: var(--on-primary);
  border-radius: var(--rounded-xl);
  padding: var(--space-sm);
}

/* button-violet-token — 内联 pill 形分类按钮 */
.btn-violet-token {
  background-color: var(--accent-violet-mid);
  color: var(--on-primary);
  font-weight: 500;
  line-height: 1.29;
  border-radius: var(--rounded-xl);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--accent-violet-deep);
}

/* button-disabled */
.btn-disabled,
.btn:disabled {
  background-color: var(--hairline-cloud);
  color: var(--on-dark-muted);
  cursor: not-allowed;
}

/* ===================== Cards ===================== */
.card-pricing {
  background-color: var(--surface-canvas-light);
  color: var(--ink-deep);
  padding: var(--space-xxl);
  border-radius: var(--rounded-xl);
  border: 1px solid var(--hairline-cloud);
}

.card-pricing-featured {
  background-color: var(--surface-night);
  color: var(--on-primary);
  padding: var(--space-xxl);
  border-radius: var(--rounded-xl);
}

.card-feature-dark {
  background-color: var(--ink-deep);
  color: var(--on-primary);
  padding: var(--space-xxl);
  border-radius: var(--rounded-xxl);
  border: 1px solid var(--hairline-violet);
}

.card-spotlight-violet {
  background-color: var(--accent-violet-deep);
  color: var(--on-primary);
  padding: var(--space-xxl);
  border-radius: var(--rounded-xxl);
}

/* ===================== Code block ===================== */
.code-block {
  background-color: var(--surface-night);
  color: var(--on-primary);
  font-family: var(--font-code);
  font-size: 16px;
  line-height: 1.5;
  padding: var(--space-lg);
  border-radius: var(--rounded-md);
  overflow-x: auto;
}
.code-block .kw {
  font-weight: 700;
  color: var(--accent-lime);
}

/* ===================== Inputs ===================== */
.text-input {
  width: 100%;
  background-color: var(--surface-night);
  color: var(--on-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--rounded-sm);
  border: 1px solid var(--hairline-violet);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.text-input::placeholder {
  color: rgba(236, 232, 255, 0.58);
}
.text-input:focus {
  outline: none;
  border-color: rgba(194, 239, 78, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(194, 239, 78, 0.14),
    0 0 0 3px rgba(194, 239, 78, 0.12);
}

.select-violet {
  width: 100%;
  background-color: var(--accent-violet-deep);
  color: var(--on-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--rounded-md);
  border: 1px solid rgba(194, 239, 78, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.select-violet option {
  background-color: var(--surface-night);
  color: var(--on-primary);
}
.select-violet:focus {
  outline: none;
  border-color: rgba(194, 239, 78, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(194, 239, 78, 0.14),
    0 0 0 3px rgba(194, 239, 78, 0.12);
}

/* ===================== Pills / chips ===================== */
.pill-neutral-dark {
  display: inline-flex;
  align-items: center;
  background-color: var(--surface-night);
  color: var(--on-primary);
  font-size: 14px;
  line-height: 1.43;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--rounded-xs);
}

/* chip-lime-keyword — 招牌内联高亮，包裹 hero 标题里的单个关键词 */
.chip-lime {
  background-color: var(--accent-lime);
  color: var(--ink-deep);
  border-radius: var(--rounded-xs);
  padding: 0 var(--space-md);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ===================== Links ===================== */
.link-on-dark {
  color: var(--on-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-on-light {
  color: var(--ink-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===================== Nav ===================== */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
}
.nav-bar-light {
  background-color: var(--surface-canvas-light);
  color: var(--ink-deep);
}
.nav-bar-dark {
  background-color: var(--surface-canvas-dark);
  color: var(--on-primary);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.nav-link {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ===================== Footer ===================== */
.footer-light {
  background-color: var(--surface-canvas-light);
  color: var(--ink-deep);
  padding: var(--space-xxl) var(--space-xl);
}

/* ===== 自动维护配置卡片(Station tab) ===== */
.maint-card {
  margin-top: 20px;
}

.maint-hint {
  color: var(--on-dark-muted);
  margin: 8px 0 16px;
}

.maint-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--on-dark-muted);
  cursor: pointer;
}

.maint-toggle input {
  accent-color: var(--accent-lime);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.maint-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.maint-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.maint-field > .text-micro-cap {
  color: var(--accent-violet-mid);
}

.maint-note {
  color: var(--on-dark-faint);
  font-size: 11px;
  line-height: 1.4;
}

.maint-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

#maint-status {
  color: var(--accent-lime);
}

@media (max-width: 900px) {
  .maint-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .maint-grid {
    grid-template-columns: 1fr;
  }
}