/* =====================================================================
   MistifyTea AI Community · Base — reset / 排版 / 表单 / 按钮 / 工具类
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* hidden 属性必须始终生效。否则作者样式（.main-nav{display:flex} /
   .tabbar{display:flex} / .btn{display:inline-flex}）会覆盖 UA 的
   [hidden]{display:none}，导致未登录时导航链接与「退出」按钮仍然显示。 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
  font-weight: 600;
}

p { margin: 0 0 var(--sp-4); }

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

/* ---- 焦点可见性（a11y） ---- */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- 跳过导航（a11y） ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-surface); color: var(--c-text);
  padding: var(--sp-2) var(--sp-4); z-index: 100;
  border: 1px solid var(--c-line);
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

/* ---- 按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font: inherit; font-size: var(--fs-body-sm); font-weight: 500;
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--c-primary); color: var(--c-primary-ink); }
.btn--primary:hover { background: var(--c-primary-strong); }
.btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-ink-400); background: var(--c-surface); }
.btn--gold { background: var(--c-accent); color: var(--c-on-accent); }
.btn--gold:hover { background: var(--c-gold-500); }
.btn--danger { background: transparent; color: var(--c-danger); border-color: var(--c-danger); }
.btn--danger:hover { background: var(--c-danger); color: var(--c-paper); }
.btn--sm { padding: 6px 14px; font-size: var(--fs-meta); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- 表单 ---- */
.field { display: block; margin-bottom: var(--sp-4); }
.field__label {
  display: block; font-size: var(--fs-meta); font-weight: 500;
  color: var(--c-text-soft); margin-bottom: var(--sp-2);
  letter-spacing: var(--ls-mid);
}
.field__input, .field__textarea, .field__select {
  width: 100%; font: inherit; font-size: var(--fs-body-sm);
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 10px 14px;
  transition: border-color var(--t-fast) var(--ease-soft);
}
.field__input:focus, .field__textarea:focus, .field__select:focus {
  border-color: var(--c-accent); outline: none;
}
.field__textarea { min-height: 96px; resize: vertical; line-height: var(--lh-snug); }
.field__hint { font-size: var(--fs-meta); color: var(--c-text-soft); margin-top: var(--sp-2); }
.field__error { font-size: var(--fs-meta); color: var(--c-danger); margin-top: var(--sp-2); min-height: 1em; }

/* ---- 徽标 ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-mid);
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--c-line); color: var(--c-text-soft);
  background: var(--c-surface);
}
.badge--alpha { border-style: dashed; border-color: var(--c-gold-500); color: var(--c-gold-600); }
.badge--intro { border-color: var(--c-gold-400); color: var(--c-gold-600); }
.badge--need  { border-color: var(--c-tea-500); color: var(--c-tea-700); }
.badge--offer { border-color: var(--c-ok); color: var(--c-ok); }
.badge--role  { border-color: var(--c-ink-300); }

/* ---- 工具类 ---- */
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.u-muted { color: var(--c-text-soft); }
.u-small { font-size: var(--fs-body-sm); }
.u-meta  { font-size: var(--fs-meta); color: var(--c-text-soft); }
.u-nowrap { white-space: nowrap; }
.u-center { text-align: center; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-hidden { display: none !important; }

/* 空状态 */
.empty-state {
  text-align: center; padding: var(--sp-8) var(--sp-4);
  color: var(--c-text-soft);
  border: 1px dashed var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface);
}
.empty-state__title { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--c-text); margin-bottom: var(--sp-2); }

/* 加载态 */
.loading-dots::after {
  content: "…"; animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots { 0% { content: ""; } 25% { content: "·"; } 50% { content: "··"; } 75% { content: "···"; } }

/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}