/* ========================================
   base.css — 全站基础样式（所有页面必引）
   Reset / rem 基准 / 字号变量 / 页面容器 / 分区标签 / Toast
   ======================================== */

/* ========== 字号变量（语义化，改一处全站生效） ========== */
:root {
  --fs-xxs: 0.72rem; /* 最小：时间戳/小标签 */
  --fs-xs:  0.75rem; /* 次要说明 */
  --fs-sm:  0.8rem;  /* 小正文/表头 */
  --fs:     0.875rem; /* 正文 */
  --fs-md:  0.95rem; /* 卡片标题 */
  --fs-lg:  1rem;    /* 顶栏标题 */
  --fs-xl:  1.25rem; /* 页面大标题 */
}

/* ========== Reset ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem; line-height: 1.5; color: #333; background: #f5f5f5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

/* ========== rem 基准（与 front.css 统一：固定 16px，三端一致） ========== */
html { font-size: 1rem; }
/* PC 适配：内容限宽居中（手机宽度） */
@media (min-width: 1024px) {
  .page { max-width: 900px; margin: 0 auto; }
}

/* ========== 页面容器 ========== */
.page { display: flex; flex-direction: column; min-height: 100vh; width: 100%; }
.page-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem; }
.scroll-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ========== 页面副标题 ========== */
.page-subtitle {
  font-size: var(--fs-xs); color: #999; padding: 0 1rem 0.75rem;
  text-align: center; letter-spacing: 0.05rem;
}

/* ========== 分区标签 ========== */
.section-label {
  font-size: var(--fs); color: #999; padding: 0.5rem 0 0.75rem;
  text-align: center; letter-spacing: 0.05rem;
}

/* ========== Toast ========== */
.toast {
  position: fixed; left: 50%; bottom: 25%;
  transform: translateX(-50%) translateY(1rem);
  background: rgba(0,0,0,0.78); color: #fff;
  padding: 0.72rem 1.1rem; border-radius: 0.5rem;
  font-size: var(--fs); opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 2000; max-width: 80%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: rgba(234,67,53,0.92); }
.toast.success { background: rgba(52,168,83,0.92); }