/* ============================================================
   我丢 · 界面设计 v3（按原型完整重做）
   2026-10-25 | 替换 app-v2.css，结构与样式一起改
   加载：app.css 之后（layout.php 单行）
   回滚：把 layout.php 里的 app-v3.css 换回 app-v2.css / 或删除该行
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root{
  --brand:#C2410C; --brand-ink:#8F2D06; --brand-50:#FFF4EC; --brand-100:#FFE6D5;
  --brand-dark:#8F2D06; --brand-light:#FFE6D5; --brand-soft:#FFF4EC;
  --brand-rgb:194,65,12; --brand-dark-rgb:143,45,6;

  --paper:#FAF8F5; --card:#FFFFFF;
  --ink:#1A1A18; --ink-2:#3D3D39; --muted:#6E6E68;
  --line:#E9E6E1; --line-2:#F2EFEA;
  --bg:#FAF8F5;

  --leaf:#2F6F4E; --leaf-bg:#EAF3EE; --leaf-line:#D7E7DD;
  --info:#2C5C86; --info-bg:#EAF1F7;
  --warn:#A86412; --warn-bg:#FBF1E2;
  --danger:#B3382A; --danger-bg:#FBEDEA;

  --radius-xl:22px; --radius:16px; --radius-sm:12px; --radius-xs:8px;
  --shadow-sm:0 1px 2px rgba(26,26,24,.05);
  --shadow-md:0 6px 18px -12px rgba(26,26,24,.22);
  --shadow-lg:0 14px 34px -20px rgba(26,26,24,.30);
  --tabbar-h:76px;
  --ring:0 0 0 3px rgba(194,65,12,.16);
}

/* ---------- 2. 基础 ---------- */
body{ background:var(--paper); color:var(--ink); line-height:1.62; }
.num,
.amount, .wv, .cc-price b, .ha-price b, .os-l b, .pc-metrics b, .list-item .amount{
  font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1;
}
a:focus-visible, button:focus-visible, .btn:focus-visible, .slot-btn:focus-visible, .seg a:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
.container{ max-width:1080px; }

/* ---------- 3. 按钮 ---------- */
.btn{
  border-radius:var(--radius-sm); font-weight:650;
  transition:background .18s, border-color .18s, color .18s, box-shadow .18s, transform .12s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ box-shadow:0 8px 18px -10px rgba(194,65,12,.85); }
.btn-primary:hover{ background:#AD3A0A; border-color:#AD3A0A; }
.btn-outline{ background:#fff; border:1px solid var(--line); color:var(--ink-2); }
.btn-outline:hover{ border-color:#D9CFC6; background:#FDFCFA; color:var(--ink); }
.btn-sm{ font-size:13px; }

/* ---------- 4. 首页骨架 ---------- */
.home-hero{
  background:var(--card);
  margin:0 0 14px; padding:14px 16px 16px;
  border-bottom:1px solid var(--line);
}
.home-hero .hh-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.home-hero .hh-loc{
  display:inline-flex; align-items:center; gap:5px; min-width:0;
  font-size:15px; font-weight:700; color:var(--ink);
}
.home-hero .hh-loc .ic{ width:16px; height:16px; color:var(--brand); flex:none; }
.home-hero .hh-loc > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-hero .hh-caret{ color:var(--muted); font-size:13px; }
.home-hero .hh-service{ font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap; }

.hh-search{
  display:flex; align-items:center; gap:10px;
  height:46px; padding:0 5px 0 12px;
  background:#FDFCFA; border:1px solid var(--line); border-radius:var(--radius-sm);
}
.hh-search .hs-ico{ color:var(--muted); display:flex; }
.hh-search .hs-ico .ic{ width:17px; height:17px; }
.hh-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:15px; color:var(--ink); }
.hh-search input::placeholder{ color:#9C9C95; }
.hh-search .hs-btn{
  flex:none; height:36px; padding:0 14px;
  border:0; border-radius:var(--radius-xs);
  background:var(--brand); color:#fff; font-size:13px; font-weight:650;
  font-family:inherit; cursor:pointer;
}

/* 信任条 */
.trust-bar{
  display:flex; align-items:center; gap:6px;
  margin-top:12px; padding:9px 12px;
  background:var(--leaf-bg); border:1px solid var(--leaf-line); border-radius:var(--radius-sm);
}
.trust-bar span{
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:11.5px; font-weight:600; color:var(--leaf); white-space:nowrap;
}
.trust-bar .ic{ width:14px; height:14px; flex:none; }

/* 服务宫格 */
.svc-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  margin:0 0 14px; padding:14px 6px 12px; box-shadow:var(--shadow-sm);
}
.svc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; }
.svc{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:2px; transition:transform .18s; }
.svc:hover{ background:transparent; transform:translateY(-1px); }
.svc .st{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-ink);
}
.svc .st .ic{ width:21px; height:21px; }
.svc-grid > .svc:first-child .st{ background:var(--brand); color:#fff; box-shadow:0 8px 16px -9px rgba(194,65,12,.9); }
.svc .sl{ font-size:11.5px; font-weight:600; color:var(--ink-2); text-align:center; line-height:1.3; }

/* Hero */
.hero-wrap{ margin:0 0 4px; }
.hero-copy h1{
  margin:0; font-size:24px; line-height:1.25; letter-spacing:-.03em; font-weight:750; color:var(--ink);
}
.hero-copy h1 span{ color:var(--brand); }
.hero-copy p{ margin:8px 0 14px; font-size:13px; color:var(--ink-2); max-width:460px; }
.hero-copy .btns{ display:flex; gap:10px; }
.hero-copy .btns .btn{ flex:1; height:46px; }
.hero-aside{ display:none; }

/* 区块头 */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin:24px 0 10px; }
.section-head h2{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.section-head .more{ font-size:13px; font-weight:600; color:var(--brand); }

/* 类型卡：图标在上、名称、价格块 */
.cat-card{
  display:block; padding:14px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.cat-card:hover{ border-color:#D9CFC6; box-shadow:var(--shadow-md); transform:translateY(-1px); background:var(--card); }
.cat-card .cc-top{ display:flex; align-items:center; justify-content:space-between; }
.cat-card .tile{
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-ink); font-size:0;
}
.cat-card .tile svg{ width:20px; height:20px; }
.cat-card .cc-arrow{ color:#BEB8AF; font-size:16px; line-height:1; }
.cat-card .cn{ margin-top:12px; font-size:15px; font-weight:650; color:var(--ink); }
.cat-card .cc-price{ display:flex; align-items:baseline; gap:3px; margin-top:2px; }
.cat-card .cc-price b{ font-size:25px; font-weight:700; letter-spacing:-.03em; color:var(--brand); line-height:1.15; }
.cat-card .cc-price small{ font-size:11.5px; color:var(--muted); }
.cat-card .cc-sub{ margin-top:4px; font-size:11px; color:var(--muted); }

/* 四步时间线 */
.steps{ display:flex; flex-direction:column; margin:2px 0 8px; }
.step{ display:flex; gap:12px; position:relative; padding-bottom:18px; }
.step:last-child{ padding-bottom:2px; }
.step::before{
  content:""; position:absolute; left:13px; top:30px; bottom:2px; width:1px; background:var(--line);
}
.step:last-child::before{ display:none; }
.step .n{
  width:27px; height:27px; flex:none; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700;
  background:var(--brand-50); color:var(--brand-ink); border:1px solid #F6DCC9;
}
.step:first-child .n{ background:var(--brand); color:#fff; border-color:var(--brand); }
.step h3{ margin:2px 0 2px; font-size:14.5px; font-weight:650; color:var(--ink); }
.step p{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.55; }

/* ---------- 5. 底部标签栏：贴底五列 + 中间凸起 ---------- */
.tabbar{ display:none; }
@media (max-width:720px){
  .tabbar{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding:9px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--line);
    align-items:start;
  }
  .tabbar a{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    color:#6E6E68; font-size:11px; font-weight:600; position:relative;
  }
  .tabbar a .ti{ display:flex; align-items:center; justify-content:center; filter:none; }
  .tabbar a .ti .ic{ width:22px; height:22px; }
  .tabbar a.active{ color:var(--brand); background:transparent; }
  .tabbar a.center{ margin-top:-30px; }
  .tabbar a.center .ti{
    width:52px; height:52px; border-radius:20px; filter:none !important; transform:none !important;
    background:var(--brand); color:#fff;
    box-shadow:0 10px 20px -8px rgba(194,65,12,.9);
  }
  .tabbar a.center .ti .ic{ width:24px; height:24px; }
  .tabbar a.center .tl{ margin-top:1px; color:var(--brand-ink); }
  .tabbar .dot{
    position:absolute; top:-2px; right:calc(50% - 17px);
    min-width:15px; height:15px; padding:0 3px; border-radius:999px;
    background:var(--danger); color:#fff; font-size:9px; font-weight:700;
    font-style:normal; line-height:15px; text-align:center;
  }
  /* tabbar 的底部让位只留一份：footer 是文档最后一个元素、由它来留（见第 23 节）。
     原来这里和 .footer 各留一次，叠出 104+108=212px 的底部空白。 */
  .main{ padding-bottom:0; }
  .nav{ display:none; }
}

/* ---------- 6. 通用页面头 ---------- */
.page-head{ margin:6px 0 14px; }
.page-head h1{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; }
.page-head p{ margin:4px 0 0; font-size:12.5px; color:var(--muted); }

/* ---------- 7. 下单页 ---------- */
.group{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px; box-shadow:var(--shadow-sm);
}
.group.more-box summary{
  cursor:pointer; font-size:14px; font-weight:650; color:var(--ink-2);
  display:flex; align-items:center; gap:7px; list-style:none;
}
.group.more-box summary::-webkit-details-marker{ display:none; }
.group.more-box summary .ic{ width:16px; height:16px; color:var(--brand); }

.ghead{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:650; margin-bottom:12px; }
.ghead .gi{
  width:26px; height:26px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-ink);
}
.ghead .gi .ic{ width:15px; height:15px; }
.ghead .gstep{ margin-left:auto; font-size:11.5px; font-weight:500; color:var(--muted); }

.field{ margin-bottom:12px; }
.field:last-child{ margin-bottom:0; }
.field label{ display:block; font-size:12px; font-weight:500; color:var(--muted); margin-bottom:5px; }
.field label.req::after{ content:" *"; color:var(--danger); }
.field-inline{ display:flex; align-items:flex-end; gap:12px; }
.field-inline .stepper{ flex:none; }
.field-aside{ font-size:11.5px; color:var(--muted); padding-bottom:13px; white-space:nowrap; }
.fhint{ font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.5; }
.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }

.ctrl{
  width:100%; height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--radius-xs);
  background:#FDFCFA; color:var(--ink);
  font-size:16px; font-family:inherit; font-weight:500;
  outline:none; transition:border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance:none; appearance:none;
}
.ctrl:focus{ border-color:var(--brand); background:#fff; box-shadow:var(--ring); }
select.ctrl{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E68' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:32px;
}
textarea.ctrl{ height:auto; min-height:78px; padding:10px 12px; resize:vertical; line-height:1.55; }
input.ctrl[type=file]{ height:auto; padding:9px 10px; font-size:13px; background:#fff; }

/* 步进器 */
.stepper{
  display:flex; align-items:center; width:132px; height:44px;
  border:1px solid var(--line); border-radius:var(--radius-xs); background:#fff; overflow:hidden;
}
.stepper button{
  width:40px; height:100%; border:0; background:transparent;
  color:var(--ink-2); font-size:19px; line-height:1; cursor:pointer; font-family:inherit;
  transition:background .15s, color .15s;
}
.stepper button:hover{ background:var(--brand-50); color:var(--brand-ink); }
.form-group .stepper input,
.stepper input{
  flex:1; min-width:0; width:auto; border:0; border-radius:0; padding:0;
  background:transparent; text-align:center; font-size:16px; font-weight:650;
  color:var(--ink); outline:none; -moz-appearance:textfield;
  font-family:inherit; height:100%;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* 胶囊 */
.slot-group{ display:flex; gap:8px; flex-wrap:wrap; }
.slot-btn{
  padding:9px 14px; border:1px solid var(--line); border-radius:999px;
  background:#FDFCFA; color:var(--ink-2); font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:5px;
  transition:background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.slot-btn:hover{ border-color:#D9CFC6; }
.slot-btn.active{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 8px 16px -8px rgba(194,65,12,.85);
}
.slot-btn .pg{ font-size:11px; color:var(--muted); }
.slot-btn.active .pg{ color:#FFE6D5; }
.slot-btn.sm{ padding:7px 12px; font-size:12.5px; }

.switch-row{ display:flex; align-items:center; gap:10px; }
.switch-title{ font-size:14px; font-weight:650; color:var(--ink); }

.date-row{ display:flex; align-items:center; gap:8px; }
.date-row .ctrl{ flex:1; min-width:0; }
.date-sep{ font-size:12px; color:var(--muted); flex:none; }
.pkg-remark{
  margin-top:10px; padding:10px 12px; border-radius:var(--radius-xs);
  background:var(--brand-50); color:var(--brand-ink); font-size:12px; font-weight:500;
}
.pkg-remark.empty-pkg{ background:var(--line-2); color:var(--muted); font-weight:400; }
.tag-line{
  display:block; margin-top:10px; padding:9px 12px; border-radius:var(--radius-xs);
  background:var(--line-2); color:var(--ink-2); font-size:12.5px; font-weight:500;
}

/* 吸底合计 */
.order-sum{
  position:sticky; z-index:25; bottom:0;
  display:flex; align-items:center; gap:12px;
  margin-top:6px; padding:12px 14px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 8px 20px -16px rgba(26,26,24,.4);
}
.order-sum .os-l{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.order-sum .os-l span{ font-size:11.5px; color:var(--muted); }
.order-sum .os-l b{ font-size:22px; font-weight:700; color:var(--brand); letter-spacing:-.02em; }
.order-sum .btn{ flex:none; min-width:148px; height:46px; }
@media (max-width:720px){ .order-sum{ bottom:calc(var(--tabbar-h) + 10px); } }

/* ---------- 8. 订单列表 ---------- */
.seg{ display:flex; gap:8px; margin:0 0 14px; overflow-x:auto; scrollbar-width:none; }
.seg::-webkit-scrollbar{ display:none; }
.seg a{
  flex:none; padding:7px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  font-size:13px; font-weight:600; cursor:pointer; transition:all .18s;
}
.seg a.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

.ord-group{
  display:flex; align-items:center; gap:8px;
  margin:16px 0 8px; font-size:12px; font-weight:650; color:var(--muted);
  letter-spacing:.02em;
}
.ord-group span{
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--line-2); color:var(--ink-2);
  font-size:11px; line-height:18px; text-align:center;
}
.ord-group:first-child{ margin-top:0; }

.list-item{
  border-radius:var(--radius); border:1px solid var(--line);
  padding:14px; margin-bottom:10px; background:#fff; box-shadow:var(--shadow-sm);
}
.list-item .icon{
  width:36px; height:36px; border-radius:10px;
  background:var(--brand-50); color:var(--brand-ink); flex:none;
}
.list-item .icon .ic{ width:19px; height:19px; }
.li-head{ display:flex; align-items:center; gap:8px; }
.list-item .title{ font-size:14.5px; font-weight:650; color:var(--ink); }
.list-item .amount{ margin-left:auto; font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.list-item .sub{ font-size:12px; color:var(--muted); margin-top:3px; }
.li-foot{
  display:flex; align-items:center; gap:6px;
  margin-top:10px; padding-top:9px; border-top:1px dashed var(--line);
  font-size:11.5px; color:var(--muted);
}
.li-meta{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.li-arrow{ margin-left:auto; color:var(--brand); font-weight:650; }
.list-item.finished{ background:#FCFBF9; border-color:var(--line-2); box-shadow:none; opacity:.86; }
.list-item.finished .icon{ background:#F1EFEB; color:var(--muted); }
.list-item .badge{ font-size:11px; padding:2px 8px; }

.badge{ border-radius:999px; font-weight:650; font-size:11.5px; padding:3px 9px; }
.badge.green{ background:var(--leaf-bg); color:var(--leaf); }
.badge.blue{ background:var(--info-bg); color:var(--info); }
.badge.orange{ background:var(--warn-bg); color:var(--warn); }
.badge.red{ background:var(--danger-bg); color:var(--danger); }
.badge.gray{ background:#F1EFEB; color:var(--muted); }
.badge.lite{ box-shadow:none; }

/* 左滑删除块 */
.swipe-row{ position:relative; overflow:hidden; border-radius:var(--radius); }
.swipe-del{
  position:absolute; top:0; right:0; bottom:0; width:76px;
  border:0; background:var(--danger); color:#fff; font-size:13px; font-weight:650;
  font-family:inherit; cursor:pointer;
}
.swipe-del.muted{ background:#C9C3BA; }

/* ---------- 9. 我的 ---------- */
.profile-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:18px 16px; margin:14px 0 12px; box-shadow:var(--shadow-sm);
}
.pc-top{ display:flex; align-items:center; gap:12px; }
.pc-av{
  width:52px; height:52px; border-radius:999px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:700;
  background:var(--brand-50); color:var(--brand-ink); border:1px solid #F6DCC9;
}
.pc-who{ min-width:0; }
.pc-who b{ display:block; font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
.pc-who span{ font-size:12px; color:var(--muted); }
.pc-role{
  margin-left:auto; flex:none;
  font-size:11.5px; font-weight:650; padding:5px 10px; border-radius:999px;
  background:var(--leaf-bg); color:var(--leaf); border:1px solid var(--leaf-line);
}
.pc-metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:16px; background:var(--line); border-radius:var(--radius-sm); overflow:hidden;
}
.pc-metrics > div{ background:#FDFCFA; padding:11px 8px; text-align:center; }
.pc-metrics b{ display:block; font-size:18px; font-weight:700; letter-spacing:-.02em; }
.pc-metrics small{ font-size:11px; color:var(--muted); }

.grid6{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  margin:0 0 12px; overflow:hidden;
}
.grid6 a{
  background:var(--card); padding:16px 8px 14px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:12px; color:var(--ink-2); position:relative; transition:background .18s;
}
.grid6 a:hover{ background:#FDFCFA; }
.grid6 .gi{
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-ink);
}
.grid6 .gi .ic{ width:18px; height:18px; }
.grid6 .gdot{
  position:absolute; top:10px; right:calc(50% - 26px);
  min-width:15px; height:15px; padding:0 4px; border-radius:999px;
  background:var(--danger); color:#fff; font-size:9px; font-style:normal;
  line-height:15px; text-align:center;
}

.mlist{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:12px; box-shadow:var(--shadow-sm);
}
.ml-title{ padding:12px 14px 6px; font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.05em; }
.ml-item{
  display:flex; align-items:center; gap:10px;
  padding:14px; font-size:14px; color:var(--ink-2);
  border-top:1px solid var(--line-2); transition:background .18s;
}
.ml-item:first-of-type{ border-top:0; }
.ml-item:hover{ background:#FDFCFA; }
.ml-ic{ color:var(--muted); display:flex; }
.ml-ic .ic{ width:17px; height:17px; }
.ml-arrow{ margin-left:auto; color:#BEB8AF; }
.ml-item.danger{ color:var(--danger); }
.ml-item.danger .ml-ic{ color:var(--danger); }

/* ---------- 10. 桌面 ---------- */
@media (min-width:900px){
  .home-hero{
    margin:0 0 16px; padding:18px 20px;
    border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
  }
  .trust-bar{ display:none; }
  .svc-card{ padding:18px 8px 16px; }
  .svc .st{ width:48px; height:48px; border-radius:13px; }
  .svc .st .ic{ width:23px; height:23px; }
  .svc .sl{ font-size:12.5px; }

  .hero-wrap{
    display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
    margin:36px 0 40px;
  }
  .hero-copy h1{ font-size:44px; line-height:1.16; letter-spacing:-.035em; }
  .hero-copy p{ font-size:15px; margin:16px 0 26px; max-width:430px; }
  .hero-copy .btns{ gap:12px; }
  .hero-copy .btns .btn{ flex:none; padding:0 26px; height:48px; font-size:15px; }

  .hero-aside{
    display:block; background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-lg, 22px); padding:20px;
    box-shadow:0 24px 60px -40px rgba(26,26,24,.5);
  }
  .ha-head{ font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.02em; margin-bottom:14px; }
  .ha-list{ display:grid; gap:10px; }
  .ha-row{
    display:flex; align-items:center; gap:12px;
    padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:#FDFCFA; transition:all .18s;
  }
  .ha-row:hover{ background:#fff; border-color:#D9CFC6; }
  .ha-tile{
    width:40px; height:40px; border-radius:11px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--brand-50); color:var(--brand-ink);
  }
  .ha-tile .ic{ width:21px; height:21px; }
  .ha-name{ font-size:14.5px; font-weight:650; }
  .ha-price{ margin-left:auto; display:flex; align-items:baseline; gap:2px; }
  .ha-price b{ font-size:24px; font-weight:700; color:var(--brand); letter-spacing:-.02em; }
  .ha-price small{ font-size:11px; color:var(--muted); }
  .ha-note{
    display:flex; align-items:center; gap:6px; margin-top:14px;
    font-size:11.5px; color:var(--muted);
  }
  .ha-note .ic{ width:13px; height:13px; color:var(--leaf); flex:none; }

  /* 桌面上类型已在 Hero 面板，不重复展示卡片区 */
  .cats-section{ display:none; }

  .section-head{ margin:36px 0 14px; }
  .section-head h2{ font-size:20px; }

  .steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0 0 8px; }
  .step{
    flex-direction:column; gap:10px; padding:18px;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); padding-bottom:18px;
  }
  .step::before{ display:none; }
  .step .n{ width:26px; height:26px; margin-bottom:0; }
  .step p{ font-size:12px; }

  .grid.cols-2{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .order-sum{ bottom:0; }
}

/* ---------- 11. 登录 / 注册页微调 ---------- */
.auth-wrap{ border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.auth-tabs a.active{ background:var(--brand); color:#fff; }

/* ---------- 12. 无障碍与动效 ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- 13. 覆盖 app.css 遗留的组件外观 ---------- */
/* 分段筛选：原 .seg 是「分段控件」容器（带底与内边距），这里只保留按钮本身 */
#ordSeg{ background:transparent; border:0; padding:0; gap:8px; }

/* 订单卡里的「续费」按钮：从红色系改回品牌色描边 */
.order-item .btn-renew{
  background:var(--brand-50); border:1px solid var(--brand-100);
  color:var(--brand-ink); border-radius:999px;
}
.order-item .btn-renew:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* 四步流程：app.css 在窄屏隐藏了说明文字，这里恢复 */
@media (max-width:760px){
  .step p{ display:block; }
}

/* 首页类型卡：原型是移动端两列，覆盖 .grid.cols-2 的单列规则 */
.cats-section .grid.cols-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (max-width:400px){
  .cat-card .cc-price b{ font-size:22px; }
}

/* ---------- 14. 桌面：表单型页面收窄成单列 ----------
   发布订单 / 我的 / 订单列表本质是「App 页面」，拉到 1040 会摊薄信息密度，
   统一收到 780；首页保持 1080。用 :has() 按页面内特征节点选择，不改模板。 */
@media (min-width:900px){
  .main:has(#orderSum),
  .main:has(.profile-card),
  .main:has(#ordSeg){
    max-width:780px;
  }
  .main:has(.profile-card) .profile-card,
  .main:has(#ordSeg) .list-item{ margin-bottom:12px; }
  .grid6 a{ padding:20px 8px 18px; }
  .grid6 .gi{ width:38px; height:38px; border-radius:11px; }
  .grid6 .gi .ic{ width:20px; height:20px; }
}

/* ---------- 15. 点击热区修正（WCAG 2.5.8 ≥24，移动端实测目标 ≥40） ---------- */
/* 顶栏定位与客服：视觉不变，撑开可点区域 */
.home-hero .hh-loc{ padding:8px 0; margin:-8px 0; }
.home-hero .hh-service{ padding:10px 8px; margin:-10px -8px -10px 0; font-size:13px; }
/* 搜索按钮：36 → 40，输入行同步 46 → 48 */
.hh-search{ height:48px; }
.hh-search .hs-btn{ height:40px; padding:0 16px; }
/* 区块右侧「去下单 ›」：48×21 → 约 60×40 */
.section-head .more{
  display:inline-flex; align-items:center;
  min-height:40px; padding:0 2px; margin:-10px 0;
}
/* 分段筛选：37 → 40 */
.seg a{ padding:10px 14px; }
/* 订单卡「续费」：29 → 36 */
.order-item .btn-renew{ padding:8px 14px; min-height:36px; display:inline-flex; align-items:center; }
/* 胶囊：39 → 40；小号 33 → 34 */
.slot-btn{ padding:10px 16px; }
.slot-btn.sm{ padding:8px 12px; }
/* 小按钮（更换头像等）：38 → 40 */
.btn-sm{ padding:10px 16px; }
/* 品牌 logo 链接：34 → 40 */
.brand{ padding:3px 0; }

/* ---------- 16. 空态：订单不存在 / 无数据 ---------- */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; min-height:210px; margin:10px 0; padding:40px 20px;
  background:var(--card); border:1px dashed var(--line); border-radius:var(--radius);
  color:var(--muted); font-size:14px; text-align:center;
}
.empty .big{ display:block; font-size:0; margin:0; opacity:1; }
.empty .big svg{ width:34px; height:34px; color:#C9C3BA; }
.empty .btn{ margin-top:4px; }

/* 桌面 Hero 面板的空结果提示 */
.ha-empty{
  padding:18px 14px; border:1px dashed var(--line); border-radius:var(--radius-sm);
  background:#FDFCFA; color:var(--muted); font-size:12.5px; text-align:center;
}

/* ---------- 17. 零散热区补齐 ---------- */
.brand{ padding:5px 0; }
.slot-btn.sm{ padding:9px 13px; }

/* 页尾「返回」这类纯文字链接（原 23×13），改成明确的按钮 */
p.hint.text-center > a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 18px; margin-top:-6px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  color:var(--ink-2); font-size:13px; font-weight:600;
}
p.hint.text-center > a:hover{ border-color:#D9CFC6; background:#FDFCFA; }

/* ---------- 18. 订单详情页对齐（JS 渲染，仅改样式） ---------- */
.page-head.flex-between{ align-items:center; }
.page-head.flex-between h1{ margin:0; }

/* 信息行：标签弱化、数值加强、行间虚线分隔 */
#detail > .card > .flex-between{
  padding:9px 0; font-size:13.5px; color:var(--ink);
}
#detail > .card > .flex-between:first-child{ padding-top:2px; }
#detail > .card > .flex-between + .flex-between{ border-top:1px dashed var(--line-2); }
#detail > .card > .flex-between .muted{ font-size:12.5px; }
#detail > .card > .flex-between > b,
#detail > .card > .flex-between > span:last-child{ font-weight:650; text-align:right; }
#detail .ord-no{ font-size:12.5px; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
#detail .card .amount{ font-size:18px; color:var(--brand); font-weight:700; }
#detail .card h3{ font-size:14px; font-weight:650; margin-bottom:10px; }

/* 底部操作区：宽屏右对齐、窄屏平铺等宽按钮 */
#detail > .card:last-child{ display:flex; flex-wrap:wrap; gap:10px; text-align:left; }
#detail > .card:last-child .btn{
  flex:1 1 120px; min-height:44px; margin:0;
}
@media (min-width:520px){
  #detail > .card:last-child{ justify-content:flex-end; }
  #detail > .card:last-child .btn{ flex:0 0 auto; min-width:112px; }
}

/* ---------- 19. 最后两个热区（续费 36→40、小胶囊 37→40） ---------- */
.order-item .btn-renew{ min-height:40px; padding:9px 14px; }
.slot-btn.sm{ min-height:40px; padding:10px 13px; }

/* ============================================================
   20. 兼职端（顺路接单 / 我的路线 / 我的接单 / 提现 / 我的）
   2026-10-26 | 此前兼职端全部沿用 app.css 旧外观，
   与用户端 v3 是两套视觉。本节省去模板重写，只用样式对齐：
   容器、卡片、数字、徽章、按钮全部沿用 v3 变量与尺度。
   回滚：删除本节即可，不影响用户端。
   ============================================================ */

/* ---- 20.1 页头与提示条 ---- */
.main > .page-head h1{ letter-spacing:-.02em; }
/* 「您还不是兼职 / 审核中 / 已驳回」落在 .card 里，统一成 v3 卡面 */
.main > .card[style*="var(--warn)"],
.main > .card[style*="var(--danger)"]{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 14px; margin:0 0 12px;
  border-width:1px; border-radius:var(--radius);
  font-size:13.5px; line-height:1.55; color:var(--ink-2);
  box-shadow:none;
}
.main > .card[style*="var(--warn)"]{ background:var(--warn-bg); border-color:#EFDCC0; }
.main > .card[style*="var(--danger)"]{ background:var(--danger-bg); border-color:#F0D3CD; }
.main > .card[style*="var(--warn)"] > .btn,
.main > .card[style*="var(--danger)"] > .btn{ margin-left:auto; flex:none; min-height:40px; display:inline-flex; align-items:center; }

/* ---- 20.2 概览条（route-sum）：白卡 + 大数字 + 主按钮 ---- */
.route-sum{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 15px; margin:0 0 14px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.rs-main{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.rs-main b{ font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.rs-main b.amount,
.rs-main .amount{ color:var(--brand); font-size:19px; }
.rs-main i{ color:var(--line); }
.rs-side{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rs-side .btn{ min-height:40px; display:inline-flex; align-items:center; }
.rs-side .btn-primary{ padding:0 15px; font-size:13px; }

/* ---- 20.3 跑单包（route-stop）---- */
.route-stop{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  margin:0 0 11px; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:border-color .18s, box-shadow .18s;
}
.route-stop:hover{ border-color:#DCD4CB; }
.stop-head{
  display:flex; align-items:center; gap:11px;
  padding:12px 13px; background:#FDFCFA; border-bottom:1px solid var(--line-2);
}
.stop-no{
  width:28px; height:28px; border-radius:9px; flex:none;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums;
  box-shadow:0 6px 14px -8px rgba(194,65,12,.9);
}
.stop-addr{ flex:1 1 auto; min-width:0; }
.stop-title{
  font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.32;
  display:flex; align-items:center; gap:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stop-meta{
  margin-top:3px; font-size:12px; color:var(--muted); line-height:1.35;
  font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stop-pkg{
  margin-top:2px; font-size:11.5px; color:#9C9C95;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stop-side{ display:flex; align-items:center; gap:6px; flex:none; margin-left:auto; }
.stop-side .btn{ min-height:40px; display:inline-flex; align-items:center; padding:0 13px; font-size:13px; }

/* ---- 20.4 户级一行（mini-order）---- */
.stop-orders{ padding:0 4px 0 10px; }
.mini-order{
  display:flex; align-items:center; gap:9px;
  padding:10px 4px; border-bottom:1px dashed var(--line-2);
}
.mini-order:last-child{ border-bottom:0; }
.seq-no{
  flex:none; width:22px; height:22px; border-radius:999px;
  background:var(--brand-50); color:var(--brand-ink);
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; justify-content:center;
}
.mini-main{ flex:1 1 auto; min-width:0; }
.mini-line1{
  display:flex; align-items:center; gap:6px; min-width:0;
  font-size:14.5px; font-weight:650; color:var(--ink); line-height:1.3;
}
.mini-line1 .room{ flex:none; max-width:9.5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-sub{ flex:1 1 auto; min-width:0; font-size:12px; font-weight:500; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-order > .amount{
  flex:none; font-size:16px; font-weight:700; color:var(--ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.mini-order .btn{ flex:none; min-height:40px; display:inline-flex; align-items:center; padding:0 14px; font-size:13px; }
.mini-acts{ display:flex; align-items:center; gap:6px; flex:none; }

/* ---- 20.5 新单高亮（业务语义保留红色）---- */
.route-stop.alert-stop{ border-color:#EBB8B0; box-shadow:0 0 0 3px rgba(179,56,42,.09), var(--shadow-sm); }
.mini-order.alert-order{ background:var(--danger-bg); border-radius:var(--radius-xs); padding:10px 8px; }
.mini-order.alert-order .seq-no{ background:var(--danger); color:#fff; }
.stop-title .badge.red{ flex:none; }

/* ---- 20.6 我的路线：日切换 + 地图卡 + 路线动作 ---- */
.day-tabs{
  flex:0 0 100%; display:flex; gap:4px;
  padding:4px; margin:0 0 12px;
  background:var(--line-2); border-radius:var(--radius-sm);
}
.day-tab{
  flex:1; border:0; background:transparent; cursor:pointer; font-family:inherit;
  border-radius:9px; padding:8px 2px; min-height:44px;
  font-size:12.5px; font-weight:650; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; line-height:1.25;
  transition:background .18s, color .18s, box-shadow .18s;
}
.day-tab i{ font-style:normal; font-size:10.5px; font-weight:700; opacity:.72; }
.day-tab:hover{ color:var(--brand-ink); }
.day-tab.active{ background:var(--card); color:var(--brand-ink); box-shadow:var(--shadow-sm); }
.day-tab.active i{ opacity:1; }

/* 圆形/胶囊动作按钮：34 → 40（可点区域） */
.ibtn{ height:40px; min-width:40px; border-radius:var(--radius-xs); font-size:15px; }
.ibtn-nav{ background:var(--brand-50); color:var(--brand-ink); }
.ibtn-nav:hover{ background:var(--brand-100); }
.ibtn-done{
  background:var(--brand); color:#fff; font-size:13px; font-weight:650; padding:0 13px;
  box-shadow:0 8px 16px -10px rgba(194,65,12,.9);
}
.ibtn-done[disabled]{ background:#D8D3CB; box-shadow:none; }
.ibtn-shot.need{ background:var(--warn-bg); color:var(--warn); }
.ibtn-shot.done{ background:var(--leaf-bg); color:var(--leaf); }
.drag-handle{ color:#C9C3BA; }

/* ---- 20.7 提现：三格指标 + 表单 ---- */
.main > .grid.cols-3{ gap:10px; margin-bottom:14px; }
.main > .grid.cols-3 > .card{
  padding:14px 8px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.main > .grid.cols-3 > .card .muted{ font-size:11.5px; }
.main > .grid.cols-3 > .card .amount,
.main > .grid.cols-3 > .card > div:not(.muted){ font-size:22px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
#applyBtn{ min-height:46px; }
#list .list-item{ margin-bottom:10px; }

/* ---- 20.8 我的资料：身份卡 + 宫格 + 列表 ---- */
/* 兼职身份卡复用用户端 profile-card，仅换指标为 4 列 */
.wk-card .pc-role{ background:var(--brand-50); color:var(--brand-ink); border-color:var(--brand-100); }
.wk-card .pc-metrics{ grid-template-columns:repeat(3,1fr); }
.wk-card .pc-metrics b{ font-variant-numeric:tabular-nums; }

/* 服务片区：app.css 的分段控件被 v3 的 .seg（胶囊筛选）覆盖，这里按 id 复原 */
#areaSeg{
  display:flex; gap:3px; padding:3px; margin:0 0 4px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:visible;
}
#areaSeg label{ flex:1; position:relative; margin:0; }
#areaSeg input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
#areaSeg span{
  display:block; text-align:center; padding:11px 8px; min-height:44px;
  border-radius:8px; font-size:13px; font-weight:650; color:var(--muted);
  cursor:pointer; transition:background .18s, color .18s, box-shadow .18s;
}
#areaSeg input:checked + span{ background:var(--card); color:var(--brand-ink); box-shadow:var(--shadow-sm); }
#areaSeg input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:1px; }

/* 服务片区里的定位/保存 */
.area-foot .hint{ font-size:12px; }
#paneCircle .radius-row input{ background:#FDFCFA; }
.radius-row input{ min-height:42px; }

/* 邀请下单入口：整行可点，箭头靠右 */
.invite-cta{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; margin:0 0 12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:border-color .18s, background .18s;
}
.invite-cta:hover{ border-color:#DCD4CB; background:#FDFCFA; }
.invite-cta .tile{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--brand-50); color:var(--brand-ink); flex:none; }
.invite-cta .tile .ic{ width:19px; height:19px; }
.invite-cta .ic-body{ flex:1; min-width:0; display:block; }
.invite-cta .ic-body b{ display:block; font-size:14px; font-weight:700; color:var(--ink); }
.invite-cta .ic-body span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.invite-cta .ic-chev{ color:#BEB8AF; flex:none; }
.invite-cta .ic-chev .ic{ width:16px; height:16px; }

/* 旧的 4 列入口宫格：兼职端若仍用 entry-grid，统一成 v3 三列宫格观感 */
.entry-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.entry{ padding:14px 4px; border-radius:var(--radius-xs); }
.entry .tile{ width:40px; height:40px; border-radius:10px; background:var(--brand-50); color:var(--brand-ink); }
.entry .tile .ic{ width:19px; height:19px; }
.entry .lb{ font-size:11.5px; font-weight:600; color:var(--ink-2); }
.entry:hover{ background:#FDFCFA; }

/* ---- 20.9 桌面：兼职端也是 App 页面，收窄到 780 ---- */
@media (min-width:900px){
  .main:has(.route-sum),
  .main:has(#map),
  .main:has(.wk-card){ max-width:820px; }
  .stop-head{ padding:14px 15px; }
  .stop-title{ font-size:15px; }
  .mini-order{ padding:11px 6px; }
  .rs-side .btn-primary{ height:42px; }
  .entry-grid{ gap:4px; }
}

/* ---- 20.10 窄屏：概览条与按钮换行不挤压 ---- */
@media (max-width:360px){
  .rs-main{ font-size:12px; }
  .rs-main b{ font-size:16px; }
  .rs-side{ width:100%; margin-left:0; }
  .rs-side .btn{ flex:1 1 auto; justify-content:center; }
  .stop-side .btn{ padding:0 11px; }
}

/* ============================================================
   21. 旧结构收尾（v3 只换了容器表皮，内部仍是 app.css 的老排版）
   2026-10-27 | 处理四类残留：
     ① 左滑删除块被 list-item 的外边距撑出「右侧色条」
     ② 订单卡底行过高：续费按钮 40 高压垮一行
     ③ 提现三格统计在 ≤720px 掉成 2 列（2+1 排布）
     ④ 地图卡标题「地图规划」被挤成两行
   另统一 section-title 与金额字号层级。
   ============================================================ */

/* ---- 21.1 左滑行：外边距交给 .swipe-row，卡内不再留白 ----
   注意：本节 20.7 有一条 #list .list-item{margin-bottom:10px}（特异性 1,1,0），
   会压过 .swipe-row .list-item（0,2,0）；凡是与 #list 内元素冲突的覆盖，
   一律带上 #list 前缀，否则写了也不生效。 */
#list .swipe-row{ margin:0 0 10px; }
#list .swipe-row .list-item,
#list .swipe-row .order-item{ margin-bottom:0; }
/* 宽度不动：app.js 里 SWIPE_W=76 与 .swipe-del 的 width 必须一致，改了会漏缝 */
.swipe-del{ font-size:12.5px; }

/* ---- 21.2 订单卡：底行收紧，续费按钮回到胶囊身材（热区仍靠透明内边距保住）---- */
.order-item .li-head{ align-items:center; }
.order-item .li-head .amount{ font-size:17px; font-weight:700; letter-spacing:-.02em; }
.order-item .sub{ margin-top:4px; }
.order-item .li-foot{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--line-2); }
.order-item .li-meta{ font-size:11.5px; }
.order-item .li-meta .dot{ color:var(--line); }
.order-item .btn-renew{
  flex:none; min-height:0; padding:6px 13px; font-size:12.5px; font-weight:650;
  border-radius:999px; background:var(--brand-50); color:var(--brand-ink);
  border:1px solid var(--brand-100); line-height:1.4;
}
.order-item .btn-renew:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.order-item .li-arrow{ font-size:15px; }
.order-item.finished .amount{ color:var(--muted); }

/* ---- 21.3 提现：三格统计保持一行（app.css 在 ≤720 会掉成 2 列）----
   数字用 clamp 自适应：¥1231.70 这种 8 字符在 390 宽下要能塞进 1/3 列。 */
.main > .grid.cols-3{ gap:10px; margin-bottom:14px; }
.main > .grid.cols-3 > .card{
  padding:13px 7px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.main > .grid.cols-3 > .card .muted{ font-size:11.5px; }
.main > .grid.cols-3 > .card .amount,
.main > .grid.cols-3 > .card > div:not(.muted){
  font-size:clamp(15px, 4.7vw, 20px); font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.35;
}
@media (max-width:400px){
  .main > .grid.cols-3 > .card{ padding:11px 5px; }
  .main > .grid.cols-3 > .card .amount,
  .main > .grid.cols-3 > .card > div:not(.muted){ font-size:15px; letter-spacing:-.05em; }
}
/* app.css 在 ≤720px 把 cols-3 改成 2 列，这里拉回 3 列（提现统计要一行） */
@media (max-width:720px){
  .main > .grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---- 21.4 卡内「标题 + 右侧操作」不再把标题挤断行 ----
   注意别写成 min-width:0 + ellipsis：那样标题会变成「地图…」，
   正确做法是标题不收缩、让右侧说明文字换行。 */
.card .flex-between > b{ white-space:nowrap; }
.card > .flex-between:first-child > b{
  flex:0 0 auto; min-width:auto; overflow:visible; text-overflow:clip;
}
.card > .flex-between:first-child > .hint,
.card > .flex-between:first-child > span.hint{
  flex:1 1 auto; min-width:0; margin-left:10px;
  text-align:right; line-height:1.45;
}

/* ---- 21.5 分组标题统一到 v3 的字号层级（去掉旧的红竖线）---- */
.section-title{
  display:flex; align-items:baseline; gap:8px;
  margin:22px 0 10px; font-size:15.5px; font-weight:700;
  color:var(--ink); letter-spacing:-.01em;
}
.section-title::before{ content:none; }
.section-title + .card,
.section-title + .mlist{ margin-top:0; }

/* ---- 21.6 卡内小标题（h3）与 v3 详情页一致 ---- */
.card h3{ font-size:14px; font-weight:650; letter-spacing:-.01em; }

/* ---- 21.7 旧表格 / 旧登录标签一并归到 v3 观感 ---- */
.table-wrap{ border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.auth-tabs{ background:var(--line-2); border-radius:var(--radius-sm); }

/* ---- 21.8 邀请页对比表：左标签不换行，右结果右对齐可换行；超窄屏上下堆叠 ---- */
.comm-hero .ch-row{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:6px 0; opacity:.8;
}
.comm-hero .ch-row > span:first-child{ flex:none; white-space:nowrap; }
.comm-hero .ch-row > span:last-child{
  margin-left:auto; min-width:0; text-align:right;
  font-variant-numeric:tabular-nums;
}
.comm-hero .ch-row-hi{ opacity:1; }
@media (max-width:400px){
  .comm-hero .ch-row{ flex-direction:column; gap:2px; padding:7px 0; }
  .comm-hero .ch-row > span:last-child{ margin-left:0; text-align:left; }
}
.comm-hero{ border-radius:var(--radius); }

/* ---- 21.9 消息卡：标题+时间同行、正文两行截断、查看按钮瘦身 ---- */
#list .msg-item{ align-items:flex-start; padding:13px 14px; }
#list .msg-item > .icon{ margin-top:1px; }
#list .msg-item .body{ min-width:0; }
#list .msg-item .msg-head{ display:flex; align-items:baseline; gap:8px; }
#list .msg-item .msg-title{
  flex:1 1 auto; min-width:0; font-size:14px; font-weight:650; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#list .msg-item .msg-time{
  flex:none; font-size:11.5px; color:#9C9C95; font-variant-numeric:tabular-nums;
}
#list .msg-item .msg-body{
  margin-top:5px; font-size:12.5px; line-height:1.55; color:var(--muted);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
#list .msg-item .msg-ch{
  margin-top:6px; font-size:11px; color:#A8A29A;
}
#list .msg-item .msg-view{
  flex:none; align-self:center; margin-left:6px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:0 13px; border-radius:999px;
  background:var(--brand-50); color:var(--brand-ink);
  border:1px solid var(--brand-100);
  font-size:12.5px; font-weight:650;
}
#list .msg-item.unread{ border-color:var(--brand-100); background:#FFFDFB; }
#list .msg-item.unread .msg-title{ color:var(--ink); }
#list .msg-item .msg-dot{
  flex:none; width:6px; height:6px; border-radius:999px; background:var(--brand);
  align-self:center;
}

/* ============================================================
   22. 首页「怎么用」四步时间线：把线与圆心对齐
   2026-10-27 | 原来 .step 继承了 app.css 的 padding:2px 12px，
   而 .step::before 用写死的 left:13px 定位，结果连接线偏圆心约 9px，
   看起来像一条贴歪的竖线。改为：step 只留纵向内边距，线按圆心 13.5px 居中。
   ============================================================ */
.steps{
  display:flex; flex-direction:column;
  padding:14px 15px 12px; margin:2px 0 10px;
}
.step{
  display:flex; align-items:flex-start; gap:12px;
  padding:0 0 18px 0; position:relative;
}
.step:last-child{ padding-bottom:2px; }
.step::before{
  content:""; position:absolute; left:13px; top:31px; bottom:4px;
  width:1px; background:#F1EBE3;
}
.step:last-child::before{ display:none; }
.step .n{ margin-top:2px; }
.step h3{ margin:3px 0 3px; }

/* app.css 在 ≤760px 把 .step 改成纵向堆叠（圆在上、文字在下），四步要占掉
   430px；这里改回「圆在左、文字在右」，同样的信息只需一半高度。 */
@media (max-width:899px){
  .step{ flex-direction:row; align-items:flex-start; gap:12px; }
  .step .n{ margin-top:1px; }
  .step h3{ margin:2px 0 3px; }
}

/* 桌面：横向四步（v3 第 523 行起已有规则，这里只清掉旧内边距的副作用） */
@media (min-width:900px){
  .step{ padding:0; }
  .step h3{ margin:0 0 2px; }
}

/* ============================================================
   23. 底部留白：footer 给固定 tabbar 让位留得过多
   2026-10-27 | app.css 第 121 行在 ≤720px 给 footer 设了
   padding-bottom: calc(--tabbar-h + 38px)（实测 108px），
   而 tabbar 实际只占 76px，多出 32px；再加上 margin-top:40px，
   滚到底时内容末尾到页面底部空出 120px。
   收紧成「tabbar 高 + 安全区 + 14px」，上方间距同步减半。
   ============================================================ */
@media (max-width:720px){
  .footer{
    margin-top:18px;
    padding:12px 0 calc(var(--tabbar-h, 76px) + env(safe-area-inset-bottom, 0px) + 14px);
    font-size:12px;
  }
}
/* 登录/注册页不显示 tabbar（layout 传 showTabbar=false），不需要给它让位；
   内容常常不足一屏，用 flex 把 footer 压到底，避免版权文字悬在中间。 */
body:has(.auth-wrap){ min-height:100vh; display:flex; flex-direction:column; }
/* 注意：body 变 flex 后，.container 自带的 margin:0 auto 会让它收缩成内容宽度
   （实测 390 视口只剩 306px、左右各 42px 空），必须显式给满宽。 */
body:has(.auth-wrap) .main{ flex:1 0 auto; min-height:0; width:100%; margin-left:0; margin-right:0; }
body:has(.auth-wrap) .footer{ padding-bottom:18px; margin-top:auto; }

/* ---- 25. 登录页移动端：卡片与屏幕同宽 ----
   原来 auth-wrap 是居中窄卡（max-width 420），手机上左右各留 40px，
   内容被挤成一条。移动端改为贴边满宽，圆角/左右边框/投影一并去掉，
   内部仍保留 18px 内边距，输入框不至于顶到屏幕边缘。 */
@media (max-width:760px){
  body:has(.auth-wrap) .main{
    padding-left:0; padding-right:0;
    display:flex; flex-direction:column;
  }
  body:has(.auth-wrap) .auth-wrap{
    max-width:none; width:100%; flex:1 0 auto;
    margin:0 0 10px;
    border-radius:0; border-left:0; border-right:0;
    box-shadow:none;
  }
  /* 表单内容靠上、下方留白留在白卡里，避免卡片下面出现一块米色空洞 */
  body:has(.auth-wrap) .auth-form{ padding-bottom:36px; }
}

/* ============================================================
   24. 「已完成」卡片透出左滑删除块
   2026-10-27 | .list-item.finished 用了 opacity:.86，整卡半透明，
   于是下面那层 .swipe-del（左滑才该露出的删除块）从右侧 76px 透出来，
   已完成的订单卡右边像多了一条粉色块。
   改为不透明，改用文字/图标降色来表达「已完成」。
   ============================================================ */
#list .list-item.finished{ opacity:1; }
#list .list-item.finished .icon{ background:#F3F0EC; color:#B9B3AB; }
#list .list-item.finished .title,
#list .list-item.finished .title:hover,
#list .list-item.finished .sub,
#list .list-item.finished .meta,
#list .list-item.finished .amount{ color:var(--muted); }
#list .list-item.finished .badge{ filter:none; }

/* ---------- 20. 标签栏中间按钮：按原型取 plus，描边 2.2（其余 tab 图标 1.7）---------- */
.tabbar a.center .ti .ic{ stroke-width:2.2; }

/* ---------- 21. 桌面顶栏：按设计稿 dnav 重做（≥901 生效，手机端改用底部标签栏） ---------- */
@media (min-width:901px){
  .topbar-inner{ height:auto; padding:14px 0; gap:26px; }
  .topbar .brand-logo{ height:34px; border-radius:10px; }
  .topbar .brand-name{ font-size:17px; letter-spacing:-.01em; }
  .topbar .nav{ display:flex; gap:22px; flex:1; }
  .topbar .nav a{ padding:0; border-radius:0; background:none; font-size:13.5px; font-weight:500; color:var(--ink-2); }
  .topbar .nav a:hover{ color:var(--brand); background:none; }
  .topbar .nav a.active{ color:var(--brand); font-weight:650; background:none; }
  .tact{ margin-left:auto; display:flex; align-items:center; gap:16px; }
  .tact .tloc{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--muted); white-space:nowrap; }
  .tact .tloc svg{ width:13px; height:13px; flex:none; }
  .tact .tloc:hover{ color:var(--brand); }
  .tact .tlink{ position:relative; font-size:13.5px; color:var(--ink-2); white-space:nowrap; }
  .tact .tlink:hover{ color:var(--brand); }
  .tact .tdot{ position:absolute; top:-7px; right:-13px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; background:var(--danger); color:#fff; font-size:9px; font-weight:700; line-height:15px; text-align:center; font-style:normal; }
  .tact .btn-sm{ height:36px; display:inline-flex; align-items:center; padding:0 16px; font-size:13px; font-weight:600; border-radius:10px; white-space:nowrap; }
  .tact .btn-primary{ background:var(--brand); border-color:transparent; color:#fff; }
  .tact .btn-primary:hover{ background:var(--brand-ink); color:#fff; }
}
@media (max-width:900px){ .tact{ display:none !important; } }

/* ---------- 22. 桌面顶栏修正：按钮色特异性 + 平板区间（721–900）保留旧五项导航 ---------- */
.topbar .tact .btn-sm{ height:36px; display:inline-flex; align-items:center; padding:0 16px; font-size:13px; font-weight:600; border-radius:10px; background:#fff; border:1px solid var(--line); color:var(--ink); }
.topbar .tact .btn-sm:hover{ border-color:rgba(var(--brand-rgb),.45); color:var(--brand-ink); background:var(--brand-50); }
.topbar .tact .btn-primary{ background:var(--brand); border-color:transparent; color:#fff; }
.topbar .tact .btn-primary:hover{ background:var(--brand-ink); border-color:transparent; color:#fff; }
.nav-mid{ display:none !important; }
@media (min-width:721px) and (max-width:900px){
  .nav-desk{ display:none !important; }
  .nav-mid{ display:flex !important; }
}

/* ---------- 23. 桌面顶栏留白与右侧层级微调 ---------- */
@media (min-width:901px){
  .topbar-inner{ padding:14px 24px; }
  .tact{ gap:18px; }
  .tact .tlink{ display:inline-block; max-width:96px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; font-size:13px; color:var(--muted); }
  .tact .tlink:hover{ color:var(--brand); }
  .tact .tloc{ max-width:140px; }
  .tact .tloc span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ---------- 24. 桌面顶栏热区：文字链可视高度 22px，用内边距撑到 34px（WCAG 2.5.8 ≥24） ---------- */
@media (min-width:901px){
  .tact .tlink{ padding:6px 4px; margin:-6px -4px; }
  .tact .tloc{ padding:6px 2px; margin:-6px -2px; }
}
@media (min-width:901px){
  .tact .tlink.on{ color:var(--brand); font-weight:600; }
}
/* ---------- 25. 桌面：消息页与订单/我的/发布订单统一收窄到 780 ---------- */
@media (min-width:900px){
  .main:has(#unreadBadge){ max-width:780px; }
}

/* ---------- 26. 下单页吸底合计条：让开标签栏 + 安全区 + 中间凸起按钮 ----------
   原值 bottom: calc(var(--tabbar-h) + 10px) 只算了 76px 标签栏，
   iPhone 安全区 34px 与凸起按钮上浮 30px 都没算 → 真机上被盖住 54px。 */
@media (max-width:720px){
  .order-sum{ bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 38px); }
}

/* ---------- 27. 下单页：从「两个底栏打架」改成单一底栏 ----------
   原状态：吸底合计条(sticky) + 底部标签栏(tabbar) + 凸起按钮 三层叠在底部，
   中间还露出被截断的表单行。下单是流程内页面，不该有主导航。 */
.page-top{ display:flex; align-items:flex-start; gap:10px; margin:4px 0 14px; }
.pt-back{
  flex:none; width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink-2); margin-top:-2px;
}
.pt-back svg{ width:20px; height:20px; }
.pt-back:hover{ border-color:var(--brand); color:var(--brand); }
.pt-txt h1{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; }
.pt-txt p{ margin:4px 0 0; font-size:12.5px; color:var(--muted); }

@media (max-width:720px){
  body:has(#orderSum) .tabbar{ display:none !important; }
  body:has(#orderSum) .footer{ display:none !important; }
  body:has(#orderSum) .main{ padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
  .order-sum{
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    margin:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-left:0; border-right:0; border-bottom:0;
    border-radius:var(--radius) var(--radius) 0 0;
    box-shadow:0 -8px 22px -18px rgba(26,26,24,.45);
  }
  .order-sum .btn{ min-width:132px; }
}

/* ---------- 28. 下单页顶部：收成一条常驻返回栏 ----------
   原来 微信标题栏 + 品牌栏(topbar) + 内容标题 三层重复；
   流程页只需要「← 发布订单」，且滚动时保持可见。 */
@media (max-width:720px){
  body:has(#orderSum) .topbar{ display:none !important; }
  body:has(#orderSum) .page-top{
    position:sticky; top:0; z-index:35;
    margin:0 -16px 14px; padding:11px 16px 11px;
    background:rgba(250,248,245,.97);
    backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);
  }
  body:has(#orderSum) .page-top .pt-txt p{ display:none; }
}

/* ---------- 29. 去掉必填项的星号（app-v3 第 240 行加的 " *"） ---------- */
.field label.req::after,
.form-group label.req::after{ content:none !important; display:none !important; }

/* ---------- 30. 我的页信息架构重排 ----------
   原来「我的订单」「修改资料」各出现两次，六宫格的「发布订单」与底部主按钮重复，
   账户列表里的「充值记录」点开却是充值弹窗。现在：订单按状态入口 + 钱包组 + 账户组。 */
.pc-metrics a{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:11px 8px; background:#FDFCFA; }
.pc-metrics a:hover{ background:var(--brand-50); }
.pc-metrics a:hover b{ color:var(--brand-ink); }

.osw{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin:0 0 12px;
}
.osw a{ background:var(--card); display:flex; flex-direction:column; align-items:center; gap:3px; padding:15px 8px 13px; }
.osw a:hover{ background:#FDFCFA; }
.osw b{ font-size:21px; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1.1; }
.osw span{ font-size:11.5px; color:var(--muted); }
.osw a:hover b{ color:var(--brand); }

.ml-item .ml-val{ margin-left:auto; font-size:13px; color:var(--muted); }
.ml-item .ml-val.ok{ color:var(--leaf); font-weight:600; }
.ml-item .ml-act{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--brand); }
.ml-item .ml-val + .ml-arrow,
.ml-item .ml-act + .ml-arrow{ margin-left:6px; }

#rechargeSec{ scroll-margin-top:14px; }

/* ---------- 31. 我的地址（列表 / 编辑） ---------- */
.addr-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px; box-shadow:var(--shadow-sm);
}
.addr-card.on{ border-color:#F0C9B1; box-shadow:0 0 0 1px #F0C9B1, var(--shadow-sm); }
.ac-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ac-top b{ font-size:15px; font-weight:650; }
.ac-top .num{ font-size:13px; color:var(--muted); }
.ac-tag{
  margin-left:auto; font-style:normal; font-size:11px; font-weight:650;
  padding:3px 8px; border-radius:999px; background:var(--brand-50); color:var(--brand-ink);
  border:1px solid var(--brand-100);
}
.ac-addr{ font-size:13px; line-height:1.65; color:var(--ink-2); }
.ac-ops{
  display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:11px;
  border-top:1px dashed var(--line);
}
.ac-btn{
  display:inline-flex; align-items:center; min-height:34px; padding:0 12px;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; background:#fff;
}
.ac-btn:hover{ border-color:var(--brand-100); color:var(--brand-ink); background:var(--brand-50); }
.ac-btn.danger{ color:var(--danger); margin-left:auto; }
.ac-btn.danger:hover{ background:var(--danger-bg); border-color:#F0D2CC; }

.addr-foot{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
body:has(.addr-foot) .tabbar{ display:none !important; }
body:has(.addr-foot) .footer{ display:none !important; }
body:has(.addr-foot) .main{ padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }

.switch-row{
  display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--line); font-size:14px; color:var(--ink-2); cursor:pointer;
}
.switch-row span{ flex:1; }
.switch-row input{ display:none; }
.switch-row i{
  width:44px; height:26px; border-radius:999px; background:#E4E0DA; position:relative;
  transition:.2s; flex:none;
}
.switch-row i::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:.2s;
}
.switch-row input:checked + i{ background:var(--brand); }
.switch-row input:checked + i::after{ transform:translateX(18px); }

/* ---------- 32. 地址页顶部与下单页统一：手机端只留一条常驻返回栏 ---------- */
@media (max-width:720px){
  body:has(.addr-foot) .topbar{ display:none !important; }
  body:has(.addr-foot) .page-top{
    position:sticky; top:0; z-index:35;
    margin:0 -16px 14px; padding:11px 16px;
    background:rgba(250,248,245,.97);
    backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);
  }
}

/* ---------- 33. 下单页已选地址：一行摘要替代五级下拉 ---------- */
.addr-picked{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; margin-bottom:12px;
  background:#FDFCFA; border:1px solid var(--line); border-radius:var(--radius-sm);
}
.addr-picked .ap-main{ flex:1; min-width:0; }
.addr-picked b{ display:block; font-size:14px; font-weight:650; color:var(--ink); margin-bottom:3px; }
.addr-picked .ap-addr{ font-size:12.5px; line-height:1.55; color:var(--muted); }
.addr-picked .ap-change{
  flex:none; font-size:12.5px; font-weight:600; color:var(--brand-ink);
  padding:9px 14px; border-radius:999px; background:var(--brand-50); border:1px solid var(--brand-100);
}
.addr-picked .ap-change:hover{ background:var(--brand-100); }

/* ---------- 34. 下单页「保存为常用地址」勾选 ---------- */
.check-row{
  display:flex; align-items:center; gap:9px; margin-top:14px;
  font-size:13px; color:var(--ink-2); cursor:pointer;
}
.check-row input{
  width:18px; height:18px; flex:none; margin:0;
  accent-color:var(--brand);
}

/* ---------- 35. 下单页无地址时的引导卡 ---------- */
.addr-empty{
  text-align:center; padding:22px 16px;
  background:#FDFCFA; border:1px dashed var(--line); border-radius:var(--radius-sm);
}
.addr-empty .ae-t{ font-size:14px; font-weight:650; color:var(--ink); margin-bottom:5px; }
.addr-empty .ae-s{ font-size:12px; line-height:1.6; color:var(--muted); margin-bottom:14px; }
.addr-empty .btn{ display:inline-flex; align-items:center; height:38px; padding:0 18px; font-size:13px; }

/* ---------- 36. 充值记录页：手机端与地址页统一（只留一条常驻返回栏） ---------- */
@media (max-width:720px){
  body:has(#rechargeList) .topbar{ display:none !important; }
  body:has(#rechargeList) .page-top{
    position:sticky; top:0; z-index:35;
    margin:0 -16px 14px; padding:11px 16px;
    background:rgba(250,248,245,.97);
    backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);
  }
  body:has(#rechargeList) .page-top .pt-txt p{ display:none; }
}

/* ---------- 37. 下单页套餐日期：摘要 + 「修改」展开 ---------- */
.date-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.date-head .dh-label{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
.date-head .dh-edit{
  font-size:12.5px; font-weight:600; color:var(--brand-ink);
  padding:6px 12px; border:1px solid var(--brand-100); border-radius:999px;
  background:var(--brand-50); cursor:pointer;
}
.date-head .dh-edit:hover{ background:var(--brand-100); }
#dateRow{ margin-bottom:10px; }

/* ---------- 38. 套餐日期摘要：「修改」跟在日期范围后面 ---------- */
.pr-head{ display:flex; align-items:center; gap:10px; }
.pr-head .pr-dates{ flex:1; min-width:0; }
.pr-head .pr-edit{
  flex:none; font-size:12.5px; font-weight:600; color:var(--brand-ink);
  padding:5px 12px; border:1px solid var(--brand-100); border-radius:999px;
  background:#fff; cursor:pointer;
}
.pr-head .pr-edit:hover{ background:var(--brand-100); }

/* ---------- 39. 应付合计：金额大字突出 ---------- */
.order-sum .os-l span{ font-size:11.5px; color:var(--muted); letter-spacing:.02em; }
.order-sum .os-l b{ font-size:28px; font-weight:750; color:var(--brand); letter-spacing:-.03em; line-height:1.1; }
.order-sum .os-l b .cur{ font-size:16px; font-weight:650; font-style:normal; margin-right:2px; vertical-align:3px; }
.order-sum .os-l b{ font-variant-numeric:tabular-nums; }

/* ---------- 40. 接单页：站点距离徽标 ---------- */
.stop-title{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.stop-title .stop-name{ min-width:0; }
.stop-dist{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:650; line-height:1;
  padding:4px 7px; border-radius:999px;
  color:var(--brand-ink); background:var(--brand-50); border:1px solid var(--brand-100);
  flex:none;
}
.stop-dist svg{ width:11px; height:11px; }
.stop-dist.np{ color:var(--muted); background:#F4F2EE; border-color:var(--line); font-weight:600; }

/* ---------- 41. 距离徽标贴标题右侧，不再换行占高度 ---------- */
.stop-title{ flex-wrap:nowrap !important; }
.stop-title .stop-name{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stop-title .stop-dist{ order:99; margin-left:auto; }
.stop-title .badge{ flex:none; }

/* ---------- 42. 接单站点：楼栋不再被截断，距离移到信息行右侧 ---------- */
.stop-title{ flex-wrap:wrap !important; align-items:baseline; }
.stop-title .stop-name{ flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stop-title .stop-bld{ flex:none; font-weight:700; color:var(--ink); }
.stop-meta-row{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.stop-meta-row .stop-meta{ flex:1 1 auto; min-width:0; }
.stop-meta-row .stop-dist{ margin-left:auto; order:99; }