/* 宋体：思源宋体（Noto Serif SC），用于标题、心愿名、日期等“手账”元素 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700&display=swap');
/* 手写体：龙藏体（Long Cang），用户亲手写下的内容都用它 */
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');

/* ============================================================
   小熊习惯 · HTML 原型公共样式
   颜色、圆角、动效曲线都集中在 :root，改这里即可全局生效
   ============================================================ */
:root {
  /* ---------- 心愿手账：纸 + 墨 + 一方朱砂印 ---------- */
  --paper: #F7F5F0;          /* 纸色（页面底） */
  --bg: var(--paper);
  --card: #FFFDF9;           /* 稍亮一点的纸：明信片、卡片 */
  --ink: #1F1D1A;            /* 墨色（偏暖的黑） */
  --ink-2: #6E6A63;
  --ink-3: #A39E95;
  --line: #E4DFD5;           /* 横线、分隔线 */
  --soft: #EFEBE3;           /* 浅底：按钮、标签 */
  --seal: #C23B22;           /* 朱砂红：只用于 盖章 / 今天 / 当前位置 */

  --accent: var(--ink);
  --brand: var(--ink);
  --brand-soft: var(--soft);
  --brand-deep: var(--ink);
  --wish: var(--ink);
  --wish-ink: var(--ink);
  --wish-soft: var(--soft);
  --gold: var(--ink);
  --green: var(--ink);
  --green-soft: var(--soft);
  --danger: var(--seal);
  --black: var(--ink);

  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --hand: "Long Cang", "Kaiti SC", "STKaiti", cursive;
  --pen: #2C3A5A;            /* 蓝黑墨水：手写内容的颜色 */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;

  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 0 0 1px var(--line);
  --shadow-lg: 0 0 0 1px var(--line);

  /* ---------- 动效：统一的曲线和时长 ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* 进入、反馈 */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* 屏幕内移动 */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS 弹层曲线 */
  --t-press: 140ms;
  --t-fast: 200ms;
  --t-sheet: 380ms;

  --tabbar-h: 49px;
  --safe-top: max(env(safe-area-inset-top, 0px), 14px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 移动端原生感基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-tap-highlight-color: transparent;   /* 去掉点击时的灰色闪块 */
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;                   /* 页面不整体回弹 / 不触发下拉刷新 */
}
html, body { min-height: 100%; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  background: #E9E6DF;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; border: none; background: none; outline: none; }
input, textarea, select { font-size: 16px; }   /* 小于 16px 时 iOS 会自动放大页面 */
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a, [role="button"], .tab, .chip, .pressable {
  touch-action: manipulation;                  /* 去掉 300ms 点击延迟 */
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;                 /* 长按不弹系统菜单 */
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* 数字：等宽，变化时不跳动；大字收紧字距 */
.num, .tnum { font-variant-numeric: tabular-nums; }
.num { letter-spacing: -0.02em; }
h1, h2, h3 { letter-spacing: -0.01em; }

/* ---------- 统一的按压反馈：手指一按下就有反应 ---------- */
.btn, .icon-btn, .menu-item, .chip, .pressable, .segment button {
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease, color var(--t-fast) ease, opacity var(--t-fast) ease;
}
.btn:active, .icon-btn:active, .chip:active, .pressable:active { transform: scale(0.96); }
.menu-item:active { background-color: var(--soft); }

/* ---------- 手机容器：手机上铺满，电脑上居中成一台“手机” ---------- */
.app {
  position: relative;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  padding: calc(var(--safe-top) + 6px) 18px calc(var(--tabbar-h) + var(--safe-bottom) + 28px);
  overflow-x: hidden;
}
.app.no-tab { padding-bottom: calc(var(--safe-bottom) + 24px); }
.app.white { background: #fff; }

/* ---------- 顶部导航栏（二级页面） ---------- */
.navbar { display: flex; align-items: center; justify-content: space-between; height: 44px; margin-bottom: 12px; }
.navbar h1 { font-size: 17px; font-weight: 600; }
.navbar .nav-btn { width: 44px; height: 44px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: transform var(--t-press) var(--ease-out); }
.navbar .nav-btn:last-child { margin-left: 0; margin-right: -8px; }
.navbar .nav-btn:active { transform: scale(0.9); }
.navbar .nav-text { font-size: 15px; color: var(--brand-deep); font-weight: 600; padding: 0 4px; min-height: 44px; display: grid; place-items: center; }

/* ---------- 底部 Tab：安静的文字导航 ----------
   和页面同一张纸，只用一条极浅的线分开；
   未选中：灰字；选中：墨色加粗，字下方一个很小的朱红圆点 */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 430px);
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding: 0 12px var(--safe-bottom);
  background: rgba(247, 245, 240, .92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -1px 0 rgba(60, 50, 30, .07);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  z-index: 50;
}
.tab {
  position: relative; height: 44px; display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px; letter-spacing: .12em; color: var(--ink-3);
  transition: color 160ms ease;
}
.tab span { transition: transform var(--t-press) var(--ease-out); }
.tab:active span { transform: scale(.92); }
.tab.active { color: var(--ink); font-weight: 600; }
.tab.active::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--seal); }

/* ---------- 通用组件 ---------- */
.card { background: var(--card); border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow); }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 4px 12px; }
.section-title h2 { font-size: 17px; font-weight: 600; }
.section-title .more { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; min-height: 32px; }
.section-title .more svg.i { width: 14px; height: 14px; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn { height: 46px; border-radius: 14px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 20px; }
.btn-block { width: 100%; }
.btn-black { background: var(--black); color: #fff; }
.btn-brand { background: var(--brand); color: #fff; }
.btn-wish { background: var(--wish); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-soft { background: var(--brand-soft); color: var(--brand-deep); }
.btn-danger { background: #F6E6E1; color: var(--seal); }
.btn:disabled { opacity: .45; }

.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.icon-btn.black { background: var(--black); color: #fff; }
.icon-btn.white { background: #fff; box-shadow: var(--shadow); }

.chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 600; background: var(--brand-soft); color: var(--brand-deep); white-space: nowrap; }
.chip.gold, .chip.green { background: var(--soft); color: var(--ink); }
.chip.wish { background: var(--wish-soft); color: var(--wish-ink); }

/* 进度条：用 transform 平移，不触发重排；圆角端点不会被压扁 */
.progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress > i { display: block; width: 100%; height: 100%; border-radius: 4px; background: var(--ink); transform: translateX(-100%); transition: transform 700ms var(--ease-out); }

/* 表单 */
.field { background: #fff; border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 12px; transition: box-shadow var(--t-fast) ease; }
.field:focus-within { box-shadow: 0 0 0 1.5px var(--ink); }
.field label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.field label svg.i { width: 18px; height: 18px; }
.field input, .field textarea { width: 100%; font-size: 16px; }
.field textarea { min-height: 90px; resize: none; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }

/* 分段控件：选中块滑动，而不是两个格子同时闪变 */
.segment { position: relative; display: flex; background: var(--soft); border-radius: 12px; padding: 3px; }
.segment::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); transform: translateX(calc(100% * var(--i, 0))); transition: transform 280ms var(--ease-out); }
.segment button { position: relative; flex: 1; height: 34px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.segment button.on { color: var(--ink); font-weight: 600; }

/* 列表菜单 */
.menu { background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden; }
.menu-item { display: flex; align-items: center; gap: 14px; padding: 16px; position: relative; min-height: 56px; }
.menu-item + .menu-item::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.menu-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.menu-item .title { font-size: 15px; font-weight: 500; }
.menu-item .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.menu-item > svg.i:last-child { color: #C5C9D4; width: 18px; height: 18px; }

/* ---------- 底部弹层：进入慢一点、离开快一点；可以下拉关闭 ---------- */
.mask { position: fixed; inset: 0; background: rgba(20,22,35,.36); opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 80; }
.mask.show { opacity: 1; pointer-events: auto; transition-duration: var(--t-sheet); }
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: min(100%, 430px); max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 28px 28px 0 0;
  padding: 8px 20px calc(var(--safe-bottom) + 24px);
    transition: transform 240ms var(--ease-out); z-index: 90;
  touch-action: none;                         /* 拖拽由我们自己处理 */
}
.sheet.show { transform: translate(-50%, 0); transition-duration: var(--t-sheet); transition-timing-function: var(--ease-drawer); }
.sheet.dragging { transition: none; }
.sheet::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; background: #DADDE5; margin: 0 auto 18px; }

/* Toast：从顶部落下，原路收回 */
.toast { position: fixed; top: calc(var(--safe-top) + 10px); left: 50%; transform: translate(-50%, calc(-100% - 20px)); background: rgba(31,35,48,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: 14px; font-weight: 500; padding: 11px 18px; border-radius: 22px; opacity: 0; transition: transform 200ms var(--ease-out), opacity 200ms ease; z-index: 200; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); transition-duration: 320ms; }

/* ---------- 手账通用元素 ---------- */
.serif { font-family: var(--serif); }
/* 小标签：12px、加宽字距，像手账页眉 */
.label { font-size: 12px; letter-spacing: .14em; color: var(--ink-3); }
/* 大号细体数字 + 小单位 */
.figure { font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; }
.figure small { font-size: .32em; font-weight: 400; letter-spacing: 0; color: var(--ink-3); margin-left: 4px; }
/* 细分隔线 */
.rule { height: 1px; background: var(--line); border: 0; }
/* 印章：朱红方印 + 白色宋体字 */
.stamp { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--seal); color: #FFF6EE; font-family: var(--serif); font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 2px var(--seal), inset 0 0 0 3px rgba(255,246,238,.75); transform: rotate(-8deg); }

/* 纸：明信片 / 单据 / 存折都用这张纸（很淡的噪点纸纹 + 细边 + 轻投影） */
.paper {
  position: relative; border-radius: 3px; background-color: #FFFCF6;
  background-image: 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1px #E8E1D4, 0 1px 1px rgba(60, 40, 20, .05), 0 8px 18px rgba(60, 40, 20, .06);
}
/* 手写：用户亲手写的字 */
.hand { font-family: var(--hand); color: var(--pen); }
/* 邮编格（日期 / 编码） */
.zip { display: flex; gap: 4px; }
.zip i { width: 15px; height: 18px; box-shadow: inset 0 0 0 1px var(--seal); display: grid; place-items: center; font-style: normal; font-family: var(--serif); font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* 齿孔线：可以撕下的地方 */
.perf { height: 0; border-top: 2px dotted #D6CCBB; }
/* 单据上的一栏：左边印刷的小标签，右边是填写区（下划线） */
.form-row { display: flex; align-items: flex-end; gap: 12px; padding: 10px 0 0; }
.form-row > .k { width: 58px; flex-shrink: 0; padding-bottom: 7px; font-size: 11px; letter-spacing: .12em; color: var(--ink-3); }
.form-row > .v { flex: 1; min-width: 0; min-height: 38px; display: flex; align-items: flex-end; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid #E2D9CA; }
.form-row input.hand { width: 100%; font-size: 22px; line-height: 32px; background: none; }
.form-row input.hand::placeholder, textarea.hand::placeholder { color: #B9B1A3; opacity: 1; }
/* 方框勾选：手写的朱红 ✓ */
.tick { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.tick::before { content: ""; width: 16px; height: 16px; box-shadow: inset 0 0 0 1.2px var(--ink-2); border-radius: 2px; flex-shrink: 0; }
.tick { position: relative; }
.tick::after { content: "✓"; position: absolute; left: 1px; top: 50%; margin-top: -21px; font-family: var(--hand); font-size: 26px; color: var(--seal); opacity: 0; transform: scale(1.4); transition: opacity 120ms ease, transform 220ms var(--ease-out); pointer-events: none; }
.tick.on { color: var(--ink); }
.tick.on::after { opacity: 1; transform: scale(1); }
/* 页面标题（宋体大字） + 眉标 */
.page-title { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.15; margin-top: 6px; }

/* 完成圈：空心圆 → 实心墨色圆，白色的勾一笔画出来（首页 / 打卡页 / 习惯详情共用）
   父元素带 .on 或 .done 时为完成状态 */
.dr { position: relative; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--ink-3); transition: background-color 160ms ease, box-shadow 160ms ease, transform var(--t-press) var(--ease-out); }
.dr svg { width: 15px; height: 15px; fill: none; stroke: #FBF8F2; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dr path { stroke-dasharray: 17; stroke-dashoffset: 17; transition: stroke-dashoffset 100ms ease; }
.on > .dr, .done .dr { background: var(--ink); box-shadow: none; }
.on > .dr path, .done .dr path { stroke-dashoffset: 0; transition: stroke-dashoffset 220ms var(--ease-out) 60ms; }
button:active > .dr { transform: scale(.88); }

/* 邮票：齿孔边（mask 挖出半圆孔），朱红细框，面值 = 积分。尺寸保持 8 的倍数，齿孔才对称 */
.stamp-wrap { filter: drop-shadow(0 1px 1.2px rgba(60, 40, 20, .22)); transform: rotate(2.5deg); }
.stamp-post {
  width: 72px; height: 88px; padding: 4px; background: #FFFDF8;
  -webkit-mask: radial-gradient(circle 3.1px, #0000 95%, #000) -4px -4px / 8px 8px, linear-gradient(#000 0 0) content-box;
          mask: radial-gradient(circle 3.1px, #0000 95%, #000) -4px -4px / 8px 8px, linear-gradient(#000 0 0) content-box;
}
.stamp-post .in { height: 100%; border: 3px solid #FFFDF8; outline: 1px solid var(--seal); outline-offset: -3px; background: #F4E4D8; display: flex; flex-direction: column; justify-content: space-between; padding: 5px 6px 4px; }
.stamp-post .org { font-size: 8px; letter-spacing: .14em; color: var(--seal); white-space: nowrap; overflow: hidden; }
.stamp-post .v { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1; color: var(--seal); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stamp-post .v small { font-size: 11px; margin-left: 1px; }
.stamp-post .no { font-size: 7px; color: #A87C6A; text-align: right; font-variant-numeric: tabular-nums; }
/* 邮戳 SVG 的公共样式（postmark() 生成） */
.pm { position: absolute; width: 150px; height: 79px; color: #34302B; opacity: .78; pointer-events: none; mix-blend-mode: multiply; }
.pm.red { color: var(--seal); opacity: .9; }

/* 空状态 */
.empty { text-align: center; padding: 48px 20px; color: var(--ink-3); font-size: 14px; }
.empty .emoji { font-size: 44px; margin-bottom: 10px; }

/* 列表首次出现：轻微错峰上浮（只在页面加载时） */
.stagger > * { animation: rise 420ms var(--ease-out) both; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(n+6) { animation-delay: 200ms; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* 原型导航角标（只在原型中出现，方便跳页面） */
.proto-home { position: fixed; left: 10px; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 14px); z-index: 300; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; display: grid; place-items: center; opacity: .5; }
@media (min-width: 600px) { .proto-home { left: calc(50% - 195px - 72px); bottom: 60px; } }

/* =========================================================
   iOS 预览：在电脑浏览器（或目录页缩略图）里按 iPhone 15 的尺寸显示
   屏幕 390 × 844pt；顶部安全区 59pt（状态栏 + 灵动岛）；底部安全区 34pt（Home 指示条）
   html.preview 由 common.js 在非触屏设备上加上；真机上不加，用系统的 env() 安全区
   ========================================================= */
html.preview { --safe-top: 59px; --safe-bottom: 34px; }
.ios-status { position: fixed; left: 0; right: 0; top: 0; height: 54px; z-index: 400; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 46px;
  font: 600 16px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; color: var(--ink); letter-spacing: -0.01em;
  background: rgba(247, 245, 240, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ios-status .island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.ios-status .icons { display: flex; align-items: center; gap: 6px; }
.ios-status svg { display: block; fill: currentColor; }
.ios-home { position: fixed; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ink); z-index: 400; pointer-events: none; }
html.preview .sheet { max-height: 88%; }
/* 宽屏：放进手机外框，内容在屏幕内部滚动；底栏、弹层、提示都固定在这块屏幕里 */
@media (min-width: 600px) {
  /* html 不设 overflow 时，body 的 overflow 会被“转交”给窗口而不裁剪自身，所以这里要给 html 设一个 */
  html.preview { min-height: 100%; background: #E9E6DF; overflow: auto; }
  html.preview body { width: 390px; height: 844px; margin: 32px auto; padding: 0; border-radius: 54px; overflow: hidden;
    transform: translateZ(0);   /* 让 position: fixed 的元素以这块“屏幕”为参照 */
    background: var(--paper); box-shadow: 0 0 0 11px #1C1C1E, 0 0 0 12.5px #48484A, 0 40px 90px rgba(0, 0, 0, .28); }
  html.preview .app { height: 100%; min-height: 0; max-width: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  html.preview .app::-webkit-scrollbar { display: none; }
  html.preview .tabbar { width: 100%; }
}

/* 悬停只给有鼠标的设备，避免手机上点完一直“悬停” */
@media (hover: hover) and (pointer: fine) {
  .proto-home:hover { opacity: 1; }
  .menu-item:hover { background-color: #FBF9F5; }
  .btn-ghost:hover { background: #FBF9F5; }
}

/* ---------- 无障碍：减少动态效果 / 减少透明度 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; }
  .btn:active, .icon-btn:active, .chip:active, .pressable:active { transform: none; }
  .sheet, .sheet.show { transition: opacity 200ms ease; }
  .sheet:not(.show) { opacity: 0; }
  .progress > i { transition-duration: 1ms; }
  .toast, .toast.show { transform: translate(-50%, 0); }
}
@media (prefers-reduced-transparency: reduce) {
  .toast { background: var(--ink); backdrop-filter: none; }
}

/* 静态刻度尺（miniRuler）：分享明信片、桌面小组件 */
.mruler { position: relative; height: calc(var(--man) * 1.125 + 18px); }
.mruler .ticks { position: absolute; left: 0; right: 0; bottom: 4px; height: 12px; display: flex; justify-content: space-between; align-items: flex-end; }
.mruler .ticks i { width: 1px; height: 6px; background: var(--ink-3); opacity: .55; }
.mruler .ticks i:nth-child(5n+1) { height: 12px; }
.mruler .ticks.on i { background: var(--ink); opacity: 1; }
.mruler .base { position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--line); }
.mruler .man { position: absolute; top: 0; width: var(--man); height: calc(var(--man) * 1.125); margin-left: calc(var(--man) / -2); color: var(--ink); }
.mruler .man svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- 兑现心愿（首页、心愿页共用）：按住盖章 ----------
   一张明信片 + 一张小单据（可用 / 邮资 / 兑现后）；按住 0.8 秒盖章，松手就取消，防误触
   盖上后：朱红「已兑现」邮戳落在明信片上 + 震动；再告诉你下一站是哪个心愿 */
.rd .rd-card { position: relative; margin-top: 4px; padding: 16px 16px 14px; display: flex; gap: 12px; align-items: flex-start; }
.rd .rd-card .tx { flex: 1; min-width: 0; }
.rd .rd-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; margin-top: 4px; }
.rd .rd-card p { font-family: var(--serif); font-size: 12px; color: var(--ink-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd .rd-card .stamp-wrap { transform: rotate(3deg); }
.rd .rd-card .stamp-post { width: 56px; height: 72px; }
.rd .rd-card .stamp-post .v { font-size: 17px; }
.rd .rd-card .stamp-post .org { font-size: 6.5px; letter-spacing: 0; }
.rd .rd-card .stamp-post .in { padding: 5px 4px 4px; }
.rd .rd-card .pm { width: 150px; height: 79px; right: 6px; top: 22px; transform: rotate(-10deg) scale(1.35); opacity: 0; }
.rd.done .rd-card .pm { opacity: .9; transform: rotate(-10deg) scale(1); transition: transform 260ms var(--ease-out), opacity 120ms ease; }
.rd .bill { margin-top: 14px; }
.rd .bill .ln { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid #E2D9CA; font-size: 13px; color: var(--ink-2); }
.rd .bill .ln b { font-size: 17px; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.rd .bill .ln.out b { color: var(--seal); }
.rd .bill .ln.total { border-bottom: 0; }
.rd .bill .ln.total b { font-family: var(--serif); font-weight: 600; }
.hold { position: relative; overflow: hidden; width: 100%; height: 54px; margin-top: 18px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .1em; touch-action: none; }
.hold i { position: absolute; inset: 0; background: var(--seal); transform: scaleX(0); transform-origin: left; transition: transform 160ms var(--ease-out); }
.hold.pressing i { transform: scaleX(1); transition: transform 800ms linear; }
.hold span { position: relative; }
.rd .tip { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.rd .after { display: none; text-align: center; padding-top: 16px; }
.rd.done .bill, .rd.done .hold, .rd.done .tip.before { display: none; }
.rd.done .after { display: block; animation: rise 360ms var(--ease-out) both 220ms; }
.rd .after .hand { font-size: 28px; line-height: 1.2; }
.rd .after .sub { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.rd .next { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding: 12px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; color: var(--ink-2); }
.rd .next b { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 15px; }
.rd .after .btn { margin-top: 18px; }

/* 信鸽（common.js pigeonSVG）：飞的时候扇翅、收脚；在刻度尺上挪动时轻轻一跳 */
.pigeon-wing { transform-origin: 22px 15px; }
.pigeon-legs { transition: opacity 120ms ease; }
.is-flying .pigeon-wing, .is-walking .pigeon-wing { animation: pigeon-flap 110ms var(--ease-in-out) infinite alternate; }
.is-flying .pigeon-legs { opacity: 0; }
.is-flying.is-gliding .pigeon-wing { animation: none; transform: rotate(-30deg); }
.is-flying.is-gliding .pigeon-legs { opacity: 1; }
@keyframes pigeon-flap { from { transform: rotate(-38deg); } to { transform: rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .is-flying .pigeon-wing, .is-walking .pigeon-wing { animation: none; } }