/* app.css — 页面骨架、标题栏、底部标签栏、卡片、按钮、八种状态类、打印样式 */

/* ============ 1. 基础重置 ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--color-bg-page);
  color: var(--color-text-main);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 内联 SVG 用 width/height 属性定尺寸，不能被 max-width 挤压后撑破布局 */
svg {
  display: block;
  flex: none;
}

.tab svg {
  width: var(--fs-title);
  height: var(--fs-title);
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

/* ============ 2. 标题栏 ============ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
  background-color: var(--color-bg-card);
  border-bottom: 1px solid var(--color-divider);
}

.app-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  margin-left: calc(var(--sp-2) * -1);
  border-radius: var(--r-btn);
  color: var(--color-heading);
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.app-header__back:active {
  background-color: var(--color-bg-muted);
  transform: scale(0.97);
}

.app-header__back.is-hidden {
  display: none;
}

.app-header__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 一级页没有返回箭头时，标题留出左侧呼吸位 */
.app-header--root .app-header__title {
  padding-left: var(--sp-1);
}

.app-header__action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--touch-min);
  height: var(--touch-min);
  padding: 0 var(--sp-2);
  border-radius: var(--r-btn);
  font-size: var(--fs-sub);
  font-weight: 500;
  color: var(--color-primary-strong);
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.app-header__action:active {
  background-color: var(--color-primary-soft);
  transform: scale(0.97);
}

/* ============ 3. 主内容区 ============ */
.app-main {
  padding: var(--sp-4);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-5));
}

.app-main > * + * {
  margin-top: var(--sp-4);
}

.app-main--plain {
  padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
}

/* ============ 4. 底部标签栏 ============ */
.app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--color-bg-card);
  border-top: 1px solid var(--color-divider);
}

.tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: var(--touch-min);
  color: var(--color-text-sub);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  transition: color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.tab:active {
  transform: scale(0.97);
}

.tab svg {
  width: var(--fs-title);
  height: var(--fs-title);
  stroke: currentColor;
  fill: none;
}

.tab.is-active {
  color: var(--color-primary-strong);
  font-weight: 600;
}

/* ============ 5. 卡片 ============ */
.card {
  padding: var(--sp-4);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-card-line);
  border-radius: var(--r-card);
}

.card__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.card__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-sub);
  color: var(--color-text-sub);
}

/* 占位卡片：本轮每个页面正文都是一个占位 */
.card--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: calc(var(--touch-min) * 3);
  text-align: center;
  color: var(--color-text-sub);
}

.card--placeholder .card__title {
  color: var(--color-heading);
}

.card__hint {
  font-size: var(--fs-sub);
  color: var(--color-text-sub);
}

/* ============ 6. 按钮 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: 0 var(--sp-4);
  border-radius: var(--r-btn);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-tight);
  border: 1px solid transparent;
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

/* 主按钮：白字底必须用 primary-strong */
.btn--primary {
  background-color: var(--color-primary-strong);
  color: var(--color-text-invert);
}

.btn--primary:active {
  background-color: var(--color-heading);
}

.btn--ghost {
  background-color: var(--color-bg-card);
  border-color: var(--color-divider);
  color: var(--color-primary-strong);
}

.btn--ghost:active {
  background-color: var(--color-primary-soft);
}

.btn--danger {
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ============ 7. 八种状态类 ============ */

/* 7.0 键盘焦点轮廓（R12）：只在用键盘 / 读屏软件导航时出现，鼠标点击不出现。
 * 放在人体图 .part-region:focus 之前——那里用 stroke 表达焦点，不能被盖掉。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary-strong);
  outline-offset: 2px;
}

/* 7.1 默认 */
.st-default {
  position: relative;
}

/* 7.2 按下 */
.st-pressed {
  transform: scale(0.97);
  filter: brightness(0.96);
  transition: transform var(--dur-tap) var(--ease-out),
    filter var(--dur-tap) var(--ease-out);
}

/* 7.3 选中 */
.st-selected {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
}

.st-selected svg {
  stroke: var(--color-text-invert);
}

/* 7.4 禁用 */
.st-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* 7.5 加载：灰色占位块，不用转圈 */
.st-loading {
  position: relative;
  background-color: var(--color-bg-muted);
  border-radius: var(--r-cell);
  color: transparent;
  overflow: hidden;
}

.st-loading::after {
  content: "";
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  height: var(--sp-4);
  border-radius: var(--r-tag);
  background-color: var(--color-divider);
}

/* 7.6 空 */
.st-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}

.st-empty__text {
  font-size: var(--fs-body);
  color: var(--color-text-sub);
}

.st-empty__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0 var(--sp-4);
  border-radius: var(--r-btn);
  background-color: var(--color-primary-strong);
  color: var(--color-text-invert);
  font-size: var(--fs-body);
  font-weight: 500;
  transition: transform var(--dur-tap) var(--ease-out);
}

.st-empty__action:active {
  transform: scale(0.97);
}

/* 7.7 错误 */
.st-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-card);
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
}

.st-error__retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0 var(--sp-4);
  border-radius: var(--r-btn);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  font-size: var(--fs-sub);
  font-weight: 500;
  transition: transform var(--dur-tap) var(--ease-out);
}

.st-error__retry:active {
  transform: scale(0.97);
}

/* 7.8 部分完成：环形进度 */
.st-partial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-5);
  height: var(--sp-5);
  border-radius: var(--r-card);
  background-color: var(--color-bg-muted);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.st-partial--ring {
  position: relative;
  background-image: conic-gradient(
    var(--color-primary) calc(var(--st-partial-value, 0) * 1%),
    var(--color-divider) 0
  );
}

.st-partial--ring::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: var(--r-card);
  background-color: var(--color-bg-card);
}

.st-partial__label {
  position: relative;
  z-index: 1;
  font-size: var(--fs-tiny);
}

/* ============ 8. 浮层：轻提示 / 弹层 ============ */
#toast-root {
  position: fixed;
  top: calc(var(--header-h) + env(safe-area-inset-top) + var(--sp-2));
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  pointer-events: none;
}

.toast {
  max-width: 100%;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-btn);
  background-color: var(--color-heading);
  color: var(--color-text-invert);
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  text-align: center;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(calc(var(--sp-1) * -1));
  transition: opacity var(--dur-sheet) var(--ease-out),
    transform var(--dur-sheet) var(--ease-out);
}

.toast.is-in {
  opacity: 1;
  transform: translateY(0);
}

#sheet-root:empty {
  display: none;
}

.sheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: rgba(51, 65, 58, 0.32);
  opacity: 0;
  transition: opacity var(--dur-sheet) var(--ease-out);
}

.sheet-mask.is-in {
  opacity: 1;
}

.sheet {
  width: 100%;
  max-width: 480px;
  padding: var(--sp-5) var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  border-radius: var(--r-card) var(--r-card) 0 0;
  background-color: var(--color-bg-card);
  transform: translateY(100%);
  transition: transform var(--dur-sheet) var(--ease-sheet);
}

.sheet-mask.is-in .sheet {
  transform: translateY(0);
}

.sheet__msg {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
  text-align: center;
}

.sheet__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.sheet__actions .btn {
  flex: 1;
}

/* ============ 9. 打印样式（R10 起由总数据页导出） ============ */
/* 打印前 JS 会把 canvas 换成这张图；平时藏起来，只让 canvas 显示。
 * 这条默认规则必须留在 app.css：pages.css 在它之后加载，同优先级会盖掉 print 里的覆盖。 */
.print-chart-img {
  display: none;
}

/* A4 纵向 + 四周留白。@page 只能放在最外层，不能塞进 @media。
 * 页边距用 --sp-6（32px ≈ 8.5mm），不写死物理单位——AGENTS 4 只认令牌。 */
@page {
  size: A4 portrait;
  margin: var(--sp-6);
}

@media print {
  /* 本文件先于 pages.css 加载，同名的单类选择器会被 pages.css 盖掉，
   * 所以这里凡是 pages.css 也设过的（.rep-actions / .chart-canvas / .print-chart-img）
   * 统一加 body 前缀提一级优先级，不靠 !important。 */

  /* 1. 界面上的一切都不上纸：导航、按钮、周期切换、导出区、浮层、骨架屏 */
  .app-header,
  .app-header__action,
  .app-tabbar,
  #toast-root,
  #sheet-root,
  #rp-period,
  .period-nav,
  .period-bar,
  .report-nav,
  body .rep-tabs,
  body .rep-actions,
  button,
  .btn,
  .st-empty__action,
  .link-btn,
  .skeleton,
  .no-print {
    display: none;
  }

  /* 2. 去背景色，正文用最深一档文字色（令牌里没有纯黑，这一档对比度已足够） */
  html,
  body {
    background-color: var(--color-bg-card);
    color: var(--color-text-main);
  }

  .app-main {
    max-width: 100%;
    padding: 0;
  }

  /* 3. 图表：打印前 JS 已把 canvas 换成 .print-chart-img，
   *    这里给它 A4 内的固定宽度，避免被裁掉；原来的 canvas 容器藏起来 */
  body .chart-canvas {
    width: 100%;
    height: auto;
    margin-top: var(--sp-2);
  }

  .chart-canvas > div {
    display: none;
  }

  body .print-chart-img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* 4. 卡片：去阴影、描细边，一张卡不跨页 */
  .card {
    padding: var(--sp-3);
    box-shadow: none;
    border: 1px solid var(--color-divider);
    break-inside: avoid;
  }

  .card + .card {
    margin-top: var(--sp-3);
  }

  /* 5. 表格：表头每页重复，行不被劈开 */
  .rep-table {
    width: 100%;
    break-inside: auto;
  }

  .rep-table thead {
    display: table-header-group;
  }

  .rep-table tr,
  .rep-table th,
  .rep-table td,
  .summary-text p {
    break-inside: avoid;
  }

  /* 纸上没有「点一下」，链接压回正文色 */
  a {
    color: inherit;
    text-decoration: none;
  }
}

/* ============ 10. 通用零件：日历 ============ */
.cal {
  background-color: var(--color-bg-card);
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.cal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--r-btn);
  color: var(--color-heading);
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.cal__nav:active {
  background-color: var(--color-bg-muted);
  transform: scale(0.97);
}

.cal__label {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.cal__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: var(--sp-2);
}

.cal__weekday {
  text-align: center;
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: var(--sp-1);
}

.cal__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0;
  border-radius: var(--r-cell);
  color: var(--color-primary-strong);
  background-color: transparent;
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.cal__cell:active {
  background-color: var(--color-bg-muted);
  transform: scale(0.97);
}

.cal__cell.is-out {
  color: var(--color-text-sub);
}

.cal__cell.is-today .cal__num {
  font-weight: 600;
  color: var(--color-heading);
}

.cal__cell.is-selected {
  background-color: var(--color-primary-soft);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.cal__cell.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.cal__num {
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
}

.cal__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
}

.cal__mood {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-5);
  height: var(--sp-5);
  color: var(--color-heading);
}

.cal__badge {
  position: absolute;
  top: calc(var(--sp-1) * -1);
  right: calc(var(--sp-1) * -1);
  min-width: var(--sp-4);
  height: var(--sp-4);
  border-radius: 100%;
  background-color: var(--color-primary-strong);
  color: var(--color-text-invert);
  font-size: var(--fs-tiny);
  line-height: var(--sp-4);
  text-align: center;
}

/* ============ 11. 通用零件：表情 / 环形 / 勾选圆 / 人体图 ============ */
/* 轮次 5：表情改成猫脸图片，外面套一层淡绿圆底。
   底色用 --color-primary-soft，选中态会被 .mood-pick.st-selected 覆盖成白底。 */
.part-face {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background-color: var(--color-primary-soft);
  overflow: hidden;
}

.part-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.part-ring__track {
  stroke: var(--color-divider);
}

.part-ring__arc {
  stroke: var(--color-primary);
}

.part-ring__label {
  fill: var(--color-heading);
  font-size: var(--fs-tiny);
  font-weight: 600;
}

.part-check__hollow {
  stroke: currentColor;
}

.part-check__disc {
  fill: var(--color-primary-strong);
}

.part-check__tick {
  stroke: var(--color-text-invert);
}

.part-bodymap {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* 未选中的部位：divider 比 bg-muted 深一档，白色卡片上轮廓才立得住 */
.part-region {
  fill: var(--color-divider);
  stroke: var(--color-bg-card);
  stroke-width: 1px;
  cursor: pointer;
  transition: fill var(--dur-tap) var(--ease-out),
    stroke var(--dur-tap) var(--ease-out);
}

.part-region.is-on {
  fill: var(--color-primary-soft);
  stroke: var(--color-primary);
  stroke-width: 2px;
}

.part-region:focus {
  outline: none;
}

.part-region:focus-visible {
  stroke: var(--color-primary-strong);
  stroke-width: 2px;
}

.part-spine {
  fill: none;
  stroke: var(--color-text-sub);
  stroke-width: 1px;
  stroke-dasharray: var(--sp-1) var(--sp-2);
  opacity: 0.45;
  /* 压在背部上面，不能把点击吃掉 */
  pointer-events: none;
}

/* 两具人形下方的小字：正面 / 背面 */
.part-figure-label {
  fill: var(--color-text-sub);
  font-size: var(--fs-tiny);
  font-weight: 500;
  pointer-events: none;
}

/* ============ 12. 弹层内容区 ============ */
.sheet--panel {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.sheet__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  flex: none;
}

/* 没有标题的弹层：关闭按钮靠右，别让它跑到左边 */
.sheet__head--bare {
  justify-content: flex-end;
}

/* 头部只有关闭按钮时，内容区不用再空出标题那么高的间距 */
.sheet__head--bare + .sheet__body {
  margin-top: var(--sp-1);
}

.sheet__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-normal);
  color: var(--color-heading);
}

.sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0;
  border-radius: var(--r-btn);
  color: var(--color-text-sub);
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.sheet__close:active {
  background-color: var(--color-bg-muted);
  transform: scale(0.97);
}

.sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: var(--sp-4);
  -webkit-overflow-scrolling: touch;
}

.sheet__body > * + * {
  margin-top: var(--sp-3);
}

/* ============ 13. 居中确认框 ============ */
.sheet-mask--center {
  align-items: center;
  padding: var(--sp-5);
}

.confirm {
  width: 100%;
  max-width: 100%;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-card);
  background-color: var(--color-bg-card);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.sheet-mask--center.is-in .confirm {
  opacity: 1;
  transform: scale(1);
}

.confirm__msg {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
  text-align: center;
}

.confirm__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.confirm__actions .btn {
  flex: 1;
}

/* ============ 14. 右下角撤销提示 ============ */
#undo-root {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-4));
  left: var(--sp-4);
  z-index: 65;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

#undo-root:empty {
  display: none;
}

.tip-undo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
  border-radius: var(--r-btn);
  background-color: var(--color-heading);
  color: var(--color-text-invert);
  font-size: var(--fs-sub);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(var(--sp-2));
  transition: opacity var(--dur-sheet) var(--ease-out),
    transform var(--dur-sheet) var(--ease-out);
  pointer-events: auto;
}

.tip-undo.is-in {
  opacity: 1;
  transform: translateY(0);
}

.tip-undo__msg {
  flex: 1;
  min-width: 0;
  line-height: var(--lh-tight);
  word-break: break-word;
}

.tip-undo__count {
  flex: none;
  min-width: var(--sp-3);
  text-align: center;
  font-size: var(--fs-tiny);
  opacity: 0.45;
}

.tip-undo__btn {
  flex: none;
  min-height: var(--touch-min);
  padding: 0 var(--sp-3);
  border-radius: var(--r-tag);
  background-color: var(--color-primary-soft);
  color: var(--color-heading);
  font-size: var(--fs-sub);
  font-weight: 600;
  transition: transform var(--dur-tap) var(--ease-out);
}

.tip-undo__btn:active {
  transform: scale(0.97);
}

/* ============ 15. 主题覆盖（R11） ============
 * 只覆盖颜色变量，间距 / 字号 / 圆角一律沿用 tokens.css。
 * 这里的色值是 AGENTS 4 允许的例外：主题覆盖块可以写原始色值。
 * 默认（无 data-theme）就是 tokens.css 里的抹茶。 */

/* 暖白：米黄底 + 暖棕主色 */
[data-theme="warm"] {
  --color-primary-strong: #7A6A4F;
  --color-primary: #A08D6B;
  --color-primary-soft: #EFE3CE;
  --color-secondary: #C9B893;
  --color-accent: #C98F5E;

  --color-bg-page: #FAF4E9;
  --color-bg-card: #FFFCF5;
  --color-bg-muted: #F3EBDC;

  --color-text-main: #3E362B;
  --color-text-sub: #7A6F5E;
  --color-heading: #5C4B33;

  --color-divider: #E7DCC9;
  --color-danger: #A9635A;
  --color-danger-soft: #F7E6E0;

  --chart-1: #A08D6B;
  --chart-2: #C9B893;
  --chart-3: #C98F5E;
  --chart-4: #7A6A4F;
  --chart-5: #E2D7BF;

  --shadow-card: 0 2px 8px rgba(92, 75, 51, 0.07);
}

/* 素白：白底 + 中性墨绿，几乎不带色相 */
[data-theme="plain"] {
  --color-primary-strong: #4F5B55;
  --color-primary: #7C8A82;
  --color-primary-soft: #EDEFEE;
  --color-secondary: #B8C0BB;
  --color-accent: #9AA39D;

  --color-bg-page: #FAFAFA;
  --color-bg-card: #FFFFFF;
  --color-bg-muted: #F2F3F2;

  --color-text-main: #2E3331;
  --color-text-sub: #6E7772;
  --color-heading: #3A423E;

  --color-divider: #E4E6E5;
  --color-danger: #A5655C;
  --color-danger-soft: #F6EAE8;

  --chart-1: #7C8A82;
  --chart-2: #B8C0BB;
  --chart-3: #9AA39D;
  --chart-4: #4F5B55;
  --chart-5: #D9DEDB;

  --shadow-card: 0 2px 8px rgba(46, 51, 49, 0.05);
}

/* 主题切换要看得见，但不能有弹跳；只过渡底色与描边。
 * 这几个选择器原本没有 transition，加在这里不会盖掉按钮 / 日历已有的按压缩放动效。 */
body,
.app-header,
.app-tabbar,
.card {
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out);
}

/* ===== 进站封面（轮次 3） ===== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-splash);
  opacity: 1;
  transition: opacity 300ms var(--ease-out);
}

.splash.is-out {
  opacity: 0;
  pointer-events: none;
}

.splash.is-hidden {
  display: none;
}

.splash__img {
  display: block;
  width: 100%;
  height: auto;
}