/* ==========================================================
   英伦出行原型 · 移动端组件库（乘客端 P / 司机端 D 共用）
   手机壳 App Shell 冻结版：.phone > .screen + .tabbar
   所有移动端页面必须逐字使用该骨架，只改 .screen 内主内容
   司机端页面在 body 上加 data-app="driver" 即切换为专业蓝主题
   ========================================================== */

/* ---------- 工作台背景 + 手机壳居中 ---------- */
body.mobile {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 500px at 15% -10%, #FFD9C4 0%, transparent 55%),
    radial-gradient(900px 480px at 100% 110%, #E8D9CC 0%, transparent 50%),
    #ECE5DE;
  padding: 28px 16px;
}
body.mobile[data-app="driver"] {
  background:
    radial-gradient(1200px 500px at 15% -10%, #D6E4FF 0%, transparent 55%),
    radial-gradient(900px 480px at 100% 110%, #DCE7F5 0%, transparent 50%),
    #E4E9F0;
}

.phone {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  background: var(--c-bg);
  border-radius: 44px;
  box-shadow: var(--shadow-lg), inset 0 0 0 10px #1B140F, inset 0 0 0 12px #3A2C22;
  overflow: hidden;
  display: flex; flex-direction: column;
}
body[data-app="driver"] .phone {
  box-shadow: var(--shadow-lg), inset 0 0 0 10px #0D1526, inset 0 0 0 12px #24314D;
}

/* 刘海（模拟 iPhone 安全区） */
.phone::before {
  content: ""; position: absolute; z-index: 60;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 150px; height: 26px; background: #1B140F; border-radius: 0 0 18px 18px;
}
body[data-app="driver"] .phone::before { background: #0D1526; }

/* 状态栏时间/信号（视觉装饰，frame.js 统一注入） */
.statusbar {
  position: relative; z-index: 50; flex: none;
  height: 30px; display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 22px 2px; font-size: 12px; font-weight: 600; color: var(--c-text);
}

/* 屏幕主滚动区 */
.screen {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; background: var(--c-bg);
}
.screen::-webkit-scrollbar { display: none; }

/* ---------- 地图沉浸式页面（P1 首页 / P6 行程 / D4 接驾）：地图铺满屏幕，UI 浮层叠加 ---------- */
.map-screen { flex: 1; position: relative; overflow: hidden; background: #E8EDE4; }
.map-screen .map-canvas { position: absolute; inset: 0; }
.map-screen .map-canvas svg { width: 100%; height: 100%; display: block; }
/* 浮层通用：地图页元素绝对定位 */
.float-top { position: absolute; z-index: 30; top: 10px; left: 12px; right: 12px; }
.float-bottom { position: absolute; z-index: 30; left: 12px; right: 12px; bottom: 12px; }

/* ---------- 导航栏（流程页返回头） ---------- */
.navbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 12px;
  background: var(--c-surface); border-bottom: 1px solid var(--c-border);
}
.navbar .nav-back {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 14px; color: var(--c-text); padding: 6px 4px 6px 0;
}
.navbar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 16px; font-weight: 600; }
.navbar .nav-right { font-size: 13px; color: var(--c-text-sub); }

/* ---------- 地图页悬浮返回/工具钮（白圆钮，压在地图上） ---------- */
.map-fab {
  position: absolute; z-index: 35; width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-surface); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; color: var(--c-text);
}
.map-fab svg { width: 19px; height: 19px; }

/* ---------- 底部 TabBar（乘客端冻结：首页|班车|订单|我的；司机端冻结：接单|行程|营收|消息|我的） ---------- */
.tabbar {
  flex: none; z-index: 50;
  display: flex; background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: 4px 0 6px;
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; color: var(--c-text-sub); padding-top: 3px;
}
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a.active { color: var(--c-primary); font-weight: 600; }
.tabbar .dot { position: relative; }
.tabbar .dot::after {
  content: ""; position: absolute; top: -2px; right: -6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-danger);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 16px; border-radius: 21px;
  font-size: 15px; font-weight: 600; transition: transform .08s, opacity .2s;
  user-select: none; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-deep)); color: #fff; box-shadow: 0 4px 12px rgba(255,107,53,.35); }
body[data-app="driver"] .btn-primary { background: linear-gradient(135deg, #3B82F6, var(--c-primary-deep)); box-shadow: 0 4px 12px rgba(37,99,235,.35); }
.btn-ghost { background: var(--c-primary-soft); color: var(--c-primary-deep); }
.btn-plain { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); }
.btn-danger { background: linear-gradient(135deg, #FF7A59, var(--c-danger)); color: #fff; }
.btn-sm { height: 30px; padding: 0 14px; font-size: 12px; border-radius: 15px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.disabled {
  background: #D8CCC2 !important; color: #FFF !important; box-shadow: none !important;
  cursor: not-allowed; pointer-events: none;
}
body[data-app="driver"] .btn[disabled], body[data-app="driver"] .btn.disabled { background: #B9C5D8 !important; }

/* 底部操作栏（叫车确认/行程节点提交） */
.footer-bar {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 12px; background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}

/* ---------- 卡片 / 单元格 ---------- */
.card {
  background: var(--c-surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); padding: 14px; margin: 10px 12px;
}
.cell {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 2px; font-size: 14px;
}
.cell + .cell { border-top: 1px solid var(--c-border); }
.cell .cell-label { display: flex; align-items: center; gap: 8px; color: var(--c-text); }
.cell .cell-value { color: var(--c-text-sub); font-size: 13px; display: flex; align-items: center; gap: 4px; }
.cell .cell-value.main { color: var(--c-text); font-weight: 600; }
.cell svg { width: 16px; height: 16px; color: var(--c-text-faint); }

/* ---------- 状态标签 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; line-height: 1.6;
}
.tag-orange { background: var(--c-primary-soft); color: var(--c-primary-deep); }
.tag-green  { background: rgba(22,163,74,.12); color: var(--c-success); }
.tag-red    { background: rgba(229,72,77,.10); color: var(--c-danger); }
.tag-gray   { background: rgba(140,122,107,.12); color: var(--c-text-sub); }
.tag-blue   { background: rgba(62,123,250,.10); color: var(--c-info); }
.tag-gold   { background: rgba(255,184,0,.15); color: #B07800; }

/* ---------- 订单卡（P7 订单列表：网约车/班车混合） ---------- */
.order-card { padding: 12px 14px; }
.order-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.order-no { font-size: 12px; color: var(--c-text-sub); }
.order-route { display: flex; gap: 8px; align-items: center; }
.order-route .rt-ic {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.order-route .rt-ic svg { width: 20px; height: 20px; }
.rt-ic.ride { background: var(--c-primary-soft); color: var(--c-primary-deep); }
.rt-ic.bus  { background: rgba(22,163,74,.12); color: var(--c-success); }
.rt-ic.air  { background: rgba(62,123,250,.10); color: var(--c-info); }
.order-route .rt-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.order-route .rt-sub { font-size: 11px; color: var(--c-text-sub); margin-top: 2px; }
.order-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.order-amount { font-size: 12px; color: var(--c-text-sub); }
.order-amount b { font-size: 15px; color: var(--c-price); font-weight: 700; }

/* ---------- 起终点行程条（叫车/订单通用：两个点位 + 竖线） ---------- */
.route-points { display: flex; flex-direction: column; gap: 0; }
.route-points .rp { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.route-points .rp + .rp { border-top: 1px dashed var(--c-border); }
.route-points .dot-ic {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
}
.route-points .dot-ic.from { background: var(--c-success); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.route-points .dot-ic.to { background: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.route-points .rp-label { font-size: 11px; color: var(--c-text-faint); width: 34px; flex: none; }
.route-points .rp-text { font-size: 14px; font-weight: 500; flex: 1; min-width: 0; }
.route-points .rp-text small { display: block; font-size: 11px; color: var(--c-text-sub); font-weight: 400; margin-top: 1px; }

/* ---------- 车型选择卡（P2）：图标 + 名称 + 人数 + 价格 ---------- */
.car-card {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--c-border); border-radius: var(--r-md);
  padding: 12px; margin-bottom: 10px; background: var(--c-surface);
  transition: border-color .15s;
}
.car-card.sel { border-color: var(--c-primary); background: var(--c-primary-soft); }
.car-card .cc-ic {
  width: 52px; height: 52px; border-radius: var(--r-sm); flex: none;
  background: var(--c-bg); display: flex; align-items: center; justify-content: center;
  color: var(--c-text-sub);
}
.car-card .cc-ic svg { width: 30px; height: 30px; }
.car-card .cc-info { flex: 1; min-width: 0; }
.car-card .cc-name { font-size: 14px; font-weight: 700; }
.car-card .cc-meta { font-size: 11px; color: var(--c-text-sub); margin-top: 3px; }
.car-card .cc-price { text-align: right; flex: none; }
.car-card .cc-price .cp { font-size: 18px; font-weight: 800; color: var(--c-price); }
.car-card .cc-price .cp-old { font-size: 11px; color: var(--c-text-faint); text-decoration: line-through; }
.car-card .cc-price .cp-cur { font-size: 12px; color: var(--c-price); font-weight: 700; }

/* ---------- 地图 UI 元素（车标/气泡/ETA 徽标） ---------- */
.car-pulse {
  position: absolute; z-index: 20; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-primary); border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.car-pulse::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(255,107,53,.45); animation: pulseRing 1.6s ease-out infinite;
}
@keyframes pulseRing { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
body[data-app="driver"] .car-pulse::after { border-color: rgba(37,99,235,.45); }

.map-bubble {
  position: absolute; z-index: 21; transform: translate(-50%, -120%);
  background: var(--c-surface); border-radius: 20px; box-shadow: var(--shadow-md);
  padding: 6px 12px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.map-bubble .sub { font-weight: 400; color: var(--c-text-sub); }

/* ETA 徽标（接驾倒计时） */
.eta-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-deep));
  color: #fff; font-size: 12px; font-weight: 700; border-radius: 20px; padding: 4px 12px;
}
body[data-app="driver"] .eta-chip { background: linear-gradient(135deg, #3B82F6, var(--c-primary-deep)); }

/* ---------- 司机信息卡（P6 行程页 / D4 接驾页共用） ---------- */
.driver-card { display: flex; align-items: center; gap: 12px; }
.driver-card .avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
body[data-app="driver"] .driver-card .avatar { background: linear-gradient(135deg, #3B82F6, #1E40AF); }
.driver-card .d-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.driver-card .d-meta { font-size: 11px; color: var(--c-text-sub); margin-top: 3px; }
.plate-no {
  display: inline-block; background: #FFD700; color: #1B140F;
  font-weight: 800; font-size: 13px; letter-spacing: 1px;
  border: 1.5px solid #C9A800; border-radius: 5px; padding: 1px 8px;
}

/* ---------- 行程状态节点（P6：已接单→即将到达→行程中→已完成） ---------- */
.trip-steps { display: flex; justify-content: space-between; padding: 2px 4px 0; }
.trip-steps .ts { flex: 1; text-align: center; position: relative; }
.trip-steps .ts b {
  width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 5px;
  background: var(--c-border); color: var(--c-text-sub);
  font-size: 11px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
}
.trip-steps .ts::before {
  content: ""; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px;
  background: var(--c-border); z-index: 1;
}
.trip-steps .ts:first-child::before { display: none; }
.trip-steps .ts.done b { background: var(--c-success); color: #fff; }
.trip-steps .ts.done::before { background: var(--c-success); }
.trip-steps .ts.cur b { background: var(--c-primary); color: #fff; box-shadow: 0 0 0 4px var(--c-primary-soft); }
.trip-steps .ts.cur { color: var(--c-primary-deep); font-weight: 700; }
.trip-steps .ts .tl { font-size: 10px; color: var(--c-text-sub); margin-top: 1px; }

/* ---------- 班车座位图（P09：7 座纯电 MPV 差异化选座） ---------- */
.seat-area { background: linear-gradient(160deg, #F6F1EA, #EFE6DC); border-radius: var(--r-md); padding: 14px 12px; margin: 0 12px; }
.seat-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; }
.seat-row:last-child { margin-bottom: 0; }
.seat {
  width: 58px; height: 58px; border-radius: 10px; position: relative;
  background: var(--c-surface); border: 2px solid var(--c-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 11px; font-weight: 600; color: var(--c-text-sub);
  transition: all .15s; user-select: none;
}
.seat small { font-size: 9px; font-weight: 400; color: var(--c-text-faint); }
.seat.sel { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-deep); }
.seat.off { opacity: .5; background: var(--c-bg); pointer-events: none; }
.seat.off small { text-decoration: line-through; }
.seat.driver {
  background: #3A2C22; color: #FFE9DA; border-color: #3A2C22; pointer-events: none;
}
.seat.front { border-style: dashed; }

/* ---------- 电子车票（P10：票券风 + 二维码） ---------- */
.eticket { margin: 10px 12px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--c-surface); }
.eticket .et-head {
  background: linear-gradient(135deg, #16A34A, #0C6B36); color: #fff;
  padding: 14px 16px; display: flex; justify-content: space-between; align-items: center;
}
.eticket .et-body { padding: 14px 16px 6px; position: relative; }
/* 票券撕票线（左右半圆缺口 + 虚线） */
.eticket .et-tear { position: relative; margin: 12px 0 6px; height: 0; border-top: 2px dashed var(--c-border); }
.eticket .et-tear::before, .eticket .et-tear::after {
  content: ""; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-bg);
}
.eticket .et-tear::before { left: -26px; } .eticket .et-tear::after { right: -26px; }

/* ---------- 通用二维码块 ---------- */
.qr-box { width: 68px; height: 68px; background: #fff; border-radius: 8px; padding: 5px; flex: none; }
.qr-box svg { width: 100%; height: 100%; }
.qr-big { width: 168px; height: 168px; margin: 0 auto; background: #fff; border-radius: var(--r-md); padding: 10px; border: 1px solid var(--c-border); }
.qr-big svg { width: 100%; height: 100%; }

/* ---------- 计费明细面板（P2/P11：深色面板，费用公式感） ---------- */
.calc-panel { background: linear-gradient(150deg, #2B1D14, #4A2C18); border-radius: var(--r-md); padding: 14px; color: #FFE9DA; }
.calc-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; color: #E8C9B4; }
.calc-row b { color: #fff; font-weight: 600; }
.calc-total {
  margin-top: 8px; padding-top: 10px; border-top: 1px dashed rgba(255, 233, 218, .3);
  display: flex; justify-content: space-between; align-items: baseline;
}
.calc-total .label { font-size: 13px; }
.calc-total .val { font-size: 26px; font-weight: 800; color: #FFB800; }
.calc-total .val .cur { font-size: 15px; }

/* ---------- 筛选 Tab（横向滚动） ---------- */
.h-tabs { display: flex; gap: 18px; padding: 10px 14px 2px; font-size: 14px; color: var(--c-text-sub); overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; background: var(--c-bg); z-index: 30; }
.h-tabs::-webkit-scrollbar { display: none; }
.h-tabs a { flex: none; padding-bottom: 8px; position: relative; }
.h-tabs a.active { color: var(--c-primary-deep); font-weight: 700; }
.h-tabs a.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 2px; width: 18px; height: 3px; border-radius: 2px; background: var(--c-primary); }

/* ---------- 数据看板（D10 营收 / D2 工作台） ---------- */
.stat-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-cell { text-align: center; padding: 10px 4px; }
.stat-cell .sv { font-size: 20px; font-weight: 800; color: var(--c-primary-deep); }
.stat-cell .sl { font-size: 11px; color: var(--c-text-sub); margin-top: 3px; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 90px; padding: 6px 2px 0; }
.bars .bar { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--c-primary), #FFD1B8); min-height: 6px; animation: riseIn .5s ease both; }
.bars .bar.today { background: linear-gradient(180deg, var(--c-primary-deep), var(--c-accent)); }
.bars-x { display: flex; gap: 5px; font-size: 9px; color: var(--c-text-faint); }
.bars-x span { flex: 1; text-align: center; }

/* ---------- 收入明细（D10：流水分解与状态） ---------- */
.earn-item { display: flex; gap: 10px; align-items: center; padding: 11px 0; }
.earn-item + .earn-item { border-top: 1px solid var(--c-border); }
.earn-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--c-primary-soft); color: var(--c-primary-deep); }
.earn-icon svg { width: 18px; height: 18px; }
.earn-main { flex: 1; min-width: 0; }
.earn-main .en { font-size: 13px; font-weight: 600; }
.earn-main .ed { font-size: 11px; color: var(--c-text-sub); margin-top: 2px; }
.earn-amt { text-align: right; }
.earn-amt .ea { font-size: 15px; font-weight: 800; color: var(--c-profit); }
.earn-amt .es { font-size: 10px; color: var(--c-text-faint); margin-top: 1px; }

/* ---------- 派单广播卡（D03：抢单倒计时） ---------- */
.grab-card { border: 2px solid var(--c-primary); border-radius: var(--r-md); background: var(--c-surface); padding: 14px; margin: 10px 12px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
.grab-card .grab-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.grab-card .grab-price { font-size: 24px; font-weight: 800; color: var(--c-price); }
.grab-card .grab-price .cur { font-size: 14px; }
.ring-timer {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: var(--c-danger);
  background:
    radial-gradient(closest-side, var(--c-surface) 74%, transparent 75% 100%),
    conic-gradient(var(--c-danger) calc(var(--p, 80) * 1%), var(--c-border) 0);
}

/* ---------- 优惠券 ---------- */
.coupon {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #FF8A5C, var(--c-accent));
  color: #fff; border-radius: 6px; padding: 3px 10px 3px 8px; font-size: 11px; font-weight: 600;
}
.coupon::before, .coupon::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-surface); top: 50%; transform: translateY(-50%);
}
.coupon::before { left: -4px; } .coupon::after { right: -4px; }
/* 资产券大卡（P13） */
.coupon-card {
  display: flex; overflow: hidden; border-radius: var(--r-md); margin: 0 12px 10px;
  background: linear-gradient(135deg, #FF8A5C, #E5484D); color: #fff; box-shadow: var(--shadow-sm);
}
.coupon-card.gray { background: linear-gradient(135deg, #B8A99A, #8C7A6B); }
.coupon-card .cc-left { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 0; }
.coupon-card .cc-left .cv { font-size: 24px; font-weight: 800; }
.coupon-card .cc-left .cv .cur { font-size: 13px; }
.coupon-card .cc-left .cl { font-size: 10px; opacity: .85; margin-top: 2px; }
.coupon-card .cc-right { flex: 1; background: var(--c-surface); color: var(--c-text); padding: 12px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.coupon-card .cc-right .ct { font-size: 14px; font-weight: 700; }
.coupon-card .cc-right .cd { font-size: 11px; color: var(--c-text-sub); }

/* ---------- 空态 / 骨架屏 / 加载 ---------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 46px 20px; color: var(--c-text-sub); font-size: 13px; }
.empty svg { width: 52px; height: 52px; color: var(--c-border); }
.skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--c-border) 25%, var(--c-primary-soft) 50%, var(--c-border) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Toast / Modal / ActionSheet ---------- */
#toast-wrap { position: absolute; z-index: 99; top: 40%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.toast {
  max-width: 78%; padding: 10px 18px; border-radius: var(--r-md);
  background: rgba(27, 20, 15, .88); color: #fff; font-size: 13px; line-height: 1.5;
  animation: fadeIn .2s ease;
}
.modal-mask {
  position: absolute; inset: 0; z-index: 80; background: rgba(20, 12, 6, .5);
  display: flex; align-items: flex-end; animation: fadeIn .2s ease;
}
.modal-sheet {
  width: 100%; background: var(--c-surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 16px 16px 20px; max-height: 78%; overflow-y: auto;
  animation: sheetUp .25s ease;
}
@keyframes sheetUp { from { transform: translateY(60px); opacity: .4; } to { transform: none; opacity: 1; } }
.modal-center {
  position: absolute; z-index: 81; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 80%; background: var(--c-surface); border-radius: var(--r-lg);
  padding: 22px 18px 16px; text-align: center; animation: fadeIn .2s ease;
}

/* ---------- 合规预警条（D2：PCO/保险 30 天红色预警） ---------- */
.alert-strip {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.28);
  color: var(--c-danger); border-radius: var(--r-md); padding: 10px 12px;
  font-size: 12px; line-height: 1.55; margin: 10px 12px;
}
.alert-strip svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.alert-strip.amber { background: rgba(255,184,0,.10); border-color: rgba(232,162,61,.4); color: #8A6200; }
.alert-strip.blue { background: var(--c-primary-soft); border-color: rgba(37,99,235,.25); color: var(--c-primary-deep); }

/* ---------- 状态切换大按钮（D2：在线/离线/休息） ---------- */
.mode-switch { display: flex; gap: 8px; padding: 0 12px; }
.mode-switch .ms {
  flex: 1; text-align: center; padding: 9px 0; border-radius: var(--r-md);
  background: var(--c-surface); border: 2px solid var(--c-border);
  font-size: 13px; font-weight: 600; color: var(--c-text-sub);
}
.mode-switch .ms.on { border-color: var(--c-success); background: rgba(22,163,74,.08); color: var(--c-success); }
.mode-switch .ms.rest { border-color: var(--c-warning); background: rgba(232,162,61,.08); color: var(--c-warning); }
.mode-switch .ms.off { border-color: var(--c-border); }

/* ---------- 表单 ---------- */
.form-item { margin-bottom: 14px; }
.form-item .fl { font-size: 13px; color: var(--c-text-sub); margin-bottom: 6px; display: flex; justify-content: space-between; }
.form-input {
  width: 100%; height: 44px; padding: 0 14px; font-size: 15px;
  border: 1.5px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-text); transition: border-color .2s;
}
.form-input:focus { border-color: var(--c-primary); }
.form-input.err { border-color: var(--c-danger); background: rgba(229,72,77,.04); }
.form-tip { font-size: 11px; color: var(--c-danger); margin-top: 5px; display: none; }
.form-tip.show { display: block; }
textarea.form-input { height: 76px; padding: 10px 14px; resize: none; }

/* ---------- 步骤圆点（流程页） ---------- */
.step-dots { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 0 4px; }
.step-dots .sd { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-faint); }
.step-dots .sd b {
  width: 20px; height: 20px; border-radius: 50%; background: var(--c-border);
  color: var(--c-text-sub); font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.step-dots .sd.on { color: var(--c-primary-deep); font-weight: 600; }
.step-dots .sd.on b { background: var(--c-primary); color: #fff; }
.step-dots .sd-line { width: 26px; height: 2px; background: var(--c-border); margin: 0 2px; }

/* ---------- 通用工具类 ---------- */
.row { display: flex; align-items: center; gap: 8px; }
.between { display: flex; align-items: center; justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.fs12 { font-size: 12px; } .fs13 { font-size: 13px; } .fs14 { font-size: 14px; }
.sub { color: var(--c-text-sub); } .faint { color: var(--c-text-faint); }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.tc { text-align: center; } .bold { font-weight: 700; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px; font-size: 16px; font-weight: 700; }
.section-title .more { font-size: 12px; color: var(--c-text-sub); font-weight: 400; }
/* 时间线（物流/消息流） */
.timeline { padding: 4px 2px 2px; }
.timeline .tl-item { position: relative; padding: 0 0 16px 22px; }
.timeline .tl-item::before {
  content: ""; position: absolute; left: 5px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-border);
}
.timeline .tl-item::after {
  content: ""; position: absolute; left: 8.5px; top: 16px; bottom: -2px;
  width: 1.5px; background: var(--c-border);
}
.timeline .tl-item:last-child::after { display: none; }
.timeline .tl-item.latest::before { background: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.timeline .tl-item.latest .tl-text { color: var(--c-primary-deep); font-weight: 600; }
.timeline .tl-text { font-size: 13px; line-height: 1.45; }
.timeline .tl-time { font-size: 11px; color: var(--c-text-faint); margin-top: 2px; }