/* ============================================================
   《囤物》样式表
   视觉全部对齐设计稿：暖白底 / 白卡片 / 鼠尾草绿主色 / 陶土点缀
   圆角：卡片 12 · 输入框 10 · 按钮 12 · 色彩块 10
   ============================================================ */

:root{
  --bg:#F8F5F0;
  --card:#FFFFFF;
  --line:#E8E4DD;
  --line-soft:#EFE9E5;
  --line-sage:#DCE5D4;

  --ink:#1F1E1B;
  --ink2:#5C5A55;
  --ink3:#8A8680;
  --ink4:#A8A49C;
  --ink5:#BDB9B1;   /* 最弱：说明性 / 辅助性文字专用 */

  --sage:#87A878;
  --sage-ink:#6E8A62;
  --sage-tint:#EDF2E8;
  --clay:#B77E5A;
  --clay-tint:#F7EDE6;
  --danger:#D08068;
  --danger-tint:#F9E9E4;
  --tint:#F3F0EB;
  --tint-line:#DCD8D0;
  --soft:#FAFAF7;

  --r-card:12px;
  --r-input:10px;
  --r-hero:16px;

  /* 标题使用系统衬线字体，正文使用系统无衬线字体 —— 不额外加载字体包 */
  --serif:'Songti SC','STSong','Noto Serif SC','Source Han Serif SC','SimSun',serif;
  --sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  /* 数字 / 单位使用几何无衬线，贴近设计稿的 Outfit */
  --num:'Outfit','SF Pro Display',ui-rounded,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  /* ---------- 安全区（全平台统一） ----------
     --sat-top: 顶部安全区。优先取系统真实值（刘海 / 挖孔 / 状态栏 / 分屏），
                再兜一个最小的通用呼吸空间：即使系统没有上报安全区，
                标题也绝不会贴边、被状态栏压住或被裁切。
     --sat-b / --sat-l / --sat-r: 底部手势条、横屏左右刘海。 */
  --sat-top:12px;
  --sat-b:0px;
  --sat-l:0px;
  --sat-r:0px;
}
/* 系统支持安全区变量时，用真实值覆盖兜底值（仍保留 12px 下限） */
@supports (padding-top:env(safe-area-inset-top)){
  :root{
    --sat-top:max(env(safe-area-inset-top),12px);
    --sat-b:env(safe-area-inset-bottom);
    --sat-l:env(safe-area-inset-left);
    --sat-r:env(safe-area-inset-right);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
/* 横屏 / 大屏下不放大字体，保持固定比例 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{
  background:#EFEBE4;color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  display:flex;justify-content:center;
  overscroll-behavior:none;
  touch-action:manipulation;
}
/* 手机上外壳铺满整屏：机身底色与页面同色，避免顶部 / 底部露出灰边或被状态栏区域抢色 */
@media (max-width:480px){ body{background:var(--bg)} }
button{font-family:inherit;cursor:pointer;border:0;background:none;padding:0;color:inherit;font-size:inherit;
  touch-action:manipulation}
/* 输入控件字号必须 ≥16px：iOS Safari 对 <16px 的输入框聚焦时会自动放大整页 */
input,select,textarea{font-family:inherit;font-size:16px}
img{max-width:100%}

/* ---------- 外壳（390 设计基准 · 适配刘海屏与手势条） ---------- */
#shell{
  position:relative;width:100%;max-width:430px;height:100vh;height:100dvh;
  background:var(--bg);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 0 44px rgba(31,30,27,.08);
  /* 顶部安全区：外壳自身的底色一直铺到屏幕最上沿，页面内容从安全区之下开始，
     所以状态栏 / 刘海 / 挖孔永远不会压住任何文字或按钮 */
  padding-top:var(--sat-top);
  padding-left:var(--sat-l);
  padding-right:var(--sat-r);
}
.screen{flex:1;display:flex;flex-direction:column;min-height:0}
/* #app 必须自己也是一节「会被压住的伸缩柱」：否则页面内容会把它整个撑开，
   .scroll 的 overflow-y 就接不到固定高度，长列表滚不动（真机与无头测试都受影响） */
#app{flex:1;min-height:0;display:flex;flex-direction:column}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:var(--sat-b)}
.pad{padding:20px;
  padding-left:calc(20px + var(--sat-l));
  padding-right:calc(20px + var(--sat-r))}
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g14{gap:14px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap}

/* ---------- 页头 / 导航 ---------- */
.hdr{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.htitle{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.15;letter-spacing:-.2px}
.hsub{font-size:10px;color:var(--ink4);margin-top:2px;letter-spacing:.2px}
/* 顶部导航：实心底色 + 独立层级，滚动内容永远不会穿透到标题上 */
.nav{display:flex;align-items:center;gap:12px;height:52px;flex:0 0 auto;
  position:relative;z-index:5;background:var(--bg);
  padding-left:calc(20px + var(--sat-l));
  padding-right:calc(20px + var(--sat-r))}
.nav-act{font-size:13px;color:var(--ink3);padding:6px 0;flex:0 0 auto}
.nav-title{font-family:var(--serif);font-size:20px;font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.round{width:38px;height:38px;border-radius:19px;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;flex:0 0 auto;color:var(--ink2)}
.round .i{display:block}
.round.back{width:36px;height:36px;border-radius:18px}
.round.solid{background:var(--sage);border-color:var(--sage);color:#fff}
.round.tiny{width:32px;height:32px;border-radius:16px}
.i{display:block}

/* ---------- 通用卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card)}
.sec-label{font-size:11px;font-weight:500;color:var(--ink4);letter-spacing:.2px}

/* ---------- 首页 · 储物箱 ---------- */
.overview{width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:16px;display:flex;align-items:center;gap:14px}
.overview .ov-num{font-size:24px;font-weight:600;font-family:var(--serif);letter-spacing:-.3px}
.overview .ov-sub{font-size:10px;color:var(--ink4);margin-top:2px}
.overview .ov-tag{font-size:10px;color:var(--sage-ink);background:var(--sage-tint);
  height:24px;border-radius:12px;padding:0 10px;display:inline-flex;align-items:center}

.tpl-row{display:flex;gap:10px}
.tpl{flex:1;height:44px;border-radius:var(--r-card);background:var(--card);border:1px solid var(--line-sage);
  color:var(--sage-ink);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px}
.tpl.clay{color:var(--clay)}

.bin{display:flex;align-items:center;gap:14px;padding:15px 16px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card)}
.bin:active{background:#FCFBF9}
.bin .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.bin .grow{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.bin .nm{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.3}
.bin .meta{font-size:11px;color:var(--ink4);margin-top:4px}
.bin .dots{margin-left:auto;color:var(--ink4);padding:6px 2px}

.tip{background:var(--tint);border-radius:var(--r-card);padding:14px;display:flex;gap:10px;align-items:flex-start;
  font-size:11px;color:var(--ink4);line-height:1.6}
.tip .i{flex:0 0 auto;margin-top:1px}

/* ---------- 搜索 ---------- */
.search{display:flex;align-items:center;gap:8px;height:44px;border-radius:var(--r-card);
  background:var(--card);border:1px solid var(--line);padding:0 12px}
.search input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:16px;color:var(--ink)}
.search input::placeholder{color:var(--ink5);font-size:13px}

/* ---------- 筛选行 ---------- */
.filters{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:0;
  scrollbar-width:none;-ms-overflow-style:none}
.filters::-webkit-scrollbar{display:none}
.chip{height:28px;border-radius:14px;padding:0 10px;font-size:12px;display:inline-flex;align-items:center;gap:4px;
  background:var(--card);border:1px solid var(--line);color:var(--ink3);white-space:nowrap;flex:0 0 auto}
.chip.on{background:var(--sage);border-color:var(--sage);color:#fff;font-weight:500}
.chip.ghost{background:var(--tint);border-color:var(--tint-line);color:var(--ink3)}
.chip.lg{height:30px;border-radius:15px;padding:0 12px}

.cdot{width:24px;height:24px;border-radius:12px;flex:0 0 auto;position:relative;border:1px solid transparent}
.cdot.light{border-color:var(--line)}
.cdot.on{box-shadow:inset 0 0 0 1.5px var(--bg)}
.cdot.on::after{content:'';position:absolute;left:7px;top:8px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.cdot.on.dark-check::after{border-color:var(--ink)}

/* ---------- 瀑布流物品卡（列宽随屏幕自适应） ---------- */
.masonry{column-count:2;column-gap:12px}
.mcard{break-inside:avoid;margin-bottom:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden}
.mcard .thumb{width:100%;display:block;background:#EDEAE3;min-height:96px;object-fit:cover}
.mcard .body{padding:10px;display:flex;flex-direction:column;gap:6px}
.mcard .nm{font-size:14px;font-weight:500;line-height:1.35;word-break:break-word}
.mcard .line{display:flex;align-items:center;justify-content:space-between;gap:6px}
.mcard .qty{font-size:13px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:4px;
  font-family:var(--num);border-radius:8px;padding:1px 4px}
.mcard .qty:active{background:var(--sage-tint)}
.mtags{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mtag{font-size:10px;color:var(--ink4);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.mdot{width:10px;height:10px;border-radius:5px;flex:0 0 auto;border:1px solid transparent}
.mdot.light{border-color:var(--line)}

/* ---------- 悬浮 + ---------- */
.fab{position:absolute;right:calc(20px + var(--sat-r));
  bottom:calc(20px + var(--sat-b));
  width:56px;height:56px;border-radius:28px;border:0;background:var(--sage);color:#fff;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(135,168,120,.34);z-index:20}
.fab:active{transform:scale(.96)}

/* ---------- 表单 ---------- */
.label{font-size:11px;font-weight:500;color:var(--ink4)}
.input{height:44px;border-radius:var(--r-input);border:1px solid var(--line);background:var(--card);
  padding:0 14px;font-size:16px;color:var(--ink);display:flex;align-items:center;gap:8px;width:100%}
.input input,.input select{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:16px;color:var(--ink)}
.input input::placeholder{color:var(--ink5);font-size:13px}
.input textarea{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:16px;color:var(--ink);
  resize:none;padding:10px 0;line-height:1.5;align-self:center}
.input textarea::placeholder{color:var(--ink5);font-size:13px}
.input:has(textarea){height:auto;min-height:44px;padding:0 14px}
.field{display:flex;flex-direction:column;gap:6px}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:6px}
.stepbtn{width:30px;height:30px;border:0;background:transparent;display:grid;place-items:center;
  color:var(--ink2);flex:0 0 auto;border-radius:8px}
.stepbtn:active{background:var(--tint)}
.stepper .val{border:0;outline:0;background:transparent;text-align:center;width:100%;min-width:0;
  font-size:16px;font-weight:500;color:var(--ink)}
/* 库存数量与单位：两格等宽（对齐设计稿） */
.qtyunit{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.qtyunit>*{min-width:0}

/* ---------- 单位滚轮（内嵌在单位框内，单次只显示 1 个单位） ---------- */
.unitbox{position:relative;width:100%;height:44px;border-radius:var(--r-input);border:1px solid var(--line);
  background:var(--card);overflow:hidden;outline:none;
  transition:background .18s ease,border-color .18s ease}
.unitbox.active{background:var(--sage-tint);border-color:var(--sage)}
.unitlist{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.unitlist::-webkit-scrollbar{display:none}
.unititem{height:44px;display:flex;align-items:center;justify-content:flex-start;padding:0 30px 0 14px;
  scroll-snap-align:center;font-size:17px;font-weight:500;color:var(--ink);
  line-height:1;white-space:nowrap;cursor:pointer}
.unititem.custom{font-size:12px;font-weight:400;color:var(--ink5)}
.unitind{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  display:flex;pointer-events:none}
.unitinput{position:absolute;inset:0;width:100%;height:100%;border:0;outline:0;background:transparent;
  text-align:left;font-size:17px;font-weight:500;color:var(--ink);padding:0 30px 0 14px}
.unitinput::placeholder{font-size:12px;font-weight:400;color:var(--ink5)}

.photo{width:96px;height:96px;border-radius:12px;background:#EDEAE3;position:relative;overflow:hidden;
  display:grid;place-items:center;flex:0 0 auto}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.empty{background:#EDEAE3;border:1px solid transparent;color:var(--ink2);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.photo.empty.loc{border-color:var(--tint-line)}
.photo .ph{width:80px;font-size:10px;color:var(--ink4);text-align:center;padding:0;line-height:1.55}
.photo .rm{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:10px;border:0;
  background:rgba(31,30,27,.5);color:#fff;font-size:12px;line-height:1;display:grid;place-items:center}
.photo .badge{position:absolute;left:0;bottom:0;right:0;font-size:10px;color:#fff;
  background:rgba(31,30,27,.45);padding:2px 4px;text-align:center}

/* 色彩标签网格 */
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:42px;height:42px;border-radius:var(--r-input);border:1px solid transparent;position:relative;padding:0}
.sw.light{border-color:var(--line)}
.sw.on{outline:none}
.sw.on::after{content:'';position:absolute;left:12px;top:13px;width:16px;height:9px;
  border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg)}
.sw.on.dark-check::after{border-color:#1F1E1B}

/* 二选一（是否手作 等） */
.seg{height:34px;border-radius:var(--r-input);background:#EFECE5;padding:3px;display:flex;gap:2px;width:132px;flex:0 0 auto}
.seg button{flex:1;border:0;border-radius:8px;background:transparent;font-size:12px;color:var(--ink2)}
.seg button.on{background:var(--sage);color:#fff;font-weight:500}

/* ---------- 按钮 ---------- */
.btn{height:52px;border-radius:var(--r-card);border:0;display:flex;align-items:center;justify-content:center;
  gap:6px;font-size:16px;font-weight:500}
.btn.primary{background:var(--sage);color:#fff}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.btn.danger{background:var(--danger-tint);color:var(--danger)}
.btn.tint{background:var(--tint);color:var(--ink2)}
.btn.sm{height:40px;border-radius:var(--r-input);font-size:13px}
.btn.sm.primary{background:var(--sage);color:#fff}
.btn:active{opacity:.88}
.btn[disabled],.btn:disabled{opacity:.55;pointer-events:none}
.btnwrap{flex:0 0 auto;
  padding:12px calc(20px + var(--sat-r)) calc(16px + var(--sat-b))
          calc(20px + var(--sat-l))}

/* 校验失败高亮 / 图片压缩中 */
.invalid{box-shadow:0 0 0 3px rgba(200,60,60,.16);border-color:#C83C3C !important}
.photo.busy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--tint)}
.spin{width:16px;height:16px;border:2px solid rgba(135,168,120,.3);border-top-color:var(--sage);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 全屏等待 ----------
   更新时也要让用户看得见「在做事」，而不是像卡死。
   整层铺满 + 吃掉所有点击（pointer-events），避免这段真空期被乱点。 */
#busy{position:fixed;inset:0;z-index:70;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:var(--bg);    /* 与应用同色：不闪白、看不到中间态的裸页面 */
  padding-bottom:calc(24px + var(--sat-b));padding-top:calc(24px + var(--sat-top))}
#busy.open{display:flex;animation:fade .2s ease}
#busy .card{width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center}
#busy .halo{position:relative;width:58px;height:58px;display:grid;place-items:center}
/* 大环 + 内点：与表单里的小 spinner 同一套语言，只是放大一档 */
#busy .halo::before{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--sage-tint);border-top-color:var(--sage);animation:spin .9s linear infinite}
#busy .halo::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--sage);opacity:.5}
#busy .bt{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink)}
#busy .bd{font-size:12px;line-height:1.65;color:var(--ink4);margin:0}
#busy .bar{position:relative;width:150px;height:3px;border-radius:2px;background:var(--tint);overflow:hidden}
/* 进度条走完停在 ~92% 就不再装样子：后面那一下交给刷新，不骗用户 */
#busy .bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--sage) 0%,var(--sage-ink) 100%);
  transition:width .5s ease}
/* 完成态：大环停转，换成一个对勾 */
#busy .halo.done::before{display:none}
#busy .halo.done::after{display:none}
#busy .halo.done{background:var(--sage-tint);border-radius:50%}
#busy.long .bd::after{content:'（这次稍慢一点，请不要关闭页面）';display:block;margin-top:4px;
  color:var(--clay);animation:fade .3s ease}

/* ---------- 详情 ---------- */
.hero{position:relative;background:#EDEAE3;height:clamp(170px,42dvh,270px);flex:0 0 auto;overflow:hidden}
.hero img{width:100%;height:100%;display:block;object-fit:cover}
.hero .float{position:absolute;border:0;background:rgba(255,255,255,.94);border-radius:18px;
  width:36px;height:36px;display:grid;place-items:center;color:var(--ink)}
.hero .float.back{left:calc(20px + var(--sat-l));top:14px}
.hero .float.zoom{right:calc(20px + var(--sat-r));bottom:16px}
.hero .ph{display:grid;place-items:center;height:100%;color:var(--ink5);font-size:11px}

.dcard{margin:-24px 14px 0;position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-hero);padding:16px;display:flex;flex-direction:column;gap:10px}
.dcard .dt-name{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.3;word-break:break-word}
.dcard .dt-price{font-family:var(--num);font-size:16px;font-weight:500;color:var(--clay);
  white-space:nowrap;padding-top:4px}
.tag{height:26px;border-radius:13px;padding:0 10px;font-size:11px;display:inline-flex;align-items:center;gap:5px;
  background:var(--tint);color:var(--ink2);white-space:nowrap}
.tag.sage{background:var(--sage-tint);color:var(--sage-ink);font-weight:500}
.tag.on-color{color:#fff}
.divider{height:1px;background:var(--line-soft);border:0;margin:0}
/* 更新说明列表：克制的圆点，不用花哨符号 */
.notes{margin:0;padding:0 0 0 2px;list-style:none;display:flex;flex-direction:column;gap:6px}
.notes li{position:relative;padding-left:14px;font-size:13px;color:var(--ink2);line-height:1.55}
.notes li::before{content:'';position:absolute;left:2px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--sage)}
/* 版本更新里的动作按钮：撑满整行、居中，不缩在左边 */
.upd-act{margin-top:10px}
.upd-act .btn{width:100%}
/* 折叠问答：平时收起，不抢视线 */
.faq{border-top:1px solid var(--line-soft);padding-top:12px}
.faq summary{list-style:none;cursor:pointer;font-size:12px;color:var(--ink3);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:14px;color:var(--ink5)}
.faq[open] summary::after{content:'–'}
.faq .desc{margin-top:8px}
.infocard{background:var(--soft);border-radius:var(--r-input);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.kv .k{color:var(--ink4);font-size:11px}
.kv .v{font-weight:500;text-align:right}
.kv .v.sage{color:var(--sage-ink)}

/* ---------- 更多信息（每个物品自己 DIY，不做全局字段管理） ---------- */
.info-list{background:var(--soft);border-radius:var(--r-input);padding:2px 14px}
.info-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  text-align:left;padding:11px 0;background:none;border:0;font-size:13px}
.info-row + .info-row{border-top:1px solid #E7E4DE}
.info-row .k{color:var(--ink4);font-size:11px;flex:0 0 auto;max-width:46%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info-row .v{font-weight:500;text-align:right;word-break:break-word}
.info-row:active .v{color:var(--sage-ink)}
.addinfo{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;
  height:30px;border-radius:15px;padding:0 12px;background:var(--sage-tint);
  border:1px solid var(--line-sage);color:var(--sage-ink);font-size:12px;font-weight:500}
.addinfo:active{background:#E4EDDC}
.loc-thumb{width:96px;height:96px;border-radius:var(--r-input);overflow:hidden;background:#EDEAE3;flex:0 0 auto}
.loc-thumb img{width:100%;height:100%;object-fit:cover}
img.missing{background:#EDEAE3;min-height:80px}

/* ---------- 购买记录 ---------- */
.plist{display:flex;flex-direction:column;gap:10px}
.prow{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--soft);
  border-radius:var(--r-input);font-size:13px}
.prow .pdate{font-size:10px;color:var(--ink5)}
.prow .pamt{font-weight:500}

/* ---------- 空状态 ---------- */
.empty{padding:44px 24px;text-align:center;color:var(--ink4);font-size:12px;line-height:1.7}
.empty .big{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:6px}

/* ---------- 底部弹层 ---------- */
#sheet-root{position:fixed;inset:0;z-index:60;display:none}
#sheet-root.open{display:block}
.backdrop{position:absolute;inset:0;background:rgba(31,30,27,.34);animation:fade .18s ease}
.sheet{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;
  background:var(--card);border-radius:20px 20px 0 0;
  padding:16px calc(20px + var(--sat-r)) calc(20px + var(--sat-b))
          calc(20px + var(--sat-l));
  max-height:88dvh;
  /* 再高一档也要给顶部安全区让路：弹层永远不会顶到状态栏 / 刘海 */
  max-height:min(88dvh,calc(100dvh - var(--sat-top) - 16px));
  overflow-y:auto;animation:up .22s cubic-bezier(.22,.8,.3,1);
  display:flex;flex-direction:column;gap:16px}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:#E3DED5;margin:0 auto;position:relative;
  touch-action:none}   /* v13：横条不让浏览器当滚动抢走，下拉收起才跟手 */
.sheet .grab::before{content:"";position:absolute;left:-70px;right:-70px;top:-20px;bottom:-26px}  /* 隐形热区，更好抓 */
.sheet h3{margin:0;font-family:var(--serif);font-size:18px;font-weight:600}
.sheet .desc{font-size:11px;color:var(--ink4);line-height:1.6;margin:0}
.sheet .acts{display:flex;gap:12px}
.tabs{display:flex;gap:8px}
.tabs button{flex:1;height:38px;border-radius:var(--r-input);border:1px solid var(--line);background:var(--card);
  font-size:13px;color:var(--ink2)}
.tabs button.on{background:var(--sage-tint);border-color:var(--sage);color:var(--sage-ink);font-weight:500}

/* ---------- 轻提示 ---------- */
#toast{position:fixed;left:50%;bottom:calc(104px + var(--sat-b));
  transform:translateX(-50%) translateY(6px);
  background:rgba(31,30,27,.92);color:#fff;font-size:13px;padding:10px 16px;border-radius:10px;
  max-width:min(320px,calc(100vw - 48px));text-align:center;opacity:0;transition:opacity .18s,transform .18s;
  pointer-events:none;z-index:80;line-height:1.5}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 大图查看 ---------- */
#zoom{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(18,17,15,.95);padding:16px}
#zoom.open{display:flex}
#zoom img{max-width:100%;max-height:100%;object-fit:contain}

/* ---------- 新建收纳筐：图标选择 ---------- */
.icongrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.iconcell{height:60px;border-radius:var(--r-input);border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;color:var(--ink2);transition:background .15s ease,border-color .15s ease}
.iconcell.on{background:var(--sage);border-color:var(--sage);color:#fff}
.icongrid.sm .iconcell{height:50px}

/* ---------- 翻一翻 ---------- */
.flip-entry{display:inline-flex;align-items:center;gap:6px;height:32px;border-radius:16px;padding:0 12px;
  align-self:flex-start;
  background:var(--sage-tint);border:1px solid var(--line-sage);color:var(--sage-ink);
  font-size:12px;font-weight:500;flex:0 0 auto}
.flip-entry:active{background:#E4EDDC}
.flip-card{border-radius:var(--r-card);overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.flip-card .ph{display:grid;place-items:center;height:200px;background:#EDEAE3;color:var(--ink5);font-size:11px}
.flip-card img{width:100%;display:block;max-height:300px;object-fit:cover}
.flip-name{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.3;word-break:break-word}
.flip-qty{font-family:var(--num);font-size:13px;font-weight:500;color:var(--ink)}

/* ---------- 翻一翻：卡片式横向滑动（一次一张） ---------- */
.flip-count{font-family:var(--num);font-size:11px;color:var(--ink4);white-space:nowrap}
.flip-deck{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:2px 8%;
  /* 触摸滑动归 deck 自己管，左缘返回手势不插手（弹层开着时本来就不触发） */
  touch-action:pan-x}
.flip-deck::-webkit-scrollbar{display:none}
.flip-deck .flip-card{flex:0 0 84%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;flex-direction:column;background:var(--card)}
.flip-deck .flip-card img{height:230px;object-fit:cover}
.flip-deck .flip-card .ph{height:230px}
.flip-meta{padding:12px 14px;display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--line-soft)}

/* ---------- 详情页：库存独立块 ---------- */
.stock-blk{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  margin-top:12px;padding:12px 14px;border-radius:var(--r-input);
  background:var(--sage-tint);border:1px solid var(--line-sage);cursor:pointer}
.stock-blk .sk{font-size:11px;color:var(--sage-ink);align-self:center}
.stock-blk .sv{font-family:var(--num);font-size:24px;font-weight:600;color:var(--ink);line-height:1}
.stock-blk .su{font-size:12px;font-weight:500;color:var(--ink3)}
.stock-blk .se{margin-left:auto;font-size:12px;color:var(--sage-ink);white-space:nowrap;align-self:center}
.stock-blk:active{background:#E4EDDC}

/* ---------- 表单：选填标记 ---------- */
.field .label .opt{color:var(--ink5);font-weight:400;margin-left:4px}
.field .desc{font-size:11px;color:var(--ink4);line-height:1.6;margin:4px 0 0}

/* ---------- 左缘返回手势的视觉提示 ---------- */
#edge-hint{position:fixed;left:0;top:50%;z-index:70;pointer-events:none;
  width:34px;height:64px;margin-top:-32px;border-radius:0 18px 18px 0;
  display:grid;place-items:center;
  background:rgba(31,30,27,.82);color:#fff;font-size:22px;line-height:1;
  opacity:0;transform:translateX(-34px);transition:opacity .12s ease,transform .12s ease}

/* ---------- 弹层：下拉收起时的退出过渡 ---------- */
#sheet-root.closing .backdrop{opacity:0;transition:opacity .16s ease}

/* ---------- 横屏（手机）：页面保持竖版布局不变 ----------
   不再弹「请竖屏」提示：430px 竖版栏依旧居中（body 本来就是 flex 居中），
   两侧露出底色；全屏浮层（弹层 / 等待层 / 大图）也一并收进栏内，观感与竖屏完全一致。
   平板横屏（高度 > 500px）不受影响。 */
@media (orientation:landscape) and (max-height:500px){
  #sheet-root,#busy,#zoom{
    left:50%;right:auto;top:0;bottom:0;width:min(430px,100vw);
    transform:translateX(-50%)}
  #edge-hint{left:calc(50% - min(215px,50%))}
}

/* ---------- 花费 ---------- */
.bigamt{font-family:var(--num);font-size:38px;font-weight:600;letter-spacing:-.5px;line-height:1.1}
.spend-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.spend-row .k{font-size:13px;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spend-row .v{font-family:var(--num);font-weight:500;white-space:nowrap}
.spend-row.total .k{color:var(--ink);font-weight:500}
.spend-row.total .v{font-size:17px}

@keyframes up{from{transform:translateX(-50%) translateY(24px)}to{transform:translateX(-50%) translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}