/* ---- styles/00-theme.css ---- */
/*
 * Tinyroll admin theme
 * White carries the canvas, medium gray carries structure and primary actions,
 * and the orange sampled from the Tinyroll mark is reserved for emphasis.
 */
:root {
  /* Neutral foundation */
  --color-bg-muted: var(--color-bg-surface-muted);
  --color-text-tertiary: var(--color-text-muted);
  --color-success: var(--color-state-success);
  --color-warning-text: var(--color-state-warning);
  --color-danger-text: var(--color-state-danger);
  --border-subtle: var(--color-border-default);
  --surface: var(--color-bg-surface);
  --ink: var(--color-text-primary);

  /* Shared stacking order: overlays always sit above workspace chrome. */
  --z-workspace: 1;
  --z-sticky: 20;
  --z-popover: 80;
  --z-notification: 120;
  --z-modal: 1000;
  --z-toast: 1200;
  --z-debug: 2000;

  /* Tinyroll orange: emphasis and selection, plus a brighter button-only hover. */
  /* Type scale */
  --font-size-caption: 12px;
  --font-size-body: 14px;
  --font-size-body-large: 16px;
  --font-size-heading-sm: 20px;
  --font-size-heading-lg: 24px;
  --font-size-display: 32px;
  --font-size-heading: var(--font-size-heading-lg);
  --radius-small: 8px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.45;
  --line-height-reading: 1.65;

  --control-height-default: 36px;
  --control-height-compact: 32px;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

/* ---- styles/05-color-system.css ---- */
/* Shared semantic color layer for all admin feature modules. */
:root {
  /* Surfaces and structure */
  --admin-surface: var(--color-bg-surface);
  --admin-surface-subtle: var(--color-bg-subtle);
  --admin-border: var(--color-border-default);
  --admin-border-strong: var(--color-border-strong);

  /* Text */
  --admin-text: var(--color-text-primary);
  --admin-text-secondary: var(--color-text-secondary);
  --admin-text-muted: var(--color-text-muted);

  /* Brand and actions */
  --admin-accent: var(--color-accent);
  --admin-accent-soft: var(--color-accent-soft);

  /* Business states */
  --admin-success: var(--color-state-success);
  --admin-warning: var(--color-state-warning);
  --admin-danger: var(--color-state-danger);

  /* Compatibility aliases for older feature modules. */
  --color-warning-text: var(--admin-warning);
  --color-success: var(--admin-success);
}

/* ---- styles/10-sales-planning.css ---- */
/* Sales-planning workspace and its compact presentation. */
.sales-plan-page {
  max-width: 1720px;
  margin: 0 auto;
  font-size: var(--font-size-body);
}

.sales-plan-page .text-input,
.sales-plan-page .select-input,
.sales-plan-page .primary-button,
.sales-plan-page .ghost-button {
  min-height: var(--control-height-compact);
  height: var(--control-height-compact);
  font-size: var(--font-size-body);
}

.sales-plan-page .cycle-planner-toolbar,
.sales-plan-page .cycle-history-toolbar {
  margin-top: 0;
}

.sales-plan-page .cycle-planner-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: var(--color-bg-surface);
  box-shadow: none;
}

.sales-plan-cycle-stack {
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-surface);
  box-shadow: 0 10px 28px var(--color-shadow);
}

.sales-plan-page .cycle-planning-tabs {
  width: 100%;
  gap: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--color-border-default);
  border-radius: 0;
  background: var(--color-bg-surface);
}

.sales-plan-page .cycle-planning-tabs.has-history-preview {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.sales-plan-page .cycle-planning-tab {
  position: relative;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 62px;
  padding: 10px 16px;
  gap: 10px;
  border: 0;
  border-right: 1px solid var(--color-border-default);
  border-radius: 0;
  background: var(--color-bg-surface);
}

.sales-plan-page .cycle-planning-tab:last-child {
  border-right: 0;
}

.sales-plan-page .cycle-planning-tab:hover:not(.is-active) {
  background: var(--color-bg-subtle);
}

.sales-plan-page .cycle-planning-tab.is-active {
  border-color: var(--color-border-default);
  background: var(--color-accent-soft);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

.sales-plan-page .cycle-planning-tab.is-active::after {
  position: absolute;
  z-index: var(--z-sticky);
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid var(--color-accent);
  content: "";
  transform: translateX(-50%);
}

.sales-plan-page .cycle-planning-tabs.has-history-preview .cycle-planning-tab.is-active::after {
  display: none;
}

.sales-plan-page .cycle-planning-tab.is-history-preview {
  background: var(--color-bg-surface-muted);
}

.sales-plan-page .cycle-planning-tab.is-closed {
  background: var(--color-state-warning-soft);
  color: var(--color-text-secondary);
  box-shadow: inset 0 -3px 0 var(--color-state-warning);
}

.sales-plan-page .cycle-planning-tab.is-closed strong {
  color: var(--color-state-warning);
}

.sales-plan-page .cycle-planning-tab.is-closed small {
  color: var(--color-state-warning);
  font-weight: var(--font-weight-bold);
}

.sales-plan-page .cycle-planning-tab.is-closed::before {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 1px 5px;
  border: 1px solid var(--color-state-warning);
  border-radius: 999px;
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
  content: "只读";
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

.sales-plan-page .cycle-planning-tab strong,
.sales-plan-page .cycle-planning-tab span,
.sales-plan-page .cycle-planning-tab small {
  margin: 0;
  font-size: var(--font-size-body);
}

.sales-plan-page .cycle-planning-tab strong {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.sales-plan-page .cycle-planning-tab small {
  justify-self: end;
  color: var(--color-text-muted);
}

.sales-plan-page .history-month-field {
  width: 180px;
  min-width: 0;
}

.cycle-impact-note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.business-action-box,
.business-action-feedback,
.business-action-buttons,
.business-unsaved-hint {
  display: flex;
  align-items: center;
}

.business-action-box {
  justify-content: space-between;
  min-width: 0;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 0;
  background: var(--color-bg-subtle);
  flex-wrap: wrap;
  gap: 8px 16px;
}

.business-action-feedback {
  justify-content: flex-start;
  flex: 1 1 260px;
  min-height: 16px;
  gap: 10px;
}

.business-action-buttons {
  justify-content: flex-end;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.business-action-divider {
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: var(--color-border-default);
}

.business-save-state-button {
  min-width: 112px;
  border-color: var(--color-border-strong);
  background: var(--color-bg-surface-strong);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
  opacity: 1;
  transition: min-width 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.business-save-state-button:disabled {
  border-color: var(--color-border-default);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  cursor: default;
  opacity: 1;
}

.business-save-state-button.has-unsaved-changes {
  --button-hover-border: var(--color-button-accent-hover);
  --button-hover-background: var(--color-button-accent-hover);
  min-width: 210px;
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-action-on-primary);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.business-save-state-button.has-unsaved-changes:hover,
.business-save-state-button.has-unsaved-changes:focus-visible {
  border-color: var(--button-hover-border);
  background: var(--button-hover-background);
}

.business-unsaved-hint {
  gap: 6px;
  color: var(--color-accent-strong);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.business-unsaved-hint > span {
  color: var(--color-accent);
  font-size: var(--font-size-caption);
}

.business-action-box.has-unsaved-changes {
  background: var(--color-bg-subtle);
}

.history-cycle-modal-panel {
  width: min(920px, 100%);
  padding: 22px;
}

.history-cycle-modal-panel .cycle-history-toolbar {
  margin-top: 18px;
}

.history-cycle-modal-panel .history-cycle-list {
  width: 100%;
}

.sales-plan-page .quiet-action-button {
  border-color: var(--color-border-default);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.sales-plan-page .quiet-action-button:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.sales-plan-page .sales-plan-products {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.sales-plan-page .sales-plan-products-head {
  display: block;
}

.product-day-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(72px, 1fr));
  flex: 1;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-bg-surface);
}

.product-day-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  min-height: 58px;
  padding: 8px 12px;
  border: 0;
  border-right: 1px solid var(--color-border-default);
  border-radius: 0;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
}

.product-day-tab:last-child {
  border-right: 0;
}

.product-day-tab strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.product-day-tab span,
.product-day-tab small {
  font-size: var(--font-size-caption);
}

.product-day-tab span {
  justify-self: end;
}

.product-day-tab small {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: var(--color-text-muted);
}

.product-day-tab.is-active {
  background: var(--color-accent-soft);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.product-day-tab:hover:not(.is-active) {
  background: var(--color-bg-subtle);
}

.product-day-tab.is-closed:not(.is-active) {
  opacity: 0.62;
}

.sales-plan-page .product-cycle-warning,
.sales-plan-page .product-cycle-readonly {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: var(--font-size-caption);
}

.sales-plan-page #saleCreatePanel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 46px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
}

.sales-plan-page .product-create-grid {
  grid-template-columns: minmax(200px, 1.8fr) minmax(88px, 0.68fr) minmax(104px, 0.76fr) minmax(82px, 0.58fr) minmax(94px, 0.66fr) minmax(88px, 0.62fr) 104px;
  gap: 8px;
}

.sales-plan-page .product-create-grid .sale-product-field,
.sales-plan-page .product-create-grid .compact-field:not(.sale-product-field),
.sales-plan-page .product-create-grid > button {
  grid-column: auto;
}

.sales-plan-page .compact-field {
  padding: 9px;
}

.sales-plan-page .field span {
  margin-bottom: 5px;
  font-size: var(--font-size-caption);
}

.sales-plan-page .sale-items-panel {
  margin-top: 10px;
  border-radius: 6px;
  background: var(--color-bg-surface);
}

.sales-plan-page .sale-item-grid {
  grid-template-columns: minmax(190px, 1.6fr) minmax(78px, 0.55fr) minmax(96px, 0.66fr) minmax(112px, 0.8fr) minmax(112px, 0.8fr) minmax(88px, 0.62fr) minmax(118px, 0.78fr);
  gap: 8px;
}

.sales-plan-page .sale-items-head {
  display: grid;
  padding: 9px 14px;
  background: var(--color-bg-subtle);
}

.sales-plan-page .sale-item-row {
  padding: 10px 14px;
}

.sales-plan-page .sale-item-field > span {
  display: none;
}

.sales-plan-page .sale-item-actions {
  grid-column: auto;
}

.sales-plan-page .sale-item-catalog-price {
  min-height: var(--control-height-compact);
  border-radius: 6px;
  font-size: var(--font-size-body);
}

.sales-plan-page .sale-item-field .muted {
  font-size: var(--font-size-caption);
}

.cycle-days-modal-panel {
  width: min(760px, 100%);
  padding: 22px;
}

.cycle-days-modal-panel h2,
.cycle-schedule-modal-panel h2 {
  font-size: var(--font-size-heading-sm);
}

.cycle-days-modal-panel .weekday-grid {
  margin-top: 18px;
}

.cycle-days-modal-panel .modal-actions {
  margin-top: 20px;
}

.cycle-closure-notice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.cycle-closure-notice-row > div {
  min-width: 0;
}

.cycle-closure-notice-row strong,
.cycle-closure-notice-row small {
  display: block;
}

.cycle-closure-notice-row small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cycle-closure-notice-panel {
  width: min(620px, 100%);
  padding: 24px;
}

.cycle-closure-notice-panel .field {
  margin-top: 18px;
}

.cycle-closure-notice-panel .textarea-input {
  min-height: 132px;
  resize: vertical;
}

@media (max-width: 1180px) {
  .business-action-buttons {
    gap: 6px;
  }

  .sales-plan-page .product-create-grid {
    grid-template-columns: minmax(190px, 1.6fr) repeat(5, minmax(78px, 1fr)) 104px;
  }

  .sales-plan-page .sale-item-grid {
    grid-template-columns: minmax(180px, 1.45fr) repeat(5, minmax(78px, 1fr)) minmax(110px, 0.82fr);
  }
}

/* ---- styles/20-foundation.css ---- */
/* Reset, application shell, entry screens, navigation, controls, and panels. */
* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep keyboard navigation visible and consistent across feature modules. */
:where(button, input, select, textarea, a, summary):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .login-panel {
    width: min(460px, calc(100% - 32px));
    padding: 28px 24px;
  }

  .entry-panel {
    width: min(100%, calc(100% - 24px));
    padding-inline: 0;
  }
}

button,
input,
select {
  font: inherit;
}

.shell {
  width: 100%;
  min-height: 100vh;
}

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

.login-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  margin: 0;
  padding: 40px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
  transform: translate(-50%, -50%);
}

.entry-panel {
  width: min(1080px, calc(100% - 64px));
  min-height: calc(100vh - 60px);
  margin: 0 auto;
  padding: clamp(44px, 7vh, 76px) 24px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.workspace-entry-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
}

.workspace-entry-grid.is-single-entry {
  grid-template-columns: minmax(560px, 680px);
  justify-content: center;
}

.workspace-entry-grid.is-single-entry .workspace-entry-card {
  grid-column: 1;
}

.workspace-entry-card {
  position: relative;
  display: flex;
  min-height: 172px;
  padding: 24px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-shadow) 72%, transparent);
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.workspace-entry-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: transparent;
  content: "";
  transition: background-color 180ms ease;
}

.workspace-entry-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 10px 26px var(--color-shadow);
  transform: translateY(-2px);
}

.workspace-entry-card:hover::before {
  background: var(--color-accent);
}

.workspace-entry-card.is-permission-locked {
  border-color: var(--color-border-default);
  background: var(--color-bg-surface-muted);
  box-shadow: none;
}

.workspace-entry-card.is-permission-locked:hover {
  border-color: var(--color-border-default);
  box-shadow: none;
  transform: none;
}

.workspace-entry-card.is-permission-locked:hover::before {
  background: transparent;
}

.workspace-entry-card .primary-button.is-permission-locked,
.workspace-entry-card .primary-button.is-permission-locked:hover,
.workspace-entry-card .primary-button.is-permission-locked:focus-visible {
  border-color: var(--color-border-strong);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.workspace-entry-card h2 {
  width: 100%;
  margin: 0;
  font-size: var(--font-size-heading-md);
  line-height: var(--line-height-tight);
}

.workspace-entry-card p {
  margin: 12px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.store-entry-card {
  display: grid;
  min-height: 176px;
  padding: 30px 34px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(300px, 1fr) minmax(250px, 0.72fr) minmax(220px, auto);
  align-items: center;
  column-gap: 40px;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  cursor: pointer;
}

.store-entry-card::before {
  background: var(--color-accent);
}

.store-entry-card:hover {
  border-color: var(--color-bg-inverse);
}

.store-entry-heading {
  min-width: 0;
}

.store-entry-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--color-accent) 76%, var(--color-text-inverse));
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
}

.store-entry-card h2 {
  width: auto;
  overflow: hidden;
  font-size: clamp(24px, 2.1vw, 32px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-entry-card .store-entry-meta {
  margin-top: 10px;
  color: color-mix(in srgb, var(--color-text-inverse) 62%, transparent);
  font-size: var(--font-size-caption);
}

.store-entry-content {
  display: flex;
  width: 100%;
  margin: 0;
  flex-direction: column;
  gap: 10px;
}

.store-entry-card .select-input {
  height: 56px;
  border-color: color-mix(in srgb, var(--color-text-inverse) 32%, transparent);
  background-color: var(--color-bg-surface);
  cursor: pointer;
}

.store-entry-switch-label {
  color: color-mix(in srgb, var(--color-text-inverse) 58%, transparent);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.store-entry-card .config-status {
  margin-top: 0;
}

.workspace-entry-actions {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}

.workspace-entry-actions .primary-button {
  min-width: 144px;
}

.store-entry-card .workspace-entry-actions {
  width: auto;
  margin-top: 0;
  padding-top: 30px;
  justify-content: flex-end;
}

.store-entry-card .primary-button {
  --button-background: var(--color-accent);
  --button-hover-border: var(--color-button-accent-hover);
  --button-hover-background: var(--color-button-accent-hover);
  display: inline-flex;
  min-width: 220px;
  height: 56px;
  padding: 0 22px;
  border-color: var(--button-background);
  background: var(--button-background);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: var(--font-size-body);
}

.store-entry-primary-button::after {
  content: "→";
  font-size: var(--font-size-heading-md);
  line-height: var(--line-height-tight);
  transition: transform 180ms ease;
}

.store-entry-card:hover .store-entry-primary-button::after,
.store-entry-primary-button:focus-visible::after {
  transform: translateX(4px);
}

.store-entry-card .primary-button:hover,
.store-entry-card .primary-button:focus-visible {
  border-color: var(--button-hover-border);
  background: var(--button-hover-background);
}

.catalog-entry-card,
.management-entry-card,
.analytics-entry-card {
  grid-column: span 4;
}

.catalog-entry-card .workspace-entry-actions,
.management-entry-card .workspace-entry-actions,
.analytics-entry-card .workspace-entry-actions {
  padding-top: 28px;
}

.system-status-entry-card,
.developer-entry-card,
.audit-log-entry-card {
  display: grid;
  min-height: 116px;
  padding: 22px 24px;
  grid-column: span 4;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: 24px;
  background: var(--color-bg-surface-muted);
  box-shadow: none;
}

.system-status-entry-card h2,
.developer-entry-card h2,
.audit-log-entry-card h2 {
  grid-column: 1;
}

.system-status-entry-card p,
.developer-entry-card p,
.audit-log-entry-card p {
  grid-column: 1;
  margin-top: 6px;
}

.system-status-entry-card .workspace-entry-actions,
.developer-entry-card .workspace-entry-actions,
.audit-log-entry-card .workspace-entry-actions {
  width: auto;
  margin: 0;
  padding: 0;
  grid-column: 2;
  grid-row: 1 / 3;
}

.system-status-entry-card .primary-button,
.developer-entry-card .primary-button,
.audit-log-entry-card .primary-button {
  min-width: 136px;
  border-color: var(--color-border-strong);
  background: transparent;
  color: var(--color-text-primary);
}

.system-status-entry-card .primary-button:hover,
.system-status-entry-card .primary-button:focus-visible,
.developer-entry-card .primary-button:hover,
.developer-entry-card .primary-button:focus-visible,
.audit-log-entry-card .primary-button:hover,
.audit-log-entry-card .primary-button:focus-visible {
  border-color: var(--color-text-primary);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* Lobby information architecture: visible category labels with direct, uncollapsed entries. */
.entry-panel {
  width: min(1280px, calc(100% - 48px));
  min-height: auto;
  padding: 18px 16px 24px;
}

.workspace-section-list {
  --lobby-entry-card-width: 220px;
  display: flex;
  width: 100%;
  flex-direction: column;
}

.workspace-section {
  position: relative;
  min-width: 0;
  padding: 20px 0;
}

.workspace-section:first-child {
  padding-top: 0;
}

.workspace-section + .workspace-section {
  border-top: 1px dashed var(--color-border-strong);
}

.workspace-section-title {
  margin: 0 0 12px;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: 0.04em;
}

.workspace-section .workspace-entry-grid {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
}

.workspace-section .workspace-entry-card:not(.store-entry-card) {
  display: flex;
  width: var(--lobby-entry-card-width);
  min-height: 60px;
  padding: 12px 40px 12px 16px;
  flex: 0 0 var(--lobby-entry-card-width);
  grid-template-columns: none;
  grid-template-rows: none;
  justify-content: center;
  flex-direction: column;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-shadow) 56%, transparent);
  appearance: none;
  cursor: pointer;
}

.workspace-entry-card h3,
.workspace-entry-title {
  display: block;
  width: 100%;
  margin: 0;
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.workspace-entry-card:not(.store-entry-card):focus-visible {
  border-color: var(--color-accent);
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.workspace-entry-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-tight);
  transform: translateY(-50%);
  transition: color 180ms ease, transform 180ms ease;
}

.workspace-entry-card:not(.store-entry-card):hover .workspace-entry-arrow,
.workspace-entry-card:not(.store-entry-card):focus-visible .workspace-entry-arrow {
  color: var(--color-accent);
  transform: translate(3px, -50%);
}

.workspace-entry-card.is-permission-locked {
  cursor: not-allowed;
}

.workspace-entry-card.is-permission-locked .workspace-entry-arrow {
  color: var(--color-text-secondary);
  transform: translateY(-50%);
}

.workspace-entry-grid-commerce .store-entry-card {
  width: 100%;
  min-height: 88px;
  padding: 16px 20px;
  flex: 0 0 100%;
  grid-column: 1 / -1;
  grid-template-columns: 150px minmax(280px, 1fr) 200px;
  grid-template-rows: 1fr;
  column-gap: 16px;
}

.workspace-entry-grid-commerce .store-entry-heading {
  grid-row: 1;
}

.workspace-entry-grid-commerce .store-entry-content {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  gap: 8px;
}

.workspace-entry-grid-commerce .store-entry-card .workspace-entry-actions {
  width: auto;
  margin: 0;
  padding: 0;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
}

.workspace-entry-grid-commerce .store-entry-card .primary-button {
  width: 200px;
  min-width: 0;
  height: 38px;
  padding: 0 16px;
  font-size: var(--font-size-caption);
}

.workspace-entry-grid-commerce .catalog-entry-card {
  min-height: 60px;
}

.workspace-entry-grid-commerce .store-entry-card h3 {
  overflow: hidden;
  font-size: var(--font-size-heading-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-toggle-list {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.store-toggle-button {
  max-width: 220px;
  min-height: 36px;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-text-inverse) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text-inverse) 7%, transparent);
  color: color-mix(in srgb, var(--color-text-inverse) 78%, transparent);
  font: inherit;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.store-toggle-button:hover,
.store-toggle-button:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 72%, white);
  color: var(--color-text-inverse);
}

.store-toggle-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 32%, transparent);
  outline-offset: 2px;
}

.store-toggle-button:active {
  transform: scale(0.97);
}

.store-toggle-button.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.brand-name {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}

.brand-logo {
  display: block;
  width: 206px;
  height: auto;
}

.login-logo {
  width: 220px;
  margin: 0 auto;
}

.config-status {
  margin-top: 24px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.login-form {
  margin-top: 32px;
}

.field-label,
.field span {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.field-label-spaced {
  margin-top: 18px;
}

.login-submit-button {
  width: 100%;
  margin-top: 24px;
}

.text-input,
.select-input {
  width: 100%;
  height: var(--control-height-default);
  padding: 0 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-primary);
  outline: none;
}

.textarea-input {
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-primary);
  font: inherit;
  line-height: var(--line-height-normal);
  outline: none;
  resize: vertical;
}

.text-input:focus,
.select-input:focus,
.textarea-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.primary-button,
.ghost-button {
  height: var(--control-height-default);
  padding: 0 14px;
  border-radius: 6px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.primary-button {
  --button-background: var(--color-action-primary);
  --button-hover-border: var(--color-button-primary-hover);
  --button-hover-background: var(--color-button-primary-hover);
  border: 1px solid var(--button-background);
  background: var(--button-background);
  color: var(--color-action-on-primary);
}

.ghost-button {
  --button-hover-border: var(--color-action-primary);
  --button-hover-background: var(--color-bg-surface-muted);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-surface-strong);
  color: var(--color-text-primary);
}

.primary-button:hover:not(:disabled) {
  border-color: var(--button-hover-border);
  background: var(--button-hover-background);
}

.ghost-button:hover:not(:disabled) {
  border-color: var(--button-hover-border);
  background: var(--button-hover-background);
}

.primary-button:disabled,
.ghost-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.admin-view {
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-surface-strong);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-logo-button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.topbar-logo-button img {
  display: block;
  width: 154px;
  height: auto;
}

.topbar-logo-button:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 4px;
}

.topbar-store-field {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.topbar-store-field .select-input {
  width: 200px;
}

.topbar-store-info-button {
  height: var(--control-height-default);
  padding: 0 10px;
  border-color: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.topbar-store-info-button:hover:not(:disabled) {
  border-color: var(--color-border-default);
}

.title {
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-semibold);
}

.subtitle {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  overflow: visible;
  padding: 6px 24px 0;
  background: var(--color-bg-surface-strong);
  border-bottom: 1px solid var(--color-border-default);
}

.tab {
  flex: 0 0 auto;
  min-width: 88px;
  height: 36px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.tab.is-active {
  border-bottom-color: var(--color-accent);
  color: var(--color-text-primary);
}

.tab-utility {
  margin-left: auto;
}

.tab-utility + .tabs-attention-hub {
  margin-left: 2px;
}

.tab-panel {
  padding: 22px 24px 32px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-head h1 {
  margin: 0;
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}

.section-head p {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

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

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

.compact-select {
  width: 128px;
}

.cycle-select {
  width: 230px;
}

.panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-surface);
}

.panel-title {
  margin-bottom: 12px;
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-semibold);
}

/* ---- styles/21-workspace-shell.css ---- */
/* Shared visual shell for all first-level admin workspaces. */
.workspace-page {
  max-width: 1720px;
  margin: 0 auto;
  padding-top: 0;
}

.workspace-page:not(.sales-plan-page) > .section-head:first-child,
.orders-page > .section-head:first-child,
.sales-plan-workspace-hero {
  min-height: 64px;
  margin: 0 -24px 10px;
  padding: 10px 24px;
  border-bottom: 3px solid var(--color-accent);
  background: var(--color-bg-inverse);
}

.workspace-page:not(.sales-plan-page) > .section-head:first-child,
.orders-page > .section-head:first-child {
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 10px;
}

.workspace-page:not(.sales-plan-page) > .section-head:first-child > div:first-child:has(> h1),
.orders-page > .section-head:first-child > div:first-child:has(> h1) {
  display: block;
}

.workspace-page:not(.sales-plan-page) > .section-head:first-child h1,
.orders-page > .section-head:first-child h1,
.sales-plan-workspace-hero h1 {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: var(--font-size-heading-sm);
  letter-spacing: -0.01em;
}

.workspace-page:not(.sales-plan-page) > .section-head:first-child p,
.orders-page > .section-head:first-child p,
.sales-plan-workspace-hero p {
  display: none;
}

.workspace-page:not(.sales-plan-page) > .section-head:first-child > .section-actions,
.orders-page > .section-head:first-child > .section-actions {
  display: flex;
  min-height: var(--control-height-compact);
  margin-left: auto;
  padding: 0;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.workspace-page:not(.sales-plan-page) > .table-wrap,
.workspace-page:not(.sales-plan-page) > .panel {
  border-color: transparent;
  border-radius: 8px;
  background: var(--color-bg-surface);
  box-shadow: 0 10px 28px var(--color-shadow);
}

.workspace-page:not(.sales-plan-page) > .panel:has(.orders-table) {
  overflow-x: auto;
}

.workspace-page:not(.sales-plan-page) > .table-wrap .orders-table th,
.workspace-page:not(.sales-plan-page) > .panel .orders-table th {
  border-bottom-color: var(--color-border-strong);
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.workspace-page:not(.sales-plan-page) > .table-wrap .orders-table tbody tr,
.workspace-page:not(.sales-plan-page) > .panel .orders-table tbody tr {
  transition: background 140ms ease;
}

.workspace-page:not(.sales-plan-page) > .table-wrap .orders-table tbody tr:hover,
.workspace-page:not(.sales-plan-page) > .panel .orders-table tbody tr:hover {
  background: var(--color-bg-subtle);
}

.workspace-page:not(.sales-plan-page) > .form-grid {
  margin-top: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--color-bg-surface);
  box-shadow: 0 10px 28px var(--color-shadow);
}

.sales-plan-workspace-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.workspace-title-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.sales-plan-workspace-hero h1 {
  display: block;
}

.workspace-title-action {
  height: var(--control-height-compact);
  padding: 0 11px;
  border: 1px solid var(--color-border-inverse);
  border-radius: 6px;
  background: var(--color-bg-inverse-soft);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-caption);
  cursor: pointer;
}

.workspace-title-action:hover,
.workspace-title-action:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.workspace-page:not(.sales-plan-page) > .section-head:first-child > .workspace-refresh-actions {
  min-height: var(--control-height-compact);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.orders-page > .section-head:first-child > .workspace-refresh-actions {
  min-height: var(--control-height-compact);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace-refresh-button {
  height: var(--control-height-compact);
  padding: 0 11px;
  border: 1px solid var(--color-border-inverse);
  border-radius: 6px;
  background: var(--color-bg-inverse-soft);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.workspace-refresh-button:hover:not(:disabled),
.workspace-refresh-button:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.workspace-refresh-button:disabled {
  cursor: wait;
  opacity: 0.48;
}

.workspace-refresh-actions .compact-select {
  height: var(--control-height-compact);
  border-color: var(--color-border-inverse);
  background-color: var(--color-bg-inverse-soft);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-caption);
}

@media (max-width: 1120px) {
  .workspace-page:not(.sales-plan-page) > .section-head:first-child,
  .orders-page > .section-head:first-child {
    align-items: center;
    flex-direction: row;
  }
}

/* ---- styles/22-lobby-intro.css ---- */
/* Authenticated lobby loading state and staged workspace reveal. */
.lobby-connection {
  position: fixed;
  z-index: var(--z-modal);
  inset: 60px 0 0;
  display: grid;
  place-items: center;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  opacity: 1;
  transition: opacity 280ms ease;
}

.lobby-connection-stage,
.lobby-connection-welcome {
  position: absolute;
  width: min(520px, calc(100% - 64px));
  text-align: center;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lobby-connection-stage {
  opacity: 1;
  transform: translateY(0);
}

.lobby-connection-stage h1,
.lobby-connection-welcome h1 {
  margin: 0;
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

.lobby-connection-stage p,
.lobby-connection-welcome p {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.lobby-connection-progress {
  display: grid;
  width: 100%;
  margin-top: 28px;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 5px;
}

.lobby-connection-progress > span {
  position: relative;
  height: 9px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 2px;
  background: var(--color-bg-surface);
  transition: border-color 120ms ease;
}

.lobby-connection-progress > span::after {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--color-accent);
  content: "";
  transform: scaleX(var(--lobby-cell-fill, 0));
  transform-origin: left center;
  will-change: transform;
}

.lobby-connection-progress > span.is-complete {
  border-color: var(--color-accent);
}

.lobby-connection-progress > span.is-current {
  border-color: color-mix(in srgb, var(--color-accent) 64%, var(--color-border-default));
}

.lobby-connection-retry {
  height: var(--control-height-default);
  margin-top: 28px;
  padding: 0 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.lobby-connection-retry:hover,
.lobby-connection-retry:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}

.lobby-connection.has-error .lobby-connection-progress > span::after {
  background: var(--color-state-danger);
}

.lobby-connection.has-error .lobby-connection-progress > span.is-complete {
  border-color: var(--color-state-danger);
}

.lobby-connection-welcome {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.lobby-connection.is-success .lobby-connection-stage {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.lobby-connection.is-success .lobby-connection-welcome {
  opacity: 1;
  transform: translateY(0);
}

.lobby-connection.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.entry-panel.is-intro-pending {
  pointer-events: none;
}

.entry-panel.is-intro-pending .workspace-entry-card {
  opacity: 0;
  transform: translateY(20px) scale(0.985);
}

.entry-panel.is-intro-revealing .workspace-entry-card {
  animation: lobby-entry-card-reveal 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.entry-panel.is-intro-revealing .workspace-entry-card:nth-child(2) { animation-delay: 80ms; }
.entry-panel.is-intro-revealing .workspace-entry-card:nth-child(3) { animation-delay: 160ms; }
.entry-panel.is-intro-revealing .workspace-entry-card:nth-child(4) { animation-delay: 240ms; }
.entry-panel.is-intro-revealing .workspace-entry-card:nth-child(5) { animation-delay: 320ms; }
.entry-panel.is-intro-revealing .workspace-entry-card:nth-child(6) { animation-delay: 400ms; }
.entry-panel.is-intro-revealing .workspace-entry-card:nth-child(7) { animation-delay: 480ms; }

@keyframes lobby-entry-card-reveal {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-connection,
  .lobby-connection-stage,
  .lobby-connection-welcome,
  .lobby-connection-progress > span {
    transition-duration: 1ms;
  }

  .entry-panel.is-intro-revealing .workspace-entry-card {
    animation: none;
  }
}

/* ---- styles/30-cycle-planning.css ---- */
/* Sales-cycle planning, schedule editor, and weekday controls. */
.cycle-planner-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.cycle-planning-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
  width: min(760px, 100%);
}

.cycle-planning-tab {
  display: grid;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
}

.cycle-planning-tab span,
.cycle-planning-tab strong,
.cycle-planning-tab small {
  display: block;
}

.cycle-planning-tab strong {
  margin-top: 5px;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}

.cycle-planning-tab small {
  margin-top: 6px;
  color: var(--color-text-muted);
}

.cycle-planning-tab.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.history-month-field {
  display: grid;
  gap: 7px;
  min-width: 170px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.history-month-browser {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.history-month-browser .muted {
  align-self: center;
}

.history-cycle-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 10px;
  width: min(920px, 100%);
}

.history-cycle-list .cycle-planning-tab {
  min-height: 58px;
}

.history-cycle-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--color-border-default);
  border-radius: 8px;
  color: var(--color-text-muted);
}

.cycle-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.cycle-plan-head .panel-title {
  margin-bottom: 6px;
}

.cycle-plan-settings {
  display: grid;
  grid-template-columns: minmax(180px, 0.36fr) minmax(520px, 1fr);
  gap: 14px;
  margin-top: 20px;
}

@media (max-width: 980px) {
  .cycle-plan-settings {
    grid-template-columns: 1fr;
  }
}

.cycle-status-card {
  padding: 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.cycle-status-card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
}

.cycle-status-card p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.cycle-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-bg-surface-muted);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.cycle-status-badge[data-status="open"] {
  border-color: var(--color-state-success);
  background: var(--color-state-success-soft);
}

.cycle-status-badge[data-status="closed"],
.cycle-status-badge[data-status="archived"] {
  color: var(--color-text-muted);
}

.cycle-schedule-modal-panel {
  width: min(900px, 100%);
  padding: 24px;
}

.schedule-current-preview {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.schedule-current-preview span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.schedule-current-preview strong {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.schedule-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.schedule-endpoint-card {
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.schedule-endpoint-title {
  margin-bottom: 12px;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.schedule-endpoint-card > .field {
  margin-bottom: 10px;
}

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

.schedule-range-arrow {
  color: var(--color-text-muted);
  font-size: var(--font-size-heading-lg);
  text-align: center;
}

.schedule-rule-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--color-accent-primary);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-reading);
}

.cycle-schedule-modal-actions {
  align-items: center;
}

.modal-action-spacer {
  flex: 1;
}

.cycle-day-title {
  margin-top: 24px;
  margin-bottom: 12px;
}

.weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.weekday-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 72px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  user-select: none;
}

.weekday-item small {
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.weekday-item.is-readonly {
  cursor: default;
  opacity: 0.78;
}

.weekday-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.weekday-item.is-enabled {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
}

@media (max-width: 980px) {
  .cycle-planner-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .cycle-planning-tabs {
    width: 100%;
  }

  .history-month-field,
  .history-month-browser {
    width: 100%;
  }
}

/* ---- styles/40-components.css ---- */
/* Shared forms, feedback, toast, table, and modal primitives. */
.admin-panel {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
}

.text-muted {
  color: var(--admin-text-muted);
  font-size: var(--font-size-caption);
}

.text-secondary {
  color: var(--admin-text-secondary);
}

/* Shared disabled feedback for compact actions across every table and panel. */
.small-button:disabled {
  border-color: var(--admin-border);
  color: var(--admin-text-muted);
  cursor: not-allowed;
  opacity: 0.66;
}

.small-button,
.compact-button {
  height: var(--control-height-default);
  min-width: 66px;
  padding: 0 10px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 6px;
  background: var(--admin-surface);
  color: var(--admin-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.compact-button:hover:not(:disabled),
.compact-button:focus-visible {
  border-color: var(--admin-accent);
}

.action-menu,
.order-actions-popup,
.delivery-special-actions-popup {
  position: relative;
  display: inline-block;
}
.action-menu > summary,
.order-actions-popup > summary,
.delivery-special-actions-popup > summary {
  cursor: pointer;
  list-style: none;
}
.action-menu > summary::-webkit-details-marker,
.order-actions-popup > summary::-webkit-details-marker,
.delivery-special-actions-popup > summary::-webkit-details-marker { display: none; }
.action-menu-panel,
.order-actions-popup-menu,
.delivery-special-actions-popup .delivery-job-actions {
  position: absolute;
  z-index: var(--z-popover);
  right: 0;
  display: grid;
  min-width: 156px;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  box-shadow: 0 8px 24px var(--color-shadow);
}
.action-menu-item {
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--admin-text);
  font-size: var(--font-size-caption);
  text-align: left;
  cursor: pointer;
}
.action-menu-item:hover:not(:disabled),
.action-menu-item:focus-visible { background: var(--admin-accent-soft); }
.action-menu-item.is-danger { color: var(--admin-danger); }

/* Shared action rows used by order and delivery detail menus. */
.action-menu-item-row {
  display: grid;
  gap: 4px;
}
.action-menu-item-row > .small-button,
.action-menu-item-row > .delivery-order-provider-select { width: 100%; }
.action-menu-item-reason {
  color: var(--admin-text-secondary);
  font-size: var(--font-size-caption);
}

/* Semantic modal names. Legacy names remain valid during migration. */
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Shared destructive modifier; combine with a standard button primitive. */
.danger-button {
  --button-hover-border: var(--color-state-danger);
  --button-hover-background: var(--color-state-danger-soft);
  border-color: var(--color-state-danger);
  color: var(--color-state-danger);
}

/* Shared table contract; feature classes continue to provide column details. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--admin-text);
}

.data-table th,
.data-table td {
  vertical-align: top;
}

.data-table tbody tr {
  transition: background-color 140ms ease;
}

.data-table tbody tr:hover {
  background: var(--admin-surface-subtle);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 18px;
}

/* Shared table feedback used by orders, delivery and data-center tables. */
:where(.table-wrap, .panel) table tbody tr[aria-selected="true"],
:where(.table-wrap, .panel) table tbody tr.is-selected {
  background: var(--color-accent-soft);
}

:where(.table-wrap, .panel) table tbody tr[aria-selected="true"] td:first-child,
:where(.table-wrap, .panel) table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.order-query-bar {
  display: flex;
  min-height: 52px;
  margin: 0 0 10px;
  padding: 8px 10px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
  box-shadow: 0 8px 22px var(--color-shadow);
}

.order-query-field {
  display: grid;
  flex: 1 1 560px;
  grid-template-columns: 74px minmax(220px, 460px);
  max-width: 560px;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.order-query-field .text-input {
  width: 100%;
  height: var(--control-height-compact);
  background: var(--color-bg-subtle);
}

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

@media (max-width: 680px) {
  .order-query-bar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .order-query-field {
    flex-basis: 100%;
    grid-template-columns: 1fr;
    max-width: none;
    gap: 5px;
  }

  .order-query-actions {
    width: 100%;
  }

  .order-query-actions > button {
    flex: 1 1 0;
  }
}

.field {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-surface);
}

.compact-field {
  padding: 12px;
}

.field.is-wide {
  grid-column: 1 / -1;
}

.customer-watch-badge,
.customer-watch-candidate-badge,
.customer-blacklist-badge,
.customer-blacklist-candidate-badge {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 19px;
  padding: 1px 6px;
  border: 1px solid var(--color-state-warning);
  border-radius: 999px;
  align-items: center;
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.customer-blacklist-badge {
  border-color: var(--color-state-danger);
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
}

.customer-blacklist-badge-button {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
}

.customer-blacklist-badge-button:hover,
.customer-blacklist-badge-button:focus-visible {
  box-shadow: 0 0 0 2px var(--color-state-danger-soft);
  outline: none;
}

.blacklist-badge-tooltip {
  position: fixed;
  z-index: var(--z-toast);
  width: min(320px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
  box-shadow: 0 10px 28px var(--color-shadow);
  color: var(--color-text-primary);
  pointer-events: none;
}

.blacklist-badge-tooltip > strong {
  display: block;
  margin-bottom: 8px;
}

.blacklist-badge-tooltip dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 10px;
  margin: 0;
}

.blacklist-badge-tooltip dt {
  color: var(--color-text-secondary);
}

.blacklist-badge-tooltip dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.blacklist-badge-tooltip .blacklist-badge-cycle-count {
  margin: 10px -14px -12px;
  padding: 9px 14px;
  border-top: 1px solid var(--color-border-default);
  border-radius: 0 0 8px 8px;
  background: var(--color-bg-surface-muted);
  color: var(--color-state-danger);
  font-weight: var(--font-weight-semibold);
}

.customer-blacklist-candidate-badge {
  border-color: var(--color-state-warning);
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
}

.customer-watch-candidate-badge {
  border-color: var(--color-border-default);
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
}

.error-box,
.success-box {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.error-box {
  border: 1px solid var(--color-state-danger);
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
}

.success-box {
  border: 1px solid var(--color-state-success);
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

.toast-region {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-toast);
  display: grid;
  width: min(360px, calc(100vw - 32px));
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  padding: 12px 14px;
  gap: 10px;
  border: 1px solid var(--color-border-default);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--color-bg-surface);
  box-shadow: 0 10px 28px var(--color-shadow);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  opacity: 0;
  pointer-events: auto;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.toast-success {
  border-left-color: var(--color-state-success);
}

.toast-warning {
  border-left-color: var(--color-accent);
}

.toast-error {
  border-left-color: var(--color-state-danger);
}

.toast-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.toast-success .toast-icon {
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

.toast-error .toast-icon {
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
}

.toast-message {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--font-weight-medium);
}

.toast-close {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-heading-sm);
}

.toast-close:hover {
  background: var(--color-bg-surface-muted);
  color: var(--color-text-primary);
}

@media (max-width: 640px) {
  .toast-region {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

.placeholder-panel {
  max-width: 720px;
}

.placeholder-list {
  display: grid;
  gap: 10px;
  color: var(--color-text-secondary);
}

.table-wrap {
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-surface);
}

.product-create-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(88px, 0.72fr)) minmax(124px, 0.82fr);
  gap: 12px;
  align-items: end;
}

/* Reusable Info Tooltip: compact question-mark help for labels and dense tables. */
.sale-label-with-tooltip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.table-header-with-tooltip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.field > .sale-label-with-tooltip,
.sale-item-field > .sale-label-with-tooltip {
  display: inline-flex;
  justify-self: start;
}

.info-tooltip {
  position: relative;
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-text-primary);
  color: var(--color-bg-surface-strong);
  cursor: help;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.info-tooltip > span:first-child {
  display: block;
  margin: 0;
  color: var(--color-bg-surface-strong);
  font-size: inherit;
  line-height: inherit;
}

.info-tooltip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.info-tooltip .info-tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: var(--z-popover);
  width: 230px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--color-text-primary);
  box-shadow: 0 8px 24px var(--color-shadow);
  color: var(--color-bg-surface-strong);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  white-space: normal;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.info-tooltip .info-tooltip-rich {
  width: min(430px, calc(100vw - 32px));
  padding: 12px 14px;
}

.info-tooltip-title {
  display: block;
  margin-bottom: 7px;
  color: var(--color-bg-surface-strong);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.info-tooltip-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.info-tooltip-list li {
  color: var(--color-bg-surface-strong);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  white-space: normal;
}

.info-tooltip-list b {
  color: var(--color-bg-surface-strong);
  font-weight: var(--font-weight-semibold);
}

.info-tooltip:hover .info-tooltip-content,
.info-tooltip:focus .info-tooltip-content,
.info-tooltip:focus-within .info-tooltip-content {
  opacity: 1;
  transform: translate(-50%, 0);
}

.info-tooltip.info-tooltip-below .info-tooltip-content {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translate(-50%, -4px);
}

.info-tooltip.info-tooltip-below:hover .info-tooltip-content,
.info-tooltip.info-tooltip-below:focus .info-tooltip-content,
.info-tooltip.info-tooltip-below:focus-within .info-tooltip-content {
  transform: translate(-50%, 0);
}

.info-tooltip.is-portaled .info-tooltip-content {
  visibility: hidden;
  opacity: 0;
}

.info-tooltip-portal {
  position: fixed;
  z-index: var(--z-popover);
  width: min(430px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--color-text-primary);
  box-shadow: 0 12px 34px var(--color-shadow-strong);
  color: var(--color-bg-surface-strong);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  pointer-events: none;
  text-align: left;
  white-space: normal;
}

.sale-product-field {
  grid-column: auto;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: var(--color-overlay);
}

.modal-panel {
  width: min(1080px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 8px;
  background: var(--color-bg-surface);
  box-shadow: 0 18px 52px var(--color-shadow);
}

.modal-backdrop-stacked {
  z-index: calc(var(--z-modal) + 1);
}

.action-confirmation-panel {
  width: min(520px, 100%);
  padding: 26px;
}

.action-confirmation-panel.has-structured-detail {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 32px);
  padding: 20px;
}

.action-confirmation-panel.has-structured-detail .action-confirmation-mark {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
}

.action-confirmation-panel.has-structured-detail .action-confirmation-copy {
  margin-top: 0;
  padding-right: 44px;
}

.action-confirmation-panel.has-structured-detail .action-confirmation-copy h2 {
  margin-top: 4px;
}

.action-confirmation-panel.has-structured-detail .action-confirmation-copy > p {
  margin-top: 8px;
}

.action-confirmation-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-bold);
}

.action-confirmation-copy {
  margin-top: 18px;
}

.action-confirmation-eyebrow {
  color: var(--color-accent-strong);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.action-confirmation-copy h2 {
  margin: 6px 0 0;
  font-size: var(--font-size-heading-lg);
}

.action-confirmation-copy p {
  margin: 12px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-reading);
}

.action-confirmation-detail {
  margin-top: 16px;
  padding: 13px 14px;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 6px 6px 0;
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  white-space: pre-line;
}

.action-confirmation-detail.is-structured {
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  white-space: normal;
}

.action-confirmation-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.action-confirmation-summary > div {
  min-width: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-border-default);
}

.action-confirmation-summary > div:nth-child(odd):not(.is-wide) {
  border-right: 1px solid var(--color-border-default);
}

.action-confirmation-summary > div.is-wide {
  grid-column: 1 / -1;
}

.action-confirmation-summary > div:last-child {
  border-bottom: 0;
}

.action-confirmation-summary dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.action-confirmation-summary dd {
  margin: 3px 0 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}

.action-confirmation-summary .is-emphasis {
  background: var(--color-accent-soft);
}

.action-confirmation-summary .is-emphasis dd {
  color: var(--color-accent-strong);
  font-size: var(--font-size-heading-sm);
  letter-spacing: 0.04em;
}

.action-confirmation-checklist {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.action-confirmation-checklist > strong {
  font-size: var(--font-size-caption);
}

.action-confirmation-checklist ul {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.action-confirmation-checklist li {
  position: relative;
  padding-left: 22px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.action-confirmation-checklist li::before {
  position: absolute;
  left: 0;
  color: var(--color-success);
  content: "✓";
  font-weight: var(--font-weight-bold);
}

.action-confirmation-warning {
  margin: 8px 0 0 !important;
  padding: 8px 11px;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 6px 6px 0;
  background: var(--color-accent-soft);
  color: var(--color-text-primary) !important;
  font-size: var(--font-size-caption) !important;
}

.action-confirmation-actions {
  margin-top: 24px;
}

.action-confirmation-panel.has-structured-detail .action-confirmation-actions {
  margin-top: 14px;
}

@media (max-width: 680px) {
  .action-confirmation-panel.has-structured-detail {
    padding: 20px;
  }

  .action-confirmation-summary {
    grid-template-columns: 1fr;
  }

  .action-confirmation-summary > div,
  .action-confirmation-summary > div:nth-child(odd):not(.is-wide) {
    grid-column: 1;
    border-right: 0;
  }
}

.catalog-editor-panel {
  padding: 24px;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.modal-head h2 {
  margin: 0;
  font-size: var(--font-size-heading-lg);
  letter-spacing: 0;
}

.modal-head p {
  margin: 8px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.error-detail-panel {
  width: min(760px, 100%);
  padding: 24px;
}

.error-detail-meta {
  margin-bottom: 10px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.error-detail-content {
  min-height: 128px;
  max-height: min(46vh, 420px);
  margin: 0;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.error-detail-actions {
  margin-top: 18px;
}
.store-terms-editor {
  margin-bottom: 24px;
}

.store-terms-editor .section-head {
  margin-bottom: 20px;
}

.store-terms-editor .section-head h2 {
  margin: 0 0 6px;
}

.store-terms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 900px) {
  .store-terms-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- styles/41-attention.css ---- */
/* Global attention badges, notification hub, and actionable push cards. */
.attention-hub {
  position: relative;
}

.tabs-attention-hub {
  display: flex;
  align-items: flex-end;
}

.tabs-attention-hub .attention-hub-button {
  min-width: 88px;
  min-height: 36px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.tabs-attention-hub .attention-hub-button:hover,
.tabs-attention-hub .attention-hub-button[aria-expanded="true"] {
  border-bottom-color: var(--color-accent);
  background: transparent;
  color: var(--color-text-primary);
}

.tabs-attention-hub .attention-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: var(--font-size-caption);
}

.tabs-attention-hub .attention-hub-panel {
  top: calc(100% + 1px);
}

.attention-hub-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-default);
  padding: 0 10px;
  gap: 7px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-primary);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
}

.attention-hub-button:hover,
.attention-hub-button[aria-expanded="true"] {
  border-color: var(--color-state-danger);
  background: var(--color-state-danger-soft);
}

.attention-badge {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border-radius: 10px;
  background: var(--color-state-danger);
  color: var(--color-bg-surface-strong);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}

.attention-badge-inline {
  margin-left: 5px;
  vertical-align: middle;
}

.attention-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--color-state-danger);
  vertical-align: middle;
}

.attention-hub-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: var(--z-notification);
  width: 390px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
  box-shadow: 0 14px 40px var(--color-shadow);
}

.attention-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border-bottom: 1px solid var(--color-border-default);
}

.attention-hub-head strong {
  font-size: var(--font-size-body-large);
}

.attention-hub-head span,
.attention-hub-item-meta {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.attention-hub-list {
  max-height: min(520px, calc(100vh - 110px));
  overflow-y: auto;
}

.attention-hub-item {
  display: grid;
  width: 100%;
  padding: 12px 15px;
  gap: 3px;
  border: 0;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-surface-strong);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
}

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

.attention-hub-item:hover {
  background: var(--color-bg-subtle);
}

.attention-hub-item.is-critical {
  box-shadow: inset 3px 0 0 var(--color-state-danger);
}

.attention-hub-item.is-warning {
  box-shadow: inset 3px 0 0 var(--color-state-warning);
}

.attention-hub-item-title {
  font-weight: var(--font-weight-bold);
}

.attention-hub-item-detail {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.attention-hub-empty {
  padding: 30px 16px;
  color: var(--color-text-secondary);
  text-align: center;
}

.toast-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.toast-title {
  font-size: var(--font-size-body);
}

.toast-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.toast-action {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--color-border-strong);
  border-radius: 5px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.toast-action:hover {
  border-color: var(--color-action-primary);
  background: var(--color-bg-surface-muted);
}

/* ---- styles/42-image-asset-manager.css ---- */
/* Reusable image asset manager modal. */
.image-asset-manager-panel {
  width: min(860px, 100%);
  padding: 20px;
}

.image-asset-manager-layout {
  display: block;
}

.image-asset-manager-content {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.image-asset-manager-intake {
  display: grid;
  width: 100%;
  min-height: 150px;
  padding: 24px;
  place-content: center;
  gap: 6px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: center;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.image-asset-manager-intake:hover,
.image-asset-manager-intake:focus-visible,
.image-asset-manager-intake.is-dragging {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  outline: none;
}

.image-asset-manager-intake:active {
  transform: scale(0.995);
}

.image-asset-manager-intake strong {
  font-size: var(--font-size-heading);
}

.image-asset-manager-intake span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.image-asset-manager-upload-command {
  display: flex;
  justify-content: flex-end;
}

.image-asset-manager-upload-command .small-button {
  min-width: 132px;
}

.image-asset-manager-panel .catalog-image-gallery {
  display: flex;
  overflow-x: auto;
  padding-bottom: 4px;
  flex-wrap: nowrap;
}

.image-asset-manager-panel .catalog-image-card {
  width: 132px;
  flex: 0 0 132px;
}

.image-asset-manager-actions {
  margin-top: 14px;
}

@media (max-width: 720px) {
  .image-asset-manager-intake {
    min-height: 128px;
    padding: 18px;
  }
}

/* ---- styles/43-cycle-selector.css ---- */
/* Shared cycle selector and month history browser; no order-specific controls. */
.shared-cycle-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.shared-cycle-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 7px;
  padding-right: 7px;
  border-right: 1px solid var(--color-border-default);
}

.shared-cycle-filter {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.shared-cycle-filter > span {
  white-space: nowrap;
}

.shared-cycle-filter .cycle-select {
  width: 204px;
  height: var(--control-height-compact);
  border-color: var(--color-border-default);
  background: var(--color-bg-subtle);
}

.shared-cycle-filter .cycle-select.is-history-active {
  color: var(--color-text-muted);
}

.shared-cycle-history-button {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-cycle-history-button.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.shared-cycle-history-modal-panel .modal-head p {
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.shared-cycle-history-modal-panel .error-box {
  margin-top: 12px;
}

.shared-cycle-history-list .cycle-planning-tab {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 12px;
}

.shared-cycle-history-list .cycle-planning-tab strong {
  margin: 0;
}

.shared-cycle-history-list .cycle-planning-tab span {
  grid-column: 1 / -1;
}

.shared-cycle-history-list .cycle-planning-tab small {
  margin: 0;
}

@media (max-width: 680px) {
  .shared-cycle-selector {
    width: 100%;
    padding-right: 0;
    border-right: 0;
  }

  .shared-cycle-filter {
    flex: 1 1 100%;
  }

  .shared-cycle-filter .cycle-select {
    flex: 1;
    min-width: 0;
    width: auto;
  }
}

/* ---- styles/44-status.css ---- */
/* Shared status pills. Feature modules only provide data-status and copy. */
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--color-bg-surface-muted);
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.status-pill[data-status="paid"],
.status-pill[data-status="confirmed"],
.status-pill[data-status="enabled"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.status-pill[data-status="completed"] {
  border-color: var(--color-state-success);
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

.status-pill[data-status="pending_payment"],
.status-pill[data-status="placing"],
.status-pill[data-status="dispatching"],
.status-pill[data-status="accepted"],
.status-pill[data-status="expired"],
.status-pill[data-status="pending"],
.status-pill[data-status="waiting_dispatch"],
.status-pill[data-status="waiting_accept"],
.status-pill[data-status="waiting_pickup"],
.status-pill[data-status="delivering"],
.status-pill[data-status="refund_requested"],
.status-pill[data-status="refund_processing"],
.status-pill[data-status="overdue_unclaimed"] {
  border-color: var(--color-state-warning-text);
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning-text);
}

.status-pill[data-status="delivery_exception"],
.status-pill[data-status="place_failed"],
.status-pill[data-status="refund_failed"],
.status-pill[data-status="failed"],
.status-pill[data-status="check_failed"] {
  border-color: var(--color-state-danger-text);
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger-text);
}

.status-pill[data-status="cancelled"],
.status-pill[data-status="refunded"],
.status-pill[data-status="disabled"],
.status-pill[data-status="manual"] {
  color: var(--color-text-primary);
}

/* ---- styles/50-catalog.css ---- */
/* Catalog editor, image management, and product preview. */
.catalog-editor-sections {
  display: grid;
  gap: 8px;
}

.catalog-editor-panel {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  padding: 14px 16px 12px;
}

.catalog-editor-panel .modal-head {
  margin-bottom: 8px;
}

.catalog-editor-panel .modal-head p {
  margin-top: 4px;
}

.catalog-editor-panel > .modal-actions {
  margin-top: 8px;
  padding-top: 8px;
}

.editor-section {
  padding: 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.editor-section-title {
  margin-bottom: 6px;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.editor-section-head,
.image-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.editor-section-head .editor-section-title {
  margin-bottom: 0;
}

.catalog-editor-overview {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.catalog-primary-preview {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.catalog-primary-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-primary-preview-empty {
  display: grid;
  gap: 5px;
  max-width: 220px;
  padding: 20px;
  color: var(--color-text-secondary);
  text-align: center;
}

.catalog-primary-preview-empty strong {
  color: var(--color-text-primary);
}

.catalog-primary-preview-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-overlay-strong);
  color: var(--color-action-on-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.catalog-editor-details {
  display: grid;
  align-content: start;
  min-width: 0;
}

.catalog-editor-details .compact-field {
  padding: 6px;
}

.catalog-image-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.catalog-image-entry .editor-section-title {
  margin-bottom: 3px;
}

.catalog-image-summary-text {
  font-size: var(--font-size-caption);
}

.catalog-info-grid {
  display: grid;
  grid-template-columns: 104px minmax(130px, 0.68fr) minmax(190px, 1.3fr) 112px 112px;
  gap: 6px;
  align-items: end;
}

.catalog-description-field {
  margin-top: 6px;
}

.catalog-description-field .textarea-input {
  min-height: 48px;
  max-height: 48px;
  resize: none;
}

.catalog-details-sizes {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--color-border-default);
}

.catalog-size-heading {
  align-items: baseline;
  margin-bottom: 5px;
}

.catalog-size-hint {
  margin: 0;
  font-size: var(--font-size-caption);
}

.catalog-size-grid {
  display: grid;
  gap: 6px;
}

.catalog-shape-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(86px, 1fr));
  gap: 4px;
  width: fit-content;
  padding: 3px;
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.catalog-shape-choice {
  display: grid;
  min-height: 32px;
  padding: 0 14px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.catalog-shape-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.catalog-shape-choice.is-active {
  border-color: var(--color-accent);
  background: var(--color-bg-surface);
  color: var(--color-accent-strong);
}

.catalog-size-group {
  padding: 7px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
}

.catalog-size-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
}

.catalog-size-group-head span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.catalog-size-group-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.catalog-size-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 6px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.catalog-size-option.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.catalog-size-choice,
.catalog-size-price {
  display: flex;
  align-items: center;
  gap: 5px;
}

.catalog-size-price {
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.catalog-size-price .text-input {
  width: 58px;
  min-width: 0;
  height: 30px;
  padding: 4px 7px;
}

.catalog-image-limit {
  font-size: var(--font-size-caption);
}

.catalog-image-workspace {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 10px;
}

.catalog-image-upload-column {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.image-dropzone {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  margin-top: 0;
  padding: 8px 10px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.image-dropzone-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.image-dropzone-actions .small-button {
  min-width: 0;
}

.image-dropzone.is-dragging {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.image-dropzone-title {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.image-dropzone .muted {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.catalog-file-input {
  display: none;
}

.image-upload-list {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin-top: 0;
}

.image-list-heading {
  min-height: 30px;
  padding: 0 2px;
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
}

.image-list-heading span {
  color: var(--color-text-secondary);
}

.image-upload-empty,
.image-queue-empty {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px dashed var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.image-upload-empty strong {
  color: var(--color-text-primary);
}

.catalog-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 140px));
  gap: 8px;
  justify-content: start;
}

.catalog-image-card {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.catalog-image-card.is-preview {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.catalog-image-thumb {
  position: relative;
  display: grid;
  overflow: hidden;
  height: 88px;
  place-items: center;
  border-radius: 6px;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.catalog-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-image-preview-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-state-success);
  color: var(--color-action-on-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.catalog-image-name {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-image-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.catalog-image-actions .small-button {
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  font-size: var(--font-size-caption);
}

.image-upload-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.image-upload-item.is-queued {
  grid-template-columns: minmax(0, 1fr) auto;
}

.image-upload-item.is-managed {
  grid-template-columns: minmax(0, 1fr) auto;
}

.image-upload-item.is-invalid {
  border-color: var(--color-state-danger);
  background: var(--color-state-danger-soft);
}

.image-upload-item.is-warning {
  border-color: var(--color-state-warning);
  background: var(--color-state-warning-soft);
}

.image-upload-name {
  overflow: hidden;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-upload-meta {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.image-upload-status {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.shelf-panel {
  margin-top: 18px;
}

.line-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

.catalog-products-table {
  min-width: 800px;
  table-layout: fixed;
}

.catalog-workspace-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px;
  width: fit-content;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface-muted);
}

.catalog-workspace-tab {
  min-height: var(--control-height-default);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-semibold);
}

.catalog-workspace-tab:hover {
  color: var(--color-text-primary);
}

.catalog-workspace-tab.is-active {
  border-color: var(--color-accent);
  background: var(--color-bg-surface);
  color: var(--color-accent);
}

.catalog-view-hint {
  margin: 0 0 8px;
}

.catalog-size-style-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.catalog-size-style-intro > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.catalog-size-styles-table {
  min-width: 720px;
  table-layout: fixed;
}

.catalog-size-styles-table th:nth-child(1),
.catalog-size-styles-table td:nth-child(1) {
  width: 220px;
}

.catalog-size-styles-table th:nth-child(2),
.catalog-size-styles-table td:nth-child(2),
.catalog-size-styles-table th:nth-child(3),
.catalog-size-styles-table td:nth-child(3) {
  width: 140px;
}

.catalog-size-styles-table th:nth-child(4),
.catalog-size-styles-table td:nth-child(4) {
  width: 180px;
}

.catalog-size-edit-trigger,
.catalog-size-chip,
.catalog-color-value {
  display: inline-flex;
  align-items: center;
}

.catalog-size-edit-trigger {
  padding: 5px 8px;
  border: 1px solid var(--catalog-size-color, var(--color-border-strong));
  border-radius: 999px;
  background: var(--catalog-size-color, var(--color-text-muted));
  color: var(--catalog-size-ink, var(--color-action-on-primary));
  cursor: pointer;
  font: inherit;
}

.catalog-size-edit-trigger:hover {
  border-color: var(--catalog-size-color, var(--color-border-strong));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.catalog-color-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-bg-surface);
  border-radius: 999px;
  background: var(--catalog-size-color, var(--color-text-muted));
  box-shadow: 0 0 0 1px var(--catalog-size-color, var(--color-border-strong));
}

.catalog-product-size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.catalog-size-chip {
  padding: 2px 7px;
  border: 1px solid var(--catalog-size-color, var(--color-border-default));
  border-radius: 999px;
  background: var(--catalog-size-color, var(--color-text-muted));
  color: var(--catalog-size-ink, var(--color-action-on-primary));
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.catalog-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.modal-panel.catalog-size-style-modal-panel {
  box-sizing: border-box;
  width: min(720px, 100%);
  padding: 24px;
}

.catalog-size-style-modal-panel > .modal-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.catalog-size-style-modal-panel > .modal-head h2 {
  font-size: var(--font-size-heading-sm);
  line-height: var(--line-height-normal);
}

.catalog-size-style-modal-panel > .modal-head p {
  margin-top: 5px;
  font-size: var(--font-size-caption);
}

.catalog-size-style-modal-panel > .modal-actions {
  margin-top: 16px;
  padding-top: 16px;
}

.catalog-size-style-controls { display: grid; gap: 8px; min-width: 0; }
.catalog-color-value { gap: 8px; }
.catalog-size-style-preview-chip { max-width: 100%; overflow-wrap: anywhere; text-align: center; }

.catalog-size-style-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.catalog-size-style-preview {
  display: flex;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  align-items: center;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-subtle);
}

.catalog-size-style-preview-chip {
  padding: 7px 14px;
  font-size: var(--font-size-body);
}

.catalog-size-style-preview small {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.catalog-color-palette {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
}

.catalog-color-palette legend {
  padding: 0 5px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.catalog-color-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.catalog-color-preset {
  display: flex;
  min-width: 0;
  min-height: 58px;
  padding: 8px 10px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.catalog-color-preset:hover,
.catalog-color-preset:focus-visible {
  border-color: var(--catalog-size-color);
  background: var(--color-bg-subtle);
}

.catalog-color-preset.is-active {
  border-color: var(--catalog-size-color);
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 1px var(--catalog-size-color);
}

.catalog-color-preset-swatch {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-bg-surface);
  border-radius: 5px;
  background: var(--catalog-size-color);
  color: var(--catalog-size-ink);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-bold);
  box-shadow: 0 0 0 1px var(--catalog-size-color);
}

.catalog-legacy-color-hint { margin: 8px 0 0; font-size: var(--font-size-caption); }

.catalog-color-preset-copy {
  display: grid;
  min-width: 0;
  gap: 0;
}

.catalog-color-preset-copy strong,
.catalog-color-preset-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-color-preset-copy strong {
  font-size: var(--font-size-caption);
}

.catalog-color-preset-copy small {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.catalog-order-size-chip {
  margin-left: 5px;
  padding: 1px 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.order-product-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1px;
  flex-wrap: wrap;
}

.catalog-filter-size-chip {
  margin-left: 0;
}

.catalog-products-table th:nth-child(1),
.catalog-products-table td:nth-child(1) {
  width: 78px;
}

.catalog-products-table th:nth-child(2),
.catalog-products-table td:nth-child(2) {
  width: 280px;
}

.catalog-products-table th:nth-child(3),
.catalog-products-table td:nth-child(3) {
  width: 130px;
}

.catalog-products-table th:nth-child(4),
.catalog-products-table td:nth-child(4) {
  width: 116px;
}

.catalog-products-table th:nth-child(5),
.catalog-products-table td:nth-child(5) {
  width: 168px;
}

.sale-item-row .text-input,
.sale-item-row .select-input {
  height: 38px;
  padding: 0 10px;
}

.catalog-preview-button,
.catalog-preview-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.catalog-preview-button {
  padding: 0;
  cursor: pointer;
}

.catalog-preview-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-name-cell {
  display: grid;
  gap: 4px;
}

.catalog-name-main {
  font-weight: var(--font-weight-bold);
}

.product-image-field,
.product-desc-field {
  grid-column: span 3;
}

.product-desc-input {
  margin-top: 8px;
}

.product-actions {
  min-width: 0;
}

@media (max-width: 1040px) {
  .catalog-editor-overview {
    grid-template-columns: 260px minmax(0, 1fr);
  }

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

  .catalog-image-workspace {
    grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.15fr);
  }

  .catalog-image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(118px, 140px));
  }
}

@media (max-width: 720px) {
  .catalog-editor-panel {
    overflow: auto;
    padding: 16px;
  }

  .catalog-editor-overview {
    grid-template-columns: 1fr;
  }

  .catalog-primary-preview {
    min-height: 280px;
    aspect-ratio: 1;
  }

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

  .catalog-size-group-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-size-option {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-size-price .text-input {
    width: 100%;
  }

  .catalog-image-workspace {
    grid-template-columns: 1fr;
  }

  .catalog-image-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-size-style-editor {
    grid-template-columns: 1fr;
  }

  .catalog-size-style-preview {
    min-height: 56px;
  }

  .catalog-color-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-panel.catalog-size-style-modal-panel {
    padding: 16px;
  }

  .image-dropzone {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 720px) {
  .catalog-editor-panel {
    overflow: auto;
  }
}

/* ---- styles/51-sale-items.css ---- */
/* Per-cycle product preview list and focused sale-item editor. */
.sales-plan-products {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-default);
}

.sales-plan-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.product-cycle-readonly {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-bg-surface-muted);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}

.product-cycle-readonly strong {
  flex: 0 0 auto;
}

.sale-items-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.sale-items-toolbar > div {
  display: grid;
  gap: 3px;
}

.sale-items-toolbar strong {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.sale-items-toolbar .muted {
  font-size: var(--font-size-caption);
}

.sale-items-panel {
  margin-top: 10px;
  overflow: visible;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.sale-item-grid {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.8fr)
    minmax(88px, 0.66fr)
    minmax(96px, 0.72fr)
    minmax(118px, 0.86fr)
    minmax(100px, 0.72fr)
    minmax(126px, 0.88fr);
  gap: 12px;
  align-items: center;
}

.sale-items-head {
  padding: 10px 14px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.sale-item-row {
  min-height: 76px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-default);
}

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

.sale-item-row.has-orders {
  background: var(--color-bg-surface-muted);
}

.sale-item-product {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.sale-item-product-media {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.sale-item-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sale-item-product-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.sale-item-product-copy strong,
.sale-item-product-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-item-product-copy span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.sale-item-field {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.sale-item-field > span {
  display: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.sale-item-readonly-value > strong {
  font-size: var(--font-size-body);
}

.sale-item-readonly-value .muted {
  font-size: var(--font-size-caption);
}

.sale-item-availability .status-pill {
  justify-self: start;
}

.sale-item-actions .row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.sale-item-editor-panel {
  width: min(900px, 100%);
  padding: 22px;
}

.sale-item-editor-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1.18fr);
  gap: 18px;
}

.sale-item-product-preview {
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.sale-item-preview-media {
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  background: var(--color-bg-subtle);
}

.sale-item-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sale-item-preview-empty {
  padding: 20px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  text-align: center;
}

.sale-item-preview-copy {
  padding: 16px;
}

.sale-item-preview-code {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.sale-item-preview-copy h3 {
  margin: 4px 0 0;
  font-size: var(--font-size-heading-sm);
}

.sale-item-preview-copy p {
  min-height: 42px;
  margin: 8px 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.sale-item-preview-copy > strong {
  color: var(--color-accent);
  font-size: var(--font-size-heading-sm);
}

.sale-item-editor-form {
  display: grid;
  align-content: start;
  gap: 12px;
}

.sale-item-editor-form .field {
  margin: 0;
}

.sale-item-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sale-item-stock-row {
  grid-template-columns: 1fr;
}

.field-help {
  display: block;
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

@media (max-width: 1280px) {
  .sale-items-head {
    display: none;
  }

  .sale-item-grid {
    grid-template-columns: minmax(220px, 1.8fr) repeat(3, minmax(110px, 1fr));
    align-items: start;
  }

  .sale-item-field > span {
    display: inline-flex;
  }

  .sale-item-actions {
    grid-column: 4;
  }
}

@media (max-width: 760px) {
  .sales-plan-products-head,
  .sale-items-toolbar,
  .product-cycle-readonly {
    align-items: stretch;
    flex-direction: column;
  }

  .sale-items-toolbar .primary-button {
    align-self: flex-start;
  }

  .sale-item-grid,
  .sale-item-editor-layout,
  .sale-item-form-row {
    grid-template-columns: 1fr;
  }

  .sale-item-product,
  .sale-item-actions {
    grid-column: 1 / -1;
  }

  .sale-item-preview-media {
    aspect-ratio: 16 / 9;
  }
}

/* ---- styles/52-special-orders.css ---- */
/* Special-order template selection and generated-link management. */
.special-orders-page .section-head p {
  margin: 6px 0 0;
}

.special-order-workbench {
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.special-order-panel {
  overflow: hidden;
}

.special-order-view-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-subtle);
}

.special-order-view-tab {
  position: relative;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-semibold);
}

.special-order-view-tab:hover {
  color: var(--color-text-primary);
}

.special-order-view-tab:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--color-accent);
  outline-offset: -4px;
}

.special-order-view-tab.is-active {
  color: var(--color-text-primary);
}

.special-order-view-tab.is-active::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  background: var(--color-accent);
  content: "";
}

.special-order-panel-head {
  display: flex;
  min-height: 72px;
  padding: 16px 18px;
  align-items: center;
  border-bottom: 1px solid var(--color-border-default);
}

.special-order-panel-head h2,
.special-order-panel-head p {
  margin: 0;
}

.special-order-link-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

.special-order-cycle-toolbar {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-default);
}

.special-order-status-filters {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 7px;
  background: var(--color-bg-subtle);
}

.special-order-status-filter {
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-caption);
}

.special-order-status-filter.is-active {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: 0 1px 3px var(--color-shadow);
}

.special-order-panel-head p {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.special-order-create-controls {
  display: flex;
  padding: 12px 18px;
  align-items: end;
  flex-wrap: wrap;
  gap: 14px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-subtle);
}

.special-order-expiry-field {
  display: grid;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.special-order-expiry-field .select-input {
  min-width: 130px;
}

.special-order-expiry-field .text-input {
  min-width: 150px;
}

.special-order-selection-total {
  margin-left: auto;
  padding-bottom: 8px;
  color: var(--color-accent-strong);
  white-space: nowrap;
}

.special-order-candidates,
.special-order-applications,
.special-order-links {
  display: grid;
  max-height: 620px;
  overflow: auto;
}

/* 申请列表跟随页面展开，避免页面内再套一层滚动区域。 */
.special-order-applications {
  max-height: none;
  overflow: visible;
}

.special-order-create-modal-panel {
  display: flex;
  width: min(780px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  flex-direction: column;
}

.special-order-create-modal-panel > .modal-head {
  margin: 0;
  padding: 16px 24px 12px;
}

.special-order-create-modal-panel .special-order-create-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content)) minmax(0, 1fr);
  align-items: end;
  padding: 12px 24px 14px;
  gap: 10px 14px;
}

.special-order-create-modal-panel .special-order-date-field {
  grid-column: 1 / -1;
}

.special-order-create-modal-panel .special-order-selection-total {
  justify-self: end;
  margin-left: 0;
  padding-bottom: 7px;
}

.special-order-create-submit {
  grid-column: 4;
  grid-row: 3;
  justify-self: end;
  min-height: 36px;
}

.special-order-share-modal-panel {
  display: flex;
  width: min(460px, 100%);
  overflow: hidden;
  flex-direction: column;
}

.special-order-share-modal-panel .modal-head {
  flex: 0 0 auto;
  margin: 0;
  padding: 18px 18px 0;
}

.special-order-share-content {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  gap: 12px;
}

.special-order-share-preview {
  display: grid;
  min-height: 260px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  place-items: center;
}

.special-order-share-preview img {
  display: block;
  width: min(100%, 280px);
  max-height: min(52vh, 420px);
  height: auto;
  object-fit: contain;
}

.special-order-share-loading {
  color: var(--color-text-muted);
}

.special-order-share-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 16px 14px;
}

.special-order-create-modal-panel .special-order-candidates {
  min-height: 0;
  flex: 1 1 auto;
  max-height: min(440px, calc(100vh - 330px));
  padding: 10px 16px 24px;
  gap: 8px;
  background: var(--color-bg-subtle);
}

.special-order-modal-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 18px;
}

.special-order-candidate {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 12px;
  gap: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
}

.special-order-candidate:last-child,
.special-order-link-card:last-child {
  border-bottom: 0;
}

.special-order-candidate:hover,
.special-order-candidate.is-selected {
  background: var(--color-accent-soft);
}

.special-order-candidate.is-selected {
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.special-order-candidate-main,
.special-order-candidate-side,
.special-order-link-summary {
  display: grid;
  gap: 2px;
}

.special-order-candidate-main span,
.special-order-candidate-side span,
.special-order-link-summary > span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.special-order-candidate-side {
  justify-items: end;
}

.special-order-link-card {
  display: grid;
  padding: 15px 18px;
  gap: 10px;
  border-bottom: 1px solid var(--color-border-default);
}

.special-order-application-card {
  display: grid;
  padding: 10px 14px;
  gap: 7px;
  border-bottom: 1px solid var(--color-border-default);
}

.special-order-application-card:last-child {
  border-bottom: 0;
}

.special-order-application-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.special-order-application-state {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.special-order-application-contact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-subtle);
}

.special-order-application-contact > div {
  min-width: 0;
  padding: 6px 8px;
  border-right: 1px solid var(--color-border-default);
}

.special-order-application-contact > div:last-child {
  border-right: 0;
}

.special-order-application-contact dt,
.special-order-application-contact dd {
  margin: 0;
}

.special-order-application-contact dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.special-order-application-contact dd {
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.special-order-application-meta {
  display: grid;
  gap: 3px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.special-order-application-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.special-order-application-actions .primary-button {
  min-height: 36px;
}

.special-order-link-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.special-order-link-state {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.special-order-link-state[data-special-order-status="expired"],
.special-order-link-state[data-special-order-status="revoked"] {
  background: var(--color-bg-surface-muted);
  color: var(--color-text-muted);
}

.special-order-link-url {
  overflow: hidden;
  padding: 9px 10px;
  border-radius: 5px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.special-order-link-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.special-order-empty {
  padding: 34px 18px;
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 620px) {
  .special-order-view-tabs {
    padding: 0 10px;
  }

  .special-order-view-tab {
    flex: 1;
    padding: 0 8px;
  }

  .special-order-link-title,
  .special-order-application-head {
    align-items: stretch;
    flex-direction: column;
  }

  .special-order-link-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .special-order-create-modal-panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .special-order-create-modal-panel > .modal-head,
  .special-order-create-modal-panel .special-order-create-controls,
  .special-order-modal-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .special-order-create-modal-panel .special-order-create-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .special-order-create-modal-panel .special-order-date-field,
  .special-order-create-modal-panel .special-order-selection-total,
  .special-order-create-modal-panel .special-order-create-submit {
    grid-column: 1 / -1;
  }

  .special-order-create-modal-panel .special-order-selection-total {
    justify-self: start;
    padding-bottom: 0;
  }

  .special-order-create-submit {
    grid-row: auto;
    justify-self: stretch;
  }

  .special-order-selection-total {
    margin-left: 0;
  }

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

  .special-order-application-contact {
    grid-template-columns: 1fr;
  }

  .special-order-application-contact > div {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-default);
  }

  .special-order-application-contact > div:last-child {
    border-bottom: 0;
  }

  .special-order-candidate-side {
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
  }
}
.special-order-date-options {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
}
.special-order-application-card { padding: 10px 14px; }
.special-order-application-contact { margin: 3px 0; }
.special-order-application-meta { gap: 3px 12px; line-height: var(--line-height-tight); }
.special-order-application-actions { margin-top: 3px; }
.special-order-application-actions button { min-height: 34px; padding: 5px 12px; }
.special-order-application-total { margin-top: 2px; color: var(--color-accent-strong); font-size: var(--font-size-heading-sm); font-weight: var(--font-weight-bold); }
.special-order-detail-modal-panel { width: min(420px, calc(100vw - 28px)); }
.special-order-detail-content { display: grid; gap: 8px; padding: 18px 20px 22px; color: var(--color-text-secondary); }
.special-order-customer-logo { display: block; width: 112px; height: auto; margin-bottom: 8px; }
.special-order-detail-kicker { color: var(--color-accent-strong); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); letter-spacing: .08em; }
.special-order-detail-content h2 { margin: 0 0 8px; color: var(--color-text-primary); font-size: var(--font-size-heading-md); }
.special-order-detail-product, .special-order-detail-row, .special-order-detail-price, .special-order-detail-total { display: flex; justify-content: space-between; gap: 16px; }
.special-order-detail-product { padding: 11px 0; border-top: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); color: var(--color-text-primary); }
.special-order-detail-product span, .special-order-detail-row span, .special-order-detail-price span { color: var(--color-text-muted); }
.special-order-detail-address { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--color-border-default); }
.special-order-detail-address strong { color: var(--color-text-primary); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); }
.special-order-detail-total { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--color-border-strong); color: var(--color-text-primary); font-size: var(--font-size-body-large); }
.special-order-detail-total strong { color: var(--color-accent-strong); font-size: var(--font-size-heading-md); }
.special-order-date-option {
  min-width: 58px;
  padding: 8px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
}
.special-order-date-option strong,
.special-order-date-option span { display: block; text-align: center; }
.special-order-date-option span { font-size: var(--font-size-caption); opacity: .65; margin-top: 3px; }
.special-order-date-option.is-selected { border-color: var(--ink); background: var(--ink); color: #fff; }

.staff-special-order-panel { display: flex; flex-direction: column; width: min(860px, 100%); overflow: hidden; }
.staff-special-order-panel > .modal-head { margin: 0; padding: 20px 24px 16px; flex: none; }
#staffSpecialOrderForm { display: flex; flex-direction: column; min-height: 0; }
.staff-special-fields { overflow-y: auto; padding: 0 24px 16px; display: grid; gap: 10px; }
.staff-special-box { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-surface); }
.staff-special-box-title { color: var(--color-text-primary); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.staff-special-box#staffSpecialAddress { grid-template-columns: 1fr 1fr; }
.staff-special-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.staff-special-field { display: grid; min-width: 0; gap: 5px; font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.staff-special-wide { grid-column: 1 / -1; }
.staff-special-field .text-input, .staff-special-field .select-input { width: 100%; min-width: 0; }
.staff-special-address-tools { display: flex; grid-column: 1 / -1; gap: 8px; flex-wrap: wrap; align-items: center; }
.staff-special-distance { color: var(--color-text-secondary); font-size: var(--font-size-caption); align-self: center; }
.staff-special-coordinate-field { max-width: none; }
.staff-special-coordinate-field .text-input { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.staff-special-item { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 75px; gap: 8px; align-items: end; margin-bottom: 8px; }
.staff-special-footer { flex: none; margin: 0; padding: 14px 24px; border-top: 1px solid var(--color-border-default); align-items: center; }
#staffSpecialTotal { margin-right: auto; color: var(--color-accent-strong); font-size: var(--font-size-caption); }
#staffSpecialDates .special-order-date-option { flex: 0 0 68px; }
#staffSpecialDates .special-order-date-option:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 620px) {
  .staff-special-grid { grid-template-columns: 1fr; }
  .staff-special-box#staffSpecialAddress { grid-template-columns: 1fr; }
  .staff-special-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .staff-special-footer { flex-wrap: wrap; gap: 12px; }
  .staff-special-order-panel > .modal-head, .staff-special-footer { padding: 14px 16px; }
  .staff-special-fields { padding: 0 16px 20px; }
  .staff-special-box { padding: 10px 12px; }
}

/* ---- styles/60-accounts.css ---- */
/* Account permissions, users table, and user editor. */
.account-profile-button {
  max-width: 180px;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-panel {
  width: min(680px, 100%);
  padding: 24px;
}

.account-profile-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.account-profile-details > div {
  min-width: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-default);
}

.account-profile-details > div:nth-child(odd) {
  border-right: 1px solid var(--color-border-default);
}

.account-profile-details > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.account-profile-details dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.account-profile-details dd {
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}

.account-password-form {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-default);
}

.account-password-head h3 {
  margin: 0;
  font-size: var(--font-size-heading-sm);
}

.account-password-head p {
  margin: 5px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.account-password-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.account-profile-actions {
  margin-top: 18px;
}

@media (max-width: 720px) {
  .account-profile-details,
  .account-password-fields {
    grid-template-columns: 1fr;
  }

  .account-profile-details > div,
  .account-profile-details > div:nth-child(odd),
  .account-profile-details > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-default);
  }

  .account-profile-details > div:last-child {
    border-bottom: 0;
  }
}

.account-permission-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.account-permission-card {
  display: flex;
  flex-direction: column;
  padding: 15px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.account-permission-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-permission-card-head strong {
  font-size: var(--font-size-body);
}

.account-permission-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
  margin-top: 12px;
}

.account-permission-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--color-border-default);
  border-radius: 5px;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.account-permission-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: var(--space-3);
}

.role-badge,
.account-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.role-badge.role-staff {
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
}

.role-badge.role-operator {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.role-badge.role-senior_operator {
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
}

.role-badge.role-admin {
  background: var(--color-action-primary);
  color: var(--color-action-on-primary);
}

.users-table {
  min-width: 1040px;
  table-layout: fixed;
}

.users-table th:nth-child(1),
.users-table td:nth-child(1) {
  width: 74px;
}

.users-table th:nth-child(2),
.users-table td:nth-child(2) {
  width: 156px;
}

.users-table th:nth-child(3),
.users-table td:nth-child(3) {
  width: 205px;
}

.users-table th:nth-child(4),
.users-table td:nth-child(4) {
  width: 145px;
}

.users-table th:nth-child(5),
.users-table td:nth-child(5) {
  width: 210px;
}

.users-table th:nth-child(6),
.users-table td:nth-child(6) {
  width: 170px;
}

.users-table th:nth-child(7),
.users-table td:nth-child(7) {
  width: 190px;
}

.users-table th,
.users-table td {
  padding: 12px 14px;
  vertical-align: middle;
}

.user-number-cell {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.user-primary-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-email-text,
.user-login-time,
.user-role-summary {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.user-row-actions .ghost-button {
  min-width: 76px;
  padding-inline: 10px;
  white-space: nowrap;
}

.user-permission-panel {
  width: min(820px, 100%);
  padding: 24px;
}

.user-module-permissions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.user-module-permission {
  display: flex;
  flex-direction: column;
  min-height: 76px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
  overflow: hidden;
}

.user-module-permission.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.user-module-permission.is-locked {
  cursor: default;
  opacity: 0.72;
}

.user-module-access {
  display: flex;
  flex: 1;
  gap: 11px;
  padding: 14px;
  cursor: pointer;
}

.user-module-permission input {
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--color-accent);
}

.user-module-access > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.user-module-hide-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 14px;
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  cursor: pointer;
}

.user-module-hide-option.is-disabled {
  color: var(--color-text-muted);
  cursor: default;
  opacity: 0.65;
}

.user-module-permission small,
.user-permission-security-note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.user-permission-security-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-bg-surface-muted);
}

.user-store-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.user-store-chips span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 7px;
  border: 1px solid var(--color-border-default);
  border-radius: 5px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-store-chips span.is-empty {
  border-style: dashed;
  color: var(--color-text-muted);
}

.account-status.is-active {
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

.account-status.is-disabled {
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
}

.user-editor-panel {
  width: min(880px, 100%);
  padding: 24px;
}

.user-editor-section {
  padding: 20px 0;
  border-top: 1px solid var(--color-border-default);
}

.user-editor-section:first-of-type {
  padding-top: 2px;
  border-top: 0;
}

.user-editor-section-head {
  margin-bottom: 13px;
}

.user-editor-section-head h3 {
  margin: 0;
  font-size: var(--font-size-body-large);
}

.user-editor-section-head p {
  margin: 5px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.user-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.user-role-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.user-role-option {
  display: flex;
  min-height: 112px;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
  cursor: pointer;
}

.user-role-option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.user-role-option input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: var(--color-accent);
}

.user-role-option-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.user-role-option-copy strong {
  font-size: var(--font-size-body);
}

.user-role-option-copy span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.user-store-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.user-store-options.is-disabled {
  opacity: 0.52;
}

.user-store-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-bg-surface-strong);
}

.user-store-option input {
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}

.user-store-option span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.user-store-option strong,
.user-store-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-store-option small,
.user-store-empty {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.user-store-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed var(--color-border-default);
  text-align: center;
}

.user-editor-security .user-editor-grid {
  grid-template-columns: minmax(160px, 0.6fr) minmax(260px, 1fr) auto;
}

.user-password-field {
  grid-column: auto;
}

.icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-lg);
  line-height: var(--line-height-tight);
  cursor: pointer;
}

@media (max-width: 960px) {
  .account-permission-summary,
  .user-role-options {
    grid-template-columns: 1fr;
  }

  .user-role-option {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .user-editor-panel {
    padding: 18px;
  }

  .user-editor-grid,
  .user-store-options,
  .user-module-permissions,
  .user-editor-security .user-editor-grid {
    grid-template-columns: 1fr;
  }

  .user-password-field {
    grid-column: auto;
  }
}

/* ---- styles/70-orders-shared.css ---- */
/* Shared order badges and source markers. */
.special-order-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  vertical-align: middle;
}

.order-source-badge {
  display: inline-block;
  margin-left: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  vertical-align: middle;
}

.order-source-miniapp {
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.order-source-cell {
  text-align: center;
  white-space: nowrap;
}

/* ---- styles/70-orders-finance.css ---- */
/* Refund workbench and finance styles. */
.refund-workbench-panel {
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.refund-workbench-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-default);
}

.refund-workbench-head h2,
.refund-workbench-head p {
  margin: 0;
}

.refund-workbench-head p {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.refund-cycle-tabs {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  width: 100%;
  gap: 0;
  border-bottom: 1px solid var(--color-border-default);
  border-radius: 0;
}

.refund-cycle-tabs .cycle-planning-tab {
  min-height: 58px;
  border: 0;
  border-right: 1px solid var(--color-border-default);
  border-radius: 0;
}

.refund-cycle-tabs .cycle-planning-tab:last-child {
  border-right: 0;
}

.refund-cycle-tabs .cycle-planning-tab.is-active {
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

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

.refund-workbench-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--color-border-default);
}

.refund-workbench-summary-item {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px;
  border: 0;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.refund-workbench-summary-item span {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.refund-workbench-summary-item strong {
  min-width: 25px;
  color: var(--color-text-muted);
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

.refund-workbench-summary-item:hover,
.refund-workbench-summary-item.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.refund-workbench-summary-item.is-active {
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

.refund-workbench-summary-item.is-active strong {
  color: var(--color-accent-strong);
}

.refund-workbench-summary-item[data-refund-stage="failed"] strong {
  color: var(--color-state-danger);
}

.refund-history-search {
  display: flex;
  min-height: 58px;
  padding: 9px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-subtle);
}

.refund-history-search-copy {
  display: grid;
  gap: 2px;
}

.refund-history-search-copy strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
}

.refund-history-search-copy span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.refund-history-search-controls {
  display: grid;
  grid-template-columns: minmax(260px, 360px) auto auto;
  gap: 8px;
}

.refund-workbench-table-wrap {
  border: 0;
  border-radius: 0;
}

.refund-workbench-pager {
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border-default);
}

.orders-table.refunds-table {
  min-width: 0;
  table-layout: fixed;
}

.refund-col-created {
  width: 9.5%;
}

.refund-col-reference {
  width: 12.5%;
}

.refund-col-product {
  width: 14%;
}

.refund-col-amount {
  width: 12.5%;
}

.refund-col-contact {
  width: 13%;
}

.refund-col-reason {
  width: 15.5%;
}

.refund-col-status {
  width: 8.5%;
}

.refund-col-actions {
  width: 14%;
}

.refunds-table th,
.refunds-table td {
  padding: 8px;
  overflow-wrap: anywhere;
  line-height: var(--line-height-normal);
}

.refunds-table td {
  font-size: var(--font-size-caption);
}

.refunds-table td .muted {
  margin-top: 3px;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-tight);
}

.refund-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refund-actions {
  display: grid;
  width: 100%;
  gap: 6px;
}

.refund-percentage-select {
  width: 100%;
  min-width: 0;
  height: var(--control-height-compact);
  padding-right: 24px;
  font-size: var(--font-size-caption);
}

.refund-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.refund-action-buttons > :only-child {
  grid-column: 1 / -1;
}

.refund-action-buttons .small-button {
  min-width: 0;
  padding: 0 7px;
  font-size: var(--font-size-caption);
}

.refund-status-sub {
  margin-top: 5px;
}

/* Status pills inherit the shared wrapping contract so narrow finance columns
   remain readable when a state label is longer than the cell. */
.refund-status-cell .status-pill {
  max-width: 100%;
}

.refund-failure-note {
  margin-top: 6px;
  padding: 5px 7px;
  border-radius: 5px;
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

@media (max-width: 1120px) {
  .refund-workbench-summary {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .refund-history-search {
    align-items: stretch;
    flex-direction: column;
  }

  .refund-history-search-controls {
    grid-template-columns: minmax(220px, 1fr) auto auto;
  }
}

.finance-panel {
  display: grid;
  grid-template-columns: 180px 240px 128px;
  gap: 12px;
  align-items: end;
  max-width: 620px;
}

.finance-toolbar-panel,
.finance-week-controls,
.finance-commission-controls,
.finance-rate-input,
.finance-panel-heading {
  display: flex;
  align-items: center;
}

.finance-toolbar-panel {
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
}

.finance-week-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
}

.finance-week-summary {
  display: grid;
  min-width: 250px;
  gap: 2px;
}

.finance-week-summary > span,
.finance-week-summary small,
.finance-week-picker > span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.finance-week-summary strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.finance-week-controls,
.finance-commission-controls {
  flex-wrap: wrap;
  gap: 8px;
}

.finance-week-picker {
  display: flex;
  align-items: center;
  gap: 7px;
}

.finance-week-picker .text-input {
  width: 154px;
  height: var(--control-height-compact);
}

.finance-week-step,
.finance-current-week-button {
  min-height: var(--control-height-compact);
  padding: 0 12px;
}

.finance-rate-input {
  gap: 6px;
}

.finance-rate-input .text-input {
  width: 112px;
}

.finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 1120px) {
  .finance-toolbar-panel,
  .finance-week-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-week-summary {
    min-width: 0;
  }
}

.finance-summary-card {
  display: grid;
  min-height: 94px;
  margin-top: 0;
  padding: 11px 13px;
  align-content: center;
  gap: 4px;
}

.finance-summary-card > span,
.finance-summary-card small,
.finance-detail-table small,
.finance-trend-table small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.finance-summary-card strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-bold);
}

.finance-net-card {
  grid-column: span 2;
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.finance-table-panel,
.finance-trend-panel,
.finance-export-panel {
  margin-top: 12px;
}

.finance-panel-heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.finance-panel-heading h2,
.finance-panel-heading p {
  margin: 0;
}

.finance-panel-heading p {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.finance-detail-table,
.finance-trend-table {
  min-width: 980px;
}

.finance-detail-table th,
.finance-detail-table td,
.finance-trend-table th,
.finance-trend-table td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.finance-chart-metrics {
  display: flex;
  padding: 3px;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-bg-subtle);
  gap: 2px;
}

.finance-metric-button {
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.finance-metric-button:hover,
.finance-metric-button:focus-visible {
  color: var(--color-text-primary);
}

.finance-metric-button.is-active {
  background: var(--color-bg-surface);
  color: var(--color-accent);
  box-shadow: 0 2px 6px var(--color-shadow);
}

.finance-trend-chart {
  width: 100%;
  min-height: 220px;
}

.finance-trend-chart svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
}

.finance-chart-grid {
  stroke: var(--color-border-default);
  stroke-width: 1;
}

.finance-chart-axis-label,
.finance-chart-x-label {
  fill: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.finance-chart-area {
  fill: var(--color-accent-soft);
  opacity: 0.65;
}

.finance-chart-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.finance-chart-point {
  fill: var(--color-bg-surface);
  stroke: var(--color-accent);
  stroke-width: 3;
}

.finance-chart-point-group {
  outline: none;
}

.finance-chart-point-hit {
  fill: transparent;
  cursor: pointer;
}

.finance-chart-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.finance-chart-point-group:hover .finance-chart-tooltip,
.finance-chart-point-group:focus .finance-chart-tooltip {
  opacity: 1;
}

.finance-chart-tooltip rect {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-default);
  stroke-width: 1;
  filter: drop-shadow(0 4px 8px var(--color-shadow));
}

.finance-chart-tooltip-date {
  fill: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.finance-chart-tooltip-value {
  fill: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.finance-chart-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: var(--color-text-muted);
}

.finance-trend-details {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--color-border-default);
}

.finance-trend-details summary {
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.finance-trend-details .table-wrap {
  margin-top: 8px;
}

.finance-warning {
  color: var(--color-state-warning);
}

.finance-trend-table tr.is-current-finance-week td {
  background: var(--color-accent-soft);
}

.finance-export-panel summary {
  cursor: pointer;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.finance-export-panel .finance-panel {
  margin-top: 16px;
}

@media (max-width: 980px) {
  .finance-toolbar-panel {
    align-items: stretch;
    flex-direction: column;
  }

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

  .finance-net-card {
    grid-column: span 2;
  }
}

@media (max-width: 1180px) and (min-width: 981px) {
  .finance-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finance-net-card {
    grid-column: span 3;
  }
}

@media (max-width: 640px) {
  .finance-summary-grid {
    grid-template-columns: 1fr;
  }

  .finance-net-card {
    grid-column: auto;
  }

  .finance-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-chart-metrics {
    align-self: flex-start;
  }
}

/* ---- styles/70-orders-list.css ---- */
.orders-table {
  width: 100%;
  min-width: 1480px;
  border-collapse: collapse;
}

.orders-table th,
.orders-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-default);
  text-align: left;
  vertical-align: top;
}

.orders-table th {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.orders-table td {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}

.orders-table tr:last-child td {
  border-bottom: 0;
}

.orders-page {
  max-width: 1720px;
  margin: 0 auto;
  padding-top: 0;
}

.orders-section-head {
  align-items: stretch;
  margin: 0 -24px;
  padding: 15px 24px 13px;
  border-bottom: 3px solid var(--color-accent);
  background: var(--color-bg-inverse);
  flex-direction: column;
  gap: 11px;
}

.orders-filter-bar {
  margin-bottom: 10px;
  justify-content: flex-end;
}

.orders-filter-bar .orders-toolbar {
  width: 100%;
  justify-content: flex-end;
}

.orders-title-block {
  display: grid;
  gap: 4px;
}

.orders-section-head .orders-title-block h1 {
  color: var(--color-text-inverse);
  font-size: var(--font-size-heading-md);
  letter-spacing: -0.01em;
}

.orders-section-head .orders-title-block p {
  margin: 0;
  color: var(--color-text-inverse-muted);
}

.orders-head-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 6px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
  box-shadow: 0 10px 28px var(--color-shadow);
  gap: 9px;
}

.orders-sync-health,
.orders-toolbar,
.orders-locator-panel,
.orders-locator-form,
.orders-top-pager {
  display: flex;
  align-items: center;
}

.orders-sync-health {
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.orders-locator-panel {
  flex: 1 1 590px;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.orders-locator-form {
  gap: 7px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.orders-locator-form .text-input {
  width: 178px;
  height: var(--control-height-compact);
  background: var(--color-bg-subtle);
}

.orders-sync-copy {
  display: grid;
  max-width: 360px;
  gap: 2px;
  text-align: left;
}

.orders-sync-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.orders-sync-detail {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-sync-detail-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.orders-sync-detail-button:hover,
.orders-sync-detail-button:focus-visible,
.orders-sync-detail-button.has-error {
  color: var(--color-danger-text);
  text-decoration: underline;
}

.orders-sync-label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.orders-sync-state {
  min-width: 64px;
  color: var(--color-text-muted);
}

.orders-product-filter {
  margin: 0 0 8px;
  padding: 5px 6px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
  box-shadow: 0 8px 22px var(--color-shadow);
}

.orders-product-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.orders-service-date-tabs {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--color-border-default);
}

.orders-service-date-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.orders-service-date-tab small {
  color: var(--color-text-muted);
  font-size: inherit;
  font-weight: var(--font-weight-regular);
}

.orders-service-date-tab.is-active small {
  color: inherit;
}

.orders-product-tab {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.orders-product-tab:hover,
.orders-product-tab:focus-visible {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.orders-product-tab.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.orders-product-empty {
  margin: 0;
  padding: 4px 6px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.orders-toolbar {
  flex: 0 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.orders-status-filter {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 0;
}

.orders-section-head .orders-unclaimed-button {
  min-height: var(--control-height-compact);
}

.orders-unclaimed-button.is-active {
  border-color: var(--color-state-warning);
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
}

.compact-action-button {
  height: 30px;
  padding: 0 9px;
  font-size: var(--font-size-caption);
}

.orders-top-pager {
  gap: 5px;
  margin: 0 0 0 2px;
  padding-left: 8px;
  border-left: 1px solid var(--color-border-default);
}

.orders-top-pager .ghost-button {
  min-width: 56px;
}

.orders-table-wrap {
  margin-top: 0;
  border: 0;
  border-radius: 8px;
  background: var(--color-bg-surface);
  box-shadow: 0 10px 28px var(--color-shadow);
}

.orders-list-table {
  min-width: 1330px;
}

.orders-list-table th,
.orders-list-table td {
  padding: 7px 9px;
  line-height: var(--line-height-tight);
}

/* Column identities stay stable when columns move or permissions hide actions. */
.orders-list-table th.order-col-created { width: 128px; }
.orders-list-table th.order-col-number { width: 250px; }
.orders-list-table th.order-col-source { width: 64px; }
.orders-list-table th.order-col-product { width: 140px; }
.orders-list-table th.order-col-size { width: 64px; }
.orders-list-table th.order-col-fulfillment { width: 160px; }
.orders-list-table th.order-col-amount { width: 82px; }
.orders-list-table th.order-col-contact { width: 195px; }
.orders-list-table th.order-col-verification { width: 100px; }

.orders-list-table .order-col-fulfillment { min-width: 180px; }

.orders-list-table .order-col-status {
  width: 1%;
  min-width: 96px;
  white-space: nowrap;
}

.orders-list-table .order-col-actions {
  width: 1%;
  min-width: 72px;
  white-space: nowrap;
}

.orders-list-table th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom-color: var(--color-border-strong);
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.orders-list-table th:has(.info-tooltip:hover),
.orders-list-table th:has(.info-tooltip:focus),
.orders-list-table th:has(.info-tooltip:focus-within) {
  z-index: var(--z-popover);
}

.orders-list-table th.order-col-status .info-tooltip-content {
  right: -12px;
  left: auto;
  transform: translate(0, -4px);
}

.orders-list-table th.order-col-status .info-tooltip:hover .info-tooltip-content,
.orders-list-table th.order-col-status .info-tooltip:focus .info-tooltip-content,
.orders-list-table th.order-col-status .info-tooltip:focus-within .info-tooltip-content {
  transform: translate(0, 0);
}

.orders-list-table tbody tr {
  transition: background 140ms ease;
}

.orders-list-table tbody tr:hover {
  background: var(--color-bg-subtle);
}

.orders-list-table tbody tr > td.order-col-created {
  border-left: 3px solid transparent;
}

.orders-list-table tbody tr[data-status="pending_payment"] > td.order-col-created,
.orders-list-table tbody tr[data-status="refund_requested"] > td.order-col-created,
.orders-list-table tbody tr[data-status="refund_processing"] > td.order-col-created {
  border-left-color: var(--color-accent);
}

.orders-list-table tbody tr[data-status="refund_failed"] > td.order-col-created {
  border-left-color: var(--color-state-danger);
}

.orders-list-table tbody tr[data-status="overdue_unclaimed"] > td.order-col-created {
  border-left-color: var(--color-state-warning);
}

.order-size-cell {
  text-align: center;
  white-space: nowrap;
}

.order-actions-menu-panel {
  width: min(480px, calc(100vw - 32px));
  padding: 24px;
}

.order-actions-menu-panel .modal-head {
  margin-bottom: 14px;
}

.order-actions-menu-info {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.order-actions-menu-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
}

.order-actions-menu-info-grid > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.order-actions-menu-info-grid .is-wide {
  grid-column: 1 / -1;
}

.order-actions-menu-info-grid dt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.order-actions-menu-info-grid dd {
  margin: 0;
  font-size: var(--font-size-body);
  overflow-wrap: anywhere;
}

.action-menu-help {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-default);
}

.action-menu-help > summary {
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.action-menu-help > summary:hover {
  color: var(--color-text-primary);
}

.action-menu-help .info-tooltip-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.action-menu-help .info-tooltip-list li,
.action-menu-help .info-tooltip-list b {
  color: var(--color-text-secondary);
}

.action-menu-help .info-tooltip-list b {
  color: var(--color-text-primary);
}

.order-actions-menu-list {
  display: grid;
  gap: 10px;
}

.order-actions-menu-section {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.order-action-menu-item.is-disabled .small-button {
  opacity: 0.55;
}

.order-action-menu-item .watch-button {
  border-color: var(--color-state-warning);
  color: var(--color-state-warning);
}

@media (max-width: 620px) {
  .order-actions-menu-panel { padding: 18px 16px; }
  .order-actions-menu-info-grid { grid-template-columns: 1fr; }
}

.orders-list-table th:last-child .info-tooltip-content {
  right: 0;
  left: auto;
  transform: translate(0, -4px);
}

.orders-list-table th:last-child .info-tooltip:hover .info-tooltip-content,
.orders-list-table th:last-child .info-tooltip:focus .info-tooltip-content,
.orders-list-table th:last-child .info-tooltip:focus-within .info-tooltip-content {
  transform: translate(0, 0);
}

.order-cell-primary {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.order-contact-heading {
  display: flex;
  align-items: center;
  gap: 5px;
}

.orders-sync-panel {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.order-cell-meta {
  margin-top: 1px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.order-customer-note {
  max-width: 220px;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
  white-space: normal;
}

.order-fulfillment-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: max-content;
  white-space: nowrap;
}

.order-weekday-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.order-fulfillment-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.order-created-at,
.order-number,
.order-amount,
.order-verification-code {
  white-space: nowrap;
}

.order-technical-id {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.32;
  transition: opacity 140ms ease;
}

.order-internal-id {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.order-copy-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.order-copy-button:hover,
.order-copy-button:focus-visible {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.order-openid-copy {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: left;
}

.order-openid-copy:hover,
.order-openid-copy:focus-visible {
  color: var(--color-text-secondary);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.orders-list-table tbody tr:hover .order-technical-id {
  opacity: 0.82;
}

.order-amount {
  color: var(--color-text-primary);
  font-size: var(--font-size-body-large) !important;
  font-weight: var(--font-weight-semibold);
}

.order-row-action {
  height: 28px;
  min-width: 0;
  margin: 0;
  padding: 0 7px;
  font-size: var(--font-size-caption);
}

.order-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

@media (max-width: 1120px) {
  .orders-head-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .orders-sync-health {
    width: 100%;
  }

  .orders-locator-panel {
    width: 100%;
  }

  .orders-toolbar {
    justify-content: space-between;
    width: 100%;
  }
}

.muted {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ---- styles/71-delivery.css ---- */
/* Delivery workflow shell, navigation, and shared delivery controls. */
.delivery-warning {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--color-state-danger);
  border-radius: 8px;
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

.delivery-view-tabs {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--color-border-default);
  overflow: visible;
}

.delivery-view-group {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 20px;
}

.delivery-view-business {
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.delivery-view-business::-webkit-scrollbar {
  display: none;
}

.delivery-admin-menu {
  position: relative;
  z-index: var(--z-sticky);
  flex: 0 0 auto;
}

.delivery-admin-menu-trigger {
  display: flex;
  height: 36px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.delivery-admin-menu-trigger::-webkit-details-marker {
  display: none;
}

.delivery-admin-menu.is-active .delivery-admin-menu-trigger,
.delivery-admin-menu[open] .delivery-admin-menu-trigger {
  color: var(--color-text-primary);
}

.delivery-admin-menu-arrow {
  transform: translateY(-1px);
  transition: transform .16s ease;
}

.delivery-admin-menu[open] .delivery-admin-menu-arrow {
  transform: rotate(180deg) translateY(1px);
}

.delivery-admin-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 190px;
  padding: 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
  box-shadow: 0 12px 30px var(--color-shadow);
}

.delivery-admin-menu-group-label {
  padding: 8px 10px 4px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}

.delivery-admin-menu-item {
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.delivery-admin-menu-item:hover,
.delivery-admin-menu-item:focus-visible {
  background: var(--color-bg-muted);
}

.delivery-admin-menu-item.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.delivery-provider-control {
  display: grid;
  gap: 16px;
}

.delivery-provider-check-note {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.delivery-provider-check-note strong {
  color: var(--color-text-primary);
}

.delivery-dispatch-master,
.delivery-dispatch-behavior,
.delivery-production-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-state-success);
  border-radius: 8px;
  background: var(--color-state-success-soft);
}

.delivery-dispatch-master span {
  color: var(--color-text-secondary);
}

.delivery-dispatch-master.is-disabled {
  border-color: var(--color-state-warning);
  background: var(--color-state-warning-soft);
}

.delivery-dispatch-provider-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.delivery-dispatch-provider-option {
  display: flex;
  min-height: 132px;
  padding: 16px;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
  cursor: pointer;
}

.delivery-dispatch-provider-option.is-selected {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.delivery-dispatch-provider-option.is-disabled {
  cursor: not-allowed;
  opacity: .6;
}

.delivery-dispatch-provider-copy {
  display: grid;
  flex: 1;
  gap: 5px;
}

.delivery-dispatch-provider-copy small {
  color: var(--color-text-secondary);
}

.delivery-provider-callback-security {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  padding: 8px 9px;
  border-left: 3px solid var(--color-state-warning);
  border-radius: 4px;
  background: var(--color-state-warning-soft);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.delivery-provider-callback-security.is-ready {
  border-left-color: var(--color-state-success);
  background: var(--color-state-success-soft);
}

.delivery-provider-callback-security code {
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: inherit;
}

.delivery-dispatch-behavior {
  border-color: var(--color-border-default);
  background: var(--color-bg-muted);
}

.delivery-production-confirm {
  align-items: flex-start;
  border-color: var(--color-state-danger);
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
  cursor: pointer;
}

.delivery-view-tab {
  position: relative;
  height: 36px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.delivery-drills {
  display: grid;
  gap: 18px;
}

.delivery-drill-safety {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--color-state-success);
  border-radius: 8px;
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

.delivery-drill-safety span {
  color: var(--color-text-secondary);
}

.delivery-drill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.delivery-drill-card {
  display: flex;
  min-height: 220px;
  padding: 17px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.delivery-drill-card h2,
.delivery-drill-active h2 {
  margin: 10px 0 6px;
  font-size: var(--font-size-body-large);
}

.delivery-drill-card p {
  margin: 0 0 16px;
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.delivery-drill-card .primary-button {
  margin-top: auto;
}

.delivery-drill-level,
.delivery-drill-badge {
  display: inline-flex;
  min-height: 22px;
  padding: 0 7px;
  align-items: center;
  border-radius: 11px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.delivery-drill-level.is-critical {
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
}

.delivery-drill-level.is-warning {
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
}

.delivery-drill-badge {
  margin-right: 6px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  vertical-align: middle;
}

.delivery-drill-active {
  padding-top: 4px;
}

.delivery-drill-active-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
}

.delivery-drill-active-head h2,
.delivery-drill-active-head p {
  margin: 0;
}

.delivery-drill-active-list {
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.delivery-drill-active-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-default);
}

.delivery-drill-active-item:last-child {
  border-bottom: 0;
}

.delivery-drill-active-item p {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
}

.delivery-drill-active-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.delivery-exceptions-table tr.is-delivery-drill td {
  background: var(--color-accent-soft);
}

@media (max-width: 900px) {
  .delivery-view-tabs {
    gap: 8px;
  }

  .delivery-drill-active-item,
  .delivery-drill-safety {
    align-items: flex-start;
    flex-direction: column;
  }

  .delivery-drill-active-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.delivery-view-tab.is-active {
  color: var(--color-text-primary);
}

.delivery-view-tab.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--color-accent);
  content: "";
}

.delivery-jobs-head {
  margin-top: 18px;
  margin-bottom: 0;
}

.delivery-list-controls {
  display: grid;
  grid-template-columns: 150px 150px 170px minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  margin: 12px 0;
}

.delivery-list-controls > button {
  min-height: var(--control-height-default);
}

/* ---- styles/71-delivery-list.css ---- */
/* Delivery list navigation, status filters, and order lookup controls. */
.delivery-status-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.delivery-order-locator {
  display: flex;
  align-items: end;
  gap: 8px;
  margin: 10px 0;
}

.delivery-order-locator label {
  display: grid;
  width: min(360px, 100%);
  gap: 4px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.delivery-order-locator .text-input {
  min-height: var(--control-height-compact);
}

.delivery-order-locator > .muted {
  align-self: center;
  font-size: var(--font-size-caption);
}

.delivery-status-tab {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.delivery-status-tab.is-history-start {
  margin-left: 10px;
}

.delivery-status-tab span {
  margin-left: 4px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.delivery-status-tab.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

/* ---- styles/71-delivery-providers.css ---- */
/* Delivery provider cards and capability metadata. */
.delivery-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.delivery-provider-card {
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.delivery-provider-card.is-ready {
  border-color: var(--color-state-success);
  background: var(--color-state-success-soft);
}

.delivery-provider-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: var(--font-weight-bold);
}

.delivery-provider-meta,
.delivery-provider-missing {
  margin-top: 9px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.delivery-provider-capabilities {
  display: flex;
  margin-top: 9px;
  flex-wrap: wrap;
  gap: 6px;
}

.delivery-provider-capabilities span {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.delivery-provider-missing {
  color: var(--color-state-danger);
}

/* ---- styles/71-delivery-quote.css ---- */
/* Delivery quote form and dispatch flow guidance. */
.delivery-flow-hint {
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.delivery-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.delivery-wide-field {
  grid-column: span 2;
}

.delivery-quote-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

/* ---- styles/71-delivery-tables.css ---- */
/* Delivery job table structure, columns, and compact actions. */
.delivery-jobs-table {
  min-width: 1320px;
}

.delivery-job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 160px;
}

.delivery-tip-unresolved {
  align-self: center;
  color: var(--color-warning-text);
  font-size: var(--font-size-caption);
}

.delivery-tip-resolution {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.delivery-order-provider-select {
  width: 132px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-primary);
  font: inherit;
}

.delivery-orders-table {
  min-width: 1120px;
  table-layout: fixed;
}

.delivery-orders-table th,
.delivery-orders-table td {
  padding: 7px 8px;
  overflow-wrap: anywhere;
  font-size: var(--font-size-caption);
}


/* Keep the contact column compact so long addresses remain readable at a glance. */

.delivery-orders-table th.delivery-col-platform { width: 6%; }
.delivery-orders-table th.delivery-col-service-time { width: 8%; }
.delivery-orders-table th.delivery-col-dispatch-estimate { width: 7%; }
.delivery-orders-table th.delivery-col-order { width: 12%; }
.delivery-orders-table th.delivery-col-product { width: 7%; }
.delivery-orders-table th.delivery-col-size { width: 8%; }
.delivery-orders-table th.delivery-col-recipient { width: 8%; }
.delivery-orders-table th.delivery-col-address { width: 22%; }
.delivery-orders-table th.delivery-col-amount { width: 14%; }
.delivery-orders-table th.delivery-col-status { width: 88px; }
.delivery-orders-table th.delivery-col-actions { width: 104px; }

.delivery-orders-table .delivery-recipient-cell {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
}

.delivery-orders-table .delivery-address-cell {
  min-width: 360px;
  max-width: 520px;
}

.delivery-orders-table .delivery-product-cell,
.delivery-orders-table .delivery-address-cell {
  line-height: var(--line-height-tight);
}

.delivery-orders-table .delivery-product-cell {
  min-width: 0;
}

.delivery-orders-table .delivery-product-name {
  font-size: inherit;
  font-weight: var(--font-weight-semibold);
}

.delivery-orders-table .delivery-size-cell {
  white-space: nowrap;
}

.delivery-orders-table .delivery-job-actions {
  min-width: 0;
  gap: 4px;
}

.delivery-orders-table .delivery-job-actions .small-button {
  font-size: var(--font-size-caption);
  max-width: 100%;
  padding: 5px 6px;
  line-height: var(--line-height-tight);
  white-space: normal;
}

.delivery-orders-table .delivery-order-provider-select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 4px;
}

.delivery-orders-table .delivery-special-action-cell .delivery-job-actions {
  min-width: 0;
  max-width: 170px;
}

/* ---- styles/71-delivery-details.css ---- */
/* Delivery order detail panel, proof, and claim presentation. */
.delivery-order-detail-panel {
  box-sizing: border-box;
  width: min(880px, calc(100vw - 32px));
  max-height: min(88vh, 920px);
  padding: 18px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.delivery-order-detail-panel > .modal-head {
  gap: 12px;
  margin-bottom: 12px;
}

.delivery-order-detail-panel > .modal-head h2 {
  font-size: var(--font-size-heading-sm);
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.delivery-order-detail-panel > .modal-head p {
  margin-top: 4px;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.delivery-order-detail-body {
  display: grid;
  gap: 10px;
}

.delivery-detail-section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.delivery-detail-section h3,
.delivery-proof-section h4 {
  margin: 0;
}

.delivery-detail-section h3 {
  font-size: var(--font-size-body);
}

.delivery-detail-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.delivery-detail-list.is-delivery-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.delivery-detail-item {
  min-width: 0;
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--color-bg-surface-strong);
}

.delivery-detail-item.is-wide {
  grid-column: 1 / -1;
}

.delivery-detail-item.is-span-2 {
  grid-column: span 2;
}

.delivery-detail-item dt {
  margin-bottom: 2px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.delivery-detail-item dd {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}

.delivery-detail-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.delivery-detail-timeline li {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px 7px 20px;
  border-radius: 6px;
  background: var(--color-bg-surface-strong);
}

.delivery-detail-timeline li::before {
  position: absolute;
  top: 13px;
  left: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  content: "";
}

.delivery-detail-timeline time,
.delivery-detail-note,
.delivery-proof-head span,
.delivery-proof-empty {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.delivery-detail-note,
.delivery-proof-empty {
  margin: 0;
}

.delivery-proof-section {
  display: grid;
  gap: 8px;
}

.delivery-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.delivery-proof-section h4 {
  font-size: var(--font-size-body);
}

.delivery-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.delivery-proof-grid a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-muted);
}

.delivery-proof-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .16s ease;
}

.delivery-proof-grid a:hover img,
.delivery-proof-grid a:focus-visible img {
  transform: scale(1.025);
}

.delivery-claim-heading,
.delivery-claim-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.delivery-claim-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.delivery-claim-actions a.small-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.delivery-claim-warning {
  margin: 0;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.delivery-claim-contact {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 12px;
  padding: 9px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-surface-strong);
}

.delivery-claim-contact span,
.delivery-claim-contact small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.delivery-claim-contact strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}

.delivery-claim-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.delivery-claim-checklist strong,
.delivery-claim-checklist span {
  padding: 5px 7px;
  border-radius: 5px;
  background: var(--color-bg-surface-strong);
  font-size: var(--font-size-caption);
}

.delivery-order-detail-panel > .modal-actions {
  margin-top: 12px;
}

/* ---- styles/71-delivery-exceptions.css ---- */
/* Delivery exception and change-history tables. */
.delivery-exceptions-table {
  min-width: 1120px;
  table-layout: fixed;
}

.delivery-exceptions-table th,
.delivery-exceptions-table td {
  padding: 7px 8px;
  overflow-wrap: anywhere;
  font-size: var(--font-size-caption);
}

.delivery-exceptions-table th.delivery-exception-col-type { width: 20%; }
.delivery-exceptions-table th.delivery-exception-col-service-time { width: 11%; }
.delivery-exceptions-table th.delivery-exception-col-order { width: 16%; }
.delivery-exceptions-table th.delivery-exception-col-recipient { width: 13%; }
.delivery-exceptions-table th.delivery-exception-col-address { width: 22%; }
.delivery-exceptions-table th.delivery-exception-col-status { width: 10%; }
.delivery-exceptions-table th.delivery-exception-col-actions { width: 8%; }

.delivery-exceptions-table .delivery-exception-col-status,
.delivery-exceptions-table .delivery-exception-col-actions {
  white-space: nowrap;
}

.delivery-exception-summary {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--color-state-danger);
  border-radius: 8px;
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
  font-weight: var(--font-weight-medium);
}

.delivery-exception-summary.is-clear {
  border-color: var(--color-state-success);
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

.delivery-exception-type {
  display: inline-block;
  margin-bottom: 4px;
  padding: 3px 7px;
  border-radius: 10px;
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.delivery-exception-type.is-warning {
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
}

.delivery-exception-detail {
  max-width: 260px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.delivery-changes-table {
  min-width: 1280px;
}

.delivery-changes-table .is-positive {
  color: var(--color-state-success);
}

.delivery-changes-table .is-negative {
  color: var(--color-state-danger);
}

.delivery-platform-order-header,
.delivery-platform-order-cell {
  min-width: 110px;
}

.delivery-platform-order-cell > div:first-child {
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
}

.delivery-product-cell {
  min-width: 215px;
}

.delivery-service-time-cell {
  min-width: 120px;
}

.delivery-dispatch-estimate-header,
.delivery-dispatch-estimate-cell {
  min-width: 130px;
}

.delivery-dispatch-estimate-cell {
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.delivery-product-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
}

.delivery-product-name {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.delivery-product-size {
  flex: 0 0 auto;
  margin-left: 0;
  line-height: var(--line-height-tight);
}

.delivery-recipient-cell {
  width: 135px;
  min-width: 135px;
  max-width: 135px;
  overflow-wrap: anywhere;
}

.delivery-action-header,
.delivery-action-cell {
  width: 64px;
  max-width: 64px;
}

.delivery-action-cell .delivery-job-actions {
  min-width: 0;
  max-width: 64px;
}

.delivery-action-cell .small-button {
  height: auto;
  min-height: 28px;
  max-width: 100%;
  padding: 3px 5px;
  font-size: var(--font-size-caption);
  white-space: nowrap;
  line-height: var(--line-height-tight);
}

.delivery-special-action-cell .small-button {
  height: auto;
  min-height: 28px;
  max-width: 100%;
  padding: 3px 5px;
  font-size: var(--font-size-caption);
  white-space: normal;
  line-height: var(--line-height-tight);
}

.delivery-amount-cell {
  white-space: normal;
  line-height: var(--line-height-tight);
}

.delivery-amount-cell > div + div {
  margin-top: 2px;
}

.delivery-status-cell {
  width: 76px;
  min-width: 76px;
  max-width: 76px;
}

.delivery-address-cell {
  min-width: 300px;
  max-width: 440px;
  white-space: normal;
  line-height: var(--line-height-normal);
}

.delivery-test-panel {
  margin-top: 24px;
}

.delivery-test-panel > summary {
  cursor: pointer;
  list-style: none;
}

.delivery-test-panel > summary::-webkit-details-marker {
  display: none;
}

.delivery-test-panel[open] > summary {
  margin-bottom: 16px;
}

/* ---- styles/71-delivery-reports.css ---- */
.delivery-cost-report {
  display: grid;
  gap: 12px;
}

.delivery-report-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.delivery-report-head h2,
.delivery-report-panel h3,
.delivery-distance-head h3 {
  margin: 0;
  color: var(--color-text-primary);
  letter-spacing: 0;
}

.delivery-report-head h2 {
  font-size: var(--font-size-heading-lg);
}

.delivery-report-head p,
.delivery-distance-head p {
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.delivery-report-controls {
  display: grid;
  grid-template-columns: 180px auto;
  gap: 10px;
  align-items: end;
}

.delivery-cost-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 8px;
}

.delivery-cost-card {
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.delivery-cost-card span,
.delivery-cost-card small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.delivery-cost-card strong {
  align-self: end;
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-sm);
  font-variant-numeric: tabular-nums;
}

.delivery-cost-card.is-positive strong,
.delivery-cost-table .is-positive {
  color: var(--color-state-success);
}

.delivery-cost-card.is-negative strong,
.delivery-cost-table .is-negative {
  color: var(--color-state-danger);
}

.delivery-cost-card.is-warning {
  border-color: var(--color-state-warning);
}

.delivery-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
}

.delivery-report-panel {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.delivery-report-panel h3 {
  padding: 16px 18px 12px;
  font-size: var(--font-size-body);
}

.delivery-cost-table {
  min-width: 680px;
}

.delivery-cost-table td,
.delivery-cost-table th {
  font-variant-numeric: tabular-nums;
}

.delivery-cost-missing {
  margin-left: 4px;
  color: var(--color-state-warning);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.delivery-report-note {
  margin: -4px 0 0;
}

.delivery-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 16px;
}

.delivery-pricing-preview {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.delivery-pricing-preview span,
.delivery-pricing-preview small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.delivery-pricing-preview strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}

.delivery-distance-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
}

.delivery-distance-head h3 {
  font-size: var(--font-size-heading-sm);
}

.delivery-tier-rows {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.delivery-tier-row {
  display: grid;
  grid-template-columns: 70px minmax(220px, 1fr) minmax(220px, 1fr) 42px;
  gap: 12px;
  align-items: end;
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.delivery-tier-label {
  align-self: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.delivery-tier-row label {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.delivery-tier-row .text-input {
  min-width: 0;
}

.delivery-tier-empty {
  padding: 20px;
  border: 1px dashed var(--color-border-default);
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  text-align: center;
}

/* ---- styles/71-delivery-layout.css ---- */
@media (max-width: 1050px) {
  .delivery-detail-list,
  .delivery-detail-list.is-delivery-summary,
  .delivery-detail-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .delivery-form-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .delivery-list-controls {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .delivery-cost-summary {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .delivery-report-grid {
    grid-template-columns: 1fr;
  }

  .delivery-pricing-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .delivery-tier-row {
    grid-template-columns: 60px minmax(180px, 1fr) minmax(180px, 1fr) 42px;
  }
}

@media (max-width: 680px) {
  .delivery-order-locator {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .delivery-order-locator label,
  .delivery-order-locator > .muted {
    width: 100%;
  }

  .delivery-order-detail-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 14px;
  }

  .delivery-detail-list,
  .delivery-detail-list.is-delivery-summary,
  .delivery-detail-timeline {
    grid-template-columns: 1fr;
  }

  .delivery-detail-item.is-wide,
  .delivery-detail-item.is-span-2 {
    grid-column: auto;
  }

  .delivery-claim-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .delivery-claim-contact {
    grid-template-columns: 1fr;
  }

  .delivery-form-grid {
    grid-template-columns: 1fr;
  }

  .delivery-wide-field {
    grid-column: auto;
  }

  .delivery-quote-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .delivery-list-controls {
    grid-template-columns: 1fr;
  }

  .delivery-report-head,
  .delivery-distance-head {
    align-items: stretch;
    flex-direction: column;
  }

  .delivery-report-controls,
  .delivery-cost-summary,
  .delivery-pricing-grid,
  .delivery-tier-row {
    grid-template-columns: 1fr;
  }

  .delivery-tier-row .icon-button {
    justify-self: end;
  }
}

.delivery-action-menu-panel {
  width: min(480px, 100%);
  padding: 24px;
}

.delivery-action-menu-panel .modal-head {
  margin-bottom: 14px;
}

.delivery-action-menu-info {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.delivery-action-menu-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
}

.delivery-action-menu-info-grid > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.delivery-action-menu-info-grid .is-wide {
  grid-column: 1 / -1;
}

.delivery-action-menu-info-grid dt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.delivery-action-menu-info-grid dd {
  margin: 0;
  font-size: var(--font-size-body);
  overflow-wrap: anywhere;
}

.delivery-action-menu-body .delivery-job-actions {
  display: grid;
  min-width: 0;
  max-width: none;
  gap: 10px;
}

.delivery-menu-item.is-disabled .small-button {
  opacity: 0.55;
}

.delivery-action-menu-body .delivery-tip-resolution {
  display: grid;
  gap: 8px;
}

.delivery-test-preset-option {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: 8px;
  color: var(--color-text-primary);
}

.delivery-test-preset-option input {
  width: 18px;
  height: 18px;
  margin: 0;
}
.delivery-provider-balance-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.delivery-balance-chip {
  display: inline-flex;
  min-height: 32px;
  padding: 4px 9px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-border-inverse);
  border-radius: 6px;
  background: var(--color-bg-inverse-soft);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-caption);
  white-space: nowrap;
}

button.delivery-balance-chip {
  font-family: inherit;
}

.delivery-balance-chip.is-clickable {
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.delivery-balance-chip.is-clickable:hover,
.delivery-balance-chip.is-clickable:focus-visible {
  border-color: var(--color-accent);
  transform: translateY(-1px);
  outline: none;
}

.delivery-balance-chip strong {
  color: var(--color-text-inverse);
  font-size: var(--font-size-body-sm);
}

.delivery-balance-chip.is-warning {
  border-color: var(--color-state-warning);
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
}

.delivery-balance-chip.is-warning strong {
  color: var(--color-state-warning);
}

.delivery-balance-warning {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.delivery-balance-chip.is-unavailable {
  opacity: 0.72;
}

.delivery-balance-loading,
.delivery-balance-updated {
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-caption);
  white-space: nowrap;
}

.delivery-balance-loading.is-error {
  color: var(--color-state-warning-soft);
}

/* ---- styles/71-delivery-dialogs.css ---- */
.delivery-reschedule-panel {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  padding: 18px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.delivery-reschedule-panel > .modal-head {
  gap: 12px;
  margin-bottom: 14px;
}

.delivery-reschedule-panel > .modal-actions {
  margin-top: 14px;
}

.delivery-reschedule-body {
  display: grid;
  gap: 16px;
}

.delivery-reschedule-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}

.delivery-reschedule-summary > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 9px;
  background: var(--color-bg-surface);
}

.delivery-reschedule-summary > .delivery-reschedule-ready {
  grid-column: 1 / -1;
}

.delivery-reschedule-summary dt {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}

.delivery-reschedule-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: var(--font-weight-semibold);
}

.delivery-reschedule-note {
  margin: 0;
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--color-state-warning-soft);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.delivery-tip-modal-panel {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
  max-height: min(88vh, 680px);
  padding: 18px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.delivery-tip-modal-panel > .modal-head {
  gap: 12px;
  margin-bottom: 14px;
}

.delivery-tip-modal-panel > .modal-actions {
  margin-top: 14px;
}

.delivery-tip-modal-body {
  display: grid;
  gap: 16px;
}

.delivery-tip-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}

.delivery-tip-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--color-border-default);
  border-radius: 9px;
  background: var(--color-bg-surface);
}

.delivery-tip-summary dt {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}

.delivery-tip-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: var(--font-weight-semibold);
}

.delivery-tip-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.delivery-tip-options legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.delivery-tip-options label {
  cursor: pointer;
}

.delivery-tip-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.delivery-tip-options span {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
  font-weight: var(--font-weight-semibold);
}

.delivery-tip-options input:checked + span {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
  color: var(--color-accent);
}

.delivery-tip-options input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.delivery-tip-options input:disabled + span {
  cursor: wait;
  opacity: 0.58;
}

.delivery-tip-note {
  margin: 0;
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--color-state-warning-soft);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.delivery-backoffice-editor,
.delivery-backoffice-account-list {
  display: grid;
  gap: 12px;
}

.delivery-backoffice-modal-list {
  display: grid;
  min-height: 0;
  gap: 10px;
  overflow: auto;
  padding-right: 3px;
}

.delivery-backoffice-toolbar {
  display: flex;
  max-width: 260px;
  margin-bottom: 12px;
}

.delivery-backoffice-toolbar .field {
  width: 100%;
}

.delivery-backoffice-account-editor {
  padding: 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 9px;
  background: var(--color-bg-surface);
}

.delivery-backoffice-modal-account {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(0, 3fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 9px;
  background: var(--color-bg-surface);
}

.delivery-backoffice-account-editor-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.delivery-backoffice-account-editor-head strong {
  min-width: 0;
  flex: 1;
}

.delivery-backoffice-modal-account-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.delivery-backoffice-modal-account-identity strong {
  overflow-wrap: anywhere;
}

.delivery-backoffice-modal-account-identity span {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}

.delivery-backoffice-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 12px;
}

.delivery-backoffice-url-field {
  grid-column: 1 / -1;
}

.delivery-backoffice-modal-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  overflow: hidden;
  padding: 20px;
}

.delivery-backoffice-modal-head {
  align-items: center;
  margin-bottom: 14px;
}

.delivery-backoffice-account-details {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.delivery-backoffice-account-details div {
  min-width: 0;
}

.delivery-backoffice-account-details dt {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}

.delivery-backoffice-account-details dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

.delivery-backoffice-copy-value,
.delivery-backoffice-empty-value {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  text-align: left;
}

.delivery-backoffice-copy-value {
  cursor: pointer;
}

.delivery-backoffice-copy-value:hover,
.delivery-backoffice-copy-value:focus-visible {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.delivery-backoffice-copy-value small {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
  white-space: nowrap;
}

.delivery-backoffice-value-text {
  overflow-wrap: anywhere;
}

.delivery-backoffice-password-value.is-revealed .delivery-backoffice-value-text {
  font-variant-numeric: tabular-nums;
}

.delivery-backoffice-empty-value {
  color: var(--color-text-tertiary);
}

.delivery-backoffice-open-button {
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 900px) {
  #deliveryTab > .section-head:first-child {
    flex-wrap: wrap;
  }

  #deliveryTab > .section-head:first-child > .workspace-refresh-actions {
    flex-wrap: wrap;
  }

  .delivery-balance-warning,
  .delivery-balance-updated {
    display: none;
  }

  .delivery-backoffice-account-grid {
    grid-template-columns: 1fr;
  }

  .delivery-backoffice-modal-account {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .delivery-backoffice-account-details {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 680px) {
  .delivery-reschedule-panel,
  .delivery-tip-modal-panel {
    width: min(100%, calc(100vw - 20px));
  }

  .delivery-reschedule-summary {
    grid-template-columns: 1fr;
  }

  .delivery-tip-summary {
    grid-template-columns: 1fr;
  }

  .delivery-tip-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .delivery-backoffice-modal-panel {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    padding: 14px;
  }

  .delivery-backoffice-account-details {
    grid-template-columns: 1fr;
  }

  .delivery-backoffice-copy-value,
  .delivery-backoffice-empty-value {
    min-height: 42px;
  }
}

/* ---- styles/72-pagination.css ---- */
/* Empty table states and pagination controls. */
.empty-cell {
  height: 88px;
  color: var(--color-text-muted) !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.page-number-pager {
  flex-wrap: wrap;
}

.page-button {
  min-width: 34px;
  height: var(--control-height-compact);
  padding: 0 9px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.page-button.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

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

#ordersPageText {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

/* ---- styles/72-verification.css ---- */
/* Today's orders workspace and secondary verification lookup. */
.verification-lookup-panel,
.verification-result-panel,
.verification-queue-panel {
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
  box-shadow: 0 10px 28px var(--color-shadow);
}

.verification-lookup-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(440px, 0.9fr);
  align-items: center;
  gap: 28px;
  padding: 18px 20px;
}

.verification-lookup-copy h2,
.verification-section-head h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-semibold);
}

.verification-lookup-copy p,
.verification-section-head p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.verification-lookup-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
}

.verification-lookup-controls .text-input,
.verification-lookup-controls .primary-button {
  height: 44px;
}

.verification-result-panel,
.verification-queue-panel {
  margin-top: 16px;
  overflow: hidden;
}

.verification-queue-panel {
  border-radius: 12px;
}

.verification-result-panel {
  border-color: var(--color-accent);
}

.verification-result-close {
  flex: 0 0 auto;
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}

.verification-result-close:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-surface-muted);
  color: var(--color-text-primary);
}

.verification-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-default);
}

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

.verification-count {
  display: inline-grid;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.verification-order-list {
  display: grid;
}

.today-order-filter-bar {
  display: grid;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border-default);
  border-radius: 11px 11px 0 0;
  background: var(--color-bg-subtle);
}

.today-order-filter-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  min-height: 38px;
  padding: 3px 12px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px dashed var(--color-border-default);
}

.today-order-filter-row:last-child {
  border-bottom: 0;
}

.today-order-filter-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.today-order-filter-options {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.today-order-filter-option {
  display: inline-flex;
  min-height: 28px;
  padding: 3px 9px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.today-order-filter-option:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.today-order-filter-option:not(.is-next-cycle) + .today-order-filter-option.is-next-cycle {
  position: relative;
  margin-left: 24px;
}

.today-order-filter-option:not(.is-next-cycle) + .today-order-filter-option.is-next-cycle::before {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: -15px;
  width: 2px;
  border-radius: 999px;
  background: var(--color-border-strong);
  content: "";
}

.today-order-filter-option.is-next-cycle {
  border-style: dashed;
}

.today-order-filter-option.is-next-cycle.is-active {
  border-style: solid;
}

.today-order-filter-option.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.today-order-filter-option strong {
  min-width: 18px;
  color: inherit;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.today-order-filter-result {
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.verification-order-card {
  display: grid;
  grid-template-columns: 112px minmax(160px, 1.2fr) minmax(170px, 1fr) minmax(150px, 0.9fr) 90px 112px;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
  transition: background 140ms ease;
}

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

.verification-order-card:hover {
  background: var(--color-bg-subtle);
}

.verification-result-panel .verification-order-card {
  background: var(--color-accent-soft);
}

.verification-code-block,
.verification-card-column,
.verification-card-actions {
  min-width: 0;
}

.verification-code-block {
  display: grid;
  gap: 1px;
}

.verification-code-block span,
.verification-card-column > span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.verification-code-block strong {
  color: var(--color-accent-strong);
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
}

.verification-code-block.is-delivery strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-body-large);
  letter-spacing: 0;
}

.verification-code-block small,
.verification-card-column small,
.verification-card-meta {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verification-card-column {
  display: grid;
  gap: 4px;
}

.verification-card-column strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verification-contact-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.verification-contact-heading strong {
  min-width: 0;
}

.verification-card-amount strong {
  font-size: var(--font-size-body-large);
}

.verification-card-actions {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}

.verification-card-actions .status-pill[data-status="unused"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.verification-card-actions .status-pill[data-status="used"] {
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

.verification-card-actions .status-pill[data-status="waiting_pickup"],
.verification-card-actions .status-pill[data-status="delivery_pending"],
.verification-card-actions .status-pill[data-status="pending_payment"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.verification-card-actions .status-pill[data-status="delivering"] {
  background: var(--color-bg-surface-muted);
  color: var(--color-text-primary);
}

.verification-card-actions .status-pill[data-status="completed"] {
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

.verification-card-actions .status-pill[data-status="attention"] {
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
}

.verification-action-button {
  width: 100%;
  height: var(--control-height-compact);
  padding: 0 10px;
  font-size: var(--font-size-caption);
}

.verification-empty-state {
  display: grid;
  min-height: 150px;
  padding: 32px;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  text-align: center;
}

.verification-empty-state strong {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.verification-empty-state span {
  font-size: var(--font-size-caption);
}

.weekly-delivery-panel {
  box-sizing: border-box;
  display: flex;
  width: min(980px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
  padding: 18px;
  overflow: hidden;
  flex-direction: column;
  scrollbar-gutter: stable;
}

.weekly-delivery-panel > .modal-head {
  gap: 12px;
  margin-bottom: 14px;
}

.weekly-delivery-panel > .modal-head p {
  margin-top: 4px;
  font-size: var(--font-size-caption);
}

.weekly-delivery-panel > .modal-actions {
  margin-top: 12px;
}

.weekly-delivery-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

.weekly-delivery-date-tabs {
  display: flex;
  padding: 10px;
  align-items: stretch;
  gap: 8px;
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 9px;
  background: var(--color-bg-subtle);
  scrollbar-gutter: stable;
}

.weekly-delivery-date-button {
  display: grid;
  width: 106px;
  min-width: 106px;
  min-height: 58px;
  flex: 0 0 106px;
  padding: 8px 10px;
  box-sizing: border-box;
  place-items: center;
  gap: 2px;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font: inherit;
  cursor: pointer;
}

.weekly-delivery-date-divider {
  width: 2px;
  min-width: 2px;
  flex: 0 0 2px;
  margin: 4px 2px;
  border-radius: 999px;
  background: var(--color-border-strong);
}

.weekly-delivery-date-button:hover,
.weekly-delivery-date-button:focus-visible {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.weekly-delivery-date-button.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.weekly-delivery-date-button span {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.weekly-delivery-date-button strong {
  font-size: var(--font-size-body);
  font-variant-numeric: tabular-nums;
}

.weekly-delivery-list {
  min-height: 180px;
  overflow: auto;
  scrollbar-gutter: stable;
  border: 1px solid var(--color-border-default);
  border-radius: 9px;
  background: var(--color-bg-surface);
}

.weekly-delivery-list-heading {
  display: flex;
  min-height: 46px;
  padding: 10px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-subtle);
}

.weekly-delivery-list-heading strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}

.weekly-delivery-list-heading span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.weekly-delivery-order-card {
  display: grid;
  grid-template-columns: 150px 240px minmax(220px, 1fr) minmax(170px, 0.9fr);
  min-height: 88px;
  padding: 12px 14px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--color-border-default);
}

.weekly-delivery-order-card:last-child {
  border-bottom: 0;
}

.weekly-delivery-order-time,
.weekly-delivery-countdown-column,
.weekly-delivery-order-detail,
.weekly-delivery-order-contact {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.weekly-delivery-order-card span,
.weekly-delivery-order-card small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-delivery-order-card strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-delivery-countdown-column strong {
  color: var(--color-accent-strong);
  font-size: var(--font-size-body-large);
  font-variant-numeric: tabular-nums;
}

.weekly-delivery-countdown-column small {
  white-space: normal;
}

.weekly-delivery-countdown-column strong[data-countdown-state="near"],
.weekly-delivery-countdown-column strong[data-countdown-state="active"] {
  color: var(--color-state-warning);
}

.weekly-delivery-countdown-column strong[data-countdown-state="completed"] {
  color: var(--color-state-success);
}

.weekly-delivery-countdown-column strong[data-countdown-state="past"],
.weekly-delivery-countdown-column strong[data-countdown-state="unknown"] {
  color: var(--color-text-secondary);
}

@media (max-width: 1240px) {
  .verification-lookup-panel {
    grid-template-columns: minmax(180px, 0.7fr) minmax(420px, 1fr);
  }

  .verification-order-card {
    grid-template-columns: 100px minmax(140px, 1fr) minmax(160px, 1fr) minmax(130px, 0.8fr) 82px 104px;
    gap: 12px;
  }

  .today-order-filter-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .today-order-filter-result {
    display: none;
  }

  .weekly-delivery-order-card {
    grid-template-columns: 140px 220px minmax(200px, 1fr) minmax(150px, 0.8fr);
    gap: 10px;
  }
}

@media (max-width: 820px) {
  .weekly-delivery-panel {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    padding: 14px;
  }

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

  .weekly-delivery-list-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* ---- styles/73-alerts.css ---- */
/* Durable business alert center, recipients, and external notification state. */
.alert-center-page {
  display: grid;
  gap: 10px;
}

.monitor-view-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  align-items: stretch;
  gap: 6px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface-muted);
}

.monitor-view-tabs .delivery-view-tab {
  min-width: 180px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-bg-surface-strong);
  color: var(--color-text-primary);
  box-shadow: 0 1px 2px var(--color-shadow);
  font-weight: var(--font-weight-bold);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.monitor-view-tabs .delivery-view-tab:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  transform: translateY(-1px);
}

.monitor-view-tabs .delivery-view-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.monitor-view-tabs .delivery-view-tab.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

.monitor-view-tabs .delivery-view-tab.is-active::after {
  display: none;
}

.monitor-rules-page,
.monitor-incidents-page {
  display: grid;
  gap: 10px;
}

.monitor-incidents-page {
  gap: 8px;
}

.monitor-rules-intro h2 {
  margin: 0 0 6px;
  font-size: var(--font-size-body-large);
}

.monitor-rules-intro p {
  margin: 0;
  color: var(--color-text-secondary);
}

.monitor-rules-table {
  min-width: 1120px;
}

.monitor-rules-table td {
  vertical-align: top;
  line-height: var(--line-height-normal);
}

.monitor-source-pill {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--color-text-secondary);
  background: var(--color-bg-surface-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.alert-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}

.alert-summary-card {
  display: flex;
  min-height: 46px;
  padding: 7px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.alert-summary-card span {
  color: var(--color-text-secondary);
}

.alert-summary-card strong {
  font-size: var(--font-size-heading);
  line-height: var(--line-height-tight);
}

.alert-summary-card.is-critical {
  border-color: var(--color-state-danger);
  background: var(--color-state-danger-soft);
}

.alert-summary-card.is-critical strong {
  color: var(--color-state-danger);
}

.alert-channel-panel {
  display: grid;
  gap: 14px;
}

.alert-channel-head {
  margin: 0;
}

.alert-channel-head h2 {
  margin: 0 0 4px;
  font-size: var(--font-size-body-large);
}

.alert-channel-head p {
  margin: 0;
  color: var(--color-text-secondary);
}

.alert-channel-head .status-pill.is-ready {
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

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

.alert-recipient-card {
  display: flex;
  padding: 11px 13px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-bg-subtle);
}

.alert-recipient-card div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-recipient-card span {
  color: var(--color-text-secondary);
}

.alert-recipient-form {
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto;
  align-items: end;
  gap: 12px;
}

.alert-recipient-actions {
  display: flex;
  gap: 8px;
}

.alert-filter-grid {
  margin: 0;
  width: min(260px, 100%);
}

.alert-filter-grid .compact-field {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.alert-filter-grid .compact-field > span {
  margin: 0;
  white-space: nowrap;
}

.alert-filter-grid .select-input {
  height: 34px;
}

.alert-filter-row {
  display: flex;
  padding: 7px 9px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-strong);
}

.alert-retention-note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  text-align: right;
}

.monitor-incidents-page .table-wrap {
  margin-top: 0;
}

.alert-center-table {
  min-width: 1080px;
  table-layout: fixed;
}

.alert-center-table th,
.alert-center-table td {
  padding: 7px 8px;
}

.alert-center-table td {
  vertical-align: top;
  line-height: var(--line-height-normal);
}

.alert-center-table th:nth-child(1) { width: 64px; }
.alert-center-table th:nth-child(3) { width: 128px; }
.alert-center-table th:nth-child(4) { width: 132px; }
.alert-center-table th:nth-child(5) { width: 188px; }
.alert-center-table th:nth-child(6) { width: 108px; }
.alert-center-table th:nth-child(7) { width: 164px; }

.alert-center-table td:nth-child(1),
.alert-center-table td:nth-child(4),
.alert-center-table td:nth-child(6),
.alert-center-table td:nth-child(7) {
  white-space: nowrap;
}

.alert-center-table .alert-message-cell strong {
  display: block;
  line-height: var(--line-height-tight);
}

.alert-center-table .alert-message-cell .muted {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: var(--line-height-normal);
}

.alert-center-table .alert-source-cell {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.alert-center-table .alert-notification-cell {
  overflow: hidden;
}

.alert-center-table .alert-notification-state {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.alert-center-table .alert-status-cell .muted {
  margin-top: 2px;
}

.alert-center-table .row-actions {
  gap: 4px;
  flex-wrap: wrap;
}

.alert-center-table .small-button {
  min-height: 28px;
  padding: 3px 7px;
}

.alert-level,
.alert-notification-state {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.alert-level.is-critical,
.alert-notification-state.is-failed {
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
}

.alert-level.is-warning,
.alert-notification-state.is-blocked,
.alert-notification-state.is-pending {
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
}

.alert-notification-state.is-sent {
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

.alert-notification-state.is-none,
.alert-notification-state.is-skipped {
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
}

@media (max-width: 960px) {
  .alert-summary-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .alert-recipient-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .alert-summary-grid,
  .alert-recipient-form {
    grid-template-columns: 1fr;
  }

  .monitor-view-tabs {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .alert-filter-row {
    align-items: stretch;
    flex-direction: column;
  }

  .alert-retention-note {
    margin: 0;
    text-align: left;
  }
}

/* ---- styles/74-analytics.css ---- */
/* WeChat mini program visit analytics workspace. */
.analytics-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analytics-section-head {
  padding-top: 16px;
  padding-bottom: 16px;
}

.analytics-subnav {
  display: flex;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border-default);
  gap: 18px;
}

.analytics-subnav-button {
  position: relative;
  padding: 0 2px 10px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.analytics-subnav-button.is-active {
  color: var(--color-text-primary);
}

.analytics-subnav-button.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--color-accent);
  content: "";
}

.analytics-period-switch,
.analytics-metric-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface-muted);
  gap: 3px;
}

.analytics-period-button,
.analytics-metric-button {
  height: var(--control-height-compact);
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.analytics-period-button.is-active,
.analytics-metric-button.is-active {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px var(--color-shadow);
}

.analytics-sync-status {
  margin-bottom: 10px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.analytics-summary-card {
  display: grid;
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
  box-shadow: 0 8px 22px var(--color-shadow);
  gap: 4px;
}

.analytics-summary-card > span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.analytics-summary-card > strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.analytics-summary-card > small {
  align-self: end;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.analytics-summary-card.is-accent {
  border-top: 3px solid var(--color-accent);
}

.analytics-chart-panel,
.analytics-table-panel {
  padding: 16px;
  overflow: hidden;
}

.analytics-table-panel {
  margin-top: 12px;
}

.analytics-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.analytics-retention-panel,
.analytics-source-panel {
  min-height: 208px;
  padding: 16px;
}

.analytics-retention-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.analytics-retention-grid article {
  display: grid;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  gap: 4px;
}

.analytics-retention-grid span,
.analytics-retention-grid small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.analytics-retention-grid strong {
  font-size: var(--font-size-heading-lg);
  line-height: var(--line-height-tight);
}

.analytics-retention-grid small {
  align-self: end;
  color: var(--color-text-muted);
}

.analytics-repurchase-cohort {
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-retention-assist {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  gap: 12px;
}

.analytics-retention-assist > span:first-child {
  margin-right: auto;
  color: var(--color-text-muted);
}

.analytics-retention-assist strong {
  color: var(--color-text-primary);
  font-size: inherit;
}

.analytics-source-list {
  display: grid;
  max-height: 150px;
  margin-top: 10px;
  padding-right: 4px;
  overflow-y: auto;
  gap: 8px;
}

.analytics-source-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1.2fr);
  align-items: center;
  gap: 12px;
}

.analytics-source-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.analytics-source-copy strong {
  overflow: hidden;
  font-size: var(--font-size-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-source-copy span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.analytics-source-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-bg-surface-muted);
}

.analytics-source-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

.analytics-compact-empty {
  min-height: 160px;
}

.analytics-pages-table {
  min-width: 760px;
}

.analytics-page-path {
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
  word-break: break-all;
}

.analytics-chart-head,
.analytics-table-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.analytics-chart-head h2,
.analytics-table-title h2 {
  margin: 0;
  font-size: var(--font-size-heading-sm);
}

.analytics-chart-head p,
.analytics-table-title span {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.analytics-chart {
  width: 100%;
  min-height: 280px;
  margin-top: 8px;
}

.analytics-chart svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 270px;
}

.analytics-chart-grid {
  stroke: var(--color-border-default);
  stroke-width: 1;
}

.analytics-chart-axis-label {
  fill: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.analytics-chart-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.analytics-chart-point {
  fill: var(--color-bg-surface);
  stroke: var(--color-accent);
  stroke-width: 3;
}

.analytics-chart-point-group {
  outline: none;
}

.analytics-chart-point-hit {
  fill: transparent;
  cursor: pointer;
}

.analytics-chart-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.analytics-chart-point-group:hover .analytics-chart-tooltip,
.analytics-chart-point-group:focus .analytics-chart-tooltip {
  opacity: 1;
}

.analytics-chart-tooltip rect {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-default);
  stroke-width: 1;
  filter: drop-shadow(0 4px 8px var(--color-shadow));
}

.analytics-chart-tooltip-date {
  fill: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.analytics-chart-tooltip-value {
  fill: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.analytics-empty {
  display: grid;
  min-height: 330px;
  place-items: center;
  color: var(--color-text-muted);
}

.analytics-table-title {
  margin-bottom: 10px;
}

.analytics-table {
  min-width: 1180px;
}

.analytics-table-scroll {
  overflow: auto;
}

.analytics-pages-scroll {
  max-height: 250px;
}

.analytics-daily-scroll {
  max-height: 340px;
}

.analytics-table-scroll thead th {
  position: sticky;
  z-index: var(--z-workspace);
  top: 0;
  background: var(--color-bg-surface-muted);
}

.analytics-page .orders-table th,
.analytics-page .orders-table td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.analytics-customers-view {
  display: grid;
  gap: 12px;
}

.analytics-customer-filter-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 20px;
}

.analytics-customer-filter-panel h2,
.analytics-customers-panel h2 {
  margin: 0;
  font-size: var(--font-size-heading-sm);
}

.analytics-customer-filter-panel p {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.analytics-customer-filter-form {
  display: grid;
  grid-template-columns: auto 138px auto 92px auto minmax(156px, 210px) auto;
  align-items: center;
  gap: 8px;
}

.analytics-customer-filter-form label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.analytics-customer-filter-form .text-input {
  height: var(--control-height-compact);
  text-align: center;
}

.analytics-customer-filter-form .select-input {
  height: var(--control-height-compact);
}

.analytics-customer-filter-form .primary-button {
  height: var(--control-height-compact);
  padding: 0 14px;
}

.analytics-customers-panel {
  padding: 16px;
  overflow: hidden;
}

.analytics-customer-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.analytics-customer-summary-grid article {
  display: grid;
  min-height: 68px;
  padding: 10px 14px;
  align-content: center;
  gap: 3px;
}

.analytics-customer-summary-grid article + article {
  border-left: 1px solid var(--color-border-default);
}

.analytics-customer-summary-grid span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.analytics-customer-summary-grid strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-sm);
}

.analytics-customers-scroll {
  min-height: 132px;
  max-height: 520px;
}

.analytics-customers-table {
  min-width: 820px;
}

.analytics-customer-identity {
  display: grid;
  gap: 2px;
}

.analytics-customer-identity strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}

.analytics-customer-identity span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

@media (max-width: 1240px) {
  .analytics-insights-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .analytics-customer-filter-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-customer-filter-form {
    grid-template-columns: auto minmax(120px, 1fr) auto 88px;
  }

  .analytics-customer-filter-form .analytics-customer-search,
  .analytics-customer-filter-form .analytics-customer-search + .primary-button {
    grid-column: span 1;
  }

  .analytics-customer-summary-grid {
    grid-template-columns: 1fr;
  }

  .analytics-customer-summary-grid article + article {
    border-top: 1px solid var(--color-border-default);
    border-left: 0;
  }
}

/* ---- styles/75-developer-tools.css ---- */
/* Administrator-only developer tools workspace. */
.developer-entry-card > p {
  margin: auto 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.developer-tools-page {
  max-width: 1120px;
}

.developer-tool-card {
  padding: 24px;
}

.developer-tool-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.developer-tool-head h2,
.developer-expansion-card h2 {
  margin: 5px 0 8px;
  font-size: var(--font-size-heading-sm);
}

.developer-tool-head p,
.developer-expansion-card p {
  max-width: 760px;
  margin: 0;
  color: var(--color-text-secondary);
}

.developer-tool-eyebrow,
.developer-expansion-card > span {
  color: var(--color-accent);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.developer-status-pill {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid var(--color-state-success);
  border-radius: 999px;
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.developer-status-pill.is-disabled {
  border-color: var(--color-state-danger);
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
}

.developer-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.developer-status-grid article {
  display: grid;
  min-height: 110px;
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  gap: 7px;
}

.developer-status-grid span,
.developer-status-grid small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.developer-status-grid strong {
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-semibold);
}

.developer-control-panel {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(280px, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-default);
}

.developer-risk-confirmation {
  display: flex;
  align-items: flex-start;
  color: var(--color-text-secondary);
  gap: 9px;
}

.developer-risk-confirmation input {
  margin-top: 3px;
}

.developer-control-actions {
  display: flex;
  gap: 8px;
}

.developer-control-actions button {
  min-height: var(--control-height-default);
  padding: 0 16px;
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
  background: var(--color-bg-surface);
  cursor: pointer;
}

.developer-control-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.developer-expansion-card {
  margin-top: 16px;
  padding: 22px 24px;
  border-style: dashed;
}

.order-load-drill-controls {
  grid-template-columns: minmax(150px, 190px) minmax(170px, 210px) minmax(260px, 1fr) auto;
}

.order-load-drill-credentials {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.order-load-drill-credentials > div {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.order-load-drill-credentials strong,
.order-load-drill-credentials p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.order-load-drill-credentials code {
  overflow: auto;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.order-load-drill-credentials p {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 900px) {
  .developer-status-grid,
  .developer-control-panel,
  .order-load-drill-credentials {
    grid-template-columns: 1fr;
  }

  .developer-tool-head {
    flex-direction: column;
  }
}

/* ---- styles/76-system-status.css ---- */
/* Global runtime, transfer traffic, and cost workspace. */
.system-status-entry-card > p {
  margin: auto 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.system-status-page {
  max-width: 1320px;
}

.system-status-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.system-status-updated {
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-caption);
}

.system-status-subnav {
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 22px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid var(--color-border-default);
  border-radius: 9px;
  background: var(--color-bg-subtle);
  gap: 4px;
}

.system-status-subnav button {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.system-status-subnav button.is-active {
  background: var(--color-bg-surface);
  color: var(--color-accent);
  box-shadow: 0 4px 12px var(--color-shadow);
}

.system-overview-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding: 22px 24px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
  box-shadow: 0 10px 28px var(--color-shadow);
}

.system-overview-strip > div {
  display: grid;
  gap: 5px;
}

.system-overview-label,
.system-section-eyebrow {
  color: var(--color-accent);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.system-overview-strip strong {
  font-size: var(--font-size-heading-sm);
}

.system-overview-strip p {
  margin: 0;
  color: var(--color-text-secondary);
}

.system-health-pill,
.system-source-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.system-health-pill.is-healthy {
  border-color: var(--color-state-success);
  background: var(--color-state-success-soft);
  color: var(--color-state-success);
}

.system-health-pill.is-warning {
  border-color: var(--color-state-warning);
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
}

.system-health-pill.is-critical {
  border-color: var(--color-state-danger);
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
}

.system-metric-section {
  margin-top: 26px;
}

.system-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.system-section-title h2 {
  margin: 4px 0 0;
  font-size: var(--font-size-heading-sm);
}

.system-monitor-notice {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-state-warning);
  border-radius: 8px;
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
}

.system-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.system-metric-card {
  display: grid;
  min-height: 118px;
  padding: 17px;
  border: 1px solid var(--color-border-default);
  border-radius: 9px;
  background: var(--color-bg-surface);
  box-shadow: 0 8px 22px var(--color-shadow);
  gap: 7px;
}

.system-metric-card.is-primary {
  border-top: 3px solid var(--color-accent);
  padding-top: 15px;
}

.system-metric-card > span,
.system-metric-card > small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-metric-card > strong {
  align-self: center;
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-semibold);
}

.system-traffic-chart-panel,
.system-route-panel {
  margin-top: 12px;
  padding: 18px;
}

.system-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.system-chart-head > div {
  display: grid;
  gap: 3px;
}

.system-chart-head span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-traffic-chart {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  min-height: 150px;
  padding: 16px 8px 0;
  border-top: 1px solid var(--color-border-default);
  gap: 10px;
}

.system-traffic-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 110px;
  padding-right: 2px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-tight);
  text-align: right;
  white-space: nowrap;
}

.system-traffic-plot {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  gap: 4px;
}

.system-traffic-plot::before {
  position: absolute;
  z-index: var(--z-workspace);
  top: 0;
  right: 0;
  left: 0;
  height: 109px;
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  background: linear-gradient(
    to bottom,
    transparent calc(50% - 0.5px),
    var(--color-border-default) calc(50% - 0.5px),
    var(--color-border-default) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  content: "";
  pointer-events: none;
}

.system-traffic-column {
  position: relative;
  z-index: var(--z-workspace);
  display: grid;
  flex: 1 1 0;
  grid-template-rows: 110px 20px;
  align-items: end;
  min-width: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.system-traffic-bar {
  display: block;
  width: 100%;
  height: var(--traffic-height);
  min-height: 1px;
  border-radius: 3px 3px 0 0;
  background: var(--color-accent);
  opacity: 0.82;
  transition: opacity 140ms ease, transform 140ms ease;
}

.system-traffic-column > small {
  overflow: visible;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  white-space: nowrap;
}

.system-traffic-column:hover .system-traffic-bar,
.system-traffic-column:focus-visible .system-traffic-bar {
  opacity: 1;
  transform: scaleX(0.9);
}

.system-traffic-column:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.system-traffic-tooltip {
  position: absolute;
  z-index: var(--z-sticky);
  top: -58px;
  left: 50%;
  display: grid;
  min-width: 154px;
  padding: 9px 11px;
  border-radius: 7px;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  box-shadow: 0 8px 24px var(--color-shadow);
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

.system-traffic-tooltip strong {
  font-size: var(--font-size-caption);
}

.system-traffic-tooltip > span {
  color: var(--color-text-inverse);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.system-traffic-tooltip small {
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-caption);
}

.system-traffic-column:hover .system-traffic-tooltip,
.system-traffic-column:focus-visible .system-traffic-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.system-traffic-column:first-child .system-traffic-tooltip {
  left: 0;
  transform: translate(0, 4px);
}

.system-traffic-column:first-child:hover .system-traffic-tooltip,
.system-traffic-column:first-child:focus-visible .system-traffic-tooltip {
  transform: translate(0, 0);
}

.system-traffic-column:last-child .system-traffic-tooltip {
  right: 0;
  left: auto;
  transform: translate(0, 4px);
}

.system-traffic-column:last-child:hover .system-traffic-tooltip,
.system-traffic-column:last-child:focus-visible .system-traffic-tooltip {
  transform: translate(0, 0);
}

.system-chart-empty {
  display: grid;
  grid-column: 1 / -1;
  width: 100%;
  place-items: center;
  color: var(--color-text-muted);
}

.system-footnote {
  margin: 10px 2px 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-route-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.system-route-breakdown > span {
  color: var(--color-text-muted);
}

.system-route-breakdown article,
.system-route-breakdown article > div {
  display: grid;
  gap: 5px;
}

.system-route-breakdown article > div {
  grid-template-columns: 1fr auto;
}

.system-route-breakdown article span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-route-meter {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-bg-surface-muted);
}

.system-route-meter i {
  display: block;
  width: var(--route-width);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

.system-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.system-health-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.system-health-card > div {
  display: grid;
  gap: 2px;
}

.system-health-card small,
.system-health-card > span:last-child {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-health-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.system-history-panel {
  padding: 18px;
}

.system-peak-status-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  padding: 18px;
}

.system-peak-status-panel > div {
  display: grid;
  gap: 4px;
}

.system-peak-status-panel strong {
  font-size: var(--font-size-heading-sm);
}

.system-peak-status-panel p {
  margin: 0;
  color: var(--color-text-secondary);
}

.system-peak-settings {
  margin-top: 12px;
  overflow: hidden;
}

.system-peak-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.system-peak-settings > summary::-webkit-details-marker {
  display: none;
}

.system-peak-settings > summary > span:first-child {
  display: grid;
  gap: 3px;
}

.system-peak-settings > summary small,
.system-peak-settings > summary > span:last-child {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-peak-config-panel {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 140px 140px auto;
  align-items: end;
  gap: 14px;
  padding: 18px;
  border-top: 1px solid var(--color-border-default);
}

.system-peak-config-copy {
  display: grid;
  gap: 4px;
}

.system-peak-config-copy p {
  margin: 0;
  color: var(--color-text-secondary);
}

.system-peak-config-panel label {
  display: grid;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-peak-config-panel input,
.system-peak-config-panel select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.system-weekday-selector {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.system-weekday-selector legend {
  margin-bottom: 7px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-weekday-selector label {
  position: relative;
  display: block;
}

.system-weekday-selector input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.system-weekday-selector span {
  display: inline-flex;
  min-width: 56px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.system-weekday-selector input:checked + span {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 9%, var(--color-bg-surface));
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

.system-history-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.system-history-controls {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.system-history-advanced {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-history-advanced summary {
  min-height: 38px;
  padding: 10px 0;
  cursor: pointer;
}

.system-history-advanced > div {
  display: flex;
  gap: 10px;
  padding-top: 8px;
}

.system-history-advanced label {
  display: grid;
  gap: 5px;
}

.system-history-controls label {
  display: grid;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-history-controls input {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.system-history-summary {
  margin-top: 16px;
}

.system-risk-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  padding: 18px;
}

.system-risk-intro > div {
  display: grid;
  gap: 4px;
}

.system-risk-intro p {
  max-width: 860px;
  margin: 0;
  color: var(--color-text-secondary);
}

.system-risk-summary {
  margin-top: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.system-risk-list {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-default);
}

.system-ingress-heading-actions,
.system-ingress-chart-meta,
.system-ingress-disclosures {
  display: flex;
  align-items: center;
  gap: 8px;
}

.system-ingress-disclosures {
  flex-wrap: wrap;
  margin-top: 8px;
}

.system-ingress-disclosures span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.system-ingress-empty {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.system-ingress-summary,
.system-ingress-ratios {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.system-ingress-ratio-section,
.system-ingress-trend-panel,
.system-ingress-detail-grid {
  margin-top: 18px;
}

.system-ingress-chart-meta {
  flex-wrap: wrap;
  justify-content: flex-end;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-history-line.is-ingress-source {
  stroke: var(--color-state-warning);
}

.system-ingress-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
}

.system-ingress-detail-grid .system-history-panel {
  min-width: 0;
}

.system-ingress-detail-grid .system-history-table {
  min-height: 92px;
}

.system-ingress-detail-grid code {
  color: var(--color-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.system-risk-level {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.system-risk-level.is-high {
  background: var(--color-state-danger-soft);
  color: var(--color-state-danger);
}

.system-risk-level.is-watch {
  background: var(--color-state-warning-soft);
  color: var(--color-state-warning);
}

.system-peak-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-left: 4px solid var(--color-text-muted);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.system-peak-review > div {
  display: grid;
  gap: 3px;
}

.system-peak-review > div > span,
.system-peak-review > span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-peak-review.is-healthy { border-left-color: var(--color-state-success); }
.system-peak-review.is-warning { border-left-color: var(--color-state-warning); }
.system-peak-review.is-critical { border-left-color: var(--color-state-danger); }

.system-peak-review-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.system-peak-review-checks article {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
}

.system-peak-review-checks article small { color: var(--color-text-secondary); }
.system-peak-review-checks article.is-warning { border-color: var(--color-state-warning); }
.system-peak-review-checks article.is-critical { border-color: var(--color-state-danger); }

.system-history-business {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-default);
}

.system-business-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.system-business-grid article {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 7px;
  background: var(--color-bg-subtle);
}

.system-business-grid span { color: var(--color-text-secondary); font-size: var(--font-size-caption); }

.system-redis-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--color-text-secondary);
}

.system-redis-summary strong { color: var(--color-text-primary); }
.system-redis-summary .system-health-dot.is-healthy { background: var(--color-state-success); }
.system-redis-summary .system-health-dot.is-warning { background: var(--color-state-warning); }
.system-redis-summary .system-health-dot.is-critical { background: var(--color-state-danger); }

.system-history-chart-wrap,
.system-history-top-points {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-default);
}

.system-history-chart {
  min-height: 230px;
}

.system-history-chart svg {
  display: block;
  width: 100%;
  min-width: 620px;
}

.system-history-line {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.system-history-line.is-rps {
  stroke: var(--color-accent);
}

.system-history-line.is-p95 {
  stroke: var(--color-state-warning);
}

.system-history-grid-line {
  stroke: var(--color-border-default);
  stroke-width: 1;
}

.system-history-axis-label {
  fill: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.system-history-table {
  margin-top: 10px;
  overflow-x: auto;
}

.system-history-table > span {
  color: var(--color-text-muted);
}

.system-history-table table {
  width: 100%;
  border-collapse: collapse;
}

.system-history-table th,
.system-history-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border-default);
  text-align: left;
  white-space: nowrap;
}

.system-history-table th {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.system-health-card.is-healthy .system-health-dot {
  background: var(--color-state-success);
}

.system-health-card.is-warning .system-health-dot {
  background: var(--color-state-warning);
}

.system-health-card.is-critical .system-health-dot {
  background: var(--color-state-danger);
}

@media (max-width: 1000px) {
  .system-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-peak-config-panel {
    grid-template-columns: 1fr 1fr;
  }

  .system-peak-config-copy,
  .system-weekday-selector {
    grid-column: 1 / -1;
  }

  .system-peak-review-checks,
  .system-business-grid,
  .system-risk-summary,
  .system-ingress-summary,
  .system-ingress-ratios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-ingress-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .system-overview-strip,
  .system-section-title,
  .system-chart-head,
  .system-status-head-actions,
  .system-ingress-heading-actions,
  .system-peak-status-panel,
  .system-risk-intro,
  .system-history-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .system-peak-config-panel {
    grid-template-columns: 1fr;
  }

  .system-peak-config-copy,
  .system-weekday-selector {
    grid-column: auto;
  }

  .system-weekday-selector { flex-wrap: wrap; }

  .system-peak-review-checks,
  .system-business-grid,
  .system-risk-summary,
  .system-ingress-summary,
  .system-ingress-ratios {
    grid-template-columns: 1fr;
  }

  .system-ingress-heading-actions,
  .system-ingress-chart-meta {
    align-items: stretch;
    flex-direction: column;
  }

  .system-metric-grid,
  .system-health-grid,
  .system-route-breakdown {
    grid-template-columns: 1fr;
  }

  .system-traffic-chart {
    grid-template-columns: 64px minmax(420px, 1fr);
    overflow-x: auto;
  }

  .system-history-chart {
    overflow-x: auto;
  }

  .system-traffic-column {
    flex-basis: 18px;
  }
}

/* ---- styles/77-audit-log.css ---- */
/* Administrator audit log filters, table, and detail disclosure. */
.audit-log-page {
  max-width: 1480px;
}

.audit-log-head {
  align-items: flex-end;
}

.audit-log-filters {
  display: grid;
  padding: 20px;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(150px, 0.72fr) minmax(150px, 0.72fr) auto;
  align-items: end;
  gap: 14px;
}

.audit-log-filters label {
  display: grid;
  gap: 7px;
}

.audit-log-filters label > span,
.audit-log-eyebrow {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.audit-log-filters input,
.audit-log-filters .select-input {
  width: 100%;
  height: var(--control-height-default);
}

.audit-log-filter-actions {
  display: flex;
  gap: 8px;
}

.audit-log-filter-actions button {
  height: var(--control-height-default);
  white-space: nowrap;
}

.audit-log-summary,
.audit-log-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.audit-log-summary {
  margin: 18px 0 10px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.audit-log-summary span:first-child {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.audit-log-list-panel {
  padding: 0;
  overflow: hidden;
}

.audit-log-list-head {
  padding: 20px 22px;
  border-bottom: 1px solid var(--color-border-default);
}

.audit-log-list-head h2 {
  margin: 5px 0 0;
}

.audit-log-list-head > span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.audit-log-table-wrap {
  max-height: calc(100vh - 390px);
  overflow: auto;
}

.audit-log-table {
  min-width: 1060px;
}

.audit-log-table th {
  position: sticky;
  z-index: var(--z-workspace);
  top: 0;
  background: var(--color-bg-surface-muted);
}

.audit-log-table td {
  vertical-align: top;
}

.audit-log-table th:first-child,
.audit-log-table td:first-child {
  width: 170px;
}

.audit-log-table th:nth-child(2),
.audit-log-table td:nth-child(2) {
  width: 170px;
}

.audit-log-table th:nth-child(3),
.audit-log-table td:nth-child(3) {
  width: 120px;
}

.audit-log-table th:nth-child(4),
.audit-log-table td:nth-child(4) {
  width: 130px;
}

.audit-log-table th:last-child,
.audit-log-table td:last-child {
  width: 130px;
}

.audit-category-pill,
.audit-scope-pill {
  display: inline-flex;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-surface-muted);
  align-items: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.audit-scope-pill.is-operations {
  border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-surface));
  color: var(--color-success);
}

.audit-scope-pill.is-test {
  border-color: color-mix(in srgb, var(--color-state-warning) 28%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-state-warning) 10%, var(--color-bg-surface));
  color: var(--color-state-warning);
}

.audit-category-pill.is-catalog,
.audit-category-pill.is-orders {
  border-color: var(--color-accent-soft);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.audit-log-action-code {
  margin-top: 4px;
}

.audit-log-detail-summary {
  max-width: 520px;
  margin-top: 8px;
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.audit-log-detail summary {
  color: var(--color-accent-strong);
  cursor: pointer;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.audit-log-detail pre {
  width: min(480px, 42vw);
  max-height: 300px;
  margin: 10px 0 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

#auditLogPager {
  margin: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--color-border-default);
}

.audit-log-page-gap {
  color: var(--color-text-muted);
}

/* ---- styles/78-blacklist.css ---- */
/* Store-scoped customer blacklist management and order shortcut dialog. */
html.blacklist-modal-open,
body.blacklist-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.blacklist-page {
  max-width: 1720px;
  padding-bottom: 12px;
}

.workspace-page.blacklist-page > .section-head:first-child {
  min-height: 44px;
  margin-bottom: 5px;
  padding-block: 5px;
}

.blacklist-head {
  align-items: flex-end;
}

.blacklist-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.blacklist-control-bar {
  display: flex;
  min-height: 40px;
  padding: 4px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  align-items: center;
  background: var(--color-bg-surface);
  box-shadow: 0 4px 14px var(--color-shadow);
  gap: 8px;
}

.blacklist-order-result-actions {
  display: flex;
  gap: 5px;
}

.blacklist-view-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 2px;
  border: 0;
  border-radius: 6px;
  background: var(--color-bg-surface-muted);
  gap: 2px;
}

.blacklist-view-tab {
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-semibold);
}

.blacklist-view-tab.is-active {
  background: var(--color-bg-surface);
  box-shadow: 0 2px 8px var(--color-shadow);
  color: var(--color-text-primary);
}

.watchlist-impact-note strong {
  color: var(--color-state-warning);
}

.watchlist-page-note {
  margin: 7px 0 2px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.blacklist-toolbar label > span,
.blacklist-impact-note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.blacklist-order-search {
  display: flex;
  min-width: 0;
  margin-left: auto;
  align-items: center;
  gap: 6px;
}

.blacklist-order-search .text-input {
  width: clamp(240px, 32vw, 520px);
  height: 30px;
}

.blacklist-order-search .compact-action-button {
  min-height: 30px;
  height: 30px;
  padding-inline: 12px;
}

.blacklist-order-result {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.8fr) auto;
  align-items: center;
  margin-top: 5px;
  padding: 7px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  gap: 10px;
}

.blacklist-order-result-main,
.blacklist-order-result-meta {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.blacklist-order-result-main strong {
  overflow-wrap: anywhere;
}

.blacklist-order-result-main span,
.blacklist-order-result-meta span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

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

.blacklist-toolbar {
  min-height: 32px;
  margin: 4px 0;
  gap: 10px;
}

.blacklist-summary-toolbar {
  justify-content: flex-end;
}

.blacklist-toolbar label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.blacklist-toolbar .select-input {
  width: 132px;
  height: 30px;
  min-height: 30px;
}

.blacklist-table-wrap {
  margin-top: 0;
  overflow-x: auto;
  overflow-y: visible;
}

#blacklistModal,
#blacklistDetailModal,
#watchlistModal,
#watchlistDetailModal {
  overscroll-behavior: contain;
}

.blacklist-table {
  min-width: 960px;
  table-layout: fixed;
}

.blacklist-table th {
  position: sticky;
  z-index: var(--z-workspace);
  top: 0;
  background: var(--color-bg-surface-muted);
}

.blacklist-table td {
  vertical-align: middle;
}

.blacklist-page .blacklist-table th,
.blacklist-page .blacklist-table td {
  padding: 5px 9px;
  line-height: var(--line-height-tight);
}

.blacklist-note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blacklist-openid {
  max-width: 280px;
  margin-top: 3px;
  overflow-wrap: anywhere;
  user-select: text;
}

.watchlist-group-id {
  max-width: 340px;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.watchlist-table {
  min-width: 1040px;
}

.blacklist-table th:nth-child(1) { width: 18%; }
.blacklist-table th:nth-child(2) { width: 22%; }
.blacklist-table th:nth-child(3) { width: auto; }
.blacklist-table th:nth-child(4) { width: 180px; }

.watchlist-table th:nth-child(1) { width: 18%; }
.watchlist-table th:nth-child(2) { width: 22%; }
.watchlist-table th:nth-child(3) { width: auto; }
.watchlist-table th:nth-child(4) { width: 200px; }

.watchlist-summary-row {
  cursor: pointer;
  transition: background-color 140ms ease;
}

.watchlist-summary-row:hover {
  background: var(--color-bg-subtle);
}

.watchlist-group-trigger {
  display: flex;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  align-items: center;
  gap: 7px;
  text-align: left;
}

.watchlist-group-trigger strong {
  font-size: var(--font-size-body);
}

.watchlist-group-trigger span {
  color: var(--color-accent-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.watchlist-group-trigger:hover strong,
.watchlist-group-trigger:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.watchlist-summary-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.watchlist-summary-metrics span {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--color-bg-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  white-space: nowrap;
}

.watchlist-summary-metrics strong {
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.blacklist-entry-summary {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.blacklist-entry-title,
.blacklist-entry-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.blacklist-entry-title > strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

.blacklist-entry-title > .blacklist-note::before {
  margin-right: 7px;
  color: var(--color-border-strong);
  content: "·";
}

.blacklist-entry-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.blacklist-entry-meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blacklist-entry-meta > span + span::before {
  margin-right: 7px;
  color: var(--color-border-strong);
  content: "·";
}

.blacklist-operator-cell {
  display: grid;
  gap: 2px;
}

.blacklist-operator-cell span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  white-space: nowrap;
}

.watchlist-group-filter {
  margin-bottom: 8px;
}

.watchlist-group-help {
  display: block;
  margin-top: 7px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

#blacklistPager,
#watchlistPager {
  margin: 0;
  padding: 6px 10px;
  border-top: 1px solid var(--color-border-default);
}

.blacklist-modal-panel {
  box-sizing: border-box;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 14px 16px 10px;
  overscroll-behavior: contain;
}

.blacklist-modal-panel > .modal-head {
  margin-bottom: 10px;
}

.blacklist-modal-panel > .modal-head p {
  margin-top: 3px;
}

.blacklist-modal-panel .modal-actions {
  position: sticky;
  bottom: -10px;
  margin: 8px -16px 0;
  padding: 8px 16px 10px;
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
}

.blacklist-confirmation-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 9px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.blacklist-confirmation-summary > div {
  display: grid;
  min-width: 0;
  padding: 7px 9px;
  gap: 2px;
}

.blacklist-confirmation-summary > div:nth-child(even) {
  border-left: 1px solid var(--color-border-default);
}

.blacklist-confirmation-summary > div:nth-child(n + 3) {
  border-top: 1px solid var(--color-border-default);
}

.blacklist-confirmation-summary span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.blacklist-confirmation-summary strong {
  overflow-wrap: anywhere;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
}

.blacklist-confirmation-summary .access-confirmation-evidence {
  grid-column: 1 / -1;
  border-left: 0;
}

.access-confirmation-account small,
.access-confirmation-evidence small {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.access-account-select {
  margin: 2px 0;
}

.access-confirmation-account.is-unavailable strong,
.access-confirmation-account.is-unavailable small {
  color: var(--color-state-danger);
}

.access-modal-form {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 9px;
}

.blacklist-modal-panel .field {
  padding: 8px 10px;
}

.blacklist-modal-panel .field > span {
  margin-bottom: 4px;
}

.blacklist-modal-panel .textarea-input {
  min-height: 54px;
  resize: vertical;
}

.access-association-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  margin-bottom: 9px;
  padding: 8px;
  border: 1px solid var(--color-state-warning);
  border-radius: 8px;
  gap: 8px;
  align-items: stretch;
  background: var(--color-state-warning-soft);
}

.access-association-panel .field {
  border-color: transparent;
}

.blacklist-impact-note {
  margin: 9px 0 0;
  padding: 7px 9px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
}

.blacklist-impact-note strong {
  color: var(--color-text-primary);
}

.watchlist-impact-note {
  border-color: var(--color-state-warning);
  background: var(--color-state-warning-soft);
}

.watchlist-detail-panel {
  display: flex;
  box-sizing: border-box;
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 18px;
  overflow: hidden;
  flex-direction: column;
}

.watchlist-detail-head {
  flex: 0 0 auto;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-default);
}

.watchlist-detail-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.watchlist-detail-title-line h2 {
  margin: 0;
  font-size: var(--font-size-heading-sm);
  line-height: var(--line-height-tight);
}

.watchlist-detail-loading {
  display: grid;
  min-height: 180px;
  place-items: center;
  color: var(--color-text-muted);
}

.watchlist-detail-content {
  padding: 0 4px 2px 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.watchlist-detail-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-subtle);
}

.watchlist-detail-overview > div {
  display: grid;
  min-width: 0;
  padding: 9px 11px;
  gap: 2px;
}

.watchlist-detail-overview > div + div {
  border-left: 1px solid var(--color-border-default);
}

.watchlist-detail-overview .watchlist-detail-overview-note {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border-default);
  border-left: 0;
}

.watchlist-detail-overview span,
.watchlist-detail-order-grid span,
.watchlist-detail-eyebrow {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.watchlist-detail-overview strong {
  overflow-wrap: anywhere;
  line-height: var(--line-height-normal);
}

.watchlist-detail-section {
  margin-top: 12px;
}

.blacklist-candidate-note {
  margin: -1px 0 6px;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.watchlist-detail-order.is-candidate {
  border-color: var(--color-state-warning);
  background: var(--color-state-warning-soft);
}

.watchlist-detail-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 10px;
}

.watchlist-detail-section-head h3 {
  margin: 1px 0 0;
  font-size: var(--font-size-body);
}

.watchlist-identity-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(220px, 0.85fr) minmax(0, 1.5fr);
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.watchlist-identity-grid article {
  min-width: 0;
  padding: 9px 10px;
}

.watchlist-identity-grid article + article {
  border-left: 1px solid var(--color-border-default);
}

.watchlist-identity-grid .watchlist-identity-openids {
  grid-column: auto;
}

.watchlist-identity-grid h4 {
  margin: 0 0 5px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.watchlist-copy-list,
.watchlist-order-copy-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.watchlist-copy-value {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  align-items: center;
  background: var(--color-bg-surface-muted);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.watchlist-copy-value span {
  overflow-wrap: anywhere;
}

.watchlist-copy-value:hover,
.watchlist-copy-value:focus-visible {
  border-color: var(--color-accent-primary);
  background: var(--color-accent-soft);
  color: var(--color-accent-primary);
}

.watchlist-copy-value.is-technical {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-caption);
}

.watchlist-detail-orders {
  display: grid;
  gap: 6px;
}

.watchlist-detail-order {
  padding: 9px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
}

.watchlist-detail-order > header,
.watchlist-detail-order > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.watchlist-detail-order-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 7px 0;
  padding: 7px 0;
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  gap: 8px 12px;
}

.watchlist-detail-order-grid > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.watchlist-detail-order-grid strong {
  overflow-wrap: anywhere;
  line-height: var(--line-height-normal);
}

.watchlist-detail-order > footer > span {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  white-space: nowrap;
}

.watchlist-detail-empty,
.watchlist-detail-empty-state {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.watchlist-detail-empty-state {
  padding: 18px;
  border: 1px dashed var(--color-border-default);
  border-radius: 8px;
  text-align: center;
}

.watchlist-detail-actions {
  flex: 0 0 auto;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-default);
}

@media (max-width: 900px) {
  .blacklist-control-bar {
    flex-wrap: wrap;
  }

  .blacklist-order-search {
    width: 100%;
    margin-left: 0;
  }

  .blacklist-order-search .text-input {
    width: auto;
    flex: 1 1 auto;
  }

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

  .watchlist-identity-grid .watchlist-identity-openids {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-border-default);
    border-left: 0;
  }

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

@media (max-width: 760px) {
  .blacklist-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .blacklist-confirmation-summary {
    grid-template-columns: 1fr;
  }

  .blacklist-confirmation-summary > div:nth-child(even) {
    border-left: 0;
  }

  .blacklist-confirmation-summary > div:nth-child(n + 2) {
    border-top: 1px solid var(--color-border-default);
  }

  .blacklist-confirmation-summary .access-confirmation-evidence {
    grid-column: auto;
  }

  .access-modal-form,
  .access-association-panel {
    grid-template-columns: 1fr;
  }

  .blacklist-order-result,
  .blacklist-order-result-meta {
    grid-template-columns: 1fr;
  }

  .blacklist-order-search {
    align-items: stretch;
  }

  .watchlist-detail-overview,
  .watchlist-identity-grid,
  .watchlist-detail-order-grid {
    grid-template-columns: 1fr;
  }

  .watchlist-detail-overview > div + div,
  .watchlist-identity-grid article:nth-child(2) {
    border-top: 1px solid var(--color-border-default);
    border-left: 0;
  }

  .watchlist-identity-grid .watchlist-identity-openids {
    grid-column: auto;
    border-left: 0;
  }

  .watchlist-detail-order > footer {
    align-items: flex-start;
    flex-direction: column;
  }
}
.risk-association-confirmation {
  display: flex;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  gap: 8px;
  align-items: flex-start;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.risk-association-confirmation input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
}

.risk-association-confirmation span,
.risk-association-confirmation small {
  display: block;
}

.risk-association-confirmation small {
  margin-top: 2px;
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* ---- styles/80-stores.css ---- */
/* Store search, maps, configuration editor, content, and store table. */
.store-info-modal-panel {
  width: min(560px, 100%);
  padding: 24px;
}

.store-info-modal-panel .modal-head p {
  margin: 5px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.store-info-details {
  margin: 0;
}

.store-info-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-default);
}

.store-info-row:first-child {
  border-top: 1px solid var(--color-border-default);
}

.store-info-row dt {
  color: var(--color-text-secondary);
}

.store-info-row dd {
  margin: 0;
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.store-info-modal-actions {
  margin-top: 20px;
}

.store-search-field {
  position: relative;
}

.store-suggest-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  background: var(--color-bg-surface-strong);
  box-shadow: 0 10px 28px var(--color-shadow);
}

.store-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--color-border-default);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.store-suggest-item:last-child {
  border-bottom: none;
}

.store-suggest-item:hover {
  background: var(--color-bg-surface-muted);
}

.store-suggest-title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.store-suggest-address {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

.store-map-preview {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.store-map-preview img {
  display: block;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
}

.store-radius-map {
  position: relative;
  width: min(760px, 100%);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-bg-surface-muted);
}

.store-radius-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-radius-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.store-radius-overlay circle {
  fill: var(--color-focus-ring);
  stroke: var(--color-accent);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.store-radius-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--color-overlay-strong);
  color: var(--color-action-on-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.store-editor-panel {
  display: flex;
  flex-direction: column;
  width: min(1280px, 100%);
  height: min(860px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.store-editor-head {
  flex: 0 0 auto;
  margin: 0;
  padding: 24px 28px 18px;
}

.store-editor-panel > .error-box,
.store-editor-panel > .success-box {
  flex: 0 0 auto;
  margin: 0 28px 12px;
}

.store-editor-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 28px;
  padding: 0 28px;
  border-bottom: 1px solid var(--color-border-default);
}

.store-editor-tab {
  position: relative;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.store-editor-tab.is-active {
  color: var(--color-text-primary);
}

.store-editor-tab.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--color-accent);
  content: "";
}

.store-editor-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 28px;
}

.store-editor-page {
  max-width: 1120px;
}

.store-editor-page-head {
  margin-bottom: 24px;
}

.store-editor-page-head h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-sm);
  letter-spacing: 0;
}

.store-editor-page-head p {
  margin: 8px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.store-basic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 18px;
}

.store-insurance-setting {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-subtle);
  cursor: pointer;
}

.store-insurance-setting input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-accent);
}

.store-insurance-copy {
  display: grid;
  gap: 4px;
}

.store-insurance-copy small {
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.store-order-limit-card {
  display: grid;
  gap: 16px;
  max-width: 720px;
}

.store-order-limit-toggle {
  grid-column: auto;
}

.store-order-limit-field {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: end;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
}

.store-order-limit-field p,
.store-order-limit-note {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.field .store-order-limit-number {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.store-order-limit-input-field {
  padding: 0;
  border: 0;
  background: transparent;
}

.field .store-order-limit-number > span {
  display: inline;
  margin: 0;
  color: var(--color-text-primary);
}

.field .store-order-limit-number .text-input {
  width: 140px;
}

.store-order-limit-note {
  margin-top: 18px;
}

.store-location-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
}

.store-location-grid .is-wide {
  grid-column: 1 / -1;
}

.store-radius-config {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.store-radius-heading {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 18px;
}

.store-radius-number-field {
  width: 220px;
}

.store-radius-number {
  display: flex;
  align-items: center;
  gap: 10px;
}

.store-radius-number .text-input {
  width: 140px;
}

.store-radius-range {
  width: min(760px, 100%);
  accent-color: var(--color-accent);
}

.store-map-section {
  margin-top: 28px;
}

.map-service-band {
  margin-bottom: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
}

.map-service-head,
.map-service-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.map-service-head {
  justify-content: space-between;
}

.map-service-head .store-editor-section-title {
  margin-top: 0;
}

.map-service-actions {
  flex: 0 0 auto;
}

.map-capability-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.map-capability-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  gap: 16px;
  padding: 6px 0;
}

.map-capability-row > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.map-capability-row span {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.map-capability-status {
  max-width: 55%;
  text-align: right;
}

.map-capability-status.is-ok,
.status-pill.is-success {
  color: var(--color-state-success);
}

.map-capability-status.is-error,
.status-pill.is-danger {
  color: var(--color-state-danger);
}

.store-editor-section-title {
  margin: 28px 0 12px;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.store-content-hint {
  margin: -8px 0 14px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.store-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.store-content-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -6px 0 24px;
  padding: 6px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-small);
  background: var(--color-bg-subtle);
}

.store-content-tab {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.store-content-tab:hover,
.store-content-tab:focus-visible {
  color: var(--color-text-primary);
}

.store-content-tab.is-active {
  border-color: var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-accent-strong);
  box-shadow: 0 3px 10px var(--color-shadow);
}

.store-content-subpage {
  display: grid;
  gap: 20px;
  max-width: 920px;
}

.store-content-field span {
  display: block;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.store-content-field small {
  display: block;
  margin: -2px 0 9px;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
}

.store-content-field-wide {
  grid-column: 1 / -1;
}

.store-content-field .textarea-input {
  min-height: 150px;
}

.store-content-field .store-notice-input {
  min-height: 230px;
}

.store-order-warning-grid {
  display: grid;
  gap: 22px;
}

.store-content-field .store-order-warning-input {
  min-height: 88px;
}

.store-order-warning-preview {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 16px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.store-order-warning-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-action-on-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.store-notice-list-field {
  min-width: 0;
}

.store-notice-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.store-notice-list-head > div {
  min-width: 0;
}

.store-notice-list-head span,
.store-notice-list-head small {
  margin-bottom: 0;
}

.store-notice-item-list {
  display: grid;
  gap: 8px;
}

.store-notice-item-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-small);
  background: var(--color-bg-surface);
}

.store-notice-item-index,
.content-preview-notice-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--color-action-on-primary);
  background: var(--color-action-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.store-content-field .store-notice-item-input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 112px;
  padding: 9px 11px;
  resize: none;
  line-height: var(--line-height-normal);
}

.store-notice-item-remove {
  min-width: 52px;
  min-height: 36px;
  padding: 6px 9px;
}

.store-delivery-notice-item-row {
  align-items: start;
}

.store-delivery-notice-item-fields {
  display: grid;
  gap: 8px;
}

.store-delivery-notice-title {
  min-height: 38px;
  font-weight: var(--font-weight-semibold);
}

.store-system-notice-card {
  padding: 14px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-small);
  background: var(--color-bg-subtle);
}

.store-system-notice-card > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-system-notice-card span {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: var(--font-size-small);
}

.store-system-notice-card p,
.store-system-notice-card small {
  margin: 8px 0 0;
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.store-system-notice-card small {
  display: block;
  color: var(--color-text-muted);
}

.store-delivery-notice-preview {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
}

.store-delivery-notice-preview-item {
  display: grid;
  gap: 4px;
}

.store-delivery-notice-preview-item strong {
  color: var(--color-text-primary);
}

.store-delivery-notice-preview-item span {
  color: var(--color-text-secondary);
  line-height: var(--line-height-reading);
}

.content-page-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.content-page-meta strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}

.content-preview-shell {
  max-width: 920px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-subtle);
}

.content-preview-home,
.content-preview-notice {
  padding: 30px 24px;
  background: var(--color-bg-surface);
  text-align: center;
}

.content-preview-notice-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-bottom: 12px;
  text-align: left;
}

.content-preview-notice-item:last-child {
  margin-bottom: 0;
}

.content-preview-home {
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.content-preview-notice {
  margin-top: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-reading);
}

.content-preview-shell-single .content-preview-notice {
  margin-top: 0;
}

.content-preview-empty {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.store-editor-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.store-decoration-preview {
  width: min(920px, 100%);
  aspect-ratio: 750 / 242;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  background: var(--color-media-placeholder);
}

.store-decoration-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-decoration-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.store-editor-footer {
  flex: 0 0 auto;
  margin: 0;
  padding: 18px 28px 22px;
  background: var(--color-bg-surface);
}

@media (max-width: 820px) {
  .store-basic-grid,
  .store-order-limit-field,
  .store-location-grid,
  .store-content-grid {
    grid-template-columns: 1fr;
  }

  .store-radius-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .store-radius-number-field {
    width: 100%;
  }

  .store-notice-list-head {
    align-items: stretch;
    flex-direction: column;
  }

  .map-service-head,
  .map-service-actions,
  .map-capability-row,
  .map-capability-row > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .map-service-actions {
    width: 100%;
  }

  .map-capability-status {
    max-width: none;
    text-align: left;
  }
}

/* 门店表：列少，不继承订单表的 1480px 最小宽 */
.store-table {
  min-width: 640px;
}

.store-table td {
  vertical-align: middle;
}

.store-table .store-actions {
  white-space: nowrap;
}

.store-table .store-actions .ghost-button {
  margin-right: 8px;
}

/* ---- styles/90-documents.css ---- */
/* Read-only policy and agreement documents. */
.document-meta {
  margin: 8px 0 14px;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
}

.document-content {
  max-height: 520px;
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-reading);
  white-space: pre-wrap;
  word-break: break-word;
}

.orders-table tr.is-selected td {
  background: var(--color-bg-surface-muted);
}