/* 囤妆 · 移动优先样式 */
:root{
  --bg:#F6F4F7;
  --card:#FFFFFF;
  --text:#23212B;
  --muted:#8B8899;
  --primary:#E5567C;
  --primary-dark:#CE3F65;
  --primary-soft:#FDEBF1;
  --border:#ECE8F0;
  --green:#2FA36B;
  --green-soft:#E7F6EE;
  --warn:#D9862B;
  --warn-soft:#FDF3E4;
  --purple:#7A5AC4;
  --purple-soft:#EFE9FB;
  --danger:#D9534F;
  --danger-soft:#FCEDEC;
  --radius:14px;
  --shadow:0 1px 3px rgba(35,33,43,.06), 0 6px 18px rgba(35,33,43,.05);
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:720px;margin:0 auto;
  height:52px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
}
.topbar-title{font-size:17px;font-weight:650;letter-spacing:.2px}
.topbar-actions{display:flex;gap:8px;align-items:center}
/* 二级页顶栏的返回箭头（一级页没有，判定见 templating.py）。
   放在操作区最右侧 —— 单手右持时拇指正好够得到，比左上角顺手。 */
.nav-back{
  width:32px;height:32px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#F3F1F5;color:var(--text);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease,transform .15s ease;
}
.nav-back:active{background:#E6E2EB;transform:scale(.94)}
.nav-back svg{
  width:19px;height:19px;fill:none;
  stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- 页面容器 ---------- */
.page{
  max-width:720px;margin:0 auto;
  padding:14px 16px calc(84px + var(--safe-b));
}
/* 未登录的公开页（登录/注册/隐私政策）是整屏居中的，留出页脚那点高度，
   免得页面刚好被撑出滚动条 */
.page-bare{padding:0;min-height:calc(100vh - 84px);display:flex;align-items:center;justify-content:center}

/* ---------- 底部标签栏 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--border);
  padding-bottom:var(--safe-b);
}
.tab{
  flex:1;padding:8px 0 7px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--muted);font-size:11px;
  transition:color .15s;
}
.tab svg{
  width:23px;height:23px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.tab.on{color:var(--primary)}
.tab.on svg{stroke-width:2.1}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;margin-bottom:12px;
}
.card-tight{padding:0;overflow:hidden}
.section-title{
  font-size:13px;font-weight:650;color:var(--muted);
  margin:18px 4px 8px;letter-spacing:.4px;
}
.section-title:first-child{margin-top:4px}

/* ---------- 统计块 ---------- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;
}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:22px;font-weight:700;margin-top:2px;letter-spacing:-.3px}
.stat .v small{font-size:13px;font-weight:600;color:var(--muted);margin-left:1px}
.stat .sub{font-size:11px;color:var(--muted);margin-top:2px}
.v-spend{color:var(--text)}
.v-save{color:var(--green)}
.v-hold{color:var(--primary)}
.v-warn{color:var(--warn)}
/* 统计块里直接放徽标（库存详情的"状态"格）时，别用 22px 的字号撑爆 */
.stat .v .badge{font-size:12.5px;padding:3px 10px}

.hero{
  background:linear-gradient(135deg,#E5567C 0%,#B4559B 100%);
  color:#fff;border-radius:18px;padding:18px;
  box-shadow:0 8px 24px rgba(229,86,124,.25);
  margin-bottom:14px;
}
.hero .label{font-size:12px;opacity:.85}
.hero .amount{font-size:30px;font-weight:750;letter-spacing:-.5px;margin-top:2px}
.hero .foot{font-size:12px;opacity:.9;margin-top:8px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 列表 ---------- */
.list-row{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;
  border-bottom:1px solid var(--border);
}
.list-row:last-child{border-bottom:0}
.list-row .thumb{
  width:42px;height:42px;border-radius:11px;flex:none;
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;
}
.list-row .body{flex:1;min-width:0}
.list-row .t{font-weight:600;font-size:14.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row .s{font-size:12px;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row .r{text-align:right;flex:none;font-size:13px}
.list-row .r .amt{font-weight:650}
.list-row .r .sub{font-size:11px;color:var(--muted)}

/* ---------- 徽标 ---------- */
.badge{
  display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;
  background:var(--primary-soft);color:var(--primary);font-weight:600;
  vertical-align:middle;
}
.badge.gray{background:#F1EFF4;color:var(--muted)}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}

/* ---------- 环境标识（云上多环境部署时才出现） ----------
   颜色约定：生产=绿、测试=橙、开发=紫。只有云部署且 config 判定要标时才渲染。 */
.env-strip{
  position:sticky;top:0;z-index:40;
  text-align:center;
  font-size:12px;font-weight:700;letter-spacing:.3px;
  padding:4px 10px;
  background:var(--warn-soft);color:var(--warn);
  border-bottom:1px solid rgba(217,134,43,.28);
}
.env-strip.test{background:var(--warn-soft);color:var(--warn);border-bottom-color:rgba(217,134,43,.28)}
.env-strip.dev{background:var(--purple-soft);color:var(--purple);border-bottom-color:rgba(122,90,196,.28)}
.env-strip.prod{background:var(--green-soft);color:var(--green);border-bottom-color:rgba(47,163,107,.28)}
.env-badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.3px;
  padding:1px 7px;border-radius:999px;vertical-align:2px;
  background:var(--warn-soft);color:var(--warn);
  border:1px solid rgba(217,134,43,.35);
}
.env-badge.test{background:var(--warn-soft);color:var(--warn);border-color:rgba(217,134,43,.35)}
.env-badge.dev{background:var(--purple-soft);color:var(--purple);border-color:rgba(122,90,196,.32)}
.env-badge.prod{background:var(--green-soft);color:var(--green);border-color:rgba(47,163,107,.32)}

/* ---------- 密码强度提示条（注册 / 改密 / 后台重置） ---------- */
.pw-meter{height:4px;border-radius:2px;background:var(--border);margin-top:6px;overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;background:var(--danger);transition:width .18s ease,background .18s ease}
.pw-meter.w1 i{background:var(--danger)}
.pw-meter.w2 i{background:var(--warn)}
.pw-meter.w3 i,.pw-meter.w4 i{background:var(--green)}
.pw-label{font-size:11px;color:var(--muted);margin-top:4px;min-height:14px}

/* ---------- 表单 ---------- */
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
.field .hint{font-size:11px;color:var(--muted);font-weight:400;margin-left:6px}
.input,select.input,textarea.input{
  width:100%;padding:11px 12px;
  border:1px solid var(--border);border-radius:11px;
  background:#FBFAFB;outline:none;
  transition:border-color .15s, background .15s;
  -webkit-appearance:none;appearance:none;
}
select.input{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8899' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:17px;
  padding-right:32px;
}
.input:focus{border-color:var(--primary);background:#fff}
textarea.input{min-height:74px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.checkline{display:flex;align-items:center;gap:9px;padding:10px 0;font-size:14px}
.checkline input{width:19px;height:19px;accent-color:var(--primary);flex:none}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 18px;border-radius:12px;border:0;cursor:pointer;
  background:var(--primary);color:#fff;font-weight:650;font-size:15px;
  transition:transform .1s, background .15s;
}
.btn:active{transform:scale(.98);background:var(--primary-dark)}
.btn.block{width:100%}
/* 次要按钮：底色和页面背景太接近，给一圈同源的淡粉边，边界才看得出来
   （1.5px 够了，再重就抢主按钮的戏了） */
.btn.ghost{background:#F1EFF4;color:var(--text);border:1.5px solid #F0CBD9}
.btn.ghost:active{background:#E7E3EC;border-color:#E4A6BF}
.btn.danger{background:var(--danger-soft);color:var(--danger)}
.btn.sm{padding:8px 13px;font-size:13px;border-radius:10px}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}
.fab{
  position:fixed;right:18px;bottom:calc(78px + var(--safe-b));z-index:25;
  width:54px;height:54px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:300;line-height:1;
  box-shadow:0 8px 22px rgba(229,86,124,.4);
}

/* ---------- 空状态 ---------- */
.empty{
  text-align:center;padding:46px 20px;color:var(--muted);
}
.empty .ico{font-size:38px;opacity:.45}
.empty .txt{margin-top:10px;font-size:14px}
.empty .btn{margin-top:16px}

/* ---------- 智能粘贴 ---------- */
.card.smart{
  background:linear-gradient(180deg,#FFF8FB 0%,#FFFFFF 100%);
  border:1px dashed #F3CEDC;
  box-shadow:none;
}
.card.smart textarea.input{background:#fff}
.photo-preview{
  position:relative;margin-top:10px;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);background:#F1EFF4;
}
.photo-preview img{display:block;width:100%;max-height:260px;object-fit:contain}
.photo-x{
  position:absolute;top:6px;right:6px;
  width:26px;height:26px;border-radius:50%;border:0;
  background:rgba(0,0,0,.55);color:#fff;font-size:15px;line-height:1;
  cursor:pointer;padding:0;
}

/* ---------- 输入框清空按钮 ---------- */
.input-wrap{position:relative}
.input-wrap > .input{padding-right:40px}
.clear-x{
  position:absolute;top:9px;right:9px;
  width:24px;height:24px;border-radius:50%;border:0;padding:0;
  background:#E9E6EE;color:#6B6878;
  font-size:14px;font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.clear-x:active{background:#D9D3E1;color:var(--text)}
/* 必须显式声明，否则上面的 display:flex 会盖掉 hidden 属性 */
.clear-x[hidden]{display:none}
/* ---------- 共享产品库选择器 ---------- */
.shared-list{margin-top:10px}
.shared-list:empty{display:none}
.shared-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;margin-bottom:6px;
  border:1px solid var(--border);border-radius:11px;
  background:#FBFAFB;text-align:left;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.shared-item:active{background:var(--primary-soft);border-color:#F3CEDC}
.si-main{flex:1;min-width:0}
.si-name{display:block;font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-meta{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-right{flex:none;text-align:right}
.si-price{display:block;font-size:13px;font-weight:650;color:var(--primary)}
.si-used{display:block;font-size:10.5px;color:var(--muted)}

/* 列表 / 详情里的产品缩略图 */
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.product-photo{width:100%;border-radius:12px;margin-bottom:12px;display:block}
img.zoomable{cursor:zoom-in}

/* 图片放大查看 */
.lightbox{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(0,0,0,.92);
}
.lightbox[hidden]{display:none}
.lightbox img{
  max-width:100%;max-height:100%;
  object-fit:contain;border-radius:8px;
}
.lightbox .lb-x{
  position:absolute;top:10px;right:14px;
  width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;
}

/* ---------- 二维码页 ---------- */
.qr-box{display:flex;justify-content:center;align-items:center;padding:6px 0}
.qr-box svg{width:100%;max-width:240px;height:auto;display:block;border-radius:8px}
.qr-url{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:14px;font-weight:650;color:var(--primary);
  margin-top:10px;word-break:break-all;
}

/* ---------- 微信内置浏览器提示条 ---------- */
.wx-tip{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:#FFF6E0;color:#8A5A00;
  font-size:12.5px;line-height:1.5;
  border-bottom:1px solid #F3E1B8;
}
/* 关键：类选择器的 display 会盖过 [hidden] 的 UA 样式，必须显式声明 */
.wx-tip[hidden]{display:none}
.wx-tip .msg{flex:1;min-width:0}
.wx-tip b{font-weight:700}
.wx-tip .more{
  flex:none;color:#8A5A00;font-weight:700;
  text-decoration:underline;text-underline-offset:2px;
}
.wx-tip .x{
  flex:none;border:0;background:transparent;
  color:#8A5A00;font-size:19px;line-height:1;padding:0 2px 2px;
  cursor:pointer;opacity:.65;
}

/* ---------- 登录页 ---------- */
.auth-wrap{width:100%;max-width:400px;padding:24px}
/* 顶部品牌区：左侧图标 + 右侧两行文案，与落地页 .lp-brand 同构，
   所以三页（落地页 / 登录注册 / 扫码）的头部看起来是一套。 */
.auth-brand{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 auto 18px;
}
/* 显式左对齐：扫码页的 .auth-wrap 带内联 text-align:center，
   不压掉的话右侧两行文案会居中，跟登录/落地页不一致。 */
.auth-brand-txt{min-width:0;text-align:left}
/* ⚠️ 这个 .auth-logo 是 <a>（既当图标又当「返回开始页」的入口），
   必须给 display —— <a> 默认 inline，width/height 对它无效，
   里面 512px 的图标就会按原图尺寸渲染、撑满整个容器（曾因此「占满半个屏幕」）。
   换成 <div>/<img> 时同理，别把这一行删掉。
   尺寸与圆角跟落地页一致：46px、圆角 10px（图标本体圆角 20.9%）。 */
.auth-logo{
  display:block;flex:none;
  width:46px;height:46px;border-radius:10px;
  box-shadow:0 5px 13px rgba(229,86,124,.20);
  text-decoration:none;color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease,box-shadow .16s ease;
}
.auth-logo:hover,.auth-logo:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 9px 20px rgba(229,86,124,.30);
}
.auth-logo:active{transform:translateY(0)}
.auth-name{
  display:flex;align-items:center;gap:6px;
  font-size:18px;font-weight:700;letter-spacing:.4px;
}
.auth-tag{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:2px}
.auth-card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:20px}
.auth-switch{text-align:center;margin-top:16px;font-size:13.5px;color:var(--muted)}
.auth-switch a{color:var(--primary);font-weight:600}
.alert{
  background:var(--danger-soft);color:var(--danger);
  border-radius:11px;padding:10px 12px;font-size:13px;margin-bottom:14px;
}
.alert.ok{background:var(--green-soft);color:var(--green)}
.alert.info{background:var(--primary-soft);color:var(--primary)}

/* ---------- 筛选条 ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:7px 14px;border-radius:999px;
  background:#F1EFF4;color:var(--muted);font-size:13px;font-weight:600;
}
.chip.on{background:var(--primary);color:#fff}
/* 同一个 .chip 也用 <button> 渲染（可选项标签），去掉系统默认外观 */
.chip{border:0;font-family:inherit;cursor:pointer;line-height:1.4}
.chip:active{transform:scale(.96)}
/* 可选项标签：换行排布、贴着输入框，和顶部筛选条区分开 */
.chips.pick{flex-wrap:wrap;overflow:visible;padding:0;margin-top:9px}
/* .chips 是 display:flex，会把 hidden 属性压掉 —— 和 .wx-tip / .clear-x 同一个坑 */
.chips[hidden]{display:none}

/* ---------- 分类条形图 ---------- */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
.bar-row .n{width:66px;flex:none;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:9px;background:#F1EFF4;border-radius:99px;overflow:hidden}
.bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#E5567C,#B4559B)}
.bar-row .v{width:60px;text-align:right;flex:none;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- 详情 ---------- */
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--border);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .val{font-weight:600;text-align:right}
.detail-head{display:flex;gap:14px;align-items:flex-start}
.detail-head .thumb{
  width:60px;height:60px;border-radius:16px;flex:none;
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;
}
.detail-head h1{font-size:19px;margin:0 0 4px;font-weight:700}
.detail-head .meta{font-size:12.5px;color:var(--muted)}

/* ---------- 订单商品行（采购表单） ---------- */
.item-row{padding:12px 14px}
.item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.item-idx{
  font-size:12px;font-weight:700;color:var(--primary);
  background:var(--primary-soft);border-radius:999px;padding:1px 9px;
}
.row-x{
  width:26px;height:26px;border:0;border-radius:50%;padding:0;
  background:#F1EFF4;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
}
.row-x:active{background:var(--danger-soft);color:var(--danger)}
.item-row .field{margin-bottom:8px}
.spec-text{margin-top:4px}
.gift-line{padding:11px 0 0;font-size:13px}
.alloc-summary .kv{font-size:13.5px;padding:7px 0}

/* ---------- 订单卡片（采购列表） ---------- */
.order-card{padding:0;overflow:hidden}
.order-head{border-bottom:0}
/* 订单卡底部的操作条（去收货 / 改订单）—— .order-card 没有内边距，这里自己补 */
.order-card > .btn-row{padding:10px 14px 14px;border-top:1px solid var(--border)}
.oi-qty .badge{margin-left:2px}
.oi-list{border-top:1px solid var(--border);padding:8px 14px 12px}
.oi{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px}
.oi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oi-qty{flex:none;color:var(--muted);font-size:12px}
.oi-amt{
  flex:none;text-align:right;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.oi-total{
  border-top:1px dashed var(--border);
  margin-top:4px;padding-top:7px;font-size:12px;
}
.oi-total .oi-amt{font-weight:500}

/* ---------- 库存处理件数 ---------- */
.qty-line{display:flex;align-items:center;gap:8px;padding:8px 0 0;font-size:12px}
.qty-input{width:66px;flex:none;padding:7px 9px;text-align:center}

/* ---------- 可点进详情的行 ---------- */
/* 列表行做成 <a> 时给一点点击反馈，右侧加个箭头提示"能进去" */
a.list-row:active{background:#FAF8FB}
.chev{color:var(--muted);font-size:17px;line-height:1;margin-left:4px}
.oi-thumb{
  width:22px;height:22px;border-radius:6px;flex:none;overflow:hidden;
  background:var(--primary-soft);display:inline-block;
}
.oi-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* 详情页里"这一个"的定位条 */
.batch-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- 收快递页 ---------- */
/* 一行下面挂"这行已经生成的库存"，用虚线跟输入区隔开 */
.recv-batches{margin-top:10px;border-top:1px dashed var(--border);padding-top:2px}
.recv-batches .list-row{padding:9px 0;border-bottom:0}
.recv-batches .list-row + .list-row{border-top:1px solid var(--border)}

.searchbar{position:relative;margin-bottom:6px}
.searchbar .input{padding-left:36px}
.searchbar svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:2;
}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.mt8{margin-top:8px}
.mt16{margin-top:16px}
.center{text-align:center}
.nowrap{white-space:nowrap}

/* ---------- 环形图（「我的」页 · 库存构成） ---------- */
.donut-wrap{display:flex;align-items:center;gap:14px}
.donut{width:126px;height:126px;flex:none;display:block}
.donut circle{fill:none;stroke-width:12}
.donut .ring-bg{stroke:var(--primary)}
.donut .ring-b{stroke:var(--warn)}
.donut text{text-anchor:middle;font-family:inherit}
.donut .donut-num{font-size:23px;font-weight:750;fill:var(--text);letter-spacing:-.5px}
.donut .donut-sub{font-size:8.5px;fill:var(--muted)}
.legend{flex:1;min-width:0}
.legend .lg{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0}
.legend .dot{width:10px;height:10px;border-radius:3px;flex:none}
.legend .lg .n{margin-left:auto;font-weight:650;font-variant-numeric:tabular-nums}

/* 当月那根柱子加个底色，一眼看出"这个月" */
.bar-row.bar-now .n{color:var(--primary);font-weight:700}
.bar-row.bar-now .v{color:var(--primary)}

/* ---------- 折叠设置项（<details> 当按钮用） ---------- */
details.acc{border-bottom:1px solid var(--border)}
details.acc:last-child{border-bottom:0}
details.acc > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px;font-size:14.5px;font-weight:650;
  -webkit-tap-highlight-color:transparent;
}
/* 去掉 Safari / Chrome 自带的三角 */
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary::marker{content:""}
details.acc > summary:active{background:#FAF8FB}
.acc-sub{display:block;margin-top:2px;font-weight:400}
.chev2{
  flex:none;color:var(--muted);font-size:19px;line-height:1;
  transition:transform .16s;
}
details.acc[open] > summary .chev2{transform:rotate(90deg)}
.acc-body{padding:0 14px 14px}
.acc-body .field:last-of-type{margin-bottom:12px}
/* 展开时给一点点出现动效，避免"点了没反应"的错觉 */
details.acc[open] > .acc-body{animation:accIn .16s ease-out}
@keyframes accIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* ---------- 流程图 / 示意图（帮助页） ---------- */
/* 用 viewBox 画成可缩放的 SVG，宽度跟着卡片走，手机上不用横向滚动 */
.flow{width:100%;height:auto;display:block}
.flow text{font-family:inherit}
.flow .node{fill:#FFFFFF;stroke:var(--border);stroke-width:1.4}
.flow .node-hi{fill:var(--primary-soft);stroke:#F3CEDC}
.flow .node-ok{fill:var(--green-soft);stroke:#CFEBDD}
.flow .note{fill:#FDF3E4}
.flow .t{fill:var(--text);font-size:12px;font-weight:650}
.flow .t-hi{fill:var(--primary);font-size:12px;font-weight:700}
.flow .t-ok{fill:var(--green);font-size:12px;font-weight:700}
.flow .s{fill:var(--muted);font-size:9.5px}
.flow .s-b{fill:var(--text);font-size:10px;font-weight:650}
.flow .nt{fill:#A96A15;font-size:9.5px;font-weight:700}
.flow .lbl{fill:var(--muted);font-size:9px;font-weight:700}
.flow .arw{stroke:#C9C5D4;stroke-width:1.4;fill:none}

/* 帮助页里"标题在上、说明在下"的条目：右侧长文字挤在 kv 里很难读 */
.dl{padding:10px 0;border-bottom:1px solid var(--border)}
.dl:last-child{border-bottom:0}
.dl .dt{font-size:12.5px;color:var(--primary);font-weight:700;margin-bottom:3px}
.dl .dd{font-size:13.5px;line-height:1.7;color:var(--text)}
.dl .dd b{font-weight:650}

/* 帮助页的编号步骤 */
ol.steps{margin:8px 0 0;padding-left:22px;font-size:13.5px;line-height:1.8;color:var(--text)}
ol.steps li{margin-bottom:5px}
ol.steps li:last-child{margin-bottom:0}
ol.steps a{color:var(--primary);font-weight:650}

/* ---------- 余量百分比（库存 / 使用） ---------- */
/* 一条细进度条 + 右侧数字。余量少的时候整条变暖色，一眼看出快用完了 */
.pct{display:flex;align-items:center;gap:8px;margin-top:8px}
.pct-bar{flex:1;min-width:0;height:7px;background:#F1EFF4;border-radius:99px;overflow:hidden}
.pct-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#E5567C,#B4559B);transition:width .2s}
.pct.low .pct-fill{background:linear-gradient(90deg,#E8A13B,#E5567C)}
.pct.empty .pct-fill{background:#C9C5D4}
.pct-num{
  flex:none;min-width:36px;text-align:right;
  font-size:11.5px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.pct.low .pct-num{color:var(--warn)}
.pct.empty .pct-num{color:var(--muted)}

/* 使用中的标签行：状态 + 余量 + 快捷打卡按钮排在一行 */
.use-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.use-head .spacer{margin-left:auto}

/* 报表页的分段标题（比 section-title 轻一点，页里会用好几次） */
.rpt-sub{font-size:12.5px;font-weight:700;color:var(--muted);margin:14px 0 8px}
.rpt-sub:first-child{margin-top:0}
.rpt-note{font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:6px}

/* ---------- 页脚（隐私政策入口 / ICP 备案号） ----------
   备案号与邮箱都是可选项：config 里没配就不渲染对应那行。 */
.site-foot{
  text-align:center;
  padding:18px 16px 20px;
  color:var(--muted);font-size:11.5px;line-height:1.9;
}
.site-foot a{color:var(--muted)}
.site-foot a:active{color:var(--primary)}
.foot-links .sep{margin:0 5px;opacity:.45}
.foot-beian{margin-top:2px}
.foot-beian a{
  text-decoration:underline;text-underline-offset:2px;opacity:.92;
}
.foot-copy{opacity:.6;margin-top:2px}

/* ---------- 公开落地页（未登录时的首页） ---------- */
/* 陌生人第一次进来先看到这个：是什么 → 能干什么 → 免费开始。
   视觉沿用 App 自己的组件（hero / card / list-row / pct），不另造一套。 */
.lp{max-width:520px;margin:0 auto;padding:30px 20px 14px}
.lp-brand{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:26px}
.lp-logo{
  width:46px;height:46px;border-radius:10px;flex:none;
  box-shadow:0 5px 13px rgba(229,86,124,.20);
}
.lp-logo img,.auth-logo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* 与 .auth-name 同构：站名后面可能跟一个环境角标，flex 让两者光学居中对齐 */
.lp-name{
  display:flex;align-items:center;gap:6px;
  font-size:19px;font-weight:700;letter-spacing:.5px;
}
.lp-tag{font-size:11.5px;color:var(--muted);margin-top:1px}
.lp-title{
  font-size:27px;line-height:1.32;font-weight:750;letter-spacing:-.4px;
  margin:0 0 12px;text-align:center;
}
.lp-sub{font-size:14px;color:var(--muted);line-height:1.75;text-align:center;margin:0 0 24px}
.lp-cta{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.lp-points{display:flex;flex-direction:column;gap:10px}
.lp-point{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;
}
.lp-ico{
  width:36px;height:36px;border-radius:11px;flex:none;
  background:var(--primary-soft);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.lp-pbody{flex:1;min-width:0}
.lp-pt{font-size:14.5px;font-weight:650;margin-bottom:2px}
.lp-pd{font-size:12.5px;color:var(--muted);line-height:1.65}
.lp-preview{margin-bottom:4px}
.lp-note{
  text-align:center;font-size:11.5px;color:var(--muted);
  margin:22px 0 14px;
}

/* ---------- 文档型页面（隐私政策 / 使用帮助） ----------
   这两个是长文页，挂 .page-doc 容器类，原因有二：
   1) 不能沿用未登录默认的 .page-bare —— 它把 <main> 设成 flex 居中容器，
      而这俩页面里是多个 .card 兄弟节点，会被当成 flex item 横向挤压；
      登录后又走普通 .page，于是同一页在两种登录状态下长得完全不一样。
   2) 桌面端需要更适合长文阅读的字号、行高与留白。 */

/* 820px 以上按"文档站"排版 */
@media (min-width:820px){
  .page-doc{padding:28px 22px calc(92px + var(--safe-b))}
  .page-doc .card{padding:22px 26px;margin-bottom:16px}
  .page-doc .card h1{font-size:23px !important;margin:0 0 8px !important}
  .page-doc .section-title{font-size:14px;margin:28px 6px 10px;letter-spacing:.5px}
  .page-doc .section-title:first-child{margin-top:6px}
  .page-doc .dl{padding:13px 0}
  .page-doc .dl .dt{font-size:13px}
  .page-doc .dl .dd{font-size:14.5px;line-height:1.8}
  /* 名词/问答那种"左标签右解释"的行：桌面上改成左对齐两列，别一个贴左一个贴右 */
  .page-doc .kv{justify-content:flex-start;padding:11px 0;font-size:14.5px}
  .page-doc .kv .k{flex:0 0 150px}
  .page-doc .kv .val{text-align:left;flex:1}
  .page-doc ol.steps{font-size:14.5px;line-height:1.9}
  .page-doc .tiny,
  .page-doc .rpt-note{font-size:12.5px;line-height:1.8}
  /* 流程/示意图是 320 宽的 viewBox，卡片变宽后会等比撑得极高，限宽并居中 */
  .page-doc .flow{max-width:460px;margin:0 auto}
  .page-doc .btn.ghost{width:auto;padding-left:28px;padding-right:28px}
}

/* ---------- 错误页（400/403/404/500/502/503）---------- */
/* 由 main.py 的全局异常处理器渲染。整屏居中（page-bare），
   用户看到的是"出了什么事 + 怎么重试"，而不是一串 JSON。 */
.err{text-align:center;padding:6px 2px}
.err-emoji{font-size:38px;line-height:1;margin-bottom:6px}
.err-badge{
  font-size:42px;font-weight:800;letter-spacing:-1.5px;line-height:1.05;
  color:#E5567C;   /* 兜底：不支持渐变文字的内核就显示纯色，别糊成一块色块 */
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .err-badge{
    background:linear-gradient(135deg,#E5567C,#B4559B);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.err-title{font-size:18.5px;font-weight:700;margin:8px 0 8px}
.err-desc{
  font-size:13.5px;color:var(--muted);line-height:1.8;
  margin:0 auto 22px;max-width:300px;
}
.err-actions{display:flex;flex-direction:column;gap:10px;max-width:280px;margin:0 auto}
.err-foot{margin-top:16px;line-height:1.8}
.err-foot a{color:var(--primary);font-weight:600}

/* ---------- 「联系我们」信息弹窗 ---------- */
/* 点页脚/隐私政策/错误页里的邮箱链接，先弹这张卡，不直接调起邮件应用。
   移动端从底部升起，桌面端居中成卡片。 */
.sheet{position:fixed;inset:0;z-index:130;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-mask{position:absolute;inset:0;background:rgba(32,24,36,.44);animation:sh-fade .18s ease-out}
.sheet-panel{
  position:relative;width:100%;max-width:430px;max-height:90vh;overflow-y:auto;
  background:var(--card);border-radius:20px 20px 0 0;
  padding:20px 20px calc(18px + var(--safe-b));
  box-shadow:0 -8px 30px rgba(46,28,52,.18);
  animation:sh-up .24s cubic-bezier(.22,.85,.32,1);
  -webkit-overflow-scrolling:touch;
}
.sheet-x{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border:0;border-radius:50%;
  background:#F3F1F5;color:var(--muted);
  font-size:19px;line-height:1;cursor:pointer;
}
.sheet-x:active{background:#E9E6EE}
.sheet-ico{
  width:42px;height:42px;border-radius:13px;margin:2px auto 10px;
  background:var(--primary-soft);
  display:flex;align-items:center;justify-content:center;
}
.sheet-ico svg{
  width:22px;height:22px;fill:none;stroke:var(--primary);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.sheet-title{font-size:17.5px;font-weight:700;margin:0 0 8px;text-align:center}
.sheet-desc{font-size:13.5px;color:var(--muted);line-height:1.75;margin:0 0 10px}
.sheet-list{
  margin:0 0 14px;padding:0;list-style:none;
  font-size:13px;color:var(--text);line-height:1.7;
}
.sheet-list li{position:relative;padding-left:16px}
.sheet-list li::before{
  content:"";position:absolute;left:2px;top:8.5px;
  width:5px;height:5px;border-radius:50%;background:#E4A6BF;
}
.mail-addr{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:14px;font-weight:650;color:var(--primary);
  background:#FCF3F7;border:1px solid #F4DCE6;border-radius:11px;
  padding:10px 12px;margin:0 0 14px;text-align:center;
  word-break:break-all;
  -webkit-user-select:all;user-select:all;
}
.sheet-actions{display:flex;flex-direction:column;gap:9px}
.sheet-tip{margin:12px 0 0;text-align:center;line-height:1.7}
.btn.ghost.done{background:#F6EAF0;border-color:#E4A6BF;color:var(--primary)}
@media (min-width:820px){
  .sheet{align-items:center}
  .sheet-panel{
    max-width:410px;border-radius:20px;
    animation:sh-pop .22s cubic-bezier(.22,.85,.32,1);
  }
}
@keyframes sh-fade{from{opacity:0}to{opacity:1}}
@keyframes sh-up{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes sh-pop{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}