/* ============================================================
   CBT 自助练习 — 设计系统（彩色，针对彩色墨水屏 Kaleido）
   核心：简约 ≠ 黑白灰。克制的是「数量」，不是「色彩」。
   主色蓝 #2563EB，模块色青/靛蓝/紫/橙，语义色绿/琥珀/红。
   无动画、无渐变、无阴影（墨水屏会糊）。
   ============================================================ */

:root {
  /* 主色（蓝：冷静/信任/治愈） */
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-soft: #DBEAFE;

  /* 模块色（500-600 档，墨水屏上鲜艳） */
  --c-emotion: #06B6D4;   /* 青：记一笔心情 */
  --c-thought: #6366F1;   /* 靛蓝：思维记录表 */
  --c-scale:   #8B5CF6;   /* 紫：情绪量表 */
  --c-trend:   #F59E0B;   /* 橙：趋势图 */

  /* 模块色浅底（200 档，墨水屏可见；100 档太淡） */
  --c-emotion-light: #A5F3FC;
  --c-thought-light: #C7D2FE;
  --c-scale-light:   #DDD6FE;
  --c-trend-light:   #FDE68A;

  /* 语义色（情绪强度信号，全站一致） */
  --success: #16A34A;  /* 绿：平静/好转 */
  --warning: #D97706;  /* 琥珀：中等 */
  --danger:  #DC2626;  /* 红：强烈/危机 */

  /* 中性色 */
  --bg:      #F6F4F0;
  --surface: #FFFFFF;
  --fill:    #EDEFF2;
  --border:  #D8DEE3;
  --line:    #C8CFD6;
  --ink:     #1B2430;
  --ink-2:   #5B6470;
  --ink-3:   #8A939E;

  /* 字号（墨水屏偏大） */
  --fs-title: 26px;
  --fs-heading: 19px;
  --fs-body: 16px;
  --fs-caption: 14px;
  --fs-small: 13px;

  /* 间距网格（8px 基数） */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;

  --radius: 10px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
}

#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--s2) 40px;
  min-height: 100vh;
}

/* ---------- 页头（模块色实底 + 白字） ---------- */
.header {
  background: var(--primary);
  color: #fff;
  border-radius: 14px;
  padding: 18px;
  margin: 16px 0;
}
.header .title {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.25;
}
.header .subtitle {
  font-size: var(--fs-caption);
  margin-top: 6px;
  line-height: 1.35;
  opacity: 0.92;
}
.header.emotion { background: var(--c-emotion); }
.header.thought { background: var(--c-thought); }
.header.scale   { background: var(--c-scale); }
.header.trend   { background: var(--c-trend); }

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.card.tinted {
  border-width: 1.5px;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: var(--fs-heading);
  font-weight: 700;
  margin-bottom: 10px;
}
.card-head .q {
  width: 24px; height: 24px;
  border: 1.6px solid #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}

/* ---------- 文字层级 ---------- */
.h-title { font-size: var(--fs-heading); font-weight: 700; }
.h-body  { font-size: var(--fs-body); }
.h-sub   { font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.4; }
.h-caption { font-size: var(--fs-small); color: var(--ink-3); }
.h-label { font-size: var(--fs-body); font-weight: 700; }
.mt1 { margin-top: var(--s1); }
.mt2 { margin-top: var(--s2); }
.mb1 { margin-bottom: var(--s1); }

/* ---------- 按钮 ---------- */
.btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.btn.primary { background: var(--primary); color: #fff; }
.btn.secondary {
  background: #fff;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn.ghost { background: transparent; color: var(--ink-2); font-size: var(--fs-caption); padding: 8px; }
.btn:active { opacity: 0.85; }
.btn-row {
  display: flex;
  gap: 10px;
  margin-top: var(--s2);
}
.btn-row .btn { flex: 1; }

/* ---------- 首页模块卡 ---------- */
.module-card {
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 15px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  border: 1.5px solid;
}
.module-card .bar {
  width: 8px;
  height: 46px;
  border-radius: 4px;
  margin-right: 14px;
  flex: 0 0 auto;
}
.module-card .info { flex: 1; }
.module-card .name { font-size: var(--fs-heading); font-weight: 700; }
.module-card .desc { font-size: var(--fs-caption); color: var(--ink-2); margin-top: 2px; }
.module-card .freq {
  font-size: var(--fs-small);
  font-weight: 700;
  color: #fff;
  border-radius: 6px;
  padding: 4px 9px;
  flex: 0 0 auto;
}
.module-card .arrow {
  font-size: 26px;
  font-weight: 700;
  margin-left: 8px;
  flex: 0 0 auto;
}

/* ---------- 表单 ---------- */
select, textarea, input[type="text"] {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--fill);
  padding: 12px;
  font-size: var(--fs-body);
  color: var(--ink);
  font-family: inherit;
}
textarea { min-height: 72px; resize: vertical; }

/* ---------- 滑条 ---------- */
input[type="range"] {
  width: 100%;
  margin: 12px 0;
  accent-color: var(--primary);
  height: 32px;
}
.score-big {
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
}

/* ---------- 情绪强度徽标 ---------- */
.chip {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  border-radius: 6px;
  padding: 4px 10px;
  text-align: center;
}
.chip.calm    { color: var(--success); border: 1.4px solid var(--success); }
.chip.mid     { color: var(--warning); border: 1.4px solid var(--warning); }
.chip.strong  { color: #fff; background: var(--danger); }

/* ---------- 量表选项（0-3 均匀铺开） ---------- */
.radio-grid {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.radio-grid .opt {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  text-align: center;
  padding: 10px 0;
  font-weight: 700;
  cursor: pointer;
  background: var(--surface);
}
.radio-grid .opt.active {
  background: var(--c-scale);
  border-color: var(--c-scale);
  color: #fff;
}

/* ---------- 步骤进度条 ---------- */
.progress {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.progress .seg {
  flex: 1;
  height: 7px;
  border-radius: 3px;
  background: var(--fill);
}
.progress .seg.done { background: var(--c-thought); }

/* ---------- 思维记录：想法行 ---------- */
.thought-row {
  background: var(--fill);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.hot-tag {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: #fff;
  background: var(--warning);
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 8px;
}

/* ---------- 趋势图 ---------- */
.chart-wrap {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.chart-wrap .chart-title {
  font-size: var(--fs-heading);
  font-weight: 700;
  margin-bottom: 10px;
}
.chart-wrap canvas { width: 100%; height: 180px; display: block; }

/* ---------- 模态（术语气泡 / 结果） ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}
.modal .m-title { font-size: var(--fs-heading); font-weight: 700; margin-bottom: 8px; }
.modal .m-body { font-size: var(--fs-body); line-height: 1.55; white-space: pre-line; }
.modal .m-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
}

/* ---------- 频率提醒卡 ---------- */
.today-card {
  background: var(--primary-soft);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.today-card .t-head {
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--primary);
}
.today-card .t-body {
  font-size: var(--fs-body);
  color: var(--ink-2);
  margin-top: 8px;
  white-space: pre-line;
}

.disclaimer {
  font-size: var(--fs-small);
  color: var(--ink-3);
  margin-top: 24px;
  line-height: 1.5;
}
.link {
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}

/* ---------- 顶部返回条 ---------- */
.back-bar {
  display: flex;
  align-items: center;
  padding-top: 14px;
}
.back-btn {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

/* 墨水屏：禁用动画/过渡/阴影 */
@media (prefers-reduced-motion: reduce), (any-hover: none) {
  * { transition: none !important; animation: none !important; }
}