/* Phone frame and the two app themes. App colours are fixed by design
   (customer = daylight, rescuer = night cab) and never follow the page theme. */

.device {
  --zoom: 1;
  zoom: var(--zoom);
  position: relative; flex: none;
  width: 380px; height: 800px; padding: 10px;
  border-radius: 56px;
  background: linear-gradient(150deg, #313B42 0%, #0D1215 38%, #0D1215 70%, #252E35 100%);
  box-shadow:
    inset 0 0 0 1.5px #3A444C,
    0 0 0 1px #05080A,
    0 40px 80px -34px rgb(5 10 14 / .6),
    0 18px 30px -20px rgb(5 10 14 / .5);
}
.device::before, .device::after {
  content: ""; position: absolute; right: -3px; width: 3px; border-radius: 0 3px 3px 0; background: #1B2227;
}
.device::before { top: 150px; height: 70px; }
.device::after { top: 240px; height: 118px; }
.device.buzz { animation: buzz .42s linear 3; }
@keyframes buzz {
  0%, 100% { translate: 0 0; } 20% { translate: -4px 0; } 40% { translate: 4px 0; }
  60% { translate: -3px 0; } 80% { translate: 3px 0; }
}

.screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 46px; overflow: hidden; isolation: isolate;
  background: var(--a-bg); color: var(--a-ink);
  font: 400 14px/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.cam {
  position: absolute; top: 13px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: #06090B; box-shadow: 0 0 0 2px #10161A; z-index: 60;
}
.sb {
  position: absolute; inset: 0 0 auto 0; z-index: 55; height: 38px;
  padding: 12px 24px 0 30px; display: flex; justify-content: space-between; align-items: flex-start;
  font: 600 13px/1 var(--f-body); letter-spacing: .01em; pointer-events: none;
}
.sb-ic { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }
.sb-ic svg { height: 11px; width: auto; display: block; }
.sb-dark .sb { color: #121A1F; }
.sb-light .sb { color: #FFFFFF; }
.gbar {
  position: absolute; bottom: 8px; left: 50%; width: 120px; height: 4px; margin-left: -60px;
  border-radius: 3px; background: currentColor; opacity: .32; z-index: 55; pointer-events: none;
}
.sb-dark .gbar { color: #121A1F; }
.sb-light .gbar { color: #FFFFFF; }

.a-view { position: absolute; inset: 0; overflow: hidden; }
.a-view.enter { animation: viewin .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes viewin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- app themes ---------- */
.app-c {
  --a-bg: #FFFFFF; --a-bg2: #F2F4F5; --a-bg3: #E7EBED;
  --a-ink: #152027; --a-ink2: #56646E; --a-ink3: #87939C; --a-line: #E2E7EA;
  --a-accent: var(--brand, #FFB81C); --a-on-accent: var(--on-brand, #152027);
  --a-link: #1B6A74;
  --a-ok: #178A52; --a-ok-bg: #E2F4EA; --a-warn: #8F5A00; --a-warn-bg: #FFF2CF;
  --a-danger: #D4382A; --a-danger-bg: #FCE6E2; --a-water: #1F6F7A; --a-water-bg: #E0F0F1;
  --a-shadow: 0 -10px 30px rgb(16 27 34 / .13);
  --a-float: 0 6px 20px rgb(16 27 34 / .14);
  --mk-land: #EDF1E7; --mk-field: #E2E9D4; --mk-urban: #E4E6E1; --mk-water: #B6D7D8; --mk-canal: #C7E1E1;
  --mk-road: #FFFFFF; --mk-road-case: #D5DAD1; --mk-ql: #FFDE9E; --mk-ql-case: #E0A946; --mk-ct: #BDE3C9; --mk-ct-case: #4D9F72;
  --mk-label: #4D5B64; --mk-water-label: #2B7778; --mk-halo: #FFFFFF;
  --mk-flood: rgb(40 120 160 / .2); --mk-flood-line: rgb(40 120 160 / .5);
  --mk-route: #152027; --mk-route-case: #FFFFFF; --mk-you: var(--a-accent); --mk-you-ring: #152027; --mk-pin: #152027;
  --mk-truck-cab: #1C262D; --mk-truck-bed: var(--a-accent); --mk-truck-stroke: #FFFFFF; --mk-car: #F4F6F7;
  --mk-shield-ink: #3A2A00; --mk-heat-hi: #FF5A3C; --mk-heat-mid: #FFB81C; --mk-heat-lo: #FFD777;
}
.app-r {
  --a-bg: #0F151A; --a-bg2: #182128; --a-bg3: #222D35;
  --a-ink: #EEF2F4; --a-ink2: #9EACB5; --a-ink3: #6C7B85; --a-line: #29343C;
  --a-accent: var(--brand, #FFB81C); --a-on-accent: var(--on-brand, #141A1E);
  --a-link: var(--a-accent);
  --a-ok: #3BCB82; --a-ok-bg: rgb(59 203 130 / .15); --a-warn: #FFC54D; --a-warn-bg: rgb(255 197 77 / .14);
  --a-danger: #FF6152; --a-danger-bg: rgb(255 97 82 / .15); --a-water: #62B8BC; --a-water-bg: rgb(98 184 188 / .14);
  --a-shadow: 0 -10px 30px rgb(0 0 0 / .5);
  --a-float: 0 8px 24px rgb(0 0 0 / .45);
  --mk-land: #141B20; --mk-field: #172026; --mk-urban: #1C252B; --mk-water: #18323A; --mk-canal: #1B3840;
  --mk-road: #2A343C; --mk-road-case: #11171B; --mk-ql: #4A4030; --mk-ql-case: #2A241B; --mk-ct: #23463A; --mk-ct-case: #15291F;
  --mk-label: #7F8E98; --mk-water-label: #4F9A9E; --mk-halo: #0F151A;
  --mk-flood: rgb(98 184 210 / .16); --mk-flood-line: rgb(98 184 210 / .45);
  --mk-route: var(--a-accent); --mk-route-case: #0F151A; --mk-you: #FFFFFF; --mk-you-ring: #0F151A; --mk-pin: #FFFFFF;
  --mk-truck-cab: #E9EEF1; --mk-truck-bed: var(--a-accent); --mk-truck-stroke: #0F151A; --mk-car: #C9D2D8;
  --mk-shield-ink: #F5E2B8; --mk-heat-hi: #FF5A3C; --mk-heat-mid: #FFB81C; --mk-heat-lo: #FFD777;
}

/* ---------- map ---------- */
svg.mk { display: block; width: 100%; height: 100%; }
.mk-landbg { fill: var(--mk-land); }
.mk-field { fill: var(--mk-field); }
.mk-urban { fill: var(--mk-urban); }
.mk-canal, .mk-river, .mk-roads path, .mk-route, .mk-route-case { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mk-canal { stroke: var(--mk-canal); }
.mk-river { stroke: var(--mk-water); }
.mk-flood { fill: var(--mk-flood); stroke: var(--mk-flood-line); }
.mk-street-c { stroke: var(--mk-road-case); }
.mk-street { stroke: var(--mk-road); }
.mk-ql-c { stroke: var(--mk-ql-case); }
.mk-ql { stroke: var(--mk-ql); }
.mk-ct-c { stroke: var(--mk-ct-case); }
.mk-ct { stroke: var(--mk-ct); }
.mk-route-case { stroke: var(--mk-route-case); }
.mk-route { stroke: var(--mk-route); }
.mk-label { fill: var(--mk-label); font-family: var(--f-body); font-weight: 600; paint-order: stroke; stroke: var(--mk-halo); stroke-linejoin: round; }
.mk-label.w { fill: var(--mk-water-label); font-style: italic; font-weight: 500; }
.mk-label.city { font-weight: 800; }
.mk-label.region { font-weight: 600; opacity: .8; }
.mk-label.flood { fill: var(--mk-water-label); font-weight: 700; }
.mk-shield rect { fill: var(--mk-ql); stroke: var(--mk-ql-case); }
.mk-shield text { fill: var(--mk-shield-ink); font-family: var(--f-display); font-weight: 700; }
.mk-shield.ct rect { fill: var(--mk-ct-case); stroke: none; }
.mk-shield.ct text { fill: #FFFFFF; }
.mk-you-pulse { fill: var(--mk-you); transform-box: fill-box; transform-origin: center; animation: mkpulse 2.4s ease-out infinite; }
.mk-you-dot { fill: var(--mk-you); stroke: var(--mk-you-ring); }
.mk-acc { fill: var(--mk-you); fill-opacity: .16; stroke: var(--mk-you); stroke-opacity: .6; }
@keyframes mkpulse { from { transform: scale(.35); opacity: .55; } to { transform: scale(1.5); opacity: 0; } }
.mk-radar circle { fill: none; stroke: var(--mk-you); transform-box: fill-box; transform-origin: center; animation: mkradar 2.6s ease-out infinite; opacity: 0; }
.mk-radar circle:nth-child(2) { animation-delay: .85s; }
.mk-radar circle:nth-child(3) { animation-delay: 1.7s; }
@keyframes mkradar { from { transform: scale(.15); opacity: .9; } to { transform: scale(1); opacity: 0; } }
.mk-truck-cab { fill: var(--mk-truck-cab); stroke: var(--mk-truck-stroke); }
.mk-truck-bed { fill: var(--mk-truck-bed); stroke: var(--mk-truck-stroke); }
.mk-truck-car { fill: var(--mk-car); stroke: var(--mk-truck-stroke); }
.mk-truck-glass { fill: #7FA7B8; }
.mk-shadow { fill: #000; opacity: .22; }
.mk-pin-body { fill: var(--mk-pin); stroke: var(--mk-halo); }
.mk-pin-dot { fill: var(--mk-you); }
.mk-dest-body { fill: var(--mk-pin); stroke: var(--mk-halo); }
.mk-dest-flag { fill: none; stroke: var(--mk-halo); stroke-linecap: round; stroke-linejoin: round; }
.mk-unit { fill: var(--mk-truck-cab); stroke: var(--mk-truck-stroke); }
.mk-unit-bed { fill: var(--mk-truck-bed); }

/* ---------- app kit: layout ---------- */
.a-col { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--a-bg); }
.a-col > .a-body { flex: 1; min-height: 0; overflow: hidden; padding: 2px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.a-body.center { align-items: stretch; text-align: center; }
.a-foot { padding: 10px 16px 30px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--a-line); background: var(--a-bg); }
.a-bar { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 46px 16px 10px; background: var(--a-bg); }
.a-bar h2 { flex: 1; min-width: 0; margin: 0; font: 700 17px/1.25 var(--f-body); }
.a-bar .sub { display: block; font-size: 12px; font-weight: 500; color: var(--a-ink2); }
.a-bar.float { position: absolute; inset: 0 0 auto 0; background: linear-gradient(var(--a-bg) 62%, transparent); padding-bottom: 22px; }
.a-ib {
  width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--a-bg2); color: var(--a-ink);
}
.a-ib .i { width: 20px; height: 20px; }
.a-step { flex: none; font: 600 12px/1 var(--f-body); color: var(--a-ink2); background: var(--a-bg2); padding: 7px 10px; border-radius: 999px; }

.a-map { position: absolute; inset: 0; background: var(--mk-land); }
.a-map.dim::after { content: ""; position: absolute; inset: 0; background: rgb(8 14 18 / .28); }
.a-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; flex-direction: column; gap: 12px;
  padding: 8px 16px 30px; border-radius: 26px 26px 0 0;
  background: var(--a-bg); box-shadow: var(--a-shadow);
}
.a-sheet::before { content: ""; align-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--a-line); }
.a-sheet.tabs { bottom: 72px; padding-bottom: 14px; }
.a-tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: 72px;
  display: flex; padding: 8px 4px 20px; background: var(--a-bg); border-top: 1px solid var(--a-line);
}
.a-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--a-ink3); }
.a-tab .i { width: 22px; height: 22px; }
.a-tab.on { color: var(--a-ink); }
.a-tab.on .i { stroke-width: 2.3; }

/* ---------- app kit: text ---------- */
.a-view b, .a-view strong { font-weight: 700; }
.a-num { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .005em; }
.a-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 700 14px/1.2 var(--f-body); }
.a-h small { font-size: 12px; font-weight: 500; color: var(--a-ink3); }
.a-muted { color: var(--a-ink2); }
.a-faint { color: var(--a-ink3); }
.tt { flex: 1; min-width: 0; }
.tt > * { display: block; }
.tt b { font-size: 13.5px; line-height: 1.3; }
.tt > small, .tt > span:not([class]) { font-size: 12px; color: var(--a-ink2); line-height: 1.35; }
.tt > .a-mono { font-size: 12.5px; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-link { flex: none; font-size: 13px; font-weight: 700; color: var(--a-link); }

/* ---------- app kit: controls ---------- */
.a-btn {
  appearance: none; border: 0; flex: none; width: 100%; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15.5px/1 var(--f-body); text-align: center; cursor: pointer;
  background: var(--a-accent); color: var(--a-on-accent);
}
.a-btn .i { width: 20px; height: 20px; }
.a-btn.sec { background: var(--a-bg2); color: var(--a-ink); }
.a-btn.ghost { background: transparent; color: var(--a-ink2); box-shadow: inset 0 0 0 1.5px var(--a-line); }
.a-btn.ok { background: var(--a-ok); color: #06140C; }
.a-btn.sm { height: 44px; border-radius: 14px; font-size: 14px; }
.a-btn[disabled] { opacity: .45; }
.a-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.a-row > .a-btn { flex: 1; width: auto; }
.a-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.a-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--a-bg2); color: var(--a-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.a-chip .i { width: 15px; height: 15px; }
.a-chip.on { background: var(--a-ink); color: var(--a-bg); }
.a-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--a-bg2); color: var(--a-ink2);
}
.a-badge .i { width: 14px; height: 14px; }
.a-badge.ok { background: var(--a-ok-bg); color: var(--a-ok); }
.a-badge.warn { background: var(--a-warn-bg); color: var(--a-warn); }
.a-badge.danger { background: var(--a-danger-bg); color: var(--a-danger); }
.a-badge.water { background: var(--a-water-bg); color: var(--a-water); }
.a-badge.accent { background: var(--a-accent); color: var(--a-on-accent); }
.a-plate {
  display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 7px; border-radius: 5px;
  background: #F9FAF7; color: #10171C; box-shadow: inset 0 0 0 1.5px #10171C;
  font: 700 13px/1 var(--f-display); letter-spacing: .05em; white-space: nowrap;
}
.a-seg { display: flex; gap: 2px; padding: 3px; border-radius: 13px; background: var(--a-bg2); }
.a-seg > span { flex: 1; height: 32px; display: grid; place-items: center; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--a-ink2); white-space: nowrap; }
.a-seg > .on { background: var(--a-bg); color: var(--a-ink); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.app-r .a-seg > .on { background: var(--a-bg3); }
.a-switch { position: relative; flex: none; width: 42px; height: 26px; border-radius: 999px; background: var(--a-line); }
.a-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s; }
.a-switch.on { background: var(--a-ok); }
.a-switch.on::after { transform: translateX(16px); }
.a-check { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.a-check > i { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--a-line); }
.a-check.on > i { background: var(--a-ink); color: var(--a-bg); box-shadow: none; }
.a-check > i .i { width: 14px; height: 14px; stroke-width: 3; }
.a-field { min-height: 48px; padding: 9px 12px; border-radius: 14px; background: var(--a-bg2); font-size: 13.5px; line-height: 1.4; }
.a-field small { display: block; font-size: 11.5px; color: var(--a-ink3); margin-bottom: 2px; }
.a-field.focus { background: var(--a-bg); box-shadow: inset 0 0 0 1.5px var(--a-ink); }
.caret { display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--a-ink); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- app kit: cards & lists ---------- */
.a-card { border: 1px solid var(--a-line); border-radius: 16px; padding: 12px 14px; background: var(--a-bg); }
.a-soft { border-radius: 16px; padding: 12px 14px; background: var(--a-bg2); }
.a-list { display: flex; flex-direction: column; border-radius: 16px; background: var(--a-bg2); overflow: hidden; }
.a-li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-size: 13.5px; }
.a-li + .a-li { border-top: 1px solid var(--a-line); }
.a-li > .i { width: 22px; height: 22px; color: var(--a-ink2); }
.a-li .val { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-alert { display: flex; gap: 10px; padding: 11px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; }
.a-alert > .i { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.a-alert b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.a-alert.warn { background: var(--a-warn-bg); }
.a-alert.warn > .i { color: var(--a-warn); }
.a-alert.water { background: var(--a-water-bg); }
.a-alert.water > .i { color: var(--a-water); }
.a-alert.danger { background: var(--a-danger-bg); }
.a-alert.danger > .i { color: var(--a-danger); }
.a-alert.ok { background: var(--a-ok-bg); }
.a-alert.ok > .i { color: var(--a-ok); }
.a-float { position: absolute; left: 12px; right: 12px; z-index: 5; box-shadow: var(--a-float); }
.a-float.a-alert { background: var(--a-bg); }

/* tiles */
.a-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.a-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 2px 8px; border-radius: 16px;
  background: var(--a-bg2); color: var(--a-ink); font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center;
}
.a-tile .ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--a-bg); }
.a-tile .ic .i { width: 22px; height: 22px; }
.a-tile.on { background: var(--a-accent); color: var(--a-on-accent); }
.a-tile.on .ic { background: color-mix(in srgb, var(--a-bg) 70%, transparent); color: var(--a-ink); }
.a-grid4.sm .a-tile { padding: 7px 2px 7px; font-size: 11px; }
.a-grid4.sm .a-tile .ic { width: 32px; height: 32px; border-radius: 11px; }
.a-grid4.sm .a-tile .ic .i { width: 19px; height: 19px; }

/* SOS */
.a-sos {
  position: relative; overflow: hidden; width: 100%; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 20px;
  background: var(--a-accent); color: var(--a-on-accent);
}
.a-sos::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -6px; width: 84px; pointer-events: none;
  background: repeating-linear-gradient(-55deg, transparent 0 9px, color-mix(in srgb, var(--a-on-accent) 13%, transparent) 9px 18px);
}
.a-sos > .i { position: relative; z-index: 1; width: 22px; height: 22px; }
.a-sos__ring { position: relative; z-index: 1; width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--a-on-accent); color: var(--a-accent); }
.a-sos__ring::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--a-on-accent); opacity: .3; animation: sosring 1.8s ease-out infinite; }
.a-sos__ring .i { width: 26px; height: 26px; }
@keyframes sosring { from { transform: scale(.9); opacity: .45; } to { transform: scale(1.25); opacity: 0; } }
.a-sos__t { position: relative; z-index: 1; flex: 1; min-width: 0; }
.a-sos__t b { display: block; font: 800 25px/1 var(--f-display); letter-spacing: .01em; }
.a-sos__t span { display: block; margin-top: 4px; font-size: 12.5px; opacity: .82; }

/* top overlay row */
.a-top { position: absolute; left: 12px; right: 12px; top: 44px; z-index: 5; display: flex; gap: 8px; align-items: center; }
.a-loc { flex: 1; min-width: 0; height: 50px; padding: 0 12px; border-radius: 16px; display: flex; align-items: center; gap: 9px; background: var(--a-bg); box-shadow: var(--a-float); }
.a-loc > .i { width: 20px; height: 20px; color: var(--a-ink2); }
.a-loc .tt small { font-size: 11px; color: var(--a-ink3); }
.a-fab { position: relative; width: 50px; height: 50px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--a-bg); box-shadow: var(--a-float); }
.a-fab .i { width: 22px; height: 22px; }
.a-fab .dot { position: absolute; top: 13px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--a-danger); box-shadow: 0 0 0 2px var(--a-bg); }

.a-veh { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--a-bg2); }
.a-veh > .i { width: 26px; height: 26px; }
.a-veh .tt .a-plate { display: inline-flex; margin-top: 3px; }

/* photos */
.a-photos { display: flex; gap: 8px; align-items: center; }
.a-ph { position: relative; flex: none; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--a-bg3); }
.a-ph svg { display: block; width: 100%; height: 100%; }
.a-ph .lbl { position: absolute; left: 5px; bottom: 5px; padding: 2px 6px; border-radius: 6px; background: rgb(10 15 18 / .62); color: #FFF; font-size: 10.5px; font-weight: 600; }
.a-ph .ok { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--a-ok); color: #FFF; }
.a-ph .ok .i { width: 11px; height: 11px; stroke-width: 3.2; }
.a-ph-add { flex: none; width: 72px; height: 72px; border-radius: 12px; border: 1.5px dashed var(--a-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--a-ink2); font-size: 11px; font-weight: 600; }
.a-ph-add .i { width: 22px; height: 22px; }
.a-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a-pgrid .a-ph { width: 100%; height: 92px; }

/* price */
.a-price { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border-radius: 16px; background: var(--a-bg2); }
.a-pr { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.a-pr > span:first-child { color: var(--a-ink2); }
.a-pr > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-pr.neg > span:last-child { color: var(--a-ok); }
.a-pr.total { margin-top: 2px; padding-top: 9px; border-top: 1px dashed var(--a-line); font-size: 14px; align-items: baseline; }
.a-pr.total > span:first-child { color: var(--a-ink); font-weight: 700; }
.a-pr.total > span:last-child { font: 700 24px/1 var(--f-display); }
.a-fine { font-size: 11.5px; line-height: 1.4; color: var(--a-ink3); }

/* radio list */
.a-radios { display: flex; flex-direction: column; border: 1px solid var(--a-line); border-radius: 16px; overflow: hidden; }
.a-radio { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; }
.a-radio + .a-radio { border-top: 1px solid var(--a-line); }
.a-radio > i { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--a-line); }
.a-radio.on { background: var(--a-bg2); }
.a-radio.on > i { box-shadow: inset 0 0 0 6px var(--a-ink); }
.a-radio > .val { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* eta + people */
.a-eta { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.a-eta small { display: block; font-size: 12.5px; color: var(--a-ink2); margin-bottom: 3px; }
.a-eta .big { display: block; font: 700 34px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.a-person { display: flex; align-items: center; gap: 12px; }
.a-av { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #FFF; font: 700 15px/1 var(--f-body); background: #2C6E73; }
.a-av.sm { width: 34px; height: 34px; font-size: 12px; }
.a-av.amber { background: #B7791F; }
.a-av.plum { background: #7C4D86; }
.a-av .vf { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--a-ok); color: #FFF; box-shadow: 0 0 0 2px var(--a-bg); }
.a-av .vf .i { width: 11px; height: 11px; stroke-width: 3; }
.a-pin { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--a-bg2); }
.a-pin .tt small { font-size: 11.5px; }
.a-pin-d { display: flex; gap: 5px; }
.a-pin-d span { width: 30px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--a-bg); box-shadow: inset 0 0 0 1.5px var(--a-line); font: 700 22px/1 var(--f-display); }
.a-pin-d.ok span { box-shadow: inset 0 0 0 1.5px var(--a-ok); color: var(--a-ok); }
.a-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.a-act { height: 56px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--a-bg2); font-size: 11.5px; font-weight: 600; }
.a-act .i { width: 20px; height: 20px; }
.a-roundbtns { display: flex; gap: 8px; }
.a-rb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--a-bg2); }
.a-rb .i { width: 20px; height: 20px; }

/* timeline */
.a-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.a-steps li { position: relative; padding: 0 0 11px 24px; font-size: 13px; color: var(--a-ink3); }
.a-steps li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--a-bg); box-shadow: inset 0 0 0 2px var(--a-line); }
.a-steps li::after { content: ""; position: absolute; left: 8px; top: 17px; bottom: 1px; width: 1.5px; background: var(--a-line); }
.a-steps li:last-child { padding-bottom: 0; }
.a-steps li:last-child::after { display: none; }
.a-steps li.done { color: var(--a-ink2); }
.a-steps li.done::before { background: var(--a-ok); box-shadow: none; }
.a-steps li.now { color: var(--a-ink); font-weight: 700; }
.a-steps li.now::before { background: var(--a-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a-accent) 32%, transparent); }
.a-steps li em { font-style: normal; font-weight: 500; color: var(--a-ink3); }
.a-hs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.a-hs i { height: 4px; border-radius: 4px; background: var(--a-line); }
.a-hs i.done { background: var(--a-ok); }
.a-hs i.now { background: var(--a-accent); }

/* toast & modal */
.a-toast {
  position: absolute; left: 12px; right: 12px; top: 46px; z-index: 8;
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 16px;
  background: var(--a-bg); box-shadow: var(--a-float); font-size: 13px; line-height: 1.4;
  animation: toastin .45s cubic-bezier(.2, .8, .2, 1) both;
}
.app-r .a-toast { background: var(--a-bg3); }
@keyframes toastin { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.a-scrim { position: absolute; inset: 0; z-index: 8; background: rgb(8 14 18 / .45); }
.a-modal {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
  display: flex; flex-direction: column; gap: 12px; padding: 22px 18px 30px;
  border-radius: 26px 26px 0 0; background: var(--a-bg); box-shadow: var(--a-shadow);
}
.a-modal h3 { margin: 0; font: 700 20px/1.2 var(--f-body); }
.a-modal p { margin: 0; font-size: 13.5px; color: var(--a-ink2); }
.a-modal-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--a-warn-bg); color: var(--a-warn); }
.a-modal-ic .i { width: 26px; height: 26px; }

/* misc */
.a-done { width: 64px; height: 64px; margin: 4px auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--a-ok); color: #FFF; }
.a-done .i { width: 34px; height: 34px; stroke-width: 2.6; }
.a-stars { display: flex; justify-content: center; gap: 6px; color: var(--a-accent); }
.a-stars .i { width: 36px; height: 36px; }
.a-qr { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid var(--a-line); }
.a-qr svg.qr { width: 112px; height: 112px; flex: none; border-radius: 8px; }
.a-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.a-ok-strip { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--a-ok-bg); color: var(--a-ok); font-size: 12.5px; font-weight: 600; }
.a-ok-strip .i { width: 18px; height: 18px; stroke-width: 2.4; }
.a-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.a-kv > div { padding: 8px 10px; border-radius: 12px; background: var(--a-bg2); }
.a-kv small { display: block; font-size: 11px; color: var(--a-ink3); }
.a-kv b { display: block; font-size: 13px; }
.a-sign { position: relative; height: 70px; border-radius: 14px; background: var(--a-bg2); overflow: hidden; }
.a-sign small { position: absolute; left: 12px; top: 8px; font-size: 11px; color: var(--a-ink3); }
.a-sign svg { position: absolute; inset: 14px 30px 6px 30px; width: calc(100% - 60px); height: 50px; }
.a-sign::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 14px; border-bottom: 1px dashed var(--a-line); }
.a-centerpin { position: absolute; left: 50%; top: 30%; z-index: 4; width: 44px; height: 58px; transform: translate(-50%, -100%); filter: drop-shadow(0 6px 6px rgb(0 0 0 / .25)); }
.a-locate { position: absolute; right: 14px; z-index: 5; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--a-bg); box-shadow: var(--a-float); }
.a-locate .i { width: 22px; height: 22px; }

/* Vietnamese national-road km post: red cap, white body */
.kmpost { flex: none; width: 46px; height: 60px; border-radius: 23px 23px 5px 5px; overflow: hidden; display: flex; flex-direction: column; align-items: center; background: #FFFFFF; box-shadow: inset 0 0 0 2px #1A1F22; font-family: var(--f-display); color: #1A1F22; text-align: center; }
.kmpost i { display: block; width: 100%; padding: 6px 0 3px; background: #D23A2C; color: #FFF; font-style: normal; font-weight: 700; font-size: 12px; line-height: 1; box-shadow: inset 2px 2px 0 #1A1F22, inset -2px 0 0 #1A1F22; }
.kmpost b { font-size: 11px; line-height: 1.05; margin-top: 3px; font-weight: 700; }
.kmpost b + b { font-size: 15px; margin-top: 1px; }

/* rescuer specifics */
.a-hazard { height: 14px; flex: none; background: repeating-linear-gradient(-45deg, var(--a-accent) 0 12px, #0B1013 12px 24px); }
.a-ring { position: relative; width: 112px; height: 112px; margin: 0 auto; flex: none; }
.a-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.a-ring .track { fill: none; stroke: var(--a-bg3); stroke-width: 8; }
.a-ring .prog { fill: none; stroke: var(--a-accent); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 40; }
.a-ring.run .prog { stroke-dashoffset: 0; animation: ringdown 15s linear forwards; }
@keyframes ringdown { to { stroke-dashoffset: 283; } }
.a-ring .val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.a-ring .val b { font: 700 42px/1 var(--f-display); }
.a-ring .val small { font-size: 11.5px; color: var(--a-ink2); }
.a-slide { position: relative; flex: none; height: 62px; border-radius: 20px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--a-bg3); cursor: pointer; }
.a-slide__thumb { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 64px; border-radius: 15px; display: grid; place-items: center; background: var(--a-accent); color: var(--a-on-accent); transition: transform .5s cubic-bezier(.3, .8, .2, 1); z-index: 1; }
.a-slide__thumb .i { width: 26px; height: 26px; stroke-width: 2.4; }
.a-slide.done .a-slide__thumb { transform: translateX(252px); }
.a-slide__txt {
  padding-left: 54px; font-weight: 700; font-size: 15px;
  background: linear-gradient(90deg, var(--a-ink3) 0%, var(--a-ink) 45%, var(--a-ink3) 90%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 2.2s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.a-power { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--a-ok); color: #06140C; box-shadow: 0 0 0 6px var(--a-ok-bg); }
.a-power .i { width: 28px; height: 28px; stroke-width: 2.4; }
.a-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.a-stats > div { padding: 10px 4px 9px; border-radius: 14px; background: var(--a-bg2); text-align: center; }
.a-stats b { display: block; font: 700 22px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.a-stats small { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.2; color: var(--a-ink2); }
.a-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--a-bg); box-shadow: var(--a-float); font-size: 13px; font-weight: 700; }
.a-pill .live { width: 9px; height: 9px; border-radius: 50%; background: var(--a-ok); box-shadow: 0 0 0 4px var(--a-ok-bg); }
.a-turn { position: absolute; left: 12px; right: 12px; top: 46px; z-index: 5; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: #17603F; color: #FFF; box-shadow: var(--a-float); }
.a-turn > .i { width: 40px; height: 40px; stroke-width: 2.4; }
.a-turn .tt > b { display: block; font: 700 26px/1 var(--f-display); }
.a-turn .tt > span { display: block; color: #FFF; font-size: 14px; font-weight: 600; line-height: 1.3; }
.a-turn .tt > small { display: block; color: #FFF; font-size: 12px; opacity: .82; }
.a-legs { display: flex; flex-direction: column; gap: 0; }
.a-leg { position: relative; display: flex; gap: 12px; padding-bottom: 12px; }
.a-leg:last-child { padding-bottom: 0; }
.a-leg .dot { position: relative; width: 22px; flex: none; display: flex; justify-content: center; }
.a-leg .dot::before { content: ""; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: var(--a-accent); }
.a-leg:last-child .dot::before { border-radius: 3px; background: var(--a-ink); }
.a-leg:not(:last-child) .dot::after { content: ""; position: absolute; top: 18px; bottom: -2px; left: 10.25px; width: 1.5px; background: var(--a-line); }
.a-chart { display: block; width: 100%; height: auto; }
.a-chart .bar { fill: var(--a-bg3); }
.a-chart .bar.hi { fill: var(--a-accent); }
.a-chart text { fill: var(--a-ink3); font-family: var(--f-body); font-size: 10px; }
.a-chart .val { fill: var(--a-ink); font-weight: 700; }

/* demo helpers */
[data-next] { cursor: pointer; }
.tap-dot {
  position: absolute; left: 50%; top: 50%; z-index: 100; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; pointer-events: none; background: rgb(255 255 255 / .5); border: 2px solid rgb(20 30 36 / .35);
  animation: tap .6s ease-out forwards;
}
@keyframes tap { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

/* ---------- screen-specific pieces ---------- */
.a-col.has-tabs > .a-body { padding-bottom: 84px; }
.a-login-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.a-login-brand .mark { width: 56px; height: 56px; margin-bottom: 6px; }
.a-login-brand b { font: 800 32px/1 var(--f-display); letter-spacing: .005em; }
.a-login-brand span { font-size: 13px; color: var(--a-ink2); }
.a-spin { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 3px solid var(--a-line); border-top-color: var(--a-accent); animation: spin .9s linear infinite; }
.a-spin.sm { width: 18px; height: 18px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
.a-avs { display: flex; flex: none; }
.a-avs .a-av { box-shadow: 0 0 0 2px var(--a-bg2); }
.a-avs .a-av + .a-av { margin-left: -10px; }
.a-chat { justify-content: flex-end; gap: 8px; }
.a-sys { margin: 0 0 auto; padding: 0 14px; text-align: center; font-size: 11.5px; color: var(--a-ink3); }
.msg { max-width: 80%; padding: 9px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.4; }
.msg time { display: block; margin-top: 3px; text-align: right; font-size: 10.5px; opacity: .6; }
.msg.in { align-self: flex-start; background: var(--a-bg2); border-bottom-left-radius: 6px; }
.msg.out { align-self: flex-end; background: var(--a-ink); color: var(--a-bg); border-bottom-right-radius: 6px; }
.msg.ph { width: 62%; padding: 4px; }
.msg.ph svg { display: block; width: 100%; height: 108px; border-radius: 13px; }
.msg.ph time { padding: 2px 8px 2px 0; }
.a-compose { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 5px 0 14px; border-radius: 16px; background: var(--a-bg2); color: var(--a-ink2); }
.a-compose > .i { width: 21px; height: 21px; }
.a-compose__in { flex: 1; min-width: 0; font-size: 13.5px; color: var(--a-ink3); }
.a-send { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--a-accent); color: var(--a-on-accent); }
.a-send .i { width: 19px; height: 19px; }
.a-paystate { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 14px; background: var(--a-bg2); font-size: 14px; font-weight: 600; color: var(--a-ink2); }
.a-mhero { padding: 14px; border-radius: 16px; background: var(--a-ink); color: var(--a-bg); position: relative; overflow: hidden; }
.a-mhero::after { content: ""; position: absolute; right: -8px; top: 0; bottom: 0; width: 70px; background: repeating-linear-gradient(-55deg, transparent 0 9px, var(--a-accent) 9px 18px); opacity: .9; }
.a-mhero b { display: block; max-width: 230px; font: 700 22px/1.08 var(--f-display); }
.a-mhero span { display: block; max-width: 230px; margin-top: 4px; font-size: 12.5px; opacity: .8; }
.a-plan { padding: 12px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--a-line); }
.a-plan.on { box-shadow: inset 0 0 0 2px var(--a-ink); }
.a-ticks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; line-height: 1.35; }
.a-ticks li { position: relative; padding-left: 20px; }
.a-ticks li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 9px; height: 5px; border-left: 2px solid var(--a-ok); border-bottom: 2px solid var(--a-ok); transform: rotate(-45deg); }
.a-sos-head { display: flex; flex-direction: column; gap: 4px; padding: 52px 16px 16px; background: var(--a-danger); color: #FFF; }
.a-sos-head > b { font: 700 27px/1.05 var(--f-display); }
.a-sos-head > span { font-size: 12.5px; opacity: .9; }
.a-sos-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.a-sos-nums span { padding: 10px 6px; border-radius: 14px; background: #FFF; color: var(--a-danger); text-align: center; font-size: 11px; font-weight: 600; line-height: 1.2; }
.a-sos-nums b { display: block; font: 800 30px/1 var(--f-display); margin-bottom: 2px; }
.a-num-list { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; gap: 6px; font-size: 13px; }
.a-num-list li { position: relative; padding-left: 28px; line-height: 1.4; counter-increment: n; }
.a-num-list li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--a-bg2); font: 700 12px/1 var(--f-display); }
.a-prog { height: 6px; border-radius: 6px; background: var(--a-bg3); overflow: hidden; flex: none; }
.a-prog i { display: block; height: 100%; border-radius: 6px; background: var(--a-accent); }
.a-range { position: relative; height: 6px; margin-top: 12px; border-radius: 6px; background: var(--a-bg3); }
.a-range i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--a-accent); }
.a-range i::after { content: ""; position: absolute; right: -9px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 4px rgb(0 0 0 / .4); }
.a-stars.sm { justify-content: flex-start; gap: 2px; }
.a-stars.sm .i { width: 15px; height: 15px; }
.a-ring .prog { transition: stroke-dashoffset 1s linear; }