/* ============================================================
 * 设计令牌.css — 全站统一设计系统 V3.3.4
 *
 * 用途：25 个页面统一引入，消除配色/宽度/圆角/组件分裂
 *
 * 使用方式：
 *   <link rel="stylesheet" href="静态资源/设计令牌.css">
 *   <!-- 可选：模块辅助色覆盖（默认=主绿） -->
 *   <style>:root { --accent: #f59e0b; --accent-soft: #fef3c7; --accent-foreground: #92400e; }</style>
 *
 * 规则：
 *   - 主色（--primary）全站统一翡翠绿，禁止页面级覆盖
 *   - 模块辅助色（--accent）仅用于图标/徽章/进度条点缀，禁止大面积铺背景
 *   - 背景统一 --background，禁止页面自定义背景色
 * ============================================================ */

:root {
  /* ---- 主色（翡翠绿，全站唯一） ---- */
  --background: #f0faf5;
  --foreground: #1a2e25;
  --card: #ffffff;
  --card-foreground: #1a2e25;
  --primary: #22c55e;
  --primary-foreground: #ffffff;
  --primary-dark: #16a34a;
  --muted: #dcfce7;
  --muted-foreground: #15803d;
  --muted-2: #f1f5f4;
  --muted-2-foreground: #64748b;
  --destructive: #ef4444;
  --warning: #f59e0b;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #22c55e;

  /* ---- 模块辅助色（默认=主绿，模块页面可覆盖） ----
   * 已分配的模块辅助色：
   *   习惯打卡：#f59e0b / #fef3c7 / #92400e（琥珀）
   *   商城：    #f97316 / #ffedd5 / #9a3412（橙）
   *   付费中心：#3b82f6 / #dbeafe / #1e40af（蓝）
   *   排行榜：  #eab308 / #fef9c3 / #854d0e（金）
   *   私有版：  #a855f7 / #f3e8ff / #7e22ce（紫）
   */
  --accent: #22c55e;
  --accent-soft: #dcfce7;
  --accent-foreground: #15803d;

  /* ---- 圆角体系 ---- */
  --radius-sm: 6px;    /* 小元素：徽章/标签 */
  --radius-md: 10px;   /* 输入框/小按钮 */
  --radius-lg: 14px;   /* 卡片/按钮 */
  --radius-xl: 18px;   /* 弹窗/大卡片 */

  /* ---- 布局 ---- */
  --容器宽度: 420px;

  /* ---- 阴影 ---- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-popup: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-底栏: 0 -2px 12px rgba(0, 0, 0, 0.08);

  /* ---- 字体（统一栈） ---- */
  --字体栈: "PingFang SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ============ 公共布局 ============ */
.页面容器 {
  max-width: var(--容器宽度);
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

/* ============ 页头栏（sticky + 返回 + 居中标题 + 右操作位） ============ */
.页头栏 {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--background);
  box-sizing: border-box;
}
.页头栏-返回 {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--foreground);
  cursor: pointer;
  padding: 8px;
  min-width: 36px;
}
.页头栏-标题 {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--foreground);
}
.页头栏-右操作 {
  min-width: 36px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ============ 卡片 ============ */
.卡片 {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
}

/* ============ 按钮 ============ */
.主按钮 {
  display: inline-block;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s ease;
  box-sizing: border-box;
}
.主按钮:active { opacity: 0.88; }
.主按钮:disabled { background: #d1d5db; cursor: not-allowed; }

.次按钮 {
  display: inline-block;
  background: var(--card);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 11px 19px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
  box-sizing: border-box;
}
.次按钮:active { background: var(--muted); }

/* 辅助色按钮（模块点缀场景，如习惯打卡的打卡按钮） */
.辅助按钮 {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s ease;
  box-sizing: border-box;
}
.辅助按钮:active { opacity: 0.88; }

/* ============ 徽章/标签 ============ */
.徽章 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  background: var(--muted);
  color: var(--muted-foreground);
}
.徽章-辅助 {
  background: var(--accent-soft);
  color: var(--accent-foreground);
}

/* ============ 空状态 ============ */
.空状态 {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted-2-foreground);
}
.空状态-图标 { font-size: 48px; margin-bottom: 12px; }
.空状态-标题 { font-size: 15px; font-weight: 600; color: var(--foreground); margin-bottom: 4px; }
.空状态-描述 { font-size: 13px; margin-bottom: 16px; }

/* ============ 加载转圈 ============ */
.加载转圈 {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: 令牌旋转 0.7s linear infinite;
}
@keyframes 令牌旋转 { to { transform: rotate(360deg); } }

/* ============ 进度条 ============ */
.进度条 {
  height: 8px;
  background: var(--muted-2);
  border-radius: 4px;
  overflow: hidden;
}
.进度条-填充 {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.进度条-填充.辅助色 { background: var(--accent); }

/* ============ 遮罩弹窗 ============ */
.遮罩 {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.弹窗卡片 {
  background: var(--card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 24px 20px;
  width: 100%;
  max-width: var(--容器宽度);
  box-sizing: border-box;
  box-shadow: var(--shadow-popup);
}
@media (min-width: 421px) {
  .遮罩 { align-items: center; padding: 20px; }
  .弹窗卡片 { border-radius: var(--radius-xl); max-width: 340px; }
}