/* SKG 泰国店员端 · 亮色移动端 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --brand: #0E9F8F; --brand-dark: #0B7F73; --brand-bg: #E5F5F3;
  --bg: #F4F6F6; --card: #fff; --ink: #17322F; --muted: #6B7F7C; --line: #E3EAE9;
  --amber: #B87A00; --amber-bg: #FFF4DC; --green: #1F9254; --green-bg: #E3F5EB;
  --red: #C2402A; --red-bg: #FDEAE5; --blue: #2563EB; --blue-bg: #E8EFFD;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  /* Liquid Glass（风格库 13 号 iOS26 配方 · 23 号亮底参数 · 彩影品牌化） */
  --glass: rgba(255,255,255,.30);
  --glass-hi: rgba(255,255,255,.48);
  --glass-lo: rgba(255,255,255,.18);
  --gline: rgba(255,255,255,.78);
  --shine: inset 2px 2px 1px 0 rgba(255,255,255,.85), inset -1px -1px 1px 1px rgba(255,255,255,.4);
  --gshadow: 0 8px 20px -8px rgba(11,127,115,.20);
  --gshadow-hi: 0 16px 32px -12px rgba(11,127,115,.30);
}
@font-face { /* SKG 字标专用（Poppins 600 仅 S/K/G 子集，840B 自托管） */
  font-family: 'SKG Wordmark';
  src: url('/fonts/skg-wordmark.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
.wordmark { font-family: 'SKG Wordmark', -apple-system, Roboto, sans-serif; font-weight: 600; letter-spacing: 4px; }
html, body { height: 100%; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", Roboto, "Segoe UI", sans-serif;
  background:
    radial-gradient(720px 520px at 88% -8%, rgba(14,159,143,.42), transparent 60%),
    radial-gradient(600px 460px at -14% 24%, rgba(96,205,255,.34), transparent 60%),
    radial-gradient(640px 520px at 84% 66%, rgba(255,158,64,.27), transparent 62%),
    radial-gradient(540px 440px at 6% 96%, rgba(186,140,255,.25), transparent 62%),
    linear-gradient(180deg, #EDF5F3, #F1F4F3);
  background-attachment: fixed; color: var(--ink); font-size: 16px; }
.hidden { display: none !important; }
button { font: inherit; border: 0; cursor: pointer; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

/* 登录 */
.login { min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0E9F8F 0%, #0B7F73 55%, #085E55 100%); padding: 24px; }
.login-card { background: #fff; border-radius: 20px; padding: 32px 24px; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.login-logo { font-size: 34px; font-weight: 800; letter-spacing: 4px; color: var(--brand); text-align: center; }
.login-sub { text-align: center; color: var(--muted); margin-top: -10px; }
.login-card input[type=text], .login-card input:not([type]), .login-card input[type=password], .login-card input[type=tel] {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 16px; width: 100%; }
.login-card input:focus { outline: none; border-color: var(--brand); }
.login-card input[type=email] { border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 16px; width: 100%; }
.login-card select { border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 16px; width: 100%; background: #fff; }
#lg-apply { display: flex; flex-direction: column; gap: 14px; }
.remember { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.btn-primary { background: var(--brand); color: #fff; border-radius: 12px; padding: 14px; font-size: 17px; font-weight: 700; }
.btn-primary:active { background: var(--brand-dark); }
.btn-primary[disabled] { opacity: .55; }
/* 次按钮（登录页的「注册」）：同尺寸同圆角，描边不填色 —— 和主按钮一眼分得出主次，
   但两个都是能点的真按钮，不像文字链那样被当成说明（用户 9-20） */
.btn-ghost { background: #fff; color: var(--brand); border: 1.5px solid var(--brand);
  border-radius: 12px; padding: 12.5px; font-size: 16.5px; font-weight: 700; margin-top: -4px; }
.btn-ghost:active { background: var(--brand-bg); }
/* 「登录」查无此人时给注册按钮打一下光：填成实色再脉冲三下，不用文字解释也看得懂该点哪 */
.btn-ghost.calling { background: var(--brand); color: #fff; animation: ghostPulse 1.3s ease-out 3; }
@keyframes ghostPulse {
  0%   { box-shadow: 0 0 0 0 rgba(14,159,143,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(14,159,143,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,159,143,0); }
}
@media (prefers-reduced-motion: reduce) { .btn-ghost.calling { animation: none; } }
.login-err { color: var(--red); text-align: center; font-size: 14px; min-height: 18px; }
.lang-row { display: flex; justify-content: center; gap: 10px; }
.lang-btn { padding: 6px 16px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.lang-btn.on { background: var(--brand-bg); color: var(--brand); border-color: var(--brand); font-weight: 700; }

/* 壳（无顶栏，语言入口在「我的」面板） */
#view { padding: calc(14px + var(--safe-t)) 16px calc(104px + var(--safe-b)); max-width: 560px; margin: 0 auto; }
/* 浮岛式底部 Dock（四层液态玻璃） */
#tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); z-index: 30;
  max-width: 600px; margin: 0 auto; display: flex; align-items: center; padding: 6px;
  border-radius: 28px; overflow: hidden; isolation: isolate;
  box-shadow: var(--gshadow-hi); }
#tabbar::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); filter: url(#glass-distortion); }
#tabbar::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  box-shadow: inset 2px 2px 1px 0 rgba(255,255,255,.6), inset -1px -1px 1px 1px rgba(255,255,255,.45); }
#tabbar > a { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  padding: 8px 0 6px; border-radius: 22px; text-decoration: none; color: var(--muted); font-size: 10.5px;
  transition: background .25s ease, color .25s ease; }
#tabbar a svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
/* 选中态不套底色方块：图标外加框在小尺寸下很压，改成品牌色+加粗+一条短下划线 */
#tabbar a.on { color: var(--brand-dark); font-weight: 700; }
#tabbar > a::after { content: ''; width: 16px; height: 2px; margin-top: 3px; border-radius: 2px; background: transparent; }
#tabbar a.on::after { background: var(--brand); }
#tabbar a.on svg { transform: translateY(-1px) scale(1.1); }
#tabbar a:active svg { transform: scale(.9); }

/* 通用卡片 */
.card { position: relative; isolation: isolate; background: transparent;
  border: 1px solid var(--gline); border-radius: 16px; padding: 16px; margin-bottom: 12px;
  box-shadow: var(--gshadow); }
.card::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  backdrop-filter: blur(8px) saturate(190%); -webkit-backdrop-filter: blur(8px) saturate(190%);
  filter: url(#glass-distortion); }
.card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass)); box-shadow: var(--shine); }
.h2 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.muted { color: var(--muted); font-size: 13px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.badge.pending { background: var(--amber-bg); color: var(--amber); }
.badge.approved { background: var(--blue-bg); color: var(--blue); }
.badge.settled { background: var(--green-bg); color: var(--green); }
.badge.rejected { background: var(--red-bg); color: var(--red); }
.badge.draft { background: var(--amber-bg); color: var(--amber); }

/* 首页 */
.hero { background: linear-gradient(140deg, var(--brand), var(--brand-dark)); color: #fff;
  border-radius: 16px; padding: 20px 18px; margin-bottom: 14px; }
.hero .hi { font-size: 19px; font-weight: 800; }
.hero .store { opacity: .85; font-size: 13px; margin-top: 3px; }
.hero .units { margin-top: 14px; font-size: 13px; opacity: .9; }
.hero .units b { font-size: 30px; font-weight: 800; margin-right: 4px; }
.tri { display: flex; gap: 8px; margin-bottom: 14px; }
.tri .t { flex: 1; border-radius: 12px; padding: 12px 10px; text-align: center; }
.tri .t .v { font-size: 17px; font-weight: 800; margin-top: 2px; }
.tri .amber { background: var(--amber-bg); color: var(--amber); }
.tri .blue { background: var(--blue-bg); color: var(--blue); }
.tri .green { background: var(--green-bg); color: var(--green); }
.tri .lbl { font-size: 11.5px; }
.big-actions { display: flex; gap: 10px; }
.big-actions a { flex: 1; background: #fff; border-radius: 14px; padding: 18px 12px; text-align: center;
  text-decoration: none; color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(23,50,47,.06); }
.big-actions svg { width: 30px; height: 30px; stroke: var(--brand); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }

/* 产品 */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcard { background: linear-gradient(180deg, var(--glass-hi), var(--glass)); backdrop-filter: blur(16px) saturate(190%); -webkit-backdrop-filter: blur(16px) saturate(190%); border: 1px solid var(--gline); box-shadow: var(--shine), var(--gshadow); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 3px rgba(23,50,47,.06); position: relative; }
.pcard img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #fafafa; }
.pcard .pin { padding: 9px 10px 11px; }
.pcard .sku { font-weight: 800; font-size: 14px; }
.pcard .cat { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.pcard .price { color: var(--brand-dark); font-weight: 800; margin-top: 5px; font-size: 15px; }
.pcard .reb { position: absolute; top: 8px; right: 8px; background: rgba(184,122,0,.92); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 8px; }
.pd-img { width: 100%; border-radius: 14px; background: #fff; display: block; }
.pd-name { font-size: 16px; font-weight: 800; margin: 12px 0 4px; }
.pd-price { font-size: 22px; color: var(--brand-dark); font-weight: 800; }
.pd-reb { display: inline-block; margin-left: 8px; background: var(--amber-bg); color: var(--amber);
  border-radius: 8px; padding: 2px 10px; font-size: 13px; font-weight: 700; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table td:first-child { color: var(--muted); width: 42%; }
.pitch-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 8px; font-size: 14.5px; line-height: 1.55; }
.pitch-item .copy { float: right; color: var(--brand); font-size: 12.5px; font-weight: 700; padding: 2px 6px; }
.acc { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.acc summary { padding: 11px 12px; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc .body { padding: 0 12px 12px; font-size: 14px; color: #2c4340; line-height: 1.55; }
video { width: 100%; border-radius: 12px; background: #000; }
.back { color: var(--brand); font-weight: 700; text-decoration: none; font-size: 14px; display: inline-block; margin-bottom: 10px; }

/* AI 问答 */
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 55dvh; }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; line-height: 1.55; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(23,50,47,.06); }
.msg.ai a { color: var(--brand); font-weight: 700; }
.msg.typing span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  margin-right: 4px; animation: blink 1.2s infinite; }
.msg.typing span:nth-child(2) { animation-delay: .2s; } .msg.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .25 } 40% { opacity: 1 } }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; -webkit-overflow-scrolling: touch; }
.chips button { flex: 0 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 99px;
  padding: 7px 14px; font-size: 13.5px; color: var(--ink); }
.ask-bar { position: fixed; left: 0; right: 0; bottom: calc(86px + var(--safe-b)); background: var(--bg);
  padding: 8px 16px; display: flex; gap: 8px; max-width: 560px; margin: 0 auto; }
.ask-bar input { flex: 1; border: 1.5px solid var(--line); border-radius: 99px; padding: 11px 16px; background: #fff; }
.ask-bar input:focus { outline: none; border-color: var(--brand); }
.ask-bar button { background: var(--brand); color: #fff; border-radius: 50%; width: 44px; height: 44px; flex: 0 0 44px; font-size: 18px; }
#view.view-ask { padding-bottom: calc(140px + var(--safe-b)); }

/* 拍小票 */
.scan-hero { text-align: center; padding: 26px 16px; }
.scan-hero .ico { width: 84px; height: 84px; border-radius: 50%; background: var(--brand-bg);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.scan-hero .ico svg { width: 40px; height: 40px; stroke: var(--brand); fill: none; stroke-width: 1.7; stroke-linecap: round; }
.scan-note { font-size: 14.5px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.btn-line { border: 1.5px solid var(--brand); color: var(--brand); border-radius: 12px; padding: 12px; font-weight: 700; width: 100%; margin-top: 10px; }
/* 小票收进「确认销售信息」卡片右上角，点一下才展开原图 —— 整图摆在上面太占地方 */
.preview-img { display: none; }
.cf-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.cf-head-txt { flex: 1; min-width: 0; }
.rcpt-mini { flex: none; width: 40px; height: 50px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: rgba(255,255,255,.6); padding: 0; position: relative; }
.rcpt-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rcpt-mini::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s; }
.rcpt-mini.on::after { box-shadow: inset 0 0 0 1.5px var(--brand); }
.rcpt-big { display: none; width: 100%; max-height: 68vh; object-fit: contain;
  border-radius: 12px; margin-bottom: 10px; }
.rcpt-big.open { display: block; }
/* 确认页统一分组列表：整页只剩「组」这一层容器，行内一律无填充块——可编辑项用细下划线示意，
   与「单号/时间/支付」这类只读行同构（用户口径：能填也不要单独框起来） */
.fgroup { border: 0; border-radius: 14px; overflow: hidden; background: transparent; }
.fg-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 2px; font-size: 15.5px; }
.fgroup > .fg-row:first-child, #rows .fg-row:first-child { border-top: 0; }
.fg-row input, .fg-row select { border: 0; background: none; border-radius: 0; height: 38px; padding: 0 2px; font-size: 16px; }
/* 输入不画下划线：一屏十几条彩色横线太吵，改成极淡的底块 */
.fg-row input { background: rgba(13,74,67,.045); border-radius: 9px; padding: 0 10px; }
.fg-row input:focus, .fg-row select:focus { outline: none; box-shadow: 0 0 0 2px rgba(14,159,143,.35); }
.fg-row input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.fg-row input[type=number]::-webkit-outer-spin-button,
.fg-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fg-row select { width: 100%; }
.fg-lab { color: var(--muted); flex: 1; }
.fg-row > input:last-child { margin-left: auto; text-align: right; }
.fg-val { margin-left: auto; text-align: right; font-size: 14px; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-note { padding: 10px 2px 2px; font-size: 12.5px; color: var(--muted); }
/* 商品行：品名占左，数量×单价靠右连读，删除退成灰✕ */
.it-name { flex: 1; min-width: 0; }
.fg-row select.f-sku { width: auto; max-width: 100%; height: auto; font-weight: 600; font-size: 15.5px; }
.it-raw { font-size: 11.5px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-num { display: flex; align-items: baseline; margin-left: auto; color: var(--muted); font-size: 13px; }
.it-num em { font-style: normal; padding: 0 5px; }
.fg-row .it-num input { text-align: right; font-weight: 600; font-size: 15.5px; height: 32px; }
.it-num .f-qty { width: 32px; }
.it-num .f-price { width: 72px; }
.it-row.low { background: var(--amber-bg); box-shadow: inset 3px 0 0 var(--amber); }
.it-row .del { color: var(--muted); font-size: 14px; padding: 4px 0 4px 4px; opacity: .5; }
/* S/N 行：色块 chip → 灰标签；校验状态只走下划线 + 行尾提示，不描整框 */
.sn-row .f-sn { flex: 1; text-transform: uppercase; min-width: 0; font-size: 15px; }
.sn-chip { flex: 0 0 auto; min-width: 58px; color: var(--muted); font-size: 13px; font-weight: 600; }
.sn-msg { padding: 0 12px 8px; font-size: 12px; text-align: right; }
.sn-msg:empty { display: none; }
.fg-acc summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 2px;
  font-size: 14px; font-weight: 700; color: var(--brand); cursor: pointer; list-style: none; }
.fg-acc summary::-webkit-details-marker { display: none; }
/* 预计返点 + 提交常驻底部：S/N 行多的时候原来要滚到底才够得着提交 */
.confirm-foot { position: sticky; bottom: 0; z-index: 5;
  /* ⚠ sticky 元素被自己的包含块夹住，负 bottom 也压不到容器 padding 区里去 ——
     所以是把容器那 calc(20px+safe-b) 底 padding 去掉（下面 .full 那条），由底栏自己出这段留白，
     否则翻页时内容会从底栏下面那道缝里露出来 */
  margin: auto -16px 0; padding: 6px 16px calc(8px + var(--safe-b)); /* auto 顶到底：内容短时也贴底 */
  background: linear-gradient(180deg, rgba(248,251,250,0) 0, rgba(248,251,250,.92) 24%, rgba(248,251,250,.97) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sum-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 5px; font-size: 15.5px; font-weight: 700; }
/* 预计返点与提交并排一行：原来上下两块 + 一条恒占 18px 的空错误行，白白吃掉大半个底栏 */
.cf-bar { display: flex; align-items: center; gap: 12px; }
.cf-bar .sum-row { flex: 0 0 auto; flex-direction: column; align-items: flex-start; padding: 0; }
.cf-bar .sum-row span { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.cf-bar .sum-row b.reb { font-size: 22px; line-height: 1.15; }
.cf-bar .btn-primary { flex: 1; min-width: 140px; }
.confirm-foot .login-err { min-height: 0; margin-top: 6px; }
.confirm-foot .login-err:empty, .confirm-foot .est-bonus:empty { display: none; }
.sum-row b.reb { color: var(--amber); font-size: 21px; }
.ok-hero { text-align: center; padding: 40px 16px; }
.ok-hero .big { font-size: 44px; }
.ok-hero .amt { font-size: 30px; font-weight: 800; color: var(--amber); margin: 8px 0 2px; }
.spin { display: inline-block; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: rot .8s linear infinite; vertical-align: -4px; margin-right: 8px; }
.spin.dark { border-color: rgba(14,159,143,.25); border-top-color: var(--brand); }
@keyframes rot { to { transform: rotate(360deg) } }

/* 返点 */
.rec { display: flex; gap: 10px; background: linear-gradient(180deg, var(--glass-hi), var(--glass)); backdrop-filter: blur(18px) saturate(190%); -webkit-backdrop-filter: blur(18px) saturate(190%); border: 1px solid var(--gline); box-shadow: var(--shine), var(--gshadow); border-radius: 14px; padding: 12px; margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(23,50,47,.05); }
.rec img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: #f0f0f0; }
.rec .noimg { width: 54px; height: 54px; border-radius: 10px; background: var(--brand-bg); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 22px; }
.rec .mid { flex: 1; min-width: 0; }
.rec .sku-line { font-weight: 700; font-size: 14px; }
.rec .date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rec .right { text-align: right; }
.rec .amt { font-weight: 800; color: var(--amber); font-size: 15px; margin-bottom: 4px; }
.rec .note { font-size: 12px; color: var(--red); margin-top: 4px; }
/* 返点银行卡（首页置顶） */
.bank-card { position: relative; overflow: hidden; cursor: pointer; z-index: 2; /* 压在下面的 CTA 之上，投影落到它身上才有层级 */
  background: linear-gradient(130deg, #0B3F3A 0%, #0A5A50 45%, #0E9F8F 100%);
  border-radius: 20px; padding: 20px 20px 16px; color: #fff; margin-bottom: 8px;
  /* 分层高度：接触影(贴地那圈) + 中景 + 远景大扩散 + 上下内描边(卡片有厚度)，
     单靠一层大虚影会显得「贴在画面上」 */
  box-shadow:
    0 1px 2px rgba(8,62,55,.22),
    0 8px 16px -6px rgba(8,62,55,.30),
    0 26px 48px -14px rgba(8,62,55,.45),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.20); }
.bank-card:active { transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(8,62,55,.22),
    0 5px 12px -6px rgba(8,62,55,.30),
    0 16px 30px -14px rgba(8,62,55,.40),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.20); }
.bc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; position: relative; }
.bc-actions { display: flex; gap: 7px; align-items: center; }
.bc-actions button { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  color: #fff; border-radius: 99px; padding: 5px 11px; font-size: 12px; font-weight: 600; backdrop-filter: blur(2px); }
.bc-langwrap { position: relative; }
#bc-lang-menu { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28); min-width: 120px; overflow: hidden; z-index: 70; display: block; }
#bc-lang-menu button { display: block; width: 100%; text-align: left; padding: 11px 16px; font-size: 14.5px;
  color: var(--ink); background: #fff; border: 0; border-radius: 0; }
#bc-lang-menu button:not(:last-child) { border-bottom: 1px solid var(--line); }
#geo-chip { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22);
  border-radius: 99px; padding: 4px 11px; font-size: 11.5px; font-weight: 600; }
.bc-label { font-size: 12.5px; opacity: .82; position: relative; }
.bc-amount { font-size: 50px; font-weight: 800; letter-spacing: 1px; margin: 2px 0 14px;
  text-shadow: 0 2px 10px rgba(0,0,0,.18); position: relative; }
.bc-holder { display: flex; justify-content: space-between; align-items: flex-end; position: relative; }
.bc-name { font-family: "SF Mono", Menlo, monospace; letter-spacing: 2.5px; font-size: 13.5px; opacity: .92; }
.bc-store { font-size: 11.5px; opacity: .8; }
.switch-row { text-align: right; margin-bottom: 10px; }
.switch-row button { color: var(--muted); font-size: 12.5px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: #fff; }

/* 账号条（含切换账号） */
.acct-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px;
  padding: 12px 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(23,50,47,.06); }
.acct-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-bg);
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 44px; }
.acct-info { flex: 1; min-width: 0; }
.acct-name { font-weight: 800; font-size: 16px; }
.acct-store { font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#switch-acct { border: 1.5px solid var(--line); color: var(--brand); border-radius: 99px;
  padding: 8px 14px; font-size: 13px; font-weight: 700; flex: 0 0 auto; }
/* 首页主按钮：拍小票 */
.primary-cta { display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
  border-radius: 16px; padding: 22px 16px; margin-bottom: 12px; text-decoration: none;
  font-size: 19px; font-weight: 800; box-shadow: 0 8px 22px rgba(14,159,143,.35); }
.primary-cta svg { width: 32px; height: 32px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }
.primary-cta:active { transform: scale(.985); }
/* 返点钱数卡 */
.money-card { display: block; background: #fff; border-radius: 16px; padding: 16px;
  text-decoration: none; color: var(--ink); box-shadow: 0 1px 3px rgba(23,50,47,.06); }
.mc-label { font-size: 13px; color: var(--muted); }
.mc-big { font-size: 38px; font-weight: 800; color: var(--amber); margin: 2px 0 10px; }
.mc-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* 卡片补充：金色可提现胶囊 / 左下定位 / 右下店铺选择 / CTA 副标题 */
.bc-left { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bc-geo-b { font-size: 11px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  border-radius: 99px; padding: 3px 9px; }
.bc-store { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); color: #fff;
  border-radius: 10px; padding: 7px 11px; font-size: 12px; font-weight: 600; max-width: 55%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.primary-cta { flex-direction: column; gap: 4px; }
.cta-main { display: flex; align-items: center; gap: 12px; }
.cta-sub { font-size: 11.5px; font-weight: 500; opacity: .85; }

/* 店铺选择弹层 */
.sheet-ov { position: fixed; inset: 0; background: rgba(10,30,28,.55); z-index: 90;
  display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 560px;
  max-height: 72dvh; overflow-y: auto; padding: 18px 16px calc(18px + var(--safe-b)); }
.sheet-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.sheet-item.on { border-color: var(--brand); background: var(--brand-bg); }
.sheet-item b { font-size: 15px; }

/* 返点排行（自家亮色版式） */
.seg { display: flex; background: linear-gradient(180deg, var(--glass-hi), var(--glass)); backdrop-filter: blur(16px) saturate(190%); -webkit-backdrop-filter: blur(16px) saturate(190%); box-shadow: var(--shine); border: 1px solid var(--gline); border: 1.5px solid var(--line); border-radius: 14px; padding: 4px; margin-bottom: 10px; }
.seg-btn { flex: 1; padding: 10px; border-radius: 10px; color: var(--muted); font-size: 14.5px; font-weight: 700; }
.seg-btn.on { background: var(--brand); color: #fff; }
.rrow { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px;
  padding: 13px 14px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(23,50,47,.05); }
.rrow-rk { width: 30px; text-align: center; font-weight: 800; font-size: 15px; color: var(--muted); }
.rrow.top1 .rrow-rk, .rrow.top2 .rrow-rk, .rrow.top3 .rrow-rk { font-size: 22px; }
.rrow.top1 { border: 1.5px solid #E8C55A; background: linear-gradient(120deg, #FFFDF4, #FFF7DE); }
.rrow.top1 .rrow-amt { font-size: 20px; }
.rrow.top2 { border: 1.5px solid #D5DBDB; }
.rrow.top3 { border: 1.5px solid #E4C6AE; }
.rrow.me { outline: 2px solid var(--brand); }
.me-tag { background: var(--brand-bg); color: var(--brand); border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.rrow-mid { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rrow-mid b { font-size: 15px; }
.rrow-mid span { font-size: 12px; color: var(--muted); margin-top: 1px; }
.rrow-amt { color: var(--amber); font-weight: 800; font-size: 16.5px; }

/* 搜索 + 语音 */
.searchbar { display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--glass-hi), var(--glass)); backdrop-filter: blur(16px) saturate(190%); -webkit-backdrop-filter: blur(16px) saturate(190%); box-shadow: var(--shine); border: 1px solid var(--gline); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 4px 6px 4px 14px; margin-bottom: 12px; }
.searchbar > svg { width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; flex: 0 0 20px; }
.searchbar input { flex: 1; border: 0; padding: 11px 0; font-size: 16px; background: none; min-width: 0; }
.searchbar input:focus { outline: none; }
.mic-btn { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: var(--brand-bg);
  display: flex; align-items: center; justify-content: center; }
.mic-btn svg { width: 21px; height: 21px; stroke: var(--brand); fill: none; stroke-width: 1.9; stroke-linecap: round; }
.mic-btn.rec { background: var(--red); animation: pulse 1s infinite; }
.mic-btn.rec svg { stroke: #fff; }
.mic-btn.busy { opacity: .5; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(194,64,42,.5) } 50% { box-shadow: 0 0 0 9px rgba(194,64,42,0) } }
/* 首页两个大拍照按钮 */
.big-actions.photo2 { margin-bottom: 12px; }
.big-actions.photo2 > * { padding: 20px 10px; font-size: 15px; line-height: 1.35; }
.big-actions.photo2 svg { width: 36px; height: 36px; }
.big-actions button { flex: 1; background: #fff; border-radius: 14px; text-align: center; font-weight: 700;
  box-shadow: 0 1px 3px rgba(23,50,47,.06); color: var(--ink); }
.big-actions button svg { stroke: var(--brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
/* 详情页返点大条 */
.reb-banner { margin-top: 10px; background: linear-gradient(120deg, #FFB300, #FF8A00); color: #fff;
  border-radius: 14px; padding: 14px 16px; font-size: 17px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(255,138,0,.35); }
.reb-banner b { font-size: 24px; margin-left: 4px; }
/* 拍S/N 小按钮 */
.sn-cam { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.sn-cam .ic { width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 语言三选菜单 */

/* 平板 / 电脑自适应 */
@media (min-width: 768px) {
  #view { max-width: 760px; }
  .ask-bar { max-width: 760px; }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .big-actions.photo2 > * { padding: 26px 12px; }
  /* 单栏页面（首页/拍小票/返点/排行/问答/产品详情）电脑上限宽居中，不做手机页拉宽 */
  #view.view-home, #view.view-scan, #view.view-rebates, #view.view-rank, #view.view-ask, #view.view-product { max-width: 640px; }
  .ask-bar { max-width: 640px; }
  #tabbar { justify-content: center; }
  #tabbar a { max-width: 130px; }
}
@media (min-width: 1100px) {
  #view { max-width: 1000px; }
  .pgrid { grid-template-columns: repeat(4, 1fr); }
  .pd-img { max-width: 560px; margin: 0 auto; }
  #view.view-home, #view.view-scan, #view.view-rebates, #view.view-rank, #view.view-ask, #view.view-product { max-width: 640px; }
}

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(100px + var(--safe-b));
  background: rgba(23,50,47,.92); color: #fff; border-radius: 99px; padding: 10px 20px; font-size: 14px; z-index: 99;
  opacity: 0; transition: opacity .25s; pointer-events: none; }
.toast.show { opacity: 1; }

/* ---------- 限时冲量任务 ---------- */
.flash-card { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(120deg, #FF8A00, #FF5722); color: #fff; text-decoration: none;
  box-shadow: 0 6px 18px rgba(255, 110, 0, .28); }
.flash-card:active { transform: scale(.985); }
.flash-card.soon { background: linear-gradient(120deg, #90A0AE, #5C6B7A); box-shadow: none; }
.flash-card .fc-img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #fff; flex: none; }
.flash-card .fc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.flash-card .fc-title { font-size: 13.5px; font-weight: 800; }
.flash-card .fc-bonus { font-size: 20px; font-weight: 800; line-height: 1.15; }
.flash-card .fc-meta { font-size: 11.5px; opacity: .9; }
.flash-card .fc-right { text-align: center; flex: none; }
.flash-card .fc-lbl { display: block; font-size: 10.5px; opacity: .85; }
.flash-card .fc-cd { font-size: 17px; font-variant-numeric: tabular-nums; }
.reb-banner.flash { background: linear-gradient(120deg, #FF5722, #E91E63); margin-top: 8px; }
.reb-banner.flash [data-cd-end] { font-variant-numeric: tabular-nums; }
.est-bonus { text-align: right; color: #FF6F00; font-weight: 700; font-size: 13px; margin-top: 4px; }
.fc-done { color: #FF6F00; font-weight: 800; margin-top: 2px; }

/* ---------- 邮箱登录 ---------- */
.login-mode { display: flex; background: #F0F4F3; border-radius: 12px; padding: 4px; gap: 4px; }
.login-mode button { flex: 1; padding: 9px 0; border-radius: 9px; font-size: 14.5px; color: var(--muted); font-weight: 600; }
.login-mode button.on { background: #fff; color: var(--brand); font-weight: 800; box-shadow: 0 1px 4px rgba(23,50,47,.12); }
#lg-pass-zone, #lg-email-zone { display: flex; flex-direction: column; gap: 14px; }
.login-hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: -4px; }

/* ---------- 我的页（档案卡：店铺选择+定位） ---------- */
.me-card .me-row1 { display: flex; align-items: baseline; gap: 8px; font-size: 17px; margin-bottom: 4px; }
.me-line { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14.5px; }
.me-line > span:first-child { color: var(--muted); flex: none; }
.me-store-btn { color: var(--brand); font-weight: 700; padding: 4px 12px; border: 1px solid var(--brand); border-radius: 99px; font-size: 13.5px; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .reb.boost { background: linear-gradient(120deg, #FF8A00, #FF5722); }

.me-lang { display: flex; gap: 6px; }
.me-lang button { padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.me-lang button.on { background: var(--brand-bg); color: var(--brand); border-color: var(--brand); font-weight: 700; }
.me-click { cursor: pointer; }
.me-click:active { opacity: .7; }
.me-exit { color: var(--muted); font-weight: 700; }

/* ---------- 录入 CTA（抄自竞技场稿：卖1台钱立刻到账） ---------- */
.coin-line { position: relative; height: 34px; width: 0; border-left: 2px dashed #D9BE7E; margin: 2px auto; opacity: .75; }
.coin-line::after { content: ''; position: absolute; left: -6px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE9A8, #F5C33B 60%, #D99B14); box-shadow: 0 0 8px rgba(245,195,59,.9);
  animation: coinRise 1.6s ease-out infinite; }
@keyframes coinRise { 0% { top: 26px; opacity: 0; } 20% { opacity: 1; } 85% { top: -4px; opacity: 1; } 100% { top: -6px; opacity: 0; } }
.sell-cta { display: flex; align-items: center; gap: 12px; padding: 16px 14px; border-radius: 18px;
  background: linear-gradient(120deg, #FF7A59, #F4502E); color: #fff; text-decoration: none;
  box-shadow:
    0 1px 2px rgba(160,50,26,.18),
    0 6px 14px -6px rgba(244,80,46,.26),
    0 16px 30px -12px rgba(244,80,46,.30),
    inset 0 1px 0 rgba(255,255,255,.24);
  animation: ctaIn .45s cubic-bezier(.2,1.2,.4,1); }
.sell-cta:active { transform: scale(.985); }
@keyframes ctaIn { 0% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.sell-cta .ico { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; flex: none; }
.sell-cta .ico svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sell-cta .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sell-cta .eyebrow { font-size: 10px; letter-spacing: 1.8px; font-weight: 800; opacity: .8; }
.sell-cta .big { font-size: 18px; font-weight: 800; line-height: 1.3; margin-top: 1px; }
.sell-cta .sub { font-size: 12px; opacity: .9; margin-top: 2px; }
.sell-cta .go { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; flex: none; animation: pulseGo 2s infinite; }
.sell-cta .go svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pulseGo { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.4); } 50% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
/* 成功页动效：金额弹跳（金币雨已换成 .coin-fly 入袋，见下方） */
.ok-hero { position: relative; overflow: hidden; }
.ok-hero .amt { animation: amtPop .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes amtPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* 录入底部抽屉：从下滑出，不全屏遮挡 */
/* 抽屉遮罩：录入时后面的信息不用看清，虚化让注意力全在录入上 */
#scan-sheet-ov, #me-sheet-ov { position: fixed; inset: 0; z-index: 59; background: rgba(23,50,47,0);
  transition: background .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease; }
#scan-sheet-ov.show, #me-sheet-ov.show { background: rgba(23,50,47,.30);
  backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%); }
#scan-sheet, #me-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-width: 640px; margin: 0 auto;
  border-radius: 22px 22px 0 0; height: var(--sheet-h, auto); max-height: 86dvh; isolation: isolate;
  display: flex; flex-direction: column; transform: translateY(105%);
  transition: transform .38s cubic-bezier(.32, .72, .28, 1), height .38s ease, max-height .38s ease;
  box-shadow: 0 -12px 44px rgba(23,50,47,.28); }
/* 结果这一屏：变成一张浮起来的卡（四角全圆、离底），不再是贴边抽屉。
   ⚠ 左右边缘不在这里写死 —— #view 和抽屉的 max-width 不一样（560 vs 640），
   用固定的 16px 去凑，换个屏宽就对不上。改成 JS 量首页卡片实测坐标钉上去。 */
#scan-sheet.mini { max-height: 52dvh; bottom: calc(24px + var(--safe-b)); border-radius: 22px; }
/* 结果页不要底栏：钱正往钱包飞，底下再顶一条玻璃条抢戏 */
body.no-tabbar #tabbar { display: none; }
#scan-sheet.mini .steps { margin-bottom: 8px; }
#scan-sheet.mini .ok-hero { padding: 12px 16px; margin-bottom: 0; }
/* 提交成功那一刻：遮罩清空且撤掉虚化，钱包卡完整亮出来看金币落袋 */
#scan-sheet-ov.clear { background: rgba(23,50,47,0); backdrop-filter: none; -webkit-backdrop-filter: none; }
#scan-sheet.up, #me-sheet.up { transform: translateY(0); }
#scan-sheet::before, #me-sheet::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); }
#scan-sheet::after, #me-sheet::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(250,252,252,.84), rgba(246,250,249,.72));
  box-shadow: inset 2px 2px 1px 0 rgba(255,255,255,.7), inset -1px -1px 1px 1px rgba(255,255,255,.4); }
/* ✕ 用 SVG 画，不用 ✕ 字符：U+2715 的墨迹在字体里天生偏上，
   line-height 只能把「行盒」摆正，看着还是偏（用户 8-26 实拍）。
   而且各系统字体不同，偏多少都不一样。SVG 两根线 + flex 居中，才是真的正。 */
/* 返回：和 ✕ 同一行、左右对称。带文字不做成光秃秃的箭头 ——
   用户说过「返回要大一点，不然别人不知道会点错直接点 X」（8-26） */
.sheet-back { position: absolute; top: 12px; left: 14px; z-index: 6; height: 32px; padding: 0 14px 0 10px;
  display: flex; align-items: center; gap: 4px; border-radius: 99px;
  background: var(--brand-bg); border: 1px solid rgba(14,159,143,.22);
  color: var(--brand-dark); font-size: 14px; font-weight: 700; }
.sheet-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sheet-back:active { background: rgba(14,159,143,.18); }
.sheet-back.hidden { display: none; }
.sheet-x { position: absolute; top: 12px; right: 14px; z-index: 6; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(23,50,47,.10); color: var(--muted); padding: 0;
  display: flex; align-items: center; justify-content: center; }
.sheet-x svg { width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; display: block; }
.sheet-x:active { background: rgba(23,50,47,.18); }
.ss-handle { flex: none; padding: 11px 0 7px; display: flex; justify-content: center; cursor: pointer; }
.ss-handle::before { content: ''; width: 44px; height: 5px; border-radius: 99px; background: #C2CFCC; }
/* flex 列 + 底栏 margin-top:auto：内容不够长时 sticky 只会停在内容末尾，
   下面空一大片、按钮吊在半空够不着（用户实测反馈）。这样才真正贴底。 */
#scan-sheet-body, #me-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 2px 16px calc(20px + var(--safe-b)); }
/* ⚠ 必须 flex-shrink:0。flex 列容器的孩子默认会被压扁去迁就容器高度，
   于是 scrollHeight == clientHeight —— 浏览器认为「没东西可滚」，
   可内容其实已经溢出到看不见的地方，滚都滚不到。
   实测：结果页 6 台机器时，「再拍一张」按钮在可视区外 18px 且滚不动（用户 8-26）。
   扫码那步扫十几台也是同一个坑。 */
#scan-sheet-body > *, #me-sheet-body > * { flex-shrink: 0; }

/* ---------- 录入四步进度条 + 虚线上传卡 + 样例区（抄同事稿排版） ---------- */
/* 右侧留出 44px 避让关闭按钮：.sheet-x 是绝对定位悬在右上角，
   步骤条铺满内容宽时最后一格正好被它压住（实测右边缘与 ✕ 左边缘同一坐标） */
.steps { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 14px; padding: 0 2px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; min-width: 44px; }
.step i { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 800; font-size: 13.5px; background: #fff; border: 2px solid var(--line); color: var(--muted); }
.step span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.step.act i { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 10px rgba(14,159,143,.3); }
.step.act span { color: var(--brand); font-weight: 700; }
.step.done i { background: var(--brand-bg); border-color: var(--brand); color: var(--brand); }
.step.done span { color: var(--brand); }
.steps em { flex: 1; height: 2px; background: var(--line); margin-top: 14px; border-radius: 2px; }
.steps em.on { background: var(--brand); }
/* 说明区：不再装按钮，按钮统一沉到底部固定区 */
/* 说明区，不是按钮：没有卡片底、图标改浅色描边，
   跟下面「拍照」那个实心主按钮在观感上彻底分开（用户 8-26 选的方案） */
.scan-entry { border: 0; background: none; box-shadow: none; text-align: center;
  padding: 26px 16px 8px; margin-bottom: 22px; }
.se-ico { width: 54px; height: 54px; border-radius: 16px; background: var(--brand-bg); margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; }
.se-ico svg { width: 26px; height: 26px; stroke: var(--brand); fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.se-title { font-weight: 700; font-size: 15px; color: var(--muted); }
.se-sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; line-height: 1.5; }
.se-btns { display: flex; gap: 10px; margin-top: 16px; }
.se-btns button { flex: 1; border-radius: 16px; padding: 20px 8px; font-weight: 800; font-size: 15px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.se-btns svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.se-cam { background: var(--brand); color: #fff; }
.se-cam:active { opacity: .85; }
.se-upl { background: #fff; border: 1.5px solid var(--brand); color: var(--brand); }
.samples .sm-eyebrow { font-size: 10px; letter-spacing: 1.6px; color: var(--amber); font-weight: 800; }
.sm-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 14.5px; margin: 2px 0 10px; gap: 8px; }
.sm-head .muted { font-size: 12px; }
.sm-card { display: flex; gap: 10px; align-items: center; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-align: left; }
.sm-card:active { background: var(--brand-bg); }
.sm-card img { width: 44px; height: 56px; object-fit: cover; border-radius: 8px; background: #f4f4f4; flex: none; }
.sm-mid b { display: block; font-size: 14px; }
.sm-mid span { color: var(--brand); font-size: 12.5px; font-weight: 700; }
.sm-row { display: flex; gap: 8px; }
.sm-row .sm-card { flex: 1; min-width: 0; }
.sm-mid { min-width: 0; }
.sm-mid em { display: block; font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 识别等待：小票大图 + 扫描线扫过（仿竞技场稿动效） */
.scan-prog { margin-top: 12px; }
.sp-img { position: relative; border-radius: 12px; overflow: hidden; height: 230px; border: 1px solid var(--line); background: #EDF2F1; }
.sp-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-img::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,159,143,.10), rgba(14,159,143,0) 45%); pointer-events: none; }
.sp-line { position: absolute; left: 0; right: 0; top: -34%; height: 34%; pointer-events: none;
  background: linear-gradient(180deg, rgba(52,196,178,0) 0%, rgba(52,196,178,.22) 68%, rgba(52,196,178,.95) 97%, #EFFFFC 100%);
  box-shadow: 0 2px 12px rgba(52,196,178,.55);
  animation: spSweep 1.5s cubic-bezier(.4,.1,.6,.9) infinite; }
@keyframes spSweep { 0% { transform: translateY(0); } 100% { transform: translateY(400%); } }
.sp-txt { font-size: 12.5px; text-align: center; margin-top: 8px; }
/* 入账飘字 */
.bc-amount { position: relative; }
.amt-float { position: absolute; right: -6px; top: -14px; font-size: 16px; font-weight: 800; color: #FFD666;
  text-shadow: 0 1px 6px rgba(0,0,0,.25); animation: amtFloat 1.7s ease-out forwards; pointer-events: none; }
@keyframes amtFloat { 0% { opacity: 0; transform: translateY(10px) scale(.7); }
  25% { opacity: 1; transform: translateY(0) scale(1.05); } 75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px) scale(1); } }

/* 问答语音按钮 */
.mic-btn { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 0; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(160deg, var(--brand), var(--brand-dark)); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(14,159,143,.35); }
.mic-btn svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }
.mic-btn:active { transform: scale(.94); }
.mic-btn.mic-live { background: linear-gradient(160deg, #D9563C, var(--red)); animation: micPulse 1.2s infinite; }
.mic-btn.mic-live svg { stroke: #fff; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(194,64,42,.30); } 50% { box-shadow: 0 0 0 8px rgba(194,64,42,0); } }

/* S/N 录入框状态：待填/失败=红框，通过=绿框 */
.fg-row input.f-sn { transition: border-color .15s; }
.fg-row input.f-sn.sn-req { background: var(--red-bg); }
.fg-row input.f-sn.sn-ok { background: var(--green-bg); }
.fg-row input.f-sn.sn-req::placeholder { color: var(--red); opacity: .55; }
/* 已被别人用过的机身码：比「没填」更重，描个红边让它在一排框里跳出来（用户 9-20） */
.fg-row input.f-sn.sn-used { background: var(--red-bg); border-color: var(--red); box-shadow: 0 0 0 2px rgba(200,40,40,.12); }

/* 金币入袋（fixed 穿透抽屉裁剪，z 高于抽屉） */
/* 金币：带 ฿ 的实心币，不是小圆点 —— 圆点飞过去只像粒子，看不出是钱。
   20px 是手机上还能认出 ฿ 的下限。 */
/* 爆开的金币也是同一张币面 —— 大币 / 飘落小币 / 爆开，三处一致 */
.coin-fly { position: fixed; z-index: 80; width: 28px; height: 28px; border-radius: 50%;
  pointer-events: none; filter: drop-shadow(0 0 10px rgba(245,195,59,.85));
  opacity: 0; will-change: transform, opacity; }

.rec-del { display: block; margin-top: 5px; color: var(--red); font-size: 12px; font-weight: 700; }
.badge.withdrawn { background: #ECEFEF; color: var(--muted); }

.me-row1 { position: relative; padding-right: 30px; }
.me-chev { position: absolute; right: 2px; top: -2px; font-size: 20px; color: var(--muted);
  transition: transform .25s ease; display: inline-block; }
.me-chev.up { transform: rotate(180deg); }

.ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 3px; }
.rec-del .ic { width: 14px; height: 14px; vertical-align: -2px; }

/* 排行领奖台（参考竞技场稿 2-1-3 podium，亮底玻璃版） */
.rank-head { margin: 2px 2px 12px; }
.rh-eyebrow { font-size: 11.5px; font-weight: 800; color: var(--amber); letter-spacing: .5px; }
.rh-title { font-size: 25px; font-weight: 800; margin: 2px 0; letter-spacing: .5px; }
.podium { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; padding-top: 10px; }
.pd { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; padding: 14px 8px 12px; border-radius: 16px;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  backdrop-filter: blur(16px) saturate(190%); -webkit-backdrop-filter: blur(16px) saturate(190%);
  border: 1px solid var(--gline); box-shadow: var(--shine), var(--gshadow); }
.pd b { font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd span { font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd em { font-style: normal; font-weight: 800; color: var(--amber); font-size: 15px; margin-top: 2px; }
.pd-badge { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 800; font-size: 15px; background: rgba(23,50,47,.07); color: var(--muted); margin-bottom: 3px; }
.pd1 { padding: 20px 8px 18px; transform: translateY(-10px); border: 1.5px solid #E7C463;
  box-shadow: var(--shine), 0 14px 30px -10px rgba(233,185,59,.35); }
.pd1 .pd-badge { width: 40px; height: 40px; font-size: 17px;
  background: linear-gradient(140deg, #FFD666, #E9B93B); color: #4a3a08; box-shadow: 0 4px 12px rgba(233,185,59,.5); }
.pd1 em { font-size: 18px; }
.pd3 { border: 1.5px solid rgba(14,159,143,.55); }
.pd.meoutline { outline: 2px solid var(--brand); outline-offset: 1px; }
.pd.empty { visibility: hidden; }

.ask-bar { z-index: 25; }

/* 我的页：左上角圆形头像（点击展开档案） */
.me-top { margin-bottom: 10px; }
#me-avatar { width: 48px; height: 48px; border-radius: 50%; font-size: 19px; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, var(--brand), var(--brand-dark));
  border: 2px solid rgba(255,255,255,.7); box-shadow: 0 6px 18px rgba(14,159,143,.35); }
#me-avatar:active { transform: scale(.94); }
/* 记录左滑删除 */
.rec-wrap { position: relative; margin-bottom: 10px; }
.rec-wrap .rec { margin-bottom: 0; position: relative; z-index: 1; }
.rec-delbg { position: absolute; right: 0; top: 0; bottom: 0; width: 84px; z-index: 0; opacity: 0;
  border-radius: 14px; background: linear-gradient(140deg, #E25B4A, #C2402A); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 12px; font-weight: 700; transition: opacity .2s; }
.rec-delbg .ic { width: 18px; height: 18px; stroke: #fff; margin: 0; }
/* 步骤条整体下移，让开顶栏那一行（左「返回」+ 右 ✕），左右留白归零。
   原来是用 padding-left/right:52px 从两侧躲 ✕ —— 那是给 32px 宽的 ✕ 算的，
   现在左边换成 74px 的「返回」胶囊，52px 根本不够，实测直接压住步骤条。
   下移之后步骤条能用满整宽、天然居中，之前为躲 ✕ 做的偏心补丁也不需要了。 */
#scan-sheet .steps { padding-left: 0; padding-right: 0; margin-top: 26px; margin-bottom: 18px; }

/* 我的销售账户页（参考妙搭结构，品牌皮肤） */
.me-head { margin: 4px 2px 12px; }
.me-head .mh-title { font-size: 24px; font-weight: 800; margin-top: 2px; }
/* 账单头：平铺在页面上，没有卡片底。
   ⚠ 别再用首页那套深色渐变 —— 两屏渐变/圆角/莲花水印一模一样，
   用户点进来分不清自己在哪一屏（8-26 反馈）。这屏是流水账，不是第二个钱包。 */
.acct-sum { padding: 2px 4px 16px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.as-label { font-size: 12.5px; font-weight: 700; color: var(--brand-dark); letter-spacing: .3px; }
.as-amt { font-size: 42px; font-weight: 800; letter-spacing: .5px; color: var(--amber); line-height: 1.1; margin: 4px 0 2px; }
/* 三段拆解横排：已发放 / 待对账 / 可提现，加起来等于上面那个大数。
   数字加粗、标签降灰 —— 店员扫一眼是找数字，不是读标签（用户 9-20） */
.as-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); margin-top: 7px; }
.as-sub i { font-style: normal; white-space: nowrap; }
.as-sub b { color: var(--ink); font-weight: 700; font-size: 13.5px; margin-left: 3px; }

/* 驳回行动条：整屏唯一要店员动手的东西，置顶且点得动（跳到那一单）。
   暖色但不刺眼 —— 这是「有事要处理」，不是「出错了」 */
.rej-bar { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: #FFF1EC; border: 1px solid #FFD2C3; border-radius: 14px;
  padding: 12px 13px; margin-bottom: 14px; }
.rej-bar:active { background: #FFE6DE; }
.rb-ico { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #E8552F; color: #fff;
  font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.rb-mid { flex: 1; min-width: 0; }
.rb-mid b { display: block; font-size: 14px; color: #8A2B14; }
.rb-mid i { display: block; font-style: normal; font-size: 12.5px; color: #A8503A; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-go { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #C2653F; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }

/* 从驳回条跳过来时闪一下，告诉人「就是这条」 */
.rec-flash .rec { animation: recFlash 2s ease-out; }
@keyframes recFlash {
  0%, 22% { box-shadow: 0 0 0 3px rgba(232,85,47,.55); }
  100% { box-shadow: 0 0 0 3px rgba(232,85,47,0); }
}
@media (prefers-reduced-motion: reduce) { .rec-flash .rec { animation: none; box-shadow: 0 0 0 3px rgba(232,85,47,.5); } }
.mon-bar { display: flex; justify-content: space-between; align-items: center; margin: 16px 2px 10px; gap: 10px; }
/* 当月台数和返点收在这一行右边：原来各占一张卡，跟上面的账单头一起
   让这屏堆了五组数字（用户 8-26 说太乱） */
.mon-stat { font-size: 13.5px; color: var(--muted); }
.mon-stat b { font-size: 16px; font-weight: 800; color: var(--ink); }
#mon-sel { border: 1px solid var(--gline); background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  border-radius: 12px; padding: 8px 12px; font-size: 13.5px; font-weight: 700; color: var(--ink); box-shadow: var(--gshadow); }
.day-head { display: flex; align-items: center; gap: 8px; margin: 16px 2px 8px; }
.day-head b { font-size: 14.5px; }
.day-chip { background: rgba(23,50,47,.08); border-radius: 99px; padding: 2px 10px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.day-sum { margin-left: auto; color: var(--green); font-weight: 800; font-size: 14.5px; }

/* 钱包卡：左上=头像+名字(点开个人信息)，右上=SKG 圆标(纯品牌，替代莲花水印) */
/* 钱包卡底部那行：左「我的销售 ›」右状态徽标。卡面是品牌深色，徽标一律走
   半透明白底 + 白字，只有「已驳回」给暖色实底 —— 那条是要人立刻看见的（用户 9-20） */
/* 卡底状态行：只在真有待审核/驳回时出现，没有标题也没有分隔线 ——
   整张卡本身就是进「我的销售」的入口，再写一遍是重复（用户 9-20）。
   驳回给暖色实底（唯一要人马上管的），待审核降成同色系小字，不抢钱的视线 */
.bc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: -4px; position: relative; }
.bc-chip { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3.5px 9px;
  border-radius: 99px; white-space: nowrap; }
.bc-chip.rej { background: #FFD9CF; color: #8A2B14; }
.bc-st { font-style: normal; font-size: 12px; opacity: .8; white-space: nowrap; }
.bc-me { display: flex; align-items: center; gap: 10px; color: #fff; text-align: left; padding: 0; }
.bc-me:active .bc-ava { transform: scale(.94); }
.bc-ava { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.38);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; transition: transform .15s; }
.bc-who { min-width: 0; }
.bc-who b { display: block; font-size: 14.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.bc-who i { font-style: normal; font-size: 11px; opacity: .78; }

/* S/N 条码取景器：全屏、本机解码，z 高于抽屉(60)与金币(80) */
#bc-scan { position: fixed; inset: 0; z-index: 90; background: #000; overflow: hidden; }
#bc-scan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#bc-scan .bc-win { position: absolute; left: 7%; right: 7%; top: 33%; height: 138px; border-radius: 16px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.58); outline: 2px solid rgba(255,255,255,.9); overflow: hidden; }
#bc-scan .bc-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--brand);
  box-shadow: 0 0 12px 2px rgba(14,159,143,.9); animation: bcSweep 1.9s ease-in-out infinite; }
@keyframes bcSweep { 0%, 100% { top: 6px; } 50% { top: calc(100% - 8px); } }
#bc-scan .bc-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + var(--safe-t)) 18px 0; color: #fff; font-size: 16px; }
#bc-scan .bc-x { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 15px; }
#bc-scan .bc-hint { position: absolute; left: 0; right: 0; top: calc(33% + 156px); text-align: center;
  color: rgba(255,255,255,.92); font-size: 14.5px; padding: 0 24px; }
#bc-scan .bc-count { margin-top: 8px; font-size: 17px; font-weight: 700; color: #fff; min-height: 22px; }
/* 扫了 8 秒还没出码才浮出来：别让店员对着不动的扫描线干等 */
#bc-scan .bc-tip { position: absolute; left: 20px; right: 20px; bottom: calc(96px + var(--safe-b));
  text-align: center; font-size: 13.5px; line-height: 1.5; color: #fff;
  background: rgba(0,0,0,.55); border-radius: 12px; padding: 10px 14px;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
#bc-scan .bc-tip.on { opacity: 1; transform: none; }
#bc-scan .bc-alt { position: absolute; left: 0; right: 0; bottom: calc(30px + var(--safe-b)); text-align: center; }
#bc-scan .bc-alt { display: flex; gap: 10px; justify-content: center; align-items: center; }
#bc-scan .bc-alt button { color: #fff; border: 1.5px solid rgba(255,255,255,.55); border-radius: 99px; padding: 11px 22px; font-size: 15px; }
/* 扫到货之后才出现的收工按钮：原来只有右上角一个 ✕，
   店员扫完不敢按，就以为卡在识别界面出不去了（用户 8-26） */
#bc-scan .bc-done { background: var(--brand); border-color: var(--brand); font-weight: 800; padding: 12px 30px; }
#bc-scan .bc-done[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #bc-scan .bc-line { animation: none; top: 50%; } }

/* S/N 这步内容最多（商品行 + 每台一行 S/N + 小票信息），抽屉拉到整屏一次看全 */
#scan-sheet.full { height: calc(100dvh - 10px); max-height: calc(100dvh - 10px); } /* 行内 --sheet-h 抢不过，直接写 height */
/* 扫 S/N 这步高度跟内容走：只扫一两台时抽屉就矮，不留一大片空白；
   扫多了长到 86dvh 封顶，再多由列表自己滚 */
#scan-sheet.hug { height: auto; max-height: 86dvh; }
#scan-sheet.hug #scan-sheet-body { padding-bottom: 0; }
#scan-sheet.full #scan-sheet-body { padding-bottom: 0; } /* 底部留白改由 .confirm-foot 自己出，底栏才能贴到最底 */

/* 测试期放行的重复小票 / 重复 S/N：不拦，但必须显眼地说出来 */
.dup-warn { margin-top: 12px; padding: 10px 12px; border-radius: 12px; text-align: left;
  background: var(--amber-bg); color: var(--amber); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.dup-warn i { font-style: normal; font-weight: 500; opacity: .8; }

/* 提交闸门未过：按钮降级成灰色提示条，写清还差什么 */
.btn-primary.gated { background: rgba(23,50,47,.12); color: var(--muted); box-shadow: none; font-weight: 600; }

/* 排行页顶部：本月/本周活动与前三名奖励 */
.camp-card { border-radius: 16px; padding: 14px 14px 12px; margin-bottom: 14px; color: #fff;
  background: linear-gradient(125deg, #E9B93B 0%, #D98A1F 55%, #C2701A 100%);
  box-shadow: 0 1px 2px rgba(120,80,10,.20), 0 10px 24px -10px rgba(200,140,30,.55),
    inset 0 1px 0 rgba(255,255,255,.30); }
.camp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.camp-tag { background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35);
  border-radius: 99px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; }
.camp-top b { font-size: 16.5px; font-weight: 800; }
.camp-prizes { display: flex; gap: 8px; }
.camp-prize { flex: 1; background: rgba(255,255,255,.16); border-radius: 11px; padding: 8px 6px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.camp-prize i { font-style: normal; font-size: 19px; line-height: 1; }
.camp-prize span { font-size: 12px; font-weight: 700; line-height: 1.3; }
.camp-note { margin-top: 9px; font-size: 11.5px; opacity: .9; }

/* ---------- 自助注册 ---------- */
.reg-card { position: relative; max-width: 380px; }
.rg-back { position: absolute; left: 12px; top: 10px; font-size: 20px; color: var(--muted); padding: 4px 8px; }
.rg-steps { display: flex; gap: 6px; justify-content: center; margin: 2px 0 6px; }
.rg-steps i { width: 26px; height: 3px; border-radius: 2px; background: var(--line); }
.rg-steps i.on { background: var(--brand); }
.rg-steps i.done { background: var(--brand-bg); }
.store-pick { position: relative; }
/* 选店抽屉顶部的搜索框（9-20 补，此前 150 家平铺没法搜） */
.ps-q { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
  font-size: 16px; margin-bottom: 10px; }
.ps-q:focus { outline: none; border-color: var(--brand); }
/* 报完单发现没门店：暖色实底、整块能点 —— 这笔钱卡在这儿，得让人现在就去选（9-20） */
.done-nostore { display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  width: 100%; text-align: left; background: #FFF1EC; border: 1px solid #FFD2C3;
  border-radius: 14px; padding: 12px 14px; margin: 0 0 10px; }
.done-nostore:active { background: #FFE6DE; }
.done-nostore b { font-size: 14.5px; color: #8A2B14; }
.done-nostore span { font-size: 12.5px; color: #A8503A; line-height: 1.45; }
.sheet .store-near { width: 100%; margin-bottom: 10px; }
.ps-dist { font-style: normal; font-size: 11.5px; color: var(--brand); font-weight: 700; margin-left: auto; }
/* 搜不到时的出路（用户 9-20：打错字就一点反应都没有，人会以为 App 坏了） */
.store-none { padding: 14px 12px; border: 1px dashed var(--line); border-radius: 12px;
  background: #FAFCFB; display: flex; flex-direction: column; gap: 5px; }
.store-none b { font-size: 13.5px; color: var(--ink); }
.store-none span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* 靠容错猜出来的结果，先说一句，别让人以为这就是他打的那家 */
.store-approx { font-size: 12px; color: var(--amber); font-weight: 700; padding: 2px 2px 6px; }
.store-hint { font-size: 11.5px; color: var(--muted); margin: 4px 2px 0; line-height: 1.4; }
.store-list { max-height: 190px; overflow-y: auto; margin-top: 6px; border-radius: 12px; }
.store-list:not(:empty) { border: 1px solid var(--line); background: var(--card); }
.store-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  padding: 9px 12px; border-bottom: 1px solid var(--line); }
.store-opt:last-child { border-bottom: 0; }
.store-opt b { font-size: 14.5px; }
.store-opt span { font-size: 12px; color: var(--muted); }
/* 门店编号徽标：店员认自己柜台靠这串数字，比泰文店名可靠 —— 让它在名字前面先跳出来 */
.store-opt b .store-no, .store-sel b .store-no,
.store-no { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: 6px; padding: 1px 6px; vertical-align: 1px; }
.store-sel { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  background: var(--brand-bg); border: 1px solid rgba(14,159,143,.3); }
.store-sel b { font-size: 14.5px; flex: 1; }
.store-sel span { font-size: 12px; color: var(--muted); }
.store-sel button { color: var(--muted); font-size: 15px; padding: 2px 4px; }
.doc-grid { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.doc { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px;
  border: 1.5px dashed var(--line); border-radius: 13px; background: rgba(255,255,255,.6); }
.doc.on { border-style: solid; border-color: var(--brand); background: var(--brand-bg); }
.doc-ico { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
  color: var(--brand); font-size: 17px; font-weight: 800; }
.doc-ico .ic { width: 22px; height: 22px; stroke: var(--muted); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.doc b { flex: 1; font-size: 14.5px; }
.doc i { font-style: normal; font-size: 12px; color: var(--muted); }
.doc.on i { color: var(--brand); font-weight: 700; }
/* 审核中：报单入口锁死 */
.pend-banner { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; margin-bottom: 10px;
  background: var(--amber-bg); color: var(--amber); }
.pend-banner b { font-size: 15px; }
.pend-banner span { font-size: 12.5px; color: #8a6520; }
.sell-cta.locked { filter: grayscale(.85); opacity: .6; }
.me-passbox { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; }
.me-passbox input { border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 12px; font-size: 15px; background: #fff; }
.me-pw { font-family: ui-monospace, monospace; letter-spacing: .5px; }

/* 注册表单包了真 <form>，别让它把卡片的纵向排版打断 */
#rg-form { display: flex; flex-direction: column; gap: 12px; width: 100%; }

/* 头像：有图铺满圆，没图显示名字首字（泰文名首字就是泰文字符） */
.bc-ava.has-img, .me-ava.has-img, .rk-ava.has-img { padding: 0; overflow: hidden; }
.bc-ava.has-img img, .me-ava.has-img img, .rk-ava.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-row1 { display: flex; align-items: center; gap: 12px; }
.me-row1-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.me-ava-wrap { position: relative; flex: none; width: 50px; height: 50px; padding: 0; background: none; }
.me-ava { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-size: 18px; font-weight: 800; }
/* 纯图标容器里必须清掉全局 .ic 的 margin-right:3px —— 那是给「图标+文字」行用的，
   在圆圈里参与 flex 居中会把图标推左 1.5px（用户 9-1 肉眼抓出来的） */
.doc-cam .ic, .doc-ico .ic, .sn-cam .ic { display: block; margin: 0; }
.rk-ava { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--brand-bg); color: var(--brand); font-size: 14px; font-weight: 800; }
.pd .rk-ava { width: 40px; height: 40px; font-size: 16px; margin: 2px 0; }

/* 登录三态：邮箱先行 → 在册就地展开密码 → 不在册转注册 */
.login-card .login-logo img { width: 64px; height: 64px; border-radius: 50%; display: block; margin: 0 auto; object-fit: cover; }
#lg-email.locked { background: var(--brand-bg); border-color: rgba(14,159,143,.35); font-weight: 600; }
#lg-pass-zone { display: flex; flex-direction: column; gap: 12px; }

/* 定位找门店：店员站在自己柜台里按一下，比打泰文店名快 */
.store-near { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-top: 6px; padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--line);
  background: var(--card, #fff); color: var(--brand); font-size: 13px; font-weight: 600; }
.store-near:disabled { opacity: .55; }
.store-near .ic { width: 16px; height: 16px; stroke: var(--brand); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.store-opt { position: relative; padding-right: 62px; }
.store-opt em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--brand); }

/* 证件卡右侧的相机入口 */
.doc-cam { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--brand-bg, rgba(0,0,0,.04)); }
.doc-cam .ic { width: 17px; height: 17px; stroke: var(--brand); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.doc.on .doc-cam { opacity: .45; }
.doc-ico .doc-ok { font-size: 16px; font-weight: 800; color: var(--brand); line-height: 1; }

/* 拍照 / 从相册选 二选一 */
.pick-ov { position: fixed; inset: 0; z-index: 90; background: rgba(15,18,22,.42);
  display: flex; align-items: flex-end; opacity: 0; transition: opacity .18s ease; }
.pick-ov.on { opacity: 1; }
.pick-sheet { width: 100%; padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--card, #fff); border-radius: 18px 18px 0 0;
  transform: translateY(14px); transition: transform .2s cubic-bezier(.22,.9,.3,1); }
.pick-ov.on .pick-sheet { transform: none; }
.pick-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 12px;
  border-radius: 12px; text-align: left; }
.pick-opt:active { background: rgba(0,0,0,.05); }
.pick-opt .ic { width: 20px; height: 20px; stroke: var(--brand); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pick-opt b { font-size: 15px; font-weight: 600; }
.pick-cancel { width: 100%; margin-top: 6px; padding: 13px; border-radius: 12px;
  background: rgba(0,0,0,.04); color: var(--muted); font-size: 14.5px; font-weight: 600; }

/* ── 第二步：扫 S/N 即录入 ── */
/* 整块虚线区本身就是那个扫码按钮：里面不再套带框的按钮 —— 套了之后
   点框外没反应，店员分不清哪儿能点（用户 8-26） */
.u-card { position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 18px; cursor: pointer;
  background: var(--brand-bg); border: 1.5px dashed rgba(14,159,143,.45); }
.u-card:active { background: rgba(14,159,143,.13); }
.u-count { font-size: 13.5px; font-weight: 700; }
.u-count:empty { display: none; }
/* 扫码＝可点的作业面，不是第二个实心按钮。
   两个同色同宽的实心按钮上下叠会打架（用户反馈），所以这里用浅底+虚线的「面」，
   和底下实心的提交按钮天然分层：面是「在这儿干活」，按钮是「干完了交」。 */
/* 扫码提示区：没有自己的框，因为整块虚线区就是它的框 */
.u-scanzone { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 8px 6px; color: var(--brand-dark); pointer-events: none; }
.u-scanzone .ic { width: 28px; height: 28px; flex: none; stroke: var(--brand); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.u-scanzone b { font-size: 17px; font-weight: 800; line-height: 1.2; }
.u-manual { width: 100%; padding: 8px; color: var(--brand-dark); opacity: .72; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px; position: relative; z-index: 2; }
.u-list { display: flex; flex-direction: column; gap: 8px; }
.u-empty { padding: 18px 0; text-align: center; color: var(--muted); font-size: 13.5px; }
/* 允许换行：补选型号的下拉挤到第二行去，第一行的宽度全归机身码 */
/* 结果靠整行的颜色说话，不用 ✅/❌ 符号：emoji 各系统长得不一样，
   还占掉本该留给机身码的宽度（用户 8-26）。
   ⚠ 验过的不能用浅绿底 —— 外框本来就是品牌浅绿(#E5F5F3)，绿底压在上面看不出来，
   所以用白底 + 绿边；出问题的才用红底红边，一眼就跳出来。 */
.u-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 13px; background: var(--card); border: 2px solid transparent; }
.u-item.ok { border-color: var(--green); }
.u-item.bad { background: var(--red-bg); border-color: var(--red); }
.u-item.pend { border-color: var(--line); }

.u-item-main { flex: 1; min-width: 0; }
/* S/N 是要拿去跟盒子上的标签逐字比对的（万一解码解错了，人得能核出来），
   所以它是这一行的主角，型号退成副标题。等宽字 + 拉开字距，1/l、0/O 才分得清。
   绝不省略号截断 —— 截掉一半的机身码等于没法核（用户 8-26）。 */
.u-sn { font: 800 18px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1.6px; color: var(--ink); word-break: break-all; }
.u-prod { margin-top: 3px; }
.u-prod b { font-size: 13px; font-weight: 700; color: var(--muted); }
.u-prod span { font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.u-warn { font-style: normal; color: var(--amber); font-size: 12px; }
.u-pend { font-style: normal; color: var(--muted); font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px; }
/* 不在库要先看见 ❌，再给他补选的机会，不能只给下拉让人以为一切正常（用户 8-26） */
/* 第三步逐台结果：哪台算钱、哪台待核实，得在这儿说清楚 ——
   不然店员只看到一个总额，不知道刚才那台扫错的到底怎么了（用户 8-26） */
.done-units { margin: 14px 0 2px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
/* 上下排，不左右挤：横排时状态文字会把机身码挤断行（实测 FH5279718740
   被切成 FH527971874 / 0），断开的码没法核对 */
.du { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 11px; border-radius: 11px; background: rgba(127,127,127,.07); }
.du { border: 2px solid transparent; }
.du.ok { background: var(--card); border-color: var(--green); }
.du.no { background: var(--amber-bg); border-color: var(--amber); }
.du-sn { font: 700 15px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1px; color: var(--ink); white-space: nowrap; }
.du-st { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.du.no .du-st { color: var(--amber); font-weight: 700; }
.du-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.u-why { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--red); }
.u-why.pend { color: var(--muted); font-weight: 400; }
.u-sku { flex-basis: 100%; border: 0; background: rgba(13,74,67,.06); border-radius: 9px;
  height: 38px; padding: 0 10px; font-size: 14px; }
.u-del { flex: none; color: var(--muted); font-size: 15px; padding: 4px 6px; }
.est-hint { margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.rec-recog { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 2px 7px; }
.rec-recog .spin { width: 10px; height: 10px; border-width: 1.5px; }
.rec-recog.wait { color: var(--muted); background: rgba(127,127,127,.12); }
.rec-recog.ok   { color: var(--green); background: var(--green-bg); }
.rec-recog.warn { color: var(--amber); background: var(--amber-bg); }
.rec-recog.bad  { color: var(--red);   background: var(--red-bg); }

/* 返回做成胶囊按钮：原来只是 14px 文字链，和右上角 ✕ 一样高、离得近，
   点错 ✕ 会直接关掉抽屉丢掉整单（用户反馈）。给足 44px 触摸高度。 */
.back-btn { display: inline-flex; align-items: center; align-self: flex-start; min-height: 40px; padding: 0 16px; margin-bottom: 12px;
  border-radius: 99px; background: var(--brand-bg); font-size: 15px; font-weight: 700;
  border: 1px solid rgba(14,159,143,.22); }
/* ⚠ #scan-sheet-body 是 flex 列，子元素默认 stretch 会把它拉成整行宽、一直伸到 ✕ 底下 */
.back-btn:active { background: rgba(14,159,143,.18); }

/* 预计返点独占一行放在提交上方：原来挤在提交左边那一小格，
   ฿12,345 这种量级会把提交按钮压到 min-width 死线甚至溢出。
   现在标签左、数字右，数字再长也只是往左伸，不挤任何东西。 */
.u-submit { width: 100%; }

/* 提交成功：只报「成了」和「赚了多少」，别在这儿讲审核结论——后台还没审 */
.ok-title { font-weight: 800; font-size: 19px; }
.ok-sub { margin-top: 6px; font-size: 13px; color: var(--muted); }
.ok-next { margin-top: 14px; padding: 10px 12px; border-radius: 12px;
  background: rgba(127,127,127,.08); font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ok-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ok-acts .btn-primary { width: 100%; }
.btn-ghost { width: 100%; min-height: 44px; border-radius: 13px; background: transparent;
  color: var(--brand-dark); font-size: 14.5px; font-weight: 700; }
.btn-ghost:active { background: var(--brand-bg); }

/* 拍小票：拍照是这一屏唯一的主操作，整宽、带图标、坐在拇指区 */
.se-primary { display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 58px; font-size: 17px; }
.se-primary svg { width: 24px; height: 24px; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.confirm-foot .btn-ghost { margin-top: 8px; }

/* 拍糊了的确认屏 */
.retake { text-align: center; padding: 16px; }
.rt-img { width: 100%; max-height: 260px; overflow: hidden; border-radius: 14px; background: rgba(127,127,127,.08); }
.rt-img img { width: 100%; height: 100%; max-height: 260px; object-fit: contain; display: block; }
.rt-why { margin-top: 12px; font-size: 16px; font-weight: 800; color: var(--amber); }
.rt-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ── 产品详情：柜台作战卡 ── */
/* 吸顶条：滚到哪都能报价、都知道这台赚多少 */
.pd-bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 8px 10px; border-radius: 14px;
  background: rgba(252,254,253,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(20,70,64,.10); }
.pd-thumb { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: 10px; background: rgba(127,127,127,.08); }
.pd-bar-txt { flex: 1; min-width: 0; }
.pd-sku { font-size: 15px; font-weight: 800; }
.pd-cat { font-size: 11.5px; color: var(--muted); }
.pd-bar-num { text-align: right; flex: none; }
.pd-bar-num .pd-price { font-size: 15px; font-weight: 800; color: var(--ink); }
.pd-reb { font-size: 12.5px; font-weight: 800; color: var(--amber); }
.pd-name { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 2px 10px; }
.pd-hint { font-size: 11.5px; color: var(--muted); margin: -2px 0 8px; }

/* 话术做成可点的大字块：店员是当着顾客的面念，字要够大 */
.say { display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 12px 14px;
  border-radius: 12px; background: var(--brand-bg); color: var(--ink);
  font-size: 15px; line-height: 1.6; }
.say:active { background: rgba(14,159,143,.18); }
.say.sm { display: inline-block; width: auto; margin: 8px 0 0; padding: 6px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--brand-dark); }

.demo { margin: 0; padding-left: 22px; }
.demo li { font-size: 14.5px; line-height: 1.65; margin-bottom: 8px; }
.demo li::marker { color: var(--brand); font-weight: 800; }

/* 参数折叠：顾客追问才查，别占正面位置 */
.acc-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.acc-card > summary::-webkit-details-marker { display: none; }
.acc-card > summary::after { content: '▾'; color: var(--muted); font-size: 13px; }
.acc-card[open] > summary::after { content: '▴'; }

.pd-lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(10,20,18,.88);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.pd-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }

/* 详情页三块：怎么卖 / 宣传图 / 视频 */
.pd-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.pd-tab { flex: 1; min-height: 42px; border-radius: 12px; background: rgba(127,127,127,.09);
  color: var(--muted); font-size: 14.5px; font-weight: 700; }
.pd-tab.on { background: var(--brand); color: #fff; }
.pd-empty { text-align: center; color: var(--muted); font-size: 13.5px; padding: 28px 16px; }
/* 瀑布流，按原图比例排：素材有方有横有各种尺寸，
   原来写死 aspect-ratio:3/4 + cover 会裁图 —— 实测 113 张里 112 张是 1:1，
   等于把正方形海报裁掉 25% 高度，泰文标题正好在那一截。宣传图是要发给顾客的，不能裁。 */
.asset-grid { columns: 2; column-gap: 10px; }
.asset { break-inside: avoid; margin-bottom: 10px; border-radius: 12px; overflow: hidden;
  background: rgba(127,127,127,.08); }
.asset img { width: 100%; height: auto; display: block; }
.asset-get { width: 100%; min-height: 40px; background: var(--brand-bg); color: var(--brand-dark);
  font-size: 13px; font-weight: 700; }
.vid { margin-bottom: 12px; }
.vid video { width: 100%; border-radius: 12px; display: block; background: #000; }
.vid-t { margin-top: 6px; font-size: 13.5px; font-weight: 700; }

/* 详情页顶部大图横滚：一进来第一眼就是它，店员直接划给顾客看 */
.pd-hero { position: relative; margin: 2px -16px 6px; }
.pd-hero-scroll { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pd-hero-scroll::-webkit-scrollbar { display: none; }
/* 统一高度、宽度随比例走：素材有方有横有竖，定死比例就会裁掉图上的泰文标题 */
/* 手机上要占到大半个屏才有冲击力；object-fit:contain 保证横图竖图都不裁也不拉伸
   （素材实测有 1:1、有横幅、有竖版长图，只锁高度会被 max-width 压变形） */
.pd-hero-scroll img { flex: none; height: clamp(230px, 72vw, 300px); width: auto; max-width: 90%;
  object-fit: contain; border-radius: 14px; scroll-snap-align: center; cursor: zoom-in;
  background: rgba(127,127,127,.08); box-shadow: 0 6px 20px rgba(20,70,64,.13); }
.pd-hero-n { position: absolute; right: 26px; bottom: 16px; pointer-events: none;
  background: rgba(23,50,47,.66); color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px; letter-spacing: .3px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pd-hero-tip { text-align: center; margin: 0 0 12px; }
.asset img { cursor: zoom-in; }

/* 管理账号误登店员端时的说明页：原来是闷头跳后台，人不知道发生了什么 */
.role-notice { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: var(--bg); }
.rn-card { width: 100%; max-width: 380px; background: var(--card); border-radius: 20px;
  padding: 30px 22px 22px; text-align: center; box-shadow: 0 10px 34px rgba(20,70,64,.12); }
.rn-ico { font-size: 40px; line-height: 1; }
.rn-title { margin-top: 12px; font-size: 19px; font-weight: 800; }
.rn-sub { margin: 8px 0 20px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.rn-card .btn-primary { width: 100%; }
.rn-card .btn-ghost { width: 100%; margin-top: 10px; }

/* 第三步：只剩金币炸开入袋这一个动作。
   「成没成、哪台有问题」都在「我的销售」里看，这一屏不再堆字（用户 8-26） */
.done-fx { position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 34px 16px 42px; text-align: center; }
.df-ring { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,214,102,.30) 0%, rgba(255,214,102,0) 70%);
  animation: dfPulse 1.5s ease-out; pointer-events: none; }
@keyframes dfPulse { 0% { transform: scale(.3); opacity: 0 } 35% { opacity: 1 } 100% { transform: scale(1.5); opacity: 0 } }
/* 真 3D 厚币（用户 8-26 选的 A 版，设计稿见 design/coins/A-3d-thick.html）。
   两层拆开：.bc-spin 管「入场猛翻然后刹住」，.bc-tilt 管「停下后轻轻晃」——
   混一条动画里会互相覆盖，金额永远停不正。 */
.big-coin { --r: clamp(64px, 20.5vw, 84px); --th: 13px; --seg: 60;
  position: relative; height: calc(var(--r) * 2 + 40px);
  perspective: 900px; perspective-origin: 50% 42%; }
/* will-change 让浏览器提前给这两层开合成层，不然入场那 3.5 圈是边转边现算 */
.bc-spin { position: absolute; left: 50%; top: calc(var(--r) + 6px); width: 0; height: 0;
  transform-style: preserve-3d; will-change: transform;
  animation: bcIn 1.9s cubic-bezier(.12,.85,.2,1) both; }
.bc-tilt { transform-style: preserve-3d; will-change: transform;
  animation: bcIdle 5.5s 1.9s ease-in-out infinite alternate; }
@keyframes bcIn { from { transform: rotateY(1260deg) scale(.4) } to { transform: rotateY(0) scale(1) } }
@keyframes bcIdle { from { transform: rotateY(-17deg) rotateX(4deg) } to { transform: rotateY(17deg) rotateX(-4deg) } }

.bc-face { position: absolute; left: 50%; top: 50%;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%;
  display: grid; place-items: center; backface-visibility: hidden; overflow: hidden;
  background:
    radial-gradient(circle at 34% 27%, #FFF8E2 0%, rgba(255,248,226,0) 44%),
    conic-gradient(from 205deg, #A96E05, #FFE9A3, #D9A122, #FFF6D8, #B8790A, #FFDF86, #A96E05);
  /* 币面两道凸起边圈：外亮内暗，是「压铸出来」的关键，没有它就是个圆色块 */
  box-shadow: inset 0 0 0 5px rgba(255,247,214,.55), inset 0 0 0 7px rgba(138,90,3,.45),
              inset 0 0 0 9px rgba(255,247,214,.3); }
.bc-front { transform: translateZ(calc(var(--th) / 2)); }
.bc-back  { transform: rotateY(180deg) translateZ(calc(var(--th) / 2)); }
/* 珠圈：一圈小凸点，真币都有 */
.bc-beads { position: absolute; inset: 13%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,250,225,.55) 0deg 1.6deg, rgba(138,90,3,.28) 1.6deg 3.2deg);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%, #000 50%, transparent 51%);
          mask: radial-gradient(circle, transparent 46%, #000 47%, #000 50%, transparent 51%); }
/* 金币背面 = SKG 圆形商标（国内版 9-24 起替换泰国版的莲花，莲花是泰国那边的标识）。
   bc- 前缀在这个文件里是「bank-card」的意思，金币的东西别蹭这个前缀。 */
.coin-mark { position: absolute; inset: 26%; border-radius: 50%;
  background: url('/icons/skg-logo.png') center/contain no-repeat;
  box-shadow: 0 0 0 2px rgba(255,251,230,.7), 0 1.5px 3px rgba(92,56,0,.35); }
/* 币缘：60 片竖条围一圈，每片自带滚花纹 + 圆柱受光。
   ⚠ 轴别搞错：rotateY+translateZ 拼出来是个「鼓」，正面看就是一根横杠穿过币心。
   正确是 rotateZ 定角 → translateY 推到边 → rotateX(90deg) 立起来。 */
.bc-edge { position: absolute; left: 50%; top: 50%;
  width: calc(6.2832 * var(--r) / var(--seg) * 1.08);   /* 周长/片数，多 8% 让相邻片压边免露缝 */
  height: var(--th);
  margin: calc(var(--th) / -2) 0 0 calc(6.2832 * var(--r) / var(--seg) * -0.54);
  background:
    repeating-linear-gradient(90deg, rgba(255,250,225,.55) 0 1px, rgba(120,76,0,.5) 1px 2.2px),
    linear-gradient(#F3CB5B, #7E5202 48%, #F3CB5B);
  transform: rotateZ(calc(var(--i) * (360deg / var(--seg)))) translateY(calc(var(--r) * -1)) rotateX(90deg); }
/* 地面投影：币才像立在那儿，不是浮在半空 */
.bc-shadow { position: absolute; left: 50%; top: calc(var(--r) * 2 + 14px);
  width: calc(var(--r) * 1.9); height: 20px; margin-left: calc(var(--r) * -0.95); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(90,60,0,.38), rgba(90,60,0,0) 70%);
  animation: bcShIn 1.9s cubic-bezier(.12,.85,.2,1) both,
             bcShIdle 5.5s 1.9s ease-in-out infinite alternate; }
@keyframes bcShIn { from { transform: scaleX(.25); opacity: 0 } to { transform: scaleX(1); opacity: 1 } }
@keyframes bcShIdle { from { transform: scaleX(.9) } to { transform: scaleX(1.05) } }
.df-amt { position: relative; z-index: 2; font-weight: 900; letter-spacing: -1px;
  font-size: clamp(26px, 8.5vw, 34px); color: #5C3800;
  text-shadow: 0 2px 0 rgba(255,251,230,.95), 0 -2px 2px rgba(80,48,0,.6); }
.df-sub { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--muted);
  animation: dfPop .5s .12s cubic-bezier(.2,1.5,.4,1) both; }
/* 特效区在明细上方，收紧一点别把明细挤到屏外 */
#scan-sheet.mini .done-fx { padding: 18px 16px 16px; }
#scan-sheet.mini .df-amt { font-size: 38px; }
/* 大币 / 飘落小币 / 爆开币共用同一张「币面」：同一套锥形渐变 + 双圈压边。
   缩到 11px 也还认得出是那枚币，靠的就是这两道圈。 */
.coin-skin {
  background:
    radial-gradient(circle at 34% 27%, #FFF8E2 0%, rgba(255,248,226,0) 44%),
    conic-gradient(from 205deg, #A96E05, #FFE9A3, #D9A122, #FFF6D8, #B8790A, #FFDF86, #A96E05);
  box-shadow: inset 0 0 0 1.5px rgba(255,247,214,.65), inset 0 0 0 2.5px rgba(138,90,3,.5); }

/* 中间的常驻动效：金币从下往上缓缓浮，光晕在底部呼吸。
   撑满剩余空间（所以要 flex:1，覆盖 #scan-sheet-body>* 的 flex-shrink:0）。
   只动 transform/opacity —— 合成器就能画完，不占主线程，店员一天看几十次也不卡。 */
/* 铺满整个抽屉、垫在内容底下：金币在全区飘，经过明细卡时从卡背后过去
   （卡是实底的，天然挡住）——用户 8-26「全区都有，除了卡片那边」。
   ⚠ 要 absolute 铺满，父级 #scan-sheet-body 必须 position:relative。 */
.fx-space { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; perspective: 600px;
  /* 入场那 1.9 秒先淡出让路：18 枚带虚焦的币和大币的 3.5 圈旋转抢合成资源，
     是「转一半卡一下」的另一半原因。等币落定再浮现，观感上也更有层次。 */
  opacity: 0; animation: fxFadeIn .8s 1.7s ease-out forwards; }
@keyframes fxFadeIn { to { opacity: 1 } }
#scan-sheet-body { position: relative; }
/* 内容压在动效之上 */
.done-fx, .done-units, .dup-warn, .ok-acts { position: relative; z-index: 1; }
/* 前景层：压在内容之上。只放最近的那几枚，且不虚焦 —— 前景虚焦会显得脏。
   pointer-events 已在 .fx-space 关掉，挡不住点击。 */
.fx-space.fx-front { z-index: 2; }
.fx-space.fx-front::after { display: none; }   /* 光晕只要一层，前景再来一层会糊成一片 */
.fx-space::after {                       /* 底部那团呼吸的金色光晕 */
  content: ''; position: absolute; left: 50%; bottom: -40%; width: 150%; padding-top: 100%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,199,64,.20) 0%, rgba(255,199,64,.06) 45%, rgba(255,199,64,0) 70%);
  animation: fxAura 3.6s ease-in-out infinite; }
@keyframes fxAura { 0%,100% { opacity: .55; transform: translateX(-50%) scale(.92) } 50% { opacity: 1; transform: translateX(-50%) scale(1.06) } }
/* 币面（::before）只管翻，外壳（i）只管升 —— 必须拆成两条动画：
   翻转要加速再减速（真硬币抛出去就是这样），升起必须匀速；
   混在一条里，升起会跟着忽快忽慢，看着像在抖。
   缓动配对抄自自有动效库 fx.kang-kang.com 的 ldr-circle52「coin-flip」
   （本地 research/20260305-网页风格库/animations/gsap-cookbook/libs/loaders.css）。
   远近靠 尺寸/亮度/虚焦/速度 四样一起拉开，少一样都还是「一堆一样的球」。 */
.fx-space i { position: absolute; bottom: -32px; width: var(--sz,16px); height: var(--sz,16px);
  opacity: 0; animation: fxRise var(--dur,6s) linear var(--dly,0s) infinite;
  will-change: transform, opacity; }
.fx-space i::before {
  content: ''; display: block;
  width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, #FFF8E2 0%, rgba(255,248,226,0) 44%),
    conic-gradient(from 205deg, #A96E05, #FFE9A3, #D9A122, #FFF6D8, #B8790A, #FFDF86, #A96E05);
  box-shadow: inset 0 0 0 1.5px rgba(255,247,214,.65), inset 0 0 0 2.5px rgba(138,90,3,.5);
  filter: drop-shadow(0 0 calc(var(--sz,16px) * .35) rgba(245,195,59,.55));
  filter: blur(var(--blur,0px));            /* 静态虚焦，不进关键帧 —— 逐帧重算模糊会拖垮 GPU */
  animation: fxFlip var(--spin,2.6s) linear var(--dly,0s) infinite;
  will-change: transform; }
/* 越飘越大 = 越飘越近。近景放大 1.5 倍、远景几乎不变（--grow），
   这条比单纯给不同尺寸更能做出远近 —— 尺寸只是静态差别，缩放是运动中的透视。 */
@keyframes fxRise {
  0%   { transform: translateY(0) scale(calc(var(--grow,1.2) * .55)); opacity: 0 }
  10%  { opacity: var(--op,.9) }
  72%  { opacity: calc(var(--op,.9) * .6) }
  100% { transform: translateY(calc(var(--rise,260px) * -1)) scale(var(--grow,1.2)); opacity: 0 }
}
/* ⚠ 转轴要斜（rotate3d 的 x 分量不为 0）：纯 rotateY 转到 90° 时币是正侧面，
   会压成一条线 —— 远景那些小币直接看不见了（实测截图里一半都成了细线）。
   轴斜过来之后侧面是个椭圆，始终有面积。 */
@keyframes fxFlip {
  0%, 100% { animation-timing-function: cubic-bezier(.5,0,1,.5) }    /* 起手加速 */
  0%   { transform: rotate3d(.45,1,0,0deg) }
  50%  { transform: rotate3d(.45,1,0,900deg); animation-timing-function: cubic-bezier(0,.5,.5,1) }  /* 半程减速 */
  100% { transform: rotate3d(.45,1,0,1800deg) }
}
@media (prefers-reduced-motion: reduce) {   /* 晕动症/省电模式：只留静态光晕 */
  .fx-space i, .fx-space i::before { animation: none; opacity: 0 }
  .fx-space::after, .bc-face::after { animation: none }
  .bc-spin { animation: none } .bc-face { animation: none }
}
/* 「查看记录」沉到最底、降成一行下划线小字：可有可无的出口，
   做成实心按钮会跟金额抢注意力（用户 8-26） */
.ok-acts { display: flex; justify-content: center; margin-top: auto; padding-top: 10px; }
.link-sm { padding: 8px 10px; color: var(--muted); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px; background: none; }

/* 我的证件：注册传的三张 + 审核结论。
   以前店员传完就再也看不到，被驳回也不知道驳的是哪张、为什么（用户 8-27） */
.kyc-box { margin-top: 6px; }
.kyc-head { font-weight: 700; }
.kyc-st { margin: 2px 0 10px; padding: 9px 12px; border-radius: 11px;
  font-size: 13px; font-weight: 700; line-height: 1.5; }
.kyc-st i { display: block; font-style: normal; font-weight: 400; font-size: 12.5px; margin-top: 3px; opacity: .85; }
.kyc-st.ok   { background: var(--green-bg); color: var(--green); }
.kyc-st.bad  { background: var(--red-bg);   color: var(--red); }
.kyc-st.wait { background: var(--amber-bg); color: var(--amber); }
.kyc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kyc-doc { display: flex; flex-direction: column; gap: 5px; align-items: center; text-align: center; }
/* ⚠ 证件是横向拍的，用固定高度 + width:100% + cover：
   给死宽高比会把身份证号那一条裁掉，而那正是审核要看的 */
.kyc-doc img { width: 100%; height: 62px; object-fit: cover; border-radius: 9px;
  background: rgba(127,127,127,.1); cursor: zoom-in; }
.kyc-doc b { font-size: 11.5px; font-weight: 700; }
.kyc-doc i { font-style: normal; font-size: 11px; color: var(--muted); }
.kyc-doc.need img { outline: 2px solid var(--red); outline-offset: 1px; }
.kyc-re { font-size: 11.5px; font-weight: 700; color: var(--red);
  background: var(--red-bg); border-radius: 99px; padding: 4px 9px; }
.kyc-meta { margin-top: 9px; font-size: 11.5px; color: var(--muted); }

/* ---------- 健康小警卫（AI 问答）回答的四层结构 ---------- */
/* 说 = 能直接念给顾客听的，最显眼；详 = 展开才看；忌 = 安全禁忌，必须跳出来且不可折叠 */
.gd-hello { color: var(--muted); font-size: 14px; line-height: 1.7; }
.gd-say { font-size: 15.5px; line-height: 1.6; }
.gd-warn { margin-top: 10px; background: var(--amber-bg); border-left: 3px solid var(--amber);
  border-radius: 8px; padding: 9px 12px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.gd-warn b { display: block; color: var(--amber); font-size: 12.5px; margin-bottom: 3px; letter-spacing: .02em; }
.gd-more { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.gd-more summary { color: var(--brand); font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; }
.gd-more summary::-webkit-details-marker { display: none; }
.gd-more summary::after { content: ' ▾'; }
.gd-more[open] summary::after { content: ' ▴'; }
.gd-more > div { margin-top: 7px; font-size: 14px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }
.gd-src { margin-top: 9px; font-size: 12px; color: var(--muted); }
.gd-src a { color: var(--brand); font-weight: 700; margin-left: 5px; text-decoration: none;
  background: var(--brand-bg); border-radius: 6px; padding: 2px 7px; }
/* 追问做成可点的，店员顺着往下问不用打字 —— 泰语打字在柜台是真的慢 */
.gd-next { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gd-next button { background: #fff; border: 1px solid var(--brand); color: var(--brand);
  border-radius: 99px; padding: 5px 12px; font-size: 12.5px; font-family: inherit; cursor: pointer; }
.gd-next button:active { background: var(--brand-bg); }

/* 产品详情页底部的入口卡 */
.gd-entry .pd-hint { margin-bottom: 8px; }
.gd-ask { width: 100%; background: var(--brand-bg); border: 1px dashed var(--brand); color: var(--brand-dark);
  border-radius: 12px; padding: 13px; font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; }
.gd-ask:active { background: #d8efec; }

/* 头像手工裁剪层（9-1）：拖动定位 + 滑杆缩放，确认才裁 256 上传 */
.crop-ov { position: fixed; inset: 0; z-index: 99; background: rgba(10,20,19,.78);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s; }
.crop-ov.on { opacity: 1; }
.crop-box { background: #fff; border-radius: 16px; padding: 16px; max-width: 92vw;
  display: flex; flex-direction: column; gap: 10px; align-items: center; }
.crop-box > b { font-size: 15px; }
.crop-vp { position: relative; overflow: hidden; border-radius: 12px; background: #111;
  touch-action: none; cursor: grab; }
.crop-vp img { position: absolute; left: 50%; top: 50%; max-width: none; user-select: none; pointer-events: none; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0,0,0,.45); pointer-events: none; }
.crop-hint { font-size: 12px; color: var(--muted); }
.crop-zoom { width: 85%; accent-color: var(--brand); }
.crop-btns { display: flex; gap: 10px; width: 100%; }
.crop-btns button { flex: 1; padding: 11px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; font-size: 14px; }
.crop-btns .crop-ok { background: var(--brand); color: #fff; border: none; font-weight: 600; }

/* 头像四选单 + 电脑取景器（9-1） */
.shot-video { width: min(300px, 78vw); aspect-ratio: 4/3; object-fit: cover;
  border-radius: 12px; background: #111; transform: scaleX(-1); } /* 自拍预览镜像 */
.pick-opt.pick-danger b { color: var(--red); }
.pick-opt.pick-danger .ic { stroke: var(--red); }

/* 登录页注册提示（9-1）：注册入口=输入框本身，点破一句免得新人找按钮 */
.login-hint { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }