/* 毛笔楷书（马善政，OFL 开源，本地加载，不外链） */
@font-face {
  font-family: 'Ma Shan Zheng';
  src: url('/fonts/ma-shan-zheng.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 信差爷镖局 · 网页版 · 米白宣纸 + 朱红 国风主题 */
:root {
  --paper: #f7f0e3;
  --card: #fffdf6;
  --ink: #3a2e1f;
  --ink-2: #6b5a42;
  --ink-3: #a08e70;
  --line: #e8dcc2;
  --vermilion: #b0341f;
  --vermilion-2: #d9482e;
  --gold: #c9a253;
  --green: #4a7c59;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* 关键：html 必须有高度，否则 body/#app 的 100% 会失效，页面撑不满屏幕 */
html, body { height: 100%; overflow-x: hidden; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
#app { display: flex; flex-direction: column; height: 100%; }

/* ---- 顶栏 ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(180deg, #fffdf6, #faf4e6);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-icon { width: 26px; height: 26px; }
.brand-name { font-size: 17px; font-weight: 700; letter-spacing: 2px; }
.topbar-right { font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }

/* ---- 主区域 ---- */
#view { flex: 1; overflow-y: auto; padding: 14px 14px 84px; }
#view.no-scroll { overflow: hidden; padding: 0; }

/* ---- 底部导航 ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  display: flex; justify-content: space-around;
  background: rgba(255, 253, 246, 0.96);
  border-top: 1px solid var(--line);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  font-size: 10.5px; color: var(--ink-3); text-decoration: none; padding: 4px 0;
}
.tab-icon { font-size: 20px; line-height: 1; }
.tab.active { color: var(--vermilion); font-weight: 700; }

/* ---- 卡片与按钮 ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(58, 46, 31, 0.06);
}
.card-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.card-title .sub { font-size: 12px; font-weight: 400; color: var(--ink-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #f6efdd; color: var(--ink);
  font-size: 14px; padding: 10px 16px; cursor: pointer;
  transition: transform 0.08s, opacity 0.15s;
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--vermilion-2), var(--vermilion));
  border: none; color: #fff; font-weight: 700; letter-spacing: 2px;
}
.btn-ghost { background: transparent; }
.btn-danger { background: var(--vermilion); color: #fff; border: none; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn-sm { font-size: 12px; padding: 6px 12px; }

/* 拦截按钮：进入范围时金色脉冲 */
.btn-intercept {
  background: linear-gradient(135deg, #e8b23a, #c98a1b);
  color: #4a2c00; border: none; font-weight: 800; letter-spacing: 2px;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 178, 58, 0.55); }
  50% { box-shadow: 0 0 0 12px rgba(232, 178, 58, 0); }
}
/* 拦截栏要抬到 tabbar 之上，否则按钮会被底部导航压住 */
#interceptBox { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
/* 近处有马但条件不足：说明差在哪 */
.ic-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 13px;
  background: rgba(255, 253, 246, 0.97);
  border: 1px solid #e6d5b4;
  border-left: 3px solid #b0341f;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(60, 40, 15, 0.13);
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b5637;
}
.ic-hint .ico { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 3px; color: #b0341f; }

/* ---- 表单 ---- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.field input[type="text"], .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: #fffef9; padding: 10px 12px; font-size: 14px; color: var(--ink);
  outline: none;
}
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.loc-btns { display: flex; gap: 8px; margin-top: 6px; }

.pick-box {
  border: 1px dashed var(--line); border-radius: 10px; background: #fffef9;
  padding: 10px 12px; font-size: 14px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.pick-box.filled { border-style: solid; border-color: var(--gold); }
.pick-box .arrow { color: var(--ink-3); }

.switch-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.switch-row:last-child { border-bottom: none; }
.switch-row .label { font-size: 14px; }
.switch-row .desc { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* 类型卡片 */
.type-cards { display: flex; gap: 10px; }
.type-card {
  flex: 1; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fffef9; padding: 12px; cursor: pointer; text-align: center;
}
.type-card.active { border-color: var(--vermilion); background: #fdf3ec; }
.type-card .t-name { font-size: 15px; font-weight: 700; }
.type-card .t-desc { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* ---- 列表 ---- */
.list-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 4px; border-bottom: 1px dashed var(--line); cursor: pointer;
}
.list-item:last-child { border-bottom: none; }
.li-main { min-width: 0; }
.li-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.li-right { text-align: right; flex-shrink: 0; margin-left: 10px; }
.badge {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #f6efdd; color: var(--ink-2); border: 1px solid var(--line);
}
.badge.red { background: #fdeae4; color: var(--vermilion); border-color: #f3c9be; }
.badge.green { background: #e8f2ea; color: var(--green); border-color: #c5dcc9; }
.badge.gold { background: #faf1da; color: #9a6d12; border-color: #ecd9a8; }

.empty { text-align: center; color: var(--ink-3); font-size: 13px; padding: 30px 0; }

/* ---- 首页 hero ---- */
.hero {
  background: linear-gradient(160deg, #fdf6e8 10%, #f6ecd6 60%, #f3e3c2 100%);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 18px; text-align: center; margin-bottom: 14px;
}
.hero h1 { font-size: 26px; letter-spacing: 6px; font-weight: 800; }
.hero .slogan { font-size: 13px; color: var(--ink-2); margin-top: 8px; letter-spacing: 3px; }
.hero-actions { display: flex; gap: 10px; margin-top: 18px; }
.hero-actions .btn { flex: 1; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-cell { text-align: center; background: #fffef9; border: 1px solid var(--line); border-radius: 12px; padding: 12px 0; }
.stat-num { font-size: 20px; font-weight: 800; color: var(--vermilion); }
.stat-label { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
/* 统计格可点：进入对应列表详情 */
.stat-cell[role="button"] { cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.stat-cell[role="button"]:active { background: #fbf3e4; border-color: var(--gold-deep); transform: scale(0.98); }
.stat-cell .stat-arr { display: inline-block; margin-left: 3px; opacity: 0.55; vertical-align: -1px; }
.stat-cell .stat-arr svg { width: 9px; height: 9px; }

/* ---- 地图 ---- */
.map-wrap { position: relative; width: 100%; height: 100%; }
.map-wrap .amap { width: 100%; height: 100%; }
/* 仿古宣纸质感：叠一层米黄，与国风主题统一（不干扰 marker 颜色） */
.map-wrap::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none; z-index: 300;
  background: linear-gradient(rgba(247, 240, 227, 0.34), rgba(240, 229, 205, 0.24));
  mix-blend-mode: multiply;
}
.map-wrap.wide::after { border-radius: 12px; }
.map-wrap.no-vintage::after { display: none; }
.map-float {
  position: absolute; z-index: 400; left: 12px; right: 12px;
}
.map-float.top { top: 12px; }
.map-float.bottom { bottom: 18px; }
.map-banner {
  background: rgba(58, 46, 31, 0.85); color: #fff; font-size: 12px;
  border-radius: 10px; padding: 8px 12px; text-align: center;
}
.amap-error {
  position: absolute; inset: 0; z-index: 600; display: flex;
  align-items: center; justify-content: center; background: var(--paper);
  color: var(--ink-2); font-size: 14px; padding: 30px; text-align: center;
}

/* 聚合点：一簇驿马用「驿」字印记表示，不显示数量 */
.cluster-marker {
  position: relative;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(176, 52, 31, 0.94);
  color: #fff6e8;
  font-family: var(--font-kai, 'Kaiti SC', serif);
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 253, 246, 0.92);
  box-shadow: 0 2px 7px rgba(60, 40, 15, 0.3);
  cursor: pointer;
}
/* 外圈淡环，暗示「这一带还有几匹」，不做数字 */
.cluster-marker::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(176, 52, 31, 0.28);
  animation: cluster-breathe 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cluster-breathe {
  0%, 100% { transform: scale(0.94); opacity: 0.65; }
  50% { transform: scale(1.04); opacity: 0.3; }
}

/* 驿马详情浮层 */
.horse-sheet {
  background: var(--card); border-radius: 16px 16px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.horse-sheet .hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.horse-sheet .hd .t { font-size: 16px; font-weight: 700; }
.horse-sheet .hd .x { color: var(--ink-3); cursor: pointer; font-size: 18px; padding: 2px 6px; }
.progress-bar { height: 8px; border-radius: 999px; background: #f0e6d0; overflow: hidden; margin: 10px 0; }
.progress-bar > div { height: 100%; background: linear-gradient(90deg, var(--gold), var(--vermilion)); }
.meta-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
.sheet-actions { display: flex; gap: 10px; margin-top: 14px; }
.sheet-actions .btn { flex: 1; }

/* ---- 拦截结果 ---- */
.result-hero { text-align: center; padding: 30px 16px; }
.result-hero .big { font-size: 44px; }
.result-hero h2 { font-size: 20px; margin-top: 10px; letter-spacing: 3px; }
.result-hero .reason { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.letter-body {
  background: repeating-linear-gradient(0deg, #fffef8, #fffef8 26px, #f8efdd 27px);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--font-brush);
  font-size: 17px; line-height: 27px; white-space: pre-wrap;
  color: #2f2318;
  letter-spacing: 0.4px;
}
.locked {
  text-align: center; padding: 26px 20px; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: 12px; font-size: 14px;
}
.locked b { display: block; margin-top: 8px; font-size: 15px; color: #5c4425; font-weight: 600; }
.locked i { display: block; margin-top: 5px; font-style: normal; font-size: 12px; }
.locked small { display: block; margin-top: 10px; font-size: 11.5px; color: #a08e70; }

/* ---- 隐私说明 ---- */
.privacy-note {
  background: #fdf6e8; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: 12px; color: var(--ink-2); line-height: 1.8;
}

/* ---- 弹层 ---- */
.modal-mask {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(30, 20, 10, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-sheet {
  width: 100%; max-width: 560px; background: var(--card);
  border-radius: 18px 18px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  max-height: 72vh; overflow-y: auto;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head .t { font-size: 16px; font-weight: 700; }
.modal-head .x { color: var(--ink-3); cursor: pointer; font-size: 20px; padding: 0 6px; }
.city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.city-item {
  text-align: center; padding: 12px 0; background: #f6efdd;
  border: 1px solid var(--line); border-radius: 10px; font-size: 14px; cursor: pointer;
}
.city-item:active { background: var(--vermilion); color: #fff; }
.pick-map-box { height: 300px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }

/* ---- 轨迹回放控制条 ---- */
.play-ctl { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.play-ctl .btn { flex: none; }
.rate-group { display: flex; gap: 4px; margin-left: auto; }
.rate-btn {
  padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: #fffef9; font-size: 12px; color: var(--ink-2); cursor: pointer;
}
.rate-btn.active { background: var(--vermilion); color: #fff; border-color: var(--vermilion); }
.follow-chip {
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fffef9; cursor: pointer; color: var(--ink-2);
}
.follow-chip.active { border-color: var(--gold); color: #9a6d12; background: #faf1da; }

/* ---- toast ---- */
.toast {
  position: fixed; z-index: 999; left: 50%; bottom: 120px; transform: translateX(-50%);
  background: rgba(58, 46, 31, 0.9); color: #fff; font-size: 13px;
  padding: 9px 18px; border-radius: 999px; pointer-events: none;
  /* 只设 left 时固定定位会按"半屏剩余宽度"收缩，长句就被挤成两行 */
  width: max-content;
  max-width: 80vw; text-align: center;
  line-height: 1.5;
}

/* ---- 设置菜单 ---- */
.menu-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 6px; border-bottom: 1px dashed var(--line); cursor: pointer; font-size: 14px;
}
.menu-item:last-child { border-bottom: none; }
.menu-item .arr { color: var(--ink-3); }

/* rules */
/* 镖局规矩：左侧一道淡金竖线，像信笺的边 */
.rule-lead {
  font-family: var(--font-kai);
  font-size: 13px;
  color: #8a7455;
  letter-spacing: 0.5px;
  margin: 2px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.rule-sec {
  position: relative;
  margin-bottom: 16px;
  padding-left: 12px;
}
.rule-sec::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(rgba(201, 162, 83, 0.55), rgba(201, 162, 83, 0.12));
}
.rule-sec h3 {
  font-size: 14.5px;
  margin-bottom: 6px;
  color: var(--vermilion);
  letter-spacing: 1px;
}
.rule-sec p { font-size: 13px; color: var(--ink-2); line-height: 1.95; }
.rule-sec p b { color: #8f2f1c; font-weight: 600; }
.rule-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  text-align: center;
  font-family: var(--font-kai);
  font-size: 12.5px;
  color: #a08e70;
  letter-spacing: 1px;
}

.link { color: var(--vermilion); text-decoration: none; cursor: pointer; }

@media (min-width: 700px) {
  #view { max-width: 640px; margin: 0 auto; width: 100%; }
  #view.no-scroll { max-width: none; }
}

/* 起终点圆点标记 */
.pt-dot {
  width: 26px; height: 26px; border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.pt-dot.start { background: #2f7d5d; }
.pt-dot.end { background: #b0341f; }

/* ---------- 登录 / 注册 ---------- */
.auth-mask {
  position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 15%, #3c2c1c, #1a130d 72%);
  padding: 20px;
}
.auth-box {
  width: min(92vw, 360px); background: var(--card); border-radius: 18px;
  padding: 28px 24px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.auth-brand { text-align: center; font-size: 24px; font-weight: 800; letter-spacing: 6px; }
.auth-sub { text-align: center; font-size: 12px; color: var(--ink-3); margin: 8px 0 20px; letter-spacing: 2px; }
.auth-tabs { display: flex; justify-content: center; gap: 26px; margin-bottom: 18px; }
.auth-tab {
  font-size: 15px; color: var(--ink-3); cursor: pointer; padding-bottom: 6px;
  border-bottom: 2px solid transparent;
}
.auth-tab.active { color: var(--vermilion); border-bottom-color: var(--vermilion); font-weight: 700; }
.auth-field { margin-bottom: 12px; }
.auth-field input {
  width: 100%; padding: 11px 13px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 10px; background: #fffef9; outline: none;
}
.auth-field input:focus { border-color: var(--gold); }
.auth-err { color: var(--vermilion); font-size: 12.5px; text-align: center; height: 18px; margin-top: 8px; }
.auth-tip { text-align: center; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

/* ---------- 驿马逐帧动画（4 帧雪碧图 + CSS steps） ----------
 * --fw = 四帧总宽；容器宽高 = --fw / 4。
 * 低缩放时只改 --fw 就能整体缩小（含雪碧图），无需重建 marker。
 */
.horse-anim {
  --fw: 400px;                       /* 默认一帧 100px */
  position: relative;
  width: calc(var(--fw) / 4);
  height: calc(var(--fw) / 4);
  margin-left: calc(-1 * var(--fw) / 8);   /* 居中锚点，不依赖 map offset */
  margin-top: calc(-1 * var(--fw) / 8);
  pointer-events: auto;
}
.map-wrap.z-mid .horse-anim { --fw: 240px; }   /* 一帧 60px */
.map-wrap.z-far .horse-anim { --fw: 160px; }   /* 一帧 40px */
.map-wrap.z-micro .horse-anim { --fw: 100px; } /* 一帧 25px */

.horse-bob {
  width: 100%;
  height: 100%;
  animation: horse-bob 0.28s ease-in-out infinite alternate;
  will-change: transform;
}
.horse-sprite {
  width: 100%;
  height: 100%;
  background-image: url('/images/horse_sprite.png');
  background-size: var(--fw) calc(var(--fw) / 4);
  background-repeat: no-repeat;
  background-position: 0 0;
  animation: horse-gallop 0.4s steps(4) infinite;
  will-change: background-position;
}
@keyframes horse-gallop {
  from { background-position: 0 0; }
  to { background-position: calc(-1 * var(--fw)) 0; }
}
@keyframes horse-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}
/* 页面切到后台时暂停所有逐帧动画 */
body.anim-paused .horse-sprite,
body.anim-paused .horse-bob {
  animation-play-state: paused;
}

/* ---------- 运送详情：通栏大图 + 双列信息 ---------- */
.map-bleed {
  position: relative;
  margin: -14px -14px 0;       /* 抵消 #view 的 14px 内边距，做成通栏 */
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  background: #efe5cf;
}
.map-bleed .map-wrap {
  height: min(58vh, 560px);    /* 之前固定 320px，主要就是这里被压小 */
  border-radius: 0;
}
.map-hud {
  position: absolute;
  z-index: 350;
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}
.map-hud.right { left: auto; right: 12px; }
.map-hud .badge { background: rgba(255, 253, 246, 0.94); backdrop-filter: blur(2px); }

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.info-cell { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-3); }
.info-cell b { font-size: 15px; color: var(--ink); font-weight: 700; }
.info-cell.span2 { grid-column: 1 / -1; }
.info-cell.span2 b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 在线用户标记 ---------- */
.user-dot-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translate(-6px, -6px);
  pointer-events: auto;
}
.user-dot-wrap i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2f8f5e;              /* 其他在线用户：绿色，与自己的蓝点区分 */
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(47, 143, 94, 0.24);
  flex: 0 0 auto;
}
.user-dot-wrap b {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.94);
  color: #1f6b45;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* 世界/大区视角只留点，不显示名字，避免糊成一片 */
.map-wrap.z-micro .user-dot-wrap b,
.map-wrap.z-far .user-dot-wrap b {
  display: none;
}

/* ---------- 自己的位置蓝点 ---------- */
.self-dot {
  width: 16px;
  height: 16px;
  transform: translate(-8px, -8px);
  pointer-events: auto;
  cursor: pointer;
}
.self-dot::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3a7bd5;
  border: 3px solid #fff;
  box-sizing: border-box;
  animation: self-pulse 1.8s ease-out infinite;
}
@keyframes self-pulse {
  0% { box-shadow: 0 0 0 0 rgba(58, 123, 213, 0.5); }
  70% { box-shadow: 0 0 0 16px rgba(58, 123, 213, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 123, 213, 0); }
}

/* 驿马详情面板：限高可滚动，避免遮挡整张地图 */
.horse-sheet {
  max-height: 56vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- 拦截光圈：文字标签 / 说明条 ---------- */
/* 光圈中心的文字标签（跟着自己的蓝点走） */
.range-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.95);
  border: 1px solid rgba(176, 52, 31, 0.42);
  color: #8f2f1c;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 5px rgba(92, 40, 20, 0.18);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 20px));
}
.range-label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #b0341f;
  background: rgba(176, 52, 31, 0.18);
  flex: 0 0 auto;
}
/* 平时藏起来：不放大到街道级别就不显示，免得一直抢眼 */
.range-label.hide { display: none; }
/* 驿马进圈时高亮提示 */
.range-label.hot {
  background: #d9482e;
  border-color: #d9482e;
  color: #fff;
  animation: range-label-pop 0.9s ease-in-out infinite alternate;
}
.range-label.hot i {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.5);
}
@keyframes range-label-pop {
  from { transform: translate(-50%, calc(-100% - 20px)) scale(1); }
  to { transform: translate(-50%, calc(-100% - 24px)) scale(1.04); }
}

/* 左下角「拦截范围」小标签 */
.range-chip {
  border-color: rgba(176, 52, 31, 0.35) !important;
  color: #8f2f1c !important;
  background: #fdf3ef !important;
  font-weight: 600;
  cursor: pointer;
}

/* 首次进入的说明条：解释光圈作用，点「知道了」或 12 秒后自动收起 */
.range-guide {
  position: absolute;
  z-index: 420;
  left: 12px;
  right: 12px;
  bottom: 148px;
  background: rgba(255, 253, 246, 0.97);
  border: 1px solid rgba(176, 52, 31, 0.28);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 26px rgba(60, 30, 10, 0.2);
  animation: guide-in 0.28s ease-out;
}
.rg-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #8f2f1c;
}
.rg-hd i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #b0341f;
  background: rgba(176, 52, 31, 0.14);
  flex: 0 0 auto;
}
.rg-bd {
  font-size: 12px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 6px 0 9px;
}
.rg-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rg-size {
  font-size: 11px;
  color: var(--ink-3);
}
.rg-ok {
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--vermilion, #c0392b), #a02a1a);
  padding: 4px 13px;
  border-radius: 999px;
  cursor: pointer;
}
@keyframes guide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* 运输方式卡片上的速度提示 */
.type-card .t-meta {
  font-size: 11px;
  color: var(--gold, #9a6d12);
  margin-top: 4px;
  font-weight: 600;
}

/* ================= 首页（按参考图排版，通栏） ================= */
#view.home-view {
  padding: 0 0 84px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #f7ebd6;
}

.home-hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 44vh;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 0;
  /* 背景图：用户提供后放到 images/home-bg.jpg 即自动生效；没有图时用暖色渐变兜底 */
  background-image:
    url('/images/home-bg.jpg'),
    radial-gradient(circle at 50% 14%, #fffaf0 0%, #f6e9cf 38%, #ead5ae 100%);
  background-size: cover, cover;
  background-position: center top, center;
  background-repeat: no-repeat, no-repeat;
  background-color: #f2e2c6;
}

/* 图片底部自然淡入纸色，与下方按钮区无缝衔接 */
.home-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(247, 235, 214, 0) 0%,
    rgba(247, 235, 214, 0.35) 45%,
    rgba(247, 235, 214, 0.82) 78%,
    #f7ebd6 100%
  );
}

.hh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hh-icon {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 1px 5px rgba(120, 90, 50, 0.16);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hh-icon:active { transform: scale(0.94); }

.hh-title {
  text-align: center;
  margin-top: 2px;
}
.hh-word {
  font-family: "STKaiti", "KaiTi", "Songti SC", "SimSun", serif;
  font-size: clamp(30px, 9.4vw, 46px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 8px;
  color: #241608;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55), 0 8px 18px rgba(120, 70, 20, 0.18);
}
.hh-word span { margin-left: 8px; }
.hh-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  vertical-align: top;
  background: #b0341f;
  color: #fff;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  border-radius: 5px;
  letter-spacing: 0;
  box-shadow: 0 1px 3px rgba(120, 30, 15, 0.35);
  transform: translateY(4px) rotate(-4deg);
}

.hh-ribbon {
  align-self: center;
  margin-top: 12px;
  padding: 6px 26px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #7a5320;
  background: linear-gradient(180deg, #fdf3d8, #efd8a4);
  border: 1px solid #d8b878;
  border-radius: 7px;
  box-shadow: 0 2px 7px rgba(140, 100, 40, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.home-bottom {
  flex: 0 0 auto;
  padding: 16px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: #f7ebd6;
}

.home-btn {
  position: relative;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 13px;
  border: 2px solid #8a6a35;
  background: linear-gradient(180deg, #fffaea, #f0dcae);
  color: #6b4a1c;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 3px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75), 0 3px 10px rgba(120, 80, 30, 0.18);
}
.home-btn .hb-ic { font-size: 17px; letter-spacing: 0; }
.home-btn:active { transform: translateY(1px); }

.home-btn.primary {
  border-color: #6f1b0f;
  background: linear-gradient(180deg, #d1391f, #a52213);
  color: #fff3d8;
  text-shadow: 0 1px 2px rgba(90, 20, 10, 0.45);
  box-shadow: inset 0 0 0 2px rgba(255, 205, 130, 0.55), 0 5px 16px rgba(150, 40, 20, 0.34);
}

.map-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fdf8ec, #f2e5c7);
  border: 1px solid #e0cd9d;
  box-shadow: 0 3px 10px rgba(140, 100, 40, 0.14);
  cursor: pointer;
}
.map-entry:active { transform: translateY(1px); }
.map-entry .me-avatar {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(180deg, #fbf1d8, #ecdcb8);
  border: 1px solid #ddc79c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(140, 100, 40, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex: 0 0 auto;
}
.map-entry .me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.map-entry .me-text b {
  font-family: var(--font-serif);
  font-size: 17px;
  color: #3a2a16;
  letter-spacing: 2px;
}
.map-entry .me-text span {
  font-size: 12px;
  color: #8a7455;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 缩略图：一张微缩的古地图（等高线 + 河道 + 金线驿路 + 朱红驿站 + 一匹小马），
   比原来的斜纹块更像"地图"，也和整体国风统一 */
.map-entry .me-thumb {
  position: relative;
  width: 96px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid #dcc8a0;
  background: linear-gradient(158deg, #fdf8ea 0%, #f3e7ca 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -3px 8px rgba(150, 115, 60, 0.13);
  flex: 0 0 auto;
  overflow: hidden;
}
.map-entry .me-thumb svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 在途驿马的光环：慢慢扩一圈，暗示"有马在跑" */
.map-entry .th-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: th-pulse 2.4s ease-out infinite;
}
@keyframes th-pulse {
  0%   { transform: scale(0.55); opacity: 0.75; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-entry .th-halo { animation: none; }
}

/* 首页隐藏顶栏，做成沉浸式 */
body.on-home .topbar { display: none; }

/* 背景图自带标题、印章与缎带 → 默认隐藏 DOM 版本，避免重影；
   只有图片加载失败（body.no-home-bg）时才显示文字兜底，加载过程也不会闪一下 */
body.on-home .hh-title,
body.on-home .hh-ribbon { display: none; }
body.on-home.no-home-bg .hh-title,
body.on-home.no-home-bg .hh-ribbon { display: block; }

/* 顶部小图标压在插画天空上：更轻、更透，不抢主体 */
body.on-home .hh-icon {
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 1px 4px rgba(90, 60, 30, 0.12);
  opacity: 0.9;
}


/* ================= 电脑宽屏适配：按手机宽度居中 ================= */
@media (min-width: 720px) {
  body { background: #ece0ca; }
  #app {
    max-width: 430px;
    margin: 0 auto;
    box-shadow: 0 0 48px rgba(80, 50, 20, 0.18);
  }
  .tabbar {
    left: 50%;
    right: auto;
    width: 430px;
    transform: translateX(-50%);
  }
}

/* ================= 图标基础 ================= */
.ico {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.18em;
  flex: 0 0 auto;
}
.tab-ico {
  width: 22px;
  height: 22px;
  color: currentColor;
  display: block;
}

/* ==================================================================
   国风纸本 · 设计系统（统一内页质感，覆盖前面的基础样式）
   ================================================================== */
:root {
  --font-kai: "STKaiti", "KaiTi", "Kaiti SC", "STSong", "Songti SC", "Noto Serif SC", serif;
  --font-serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  /* 信里的字：毛笔楷书，取不到就退回楷体 */
  --font-brush: "Ma Shan Zheng", "STXingkai", "Kaiti SC", "KaiTi", "STKaiti", serif;
  --gold-line: #e3cf9f;
  --gold-deep: #c9a253;
  --paper-2: #fdf8ec;
}

/* ---------- 宣纸纹理：极淡噪点，只做质感不抢内容 ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 字体分层：标题楷体，正文黑体，数字宋体 ---------- */
.brand-name,
.card-title,
.auth-brand,
.rule-sec h3,
.hh-word {
  font-family: var(--font-kai);
}
.card-title {
  font-size: 17px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #3a2a16;
}
.card-title .sub {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  font-size: 11.5px;
}
.stat-num { font-family: var(--font-serif); letter-spacing: 0.5px; }
.brand-name { letter-spacing: 3px; }

/* ---------- 卡片：信笺（外层纸边 + 内圈金线 + 极轻投影） ---------- */
.card {
  background: linear-gradient(180deg, #fffdf7 0%, var(--paper-2) 100%);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 0 0 4px rgba(201, 162, 83, 0.1),
    0 2px 10px rgba(120, 90, 40, 0.07);
}

/* ---------- 按钮：统一规格 + 内金线 ---------- */
.btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 9px;
  border: 1px solid #dcc59a;
  background: linear-gradient(180deg, #fffdf4, #f4e6c8);
  color: #6b4a1c;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(120, 90, 40, 0.1);
}
.btn-primary {
  border: 1px solid #8a2314;
  background: linear-gradient(180deg, #c93a22, #a12113);
  color: #fff6e2;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 205, 140, 0.45), 0 2px 8px rgba(150, 40, 20, 0.26);
}
.btn-danger { border: 1px solid #8a2314; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; letter-spacing: 0.5px; }

/* ---------- 表单：纸面内凹 + 金色聚焦环 ---------- */
.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field textarea,
.field .wiz-edit,
.field select,
.auth-field input {
  background: #fffdf6;
  border: 1px solid #e3d2b0;
  border-radius: 9px;
  box-shadow: inset 0 1px 2px rgba(120, 90, 40, 0.07);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus,
.field textarea:focus,
.field .wiz-edit:focus,
.field select:focus,
.auth-field input:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(201, 162, 83, 0.16), inset 0 1px 2px rgba(120, 90, 40, 0.05);
  outline: none;
}
.pick-box {
  border: 1px solid #e3d2b0;
  background: #fffdf6;
  border-radius: 9px;
  box-shadow: inset 0 1px 2px rgba(120, 90, 40, 0.06);
}

/* ---------- 复选框：朱红方章，替掉浏览器默认蓝方块 ---------- */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid #cfb489;
  border-radius: 4px;
  background: #fffdf6;
  box-shadow: inset 0 1px 2px rgba(120, 90, 40, 0.08);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.15s, border-color 0.15s;
}
input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #c93a22, #a12113);
  border-color: #8a2314;
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2.5px;
  width: 5px;
  height: 10px;
  border: 2px solid #fff6e2;
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

/* ---------- 分隔线：墨线（两端淡出），替掉虚线 ---------- */
.menu-item,
.list-item {
  border-bottom: none;
  position: relative;
}
.menu-item + .menu-item::before,
.list-item + .list-item::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e6d5b4 10%, #e6d5b4 90%, transparent);
}
.menu-item { padding: 14px 4px; }
.menu-item .mi {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #3a2a16;
}
.menu-item .mi .ico {
  width: 19px;
  height: 19px;
  color: #a8703a;
}
.menu-item .arr {
  display: flex;
  align-items: center;
  color: #cbb894;
}
.menu-item .arr .ico {
  width: 16px;
  height: 16px;
}

/* ---------- 徽章：小方章 ---------- */
.badge {
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 7px;
  letter-spacing: 0.5px;
  background: #fbf3e4;
  color: #8a6a35;
  border: 1px solid #e6d3ab;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.badge.red { background: #fbeee8; color: #a83a20; border-color: #eec4b6; }

/* ---------- 空态：淡墨信封 + 文案 ---------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #a08e70;
  font-size: 13px;
  padding: 26px 0;
  line-height: 1.7;
}
.empty::before {
  content: '';
  width: 42px;
  height: 42px;
  opacity: 0.24;
  background-color: #8a7050;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' d='M3 6.2h18v11.6H3z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' d='M3.6 7 12 12.7 20.4 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' d='M3 6.2h18v11.6H3z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' d='M3.6 7 12 12.7 20.4 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 首页按钮里的图标 ---------- */
.home-btn .hb-ic {
  width: 19px;
  height: 19px;
  letter-spacing: 0;
}
.map-entry .me-avatar .ico { width: 22px; height: 22px; color: #9a6d12; }
.hh-icon .ico { width: 17px; height: 17px; color: #6b4a1c; }

/* ---------- 内容区底部留白，避免最后一个按钮被导航压住 ---------- */
#view { padding-bottom: 96px; }

/* ---------- 按钮内图标颜色跟随按钮文字 ---------- */
.home-btn.primary .hb-ic { color: #fff3d8; }
.home-btn:not(.primary) .hb-ic { color: #7a5320; }

/* ---------- 表单提交栏：固定在底部导航上方，始终可见且不压内容 ---------- */
.submit-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  z-index: 400;
  padding: 10px 16px 12px;
  background: #f7f0e3;
  border-top: 1px solid #ecdcbb;
  box-shadow: 0 -8px 18px rgba(120, 90, 40, 0.07);
}
.submit-bar .btn { width: 100%; height: 46px; font-size: 15px; }

/* 有固定提交栏时，内容区多留出空间 */
body.has-submit-bar #view { padding-bottom: 190px; }

@media (min-width: 720px) {
  .submit-bar {
    left: 50%;
    right: auto;
    width: 430px;
    transform: translateX(-50%);
  }
}

/* ---------- 头像加一圈描金 ---------- */
.card [style*="border-radius:50%"] { box-shadow: 0 0 0 2px #fffdf7, 0 0 0 3.5px rgba(201, 162, 83, 0.5); }

/* ---------- 收件箱分段标签（竹签感） ---------- */
.tabBtn {
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid transparent;
  color: var(--ink-3);
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0;
}
.tabBtn.on {
  background: #fbeee8;
  border-color: rgba(176, 52, 31, 0.26);
  color: var(--vermilion);
  font-weight: 700;
}

/* ---------- 空态文案层级 ---------- */
.empty b {
  font-family: var(--font-kai);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8a7050;
}
.empty span { font-size: 12px; color: #b0a087; }

/* ---------- 行内图标（锁、闪电、镜头） ---------- */
.locked .ico,
.btn-intercept .ico,
.follow-chip .ico {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.16em;
  margin-right: 4px;
}
.follow-chip { display: inline-flex; align-items: center; gap: 3px; }

/* ---------- 顶栏品牌印章 ---------- */
.brand-seal {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #c23a22, #a12113);
  color: #fff6e2;
  font-family: var(--font-kai);
  font-size: 15px;
  font-weight: 700;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 205, 140, 0.5), 0 1px 3px rgba(120, 30, 15, 0.28);
  transform: rotate(-2deg);
}

/* 菜单图标加深一点，避免发灰 */
.menu-item .mi .ico { color: #9a6430; }
.menu-item .mi { font-size: 14.5px; letter-spacing: 0.5px; }

/* 空态再多留些呼吸 */
.empty { padding: 38px 0; }

/* 头像首字用楷体，更像印章 */
.card [style*="border-radius:50%"] {
  font-family: var(--font-kai) !important;
  font-size: 25px !important;
}
/* 顶栏右上角用户名稍加重 */
.topbar-right { color: #6b5a42; font-size: 12.5px; }

/* ================= 信件附件（发文 / 收文） ================= */
.att-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.att-grid:empty { display: none; }

.att-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e3d2b0;
  background: #f4e9d2;
}
.att-item img,
.att-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.att-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(30, 20, 10, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.att-play .ico { width: 12px; height: 12px; margin-left: 2px; }

.att-del {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(30, 20, 10, 0.62);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.att-del .ico { width: 11px; height: 11px; }

.att-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.att-actions .muted { font-size: 11.5px; color: var(--ink-3); }
.att-actions .btn .ico { width: 15px; height: 15px; margin-right: 5px; }

/* 信件详情里的图与视频 */
.letter-att {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.letter-att .att-big {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #e3d2b0;
  display: block;
  cursor: zoom-in;
}
.letter-att .att-video {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #e3d2b0;
  background: #2a1f14;
  display: block;
}

/* 图片灯箱 */
.att-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(20, 14, 8, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.att-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* 列表里的附件角标 */
.li-att {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #a8703a;
  font-size: 11.5px;
}
.li-att .ico { width: 13px; height: 13px; }

/* ================= 写信两步向导 ================= */
.wiz-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 14px;
}
.wiz-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #b0a087;
  transition: color 0.2s;
}
.wiz-step i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #dcc59a;
  background: #fffdf6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 12.5px;
  font-family: var(--font-kai);
  transition: all 0.2s;
}
.wiz-step.on { color: #a8341f; font-weight: 700; }
.wiz-step.on i {
  background: linear-gradient(180deg, #c93a22, #a12113);
  border-color: #8a2314;
  color: #fff6e2;
  box-shadow: 0 2px 6px rgba(150, 40, 20, 0.28);
}
.wiz-line {
  flex: 1;
  height: 2px;
  background: #ecdcbb;
  border-radius: 2px;
  overflow: hidden;
}
.wiz-line b {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c9a253, #b0341f);
  transition: width 0.28s ease;
}

/* 正文框：一张信笺 —— 横线跟着行距走，落笔像写在纸上 */
.wiz-paper { position: relative; }
.field textarea.wiz-text,
.field .wiz-edit {
  min-height: max(260px, 36vh);
  padding: 14px 16px 30px;
  font-family: var(--font-brush);
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0.4px;
  color: #2f2318;
  resize: none;
  overflow: hidden;
  caret-color: #b0341f;
  background-color: #fffdf7;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    rgba(176, 142, 90, 0.16) 31px,
    rgba(176, 142, 90, 0.16) 32px
  );
  background-attachment: local;
  border-color: #e6d5b4;
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.field textarea.wiz-text:focus,
.field .wiz-edit:focus {
  background-color: #fffefa;
  border-color: #c9a05a;
  box-shadow: 0 0 0 3px rgba(201, 162, 83, 0.12), inset 0 1px 2px rgba(120, 90, 40, 0.05);
}
.field textarea.wiz-text::placeholder {
  color: #c0b096;
  font-family: var(--font-kai);
  letter-spacing: 0.6px;
}
/* 可编辑的信纸：div 当输入框，行为要跟 textarea 一致 */
.field .wiz-edit {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  cursor: text;
}
.field .wiz-edit[data-empty]::before {
  content: attr(data-ph);
  color: #c0b096;
  font-family: var(--font-kai);
  letter-spacing: 0.6px;
  pointer-events: none;
}
/* 字数：放在纸外右侧。原先沉在纸角，长文滚动时会盖住最后一行 */
.wiz-count {
  text-align: right;
  padding-right: 2px;
  margin-top: 6px;
  font-size: 11px;
  color: #b8a88c;
  pointer-events: none;
  transition: color 0.18s;
}
.wiz-count.near { color: #b0341f; }

/* 底栏：单按钮 / 双按钮都能排 */
.wiz-bar { display: flex; gap: 10px; }
.wiz-bar .btn { flex: 1 1 0; width: auto; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.wiz-bar .btn-primary { flex: 1.5 1 0; }

/* 第二步顶部：内文摘要 + 返回修改 */
.wiz-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -2px 0 14px;
  padding: 9px 12px;
  background: #fbf3e4;
  border: 1px dashed #e2cf9f;
  border-radius: 9px;
  font-size: 12px;
  color: #8a6a35;
}
.wiz-summary b {
  color: #a8341f;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* ================= 起终点选择器（导航式：搜索 → 拖动微调 → 确定） ================= */
.sheet-pick { max-height: 90vh; }
.loc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #fffdf6;
  border: 1px solid #e3d2b0;
  border-radius: 9px;
  box-shadow: inset 0 1px 2px rgba(120, 90, 40, 0.07);
}
.loc-search .ico { width: 16px; height: 16px; color: #a08e70; }
.loc-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--ink);
}
.loc-x {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  color: #b3a288;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
}
.loc-x:active { background: #f0e4cd; }

.loc-results {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 20;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid #e6d5b4;
  border-radius: 10px;
  background: #fffdf7;
  box-shadow: 0 10px 24px rgba(70, 45, 15, 0.16);
}
.loc-item { padding: 9px 12px; border-bottom: 1px solid #f2e8d3; cursor: pointer; }
.loc-item:last-child { border-bottom: none; }
.loc-item:active { background: #fbf3e4; }
.loc-item b { display: block; font-size: 13.5px; color: #3a2a16; font-weight: 600; }
.loc-item span { display: block; font-size: 11.5px; color: #a08e70; margin-top: 2px; }
.loc-empty { padding: 14px 10px; text-align: center; font-size: 12px; color: #a08e70; }

.loc-quick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.loc-quick .btn { flex: 0 0 auto; }
.loc-quick .btn .ico { width: 14px; height: 14px; margin-right: 4px; }
.city-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 1;
  padding-bottom: 3px;
  scrollbar-width: none;
}
.city-strip::-webkit-scrollbar { display: none; }
.city-pill {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid #e0cfae;
  background: #fbf3e4;
  color: #7a5320;
  cursor: pointer;
  white-space: nowrap;
}
.city-pill:active { background: #f0dcae; }

/* 地图画布 + 中心图钉（导航式选点） */
.loc-wrap {
  position: relative;
  margin-top: 10px;
  border: 1px solid #e3d2b0;
  border-radius: 12px;
  overflow: hidden;
  background: #f3ecdc;
}
.loc-map { width: 100%; height: 300px; }
.pick-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -100%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pick-pin svg {
  width: 30px;
  height: 38px;
  filter: drop-shadow(0 4px 5px rgba(80, 50, 20, 0.3));
  animation: pin-drop 0.28s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.pick-pin i {
  width: 9px;
  height: 4px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(70, 45, 20, 0.26);
}
@keyframes pin-drop {
  from { opacity: 0.2; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
/* 搜索结果浮层弹出时先让图钉退场，避免叠在列表下面 */
.loc-wrap.searching .pick-pin { opacity: 0; }
.pick-pin { transition: opacity 0.15s; }

.pick-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.pick-addr { flex: 1; min-width: 0; }
.pick-addr b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #3a2a16;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-addr span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #a08e70;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-ok { flex: 0 0 auto; padding: 9px 20px; }

/* 信封上的已选地址两行显示 */
.pk-main { flex: 1; min-width: 0; }
.pk-main b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #3a2a16;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-main i {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-style: normal;
  color: #a08e70;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-box:not(.filled) .pk-main b { color: #b3a288; font-weight: 400; }

/* 起点 label 上的「用我的位置」 */
.field label .mini-loc {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  background: none;
  padding: 0;
  font-size: 11.5px;
  color: #a8341f;
  cursor: pointer;
}
.field label .mini-loc .ico { width: 13px; height: 13px; }
.field label .mini-loc:disabled { opacity: 0.5; }

/* ---------- 路上经手：拦截者加封时间轴 ---------- */
.append-list { display: flex; flex-direction: column; gap: 10px; }
.append-item {
  position: relative;
  padding: 10px 12px 10px 14px;
  background: #fbf6ea;
  border: 1px solid #ecdcbb;
  border-radius: 10px;
}
.append-item::before {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: rgba(176, 52, 31, 0.5);
}
.append-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.append-hd b { font-size: 12.5px; font-weight: 600; color: #a8341f; }
.append-hd span { font-size: 11px; color: #a08e70; flex: 0 0 auto; }
.append-body {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #3a2a16;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- 个人中心：在途驿马入口 ---------- */
.horse-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.horse-entry:active { background: #fbf3e4; }
.he-ico {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 10px;
  background: #fbf3e4;
  color: #a8341f;
  display: flex; align-items: center; justify-content: center;
}
.he-ico .ico { width: 20px; height: 20px; }
.he-main { flex: 1; min-width: 0; }
.he-title { font-size: 14.5px; font-weight: 600; color: #3a2a16; }
.he-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: #a08e70;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 在途列表里的细进度条 */
.hlist-bar {
  height: 3px;
  margin-top: 7px;
  border-radius: 2px;
  background: #efe2c8;
  overflow: hidden;
}
.hlist-bar i { display: block; height: 100%; border-radius: 2px; background: #b0341f; }

/* ---------- 在途驿马：我自己寄出的信（光圈标记） ---------- */
.list-item.mine {
  position: relative;
  background: linear-gradient(90deg, rgba(232, 178, 58, 0.16), rgba(255, 253, 246, 0) 70%);
}
.list-item.mine::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(#e8b23a, #c98a1b);
  box-shadow: 0 0 8px rgba(232, 178, 58, 0.65);
}
.mine-dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #e8b23a;
  vertical-align: 2px;
  animation: mine-pulse 1.8s ease-out infinite;
}
@keyframes mine-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 178, 58, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(232, 178, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 178, 58, 0); }
}
.mine-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  font-size: 10.5px;
  line-height: 1.6;
  color: #8a6a35;
  background: #fbf3e4;
  border: 1px solid #e8d3a6;
  border-radius: 999px;
  vertical-align: 1px;
}
/* 「我的」条目的进度条呼应金圈 */
.list-item.mine .hlist-bar { background: #f6e7c2; }
.list-item.mine .hlist-bar i { background: linear-gradient(90deg, #e8b23a, #c98a1b); }

/* ---------- 底部导航未读红点 ---------- */
.tab { position: relative; }
.tab-badge {
  position: absolute;
  top: 1px; left: 50%;
  margin-left: 5px;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #b0341f;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(120, 40, 20, 0.35);
}

/* ---------- 落墨：打字时一个字一个字浮出来 ---------- */
.ink-run { display: inline; }
.ink-char {
  display: inline;
  animation: ink-write 0.92s cubic-bezier(0.18, 0.62, 0.28, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes ink-write {
  /* 起手不要完全透明：留住淡淡的墨痕，不会看起来像「字没打出来」 */
  0%   { opacity: 0.14; text-shadow: 0 0 9px rgba(47, 35, 24, 0.5); }
  42%  { opacity: 0.56; text-shadow: 0 0 6px rgba(47, 35, 24, 0.32); }
  72%  { opacity: 0.87; text-shadow: 0 0 3px rgba(47, 35, 24, 0.15); }
  100% { opacity: 1;    text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ink-char { animation: none; }
}

/* 跟着落笔的小毛笔 */
.ink-brush {
  position: absolute;
  left: 0; top: 0;
  width: 15px; height: 40px;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) rotate(-14deg);
  transform-origin: 50% 100%;
  transition: opacity 0.26s ease, left 0.07s linear, top 0.07s linear;
  filter: drop-shadow(0 2px 3px rgba(60, 40, 15, 0.22));
  will-change: opacity, left, top;
}
.ink-brush svg { display: block; width: 100%; height: 100%; }
.ink-brush.on { opacity: 1; animation: brush-dip 0.92s ease-out; }
@keyframes brush-dip {
  0% { transform: translate(-50%, -100%) rotate(-14deg) scale(1.06); }
  35% { transform: translate(-50%, -95%) rotate(-11deg) scale(0.98); }
  100% { transform: translate(-50%, -100%) rotate(-14deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ink-brush.on { animation: none; }
}

/* ---------- 个人资料：头像与审核状态 ---------- */
.pf-ava-lg {
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--vermilion-2), var(--vermilion));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800;
  border: 2px solid #fffdf7;
  box-shadow: 0 2px 6px rgba(120, 60, 30, 0.18);
}
.pf-ava-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-name {
  font-size: 17px; font-weight: 700; color: #3a2a16;
  display: flex; align-items: center; gap: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-badge {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 500;
  padding: 1px 7px;
  border-radius: 999px;
  color: #8a6a35;
  background: #fbf3e4;
  border: 1px solid #e8d3a6;
  line-height: 1.7;
}
.pf-badge.bad { color: #8f2f1c; background: #fdf0ec; border-color: #ecc9be; }

/* 编辑资料弹窗 */
.pf-edit { padding: 2px 0 4px; }
.pf-ava-pick {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer;
}
.pf-ava-pick:active .pf-ava-lg { transform: scale(0.97); }
.pf-ava-pick .pf-ava-lg { width: 78px; height: 78px; font-size: 32px; transition: transform 0.15s; }
.pf-cam {
  font-size: 11.5px; color: var(--vermilion);
  padding: 2px 10px; border-radius: 999px;
  background: #fdf0ec; border: 1px solid #ecc9be;
}
.pf-tip {
  margin: 12px 0 14px;
  font-size: 11.5px;
  line-height: 1.75;
  color: #a08e70;
  background: #fbf6ea;
  border: 1px dashed #e8d8b6;
  border-radius: 9px;
  padding: 9px 11px;
}
.pf-tip b { color: #8f2f1c; font-weight: 600; }

/* ================= 寄出过场：驿马越过云山 =================
   两头都不做硬切：进场是云气散开露出画面，出场是云气漫上来把画面吞掉。
   视频本身缓慢推近（4.6s 从 1.09 收到 1），配合骑使跑向光门，画面始终在动。 */
.send-fx {
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow: hidden;
  background: #f6efe2;
  opacity: 0;
  transition: opacity 0.38s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.send-fx.on { opacity: 1; }

.send-fx-v {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  background: #f6efe2;
  transform: scale(1.09);
  transition: transform 4.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.send-fx.on .send-fx-v { transform: scale(1); }

/* 云气：进场从满到无（散开），出场从无到满（漫上来） */
.send-fx-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    118% 82% at 50% 44%,
    rgba(246, 239, 226, 0) 16%,
    rgba(246, 239, 226, 0.42) 52%,
    rgba(246, 239, 226, 0.86) 78%,
    #f6efe2 96%
  );
  opacity: 1;
  transition: opacity 0.85s cubic-bezier(0.33, 0.8, 0.4, 1) 0.08s;
}
.send-fx.on .send-fx-veil { opacity: 0; }

/* 上下留一点纸边，让画面像透过窗看出去，而不是贴满屏 */
.send-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(246, 239, 226, 0.92) 0%,
    rgba(246, 239, 226, 0) 9%,
    rgba(246, 239, 226, 0) 88%,
    rgba(246, 239, 226, 0.8) 100%
  );
}

.send-fx-tip {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 9%;
  text-align: center;
  font-family: var(--font-kai);
  font-size: 14px;
  letter-spacing: 5px;
  color: #5c4832;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.9);
}
.send-fx.on .send-fx-tip {
  opacity: 1;
  transform: none;
  transition-delay: 0.75s;
}

@media (min-width: 720px) {
  /* 宽屏时和 430px 的应用壳对齐，不做全屏拉伸 */
  .send-fx {
    left: calc(50% - 215px);
    right: auto;
    width: 430px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .send-fx,
  .send-fx-v,
  .send-fx-veil,
  .send-fx-tip { transition: none; }
}


/* 过场退场：画面淡掉 + 轻微后拉，不留白屏空档 */
.send-fx.fade-out {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.6, 1);
  pointer-events: none;
}
.send-fx.fade-out .send-fx-v {
  transform: scale(1.05);
  transition: transform 0.56s cubic-bezier(0.4, 0, 0.6, 1);
}
.send-fx.fade-out .send-fx-tip { opacity: 0; transition: opacity 0.2s ease; }
.send-fx.fade-fast {
  opacity: 0;
  transition: opacity 0.26s ease;
  pointer-events: none;
}
.send-fx.fade-fast .send-fx-tip { opacity: 0; transition: opacity 0.14s ease; }

/* 换页瞬间的骨架：淡出后看到的是「页面正在铺开」，而不是一片空白 */
.fx-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}
.fx-skeleton i {
  display: block;
  height: 13px;
  border-radius: 7px;
  background: rgba(140, 112, 70, 0.1);
  animation: fx-breathe 1.5s ease-in-out infinite;
}
.fx-skeleton i:first-child {
  height: 46vh;
  border-radius: 14px;
  background: rgba(140, 112, 70, 0.07);
}
.fx-skeleton i:nth-child(2) { width: 62%; }
.fx-skeleton i:nth-child(3) { width: 44%; }
@keyframes fx-breathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-skeleton i { animation: none; }
}

/* 本小时剩余发信额度 */
.quota-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #fbf6ea;
  border: 1px dashed #e8d8b6;
  font-size: 12px;
  line-height: 1.65;
  color: #8a7455;
}
.quota-line .ico { width: 14px; height: 14px; flex: 0 0 auto; color: #a8341f; }
.quota-line b { color: #8f2f1c; font-weight: 600; }
.quota-line.done { background: #fdf0ec; border-color: #ecc9be; color: #8f2f1c; }
.quota-line.done .ico { color: #b0341f; }

/* ---------- 官方讨论群（个人中心） ---------- */
.card.me-qr { padding: 14px; }
.qr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.qr-head span {
  font-family: var(--font-kai);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #3a2614;
}
.qr-head b {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #a8452c;
  background: rgba(176, 52, 31, 0.06);
  border: 1px solid rgba(176, 52, 31, 0.28);
}
.qr-body { display: flex; gap: 12px; align-items: center; }
.qr-img {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(196, 158, 110, 0.5);
  box-shadow: 0 4px 10px rgba(95, 62, 28, 0.1);
  cursor: zoom-in;
}
.qr-txt { min-width: 0; }
.qr-txt p { margin: 0 0 6px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.qr-txt span { font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }

/* 放大看码的弹窗 */
.qr-big { text-align: center; padding: 6px 0 4px; }
.qr-big img {
  width: min(260px, 68vw);
  margin: 0 auto;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(196, 158, 110, 0.5);
  box-shadow: 0 12px 30px rgba(95, 62, 28, 0.16);
}
.qr-big-tip {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.5px;
}