/*common.css*/

/* =========================================
   基本テーマ変数
========================================= */
:root {
  --main-color: #1e3a5f;
  --text-color: #111;
  --bg-color: #fff;
  --button-text-color: #fff;
  --base-font: "Noto Sans JP", sans-serif;
  --base-font-size: 16px;
  --ad-placeholder-height: 88px;
}

/* Reuse the daily-report landing header inside the opening safety reminder. */
body.safety-reminder-open .nippo-landing-header:not(.global-safety-reminder-header) {
  visibility: hidden !important;
}
/* The step header otherwise sits above the reminder and leaves its back
   button/theme control visible underneath the reminder's own shared header. */
body.safety-reminder-open .step-top-brand-bar {
  visibility: hidden !important;
}
html body .global-safety-reminder .global-safety-reminder-header {
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: 4 !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  min-height: calc(82px + env(safe-area-inset-top)) !important;
  margin: 0 !important;
  padding: env(safe-area-inset-top) 32px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html body .global-safety-reminder::before,
html body .global-safety-reminder .global-safety-reminder-panel::before {
  display: none !important;
  content: none !important;
}
/* The fixed reminder spans the scrollbar gutter; keep its centered title and
   side controls aligned with the landing page's document-width header. */
@media (min-width: 768px) {
  html body .global-safety-reminder .global-safety-reminder-header {
    left: calc(50% - 8px) !important;
  }
}
html body .global-safety-reminder .global-safety-reminder-header .nippo-header-icon-link {
  grid-column: 1 !important;
  justify-self: start !important;
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .global-safety-reminder .global-safety-reminder-header-brand {
  position: static !important;
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html body .global-safety-reminder .global-safety-reminder-back {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  margin-left: 8px !important;
  padding: 0 !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: #111 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22) !important;
  text-decoration: none !important;
}
html body .global-safety-reminder .global-safety-reminder-back svg {
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .global-safety-reminder .global-safety-reminder-header .nippo-header-mark {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  transform: translateX(.5px) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: grayscale(1) invert(1) !important;
  box-shadow: none !important;
}
body[data-theme="dark"] .global-safety-reminder .global-safety-reminder-header .nippo-header-mark {
  filter: grayscale(1) !important;
}
html body .global-safety-reminder .global-safety-reminder-header .nippo-header-title {
  grid-column: 2 !important;
  justify-self: center !important;
  transform: translateX(-10px) !important;
  color: #111 !important;
  font: 700 21px/1 Arial, sans-serif !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
}
html body .global-safety-reminder .global-safety-reminder-header .nippo-theme-toggle {
  grid-column: 3 !important;
  justify-self: end !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  color: #111 !important;
  background: #fff !important;
  box-shadow: none !important;
}
html body .global-safety-reminder .global-safety-reminder-header .nippo-theme-toggle svg {
  width: 20px !important;
  height: 20px !important;
}
body[data-theme="dark"] .global-safety-reminder .global-safety-reminder-header {
  border-bottom-color: #303030 !important;
  background: #0b0b0b !important;
  color: #f6f6f6 !important;
}
body[data-theme="dark"] .global-safety-reminder .global-safety-reminder-header .nippo-header-title,
body[data-theme="dark"] .global-safety-reminder .global-safety-reminder-header .nippo-theme-toggle {
  border-color: #303030 !important;
  color: #f6f6f6 !important;
  background: #0b0b0b !important;
}
body[data-theme="dark"] .global-safety-reminder .global-safety-reminder-back {
  border-color: #111 !important;
  color: #f6f6f6 !important;
  background: #111 !important;
}
@media (max-width: 767px) {
  html body .global-safety-reminder .global-safety-reminder-header {
    min-height: calc(68px + env(safe-area-inset-top)) !important;
    padding-inline: 20px !important;
  }
}

/* cKas landing header wordmark and refined back control. */
.nippo-landing-header .ckas-back-button{width:44px;height:44px;flex:0 0 44px;border:1px solid color-mix(in srgb,var(--ckas-accent,#0879de) 78%,#fff);border-radius:50%;background:var(--ckas-accent,#0879de);box-shadow:0 9px 20px color-mix(in srgb,var(--ckas-accent,#0879de) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.nippo-landing-header .ckas-back-button:hover{filter:saturate(1.08) brightness(1.04);transform:translateY(-1px);box-shadow:0 12px 24px color-mix(in srgb,var(--ckas-accent,#0879de) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.34)}
.nippo-landing-header .ckas-back-button:active{transform:translateY(1px) scale(.98)}
.nippo-landing-header .ckas-wordmark{display:block;color:#173b69;font:700 15px/1 Arial,sans-serif;letter-spacing:-.045em}
.nippo-landing-header .ckas-wordmark strong{display:inline!important;margin:0!important;padding:0!important;color:var(--ckas-accent,#0879de)!important;font:inherit!important;letter-spacing:inherit!important}
body[data-theme="dark"] .nippo-landing-header .ckas-wordmark{color:#f3f8ff}

/* 2026-09 cKas usability pass: unified wide fields and clear home/route actions. */
.kasadock-wordmark,
.kasadock-home-entry {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: inherit;
  font-weight: 760;
  letter-spacing: -.02em;
  text-decoration: none;
}

.kasadock-wordmark strong,
.kasadock-home-entry strong {
  color: var(--main-color);
}

.kasadock-mark {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  object-fit: contain;
}

.kasadock-home-entry {
  min-height: 42px;
  margin-bottom: 18px;
  padding: 5px 11px 5px 6px;
  border: 1px solid color-mix(in srgb, var(--main-color) 18%, #d7dce3);
  border-radius: 11px;
  background: color-mix(in srgb, var(--main-color) 4%, var(--bg-color));
}

.page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
.theme-drawer-panel :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #cbd3dc;
  border-radius: 11px;
  background: var(--bg-color);
  color: var(--text-color);
  font: inherit;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.page textarea,
.theme-drawer-panel textarea {
  min-height: 92px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  resize: vertical;
}

.page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):focus,
.theme-drawer-panel :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):focus {
  outline: none;
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-color) 18%, transparent);
}

.route-editor-basic,
.name-row {
  grid-template-columns: minmax(0, 1fr) !important;
}

.route-menu-btn,
.bin-manage-link,
.special-entry-add,
.special-route-save {
  min-height: 46px;
  border-radius: 11px !important;
  box-shadow: none !important;
}

.special-loading-add-card {
  display: grid;
  gap: 12px;
}

.special-route-save-guide {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--main-color) 16%, #d7dce3);
  border-radius: 11px;
  background: color-mix(in srgb, var(--main-color) 5%, var(--bg-color));
  text-align: left;
}

.special-route-save-guide strong {
  color: var(--text-color);
  font-size: .95rem;
}

.special-route-save-guide span {
  color: color-mix(in srgb, var(--text-color) 72%, transparent);
  font-size: .82rem;
  line-height: 1.6;
}

.special-route-save {
  width: 100%;
}

@media (min-width: 760px) {
  .route-editor-basic {
    max-width: 760px;
  }
}

/* 2026-08 vehicle inspection: one-question focus flow */
body.step1-basic-page[data-step="1"] .card:has(.inspection-focus-area) > .card-section-header {
  display: none;
}

body.step1-basic-page[data-step="1"] .card:has(.inspection-focus-area) {
  padding: 16px 14px 18px;
}

body.step1-basic-page[data-step="1"] .inspection-focus-area {
  display: grid;
  gap: 14px;
}

body.step1-basic-page[data-step="1"] .inspection-focus-overview {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

body.step1-basic-page[data-step="1"] .inspection-focus-kicker {
  margin-bottom: 3px;
  color: #7b899b;
  font-size: 0.72rem;
  font-weight: 700;
}

body.step1-basic-page[data-step="1"] .inspection-focus-heading {
  margin: 0;
  color: #172235;
  font-size: 1.35rem;
  line-height: 1.2;
}

body.step1-basic-page[data-step="1"] .inspection-focus-total {
  color: var(--main-color);
  font-size: 1.28rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

body.step1-basic-page[data-step="1"] .inspection-focus-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edf2;
}

body.step1-basic-page[data-step="1"] .inspection-focus-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--main-color);
  transition: width 180ms ease;
}

body.step1-basic-page[data-step="1"] .inspection-focus-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.step1-basic-page[data-step="1"] .inspection-focus-section {
  min-width: 0;
  min-height: 66px;
  padding: 9px 6px;
  border: 1px solid #dce4ee;
  border-radius: 11px;
  background: #fff;
  color: #66768a;
  font: inherit;
  cursor: pointer;
}

body.step1-basic-page[data-step="1"] .inspection-focus-section span,
body.step1-basic-page[data-step="1"] .inspection-focus-section strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.step1-basic-page[data-step="1"] .inspection-focus-section span {
  font-size: 0.75rem;
  font-weight: 750;
}

body.step1-basic-page[data-step="1"] .inspection-focus-section strong {
  margin-top: 5px;
  font-size: 0.8rem;
}

body.step1-basic-page[data-step="1"] .inspection-focus-section[aria-selected="true"] {
  border-color: var(--main-color);
  background: color-mix(in srgb, var(--main-color) 7%, #fff);
  color: var(--main-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--main-color) 10%, transparent);
}

body.step1-basic-page[data-step="1"] .inspection-focus-section.is-complete {
  color: var(--main-color);
}

body.step1-basic-page[data-step="1"] .inspection-focus-section.has-bad {
  border-color: #df5f72;
  color: #c9344d;
}

body.step1-basic-page[data-step="1"] .inspection-focus-item[hidden] {
  display: none !important;
}

body.step1-basic-page[data-step="1"] .inspection-focus-item {
  min-height: 356px;
  padding: 24px 18px 20px;
  border: 1px solid #dce4ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(44, 72, 112, 0.08);
  text-align: center;
}

body.step1-basic-page[data-step="1"] .inspection-focus-item-count {
  color: var(--main-color);
  font-size: 0.86rem;
  font-weight: 800;
}

body.step1-basic-page[data-step="1"] .inspection-focus-place {
  margin-top: 18px;
  color: #66768a;
  font-size: 0.92rem;
  font-weight: 650;
}

body.step1-basic-page[data-step="1"] .inspection-focus-question {
  margin: 10px 0 0;
  color: #172235;
  font-size: clamp(1.35rem, 6vw, 1.75rem);
  line-height: 1.35;
}

body.step1-basic-page[data-step="1"] .inspection-focus-help {
  margin: 12px 0 0;
  color: #8290a3;
  font-size: 0.82rem;
}

body.step1-basic-page[data-step="1"] .inspection-focus-revise {
  min-height: 44px;
  margin: 6px auto 2px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--main-color);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
}

body.step1-basic-page[data-step="1"] .inspection-focus-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice {
  display: block;
  min-width: 0;
}

body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice span {
  display: flex;
  min-height: 108px;
  padding: 12px 8px;
  border: 2px solid var(--main-color);
  border-radius: 13px;
  color: var(--main-color);
  flex-direction: column;
  gap: 5px;
  font-size: 1.35rem;
  font-weight: 850;
  line-height: 1.15;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice span::before {
  content: none;
}

body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice span b {
  font-size: 2rem;
  line-height: 1;
}

body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice-bad span {
  border-color: #df4058;
  color: #d82d46;
}

body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice-good input:checked + span {
  background: var(--main-color);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--main-color) 24%, transparent);
}

body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice-bad input:checked + span {
  background: #df4058;
  color: #fff;
  box-shadow: 0 8px 18px rgba(223, 64, 88, 0.22);
}

body.step1-basic-page[data-step="1"] .inspection-focus-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #e1e7ef;
  border-radius: 11px;
  background: #f8fafc;
  color: #66768a;
  font-size: 0.78rem;
  text-align: center;
}

body.step1-basic-page[data-step="1"] .inspection-focus-next strong {
  color: #35445a;
  font-size: 0.82rem;
}

body.step1-basic-page[data-step="1"] .inspection-focus-summary {
  display: flex;
  justify-content: center;
  gap: 22px;
  color: #66768a;
  font-size: 0.78rem;
  font-weight: 750;
}

body.step1-basic-page[data-step="1"] .inspection-focus-area.has-bad [data-inspection-bad-count] {
  color: #c9344d;
}

body.step1-basic-page[data-step="1"] .inspection-focus-reset {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #8290a3;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 360px) {
  body.step1-basic-page[data-step="1"] .inspection-focus-section span {
    font-size: 0.68rem;
  }

  body.step1-basic-page[data-step="1"] .inspection-focus-item {
    padding-inline: 12px;
  }

  body.step1-basic-page[data-step="1"] .inspection-focus-choices {
    gap: 8px;
  }
}

/* =========================================
   リセット
========================================= */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--base-font);
  font-size: var(--base-font-size);
}

/* テーマ文字サイズを画面UIへ適用（PDF生成DOMには適用しない） */
.theme-ready .page :where(
  h1, h2, h3, h4, h5, h6,
  p, span, div, a, li, small, strong, em,
  label, button, input, select, textarea,
  table, thead, tbody, tr, th, td
),
.theme-ready .step-bar :where(
  h1, h2, h3, h4, h5, h6,
  p, span, div, a, li, small, strong, em,
  label, button, input, select, textarea,
  table, thead, tbody, tr, th, td
) {
  font-size: var(--base-font-size) !important;
}

/* =========================================
   ページ共通レイアウト
========================================= */
.page {
  max-width: 430px;
  margin: 0 auto;
  padding: 20px 16px 36px;
}

.page-back {
  margin-bottom: 8px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid #d7dce4;
  border-radius: 999px;
  background: #fff;
  color: #2b7bd8;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* =========================================
   見出し
========================================= */
h1 {
  text-align: center;
  font-size: 1.3rem;
  margin-bottom: 24px;
}

.section-title {
  margin-top: 0;
}

.card-head-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -16px -16px 16px;
  padding: 12px 72px 12px 16px;
  background: var(--main-color);
  color: var(--button-text-color);
  border-radius: 16px 16px 0 0;
  position: relative;
}

.card-head-inline .section-title {
  margin-bottom: 0;
  color: var(--button-text-color);
}

.card > h2:not(.section-title) {
  margin: -16px -16px 16px;
  padding: 12px 16px;
  background: var(--main-color);
  color: var(--button-text-color);
  border-radius: 16px 16px 0 0;
}

.card-section-header {
  margin: -16px -16px 16px;
  padding: 12px 16px;
  background: var(--main-color);
  color: var(--button-text-color);
  font-weight: 700;
  border-radius: 16px 16px 0 0;
}

.driver-summary-panel[hidden],
.driver-editor-panel[hidden] {
  display: none !important;
}

.driver-summary-label {
  margin-top: 10px;
}

.driver-summary-compact {
  display: grid;
  gap: 7px;
  width: min(260px, 100%);
  margin: 0;
  padding: 2px 0 4px;
}

.driver-summary-item-label {
  display: block;
  color: #2d3542;
  font-weight: 700;
}

.driver-summary-line {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.driver-summary-name {
  display: flex;
  gap: 1em;
  min-width: 0;
}

.driver-summary-compact .info-display-box {
  width: auto;
  min-height: 22px;
  padding-left: 0;
  line-height: 1.25;
}

.driver-editor-reset-btn {
  margin-top: 12px;
}

.info-display-box {
  width: 100%;
  min-height: 24px;
  padding: 2px 0 0 1ch;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #202020;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.info-display-box.is-empty {
  color: #9aa2ab;
}

.toll-helper-text {
  margin: -6px 0 12px;
  color: #6f7888;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* =========================================
   カードUI
========================================= */
.card {
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(22, 28, 45, 0.05);
}

/* =========================================
   フォーム
========================================= */
label {
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

select,
input[type="color"],
input[type="date"],
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="time"],
textarea,
input[readonly] {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 9px;
  border: 1px solid #d4d9e2;
  background: #f7f8fb;
  color: #202020;
  outline: none;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

input::placeholder,
textarea::placeholder {
  color: #9a9a9a;
  opacity: 1;
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #8e8e8e 50%),
    linear-gradient(135deg, #8e8e8e 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 1px),
    calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select:focus,
input[type="date"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
textarea:focus {
  border-color: var(--main-color);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-color) 15%, transparent);
}

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

.toll-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.toll-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e6e9f0;
  border-radius: 12px;
  background: #fbfcfe;
}

.toll-item[hidden] {
  display: none !important;
}

.toll-item-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 2px;
}

.toll-item-label {
  margin-bottom: 0;
  font-weight: 500;
}

.toll-remove-btn {
  min-width: 96px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid #d9dfe8;
  border-radius: 999px;
  background: #f3f4f6;
  color: #5f6878;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.toll-remove-btn[hidden] {
  display: none !important;
}

.toll-route-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.toll-route-row input,
.toll-fee-row input {
  min-width: 0;
}

.toll-fee-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

.toll-fee-row label {
  margin-bottom: 0;
  font-weight: 500;
}

.toll-fee-controls {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.toll-fee-row input {
  width: 100%;
}

.toll-fee-reset-btn {
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: 5px 12px;
  white-space: nowrap;
  font-size: 0.76rem !important;
}

.toll-item:has(.toll-fee-reset-btn) {
  position: relative;
  padding-top: 42px;
}

.toll-item .toll-fee-reset-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* =========================================
   ボタン
========================================= */
.btn,
.btn-primary {
  width: 100%;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--main-color);
  color: var(--button-text-color);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.1);
}


.btn:active {
  transform: scale(0.98);
}

.btn-secondary {
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  cursor: pointer;
  background: #f2f2f2;
  color: #333;
}

#pdfPreviewModal .btn,
#pdfPreviewModal .btn-secondary {
  font-size: 0.95rem;
}

.pdf-preview-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, 42%);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #e5e7eb;
}

.pdf-preview-actions-left {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.pdf-preview-actions .btn,
.pdf-preview-actions .btn-secondary {
  min-height: 44px;
  padding: 10px 12px;
  white-space: nowrap;
}

.pdf-preview-actions-left .btn-secondary {
  flex: 0 1 112px;
  min-width: 86px;
}

.pdf-preview-actions #pdfShareBtn {
  justify-self: end;
  width: min(148px, 100%);
}

#yesterdayButton.active,
#todayButton.active,
#resetAndCheckAllGood.active,
#resetAndCheckAllGoodBottom.active {
  border: 1px solid var(--main-color);
  background: color-mix(in srgb, var(--main-color) 18%, #fff);
  color: var(--text-color);
}

.card-head-inline .btn-icon-sm {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.btn-icon-sm {
  min-width: 58px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--main-color) 18%, #fff);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.86));
  color: var(--main-color);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.btn-icon-sm::before {
  display: none;
  content: none;
}

.btn-icon-sm:hover,
.btn-icon-sm:focus-visible {
  border-color: rgba(255, 255, 255, 0.84);
  box-shadow: 0 9px 22px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.btn-icon-sm.is-saving {
  border-color: color-mix(in srgb, var(--main-color) 74%, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--main-color) 94%, #fff), var(--main-color));
  color: var(--button-text-color);
}

.btn-icon-sm.is-saving::before {
  display: none;
  content: none;
}

.btn-icon-sm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* =========================================
   テーマ反映トランジション
========================================= */
.theme-ready {
  transition: all 0.15s ease;
}

/* =========================
   step-bar
========================= */
.step-top-brand-bar {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 131;
  width: min(520px, 100%);
  height: var(--fixed-top-brand-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 18px;
  transform: translateX(-50%);
  background: #fff;
  border-bottom: 1px solid #e6ecf3;
}

.step-top-brand-name {
  color: color-mix(in srgb, var(--main-color) 82%, #25364a);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}

.step-top-brand-bar .step-top-settings-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  margin: 0 !important;
  color: #8290a3 !important;
}

.step-bar {
  display: flex;
  gap: 0;
  padding: 12px 18px 12px;
  width: min(520px, 100%);
  margin: 0 auto;
  flex-wrap: wrap;
  align-items: center;
  position: fixed;
  top: var(--step-brand-offset, var(--fixed-top-brand-height));
  left: 50%;
  transform: translateX(-50%);
  z-index: 130;
  background: color-mix(in srgb, var(--main-color) 4%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--main-color) 16%, #e3e6ec);
  border-radius: 0;
  box-shadow: 0 1px 8px color-mix(in srgb, var(--main-color) 10%, transparent);
}

:root {
  --fixed-top-brand-height: 62px;
  --fixed-step-bar-height: 138px;
  --fixed-context-bar-height: 56px;
  --fixed-phase-prompt-height: 76px;
}

.step {
  flex: 1;
  text-align: center;
  cursor: pointer;
  position: relative;
  --step-dot-size: 24px;
  --step-label-slot: calc(var(--base-font-size) * 1.35);
}

.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--step-label-slot) + (var(--step-dot-size) / 2) - 1px);
  left: calc(50% + (var(--step-dot-size) / 2));
  width: calc(100% - var(--step-dot-size));
  height: 2px;
  border-radius: 999px;
  background: #e3e6ec;
  transform: none;
  z-index: 0;
}

.step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: calc(var(--step-label-slot) + (var(--step-dot-size) / 2) - 1px);
  left: calc(50% + (var(--step-dot-size) / 2));
  width: calc(100% - var(--step-dot-size));
  height: 2px;
  border-radius: 999px;
  background: var(--main-color);
  transform: scaleX(var(--step-progress, 0));
  transform-origin: left center;
  z-index: 1;
  transition: transform .25s ease;
}

body.step-bar-initializing .step:not(:last-child)::before,
body:not(.step-bar-ready) .step:not(:last-child)::before,
body.step-bar-initializing .step-bar .step-line,
body:not(.step-bar-ready) .step-bar .step-line,
body.step-bar-initializing .step-label,
body:not(.step-bar-ready) .step-label {
  transition: none !important;
}

body:not(.step-context-ready) .step-context-item span:last-child {
  visibility: hidden !important;
}

.step.done:not(:last-child)::after {
  background: var(--main-color);
}

.step-bar .step-line {
  width: var(--step-dot-size);
  height: var(--step-dot-size);
  border-radius: 50%;
  border: 1px solid #b4b4b4;
  background: #fff;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px !important;
  line-height: 1;
  color: #3d3d3d;
  position: relative;
  z-index: 1;
}

.step-label {
  height: var(--step-label-slot);
  margin-bottom: 0;
  color: #5f6878;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--base-font-size) !important;
  font-weight: 700;
  line-height: 1;
}

.step.active .step-line {
  border-color: var(--main-color);
  background: var(--main-color);
  color: var(--button-text-color);
}

.step.active .step-label {
  color: var(--main-color);
  font-weight: 600;
}

.step.done .step-line {
  border-color: var(--main-color);
  background: var(--main-color);
  color: var(--button-text-color);
}

.step.disabled {
  pointer-events: none;
}

.step.disabled .step-line {
  border-color: #d8d8d8;
  color: #a5a5a5;
}

.step-subprogress {
  display: none;
}

.step-subpart {
  background: #fff;
  border-right: 1px solid #a3a3a3;
}

.step-subpart:last-child {
  border-right: 0;
}

.step-subpart.filled {
  background: var(--main-color);
  border-right-color: var(--main-color);
}

.readonly-text {
  min-height: 36px;
  padding: 6px 2px;
  color: #7f8898;
  font-weight: 500;
  line-height: 1.5;
}

.name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body[data-step="1"] .date-hidden-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
}

body[data-step="1"] .date-main-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-step="1"] .date-main-text {
  flex: 1;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 4px 8px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2f3440;
  font-weight: 600;
  line-height: 1.4;
  margin: 2px 0 6px;
}

body[data-step="1"] .date-year {
  color: #596273;
  font-size: 0.95rem;
  font-weight: 600;
}

body[data-step="1"] .date-day {
  color: #111827;
  font-size: 1.18rem;
  font-weight: 800;
}

body[data-step="1"] .date-dow {
  margin-left: 2px;
}

body[data-step="1"] .date-picker-btn {
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #8a93a5;
  font-size: 16px;
  line-height: 1;
}

body[data-step="1"] .date-picker-btn:hover,
body[data-step="1"] .date-picker-btn:focus-visible {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--main-color);
}

/* =========================
   出庫(1-3) ボタン帯
========================= */
body[data-step="1"] .page {
  padding-top: 10px;
}

body[data-step="1"] h1 {
  font-size: 1.9rem;
  margin-bottom: 14px;
}

.page-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  margin: 0 0 8px;
}

.page-top-bar.page-top-bar-right {
  justify-content: flex-end;
}

body[data-step="1"] .page-top-bar {
  margin-top: 10px;
}

.page-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7b8594;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.page-back-link:hover,
.page-back-link:focus-visible {
  color: #5f6875;
}

.page-settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7b8594;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.page-settings-link:hover,
.page-settings-link:focus-visible {
  color: #5f6875;
}

.page-bottom-back {
  margin: 6px 0 16px;
  display: flex;
  justify-content: flex-start;
}

body[data-step="1"] .card {
  border-radius: 16px;
  border: 1px solid #e3e6ec;
  background: #fff;
  margin-bottom: 14px;
}

body[data-step="1"] .btn,
body[data-step="1"] .btn-primary,
body[data-step="1"] .btn-secondary {
  border-radius: 999px;
  border: none;
  min-height: 44px;
  padding: 10px 16px;
  width: 100%;
}

body[data-step="1"] .date-main-row .date-picker-btn {
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #8a93a5;
  font-size: 16px;
  line-height: 1;
}

body[data-step="1"] .date-main-row .date-picker-btn:hover,
body[data-step="1"] .date-main-row .date-picker-btn:focus-visible {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--main-color);
}

body[data-step="1"] #openSignatureModalBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(170px, 100%);
  margin-left: auto;
  margin-right: auto;
}

body[data-step="1"] .page > .card:has(#resetAll),
body[data-step="2"] #pickupList > .card:has(#resetQtyBtn),
body[data-step="3"] #deliveryList > .card:has(#resetTimeBtn) {
  padding-top: 68px;
}

body[data-step="1"] .page > .card:has(.driver-editor-panel .driver-editor-reset-btn) {
  padding-top: 22px;
}

body[data-step="1"] #resetAll,
body[data-step="2"] #resetQtyBtn,
body[data-step="3"] #resetTimeBtn {
  position: absolute;
  top: 18px;
  right: 14px;
  width: auto;
  min-width: 0;
  min-height: 32px;
}

body[data-step="1"] .driver-editor-panel .driver-editor-reset-btn {
  margin: 12px 0 0 auto;
}

.driver-editor-reset-btn,
.toll-fee-reset-btn,
body[data-step="1"] #resetAll,
body[data-step="1"] #resetAllBottom,
body[data-step="2"] #resetQtyBtn,
body[data-step="3"] #resetTimeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-width: 0;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--main-color) 16%, #dfe5ee);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--main-color) 5%, #fff));
  color: color-mix(in srgb, var(--main-color) 66%, #657080);
  font-size: 0.76rem !important;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

.driver-editor-reset-btn {
  display: flex;
  position: static;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 0 auto;
}

.driver-editor-reset-btn::before,
.toll-fee-reset-btn::before,
body[data-step="1"] #resetAll::before,
body[data-step="1"] #resetAllBottom::before,
body[data-step="2"] #resetQtyBtn::before,
body[data-step="3"] #resetTimeBtn::before {
  content: "↺";
  font-size: 0.86em;
  line-height: 1;
  transform: translateY(-1px);
}

body.step1-basic-page[data-step="1"] .driver-editor-reset-btn,
body.step1-basic-page[data-step="1"] #resetAll,
body.step1-basic-page[data-step="1"] #resetAllBottom {
  min-width: 128px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid #d5dfeb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #8290a3 !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transform: none !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

body.step1-basic-page[data-step="1"] .driver-editor-reset-btn::before,
body.step1-basic-page[data-step="1"] #resetAll::before,
body.step1-basic-page[data-step="1"] #resetAllBottom::before {
  display: none !important;
  content: none !important;
}

body.step1-basic-page[data-step="1"] .driver-editor-reset-btn:hover,
body.step1-basic-page[data-step="1"] .driver-editor-reset-btn:focus-visible,
body.step1-basic-page[data-step="1"] #resetAll:hover,
body.step1-basic-page[data-step="1"] #resetAll:focus-visible,
body.step1-basic-page[data-step="1"] #resetAllBottom:hover,
body.step1-basic-page[data-step="1"] #resetAllBottom:focus-visible {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

body.step1-basic-page[data-step="1"] .inspection-action-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 0 2px 16px;
}

body.step1-basic-page[data-step="1"] .inspection-action-row-bottom {
  margin: 16px 2px 4px;
}

body.step1-basic-page[data-step="1"] .inspection-action-row .inspection-action-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
}

.driver-editor-reset-btn:hover,
.driver-editor-reset-btn:focus-visible,
.toll-fee-reset-btn:hover,
.toll-fee-reset-btn:focus-visible,
body[data-step="1"] #resetAll:hover,
body[data-step="1"] #resetAll:focus-visible,
body[data-step="1"] #resetAllBottom:hover,
body[data-step="1"] #resetAllBottom:focus-visible,
body[data-step="2"] #resetQtyBtn:hover,
body[data-step="2"] #resetQtyBtn:focus-visible,
body[data-step="3"] #resetTimeBtn:hover,
body[data-step="3"] #resetTimeBtn:focus-visible {
  border-color: color-mix(in srgb, var(--main-color) 28%, #dfe5ee);
  background:
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--main-color) 8%, #fff));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

body[data-step="1"] .driver-editor-panel,
body[data-step="4"] .odo-inline-row:first-of-type,
body[data-step="4"] #fuelTopRow {
  margin-top: 0;
}

body[data-step="1"] #resetAll,
body[data-step="1"] #resetAndCheckAllGood,
body[data-step="1"] #resetAllBottom,
body[data-step="1"] #resetAndCheckAllGoodBottom {
  width: min(150px, calc((100% - 10px) / 2));
}

body[data-step="1"] #resetAll {
  width: auto;
}

body[data-step="1"] #resetAllBottom {
  display: none;
}

body[data-step="1"] #yesterdayButton,
body[data-step="1"] #todayButton {
  width: min(84px, calc((100% - 10px) / 2));
  min-height: 38px;
  padding: 8px 14px;
  font-weight: 400;
}

body[data-step="1"] #resetAll,
body[data-step="1"] #resetAllBottom,
body[data-step="1"] #yesterdayButton {
  margin-left: auto;
}

body[data-step="1"] #resetAndCheckAllGood,
body[data-step="1"] #resetAndCheckAllGoodBottom,
body[data-step="1"] #todayButton {
  margin-right: auto;
}

body.step1-basic-page[data-step="1"] .inspection-action-row {
  display: grid !important;
  justify-content: center !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 2px 16px !important;
}

body.step1-basic-page[data-step="1"] .inspection-action-row-bottom {
  margin: 16px 2px 4px !important;
}

body.step1-basic-page[data-step="1"] .inspection-action-row .inspection-action-btn,
body.step1-basic-page[data-step="1"] .inspection-action-row #resetAll,
body.step1-basic-page[data-step="1"] .inspection-action-row #resetAllBottom,
body.step1-basic-page[data-step="1"] .inspection-action-row #resetAndCheckAllGood,
body.step1-basic-page[data-step="1"] .inspection-action-row #resetAndCheckAllGoodBottom {
  display: inline-flex !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

body.step1-basic-page[data-step="1"] .inspection-action-row .inspection-action-check {
  flex: 0 0 156px !important;
  width: 156px !important;
  padding-top: 3px !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
}

body.step1-basic-page[data-step="1"] .inspection-action-row .inspection-action-reset {
  flex: 0 0 112px !important;
  width: 112px !important;
}

body.step1-basic-page[data-step="1"] .inspection-accordion-area {
  width: 100%;
  overflow: visible;
}

body.step1-basic-page[data-step="1"] .inspection-accordion-list {
  display: grid;
  gap: 8px;
}

body.step1-basic-page[data-step="1"] .inspection-accordion {
  overflow: hidden;
  border: 1px solid #dce4ee;
  border-radius: 10px;
  background: #fff;
}

body.step1-basic-page[data-step="1"] .inspection-accordion-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  padding: 11px 14px;
  list-style: none;
  background: #f8fafc;
  color: #172235;
  font-weight: 800;
  cursor: pointer;
}

body.step1-basic-page[data-step="1"] .inspection-accordion-summary::-webkit-details-marker {
  display: none;
}

body.step1-basic-page[data-step="1"] .inspection-accordion-summary::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid #8290a3;
  border-bottom: 2px solid #8290a3;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

body.step1-basic-page[data-step="1"] .inspection-accordion[open] .inspection-accordion-summary {
  border-bottom: 1px solid #dce4ee;
  background: #fff;
}

body.step1-basic-page[data-step="1"] .inspection-accordion[open] .inspection-accordion-summary::after {
  transform: translateY(2px) rotate(225deg);
}

body.step1-basic-page[data-step="1"] .inspection-accordion-progress {
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf2f7;
  color: #66768a;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

body.step1-basic-page[data-step="1"] .inspection-accordion.is-complete .inspection-accordion-progress {
  background: color-mix(in srgb, var(--main-color) 12%, #fff);
  color: var(--main-color);
}

body.step1-basic-page[data-step="1"] .inspection-accordion-panel {
  overflow-x: auto;
}

body.step1-basic-page[data-step="1"] .inspection-accordion-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

body.step1-basic-page[data-step="1"] .inspection-accordion-table th,
body.step1-basic-page[data-step="1"] .inspection-accordion-table td {
  border: 1px solid #cfd3dc;
}

body.step1-basic-page[data-step="1"] .inspection-accordion-table th {
  padding: 6px 4px;
  background: #f8fafc;
  text-align: center;
}

body.step1-basic-page[data-step="1"] .inspection-place-cell {
  padding: 8px 10px 6px;
  vertical-align: middle;
}

body.step1-basic-page[data-step="1"] .inspection-content-cell {
  padding: 4px;
}

body.step1-basic-page[data-step="1"] .inspection-content-wrap {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 10px 6px;
}

body[data-step="1"] .btn:disabled,
body[data-step="1"] .btn-primary:disabled {
  color: #c3c7d0;
  border-color: transparent;
  background: #eceff4;
  cursor: not-allowed;
}

.btn-link-lite {
  border: 0;
  background: transparent;
  color: #9aa2ab;
  padding: 0;
  font-size: 0.95rem;
  align-self: flex-end;
  cursor: pointer;
}

.phase-actions {
  background: transparent;
  border: 0;
  margin: 0 0 14px;
  padding: 6px 0 0;
  display: block;
}

.phase-btn {
  min-width: 112px;
  height: 50px;
  border: 1px solid #d7dce4;
  border-radius: 999px;
  background: #fff;
  color: #2b7bd8;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  padding: 0 16px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  align-self: end;
}

.phase-btn + .phase-btn {
  margin-left: 0;
}

.phase-btn:disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--main-color) 16%, #f4f5f8);
  color: color-mix(in srgb, var(--main-color) 52%, #8a93a3);
  border-color: color-mix(in srgb, var(--main-color) 30%, #d7dce4);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
  cursor: not-allowed;
}

.phase-btn.is-disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--main-color) 16%, #f4f5f8);
  color: color-mix(in srgb, var(--main-color) 52%, #8a93a3);
  border-color: color-mix(in srgb, var(--main-color) 30%, #d7dce4);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

.phase-btn-primary {
  background: var(--main-color);
  color: var(--button-text-color);
  border-color: transparent;
  min-height: 48px;
  font-size: 1.12rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.1);
  width: min(144px, calc(46% - 10px));
  max-width: none;
  min-width: 104px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  position: absolute;
  left: 50%;
  right: auto;
  bottom: calc(15px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1;
}

.phase-btn-back {
  position: absolute;
  left: 35px;
  bottom: calc(15px + env(safe-area-inset-bottom));
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #e1e5ec;
  border-radius: 999px;
  background: #fff;
  color: transparent;
  font-size: 0;
  font-weight: 700;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
  z-index: 1;
}

.phase-btn-back::before {
  content: '';
  display: inline-block;
  box-sizing: border-box;
  color: color-mix(in srgb, var(--main-color) 62%, #9aa3b2);
  width: 11px;
  height: 11px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(15px) rotate(45deg);
}

.card.is-phase-hidden {
  display: none !important;
}

.phase-prompt {
  margin: 0;
  padding: 16px 18px 15px;
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
  background: #fff;
  position: relative;
}

.phase-prompt::before,
.phase-prompt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--main-color);
}

.phase-prompt::before {
  top: 5px;
}

.phase-prompt::after {
  bottom: 0;
}

body[data-step="1"] .phase-prompt,
body[data-step="2"] .phase-prompt,
body[data-step="3"] .phase-prompt,
body[data-step="4"] .phase-prompt,
body[data-step="5"] .phase-prompt {
  width: min(520px, 100%);
  min-height: var(--fixed-phase-prompt-height);
  position: sticky;
  top: var(--fixed-step-bar-height);
  margin-inline: auto;
  z-index: 131;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}

.phase-prompt + .card,
.phase-prompt + #pickupList,
.phase-prompt + #deliveryList {
  margin-top: 0;
}

.phase-prompt-title {
  position: relative;
  padding-left: 12px;
  color: #1f2937;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
}

.phase-prompt-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 999px;
  background: #9aa4b2;
}

.phase-prompt-note {
  margin-top: 5px;
  padding-left: 12px;
  color: #687385;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

body[data-step="1"] .page > .card:not(.is-phase-hidden) .card-section-header,
body[data-step="1"] .page > .card:not(.is-phase-hidden) .card-head-inline,
body[data-step="2"] .page > .card .card-section-header,
body[data-step="2"] .page > .card .card-head-inline,
body[data-step="3"] .page > .card .card-section-header,
body[data-step="3"] .page > .card .card-head-inline,
body[data-step="4"] .page > .card .card-section-header,
body[data-step="4"] .page > .card .card-head-inline,
body[data-step="5"] .page > .card .card-section-header,
body[data-step="5"] .page > .card .card-head-inline {
  display: none;
}

body[data-step="1"][data-phase-index="1"] .page > .card:not(.is-phase-hidden) .card-head-inline {
  display: flex;
}

body[data-step="1"][data-phase-index="1"] .page > .card:not(.is-phase-hidden) .card-head-inline {
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  color: var(--main-color);
  border-radius: 0;
}

body[data-step="1"][data-phase-index="1"] .page > .card:not(.is-phase-hidden) .card-head-inline .section-title {
  color: var(--main-color);
  font-size: 1.02rem !important;
  font-weight: 800;
}

body[data-step="1"][data-phase-index="1"] .page > .card:not(.is-phase-hidden) .card-head-inline .btn-icon-sm {
  position: static;
  transform: none;
  min-width: 58px;
  height: 34px;
}

body[data-step="1"][data-phase-index="1"] .driver-summary-compact {
  width: 100%;
  gap: 0;
  padding: 0;
}

body[data-step="1"][data-phase-index="1"] .driver-summary-line {
  grid-template-columns: 8em minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid #e5e9f0;
}

body[data-step="1"][data-phase-index="1"] .driver-summary-line:first-child {
  border-top: 0;
}

body[data-step="1"][data-phase-index="1"] #helperInfoSummary .driver-summary-line + .driver-summary-line {
  border-top: 1px solid #e5e9f0 !important;
}

body[data-step="1"] #helperInfoSummary:not([hidden]) .driver-summary-line + .driver-summary-line {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #e5e9f0 !important;
}

body.step1-basic-page[data-step="1"] #helperInfoSummary.driver-summary-compact {
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
}

body.step1-basic-page[data-step="1"] #helperInfoSummary .driver-summary-line {
  grid-template-columns: 8em minmax(0, 1fr) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  border-top: 1px solid #e5e9f0 !important;
}

body.step1-basic-page[data-step="1"] #helperInfoSummary .driver-summary-line:first-child {
  border-top: 0 !important;
}

body[data-step="1"][data-phase-index="1"] .helper-top-row.has-helper-code + #helperInfoEditor:not([hidden]) {
  margin-top: 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid #e5e9f0 !important;
}

body[data-step="1"] #helperInfoEditor:not([hidden]) #table6 {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e5e9f0 !important;
}

body[data-step="1"][data-phase-index="1"] .driver-summary-item-label {
  color: #4e5969;
  font-weight: 700;
}

body[data-step="1"][data-phase-index="1"] .driver-summary-compact .info-display-box {
  min-height: auto;
  padding: 0;
  color: #111827;
  font-weight: 800;
}

body[data-step="1"][data-phase-index="1"] .driver-summary-name {
  gap: 8px;
}

body[data-step="1"] .page > .card:not(.is-phase-hidden) > h2:not(.section-title),
body[data-step="4"] .page > .card > h2:not(.section-title),
body[data-step="5"] .page > .card > h2:not(.section-title) {
  display: none;
}

body[data-step="1"] .page > .card:not(.is-phase-hidden),
body[data-step="2"] .page > .card,
body[data-step="3"] .page > .card,
body[data-step="4"] .page > .card,
body[data-step="5"] .page > .card {
  position: relative;
  padding: 22px 18px 18px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

body[data-step="1"][data-phase-index="3"] .page > .card:not(.is-phase-hidden):has(table) {
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
}

body[data-step="1"][data-phase-index="3"] .page > .card:not(.is-phase-hidden):has(table) > div[style*="overflow-x"] {
  margin-left: 0;
  margin-right: 0;
  padding-inline: 10px;
}

body[data-step="1"][data-phase-index="3"] .page > .card:not(.is-phase-hidden):has(table) table {
  width: 100% !important;
}

body[data-step="1"] .page > .card:not(.is-phase-hidden)::after,
body[data-step="2"] .page > .card::after,
body[data-step="3"] .page > .card::after,
body[data-step="4"] .page > .card::after,
body[data-step="5"] .page > .card::after {
  display: none;
}

body[data-step="2"] #resetQtyBtn,
body[data-step="3"] #resetTimeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

body[data-step="2"] .page > .card:has(#resetQtyBtn),
body[data-step="3"] .page > .card:has(#resetTimeBtn) {
  padding: 12px 0 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-step="2"] .page > .card:has(#resetQtyBtn)::after,
body[data-step="3"] .page > .card:has(#resetTimeBtn)::after {
  display: none;
}

.phase-menu-btn {
  position: static;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--main-color) 82%, #5f6875);
  font-size: 0;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  z-index: 1;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  touch-action: manipulation;
}

.phase-menu-btn::before {
  content: '';
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.32-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.32-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.phase-menu-btn span {
  display: none;
}

.phase-menu-btn:hover,
.phase-menu-btn:focus-visible {
  background: transparent;
}

.phase-menu-btn:active,
.phase-menu-btn:focus {
  background: transparent;
  outline: none;
}

.phase-menu-btn.is-open {
  opacity: 0;
  pointer-events: none;
}

.page {
  padding-bottom: calc(24px + var(--ad-placeholder-height) + 96px + env(safe-area-inset-bottom));
  position: relative;
}

.step-context-bar {
  width: min(520px, 100%);
  margin: calc(var(--fixed-step-bar-height) + 14px) auto 0;
  padding: 6px 18px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  position: relative;
  z-index: 20;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

body:has(.step-bar) .page {
  margin-top: 0;
}

body[data-step="1"]:has(.step-bar) .page {
  margin-top: 0;
}

body[data-step="4"]:has(.step-bar) .page,
body[data-step="2"]:has(.step-bar) .page,
body[data-step="3"]:has(.step-bar) .page,
body[data-step="5"]:has(.step-bar) .page {
  margin-top: 0;
}

.submit-action-card {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-action-card .submit-generate-btn {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  width: min(180px, 78%);
}

.step-context-info {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.step-context-item {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.step-context-label {
  padding-left: 6px;
  color: #687385;
  font-size: 0.78rem;
  font-weight: 700;
}

.step-context-item span:last-child {
  min-width: 0;
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-weight: 700;
}

.phase-actions {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(430px, 100%);
  min-height: 74px;
  padding: 10px 16px 14px;
  margin: 0;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #e6edf5;
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
  z-index: 180;
  pointer-events: auto;
}

.phase-actions .phase-btn {
  pointer-events: auto;
  margin-inline: auto;
}

.nippo-invalid-target {
  border-color: #df5f72 !important;
  background: #fff4f6 !important;
  box-shadow: 0 0 0 3px rgba(223, 95, 114, 0.14) !important;
}

.card.nippo-invalid-target,
.toll-item.nippo-invalid-target,
.bin-item.nippo-invalid-target,
.inspection-choice-row.nippo-invalid-target,
.signature-trigger-wrap.nippo-invalid-target {
  border-color: #df5f72 !important;
  background: #fff7f8 !important;
  box-shadow: 0 0 0 3px rgba(223, 95, 114, 0.12) !important;
}

.inspection-choice-row.nippo-invalid-target {
  border-radius: 10px;
  padding: 6px 8px;
}

.signature-trigger-wrap.nippo-invalid-target {
  border-radius: 12px;
}

.nippo-invalid-target-flash {
  animation: nippoInvalidFlash 0.9s ease;
}

@keyframes nippoInvalidFlash {
  0% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.nippo-form-hint {
  position: fixed !important;
  left: 50% !important;
  top: calc(10px + env(safe-area-inset-top)) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, -10px, 0) !important;
  width: min(398px, calc(100vw - 24px)) !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  background: rgba(34, 39, 48, 0.94) !important;
  color: #fff !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
  white-space: pre-line !important;
  text-align: center !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24) !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  contain: layout paint !important;
}

.nippo-form-hint.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0) !important;
}

.theme-drawer {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: block;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.52s;
}

.theme-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.theme-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.24);
  opacity: 0;
  transition: opacity 0.46s ease;
}

.theme-drawer.is-open .theme-drawer-backdrop {
  opacity: 1;
}

.theme-drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translateX(100%);
  opacity: 0.98;
  width: min(390px, 92vw);
  padding: 0;
  display: flex;
  align-items: stretch;
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease;
  will-change: transform, opacity;
}

.theme-drawer.is-open .theme-drawer-panel {
  transform: translateX(0);
  opacity: 1;
}

.theme-drawer-card {
  background: var(--drawer-bg-color, #fff);
  border: 0;
  border-radius: 0;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--drawer-text-color, #111111);
  font-family: var(--drawer-font, var(--base-font));
  font-size: var(--drawer-size, var(--base-font-size));
}

.theme-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-top: 2px solid var(--drawer-main-color, var(--main-color));
  border-bottom: 2px solid var(--drawer-main-color, var(--main-color));
  background: var(--drawer-bg-color, #fff);
  color: var(--drawer-main-color, var(--main-color));
}

.theme-drawer-title {
  font-weight: 700;
}

.theme-drawer-close {
  width: 38px;
  height: 38px;
  border: 1px solid #e1e5ec;
  border-radius: 50%;
  background: #fff;
  color: color-mix(in srgb, var(--drawer-main-color, var(--main-color)) 62%, #9aa3b2);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.theme-drawer-body {
  padding: 18px 16px 20px;
  display: grid;
  gap: 14px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  background: var(--drawer-bg-color, #ffffff);
}

.theme-drawer-section {
  display: grid;
  gap: 12px;
  padding: 18px 16px 16px;
  border: 0;
  border-radius: 0;
  background: var(--drawer-bg-color, #fff);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  min-width: 0;
  position: relative;
}

.theme-drawer-section::before,
.theme-drawer-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--drawer-main-color, var(--main-color));
}

.theme-drawer-section::before {
  top: 0;
}

.theme-drawer-section::after {
  bottom: 0;
}

.theme-drawer-section-title {
  margin: 0 0 4px;
  padding: 0 0 0 12px;
  font-weight: 800;
  color: var(--drawer-main-color, var(--main-color));
  line-height: 1.2;
  background: transparent;
  border-radius: 0;
  position: relative;
}

.theme-drawer-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 4px;
  border-radius: 999px;
  background: var(--drawer-main-color, var(--main-color));
}

.theme-drawer-field-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.theme-drawer-inline-label {
  display: block;
  margin: 0;
  font-weight: 500;
  color: var(--drawer-text-color, #111111);
}

.theme-drawer-field label {
  display: block;
  font-weight: 600;
  color: var(--drawer-text-color, #111111);
}

.theme-drawer-field {
  min-width: 0;
}

.theme-drawer-field-inline {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.theme-drawer-field-inline label {
  margin-bottom: 0;
}

.theme-drawer-field-inline select {
  width: 100%;
  min-width: 0;
}

.theme-drawer-field input[type="color"],
.theme-drawer-field select,
.theme-drawer-field input[type="text"],
.theme-drawer-field input[type="email"],
.theme-drawer-field input[type="tel"] {
  width: 100%;
  min-width: 0;
  color: var(--drawer-text-color, #111111);
  font-family: var(--drawer-font, var(--base-font));
  font-size: var(--drawer-size, var(--base-font-size));
}

.theme-drawer-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.theme-drawer-section-note {
  margin: 2px 0 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #64748b;
}

.theme-recipient-list {
  display: grid;
  gap: 12px;
}

.theme-recipient-card {
  display: grid;
  gap: 12px;
  padding: 14px 14px 12px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--drawer-main-color, var(--main-color)) 3%, #fff);
}

.theme-recipient-card[hidden] {
  display: none;
}

.theme-recipient-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.theme-recipient-card-title {
  font-weight: 700;
  color: var(--drawer-text-color, #111111);
}

.theme-recipient-toggle {
  min-width: 52px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #e1e5ec;
  border-radius: 999px;
  background: color-mix(in srgb, var(--drawer-main-color, var(--main-color)) 5%, #fff);
  color: color-mix(in srgb, var(--drawer-main-color, var(--main-color)) 68%, #6b7280);
  font-weight: 700;
  cursor: pointer;
}

.theme-recipient-summary {
  display: grid;
  gap: 8px;
}

.theme-recipient-summary[hidden] {
  display: none;
}

.theme-recipient-summary-row {
  display: grid;
  gap: 4px;
  align-items: start;
  color: var(--drawer-text-color, #111111);
  word-break: break-all;
}

.theme-recipient-summary-label {
  font-weight: 700;
  color: color-mix(in srgb, var(--drawer-text-color, #111111) 68%, #687385 32%);
}

.theme-recipient-summary-row > span:last-child {
  display: block;
  min-width: 0;
}

.theme-recipient-editor {
  display: grid;
  gap: 12px;
}

.theme-recipient-editor[hidden] {
  display: none;
}

.theme-drawer-swatch {
  width: 44px;
  height: 20px;
  border: 1px solid #cfd6e1;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.theme-drawer-reset {
  width: auto;
  justify-self: end;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid #e1e5ec;
  border-radius: 999px;
  background: color-mix(in srgb, var(--drawer-main-color, var(--main-color)) 5%, #fff);
  color: color-mix(in srgb, var(--drawer-main-color, var(--main-color)) 68%, #6b7280);
  font-size: 0.78rem !important;
  font-weight: 700;
  cursor: pointer;
}

.theme-drawer-cancel {
  width: 100%;
  min-height: 48px;
  border: 1px solid #e1e5ec;
  border-radius: 999px;
  background: #fff;
  color: color-mix(in srgb, var(--drawer-main-color, var(--main-color)) 62%, #9aa3b2);
  font-weight: 700;
  cursor: pointer;
}

.theme-drawer-save {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--drawer-main-color, var(--main-color));
  color: var(--drawer-button-text-color, var(--button-text-color));
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.theme-drawer-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 14px;
  flex: 0 0 auto;
  padding: 44px 32px 18px;
  border-top: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.96) 32%,
    #fff 100%
  );
}

body.theme-drawer-open {
  overflow: hidden;
}


/* =========================
   カラー設定カード
========================= */
.color-card {
  padding: 12px 16px;
}

.color-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.color-label {
  font-weight: 600;
}

.color-preview {
  width: 48px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #ccc;
  margin-left: auto;
  margin-right: 12px;
}

/* 折りたたみ本体 */
.color-body {
  margin-top: 12px;
  display: none;
}

.color-card.open .color-body {
  display: block;
}

/* トグル矢印 */
.toggle-icon {
  font-size: 0.9rem;
  color: #888;
  transition: transform 0.2s ease;
}

.color-card.open .toggle-icon {
  transform: rotate(180deg);
}

/* パレット */
.palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.swatch {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.swatch.selected {
  outline: 2px solid var(--main-color);
}


/* スマホでは color picker 非表示 */
@media (hover: none) {
  input[type="color"] {
    display: none;
  }
}


.lightness-slider {
  accent-color: var(--slider-color, var(--main-color));
}




.preview-box {
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed #bbb;
  text-align: center;
}

.preview-title {
  font-weight: 600;
  margin-bottom: 8px;
}



/* =========================
   便選択
========================= */


.bin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.bin-select-box {
  border: 0;
  border-radius: 12px;
  padding: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.bin-item {
  position: relative;
  padding: 12px 14px;
  padding-left: 44px;
  border-radius: 10px;
  border: 1px solid #ddd;
  cursor: pointer;
  background: #fff;
}

.bin-item::before {
  content: "○";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  color: #b6bcc8;
  font-weight: 700;
}

.bin-item.active {
  border-color: var(--main-color);
  background: color-mix(in srgb, var(--main-color) 10%, #fff);
}

.bin-item.active::before {
  content: "◎";
  color: var(--main-color);
}

.bin-empty {
  padding: 14px 16px;
  border: 1px dashed color-mix(in srgb, var(--main-color) 24%, #d9e0ea);
  border-radius: 8px;
  background: color-mix(in srgb, var(--main-color) 4%, #fff);
  color: #5f6b7c;
  font-size: 0.9rem !important;
  font-weight: 750;
  line-height: 1.6;
}

.required-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #b91c1c 10%, #fff);
  color: #9f1239;
  font-size: 0.72rem !important;
  font-weight: 850;
  vertical-align: middle;
}

body[data-step="1"] .bin-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

body[data-step="1"] .bin-item {
  min-height: 58px;
  padding: 9px 10px 9px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body[data-step="1"] .bin-item::before {
  left: 11px;
}

body[data-step="1"] .bin-name,
body[data-step="1"] .bin-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   出庫: 乗務日・便選択
========================= */
body[data-step="1"][data-phase-index="0"] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--main-color) 7%, #f7f9fc) 0%, #fff 56%);
}

body[data-step="1"][data-phase-index="0"] .page {
  padding-top: 14px;
}

body[data-step="1"][data-phase-index="0"] .phase-prompt {
  min-height: auto;
  padding: 18px 20px 17px;
  border-bottom: 1px solid color-mix(in srgb, var(--main-color) 20%, #edf1f6);
  background:
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--main-color) 4%, #fff));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

body[data-step="1"][data-phase-index="0"] .phase-prompt::before,
body[data-step="1"][data-phase-index="0"] .phase-prompt::after {
  display: none;
}

body[data-step="1"][data-phase-index="0"] .phase-prompt-title {
  padding-left: 15px;
  color: #1f2937;
  font-size: 1.34rem !important;
  font-weight: 680;
  line-height: 1.28;
}

body[data-step="1"][data-phase-index="0"] .phase-prompt-title::before {
  top: 0.05em;
  bottom: 0.05em;
  width: 5px;
  background: #9aa4b2;
}

body[data-step="1"][data-phase-index="0"] .phase-prompt-note {
  padding-left: 15px;
  color: #5f6b7c;
  font-weight: 650;
}

body[data-step="1"][data-phase-index="0"] .page > .card:not(.is-phase-hidden) {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--main-color) 10%, #e7ebf1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--main-color) 2%, #fff));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

body[data-step="1"][data-phase-index="0"] .date-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 12px;
  align-items: center;
}

body[data-step="1"][data-phase-index="0"] .date-main-text {
  min-height: 76px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--main-color) 11%, #e1e7ef);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--main-color) 3%, #fff));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body[data-step="1"][data-phase-index="0"] .date-year {
  color: #667386;
  font-size: 0.86rem !important;
}

body[data-step="1"][data-phase-index="0"] .date-day {
  color: #111827;
  font-size: 1.18rem !important;
  letter-spacing: 0;
}

body[data-step="1"][data-phase-index="0"] .date-dow {
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--main-color) 8%, #fff);
  color: var(--main-color);
  font-size: 0.86rem !important;
  font-weight: 800;
}

body[data-step="1"][data-phase-index="0"] .date-main-row .date-picker-btn {
  width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--main-color) 12%, #dde4ee);
  border-radius: 50%;
  background: #fff;
  color: var(--main-color);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

body[data-step="1"][data-phase-index="0"] .date-main-row + div[style*="display:flex"] {
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  gap: 96px !important;
  margin-top: 14px !important;
  padding: 0 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] #dayOfWeek + div[style*="display:flex"] {
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  gap: 30px !important;
  margin-top: 14px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] #yesterdayButton,
body.step1-basic-page[data-step="1"][data-phase-index="0"] #todayButton {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body[data-step="1"][data-phase-index="0"] #yesterdayButton,
body[data-step="1"][data-phase-index="0"] #todayButton {
  width: 90px;
  min-height: 40px;
  border: 1px solid transparent;
  background: #f1f3f6;
  color: #374151;
  font-weight: 700;
  box-shadow: none;
}

body[data-step="1"][data-phase-index="0"] #yesterdayButton.active,
body[data-step="1"][data-phase-index="0"] #todayButton.active {
  border-color: color-mix(in srgb, var(--main-color) 38%, #d7dce4);
  background: color-mix(in srgb, var(--main-color) 16%, #fff);
  color: #263241;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

body[data-step="1"][data-phase-index="0"] .bin-select-box {
  gap: 12px;
  background: transparent;
}

body[data-step="1"][data-phase-index="0"] .bin-list {
  grid-template-columns: 1fr;
  gap: 10px;
  width: min(382px, calc(100% - 20px));
  margin: 0 auto 18px;
}

body[data-step="1"][data-phase-index="0"] .bin-item {
  min-height: 64px;
  padding: 14px 16px 14px 46px;
  border: 1px solid color-mix(in srgb, var(--main-color) 14%, #dfe5ee);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--main-color) 3%, #fff));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body[data-step="1"][data-phase-index="0"] .bin-item::before {
  content: "";
  left: 17px;
  width: 14px;
  height: 14px;
  border: 2px solid #aab4c3;
  border-radius: 50%;
  background: #fff;
}

body[data-step="1"][data-phase-index="0"] .bin-item:hover,
body[data-step="1"][data-phase-index="0"] .bin-item:focus-visible {
  border-color: color-mix(in srgb, var(--main-color) 34%, #dfe5ee);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}

body[data-step="1"][data-phase-index="0"] .bin-item.active {
  border-color: color-mix(in srgb, var(--main-color) 72%, #fff);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--main-color) 9%, #fff), #fff);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--main-color) 18%, transparent);
}

body[data-step="1"][data-phase-index="0"] .bin-item.active::before {
  background: var(--main-color);
  border-color: var(--main-color);
  box-shadow: inset 0 0 0 4px #fff;
}

body[data-step="1"][data-phase-index="0"] .bin-name {
  color: #111827;
  font-size: 1.16rem !important;
  font-weight: 850;
}

body[data-step="1"][data-phase-index="0"] .bin-sub {
  margin-top: 3px;
  color: #667386;
  font-size: 0.82rem !important;
}

body[data-step="1"][data-phase-index="0"] .btn-link-lite {
  align-self: flex-end;
  padding: 8px 2px;
  color: #7c8798;
  font-weight: 750;
}

body[data-step="1"][data-phase-index="0"] .btn-link-lite::after {
  content: "  →";
}

body[data-step="1"][data-phase-index="0"] .phase-actions {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94) 28%, #fff 100%);
}

body[data-step="1"][data-phase-index="0"] .phase-btn-primary {
  height: 52px;
  width: min(176px, 72%);
  border: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--main-color) 92%, #315c88), var(--main-color));
  color: var(--button-text-color);
  font-weight: 850;
  box-shadow: 0 13px 28px color-mix(in srgb, var(--main-color) 30%, transparent), 0 3px 8px rgba(15, 23, 42, 0.12);
}

body[data-step="1"][data-phase-index="0"] .phase-btn-primary:disabled,
body[data-step="1"][data-phase-index="0"] .phase-btn-primary.is-disabled {
  background: #e7ebf1;
  color: #7d8898;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.loading-stop-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #2f3440;
}

.loading-stop-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.route-free-card {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--main-color) 12%, #e5eaf1) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--main-color) 4%, #fff), #fff) !important;
}

.route-free-card p {
  margin: 0;
  color: #5f6b7c;
  font-weight: 650;
  line-height: 1.6;
}

.route-manage-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  text-decoration: none;
}

.route-share-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--main-color) 15%, #e5eaf1);
  border-radius: 8px;
  background: #fff;
}

.route-share-status {
  color: var(--main-color);
  font-weight: 850;
}

.route-share-link {
  padding: 9px 10px;
  border-radius: 8px;
  background: #f5f7fa;
  color: #586474;
  font-size: 0.78rem !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.route-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.route-share-actions .btn,
.route-share-actions .btn-secondary {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 0.82rem !important;
}

.route-share-actions .route-save-qr {
  grid-column: 1 / -1;
}

.route-share-qr {
  justify-self: center;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.route-share-qr canvas,
.route-share-qr img {
  display: block;
  max-width: min(320px, calc(100vw - 96px));
  height: auto !important;
}

.loading-group-card {
  border: 1px solid #ebeef5;
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--main-color) 5%, #fff) 0%, #fff 100%);
}

.loading-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 700;
  color: #2f3440;
}

.loading-group-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--main-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-color) 16%, transparent);
}

.loading-delivery-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e5e9f1;
}

.loading-delivery-row:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.loading-shipper {
  color: #4b5563;
  font-size: 0.92rem;
}

.loading-qty-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.loading-qty-label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #6b7280;
}

.loading-qty-input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #d8dfeb;
  border-radius: 14px;
  background: #fbfcff;
  color: #202020;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: right;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.loading-qty-input::placeholder {
  color: #a8b1c0;
  font-size: 0.92rem;
  font-weight: 500;
}

.delivery-card {
  padding: 14px 16px 16px;
}

.delivery-stop-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: #2f3440;
}

.delivery-stop-index {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--main-color) 12%, #fff);
  color: var(--main-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 800;
}

.delivery-time-grid {
  display: grid;
  gap: 12px;
}

.delivery-time-field {
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--main-color) 4%, #fff) 0%, #fff 100%);
}

.delivery-time-label {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #6b7280;
}

.delivery-time-input {
  min-height: 54px;
  border-radius: 14px;
  border: 1px solid #d8dfeb;
  background: #fbfcff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 1.08rem;
  font-weight: 700;
}

.delivery-time-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.delivery-time-btn {
  width: auto;
  min-width: 72px;
  min-height: 54px;
  padding: 0 14px;
  white-space: nowrap;
}

body[data-step="2"] .page > .card,
body[data-step="2"] #pickupList > .card,
body[data-step="3"] .page > .card,
body[data-step="3"] #deliveryList > .card {
  position: relative;
  padding: 22px 18px 18px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

body[data-step="2"] .page > .card::after,
body[data-step="2"] #pickupList > .card::after,
body[data-step="3"] .page > .card::after,
body[data-step="3"] #deliveryList > .card::after {
  display: none;
}

body[data-step="2"] .loading-stop-title {
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  color: var(--main-color);
  font-weight: 800;
}

body[data-step="2"] .loading-destination-toggle {
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #111827 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  text-align: left !important;
  font: inherit !important;
}

body[data-step="2"] .loading-destination-toggle::after {
  content: "" !important;
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid #8290a3 !important;
  border-bottom: 2px solid #8290a3 !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 0.16s ease !important;
}

body[data-step="2"] .loading-phase-card.is-loading-destination-active .loading-destination-toggle::after {
  transform: rotate(225deg) translateY(-2px) !important;
}

body[data-step="2"] .loading-destination-main {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  min-width: 0 !important;
  color: #111827 !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

body[data-step="2"] .loading-destination-main:has(+ .loading-destination-sub) {
  grid-row: 1 !important;
}

body[data-step="2"] .loading-destination-sub {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin-top: 3px !important;
  color: #8290a3 !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}

body[data-step="2"] .loading-card-status {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-step="2"] .loading-card-status.is-complete {
  border: 1.5px solid var(--theme-primary, #153d6b) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 3px 8px rgba(21, 61, 107, 0.12) !important;
}

body[data-step="2"] .loading-card-status.is-complete::after {
  content: "" !important;
  width: 5px !important;
  height: 9px !important;
  margin-top: -2px !important;
  border: solid var(--theme-primary, #153d6b) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

body[data-step="2"][data-loading-unit-mode="pallet"] .loading-destination-card .loading-destination-sub {
  display: none !important;
}

body[data-step="2"] .loading-phase-card > .loading-stop-body {
  display: none !important;
}

body[data-step="2"] .loading-phase-card[data-loading-card-type] {
  display: none !important;
}

body[data-step="2"][data-loading-input-mode="destination"] .loading-phase-card[data-loading-card-type="destination"],
body[data-step="2"][data-loading-input-mode="shipper"] .loading-phase-card[data-loading-card-type="shipper"] {
  display: block !important;
}

body[data-step="2"] .loading-phase-card[data-loading-card-type="special"] {
  display: block !important;
}

body[data-step="2"] .loading-phase-card.is-loading-destination-active > .loading-stop-body {
  display: block !important;
  margin-top: 12px !important;
}

body[data-step="2"] #pickupList > .loading-phase-card + .loading-phase-card {
  margin-top: 10px !important;
}

body[data-step="2"] .loading-group-card,
body[data-step="3"] .delivery-time-field {
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--main-color) 3%, #fff);
  box-shadow: none;
}

body[data-step="2"] .loading-group-card {
  padding: 12px 14px;
}

body[data-step="2"] .loading-delivery-row {
  border-top-color: color-mix(in srgb, var(--main-color) 12%, #e5e9f1);
}

body[data-step="2"] .loading-destination-in-shipper strong {
  color: #303236 !important;
}

body[data-step="2"] .loading-destination-in-shipper span {
  color: #8290a3 !important;
  font-weight: 850 !important;
}

body[data-step="2"] .loading-qty-input,
body[data-step="3"] .delivery-time-input {
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body[data-step="3"] .delivery-card {
  border-radius: 0;
}

body[data-step="3"] .delivery-stop-title {
  color: var(--main-color);
}

.inspection-choice-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.inspection-choice {
  display: inline-flex;
  align-items: center;
}

.inspection-choice input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.inspection-choice span {
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f3440;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.inspection-choice span::before {
  content: "○";
  color: #aeb6c3;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}

.inspection-choice input[type="checkbox"]:checked + span::before {
  content: "●";
  color: var(--main-color);
}

.signature-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 300;
}

.signature-modal-open {
  overflow: hidden;
}

.signature-modal.open {
  display: flex;
}

.signature-modal-panel {
  width: min(520px, 100%);
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d7dde7;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.signature-modal-panel.landscape {
  width: min(720px, 100%);
}

.signature-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.signature-modal-orientation {
  width: auto;
  min-width: 86px;
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 999px;
  min-height: 40px;
}

#signatureToggleOrientationBtn {
  width: auto !important;
  min-width: 86px !important;
  flex: 0 0 auto !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  min-height: 40px !important;
  background: #f2f2f2;
  border: 1px solid #ddd;
  color: #333;
  box-shadow: none;
}

.signature-modal-canvas {
  width: 100%;
  aspect-ratio: 41 / 19;
  height: auto;
  border: 1px solid #cfd3dc;
  border-radius: 8px;
  background: #fff;
  touch-action: none;
  display: block;
}

.signature-modal-panel.landscape .signature-modal-canvas {
  height: auto;
}

.signature-modal.fullscreen {
  padding: 0;
  background: rgba(0, 0, 0, 0.72);
}

.signature-modal.fullscreen .signature-modal-panel.landscape {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  padding: 30px;
}

.signature-modal.fullscreen .signature-modal-panel.landscape {
  display: grid;
  grid-template-columns: 1fr 104px;
  grid-template-rows: 1fr;
  column-gap: 10px;
  align-items: stretch;
}

.signature-modal.fullscreen .signature-modal-panel.landscape .signature-modal-head {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px;
  z-index: 2;
  align-self: start;
  pointer-events: none;
}

.signature-modal.fullscreen .signature-modal-panel.landscape .signature-modal-head .signature-modal-orientation {
  pointer-events: auto;
}

.signature-modal.fullscreen .signature-modal-panel.landscape .signature-modal-canvas {
  grid-column: 1;
  grid-row: 1;
  flex: 0 0 auto;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin-inline: auto;
}

.signature-modal.fullscreen .signature-modal-panel.landscape .signature-modal-actions {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.signature-modal.fullscreen .signature-modal-panel.landscape .signature-modal-actions .btn-secondary,
body[data-step="1"] .signature-modal.fullscreen .signature-modal-panel.landscape .signature-modal-actions .btn-secondary {
  width: 100%;
  min-width: 0;
  padding: 10px 8px;
}

.signature-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

.signature-modal-actions .btn-secondary {
  width: auto;
  min-width: 86px;
  flex: 0 0 auto;
  padding: 8px 12px;
}

body[data-step="1"] .signature-modal-actions .btn-secondary {
  width: auto;
  min-width: 86px;
  flex: 0 0 auto;
}

#openSignatureModalBtn,
#signatureModalSaveBtn {
  background: var(--main-color);
  color: var(--button-text-color);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
#openSignatureModalBtn.is-rewrite {
  background: #f2f2f2;
  color: #333;
  border: 1px solid #ddd;
  box-shadow: none;
}

.bin-name {
  font-weight: 600;
}

.bin-sub {
  font-size: 0.8rem;
  color: #666;
}

.bin-manage-link {
  width: fit-content;
  align-self: flex-end;
  margin: -2px 4px 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8290a3;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bin-manage-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--main-color) 34%, transparent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================
   Switch
========================= */
.helper-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
}

.helper-top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.helper-top-row.has-helper-code {
  grid-template-columns: 1fr 1fr;
}

.helper-switch-block {
  min-width: 0;
}

.helper-inline-title {
  display: block;
}

.helper-code-wrap {
  min-width: 0;
}

.helper-code-wrap label {
  display: block;
  margin-bottom: 6px;
}

.odo-inline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.odo-guidance {
  margin: 9px 18px 12px;
  padding: 2px 0 2px 12px;
  border: 0;
  border-left: 3px solid #b9c9dc;
  border-radius: 0;
  background: transparent;
  color: #43536a;
  font-size: 0.73rem;
  font-weight: 650;
  line-height: 1.65;
  text-align: left;
}

.odo-guidance strong {
  color: #173e6c;
  font-weight: 950;
}

.odo-guidance span {
  display: block;
  margin-top: 5px;
  color: #b42332;
  font-size: 0.72rem;
  font-weight: 850;
}

.odo-inline-label {
  margin: 0;
  line-height: 1.35;
  display: flex;
  align-items: center;
  align-self: center;
}

.odo-input-wrap {
  position: relative;
}

.odo-input-wrap input {
  padding-right: 44px;
}

.odo-input-wrap .readonly-text {
  min-height: 56px;
  padding: 14px 44px 14px 16px;
  border: 1px solid #d4d9e2;
  border-radius: 9px;
  background: #f7f8fb;
  color: #202020;
  font-weight: 500;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

.odo-input-wrap .readonly-text.odo-readonly-clear {
  border-color: transparent;
  background: transparent;
  color: #7a8190;
}

.odo-plain-wrap {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 0;
}

.odo-plain-value {
  color: #7a8190;
  font-weight: 500;
  line-height: 1.5;
}

.odo-plain-unit {
  color: #666;
  font-size: 0.92rem;
}

.odo-input-unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 0.92rem;
  pointer-events: none;
}

body[data-phase-index="0"] .odo-inline-row {
  grid-template-columns: 1fr 1.35fr;
  gap: 12px;
}

body[data-phase-index="0"] .odo-inline-label {
  font-weight: 700;
}

body[data-phase-index="0"] .odo-input-wrap input {
  min-height: 64px;
  padding: 16px 48px 16px 18px;
  border-radius: 12px;
  background: #fff;
  font-size: 1.18rem;
  font-weight: 700;
  text-align: center;
}

body[data-phase-index="0"] .odo-input-wrap input::placeholder {
  font-size: 0.96rem;
  font-weight: 500;
}

body[data-phase-index="0"] .odo-input-unit {
  right: 34px;
  font-weight: 600;
}

.helper-switch-label {
  font-size: 0.95rem;
  color: #555;
}

.switch-pill {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 30px;
}

.switch-pill input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-pill-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d9dde6;
  border-radius: 999px;
  transition: background-color .2s ease;
}

.switch-pill-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 4px;
  top: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .2s ease;
}

.switch-pill input:checked + .switch-pill-slider {
  background: var(--main-color);
}

.switch-pill input:checked + .switch-pill-slider::before {
  transform: translateX(20px);
}









.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: calc(var(--ad-placeholder-height) + 15px + env(safe-area-inset-bottom));
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #e1e5ec;
  background: #fff;
  color: color-mix(in srgb, var(--main-color) 62%, #9aa3b2);
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 210;
  pointer-events: none;
}

.scroll-top-btn .scroll-top-icon {
  position: relative;
  width: 14px;
  height: 14px;
}

.scroll-top-btn .scroll-top-icon::before {
  content: none;
}

.scroll-top-btn .scroll-top-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

.scroll-top-btn .scroll-top-label {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.admin-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.route-admin-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.route-menu-btn {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: space-between;
  justify-items: start;
  min-height: 118px;
  padding: 14px !important;
  border-radius: 8px !important;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--main-color) 12%, #e3e8ef) !important;
  background:
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--main-color) 3%, #fff)) !important;
  color: #0f172a !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.09);
}

.route-menu-btn::before {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--main-color) 10%, #fff);
  color: var(--main-color);
  font-weight: 950;
}

.route-menu-btn::after {
  content: ">";
  position: absolute;
  right: 14px;
  top: 16px;
  color: #94a3b8;
  font-weight: 900;
}

.route-menu-new::before {
  content: "+";
}

.route-menu-import::before {
  content: "QR";
  font-size: 0.78rem !important;
}

.route-menu-import-link::before {
  content: "↗";
}

.route-menu-edit::before {
  content: "編";
}

.route-menu-return::before {
  content: "戻";
}

.route-menu-btn span,
.route-menu-btn small {
  grid-column: auto;
}

.route-menu-btn span {
  font-size: 0.98rem !important;
  font-weight: 900;
  line-height: 1.25;
}

.route-menu-btn small {
  color: #64748b;
  font-size: 0.78rem !important;
  font-weight: 750;
}

.route-menu-primary small {
  color: rgba(255, 255, 255, 0.82);
}

.route-menu-primary {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--main-color) 96%, #000), color-mix(in srgb, var(--main-color) 72%, #3b82f6)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.route-menu-primary::before {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.route-menu-primary::after {
  color: rgba(255, 255, 255, 0.72);
}

.route-menu-import::before {
  background: #eef6ff;
  color: #0f5ea8;
}

.route-menu-import-link::before {
  background: #eef6ff;
  color: #0f5ea8;
}

.route-menu-edit::before {
  background: #f2f8f1;
  color: #276749;
}

.route-menu-return::before {
  background: #f7f4ed;
  color: #7a4d12;
}

.route-admin-header {
  position: sticky;
  top: 0;
  z-index: 60;
  margin: -6px -8px 14px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--main-color) 18%, #dbe3ee);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--main-color) 6%, #fff));
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
}

.route-admin-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.route-admin-header h1 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 1.12rem !important;
  letter-spacing: 0;
}

.route-admin-title-row span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--main-color) 10%, #fff);
  color: var(--main-color);
  font-size: 0.76rem !important;
  font-weight: 900;
}

.route-admin-header p {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem !important;
  font-weight: 700;
  line-height: 1.5;
}

.route-admin-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
}

.route-admin-overview > div {
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--main-color) 12%, #e3e8ef);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--main-color) 3%, #fff));
  box-shadow: 0 9px 20px rgba(15, 23, 42, 0.06);
}

.route-admin-overview span {
  display: block;
  color: var(--main-color);
  font-size: 1.35rem !important;
  font-weight: 950;
  line-height: 1.1;
}

.route-admin-overview small {
  color: #64748b;
  font-size: 0.76rem !important;
  font-weight: 800;
}

.route-editor-open .route-admin-actions {
  display: none;
}

.route-import-open .route-admin-actions,
.route-import-open .route-list-panel {
  display: none;
}

.route-list-panel {
  display: none;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--main-color) 14%, #e3e8ef);
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.route-list-open .route-list-panel {
  display: block;
}

.route-list-head {
  position: sticky;
  top: 78px;
  z-index: 35;
  display: grid;
  gap: 10px;
  margin: -12px -12px 12px;
  padding: 12px;
  border-bottom: 1px solid #e3e8ef;
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.route-list-head h2 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 1.32rem !important;
}

.route-list-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.84rem !important;
  font-weight: 750;
}

.route-admin-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.route-editor-open .route-list-panel {
  display: none;
}

.route-import-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--main-color) 16%, #e3e8ef);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--main-color) 4%, #fff), #fff);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
}

.route-import-head {
  margin-bottom: 12px;
}

.route-import-head h2 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 1.08rem !important;
}

.route-import-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.86rem !important;
  font-weight: 700;
  line-height: 1.5;
}

.route-import-actions {
  display: grid;
  gap: 10px;
}

.route-import-link {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #dbe5ef;
}

.route-import-link[hidden] {
  display: none !important;
}

.route-import-actions .route-import-link {
  grid-column: 1 / -1;
}

.route-import-link label {
  color: #102033;
  font-size: 0.9rem !important;
  font-weight: 800;
}

.route-import-link textarea {
  width: 100%;
  min-height: 86px;
  padding: 12px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #fff;
  color: #102033;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.route-import-link textarea:focus {
  border-color: #123a5f;
  box-shadow: 0 0 0 3px rgba(18, 58, 95, 0.08);
  outline: none;
}

.route-editor-panel {
  margin-top: 14px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--main-color) 16%, #e3e8ef);
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
  overflow: visible;
}

.route-editor-top {
  position: sticky;
  top: 78px;
  z-index: 40;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--main-color) 14%, #e3e8ef);
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--main-color) 4%, #fff));
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.route-editor-top h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.12rem !important;
}

.route-editor-basic {
  display: grid;
  gap: 8px;
  margin: 12px;
  padding: 12px;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  background: #fff;
}

.route-editor-basic label {
  margin: 0;
  color: #475569;
  font-size: 0.84rem !important;
  font-weight: 850;
}

.route-editor-basic input,
.route-editor-basic textarea {
  min-height: 50px;
  font-size: 1.08rem !important;
}

.route-editor-updated {
  margin: 4px 0 0;
  color: #666;
}

.route-assist-note {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--main-color) 10%, #e5eaf1);
  border-radius: 8px;
  background: color-mix(in srgb, var(--main-color) 4%, #fff);
  color: #5f6b7c;
  font-size: 0.88rem !important;
  font-weight: 650;
  line-height: 1.5;
}

.route-editor-imports,
.route-editor-submit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.route-editor-imports .btn,
.route-editor-submit .btn {
  min-height: 44px;
}

.route-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 12px 10px;
  color: #1f3654;
  font-size: 0.95rem !important;
  font-weight: 900;
}

.route-section-title::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: var(--main-color);
}

.route-location-list {
  display: grid;
  gap: 14px;
}

.route-location-card {
  padding: 0;
  margin: 0 12px;
  overflow: visible;
  border-color: color-mix(in srgb, var(--main-color) 12%, #e3e8ef);
}

.route-location-head {
  position: sticky;
  top: 166px;
  z-index: 30;
  display: grid;
  gap: 10px;
  margin: -1px -1px 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--main-color) 16%, #dbe3ee);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--main-color) 4%, #fff));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.route-location-title {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.route-location-index {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--main-color);
  color: #fff;
  font-weight: 900;
}

.route-location-label,
.route-delivery-title span {
  color: #667386;
  font-size: 0.76rem !important;
  font-weight: 850;
}

.route-location-current,
.route-delivery-title strong {
  display: block;
  color: #111827;
  font-size: 0.98rem !important;
  font-weight: 900;
}

.route-location-name-field {
  margin: 0;
}

.route-location-name-field span {
  display: block;
}

.route-location-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.route-location-type label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
}

.route-field-label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: #4b5563;
  font-size: 0.82rem !important;
  font-weight: 850;
}

.route-field-label input {
  min-height: 50px;
  font-size: 1rem !important;
}

.route-location-head .remove-loc {
  justify-self: end;
  min-height: 40px;
  padding-inline: 14px;
}

.route-add-location {
  width: calc(100% - 24px);
  min-height: 50px;
  margin: 12px;
  border-radius: 999px;
}

.route-delivery-list {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.route-delivery-card {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--main-color) 10%, #e3e8ef);
  border-radius: 8px;
  background: #fff;
  overflow: visible;
}

.route-delivery-head {
  position: sticky;
  top: 272px;
  z-index: 29;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--main-color) 13%, #e3e8ef);
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--main-color) 3%, #fff));
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.06);
}

.route-delivery-title {
  display: block;
}

.route-delivery-name-field {
  margin: 0;
}

.route-delivery-head .remove-deliver-group {
  justify-self: end;
  min-height: 40px;
  padding-inline: 14px;
}

.route-shipper-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.route-shipper-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e6ebf2;
  border-radius: 8px;
  background: #fafbfc;
}

.route-shipper-row .remove-shipper {
  justify-self: end;
  min-height: 40px;
  padding-inline: 14px;
}

.route-add-delivery,
.route-add-shipper {
  width: calc(100% - 24px);
  min-height: 46px;
  margin: 0 12px 12px;
}

.route-add-delivery {
  width: calc(100% - 2px);
  margin: 0 1px 1px;
  border-radius: 0 0 8px 8px;
}

.route-order-section {
  margin-top: 4px;
}

.route-editor-submit {
  position: sticky;
  bottom: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom));
  z-index: 45;
  padding: 12px;
  border-top: 1px solid #e3e8ef;
  border-radius: 0 0 8px 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.1);
}

.route-editor-submit #save-route {
  order: 1;
}

.route-editor-submit #cancel-edit {
  order: 2;
}

@media (min-width: 420px) {
  .route-editor-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .route-editor-imports {
    min-width: 160px;
  }
}

.route-route-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--main-color) 12%, #e3e8ef);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
}

.route-empty-list {
  padding: 16px;
  color: #64748b;
  font-weight: 800;
  line-height: 1.6;
}

.route-route-summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 15px 16px;
  background:
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--main-color) 3%, #fff));
  font-weight: 700;
}

.route-route-summary strong {
  min-width: 0;
  color: #0f172a;
  font-size: 1rem !important;
  font-weight: 950;
}

.route-route-summary i {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #d9e4f2;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}

.route-route-summary i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #8393a8;
  border-bottom: 2px solid #8393a8;
  transform: translate(-50%, -62%) rotate(45deg);
}

.route-route-card details[open] .route-route-summary i::before {
  transform: translate(-50%, -35%) rotate(225deg);
}

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

.route-route-body {
  padding: 0 16px 16px;
  border-top: 1px solid #edf1f6;
}

.route-route-meta {
  display: grid;
  gap: 4px;
  margin: 12px 0;
}

.route-preview-box {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #e6ebf2;
  border-radius: 8px;
  background: #f8fafc;
}

.route-preview-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #555;
}

.route-preview-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: #444;
}

.route-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.route-card-actions .export {
  grid-column: 1 / -1;
}

.route-card-actions .btn {
  min-height: 42px;
}

/* Route admin redesign: Japanese mobile ops dashboard style */
body.route-admin-page {
  background: #e9eef4;
}

body.route-admin-page .page {
  width: min(430px, 100%);
  padding: 0 12px calc(var(--ad-placeholder-height) + 28px);
  background:
    linear-gradient(180deg, #17365d 0, #17365d 138px, #e9eef4 138px, #e9eef4 100%);
}

body.route-admin-page .route-admin-header {
  top: 0;
  margin: 0 -12px 12px;
  padding: 16px 18px 18px;
  border: 0;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(160deg, #102a48, #1c4b78 62%, #26708f);
  color: #fff;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.22);
}

body.route-admin-page .route-admin-header h1 {
  color: #fff;
  font-size: 1.22rem !important;
}

body.route-admin-page .route-admin-header p {
  color: rgba(255, 255, 255, 0.82);
}

body.route-admin-page .route-admin-title-row span {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

body.route-admin-page .route-admin-overview {
  margin-top: -2px;
}

body.route-admin-page .route-admin-overview > div {
  border: 0;
  background: #fff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

body.route-admin-page .route-admin-actions {
  gap: 12px;
}

body.route-admin-page .route-menu-btn {
  min-height: 126px;
  padding: 15px !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

body.route-admin-page .route-menu-btn span {
  color: #102033;
}

body.route-admin-page .route-menu-btn small {
  color: #667386;
}

body.route-admin-page .route-menu-primary {
  background:
    linear-gradient(160deg, #0c2440, #174a78 60%, #1c7c94) !important;
}

body.route-admin-page .route-menu-primary span {
  color: #fff;
}

body.route-admin-page .route-menu-primary small {
  color: rgba(255, 255, 255, 0.78);
}

body.route-admin-page .route-menu-btn::before {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

body.route-admin-page .route-menu-import,
body.route-admin-page .route-menu-edit,
body.route-admin-page .route-menu-return {
  border-top: 4px solid transparent !important;
}

body.route-admin-page .route-menu-import {
  border-top-color: #2f80c5 !important;
}

body.route-admin-page .route-menu-edit {
  border-top-color: #2f8f68 !important;
}

body.route-admin-page .route-menu-return {
  border-top-color: #b07a25 !important;
}

body.route-admin-page .route-menu-btn:active {
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

body.route-admin-page .route-import-panel,
body.route-admin-page .route-list-panel,
body.route-admin-page .route-editor-panel {
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

body.route-admin-page .route-list-head,
body.route-admin-page .route-editor-top {
  top: 82px;
  border-radius: 14px 14px 0 0;
}

body.route-admin-page .route-location-head {
  top: 170px;
}

body.route-admin-page .route-delivery-head {
  top: 276px;
}

body.route-admin-page .route-editor-basic,
body.route-admin-page .route-location-card,
body.route-admin-page .route-delivery-card,
body.route-admin-page .route-route-card {
  border: 1px solid #dfe7f1;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

body.route-admin-page .route-section-title {
  color: #17365d;
}

body.route-admin-page .route-field-label input,
body.route-admin-page .route-editor-basic input,
body.route-admin-page .route-editor-basic textarea {
  border-radius: 8px;
  border-color: #cfd9e6;
  background: #f9fbfd;
}

body.route-admin-page .route-editor-submit {
  border-radius: 14px;
  margin: 0 8px;
}

/* Release polish: logistics dashboard visual layer */
body[data-step="1"] {
  background: #e7edf4;
}

body[data-step="1"] .step-context-bar {
  background: #122b49;
  color: #fff;
  border-bottom: 0;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

body[data-step="1"] .step-context-label {
  color: rgba(255, 255, 255, 0.62);
}

body[data-step="1"] .step-context-item span:last-child {
  color: #fff;
}

body[data-step="1"] .page {
  width: min(430px, 100%);
  padding: 10px 12px calc(var(--ad-placeholder-height) + 108px);
  background:
    linear-gradient(180deg, #122b49 0, #173f66 172px, #e7edf4 172px, #e7edf4 100%);
}

.daily-hero {
  position: relative;
  margin: 0 -12px 14px;
  padding: 18px 18px 16px;
  color: #fff;
  overflow: hidden;
}

.daily-hero::before {
  content: "";
  position: absolute;
  right: -44px;
  top: 18px;
  width: 156px;
  height: 156px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.daily-hero-kicker,
.route-admin-kicker {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.72rem !important;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.daily-hero h1 {
  position: relative;
  margin: 0 0 7px;
  text-align: left;
  color: #fff;
  font-size: 1.62rem !important;
  font-weight: 950;
  line-height: 1.12;
}

.daily-hero p {
  position: relative;
  width: min(330px, 100%);
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem !important;
  font-weight: 750;
  line-height: 1.55;
}

.daily-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.daily-hero-grid > div {
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(10px);
}

.daily-hero-grid span {
  display: block;
  color: #8dd5ff;
  font-size: 0.72rem !important;
  font-weight: 950;
}

.daily-hero-grid strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 0.86rem !important;
  font-weight: 950;
  line-height: 1.25;
}

body[data-step="1"] .page > .card {
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

body[data-step="1"] .page > .card:not(.is-phase-hidden) > h2:not(.section-title),
body[data-step="1"][data-phase-index="1"] .page > .card:not(.is-phase-hidden) .card-head-inline .section-title {
  color: #102033;
}

body[data-step="1"] .phase-prompt {
  background: #ffffff;
  border-bottom: 1px solid #dfe7f1;
}

body[data-step="1"] .phase-prompt::before,
body[data-step="1"] .phase-prompt::after {
  background: #1c7c94;
}

body[data-step="1"] .phase-prompt-title {
  color: #1f2937;
}

body[data-step="1"] .phase-prompt-title::before {
  background: #9aa4b2;
}

body[data-step="1"] .bin-list {
  display: grid;
  gap: 10px;
}

body[data-step="1"] .bin-item {
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #f8fbfe;
  box-shadow: none;
}

body[data-step="1"] .bin-item.active {
  border-color: #1c7c94;
  background: #eef9fb;
  box-shadow: 0 10px 22px rgba(28, 124, 148, 0.18);
}

body[data-step="1"] .btn-link-lite {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid #d7e2ed;
  border-radius: 999px;
  background: #f2f7fb;
  color: #17365d;
  font-weight: 900;
}

body[data-step="1"] .btn-link-lite::after {
  content: ">";
  margin-left: 8px;
  color: #1c7c94;
  font-weight: 950;
}

body.route-admin-page {
  background: #dfe7f1;
}

body.route-admin-page .page {
  padding: 0 12px calc(var(--ad-placeholder-height) + 36px);
  background:
    linear-gradient(180deg, #091b30 0, #123a5f 196px, #dfe7f1 196px, #dfe7f1 100%);
}

body.route-admin-page .route-admin-header {
  margin: 0 -12px 10px;
  padding: 18px 18px 34px;
  border-radius: 0 0 22px 22px;
  background:
    linear-gradient(145deg, #071827 0%, #123a5f 58%, #15809a 100%);
  box-shadow: 0 18px 34px rgba(5, 16, 28, 0.28);
  overflow: hidden;
}

body.route-admin-page .route-admin-header::after {
  content: "";
  position: absolute;
  right: -40px;
  top: 20px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

body.route-admin-page .route-admin-title-row {
  position: relative;
  z-index: 1;
}

body.route-admin-page .route-admin-header h1 {
  text-align: left;
  font-size: 1.42rem !important;
  line-height: 1.12;
}

body.route-admin-page .route-admin-header p {
  position: relative;
  z-index: 1;
  width: min(320px, 100%);
  font-size: 0.88rem !important;
}

body.route-admin-page .route-admin-title-row span {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #91e6ff;
}

body.route-admin-page .route-admin-overview {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: -28px 0 14px;
  position: relative;
  z-index: 2;
}

body.route-admin-page .route-admin-overview > div {
  min-height: 78px;
  padding: 12px 10px;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}

body.route-admin-page .route-admin-overview span {
  color: #123a5f;
  font-size: 1.42rem !important;
}

body.route-admin-page .route-admin-overview small {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem !important;
  line-height: 1.35;
}

body.route-admin-page .route-admin-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.route-admin-page .route-menu-btn {
  min-height: 118px;
  align-content: end;
  border-radius: 10px !important;
}

body.route-admin-page .route-menu-primary {
  grid-column: 1 / -1;
  min-height: 132px;
  background:
    linear-gradient(145deg, #081827, #123a5f 62%, #15809a) !important;
}

body.route-admin-page .route-menu-btn::before {
  width: 46px;
  height: 46px;
  border-radius: 10px;
}

body.route-admin-page .route-menu-btn::after {
  top: 18px;
  right: 16px;
}

body.route-admin-page .route-menu-btn span {
  font-size: 1rem !important;
}

body.route-admin-page .route-menu-btn small {
  font-size: 0.74rem !important;
  line-height: 1.35;
}

.route-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom) + 18px);
  z-index: 220;
  width: min(392px, calc(100% - 28px));
  min-height: 48px;
  padding: 13px 16px;
  border-radius: 8px;
  background: #17365d;
  color: #fff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.28);
  font-size: 0.92rem !important;
  font-weight: 850;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.route-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.route-toast[data-type="error"] {
  background: #9f1d2b;
}

.route-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: end center;
  padding: 18px 14px calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom) + 18px);
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.route-dialog-backdrop.is-visible {
  opacity: 1;
}

.route-dialog {
  width: min(402px, 100%);
  padding: 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.28);
}

.route-dialog h2 {
  margin: 0 0 8px;
  color: #102033;
  font-size: 1.08rem !important;
  font-weight: 950;
  line-height: 1.35;
}

.route-dialog p {
  margin: 0 0 14px;
  color: #526173;
  font-size: 0.9rem !important;
  font-weight: 700;
  line-height: 1.6;
}

.route-dialog-input-label {
  display: grid;
  gap: 7px;
  margin: 0 0 14px;
  color: #475569;
  font-size: 0.84rem !important;
  font-weight: 850;
}

.route-dialog-input {
  min-height: 48px;
  border: 1px solid #cfd9e6;
  border-radius: 8px;
  background: #f9fbfd;
  font-size: 1rem !important;
}

.route-dialog-actions {
  display: grid;
  gap: 9px;
}

.route-dialog-action {
  min-height: 46px;
}

.route-dialog-primary {
  background: #17365d !important;
  color: #fff !important;
  border-color: #17365d !important;
}

.route-dialog-danger {
  background: #9f1d2b !important;
  color: #fff !important;
  border-color: #9f1d2b !important;
}

.route-dialog-secondary {
  background: #edf3f8 !important;
  color: #17365d !important;
  border-color: #d6e2ed !important;
}

.route-dialog-ghost {
  background: transparent !important;
  color: #667386 !important;
  border-color: #dfe7f1 !important;
}

.global-ad-placeholder {
  position: fixed !important;
  left: 50%;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  width: min(430px, 100%);
  height: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom));
  display: block;
  padding: 10px 24px calc(20px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid #e6e9f0;
  box-shadow: 0 -4px 18px rgba(22, 28, 45, 0.08);
  will-change: transform;
  z-index: 10020;
}

.global-safety-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 32px auto 14px;
  padding: 0 12px 4px;
  text-align: center;
}

.global-safety-notice .global-safety-reminder-visual {
  width: 100%;
  margin-bottom: 18px;
}

.global-safety-notice h2 {
  margin: 0 0 20px;
  color: #111827;
  font-size: 1.18rem;
  font-weight: 950;
  line-height: 1.45;
}

.global-safety-notice .global-safety-reminder-copy {
  margin-bottom: 0;
}

/* Step 1: keep the safety reminder visible without dominating the page. */
body.step1-basic-page .global-safety-notice {
  margin-top: 20px;
  padding-bottom: 0;
}

body.step1-basic-page .global-safety-notice .global-safety-reminder-visual {
  grid-template-columns: repeat(2, minmax(0, 98px));
  justify-content: center;
  column-gap: 18px;
  width: 90%;
  margin-bottom: 12px;
  padding: 10px;
  gap: 7px;
  border: 1px solid #e3eaf2;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(22, 28, 45, 0.06);
}

body.step1-basic-page .global-safety-notice .safety-visual-headline {
  grid-column: 1 / -1;
  text-align: center;
}

body.step1-basic-page .global-safety-notice .safety-visual-headline strong,
body.step1-basic-page .global-safety-notice .safety-visual-headline span {
  display: inline;
}

body.step1-basic-page .global-safety-notice .safety-visual-headline span {
  margin: 0 6px;
  font-size: 0.9rem;
}

body.step1-basic-page .global-safety-notice .safety-visual-headline small {
  display: block;
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
}

body.step1-basic-page .global-safety-notice .safety-visual-headline strong {
  font-size: 1.25rem;
}

body.step1-basic-page .global-safety-notice .safety-visual-picture {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-self: center;
  padding: 11px 11px 8px;
  border-width: 1px;
  border-color: #e3eaf2;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(22, 28, 45, 0.07);
}

body.step1-basic-page .global-safety-notice .safety-visual-picture img {
  border-radius: 9px;
}

body.step1-basic-page .global-safety-notice .safety-visual-picture span {
  order: initial;
  margin: 4px 0 0;
  font-size: 0.64rem;
}

body.step1-basic-page .global-safety-notice .global-safety-reminder-kicker {
  margin-bottom: 4px;
  font-size: 0.62rem;
}

body.step1-basic-page .global-safety-notice h2 {
  margin-bottom: 10px;
  font-size: 1rem !important;
  font-weight: 800;
}

body.step1-basic-page .global-safety-notice .global-safety-reminder-copy {
  width: 92%;
  padding: 12px 14px;
  border-radius: 14px;
}

body.step1-basic-page .global-safety-notice .global-safety-reminder-message {
  font-size: 0.82rem;
  line-height: 1.5;
}

body.step1-basic-page .global-safety-notice .global-safety-reminder-confirm {
  margin-top: 8px;
  padding-top: 8px;
  font-size: 0.74rem;
  line-height: 1.5;
}

.global-ad-placeholder-box {
  height: 100%;
  border: 1px dashed #cbd5e1;
  border-radius: 13px;
  background:
    repeating-linear-gradient(
      45deg,
      #fafbfd,
      #fafbfd 9px,
      #f4f6f9 9px,
      #f4f6f9 18px
    );
  color: #8a96a6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.global-safety-reminder {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.96) 0, rgba(240, 246, 252, 0.88) 32%, transparent 58%),
    #eaf1f8;
}

.global-safety-reminder.is-visible {
  display: flex;
}

body.safety-reminder-open {
  overflow: hidden;
}

body.safety-reminder-open .global-safety-reminder {
  padding-bottom: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom) + 16px);
}

.global-safety-reminder-panel {
  position: relative;
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 34px 32px;
  background: #fff;
  color: #111827;
  text-align: center;
  border: 1px solid rgba(207, 219, 232, 0.9);
  border-radius: 32px;
  box-shadow: 0 28px 80px rgba(25, 54, 87, 0.16), 0 4px 18px rgba(25, 54, 87, 0.06);
  overflow: hidden;
}

.global-safety-reminder-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #cf2638, #ee5964);
}

.global-safety-reminder-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
  padding: 7px 13px;
  border: 1px solid #d7e2ed;
  border-radius: 999px;
  background: #f8fafc;
  color: #415773;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.1;
}

.global-safety-reminder-mark span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8303d;
  box-shadow: 0 0 0 4px rgba(216, 48, 61, 0.1);
}

.global-safety-reminder-visual {
  display: grid;
  grid-template-columns: 0.9fr repeat(2, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 22px;
  padding: 18px 16px;
  border-radius: 22px;
  background: #ffe500;
  box-shadow: 0 12px 28px rgba(174, 133, 0, 0.18);
}

.global-safety-reminder-panel .global-safety-reminder-visual {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.global-safety-reminder-panel .safety-visual-headline {
  grid-column: 1 / -1;
  text-align: center;
}

.global-safety-reminder-panel .safety-visual-headline strong,
.global-safety-reminder-panel .safety-visual-headline span {
  display: inline;
}

.global-safety-reminder-panel .safety-visual-headline span {
  margin: 0 6px;
}

.global-safety-reminder-panel .safety-visual-headline small {
  display: block;
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
}

.global-safety-reminder-panel .safety-visual-headline strong {
  font-size: 1.25rem;
}

.global-safety-reminder-panel .safety-visual-headline span {
  font-size: 0.9rem;
}

.global-safety-reminder-panel .safety-visual-picture {
  width: 78%;
  justify-self: center;
}

.safety-visual-headline {
  color: #d91d2b;
  text-align: left;
  line-height: 1.05;
}

.safety-visual-headline strong,
.safety-visual-headline span,
.safety-visual-headline small {
  display: block;
}

.safety-visual-headline strong {
  font-size: 1.25rem;
  font-weight: 1000;
  letter-spacing: 0.05em;
}

.safety-visual-headline span {
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: 950;
  white-space: nowrap;
}

.safety-visual-headline small {
  margin-top: 9px;
  color: #282828;
  font-size: 0.52rem;
  font-weight: 850;
  line-height: 1.45;
}

.safety-visual-picture {
  padding: 6px 6px 5px;
  border: 2px solid #fff;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 16px rgba(92, 70, 0, 0.16);
}

.safety-visual-picture img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}

.safety-visual-picture span {
  display: block;
  margin-top: 7px;
  color: #1f2937;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.safety-visual-main {
  width: 176px;
}

.safety-visual-main svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(31, 41, 55, 0.12));
}

.safety-visual-main > span {
  display: inline-block;
  margin-top: 3px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff1f2;
  color: #c92334;
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.safety-pictogram-ring,
.safety-pictogram-slash {
  fill: #fff;
  stroke: #e11d2e;
  stroke-width: 12;
}

.safety-pictogram-slash {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}

.safety-pictogram-head,
.safety-pictogram-body,
.safety-pictogram-phone rect:first-child {
  fill: #252a32;
}

.safety-pictogram-phone rect:last-child {
  fill: #fff;
}

.safety-visual-scenes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin-top: 10px;
}

.safety-visual-scenes span {
  padding: 7px 5px;
  border: 1px solid #e1e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #42546b;
  font-size: 0.68rem;
  font-weight: 850;
}

.safety-visual-phone-key {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  margin: 0 auto 2px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff1f2;
  color: #c82333;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.safety-visual-phone-key svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.safety-visual-phone-key circle {
  fill: currentColor;
  stroke: none;
}

.safety-visual-item {
  padding: 10px 6px 8px;
  border: 1px solid #e4ebf3;
  border-radius: 18px;
  background: linear-gradient(155deg, #fff 12%, #f5f8fc 100%);
  box-shadow: 0 8px 20px rgba(30, 58, 95, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.safety-visual-item svg {
  display: block;
  width: 100%;
  max-width: 74px;
  height: auto;
  margin: 0 auto 5px;
}

.safety-visual-item span {
  display: block;
  color: #465b74;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.safety-visual-item:nth-child(2) {
  background: linear-gradient(155deg, #fff 12%, #fff9ef 100%);
}

.safety-visual-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 24px rgba(30, 58, 95, 0.1);
}

.safety-visual-icon {
  filter: drop-shadow(0 5px 10px rgba(15, 45, 82, 0.08));
}

.safety-visual-ban-ring,
.safety-visual-ban-line {
  fill: none;
  stroke: #d8303d;
  stroke-width: 5;
  stroke-linecap: round;
}

.safety-visual-ban-ring {
  fill: #fff;
}

.safety-visual-person,
.safety-visual-bike,
.safety-visual-wheel {
  fill: none;
  stroke: var(--main-color, #1e3a5f);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.safety-visual-person-bold {
  stroke-width: 5;
}

.safety-visual-person-head,
.safety-visual-wheel-fill {
  fill: var(--main-color, #1e3a5f);
}

.safety-visual-mini-phone {
  fill: #edf4ff;
  stroke: var(--main-color, #1e3a5f);
  stroke-width: 2;
}

.safety-visual-car {
  fill: #edf4ff;
  stroke: var(--main-color, #1e3a5f);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.safety-visual-car-window {
  fill: #fff;
  stroke: var(--main-color, #1e3a5f);
  stroke-width: 2;
  stroke-linejoin: round;
}

.safety-visual-helmet {
  fill: #edf4ff;
  stroke: var(--main-color, #1e3a5f);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.safety-visual-box {
  fill: #fff7e8;
  stroke: var(--main-color, #1e3a5f);
  stroke-width: 2.5;
}

.safety-visual-box-detail {
  fill: none;
  stroke: #c58a2a;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.safety-visual-ban-line {
  stroke-width: 6.5;
  filter: drop-shadow(0 1px 0 #fff);
}

.safety-visual-steering {
  fill: none;
  stroke: var(--main-color, #1e3a5f);
  stroke-width: 2.5;
}

.global-safety-reminder-kicker {
  margin: 0 0 8px;
  color: #d8303d;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.global-safety-reminder h2 {
  max-width: 310px;
  margin: 0 0 22px;
  color: #111827;
  font-size: 1.42rem !important;
  font-weight: 950;
  line-height: 1.45;
  letter-spacing: 0;
}

.global-safety-reminder-copy {
  width: 100%;
  margin: 0 0 24px;
  padding: 19px 18px;
  border: 1px solid #e3eaf2;
  border-radius: 18px;
  background: #f8fafc;
}

.global-safety-reminder-message,
.global-safety-reminder-confirm {
  margin: 0;
  color: #172235;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0;
  text-align: center;
}

.global-safety-reminder-confirm {
  position: relative;
  margin-top: 14px;
  padding-top: 14px;
  color: #5b6b7f;
  font-size: 0.84rem;
  font-weight: 600;
}

.global-safety-reminder-confirm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: #e1e8f0;
}

.global-safety-reminder-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  min-width: 220px;
  min-height: 54px;
  padding: 0 26px;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--main-color, #1e3a5f);
  color: var(--button-text-color, #fff);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--main-color, #1e3a5f) 24%, transparent);
  font-size: 0.98rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.global-safety-reminder-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 13px 26px color-mix(in srgb, var(--main-color, #1e3a5f) 28%, transparent);
}

.global-safety-reminder-primary:active {
  transform: translateY(1px);
}

.global-safety-reminder-check {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.9;
}

.global-safety-reminder-check::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 4px;
  left: 5px;
  top: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.global-safety-reminder-primary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--main-color, #1e3a5f) 28%, transparent);
  outline-offset: 3px;
}

.global-safety-reminder-ad {
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  margin-top: 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 13px;
  background:
    repeating-linear-gradient(
      45deg,
      #fafbfd,
      #fafbfd 9px,
      #f4f6f9 9px,
      #f4f6f9 18px
    );
  color: #8a96a6;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (max-width: 520px) {
  .global-safety-reminder {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .global-safety-reminder-panel {
    flex: 0 0 auto;
    width: 100%;
    min-height: calc(100dvh - var(--ad-placeholder-height) - env(safe-area-inset-bottom) - 16px);
    padding: max(28px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .global-safety-reminder-visual {
    grid-template-columns: 0.85fr repeat(2, 1fr);
    width: 100%;
    margin-bottom: 18px;
    padding: 15px 12px;
  }

  .global-safety-reminder-copy {
    margin-top: 6px;
  }

  .global-safety-reminder-ad {
    margin-top: auto;
    transform: translateY(4px);
  }
}

@media (min-width: 521px) and (max-height: 780px) {
  .global-safety-reminder-panel {
    padding: 24px 32px 22px;
  }

  .global-safety-reminder-mark {
    margin-bottom: 10px;
  }

  .global-safety-reminder-visual {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px 12px;
  }

  .safety-visual-headline strong {
    font-size: 1.05rem;
  }

  .safety-visual-picture img {
    max-height: 78px;
  }

  .global-safety-reminder-kicker {
    margin-bottom: 5px;
  }

  .global-safety-reminder h2 {
    margin-bottom: 14px;
    font-size: 1.28rem !important;
  }

  .global-safety-reminder-copy {
    margin-bottom: 16px;
    padding: 13px 16px;
  }

  .global-safety-reminder-confirm {
    margin-top: 9px;
    padding-top: 9px;
  }

  .global-safety-reminder-primary {
    min-height: 50px;
    margin-top: 5px;
  }

  .global-safety-reminder-ad {
    min-height: 44px;
    margin-top: 12px;
  }
}

.bin-item.active::before {
  content: "●";
}

/* Readability reset: Hacologi / Hacobu logistics SaaS, Digital Agency dashboard, Smart QR */
body[data-step="1"] {
  background: #f3f6fa;
}

body[data-step="1"] .step-context-bar {
  background: #fff;
  color: #102033;
  border-bottom: 1px solid #dfe7f1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

body[data-step="1"] .step-context-label {
  color: #64748b;
}

body[data-step="1"] .step-context-item span:last-child {
  color: #102033;
}

body[data-step="1"] .page {
  width: min(430px, 100%);
  padding: 12px 12px calc(var(--ad-placeholder-height) + 108px);
  background: #f3f6fa;
}

body[data-step="1"] .daily-hero {
  display: none !important;
}

body[data-step="1"] .phase-prompt {
  margin: 0 0 10px;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

body[data-step="1"] .page > .card {
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

body[data-step="1"] .page > .card + .card {
  margin-top: 10px;
}

body[data-step="1"] .bin-item {
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #fff;
}

body.route-admin-page {
  background: #eef3f8;
}

body.route-admin-page .page {
  width: min(430px, 100%);
  padding: 12px 12px calc(var(--ad-placeholder-height) + 36px);
  background: #eef3f8;
}

body.route-admin-page .route-admin-header {
  position: relative;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid rgba(18, 58, 95, 0.14);
  border-radius: 12px;
  background: #123a5f;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

body.route-admin-page .route-admin-header::after {
  display: none;
}

body.route-admin-page .route-admin-kicker {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem !important;
  letter-spacing: 0.06em;
}

body.route-admin-page .route-admin-header h1 {
  margin: 0;
  color: #fff;
  text-align: left;
  font-size: 1.28rem !important;
  line-height: 1.2;
}

body.route-admin-page .route-admin-header p {
  width: auto;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem !important;
  line-height: 1.55;
}

body.route-admin-page .route-admin-title-row span {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #d6f4ff;
  font-size: 0.72rem !important;
}

body.route-admin-page .route-admin-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  position: static;
  z-index: auto;
}

body.route-admin-page .route-admin-overview > div {
  min-height: 64px;
  padding: 10px 8px;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05);
}

body.route-admin-page .route-admin-overview span {
  color: #123a5f;
  font-size: 1.12rem !important;
  line-height: 1;
}

body.route-admin-page .route-admin-overview small {
  display: block;
  margin-top: 6px;
  color: #526173;
  font-size: 0.66rem !important;
  font-weight: 800;
  line-height: 1.35;
}

body.route-admin-page .route-admin-actions,
body.route-admin-page .route-import-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.route-admin-page .route-menu-btn {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  min-height: 76px;
  padding: 12px 38px 12px 12px !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #102033 !important;
  text-align: left;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

body.route-admin-page .route-menu-primary {
  grid-column: auto;
  min-height: 82px;
  border-left: 4px solid #123a5f !important;
}

body.route-admin-page .route-menu-btn::before {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #edf5fb;
  color: #123a5f;
  box-shadow: none;
}

body.route-admin-page .route-menu-primary::before {
  background: #123a5f;
  color: #fff;
}

body.route-admin-page .route-menu-btn::after {
  top: 50%;
  right: 14px;
  color: #8aa0b7;
  transform: translateY(-50%);
}

body.route-admin-page .route-menu-btn span {
  grid-column: 2;
  color: #102033;
  font-size: 0.95rem !important;
  line-height: 1.25;
}

body.route-admin-page .route-menu-btn small {
  grid-column: 2;
  margin-top: 4px;
  color: #526173;
  font-size: 0.72rem !important;
  line-height: 1.35;
}

/* My Route full-page polish: no overlapping sticky bars */
body.route-admin-page {
  --route-navy: #123a5f;
  --route-ink: #102033;
  --route-muted: #637083;
  --route-line: #dbe5ef;
  --route-soft: #f4f7fb;
  background: #e9eff5;
}

body.route-admin-page .page {
  min-height: 100dvh;
  padding: 12px 12px calc(var(--ad-placeholder-height) + 32px);
  background: #e9eff5;
}

body.route-admin-page .route-admin-header {
  position: relative !important;
  top: auto !important;
  z-index: 1;
  margin: 0 0 10px;
  padding: 14px 15px;
  border: 1px solid rgba(18, 58, 95, 0.18);
  border-radius: 8px;
  background: var(--route-navy);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
  backdrop-filter: none;
}

body.route-admin-page .route-admin-title-row {
  align-items: flex-start;
}

body.route-admin-page .route-admin-title-row span {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  letter-spacing: 0;
}

body.route-admin-page .route-admin-header p {
  max-width: 20rem;
}

body.route-admin-page .route-admin-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

body.route-admin-page .route-admin-overview > div {
  min-height: 58px;
  padding: 9px 8px;
  border-color: var(--route-line);
  border-radius: 8px;
}

body.route-admin-page .route-admin-actions,
body.route-admin-page .route-import-actions {
  gap: 8px;
}

body.route-admin-page .route-menu-btn {
  min-height: 70px;
  border-radius: 8px !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
}

body.route-admin-page .route-menu-btn:active {
  transform: translateY(1px);
}

body.route-admin-page .route-import-panel,
body.route-admin-page .route-list-panel,
body.route-admin-page .route-editor-panel {
  margin-top: 10px;
  border: 1px solid var(--route-line);
  border-radius: 8px;
  background: var(--route-soft);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  overflow: visible;
}

body.route-admin-page .route-import-panel {
  padding: 12px;
}

body.route-admin-page .route-import-head {
  margin-bottom: 10px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--route-line);
}

body.route-admin-page .route-import-head h2,
body.route-admin-page .route-list-head h2,
body.route-admin-page .route-editor-top h2 {
  color: var(--route-ink);
  font-size: 1.04rem !important;
  line-height: 1.3;
}

body.route-admin-page .route-import-head p,
body.route-admin-page .route-list-head p,
body.route-admin-page .route-editor-updated {
  color: var(--route-muted);
  font-size: 0.78rem !important;
  line-height: 1.5;
}

body.route-admin-page .route-list-head,
body.route-admin-page .route-editor-top,
body.route-admin-page .route-location-head,
body.route-admin-page .route-delivery-head {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none;
  backdrop-filter: none;
}

body.route-admin-page .route-list-head,
body.route-admin-page .route-editor-top {
  margin: 0;
  padding: 12px;
  border-bottom: 1px solid var(--route-line);
  border-radius: 8px 8px 0 0;
  background: #fff;
}

body.route-admin-page .route-editor-basic,
body.route-admin-page .route-location-card,
body.route-admin-page .route-delivery-card,
body.route-admin-page .route-route-card {
  border: 1px solid var(--route-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05);
}

body.route-admin-page .route-editor-basic {
  gap: 7px;
  margin: 10px;
  padding: 12px;
}

body.route-admin-page .route-editor-basic input,
body.route-admin-page .route-editor-basic textarea,
body.route-admin-page .route-field-label input {
  min-height: 48px;
  border: 1px solid #cfd9e6;
  border-radius: 8px;
  background: #f8fafc;
}

body.route-admin-page .route-assist-note {
  margin: 8px 0 0;
  border-color: #dbe5ef;
  border-radius: 8px;
  background: #f5f8fb;
  color: #405165;
}

body.route-admin-page .route-section-title {
  margin: 14px 10px 8px;
  color: var(--route-navy);
  font-size: 0.9rem !important;
}

body.route-admin-page .route-section-title::before {
  width: 4px;
  height: 18px;
  background: #1f6f8b;
}

body.route-admin-page .route-location-list {
  gap: 10px;
}

body.route-admin-page .route-location-card {
  margin: 0 10px;
  padding: 0;
  overflow: hidden;
}

body.route-admin-page .route-location-head {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--route-line);
  border-radius: 8px 8px 0 0;
  background: #fff;
}

body.route-admin-page .route-location-title {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
}

body.route-admin-page .route-location-index {
  width: 28px;
  height: 28px;
  background: var(--route-navy);
  font-size: 0.85rem !important;
}

body.route-admin-page .route-location-current,
body.route-admin-page .route-delivery-title strong {
  color: var(--route-ink);
  font-size: 0.92rem !important;
  line-height: 1.35;
}

body.route-admin-page .route-location-name-field {
  margin: 0;
}

body.route-admin-page .route-location-name-field span {
  display: block;
  margin: 0 0 7px;
  color: var(--route-navy);
  font-size: 0.96rem !important;
  font-weight: 950;
}

body.route-admin-page .route-location-name-field input {
  width: 100%;
}

body.route-admin-page .route-location-type {
  gap: 8px;
}

body.route-admin-page .route-location-type label {
  min-height: 40px;
  border-color: var(--route-line);
  border-radius: 999px;
  background: #f9fbfd;
}

body.route-admin-page .route-location-head .remove-loc,
body.route-admin-page .route-delivery-head .remove-deliver-group,
body.route-admin-page .route-shipper-row .remove-shipper {
  justify-self: stretch;
  min-height: 40px;
  border-radius: 999px;
  background: #f4f6f8;
  color: #344256;
  box-shadow: none;
}

body.route-admin-page .route-delivery-list {
  gap: 10px;
  padding: 10px;
}

body.route-admin-page .route-delivery-card {
  gap: 0;
  overflow: hidden;
}

body.route-admin-page .route-delivery-head {
  display: grid;
  gap: 9px;
  padding: 12px;
  border-bottom: 1px solid var(--route-line);
  border-radius: 8px 8px 0 0;
  background: #fbfdff;
}

body.route-admin-page .route-delivery-title {
  display: block;
}

body.route-admin-page .route-delivery-name-field {
  margin: 0;
}

body.route-admin-page .route-delivery-name-field span {
  display: block;
  margin: 0 0 7px;
  color: var(--route-navy);
  font-size: 0.94rem !important;
  font-weight: 950;
}

body.route-admin-page .route-delivery-name-field input {
  width: 100%;
}

body.route-admin-page .route-shipper-list {
  gap: 8px;
  padding: 10px;
}

body.route-admin-page .route-shipper-row {
  gap: 8px;
  padding: 10px;
  border-color: #e4ebf2;
  border-radius: 8px;
  background: #fbfcfe;
}

body.route-admin-page .route-add-location,
body.route-admin-page .route-add-delivery,
body.route-admin-page .route-add-shipper {
  min-height: 46px;
  border-radius: 999px;
  background: #eef4f9;
  color: var(--route-navy);
  box-shadow: none;
}

body.route-admin-page .route-add-location {
  width: calc(100% - 20px);
  margin: 10px;
}

body.route-admin-page .route-add-delivery {
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  border-radius: 999px;
}

body.route-admin-page .route-add-shipper {
  width: auto;
  margin: 0 10px 10px;
}

body.route-admin-page .route-editor-submit {
  position: sticky;
  bottom: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom));
  z-index: 40;
  gap: 8px;
  margin: 12px 8px 0;
  padding: 10px;
  border: 1px solid rgba(219, 229, 239, 0.9);
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.1);
}

body.route-admin-page .route-editor-submit .btn {
  min-height: 46px;
  border-radius: 999px;
}

body.route-admin-page .route-editor-submit #save-route {
  background: var(--route-navy) !important;
}

body.route-admin-page .route-editor-submit #cancel-edit {
  background: #f3f5f7 !important;
  color: var(--route-ink) !important;
  border: 1px solid var(--route-line) !important;
}

body.route-admin-page .route-admin-list {
  gap: 10px;
  padding: 0;
  margin: 10px 0 0;
}

body.route-admin-page .route-route-summary {
  padding: 13px 14px;
  background: #fff;
}

body.route-admin-page .route-card-actions {
  gap: 8px;
}

body.route-admin-page .route-editor-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

body.route-admin-page .route-editor-tab {
  min-height: 38px;
  padding: 7px 6px;
  border: 1px solid var(--route-line);
  border-radius: 999px;
  background: #f5f8fb;
  color: var(--route-muted);
  font: inherit;
  font-size: 0.78rem !important;
  font-weight: 900;
  cursor: pointer;
}

body.route-admin-page .route-editor-tab.is-active {
  border-color: var(--route-navy);
  background: var(--route-navy);
  color: #fff;
}

body.route-admin-page .route-editor-step-panel {
  display: none;
}

body.route-admin-page .route-editor-step-panel.is-active {
  display: block;
}

body.route-admin-page .route-step-lead {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  margin: 10px 10px 0;
  padding: 12px;
  border: 1px solid var(--route-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05);
}

body.route-admin-page .route-step-lead > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #eaf2f8;
  color: var(--route-navy);
  font-weight: 950;
}

body.route-admin-page .route-step-lead strong {
  display: block;
  color: var(--route-ink);
  font-size: 0.96rem !important;
  line-height: 1.35;
}

body.route-admin-page .route-step-lead small {
  display: block;
  margin-top: 3px;
  color: var(--route-muted);
  font-size: 0.76rem !important;
  font-weight: 750;
  line-height: 1.45;
}

body.route-admin-page .route-editor-submit {
  grid-template-columns: 1fr 1fr;
}

body.route-admin-page .route-editor-submit [hidden] {
  display: none !important;
}

body.route-admin-page .route-editor-submit #save-route:not([hidden]) {
  grid-column: 1;
}

body.route-admin-page .route-editor-submit #cancel-edit {
  grid-column: auto;
}

body.route-admin-page .route-editor-submit #route-editor-next {
  background: var(--route-navy) !important;
}

body.route-admin-page .route-editor-submit #route-editor-prev {
  background: #f3f5f7 !important;
  color: var(--route-ink) !important;
  border: 1px solid var(--route-line) !important;
}

body.route-editor-open .route-admin-header,
body.route-editor-open .route-admin-overview,
body.route-editor-open .route-admin-actions {
  display: none !important;
}

body.route-editor-open .route-editor-panel {
  margin-top: 0;
}

/* Route screen navigation discipline: fixed titles, no mid-page starts */
body.route-admin-page .route-admin-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 80;
  margin: 0 0 10px;
}

body.route-admin-page .route-editor-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  border-bottom: 1px solid var(--route-line);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

body.route-admin-page .route-list-head {
  position: sticky !important;
  top: 74px !important;
  z-index: 70 !important;
}

body.route-list-open .route-admin-overview,
body.route-list-open .route-admin-actions,
body.route-import-open .route-admin-overview {
  display: none !important;
}

body.route-list-open .route-list-panel,
body.route-import-open .route-import-panel {
  margin-top: 10px;
}

/* Route list must behave as its own screen */
body.route-list-open .route-admin-header,
body.route-list-open .route-admin-overview,
body.route-list-open .route-admin-actions,
body.route-import-open .route-admin-header,
body.route-import-open .route-admin-overview,
body.route-import-open .route-admin-actions {
  display: none !important;
}

body.route-list-open .page,
body.route-import-open .page,
body.route-editor-open .page {
  padding-top: 0;
}

body.route-list-open .route-list-panel {
  margin: 0 0 10px;
  padding: 0 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.route-list-open .route-list-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 95 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px 12px 13px;
  border: 1px solid rgba(18, 58, 95, 0.14);
  border-radius: 0 0 10px 10px;
  background: #123a5f;
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

body.route-list-open .route-list-head h2 {
  margin: 0 0 3px;
  color: #fff;
  font-size: 1.05rem !important;
}

body.route-list-open .route-list-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.75rem !important;
  line-height: 1.45;
}

body.route-list-open .route-list-head .btn {
  width: auto;
  min-width: 76px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
  font-size: 0.78rem !important;
}

body.route-list-open .route-list-guide {
  margin: 8px 10px 6px;
  color: #1f3654;
}

body.route-list-open .route-admin-list {
  gap: 4px;
  margin: 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.route-list-open .route-route-card {
  position: relative;
  margin-bottom: 0 !important;
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

body.route-list-open .route-route-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: #b8cbe0;
}

body.route-list-open .route-route-card + .route-route-card {
  margin-top: 0;
}

body.route-list-open .route-route-card details[open] {
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: #fbfdff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.055);
}

body.route-list-open .route-route-card.is-open + .route-route-card {
  border-top-color: transparent;
}

body.route-list-open .route-route-summary:hover {
  background: rgba(18, 58, 95, 0.035);
}

body.route-list-open .route-route-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 6px 10px 6px 13px;
  border-bottom: 0;
  background: transparent;
}

body.route-list-open .route-route-card details[open] .route-route-summary {
  min-height: 58px;
  padding: 6px 10px 6px 13px;
}

body.route-list-open .route-route-summary-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body.route-list-open .route-route-summary strong {
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  font-size: 1rem !important;
}

body.route-list-open .route-route-summary strong span {
  display: none;
}

body.route-list-open .route-route-summary strong b {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.route-list-open .route-route-summary-desc {
  display: block;
  min-height: 1.45em;
  margin-top: 4px;
  overflow: hidden;
  color: #4b5d73;
  font-size: 0.84rem !important;
  font-weight: 500;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.route-list-open .route-route-summary-meta {
  display: grid;
  gap: 0;
  overflow: hidden;
  color: #9aa6b5;
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.18;
}

body.route-list-open .route-route-summary-meta-row {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

body.route-list-open .route-route-summary-meta-row b {
  color: #a9b3c1;
  font-size: inherit;
  font-weight: 500;
}

body.route-list-open .route-route-summary-meta-row time {
  overflow: hidden;
  color: #8f9cad;
  font-size: inherit;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.route-list-open .route-route-summary i {
  position: relative;
  justify-self: end;
}

body.route-list-open .route-route-body {
  padding: 10px 14px 14px;
  border-top: 1px solid #edf1f6;
}

body.route-list-open .route-route-card details:not([open]) .route-route-body {
  display: none;
}

body.route-list-open .route-route-meta {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}

body.route-list-open .route-route-desc:empty {
  display: none;
}

body.route-list-open .route-route-desc {
  color: #4b5d73;
  font-size: 0.84rem;
  line-height: 1.45;
}

body.route-list-open .route-route-dates {
  display: grid;
  gap: 4px;
}

body.route-list-open .route-route-dates span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
}

body.route-list-open .route-route-dates b {
  flex: 0 0 auto;
  color: #8795a8;
  font-size: 0.72rem;
  font-weight: 700;
}

body.route-list-open .route-preview-box {
  margin-bottom: 10px;
  padding: 0;
  border: 1px solid #edf2f7;
  border-left: 4px solid #b8cbe0;
  border-radius: 8px;
  background: #fbfdff;
}

body.route-list-open .route-preview-summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 38px 9px 13px;
  color: #344762;
  font-size: 0.9rem;
  font-weight: 850;
  list-style: none;
}

body.route-list-open .route-preview-summary::-webkit-details-marker {
  display: none;
}

body.route-list-open .route-preview-summary::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #8290a3;
  border-bottom: 2px solid #8290a3;
  transform: translateY(-58%) rotate(45deg);
}

body.route-list-open .route-preview-box[open] .route-preview-summary::after {
  transform: translateY(-35%) rotate(225deg);
}

body.route-list-open .route-preview-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 8px 9px 10px;
  list-style: none;
}

body.route-list-open .route-preview-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #eef3f8;
  border-radius: 8px;
  background: #fff;
}

body.route-list-open .route-preview-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #eef3fb;
  color: #60728a;
  font-size: 0.72rem;
  font-weight: 800;
}

body.route-list-open .route-preview-row.is-location span {
  background: #123b86;
  color: #fff;
  font-weight: 900;
}

body.route-list-open .route-preview-row b {
  min-width: 0;
  overflow: hidden;
  color: #243247;
  font-size: 0.86rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.route-list-open .route-preview-more {
  padding: 2px 8px;
  color: #8795a8;
  font-size: 0.78rem;
}

body.route-list-open .route-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

body.route-list-open .route-card-actions .export {
  grid-column: auto;
}

body.route-list-open .route-card-actions .btn {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 999px;
  box-shadow: none;
  font-size: 0.86rem !important;
}

body.route-list-open .route-card-actions .export {
  width: auto;
  min-width: 64px;
  background: #eef4f9;
  color: var(--route-navy);
}

body.route-list-open .route-share-panel[hidden] {
  display: none !important;
}

body.route-list-open .route-share-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--route-line);
  border-radius: 8px;
  background: #f8fafc;
}

body.route-list-open .route-share-link {
  max-height: 64px;
  overflow: auto;
  word-break: break-all;
  font-size: 0.72rem !important;
}

/* Unified dark page heads for route sub screens */
body.route-admin-page .route-admin-header,
body.route-list-open .route-list-head,
body.route-import-open .route-import-head,
body.route-editor-open .route-editor-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 95 !important;
  margin: 0 0 10px;
  padding: 14px 15px;
  border: 1px solid rgba(18, 58, 95, 0.18);
  border-radius: 8px;
  background: #123a5f;
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

body.route-list-open .route-list-head,
body.route-import-open .route-import-head,
body.route-editor-open .route-editor-top {
  display: grid;
  gap: 10px;
}

body.route-list-open .route-list-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

body.route-admin-page .route-admin-header h1,
body.route-list-open .route-list-head h2,
body.route-import-open .route-import-head h2,
body.route-editor-open .route-editor-top h2 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.16rem !important;
  font-weight: 950;
  line-height: 1.25;
  text-align: left;
}

body.route-admin-page .route-admin-kicker,
body.route-list-open .route-list-head h2::before,
body.route-import-open .route-import-head h2::before,
body.route-editor-open .route-editor-top h2::before {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.66rem !important;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
}

body.route-list-open .route-list-head h2::before {
  content: "ROUTE LIST";
}

body.route-import-open .route-import-head h2::before {
  content: "IMPORT";
}

body.route-editor-open .route-editor-top h2::before {
  content: "ROUTE EDITOR";
}

body.route-list-open .route-list-head p,
body.route-import-open .route-import-head p,
body.route-editor-open .route-editor-updated {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem !important;
  font-weight: 750;
  line-height: 1.45;
}

body.route-list-open .route-list-head .btn {
  min-width: 72px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
  font-size: 0.74rem !important;
  font-weight: 900;
}

body.route-import-open .route-import-panel {
  padding: 0 0 10px;
  border: 0;
  border-radius: 0;
  background: #e9eff5;
  box-shadow: none;
}

body.route-import-open .route-import-head {
  padding: 14px 15px;
  border-bottom: 0;
}

body.route-import-open .route-import-actions {
  margin: 0;
}

body.route-editor-open .route-editor-top {
  border-radius: 8px;
  border-bottom: 1px solid rgba(18, 58, 95, 0.18);
}

body.route-editor-open .route-editor-tabs {
  margin-top: 2px;
}

body.route-editor-open .route-editor-tab {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
}

body.route-editor-open .route-editor-tab.is-active {
  border-color: #fff;
  background: #fff;
  color: #123a5f;
}

/* Editor tabs as forward steps */
body.route-editor-open .route-editor-tabs {
  gap: 0;
  margin-top: 8px;
}

body.route-editor-open .route-editor-tab {
  position: relative;
  min-height: 38px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.78);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 12px 50%);
}

body.route-editor-open .route-editor-tab:first-child {
  border-radius: 999px 0 0 999px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

body.route-editor-open .route-editor-tab:last-child {
  border-radius: 0 999px 999px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
}

body.route-editor-open .route-editor-tab.is-active {
  background: #fff;
  color: #123a5f;
}

/* Head title: Japanese + English inline */
body.route-admin-page .route-admin-kicker,
body.route-list-open .route-list-head h2::before,
body.route-import-open .route-import-head h2::before,
body.route-editor-open .route-editor-top h2::before {
  display: inline-block !important;
  margin: 0 8px 0 0 !important;
  vertical-align: middle;
}

body.route-list-open .route-list-head h2,
body.route-import-open .route-import-head h2,
body.route-editor-open .route-editor-top h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.route-admin-page .route-inline-en {
  display: inline-block;
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.66rem !important;
  font-weight: 950;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

/* Final alignment: every route page head uses the same box model */
body.route-admin-page .page {
  width: min(430px, 100%);
  padding: 12px 12px calc(var(--ad-placeholder-height) + 32px);
  background: #e9eff5;
}

body.route-admin-page .route-admin-header,
body.route-list-open .route-list-head,
body.route-import-open .route-import-head,
body.route-editor-open .route-editor-top {
  width: 100%;
  min-height: 88px;
  margin: 0 0 10px !important;
  padding: 14px 15px !important;
  border-radius: 8px !important;
  transform: none !important;
}

body.route-list-open .page,
body.route-import-open .page,
body.route-editor-open .page {
  padding-top: 12px;
}

body.route-list-open .route-list-panel,
body.route-import-open .route-import-panel,
body.route-editor-open .route-editor-panel {
  margin-top: 0 !important;
}

body.route-list-open .route-list-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.route-admin-page .route-admin-actions {
  display: grid;
  gap: 14px;
}

body.route-admin-page .route-action-group {
  display: grid;
  gap: 8px;
}

body.route-admin-page .route-return-group {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid #cfd9e6;
}

body.route-admin-page .route-return-group .route-menu-btn {
  min-height: 64px;
  background: #f7f9fb !important;
  border-style: dashed !important;
  box-shadow: none;
}

body.route-admin-page .route-return-group .route-menu-btn::before {
  background: #f0f3f6;
  color: #526173;
}

body.route-admin-page .route-return-group .route-menu-btn span {
  color: #344256;
}

body.route-admin-page .route-return-group .route-menu-btn small {
  color: #667386;
}

body.route-editor-open .route-editor-panel,
body.route-list-open .route-list-panel,
body.route-import-open .route-import-panel {
  position: relative;
}

body.route-editor-open .route-editor-panel {
  padding-top: 124px;
}

body.route-list-open .route-list-panel,
body.route-import-open .route-import-panel {
  padding-top: 98px;
}

body.route-editor-open .route-editor-top,
body.route-list-open .route-list-head,
body.route-import-open .route-import-head {
  position: fixed !important;
  left: 50%;
  top: 0 !important;
  width: min(406px, calc(100% - 24px)) !important;
  transform: translateX(-50%) !important;
}

/* Shared sub-screen home button */
body.route-list-open .route-list-head,
body.route-import-open .route-import-head,
body.route-editor-open .route-editor-top {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

body.route-editor-open .route-editor-tabs {
  grid-column: 1 / -1;
}

body.route-admin-page .route-screen-home-btn,
body.route-list-open .route-list-head .route-screen-home-btn,
body.route-list-open .route-list-head #btn-close-route-list {
  width: auto;
  min-width: 72px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
  font-size: 0.74rem !important;
  font-weight: 900;
  line-height: 1;
}

body.route-import-open #btn-cancel-import {
  display: none !important;
}

/* Top-home action lives at the bottom, not inside page heads */
body.route-admin-page .route-screen-home-btn,
body.route-list-open .route-list-head #btn-close-route-list {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 58px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
  font-size: 0.72rem !important;
  font-weight: 900;
  line-height: 1;
}

body.route-admin-page .route-bottom-home {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom) + 10px);
  z-index: 150;
  display: none;
  width: min(406px, calc(100% - 24px));
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #dbe5ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #123a5f;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  font-weight: 950;
  transform: translateX(-50%);
}

body.route-list-open .route-bottom-home,
body.route-import-open .route-bottom-home,
body.route-editor-open .route-bottom-home {
  display: none;
}

body.route-editor-open .route-editor-submit {
  bottom: auto !important;
}

/* Editor action hierarchy: primary action first, secondary actions below */
body.route-admin-page .route-editor-submit {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 10px !important;
}

body.route-admin-page .route-editor-submit #route-editor-next,
body.route-admin-page .route-editor-submit #save-route {
  grid-column: 1 / -1 !important;
  order: 1 !important;
  min-height: 48px;
}

body.route-admin-page .route-editor-submit #route-editor-prev {
  grid-column: 1 !important;
  order: 2 !important;
  min-height: 42px;
}

body.route-admin-page .route-editor-submit #cancel-edit {
  grid-column: 2 !important;
  order: 3 !important;
  min-height: 42px;
}

body.route-admin-page .route-editor-submit #route-editor-prev,
body.route-admin-page .route-editor-submit #cancel-edit {
  background: #f7f9fb !important;
  color: #344256 !important;
  border: 1px solid #dbe5ef !important;
  box-shadow: none !important;
}

body.route-admin-page .route-editor-submit #route-editor-prev {
  grid-column: 1 / -1 !important;
}

body.route-admin-page .route-editor-submit {
  position: static !important;
  margin: 10px;
  border-radius: 14px;
  box-shadow: none;
}

body.route-editor-open .route-bottom-home {
  min-height: 40px;
  opacity: 0.96;
}

/* Do not make top cards follow scroll; keep them as normal page headers */
body.route-admin-page .route-admin-header,
body.route-list-open .route-list-head,
body.route-import-open .route-import-head,
body.route-editor-open .route-editor-top {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  transform: none !important;
}

body.route-editor-open .route-editor-panel,
body.route-list-open .route-list-panel,
body.route-import-open .route-import-panel {
  padding-top: 0 !important;
}

/* Fixed route top cards: the header stays still, content scrolls below it */
body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .page {
  padding-top: 124px !important;
}

body.route-list-open .page,
body.route-import-open .page {
  padding-top: 120px !important;
}

body.route-editor-open .page {
  padding-top: 146px !important;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-admin-header,
body.route-list-open .route-list-head,
body.route-import-open .route-import-head,
body.route-editor-open .route-editor-top {
  position: fixed !important;
  left: 50% !important;
  top: 12px !important;
  z-index: 140 !important;
  width: min(406px, calc(100% - 24px)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-admin-header,
body.route-list-open .route-list-head,
body.route-import-open .route-import-head {
  min-height: 62px !important;
  padding: 9px 14px !important;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .page,
body.route-list-open .page,
body.route-import-open .page {
  padding-top: 96px !important;
}

body.route-admin-page .route-admin-header h1,
body.route-list-open .route-list-head h2,
body.route-import-open .route-import-head h2,
body.route-editor-open .route-editor-top h2 {
  font-size: 1.08rem !important;
  margin-bottom: 0 !important;
}

body.route-admin-page .route-inline-en,
body.route-list-open .route-list-head h2::before,
body.route-import-open .route-import-head h2::before,
body.route-editor-open .route-editor-top h2::before {
  font-size: 0.58rem !important;
}

body.route-list-open .route-list-panel,
body.route-import-open .route-import-panel,
body.route-editor-open .route-editor-panel {
  padding-top: 0 !important;
}

/* nippoa standard route UI: based on local A8/Mizuho capture set */
body.route-admin-page {
  --route-primary: #0d3192;
  --route-primary-soft: #eef3ff;
  --route-border-blue: #4f75ff;
  --route-text: #33363d;
  --route-subtext: #5e6673;
  --route-panel: #f2f4f7;
  background: #e9eff5;
}

body.route-admin-page .page {
  width: min(430px, 100%);
  background: #f4f6fa;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .page {
  padding-top: 128px !important;
}

body.route-list-open .page,
body.route-import-open .page {
  padding-top: 122px !important;
}

body.route-editor-open .page {
  padding-top: 142px !important;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-admin-header,
body.route-list-open .route-list-head,
body.route-import-open .route-import-head,
body.route-editor-open .route-editor-top {
  top: 12px !important;
  width: min(406px, calc(100% - 24px)) !important;
  min-height: 92px;
  padding: 14px 16px !important;
  border: 1.5px solid #123a5f !important;
  border-radius: 14px !important;
  background: #123a5f !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(25, 43, 88, 0.12);
}

body.route-admin-page .route-admin-header h1,
body.route-list-open .route-list-head h2,
body.route-import-open .route-import-head h2,
body.route-editor-open .route-editor-top h2 {
  color: #fff !important;
  font-size: 1.28rem !important;
  letter-spacing: 0;
}

body.route-admin-page .route-admin-kicker,
body.route-list-open .route-list-head h2::before,
body.route-import-open .route-import-head h2::before,
body.route-editor-open .route-editor-top h2::before {
  color: rgba(255, 255, 255, 0.68) !important;
}

body.route-admin-page .route-admin-header p,
body.route-list-open .route-list-head p,
body.route-import-open .route-import-head p,
body.route-editor-open .route-editor-updated {
  display: none !important;
}

body.route-admin-page .route-admin-header p,
body.route-list-open .route-list-head p,
body.route-import-open .route-import-head p {
  display: none !important;
}

body.route-admin-page .route-admin-title-row span {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

body.route-editor-open .route-editor-tab {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
}

body.route-editor-open .route-editor-tab.is-active {
  border-color: #fff;
  background: #fff;
  color: #123a5f;
}

body.route-admin-page .route-admin-header p,
body.route-list-open .route-list-head p,
body.route-import-open .route-import-head p,
body.route-editor-open .route-editor-updated {
  color: var(--route-subtext) !important;
}

body.route-admin-page .route-admin-title-row span {
  border: 1px solid #d7e0ff;
  background: var(--route-primary-soft);
  color: var(--route-primary);
}

body.route-admin-page .route-admin-overview {
  gap: 8px;
  margin: 0 0 10px;
}

body.route-admin-page .route-admin-overview > div,
body.route-admin-page .route-step-lead,
body.route-admin-page .route-editor-basic,
body.route-admin-page .route-location-card,
body.route-admin-page .route-delivery-card,
body.route-admin-page .route-route-card,
body.route-admin-page .route-preview-box,
body.route-admin-page .route-assist-note {
  border: 1px solid #dfe6f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

body.route-admin-page .route-admin-overview span {
  color: var(--route-primary);
  font-weight: 950;
}

body.route-admin-page .route-menu-btn {
  min-height: 68px;
  border: 1.5px solid #dfe6f2 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none;
}

body.route-admin-page .route-menu-primary,
body.route-admin-page .route-editor-submit #route-editor-next,
body.route-admin-page .route-editor-submit #save-route {
  border-color: var(--route-primary) !important;
  background: var(--route-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(13, 49, 146, 0.18);
}

body.route-admin-page .route-menu-primary span,
body.route-admin-page .route-menu-primary small {
  color: #fff !important;
}

body.route-admin-page .route-menu-btn span {
  color: var(--route-text);
  font-size: 1rem !important;
}

body.route-admin-page .route-menu-btn small {
  color: var(--route-subtext);
}

body.route-admin-page .route-menu-btn::before,
body.route-admin-page .route-step-lead > span,
body.route-admin-page .route-location-index {
  background: var(--route-primary-soft);
  color: var(--route-primary);
}

body.route-admin-page .route-menu-primary::before {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

body.route-admin-page .route-return-group {
  border-top: 1px solid #d8dee8;
}

body.route-admin-page .route-return-group .route-menu-btn {
  border-style: solid !important;
  background: #f8f9fb !important;
}

body.route-editor-open .route-editor-tab {
  min-height: 38px;
  border: 1.5px solid #d7e0ff;
  background: #fff;
  color: var(--route-primary);
}

body.route-editor-open .route-editor-tab.is-active {
  border-color: var(--route-primary);
  background: var(--route-primary);
  color: #fff;
}

body.route-admin-page .route-step-lead {
  background: #fff;
}

body.route-admin-page .route-step-lead strong,
body.route-admin-page .route-section-title,
body.route-admin-page .route-location-current,
body.route-admin-page .route-delivery-title strong {
  color: var(--route-text);
}

body.route-admin-page .route-editor-basic input,
body.route-admin-page .route-editor-basic textarea,
body.route-admin-page .route-field-label input {
  min-height: 56px;
  border: 1px solid #d5deec;
  border-radius: 10px;
  background: #fbfcfe;
  color: var(--route-text);
}

body.route-admin-page .route-editor-basic input.is-invalid,
body.route-admin-page .route-editor-basic textarea.is-invalid,
body.route-admin-page .route-field-label input.is-invalid {
  border-color: #ff6b7a !important;
  background: #fff3f5 !important;
}

body.route-admin-page .route-field-label input::-webkit-calendar-picker-indicator,
body.route-admin-page .route-editor-basic input::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.route-admin-page .route-field-label input[list],
body.route-admin-page .route-editor-basic input[list] {
  appearance: textfield;
}

.route-suggestion-menu {
  position: fixed;
  z-index: 9999;
  display: grid;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #d5deec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  overscroll-behavior: contain;
}

.route-suggestion-option {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--route-text, #111827);
  font: inherit;
  font-size: 0.92rem !important;
  font-weight: 700;
  text-align: left;
}

.route-suggestion-option:active {
  background: #eef3fb;
}

body.route-admin-page .route-location-type label {
  min-height: 40px;
  border: 1.5px solid #dfe6f2;
  background: #fff;
  color: var(--route-text);
}

body.route-admin-page .route-add-location,
body.route-admin-page .route-add-delivery,
body.route-admin-page .route-add-shipper,
body.route-admin-page .route-editor-submit #route-editor-prev,
body.route-admin-page .route-bottom-home {
  border: 1.5px solid #dfe6f2 !important;
  background: #fff !important;
  color: var(--route-primary) !important;
  box-shadow: none !important;
}

body.route-admin-page .route-editor-submit {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -8px 20px rgba(25, 43, 88, 0.12);
}

body.route-admin-page .route-bottom-home {
  min-height: 46px;
  bottom: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom) + 10px);
}

/* Route top menu: four square actions */
body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .page {
  padding-top: 112px !important;
}

body.route-admin-page .route-admin-header {
  min-height: 76px !important;
}

body.route-admin-page .route-admin-title-row {
  align-items: center;
}

body.route-admin-page .route-admin-actions {
  gap: 0;
}

body.route-admin-page .route-action-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.route-admin-page .route-menu-btn {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 34px;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 74px;
  padding: 13px 12px !important;
  border: 1px solid #dce5f2 !important;
  border-radius: 16px !important;
  background: #fff !important;
  text-align: left;
  box-shadow: 0 6px 16px rgba(25, 43, 88, 0.06);
}

body.route-admin-page .route-menu-primary {
  border-color: #dfe6f2 !important;
  background: #fff !important;
  color: var(--route-text) !important;
  box-shadow: none;
}

body.route-admin-page .route-menu-primary span {
  color: var(--route-text) !important;
}

body.route-admin-page .route-menu-primary::before {
  background: var(--route-primary-soft);
  color: var(--route-primary);
}

body.route-admin-page .route-menu-btn::before {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 10px;
  background: #eef3ff;
  color: #0d3192;
  font-size: 0.9rem !important;
}

body.route-admin-page .route-menu-btn::after {
  display: none;
}

body.route-admin-page .route-menu-btn span {
  grid-column: 2;
  color: #20242c !important;
  font-size: 1rem !important;
  font-weight: 950;
}

body.route-admin-page .route-menu-btn small {
  display: block;
  grid-column: 2;
  margin-top: 3px;
  color: #5e6673;
  font-size: 0.76rem !important;
  font-weight: 800;
  line-height: 1.25;
}

body.route-admin-page .route-menu-btn b {
  grid-column: 3;
  grid-row: 1 / 3;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid #d7e0ff;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 0 !important;
  font-weight: 950;
  line-height: 1;
}

body.route-admin-page .route-menu-btn b::before {
  content: "›";
  color: #0d3192;
  font-size: 1.35rem !important;
  line-height: 1;
  transform: translateY(-1px);
}

body.route-admin-page .route-menu-return b {
  border-color: #d8dee8;
  background: #f8f9fb;
}

body.route-admin-page .route-menu-return b::before {
  color: #526173;
}

body.route-admin-page .route-menu-return {
  border-color: #d8dee8 !important;
  background: #f8f9fb !important;
  box-shadow: none;
}

body.route-admin-page .route-menu-return::before {
  background: #eef1f5;
  color: #526173;
}

body.route-admin-page .route-menu-return span {
  color: #344256;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-admin-actions {
  gap: 22px;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-return-group {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid #d8dee8;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-return-group::before {
  content: "日報へ戻る";
  color: #7b8798;
  font-size: 0.74rem !important;
  font-weight: 850;
  letter-spacing: 0;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-return-group .route-menu-btn {
  min-height: 68px;
  border-color: #d8dee8 !important;
  border-style: solid !important;
  background: #f8f9fb !important;
  box-shadow: none !important;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-return-group .route-menu-btn::before {
  background: #eef1f5;
  color: #526173;
}

/* Editor breathing room: compact fixed head, flatter form */
body.route-editor-open .page {
  padding-top: 104px !important;
}

body.route-list-open .page {
  padding-top: 104px !important;
}

body.route-editor-open .route-editor-top {
  min-height: 62px !important;
  padding: 8px 14px !important;
}

body.route-editor-open .route-editor-tabs {
  margin-top: 5px !important;
}

body.route-editor-open .route-editor-tab {
  min-height: 28px !important;
}

body.route-editor-open .route-step-lead {
  display: none !important;
}

body.route-editor-open .route-section-title {
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}

body.route-editor-open .route-editor-basic,
body.route-editor-open .route-location-card,
body.route-editor-open .route-delivery-card {
  margin-inline: 8px !important;
  border-radius: 10px !important;
}

body.route-editor-open .route-location-head,
body.route-editor-open .route-delivery-head,
body.route-editor-open .route-shipper-row {
  padding: 10px !important;
}

body.route-editor-open .route-delivery-list,
body.route-editor-open .route-shipper-list {
  padding: 8px !important;
}

body.route-editor-open .route-editor-basic input,
body.route-editor-open .route-editor-basic textarea,
body.route-editor-open .route-field-label input {
  min-height: 50px !important;
}

body.route-editor-open .route-editor-submit {
  margin: 8px !important;
  padding: 8px !important;
}

body.route-editor-open .route-bottom-home {
  min-height: 38px !important;
  padding: 8px 14px !important;
}

/* Route editor hierarchy: 場所 > 納品先 > 荷主名 */
body.route-editor-open .route-location-card {
  border: 1.5px solid #cdd9e8 !important;
  border-left: 4px solid #b8cbe0 !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(25, 43, 88, 0.08) !important;
}

body.route-list-open .route-preview-box {
  position: relative !important;
  overflow: hidden !important;
  border-left: 4px solid #b8cbe0 !important;
}

body.route-editor-open .route-location-head {
  border-bottom: 1px solid #dbe5f1 !important;
  background: #fff !important;
}

body.route-editor-open .route-location-label {
  color: #263447 !important;
  font-size: 0.96rem !important;
  font-weight: 950 !important;
}

body.route-editor-open .route-location-current {
  color: #0f172a !important;
  font-size: 1.02rem !important;
  font-weight: 950 !important;
}

body.route-editor-open .route-location-head .route-field-label {
  color: #263447 !important;
  font-size: 0.96rem !important;
  font-weight: 950 !important;
}

body.route-editor-open .route-location-name-field input {
  min-height: 54px !important;
  font-size: 1.02rem !important;
  background: #fff !important;
}

body.route-editor-open .route-location-index {
  margin-top: calc(0.96rem + 7px + 21px) !important;
  width: 34px !important;
  height: 34px !important;
  background: #123b86 !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  box-shadow: 0 6px 14px rgba(18, 59, 134, 0.22) !important;
}

body.route-editor-open .route-delivery-list {
  gap: 10px !important;
  padding: 10px 10px 12px 18px !important;
  background: #f7f9fc !important;
}

body.route-editor-open .route-delivery-card {
  margin: 0 !important;
  border: 1px solid #dce6f2 !important;
  border-left: 4px solid #b8cbe0 !important;
  background: #fbfdff !important;
  box-shadow: none !important;
}

body.route-editor-open .route-delivery-head {
  gap: 8px !important;
  border-bottom: 1px solid #e5edf6 !important;
  background: #fbfdff !important;
}

body.route-editor-open .route-delivery-label-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 7px !important;
  padding-right: 14px !important;
}

body.route-editor-open .route-delivery-collapse {
  flex: 0 0 auto !important;
  display: inline-grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  justify-content: end !important;
  justify-self: end !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8290a3 !important;
  box-shadow: none !important;
}

body.route-editor-open .route-delivery-collapse span {
  display: none !important;
}

body.route-editor-open .route-delivery-collapsed-name {
  display: block !important;
  position: absolute !important;
  left: 38% !important;
  top: 50% !important;
  max-width: 38% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  pointer-events: none !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
  z-index: 0 !important;
}

body.route-editor-open .route-delivery-card.is-delivery-collapsed .route-delivery-collapse {
  width: 30px !important;
  max-width: none !important;
}

body.route-editor-open .route-delivery-collapse::after {
  content: "" !important;
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid #8290a3 !important;
  border-bottom: 2px solid #8290a3 !important;
  transform: rotate(225deg) translateY(-2px) !important;
  transition: transform 0.16s ease !important;
  z-index: 1 !important;
}

body.route-editor-open .route-delivery-card.is-delivery-collapsed .route-delivery-collapse::after {
  transform: rotate(45deg) translateY(-2px) !important;
}

body.route-editor-open .route-delivery-card.is-delivery-collapsed .route-shipper-list,
body.route-editor-open .route-delivery-card.is-delivery-collapsed .route-add-shipper,
body.route-editor-open .route-delivery-card.is-delivery-collapsed .route-delivery-edit-area,
body.route-editor-open .route-delivery-card.is-delivery-collapsed .remove-deliver-group {
  display: none !important;
}

body.route-editor-open .route-delivery-card.is-delivery-collapsed .route-delivery-head {
  border-bottom: 0 !important;
}

body.route-editor-open .route-delivery-card.is-delivery-collapsed .route-delivery-label-row {
  margin-bottom: 0 !important;
}

body.route-editor-open .route-delivery-name-field span {
  margin: 0 !important;
  color: #344762 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

body.route-editor-open .route-delivery-name-field input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 48px !important;
  font-size: 0.98rem !important;
  background: #fff !important;
}

body.route-editor-open .route-delivery-edit-area,
body.route-editor-open .route-shipper-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

body.route-editor-open .route-entry-index {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}

body.route-editor-open .route-delivery-index {
  width: 28px !important;
  height: 28px !important;
  background: #dfe9ff !important;
  color: #123b86 !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
}

body.route-editor-open .route-shipper-list {
  gap: 8px !important;
  padding: 8px 8px 10px 14px !important;
  background: #fbfdff !important;
}

body.route-editor-open .route-shipper-row {
  border: 1px solid #e7edf5 !important;
  border-left: 3px solid #d8e2ee !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.route-editor-open .route-shipper-row .route-field-label {
  color: #4f5f72 !important;
  font-size: 0.68rem !important;
  font-weight: 750 !important;
}

body.route-editor-open .route-shipper-label-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 2.2em !important;
}

body.route-editor-open .route-shipper-context-value {
  display: block !important;
  visibility: hidden !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

body.route-editor-open .route-delivery-card.is-delivery-context-visible .route-shipper-row.is-shipper-context-target .route-shipper-context-value {
  visibility: visible !important;
}

body.route-editor-open .route-shipper-row .route-field-label input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 42px !important;
  font-size: 0.88rem !important;
  background: #fff !important;
}

body.route-editor-open .route-shipper-index {
  width: 22px !important;
  height: 22px !important;
  background: #eef3fb !important;
  color: #60728a !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
}

body.route-admin-page .scroll-top-btn {
  display: none !important;
}

/* Daily input boxes: based on local CLUB JT Chrome captures */
body[data-step] .page :where(
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="time"],
  input[type="date"],
  select,
  textarea
) {
  min-height: 54px;
  padding: 13px 14px;
  border: 1.5px solid #cfd5dd;
  border-radius: 6px;
  background: #fff;
  color: #20242c;
  font-size: 1rem !important;
  font-weight: 650;
  box-shadow: none;
}

body[data-step] .page :where(
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="time"],
  input[type="date"],
  select,
  textarea
)::placeholder {
  color: #8a9099;
  font-weight: 650;
}

body[data-step] .page :where(
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="time"],
  input[type="date"],
  select,
  textarea
):focus {
  border-color: #5f68ff;
  background: #fff;
  box-shadow: 0 0 0 1px #5f68ff;
}

body[data-step] .page label,
body[data-step] .page .route-field-label {
  color: #28303a;
  font-size: 0.9rem !important;
  font-weight: 850;
}

body[data-step] .page textarea {
  min-height: 68px;
  line-height: 1.45;
}

body[data-step] .page select {
  padding-right: 40px;
  background-color: #fff;
}

body[data-step] .date-hidden-input {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-step] .odo-input-wrap input {
  padding-right: 44px;
}

/* Daily prompts: title only, no sub explanations */
body[data-step] .phase-prompt-note,
body[data-step] .route-assist-note,
body[data-step] .phase-prompt p {
  display: none !important;
}

/* Daily phase prompts belong to the same box as their input card */
body[data-step="1"] .phase-prompt {
  position: static !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 20px 17px !important;
  border: 1px solid #dfe6f2;
  border-bottom: 1px solid #dfe6f2;
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-shadow: none !important;
}

body[data-step="1"] .phase-prompt::before,
body[data-step="1"] .phase-prompt::after {
  display: none !important;
}

body[data-step="1"] .phase-prompt-title {
  padding-left: 15px;
  color: #1f2937;
  font-size: 1.34rem !important;
  font-weight: 680;
  line-height: 1.28;
}

body[data-step="1"] .phase-prompt-title::before {
  top: 0.05em;
  bottom: 0.05em;
  width: 5px;
  background: #9aa4b2;
}

body[data-step="1"] .phase-prompt + .card {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
}

body.step1-basic-page[data-step="1"] .page {
  padding-top: 12px !important;
}

body.step1-basic-page[data-step="1"] .phase-prompt {
  position: relative !important;
  width: 100% !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 16px 18px 7px !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
}

body.step1-basic-page[data-step="1"] .phase-prompt::before,
body.step1-basic-page[data-step="1"] .phase-prompt::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #111827 !important;
}

body.step1-basic-page[data-step="1"] .phase-prompt::before {
  top: 5px !important;
}

body.step1-basic-page[data-step="1"] .phase-prompt::after {
  bottom: 0 !important;
}

body.step1-basic-page[data-step="1"] .phase-prompt-title {
  padding-left: 12px !important;
  margin-bottom: 4px !important;
  color: #1f2937 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body.step1-basic-page[data-step="1"] .phase-prompt-title::before {
  left: 0 !important;
  top: 0.15em !important;
  bottom: 0.15em !important;
  width: 4px !important;
  background: #9aa4b2 !important;
}

body.step1-basic-page[data-step="1"] .phase-prompt + .card {
  margin-top: 16px !important;
  border-top: 1px solid color-mix(in srgb, var(--main-color) 10%, #e7ebf1) !important;
  border-radius: 8px !important;
}

/* Step 1 date: flat text row, no extra input-looking frames */
body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-main-row {
  position: relative;
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-select-area {
  display: grid !important;
  gap: 10px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-shortcut-row {
  display: flex !important;
  gap: 18px !important;
  justify-content: center !important;
  margin-top: 0 !important;
}

body.step1-basic-page .date-main-text {
  flex: 0 1 auto;
  justify-content: center !important;
  text-align: center;
  flex-wrap: nowrap;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1f2b3a !important;
  font-size: 1.52rem !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-year,
body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-day,
body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-dow {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1f2b3a !important;
  font-size: 1.52rem !important;
  font-weight: 520 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-dow {
  margin-left: 0 !important;
  font-size: 1.24rem !important;
  letter-spacing: 0 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-main-row .date-picker-btn {
  position: static;
  transform: none;
  width: 16px !important;
  height: 34px !important;
  min-width: 16px !important;
  min-height: 34px !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #33516f !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-name {
  font-size: 1.12rem !important;
  font-weight: 650;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-list {
  position: relative !important;
  width: min(382px, calc(100% - 20px)) !important;
  margin: 0 auto 24px !important;
}


body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item.active {
  border-color: color-mix(in srgb, var(--main-color) 40%, #dfe5ee) !important;
  background: color-mix(in srgb, var(--main-color) 14%, #fff) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--main-color) 16%, transparent) !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item.active::before {
  background: var(--main-color) !important;
  border-color: var(--main-color) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item.active .bin-name,
body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item.active .bin-sub {
  color: #1f2937 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-sub {
  font-size: 0.78rem !important;
  font-weight: 420;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .btn-link-lite {
  align-self: flex-end;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8a97a8;
  font-size: 1.08rem !important;
  font-weight: 520;
  box-shadow: none;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .btn-link-lite::after {
  content: "›";
  margin-left: 8px;
  font-size: 1.12em;
  line-height: 1;
}

body.step1-basic-page .date-main-row .date-picker-btn:hover,
body.step1-basic-page .date-main-row .date-picker-btn:focus-visible {
  background: #eef3f8 !important;
}

body.step1-basic-page #yesterdayButton,
body.step1-basic-page #todayButton {
  width: 92px !important;
  min-height: 40px !important;
  padding: 6px 12px !important;
  border: 1px solid #d9e2ec !important;
  background: #f7f9fc !important;
  color: #657286 !important;
  font-size: 1.12rem !important;
  font-weight: 560 !important;
  box-shadow: none !important;
  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  transform: none !important;
}

body.step1-basic-page #yesterdayButton:active,
body.step1-basic-page #todayButton:active {
  transform: none !important;
}

body.step1-basic-page #yesterdayButton {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.step1-basic-page #todayButton {
  width: 118px !important;
  min-height: 48px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.step1-basic-page #yesterdayButton.active,
body.step1-basic-page #todayButton.active {
  border-color: color-mix(in srgb, var(--main-color) 40%, #d9e2ec) !important;
  background: color-mix(in srgb, var(--main-color) 16%, #fff) !important;
  color: #263241 !important;
  font-weight: 620 !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--main-color) 18%, transparent) !important;
}

/* Step 1 select screen: keep the global settings separate from route/date input */
body.step1-basic-page .step-context-info {
  display: none !important;
}

body.step1-basic-page .step-context-bar {
  position: fixed !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--ad-placeholder-height) + 15px + env(safe-area-inset-bottom)) !important;
  transform: none !important;
  z-index: 230 !important;
  width: auto !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 24px 0 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
}

body.step1-basic-page .scroll-top-btn {
  bottom: calc(var(--ad-placeholder-height) + 76px + env(safe-area-inset-bottom));
}

body.step1-basic-page .page {
  margin-top: var(--fixed-step-bar-height) !important;
}

/* Route order editor: explicit reorder controls */
body.route-admin-page .route-order-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 42px 42px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

body.route-admin-page .route-order-row + .route-order-row {
  margin-top: 10px;
}

body.route-admin-page .route-order-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #edf4fb;
  color: #60728a;
  font-weight: 900;
}

body.route-admin-page .route-order-row.is-location .route-order-number {
  background: #123b86;
  color: #fff;
  box-shadow: 0 5px 12px rgba(18, 59, 134, 0.18);
}

body.route-admin-page .route-order-row.is-destination .route-order-number {
  background: #eef3fb;
  color: #60728a;
  box-shadow: none;
}

body.route-admin-page .route-order-name {
  min-width: 0;
  color: #1f2b3a;
  font-size: 0.98rem !important;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.route-admin-page .route-order-actions {
  display: grid;
  grid-column: 3 / 5;
  grid-template-columns: 42px 42px;
  gap: 6px;
}

body.route-admin-page .route-order-move {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid #d8e2ee;
  border-radius: 10px;
  background: #f8fafc;
  color: #12375d;
  font-size: 1.16rem !important;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

body.route-admin-page .route-order-move:not(:disabled):active {
  transform: translateY(1px);
}

body.route-admin-page .route-order-move:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

body.route-admin-page .route-order-empty {
  padding: 18px 14px;
  border: 1px dashed #cdd8e5;
  border-radius: 10px;
  background: #f8fafc;
  color: #66768a;
  text-align: center;
  font-weight: 850;
}

/* Settings drawer refresh: simple right-side control panel */
.theme-drawer-panel {
  width: min(370px, 92vw);
}

.theme-drawer-card {
  border-radius: 16px 0 0 16px;
  background: #f5f7fa;
  box-shadow: -18px 0 36px rgba(15, 23, 42, 0.20);
}

.theme-drawer-head {
  min-height: 58px;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid #dfe6f2;
  border-radius: 0;
  background: #fff;
  color: #1f2937;
}

.theme-drawer-title {
  position: relative;
  padding-left: 0;
  font-size: 1.18rem !important;
  font-weight: 850;
  line-height: 1.28;
}

.theme-drawer-title::before {
  display: none;
}

.theme-drawer-close {
  border: 1px solid #d5dfeb;
  background: #f8fafc;
  color: #334155;
  box-shadow: none;
}

.theme-drawer-body {
  gap: 12px;
  padding: 14px 14px 120px;
  background: #f5f7fa;
}

.theme-drawer-section {
  gap: 14px;
  padding: 14px;
  border: 1px solid #dde5ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.theme-drawer-section::before,
.theme-drawer-section::after {
  display: none;
}

.theme-drawer-section-title {
  margin: -14px -14px 0;
  padding: 18px 20px 17px 35px;
  border-bottom: 1px solid #dfe6f2;
  border-radius: 12px 12px 0 0;
  background: #fff;
  color: #1f2937;
  font-size: 1.34rem !important;
  font-weight: 680;
  line-height: 1.28;
}

.theme-drawer-section-title::before {
  left: 20px;
  width: 5px;
  top: 18px;
  bottom: 17px;
  background: #9aa4b2;
}

.theme-drawer-field-head {
  min-height: 44px;
  margin: 0;
}

.theme-drawer-field label,
.theme-drawer-field-inline label,
.theme-drawer-field-label {
  color: #1f2b3a;
  font-size: 0.92rem !important;
  font-weight: 850;
}

.theme-drawer-field input[type="color"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.theme-drawer-swatch {
  width: 56px;
  height: 28px;
  border: 1px solid #d5dfeb;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42);
}

.theme-drawer-field-inline {
  grid-template-columns: 64px minmax(0, 1fr);
}

.theme-drawer-field select,
.theme-drawer-field input[type="text"],
.theme-drawer-field input[type="email"],
.theme-drawer-field input[type="tel"],
.theme-drawer-route-link {
  min-height: 54px;
  padding: 12px 14px;
  border: 1.5px solid #d5dfeb;
  border-radius: 8px;
  background: #fff;
  color: #1f2b3a;
  font-weight: 750;
  box-shadow: none;
}

.theme-drawer-route-link {
  cursor: pointer;
  text-align: center;
  width: 100%;
}

.theme-drawer-field select:focus,
.theme-drawer-field input[type="text"]:focus,
.theme-drawer-field input[type="email"]:focus,
.theme-drawer-field input[type="tel"]:focus,
.theme-drawer-route-link:focus-visible {
  border-color: #5f68ff;
  box-shadow: 0 0 0 1px #5f68ff;
  outline: none;
}

.theme-drawer-reset {
  justify-self: stretch;
  min-height: 42px;
  border: 1px solid #d5dfeb;
  border-radius: 999px;
  background: #f7f9fc;
  color: #12375d;
}

.theme-recipient-list {
  gap: 10px;
}

.theme-recipient-card {
  gap: 10px;
  padding: 12px;
  border: 1px solid #e0e7f0;
  border-radius: 10px;
  background: #f8fafc;
}

.theme-recipient-card-title {
  color: #1f2b3a;
  font-weight: 900;
}

.theme-recipient-toggle {
  min-width: 58px;
  min-height: 34px;
  border: 1px solid #d5dfeb;
  background: #fff;
  color: #12375d;
}

.theme-recipient-summary {
  gap: 6px;
}

.theme-recipient-summary-row {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 0.86rem !important;
}

.theme-recipient-summary-label {
  color: #66768a;
}

.theme-drawer-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 10px;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid #dfe7f1;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 22px rgba(15, 23, 42, 0.08);
}

.theme-drawer-cancel,
.theme-drawer-save {
  min-height: 50px;
  border-radius: 999px;
  font-weight: 900;
}

.theme-drawer-cancel {
  border: 1px solid #d5dfeb;
  color: var(--drawer-main-color, var(--main-color));
}

.theme-drawer-save {
  background: var(--drawer-main-color, var(--main-color));
  color: var(--drawer-button-text-color, var(--button-text-color));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--drawer-main-color, var(--main-color)) 22%, transparent);
}

/* Settings drawer v2: lighter rows, clearer close control */
body[data-step] .theme-drawer-panel {
  width: min(390px, 100vw);
}

body[data-step] .theme-drawer-card {
  border-radius: 0;
  background: #f4f7fa;
  box-shadow: -14px 0 30px rgba(15, 23, 42, 0.18);
}

body[data-step] .theme-drawer-head {
  min-height: 56px;
  margin: 0;
  padding: 16px 18px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #dfe6f2;
  border-radius: 0;
  background: #fff;
  color: #1f2937;
}

body[data-step] .theme-drawer-title {
  font-size: 1.18rem !important;
  font-weight: 850;
  letter-spacing: 0;
}

body[data-step] .theme-drawer-close {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 8px;
  border: 1px solid #d5dfeb;
  background: #f8fafc;
  color: #334155;
  font-size: 1.7rem;
  line-height: 1;
}

body[data-step] .theme-drawer-body {
  gap: 12px;
  padding: 12px 12px calc(var(--ad-placeholder-height) + 76px + env(safe-area-inset-bottom));
  background: #f4f7fa;
}

body[data-step] .theme-drawer-section {
  gap: 10px;
  padding: 14px 12px;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

body[data-step] .theme-drawer-section-title {
  margin: -14px -12px 0;
  padding: 18px 20px 17px 35px;
  border-bottom: 1px solid #dfe6f2;
  border-radius: 10px 10px 0 0;
  background: #fff;
  color: #1f2937;
  font-size: 1.34rem !important;
  font-weight: 680;
  line-height: 1.28;
}

body[data-step] .theme-drawer-field,
body[data-step] .theme-drawer-field-inline {
  padding: 8px 0;
  border-top: 1px solid #edf1f6;
}

body[data-step] .theme-drawer-section-title + .theme-drawer-field,
body[data-step] .theme-drawer-section-title + .theme-drawer-field-inline {
  border-top: 0;
}

body[data-step] .theme-drawer-field-head,
body[data-step] .theme-drawer-field-inline {
  min-height: 48px;
}

body[data-step] .theme-drawer-field label,
body[data-step] .theme-drawer-field-inline label,
body[data-step] .theme-drawer-field-label {
  font-size: 1.06rem !important;
  font-weight: 760;
}

body[data-step] .theme-drawer-field select,
body[data-step] .theme-drawer-field input[type="text"],
body[data-step] .theme-drawer-field input[type="email"],
body[data-step] .theme-drawer-field input[type="tel"],
body[data-step] .theme-drawer-route-link {
  min-height: 48px;
  border-radius: 10px;
  font-size: 1.05rem !important;
}

body[data-step] .theme-drawer-reset {
  min-height: 42px;
  margin-top: 4px;
  color: #7b8797;
  font-size: 1rem !important;
  box-shadow: none;
}

body[data-step] .theme-recipient-card {
  padding: 12px;
  border-radius: 10px;
  background: #f9fbfd;
  box-shadow: none;
}

body[data-step] .theme-recipient-card-title {
  font-size: 1.08rem !important;
}

body[data-step] .theme-recipient-toggle {
  min-height: 36px;
  border-radius: 999px;
  color: #2f6f8f;
}

body[data-step] .theme-recipient-summary-row {
  grid-template-columns: 56px minmax(0, 1fr);
  font-size: 0.98rem !important;
}

body[data-step] .theme-drawer-actions {
  display: none;
}

/* Step 1 reset: align the departure flow with loading and later pages. */
body.step1-basic-page[data-step="1"] .page {
  width: min(430px, 100%) !important;
  max-width: 430px !important;
  margin-top: 0 !important;
  padding: 0 12px calc(var(--ad-placeholder-height) + 72px) !important;
  background: #f3f6fa !important;
}

body.step1-basic-page .step-context-info {
  display: grid !important;
}

body.step1-basic-page .step-context-bar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: min(520px, 100%) !important;
  height: auto !important;
  margin: calc(var(--fixed-step-bar-height) + 6px) auto 0 !important;
  padding: 6px 18px 8px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important;
  pointer-events: auto !important;
}

body.step1-basic-page[data-step="1"] .phase-prompt {
  position: relative !important;
  top: auto !important;
  width: min(520px, 100%) !important;
  min-height: 62px !important;
  margin: 0 auto !important;
  padding: 16px 18px 7px !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
  z-index: auto !important;
}

body.step1-basic-page[data-step="1"] .phase-prompt + .card {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
}

body.step1-basic-page[data-step="1"] .page > .card:not(.is-phase-hidden) {
  position: relative !important;
  padding: 22px 18px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05) !important;
}

body.step1-basic-page .date-main-text,
body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-year,
body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-day,
body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-dow {
  font-size: 1.28rem !important;
  font-weight: 700 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-day {
  letter-spacing: 0.1em !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-list {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 0 10px !important;
  overflow: hidden !important;
  border: 1px solid #dce4ee !important;
  border-radius: 14px !important;
  background: #fff !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 10px 42px 10px 40px !important;
  border: 0 !important;
  border-bottom: 1px solid #e6ecf3 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item-special {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item::before {
  left: 15px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-empty {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 86px !important;
  display: flex !important;
  align-items: center !important;
  padding: 14px 18px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-name {
  font-size: 0.94rem !important;
  font-weight: 750 !important;
  overflow: hidden !important;
  text-overflow: initial !important;
  white-space: normal !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-sub {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-manage-link {
  align-self: stretch !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  text-align: right !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid #e6ecf3 !important;
  background: #fafbfd !important;
  color: #8290a3 !important;
}


body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item.active {
  border-color: #e6ecf3 !important;
  background: color-mix(in srgb, var(--main-color) 10%, #fff) !important;
  box-shadow: inset 4px 0 0 var(--main-color) !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-select-area.nippo-invalid-target,
body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-list.nippo-invalid-target {
  padding: 8px !important;
  border: 1px solid #df5f72 !important;
  border-radius: 10px !important;
  background: #fff4f6 !important;
  box-shadow: 0 0 0 3px rgba(223, 95, 114, 0.12) !important;
}

body.step1-basic-page[data-step="1"] .card.nippo-invalid-target,
body.step1-basic-page[data-step="1"] .bin-item.nippo-invalid-target,
body.step1-basic-page[data-step="1"] .inspection-choice-row.nippo-invalid-target,
body.step1-basic-page[data-step="1"] .signature-trigger-wrap.nippo-invalid-target {
  border: 1px solid #df5f72 !important;
  background: #fff7f8 !important;
  box-shadow: 0 0 0 3px rgba(223, 95, 114, 0.12) !important;
}

body.step1-basic-page[data-step="1"] .signature-trigger-wrap.nippo-invalid-target #inspectionSignatureCanvas {
  border-color: #df5f72 !important;
  background: #fff !important;
}

body.step1-basic-page[data-step="1"] #inspectionSignatureCanvas.nippo-invalid-target {
  border: 1px solid #df5f72 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(223, 95, 114, 0.12) !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="3"] .page > .card:not(.is-phase-hidden):has(table) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="3"] .page > .card:not(.is-phase-hidden):has(table) > div[style*="overflow-x"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-inline: 0 !important;
}

/* Daily flow spacing: copy the departure first-panel rhythm everywhere. */
body[data-step] .step-context-bar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  margin: calc(var(--fixed-step-bar-height) + 6px) auto 0 !important;
}

body[data-step] .page {
  display: flow-root !important;
  width: min(430px, 100%) !important;
  max-width: 430px !important;
  margin-top: 0 !important;
  padding: 0 12px calc(var(--ad-placeholder-height) + 108px) !important;
  background: #f3f6fa !important;
}

body[data-step] .phase-prompt {
  position: relative !important;
  top: auto !important;
  width: min(520px, 100%) !important;
  min-height: 62px !important;
  margin: 0 auto !important;
  padding: 16px 18px 7px !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
  z-index: auto !important;
}

body[data-step] .phase-prompt::before,
body[data-step] .phase-prompt::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #111827 !important;
}

body[data-step] .phase-prompt::before {
  top: 5px !important;
}

body[data-step] .phase-prompt::after {
  bottom: 0 !important;
}

body[data-step] .phase-prompt-title {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 1 1 auto !important;
  padding-left: 12px !important;
  margin-bottom: 4px !important;
  color: #1f2937 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body[data-step] .phase-prompt-title:has(.phase-prompt-icon) {
  padding-left: 0 !important;
}

body[data-step] .phase-prompt-title:has(.phase-prompt-icon)::before {
  display: none !important;
}

.phase-prompt-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

.phase-prompt-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.55);
}

body[data-step] .phase-prompt-title > .phase-prompt-icon + span {
  margin-left: 16px !important;
}

body[data-step] .phase-prompt-action {
  flex: 0 0 auto !important;
  margin-left: 12px !important;
  min-width: 54px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid #d5dfeb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #8290a3 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-step] .phase-prompt-action::before {
  display: none !important;
  content: none !important;
}

body[data-step] .phase-prompt-action:hover,
body[data-step] .phase-prompt-action:focus-visible {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

body[data-step] .phase-prompt-action.is-saving {
  border-color: #d5dfeb !important;
  background: #fff !important;
  color: #8290a3 !important;
}

body.helper-edit-action-hidden #toggleHelperEditBtn {
  display: none !important;
}

.card-head-inline:empty {
  display: none !important;
}

body[data-step] .phase-prompt-title::before {
  left: 0 !important;
  top: 0.15em !important;
  bottom: 0.15em !important;
  width: 4px !important;
  background: #9aa4b2 !important;
}

body[data-step] .phase-prompt + .card,
body[data-step] .phase-prompt + #pickupList,
body[data-step] .phase-prompt + #deliveryList {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="1"] .phase-prompt + .card {
  padding-top: 6px !important;
}

body[data-step] .phase-prompt + #pickupList > .card:first-child,
body[data-step] .phase-prompt + #deliveryList > .card:first-child {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
}

body[data-step] .page > .card:not(.is-phase-hidden),
body[data-step] #pickupList > .card:not(.is-phase-hidden),
body[data-step] #deliveryList > .card:not(.is-phase-hidden) {
  position: relative !important;
  padding: 22px 18px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05) !important;
}

body[data-step] .page > .card:not(.is-phase-hidden) {
  width: calc(100% + 24px) !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
}

body[data-step] .page > .phase-prompt {
  width: calc(100% + 24px) !important;
  max-width: none !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
}

body.step1-basic-page[data-step="1"] .page > .card:not(.is-phase-hidden) {
  width: calc(100% + 24px) !important;
  max-width: none !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
}

body[data-step] .card + .phase-prompt {
  margin-top: 12px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .phase-prompt {
  display: flex !important;
  align-items: center !important;
  margin: 0 -12px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .phase-prompt + .card {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
}

body.step1-basic-page[data-step="1"] .card + .phase-prompt {
  margin-top: 12px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .step-context-bar + .page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body[data-step] .step-context-bar + .page > .phase-prompt:first-child {
  margin-top: 12px !important;
}

body[data-step] .step-context-bar + .page {
  border-top: 0 !important;
  padding-top: 0 !important;
  background: #f3f6fa !important;
}

body[data-step] .step-context-bar + .page::before {
  display: none !important;
}

body[data-step] .step-context-bar + .page > .phase-prompt:first-child {
  position: relative !important;
  z-index: 1 !important;
}

body[data-step].theme-drawer-open .step-context-bar {
  z-index: 20 !important;
}

body[data-step] .phase-menu-btn {
  z-index: auto !important;
}

body[data-step] .step-context-bar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: min(520px, 100%) !important;
  height: auto !important;
  margin: calc(var(--fixed-step-bar-height) + 2px) auto 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 6px 18px 8px !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important;
  pointer-events: auto !important;
}

body[data-step] .step-context-info {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 145px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-step] .step-context-item {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-step] .step-context-item:first-child {
  padding-left: 16px !important;
}

body[data-step] .step-context-label {
  flex: 0 0 3.2em !important;
  padding-left: 0 !important;
  color: #8290a3 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-step] .step-context-item:nth-child(2) .step-context-label {
  flex-basis: 2.7em !important;
}

body[data-step] .step-context-item span:last-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #8290a3 !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

body[data-step] .step-context-item:first-child span:last-child {
  padding-left: 5px !important;
  letter-spacing: 0.04em !important;
}

body[data-step="2"] .loading-stop-title {
  color: #8290a3 !important;
}

body[data-step="2"] .route-free-card {
  align-items: center !important;
  justify-content: center !important;
  min-height: 120px !important;
  padding: 18px 20px !important;
  text-align: center !important;
}

body[data-step="2"] .route-free-card .loading-stop-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  color: #8290a3 !important;
  text-align: center !important;
}

body[data-step="2"] .route-free-card .loading-stop-body {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
}

body[data-step="2"] .loading-input-card {
  padding: 14px 12px 16px !important;
  background: #fff !important;
}

body[data-step="2"] .loading-input-controls {
  display: grid !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
}

body[data-step="2"] .loading-settings-panel {
  padding: 0 !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body[data-step="2"] .loading-settings-head {
  display: flex !important;
  position: relative !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 12px 14px 4px !important;
  border: 0 !important;
  background: #fff !important;
  color: #111827 !important;
  border-radius: 0 !important;
}

body[data-step="2"] .page > .card .loading-settings-panel .loading-settings-head {
  display: flex !important;
}

body[data-step="2"] .loading-settings-head .section-title {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 0.95rem !important;
  font-weight: 850 !important;
}

body[data-step="2"] .loading-settings-head .section-title::before {
  display: none !important;
  content: none !important;
}

body[data-step="2"] .loading-settings-head .btn-icon-sm {
  position: static !important;
  transform: none !important;
  min-width: 58px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid #d5dfeb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #8290a3 !important;
  box-shadow: none !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
}

body[data-step="2"] .loading-settings-head .btn-icon-sm::before {
  display: none !important;
  content: none !important;
}

body[data-step="2"] .loading-settings-summary {
  width: 100% !important;
  gap: 0 !important;
  padding: 0 14px !important;
}

body[data-step="2"] .loading-settings-summary .driver-summary-line {
  grid-template-columns: 8em minmax(0, 1fr) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  border-top: 1px solid #e5e9f0 !important;
}

body[data-step="2"] .loading-settings-summary .driver-summary-line:first-child {
  border-top: 0 !important;
}

body[data-step="2"][data-loading-special-route="1"] .loading-method-summary-line,
body[data-step="2"][data-loading-special-route="1"] .loading-input-mode-selector {
  display: none !important;
}

body[data-step="2"] .loading-settings-editor {
  padding: 14px 12px !important;
}

body[data-step="2"] .loading-input-card #pickupList {
  margin: 0 !important;
}

body[data-step="2"] .loading-input-card #pickupList > .card {
  padding: 0 !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-step="2"] .loading-input-card #pickupList > .card + .card {
  margin-top: 10px !important;
}

body[data-step="2"] .loading-input-card .loading-destination-toggle {
  padding: 12px 14px !important;
}

body[data-step="2"] .loading-input-card .loading-phase-card.is-loading-destination-active > .loading-stop-body {
  padding: 0 12px 12px !important;
}

body[data-step="2"] .special-loading-card {
  padding: 12px !important;
  overflow: visible !important;
}

body[data-step="2"] .special-loading-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 12px 12px 12px 14px !important;
  border: 1px solid #e5eaf2 !important;
  border-bottom-color: #e5e9f0 !important;
  border-radius: 8px 8px 0 0 !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: #fff !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04) !important;
}

body[data-step="2"] .special-loading-head-main {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body[data-step="2"] .special-loading-head-actions {
  display: grid !important;
  grid-template-columns: 18px !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
}

body[data-step="2"] .special-loading-head-actions .btn-icon-sm {
  min-width: 42px !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #8290a3 !important;
}

body[data-step="2"] .special-loading-card-tools {
  display: block !important;
  align-items: center !important;
  padding: 10px 0 0 !important;
}

body[data-step="2"] .special-loading-card-tools .special-group-edit-toggle {
  width: calc(100% - 20px) !important;
  min-height: 44px !important;
  margin-inline: 10px !important;
  padding: 0 16px !important;
  border: 1px solid #d5dfeb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--theme-primary, #153d6b) !important;
  box-shadow: none !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
}

body[data-step="2"] .special-loading-card.is-special-editing .special-loading-card-tools .special-group-edit-toggle {
  border-color: var(--theme-primary, #153d6b) !important;
  background: var(--theme-primary, #153d6b) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(var(--theme-primary-rgb, 21, 61, 107), 0.18) !important;
}

body[data-step="2"] .special-loading-card.is-special-editing .special-loading-card-tools {
  display: none !important;
}

body[data-step="2"] .special-loading-head-actions .special-group-collapse {
  min-width: 18px !important;
  width: 18px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  cursor: pointer !important;
}

body[data-step="2"] .special-loading-head-actions .special-group-collapse::after {
  content: "" !important;
  position: absolute !important;
  left: 38% !important;
  top: 56% !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid #8290a3 !important;
  border-bottom: 2px solid #8290a3 !important;
  transform: translate(-50%, -50%) rotate(225deg) !important;
  transition: transform 0.16s ease !important;
}

body[data-step="2"] .special-loading-card.is-special-collapsed .special-loading-head-actions .special-group-collapse::after {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

body[data-step="2"] .special-loading-head-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body[data-step="2"] .special-loading-head-control:has(.special-group-remove) {
  grid-template-columns: minmax(0, 1fr) 34px !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-head-control {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-head-main {
  grid-template-columns: auto 7.2em minmax(0, 1fr) !important;
  gap: 12px !important;
}

body[data-step="2"] .special-loading-head-editor {
  display: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px 0 !important;
}

body[data-step="2"] .special-loading-card.is-special-editing .special-loading-head-editor {
  display: grid !important;
}

body[data-step="2"] .special-loading-card.is-special-editing .special-loading-time-grid,
body[data-step="2"] .special-loading-card.is-special-editing .special-loading-qty-row {
  display: none !important;
}

body[data-step="2"] .special-loading-head-control .special-group-remove {
  justify-self: stretch !important;
  margin: 0 !important;
}

body[data-step="2"] .special-loading-head-input {
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  font-size: 0.92rem !important;
}

body[data-step="2"] .special-group-confirm {
  display: none !important;
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 4px !important;
  border: 1px solid var(--theme-primary, #153d6b) !important;
  border-radius: 999px !important;
  background: var(--theme-primary, #153d6b) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(var(--theme-primary-rgb, 21, 61, 107), 0.18) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

body[data-step="2"] .special-loading-card.is-special-editing .special-group-confirm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body[data-step="2"] .special-group-confirm:disabled,
body[data-step="2"] .special-group-confirm.is-disabled {
  border-color: #cfd8e5 !important;
  background: #e9eef5 !important;
  color: #7d8ca0 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

body[data-step="2"] .special-loading-display {
  display: none !important;
  min-width: 0 !important;
  min-height: 42px !important;
  align-items: center !important;
  padding: 8px 0 !important;
  color: #111827 !important;
  font-size: 0.95rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

body[data-step="2"] .special-loading-display.is-empty {
  color: #8290a3 !important;
}

body[data-step="2"] .special-loading-card.is-special-saved input[data-special-field="pickup"],
body[data-step="2"] .special-loading-card.is-special-saved input[data-special-field="destination"],
body[data-step="2"] .special-loading-card.is-special-saved input[data-special-field="shipper"] {
  display: none !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-display {
  display: flex !important;
}

body[data-step="2"] .special-loading-detail-head-main {
  width: 100% !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-detail-head-main,
body[data-step="2"] .special-loading-card.is-special-saved .special-loading-shipper-head-main {
  grid-template-columns: 6em minmax(0, 1fr) !important;
  gap: 12px !important;
}

body[data-step="2"] .special-loading-detail-head-input {
  min-height: 40px !important;
}

body[data-step="2"] .special-loading-shipper-head-main {
  width: 100% !important;
}

body[data-step="2"] .special-loading-shipper-head-input {
  min-height: 40px !important;
}

body[data-step="2"] .special-loading-card .loading-stop-title {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  align-self: center !important;
  transform: none !important;
}

body[data-step="2"] .special-loading-body {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
}

body[data-step="2"] .special-loading-card.is-special-collapsed .special-loading-body {
  display: none !important;
}

body[data-step="2"] .special-loading-card.is-special-collapsed .special-loading-head {
  border-radius: 8px !important;
}

body[data-step="2"] .special-loading-card.is-special-saved input.is-readonly {
  color: #111827 !important;
  background: #f8fafc !important;
  pointer-events: none !important;
}

body[data-step="2"] .special-loading-card .is-hidden-when-saved {
  display: none !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-body {
  gap: 8px !important;
  padding: 8px 12px 12px !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-card-tools {
  padding: 10px 0 0 !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-card-tools .special-group-edit-toggle {
  min-height: 42px !important;
  font-size: 0.94rem !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-detail-list {
  gap: 6px !important;
  margin: 0 !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-detail-row {
  gap: 0 !important;
  padding: 0 10px !important;
  border-color: #edf1f6 !important;
  background: #fff !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-detail-head {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 9px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e7edf5 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-shipper-list {
  gap: 0 !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-shipper-row {
  gap: 7px !important;
  padding: 9px 0 10px !important;
  border-top-color: #e7edf5 !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-shipper-row:first-child {
  padding-top: 9px !important;
  border-top: 0 !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-detail-title,
body[data-step="2"] .special-loading-card.is-special-saved .special-loading-shipper-title {
  color: #8290a3 !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-display {
  min-height: 0 !important;
  padding: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-qty-row {
  margin-top: 4px !important;
  padding-top: 0 !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .loading-qty-inputs {
  gap: 8px !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .loading-qty-input {
  min-height: 44px !important;
  font-size: 0.92rem !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-time-grid {
  gap: 6px !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-time-field {
  padding: 8px 0 !important;
  background: transparent !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-time-control {
  grid-template-columns: minmax(0, 1fr) 128px !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-time-btn {
  width: 128px !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  font-size: 0.98rem !important;
}

body[data-step="2"] .special-loading-time-grid {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
}

body[data-step="2"] .special-loading-departure-grid {
  padding: 12px 0 0 !important;
}

body[data-step="2"] .normal-loading-time-block {
  margin: 12px 0 !important;
}

body[data-step="2"] .normal-loading-arrival-block {
  margin-top: 10px !important;
}

body[data-step="2"] .normal-loading-departure-block {
  margin-top: 14px !important;
}

body[data-step="2"] .normal-loading-time-context {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
  color: #6f7f94 !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

body[data-step="2"] .normal-loading-time-context strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #10233f !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-step="2"] .special-loading-time-field {
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
}

body[data-step="2"] .special-loading-time-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 128px !important;
  gap: 8px !important;
  align-items: center !important;
}

body[data-step="2"] .special-loading-time-input {
  min-width: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

body[data-step="2"] .special-loading-time-btn {
  min-width: 0 !important;
  width: 128px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 1.5px solid var(--theme-primary, #153d6b) !important;
  border-radius: 999px !important;
  background: var(--theme-primary, #153d6b) !important;
  color: #fff !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(15, 45, 82, 0.16) !important;
}

body[data-step="2"] .special-loading-time-btn:hover,
body[data-step="2"] .special-loading-time-btn:focus-visible {
  border-color: #0f2f56 !important;
  background: #0f2f56 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(15, 45, 82, 0.2) !important;
}

body[data-step="2"] .special-loading-field {
  display: grid !important;
  grid-template-columns: 5.8em minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

body[data-step="2"] .special-loading-field .special-loading-input {
  min-width: 0 !important;
}

body[data-step="2"] .special-loading-pickup-field {
  margin-bottom: 0 !important;
}

body[data-step="2"] .special-loading-detail-list {
  display: grid !important;
  gap: 16px !important;
  margin-bottom: 6px !important;
}

body[data-step="2"] .special-loading-detail-row {
  display: grid !important;
  gap: 12px !important;
  padding: 12px !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  overflow: visible !important;
}

body[data-step="2"] .special-loading-detail-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 34px !important;
  margin: -12px -12px 0 !important;
  padding: 12px 12px 10px 14px !important;
  border: 1px solid #e5eaf2 !important;
  border-bottom-color: #e5e9f0 !important;
  border-radius: 8px 8px 0 0 !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 9px rgba(15, 23, 42, 0.035) !important;
}

body[data-step="2"] .special-loading-detail-title {
  color: #111827 !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

body[data-step="2"] .special-loading-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

body[data-step="2"] .special-loading-actions .btn-secondary,
body[data-step="2"] .special-shipper-add,
body[data-step="2"] .special-entry-add,
body[data-step="2"] .special-route-save {
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid #d8e3ef !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--theme-primary, #153d6b) !important;
  box-shadow: none !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
}

body[data-step="2"] .special-loading-shipper-list {
  display: grid !important;
  gap: 10px !important;
}

body[data-step="2"] .special-loading-shipper-row {
  display: grid !important;
  gap: 10px !important;
  padding: 10px 0 0 !important;
  border-top: 1px dashed #d8e0ea !important;
}

body[data-step="2"] .special-loading-shipper-row:first-child {
  padding-top: 10px !important;
  border-top: 0 !important;
}

body[data-step="2"] .special-loading-shipper-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 30px !important;
}

body[data-step="2"] .special-loading-shipper-title {
  color: #8290a3 !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

body[data-step="2"] .special-shipper-add {
  width: calc(100% - 20px) !important;
  margin-inline: 10px !important;
}

body[data-step="2"] .special-loading-field .driver-summary-item-label,
body[data-step="2"] .special-loading-qty-row .loading-qty-label {
  color: #8290a3 !important;
}

body[data-step="2"] .special-loading-add-card {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-step="2"] .loading-input-card #pickupList > .special-loading-add-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-step="2"] .special-route-save {
  border-color: var(--theme-primary, #153d6b) !important;
  background: color-mix(in srgb, var(--theme-primary, #153d6b) 8%, #fff) !important;
}

body[data-step="2"] .special-entry-remove,
body[data-step="2"] .special-destination-remove,
body[data-step="2"] .special-group-remove {
  position: static !important;
  min-width: 56px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  margin: 2px 4px 0 0 !important;
  color: #8290a3 !important;
  font-size: 0.88rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
  align-self: center !important;
  transform: none !important;
  border-radius: 6px !important;
}

body[data-step="2"] .special-group-remove {
  min-width: 0 !important;
  width: 42px !important;
  min-height: 50px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  align-self: end !important;
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  letter-spacing: 0 !important;
}

body[data-step="2"] .special-destination-remove,
body[data-step="2"] .special-entry-remove {
  min-width: 0 !important;
  width: 42px !important;
  min-height: 50px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  letter-spacing: 0 !important;
}

body[data-step="2"] .special-entry-remove::before,
body[data-step="2"] .special-destination-remove::before,
body[data-step="2"] .special-group-remove::before {
  display: none !important;
  content: none !important;
}

body[data-step="2"] .special-loading-qty-row {
  margin-top: 14px !important;
}

body[data-step="2"] #resetQtyBtn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 18px 0 0 !important;
  padding: 0 18px !important;
  border: 1px solid #d5dfeb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #8290a3 !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-step="2"] .page > .card:has(#resetQtyBtn) {
  padding: 14px 12px 16px !important;
}

body[data-step="2"] #resetQtyBtn::before {
  display: none !important;
  content: none !important;
}

body[data-step="2"] #resetQtyBtn:hover,
body[data-step="2"] #resetQtyBtn:focus-visible {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

/* Mizuho-like input surface: clear blue outline, pale fill, generous radius. */
body[data-step] .page :where(
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="time"],
  input[type="date"],
  input[type="email"],
  select,
  textarea
) {
  min-height: 58px !important;
  padding: 14px 14px !important;
  border: 1.5px solid #3468ff !important;
  border-radius: 12px !important;
  background-color: #f3f6ff !important;
  color: #2f3135 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}

body[data-step] .page :where(
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="time"],
  input[type="date"],
  input[type="email"],
  select,
  textarea
)::placeholder {
  color: #737780 !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

body[data-step] .page :where(
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="time"],
  input[type="date"],
  input[type="email"],
  select,
  textarea
):focus {
  border-color: #275dff !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(52, 104, 255, 0.18) !important;
}

body[data-step] .page select {
  padding-right: 42px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #0f318d 50%),
    linear-gradient(135deg, #0f318d 50%, transparent 50%) !important;
  background-position:
    calc(100% - 24px) calc(50% + 2px),
    calc(100% - 16px) calc(50% + 2px) !important;
  background-size: 8px 8px, 8px 8px !important;
  background-repeat: no-repeat !important;
}

body[data-step] .page label:not(.inspection-choice),
body[data-step] .page .loading-qty-label,
body[data-step] .page .delivery-time-label,
body[data-step] .page .toll-item-label,
body[data-step] .page .toll-fee-row label,
body[data-step] .page .odo-inline-label {
  color: #303236 !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body[data-step] .page label:not(.inspection-choice):not(.switch-pill),
body[data-step] .page .driver-summary-item-label,
body[data-step] .page .helper-switch-label,
body[data-step] .page .loading-qty-label,
body[data-step] .page .delivery-time-label,
body[data-step] .page .toll-item-label,
body[data-step] .page .toll-fee-row label,
body[data-step] .page .odo-inline-label {
  color: #8290a3 !important;
}

body[data-step] .page .odo-input-wrap .readonly-text {
  min-height: 58px !important;
  padding: 14px 44px 14px 14px !important;
  border: 1.5px solid #3468ff !important;
  border-radius: 12px !important;
  background: #f3f6ff !important;
  color: #2f3135 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body[data-step="4"] .page .odo-input-wrap .odo-depart-display {
  min-height: 40px !important;
  padding: 0 44px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #111111 !important;
  font-weight: 800 !important;
  justify-content: flex-end !important;
}

body[data-step="4"] .page .odo-depart-wrap {
  min-height: 58px !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding-right: 14px !important;
}

body[data-step="4"] .page .odo-depart-wrap .odo-depart-display {
  color: #111111 !important;
  font-weight: 800 !important;
}

body[data-step] .page .date-hidden-input {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-step] .page :where(
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="time"],
  input[type="date"],
  input[type="email"],
  select,
  textarea,
  .odo-input-wrap .readonly-text
).nippo-invalid-target {
  border-color: #df5f72 !important;
  background: #fff4f6 !important;
  box-shadow: 0 0 0 3px rgba(223, 95, 114, 0.12) !important;
}

body[data-step="2"] .loading-delivery-row {
  padding-top: 14px !important;
  margin-top: 14px !important;
}

body[data-step="2"] .loading-delivery-row:first-of-type {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}

body[data-step="2"] .loading-delivery-row.is-first-loading-row {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}

body[data-step="2"] .loading-shipper {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  color: #303236 !important;
  font-size: 0.98rem !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

body[data-step="2"] .loading-shipper strong {
  color: #8290a3 !important;
  font-weight: 850 !important;
}

body[data-step="2"] .loading-shipper span {
  min-width: 0 !important;
  justify-self: end !important;
  text-align: right !important;
}

body[data-step="2"] .loading-destination-in-shipper span {
  color: #111827 !important;
}

body[data-step="2"] .loading-qty-row {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 12px !important;
  margin-top: 0 !important;
}

body[data-step="2"] .loading-qty-main-field {
  width: min(100%, 136px) !important;
  justify-self: end !important;
}

body[data-step="2"] .special-loading-qty-row {
  margin-top: 16px !important;
}

body[data-step="2"] .page label.loading-qty-label {
  color: #8290a3 !important;
}

body[data-step="2"] .loading-qty-input {
  min-height: 50px !important;
  font-size: 1rem !important;
  padding-right: 22px !important;
}

body[data-step="2"] .loading-unit-selector {
  margin: 0 0 16px !important;
  padding: 12px !important;
  border: 1px solid #dbe4f2 !important;
  border-radius: 12px !important;
  background: #fff !important;
}

body[data-step="2"] .loading-unit-selector-global {
  margin: 10px 0 10px !important;
}

body[data-step="2"] .loading-unit-selector-global .loading-unit-options {
  padding: 3px !important;
  border: 1px solid #dbe4f2 !important;
  border-radius: 999px !important;
  background: #f3f6fa !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

body[data-step="2"] .loading-unit-selector-global .loading-unit-option {
  min-height: 42px !important;
  justify-content: center !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8290a3 !important;
  text-align: center !important;
}

body[data-step="2"] .loading-unit-selector-global .loading-unit-option input {
  display: none !important;
}

body[data-step="2"] .loading-unit-selector-global .loading-unit-option:has(input:checked) {
  background: color-mix(in srgb, var(--main-color) 16%, #fff) !important;
  color: #263241 !important;
  box-shadow: none !important;
}

body[data-step="2"] .loading-input-mode-selector {
  margin: 0 0 10px !important;
}

body[data-step="2"] .loading-input-mode-selector .loading-unit-options {
  padding: 3px !important;
  border: 1px solid #dbe4f2 !important;
  border-radius: 999px !important;
  background: #f3f6fa !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

body[data-step="2"] .loading-input-mode-selector .loading-unit-option {
  min-height: 42px !important;
  justify-content: center !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8290a3 !important;
  text-align: center !important;
}

body[data-step="2"] .loading-input-mode-selector .loading-unit-option input {
  display: none !important;
}

body[data-step="2"] .loading-input-mode-selector .loading-unit-option:has(input:checked) {
  background: color-mix(in srgb, var(--main-color) 16%, #fff) !important;
  color: #263241 !important;
  box-shadow: none !important;
}

body[data-step="2"] .loading-input-mode-selector .loading-unit-option:has(input:disabled) {
  color: #b8c4d4 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-step="2"][data-loading-unit-mode="pallet"] .loading-input-mode-selector .loading-unit-option:has(input[value="shipper"]) {
  cursor: not-allowed !important;
}

body[data-step="2"] .loading-unit-label {
  margin-bottom: 8px !important;
  color: #303236 !important;
  font-size: 0.95rem !important;
  font-weight: 850 !important;
}

body[data-step="2"] .loading-unit-options {
  display: grid !important;
  gap: 8px !important;
}

body[data-step="2"] .loading-unit-option {
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1.5px solid #3468ff !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #303236 !important;
  font-size: 0.94rem !important;
  font-weight: 750 !important;
}

body[data-step="2"] .loading-unit-option:has(input:checked) {
  background: #f3f6ff !important;
}

body[data-step="2"] .loading-unit-option input {
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 1.5px solid #3468ff !important;
  border-radius: 50% !important;
  background: #fff !important;
  accent-color: #3468ff;
}

body[data-step="2"] .loading-unit-option input:checked {
  border: 5px solid #3468ff !important;
  background: #fff !important;
}

body[data-step="2"] .loading-unit-option input:disabled {
  border-color: #b8c4d4 !important;
}

body[data-step="2"] .loading-unit-option:has(input:disabled) {
  border-color: #d5dfeb !important;
  color: #8290a3 !important;
  background: #f8fafc !important;
}

body[data-step="2"] .loading-input-mode-selector .loading-unit-option:has(input:disabled) {
  border: 0 !important;
  color: #b8c4d4 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-step="2"] .loading-unit-lock-note {
  margin-top: 8px !important;
  color: #8290a3 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

body[data-step="2"] .loading-qty-inputs {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

body[data-step="2"] .loading-qty-field {
  position: relative !important;
  min-width: 0 !important;
}

body[data-step="2"] .loading-qty-field .loading-qty-input {
  width: 100% !important;
}

body[data-step="2"] .loading-qty-floating-label {
  display: none !important;
  position: absolute !important;
  right: 14px !important;
  bottom: -0.56em !important;
  padding: 0 5px !important;
  background: #f3f6ff !important;
  color: #657286 !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

body[data-step="2"] .loading-qty-field.has-value .loading-qty-floating-label {
  display: block !important;
}

body[data-step="2"] .loading-qty-piece-field {
  display: none !important;
}

body[data-step="2"] .loading-destination-qty-row {
  display: none !important;
}

body[data-step="2"] .loading-destination-shipper-list {
  display: none !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  color: #303236 !important;
  font-size: 0.95rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

body[data-step="2"] .loading-destination-shipper-list strong {
  font-weight: 850 !important;
}

body[data-step="2"] .loading-destination-shipper-list span {
  min-width: 0 !important;
}

body[data-step="2"][data-loading-unit-mode="pallet"] .loading-destination-shipper-list {
  display: none !important;
}

body[data-step="2"][data-loading-unit-mode="case_piece"] .loading-qty-inputs {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-step="2"][data-loading-unit-mode="case_piece"] .loading-qty-piece-field {
  display: none !important;
}

body[data-step="2"][data-loading-unit-mode="case_piece"] .loading-qty-piece-field:has(.loading-destination-shipper-piece-input) {
  display: none !important;
}

body[data-step="2"][data-loading-input-mode="destination"][data-loading-unit-mode="pallet"] .loading-destination-qty-row {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 0 !important;
}

body[data-step="2"][data-loading-input-mode="destination"][data-loading-unit-mode="pallet"] .loading-delivery-row {
  display: none !important;
}

body[data-step="3"] .delivery-input-card {
  padding: 14px 12px 16px !important;
  background: #fff !important;
}

body[data-step="3"] .delivery-input-card #deliveryList {
  margin: 0 !important;
}

body[data-step="3"] .delivery-unit-selector {
  margin: 0 0 14px !important;
  padding: 12px !important;
  border: 1px solid #dbe4f2 !important;
  border-radius: 12px !important;
  background: #fff !important;
}

body[data-step="3"] .delivery-unit-selector .loading-unit-label {
  margin: 0 0 8px !important;
  color: #111827 !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

body[data-step="3"] .delivery-unit-selector .loading-unit-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-step="3"] .delivery-unit-selector .loading-unit-option {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 8px !important;
  border: 1.5px solid #dfe6f2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 0.9rem !important;
  font-weight: 650 !important;
  text-align: center !important;
}

body[data-step="3"] .delivery-unit-selector .loading-unit-option input {
  display: inline-block !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  border: 1.5px solid #b9c6d8 !important;
  border-radius: 50% !important;
  background: #fff !important;
}

body[data-step="3"] .delivery-unit-selector .loading-unit-option:has(input:checked) {
  border-color: #dfe6f2 !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body[data-step="3"] .delivery-unit-selector .loading-unit-option input:checked {
  border-color: var(--main-color) !important;
  background:
    radial-gradient(circle at center, var(--main-color) 0 45%, transparent 48%),
    #fff !important;
}

body[data-step="3"] .delivery-input-card #deliveryList > .delivery-card {
  padding: 0 !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body[data-step="3"] .delivery-input-card #deliveryList > .delivery-card + .delivery-card {
  margin-top: 10px !important;
}

body[data-step="3"] .delivery-destination-toggle {
  width: 100% !important;
  min-height: 52px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: #111827 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  font: inherit !important;
  cursor: pointer !important;
  appearance: none !important;
}

body[data-step="3"] .delivery-destination-main {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #111827 !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
}

body[data-step="3"] .delivery-destination-sub {
  color: #8290a3 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body[data-step="3"] .delivery-card.is-delivery-complete .delivery-destination-sub {
  color: #8290a3 !important;
}

body[data-step="3"] .delivery-destination-toggle::after {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid #8290a3 !important;
  border-bottom: 2px solid #8290a3 !important;
  transform: rotate(45deg) !important;
  transition: transform 0.16s ease !important;
}

body[data-step="3"] .delivery-card.is-delivery-active .delivery-destination-toggle::after {
  transform: rotate(225deg) !important;
}

body[data-step="3"] .delivery-time-grid {
  display: none !important;
  gap: 12px !important;
  padding: 0 12px 12px !important;
}

body[data-step="3"] .delivery-card.is-delivery-active > .delivery-time-grid {
  display: grid !important;
}

body[data-step="3"] .delivery-time-field {
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
}

body[data-step="3"] .delivery-time-label {
  color: #8290a3 !important;
}

body[data-step="3"] .delivery-time-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 128px !important;
  gap: 8px !important;
  align-items: center !important;
}

body[data-step="3"] .delivery-time-input {
  min-width: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

body[data-step="3"] .delivery-time-btn {
  min-width: 0 !important;
  width: 128px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 1.5px solid var(--theme-primary, #153d6b) !important;
  border-radius: 999px !important;
  background: var(--theme-primary, #153d6b) !important;
  color: #fff !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(15, 45, 82, 0.16) !important;
}

body[data-step="3"] .delivery-time-btn:hover,
body[data-step="3"] .delivery-time-btn:focus-visible {
  border-color: #0f2f56 !important;
  background: #0f2f56 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(15, 45, 82, 0.2) !important;
}

body[data-step="3"] .delivery-card.is-delivery-active .delivery-collection-qty-row {
  display: grid !important;
}

body[data-step="3"] .delivery-card.is-delivery-active .delivery-collection-meta {
  display: grid !important;
}

body[data-step="3"] .delivery-collection-meta {
  display: none !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px !important;
  background: #f8fafc !important;
}

body[data-step="3"] .delivery-collection-meta-label {
  color: #8290a3 !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
}

body[data-step="3"] .delivery-collection-meta-value {
  min-width: 0 !important;
  color: #111827 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere !important;
}

body[data-step="3"] .delivery-collection-qty-row {
  display: none !important;
  grid-template-columns: 64px minmax(0, 1fr) 88px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px !important;
  border-top: 0 !important;
  background: #f8fafc !important;
}

body[data-step="3"][data-delivery-collection-unit-mode="pallet"] .delivery-collection-qty-row {
  grid-template-columns: 64px minmax(0, 1fr) !important;
}

body[data-step="3"][data-delivery-collection-unit-mode="pallet"] .delivery-collection-qty-row .loading-qty-piece-field {
  display: none !important;
}

body[data-step="3"] .delivery-collection-qty-row .loading-qty-label {
  color: #8290a3 !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
}

body[data-step="3"] .delivery-collection-qty-row .loading-qty-field {
  position: relative !important;
  min-width: 0 !important;
}

body[data-step="3"] .delivery-collection-qty-row .loading-qty-input {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  text-align: right !important;
}

body[data-step="3"] .delivery-collection-qty-row .loading-qty-floating-label {
  display: none !important;
  position: absolute !important;
  right: 14px !important;
  bottom: -0.56em !important;
  padding: 0 5px !important;
  background: #f3f6ff !important;
  color: #657286 !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

body[data-step="3"] .delivery-collection-qty-row .loading-qty-field.has-value .loading-qty-floating-label {
  display: block !important;
}

.loading-confirm-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom)) !important;
  background: rgba(15, 23, 42, 0.38) !important;
  overscroll-behavior: contain !important;
}

.loading-confirm-panel {
  width: min(calc(100% - 24px), 390px) !important;
  height: calc(95dvh - var(--ad-placeholder-height) - env(safe-area-inset-bottom)) !important;
  max-height: calc(95dvh - var(--ad-placeholder-height) - env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  padding: 16px 14px 14px !important;
  border-radius: 20px 20px 0 0 !important;
  background: #fff !important;
  box-shadow: 0 -18px 45px rgba(15, 23, 42, 0.2) !important;
}

.loading-confirm-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

.loading-confirm-kicker {
  color: #8290a3 !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
}

.loading-confirm-head h2 {
  margin: 2px 0 0 !important;
  color: #111827 !important;
  font-size: 1.28rem !important;
  line-height: 1.3 !important;
  font-weight: 850 !important;
}

.loading-confirm-close {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #dbe4f2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #8290a3 !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

.loading-confirm-list {
  display: grid !important;
  align-content: start !important;
  grid-auto-rows: max-content !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: 10px !important;
}

.loading-confirm-row {
  padding: 12px !important;
  border: 1px solid #dbe4f2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.loading-confirm-row-text {
  display: grid !important;
  gap: 2px !important;
  margin-bottom: 12px !important;
}

.loading-confirm-row-text strong {
  color: #111827 !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
}

.loading-confirm-row-text span {
  color: #8290a3 !important;
  font-size: 0.78rem !important;
  font-weight: 750 !important;
}

.loading-confirm-inputs {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 88px !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 0 !important;
  padding: 12px !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
}

.loading-confirm-inputs:has(.loading-confirm-field:only-child) {
  grid-template-columns: 56px minmax(0, 1fr) !important;
}

.loading-confirm-inputs::before {
  content: "数量";
  color: #8290a3;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
}

.loading-confirm-field {
  position: relative !important;
  width: min(100%, 136px) !important;
  justify-self: end !important;
  display: grid !important;
  justify-items: end !important;
}

.loading-confirm-field input,
.loading-confirm-field .loading-confirm-read-value {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid #dbe4f2 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #111827 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  text-align: right !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  user-select: none !important;
}

.loading-confirm-field input[readonly],
.delivery-confirm-time-field input[readonly] {
  border-color: #dbe4f2 !important;
  background: #f8fafc !important;
  color: #111827 !important;
  cursor: default !important;
}

.loading-confirm-field input.nippo-invalid-target,
.loading-confirm-field input.nippo-invalid-target:focus {
  border-color: #df5f72 !important;
  background: #fff4f6 !important;
  box-shadow: 0 0 0 3px rgba(223, 95, 114, 0.14) !important;
  outline: none !important;
}

.loading-confirm-field .loading-confirm-qty-unit {
  display: block !important;
  position: absolute !important;
  right: 14px !important;
  bottom: -8px !important;
  padding: 0 6px !important;
  background: #f8fafc !important;
  color: #8290a3 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.loading-confirm-field.has-value .loading-confirm-qty-unit {
  display: block !important;
}

.delivery-confirm-time-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}

.loading-confirm-time-grid-single {
  grid-template-columns: minmax(0, 1fr) !important;
}

.loading-confirm-time-grid {
  margin-bottom: 0 !important;
}

.loading-confirm-time-summary {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.loading-confirm-departure-summary {
  margin-top: 0 !important;
}

.loading-confirm-time-context {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8290a3 !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.loading-confirm-time-context strong {
  min-width: 0 !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  color: #10233f !important;
  font-size: 0.9rem !important;
  font-weight: 850 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.delivery-confirm-time-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 140px) !important;
  align-items: center !important;
  gap: 12px !important;
}

.loading-confirm-time-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

.delivery-confirm-time-field > span,
.delivery-confirm-qty-title {
  color: #8290a3 !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
}

.delivery-confirm-time-field input,
.delivery-confirm-time-field .loading-confirm-read-value {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #111827 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  text-align: right !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  user-select: none !important;
}

.loading-confirm-time-btn {
  min-width: 0 !important;
  width: 128px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 1.5px solid var(--theme-primary, #153d6b) !important;
  border-radius: 999px !important;
  background: var(--theme-primary, #153d6b) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 45, 82, 0.16) !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

.loading-confirm-time-btn:hover,
.loading-confirm-time-btn:focus-visible {
  border-color: #0f2f56 !important;
  background: #0f2f56 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(15, 45, 82, 0.2) !important;
}

.loading-confirm-time-btn:disabled {
  opacity: 1 !important;
  cursor: default !important;
  pointer-events: none !important;
}

.delivery-confirm-time-field input.nippo-invalid-target,
.delivery-confirm-time-field input.nippo-invalid-target:focus {
  border-color: #df5f72 !important;
  background: #fff4f6 !important;
  box-shadow: 0 0 0 3px rgba(223, 95, 114, 0.14) !important;
  outline: none !important;
}

.delivery-confirm-qty-title {
  margin-top: 12px !important;
  margin-bottom: 8px !important;
}

.delivery-confirm-qty-grid {
  margin-bottom: 4px !important;
}

body[data-step="2"] .loading-open-confirm-btn {
  display: none !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 2px 0 16px !important;
  border: 1.5px solid color-mix(in srgb, var(--main-color) 42%, #d5dfeb) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--main-color) 8%, #fff) !important;
  color: color-mix(in srgb, var(--main-color) 82%, #10233f) !important;
  font-size: 0.94rem !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--main-color) 10%, transparent) !important;
}

body[data-step="2"] .loading-open-confirm-btn:hover,
body[data-step="2"] .loading-open-confirm-btn:focus-visible {
  border-color: color-mix(in srgb, var(--main-color) 58%, #d5dfeb) !important;
  background: color-mix(in srgb, var(--main-color) 12%, #fff) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--main-color) 14%, transparent) !important;
}

body[data-step="2"] .loading-open-confirm-btn.is-ready {
  border-color: var(--theme-primary, #153d6b) !important;
  background: var(--theme-primary, #153d6b) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(var(--theme-primary-rgb, 21, 61, 107), 0.18) !important;
}

body[data-step="2"] .loading-open-confirm-btn.is-ready:hover,
body[data-step="2"] .loading-open-confirm-btn.is-ready:focus-visible {
  border-color: var(--theme-primary, #153d6b) !important;
  background: var(--theme-primary, #153d6b) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(var(--theme-primary-rgb, 21, 61, 107), 0.22) !important;
}

.loading-confirm-actions {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  margin: 16px -16px -16px !important;
  padding: 12px 16px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.86), #fff 36%) !important;
}

.loading-confirm-secondary,
.loading-confirm-primary {
  min-height: 48px !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  font-weight: 850 !important;
}

.loading-confirm-secondary {
  border: 1px solid #d5dfeb !important;
  background: #fff !important;
  color: #8290a3 !important;
}

.loading-confirm-primary {
  border: 0 !important;
  background: var(--main-color) !important;
  color: var(--button-text-color, #fff) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18) !important;
}

.loading-confirm-primary.is-disabled,
.loading-confirm-primary[aria-disabled="true"] {
  border: 1px solid color-mix(in srgb, var(--main-color) 28%, #d7dce4) !important;
  background: color-mix(in srgb, var(--main-color) 16%, #f4f5f8) !important;
  color: color-mix(in srgb, var(--main-color) 50%, #8a93a3) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

body[data-step="3"] #resetTimeBtn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 18px 0 0 !important;
  padding: 0 18px !important;
  border: 1px solid #d5dfeb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #8290a3 !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-step="3"] #resetTimeBtn::before {
  display: none !important;
  content: none !important;
}

body[data-step="3"] #resetTimeBtn:hover,
body[data-step="3"] #resetTimeBtn:focus-visible {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

body[data-step="4"] #resetReturnOdoBtn,
body[data-step="4"] #resetFuelLitersBtn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 18px 0 0 !important;
  padding: 0 18px !important;
  border: 1px solid #d5dfeb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #8290a3 !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-step="4"] #resetReturnOdoBtn::before,
body[data-step="4"] #resetFuelLitersBtn::before {
  display: none !important;
  content: none !important;
}

body[data-step="4"] #resetReturnOdoBtn:hover,
body[data-step="4"] #resetReturnOdoBtn:focus-visible,
body[data-step="4"] #resetFuelLitersBtn:hover,
body[data-step="4"] #resetFuelLitersBtn:focus-visible {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

body[data-step] .phase-menu-btn {
  justify-self: end !important;
  margin-right: 8px !important;
  color: #8290a3 !important;
}

body[data-step] .step-top-brand-bar .phase-menu-btn {
  justify-self: auto !important;
  margin: 0 !important;
}

body[data-step] .phase-menu-btn::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.32-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.32-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body[data-step] .phase-menu-btn::after {
  display: none !important;
}

body[data-step].theme-drawer-open .phase-menu-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  color: #8290a3 !important;
  box-shadow: none !important;
}

body[data-step] .theme-drawer-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  appearance: none !important;
}

body.step1-basic-page #yesterdayButton.active,
body.step1-basic-page #todayButton.active,
body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item.active,
body[data-step="1"][data-phase-index="0"] #yesterdayButton.active,
body[data-step="1"][data-phase-index="0"] #todayButton.active,
body[data-step="1"][data-phase-index="0"] .bin-item.active,
body[data-step="1"] .bin-item.active {
  box-shadow: none !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] #phaseBackBtn {
  display: none !important;
}

/* Daily action buttons: use the departure first-panel style everywhere. */
body[data-step] .phase-actions {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: calc(100% + 24px) !important;
  min-height: 72px !important;
  padding: 10px 14px !important;
  margin: 20px -12px 0 !important;
  border: 1px solid rgba(216, 226, 237, 0.9) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(30, 58, 95, 0.07) !important;
  backdrop-filter: none !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

body[data-step] .phase-btn-primary {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  width: min(156px, calc(52% - 8px)) !important;
  min-width: 104px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  background: var(--main-color) !important;
  color: var(--button-text-color) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--main-color) 24%, transparent), 0 2px 6px rgba(15, 23, 42, 0.12) !important;
  font-size: 1.12rem !important;
  z-index: 1 !important;
}

body[data-step] .phase-btn-back {
  position: absolute !important;
  left: 16px !important;
  bottom: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 1px solid #e1e5ec !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  z-index: 1 !important;
}

body[data-step] .phase-btn-back::before {
  content: '' !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 12px !important;
  height: 12px !important;
  border-left: 3px solid currentColor !important;
  border-bottom: 3px solid currentColor !important;
  color: #8290a3 !important;
  transform: translateX(2px) rotate(45deg) !important;
}

@media (min-width: 430px) {
  body[data-step] .phase-btn-back {
    width: 92px !important;
    min-width: 92px !important;
    padding: 0 18px 0 34px !important;
    justify-content: center !important;
    color: #8290a3 !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  body[data-step] .phase-btn-back::before {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }
}

body[data-step] .scroll-top-btn {
  left: calc(50% + min(203px, calc(50vw - 12px)) - 64px) !important;
  right: auto !important;
  bottom: calc(var(--ad-placeholder-height) + 12px + env(safe-area-inset-bottom)) !important;
  border-color: color-mix(in srgb, var(--main-color) 55%, #fff) !important;
  background: color-mix(in srgb, var(--main-color) 86%, transparent) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--main-color) 22%, transparent) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 171 !important;
}

body[data-step] .phase-btn.is-disabled,
body[data-step] .phase-btn:disabled {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--main-color) 16%, #f4f5f8) !important;
  color: color-mix(in srgb, var(--main-color) 52%, #8a93a3) !important;
  border-color: color-mix(in srgb, var(--main-color) 30%, #d7dce4) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

body[data-step="2"] .loading-settings-editor .loading-unit-selector {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-step="2"] .loading-settings-editor .loading-unit-selector:last-child {
  margin-bottom: 0 !important;
}

body[data-step="2"] .loading-settings-editor .loading-unit-label {
  margin: 0 0 8px !important;
  color: #303236 !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

body[data-step="2"] .loading-settings-editor .loading-unit-options,
body[data-step="2"] .loading-settings-editor .loading-unit-selector-global .loading-unit-options,
body[data-step="2"] .loading-settings-editor .loading-input-mode-selector .loading-unit-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-step="2"] .loading-settings-editor .loading-unit-option,
body[data-step="2"] .loading-settings-editor .loading-unit-selector-global .loading-unit-option,
body[data-step="2"] .loading-settings-editor .loading-input-mode-selector .loading-unit-option {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border: 1.5px solid #dfe6f2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 0.9rem !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

body[data-step="2"] .loading-settings-editor .loading-unit-option input,
body[data-step="2"] .loading-settings-editor .loading-unit-selector-global .loading-unit-option input,
body[data-step="2"] .loading-settings-editor .loading-input-mode-selector .loading-unit-option input {
  display: inline-block !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  border: 1.5px solid #b9c6d8 !important;
  border-radius: 50% !important;
  background: #fff !important;
}

body[data-step="2"] .loading-settings-editor .loading-unit-option:has(input:checked),
body[data-step="2"] .loading-settings-editor .loading-unit-selector-global .loading-unit-option:has(input:checked),
body[data-step="2"] .loading-settings-editor .loading-input-mode-selector .loading-unit-option:has(input:checked) {
  border-color: #dfe6f2 !important;
  background: #fff !important;
  color: #111827 !important;
}

body[data-step="2"] .loading-settings-editor .loading-unit-option input:checked,
body[data-step="2"] .loading-settings-editor .loading-unit-selector-global .loading-unit-option input:checked,
body[data-step="2"] .loading-settings-editor .loading-input-mode-selector .loading-unit-option input:checked {
  border-color: var(--main-color) !important;
  background:
    radial-gradient(circle at center, var(--main-color) 0 45%, transparent 48%),
    #fff !important;
}

body[data-step="2"] .loading-settings-editor .loading-input-mode-selector .loading-unit-option:has(input:disabled) {
  border-color: #dfe6f2 !important;
  background: #f8fafc !important;
  color: #b8c4d4 !important;
}

/* Shared top card: keep every main screen header at the same footprint. */
:root {
  --app-top-card-width: min(406px, calc(100% - 24px));
  --app-top-card-height: 92px;
}

.app-loading-card,
body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-admin-header,
body.route-list-open .route-list-head,
body.route-import-open .route-import-head,
body.route-editor-open .route-editor-top {
  width: var(--app-top-card-width) !important;
  min-height: var(--app-top-card-height) !important;
  border: 1.5px solid color-mix(in srgb, var(--main-color) 84%, #000 16%) !important;
  border-radius: 14px !important;
  background: var(--main-color) !important;
  color: var(--button-text-color) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--main-color) 22%, transparent) !important;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-admin-header,
body.route-list-open .route-list-head,
body.route-import-open .route-import-head,
body.route-editor-open .route-editor-top {
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

body.route-admin-page .route-admin-header h1,
body.route-list-open .route-list-head h2,
body.route-import-open .route-import-head h2,
body.route-editor-open .route-editor-top h2 {
  color: var(--button-text-color) !important;
}

body.route-admin-page .route-inline-en,
body.route-list-open .route-list-head h2::before,
body.route-import-open .route-import-head h2::before,
body.route-editor-open .route-editor-top h2::before {
  border-color: color-mix(in srgb, var(--button-text-color) 28%, transparent) !important;
  background: color-mix(in srgb, var(--button-text-color) 14%, transparent) !important;
  color: var(--button-text-color) !important;
}

body.route-editor-open .route-editor-tab {
  border-color: color-mix(in srgb, var(--button-text-color) 24%, transparent) !important;
  background: color-mix(in srgb, var(--button-text-color) 10%, transparent) !important;
  color: color-mix(in srgb, var(--button-text-color) 82%, transparent) !important;
}

body.route-editor-open .route-editor-tab.is-active {
  border-color: var(--button-text-color) !important;
  background: var(--button-text-color) !important;
  color: var(--main-color) !important;
}

.app-loading-page {
  min-height: 100vh;
  padding-top: 12px;
  background: var(--bg-color);
}

.app-loading-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 14px 16px;
}

.app-loading-card strong {
  display: block;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.2;
}

.app-loading-card small {
  display: block;
  margin-top: 5px;
  color: color-mix(in srgb, var(--button-text-color) 72%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
}

body.route-admin-page.route-list-open::before,
body.route-admin-page.route-import-open::before,
body.route-admin-page.route-editor-open::before,
body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open)::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 135;
  width: min(430px, 100%);
  height: 112px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

body.route-admin-page .route-admin-header h1,
body.route-list-open .route-list-head h2,
body.route-import-open .route-import-head h2,
body.route-editor-open .route-editor-top h2 {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  margin: 0 !important;
  color: var(--button-text-color) !important;
  font-size: 1.28rem !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

body.route-admin-page .route-inline-en,
body.route-list-open .route-list-head h2::before,
body.route-import-open .route-import-head h2::before,
body.route-editor-open .route-editor-top h2::before {
  flex: 0 0 auto !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--button-text-color) 68%, transparent) !important;
  font-size: 0.62rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}

body.route-editor-open .route-editor-top {
  grid-template-rows: auto 1fr !important;
  align-content: stretch !important;
  height: var(--app-top-card-height) !important;
  row-gap: 8px !important;
  padding: 13px 16px !important;
}

body.route-editor-open .route-editor-top > div:first-child {
  display: flex !important;
  align-items: center !important;
  min-height: 24px !important;
}

body.route-editor-open .route-editor-top h2 {
  min-height: 24px !important;
}

body.route-editor-open .route-editor-tabs {
  align-self: end !important;
  margin-top: 0 !important;
}

body.route-editor-open .page {
  padding-top: 108px !important;
}

/* Special route editor: align hierarchy with My Route editor */
body[data-step="2"] .special-loading-card {
  padding: 0 !important;
  border: 1.5px solid #cdd9e8 !important;
  border-left: 4px solid #b8cbe0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(25, 43, 88, 0.08) !important;
  overflow: visible !important;
}

body[data-step="2"] .special-loading-head-editor {
  padding: 10px 10px 12px !important;
  background: #fff !important;
}

body[data-step="2"] .special-loading-head-control {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: end !important;
  gap: 10px !important;
}

body[data-step="2"] .special-loading-head-control:has(.special-group-remove) {
  grid-template-columns: auto minmax(0, 1fr) 42px !important;
}

body[data-step="2"] .special-loading-field-label {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #263447 !important;
  font-size: 0.96rem !important;
  font-weight: 950 !important;
}

body[data-step="2"] .special-loading-head-input {
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 12px 14px !important;
  font-size: 0.98rem !important;
  background: #fff !important;
}

body[data-step="2"] .special-loading-location-index,
body[data-step="2"] .special-loading-delivery-index,
body[data-step="2"] .special-loading-shipper-index {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}

body[data-step="2"] .special-loading-location-index {
  width: 34px !important;
  height: 34px !important;
  align-self: end !important;
  margin-bottom: 8px !important;
  background: var(--theme-primary, #123b86) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  box-shadow: 0 6px 14px rgba(var(--theme-primary-rgb, 18, 59, 134), 0.22) !important;
}

body[data-step="2"] .special-loading-head-index {
  display: none !important;
  margin-bottom: 0 !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-head-index {
  display: inline-flex !important;
  align-self: center !important;
}

body[data-step="2"] .special-loading-detail-list {
  gap: 10px !important;
  margin: 0 !important;
  padding: 10px 10px 12px 18px !important;
  background: #f7f9fc !important;
}

body[data-step="2"] .special-loading-detail-row {
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid #dce6f2 !important;
  border-left: 4px solid #b8cbe0 !important;
  border-radius: 8px !important;
  background: #fbfdff !important;
  box-shadow: none !important;
}

body[data-step="2"] .special-loading-detail-head {
  gap: 8px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #e5edf6 !important;
  border-radius: 8px 8px 0 0 !important;
  background: #fbfdff !important;
  box-shadow: none !important;
}

body[data-step="2"] .special-loading-detail-head-main,
body[data-step="2"] .special-loading-shipper-head-main {
  display: grid !important;
  grid-template-columns: 5.8em auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 10px !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-detail-head-main,
body[data-step="2"] .special-loading-card.is-special-saved .special-loading-shipper-head-main {
  grid-template-columns: 6em minmax(0, 1fr) !important;
}

body[data-step="2"] .special-loading-card.is-special-saved .special-loading-delivery-index,
body[data-step="2"] .special-loading-card.is-special-saved .special-loading-shipper-index {
  display: none !important;
}

body[data-step="2"] .special-loading-detail-title {
  color: #344762 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

body[data-step="2"] .special-loading-delivery-index {
  width: 28px !important;
  height: 28px !important;
  background: #dfe9ff !important;
  color: #123b86 !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
}

body[data-step="2"] .special-loading-shipper-list {
  gap: 8px !important;
  padding: 8px 8px 10px 14px !important;
  background: #fbfdff !important;
}

body[data-step="2"] .special-loading-shipper-row {
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid #e7edf5 !important;
  border-left: 3px solid #d8e2ee !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-step="2"] .special-loading-shipper-row:first-child {
  padding-top: 10px !important;
  border-top: 1px solid #e7edf5 !important;
}

body[data-step="2"] .special-loading-shipper-title {
  color: #4f5f72 !important;
  font-size: 0.68rem !important;
  font-weight: 750 !important;
  padding-left: 8px !important;
}

body[data-step="2"] .special-loading-qty-row .loading-qty-label {
  padding-left: 8px !important;
}

body[data-step="2"] .special-loading-shipper-index {
  width: 22px !important;
  height: 22px !important;
  background: #eef3fb !important;
  color: #60728a !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
}

/* Route editor basic card width: match other route sub-pages */
body.route-editor-open .route-editor-basic,
body.route-editor-open .route-editor-submit {
  margin-inline: 12px !important;
}

/* Main step pages: align the content cards with the settings panel design */
body[data-step] .page {
  background: #f4f7fa;
}

body[data-step] .page > .card:not(.is-phase-hidden),
body[data-step] #pickupList > .card:not(.is-phase-hidden),
body[data-step] #deliveryList > .card:not(.is-phase-hidden) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  padding: 18px 14px !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

body.step1-basic-page[data-step="1"][data-phase-index] .page > .card:not(.is-phase-hidden) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  padding: 18px 14px !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

body[data-step] .page > .phase-prompt {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 15px 14px !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 10px 10px 0 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-step] .page > .phase-prompt::before,
body[data-step] .page > .phase-prompt::after {
  display: none !important;
}

body[data-step] .phase-prompt + .card,
body[data-step] .phase-prompt + #pickupList,
body[data-step] .phase-prompt + #deliveryList,
body[data-step] .phase-prompt + #pickupList > .card:first-child,
body[data-step] .phase-prompt + #deliveryList > .card:first-child {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index] .phase-prompt + .card,
body[data-step] .page > .phase-prompt + .card {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
}

/* Safety reminder refresh: warm, spacious editorial styling */
.global-safety-reminder {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.96) 0, rgba(255, 250, 241, 0.86) 36%, transparent 68%),
    #f1eee6;
}

.global-safety-reminder-panel {
  padding: 36px 34px 34px;
  border-color: #eadfd4;
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 5%, rgba(237, 154, 96, 0.10), transparent 24%),
    #fffdf9;
  box-shadow: 0 26px 70px rgba(91, 67, 48, 0.14), 0 5px 18px rgba(91, 67, 48, 0.06);
}

.global-safety-reminder-panel::before {
  height: 4px;
  background: linear-gradient(90deg, #d95535 0%, #ed8b4b 58%, #f1b464 100%);
}

.global-safety-reminder-mark {
  margin-bottom: 22px;
  padding: 7px 14px;
  border-color: #ead8c8;
  background: rgba(255, 250, 243, 0.88);
  color: #715847;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.global-safety-reminder-mark span {
  background: #df6541;
  box-shadow: 0 0 0 4px rgba(223, 101, 65, 0.11);
}

.global-safety-reminder-panel .global-safety-reminder-visual {
  gap: 16px;
  margin-bottom: 24px;
  padding: 21px 18px 18px;
  border: 1px solid #efd9c7;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff7ee 0%, #fbe8d8 100%);
  box-shadow: 0 12px 28px rgba(146, 93, 52, 0.10);
}

.global-safety-reminder-panel .safety-visual-headline {
  line-height: 1.2;
}

.global-safety-reminder-panel .safety-visual-headline strong {
  color: #d84f31;
  font-size: 1.3rem;
  letter-spacing: 0.07em;
}

.global-safety-reminder-panel .safety-visual-headline span {
  margin-left: 8px;
  color: #c85b39;
}

.global-safety-reminder-panel .safety-visual-headline small {
  margin-top: 7px;
  color: #5d5047;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}

.global-safety-reminder-panel .safety-visual-picture {
  width: 74%;
  padding: 7px 7px 6px;
  border: 1px solid #f0ddd0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(112, 75, 49, 0.09);
}

.global-safety-reminder-panel .safety-visual-picture span {
  margin-top: 8px;
  color: #433a34;
  letter-spacing: 0.08em;
}

.global-safety-reminder-kicker {
  margin-bottom: 10px;
  color: #d66a42;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
}

.global-safety-reminder h2 {
  margin-bottom: 24px;
  color: #2d2824;
  font-size: 1.34rem !important;
  font-weight: 850;
  line-height: 1.48;
  letter-spacing: 0.02em;
}

.global-safety-reminder-copy {
  margin-bottom: 23px;
  padding: 20px 19px;
  border-color: #eee0d4;
  border-radius: 20px;
  background: rgba(255, 249, 242, 0.92);
}

.global-safety-reminder-message {
  color: #3c342e;
}

.global-safety-reminder-confirm {
  color: #76685e;
}

.global-safety-reminder-confirm::before {
  background: #ebdcd0;
}

.global-safety-reminder-primary {
  box-shadow: 0 11px 24px color-mix(in srgb, var(--main-color, #1e3a5f) 20%, rgba(91, 67, 48, 0.10));
}

@media (max-width: 520px) {
  .global-safety-reminder {
    background: #fffdf9;
  }

  .global-safety-reminder-panel {
    padding: max(28px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    border-radius: 0;
    background:
      radial-gradient(circle at 95% 3%, rgba(237, 154, 96, 0.09), transparent 22%),
      #fffdf9;
  }

  .global-safety-reminder-panel .global-safety-reminder-visual {
    gap: 14px;
    margin-bottom: 20px;
    padding: 18px 14px 16px;
  }
}

/* In-page safety notice: use the same visual language as the opening reminder */
body[data-step] .global-safety-notice .global-safety-reminder-visual {
  grid-template-columns: repeat(2, minmax(0, 98px));
  justify-content: center;
  row-gap: 10px;
  column-gap: 16px;
  width: min(90%, 286px);
  margin-bottom: 14px;
  padding: 13px 12px 12px;
  border: 1px solid #dce4ec;
  border-radius: 18px;
  background: linear-gradient(145deg, #f8fafc 0%, #edf2f6 100%);
  box-shadow: 0 8px 20px rgba(52, 68, 84, 0.07);
}

body[data-step] .global-safety-notice .safety-visual-headline {
  grid-column: 1 / -1;
}

body[data-step] .global-safety-notice .safety-visual-headline strong {
  color: #d84f31;
}

body[data-step] .global-safety-notice .safety-visual-headline span {
  color: #c85b39;
}

body[data-step] .global-safety-notice .safety-visual-headline small {
  color: #5d5047;
}

body[data-step] .global-safety-notice .safety-visual-picture {
  padding: 8px 8px 6px;
  border: 1px solid #dfe6ed;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 14px rgba(52, 68, 84, 0.07);
}

body[data-step] .global-safety-notice .safety-visual-picture span {
  color: #433a34;
}

body[data-step] .global-safety-notice .global-safety-reminder-kicker {
  color: #d66a42;
}

body[data-step] .global-safety-notice h2 {
  color: #2d2824;
}

body[data-step] .global-safety-notice .global-safety-reminder-copy {
  border-color: #dce4ec;
  background: #f3f6f9;
}

body[data-step] .global-safety-notice .global-safety-reminder-message {
  color: #3c342e;
}

body[data-step] .global-safety-notice .global-safety-reminder-confirm {
  color: #76685e;
}

body[data-step] .global-safety-notice .global-safety-reminder-confirm::before {
  background: #dce4ec;
}

/* Unified prompt + form card, matching the settings drawer sections */
body.step1-basic-page[data-step="1"][data-phase-index] .page > .phase-prompt,
body[data-step] .page > .phase-prompt {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 14px !important;
  border: 1px solid #dfe7f1 !important;
  border-bottom: 1px solid #dfe6f2 !important;
  border-radius: 10px 10px 0 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.step1-basic-page[data-step="1"][data-phase-index] .page > .phase-prompt::before,
body.step1-basic-page[data-step="1"][data-phase-index] .page > .phase-prompt::after,
body[data-step] .page > .phase-prompt::before,
body[data-step] .page > .phase-prompt::after {
  display: none !important;
  content: none !important;
}

body.step1-basic-page[data-step="1"][data-phase-index] .page > .phase-prompt + .card,
body[data-step] .page > .phase-prompt + .card,
body[data-step] .page > .phase-prompt + #pickupList > .card:first-child,
body[data-step] .page > .phase-prompt + #deliveryList > .card:first-child {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: none !important;
}

/* Animated hamburger / close control */
body[data-step] .phase-menu-btn::before,
body[data-step] .phase-menu-btn::after {
  display: none !important;
  content: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-step] .phase-menu-btn .phase-menu-icon {
  position: relative;
  display: block !important;
  width: 22px;
  height: 16px;
  color: inherit;
}

body[data-step] .phase-menu-btn .phase-menu-icon-line {
  position: absolute;
  left: 0;
  display: block !important;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition:
    top 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
}

body[data-step] .phase-menu-btn .phase-menu-icon-line:nth-child(1) {
  top: 0;
}

body[data-step] .phase-menu-btn .phase-menu-icon-line:nth-child(2) {
  top: 7px;
}

body[data-step] .phase-menu-btn .phase-menu-icon-line:nth-child(3) {
  top: 14px;
}

body[data-step] .phase-menu-btn.is-open .phase-menu-icon-line:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

body[data-step] .phase-menu-btn.is-open .phase-menu-icon-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.25);
}

body[data-step] .phase-menu-btn.is-open .phase-menu-icon-line:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

body[data-step].theme-drawer-open .phase-menu-btn {
  position: fixed !important;
  top: 9px !important;
  right: 14px !important;
  left: auto !important;
  z-index: 460 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 1px solid #d5dfeb !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #334155 !important;
}

body[data-step] .theme-drawer-close {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

body[data-step] .theme-drawer-close .phase-menu-icon {
  position: relative;
  display: block !important;
  width: 22px;
  height: 16px;
}

body[data-step] .theme-drawer-close .phase-menu-icon-line {
  position: absolute;
  left: 0;
  display: block !important;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition:
    top 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
}

body[data-step] .theme-drawer.is-opening .theme-drawer-close .phase-menu-icon-line {
  transition-duration: 350ms, 350ms, 350ms;
  transition-delay: 146ms, 146ms, 146ms;
}

body[data-step] .theme-drawer-close .phase-menu-icon-line:nth-child(1) {
  top: 0;
}

body[data-step] .theme-drawer-close .phase-menu-icon-line:nth-child(2) {
  top: 7px;
}

body[data-step] .theme-drawer-close .phase-menu-icon-line:nth-child(3) {
  top: 14px;
}

body[data-step] .theme-drawer-close.is-x .phase-menu-icon-line:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

body[data-step] .theme-drawer-close.is-x .phase-menu-icon-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.25);
}

body[data-step] .theme-drawer-close.is-x .phase-menu-icon-line:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

body[data-step].theme-drawer-open .step-top-brand-bar .phase-menu-btn {
  position: static !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-step].theme-drawer-open.theme-drawer-closing .step-top-brand-bar .phase-menu-btn {
  position: static !important;
  opacity: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8290a3 !important;
  box-shadow: none !important;
}

/* Context summary card below the step bar */
body[data-step] .step-context-bar {
  width: min(406px, calc(100% - 24px)) !important;
  margin: calc(var(--fixed-step-bar-height) + 8px) auto 12px !important;
  padding: 11px 14px !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 10px !important;
  background: #f4f7fa !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

body[data-step] .step-context-info {
  background: transparent !important;
}

body[data-step] .page,
body.step1-basic-page[data-step="1"][data-phase-index="0"] .page {
  padding-top: 12px !important;
}

/* Opening safety reminder: derive the supporting colors from the active theme */
.global-safety-reminder {
  background:
    radial-gradient(
      circle at 50% 8%,
      #fff 0,
      color-mix(in srgb, var(--main-color, #1e3a5f) 5%, #fff) 38%,
      transparent 68%
    ),
    color-mix(in srgb, var(--main-color, #1e3a5f) 4%, #f4f6f8);
}

.global-safety-reminder-panel {
  border-color: color-mix(in srgb, var(--main-color, #1e3a5f) 16%, #e3e8ee);
  background:
    radial-gradient(
      circle at 92% 5%,
      color-mix(in srgb, var(--main-color, #1e3a5f) 10%, transparent),
      transparent 24%
    ),
    #fff;
  box-shadow:
    0 26px 70px color-mix(in srgb, var(--main-color, #1e3a5f) 12%, transparent),
    0 5px 18px rgba(30, 41, 59, 0.05);
}

.global-safety-reminder-panel::before {
  background: linear-gradient(
    90deg,
    var(--main-color, #1e3a5f),
    color-mix(in srgb, var(--main-color, #1e3a5f) 62%, #fff)
  );
}

.global-safety-reminder-mark {
  border-color: color-mix(in srgb, var(--main-color, #1e3a5f) 22%, #e6ebf0);
  background: color-mix(in srgb, var(--main-color, #1e3a5f) 5%, #fff);
  color: color-mix(in srgb, var(--main-color, #1e3a5f) 72%, #374151);
}

.global-safety-reminder-mark span {
  background: var(--main-color, #1e3a5f);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-color, #1e3a5f) 12%, transparent);
}

.global-safety-reminder-panel .global-safety-reminder-visual {
  border-color: color-mix(in srgb, var(--main-color, #1e3a5f) 18%, #e5eaf0);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--main-color, #1e3a5f) 5%, #fff) 0%,
    color-mix(in srgb, var(--main-color, #1e3a5f) 12%, #fff) 100%
  );
  box-shadow: 0 12px 28px color-mix(in srgb, var(--main-color, #1e3a5f) 10%, transparent);
}

.global-safety-reminder-panel .safety-visual-picture {
  border-color: color-mix(in srgb, var(--main-color, #1e3a5f) 15%, #e7ebf0);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--main-color, #1e3a5f) 8%, transparent);
}

.global-safety-reminder-copy {
  border-color: color-mix(in srgb, var(--main-color, #1e3a5f) 16%, #e5eaf0);
  background: color-mix(in srgb, var(--main-color, #1e3a5f) 5%, #fff);
}

.global-safety-reminder-confirm::before {
  background: color-mix(in srgb, var(--main-color, #1e3a5f) 14%, #e5eaf0);
}

@media (max-width: 520px) {
  .global-safety-reminder,
  .global-safety-reminder-panel {
    background:
      radial-gradient(
        circle at 95% 3%,
        color-mix(in srgb, var(--main-color, #1e3a5f) 8%, transparent),
        transparent 22%
      ),
      #fff;
  }
}

body.safety-reminder-open .global-safety-reminder {
  padding-bottom: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 520px) {
  .global-safety-reminder-panel {
    min-height: calc(100dvh - var(--ad-placeholder-height) - env(safe-area-inset-bottom)) !important;
  }
}

/* Desktop safety reminder: use the available width instead of a tall phone layout */
@media (min-width: 768px) {
  .global-safety-reminder {
    padding: 32px 32px calc(var(--ad-placeholder-height) + 24px) !important;
  }

  .global-safety-reminder-panel {
    width: min(860px, calc(100vw - 64px));
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(300px, 0.95fr);
    grid-template-areas:
      "mark mark"
      "visual kicker"
      "visual title"
      "visual copy"
      "visual action";
    column-gap: 42px;
    row-gap: 0;
    align-items: center;
    padding: 34px 42px 38px;
    border-radius: 28px;
    text-align: left;
  }

  .global-safety-reminder-mark {
    grid-area: mark;
    justify-self: center;
    margin-bottom: 22px;
  }

  .global-safety-reminder-panel .global-safety-reminder-visual {
    grid-area: visual;
    align-self: stretch;
    width: 100%;
    max-width: 390px;
    min-height: 100%;
    margin: 0;
  }

  .global-safety-reminder-kicker {
    grid-area: kicker;
    justify-self: start;
    margin: 0 0 9px;
  }

  .global-safety-reminder h2 {
    grid-area: title;
    max-width: none;
    margin: 0 0 20px;
    text-align: left;
  }

  .global-safety-reminder-copy {
    grid-area: copy;
    margin: 0 0 22px;
  }

  .global-safety-reminder-primary {
    grid-area: action;
    justify-self: start;
    margin: 0;
  }

  .global-ad-placeholder {
    width: min(760px, calc(100% - 64px));
    padding-inline: 24px;
  }
}

/* Surface palette: keep the daily flow to one page gray and one card white */
:root {
  --nippo-page-surface: #f4f7fa;
  --nippo-card-surface: #fff;
}

body[data-step] {
  background: var(--nippo-page-surface) !important;
}

html:has(body[data-step]) {
  background: var(--nippo-page-surface) !important;
}

body[data-step] .step-top-brand-bar,
body[data-step] .step-bar {
  background: var(--nippo-card-surface) !important;
}

body[data-step] .step-top-brand-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--main-color, #1e3a5f),
    color-mix(in srgb, var(--main-color, #1e3a5f) 62%, #fff)
  );
  pointer-events: none;
}

body[data-step] .page {
  background: var(--nippo-page-surface) !important;
}

body[data-step] .step-context-bar {
  position: relative !important;
  border-color: #d7e0e8 !important;
  background: var(--nippo-card-surface) !important;
}

body[data-step] .step-context-bar::before {
  display: none !important;
  content: none !important;
}

body[data-step] .step-context-bar .step-context-info,
body[data-step] .step-context-bar .step-context-item {
  background: transparent !important;
}

body[data-step] .page > .phase-prompt,
body[data-step] .page > .card:not(.is-phase-hidden),
body[data-step] #pickupList > .card:not(.is-phase-hidden),
body[data-step] #deliveryList > .card:not(.is-phase-hidden),
body[data-step] .phase-actions,
body[data-step] .global-ad-placeholder {
  background: var(--nippo-card-surface) !important;
}

/* Keep the primary navigation controls directly above the fixed ad */
body[data-step] .phase-actions {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--ad-placeholder-height) + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(430px, 100%) !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid #dfe7f1 !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08) !important;
  z-index: 180 !important;
}

body[data-step] .scroll-top-btn {
  bottom: calc(var(--ad-placeholder-height) + 12px + env(safe-area-inset-bottom)) !important;
  z-index: 190 !important;
}

body[data-step] .page {
  padding-bottom: calc(var(--ad-placeholder-height) + 96px + env(safe-area-inset-bottom)) !important;
}

/* Keep the guidance strip visually connected to the values below it */
body.step1-basic-page[data-step="1"][data-phase-index] .page > .phase-prompt + .card,
body[data-step] .page > .phase-prompt + .card {
  padding-top: 10px !important;
}

/* Use one vertically centered prompt-strip height, with or without an action. */
body.step1-basic-page[data-step="1"][data-phase-index] .page > .phase-prompt,
body[data-step] .page > .phase-prompt {
  min-height: 62px !important;
  padding: 8px 14px !important;
  align-items: center !important;
}

body[data-step] .page > .phase-prompt .phase-prompt-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
}

/* The edit button is moved into the prompt; remove its now-empty source row. */
body.step1-basic-page[data-step="1"][data-phase-index="1"] .phase-prompt + .card > .card-head-inline:not(:has(*)) {
  display: none !important;
  margin: 0 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="1"] .phase-prompt + .card {
  padding-top: 4px !important;
}

/* Safety surfaces: match the main page gray canvas and white cards */
.global-safety-reminder,
.global-safety-reminder-panel {
  background: var(--nippo-page-surface, #f4f7fa) !important;
}

.global-safety-reminder-panel {
  border-color: #dce4ec !important;
}

.global-safety-reminder-mark,
.global-safety-reminder-panel .global-safety-reminder-visual,
.global-safety-reminder-copy {
  background: var(--nippo-card-surface, #fff) !important;
}

.global-safety-reminder-mark,
.global-safety-reminder-panel .global-safety-reminder-visual,
.global-safety-reminder-panel .safety-visual-picture,
.global-safety-reminder-copy {
  border-color: #dce4ec !important;
}

.global-safety-reminder-panel .global-safety-reminder-visual {
  box-shadow: 0 8px 20px rgba(52, 68, 84, 0.06) !important;
}

.global-safety-reminder-confirm::before {
  left: 12% !important;
  right: 12% !important;
}

.global-safety-reminder-panel .safety-visual-picture,
body[data-step] .global-safety-notice .safety-visual-picture {
  box-shadow: 0 6px 14px rgba(52, 68, 84, 0.08) !important;
}

/* Shadows stay neutral even when the theme color changes. */
body[data-step] .step-bar {
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07) !important;
}

body[data-step] .step-context-bar {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

body[data-step] .step.active .step-line {
  border-color: color-mix(in srgb, var(--main-color) 40%, #d9e2ec) !important;
  background: color-mix(in srgb, var(--main-color) 16%, #fff) !important;
  color: #263241 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body[data-step] .step:not(.active) .step-label {
  font-size: calc(var(--base-font-size) - 1px) !important;
  font-weight: 400 !important;
}

body[data-step] .switch-pill input:checked + .switch-pill-slider {
  background: color-mix(in srgb, var(--main-color) 16%, #fff) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--main-color) 40%, #d9e2ec) !important;
}

body[data-step] .phase-btn-primary,
.global-safety-reminder-primary {
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.16),
    0 2px 6px rgba(15, 23, 42, 0.10) !important;
}

.global-safety-reminder-primary:hover {
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18) !important;
}

body[data-step] .scroll-top-btn {
  border-color: color-mix(in srgb, var(--main-color) 40%, #d9e2ec) !important;
  background: color-mix(in srgb, var(--main-color) 16%, #fff) !important;
  color: #263241 !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.14) !important;
}

body[data-step] .phase-btn-primary {
  left: 50% !important;
  width: min(196px, calc(100% - 152px)) !important;
  transform: translateX(-50%) !important;
}

body[data-step="1"] #openSignatureModalBtn,
body[data-step="1"] #openSignatureModalBtn.is-rewrite {
  border: 1px solid color-mix(in srgb, var(--main-color) 40%, #d9e2ec) !important;
  background: color-mix(in srgb, var(--main-color) 16%, #fff) !important;
  color: #263241 !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.12) !important;
}

body[data-step="2"] .special-loading-time-btn,
body[data-step="3"] .delivery-time-btn {
  border: 1px solid color-mix(in srgb, var(--main-color) 40%, #d9e2ec) !important;
  background: color-mix(in srgb, var(--main-color) 16%, #fff) !important;
  color: #263241 !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.12) !important;
}

body[data-step="2"] .special-loading-time-btn:hover,
body[data-step="2"] .special-loading-time-btn:focus-visible,
body[data-step="3"] .delivery-time-btn:hover,
body[data-step="3"] .delivery-time-btn:focus-visible {
  border-color: color-mix(in srgb, var(--main-color) 48%, #d9e2ec) !important;
  background: color-mix(in srgb, var(--main-color) 22%, #fff) !important;
  color: #263241 !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.14) !important;
}

body[data-step] .step.done .step-line {
  border-color: #cbd3dc !important;
  background: #e4e8ed !important;
  color: #667281 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body[data-step] .step.done .step-label {
  color: #8b95a2 !important;
  font-weight: 400 !important;
}

body[data-step] .step.done:not(:last-child)::before,
body[data-step] .step.done:not(:last-child)::after {
  background: #d5dbe2 !important;
}

/* Back navigation lives above the route context; keep the bottom action centered. */
body[data-step] .phase-btn-back {
  position: absolute !important;
  top: auto !important;
  left: max(0px, calc(50% - 190px)) !important;
  right: auto !important;
  bottom: 20px !important;
  display: flex !important;
  gap: 1px !important;
  width: auto !important;
  min-width: 64px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 6px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8290a3 !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 175 !important;
}

body[data-step] .scroll-top-btn {
  left: calc(50% + 126px) !important;
  right: auto !important;
}

body[data-step] .phase-actions:has(.phase-btn-back:not([hidden])) .phase-btn-primary {
  width: min(196px, calc(100% - 184px)) !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .phase-prompt + .card {
  padding-top: 4px !important;
  padding-bottom: 12px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-select-area {
  gap: 6px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-main-row .date-picker-btn {
  height: 30px !important;
  min-height: 30px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-list {
  gap: 10px !important;
  margin-bottom: 6px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap {
  position: relative !important;
  display: grid !important;
  gap: 6px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap::after {
  content: '' !important;
  position: absolute !important;
  right: 16px !important;
  bottom: 20px !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid #8290a3 !important;
  border-bottom: 2px solid #8290a3 !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap::before {
  content: '' !important;
  position: absolute !important;
  left: 14px !important;
  bottom: 17px !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid #b8c4d2 !important;
  border-radius: 50% !important;
  background: #fff !important;
  pointer-events: none !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap.has-selection::before {
  border-color: var(--main-color) !important;
  background:
    radial-gradient(circle at center, var(--main-color) 0 3px, #fff 3.5px 100%) !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #667386 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap.has-selection .bin-select-label::after {
  content: '選択中' !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--main-color) 16%, #fff) !important;
  color: color-mix(in srgb, var(--main-color) 78%, #263241) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] #normalBinSelect.bin-select {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 50px !important;
  padding: 0 40px 0 40px !important;
  appearance: none !important;
  border: 1px solid #dce4ee !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #263241 !important;
  font: inherit !important;
  font-size: 0.94rem !important;
  font-weight: 650 !important;
  outline: none !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap.has-selection .bin-select {
  border-color: color-mix(in srgb, var(--main-color) 42%, #dce4ee) !important;
  background: color-mix(in srgb, var(--main-color) 9%, #fff) !important;
  color: #1f2b3a !important;
  box-shadow: inset 4px 0 0 var(--main-color) !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select:focus {
  border-color: color-mix(in srgb, var(--main-color) 48%, #d9e2ec) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-color) 12%, transparent) !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select:disabled {
  background: #f4f7fa !important;
  color: #9aa4b2 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item-special {
  min-height: 58px !important;
  border: 1px solid #dce4ee !important;
  border-radius: 10px !important;
  background: #fff !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item-special.active {
  border-color: color-mix(in srgb, var(--main-color) 34%, #dce4ee) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--main-color) 9%, #fff) !important;
  box-shadow: inset 4px 0 0 var(--main-color) !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item-special .bin-name {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item-special.active .bin-name::after {
  content: '選択中' !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--main-color) 16%, #fff) !important;
  color: color-mix(in srgb, var(--main-color) 78%, #263241) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-manage-link {
  align-self: flex-end !important;
  width: auto !important;
  padding: 4px 2px !important;
  border: 0 !important;
  background: transparent !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-dow {
  margin-left: -3px !important;
}

body[data-step] .step-context-date-dow {
  margin-left: 3px !important;
}

@media (max-width: 379px) {
  body[data-step] .phase-btn-back {
    left: 0 !important;
  }

  body[data-step] .scroll-top-btn {
    left: calc(100% - 64px) !important;
  }
}

body[data-step] .phase-btn-back::before {
  content: '＜' !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  color: #8290a3 !important;
  font-size: 0.92rem !important;
  transform: none !important;
}

body[data-step]:not([data-phase-index="0"]) .step-context-bar {
  margin-top: calc(var(--fixed-step-bar-height) + 8px) !important;
  margin-bottom: 12px !important;
}

@media (min-width: 430px) {
  body[data-step] .phase-btn-back {
    width: auto !important;
    min-width: 64px !important;
    padding: 0 6px 0 0 !important;
    color: #8290a3 !important;
    font-size: 0.84rem !important;
  }

  body[data-step] .phase-btn-back::before {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

body[data-step] .global-safety-notice .global-safety-reminder-visual,
body[data-step] .global-safety-notice .global-safety-reminder-copy {
  width: 100% !important;
  max-width: none !important;
  border-color: #dce4ec !important;
  border-radius: 10px !important;
  background: var(--nippo-card-surface, #fff) !important;
  box-shadow: 0 6px 16px rgba(52, 68, 84, 0.05) !important;
}

body[data-step] .global-safety-notice {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Settings typography follows the compact scale used by the main cards */
body[data-step] .theme-drawer-head {
  position: relative !important;
  height: var(--fixed-top-brand-height) !important;
  min-height: var(--fixed-top-brand-height) !important;
  padding: 0 18px !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

body[data-step] .theme-drawer-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--main-color, #1e3a5f),
    color-mix(in srgb, var(--main-color, #1e3a5f) 62%, #fff)
  );
  pointer-events: none;
}

body[data-step] .theme-drawer-close {
  order: 0;
  color: #8290a3 !important;
}

body[data-step] .theme-drawer-card {
  font-size: 0.9rem !important;
}

body[data-step] .theme-drawer-title {
  font-size: 1.02rem !important;
  transform: translate(3px, 2px);
}

body[data-step] .theme-drawer-section-title {
  font-size: 1.08rem !important;
}

body[data-step] .theme-drawer-field label,
body[data-step] .theme-drawer-field-inline label,
body[data-step] .theme-drawer-field-label {
  font-size: 0.9rem !important;
}

body[data-step] .theme-drawer-field select,
body[data-step] .theme-drawer-field input[type="text"],
body[data-step] .theme-drawer-field input[type="email"],
body[data-step] .theme-drawer-field input[type="tel"],
body[data-step] .theme-drawer-route-link {
  font-size: 0.92rem !important;
}

body[data-step] .theme-drawer-reset {
  font-size: 0.88rem !important;
}

body[data-step] .theme-recipient-card-title {
  font-size: 0.96rem !important;
}

body[data-step] .theme-recipient-summary-row {
  font-size: 0.88rem !important;
}

@media (max-width: 520px) {
  .global-safety-reminder,
  .global-safety-reminder-panel {
    background: var(--nippo-page-surface, #f4f7fa) !important;
  }
}

/* Opening safety reminder: the highlighted content is one unified white card. */
.global-safety-reminder-panel {
  background: var(--nippo-page-surface, #f4f7fa) !important;
}

.global-safety-reminder-content-card {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 20px;
  padding: 18px 16px;
  border: 1px solid #dce4ec;
  border-radius: 10px;
  background: var(--nippo-card-surface, #fff);
  box-shadow: 0 8px 20px rgba(30, 41, 59, 0.07);
}

.global-safety-reminder-content-card .global-safety-reminder-visual {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.global-safety-reminder-content-card .global-safety-reminder-kicker {
  margin-bottom: 8px !important;
}

.global-safety-reminder-content-card h2 {
  margin-bottom: 18px !important;
}

.global-safety-reminder-content-card .global-safety-reminder-copy {
  margin: 0 !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 520px) {
  .global-safety-reminder {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .global-safety-reminder::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
      90deg,
      var(--main-color, #1e3a5f),
      color-mix(in srgb, var(--main-color, #1e3a5f) 62%, #fff)
    );
    pointer-events: none;
  }

  .global-safety-reminder-panel {
    width: 100% !important;
    min-height: calc(100dvh - var(--ad-placeholder-height) - env(safe-area-inset-bottom) - 24px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .global-safety-reminder-panel::before {
    display: none !important;
  }

  .global-safety-reminder-content-card {
    padding: 18px 14px;
  }
}

@media (min-width: 768px) {
  .global-safety-reminder-panel {
    display: flex !important;
    width: min(860px, calc(100vw - 64px));
    padding: 34px 42px 38px;
    border: 0 !important;
    border-radius: 28px;
    box-shadow: none !important;
    text-align: center;
  }

  .global-safety-reminder-content-card {
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(300px, 0.95fr);
    grid-template-areas:
      "visual kicker"
      "visual title"
      "visual copy";
    column-gap: 42px;
    align-items: center;
    padding: 28px;
    text-align: left;
  }

  .global-safety-reminder-content-card .global-safety-reminder-visual {
    grid-area: visual;
    align-self: stretch;
    max-width: 390px;
    margin: 0 !important;
  }

  .global-safety-reminder-content-card .global-safety-reminder-kicker {
    grid-area: kicker;
    justify-self: start;
  }

  .global-safety-reminder-content-card h2 {
    grid-area: title;
    max-width: none;
    text-align: left;
  }

  .global-safety-reminder-content-card .global-safety-reminder-copy {
    grid-area: copy;
  }

  .global-safety-reminder-primary {
    justify-self: auto;
  }
}

/* Give the warning card and its confirmation button more vertical separation. */
@media (min-width: 768px) {
  #globalSafetyReminder .global-safety-reminder-content-card {
    transform: translateY(-50px);
  }

  #globalSafetyReminder .global-safety-reminder-primary {
    transform: translateY(20px);
  }
}

/* In-page safety notice: use the same single-card composition as the opening reminder. */
body[data-step] .global-safety-notice .global-safety-notice-card {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 14px 16px;
  border: 1px solid #dce4ec;
  border-radius: 10px;
  background: var(--nippo-card-surface, #fff);
  box-shadow: 0 6px 16px rgba(52, 68, 84, 0.05);
}

body[data-step] .global-safety-notice .global-safety-notice-card > .global-safety-reminder-visual {
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-step] .global-safety-notice .global-safety-notice-card > .global-safety-reminder-kicker {
  margin-bottom: 4px !important;
}

body[data-step] .global-safety-notice .global-safety-notice-card > h2 {
  margin-bottom: 12px !important;
}

body[data-step] .global-safety-notice .global-safety-notice-card > .global-safety-reminder-copy {
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Use one shared gap below the duty-date / route card on every step page. */
:root {
  --step-context-content-gap: 12px;
}

body[data-step] .step-context-bar {
  margin-bottom: var(--step-context-content-gap) !important;
}

body[data-step] .step-context-bar + .page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body[data-step] .step-context-bar + .page > .phase-prompt:first-child,
body[data-step] .step-context-bar + .page > .card:first-child {
  margin-top: 0 !important;
}

/* 2026-08 loading: route-order timeline for case and pallet entry */
body.step1-basic-page[data-step="1"][data-phase-index="3"] .phase-prompt {
  display: none !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="3"] .step-context-bar {
  margin-bottom: 0 !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="3"] .card:has(.inspection-focus-area) {
  padding-top: 14px !important;
}

body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-item {
  min-height: 326px;
  padding-top: 18px;
  padding-bottom: 16px;
}

body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-place {
  margin-top: 12px;
}

body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-revise {
  margin-top: 2px;
}

body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-choices .inspection-choice span {
  min-height: 82px;
}

body[data-step="2"] .phase-prompt {
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-step="2"] .phase-prompt-title {
  flex: 0 1 auto !important;
  font-size: 1.25rem !important;
}

body[data-step="2"] .loading-prompt-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: #66768a;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

body[data-step="2"] .loading-prompt-meta strong {
  color: var(--main-color);
  font-size: 0.82rem;
  font-weight: 850;
}

body[data-step="2"] .loading-settings-panel {
  margin-bottom: 14px !important;
  border-radius: 10px !important;
}

body[data-step="2"] .loading-settings-head {
  min-height: 58px !important;
  padding: 10px 12px !important;
}

body[data-step="2"] .loading-settings-kicker {
  margin-bottom: 5px;
  color: #8290a3;
  font-size: 0.7rem;
  font-weight: 750;
}

body[data-step="2"] .loading-settings-summary-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  color: #66768a;
  font-size: 0.75rem;
}

body[data-step="2"] .loading-settings-summary-inline strong {
  margin-left: 5px;
  color: #172235;
  font-weight: 850;
}

body[data-step="2"] .loading-settings-toggle {
  min-width: 54px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--main-color);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

body[data-step="2"] .loading-settings-editor[hidden] {
  display: none !important;
}

body[data-step="2"] .loading-settings-panel.is-editing .loading-settings-editor {
  display: grid !important;
  border-top: 1px solid #e5eaf2 !important;
}

body[data-step="2"] #pickupList {
  position: relative;
  padding-left: 34px;
}

body[data-step="2"] #pickupList::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  border-radius: 999px;
  background: #cdd8e5;
}

body[data-step="2"] .loading-input-card #pickupList > .loading-phase-card {
  position: relative !important;
  overflow: visible !important;
  border-radius: 10px !important;
}

body[data-step="2"] .loading-route-index {
  position: absolute;
  left: -42px;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #b8c5d5;
  border-radius: 50%;
  background: #fff;
  color: #66768a;
  font-size: 0.82rem;
  font-weight: 850;
  transform: translateY(-50%);
}

body[data-step="2"] .loading-phase-card.is-loading-destination-active .loading-route-index {
  border-color: var(--main-color);
  color: var(--main-color);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--main-color) 16%, transparent);
}

body[data-step="2"] .loading-phase-card.is-loading-complete .loading-route-index {
  border-color: var(--main-color);
  background: var(--main-color);
  color: #fff;
}

body[data-step="2"] .loading-input-card .loading-destination-toggle {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 22px !important;
  gap: 6px 10px !important;
  align-items: center !important;
  min-height: 62px !important;
  padding: 12px 14px !important;
}

body[data-step="2"] .loading-destination-main {
  color: #172235 !important;
  font-size: 0.96rem !important;
  font-weight: 850 !important;
}

body[data-step="2"] .loading-destination-sub {
  grid-column: 1 / 2;
  color: #66768a !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
}

body[data-step="2"] .loading-card-status {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
}

body[data-step="2"] .loading-destination-toggle::after {
  grid-column: 3 / 4 !important;
  grid-row: 1 / span 2 !important;
}

body[data-step="2"] .loading-phase-card.is-loading-destination-active {
  border-color: color-mix(in srgb, var(--main-color) 62%, #dce4ee) !important;
  box-shadow: 0 8px 22px rgba(44, 72, 112, 0.08) !important;
}

body[data-step="2"] .loading-input-card .loading-phase-card.is-loading-destination-active > .loading-stop-body {
  padding: 4px 12px 14px !important;
}

body[data-step="2"] .loading-group-card {
  padding: 2px 0 8px !important;
  border: 0 !important;
  background: #fff !important;
}

body[data-step="2"] .loading-delivery-row {
  display: grid !important;
  grid-template-columns: minmax(90px, 1fr) minmax(118px, 1.25fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-top: 1px solid #e8edf3 !important;
}

body[data-step="2"] .loading-delivery-row:first-child,
body[data-step="2"] .loading-delivery-row.is-first-loading-row {
  border-top: 0 !important;
}

body[data-step="2"] .loading-shipper {
  min-width: 0;
}

body[data-step="2"] .loading-shipper strong {
  display: block;
  margin-bottom: 4px;
  color: #8290a3;
  font-size: 0.68rem;
  font-weight: 700;
}

body[data-step="2"] .loading-shipper span {
  display: block;
  overflow: hidden;
  color: #172235;
  font-size: 0.9rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-step="2"] .loading-qty-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
}

body[data-step="2"][data-loading-input-mode="destination"][data-loading-unit-mode="case_piece"] .loading-destination-qty-row {
  display: none !important;
}

body[data-step="2"][data-loading-input-mode="destination"][data-loading-unit-mode="pallet"] .loading-destination-qty-row {
  display: grid !important;
}

body[data-step="2"][data-loading-input-mode="destination"][data-loading-unit-mode="pallet"] .loading-delivery-row {
  display: none !important;
}

body[data-step="2"] .loading-qty-label {
  color: #8290a3 !important;
  font-size: 0.7rem !important;
}

body[data-step="2"] .loading-qty-inputs {
  min-width: 0;
}

body[data-step="2"] .loading-qty-main-field {
  min-width: 0;
}

body[data-step="2"] .loading-qty-input {
  min-height: 52px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  text-align: right !important;
}

body[data-step="2"] .loading-card-advance {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--main-color);
  border-radius: 10px;
  background: var(--main-color);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 850;
  cursor: pointer;
}

body[data-step="2"] .normal-loading-time-block {
  position: relative;
  margin-left: 34px !important;
  border: 1px solid #dce4ee !important;
  border-radius: 10px !important;
  background: #fff !important;
}

body[data-step="2"] .normal-loading-time-block::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 50%;
  z-index: 2;
  width: 18px;
  height: 18px;
  border: 2px solid var(--main-color);
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}

@media (max-width: 360px) {
  body[data-step="2"] .loading-settings-summary-inline {
    display: grid;
    gap: 4px;
  }

  body[data-step="2"] .loading-delivery-row {
    grid-template-columns: minmax(78px, 0.9fr) minmax(108px, 1.1fr) !important;
    gap: 8px !important;
  }
}

/* Responsive daily-report layout: phone, tablet and desktop. */
body[data-step] {
  --report-width: 100%;
  --report-gutter: 12px;
}
body[data-step] .page,
body.step1-basic-page[data-step="1"] .page {
  box-sizing: border-box !important;
  width: var(--report-width) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: var(--report-gutter) !important;
  padding-bottom: calc(var(--ad-placeholder-height) + 124px + env(safe-area-inset-bottom)) !important;
}
body[data-step] .step-top-brand-bar,
body[data-step] .step-bar,
body[data-step] .phase-actions,
body[data-step] .global-ad-placeholder {
  box-sizing: border-box !important;
  width: var(--report-width) !important;
  max-width: 100% !important;
}
body[data-step] .page > .step-context-bar,
body[data-step] .page > .phase-prompt,
body[data-step] .page > .card,
body.step1-basic-page[data-step="1"] .page > .step-context-bar,
body.step1-basic-page[data-step="1"] .page > .phase-prompt,
body.step1-basic-page[data-step="1"] .page > .card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}
body[data-step] .page input,
body[data-step] .page select,
body[data-step] .page textarea { max-width: 100%; min-width: 0; }
body[data-step] .page img,
body[data-step] .page canvas { max-width: 100%; }
body[data-step] .page :is(input, select, textarea, button) {
  scroll-margin-block: calc(var(--fixed-step-bar-height) + 24px) calc(var(--ad-placeholder-height) + 124px);
}
body[data-step] .theme-drawer-panel {
  width: min(460px, 100vw) !important;
  max-height: 100dvh;
}
@media (min-width: 600px) {
  body[data-step] { --report-width: min(760px, calc(100% - 40px)); --report-gutter: 24px; }
  body[data-step] .page > .card { padding-inline: 24px !important; }
  body[data-step] .phase-actions { padding-inline: 24px !important; }
}
@media (min-width: 1100px) {
  body[data-step] { --report-width: min(1040px, calc(100% - 80px)); --report-gutter: 32px; }
  body[data-step] .page > .card { padding-inline: 32px !important; }
  /* On a large display, controls follow the form so they cannot cover its contents. */
  body[data-step] .phase-actions {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 24px auto 0 !important;
    border: 1px solid #dfe7f1 !important;
    border-radius: 12px !important;
  }
  body[data-step] .page { padding-bottom: calc(var(--ad-placeholder-height) + 40px) !important; }
  body[data-step] .theme-drawer-panel { width: min(520px, 100vw) !important; }
}
@media (max-width: 599px) {
  body[data-step] .step-bar { padding-inline: 8px !important; flex-wrap: nowrap !important; }
  body[data-step] .step-bar .step { min-width: 0; }
  body[data-step] .page input,
  body[data-step] .page select,
  body[data-step] .page textarea { font-size: max(16px, 1rem) !important; }
  body[data-step] .theme-drawer-panel { width: 100vw !important; }
  body[data-step] .global-ad-placeholder { padding-inline: 12px !important; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body[data-step] .phase-actions {
    position: relative !important; left: auto !important; bottom: auto !important;
    transform: none !important; width: 100% !important; margin-top: 16px !important;
  }
}

/* Vehicle inspection: stable controls and direct access to each result. */
body.step1-basic-page[data-step="1"] .inspection-item-navigation {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin: 12px 0;
}
body.step1-basic-page[data-step="1"] .inspection-item-navigation button {
  min-height: 44px; padding: 6px 2px; border: 1px solid #b8c5d5; border-radius: 8px;
  background: #fff; color: #263c55; font: inherit; font-weight: 700; cursor: pointer;
}
body.step1-basic-page[data-step="1"] .inspection-item-navigation button[data-state="good"] { background: #edf6f2; color: #205843; }
body.step1-basic-page[data-step="1"] .inspection-item-navigation button[data-state="bad"] { background: #fff1f2; color: #a11932; border-color: #c83850; }
body.step1-basic-page[data-step="1"] .inspection-item-navigation button[aria-current="step"] { outline: 2px solid var(--main-color); outline-offset: 1px; }
body.step1-basic-page[data-step="1"] .inspection-focus-item.is-active {
  padding: 20px !important; min-height: 290px; text-align: left !important;
}
body.step1-basic-page[data-step="1"] .inspection-focus-place { font-size: 1rem !important; color: #53657a !important; margin: 10px 0 !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-question { font-size: clamp(18px, 2vw, 24px) !important; line-height: 1.5 !important; margin: 8px 0 !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-help { min-height: 24px; margin: 8px 0 12px !important; color: #44586d !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-revise,
body.step1-basic-page[data-step="1"] .inspection-next-item {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px;
  width: auto !important; padding: 8px 14px !important; margin: 0 8px 12px 0 !important;
  border: 1px solid #b8c5d5 !important; border-radius: 8px; background: #fff; color: #263c55; font: inherit; cursor: pointer;
}
body.step1-basic-page[data-step="1"] .inspection-focus-revise:disabled,
body.step1-basic-page[data-step="1"] .inspection-next-item:disabled { opacity: .4; cursor: default; }
body.step1-basic-page[data-step="1"] .inspection-focus-choices { margin: 4px 0 0 !important; gap: 12px !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice { min-height: 64px !important; padding: 16px !important; font-size: 18px !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-item-count { text-align: left !important; font-weight: 800; }
body.step1-basic-page[data-step="1"] .inspection-focus-next { margin-top: 12px !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-area { scroll-margin-top: calc(var(--fixed-step-bar-height) + 16px); }
@media (max-width: 599px) {
  body.step1-basic-page[data-step="1"] .inspection-item-navigation { grid-template-columns: repeat(6,minmax(0,1fr)); }
  body.step1-basic-page[data-step="1"] .inspection-focus-item.is-active { padding: 14px !important; }
  body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice { padding: 12px 4px !important; font-size: 16px !important; }
}

/* Keep back-to-top aligned with the responsive report, clear of fixed controls. */
body[data-step] .scroll-top-btn {
  left: auto !important;
  right: calc((100% - var(--report-width)) / 2 + max(12px, env(safe-area-inset-right))) !important;
  bottom: calc(var(--ad-placeholder-height) + 88px + env(safe-area-inset-bottom)) !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
}
@media (min-width: 600px) {
  body[data-step] .scroll-top-btn {
    right: calc((100% - var(--report-width)) / 2 + 20px) !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
  }
}
@media (min-width: 1100px), (max-height: 500px) and (orientation: landscape) {
  body[data-step] .scroll-top-btn {
    bottom: calc(var(--ad-placeholder-height) + 16px + env(safe-area-inset-bottom)) !important;
  }
}
body[data-step].theme-drawer-open .scroll-top-btn,
body[data-step].safety-reminder-open .scroll-top-btn {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* FIELDWORK — focused, high-contrast vehicle inspection. */
body.step1-basic-page[data-step="1"] {
 --fieldwork-paper:#faf8f5; --fieldwork-ink:#191919; --fieldwork-orange:#ed4b00; --ad-placeholder-height:0px;
 background:var(--fieldwork-paper) !important; color:var(--fieldwork-ink) !important;
 font-size:17px; line-height:1.5;
}
body.step1-basic-page[data-step="1"] .global-ad-placeholder { display:none !important; }
body.step1-basic-page[data-step="1"] .step-top-brand-bar {
 background:var(--fieldwork-paper) !important; border:0 !important; box-shadow:none !important;
 min-height:68px !important; padding:12px 20px !important;
}
body.step1-basic-page[data-step="1"] .step-top-brand-bar::before { display:none !important; }
.fieldwork-wordmark { width:190px; height:34px; overflow:hidden; position:relative; }
.fieldwork-wordmark img { width:200px; max-width:none; height:auto; position:absolute; top:-33px; left:-4px; mix-blend-mode:multiply; }
body.step1-basic-page[data-step="1"] .step-bar {
 background:var(--fieldwork-paper) !important; border:0 !important; box-shadow:none !important; padding:12px 18px !important;
}
body.step1-basic-page[data-step="1"] .step-label { color:#252525 !important; font-size:15px !important; font-weight:700 !important; }
body.step1-basic-page[data-step="1"] .step.active .step-label { color:var(--fieldwork-orange) !important; }
body.step1-basic-page[data-step="1"] .step-context-bar {
 background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
 padding:10px 0 !important; margin-top:140px !important;
}
body.step1-basic-page[data-step="1"] :is(.step-context-item,.step-context-item span) { color:#252525 !important; }
body.step1-basic-page[data-step="1"] .page { background:transparent !important; padding-top:8px !important; padding-bottom:100px !important; }
body.step1-basic-page[data-step="1"] .page > .card { background:transparent !important; border:1px solid #ddd9d3 !important; border-radius:10px !important; box-shadow:none !important; }
body.step1-basic-page[data-step="1"] .page > .card:has(.inspection-focus-area) { border:0 !important; padding:0 !important; }
body.step1-basic-page[data-step="1"] .page > .card:has(.inspection-focus-area) > .card-section-header { display:none !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-area { display:block !important; padding:0 !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-overview { display:flex !important; align-items:center !important; justify-content:space-between !important; margin:0 !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-kicker { display:none !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-heading { font-size:24px !important; font-weight:900 !important; color:#111 !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-total { display:flex; align-items:baseline; gap:8px; color:#151515 !important; font-weight:900; }
body.step1-basic-page[data-step="1"] .inspection-focus-total > span { font-size:68px; line-height:1.15; letter-spacing:-.055em; }
body.step1-basic-page[data-step="1"] .inspection-focus-total > small { font-size:27px; color:#686868; }
body.step1-basic-page[data-step="1"] .inspection-focus-progress { display:none !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-sections {
 display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 !important;
 padding:12px 0 !important; margin:12px 0 24px !important; border-block:1px solid #dedbd6;
}
body.step1-basic-page[data-step="1"] .inspection-focus-section {
 min-height:70px !important; padding:8px 2px !important; border:0 !important; border-radius:12px !important;
 background:transparent !important; color:#111 !important; box-shadow:none !important; font-size:15px !important; font-weight:800 !important;
}
body.step1-basic-page[data-step="1"] .inspection-focus-section strong { color:inherit !important; font-size:16px !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-section[aria-selected="true"] { background:var(--fieldwork-orange) !important; color:#fff !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-item.is-active {
 min-height:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important;
 box-shadow:none !important; padding:0 !important; margin:0 !important; text-align:left !important;
}
body.step1-basic-page[data-step="1"] .inspection-focus-item-count { color:var(--fieldwork-orange) !important; font-size:16px !important; margin:0 0 8px !important; font-weight:750 !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-place { display:none !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-question { color:#111 !important; font-size:clamp(28px,7.5vw,40px) !important; line-height:1.35 !important; font-weight:900 !important; margin:0 0 18px !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-help { color:#282828 !important; font-size:16px !important; margin:0 0 18px !important; min-height:0 !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-choices { display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; margin:0 !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice {
 display:flex !important; justify-content:center !important; align-items:center !important; position:relative !important;
 min-height:68px !important; width:100% !important; padding:10px !important; border-radius:12px !important;
 background:#191919 !important; color:white !important; border:1.5px solid #191919 !important;
 font-size:21px !important; font-weight:850 !important; box-shadow:none !important;
}
body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice-bad { background:#fff !important; color:#ce201d !important; border-color:#ce201d !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice > span {
 display:flex !important; align-items:center !important; flex-direction:row !important; color:inherit !important; background:transparent !important;
 border:0 !important; padding:0 !important; height:auto !important; min-height:0 !important; font:inherit !important; box-shadow:none !important;
}
body.step1-basic-page[data-step="1"] .inspection-choice:has(input:focus-visible) { outline:3px solid #2177b3 !important; outline-offset:4px; }
body.step1-basic-page[data-step="1"] .inspection-choice:has(input:checked) { outline:3px solid var(--fieldwork-orange) !important; outline-offset:3px; }
body.step1-basic-page[data-step="1"] .fieldwork-item-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; border-top:1px solid #e3e0dc; margin:24px 0 0; padding-top:20px; }
body.step1-basic-page[data-step="1"] .fieldwork-item-actions :is(.inspection-focus-revise,.inspection-next-item) {
 width:100% !important; min-height:54px !important; padding:10px 4px !important; margin:0 !important;
 background:transparent !important; border:1px solid #252525 !important; border-radius:8px !important;
 color:#191919 !important; font-size:18px !important; font-weight:750 !important;
}
body.step1-basic-page[data-step="1"] .inspection-focus-next { display:none !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-summary { font-size:14px !important; margin:22px 0 0 !important; color:#555 !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-reset { min-height:44px; color:#555 !important; }
body.step1-basic-page[data-step="1"] .inspection-pending { display:none !important; }
body.step1-basic-page[data-step="1"] .phase-actions { bottom:0 !important; box-shadow:none !important; }
body.step1-basic-page[data-step="1"][data-phase-index="3"] .phase-actions { position:relative !important; left:auto !important; transform:none !important; width:100% !important; margin:24px 0 0 !important; }
body.step1-basic-page[data-step="1"] .phase-btn { border-radius:8px !important; box-shadow:none !important; }
body.step1-basic-page[data-step="1"] .scroll-top-btn { bottom:100px !important; color:#252525 !important; background:var(--fieldwork-paper) !important; }
body.step1-basic-page[data-step="1"][data-phase-index="3"] .scroll-top-btn { bottom:20px !important; }
body.step1-basic-page[data-step="1"] .fieldwork-list-dialog { width:min(600px,calc(100vw - 32px)); max-height:85dvh; border:1px solid #d6d1c9; border-radius:14px; padding:22px; color:#191919; background:var(--fieldwork-paper); }
body.step1-basic-page[data-step="1"] .fieldwork-list-dialog::backdrop { background:#0008; }
body.step1-basic-page[data-step="1"] .fieldwork-list-dialog > button { padding:12px 24px; font:inherit; background:#191919; color:white; border:0; border-radius:8px; }
body.step1-basic-page[data-step="1"] [hidden] { display:none !important; }
body.step1-basic-page[data-step="1"][data-phase-index] .page > .card:has(.inspection-focus-area) { padding:0 !important; border:0 !important; background:transparent !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-total > span { font-size:68px !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-total > small { font-size:27px !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-question { font-size:clamp(32px,9vw,44px) !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-item:not(.fieldwork-fuel) .inspection-focus-place { display:block !important; color:#555 !important; font-size:16px !important; }
body.step1-basic-page[data-step="1"] .inspection-focus-total > span { font-weight:900 !important; }
body.step1-basic-page[data-step="1"] .page { margin-top:140px !important; }
body.step1-basic-page[data-step="1"] .step-top-brand-bar { gap:8px !important; padding-inline:12px !important; }
body.step1-basic-page[data-step="1"] .step-top-brand-bar .step-context-bar { margin:0 0 0 auto !important; padding:0 !important; width:auto !important; flex:none !important; }
body.step1-basic-page[data-step="1"] .step-top-brand-bar .step-context-label { display:none !important; }
body.step1-basic-page[data-step="1"] .step-top-brand-bar .step-context-info { gap:8px !important; }
body.step1-basic-page[data-step="1"] .step-top-brand-bar .step-context-item { gap:0 !important; font-size:13px !important; }
body.step1-basic-page[data-step="1"] .step-top-brand-bar .step-context-item span { font-size:13px !important; font-weight:750 !important; }
body.step1-basic-page[data-step="1"] .fieldwork-wordmark { width:164px !important; flex:none; }
body.step1-basic-page[data-step="1"] .fieldwork-wordmark img { width:174px !important; top:-27px; }
body.step1-basic-page[data-step="1"] .step-top-settings-btn { min-width:30px !important; width:30px !important; padding:4px !important; }
@media(max-width:359px) { body.step1-basic-page[data-step="1"] .fieldwork-wordmark { width:130px !important; } body.step1-basic-page[data-step="1"] .fieldwork-wordmark img { width:138px !important; top:-18px; } }
body.step1-basic-page[data-step="1"] .step-top-brand-bar .step-context-info { display:flex !important; width:auto !important; min-width:0 !important; }
body.step1-basic-page[data-step="1"] .step-top-brand-bar .step-context-item,
body.step1-basic-page[data-step="1"] .step-top-brand-bar #stepContextDate,
body.step1-basic-page[data-step="1"] .step-top-brand-bar #stepContextBin { width:auto !important; min-width:0 !important; max-width:90px !important; flex:0 1 auto !important; padding:0 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.step1-basic-page[data-step="1"] .inspection-focus-total > span { font-family:'Arial Black',Arial,sans-serif !important; }
@media(min-width:700px) {
 body.step1-basic-page[data-step="1"] .page > .card:has(.inspection-focus-area) { max-width:760px !important; margin-inline:auto !important; }
 body.step1-basic-page[data-step="1"] .inspection-focus-total > span { font-size:86px; }
 body.step1-basic-page[data-step="1"] .inspection-focus-question { font-size:38px !important; }
 body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice { min-height:78px !important; }
}
@media(prefers-reduced-motion:reduce) { body.step1-basic-page[data-step="1"] * { transition:none !important; scroll-behavior:auto !important; } }

/* FIELDWORK — focused, high-contrast vehicle inspection. */
body[data-step] {
 --fieldwork-paper:#faf8f5; --fieldwork-ink:#191919; --fieldwork-orange:#ed4b00; --ad-placeholder-height:0px;
 background:var(--fieldwork-paper) !important; color:var(--fieldwork-ink) !important;
 font-size:17px; line-height:1.5;
}
body[data-step] .global-ad-placeholder { display:none !important; }
body[data-step] .step-top-brand-bar {
 background:var(--fieldwork-paper) !important; border:0 !important; box-shadow:none !important;
 min-height:68px !important; padding:12px 20px !important;
}
body[data-step] .step-top-brand-bar::before { display:none !important; }
.fieldwork-wordmark { width:190px; height:34px; overflow:hidden; position:relative; }
.fieldwork-wordmark img { width:200px; max-width:none; height:auto; position:absolute; top:-33px; left:-4px; mix-blend-mode:multiply; }
body[data-step] .step-bar {
 background:var(--fieldwork-paper) !important; border:0 !important; box-shadow:none !important; padding:12px 18px !important;
}
body[data-step] .step-label { color:#252525 !important; font-size:15px !important; font-weight:700 !important; }
body[data-step] .step.active .step-label { color:var(--fieldwork-orange) !important; }
body[data-step] .step-context-bar {
 background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
 padding:10px 0 !important; margin-top:140px !important;
}
body[data-step] :is(.step-context-item,.step-context-item span) { color:#252525 !important; }
body[data-step] .page { background:transparent !important; padding-top:8px !important; padding-bottom:100px !important; }
body[data-step] .page > .card { background:transparent !important; border:1px solid #ddd9d3 !important; border-radius:10px !important; box-shadow:none !important; }
body[data-step] .page > .card:has(.inspection-focus-area) { border:0 !important; padding:0 !important; }
body[data-step] .page > .card:has(.inspection-focus-area) > .card-section-header { display:none !important; }
body[data-step] .inspection-focus-area { display:block !important; padding:0 !important; }
body[data-step] .inspection-focus-overview { display:flex !important; align-items:center !important; justify-content:space-between !important; margin:0 !important; }
body[data-step] .inspection-focus-kicker { display:none !important; }
body[data-step] .inspection-focus-heading { font-size:24px !important; font-weight:900 !important; color:#111 !important; }
body[data-step] .inspection-focus-total { display:flex; align-items:baseline; gap:8px; color:#151515 !important; font-weight:900; }
body[data-step] .inspection-focus-total > span { font-size:68px; line-height:1.15; letter-spacing:-.055em; }
body[data-step] .inspection-focus-total > small { font-size:27px; color:#686868; }
body[data-step] .inspection-focus-progress { display:none !important; }
body[data-step] .inspection-focus-sections {
 display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 !important;
 padding:12px 0 !important; margin:12px 0 24px !important; border-block:1px solid #dedbd6;
}
body[data-step] .inspection-focus-section {
 min-height:70px !important; padding:8px 2px !important; border:0 !important; border-radius:12px !important;
 background:transparent !important; color:#111 !important; box-shadow:none !important; font-size:15px !important; font-weight:800 !important;
}
body[data-step] .inspection-focus-section strong { color:inherit !important; font-size:16px !important; }
body[data-step] .inspection-focus-section[aria-selected="true"] { background:var(--fieldwork-orange) !important; color:#fff !important; }
body[data-step] .inspection-focus-item.is-active {
 min-height:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important;
 box-shadow:none !important; padding:0 !important; margin:0 !important; text-align:left !important;
}
body[data-step] .inspection-focus-item-count { color:var(--fieldwork-orange) !important; font-size:16px !important; margin:0 0 8px !important; font-weight:750 !important; }
body[data-step] .inspection-focus-place { display:none !important; }
body[data-step] .inspection-focus-question { color:#111 !important; font-size:clamp(28px,7.5vw,40px) !important; line-height:1.35 !important; font-weight:900 !important; margin:0 0 18px !important; }
body[data-step] .inspection-focus-help { color:#282828 !important; font-size:16px !important; margin:0 0 18px !important; min-height:0 !important; }
body[data-step] .inspection-focus-choices { display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; margin:0 !important; }
body[data-step] .inspection-focus-choices .inspection-choice {
 display:flex !important; justify-content:center !important; align-items:center !important; position:relative !important;
 min-height:68px !important; width:100% !important; padding:10px !important; border-radius:12px !important;
 background:#191919 !important; color:white !important; border:1.5px solid #191919 !important;
 font-size:21px !important; font-weight:850 !important; box-shadow:none !important;
}
body[data-step] .inspection-focus-choices .inspection-choice-bad { background:#fff !important; color:#ce201d !important; border-color:#ce201d !important; }
body[data-step] .inspection-focus-choices .inspection-choice > span {
 display:flex !important; align-items:center !important; flex-direction:row !important; color:inherit !important; background:transparent !important;
 border:0 !important; padding:0 !important; height:auto !important; min-height:0 !important; font:inherit !important; box-shadow:none !important;
}
body[data-step] .inspection-choice:has(input:focus-visible) { outline:3px solid #2177b3 !important; outline-offset:4px; }
body[data-step] .inspection-choice:has(input:checked) { outline:3px solid var(--fieldwork-orange) !important; outline-offset:3px; }
body[data-step] .fieldwork-item-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; border-top:1px solid #e3e0dc; margin:24px 0 0; padding-top:20px; }
body[data-step] .fieldwork-item-actions :is(.inspection-focus-revise,.inspection-next-item) {
 width:100% !important; min-height:54px !important; padding:10px 4px !important; margin:0 !important;
 background:transparent !important; border:1px solid #252525 !important; border-radius:8px !important;
 color:#191919 !important; font-size:18px !important; font-weight:750 !important;
}
body[data-step] .inspection-focus-next { display:none !important; }
body[data-step] .inspection-focus-summary { font-size:14px !important; margin:22px 0 0 !important; color:#555 !important; }
body[data-step] .inspection-focus-reset { min-height:44px; color:#555 !important; }
body[data-step] .inspection-pending { display:none !important; }
body[data-step] .phase-actions { bottom:0 !important; box-shadow:none !important; }
body[data-step][data-phase-index="3"] .phase-actions { position:relative !important; left:auto !important; transform:none !important; width:100% !important; margin:24px 0 0 !important; }
body[data-step] .phase-btn { border-radius:8px !important; box-shadow:none !important; }
body[data-step] .scroll-top-btn { bottom:100px !important; color:#252525 !important; background:var(--fieldwork-paper) !important; }
body[data-step][data-phase-index="3"] .scroll-top-btn { bottom:20px !important; }
body[data-step] .fieldwork-list-dialog { width:min(600px,calc(100vw - 32px)); max-height:85dvh; border:1px solid #d6d1c9; border-radius:14px; padding:22px; color:#191919; background:var(--fieldwork-paper); }
body[data-step] .fieldwork-list-dialog::backdrop { background:#0008; }
body[data-step] .fieldwork-list-dialog > button { padding:12px 24px; font:inherit; background:#191919; color:white; border:0; border-radius:8px; }
body[data-step] [hidden] { display:none !important; }
body[data-step][data-phase-index] .page > .card:has(.inspection-focus-area) { padding:0 !important; border:0 !important; background:transparent !important; }
body[data-step] .inspection-focus-total > span { font-size:68px !important; }
body[data-step] .inspection-focus-total > small { font-size:27px !important; }
body[data-step] .inspection-focus-question { font-size:clamp(32px,9vw,44px) !important; }
body[data-step] .inspection-focus-item:not(.fieldwork-fuel) .inspection-focus-place { display:block !important; color:#555 !important; font-size:16px !important; }
body[data-step] .inspection-focus-total > span { font-weight:900 !important; }
body[data-step] .page { margin-top:140px !important; }
body[data-step] .step-top-brand-bar { gap:8px !important; padding-inline:12px !important; }
body[data-step] .step-top-brand-bar .step-context-bar { margin:0 0 0 auto !important; padding:0 !important; width:auto !important; flex:none !important; }
body[data-step] .step-top-brand-bar .step-context-label { display:none !important; }
body[data-step] .step-top-brand-bar .step-context-info { gap:8px !important; }
body[data-step] .step-top-brand-bar .step-context-item { gap:0 !important; font-size:13px !important; }
body[data-step] .step-top-brand-bar .step-context-item span { font-size:13px !important; font-weight:750 !important; }
body[data-step] .fieldwork-wordmark { width:164px !important; flex:none; }
body[data-step] .fieldwork-wordmark img { width:174px !important; top:-27px; }
body[data-step] .step-top-settings-btn { min-width:30px !important; width:30px !important; padding:4px !important; }
@media(max-width:359px) { body[data-step] .fieldwork-wordmark { width:130px !important; } body[data-step] .fieldwork-wordmark img { width:138px !important; top:-18px; } }
body[data-step] .step-top-brand-bar .step-context-info { display:flex !important; width:auto !important; min-width:0 !important; }
body[data-step] .step-top-brand-bar .step-context-item,
body[data-step] .step-top-brand-bar #stepContextDate,
body[data-step] .step-top-brand-bar #stepContextBin { width:auto !important; min-width:0 !important; max-width:90px !important; flex:0 1 auto !important; padding:0 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-step] .inspection-focus-total > span { font-family:'Arial Black',Arial,sans-serif !important; }
@media(min-width:700px) {
 body[data-step] .page > .card:has(.inspection-focus-area) { max-width:760px !important; margin-inline:auto !important; }
 body[data-step] .inspection-focus-total > span { font-size:86px; }
 body[data-step] .inspection-focus-question { font-size:38px !important; }
 body[data-step] .inspection-focus-choices .inspection-choice { min-height:78px !important; }
}
@media(prefers-reduced-motion:reduce) { body[data-step] * { transition:none !important; scroll-behavior:auto !important; } }

/* FIELDWORK report workflow */
html:has(body[data-step]) { background:#faf8f5!important; }
body[data-step][data-step] :is(.loading-phase-card,.loading-settings-panel,.special-loading-head,.special-loading-detail-list,.special-loading-detail-row,.special-loading-shipper-row,.delivery-stop-card,.delivery-card) { background:#fffdf9!important; border-color:#ddd9d3!important; box-shadow:none!important; border-radius:10px!important; }
body[data-step][data-step] .route-entry-index { background:#191919!important; color:#fff!important; box-shadow:none!important; }
body[data-step][data-step] :is(.delivery-time-input,.loading-qty-input,.special-loading-input) { background:#fffdf9!important; color:#191919!important; border-color:#aaa39a!important; border-radius:8px!important; min-height:48px; }
body[data-step][data-step] :is(.delivery-time-btn,.special-group-edit-toggle,.btn-secondary) { color:#292524!important; background:#faf8f5!important; border-color:#b9b0a5!important; box-shadow:none!important; border-radius:8px!important; }
body[data-step][data-step] .delivery-time-btn { background:#191919!important; color:white!important; min-height:48px; }
body[data-step][data-step] .phase-prompt { background:transparent!important; border-color:#ddd9d3!important; box-shadow:none!important; }
body[data-step][data-step] .phase-prompt-title::before { background:#ed4b00!important; }
body[data-step] { --fieldwork-paper:#faf8f5; --fieldwork-ink:#191919; --fieldwork-orange:#ed4b00; --ad-placeholder-height:0px; background:#faf8f5!important; color:#191919!important; }
body[data-step] .global-ad-placeholder { display:none!important; }

/* Advertising is not currently used anywhere in the daily report. */
:root { --ad-placeholder-height: 0px !important; }
.global-ad-placeholder { display: none !important; }
body[data-step] :is(.phase-prompt-title,.card-section-title) { color:#191919!important; font-weight:850!important; }
body[data-step] .phase-prompt-title { font-size:clamp(24px,4vw,34px)!important; line-height:1.4; }
body[data-step] .phase-prompt-note { color:#57534e!important; }
body[data-step] .page > .card { background:#fffdf9!important; border:1px solid #ddd9d3!important; border-radius:10px!important; box-shadow:none!important; }
body[data-step] .phase-actions { background:#faf8f5!important; border:1px solid #dedbd6!important; box-shadow:none!important; bottom:0!important; padding-bottom:max(12px,env(safe-area-inset-bottom))!important; }
body[data-step] .phase-btn { border-radius:10px!important; min-height:56px; box-shadow:none!important; font-weight:800!important; }
body[data-step] .phase-btn-primary:not(:disabled):not(.is-disabled) { background:#191919!important; color:white!important; }
body[data-step] .phase-btn-back { color:#292524!important; }
body[data-step] :is(input,select,textarea) { accent-color:#ed4b00; }
body[data-step][data-step] :is(input[type="text"],input[type="number"],input[type="time"],input[type="tel"],select,textarea) { background-color:#fffdf9!important; border-color:#aaa39a!important; color:#191919!important; border-radius:8px!important; }
body[data-step] :is(input,select,textarea):focus-visible { outline:2px solid #ed4b00; outline-offset:2px; }
body[data-step][data-step] .nippo-invalid-target { border-color:#ce201d!important; outline:2px solid #ce201d!important; }
body[data-step] :is(.loading-qty-input,.input-field) { font-weight:700; }
body[data-step] .scroll-top-btn { color:#191919!important; background:#faf8f5!important; bottom:100px!important; }
.fieldwork-pwa p { font-size:14px; line-height:1.6; }
.pwa-install { min-height:48px; padding:10px 18px; border:0; border-radius:8px; background:#191919; color:white; font:inherit; }
.fieldwork-offline-banner { display:none; position:fixed; z-index:1100; bottom:0; left:0; right:0; background:#191919; color:white; text-align:center; font-size:12px; padding:3px; pointer-events:none; }
.fieldwork-offline .fieldwork-offline-banner { display:block; }
@media print { .fieldwork-offline-banner { display:none!important; } }
@media(max-width:600px) {
 body[data-step="2"][data-step] .loading-phase-card { width:100%!important; margin-inline:0!important; padding:12px 8px!important; }
 body[data-step="2"][data-step] :is(.loading-stop-body,.special-loading-detail-list,.special-loading-detail-row,.special-loading-shipper-list) { padding-inline:0!important; margin-inline:0!important; }
 body[data-step="2"][data-step] .special-loading-head { padding:10px 8px!important; }
 body[data-step="2"][data-step] .special-loading-head-main { display:flex!important; flex:1!important; min-width:0!important; gap:8px!important; flex-wrap:wrap!important; }
 body[data-step="2"][data-step] .special-loading-head-display { flex-basis:100%!important; margin-left:0!important; white-space:normal!important; }
}

/* Readable controls and overlays, without changing report data or workflow. */
:root { --fw-visible-height:100dvh; --fw-visible-top:0px; }
body.step1-basic-page[data-step="1"][data-phase-index] .page { margin-top:max(148px,var(--fixed-step-bar-height,148px))!important; padding-top:12px!important; }
body:has(dialog[open]) { overflow:hidden; }
body[data-step] .fieldwork-date-dialog,
body.step1-basic-page[data-step="1"] .fieldwork-list-dialog {
 box-sizing:border-box; position:fixed; inset:auto!important; top:calc(var(--fw-visible-top) + 12px)!important; left:50%!important; transform:translateX(-50%)!important;
 width:min(540px,calc(100% - 24px))!important; max-height:calc(var(--fw-visible-height) - 24px - env(safe-area-inset-bottom))!important;
 margin:0!important; padding:16px!important; overflow:auto!important; overscroll-behavior:contain; border:1px solid #d6d1c9; border-radius:16px; background:#faf8f5; color:#191919;
}
.fieldwork-date-dialog::backdrop { background:#19191980; }
.fw-dialog-header { display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:-16px; padding:12px 0; background:#faf8f5; z-index:1; }
.fw-dialog-header h2 { margin:0; font-size:20px!important; }
.fieldwork-date-dialog button,.fw-dialog-header button { min-height:44px; border:1px solid #b9b0a5; border-radius:8px; background:#fffdf9; color:#191919; font:inherit; padding:8px 12px; }
.fw-calendar-month { display:flex; align-items:center; justify-content:space-between; margin:8px 0 16px; }
.fw-calendar-week,.fw-calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center; }
.fw-calendar-week { color:#625c54; margin-bottom:8px; font-size:14px; }
.fw-calendar-days button { padding:4px; min-height:42px; }
.fw-calendar-days button[aria-current="date"] { border:2px solid #ed4b00; }
.fw-calendar-days button[aria-pressed="true"] { background:#191919; color:white; }
.fw-calendar-shortcuts { display:flex; gap:12px; margin-top:16px; }
.fw-calendar-shortcuts button { flex:1; }
body.step1-basic-page[data-step="1"] .inspection-focus-total > span { font-size:42px!important; letter-spacing:-.025em; }
body.step1-basic-page[data-step="1"] .inspection-focus-total > small { font-size:20px!important; }
body.step1-basic-page[data-step="1"] .inspection-focus-heading { font-size:21px!important; }
body.step1-basic-page[data-step="1"] .inspection-focus-question { font-size:clamp(23px,5vw,30px)!important; margin-bottom:12px!important; line-height:1.45!important; }
body.step1-basic-page[data-step="1"] .inspection-focus-sections { margin:10px 0 18px!important; padding:8px 0!important; }
body.step1-basic-page[data-step="1"] .inspection-focus-section { min-height:58px!important; font-size:14px!important; }
body.step1-basic-page[data-step="1"] .inspection-focus-choices .inspection-choice { min-height:56px!important; font-size:18px!important; }
body.step1-basic-page[data-step="1"] .fieldwork-item-actions { margin-top:18px; padding-top:16px; }
body.step1-basic-page[data-step="1"] .fieldwork-item-actions :is(.inspection-focus-revise,.inspection-next-item) { min-height:48px!important; font-size:16px!important; }
body.step1-basic-page[data-step="1"] .fieldwork-list-dialog .inspection-item-navigation { display:flex!important; flex-direction:column; gap:8px!important; margin:0!important; }
body.step1-basic-page[data-step="1"] .fieldwork-list-dialog .inspection-item-navigation button { display:grid!important; grid-template-columns:1fr auto; gap:4px 12px; width:100%!important; min-height:62px!important; padding:12px!important; text-align:left; height:auto!important; border-radius:8px!important; font-size:15px!important; }
.inspection-list-description { grid-column:1; color:#49443d; font-size:13px; font-weight:400; line-height:1.5; }
.inspection-list-status { grid-column:2; grid-row:1 / 3; align-self:center; font-size:12px; white-space:nowrap; }
body.step1-basic-page[data-step="1"] .fieldwork-list-dialog p { font-size:14px; margin:8px 0 16px; }
body[data-step] :is(.route-dialog-backdrop,.loading-confirm-modal),.route-admin-page .route-dialog-backdrop { top:var(--fw-visible-top)!important; bottom:auto!important; height:var(--fw-visible-height)!important; padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom))!important; box-sizing:border-box; align-items:center!important; place-items:center!important; }
.route-dialog { max-height:calc(var(--fw-visible-height) - 32px)!important; overflow:auto; overscroll-behavior:contain; }
body[data-step] .loading-confirm-panel { width:min(680px,100%)!important; height:auto!important; max-height:calc(var(--fw-visible-height) - 32px)!important; border-radius:16px!important; }
body[data-step] .loading-confirm-body { min-height:0!important; overflow:auto!important; }
body[data-step] .phase-prompt-title { font-size:clamp(21px,4vw,28px)!important; }
body[data-step] .phase-btn { min-height:50px!important; font-size:17px!important; }
body[data-step][data-step] :is(.loading-settings-panel,.special-loading-card,.special-loading-detail-row) { box-shadow:none!important; }
body[data-step][data-step] :is(.special-loading-input,.loading-qty-input,.delivery-time-input) { font-size:16px!important; min-height:48px!important; }
body[data-step] :is(.special-group-edit-toggle,.special-group-add,.loading-settings-toggle) { min-height:44px!important; }
body[data-step] :is(.special-loading-field-label,.loading-qty-label,.special-loading-detail-title,.special-loading-shipper-title) { font-size:14px!important; line-height:1.5!important; color:#49443d!important; }
body.route-admin-page { background:#faf8f5!important; color:#191919!important; --ad-placeholder-height:0px; }
.route-admin-page .global-ad-placeholder { display:none!important; }
.route-admin-page .page { padding-bottom:110px!important; }
.route-admin-page :is(.route-editor-panel,.route-import-panel,.route-admin-header,.route-editor-top,.route-location-item,.route-route-body) { background:#fffdf9!important; border-color:#ddd9d3!important; box-shadow:none!important; }
.route-admin-page h1 { font-size:26px!important; color:#191919!important; }
.route-admin-page :is(h2,.route-section-title) { color:#191919!important; }
.route-admin-page :is(input[type="text"],textarea,select) { font-size:16px!important; min-height:48px!important; padding:12px!important; background:#fffdf9!important; color:#191919!important; border:1px solid #aaa39a!important; border-radius:8px!important; box-sizing:border-box; }
.route-admin-page label { font-size:15px!important; color:#49443d!important; }
.route-admin-page .btn { min-height:46px!important; border-radius:8px!important; box-shadow:none!important; font-size:15px!important; }
.route-admin-page .btn-primary { background:#191919!important; color:#fff!important; }
body.route-admin-page .route-editor-submit :is(#route-editor-next,#save-route) { background:#191919!important; color:white!important; }
body.route-admin-page.route-editor-open .route-editor-top { background:#faf8f5!important; border:1px solid #ddd9d3!important; border-radius:12px!important; color:#191919!important; box-shadow:none!important; }
body.route-admin-page.route-editor-open .route-editor-top h2 { color:#191919!important; font-size:22px!important; }
body.route-admin-page.route-editor-open .route-editor-top h2::before { color:#625c54!important; }
body.route-admin-page.route-editor-open .route-editor-top .route-screen-home-btn { color:#191919!important; background:#fffdf9!important; border:1px solid #aaa39a!important; }
body.route-admin-page .route-editor-submit #route-editor-prev { color:#49443d!important; background:#fffdf9!important; }
body.route-admin-page.route-editor-open .route-editor-tabs { gap:6px!important; background:transparent!important; }
body.route-admin-page.route-editor-open .route-editor-tab { clip-path:none!important; border-radius:8px!important; background:#fffdf9!important; color:#49443d!important; border:1px solid #b9b0a5!important; }
body.route-admin-page.route-editor-open .route-editor-tab::before,body.route-admin-page.route-editor-open .route-editor-tab::after { display:none!important; }
body.route-admin-page.route-editor-open .route-editor-tab.is-active { background:#ed4b00!important; color:white!important; }
body[data-step] .loading-confirm-list { min-height:0!important; overflow:auto!important; overscroll-behavior:contain; }
body[data-step] .loading-confirm-actions { flex-shrink:0!important; padding-bottom:env(safe-area-inset-bottom); }
body[data-step] .theme-drawer-panel { max-height:var(--fw-visible-height)!important; top:var(--fw-visible-top)!important; bottom:auto!important; }
.route-admin-page .route-editor-tab { min-height:46px!important; font-size:15px!important; }
.route-admin-page .route-editor-tab.is-active { background:#ed4b00!important; color:white!important; }
.route-admin-page .route-editor-submit { position:sticky!important; bottom:0!important; background:#faf8f5!important; padding:12px 8px max(12px,env(safe-area-inset-bottom))!important; border-top:1px solid #ddd9d3; z-index:20; }
.route-admin-page :is(.route-dialog-actions,.route-card-actions) { display:flex; flex-wrap:wrap; gap:8px; }
.route-admin-page .route-dialog-actions .btn { flex:1 1 120px; }
@media(max-width:600px) {
 .route-admin-page .page { width:100%!important; padding-inline:12px!important; }
 .route-admin-page :is(.route-editor-panel,.route-location-item,.route-import-panel) { padding:14px 10px!important; }
 .route-admin-page .route-action-group { display:grid!important; grid-template-columns:1fr!important; }
 .route-admin-page .route-menu-btn { min-height:66px!important; }
 .route-admin-page .route-editor-basic { display:flex!important; flex-direction:column; gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .fieldwork-date-dialog * { scroll-behavior:auto!important; } }

/* Keep consecutive inspection decisions at identical viewport coordinates. */
body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-item.is-active .inspection-focus-choices {
 position:fixed!important; left:50%!important; transform:translateX(-50%)!important;
 bottom:calc(88px + env(safe-area-inset-bottom))!important;
 width:min(728px,calc(100vw - 40px))!important; z-index:150!important;
 box-sizing:border-box; padding:10px!important; margin:0!important;
 background:#faf8f5!important; border:1px solid #ddd9d3; border-radius:14px;
 box-shadow:0 2px 14px #19191915;
}
body.step1-basic-page[data-step="1"][data-phase-index="3"] .phase-actions {
 position:fixed!important; bottom:0!important; left:50%!important; transform:translateX(-50%)!important;
 width:min(760px,calc(100vw - 24px))!important; margin:0!important; z-index:140!important;
}
body.step1-basic-page[data-step="1"][data-phase-index="3"] .page { padding-bottom:220px!important; }
body.step1-basic-page[data-step="1"][data-phase-index="3"] .scroll-top-btn { bottom:calc(178px + env(safe-area-inset-bottom))!important; }
.inspection-bulk-action { display:block; width:100%; min-height:46px; margin:0 0 18px; padding:10px 14px; border:1px solid #aaa39a; border-radius:8px; background:#fffdf9; color:#191919; font:inherit; font-size:15px; font-weight:700; }
.inspection-bulk-action:disabled { color:#625c54; background:#eeeae4; }
@media print { .inspection-bulk-action { display:none!important; } }

/* One navigation dock and identical button coordinates throughout the report. */
@media (min-width: 600px) {
  html:has(body[data-step]) { scrollbar-gutter: stable both-edges; }
}
body[data-step] {
  --report-action-height: calc(76px + env(safe-area-inset-bottom));
}
body[data-step][data-step] .phase-actions,
body.step1-basic-page[data-step="1"][data-phase-index="3"] .phase-actions {
  position: fixed !important;
  left: 50vw !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
  width: var(--report-width, min(430px, 100%)) !important;
  max-width: calc(100vw - 24px) !important;
  min-height: var(--report-action-height) !important;
  height: var(--report-action-height) !important;
  margin: 0 !important;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important;
  border: 1px solid #dedbd6 !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  background: rgba(250, 248, 245, .98) !important;
  box-shadow: 0 -5px 18px rgba(25, 25, 25, .07) !important;
  z-index: 180 !important;
}
body[data-step][data-step] .phase-actions .phase-btn {
  top: 10px !important;
  bottom: auto !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
}
body[data-step][data-step] .phase-actions .phase-btn-primary {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(246px, calc(60% - 12px)) !important;
}
body[data-step] .phase-actions :is(#nextBtn, #returnNextBtn, #generatePdfBtn, #startBtn) {
  width: min(246px, calc(60% - 12px)) !important;
}
body[data-step][data-step] .phase-actions .phase-btn-back {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  transform: none !important;
  width: 96px !important;
  min-width: 96px !important;
}
body[data-step][data-step] .page,
body.step1-basic-page[data-step="1"][data-phase-index] .page {
  padding-bottom: calc(var(--report-action-height) + 34px) !important;
}
body[data-step][data-step] .scroll-top-btn {
  bottom: calc(var(--report-action-height) + 14px) !important;
}
body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-item.is-active .inspection-focus-choices {
  bottom: calc(var(--report-action-height) + 12px) !important;
}
body.step1-basic-page[data-step="1"][data-phase-index="3"] .page {
  padding-bottom: calc(var(--report-action-height) + 132px) !important;
}
body.step1-basic-page[data-step="1"][data-phase-index="3"] .scroll-top-btn {
  bottom: calc(var(--report-action-height) + 110px) !important;
}
@media (max-width: 599px) {
  body[data-step][data-step] .phase-actions .phase-btn-primary {
    width: min(196px, calc(62% - 8px)) !important;
  }
  body[data-step][data-step] .phase-actions .phase-btn-back {
    left: 10px !important;
    width: 64px !important;
    min-width: 64px !important;
  }
}
@media print {
  body[data-step][data-step] .phase-actions { display: none !important; }
}

/* FIELDWORK wide-screen workspace: keep phone/tablet flow unchanged. */
@media (min-width: 1200px) {
  body[data-step] {
    --report-width: min(1480px, calc(100% - 64px));
    --fw-workspace-gap: 32px;
  }

  body[data-step][data-step] .page,
  body.step1-basic-page[data-step="1"][data-phase-index] .page {
    display: grid !important;
    grid-template-columns: minmax(300px, 0.38fr) minmax(0, 0.62fr);
    grid-auto-flow: row dense;
    column-gap: var(--fw-workspace-gap);
    row-gap: 18px;
    align-items: start;
  }

  body[data-step] .page > .phase-prompt {
    grid-column: 1;
    margin: 0 !important;
    padding: 26px 28px !important;
    border: 1px solid #ddd9d3 !important;
    border-top: 4px solid var(--fieldwork-orange) !important;
    border-radius: 10px !important;
    background: #fffdf9 !important;
  }

  body[data-step] .page > .phase-prompt + .card {
    grid-column: 2;
    margin: 0 !important;
  }

  body[data-step="2"] .page > .phase-prompt,
  body[data-step="3"] .page > .phase-prompt,
  body[data-step="4"] .page > .phase-prompt {
    position: sticky;
    top: calc(var(--fixed-step-bar-height, 132px) + 20px);
  }

  body[data-step] .page > .phase-prompt .phase-prompt-title {
    font-size: clamp(28px, 2.2vw, 36px) !important;
    line-height: 1.25 !important;
  }

  body[data-step] .page > .phase-prompt .phase-prompt-note {
    display: block !important;
    max-width: 30ch;
    margin-top: 12px !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  body[data-step] .page > .card {
    padding: 24px !important;
  }

  body[data-step="5"] .page > .phase-prompt {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(280px, 0.4fr) minmax(0, 0.6fr);
    align-items: center;
    min-height: 190px;
    padding: 34px 40px !important;
  }

  body[data-step="5"] .page > .phase-prompt .phase-prompt-note {
    max-width: none;
    margin: 0 !important;
    padding-left: 40px;
    border-left: 1px solid #ddd9d3;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .page {
    display: block !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .page > .phase-prompt {
    display: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .page > .card:has(.inspection-focus-area) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area {
    display: grid !important;
    grid-template-columns: minmax(300px, 0.38fr) minmax(0, 0.62fr);
    grid-template-areas:
      "overview item"
      "sections item"
      "bulk item"
      "summary item"
      "reset item";
    gap: 14px var(--fw-workspace-gap);
    align-items: start;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-overview {
    grid-area: overview;
    min-height: 84px;
    padding: 0 0 18px !important;
    border-bottom: 1px solid #ddd9d3;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-heading {
    font-size: 28px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-total > span {
    font-size: 54px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-total > small {
    font-size: 22px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-sections {
    grid-area: sections;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-section {
    display: grid !important;
    grid-template-columns: 1fr auto;
    min-height: 58px !important;
    padding: 10px 16px !important;
    text-align: left !important;
    border: 1px solid #ddd9d3 !important;
    border-radius: 8px !important;
    background: #fffdf9 !important;
    color: #191919 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-section[aria-selected="true"] {
    border-color: var(--fieldwork-orange) !important;
    background: var(--fieldwork-orange) !important;
    color: #fff !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-bulk-action {
    grid-area: bulk;
    margin: 0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-items {
    grid-area: item;
    min-width: 0;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-item.is-active {
    position: relative !important;
    display: block !important;
    min-height: 456px !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 30px 30px 178px !important;
    border: 1px solid #ddd9d3 !important;
    border-top: 4px solid var(--fieldwork-orange) !important;
    border-radius: 10px !important;
    background: #fffdf9 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-item-count {
    margin-bottom: 14px !important;
    font-size: 15px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-place {
    margin: 0 0 8px !important;
    font-size: 15px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-question {
    max-width: 22ch;
    margin: 0 0 12px !important;
    font-size: clamp(30px, 2.5vw, 42px) !important;
    line-height: 1.28 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-help {
    margin: 0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-item.is-active .inspection-focus-choices {
    position: absolute !important;
    left: 30px !important;
    right: 30px !important;
    bottom: 82px !important;
    width: auto !important;
    transform: none !important;
    min-height: 66px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-choices .inspection-choice {
    min-height: 66px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .fieldwork-item-actions {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 20px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-summary {
    grid-area: summary;
    display: flex;
    justify-content: space-between;
    margin: 0 !important;
    padding-top: 4px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-reset {
    grid-area: reset;
    justify-self: start;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .page > .card:has(#inspectionSignatureCanvas) {
    width: calc(62% - 12px) !important;
    margin: 24px 0 0 auto !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .page {
    padding-bottom: calc(var(--report-action-height) + 34px) !important;
  }
}

/* FIELDWORK desktop phase-3 inspection view switch and inline list mode. */
@media (max-width: 1199px) {
  body.step1-basic-page[data-step="1"] .inspection-view-switch {
    display: none !important;
  }

  body.step1-basic-page[data-step="1"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-item:not(.is-active) {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  /* Keep the back-to-top control in the viewport gutter, not over inspection rows. */
  body.step1-basic-page[data-step="1"][data-phase-index="3"] .scroll-top-btn {
    right: 12px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-overview {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 18px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-view-switch {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid #d8d3cc;
    border-radius: 10px;
    background: #f3efe9;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-view-switch-label {
    padding: 0 8px;
    color: #7a746c;
    font-size: 12px;
    font-weight: 750;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-view-switch button {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #625c54;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-view-switch button:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-view-switch button:focus-visible {
    background: #fffdf9;
    color: #191919;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-view-switch button[aria-pressed="true"] {
    border-color: #191919;
    background: #191919;
    color: #fff;
    box-shadow: 0 2px 7px rgba(25, 25, 25, .14);
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-items {
    min-width: 0;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-items {
    display: grid !important;
    gap: 10px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-item {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) minmax(270px, 320px);
    grid-template-areas:
      "count place choices"
      "count question choices"
      "count help choices";
    align-items: center;
    column-gap: 18px;
    min-height: 112px !important;
    padding: 16px 18px !important;
    border: 1px solid #d8d3cc !important;
    border-radius: 11px !important;
    background: #fffdf9 !important;
    box-shadow: 0 6px 18px rgba(25, 25, 25, .035) !important;
    text-align: left !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-item.is-active {
    border-color: #e85a20 !important;
    box-shadow: inset 4px 0 0 #e85a20, 0 7px 20px rgba(25, 25, 25, .045) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-item-count {
    grid-area: count;
    justify-self: start;
    align-self: stretch;
    display: flex;
    width: 72px;
    min-height: 72px;
    margin: 0 !important;
    padding: 8px;
    border-radius: 9px;
    background: #fff1e9;
    color: #d94300 !important;
    font-size: 12px !important;
    line-height: 1.45;
    text-align: center;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-place {
    grid-area: place;
    margin: 0 0 4px !important;
    color: #7a746c !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-question {
    grid-area: question;
    max-width: none !important;
    margin: 0 !important;
    color: #191919 !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-help {
    grid-area: help;
    margin: 5px 0 0 !important;
    color: #7a746c !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-choices {
    position: static !important;
    grid-area: choices;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    min-height: 52px !important;
    margin: 0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-choices .inspection-choice {
    min-height: 52px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-choices .inspection-choice span {
    min-height: 52px !important;
    padding: 8px !important;
    border-width: 1px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .fieldwork-item-actions,
  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-focus-revise {
    display: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area[data-inspection-view="list"] .inspection-bulk-action {
    position: sticky;
    top: calc(var(--fixed-step-bar-height, 0px) + 12px);
    z-index: 3;
  }
}

/* FIELDWORK desktop phase-1 identity review: two complete, balanced information cards. */
@media (min-width: 1200px) {
  body.step1-basic-page[data-step="1"][data-phase-index="1"] {
    --report-width: min(1280px, calc(100% - 64px));
    --fw-workspace-gap: 24px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .page {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto 1fr;
    column-gap: var(--fw-workspace-gap) !important;
    row-gap: 0 !important;
    align-items: stretch !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .page > .phase-prompt:has(+ .card #driverInfoSummary) {
    grid-column: 1;
    grid-row: 1;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .page > .card:has(#driverInfoSummary) {
    grid-column: 1;
    grid-row: 2;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .page > .phase-prompt:has(+ .card #vehicleInfoSummary) {
    grid-column: 2;
    grid-row: 1;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .page > .card:has(#vehicleInfoSummary) {
    grid-column: 2;
    grid-row: 2;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .page > .phase-prompt {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title action"
      "note action";
    gap: 6px 20px !important;
    align-items: center !important;
    min-height: 116px !important;
    padding: 20px 22px !important;
    border: 1px solid #d8d3cc !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    background: #fffdf9 !important;
    box-shadow: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .page > .phase-prompt::before,
  body.step1-basic-page[data-step="1"][data-phase-index="1"] .page > .phase-prompt::after {
    display: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .phase-prompt-title {
    grid-area: title;
    margin: 0 !important;
    color: #191919 !important;
    font-size: 20px !important;
    font-weight: 820 !important;
    line-height: 1.4 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .phase-prompt-title::before {
    background: var(--fieldwork-orange) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .phase-prompt-note {
    grid-area: note;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 12px !important;
    color: #625c54 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .phase-prompt-action {
    grid-area: action;
    min-width: 92px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid #aaa39a !important;
    border-radius: 9px !important;
    background: #fffdf9 !important;
    color: #292524 !important;
    font-size: 15px !important;
    font-weight: 780 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .phase-prompt-action:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="1"] .phase-prompt-action:focus-visible {
    border-color: #191919 !important;
    background: #191919 !important;
    color: #fff !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .page > .phase-prompt + .card {
    box-sizing: border-box;
    min-height: 220px;
    margin: 0 !important;
    padding: 0 22px !important;
    border: 1px solid #d8d3cc !important;
    border-top: 1px solid #ebe7e1 !important;
    border-radius: 0 0 12px 12px !important;
    background: #fffdf9 !important;
    box-shadow: 0 14px 34px rgba(25, 25, 25, .06) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .driver-summary-compact {
    display: grid !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .driver-summary-line {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 18px !important;
    min-height: 68px;
    box-sizing: border-box;
    padding: 18px 0 !important;
    border-top: 1px solid #ebe7e1 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .driver-summary-line:first-child {
    border-top: 0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .driver-summary-item-label {
    color: #7a746c !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .driver-summary-compact .info-display-box {
    min-height: 24px !important;
    color: #191919 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .driver-summary-name {
    gap: 10px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .driver-editor-panel:not([hidden]) {
    padding: 22px 0 24px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .card:has(#driverInfoEditor:not([hidden])) #driverInfoSummary,
  body.step1-basic-page[data-step="1"][data-phase-index="1"] .card:has(#vehicleInfoEditor:not([hidden])) #vehicleInfoSummary {
    display: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="1"] .phase-actions {
    width: min(760px, calc(100vw - 32px)) !important;
  }
}

/* FIELDWORK desktop signature workspace and button hierarchy. */
@media (min-width: 960px) {
  body.step1-basic-page[data-step="1"] .signature-modal {
    padding: 24px !important;
    background: rgba(25, 25, 25, .56) !important;
    backdrop-filter: blur(2px);
  }

  body.step1-basic-page[data-step="1"] .signature-modal-panel {
    box-sizing: border-box;
    width: min(1100px, calc(100vw - 64px)) !important;
    max-height: calc(100dvh - 48px) !important;
    padding: 24px !important;
    border: 1px solid #d8d3cc !important;
    border-radius: 18px !important;
    background: #fffdf9 !important;
    box-shadow: 0 24px 64px rgba(25, 25, 25, .24) !important;
  }

  body.step1-basic-page[data-step="1"] .signature-modal-head {
    min-height: 48px;
    margin-bottom: 18px !important;
  }

  body.step1-basic-page[data-step="1"] .signature-modal-head > strong {
    font-size: 24px;
    font-weight: 850;
    letter-spacing: .01em;
  }

  body.step1-basic-page[data-step="1"] #signatureToggleOrientationBtn {
    min-width: 116px !important;
    min-height: 46px !important;
    padding: 10px 18px !important;
    border: 1px solid #aaa39a !important;
    border-radius: 10px !important;
    background: #fffdf9 !important;
    color: #292524 !important;
    font-size: 15px !important;
    font-weight: 750 !important;
  }

  body.step1-basic-page[data-step="1"] #signatureToggleOrientationBtn:hover,
  body.step1-basic-page[data-step="1"] #signatureToggleOrientationBtn:focus-visible {
    border-color: #625c54 !important;
    background: #f3efe9 !important;
  }

  body.step1-basic-page[data-step="1"] .signature-modal-canvas {
    box-sizing: border-box;
    width: 100% !important;
    height: clamp(330px, 52dvh, 520px) !important;
    aspect-ratio: auto !important;
    border: 1px solid #b9b0a5 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(25, 25, 25, .02);
  }

  body.step1-basic-page[data-step="1"] .signature-modal-actions {
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    margin-top: 18px !important;
  }

  body.step1-basic-page[data-step="1"] .signature-modal-actions .btn-secondary {
    box-sizing: border-box;
    min-width: 140px !important;
    min-height: 52px !important;
    padding: 12px 22px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  body.step1-basic-page[data-step="1"] #signatureModalClearBtn {
    margin-right: auto !important;
    border-color: transparent !important;
    background: transparent !important;
    color: #625c54 !important;
  }

  body.step1-basic-page[data-step="1"] #signatureModalClearBtn:hover,
  body.step1-basic-page[data-step="1"] #signatureModalClearBtn:focus-visible {
    background: #f3efe9 !important;
    color: #292524 !important;
  }

  body.step1-basic-page[data-step="1"] #signatureModalCancelBtn {
    border: 1px solid #625c54 !important;
    background: #fffdf9 !important;
    color: #292524 !important;
  }

  body.step1-basic-page[data-step="1"] #signatureModalSaveBtn {
    min-width: 180px !important;
    border: 1px solid #191919 !important;
    background: #191919 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  body.step1-basic-page[data-step="1"] #signatureModalSaveBtn:hover,
  body.step1-basic-page[data-step="1"] #signatureModalSaveBtn:focus-visible {
    background: #34312e !important;
    border-color: #34312e !important;
  }

  body.step1-basic-page[data-step="1"] #openSignatureModalBtn,
  body.step1-basic-page[data-step="1"] #openSignatureModalBtn.is-rewrite {
    min-width: 240px !important;
    min-height: 54px !important;
    padding: 12px 26px !important;
    border: 1px solid #191919 !important;
    border-radius: 10px !important;
    background: #191919 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }
}

/* FIELDWORK desktop balance pass: keep the first departure screen compact. */
@media (min-width: 1200px) {
  body.step1-basic-page[data-step="1"][data-phase-index="0"] {
    --report-width: min(1180px, calc(100% - 64px));
    --fw-workspace-gap: 24px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .page {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto 1fr;
    column-gap: var(--fw-workspace-gap) !important;
    row-gap: 0 !important;
    align-items: stretch !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .page > .phase-prompt:has(+ .card .date-select-area) {
    grid-column: 1;
    grid-row: 1;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .page > .card:has(.date-select-area) {
    grid-column: 1;
    grid-row: 2;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .page > .phase-prompt:has(+ .card #binList) {
    grid-column: 2;
    grid-row: 1;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .page > .card:has(#binList) {
    grid-column: 2;
    grid-row: 2;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .page > .phase-prompt {
    min-height: 96px !important;
    padding: 18px 22px 14px !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #fffdf9 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .page > .phase-prompt .phase-prompt-title {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .page > .phase-prompt .phase-prompt-note {
    max-width: none;
    margin-top: 6px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .page > .phase-prompt + .card {
    min-height: 250px;
    padding: 20px 22px 22px !important;
    border-top: 0 !important;
    border-radius: 0 0 10px 10px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-select-area {
    min-height: 190px;
    justify-content: center;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-box {
    margin-top: 0 !important;
  }

  body[data-step][data-step] .phase-actions,
  body.step1-basic-page[data-step="1"][data-phase-index="3"] .phase-actions {
    width: min(760px, calc(100vw - 32px)) !important;
  }
}

/* Final cascade for cKas unified, full-width form controls. */
.kasadock-wordmark,
.kasadock-home-entry { display:inline-flex; align-items:center; gap:9px; width:fit-content; color:inherit; font-weight:760; letter-spacing:-.02em; text-decoration:none; }
.kasadock-wordmark strong,
.kasadock-home-entry strong { color:var(--main-color); }
.kasadock-mark { display:block; width:30px; height:30px; flex:0 0 30px; border-radius:9px; object-fit:contain; }
.kasadock-home-entry { min-height:42px; margin:0 0 12px; padding:5px 11px 5px 6px; border:1px solid color-mix(in srgb,var(--main-color) 18%,#d7dce3); border-radius:11px; background:var(--bg-color); color:var(--text-color); }
.page :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
.theme-drawer-panel :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]) { box-sizing:border-box; width:100%!important; max-width:none!important; min-height:48px; padding:0 14px; border:1px solid #cbd3dc; border-radius:11px; background:var(--bg-color); color:var(--text-color); font:inherit; line-height:1.35; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease; }
.page textarea,
.theme-drawer-panel textarea { min-height:92px!important; padding-top:12px!important; padding-bottom:12px!important; resize:vertical; }
.page :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):focus,
.theme-drawer-panel :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):focus { outline:none; border-color:var(--main-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--main-color) 18%,transparent); }
.route-editor-basic,
.name-row { grid-template-columns:minmax(0,1fr)!important; }
.route-menu-btn,
.bin-manage-link,
.special-entry-add,
.special-route-save { min-height:46px; border-radius:11px!important; box-shadow:none!important; }
.special-loading-add-card { display:grid; gap:12px; }
.special-route-save-guide { display:grid; gap:3px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--main-color) 16%,#d7dce3); border-radius:11px; background:color-mix(in srgb,var(--main-color) 5%,var(--bg-color)); text-align:left; }
.special-route-save-guide strong { color:var(--text-color); font-size:.95rem; }
.special-route-save-guide span { color:color-mix(in srgb,var(--text-color) 72%,transparent); font-size:.82rem; line-height:1.6; }
.special-route-save { width:100%; }
.kasadock-route-home { color:inherit; text-decoration:none; }
@media (min-width:760px) { .route-editor-basic { max-width:760px; } }

/* FIELDWORK desktop phase-0 controls: quiet surfaces, clear selection, one primary action. */
@media (min-width: 1200px) {
  body.step1-basic-page[data-step="1"][data-phase-index="0"] .page > .phase-prompt + .card {
    min-height: 268px;
    padding: 22px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-select-area {
    box-sizing: border-box;
    align-content: center;
    min-height: 206px;
    gap: 16px !important;
    padding: 18px !important;
    border: 1px solid #e1ddd7;
    border-radius: 12px;
    background: #faf8f5;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-main-row {
    box-sizing: border-box;
    width: 420px !important;
    max-width: 100% !important;
    min-height: 64px;
    margin: 0 auto;
    padding: 8px 12px !important;
    border: 1px solid #d8d3cc;
    border-radius: 10px;
    background: #fffdf9;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-main-text,
  body.step1-basic-page[data-step="1"][data-phase-index="0"] :is(.date-year,.date-day) {
    color: #191919 !important;
    font-size: 22px !important;
    font-weight: 780 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] #date:empty::before {
    content: '日付を選択';
    color: #8d877f;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: .02em;
  }

  html[lang="en"] body.step1-basic-page[data-step="1"][data-phase-index="0"] #date:empty::before {
    content: 'Choose date';
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-dow {
    color: #49443d !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-main-row .date-picker-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin-left: 12px !important;
    border: 1px solid #d8d3cc !important;
    border-radius: 9px !important;
    background: #fffdf9 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-main-row .date-picker-btn:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-main-row .date-picker-btn:focus-visible {
    border-color: #625c54 !important;
    background: #f3efe9 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-shortcut-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 420px !important;
    max-width: 100% !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] #dayOfWeek + .date-shortcut-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 420px !important;
    max-width: 100% !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] #yesterdayButton,
  body.step1-basic-page[data-step="1"][data-phase-index="0"] #todayButton {
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    border: 1px solid #b9b0a5 !important;
    border-radius: 10px !important;
    background: #fffdf9 !important;
    color: #292524 !important;
    font-size: 16px !important;
    font-weight: 780 !important;
    box-shadow: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] :is(#yesterdayButton,#todayButton):hover {
    border-color: #625c54 !important;
    background: #f3efe9 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] :is(#yesterdayButton,#todayButton):active {
    transform: translateY(1px);
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] #yesterdayButton.active,
  body.step1-basic-page[data-step="1"][data-phase-index="0"] #todayButton.active {
    border-color: #191919 !important;
    background: #191919 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .date-select-area.nippo-invalid-target {
    padding: 18px !important;
    border: 1px solid #ce201d !important;
    background: #fffdf9 !important;
    outline: 0 !important;
    box-shadow: inset 4px 0 0 #ce201d !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-list {
    gap: 12px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] :is(.bin-select,.bin-item-special) {
    min-height: 58px !important;
    border-radius: 10px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item-special {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-manage-link {
    align-self: flex-end !important;
    width: auto !important;
    min-height: 42px;
    margin-top: 2px !important;
    padding: 9px 14px !important;
    border: 1px solid #d8d3cc !important;
    border-radius: 9px !important;
    background: #fffdf9 !important;
    color: #49443d !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    text-decoration: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-manage-link:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-manage-link:focus-visible {
    border-color: #625c54 !important;
    background: #f3efe9 !important;
    color: #191919 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .phase-actions {
    min-height: 82px !important;
    border-color: #d8d3cc !important;
    border-radius: 14px !important;
    background: #fffdf9 !important;
    box-shadow: 0 12px 34px rgba(25, 25, 25, .08) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .phase-btn-primary {
    width: 280px !important;
    height: 56px !important;
    min-height: 56px !important;
    bottom: 12px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] .phase-btn-primary:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {
    background: #191919 !important;
    color: #fff !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="0"] button#nextBtn:disabled,
  body.step1-basic-page[data-step="1"][data-phase-index="0"] button#nextBtn.is-disabled,
  body.step1-basic-page[data-step="1"][data-phase-index="0"] button#nextBtn[aria-disabled="true"] {
    border: 1px solid #dedad4 !important;
    background: #ebe8e3 !important;
    color: #8d877f !important;
    opacity: 1 !important;
  }
}

/* FIELDWORK desktop phase-2 assistant and ODO: two complete operation cards. */
@media (min-width: 1200px) {
  body.step1-basic-page[data-step="1"][data-phase-index="2"] {
    --report-width: min(1280px, calc(100% - 64px));
    --fw-workspace-gap: 24px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .page {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto 1fr;
    column-gap: var(--fw-workspace-gap) !important;
    row-gap: 0 !important;
    align-items: stretch !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .page > .phase-prompt:has(+ .card #mySwitch-4) {
    grid-column: 1;
    grid-row: 1;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .page > .card:has(#mySwitch-4) {
    grid-column: 1;
    grid-row: 2;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .page > .phase-prompt:has(+ .card #inputField-93) {
    grid-column: 2;
    grid-row: 1;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .page > .card:has(#inputField-93) {
    grid-column: 2;
    grid-row: 2;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .page > .phase-prompt {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title action"
      "note action";
    gap: 6px 20px !important;
    align-items: center !important;
    min-height: 116px !important;
    padding: 20px 22px !important;
    border: 1px solid #d8d3cc !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    background: #fffdf9 !important;
    box-shadow: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .page > .phase-prompt::before,
  body.step1-basic-page[data-step="1"][data-phase-index="2"] .page > .phase-prompt::after {
    display: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .phase-prompt-title {
    grid-area: title;
    position: relative;
    padding-left: 14px !important;
    color: #191919 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .phase-prompt-title::before {
    content: '';
    position: absolute;
    top: .35em;
    bottom: .35em;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: #ed4b00 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .phase-prompt-note {
    grid-area: note;
    max-width: none;
    margin: 0 !important;
    padding-left: 14px;
    color: #625c54 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.55 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .page > .phase-prompt + .card {
    box-sizing: border-box;
    min-height: 250px;
    padding: 24px !important;
    border: 1px solid #d8d3cc !important;
    border-top: 1px solid #ebe7e1 !important;
    border-radius: 0 0 12px 12px !important;
    background: #fffdf9 !important;
    box-shadow: 0 10px 28px rgba(25, 25, 25, .045) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#mySwitch-4) > .card-head-inline,
  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#inputField-93) > .card-section-header {
    display: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#mySwitch-4) {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#mySwitch-4:not(:checked)) {
    justify-content: center;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .helper-top-row {
    display: block !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .helper-switch-row {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    min-height: 76px;
    padding: 12px 20px;
    border: 1px solid #d8d3cc;
    border-radius: 11px;
    background: #faf8f5;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .helper-switch-label {
    color: #8d877f !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center;
    transition: color .16s ease, font-weight .16s ease;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .helper-switch-row:has(#mySwitch-4:not(:checked)) .helper-switch-label:first-child,
  body.step1-basic-page[data-step="1"][data-phase-index="2"] .helper-switch-row:has(#mySwitch-4:checked) .helper-switch-label:last-child {
    color: #191919 !important;
    font-weight: 850 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .switch-pill {
    width: 58px !important;
    height: 34px !important;
    margin: 0 14px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .switch-pill-slider {
    border: 1px solid #cfc9c1 !important;
    background: #dedad4 !important;
    box-shadow: inset 0 1px 2px rgba(25, 25, 25, .06);
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .switch-pill-slider::before {
    width: 28px !important;
    height: 28px !important;
    left: 2px !important;
    bottom: 2px !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(25, 25, 25, .16) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .switch-pill input:checked + .switch-pill-slider {
    border-color: #191919 !important;
    background: #191919 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .switch-pill input:checked + .switch-pill-slider::before {
    transform: translateX(24px) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .helper-code-wrap {
    margin-top: 18px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .helper-code-wrap label,
  body.step1-basic-page[data-step="1"][data-phase-index="2"] #helperInfoEditor label {
    color: #625c54 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] :is(.helper-code-wrap input,#helperInfoEditor input) {
    min-height: 58px !important;
    border: 1px solid #b9b0a5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #191919 !important;
    font-size: 17px !important;
    font-weight: 750 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] #helperInfoSummary:not([hidden]),
  body.step1-basic-page[data-step="1"][data-phase-index="2"] #helperInfoEditor:not([hidden]) {
    margin-top: 18px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .phase-prompt-action {
    grid-area: action;
    min-width: 92px !important;
    min-height: 44px !important;
    padding: 9px 16px !important;
    border: 1px solid #625c54 !important;
    border-radius: 9px !important;
    background: #fffdf9 !important;
    color: #292524 !important;
    font-size: 15px !important;
    font-weight: 780 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .phase-prompt-action:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="2"] .phase-prompt-action:focus-visible {
    border-color: #191919 !important;
    background: #191919 !important;
    color: #fff !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#inputField-93) {
    display: flex !important;
    flex-direction: column;
    align-self: start !important;
    width: 100%;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#mySwitch-4:checked) {
    align-self: start !important;
    padding: 20px 22px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#mySwitch-4:checked) .helper-switch-row {
    min-height: 66px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#mySwitch-4:checked) .helper-code-wrap,
  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#mySwitch-4:checked) #helperInfoEditor:not([hidden]) {
    margin-top: 12px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#mySwitch-4:checked) #helperInfoEditor #table6 {
    margin-top: 8px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#mySwitch-4:checked) :is(.helper-code-wrap input,#helperInfoEditor input) {
    min-height: 52px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .card:has(#mySwitch-4:checked) #resetHelperBtn {
    min-height: 40px !important;
    margin-top: 12px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .odo-guidance {
    margin: 0 0 20px !important;
    padding: 0 0 0 14px !important;
    border-left: 3px solid #d8d3cc !important;
    color: #49443d !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.55 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .odo-guidance strong {
    color: #191919 !important;
    font-weight: 900 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .odo-guidance span {
    margin-top: 4px !important;
    color: #b42332 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .odo-inline-row {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .odo-inline-label {
    color: #625c54 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .odo-input-wrap input {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 64px !important;
    padding: 14px 54px 14px 18px !important;
    border: 1px solid #b9b0a5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #191919 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-align: left !important;
    box-shadow: inset 0 1px 2px rgba(25, 25, 25, .025) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .odo-input-unit {
    right: 18px !important;
    color: #625c54 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] #resetOdoBtn,
  body.step1-basic-page[data-step="1"][data-phase-index="2"] #resetHelperBtn {
    align-self: flex-end;
    width: auto !important;
    min-width: 156px;
    min-height: 44px !important;
    margin-top: 18px !important;
    padding: 9px 16px !important;
    border: 1px solid #d8d3cc !important;
    border-radius: 9px !important;
    background: #fffdf9 !important;
    color: #625c54 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] #resetOdoBtn:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="2"] #resetOdoBtn:focus-visible,
  body.step1-basic-page[data-step="1"][data-phase-index="2"] #resetHelperBtn:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="2"] #resetHelperBtn:focus-visible {
    border-color: #625c54 !important;
    background: #f3efe9 !important;
    color: #292524 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="2"] .phase-actions {
    width: min(760px, calc(100vw - 32px)) !important;
  }
}

/* FIELDWORK desktop phase-3 inspection: calm progress rail and focused decision card. */
@media (min-width: 1200px) {
  body.step1-basic-page[data-step="1"][data-phase-index="3"] {
    --report-width: min(1280px, calc(100% - 64px));
    --fw-workspace-gap: 24px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) !important;
    grid-template-areas:
      "overview item"
      "sections item"
      "bulk item"
      "summary item"
      "reset item" !important;
    gap: 12px var(--fw-workspace-gap) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-overview {
    box-sizing: border-box;
    min-height: 106px !important;
    margin: 0 !important;
    padding: 18px 20px !important;
    border: 1px solid #d8d3cc !important;
    border-radius: 12px !important;
    background: #fffdf9 !important;
    box-shadow: 0 8px 24px rgba(25, 25, 25, .04);
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-heading {
    margin: 0 !important;
    color: #191919 !important;
    font-size: 24px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-total {
    display: grid !important;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 7px !important;
    color: #191919 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-total > span {
    font-family: inherit !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-total > small {
    color: #625c54 !important;
    font-size: 18px !important;
    font-weight: 750 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-sections {
    gap: 8px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-section {
    box-sizing: border-box;
    min-height: 56px !important;
    padding: 10px 14px 10px 16px !important;
    border: 1px solid #d8d3cc !important;
    border-radius: 10px !important;
    background: #fffdf9 !important;
    color: #292524 !important;
    box-shadow: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-section:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-section:focus-visible {
    border-color: #8d877f !important;
    background: #f8f5f0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-section:active {
    transform: translateY(1px);
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-section[aria-selected="true"] {
    border-color: #191919 !important;
    background: #191919 !important;
    color: #fff !important;
    box-shadow: inset 4px 0 0 var(--fieldwork-orange) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-section > span {
    font-size: 15px !important;
    font-weight: 780 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-section > strong {
    min-width: 44px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3efe9;
    color: #625c54 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-section[aria-selected="true"] > strong {
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-bulk-action {
    box-sizing: border-box;
    min-height: 50px !important;
    padding: 10px 14px !important;
    border: 1px solid #aaa39a !important;
    border-radius: 10px !important;
    background: #fffdf9 !important;
    color: #292524 !important;
    font-size: 14px !important;
    font-weight: 780 !important;
    box-shadow: none !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-bulk-action:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-bulk-action:focus-visible {
    border-color: #625c54 !important;
    background: #f3efe9 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-summary > span {
    box-sizing: border-box;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #e1ddd7;
    border-radius: 9px;
    background: #f8f5f0;
    color: #625c54;
    font-size: 13px;
    font-weight: 750;
    text-align: center;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-area.has-bad [data-inspection-bad-count] {
    border-color: #efb2ae;
    background: #fff1f0;
    color: #b42332 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-reset {
    justify-self: stretch !important;
    min-height: 44px !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #7a746c !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-reset:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-reset:focus-visible {
    border-color: #d8d3cc !important;
    background: #f3efe9 !important;
    color: #292524 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-item.is-active {
    min-height: 438px !important;
    padding: 28px 28px 160px !important;
    border: 1px solid #d8d3cc !important;
    border-top: 1px solid #d8d3cc !important;
    border-radius: 12px !important;
    background: #fffdf9 !important;
    box-shadow: 0 12px 32px rgba(25, 25, 25, .055) !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-item-count {
    display: inline-flex;
    width: fit-content;
    min-height: 32px;
    align-items: center;
    margin: 0 0 18px !important;
    padding: 5px 11px;
    border-radius: 999px;
    background: #fff1e9;
    color: #d94300 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    letter-spacing: .02em;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-place {
    margin: 0 0 8px !important;
    color: #625c54 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-question {
    max-width: 24ch !important;
    margin: 0 0 12px !important;
    color: #191919 !important;
    font-size: clamp(30px, 2.4vw, 38px) !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    letter-spacing: -.025em;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-help {
    margin: 0 !important;
    color: #625c54 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-item.is-active .inspection-focus-choices {
    left: 28px !important;
    right: 28px !important;
    bottom: 78px !important;
    gap: 12px !important;
    min-height: 66px !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-choices .inspection-choice {
    min-height: 66px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-choices .inspection-choice-good {
    border: 1px solid #191919 !important;
    background: #191919 !important;
    color: #fff !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-choices .inspection-choice-bad {
    border: 1px solid #ce201d !important;
    background: #fffdf9 !important;
    color: #ce201d !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-choices .inspection-choice:hover,
  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-choices .inspection-choice:focus-within {
    transform: translateY(-1px);
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-choices .inspection-choice-good input:checked + span {
    background: #191919 !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #191919 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .inspection-focus-choices .inspection-choice-bad input:checked + span {
    background: #ce201d !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #ce201d !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .fieldwork-item-actions {
    left: 28px !important;
    right: 28px !important;
    bottom: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .fieldwork-item-actions :is(.inspection-focus-revise,.inspection-next-item) {
    box-sizing: border-box;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border: 1px solid #aaa39a !important;
    border-radius: 9px !important;
    background: #fffdf9 !important;
    color: #292524 !important;
    font-size: 14px !important;
    font-weight: 780 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .fieldwork-item-actions :is(.inspection-focus-revise,.inspection-next-item):hover,
  body.step1-basic-page[data-step="1"][data-phase-index="3"] .fieldwork-item-actions :is(.inspection-focus-revise,.inspection-next-item):focus-visible {
    border-color: #625c54 !important;
    background: #f3efe9 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .fieldwork-item-actions .inspection-focus-revise:disabled {
    border-color: #dedad4 !important;
    background: #ebe8e3 !important;
    color: #9a948c !important;
    opacity: 1 !important;
  }

  body.step1-basic-page[data-step="1"][data-phase-index="3"] .phase-actions {
    width: min(760px, calc(100vw - 32px)) !important;
  }
}

/* cKas fitness visual system — shared across the report workflow. */
:root {
  --ckas-blue: #0879de;
  --ckas-blue-dark: #075baa;
  --ckas-blue-soft: #e8f4ff;
  --ckas-ink: #173b69;
  --ckas-muted: #68809b;
  --ckas-line: #d9e7f2;
}

body[data-step],
body.route-admin-page {
  --main-color: var(--ckas-blue) !important;
  --button-text-color: #fff !important;
  --text-color: var(--ckas-ink) !important;
  --fieldwork-paper: #edf6fc !important;
  --fieldwork-ink: var(--ckas-ink) !important;
  --fieldwork-orange: var(--ckas-blue) !important;
  color: var(--ckas-ink) !important;
  background: linear-gradient(180deg, #f7fbff 0, #edf6fc 58%, #e6f2fa 100%) fixed !important;
}

body[data-step] .step-top-brand-bar {
  min-height: 68px !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--ckas-line) !important;
  background: rgba(247, 251, 255, .96) !important;
  box-shadow: none !important;
}
body[data-step] .step-top-brand-name { color: var(--ckas-blue-dark) !important; }
body[data-step] .step-top-brand-bar .phase-menu-btn,
body[data-step] .step-top-brand-bar .step-top-settings-btn {
  min-width: 42px !important;
  min-height: 42px !important;
  border: 1px solid var(--ckas-line) !important;
  border-radius: 12px !important;
  color: var(--ckas-blue-dark) !important;
  background: #fff !important;
}
body[data-step] .step-bar {
  border-bottom: 1px solid var(--ckas-line) !important;
  background: rgba(247, 251, 255, .96) !important;
  box-shadow: 0 5px 16px rgba(23, 59, 105, .05) !important;
}
body[data-step] .step-label { color: var(--ckas-muted) !important; }
body[data-step] .step.active .step-label,
body[data-step] .step.done .step-label { color: var(--ckas-blue) !important; }
body[data-step] .step-bar .step-line { border-color: #b8cde0 !important; color: var(--ckas-muted) !important; }
body[data-step] .step.active .step-line,
body[data-step] .step.done .step-line { border-color: var(--ckas-blue) !important; color: #fff !important; background: var(--ckas-blue) !important; }
body[data-step] .step:not(:last-child)::after { background: #cfdfea !important; }
body[data-step] .step:not(:last-child)::before,
body[data-step] .step.done:not(:last-child)::after { background: var(--ckas-blue) !important; }
body[data-step] .step-context-bar {
  border: 0 !important;
  color: var(--ckas-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-step] :is(.step-context-item, .step-context-item span) { color: var(--ckas-ink) !important; }

body[data-step] .page > .card,
body[data-step] .phase-prompt,
body[data-step] :is(.inspection-focus-overview, .inspection-focus-item.is-active, .loading-settings-panel, .special-loading-card),
body.route-admin-page :is(.route-editor-panel, .route-import-panel, .route-admin-header, .route-editor-top, .route-location-item, .route-route-body) {
  border: 1px solid var(--ckas-line) !important;
  border-radius: 16px !important;
  color: var(--ckas-ink) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 10px 28px rgba(23, 59, 105, .07) !important;
}
body[data-step] .phase-prompt { border-top: 4px solid var(--ckas-blue) !important; }
body[data-step] :is(h1, h2, h3, .phase-prompt-title, .card-section-header, .section-title, .inspection-focus-heading, .inspection-focus-question) {
  color: var(--ckas-ink) !important;
}
body[data-step] :is(.phase-prompt-note, .inspection-focus-help, .inspection-focus-place, label, .odo-inline-label) {
  color: var(--ckas-muted) !important;
}
body[data-step] :is(input[type="text"], input[type="tel"], input[type="number"], input[type="time"], input[type="date"], select, textarea) {
  border: 1px solid #b8cde0 !important;
  border-radius: 10px !important;
  color: var(--ckas-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
}
body[data-step] :is(input, select, textarea):focus {
  border-color: var(--ckas-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(8, 121, 222, .12) !important;
}

body[data-step] :is(.btn-primary, .phase-btn-primary, .phase-prompt-action, .inspection-choice-good, .loading-confirm-primary),
body.route-admin-page :is(.btn-primary, #route-editor-next, #save-route) {
  border-color: var(--ckas-blue) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0589ee, #006bc6) !important;
  box-shadow: 0 8px 20px rgba(8, 121, 222, .2) !important;
}
body[data-step] :is(.btn-secondary, .btn-icon-sm, .inspection-bulk-action, .inspection-focus-revise, .inspection-next-item) {
  border-color: #b8cde0 !important;
  border-radius: 10px !important;
  color: var(--ckas-blue-dark) !important;
  background: #fff !important;
}
body[data-step][data-step] .phase-actions {
  border-color: var(--ckas-line) !important;
  background: rgba(247, 251, 255, .98) !important;
  box-shadow: 0 -5px 18px rgba(23, 59, 105, .08) !important;
}
body[data-step][data-step] .phase-actions .phase-btn-back {
  border: 0 !important;
  border-radius: 12px !important;
  color: transparent !important;
  background: var(--ckas-blue) !important;
  box-shadow: 0 8px 18px rgba(8, 121, 222, .2) !important;
}
body[data-step][data-step] .phase-actions .phase-btn-back::before {
  color: #fff !important;
  transform: translateX(0) rotate(45deg) !important;
}
body[data-step] .inspection-focus-section {
  border: 1px solid var(--ckas-line) !important;
  color: var(--ckas-ink) !important;
  background: #fff !important;
}
body[data-step] .inspection-focus-section[aria-selected="true"] {
  border-color: var(--ckas-blue) !important;
  color: #fff !important;
  background: var(--ckas-blue) !important;
  box-shadow: none !important;
}
body[data-step] .inspection-focus-item-count { color: var(--ckas-blue) !important; background: var(--ckas-blue-soft) !important; }
body[data-step] .inspection-focus-choices .inspection-choice-good {
  border-color: var(--ckas-blue) !important;
  color: #fff !important;
  background: var(--ckas-blue) !important;
}
body[data-step] .inspection-choice:has(input:checked) { outline-color: var(--ckas-blue) !important; }
body[data-step] .fieldwork-date-dialog,
body.step1-basic-page[data-step="1"] .fieldwork-list-dialog,
body[data-step] .theme-drawer-card {
  border-color: var(--ckas-line) !important;
  color: var(--ckas-ink) !important;
  background: #f7fbff !important;
}
.fieldwork-date-dialog .fw-dialog-header { background: #f7fbff !important; }
.fw-calendar-days button[aria-current="date"] { border-color: var(--ckas-blue) !important; }
.fw-calendar-days button[aria-pressed="true"],
.route-admin-page .route-editor-tab.is-active { background: var(--ckas-blue) !important; color: #fff !important; }

body.route-admin-page h1,
body.route-admin-page :is(h2, .route-section-title) { color: var(--ckas-ink) !important; }
body.route-admin-page .route-editor-submit { border-color: var(--ckas-line) !important; background: #f7fbff !important; }

/* Fitness-derived form density and full-screen safe-area treatment. */
html:has(body[data-step]),
html:has(body.route-admin-page) {
  background: var(--ckas-blue) !important;
}
body[data-step],
body.route-admin-page {
  --ckas-safe-top: env(safe-area-inset-top, 0px);
  --fixed-top-brand-height: calc(68px + var(--ckas-safe-top));
  --fixed-step-bar-height: calc(140px + var(--ckas-safe-top));
  min-height: 100dvh !important;
  font-size: 15px !important;
}
body[data-step]::before,
body.route-admin-page::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--ckas-safe-top);
  background: var(--ckas-blue);
  pointer-events: none;
}
body[data-step] .step-top-brand-bar {
  top: 0 !important;
  height: var(--fixed-top-brand-height) !important;
  padding-top: calc(12px + var(--ckas-safe-top)) !important;
}
body[data-step] .step-bar {
  top: var(--fixed-top-brand-height) !important;
}
body[data-step] .page,
body.step1-basic-page[data-step="1"] .page {
  margin-top: var(--fixed-step-bar-height) !important;
  padding-top: 12px !important;
}

body[data-step][data-step] .page > .card:not(:has(.inspection-focus-area)) {
  margin-bottom: 12px !important;
  padding: 16px !important;
  border: 1px solid var(--ckas-line) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 7px 22px rgba(18, 76, 126, .055) !important;
}
body[data-step][data-step] .page > .phase-prompt {
  margin: 0 0 12px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--ckas-line) !important;
  border-top: 4px solid var(--ckas-blue) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 7px 22px rgba(18, 76, 126, .055) !important;
}
body[data-step] .phase-prompt-title {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}
body[data-step] .phase-prompt-note {
  margin: 5px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}
body[data-step][data-step] .card-section-header,
body[data-step][data-step] .page > .card > h2,
body[data-step][data-step] .page > .card .section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--ckas-ink) !important;
  background: transparent !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}
body[data-step][data-step] .card-section-header::before,
body[data-step][data-step] .page > .card > h2::before,
body[data-step][data-step] .page > .card .section-title::before {
  content: '' !important;
  display: block !important;
  width: 4px !important;
  height: 18px !important;
  flex: 0 0 4px !important;
  border-radius: 999px !important;
  background: var(--ckas-blue) !important;
}

body[data-step][data-step] .page label,
body[data-step][data-step] .driver-summary-item-label,
body[data-step][data-step] .loading-qty-label,
body[data-step][data-step] .special-loading-field-label {
  color: var(--ckas-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
body[data-step][data-step] .page :is(input[type="text"], input[type="tel"], input[type="number"], input[type="time"], input[type="date"], select) {
  min-height: 44px !important;
  padding: 9px 11px !important;
  border: 1px solid #cfe0ec !important;
  border-radius: 8px !important;
  color: var(--ckas-ink) !important;
  background: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
body[data-step][data-step] .page textarea {
  min-height: 92px !important;
  padding: 11px !important;
  border: 1px solid #cfe0ec !important;
  border-radius: 8px !important;
  color: var(--ckas-ink) !important;
  background: #fff !important;
  font-size: 16px !important;
}
body[data-step] .page :is(input, textarea)::placeholder { color: #879cb1 !important; opacity: 1; }
body[data-step][data-step] .page :is(input, select, textarea):focus-visible {
  border-color: var(--ckas-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(8, 121, 222, .12) !important;
}

body.step1-basic-page[data-step="1"] .driver-editor-panel {
  display: grid;
  gap: 12px;
}
body.step1-basic-page[data-step="1"] .driver-editor-panel[hidden] { display: none !important; }
body.step1-basic-page[data-step="1"] .driver-editor-panel .name-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}
body.step1-basic-page[data-step="1"] .driver-editor-panel .name-row > div {
  display: grid !important;
  gap: 6px !important;
  min-width: 0;
}
body.step1-basic-page[data-step="1"] .driver-editor-panel > label { margin: 0 0 -6px !important; }
body.step1-basic-page[data-step="1"] .driver-editor-reset-btn {
  justify-self: end;
  width: auto !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
}
body.step1-basic-page[data-step="1"] :is(.driver-editor-reset-btn, .date-picker-btn, .date-shortcut-row .btn-secondary),
body.step1-basic-page[data-step="1"] .card-head-inline .btn-icon-sm {
  border: 1px solid #cfe0ec !important;
  color: var(--ckas-blue-dark) !important;
  background: #f8fcff !important;
  box-shadow: none !important;
}
body.step1-basic-page[data-step="1"] .driver-summary-compact {
  overflow: hidden;
  border: 1px solid var(--ckas-line) !important;
  border-radius: 10px !important;
  background: #f8fcff !important;
}
body.step1-basic-page[data-step="1"] .driver-summary-line {
  display: grid !important;
  grid-template-columns: 94px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 43px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border-bottom: 1px solid var(--ckas-line) !important;
}
body.step1-basic-page[data-step="1"] .driver-summary-line:last-child { border-bottom: 0 !important; }
body.step1-basic-page[data-step="1"] .driver-summary-name { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
body.step1-basic-page[data-step="1"] .info-display-box {
  min-height: 30px !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--ckas-ink) !important;
  background: var(--ckas-blue-soft) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.step1-basic-page[data-step="1"] .date-main-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  gap: 10px !important;
  align-items: center !important;
}
body.step1-basic-page[data-step="1"] .date-main-text {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  color: var(--ckas-blue-dark) !important;
  background: var(--ckas-blue-soft) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}
body.step1-basic-page[data-step="1"] .date-picker-btn { width: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; }
body.step1-basic-page[data-step="1"] .date-shortcut-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 10px !important; }
body.step1-basic-page[data-step="1"] :is(.bin-select, .bin-item-special) {
  min-height: 48px !important;
  border-color: #cfe0ec !important;
  border-radius: 10px !important;
  color: var(--ckas-ink) !important;
  background: #fff !important;
}
body.step1-basic-page[data-step="1"] :is(.bin-item.active, .bin-item-special.active) {
  border-color: var(--ckas-blue) !important;
  color: var(--ckas-blue-dark) !important;
  background: var(--ckas-blue-soft) !important;
  box-shadow: 0 0 0 2px rgba(8, 121, 222, .1) !important;
}

body[data-step][data-step] :is(.loading-phase-card, .loading-settings-panel, .special-loading-head, .special-loading-detail-list, .special-loading-detail-row, .special-loading-shipper-row, .delivery-stop-card, .delivery-card) {
  border-color: var(--ckas-line) !important;
  border-radius: 12px !important;
  color: var(--ckas-ink) !important;
  background: #f8fcff !important;
  box-shadow: none !important;
}
body[data-step][data-step] .route-entry-index { color: #fff !important; background: var(--ckas-blue) !important; }
body[data-step] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--ckas-blue) !important; }
body[data-step] .switch-pill input:checked + .switch-pill-slider { background: var(--ckas-blue) !important; }

body[data-step][data-step] .phase-actions {
  min-height: calc(76px + env(safe-area-inset-bottom)) !important;
  height: calc(76px + env(safe-area-inset-bottom)) !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}
body.route-admin-page .route-admin-header { padding-top: calc(16px + var(--ckas-safe-top)) !important; }

@media (max-width: 599px) {
  body[data-step] .page,
  body.step1-basic-page[data-step="1"] .page { padding-inline: 10px !important; }
  body[data-step][data-step] .page > .card:not(:has(.inspection-focus-area)) { padding: 14px 12px !important; }
  body[data-step][data-step] .page > .phase-prompt { padding: 12px !important; }
  body[data-step] .step-top-brand-bar { padding-inline: 12px !important; }
  body[data-step] .step-bar { padding-inline: 8px !important; }
}

/* Keep all report actions flat. */
body[data-step] button,
body[data-step] [role="button"],
body.route-admin-page button,
body.route-admin-page [role="button"],
body[data-step] :is(.phase-btn, .phase-menu-btn, .bin-manage-link, .inspection-choice) {
  box-shadow: none !important;
}

/* Public landing page */
.nippo-landing-page{min-height:100vh;background:linear-gradient(180deg,#f7fbff,#edf6fc);color:#173b69}.nippo-landing-header{max-width:760px;margin:auto;padding:calc(20px + env(safe-area-inset-top)) 18px 14px;display:flex;align-items:center;gap:13px}.nippo-landing-header>a{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#fff;background:#0879de;text-decoration:none;font-size:20px}.nippo-landing-header small{display:block;color:#0879de;font-weight:900;letter-spacing:.1em}.nippo-landing-header strong{display:block;margin-top:2px;font-size:20px}.nippo-landing-main{max-width:760px;margin:auto;padding:10px 14px 70px}.nippo-hero,.nippo-content{margin-bottom:16px;padding:clamp(22px,5vw,38px);border:1px solid #d7e6f2;border-radius:20px;background:#fff}.nippo-label{margin:0;color:#0879de;font:900 10px/1.4 Arial,sans-serif;letter-spacing:.14em}.nippo-hero h1{margin:9px 0 14px;color:#173b69;font-size:clamp(30px,7vw,48px);line-height:1.25;letter-spacing:-.045em}.nippo-hero>p:not(.nippo-label),.nippo-content p{color:#5f7890;font-size:14px;line-height:1.9}.nippo-actions{margin:24px 0 15px;display:flex;flex-wrap:wrap;gap:10px}.nippo-actions a{min-height:48px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;font-size:13px;font-weight:900;text-decoration:none}.nippo-primary{color:#fff;background:#0879de}.nippo-secondary{border:1px solid #b9d7ed;color:#075baa;background:#f3f9fd}.nippo-local-note{padding:12px;border-radius:10px;background:#edf7ff;font-size:12px!important}.nippo-content h2{margin:6px 0 17px;color:#173b69;font-size:25px}.nippo-content h3{margin:22px 0 6px;color:#234f77;font-size:16px}.nippo-flow{margin:0;padding:0;display:grid;gap:10px;list-style:none}.nippo-flow li{padding:15px;display:flex;gap:13px;border:1px solid #dceaf4;border-radius:12px;background:#f9fcff}.nippo-flow li>span{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:9px;color:#fff;background:#0879de;font-weight:900}.nippo-flow h3{margin:2px 0 4px}.nippo-flow p{margin:0;font-size:12px}.nippo-links{margin-top:26px;padding-top:17px;border-top:1px solid #d7e6f2;display:flex;flex-wrap:wrap;gap:10px 17px}.nippo-links a{color:#075baa;font-size:12px;font-weight:800}@media(max-width:520px){.nippo-landing-main{padding-inline:10px}.nippo-hero,.nippo-content{padding:22px 16px;border-radius:16px}.nippo-actions a{width:100%}}
.nippo-language-toggle{margin-left:auto;min-width:42px;height:42px;padding:0 8px;border:1px solid #bdd9eb;border-radius:14px;color:#075baa;background:#fff;font-size:10px;font-weight:900;cursor:pointer}
/* Shared language control for report workflow screens. */
.nippo-language-toggle{position:fixed;top:calc(16px + env(safe-area-inset-top));right:63px;z-index:10050;min-width:42px;height:42px;padding:0 8px;border:1px solid rgba(8,121,222,.28);border-radius:14px;background:rgba(255,255,255,.94);color:#075baa;font:900 10px/1 system-ui,sans-serif;box-shadow:0 4px 16px rgba(17,45,68,.12);cursor:pointer}
body[data-theme="dark"] .nippo-language-toggle{background:#22272e;color:#8fc8ff;border-color:#46515d}

/* Report-wide light/dark switch beside the language control. */
.nippo-theme-toggle{position:fixed;top:calc(16px + env(safe-area-inset-top));right:14px;z-index:10050;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid rgba(8,121,222,.28);border-radius:14px;background:rgba(255,255,255,.94);color:#075baa;box-shadow:0 4px 16px rgba(17,45,68,.12);cursor:pointer}
.nippo-theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html[lang="en"] body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap.has-selection .bin-select-label::after,
html[lang="en"] body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-item-special.active .bin-name::after{content:'Selected'!important}

html[data-theme="dark"]{color-scheme:dark;--bg-color:#0b1528!important;--text-color:#edf5ff!important}
body[data-theme="dark"]{--nippo-page-surface:#070b18;--nippo-card-surface:#101d31;background:#070b18!important;color:#edf5ff!important}
body[data-theme="dark"] .nippo-theme-toggle,
body[data-theme="dark"] .nippo-language-toggle{border-color:#2b436a;background:#111e33;color:#8fdcff;box-shadow:none}

/* Safety reminder header uses the same 42px controls as every report screen. */
.global-safety-reminder-toolbar {
  position: absolute;
  z-index: 3;
  top: calc(16px + env(safe-area-inset-top));
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.global-safety-reminder-toolbar :is(a, button) { pointer-events: auto; }
.global-safety-reminder-toolbar-actions { display: flex; align-items: center; gap: 7px; }
.global-safety-reminder-back,
.global-safety-reminder-language,
.global-safety-reminder-theme {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(8,121,222,.28);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  color: #075baa;
  box-shadow: 0 4px 16px rgba(17,45,68,.12);
  cursor: pointer;
}
.global-safety-reminder-back { border-color: #0879de; border-radius: 50%; background: #0879de; color: #fff; text-decoration: none; }
.global-safety-reminder-back svg,
.nippo-landing-header .ckas-back-button > svg { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.global-safety-reminder-back {
  min-width: 42px;
  max-width: 42px;
  flex: 0 0 42px;
  padding: 0;
}
.global-safety-reminder-back svg { width: 21px; height: 21px; }
.global-safety-reminder-language { width: auto; min-width: 42px; padding-inline: 8px; font: 900 10px/1 system-ui,sans-serif; }
.global-safety-reminder-theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.safety-reminder-open > :is(#nippo-language-toggle, #nippo-theme-toggle) { display: none !important; }
body[data-theme="dark"] :is(.global-safety-reminder-language,.global-safety-reminder-theme) { border-color:#2b436a; background:#111e33; color:#8fdcff; box-shadow:none; }
.global-safety-reminder { padding-top: calc(74px + env(safe-area-inset-top)) !important; }

.nippo-landing-header{min-height:calc(74px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0}
.nippo-landing-header .nippo-language-toggle,
.nippo-landing-header .nippo-theme-toggle{position:static;z-index:auto;flex:0 0 42px;margin:0;box-shadow:none}
.nippo-landing-header .nippo-language-toggle{margin-left:auto}
.nippo-landing-header .nippo-theme-toggle{margin-left:-6px}
body[data-theme="dark"] :is(.page,.step-top-brand-bar,.step-bar,.step-context-bar,.phase-actions){border-color:#263c61!important;background:#070b18!important;color:#edf5ff!important}
body[data-theme="dark"] :is(.card,.phase-prompt,.loading-phase-card,.loading-settings-panel,.special-loading-head,.special-loading-detail-list,.special-loading-detail-row,.special-loading-shipper-row,.delivery-stop-card,.delivery-card,.return-phase-panel,.inspection-focus-area,.inspection-list,.bin-item,.bin-select,.bin-item-special){border-color:#2b436a!important;background:#101d31!important;color:#edf5ff!important;box-shadow:none!important}
body[data-theme="dark"] :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]){border-color:#35517b!important;background:#0c182b!important;color:#f2f7ff!important}
body[data-theme="dark"] :is(input,textarea)::placeholder{color:#91a5bd!important;opacity:1}
body[data-theme="dark"] :is(.step-label,.step-context-label,.phase-prompt-title,.phase-prompt-note,.card h2,.card h3,.bin-name,.bin-sub,.form-hint,.field-note,.loading-phase-title,.delivery-stop-name){color:#edf5ff!important}
body[data-theme="dark"] .step:not(.active) :is(.step-label,.step-line){color:#9dafc7!important}
body[data-theme="dark"] .step.active .step-line,
body[data-theme="dark"] :is(.bin-item.active,.bin-item-special.active){border-color:#4baeea!important;background:#153552!important;color:#fff!important}
body[data-theme="dark"] :is(.global-safety-reminder,.global-safety-reminder-panel){background:#070b18!important}
body[data-theme="dark"] :is(.global-safety-reminder-mark,.global-safety-reminder-panel .global-safety-reminder-visual,.global-safety-reminder-copy,.global-safety-reminder-panel .safety-visual-picture){border-color:#2b436a!important;background:#101d31!important;color:#edf5ff!important}

/* The header-row periodic safety badge is no longer part of the reminder. */
.global-safety-reminder-mark { display: none !important; }
body[data-theme="dark"] :is(.global-safety-reminder h2,.global-safety-reminder-message,.global-safety-reminder-confirm,.safety-visual-picture span){color:#edf5ff!important}
body[data-theme="dark"] .theme-drawer-panel{border-color:#2b436a!important;background:#0b1528!important;color:#edf5ff!important}
body[data-theme="dark"] :is(.theme-drawer-card,.theme-drawer-section,.theme-recipient-card){border-color:#2b436a!important;background:#101d31!important;color:#edf5ff!important}

/* Keep the opening safety screen aligned with the cKas blue brand palette. */
.global-safety-reminder,
.global-safety-reminder-panel {
  background: #edf6fc !important;
}

.global-safety-reminder::before,
.global-safety-reminder-panel::before {
  background: linear-gradient(90deg, #0879de 0%, #58aeea 100%) !important;
}

.global-safety-reminder-content-card {
  border-color: #d7e6f2 !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(23, 59, 105, 0.07) !important;
}

.global-safety-reminder-panel .safety-visual-headline strong,
.global-safety-reminder-panel .safety-visual-headline span,
.global-safety-reminder-kicker {
  color: #0879de !important;
}

.global-safety-reminder-panel .safety-visual-headline small,
.global-safety-reminder-panel .safety-visual-picture span,
.global-safety-reminder h2,
.global-safety-reminder-message {
  color: #173b69 !important;
}

.global-safety-reminder-confirm {
  color: #68809b !important;
}

.global-safety-reminder-confirm::before {
  background: #d9e7f2 !important;
}

.global-safety-reminder-panel .safety-visual-picture {
  border-color: #d7e6f2 !important;
  background: #fff !important;
}

.global-safety-reminder-primary {
  border-color: #0879de !important;
  background: linear-gradient(135deg, #0589ee, #006bc6) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(8, 121, 222, 0.22) !important;
}

.global-safety-reminder-primary:hover {
  background: linear-gradient(135deg, #1496f3, #0879de) !important;
  box-shadow: 0 12px 24px rgba(8, 121, 222, 0.27) !important;
}

.global-safety-reminder-primary:focus-visible {
  outline-color: rgba(8, 121, 222, 0.3) !important;
}

body[data-theme="dark"] :is(.global-safety-reminder, .global-safety-reminder-panel) {
  background: #070b18 !important;
}

body[data-theme="dark"] .global-safety-reminder-content-card {
  border-color: #2b436a !important;
  background: #101d31 !important;
  box-shadow: none !important;
}

body[data-theme="dark"] :is(
  .global-safety-reminder-panel .safety-visual-headline small,
  .global-safety-reminder-panel .safety-visual-picture span,
  .global-safety-reminder h2,
  .global-safety-reminder-message
) {
  color: #edf5ff !important;
}

body[data-theme="dark"] .global-safety-reminder-confirm {
  color: #9db0c9 !important;
}

/* 2026-09 mobile theme regression: keep route selection and My Routes coherent. */
body.step1-basic-page[data-step="1"][data-phase-index="0"][data-theme="light"] .bin-select:disabled {
  opacity: 1 !important;
  border-color: #cfe0ec !important;
  background: #f5f9fc !important;
  color: #68809b !important;
  -webkit-text-fill-color: #68809b !important;
  color-scheme: light;
}

body.route-admin-page[data-theme="light"] {
  color-scheme: light;
  color: var(--ckas-ink) !important;
  background: linear-gradient(180deg, #f7fbff 0, #edf6fc 58%, #e7f2fa 100%) fixed !important;
}

body.route-admin-page[data-theme="light"]::before,
body.route-admin-page[data-theme="light"].route-list-open::before,
body.route-admin-page[data-theme="light"].route-import-open::before,
body.route-admin-page[data-theme="light"].route-editor-open::before,
body.route-admin-page[data-theme="light"]:not(.route-editor-open):not(.route-list-open):not(.route-import-open)::before {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: var(--ckas-safe-top) !important;
  background: var(--ckas-blue) !important;
  transform: none !important;
}

body.route-admin-page[data-theme="light"] .page {
  width: min(430px, 100%) !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  padding-inline: 12px !important;
  background: transparent !important;
}

body.route-admin-page[data-theme="light"]:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .page {
  padding-top: calc(108px + var(--ckas-safe-top)) !important;
  padding-bottom: max(44px, env(safe-area-inset-bottom)) !important;
}

body.route-admin-page[data-theme="light"]:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-admin-header {
  top: calc(12px + var(--ckas-safe-top)) !important;
  width: min(406px, calc(100% - 24px)) !important;
  min-height: 82px !important;
  height: 82px !important;
  padding: 16px 18px !important;
  border: 1px solid #0879de !important;
  border-radius: 14px !important;
  background: #0879de !important;
  box-shadow: 0 7px 18px rgba(8, 121, 222, .14) !important;
}

body.route-admin-page[data-theme="light"] .route-admin-actions {
  width: 100% !important;
  gap: 18px !important;
}

body.route-admin-page[data-theme="light"] .route-action-group {
  gap: 10px !important;
}

body.route-admin-page[data-theme="light"] .route-menu-btn,
body.route-admin-page[data-theme="light"] .route-menu-primary,
body.route-admin-page[data-theme="light"] .route-return-group .route-menu-btn {
  min-height: 72px !important;
  border: 1px solid var(--ckas-line) !important;
  border-radius: 14px !important;
  color: var(--ckas-ink) !important;
  background: #fff !important;
  box-shadow: 0 5px 15px rgba(23, 59, 105, .055) !important;
}

body.route-admin-page[data-theme="light"] .route-menu-primary {
  border-left: 4px solid var(--ckas-blue) !important;
}

body.route-admin-page[data-theme="light"] #btn-new-route {
  border-color: var(--ckas-line) !important;
  border-left: 4px solid var(--ckas-blue) !important;
  color: var(--ckas-ink) !important;
  background: #fff !important;
  box-shadow: 0 5px 15px rgba(23, 59, 105, .055) !important;
}

body.route-admin-page[data-theme="light"] .route-menu-btn::before,
body.route-admin-page[data-theme="light"] .route-menu-primary::before,
body.route-admin-page[data-theme="light"] .route-return-group .route-menu-btn::before {
  background: var(--ckas-blue-soft) !important;
  color: var(--ckas-blue-dark) !important;
}

body.route-admin-page[data-theme="light"] .route-menu-btn span,
body.route-admin-page[data-theme="light"] .route-menu-primary span,
body.route-admin-page[data-theme="light"] .route-return-group .route-menu-btn span {
  color: var(--ckas-ink) !important;
}

body.route-admin-page[data-theme="light"] .route-menu-btn small,
body.route-admin-page[data-theme="light"] .route-menu-primary small,
body.route-admin-page[data-theme="light"] .route-return-group .route-menu-btn small,
body.route-admin-page[data-theme="light"] .route-return-group::before {
  color: var(--ckas-muted) !important;
}

body.route-admin-page[data-theme="light"] .route-menu-btn b {
  border-color: var(--ckas-line) !important;
  background: #f8fcff !important;
}

body.route-admin-page[data-theme="light"] .route-menu-btn b::before {
  color: var(--ckas-blue-dark) !important;
}

body.route-admin-page[data-theme="light"] .route-return-group {
  margin-top: 4px !important;
  padding-top: 16px !important;
  border-color: var(--ckas-line) !important;
}

/* My Routes participates in the saved dark mode instead of mixing black and light cards. */
body.route-admin-page[data-theme="dark"] {
  color-scheme: dark;
  color: #edf5ff !important;
  background: linear-gradient(180deg, #0b1528, #070b18) fixed !important;
}

body.route-admin-page[data-theme="dark"] :is(.route-menu-btn, .route-menu-primary, .route-return-group .route-menu-btn) {
  border-color: #2b436a !important;
  color: #edf5ff !important;
  background: #101d31 !important;
  box-shadow: none !important;
}

body.route-admin-page[data-theme="dark"] :is(.route-menu-btn, .route-menu-primary, .route-return-group .route-menu-btn) span {
  color: #edf5ff !important;
}

body.route-admin-page[data-theme="dark"] :is(.route-menu-btn, .route-menu-primary, .route-return-group .route-menu-btn) small,
body.route-admin-page[data-theme="dark"] .route-return-group::before {
  color: #9db0c9 !important;
}

body.route-admin-page[data-theme="dark"] :is(.route-menu-btn, .route-menu-primary, .route-return-group .route-menu-btn)::before,
body.route-admin-page[data-theme="dark"] :is(.route-menu-btn, .route-menu-primary, .route-return-group .route-menu-btn) b {
  border-color: #35517b !important;
  background: #162846 !important;
  color: #8fdcff !important;
}

body.route-admin-page[data-theme="dark"] .route-return-group {
  border-color: #2b436a !important;
}

/* Beat the legacy ID/:not() selectors that otherwise leave three cards light. */
body.route-admin-page[data-theme="dark"] #btn-new-route,
body.route-admin-page[data-theme="dark"]:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-return-group .route-menu-btn {
  border-color: #2b436a !important;
  color: #edf5ff !important;
  background: #101d31 !important;
  box-shadow: none !important;
}

html:has(body[data-step]),
body[data-step] {
  overflow-x: clip !important;
}

/* Route menu follow-up: one return action, with no redundant divider label. */
body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-return-group,
body.route-admin-page[data-theme="light"] .route-return-group {
  gap: 0 !important;
  margin-top: 2px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

body.route-admin-page:not(.route-editor-open):not(.route-list-open):not(.route-import-open) .route-return-group::before {
  content: none !important;
  display: none !important;
}

/* Import choice hierarchy: the active image option stays legible in both themes. */
body.route-admin-page.route-import-open #btn-import-file {
  border-color: #075baa !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0879de, #075baa) !important;
  box-shadow: 0 7px 18px rgba(8, 121, 222, .2) !important;
}

body.route-admin-page.route-import-open #btn-import-file::before {
  content: "▧" !important;
  border-color: rgba(255, 255, 255, .42) !important;
  background: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
  font-size: 1.15rem !important;
}

body.route-admin-page.route-import-open #btn-import-file span {
  color: #fff !important;
}

body.route-admin-page.route-import-open #btn-import-file small {
  color: rgba(255, 255, 255, .86) !important;
}

body.route-admin-page.route-import-open .route-import-head .route-screen-home-btn {
  border-color: rgba(255, 255, 255, .72) !important;
  color: #fff !important;
  background: rgba(7, 91, 170, .36) !important;
}

/* Let the brand header scroll away, then pin only the progress steps. */
html:has(body[data-step]) {
  background: #edf6fc !important;
}

body[data-step] .step-top-brand-bar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 auto !important;
  transform: none !important;
}

body[data-step] .step-bar {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  border-radius: 0 !important;
}

body[data-step] .page,
body.step1-basic-page[data-step="1"] .page,
body.step1-basic-page[data-step="1"][data-phase-index] .page {
  margin-top: 0 !important;
}

/* Leave a clear gap between the route-state dot and the native select value. */
body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select {
  padding-left: 48px !important;
  text-indent: 4px !important;
}

@media (max-width: 420px) {
  body.route-admin-page[data-theme="light"] .route-menu-btn {
    grid-template-columns: 42px minmax(0, 1fr) 32px !important;
    min-height: 70px !important;
    padding: 11px 10px !important;
  }

  body.route-admin-page[data-theme="light"] .route-menu-btn::before {
    width: 36px !important;
    height: 36px !important;
  }

  body.route-admin-page[data-theme="light"] .route-menu-btn span {
    font-size: .94rem !important;
  }
}

/* 2026-09 cKas color-theme completion for the report landing screen. */
.nippo-landing-header .ckas-back-button {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

.nippo-landing-header .ckas-back-button > :is(span, svg) {
  display: grid !important;
  place-items: center !important;
  width: 21px !important;
  height: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: translateX(-1px);
}

.nippo-label,
.nippo-landing-header small,
.nippo-links a {
  color: var(--ckas-accent, #0879de) !important;
}

.nippo-primary,
.nippo-flow li > span {
  background: var(--ckas-accent, #0879de) !important;
}

.nippo-secondary {
  border-color: color-mix(in srgb, var(--ckas-accent, #0879de) 30%, #fff) !important;
  color: var(--ckas-accent, #0879de) !important;
  background: var(--ckas-accent-soft, #e8f4ff) !important;
}

.nippo-local-note {
  background: var(--ckas-accent-soft, #e8f4ff) !important;
}

.global-safety-reminder-back,
.global-safety-reminder-primary {
  border-color: var(--ckas-accent, #0879de) !important;
  background: var(--ckas-accent, #0879de) !important;
  box-shadow: 0 9px 20px color-mix(in srgb, var(--ckas-accent, #0879de) 24%, transparent) !important;
}

.global-safety-reminder::before,
.global-safety-reminder-panel::before {
  background: linear-gradient(90deg, var(--ckas-accent, #0879de), color-mix(in srgb, var(--ckas-accent, #0879de) 64%, #fff)) !important;
}

.global-safety-reminder-panel .safety-visual-headline strong,
.global-safety-reminder-panel .safety-visual-headline span,
.global-safety-reminder-kicker {
  color: var(--ckas-accent, #0879de) !important;
}

/* Keep the report landing identity visible while its long guide is scrolled. */
.nippo-landing-header {
  position: sticky;
  top: 0;
  z-index: 10040;
  width: min(100%, 760px);
  background: color-mix(in srgb, #f7fbff 94%, transparent);
  box-shadow: 0 8px 18px rgba(23, 59, 105, .08);
  backdrop-filter: blur(14px);
}

body[data-theme="dark"] .nippo-landing-header {
  background: color-mix(in srgb, #070b18 94%, transparent);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

/* Keep the cKas wordmark and report name on one header line. */
.nippo-landing-header > div { display:flex; align-items:baseline; gap:8px; min-width:0; white-space:nowrap; }
.nippo-landing-header .ckas-wordmark { display:inline-block; flex:0 0 auto; margin-right:0; vertical-align:baseline; }
.nippo-landing-header > div > strong { display: inline; margin: 0; vertical-align: baseline; }

/* Daily Report uses the same flat control treatment as the other cKas apps. */
button { box-shadow: none !important; }

/* Shared cKas app header — Daily Report landing and workflow screens. */
.nippo-landing-header,
body[data-step] .step-top-brand-bar {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: calc(68px + env(safe-area-inset-top)) !important;
  padding: env(safe-area-inset-top) 12px 0 !important;
  border-bottom: 1px solid #d9e7f2 !important;
  background: rgba(247,251,255,.94) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
}
.nippo-landing-header > div,
body[data-step] .step-app-identity { display:flex !important; align-items:baseline !important; min-width:0; gap:8px; white-space:nowrap; color:#173b69; }
.nippo-landing-header > div > strong,
body[data-step] .step-app-identity > strong { display:inline !important; margin:0 !important; color:inherit !important; font-size:19px; line-height:1.2; }
.nippo-landing-header .ckas-wordmark,
body[data-step] .step-app-identity .ckas-wordmark { display:inline-block !important; color:#173b69 !important; }
.nippo-theme-toggle { width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid #d9e7f2; border-radius:14px; color:#075baa; background:rgba(255,255,255,.9); box-shadow:none !important; cursor:pointer; }
.nippo-theme-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
body[data-step] .step-top-brand-bar { position:sticky !important; top:0 !important; z-index:10040 !important; width:min(100%,760px) !important; margin:0 auto !important; }
body[data-step] .step-bar { top:calc(68px + env(safe-area-inset-top)) !important; }
body[data-step] #themeMenuBtn { display:none !important; }
/* Put the report-flow return control beside the cKas mark. */
body[data-step] .step-top-brand-bar .nippo-step-brand {
  grid-column: 1 !important;
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
body[data-step] .step-top-brand-bar .nippo-step-brand .nippo-header-icon-link {
  position: static !important;
  display: block !important;
  grid-column: auto !important;
  flex: 0 0 38px !important;
}
body[data-step] .step-top-brand-bar .nippo-step-back {
  box-sizing: border-box !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  color: #111 !important;
  background: #fff !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
body[data-step] .step-top-brand-bar .nippo-step-back svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body[data-step] .global-safety-reminder-toolbar .global-safety-reminder-back {
  display: none !important;
}
body[data-theme="dark"][data-step] .step-top-brand-bar .nippo-step-back {
  border-color: #303030 !important;
  color: #f6f6f6 !important;
  background: #0b0b0b !important;
}

body[data-theme="dark"] .nippo-landing-header,
body[data-theme="dark"][data-step] .step-top-brand-bar { border-bottom-color:#2b436a !important; background:rgba(7,11,24,.94) !important; }
body[data-theme="dark"] .nippo-landing-header > div,
body[data-theme="dark"][data-step] .step-app-identity,
body[data-theme="dark"] .nippo-landing-header .ckas-wordmark,
body[data-theme="dark"][data-step] .step-app-identity .ckas-wordmark { color:#f3f8ff !important; }
body[data-theme="dark"] .nippo-theme-toggle { border-color:#2b436a; color:#ddecff; background:#111e33; }

/* Match the hub controls and keep the app title precisely centered. */
.nippo-landing-header { position:relative; }
.nippo-landing-header > div,
body[data-step] .step-app-identity {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  justify-content:center;
  gap:0;
  text-align:center;
}
.nippo-landing-header .ckas-back-button,
body[data-step] .step-top-brand-bar .ckas-back-button,
.nippo-landing-header .ckas-back-button:hover,
body[data-step] .step-top-brand-bar .ckas-back-button:hover,
.nippo-landing-header .ckas-back-button:active,
body[data-step] .step-top-brand-bar .ckas-back-button:active {
  box-shadow:none !important;
}
.nippo-theme-toggle {
  border-color:var(--line, #cad7dd) !important;
  border-radius:14px;
  color:var(--accent, #0879de) !important;
  background:rgba(255,255,255,.88) !important;
}
body[data-theme="dark"] .nippo-theme-toggle {
  border-color:#343b45 !important;
  color:#fff !important;
  background:#22262d !important;
}

/* The workflow screens have their own legacy header rules.  Keep their
   controls on the shared header treatment without inheriting the old wide
   canvas or the fieldwork-style empty lead-in. */
body[data-step] .step-top-brand-bar {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  grid-template-columns:42px minmax(0, 1fr) 42px !important;
  gap:0 !important;
  padding-inline:14px !important;
}
body[data-step] .step-top-brand-bar .ckas-back-button {
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid var(--line, #cad7dd) !important;
  border-radius:14px !important;
  color:var(--accent, #0879de) !important;
  background:rgba(255,255,255,.88) !important;
  text-decoration:none !important;
}
body[data-step] .step-top-brand-bar .ckas-back-button svg {
  width:21px !important;
  height:21px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
body[data-theme="dark"][data-step] .step-top-brand-bar .ckas-back-button {
  border-color:#343b45 !important;
  color:#fff !important;
  background:#22262d !important;
}
body.step1-basic-page[data-step="1"] .step-context-bar,
body[data-step] .step-context-bar {
  margin-top:24px !important;
}

/* Reassert the workflow palette after its legacy light-screen rules. */
html:has(body[data-theme="dark"][data-step]) {
  background:#070b18 !important;
}
body[data-theme="dark"][data-step] {
  background:#070b18 !important;
  color:#edf5ff !important;
}
body[data-theme="dark"][data-step] .step-bar,
body[data-theme="dark"][data-step] .step-context-bar,
body[data-theme="dark"][data-step] .page {
  border-color:#263c61 !important;
  background:#070b18 !important;
  color:#edf5ff !important;
}

/* Keep the daily-report header identical on the landing and all report steps. */
.nippo-landing-header,
body[data-step] .step-top-brand-bar {
  box-sizing: border-box !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10040 !important;
  display: grid !important;
  align-items: center !important;
  justify-content: normal !important;
  width: 100% !important;
  max-width: 1180px !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  min-height: calc(82px + env(safe-area-inset-top)) !important;
  margin: 0 auto !important;
  padding: env(safe-area-inset-top) 32px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #d8d8d8 !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.nippo-header-brand {
  min-width: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  gap: 13px !important;
  color: #111 !important;
  font: 700 21px/1 Arial, sans-serif !important;
  letter-spacing: -.04em !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.nippo-header-mark { display: block !important; width: 38px !important; height: 38px !important; flex: 0 0 38px !important; object-fit: contain !important; filter: none !important; }
.nippo-theme-toggle {
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  color: #111 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.nippo-theme-toggle svg { width: 20px !important; height: 20px !important; }
body[data-theme="dark"] .nippo-landing-header,
body[data-theme="dark"][data-step] .step-top-brand-bar { border-bottom-color: #303030 !important; background: #0b0b0b !important; }
body[data-theme="dark"] .nippo-header-brand { color: #f6f6f6 !important; }
body[data-theme="dark"] .nippo-theme-toggle { border-color: #303030 !important; color: #f6f6f6 !important; background: #0b0b0b !important; }
body[data-step] .step-bar { top: calc(82px + env(safe-area-inset-top)) !important; }
@media (max-width: 767px) {
  .nippo-landing-header,
  body[data-step] .step-top-brand-bar {
    min-height: calc(68px + env(safe-area-inset-top)) !important;
    padding-inline: 20px !important;
  }
  body[data-step] .step-bar { top: calc(68px + env(safe-area-inset-top)) !important; }
}

/* Match the warning card and action to the Daily Report landing page's flat
   monochrome card and inverse primary button. */
body.safety-reminder-open {
  --safety-ink: #fff;
  --safety-paper: #090909;
  --safety-rule: #464646;
}
body.safety-reminder-open .global-safety-reminder {
  background: var(--safety-paper) !important;
}
body.safety-reminder-open .global-safety-reminder-content-card {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "title" "visual" "copy" !important;
  row-gap: 18px !important;
  width: min(760px, 100%) !important;
  margin-inline: auto !important;
  padding: 28px 14px !important;
  border: 1px solid var(--safety-rule) !important;
  border-radius: 0 !important;
  background: var(--safety-paper) !important;
  color: var(--safety-ink) !important;
  box-shadow: none !important;
}
body.safety-reminder-open .global-safety-reminder-content-card .global-safety-reminder-visual {
  display: grid !important;
  grid-area: visual !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  justify-self: center !important;
  width: min(100%, 390px) !important;
  max-width: 390px !important;
  margin: 0 !important;
  gap: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.safety-reminder-open .global-safety-reminder-content-card :is(.global-safety-reminder-kicker, h2, .global-safety-reminder-message, .global-safety-reminder-confirm, .safety-visual-headline span, .safety-visual-headline small, .safety-visual-picture span) {
  color: var(--safety-ink) !important;
}
body.safety-reminder-open .global-safety-reminder-content-card .safety-visual-headline strong {
  color: #ef3434 !important;
}
body.safety-reminder-open .global-safety-reminder-content-card .safety-visual-picture {
  box-sizing: border-box !important;
  width: min(100%, 160px) !important;
  padding: 6px !important;
  border-color: var(--safety-rule) !important;
  border-radius: 0 !important;
  background: var(--safety-paper) !important;
  box-shadow: none !important;
}
body.safety-reminder-open .global-safety-reminder-content-card .safety-visual-picture img {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  filter: grayscale(1) contrast(3) !important;
}
body.safety-reminder-open .global-safety-reminder-content-card h2 {
  grid-area: title !important;
  align-self: center !important;
  justify-self: stretch !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}
body.safety-reminder-open .global-safety-reminder-content-card .global-safety-reminder-copy {
  grid-area: copy !important;
  align-self: center !important;
  text-align: center !important;
  padding-top: 0 !important;
}
body.safety-reminder-open .global-safety-reminder-content-card .global-safety-reminder-confirm {
  opacity: .68 !important;
}
body.safety-reminder-open .global-safety-reminder-content-card .global-safety-reminder-confirm::before {
  left: 30% !important;
  right: 30% !important;
}
@media (max-width: 767px) {
  body.safety-reminder-open #globalSafetyReminder {
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  body.safety-reminder-open #globalSafetyReminder .global-safety-reminder-header {
    flex: 0 0 auto !important;
  }
  body.safety-reminder-open #globalSafetyReminder .global-safety-reminder-panel {
    padding-top: 56px !important;
  }
  body.safety-reminder-open #globalSafetyReminder .global-safety-reminder-content-card {
    margin-bottom: 48px !important;
  }
  body.safety-reminder-open .global-safety-reminder-content-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "title" "visual" "copy" !important;
    row-gap: 16px !important;
    padding: 24px 14px !important;
    text-align: center !important;
  }
  body.safety-reminder-open .global-safety-reminder-content-card h2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: center !important;
  }
  body.safety-reminder-open .global-safety-reminder-content-card .global-safety-reminder-copy {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  body.safety-reminder-open .global-safety-reminder-content-card .global-safety-reminder-confirm {
    margin-top: 8px !important;
    padding-top: 10px !important;
  }
  body.safety-reminder-open #globalSafetyReminder .global-safety-reminder-primary {
    transform: translateY(80px) !important;
  }
}
@media (min-width: 768px) {
  body.safety-reminder-open .global-safety-reminder-panel {
    overflow: visible !important;
  }
  body.safety-reminder-open .global-safety-reminder-content-card {
    width: min(540px, 100%) !important;
    padding: 40px 16px !important;
  }
}
@media (max-width: 390px) and (max-height: 700px) {
  body.safety-reminder-open #globalSafetyReminder .global-safety-reminder-content-card {
    row-gap: 12px !important;
    padding: 18px 12px !important;
  }
  body.safety-reminder-open #globalSafetyReminder .global-safety-reminder-visual {
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    gap: 10px !important;
  }
  body.safety-reminder-open #globalSafetyReminder .safety-visual-picture {
    width: min(100%, 136px) !important;
    padding: 4px !important;
  }
  body.safety-reminder-open #globalSafetyReminder .global-safety-reminder-content-card h2 {
    font-size: clamp(18px, 5.2vw, 20px) !important;
    line-height: 1.3 !important;
  }
  body.safety-reminder-open #globalSafetyReminder .global-safety-reminder-copy {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  body.safety-reminder-open #globalSafetyReminder .global-safety-reminder-copy :is(.global-safety-reminder-message, .global-safety-reminder-confirm) {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  body.safety-reminder-open #globalSafetyReminder .global-safety-reminder-primary {
    transform: translateY(32px) !important;
  }
}
body.safety-reminder-open .global-safety-reminder-primary {
  min-height: 52px !important;
  padding: 0 20px !important;
  border: 1px solid var(--safety-ink) !important;
  border-radius: 0 !important;
  color: var(--safety-paper) !important;
  background: var(--safety-ink) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}
body.safety-reminder-open .global-safety-reminder-primary:focus-visible {
  outline: 2px solid var(--safety-ink) !important;
  outline-offset: 3px !important;
}
body[data-theme="dark"][data-step] :is(.card,.phase-prompt,.bin-item,.bin-select) {
  border-color:#2b436a !important;
  background:#101d31 !important;
  color:#edf5ff !important;
  box-shadow:none !important;
}
body.step1-basic-page[data-theme="dark"][data-step="1"] .page > :is(.card,.phase-prompt) {
  border-color:#2b436a !important;
  background:#101d31 !important;
  color:#edf5ff !important;
  box-shadow:none !important;
}
/* Legacy workflow cards use equally specific light-only rules.  Keep this
   selector deliberately more specific so every step retains the dark surface. */
body[data-theme="dark"][data-step][data-step] .page > .card:not(.nippo-dark-surface-exempt),
body[data-theme="dark"][data-step][data-step] :is(#pickupList,#deliveryList) > .card:not(.nippo-dark-surface-exempt) {
  border-color:#2b436a !important;
  background:#101d31 !important;
  color:#edf5ff !important;
  box-shadow:none !important;
}
body[data-theme="dark"][data-step][data-step] .page :is(.date-select-area,.date-main-row,.bin-select,.bin-item,.bin-item-special,.btn-secondary,.phase-actions) {
  border-color:#35517b !important;
  background:#0c182b !important;
  color:#edf5ff !important;
  box-shadow:none !important;
}
body[data-theme="dark"][data-step][data-step] .page :is(.date-picker-btn,.btn-secondary) {
  color:#ddecff !important;
}
body[data-theme="dark"][data-step][data-step] .page :is(.phase-actions,#nextBtn):disabled {
  border-color:#273c5c !important;
  background:#18263a !important;
  color:#7f94b0 !important;
}
body.step1-basic-page[data-theme="dark"][data-step="1"] .page :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) {
  border-color:#35517b !important;
  background:#0c182b !important;
  color:#f2f7ff !important;
}

/* Final shared cKas header geometry for the report landing page and steps. */
.nippo-landing-header,
body[data-step] .step-top-brand-bar {
  box-sizing: border-box !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10040 !important;
  display: grid !important;
  align-items: center !important;
  justify-content: normal !important;
  width: 100% !important;
  max-width: 1180px !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  height: calc(82px + env(safe-area-inset-top)) !important;
  min-height: calc(82px + env(safe-area-inset-top)) !important;
  margin: 0 auto !important;
  padding: env(safe-area-inset-top) 32px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.nippo-header-icon-link {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  grid-column: 1 !important;
  justify-self: start !important;
}
.nippo-header-icon-link::before,
.nippo-header-icon-link::after { display: none !important; content: none !important; }
.nippo-header-title {
  grid-column: 2 !important;
  justify-self: center !important;
  color: #111 !important;
  font: 700 21px/1 Arial, sans-serif !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
}
.nippo-landing-header:not(.global-safety-reminder-header) .nippo-header-title {
  transform: translateX(-10px) !important;
}
.nippo-header-mark {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  object-fit: contain !important;
  filter: grayscale(1) invert(1) !important;
}
body[data-theme="dark"] .nippo-header-mark { filter: grayscale(1) !important; }
.nippo-theme-toggle {
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  color: #111 !important;
  background: #fff !important;
  box-shadow: none !important;
  grid-column: 3 !important;
  justify-self: end !important;
}
.nippo-theme-toggle svg { width: 20px !important; height: 20px !important; }
body[data-theme="dark"] .nippo-landing-header,
body[data-theme="dark"][data-step] .step-top-brand-bar {
  border-bottom-color: #303030 !important;
  background: #0b0b0b !important;
}
body[data-theme="dark"] .nippo-header-title { color: #f6f6f6 !important; }
body[data-theme="dark"] .nippo-theme-toggle {
  border-color: #303030 !important;
  color: #f6f6f6 !important;
  background: #0b0b0b !important;
}
body[data-step] .step-bar { top: calc(82px + env(safe-area-inset-top)) !important; }
@media (max-width: 767px) {
  .nippo-landing-header,
  body[data-step] .step-top-brand-bar {
    height: calc(68px + env(safe-area-inset-top)) !important;
    min-height: calc(68px + env(safe-area-inset-top)) !important;
    padding-inline: 20px !important;
  }
  body[data-step] .step-bar { top: calc(68px + env(safe-area-inset-top)) !important; }
}

/* Keep the return control at the left and the decorative mark with the centered app name. */
.nippo-landing-header > .nippo-header-identity,
body[data-step] .step-top-brand-bar > .nippo-header-identity,
html body .global-safety-reminder .global-safety-reminder-header > .nippo-header-identity {
  grid-column: 2 !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0;
  white-space: nowrap;
}
.nippo-header-identity > .nippo-header-mark {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  object-fit: contain !important;
}
.nippo-header-identity > .nippo-header-title,
html body .global-safety-reminder .global-safety-reminder-header .nippo-header-title {
  grid-column: auto !important;
  transform: none !important;
}
@media (max-width: 520px) {
  .nippo-header-identity > .nippo-header-mark { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
}


/* Unified safety/workflow app header. Keep progress bars and form styles separate. */
html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  height: calc(82px + env(safe-area-inset-top)) !important;
  min-height: calc(82px + env(safe-area-inset-top)) !important;
  padding: env(safe-area-inset-top) 32px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  color: #111 !important;
  background: #fff !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: .005em !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html body[data-step]:not([data-step="0"]) #stepTopBrandBar {
  position: sticky !important;
  top: 0 !important;
  margin: 0 auto !important;
  transform: none !important;
}
html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header).global-safety-reminder-header {
  left: 50% !important;
}
html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) :is(.nippo-step-brand, .global-safety-reminder-header-brand) {
  grid-column: 1 !important;
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) :is(.nippo-step-back, .global-safety-reminder-back) {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 44px !important;
  flex: 0 0 42px !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  border: 1px solid #dedede !important;
  border-radius: 0 !important;
  color: #111 !important;
  background: #fff !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) :is(.nippo-step-back, .global-safety-reminder-back) svg {
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) .nippo-header-identity {
  grid-column: 2 !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) .nippo-header-mark {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  transform: translateX(.5px) !important;
  filter: grayscale(1) invert(1) !important;
}
html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) .nippo-header-title {
  grid-column: auto !important;
  transform: none !important;
  color: #111 !important;
  background: transparent !important;
  font: 700 21px/1 Arial, sans-serif !important;
  letter-spacing: -.04em !important;
}
html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) .nippo-theme-toggle {
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  grid-column: 3 !important;
  justify-self: end !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  color: #111 !important;
  background: #fff !important;
  box-shadow: none !important;
}
html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) .nippo-theme-toggle svg {
  width: 20px !important;
  height: 20px !important;
}
html body[data-step]:not([data-step="0"])[data-theme="dark"] :is(#stepTopBrandBar, .global-safety-reminder-header) {
  border-bottom-color: #303030 !important;
  color: #f6f6f6 !important;
  background: #0b0b0b !important;
}
html body[data-step]:not([data-step="0"])[data-theme="dark"] :is(#stepTopBrandBar, .global-safety-reminder-header) :is(.nippo-header-title, .nippo-theme-toggle) {
  border-color: #303030 !important;
  color: #f6f6f6 !important;
  background: #0b0b0b !important;
}
html body[data-step]:not([data-step="0"])[data-theme="dark"] :is(#stepTopBrandBar, .global-safety-reminder-header) :is(.nippo-step-back, .global-safety-reminder-back) {
  border-color: #111 !important;
  color: #f6f6f6 !important;
  background: #111 !important;
}
html body[data-step]:not([data-step="0"])[data-theme="dark"] :is(#stepTopBrandBar, .global-safety-reminder-header) .nippo-header-mark {
  filter: grayscale(1) !important;
}
@media (max-width: 767px) {
  html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) {
    height: calc(68px + env(safe-area-inset-top)) !important;
    min-height: calc(68px + env(safe-area-inset-top)) !important;
    padding-inline: 20px !important;
  }
  /* Reduce the 20px header inset to 10px for back controls, respecting the safe area. */
  html body[data-step]:not([data-step="0"]) :is(#stepTopBrandBar, .global-safety-reminder-header) :is(.nippo-step-back, .global-safety-reminder-back) {
    margin-left: calc(max(10px, env(safe-area-inset-left)) - 20px) !important;
  }
}

/* Header back reuses each step's existing back action; the icon opens cKas home. */
.nippo-header-identity > .nippo-header-home {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  line-height: 0 !important;
  text-decoration: none !important;
}
.nippo-header-identity > .nippo-header-home > .nippo-header-mark {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}
.nippo-header-home:focus-visible { outline: 2px solid currentColor !important; outline-offset: 3px !important; }
@media (max-width: 520px) {
  .nippo-header-identity > .nippo-header-home > .nippo-header-mark { width: 30px !important; height: 30px !important; }
}
body[data-step] .phase-actions .phase-btn-back { display: none !important; }

/* Page-top control matches other cKas apps; measured clearance avoids fixed actions. */
html body #scrollTopBtn.scroll-top-btn {
  box-sizing: border-box !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: max(var(--scroll-top-clearance, 18px), calc(18px + env(safe-area-inset-bottom))) !important;
  width: 48px !important; min-width: 48px !important; height: 48px !important;
  display: grid !important; place-items: center !important; padding: 0 !important;
  border: 1px solid #191919 !important; border-radius: 50% !important;
  background: #191919 !important; color: #fff !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.18) !important;
  gap: 0 !important; z-index: 210 !important; cursor: pointer;
  transform: none !important;
}
html body[data-theme="dark"] #scrollTopBtn.scroll-top-btn { background: #f5f5f5 !important; color: #171717 !important; border-color: #f5f5f5 !important; }
html body #scrollTopBtn .scroll-top-chevron { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
html body #scrollTopBtn:hover { filter: brightness(1.06); transform: translateY(-1px) !important; }
html body #scrollTopBtn:active { transform: translateY(1px) scale(.97) !important; }
html body #scrollTopBtn:focus-visible { outline: 3px solid #888 !important; outline-offset: 3px !important; }
html body.safety-reminder-open #scrollTopBtn, html body.theme-drawer-open #scrollTopBtn { visibility: hidden !important; pointer-events: none !important; }

/* Daily-report entry actions and a clearer selected route value. */
.nippo-actions a.is-disabled,
.nippo-actions a[aria-disabled="true"] { background:#e5ebf1!important; border-color:#c7d1dc!important; color:#526274!important; opacity:1!important; cursor:not-allowed!important; }
body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap.has-selection .bin-select { color:#102a43!important; font-weight:850!important; }
body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap::after { right:18px!important; width:9px!important; height:9px!important; border-color:#46596f!important; }
body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap.has-selection::after { border-color:#075baa!important; }
body.step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap.has-selection .bin-select-label { color:#263b52!important; font-weight:850!important; }
body[data-theme="dark"] .nippo-actions a.is-disabled,
body[data-theme="dark"] .nippo-actions a[aria-disabled="true"] { background:#26364a!important; border-color:#405676!important; color:#c7d3e3!important; }
body[data-theme="dark"].step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap.has-selection .bin-select { color:#f2f7ff!important; }
body[data-theme="dark"].step1-basic-page[data-step="1"][data-phase-index="0"] .bin-select-wrap::after { border-color:#b9c7db!important; }