/* ============================================================
码池 · 码商端（移动端）设计系统 v2
风格源：线上 my-receive-order / receive-order 页面
主渐变 #ff5f4d → #ff8a3d ｜ 选中 #d22018 ｜ 金额红 #ff3b30
============================================================ */
:root{
/* 品牌 */
--brand:#ff5f4d;
--brand-2:#ff8a3d;
--brand-deep:#d22018;
--brand-grad:linear-gradient(135deg,#ff5f4d 0%,#ff8a3d 100%);
--brand-grad-90:linear-gradient(90deg,#ffd2c9,#ff8a3d);
--brand-soft:#ffd2c9;
--brand-tint:#fffaf7;
--brand-line:#ffecdf;
/* 语义 */
--red:#ff3b30;
--green:#34c759;
--green-soft:#e6f7ea;
--blue:#3b6ef0;
--blue-tint:#eef3ff;
--wx:#1aad19; --wx-tint:#e8f7ec;
--ali:#1677ff; --ali-tint:#e8f2ff;
--bank:#e8730c; --bank-tint:#fff1e6;
--h5:#7a5af8; --h5-tint:#f3eeff;
--ysf:#0ba5ec; --ysf-tint:#eef7ff;
/* 中性 */
--t1:#222;
--t2:#555;
--t3:#666;
/* 优化：原 #888/#aaa/#b0b4ba 在白底对比度只有 2.0~3.5:1，12px 小字读不清，
统一压深到 4.5:1 以上（WCAG AA） */
--t4:#6f7684;
--t5:#878e9c;
--t6:#959ba8;
--nav:#6f7684;
--line:#e4e6eb;
--line-soft:#f0f1f4;
--bg:#f5f6f8;
--card:#fff;
/* 圆角 / 阴影 */
--r-sm:10px; --r:14px; --r-lg:16px; --r-xl:20px; --r-full:999px;
--sh:0 2px 10px rgba(0,0,0,.05);
--sh-up:0 6px 18px rgba(0,0,0,.08);
--sh-brand:0 8px 20px rgba(255,95,77,.28);
--safe-b:env(safe-area-inset-bottom,0px);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body{
margin:0; padding:0 12px calc(86px + var(--safe-b));
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
background:var(--bg); color:var(--t1); font-size:14px; line-height:1.5;
max-width:430px; margin-left:auto; margin-right:auto;
}
@media (min-width:520px){ body{ box-shadow:0 0 0 1px var(--line); } }
[v-cloak]{ display:none; }
input,button,textarea,select{ font-family:inherit; }
a{ text-decoration:none; color:inherit; }
.num{ font-variant-numeric:tabular-nums; }
/* ================= 顶部工具条 ================= */
.topbar{ display:flex; justify-content:flex-end; gap:8px; padding:10px 2px 0; }
.btn-mini{
position:relative; min-height:34px; padding:7px 13px;
font-size:12.5px; border-radius:16px; border:1px solid var(--line);
background:#fff; color:var(--t2); display:inline-flex; align-items:center; gap:4px;
}
.btn-mini:active{ background:#f7f8fa; }
.btn-mini.warn{ color:var(--brand); border-color:var(--brand-soft); }
/* ================= 渐变头卡（核心组件） ================= */
.wallet{
margin:10px 0 12px; padding:16px 18px; border-radius:var(--r-lg); color:#fff;
background:var(--brand-grad); box-shadow:var(--sh-brand); position:relative; overflow:hidden;
}
.wallet::after{
content:""; position:absolute; right:-46px; top:-56px; width:170px; height:170px; border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.26),rgba(255,255,255,0) 68%); pointer-events:none;
}
.wallet .row{ display:flex; justify-content:space-between; align-items:flex-end; position:relative; z-index:1; }
.wallet .label{ font-size:12px; opacity:.9; }
.wallet .big{ font-size:30px; font-weight:700; letter-spacing:.4px; line-height:1.2; }
.wallet .big em{ font-size:17px; font-style:normal; font-weight:600; margin-right:2px; }
.wallet .sub{ font-size:13px; opacity:.95; }
.switch-row{
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.25);
position:relative; z-index:1;
}
.switch-row .t{ font-size:14px; }
.switch-row .d{ font-size:11.5px; opacity:.85; margin-top:1px; }
/* iOS 开关（原样式还原） */
.sw{ position:relative; width:50px; height:28px; border-radius:14px; background:rgba(255,255,255,.35); transition:.2s; flex:0 0 auto; }
.sw.on{ background:#fff; }
.sw i{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#ff6a4d; transition:.2s; display:block; }
.sw.on i{ left:25px; background:var(--brand); }
/* ================= 卡片 ================= */
.card{ background:#fff; border-radius:var(--r-lg); padding:16px; margin-bottom:12px; box-shadow:var(--sh); position:relative; }
.card.urgent{ box-shadow:0 0 0 2px var(--brand) inset, 0 6px 18px rgba(255,95,77,.18); }
.card.flat{ box-shadow:none; }
.card-t{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.card-t h3{ margin:0; font-size:14.5px; font-weight:600; }
.card-t .more{ font-size:12.5px; color:var(--t5); display:inline-flex; align-items:center; gap:2px; }
/* 段落标题 */
.sec{ display:flex; align-items:center; gap:8px; margin:18px 2px 10px; font-size:13px; color:var(--t4); }
.sec .line{ flex:1; height:1px; background:var(--line); }
/* ================= 通道 chip / 状态 ================= */
.chip{ font-size:12px; padding:3px 9px; border-radius:10px; background:var(--blue-tint); color:var(--blue); display:inline-block; line-height:1.4; }
.chip.wx{ background:var(--wx-tint); color:var(--wx); }
.chip.ali{ background:var(--ali-tint); color:var(--ali); }
.chip.bank{ background:var(--bank-tint); color:var(--bank); }
.chip.h5{ background:var(--h5-tint); color:var(--h5); }
.chip.ysf{ background:var(--ysf-tint); color:var(--ysf); }
.chip.gray{ background:#f2f3f5; color:var(--t4); }
.st{ font-size:12px; padding:2px 8px; border-radius:9px; display:inline-block; }
.st.ok{ background:var(--green-soft); color:var(--green); }
.st.wait{ background:#fff2e8; color:var(--brand-2); }
.st.warn{ background:#fff7e6; color:#e8a33d; }
.st.fail{ background:#fdecea; color:var(--red); }
.st.gray{ background:#f2f3f5; color:var(--t4); }
/* ================= 金额 ================= */
.amount{ font-size:40px; font-weight:800; color:var(--red); line-height:1.1; margin:10px 0 2px; letter-spacing:-.5px; }
.amount em{ font-size:18px; font-weight:600; font-style:normal; margin-right:2px; }
.amount.sm{ font-size:24px; margin:0; }
/* ================= 进度条 / 倒计时 ================= */
.bar{ height:6px; border-radius:3px; background:#eee; overflow:hidden; margin:10px 0 6px; }
.bar i{ display:block; height:100%; border-radius:3px; background:var(--brand); transition:width .3s linear; }
.countdown{ font-size:13px; color:var(--brand); font-weight:600; }
/* ================= 滑动确认 ================= */
.slider{ position:relative; height:52px; border-radius:26px; background:#eceff3; overflow:hidden; margin-top:12px; user-select:none; touch-action:none; }
.slider .fill{ position:absolute; top:0; left:0; height:100%; width:0; background:var(--brand-grad-90); }
.slider .txt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:#9aa0a6; pointer-events:none; }
.slider .knob{
position:absolute; top:5px; left:5px; width:42px; height:42px; border-radius:50%;
background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center;
font-size:18px; box-shadow:0 3px 10px rgba(255,95,77,.45);
}
.slider.done{ background:var(--green-soft); }
.slider.done .knob{ background:var(--green); box-shadow:0 3px 10px rgba(52,199,89,.4); }
.slider.done .txt{ color:var(--green); font-weight:600; }
.slider.busy{ opacity:.7; }
/* ================= 二维码 ================= */
.qrbox{ display:flex; justify-content:center; margin:10px 0 6px; }
.qrbox img,.qrbox .ph{ width:180px; height:180px; object-fit:contain; border-radius:12px; background:#fafafa; padding:6px; }
.qrbox .ph{ display:grid; place-items:center; color:#d0d5dd; }
/* ================= 列表行 ================= */
.row-item{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.row-item:last-child{ border-bottom:0; }
.row-item .ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto; background:var(--brand-tint); color:var(--brand); }
.row-item .mid{ flex:1; min-width:0; }
.row-item .t1{ font-size:14px; color:var(--t1); font-weight:500; }
.row-item .t2{ font-size:12px; color:var(--t5); margin-top:2px; }
.row-item .right{ text-align:right; flex:0 0 auto; }
.row-item .money{ font-size:15px; font-weight:700; }
.row-item .money.in{ color:var(--green); }
.row-item .money.out{ color:var(--red); }
.row-item .arrow{ color:#c8ccd4; flex:0 0 auto; }
/* 列表（无内边距版本） */
.list{ background:#fff; border-radius:var(--r-lg); padding:0 16px; box-shadow:var(--sh); margin-bottom:12px; }
/* ================= 表单 ================= */
.form{ background:#fff; border-radius:var(--r-lg); padding:4px 16px; box-shadow:var(--sh); margin-bottom:12px; }
.field{ display:flex; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.field:last-child{ border-bottom:0; }
.field .k{ width:78px; font-size:14px; color:var(--t3); flex:0 0 auto; }
.field input,.field select{ flex:1; border:0; outline:0; font-size:16px; color:var(--t1); background:transparent; min-width:0; }
.field input::placeholder{ color:#c4c8d0; }
.field .unit{ font-size:13px; color:var(--t5); }
.field .eye{ border:0; background:transparent; padding:4px; color:var(--t5); }
/* 大号金额输入 */
.amount-input{ background:#fff; border-radius:var(--r-lg); padding:20px 16px; box-shadow:var(--sh); margin-bottom:12px; }
.amount-input .lbl{ font-size:12.5px; color:var(--t5); }
.amount-input .ipt{ display:flex; align-items:baseline; gap:6px; margin-top:8px; border-bottom:2px solid var(--brand-soft); padding-bottom:8px; }
.amount-input .ipt span{ font-size:22px; font-weight:700; color:var(--t1); }
.amount-input .ipt input{ border:0; outline:0; font-size:34px; font-weight:800; width:100%; color:var(--t1); background:transparent; }
.amount-input .ipt input::placeholder{ color:#d7dae0; font-weight:700; }
/* ================= 按钮 ================= */
.btn{
display:flex; align-items:center; justify-content:center; gap:6px;
height:48px; border:0; border-radius:var(--r); font-size:16px; font-weight:600;
color:#fff; background:var(--brand-grad); box-shadow:0 6px 16px rgba(255,95,77,.3); width:100%;
}
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ background:#f0c9c3; box-shadow:none; }
.btn.line{ background:#fff; color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand-soft); }
.btn.gray{ background:#f2f3f5; color:var(--t3); box-shadow:none; }
.btn.sm{ height:34px; font-size:13px; width:auto; padding:0 14px; border-radius:17px; }
.btn-refresh{ display:inline-block; margin-top:16px; padding:9px 22px; border-radius:20px; background:var(--brand); color:#fff; font-size:14px; }
/* ================= 快捷金额宫格 ================= */
.quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.quick b{
background:#fff; border-radius:var(--r); padding:14px 6px; text-align:center; font-size:16px; font-weight:700;
color:var(--t1); box-shadow:inset 0 0 0 1px var(--line); transition:.15s;
}
.quick b.on{ color:var(--brand); box-shadow:inset 0 0 0 1.5px var(--brand); background:var(--brand-tint); }
/* ================= 分段 Tab ================= */
.tabs{ display:flex; gap:6px; background:#fff; border-radius:var(--r); padding:4px; box-shadow:var(--sh); margin-bottom:12px; }
.tabs a{ flex:1; text-align:center; padding:9px 0; border-radius:10px; font-size:13.5px; color:var(--t3); }
.tabs a.on{ background:var(--brand-tint); color:var(--brand); font-weight:600; }
/* 横滚筛选 */
.chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chips a{ flex:0 0 auto; padding:6px 14px; border-radius:16px; background:#fff; font-size:13px; color:var(--t3); box-shadow:inset 0 0 0 1px var(--line); }
.chips a.on{ background:var(--brand); color:#fff; box-shadow:0 4px 12px rgba(255,95,77,.28); }
/* ================= 三宫格数据 ================= */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; margin-bottom:12px; }
.stats .s{ padding:14px 6px; text-align:center; }
.stats .s + .s{ box-shadow:inset 1px 0 0 var(--line-soft); }
.stats .v{ font-size:18px; font-weight:700; }
.stats .v.brand{ color:var(--brand); }
.stats .v.green{ color:var(--green); }
.stats .k{ font-size:11.5px; color:var(--t5); margin-top:2px; }
/* ================= 空态 ================= */
.empty{ text-align:center; color:var(--t5); padding:56px 0 26px; font-size:15px; }
.empty .art{ width:84px; height:84px; margin:0 auto 14px; border-radius:26px; background:var(--brand-tint); display:grid; place-items:center; color:var(--brand-soft); }
.empty p{ margin:0 0 4px; }
.empty small{ font-size:12px; color:var(--t6); }
/* 提示文字 */
.tip{ text-align:center; font-size:12px; color:var(--t6); margin-top:16px; line-height:1.75; }
.note{ background:var(--brand-tint); border:1px solid var(--brand-line); color:#a2603c; font-size:12px; line-height:1.7; border-radius:var(--r); padding:10px 12px; margin-bottom:12px; }
/* ================= 底部导航（5 tab，还原线上） ================= */
.tabbar{
position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:430px; z-index:40;
display:flex; background:#fff; border-top:1px solid var(--line-soft);
padding:6px 0 calc(6px + var(--safe-b)); box-shadow:0 -2px 12px rgba(0,0,0,.04);
}
.tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--nav); font-size:10.5px; padding:3px 0; }
.tabbar a.on{ color:var(--brand-deep); }
.tabbar svg{ width:22px; height:22px; }
/* ================= Toast ================= */
.toast{
position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96);
background:rgba(30,32,36,.9); color:#fff; font-size:14px; padding:12px 18px; border-radius:12px;
opacity:0; pointer-events:none; transition:.18s; z-index:99; max-width:76vw; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
/* ================= 弹层 ================= */
.mask{ position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:60; display:none; }
.mask.show{ display:block; }
.sheet{
position:fixed; left:50%; transform:translateX(-50%) translateY(100%); bottom:0; width:100%; max-width:430px;
background:#fff; border-radius:20px 20px 0 0; padding:18px 16px calc(18px + var(--safe-b));
z-index:61; transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.sheet.show{ transform:translateX(-50%) translateY(0); }
.sheet h4{ margin:0 0 14px; font-size:16px; text-align:center; }
/* ============================================================
v2.1 优化补丁
1) 对比度 2) 触控热区 3) 键盘焦点 4) 减少动效
5) iOS 输入防缩放 6) 骨架屏 7) 吸底操作条 8) 四宫格统计
============================================================ */
/* --- 5) iOS 下 <16px 的输入框会被自动放大，统一压到 16px --- */
input,select,textarea{ font-size:16px; }
/* --- 3) 键盘 / Tab 焦点必须可见（移动端外接键盘、PC 预览都用得上） --- */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:6px; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
/* --- 4) 尊重系统「减弱动态效果」 --- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
/* --- 图片不溢出卡片 --- */
img{ max-width:100%; display:block; }
/* --- 1) 骨架屏：列表加载态，避免白屏 --- */
.skeleton{
background:linear-gradient(90deg,#f1f2f5 25%,#f8f9fb 37%,#f1f2f5 63%);
background-size:400% 100%; animation:mp-sk 1.3s ease infinite; border-radius:8px;
}
@keyframes mp-sk{ 0%{ background-position:100% 50% } 100%{ background-position:0 50% } }
.sk-card{ background:#fff; border-radius:16px; padding:16px; box-shadow:var(--sh); margin-bottom:12px; }
.sk-line{ height:12px; margin-bottom:10px; }
.sk-line.w60{ width:60%; } .sk-line.w40{ width:40%; } .sk-line.w80{ width:80%; }
.sk-big{ height:26px; width:120px; margin-bottom:12px; }
/* --- 8) 四宫格统计 --- */
.stats.four{ grid-template-columns:repeat(4,1fr); }
.stats.four .v{ font-size:17px; }
/* --- 7) 吸底操作条（长表单/详情页用，避开底部导航） --- */
.actionbar{
position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:430px; z-index:38;
background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(10px);
border-top:1px solid var(--line-soft); padding:10px 16px calc(10px + var(--safe-b));
display:flex; gap:10px;
}
.actionbar .btn{ flex:1; }
body.has-actionbar{ padding-bottom:calc(160px + var(--safe-b)); }
/* --- 分隔线 / 小标签 / 省略 --- */
.divider{ display:flex; align-items:center; gap:10px; color:var(--t5); font-size:12px; margin:16px 0 12px; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.tag{ font-size:11px; padding:2px 7px; border-radius:7px; background:#f2f3f5; color:var(--t3); display:inline-block; }
.ellipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.strong{ font-weight:700; }
/* --- 按压反馈：让「可点」更明确 --- */
.tabbar a{ transition:transform .1s; }
.tabbar a:active{ transform:scale(.93); }
.card.tap:active{ transform:scale(.994); }
.quick b:active,.chips a:active{ transform:scale(.97); }
.quick b,.chips a{ transition:transform .1s, box-shadow .15s, background .15s; }
/* --- 开关的无障碍：点击热区补到 44px 高 --- */
.sw::after{ content:""; position:absolute; inset:-8px -4px; }
/* --- 二次确认弹窗（大额收款用） --- */
.confirm{ text-align:center; }
.confirm .big-amt{ font-size:34px; font-weight:800; color:var(--red); letter-spacing:-.5px; margin:6px 0 4px; }
.confirm .hint{ font-size:13px; color:var(--t3); line-height:1.7; margin-bottom:16px; }
.confirm .acts{ display:flex; gap:10px; }
.confirm .acts .btn{ flex:1; }
.confirm .checks{ text-align:left; background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:12px;
padding:10px 12px; font-size:12.5px; color:#a2603c; line-height:1.8; margin-bottom:16px; }
/* --- 抢单失败态 --- */
.card.taken{ opacity:.62; }
.card.taken .amount{ color:#b6bbc4; }
/* ============================================================
修正（2026-11-02）：金额单位统一放数字后面
原来写的是 元200，渲染成「元200」，反了。
现在模板是 200元，这里把 拽到后面当小字后缀。
============================================================ */
.amount em,
.big em,
.ro-amt em,
.au-amt em,
.dt .amt em,
.ap .amt em,
.rw .amt em,
.rec .amt em{
margin-left:3px !important;
margin-right:0 !important;
font-size:.52em !important;
font-weight:700;
font-style:normal;
letter-spacing:0;
vertical-align:baseline;
opacity:.9;
}