/* =========================================================
   08-control-consistency.css
   Final pass for consistent action button shape, weight and priority.
   Keep this small: it normalizes controls without changing layout ownership.
========================================================= */

:root {
  --control-radius: 10px;
  --control-radius-compact: 8px;
  --control-border: color-mix(in srgb, var(--border-color) 86%, transparent);
  --control-secondary-bg: color-mix(in srgb, var(--bg-card) 94%, var(--bg-body));
  --control-secondary-hover: color-mix(in srgb, var(--accent-color) 10%, var(--bg-card));
  --control-primary-shadow: 0 7px 16px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.btn:not(.btn-close),
.header-action,
.tool-btn,
.seisan-btn,
.tray-action-btn,
#sheet-quick-edit-btn,
#zoom-controls button,
.guide-step-btn,
.guide-footer .btn,
.route-guide-mock button,
.guide-phone-btn,
.mock-form-import-button {
  border-radius: var(--control-radius);
  font-weight: 800;
  letter-spacing: 0;
  transition: background-color var(--motion-fast, 0.16s) ease,
              border-color var(--motion-fast, 0.16s) ease,
              color var(--motion-fast, 0.16s) ease,
              box-shadow var(--motion-fast, 0.16s) ease,
              transform var(--motion-fast, 0.16s) ease;
}

.btn:not(.btn-close):active,
.header-action:active,
.tool-btn:active,
.seisan-btn:active,
.tray-action-btn:active,
#sheet-quick-edit-btn:active,
#zoom-controls button:active {
  transform: translateY(1px);
}

.btn-primary,
.btn-accent-solid,
.header-actions .share-action,
.share-action,
.seisan-btn.primary,
.seisan-btn.active,
#routeHelperBtn,
#shuffleAssignBtn.tray-action-btn,
.tray-inline-row .tray-action-btn--auto,
.guide-footer .btn-primary,
.mock-form-import-button {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  box-shadow: var(--control-primary-shadow);
}

.btn-primary:hover,
.btn-accent-solid:hover,
.header-actions .share-action:hover,
.share-action:hover,
.seisan-btn.primary:hover,
.seisan-btn.active:hover,
#routeHelperBtn:hover,
#shuffleAssignBtn.tray-action-btn:hover,
.tray-inline-row .tray-action-btn--auto:hover,
.guide-footer .btn-primary:hover,
.mock-form-import-button:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, #000);
  border-color: color-mix(in srgb, var(--accent-color) 90%, #000);
  color: #fff;
}

.header-action:not(.share-action),
.tool-btn,
.seisan-btn:not(.primary):not(.active),
#fillEmptySeatsBtn.tray-action-btn,
.tray-inline-row .tray-action-btn--fill,
#sheet-quick-edit-btn,
#zoom-controls button,
.btn-outline-secondary,
.btn-secondary:not(.btn-accent-solid) {
  background: var(--control-secondary-bg);
  border-color: var(--control-border);
  color: var(--text-main);
  box-shadow: none;
}

.header-action:not(.share-action):hover,
.tool-btn:hover,
.seisan-btn:not(.primary):not(.active):hover,
#fillEmptySeatsBtn.tray-action-btn:hover,
.tray-inline-row .tray-action-btn--fill:hover,
#sheet-quick-edit-btn:hover,
#zoom-controls button:hover,
.btn-outline-secondary:hover,
.btn-secondary:not(.btn-accent-solid):hover {
  background: var(--control-secondary-hover);
  border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
  color: var(--text-main);
}

.header-action i,
.header-action span,
.tool-btn i,
.tool-btn span,
.seisan-btn i,
.seisan-btn span,
.tray-action-btn i,
.tray-action-btn span {
  color: inherit;
}

#view-toggle-bar,
.view-toggle-bar {
  border-radius: calc(var(--control-radius) + 4px);
}

#view-toggle-bar .view-tab,
.view-toggle-bar .view-tab {
  border-radius: var(--control-radius-compact);
}

#view-toggle-bar .view-tab.active,
.view-toggle-bar .view-tab.active {
  background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
  color: var(--accent-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] {
  --control-border: rgba(148, 163, 184, 0.20);
  --control-secondary-bg: color-mix(in srgb, var(--bg-card) 86%, #020617);
  --control-secondary-hover: color-mix(in srgb, var(--accent-color) 14%, var(--bg-card));
}

[data-theme="dark"] .header-action:not(.share-action),
[data-theme="dark"] .tool-btn,
[data-theme="dark"] .seisan-btn:not(.primary):not(.active),
[data-theme="dark"] #fillEmptySeatsBtn.tray-action-btn,
[data-theme="dark"] .tray-inline-row .tray-action-btn--fill,
[data-theme="dark"] #sheet-quick-edit-btn,
[data-theme="dark"] #zoom-controls button,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-secondary:not(.btn-accent-solid) {
  background: var(--control-secondary-bg);
  border-color: var(--control-border);
  color: var(--text-main);
}

[data-theme="dark"] #view-toggle-bar .view-tab.active,
[data-theme="dark"] .view-toggle-bar .view-tab.active {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 32%, transparent);
  color: color-mix(in srgb, var(--accent-color) 82%, #fff);
}

@media (max-width: 640px) {
  :root {
    --control-radius: 9px;
    --control-radius-compact: 7px;
  }

  .btn:not(.btn-close),
  .header-action,
  .tool-btn,
  .seisan-btn,
  .tray-action-btn,
  #sheet-quick-edit-btn,
  #zoom-controls button {
    min-height: 38px;
  }
}

/* =========================================================
   Priority-based button polish
   Primary = next/main action, Secondary = useful action,
   Tertiary/Icon = helper action.  This file stays last.
========================================================= */
:root {
  --control-height: 42px;
  --control-height-compact: 38px;
  --control-icon-size: 42px;
  --control-padding-x: 14px;
  --control-border-strong: color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
  --control-primary-bg: var(--accent-color);
  --control-primary-hover: color-mix(in srgb, var(--accent-color) 88%, #000);
  --control-primary-text: #fff;
  --control-primary-shadow: 0 8px 18px color-mix(in srgb, var(--accent-color) 20%, transparent);
  --control-secondary-bg: color-mix(in srgb, var(--bg-card) 92%, var(--bg-body));
  --control-secondary-hover: color-mix(in srgb, var(--accent-color) 9%, var(--bg-card));
  --control-tertiary-bg: color-mix(in srgb, var(--bg-card) 74%, transparent);
  --control-tertiary-hover: color-mix(in srgb, var(--accent-color) 7%, var(--bg-card));
  --control-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.header-action,
.tool-btn,
.edit-tools .tool-btn,
.seisan-btn,
.tray-action-btn,
#sheet-quick-edit-btn,
#zoom-controls button,
.guide-footer .btn,
.route-guide-mock button,
.guide-phone-btn,
.mock-form-import-button,
.batch-spreadsheet-button {
  min-height: var(--control-height);
  border-radius: var(--control-radius);
  border-width: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-inline: var(--control-padding-x);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
  box-shadow: none;
}

.header-action i,
.tool-btn i,
.seisan-btn i,
.tray-action-btn i,
#sheet-quick-edit-btn i {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.92em;
}

.header-action span,
.tool-btn span,
.seisan-btn span,
.tray-action-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.12;
}

.header-action:focus-visible,
.tool-btn:focus-visible,
.seisan-btn:focus-visible,
.tray-action-btn:focus-visible,
#sheet-quick-edit-btn:focus-visible,
#zoom-controls button:focus-visible,
.guide-footer .btn:focus-visible,
.route-guide-mock button:focus-visible,
.guide-phone-btn:focus-visible,
.mock-form-import-button:focus-visible,
.batch-spreadsheet-button:focus-visible {
  outline: 0;
  box-shadow: var(--control-focus-ring);
}

/* Recompute control aliases on body so light/dark palette changes are reflected.
   Aliases declared only on :root can keep the initial palette in inherited values. */
body {
  --control-border: color-mix(in srgb, var(--border-color) 86%, transparent);
  --control-border-strong: color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
  --control-primary-bg: var(--accent-color);
  --control-primary-hover: color-mix(in srgb, var(--accent-color) 88%, #000);
  --control-primary-text: #fff;
  --control-primary-shadow: 0 8px 18px color-mix(in srgb, var(--accent-color) 20%, transparent);
  --control-secondary-bg: color-mix(in srgb, var(--bg-card) 92%, var(--bg-body));
  --control-secondary-hover: color-mix(in srgb, var(--accent-color) 9%, var(--bg-card));
  --control-tertiary-bg: color-mix(in srgb, var(--bg-card) 74%, transparent);
  --control-tertiary-hover: color-mix(in srgb, var(--accent-color) 7%, var(--bg-card));
  --control-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

/* Primary: sharing, participant registration, route calculation, full auto assign. */
#shareLinkBtn.header-action,
.header-actions .share-action,
.share-action,
#batchOpenBtn.tool-btn,
#routeHelperBtn.seisan-btn,
.seisan-btn.primary,
#shuffleAssignBtn.tray-action-btn,
.tray-inline-row .tray-action-btn--auto,
.btn-primary,
.btn-accent-solid,
.guide-footer .btn-primary,
.mock-form-import-button,
.batch-spreadsheet-button {
  background: var(--control-primary-bg);
  border-color: var(--control-primary-bg);
  color: var(--control-primary-text);
  box-shadow: var(--control-primary-shadow);
}

#shareLinkBtn.header-action:hover,
.header-actions .share-action:hover,
.share-action:hover,
#batchOpenBtn.tool-btn:hover,
#routeHelperBtn.seisan-btn:hover,
.seisan-btn.primary:hover,
#shuffleAssignBtn.tray-action-btn:hover,
.tray-inline-row .tray-action-btn--auto:hover,
.btn-primary:hover,
.btn-accent-solid:hover,
.guide-footer .btn-primary:hover,
.mock-form-import-button:hover,
.batch-spreadsheet-button:hover,
#shareLinkBtn.header-action:focus-visible,
#batchOpenBtn.tool-btn:focus-visible,
#routeHelperBtn.seisan-btn:focus-visible,
#shuffleAssignBtn.tray-action-btn:focus-visible,
.tray-inline-row .tray-action-btn--auto:focus-visible {
  background: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
  color: var(--control-primary-text);
}

/* Solid buttons must keep readable text/icons even when earlier owner CSS colored children. */
#shareLinkBtn.header-action i,
#shareLinkBtn.header-action span,
.header-actions .share-action i,
.header-actions .share-action span,
.share-action i,
.share-action span,
#batchOpenBtn.tool-btn i,
#batchOpenBtn.tool-btn span,
#routeHelperBtn.seisan-btn i,
#routeHelperBtn.seisan-btn span,
.seisan-btn.primary i,
.seisan-btn.primary span,
.seisan-btn.active i,
.seisan-btn.active span,
#shuffleAssignBtn.tray-action-btn i,
#shuffleAssignBtn.tray-action-btn span,
.tray-inline-row .tray-action-btn--auto i,
.tray-inline-row .tray-action-btn--auto span,
.btn-primary i,
.btn-primary span,
.btn-accent-solid i,
.btn-accent-solid span,
.guide-footer .btn-primary i,
.guide-footer .btn-primary span,
.mock-form-import-button i,
.mock-form-import-button span,
.batch-spreadsheet-button i,
.batch-spreadsheet-button span {
  color: var(--control-primary-text);
}

/* Secondary: normal actions that are useful but not the next step. */
#editLockBtn.header-action,
#carGuideBtn.tool-btn,
#seisanGuideBtn.seisan-btn,
#fillEmptySeatsBtn.tray-action-btn,
.tray-inline-row .tray-action-btn--fill,
#sheet-quick-edit-btn,
.btn-outline-secondary,
.btn-secondary:not(.btn-accent-solid),
.guide-footer .btn-outline-secondary {
  background: var(--control-secondary-bg);
  border-color: var(--control-border);
  color: var(--text-main);
  box-shadow: none;
}

#editLockBtn.header-action:hover,
#carGuideBtn.tool-btn:hover,
#seisanGuideBtn.seisan-btn:hover,
#fillEmptySeatsBtn.tray-action-btn:hover,
.tray-inline-row .tray-action-btn--fill:hover,
#sheet-quick-edit-btn:hover,
.btn-outline-secondary:hover,
.btn-secondary:not(.btn-accent-solid):hover,
.guide-footer .btn-outline-secondary:hover,
#editLockBtn.header-action:focus-visible,
#carGuideBtn.tool-btn:focus-visible,
#seisanGuideBtn.seisan-btn:focus-visible,
#fillEmptySeatsBtn.tray-action-btn:focus-visible,
.tray-inline-row .tray-action-btn--fill:focus-visible {
  background: var(--control-secondary-hover);
  border-color: var(--control-border-strong);
  color: var(--text-main);
}

/* Tertiary/icon: helpers stay visually quieter. */
.header-more > .header-action,
#seisanRefreshBtn.seisan-btn,
.tray-inline-row .settings-btn,
#zoom-controls button,
.seisan-icon-btn {
  background: var(--control-tertiary-bg);
  border-color: var(--control-border);
  color: var(--text-sub);
  box-shadow: none;
}

.header-more > .header-action:hover,
#seisanRefreshBtn.seisan-btn:hover,
.tray-inline-row .settings-btn:hover,
#zoom-controls button:hover,
.seisan-icon-btn:hover,
.header-more > .header-action:focus-visible,
#seisanRefreshBtn.seisan-btn:focus-visible,
.tray-inline-row .settings-btn:focus-visible,
#zoom-controls button:focus-visible,
.seisan-icon-btn:focus-visible {
  background: var(--control-tertiary-hover);
  border-color: var(--control-border-strong);
  color: var(--text-main);
}

/* Header actions: keep the requested right alignment, but normalize shape and rhythm. */
.header-actions,
.header-actions .header-more {
  gap: 8px;
}

.header-actions .header-action {
  min-width: 96px;
}

.header-actions .header-more > .header-action {
  min-width: 102px;
}

.header-actions .share-action {
  min-width: 104px;
}

.header-action.is-locked,
#editLockBtn.header-action.is-locked {
  background: color-mix(in srgb, #f59e0b 14%, var(--bg-card));
  border-color: color-mix(in srgb, #f59e0b 46%, var(--border-color));
  color: var(--text-main);
}

/* Tab selector is navigation, not a primary CTA. */
#view-toggle-bar,
.view-toggle-bar {
  padding: 4px;
  gap: 4px;
  border-radius: calc(var(--control-radius) + 4px);
  background: color-mix(in srgb, var(--bg-card) 94%, var(--bg-body));
}

#view-toggle-bar .view-tab,
.view-toggle-bar .view-tab {
  min-height: 40px;
  border-radius: var(--control-radius-compact);
  color: var(--text-sub);
  font-size: 0.82rem;
  font-weight: 800;
}

#view-toggle-bar .view-tab.active,
.view-toggle-bar .view-tab.active,
[data-theme="dark"] #view-toggle-bar .view-tab.active,
[data-theme="dark"] .view-toggle-bar .view-tab.active,
[data-theme="dark"] #tab-list.view-tab.active,
[data-theme="dark"] #tab-sheet.view-tab.active,
[data-theme="dark"] #tab-seisan.view-tab.active {
  background: color-mix(in srgb, var(--accent-color) 11%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
  color: var(--accent-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 9%, transparent);
}

/* Maker top actions: guide is support, registration is the next step. */
.edit-header-tools-only .edit-tools {
  gap: 10px;
}

.edit-header-tools-only .edit-tools .tool-btn {
  min-height: 46px;
  border-radius: var(--control-radius);
  font-size: 0.88rem;
}

#carGuideBtn.tool-btn {
  color: var(--text-main);
}

#batchOpenBtn.tool-btn {
  font-size: 0.9rem;
}

/* Settlement top actions: primary route button gets the strongest emphasis. */
.seisan-head-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--control-icon-size) minmax(0, 1.55fr);
  gap: 10px;
  width: 100%;
  align-items: center;
}

.seisan-head-actions .seisan-btn {
  min-height: 46px;
  width: 100%;
  border-radius: var(--control-radius);
}

#seisanRefreshBtn.seisan-btn {
  width: var(--control-icon-size);
  min-width: var(--control-icon-size);
  padding-inline: 0;
}

#routeHelperBtn.seisan-btn {
  font-size: 0.9rem;
}

/* Bottom tray: settings/count are meta, fill is secondary, auto assign is primary. */
.tray-inline-row {
  grid-template-columns: auto auto minmax(0, 1.06fr) minmax(0, 1.22fr);
  gap: 8px;
}

.tray-inline-row .settings-btn {
  min-width: 48px;
  width: 48px;
  min-height: 38px;
  border-radius: var(--control-radius-compact);
  padding-inline: 0;
  font-size: 0.74rem;
}

#waiting-count.waiting-inline-count {
  color: var(--text-sub);
  font-weight: 800;
}

.tray-inline-row .tray-action-btn {
  min-height: 42px;
  border-radius: var(--control-radius);
  padding-inline: 10px;
  font-size: 0.78rem;
}

/* Forms/selects near buttons should share the same visual language. */
.form-control,
.form-select,
.seisan-field input,
.seisan-field select,
.seisan-toggle {
  border-radius: var(--control-radius);
}


[data-theme="dark"] {
  --control-border: rgba(148, 163, 184, 0.22);
  --control-border-strong: color-mix(in srgb, var(--accent-color) 32%, rgba(148, 163, 184, 0.24));
  --control-secondary-bg: color-mix(in srgb, var(--bg-card) 84%, #020617);
  --control-secondary-hover: color-mix(in srgb, var(--accent-color) 13%, var(--bg-card));
  --control-tertiary-bg: color-mix(in srgb, var(--bg-card) 70%, #020617);
  --control-tertiary-hover: color-mix(in srgb, var(--accent-color) 12%, var(--bg-card));
}

[data-theme="dark"] .header-action.is-locked,
[data-theme="dark"] #editLockBtn.header-action.is-locked {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.46);
  color: var(--text-main);
}

@media (max-width: 640px) {
  :root {
    --control-height: 40px;
    --control-height-compact: 36px;
    --control-icon-size: 42px;
    --control-padding-x: 12px;
  }

  .header-actions,
  .header-actions .header-more {
    gap: 7px;
  }

  .header-actions .header-action,
  .header-actions .header-more > .header-action,
  .header-actions .share-action {
    min-width: 0;
    min-height: 40px;
    padding-inline: 10px;
    font-size: 0.78rem;
    border-radius: var(--control-radius);
  }

  #view-toggle-bar,
  .view-toggle-bar {
    padding: 4px;
    gap: 4px;
  }

  #view-toggle-bar .view-tab,
  .view-toggle-bar .view-tab {
    min-height: 38px;
    padding: 7px 4px;
    font-size: 0.78rem;
  }

  .edit-header-tools-only .edit-tools {
    gap: 8px;
  }

  .edit-header-tools-only .edit-tools .tool-btn {
    min-height: 44px;
    padding-inline: 10px;
    font-size: 0.84rem;
  }

  .seisan-head-actions {
    grid-template-columns: minmax(0, 1fr) var(--control-icon-size) minmax(0, 1.42fr);
    gap: 8px;
  }

  .seisan-head-actions .seisan-btn {
    min-height: 42px;
    padding-inline: 8px;
    font-size: 0.76rem;
  }

  #routeHelperBtn.seisan-btn {
    font-size: 0.8rem;
  }

  .tray-inline-row {
    grid-template-columns: auto auto minmax(0, 1.02fr) minmax(0, 1.22fr);
    gap: 7px;
  }

  .tray-inline-row .settings-btn {
    width: 44px;
    min-width: 44px;
    min-height: 38px;
    font-size: 0.72rem;
  }

  #waiting-count.waiting-inline-count {
    font-size: 0.72rem;
  }

  .tray-inline-row .tray-action-btn {
    min-height: 40px;
    padding-inline: 8px;
    font-size: 0.72rem;
  }
}

@media (max-width: 390px) {
  .header-actions .header-action,
  .header-actions .header-more > .header-action,
  .header-actions .share-action {
    padding-inline: 8px;
    font-size: 0.74rem;
  }

  .tray-inline-row {
    grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1.18fr);
    gap: 6px;
  }

  .tray-inline-row .settings-btn {
    width: 42px;
    min-width: 42px;
  }

  .tray-inline-row .tray-action-btn {
    padding-inline: 6px;
    font-size: 0.68rem;
  }
}


/* =========================================================
   UI unification final pass
   Final layer only: tokens, surfaces, toolbar rhythm, settlement previews.
   目的：灰色の細枠で区切りすぎず、背景差・余白・文字階層で統一する。
========================================================= */
:root {
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-card-padding: 12px;
  --ui-card-gap: 12px;
  --ui-border-soft: color-mix(in srgb, var(--border-color) 44%, transparent);
  --ui-hairline-quiet: color-mix(in srgb, var(--border-color) 28%, transparent);
  --ui-surface-soft: color-mix(in srgb, var(--bg-card) 96%, var(--bg-body));
  --ui-surface-muted: color-mix(in srgb, var(--sheet-header) 66%, var(--bg-card));
  --ui-surface-sunken: color-mix(in srgb, var(--bg-body) 54%, var(--bg-card));
  --ui-surface-shadow: 0 12px 34px rgba(15, 23, 42, 0.055), 0 1px 2px rgba(15, 23, 42, 0.045);
  --ui-surface-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.035);
  --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent);
  --ui-danger: #dc2626;
  --ui-danger-soft: rgba(220, 38, 38, 0.08);
  --ui-warning: #d97706;
  --ui-warning-soft: rgba(217, 119, 6, 0.11);
  --ui-blue: #2563eb;
  --ui-blue-soft: #dbeafe;
}

[data-theme="dark"] {
  --ui-border-soft: rgba(148, 163, 184, 0.12);
  --ui-hairline-quiet: rgba(148, 163, 184, 0.09);
  --ui-surface-soft: color-mix(in srgb, var(--bg-card) 88%, #020617);
  --ui-surface-muted: rgba(255, 255, 255, 0.045);
  --ui-surface-sunken: rgba(2, 6, 23, 0.28);
  --ui-surface-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  --ui-surface-shadow-soft: none;
  --ui-danger: #f87171;
  --ui-danger-soft: rgba(248, 113, 113, 0.12);
  --ui-warning: #fbbf24;
  --ui-warning-soft: rgba(251, 191, 36, 0.12);
  --ui-blue: #60a5fa;
  --ui-blue-soft: rgba(37, 99, 235, 0.18);
}

/* Theme-safe solid controls. */
body {
  --control-radius: var(--radius-main);
  --control-radius-compact: var(--radius-sm);
  --control-border: var(--ui-border-soft);
  --control-primary-bg: var(--accent-color);
  --control-primary-hover: color-mix(in srgb, var(--accent-color) 88%, #111827);
  --control-primary-text: #fff;
  --control-secondary-bg: var(--ui-surface-soft);
  --control-secondary-hover: color-mix(in srgb, var(--accent-color) 8%, var(--bg-card));
}

body[data-app-theme] {
  --control-primary-text: #fff;
}

body[data-app-theme="warm-burnout"][data-theme="light"],
body[data-app-theme="anthropic-warm"][data-theme="light"],
body[data-app-theme="claude-warm"][data-theme="light"],
body[data-app-theme="graphite-red"][data-theme="light"] {
  --control-primary-bg: color-mix(in srgb, var(--accent-color) 82%, #111827);
  --control-primary-hover: color-mix(in srgb, var(--accent-color) 72%, #111827);
}

body[data-app-theme="ayu"][data-theme="light"],
body[data-app-theme="monokai-pro"][data-theme="dark"],
body[data-app-theme="gruvbox-material"][data-theme="light"],
body[data-app-theme="gruvbox-material"][data-theme="dark"],
body[data-app-theme="retro-keyboard"][data-theme="dark"] {
  --control-primary-bg: color-mix(in srgb, var(--accent-color) 60%, #111827);
  --control-primary-hover: color-mix(in srgb, var(--accent-color) 52%, #111827);
}

body[data-app-theme="horizon"][data-theme="dark"],
body[data-app-theme="warm-burnout"][data-theme="dark"],
body[data-app-theme="anthropic-warm"][data-theme="dark"],
body[data-app-theme="claude-warm"][data-theme="dark"],
body[data-app-theme="candy-pop"][data-theme="dark"],
body[data-app-theme="graphite-red"][data-theme="dark"] {
  --control-primary-bg: color-mix(in srgb, var(--accent-color) 72%, #111827);
  --control-primary-hover: color-mix(in srgb, var(--accent-color) 64%, #111827);
}

body[data-app-theme="everforest"][data-theme="light"],
body[data-app-theme="everforest"][data-theme="dark"],
body[data-app-theme="skyblue"][data-theme="dark"],
body[data-app-theme="gameboy-classic"][data-theme="dark"],
body[data-app-theme="candy-pop"][data-theme="light"] {
  --control-primary-bg: color-mix(in srgb, var(--accent-color) 65%, #111827);
  --control-primary-hover: color-mix(in srgb, var(--accent-color) 56%, #111827);
}

body[data-app-theme="eight-bit"][data-theme="dark"] {
  --control-primary-bg: color-mix(in srgb, var(--accent-color) 45%, #111827);
  --control-primary-hover: color-mix(in srgb, var(--accent-color) 38%, #111827);
}

body[data-app-theme="solarized"][data-theme="light"],
body[data-app-theme="solarized"][data-theme="dark"],
body[data-app-theme="one-dark"][data-theme="dark"],
body[data-app-theme="tokyo-night"][data-theme="dark"],
body[data-app-theme="night-owl"][data-theme="dark"],
body[data-app-theme="catppuccin"][data-theme="dark"] {
  --control-primary-bg: color-mix(in srgb, var(--accent-color) 88%, #111827);
  --control-primary-hover: color-mix(in srgb, var(--accent-color) 78%, #111827);
}

.btn-primary,
.btn-accent-solid,
.header-actions .share-action,
.share-action,
.seisan-btn.primary,
.seisan-btn.active,
#routeHelperBtn,
#batchOpenBtn.tool-btn,
#shuffleAssignBtn.tray-action-btn,
.tray-inline-row .tray-action-btn--auto,
.guide-footer .btn-primary,
.mock-form-import-button {
  background: var(--control-primary-bg);
  border-color: transparent;
  color: var(--control-primary-text);
  box-shadow: none;
}

.btn-primary:hover,
.btn-accent-solid:hover,
.header-actions .share-action:hover,
.share-action:hover,
.seisan-btn.primary:hover,
.seisan-btn.active:hover,
#routeHelperBtn:hover,
#batchOpenBtn.tool-btn:hover,
#shuffleAssignBtn.tray-action-btn:hover,
.tray-inline-row .tray-action-btn--auto:hover,
.guide-footer .btn-primary:hover,
.mock-form-import-button:hover {
  background: var(--control-primary-hover);
  border-color: transparent;
  color: var(--control-primary-text);
}

.btn-primary i,
.btn-primary span,
.btn-accent-solid i,
.btn-accent-solid span,
.header-actions .share-action i,
.header-actions .share-action span,
.share-action i,
.share-action span,
.seisan-btn.primary i,
.seisan-btn.primary span,
#routeHelperBtn i,
#routeHelperBtn span,
#batchOpenBtn.tool-btn i,
#batchOpenBtn.tool-btn span,
#shuffleAssignBtn.tray-action-btn i,
#shuffleAssignBtn.tray-action-btn span,
.tray-inline-row .tray-action-btn--auto i,
.tray-inline-row .tray-action-btn--auto span,
.guide-footer .btn-primary i,
.guide-footer .btn-primary span,
.mock-form-import-button i,
.mock-form-import-button span {
  color: var(--control-primary-text);
}

.header-action:not(.share-action),
.tool-btn:not(#batchOpenBtn),
.seisan-btn:not(.primary):not(.active),
#fillEmptySeatsBtn.tray-action-btn,
.tray-inline-row .tray-action-btn--fill,
#sheet-quick-edit-btn,
#zoom-controls button,
.btn-outline-secondary,
.btn-secondary:not(.btn-accent-solid) {
  background: var(--control-secondary-bg);
  border-color: var(--ui-border-soft);
  color: var(--text-main);
  box-shadow: none;
}

.header-action:not(.share-action):hover,
.tool-btn:not(#batchOpenBtn):hover,
.seisan-btn:not(.primary):not(.active):hover,
#fillEmptySeatsBtn.tray-action-btn:hover,
.tray-inline-row .tray-action-btn--fill:hover,
#sheet-quick-edit-btn:hover,
#zoom-controls button:hover,
.btn-outline-secondary:hover,
.btn-secondary:not(.btn-accent-solid):hover {
  background: var(--control-secondary-hover);
  border-color: var(--ui-border-soft);
  color: var(--text-main);
}

.header-action:focus-visible,
.tool-btn:focus-visible,
.seisan-btn:focus-visible,
.tray-action-btn:focus-visible,
.view-tab:focus-visible,
.car-plan-template-chip:focus-visible {
  outline: 0;
  box-shadow: var(--ui-focus-ring);
}

/* Surface cleanup: grey outlines are no longer the main separator. */
.seisan-card,
.car-box,
.guide-step-panel,
.batch-spreadsheet-import,
.batch-import-notice,
.theme-preview-panel,
.theme-app-preview,
.theme-preset-card,
.seisan-settings-card,
.empty-card {
  border-color: transparent;
  background: var(--bg-card);
  box-shadow: var(--ui-surface-shadow-soft);
}

:where(.seisan-summary-card, .seisan-check-item, .seisan-driver-pay-row, .driver-seat, .seat-slot, .member-card, .route-stop-row, .route-private-view, .route-private-edit, .form-control, .form-select) {
  border-color: var(--ui-hairline-quiet);
}

:where(.driver-seat, .seat-slot, .seisan-check-item, .seisan-driver-pay-row) {
  background: var(--ui-surface-muted);
}

/* Header tabs: navigation uses a quiet selected state, not CTA styling. */
#view-toggle-bar,
.view-toggle-bar {
  padding: 4px;
  gap: 4px;
  border-color: transparent;
  background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-body));
  box-shadow: var(--ui-surface-shadow-soft);
}

#view-toggle-bar .view-tab,
.view-toggle-bar .view-tab {
  min-height: 40px;
  border: 0;
  color: var(--text-sub);
  font-weight: 820;
}

#view-toggle-bar .view-tab.active,
.view-toggle-bar .view-tab.active,
[data-theme="dark"] #view-toggle-bar .view-tab.active,
[data-theme="dark"] .view-toggle-bar .view-tab.active,
[data-theme="dark"] #tab-list.view-tab.active,
[data-theme="dark"] #tab-sheet.view-tab.active,
[data-theme="dark"] #tab-seisan.view-tab.active {
  background: color-mix(in srgb, var(--text-main) 8%, var(--bg-card));
  border-color: transparent;
  color: var(--text-main);
  box-shadow: inset 0 0 0 1px var(--ui-hairline-quiet);
}

/* 2026-05 compact settlement cards. Inputs live in edit modals. */
.seisan-wrap {
  display: grid;
  gap: 10px;
}

.seisan-card {
  margin-bottom: 0;
  padding: 12px;
  border-radius: var(--radius-lg);
}

.seisan-head,
.seisan-compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.seisan-title {
  font-size: 0.98rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.seisan-head-tools-only,
.seisan-toolbar-card {
  padding: 12px;
}

.seisan-head-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.45fr);
  gap: 8px;
  width: 100%;
  align-items: center;
}

.seisan-head-actions .seisan-btn {
  min-height: 42px;
  width: 100%;
}

#seisanRefreshBtn.seisan-btn {
  min-width: 44px;
  width: 44px;
  padding-inline: 0;
}

.seisan-top-flow {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
}

.seisan-summary-card {
  min-height: 78px;
  padding: 11px 12px;
  border-radius: var(--radius-main);
  box-shadow: none;
}

.seisan-summary-value {
  font-size: 1.34rem;
  line-height: 1.05;
}

/* 2026-05 collect summary neutralization: 集めるは黒文字に戻す。 */
:root {
  --settlement-collect-bg: color-mix(in srgb, var(--bg-card) 94%, var(--bg-body));
  --settlement-collect-line: var(--ui-hairline-quiet);
}

#seisan-view-area .seisan-summary-card.collect,
.seisan-summary-card.collect,
.seisan-mock-summary.collect,
.seisan-guide-box.collect,
.c-collect {
  background: var(--settlement-collect-bg);
  border-color: var(--settlement-collect-line);
}

#seisan-view-area .seisan-summary-card.collect :is(.seisan-summary-label, .seisan-summary-label i, .seisan-summary-value),
.seisan-summary-card.collect :is(.seisan-summary-label, .seisan-summary-label i, .seisan-summary-value),
.seisan-mock-summary.collect :is(.seisan-mock-label, .seisan-mock-value) {
  color: var(--text-main);
}

.seisan-summary-card.accounting {
  background: color-mix(in srgb, #f59e0b 10%, var(--bg-card));
  border-color: color-mix(in srgb, #f59e0b 22%, transparent);
}

.seisan-summary-card.pay {
  background: color-mix(in srgb, var(--text-main) 5%, var(--bg-card));
  border-color: var(--ui-hairline-quiet);
}


.ui-toolbar-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

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

/* 2026-05 quiet 車割/班割 toggle. */
/* 2026-05 quieter edit toggle, one-line settings summary, clearer settlement preview. */
/* 2026-05 simple black edit toggle, simpler settlement cards, fewer grey outlines. */
.edit-header-tools-only.allocation-toolbar {
  max-width: 1120px;
  margin: 4px auto 10px;
  padding-inline: max(10px, env(safe-area-inset-left));
}

.edit-header-tools-only.allocation-toolbar .allocation-toolbar-inner,
.edit-header-tools-only.allocation-toolbar .edit-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}

.edit-header-tools-only.allocation-toolbar .tool-btn,
.edit-header-tools-only.allocation-toolbar .edit-tools .tool-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-main);
  line-height: 1;
  white-space: nowrap;
}

.allocation-mode-toggle.car-plan-bar {
  flex: 0 0 auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.allocation-mode-toggle .car-plan-template-tabs {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: var(--radius-main);
  background: color-mix(in srgb, var(--bg-card) 74%, var(--bg-body));
  box-shadow: inset 0 0 0 1px var(--ui-hairline-quiet);
}

.allocation-mode-toggle .car-plan-template-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 0;
  border-radius: calc(var(--radius-main) - 4px);
  background: transparent;
  color: var(--text-sub);
  font-size: 0.8rem;
  font-weight: 820;
  line-height: 1;
}

.allocation-mode-toggle .car-plan-template-chip.active,
[data-theme="dark"] .allocation-mode-toggle .car-plan-template-chip.active {
  background: #050505;
  color: #fff;
  border-color: #050505;
  box-shadow: none;
}

[data-theme="dark"] .allocation-mode-toggle .car-plan-template-tabs {
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .allocation-mode-toggle .car-plan-template-chip:not(.active) {
  color: rgba(226, 232, 240, 0.68);
}

[data-theme="dark"] .allocation-mode-toggle .car-plan-template-chip.active {
  background: rgba(226, 232, 240, 0.10);
  color: rgba(248, 250, 252, 0.96);
}

/* One-line settlement settings summary. */
.seisan-settings-card {
  padding-block: 10px;
}

.seisan-settings-card .seisan-compact-head {
  margin-bottom: 8px;
}

.seisan-summary-pills {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.seisan-summary-pills--single {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 0;
  overflow: hidden;
}

.seisan-summary-pills--single span {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ui-surface-muted);
  color: var(--text-main);
  font-size: 0.72rem;
  line-height: 1.05;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seisan-summary-pills--single small {
  display: inline;
  margin-right: 3px;
  color: var(--text-sub);
  font-size: 0.56rem;
  font-weight: 840;
}

/* 2026-05 settlement car summary readability: one-line header, unified cost rows, extras slash-separated. */
.seisan-car-summary-row {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--ui-surface-soft);
  box-shadow: var(--ui-surface-shadow-soft);
}

.seisan-car-summary-row + .seisan-car-summary-row {
  margin-top: 9px;
}

.seisan-car-summary-row.has-error {
  border-color: transparent;
  background: color-mix(in srgb, var(--ui-danger-soft) 60%, var(--ui-surface-soft));
  box-shadow: inset 3px 0 0 var(--ui-danger), var(--ui-surface-shadow-soft);
}

.seisan-car-summary-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.seisan-car-summary-name {
  min-width: 0;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 920;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seisan-car-summary-payment {
  min-width: max-content;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--ui-surface-sunken);
}

.seisan-car-summary-payment span {
  color: var(--text-sub);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.seisan-car-summary-total {
  color: var(--text-main);
  font-size: 1.16rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.seisan-car-summary-headline .seisan-edit-btn {
  min-height: 34px;
  padding-inline: 10px;
  border-radius: var(--radius-main);
  white-space: nowrap;
}

.seisan-car-summary-row .seisan-cost-preview-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin-top: 0;
}

.seisan-car-summary-row .seisan-cost-preview-item {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-height: 32px;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ui-surface-sunken);
}

[data-theme="dark"] .seisan-car-summary-payment,
[data-theme="dark"] .seisan-car-summary-row .seisan-cost-preview-item {
  background: rgba(255, 255, 255, 0.04);
}

.seisan-car-summary-row .seisan-cost-preview-label {
  align-self: baseline;
  color: var(--text-sub);
  font-size: 0.70rem;
  font-weight: 850;
  line-height: 1.45;
  white-space: nowrap;
}

.seisan-cost-preview-detail-text {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  color: var(--text-sub);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: left;
}

.seisan-extra-inline-list {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2px 5px;
  white-space: normal;
}

.seisan-extra-inline {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: normal;
}

.seisan-extra-inline span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.seisan-extra-inline strong {
  color: var(--text-main);
  font-weight: 900;
}

.seisan-extra-inline em {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 900;
}

.seisan-extra-slash {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--text-sub) 54%, transparent);
  font-weight: 700;
}

.seisan-cost-preview-muted {
  color: var(--text-sub);
  font-weight: 760;
}

.seisan-extra-line-list {
  display: grid;
  gap: 2px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--ui-hairline-quiet);
}

.seisan-extra-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--text-main);
  font-size: 0.76rem;
}

.seisan-extra-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-sub);
  font-weight: 760;
}

.seisan-extra-line strong {
  font-weight: 900;
  white-space: nowrap;
}

/* Car editor uses the same popup outline as settings. */
.settlement-edit-dialog,
.settlement-edit-dialog--car {
  width: min(calc(100vw - 24px), 360px);
  margin-inline: auto;
}

.settlement-edit-modal-content {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-card) 96%, var(--sheet-header));
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
}

[data-theme="dark"] .settlement-edit-modal-content {
  background: color-mix(in srgb, var(--bg-card) 90%, rgba(255, 255, 255, 0.05));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
}

#settlementCarEditModal .modal-body,
#settlementSettingsModal .modal-body {
  padding: 12px;
}

#settlementCarEditModal .modal-body {
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

#settlementCarEditModal .seisan-car-row {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#settlementCarEditModal .seisan-car-title {
  margin-bottom: 8px;
}

#settlementCarEditModal .seisan-car-inputs {
  gap: 7px;
}

#settlementCarEditModal .seisan-subhead {
  margin-top: 11px;
}

#settlementCarEditModal .seisan-add-row {
  margin-top: 8px;
}

.seisan-settings--modal {
  display: grid;
  gap: 9px;
}

.seisan-toggle--modal {
  margin-top: 0;
}

/* Check lists: less boxed, more list-like. */
.seisan-check-list,
.seisan-driver-pay-list {
  gap: 8px;
}

.seisan-check-item,
.seisan-driver-pay-row {
  border: 0;
  border-radius: var(--radius-main);
  background: var(--ui-surface-muted);
  box-shadow: inset 0 0 0 1px var(--ui-hairline-quiet);
}

.seisan-check-item.paid,
.seisan-driver-pay-row.done {
  background: color-mix(in srgb, var(--settlement-collect-blue-soft) 55%, var(--bg-card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--settlement-collect-blue-border) 55%, transparent);
}

/* Mobile density. */
@media (max-width: 640px) {
  .seisan-top-flow {
    grid-template-columns: 1fr;
  }

  .seisan-flow-arrow {
    display: none;
  }

  .seisan-card {
    padding: 10px;
  }

  .edit-header-tools-only.allocation-toolbar .tool-btn,
  .edit-header-tools-only.allocation-toolbar .edit-tools .tool-btn {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 0.82rem;
  }
}

@media (max-width: 420px) {
  .edit-header-tools-only.allocation-toolbar .allocation-toolbar-inner,
  .edit-header-tools-only.allocation-toolbar .edit-tools {
    gap: 6px;
  }

  .edit-header-tools-only.allocation-toolbar .tool-btn,
  .edit-header-tools-only.allocation-toolbar .edit-tools .tool-btn {
    padding-inline: 8px;
    font-size: 0.78rem;
  }

  .allocation-mode-toggle .car-plan-template-chip {
    min-height: 32px;
    padding-inline: 8px;
    font-size: 0.76rem;
  }

  .seisan-summary-pills--single span {
    padding-inline: 4px;
    font-size: 0.66rem;
  }

  .seisan-summary-pills--single small {
    font-size: 0.52rem;
  }

  .seisan-car-summary-row {
    padding: 10px;
  }

  .seisan-car-summary-headline {
    gap: 6px;
  }

  .seisan-car-summary-name {
    font-size: 0.92rem;
  }

  .seisan-car-summary-payment {
    gap: 4px;
    padding: 4px 6px;
  }

  .seisan-car-summary-payment span {
    font-size: 0.58rem;
  }

  .seisan-car-summary-total {
    font-size: 1.02rem;
  }

  .seisan-car-summary-headline .seisan-edit-btn {
    min-height: 32px;
    padding-inline: 8px;
  }

  .seisan-car-summary-row .seisan-cost-preview-item {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 5px;
    padding-inline: 7px;
  }

  .seisan-cost-preview-detail-text {
    font-size: 0.68rem;
  }

  .seisan-car-summary-row .seisan-cost-preview-item .seisan-extra-inline-list {
    justify-content: flex-start;
  }

  .settlement-edit-dialog,
  .settlement-edit-dialog--car {
    width: calc(100vw - 18px);
  }

  #settlementCarEditModal .modal-body,
  #settlementSettingsModal .modal-body {
    padding: 10px;
  }
}

/* 2026-05 phone UI polish: denser summary and tray alignment. */
.seisan-summary-value {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.random-tools {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.random-tools .tray-settings-dropdown {
  min-width: 0;
}

.random-tools .settings-btn {
  width: auto;
  min-width: 56px;
}

@media (max-width: 640px) {
  #seisan-view-area .seisan-top-flow,
  .seisan-top-flow {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px;
  }

  #seisan-view-area .seisan-flow-arrow,
  .seisan-flow-arrow {
    display: flex;
    min-width: 8px;
    font-size: 0.72rem;
  }

  #seisan-view-area .seisan-summary-card,
  .seisan-summary-card {
    min-height: 76px;
    padding: 9px 8px;
  }

  #seisan-view-area .seisan-summary-label,
  .seisan-summary-label {
    font-size: 0.68rem;
    gap: 4px;
  }

  #seisan-view-area .seisan-summary-value,
  .seisan-summary-value {
    font-size: clamp(1.04rem, 5.4vw, 1.28rem);
    letter-spacing: -0.05em;
  }

  #seisan-view-area .seisan-summary-sub,
  .seisan-summary-sub {
    font-size: 0.62rem;
  }

  .tray-inline-row {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
  }

  .random-tools {
    grid-template-columns: minmax(86px, 1fr) auto;
  }
}

@media (max-width: 390px) {
  #seisan-view-area .seisan-summary-card,
  .seisan-summary-card {
    padding-inline: 7px;
  }

  #seisan-view-area .seisan-summary-label,
  .seisan-summary-label {
    font-size: 0.62rem;
  }

  #seisan-view-area .seisan-summary-value,
  .seisan-summary-value {
    font-size: 1.04rem;
  }

  .seisan-car-summary-headline {
    grid-template-columns: minmax(0, 1fr) max-content max-content;
  }

  .seisan-car-summary-payment {
    padding-inline: 5px;
  }

  .seisan-car-summary-payment span {
    font-size: 0.54rem;
  }

  .seisan-car-summary-total {
    font-size: 0.98rem;
  }

  .random-tools {
    grid-template-columns: minmax(78px, 1fr) auto;
    gap: 5px;
  }

  .random-tools .settings-btn {
    min-width: 48px;
  }
}


/* 2026-05 cost type tag unification: one token set for every 割勘 / 部費 label. */
:root {
  --settlement-tag-font-size: 0.64rem;
  --settlement-tag-line-height: 1;
  --settlement-tag-pad-y: 2px;
  --settlement-tag-pad-x: 7px;
  --settlement-tag-min-width: 2.4em;
  --settlement-tag-min-height: 1.38em;
  --settlement-split-ink: #075985;
  --settlement-split-bg: #e0f2fe;
  --settlement-split-line: #7dd3fc;
  --settlement-club-ink: #92400e;
  --settlement-club-bg: #fef3c7;
  --settlement-club-line: #fcd34d;
}

[data-theme="dark"] {
  --settlement-split-ink: #bae6fd;
  --settlement-split-bg: rgba(14, 165, 233, 0.22);
  --settlement-split-line: rgba(125, 211, 252, 0.48);
  --settlement-club-ink: #fde68a;
  --settlement-club-bg: rgba(245, 158, 11, 0.22);
  --settlement-club-line: rgba(251, 191, 36, 0.52);
}

.seisan-extra-inline.split,
.seisan-cost-policy-tag.split,
.seisan-cost-type-badge.split,
.seisan-mock-chip.split,
.seisan-extra-type.split {
  --settlement-tag-ink: var(--settlement-split-ink);
  --settlement-tag-bg: var(--settlement-split-bg);
  --settlement-tag-line: var(--settlement-split-line);
}

.seisan-extra-inline.club,
.seisan-cost-policy-tag.club,
.seisan-cost-type-badge.club,
.seisan-mock-chip.club,
.seisan-extra-type.club {
  --settlement-tag-ink: var(--settlement-club-ink);
  --settlement-tag-bg: var(--settlement-club-bg);
  --settlement-tag-line: var(--settlement-club-line);
}

#seisan-view-area :is(.seisan-cost-policy-tag, .seisan-cost-type-badge, .seisan-extra-inline > em),
.guide-mini-screen .seisan-mock-chip,
.seisan-extra-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: var(--settlement-tag-min-width);
  min-height: var(--settlement-tag-min-height);
  padding: var(--settlement-tag-pad-y) var(--settlement-tag-pad-x);
  border: 1px solid var(--settlement-tag-line, var(--settlement-split-line));
  border-radius: 999px;
  box-shadow: none;
  background: var(--settlement-tag-bg, var(--settlement-split-bg));
  background-clip: padding-box;
  color: var(--settlement-tag-ink, var(--settlement-split-ink));
  font-size: var(--settlement-tag-font-size);
  font-style: normal;
  font-weight: 900;
  line-height: var(--settlement-tag-line-height);
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: baseline;
}

#seisan-view-area .seisan-extra-inline > .seisan-cost-policy-tag {
  margin-left: 0;
}

#seisan-view-area .seisan-extra-inline strong + .seisan-cost-policy-tag,
#seisan-view-area .seisan-extra-inline b + .seisan-cost-policy-tag {
  margin-left: 0;
}

.seisan-extra-chip.split,
.seisan-extra-chip.club {
  color: var(--text-main);
  background: color-mix(in srgb, var(--bg-body) 34%, var(--bg-card));
  border-color: var(--ui-hairline-quiet);
}

.seisan-extra-chip :is(.seisan-cost-policy-tag, .seisan-cost-type-badge) {
  color: var(--settlement-tag-ink, var(--settlement-split-ink));
  background: var(--settlement-tag-bg, var(--settlement-split-bg));
  border-color: var(--settlement-tag-line, var(--settlement-split-line));
}

/* 2026-05 strict settlement cost surfaces: summary cards and row tags share one palette. */
#seisan-view-area :is(.seisan-summary-card.collect, .settlement-cost-surface.split) {
  background: color-mix(in srgb, var(--settlement-split-bg) 78%, var(--bg-card));
  border-color: var(--settlement-split-line);
}

#seisan-view-area :is(.seisan-summary-card.accounting, .settlement-cost-surface.club) {
  background: color-mix(in srgb, var(--settlement-club-bg) 78%, var(--bg-card));
  border-color: var(--settlement-club-line);
}

#seisan-view-area .settlement-cost-surface.split :is(.seisan-summary-label, .seisan-summary-label i, .seisan-summary-sub) {
  color: var(--settlement-split-ink);
}

#seisan-view-area .settlement-cost-surface.club :is(.seisan-summary-label, .seisan-summary-label i, .seisan-summary-sub) {
  color: var(--settlement-club-ink);
}

#seisan-view-area .seisan-summary-label {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

#seisan-view-area :is(.seisan-cost-policy-tag, .seisan-cost-type-badge),
.guide-mini-screen .seisan-mock-chip,
.seisan-extra-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--settlement-tag-min-width);
  min-height: var(--settlement-tag-min-height);
  padding: var(--settlement-tag-pad-y) var(--settlement-tag-pad-x);
  border: 1px solid var(--settlement-tag-line, var(--settlement-split-line));
  border-radius: 999px;
  background: var(--settlement-tag-bg, var(--settlement-split-bg));
  color: var(--settlement-tag-ink, var(--settlement-split-ink));
  font-size: var(--settlement-tag-font-size);
  font-style: normal;
  font-weight: 900;
  line-height: var(--settlement-tag-line-height);
  letter-spacing: 0;
  box-shadow: none;
  white-space: nowrap;
}

#seisan-view-area :is(.seisan-cost-policy-tag.split, .seisan-cost-type-badge.split),
.guide-mini-screen .seisan-mock-chip.split,
.seisan-extra-type.split {
  --settlement-tag-ink: var(--settlement-split-ink);
  --settlement-tag-bg: var(--settlement-split-bg);
  --settlement-tag-line: var(--settlement-split-line);
}

#seisan-view-area :is(.seisan-cost-policy-tag.club, .seisan-cost-type-badge.club),
.guide-mini-screen .seisan-mock-chip.club,
.seisan-extra-type.club {
  --settlement-tag-ink: var(--settlement-club-ink);
  --settlement-tag-bg: var(--settlement-club-bg);
  --settlement-tag-line: var(--settlement-club-line);
}


/* 2026-05 payment label polish: 支払も割勘/部費と同じタグ形状に統一。 */
:root {
  --settlement-pay-ink: var(--text-main);
  --settlement-pay-bg: color-mix(in srgb, var(--bg-card) 72%, var(--bg-body));
  --settlement-pay-line: var(--ui-hairline-quiet);
}

[data-theme="dark"] {
  --settlement-pay-bg: rgba(255, 255, 255, 0.05);
  --settlement-pay-line: rgba(255, 255, 255, 0.12);
}

#seisan-view-area .seisan-payment-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: var(--settlement-tag-min-width);
  min-height: var(--settlement-tag-min-height);
  padding: var(--settlement-tag-pad-y) var(--settlement-tag-pad-x);
  border: 1px solid var(--settlement-pay-line);
  border-radius: 999px;
  background: var(--settlement-pay-bg);
  color: var(--settlement-pay-ink);
  font-size: var(--settlement-tag-font-size);
  font-style: normal;
  font-weight: 900;
  line-height: var(--settlement-tag-line-height);
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: baseline;
}

#seisan-view-area .seisan-summary-card.pay .seisan-summary-label,
#seisan-view-area .seisan-summary-card.pay .seisan-summary-label i,
#seisan-view-area .seisan-summary-card.pay .seisan-summary-value,
#seisan-view-area .seisan-summary-card.collect .seisan-summary-label,
#seisan-view-area .seisan-summary-card.collect .seisan-summary-label i,
#seisan-view-area .seisan-summary-card.collect .seisan-summary-value {
  color: var(--text-main);
}

#seisan-view-area .seisan-car-summary-payment {
  gap: 6px;
  align-items: center;
}

#seisan-view-area .seisan-car-summary-payment .seisan-payment-tag {
  transform: translateY(-1px);
}

/* 2026-05 summary/payment label rename polish: サマリーの割勘/部費/支払いを車カードのタグ色に合わせる。 */
:root {
  --settlement-pay-surface-bg: color-mix(in srgb, var(--settlement-pay-bg) 78%, var(--bg-card));
  --settlement-pay-surface-line: var(--settlement-pay-line);
}

#seisan-view-area .seisan-summary-card.collect {
  background: color-mix(in srgb, var(--settlement-split-bg) 78%, var(--bg-card));
  border-color: var(--settlement-split-line);
}

#seisan-view-area .seisan-summary-card.accounting {
  background: color-mix(in srgb, var(--settlement-club-bg) 78%, var(--bg-card));
  border-color: var(--settlement-club-line);
}

#seisan-view-area .seisan-summary-card.pay {
  background: var(--settlement-pay-surface-bg);
  border-color: var(--settlement-pay-surface-line);
}

#seisan-view-area .seisan-summary-card.collect .seisan-summary-label,
#seisan-view-area .seisan-summary-card.collect .seisan-summary-label i,
#seisan-view-area .seisan-summary-card.collect .seisan-summary-sub {
  color: var(--settlement-split-ink);
}

#seisan-view-area .seisan-summary-card.accounting .seisan-summary-label,
#seisan-view-area .seisan-summary-card.accounting .seisan-summary-label i,
#seisan-view-area .seisan-summary-card.accounting .seisan-summary-sub {
  color: var(--settlement-club-ink);
}

#seisan-view-area .seisan-summary-card.pay .seisan-summary-label,
#seisan-view-area .seisan-summary-card.pay .seisan-summary-label i,
#seisan-view-area .seisan-summary-card.pay .seisan-summary-sub {
  color: var(--settlement-pay-ink);
}

#seisan-view-area .seisan-summary-card.collect .seisan-summary-value,
#seisan-view-area .seisan-summary-card.accounting .seisan-summary-value,
#seisan-view-area .seisan-summary-card.pay .seisan-summary-value {
  color: var(--text-main);
}

#seisan-view-area .seisan-summary-card:is(.collect, .accounting, .pay) .seisan-summary-label {
  gap: 5px;
}

#seisan-view-area .seisan-car-summary-payment {
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--settlement-pay-surface-line);
  border-radius: var(--radius-main);
  background: var(--settlement-pay-surface-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme="dark"] #seisan-view-area .seisan-car-summary-payment {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 2026-05 app-wide visual cohesion: one surface language across edit, sheet, settlement, tray and modals. */
body {
  --ui-panel-bg: color-mix(in srgb, var(--bg-card) 96%, var(--bg-body));
  --ui-panel-bg-raised: color-mix(in srgb, var(--bg-card) 98%, var(--sheet-header));
  --ui-panel-bg-muted: color-mix(in srgb, var(--bg-card) 86%, var(--bg-body));
  --ui-panel-border: color-mix(in srgb, var(--border-color) 70%, transparent);
  --ui-panel-border-strong: color-mix(in srgb, var(--accent-color) 22%, var(--border-color));
  --ui-panel-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.05);
  --ui-panel-shadow-float: 0 16px 38px rgba(15, 23, 42, 0.12);
  --ui-panel-radius: 16px;
  --ui-inner-radius: 12px;
  --ui-pill-radius: 999px;
  --ui-inset-line: inset 0 0 0 1px var(--ui-panel-border);
}

[data-theme="dark"] {
  --ui-panel-bg: color-mix(in srgb, var(--bg-card) 88%, #020617);
  --ui-panel-bg-raised: color-mix(in srgb, var(--bg-card) 92%, rgba(255, 255, 255, 0.06));
  --ui-panel-bg-muted: color-mix(in srgb, var(--bg-card) 72%, #020617);
  --ui-panel-border: rgba(148, 163, 184, 0.18);
  --ui-panel-border-strong: color-mix(in srgb, var(--accent-color) 30%, rgba(148, 163, 184, 0.22));
  --ui-panel-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 14px 32px rgba(0, 0, 0, 0.24);
  --ui-panel-shadow-float: 0 20px 54px rgba(0, 0, 0, 0.42);
}

#app-header,
#view-toggle-bar,
.edit-header-tools-only,
.seisan-card,
.car-box,
#bottom-tray,
#sheet-title-bar,
#sheet-bottom-controls,
.sheet-empty-card,
.modal-content,
.dropdown-menu,
.person-pop-menu,
.batch-spreadsheet-import,
.theme-preview-panel,
.theme-app-preview,
.theme-preset-card {
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--ui-panel-radius);
  background: var(--ui-panel-bg-raised);
  box-shadow: var(--ui-panel-shadow);
}

#app-header,
#sheet-title-bar,
#sheet-bottom-controls,
#bottom-tray,
.modal-content,
.dropdown-menu,
.person-pop-menu {
  backdrop-filter: blur(18px) saturate(1.05);
}

#view-toggle-bar,
.edit-header-tools-only,
.seisan-card,
.car-box,
.batch-spreadsheet-import {
  background: var(--ui-panel-bg);
}

.driver-seat,
.seat-slot,
.member-card,
.seisan-summary-card,
.seisan-car-summary-row,
.seisan-check-item,
.seisan-driver-pay-row,
.sheet-car-col,
.sheet-wait-block,
.sheet-seat-row,
.sheet-driver-row,
.sheet-wait-item,
.form-control,
.form-select,
.seisan-toggle,
.route-stop-row,
.route-private-view,
.route-private-edit,
.form-sheet-howto,
.form-import-preview {
  border-color: var(--ui-panel-border);
  border-radius: var(--ui-inner-radius);
  background: var(--ui-panel-bg-muted);
  box-shadow: none;
}

.seat-slot,
.sheet-seat-row,
.sheet-wait-item,
.seisan-cost-preview-item,
.seisan-settings-card,
.seisan-summary-pills span {
  background: color-mix(in srgb, var(--ui-panel-bg-muted) 88%, var(--bg-body));
}

.driver-seat,
.sheet-driver-row {
  background: color-mix(in srgb, var(--accent-color) 6%, var(--ui-panel-bg-muted));
  border-color: var(--ui-panel-border-strong);
}

.member-card,
.seat-slot > .member-card,
#waiting-list .member-card {
  border-radius: var(--ui-inner-radius);
  background: var(--ui-panel-bg-raised);
  border-color: var(--ui-panel-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.car-header,
.seisan-head,
.seisan-compact-head,
.modal-header,
.sheet-car-header,
.sheet-wait-header,
#bottom-tray-header {
  border-color: var(--ui-panel-border);
}

.capacity-badge,
.grade-badge,
.gender-badge,
.sheet-capacity-badge,
.sync-status-badge,
.seisan-summary-pills span,
.seisan-cost-policy-tag,
.seisan-cost-type-badge,
.seisan-payment-tag,
.waiting-inline-count {
  border-radius: var(--ui-pill-radius);
}

.modal-content,
.dropdown-menu,
.person-pop-menu {
  box-shadow: var(--ui-panel-shadow-float);
}

.seisan-alert,
.seisan-car-summary-row.has-error {
  border-color: color-mix(in srgb, var(--ui-danger, #ef4444) 54%, var(--ui-panel-border));
  background: color-mix(in srgb, var(--ui-danger-soft, rgba(239, 68, 68, 0.12)) 68%, var(--ui-panel-bg));
}

#sheet-view-area.active::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-body) 86%, transparent));
}

[data-theme="dark"] #sheet-view-area.active::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-body) 90%, transparent));
}

@media (max-width: 640px) {
  body {
    --ui-panel-radius: 14px;
    --ui-inner-radius: 11px;
    --ui-panel-shadow: 0 1px 0 rgba(15, 23, 42, 0.035), 0 8px 18px rgba(15, 23, 42, 0.045);
  }

  #app-header,
  #view-toggle-bar,
  .edit-header-tools-only,
  .seisan-card,
  .car-box,
  #sheet-title-bar {
    border-radius: var(--ui-panel-radius);
  }

  .modal-content {
    border-radius: 18px 18px 0 0;
  }
}

/* 2026-05 readability pass: make section boundaries clearer without changing the visual system. */
body {
  --ui-readable-border: color-mix(in srgb, var(--border-color) 92%, var(--text-sub) 8%);
  --ui-readable-border-strong: color-mix(in srgb, var(--border-color) 78%, var(--text-sub) 22%);
  --ui-readable-divider: color-mix(in srgb, var(--border-color) 84%, var(--text-sub) 16%);
  --ui-readable-bg: color-mix(in srgb, var(--bg-card) 98%, var(--bg-body));
  --ui-readable-inner-bg: color-mix(in srgb, var(--bg-card) 82%, var(--bg-body));
  --ui-readable-shadow: 0 1px 0 rgba(15, 23, 42, 0.05), 0 8px 18px rgba(15, 23, 42, 0.065);
}

[data-theme="dark"] {
  --ui-readable-border: rgba(148, 163, 184, 0.28);
  --ui-readable-border-strong: rgba(148, 163, 184, 0.42);
  --ui-readable-divider: rgba(148, 163, 184, 0.30);
  --ui-readable-bg: color-mix(in srgb, var(--bg-card) 90%, #020617);
  --ui-readable-inner-bg: color-mix(in srgb, var(--bg-card) 74%, #020617);
  --ui-readable-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 26px rgba(0, 0, 0, 0.28);
}

#app-header,
#view-toggle-bar,
.edit-header-tools-only,
.seisan-card,
.car-box,
#bottom-tray,
#sheet-title-bar,
#sheet-bottom-controls,
.sheet-empty-card,
.modal-content,
.dropdown-menu,
.person-pop-menu,
.batch-spreadsheet-import {
  border-color: var(--ui-readable-border);
  background: var(--ui-readable-bg);
  box-shadow: var(--ui-readable-shadow);
}

.driver-seat,
.seat-slot,
.member-card,
.seisan-summary-card,
.seisan-car-summary-row,
.seisan-check-item,
.seisan-driver-pay-row,
.sheet-car-col,
.sheet-wait-block,
.sheet-seat-row,
.sheet-driver-row,
.sheet-wait-item,
.form-control,
.form-select,
.seisan-toggle,
.route-stop-row,
.route-private-view,
.route-private-edit,
.form-sheet-howto,
.form-import-preview {
  border-color: var(--ui-readable-border);
  background: var(--ui-readable-inner-bg);
}

.car-header,
.seisan-head,
.seisan-compact-head,
.modal-header,
.modal-footer,
.sheet-car-header,
.sheet-wait-header,
#bottom-tray-header,
.seisan-subhead,
.seisan-detail,
.batch-import-help-details {
  border-color: var(--ui-readable-divider);
}

.car-box,
.seisan-card,
.sheet-car-col,
.sheet-wait-block,
.seisan-car-summary-row {
  box-shadow: var(--ui-readable-shadow);
}

.seat-slot,
.sheet-seat-row,
.sheet-wait-item,
.seisan-cost-preview-item,
.seisan-summary-pills span,
.seisan-car-summary-payment {
  background: color-mix(in srgb, var(--ui-readable-inner-bg) 88%, var(--bg-body));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-readable-border) 78%, transparent);
}

.driver-seat,
.sheet-driver-row {
  border-color: color-mix(in srgb, var(--accent-color) 28%, var(--ui-readable-border-strong));
  background: color-mix(in srgb, var(--accent-color) 7%, var(--ui-readable-inner-bg));
}

.member-card,
.seat-slot > .member-card,
#waiting-list .member-card {
  background: var(--bg-card);
  border-color: var(--ui-readable-border-strong);
}

.capacity-badge,
.grade-badge,
.gender-badge,
.sheet-capacity-badge,
.sync-status-badge,
.seisan-cost-policy-tag,
.seisan-cost-type-badge,
.seisan-payment-tag {
  border-width: 1px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.035);
}

#view-toggle-bar .view-tab.active,
.view-toggle-bar .view-tab.active,
[data-theme="dark"] #view-toggle-bar .view-tab.active,
[data-theme="dark"] .view-toggle-bar .view-tab.active,
[data-theme="dark"] #tab-list.view-tab.active,
[data-theme="dark"] #tab-sheet.view-tab.active,
[data-theme="dark"] #tab-seisan.view-tab.active {
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 640px) {
  body {
    --ui-readable-shadow: 0 1px 0 rgba(15, 23, 42, 0.045), 0 6px 14px rgba(15, 23, 42, 0.06);
  }
}

/* 2026-05 allocation toolbar cohesion: actions and car/team mode switch share one rhythm. */
.edit-header-tools-only.allocation-toolbar {
  padding: 8px;
  border-color: var(--ui-readable-border);
  background: color-mix(in srgb, var(--bg-card) 94%, var(--bg-body));
}

.edit-header-tools-only.allocation-toolbar .allocation-toolbar-inner,
.edit-header-tools-only.allocation-toolbar .edit-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.edit-header-tools-only.allocation-toolbar .tool-btn,
.edit-header-tools-only.allocation-toolbar .edit-tools .tool-btn,
.allocation-mode-toggle .car-plan-template-tabs,
.allocation-mode-toggle .car-plan-template-chip {
  min-height: 38px;
  border-radius: var(--control-radius);
  font-size: 0.8rem;
  line-height: 1;
}

.edit-header-tools-only.allocation-toolbar .tool-btn,
.edit-header-tools-only.allocation-toolbar .edit-tools .tool-btn {
  padding: 0 11px;
  border-color: var(--ui-readable-border);
}

.allocation-mode-toggle.car-plan-bar {
  min-height: 38px;
}

.allocation-mode-toggle .car-plan-template-tabs {
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--ui-readable-border);
  background: color-mix(in srgb, var(--bg-card) 84%, var(--bg-body));
  box-shadow: none;
}

.allocation-mode-toggle .car-plan-template-chip {
  min-width: 58px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: calc(var(--control-radius) - 2px);
  background: transparent;
  color: var(--text-sub);
  font-weight: 830;
}

.allocation-mode-toggle .car-plan-template-chip.active,
[data-theme="dark"] .allocation-mode-toggle .car-plan-template-chip.active {
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent-color) 30%, var(--ui-readable-border));
  color: var(--accent-color);
  box-shadow: none;
}

.allocation-mode-toggle .car-plan-template-chip:not(.active):hover {
  background: color-mix(in srgb, var(--accent-color) 5%, var(--bg-card));
  color: var(--text-main);
}

.allocation-mode-toggle .car-plan-template-chip i,
.allocation-mode-toggle .car-plan-template-chip span {
  color: inherit;
}

[data-theme="dark"] .allocation-mode-toggle .car-plan-template-tabs {
  background: color-mix(in srgb, var(--bg-card) 70%, #020617);
  border-color: var(--ui-readable-border);
  box-shadow: none;
}

[data-theme="dark"] .allocation-mode-toggle .car-plan-template-chip:not(.active) {
  color: var(--text-sub);
}

@media (max-width: 640px) {
  .edit-header-tools-only.allocation-toolbar {
    padding: 7px;
  }

  .edit-header-tools-only.allocation-toolbar .allocation-toolbar-inner,
  .edit-header-tools-only.allocation-toolbar .edit-tools {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
  }

  .edit-header-tools-only.allocation-toolbar .tool-btn,
  .edit-header-tools-only.allocation-toolbar .edit-tools .tool-btn,
  .allocation-mode-toggle .car-plan-template-tabs,
  .allocation-mode-toggle .car-plan-template-chip {
    min-height: 36px;
    font-size: 0.74rem;
  }

  .edit-header-tools-only.allocation-toolbar .tool-btn,
  .edit-header-tools-only.allocation-toolbar .edit-tools .tool-btn,
  .allocation-mode-toggle .car-plan-template-chip {
    padding-inline: 8px;
  }

  .allocation-mode-toggle .car-plan-template-chip {
    min-width: 52px;
    gap: 4px;
  }

  .edit-header-tools-only.allocation-toolbar .tool-btn,
  .edit-header-tools-only.allocation-toolbar .edit-tools .tool-btn,
  .allocation-mode-toggle.car-plan-bar {
    flex: 0 0 auto;
  }
}

@media (max-width: 390px) {
  .edit-header-tools-only.allocation-toolbar .tool-btn,
  .edit-header-tools-only.allocation-toolbar .edit-tools .tool-btn,
  .allocation-mode-toggle .car-plan-template-chip {
    padding-inline: 7px;
    font-size: 0.72rem;
  }

  .allocation-mode-toggle .car-plan-template-chip {
    min-width: 49px;
  }
}

/* 2026-05 sheet table cleanup: table cells should look like cells, not nested cards. */
#sheet-view-area .sheet-car-col,
#sheet-view-area .sheet-wait-block {
  overflow: hidden;
}

#sheet-view-area .sheet-car-header,
#sheet-view-area .sheet-wait-header,
#sheet-view-area .sheet-driver-row,
#sheet-view-area .sheet-seat-row,
#sheet-view-area .sheet-wait-item {
  border-radius: 0;
  box-shadow: none;
}

#sheet-view-area .sheet-driver-row,
#sheet-view-area .sheet-seat-row,
#sheet-view-area .sheet-wait-item {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--ui-readable-divider);
}

#sheet-view-area .sheet-car-col > :last-child,
#sheet-view-area .sheet-wait-body > :last-child,
#sheet-view-area .sheet-waiting-list > :last-child {
  border-bottom: 0;
}

#sheet-view-area .sheet-driver-row {
  background: color-mix(in srgb, var(--accent-color) 5%, var(--bg-card));
}

#sheet-view-area .sheet-seat-row,
#sheet-view-area .sheet-wait-item {
  background: var(--bg-card);
}

/* 2026-05 sheet name alignment: keep the name column fixed across driver/member rows. */
#sheet-view-area .sheet-driver-row:not(.sheet-label-row),
#sheet-view-area .sheet-seat-row:not(.sheet-label-row):not(.empty):not(.sheet-seat-disabled),
#sheet-view-area .sheet-wait-item:not(.empty) {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
}

#sheet-view-area .sheet-driver-row:not(.sheet-label-row) {
  grid-template-columns: 28px minmax(0, 1fr) 16px;
}

#sheet-view-area .sheet-driver-row .grade-badge,
#sheet-view-area .sheet-driver-row .sheet-grade-placeholder {
  order: 1;
}

#sheet-view-area .sheet-driver-name {
  order: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sheet-view-area .sheet-driver-icon {
  order: 3;
  justify-self: center;
}

#sheet-view-area .sheet-seat-row > .grade-badge,
#sheet-view-area .sheet-seat-row > .sheet-grade-placeholder,
#sheet-view-area .sheet-wait-item > .grade-badge,
#sheet-view-area .sheet-wait-item > .sheet-grade-placeholder {
  grid-column: 1;
}

#sheet-view-area .sheet-seat-row > .sheet-cell-text,
#sheet-view-area .sheet-wait-item > .sheet-cell-text {
  grid-column: 2;
  min-width: 0;
}

#sheet-view-area .sheet-seat-row > .sheet-dropzone {
  grid-column: 1 / -1;
}

/* 2026-05 occupied seat fit: remove the extra frame gap around member cards. */
#cars-container .seat-slot:has(> .member-card) {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  align-self: stretch;
}

#cars-container .seat-slot > .member-card {
  width: 100%;
  min-height: 54px;
  height: 100%;
  margin: 0;
}

@media (max-width: 640px) {
  #cars-container .seat-slot > .member-card {
    min-height: 45px;
  }
}

/* 2026-05 settlement toolbar alignment: keep tools grouped on the right. */
#seisan-view-area .seisan-head-tools-only {
  justify-content: flex-end;
}

#seisan-view-area .seisan-head-tools-only .seisan-head-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

#seisan-view-area .seisan-head-tools-only .seisan-btn {
  width: auto;
  flex: 0 0 auto;
}

#seisan-view-area .seisan-head-tools-only #routeHelperBtn.seisan-btn {
  min-width: 0;
}

@media (max-width: 640px) {
  #seisan-view-area .seisan-head-tools-only .seisan-head-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
  }

  #seisan-view-area .seisan-head-tools-only .seisan-btn {
    min-height: 36px;
    padding-inline: 8px;
    font-size: 0.74rem;
  }
}

/* 2026-05 shared summary spacing: remove the heavy bottom air on phones. */
@media (max-width: 640px) {
  #sheet-view-area #sheet-title-bar {
    min-height: 48px;
    padding: 7px 9px;
    align-items: flex-start;
  }

  #sheet-view-area #sheet-canvas {
    top: 70px;
  }
}

/* 2026-05 settlement renewal: clearer hierarchy, ledger-style rows, task lists. */
#seisan-view-area {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-body) 92%, var(--bg-card)), var(--bg-body) 220px),
    var(--bg-body);
}

#seisan-view-area .seisan-wrap {
  max-width: 980px;
  display: grid;
  gap: 12px;
}

#seisan-view-area .seisan-card {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--border-color) 86%, var(--text-sub) 14%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-body));
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
}

#seisan-view-area .seisan-toolbar-card {
  padding: 10px;
}

#seisan-view-area .seisan-head,
#seisan-view-area .seisan-compact-head {
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

#seisan-view-area .seisan-head-tools-only {
  margin: 0 0 10px;
  padding-bottom: 9px;
}

#seisan-view-area .seisan-title {
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
}

#seisan-view-area .seisan-title i {
  width: 1.25em;
  color: var(--accent-color);
}

#seisan-view-area .seisan-head-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  width: 100%;
}

#seisan-view-area .seisan-head-actions .seisan-btn {
  width: auto;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

#seisan-view-area #seisanRefreshBtn.seisan-btn {
  width: 40px;
  min-width: 40px;
  padding-inline: 0;
}

#seisan-view-area #routeHelperBtn.seisan-btn {
  min-width: 0;
  padding-inline: 12px;
}

#seisan-view-area .seisan-top-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

#seisan-view-area .seisan-flow-arrow {
  display: none;
}

#seisan-view-area .seisan-summary-card {
  min-height: 92px;
  padding: 11px 10px 10px;
  border-radius: 14px;
  display: grid;
  align-content: space-between;
  gap: 5px;
  border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

#seisan-view-area .seisan-summary-card.collect {
  background: color-mix(in srgb, #e0f2fe 66%, var(--bg-card));
  border-color: color-mix(in srgb, #0284c7 28%, var(--border-color));
}

#seisan-view-area .seisan-summary-card.accounting {
  background: color-mix(in srgb, #fef3c7 68%, var(--bg-card));
  border-color: color-mix(in srgb, #d97706 28%, var(--border-color));
}

#seisan-view-area .seisan-summary-card.pay {
  background: color-mix(in srgb, #eef2ff 68%, var(--bg-card));
  border-color: color-mix(in srgb, #4f46e5 24%, var(--border-color));
}

#seisan-view-area .seisan-summary-label {
  min-width: 0;
  font-size: 0.68rem;
  line-height: 1.12;
  font-weight: 900;
  color: color-mix(in srgb, var(--text-sub) 88%, var(--text-main));
}

#seisan-view-area .seisan-summary-value {
  font-size: clamp(1.22rem, 4.3vw, 1.58rem);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 950;
}

#seisan-view-area .seisan-summary-sub {
  font-size: 0.66rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--text-sub) 88%, var(--text-main));
}

#seisan-view-area .seisan-summary-pills--single {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

#seisan-view-area .seisan-summary-pills--single span {
  min-height: 42px;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-color) 86%, var(--text-sub) 14%);
  background: color-mix(in srgb, var(--bg-card) 88%, var(--bg-body));
  box-shadow: none;
}

#seisan-view-area .seisan-summary-pills--single small {
  margin-bottom: 2px;
  font-size: 0.62rem;
  letter-spacing: 0;
  color: var(--text-sub);
}

#seisan-view-area .seisan-car-summary-row {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, var(--text-sub) 16%);
  background: var(--bg-card);
  box-shadow: none;
}

#seisan-view-area .seisan-car-summary-row + .seisan-car-summary-row {
  margin-top: 9px;
}

#seisan-view-area .seisan-car-summary-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--bg-card) 82%, var(--bg-body));
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

#seisan-view-area .seisan-car-summary-name {
  font-size: 0.95rem;
  font-weight: 950;
  letter-spacing: 0;
}

#seisan-view-area .seisan-car-summary-payment {
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent-color) 22%, var(--border-color));
}

#seisan-view-area .seisan-car-summary-total {
  font-size: 1.08rem;
  letter-spacing: 0;
}

#seisan-view-area .seisan-car-summary-headline .seisan-edit-btn {
  width: 40px;
  min-width: 40px;
  min-height: 36px;
  padding: 0;
  border-radius: 12px;
}

#seisan-view-area .seisan-car-summary-headline .seisan-edit-btn span {
  display: none;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-list {
  display: grid;
  gap: 0;
  padding: 0;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item + .seisan-cost-preview-item {
  border-top: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-label {
  font-size: 0.72rem;
  font-weight: 950;
  color: var(--text-sub);
}

#seisan-view-area .seisan-cost-preview-detail-text,
#seisan-view-area .seisan-extra-inline-list {
  min-width: 0;
  gap: 5px;
  line-height: 1.35;
}

#seisan-view-area .seisan-extra-inline,
#seisan-view-area .seisan-extra-chip {
  border-radius: 999px;
}

#seisan-view-area .seisan-check-list,
#seisan-view-area .seisan-driver-pay-list {
  display: grid;
  gap: 7px;
}

#seisan-view-area .seisan-check-item,
#seisan-view-area .seisan-driver-pay-row {
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, var(--text-sub) 16%);
  background: var(--bg-card);
  box-shadow: none;
}

#seisan-view-area .seisan-check-item {
  min-height: 42px;
  padding: 8px 9px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

#seisan-view-area .seisan-check-item input,
#seisan-view-area .seisan-driver-pay-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-color);
}

#seisan-view-area .seisan-check-name,
#seisan-view-area .seisan-driver-name {
  font-size: 0.84rem;
  font-weight: 900;
}

#seisan-view-area .seisan-driver-pay-row {
  min-height: 58px;
  padding: 9px;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  gap: 6px 8px;
}

#seisan-view-area .seisan-driver-amount {
  font-size: 0.94rem;
  font-weight: 950;
  letter-spacing: 0;
}

#seisan-view-area .seisan-driver-detail {
  font-size: 0.66rem;
  line-height: 1.3;
}

#seisan-view-area .seisan-check-item.paid,
#seisan-view-area .seisan-driver-pay-row.done {
  border-color: color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 7%, var(--bg-card));
}

#seisan-view-area .seisan-share-card {
  padding: 12px;
}

#seisan-view-area .seisan-share-card .seisan-head {
  align-items: center;
}

#seisan-view-area .seisan-share-actions {
  display: flex;
  justify-content: flex-end;
}

#seisan-view-area .seisan-share-actions .seisan-btn {
  min-height: 40px;
  border-radius: 12px;
}

@media (min-width: 860px) {
  #seisan-view-area .seisan-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #seisan-view-area .seisan-toolbar-card,
  #seisan-view-area .seisan-settings-card,
  #seisan-view-area .seisan-car-panel,
  #seisan-view-area .seisan-share-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  #seisan-view-area {
    padding: 10px 10px 24px;
  }

  #seisan-view-area .seisan-wrap {
    gap: 10px;
  }

  #seisan-view-area .seisan-card {
    padding: 10px;
    border-radius: 15px;
  }

  #seisan-view-area .seisan-toolbar-card {
    padding: 9px;
  }

  #seisan-view-area .seisan-head,
  #seisan-view-area .seisan-compact-head {
    margin-bottom: 9px;
    padding-bottom: 8px;
  }

  #seisan-view-area .seisan-title {
    font-size: 0.9rem;
  }

  #seisan-view-area .seisan-head-actions {
    gap: 5px;
  }

  #seisan-view-area .seisan-head-actions .seisan-btn {
    min-height: 36px;
    padding-inline: 8px;
    font-size: 0.74rem;
  }

  #seisan-view-area #seisanRefreshBtn.seisan-btn {
    width: 38px;
    min-width: 38px;
  }

  #seisan-view-area #routeHelperBtn.seisan-btn {
    padding-inline: 10px;
  }

  #seisan-view-area .seisan-top-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  #seisan-view-area .seisan-summary-card {
    min-height: 82px;
    padding: 9px 7px 8px;
    border-radius: 13px;
  }

  #seisan-view-area .seisan-summary-label {
    font-size: 0.62rem;
  }

  #seisan-view-area .seisan-summary-value {
    font-size: clamp(1.08rem, 5vw, 1.28rem);
  }

  #seisan-view-area .seisan-summary-sub {
    font-size: 0.58rem;
  }

  #seisan-view-area .seisan-summary-pills--single {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  #seisan-view-area .seisan-summary-pills--single span {
    min-height: 39px;
    padding: 7px 8px;
  }

  #seisan-view-area .seisan-car-summary-headline {
    grid-template-columns: minmax(0, 1fr) auto 38px;
    padding: 9px;
  }

  #seisan-view-area .seisan-car-summary-name {
    font-size: 0.9rem;
  }

  #seisan-view-area .seisan-car-summary-total {
    font-size: 1rem;
  }

  #seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item {
    grid-template-columns: 68px minmax(0, 1fr);
    padding: 8px 9px;
  }

  #seisan-view-area .seisan-car-summary-row .seisan-cost-preview-label {
    font-size: 0.68rem;
  }

  #seisan-view-area .seisan-share-actions .seisan-btn {
    width: 100%;
  }
}

@media (max-width: 380px) {
  #seisan-view-area .seisan-summary-pills--single {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

[data-theme="dark"] #seisan-view-area .seisan-card,
[data-theme="dark"] #seisan-view-area .seisan-car-summary-row,
[data-theme="dark"] #seisan-view-area .seisan-check-item,
[data-theme="dark"] #seisan-view-area .seisan-driver-pay-row {
  border-color: rgba(148, 163, 184, 0.24);
  background: color-mix(in srgb, var(--bg-card) 88%, #020617);
}

[data-theme="dark"] #seisan-view-area .seisan-summary-card.collect {
  background: color-mix(in srgb, #075985 26%, var(--bg-card));
}

[data-theme="dark"] #seisan-view-area .seisan-summary-card.accounting {
  background: color-mix(in srgb, #92400e 26%, var(--bg-card));
}

[data-theme="dark"] #seisan-view-area .seisan-summary-card.pay {
  background: color-mix(in srgb, #3730a3 22%, var(--bg-card));
}

/* 2026-05 SaaS indigo final polish: site-wide accent and settlement consistency. */
body[data-theme="light"] {
  --bg-body: #f6f7fb;
  --text-main: #0f172a;
  --text-sub: #64748b;
  --bg-card: #ffffff;
  --border-color: #e2e8f0;
  --accent-color: #4f46e5;
  --accent-soft: #eef2ff;
  --app-surface: rgba(255, 255, 255, 0.92);
  --sheet-header: #f8fafc;
  --hover-bg: #f3f4ff;
  --ui-saas-panel: rgba(255, 255, 255, 0.9);
  --ui-saas-panel-raised: rgba(255, 255, 255, 0.96);
  --ui-saas-border: rgba(148, 163, 184, 0.28);
  --ui-saas-border-strong: rgba(79, 70, 229, 0.28);
  --ui-saas-shadow: 0 1px 0 rgba(15, 23, 42, 0.035), 0 14px 34px rgba(15, 23, 42, 0.07);
  --ui-saas-shadow-soft: 0 1px 0 rgba(15, 23, 42, 0.03), 0 8px 20px rgba(15, 23, 42, 0.045);
  --ui-saas-inner: color-mix(in srgb, #ffffff 88%, #eef2ff);
  --settlement-pay-ink: #3730a3;
  --settlement-pay-bg: #eef2ff;
  --settlement-pay-line: rgba(79, 70, 229, 0.34);
  --settlement-pay-surface-bg: color-mix(in srgb, #eef2ff 76%, #ffffff);
  --settlement-pay-surface-line: rgba(79, 70, 229, 0.30);
}

body[data-theme="dark"] {
  --bg-body: #080d1a;
  --text-main: #f8fafc;
  --text-sub: #a5b4c9;
  --bg-card: #111827;
  --border-color: #273244;
  --accent-color: #818cf8;
  --accent-soft: rgba(129, 140, 248, 0.18);
  --app-surface: rgba(15, 23, 42, 0.88);
  --sheet-header: #0f172a;
  --hover-bg: #182033;
  --ui-saas-panel: rgba(15, 23, 42, 0.84);
  --ui-saas-panel-raised: rgba(17, 24, 39, 0.94);
  --ui-saas-border: rgba(148, 163, 184, 0.20);
  --ui-saas-border-strong: rgba(129, 140, 248, 0.36);
  --ui-saas-shadow: 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 46px rgba(0, 0, 0, 0.34);
  --ui-saas-shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.026), 0 12px 30px rgba(0, 0, 0, 0.24);
  --ui-saas-inner: color-mix(in srgb, var(--bg-card) 80%, #1e1b4b);
  --settlement-pay-ink: #c7d2fe;
  --settlement-pay-bg: rgba(99, 102, 241, 0.22);
  --settlement-pay-line: rgba(129, 140, 248, 0.46);
  --settlement-pay-surface-bg: color-mix(in srgb, rgba(99, 102, 241, 0.24) 72%, var(--bg-card));
  --settlement-pay-surface-line: rgba(129, 140, 248, 0.42);
}

html,
body,
#app-layout {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 30rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-body) 86%, var(--bg-card)), var(--bg-body) 42rem),
    var(--bg-body);
}

#app-header,
#view-toggle-bar,
.edit-header-tools-only,
.seisan-card,
.car-box,
#bottom-tray,
#sheet-title-bar,
#sheet-bottom-controls,
.sheet-empty-card,
.modal-content,
.dropdown-menu,
.person-pop-menu,
.batch-spreadsheet-import,
.theme-preview-panel,
.theme-app-preview,
.theme-preset-card {
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-panel-raised);
  box-shadow: var(--ui-saas-shadow-soft);
}

#app-header,
#bottom-tray,
.modal-content,
.dropdown-menu,
.person-pop-menu {
  backdrop-filter: blur(22px) saturate(1.08);
}

#view-toggle-bar,
.edit-header-tools-only,
.seisan-card,
.car-box,
.sheet-empty-card,
.batch-spreadsheet-import {
  background: var(--ui-saas-panel);
}

.driver-seat,
.seat-slot,
.member-card,
.seisan-summary-card,
.seisan-car-summary-row,
.seisan-check-item,
.seisan-driver-pay-row,
.sheet-car-col,
.sheet-wait-block,
.sheet-seat-row,
.sheet-driver-row,
.sheet-wait-item,
.form-control,
.form-select,
.seisan-toggle,
.route-stop-row,
.route-private-view,
.route-private-edit,
.form-sheet-howto,
.form-import-preview,
.seisan-summary-pills span {
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-inner);
}

.member-card,
.seat-slot > .member-card,
#waiting-list .member-card,
.sheet-driver-row,
.sheet-seat-row,
.sheet-wait-item,
.seisan-car-summary-row,
.seisan-check-item,
.seisan-driver-pay-row {
  box-shadow: var(--ui-saas-shadow-soft);
}

.driver-seat,
.sheet-driver-row,
#sheet-view-area .sheet-driver-row {
  border-color: var(--ui-saas-border-strong);
  background: color-mix(in srgb, var(--accent-color) 7%, var(--ui-saas-inner));
}

.btn-primary,
.btn-accent-solid,
.seisan-btn.primary,
.tool-btn.primary,
.header-action.share-action {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 94%, #ffffff), var(--accent-color));
  border-color: color-mix(in srgb, var(--accent-color) 82%, #111827);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.btn-primary:hover,
.btn-accent-solid:hover,
.seisan-btn.primary:hover,
.tool-btn.primary:hover,
.header-action.share-action:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, #000000);
  border-color: color-mix(in srgb, var(--accent-color) 88%, #000000);
  color: #fff;
}

.btn-outline-primary,
.btn-secondary,
.seisan-btn:not(.primary),
.tool-btn:not(.primary),
.header-action:not(.share-action),
.view-tab {
  border-color: var(--ui-saas-border);
  background: color-mix(in srgb, var(--bg-card) 84%, var(--accent-soft));
  color: color-mix(in srgb, var(--text-main) 78%, var(--accent-color));
}

.btn-outline-primary:hover,
.btn-secondary:hover,
.seisan-btn:not(.primary):hover,
.tool-btn:not(.primary):hover,
.header-action:not(.share-action):hover,
.view-tab:hover {
  border-color: var(--ui-saas-border-strong);
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-card));
  color: var(--accent-color);
}

#view-toggle-bar .view-tab.active,
.view-toggle-bar .view-tab.active,
.allocation-mode-toggle .car-plan-template-chip.active,
[data-theme="dark"] .allocation-mode-toggle .car-plan-template-chip.active {
  border-color: var(--ui-saas-border-strong);
  background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-card));
  color: var(--accent-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.form-control:focus,
.form-select:focus,
.seisan-field :is(input, select):focus {
  border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

#seisan-view-area {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-color) 11%, transparent), transparent 26rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-body) 88%, var(--bg-card)), var(--bg-body) 18rem),
    var(--bg-body);
}

#seisan-view-area .seisan-card {
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-panel-raised);
  box-shadow: var(--ui-saas-shadow);
}

#seisan-view-area .seisan-head,
#seisan-view-area .seisan-compact-head,
#seisan-view-area .seisan-head-tools-only {
  border-bottom-color: color-mix(in srgb, var(--ui-saas-border) 80%, transparent);
}

#seisan-view-area .seisan-title i {
  color: var(--accent-color);
}

#seisan-view-area .seisan-summary-card {
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-inner);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

#seisan-view-area .seisan-summary-card.collect {
  background: color-mix(in srgb, var(--settlement-split-bg) 72%, var(--bg-card));
  border-color: var(--settlement-split-line);
}

#seisan-view-area .seisan-summary-card.accounting {
  background: color-mix(in srgb, var(--settlement-club-bg) 72%, var(--bg-card));
  border-color: var(--settlement-club-line);
}

#seisan-view-area .seisan-summary-card.pay,
#seisan-view-area .seisan-car-summary-payment {
  background: var(--settlement-pay-surface-bg);
  border-color: var(--settlement-pay-surface-line);
}

#seisan-view-area .seisan-summary-card.pay :is(.seisan-summary-label, .seisan-summary-label i, .seisan-summary-sub),
#seisan-view-area .seisan-car-summary-payment,
#seisan-view-area .seisan-car-summary-payment .seisan-car-summary-total {
  color: var(--settlement-pay-ink);
}

#seisan-view-area .seisan-summary-card.pay .seisan-summary-value {
  color: var(--text-main);
}

#seisan-view-area .seisan-payment-tag,
#seisan-view-area .seisan-summary-card.pay .seisan-payment-tag,
#seisan-view-area .seisan-car-summary-payment .seisan-payment-tag {
  border-color: var(--settlement-pay-line);
  background: var(--settlement-pay-bg);
  color: var(--settlement-pay-ink);
}

#seisan-view-area .seisan-car-summary-row {
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-panel-raised);
  box-shadow: var(--ui-saas-shadow-soft);
}

#seisan-view-area .seisan-car-summary-headline {
  background: color-mix(in srgb, var(--bg-card) 86%, var(--accent-soft));
  border-bottom-color: color-mix(in srgb, var(--ui-saas-border) 82%, transparent);
}

#seisan-view-area .seisan-car-summary-payment {
  min-height: 34px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item {
  background: transparent;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item.seisan-cost-preview-item--no-label {
  grid-template-columns: minmax(0, 1fr);
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item--no-label .seisan-extra-inline-list {
  justify-content: flex-start;
  text-align: left;
}

#seisan-view-area .seisan-cost-preview-muted {
  color: var(--text-sub);
  font-weight: 800;
}

#seisan-view-area .seisan-extra-inline {
  background: color-mix(in srgb, var(--bg-card) 80%, var(--bg-body));
  border: 1px solid var(--ui-saas-border);
  padding: 3px 6px;
}

#seisan-view-area .seisan-extra-inline.split {
  border-color: color-mix(in srgb, var(--settlement-split-line) 72%, var(--ui-saas-border));
}

#seisan-view-area .seisan-extra-inline.club {
  border-color: color-mix(in srgb, var(--settlement-club-line) 72%, var(--ui-saas-border));
}

#seisan-view-area .seisan-check-item,
#seisan-view-area .seisan-driver-pay-row {
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-panel-raised);
}

#seisan-view-area .seisan-check-item.paid,
#seisan-view-area .seisan-driver-pay-row.done {
  border-color: color-mix(in srgb, var(--accent-color) 32%, var(--ui-saas-border));
  background: color-mix(in srgb, var(--accent-color) 9%, var(--bg-card));
}

[data-theme="dark"] #seisan-view-area .seisan-summary-card.collect {
  background: color-mix(in srgb, var(--settlement-split-bg) 78%, var(--bg-card));
}

[data-theme="dark"] #seisan-view-area .seisan-summary-card.accounting {
  background: color-mix(in srgb, var(--settlement-club-bg) 78%, var(--bg-card));
}

[data-theme="dark"] #seisan-view-area .seisan-summary-card.pay,
[data-theme="dark"] #seisan-view-area .seisan-car-summary-payment {
  background: var(--settlement-pay-surface-bg);
  border-color: var(--settlement-pay-surface-line);
}

[data-theme="dark"] #seisan-view-area .seisan-car-summary-headline {
  background: color-mix(in srgb, var(--bg-card) 78%, #1e1b4b);
}

[data-theme="dark"] #seisan-view-area .seisan-extra-inline {
  background: color-mix(in srgb, var(--bg-card) 78%, #020617);
}

@media (max-width: 640px) {
  #seisan-view-area .seisan-card {
    border-radius: 15px;
  }

  #seisan-view-area .seisan-top-flow {
    gap: 7px;
  }

  #seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item.seisan-cost-preview-item--no-label {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   2026-05 compact SaaS settlement pass
   目的: 余白・色数・太字・枠線を抑え、精算画面をスマホで一覧しやすくする。
========================================================= */
body[data-theme="light"] {
  --bg-body: #f7f8fc;
  --border-color: #e6e8f0;
  --text-main: #111827;
  --text-sub: #6b7280;
  --accent-color: #4f46e5;
  --accent-soft: #f0f1ff;
  --ui-saas-panel: rgba(255, 255, 255, 0.86);
  --ui-saas-panel-raised: rgba(255, 255, 255, 0.94);
  --ui-saas-inner: color-mix(in srgb, #ffffff 92%, #f4f5ff);
  --ui-saas-border: rgba(148, 163, 184, 0.22);
  --ui-saas-border-strong: rgba(63, 111, 150, 0.24);
  --ui-saas-shadow: 0 1px 0 rgba(15, 23, 42, 0.035), 0 8px 22px rgba(15, 23, 42, 0.045);
  --ui-saas-shadow-soft: 0 1px 0 rgba(15, 23, 42, 0.03), 0 4px 14px rgba(15, 23, 42, 0.035);
  --settlement-split-ink: #315a3f;
  --settlement-split-bg: color-mix(in srgb, #e7f3ec 70%, #ffffff);
  --settlement-split-line: rgba(72, 128, 92, 0.28);
  --settlement-club-ink: #6b4a1e;
  --settlement-club-bg: color-mix(in srgb, #f5ead7 72%, #ffffff);
  --settlement-club-line: rgba(153, 110, 48, 0.28);
  --settlement-pay-ink: #284f73;
  --settlement-pay-bg: color-mix(in srgb, #e8f0f6 76%, #ffffff);
  --settlement-pay-line: rgba(63, 111, 150, 0.30);
  --settlement-pay-surface-bg: color-mix(in srgb, #e8f0f6 66%, #ffffff);
  --settlement-pay-surface-line: rgba(63, 111, 150, 0.28);
  --radius-main: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
}

body[data-theme="dark"] {
  --bg-body: #090d18;
  --border-color: #273044;
  --text-main: #f8fafc;
  --text-sub: #a1a9ba;
  --bg-card: #111827;
  --accent-color: #78a6ca;
  --accent-soft: rgba(120, 166, 202, 0.16);
  --ui-saas-panel: rgba(15, 23, 42, 0.80);
  --ui-saas-panel-raised: rgba(17, 24, 39, 0.90);
  --ui-saas-inner: color-mix(in srgb, var(--bg-card) 88%, #12314a);
  --ui-saas-border: rgba(148, 163, 184, 0.17);
  --ui-saas-border-strong: rgba(120, 166, 202, 0.30);
  --ui-saas-shadow: 0 1px 0 rgba(255, 255, 255, 0.028), 0 12px 30px rgba(0, 0, 0, 0.26);
  --ui-saas-shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.022), 0 7px 20px rgba(0, 0, 0, 0.20);
  --settlement-split-ink: #b8d8c3;
  --settlement-split-bg: rgba(72, 128, 92, 0.18);
  --settlement-split-line: rgba(126, 174, 142, 0.32);
  --settlement-club-ink: #ead4ad;
  --settlement-club-bg: rgba(153, 110, 48, 0.16);
  --settlement-club-line: rgba(205, 166, 103, 0.32);
  --settlement-pay-ink: #c7dceb;
  --settlement-pay-bg: rgba(120, 166, 202, 0.18);
  --settlement-pay-line: rgba(120, 166, 202, 0.36);
  --settlement-pay-surface-bg: color-mix(in srgb, rgba(120, 166, 202, 0.20) 62%, var(--bg-card));
  --settlement-pay-surface-line: rgba(120, 166, 202, 0.34);
  --radius-main: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
}

html,
body {
  font-weight: 450;
}

body {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-color) 8%, transparent), transparent 28rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-body) 94%, var(--bg-card)), var(--bg-body) 24rem),
    var(--bg-body);
}

#app-header,
#view-toggle-bar,
.edit-header-tools-only,
.seisan-card,
.car-box,
#bottom-tray,
#sheet-title-bar,
#sheet-bottom-controls,
.sheet-empty-card,
.modal-content,
.dropdown-menu,
.person-pop-menu,
.batch-spreadsheet-import,
.theme-preview-panel,
.theme-app-preview,
.theme-preset-card {
  border-color: var(--ui-saas-border);
  border-radius: var(--radius-lg);
  background: var(--ui-saas-panel-raised);
  box-shadow: var(--ui-saas-shadow-soft);
}

#app-header {
  padding: 4px 8px 5px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.035), 0 6px 18px rgba(15, 23, 42, 0.04);
}

.app-header-main {
  padding: 8px 10px;
  gap: 7px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-saas-panel-raised) 96%, transparent);
  border-color: var(--ui-saas-border);
  box-shadow: none;
}

.app-room-input {
  min-height: 30px;
  padding: 2px 0;
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.header-actions,
.header-actions .header-more {
  gap: 5px;
}

.header-actions .header-action,
.header-actions .header-more > .header-action,
.header-actions .share-action {
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 5px;
  box-shadow: none;
}

.header-action.share-action,
#shareLinkBtn.header-action {
  background: color-mix(in srgb, var(--accent-color) 90%, #111827);
  border-color: color-mix(in srgb, var(--accent-color) 78%, #111827);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 16%, transparent);
}

#view-toggle-bar,
.view-toggle-bar {
  margin: 5px 8px 3px;
  padding: 3px;
  gap: 3px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-saas-panel) 96%, transparent);
  box-shadow: none;
}

#view-toggle-bar .view-tab,
.view-toggle-bar .view-tab {
  min-height: 34px;
  padding: 6px 4px;
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-sub);
}

#view-toggle-bar .view-tab.active,
.view-toggle-bar .view-tab.active,
[data-theme="dark"] #view-toggle-bar .view-tab.active,
[data-theme="dark"] .view-toggle-bar .view-tab.active,
[data-theme="dark"] #tab-list.view-tab.active,
[data-theme="dark"] #tab-sheet.view-tab.active,
[data-theme="dark"] #tab-seisan.view-tab.active {
  background: color-mix(in srgb, var(--accent-color) 9%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent-color) 20%, var(--ui-saas-border));
  color: color-mix(in srgb, var(--accent-color) 84%, var(--text-main));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 7%, transparent);
}

#seisan-view-area {
  padding: 8px 10px 22px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-color) 7%, transparent), transparent 24rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-body) 94%, var(--bg-card)), var(--bg-body) 18rem),
    var(--bg-body);
}

#seisan-view-area .seisan-wrap {
  gap: 9px;
}

#seisan-view-area .seisan-card {
  padding: 10px;
  border-radius: 13px;
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-panel-raised);
  box-shadow: var(--ui-saas-shadow-soft);
}

#seisan-view-area .seisan-toolbar-card {
  padding: 9px;
}

#seisan-view-area .seisan-head,
#seisan-view-area .seisan-compact-head,
#seisan-view-area .seisan-head-tools-only {
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom-color: color-mix(in srgb, var(--ui-saas-border) 62%, transparent);
}

#seisan-view-area .seisan-title {
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0;
}

#seisan-view-area .seisan-title i {
  color: color-mix(in srgb, var(--accent-color) 72%, var(--text-sub));
}

#seisan-view-area .seisan-head-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

#seisan-view-area .seisan-head-actions .seisan-btn,
#seisan-view-area .seisan-compact-head .seisan-btn,
#seisan-view-area .seisan-share-actions .seisan-btn {
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 720;
  box-shadow: none;
}

#seisan-view-area #seisanRefreshBtn.seisan-btn {
  width: 36px;
  min-width: 36px;
  min-height: 34px;
}

#seisan-view-area #routeHelperBtn.seisan-btn {
  min-width: 96px;
  background: color-mix(in srgb, var(--accent-color) 92%, #111827);
  border-color: color-mix(in srgb, var(--accent-color) 76%, #111827);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent-color) 15%, transparent);
}

#seisan-view-area .seisan-top-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#seisan-view-area .seisan-summary-card {
  min-height: 70px;
  padding: 8px 8px 7px;
  border-radius: 11px;
  gap: 3px;
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-inner);
  box-shadow: none;
}

#seisan-view-area .seisan-summary-card.collect,
[data-theme="dark"] #seisan-view-area .seisan-summary-card.collect {
  background: color-mix(in srgb, var(--settlement-split-bg) 62%, var(--bg-card));
  border-color: var(--settlement-split-line);
}

#seisan-view-area .seisan-summary-card.accounting,
[data-theme="dark"] #seisan-view-area .seisan-summary-card.accounting {
  background: color-mix(in srgb, var(--settlement-club-bg) 64%, var(--bg-card));
  border-color: var(--settlement-club-line);
}

#seisan-view-area .seisan-summary-card.pay,
[data-theme="dark"] #seisan-view-area .seisan-summary-card.pay {
  background: var(--settlement-pay-surface-bg);
  border-color: var(--settlement-pay-surface-line);
}

#seisan-view-area .seisan-summary-label {
  font-size: 0.58rem;
  font-weight: 720;
  color: var(--text-sub);
}

#seisan-view-area .seisan-summary-label i {
  color: currentColor;
  font-size: 0.86em;
}

#seisan-view-area .seisan-summary-value {
  font-size: clamp(1rem, 4.4vw, 1.22rem);
  font-weight: 820;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

#seisan-view-area .seisan-summary-sub {
  font-size: 0.55rem;
  line-height: 1.25;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-sub) 92%, var(--text-main));
}

#seisan-view-area .seisan-cost-policy-tag,
#seisan-view-area .seisan-cost-type-badge,
#seisan-view-area .seisan-payment-tag {
  min-height: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  border-width: 1px;
  font-size: 0.58rem;
  font-weight: 720;
  line-height: 1.15;
  box-shadow: none;
}

#seisan-view-area .seisan-cost-policy-tag.split,
#seisan-view-area .seisan-cost-type-badge.split {
  background: var(--settlement-split-bg);
  border-color: var(--settlement-split-line);
  color: var(--settlement-split-ink);
}

#seisan-view-area .seisan-cost-policy-tag.club,
#seisan-view-area .seisan-cost-type-badge.club {
  background: var(--settlement-club-bg);
  border-color: var(--settlement-club-line);
  color: var(--settlement-club-ink);
}

#seisan-view-area .seisan-payment-tag,
#seisan-view-area .seisan-summary-card.pay .seisan-payment-tag,
#seisan-view-area .seisan-car-summary-payment .seisan-payment-tag {
  background: var(--settlement-pay-bg);
  border-color: var(--settlement-pay-line);
  color: var(--settlement-pay-ink);
}

#seisan-view-area .seisan-alert {
  margin-top: 7px;
  padding: 7px 8px;
  border-radius: 10px;
  border-color: color-mix(in srgb, #ef4444 32%, var(--ui-saas-border));
  background: color-mix(in srgb, #fef2f2 58%, var(--bg-card));
  color: #991b1b;
  font-size: 0.70rem;
  font-weight: 620;
  line-height: 1.42;
}

#seisan-view-area .seisan-alert-row {
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}

#seisan-view-area .seisan-alert-row.is-guidance {
  color: color-mix(in srgb, var(--text-sub) 92%, var(--text-main));
}

#seisan-view-area .seisan-alert-row.is-error {
  font-weight: 730;
}

#seisan-view-area .seisan-alert-action {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 9px;
  font-size: 0.66rem;
  font-weight: 720;
  background: color-mix(in srgb, #ffffff 76%, #fef2f2);
  box-shadow: none;
}

[data-theme="dark"] #seisan-view-area .seisan-alert {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(127, 29, 29, 0.16);
  color: #fecaca;
}

[data-theme="dark"] #seisan-view-area .seisan-alert-row.is-guidance {
  color: #cbd5e1;
}

#seisan-view-area .seisan-summary-pills--single {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

#seisan-view-area .seisan-summary-pills--single span {
  min-height: 34px;
  padding: 6px 7px;
  border-radius: 10px;
  border-color: var(--ui-saas-border);
  background: color-mix(in srgb, var(--bg-card) 78%, var(--bg-body));
  box-shadow: none;
  font-size: 0.74rem;
  font-weight: 720;
}

#seisan-view-area .seisan-summary-pills--single span.is-attention {
  border-color: color-mix(in srgb, #ef4444 34%, var(--ui-saas-border));
  background: color-mix(in srgb, #fef2f2 58%, var(--bg-card));
}

[data-theme="dark"] #seisan-view-area .seisan-summary-pills--single span.is-attention {
  background: rgba(127, 29, 29, 0.16);
  border-color: rgba(248, 113, 113, 0.30);
}

#seisan-view-area .seisan-summary-pills--single small {
  margin-bottom: 1px;
  font-size: 0.56rem;
  font-weight: 640;
  color: var(--text-sub);
}

#seisan-view-area .seisan-car-panel .seisan-head {
  margin-bottom: 7px;
  padding-bottom: 7px;
}

#seisan-view-area .seisan-car-summary-row {
  overflow: hidden;
  border-radius: 11px;
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-panel-raised);
  box-shadow: none;
}

#seisan-view-area .seisan-car-summary-row + .seisan-car-summary-row {
  margin-top: 7px;
}

#seisan-view-area .seisan-car-summary-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  background: color-mix(in srgb, var(--bg-card) 91%, var(--accent-soft));
  border-bottom: 1px solid color-mix(in srgb, var(--ui-saas-border) 58%, transparent);
}

[data-theme="dark"] #seisan-view-area .seisan-car-summary-headline {
  background: color-mix(in srgb, var(--bg-card) 88%, #1e1b4b);
}

#seisan-view-area .seisan-car-summary-name {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: 0;
}

#seisan-view-area .seisan-car-summary-name span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#seisan-view-area .seisan-car-summary-name em {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid var(--ui-saas-border);
  border-radius: 999px;
  color: var(--text-sub);
  background: color-mix(in srgb, var(--bg-card) 70%, var(--bg-body));
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 720;
}

#seisan-view-area .seisan-car-summary-payment,
[data-theme="dark"] #seisan-view-area .seisan-car-summary-payment {
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 10px;
  gap: 5px;
  background: var(--settlement-pay-surface-bg);
  border-color: var(--settlement-pay-surface-line);
  color: var(--settlement-pay-ink);
  box-shadow: none;
}

#seisan-view-area .seisan-car-summary-total {
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.018em;
}

#seisan-view-area .seisan-car-summary-headline .seisan-edit-btn {
  width: 34px;
  min-width: 34px;
  min-height: 30px;
  border-radius: 9px;
  padding: 0;
}

#seisan-view-area .seisan-car-summary-headline .seisan-edit-btn i {
  font-size: 0.78rem;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-list {
  display: grid;
  gap: 0;
  padding: 0;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item {
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item + .seisan-cost-preview-item {
  border-top: 1px solid color-mix(in srgb, var(--ui-saas-border) 46%, transparent);
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item.seisan-cost-preview-item--no-label {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 6px;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-label {
  font-size: 0.65rem;
  font-weight: 680;
  color: var(--text-sub);
}

#seisan-view-area .seisan-cost-preview-detail-text,
#seisan-view-area .seisan-extra-inline-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  line-height: 1.25;
  text-align: left;
}

#seisan-view-area .seisan-extra-slash,
#seisan-view-area .seisan-extra-plus {
  display: none;
}

#seisan-view-area .seisan-extra-inline,
#seisan-view-area .seisan-extra-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--ui-saas-border);
  background: color-mix(in srgb, var(--bg-card) 86%, var(--bg-body));
  font-size: 0.68rem;
  font-weight: 640;
  color: var(--text-main);
  box-shadow: none;
}

#seisan-view-area .seisan-extra-inline strong,
#seisan-view-area .seisan-extra-chip b {
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: -0.012em;
}

#seisan-view-area .seisan-extra-inline.split {
  border-color: var(--settlement-split-line);
}

#seisan-view-area .seisan-extra-inline.club {
  border-color: var(--settlement-club-line);
}

#seisan-view-area .seisan-cost-preview-muted {
  padding: 2px 0;
  color: var(--text-sub);
  font-size: 0.68rem;
  font-weight: 620;
}

#seisan-view-area .seisan-car-summary-row.has-error {
  border-color: color-mix(in srgb, #ef4444 36%, var(--ui-saas-border));
  background: color-mix(in srgb, #fef2f2 38%, var(--bg-card));
}

[data-theme="dark"] #seisan-view-area .seisan-car-summary-row.has-error {
  background: color-mix(in srgb, rgba(127, 29, 29, 0.18) 58%, var(--bg-card));
}

#seisan-view-area .seisan-check-item,
#seisan-view-area .seisan-driver-pay-row {
  border-color: var(--ui-saas-border);
  border-radius: 10px;
  background: var(--ui-saas-panel-raised);
  box-shadow: none;
}

#seisan-view-area .seisan-driver-name,
#seisan-view-area .seisan-check-name,
#seisan-view-area .seisan-driver-amount {
  font-weight: 720;
}

@media (max-width: 640px) {
  #app-header {
    padding: 4px 8px 4px;
  }

  .app-header-main {
    padding: 7px 9px;
    border-radius: 13px;
  }

  .app-room-input {
    min-height: 30px;
    font-size: 16px;
    font-weight: 750;
  }

  .app-header-main > .header-actions {
    max-width: 62vw;
    gap: 4px;
  }

  .header-actions .header-action,
  .header-actions .header-more > .header-action,
  .header-actions .share-action {
    min-height: 31px;
    padding: 6px 7px;
    border-radius: 9px;
    font-size: 0.68rem;
  }

  #view-toggle-bar,
  .view-toggle-bar {
    margin: 4px 8px 3px;
  }

  #view-toggle-bar .view-tab,
  .view-toggle-bar .view-tab {
    min-height: 33px;
    font-size: 0.70rem;
  }

  #seisan-view-area {
    padding: 8px 10px 22px;
  }

  #seisan-view-area .seisan-wrap {
    gap: 8px;
  }

  #seisan-view-area .seisan-card {
    padding: 9px;
    border-radius: 12px;
  }

  #seisan-view-area .seisan-head,
  #seisan-view-area .seisan-compact-head,
  #seisan-view-area .seisan-head-tools-only {
    margin-bottom: 7px;
    padding-bottom: 6px;
  }

  #seisan-view-area .seisan-head-actions .seisan-btn {
    min-height: 32px;
    padding-inline: 8px;
    font-size: 0.68rem;
  }

  #seisan-view-area #seisanRefreshBtn.seisan-btn {
    width: 34px;
    min-width: 34px;
  }

  #seisan-view-area #routeHelperBtn.seisan-btn {
    min-width: 86px;
  }

  #seisan-view-area .seisan-top-flow {
    gap: 5px;
  }

  #seisan-view-area .seisan-summary-card {
    min-height: 66px;
    padding: 7px 6px 6px;
    border-radius: 10px;
  }

  #seisan-view-area .seisan-summary-label {
    font-size: 0.55rem;
  }

  #seisan-view-area .seisan-summary-value {
    font-size: clamp(0.94rem, 4.5vw, 1.13rem);
  }

  #seisan-view-area .seisan-summary-sub {
    font-size: 0.52rem;
  }

  #seisan-view-area .seisan-summary-pills--single {
    gap: 4px;
  }

  #seisan-view-area .seisan-summary-pills--single span {
    min-height: 32px;
    padding: 5px 6px;
    font-size: 0.68rem;
  }

  #seisan-view-area .seisan-summary-pills--single small {
    font-size: 0.52rem;
  }

  #seisan-view-area .seisan-car-summary-headline {
    grid-template-columns: minmax(0, 1fr) auto 32px;
    gap: 5px;
    padding: 7px;
  }

  #seisan-view-area .seisan-car-summary-name {
    font-size: 0.80rem;
  }

  #seisan-view-area .seisan-car-summary-payment {
    min-height: 28px;
    padding: 3px 6px;
  }

  #seisan-view-area .seisan-car-summary-total {
    font-size: 0.90rem;
  }

  #seisan-view-area .seisan-car-summary-headline .seisan-edit-btn {
    width: 32px;
    min-width: 32px;
    min-height: 28px;
  }

  #seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item {
    min-height: 31px;
    padding: 5px 7px;
    grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  }

  #seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item--no-label {
    padding-top: 5px;
  }

  #seisan-view-area .seisan-extra-inline,
  #seisan-view-area .seisan-extra-chip {
    min-height: 22px;
    padding: 2px 6px;
    font-size: 0.64rem;
  }

  #seisan-view-area .seisan-extra-inline strong,
  #seisan-view-area .seisan-extra-chip b {
    font-size: 0.70rem;
  }
}

@media (max-width: 380px) {
  #seisan-view-area .seisan-summary-pills--single {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Settlement car summary: inline costs without amount frames. */
#seisan-view-area .seisan-car-summary-payment,
[data-theme="dark"] #seisan-view-area .seisan-car-summary-payment {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item--inline-all {
  display: block;
  min-height: auto;
  padding: 7px 8px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item--inline-all + .seisan-cost-preview-item--inline-all {
  border-top: 0;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-detail-text,
#seisan-view-area .seisan-car-summary-row .seisan-extra-inline-list {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px 6px;
  color: var(--text-main);
  font-size: 0.72rem;
  font-weight: 640;
  line-height: 1.5;
  text-align: left;
}

#seisan-view-area .seisan-car-summary-row .seisan-extra-inline {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 4px;
  color: var(--text-main);
}

#seisan-view-area .seisan-car-summary-row .seisan-extra-inline.split,
#seisan-view-area .seisan-car-summary-row .seisan-extra-inline.club {
  border-color: transparent;
}

#seisan-view-area .seisan-car-summary-row .seisan-extra-inline > span {
  color: var(--text-main);
  font-weight: 680;
}

#seisan-view-area .seisan-car-summary-row .seisan-extra-inline strong {
  margin-left: 0;
  color: var(--text-main);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: -0.012em;
}

#seisan-view-area .seisan-car-summary-row .seisan-extra-slash,
#seisan-view-area .seisan-car-summary-row .seisan-extra-plus {
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, var(--text-sub) 86%, var(--text-main));
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1;
}

#seisan-view-area .seisan-driver-detail .seisan-extra-plus {
  display: inline-flex;
  align-items: center;
  margin-inline: 3px;
  color: color-mix(in srgb, var(--text-main) 82%, var(--text-sub));
  font-weight: 820;
  line-height: 1;
}

@media (max-width: 640px) {
  #seisan-view-area .seisan-car-summary-payment,
  [data-theme="dark"] #seisan-view-area .seisan-car-summary-payment {
    min-height: auto;
    padding: 0;
  }

  #seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item--inline-all {
    padding: 6px 7px 7px;
  }

  #seisan-view-area .seisan-car-summary-row .seisan-extra-inline {
    min-height: 0;
    padding: 0;
    font-size: 0.68rem;
  }

  #seisan-view-area .seisan-car-summary-row .seisan-extra-inline strong {
    font-size: 0.72rem;
  }
}

/* =========================================================
   2026-05 dark mode coverage pass
   目的: 既存のSaaS調の見た目を保ったまま、白く残りやすい面・入力・モックUIをダークテーマに追従させる。
========================================================= */
body[data-theme="dark"] {
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text-main);
  --bs-secondary-color: var(--text-sub);
  --bs-border-color: var(--border-color);
  --bs-tertiary-bg: var(--sheet-header);
  --bs-modal-bg: var(--bg-card);
  --bs-dropdown-bg: var(--bg-card);
  --bs-dropdown-color: var(--text-main);
  --bs-dropdown-link-color: var(--text-main);
  --bs-dropdown-link-hover-color: var(--text-main);
  --bs-dropdown-link-hover-bg: var(--hover-bg);
  --bs-form-control-bg: var(--bg-card);
  --bs-form-control-color: var(--text-main);
}

[data-theme="dark"] :is(
  #app-header,
  .app-header-main,
  #view-toggle-bar,
  .view-toggle-bar,
  .edit-header-tools-only,
  .ui-toolbar-card,
  #bottom-tray,
  .tray-inline-row,
  .car-box,
  .driver-seat,
  .seat-slot,
  .member-card,
  .drop-create-lane,
  .empty-card,
  .sheet-empty-card,
  .sheet-car-col,
  .sheet-wait-block,
  .sheet-driver-row,
  .sheet-seat-row,
  .sheet-wait-item,
  #sheet-title-bar,
  #sheet-bottom-controls,
  .seisan-card,
  .seisan-summary-card,
  .seisan-car-summary-row,
  .seisan-check-item,
  .seisan-driver-pay-row,
  .seisan-summary-pills span,
  .route-private-panel,
  .route-stop-panel,
  .route-helper-panel,
  .route-private-view,
  .route-private-edit,
  .theme-preview-panel,
  .theme-app-preview,
  .theme-preset-card,
  .theme-system-note,
  .global-guide-card,
  .app-guide-box,
  .guide-mini-screen,
  .batch-spreadsheet-import,
  .form-import-preview,
  .form-sheet-howto,
  .form-import-result-grid,
  .dropdown-menu,
  .modal-content
) {
  color: var(--text-main);
  border-color: var(--ui-saas-border, var(--border-color));
  background-color: color-mix(in srgb, var(--bg-card) 90%, #020617);
}

[data-theme="dark"] :is(
  .app-shell,
  #list-view-area,
  #sheet-view-area,
  #seisan-view-area,
  .modal-body,
  .offcanvas,
  .theme-preview-body,
  .sheet-viewport,
  .guide-step-body,
  .guide-modal-body
) {
  color: var(--text-main);
  background-color: var(--bg-body);
}

[data-theme="dark"] :is(
  .modal-header,
  .modal-footer,
  .dropdown-header,
  .sheet-car-header,
  .sheet-wait-header,
  .seisan-car-summary-headline,
  .theme-preview-head,
  .guide-modal-header,
  .guide-section-head,
  .batch-spreadsheet-head
) {
  color: var(--text-main);
  border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
  background: color-mix(in srgb, var(--bg-card) 78%, #020617);
}

[data-theme="dark"] :is(
  .form-control,
  .form-select,
  textarea,
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  .route-stop-input,
  .route-private-input,
  .seisan-field input,
  .seisan-field select,
  .seisan-extra-row input,
  .seisan-extra-row select,
  .seisan-car-inputs input
) {
  color: var(--text-main);
  caret-color: var(--accent-color);
  border-color: var(--ui-saas-border, var(--border-color));
  background-color: color-mix(in srgb, var(--bg-card) 84%, #020617);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

[data-theme="dark"] :is(
  .form-control,
  .form-select,
  textarea,
  input,
  select
)::placeholder {
  color: color-mix(in srgb, var(--text-sub) 72%, transparent);
  opacity: 1;
}

[data-theme="dark"] :is(
  .form-control:focus,
  .form-select:focus,
  textarea:focus,
  input:focus,
  select:focus,
  .seisan-field input:focus,
  .seisan-field select:focus,
  .seisan-extra-row input:focus,
  .seisan-extra-row select:focus
) {
  color: var(--text-main);
  border-color: color-mix(in srgb, var(--accent-color) 54%, var(--border-color));
  background-color: color-mix(in srgb, var(--bg-card) 90%, #020617);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

[data-theme="dark"] :is(
  .btn-outline-primary,
  .btn-secondary,
  .seisan-btn:not(.primary):not(.active),
  .tool-btn:not([data-priority="share"]),
  .tool-btn:not(.primary),
  .header-action:not(.share-action),
  .view-tab:not(.active),
  .car-plan-template-chip:not(.active),
  .sheet-zoom-btn,
  .sheet-zoom-reset-btn,
  .seisan-icon-btn,
  .member-menu-btn,
  .car-delete-btn,
  .settings-btn,
  .tray-action-btn
) {
  color: color-mix(in srgb, var(--text-main) 84%, var(--text-sub));
  border-color: var(--ui-saas-border, var(--border-color));
  background: color-mix(in srgb, var(--bg-card) 80%, #020617);
  box-shadow: none;
}

[data-theme="dark"] :is(
  .btn-outline-primary:hover,
  .btn-secondary:hover,
  .seisan-btn:not(.primary):not(.active):hover,
  .tool-btn:not([data-priority="share"]):hover,
  .tool-btn:not(.primary):hover,
  .header-action:not(.share-action):hover,
  .view-tab:not(.active):hover,
  .car-plan-template-chip:not(.active):hover,
  .sheet-zoom-btn:hover,
  .sheet-zoom-reset-btn:hover,
  .seisan-icon-btn:hover,
  .member-menu-btn:hover,
  .settings-btn:hover,
  .tray-action-btn:hover
) {
  color: var(--text-main);
  border-color: color-mix(in srgb, var(--accent-color) 36%, var(--ui-saas-border));
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-card));
}

[data-theme="dark"] :is(
  .header-action.share-action,
  #shareLinkBtn.header-action,
  .seisan-btn.primary,
  .btn-primary,
  .tool-btn.primary,
  .tool-btn[data-priority="share"]
) {
  color: #fff;
  background: color-mix(in srgb, var(--accent-color) 86%, #0f172a);
  border-color: color-mix(in srgb, var(--accent-color) 68%, #0f172a);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

[data-theme="dark"] :is(
  #view-toggle-bar .view-tab.active,
  .view-toggle-bar .view-tab.active,
  #tab-list.view-tab.active,
  #tab-sheet.view-tab.active,
  #tab-seisan.view-tab.active,
  .allocation-mode-toggle .car-plan-template-chip.active
) {
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color) 34%, var(--ui-saas-border));
  background: color-mix(in srgb, var(--accent-color) 14%, var(--bg-card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 10%, transparent);
}

[data-theme="dark"] :is(
  .text-muted,
  .seisan-muted,
  .seisan-small,
  .seisan-summary-sub,
  .sheet-summary-sub,
  .guide-short-text,
  .guide-note-inline,
  .theme-system-note,
  .dropdown-item small,
  .member-meta,
  .car-subtitle,
  .tray-subtext,
  .seisan-driver-detail,
  .seisan-check-note
) {
  color: var(--text-sub);
}

[data-theme="dark"] :is(
  .dropdown-item,
  .dropdown-item button,
  .modal-title,
  .guide-feature-title,
  .theme-section-title,
  .seisan-title,
  .sheet-title-main,
  .car-name-label,
  .member-name-text,
  .driver-name-disp,
  .sheet-cell-text,
  .sheet-chip-text,
  .seisan-check-name,
  .seisan-driver-name,
  .seisan-car-summary-name,
  .seisan-car-summary-total,
  .seisan-summary-value,
  .seisan-extra-inline,
  .seisan-extra-inline > span,
  .seisan-extra-inline strong
) {
  color: var(--text-main);
}

[data-theme="dark"] :is(
  .dropdown-item:hover,
  .dropdown-item:focus,
  .dropdown-item.active,
  .person-pop-menu button:hover,
  .person-pop-menu button:focus
) {
  color: var(--text-main);
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-card));
}

[data-theme="dark"] :is(.form-check-input, input[type="checkbox"]) {
  border-color: color-mix(in srgb, var(--text-sub) 58%, transparent);
  background-color: color-mix(in srgb, var(--bg-card) 86%, #020617);
}

[data-theme="dark"] :is(.form-check-input:checked, input[type="checkbox"]:checked) {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
}

[data-theme="dark"] :is(
  .seisan-summary-card.collect,
  .seisan-summary-card.accounting,
  .seisan-summary-card.pay,
  .seisan-cost-policy-tag,
  .seisan-cost-type-badge,
  .seisan-payment-tag
) {
  box-shadow: none;
}

[data-theme="dark"] #seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item--inline-all,
[data-theme="dark"] #seisan-view-area .seisan-car-summary-row .seisan-extra-inline {
  background: transparent;
  border-color: transparent;
}

[data-theme="dark"] #seisan-view-area .seisan-car-summary-row .seisan-extra-slash,
[data-theme="dark"] #seisan-view-area .seisan-car-summary-row .seisan-extra-plus {
  color: color-mix(in srgb, var(--text-sub) 82%, var(--text-main));
}

[data-theme="dark"] #seisan-view-area .seisan-driver-detail .seisan-extra-plus {
  color: color-mix(in srgb, var(--text-sub) 82%, var(--text-main));
}

/* 2026-05 settlement summary formula refinement */
#seisan-view-area .seisan-top-flow {
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}

#seisan-view-area .seisan-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 18px;
  min-height: 28px;
  color: color-mix(in srgb, var(--text-main) 86%, var(--text-sub));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
}

#seisan-view-area .seisan-summary-card {
  background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-body));
  border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

#seisan-view-area .seisan-summary-card.collect {
  background: color-mix(in srgb, var(--settlement-split-bg) 48%, var(--bg-card));
  border-color: color-mix(in srgb, var(--settlement-split-line) 82%, var(--border-color));
}

#seisan-view-area .seisan-summary-card.accounting {
  background: color-mix(in srgb, var(--settlement-club-bg) 50%, var(--bg-card));
  border-color: color-mix(in srgb, var(--settlement-club-line) 82%, var(--border-color));
}

#seisan-view-area .seisan-summary-card.pay {
  background: color-mix(in srgb, var(--settlement-pay-surface-bg) 54%, var(--bg-card));
  border-color: color-mix(in srgb, var(--settlement-pay-surface-line) 82%, var(--border-color));
}

#seisan-view-area .seisan-summary-card .seisan-summary-value {
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: clamp(0.98rem, 4.1vw, 1.16rem);
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1.08;
}

#seisan-view-area .seisan-summary-label {
  gap: 5px;
  color: color-mix(in srgb, var(--text-sub) 84%, var(--text-main));
  font-weight: 760;
  letter-spacing: 0;
}

#seisan-view-area .seisan-summary-sub {
  color: color-mix(in srgb, var(--text-sub) 88%, var(--text-main));
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

#seisan-view-area .seisan-driver-amount,
#seisan-view-area .seisan-car-summary-total,
#seisan-view-area .seisan-car-summary-payment .seisan-car-summary-total {
  color: #111827;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 740;
  letter-spacing: 0;
}

[data-theme="dark"] #seisan-view-area .seisan-summary-card .seisan-summary-value,
[data-theme="dark"] #seisan-view-area .seisan-driver-amount,
[data-theme="dark"] #seisan-view-area .seisan-car-summary-total,
[data-theme="dark"] #seisan-view-area .seisan-car-summary-payment .seisan-car-summary-total {
  color: var(--text-main);
}

[data-theme="dark"] #seisan-view-area .seisan-summary-card {
  box-shadow: none;
}

@media (max-width: 640px) {
  #seisan-view-area .seisan-top-flow {
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
    gap: 4px;
  }

  #seisan-view-area .seisan-flow-arrow {
    min-width: 14px;
    font-size: 0.82rem;
    font-weight: 780;
  }
}

/* Final overview drawer behavior for the bars menu. */
#overviewDrawerScrim.overview-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 2040;
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(2px);
}

#overviewDrawer.overview-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2050;
  display: flex;
  flex-direction: column;
  width: min(90vw, 370px);
  height: 100dvh;
  padding: 18px;
  border-left: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-body));
  color: var(--text-main);
  box-shadow: -26px 0 46px rgba(15, 23, 42, 0.2);
  transform: translateX(104%);
  transition: transform 0.24s ease;
}

#overviewDrawer.overview-drawer.is-open {
  transform: translateX(0);
}

#overviewDrawer .overview-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#overviewDrawer .overview-mini-action,
#overviewDrawer .overview-copy-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-body) 72%, var(--bg-card));
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 760;
}

#overviewDrawer .overview-mini-action {
  padding: 0 10px;
}

#overviewDrawer .overview-copy-action {
  width: 100%;
  padding: 0 12px;
}

#overviewDrawer .overview-mini-action:hover,
#overviewDrawer .overview-copy-action:hover {
  border-color: color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  color: var(--accent-color);
}

#overviewDrawer .overview-timetable-rows {
  display: grid;
  gap: 8px;
}

#overviewDrawer .overview-timetable-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
}

#overviewDrawer .overview-timetable-row input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-body) 74%, var(--bg-card));
  color: var(--text-main);
  font: inherit;
  font-size: 0.92rem;
}

#overviewDrawer .overview-timetable-row input:focus,
#overviewDrawer .overview-textarea:focus {
  border-color: color-mix(in srgb, var(--accent-color) 64%, var(--border-color));
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

#overviewDrawer .overview-row-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--text-sub) 84%, var(--text-main));
}

#overviewDrawer .overview-row-delete:hover {
  color: #b91c1c;
  background: rgba(248, 113, 113, 0.1);
}

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

[data-theme="dark"] #overviewDrawer.overview-drawer {
  background: color-mix(in srgb, var(--bg-card) 90%, #020617);
  box-shadow: -26px 0 46px rgba(0, 0, 0, 0.42);
}

/* Final app header shape: compact top actions and underline tabs. */
#app-layout #app-header {
  display: grid;
  gap: 0;
  padding: 10px 12px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-body));
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

#app-layout #app-header .app-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app-layout #app-header .app-title {
  min-width: 0;
  color: var(--text-main);
  font-size: clamp(1rem, 5vw, 1.22rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
}

#app-layout #app-header .app-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-layout #app-header .header-actions,
#app-layout #app-header .header-actions .header-more {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#app-layout #app-header .header-actions .header-action,
#app-layout #app-header .header-actions .header-more > .header-action {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-card) 94%, var(--bg-body));
  color: color-mix(in srgb, var(--text-main) 82%, var(--text-sub));
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

#app-layout #app-header .header-actions .header-action:hover,
#app-layout #app-header .header-actions .header-more > .header-action:hover {
  border-color: color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  background: color-mix(in srgb, var(--accent-soft) 52%, var(--bg-card));
  color: var(--accent-color);
}

#app-layout #app-header .header-action:not(.share-action) span,
#app-layout #app-header .header-more > .header-action span,
#app-layout #app-header .header-more > .header-action.dropdown-toggle::after {
  display: none;
}

#app-layout #app-header .header-action i,
#app-layout #app-header .header-actions .header-more > .header-action i {
  width: 20px;
  height: 20px;
  margin: 0;
  stroke-width: 2.4;
}

#app-layout #app-header .header-action.share-action,
#app-layout #app-header #shareLinkBtn.header-action {
  width: auto;
  min-width: 68px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--accent-color) 82%, #1d4ed8);
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 24%, transparent);
}

#app-layout #app-header .header-action.share-action span,
#app-layout #app-header #shareLinkBtn.header-action span {
  display: inline;
  color: inherit;
  font-size: 0.86rem;
  font-weight: 800;
}

#app-layout #view-toggle-bar,
#app-layout .view-toggle-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  min-height: 43px;
  margin: 8px -12px 0;
  padding: 0 12px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app-layout #view-toggle-bar .view-tab,
#app-layout .view-toggle-bar .view-tab {
  position: relative;
  min-height: 43px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text-sub) 82%, var(--text-main));
  box-shadow: none;
  font-size: 0.88rem;
  font-weight: 780;
  letter-spacing: 0;
}

#app-layout #view-toggle-bar .view-tab i,
#app-layout .view-toggle-bar .view-tab i {
  display: none;
}

#app-layout #view-toggle-bar .view-tab::after,
#app-layout .view-toggle-bar .view-tab::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 0;
  left: 18%;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: transparent;
}

#app-layout #view-toggle-bar .view-tab.active,
#app-layout .view-toggle-bar .view-tab.active,
[data-theme="dark"] #app-layout #view-toggle-bar .view-tab.active,
[data-theme="dark"] #app-layout .view-toggle-bar .view-tab.active,
[data-theme="dark"] #app-layout #tab-list.view-tab.active,
[data-theme="dark"] #app-layout #tab-sheet.view-tab.active,
[data-theme="dark"] #app-layout #tab-seisan.view-tab.active {
  border: 0;
  background: transparent;
  color: var(--accent-color);
  box-shadow: none;
}

#app-layout #view-toggle-bar .view-tab.active::after,
#app-layout .view-toggle-bar .view-tab.active::after {
  background: var(--accent-color);
}

[data-theme="dark"] #app-layout #app-header {
  border-bottom-color: color-mix(in srgb, var(--border-color) 76%, transparent);
  background: color-mix(in srgb, var(--bg-card) 88%, #020617);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] #app-layout #app-header .header-actions .header-action,
[data-theme="dark"] #app-layout #app-header .header-actions .header-more > .header-action {
  background: color-mix(in srgb, var(--bg-card) 88%, #020617);
  color: var(--text-main);
}

@media (max-width: 640px) {
  #app-layout #app-header {
    padding: 9px 12px 0;
  }

  #app-layout #app-header .app-header-main {
    min-height: 40px;
  }

  #app-layout #app-header .header-actions,
  #app-layout #app-header .header-actions .header-more {
    gap: 7px;
  }

  #app-layout #app-header .header-actions .header-action,
  #app-layout #app-header .header-actions .header-more > .header-action {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  #app-layout #app-header .header-action.share-action,
  #app-layout #app-header #shareLinkBtn.header-action {
    min-width: 64px;
    height: 34px;
    padding: 0 12px;
  }
}

/* Header variant: centered black logo and borderless icon actions. */
#app-layout #app-header .app-header-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0;
}

#app-layout #app-header {
  box-sizing: border-box;
  width: 100%;
}

#app-layout #app-header .app-brand {
  position: absolute;
  left: 50%;
  width: min(44vw, 190px);
  transform: translateX(-50%);
}

#app-layout #app-header #syncStatusBadge {
  display: none;
}

#app-layout #app-header .app-room-field {
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#app-layout #app-header .app-room-input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111827;
  text-align: center;
  font-size: clamp(1.25rem, 5.8vw, 1.7rem);
  font-weight: 860;
  letter-spacing: 0;
}

#app-layout #app-header .app-room-input:focus {
  outline: 0;
  box-shadow: none;
}

#app-layout #app-header .header-actions {
  position: absolute;
  top: 50%;
  right: 0;
  gap: 12px;
  transform: translateY(-50%);
}

#app-layout #app-header .header-actions .header-action,
#app-layout #app-header .header-actions .header-more > .header-action,
#app-layout #app-header #shareLinkBtn.header-action {
  width: 28px;
  min-width: 28px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  box-shadow: none;
}

#app-layout #app-header .header-actions .header-action:hover,
#app-layout #app-header .header-actions .header-more > .header-action:hover,
#app-layout #app-header #shareLinkBtn.header-action:hover {
  border: 0;
  background: transparent;
  color: var(--accent-color);
  box-shadow: none;
}

#app-layout #app-header .header-action span,
#app-layout #app-header #shareLinkBtn.header-action span,
#app-layout #app-header .overview-menu-toggle span {
  display: none;
}

#app-layout #app-header .header-action i,
#app-layout #app-header .header-actions .header-more > .header-action i {
  width: 22px;
  height: 22px;
  font-size: 1.36rem;
  line-height: 1;
  stroke-width: 2.6;
}

#app-layout #app-header #shareLinkBtn.header-action {
  min-width: 28px;
}

[data-theme="dark"] #app-layout #app-header .app-room-input,
[data-theme="dark"] #app-layout #app-header .header-actions .header-action,
[data-theme="dark"] #app-layout #app-header #shareLinkBtn.header-action {
  color: #f8fafc;
}

.overview-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 2040;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
}

.overview-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2050;
  display: flex;
  flex-direction: column;
  width: min(88vw, 360px);
  height: 100dvh;
  padding: 18px;
  border-left: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-body));
  color: var(--text-main);
  box-shadow: -28px 0 50px rgba(15, 23, 42, 0.2);
  transform: translateX(104%);
  transition: transform 0.22s ease;
}

.overview-drawer.is-open {
  transform: translateX(0);
}

.overview-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
}

.overview-drawer-kicker {
  margin: 0 0 4px;
  color: var(--accent-color);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.overview-drawer h2,
.overview-panel h3 {
  margin: 0;
  color: var(--text-main);
  letter-spacing: 0;
}

.overview-drawer h2 {
  font-size: 1.38rem;
  font-weight: 840;
}

.overview-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-main);
}

.overview-drawer-close i {
  font-size: 1.18rem;
}

.overview-drawer-body {
  display: grid;
  gap: 18px;
  overflow-y: auto;
  padding: 18px 0 4px;
}

.overview-panel {
  display: grid;
  gap: 10px;
}

.overview-panel h3 {
  font-size: 0.9rem;
  font-weight: 820;
}

.overview-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-main);
  text-align: left;
  font-size: 0.96rem;
  font-weight: 720;
}

.overview-menu-item i {
  width: 22px;
  color: color-mix(in srgb, var(--text-sub) 80%, var(--text-main));
  text-align: center;
}

.overview-menu-item:hover,
.overview-drawer-close:hover {
  color: var(--accent-color);
}

.overview-menu-item.danger,
.overview-menu-item.danger i {
  color: #b91c1c;
}

.overview-textarea {
  width: 100%;
  resize: vertical;
  min-height: 118px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-body) 70%, var(--bg-card));
  color: var(--text-main);
  font: inherit;
  font-size: 0.94rem;
  line-height: 1.55;
}

.overview-textarea:focus {
  border-color: color-mix(in srgb, var(--accent-color) 64%, var(--border-color));
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

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

[data-theme="dark"] .overview-drawer {
  background: color-mix(in srgb, var(--bg-card) 90%, #020617);
  box-shadow: -28px 0 50px rgba(0, 0, 0, 0.38);
}

[data-theme="dark"] .overview-drawer-scrim {
  background: rgba(2, 6, 23, 0.52);
}

@media (max-width: 640px) {
  #app-layout #app-header .app-header-main {
    min-height: 48px;
  }

  #app-layout #app-header .app-brand {
    width: min(42vw, 170px);
  }

  #app-layout #app-header .header-actions {
    gap: 11px;
  }

  #app-layout #app-header .header-actions .header-action,
  #app-layout #app-header #shareLinkBtn.header-action {
    width: 26px;
    min-width: 26px;
    height: 36px;
  }
}

/* Header correction: left title and visible original-position menu/actions. */
#app-layout #app-header {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

#app-layout #app-header .app-header-main {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  gap: 12px;
}

#app-layout #app-header .app-brand {
  position: static;
  left: auto;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  transform: none;
}

#app-layout #app-header .app-room-input {
  text-align: left;
  font-size: clamp(1.08rem, 4.8vw, 1.36rem);
  font-weight: 800;
}

#app-layout #app-header .header-actions {
  position: static;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  gap: 7px;
  margin-right: max(0px, calc((100vw - 100%) / 2));
  transform: none;
}

@media (max-width: 640px) {
  #app-layout #app-header .header-actions {
    margin-right: 38px;
  }
}

#app-layout #app-header .header-actions .header-action,
#app-layout #app-header .header-actions .header-more > .header-action,
#app-layout #app-header #shareLinkBtn.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 34px;
  color: #111827;
}

#app-layout #app-header #shareLinkBtn.header-action,
#app-layout #app-header #shareLinkBtn.header-action i {
  color: #111827;
}

#app-layout #app-header .header-more > .header-action.dropdown-toggle::after {
  display: none;
}

#app-layout #app-header .overview-dropdown-menu {
  width: min(86vw, 320px);
  padding: 10px;
}

#app-layout #app-header .overview-dropdown-field {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding: 0 4px;
  color: var(--text-main);
  font-size: 0.84rem;
  font-weight: 760;
}

#app-layout #app-header .overview-dropdown-field textarea {
  width: 100%;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-body) 74%, var(--bg-card));
  color: var(--text-main);
  font: inherit;
  font-weight: 500;
  line-height: 1.45;
}

[data-theme="dark"] :is(
  .seisan-alert-action,
  #seisan-view-area .seisan-alert-action
) {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(127, 29, 29, 0.22);
}

[data-theme="dark"] :is(
  .guide-registration-context,
  .guide-registration-context--highlight,
  .guide-registration-ghost,
  .guide-registration-cta,
  .guide-action-box,
  .guide-action-box.primary,
  .guide-copy-mock,
  .guide-mini-form .field,
  .guide-edit-card-mock,
  .guide-edit-field,
  .guide-ui-card,
  .mock-form-import-ui,
  .mock-form-import-textarea,
  .mock-sheet-browser,
  .mock-sheet-browser-canvas,
  .mock-sheet-browser-sheet
) {
  color: var(--text-main);
  border-color: var(--ui-saas-border, var(--border-color));
  background-color: color-mix(in srgb, var(--bg-card) 86%, #020617);
}

[data-theme="dark"] :is(
  .mock-sheet-window-top,
  .mock-sheet-browser-top
) {
  color: var(--text-main);
  border-color: var(--ui-saas-border, var(--border-color));
  background: color-mix(in srgb, var(--bg-card) 74%, #020617);
}

[data-theme="dark"] :is(
  .mock-sheet-selection-table,
  .mock-sheet-selection-table div
) {
  color: #dbeafe;
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(30, 64, 175, 0.18);
}

[data-theme="dark"] .mock-sheet-purple-head {
  color: #fff;
  background: color-mix(in srgb, var(--accent-color) 46%, #1e1b4b);
}

[data-theme="dark"] :is(
  .mock-form-import-title,
  .mock-form-import-help,
  .mock-form-import-entry-tag,
  .mock-form-import-textarea,
  .mock-form-import-textarea div
) {
  color: var(--text-main);
}

[data-theme="dark"] :is(
  .sheet-seat-row.empty,
  .sheet-seat-disabled,
  .seat-slot.empty,
  .seisan-empty,
  .seisan-extra-empty
) {
  color: color-mix(in srgb, var(--text-sub) 80%, transparent);
  border-color: color-mix(in srgb, var(--border-color) 60%, transparent);
  background: color-mix(in srgb, var(--bg-body) 70%, var(--bg-card));
}

[data-theme="dark"] :is(
  .has-error,
  .seisan-car-summary-row.has-error,
  .seisan-car-row.has-error
) {
  border-color: rgba(248, 113, 113, 0.34);
}

[data-theme="dark"] :is(
  .app-room-input,
  .room-input-shell,
  #roomInput
) {
  color: var(--text-main);
  background: transparent;
}

/* Final settlement summary formula polish. Keep after density overrides. */
#seisan-view-area .seisan-top-flow {
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}

#seisan-view-area .seisan-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 18px;
  min-height: 28px;
  color: color-mix(in srgb, var(--text-main) 86%, var(--text-sub));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.94rem;
  font-weight: 780;
  line-height: 1;
  letter-spacing: 0;
  opacity: 1;
}

#seisan-view-area .seisan-summary-card .seisan-summary-value {
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: clamp(0.98rem, 4.1vw, 1.16rem);
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1.08;
}

#seisan-view-area .seisan-driver-amount,
#seisan-view-area .seisan-car-summary-total {
  color: #111827;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 740;
  letter-spacing: 0;
}

[data-theme="dark"] #seisan-view-area .seisan-summary-card .seisan-summary-value,
[data-theme="dark"] #seisan-view-area .seisan-driver-amount,
[data-theme="dark"] #seisan-view-area .seisan-car-summary-total {
  color: var(--text-main);
}

#seisan-view-area .seisan-summary-card.collect {
  background: color-mix(in srgb, var(--settlement-split-bg) 48%, var(--bg-card));
  border-color: color-mix(in srgb, var(--settlement-split-line) 82%, var(--border-color));
}

#seisan-view-area .seisan-summary-card.accounting {
  background: color-mix(in srgb, var(--settlement-club-bg) 50%, var(--bg-card));
  border-color: color-mix(in srgb, var(--settlement-club-line) 82%, var(--border-color));
}

#seisan-view-area .seisan-summary-card.pay {
  background: color-mix(in srgb, var(--settlement-pay-surface-bg) 54%, var(--bg-card));
  border-color: color-mix(in srgb, var(--settlement-pay-surface-line) 82%, var(--border-color));
}

@media (max-width: 640px) {
  #seisan-view-area .seisan-top-flow {
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
    gap: 4px;
  }

  #seisan-view-area .seisan-flow-arrow {
    display: flex;
    min-width: 14px;
    font-size: 0.82rem;
    font-weight: 780;
  }
}


/* 2026-05 cohesive UI tune: keep this as the final visual-system pass. */
body[data-theme="light"] {
  --accent-color: #3f6f96;
  --accent-soft: #e8f0f6;
  --bg-body: #f5f7fa;
  --bg-card: #ffffff;
  --border-color: #e3e8ef;
  --text-main: #111827;
  --text-sub: #687386;
  --hover-bg: #f0f5f8;
  --sheet-header: #f7f9fb;
  --ui-saas-panel: rgba(255, 255, 255, 0.88);
  --ui-saas-panel-raised: rgba(255, 255, 255, 0.96);
  --ui-saas-inner: color-mix(in srgb, #ffffff 90%, #edf4f8);
  --ui-saas-border: rgba(116, 132, 153, 0.22);
  --ui-saas-border-strong: rgba(63, 111, 150, 0.30);
  --ui-saas-shadow: 0 1px 0 rgba(15, 23, 42, 0.035), 0 10px 24px rgba(15, 23, 42, 0.045);
  --ui-saas-shadow-soft: 0 1px 0 rgba(15, 23, 42, 0.026), 0 5px 16px rgba(15, 23, 42, 0.035);
  --ui-unified-divider: color-mix(in srgb, var(--border-color) 72%, transparent);
  --ui-unified-muted-surface: color-mix(in srgb, var(--bg-card) 84%, var(--bg-body));
}

body[data-theme="dark"] {
  --accent-color: #78a6ca;
  --accent-soft: rgba(120, 166, 202, 0.16);
  --bg-body: #090d18;
  --bg-card: #111827;
  --border-color: #273044;
  --text-main: #f8fafc;
  --text-sub: #a2adbf;
  --hover-bg: #172133;
  --sheet-header: #0f172a;
  --ui-saas-panel: rgba(15, 23, 42, 0.80);
  --ui-saas-panel-raised: rgba(17, 24, 39, 0.92);
  --ui-saas-inner: color-mix(in srgb, var(--bg-card) 88%, #12314a);
  --ui-saas-border: rgba(148, 163, 184, 0.18);
  --ui-saas-border-strong: rgba(120, 166, 202, 0.32);
  --ui-saas-shadow: 0 1px 0 rgba(255, 255, 255, 0.026), 0 12px 30px rgba(0, 0, 0, 0.26);
  --ui-saas-shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.020), 0 7px 20px rgba(0, 0, 0, 0.20);
  --ui-unified-divider: rgba(148, 163, 184, 0.16);
  --ui-unified-muted-surface: color-mix(in srgb, var(--bg-card) 78%, #020617);
}

body {
  --control-primary-bg: color-mix(in srgb, var(--accent-color) 92%, #111827);
  --control-primary-hover: color-mix(in srgb, var(--accent-color) 82%, #111827);
  --control-primary-text: #fff;
  --control-secondary-bg: color-mix(in srgb, var(--bg-card) 90%, var(--bg-body));
  --control-secondary-hover: color-mix(in srgb, var(--accent-color) 8%, var(--bg-card));
  --control-border: var(--ui-saas-border);
  --control-border-strong: var(--ui-saas-border-strong);
  font-feature-settings: "palt" 1;
}

#app-header,
#view-toggle-bar,
.edit-header-tools-only,
.seisan-card,
.car-box,
#bottom-tray,
#sheet-title-bar,
#sheet-bottom-controls,
.sheet-empty-card,
.modal-content,
.dropdown-menu,
.person-pop-menu,
.batch-spreadsheet-import,
.theme-preview-panel,
.theme-app-preview,
.theme-preset-card,
.overview-drawer {
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-panel-raised);
  box-shadow: var(--ui-saas-shadow-soft);
}

.driver-seat,
.seat-slot,
.member-card,
.seisan-summary-card,
.seisan-car-summary-row,
.seisan-check-item,
.seisan-driver-pay-row,
.sheet-car-col,
.sheet-wait-block,
.sheet-seat-row,
.sheet-driver-row,
.sheet-wait-item,
.form-control,
.form-select,
.seisan-toggle,
.route-stop-row,
.route-private-view,
.route-private-edit,
.form-sheet-howto,
.form-import-preview,
.seisan-summary-pills span,
.overview-panel,
.overview-textarea,
.overview-mini-action,
.overview-copy-action {
  border-color: var(--ui-saas-border);
  background: var(--ui-saas-inner);
  box-shadow: none;
}

.car-header,
.seisan-head,
.seisan-compact-head,
.modal-header,
.modal-footer,
.sheet-car-header,
.sheet-wait-header,
#bottom-tray-header,
.overview-drawer-head,
.overview-panel-title-row {
  border-color: var(--ui-unified-divider);
}

.btn:not(.btn-close),
.header-action,
.tool-btn,
.seisan-btn,
.tray-action-btn,
#sheet-quick-edit-btn,
#zoom-controls button,
.guide-footer .btn,
.overview-mini-action,
.overview-copy-action,
.overview-drawer-close {
  border-color: var(--control-border);
  font-weight: 720;
  box-shadow: none;
}

.btn-primary,
.btn-accent-solid,
.header-actions .share-action,
#shareLinkBtn.header-action,
#batchOpenBtn.tool-btn,
#routeHelperBtn.seisan-btn,
.seisan-btn.primary,
#shuffleAssignBtn.tray-action-btn,
.tray-inline-row .tray-action-btn--auto,
.guide-footer .btn-primary,
.mock-form-import-button,
.batch-spreadsheet-button {
  background: var(--control-primary-bg);
  border-color: var(--control-primary-bg);
  color: var(--control-primary-text);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color) 16%, transparent);
}

.btn-primary:hover,
.btn-accent-solid:hover,
.header-actions .share-action:hover,
#shareLinkBtn.header-action:hover,
#batchOpenBtn.tool-btn:hover,
#routeHelperBtn.seisan-btn:hover,
.seisan-btn.primary:hover,
#shuffleAssignBtn.tray-action-btn:hover,
.tray-inline-row .tray-action-btn--auto:hover,
.guide-footer .btn-primary:hover,
.mock-form-import-button:hover,
.batch-spreadsheet-button:hover {
  background: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
  color: var(--control-primary-text);
}

.header-action:not(.share-action),
.tool-btn:not(#batchOpenBtn),
.seisan-btn:not(.primary):not(.active),
#fillEmptySeatsBtn.tray-action-btn,
.tray-inline-row .tray-action-btn--fill,
#sheet-quick-edit-btn,
#zoom-controls button,
.btn-outline-secondary,
.btn-secondary:not(.btn-accent-solid),
.overview-mini-action,
.overview-copy-action,
.overview-drawer-close {
  background: var(--control-secondary-bg);
  border-color: var(--control-border);
  color: var(--text-main);
}

.header-action:not(.share-action):hover,
.tool-btn:not(#batchOpenBtn):hover,
.seisan-btn:not(.primary):not(.active):hover,
#fillEmptySeatsBtn.tray-action-btn:hover,
.tray-inline-row .tray-action-btn--fill:hover,
#sheet-quick-edit-btn:hover,
#zoom-controls button:hover,
.btn-outline-secondary:hover,
.btn-secondary:not(.btn-accent-solid):hover,
.overview-mini-action:hover,
.overview-copy-action:hover,
.overview-drawer-close:hover {
  background: var(--control-secondary-hover);
  border-color: var(--control-border-strong);
  color: var(--text-main);
}

#app-layout #app-header .app-room-input {
  color: var(--text-main);
  font-weight: 780;
  letter-spacing: -0.015em;
}

#app-layout #app-header .header-actions {
  gap: 8px;
}

#app-layout #app-header .header-actions .header-action,
#app-layout #app-header .header-actions .header-more > .header-action,
#app-layout #app-header #shareLinkBtn.header-action {
  width: 30px;
  min-width: 30px;
  height: 34px;
  color: var(--text-main);
}

#app-layout #app-header .header-action.share-action,
#app-layout #app-header #shareLinkBtn.header-action {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

#app-layout #app-header .header-action.share-action:hover,
#app-layout #app-header #shareLinkBtn.header-action:hover {
  color: var(--accent-color);
}

#app-layout #view-toggle-bar .view-tab,
#app-layout .view-toggle-bar .view-tab {
  color: var(--text-sub);
  font-weight: 740;
}

#app-layout #view-toggle-bar .view-tab.active,
#app-layout .view-toggle-bar .view-tab.active,
[data-theme="dark"] #app-layout #view-toggle-bar .view-tab.active,
[data-theme="dark"] #app-layout .view-toggle-bar .view-tab.active {
  color: var(--accent-color);
}

#app-layout #view-toggle-bar .view-tab.active::after,
#app-layout .view-toggle-bar .view-tab.active::after {
  background: var(--accent-color);
}

#cars-container .car-box,
#seisan-view-area .seisan-card,
#bottom-tray,
.overview-panel {
  border-radius: var(--radius-lg);
}

#cars-container .driver-seat,
#cars-container .seat-slot,
#cars-container .member-card,
#seisan-view-area .seisan-summary-card,
#seisan-view-area .seisan-car-summary-row,
#seisan-view-area .seisan-check-item,
#seisan-view-area .seisan-driver-pay-row {
  border-radius: var(--radius-main);
}

#cars-container .car-name-label,
#cars-container .driver-name-disp,
#cars-container .member-name-text,
#seisan-view-area .seisan-title,
#seisan-view-area .seisan-car-summary-name,
#seisan-view-area .seisan-check-name,
#seisan-view-area .seisan-driver-name {
  font-weight: 720;
}

#seisan-view-area .seisan-summary-card.collect,
[data-theme="dark"] #seisan-view-area .seisan-summary-card.collect {
  background: color-mix(in srgb, var(--settlement-split-bg) 50%, var(--bg-card));
  border-color: color-mix(in srgb, var(--settlement-split-line) 72%, var(--ui-saas-border));
}

#seisan-view-area .seisan-summary-card.accounting,
[data-theme="dark"] #seisan-view-area .seisan-summary-card.accounting {
  background: color-mix(in srgb, var(--settlement-club-bg) 52%, var(--bg-card));
  border-color: color-mix(in srgb, var(--settlement-club-line) 72%, var(--ui-saas-border));
}

#seisan-view-area .seisan-summary-card.pay,
[data-theme="dark"] #seisan-view-area .seisan-summary-card.pay {
  background: color-mix(in srgb, var(--settlement-pay-surface-bg) 50%, var(--bg-card));
  border-color: color-mix(in srgb, var(--settlement-pay-surface-line) 72%, var(--ui-saas-border));
}

#seisan-view-area .seisan-summary-value,
#seisan-view-area .seisan-car-summary-total,
#seisan-view-area .seisan-driver-amount {
  color: var(--text-main);
  font-weight: 720;
  letter-spacing: -0.01em;
}

#seisan-view-area .seisan-cost-policy-tag,
#seisan-view-area .seisan-cost-type-badge,
#seisan-view-area .seisan-payment-tag,
.grade-badge,
.gender-badge,
.capacity-badge,
.sync-status-badge,
.waiting-inline-count {
  font-weight: 720;
  box-shadow: none;
}

#seisan-view-area .seisan-car-summary-row .seisan-cost-preview-item + .seisan-cost-preview-item {
  border-top-color: var(--ui-unified-divider);
}

@media (max-width: 640px) {
  #app-layout #app-header .header-actions {
    gap: 7px;
    margin-right: 34px;
  }

  #app-layout #app-header .header-actions .header-action,
  #app-layout #app-header .header-actions .header-more > .header-action,
  #app-layout #app-header #shareLinkBtn.header-action {
    width: 28px;
    min-width: 28px;
    height: 34px;
  }

  #seisan-view-area .seisan-card,
  #cars-container .car-box,
  #bottom-tray {
    border-radius: 12px;
  }
}