body:not(.customer-auth-resolved) #authScreen,
body:not(.customer-auth-resolved) #appScreen { display: none !important; }
html.customer-session-cached body:not(.customer-auth-resolved) #authScreen { display: none !important; }
html.customer-session-cached body:not(.customer-auth-resolved) #appScreen { display: block !important; }
html.customer-session-cached body[data-customer-page]:not([data-customer-page="home"]) #appScreen .hero,
html.customer-session-cached body[data-customer-page]:not([data-customer-page="home"]) #appScreen .cta-grid { display: none !important; }
html.customer-session-cached body[data-customer-page="new-order"] #newOrderPanel,
html.customer-session-cached body[data-customer-page="progress"] #progressPanel,
html.customer-session-cached body[data-customer-page="support"] #supportPanel { display: block !important; }
.customer-page-hidden { display: none !important; }
#appScreen.customer-subpage .app-shell { padding-top: 18px; }
#appScreen.customer-subpage #inlinePageHost { margin-top: 0; }

/* Customer sign-up phone verification */
#authScreen .customer-phone-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}
#authScreen .customer-phone-row .secondary,
#authScreen .customer-verification-row .secondary {
  min-width: 92px;
  border-color: #5c91d4;
  color: #164b8b;
  background: #edf5ff;
}
#authScreen .customer-verification-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 7px;
}
#authScreen .customer-verification-row.hidden { display: none; }
#authScreen .customer-verification-row > span {
  position: absolute;
  right: 105px;
  bottom: 15px;
  color: #f87171;
  font-size: 10px;
  font-weight: 900;
}
#authScreen .customer-verified-message {
  padding: 9px 11px;
  border: 1px solid rgba(52, 211, 153, .45);
  border-radius: 10px;
  color: #86efac;
  background: rgba(6, 78, 59, .3);
  font-size: 11px;
  font-weight: 900;
}
#authScreen .customer-verified-message.hidden { display: none; }
#authScreen .customer-verification-status {
  min-height: 0;
  color: #fca5a5;
  font-size: 10px;
  font-weight: 800;
}
@media (max-width: 380px) {
  #authScreen .customer-phone-row { grid-template-columns: 1fr; }
  #authScreen .customer-phone-row .secondary { width: 100%; }
}

/* Active delivery route timeline */
#progressPanel .order-route-timeline {
  display: grid;
  margin: 0 0 10px;
}
#progressPanel .order-route-point {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  min-height: 49px;
}
#progressPanel .order-route-point:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  bottom: -5px;
  left: 11px;
  border-left: 2px dotted #ff5a22;
}
#progressPanel .route-point-marker {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin: 1px 0 0 4px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #f15a24;
  box-shadow: 0 0 0 1px rgba(241, 90, 36, .12);
}
#progressPanel .order-route-point.waypoint .route-point-marker {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  margin-left: 5px;
  background: #ff8a3d;
}
#progressPanel .route-point-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-bottom: 8px;
}
#progressPanel .route-point-copy b {
  color: #172033;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}
#progressPanel .route-point-copy span {
  color: #5c6b7d;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#progressPanel .order-route-point:last-child {
  min-height: 38px;
}

@media (max-width: 640px) {
  #progressPanel .order-route-point { min-height: 46px; }
  #progressPanel .route-point-copy span { font-size: 12px; }
}

/* Professional delivery request workspace */
body[data-customer-page="new-order"] #appScreen.app-screen {
  background: #f3f6fa;
}
body[data-customer-page="new-order"] #newOrderPanel {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dce4ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(30, 51, 80, .09);
}
body[data-customer-page="new-order"] #newOrderPanel > .panel-head {
  min-height: 126px;
  margin: 0;
  padding: 26px 32px;
  align-items: flex-start;
  color: #fff;
  background: linear-gradient(125deg, #0a376b 0%, #0d5db7 62%, #1682d4 100%);
}
.order-page-heading { display: grid; gap: 5px; }
.order-page-heading .order-eyebrow {
  color: #9ed4ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
body[data-customer-page="new-order"] #newOrderPanel .order-page-heading h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.04em;
}
.order-page-heading p { margin: 1px 0 0; color: #d8ebff; font-size: 13px; }
body[data-customer-page="new-order"] #closeOrderForm {
  min-width: 68px;
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 10px;
  color: #fff;
  background: rgba(255,255,255,.1);
}
.order-form-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 19px 32px;
  list-style: none;
  border-bottom: 1px solid #e5ebf3;
  background: #f9fbfd;
}

#newOrderPanel form > .form-grid {
  display: flex;
  flex-direction: column;
}
#newOrderPanel .order-section-vehicle { order: 1; }
#newOrderPanel .order-section-condition { order: 2; }
#newOrderPanel .order-section-payment { order: 3; }
#newOrderPanel .order-section-route { order: 4; }
.order-form-steps::before {
  content: "";
  position: absolute;
  top: 35px;
  right: calc(12.5% + 18px);
  left: calc(12.5% + 18px);
  height: 2px;
  background: #dbe4ef;
}
.order-form-steps li {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.order-form-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  border-radius: 10px;
  color: #708095;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.order-form-tab:hover { color: #0b5fc1; background: rgba(18,105,199,.06); }
.order-form-tab:focus-visible { outline: 3px solid rgba(18,105,199,.28); outline-offset: 2px; }
.order-form-tab span {
  flex: 0 0 auto;
}
.order-form-steps li,
.order-form-tab {
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-form-tab span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid #d8e2ee;
  border-radius: 50%;
  color: #718096;
  background: #fff;
}
.order-form-tab.active { color: #0b5fc1; background: rgba(18,105,199,.045); }
.order-form-tab.active span { border-color: #1269c7; color: #fff; background: #1269c7; box-shadow: 0 0 0 5px rgba(18,105,199,.1); }
body[data-customer-page="new-order"] #newOrderPanel [data-order-panel][hidden] { display: none !important; }
body[data-customer-page="new-order"] #newOrderPanel > form { padding: 16px 20px 20px; }
body[data-customer-page="new-order"] #newOrderPanel > form > .form-grid {
  display: block;
}
body[data-customer-page="new-order"] #newOrderPanel .form-section {
  margin: 0;
  padding: 14px;
  border: 1px solid #dee6f0;
  border-left: 1px solid #dee6f0 !important;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(25, 48, 78, .04);
}
body[data-customer-page="new-order"] #newOrderPanel .form-section-title {
  margin: 0 0 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8edf4;
  color: #152c47;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.02em;
}
body[data-customer-page="new-order"] #newOrderPanel .section-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #fff;
  background: #176fdb;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(23, 111, 219, .2);
}
body[data-customer-page="new-order"] #newOrderPanel label,
body[data-customer-page="new-order"] #newOrderPanel .segmented-label {
  color: #44556a;
  font-size: 12px;
  font-weight: 800;
}
body[data-customer-page="new-order"] #newOrderPanel input,
body[data-customer-page="new-order"] #newOrderPanel select,
body[data-customer-page="new-order"] #newOrderPanel textarea {
  min-height: 40px;
  border: 2px solid #ced9e6;
  border-radius: 10px;
  color: #14263d;
  background: #fbfcfe;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.025);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body[data-customer-page="new-order"] #newOrderPanel input:focus,
body[data-customer-page="new-order"] #newOrderPanel select:focus,
body[data-customer-page="new-order"] #newOrderPanel textarea:focus {
  border-color: #2777cc;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(39,119,204,.11);
}
body[data-customer-page="new-order"] #newOrderPanel .segment {
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #52657a;
  background: transparent;
  box-shadow: none;
}
body[data-customer-page="new-order"] #newOrderPanel .segment:has(input:checked) {
  color: #0b5bac;
  background: transparent;
  box-shadow: none;
}
body[data-customer-page="new-order"] #newOrderPanel .segment input,
body[data-customer-page="new-order"] #newOrderPanel .segment input:focus,
body[data-customer-page="new-order"] #newOrderPanel .checkbox-segment input,
body[data-customer-page="new-order"] #newOrderPanel .checkbox-segment input:focus {
  min-height: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}
body[data-customer-page="new-order"] #newOrderPanel .segment:focus,
body[data-customer-page="new-order"] #newOrderPanel .segment:focus-visible {
  outline: 0;
  box-shadow: none;
}
body[data-customer-page="new-order"] #newOrderPanel input[type="radio"],
body[data-customer-page="new-order"] #newOrderPanel input[type="radio"]:focus,
body[data-customer-page="new-order"] #newOrderPanel input[type="checkbox"],
body[data-customer-page="new-order"] #newOrderPanel input[type="checkbox"]:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}
body[data-customer-page="new-order"] #newOrderPanel .form-section > .form-grid { gap: 7px 9px; }
body[data-customer-page="new-order"] #newOrderPanel .segmented-row { gap: 8px; }
body[data-customer-page="new-order"] #newOrderPanel .segmented-label { gap: 7px; }
body[data-customer-page="new-order"] #newOrderPanel .segmented-group { gap: 5px 12px; }
body[data-customer-page="new-order"] #newOrderPanel .inline-option-row {
  gap: 6px;
  min-height: 28px;
}
body[data-customer-page="new-order"] #newOrderPanel .toggle-row { min-height: 34px; }

body[data-customer-page="new-order"] #newOrderPanel .condition-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body[data-customer-page="new-order"] #newOrderPanel .condition-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid #d5e0ee;
  border-radius: 12px;
  background: #fff;
}
body[data-customer-page="new-order"] #newOrderPanel .condition-card > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body[data-customer-page="new-order"] #newOrderPanel .condition-card strong {
  color: #17233a;
  font-size: 12px;
  font-weight: 900;
}
body[data-customer-page="new-order"] #newOrderPanel .condition-card > div:first-child > span {
  color: #7b8798;
  font-size: 10px;
  white-space: nowrap;
}
body[data-customer-page="new-order"] #newOrderPanel .compact-choice {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 999px;
  background: #dfe6f0;
}
body[data-customer-page="new-order"] #newOrderPanel .compact-choice label {
  display: block;
  cursor: pointer;
}
body[data-customer-page="new-order"] #newOrderPanel .compact-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}
body[data-customer-page="new-order"] #newOrderPanel .compact-choice label span {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  color: #66758a;
  font-size: 10px;
  font-weight: 900;
  transition: .16s ease;
}
body[data-customer-page="new-order"] #newOrderPanel .compact-choice input:checked + span {
  color: #fff;
  background: #1770dd;
  box-shadow: 0 2px 7px rgba(23, 112, 221, .26);
}
body[data-customer-page="new-order"] #newOrderPanel .condition-file-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: #aab8ca;
  font-size: 16px;
}
body[data-customer-page="new-order"] #newOrderPanel .condition-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 10px;
}
body[data-customer-page="new-order"] #newOrderPanel .condition-detail-grid > .segmented-label,
body[data-customer-page="new-order"] #newOrderPanel .insurance-file-field {
  display: grid;
  gap: 7px;
}
body[data-customer-page="new-order"] #newOrderPanel .transport-type-tabs,
body[data-customer-page="new-order"] #newOrderPanel .payment-method-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
body[data-customer-page="new-order"] #newOrderPanel .transport-type-tabs .segment,
body[data-customer-page="new-order"] #newOrderPanel .payment-method-tabs .segment {
  justify-content: center;
  min-height: 40px;
  border: 1px solid #cdd9e8;
  border-radius: 10px;
  background: #fff;
}
body[data-customer-page="new-order"] #newOrderPanel .transport-type-tabs .segment:has(input:checked),
body[data-customer-page="new-order"] #newOrderPanel .payment-method-tabs .segment:has(input:checked) {
  border-color: #176fdb;
  color: #fff;
  background: #176fdb;
  box-shadow: 0 4px 10px rgba(23, 111, 219, .18);
}
body[data-customer-page="new-order"] #newOrderPanel .insurance-file-field input[type="file"] {
  border-style: dashed;
  background: #fbfcff;
}
body[data-customer-page="new-order"] #newOrderPanel .insurance-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #ffb8b8;
  border-radius: 11px;
  color: #c43b3b;
  background: #fff3f3;
  font-size: 11px;
  line-height: 1.45;
}
body[data-customer-page="new-order"] #newOrderPanel .insurance-guide > b {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: #ef7777;
}
body[data-customer-page="new-order"] #newOrderPanel .insurance-guide span > strong { margin-right: 6px; }

body[data-customer-page="new-order"] #newOrderPanel .payment-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
body[data-customer-page="new-order"] #newOrderPanel .payment-main-column,
body[data-customer-page="new-order"] #newOrderPanel .fuel-info-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d5e1f0;
  border-radius: 13px;
  background: #f8fbff;
}
body[data-customer-page="new-order"] #newOrderPanel .payment-main-column { background: #fff; }
body[data-customer-page="new-order"] #newOrderPanel .payment-option-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
body[data-customer-page="new-order"] #newOrderPanel .toll-inclusion-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(64px, 1fr));
  gap: 7px;
}
body[data-customer-page="new-order"] #newOrderPanel .toll-inclusion-tabs .segment {
  justify-content: center;
  min-height: 40px;
  border: 1px solid #cdd9e8;
  border-radius: 10px;
  background: #fff;
}
body[data-customer-page="new-order"] #newOrderPanel .toll-inclusion-tabs .segment:has(input:checked) {
  border-color: #176fdb;
  color: #fff;
  background: #176fdb;
  box-shadow: 0 4px 10px rgba(23, 111, 219, .18);
}
body[data-customer-page="new-order"] #newOrderPanel .payment-help {
  margin: -4px 0 2px;
  color: #7a8798;
  font-size: 10px;
}
body[data-customer-page="new-order"] #newOrderPanel .fuel-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body[data-customer-page="new-order"] #newOrderPanel .fuel-card-head strong { color: #17233a; font-size: 13px; }
body[data-customer-page="new-order"] #newOrderPanel .fuel-card-head span { color: #7c8898; font-size: 10px; }
body[data-customer-page="new-order"] #newOrderPanel .tax-toggle-row {
  padding-top: 4px;
  border-top: 1px solid #e0e8f2;
}
body[data-customer-page="new-order"] #newOrderPanel .payment-request-fields {
  gap: 9px;
  margin-top: 10px;
}
body[data-customer-page="new-order"] #newOrderPanel .mini-map-button {
  min-height: 32px;
  border-radius: 8px;
  color: #155da9;
  background: #eef6ff;
}
body[data-customer-page="new-order"] #newOrderPanel .address-map-wrap {
  padding: 10px;
  border: 1px solid #dce6f0;
  border-radius: 13px;
  background: #f8fafc;
}
body[data-customer-page="new-order"] #newOrderPanel .route-map { height: 270px; border-radius: 11px; }
body[data-customer-page="new-order"] #newOrderPanel .waypoint-row {
  padding: 14px;
  border: 1px dashed #b9cbe0;
  border-radius: 12px;
  background: #f8fbff;
}
.order-submit-bar {
  position: sticky;
  bottom: 16px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #cbd9e8;
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 32px rgba(24, 54, 91, .16);
  backdrop-filter: blur(12px);
}
.order-submit-bar > div { display: grid; gap: 3px; }
.order-submit-bar strong { color: #1b3049; font-size: 14px; }
.order-submit-bar span { color: #718096; font-size: 11px; }
body[data-customer-page="new-order"] #createOrderButton {
  min-width: 210px;
  min-height: 44px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 900;
  background: linear-gradient(110deg, #0e58b0, #087ee0);
  box-shadow: 0 8px 20px rgba(9, 99, 196, .24);
}
@media (max-width: 820px) {
  body[data-customer-page="new-order"] #newOrderPanel { border-radius: 14px; }
  body[data-customer-page="new-order"] #newOrderPanel > .panel-head { min-height: 112px; padding: 21px 18px; }
  .order-page-heading p { max-width: 250px; font-size: 11px; }
  .order-form-steps { padding: 14px 8px; }
  .order-form-steps::before { top: 30px; right: 13%; left: 13%; }
  .order-form-tab { flex-direction: column; gap: 5px; min-height: 58px; padding: 2px; font-size: 10px; line-height: 1.2; }
  .order-form-tab span { width: 30px; height: 30px; }
  body[data-customer-page="new-order"] #newOrderPanel > form { padding: 9px; }
  body[data-customer-page="new-order"] #newOrderPanel > form > .form-grid {
    display: block;
  }
  body[data-customer-page="new-order"] #newOrderPanel .form-section { padding: 11px; border-radius: 10px; }
  body[data-customer-page="new-order"] #newOrderPanel .form-section-title { margin-bottom: 7px; padding-bottom: 6px; }
  body[data-customer-page="new-order"] #newOrderPanel .condition-card-grid { grid-template-columns: 1fr 1fr; }
  body[data-customer-page="new-order"] #newOrderPanel .condition-detail-grid,
  body[data-customer-page="new-order"] #newOrderPanel .payment-workspace { grid-template-columns: 1fr; }
  body[data-customer-page="new-order"] #newOrderPanel .route-map { height: 210px; }
  .order-submit-bar { position: static; align-items: stretch; flex-direction: column; gap: 8px; margin-top: 9px; padding: 10px; }
  body[data-customer-page="new-order"] #createOrderButton { width: 100%; min-width: 0; }
}
@media (max-width: 520px) {
  body[data-customer-page="new-order"] #newOrderPanel .payment-option-row { align-items: stretch; flex-direction: column; }
  body[data-customer-page="new-order"] #newOrderPanel .condition-card-grid { grid-template-columns: 1fr; }
}

/* Customer subpages: bulk request, receipts, history, support and profile */
body[data-customer-page] {
  --customer-sub-ink: #13233a;
  --customer-sub-muted: #6b7b91;
  --customer-sub-line: #dfe7f1;
  --customer-sub-soft: #f5f8fc;
  --customer-sub-blue: #176fe3;
  --customer-sub-navy: #0d2545;
  --customer-sub-green: #16a36a;
}
body[data-customer-page] #inlinePageHost {
  width: min(1120px, 100%);
  margin: 0 auto;
}
body[data-customer-page] #inlinePageHost .modal-backdrop.inline-page {
  margin-top: 0;
}
body[data-customer-page] #inlinePageHost .modal-backdrop.inline-page > .modal,
body[data-customer-page] #supportPanel .support-modal-card {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(25, 45, 72, .1);
}
body[data-customer-page] #inlinePageHost .modal-head,
body[data-customer-page] #supportPanel > .support-modal-card > .panel-head {
  position: relative;
  display: flex;
  min-height: 128px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 25px 28px;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 82% 10%, rgba(73, 145, 231, .28), transparent 36%),
    linear-gradient(118deg, #0b213e 0%, #123b6b 68%, #18548c 100%);
  color: #fff;
}
body[data-customer-page] #inlinePageHost .modal-head::after,
body[data-customer-page] #supportPanel > .support-modal-card > .panel-head::after {
  position: absolute;
  right: 90px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  content: "";
}
.customer-page-title {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.customer-page-kicker {
  display: block;
  margin-bottom: 6px;
  color: #7fbdff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}
body[data-customer-page] .customer-page-title h3 {
  margin: 0;
  color: #fff;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.04em;
}
.customer-page-title p {
  margin: 7px 0 0;
  color: #c9d9eb;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
body[data-customer-page] .customer-page-close {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-width: 74px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
}
body[data-customer-page] .customer-page-close span:first-child { font-size: 20px; font-weight: 400; line-height: 1; }
body[data-customer-page] .customer-page-close:hover { background: rgba(255, 255, 255, .18); }

/* Shared empty state */
.customer-empty-state {
  display: grid;
  min-height: 230px;
  place-content: center;
  justify-items: center;
  padding: 32px 20px;
  border: 1px dashed #ccd8e6;
  border-radius: 18px;
  background: linear-gradient(145deg, #f9fbfe, #f4f8fc);
  color: var(--customer-sub-muted);
  text-align: center;
}
.customer-empty-state > span {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  place-items: center;
  border: 1px solid #d8e5f4;
  border-radius: 18px;
  background: #fff;
  color: var(--customer-sub-blue);
  font-size: 23px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(35, 76, 126, .08);
}
.customer-empty-state strong { color: var(--customer-sub-ink); font-size: 15px; }
.customer-empty-state p { max-width: 360px; margin: 7px 0 0; font-size: 11px; line-height: 1.6; }

/* Bulk request */
body[data-customer-page="bulk"] #bulkOrderModal .bulk-order-body {
  display: grid;
  gap: 18px;
  padding: 28px;
  background: #f6f9fd;
}
.bulk-order-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--customer-sub-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(31, 57, 91, .05);
}
.bulk-order-process > div {
  position: relative;
  display: flex;
  min-height: 98px;
  align-items: center;
  gap: 13px;
  padding: 20px;
  border-right: 1px solid var(--customer-sub-line);
}
.bulk-order-process > div:last-child { border-right: 0; }
.bulk-order-process b {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #eaf3ff;
  color: var(--customer-sub-blue);
  font-size: 12px;
}
.bulk-order-process span { display: grid; gap: 5px; }
.bulk-order-process strong { color: var(--customer-sub-ink); font-size: 13px; }
.bulk-order-process small { color: var(--customer-sub-muted); font-size: 10px; line-height: 1.4; }
body[data-customer-page] .bulk-order-help {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #d6e6f9;
  border-radius: 13px;
  background: #edf6ff;
  color: #52708f;
  font-size: 11px;
  line-height: 1.55;
}
.bulk-order-help strong { flex: 0 0 auto; color: #1763b5; font-size: 11px; }
.bulk-order-help span { min-width: 0; }
body[data-customer-page] .bulk-order-actions { display: flex; justify-content: flex-start; }
body[data-customer-page] .bulk-order-actions .secondary {
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid #bdd1e8;
  border-radius: 12px;
  background: #fff;
  color: #215a94;
  font-size: 12px;
  font-weight: 850;
}
body[data-customer-page] .bulk-order-file {
  position: relative;
  display: grid;
  min-height: 178px;
  place-content: center;
  justify-items: center;
  padding: 24px;
  overflow: hidden;
  border: 1.5px dashed #a9c2df;
  border-radius: 18px;
  background: #fff;
  color: var(--customer-sub-ink);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
body[data-customer-page] .bulk-order-file:hover { border-color: var(--customer-sub-blue); background: #f9fcff; transform: translateY(-1px); }
.bulk-order-file-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 15px;
  background: #e9f3ff;
  color: var(--customer-sub-blue);
  font-size: 24px;
}
.bulk-order-file strong { font-size: 14px; }
.bulk-order-file small { margin-top: 6px; color: var(--customer-sub-muted); font-size: 10px; font-weight: 600; }
body[data-customer-page] .bulk-order-file input {
  width: min(360px, 100%);
  margin-top: 16px;
  padding: 9px;
  border: 1px solid #d6e0ec;
  border-radius: 10px;
  background: var(--customer-sub-soft);
  color: #526176;
  font-size: 11px;
}
.bulk-order-file input::file-selector-button {
  margin-right: 10px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: #dfeeff;
  color: #155ba6;
  font-weight: 800;
  cursor: pointer;
}
body[data-customer-page] .bulk-order-submit {
  min-height: 50px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(110deg, #1266cc, #1682ec);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(19, 111, 218, .22);
}
body[data-customer-page] .bulk-order-status { min-height: 0; color: #526176; font-size: 11px; text-align: center; }

/* Receipt cards */
body[data-customer-page="receipts"] #receiptListBody { padding: 24px; background: #f5f8fc; }
.receipt-record-list { display: grid; gap: 14px; }
.receipt-record-card {
  position: relative;
  padding: 19px;
  overflow: hidden;
  border: 1px solid var(--customer-sub-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(30, 53, 84, .05);
}
.receipt-record-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: #2f80ed; content: ""; }
.receipt-record-card.arrival::before { background: var(--customer-sub-green); }
.receipt-record-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #edf1f6; }
.receipt-kind { display: inline-flex; align-items: center; gap: 7px; color: #2464ad; font-size: 11px; font-weight: 900; }
.receipt-record-card.arrival .receipt-kind { color: #13815a; }
.receipt-kind i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent); }
.receipt-record-card time { color: #8693a5; font-size: 10px; }
.receipt-record-main { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 0; }
.receipt-record-main > div { display: grid; gap: 4px; }
.receipt-record-main small, .history-summary small, .history-card footer small { color: #8a97aa; font-size: 9px; font-weight: 700; }
.receipt-record-main strong { color: var(--customer-sub-ink); font-size: 13px; }
.receipt-route-card { display: grid; grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr); align-items: center; padding: 14px; border-radius: 14px; background: var(--customer-sub-soft); }
.receipt-route-card > span { display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; gap: 1px 9px; min-width: 0; }
.receipt-route-card i { grid-row: 1 / 3; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #deedff; color: #1764bd; font-size: 9px; font-style: normal; font-weight: 900; }
.receipt-route-card span:last-child i { background: #e2f5ed; color: #147952; }
.receipt-route-card em { color: #8b98a8; font-size: 8px; font-style: normal; font-weight: 800; }
.receipt-route-card strong { overflow: hidden; color: #2b3b50; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.receipt-route-card > b { color: #91a0b3; text-align: center; }
.receipt-record-card > footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 15px; }
.receipt-record-card > footer button { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: 10px; font-weight: 850; }
.receipt-record-card > footer button:first-child { border-color: #bcd3ec; background: #edf6ff; color: #155fac; }
.receipt-record-card > footer .location-button { border-color: #dce4ed; background: #fff; color: #46566c; }

/* History */
body[data-customer-page="receipts"] #historyModalBody,
body[data-customer-page="my"] #historyModalBody { padding: 24px; background: #f5f8fc; }
body[data-customer-page] .history-list { display: grid; gap: 14px; }
body[data-customer-page] .history-card {
  margin: 0;
  padding: 19px;
  border: 1px solid var(--customer-sub-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(30, 53, 84, .05);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body[data-customer-page] .history-card:hover { border-color: #b8d1ed; box-shadow: 0 12px 30px rgba(30, 68, 112, .1); transform: translateY(-1px); }
.history-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-status { display: inline-flex; align-items: center; gap: 6px; color: #168157; font-size: 10px; font-weight: 900; }
.history-status i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 7px; background: #e3f5ed; font-size: 9px; font-style: normal; }
.history-card > header time { color: #8996a8; font-size: 10px; }
.history-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; padding-bottom: 15px; border-bottom: 1px solid #edf1f5; }
.history-summary > div { display: grid; gap: 4px; }
.history-summary strong { color: var(--customer-sub-ink); font-size: 13px; }
.history-route { position: relative; display: grid; gap: 11px; padding: 3px 0 16px 4px; }
.history-route::before { position: absolute; top: 12px; bottom: 25px; left: 8px; width: 1px; background: #cbd8e6; content: ""; }
.history-route span { position: relative; display: grid; grid-template-columns: 10px minmax(0,1fr); align-items: center; gap: 9px; color: #4b5b70; font-size: 11px; line-height: 1.45; }
.history-route i { z-index: 1; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #2d7bd7; box-shadow: 0 0 0 1px #2d7bd7; }
.history-route span:last-child i { background: #19a36e; box-shadow: 0 0 0 1px #19a36e; }
.history-card > footer { display: grid; grid-template-columns: 1fr 1fr 22px; align-items: end; gap: 10px; padding: 13px 14px; border-radius: 13px; background: #f7f9fc; }
.history-card > footer > span { display: grid; gap: 4px; }
.history-card > footer strong { color: #314157; font-size: 11px; }
.history-card > footer .history-fare { text-align: right; }
.history-card > footer .history-fare strong { color: #105daa; font-size: 14px; }
.history-card > footer > b { color: #7e8da0; font-size: 22px; font-weight: 400; }

/* Support center */
body[data-customer-page="support"] #supportPanel {
  position: static;
  display: block;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body[data-customer-page="support"] #supportPanel.hidden { display: none; }
body[data-customer-page] #supportPanel .panel-head-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; }
body[data-customer-page] #supportPanel .panel-head-actions .badge { min-width: 42px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.1); color: #d7e8fa; text-align: center; font-size: 10px; }
body[data-customer-page] #supportPanel .support-layout { display: grid; grid-template-columns: minmax(290px, .8fr) minmax(0, 1.2fr); gap: 16px; padding: 22px; background: #f5f8fc; }
body[data-customer-page] #supportPanel .support-form,
body[data-customer-page] #supportPanel .support-list { min-width: 0; padding: 19px; border: 1px solid var(--customer-sub-line); border-radius: 18px; background: #fff; box-shadow: 0 7px 22px rgba(30, 53, 84, .04); }
body[data-customer-page] #supportPanel .support-form { align-self: start; }
body[data-customer-page] #supportPanel .admin-message-list { grid-column: 1 / -1; }
.support-section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.support-section-heading > span { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: #eaf3ff; color: #1769cf; font-size: 9px; font-weight: 900; }
.support-section-heading > div { display: grid; gap: 3px; }
.support-section-heading strong { color: var(--customer-sub-ink); font-size: 13px; }
.support-section-heading small { color: var(--customer-sub-muted); font-size: 9px; }
body[data-customer-page] #supportPanel .support-form label { display: grid; gap: 7px; color: #405169; font-size: 10px; font-weight: 850; }
body[data-customer-page] #supportContent { min-height: 150px; padding: 14px; resize: vertical; border: 1px solid #d5dfeb; border-radius: 13px; background: #fafcff; color: #26374d; font: 11px/1.6 inherit; }
body[data-customer-page] #supportContent:focus { border-color: #6aa4e6; outline: 3px solid rgba(31, 117, 215, .1); background: #fff; }
body[data-customer-page] #sendSupportButton { width: 100%; min-height: 45px; margin-top: 10px; border: 0; border-radius: 12px; background: linear-gradient(110deg, #1266cc, #1682ec); font-size: 12px; font-weight: 900; box-shadow: 0 9px 20px rgba(19, 111, 218, .2); }
.support-ticket-cards, .support-message-cards { display: grid; gap: 10px; }
.support-ticket-card { padding: 15px; border: 1px solid #e0e7f0; border-radius: 14px; background: #fbfcfe; }
.support-ticket-card > header, .support-ticket-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.support-ticket-number { color: #617086; font-size: 9px; font-weight: 850; }
.support-ticket-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: #fff2dc; color: #9a6611; font-size: 9px; font-weight: 900; }
.support-ticket-card.is-complete .support-ticket-status { background: #e5f6ee; color: #137852; }
.support-ticket-status .new-badge { min-height: 16px; padding: 0 5px; font-size: 7px; font-style: normal; }
.support-ticket-card > strong { display: block; margin-top: 12px; color: var(--customer-sub-ink); font-size: 12px; }
.support-ticket-card > p { margin: 6px 0 13px; color: var(--customer-sub-muted); font-size: 9px; line-height: 1.5; }
.support-ticket-card > footer { padding-top: 11px; border-top: 1px solid #e9eef4; }
.support-ticket-card time { color: #8e9bac; font-size: 8px; }
.support-ticket-card .actions, .support-message-card .actions { display: flex; gap: 5px; }
.support-ticket-card .actions button, .support-message-card .actions button { min-height: 30px; padding: 0 10px; border-radius: 8px; font-size: 9px; font-weight: 800; }
body[data-customer-page] .actions .is-danger { border-color: #f0d6d8; background: #fff8f8; color: #b64750; }
.support-message-card { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 12px; padding: 15px; border: 1px solid #e0e7f0; border-radius: 15px; background: #fff; }
.support-message-card.unread { border-color: #bcd5f2; background: linear-gradient(120deg, #fff, #f4f9ff); box-shadow: 0 7px 20px rgba(28, 94, 168, .07); }
.support-message-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #133e70, #227bd4); color: #fff; font-size: 13px; font-weight: 950; }
.support-message-content { min-width: 0; }
.support-message-content > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.support-message-content > header > span:first-child { display: grid; gap: 3px; }
.support-message-content > header strong { color: #314156; font-size: 10px; }
.support-message-content > header small { color: #929daf; font-size: 8px; }
.support-message-card .new-badge { min-height: 18px; padding: 0 6px; font-size: 7px; }
.message-read-state { color: #8b97a8; font-size: 8px; }
.support-message-title { display: block; margin-top: 11px; color: var(--customer-sub-ink); font-size: 12px; }
.support-message-content > p { margin: 5px 0 12px; color: #728096; font-size: 9px; line-height: 1.5; }
.support-message-content > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid #edf1f5; }
.support-message-content > footer > span { color: #8794a6; font-size: 8px; }

/* Profile */
body[data-customer-page="my"] #profileForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 18px;
  padding: 26px 28px 30px;
  background: #f6f9fd;
}
body[data-customer-page="my"] #profileForm > label { display: grid; min-width: 0; gap: 7px; color: #3b4c63; font-size: 10px; font-weight: 850; }
body[data-customer-page="my"] #profileForm > label.full,
body[data-customer-page="my"] #profileForm > .full,
body[data-customer-page="my"] #profileForm > .profile-divider { grid-column: 1 / -1; }
body[data-customer-page="my"] #profileForm input,
body[data-customer-page="my"] #profileForm select,
body[data-customer-page="my"] #profileForm textarea {
  width: 100%;
  min-height: 47px;
  padding: 0 13px;
  border: 1px solid #d5dfeb;
  border-radius: 12px;
  background: #fff;
  color: #26374d;
  font: 600 11px/1.4 inherit;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body[data-customer-page="my"] #profileForm textarea { min-height: 92px; padding-top: 12px; resize: vertical; }
body[data-customer-page="my"] #profileForm input:focus,
body[data-customer-page="my"] #profileForm select:focus,
body[data-customer-page="my"] #profileForm textarea:focus { border-color: #6babe9; outline: 0; background: #fff; box-shadow: 0 0 0 3px rgba(31, 117, 215, .09); }
body[data-customer-page="my"] #profileForm input[readonly] { border-color: #e1e7ef; background: #edf1f5; color: #7b8798; cursor: not-allowed; }
body[data-customer-page="my"] .profile-divider {
  display: grid;
  gap: 4px;
  margin: 15px 0 0;
  padding: 18px 0 2px;
  border-top: 1px solid #dce5ef;
  color: var(--customer-sub-ink);
}
body[data-customer-page="my"] .profile-divider-first { margin-top: 0; padding-top: 0; border-top: 0; }
body[data-customer-page="my"] .profile-divider span { font-size: 15px; font-weight: 900; letter-spacing: -.025em; }
body[data-customer-page="my"] .profile-divider small { color: var(--customer-sub-muted); font-size: 9px; font-weight: 600; }
body[data-customer-page="my"] #saveProfileButton {
  position: sticky;
  bottom: 14px;
  z-index: 4;
  min-height: 50px;
  margin-top: 8px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(110deg, #1266cc, #1682ec);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(19, 111, 218, .25);
}

@media (max-width: 760px) {
  body[data-customer-page] #inlinePageHost .modal-backdrop.inline-page > .modal,
  body[data-customer-page] #supportPanel .support-modal-card { border-radius: 17px; }
  body[data-customer-page] #inlinePageHost .modal-head,
  body[data-customer-page] #supportPanel > .support-modal-card > .panel-head { min-height: 105px; padding: 18px; }
  body[data-customer-page] #inlinePageHost .modal-head::after,
  body[data-customer-page] #supportPanel > .support-modal-card > .panel-head::after { right: 20px; bottom: -115px; }
  body[data-customer-page] .customer-page-title h3 { font-size: 19px; }
  .customer-page-title p { max-width: 260px; margin-top: 5px; font-size: 10px; }
  body[data-customer-page] .customer-page-close { min-width: 38px; width: 38px; min-height: 38px; padding: 0; border-radius: 11px; }
  body[data-customer-page] .customer-page-close span:last-child { display: none; }
  body[data-customer-page] #supportPanel .panel-head-actions { gap: 6px; }
  body[data-customer-page] #supportPanel .panel-head-actions .badge { min-width: 36px; padding: 6px 8px; }

  body[data-customer-page="bulk"] #bulkOrderModal .bulk-order-body { gap: 13px; padding: 14px; }
  .bulk-order-process { grid-template-columns: 1fr; border-radius: 14px; }
  .bulk-order-process > div { min-height: 64px; padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--customer-sub-line); }
  .bulk-order-process > div:last-child { border-bottom: 0; }
  .bulk-order-process b { width: 30px; height: 30px; flex-basis: 30px; }
  body[data-customer-page] .bulk-order-help { display: grid; gap: 4px; padding: 12px; }
  body[data-customer-page] .bulk-order-actions .secondary { width: 100%; }
  body[data-customer-page] .bulk-order-file { min-height: 164px; padding: 18px 13px; }
  body[data-customer-page] .bulk-order-file input { margin-top: 12px; }

  body[data-customer-page="receipts"] #receiptListBody,
  body[data-customer-page="receipts"] #historyModalBody,
  body[data-customer-page="my"] #historyModalBody { padding: 12px; }
  .receipt-record-card, body[data-customer-page] .history-card { padding: 14px; border-radius: 14px; }
  .receipt-record-card > header { align-items: flex-start; }
  .receipt-record-card time { max-width: 48%; text-align: right; }
  .receipt-route-card { grid-template-columns: 1fr; gap: 9px; padding: 12px; }
  .receipt-route-card > b { display: none; }
  .receipt-route-card strong { white-space: normal; }
  .receipt-record-card > footer { display: grid; grid-template-columns: 1fr 1fr; }
  .receipt-record-card > footer button { width: 100%; padding: 0 8px; }
  .receipt-record-card > footer button:only-child { grid-column: 1 / -1; }
  .history-card > footer { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 14px; padding: 11px; }

  body[data-customer-page] #supportPanel .support-layout { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  body[data-customer-page] #supportPanel .support-form,
  body[data-customer-page] #supportPanel .support-list { padding: 14px; border-radius: 14px; }
  body[data-customer-page] #supportPanel .admin-message-list { grid-column: auto; }
  .support-message-card { grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 13px; }
  .support-message-avatar { width: 32px; height: 32px; border-radius: 10px; }
  .support-message-content > footer { align-items: flex-end; }

  body[data-customer-page="my"] #profileForm { grid-template-columns: 1fr; gap: 12px; padding: 16px 14px 22px; }
  body[data-customer-page="my"] #profileForm > label.full,
  body[data-customer-page="my"] #profileForm > .full,
  body[data-customer-page="my"] #profileForm > .profile-divider { grid-column: auto; }
  body[data-customer-page="my"] .profile-divider { margin-top: 9px; padding-top: 16px; }
  body[data-customer-page="my"] .profile-divider-first { margin-top: 0; padding-top: 0; }
  body[data-customer-page="my"] #saveProfileButton { position: static; margin-top: 4px; }
}

@media (max-width: 430px) {
  .customer-page-title p { max-width: 210px; }
  .receipt-record-main, .history-summary { grid-template-columns: 1fr; gap: 9px; }
  .support-ticket-card > footer, .support-message-content > footer { align-items: stretch; flex-direction: column; }
  .support-ticket-card .actions, .support-message-card .actions { width: 100%; }
  .support-ticket-card .actions button, .support-message-card .actions button { flex: 1; }
}

/* Customer page visual refinement — typography scale is preserved */
body[data-customer-page] #inlinePageHost .modal-backdrop.inline-page > .modal,
body[data-customer-page] #supportPanel .support-modal-card{border-color:#d8e3ee;background:rgba(255,255,255,.98);box-shadow:0 22px 62px rgba(17,45,77,.11),inset 0 1px #fff}
body[data-customer-page] #inlinePageHost .modal-head,
body[data-customer-page] #supportPanel>.support-modal-card>.panel-head{background:
radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--customer-accent-2) 36%,transparent),transparent 37%),
linear-gradient(120deg,#081e38 0%,color-mix(in srgb,var(--customer-accent) 60%,#0d3156) 74%,#185b8e 135%);
box-shadow:inset 0 -1px rgba(255,255,255,.06)}
body[data-customer-page] #inlinePageHost .modal-backdrop.inline-page>.modal::before,
body[data-customer-page] #supportPanel .support-modal-card::before{position:absolute;z-index:4;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--customer-accent),var(--customer-accent-2),transparent 82%);content:"";pointer-events:none}
body[data-customer-page] .customer-page-close{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.14);box-shadow:0 6px 16px rgba(2,18,35,.13),inset 0 1px rgba(255,255,255,.1)}
body[data-customer-page] .customer-page-close:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.22);transform:translateY(-1px)}

body[data-customer-page="new-order"] #newOrderPanel{border-color:#d8e3ee;background:rgba(255,255,255,.98);box-shadow:0 22px 62px rgba(17,45,77,.11),inset 0 1px #fff}
body[data-customer-page="new-order"] #newOrderPanel>.panel-head{background:
radial-gradient(circle at 82% 8%,rgba(75,169,248,.3),transparent 38%),
linear-gradient(120deg,#081e38,#12446f 74%,#176da9)}
body[data-customer-page="new-order"] #newOrderPanel .order-form-steps{border-color:#dbe5ef;background:rgba(255,255,255,.97);box-shadow:0 8px 22px rgba(23,50,82,.06)}
body[data-customer-page="new-order"] #newOrderPanel .order-form-tab{border-color:#dce6ef;background:linear-gradient(#fff,#f6f9fc);box-shadow:0 4px 12px rgba(24,51,82,.045)}
body[data-customer-page="new-order"] #newOrderPanel .order-form-tab.active{border-color:var(--customer-accent);background:linear-gradient(125deg,var(--customer-accent),var(--customer-accent-2));box-shadow:0 8px 18px var(--customer-ring);color:#fff}
body[data-customer-page="new-order"] #newOrderPanel .form-section{border-color:#d9e4ee;background:linear-gradient(145deg,#fff,#fafcff);box-shadow:0 10px 28px rgba(24,52,84,.055)}
body[data-customer-page="new-order"] #newOrderPanel input,
body[data-customer-page="new-order"] #newOrderPanel select,
body[data-customer-page="new-order"] #newOrderPanel textarea{border-color:#d4e0eb;background:#f8fafc}
body[data-customer-page="new-order"] #newOrderPanel input:focus,
body[data-customer-page="new-order"] #newOrderPanel select:focus,
body[data-customer-page="new-order"] #newOrderPanel textarea:focus{border-color:var(--customer-accent);background:#fff;box-shadow:0 0 0 4px var(--customer-ring)}
body[data-customer-page="new-order"] #newOrderPanel .order-submit-bar{border-top-color:#d6e1ec;background:rgba(255,255,255,.97);box-shadow:0 -12px 30px rgba(19,46,77,.1);backdrop-filter:blur(12px)}
body[data-customer-page="new-order"] #createOrderButton{background:linear-gradient(120deg,var(--customer-accent),var(--customer-accent-2));box-shadow:0 10px 24px var(--customer-ring)}

body[data-customer-page="receipts"] #receiptListBody,
body[data-customer-page="receipts"] #historyModalBody,
body[data-customer-page="my"] #historyModalBody{background:
radial-gradient(circle at 100% 0,var(--customer-ring),transparent 28%),
linear-gradient(180deg,#f7f9fc,#f0f4f8)}
.receipt-record-card,body[data-customer-page] .history-card{border-color:#dbe5ef;background:linear-gradient(145deg,#fff,#fbfdff);box-shadow:0 10px 28px rgba(24,51,83,.06)}
.receipt-record-card:hover,body[data-customer-page] .history-card:hover{border-color:color-mix(in srgb,var(--customer-accent) 28%,#d5e1ec);box-shadow:0 15px 36px rgba(20,59,100,.1)}
.receipt-record-card::before{background:linear-gradient(#277be2,#65b0ff)}
.receipt-record-card.arrival::before{background:linear-gradient(#0d9565,#45c79b)}
.receipt-route-card{border:1px solid #e0e8f1;background:
radial-gradient(circle at 100% 0,var(--customer-ring),transparent 38%),
linear-gradient(145deg,#f9fbfd,#f3f7fb)}
.history-card>footer{border:1px solid #e5ebf2;background:#f6f9fc}
.receipt-record-card>footer button{box-shadow:0 4px 12px rgba(25,52,83,.045)}

body[data-customer-page] #supportPanel .support-layout{background:
radial-gradient(circle at 0 100%,var(--customer-ring),transparent 31%),
linear-gradient(180deg,#f6f9fc,#f0f4f8)}
body[data-customer-page] #supportPanel .support-form,
body[data-customer-page] #supportPanel .support-list{border-color:#dbe5ef;background:linear-gradient(145deg,#fff,#fbfdff);box-shadow:0 10px 28px rgba(24,51,83,.055)}
body[data-customer-page] #supportPanel .support-form{border-top:4px solid var(--customer-accent)}
body[data-customer-page] #supportPanel .support-list{border-top:4px solid color-mix(in srgb,var(--customer-accent) 58%,#9ac7d9)}
body[data-customer-page] #supportContent{background:linear-gradient(#fbfdff,#f7fafc)}
body[data-customer-page] #supportContent:focus{border-color:var(--customer-accent);outline:0;box-shadow:0 0 0 4px var(--customer-ring)}
body[data-customer-page] #sendSupportButton{background:linear-gradient(120deg,var(--customer-accent),var(--customer-accent-2));box-shadow:0 9px 22px var(--customer-ring)}
.support-ticket-card,.support-message-card{border-color:#dce6ef;background:linear-gradient(145deg,#fff,#fafdff);box-shadow:0 7px 20px rgba(26,53,84,.045)}
.support-ticket-card:hover,.support-message-card:hover{border-color:color-mix(in srgb,var(--customer-accent) 25%,#d7e3ed);box-shadow:0 12px 28px rgba(22,65,105,.08)}

body[data-customer-page="my"] #profileForm{background:
radial-gradient(circle at 100% 0,var(--customer-ring),transparent 31%),
linear-gradient(180deg,#f7f8fc,#f1f4f8)}
body[data-customer-page="my"] #profileForm>label{padding:13px;border:1px solid #dbe5ef;border-radius:15px;background:rgba(255,255,255,.88);box-shadow:0 7px 20px rgba(26,53,84,.045)}
body[data-customer-page="my"] #profileForm input,
body[data-customer-page="my"] #profileForm select,
body[data-customer-page="my"] #profileForm textarea{border-color:#d7e2ed;background:#f8fafc}
body[data-customer-page="my"] #profileForm input:focus,
body[data-customer-page="my"] #profileForm select:focus,
body[data-customer-page="my"] #profileForm textarea:focus{border-color:var(--customer-accent);box-shadow:0 0 0 4px var(--customer-ring)}
body[data-customer-page="my"] #saveProfileButton{background:linear-gradient(120deg,var(--customer-accent),var(--customer-accent-2));box-shadow:0 11px 26px var(--customer-ring)}

/* Order detail and departure/arrival receipt viewer */
#receiptViewModal.modal-backdrop{z-index:70;padding:16px;background:rgba(5,19,37,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#receiptViewModal>.modal{width:min(1180px,100%);max-height:calc(100dvh - 32px);padding:0;overflow:auto;border:1px solid #d7e2ed;border-radius:24px;background:
radial-gradient(circle at 100% 0,var(--customer-ring),transparent 24%),
linear-gradient(180deg,#f5f8fc,#edf3f8);box-shadow:0 34px 105px rgba(3,16,32,.48)}
#receiptViewModal>.modal>.modal-head{position:sticky;z-index:12;top:0;min-height:84px;margin:0;padding:17px 20px;border:0;background:
radial-gradient(circle at 74% 0,rgba(76,166,247,.34),transparent 42%),
linear-gradient(120deg,#081d36,#103e6e 72%,#1769a7);box-shadow:0 9px 25px rgba(10,40,72,.2)}
#receiptViewModal>.modal>.modal-head h3{color:#fff}
#receiptViewModal>.modal>.modal-head .secondary{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:#fff;box-shadow:0 6px 16px rgba(2,18,35,.13)}
#receiptViewModal>.modal>.modal-head .secondary:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.22)}
#receiptViewBody{padding:20px;background:transparent}
#receiptViewBody .order-detail-section{position:relative;margin:0 0 15px;padding:19px;border:1px solid #d9e4ee;border-radius:18px;background:linear-gradient(145deg,#fff,#fbfdff);box-shadow:0 10px 28px rgba(24,51,83,.06)}
#receiptViewBody .order-detail-section::before{position:absolute;inset:0 auto 0 0;width:4px;border-radius:18px 0 0 18px;background:linear-gradient(#2579df,#61adff);content:""}
#receiptViewBody .order-detail-section:nth-of-type(2)::before{background:linear-gradient(#6759c6,#9d90f0)}
#receiptViewBody .order-detail-section:nth-of-type(3)::before{background:linear-gradient(#109466,#45c79a)}
#receiptViewBody .order-detail-section h4{position:static;margin:0 0 15px;padding:0 0 12px;border:0;border-bottom:1px solid #e8eef5;background:transparent;color:#1d314b;transform:none}
#receiptViewBody .receipt-grid{gap:10px}
#receiptViewBody .receipt-field{min-height:68px;padding:13px 15px;border:1px solid #dfe7f0;border-radius:14px;background:#f7f9fc;box-shadow:inset 0 1px #fff}
#receiptViewBody .order-actions{display:flex;gap:9px;justify-content:flex-end;padding:4px 0 0}
#receiptViewBody .order-actions button{border-color:#cbdceb;background:linear-gradient(#fff,#f3f7fb);box-shadow:0 5px 14px rgba(25,52,83,.06)}

#receiptViewBody .receipt-doc{border:0;background:transparent;box-shadow:none}
#receiptViewBody .receipt-view-hero{border:1px solid #d5e3ef;border-radius:18px;background:
radial-gradient(circle at 90% 0,rgba(65,155,242,.15),transparent 40%),
linear-gradient(145deg,#fff,#f5f9fd);box-shadow:0 12px 32px rgba(23,53,87,.075)}
#receiptViewBody .receipt-view-tabs{border:1px solid #dbe5ef;border-radius:15px;background:rgba(255,255,255,.95);box-shadow:0 7px 20px rgba(24,51,83,.05)}
#receiptViewBody .receipt-view-tabs button{border-color:transparent;background:transparent}
#receiptViewBody .receipt-view-tabs button.active{border-color:var(--customer-accent);background:linear-gradient(120deg,var(--customer-accent),var(--customer-accent-2));color:#fff;box-shadow:0 7px 17px var(--customer-ring)}
#receiptViewBody .receipt-doc-card{border-color:#d9e4ee;border-radius:18px;background:linear-gradient(145deg,#fff,#fbfdff);box-shadow:0 10px 28px rgba(24,51,83,.06)}
#receiptViewBody .receipt-view-route,#receiptViewBody .receipt-view-summary{border-color:#dce6ef;background:#f7f9fc}
#receiptViewBody .receipt-photo-section img,#receiptViewBody .receipt-signature-box{border-color:#d6e2ed;border-radius:14px;background:#f6f9fc}
#receiptViewBody .receipt-pdf-actions{position:sticky;z-index:8;bottom:0;padding:12px;border-top:1px solid #d6e1ec;background:rgba(255,255,255,.97);box-shadow:0 -12px 30px rgba(19,46,77,.1);backdrop-filter:blur(12px)}

@media(max-width:760px){
body[data-customer-page="my"] #profileForm>label{padding:11px}
body[data-customer-page] #supportPanel .support-form,
body[data-customer-page] #supportPanel .support-list{border-top-width:3px}
#receiptViewModal.modal-backdrop{padding:0}
#receiptViewModal>.modal{width:100%;height:100dvh;max-height:none;border:0;border-radius:0}
#receiptViewModal>.modal>.modal-head{min-height:70px;padding:12px 14px}
#receiptViewBody{padding:12px}
#receiptViewBody .order-detail-section{padding:14px;border-radius:15px}
#receiptViewBody .order-detail-section::before{border-radius:15px 0 0 15px}
#receiptViewBody .receipt-grid{grid-template-columns:1fr}
#receiptViewBody .receipt-field.full{grid-column:auto}
#receiptViewBody .order-actions{display:grid;grid-template-columns:1fr}
#receiptViewBody .order-actions button{width:100%}
}

/* Customer detail and account tabs */
#receiptViewModal.order-detail-view>.modal{padding-bottom:92px}
#receiptViewModal.order-detail-view #receiptViewBody{padding-bottom:24px}
#receiptViewBody .order-detail-tabs{
  position:sticky;
  z-index:10;
  top:84px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:-4px 0 16px;
  padding:8px;
  border:1px solid #d7e3ee;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 28px rgba(20,48,79,.09);
  backdrop-filter:blur(14px);
}
#receiptViewBody .order-detail-tabs button{
  min-width:0;
  min-height:46px;
  padding:0 12px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#52647a;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
#receiptViewBody .order-detail-tabs button:hover{border-color:#d6e3ef;background:#f4f8fc;color:#183b62}
#receiptViewBody .order-detail-tabs button:focus-visible{outline:3px solid var(--customer-ring);outline-offset:2px}
#receiptViewBody .order-detail-tabs button.active{
  border-color:color-mix(in srgb,var(--customer-accent) 72%,#fff);
  background:linear-gradient(120deg,var(--customer-accent),var(--customer-accent-2));
  color:#fff;
  box-shadow:0 8px 20px var(--customer-ring);
  transform:translateY(-1px);
}
#receiptViewBody .order-detail-tab-stack{min-height:290px}
#receiptViewBody .order-detail-tab-panel{margin-bottom:0;animation:customer-tab-enter .2s ease both}
#receiptViewBody .order-detail-tab-panel[hidden]{display:none}
@keyframes customer-tab-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
#receiptViewModal.order-detail-view .order-detail-actions{
  position:fixed;
  z-index:82;
  right:auto;
  bottom:16px;
  left:50%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  width:min(calc(100vw - 32px),1180px);
  margin:0;
  padding:10px 12px;
  border:1px solid #d5e1ec;
  border-radius:0 0 22px 22px;
  background:rgba(255,255,255,.97);
  box-shadow:0 -14px 35px rgba(15,42,72,.14),0 18px 45px rgba(4,19,38,.18);
  transform:translateX(-50%);
  backdrop-filter:blur(16px);
}
#receiptViewModal.order-detail-view .order-detail-actions button{
  width:100%;
  min-width:0;
  min-height:50px;
  padding:0 8px;
  overflow:hidden;
  border:1px solid #c9dced;
  border-radius:12px;
  background:linear-gradient(180deg,#fff,#eef5fb);
  color:#194d82;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(23,55,88,.07);
}
#receiptViewModal.order-detail-view .order-detail-actions button:nth-child(2){border-color:#a9cef3;background:#eaf4ff;color:#1261b5}
#receiptViewModal.order-detail-view .order-detail-actions button:nth-child(3){border-color:#aedfce;background:#eaf8f2;color:#117657}
#receiptViewModal.order-detail-view .order-detail-actions button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(23,55,88,.12)}
#receiptViewModal.order-detail-view .order-detail-actions button:disabled{border-color:#dfe6ed;background:#f2f5f8;color:#a0acb9;box-shadow:none;cursor:not-allowed}

body[data-customer-page="my"] #profileForm{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
body[data-customer-page="my"] #profileForm>.full{grid-column:auto}
body[data-customer-page="my"] .customer-profile-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  padding:8px;
  border:1px solid #d8e3ed;
  border-radius:17px;
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 28px rgba(24,51,83,.065);
}
body[data-customer-page="my"] .customer-profile-tab{
  display:flex;
  min-width:0;
  min-height:52px;
  align-items:center;
  gap:9px;
  justify-content:center;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#52647a;
  font-weight:850;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
body[data-customer-page="my"] .customer-profile-tab b{
  display:grid;
  flex:0 0 28px;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:9px;
  background:#eaf1f8;
  color:#65778c;
}
body[data-customer-page="my"] .customer-profile-tab:hover{border-color:#d8e4ef;background:#f5f9fc;color:#173a60}
body[data-customer-page="my"] .customer-profile-tab:focus-visible{outline:3px solid var(--customer-ring);outline-offset:2px}
body[data-customer-page="my"] .customer-profile-tab.active{
  border-color:color-mix(in srgb,var(--customer-accent) 70%,#fff);
  background:linear-gradient(120deg,var(--customer-accent),var(--customer-accent-2));
  color:#fff;
  box-shadow:0 9px 22px var(--customer-ring);
  transform:translateY(-1px);
}
body[data-customer-page="my"] .customer-profile-tab.active b{background:rgba(255,255,255,.2);color:#fff}
body[data-customer-page="my"] .customer-profile-tab-panel{padding:20px;border:1px solid #dbe5ef;border-radius:18px;background:linear-gradient(145deg,#fff,#fbfdff);box-shadow:0 10px 28px rgba(24,51,83,.055);animation:customer-tab-enter .2s ease both}
body[data-customer-page="my"] .customer-profile-tab-panel[hidden]{display:none}
body[data-customer-page="my"] .customer-profile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:15px}
body[data-customer-page="my"] .customer-profile-fields>label{display:grid;min-width:0;gap:7px;padding:13px;border:1px solid #dbe5ef;border-radius:15px;background:#fff;color:#3b4c63;font-weight:850;box-shadow:0 7px 20px rgba(26,53,84,.04)}
body[data-customer-page="my"] .customer-profile-fields>label.full{grid-column:1/-1}
body[data-customer-page="my"] .customer-profile-tab-panel .profile-divider{margin:0;padding:0 0 14px;border-top:0;border-bottom:1px solid #e4ebf2}
body[data-customer-page="my"] #saveProfileButton{width:100%;margin-top:0}

@media(max-width:760px){
  #receiptViewModal.order-detail-view>.modal{padding-bottom:78px}
  #receiptViewBody .order-detail-tabs{top:70px;gap:5px;margin:-2px 0 12px;padding:6px;border-radius:13px}
  #receiptViewBody .order-detail-tabs button{min-height:42px;padding:0 5px;border-radius:9px}
  #receiptViewBody .order-detail-tab-stack{min-height:0}
  #receiptViewModal.order-detail-view .order-detail-actions{right:0;bottom:0;left:0;width:100%;gap:6px;padding:8px;border-right:0;border-bottom:0;border-left:0;border-radius:0;transform:none}
  #receiptViewModal.order-detail-view .order-detail-actions button{min-height:50px;padding:0 4px;border-radius:10px}
  body[data-customer-page="my"] .customer-profile-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;border-radius:14px}
  body[data-customer-page="my"] .customer-profile-tab{min-height:46px;justify-content:flex-start;padding:0 9px}
  body[data-customer-page="my"] .customer-profile-tab b{flex-basis:24px;width:24px;height:24px;border-radius:7px}
  body[data-customer-page="my"] .customer-profile-tab-panel{padding:14px;border-radius:15px}
  body[data-customer-page="my"] .customer-profile-fields{grid-template-columns:1fr;gap:10px;margin-top:12px}
  body[data-customer-page="my"] .customer-profile-fields>label{padding:11px;border-radius:13px}
  body[data-customer-page="my"] .customer-profile-fields>label.full{grid-column:auto}
}