/* ==========================================================================
   Dependable Drops v7 layer: v12 comps made real (Night Teal).
   Loads after app.css. Shapes: one notched corner (top-right 6px), the logo D
   for stop tiles, map pins, the + button and the swipe thumb.
   Motion: transform/opacity only, strong ease-out, critically damped springs in JS.
   ========================================================================== */
:root { --pin: #5A6466; --pin-flap: #8A9496; --tabbar-h: 68px; --cta-h: 60px; }
[data-theme="light"] { --pin: #6B7A79; --pin-flap: #9AA8A7; }
body { background: var(--bg); }
.dsh { display: block; overflow: visible; }
.lk-light { display: none; } [data-theme="light"] .lk-light { display: block; } [data-theme="light"] .lk-dark { display: none; }

/* press feedback: instant on pointer-down, 120ms strong ease-out */
.card, .sc, .cc, .al, .cta, .rhc .bk, .top .bk, .acts button, .mchips button, .seg8 button, .tabplus span { transition: transform 120ms var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
a.card:active, a.sc:active, .sc .cover:active ~ *, .cta:active, .bk:active, .acts button:active, .mchips button:active, .seg8 button:active { transform: scale(.975); }
.sc:has(.cover:active), .cc:has(.cover:active) { transform: scale(.985); }

/* section headers: plain caps, no accent dash */
.sh { font: 700 13px var(--font-display); letter-spacing: .12em; color: var(--text-2); margin: 26px 20px 10px; }
.sh > span:first-child::before, .sh:not(:has(span))::before { content: none; }
.sh > span:last-child { letter-spacing: .06em; }

/* ---------- tab bar + D-shaped add button ---------- */
.tabbar { background: var(--glass); border: 1px solid var(--line-strong); border-radius: 26px; box-shadow: 0 12px 30px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.tabbar a { color: var(--text-3); font: 600 11px/1.1 var(--font-ui); }
.tabbar a.on { color: var(--text); } .tabbar a.on .tabic { background: var(--accent); color: var(--accent-ink); }
.tabbar a .tabic { transition: background-color 180ms ease; }
.tabplus span { background: none !important; box-shadow: none !important; border-radius: 0 !important; width: 60px !important; height: 62px !important; margin-top: -18px; }
.tabplus .dsh { filter: drop-shadow(0 6px 14px rgba(25,211,197,.35)); }
.tabplus:active span { transform: scale(.92) !important; }
@media (prefers-reduced-transparency: reduce) { .tabbar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---------- Dashboard / Routes list (.v8) ---------- */
.v8 { padding: 8px 20px calc(env(safe-area-inset-bottom) + 120px); }
.v8 .brand { margin: 8px 0 0 -10px; } .v8 .brand img { height: 44px; width: auto; display: block; }
.v8 .brand img.lk-light { display: none; } [data-theme="light"] .v8 .brand img.lk-light { display: block; } [data-theme="light"] .v8 .brand img.lk-dark { display: none; }
.v8 .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 18px; }
.v8 .hi { font: 700 30px/1.1 var(--font-display); letter-spacing: -.02em; }
.v8 .hi small { display: block; font: 500 15px/1.4 var(--font-ui); color: var(--text-2); margin-top: 6px; letter-spacing: 0; }
.v8 .hi small b { color: var(--accent-text); font-weight: 700; }
.av { position: relative; flex: none; width: 48px; height: 48px; border-radius: 8px 20px 20px 8px; background: var(--surface-2); border: 1px solid var(--line-strong); display: grid; place-items: center; font: 700 17px var(--font-display); color: var(--accent-text); }
.av::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--success); border: 3px solid var(--bg); }
.av.off::after { background: var(--text-3); }
.onl { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; margin: 0 0 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px 20px 20px 8px; cursor: pointer; }
.onl input { position: absolute; opacity: 0; pointer-events: none; }
.onl .kn { position: relative; flex: none; width: 50px; height: 30px; border-radius: 99px; background: var(--surface-3); transition: background-color 200ms ease; }
.onl .kn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 6px 12px 12px 6px; background: var(--text-2); transition: transform 240ms var(--ease-out), background-color 200ms ease; }
.onl input:checked + .kn { background: var(--accent); } .onl input:checked + .kn::after { transform: translateX(20px); background: var(--accent-ink); }
.onl input:focus-visible + .kn { outline: 2px solid var(--accent); outline-offset: 3px; }
.onl b { display: block; font: 700 15px var(--font-ui); } .onl small { font: 500 13px var(--font-ui); color: var(--text-2); }
.v8 .sec { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 12px; }
.v8 .sec h2 { font: 700 13px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 0; }
.v8 .sec a { font: 700 15px var(--font-ui); color: var(--accent-text); min-height: 44px; display: flex; align-items: center; margin: -14px 0; padding-left: 12px; }
.v8 .sec .hint { font: 600 13px var(--font-ui); color: var(--text-3); }
.card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 11px 26px 26px 11px; padding: 18px; color: var(--text); }
.hero8 { background: linear-gradient(160deg, var(--surface-2), var(--surface) 70%); border-color: var(--line-strong); padding: 20px; box-shadow: 0 18px 40px rgba(0,0,0,.35); position: relative; overflow: hidden; }
.hero8::before { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(var(--accent-soft), transparent 70%); pointer-events: none; }
[data-theme="light"] .hero8 { box-shadow: 0 10px 30px rgba(8,9,10,.08); }
.v8 .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rid { font: 700 13px var(--font-display); letter-spacing: .12em; color: var(--text-2); text-transform: uppercase; }
.v8 .chip { white-space: nowrap; font: 700 12.5px var(--font-display); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px 12px 12px 6px; background: var(--accent); color: var(--accent-ink); display: inline-flex; gap: 6px; align-items: center; }
.v8 .chip.v { background: var(--sensitive-soft); color: var(--sensitive); } .v8 .chip.g { background: var(--surface-3); color: var(--text-2); } .v8 .chip.ok { background: var(--success-soft); color: var(--success); }
.v8 .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ttl { font: 700 24px/1.15 var(--font-display); letter-spacing: -.01em; margin: 14px 0 4px; }
.eta { font: 500 15px var(--font-ui); color: var(--text-2); } .eta b { color: var(--text); font-weight: 700; }
.step { display: flex; align-items: flex-start; margin: 22px 0 6px; padding: 0; list-style: none; }
.step .st { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; min-width: 0; }
.step .st:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 3px; border-radius: 2px; background: var(--surface-3); }
.step .st.done:not(:last-child)::after { background: var(--accent); }
.step .nd { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font-display); background: var(--surface-3); color: var(--text-3); z-index: 1; }
.step .nd svg.i { width: 15px; height: 15px; stroke-width: 3; }
.step .done .nd { background: var(--accent); color: var(--accent-ink); } .step .done.fail .nd { background: var(--error); color: #fff; }
.step .cur .nd { background: var(--bg); color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px var(--accent-soft); }
.step .cur.v .nd { color: var(--sensitive); box-shadow: 0 0 0 3px var(--sensitive), 0 0 0 8px var(--sensitive-soft); }
.step .lb { font: 600 13px/1.25 var(--font-ui); color: var(--text-3); margin-top: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.step .cur .lb { color: var(--text); font-weight: 700; } .step .done .lb { color: var(--text-2); }
.hero8 .next { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.hero8 .next .t { flex: 1; min-width: 0; } .hero8 .next b { display: block; font: 700 16px var(--font-ui); } .hero8 .next small { font: 500 14px var(--font-ui); color: var(--text-2); }
.goD { flex: none; width: 56px; height: 56px; display: grid; place-items: center; filter: drop-shadow(0 6px 14px rgba(25,211,197,.3)); transition: transform 200ms var(--ease-out); }
a.hero8:active .goD { transform: translateX(4px); }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px 6px; }
.strip > div { text-align: center; border-left: 1px solid var(--line); } .strip > div:first-child { border: 0; }
.strip b { display: block; font: 700 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; } .strip em { font-style: normal; color: var(--text-3); font-size: 16px; } .strip span { font: 600 13px var(--font-ui); color: var(--text-2); }
.alerts { display: grid; gap: 10px; }
.al { display: flex; gap: 14px; align-items: center; padding: 14px 16px; min-height: 64px; }
.al i { width: 42px; height: 42px; border-radius: 6px 16px 16px 6px; display: grid; place-items: center; background: var(--accent-soft); flex: none; color: var(--accent-text); }
.al i.w { background: var(--warning-soft); color: var(--warning); } .al i.r { background: var(--error-soft); color: var(--error); } .al i.g { background: var(--surface-3); color: var(--text-2); }
.al i svg.i { width: 20px; height: 20px; } .al .t { flex: 1; min-width: 0; } .al b { display: block; font: 700 15px var(--font-ui); } .al small { font: 500 13px var(--font-ui); color: var(--text-2); }
.al > svg.i { width: 18px; height: 18px; color: var(--text-3); }
.earn { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.earn .big { font: 700 34px/1 var(--font-display); letter-spacing: -.02em; margin-top: 8px; } .earn .lbl { font: 600 13px var(--font-ui); color: var(--text-2); } .earn .up { font: 700 13px var(--font-ui); color: var(--success); margin-top: 8px; }
.earn .bars { display: flex; gap: 6px; align-items: flex-end; height: 56px; margin: 0; } .earn .bars i { width: 12px; border-radius: 4px 4px 2px 2px; background: var(--surface-3); } .earn .bars i.on { background: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); } .earn .bars i.now { background: var(--accent); }
.promo { display: flex; gap: 10px; align-items: center; background: linear-gradient(135deg, var(--sens-bg), var(--surface) 75%); border-color: var(--sens-line); padding: 0 0 0 18px; overflow: hidden; }
.promo .t { flex: 1; padding: 18px 0; } .promo b { font: 700 19px/1.2 var(--font-display); display: block; margin-top: 10px; } .promo small { display: block; font: 500 14px/1.35 var(--font-ui); color: var(--text-2); margin: 6px 0 12px; }
.promo .lk { font: 700 15px var(--font-ui); color: var(--sensitive); display: inline-flex; gap: 6px; align-items: center; min-height: 32px; } .promo .lk svg.i { width: 16px; height: 16px; }
.promoart { flex: none; margin-right: -6px; }
.seg8 { display: flex; background: var(--surface); border-radius: 12px; padding: 3px; border: 1px solid var(--line); margin-bottom: 6px; }
.seg8 button { flex: 1; min-height: 44px; border: 0; background: none; font: 700 14px var(--font-ui); color: var(--text-2); border-radius: 10px; }
.seg8 .on { background: var(--surface-3); color: var(--text); }
.list .lrow { display: flex; gap: 14px; align-items: center; padding: 16px; margin-bottom: 10px; }
.list .lrow .t { flex: 1; min-width: 0; } .list b { display: block; font: 700 16px var(--font-ui); } .list small { font: 500 14px var(--font-ui); color: var(--text-2); }
.list .amt { font: 700 16px var(--font-display); }
.foot { font: 500 13px/1.45 var(--font-ui); color: var(--text-3); margin: 14px 4px 0; }
.v8 .pillwrap, .rs .pillwrap { margin: 10px 0 0; }

/* ---------- Route screen (.rs) ---------- */
.rs { padding: 6px 16px calc(env(safe-area-inset-bottom) + var(--cta-h) + 52px); }
.rhc { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px 24px 24px 10px; padding: 8px 12px 8px 8px; margin: 4px 0 2px; }
.bk { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); }
.rhc .bk { background: var(--surface-2); }
.rhc .tt { flex: 1; min-width: 0; }
.rhc .rid { display: block; font: 700 12.5px var(--font-display); letter-spacing: .1em; color: var(--accent-text); }
.rhc b { display: block; font: 700 19px/1.2 var(--font-display); }
.rhc small { display: block; font: 600 13px/1.35 var(--font-ui); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* fix: "Done by" gets its own line, never wraps mid-phrase */
.rhc small.l2 { color: var(--text-3); }
.ring2 { flex: none; }
.utabs { display: flex; border-bottom: 1px solid var(--line); margin: 0 -16px 12px; padding: 0 8px; position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sim .utabs { top: 47px; }
.utabs a { flex: 1; min-height: 48px; display: flex; gap: 7px; align-items: center; justify-content: center; font: 700 15px var(--font-display); color: var(--text-3); border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color 160ms ease, border-color 160ms ease; }
.utabs svg.i { width: 18px; height: 18px; } .utabs .on { color: var(--text); border-color: var(--accent); } .utabs .on svg.i { color: var(--accent-text); }
.srch { display: flex; align-items: center; gap: 10px; height: 48px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 4px 0 14px; margin-bottom: 10px; color: var(--text-3); }
.srch:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.srch > svg.i { width: 18px; height: 18px; } .srch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 500 16px var(--font-ui); color: var(--text); } .srch input::placeholder { color: var(--text-3); }
.srch input::-webkit-search-cancel-button { filter: grayscale(1); }
.srch button { width: 44px; height: 40px; border-radius: 10px; border: 0; background: var(--surface-3); display: grid; place-items: center; color: var(--accent-text); } .srch button svg.i { width: 20px; height: 20px; }
.sc { position: relative; display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; color: var(--text); }
.sc[hidden] { display: none; }
.sc.done { background: transparent; opacity: .66; } .sc.fail { border-color: var(--error-soft); }
.sc.nx { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 60%); }
.sc.big { display: block; padding: 16px; } .sc.big .bt { display: flex; gap: 14px; align-items: center; }
.cover { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.sc .acts, .cc .acts { position: relative; z-index: 2; }
.nt { position: relative; flex: none; width: 40px; height: 44px; }
.ck { position: absolute; right: -7px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--success); display: grid; place-items: center; border: 2px solid var(--bg); color: var(--success-ink); }
.ck svg.i { width: 11px; height: 11px; stroke-width: 3.5; }
.ad { flex: 1; min-width: 0; } .ad b { display: block; font: 600 16px/1.25 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc.nx .ad b { font-weight: 700; } .sc.big .ad b { font-size: 19px; }
.city { font: 700 14px var(--font-display); letter-spacing: .08em; color: var(--text-3); font-variant: all-small-caps; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad .w { font: 600 14px var(--font-ui); color: var(--text-2); margin-top: 2px; } .sc.nx .ad .w { color: var(--accent-text); } .sc.done .ad .w { color: var(--success); } .sc.fail .ad .w { color: var(--error); }
.nowl { display: block; font: 700 12.5px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 2px; }
.sc .tags, .cc .tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tg { font: 700 12px var(--font-display); letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 7px; background: var(--surface-3); color: var(--text-2); }
.tg.pk { background: var(--sensitive-soft); color: var(--sensitive); } .tg.or { background: var(--warning-soft); color: var(--warning); }
.pc { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 14px var(--font-display); color: var(--text-2); } .pc svg.i { width: 20px; height: 20px; }
.kv1 { font: 500 14px/1.5 var(--font-ui); color: var(--text-2); margin: 10px 0 2px; } .kv1 b { color: var(--accent-text); }
.acts { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-top: 14px; }
.acts button { min-height: 48px; border-radius: 14px; border: 0; display: flex; gap: 8px; align-items: center; justify-content: center; font: 700 16px var(--font-display); }
.acts svg.i { width: 20px; height: 20px; } .acts .a1 { background: var(--accent); color: var(--accent-ink); } .acts .a2 { background: var(--surface-3); color: var(--text); }
/* map tab: chips get their own row (fix: no more overlap with pin 1) */
.mchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 0 16px; } .mchips::-webkit-scrollbar { display: none; }
.mchips button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line-strong); font: 700 14px var(--font-ui); color: var(--text-2); }
.mchips .on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.msplit { position: relative; margin: 0 -16px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--map-bg); }
.mapsv { width: 100%; height: auto; aspect-ratio: 360 / 300; display: block; }
.mpin { cursor: pointer; transition: opacity 200ms ease; } .mpin.dim { opacity: .28; } .mpin .halo { fill: var(--accent); opacity: .16; }
.mcap { position: absolute; left: 12px; bottom: 12px; font: 700 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); background: var(--glass); padding: 6px 8px; border-radius: 8px; }
.fab2 { position: absolute; right: 12px; bottom: 12px; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--text); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.car { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 12px -16px 0; padding: 2px 16px 6px; scrollbar-width: none; } .car::-webkit-scrollbar { display: none; }
.cc { position: relative; flex: none; width: min(300px, 80vw); scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; color: var(--text); }
.cc.nx { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .cc.done { opacity: .66; }
.cc .bt { display: flex; gap: 12px; align-items: center; } .cc .ad b { font-size: 17px; font-weight: 700; }
.cc .w { font: 600 14px var(--font-ui); color: var(--text-2); margin: 8px 0 0; } .cc.nx .w { color: var(--accent-text); }
.cc .acts { grid-template-columns: 2fr 1fr; margin-top: 10px; } .cc .acts button { min-height: 44px; font-size: 15px; }
.cc.flash { animation: ccflash 600ms var(--ease-out); }
@keyframes ccflash { 0% { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* details tab */
.dc { background: var(--surface); border: 1px solid var(--line); border-radius: 9px 22px 22px 9px; padding: 6px 14px; margin-bottom: 12px; }
.nc2 { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); } .nc2:first-child { border: 0; }
.nc2 .ti { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--text); } .nc2 .ti svg.i { width: 20px; height: 20px; }
.nc2 .ti.acc { background: var(--accent-soft); color: var(--accent-text); } .nc2 .ti.pk { background: var(--sensitive-soft); color: var(--sensitive); } .nc2 .ti.wn { background: var(--warning-soft); color: var(--warning); }
.nc2 b { display: block; font: 700 15px var(--font-ui); } .nc2 small { display: block; font: 500 13.5px/1.4 var(--font-ui); color: var(--text-2); }
.g22 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g22 > div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px 20px 20px 8px; padding: 12px 14px; }
.g22 b { display: block; font: 700 28px/1.1 var(--font-display); font-variant-numeric: tabular-nums; } .g22 b.ok { color: var(--success); } .g22 b.bad { color: var(--error); } .g22 span { font: 600 13px var(--font-ui); color: var(--text-2); }
.rs .group, .rs .sh, .rs .sf { margin-left: 0; margin-right: 0; }
.rs .sh { margin-left: 4px; margin-right: 4px; }
/* CTA dock (Current Stop is a plain button) */
.ctadock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px 16px calc(env(safe-area-inset-bottom) + 14px); background: linear-gradient(transparent, var(--bg) 34%); }
.sim .ctadock { padding-bottom: 30px; }
.cta { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 528px; margin: 0 auto; min-height: var(--cta-h); border: 0; border-radius: 20px; background: var(--accent); color: var(--accent-ink); font: 700 18px var(--font-display); box-shadow: 0 14px 30px rgba(0,0,0,.45); }

/* ---------- stop screens ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; background: linear-gradient(var(--bg) 75%, transparent); }
.sim .top { top: 47px; }
.top .tt { flex: 1; min-width: 0; } .top .tt b { display: block; font: 700 22px/1.15 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .tt small { display: block; font: 600 13px var(--font-ui); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live { flex: none; font: 700 12.5px var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 6px 10px; border-radius: 99px; white-space: nowrap; }
.live.g { background: var(--surface-3); color: var(--text-2); } .live.ok { background: var(--success-soft); color: var(--success); } .live.r { background: var(--error-soft); color: var(--error); }
.progress { margin: 0 16px 4px; } .progress i { height: 4px; } .progress i.done { background: var(--success); }
main .sc.hc, main > .sc.nx { margin: 6px 16px 0; }
.hcmeta { margin: 8px 20px 0; font: 500 13.5px/1.5 var(--font-ui); color: var(--text-2); }
/* to-do rows read like the comp's okrows: green round check, green sub-line */
.cell.task { min-height: 64px; border-radius: 16px; }
.cell.task .check, .cell .check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); background: none; }
.cell .check.on { background: var(--success); border-color: var(--success); color: var(--success-ink); } .cell .check svg.i { width: 15px; height: 15px; stroke-width: 3; }
.cell.task.done { background: var(--surface); } .cell.task.done .tt { color: var(--text); }
.evth img, .evbtn img { border-radius: 10px; }
.cell .check.on { animation: pop 260ms var(--ease-out); }
/* swipe to confirm: track + fill that follows the D thumb */
.swipe { position: relative; height: 68px; border-radius: 20px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.swipe .fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: translateX(-80%); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, var(--surface-2)), var(--accent)); border-radius: 20px; }
.swipe .lbl { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 64px; font: 700 16px var(--font-display); letter-spacing: .02em; text-transform: none; color: var(--text); pointer-events: none; animation: none; background: none; transition: color 160ms ease, opacity 160ms ease; }
.swipe.past .lbl { color: var(--accent-ink); }
.swipe .tap2 { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 64px; font: 700 15px var(--font-display); color: var(--accent-ink); opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.swipe.armed .lbl { opacity: 0; } .swipe.armed .tap2 { opacity: 1; } .swipe.armed .fill { transform: translateX(0) !important; transition: transform 200ms var(--ease-out); }
.swipe .thumb { position: absolute; top: 5px; left: 5px; width: 56px; height: 56px; border-radius: 16px; background: var(--accent); display: grid; place-items: center; cursor: grab; box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: none; touch-action: none; }
.swipe.dragging .thumb { cursor: grabbing; }
.swipe[aria-disabled="true"] { background: var(--surface); border-style: dashed; }
.swipe[aria-disabled="true"] .fill { opacity: 0; } .swipe[aria-disabled="true"] .lbl { color: var(--text-3); }
.swipe[aria-disabled="true"] .thumb { background: var(--surface-3); box-shadow: none; cursor: not-allowed; } .swipe[aria-disabled="true"] .thumb .dsh { opacity: .45; }
.swipe:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.undo { flex: none; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 700 15px var(--font-display); }
.donehead { align-items: center; }
.btn { border-radius: 18px; font-family: var(--font-display); }
.btn:active:not(:disabled) { transform: scale(.975); filter: none; transition: transform 100ms var(--ease-out); }

/* sheets: drawer curve, enter from the bottom (exit is instant on close; it's re-rendered) */
.sheet, .actionsheet { animation: up 320ms var(--ease-drawer); }
.scrim { animation: fade 220ms ease-out; }
.login .logo { width: 240px; height: auto; margin: 0 auto 8px; display: block; } [data-theme="light"] .login .logo.lk-dark, .login .logo.lk-light { display: none; } [data-theme="light"] .login .logo.lk-light { display: block; }
.splash img { width: 120px; }
.tag.purple { background: var(--sensitive-soft); color: var(--sensitive); }
@media (prefers-reduced-motion: reduce) {
  .sheet, .actionsheet { animation: fade 180ms ease; }
  .card, .sc, .cc, .cta, .bk, .acts button, .onl .kn::after { transition: none !important; }
}
@media (max-width: 374px) { .v8 .hi { font-size: 26px; } .step .lb { font-size: 12px; } .acts { grid-template-columns: 1fr 1fr; } }
.top { background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.top + .progress { padding-top: 6px; }
.fp { font-size: 13px; letter-spacing: .04em; color: var(--text-2); }
.swipe .lbl { transition: none; }

/* ==========================================================================
   v7.1 · Jae's review (Oct 27): logo-shaped tracks, striped stop bar, D steps,
   cube package icon, call bar, stop notes, clickable confirmation facts.
   ========================================================================== */
:root { --dmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='226 200 572 624'%3E%3Cpath d='M489.83,823.98 L491.74,823.95 L493.66,823.91 L495.57,823.85 L497.48,823.79 L499.40,823.71 L501.31,823.62 L503.22,823.52 L505.13,823.41 L507.04,823.29 L508.95,823.15 L510.86,823.01 L512.77,822.85 L514.68,822.68 L516.58,822.50 L518.49,822.30 L520.39,822.10 L522.29,821.88 L524.19,821.65 L526.09,821.41 L527.99,821.16 L529.89,820.90 L531.78,820.62 L533.67,820.34 L535.56,820.04 L537.45,819.73 L539.34,819.41 L541.23,819.07 L543.11,818.73 L544.99,818.37 L546.87,818.01 L548.74,817.63 L550.62,817.24 L552.49,816.83 L554.36,816.42 L556.23,815.99 L558.09,815.56 L559.95,815.11 L561.81,814.65 L563.67,814.18 L565.52,813.70 L567.37,813.20 L569.21,812.70 L571.06,812.18 L572.90,811.65 L574.74,811.12 L576.57,810.57 L578.40,810.00 L580.23,809.43 L582.05,808.85 L583.87,808.25 L585.68,807.65 L587.50,807.03 L589.31,806.40 L591.11,805.76 L592.91,805.11 L594.71,804.45 L596.50,803.78 L598.29,803.09 L600.07,802.40 L601.85,801.69 L603.63,800.98 L605.40,800.25 L607.16,799.51 L608.93,798.76 L610.68,798.00 L612.44,797.23 L614.18,796.45 L615.93,795.66 L617.66,794.86 L619.40,794.04 L621.13,793.22 L622.85,792.39 L624.57,791.54 L626.28,790.69 L627.99,789.82 L629.69,788.94 L631.38,788.06 L633.08,787.16 L634.76,786.25 L636.44,785.33 L638.12,784.41 L639.78,783.47 L641.45,782.52 L643.10,781.56 L644.76,780.59 L646.40,779.61 L648.04,778.62 L649.67,777.62 L651.30,776.61 L652.92,775.59 L654.53,774.57 L656.14,773.53 L657.74,772.48 L659.34,771.42 L660.93,770.35 L662.51,769.27 L664.08,768.18 L665.65,767.09 L667.21,765.98 L668.77,764.86 L670.32,763.74 L671.86,762.60 L673.39,761.46 L674.92,760.30 L676.44,759.14 L677.95,757.96 L679.46,756.78 L680.96,755.59 L682.45,754.39 L683.93,753.18 L685.41,751.96 L686.88,750.73 L688.34,749.50 L689.79,748.25 L691.24,746.99 L692.67,745.73 L694.10,744.46 L695.53,743.18 L696.94,741.89 L698.35,740.59 L699.75,739.28 L701.14,737.97 L702.52,736.64 L703.89,735.31 L705.26,733.97 L706.62,732.62 L707.97,731.26 L709.31,729.89 L710.64,728.52 L711.97,727.14 L713.28,725.75 L714.59,724.35 L715.89,722.94 L717.18,721.53 L718.46,720.10 L719.73,718.67 L720.99,717.24 L722.25,715.79 L723.50,714.34 L724.73,712.88 L725.96,711.41 L727.18,709.93 L728.39,708.45 L729.59,706.96 L730.78,705.46 L731.96,703.95 L733.14,702.44 L734.30,700.92 L735.46,699.39 L736.60,697.86 L737.74,696.32 L738.86,694.77 L739.98,693.21 L741.09,691.65 L742.18,690.08 L743.27,688.51 L744.35,686.93 L745.42,685.34 L746.48,683.74 L747.53,682.14 L748.57,680.53 L749.59,678.92 L750.61,677.30 L751.62,675.67 L752.62,674.04 L753.61,672.40 L754.59,670.76 L755.56,669.10 L756.52,667.45 L757.47,665.78 L758.41,664.12 L759.33,662.44 L760.25,660.76 L761.16,659.08 L762.06,657.38 L762.94,655.69 L763.82,653.99 L764.69,652.28 L765.54,650.57 L766.39,648.85 L767.22,647.13 L768.04,645.40 L768.86,643.66 L769.66,641.93 L770.45,640.18 L771.23,638.44 L772.00,636.68 L772.76,634.93 L773.51,633.16 L774.25,631.40 L774.98,629.63 L775.69,627.85 L776.40,626.07 L777.09,624.29 L777.78,622.50 L778.45,620.71 L779.11,618.91 L779.76,617.11 L780.40,615.31 L781.03,613.50 L781.65,611.68 L782.25,609.87 L782.85,608.05 L783.43,606.23 L784.00,604.40 L784.57,602.57 L785.12,600.74 L785.65,598.90 L786.18,597.06 L786.70,595.21 L787.20,593.37 L787.70,591.52 L788.18,589.67 L788.65,587.81 L789.11,585.95 L789.56,584.09 L789.99,582.23 L790.42,580.36 L790.83,578.49 L791.24,576.62 L791.63,574.74 L792.01,572.87 L792.37,570.99 L792.73,569.11 L793.07,567.23 L793.41,565.34 L793.73,563.45 L794.04,561.56 L794.34,559.67 L794.62,557.78 L794.90,555.89 L795.16,553.99 L795.41,552.09 L795.65,550.19 L795.88,548.29 L796.10,546.39 L796.30,544.49 L796.50,542.58 L796.68,540.68 L796.85,538.77 L797.01,536.86 L797.15,534.95 L797.29,533.04 L797.41,531.13 L797.52,529.22 L797.62,527.31 L797.71,525.40 L797.79,523.48 L797.85,521.57 L797.91,519.66 L797.95,517.74 L797.98,515.83 L797.99,513.91 L798.00,512.00 L797.99,510.09 L797.98,508.17 L797.95,506.26 L797.91,504.34 L797.85,502.43 L797.79,500.52 L797.71,498.60 L797.62,496.69 L797.52,494.78 L797.41,492.87 L797.29,490.96 L797.15,489.05 L797.01,487.14 L796.85,485.23 L796.68,483.32 L796.50,481.42 L796.30,479.51 L796.10,477.61 L795.88,475.71 L795.65,473.81 L795.41,471.91 L795.16,470.01 L794.90,468.11 L794.62,466.22 L794.34,464.33 L794.04,462.44 L793.73,460.55 L793.41,458.66 L793.07,456.77 L792.73,454.89 L792.37,453.01 L792.01,451.13 L791.63,449.26 L791.24,447.38 L790.83,445.51 L790.42,443.64 L789.99,441.77 L789.56,439.91 L789.11,438.05 L788.65,436.19 L788.18,434.33 L787.70,432.48 L787.20,430.63 L786.70,428.79 L786.18,426.94 L785.65,425.10 L785.12,423.26 L784.57,421.43 L784.00,419.60 L783.43,417.77 L782.85,415.95 L782.25,414.13 L781.65,412.32 L781.03,410.50 L780.40,408.69 L779.76,406.89 L779.11,405.09 L778.45,403.29 L777.78,401.50 L777.09,399.71 L776.40,397.93 L775.69,396.15 L774.98,394.37 L774.25,392.60 L773.51,390.84 L772.76,389.07 L772.00,387.32 L771.23,385.56 L770.45,383.82 L769.66,382.07 L768.86,380.34 L768.04,378.60 L767.22,376.87 L766.39,375.15 L765.54,373.43 L764.69,371.72 L763.82,370.01 L762.94,368.31 L762.06,366.62 L761.16,364.92 L760.25,363.24 L759.33,361.56 L758.41,359.88 L757.47,358.22 L756.52,356.55 L755.56,354.90 L754.59,353.24 L753.61,351.60 L752.62,349.96 L751.62,348.33 L750.61,346.70 L749.59,345.08 L748.57,343.47 L747.53,341.86 L746.48,340.26 L745.42,338.66 L744.35,337.07 L743.27,335.49 L742.18,333.92 L741.09,332.35 L739.98,330.79 L738.86,329.23 L737.74,327.68 L736.60,326.14 L735.46,324.61 L734.30,323.08 L733.14,321.56 L731.96,320.05 L730.78,318.54 L729.59,317.04 L728.39,315.55 L727.18,314.07 L725.96,312.59 L724.73,311.12 L723.50,309.66 L722.25,308.21 L720.99,306.76 L719.73,305.33 L718.46,303.90 L717.18,302.47 L715.89,301.06 L714.59,299.65 L713.28,298.25 L711.97,296.86 L710.64,295.48 L709.31,294.11 L707.97,292.74 L706.62,291.38 L705.26,290.03 L703.89,288.69 L702.52,287.36 L701.14,286.03 L699.75,284.72 L698.35,283.41 L696.94,282.11 L695.53,280.82 L694.10,279.54 L692.67,278.27 L691.24,277.01 L689.79,275.75 L688.34,274.50 L686.88,273.27 L685.41,272.04 L683.93,270.82 L682.45,269.61 L680.96,268.41 L679.46,267.22 L677.95,266.04 L676.44,264.86 L674.92,263.70 L673.39,262.54 L671.86,261.40 L670.32,260.26 L668.77,259.14 L667.21,258.02 L665.65,256.91 L664.08,255.82 L662.51,254.73 L660.93,253.65 L659.34,252.58 L657.74,251.52 L656.14,250.47 L654.53,249.43 L652.92,248.41 L651.30,247.39 L649.67,246.38 L648.04,245.38 L646.40,244.39 L644.76,243.41 L643.10,242.44 L641.45,241.48 L639.78,240.53 L638.12,239.59 L636.44,238.67 L634.76,237.75 L633.08,236.84 L631.38,235.94 L629.69,235.06 L627.99,234.18 L626.28,233.31 L624.57,232.46 L622.85,231.61 L621.13,230.78 L619.40,229.96 L617.66,229.14 L615.93,228.34 L614.18,227.55 L612.44,226.77 L610.68,226.00 L608.93,225.24 L607.16,224.49 L605.40,223.75 L603.63,223.02 L601.85,222.31 L600.07,221.60 L598.29,220.91 L596.50,220.22 L594.71,219.55 L592.91,218.89 L591.11,218.24 L589.31,217.60 L587.50,216.97 L585.68,216.35 L583.87,215.75 L582.05,215.15 L580.23,214.57 L578.40,214.00 L576.57,213.43 L574.74,212.88 L572.90,212.35 L571.06,211.82 L569.21,211.30 L567.37,210.80 L565.52,210.30 L563.67,209.82 L561.81,209.35 L559.95,208.89 L558.09,208.44 L556.23,208.01 L554.36,207.58 L552.49,207.17 L550.62,206.76 L548.74,206.37 L546.87,205.99 L544.99,205.63 L543.11,205.27 L541.23,204.93 L539.34,204.59 L537.45,204.27 L535.56,203.96 L533.67,203.66 L531.78,203.38 L529.89,203.10 L527.99,202.84 L526.09,202.59 L524.19,202.35 L522.29,202.12 L520.39,201.90 L518.49,201.70 L516.58,201.50 L514.68,201.32 L512.77,201.15 L510.86,200.99 L508.95,200.85 L507.04,200.71 L505.13,200.59 L503.22,200.48 L501.31,200.38 L499.40,200.29 L497.48,200.21 L495.57,200.15 L493.66,200.09 L491.74,200.05 L489.83,200.02 L487.91,200.01 L486.00,200.00 L372.00,200.00 L372.00,346.00 L226.00,346.00 L226.00,824.00 L486.00,824.00 L487.91,823.99 Z'/%3E%3Cpath d='M350 200L350 324L226 324Z'/%3E%3C/svg%3E"); }
/* Tracks follow the logo: folded top-left corner (with its little flap) and a rounded D end, so the D handle sits like a key in a slot */
.swipe { border: 0; border-radius: 6px 34px 34px 6px; background: var(--surface-3); clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); overflow: hidden; }
.swipe::before { content: none; position: absolute; left: 0; top: 0; width: 17px; height: 17px; background: color-mix(in srgb, var(--mint) 70%, var(--surface-3)); clip-path: polygon(100% 0, 100% 100%, 0 100%); z-index: 3; }
.swipe .fill { transform-origin: 0 50%; border-radius: 6px 34px 34px 6px; }
.swipe .thumb { top: 5px; left: 7px; width: 53px; height: 58px; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.swipe .thumb .dsh { width: 53px; height: 58px; }
.swipe[aria-disabled="true"] { background: var(--surface-2); border: 0; }
.swipe[aria-disabled="true"]::before { background: var(--surface-3); }
.swipe[aria-disabled="true"] .thumb { background: none; filter: none; }
.swipe[aria-disabled="true"] .thumb .dsh { --d-fill: var(--surface-3) !important; opacity: 1; }
.swipe .lbl, .swipe .tap2 { padding-left: 70px; }
/* switches: same track, the knob is the D itself */
.switch { width: 58px; height: 34px; }
.switch i, .onl .kn { border: 0; border-radius: 4px 17px 17px 4px; background: var(--surface-3); clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px); }
.switch i::before, .onl .kn::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; background: color-mix(in srgb, var(--text-3) 60%, var(--surface-3)); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.switch i::after, .onl .kn::after { top: 4px; left: 5px; width: 24px; height: 26px; border-radius: 0; background: var(--text-2); -webkit-mask: var(--dmask) center / contain no-repeat; mask: var(--dmask) center / contain no-repeat; transition: transform 240ms var(--ease-out), background-color 200ms ease; }
.switch input:checked + i, .onl input:checked + .kn { background: var(--accent); }
.switch input:checked + i::before, .onl input:checked + .kn::before { background: var(--mint); }
.switch input:checked + i::after, .onl input:checked + .kn::after { transform: translateX(24px); background: var(--accent-ink); }
.onl .kn { width: 58px; height: 34px; }
.onl { min-height: 0; padding: 8px 12px; gap: 12px; } .onl b { font-size: 14.5px; } .onl small { font-size: 12.5px; }
/* striped stop bar (B's evidence tape) with A's logic: one segment per stop */
.progress { display: flex; gap: 4px; height: 9px; margin: 2px 16px 6px; }
.progress i { flex: 1; height: 9px; border-radius: 2px; background: var(--surface-3); }
.progress i.done { background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, color-mix(in srgb, var(--accent) 62%, var(--accent-ink)) 6px 12px); }
.progress i.on { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 45%, var(--surface-3)) 0 6px, var(--surface-3) 6px 12px); box-shadow: inset 0 0 0 1.5px var(--accent); }
.rcard .progress, .sheet .progress { margin-left: 0; margin-right: 0; }
/* dashboard route card: D steps + more contrast */
.hero8 { background: linear-gradient(160deg, var(--surface-3), var(--surface-2) 75%); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line-strong)); }
[data-theme="light"] .hero8 { background: linear-gradient(160deg, #FFFFFF, #EAF6F4 80%); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
.hero8 .eta, .hero8 .next small { color: color-mix(in srgb, var(--text) 78%, var(--text-2)); }
.step .nd { width: 30px; height: 33px; border-radius: 0; background: none !important; box-shadow: none !important; display: block; }
.step .cur .nd .dsh { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent)); }
.step .cur.v .nd .dsh { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sensitive) 70%, transparent)); }
.step .st:not(:last-child)::after { top: 17px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 3px; background: color-mix(in srgb, var(--text-3) 45%, var(--surface-3)); }
.step .lb { color: var(--text-2); }
/* package count uses the logo's parcel */
.pc .cube { width: 20px; height: 22px; color: var(--text-2); } .sc.nx .pc .cube { color: var(--accent-text); }
/* call the point of contact */
.callbar { display: flex; align-items: center; gap: 12px; margin: 10px 16px 0; padding: 10px 10px 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px 20px 20px 8px; }
.callbar .main { flex: 1; min-width: 0; } .callbar b { display: block; font: 700 15.5px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .callbar small { font: 500 13px var(--font-ui); color: var(--text-2); }
.callbar .cb { min-height: 48px; min-width: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); display: inline-flex; gap: 6px; align-items: center; justify-content: center; font: 700 15px var(--font-display); }
.callbar .cb.g { background: var(--surface-3); color: var(--text); padding: 0; }
.callbar .cb svg.i { width: 20px; height: 20px; }
.callbar .tile { width: 40px; height: 40px; }
.trackstrip.lv { border-color: var(--sens-line); color: var(--sensitive); background: var(--sensitive-soft); }
/* stop notes */
.group.notes .cell { align-items: flex-start; } .group.notes .st { font: 700 12px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.group.notes .tt { font-weight: 600; white-space: normal; }
.codes .code .v { filter: blur(6px); user-select: none; transition: filter 160ms ease; } .codes.shown .code .v { filter: none; user-select: text; }
.reveal { align-self: center; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); font: 700 14px var(--font-display); }
/* confirmation facts are buttons that open their detail */
.facts .fact { display: flex; flex-direction: column; align-items: flex-start; position: relative; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 10px 28px 10px 12px; min-height: 60px; color: var(--text); transition: border-color 160ms ease, transform 110ms var(--ease-out); }
.facts .fact:active { transform: scale(.97); }
.facts .fact span { font: 700 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.facts .fact b { font: 700 15px var(--font-ui); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.facts .fact .chev { position: absolute; right: 10px; top: 50%; width: 13px; height: 13px; transform: translateY(-50%) rotate(90deg); transition: transform 200ms var(--ease-out); stroke: var(--text-3); fill: none; stroke-width: 2.2; }
.facts .fact[aria-expanded="true"] { border-color: var(--accent); } .facts .fact[aria-expanded="true"] .chev { transform: translateY(-50%) rotate(-90deg); stroke: var(--accent-text); }
.factd { margin: 10px 16px 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.factd .fh { font: 700 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.frow { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font: 600 14px var(--font-ui); } .frow:first-of-type { border-top: 0; } .frow span { color: var(--text-2); }
.fph { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 600 13px var(--font-ui); color: var(--text-2); }
.fthumb { display: block; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex: none; background: var(--surface-3); } .fthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .fgrid figure { margin: 0; } .fgrid .fthumb { width: 100%; height: auto; aspect-ratio: 1; }
.fgrid figcaption { font: 600 12px/1.3 var(--font-ui); margin-top: 4px; } .fgrid figcaption span { color: var(--text-3); }
.fsig { background: #F5F8F7; border-radius: 10px; padding: 6px; } .fsig img { display: block; width: 100%; height: 80px; object-fit: contain; }
.ftl { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; } .ftl li { display: flex; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--line-strong); font: 600 13.5px var(--font-ui); } .ftl li:first-child { border: 0; }
.ftl time { flex: none; width: 66px; font: 700 12.5px var(--font-display); color: var(--text-2); font-variant-numeric: tabular-nums; } .ftl small { display: block; color: var(--text-3); font-weight: 500; }
.fpfull { font-size: 12.5px; word-break: break-all; margin: 0; color: var(--text); } .fnote { font: 500 12.5px/1.4 var(--font-ui); color: var(--text-3); margin: 8px 0 0; }
.donesheet { max-height: 92dvh; overflow-y: auto; }

.trackstrip { text-transform: none; letter-spacing: 0; font: 600 13.5px/1.35 var(--font-ui); white-space: normal; min-width: 0; }
.trackstrip span { min-width: 0; }
.callbar { padding-left: 16px; }
.hero .big { font-size: 38px; }
main:has(+ .dock) { padding-bottom: calc(env(safe-area-inset-bottom) + 170px); }

/* v7.2 · the logo D replaces every generic success badge and check mark */
.badge.dd { background: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; display: grid; place-items: center; filter: drop-shadow(0 8px 18px rgba(25,211,197,.28)); }
.success .badge.dd { margin: 0 auto 12px; } .donehead .badge.dd .dsh { animation: dstamp 380ms var(--ease-out); }
@keyframes dstamp { from { transform: scale(1.18) rotate(-6deg); opacity: 0; } }
.dtile { flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.scanres.ok > .dsh { flex: none; }
.syncpill .dsh, .rnext .dsh { flex: none; }
/* checklist ticks: an empty D slot that fills mint with a check when done */
.cell .check, .cell.task .check { width: 26px; height: 28px; border: 0 !important; border-radius: 0 !important; background: var(--surface-3); -webkit-mask: var(--dmask) center / contain no-repeat; mask: var(--dmask) center / contain no-repeat; display: grid; place-items: center; flex: none; }
.cell .check.on { background: var(--success); color: var(--success-ink); animation: dstamp 260ms var(--ease-out); }
.cell .check svg.i { width: 14px; height: 14px; stroke-width: 3.4; margin: 2px 0 0 -2px; }
.cell .check[style*="--red"] { background: var(--error) !important; }
.ck { width: 20px; height: 22px; border-radius: 0; border: 0; background: var(--success); -webkit-mask: var(--dmask) center / contain no-repeat; mask: var(--dmask) center / contain no-repeat; right: -8px; top: -8px; }
.ck svg.i { width: 11px; height: 11px; margin: 2px 0 0 -1px; }
@media (prefers-reduced-motion: reduce) { .donehead .badge.dd .dsh, .cell .check.on { animation: none; } }

/* ==========================================================================
   v7.3 · nav, dashboard order, notifications, Soft D cards, colored swipe D
   ========================================================================== */
/* Soft D cards: tighter left corners, rounder right (echoes the logo). Key cards get a teal top edge. */
.card, .box, .sc, .cc, .rhc, .callbar, .dc, .g22 > div, .panel, .rcard, .hero, .banner, .trackstrip, .waitstrip, .onl, .srch, .factd { border-radius: 12px 24px 24px 12px; }
.cell, .facts .fact, .group > .cell:first-child, .group > :first-child { border-radius: 10px 20px 20px 10px; }
.tile, .al i, .nc2 .ti, .av { border-radius: 9px 16px 16px 9px; }
.btn, .cta, .acts button, .callbar .cb { border-radius: 12px 22px 22px 12px; }
.hero8, .sc.nx, .cc.nx, .card.key, .jfy, .al.pin, .banner { box-shadow: inset 0 2px 0 var(--accent); }
.al.pin { box-shadow: inset 0 2px 0 var(--error); }
.hero8 { box-shadow: inset 0 2px 0 var(--accent), 0 18px 40px rgba(0,0,0,.3); }
.sc.nx, .cc.nx { border-color: var(--line-strong); }
/* swipe handle: a colored D with an outline and glow, so it never gets lost */
.swipe .fill { background: linear-gradient(90deg, var(--surface-3), color-mix(in srgb, var(--accent) 42%, var(--surface-3))); }
.dthumb { overflow: visible; --th-fill: var(--accent); --th-flap: var(--mint); --th-ink: var(--accent-ink); --th-ol: rgba(255,255,255,.9); }
.dthumb .ol { --d-fill: none; --d-flap: none; stroke: var(--th-ol); stroke-width: 44; stroke-linejoin: round; }
.dthumb .fl { --d-fill: var(--th-fill); --d-flap: var(--th-flap); }
.dthumb .ar { fill: none; stroke: var(--th-ink); stroke-width: 56; stroke-linecap: square; }
.swipe .thumb { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)) drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
[data-theme="light"] .dthumb { --th-ol: #FFFFFF; }
.swipe[aria-disabled="true"] .thumb { filter: none; }
.swipe[aria-disabled="true"] .dthumb { --th-fill: var(--surface-3); --th-flap: var(--text-3); --th-ink: var(--text-3); --th-ol: color-mix(in srgb, var(--accent) 45%, var(--surface-3)); }
.swipe.committed .thumb { filter: drop-shadow(0 0 16px var(--accent)); }
/* tab bar: smaller D, five equal slots */
.tabplus span { width: 48px !important; height: 50px !important; margin-top: -8px; }
.tabbar a { font-size: 10.5px; } .tabbar a .tabic { width: 44px; }
.tabbar .bdg { background: var(--error); right: 2px; }
/* dashboard */
.brandrow { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 12px; } .brandrow .brand { margin: 0 0 0 -10px; }
.alerts.top { margin-bottom: 16px; }
.al i.a { background: var(--accent-soft); color: var(--accent-text); }
.hi.greet { margin: 4px 0 12px; font: 700 26px/1.1 var(--font-display); letter-spacing: -.02em; } .hi.greet small { display: block; font: 500 14px var(--font-ui); color: var(--text-2); margin-top: 4px; letter-spacing: 0; } .hi.greet small b { color: var(--accent-text); }
.onl.blocked { opacity: .75; } .onl.blocked .kn { background: var(--surface-2); }
.strip.sm { padding: 10px 4px; } .strip.sm b { font-size: 18px; } .strip.sm span { font-size: 12px; }
.jfy { padding: 14px; animation: jfyin 360ms var(--ease-out); }
@keyframes jfyin { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.jfy .row { display: flex; align-items: center; gap: 12px; } .jfy .t { flex: 1; min-width: 0; } .jfy .t b { display: block; font: 700 26px var(--font-display); } .jfy .t small { color: var(--text-2); font-size: 13px; }
.jfy .legs { margin: 12px 0; } .jfy .row2 { display: flex; gap: 10px; } .jfy .row2 .btn { min-height: 50px; }
/* notifications */
.nlist { display: grid; gap: 8px; }
.nrow { position: relative; overflow: hidden; border-radius: 12px 24px 24px 12px; --p: 0; }
.nrow .nclear { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; background: color-mix(in srgb, var(--error) calc(var(--p) * 100%), var(--surface-2)); color: #fff; font: 700 14px var(--font-display); border-radius: inherit; }
.nrow.pin .nclear { background: var(--surface-2); color: var(--text-2); }
.nmain { position: relative; display: flex; gap: 12px; align-items: center; padding: 14px; min-height: 72px; background: var(--surface); border: 1px solid var(--line); border-radius: inherit; color: var(--text); touch-action: pan-y; will-change: transform; }
.nrow.pin .nmain { box-shadow: inset 0 2px 0 var(--error); }
.nrow.new .nmain::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.nmain i { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px 16px 16px 9px; background: var(--surface-3); color: var(--text-2); }
.nmain i.r { background: var(--error-soft); color: var(--error); } .nmain i.w { background: var(--warning-soft); color: var(--warning); } .nmain i.a { background: var(--accent-soft); color: var(--accent-text); }
.nmain .t { flex: 1; min-width: 0; } .nmain b { display: block; font: 700 15px var(--font-ui); } .nmain small { display: block; color: var(--text-2); font: 500 13px/1.35 var(--font-ui); }
.nmain time { flex: none; align-self: flex-start; font: 700 12px var(--font-display); color: var(--text-3); }
.ndetail { padding: 8px 20px 4px; } .ndetail i { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px 22px 22px 12px; background: var(--surface-3); }
.ndetail i.r { background: var(--error-soft); color: var(--error); } .ndetail i.w { background: var(--warning-soft); color: var(--warning); } .ndetail i.a { background: var(--accent-soft); color: var(--accent-text); }
.ndetail h1 { font: 700 26px/1.15 var(--font-display); margin: 14px 0 6px; letter-spacing: -.01em; } .ndetail p { margin: 0 0 8px; color: var(--text-2); }
.card.empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 18px; margin-top: 20px; } .card.empty small { color: var(--text-2); }
/* earnings tab */
.ebars { display: flex; gap: 8px; align-items: flex-end; height: 150px; } .ebars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.ebars i { width: 100%; max-width: 30px; border-radius: 4px 8px 3px 3px; background: color-mix(in srgb, var(--accent) 45%, var(--surface-3)); } .ebars .today i { background: var(--accent); }
.ebars span { font: 700 12px var(--font-display); color: var(--text-2); } .ebars small { font: 600 11px var(--font-ui); color: var(--text-3); }
.alerts, .alerts.top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.nmain { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.v8 .alerts { padding: 0; }
/* one-line alert bar on the dashboard (below the greeting, above Go online) */
.abar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 14px; margin: 0 0 10px; border-radius: 10px 20px 20px 10px; font: 700 14px var(--font-ui); color: var(--text); background: var(--surface); border: 1px solid var(--line); }
.abar b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abar svg.i { width: 18px; height: 18px; flex: none; } .abar > svg.i:last-child { width: 16px; height: 16px; color: var(--text-3); }
.abar.r { background: var(--error-soft); border-color: color-mix(in srgb, var(--error) 45%, transparent); } .abar.r > svg.i:first-child { color: var(--error); }
.abar.w { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, transparent); } .abar.w > svg.i:first-child { color: var(--warning); }
.abar.a > svg.i:first-child { color: var(--accent-text); }
.abar .more { flex: none; font: 700 12px var(--font-display); padding: 3px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.abar:active { transform: scale(.98); }
.hi.greet { margin-bottom: 10px; }

/* ==========================================================================
   v7.4 · launch animation + sign-in
   ========================================================================== */
.auth { min-height: 100dvh; display: flex; flex-direction: column; padding: 0 0 calc(env(safe-area-inset-bottom) + 24px); background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg) 60%); }
.logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 36px) 0 8px; will-change: transform; }
.bmark { width: 92px; height: 100px; overflow: visible; }
.bmark .m-body { fill: var(--accent); transform-box: fill-box; transform-origin: 0% 50%; }
.bmark .m-cube { fill: var(--bg); transform-box: fill-box; transform-origin: 50% 100%; }
.bmark .m-flap { fill: var(--mint); transform-box: fill-box; transform-origin: 100% 100%; }
[data-theme="light"] .bmark .m-body { fill: #0F8A82; } [data-theme="light"] .bmark .m-flap { fill: var(--accent); } [data-theme="light"] .bmark .m-cube { fill: #F2F5F4; }
.logo-wrap .word img { height: 46px; width: auto; display: block; }
.logo-wrap .word .lk-light { display: none; } [data-theme="light"] .logo-wrap .word .lk-light { display: block; } [data-theme="light"] .logo-wrap .word .lk-dark { display: none; }
.auth-body { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 12px; max-width: 460px; width: 100%; margin: 0 auto; }
.auth-body h1 { font: 700 30px/1.1 var(--font-display); letter-spacing: -.02em; margin: 8px 0 0; text-wrap: balance; }
.auth-body .lede { margin: 0 0 6px; color: var(--text-2); font-size: 15px; }
.auth form { display: flex; flex-direction: column; gap: 12px; }
.fld { display: flex; flex-direction: column; gap: 6px; } .fld > span:first-child { font: 700 12px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.fld input { width: 100%; min-height: 54px; padding: 0 14px; border-radius: 10px 20px 20px 10px; border: 1px solid var(--line-strong); background: var(--surface); font: 600 16px var(--font-ui); color: var(--text); outline: none; transition: border-color 160ms ease; }
.fld input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pw { position: relative; display: block; } .pw input { padding-right: 76px; }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 42px; min-width: 60px; border: 0; border-radius: 10px 16px 16px 10px; background: var(--surface-3); font: 700 13px var(--font-display); color: var(--text); }
.err { color: var(--error); font: 700 14px var(--font-ui); }
.remrow { display: flex; align-items: center; gap: 12px; padding: 4px 2px; cursor: pointer; } .remrow b { display: block; font: 700 15px var(--font-ui); } .remrow small { color: var(--text-2); font-size: 13px; }
.authlinks { display: flex; justify-content: space-between; } .authlinks .linkbtn, .linkbtn.alt { min-height: 44px; font: 700 14px var(--font-ui); color: var(--accent-text); background: none; border: 0; padding: 0; }
.btn.faceid { gap: 12px; background: var(--surface-2); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line-strong)); box-shadow: inset 0 2px 0 var(--accent); }
.btn.faceid .fglyph { width: 26px; height: 26px; }
.fglyph { fill: none; stroke: var(--accent-text); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.fine { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 8px 0 0; font: 500 12.5px var(--font-ui); color: var(--text-3); } .fine svg.i { width: 14px; height: 14px; }
.auth.intro .logo-wrap { pointer-events: none; }
/* Face ID / passkey prompt (mock) */
.fid-ov { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(2,4,4,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade 200ms ease-out; }
.fid { width: 190px; padding: 26px 16px 20px; display: grid; justify-items: center; gap: 8px; text-align: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px 32px 32px 18px; animation: fidin 320ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes fidin { from { opacity: 0; transform: scale(.94); } }
.fid b { font: 700 17px var(--font-display); } .fid small { color: var(--text-2); font-size: 13px; min-height: 1em; }
.fid-g { width: 72px; height: 76px; display: grid; place-items: center; } .fid-g .fglyph { width: 68px; height: 68px; animation: scan 900ms ease-in-out infinite alternate; }
.fid-g .dsh { animation: dstamp 360ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes scan { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.minis { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-2); } .minis button { min-width: 44px; min-height: 36px; border: 0; border-radius: 9px; background: none; font: 700 13px var(--font-display); color: var(--text-2); } .minis .on { background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .fid-g .fglyph { animation: none; } }
.abar.r.solid { background: var(--error); border-color: var(--error); color: #fff; } .abar.r.solid > svg.i { color: #fff !important; } .abar.r.solid .more { background: rgba(255,255,255,.22); color: #fff; }
.abar.r.solid { background: #C8243F; border-color: #C8243F; }
.setbtn { flex: none; min-height: 44px; min-width: 56px; padding: 0 12px; border: 0; border-radius: 10px 18px 18px 10px; background: var(--accent); color: var(--accent-ink); font: 700 14px var(--font-display); }
.tempcell .temp-input { width: 74px; }
/* the tab bar is on every screen: action docks sit just above it */
.withtabs .dock { bottom: calc(env(safe-area-inset-bottom) + 80px); padding-bottom: 8px; padding-top: 18px; background: linear-gradient(transparent, var(--bg) 26%); }
.sim .withtabs .dock { bottom: 102px; }
.withtabs .dock.above-tabs { padding-top: 0; background: none; }
.withtabs .ctadock { bottom: calc(env(safe-area-inset-bottom) + 80px); padding-bottom: 8px; }
.sim .withtabs .ctadock { bottom: 102px; padding-bottom: 8px; }
.withtabs main { padding-bottom: calc(env(safe-area-inset-bottom) + 250px); }
.withtabs main:has(+ .dock) { padding-bottom: calc(env(safe-area-inset-bottom) + 260px); }
.withtabs .rs { padding-bottom: calc(env(safe-area-inset-bottom) + var(--cta-h) + 130px); }
.withtabs .sheet, .withtabs .actionsheet { z-index: 41; }

/* v7.5 · delivery opening scene */
.scene { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.scene .road { position: absolute; left: 0; right: 0; height: 3px; transform-origin: 0 50%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, var(--surface-3)) 0 14px, transparent 14px 24px); }
.scene .van { position: absolute; width: 150px; height: 78px; overflow: visible; }
.v-paint { fill: var(--accent); } .v-glass { fill: color-mix(in srgb, var(--accent-ink) 82%, var(--accent)); } .v-seam { stroke: var(--accent-ink); stroke-opacity: .25; stroke-width: 2; }
.v-light { fill: var(--mint); } .v-tire { fill: #0B0F10; stroke: var(--surface-3); stroke-width: 3; } .v-hub { fill: var(--mint); } .v-spoke { stroke: var(--mint); stroke-width: 3; stroke-linecap: round; }
.v-shadow { fill: rgba(0,0,0,.45); } .v-body { transform-box: view-box; transform-origin: 76px 60px; }
.scene .pkg { position: absolute; overflow: visible; } .scene .pkg path { fill: var(--accent); }
.scene .ring { position: absolute; width: 80px; height: 28px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.auth.intro .logo-wrap { position: relative; z-index: 3; }
/* dashboard: pre-shift card + 4-up Today strip */
.pre { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; margin: 0 0 10px; border-radius: 10px 20px 20px 10px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--text); box-shadow: inset 0 2px 0 var(--accent); }
.pre > span:nth-child(2) { flex: 1; min-width: 0; } .pre b { display: block; font: 700 15px var(--font-ui); } .pre small { color: var(--text-2); font-size: 12.5px; }
.pre .pi { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px 16px 16px 9px; background: var(--accent-soft); color: var(--accent-text); flex: none; } .pre .pi svg.i { width: 20px; height: 20px; }
.pre > svg.i:last-child { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.pre.done { border-color: var(--line); box-shadow: none; min-height: 48px; } .pre.done b { font-size: 14px; }
.strip.s4 { grid-template-columns: repeat(4, 1fr); color: var(--text); } .strip.s4 b { font-size: 16.5px; white-space: nowrap; }
a.card.lrow { color: var(--text); } a.card.lrow .chev { width: 14px; height: 14px; flex: none; stroke: var(--text-3); fill: none; stroke-width: 2.2; }
.dtile .dsh { display: block; }

/* v7.6 · My Rates */
.qcard { margin: 6px 16px 0; padding: 14px; } .qhead b { display: block; font: 700 18px var(--font-display); } .qhead small { color: var(--text-2); font-size: 13px; }
.seg8.sm { margin: 10px 0 8px; } .seg8.sm button { min-height: 38px; font-size: 13px; }
.qchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .qchip { min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface-2); font: 700 13px var(--font-ui); color: var(--text-2); } .qchip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.qsel { min-height: 36px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface-2); font: 700 13px var(--font-ui); color: var(--text); }
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 6px 0; }
.qf { display: flex; flex-direction: column; gap: 4px; } .qf > span { font: 700 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.qv { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border-radius: 10px 18px 18px 10px; background: var(--surface-2); border: 1px solid var(--line); } .qv input { width: 100%; min-width: 0; border: 0; background: none; outline: none; font: 700 17px var(--font-display); color: var(--text); } .qv em { font-style: normal; color: var(--text-3); font-size: 13px; }
.qlines { margin: 8px 0; padding: 4px 0; border-top: 1px solid var(--line); }
.qtot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .qtot > div { padding: 10px; border-radius: 10px 18px 18px 10px; background: var(--surface-2); } .qtot small { display: block; font: 600 11.5px var(--font-ui); color: var(--text-3); } .qtot b { display: block; font: 700 19px var(--font-display); }
.ratetabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 16px 16px 10px; } .ratetabs::-webkit-scrollbar { display: none; }
.ratetabs button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); font: 700 13.5px var(--font-ui); color: var(--text-2); } .ratetabs .on { background: var(--text); color: var(--bg); border-color: var(--text); }
.rrow { align-items: center; } .rrow .tt { white-space: normal; } .hintr { display: block; font: 500 12.5px var(--font-ui); color: var(--text-3); margin-top: 2px; } .warnr { display: block; font: 700 12px var(--font-ui); color: var(--warning); margin-top: 2px; }
.rrow.out { border-color: color-mix(in srgb, var(--warning) 40%, var(--line)); }
.rin { flex: none; display: flex; align-items: center; gap: 3px; min-height: 44px; padding: 0 10px; border-radius: 10px 18px 18px 10px; background: var(--surface-2); border: 1px solid var(--line-strong); } .rin input { width: 62px; border: 0; background: none; outline: none; text-align: right; font: 700 16px var(--font-display); color: var(--text); } .rin .u { font: 600 12.5px var(--font-ui); color: var(--text-3); }
.rin:focus-within { border-color: var(--accent); }
.ratecmp { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px 18px 18px 10px; background: var(--surface-2); font: 600 13.5px var(--font-ui); color: var(--text-2); } .ratecmp b { color: var(--text); } .ratecmp a { margin-left: auto; font-weight: 700; }
.ratecmp.low { box-shadow: inset 3px 0 0 var(--warning); } .ratecmp.sent { color: var(--text); }
.jfy .row3 { display: flex; gap: 8px; } .jfy .row3 .btn { min-height: 50px; font-size: 15px; padding: 0 8px; }
/* v7.7 · bigger opening scene + full logo on the van */
.scene .pkg { transform-origin: 0 0; } .scene .ring { width: 120px; height: 36px; }
.scene .pshadow { position: absolute; height: 10px; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(3px); transform-origin: 50% 50%; opacity: 0; }
.v-d { fill: var(--accent-ink); } .v-cube { fill: var(--accent); } .v-flap { fill: var(--mint); }
.bmark { width: 104px; height: 113px; } .logo-wrap .word img { height: 52px; }
.scene .pkg path { stroke: var(--accent-ink); stroke-width: 16; stroke-linejoin: round; paint-order: stroke; } .scene .pkg { filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); z-index: 2; } .scene .van { z-index: 1; }

/* ===== v8: live data, client portal, street map ===== */
.msplit .lf { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .35s cubic-bezier(0.23, 1, 0.32, 1); background: var(--map-bg); }
.msplit .lf.on { opacity: 1; }
.msplit.has-lf .mapsv { visibility: hidden; }
.msplit .mcap, .msplit .fab2 { z-index: 3; }
.msplit .leaflet-control-attribution { font: 600 10px var(--font-ui); background: var(--glass); color: var(--text-2); border-radius: 6px 0 0 0; }
.msplit .leaflet-control-attribution a { color: var(--text-2); }
.msplit .leaflet-control-zoom a { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); width: 36px; height: 36px; line-height: 34px; }
:root:not([data-theme="light"]) .msplit .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.6); }
.lpin { background: none; border: 0; }
.lpin .lp { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.lpin .lp.dim { opacity: .35; }
.lpin .lme { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.lpin .lme i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--accent); }
@media (prefers-reduced-motion: no-preference) { .lpin .lme { animation: lmepulse 2s ease-out infinite; } }
@keyframes lmepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.cmap { height: 240px; margin: 0 -16px 4px; }
.cmapfb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-2); font: 600 14px var(--font-ui); }
.cmapfb .i { width: 20px; height: 20px; color: var(--accent); }
.cstep { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 14px; }
.cstep > div { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text-3); }
.cstep i { width: 26px; height: 28px; display: grid; place-items: center; border-radius: 8px 14px 14px 8px; background: var(--surface-2); border: 1px solid var(--line); }
.cstep .ok i, .cstep .on i { background: none; border: 0; }
.cstep b { font: 700 12px var(--font-display); letter-spacing: .04em; }
.cstep small { font: 600 11px var(--font-ui); min-height: 14px; }
.cstep .ok, .cstep .on { color: var(--text); }
.cstep .on b { color: var(--accent-text); }
.podgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.podph { margin: 0; border-radius: 10px 20px 20px 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.podph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.podph figcaption { padding: 8px 10px; font: 600 12px var(--font-ui); color: var(--text-2); }
.sigbox { background: #fff; border-radius: 10px 20px 20px 10px; padding: 8px; }
.sigbox img { display: block; width: 100%; max-height: 140px; object-fit: contain; }
.err.ok { color: var(--success); }
.fld .opt { font-style: normal; color: var(--text-3); letter-spacing: .04em; text-transform: none; font-weight: 600; margin-left: 6px; }