/* ============================================================
 * settings.css — 设置 / 我的 / 理论体系·核心心语
 * 色彩能量精油 · 一百零八瓶疗愈系统
 * 2026-09-29：配合 views-settings.js / views-mine.js / views-theory.js
 *   的「一〇八·时养」分页阅读器。
 * 仅增强展示，遵循既有 token（--bg/--card2/--ink/--sub/--line/--accent/--serif）。
 * ============================================================ */

/* ---------- 通用区块 ---------- */
.set-view, .mine-view { max-width: 880px; margin: 0 auto; }
.set-card {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
/* 三档层级（与「我的」同语言）：章点 + 卡片档位 */
.set-card-h {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .14em;
  color: var(--ink);
  margin-bottom: 6px;
}
.set-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  transform: rotate(45deg);              /* 菱形章点 */
  border-radius: 1.5px;
  background: var(--dc, var(--gold));
  opacity: .85;
}
.set-card--hero {
  --dc: var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, var(--card2));
  border-color: color-mix(in srgb, var(--gold) 26%, var(--line));
}
.set-card--meta { --dc: var(--teal); }
.set-card--notes {
  --dc: var(--sub);
  background: color-mix(in srgb, var(--bg) 30%, var(--card2));
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}
.set-card--notes .set-card-h { font-size: 15px; color: var(--sub); letter-spacing: .16em; }
.set-card--notes .set-tips li { font-size: 13.5px; margin-bottom: 7px; }
.set-card-sub {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--sub);
  margin: 0 0 14px;
}
.set-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.set-row:first-of-type { border-top: 0; }
.set-k { font-size: 14px; color: var(--sub); letter-spacing: .04em; }
.set-v { font-size: 14.5px; color: var(--ink); text-align: right; }
.set-v-strong { font-family: var(--serif); font-size: 16px; letter-spacing: .06em; color: var(--accent); }
.set-hint { font-size: 12.5px; color: var(--sub); margin: 12px 0 0; line-height: 1.6; }
.set-tips { margin: 0; padding-left: 20px; }
.set-tips li { font-size: 14px; line-height: 1.85; color: var(--ink); margin-bottom: 9px; }
.set-tips li b { color: var(--accent); font-weight: 600; }

/* ---------- 安装 UI（由 PWA_INSTALL.render 挂载） ---------- */
.set-install-mount { margin-top: 4px; }
.set-install {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.set-install-ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  color: #fff; background: var(--accent);
}
.set-install.is-installed .set-install-ico { background: #3a7d52; }
.set-install.is-unsupported .set-install-ico { background: var(--sub); }
.set-install-tx { flex: 1 1 auto; display: flex; flex-direction: column; }
.set-install-tx b { font-size: 15px; color: var(--ink); font-family: var(--serif); letter-spacing: .04em; }
.set-install-tx i { font-style: normal; font-size: 12.5px; color: var(--sub); margin-top: 3px; line-height: 1.5; }
.set-install-btn {
  flex: 0 0 auto;
  height: 38px; padding: 0 22px;
  border: 0; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-family: inherit; font-size: 14px; letter-spacing: .06em;
  cursor: pointer; transition: .2s ease;
}
.set-install-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.set-install-btn:active { transform: translateY(0) scale(.98); }
.set-install-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* ---------- 我的 · 个人中心枢纽 ---------- */
.mine-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 4px;
}
.mine-card--hero { grid-column: 1 / -1; }
/* 标题区：朱砂方章 + 文本列（副题落到标题正下方，不再两端拉扯） */
.mine-head {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0 18px;
}
.mine-seal {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--accent2), var(--accent));
  color: #faf6ec;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(176, 58, 46, .30);
  font-family: var(--serif);
}
.mine-seal i {
  font-style: normal; font-size: 15px; line-height: 1.12; letter-spacing: 0;
}
.mine-head .section-title { margin: 0; }
.mine-head-sub { font-size: 13px; color: var(--sub); margin-top: 4px; }
/* 设置页印章：单字略大一号（复用 mine-seal 布局） */
.set-seal i { font-size: 18px; }
.mine-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: .22s cubic-bezier(.22,.61,.36,1);
}
.mine-card:hover { border-color: var(--mc, var(--accent)); box-shadow: 0 6px 22px rgba(45,40,36,.10); transform: translateY(-2px); }
.mine-card:active { transform: translateY(0) scale(.995); }
.mine-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* 印章座：单色墨感，替代彩色小方块（--mc 决定色相，底为 10% 同色淡染） */
.mine-ico {
  flex: 0 0 auto;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  font-size: 22px; line-height: 1;
  color: var(--mc, var(--gold));
  background: color-mix(in srgb, var(--mc, var(--gold)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc, var(--gold)) 22%, transparent);
}
.mine-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mine-title { font-family: var(--serif); font-size: 17px; letter-spacing: .05em; color: var(--ink); }
.mine-sub { font-size: 13px; line-height: 1.7; color: var(--sub); }
.mine-arrow { flex: 0 0 auto; font-size: 20px; color: var(--sub); transition: .2s ease; }
.mine-card:hover .mine-arrow { color: var(--mc, var(--accent)); transform: translateX(3px); }
/* 主卡：跨两列，内嵌打卡实况（serif 数字 + 分隔细线） */
.mine-card--hero .mine-body { gap: 7px; }
.mine-live {
  display: flex; align-items: center; gap: 22px;
  margin-top: 6px; padding-top: 10px;
  border-top: 1px solid var(--line2);
}
.mlv { display: flex; flex-direction: column; gap: 1px; }
.mlv b { font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--ink); }
.mlv i { font-style: normal; font-size: 11.5px; letter-spacing: .08em; color: var(--sub); }
.mlv-today { margin-left: auto; font-size: 12.5px; letter-spacing: .04em; color: var(--teal); }
.mlv-today.is-on::before { content: '✓ '; }
.mlv-go {
  margin-left: auto; font-size: 12.5px; letter-spacing: .04em;
  color: var(--accent); cursor: pointer; border: 0; background: none;
}
.mlv-go:hover { text-decoration: underline; }
/* 焦虑急救：朱砂异质——应急入口不该与其它卡一个气质 */
.mine-card--aid {
  background: color-mix(in srgb, var(--accent) 5%, var(--card2));
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.mine-card--aid:hover { border-color: var(--accent); box-shadow: 0 6px 22px rgba(176, 58, 46, .12); }

/* ---------- 理论体系 · 一〇八·时养 整版纸本 ---------- */
.th-reader { max-width: 780px; margin: 14px auto 0; }
/* ── 纸：一套规则同时作用于真页与叶片内的面 → 版式像素一致 ──
   上下 padding 必须相等（守卫要测「正文垂直居中」）；左右用 clamp 收窄
   文字列，纸本身保持满幅 —— 满幅才翻得出「整页」的体积感。 */
.th-reader .th-page {
  position: relative; overflow: hidden;
  height: calc(100vh - 330px); min-height: 340px; max-height: 640px;
  padding: 76px clamp(24px, calc(50% - 420px), 120px);
  /* 纸色：宣纸暖底（不再近纯白——整版后大白纸会吃掉全站节气氛围） */
  background-color: #f8f4ea;
  border: 1px solid var(--line2);
  border-radius: 3px 10px 10px 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  /* 纸感：当令节气色淡晕（左上主色/右下辅色/底部淡色，随节气自动换）
     + 装订侧微暗 + 极淡横向帘纹（零外链图）。
     color-mix 不支持时 background-image 整条失效 → 只丢纹理，暖底仍在。 */
  background-image:
    radial-gradient(64% 46% at 8% -4%, color-mix(in srgb, var(--trad-a, #4e968e) 13%, transparent) 0%, transparent 70%),
    radial-gradient(58% 44% at 100% 104%, color-mix(in srgb, var(--trad-b, #c9a86a) 12%, transparent) 0%, transparent 72%),
    radial-gradient(74% 56% at 46% 122%, color-mix(in srgb, var(--trad-c, #e8dcc0) 11%, transparent) 0%, transparent 76%),
    linear-gradient(90deg, rgba(45, 58, 56, .05) 0 30px, rgba(45, 58, 56, 0) 30px),
    repeating-linear-gradient(0deg, rgba(45, 58, 56, .016) 0 1px, rgba(45, 58, 56, 0) 1px 4px);
  user-select: none; -webkit-user-select: none;
  /* 正文整体垂直居中于页面中段（注意：改为 flex 后，子项必须 flex-shrink:0，
     否则会被压缩变形，导致 thLayout 按 offsetHeight 分页时测量失真） */
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
/* 注意：不能用裸 .th-p —— style.css 里 `.theory-body p`（特异性 0,1,1）会压过 .th-p（0,1,0），
   实测 font-size/margin-bottom/color 三项都会被抢走。故一律用 .th-reader .th-page .th-p 提权。 */
.th-reader .th-page .th-p {
  flex: 0 0 auto;              /* 禁止压缩，保证分页测量与真实行高一致 */
  font-family: var(--serif);
  font-size: 23px;             /* 正文放大，提升辨识度 */
  line-height: 2.02;
  letter-spacing: .03em;
  font-weight: 400;            /* 抵消 .theory-body p 的 500，避免宋体加粗发糊 */
  color: var(--ink);           /* 用最深的墨色，提高正文对比度 */
  margin: 0 0 16px;            /* 须与 views-theory.js thLayout 的 +16 一致 */
  text-align: center;          /* 逐行居中，与居中标题「一〇八·时养」同轴对称。
                                  本诗每段仅一行，justify 对末行无效、右侧必参差，
                                  故弃两端对齐改居中（居中散文诗的标准排法）。 */
}
.th-reader .th-page .th-p:first-child { text-indent: 0; }
.th-reader .th-page .th-p:last-child { margin-bottom: 0; }  /* 去掉末段外边距，使整块光学居中 */
/* ---------- 翻页骨架 ----------
   .th-book＝透视容器（兼作裁剪框）；#th-page＝真实纸面，其直接子节点恒为 .th-p
   （thLayout 依赖此契约）；页眉/页码走同面积的 .th-deco 层，**不在 #th-page 内**；
   翻页时临时叠加一枚 .th-leaf 叶片：纸 + 同样的 .th-deco（旧页码）+ 柱面光影，
   于是「整页连页眉页码一起翻」。真实页此时已换新内容但被叶片遮住 → 翻完移除叶片
   即无缝衔接。叶片绕书脊旋转，越过 90° 后被 .th-book 裁掉：本布局只有「右页」。 */
.th-book {
  position: relative; overflow: hidden;
  perspective: 1200px; perspective-origin: 26% 46%;
}
.th-leaf {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  transform-origin: left center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.th-leaf.rev { transform-origin: right center; }
/* 纸面必须不透明，否则会透出已就位的新页 */
.th-leaf > .th-page { position: absolute; inset: 0; }
/* 页眉（书名/副题）与页码：与纸同面积，随纸一起翻转 */
.th-deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.th-run { position: absolute; top: 30px; left: 0; right: 0; text-align: center; }
.th-run-t {
  display: block; font-family: var(--serif);
  font-size: 15px; letter-spacing: .3em; color: var(--ink2);
}
.th-run-s {
  display: block; margin-top: 7px; font-family: var(--serif);
  font-size: 11.5px; letter-spacing: .26em; color: var(--sub);
}
.th-run::after {
  content: ''; display: block; width: 74px; height: 1px; margin: 13px auto 0;
  background: linear-gradient(90deg, rgba(45, 58, 56, 0), var(--line), rgba(45, 58, 56, 0));
}
.th-folio {
  position: absolute; bottom: 56px; left: 0; right: 0; text-align: center;
  font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: var(--sub);
}
/* 卷角：右下角被手指勾起后翻露出来的「纸背三角」——掀角阶段的主角 */
.th-dogear {
  position: absolute; right: 0; bottom: 0; z-index: 4;
  width: 230px; height: 230px; pointer-events: none;
  transform: scale(0); transform-origin: 100% 100%; opacity: 0;
  clip-path: polygon(100% 0, 100% 100%, 94% 100%);   /* 初始只是一条细缝，靠动画卷大 */
  background: linear-gradient(135deg, #fffdf8 0%, #ece6d8 30%, #cfc7b4 62%, #a89f8a 100%);
  /* 铁律：clip-path 会裁掉 box-shadow → 必须用 drop-shadow（沿裁剪后形状投影），
     掀起的纸角才会在纸面上落下影子，肉眼才认得出「角被掀起来了」 */
  filter: drop-shadow(-7px -6px 12px rgba(28, 40, 37, .34));
}
.th-dogear::after {   /* 卷曲明暗：靠角一侧受光、贴向纸面一侧压暗 → 纸才有厚度与卷曲感 */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .18) 24%,
    rgba(28, 40, 37, .10) 58%, rgba(28, 40, 37, .30) 100%);
}
.th-leaf.rev .th-dogear {                  /* 反向翻页：卷角落在左下角 */
  transform-origin: 0 100%;
  clip-path: polygon(0 0, 0 100%, 6% 100%);
  filter: drop-shadow(7px -6px 12px rgba(28, 40, 37, .34));
}
.th-leaf.rev .th-dogear::after {
  background: linear-gradient(225deg,
    rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .16) 26%,
    rgba(28, 40, 37, .08) 62%, rgba(28, 40, 37, .26) 100%);
}
.th-curl {                       /* 纸面质感：右下角翘起的光影 + 柱面明暗 */
  position: absolute; inset: 0; z-index: 3; opacity: 0; border-radius: 2px;
  background:
    radial-gradient(circle at 100% 100%, rgba(28, 40, 37, .50) 0%, rgba(28, 40, 37, .18) 16%, transparent 30%),
    linear-gradient(90deg,
      rgba(28, 40, 37, .13) 0%, rgba(28, 40, 37, .03) 16%,
      rgba(255, 255, 255, .34) 58%, rgba(28, 40, 37, .17) 100%);
}
.th-leaf.rev .th-curl { transform: scaleX(-1); }
.th-shade {                      /* 翻页时投在下层新页上的暗部 */
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(95deg, rgba(24, 36, 34, .36) 0%, rgba(24, 36, 34, .12) 42%, transparent 70%);
}
html[data-theme="dark"] .th-dogear {
  background: linear-gradient(135deg, #463f4c 0%, #342f3d 36%, #2a2631 78%, #221f28 100%);
}
html[data-theme="dark"] .th-dogear::after,
html[data-theme="dark"] .th-leaf.rev .th-dogear::after {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .05) 26%,
    rgba(0, 0, 0, .20) 62%, rgba(0, 0, 0, .36) 100%);
}
html[data-theme="dark"] .th-curl {
  background:
    radial-gradient(circle at 100% 100%, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .22) 20%, transparent 42%),
    linear-gradient(90deg,
      rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .08) 16%,
      rgba(255, 255, 255, .10) 58%, rgba(0, 0, 0, .30) 100%);
}
html[data-theme="dark"] .th-shade {
  background: linear-gradient(95deg, rgba(0, 0, 0, .46) 0%, rgba(0, 0, 0, .16) 42%, transparent 70%);
}
.th-nav {                        /* 浮在纸面下缘的翻页条（不随纸翻转） */
  position: absolute; left: 0; right: 0; bottom: 13px; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 0;
}
.th-prev, .th-next {
  height: 36px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card2); color: var(--ink);
  font-family: inherit; font-size: 13.5px; letter-spacing: .04em;
  cursor: pointer; transition: .2s ease;
}
.th-prev:hover:not(:disabled), .th-next:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent);
}
.th-prev:disabled, .th-next:disabled { opacity: .4; cursor: default; }
.th-dots { display: flex; align-items: center; gap: 7px; }
.th-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); cursor: pointer; transition: .2s ease;
}
.th-dot.on { background: var(--accent); transform: scale(1.25); }
.th-ind { font-size: 13px; color: var(--sub); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- 整版模式：纸铺满视口主体（body.th-full 由 views-theory 开关） ---------- */
body.th-full main { padding: 0 0 14px; min-height: 0; }
body.th-full .view.container { max-width: none; padding: 0 18px; }
/* 让位给整版纸：本章节只保留 Theory 导航条 + 书，其余装饰（脉络带/标题块）收起 */
body.th-full .view.container > *:not(.theory-layout) { display: none; }
/* 章节目录保持竖版（用户明确要求）：整版只是让右侧这张纸铺满剩余视口 */
body.th-full .theory-layout { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; }
body.th-full .theory-nav { top: calc(var(--nav-real-h, 60px) + 14px); }
body.th-full .th-reader { max-width: none; margin: 0; }
body.th-full .th-book {
  height: calc(100vh - var(--nav-real-h, 60px) - 26px);
  height: calc(100dvh - var(--nav-real-h, 60px) - 26px);
  min-height: 420px;
  box-shadow: var(--shadow-lg);          /* 整本书的投影（clip 会裁掉纸自身的投影） */
  touch-action: none;                    /* 纸面横向跟手，禁掉浏览器手势 */
}
body.th-full .th-reader .th-page { height: 100%; min-height: 0; max-height: none; }
html[data-theme="dark"] .th-reader .th-page {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  background-color: #24221f;
  background-image:
    radial-gradient(64% 46% at 8% -4%, color-mix(in srgb, var(--trad-c, #6cb3a8) 10%, transparent) 0%, transparent 70%),
    radial-gradient(58% 44% at 100% 104%, color-mix(in srgb, var(--trad-a, #ddc077) 9%, transparent) 0%, transparent 72%),
    linear-gradient(90deg, rgba(0, 0, 0, .26) 0 30px, rgba(0, 0, 0, 0) 30px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, rgba(255, 255, 255, 0) 1px 4px);
}
/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .set-card { padding: 18px 16px; }
  .set-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .set-v { text-align: left; }
  .mine-card { padding: 16px 16px; gap: 13px; }
  .mine-ico { width: 44px; height: 44px; font-size: 19px; }
  .mine-grid { grid-template-columns: 1fr; gap: 12px; }
  .mine-head { margin: 14px 0 14px; gap: 12px; }
  .mine-seal { width: 40px; height: 40px; border-radius: 7px; }
  .mine-seal i { font-size: 13.5px; }
  .mine-live { gap: 16px; padding-top: 9px; }
  .mlv b { font-size: 17px; }
  .mlv i { font-size: 11px; white-space: nowrap; }
  .mlv-today, .mlv-go { margin-left: 0; flex-basis: 100%; }
  .mine-live { flex-wrap: wrap; row-gap: 8px; }
  .th-title { font-size: 24px; }
  .th-sub { font-size: 13px; letter-spacing: .26em; }
  .th-reader .th-page { padding: 62px 16px; }
  .th-run { top: 22px; }
  .th-run-t { font-size: 13px; letter-spacing: .26em; }
  .th-run-s { font-size: 10.5px; letter-spacing: .2em; }
  .th-run::after { width: 54px; margin-top: 9px; }
  .th-folio { bottom: 50px; font-size: 12px; }
  .th-reader .th-page .th-p { font-size: 19.5px; line-height: 1.92; letter-spacing: .02em; margin-bottom: 13px; }
  body.th-full .view.container { padding: 0 8px; }
  body.th-full .th-book { min-height: 380px; }
  .th-nav { gap: 9px; bottom: 10px; }
  .th-prev, .th-next { height: 40px; padding: 0 14px; font-size: 13px; }
}
/* 与原站点一致：≤1024px 目录转为横排（此时纸独占整行，仍铺满视口） */
@media (max-width: 1024px) {
  body.th-full .theory-layout { grid-template-columns: 1fr; gap: 0; }
}
/* 降负模式：不做整版（页面仍可滚动），关闭纸面选择与手势 */
html.calm .th-book, html.calm body.th-full .th-book { touch-action: auto; }
@media (prefers-reduced-motion: reduce) {
  body.th-full .th-book { touch-action: auto; }
}