/* ==========================================================================
   复盘大师 · 设计令牌（2026-10-12）
   ==========================================================================

   为什么要单独一个文件
   --------------------
   落地页改版后是**深色 + 青绿**，而登录后的后台是**浅色 + 宝蓝**——
   用户点「开始我的进化」，下一屏就变成一个通用浅色 SaaS 卡片，断层很明显。

   但**不能把后台一刀切成深色**：复盘要看大量表格与长文本归因，
   深色下长时间阅读更累（`app.css` 35.9 KB、几十个页面、500+ 测试）。

   所以这里只提炼**令牌**：同一套色相 / 字体 / 圆角 / 间距，
   浅色与深色各取所需。改主题时只改这一个文件。

   ⚠️ **青绿必须分两档 —— 这是本文件最要紧的一件事**
   -------------------------------------------------
   `#3ddc97`（落地页那个亮青绿）在**深色**背景上极好，但在**白底**上
   对比度只有约 **1.6:1**，远低于 WCAG AA 要求的 4.5:1 ——
   直接拿它当后台的品牌色，按钮和链接会**看不清**。

   所以同一个色相按背景明度分档：

     令牌              值         用在                        对比度
     --cyan-deep    #0a7d52   浅底上的**文字/链接/图标**      5.2:1  ✓ AA
     --cyan         #3ddc97   深底上的强调；浅底上的**按钮底色** 11.6:1 ✓ AAA（配深字）
     --cyan-ink     #04140d   青绿底上的文字                 11.6:1 ✓ AAA
     --cyan-soft    #e6f7f0   浅底选中/悬停

   实测过：`#0f9d68` 在白底上只有 3.5:1，**不够**，所以取更深的 `#0a7d52`。
   ========================================================================== */

:root {
  /* ---------- 品牌色（青绿）---------- */
  --cyan-deep:   #0a7d52;   /* 浅底上的文字/链接/图标 */
  --cyan:        #3ddc97;   /* 亮青绿：深底强调；浅底按钮底色 */
  --cyan-ink:    #04140d;   /* 青绿底上的文字 */
  --cyan-soft:   #e6f7f0;   /* 浅底选中/悬停 */
  --cyan-line:   #b9e8d5;   /* 浅底上的青绿描边 */

  /* ---------- 深色场景（落地页 / 登录页）---------- */
  --dark-bg:     #080b12;   /* 墨黑带蓝 */
  --dark-bg-2:   #0c111b;
  --dark-panel:  #111827;
  --dark-ink:    #e8edf5;
  --dark-dim:    #93a1b8;
  --dark-faint:  #5c6b83;
  --dark-line:   #1c2536;

  /* ---------- 字体 ---------- */
  /* 标题衬线（宣言感）、正文无衬线（易读）—— 与落地页一致 */
  --font-serif: Georgia, "Songti SC", SimSun, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* ---------- 形状与节奏 ---------- */
  --radius-sm:  8px;
  --radius:     10px;
  --radius-lg:  14px;
  --gap:        16px;
}

/* ==========================================================================
   深色外壳：登录 / 注册 / 找回 / 重置 / 联系
   ==========================================================================

   这 5 个页面用的是 `base_bare.html`，是**落地页的直接延续**——
   用户点「开始我的进化」就到了这里，所以它们跟落地页同一套深色，
   是消除断层**代价最小、感知最强**的一步。
   ========================================================================== */

body.bare {
  background: var(--dark-bg);
  color: var(--dark-ink);
  font-family: var(--font-sans);
  min-height: 100vh;
}

body.bare .wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 9vh 24px 48px;
}

/* 品牌标与页头：与落地页同款 */
body.bare .bare-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
  color: var(--dark-ink);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: .02em;
}
body.bare .bare-brand svg { width: 30px; height: 30px; color: var(--cyan); }

/* 卡片 → 深色面板 */
body.bare .card,
body.bare .auth-card {
  background: var(--dark-panel);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 32px 28px;
}

body.bare h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--dark-ink);
  margin: 0 0 8px;
}
body.bare .hint { color: var(--dark-dim); }

/* 表单控件：深色下必须重设，否则会出现"白底白字" */
body.bare label { color: var(--dark-dim); }
body.bare input[type="text"],
body.bare input[type="email"],
body.bare input[type="password"],
body.bare input[type="number"],
body.bare textarea,
body.bare select {
  background: var(--dark-bg-2);
  border: 1px solid var(--dark-line);
  color: var(--dark-ink);
  border-radius: var(--radius-sm);
}
body.bare input:focus,
body.bare textarea:focus,
body.bare select:focus {
  border-color: var(--cyan-deep);
  outline: 2px solid rgba(61, 220, 151, .22);
  outline-offset: 1px;
}
body.bare input::placeholder { color: var(--dark-faint); }

/* 按钮：**亮青绿底 + 深字**（11.6:1）—— 与落地页完全一致 */
body.bare .btn {
  background: transparent;
  border: 1px solid var(--dark-line);
  color: var(--dark-ink);
  border-radius: var(--radius-sm);
}
body.bare .btn:hover { border-color: var(--cyan-deep); color: #fff; }

body.bare .btn-primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--cyan-ink);
  font-weight: 600;
}
body.bare .btn-primary:hover { background: #4ff0a8; border-color: #4ff0a8; }

/* 提示条 */
body.bare .notice {
  border-radius: var(--radius-sm);
  border: 1px solid var(--dark-line);
  background: var(--dark-bg-2);
  color: var(--dark-ink);
}
body.bare .notice-err {
  border-color: #6b2130;
  background: #1d1015;
  color: #ffb3bd;
}
body.bare .notice-info {
  border-color: #1f4a3a;
  background: #0d1a16;
  color: #9fe8c9;
}

/* 链接用亮青绿（深底上 11.6:1） */
body.bare a { color: var(--cyan); }
body.bare a:hover { color: #4ff0a8; }

/* 页脚免责声明 */
body.bare .foot {
  color: var(--dark-faint);
  border-top: 1px solid var(--dark-line);
  margin-top: 40px;
  padding-top: 20px;
  line-height: 1.9;
}