.chead{ position:fixed; top:0; left:0; right:0; z-index:90; backdrop-filter:blur(14px);
        background:rgba(242,248,247,.8); border-bottom:1px solid var(--line) }
.chead-in{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px }
.chead .sec-lab{ font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.16em; color:var(--muted) }
.cogrid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:44px; align-items:start }
.fs{ padding:28px; margin-bottom:22px }
.fs .fh{ font-weight:700; font-size:16px; margin-bottom:18px; display:flex; align-items:center; gap:10px }
.fs .fh .n{ width:24px; height:24px; border-radius:50%; background:var(--teal); color:#fff; font-size:12.5px;
            display:inline-flex; align-items:center; justify-content:center; font-weight:700 }
.fs .field{ margin-bottom:14px }
.dem{ font-family:ui-monospace,monospace; font-size:11px; color:var(--faint); margin-top:10px }
.sum{ padding:28px; position:sticky; top:86px }
.srow{ display:flex; justify-content:space-between; font-size:14.5px; color:#3d4f4b; padding:8px 0 }
.srow.total{ border-top:1px solid rgba(14,117,104,.25); margin-top:8px; padding-top:16px; font-weight:700; font-size:17px; color:var(--ink) }
.sitem{ display:flex; gap:14px; align-items:center; padding-bottom:16px; border-bottom:1px solid rgba(14,117,104,.15); margin-bottom:8px }
.sitem .th{ flex:none; width:62px; height:62px; border-radius:12px; background:linear-gradient(165deg,#ffffff,#e2f1ee);
            display:flex; align-items:center; justify-content:center }
.sitem .th img{ max-height:80% }
.sitem .nm{ font-weight:700; font-size:14px }
.sitem .ds{ font-size:12px; color:var(--muted) }
@media (max-width:980px){ .cogrid{ grid-template-columns:1fr } .sum{ position:static } }
.fs.done .fh .n{ background:var(--mint); color:var(--dark) }
.fs{ transition:border-color .3s ease }
.fs.done{ border-color:rgba(14,117,104,.4) }
.arr{ transition:color .3s ease }
.arr.hot{ color:var(--teal); font-weight:600 }
.cardwrap{ position:relative }
.cardwrap .brand-chip{ position:absolute; right:14px; bottom:11px; font-family:ui-monospace,monospace;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; color:#fff; background:var(--teal);
  border-radius:6px; padding:4px 8px; opacity:0; transform:translateY(3px); transition:opacity .25s ease, transform .25s ease }
.cardwrap .brand-chip.on{ opacity:1; transform:none }
.routewrap{ max-height:0; opacity:0; overflow:hidden; transition:max-height .5s cubic-bezier(.22,.8,.3,1), opacity .5s ease, margin-top .5s ease }
.routewrap.on{ max-height:420px; opacity:1; margin-top:18px }
.routemap{ display:block; width:100%; background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:16px; padding:14px }
.routemap .us{ fill:rgba(14,117,104,.06); stroke:rgba(14,117,104,.28); stroke-width:.8; stroke-linejoin:round }
.routemap .leader{ stroke:rgba(14,117,104,.45); stroke-width:1.2 }
.routemap .labbg{ fill:rgba(244,249,248,.5) }
.routemap .labd{ font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.06em; fill:var(--teal); font-weight:700 }
.routemap .citydot{ fill:var(--teal) }
.routemap .destdot{ fill:var(--teal); transform-origin:center; animation:destPulse 2s ease-in-out infinite }
@keyframes destPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.routemap .arc{ fill:none; stroke:var(--teal); stroke-width:2; stroke-linecap:round; stroke-dasharray:1000; stroke-dashoffset:1000 }
.routemap .arc.draw{ stroke-dashoffset:0; transition:stroke-dashoffset 1.1s ease }
.routemap .lab{ font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.08em; fill:var(--muted) }
.routemap .mover{ fill:#fff; stroke:var(--teal); stroke-width:2; offset-distance:0%; opacity:0 }
.routemap .mover.go{ offset-distance:100%; opacity:1; transition:offset-distance 1.1s ease, opacity .2s ease }
.routeline{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-top:10px; padding:0 4px }
.routeline b{ color:var(--teal) }
.paylock{ font-family:ui-monospace,monospace; font-size:11.5px; letter-spacing:.04em; color:var(--faint); line-height:1.6 }
.paywrap{ max-height:0; opacity:0; overflow:hidden; transition:max-height .6s cubic-bezier(.22,.8,.3,1), opacity .5s ease }
.paywrap.on{ max-height:680px; opacity:1 }
.payerr{ display:none; font-size:13.5px; line-height:1.55; color:#a63d28; background:rgba(166,61,40,.07);
         border:1px solid rgba(166,61,40,.25); border-radius:12px; padding:11px 14px; margin-top:14px }
.payerr.on{ display:block }
#placeOrderBtn.busy{ opacity:.55; pointer-events:none }

#destGroup.hold{ display:none }