:root {
  color-scheme: dark;

  --bg: #0b1220;
  --panel: #121d2d;
  --panel2: #18263a;
  --panel3: #22344d;

  --text: #f7f9fc;
  --muted: #9fb0c7;

  --border: #31445f;

  --green: #24c875;
  --green-dark: #128a4d;

  --red: #ef4444;
  --red-dark: #b91c1c;

  --yellow: #f7b84b;
  --yellow2: #ffd166;

  --blue: #4da3ff;
  --blue-dark: #2563eb;

  --orange: #ff9f43;

  --radius: 18px;
  --shadow: 0 12px 32px rgba(0,0,0,.25);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

body {
  padding-bottom:
    max(
      20px,
      env(safe-area-inset-bottom)
    );
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  appearance: none;
  border: 0;
  border-radius: 13px;
  padding: 11px 15px;

  background: var(--blue);
  color: #07111e;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform .08s ease,
    opacity .15s ease,
    background .15s ease;
}

button:hover {
  opacity: .93;
}

button:active {
  transform: scale(.98);
}

button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

button.secondary {
  background: #31445f;
  color: #fff;
}

button.success {
  background: var(--green);
  color: #06170e;
}

button.danger {
  background: var(--red);
  color: #fff;
}

button.warning {
  background: var(--yellow);
  color: #171006;
}

button.big-action {
  width: 100%;
  min-height: 64px;

  font-size: 18px;
  line-height: 1.25;

  border-radius: 16px;
}

button.start-delivery {
  background: var(--green);
  color: #05180d;

  font-size: 19px;
}

button.mark-delivered {
  background: var(--red);
  color: #fff;

  font-size: 19px;
}

button.claim-order {
  background: #22c55e;
  color: #04150b;

  font-size: 19px;
}

input,
select,
textarea {
  width: 100%;

  background: #0d1726;
  color: #fff;

  border: 1px solid var(--border);
  border-radius: 12px;

  padding: 11px 12px;

  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow:
    0 0 0 3px rgba(77,163,255,.14);
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.hidden {
  display: none !important;
}

/*
 * ============================================================
 * Header
 * ============================================================
 */

.topbar {
  position: sticky;
  top: 0;
  z-index: 500;

  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding:
    max(12px, env(safe-area-inset-top))
    18px
    12px;

  background:
    rgba(11,18,32,.96);

  border-bottom:
    1px solid var(--border);

  backdrop-filter:
    blur(16px);
}

.brand {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.4px;
}

.subtitle {
  margin-top: 3px;

  color: var(--muted);

  font-size: 13px;
  font-weight: 700;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.build-badge {
  display: inline-flex;
  align-items: center;

  padding: 6px 9px;

  border-radius: 999px;

  background: #21314a;
  color: #a9c8ef;

  font-size: 11px;
  font-weight: 800;
}

/*
 * ============================================================
 * Main
 * ============================================================
 */

#app {
  width: min(1180px, 100%);

  margin: 0 auto;

  padding: 18px;
}

.loading,
.empty {
  padding: 50px 20px;

  text-align: center;

  color: var(--muted);

  font-size: 17px;
}

.section-title {
  margin:
    20px 0
    10px;

  font-size: 20px;
  font-weight: 900;
}

/*
 * ============================================================
 * Login
 * ============================================================
 */

.login-wrap {
  min-height:
    calc(100vh - 120px);

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 20px 0;
}

.login-card {
  width: min(440px, 100%);

  padding: 25px;

  background:
    linear-gradient(
      180deg,
      #18263a,
      #101a29
    );

  border:
    1px solid var(--border);

  border-radius: 22px;

  box-shadow: var(--shadow);
}

.login-card h1 {
  margin:
    0 0
    5px;

  font-size: 27px;
}

.login-card .login-subtitle {
  margin-bottom: 20px;

  color: var(--muted);
}

.field {
  margin-bottom: 13px;
}

.field label {
  display: block;

  margin-bottom: 6px;

  color: #cbd8e8;

  font-size: 13px;
  font-weight: 800;
}

/*
 * ============================================================
 * Tabs
 * ============================================================
 */

.tabs {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 8px;

  margin:
    12px 0
    16px;
}

.driver-tabs {
  grid-template-columns:
    repeat(4, minmax(0,1fr));
}

.tab {
  min-height: 58px;

  padding: 9px 8px;

  background: #18263a;
  color: #d8e3f1;

  border:
    1px solid var(--border);

  font-size: 14px;
}

.tab.active {
  background: var(--blue);
  color: #06111f;

  border-color: var(--blue);
}

.tab-count {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-width: 24px;
  height: 24px;

  margin-left: 4px;
  padding: 0 6px;

  border-radius: 999px;

  background: rgba(0,0,0,.25);

  font-size: 12px;
}

/*
 * ============================================================
 * Collapsible panels
 * ============================================================
 */

details.fold {
  margin: 10px 0;

  border:
    1px solid var(--border);

  border-radius: 17px;

  background: var(--panel);

  overflow: hidden;
}

details.fold > summary {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 58px;

  padding:
    14px
    50px
    14px
    16px;

  cursor: pointer;

  list-style: none;

  background:
    linear-gradient(
      180deg,
      #22344d,
      #1b2b41
    );

  color: #fff;

  font-size: 17px;
  font-weight: 900;

  user-select: none;
}

details.fold > summary::-webkit-details-marker {
  display: none;
}

details.fold > summary::after {
  content: "▼";

  position: absolute;

  right: 18px;
  top: 50%;

  transform:
    translateY(-50%)
    rotate(-90deg);

  color: var(--yellow);

  font-size: 18px;

  transition:
    transform .18s ease;
}

details.fold[open] > summary::after {
  transform:
    translateY(-50%)
    rotate(0deg);
}

.fold-body {
  padding: 15px;
}

/*
 * ============================================================
 * Dispatch
 * ============================================================
 */

.dispatch-mode-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 9px;

  margin-bottom: 15px;
}

.dispatch-choice {
  position: relative;

  min-height: 108px;

  padding: 13px;

  border:
    1px solid var(--border);

  border-radius: 15px;

  background: #101b2b;

  cursor: pointer;
}

.dispatch-choice.active {
  border-color: var(--yellow);

  box-shadow:
    0 0 0 2px
    rgba(247,184,75,.14);
}

.dispatch-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dispatch-choice strong {
  display: block;

  margin-bottom: 5px;

  color: #fff;

  font-size: 15px;
}

.dispatch-choice span {
  color: var(--muted);

  font-size: 12px;
  line-height: 1.4;
}

.schedule-list {
  display: grid;
  gap: 8px;

  margin:
    12px 0;
}

.schedule-row {
  display: grid;

  grid-template-columns:
    130px
    40px
    130px
    minmax(180px,1fr)
    auto;

  align-items: center;

  gap: 8px;

  padding: 9px;

  background: #0e1827;

  border:
    1px solid #293b54;

  border-radius: 13px;
}

.schedule-arrow {
  text-align: center;

  color: var(--yellow);

  font-weight: 900;
}

.dispatch-help {
  margin-top: 8px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.5;
}

/*
 * ============================================================
 * Driver management
 * ============================================================
 */

.driver-list {
  display: grid;
  gap: 8px;
}

.driver-row {
  display: grid;

  grid-template-columns:
    minmax(180px,1fr)
    minmax(130px,.7fr)
    auto
    auto;

  gap: 8px;

  align-items: center;

  padding: 11px;

  background: #0e1827;

  border:
    1px solid #293b54;

  border-radius: 13px;
}

.driver-name {
  font-weight: 900;
}

.driver-phone {
  color: var(--muted);
}

.driver-offline {
  opacity: .55;
}

.call-history-row {
  display: grid;

  grid-template-columns:
    160px
    180px
    1fr
    120px;

  gap: 10px;

  padding: 10px 0;

  border-bottom:
    1px solid #263750;

  font-size: 13px;
}

.call-history-row:last-child {
  border-bottom: 0;
}

/*
 * ============================================================
 * Order cards
 * ============================================================
 */

.order-list {
  display: grid;
  gap: 13px;
}

.order-card {
  position: relative;

  overflow: hidden;

  padding: 15px;

  background:
    linear-gradient(
      180deg,
      #17263a,
      #111d2d
    );

  border:
    1px solid var(--border);

  border-radius: 19px;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.18);
}

.order-card.new-order {
  border-color:
    rgba(239,68,68,.75);

  box-shadow:
    0 0 0 1px
    rgba(239,68,68,.14),
    0 12px 28px
    rgba(0,0,0,.24);
}

.new-order-banner {
  margin:
    -15px
    -15px
    14px;

  padding:
    12px
    14px;

  background:
    linear-gradient(
      90deg,
      #991b1b,
      #dc2626
    );

  color: #fff;

  text-align: center;

  font-size: 18px;
  font-weight: 1000;

  letter-spacing: .2px;
}

.order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 10px;
}

.order-number {
  color: #fff;

  font-size: 19px;
  font-weight: 1000;
}

.order-time {
  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;
}

.status-badge {
  display: inline-flex;
  align-items: center;

  min-height: 30px;

  padding:
    5px
    9px;

  border-radius: 999px;

  background: #2a3b54;
  color: #fff;

  font-size: 12px;
  font-weight: 900;
}

.status-NEW,
.status-SENT,
.status-VIEWED {
  background: #7f1d1d;
}

.status-ACCEPTED {
  background: #854d0e;
}

.status-DELIVERING {
  background: #1d4ed8;
}

.status-DELIVERED {
  background: #166534;
}

.customer-name {
  margin-bottom: 7px;

  font-size: 17px;
  font-weight: 900;
}

/*
 * Address is intentionally the most prominent information
 * on each delivery card.
 */

.order-address {
  display: block;

  width: 100%;

  margin:
    8px 0
    11px;

  padding:
    14px
    14px;

  background:
    linear-gradient(
      180deg,
      #fff4b8,
      #ffe783
    );

  color: #111827;

  border:
    2px solid #f6c945;

  border-radius: 14px;

  font-size: 21px;
  line-height: 1.28;
  font-weight: 1000;

  word-break: break-word;
}

.order-address:hover {
  background: #fff0a2;
}

.info-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 8px;

  margin: 9px 0;
}

.info-box {
  padding: 10px;

  background: #0d1726;

  border:
    1px solid #2a3d57;

  border-radius: 12px;
}

.info-label {
  margin-bottom: 3px;

  color: var(--muted);

  font-size: 11px;
  font-weight: 800;
}

.info-value {
  color: #fff;

  font-size: 14px;
  font-weight: 900;

  word-break: break-word;
}

.payment-CASH {
  color: #86efac;
}

.payment-CREDIT {
  color: #93c5fd;
}

.payment-UNPAID {
  color: #fca5a5;
}

.order-remark {
  margin:
    10px 0;

  padding:
    10px 12px;

  background: #3b2a10;

  border:
    1px solid #725019;

  border-radius: 12px;

  color: #ffdf91;

  font-weight: 800;

  white-space: pre-wrap;
}

.order-alerts {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin:
    8px 0;
}

.alert-chip {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    8px
    18px;

  border:
    2px solid
    rgba(255,255,255,0.22);

  border-radius: 14px;

  font-size: 18px;
  font-weight: 1000;

  line-height: 1.15;

  letter-spacing: 0.2px;

  box-shadow:
    0 4px 12px
    rgba(0,0,0,0.25);
}

.alert-chip.drink {
  background: #087f9c;
}

.alert-chip.japanese {
  background: #a3296a;
}

@media (max-width: 600px) {
  .order-alerts {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;

    width: 100%;
  }

  .alert-chip {
    width: 100%;

    min-height: 56px;

    padding:
      10px
      8px;

    font-size: 19px;

    border-radius: 14px;
  }
}

@media (max-width: 360px) {
  .order-alerts {
    grid-template-columns: 1fr;
  }
}

.order-items {
  margin-top: 10px;

  overflow: hidden;

  border:
    1px solid #2a3d57;

  border-radius: 13px;
}

.order-item {
  display: grid;

  grid-template-columns:
    54px
    1fr
    auto;

  gap: 9px;

  padding: 10px;

  border-bottom:
    1px solid #25364d;
}

.order-item:last-child {
  border-bottom: 0;
}

.item-qty {
  color: var(--yellow);

  font-weight: 1000;
}

.item-name {
  font-weight: 800;
}

.item-extra {
  margin-top: 3px;

  color: #ffcf70;

  font-size: 12px;

  white-space: pre-wrap;
}

.item-price {
  color: #c7d8ed;

  font-weight: 800;
}

.order-total {
  display: flex;
  justify-content: flex-end;

  gap: 15px;

  margin-top: 10px;

  font-size: 17px;
  font-weight: 1000;
}

.order-actions {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 8px;

  margin-top: 12px;
}

.order-actions.two {
  grid-template-columns:
    repeat(2, minmax(0,1fr));
}

.order-actions.one {
  grid-template-columns: 1fr;
}

.order-actions a {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 9px;

  border-radius: 13px;

  background: #30445f;
  color: #fff;

  text-decoration: none;

  font-weight: 900;
}

.order-actions a.navigation {
  background: var(--blue);
  color: #06111f;
}

.assignment-row {
  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 8px;

  margin-top: 10px;
}

/*
 * ============================================================
 * My Account
 * ============================================================
 */

.account-card {
  padding: 18px;

  background:
    linear-gradient(
      180deg,
      #18283e,
      #101b2b
    );

  border:
    1px solid var(--border);

  border-radius: 19px;
}

.account-name {
  font-size: 23px;
  font-weight: 1000;
}

.account-detail {
  margin-top: 5px;

  color: var(--muted);
}

.sound-panel {
  margin-top: 15px;

  padding: 14px;

  background: #0d1726;

  border:
    1px solid #2b3e59;

  border-radius: 14px;
}

.sound-status {
  margin-top: 7px;

  color: var(--muted);

  font-size: 12px;
}

/*
 * Restaurant calling driver
 */

.call-alert {
  margin-top: 13px;

  padding: 15px;

  background:
    linear-gradient(
      135deg,
      #7f1d1d,
      #b91c1c
    );

  border:
    2px solid #ef4444;

  border-radius: 16px;

  box-shadow:
    0 0 28px
    rgba(239,68,68,.22);
}

.call-alert-title {
  margin-bottom: 6px;

  font-size: 18px;
  font-weight: 1000;
}

.call-alert-message {
  margin-bottom: 11px;

  white-space: pre-wrap;
}

/*
 * ============================================================
 * Start Delivery modal
 * ============================================================
 */

.modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 18px;

  background:
    rgba(0,0,0,.76);

  backdrop-filter:
    blur(7px);
}

.modal-box {
  width:
    min(540px,100%);

  padding: 23px;

  background:
    linear-gradient(
      180deg,
      #1d2c42,
      #111c2c
    );

  border:
    2px solid var(--yellow);

  border-radius: 22px;

  box-shadow:
    0 25px 80px
    rgba(0,0,0,.6);
}

.modal-box h2 {
  margin:
    0 0
    9px;

  font-size: 26px;
}

.modal-box p {
  margin:
    0;

  color: #d8e4f2;

  font-size: 16px;
  line-height: 1.55;
}

.modal-address {
  margin-top: 13px;

  padding: 12px;

  background: #fff0a6;
  color: #111827;

  border-radius: 12px;

  font-size: 17px;
  font-weight: 1000;
}

.modal-actions {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;

  margin-top: 19px;
}

.modal-actions button {
  min-height: 74px;

  font-size: 15px;
}

/*
 * ============================================================
 * Toast
 * ============================================================
 */

.toast {
  position: fixed;

  left: 50%;
  bottom:
    max(
      18px,
      env(safe-area-inset-bottom)
    );

  z-index: 10000;

  transform:
    translateX(-50%);

  width:
    min(
      calc(100% - 30px),
      560px
    );

  padding:
    13px 16px;

  background: #e8f1ff;
  color: #07111e;

  border-radius: 13px;

  box-shadow:
    0 15px 50px
    rgba(0,0,0,.5);

  text-align: center;

  font-weight: 900;
}

.toast.error {
  background: #fecaca;
  color: #7f1d1d;
}

/*
 * ============================================================
 * Utility
 * ============================================================
 */

.row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.row.wrap {
  flex-wrap: wrap;
}

.spacer {
  flex: 1;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 12px;
}

.mt8 {
  margin-top: 8px;
}

.mt12 {
  margin-top: 12px;
}

.mb8 {
  margin-bottom: 8px;
}

/*
 * ============================================================
 * Mobile
 * ============================================================
 */

@media (max-width: 760px) {

  .topbar {
    align-items: flex-start;

    padding-left: 13px;
    padding-right: 13px;
  }

  .brand {
    font-size: 19px;
  }

  .build-badge {
    display: none;
  }

  #app {
    padding: 11px;
  }

  .tabs,
  .driver-tabs {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .tab {
    min-height: 55px;

    font-size: 13px;
  }

  .dispatch-mode-grid {
    grid-template-columns: 1fr;
  }

  .schedule-row {
    grid-template-columns:
      1fr
      30px
      1fr;

    gap: 6px;
  }

  .schedule-row select.driver-select {
    grid-column:
      1 / -1;
  }

  .schedule-row button {
    grid-column:
      1 / -1;
  }

  .driver-row {
    grid-template-columns:
      1fr
      auto;
  }

  .driver-phone {
    grid-column:
      1 / 2;
  }

  .call-history-row {
    grid-template-columns: 1fr;

    gap: 3px;

    padding: 11px 0;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .order-address {
    font-size: 20px;
  }

  .order-actions {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .order-actions a.navigation {
    grid-column:
      1 / -1;
  }

  .order-item {
    grid-template-columns:
      44px
      1fr;
  }

  .item-price {
    grid-column:
      2 / 3;
  }

  .modal-actions {
    grid-template-columns: 1fr;
  }

  .modal-actions button {
    min-height: 66px;
  }
}

@media (max-width: 430px) {

  .order-card {
    padding: 12px;
  }

  .new-order-banner {
    margin:
      -12px
      -12px
      12px;

    font-size: 16px;
  }

  .order-head {
    display: block;
  }

  .status-badge {
    margin-top: 7px;
  }

  .order-address {
    padding: 13px 11px;

    font-size: 19px;
  }

  .order-actions {
    grid-template-columns: 1fr;
  }

  .order-actions a.navigation {
    grid-column: auto;
  }

  .assignment-row {
    grid-template-columns: 1fr;
  }
}

/* Professional dispatch spacing and separate action groups */
body[data-kind="admin"] .fold-body {padding:24px;}
.dispatch-mode-grid {gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-bottom:26px;}
.dispatch-choice {display:flex;flex-direction:column;gap:12px;padding:24px;min-height:190px;border-radius:18px;transition:border-color .18s,background .18s;}
.dispatch-choice strong {font-size:17px;line-height:1.55;padding-right:24px;}
.dispatch-choice span {font-size:14px;line-height:1.7;}
.dispatch-choice:focus-within {outline:2px solid var(--yellow);outline-offset:4px;}
.dispatch-choice input {opacity:1;pointer-events:auto;right:18px;top:20px;width:18px;height:18px;accent-color:var(--yellow);}
.schedule-list {gap:16px;margin:20px 0;}
.schedule-row {padding:18px;gap:14px;grid-template-columns:minmax(100px,1fr) 24px minmax(100px,1fr) minmax(160px,1.5fr) auto;}
.schedule-row select,.assignment-row select {min-height:48px;}
.assignment-panel {padding:20px;margin-top:24px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.025);}
.assignment-row {display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:16px;margin-top:12px;}
.assignment-row button {min-height:48px;padding:12px 24px;}
.admin-contact-actions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;}
.admin-contact-actions a {text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center;}
.order-danger-zone {display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px;padding-top:18px;border-top:1px solid var(--border);}
.order-danger-zone button {background:transparent;color:#fda4af;border:1px solid #7f3546;padding:10px 16px;}
.modal-box {padding:28px;max-width:520px;}
.modal-step {font-size:12px;letter-spacing:.1em;color:var(--muted);margin-bottom:12px;}
.modal-actions {gap:14px;margin-top:24px;}
.modal-actions a {display:flex;align-items:center;justify-content:center;text-align:center;border-radius:12px;padding:16px;background:#2563eb;color:white;text-decoration:none;min-height:54px;}
@media(max-width:760px){.dispatch-mode-grid{grid-template-columns:1fr;}.dispatch-choice{min-height:0;padding:20px;}.schedule-row{grid-template-columns:1fr 24px 1fr;}.schedule-row .driver-select{grid-column:1/-1;}.schedule-row button{grid-column:1/-1;}.assignment-row{grid-template-columns:1fr;}.admin-contact-actions{grid-template-columns:1fr;}.order-danger-zone{align-items:stretch;flex-direction:column;}.modal-actions{grid-template-columns:1fr;}body[data-kind="admin"] .fold-body{padding:16px;}}

.alert-setup{display:flex;justify-content:space-between;gap:20px;padding:20px;margin-bottom:20px;background:#122236;border:1px solid #345777;border-radius:18px;line-height:1.7;}
.alert-buttons{display:flex;flex-wrap:wrap;gap:10px;max-width:600px;}.alert-buttons button{min-height:44px;font-size:13px;}
.pickup-info{margin:16px 0;padding:16px 18px;background:rgba(247,184,75,.08);border:1px solid #76613b;border-radius:14px;color:#f9d795;line-height:1.7;}
.pickup-info.ready{background:rgba(45,180,115,.12);border-color:#337d59;color:#96f2c4;}
.pickup-label{display:flex;align-items:center;gap:16px;margin:12px 0 18px;flex-wrap:wrap;color:var(--muted);}.pickup-label input{width:110px;min-height:46px;}
.pickup-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}.pickup-actions button{min-height:46px;}
@media(max-width:760px){.alert-setup{flex-direction:column;}.alert-buttons{display:grid;grid-template-columns:1fr 1fr;}.pickup-actions{display:grid;grid-template-columns:1fr;}}
/* Quiet, light interface. Address and packing reminders carry the strongest contrast. */
:root{color-scheme:light;--bg:#f2f5f7;--panel:#fff;--panel2:#f7f9fb;--panel3:#edf2f5;--text:#273749;--muted:#647487;--border:#dce3e9;--green:#e1eee7;--green-dark:#32634b;--red:#f5e6e7;--red-dark:#8c4650;--yellow:#f3ead5;--yellow2:#f7f0e3;--blue:#446d91;--blue-dark:#365d80;--orange:#efdcc1;--shadow:0 5px 24px rgba(44,66,88,.045);}
html,body{background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;}
.topbar{background:rgba(249,251,252,.97);border-color:var(--border);min-height:70px;}.brand{font-size:21px;font-weight:700;}.build-badge{display:none;}
#app{max-width:1120px;padding:26px 22px;}.subtitle{font-weight:400;}.muted,.sound-status,.account-detail,.item-extra,.driver-phone{color:var(--muted);}
button{background:#456e92;color:#fff;font-weight:600;box-shadow:none;min-height:44px;}.secondary,button.secondary{background:#edf2f6;color:#42586e;border:1px solid #dbe3eb;}
button.success,button.start-delivery,button.claim-order{background:#e0eee7;color:#28583f;border:1px solid #bed7c9;}
button.warning{background:#f2ebdc;color:#6e5933;border:1px solid #e4d6b9;}
button.danger,button.mark-delivered{background:#f7ebec;color:#8a414b;border:1px solid #ead0d4;}
button.big-action,button.start-delivery,button.mark-delivered,button.claim-order{font-size:16px;min-height:50px;font-weight:650;}
input,select,textarea{background:#fbfcfd;color:var(--text);border-color:#d6dfe6;min-height:44px;}.field label{color:#4e6276;}
.login-card,.order-card,.account-card,.sound-panel,.modal-box,details.fold,section.fold,.driver-row,.schedule-row,.info-box,.order-items{background:#fff;color:var(--text);border-color:var(--border);box-shadow:var(--shadow);}
.order-list{gap:24px;}.order-card{padding:22px;border-radius:20px;}.order-card.new-order{border-color:#d5dfe7;box-shadow:var(--shadow);}
.order-number,.info-value,.item-name,.item-price,.account-name,.driver-name,.section-title{color:var(--text);font-weight:650;}
.new-order-banner{background:#edf3f7;color:#506a7f;margin:-22px -22px 20px;padding:9px 18px;font-size:12px;font-weight:600;letter-spacing:.04em;text-align:left;}
.customer-name{font-size:15px;font-weight:500;color:#536577;}.order-head{margin-bottom:14px;}.order-number{font-size:18px;}.order-time{font-size:12px;}
.order-address{background:#e5eef6;border:1px solid #a9c1d7;border-left:5px solid #567c9c;color:#234865;padding:18px 20px;font-size:23px;font-weight:700;line-height:1.4;text-decoration:none;border-radius:13px;}.order-address:hover{background:#dce9f3;color:#193d5b;}
.info-box{background:#f7f9fb;border:0;box-shadow:none;}.info-value{font-size:14px;}.payment-CASH{color:#785c34;}.payment-CREDIT{color:#37644d;}.payment-UNPAID{color:#92505a;}
.status-badge,.status-NEW,.status-SENT,.status-VIEWED{background:#edf2f6;color:#52677a;font-weight:600;}.status-ACCEPTED{background:#e9eef7;color:#536889;}.status-DELIVERING{background:#e1edf6;color:#3d6584;}.status-DELIVERED{background:#e4efe8;color:#3b6650;}
.tabs{gap:10px;margin:18px 0 24px;}.tab{background:#e9eef2;color:#667789;min-height:50px;font-size:14px;border:1px solid transparent;font-weight:600;}.tab.active{background:#fff;color:#365b7a;border-color:#bacbda;box-shadow:0 2px 8px rgba(32,56,80,.03);}.tab-count{background:#e3ebf2;color:#44617b;}
.order-items{box-shadow:none;background:#fbfcfd;border-color:#e5eaee;}.order-item{padding:12px 0;}.item-qty{background:#edf2f6;color:#405c75;font-weight:650;}.order-total{font-size:17px;font-weight:650;border-color:var(--border);}.order-remark{background:#f5f2ea;color:#6e624a;border-color:#e8e0cc;}
.order-actions a,.order-actions a.navigation{background:#eef3f7;color:#49657c;border:1px solid #dce5ec;font-weight:500;}.order-actions{gap:12px;}.order-danger-zone button{background:transparent;color:#985761;border-color:#e6d4d8;}
.assignment-panel{background:#f8fafc;border-color:#e0e7ed;padding:18px;}.assignment-panel .section-title{margin-top:0;font-size:15px;}.assignment-row button{background:#e5edf4;color:#355975;border:1px solid #cbdbe8;}
.pickup-info{background:#f2f5f7;color:#526779;border-color:#dee6eb;padding:12px 15px;font-size:14px;}.pickup-info.ready{background:#ebf4ee;color:#3e6c51;border-color:#c7dfd0;}
.alert-setup{background:#f9fbfc;color:#4b6175;border-color:#dbe5ec;gap:12px;padding:14px 18px;}.alert-setup summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;}.alert-buttons{margin-top:14px;}.alert-buttons button{font-size:12px;min-height:40px;}.sound-status{font-size:13px;}
.call-alert{background:#edf3f8;border:1px solid #bfd2e2;box-shadow:none;color:#3e5971;animation:none;}.call-alert-title,.call-alert-message{color:#35536c;}.call-alert-title{font-size:17px;}.call-alert-message{font-size:16px;}
.modal-backdrop{background:rgba(36,53,70,.26);backdrop-filter:blur(5px);}.modal-box{border-color:#dce5ec;border-radius:22px;box-shadow:0 20px 70px rgba(33,56,79,.16);color:var(--text);}.modal-box h2{font-size:22px;font-weight:650;}.modal-box p{color:var(--muted);}.modal-address{background:#e8eff5;color:#365775;font-weight:600;}.modal-actions button{min-height:52px;}.modal-actions a{background:#e2edf5;color:#355b79;border:1px solid #bfd3e3;font-weight:600;}
.dispatch-choice{background:#f8fafc;border-color:#dde5eb;box-shadow:none;min-height:170px;}.dispatch-choice strong{color:#344e65;font-weight:650;}.dispatch-choice span{color:#697b8b;}.dispatch-choice.active{background:#edf4f9;border-color:#91b1cc;box-shadow:0 0 0 1px #c8d9e7;}.dispatch-choice input{accent-color:#527b9e;}.dispatch-help{background:#f1f5f8;color:#65788a;}.schedule-row{background:#f8fafc;}.schedule-arrow{color:#718497;}
.home-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:4px 0 24px;}.home-heading h1,.subpage-header h1{font-size:25px;font-weight:650;letter-spacing:-.5px;margin:4px 0;}.eyebrow{color:#8797a4;font-size:10px;letter-spacing:.16em;margin:0;}
.management-menu{position:relative;z-index:40;flex-shrink:0;}.management-menu>summary{list-style:none;background:#fff;border:1px solid #cad8e3;color:#3c5f7a;padding:12px 19px;border-radius:12px;cursor:pointer;font-weight:600;}.management-menu>summary::-webkit-details-marker{display:none;}.management-menu nav{position:absolute;right:0;top:calc(100% + 10px);width:320px;max-width:85vw;padding:8px;background:white;border:1px solid #dfe7ed;border-radius:16px;box-shadow:0 12px 38px rgba(40,64,84,.12);}.management-menu nav button{display:block;width:100%;text-align:left;background:white;color:#3b5266;padding:14px 12px;border-radius:10px;}.management-menu nav button:hover{background:#f0f5f9;}.management-menu nav span{display:block;margin-top:3px;font-size:12px;color:#7a8b99;}
.subpage-header{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:25px;}.subpage-header p{margin:5px 0 0;font-size:14px;}.subpage-header button{font-size:13px;}.subpage-header+section.fold{border:1px solid #dfe6ec;border-radius:18px;}
.order-alerts{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0;}.packing-reminder{display:flex;align-items:center;gap:12px;flex:1;min-width:200px;text-align:left;padding:16px 18px;border-radius:14px;font-size:12px;letter-spacing:.045em;line-height:1.45;}.packing-reminder .packing-icon{font-size:29px;}.packing-reminder.drink{background:#eef5fa;color:#356687;border:2px solid #8eb6d4;}.packing-reminder.sushi{background:#f7f0e8;color:#865f39;border:2px solid #d3b493;}.packing-reminder .packing-hint{display:block;font-size:11px;font-weight:400;letter-spacing:0;opacity:.8;margin-top:3px;}
.reminder-dialog{text-align:center;}.reminder-icon{font-size:42px;margin-bottom:10px;}.reminder-dialog h2{font-size:19px;}.reminder-order-number{font-size:30px;font-weight:700;color:#31526c;margin:20px 0;}.reminder-dialog>button{width:100%;margin-top:20px;}.drink-checklist{text-align:left;}.drink-line{display:flex;gap:15px;align-items:flex-start;border-bottom:1px solid #e5ebf0;padding:16px 0;}.drink-quantity{background:#e8f0f6;color:#3a6585;border-radius:8px;padding:6px 10px;white-space:nowrap;font-weight:700;}
.chat-shell{background:#fff;border:1px solid #dfe6ec;border-radius:20px;overflow:hidden;}.chat-toolbar{display:flex;align-items:flex-end;gap:18px;justify-content:space-between;padding:20px 24px;background:#f9fbfc;border-bottom:1px solid #e4ebf0;}.chat-toolbar label{color:#6b7f90;font-size:12px;min-width:220px;}.chat-toolbar select{margin-top:7px;}.chat-toolbar button{background:#e5eef5;color:#3b6380;}.chat-timeline{display:flex;flex-direction:column;gap:16px;padding:28px;background:#f5f8fa;min-height:360px;}.chat-message{max-width:78%;min-width:220px;}.chat-message.outgoing{align-self:flex-end;}.chat-message.incoming{align-self:flex-start;}.chat-meta{font-size:12px;color:#6a7f90;margin-bottom:7px;}.chat-bubble{padding:15px 18px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;background:#e3edf5;color:#38556f;border-radius:16px 16px 4px 16px;}.incoming .chat-bubble{background:#fff;border:1px solid #e0e8ee;border-radius:16px 16px 16px 4px;color:#507062;}.chat-message time,.chat-receipt{display:block;font-size:11px;color:#788c9c;margin-top:5px;}.chat-receipt{color:#6b897b;}.outgoing .chat-meta,.outgoing time,.outgoing .chat-receipt{text-align:right;}
@media(max-width:650px){#app{padding:18px 12px;}.home-heading{align-items:flex-start;gap:10px;}.home-heading h1{font-size:20px;}.management-menu>summary{padding:10px 12px;font-size:13px;}.order-card{padding:18px;}.new-order-banner{margin:-18px -18px 18px;}.order-address{font-size:21px;padding:16px;}.packing-reminder{min-width:0;flex-basis:100%;}.chat-toolbar{padding:16px;flex-wrap:wrap;}.chat-toolbar label{min-width:0;width:100%;}.chat-timeline{padding:18px 14px;}.chat-message{max-width:92%;min-width:160px;}.subpage-header h1{font-size:22px;}.driver-row{grid-template-columns:1fr 1fr;}.driver-row>div:first-child{grid-column:1/-1;}.info-grid{grid-template-columns:1fr 1fr;}}

.alert-setup{display:block;}.fold-body>div[style]{gap:14px!important;}
@media(max-width:600px){.fold-body>div[style]{grid-template-columns:1fr!important;}}

.order-browser{min-width:0}.order-selector{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.order-selector label{display:flex;gap:10px;align-items:center;font-size:14px;color:#526779}.order-selector select{width:auto;max-width:260px;min-width:150px}.order-strip{display:flex;gap:9px;overflow-x:auto;padding:12px 2px;scrollbar-width:thin;overscroll-behavior-x:contain}.order-chip{flex:0 0 auto;min-width:72px;background:#edf2f6;color:#50687b;border:1px solid #d8e2eb;min-height:46px}.order-chip.selected{background:#426b8c;color:white;border-color:#426b8c}.order-chip.urgent-chip{border:2px solid #b8673b}.order-collapse{background:transparent!important;color:#284c69!important;border:0!important;padding:0;text-align:left;cursor:pointer}.collapsed-order{width:100%;background:#edf2f6;color:#42617a;text-align:left;padding:20px}.urgent-notice{background:#fff0df;border:2px solid #d08b50;color:#843d17;border-radius:12px;padding:14px;margin:14px 0;font-weight:750}.priority-button{background:#f8eadc;color:#874722;border:1px solid #ddba98;margin:12px 0}.route-panel{padding:18px;background:#f0f5f8;border:1px solid #d4e1e9;border-radius:16px;margin-bottom:18px}.route-panel label{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.route-panel select{max-width:340px}.route-explanation{font-size:13px;color:#617589}.next-stop{display:block;padding:14px;background:#436e90;color:white!important;border-radius:10px;text-decoration:none;margin:12px 0}.route-sequence summary{cursor:pointer;padding:12px 0;font-weight:650}.route-sequence ol{padding:0;list-style:none}.route-sequence li{display:flex;gap:6px;align-items:center;border-top:1px solid #d9e3eb;padding:8px 0}.route-sequence li button:first-child{flex:1;text-align:left;background:white;color:#34566f;min-width:0}.route-sequence small{display:block;font-size:12px;overflow-wrap:anywhere;margin-top:4px}.route-sequence button:disabled{opacity:.4}.order-list{display:block!important}.order-browser .order-card{margin-top:10px}

.language-switch{display:flex;border:1px solid #cdd9e3;border-radius:10px;padding:3px;background:#e7edf2;gap:3px}.language-switch button{padding:5px 12px;min-height:34px;background:transparent;color:#496176;border:0;box-shadow:none}.language-switch button.selected{background:#fff;color:#234c70;box-shadow:0 2px 4px #213b5026}.map-preference{display:flex;gap:7px;align-items:center;font-size:12px;color:#62798c}.map-preference select{min-height:36px;padding:5px 8px;width:auto;max-width:155px}.build-badge{display:none}.topbar{gap:10px;padding:12px 18px}.top-actions{gap:10px;flex-wrap:wrap}.subtitle{font-size:12px}.order-card{padding:18px!important}.order-head{margin-bottom:10px}.order-address{padding:13px 15px!important;font-size:20px!important}.order-item{padding:8px 0}.order-actions{gap:9px;margin-top:12px}.assignment-panel{padding:14px;margin-top:12px}.pickup-info{margin:10px 0;padding:10px 12px}.route-panel{padding:14px}.packing-reminder{padding:10px 13px}.packing-hint{font-size:11px}.order-number{font-size:25px!important}button,.navigation,.next-stop{border-bottom:3px solid #274b6926;box-shadow:0 3px 6px #233d5317,inset 0 1px 0 #ffffff55;transition:transform .12s,box-shadow .12s}button:active,.navigation:active,.next-stop:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #233d5326}button:disabled{transform:none;box-shadow:none}.order-collapse{box-shadow:none!important}.tabs{gap:8px}.modal-box{padding:24px}.home-heading h1{font-size:25px}@media(max-width:600px){.topbar{align-items:flex-start;flex-wrap:wrap;padding:10px 12px}.top-actions{width:100%;justify-content:space-between;gap:8px}.map-preference span{display:none}.brand{font-size:21px}.order-card{padding:14px!important}.order-address{font-size:19px!important}.order-selector label{width:100%;justify-content:space-between}.order-selector select{flex:1;max-width:220px}.packing-reminder{min-height:58px}.modal-box{padding:20px}.route-panel select{width:100%;max-width:none}}

.history-controls,.window-times{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:16px 0}.history-controls label,.window-times label{display:grid;gap:6px}.access-panel label{margin:10px 0}.access-panel input[type=checkbox]{width:20px;min-height:20px}.access-panel input[type=datetime-local]{max-width:100%;min-height:42px}@media(max-width:600px){.window-times{display:block}.window-times input{width:100%}}
/* REV8: mobile-first layout; event targets and application logic remain intact. */
html{width:100%;overflow-x:clip;overscroll-behavior-x:none;-webkit-text-size-adjust:100%}
body{width:100%;min-width:0;overflow-x:clip;overscroll-behavior-x:none;background:#f3f5f7;color:#293b4c}
#app,.topbar,.topbar>*,.top-actions,.order-browser,.order-card,.fold-body,.route-panel,.account-card{min-width:0;max-width:100%}
#app{width:100%;max-width:880px;margin:auto;padding:24px 20px 40px}
button,input,select,textarea{max-width:100%;min-width:0}
button,a,summary{-webkit-tap-highlight-color:transparent}
button{line-height:1.35;white-space:normal;overflow-wrap:anywhere;border-radius:12px;min-height:44px;box-shadow:0 2px 0 #24476320,0 3px 8px #24476309}
input,select,textarea{font-size:16px;border-radius:11px}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #6f9cbd;outline-offset:2px}
.topbar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;background:#fff;border-bottom:1px solid #e2e8ed;padding:16px max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left));gap:14px}
.brand{font-size:20px;letter-spacing:-.4px;line-height:1.25}.subtitle{font-size:12px;line-height:1.4;margin-top:4px}
.top-actions{display:flex;justify-content:flex-end;gap:10px}.language-switch{flex-shrink:0;background:#f0f3f6;border:1px solid #e1e7ed;border-radius:12px}.language-switch button{min-height:38px;min-width:42px;padding:7px 10px}
.map-preference{min-width:0}.map-preference span{display:none}.map-preference select{width:150px;max-width:100%;min-height:44px;font-size:14px;background:#f7f9fb}
.home-heading{gap:12px;margin:0 0 16px}.home-heading>div{min-width:0}.home-heading h1{font-size:23px}.eyebrow{font-size:9px;letter-spacing:.1em}
.management-menu>summary{min-height:44px;display:flex;align-items:center;padding:10px 14px;box-shadow:0 2px 0 #24476315}.management-menu nav{max-width:calc(100vw - 32px);width:300px}
.tabs{gap:6px;background:#e9eef2;padding:5px;border-radius:15px;margin:14px 0 18px;align-items:stretch}
.tab{min-width:0;min-height:54px;padding:8px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;line-height:1.3;box-shadow:none;border-radius:11px;background:transparent}
.tab.active{background:#fff;color:#294f6e;border:1px solid #d2dee7;box-shadow:0 2px 5px #24476310}.tab-count{margin:0;min-width:22px;height:20px;font-size:11px;padding:0 6px}
.order-selector{padding:12px;background:white;border:1px solid #e0e7ec;border-radius:14px;gap:8px}.order-selector label{min-width:0;flex:1;gap:12px}.order-selector select{min-width:0;flex:1;max-width:100%;width:100%;font-size:16px}.order-strip{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:12px 1px;gap:8px}.order-chip{scroll-snap-align:start;min-width:64px;max-width:160px;min-height:44px;padding:10px 15px;border-radius:12px;box-shadow:none}
.order-card{border:1px solid #dfe6ec;border-radius:18px;padding:18px!important;box-shadow:0 4px 16px #243f5406;overflow-wrap:anywhere}.order-head{align-items:flex-start;gap:10px;flex-wrap:wrap}.order-head>*{min-width:0;max-width:100%}.order-number{font-size:24px!important;line-height:1.2}.order-collapse{min-height:44px;max-width:100%;white-space:normal}.status-badge{font-size:11px;padding:6px 9px}.new-order-banner{margin:0 0 12px;padding:8px 10px;border-radius:8px;font-size:11px}
.order-address{display:block;width:100%;font-size:21px!important;padding:15px!important;border-left-width:4px;border-radius:12px;overflow-wrap:anywhere;line-height:1.45}.customer-name{font-size:14px}.order-time{font-size:11px}.info-grid{gap:8px}.info-grid>*{min-width:0}.info-box{padding:10px;border-radius:10px}.info-value{overflow-wrap:anywhere}
.order-alerts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}.packing-reminder{min-width:0;width:100%;min-height:76px;gap:8px;padding:12px;letter-spacing:0;font-size:12px;line-height:1.4;border-radius:12px}.packing-reminder>span{min-width:0}.packing-reminder .packing-icon{font-size:24px;flex-shrink:0}.packing-hint{font-size:10px!important}.order-items{padding:10px 12px;border-radius:12px}.order-item>*{min-width:0}.item-name,.item-extra,.driver-name,.account-name,.chat-meta{overflow-wrap:anywhere}
.order-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.order-actions.one{grid-template-columns:minmax(0,1fr)}.order-actions>*{min-width:0;font-size:14px;min-height:48px}.order-actions>:last-child:nth-child(odd){grid-column:1/-1}.order-actions a{border-radius:11px}.assignment-panel{border-radius:12px;padding:14px}.assignment-row{grid-template-columns:minmax(0,1fr);gap:10px}.assignment-row>*{width:100%;min-width:0}.pickup-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.pickup-actions>*{min-width:0}.order-danger-zone{margin-top:18px;padding-top:14px;border-top:1px solid #edf0f3;gap:10px}.priority-button{width:100%;min-height:44px}
.route-panel{border-radius:14px;padding:14px;background:#f8fafb}.route-panel .section-title{margin:0 0 12px;font-size:16px}.route-panel label{min-width:0}.route-panel select{min-width:0;width:100%;max-width:100%}.route-sequence li{min-width:0;gap:6px}.route-sequence li>button{padding:10px;min-width:44px}.route-sequence li>button:first-child{min-width:0}.route-sequence button{box-shadow:none}.next-stop{font-size:15px;overflow-wrap:anywhere}
.alert-setup{padding:13px;border-radius:13px}.alert-setup summary{align-items:flex-start}.alert-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.alert-buttons>*{min-width:0}.alert-buttons button{font-size:12px;min-height:44px}.sound-status{font-size:12px;overflow-wrap:anywhere}
.subpage-header{gap:12px;margin-bottom:18px}.subpage-header h1{font-size:23px}.fold-body{padding:16px!important}.fold-body>div[style]{min-width:0}.driver-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:14px;gap:10px;border-radius:12px}.driver-row>*{min-width:0}.driver-row>div:first-child{grid-column:1/-1}.driver-row button{font-size:13px}.driver-phone{overflow-wrap:anywhere}.window-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.window-times label,.history-controls label{min-width:0;max-width:100%}.window-times input{width:100%;min-width:0}.history-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.history-controls input{width:100%;min-width:0}.access-panel>label{display:flex;align-items:center;gap:10px}.access-panel>label:has(select){display:grid}.access-panel input[type=checkbox]{flex:0 0 20px;width:20px}
.chat-shell{border-radius:16px}.chat-toolbar{padding:14px;flex-wrap:wrap;gap:10px}.chat-toolbar label{min-width:0;flex:1}.chat-timeline{padding:16px 12px;min-height:260px}.chat-message{min-width:0;max-width:90%;overflow-wrap:anywhere}.chat-bubble{padding:12px 14px}.account-card{background:#fff;border-radius:16px}.login-wrap{min-height:0;padding:30px 0}.login-card{padding:24px;max-width:420px;box-shadow:0 8px 32px #24476308}
.modal-backdrop{padding:16px;overflow-y:auto;overscroll-behavior:contain}.modal-box{min-width:0;width:100%;max-width:480px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:22px;border-radius:20px;overflow-wrap:anywhere}.modal-actions{gap:10px}.modal-actions>*{min-width:0}.drink-line>div{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){
 #app{padding:16px max(12px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));max-width:480px}
 .topbar{grid-template-columns:minmax(0,1fr);padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));gap:12px}.brand{font-size:20px}.subtitle{font-size:11px}
 .top-actions{display:grid;grid-template-columns:auto minmax(0,1fr) auto;justify-content:stretch;align-items:center;width:100%;gap:8px}.language-switch{justify-self:start}.map-preference{display:block;width:100%}.map-preference select{width:100%;max-width:100%;font-size:16px}.top-actions>button{padding:9px 10px;font-size:12px;min-height:44px}
 .home-heading h1{font-size:21px}.management-menu>summary{font-size:13px;padding:10px 12px}.eyebrow{line-height:1.4}.tabs{margin:12px 0 16px}.driver-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.tab{font-size:12px;min-height:64px;padding:7px 3px}
 .order-card{padding:14px!important;border-radius:16px}.order-address{font-size:20px!important}.order-selector label{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr)}.order-selector select{max-width:100%}.order-alerts{gap:8px}.packing-reminder{display:flex;flex-direction:column;align-items:flex-start;min-height:92px;padding:10px}.packing-reminder .packing-icon{font-size:25px;line-height:1}.packing-reminder .packing-hint{line-height:1.35}
 .window-times{grid-template-columns:minmax(0,1fr)}.window-times input[type=datetime-local]{display:block;box-sizing:border-box;min-width:0;width:100%;max-width:100%}.schedule-row{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);padding:12px;gap:8px}.schedule-row input{width:100%;min-width:0;font-size:16px}.schedule-row .driver-select,.schedule-row button{grid-column:1/-1}
 .dispatch-mode-grid{grid-template-columns:minmax(0,1fr)}.dispatch-choice{padding:16px;min-height:0}.fold-body>div[style]{grid-template-columns:minmax(0,1fr)!important}.order-danger-zone{align-items:stretch}.order-danger-zone button{width:100%}.pickup-actions{grid-template-columns:minmax(0,1fr)}.modal-backdrop{align-items:flex-end;padding:12px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.modal-box{border-radius:22px;padding:20px;max-height:calc(100dvh - 32px)}.modal-actions{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* REV9: compact controls with larger, clearer labels. */
button{min-height:40px;padding:8px 12px;font-size:15px;font-weight:700;line-height:1.25}
.language-switch button{min-width:40px;min-height:36px;padding:5px 9px;font-size:15px}
.map-preference select{min-height:40px;font-size:15px;padding:6px 9px}
.management-menu>summary{min-height:40px;padding:8px 12px;font-size:15px}
.management-menu nav button{min-height:42px;padding:9px 10px;font-size:15px}
.tabs{padding:4px;gap:4px;margin:10px 0 14px}
.tab{min-height:46px;padding:5px 4px;font-size:15px;line-height:1.15;gap:2px}
.tab-count{min-width:20px;height:18px;font-size:12px;padding:0 5px}
.order-selector{padding:9px 10px}.order-selector label{font-size:15px}.order-selector select{min-height:40px}
.order-strip{padding:8px 1px;gap:6px}.order-chip{min-width:58px;min-height:38px;padding:6px 11px;font-size:15px}
.order-actions{gap:7px;margin-top:10px}.order-actions>*,.order-actions a{min-height:42px;padding:7px 9px;font-size:15px}
.pickup-actions{gap:7px}.pickup-actions button{min-height:42px;font-size:15px}
.alert-buttons button{min-height:40px;font-size:14px;padding:7px 8px}
.priority-button{min-height:40px;font-size:15px;margin:9px 0}
.driver-row button{min-height:40px;font-size:14px;padding:7px 9px}
.route-sequence li>button{min-height:40px;padding:7px 9px;font-size:14px}
.next-stop{padding:10px 12px;font-size:16px}.collapsed-order{padding:13px;font-size:15px}
.modal-actions button,.modal-actions a{min-height:44px;padding:9px 11px;font-size:16px}
@media(max-width:600px){
 .topbar{padding-bottom:10px;gap:9px}.top-actions{gap:6px}.top-actions>button{min-height:40px;padding:7px 8px;font-size:14px}
 .tabs{margin:9px 0 13px}.driver-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.tab{min-height:48px;padding:4px 2px;font-size:14px}
 .order-alerts{margin:10px 0}.packing-reminder{min-height:72px;padding:8px;font-size:13px}.packing-reminder .packing-icon{font-size:22px}.packing-reminder .packing-hint{font-size:11px!important}
 .order-card{padding:12px!important}.order-address{padding:12px!important}.assignment-panel{padding:11px}.route-panel{padding:11px}
 .modal-box{padding:17px}.modal-actions{gap:7px}
}

/* REV10: stacked delivery list and separate detail view. */
.order-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 1px 10px;color:#40586d}.order-list-heading strong{font-size:17px}.order-list-heading span{font-size:12px;color:#718292}
.order-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.order-summary{min-width:0;background:#fff;border:1px solid #d8e1e8;border-left:4px solid #6e92b0;border-radius:15px;box-shadow:0 3px 12px #29445b0b;overflow:hidden;color:#293b4c}
.order-summary.urgent-summary{border-color:#d69a67;border-left-color:#c36b32;box-shadow:0 3px 14px #a85b2420}
.summary-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 12px 7px;border-bottom:1px solid #edf1f4;background:#fbfcfd}
.summary-number{font-size:17px;color:#234762;white-space:nowrap}.pickup-summary{min-width:0;color:#7b5f31;font-size:12px;font-weight:700;text-align:right;overflow-wrap:anywhere}.pickup-summary.ready{color:#327052}.summary-top .status-badge{font-size:10px;padding:5px 7px;white-space:nowrap}
.summary-urgent{padding:6px 12px;background:#fff1e4;color:#9a4f1e;font-size:12px;font-weight:800;border-bottom:1px solid #f1d4bb}
.summary-content{display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:stretch;min-width:0}.summary-lines{min-width:0;padding:11px 12px;display:grid;gap:5px}.summary-name{font-size:17px;font-weight:800;color:#283d50}.summary-phone{font-size:15px;font-weight:650;color:#2a72ae;text-decoration:none;overflow-wrap:anywhere}.summary-address{font-size:14px;color:#435a6d;line-height:1.4;overflow-wrap:anywhere}
.summary-arrow{width:42px;min-width:42px;border:0;border-left:1px solid #edf1f4;border-radius:0;background:#fff;color:#426b8c;font-size:32px;font-weight:400;box-shadow:none;padding:0}.summary-arrow:active{background:#edf4f8;transform:none}
.summary-reminders{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.summary-reminder{min-height:30px;padding:4px 8px;border-radius:8px;box-shadow:none;font-size:12px;font-weight:800}.summary-reminder.drink{background:#e8f3fb;color:#276589;border:1px solid #9bc3dc}.summary-reminder.sushi{background:#f8ede1;color:#87562e;border:1px solid #d7b38e}
.summary-actions{display:grid;grid-template-columns:minmax(0,1fr);padding:0 12px 11px}.summary-accept{min-height:42px;font-size:16px;background:#287dd1!important;color:#fff!important;border-color:#287dd1!important}.summary-accepted{display:block;text-align:center;padding:8px 10px;border-radius:9px;background:#e7f2eb;color:#316b4b;font-weight:750}
.detail-back{width:auto;min-height:40px;margin:0 0 10px;padding:7px 12px;background:#edf2f6;color:#345b78;border:1px solid #d5e0e8;font-size:15px;box-shadow:none}.order-detail-view>.order-card{margin-top:0!important;border:1px solid #ccd9e3;box-shadow:0 5px 18px #29445b0e}.order-detail-view .order-number{font-size:22px!important}
body[data-kind="admin"] .order-summary{border-left-color:#597d9a}body[data-kind="admin"] .order-stack{gap:14px}body[data-kind="admin"] .summary-top{background:#f7fafc}
@media(max-width:600px){
 .order-list-heading{margin-top:2px}.order-list-heading strong{font-size:16px}.order-list-heading span{font-size:11px}
 .order-stack{gap:10px}.order-summary{border-radius:13px}.summary-top{grid-template-columns:auto minmax(0,1fr);gap:6px 8px;padding:9px 10px 6px}.summary-top .status-badge{grid-column:2;justify-self:end}.pickup-summary{font-size:11px}.summary-number{font-size:16px}.summary-content{grid-template-columns:minmax(0,1fr) 38px}.summary-lines{padding:9px 10px}.summary-name{font-size:16px}.summary-phone{font-size:15px}.summary-address{font-size:14px}.summary-arrow{width:38px;min-width:38px;font-size:29px}.summary-actions{padding:0 10px 9px}.summary-reminder{font-size:11px}
}

/* REV11: larger, readable phone typography without widening the layout. */
html,body{font-size:17px;line-height:1.58}
button,.navigation,.next-stop{font-size:16px}
.small,.muted,.sound-status,.account-detail,.item-extra,.driver-phone{font-size:14px}
.brand{font-size:23px}.subtitle{font-size:14px}.home-heading h1,.subpage-header h1{font-size:27px}
.language-switch button{font-size:17px}.map-preference select{font-size:16px}.management-menu>summary{font-size:16px}.management-menu nav button{font-size:16px}.management-menu nav span{font-size:14px}
.tab{font-size:16px}.tab-count{font-size:13px}.status-badge{font-size:13px}.order-time{font-size:14px}.customer-name{font-size:17px}
.order-list-heading strong{font-size:19px}.order-list-heading span{font-size:14px}.summary-number{font-size:20px}.pickup-summary{font-size:14px}.summary-top .status-badge{font-size:12px}
.summary-urgent{font-size:14px}.summary-name{font-size:20px}.summary-phone{font-size:18px}.summary-address{font-size:17px;line-height:1.5}.summary-reminder{font-size:14px;min-height:38px}.summary-accept{font-size:18px;min-height:48px}.summary-accepted{font-size:16px}
.item-name{font-size:17px}.item-extra{font-size:15px}.info-value{font-size:16px}.pickup-info{font-size:16px}.route-explanation{font-size:15px}.route-sequence small{font-size:14px}
.alert-buttons button{font-size:15px}.call-alert-title{font-size:20px}.call-alert-message{font-size:18px}.chat-meta{font-size:14px}.chat-message time,.chat-receipt{font-size:13px}
.packing-reminder{font-size:15px}.packing-reminder .packing-hint{font-size:13px!important}.detail-back{font-size:16px}
@media(max-width:600px){
 html,body{font-size:17px}.brand{font-size:22px}.subtitle{font-size:14px}.home-heading h1,.subpage-header h1{font-size:24px}.top-actions>button{font-size:15px}
 .tab{font-size:16px;min-height:52px}.order-list-heading strong{font-size:18px}.order-list-heading span{font-size:13px}
 .summary-top{padding:11px 12px 8px}.summary-number{font-size:19px}.pickup-summary{font-size:14px}.summary-top .status-badge{font-size:12px}
 .summary-content{grid-template-columns:minmax(0,1fr) 44px}.summary-lines{padding:12px;gap:7px}.summary-name{font-size:20px}.summary-phone{font-size:18px}.summary-address{font-size:17px}.summary-arrow{width:44px;min-width:44px;font-size:32px}
 .summary-reminder{font-size:14px;min-height:40px}.summary-accept{font-size:18px;min-height:50px}.order-actions>*,.order-actions a{font-size:16px}.alert-buttons button{font-size:15px}.packing-reminder{font-size:15px}
}

/* REV13: three real route modes, stronger cards, larger controls. */
html,body{font-size:18px}
.order-summary{background:#fdfefe;border-color:#b8c8d4;border-left-width:5px;box-shadow:0 5px 16px rgba(42,67,88,.12);cursor:pointer}
.order-summary:hover{border-color:#91aabd}.order-summary.urgent-summary{border-width:2px;border-left-width:6px}
.summary-top{background:#f3f7fa;border-bottom-color:#d7e1e8}.summary-number{font-size:22px}.pickup-summary{font-size:15px}.summary-top .status-badge{font-size:13px}
.summary-name{font-size:22px}.summary-phone{font-size:20px}.summary-address{font-size:19px;color:#304d63}.summary-reminder{font-size:15px}
.summary-delivery-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}.summary-delivery-actions>*{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;border-radius:11px;font-size:17px;font-weight:800;text-decoration:none;padding:9px}.summary-navigation{background:#dcebf6!important;color:#255a7d!important;border:1px solid #9dbed5!important}.summary-complete{background:#e3efe7!important;color:#285d40!important;border:1px solid #a9cdb7!important}
.route-panel-top{position:relative;margin:0 0 14px;border:2px solid #b9cad6;background:#f4f8fa;box-shadow:0 4px 14px rgba(42,67,88,.08)}
.route-panel-top .section-title{font-size:20px}.route-sort-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}.route-sort-buttons button{min-height:58px;background:#e3ebf1;color:#36556d;border:1px solid #c2d1dc;font-size:16px}.route-sort-buttons button.active{background:#376b91;color:#fff;border-color:#376b91;box-shadow:0 3px 9px rgba(42,81,111,.22)}
.route-explanation{font-size:16px}.route-sequence summary{font-size:17px}.route-sequence li>button:first-child{font-size:16px}
.detail-back{width:100%;min-height:54px;padding:12px 16px;margin-bottom:14px;background:#376b91!important;color:#fff!important;border:2px solid #285572!important;font-size:19px;font-weight:850;box-shadow:0 3px 10px rgba(37,78,108,.2)!important}
.order-detail-view>.order-card{border:2px solid #b7c8d4;box-shadow:0 6px 20px rgba(42,67,88,.12)}
.driver-call-history>summary{font-size:19px;min-height:54px;display:flex;align-items:center}.call-history-row{font-size:17px}
@media(max-width:600px){
 html,body{font-size:18px}.brand{font-size:24px}.subtitle{font-size:15px}.tab{font-size:17px}.order-list-heading strong{font-size:20px}.order-list-heading span{font-size:14px}
 .summary-number{font-size:21px}.pickup-summary{font-size:15px}.summary-name{font-size:22px}.summary-phone{font-size:20px}.summary-address{font-size:19px}.summary-reminder{font-size:15px}.summary-actions{padding:0 12px 12px}
 .route-panel-top{padding:13px}.route-sort-buttons{grid-template-columns:minmax(0,1fr);gap:7px}.route-sort-buttons button{min-height:50px;font-size:17px}.route-panel-top .section-title{font-size:20px}.route-explanation{font-size:16px}
 .summary-delivery-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.summary-delivery-actions>*{font-size:17px;min-height:54px;padding:8px 5px}
}

/* Keep the four Driver tab labels on one line at phone widths. */
.driver-tabs .tab{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
@media(max-width:600px){.driver-tabs .tab{font-size:clamp(13px,3.6vw,15px);letter-spacing:-.2px;padding-left:1px;padding-right:1px}.driver-tabs .tab-count{font-size:12px}}

/* REV16: three energetic themes selected for Admin and Driver. */
:root,
html[data-theme="royal"]{
 --theme-page:#2d67b7;--theme-surface:#fffaf0;--theme-soft:#d7e8ff;--theme-soft-2:#c5ddfa;
 --theme-card:#cfe6ff;--theme-card-alt:#e7f1ff;--theme-line:#154f96;--theme-line-strong:#073b7b;
 --theme-accent:#f2b632;--theme-accent-dark:#704900;--theme-button:#f2b632;--theme-button-text:#17324e;
 --theme-ink:#18324c;--theme-muted:#4f6780;--theme-shadow:rgba(4,40,86,.28);--theme-top:#0a4692;--theme-top-text:#fff7db;
}
html[data-theme="teal"]{
 --theme-page:#16a49b;--theme-surface:#fff9eb;--theme-soft:#c9f1ed;--theme-soft-2:#ade5df;
 --theme-card:#c8f5f1;--theme-card-alt:#ffe1d8;--theme-line:#087578;--theme-line-strong:#03575b;
 --theme-accent:#ff5a55;--theme-accent-dark:#9b2727;--theme-button:#ff5a55;--theme-button-text:#fff;
 --theme-ink:#123e45;--theme-muted:#4c7174;--theme-shadow:rgba(3,75,78,.26);--theme-top:#087176;--theme-top-text:#fff8e9;
}
html[data-theme="slate"]{--theme-page:#eef2f5;--theme-surface:#fff;--theme-soft:#dfe8ed;--theme-soft-2:#d4e0e6;--theme-card:#fafcfd;--theme-card-alt:#f4f8fa;--theme-line:#9cb2be;--theme-line-strong:#668596;--theme-accent:#df8b6d;--theme-accent-dark:#8f4933;--theme-button:#df8b6d;--theme-button-text:#fff;--theme-ink:#283e4a;--theme-muted:#6e7f88;--theme-shadow:rgba(52,75,88,.19);--theme-top:#506b7c;--theme-top-text:#fff}
html[data-theme="olive"]{--theme-page:#f1f2ea;--theme-surface:#fffdf8;--theme-soft:#e5e8d9;--theme-soft-2:#dce1ce;--theme-card:#fcfcf7;--theme-card-alt:#f5f7ee;--theme-line:#aeb69d;--theme-line-strong:#7c8969;--theme-accent:#c97858;--theme-accent-dark:#82452f;--theme-button:#c97858;--theme-button-text:#fff;--theme-ink:#38412f;--theme-muted:#777e6c;--theme-shadow:rgba(75,85,61,.18);--theme-top:#667157;--theme-top-text:#fff}
html[data-theme="aqua"]{--theme-page:#edf4f3;--theme-surface:#fff;--theme-soft:#ddebe9;--theme-soft-2:#d1e4e1;--theme-card:#f8fcfb;--theme-card-alt:#f0f8f7;--theme-line:#91b8b5;--theme-line-strong:#5b9090;--theme-accent:#d1a13e;--theme-accent-dark:#78590f;--theme-button:#d1a13e;--theme-button-text:#fff;--theme-ink:#234849;--theme-muted:#688180;--theme-shadow:rgba(47,86,86,.18);--theme-top:#447677;--theme-top-text:#fff}
html[data-theme="lavender"]{--theme-page:#f3f0f5;--theme-surface:#fff;--theme-soft:#e7e1ec;--theme-soft-2:#ddd6e5;--theme-card:#fcfafd;--theme-card-alt:#f7f2f8;--theme-line:#ada2bc;--theme-line-strong:#817994;--theme-accent:#c87880;--theme-accent-dark:#7f3f48;--theme-button:#c87880;--theme-button-text:#fff;--theme-ink:#40394f;--theme-muted:#777081;--theme-shadow:rgba(75,66,90,.18);--theme-top:#69617e;--theme-top-text:#fff}
html,body{background:var(--theme-page);color:var(--theme-ink)}
.topbar{background:var(--theme-top);border-bottom-color:var(--theme-line)}
.topbar .brand,.topbar .subtitle{color:var(--theme-top-text)}
.brand,.home-heading h1,.subpage-header h1,.order-number,.summary-number,.summary-name,.section-title{color:var(--theme-ink)}
.subtitle,.muted,.sound-status,.account-detail,.driver-phone,.order-list-heading span{color:var(--theme-muted)}
.login-card,.order-card,.account-card,.sound-panel,.modal-box,details.fold,section.fold,.driver-row,.schedule-row,.info-box,.order-items,.chat-shell{background:var(--theme-surface);border-color:var(--theme-line);box-shadow:0 5px 18px var(--theme-shadow)}
.order-summary{background:var(--theme-card);border:3px solid var(--theme-line-strong);border-left-width:7px;box-shadow:0 6px 18px var(--theme-shadow)}
.order-summary.status-card-DELIVERING{background:var(--theme-card-alt)}
.order-card{background:var(--theme-card);border:3px solid var(--theme-line-strong)!important}
.order-summary:hover{border-color:var(--theme-accent)}
.summary-top,.tabs,.order-selector,.route-panel,.route-panel-top,.assignment-panel,.pickup-info,.alert-setup,.chat-toolbar{background:var(--theme-soft);border-color:var(--theme-line)}
.summary-top,.summary-arrow,.chat-toolbar{border-color:var(--theme-line)}
.summary-arrow{background:var(--theme-surface);color:var(--theme-accent)}
.summary-arrow:active{background:var(--theme-soft-2)}
.tab{color:var(--theme-muted)}.tab.active{background:var(--theme-surface);color:var(--theme-accent-dark);border-color:var(--theme-line-strong)}
.tab-count,.status-badge,.status-NEW,.status-SENT,.status-VIEWED{background:var(--theme-soft-2);color:var(--theme-accent-dark)}
.route-sort-buttons button,.secondary,button.secondary,.management-menu>summary{background:var(--theme-soft-2);color:var(--theme-accent-dark);border-color:var(--theme-line)}
.route-sort-buttons button.active,.detail-back{background:var(--theme-button)!important;border-color:var(--theme-line-strong)!important;color:var(--theme-button-text)!important}
.claim-order,.summary-navigation,.assignment-row button,.chat-toolbar button{background:var(--theme-button)!important;color:var(--theme-button-text)!important;border:2px solid var(--theme-line-strong)!important}
.order-address{background:var(--theme-soft-2);border-color:var(--theme-line-strong);border-left-color:var(--theme-accent);color:var(--theme-accent-dark)}
.management-menu nav{background:var(--theme-surface);border-color:var(--theme-line)}.management-menu nav button{background:var(--theme-surface);color:var(--theme-ink)}.management-menu nav button:hover{background:var(--theme-soft)}
.chat-timeline{background:var(--theme-soft)}.chat-bubble{background:var(--theme-soft-2);color:var(--theme-ink)}.incoming .chat-bubble{background:var(--theme-surface);border-color:var(--theme-line)}
.language-switch{background:var(--theme-soft-2);border-color:var(--theme-line)}.language-switch button{color:var(--theme-muted)}.language-switch button.selected{background:var(--theme-surface);color:var(--theme-accent-dark)}
.map-preference select,input,select,textarea{background:var(--theme-surface);border-color:var(--theme-line);color:var(--theme-ink)}
.empty,.loading{margin:12px 0;background:var(--theme-surface);border:2px solid var(--theme-line);border-radius:18px;box-shadow:0 5px 16px var(--theme-shadow);color:var(--theme-ink)}
.order-list-heading{color:var(--theme-top-text)}.order-list-heading span{color:var(--theme-top-text);opacity:.88}
.summary-travel,.order-travel{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.72);border:1px solid var(--theme-line);color:var(--theme-accent-dark);font-weight:850;font-size:16px;line-height:1.35}
.summary-travel.pending,.order-travel.pending{font-weight:650;color:var(--theme-muted)}
.order-travel{margin:8px 0 14px;font-size:18px}
.theme-switch{display:flex;align-items:center;gap:5px;padding:4px 6px;background:var(--theme-soft);border:1px solid var(--theme-line);border-radius:12px;min-height:44px}
.theme-switch button{position:relative;width:34px;min-width:34px;height:34px;min-height:34px;padding:0;border:2px solid rgba(255,255,255,.92);border-radius:10px;box-shadow:0 0 0 1px rgba(42,61,77,.18),0 2px 5px rgba(42,61,77,.12);font-size:0}
.theme-switch button[data-theme-choice="royal"]{background:linear-gradient(135deg,#1553a0 0 55%,#f2b632 56%)}.theme-switch button[data-theme-choice="teal"]{background:linear-gradient(135deg,#0b8f89 0 55%,#ff5a55 56%)}.theme-switch button[data-theme-choice="slate"]{background:linear-gradient(135deg,#506b7c 0 55%,#df8b6d 56%)}.theme-switch button[data-theme-choice="olive"]{background:linear-gradient(135deg,#667157 0 55%,#c97858 56%)}.theme-switch button[data-theme-choice="aqua"]{background:linear-gradient(135deg,#447677 0 55%,#d1a13e 56%)}.theme-switch button[data-theme-choice="lavender"]{background:linear-gradient(135deg,#69617e 0 55%,#c87880 56%)}
.theme-switch button.selected{box-shadow:0 0 0 3px var(--theme-accent-dark),0 3px 7px rgba(42,61,77,.18);transform:translateY(-1px)}
.theme-switch button::after{content:"";position:absolute;inset:9px;border-radius:50%;background:rgba(255,255,255,.72)}
@media(max-width:600px){
 .top-actions{grid-template-columns:auto minmax(0,1fr) auto}
 .theme-switch{grid-column:1/-1;width:100%;justify-content:center;gap:18px;min-height:48px}
 .theme-switch button{width:38px;min-width:38px;height:38px;min-height:38px;border-radius:11px}
}

/* REV17 compact header and centralized settings. */
.topbar{align-items:start}.top-actions{align-items:start;flex-wrap:nowrap}.app-settings-menu{position:relative;z-index:200}.app-settings-menu>summary{list-style:none;cursor:pointer;white-space:nowrap;min-height:44px;display:flex;align-items:center;padding:8px 13px;border:2px solid var(--theme-line);border-radius:12px;background:var(--theme-button);color:var(--theme-button-text);font-weight:850}.app-settings-menu>summary::-webkit-details-marker{display:none}.app-settings-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(360px,calc(100vw - 24px));padding:14px;background:var(--theme-surface);border:3px solid var(--theme-line-strong);border-radius:18px;box-shadow:0 18px 50px var(--theme-shadow);display:grid;gap:12px}.settings-section{display:grid!important;gap:8px;padding:11px;background:var(--theme-soft);border:1px solid var(--theme-line);border-radius:12px;color:var(--theme-ink)}.settings-section strong{font-size:15px}.settings-buttons button,.settings-nav button,#logout-button{width:100%;text-align:left}.settings-nav button{background:var(--theme-surface);color:var(--theme-ink);border:1px solid var(--theme-line)}body[data-kind="driver"] .admin-settings-only{display:none!important}body[data-kind="admin"] .driver-settings-only{display:none!important}.app-settings-panel .theme-switch{width:100%;justify-content:center}.app-settings-panel .map-preference select{width:100%;max-width:none}.top-actions>.language-switch{margin-top:1px}
.summary-order-band{display:flex;align-items:stretch;gap:8px;min-width:0}.summary-number{display:flex;align-items:center;padding:8px 12px;border-radius:10px;background:var(--theme-surface);border:2px solid var(--theme-line-strong);font-size:28px!important;line-height:1}.summary-order-band .summary-reminders{display:flex;gap:7px;flex-wrap:wrap;margin:0}.summary-order-band .summary-reminder{min-height:44px;padding:7px 10px;border-width:2px;font-size:14px}.summary-content{grid-template-columns:1fr!important}.summary-arrow{display:none!important}.order-detail-view>.order-card{background:var(--theme-surface)!important;border-color:var(--theme-accent)!important;box-shadow:0 8px 28px var(--theme-shadow)!important}.summary-priority{margin:0;min-height:44px;padding:7px 10px;background:#ffdf9d!important;color:#7a3200!important;border:2px solid #b75a13!important;font-size:14px}.summary-priority.is-urgent{background:#ef5b45!important;color:#fff!important;border-color:#8e1f14!important}.route-panel-top>summary{cursor:pointer;list-style:none;font-size:21px;font-weight:900;padding:4px 0}.route-panel-top>summary::-webkit-details-marker{display:none}.route-panel-body{padding-top:10px}.global-pickup-setting{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px;align-items:end;padding:18px;margin:0 0 20px;background:var(--theme-soft);border:2px solid var(--theme-line);border-radius:16px}.global-pickup-setting label{display:grid;gap:7px;font-weight:800}.global-pickup-setting input{font-size:20px;font-weight:850}.global-pickup-note{grid-column:1/-1}.order-head .priority-button{margin:0 0 0 auto}.order-head>div:first-child{min-width:0}.driver-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:600px){.topbar{grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;flex-wrap:nowrap!important}.top-actions{width:auto!important;display:flex!important;justify-content:flex-end!important;gap:7px!important}.top-actions>.language-switch{position:absolute;right:132px;top:max(14px,env(safe-area-inset-top))}.app-settings-menu{margin-top:0}.app-settings-menu>summary{font-size:14px;padding:7px 9px}.brand{padding-right:172px;font-size:22px!important}.subtitle{padding-right:150px}.app-settings-panel{position:fixed;right:10px;top:78px;max-height:calc(100vh - 92px);overflow:auto}.summary-top{display:grid!important;grid-template-columns:1fr!important}.summary-order-band{display:grid;grid-template-columns:auto minmax(0,1fr)}.summary-number{font-size:27px!important}.summary-order-band .summary-reminders{display:grid;grid-template-columns:1fr}.summary-top>.pickup-summary,.summary-top>.status-badge{justify-self:start!important;grid-column:auto!important}.global-pickup-setting{grid-template-columns:1fr}.global-pickup-note{grid-column:auto}.driver-tabs .tab{font-size:var(--user-font-size,20px)!important}}


/* REV18 compact driver header. */
.settings-symbol{display:inline-flex}.settings-label{display:inline-flex}
@media(max-width:600px){
 body[data-kind="driver"] .topbar{min-height:56px!important;padding:max(8px,env(safe-area-inset-top)) 10px 8px!important;gap:8px!important;align-items:center!important}
 body[data-kind="driver"] .topbar>div:first-child{min-width:0;display:block}
 body[data-kind="driver"] .brand{padding-right:0!important;font-size:18px!important;line-height:1.1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body[data-kind="driver"] .subtitle{display:none!important}
 body[data-kind="driver"] .top-actions{position:static;width:auto!important;display:flex!important;align-items:center!important;gap:6px!important}
 body[data-kind="driver"] .top-actions>.language-switch{position:static!important;margin:0!important;padding:2px!important;border-radius:10px!important}
 body[data-kind="driver"] .language-switch button{min-width:34px!important;min-height:36px!important;padding:5px 7px!important;font-size:14px!important}
 body[data-kind="driver"] .app-settings-menu{margin:0!important}
 body[data-kind="driver"] .app-settings-menu>summary{width:40px;min-width:40px;min-height:40px!important;justify-content:center;padding:5px!important;font-size:18px!important}
 body[data-kind="driver"] .app-settings-menu>summary .settings-label{display:none!important}
 body[data-kind="driver"] .app-settings-menu>summary .settings-symbol{font-size:20px;line-height:1}
 body[data-kind="driver"] .app-settings-panel{top:62px!important}
}


.summary-alert-stack{display:grid;gap:7px;min-width:0;flex:1}
.summary-customer-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 8px;align-items:start;padding:9px 11px;border:2px solid #cf9a3b;border-radius:11px;background:#fff3cf;color:#57370b;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.summary-customer-note strong{white-space:nowrap}.summary-customer-note span{grid-column:1/-1;font-weight:750}
@media(max-width:600px){.summary-alert-stack{width:100%}.summary-customer-note{font-size:15px;padding:9px 10px}}


/* REV19 per-device appearance controls. */
.appearance-controls{gap:12px!important}.appearance-controls label{display:grid;gap:6px;font-weight:800}.font-size-control{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:10px;align-items:center}.font-size-control input{width:100%;accent-color:var(--theme-accent)}.font-size-value{display:flex;align-items:center;justify-content:center;min-height:38px;border:2px solid var(--theme-line);border-radius:10px;background:var(--theme-surface);font-weight:900}.font-color-control{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:10px;align-items:center}.font-color-control input[type="color"]{width:58px;height:42px;padding:3px;border-radius:10px}.font-color-reset{min-height:40px!important;text-align:center!important}
html,body{font-size:var(--user-font-size,18px)!important}
body button,body input,body select,body textarea,body .navigation,body .next-stop{font-size:calc(var(--user-font-size,18px) - 1px)!important}
body .small,body .muted,body .sound-status,body .account-detail,body .item-extra,body .driver-phone{font-size:calc(var(--user-font-size,18px) - 3px)!important}
body .summary-name,body .customer-name{font-size:calc(var(--user-font-size,18px) + 2px)!important}
body .summary-phone,body .summary-address{font-size:var(--user-font-size,18px)!important}
body .driver-tabs .tab{font-size:var(--user-font-size,18px)!important}
@media(max-width:600px){body[data-kind="driver"] .brand{font-size:calc(var(--user-font-size,20px) + 1px)!important}.theme-switch{gap:10px!important;flex-wrap:wrap}.theme-switch button{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important}}


.summary-actions.has-details{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.summary-details{min-height:48px;background:var(--theme-surface)!important;color:var(--theme-ink)!important;border:2px solid var(--theme-line-strong)!important;box-shadow:0 5px 9px var(--theme-shadow)!important;font-weight:850}
.new-order-summary .summary-address{font-size:calc(var(--user-font-size,20px) + 1px)!important;font-weight:900}
.summary-driver{margin-top:8px;padding:8px 11px;border:2px solid var(--theme-line);border-radius:10px;background:var(--theme-soft);font-weight:900;color:var(--theme-ink)}
.location-status{padding:8px 10px;border:1px solid var(--theme-line);border-radius:10px;background:var(--theme-surface);font-weight:750}.location-status.ready{border-color:#2e8b62;color:#176343}.location-status.error{border-color:#c46b62;color:#9a3028}
@media(max-width:390px){.summary-actions.has-details{gap:8px}.summary-actions.has-details>*{padding-left:5px!important;padding-right:5px!important;font-size:clamp(13px,3.7vw,16px)!important}}

/* REV21: Driver can switch the four section buttons between one or two rows. */
.tab-layout-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tab-layout-choice button{min-width:0;text-align:center!important;background:var(--theme-surface);color:var(--theme-ink);border:2px solid var(--theme-line)}.tab-layout-choice button.selected{background:var(--theme-button);color:var(--theme-button-text);border-color:var(--theme-line-strong);box-shadow:0 3px 7px var(--theme-shadow)}
html[data-tab-rows="two"] body[data-kind="driver"] .driver-tabs,html[data-tab-rows="two"] body[data-kind="admin"] .admin-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:7px!important}
html[data-tab-rows="two"] body[data-kind="driver"] .driver-tabs .tab,html[data-tab-rows="two"] body[data-kind="admin"] .admin-tabs .tab{min-height:62px!important;padding:8px 10px!important;white-space:normal!important;letter-spacing:0!important;line-height:1.2!important}
html[data-tab-rows="two"] body[data-kind="driver"] .driver-tabs .tab-count,html[data-tab-rows="two"] body[data-kind="admin"] .admin-tabs .tab-count{min-width:28px;height:24px;font-size:14px!important}
html[data-tab-rows="two"] body[data-kind="admin"] .admin-tabs .tab:last-child:nth-child(odd){grid-column:1/-1}
html[data-tab-rows="one"] body[data-kind="driver"] .driver-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;padding:5px!important}
html[data-tab-rows="one"] body[data-kind="admin"] .admin-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;padding:5px!important}
html[data-tab-rows="one"] body[data-kind="admin"] .admin-tabs .tab{grid-column:auto!important}
html[data-tab-rows="one"] body[data-kind="driver"] .driver-tabs .tab,html[data-tab-rows="one"] body[data-kind="admin"] .admin-tabs .tab{min-height:64px!important;padding:6px 2px!important;white-space:nowrap!important;font-size:var(--user-font-size,18px)!important;letter-spacing:-.15px!important}
@media(max-width:600px){html[data-tab-rows="two"] body[data-kind="driver"] .driver-tabs .tab,html[data-tab-rows="two"] body[data-kind="admin"] .admin-tabs .tab{min-height:66px!important;font-size:var(--user-font-size,20px)!important}}


.presence-dashboard{max-width:1180px;margin:18px auto 28px;padding:0 2px}.presence-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:22px 24px;border:1px solid var(--border);border-radius:20px;background:var(--panel);box-shadow:var(--shadow)}.presence-toolbar h2{margin:2px 0 4px;font-size:1.55em}.presence-toolbar p{margin:0}.presence-eyebrow{font-size:.72em!important;font-weight:800;letter-spacing:.14em;color:var(--muted)}.presence-refresh,.presence-map-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;padding:10px 15px;font-weight:800;text-decoration:none;white-space:nowrap}.presence-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}.presence-summary>div{padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--panel2)}.presence-summary span{display:block;font-size:.82em;color:var(--muted);margin-bottom:5px}.presence-summary strong{font-size:1.28em}.presence-location-note{margin:12px 0;padding:13px 16px;border:1px solid var(--border);border-radius:14px;background:var(--panel2);font-weight:650}.presence-card-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px}.presence-driver-card{overflow:hidden;border:1px solid var(--border);border-radius:19px;background:var(--panel);box-shadow:var(--shadow)}.presence-driver-card.is-online{border-top:4px solid var(--green)}.presence-driver-card.is-offline{border-top:4px solid #718096}.presence-card-head{display:flex;align-items:center;gap:12px;padding:17px 18px 14px;border-bottom:1px solid var(--border)}.presence-avatar{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--panel3);font-size:1.2em;font-weight:850;flex:0 0 auto}.presence-identity{min-width:0;flex:1}.presence-identity h3{margin:0;font-size:1.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.presence-user{margin-top:2px;font-size:.78em;color:var(--muted)}.presence-status{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;font-size:.78em;font-weight:800}.presence-status i{width:8px;height:8px;border-radius:50%}.presence-status.online{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 11px;border:1px solid rgba(255,199,59,.72);border-radius:999px;background:linear-gradient(180deg,rgba(70,47,4,.58),rgba(36,25,3,.72));color:#ffd451;box-shadow:inset 0 0 14px rgba(255,188,31,.08),0 0 12px rgba(255,183,0,.12);font-size:.92em;font-weight:900}.presence-status.online .presence-crown{display:inline-flex;align-items:center;justify-content:center;color:#ffd34d;font-size:1.42em;line-height:1;filter:drop-shadow(0 0 5px rgba(255,190,25,.42))}.presence-status.online .presence-online-text{color:#ffd451;font-size:1.08em;font-weight:900;letter-spacing:.08em;text-shadow:0 0 7px rgba(255,190,25,.22)}.presence-status.offline{background:rgba(159,176,199,.10);color:var(--muted)}.presence-status.offline i{background:var(--muted)}.presence-grid{display:grid;grid-template-columns:1fr 1fr;padding:4px 18px 12px}.presence-field{padding:12px 8px 9px 0;border-bottom:1px solid var(--border);min-width:0}.presence-field:nth-child(even){padding-left:12px}.presence-field span{display:block;font-size:.72em;color:var(--muted);margin-bottom:4px}.presence-field strong{display:block;font-size:.9em;overflow-wrap:anywhere}.presence-route{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px 18px}.presence-route>div:first-child{min-width:0}.presence-route span{font-size:.75em;color:var(--muted)}.presence-distance{margin-top:4px;font-size:1.04em}.presence-distance strong{font-size:1.08em}.presence-muted{font-size:.88em!important;color:var(--muted)!important}.presence-map-btn{background:var(--blue);color:#07111e}.presence-map-btn.disabled{opacity:.45}.presence-empty{grid-column:1/-1;padding:34px;text-align:center;border:1px dashed var(--border);border-radius:18px;color:var(--muted)}@media(max-width:760px){.presence-toolbar{align-items:stretch;flex-direction:column}.presence-refresh{width:100%}.presence-summary{grid-template-columns:1fr 1fr}.presence-card-list{grid-template-columns:1fr}.presence-route{align-items:stretch;flex-direction:column}.presence-map-btn{width:100%}}@media(max-width:430px){.presence-grid{grid-template-columns:1fr}.presence-field:nth-child(even){padding-left:0}}

/* REV40: isolated settings overlay + fixed gold detail back.
   No html/body/#app sizing or overflow changes. */
.app-settings-menu[open] .app-settings-panel{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:76px!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  width:min(760px,calc(100vw - 24px))!important;
  max-width:760px!important;
  height:auto!important;
  max-height:calc(100dvh - 92px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  padding:14px 14px 24px!important;
}
.app-settings-menu[open] .app-settings-panel>.admin-settings-only.settings-nav,
.app-settings-menu[open] .app-settings-panel>#logout-button{
  grid-column:1/-1!important;
}
.order-detail-view .detail-back{
  position:fixed!important;
  left:14px!important;
  bottom:max(16px,env(safe-area-inset-bottom))!important;
  top:auto!important;
  z-index:190!important;
  width:auto!important;
  min-width:142px!important;
  min-height:48px!important;
  margin:0!important;
  padding:10px 16px!important;
  border:1px solid #d8a83d!important;
  border-radius:14px!important;
  background:rgba(63,45,12,.90)!important;
  color:#ffd86b!important;
  font-size:15px!important;
  font-weight:900!important;
  box-shadow:inset 0 1px 0 rgba(255,235,169,.22),0 5px 14px rgba(0,0,0,.20)!important;
}
@media(max-width:780px){
  .app-settings-menu[open] .app-settings-panel{
    top:64px!important;
    width:calc(100vw - 16px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 76px)!important;
    grid-template-columns:1fr!important;
    padding:12px 12px 28px!important;
  }
  .app-settings-menu[open] .app-settings-panel>.admin-settings-only.settings-nav,
  .app-settings-menu[open] .app-settings-panel>#logout-button{
    grid-column:auto!important;
  }
}

/* REV41: ADMIN settings uses a true full-screen scrollable sheet.
   Driver layout/settings remain REV40 unchanged. */
body[data-kind="admin"] .app-settings-menu[open] .app-settings-panel{
  position:fixed!important;
  inset:58px 0 0 0!important;
  left:0!important;
  right:0!important;
  top:58px!important;
  bottom:0!important;
  transform:none!important;
  width:100vw!important;
  max-width:none!important;
  height:calc(100dvh - 58px)!important;
  max-height:none!important;
  margin:0!important;
  padding:18px 18px max(34px,env(safe-area-inset-bottom))!important;
  border-radius:18px 18px 0 0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior-y:contain!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:start!important;
}
body[data-kind="admin"] .app-settings-menu[open] .app-settings-panel>.admin-settings-only.settings-nav,
body[data-kind="admin"] .app-settings-menu[open] .app-settings-panel>#logout-button{
  grid-column:1/-1!important;
}
@media(max-width:780px){
  body[data-kind="admin"] .app-settings-menu[open] .app-settings-panel{
    inset:54px 0 0 0!important;
    left:0!important;
    right:0!important;
    top:54px!important;
    bottom:0!important;
    width:100vw!important;
    height:calc(100dvh - 54px)!important;
    max-height:none!important;
    transform:none!important;
    grid-template-columns:1fr!important;
    padding:14px 12px max(32px,env(safe-area-inset-bottom))!important;
  }
  body[data-kind="admin"] .app-settings-menu[open] .app-settings-panel>.admin-settings-only.settings-nav,
  body[data-kind="admin"] .app-settings-menu[open] .app-settings-panel>#logout-button{
    grid-column:auto!important;
  }
}