/* ============================================================
 * style.css —— 释放法练习 App
 * 移动优先：iPad 竖屏（768×1024）主场景，手机与桌面自适应。
 * 语气规矩：无红点、无撒花、无成就动画、无倒计时呈现。
 * 视觉基调：「旅する日曜日」——云乳白纸 + 炭灰深块 + 复古金/阳光黄点睛。
 * 631：60% 云乳白纸底 + 30% 炭灰主角深块 + 10% 金。
 * ============================================================ */

:root {
  --ink: #26271f;           /* 炭灰墨（#373934 加深） */
  --ink-soft: #45463f;
  --muted: #847a6e;         /* Faded Walnut 核桃灰 */
  --paper: #efede7;         /* Cloud Milk 云乳白调亮 */
  /* 纸纤维噪点：SVG feTurbulence 内联，平铺无接缝，PWA 离线可用。
     --noise 淡档直接做纸面背景；--noise-strong 浓档只给 body::before 低透明度覆盖层用 */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  --noise-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --card: rgba(239, 237, 231, .93);
  --line: rgba(55, 57, 52, .11);
  --line-strong: rgba(55, 57, 52, .24);
  --accent: #a48027;          /* Vintage Gold 复古金（浅底强调） */
  --accent-ink: #6f5a1e;
  --accent-soft: rgba(164, 128, 39, .12);
  --gold: #847a6e;            /* 核桃灰：竖标/次级装饰位 */
  --accent-bright: #fcd24c;   /* Soft Sunlight 阳光黄（只用在深底上，像车站灯） */
  --hero-bg: linear-gradient(163deg, #4a4c45 0%, #373934 55%, #1d1e1a 100%); /* 主角深块：炭灰沉向近黑 */
  --radius: 16px;
  --tabbar-h: 60px;
  --shadow-card: 0 1px 2px rgba(35, 36, 31, .05), 0 10px 30px rgba(35, 36, 31, .07);
  --shadow-lift: 0 2px 4px rgba(35, 36, 31, .07), 0 14px 38px rgba(35, 36, 31, .13);
  font-size: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: #e6e4de;   /* 天空加载前的兜底云乳白 */
  overscroll-behavior: none;
  /* 书写工具不该被文本选择打断：全局禁选择（iOS 上 Pencil 划过文字=划选，写着写着弹出拷贝菜单） */
  -webkit-user-select: none;
  user-select: none;
}
/* 输入框里恢复选择，不然没法编辑文字 */
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
body.editor-open { overflow: hidden; }

/* 全局纸颗粒：蒙在天空与卡片之上、tab栏与画板之下；multiply 只留暗点不留白 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 2;
  background-image: var(--noise-strong);
  opacity: .05;
  mix-blend-mode: multiply;
  pointer-events: none;
}

::selection { background: rgba(164, 128, 39, .22); }
button { touch-action: manipulation; }
:focus-visible { outline: 2px solid rgba(164, 128, 39, .55); outline-offset: 2px; border-radius: 4px; }

/* ---------- 归处场景层：固定白天 ---------- */
#sky {
  position: fixed; inset: 0; z-index: 0;
  /* 白天：顶部一团天窗柔光 + 云乳白渐变 */
  background:
    radial-gradient(115% 55% at 50% -6%, rgba(253, 252, 247, .95) 0%, rgba(253, 252, 247, 0) 56%),
    linear-gradient(180deg, #e7e5df 0%, #edebe5 58%, #e2dfd8 100%);
  transition: background 3s linear;
}

#sky.breath { animation: skybreath 3.2s ease-in-out 1; }
@keyframes skybreath {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.13); }
  100% { filter: brightness(1); }
}

/* ---------- 布局 ---------- */
#main {
  position: relative; z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 16px calc(var(--tabbar-h) + 30px + env(safe-area-inset-bottom));
}
.view { display: none; }
.view.active { display: block; animation: viewfade .25s ease both; }
@keyframes viewfade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 卡片错落进场：只淡入+轻移，依次延迟，克制不晃眼 */
.view.active > * { animation: cardin .32s ease both; }
.view.active > *:nth-child(2) { animation-delay: .04s; }
.view.active > *:nth-child(3) { animation-delay: .08s; }
.view.active > *:nth-child(4) { animation-delay: .12s; }
.view.active > *:nth-child(5) { animation-delay: .16s; }
.view.active > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes cardin {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

h2 { font-size: 1.32rem; margin: 14px 0 12px; font-weight: 600; letter-spacing: .05em; }
h3 { font-size: 1.04rem; margin: 0 0 10px; font-weight: 600; letter-spacing: .12em; }
/* 小节标：标题左侧一小段核桃灰竖标，给卡片章节感 */
h3::before {
  content: "";
  display: inline-block;
  width: 3px; height: .92em;
  margin-right: .5em;
  vertical-align: -.1em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(132, 122, 110, .35));
}
p { line-height: 1.75; margin: 8px 0; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.row { display: flex; align-items: center; }
.gap { gap: 10px; flex-wrap: wrap; }
.spread { justify-content: space-between; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 14px 0;
  /* 顶部一道内高光，纸卡边缘更挺 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), var(--shadow-card);
  backdrop-filter: blur(8px);
}

/* ---------- 按钮 ---------- */
.btn {
  font: inherit;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: 11px;
  padding: 9px 17px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(35, 36, 31, .06);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .12s ease;
}
.btn:hover { border-color: rgba(35, 36, 31, .38); box-shadow: 0 2px 8px rgba(35, 36, 31, .1); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(165deg, #c19a3d, var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 10px rgba(164, 128, 39, .35);
}
.btn.primary:hover { border-color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 14px rgba(164, 128, 39, .45); }
.btn.ghost {
  background: rgba(242, 240, 233, .55);   /* 夜空下也读得出 */
  box-shadow: none;
}
.btn.big { padding: 13px 22px; font-size: 1.05rem; }
.btn.small { padding: 5px 11px; font-size: .85rem; border-radius: 9px; }
.btn.block { display: block; width: 100%; margin: 8px 0; text-align: center; }

/* ---------- 第一屏 ---------- */
.hero { display: flex; flex-direction: column; gap: 4px; }
.big-release {
  font: inherit;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-indent: .14em;   /* 字距视觉居中 */
  width: 100%;
  min-height: 24vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
  border: 1px solid rgba(164, 128, 39, .55);   /* 一道细金边 */
  border-radius: 20px;
  background: var(--hero-bg);
  color: #f2f0e9;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 5px rgba(242, 240, 233, .07),
    inset 0 0 0 6px rgba(252, 210, 76, .3),   /* 内圈阳光金发线 */
    0 12px 44px rgba(35, 36, 31, .35);
  margin-top: 8px;
  position: relative;
  transition: box-shadow .25s ease, transform .15s ease;
}
.big-release::after {   /* 字面下方一小笔阳光黄 */
  content: "";
  position: absolute;
  left: 50%; bottom: 21%;
  width: 44px; height: 2px;
  transform: translateX(-50%);
  background: var(--accent-bright);
  opacity: .8;
  border-radius: 2px;
}
.big-release:hover { box-shadow:
  inset 0 0 0 5px rgba(242, 240, 233, .09),
  inset 0 0 0 6px rgba(164, 128, 39, .4),
  0 16px 54px rgba(35, 36, 31, .42);
}
.big-release:active {
  transform: scale(.985);
  box-shadow:   /* 按压时阴影下沉，像被按下去 */
    inset 0 0 0 5px rgba(242, 240, 233, .07),
    inset 0 0 0 6px rgba(164, 128, 39, .45),
    inset 0 3px 14px rgba(0, 0, 0, .3),
    0 6px 20px rgba(35, 36, 31, .3);
}
@media (max-width: 480px) {
  .big-release { font-size: 1.25rem; min-height: 20vh; padding: 26px 18px; }
}

/* ---------- 宠物垃圾 ---------- */
.garbage-add { display: flex; gap: 8px; margin-bottom: 10px; }
.input {
  font: inherit;
  flex: 1;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 9px 13px;
  background: #faf9f7;
  color: var(--ink);
  min-width: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.input.area { width: 100%; min-height: 110px; resize: vertical; line-height: 1.65; }
.input.num { width: 76px; flex: none; }
.garbage-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 13px 15px 12px;
  margin: 10px 0;
  background: #faf9f7;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.garbage-card:hover { box-shadow: 0 6px 20px rgba(35, 36, 31, .1); transform: translateY(-1px); }
/* 状态色带：左侧一条竖色 + 整卡极淡的同色底 */
.garbage-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--line-strong);
}
.state-bothering { background: linear-gradient(120deg, #f1efea 0%, #faf9f7 55%); }
.state-bothering::before { background: #847a6e; }
.state-attacking { background: linear-gradient(120deg, #f6f1e2 0%, #faf9f7 55%); }
.state-attacking::before { background: var(--accent); }
.garbage-head { display: flex; align-items: center; gap: 9px; }
.garbage-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--muted); flex: none;
  box-shadow: 0 0 0 3px rgba(113, 113, 123, .15);
}
.state-bothering .garbage-dot { background: #847a6e; box-shadow: 0 0 0 3px rgba(132, 122, 110, .18); }
.state-attacking .garbage-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(164, 128, 39, .18); }
.garbage-title { font-weight: 600; flex: 1; word-break: break-all; line-height: 1.5; }
.garbage-state {
  font-size: .74rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  flex: none;
  background: rgba(255, 255, 255, .7);
}
.state-bothering .garbage-state { color: #847b70; border-color: rgba(132, 122, 110, .5); }
.state-attacking .garbage-state { color: var(--accent-ink); border-color: rgba(164, 128, 39, .4); }
.garbage-half {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: .88rem;
  color: var(--accent-ink);
  background: rgba(164, 128, 39, .07);
  border: 1px dashed rgba(164, 128, 39, .4);
  border-radius: 9px;
  padding: 7px 11px;
  margin: 9px 0 4px;
  cursor: pointer;
  transition: background .18s ease;
}
.garbage-half:hover { background: rgba(164, 128, 39, .13); }
.garbage-card .row { margin-top: 9px; }

/* ---------- 六步骤 / 语录 ---------- */
.why-text { font-size: 1.05rem; line-height: 1.85; }
.six-steps {
  list-style: none;
  counter-reset: step;
  margin: 12px 0;
  padding-left: 0;
  color: var(--ink-soft);
  line-height: 1.9;
  font-size: .92rem;
}
.six-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.3em;
  margin: 10px 0;
}
.six-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: .22em;
  width: 1.55em; height: 1.55em;
  border: 1px solid rgba(132, 122, 110, .55);
  border-radius: 50%;
  color: var(--gold);
  font-size: .78em;
  display: flex; align-items: center; justify-content: center;
}
.quote-line {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.8;
  border-left: 3px solid rgba(132, 122, 110, .45);
  padding-left: 12px;
  margin-top: 14px;
}
/* 首页语录卡：签名档式居中 + 顶部一道渐隐金线（基础 .quote-line 样式留给弹窗复用） */
.quote-card { text-align: center; padding-top: 20px; }
.quote-card::before {
  content: "";
  display: block;
  width: 96px; height: 1px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, rgba(132, 122, 110, 0), rgba(132, 122, 110, .6), rgba(132, 122, 110, 0));
}
.quote-card .quote-line {
  border-left: none; padding-left: 0; margin-top: 0;
  color: var(--ink); font-size: 1.03rem;
}
.quote-card .muted.small {
  font-style: italic;
  letter-spacing: .04em;
  margin-top: 10px;
}

/* ---------- 统计 ---------- */
.stats-row { margin: 8px 0; }
.stat { font-size: .9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.badge {
  color: #fff; font-size: .82rem;
  padding: 3px 11px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(35, 36, 31, .18);
}
.quick-row { margin-top: 4px; }

/* ---------- 战役 ---------- */
.battle-entry { padding: 34px 0; text-align: center; }
/* 深块主角按钮：与首页大按钮同一语言——炭灰沉向近黑的深底 + 乳白字。
   发起专攻 / 新建释放纸等主角操作共用；.battle-launch 只是加大号 */
.btn-paper {
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-indent: .12em;
  padding: 12px 28px;
  border: 1px solid rgba(164, 128, 39, .45);
  border-radius: 16px;
  background: var(--hero-bg);
  color: #f2f0e9;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 4px rgba(242, 240, 233, .07),
    inset 0 0 0 5px rgba(164, 128, 39, .28),
    var(--shadow-card);
  transition: box-shadow .2s ease, transform .15s ease;
}
.btn-paper:hover { box-shadow:
  inset 0 0 0 4px rgba(242, 240, 233, .09),
  inset 0 0 0 5px rgba(164, 128, 39, .38),
  var(--shadow-lift);
}
.btn-paper:active { transform: scale(.98); }
.battle-launch {
  font-size: 1.18rem;
  padding: 16px 48px;
  border-radius: 18px;
}
.battle-entry .muted { max-width: 30em; margin: 10px auto 22px; }
.battle-motivation {
  background: var(--hero-bg);
  border: 1px solid rgba(164, 128, 39, .45);
  border-radius: var(--radius);
  padding: 18px 20px 10px;
  /* 顶部下沉：一是给激励语留出压场的呼吸位（用户定稿），
     二是画笔栏默认停靠顶部（top 10px + 条高 ~45px），不沉就被压住字 */
  margin-top: calc(44px * var(--pt));
  box-shadow:
    inset 0 0 0 4px rgba(242, 240, 233, .07),
    inset 0 0 0 5px rgba(164, 128, 39, .28),
    var(--shadow-card);
}
/* 激励语=战役页最重要的东西，深块压场，乳白大字 */
.battle-motivation-text {
  font-size: 1.4rem; line-height: 1.8; font-weight: 600;
  letter-spacing: .04em; text-align: center;
  color: #f2f0e9;
}
/* 卡片下方两端：左右箭头换句（弱化，不抢戏） */
.battle-motivation-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2px;
}
.battle-motivation-arrow {
  font: inherit; font-size: .95rem; line-height: 1;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(242, 240, 233, .22);
  background: transparent; color: #847a6e;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 1px; /* 视觉居中补偿 */
  transition: color .15s ease, border-color .15s ease;
}
.battle-motivation-arrow:hover { color: #f2f0e9; border-color: rgba(242, 240, 233, .55); }
/* 已胜利战役：专攻入口下方的折叠回顾区 */
.battle-wins { margin-top: 26px; }
.battle-wins-head {
  font: inherit; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 2px; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: .95rem;
  border-top: 1px solid rgba(132, 122, 110, .28);
}
.battle-wins-head:hover { color: var(--ink); }
.battle-wins-arrow { transition: transform .18s ease; }
.battle-wins-head.open .battle-wins-arrow { transform: rotate(90deg); }
.battle-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.battle-type {
  font-size: .8rem; color: var(--accent-ink);
  border: 1px solid rgba(164, 128, 39, .5);
  background: rgba(164, 128, 39, .06);
  padding: 2px 9px; border-radius: 999px;
}
.battle-sec-head h3 { margin-top: 18px; }
.battle-guide {
  color: var(--ink-soft);
  background: var(--card);
  border-left: 3px solid var(--accent);
  padding: 13px 18px;
  border-radius: 0 12px 12px 0;
  line-height: 1.85;
  box-shadow: var(--shadow-card);
  font-size: 1.08rem;          /* 提示词显眼一点 */
  max-width: 620px;            /* 不顶满整页 */
  margin-left: auto;
  margin-right: auto;
}

/* 战役地图：只呈现「打到第几节」 */
.battle-map {
  display: flex; align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 12px;
  margin: 12px 0;
  overflow-x: auto;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
}
.map-node { display: flex; flex-direction: column; align-items: center; min-width: 58px; flex: none; }
.map-dot {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  background: #faf9f7; color: var(--muted); font-size: .9rem;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.map-node.done .map-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.map-node.current .map-dot { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.map-label { font-size: .78rem; margin-top: 6px; color: var(--ink-soft); }
.map-min { font-size: .7rem; }
.map-link { flex: 1; height: 2px; background: var(--line); margin-top: 16px; min-width: 14px; }

.battle-canvas-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 46vh;
  min-height: 320px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
}
/* 战役画布充满容器，不套释放纸的 A4 规则 */
.battle-canvas-wrap .paper-canvas {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

/* 本节进度条：安静走条，看着它挨过去 */
.battle-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.battle-progress {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(242, 240, 233, .6);
  border: 1px solid var(--line);
  overflow: hidden;
}
.battle-progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c19a3d, var(--accent));
  border-radius: 999px;
  transition: width .5s linear;
}
.battle-progress.full > i { background: #847a6e; }
.battle-progress-lab { flex: none; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* 战役画布工具栏：复用大纸悬浮条样式 */
.battle-toolbar { max-width: calc(100% - 12px); }

/* 热身段引导：更醒目 */
.battle-guide.warmup {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  border-left-width: 5px;
}
.battle-ops { margin: 14px 0 22px; }
.battle-ops .btn.big { width: 100%; }
.battle-ops .btn.ghost { display: block; margin: 10px auto 0; }
.battle-ops .muted { text-align: center; margin-top: 10px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* 自选续节表单 */
.extend-fields { display: flex; gap: 12px; margin: 14px 0 4px; }
.extend-field {
  flex: 1; min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #faf9f7;
  padding: 12px 14px 13px;
  cursor: text;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.extend-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.extend-label { display: block; font-size: .82rem; color: var(--muted); letter-spacing: .05em; margin-bottom: 6px; }
.extend-edit { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.extend-input {
  font: inherit;
  font-size: 1.35rem; font-weight: 600; text-align: center;
  width: 100%; min-width: 0;
  border: none; background: transparent; color: var(--ink);
  padding: 0;
}
.extend-input:focus { outline: none; }
.extend-input::-webkit-outer-spin-button, .extend-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.extend-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.extend-unit { color: var(--muted); font-size: .88rem; flex: none; }
@media (max-width: 400px) { .extend-fields { flex-direction: column; } }

/* 类型选择卡 */
.type-card {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 15px;
  margin: 9px 0;
  cursor: pointer;
  background: #faf9f7;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.type-card:hover { box-shadow: 0 4px 16px rgba(35, 36, 31, .08); }
.type-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.type-name { font-weight: 600; margin-bottom: 2px; }
.blackroom-row { margin: 12px 0 4px; }
.pick-row {
  display: block; width: 100%;
  font: inherit; text-align: left;
  border: 1px solid var(--line); border-radius: 11px;
  background: #faf9f7; padding: 12px 15px; margin: 6px 0;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pick-row:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Gains ---------- */
.gains-form .stage-pick { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.stage-chip {
  font: inherit; font-size: .82rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: #faf9f7; color: var(--ink-soft);
  padding: 4px 13px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.stage-chip:hover { transform: translateY(-1px); }
.stage-chip.on { background: var(--chip); border-color: var(--chip); color: #fff; box-shadow: 0 2px 8px rgba(35, 36, 31, .2); }
.gains-form input[type=range] { flex: 1; accent-color: var(--accent); }
.gain-card {
  display: flex; gap: 11px; align-items: flex-start;
  background: #faf9f7;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
  margin: 9px 0;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .2s ease;
}
.gain-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.gain-dot {
  width: 13px; height: 13px; border-radius: 50%;
  margin-top: 6px; flex: none;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(35, 36, 31, .3);
}
.gain-body { flex: 1; min-width: 0; }
.gain-text { line-height: 1.75; word-break: break-word; }
.gain-body .muted.small { margin-top: 5px; display: block; }
.gain-card > .btn.small.ghost { flex: none; padding: 3px 9px; color: var(--muted); }
.gain-card > .btn.small.ghost:hover { color: var(--ink); }

/* 月历着色 */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 10px;
}
.cal-w { text-align: center; font-size: .75rem; color: var(--muted); padding: 4px 0; }
.cal-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  border-radius: 8px;
  background: rgba(35, 36, 31, .05);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cal-cell.lit { color: #fff; box-shadow: 0 1px 4px rgba(35, 36, 31, .2); }
.cal-cell.empty { background: transparent; }

/* 情绪色例样式已随页面级走势图移除（今日签导出图内置色例） */

/* 专攻页下半：纸张区（顶部一道渐隐金线代替虚线） */
.papers-sec { margin-top: 26px; padding-top: 6px; }
.papers-sec::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 0 10px;
  background: linear-gradient(90deg, rgba(132, 122, 110, 0), rgba(132, 122, 110, .35), rgba(132, 122, 110, 0));
}

/* ---------- 纸张 ---------- */
.paper-list { display: flex; flex-direction: column; }
.paper-row .wb-title { font-weight: 600; }
.paper-row .btn.small.ghost { color: var(--muted); }
.paper-row .btn.small.ghost:hover { color: var(--ink); }
.workbook-box { margin-top: 20px; }
.wb-week {
  display: inline-block;
  margin: 14px 0 2px; font-size: .85rem;
  padding: 3px 12px; border-radius: 999px;
  background: rgba(132, 122, 110, .12);
  color: #6e6558; letter-spacing: .04em;
}
.wb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px dashed var(--line);
}
.wb-row .wb-title { flex: 1; min-width: 0; }
.pt-keep { white-space: nowrap; }

/* 练习本常用通道（喜欢与不喜欢 / 目标表格） */
.wb-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.wb-channel {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px;
  background: var(--paper);
  border: 1px solid rgba(132, 122, 110, .38);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  cursor: pointer; font: inherit; text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wb-channel:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: rgba(132, 122, 110, .65); }
.wb-channel:active { transform: scale(.99); }
.wb-channel-title { font-weight: 600; font-size: .98rem; }
.wb-channel-meta { font-size: .8rem; color: var(--muted); }

/* ---------- 功能卡分色（色卡家族内的身份区分，淡度不抢戏） ----------
   知识/教程类 = 核桃灰晕；收获/分享类（今日签）= 复古金晕；
   练习本两个通道一金一灰，左右有别 */
#view-faq .card { background-color: rgba(132, 122, 110, .08); }
#view-faq .card h3::before {
  background: linear-gradient(180deg, #847a6e, rgba(132, 122, 110, .35));
}
.card-dc {
  background-color: rgba(164, 128, 39, .08);
  border-color: rgba(164, 128, 39, .32);
}
.card-dc h3::before {
  background: linear-gradient(180deg, #a48027, rgba(164, 128, 39, .35));
}
.wb-channel:nth-child(1) {
  border-color: rgba(164, 128, 39, .5);
  background: linear-gradient(163deg, rgba(164, 128, 39, .1), var(--paper) 62%);
}
.wb-channel:nth-child(1):hover { border-color: rgba(164, 128, 39, .75); }
.wb-channel:nth-child(2) {
  border-color: rgba(132, 122, 110, .5);
  background: linear-gradient(163deg, rgba(132, 122, 110, .1), var(--paper) 62%);
}
@media (max-width: 480px) {
  .wb-channels { grid-template-columns: 1fr; }
}

/* ---------- 全屏画板 ---------- */
#paper-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 40;
  background: #e2dfdb;   /* Cloud Milk 工作台 */
}
#paper-overlay.open { display: block; }
.paper-stage {
  position: absolute; inset: 0;
  overflow: auto;
  display: flex;
  padding: calc(62px * var(--pt)) 14px 14px; /* 顶部让开悬浮工具栏（62=横条44+边距，随大屏缩放走） */
}
.paper-wrap { margin: auto; } /* 小于舞台居中；大于舞台时可完整滚动 */
.paper-canvas {
  display: block;
  aspect-ratio: 210 / 297;     /* A4 */
  height: auto;
  touch-action: none;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(35, 36, 31, .18), 0 18px 50px rgba(35, 36, 31, .3);
}
.pt-zoom { margin: 0 calc(2px * var(--pt)); }
.pt-zoom-label { min-width: calc(52px * var(--pt)); }
/* 大屏适配：电脑全屏画画屏幕远大于 iPad，工具栏按视口轻放大 1~1.2 档，
   色点/墨环/图标同步微调（用户反馈 1.25 档「真的大了」，Jobs 附体定稿：轻档）。
   挂在 body 上：画板编辑器和战役悬浮笔栏（body 直挂）都能继承 */
body { --pt: 1; }
@media (min-width: 1440px) and (min-height: 760px) { body { --pt: 1.1; } }
@media (min-width: 1800px) { body { --pt: 1.2; } }

.paper-toolbar {
  position: absolute;
  display: flex; align-items: center; gap: calc(6px * var(--pt));
  flex-wrap: nowrap;          /* 一条排到底，换行会挤成一坨圆 */
  overflow-x: auto;           /* 超宽可左右滑 */
  max-width: 96vw;
  background: rgba(242, 240, 233, .96);
  border: 1px solid var(--line);
  border-radius: 999px;
  /* 两端 14px：按钮退出发亮的圆角帽，不再顶边（粗细仍由 6px 那一维决定） */
  padding: calc(6px * var(--pt)) calc(14px * var(--pt));
  box-shadow: 0 6px 22px rgba(35, 36, 31, .2);
  backdrop-filter: blur(8px);
  z-index: 2;
  touch-action: pan-x;        /* 横向可滑；拖拽走专用把手 */
  scrollbar-width: none;
}
.paper-toolbar > * { flex-shrink: 0; }   /* 按钮不许被挤小 */
/* 专用拖拽把手：只有按住它能拖，其余区域放心滑动/点按 */
.pt-drag {
  width: calc(20px * var(--pt)); height: calc(28px * var(--pt));
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: grab; touch-action: none;
  margin: 0 2px 0 -4px;
}
.pt-drag svg { width: calc(13px * var(--pt)); height: calc(13px * var(--pt)); fill: currentColor; }
.paper-toolbar.dragging .pt-drag { color: var(--ink); }
/* 停靠三态：顶部横排 / 左侧竖排 / 右侧竖排（MarginNote 式） */
.paper-toolbar.dock-top { top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
.paper-toolbar.dock-left {
  left: calc(16px * var(--pt) + env(safe-area-inset-left)); top: 50%; transform: translateY(-50%);
  flex-direction: column; max-height: 92%;
  overflow-x: hidden; overflow-y: auto;   /* 竖排可上下滑 */
  touch-action: pan-y;
  border-radius: 20px;
  /* 竖条粗细=横条粗细：横 padding 用 6px（同横条的竖 padding）；上下端 14px 退开圆角帽 */
  padding: calc(14px * var(--pt)) calc(6px * var(--pt));
}
.paper-toolbar.dock-right {
  right: calc(16px * var(--pt) + env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
  flex-direction: column; max-height: 92%;
  overflow-x: hidden; overflow-y: auto;
  touch-action: pan-y;
  border-radius: 20px;
  padding: calc(14px * var(--pt)) calc(6px * var(--pt));
}
/* 竖排收窄 100% 标签：最宽子项回到图标宽（30px），竖条总宽 ≈ 横条高 ≈ 44px */
.paper-toolbar.dock-left .pt-zoom-label, .paper-toolbar.dock-right .pt-zoom-label {
  min-width: 0; padding-left: 0; padding-right: 0;
  font-size: calc(.74rem * var(--pt));
}
/* 竖排时「存为释放纸 / 完成」文字转竖排：按钮宽度收到图标档，
   否则这两个文字按钮（95px/54px）会把竖条撑到 109px 粗 */
.paper-toolbar.dock-left .pt-keep, .paper-toolbar.dock-left .pt-done,
.paper-toolbar.dock-right .pt-keep, .paper-toolbar.dock-right .pt-done {
  writing-mode: vertical-rl; text-orientation: upright;
  padding: calc(8px * var(--pt)) calc(5px * var(--pt));
  font-size: calc(.74rem * var(--pt));
  letter-spacing: .14em;
}
.paper-toolbar.dock-left .pt-drag, .paper-toolbar.dock-right .pt-drag { width: calc(28px * var(--pt)); height: calc(18px * var(--pt)); margin: -2px 0 2px; }
.paper-toolbar.dragging { cursor: grabbing; opacity: .94; box-shadow: 0 10px 30px rgba(35, 36, 31, .28); }
/* 战役悬浮笔栏：fixed 全屏，不锁在小画布内 */
.paper-toolbar.overlay { position: fixed; z-index: 35; }
.paper-toolbar.overlay.dock-top { top: calc(10px + env(safe-area-inset-top)); }
.paper-toolbar.overlay.dock-left,
.paper-toolbar.overlay.dock-right { max-height: 86vh; }
.pt-color { width: calc(26px * var(--pt)); height: calc(26px * var(--pt)); border-radius: 50%; border: calc(2.5px * var(--pt)) solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 calc(1px * var(--pt)) rgba(35, 36, 31, .12); }
/* 选中态 = 纸色缝隙 + 细墨环：深色墨点上也有清晰的「缝」，不再黑框套黑点糊成一团。
   环 2px + 缝 2.5px：环再粗就闷（用户反馈「太宽了」）；不放大选中点，保持安静 */
.pt-color.on { border-color: #f2f0e9; box-shadow: 0 0 0 calc(2px * var(--pt)) var(--ink), inset 0 0 0 calc(1px * var(--pt)) rgba(35, 36, 31, .12); }
.pt-group { display: flex; gap: calc(6px * var(--pt)); align-items: center; }
/* 竖排停靠时粗细组也竖着排：整条工具栏只占一个图标宽 */
.paper-toolbar.dock-left .pt-group,
.paper-toolbar.dock-right .pt-group { flex-direction: column; }
.pt-width {
  width: calc(28px * var(--pt)); height: calc(28px * var(--pt)); border-radius: 50%;
  border: 1px solid var(--line-strong); background: #faf9f7;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pt-width span { background: var(--ink); border-radius: 50%; display: block; }
.pt-width.on { border-color: var(--ink); border-width: 2px; }
.pt-tool {
  font: inherit; font-size: calc(.82rem * var(--pt));
  border: 1px solid var(--line-strong); background: #faf9f7;
  border-radius: 999px; padding: calc(5px * var(--pt)) calc(12px * var(--pt)); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
/* 图标按钮：圆形紧凑 */
.pt-tool.icon {
  width: calc(30px * var(--pt)); height: calc(30px * var(--pt));
  padding: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pt-tool.icon svg { width: calc(16px * var(--pt)); height: calc(16px * var(--pt)); display: block; }
.pt-tool.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pt-done { background: var(--accent); border-color: var(--accent); color: #fff; }

.page-strip {
  position: absolute;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  display: none;
  gap: 8px;
  max-width: 94vw; overflow-x: auto;
  background: rgba(242, 240, 233, .96);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 6px 22px rgba(35, 36, 31, .2);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.page-strip.open { display: flex; }
.page-thumb {
  position: relative;
  width: 84px; height: 60px; flex: none;
  border: 2px solid var(--line); border-radius: 8px;
  background: #faf9f7; overflow: hidden; cursor: pointer;
}
.page-thumb.on { border-color: var(--accent); }
.page-thumb img { width: 100%; height: 100%; object-fit: cover; }
.page-thumb-empty { font-size: .72rem; color: var(--muted); display: flex; align-items: center; justify-content: center; height: 100%; }
.page-del {
  position: absolute; top: 0; right: 0;
  width: 20px; height: 20px;
  border: none; background: rgba(35, 36, 31, .55); color: #fff;
  font-size: .8rem; line-height: 1; cursor: pointer;
  border-radius: 0 0 0 6px;
}
.page-add {
  flex: none; width: 60px;
  font: inherit; font-size: .8rem;
  border: 1px dashed var(--line-strong); border-radius: 8px;
  background: transparent; cursor: pointer; color: var(--muted);
}

/* ---------- OC 陪伴角色 ---------- */
/* 身高随屏幕走但有上下限：桌面 22vh 在 iPad 上=260px 太大，手机同理 */
:root { --oc-h: clamp(96px, 16vh, 180px); }
.oc {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  z-index: 30;
  height: var(--oc-h);
  display: none;
  align-items: flex-end; justify-content: center;
  cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(20, 24, 38, .3));
  transition: transform .25s ease;
}
.oc:hover { transform: translateY(-3px); }
.oc img { height: 100%; display: block; pointer-events: none; }
.oc-bubble {
  position: fixed;
  right: calc(16px + 1vh);
  bottom: calc(var(--tabbar-h) + 18px + var(--oc-h) + 10px + env(safe-area-inset-bottom));
  z-index: 30;
  max-width: min(300px, 60vw);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px 15px;
  font-size: .92rem;
  line-height: 1.75;
  box-shadow: 0 10px 30px rgba(20, 24, 38, .2);
  opacity: 0; transform: translateY(6px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.oc-bubble.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.oc-bubble.hidden { opacity: 0 !important; pointer-events: none !important; }
.oc-bubble.pinned { transition: none; }

/* 猫守数字：今日页统计行里，连续释放天数旁边蹲的小猫 */
.oc-guard { display: inline-flex; align-items: center; gap: 6px; }
.oc-guard-img { width: 26px; height: 26px; image-rendering: pixelated; }

/* ---------- FAQ ---------- */
.faq-card { padding: 0; overflow: hidden; }
.faq-q {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  font: inherit; font-weight: 600; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 15px 17px;
  transition: background .18s ease;
}
.faq-q:hover { background: rgba(164, 128, 39, .05); }
.faq-q::after {
  content: "+";
  margin-left: auto;
  flex: none;
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 400;
  transition: transform .25s ease;
}
.faq-q:has(+ .faq-a[style*="block"])::after { transform: rotate(45deg); }
.faq-a { padding: 0 17px 15px; color: var(--ink-soft); }
.faq-a a { color: var(--accent-ink); }
.faq-a p { margin: 8px 0; line-height: 1.7; }
.faq-a strong { color: var(--ink); }
.faq-a img {
  display: block;
  max-width: 100%; height: auto;
  margin: 8px auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #faf9f7;
}

/* ---------- 设置 ---------- */
.mot-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.mot-row.sel .mot-line { font-weight: 600; color: var(--accent-ink); }
.mot-line { flex: 1; line-height: 1.65; font-size: .92rem; }

/* 复选框 / 单选框统一绿 */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1.05em; height: 1.05em; }

/* ---------- 次页面降档处理：核桃灰轻分层，不抢主页金块 ---------- */
/* 设置页卡：极淡核桃晕（比教程页再淡一档） */
#view-settings .card { background-color: rgba(132, 122, 110, .05); }
/* 激励语「使用中」：只给一圈金描边（当前态值得一丁点金，但不抢） */
.btn.mot-on { border-color: rgba(164, 128, 39, .55); color: var(--accent-ink); }

/* ---------- modal / toast ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(28, 29, 25, .48);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: maskin .25s ease both;
}
@keyframes maskin { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--paper);
  border-radius: 18px;
  padding: 22px;
  width: 100%; max-width: 520px;
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(28, 29, 25, .32);
  animation: modalin .3s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes modalin {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.modal-body { margin: 10px 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
#toast {
  position: fixed;
  bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
  left: 50%; transform: translate(-50%, 10px);
  z-index: 70;
  background: rgba(35, 36, 31, .94);
  color: #fff;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: .9rem;
  letter-spacing: .03em;
  box-shadow: 0 8px 26px rgba(28, 29, 25, .3);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 底部 tab 栏：炭灰压底（631 的「3」——全页最重的一条） ---------- */
#tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 25;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: rgba(35, 36, 31, .96);
  border-top: 1px solid rgba(242, 240, 233, .1);
  box-shadow: 0 -4px 24px rgba(35, 36, 31, .18);
  backdrop-filter: blur(10px);
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: inherit; font-size: .7rem;
  letter-spacing: .06em;
  background: none; border: none; cursor: pointer;
  color: #8d8580;
  padding: 7px 0 6px;
  position: relative;
  transition: color .2s ease;
}
.tab-item svg { width: 21px; height: 21px; display: block; }
.tab-item.active { color: #f2f0e9; font-weight: 600; }
.tab-item.active svg { transform: translateY(-1px); }
/* 当前 tab：文字下方一粒阳光黄小圆点（深底上的车站灯） */
.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-bright);
}
.tab-item:active svg { transform: scale(.92); }
.tab-item svg { transition: transform .15s ease; }

/* ---------- 细滚动条 ---------- */
.paper-toolbar::-webkit-scrollbar { display: none; }   /* 工具栏滑动不留轨，保持一条干净胶囊 */
.page-strip::-webkit-scrollbar, .modal::-webkit-scrollbar { width: 5px; height: 5px; }
.page-strip::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb {
  background: rgba(35, 36, 31, .18); border-radius: 999px;
}

/* ---------- 情绪走势图 ---------- */
.trend-canvas { width: 100%; height: auto; display: block; margin: 4px 0 2px; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.trend-lg { display: inline-flex; align-items: center; gap: 6px; }
.trend-lg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.trend-lg em { font-style: normal; font-size: .82rem; color: var(--muted); }
.range-pick { display: inline-flex; gap: 6px; }
.range-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 13px;
  font: inherit; font-size: .8rem;
  cursor: pointer;
  transition: all .18s ease;
}
.range-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- 强度滑块（复古金填充轨道 + 圆钮） ---------- */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 24px;
  background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%), rgba(35, 36, 31, .12) var(--fill, 50%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; background: #faf9f7;
  border: 2px solid var(--accent);
  box-shadow: 0 1px 5px rgba(35, 36, 31, .22);
  transition: transform .15s ease;
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(35, 36, 31, .12); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #faf9f7; border: 2px solid var(--accent);
  box-shadow: 0 1px 5px rgba(35, 36, 31, .22);
}
.range-val {
  min-width: 1.9em; text-align: center;
  font-weight: 600; font-size: .88rem; color: var(--accent-ink);
  background: rgba(164, 128, 39, .1);
  border-radius: 8px; padding: 2px 8px;
}

/* ---------- 折叠分页列表（宠物垃圾 / 纸张 / gains） ---------- */
.plist-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.plist-track::-webkit-scrollbar { display: none; }
.plist-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.plist-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.plist-arrow {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--muted); font-size: 1rem; line-height: 1;
  cursor: pointer; transition: all .18s ease;
}
.plist-arrow:hover { color: var(--accent-ink); border-color: var(--accent); }
.plist-dots { display: flex; gap: 6px; }
.plist-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(35, 36, 31, .18); transition: all .2s ease; }
.plist-dots i.on { background: var(--accent); transform: scale(1.25); }
.plist-more { width: 100%; margin-top: 6px; }

/* ---------- 首页 Gains 展示卡 ---------- */
.home-gains { margin-top: 4px; }
.home-gain-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.home-gain-row:last-child { border-bottom: none; }
.home-gain-text { flex: 1; min-width: 0; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-gains-foot { margin-top: 10px; }
.gains-add-card .btn { width: 100%; }

/* ---------- 练习本入口大卡 ---------- */
.wb-entry {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid rgba(132, 122, 110, .38);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  cursor: pointer; font: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wb-entry:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: rgba(132, 122, 110, .65); }
.wb-entry:active { transform: scale(.99); }
.wb-entry-icon { flex: none; width: 40px; height: 40px; color: var(--gold); }
.wb-entry-icon svg { width: 100%; height: 100%; display: block; }
.wb-entry-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wb-entry-title { font-weight: 600; font-size: 1.02rem; }
.wb-entry-sub { font-size: .82rem; color: var(--muted); }
.wb-entry-arrow { color: var(--gold); font-size: 1.15rem; }

/* ---------- 自适应 ---------- */
@media (min-width: 900px) {
  :root { font-size: 17px; }
  #main { max-width: 820px; }
}
@media (max-width: 480px) {
  .battle-map { padding: 12px 8px; }
  .map-node { min-width: 50px; }
}

/* ---------- 纸面噪点叠加（二次美化） ----------
 * 只贴在纯色底的纸面元素上（multiply 与底色混合）；
 * 内部小卡（垃圾卡/gain卡/type卡）保持干净，不与外层 .card 叠双份。 */
.card, .modal, .wb-entry, .wb-channel, .oc-bubble,
.battle-guide, .battle-map, .paper-toolbar, .page-strip, #tabbar {
  background-image: var(--noise);
  background-blend-mode: multiply;
}
/* 深块三件套本来就是渐变底，噪点与渐变并列叠加（深底上噪点近乎隐形，保留纸感肌理） */
.big-release, .btn-paper, .battle-motivation {
  background-image: var(--noise), var(--hero-bg);
  background-blend-mode: screen, normal;
}

/* ============================================================
 * 金色块层（631 的「3」落到最亮的金）：重要内容用色块托出来，
 * 不是描边点缀——标题带/序号/答案区直接上阳光金渐变，把内容粘成块。
 * ============================================================ */

/* 首页重要两卡：六步骤 / 我为什么要释放——淡金渐变托底 */
.card-steps, .card-why {
  background-image: var(--noise), linear-gradient(165deg, rgba(252, 210, 76, .16), rgba(164, 128, 39, .07) 60%);
  background-blend-mode: multiply, normal;
  border-color: rgba(164, 128, 39, .35);
}
/* 六步骤标题带：负 margin 撑满卡宽的阳光金渐变条（像垃圾卡「清理中」那种整块感） */
.card-steps h3 {
  margin: -18px -18px 14px;
  padding: 13px 18px 12px;
  background: linear-gradient(90deg, rgba(252, 210, 76, .55), rgba(252, 210, 76, .12));
  border-bottom: 1px solid rgba(164, 128, 39, .3);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.card-steps h3::before { display: none; }   /* 标题带里不再需要小竖标 */
.card-why h3::before {
  background: linear-gradient(180deg, #a48027, rgba(164, 128, 39, .35));
}
/* 六步骤序号圈：金底白字，实心压阵 */
.six-steps li::before {
  border: none;
  background: linear-gradient(160deg, #c19a3d, #a48027);
  color: #fff;
  box-shadow: 0 1px 4px rgba(164, 128, 39, .4);
}

/* 老头语录卡：阳光金渐变块托底（首页级重要内容），顶部渐隐线换金 */
.quote-card {
  background-image: var(--noise), linear-gradient(165deg, rgba(252, 210, 76, .18), rgba(164, 128, 39, .08) 55%);
  background-blend-mode: multiply, normal;
  border-color: rgba(164, 128, 39, .35);
}
.quote-card::before {
  background: linear-gradient(90deg, rgba(164, 128, 39, 0), rgba(164, 128, 39, .65), rgba(164, 128, 39, 0));
}

/* FAQ：答案区上核桃灰底块，与问题行分成两层 */
.faq-a {
  background: rgba(132, 122, 110, .08);
  margin: 0 10px 10px;
  border-radius: 12px;
  padding: 12px 14px 14px;
}
.faq-a p:first-child { margin-top: 2px; }