/* ============================================================================
 * 售后订单系统 V2 —— 浅色轻奢主题（HIFIMAN）
 * 高端 Hi-Fi 品牌调性：简约轻奢、低饱和哑光金、白色卡片、清晰文字层级
 * ============================================================================ */

/* 鸿蒙字体（HarmonyOS Sans SC，本地托管，全量中文） */
@font-face {
  font-family: "HarmonyOS Sans SC";
  /* 字体 URL 带版本号：配合服务器对 /assets/fonts/ 的长缓存，字体只下载一次；
     若更换字体文件，只需递增版本号（如 ?v=2）即可让客户端重新拉取 */
  src: url("../fonts/HarmonyOS_Sans_SC_Medium.woff2?v=1") format("woff2");
  font-weight: 400 700;   /* 400-700 字重统一使用 Medium 字形 */
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold: #C8A668;                      /* 哑光金（低饱和） */
  --gold-soft: rgba(200, 166, 104, 0.15); /* 金色微光 */
  --card: rgba(255, 255, 255, 0.92);    /* 白色卡片 */
  --input-bg: rgba(0, 0, 0, 0.045);
  --text: #1a1a20;                      /* 主标题文字 */
  --text-sub: #6b6b76;                  /* 辅助说明文字 */
  --line: rgba(0, 0, 0, 0.08);
  --danger: #e5484d;
  --radius: 18px;                       /* 大圆角 */
  --radius-sm: 10px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

html, body {
  /* 浅灰白底 + 顶部金色氛围光，保持轻奢质感。
     background-attachment:fixed 在 iOS Safari 底部安全区/视口边缘可能绘制不全
     露出默认白底，故以渐变终点色作底色兜底（须在简写之后声明） */
  background: radial-gradient(1300px 720px at 50% -10%, #fffdf7 0%, #f5f6f8 70%, #eef0f3 100%) fixed;
  background-color: #eef0f3;
  color: var(--text);
  font-family: "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;   /* 去掉移动端点击高亮闪烁 */
  /* 禁用浏览器原生橡皮筋/overscroll 回弹（iOS bounce、Android glow） */
  overscroll-behavior-y: none;
}

/* 页面容器：固定最大宽度，左右留边距，居中展示。
   相对定位 + z-index 建立层叠上下文：页面主体盖住转场白层
   （内容滑出时露出底下的白底 + logo），滑入时再提升 z-index 盖住加载白层 */
.app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;   /* 移动端动态视口高度，地址栏收起/展开时不跳动 */
  /* 顶部留出刘海/挖孔安全区（配合 viewport-fit=cover 生效） */
  padding: env(safe-area-inset-top) 22px 100px;
}

/* ---------- 顶部导航 ---------- */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 12px;
}
.app-header h1 { font-size: 18px; font-weight: 600; font-family: "HarmonyOS Sans SC", "SimHei", "黑体", "Microsoft YaHei", sans-serif; }
.app-header .back {
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}

/* ---------- 首页顶部头部：品牌行（文档流，不依赖 fixed） ----------
   用 relative 而非 fixed：品牌区作为 flex 流首个元素正常占位，
   下方 hero-space 固定间距隔开，任何内核下都不会与按钮重叠；
   转场时随 .app 整体滑出（无需 fixed/absolute 切换）。
   header 内用 flex 居中 brand：不依赖 absolute + margin:auto + max-content
   （旧内核下定位祖先解析异常时 brand 会退回到相对整页视口定位，
   表现为"品牌落到屏幕正中、明显偏下"），flex 居中在任何内核都稳定 */
.app-header--home {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 50;
  height: 58px;
  background: transparent;   /* 透明：内容不再滚动到 header 下方，无需吸顶背景 */
}
/* 品牌区（HIFIMAN）：header 内 flex 垂直居中，整体下移 60px */
.app-header--home .brand {
  display: inline-flex;
  align-items: center;
  transform: translateY(60px);
}
/* 占位区：品牌行与菜单之间的固定间距（品牌行已在文档流占 58px，
   此处仅保留少量间距；flex-shrink:0 防止被 flex 压缩，
   保证菜单始终在品牌行之下不与 HIFIMAN 重叠） */
.hero-space {
  height: 18px;
  flex-shrink: 0;
}
/* 首页锁定视口高度：内容一屏展示、禁止上下滚动，按钮位置固定。
   flex 纵向布局：顶部品牌区 + 中部菜单（垂直居中）+ 底部（无页脚文案） */
.app--home-fixed {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: env(safe-area-inset-top) 22px 0;
}
.app--home-fixed main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;   /* flex 项允许收缩，空间不足时菜单不外溢视口 */
  overflow: hidden;   /* 裁掉菜单在空间不足时的溢出部分，避免压住底部内容 */
}
/* 菜单用 auto 外边距实现垂直居中：空间充足时居中；
   空间不足时 auto 外边距解析为 0、菜单从顶部排布，
   始终不与顶部 HIFIMAN（品牌行）重叠。
   translateY(20px)：按钮组相对居中位置整体下移 20px */
.app--home-fixed main .menu {
  margin: auto 0;
  transform: translateY(20px);
}

/* 首页品牌区：居左对齐、高度收窄 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-name {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text);
  font-family: "HarmonyOS Sans SC", "SimHei", "黑体", "Microsoft YaHei", sans-serif;
}
.brand-name .en {
  font-family: "Times New Roman", "Times", serif;
  color: var(--gold);
  font-weight: 600;
}

/* ---------- 功能入口卡片 ---------- */
.menu { display: flex; flex-direction: column; gap: 22px; }
.menu .menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  /* 注意：不用 backdrop-filter —— 按钮上浮/跟随/展开动画期间每帧重采样背景，
     是移动端动画卡顿的主要来源；半透明纯色背景在浅色底上观感接近 */
  border: 1px solid rgba(200, 166, 104, 0.35);   /* 常显金边 */
  border-radius: var(--radius);
  padding: 20px 18px;
  text-decoration: none;
  color: var(--text);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  will-change: transform;
}
/* hover：卡片轻微上浮 + 金色微光 + 金边提亮（无投影） */
.menu .menu-item:hover {
  transform: translateY(-3px);
  background: var(--gold-soft);
  border-color: rgba(200, 166, 104, 0.60);
}
/* 点击态：微弱缩放反馈 */
.menu .menu-item:active { transform: scale(0.97); }
.menu .mi-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(200, 166, 104, 0.12);
  color: var(--gold);
  transition: transform .35s cubic-bezier(.22, .8, .26, 1), background .3s ease;
}
.menu .mi-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.menu .mi-title { font-size: 20px; font-weight: 500; color: var(--text); }
.menu .mi-desc {
  font-size: 14px;
  color: var(--text-sub);
  min-height: 3.2em;   /* 固定两行说明高度（14px×1.6×2）：三个按钮说明文字长度不同，保证卡片严格等高 */
}
.menu .mi-arrow {
  flex: 0 0 auto;
  color: var(--text-sub);
  font-size: 22px;
  transition: color .25s, transform .25s;
}
.menu .menu-item:hover .mi-arrow { color: var(--gold); transform: translateX(3px); }
/* hover：图标轻微放大 + 微旋 + 底色加深，增强灵动感 */
.menu .menu-item:hover .mi-icon {
  transform: scale(1.08) rotate(-4deg);
  background: rgba(200, 166, 104, 0.22);
}

/* ---------- 卡片（子页面通用） ---------- */
.card {
  background: var(--card);
  /* 性能优化：文档流中的卡片不启用 backdrop-filter。
     卡片随页面滚动时，磨砂背景每帧重采样背景是移动端滚动掉帧的主要来源；
     半透明白色在浅色底上观感已足够接近模糊效果。fixed 元素（操作栏/弹窗/toast）
     不随内容滚动，仍保留 backdrop-filter */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
/* ---------- 步骤条 ---------- */
.steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 16px;
}
.step {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-sub);
}
.step .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-sub);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background .3s ease, color .3s ease, transform .3s cubic-bezier(.22, .8, .26, 1);
}
.step.active { color: var(--gold); font-weight: 600; }
.step.active .num { background: var(--gold); color: #1a1405; transform: scale(1.1); }
.step-line {
  flex: 1;
  height: 2px;
  background: var(--line);
}
.step-line.done { background: var(--gold); }

/* ---------- 表单 ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 6px;
}
.field label .req { color: var(--danger); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* iOS Safari 对字号 <16px 的输入框聚焦时会自动放大页面，统一用 16px 避免 */
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--input-bg);
  outline: none;
  transition: border-color .2s, background .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: rgba(200, 166, 104, 0.06);
}
/* 下拉列表选项浅色适配 */
.field select option { background: #ffffff; color: var(--text); }
.field textarea { resize: vertical; }

/* ---------- 后台搜索栏 ---------- */
.search-bar input {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--input-bg);
  outline: none;
  transition: border-color .2s, background .2s;
}
.search-bar input:focus {
  border-color: var(--gold);
  background: rgba(200, 166, 104, 0.06);
}
.search-bar .btn { white-space: nowrap; }

/* 快递单号加粗，突出唯一凭证 */
#expressNo { font-weight: 600; }
.field .row { display: flex; gap: 10px; }
.field .row-2 > * { flex: 1; min-width: 0; }
.field .row-3 > * { flex: 1; min-width: 0; }
.field .hint { font-size: 12px; color: var(--text-sub); margin-top: 4px; opacity: .7; }
/* 选填项分隔提示：必填项之后统一放置选填项 */
.opt-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
}
.opt-divider::before,
.opt-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.field img.preview {
  margin-top: 8px;
  max-width: 120px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.field .img-del {
  display: block;
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid rgba(221, 51, 51, 0.5);
  border-radius: 8px;
  color: #d33;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.field .img-del:active { background: rgba(221, 51, 51, 0.1); }
.upload-zone {
  margin-top: 8px;
  padding: 22px 12px;
  border: 1px dashed var(--gold);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-size: 13px;
  text-align: center;
  background: var(--gold-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ---------- 按钮 ---------- */
.actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 10px 22px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
  z-index: 100;
}
.btn {
  flex: 1;
  padding: 12px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: transform .15s, background .2s, border-color .2s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gold); border-color: var(--gold); color: #1a1405; font-weight: 600; }
.btn-primary:active { background: #d8b87a; }
.btn-outline { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn-outline:active { background: rgba(200, 166, 104, 0.12); }
.btn-danger { color: var(--danger); border-color: rgba(255, 107, 107, 0.5); background: transparent; }

/* 大号按钮：加高、加大字号，适合作为页面主操作 */
.btn-lg {
  padding: 15px 0;
  font-size: 17px;
  font-weight: 600;
  border-radius: 12px;
}

/* 按钮宽度自适应内容，不撑满整行 */
.btn-auto {
  flex: none;
  width: auto;
  display: inline-flex;
  padding-left: 32px;
  padding-right: 32px;
}

/* 全局 hidden 属性兜底：.btn 等类规则设置的 display 会覆盖浏览器默认的
   [hidden] 隐藏行为（author 样式优先级高于 UA 样式），强制统一隐藏 */
[hidden] { display: none !important; }

/* ---------- 提示条 ---------- */
/* 浅色轻奢风：白色卡片 + 金色描边 + 深色文字，与全站卡片观感一致
   （旧版沿用深色主题的黑色胶囊已弃用） */
.toast {
  position: fixed;
  left: 50%; top: calc(40px + env(safe-area-inset-top));
  transform: translateX(-50%) translateY(-8px);   /* 初始：上浮 8px，配合 show 下滑入 */
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  border: 1px solid rgba(200, 166, 104, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .32s cubic-bezier(.22, .8, .26, 1);
  white-space: nowrap;
  max-width: calc(100vw - 44px);
  overflow: hidden;
  text-overflow: ellipsis;   /* 超长提示文本省略，避免撑出屏幕 */
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 历史记录 ---------- */
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 12px;
}
.history-head h2 { font-size: 16px; color: var(--text); }
.history-head .clear { font-size: 13px; color: var(--gold); cursor: pointer; background: none; border: none; }
.group-title {
  font-size: 13px;
  color: var(--text-sub);
  margin: 14px 0 8px;
}
.record {
  background: var(--card);
  /* 同 .card：滚动列表不启用 backdrop-filter，避免滚动掉帧 */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 14px;
  margin-bottom: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.record[type="button"] { display: block; width: 100%; text-align: left; font: inherit; color: inherit; }
.record:active { transform: scale(0.98); }
/* 桌面 hover：卡片轻微上浮 + 金边提亮（触屏无 hover 的设备由下方媒体查询清除） */
@media (hover: hover) {
  .record:hover {
    transform: translateY(-2px);
    border-color: rgba(200, 166, 104, 0.45);
    background: #ffffff;
  }
}
.record .r-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.record .r-top .r-no { font-weight: 600; font-size: 14px; }
.record .r-top .r-edit {
  margin-left: auto;
  font-size: 12px;
  color: var(--gold);
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid rgba(200, 166, 104, 0.5);
  border-radius: 4px;
  cursor: pointer;
}
.record .r-top .r-edit + .r-edit { margin-left: 8px; }
.record .r-top .r-track { color: #2d8a4e; border-color: rgba(45, 138, 78, 0.5); }
.record .r-top .r-del { color: #d33; border-color: rgba(221, 51, 51, 0.5); }
.record .r-top .r-del:active { background: rgba(221, 51, 51, 0.12); }
.record .r-top .r-edit:active { background: rgba(200, 166, 104, 0.12); }
.record .r-line { font-size: 13px; color: var(--text-sub); margin-top: 6px; word-break: break-all; }
.record .r-warn { color: var(--danger); font-weight: 600; }
.record .r-send { color: #8a6d2f; }
.record .r-time { font-size: 12px; color: var(--text-sub); margin-top: 4px; opacity: .7; }
.record .continue { color: var(--gold); font-size: 13px; margin-top: 6px; }

/* ---------- 标签 ---------- */
.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  margin-right: 4px;
  vertical-align: middle;
}

/* 键盘导航焦点可见（无障碍）：非鼠标点击时给链接/按钮加金色描边 */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- 空状态 ---------- */
.empty {
  text-align: center;
  color: var(--text-sub);
  padding: 40px 0;
  font-size: 14px;
}

/* ---------- 确认弹窗 ---------- */
.modal-mask {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* 显式定位：兼容旧内核（不依赖 inset 简写） */
  background: rgba(0, 0, 0, 0.60);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: maskIn .22s ease;   /* 遮罩淡入（display:none → flex 时自动播放） */
}
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }
.modal-mask.show { display: flex; }
.modal {
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 18px;
  width: 82%;
  max-width: 320px;
  max-height: 92vh;   /* 长内容弹窗不超视口，内部滚动（见 .modal-detail .m-form） */
  display: flex;
  flex-direction: column;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow);
  animation: modalIn .3s cubic-bezier(.22, .8, .26, 1);   /* 弹窗缩放 + 上滑入场 */
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.92) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal .m-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.modal .m-text { font-size: 13px; color: var(--text-sub); margin-bottom: 16px; }
.modal .m-btns { display: flex; gap: 10px; }
.modal .m-btns .btn { flex: 1; padding: 9px 0; font-size: 14px; }
.modal .m-opts { text-align: left; margin: 0 6px 16px; }
.modal .m-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.modal .m-opt:last-child { margin-bottom: 0; }
.modal .m-opt input { width: 16px; height: 16px; accent-color: var(--gold); }
.modal .m-opt.disabled { opacity: 0.45; pointer-events: none; }
.modal-detail .m-form { text-align: left; margin: 2px 0 16px; max-height: 56vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* 详情弹窗滚动区细滚动条（移动端默认隐藏、桌面可见） */
.modal-detail .m-form::-webkit-scrollbar { width: 4px; }
.modal-detail .m-form::-webkit-scrollbar-thumb { background: rgba(200, 166, 104, 0.45); border-radius: 2px; }
.modal-detail .m-field { margin-bottom: 11px; }
.modal-detail .m-text { word-break: break-all; }   /* 长单号/地址换行，避免横向溢出 */
.modal-detail .m-img { max-width: 120px; display: block; margin-top: 10px; border-radius: 8px; border: 1px solid var(--line); }
.modal-detail .m-label { font-size: 12px; color: var(--text-sub); margin-bottom: 4px; }
.modal-detail .m-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.045);
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.modal-detail .m-input:focus { border-color: var(--gold); }
.modal-detail .m-input.m-area { min-height: 58px; resize: vertical; font-family: inherit; line-height: 1.5; }
.modal-detail .m-input.err { border-color: var(--danger); }

/* ---------- 提交成功：寄修地址结果弹窗 ---------- */
.modal-result { width: 88%; max-width: 400px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-result .m-result-body { text-align: left; word-break: break-all; }
.modal-result .result-no { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.repair-addr {
  background: #fffaf0;
  border: 1px solid rgba(200, 166, 104, 0.45);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.repair-addr .ra-title { font-size: 14px; font-weight: 600; color: #8a6d2f; margin-bottom: 6px; }
.repair-addr .ra-line { font-size: 13px; color: var(--text); margin-top: 4px; line-height: 1.55; }
.repair-addr .ra-line b { font-weight: 600; margin-right: 2px; }
.ra-note { font-size: 12px; color: #b0571b; margin-top: 6px; }
.repair-addr-miss { background: rgba(192, 57, 43, 0.06); border-color: rgba(192, 57, 43, 0.35); color: var(--danger); font-size: 13px; }

/* ---------- 页面转场过渡 ---------- */
/* 转场期间锁定滚动 */
.locked { overflow: hidden; }
/* 转场动画期间禁用 backdrop-filter：卡片/操作栏/弹窗的磨砂背景在整页滑动时
   每帧重采样背景是移动端掉帧的主要来源，动画期间降级为纯色，结束即恢复 */
.animating .card,
.animating .record,
.animating .actions,
.animating .modal,
.animating .modal-mask {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 全屏/卡片转场层：固定占满视口，纯白铺底。
   z-index 低于 .app：页面内容盖在它上面，内容滑出时白底随之露出 */
.trans-layer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  background: #ffffff;
  pointer-events: none;
  will-change: transform, opacity;
  /* 兜底：JS 转场若因异常/时序竞争中断导致本层残留（如 bfcache 恢复后滑入
     未执行），延迟自动淡出，避免永久白屏。正常转场在跳转时文档销毁，
     本兜底不会干扰正常转场 */
  animation: layerFallback .4s ease 3s forwards;
}
@keyframes layerFallback { to { opacity: 0; visibility: hidden; } }
/* 进入动画：内容先隐藏，转场结束后浮现 */
.enter { opacity: 0 !important; }
.enter.show { opacity: 1 !important; transition: opacity .45s ease; }
/* 子页面入场：从右侧滑入 + 淡入（与首页向左滑出方向衔接）。
   z-index 临时提升以盖住加载白层，右侧露出白底实现"从白色上滑入"。
   will-change 提示浏览器提前为滑动建合成层，减少动画掉帧 */
.app.slide-in-right {
  z-index: 3;
  opacity: 0;
  transform: translateX(100%);
  will-change: transform, opacity;
}
.app.slide-in-right.show {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .38s ease, transform .42s cubic-bezier(.22, .8, .26, 1);
}
/* 首页入场：从左侧滑入 + 淡入（返回首页时），同样临时提升盖住白层 */
.app.slide-in-left {
  z-index: 3;
  opacity: 0;
  transform: translateX(-100%);
  will-change: transform, opacity;
}
.app.slide-in-left.show {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .38s ease, transform .42s cubic-bezier(.22, .8, .26, 1);
}
/* 首页菜单入场：容器快速淡入，卡片逐张上浮浮现（stagger，灵动但不喧闹） */
.menu.enter.show {
  opacity: 1;
  transition: opacity .2s ease;
}
.menu.enter.show .menu-item {
  animation: itemIn .55s cubic-bezier(.22, .8, .26, 1) backwards;
}
.menu.enter.show .menu-item:nth-child(1) { animation-delay: .08s; }
.menu.enter.show .menu-item:nth-child(2) { animation-delay: .18s; }
.menu.enter.show .menu-item:nth-child(3) { animation-delay: .28s; }
@keyframes itemIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 移动端适配 ---------- */
/* 触屏设备无 hover：避免点击后 hover 样式粘滞 */
@media (hover: none) {
  .menu .menu-item:hover,
  .record:hover {
    transform: none;
    background: var(--card);
    border-color: rgba(200, 166, 104, 0.35);   /* 触屏保留常显金边 */
  }
  .menu .menu-item:hover .mi-arrow { color: var(--text-sub); transform: none; }
}

/* 窄屏（小手机）：收紧间距与字号，表单双列改纵向。
   仅作用于子页面容器：首页为固定一屏布局（.app--home-fixed），
   不受本规则影响，否则窄屏时首页 padding 被覆盖、按钮空间被压缩 */
@media (max-width: 380px) {
  .app:not(.app--home-fixed) { padding: 0 16px 100px; }
  .menu .menu-item { padding: 16px 14px; gap: 12px; }
  .menu .mi-title { font-size: 18px; }
  .menu .mi-desc { font-size: 13px; }
  .field .row { flex-direction: column; gap: 0; }
  .actions { padding-left: 16px; padding-right: 16px; }
  .btn { font-size: 14px; }
}

/* 矮屏（地址栏展开/老款手机等视口高度不足时）：压缩顶部品牌行与间距及按钮尺寸，
   保证三个功能按钮完整显示、不被裁切或与顶部品牌重叠 */
@media (max-height: 620px) {
  .app-header--home { height: 44px; }
  .app-header--home .brand { transform: translateY(56px); }
  .hero-space { height: 12px; }
  .menu .menu-item { padding: 13px 16px; gap: 12px; }
  .menu .mi-icon { width: 40px; height: 40px; }
  .menu .mi-title { font-size: 17px; }
  .menu .mi-desc { font-size: 12px; min-height: 3.2em; }
  .menu { gap: 12px; }
  .app--home-fixed main .menu { transform: translateY(8px); }
}

/* ============================================================================
 * V2.1 动效增强：加载状态 / 列表入场 / 面板切换 / 降级策略
 * ============================================================================ */

/* ---------- 按钮加载状态（提交中） ----------
   按钮添加 .loading 后禁用点击、降低不透明度，并在文字后显示旋转指示器 */
.btn.loading { pointer-events: none; opacity: .85; }
.btn.loading::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 步骤面板切换（表单步骤 1/2 切换时淡入上滑） ---------- */
.panel-in { animation: panelIn .32s cubic-bezier(.22, .8, .26, 1); }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 列表条目入场（历史记录 / 查询结果 / 后台订单） ----------
   JS 渲染完成后给容器下条目统一加 .anim-in，nth 延迟由 JS 逐条设置，
   实现轻量 stagger 浮现（backwards 让延迟期间保持起始态） */
.record.anim-in { animation: recordIn .4s cubic-bezier(.22, .8, .26, 1) backwards; }
@keyframes recordIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 首页品牌淡入（仅首帧播放一次，与菜单 stagger 呼应） ---------- */
@keyframes brandFade { from { opacity: 0; } to { opacity: 1; } }
.app-header--home .brand { animation: brandFade .6s ease .05s backwards; }

/* ---------- 系统开启"减弱动态效果"：全局降级 ----------
   所有动画/过渡压缩到近似瞬时，滚动即时响应，尊重用户无障碍偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}

/* ---------- 小屏适配（窄于 360px 的机型，进一步收紧间距与字号） ---------- */
@media (max-width: 360px) {
  .app:not(.app--home-fixed) { padding-left: 14px; padding-right: 14px; }
  .card { padding: 15px 13px; }
  .field { margin-bottom: 12px; }
  .modal { width: 90%; padding: 18px 16px; }
  .menu .menu-item { padding: 14px 12px; gap: 10px; }
  .menu .mi-desc { font-size: 12px; }
}

/* 极矮屏（老机型 / 分屏等高度严重不足时）：进一步压缩首页，确保一屏完整展示不滚动 */
@media (max-height: 520px) {
  .app-header--home { height: 38px; }
  .app-header--home .brand { transform: translateY(54px); }
  .brand-name { font-size: 20px; }
  .hero-space { height: 6px; }
  .menu { gap: 8px; }
  .menu .menu-item { padding: 9px 14px; }
  .menu .mi-icon { width: 34px; height: 34px; border-radius: 10px; }
  .menu .mi-title { font-size: 15px; }
  .menu .mi-desc { font-size: 11px; min-height: 3.2em; }
  .app--home-fixed main .menu { transform: translateY(0); }
}