/* ===== 客单 APP 体验升级补丁 · 增量样式 · 2026-10-10 =====
   全部新增样式以 .ux- 前缀命名，避免与 css/app.css 冲突。
   关闭（回退）= 删除本文件 + js/upgrade.js + index.html 中两行引用。*/

/* ===== 暗色模式覆盖（不动生产 :root，叠加在 :root[data-theme="dark"]） ===== */
:root[data-theme="dark"]{
  --bg1:#0b1220; --bg2:#0a0f1a;
  --panel:#141b2d; --panel2:#1a2235;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
  --txt:#e6edf7; --txt-mut:#94a3b8;
  --shadow:0 10px 30px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg1:#0b1220; --bg2:#0a0f1a;
    --panel:#141b2d; --panel2:#1a2235;
    --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
    --txt:#e6edf7; --txt-mut:#94a3b8;
    --shadow:0 10px 30px rgba(0,0,0,.4);
  }
}

/* ===== 顶部主题切换钮 ===== */
.ux-theme-toggle{
  background:transparent; border:1px solid var(--line);
  color:var(--txt-mut); width:32px; height:32px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:14px; margin-left:6px; transition:all .2s;
}
.ux-theme-toggle:active{transform:scale(.92)}

/* ===== 表单字符计数标签 ===== */
.ux-counter{
  font-size:11px; color:var(--txt-mut); font-weight:400;
  display:inline-block; transition:color .2s;
}
.ux-counter.warn{color:var(--amber)}
.ux-counter.over{color:var(--red)}

/* ===== 字段 label 一行内三项：左标题 + 必填 + 计数 ===== */
.ux-fld-label{display:flex; justify-content:space-between; align-items:baseline; gap:6px}
.ux-fld-label .req{color:var(--red); margin-left:2px}

/* ===== 我的页顶部统计卡 ===== */
.ux-stat-row{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;
  margin:6px 0 14px;
}
.ux-stat{
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:14px 10px; text-align:center;
  box-shadow:var(--shadow); cursor:pointer; transition:all .2s;
}
.ux-stat:active{transform:scale(.97)}
.ux-stat .v{font-size:22px; font-weight:800; color:var(--txt); line-height:1.2; font-variant-numeric:tabular-nums}
.ux-stat .l{font-size:11px; color:var(--txt-mut); margin-top:4px}
.ux-stat.warn .v{color:var(--amber)}
.ux-stat.ok .v{color:var(--green)}

/* ===== 我的页"待收货"快捷卡 ===== */
.ux-pending{
  background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(6,182,212,.08));
  border:1px solid rgba(245,158,11,.3); border-radius:14px;
  padding:14px; margin-bottom:14px; box-shadow:var(--shadow);
}
.ux-pending-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.ux-pending-title{font-size:14px; font-weight:700; color:var(--amber); display:flex; align-items:center; gap:6px}
.ux-pending-title .dot{
  width:8px; height:8px; background:var(--amber); border-radius:50%;
  box-shadow:0 0 8px var(--amber); animation:uxPulse 1.6s infinite;
}
@keyframes uxPulse{0%,100%{opacity:1}50%{opacity:.4}}
.ux-pending-count{font-size:11px; color:var(--txt-mut)}
.ux-pending-item{
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-top:1px solid var(--line2);
}
.ux-pending-info{flex:1; min-width:0}
.ux-pending-name{font-size:14px; font-weight:600; color:var(--txt)}
.ux-pending-no{font-size:11px; color:var(--txt-mut); margin-top:1px; font-family:SF Mono,Consolas,monospace}
.ux-pending-btn{
  flex:0; padding:7px 13px; border:none; border-radius:8px;
  background:var(--green); color:#fff; font-size:12px; font-weight:700;
  cursor:pointer; box-shadow:0 3px 8px rgba(16,185,129,.35);
  transition:transform .15s;
}
.ux-pending-btn:active{transform:scale(.94)}
.ux-pending-more{
  display:block; text-align:center; margin-top:8px;
  color:var(--cyan); font-size:12px; cursor:pointer;
}

/* ===== 行入场淡入 + 按下回弹（已存在 .o-row，重新声明关键帧不冲突） ===== */
@keyframes uxRowIn{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}
.ux-row-in{animation:uxRowIn .3s ease both}

/* ===== 按钮按下回弹（补丁，配合 btn-submit / btn-sm 的 :active） ===== */
.ux-press{transition:transform .12s ease}
.ux-press:active{transform:translateY(1px)}

/* ===== 订单行 地址三行省略 + 展开 ===== */
.ux-addr{
  display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden; word-break:break-all;
}
.ux-addr.expanded{-webkit-line-clamp:unset; overflow:visible}
.ux-addr-toggle{
  color:var(--cyan); font-size:12px; cursor:pointer; margin-left:4px;
}
.ux-addr-toggle:active{opacity:.7}

/* ===== 订单行时间线弹窗 ===== */
.ux-timeline{padding:6px 4px 4px}
.ux-tl-item{display:flex; gap:14px; padding-bottom:18px; position:relative}
.ux-tl-item:not(:last-child)::after{
  content:""; position:absolute; left:11px; top:24px; bottom:0;
  width:2px; background:var(--line2);
}
.ux-tl-dot{
  width:24px; height:24px; border-radius:50%; background:var(--panel);
  border:2px solid var(--line2); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; font-size:11px;
  color:var(--txt-mut); font-weight:700; position:relative; z-index:1;
}
.ux-tl-item.done .ux-tl-dot{background:var(--green); border-color:var(--green); color:#fff}
.ux-tl-item.now .ux-tl-dot{
  background:var(--cyan); border-color:var(--cyan); color:#fff;
  box-shadow:0 0 0 4px rgba(6,182,212,.2); animation:uxPulseDot 1.6s infinite;
}
@keyframes uxPulseDot{
  0%,100%{box-shadow:0 0 0 4px rgba(6,182,212,.2)}
  50%{box-shadow:0 0 0 8px rgba(6,182,212,0)}
}
.ux-tl-item.rej .ux-tl-dot{background:var(--red); border-color:var(--red); color:#fff}
.ux-tl-body{flex:1; min-width:0}
.ux-tl-status{font-size:14px; font-weight:700; color:var(--txt)}
.ux-tl-time{font-size:11px; color:var(--txt-mut); margin-top:2px}
.ux-tl-by{font-size:12px; color:var(--txt-mut); margin-top:3px}
.ux-tl-now{font-size:11px; color:var(--cyan); margin-top:3px; font-weight:600}

/* ===== 底部动作菜单（sheet） ===== */
.ux-sheet-mask{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9998;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .25s; backdrop-filter:blur(2px);
}
.ux-sheet-mask.show{opacity:1}
.ux-sheet{
  width:100%; max-width:480px; background:var(--panel);
  border-radius:18px 18px 0 0; padding:8px 0 calc(14px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.8,.3,1);
  max-height:78vh; overflow-y:auto;
}
.ux-sheet-mask.show .ux-sheet{transform:translateY(0)}
.ux-sheet-handle{width:38px; height:4px; background:var(--line); border-radius:2px; margin:8px auto 14px}
.ux-sheet-order{padding:0 18px 14px; border-bottom:1px solid var(--line2); margin-bottom:8px}
.ux-sheet-order .name{font-size:16px; font-weight:700; color:var(--txt)}
.ux-sheet-order .no{font-size:11px; color:var(--txt-mut); margin-top:3px; font-family:SF Mono,Consolas,monospace}
.ux-sheet-item{
  display:flex; align-items:center; gap:14px; padding:14px 20px;
  cursor:pointer; color:var(--txt); font-size:15px;
  transition:background .15s; border:none; background:transparent;
  width:100%; text-align:left;
}
.ux-sheet-item:active{background:var(--panel2)}
.ux-sheet-item.danger{color:var(--red)}
.ux-sheet-item .ic{
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0; background:var(--panel2);
}
.ux-sheet-item .bd{flex:1}
.ux-sheet-item .bd .t{font-weight:600}
.ux-sheet-item .bd .d{font-size:12px; color:var(--txt-mut); margin-top:1px}

/* ===== 空状态插画替换（用 SVG 代替纯文字） ===== */
.ux-empty-illu{
  display:block; margin:0 auto 14px; opacity:.85;
}
.ux-empty-illu + .empty-txt{
  text-align:center; color:var(--txt-mut); font-size:13px; line-height:1.5;
}

/* ===== toast 进度·成功（与生产 toast 协同） ===== */
.ux-toast-pulse{animation:uxToastPulse .45s ease}
@keyframes uxToastPulse{
  0%{transform:translateX(-50%) scale(.96)}
  100%{transform:translateX(-50%) scale(1)}
}