/* ==========================================================================
   base.css —— 全站基础样式（变量 / reset / 通用组件）
   --------------------------------------------------------------------------
   三条原则：
   1. **不用任何 CSS 框架**：客户改一个颜色不需要 npm build，重启服务即可生效；
   2. **不引 web font**：用系统自带字体栈，1Mbps 带宽下省 100~300KB；
   3. 类名前缀固定：c- 通用组件、p- 公开页（public.css）、a- 后台（admin.css）、
      u- 工具类。前缀防的是"改后台样式把首页改坏"。

   文件约 8KB，gzip 后约 2KB。改完这个文件必须重启服务（asset_version 才会变）。
   ========================================================================== */

/* ── 设计变量：全站只用这些颜色，改主题只改这里 ───────────────────────── */
:root {
  --c-bg: #f7f8fa;
  --c-surface: #ffffff;
  --c-text: #1f2933;
  --c-text-mute: #6b7280;
  --c-border: #e3e6eb;
  --c-primary: #2563eb;
  --c-primary-hover: #1d4ed8;
  --c-ok: #15803d;
  --c-ok-bg: #ecfdf3;
  --c-err: #b91c1c;
  --c-err-bg: #fef2f2;
  --c-info-bg: #eff6ff;
  --radius: 10px;
  --gap: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
}

/* ── reset：只重置真正需要的，不做大而全的 normalize ─────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding-left: 1.2em;
}

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

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

/* ── 布局骨架 ─────────────────────────────────────────────────────────── */
.c-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.c-main {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  flex: 1 1 auto;
}

.c-page-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: var(--gap);
}

/* ── 顶部条（后台） ───────────────────────────────────────────────────── */
.c-topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.c-topbar__brand {
  font-weight: 600;
  color: var(--c-text);
  font-size: 16px;
}

.c-topbar__nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.c-topbar__link {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--c-text-mute);
  font-size: 14px;
}

.c-topbar__link:hover {
  background: var(--c-bg);
  text-decoration: none;
}

.c-topbar__link.is-active {
  color: var(--c-primary);
  background: var(--c-info-bg);
  font-weight: 600;
}

.c-topbar__user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--c-text-mute);
  max-width: 100%;
}

.c-topbar__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12em;
}

.c-inline-form {
  display: inline-flex;
  margin: 0;
}

/* ── 卡片 ─────────────────────────────────────────────────────────────── */
.c-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: var(--gap);
}

.c-card__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.c-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.c-card--stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 0;
}

.c-stat__num {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-primary);
}

.c-stat__label {
  font-size: 13px;
  color: var(--c-text-mute);
}

.c-stat__hint {
  font-size: 12px;
  color: var(--c-text-mute);
}

/* ── 按钮 ─────────────────────────────────────────────────────────────── */
.c-btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  background: var(--c-surface);
  color: var(--c-text);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.c-btn--primary {
  background: var(--c-primary);
  color: #fff;
}

.c-btn--primary:hover {
  background: var(--c-primary-hover);
}

.c-btn--ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text-mute);
}

.c-btn--ghost:hover {
  background: var(--c-bg);
  text-decoration: none;
}

/* 危险操作（删除）。刻意不用纯红底：红色大按钮容易被手滑点中，
   红字 + 红边框已经足够提示，配合 admin.js 的 confirm() 二次确认。 */
.c-btn--danger {
  background: transparent;
  border-color: #fecaca;
  color: var(--c-err);
}

.c-btn--danger:hover {
  background: var(--c-err-bg);
  text-decoration: none;
}

.c-btn--sm {
  padding: 5px 10px;
  font-size: 13px;
}

.c-btn--block {
  display: block;
  width: 100%;
}

/* ── 表单 ─────────────────────────────────────────────────────────────── */
.c-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.c-field__label {
  font-size: 14px;
  font-weight: 500;
}

.c-field__hint {
  font-size: 12px;
  color: var(--c-text-mute);
}

.c-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 16px; /* 16px 是 iOS 不自动放大页面的临界值，不要改小 */
  font-family: inherit;
  color: var(--c-text);
  background: var(--c-surface);
}

.c-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* 校验失败的输入框：红边框 + 红焦点环，配合下面的 .a-error 一行红字 */
.c-input--error {
  border-color: var(--c-err);
}

.c-input--error:focus {
  border-color: var(--c-err);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

/* 多行文本框：默认可以竖向拉大（客户写长简介时很需要），不允许横向拉
   （横向拉会把后台布局撑破，出现横向滚动条） */
.c-textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.7;
}

/* 文件选择框：不继承 .c-input 的 padding，否则两个按钮样式的控件会错位 */
.c-input--file {
  padding: 8px;
  font-size: 14px;
}

/* ── 提示条 ───────────────────────────────────────────────────────────── */
.c-alert {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  margin-bottom: var(--gap);
}

.c-alert--ok {
  color: var(--c-ok);
  background: var(--c-ok-bg);
  border-color: #bbf7d0;
}

.c-alert--err {
  color: var(--c-err);
  background: var(--c-err-bg);
  border-color: #fecaca;
}

.c-alert--info {
  color: #1e40af;
  background: var(--c-info-bg);
  border-color: #bfdbfe;
}

/* ── 文本辅助 ─────────────────────────────────────────────────────────── */
.c-mute {
  color: var(--c-text-mute);
  font-size: 14px;
}

.c-ok-text {
  color: var(--c-ok);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.c-list {
  margin: 8px 0 0;
  color: var(--c-text-mute);
  font-size: 14px;
}

.c-list li {
  margin-bottom: 4px;
}

/* ── 登录页（独立页面） ───────────────────────────────────────────────── */
.c-body--auth {
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  background: var(--c-bg);
}

.c-auth {
  width: 100%;
  max-width: 380px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 22px 22px;
}

.c-auth__title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.c-auth__sub {
  font-size: 13px;
  color: var(--c-text-mute);
  text-align: center;
  margin: 4px 0 18px;
}

.c-auth__foot {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
}

/* ── 工具类 ───────────────────────────────────────────────────────────── */
.u-hidden {
  display: none !important;
}

.u-flex {
  display: flex;
}

.u-mt-2 {
  margin-top: 8px;
}

.u-mt-4 {
  margin-top: 16px;
}

.u-text-center {
  text-align: center;
}

.u-nowrap {
  white-space: nowrap;
}

/* ── 小屏适配（375px 起可用，不出现横向滚动） ─────────────────────────── */
@media (max-width: 640px) {
  .c-main {
    padding: 16px 12px 48px;
  }

  .c-topbar {
    gap: 8px;
    padding: 8px 12px;
  }

  .c-topbar__nav {
    order: 3;
    width: 100%;
  }

  .c-cards {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .c-card {
    padding: 14px;
  }
}