/* Concept 02: scoped to the delivery screen. Legacy form/modal rules remain intact.
   The first layer takes precedence for important declarations, avoiding another
   round of selector-specificity escalation in the shared daily-report styles. */
@layer pearl, legacy;

@layer pearl {
  html:has(.nippo-pearl) { --nippo-shared-accent:#0879de; }
  html[data-color-theme=teal]:has(.nippo-pearl) { --nippo-shared-accent:#0f8f8a; }
  html[data-color-theme=violet]:has(.nippo-pearl) { --nippo-shared-accent:#7656d8; }
  html[data-color-theme=coral]:has(.nippo-pearl) { --nippo-shared-accent:#d65a3f; }
  html[data-color-theme=rose]:has(.nippo-pearl) { --nippo-shared-accent:#cf4775; }
  html:has(.nippo-pearl), body.nippo-pearl {
    --ckas-accent:var(--nippo-shared-accent)!important;
    --main-color:var(--nippo-shared-accent)!important;
  }
  html:has(.nippo-pearl) {
    background: var(--pearl-bg) !important;
    scroll-padding-block: 24px 112px !important;
    --fixed-step-bar-height: 0px !important;
  }
  body.nippo-pearl {
    --pearl-accent: var(--ckas-accent, #0879de);
    --nf-ink: var(--pearl-ink) !important;
    --nf-muted: var(--pearl-muted) !important;
    --nf-paper: var(--pearl-paper) !important;
    --nf-soft: var(--pearl-bg) !important;
    --nf-line: var(--pearl-edge) !important;
    --late-ink: var(--pearl-ink) !important;
    --late-surface: var(--pearl-paper) !important;
    --late-line: var(--pearl-edge) !important;
    margin: 0 !important;
    padding: env(safe-area-inset-top) 0 0 !important;
    min-height: 100dvh !important;
    background: radial-gradient(ellipse at 0 0, var(--pearl-paper), transparent 60%), var(--pearl-bg) !important;
    color: var(--pearl-ink) !important;
    font-family: var(--base-font) !important;
    font-size: max(16px, var(--base-font-size)) !important;
    line-height: 1.5 !important;
  }
  html[data-theme="dark"]:has(.nippo-pearl) { background: var(--pearl-bg) !important; }
  body.nippo-pearl[data-theme="dark"] {
    background: radial-gradient(ellipse at 0 0, var(--pearl-field), transparent 65%), var(--pearl-bg) !important;
    color-scheme: dark !important;
  }
  .nippo-pearl *, .nippo-pearl *::before, .nippo-pearl *::after { box-sizing: border-box; }
  .nippo-pearl [hidden] { display: none !important; }
  .nippo-pearl :is(button, a, input, select):focus-visible {
    outline: 3px solid var(--pearl-ink) !important;
    outline-offset: 3px !important;
  }
  .nippo-pearl :is(button, a) { -webkit-tap-highlight-color: transparent; }
  .nippo-pearl .pearl-icon {
    display: inline-block !important;
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    background-image: url("../assets/pearl-workflow.png") !important;
    background-repeat: no-repeat !important;
    background-size: 300% 200% !important;
  }
  .nippo-pearl .pearl-icon-inspection { background-position: 0 0 !important; }
  .nippo-pearl .pearl-icon-loading { background-position: 50% 0 !important; }
  .nippo-pearl .pearl-icon-delivery { background-position: 100% 0 !important; }
  .nippo-pearl .pearl-icon-return { background-position: 0 100% !important; }
  .nippo-pearl .pearl-icon-pdf { background-position: 50% 100% !important; }
  .nippo-pearl .pearl-icon-destination { background-position: 100% 100% !important; }

  .nippo-pearl #stepTopBrandBar {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 48px 1fr 48px !important;
    width: min(100%, 660px) !important;
    height: 76px !important;
    min-height: 76px !important;
    margin: 0 auto !important;
    padding: 10px 20px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: center !important;
  }
  .nippo-pearl #stepTopBrandBar :is(.nippo-step-back, .nippo-theme-toggle) {
    display: grid !important;
    place-items: center !important;
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--pearl-line) !important;
    border-radius: 16px !important;
    color: var(--pearl-ink) !important;
    background: var(--pearl-paper) !important;
    box-shadow: var(--pearl-shadow) !important;
  }
  .nippo-pearl #stepTopBrandBar svg {
    width: 22px !important; height: 22px !important;
    stroke: currentColor !important; stroke-width: 1.8 !important;
    stroke-linecap: round; stroke-linejoin: round; fill: none !important;
  }
  .nippo-pearl .pearl-brand {
    display: flex !important; justify-content: center !important; align-items: center !important;
    gap: 5px !important; text-decoration: none !important;
    color: var(--pearl-ink) !important; font-size: 17px !important; font-weight: 650 !important;
  }
  .nippo-pearl .pearl-brand .pearl-icon { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  .nippo-pearl #stepBar {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: min(100%, 620px) !important;
    height: auto !important;
    min-height: 98px !important;
    margin: 0 auto !important;
    padding: 8px 16px 12px !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .nippo-pearl #stepBar .step {
    position: relative !important; display: flex !important;
    flex-direction: column !important; align-items: center !important; gap: 5px !important;
    min-width: 0 !important; width: 100% !important; margin: 0 !important;
    padding: 0 !important; border: 0 !important; background: none !important;
    color: var(--pearl-muted) !important; box-shadow: none !important;
    opacity: 1 !important; transform: none !important;
    cursor: pointer;
  }
  .nippo-pearl #stepBar .step:disabled { cursor: default; }
  .nippo-pearl #stepBar .step::before, .nippo-pearl #stepBar .step::after { display: none !important; }
  .nippo-pearl #stepBar .pearl-icon {
    border: 1px solid var(--pearl-line) !important;
    border-radius: 19px !important;
    background-color: var(--pearl-paper) !important;
    box-shadow: var(--pearl-shadow) !important;
  }
  .nippo-pearl #stepBar .active .pearl-icon {
    border-color: var(--pearl-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pearl-accent) 13%, transparent), var(--pearl-shadow) !important;
  }
  .nippo-pearl #stepBar .step-label {
    display: block !important; margin: 0 !important; padding: 0 !important;
    font-size: max(13px, calc(var(--base-font-size) - 2px)) !important;
    font-weight: 600 !important; line-height: 1.4 !important;
    white-space: normal !important; color: var(--pearl-muted) !important;
  }
  .nippo-pearl #stepBar .active .step-label { color: var(--pearl-ink) !important; }
  .nippo-pearl #stepBar .step-line { display: none !important; }
  .nippo-pearl #stepBar .step-subprogress {
    display: block !important; position: absolute !important; bottom: -6px !important;
    width: 22px !important; height: 3px !important; border-radius: 4px !important;
    background: var(--pearl-edge) !important; overflow: hidden !important;
    padding: 0 !important; margin: 0 !important;
  }
  .nippo-pearl #stepBar .step-subprogress::after {
    content: ""; display: block; width: calc(var(--step-progress, 0) * 100%);
    height: 100%; background: var(--pearl-accent);
  }
  .nippo-pearl .step-subpart { display: none !important; }
  .nippo-pearl .step-context-bar {
    position: relative !important; inset: auto !important; transform: none !important;
    display: block !important; width: min(100% - 40px, 580px) !important;
    min-height: 0 !important; margin: 12px auto 0 !important; padding: 10px 14px !important;
    border: 1px solid var(--pearl-line) !important; border-radius: 16px !important;
    background: color-mix(in srgb, var(--pearl-paper) 65%, transparent) !important;
    box-shadow: none !important; color: var(--pearl-muted) !important;
  }
  .nippo-pearl .step-context-info { display: flex !important; gap: 12px 20px !important; flex-wrap: wrap !important; }
  .nippo-pearl .step-context-item { display: flex !important; align-items: baseline !important; gap: 8px !important; min-width: 0 !important; }
  .nippo-pearl .step-context-item :is(span, strong) { font-size: 13px !important; color: var(--pearl-muted) !important; overflow-wrap: anywhere; }
  .nippo-pearl .step-context-label { font-weight: 400 !important; }

  .nippo-pearl .page {
    display: block !important; width: min(100%, 620px) !important;
    max-width: 620px !important; margin: 0 auto !important;
    padding: 24px 20px calc(122px + env(safe-area-inset-bottom)) !important;
    background: transparent !important; min-height: 0 !important;
  }
  .nippo-pearl .phase-prompt { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 18px !important; padding: 0 !important; }
  .nippo-pearl .phase-prompt-title { font-size: 21px !important; line-height: 1.4 !important; font-weight: 650 !important; color: var(--pearl-ink) !important; margin: 0 0 8px !important; }
  .nippo-pearl .delivery-time-prompt-row { display: flex !important; align-items: center !important; gap: 8px !important; }
  .nippo-pearl .phase-prompt-note { font-size: 13px !important; color: var(--pearl-muted) !important; flex: 1 1 140px !important; }
  .nippo-pearl .pearl-tools { position: relative; flex-shrink: 0; }
  .nippo-pearl .pearl-tools summary {
    display: flex !important; align-items: center; gap: 6px; cursor: pointer;
    min-height: 44px; padding: 8px 12px; border-radius: 14px;
    color: var(--pearl-muted); background: var(--pearl-paper);
    border: 1px solid var(--pearl-line); box-shadow: var(--pearl-shadow);
    font-size: 13px; list-style: none;
  }
  .nippo-pearl .pearl-tools summary::-webkit-details-marker { display: none; }
  .nippo-pearl .pearl-tools summary:focus-visible { outline: 3px solid var(--pearl-ink); outline-offset: 3px; }
  .nippo-pearl .pearl-tools-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 125;
    display: grid; gap: 8px; width: min(260px, calc(100vw - 40px));
    padding: 12px; border: 1px solid var(--pearl-line); border-radius: 18px;
    background: var(--pearl-paper); box-shadow: 0 14px 35px #172e4933;
  }
  .nippo-pearl .pearl-tools-panel :is(.delivery-add-midtrip-pickup, .delivery-reset-time-btn) { width: 100% !important; margin: 0 !important; }
  .nippo-pearl .page > .delivery-input-card {
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    background: none !important; box-shadow: none !important; overflow: visible !important;
  }
  .nippo-pearl :is(.delivery-add-midtrip-pickup, .delivery-reset-time-btn) {
    color: var(--pearl-muted) !important; background: transparent !important;
    border: 1px solid var(--pearl-edge) !important; border-radius: 14px !important;
    font-size: 13px !important; font-weight: 500 !important;
    min-height: 44px !important; padding: 9px 12px !important; box-shadow: none !important;
  }
  .nippo-pearl .delivery-add-midtrip-pickup { width: auto !important; margin: 0 0 22px 0 !important; }
  .nippo-pearl .delivery-add-midtrip-pickup::before { content: "+"; margin-right: 8px; font-size: 20px; }
  .nippo-pearl #deliveryList { position: relative !important; padding-left: 24px !important; counter-reset: delivery-stop; }
  .nippo-pearl #deliveryList::before { content: ""; position: absolute; left: 6px; top: 20px; bottom: 28px; border-left: 1px dashed var(--pearl-edge); }
  .nippo-pearl #deliveryList > .delivery-card {
    counter-increment: delivery-stop;
    position: relative !important; overflow: visible !important;
    margin: 0 0 22px !important; padding: 16px !important;
    border: 1px solid var(--pearl-line) !important; border-radius: 23px !important;
    background: linear-gradient(145deg, var(--pearl-field), var(--pearl-paper)) !important;
    box-shadow: var(--pearl-shadow) !important;
    scroll-margin-block: 24px 112px;
  }
  .nippo-pearl #deliveryList > .delivery-card::before {
    content: counter(delivery-stop, decimal-leading-zero) !important;
    display: grid !important; place-items: center !important;
    position: absolute !important; left: -25px !important; top: 22px !important;
    width: 22px !important; height: 28px !important; border: 0 !important;
    background: var(--pearl-bg) !important; color: var(--pearl-muted) !important;
    font-size: 12px !important; font-weight: 650 !important;
  }
  .nippo-pearl #deliveryList > .delivery-card:focus-within { border-color: var(--pearl-accent) !important; }
  .nippo-pearl .delivery-destination-heading {
    display: grid !important; grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important; gap: 4px 8px !important;
    margin: 0 0 16px !important; padding: 0 !important;
  }
  .nippo-pearl .delivery-destination-heading > .pearl-icon { width: 42px !important; height: 42px !important; }
  .nippo-pearl .delivery-destination-main { font-size: 18px !important; line-height: 1.5 !important; font-weight: 650 !important; overflow-wrap: anywhere; }
  .nippo-pearl .delivery-destination-sub { font-size: 12px !important; color: var(--pearl-muted) !important; }
  .nippo-pearl .delivery-stop-actions { grid-column: 2 / -1 !important; display: flex !important; justify-content: flex-end !important; gap: 6px !important; }
  .nippo-pearl .delivery-stop-actions button {
    min-width: 44px !important; min-height: 44px !important; padding: 8px !important;
    border: 0 !important; border-radius: 10px !important; background: transparent !important;
    color: var(--pearl-muted) !important; font-size: 13px !important; box-shadow: none !important;
  }
  .nippo-pearl .delivery-stop-actions button:disabled { opacity: .45 !important; }
  .nippo-pearl .delivery-time-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 15px !important; }
  .nippo-pearl #deliveryList .delivery-time-field { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .nippo-pearl .delivery-time-label { display: block !important; margin: 0 0 7px !important; font-size: 14px !important; color: var(--pearl-muted) !important; }
  .nippo-pearl #deliveryList .delivery-time-control {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 44px 80px !important;
    width: 100% !important; max-width: none !important; gap: 5px !important;
    padding: 0 !important; margin: 0 !important; background: transparent !important;
  }
  .nippo-pearl #deliveryList :is(.delivery-time-input, .delivery-pickup-time-input, .loading-qty-input) {
    width: 100% !important; min-width: 0 !important; min-height: 58px !important;
    padding: 10px 8px !important; border: 1px solid var(--pearl-line) !important;
    border-radius: 15px !important; background: var(--pearl-field) !important;
    color: var(--pearl-ink) !important; box-shadow: inset 1px 2px 4px #7c9cb21c, 2px 3px 6px #7c9cb21c !important;
    font-size: clamp(24px, 6vw, 30px) !important; font-weight: 600 !important;
    font-variant-numeric: tabular-nums; letter-spacing: -.04em !important;
  }
  .nippo-pearl input[type="time"]::-webkit-calendar-picker-indicator { width: 16px; height: 16px; margin: 0; padding: 0; opacity: .7; }
  .nippo-pearl #deliveryList .delivery-time-clear {
    min-height: 44px !important; min-width: 44px !important; width: 44px !important;
    padding: 0 !important; border: 0 !important; background: transparent !important;
    color: var(--pearl-muted) !important; font-size: 12px !important;
  }
  .nippo-pearl #deliveryList .delivery-time-btn {
    min-height: 52px !important; min-width: 80px !important; width: 80px !important;
    padding: 4px !important; border: 1px solid var(--pearl-line) !important;
    border-radius: 14px !important; background: var(--pearl-paper) !important;
    color: var(--pearl-ink) !important; font-size: 14px !important; box-shadow: var(--pearl-shadow) !important;
  }
  .nippo-pearl #deliveryList > .is-delivery-complete {
    --delivery-complete-ink: var(--pearl-muted) !important;
    border-color: var(--pearl-edge) !important;
    background: color-mix(in srgb, var(--pearl-paper) 60%, var(--pearl-bg)) !important;
  }
  .nippo-pearl .delivery-unit-selector, .nippo-pearl .delivery-pickup-time {
    border-color: var(--pearl-edge) !important; background: var(--pearl-bg) !important;
    color: var(--pearl-ink) !important; border-radius: 15px !important;
  }
  .nippo-pearl .delivery-collection-qty-row { gap: 10px !important; padding: 0 !important; }
  .nippo-pearl .delivery-collection-meta { padding: 0 !important; font-size: 14px !important; }
  .nippo-pearl .phase-actions {
    position: fixed !important; inset: auto 0 var(--pearl-keyboard,0px) !important; z-index: 200 !important;
    display: grid !important; grid-template-columns: 1fr 1.65fr !important;
    width: min(100%,660px) !important; height: auto !important;
    margin: 0 auto !important; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)) !important;
    gap: 12px !important; border: 0 !important;
    background: var(--pearl-bg) !important; box-shadow: none !important;
    translate:none!important;
    backdrop-filter: none;
  }
  .nippo-pearl .phase-actions > button {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 9px !important; min-height: 60px !important; height: auto !important;
    min-width: 0 !important; margin: 0 !important; padding: 10px !important;
    border: 1px solid var(--pearl-line) !important; border-radius: 20px !important;
    font-size: 16px !important; line-height: 1.3 !important; font-weight: 600 !important;
    background: var(--pearl-paper) !important; color: var(--pearl-ink) !important;
    box-shadow: var(--pearl-shadow) !important;
  }
  .nippo-pearl .phase-actions > .phase-btn-primary {
    background: linear-gradient(150deg, var(--pearl-accent), color-mix(in srgb,var(--pearl-accent) 80%,#172e43)) !important;
    color: #fff !important; border-color: #8197a9 !important;
  }
  .nippo-pearl .phase-actions .pearl-icon { width: 31px !important; height: 31px !important; flex-basis: 31px !important; }
  .nippo-pearl .phase-actions button:is(:disabled, [aria-disabled="true"]) { opacity: .6 !important; }
  .nippo-pearl .loading-confirm-panel { border-radius: 24px !important; background: var(--pearl-paper) !important; box-shadow: var(--pearl-shadow) !important; }
  .nippo-pearl .loading-confirm-head { border-radius: 24px 24px 0 0 !important; background: var(--pearl-paper) !important; color: var(--pearl-ink) !important; }
  .nippo-pearl .loading-confirm-modal :is(.loading-confirm-row, .midtrip-cargo-row, .delivery-time-field, .loading-qty-field) {
    background: var(--pearl-paper) !important; color: var(--pearl-ink) !important;
    border-color: var(--pearl-edge) !important; border-radius: 16px !important;
  }
  .nippo-pearl .loading-confirm-modal :is(input, select) {
    background: var(--pearl-field) !important; color: var(--pearl-ink) !important;
    border: 1px solid var(--pearl-edge) !important; border-radius: 12px !important;
    min-height: 52px !important; font-size: 18px !important;
  }
  .nippo-pearl .loading-confirm-modal :is(.delivery-confirm-time-field, .delivery-confirm-qty-summary > div) { background: var(--pearl-bg) !important; border-color: var(--pearl-edge) !important; }
  .nippo-pearl .loading-confirm-modal :is(h2, strong) { color: var(--pearl-ink) !important; }
  .nippo-pearl .loading-confirm-modal :is(.delivery-confirm-time-field > span, .delivery-confirm-qty-summary span, .delivery-confirm-qty-title) { color: var(--pearl-muted) !important; }
  .nippo-pearl .loading-confirm-actions { background: var(--pearl-paper) !important; }
  .nippo-pearl .loading-confirm-actions button { border: 1px solid var(--pearl-edge) !important; border-radius: 14px !important; }
  .nippo-pearl .loading-confirm-secondary { background: var(--pearl-field) !important; color: var(--pearl-ink) !important; }
  .nippo-pearl .loading-confirm-primary { background: var(--pearl-accent) !important; color: #fff !important; }
  @media (max-width: 359px) {
    .nippo-pearl #stepBar { gap: 4px !important; padding-inline: 10px !important; }
    .nippo-pearl .page { padding-inline: 12px !important; }
    .nippo-pearl #deliveryList { padding-left: 20px !important; }
    .nippo-pearl #deliveryList > .delivery-card { padding: 12px !important; }
    .nippo-pearl #deliveryList .delivery-time-control { grid-template-columns: minmax(0, 1fr) 44px !important; }
    .nippo-pearl #deliveryList .delivery-time-btn { grid-column: 1 / -1 !important; width: 100% !important; min-height: 44px !important; }
    .nippo-pearl .phase-actions { padding-inline: 12px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nippo-pearl *, .nippo-pearl *::before, .nippo-pearl *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
  @media print {
    .nippo-pearl { background: #fff !important; color: #111 !important; }
    .nippo-pearl .phase-actions { display: none !important; }
    .nippo-pearl .page { padding-bottom: 0 !important; }
  }
}

@layer pearl {
 .nippo-pearl .midtrip-pickup-modal { padding: 12px !important; height: var(--pearl-visible-height,100dvh) !important; top:var(--pearl-viewport-top,0px)!important; align-items: center !important; }
 .nippo-pearl .midtrip-pickup-panel { display: flex !important; flex-direction: column !important; max-height: calc(var(--pearl-visible-height,100dvh) - 24px) !important; width: min(100%, 620px) !important; overflow: hidden !important; padding: 0 !important; }
 .nippo-pearl .midtrip-pickup-panel > .loading-confirm-head { flex: 0 0 auto !important; padding: 16px 20px !important; }
 .nippo-pearl .midtrip-pickup-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 20px 20px; scroll-padding: 16px; }
 .nippo-pearl .midtrip-pickup-panel > .loading-confirm-actions { flex: 0 0 auto !important; position: static !important; display: flex !important; flex-wrap: wrap !important; padding: 12px 16px max(12px,env(safe-area-inset-bottom)) !important; gap: 10px !important; margin: 0 !important; border-top: 1px solid var(--pearl-edge) !important; }
 .nippo-pearl .midtrip-pickup-panel > .loading-confirm-actions button { flex: 1 1 120px !important; min-height: 48px !important; padding: 10px !important; font-size: 15px !important; }
 .nippo-pearl .midtrip-time-control { display: grid; grid-template-columns: minmax(0,1fr) 48px 80px; gap: 6px; align-items: center; }
 .nippo-pearl .midtrip-time-control input { width: 100%; min-width: 0; padding: 8px !important; }
 .nippo-pearl .midtrip-time-control button { min-height: 48px; padding: 4px; font-size: 13px; border: 1px solid var(--pearl-edge); border-radius: 12px; color: var(--pearl-ink); background: var(--pearl-field); }
 .nippo-pearl .midtrip-pickup-place-field { margin-bottom: 16px !important; }
 @media(max-width:359px) { .nippo-pearl .midtrip-pickup-body { padding-inline: 12px; } .nippo-pearl .midtrip-time-control { grid-template-columns: minmax(0,1fr) 48px; } .nippo-pearl [data-midtrip-now] { grid-column: 1 / -1; } }
}

@layer pearl {
 .nippo-pearl .page > .card:not(.delivery-input-card), .nippo-pearl :is(.loading-stop-card,.loading-item,.inspection-remarks-panel) { border:1px solid var(--pearl-line)!important; border-radius:24px!important; background:linear-gradient(145deg,var(--pearl-field),var(--pearl-paper))!important; box-shadow:var(--pearl-shadow)!important; color:var(--pearl-ink)!important; }
 .nippo-pearl .is-phase-hidden { display:none!important; }
 .nippo-pearl .nippo-header-identity { display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; }
 .nippo-pearl .nippo-header-home { width:44px!important; height:44px!important; background:url('/assets/pearl-apps.png') 100% 100%/400% 200% no-repeat!important; }
 .nippo-pearl .nippo-header-mark { visibility:hidden; }
 .nippo-pearl .card-section-header { color:var(--pearl-ink)!important; background:none!important; border-color:var(--pearl-edge)!important; }
 .nippo-pearl :is(.driver-summary-panel,.driver-editor-panel,.inspection-row,.loading-qty-field,.loading-time-field) { background:var(--pearl-paper)!important; color:var(--pearl-ink)!important; border-color:var(--pearl-edge)!important; border-radius:14px!important; }
 .nippo-pearl .phase-actions:has(>button:only-child) { grid-template-columns:1fr!important; }
 .nippo-pearl .loading-confirm-panel:not(.midtrip-pickup-panel) { max-height:calc(var(--pearl-visible-height,100dvh) - 24px)!important; overflow-y:auto!important; overscroll-behavior:contain; }
 .nippo-pearl .loading-confirm-panel:not(.midtrip-pickup-panel) .loading-confirm-actions { position:sticky!important; bottom:0!important; z-index:2; }
 .nippo-pearl .phase-prompt { flex-wrap:wrap!important; }
}

@layer pearl {
 .nippo-pearl .phase-actions { transform:none!important; }
 .nippo-pearl.step1-basic-page[data-phase-index="0"] :is(.step-context-bar,.phase-actions) { display:none!important; }
 .nippo-pearl #nippo-date-root { padding:20px!important; --nd-ink:var(--pearl-ink); --nd-bg:var(--pearl-paper); }
 .nippo-pearl #nippo-date-root .nippo-date-heading { font-size:22px!important; margin-bottom:20px!important; }
 .nippo-pearl #nippo-date-root .nippo-date-shortcuts button { border:1px solid var(--pearl-edge)!important; border-radius:14px!important; background:var(--pearl-paper)!important; color:var(--pearl-ink)!important; min-height:48px!important; }
 .nippo-pearl #nippo-date-root .nippo-date-shortcuts button[aria-pressed="true"] { background:linear-gradient(145deg,var(--pearl-accent),color-mix(in srgb,var(--pearl-accent) 80%,#172e43))!important; color:#fff!important; border-color:#8197a9!important; box-shadow:inset 0 0 0 2px #d6e5f2!important; }
 .nippo-pearl #nippo-date-root .nippo-date-shortcuts button[data-date-shift="0"] { gap:4px!important; padding-inline:4px!important; white-space:nowrap!important; }
 @media(max-width:360px) { .nippo-pearl #nippo-date-root .nippo-date-shortcuts button[data-date-shift="0"] { font-size:16px!important; } }
 .nippo-pearl #nippo-date-root .nippo-date-next { border-radius:16px!important; background:linear-gradient(145deg,var(--pearl-accent),color-mix(in srgb,var(--pearl-accent) 80%,#172e43))!important; color:white!important; min-height:56px!important; }
 .nippo-pearl #nippo-date-root .nippo-date-next:disabled { opacity:.5!important; }
 .nippo-pearl .nippo-header-title { color:var(--pearl-ink)!important; font-size:18px!important; }
}

@layer pearl {
 .nippo-pearl .midtrip-time-control button { font-size:13px!important; padding:2px!important; white-space:nowrap!important; }
 .nippo-pearl .midtrip-time-control { grid-template-columns:minmax(0,1fr) 48px 80px!important; }
 .nippo-pearl .midtrip-cargo-heading { display:flex!important; flex-wrap:wrap!important; gap:12px!important; margin:20px 0 12px!important; }
 .nippo-pearl .midtrip-cargo-heading strong { flex:1 0 100%!important; }
 @media(max-width:359px) { .nippo-pearl .midtrip-time-control { grid-template-columns:minmax(0,1fr) 48px!important; } }
}

@layer pearl {
 .nippo-pearl .page > .card:not(.delivery-input-card) { padding:20px!important; max-height:none!important; height:auto!important; overflow:visible!important; }
 .nippo-pearl .page > .card:has(#nippo-date-root) { padding:0!important; }
 .nippo-pearl .phase-actions > button { width:100%!important; }
 .nippo-pearl [hidden][hidden] { display:none!important; }
 @media(max-width:359px) { .nippo-pearl .page > .card:not(.delivery-input-card) { padding:14px!important; } .nippo-pearl .page > .card:has(#nippo-date-root) { padding:0!important; } }
}
@layer pearl {
 .nippo-pearl .loading-unit-option { background:var(--pearl-field)!important; color:var(--pearl-ink)!important; border-color:var(--pearl-edge)!important; }
 .nippo-pearl .loading-unit-option:has(input:checked) { background:var(--pearl-paper)!important; color:var(--pearl-ink)!important; border-color:var(--ckas-accent,#0879de)!important; }
 .nippo-pearl .inspection-focus-area[data-inspection-view=list], .nippo-pearl .inspection-focus-area[data-inspection-view=list] .inspection-focus-items { height:auto!important; max-height:none!important; overflow:visible!important; flex:none!important; }
 .nippo-pearl .field-error { color:#9c303c; font-size:14px; margin:6px 0 0; line-height:1.5; }
 .nippo-pearl[data-theme=dark] .field-error { color:#ffb7b8; }
 .nippo-pearl .required-label { font-size:12px; margin-left:6px; color:var(--pearl-muted); }
}
@layer pearl {
 .nippo-pearl .ckas-odo-primary { display:flex!important; align-items:center; gap:12px; margin:12px 0!important; }
 .nippo-pearl .ckas-odo-primary input { display:block!important; flex:1; min-width:0; width:100%!important; font-size:26px!important; }
 .nippo-pearl .ckas-odo-adjust { margin:16px 0; }
 .nippo-pearl .ckas-odo-adjust summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:700; }
}
@layer pearl {
 .nippo-pearl .pearl-icon-brand { background:url('/assets/pearl-apps.png') 100% 100% /400% 200% no-repeat!important; }
}
@layer pearl {
 .nippo-pearl #nextBtn.is-disabled { opacity:1!important; cursor:pointer!important; }
 .nippo-pearl :is(.phase-actions .btn-primary,.phase-actions .btn-secondary) { min-height:56px!important; }
}
@layer pearl {
 .nippo-pearl .loading-confirm-qty-unit { background:var(--pearl-field)!important; color:var(--pearl-ink)!important; border-color:var(--pearl-edge)!important; }
}

/* Fixed controls stay anchored after editing; page content scrolls as one surface. */
@layer pearl {
 .nippo-pearl #scrollTopBtn.scroll-top-btn { position:fixed!important; margin:0!important; transform:none!important; }
 .nippo-pearl .page { padding-bottom:calc(var(--nippo-nav-height,96px) + 28px + env(safe-area-inset-bottom))!important; }
 .nippo-pearl :is(#loadingWorkScroll,#pickupList) { height:auto!important; max-height:none!important; overflow:visible!important; overscroll-behavior:auto!important; flex:none!important; }
 .nippo-pearl.step1-basic-page[data-phase-index="0"] :is(.phase-prompt,.phase-prompt-title) { border-left:0!important; padding-left:0!important; }
 .nippo-pearl.step1-basic-page[data-phase-index="0"] .phase-prompt-title span { font:inherit!important; color:inherit!important; }
 .nippo-pearl.step1-basic-page[data-phase-index="0"] .phase-prompt-title::before { display:none!important; content:none!important; }
 .nippo-pearl .route-choice .normal-route-create { display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:12px!important; margin:0!important; padding:0!important; min-height:44px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; font-size:18px!important; }
 .nippo-pearl .normal-route-create .route-choice-mark { flex:0 0 24px!important; width:24px!important; height:24px!important; border-radius:50%!important; padding:0!important; margin:0!important; }
}


@layer pearl {
 .nippo-pearl #stepBar .pearl-icon { position:relative!important; background-image:none!important; }
 .nippo-pearl #stepBar .pearl-icon::after { content:""; position:absolute; inset:0; border-radius:inherit; background:url("../assets/pearl-workflow.png") no-repeat; background-size:300% 200%; background-position:inherit; filter:url(#nippo-icon-accent); }
 .nippo-pearl .inspection-focus-choices .inspection-choice { background:var(--pearl-paper)!important; color:var(--pearl-ink)!important; border:2px solid var(--pearl-edge)!important; outline:none!important; box-shadow:none!important; }
 .nippo-pearl .inspection-focus-choices .inspection-choice > span { background:transparent!important; color:inherit!important; box-shadow:none!important; border:0!important; }
 .nippo-pearl .inspection-focus-choices .inspection-choice > span::before { display:none!important; }
 .nippo-pearl .inspection-focus-choices .inspection-choice-good:has(input:checked) { background:color-mix(in srgb,var(--ckas-accent) 16%,var(--pearl-paper))!important; color:var(--pearl-ink)!important; border-color:var(--ckas-accent)!important; box-shadow:inset 0 0 0 1px var(--ckas-accent)!important; }
 .nippo-pearl .inspection-focus-choices .inspection-choice-bad:has(input:checked) { background:#fbe9e6!important; color:#982c21!important; border-color:#ba3b2d!important; box-shadow:inset 0 0 0 1px #ba3b2d!important; }
 html[data-theme=dark] .nippo-pearl .inspection-focus-choices .inspection-choice-bad:has(input:checked) { background:#562e32!important; color:#ffe6df!important; border-color:#eea496!important; }
 .nippo-pearl .inspection-focus-choices .inspection-choice:has(input:focus-visible) { outline:3px solid var(--pearl-ink)!important; outline-offset:3px!important; }
}