/* ============================================================
   LinkPRO — Powered by AptolinkPRO
   Palette (from MikeM wireframes):
     #2D3142 jet navy   #4F5D75 blue slate   #BFC0C0 silver
     #FFFFFF white       #EF8354 coral accent
   ============================================================ */
:root {
  --navy: #2D3142;
  --slate: #7A88A6;  /* POLISH-V1: lightened from #4F5D75 */
  --silver: #BFC0C0;
  --white: #FFFFFF;
  --coral: #EF8354;
  --coral-dark: #d9703f;
  --ink: #1d2030;
  --panel: #353a4f;
  --panel-2: #3f4661;
  --line: rgba(191, 192, 192, 0.18);
  --good: #4caf72;
  --bad: #e2574c;
  --muted: #9aa0b4;
  --radius: 14px;
  --nav-h: 64px;
  --top-h: 56px;
  --vh: 100vh;
  font-size: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--navy);
  color: var(--white);
  height: var(--vh);
  overflow: hidden;
  overscroll-behavior: none;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* ---------- App frame ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: var(--vh);
  max-width: 520px;
  margin: 0 auto;
  background: var(--navy);
  position: relative;
}

/* ---------- Top bar ---------- */
.topbar {
  height: var(--top-h);
  flex: 0 0 var(--top-h);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}
.topbar .title { font-weight: 700; letter-spacing: .3px; font-size: 1.05rem; }
.topbar .menu, .topbar .kebab {
  position: absolute; top: 0; bottom: 0; width: 52px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--white); font-size: 1.2rem;
}
.topbar .menu { left: 0; }
.topbar .kebab { right: 0; }

/* ---------- Scroll area ---------- */
.screen {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.screen.hidden { display: none; }

/* ---------- Bottom nav (4 buttons) ---------- */
.bottomnav {
  height: var(--nav-h);
  flex: 0 0 var(--nav-h);
  display: flex;
  background: var(--coral);
  z-index: 20;
}
.bottomnav button {
  flex: 1; border: 0; background: none; color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: .68rem; font-weight: 600; opacity: .82;
  transition: opacity .15s;
}
.bottomnav button .ico { width: 22px; height: 22px; display: block; }
.bottomnav button.active { opacity: 1; }
.bottomnav button.active .pill {
  position: absolute; /* visual handled by wrapper below */
}
.navItem { position: relative; }
/* GHOST-PILL removed: active state shown via icon color/opacity */

/* ---------- Buttons ---------- */
.btn {
  border: 0; border-radius: 12px; padding: 13px 16px; font-size: .95rem; font-weight: 700;
  background: var(--coral); color: var(--white); width: 100%;
  transition: background .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn:hover { background: var(--coral-dark); }
.btn.secondary { background: var(--slate); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--white); }
.btn.sm { width: auto; padding: 9px 14px; font-size: .85rem; border-radius: 10px; }

/* ---------- Login ---------- */
.login {
  height: var(--vh); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 28px;
  background:
    linear-gradient(180deg, rgba(45,49,66,.86), rgba(45,49,66,.97)),
    radial-gradient(120% 80% at 50% 0%, rgba(79,93,117,.55), rgba(45,49,66,0));
  text-align: center;
}
.brandMark {
  width: 116px; height: 116px; border-radius: 26px;
  background: var(--coral); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.5rem; letter-spacing: .5px;
  box-shadow: 0 18px 40px rgba(239,131,84,.35);
  transform: rotate(-4deg); margin-bottom: 22px;
}
.brandName { font-size: 1.7rem; font-weight: 800; letter-spacing: .4px; }
.brandSub { color: var(--silver); font-size: .82rem; margin-top: 4px; margin-bottom: 30px; font-weight: 500; }
.login form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.field { text-align: left; }
.field label { display: block; font-size: .72rem; color: var(--silver); margin: 0 0 6px 4px; letter-spacing: .4px; text-transform: uppercase; }
.field input {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,.06); color: var(--white); font-size: 1rem;
}
.field input:focus { outline: 2px solid var(--coral); border-color: transparent; }
.login .err { color: #ffb4ad; font-size: .82rem; min-height: 18px; }
.login .links { display: flex; justify-content: space-between; margin-top: 6px; font-size: .82rem; color: var(--silver); }
.login .links a { text-decoration: none; }

/* ---------- Home ---------- */
.locActions { display: flex; gap: 10px; padding: 12px; }
.locActions .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
#homeMap, #locMap, #deliveriesMap { width: 100%; height: 240px; background: var(--panel); }
.mapWrap { position: relative; }
.mapWrap .recenter {
  position: absolute; right: 12px; bottom: 12px; z-index: 500;
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--white); color: var(--navy); font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.sectionHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 8px; font-weight: 700; font-size: 1rem;
}
.sectionHead .seeAll { color: var(--coral); font-size: .82rem; font-weight: 600; }

/* ---------- Delivery date list (Home) ---------- */
.dateList { padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.dateCard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
}
.dateCard .meta .d { font-weight: 700; font-size: .95rem; }
.dateCard .meta .s { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.dateCard.past { opacity: .55; }
.dateCard .kebab2 { background: none; border: 0; color: var(--silver); font-size: 1.2rem; padding: 6px; }

/* ---------- Deliveries (daily) ---------- */
.deliveryList { padding: 8px 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.stopCard {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px;
}
.stopCard .seq {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; color: var(--white);
  background: var(--coral);
}
.stopCard.done .seq { background: var(--good); }
.stopCard.cancelled .seq { background: var(--bad); }
.stopCard.rescheduled .seq { background: var(--slate); }
.stopCard .body { flex: 1; min-width: 0; }
.stopCard .name { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stopCard .addr { color: var(--muted); font-size: .76rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stopCard .tags { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.tag { font-size: .68rem; padding: 3px 8px; border-radius: 20px; background: rgba(255,255,255,.08); color: var(--silver); }
.tag.status { font-weight: 700; }
.tag.status.done { background: rgba(76,175,114,.18); color: #9be3b4; }
.tag.status.pending { background: rgba(239,131,84,.16); color: #ffc4a3; }
.tag.status.cancelled { background: rgba(226,87,76,.18); color: #ffb1aa; }
.tag.status.rescheduled { background: rgba(79,93,117,.35); color: #c7cfe0; }
.stopCard .chev { align-self: center; color: var(--muted); font-size: 1.1rem; }

/* ---------- Empty / loading states ---------- */
.state { padding: 40px 24px; text-align: center; color: var(--muted); }
.state .big { font-size: 1.05rem; color: var(--silver); font-weight: 600; margin-bottom: 6px; }
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18); border-top-color: var(--coral);
  animation: spin .8s linear infinite; margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px); transform: translateX(-50%);
  background: var(--ink); color: var(--white); padding: 11px 18px; border-radius: 24px;
  font-size: .85rem; box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 999;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90%;
  border: 1px solid var(--line);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Date strip on deliveries ---------- */
.dateStrip {
  display: flex; gap: 8px; padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
}
.dateStrip button {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); color: var(--silver);
  padding: 8px 12px; border-radius: 10px; font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.dateStrip button.active { background: var(--coral); color: var(--white); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===== Stop Detail Screen ===== */
.stopDetail { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.stopDetailHeader { display: flex; align-items: center; justify-content: space-between; }
.stopDetailSeq { width: 36px; height: 36px; border-radius: 50%; background: #EF8354; color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.stopDetailName { font-size: 20px; font-weight: 800; color: var(--text, #fff); }
.stopDetailAddr { font-size: 14px; color: var(--muted, rgba(255,255,255,.6)); }
.stopDetailMeta { display: flex; gap: 8px; flex-wrap: wrap; }
.stopDetailMeta .tag { background: rgba(255,255,255,.08); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.stopDetailActions { display: flex; flex-direction: column; gap: 10px; }
.stopDetailActions .btn { width: 100%; padding: 14px; font-size: 16px; font-weight: 800; border-radius: 12px; border: none; cursor: pointer; }
.btn.checkin { background: #4caf72; color: #fff; }
.btn.checkout { background: #EF8354; color: #fff; }
.btn.complete { background: #3a7dff; color: #fff; }
.btn.disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.3); cursor: not-allowed; }
.stopDetailStatus { text-align: center; font-size: 13px; color: var(--muted, rgba(255,255,255,.5)); padding: 8px; }

/* ---------- Locations (LOCATIONS-V1) ---------- */
.locList { padding: 10px 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.locCard {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
}
.locCard .locInner {
  position: relative; z-index: 2; background: var(--panel);
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px;
  transition: transform .18s ease; touch-action: pan-y;
}
.locCard.swiped .locInner { transform: translateX(-84px); }
.locChip {
  flex: 0 0 auto; font-size: .64rem; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px;
  color: var(--white); margin-top: 2px;
}
.locChip.saved  { background: var(--slate); }
.locChip.shared { background: var(--coral); }
.locBody { flex: 1 1 auto; min-width: 0; }
.locName {
  font-weight: 700; font-size: .95rem; color: var(--white);
  display: inline-flex; align-items: center; gap: 6px; cursor: text;
}
.locName .edit { color: var(--silver); font-size: .8rem; opacity: .7; }
.locName input {
  background: rgba(255,255,255,.08); border: 1px solid var(--line);
  color: var(--white); border-radius: 8px; padding: 4px 8px; font-size: .95rem; width: 100%;
}
.locCoords {
  color: var(--muted); font-size: .78rem; margin-top: 3px;
  display: inline-flex; align-items: center; gap: 8px;
}
.locCoords .copy { background: none; border: 0; color: var(--slate); font-size: .74rem; cursor: pointer; padding: 0; }
.locTime { color: var(--muted); font-size: .72rem; margin-top: 2px; }
.locKebab { background: none; border: 0; color: var(--silver); font-size: 1.2rem; padding: 4px 6px; cursor: pointer; }
.locDelZone {
  position: absolute; top: 0; right: 0; bottom: 0; width: 84px; z-index: 1;
  background: var(--bad); color: var(--white); border: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; font-size: .85rem; cursor: pointer;
}
.locMenu {
  position: absolute; right: 10px; top: 42px; z-index: 5;
  background: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); overflow: hidden; min-width: 150px;
}
.locMenu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--white); padding: 11px 14px; font-size: .88rem; cursor: pointer;
}
.locMenu button:hover { background: rgba(255,255,255,.06); }
.locMenu button.danger { color: #ffb4ad; }

/* ---------- Home dashboard (HOME-DASH-V2) ---------- */
.dash { padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 14px; }
.dashHead .hi { font-size: 1.25rem; font-weight: 800; color: var(--white); }
.dashHead .dt { color: var(--silver); font-size: .82rem; margin-top: 2px; }
.dashBanner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(79,93,117,.28); border: 1px solid var(--line); border-radius: var(--radius); color: var(--silver); font-size: .86rem; }
.dashBanner .bx { font-size: 1.1rem; }
.dashBanner .close { margin-left: auto; background: none; border: 0; color: var(--silver); font-size: 1.1rem; cursor: pointer; }
.dashCard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.progWrap { display: flex; align-items: baseline; justify-content: space-between; }
.progBig { font-size: 1.5rem; font-weight: 800; color: var(--white); }
.progBig small { font-size: .9rem; color: var(--muted); font-weight: 600; }
.progPct { color: var(--good); font-weight: 700; font-size: .95rem; }
.progBar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); margin: 12px 0 14px; overflow: hidden; }
.progBar > span { display: block; height: 100%; background: var(--good); border-radius: 999px; transition: width .4s ease; }
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.count { text-align: center; padding: 8px 4px; border-radius: 10px; background: rgba(255,255,255,.04); }
.count .n { font-size: 1.15rem; font-weight: 800; }
.count .l { font-size: .62rem; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin-top: 2px; }
.count.done .n { color: #9be3b4; }
.count.resc .n { color: #c7cfe0; }
.count.canc .n { color: #ffb1aa; }
.count.left .n { color: #ffc4a3; }
.nextCard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.nextCard .lab { font-size: .68rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.nextCard .nm { font-size: 1.05rem; font-weight: 800; color: var(--white); margin-top: 4px; }
.nextCard .ad { color: var(--silver); font-size: .82rem; margin-top: 3px; }
.nextCard .go { margin-top: 12px; }
.routeRow { display: flex; gap: 10px; }
.routeRow .rItem { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; }
.routeRow .rItem .n { font-size: 1.15rem; font-weight: 800; color: var(--white); }
.routeRow .rItem .l { font-size: .64rem; text-transform: uppercase; color: var(--muted); margin-top: 2px; letter-spacing: .3px; }
.msgStrip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--silver); font-size: .86rem; }
.msgStrip .mx { font-size: 1.05rem; }

/* ---------- Location action sheet (LOC-SHEET-V1) ---------- */
.sheetBack {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0);
  display: flex; align-items: flex-end; justify-content: center;
  transition: background .22s ease; pointer-events: none;
}
.sheetBack.show { background: rgba(0,0,0,.5); pointer-events: auto; }
.sheet {
  width: 100%; max-width: 520px; background: var(--ink);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
}
.sheetBack.show .sheet { transform: translateY(0); }
.sheetGrip { width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.25); margin: 6px auto 12px; }
.sheetTitle { font-weight: 800; font-size: 1rem; color: var(--white); padding: 0 6px; }
.sheetSub { font-size: .78rem; color: var(--muted); padding: 2px 6px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.sheetItem {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: none; border: 0; color: var(--white);
  padding: 15px 8px; font-size: .98rem; text-align: left; cursor: pointer;
  border-radius: 10px;
}
.sheetItem:hover { background: rgba(255,255,255,.05); }
.sheetItem .si { width: 22px; text-align: center; font-size: 1.05rem; color: var(--silver); }
.sheetItem.danger { color: #ffb1aa; }
.sheetItem.danger .si { color: #ffb1aa; }
.sheetItem.cancel { justify-content: center; color: var(--silver); font-weight: 700; margin-top: 6px; border: 1px solid var(--line); }

/* ---------- My Deliveries sort toggle (DELIV-SORT-V1) ---------- */
.sectionHead .hdRight { display: inline-flex; align-items: center; gap: 12px; }
.sortToggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.sortToggle button { background: none; border: 0; color: var(--muted); font-size: .72rem; font-weight: 700; padding: 5px 11px; cursor: pointer; }
.sortToggle button.active { background: var(--slate); color: var(--white); }

/* ---------- Light theme (THEME-V1) ---------- */
html[data-theme="light"] {
  --navy: #F2F4F8;        /* THEME-POLISH-V2: page bg, slightly warmer */
  --ink: #FBFCFE;         /* topbar: off-white, not stark #FFFFFF */
  --panel: #FFFFFF;
  --panel-2: #EEF0F4;
  --white: #33384A;       /* text: softer charcoal, was #2D3142 */
  --silver: #5A6377;
  --muted: #8A90A0;
  --line: #E6E9EF;
}
html[data-theme="light"] body { background: var(--navy); color: var(--white); }
html[data-theme="light"] .topbar { background: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 1px 4px rgba(45,49,66,.05); }
html[data-theme="light"] .dateCard,
html[data-theme="light"] .stopCard,
html[data-theme="light"] .locCard,
html[data-theme="light"] .locCard .locInner,
html[data-theme="light"] .dashCard,
html[data-theme="light"] .nextCard,
html[data-theme="light"] .routeRow .rItem,
html[data-theme="light"] .msgStrip,
html[data-theme="light"] .dashBanner { box-shadow: 0 1px 3px rgba(45,49,66,.08); }
html[data-theme="light"] .btn.ghost { color: var(--white); border-color: var(--line); }
html[data-theme="light"] .field input { background: #fff; }
/* nav bar stays coral in both themes (unchanged) */

/* ---------- Settings screen (THEME-V1) ---------- */
.setWrap { padding: 8px 16px 18px; }
.setName { font-size: 1.2rem; font-weight: 800; color: var(--white); margin: 0 0 16px; }
.setGroup { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.setRow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.setRowMain { flex: 1; }
.setRowTitle { font-size: .95rem; font-weight: 700; color: var(--white); }
.setRowSub { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.switch { width: 50px; height: 30px; border-radius: 999px; border: 0; background: var(--panel-2); position: relative; cursor: pointer; transition: background .18s; flex: 0 0 auto; }
.switch.on { background: var(--coral); }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on .knob { transform: translateX(20px); }
.setNote { color: var(--muted); font-size: .8rem; margin: 16px 4px 0; line-height: 1.5; }

/* ---------- Slate-fill text + polish (POLISH-V1) ---------- */
.btn.secondary { color: #fff; }
.locChip.saved { color: #fff; }
.sortToggle button.active { color: #fff; }

/* ---------- Slate titles (SLATE-TITLES-V1): POS names + Delivery List titles, both themes ---------- */
.stopCard .name,
.locName,
.nextCard .nm,
.dateCard .meta .d,
#deliveriesHead { color: #54627E; }

/* ---------- Title color: dark-theme override (TITLE-THEME-SPLIT-V1) ---------- */
/* Light theme keeps #5F6E8C (set above). Dark theme lightens to soft near-silver. */
/* DARK-TITLE-LIGHTEN-V2 */
html[data-theme="dark"] .stopCard .name,
html[data-theme="dark"] .locName,
html[data-theme="dark"] .nextCard .nm,
html[data-theme="dark"] .dateCard .meta .d,
html[data-theme="dark"] #deliveriesHead { color: #D0D7E2; }

/* Dark timestamps lighten (DARK-TITLE-LIGHTEN-V2) */
html[data-theme="dark"] .locTime,
html[data-theme="dark"] .dateCard .meta .s { color: #D0D7E2; }
/* Stop Detail name -> slate titles (STOPDETAIL-TITLE) */
.stopDetailName { color: #54627E; }
html[data-theme="dark"] .stopDetailName { color: #D0D7E2; }
/* ---------- Settings full (SETTINGS-FULL) ---------- */
.setLabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 18px 4px 7px; font-weight: 700; }
.segRow { display: flex; gap: 0; border-top: 1px solid var(--line); }
.segRow button { flex: 1; background: none; border: 0; color: var(--muted); font-size: .82rem; font-weight: 700; padding: 12px 4px; cursor: pointer; border-right: 1px solid var(--line); }
.segRow button:last-child { border-right: 0; }
.segRow button.active { background: var(--slate); color: #fff; }
/* SETGAP: tighten top */
.setWrap .setLabel:first-of-type { margin-top: 4px; }
/* ---------- DISPATCH-NOTIF Stage 1 ---------- */
.msgCard { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid #EF8354; border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.msgCard.new { border-left-color: #EF8354; }
.msgTop { display: flex; align-items: center; gap: 8px; }
.msgTop .mx { font-size: 1rem; }
.msgTitle { font-weight: 800; font-size: .92rem; color: var(--white); }
.msgSub { font-size: .78rem; color: var(--muted); margin: 3px 0 10px 24px; }
.loadAgendaBtn { width: 100%; background: #EF8354; color: #fff; border: 0; border-radius: 10px; padding: 11px; font-weight: 800; font-size: .88rem; cursor: pointer; }
.loadAgendaBtn:disabled { opacity: .6; }
.msgHistory { margin-top: 6px; }
.msgStrip.loaded { opacity: .7; }
html[data-theme="light"] .msgTitle { color: #2D3142; }
/* ---------- STAGE3B: priority + preview overlay ---------- */
.msgCard.priority { border-left-color: #e2574c; }
.msgCard.priority .msgTitle { color: #e2574c; }
.loadAgendaBtn.priority { background: #e2574c; }
.msgStrip.histView { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.msgStrip.histView .viewOld { margin-left: auto; font-size: .72rem; font-weight: 800; color: #EF8354; background: rgba(239,131,84,.14); padding: 2px 8px; border-radius: 6px; }
.previewOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 2000; display: none; align-items: flex-end; justify-content: center; transition: background .2s; }
.previewOverlay.show { display: flex; background: rgba(0,0,0,.5); }
.previewSheet { background: var(--panel); width: 100%; max-width: 480px; max-height: 82vh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.previewHead { display: flex; align-items: center; justify-content: space-between; padding: 16px; font-weight: 800; color: var(--white); border-bottom: 1px solid var(--line); }
.previewClose { background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.previewNote { font-size: .76rem; color: var(--muted); padding: 8px 16px; background: rgba(239,131,84,.08); }
.previewBody { overflow-y: auto; padding: 8px 12px 20px; }
.pvStop { display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.pvSeq { width: 26px; height: 26px; border-radius: 50%; background: var(--slate); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; flex-shrink: 0; }
.pvName { font-weight: 700; font-size: .88rem; color: var(--white); }
.pvAddr { font-size: .76rem; color: var(--muted); }
.pvEmpty { padding: 24px; text-align: center; color: var(--muted); font-size: .85rem; }
html[data-theme="light"] .pvName, html[data-theme="light"] .previewHead { color: #2D3142; }
/* ---------- STAGE3B: priority + preview overlay ---------- */
.msgCard.priority { border-left-color: #e2574c; }
.msgCard.priority .msgTitle { color: #e2574c; }
.loadAgendaBtn.priority { background: #e2574c; }
.msgStrip.histView { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.msgStrip.histView .viewOld { margin-left: auto; font-size: .72rem; font-weight: 800; color: #EF8354; background: rgba(239,131,84,.14); padding: 2px 8px; border-radius: 6px; }
.previewOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 2000; display: none; align-items: flex-end; justify-content: center; transition: background .2s; }
.previewOverlay.show { display: flex; background: rgba(0,0,0,.5); }
.previewSheet { background: var(--panel); width: 100%; max-width: 480px; max-height: 82vh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.previewHead { display: flex; align-items: center; justify-content: space-between; padding: 16px; font-weight: 800; color: var(--white); border-bottom: 1px solid var(--line); }
.previewClose { background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.previewNote { font-size: .76rem; color: var(--muted); padding: 8px 16px; background: rgba(239,131,84,.08); }
.previewBody { overflow-y: auto; padding: 8px 12px 20px; }
.pvStop { display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.pvSeq { width: 26px; height: 26px; border-radius: 50%; background: var(--slate); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; flex-shrink: 0; }
.pvName { font-weight: 700; font-size: .88rem; color: var(--white); }
.pvAddr { font-size: .76rem; color: var(--muted); }
.pvEmpty { padding: 24px; text-align: center; color: var(--muted); font-size: .85rem; }
html[data-theme="light"] .pvName, html[data-theme="light"] .previewHead { color: #2D3142; }
/* ---------------- MESSAGING-STAGEB ---------------- */
.navBadge { position: absolute; top: 4px; right: 50%; transform: translateX(14px); background: #e2574c; color: #fff; font-size: .62rem; font-weight: 800; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; padding: 0 4px; }
.bottomnav button { position: relative; }
#messagesScreen:not(.hidden) { display: flex; flex-direction: column; padding: 0; min-height: 0; }
.chatThread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.chatCompose { flex: 0 0 auto; }
.msgHeadBar { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px; font-weight: 800; font-size: 1.05rem; color: var(--white); border-bottom: 1px solid var(--line); }
.msgHeadSub { font-size: .78rem; font-weight: 600; color: var(--muted); }
.chatThread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.chatEmpty { text-align: center; color: var(--muted); font-size: .85rem; margin: auto; }
.chatRow { display: flex; }
.chatRow.me { justify-content: flex-end; }
.chatRow.them { justify-content: flex-start; }
.chatBubble { max-width: 78%; padding: 9px 12px 6px; border-radius: 14px; font-size: .9rem; line-height: 1.35; position: relative; word-wrap: break-word; }
.chatRow.them .chatBubble { background: var(--panel); color: var(--white); border-bottom-left-radius: 4px; }
.chatRow.me .chatBubble { background: #EF8354; color: #fff; border-bottom-right-radius: 4px; }
.chatTime { display: block; font-size: .62rem; opacity: .7; margin-top: 3px; text-align: right; }
.chatCompose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.chatCompose input { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 10px 16px; color: var(--white); font-size: .9rem; outline: none; }
.chatSendBtn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #EF8354; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
html[data-theme="light"] .chatRow.them .chatBubble, html[data-theme="light"] .msgHeadBar { color: #2D3142; }
html[data-theme="light"] .chatCompose input { color: #2D3142; }

/* THEME-POLISH-V2: soften dark-mode topbar (was near-black --ink) */
html[data-theme="dark"] .topbar,
:root .topbar {
  background: linear-gradient(180deg, #3a4059, #333850);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}

/* NAV-WHITE-LIGHT: white nav text + icons on coral bar in light mode */
html[data-theme="light"] .bottomnav button { color: #ffffff; }
html[data-theme="light"] .bottomnav button .ico { color: #ffffff; stroke: #ffffff; }
html[data-theme="light"] .bottomnav button.active { color: #ffffff; opacity: 1; }

/* NAV-WHITE-LIGHT-2: white text on other coral elements in light mode */
html[data-theme="light"] .stopCard .seq { color: #ffffff; }
html[data-theme="light"] .nextCard .go .btn,
html[data-theme="light"] .btn { color: #ffffff; }

/* TAG-DARKEN: richer, darker status tag text (was pale/washed out) */
html[data-theme="light"] .tag.status.done { background: rgba(76,175,114,.22); color: #1e6b3a; }
html[data-theme="light"] .tag.status.pending { background: rgba(239,131,84,.22); color: #8a3d12; }
html[data-theme="light"] .tag.status.cancelled { background: rgba(226,87,76,.20); color: #8c2018; }
html[data-theme="light"] .tag.status.rescheduled { background: rgba(122,136,166,.22); color: #3b4560; }
html[data-theme="light"] .tag.status.active { background: rgba(239,131,84,.22); color: #8a3d12; }
html[data-theme="light"] .tag { color: #4a5164; }

/* SPIDERFY-V1: count badge on a pin holding several co-located stops */
.spiderPin { position: relative; }
.spiderPin .spiderCount {
  position: absolute; top: -4px; right: -4px;
  background: #3b82f6; color: #fff; font-size: .6rem; font-weight: 800;  /* SPIDER-FAN-V2 */
  min-width: 15px; height: 15px; line-height: 15px; text-align: center;
  border-radius: 8px; padding: 0 3px; border: 1.5px solid #fff;
}