/* styles.css */
:root {
  color-scheme: light;
  --bg: #f7f4f7;
  --bg-2: #eff7fc;
  --surface: rgba(255, 255, 255, 0.84);
  --surface-strong: rgba(255, 255, 255, 0.98);
  --surface-soft: rgba(255, 255, 255, 0.68);
  --line: rgba(43, 58, 84, 0.08);
  --line-strong: rgba(43, 58, 84, 0.14);
  --text: #172033;
  --muted: #68758a;
  --subtle: #9aa5b6;
  --pink: #f27a9a;
  --pink-strong: #d9537a;
  --pink-soft: #fff2f6;
  --blue: #6fa9d8;
  --blue-strong: #397daa;
  --blue-soft: #eef8ff;
  --green: #34b983;
  --green-soft: #e9f8f1;
  --amber: #d4817a;
  --amber-soft: #fff1ed;
  --red: #c95b5b;
  --red-soft: #fff0f0;
  --section-pink: #fff7fb;
  --section-blue: #f3faff;
  --section-green: #f4fff9;
  --section-amber: #fff9f0;
  --section-neutral: #fbfcff;
  --accent-pink: rgba(242, 122, 154, 0.52);
  --accent-blue: rgba(111, 169, 216, 0.52);
  --accent-green: rgba(52, 185, 131, 0.46);
  --accent-amber: rgba(212, 129, 122, 0.46);
  --gradient-primary: linear-gradient(135deg, #e8879b 0%, #6da8ce 100%);
  --gradient-accent: linear-gradient(135deg, #f27a9a 0%, #6fa9d8 100%);
  --gradient-soft: linear-gradient(135deg, rgba(255, 242, 246, 0.96) 0%, rgba(238, 248, 255, 0.96) 100%);
  --gradient-page: linear-gradient(180deg, #fbfcff 0%, #f6f2f7 42%, #eef8ff 100%);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.86) inset, 0 10px 24px rgba(45, 62, 90, 0.055);
  --shadow-float: 0 24px 70px rgba(46, 62, 86, 0.12);
  --radius-panel: 8px;
  --radius-card: 7px;
}

/* Order detail cockpit: final one-screen customer-service workflow layout. */
.order-detail-dialog {
  width: min(1240px, calc(100vw - 28px));
  height: min(720px, calc(100vh - 28px));
  max-height: none;
}

.order-detail-dialog-frame {
  height: 100%;
  max-height: none;
}

.order-detail-dialog-body {
  overflow: hidden;
  padding: 9px;
}

.order-detail-dialog .detail-content {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(280px, 0.82fr);
  grid-template-rows: 54px 118px 118px minmax(82px, 1fr) 38px;
  grid-template-areas:
    "status status actions"
    "confirm payment actions"
    "customer staging overview"
    "execution staging history"
    "copy timeline save";
  gap: 7px;
}

.order-detail-dialog .detail-head {
  display: none;
}

.order-detail-dialog .detail-status-strip { grid-area: status; }
.order-detail-dialog .order-confirm-section { grid-area: confirm; }
.order-detail-dialog .payment-section { grid-area: payment; }
.order-detail-dialog .staging-section { grid-area: staging; }
.order-detail-dialog .customer-note-section { grid-area: customer; }
.order-detail-dialog .execution-note-section { grid-area: execution; }
.order-detail-dialog .order-detail-overview-section { grid-area: overview; }
.order-detail-dialog .customer-history-section { grid-area: history; }
.order-detail-dialog .copy-section { grid-area: copy; }
.order-detail-dialog .timeline-section { grid-area: timeline; }
.order-detail-dialog .action-grid { grid-area: actions; }
.order-detail-dialog #saveOrderEdits,
.order-detail-dialog #detailReadonlyNotice { grid-area: save; }

.order-detail-dialog .detail-section,
.order-detail-dialog .action-grid {
  gap: 5px;
  padding: 7px 8px 7px 10px;
  border-radius: 7px;
  box-shadow: none;
}

.order-detail-dialog .detail-section-head {
  min-height: 20px;
  padding-bottom: 4px;
  gap: 8px;
}

.order-detail-dialog .detail-section h3 {
  font-size: 12px;
  line-height: 1.15;
}

.order-detail-dialog .detail-section-head > span {
  font-size: 10px;
  line-height: 1.2;
}

.order-detail-dialog .detail-status-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.order-detail-dialog .detail-status-step {
  gap: 1px;
  padding: 7px 8px 5px;
  border-radius: 7px;
}

.order-detail-dialog .detail-status-step strong,
.order-detail-dialog .detail-status-step em {
  white-space: normal;
}

.order-detail-dialog .detail-status-step strong {
  font-size: 11px;
}

.order-detail-dialog .detail-status-step em {
  font-size: 10px;
}

.order-detail-dialog .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.order-detail-dialog .detail-grid > div,
.order-detail-dialog .order-detail-fact,
.order-detail-dialog .customer-history-grid div,
.order-detail-dialog .customer-history-item {
  padding: 5px 6px;
  border-radius: 6px;
}

.order-detail-dialog .detail-grid span,
.order-detail-dialog .order-detail-fact span,
.order-detail-dialog label span,
.order-detail-dialog .customer-history-grid span,
.order-detail-dialog .customer-history-item span {
  font-size: 10px;
  line-height: 1.2;
}

.order-detail-dialog .detail-grid strong,
.order-detail-dialog .order-detail-fact strong,
.order-detail-dialog .customer-history-grid strong,
.order-detail-dialog .customer-history-item strong {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.22;
}

.order-detail-dialog input,
.order-detail-dialog select {
  height: 28px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 12px;
}

.order-detail-dialog textarea {
  min-height: 0;
  padding: 6px 7px;
  resize: none;
  border-radius: 7px;
  font-size: 11.5px;
  line-height: 1.3;
}

.order-detail-dialog .payment-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.order-detail-dialog .payment-section p {
  margin: 0;
  font-size: 10px;
  line-height: 1.25;
}

.order-detail-dialog .staging-order-tools {
  grid-template-columns: minmax(0, 1fr) minmax(88px, 0.6fr);
  gap: 5px;
  padding: 6px;
  border-radius: 6px;
}

.order-detail-dialog .staging-scene-summary {
  min-height: 24px;
  padding: 5px 6px;
  font-size: 10px;
  line-height: 1.25;
}

.order-detail-dialog .staging-reference-preview {
  gap: 4px;
  padding: 5px;
  border-radius: 6px;
}

.order-detail-dialog .staging-reference-preview-head strong,
.order-detail-dialog .staging-reference-preview-head span {
  font-size: 10px;
}

.order-detail-dialog .staging-reference-preview-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.order-detail-dialog .staging-reference-preview-strip img,
.order-detail-dialog .staging-reference-empty {
  min-height: 26px;
  border-radius: 5px;
}

.order-detail-dialog .staging-reference-empty {
  padding: 4px 6px;
  font-size: 10px;
  line-height: 1.2;
}

.order-detail-dialog .staging-section textarea {
  min-height: 48px;
}

.order-detail-dialog .customer-note-section textarea,
.order-detail-dialog .execution-note-section textarea {
  min-height: 48px;
}

.order-detail-dialog .staging-library-picker {
  padding: 4px 6px;
  border-radius: 6px;
}

.order-detail-dialog .staging-library-picker summary {
  font-size: 10px;
}

.order-detail-dialog .staging-library-picker select[multiple],
.order-detail-dialog .staging-order-actions {
  display: none;
}

.order-detail-dialog .action-grid {
  align-content: start;
  grid-template-columns: 1fr;
}

.order-detail-dialog .action-grid button,
.order-detail-dialog .copy-tools button,
.order-detail-dialog #saveOrderEdits {
  min-height: 29px;
  padding: 4px 8px;
  font-size: 11px;
}

.order-detail-dialog .order-detail-fact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.order-detail-dialog .order-detail-secondary {
  padding-top: 4px;
}

.order-detail-dialog .order-detail-secondary summary {
  font-size: 10px;
}

.order-detail-dialog .customer-history-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.order-detail-dialog .customer-history-list,
.order-detail-dialog .timeline {
  gap: 4px;
}

.order-detail-dialog .customer-history-item:nth-child(n+2) {
  display: none;
}

.order-detail-dialog .copy-tools {
  grid-template-columns: 1fr minmax(90px, 0.75fr) 1fr;
  gap: 5px;
}

.order-detail-dialog .timeline li {
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.25;
}

.order-detail-dialog .timeline strong {
  font-size: 10.5px;
}

.order-detail-dialog #saveOrderEdits {
  align-self: stretch;
  width: 100%;
}

/* Responsive workspace fit: compress navigation and keep tables inside the viewport. */
@media (max-width: 1280px) {
  body {
    min-width: 0;
    padding: 8px;
  }

  .app-shell {
    grid-template-columns: 148px minmax(0, 1fr);
    min-height: calc(100vh - 16px);
  }

  .sidebar {
    gap: 8px;
    padding: 9px;
  }

  .brand {
    gap: 8px;
    padding: 7px;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
  }

  .brand-name {
    font-size: 12px;
  }

  .brand-subtitle,
  .nav-item small,
  .sidebar-note span:not(.note-label) {
    display: none;
  }

  .nav-list,
  .nav-sublist,
  .nav-group {
    gap: 5px;
  }

  .nav-group summary {
    min-height: 24px;
    padding: 0 6px;
    font-size: 10.5px;
  }

  .nav-item {
    min-height: 32px;
    padding: 0 7px;
    font-size: 12px;
  }

  .nav-subitem {
    min-height: 30px;
    margin-left: 0;
    padding-left: 7px;
    border-left-width: 1px;
  }

  .sidebar-note {
    padding: 8px;
  }

  .topbar,
  .top-actions,
  .filter-bar {
    gap: 8px;
  }

  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .table-wrap,
  .workbench-table-wrap,
  .schedule-table-wrap,
  .staging-gallery-table-wrap {
    overflow-x: hidden;
  }

  table,
  .orders-panel table,
  .schedule-table,
  .staging-gallery-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  th,
  td,
  .orders-panel th,
  .orders-panel td {
    width: auto;
    max-width: none;
    padding: 5px 4px;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    font-size: 10px;
    line-height: 1.25;
  }

  .orders-panel .cell-main,
  .orders-panel .cell-sub,
  .orders-panel .tag-list span,
  .table-sort-button span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .orders-panel .select-column {
    width: 28px !important;
  }

  .status-chip,
  .customer-type-chip,
  .schedule-state-chip,
  .data-status-chip {
    min-height: 20px;
    padding: 2px 5px;
    white-space: normal;
  }
}

@media (max-width: 1040px) {
  body {
    padding: 6px;
  }

  .app-shell {
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: calc(100vh - 12px);
    border-radius: 10px;
  }

  .sidebar {
    padding: 6px;
  }

  .brand {
    justify-content: center;
    padding: 6px 4px;
  }

  .brand > div:not(.brand-mark),
  .nav-group summary::after,
  .sidebar-note {
    display: none;
  }

  .nav-group summary {
    justify-content: center;
    padding: 0;
    font-size: 10px;
  }

  .nav-item {
    justify-items: center;
    min-height: 30px;
    padding: 0 4px;
    text-align: center;
    font-size: 11px;
    line-height: 1.15;
  }

  .nav-subitem {
    padding-left: 4px;
    border-left: 0;
  }

  .main {
    min-width: 0;
  }

  .topbar {
    align-items: flex-start;
  }

  .top-actions {
    justify-content: flex-start;
  }

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

  .orders-panel th,
  .orders-panel td,
  th,
  td {
    padding: 4px 3px;
    font-size: 9.5px;
  }

  .order-detail-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }

  .order-detail-dialog .detail-content {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(220px, 0.74fr);
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #eef1f6;
}

body {
  margin: 0;
  min-width: 1360px;
  min-height: 100vh;
  padding: 8px;
  background: var(--gradient-page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

[id*="itab" i],
[class*="itab" i],
[aria-label*="iTab" i],
[title*="iTab" i],
[aria-label*="快速悬浮框"],
[title*="快速悬浮框"] {
  display: none !important;
}

body > :not(.app-shell):not(.sanmiao-login-overlay):not(dialog):not(script):not(style):not(link):not(.column-drag-ghost):not(.inline-editor-drawer) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.app-shell {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  width: 100%;
  min-height: calc(100vh - 16px);
  max-width: none;
  margin: 0 auto;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(28px);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-right: 1px solid rgba(17, 24, 39, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 246, 250, 0.68) 52%, rgba(240, 249, 255, 0.72));
  backdrop-filter: blur(26px);
  color: var(--text);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-card);
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--gradient-accent);
  color: #ffffff;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(232, 135, 155, 0.24);
}

.brand-name {
  font-size: 14px;
  font-weight: 800;
}

.brand-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-group {
  display: grid;
  gap: 7px;
}

.nav-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 0 10px;
  color: var(--subtle);
  font-size: 12px;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}

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

.nav-group summary::after {
  color: var(--subtle);
  content: "⌄";
  font-size: 12px;
}

.nav-group:not([open]) summary::after {
  content: "›";
}

.nav-sublist {
  display: grid;
  gap: 7px;
}

.nav-item {
  display: grid;
  align-content: center;
  gap: 2px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

.nav-item small {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.nav-item.active,
.nav-item:hover {
  border-color: rgba(242, 122, 154, 0.18);
  background: linear-gradient(90deg, rgba(255, 242, 246, 0.96), rgba(238, 248, 255, 0.94));
  color: var(--text);
  box-shadow: 0 10px 22px rgba(45, 62, 90, 0.07);
}

.nav-item.active small,
.nav-item:hover small {
  color: var(--muted);
}

.nav-subitem {
  min-height: 36px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 2px solid rgba(232, 135, 155, 0.18);
  border-radius: 11px;
  font-size: 13px;
}

.nav-subitem small {
  font-size: 10px;
}

.sidebar-note {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  box-shadow: var(--shadow-card);
}

.note-label {
  display: block;
  margin-bottom: 4px;
  color: var(--pink);
  font-weight: 800;
}

.main {
  min-width: 0;
  min-height: calc(100vh + 240px);
  padding: 12px;
  overflow: visible;
}

.topbar {
  position: relative;
  top: auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(24px);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 21px;
  font-weight: 850;
  line-height: 1.2;
}

.topbar p,
.panel-head p,
.muted {
  color: var(--muted);
  font-size: 13px;
}

.topbar p {
  margin-top: 4px;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-notice-root {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 80;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

.admin-notice {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-left: 4px solid var(--accent-pink);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  padding: 11px 12px;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
}

.admin-notice-warning {
  border-left-color: #d97706;
}

.admin-notice-error {
  border-left-color: #dc2626;
}

.admin-notice-success {
  border-left-color: #059669;
}

.admin-notice-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.primary-button,
.ghost-button,
.danger-button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 800;
}

.primary-button {
  background: var(--gradient-accent);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(232, 135, 155, 0.2);
}

.primary-button:hover {
  filter: saturate(1.08);
}

.ghost-button {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(17, 24, 39, 0.08);
  color: #53607a;
}

.ghost-button.is-active {
  border-color: rgba(232, 135, 155, 0.38);
  background: var(--pink-soft);
  color: var(--pink-strong);
}

.danger-button {
  background: var(--red-soft);
  border-color: #ffd6d6;
  color: var(--red);
}

.primary-button[aria-busy="true"],
.ghost-button[aria-busy="true"],
.danger-button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.72;
  animation: admin-action-busy 1.1s ease-in-out infinite;
}

@keyframes admin-action-busy {
  50% { box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.08); }
}

.compact {
  min-height: 34px;
  padding: 0 12px;
}

.full-width {
  width: 100%;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.metric-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid rgba(43, 58, 84, 0.1);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--section-neutral));
  box-shadow: var(--shadow-card);
}

.metric-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent-blue);
  content: "";
}

.metric-card:nth-child(1),
.metric-card:nth-child(2),
.metric-card:nth-child(3) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--section-pink));
}

.metric-card:nth-child(1)::before,
.metric-card:nth-child(2)::before,
.metric-card:nth-child(3)::before {
  background: var(--accent-pink);
}

.metric-card:nth-child(4),
.metric-card:nth-child(5),
.metric-card:nth-child(6) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--section-blue));
}

.metric-card span,
.metric-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.metric-card strong {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.metric-card:nth-child(1) strong,
.metric-card:nth-child(2) strong,
.metric-card:nth-child(3) strong {
  color: var(--pink);
}

.metric-card:nth-child(4) strong,
.metric-card:nth-child(5) strong,
.metric-card:nth-child(6) strong {
  color: var(--blue);
}

.today-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.today-flow-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(111, 169, 216, 0.2);
  border-left: 5px solid var(--accent-blue);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, #ffffff 0%, var(--section-blue) 100%);
  box-shadow: none;
  backdrop-filter: none;
}

.tomorrow-plan-panel {
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(212, 129, 122, 0.24);
  border-left: 5px solid var(--accent-amber);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, #ffffff 0%, var(--section-amber) 100%);
  box-shadow: none;
  backdrop-filter: none;
}

.orders-panel::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  content: "";
}

.today-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.66);
}

.today-flow-head-with-actions {
  align-items: center;
}

.today-flow-title-block {
  min-width: 0;
}

.today-flow-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.today-flow-head h2 {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 850;
}

.today-flow-title-row h2 {
  margin-bottom: 0;
}

.today-flow-head p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.today-flow-title-block p {
  margin-top: 5px;
}

.today-flow-head > span {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-strong);
  text-align: center;
  font-size: 12px;
  font-weight: 850;
}

.today-flow-summary-inline {
  flex: 0 0 auto;
  min-width: 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-strong);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.workbench-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.workbench-refresh-control {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.workbench-refresh-status {
  max-width: 280px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.workbench-refresh-status[data-state="success"] {
  color: var(--blue-strong);
}

.workbench-refresh-status[data-state="warning"],
.workbench-refresh-status[data-state="error"] {
  color: var(--pink-strong);
}

.workbench-head-actions .ghost-button {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .today-flow-head-with-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .workbench-head-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.today-order-list {
  display: block;
  padding: 0;
}

.workbench-table-wrap {
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  border-top: 1px solid rgba(57, 125, 170, 0.12);
  background: rgba(255, 255, 255, 0.64);
}

.workbench-new-table {
  min-width: 1960px;
}

.workbench-execution-table {
  min-width: 1900px;
}

.workbench-prep-table {
  min-width: 1760px;
}

.workbench-grid-table {
  width: max-content;
  min-width: 100%;
  font-size: 10.8px;
}

.workbench-grid-head,
.workbench-grid-body {
  display: grid;
  min-width: 0;
}

.workbench-grid-row {
  display: grid;
  grid-template-columns: var(--workbench-grid-columns);
  width: 100%;
  min-width: 100%;
  align-items: stretch;
}

.workbench-grid-cell {
  min-width: 0;
  max-width: none;
  padding: 5px 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: visible;
  overflow-wrap: normal;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
  font-size: 10.4px;
  line-height: 1.35;
}

.workbench-grid-header-cell {
  display: grid;
  min-height: 38px;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: 2px solid rgba(57, 125, 170, 0.26);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(238, 248, 255, 0.99));
  color: #203a54;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  box-shadow: 0 12px 22px rgba(45, 62, 90, 0.1);
}

.workbench-grid-header-cell:first-child {
  border-top-left-radius: 8px;
}

.workbench-grid-header-cell:last-child {
  border-top-right-radius: 8px;
}

.workbench-grid-body-cell {
  display: block;
  min-height: 35px;
  background: #ffffff;
}

.workbench-grid-body-row:nth-child(even) .workbench-grid-body-cell {
  background: #ffffff;
}

.workbench-grid-body-row:hover .workbench-grid-body-cell,
.workbench-grid-body-row.selected .workbench-grid-body-cell {
  background: #ffffff;
}

.workbench-grid-body-row.is-fresh {
  box-shadow: inset 3px 0 0 var(--blue-strong);
}

.workbench-grid-cell > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
}

.workbench-grid-table strong,
.workbench-grid-table .cell-main {
  color: #172033;
  font-weight: 850;
}

.workbench-grid-table strong,
.workbench-grid-table .cell-sub,
.workbench-grid-table .status-chip,
.workbench-grid-table .owner-pill,
.workbench-grid-table .today-order-tag,
.workbench-grid-table .ghost-button {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.workbench-grid-table .cell-sub {
  color: #8490a3;
  font-size: 10px;
  font-weight: 700;
}

.workbench-grid-header-cell .table-sort-button span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.workbench-grid-table .status-chip,
.workbench-grid-table .customer-type-chip,
.workbench-grid-table .staging-need-chip,
.workbench-grid-table .schedule-state-chip {
  height: auto;
  min-height: 22px;
  padding: 3px 6px;
  text-align: center;
}

.role-task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.role-task-grid.is-tomorrow {
  padding: 14px 20px 18px;
}

.role-task-column {
  min-width: 0;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.66);
}

.role-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.role-task-head strong {
  font-size: 13px;
  font-weight: 900;
}

.role-task-head span {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-strong);
  font-size: 11px;
  font-weight: 850;
}

.role-task-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.role-task-card {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 116px;
  padding: 11px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  text-align: left;
}

.role-task-card.is-clickable:hover {
  border-color: rgba(232, 135, 155, 0.34);
  background: var(--pink-soft);
}

.role-task-card strong,
.role-task-card small,
.role-task-card em {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.42;
}

.role-task-card strong {
  font-size: 13px;
  font-weight: 850;
}

.role-task-card small,
.role-task-card em,
.role-empty {
  color: var(--muted);
  font-size: 12px;
}

.role-task-card em {
  color: #53607a;
  font-style: normal;
}

.today-order-card {
  display: grid;
  min-width: 0;
  min-height: 238px;
  align-content: start;
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(17, 24, 39, 0.075);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.84);
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.today-order-card:hover,
.today-order-card.is-selected {
  border-color: rgba(232, 135, 155, 0.36);
  background: linear-gradient(135deg, rgba(255, 241, 245, 0.96), rgba(240, 242, 255, 0.94));
}

.today-order-card.is-fresh {
  border-color: rgba(62, 132, 192, 0.42);
  background: linear-gradient(135deg, rgba(230, 246, 255, 0.98), rgba(255, 244, 248, 0.94));
  box-shadow: 0 14px 30px rgba(62, 132, 192, 0.14);
}

.today-order-tag {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--pink-soft);
  color: var(--pink-strong);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.today-order-card strong,
.today-order-card small,
.today-order-card em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.today-order-card strong {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.today-order-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.today-order-card em {
  color: #53607a;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.today-order-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 2px 0;
}

.today-order-detail-grid div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.today-order-detail-grid dt,
.today-order-detail-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.today-order-detail-grid dt {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 800;
}

.today-order-detail-grid dd {
  margin-top: 3px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.today-empty {
  grid-column: 1 / -1;
  padding: 8px 0;
}

.tomorrow-plan-grid {
  display: block;
  padding: 0;
}

.tomorrow-plan-card {
  display: grid;
  min-width: 0;
  min-height: 154px;
  align-content: start;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.075);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.84);
}

.tomorrow-plan-card.is-clickable {
  cursor: pointer;
}

.tomorrow-plan-card.is-clickable:hover {
  border-color: rgba(109, 168, 206, 0.42);
  background: linear-gradient(135deg, rgba(244, 250, 255, 0.96), rgba(255, 241, 245, 0.88));
}

.tomorrow-plan-card span {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-strong);
  font-size: 11px;
  font-weight: 850;
}

.tomorrow-plan-card strong,
.tomorrow-plan-card p,
.tomorrow-plan-card em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tomorrow-plan-card strong {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.tomorrow-plan-card p,
.tomorrow-plan-card em {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.tomorrow-plan-card p {
  margin: 0;
  white-space: pre-line;
}

.tomorrow-plan-card em {
  color: #53607a;
  font-style: normal;
}

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

.orders-panel {
  overflow: hidden;
  min-height: calc(100vh - 250px);
  border: 1px solid rgba(242, 122, 154, 0.18);
  border-left: 5px solid var(--accent-pink);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, #ffffff 0%, #fffafd 44%, var(--section-blue) 100%);
  box-shadow: none;
  backdrop-filter: none;
}

.detail-panel {
  display: none;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255, 247, 251, 0.86), rgba(243, 250, 255, 0.78));
}

.panel-head h2,
.detail-head h2 {
  font-size: 18px;
  font-weight: 850;
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(132px, 1fr));
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(247, 251, 255, 0.9), rgba(255, 248, 252, 0.78));
}

.filter-bar label {
  min-width: 0;
}

.filter-title {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.filter-bar .search-field {
  grid-column: span 2;
}

.workbench-filter-bar {
  grid-template-columns: 112px repeat(5, minmax(128px, 1fr)) auto auto;
  align-items: end;
  margin: 0 0 8px;
  border: 1px solid rgba(111, 169, 216, 0.16);
  border-radius: var(--radius-panel);
  background: linear-gradient(90deg, rgba(243, 250, 255, 0.92), rgba(255, 247, 251, 0.82));
}

.workbench-filter-bar .ghost-button {
  align-self: end;
  white-space: nowrap;
}

.workbench-action-bar {
  grid-template-columns: 112px minmax(0, 1fr) auto auto;
  align-items: center;
}

.workbench-action-bar .ghost-button {
  align-self: center;
}

.workbench-action-note {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.service-consult-panel {
  display: grid;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--gradient-soft);
}

.import-preview-panel {
  display: grid;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.58);
}

.import-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.import-preview-head h3 {
  margin-bottom: 4px;
  font-size: 15px;
}

.import-preview-head p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.import-preview-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.import-preview-grid article {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.import-preview-grid span,
.import-preview-grid strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.import-preview-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.import-preview-grid strong {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 900;
}

.import-batch-strip {
  display: grid;
  grid-template-columns: auto minmax(140px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 12px;
}

.import-batch-strip strong {
  color: var(--ink);
  font-weight: 850;
}

.import-batch-strip em {
  min-width: 0;
  overflow-wrap: anywhere;
  font-style: normal;
}

.import-preflight-panel {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(91, 120, 190, 0.13);
  border-radius: 12px;
  background: rgba(246, 251, 255, 0.74);
}

.import-preflight-panel.is-blocking {
  border-color: rgba(207, 82, 82, 0.26);
  background: rgba(255, 246, 246, 0.9);
}

.import-preflight-panel.is-review {
  border-color: rgba(232, 135, 155, 0.26);
  background: rgba(255, 248, 251, 0.9);
}

.import-preflight-panel.is-pass {
  border-color: rgba(42, 140, 108, 0.18);
  background: rgba(244, 252, 248, 0.86);
}

.import-repair-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(91, 120, 190, 0.13);
  border-radius: 8px;
  background: rgba(246, 251, 255, 0.82);
  color: var(--muted);
  font-size: 12px;
}

.import-repair-note strong {
  color: var(--ink);
  font-weight: 850;
}

.import-preflight-status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.import-preflight-status span,
.import-preflight-status em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.import-preflight-status strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.import-preflight-counts,
.import-preflight-issues,
.import-preflight-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.import-preflight-next {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid rgba(91, 120, 190, 0.42);
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.import-preflight-counts {
  justify-content: flex-end;
  min-width: 150px;
}

.import-preflight-counts button {
  min-height: 24px;
  padding: 0 9px;
}

.import-preflight-counts span,
.import-preflight-issues span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.import-preflight-rows article {
  min-width: 150px;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.import-preflight-rows strong,
.import-preflight-rows span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.import-preflight-rows strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 880;
}

.import-preflight-rows span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.import-repair-workbench,
.import-batch-details {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(91, 120, 190, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.import-repair-head,
.import-batch-details-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.import-repair-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.import-repair-head span,
.import-batch-details-head span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.import-repair-head strong,
.import-batch-details h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.import-repair-head em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.import-review-issue-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.import-review-issue-card {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 92px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(91, 120, 190, 0.12);
  border-radius: 10px;
  background: rgba(246, 251, 255, 0.82);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.import-review-issue-card:hover {
  border-color: rgba(91, 120, 190, 0.32);
  background: #fff;
}

.import-review-issue-card span,
.import-review-issue-card strong,
.import-review-issue-card em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.import-review-issue-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.import-review-issue-card strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 920;
  line-height: 1;
}

.import-review-issue-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.import-review-issue-card.is-empty {
  cursor: default;
}

.import-repair-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.import-repair-group {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.86);
}

.import-repair-group.is-blocking {
  border-color: rgba(207, 82, 82, 0.22);
  background: rgba(255, 247, 247, 0.9);
}

.import-repair-group.is-duplicate {
  border-color: rgba(232, 135, 155, 0.22);
  background: rgba(255, 248, 251, 0.9);
}

.import-repair-group.is-review {
  border-color: rgba(91, 120, 190, 0.16);
  background: rgba(246, 251, 255, 0.9);
}

.import-repair-group div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
}

.import-repair-group div:first-child span,
.import-repair-group div:first-child em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
}

.import-repair-group div:first-child strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.import-repair-group p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.import-repair-row-list {
  display: grid;
  gap: 6px;
}

.import-repair-row-card {
  display: grid;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.import-repair-row-card:hover {
  border-color: rgba(91, 120, 190, 0.3);
  background: #fff;
}

.import-repair-row-main {
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.import-repair-row-list strong,
.import-repair-row-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.import-repair-row-list strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.import-repair-row-list span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.import-repair-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.import-repair-row-actions button {
  min-height: 23px;
  padding: 0 7px;
  border: 1px solid rgba(91, 120, 190, 0.16);
  border-radius: 999px;
  background: rgba(246, 251, 255, 0.9);
  color: #476282;
  font-size: 11px;
  font-weight: 780;
  cursor: pointer;
}

.import-repair-row-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.import-batch-detail-card {
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.8);
  overflow: hidden;
}

.import-batch-detail-card summary {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
}

.import-batch-detail-card summary span,
.import-batch-detail-card summary strong,
.import-batch-detail-card summary em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.import-batch-detail-card summary span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 880;
}

.import-batch-detail-card summary strong,
.import-batch-detail-card summary em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.import-batch-detail-body {
  display: grid;
  gap: 9px;
  padding: 0 12px 12px;
}

.import-batch-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.import-batch-detail-grid span,
.import-batch-detail-body p,
.import-batch-detail-issues span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.import-batch-detail-body p {
  margin: 0;
}

.import-batch-detail-body pre {
  max-height: 96px;
  margin: 0;
  padding: 9px 10px;
  overflow: auto;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.import-batch-detail-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.import-batch-detail-issues span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.import-flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.import-flow-steps span,
.import-dialog-grid article,
.import-mapping-table div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  overflow-wrap: anywhere;
}

.import-flow-steps span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.import-flow-steps .is-done {
  color: var(--pink-strong);
  background: var(--pink-soft);
}

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

.import-dialog-grid span,
.import-dialog-grid strong,
.import-mapping-table span,
.import-mapping-table strong {
  display: block;
}

.import-dialog-grid span,
.import-mapping-table span {
  color: var(--muted);
  font-size: 12px;
}

.import-dialog-grid strong,
.import-mapping-table strong {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 850;
}

.import-mapping-table {
  display: grid;
  gap: 8px;
}

.import-mapping-table h3 {
  font-size: 14px;
}

.order-column-panel {
  display: grid;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.66);
}

.order-column-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.order-column-panel-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.order-column-panel-head h3 {
  margin-bottom: 4px;
  font-size: 15px;
}

.order-column-panel-head p,
.table-status-row {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.order-column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 152px));
  align-items: start;
  gap: 6px;
}

.column-toggle {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 28px 18px;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
  padding: 6px 7px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  cursor: grab;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
  will-change: transform;
}

.column-toggle:active {
  cursor: grabbing;
}

.column-toggle.is-dragging {
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.08);
  opacity: 0.42;
  transform: scale(0.97);
}

.column-toggle.drag-over {
  border-color: rgba(139, 92, 246, 0.46);
  background: rgba(255, 245, 250, 0.94);
}

.column-toggle.drop-before,
.column-toggle.drop-after {
  box-shadow: 0 10px 20px rgba(45, 62, 90, 0.08);
}

.column-toggle.drop-before {
  transform: translateX(3px);
}

.column-toggle.drop-after {
  transform: translateX(-3px);
}

.column-drop-placeholder {
  display: grid;
  min-height: 32px;
  place-items: center;
  border: 1px dashed rgba(236, 72, 153, 0.54);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 241, 246, 0.94), rgba(238, 248, 255, 0.86));
  color: var(--pink-strong);
  font-size: 11px;
  font-weight: 850;
  opacity: 0.94;
  outline: 2px solid rgba(236, 72, 153, 0.08);
  outline-offset: -4px;
  transform: scale(1);
  animation: column-placeholder-in 0.14s ease-out;
}

.column-drop-placeholder span {
  pointer-events: none;
}

@keyframes column-placeholder-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 0.94;
    transform: scale(1);
  }
}

.column-toggle input[type="checkbox"] {
  justify-self: start;
  margin: 0;
}

.column-toggle-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
}

.column-toggle small {
  justify-self: end;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}

.column-toggle.is-default small {
  color: var(--pink-strong);
}

.column-drag-handle {
  display: grid;
  place-items: center;
  width: 18px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1;
}

.column-drag-handle:hover,
.column-drag-handle:focus-visible {
  background: rgba(236, 72, 153, 0.1);
  color: var(--pink-strong);
}

body.is-order-column-dragging {
  cursor: grabbing;
  user-select: none;
}

.column-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-color: rgba(236, 72, 153, 0.46);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 38px rgba(17, 24, 39, 0.18), 0 5px 14px rgba(236, 72, 153, 0.16);
  opacity: 0;
  transform-origin: left top;
  transition: opacity 0.12s ease, box-shadow 0.12s ease;
}

.column-drag-ghost.is-active {
  opacity: 0.96;
}

.column-drag-ghost input[type="checkbox"] {
  opacity: 1;
}

.column-drag-ghost .column-drag-handle {
  background: rgba(236, 72, 153, 0.1);
  color: var(--pink-strong);
  cursor: grabbing;
}

.table-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.44);
}

.table-status-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.table-status-row span:first-child {
  color: var(--ink);
  font-weight: 820;
}

.table-action-buttons {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.table-action-buttons .ghost-button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 12px;
}

.service-consult-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.service-consult-head h3 {
  margin-bottom: 4px;
  font-size: 15px;
}

.service-consult-head p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.service-consult-list {
  display: grid;
  gap: 8px;
}

.service-consult-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--radius-card);
  background: #ffffff;
}

.service-consult-card strong,
.service-consult-card span,
.service-consult-card small {
  display: block;
}

.service-consult-card span,
.service-consult-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

label {
  display: grid;
  gap: 6px;
}

label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  outline: none;
}

input,
select {
  min-width: 0;
  height: 38px;
  padding: 0 12px;
}

input[type="checkbox"] {
  width: 16px;
  max-width: 16px;
  inline-size: 16px;
  min-width: 16px;
  height: 16px;
  max-height: 16px;
  block-size: 16px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 4px;
  accent-color: var(--pink);
}

textarea {
  resize: vertical;
  padding: 10px 12px;
  line-height: 1.55;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(232, 135, 155, 0.14);
}

.table-wrap {
  width: 100%;
  overflow: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid rgba(57, 125, 170, 0.12);
  background: rgba(255, 255, 255, 0.64);
}

table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.orders-panel table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.orders-panel thead {
  position: static;
  top: auto;
  z-index: auto;
}

.orders-panel th,
.orders-panel td {
  width: auto;
  max-width: none;
  padding-right: 5px;
  padding-left: 5px;
  font-size: 10.8px;
}

.orders-panel .select-column {
  width: auto;
  min-width: 0;
  text-align: center;
}

.orders-panel .select-column input {
  width: 16px;
  height: 16px;
  accent-color: var(--pink);
}

th,
td {
  max-width: 260px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th {
  position: static;
  top: auto;
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(20px);
}

.orders-panel .table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 0 0 8px 8px;
}

.orders-panel th {
  z-index: 3;
  min-height: 38px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: 2px solid rgba(57, 125, 170, 0.26);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(238, 248, 255, 0.99));
  color: #203a54;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: normal;
  box-shadow: 0 12px 22px rgba(45, 62, 90, 0.11);
  text-align: center;
}

.orders-panel th:first-child {
  border-top-left-radius: 8px;
}

.orders-panel th:last-child {
  border-top-right-radius: 8px;
}

.order-table-heading {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.table-sort-button {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  width: 100%;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  text-align: center;
}

.table-sort-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.table-sort-button em {
  min-width: 10px;
  color: var(--pink-strong);
  font-style: normal;
  font-weight: 950;
}

.table-sort-button:not(:disabled):hover {
  color: var(--pink-strong);
}

.table-sort-button:disabled {
  cursor: default;
}

.table-sort-button.is-active {
  color: #172033;
}

.orders-panel td {
  background: #ffffff;
}

.orders-panel tbody tr:nth-child(even) td {
  background: #ffffff;
}

.orders-panel .cell-main {
  color: #172033;
  font-weight: 850;
}

.orders-panel .cell-sub {
  color: #8490a3;
  font-size: 10px;
  font-weight: 700;
}

.order-staging-preview {
  display: inline-flex;
  width: 42px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  object-fit: cover;
}

.order-staging-preview-button {
  display: inline-grid;
  width: 46px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: zoom-in;
}

.order-staging-preview.no-image {
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.order-staging-preview-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.image-preview-dialog {
  width: min(880px, calc(100vw - 40px));
  max-width: 96vw;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(10, 18, 30, 0.94);
}

.image-preview-dialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
}

.image-preview-dialog form {
  position: relative;
  display: grid;
  min-height: 220px;
  place-items: center;
  padding: 34px 16px 16px;
  background: transparent;
}

.image-preview-dialog img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  border-radius: 6px;
  object-fit: contain;
}

.image-preview-close {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.schedule-state-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--blue-soft);
  color: var(--blue-strong);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.schedule-state-chip.pending {
  border-color: rgba(232, 135, 155, 0.34);
  background: rgba(255, 241, 245, 0.76);
  color: var(--pink-strong);
  border-style: dashed;
}

.schedule-state-chip.locked,
.schedule-state-chip.manual-lock {
  background: rgba(238, 247, 255, 0.94);
  color: var(--blue-strong);
}

.schedule-state-chip.final-paid,
.schedule-state-chip.done {
  background: rgba(235, 250, 244, 0.92);
  color: #23815b;
}

.schedule-state-chip.cancel {
  background: var(--red-soft);
  color: var(--red);
}

#ordersWorkspace .order-grid-cell[data-order-column="mainAction"] .ghost-button {
  width: 100%;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 11px;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover,
tbody tr.selected {
  background: linear-gradient(90deg, rgba(255, 241, 245, 0.82), rgba(240, 242, 255, 0.72));
}

.cell-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 780;
}

.cell-sub {
  min-width: 0;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clamp-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--pink-soft);
  color: var(--pink-strong);
  font-size: 12px;
  font-weight: 800;
}

.status-chip.done {
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.status-chip.info {
  border-color: rgba(109, 168, 206, 0.24);
  background: #f1f7ff;
  color: #365f8b;
}

.status-chip.cancel {
  background: var(--red-soft);
  color: var(--red);
}

.detail-panel {
  position: sticky;
  top: 22px;
  min-width: 0;
  padding: 20px;
}

.detail-empty {
  display: grid;
  min-height: 320px;
  place-items: center;
  color: var(--muted);
  font-size: 14px;
}

.detail-content {
  display: grid;
  gap: 18px;
}

.order-detail-dialog {
  width: min(1380px, calc(100vw - 44px));
  max-height: calc(100vh - 36px);
  padding: 0;
  border: 1px solid rgba(57, 125, 170, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f7f4f8 50%, #eef8ff);
  box-shadow: var(--shadow-float);
}

.order-detail-dialog::backdrop {
  background: rgba(17, 24, 39, 0.32);
}

.order-detail-dialog-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100vh - 36px);
}

.order-detail-dialog-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(57, 125, 170, 0.14);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px);
}

.order-detail-dialog-head span,
.order-detail-dialog-head strong {
  display: block;
}

.order-detail-dialog-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.order-detail-dialog-head strong {
  margin-top: 3px;
  font-size: 16px;
  font-weight: 900;
}

.order-detail-dialog-body {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.order-detail-dialog .detail-content {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 0.72fr);
  grid-template-areas:
    "hero hero"
    "status status"
    "summary payment"
    "staging actions"
    "staging history"
    "staging timeline"
    "customer timeline"
    "execution overview"
    "copy overview"
    "save readonly";
  align-items: start;
  gap: 12px;
  max-width: none;
}

.order-detail-dialog .detail-head { grid-area: hero; }
.order-detail-dialog .detail-status-strip { grid-area: status; }
.order-detail-dialog .detail-grid { grid-area: summary; }
.order-detail-dialog .payment-section { grid-area: payment; }
.order-detail-dialog .staging-section { grid-area: staging; }
.order-detail-dialog .customer-note-section { grid-area: customer; }
.order-detail-dialog .execution-note-section { grid-area: execution; }
.order-detail-overview-section { grid-area: overview; }
.order-detail-dialog .customer-history-section { grid-area: history; }
.order-detail-dialog .copy-section { grid-area: copy; }
.order-detail-dialog .timeline-section { grid-area: timeline; }
.order-detail-dialog .action-grid { grid-area: actions; }
.order-detail-dialog #detailReadonlyNotice { grid-area: readonly; }
.order-detail-dialog #saveOrderEdits { grid-area: save; }

.detail-status-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.detail-status-step {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(57, 125, 170, 0.14);
  border-radius: 8px;
  background: #ffffff;
}

.detail-status-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: rgba(91, 120, 190, 0.16);
}

.detail-status-step strong,
.detail-status-step em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-status-step strong {
  color: #1f314f;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.detail-status-step em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.detail-status-step.is-done {
  background: rgba(236, 250, 244, 0.94);
}

.detail-status-step.is-done::before {
  background: var(--green);
}

.detail-status-step.is-active {
  border-color: rgba(232, 135, 155, 0.28);
  background: rgba(255, 247, 250, 0.96);
}

.detail-status-step.is-active::before {
  background: var(--pink);
}

.detail-status-step.is-cancel::before {
  background: var(--red);
}

.hidden,
.detail-content.hidden {
  display: none !important;
}

.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(57, 125, 170, 0.16);
  border-radius: 8px;
  background: linear-gradient(90deg, #ffffff, rgba(255, 242, 246, 0.82) 48%, rgba(238, 248, 255, 0.86));
  box-shadow: 0 8px 22px rgba(37, 56, 102, 0.06);
}

.detail-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 850;
}

#detailMeta {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.detail-grid,
.payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
}

.detail-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.payment-grid {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.order-detail-dialog .detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-grid > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
}

.detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.detail-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

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

.customer-history-grid div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.78);
}

.customer-history-grid span,
.customer-history-grid strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-history-grid span {
  color: var(--muted);
  font-size: 11px;
}

.customer-history-grid strong {
  margin-top: 4px;
  font-size: 13px;
}

.customer-history-list {
  display: grid;
  gap: 6px;
}

.customer-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
}

.customer-history-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-history-item strong {
  color: var(--pink-strong);
  font-size: 12px;
}

.detail-section {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(57, 125, 170, 0.14);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, var(--section-neutral));
  box-shadow: 0 6px 18px rgba(37, 56, 102, 0.04);
}

.detail-section::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent-blue);
  content: "";
}

.detail-section h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
}

.detail-section h3::before {
  display: inline-block;
  width: 4px;
  height: 14px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--gradient-accent);
  vertical-align: -2px;
  content: "";
}

.detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(91, 120, 190, 0.12);
  background: transparent;
}

.detail-section-head > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}

.payment-section,
.staging-section {
  border-color: rgba(232, 135, 155, 0.22);
}

.payment-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 250, 0.9));
}

.payment-section::before,
.customer-note-section::before,
.copy-section::before,
.action-grid::before {
  background: var(--accent-pink);
}

.staging-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(238, 248, 255, 0.96));
}

.staging-section::before,
.order-detail-overview-section::before,
.customer-history-section::before {
  background: var(--accent-blue);
}

.execution-note-section {
  border-color: rgba(212, 129, 122, 0.22);
  background: linear-gradient(180deg, #ffffff, var(--section-amber));
}

.execution-note-section::before,
.timeline-section::before {
  background: var(--accent-amber);
}

.staging-section .detail-section-head {
  border-bottom-color: rgba(109, 168, 206, 0.22);
}

.order-detail-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.order-detail-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
}

.order-detail-table th,
.order-detail-table td {
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 12px;
}

.order-detail-table tr:last-child th,
.order-detail-table tr:last-child td {
  border-bottom: 0;
}

.order-detail-table th {
  width: 116px;
  background: #f7f9fb;
  color: var(--muted);
  font-weight: 850;
  text-align: left;
}

.order-detail-table td {
  color: var(--text);
  font-weight: 760;
  overflow-wrap: anywhere;
}

.order-detail-facts {
  display: grid;
  gap: 8px;
}

.order-detail-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.order-detail-fact {
  min-width: 0;
  padding: 8px 9px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: rgba(248, 250, 253, 0.68);
}

.order-detail-fact.wide {
  grid-column: 1 / -1;
}

.order-detail-fact span,
.order-detail-secondary dt {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.order-detail-fact strong,
.order-detail-secondary dd {
  display: block;
  min-width: 0;
  margin: 4px 0 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.order-detail-secondary {
  border-top: 1px solid rgba(17, 24, 39, 0.07);
  padding-top: 8px;
}

.order-detail-secondary summary {
  color: var(--blue-strong);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.order-detail-secondary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 10px 0 0;
}

.copy-tools {
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(120px, 1fr) minmax(100px, auto);
  gap: 8px;
  align-items: end;
}

.copy-tools label {
  min-width: 0;
}

.staging-order-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(109, 168, 206, 0.18);
  border-radius: 8px;
  background: rgba(246, 251, 255, 0.74);
}

.staging-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.staging-order-actions .ghost-button {
  flex: 1 1 120px;
}

.staging-scene-summary {
  min-height: 70px;
  white-space: pre-line;
  padding: 10px;
  border: 1px dashed rgba(109, 168, 206, 0.3);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.55;
}

.staging-reference-preview {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(232, 135, 155, 0.18);
  border-radius: 8px;
  background: #fff8fb;
}

.staging-reference-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.staging-reference-preview-head strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.staging-reference-preview-head span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staging-reference-preview-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.staging-reference-preview-strip img,
.staging-reference-empty {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(232, 135, 155, 0.18);
  border-radius: 7px;
  background: #fff;
}

.staging-reference-preview-strip img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.staging-reference-empty {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.staging-section textarea {
  min-height: 260px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.65;
}

.staging-library-picker {
  padding: 9px 10px;
  border: 1px dashed rgba(109, 168, 206, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}

.staging-library-picker summary {
  color: var(--blue-strong);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.staging-library-picker label {
  margin-top: 10px;
}

.staging-library-picker select[multiple] {
  min-height: 210px;
  white-space: normal;
}

.customer-note-section textarea,
.execution-note-section textarea {
  min-height: 118px;
  line-height: 1.6;
}

.timeline {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  padding: 8px 10px;
  border-left: 3px solid rgba(232, 135, 155, 0.28);
  border-radius: 6px;
  background: rgba(248, 250, 253, 0.82);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.timeline strong {
  display: block;
  color: var(--text);
}

.timeline span {
  color: var(--muted);
  font-size: 12px;
}

.action-grid {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(232, 135, 155, 0.2);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, var(--section-pink));
}

.action-grid::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent-pink);
  content: "";
}

.order-detail-dialog {
  width: min(1280px, calc(100vw - 28px));
  height: calc(100vh - 28px);
  max-height: 720px;
}

.order-detail-dialog-frame {
  height: 100%;
  max-height: none;
}

.order-detail-dialog-head {
  min-height: 52px;
  padding: 8px 12px;
}

.order-detail-dialog-head span,
.order-detail-dialog-head em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.25;
}

.order-detail-dialog-head strong {
  margin-top: 1px;
  font-size: 15px;
  line-height: 1.2;
}

.order-detail-dialog-head em {
  margin-top: 2px;
}

.order-detail-dialog-body {
  overflow: hidden;
  padding: 10px;
}

.order-detail-dialog .detail-content {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.92fr) minmax(0, 0.82fr);
  grid-template-rows: 54px 70px minmax(150px, 1fr) 88px 40px;
  grid-template-areas:
    "hero status status payment"
    "summary summary actions payment"
    "staging staging overview history"
    "customer execution overview timeline"
    "copy copy save readonly";
  gap: 8px;
  max-width: none;
  min-height: 0;
}

.order-detail-dialog .detail-head,
.order-detail-dialog .detail-section,
.order-detail-dialog .action-grid,
.order-detail-dialog #saveOrderEdits,
.order-detail-dialog #detailReadonlyNotice {
  min-height: 0;
}

.order-detail-dialog .detail-head {
  padding: 8px 10px;
  gap: 8px;
  box-shadow: none;
}

.order-detail-dialog .detail-kicker {
  margin-bottom: 2px;
  font-size: 10px;
}

.order-detail-dialog .detail-head h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.15;
}

.order-detail-dialog #detailMeta {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
}

.order-detail-dialog .status-chip {
  min-height: 22px;
  padding: 2px 8px;
  font-size: 10px;
}

.order-detail-dialog .detail-status-strip {
  gap: 5px;
}

.order-detail-dialog .detail-status-step {
  gap: 2px;
  padding: 7px 8px 5px;
}

.order-detail-dialog .detail-status-step strong,
.order-detail-dialog .detail-status-step em {
  white-space: normal;
}

.order-detail-dialog .detail-status-step strong {
  font-size: 11px;
}

.order-detail-dialog .detail-status-step em {
  font-size: 10px;
}

.order-detail-dialog .detail-grid,
.order-detail-dialog .payment-grid {
  gap: 6px;
}

.order-detail-dialog .detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.order-detail-dialog .detail-grid > div {
  padding: 7px 8px;
  border-radius: 7px;
}

.order-detail-dialog .detail-grid span,
.order-detail-dialog label span {
  font-size: 10px;
  line-height: 1.2;
}

.order-detail-dialog .detail-grid strong {
  margin-top: 3px;
  font-size: 12px;
}

.order-detail-dialog .detail-section {
  gap: 6px;
  padding: 8px 9px 8px 10px;
  border-radius: 7px;
  box-shadow: none;
}

.order-detail-dialog .detail-section-head {
  min-height: 22px;
  padding-bottom: 5px;
}

.order-detail-dialog .detail-section h3 {
  font-size: 12px;
}

.order-detail-dialog .detail-section h3::before {
  height: 12px;
  margin-right: 6px;
}

.order-detail-dialog .detail-section-head > span,
.order-detail-dialog .muted {
  font-size: 10.5px;
  line-height: 1.35;
}

.order-detail-dialog input,
.order-detail-dialog select {
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
}

.order-detail-dialog textarea {
  min-height: 0;
  padding: 7px 8px;
  resize: none;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.order-detail-dialog .payment-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.order-detail-dialog .payment-section p {
  margin: 0;
}

.order-detail-dialog .action-grid {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  padding: 8px 9px 8px 10px;
  box-shadow: none;
}

.order-detail-dialog .action-grid button,
.order-detail-dialog #saveOrderEdits,
.order-detail-dialog .copy-tools button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

.order-detail-dialog .staging-section {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.order-detail-dialog .staging-order-tools {
  gap: 6px;
  padding: 7px;
  border-radius: 7px;
}

.order-detail-dialog .staging-scene-summary {
  min-height: 28px;
  padding: 6px 7px;
  font-size: 10.5px;
  line-height: 1.35;
}

.order-detail-dialog .staging-reference-preview {
  gap: 4px;
  padding: 6px;
  border-radius: 7px;
}

.order-detail-dialog .staging-reference-preview-head strong,
.order-detail-dialog .staging-reference-preview-head span {
  font-size: 10.5px;
}

.order-detail-dialog .staging-reference-preview-strip {
  gap: 5px;
}

.order-detail-dialog .staging-reference-preview-strip img,
.order-detail-dialog .staging-reference-empty {
  min-height: 28px;
  border-radius: 6px;
}

.order-detail-dialog .staging-reference-empty {
  padding: 5px 7px;
  font-size: 10.5px;
  line-height: 1.25;
}

.order-detail-dialog .staging-section textarea {
  min-height: 48px;
}

.order-detail-dialog .staging-library-picker {
  padding: 5px 7px;
  border-radius: 7px;
}

.order-detail-dialog .staging-library-picker summary {
  font-size: 10.5px;
}

.order-detail-dialog .staging-library-picker select[multiple] {
  min-height: 72px;
}

.order-detail-dialog .customer-note-section textarea,
.order-detail-dialog .execution-note-section textarea {
  min-height: 46px;
}

.order-detail-dialog .order-detail-fact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.order-detail-dialog .order-detail-fact {
  padding: 5px 6px;
}

.order-detail-dialog .order-detail-fact span,
.order-detail-dialog .order-detail-secondary dt {
  font-size: 10px;
}

.order-detail-dialog .order-detail-fact strong,
.order-detail-dialog .order-detail-secondary dd {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.25;
}

.order-detail-dialog .order-detail-secondary {
  padding-top: 5px;
}

.order-detail-dialog .order-detail-secondary summary {
  font-size: 10.5px;
}

.order-detail-dialog .customer-history-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.order-detail-dialog .customer-history-grid div,
.order-detail-dialog .customer-history-item {
  padding: 5px 6px;
  border-radius: 7px;
}

.order-detail-dialog .customer-history-grid span,
.order-detail-dialog .customer-history-item span {
  font-size: 10px;
}

.order-detail-dialog .customer-history-grid strong,
.order-detail-dialog .customer-history-item strong {
  margin-top: 2px;
  font-size: 10.5px;
}

.order-detail-dialog .customer-history-list {
  gap: 4px;
}

.order-detail-dialog .copy-tools {
  grid-template-columns: 1fr minmax(90px, 0.8fr) 1fr;
  gap: 6px;
  align-items: end;
}

.order-detail-dialog .timeline {
  gap: 4px;
}

.order-detail-dialog .timeline li {
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  line-height: 1.3;
}

.order-detail-dialog .timeline strong {
  font-size: 10.5px;
}

.order-detail-dialog #saveOrderEdits {
  align-self: stretch;
}

.order-detail-dialog #detailReadonlyNotice {
  align-self: stretch;
  padding: 8px 10px;
  font-size: 11px;
}

dialog {
  width: min(420px, calc(100vw - 32px));
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-panel);
  background: var(--surface-strong);
  box-shadow: var(--shadow-float);
}

.form-dialog {
  width: min(640px, calc(100vw - 32px));
}

dialog::backdrop {
  background: rgba(28, 28, 30, 0.22);
  backdrop-filter: blur(8px);
}

dialog form {
  display: grid;
  gap: 14px;
}

dialog h2 {
  font-size: 18px;
}

dialog p {
  color: var(--muted);
  line-height: 1.6;
}

.dialog-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

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

.dialog-error {
  min-height: 18px;
  color: var(--red);
  font-size: 12px;
  font-weight: 750;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.module-view {
  min-height: calc(100vh - 250px);
}

.module-grid,
.analytics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.module-panel {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(111, 169, 216, 0.16);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), var(--section-neutral));
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(24px);
}

.module-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-pink));
  content: "";
}

.module-panel.wide {
  min-width: 0;
}

.schedule-page-grid {
  grid-template-columns: minmax(0, 1fr);
}

.schedule-deferred-panels {
  display: contents;
}

.schedule-deferred-loading {
  min-height: 120px;
  align-content: center;
}

.schedule-deferred-loading strong,
.schedule-deferred-loading span {
  display: block;
}

.schedule-deferred-loading span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.analytics-layout .wide {
  grid-column: 1 / -1;
}

.module-panel h2 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 850;
}

.config-grid,
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.content-focus-card {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(232, 135, 155, 0.22);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(255, 246, 250, 0.98), rgba(239, 249, 255, 0.94));
  box-shadow: inset 4px 0 0 var(--accent-pink);
}

.content-focus-card strong,
.content-focus-card span {
  display: block;
}

.content-focus-card strong {
  font-size: 14px;
  font-weight: 850;
}

.content-focus-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.content-editor {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.content-editor-section {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(111, 169, 216, 0.16);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #ffffff, var(--section-blue));
}

.content-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -14px -14px 0;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(111, 169, 216, 0.14);
  background: rgba(247, 251, 255, 0.88);
}

.content-section-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 850;
}

.content-form-grid,
.content-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.content-row-list {
  display: grid;
  gap: 10px;
}

.content-row {
  padding: 12px;
  border: 1px solid rgba(43, 58, 84, 0.09);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #ffffff, rgba(251, 252, 255, 0.9));
  box-shadow: inset 3px 0 0 rgba(111, 169, 216, 0.24);
}

.content-row.is-filtered-hidden {
  display: none;
}

.staging-tools {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(109, 168, 206, 0.22);
  border-radius: var(--radius-card);
  background: rgba(248, 251, 255, 0.92);
  box-shadow: inset 3px 0 0 rgba(111, 169, 216, 0.34);
}

.staging-work-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(111, 169, 216, 0.22);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #ffffff, var(--section-blue));
  box-shadow: inset 4px 0 0 var(--accent-blue);
}

.staging-work-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.staging-work-head h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 900;
}

.staging-work-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.staging-work-head > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(92, 132, 178, 0.22);
  border-radius: 999px;
  background: #f5f9ff;
  color: #365f8b;
  font-size: 12px;
  font-weight: 850;
}

.staging-work-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.staging-work-metrics article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.staging-work-metrics span,
.staging-work-metrics small {
  color: var(--muted);
  font-size: 11px;
}

.staging-work-metrics strong {
  font-size: 20px;
  font-weight: 900;
}

.staging-work-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.staging-execution-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(212, 129, 122, 0.22);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #ffffff, var(--section-amber));
  box-shadow: inset 4px 0 0 var(--accent-amber);
}

.staging-execution-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.staging-execution-summary article {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(212, 129, 122, 0.16);
  border-radius: 6px;
  background: #fff;
}

.staging-execution-summary span {
  color: var(--muted);
  font-size: 11px;
}

.staging-execution-summary strong {
  font-size: 19px;
  font-weight: 900;
}

.staging-execution-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.staging-execution-list {
  display: grid;
  gap: 8px;
}

.staging-execution-row {
  display: grid;
  grid-template-columns: 130px minmax(260px, 1fr) 168px auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(212, 129, 122, 0.14);
  border-radius: 6px;
  background: #fff;
}

.staging-execution-row.overdue {
  border-color: rgba(245, 158, 11, 0.32);
  background: #fffaf0;
}

.staging-exec-time,
.staging-exec-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.staging-exec-time strong,
.staging-exec-main strong {
  font-weight: 900;
}

.staging-exec-time span,
.staging-exec-main span,
.staging-exec-main small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.staging-exec-main span,
.staging-exec-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staging-exec-images {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 5px;
  min-height: 34px;
  align-items: center;
}

.staging-exec-images img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.staging-exec-no-image {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.staging-exec-actions {
  justify-content: flex-end;
  white-space: nowrap;
}

.staging-image-queue-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0;
  border: 1px solid rgba(242, 122, 154, 0.24);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #ffffff, var(--section-pink));
  box-shadow: inset 4px 0 0 var(--accent-pink);
}

.staging-image-queue-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 247, 251, 0.82);
}

.staging-image-queue-summary article {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(236, 72, 153, 0.14);
  border-radius: 6px;
  background: #fff;
}

.staging-image-queue-summary span {
  color: var(--muted);
  font-size: 11px;
}

.staging-image-queue-summary strong {
  font-size: 19px;
  font-weight: 900;
}

.staging-image-queue-list {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
}

.staging-image-queue-row {
  display: grid;
  grid-template-columns: 78px minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(242, 122, 154, 0.12);
  border-radius: 6px;
  background: #fff;
}

.staging-image-queue-row.missing-main {
  border-color: rgba(236, 72, 153, 0.24);
  background: #fff7fb;
}

.staging-image-queue-thumb .staging-table-thumb {
  width: 64px;
  height: 48px;
}

.staging-image-queue-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.staging-image-queue-main strong {
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staging-image-queue-main > span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staging-image-queue-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staging-image-queue-actions {
  justify-content: flex-end;
  white-space: nowrap;
}

.staging-hot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 2px;
}

.staging-hot-list strong,
.staging-hot-list span {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.staging-hot-list strong {
  color: #334155;
  background: #eef2f7;
}

.staging-hot-list span {
  color: #365f8b;
  background: #f1f7ff;
}

.staging-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.staging-tools-head h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 850;
}

.staging-tools-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.staging-filter-grid,
.staging-batch-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}

.staging-filter-grid-compact {
  max-width: 760px;
}

.staging-quick-add-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.staging-quick-add-bar > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.staging-batch-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 12px;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.staging-filter-grid label,
.staging-batch-bar label {
  min-width: 0;
}

.staging-gallery-panel {
  position: relative;
  display: grid;
  gap: 0;
  border: 1px solid rgba(111, 169, 216, 0.2);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, #ffffff, var(--section-blue));
  overflow: hidden;
  box-shadow: inset 4px 0 0 rgba(111, 169, 216, 0.34);
}

.staging-gallery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 251, 255, 0.88);
}

.staging-gallery-head h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 900;
}

.staging-gallery-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.staging-gallery-head > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--blue-strong);
  font-size: 12px;
  font-weight: 850;
}

.staging-gallery-table-wrap {
  width: 100%;
  overflow: auto;
}

.staging-gallery-table {
  min-width: 1520px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.staging-gallery-table th,
.staging-gallery-table td {
  padding: 8px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staging-gallery-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef3f5;
  color: #3f4b5d;
  font-size: 11px;
  font-weight: 850;
}

.staging-gallery-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(255, 241, 245, 0.72), rgba(240, 242, 255, 0.58));
}

.staging-gallery-table tbody tr.needs-gallery-update {
  background: #fff7fb;
}

.staging-gallery-table tbody tr.needs-gallery-update:hover {
  background: #fff0f7;
}

.staging-deferred-loading {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px dashed rgba(109, 168, 206, 0.3);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(247, 251, 255, 0.96), rgba(255, 244, 249, 0.82));
}

.staging-deferred-loading strong,
.staging-deferred-loading span {
  display: block;
}

.staging-deferred-loading strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.staging-deferred-loading span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.staging-full-editor-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(242, 122, 154, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 244, 249, 0.96), rgba(238, 248, 255, 0.92));
}

.staging-full-editor-notice.is-open {
  border-color: rgba(57, 125, 170, 0.18);
  background: rgba(247, 251, 255, 0.94);
}

.staging-full-editor-notice strong,
.staging-full-editor-notice span {
  display: block;
}

.staging-full-editor-notice strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.staging-full-editor-notice span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.staging-gallery-table th:first-child,
.staging-gallery-table td:first-child {
  width: 84px;
}

.staging-table-thumb {
  display: block;
  width: 62px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  object-fit: cover;
  background: #f4f7fa;
}

.staging-table-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.staging-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.status-chip.warn {
  background: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}

.staging-detail-dialog {
  width: min(1180px, calc(100vw - 56px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-float);
}

.staging-detail-dialog::backdrop {
  background: rgba(17, 24, 39, 0.32);
}

.staging-detail-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100vh - 48px);
}

.staging-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #f7f9fb;
}

.staging-detail-head span,
.staging-detail-head strong {
  display: block;
}

.staging-detail-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.staging-detail-head strong {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 900;
}

.staging-detail-body {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.staging-detail-images {
  display: grid;
  align-content: start;
  gap: 10px;
}

.staging-detail-main-image,
.staging-detail-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #f4f7fa;
}

.staging-detail-main-image {
  object-fit: cover;
}

.staging-detail-image-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.staging-reference-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.staging-reference-strip img,
.staging-reference-strip span {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8fafc;
}

.staging-reference-strip img {
  object-fit: cover;
}

.staging-reference-strip span {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.staging-detail-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
}

.staging-detail-info div,
.staging-detail-notes article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.staging-detail-info span,
.staging-detail-notes span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.staging-detail-info strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.staging-detail-notes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.staging-detail-notes p {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.content-field-wide {
  grid-column: span 3;
}

.content-toggle {
  display: grid;
  min-height: 38px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
}

.content-toggle input {
  position: relative;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  appearance: none;
  background: #edf1f6;
  box-shadow: inset 0 1px 3px rgba(35, 43, 58, 0.08);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.content-toggle input::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(35, 43, 58, 0.18);
  content: "";
  transition: transform 160ms ease;
}

.content-toggle input:checked {
  border-color: rgba(232, 135, 155, 0.42);
  background: var(--gradient-accent);
  box-shadow: 0 6px 16px rgba(232, 135, 155, 0.18);
}

.content-toggle input:checked::after {
  transform: translateX(18px);
}

.content-toggle input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.content-toggle span {
  order: -1;
  font-size: 12px;
  font-weight: 750;
}

.stack-list {
  display: grid;
  gap: 10px;
}

.mini-card,
.notice-card,
.analytics-card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(43, 58, 84, 0.09);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #ffffff, var(--section-neutral));
  box-shadow: 0 10px 24px rgba(35, 43, 58, 0.055);
}

.notice-card {
  border-color: rgba(111, 169, 216, 0.16);
  background: linear-gradient(180deg, #ffffff, var(--section-blue));
}

.analytics-card {
  border-color: rgba(52, 185, 131, 0.16);
  background: linear-gradient(180deg, #ffffff, var(--section-green));
}

.mini-card strong,
.mini-card span,
.mini-card small {
  display: block;
}

.mini-card span,
.mini-card small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.import-repair-todo-list {
  gap: 8px;
}

.import-repair-todo {
  border-color: rgba(232, 135, 155, 0.24);
  background: linear-gradient(135deg, #fff8fb, #f7fbff);
  box-shadow: none;
}

.import-repair-todo strong {
  color: #26324a;
}

.import-repair-todo em {
  display: block;
  margin-top: 8px;
  color: #8d3f58;
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.5;
}

.import-batch-report {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 114, 182, 0.18);
  border-radius: 8px;
  background: #fff5f8;
}

.import-batch-report span:first-child {
  color: #9d174d;
  font-weight: 850;
}

.import-batch-report em {
  color: #be185d;
  font-size: 12px;
  font-style: normal;
}

.content-sync-card,
.content-history-card {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.content-sync-card strong,
.content-history-card strong,
.acceptance-handoff-card strong {
  font-size: 13px;
}

.content-sync-card span,
.content-history-card span,
.acceptance-handoff-card li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.project-progress-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.project-progress-column {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius-card);
  background: #ffffff;
}

.project-progress-head {
  display: grid;
  gap: 4px;
}

.project-progress-head strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.project-progress-head span {
  color: var(--muted);
  font-size: 11px;
}

.project-progress-list {
  display: grid;
  gap: 8px;
}

.project-progress-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 3px 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 8px;
}

.project-progress-item span {
  grid-row: span 2;
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
}

.project-progress-item strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.project-progress-item small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.project-progress-item.is-done {
  border-color: rgba(25, 135, 84, 0.2);
  background: #f6fff9;
}

.project-progress-item.is-done span {
  background: #d9f8e5;
  color: #166534;
}

.project-progress-item.is-blocked {
  border-color: rgba(236, 72, 153, 0.18);
  background: #fff7fb;
}

.project-progress-item.is-blocked span {
  background: #ffe0ef;
  color: #9d174d;
}

.acceptance-handoff-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.acceptance-verification-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(109, 168, 206, 0.16);
  border-radius: var(--radius-card);
  background: #f7fbff;
}

.acceptance-verification-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.acceptance-verification-head > div {
  display: grid;
  gap: 4px;
}

.acceptance-verification-head strong {
  font-size: 13px;
}

.acceptance-verification-head span {
  color: var(--muted);
  font-size: 11px;
}

.acceptance-verification-list {
  display: grid;
  gap: 8px;
}

.acceptance-verification-row {
  display: grid;
  grid-template-columns: 72px minmax(120px, 0.8fr) minmax(0, 1.8fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 8px;
  background: #ffffff;
}

.acceptance-verification-row.is-passed {
  border-color: rgba(25, 135, 84, 0.22);
  background: #f5fff9;
}

.acceptance-verification-row.is-issue {
  border-color: rgba(220, 53, 69, 0.22);
  background: #fff7f8;
}

.acceptance-verification-row.is-blocked {
  border-color: rgba(160, 116, 0, 0.24);
  background: #fffaf0;
}

.acceptance-verification-row span,
.acceptance-verification-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.acceptance-verification-row strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.acceptance-verification-row > div:first-of-type {
  display: grid;
  gap: 3px;
}

.acceptance-verification-controls {
  display: grid;
  grid-template-columns: 92px minmax(100px, 0.8fr) minmax(160px, 1.4fr);
  gap: 8px;
}

.acceptance-verification-controls label {
  display: grid;
  gap: 4px;
  margin: 0;
}

.acceptance-verification-controls label span {
  font-size: 10px;
}

.acceptance-verification-controls select,
.acceptance-verification-controls input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
}

.role-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: end;
}

.role-preview-card label {
  margin: 0;
}

.staff-permission-summary {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.staff-permission-summary div,
.staff-permission-summary small {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 8px;
  background: #ffffff;
}

.staff-permission-summary span {
  color: var(--muted);
  font-size: 11px;
}

.staff-permission-summary strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 880;
}

.staff-permission-summary small {
  grid-column: 1 / -1;
  color: #8d3f58;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.5;
  background: #fff8fb;
}

.permission-matrix-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(109, 168, 206, 0.18);
  border-radius: var(--radius-card);
  background: #f7fbff;
}

.compact-head {
  margin-bottom: 0;
}

.permission-matrix-list {
  display: grid;
  gap: 8px;
}

.permission-matrix-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.6fr) repeat(4, minmax(72px, 0.7fr));
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 8px;
  background: #ffffff;
}

.permission-matrix-row div,
.permission-matrix-row small {
  min-width: 0;
}

.permission-matrix-row strong,
.permission-matrix-row span,
.permission-matrix-row small {
  display: block;
}

.permission-matrix-row span,
.permission-matrix-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.permission-matrix-row strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.permission-matrix-row small {
  grid-column: 1 / -1;
  padding-top: 2px;
}

.deployment-check-grid {
  display: grid;
  gap: 10px;
}

.deployment-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  background: var(--gradient-soft);
}

.deployment-summary-card strong,
.deployment-summary-card span {
  display: block;
}

.deployment-summary-card span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.deployment-check-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--radius-card);
  background: #ffffff;
}

.deployment-check-row span:first-child {
  font-weight: 760;
}

.deployment-check-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.5;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag-list span,
.data-status-chip {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-strong);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.compact-tags span {
  background: var(--pink-soft);
  color: var(--pink-strong);
}

.data-status-chip {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.customer-type-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 10.4px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.customer-type-regular {
  border-color: rgba(104, 117, 138, 0.14);
  background: rgba(246, 248, 251, 0.96);
  color: #5e6a7a;
}

.customer-type-member {
  border-color: rgba(242, 122, 154, 0.35);
  background: linear-gradient(90deg, rgba(255, 234, 242, 0.98), rgba(238, 248, 255, 0.96));
  color: var(--pink-strong);
  box-shadow: 0 6px 14px rgba(242, 122, 154, 0.12);
}

.customer-type-trial {
  border-color: rgba(57, 125, 170, 0.24);
  background: rgba(238, 248, 255, 0.98);
  color: var(--blue-strong);
}

.staging-need-cell {
  display: grid;
  gap: 4px;
  align-items: center;
  justify-items: start;
}

.staging-need-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.staging-need-yes {
  border-color: rgba(232, 82, 126, 0.42);
  background: linear-gradient(90deg, #ff4f87, #74b8e8);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(232, 82, 126, 0.18);
}

.staging-need-no {
  border-color: rgba(116, 129, 148, 0.14);
  background: rgba(246, 248, 251, 0.95);
  color: #7a8798;
  font-weight: 800;
}

.staging-need-detail {
  max-width: 100%;
  color: #9d174d;
  font-weight: 760;
}

.orders-panel tbody tr.customer-member-row td {
  background: #ffffff;
}

.orders-panel tbody tr.customer-member-row:hover td,
.orders-panel tbody tr.customer-member-row.selected td {
  background: #ffffff;
}

.orders-panel .tag-list {
  flex-wrap: nowrap;
  overflow: hidden;
}

.orders-panel .tag-list span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.hidden-file-input {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.analytics-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.analytics-card strong {
  display: block;
  margin-top: 8px;
  color: var(--pink);
  font-size: 24px;
  line-height: 1;
}

.data-toolbar {
  display: grid;
  grid-template-columns: 160px 160px auto auto auto;
  gap: 10px;
  align-items: end;
}

.data-toolbar label {
  min-width: 0;
}

.report-box {
  white-space: pre-line;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

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

.bar-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 36px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.bar-row div {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(237, 245, 250, 0.95);
}

.bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-primary);
}

.split-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--radius-card);
  background: #ffffff;
  color: var(--muted);
}

.split-row strong {
  color: var(--text);
}

.audit-list {
  max-height: 560px;
  overflow: auto;
}

@media (max-width: 1280px) {
  body {
    min-width: 1120px;
    padding: 12px;
  }

  .app-shell {
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: calc(100vh - 24px);
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-bar {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

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

  .search-field {
    grid-column: span 3;
  }

  .detail-panel {
    position: static;
  }

  .module-grid,
  .analytics-layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .import-review-issue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .import-repair-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-permission-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-progress-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .acceptance-verification-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .acceptance-verification-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .permission-matrix-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-matrix-row > div:first-child,
  .permission-matrix-row small {
    grid-column: 1 / -1;
  }

  .staging-filter-grid,
  .staging-batch-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .staging-execution-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .staging-image-queue-row {
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: stretch;
  }

  .staging-image-queue-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .staging-execution-filters,
  .staging-execution-summary,
  .staging-image-queue-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .staging-exec-actions {
    justify-content: flex-start;
  }

  .order-detail-dialog .detail-content {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.92fr) minmax(0, 0.82fr);
    grid-template-rows: 54px 70px minmax(150px, 1fr) 88px 40px;
    grid-template-areas:
      "hero status status payment"
      "summary summary actions payment"
      "staging staging overview history"
      "customer execution overview timeline"
      "copy copy save readonly";
  }

  .order-detail-dialog .detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .detail-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .order-detail-dialog .detail-status-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .staging-section {
    min-height: auto;
  }

  .staging-order-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .staging-order-tools label:nth-child(2) {
    grid-row: auto;
  }

  .staging-reference-preview-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staging-detail-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .staging-detail-images {
    grid-template-columns: minmax(320px, 0.6fr) minmax(0, 0.4fr);
  }

  .staging-reference-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

}

/* Final order detail cockpit override. Kept last so older responsive rules cannot break it. */
.order-detail-dialog {
  width: min(1240px, calc(100vw - 28px));
  height: min(720px, calc(100vh - 28px));
  max-height: none;
}

.order-detail-dialog-frame {
  height: 100%;
  max-height: none;
}

.order-detail-dialog-body {
  overflow: hidden;
  padding: 9px;
}

.order-detail-dialog .detail-content {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(280px, 0.82fr);
  grid-template-rows: 54px 118px 118px minmax(82px, 1fr) 38px;
  grid-template-areas:
    "status status actions"
    "confirm payment actions"
    "customer staging overview"
    "execution staging history"
    "copy timeline save";
  gap: 7px;
}

.order-detail-dialog .detail-head {
  display: none;
}

.order-detail-dialog .detail-status-strip { grid-area: status; }
.order-detail-dialog .order-confirm-section { grid-area: confirm; }
.order-detail-dialog .payment-section { grid-area: payment; }
.order-detail-dialog .staging-section { grid-area: staging; }
.order-detail-dialog .customer-note-section { grid-area: customer; }
.order-detail-dialog .execution-note-section { grid-area: execution; }
.order-detail-dialog .order-detail-overview-section { grid-area: overview; }
.order-detail-dialog .customer-history-section { grid-area: history; }
.order-detail-dialog .copy-section { grid-area: copy; }
.order-detail-dialog .timeline-section { grid-area: timeline; }
.order-detail-dialog .action-grid { grid-area: actions; }
.order-detail-dialog #saveOrderEdits,
.order-detail-dialog #detailReadonlyNotice { grid-area: save; }

.order-detail-dialog .detail-section,
.order-detail-dialog .action-grid {
  gap: 5px;
  padding: 7px 8px 7px 10px;
  border-radius: 7px;
  box-shadow: none;
}

.order-detail-dialog .detail-section-head {
  min-height: 20px;
  padding-bottom: 4px;
  gap: 8px;
}

.order-detail-dialog .detail-section h3 {
  font-size: 12px;
  line-height: 1.15;
}

.order-detail-dialog .detail-section-head > span {
  font-size: 10px;
  line-height: 1.2;
}

.order-detail-dialog .detail-status-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.order-detail-dialog .detail-status-step {
  gap: 1px;
  padding: 7px 8px 5px;
  border-radius: 7px;
}

.order-detail-dialog .detail-status-step strong,
.order-detail-dialog .detail-status-step em {
  white-space: normal;
}

.order-detail-dialog .detail-status-step strong {
  font-size: 11px;
}

.order-detail-dialog .detail-status-step em {
  font-size: 10px;
}

.order-detail-dialog .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.order-detail-dialog .detail-grid > div,
.order-detail-dialog .order-detail-fact,
.order-detail-dialog .customer-history-grid div,
.order-detail-dialog .customer-history-item {
  padding: 5px 6px;
  border-radius: 6px;
}

.order-detail-dialog .detail-grid span,
.order-detail-dialog .order-detail-fact span,
.order-detail-dialog label span,
.order-detail-dialog .customer-history-grid span,
.order-detail-dialog .customer-history-item span {
  font-size: 10px;
  line-height: 1.2;
}

.order-detail-dialog .detail-grid strong,
.order-detail-dialog .order-detail-fact strong,
.order-detail-dialog .customer-history-grid strong,
.order-detail-dialog .customer-history-item strong {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.22;
}

.order-detail-dialog input,
.order-detail-dialog select {
  height: 28px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 12px;
}

.order-detail-dialog textarea {
  min-height: 0;
  padding: 6px 7px;
  resize: none;
  border-radius: 7px;
  font-size: 11.5px;
  line-height: 1.3;
}

.order-detail-dialog .payment-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.order-detail-dialog .payment-section p {
  margin: 0;
  font-size: 10px;
  line-height: 1.25;
}

.order-detail-dialog .staging-order-tools {
  grid-template-columns: minmax(0, 1fr) minmax(88px, 0.6fr);
  gap: 5px;
  padding: 6px;
  border-radius: 6px;
}

.order-detail-dialog .staging-scene-summary {
  min-height: 24px;
  padding: 5px 6px;
  font-size: 10px;
  line-height: 1.25;
}

.order-detail-dialog .staging-reference-preview {
  gap: 4px;
  padding: 5px;
  border-radius: 6px;
}

.order-detail-dialog .staging-reference-preview-head strong,
.order-detail-dialog .staging-reference-preview-head span {
  font-size: 10px;
}

.order-detail-dialog .staging-reference-preview-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.order-detail-dialog .staging-reference-preview-strip img,
.order-detail-dialog .staging-reference-empty {
  min-height: 26px;
  border-radius: 5px;
}

.order-detail-dialog .staging-reference-empty {
  padding: 4px 6px;
  font-size: 10px;
  line-height: 1.2;
}

.order-detail-dialog .staging-section textarea {
  min-height: 48px;
}

.order-detail-dialog .customer-note-section textarea,
.order-detail-dialog .execution-note-section textarea {
  min-height: 48px;
}

.order-detail-dialog .staging-library-picker {
  padding: 4px 6px;
  border-radius: 6px;
}

.order-detail-dialog .staging-library-picker summary {
  font-size: 10px;
}

.order-detail-dialog .staging-library-picker select[multiple],
.order-detail-dialog .staging-order-actions {
  display: none;
}

.order-detail-dialog .action-grid {
  align-content: start;
  grid-template-columns: 1fr;
}

.order-detail-dialog .action-grid button,
.order-detail-dialog .copy-tools button,
.order-detail-dialog #saveOrderEdits {
  min-height: 29px;
  padding: 4px 8px;
  font-size: 11px;
}

.order-detail-dialog .order-detail-fact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.order-detail-dialog .order-detail-secondary {
  padding-top: 4px;
}

.order-detail-dialog .order-detail-secondary summary {
  font-size: 10px;
}

.order-detail-dialog .customer-history-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.order-detail-dialog .customer-history-list,
.order-detail-dialog .timeline {
  gap: 4px;
}

.order-detail-dialog .customer-history-item:nth-child(n+2) {
  display: none;
}

.order-detail-dialog .copy-tools {
  grid-template-columns: 1fr minmax(90px, 0.75fr) 1fr;
  gap: 5px;
}

.order-detail-dialog .timeline li {
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.25;
}

.order-detail-dialog .timeline strong {
  font-size: 10.5px;
}

.order-detail-dialog #saveOrderEdits {
  align-self: stretch;
  width: 100%;
}

/* Final responsive fit override: keep operational tables visible before navigation. */
@media (max-width: 1280px) {
  body {
    min-width: 0;
    padding: 6px;
  }

  .app-shell {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: calc(100vh - 12px);
  }

  .sidebar {
    gap: 6px;
    padding: 7px;
  }

  .brand {
    justify-content: center;
    padding: 6px 4px;
  }

  .brand-mark {
    width: 26px;
    height: 26px;
  }

  .brand > div:not(.brand-mark),
  .nav-item small,
  .sidebar-note {
    display: none;
  }

  .nav-list,
  .nav-sublist,
  .nav-group {
    gap: 4px;
  }

  .nav-group summary {
    min-height: 22px;
    justify-content: center;
    padding: 0 3px;
    font-size: 10px;
    text-align: center;
  }

  .nav-group summary::after {
    display: none;
  }

  .nav-item,
  .nav-subitem {
    min-height: 29px;
    margin-left: 0;
    padding: 0 4px;
    border-left: 0;
    justify-items: center;
    text-align: center;
    font-size: 11px;
    line-height: 1.15;
  }

  .table-wrap,
  .workbench-table-wrap,
  .schedule-table-wrap,
  .staging-gallery-table-wrap {
    overflow-x: hidden;
  }

  table,
  .orders-panel table,
  .schedule-table,
  .staging-gallery-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  th,
  td,
  .orders-panel th,
  .orders-panel td {
    width: auto;
    padding: 4px 3px;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    font-size: 9.5px;
    line-height: 1.22;
  }

  #ordersWorkspace .order-grid-cell[data-order-column="unitPrice"],
  #ordersWorkspace .order-grid-cell[data-order-column="duration"],
  #ordersWorkspace .order-grid-cell[data-order-column="stagingFee"],
  #ordersWorkspace .order-grid-cell[data-order-column="extraPaid"],
  #ordersWorkspace .order-grid-cell[data-order-column="overtimeFee"],
  #ordersWorkspace .order-grid-cell[data-order-column="deposit"],
  #ordersWorkspace .order-grid-cell[data-order-column="finalPayment"],
  #ordersWorkspace .order-grid-cell[data-order-column="total"],
  #ordersWorkspace .order-grid-cell[data-order-column="finalDue"],
  #ordersWorkspace .order-grid-cell[data-order-column="damageFee"],
  #ordersWorkspace .order-grid-cell[data-order-column="headcount"],
  #ordersWorkspace .order-grid-cell[data-order-column="status"],
  #ordersWorkspace .order-grid-cell[data-order-column="customerType"],
  .workbench-grid-cell[data-order-column="unitPrice"],
  .workbench-grid-cell[data-order-column="duration"],
  .workbench-grid-cell[data-order-column="stagingFee"],
  .workbench-grid-cell[data-order-column="extraPaid"],
  .workbench-grid-cell[data-order-column="overtimeFee"],
  .workbench-grid-cell[data-order-column="deposit"],
  .workbench-grid-cell[data-order-column="finalPayment"],
  .workbench-grid-cell[data-order-column="total"],
  .workbench-grid-cell[data-order-column="finalDue"],
  .workbench-grid-cell[data-order-column="damageFee"],
  .workbench-grid-cell[data-order-column="headcount"],
  .workbench-grid-cell[data-order-column="status"],
  .workbench-grid-cell[data-order-column="customerType"] {
    overflow: hidden;
    overflow-wrap: normal;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    word-break: keep-all;
  }

  #ordersWorkspace .order-grid-cell[data-order-column="duration"] .cell-main,
  #ordersWorkspace .order-grid-cell[data-order-column="duration"] .cell-sub,
  .workbench-grid-cell[data-order-column="duration"] .cell-main,
  .workbench-grid-cell[data-order-column="duration"] .cell-sub {
    white-space: nowrap;
    word-break: keep-all;
  }

  .status-chip,
  .customer-type-chip,
  .schedule-state-chip,
  .data-status-chip {
    min-height: 18px;
    padding: 2px 4px;
    font-size: 9.5px;
    white-space: nowrap;
  }
}

@media (max-width: 1040px) {
  body {
    padding: 4px;
  }

  .app-shell {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: calc(100vh - 8px);
  }

  .sidebar {
    padding: 4px;
  }

  .nav-group summary {
    font-size: 9px;
  }

  .nav-item,
  .nav-subitem {
    min-height: 28px;
    padding: 0 2px;
    font-size: 10px;
  }

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

  th,
  td,
  .orders-panel th,
  .orders-panel td {
    padding: 3px 2px;
    font-size: 8.8px;
    line-height: 1.18;
  }
}

/* Final small-screen navigation drawer: keep tables wide on laptop screens. */
.sidebar-toggle,
.sidebar-hover-zone {
  display: none;
}

@media (max-width: 1600px) {
  body {
    min-width: 0;
    padding-left: 8px;
  }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .main {
    grid-column: 1;
    min-width: 0;
  }

  .topbar {
    justify-content: flex-start;
    gap: 10px;
    z-index: 80;
  }

  .topbar > div:first-of-type {
    min-width: 0;
  }

  .top-actions {
    margin-left: auto;
  }

  .sidebar {
    position: fixed;
    top: 92px;
    bottom: 10px;
    left: 10px;
    z-index: 60;
    width: 220px;
    max-width: min(72vw, 240px);
    padding: 10px;
    transform: translateX(calc(-100% - 18px));
    transition: transform 0.09s ease-out, box-shadow 0.12s ease-out;
    box-shadow: 18px 0 40px rgba(18, 33, 54, 0);
    --sidebar-follow-y: 0px;
    --sidebar-follow-h: 0px;
  }

  .sidebar-follow-indicator {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 0;
    z-index: 0;
    height: var(--sidebar-follow-h);
    border: 1px solid rgba(232, 135, 155, 0.22);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 241, 246, 0.96), rgba(238, 248, 255, 0.78));
    box-shadow: inset 3px 0 0 rgba(232, 135, 155, 0.62), 0 8px 18px rgba(45, 62, 90, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--sidebar-follow-y));
    transition: transform 0.18s ease, height 0.18s ease, opacity 0.14s ease;
  }

  .sidebar.has-follow-indicator .sidebar-follow-indicator {
    opacity: 1;
  }

  .sidebar .brand {
    display: none;
  }

  .sidebar .nav-item small,
  .sidebar .sidebar-note {
    display: block;
  }

  .sidebar .nav-group summary {
    min-height: 26px;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 11px;
    text-align: left;
  }

  .sidebar .nav-group summary::after {
    display: block;
  }

  .sidebar .nav-item,
  .sidebar .nav-subitem {
    position: relative;
    z-index: 1;
    min-height: 34px;
    justify-items: start;
    padding: 0 10px;
    text-align: left;
    font-size: 12px;
    line-height: 1.2;
    transition: color 0.14s ease, transform 0.14s ease;
  }

  .sidebar .nav-item:hover {
    transform: translateX(2px);
  }

  .sidebar .nav-item.active,
  .sidebar .nav-item:hover {
    background: transparent;
    box-shadow: none;
  }

  .sidebar .nav-subitem {
    padding-left: 16px;
    border-left: 2px solid rgba(232, 135, 155, 0.18);
  }

  .sidebar .sidebar-note {
    padding: 9px;
  }

  body.is-sidebar-open .sidebar,
  body.is-sidebar-pinned .sidebar {
    transform: translateX(0);
    box-shadow: 18px 0 40px rgba(18, 33, 54, 0.18);
  }

  .sidebar-toggle {
    position: static;
    z-index: 82;
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid rgba(57, 125, 170, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: #2d5f86;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
    cursor: pointer;
  }

  .sidebar-hover-zone {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 59;
    display: block;
    width: 34px;
    cursor: default;
    touch-action: pan-y;
  }
}

@media (max-width: 1040px) {
  .sidebar {
    width: 204px;
  }

}

/* Final drawer and order-page recovery: keep the menu usable after page scroll and never clip order content. */
@media (max-width: 1600px) {
  .sidebar {
    top: var(--sidebar-viewport-top, 12px);
    bottom: auto;
    display: flex;
    height: calc(100vh - var(--sidebar-visible-top, 12px) - 12px);
    height: calc(100dvh - var(--sidebar-visible-top, 12px) - 12px);
    max-height: calc(100vh - var(--sidebar-visible-top, 12px) - 12px);
    max-height: calc(100dvh - var(--sidebar-visible-top, 12px) - 12px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 8px;
  }

  .sidebar .nav-list {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 100%;
  }

  .sidebar .sidebar-note {
    flex: 0 0 auto;
    margin-top: 8px;
  }

  .sidebar-follow-indicator {
    left: 8px;
    right: 8px;
  }

  #ordersWorkspace,
  #ordersWorkspace .orders-panel,
  #ordersWorkspace .import-preview-panel,
  #ordersWorkspace .service-consult-panel,
  #ordersWorkspace .order-column-panel {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  #ordersWorkspace .orders-panel {
    position: relative;
    display: block;
  }

  #ordersWorkspace .orders-panel::before {
    z-index: 0;
    pointer-events: none;
  }

  #ordersWorkspace .orders-panel > * {
    position: relative;
    z-index: 1;
  }

  #ordersWorkspace .filter-bar {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  #ordersWorkspace .filter-bar .search-field {
    grid-column: span 2;
  }

  #ordersWorkspace .panel-head,
  #ordersWorkspace .filter-bar,
  #ordersWorkspace .table-status-row {
    position: relative;
    z-index: 1;
  }

  #ordersWorkspace .table-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    border-radius: 0 0 8px 8px;
  }

  #ordersWorkspace .orders-panel table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }

  #ordersWorkspace .orders-panel th,
  #ordersWorkspace .orders-panel td {
    width: auto !important;
    min-width: 0;
    overflow: visible;
    overflow-wrap: normal;
    text-overflow: clip;
    white-space: nowrap;
    word-break: keep-all;
  }

  #ordersWorkspace .order-grid-cell[data-order-column="customerRemark"],
  #ordersWorkspace .order-grid-cell[data-order-column="executionRemark"],
  #ordersWorkspace .order-grid-cell[data-order-column="stagingRequirement"],
  #ordersWorkspace .order-grid-cell[data-order-column="nextStep"] {
    min-width: 180px;
    max-width: 300px;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
  }

  #ordersWorkspace .order-grid-cell[data-order-column="date"],
  #ordersWorkspace .order-grid-cell[data-order-column="time"],
  #ordersWorkspace .order-grid-cell[data-order-column="status"] {
    min-width: 112px;
  }
}

/* Global viewport scale: keep the full admin surface visible on smaller desktop screens. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-width: 0;
  --admin-page-scale: 1;
}

.main {
  transform-origin: top left;
}

@media (min-width: 721px) and (max-width: 1360px) {
  .main {
    width: 1360px;
    max-width: none;
    zoom: var(--admin-page-scale);
  }
}

@media (min-width: 721px) and (max-width: 1360px) {
  body {
    --admin-page-scale: 0.94;
  }
}

@media (min-width: 721px) and (max-width: 1280px) {
  body {
    --admin-page-scale: 0.9;
  }
}

@media (min-width: 721px) and (max-width: 1180px) {
  body {
    --admin-page-scale: 0.84;
  }
}

@media (min-width: 721px) and (max-width: 1040px) {
  body {
    --admin-page-scale: 0.74;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  body {
    --admin-page-scale: 0.64;
  }
}

@media (min-width: 761px) and (max-width: 820px) {
  body {
    --admin-page-scale: 0.54;
  }
}

@media (min-width: 721px) and (max-width: 760px) {
  body {
    --admin-page-scale: 0.5;
  }
}

/* schedule-table.css */
/* Schedule table module styles. */
.schedule-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin: 8px 0;
}

.schedule-toolbar label {
  width: 150px;
}

.schedule-toolbar-compact {
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.schedule-toolbar-compact > button,
.schedule-toolbar-compact > .schedule-compact-summary {
  flex: 0 0 auto;
}

.schedule-toolbar-compact #scheduleDateFilter {
  flex: 0 0 138px;
  width: 138px;
  min-width: 138px;
  max-width: 138px;
}

.schedule-compact-summary {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.schedule-overview-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.schedule-overview-strip article {
  min-width: 0;
  min-height: 88px;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.schedule-overview-strip span,
.schedule-overview-strip small {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-overview-strip strong {
  display: block;
  min-width: 0;
  margin: 5px 0 4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
}

.schedule-legend-compact {
  margin-top: 2px;
}

.schedule-legend-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.legend-dot {
  display: inline-block;
  width: 16px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.legend-dot.is-schedule-normal,
.legend-dot.is-customer-normal {
  background: rgba(109, 168, 206, 0.58);
  border-color: rgba(69, 121, 161, 0.35);
}

.legend-dot.is-schedule-member,
.legend-dot.is-customer-member {
  background: rgba(232, 135, 155, 0.62);
  border-color: rgba(168, 74, 93, 0.34);
}

.legend-dot.is-schedule-trial,
.legend-dot.is-customer-trial {
  background: rgba(52, 185, 131, 0.58);
  border-color: rgba(35, 151, 101, 0.36);
}

.legend-dot.is-schedule-group {
  background: rgba(246, 176, 84, 0.72);
  border-color: rgba(191, 116, 45, 0.36);
}

.legend-dot.is-schedule-commercial {
  background: rgba(107, 114, 128, 0.42);
  border-color: rgba(55, 64, 78, 0.32);
}

.legend-dot.is-free {
  background: rgba(233, 248, 241, 0.92);
  border-color: rgba(52, 185, 131, 0.36);
}

.legend-dot.is-pending {
  background: var(--amber-soft);
  border-color: rgba(212, 129, 122, 0.58);
  border-style: dashed;
}

.legend-dot.is-locked {
  background: var(--green-soft);
  border-color: rgba(52, 185, 131, 0.46);
}

.legend-dot.is-manual {
  background: rgba(55, 64, 78, 0.12);
  border-color: rgba(55, 64, 78, 0.5);
}

.legend-dot.is-final {
  background: rgba(52, 185, 131, 0.18);
  border-color: rgba(52, 185, 131, 0.58);
}

.schedule-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.56);
}

.schedule-control-drawer {
  margin-top: 10px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.schedule-control-drawer summary {
  cursor: pointer;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.schedule-control-drawer .schedule-filter-bar,
.schedule-control-drawer .schedule-column-panel {
  margin: 0 10px 10px;
}

.schedule-toggle {
  align-self: end;
  min-height: 38px;
}

.schedule-column-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.56);
}

.schedule-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.schedule-column-head strong {
  color: var(--text);
}

.schedule-column-head span {
  color: var(--muted);
  font-size: 12px;
}

.schedule-column-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.schedule-calendar {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(232, 135, 155, 0.2);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(255, 247, 250, 0.94), rgba(244, 250, 255, 0.94));
}

.schedule-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.schedule-calendar-head strong {
  color: var(--text);
  font-size: 15px;
}

.schedule-weekdays,
.schedule-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.schedule-weekdays span {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.schedule-day {
  display: grid;
  align-content: start;
  min-height: 82px;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.schedule-day:hover {
  border-color: rgba(109, 168, 206, 0.5);
  box-shadow: 0 10px 24px rgba(109, 168, 206, 0.12);
}

.schedule-day strong {
  font-size: 15px;
}

.schedule-day span,
.schedule-day small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.schedule-day.is-empty {
  min-height: 82px;
  border: 1px dashed rgba(17, 24, 39, 0.06);
  background: rgba(255, 255, 255, 0.36);
}

.schedule-day.is-today:not(.is-selected) {
  border-color: rgba(17, 24, 39, 0.1);
}

.schedule-day.is-level-light {
  border-color: rgba(109, 168, 206, 0.22);
}

.schedule-day.is-level-busy {
  border-color: rgba(232, 135, 155, 0.42);
}

.schedule-day.is-level-full {
  border-color: rgba(168, 74, 93, 0.52);
  background: rgba(255, 244, 247, 0.92);
}

.schedule-day.is-selected {
  border-color: rgba(109, 168, 206, 0.76);
  background: linear-gradient(135deg, rgba(244, 250, 255, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: inset 0 0 0 2px rgba(109, 168, 206, 0.18), 0 14px 30px rgba(69, 121, 161, 0.14);
}

.schedule-day.is-selected strong {
  color: #2f6f9f;
}

.schedule-matrix-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.86);
}

.schedule-matrix {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.schedule-matrix th,
.schedule-matrix td {
  width: auto;
  min-width: 0;
  height: 24px;
  padding: 2px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
}

.schedule-matrix td {
  position: relative;
  transform-origin: center;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.schedule-matrix tbody td:hover,
.schedule-matrix tbody td:focus-within {
  z-index: 4;
  transform: scale(1.025);
  box-shadow: 0 6px 16px rgba(69, 121, 161, 0.14);
}

.schedule-matrix td.is-free {
  background: rgba(233, 248, 241, 0.72);
}

.schedule-matrix td.is-filtered-out {
  background: rgba(255, 255, 255, 0.42);
}

.schedule-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(250, 252, 255, 0.96);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
}

.schedule-matrix .time-col {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 46px;
  min-width: 46px;
  background: rgba(250, 252, 255, 0.98);
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
}

.schedule-matrix td.is-occupied {
  padding: 0;
  cursor: pointer;
}

.schedule-empty {
  display: block;
  width: 100%;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--subtle);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

.schedule-empty.is-available {
  color: var(--green);
  font-weight: 850;
}

.schedule-empty-actions {
  display: grid;
  gap: 2px;
  min-height: 20px;
}

.schedule-empty-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.schedule-matrix td:hover .schedule-empty-buttons,
.schedule-matrix td:focus-within .schedule-empty-buttons,
.schedule-matrix td.is-free .schedule-empty-buttons {
  opacity: 1;
  transform: translateY(0);
}

.schedule-empty-buttons button {
  min-height: 18px;
  padding: 1px 5px;
  border: 1px solid rgba(109, 168, 206, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.schedule-empty-buttons span {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.schedule-empty-dialog {
  width: min(420px, calc(100vw - 36px));
}

.schedule-block {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 24px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: rgba(109, 168, 206, 0.58);
  box-shadow: none;
  color: var(--text);
  text-align: center;
  cursor: pointer;
}

.schedule-block.is-schedule-normal,
.schedule-continuation.is-schedule-normal,
.schedule-block.is-customer-normal,
.schedule-continuation.is-customer-normal {
  background: rgba(109, 168, 206, 0.72);
}

.schedule-block.is-schedule-member,
.schedule-continuation.is-schedule-member,
.schedule-block.is-customer-member,
.schedule-continuation.is-customer-member {
  background: rgba(232, 135, 155, 0.74);
}

.schedule-block.is-schedule-trial,
.schedule-continuation.is-schedule-trial,
.schedule-block.is-customer-trial,
.schedule-continuation.is-customer-trial {
  background: rgba(52, 185, 131, 0.72);
}

.schedule-block.is-schedule-group,
.schedule-continuation.is-schedule-group {
  background: rgba(246, 176, 84, 0.78);
}

.schedule-block.is-schedule-commercial,
.schedule-continuation.is-schedule-commercial {
  background: rgba(107, 114, 128, 0.46);
}

.schedule-block.is-pending,
.schedule-continuation.is-pending {
  opacity: 0.58;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0 5px, transparent 5px 10px);
}

.schedule-block.is-manual-lock,
.schedule-continuation.is-manual-lock {
  background: rgba(55, 64, 78, 0.58);
}

.schedule-block.is-final-paid,
.schedule-continuation.is-final-paid {
  box-shadow: none;
}

.schedule-block.is-done {
  opacity: 0.72;
}

.schedule-block.is-cancel {
  opacity: 0.45;
}

.schedule-stack-note {
  display: inline-flex;
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 1;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3c6384;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-align: center;
}

.schedule-stack-note.is-conflict {
  background: rgba(201, 91, 91, 0.13);
  color: #b23b3b;
}

.schedule-block-label {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  color: rgba(37, 49, 65, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

.schedule-block-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.schedule-block-tags b {
  display: inline-flex;
  max-width: 100%;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--text);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

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

  .schedule-matrix tbody td:hover,
  .schedule-matrix tbody td:focus-within {
    transform: none;
  }
}

.schedule-continuation {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 24px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: rgba(109, 168, 206, 0.72);
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-align: center;
}

.schedule-continuation.is-pending {
  opacity: 0.58;
}

.schedule-stack-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.schedule-stack-row {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.schedule-stack-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.schedule-stack-row span {
  color: var(--muted);
  font-size: 12px;
}

.schedule-stack-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 0;
}

.schedule-stack-detail-grid div {
  min-width: 0;
}

.schedule-stack-detail-grid dt,
.schedule-stack-detail-grid dd {
  margin: 0;
  min-width: 0;
}

.schedule-stack-detail-grid dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.schedule-stack-detail-grid dd {
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.schedule-staging-summary {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(57, 125, 170, 0.16);
  border-radius: 8px;
  background: rgba(238, 247, 253, 0.72);
}

.schedule-staging-summary.is-none {
  grid-template-columns: auto minmax(0, 1fr);
  background: rgba(17, 24, 39, 0.035);
}

.schedule-staging-thumb,
.admin-image-loading-frame.schedule-staging-thumb {
  width: 54px;
  height: 64px;
  min-height: 64px;
  overflow: hidden;
  border-radius: 7px;
  object-fit: cover;
}

.schedule-staging-thumb-empty {
  display: grid;
  place-items: center;
  background: rgba(57, 125, 170, 0.1);
  color: var(--blue-strong);
  font-weight: 900;
}

.schedule-staging-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.schedule-staging-main strong,
.schedule-staging-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-staging-main strong {
  color: var(--text);
  font-size: 13px;
}

.schedule-staging-main small {
  color: var(--muted);
  font-size: 11px;
}

.schedule-staging-status {
  color: var(--blue-strong) !important;
  font-size: 10px !important;
  font-weight: 900;
}

.schedule-staging-summary.is-none .schedule-staging-status {
  color: var(--muted) !important;
}

.order-staging-readonly-dialog {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  max-height: min(860px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
}

.order-staging-readonly-dialog > form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: inherit;
}

.order-staging-readonly-content {
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow: auto;
}

.order-staging-readonly-overview {
  display: grid;
  gap: 3px;
}

.order-staging-readonly-overview span,
.order-staging-readonly-overview small {
  color: var(--muted);
  font-size: 11px;
}

.order-staging-readonly-overview strong {
  color: var(--text);
  font-size: 17px;
}

.order-staging-readonly-scene {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.order-staging-readonly-scene h3,
.order-staging-readonly-scene p {
  margin: 0;
}

.order-staging-readonly-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.order-staging-readonly-image,
.admin-image-loading-frame.order-staging-readonly-image {
  width: 100%;
  height: 160px;
  min-height: 160px;
  overflow: hidden;
  border-radius: 7px;
  object-fit: cover;
}

.order-staging-readonly-image-empty,
.order-staging-readonly-empty {
  color: var(--muted);
  font-size: 12px;
}

.order-staging-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}

.order-staging-readonly-grid div {
  min-width: 0;
}

.order-staging-readonly-grid dt,
.order-staging-readonly-grid dd {
  margin: 0;
}

.order-staging-readonly-grid dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.order-staging-readonly-grid dd {
  margin-top: 2px;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .schedule-staging-summary {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .schedule-staging-summary > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .schedule-staging-thumb,
  .admin-image-loading-frame.schedule-staging-thumb {
    width: 48px;
    height: 58px;
    min-height: 58px;
  }

  .order-staging-readonly-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .order-staging-readonly-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-staging-readonly-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.schedule-stack-remark {
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.035);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.schedule-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.schedule-table-wrap.compact {
  max-height: 320px;
}

.schedule-summary-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: fixed;
}

.schedule-summary-table th,
.schedule-summary-table td {
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  vertical-align: middle;
}

.schedule-summary-table th {
  background: #f7f9fb;
  color: var(--muted);
  font-weight: 850;
}

.schedule-summary-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(255, 241, 245, 0.68), rgba(240, 242, 255, 0.46));
}

.schedule-summary-table strong {
  color: var(--ink);
  font-weight: 850;
}

.schedule-summary-table .inline-actions {
  margin-top: 0;
  flex-wrap: nowrap;
}

.schedule-usage-status {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-strong);
  font-size: 11px;
  font-weight: 850;
}

.schedule-usage-bar {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
}

.schedule-usage-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink), var(--blue));
}

.schedule-subhead {
  margin: 16px 0 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.studio-usage-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 20px 20px;
}

.studio-usage-card {
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 13px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.82);
}

.studio-usage-card strong {
  font-size: 14px;
}

.studio-usage-card span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-strong);
  font-size: 11px;
  font-weight: 850;
}

.studio-usage-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* order-table.css */
/* Order table module: isolated final rules for the shared order/workbench table surface. */
.order-amount-guidance {
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 1px solid rgba(57, 125, 170, 0.18);
  border-left: 3px solid #397daa;
  border-radius: 5px;
  background: #f7fbfe;
  color: #4b6072;
  font-size: 11px;
  line-height: 1.55;
}

.settlement-pending {
  color: #778898;
  font-size: 10px;
  line-height: 1.25;
}

.order-column-sync-status {
  margin-top: 4px !important;
  color: #45627e !important;
  font-weight: 780 !important;
}

/* Final customer-type fit: keep customer labels readable in one horizontal chip. */
#ordersWorkspace .order-grid-cell[data-order-column="customerType"],
.workbench-grid-cell[data-order-column="customerType"] {
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

#ordersWorkspace .order-grid-cell[data-order-column="customerType"] .customer-type-chip,
.workbench-grid-cell[data-order-column="customerType"] .customer-type-chip {
  width: auto;
  max-width: 100%;
  min-height: 24px;
  padding: 0 9px;
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
}

/* Final order table layout guard: draw each wide row as a stable div grid inside the horizontal scroller. */
#ordersWorkspace .order-grid-table,
#ordersWorkspace .order-grid-head,
#ordersWorkspace .order-grid-body {
  min-width: 100%;
}

#ordersWorkspace .order-grid-table {
  display: block;
  width: max-content;
  font-size: 10.8px;
}

#ordersWorkspace .order-grid-head,
#ordersWorkspace .order-grid-body {
  display: grid;
  min-width: 0;
}

#ordersWorkspace .order-grid-row {
  position: static;
  top: auto;
  z-index: auto;
  display: grid;
  width: 100%;
  min-width: 100%;
  column-gap: 1px;
  align-items: stretch;
  background: var(--line);
}

#ordersWorkspace .order-grid-cell {
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 5px 6px;
  border-right: 0;
  border-bottom: 0;
  overflow: visible;
  overflow-wrap: normal;
  color: inherit;
  font-size: 10.4px;
  line-height: 1.35;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

#ordersWorkspace .orders-panel .order-grid-cell[data-order-column] {
  width: auto;
  min-width: 0;
}

#ordersWorkspace .order-grid-header-cell {
  display: grid;
  min-height: 38px;
  align-items: center;
  gap: 4px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: 2px solid rgba(57, 125, 170, 0.26);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(238, 248, 255, 0.99));
  color: #203a54;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  box-shadow: 0 12px 22px rgba(45, 62, 90, 0.1);
}

#ordersWorkspace .order-grid-header-cell:first-child {
  border-top-left-radius: 8px;
}

#ordersWorkspace .order-grid-header-cell:last-child {
  border-top-right-radius: 8px;
}

#ordersWorkspace .order-grid-body-cell {
  min-height: 35px;
  background: #ffffff;
}

#ordersWorkspace .order-grid-body-cell[data-order-inline-edit] {
  position: relative;
  cursor: default;
}

#ordersWorkspace .order-grid-body-cell[data-order-inline-edit]:hover,
.workbench-grid-body-cell[data-order-inline-edit]:hover {
  box-shadow: inset 0 0 0 1px rgba(57, 125, 170, 0.2);
  background: #ffffff;
}

#ordersWorkspace .order-grid-body-cell[data-order-inline-edit]:focus,
.workbench-grid-body-cell[data-order-inline-edit]:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(109, 168, 206, 0.32);
}

#ordersWorkspace .order-grid-body-cell.is-editing,
.workbench-grid-body-cell.is-editing {
  background: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(109, 168, 206, 0.32);
}

.workbench-grid-body-cell[data-order-inline-edit] {
  position: relative;
  cursor: default;
}

.inline-edit-trigger {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  min-width: 22px;
  min-height: 20px;
  padding: 0 5px;
  border: 1px solid rgba(57, 125, 170, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--blue-strong);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  box-shadow: 0 4px 10px rgba(31, 54, 82, 0.08);
  cursor: pointer;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

[data-order-inline-edit]:hover > .inline-edit-trigger,
[data-order-inline-edit]:focus > .inline-edit-trigger,
[data-order-inline-edit]:focus-within > .inline-edit-trigger {
  opacity: 1;
  pointer-events: auto;
}

[data-order-inline-edit].is-active-cell > .inline-edit-trigger {
  opacity: 1;
  pointer-events: auto;
}

#ordersWorkspace .order-grid-body-cell.is-active-cell,
.workbench-grid-body-cell.is-active-cell,
.order-table-wrap .order-grid-body-cell.is-active-cell {
  background: #f2f9ff;
  box-shadow: inset 0 0 0 2px rgba(57, 125, 170, 0.42);
}

.inline-edit-trigger:focus {
  opacity: 1;
  outline: 2px solid rgba(109, 168, 206, 0.32);
  outline-offset: 1px;
}

.order-inline-editor {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 4px;
}

.inline-editor-drawer {
  position: fixed;
  z-index: 900;
  display: grid;
  width: max(148px, min(260px, calc(100% + 84px)));
  max-width: min(280px, 78vw);
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(57, 125, 170, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 16px 36px rgba(31, 54, 82, 0.18);
  transform-origin: top left;
  animation: inlineDrawerOpen 0.14s ease-out;
}

body > [data-inline-editor-drawer].inline-editor-drawer {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.inline-editor-drawer.opens-up {
  transform-origin: bottom left;
}

.inline-editor-drawer .order-inline-editor {
  width: 100%;
}

@keyframes inlineDrawerOpen {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.order-inline-editor input,
.order-inline-editor textarea,
.order-inline-editor select {
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(57, 125, 170, 0.28);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: center;
}

.order-inline-editor textarea {
  text-align: left;
  white-space: normal;
  resize: vertical;
}

.order-inline-editor button {
  min-height: 24px;
  border: 1px solid rgba(57, 125, 170, 0.24);
  border-radius: 6px;
  background: var(--blue-soft);
  color: var(--blue-strong);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.order-inline-menu-editor {
  min-width: 118px;
  max-width: min(240px, 72vw);
}

.inline-option-list {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.inline-option-item {
  display: grid;
  min-height: 28px;
  align-items: center;
  justify-items: start;
  padding: 5px 8px;
  border: 1px solid rgba(57, 125, 170, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.inline-option-item:hover,
.inline-option-item:focus,
.inline-option-item.is-selected {
  border-color: rgba(57, 125, 170, 0.34);
  background: rgba(235, 248, 255, 0.98);
  color: var(--blue-strong);
}

.order-inline-image-editor {
  grid-template-columns: minmax(0, 1fr);
}

.order-inline-image-editor input[type="file"] {
  padding: 4px;
  font-size: 10px;
}

.order-inline-choice-editor {
  gap: 6px;
  text-align: left;
}

.order-inline-extra-editor {
  min-width: 176px;
  max-width: min(260px, 78vw);
}

.order-extra-total {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.order-inline-extra-editor .inline-extra-prices {
  margin-top: 4px;
  width: 100%;
}

.inline-extra-list {
  max-height: 238px;
}

.inline-extra-option {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.inline-extra-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-extra-option small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.inline-choice-list {
  display: grid;
  gap: 4px;
  max-height: 148px;
  overflow-y: auto;
}

.inline-choice-row,
.inline-custom-extra {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 54px;
  gap: 5px;
  align-items: center;
}

.inline-choice-row {
  font-size: 10px;
  font-weight: 750;
}

.inline-choice-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  padding: 0;
}

.inline-choice-row input[type="number"],
.inline-custom-extra input {
  padding: 4px 5px;
  text-align: left;
}

.inline-custom-extra {
  grid-template-columns: minmax(0, 1fr) 58px;
}

#ordersWorkspace .order-grid-body .order-grid-row:nth-child(even) .order-grid-body-cell {
  background: #ffffff;
}

#ordersWorkspace .order-grid-row:hover .order-grid-body-cell,
#ordersWorkspace .order-grid-row.selected .order-grid-body-cell {
  background: #ffffff;
}

#ordersWorkspace .order-grid-row.customer-member-row .order-grid-body-cell {
  background: #ffffff;
}

#ordersWorkspace .order-grid-row.customer-member-row:hover .order-grid-body-cell,
#ordersWorkspace .order-grid-row.customer-member-row.selected .order-grid-body-cell {
  background: #ffffff;
}

.status-chip.abnormal {
  color: #b42318;
  background: #fee4e2;
  border-color: #fda29b;
}

#ordersWorkspace .order-grid-header-cell .table-sort-button {
  align-self: stretch;
}

#ordersWorkspace .order-grid-header-cell.is-filterable {
  min-height: 58px;
  padding: 7px 6px;
}

#ordersWorkspace .order-header-filter {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 2px 18px 2px 6px;
  border: 1px solid rgba(57, 125, 170, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: #30465f;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}

#ordersWorkspace .order-header-filter.is-active {
  border-color: rgba(219, 76, 118, 0.42);
  background: #fff6fa;
  color: #8f2f55;
}

#ordersWorkspace .order-header-filter:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(219, 76, 118, 0.16);
}

#ordersWorkspace .order-utility-drawer {
  margin: 10px 20px 0;
  border: 1px solid rgba(111, 169, 216, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

#ordersWorkspace .order-utility-drawer summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  color: #30465f;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

#ordersWorkspace .order-utility-drawer .filter-bar,
#ordersWorkspace .order-utility-drawer .import-preview-panel,
#ordersWorkspace .order-utility-drawer .service-consult-panel {
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

#ordersWorkspace .order-grid-header-cell,
.workbench-grid-header-cell {
  place-items: center;
  text-align: center;
}

#ordersWorkspace .order-grid-header-cell .table-sort-button,
.workbench-grid-header-cell .table-sort-button {
  justify-content: center;
  justify-items: center;
  text-align: center;
}

#ordersWorkspace .table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

#ordersWorkspace .order-month-filter,
#ordersWorkspace .order-exact-date-filter { display: inline-grid; grid-template-columns: auto minmax(112px, 128px); align-items: center; gap: 6px; min-height: 30px; padding: 0 8px; border: 1px solid rgba(111, 169, 216, .18); border-radius: 8px; background: rgba(255, 255, 255, .78); color: var(--muted); font-size: 11px; font-weight: 850; }
#ordersWorkspace .order-month-filter input,
#ordersWorkspace .order-exact-date-filter input { min-height: 24px; padding: 0 4px; border: 0; background: transparent; color: var(--text); font: inherit; }
#ordersWorkspace #showAllOrders.is-active { border-color: rgba(232, 135, 155, .42); background: var(--pink-soft); color: var(--pink-strong); }
#ordersWorkspace .order-filter-state[hidden] { display: none !important; }

/* Responsive readable table guard: compress spare width, but keep labels horizontal before wrapping long notes. */
#ordersWorkspace .order-grid-cell > *,
.workbench-grid-cell > * {
  min-width: 0;
  max-width: 100%;
  word-break: keep-all;
}

#ordersWorkspace .order-grid-cell[data-order-column="customerRemark"],
#ordersWorkspace .order-grid-cell[data-order-column="executionRemark"],
#ordersWorkspace .order-grid-cell[data-order-column="nextStep"],
#ordersWorkspace .order-grid-cell[data-order-column="latestLog"],
#ordersWorkspace .order-grid-cell[data-order-column="manualExtraItems"],
#ordersWorkspace .order-grid-cell[data-order-column="tags"],
.workbench-grid-cell[data-order-column="customerRemark"],
.workbench-grid-cell[data-order-column="executionRemark"],
.workbench-grid-cell[data-order-column="nextStep"],
.workbench-grid-cell[data-order-column="latestLog"],
.workbench-grid-cell[data-order-column="manualExtraItems"],
.workbench-grid-cell[data-order-column="tags"] {
  display: block;
  align-items: flex-start;
  overflow: visible;
  overflow-wrap: break-word;
  text-align: center;
  white-space: normal;
  word-break: normal;
}

#ordersWorkspace .order-grid-cell[data-order-column="customer"],
#ordersWorkspace .order-grid-cell[data-order-column="phone"],
.workbench-grid-cell[data-order-column="customer"],
.workbench-grid-cell[data-order-column="phone"] {
  display: block;
  overflow-wrap: break-word;
  text-align: center;
  white-space: normal;
  word-break: normal;
}

#ordersWorkspace .order-grid-cell[data-order-column="customer"] .cell-main,
#ordersWorkspace .order-grid-cell[data-order-column="customer"] .cell-sub,
#ordersWorkspace .order-grid-cell[data-order-column="phone"] .cell-main,
#ordersWorkspace .order-grid-cell[data-order-column="phone"] .cell-sub,
.workbench-grid-cell[data-order-column="customer"] .cell-main,
.workbench-grid-cell[data-order-column="customer"] .cell-sub,
.workbench-grid-cell[data-order-column="phone"] .cell-main,
.workbench-grid-cell[data-order-column="phone"] .cell-sub {
  overflow: visible;
  overflow-wrap: break-word;
  text-overflow: clip;
  text-align: center;
  white-space: normal;
  word-break: normal;
}

#ordersWorkspace .order-grid-cell:is([data-order-column="customerRemark"], [data-order-column="executionRemark"], [data-order-column="nextStep"], [data-order-column="latestLog"], [data-order-column="manualExtraItems"]) .cell-main,
.workbench-grid-cell:is([data-order-column="customerRemark"], [data-order-column="executionRemark"], [data-order-column="nextStep"], [data-order-column="latestLog"], [data-order-column="manualExtraItems"]) .cell-main {
  display: -webkit-box;
  max-width: none;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
  text-align: center;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: normal;
}

#ordersWorkspace .order-grid-cell[data-order-column="customerType"],
#ordersWorkspace .order-grid-cell[data-order-column="shootingType"],
#ordersWorkspace .order-grid-cell[data-order-column="date"],
#ordersWorkspace .order-grid-cell[data-order-column="time"],
#ordersWorkspace .order-grid-cell[data-order-column="unitPrice"],
#ordersWorkspace .order-grid-cell[data-order-column="duration"],
#ordersWorkspace .order-grid-cell[data-order-column="serviceName"],
#ordersWorkspace .order-grid-cell[data-order-column="stagingImage"],
#ordersWorkspace .order-grid-cell[data-order-column="stagingFee"],
#ordersWorkspace .order-grid-cell[data-order-column="extraPaid"],
#ordersWorkspace .order-grid-cell[data-order-column="overtimeFee"],
#ordersWorkspace .order-grid-cell[data-order-column="deposit"],
#ordersWorkspace .order-grid-cell[data-order-column="finalPayment"],
#ordersWorkspace .order-grid-cell[data-order-column="total"],
#ordersWorkspace .order-grid-cell[data-order-column="status"],
#ordersWorkspace .order-grid-cell[data-order-column="scheduleState"],
#ordersWorkspace .order-grid-cell[data-order-column="dataStatus"],
#ordersWorkspace .order-grid-cell[data-order-column="headcount"],
.workbench-grid-cell[data-order-column="customerType"],
.workbench-grid-cell[data-order-column="shootingType"],
.workbench-grid-cell[data-order-column="date"],
.workbench-grid-cell[data-order-column="time"],
.workbench-grid-cell[data-order-column="unitPrice"],
.workbench-grid-cell[data-order-column="duration"],
.workbench-grid-cell[data-order-column="serviceName"],
.workbench-grid-cell[data-order-column="stagingImage"],
.workbench-grid-cell[data-order-column="stagingFee"],
.workbench-grid-cell[data-order-column="extraPaid"],
.workbench-grid-cell[data-order-column="overtimeFee"],
.workbench-grid-cell[data-order-column="deposit"],
.workbench-grid-cell[data-order-column="finalPayment"],
.workbench-grid-cell[data-order-column="total"],
.workbench-grid-cell[data-order-column="status"],
.workbench-grid-cell[data-order-column="scheduleState"],
.workbench-grid-cell[data-order-column="dataStatus"],
.workbench-grid-cell[data-order-column="headcount"] {
  justify-content: center;
  overflow-wrap: normal;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
}

.workbench-table-wrap {
  overflow-x: auto;
}

.headcount-summary {
  color: inherit;
  font-weight: 650;
}

.headcount-summary.over-standard {
  box-sizing: border-box;
  padding: 4px 7px;
  border: 1px solid rgba(211, 126, 42, 0.24);
  border-radius: 8px;
  color: #a45f1d;
  background: rgba(240, 164, 74, 0.14);
  line-height: 1.35;
  white-space: normal;
}

/* Single order-table surface: order management is the source table, workbench sections are filtered views. */
.order-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.order-table-wrap .order-grid-table {
  display: block;
  width: max-content;
  min-width: 100%;
  font-size: 10.8px;
}

.order-table-wrap .order-grid-head,
.order-table-wrap .order-grid-body {
  display: grid;
  min-width: 0;
}

.order-table-wrap .order-grid-row {
  position: static;
  top: auto;
  z-index: auto;
  display: grid;
  width: 100%;
  min-width: 100%;
  column-gap: 1px;
  align-items: stretch;
  background: var(--line);
}

.order-table-wrap .order-grid-cell {
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 5px 6px;
  border-right: 0;
  border-bottom: 0;
  overflow: visible;
  overflow-wrap: normal;
  color: inherit;
  font-size: 10.4px;
  line-height: 1.35;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

.order-table-wrap .order-grid-cell[data-order-column] {
  width: auto;
  min-width: 0;
}

.order-table-wrap .order-grid-header-cell {
  display: grid;
  min-height: 38px;
  place-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: 2px solid rgba(57, 125, 170, 0.26);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(238, 248, 255, 0.99));
  color: #203a54;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  box-shadow: 0 12px 22px rgba(45, 62, 90, 0.1);
}

.order-table-wrap .order-grid-body-cell {
  min-height: 35px;
  background: #ffffff;
}

.order-table-wrap .order-grid-body .order-grid-row:nth-child(even) .order-grid-body-cell {
  background: #ffffff;
}

.order-table-wrap .order-grid-empty-state {
  grid-column: 1 / -1;
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #ffffff;
  color: #6a7d90;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.order-table-wrap .order-grid-row:hover .order-grid-body-cell,
.order-table-wrap .order-grid-row.selected .order-grid-body-cell {
  background: #ffffff;
}

.order-table-wrap .order-grid-row.customer-member-row .order-grid-body-cell {
  background: #ffffff;
}

.order-table-wrap .order-grid-row.customer-member-row:hover .order-grid-body-cell,
.order-table-wrap .order-grid-row.customer-member-row.selected .order-grid-body-cell {
  background: #ffffff;
}

.order-table-wrap .order-grid-body-cell[data-order-inline-edit] {
  cursor: default;
}

.order-table-wrap .order-grid-body-cell[data-order-inline-edit]:hover {
  box-shadow: inset 0 0 0 1px rgba(57, 125, 170, 0.2);
  background: #ffffff;
}

#ordersWorkspace .order-grid-body-cell[data-order-inline-edit].is-active-cell,
.workbench-grid-body-cell[data-order-inline-edit].is-active-cell,
.order-table-wrap .order-grid-body-cell[data-order-inline-edit].is-active-cell {
  background: #f2f9ff;
  box-shadow: inset 0 0 0 2px rgba(57, 125, 170, 0.42);
}

.order-table-wrap .order-grid-body-cell.is-editing {
  background: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(109, 168, 206, 0.32);
}

.order-table-wrap .order-grid-row.order-abnormal-row .order-grid-body-cell.is-active-cell,
#ordersWorkspace .order-grid-row.order-abnormal-row .order-grid-body-cell.is-active-cell {
  background: #fff1f2 !important;
  box-shadow: inset 0 0 0 2px rgba(197, 70, 91, 0.42);
}

/* Final grid-line paint: expose one shared divider layer instead of per-cell borders. */
#ordersWorkspace .order-grid-head,
.order-table-wrap .order-grid-head {
  background: var(--line);
  border-bottom: 1px solid rgba(57, 125, 170, 0.18);
}

#ordersWorkspace .order-grid-body,
.order-table-wrap .order-grid-body {
  row-gap: 1px;
  background: var(--line);
}

#ordersWorkspace .order-grid-row,
.order-table-wrap .order-grid-row {
  column-gap: 1px;
  background: var(--line);
}

#ordersWorkspace .order-grid-cell,
.order-table-wrap .order-grid-cell {
  border-right: 0;
  border-bottom: 0;
}

#ordersWorkspace .order-grid-header-cell,
.order-table-wrap .order-grid-header-cell {
  border-bottom: 0;
}

/* Abnormal state must remain visible over hover, selection, and inline-edit paint. */
#ordersWorkspace .order-grid-row.order-abnormal-row .order-grid-body-cell,
#ordersWorkspace .order-grid-row.order-abnormal-row:hover .order-grid-body-cell,
#ordersWorkspace .order-grid-row.order-abnormal-row.selected .order-grid-body-cell,
.order-table-wrap .order-grid-row.order-abnormal-row .order-grid-body-cell,
.order-table-wrap .order-grid-row.order-abnormal-row:hover .order-grid-body-cell,
.order-table-wrap .order-grid-row.order-abnormal-row.selected .order-grid-body-cell {
  background: #fff1f2 !important;
}

/* Shared order tables keep one complete horizontal row; the wrapper owns overflow. */
#ordersWorkspace .table-wrap,
.order-table-wrap,
.workbench-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  scrollbar-color: #829bb1 #edf3f7;
  scrollbar-width: auto;
}

/* Keep the shared horizontal order scrollbar easy to grab without changing table density. */
#ordersWorkspace .table-wrap::-webkit-scrollbar,
.order-table-wrap::-webkit-scrollbar,
.workbench-table-wrap::-webkit-scrollbar {
  height: 14px;
}

#ordersWorkspace .table-wrap::-webkit-scrollbar-track,
.order-table-wrap::-webkit-scrollbar-track,
.workbench-table-wrap::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #edf3f7;
}

#ordersWorkspace .table-wrap::-webkit-scrollbar-thumb,
.order-table-wrap::-webkit-scrollbar-thumb,
.workbench-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid #edf3f7;
  border-radius: 999px;
  background: #829bb1;
}

#ordersWorkspace .table-wrap::-webkit-scrollbar-thumb:hover,
.order-table-wrap::-webkit-scrollbar-thumb:hover,
.workbench-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #637f98;
}

#ordersWorkspace .table-wrap::-webkit-scrollbar-thumb:active,
.order-table-wrap::-webkit-scrollbar-thumb:active,
.workbench-table-wrap::-webkit-scrollbar-thumb:active {
  background: #4f6d87;
}

/* Order-page categories only; workbench keeps the shared complete order source. */
#ordersWorkspace .order-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 24px 18px;
  padding: 5px;
  width: fit-content;
  border: 1px solid #e2ebf5;
  border-radius: 12px;
  background: #f5f8fc;
}

#ordersWorkspace .order-category-tabs button {
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #536c85;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#ordersWorkspace .order-category-tabs button:hover {
  background: #eaf3fb;
}

#ordersWorkspace .order-category-tabs button[aria-pressed="true"] {
  border-color: #cde2f3;
  background: #e7f3ff;
  color: #285e85;
}

#ordersWorkspace .order-category-tabs button:focus-visible {
  outline: 2px solid #3e83af;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  #ordersWorkspace .order-category-tabs { margin-left: 12px; margin-right: 12px; }
}

/* attendance-reminder-manager.css */
.attendance-manager .ar-head,.attendance-manager .ar-overview{display:flex;justify-content:space-between;align-items:center;gap:20px}.attendance-manager p{line-height:1.6;color:var(--muted,#756b70)}.attendance-manager button{border:1px solid #dccbd3;border-radius:9px;background:#fff;padding:9px 14px;color:#684754;cursor:pointer}.attendance-manager button:disabled{cursor:default;opacity:.5}.attendance-manager .ar-overview{padding:18px;background:#fbf5f8;border-radius:12px;margin:18px 0}.attendance-manager form{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:20px 0}.attendance-manager label{display:grid;gap:7px}.attendance-manager input{min-width:260px;padding:10px;border:1px solid #dccbd3;border-radius:8px}.attendance-manager .ar-table{overflow-x:auto}.attendance-manager table{width:100%;border-collapse:collapse;min-width:640px}.attendance-manager th,.attendance-manager td{text-align:left;padding:12px;border-bottom:1px solid #eee4e9;vertical-align:top}.attendance-manager small{display:block;color:#8d8187;font-size:12px;margin-top:5px;overflow-wrap:anywhere}.attendance-manager .ar-error{color:#b73a46}.attendance-manager .ar-note{font-size:12px}.attendance-manager .ar-summary{padding:15px;border:1px solid #eddee5;border-radius:12px;margin-bottom:15px}@media(max-width:700px){.attendance-manager .ar-head,.attendance-manager .ar-overview{align-items:flex-start;flex-direction:column}.attendance-manager input{min-width:0;width:100%}}

/* promotion-content-editor.css */
.pm-content-workspace { --cv-ink:var(--text); --cv-muted:var(--muted); --cv-line:var(--line); --cv-accent:var(--pink-strong); display:grid; grid-template-columns:220px minmax(0,1fr); background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:24px; }
.pm-content-list { padding:20px 14px; border-right:1px solid var(--line); background:var(--surface); min-width:0; max-height:800px; overflow:auto; }
.pm-content-list p { color:var(--muted); font-size:12px; line-height:1.8; margin:20px 0 0; }
.pm-content-list .pm-content-item { display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; text-align:left; white-space:normal; line-height:1.6; padding:14px 12px; margin:0 0 12px; }
.pm-content-item b { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.pm-content-item small { color:var(--muted); font-size:12px; }
.pm-content-item[aria-pressed="true"] { background:var(--blue-soft); border-color:var(--blue); box-shadow:inset 3px 0 var(--blue); }
.pm-content-list-heading { margin:0 0 14px; }
.pm-content-list-heading button { width:100%; }
.pm-content-stage { min-width:0; }
.pm-content-loading { padding:24px; color:var(--muted); }
.pm-invite-editor { display:flex; flex-direction:column; height:min(800px,calc(100vh - 240px)); min-height:620px; }
.pm-content-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 20px; border-bottom:1px solid var(--line); }
.pm-content-header h3 { font-size:16px; margin:0 0 6px; }
.pm-content-header p { color:var(--muted); font-size:12px; margin:0; }
.pm-content-header button { flex-shrink:0; }
.pm-content-receipt, .pm-content-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 20px; color:var(--muted); font-size:12px; background:var(--surface-soft); }
.pm-content-receipt button, .pm-content-footer button { font-size:12px; }
.pm-content-receipt [data-state="error"] { color:var(--red); }
.pm-content-receipt [data-state="success"] { color:var(--green); }
.pm-content-receipt [data-state="pending"] { color:var(--amber); }
.pm-invite-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 28px; padding:14px 20px; border-bottom:1px solid var(--line); }
.pm-invite-action-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pm-invite-action-group span { color:var(--muted); font-size:12px; margin-right:4px; }
.pm-invite-action-group button { padding:7px 12px; font-size:13px; }
.pm-invite-action-group button[aria-pressed="true"] { color:var(--blue); background:var(--blue-soft); border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); font-weight:600; }
.pm-invite-actions p { flex-basis:100%; color:var(--muted); font-size:11px; line-height:1.8; margin:0; }
.pm-invite-body { display:grid; grid-template-columns:minmax(300px,1fr) minmax(320px,420px); flex:1; min-height:0; }
.pm-invite-body .cv-canvas { background:var(--blue-soft); }
.pm-invite-fields { padding:0 20px 24px; border-left:1px solid var(--line); overflow:auto; min-width:0; }
.pm-invite-fields section { padding-top:22px; }
.pm-invite-fields h4 { font-size:13px; border-bottom:1px solid var(--line); padding-bottom:12px; margin:0 0 16px; }
.pm-invite-fields label:not(.pm-check) { display:flex; flex-direction:column; gap:8px; font-size:13px; margin-bottom:16px; }
.pm-invite-fields :is(input:not([type=checkbox]),textarea,select) { width:100%; min-width:0; box-sizing:border-box; font:inherit; padding:10px 11px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); }
.pm-invite-fields textarea { min-height:110px; resize:vertical; line-height:1.7; }
.pm-invite-fields small, .pm-invite-fields p { color:var(--muted); font-size:11px; line-height:1.8; margin:8px 0 16px; }
.pm-invite-dates { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pm-content-stage .promotion-offer-editor { width:100%; max-width:none; border:0; border-radius:0; margin:0; height:min(800px,calc(100vh - 240px)); min-height:620px; }
.pm-content-stage .promotion-offer-editor .cv-body { grid-template-columns:minmax(300px,1fr) minmax(320px,420px); }
.pm-content-stage .promotion-offer-editor .cv-pages { display:none; }
.pm-content-stage .promotion-offer-editor .cv-canvas { display:flex; }
.pm-records > summary { font-size:15px; font-weight:600; cursor:pointer; padding:6px 0; }
.pm-records[open] > summary { margin-bottom:22px; }
.pm-content-workspace :is(button,input,textarea,select):focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
@media(max-width:1200px) {
  .pm-content-workspace { grid-template-columns:190px minmax(0,1fr); }
  .pm-invite-body, .pm-content-stage .promotion-offer-editor .cv-body { grid-template-columns:minmax(260px,1fr) minmax(280px,1fr); }
  .pm-invite-body .cv-canvas, .pm-content-stage .promotion-offer-editor .cv-canvas { padding:14px 10px; }
}
@media(max-width:1000px) {
  .pm-content-workspace { grid-template-columns:180px minmax(0,1fr); }
  .pm-invite-body, .pm-content-stage .promotion-offer-editor .cv-body { display:flex; flex-direction:column; overflow:auto; }
  .pm-invite-body .cv-canvas, .pm-content-stage .promotion-offer-editor .cv-canvas { min-height:580px; flex-shrink:0; }
  .pm-invite-fields { overflow:visible; border-left:0; }
  .pm-content-stage .promotion-offer-editor .cv-inspector { overflow:visible; flex-shrink:0; }
}
@media(max-width:640px) {
  .pm-content-workspace { display:block; }
  .pm-content-list { max-height:250px; border-right:0; border-bottom:1px solid var(--line); }
  .pm-invite-actions { padding:12px; gap:12px; }
  .pm-content-header, .pm-content-receipt, .pm-content-footer { flex-wrap:wrap; padding:12px; }
  .pm-invite-editor, .pm-content-stage .promotion-offer-editor { height:850px; min-height:0; }
  .pm-invite-fields { padding-inline:14px; }
  .pm-invite-dates { grid-template-columns:1fr; }
}

/* promotion-manager.css */
.pm-workspace { color:var(--text); }
.pm-workspace .pm-toolbar,.pm-workspace .pm-section-head,.pm-workspace .pm-detail-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.pm-workspace .pm-toolbar p,.pm-workspace .pm-help { color:var(--muted); font-size:14px; line-height:1.7; margin:8px 0; }
.pm-workspace button { border:1px solid var(--line-strong); background:var(--surface); color:var(--blue-strong); padding:9px 15px; border-radius:var(--radius-control); min-height:36px; font:inherit; cursor:pointer; }
.pm-workspace button:disabled { cursor:not-allowed; opacity:.6; }
.pm-workspace input { border:1px solid var(--line-strong); border-radius:var(--radius-control); min-width:0; padding:9px 10px; color:var(--text); font:inherit; background:var(--surface); }
.pm-workspace button:focus-visible,.pm-workspace input:focus-visible,.pm-workspace summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.pm-workspace [data-pm-feedback] { font-size:14px; color:var(--green); line-height:1.7; }
.pm-workspace .pm-error { color:var(--red); }
.pm-workspace .pm-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; max-width:900px; }
.pm-workspace .pm-stats>div { border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:18px 22px; }
.pm-workspace .pm-stats span { font-size:14px; color:var(--muted); }
.pm-workspace .pm-stats strong { display:block; font-size:28px; margin-top:6px; }
.pm-workspace .pm-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; margin-bottom:20px; }
.pm-workspace h3 { font-size:18px; margin:0 0 12px; color:var(--text); }
.pm-workspace .pm-campaign { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.pm-workspace .pm-campaign p { margin:6px 0; font-size:14px; line-height:1.7; }
.pm-workspace .pm-campaign small { color:var(--muted); }
.pm-workspace .pm-campaign-actions { display:flex; gap:12px; align-items:center; flex-shrink:0; }
.pm-workspace .pm-state { background:var(--surface-soft); color:var(--muted); border-radius:6px; padding:7px 10px; font-size:13px; }
.pm-workspace .pm-table-wrap { overflow-x:auto; }
.pm-workspace .pm-table { border-collapse:collapse; width:100%; font-size:14px; }
.pm-workspace .pm-table th { background:var(--blue-soft); font-weight:600; color:var(--text); white-space:nowrap; }
.pm-workspace .pm-table th,.pm-workspace .pm-table td { padding:13px 12px; text-align:left; border-bottom:1px solid var(--line); }
.pm-workspace .pm-table small { display:block; font-size:12px; margin-top:4px; color:var(--muted); }
.pm-workspace .pm-empty { text-align:center!important; color:var(--muted); padding:24px!important; }
.pm-workspace .pm-search { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14px; }
.pm-workspace .pm-search input { width:260px; max-width:100%; }
.pm-workspace .pm-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:end; }
.pm-workspace .pm-field { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:14px; color:var(--muted); }
.pm-workspace .pm-field input { width:100%; box-sizing:border-box; }
.pm-workspace .pm-editor h3,.pm-workspace .pm-form-actions,.pm-workspace .pm-editor .pm-help { grid-column:1/-1; }
.pm-workspace .pm-check { display:flex; gap:9px; align-items:center; font-size:14px; }
.pm-workspace .pm-form-actions { display:flex; gap:12px; }
.pm-workspace .pm-form-actions button[type=submit] { background:var(--pink-soft); border-color:var(--pink); color:var(--pink-strong); }
.pm-workspace .pm-advanced summary { color:var(--muted); font-size:14px; cursor:pointer; }
.pm-workspace .pm-advanced[open] summary { margin-bottom:22px; }
.pm-workspace .pm-advanced .pm-table-wrap { margin:18px 0 24px; }
.pm-workspace [data-pm-customer-detail]:not(:empty) { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
@media(max-width:720px) {
  .pm-workspace .pm-stats { gap:8px; }
  .pm-workspace .pm-stats>div { padding:14px 10px; }
  .pm-workspace .pm-stats span { font-size:12px; }
  .pm-workspace .pm-stats strong { font-size:24px; }
  .pm-workspace .pm-card { padding:16px; }
  .pm-workspace .pm-campaign { flex-direction:column; align-items:flex-start; gap:14px; }
  .pm-workspace .pm-form { grid-template-columns:1fr; }
  .pm-workspace .pm-search { width:100%; }
  .pm-workspace .pm-search input { width:100%; }
}

.pm-workspace button:hover:not(:disabled) { background:var(--blue-soft); border-color:var(--blue); }
.pm-workspace input[readonly] { background:var(--surface-soft); color:var(--muted); }
.pm-workspace input:disabled { background:var(--surface-soft); cursor:not-allowed; }

/* clothing-shops.css */
.sc-shops {
  margin-bottom: 24px;
}
.sc-shops .sc-section-title > div {
  min-width: 0;
}
.sc-shops .sc-section-title p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.sc-shop-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sc-shop-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.sc-shop-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.sc-shop-copy strong {
  overflow-wrap: anywhere;
}
.sc-shop-copy > span {
  color: var(--muted);
  font-size: 12px;
}
.sc-shop-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--blue-soft);
}
.sc-shop-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sc-shop-avatar-edit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}
.sc-shop-form {
  margin-top: 20px;
}
@media (max-width: 800px) {
  .sc-shop-list {
    grid-template-columns: 1fr;
  }
  .sc-shop-row {
    flex-wrap: wrap;
  }
  .sc-shops > .sc-section-title {
    flex-wrap: wrap;
    gap: 12px;
  }
}

.sc-shops [data-shop-feedback] {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 14px;
}
.sc-shops [data-shop-feedback].is-error {
  color: var(--red);
}
.sc-shop-avatar .sc-image-preview {
  width: 100%;
  height: 100%;
}

/* service-catalog.css */
/* Service management uses the approved membership visual system. */
.sc-page {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-width: 0;
  max-width: 1400px;
}
.sc-page .hidden {
  display: none !important;
}
.sc-page :is(h2, h3, h4, p) {
  margin-top: 0;
}
.sc-page h2 {
  font-size: 23px;
  font-weight: 650;
  margin-bottom: 5px;
}
.sc-page h3 {
  font-size: 17px;
  font-weight: 650;
  margin-bottom: 8px;
}
.sc-page h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.sc-page p {
  color: var(--muted);
  margin-bottom: 12px;
}
.sc-page :is(button, input, select, textarea) {
  font: inherit;
  box-sizing: border-box;
}
.sc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--blue-strong);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: none;
  white-space: normal;
}
.sc-button:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
  transform: none;
}
.sc-button-primary {
  background: var(--blue-strong);
  border-color: var(--blue-strong);
  color: #fff;
}
.sc-button-primary:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  color: #fff;
}
.sc-button-danger,
[data-sc-delete] {
  color: var(--red);
  background: var(--red-soft);
}
.sc-page button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.sc-page :is(button, input, textarea, select):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.sc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.sc-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}
.sc-stat strong {
  font-size: 16px;
  line-height: 1;
  color: var(--text);
  font-weight: 650;
}
.sc-stat:hover,
.sc-stat.is-selected {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.sc-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  max-width: 1100px;
}
.sc-search {
  flex: 1 1 240px;
  min-width: 180px;
  max-width: 340px;
}
.sc-filter {
  flex: 0 1 155px;
  min-width: 120px;
}
.sc-search > span,
.sc-filter > span,
.sc-field > span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 550;
  margin: 0 0 6px;
}
.sc-page :is(input:not([type="checkbox"]), textarea, select) {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  padding: 9px 11px;
  background: var(--surface);
  color: var(--text);
  min-height: 38px;
  line-height: 1.5;
}
.sc-page textarea {
  resize: vertical;
  min-height: 80px;
  white-space: pre-wrap;
}
.sc-page :is(input, textarea, select):disabled {
  background: var(--surface-soft);
  color: var(--muted);
  cursor: not-allowed;
}
.sc-toolbar-actions,
.sc-toolbar-actions > span,
.sc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sc-toolbar-actions {
  margin-left: auto;
}
.sc-page [data-sc-feedback] {
  font-size: 13px;
  line-height: 1.6;
  min-height: 21px;
  margin: 10px 0 16px;
  color: var(--muted);
}
.sc-page .is-error {
  color: var(--red) !important;
}
.sc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 320px));
  align-items: start;
  gap: 16px;
}
.sc-catalog-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}
.sc-card-portrait,
.sc-card-photo {
  height: 180px;
  background: var(--blue-soft);
  border-bottom: 1px solid var(--line);
}
.sc-card-portrait {
  height: 140px;
  padding: 12px;
}
.sc-card-portrait .sc-image-preview {
  background: transparent;
}
.sc-card-body {
  padding: 14px;
}
.sc-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.sc-card-title h3 {
  margin: 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.sc-card-intro {
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sc-card-price {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 10px 0;
}
.sc-card-price strong {
  font-size: 16px;
  color: var(--blue-strong);
  font-weight: 650;
}
.sc-card-price small,
.sc-card-meta {
  color: var(--muted);
  font-size: 11px;
}
.sc-card-meta {
  display: grid;
  gap: 3px;
  margin: 10px 0 12px;
}
/* People cards keep the approved width and place identity in one compact row. */
.sc-card-grid:has(.sc-person-card) { align-items: stretch; }
.sc-person-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: minmax(62px, auto) auto auto 1fr auto;
  column-gap: 12px;
  padding: 14px;
}
.sc-person-card > .sc-card-portrait {
  grid-column: 1;
  grid-row: 1;
  width: 54px;
  height: 62px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.sc-person-card > .sc-card-body { display: contents; }
.sc-person-card .sc-card-title { grid-column: 2; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
.sc-person-card :is(.sc-card-intro, .sc-card-price, .sc-card-meta, .sc-row-actions) { grid-column: 1 / -1; min-width: 0; }
.sc-person-card .sc-card-intro { min-height: 3.2em; }
.sc-person-card .sc-card-price { padding: 10px 0 0; margin: 0; border-top: 1px solid var(--line); }
.sc-person-card .sc-card-meta { align-content: start; min-height: 54px; }
.sc-person-card .sc-row-actions { align-self: end; padding-top: 12px; border-top: 1px solid var(--line); }
.sc-person-card .sc-row-actions > .sc-button-primary { flex: 1 1 100%; }
.sc-person-card .sc-order-actions { padding-top: 4px; }
.sc-page :is(.sc-button, .sc-stat, .sc-editor-tabs button) { transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
.sc-page :is(.sc-button, .sc-stat):active:not(:disabled) { box-shadow: inset 0 0 0 1px var(--blue); }
.sc-page[aria-busy=true] [data-sc-refresh] { cursor: progress; }
.sc-catalog .sc-table-count {
  padding: 10px 0;
  background: transparent;
  border: 0;
}
.sc-avatar {
  flex: 0 0 54px;
  width: 54px;
  height: 62px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blue-soft);
  border: 1px solid var(--line);
}
.sc-image-preview {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--blue-soft);
  cursor: zoom-in;
  border-radius: inherit;
  overflow: hidden;
}
.sc-image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  border-radius: inherit;
}
.sc-avatar img {
  object-fit: cover;
}
.sc-image-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 11px;
  color: var(--subtle);
  background: var(--blue-soft);
}
.sc-costume-cover {
  flex: 0 0 68px;
  width: 68px;
  height: 92px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--blue-soft);
}
.sc-badge {
  display: inline-block;
  border-radius: 5px;
  padding: 3px 7px;
  background: #f0f3f7;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  white-space: normal;
  font-weight: 500;
}
.sc-badge-green {
  color: var(--green);
  background: var(--green-soft);
}
.sc-badge-pink {
  color: var(--pink-strong);
  background: var(--pink-soft);
}
.sc-badge-blue {
  color: var(--blue-strong);
  background: var(--blue-soft);
}
.sc-row-actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}
.sc-row-actions > .sc-button {
  min-height: 31px;
  padding: 6px 9px;
  font-size: 12px;
}
.sc-order-actions {
  display: flex;
  gap: 5px;
  width: 100%;
}
.sc-order-actions > .sc-button {
  min-height: 26px;
  padding: 3px 8px;
  font-size: 11px;
}
.sc-table-count {
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  background: #fbfcfe;
}
.sc-list-foot {
  margin: 14px 0 0 !important;
  font-size: 12px;
}
.sc-empty {
  padding: 58px 24px;
  text-align: center;
}
.sc-empty strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}
.sc-empty p {
  margin: 9px 0 0;
  font-size: 13px;
}
.sc-empty-small {
  padding: 27px 18px;
  background: #f7f9fc;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  margin: 12px 0;
}
.sc-inline-panel {
  padding: 22px;
  background: var(--surface);
  border: 1px solid #d8e6f1;
  border-radius: 10px;
  margin: 16px 0;
}
.sc-inline-panel form {
  max-width: 600px;
}
.sc-inline-panel .sc-actions {
  margin-top: 14px;
}
.sc-invite-code {
  display: block;
  width: 220px;
  max-width: 100%;
  margin: 12px 0;
  border-radius: 8px;
}
.sc-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
}
.sc-editor-head > div {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sc-editor-head > div > span {
  font-size: 12px;
  color: var(--muted);
}
.sc-editor-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  max-width: 720px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.sc-editor-summary > .sc-avatar {
  width: 68px;
  height: 60px;
  flex-basis: 68px;
}
.sc-editor-summary p {
  font-size: 13px;
  margin: 0 0 3px;
}
.sc-draft {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
  background: #f5f8fc;
  border-radius: 6px;
  padding: 6px 10px;
}
.sc-editor-tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 4px;
  margin: 12px 0;
  border-bottom: 1px solid var(--line);
}
.sc-editor-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  min-height: 45px;
  padding: 8px 2px;
  background: transparent;
  border-radius: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}
.sc-editor-tabs button:hover {
  color: var(--blue-strong);
}
.sc-editor-tabs .is-selected {
  color: var(--blue-strong);
  border-bottom-color: var(--blue-strong);
}
.sc-editor-content {
  min-height: 220px;
}
.sc-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 0;
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.sc-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.sc-section-title h3 {
  margin: 0;
}
.sc-section-title p {
  font-size: 12px;
  margin: 4px 0 0;
}
.sc-section-title > span {
  color: var(--muted);
  font-size: 12px;
}
.sc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sc-field {
  display: block;
  min-width: 0;
}
.sc-field:has(textarea) {
  grid-column: 1/-1;
}
.sc-avatar-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  max-width: 480px;
}
.sc-avatar-upload .sc-avatar {
  height: 90px;
  width: 80px;
  flex-basis: 80px;
}
.sc-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  border: 1px dashed #bfd4e5;
  border-radius: 9px;
  background: #f6faff;
  color: var(--blue-strong);
  min-height: 60px;
  padding: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin-top: 15px;
  flex: 1;
  min-width: 0;
}
.sc-upload strong {
  font-size: 14px;
  font-weight: 550;
}
.sc-upload span {
  color: var(--muted);
  font-size: 12px;
}
.sc-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.sc-upload:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
.sc-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 150px));
  gap: 8px;
}
.sc-photo {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface);
  cursor: grab;
  min-width: 0;
}
.sc-photo > .sc-image-preview {
  height: 130px;
  border-radius: 0;
}
.sc-photo-caption {
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.sc-photo-caption > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sc-photo-caption .sc-button {
  font-size: 11px;
  min-height: 27px;
  padding: 4px 7px;
}
.sc-album-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.sc-album-head .sc-field {
  flex: 1;
}
.sc-drag-handle {
  cursor: grab;
  color: var(--subtle);
  font-size: 20px;
  align-self: center;
  padding: 4px;
}
.sc-album-head > .sc-button {
  grid-column: 2;
  justify-self: start;
  padding: 4px 8px;
  min-height: 28px;
  font-size: 11px;
}
.sc-album-head .sc-field:nth-of-type(2) {
  grid-column: 2;
}
.sc-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 320px));
  gap: 12px;
}
.sc-tier {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  padding: 18px;
  border-radius: 9px;
}
.sc-tier .sc-field:has(textarea) {
  grid-column: auto;
}
.sc-tier > .sc-button {
  grid-column: auto;
  grid-row: auto;
  align-self: start;
}
.sc-muted {
  color: var(--muted);
}
.sc-savebar {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #fffffff5;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 20px;
  margin: 16px 0 8px;
  max-width: 1100px;
  box-shadow: 0 3px 18px #233e6408;
}
.sc-page .sc-savebar [data-sc-feedback] {
  margin: 0;
  min-height: 0;
}
.sc-savebar > .sc-button {
  flex-shrink: 0;
}
.sc-calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}
.sc-calendar-toolbar input {
  width: auto !important;
  max-width: 180px;
}
.sc-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text);
}
.sc-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-strong);
}
.sc-schedule-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
  gap: 25px;
}
.sc-calendar-week,
.sc-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}
.sc-calendar-week span {
  text-align: center;
  padding: 6px;
  font-size: 12px;
  color: var(--muted);
}
.sc-calendar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 8px 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--text);
  cursor: pointer;
}
.sc-calendar button small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.sc-calendar .is-selected {
  background: var(--blue-soft);
  border-color: #85b3d1;
}
.sc-calendar .is-today {
  box-shadow: inset 0 0 0 1px var(--pink);
  border-color: var(--pink);
}
.sc-calendar .is-past {
  background: #f7f9fb;
  color: var(--subtle);
}
.sc-day-editor {
  padding: 20px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.sc-day-editor > p {
  font-size: 12px;
}
.sc-slot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.sc-slot label {
  font-size: 12px;
  color: var(--muted);
}
.sc-slot label :is(input, select) {
  display: block;
  margin-top: 4px;
}
.sc-slot > .sc-button {
  justify-self: start;
}
.sc-form-cards,
.sc-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 340px));
  gap: 16px;
  align-items: start;
  max-width: 1100px;
}
.sc-form-cards .sc-fields {
  grid-template-columns: 1fr;
}
.sc-album .sc-photo-grid,
.sc-form-cards .sc-photo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sc-editor-content > .sc-section {
  max-width: 720px;
  margin-bottom: 16px;
}
.sc-editor-content > .sc-section:has(.sc-calendar) {
  max-width: 1000px;
}
.sc-clothing-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "info images rental" "sizes images rental";
  align-items: start;
  gap: 16px;
  max-width: 1100px;
  margin-top: 16px;
}
.sc-clothing-info {
  grid-area: info;
}
.sc-clothing-images {
  grid-area: images;
}
.sc-clothing-sizes {
  grid-area: sizes;
}
.sc-clothing-rental {
  grid-area: rental;
}
.sc-clothing-form-grid .sc-section {
  box-shadow: none;
}
.sc-clothing-form-grid .sc-photo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sc-clothing-form-grid textarea {
  min-height: 70px;
  height: 70px;
}
.sc-clothing-form-grid .sc-variant {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
}
.sc-clothing-form-grid .sc-variant .sc-field:nth-child(3) {
  grid-column: 1/-1;
}
.sc-clothing-form-grid .sc-variant > .sc-button {
  justify-self: start;
  grid-column: 1/-1;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}
.sc-form-note {
  font-size: 11px;
  margin: 10px 0 0 !important;
}
.sc-size-summary {
  display: grid;
  gap: 7px;
}
.sc-size-summary > span {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.sc-size-summary strong {
  font-size: 12px;
}
.sc-variant-list {
  display: grid;
  gap: 14px;
}
.sc-variant {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr auto;
  align-items: end;
  gap: 16px;
  padding: 17px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.sc-variant > .sc-button {
  margin-bottom: 2px;
}
.sc-publish-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.sc-publish-row > .sc-field {
  max-width: 190px;
}
.sc-publish-row p {
  margin: 0;
  font-size: 12px;
}
.sc-image-dialog {
  width: min(1200px, calc(100vw - 24px));
  height: min(900px, calc(100dvh - 24px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.sc-image-dialog::backdrop {
  background: #24334799;
}
.sc-image-dialog > .sc-button {
  display: block;
  margin-left: auto;
  margin-bottom: 12px;
}
.sc-image-dialog > img {
  width: 100%;
  height: calc(100% - 54px);
  object-fit: contain;
  display: block;
}
@media (max-width: 1050px) {
  .sc-clothing-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "info images" "sizes rental";
  }
  .sc-schedule-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .sc-search {
    flex-basis: 100%;
    max-width: none;
  }
  .sc-filter {
    flex: 1;
    min-width: 100px;
  }
  .sc-toolbar {
    padding: 12px;
    gap: 10px;
  }
  .sc-toolbar-actions {
    margin-left: 0;
    width: 100%;
  }
  .sc-stat {
    padding: 7px 10px;
  }
  .sc-editor-summary {
    padding: 12px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .sc-editor-summary h2 {
    font-size: 19px;
  }
  .sc-editor-tabs {
    gap: 15px;
  }
  .sc-editor-tabs button {
    font-size: 12px;
  }
  .sc-section {
    padding: 14px;
  }
  .sc-clothing-form-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "info" "images" "sizes" "rental";
  }
  .sc-card-grid,
  .sc-form-cards,
  .sc-album-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sc-catalog-card,
  .sc-form-cards > .sc-section,
  .sc-album {
    max-width: 340px;
  }
  .sc-fields {
    grid-template-columns: 1fr;
  }
  .sc-savebar {
    padding: 12px;
    gap: 10px;
  }
  .sc-page .sc-savebar [data-sc-feedback] {
    font-size: 12px;
  }
  .sc-empty {
    padding: 30px 16px;
  }
  .sc-calendar button {
    min-height: 58px;
  }
  .sc-calendar button small {
    font-size: 9px;
  }
  .sc-calendar {
    gap: 4px;
  }
  .sc-calendar-toolbar {
    gap: 7px;
  }
  .sc-editor-head {
    align-items: start;
  }
}
.sc-image-preview .admin-image-loading-frame {
  display: block;
  width: 100%;
  height: 100%;
}

.sc-savebar [data-sc-save] { min-width: 112px; }
.sc-toolbar [data-sc-refresh] { min-width: 100px; }

/* ui-interaction-motion.css */
/* Opt-in presentation only; request and permission state remain in each workflow. */
[data-ui-disclosure] > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
[data-ui-disclosure] > summary::-webkit-details-marker { display: none; }
[data-ui-disclosure] > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); flex-shrink: 0; margin: 0 3px 3px; transition: transform 140ms ease; }
[data-ui-disclosure] > summary[aria-expanded=true]::after { transform: rotate(225deg); margin-bottom: -3px; }
[data-ui-disclosure-body] { overflow: hidden; }
dialog[data-ui-motion-dialog][open] { animation: none !important; }
.ui-loading-placeholder { display: block; border-radius: 5px; background: var(--line); }
@media (prefers-reduced-motion: reduce) {
  [data-ui-disclosure] *, [data-ui-disclosure] *::after { transition: none !important; animation: none !important; }
}

/* props-warehouse.css */
#propsWarehousePanel{max-width:1600px;margin:auto;color:var(--text,#243746)}.pw-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.pw-toolbar h2{font-size:25px;margin:8px 0}.pw-toolbar p,.pw-help{color:#738393;font-size:13px}.pw-eyebrow{font-size:11px;letter-spacing:.16em;color:#8494a1}.pw-toolbar>div:last-child{display:flex;gap:8px}.pw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}.pw-stats button{background:#fff;border:1px solid #e0e7ed;border-radius:12px;display:flex;justify-content:space-between;padding:20px;text-align:left;color:inherit}.pw-stats strong{font-size:25px;color:#355b73}.pw-stats span{font-size:13px;color:#718596}.pw-tabs{display:flex;gap:26px;border-bottom:1px solid #dde5ec}.pw-tabs button{border:0;background:none;padding:12px 0;color:#7a8b99;cursor:pointer}.pw-tabs [aria-selected=true]{color:#286684;border-bottom:2px solid #286684;font-weight:600}.pw-panel{background:white;border:1px solid #e0e7ed;border-radius:12px;overflow:hidden}.pw-filters{display:flex;align-items:center;gap:10px;padding:16px;background:#fbfcfd}.pw-filters input,.pw-filters select,.pw-form-grid input,.pw-form-grid select,.pw-dialog textarea,.pw-dialog form>label>input{padding:9px 12px;border:1px solid #dce5ec;border-radius:7px;background:white;color:inherit}.pw-filters input[data-pw-search]{min-width:260px}.pw-filters small{margin-left:auto;color:#8292a0;font-size:12px}.pw-table-wrap{overflow:auto}.pw-table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap;font-size:13px}.pw-table th{padding:12px 16px;background:#f8fafc;font-weight:500;color:#7c8e9d}.pw-table td{border-top:1px solid #edf1f4;padding:14px 16px}.pw-table small,.pw-identity small{display:block;color:#8a9aa6;font-size:11px;margin-top:6px}.pw-identity{display:flex;gap:12px;align-items:center}.pw-thumb{width:64px;height:70px;border:1px solid #e6ebef;border-radius:8px;overflow:hidden;padding:0;background:#f7f9fb;cursor:pointer}.pw-thumb .admin-image-loading-frame,.pw-scene-image .admin-image-loading-frame,[data-pw-photos] .admin-image-loading-frame{width:100%;height:100%;display:block}.pw-thumb img,.pw-scene-image img,[data-pw-photos] img{width:100%;height:100%;object-fit:contain!important}.pw-no-photo{font-size:11px;color:#95a3ae;display:flex;height:100%;align-items:center;justify-content:center}.pw-badge{font-size:11px;padding:4px 8px;background:#edf2f5;border-radius:5px;color:#768b9c}.pw-badge.is-on{background:#eaf5ef;color:#518370}.pw-pagination{display:flex;justify-content:space-between;align-items:center;padding:15px;font-size:12px;color:#8a9aa6}.pw-pagination button{margin-left:8px}.pw-empty{padding:28px!important;text-align:center;color:#8494a1}.pw-dialog{width:min(820px,calc(100vw - 32px))}.pw-scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.pw-scenes article,.pw-gallery article{border:1px solid #e5ebef;border-radius:10px;overflow:hidden;background:white}.pw-scenes article>div{padding:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.pw-scenes article span{margin-left:auto;font-size:13px;color:#526f83}.pw-scene-image{display:block;width:100%;height:240px;padding:0;background:#f6f8fa;border:0;cursor:zoom-in}.pw-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}.pw-gallery article>strong,.pw-gallery article>p,.pw-gallery article>button:not(.pw-scene-image){margin:14px;display:block}.pw-gallery p{font-size:12px;color:#748796}.pw-schedule-row{display:flex;gap:18px;align-items:center;border-top:1px solid #e9eef2;padding:15px;font-size:13px}.pw-schedule-row button{margin-left:auto}.pw-review{padding:18px}.pw-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pw-form-grid label,.pw-dialog form>label{display:flex;flex-direction:column;gap:7px;font-size:13px;margin-bottom:16px}.pw-dialog form>label:has(input[type=checkbox]){flex-direction:row}.pw-dialog textarea{min-height:65px;resize:vertical}.pw-photo-zone{border:1px dashed #cbd9e3;border-radius:10px;padding:16px;margin:12px 0 18px}.pw-photo-zone h3{margin:0 0 16px;font-size:14px}.pw-photo-zone small,.pw-photo-zone p{font-size:12px;color:#8393a0;font-weight:400}.pw-upload{display:inline-flex;gap:10px;align-items:center;padding:10px 0;font-size:13px;color:#376983}.pw-upload input{max-width:240px;font-size:12px}[data-pw-photos]{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}[data-pw-photos] article{border:1px solid #e4eaf0;border-radius:8px;padding:8px;background:#fbfcfd}[data-pw-photos] article>button{height:150px;width:100%;padding:0;border:0;background:#f3f6f8}[data-pw-photos] article>span{display:block;padding:8px;font-size:12px;cursor:grab}[data-pw-photos] article>div{display:flex;flex-wrap:wrap;gap:4px}[data-pw-photos] article>div button{font-size:11px;padding:5px}.pw-form-footer{display:flex;gap:10px;border-top:1px solid #e8eef2;padding-top:16px}.pw-form-footer button[type=submit]{margin-left:auto}[data-pw-notice],[data-pw-feedback]{font-size:13px;min-height:18px;color:#638395}.pw-dialog [data-pw-feedback]{margin:10px 20px}.pw-dialog .is-error,#propsWarehousePanel .is-error{color:#b24d4d}@media(max-width:700px){.pw-stats{grid-template-columns:repeat(2,1fr)}.pw-stats button{padding:14px}.pw-toolbar{align-items:flex-start}.pw-toolbar h2{font-size:22px}.pw-tabs{gap:20px}.pw-filters{flex-wrap:wrap}.pw-filters input[data-pw-search]{min-width:100%;width:100%}.pw-filters small{margin-left:0}.pw-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pw-scenes{grid-template-columns:1fr}.pw-schedule-row{flex-wrap:wrap;gap:8px}.pw-form-footer{flex-wrap:wrap}.pw-scene-image{height:260px}}
#propsWarehousePanel .pw-filters input[data-pw-search]{width:330px;flex:0 1 330px}#propsWarehousePanel .pw-filters select{width:auto;min-width:140px;max-width:240px;flex:0 0 auto}#propsWarehousePanel .pw-filters small{white-space:nowrap;flex:0 0 auto}#propsWarehousePanel .pw-thumb .pw-no-photo{white-space:normal;padding:5px}.pw-form-grid input,.pw-form-grid select{width:100%;box-sizing:border-box}.pw-dialog form>label>input{box-sizing:border-box}.pw-dialog form>label>input[type=checkbox]{width:auto}@media(max-width:700px){#propsWarehousePanel .pw-filters input[data-pw-search]{width:100%;flex:1 0 100%}#propsWarehousePanel .pw-filters small{white-space:normal}}

#propsWarehousePanel .pw-table { table-layout:auto; min-width:1060px; width:100%; }
#propsWarehousePanel .pw-table th,#propsWarehousePanel .pw-table td { white-space:nowrap; word-break:normal; overflow-wrap:normal; }
#propsWarehousePanel .pw-thumb { flex:0 0 64px; width:64px; min-width:64px; }
#propsWarehousePanel .pw-identity>div { min-width:0; max-width:200px; }
#propsWarehousePanel .pw-identity small { max-width:180px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
#propsWarehousePanel .pw-toolbar>div:last-child { flex-shrink:0; }
#propsWarehousePanel .pw-toolbar button { white-space:nowrap; }
#propsWarehousePanel .pw-table-wrap { max-width:100%; }
@media(max-width:700px) { #propsWarehousePanel .pw-table th,#propsWarehousePanel .pw-table td { white-space:nowrap!important; word-break:normal; } .pw-dialog .pw-form-grid { grid-template-columns:1fr; } }

#propsWarehousePanel .pw-table th { font-size:12px; } #propsWarehousePanel .pw-table td { font-size:13px; }

/* props-scheduling.css */
.prop-dialog{width:min(1000px,94vw);max-height:88vh;padding:20px;border:1px solid #d6e2eb;border-radius:12px;color:#20394c;background:#fff;box-shadow:0 18px 60px #20394c30}.prop-dialog::backdrop{background:#18354c70}.prop-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px}.prop-dialog h2{font-size:20px;margin:0}.prop-dialog h3{font-size:16px;margin:24px 0 12px}.prop-dialog-body{max-height:68vh;overflow:auto;padding-right:4px}.prop-dialog p{line-height:1.6}.prop-resource-form{display:grid;grid-template-columns:2fr 1fr 1fr 80px;gap:12px;padding:16px 0;border-bottom:1px solid #e4edf3}.prop-dialog label{display:flex;flex-direction:column;gap:6px;font-size:13px}.prop-dialog input:not([type=checkbox]),.prop-dialog select{border:1px solid #cbdce7;border-radius:6px;padding:8px;min-width:0;background:#fff;color:#20394c}.prop-dialog input[type=file]{max-width:230px}.prop-dialog .prop-checkbox{display:flex;flex-direction:row;align-items:center}.prop-form-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.prop-form-actions span{margin-right:auto;color:#62788b;font-size:12px}.prop-pick-row{display:grid!important;grid-template-columns:20px 1fr 90px;align-items:center;padding:10px 0;border-bottom:1px solid #e4edf3}.prop-pending-list>div,.prop-calendar-row{display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid #e4edf3;flex-wrap:wrap}.prop-pending-list span{flex:1}.prop-calendar-row strong{min-width:120px}.prop-feedback{min-height:20px;color:#2c758c;margin:8px 0}.prop-feedback.is-error,.prop-conflict{color:#b42335}.prop-time-hint{display:block;margin-top:5px;line-height:1.35;font-size:11px;font-weight:600;color:#ad620b;white-space:normal}.prop-time-hint:empty{display:none}.prop-time-hint.is-conflict{color:#b42335}.prop-scene-button{max-width:180px;white-space:normal;text-align:left}.prop-review-hint{display:block;color:#ad620b;font-size:11px;margin-top:4px}.prop-dialog [data-prop-picker]{display:grid;gap:14px}.prop-dialog [data-prop-picker]>button{justify-self:start}@media(max-width:640px){.prop-resource-form{grid-template-columns:1fr 1fr}.prop-dialog{padding:14px}.prop-calendar-row{gap:8px}.prop-form-actions{gap:8px}}
[data-prop-photo-preview] .admin-image-frame, [data-prop-photo-preview] img { max-width: 120px; max-height: 90px; object-fit: contain; }

.prop-pick-photo { width:48px; height:56px; flex-shrink:0; }.prop-pick-photo .admin-image-loading-frame { width:100%; height:100%; }.prop-pick-photo img { width:100%; height:100%; object-fit:contain!important; }
.prop-pick-row{grid-template-columns:20px 48px 1fr 90px}

/* order-summary.css */
#ordersWorkspace .order-category-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0 24px 14px;
}
#ordersWorkspace .order-category-summary-row .order-category-tabs { margin: 0; }
#ordersWorkspace .order-summary {
  flex: 0 1 auto;
  max-width: 100%;
  margin-left: auto;
  color: #344f66;
  text-align: right;
}
#ordersWorkspace .order-summary[hidden] { display: none; }
#ordersWorkspace .order-summary-heading,
#ordersWorkspace .order-summary-note { color: #566f83; font-size: 11px; line-height: 1.5; }
#ordersWorkspace .order-summary-heading { margin-bottom: 3px; }
#ordersWorkspace .order-summary-values { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; }
#ordersWorkspace .order-summary-item { display: flex; align-items: baseline; gap: 6px; }
#ordersWorkspace .order-summary-item > span { font-size: 12px; white-space: nowrap; }
#ordersWorkspace .order-summary-item > strong { font-size: 16px; font-variant-numeric: tabular-nums; }
#ordersWorkspace .order-summary-item.is-primary > strong { color: #28698f; font-size: 19px; }
#ordersWorkspace .order-summary-note { margin: 2px 0 0; }
#ordersWorkspace .order-summary-message { margin: 0; max-width: 420px; font-size: 12px; }
@media (max-width: 720px) {
  #ordersWorkspace .order-category-summary-row { margin-left: 12px; margin-right: 12px; }
}

/* order-schedule-editor.css */
.inline-editor-drawer:has(.order-inline-schedule-editor) {
  max-width: min(560px, calc(100vw - 20px));
  padding: 14px;
}
.order-inline-schedule-editor { min-width: 0; gap: 12px; }
.schedule-editor-heading { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.schedule-editor-heading button { width: 28px; font-size: 18px; background: transparent; }
.schedule-editor-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.order-inline-schedule-editor label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; }
.order-inline-schedule-editor input,
.order-inline-schedule-editor select { min-height: 34px; font-size: 13px; }
.order-inline-schedule-editor button { min-height: 30px; font-size: 12px; font-weight: 600; }
.order-inline-schedule-editor button[aria-pressed="true"] { background: var(--blue-strong); color: white; border-color: var(--blue-strong); }
.order-inline-schedule-editor button:focus-visible { outline: 2px solid var(--blue-strong); outline-offset: 2px; }
.schedule-month { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; font-size: 12px; }
.schedule-month strong { flex: 1; text-align: center; }
.schedule-month button { padding: 3px 7px; }
.schedule-weekdays,.schedule-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.schedule-weekdays span { text-align: center; padding: 6px 0; color: var(--muted); font-size: 11px; }
.schedule-days button { min-width: 0; padding: 0; background: white; border-color: transparent; }
.schedule-days button.outside-month { color: var(--subtle); }
.schedule-days button:hover { background: var(--blue-soft); color: var(--blue-strong); }
.schedule-editor-fields { display: grid; align-content: start; gap: 12px; }
.schedule-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.order-inline-schedule-editor .selected-time { border-color: var(--blue-strong); box-shadow: 0 0 0 1px var(--blue-strong); }
.schedule-time-label { display: block; margin: 0 0 6px; color: var(--muted); font-size: 11px; }
.schedule-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.schedule-minutes { display: flex; gap: 6px; }
.schedule-minutes button { min-width: 48px; }
.order-inline-schedule-editor button[type="submit"] { min-height: 36px; margin-top: 0; font-size: 13px; }
@media (max-width: 520px) {
  .schedule-editor-columns { grid-template-columns: 1fr; gap: 12px; }
}

/* order-image-editor.css */
.order-image-editor-dialog {
  width: min(1120px, calc(100vw - 28px));
  max-width: 1120px;
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 1px solid rgba(111, 169, 216, .28);
  border-radius: 14px;
  background: #f7f9fc;
  color: var(--text, #172033);
  box-shadow: 0 24px 80px rgba(23, 32, 51, .28);
}

.order-image-editor-dialog::backdrop { background: rgba(16, 24, 40, .72); backdrop-filter: blur(3px); }
.order-image-editor-shell { display: grid; max-height: calc(100vh - 30px); grid-template-rows: auto minmax(0, 1fr) auto; }
.order-image-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border-bottom: 1px solid rgba(111, 169, 216, .2); background: #fff; }
.order-image-editor-head > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px 10px; min-width: 0; }
.order-image-editor-head span { color: var(--pink-strong, #d9537a); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.order-image-editor-head strong { font-size: 17px; }
.order-image-editor-head small { grid-column: 1 / -1; overflow: hidden; color: var(--muted, #68758a); text-overflow: ellipsis; white-space: nowrap; }
.order-image-editor-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-height: 0; overflow: auto; }
.order-image-editor-stage { display: grid; align-content: center; justify-items: center; gap: 8px; min-width: 0; padding: 18px; background: #1f2937; }
.order-image-editor-stage canvas { display: block; width: min(100%, 800px); height: auto; max-height: calc(100vh - 200px); border-radius: 8px; background: #dfe5ec; box-shadow: 0 10px 34px rgba(0, 0, 0, .28); touch-action: none; cursor: grab; }
.order-image-editor-stage canvas[data-tool='pen'], .order-image-editor-stage canvas[data-tool='arrow'], .order-image-editor-stage canvas[data-tool='text'] { cursor: crosshair; }
.order-image-editor-stage p { margin: 0; color: #d7dee8; font-size: 11px; text-align: center; }
.order-image-editor-tools { display: grid; align-content: start; gap: 14px; padding: 16px; overflow: auto; border-left: 1px solid rgba(111, 169, 216, .2); background: #fff; }
.order-image-editor-tools fieldset { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; }
.order-image-editor-tools legend, .order-image-editor-tools label > span { color: var(--muted, #68758a); font-size: 11px; font-weight: 850; }
.order-image-editor-segmented, .order-image-editor-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.order-image-editor-tool-grid { grid-template-columns: repeat(2, 1fr); }
.order-image-editor-segmented button, .order-image-editor-tool-grid button, .order-image-editor-small-actions button { min-height: 32px; border: 1px solid rgba(111, 169, 216, .28); border-radius: 7px; background: #f8fbff; color: #334155; font-size: 11px; font-weight: 800; cursor: pointer; }
.order-image-editor-segmented button.is-active, .order-image-editor-tool-grid button.is-active { border-color: rgba(242, 122, 154, .62); background: var(--pink-soft, #fff2f6); color: var(--pink-strong, #d9537a); }
.order-image-editor-zoom, .order-image-editor-color, .order-image-editor-text { display: grid; gap: 7px; }
.order-image-editor-zoom > span { display: flex; justify-content: space-between; }
.order-image-editor-zoom input { accent-color: var(--pink, #f27a9a); }
.order-image-editor-color input { width: 100%; height: 34px; padding: 2px; border: 1px solid rgba(111, 169, 216, .28); border-radius: 7px; background: #fff; }
.order-image-editor-text input { min-height: 34px; padding: 0 9px; border: 1px solid rgba(111, 169, 216, .28); border-radius: 7px; }
.order-image-editor-small-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.order-image-editor-small-actions button:last-child { grid-column: 1 / -1; }
.order-image-editor-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(111, 169, 216, .2); background: #fff; }

@media (max-width: 760px) {
  .order-image-editor-body { grid-template-columns: 1fr; }
  .order-image-editor-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(111, 169, 216, .2); border-left: 0; }
  .order-image-editor-stage canvas { max-height: 48vh; }
}

/* image-input-workflow.css */
[data-image-input-zone] {
  position: relative;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

[data-image-input-zone].is-image-drag-over {
  border-color: rgba(219, 76, 118, 0.58) !important;
  background: #fff5f9 !important;
  box-shadow: inset 0 0 0 2px rgba(219, 76, 118, 0.14), 0 8px 22px rgba(84, 55, 68, 0.1);
}

[data-image-input-zone].is-image-drag-over::after {
  position: absolute;
  z-index: 12;
  right: 8px;
  bottom: 8px;
  border: 1px solid rgba(219, 76, 118, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  padding: 4px 8px;
  color: #a23d61;
  content: '释放后加入图片';
  font-size: 10px;
  font-weight: 850;
  pointer-events: none;
}


/* order-remark-attachments.css */
.inline-editor-drawer.order-remark-inline-drawer {
  max-width: min(430px, calc(100vw - 20px));
}

.order-remark-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.order-remark-cell-preview,
.order-remark-attachment-preview {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}

.order-remark-cell-preview {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  font-size: 11px;
  color: var(--muted, #667085);
}

.order-remark-cell-image,
.order-remark-cell-preview .admin-image-loading-frame {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
}

.order-remark-gallery-dialog {
  width: min(980px, calc(100vw - 28px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #111827;
  color: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .42);
}

.order-remark-gallery-dialog::backdrop {
  background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(5px);
}

.order-remark-gallery-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(280px, 72vh) auto;
  min-height: min(680px, calc(100vh - 48px));
}

.order-remark-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(17, 24, 39, .96);
}

.order-remark-gallery-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.order-remark-gallery-head span {
  color: #cbd5e1;
  font-size: 12px;
}

.order-remark-gallery-head button,
.order-remark-gallery-nav {
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
}

.order-remark-gallery-head button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
}

.order-remark-gallery-stage {
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  background: #020617;
  touch-action: pan-y;
  user-select: none;
}

.order-remark-gallery-image,
.order-remark-gallery-stage .admin-image-loading-frame {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 72vh;
  object-fit: contain;
}

.order-remark-gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 58px;
  padding: 0;
  border-radius: 12px;
  font-size: 34px;
  line-height: 1;
  transform: translateY(-50%);
}

.order-remark-gallery-nav.is-prev { left: 12px; }
.order-remark-gallery-nav.is-next { right: 12px; }

.order-remark-gallery-thumbs {
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 10px 14px 12px;
  overflow-x: auto;
  background: rgba(17, 24, 39, .96);
}

.order-remark-gallery-thumbs > button {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  padding: 2px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

.order-remark-gallery-thumbs > button.is-active {
  border-color: #f472b6;
}

.order-remark-gallery-thumb,
.order-remark-gallery-thumbs .admin-image-loading-frame {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
}

.order-remark-inline-editor {
  gap: 10px;
}

.order-remark-text-field,
.order-remark-file-field {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--muted, #667085);
}

.order-remark-text-field textarea {
  min-height: 92px;
  resize: vertical;
}

.order-remark-file-field input[type='file'] {
  width: 100%;
  padding: 7px;
  border: 1px dashed #f2a8bd;
  border-radius: 10px;
  background: #fff8fb;
  color: #475467;
  font-size: 11px;
}

.order-remark-attachment-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.order-remark-attachment-item {
  position: relative;
  min-width: 0;
}

.order-remark-attachment-preview,
.order-remark-attachment-image,
.order-remark-attachment-preview .admin-image-loading-frame {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 9px;
  object-fit: cover;
  overflow: hidden;
}

.order-remark-attachment-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(80, 22, 40, 0.82);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
}

.order-remark-attachment-empty,
.order-remark-upload-feedback {
  margin: 0;
  font-size: 11px;
  color: var(--muted, #667085);
}

.order-remark-upload-feedback[data-status='uploading'] {
  color: #b54708;
}

.order-remark-upload-feedback[data-status='success'] {
  color: #067647;
}

.order-remark-upload-feedback[data-status='error'] {
  color: #b42318;
}

.order-remark-draft-editor {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.order-remark-draft-list {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
}

.order-remark-draft-uploaded {
  display: grid;
  gap: 4px;
}

.order-remark-draft-uploaded > small {
  color: #4f6f61;
  font-size: 9px;
  font-weight: 800;
}

.order-remark-draft-uploaded .order-remark-attachment-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.order-remark-draft-item {
  position: relative;
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
}

.order-remark-draft-item > button:first-child {
  grid-area: 1 / 1;
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(111, 169, 216, .28);
  border-radius: 6px;
  background: #f8fbff;
  cursor: zoom-in;
}

.order-remark-draft-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.order-remark-draft-item > span { position: absolute; left: 3px; bottom: 3px; min-width: 14px; padding: 1px 3px; border-radius: 4px; background: rgba(23, 32, 51, .76); color: #fff; font-size: 8px; text-align: center; }
.order-remark-draft-item [data-order-remark-draft-edit], .order-remark-draft-item [data-order-remark-draft-remove] { position: absolute; top: 2px; min-height: 16px; padding: 1px 3px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .9); color: #344054; font-size: 8px; font-weight: 800; cursor: pointer; }
.order-remark-draft-item [data-order-remark-draft-edit] { left: 2px; }
.order-remark-draft-item [data-order-remark-draft-remove] { right: 2px; color: #b42318; }
.order-remark-draft-empty, .order-remark-draft-feedback { margin: 0; color: var(--muted, #68758a); font-size: 9px; line-height: 1.25; }
.order-remark-draft-add { position: relative; display: grid; min-height: 26px; place-items: center; overflow: hidden; border: 1px dashed rgba(242, 122, 154, .48); border-radius: 6px; background: var(--pink-soft, #fff2f6); color: var(--pink-strong, #d9537a); font-size: 9px; font-weight: 850; cursor: pointer; }
.order-remark-draft-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.order-remark-draft-add:focus-within { outline: 3px solid rgba(236, 72, 153, .3); outline-offset: 2px; }
.order-remark-draft-feedback[data-status='editing'], .order-remark-draft-feedback[data-status='uploading'] { color: #b54708; }
.order-remark-draft-feedback[data-status='success'] { color: #067647; }
.order-remark-draft-feedback[data-status='error'] { color: #b42318; }

.order-remark-cell-preview:focus-visible,
.order-remark-attachment-preview:focus-visible,
.order-remark-attachment-remove:focus-visible,
.order-remark-file-field input[type='file']:focus-visible {
  outline: 3px solid rgba(236, 72, 153, 0.3);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .order-remark-attachment-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-remark-gallery-dialog {
    width: calc(100vw - 12px);
    border-radius: 12px;
  }

  .order-remark-gallery-shell {
    grid-template-rows: auto minmax(240px, 70vh) auto;
    min-height: calc(100vh - 20px);
  }

  .order-remark-gallery-nav {
    width: 38px;
    height: 50px;
  }
}

/* offline-order-draft.css */
/* Right-side offline order drawer */
.offline-order-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(720px, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid rgba(111, 133, 158, 0.2);
  border-radius: 0;
  background: #f4f7fa;
  box-shadow: -18px 0 48px rgba(31, 48, 68, 0.22);
  color: #24384f;
}

.offline-order-drawer::backdrop {
  background: rgba(28, 41, 56, 0.32);
  backdrop-filter: blur(1px);
}

.offline-order-drawer-body {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.offline-draft-row {
  min-height: 100%;
  background: #f4f7fa;
}

.offline-draft-toolbar {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(111, 133, 158, 0.18);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(31, 48, 68, 0.06);
  backdrop-filter: blur(16px);
}

.offline-draft-title {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: 7px 9px;
}

.offline-draft-title strong {
  color: #24384f;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.offline-draft-title .status-chip {
  min-height: 22px;
  padding: 0 8px;
  font-size: 10px;
}

.offline-draft-location {
  border-radius: 999px;
  padding: 4px 8px;
  background: #edf5fb;
  color: #44708e;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.offline-draft-feedback-stack {
  display: grid;
  flex: 1 0 100%;
  gap: 3px;
  color: #69788a;
  font-size: 11px;
  line-height: 1.45;
}

.offline-draft-validation-summary {
  display: block;
  padding: 7px 9px;
  border: 1px solid rgba(180, 35, 24, 0.24);
  border-radius: 7px;
  background: #fff1f0;
  color: #b42318;
  font-size: 11px;
  font-weight: 850;
}

.offline-draft-validation-summary[hidden] {
  display: none;
}

.offline-draft-conflict[data-status="available"] {
  color: #18794e;
}

.offline-draft-conflict[data-status="conflict"] {
  color: #b42318;
  font-weight: 850;
}

.offline-draft-conflict[hidden] {
  display: none;
}

.offline-draft-toolbar .inline-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 7px;
  margin: 0;
}

.offline-draft-toolbar .compact {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
}

.offline-draft-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px 28px;
}

.offline-draft-field {
  min-width: 0;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid rgba(111, 133, 158, 0.18);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(31, 48, 68, 0.035);
}

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

.offline-draft-field > legend {
  padding: 0 5px;
  color: #65758a;
  font-size: 11px;
  font-weight: 850;
}

.offline-draft-required {
  margin-left: 4px;
  color: #c43227;
  font-size: 9px;
  font-weight: 900;
}

.offline-draft-required[hidden] {
  display: none;
}

.offline-draft-field.has-error {
  border-color: rgba(180, 35, 24, 0.56);
  background: #fffafa;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.08);
}

.offline-draft-field.has-error > legend {
  color: #9f251d;
}

.offline-draft-field .order-inline-editor {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.offline-draft-field[data-order-column="time"] .order-inline-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.offline-draft-field input,
.offline-draft-field select,
.offline-draft-field textarea {
  width: 100%;
  min-width: 0;
  border-color: rgba(94, 134, 170, 0.28);
  border-radius: 8px;
  background: #fbfdff;
  color: #273b52;
  font-size: 12px;
  font-weight: 740;
}

.offline-draft-field input,
.offline-draft-field select {
  height: 36px;
  min-height: 36px;
  padding: 0 9px;
}

.offline-draft-field textarea {
  min-height: 78px;
  padding: 9px;
  line-height: 1.45;
  resize: vertical;
}

.offline-draft-field input:focus,
.offline-draft-field select:focus,
.offline-draft-field textarea:focus {
  border-color: #6f9fc5;
  outline: 3px solid rgba(111, 159, 197, 0.14);
}

.offline-draft-field [aria-invalid="true"] {
  border-color: #c43227;
  background: #fff7f6;
}

.offline-draft-field [aria-invalid="true"]:focus {
  border-color: #b42318;
  outline-color: rgba(180, 35, 24, 0.16);
}

.offline-draft-field-error {
  display: block;
  margin-top: 7px;
  color: #b42318;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}

.offline-draft-field-error[hidden] {
  display: none;
}

.offline-draft-field ::placeholder {
  color: #9aa8b8;
  font-size: 11px;
  font-weight: 680;
}

.offline-draft-field .muted-text {
  display: grid;
  min-height: 36px;
  place-items: center start;
  color: #7a8797;
  font-size: 11px;
  font-weight: 740;
}

@media (max-width: 620px) {
  .offline-order-drawer {
    width: 100vw;
  }

  .offline-draft-toolbar {
    flex-direction: column;
    padding: 15px 16px 13px;
  }

  .offline-draft-toolbar .inline-actions {
    width: 100%;
  }

  .offline-draft-toolbar .inline-actions > button {
    flex: 1 1 0;
  }

  .offline-draft-fields {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 14px 24px;
  }

  .offline-draft-field-wide {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offline-order-drawer::backdrop {
    backdrop-filter: none;
  }
}

/* offline-order-extra-picker.css */
:is(#ordersWorkspace, .offline-order-drawer) .offline-draft-row [data-order-column="manualExtraItems"] {
  position: relative;
  overflow: visible;
  z-index: 7;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-picker {
  position: relative;
  width: 100%;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-picker summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 30px;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid rgba(111, 169, 216, 0.3);
  border-radius: 6px;
  background: #fff;
  color: #30455d;
  cursor: pointer;
  list-style: none;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-picker summary::-webkit-details-marker {
  display: none;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-summary-main {
  display: grid;
  min-width: 0;
  gap: 1px;
  text-align: left;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-summary-main strong,
:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-summary-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-summary-main strong {
  font-size: 10px;
  font-weight: 850;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-summary-main small {
  color: #7a8797;
  font-size: 9px;
  font-weight: 700;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-total {
  color: #b9506d;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  display: grid;
  width: max(190px, 100%);
  max-height: 230px;
  gap: 3px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid rgba(111, 169, 216, 0.28);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(38, 58, 79, 0.18);
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-picker:not([open]) > .offline-order-extra-menu {
  display: none;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 5px 7px;
  border-radius: 6px;
  cursor: pointer;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-option:hover,
:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-option:has(input:checked) {
  background: #fff3f7;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-draft-row .offline-order-extra-option input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-option span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 8px;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-option strong,
:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-option small,
:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-empty {
  font-size: 10px;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-option strong {
  color: #30455d;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-option small {
  color: #b9506d;
  font-weight: 800;
  white-space: nowrap;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-extra-empty {
  padding: 8px;
  color: #7a8797;
  text-align: center;
}

/* offline-order-staging-picker.css */
/* Inline offline order staging picker */
:is(#ordersWorkspace, .offline-order-drawer) .offline-order-staging-choice {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  min-height: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(111, 169, 216, 0.28);
  border-radius: 7px;
  background: #fff;
  padding: 3px;
  color: #24384f;
  cursor: pointer;
  text-align: left;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-staging-choice:hover,
:is(#ordersWorkspace, .offline-order-drawer) .offline-order-staging-choice:focus-visible {
  border-color: rgba(226, 119, 168, 0.52);
  box-shadow: 0 0 0 2px rgba(226, 119, 168, 0.12);
  outline: none;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-staging-thumb {
  width: 30px;
  height: 40px;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  object-fit: cover;
  object-position: center;
  background: #edf1f6;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-staging-thumb-empty {
  display: grid;
  place-items: center;
  color: #7a8797;
  font-size: 10px;
  font-weight: 850;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-staging-choice-main,
.offline-order-staging-option-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-staging-choice-main strong,
:is(#ordersWorkspace, .offline-order-drawer) .offline-order-staging-choice-main small,
.offline-order-staging-option-main strong,
.offline-order-staging-option-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-staging-choice-main strong,
.offline-order-staging-option-main strong {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
}

:is(#ordersWorkspace, .offline-order-drawer) .offline-order-staging-choice-main small,
.offline-order-staging-option-main small {
  color: #66758a;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.1;
}

.offline-order-staging-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 40px));
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.offline-order-staging-dialog::backdrop {
  background: rgba(15, 23, 42, 0.34);
}

.offline-order-staging-frame {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: min(680px, calc(100vh - 40px));
}

.offline-order-staging-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.offline-order-staging-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.offline-order-staging-head strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
}

.offline-order-staging-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.offline-order-staging-filter-scroll {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.offline-order-staging-filter {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 4px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  cursor: pointer;
}

.offline-order-staging-filter:hover,
.offline-order-staging-filter:focus-visible,
.offline-order-staging-filter.is-active {
  border-color: rgba(226, 119, 168, 0.52);
  background: #fff2f8;
  color: #a53d70;
  outline: none;
}

.offline-order-staging-count {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.offline-order-staging-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #f8fafc;
}

.offline-order-staging-load-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 16px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f4f7fb;
  color: #52627a;
  font-size: 13px;
}

.offline-order-staging-load-state.is-error {
  border: 1px solid #f1b8bd;
  background: #fff5f5;
  color: #a43843;
}

.offline-order-staging-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

.offline-order-staging-option-row[hidden] {
  display: none;
}

.offline-order-staging-option {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.offline-order-staging-option:hover,
.offline-order-staging-option:focus-visible {
  border-color: rgba(226, 119, 168, 0.44);
  box-shadow: 0 0 0 2px rgba(226, 119, 168, 0.12);
  outline: none;
}

.offline-order-staging-option.is-selected {
  border-color: rgba(226, 119, 168, 0.58);
  background: #fff7fb;
}

.offline-order-staging-option[hidden],
.offline-order-staging-empty[hidden] {
  display: none;
}

.offline-order-staging-detail {
  min-width: 52px;
  border: 1px solid rgba(111, 169, 216, 0.34);
  border-radius: 8px;
  background: #f7fbff;
  padding: 0 10px;
  color: #315d83;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.offline-order-staging-detail:hover,
.offline-order-staging-detail:focus-visible {
  border-color: rgba(226, 119, 168, 0.52);
  background: #fff2f8;
  color: #a53d70;
  outline: none;
}

.offline-order-staging-option .offline-order-staging-thumb {
  width: 58px;
  height: 78px;
  aspect-ratio: 3 / 4;
  border-radius: 7px;
}

.offline-order-staging-option-main strong {
  font-size: 14px;
}

.offline-order-staging-option-main small {
  font-size: 12px;
}

.offline-order-staging-color-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.offline-order-staging-color-tags span {
  border-radius: 999px;
  background: #f3f6fa;
  padding: 2px 6px;
  color: #526176;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.4;
}

.offline-order-staging-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

/* content-config.css */
/* Content config dense editor */
.content-config-workspace {
  display: grid;
  gap: 10px;
}

.content-config-workspace .panel-head {
  margin-bottom: 0;
}

.content-section-switcher {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.content-section-tab {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid rgba(43, 58, 84, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.content-section-tab strong {
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-section-tab span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.content-section-tab.active {
  border-color: rgba(232, 135, 155, 0.36);
  background: #fff7fa;
  box-shadow: inset 3px 0 0 var(--accent-pink);
}

.content-section-tab.is-deferred {
  background: #f8fafc;
}

.content-config-workspace .content-focus-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
  padding: 8px 10px;
  border-color: rgba(111, 169, 216, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.content-config-workspace .content-focus-card strong {
  flex: 0 0 auto;
  font-size: 13px;
}

.content-config-workspace .content-focus-card span {
  min-width: 0;
  font-size: 12px;
  text-align: right;
}

.content-status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 10px;
}

.content-config-workspace .content-sync-card,
.content-config-workspace .content-history-card {
  min-height: 0;
  margin-top: 0;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.content-config-workspace .content-history-card {
  max-height: 92px;
  overflow: auto;
}

.content-config-workspace .content-editor {
  gap: 10px;
  margin-top: 0;
}

.content-config-workspace .content-cloud-loading {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  border: 1px solid rgba(43, 58, 84, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  text-align: center;
}

.content-config-workspace .content-cloud-loading strong {
  color: var(--text);
  font-size: 14px;
}

.content-config-workspace-dense .content-editor-section {
  gap: 0;
  padding: 0;
  border-color: rgba(43, 58, 84, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.content-config-workspace-dense .content-section-head {
  margin: 0;
  padding: 9px 10px;
  background: #f8fafc;
}

.content-config-workspace-dense .content-section-head h3 {
  font-size: 14px;
}

.content-config-workspace [data-field="id"][readonly] {
  border-color: rgba(43, 58, 84, 0.08);
  background: #f3f5f8;
  color: #7b8798;
  cursor: not-allowed;
}

.content-config-workspace-dense .content-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.content-basic-layout {
  display: grid;
  gap: 14px;
  padding: 12px;
  background: #f8fafc;
}

.content-basic-group {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(43, 58, 84, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.content-basic-group-head {
  display: block;
  padding: 14px 16px 13px;
  border-bottom: 1px solid rgba(43, 58, 84, 0.1);
  background: #fbfdff;
  box-shadow: inset 4px 0 0 rgba(111, 169, 216, 0.48);
}

.content-basic-group-long .content-basic-group-head {
  box-shadow: inset 4px 0 0 rgba(232, 135, 155, 0.56);
}

.content-basic-title-block {
  display: grid;
  gap: 5px;
  max-width: 860px;
}

.content-basic-eyebrow {
  color: #6d7d94;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.content-basic-title-block h4 {
  margin: 0;
  color: #273247;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}

.content-basic-title-block p {
  margin: 0;
  color: #526176;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.65;
}

.content-config-workspace-dense .content-form-grid-short {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.content-site-field,
.content-long-field {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 11px;
  border: 1px solid rgba(43, 58, 84, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.content-site-field-wide {
  grid-column: span 2;
}

.content-site-field:focus-within,
.content-long-field:focus-within {
  border-color: rgba(232, 135, 155, 0.48);
  background: #ffffff;
  box-shadow: inset 3px 0 0 var(--accent-pink);
}

.content-config-workspace-dense .content-site-field > span,
.content-config-workspace-dense .content-long-field > span {
  margin-bottom: 0;
  color: #273247;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.content-site-field small,
.content-long-field small {
  color: #718096;
  font-size: 11.5px;
  line-height: 1.45;
}

.content-long-text-stack {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.content-config-workspace-dense .content-long-text-stack .content-long-field {
  grid-column: 1 / -1;
}

.content-config-workspace-dense .content-long-textarea {
  min-height: 132px;
  overflow: hidden;
  line-height: 1.62;
  field-sizing: content;
}

.content-config-workspace-dense .content-row-list {
  display: grid;
  gap: 0;
}

.content-config-workspace-dense .content-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(140px, 1fr) minmax(100px, 0.7fr) minmax(120px, 0.8fr) minmax(180px, 1.4fr) auto;
  gap: 8px;
  align-items: end;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid rgba(43, 58, 84, 0.08);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.content-config-workspace-dense .content-row:last-child {
  border-bottom: 0;
}

.content-config-workspace-dense .content-row:hover {
  background: #fbfdff;
}

.content-config-workspace-dense label {
  min-width: 0;
}

.content-config-workspace-dense label > span {
  display: block;
  margin-bottom: 3px;
  color: #526176;
  font-size: 11px;
  font-weight: 800;
}

.content-config-workspace-dense input,
.content-config-workspace-dense select,
.content-config-workspace-dense textarea {
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.content-config-workspace-dense textarea {
  resize: vertical;
}

.content-config-workspace-dense .content-field-wide {
  grid-column: span 2;
}

.content-config-workspace-dense .content-toggle {
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
}

.content-config-workspace-dense .content-toggle span {
  font-size: 11px;
}

.content-config-workspace-dense .content-toggle input {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  inline-size: 34px;
  height: 20px;
  max-height: 20px;
  block-size: 20px;
}

.content-config-workspace-dense .content-toggle input::after {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
}

.content-config-workspace-dense .content-toggle input:checked::after {
  transform: translateX(14px);
}

.content-config-workspace-dense .danger-button.compact {
  align-self: end;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
}

.content-config-workspace-staging .content-section-switcher {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .content-section-switcher {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .content-status-grid {
    grid-template-columns: 1fr;
  }

  .content-config-workspace-dense .content-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-config-workspace-dense .content-form-grid-short {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-config-workspace-dense .content-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 720px) {
  .content-section-switcher,
  .content-config-workspace-staging .content-section-switcher,
  .content-config-workspace-dense .content-form-grid,
  .content-config-workspace-dense .content-form-grid-short,
  .content-config-workspace-dense .content-row {
    grid-template-columns: 1fr;
  }

  .content-basic-title-block h4 {
    font-size: 16px;
  }

  .content-site-field-wide {
    grid-column: auto;
  }

  .content-config-workspace .content-focus-card {
    display: grid;
  }

  .content-config-workspace .content-focus-card span {
    text-align: left;
  }

  .content-config-workspace-dense .content-field-wide {
    grid-column: auto;
  }
}
.content-version-history {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line-soft, #e7ebf0);
  border-radius: 12px;
  background: #fff;
}

.content-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft, #edf0f4);
}

.content-version-row:first-of-type {
  border-top: 0;
}

.content-version-row > div {
  display: grid;
  gap: 4px;
}

.content-version-row span {
  color: var(--text-muted, #667085);
  font-size: 12px;
}

/* content-config-studios.css */
/* Content configuration card grids */
.content-section-helper {
  margin: 0;
  padding: 8px 10px 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.5;
}

.content-config-workspace-dense .content-studio-section .content-row-list,
.content-config-workspace-dense .content-card-section .content-row-list {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  padding: 10px;
}

.content-config-workspace-dense .content-studio-card,
.content-config-workspace-dense .content-config-card {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 9px;
  min-height: 0;
  padding: 9px;
  border: 1px solid rgba(43, 58, 84, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.content-config-workspace-dense .content-studio-card:hover,
.content-config-workspace-dense .content-config-card:hover {
  border-color: rgba(111, 169, 216, 0.26);
  background: #fbfdff;
}

.content-config-workspace-dense .content-card-title-field {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(232, 135, 155, 0.22);
  border-radius: 8px;
  background: #fff7fa;
}

.content-config-workspace-dense .content-card-title-field > span {
  margin: 0;
  color: #9c4054;
  font-size: 11px;
  font-weight: 900;
}

.content-config-workspace-dense .content-card-title-field input {
  min-height: 34px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #273247;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
}

.content-config-workspace-dense .content-card-title-field input:focus {
  outline: 2px solid rgba(232, 135, 155, 0.26);
  outline-offset: 3px;
}

.content-studio-cover {
  position: relative; display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(43, 58, 84, 0.08);
  border-radius: 8px;
  background: #f4f7fb;
}

.content-studio-cover-upload { position: relative; }

.content-studio-cover-upload:focus-within .content-studio-cover { outline: 2px solid rgba(109, 168, 206, 0.45); outline-offset: 3px; }

.content-studio-cover-button { display: block; width: 100%; padding: 0; cursor: pointer; }

.content-studio-gallery-heading { display: grid; gap: 2px; color: #637083; font-size: 11px; line-height: 1.35; }
.content-studio-gallery-heading span { color: #2f3b52; font-size: 12px; font-weight: 900; }
.content-studio-image-warning { display: grid; gap: 5px; padding: 6px; border: 1px solid #f2c5cf; border-radius: 6px; background: #fff5f8; color: #9b4860; font-size: 10px; line-height: 1.4; }

.content-studio-cover-input {
  position: absolute; inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  cursor: pointer;
  opacity: 0;
}

.content-studio-cover img {
  position: absolute; inset: 0; display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-studio-cover-empty {
  display: grid; position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #9aa7b7;
}

.content-studio-cover-plus {
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
}

.content-studio-gallery-strip { display: grid; gap: 6px; min-height: 0; }
.content-studio-gallery-strip.is-collapsed { padding: 6px; border: 1px dashed rgba(111, 169, 216, 0.22); border-radius: 6px; background: #f8fbff; }
.content-studio-gallery-toggle { width: 100%; justify-content: center; }
.content-studio-gallery-actions { display: flex; justify-content: flex-end; }
.content-studio-gallery-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; min-height: 0; }
.content-studio-upload-progress { display: grid; gap: 5px; color: #637083; font-size: 11px; line-height: 1.35; }
.content-studio-upload-progress[hidden] { display: none; }
.content-studio-upload-progress span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-studio-upload-progress i { overflow: hidden; height: 5px; border-radius: 999px; background: #edf2f7; }
.content-studio-upload-progress b { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e7819b, #76a8d8); transition: width 0.2s ease; }
.content-studio-upload-progress[data-status="error"] b { background: #e57373; }

.content-studio-thumb { position: relative; display: grid; overflow: hidden; place-items: center; aspect-ratio: 1; padding: 0; border: 1px solid rgba(43, 58, 84, 0.1); border-radius: 6px; background: #f4f7fb; }

.content-studio-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.content-studio-thumb-drag { position: absolute; top: 2px; left: 2px; z-index: 2; width: 18px; height: 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.84); color: #637083; cursor: grab; font-size: 11px; }
.content-studio-thumb-order { position: absolute; bottom: 3px; left: 3px; padding: 1px 4px; border-radius: 999px; background: rgba(39, 50, 71, 0.72); color: #fff; font-size: 10px; }
.content-studio-thumb-remove { position: absolute; top: 2px; right: 2px; z-index: 2; display: grid; width: 16px; height: 16px; place-items: center; border: 0; border-radius: 999px; background: rgba(39, 50, 71, 0.76); color: #fff; font-size: 12px; }
.content-studio-thumb-chosen, .content-studio-thumb-ghost { border-color: rgba(232, 135, 155, 0.62); opacity: 0.76; }
.content-studio-add-thumb { color: #94a3b8; cursor: pointer; font-size: 20px; font-weight: 300; }
.content-studio-add-thumb small { color: #718096; font-size: 10px; font-weight: 700; }

.content-studio-card-fields,
.content-card-fields {
  display: grid;
  gap: 7px;
}

.content-config-workspace-dense .content-studio-card-fields .content-field-wide,
.content-config-workspace-dense .content-card-fields .content-field-wide {
  grid-column: auto;
}

.content-config-workspace-dense .content-studio-card-fields textarea,
.content-config-workspace-dense .content-card-fields textarea {
  min-height: 62px;
}

.content-config-workspace-dense .content-studio-card .danger-button.compact,
.content-config-workspace-dense .content-config-card .danger-button.compact {
  width: 100%;
}

@media (max-width: 1180px) {
  .content-config-workspace-dense .content-studio-section .content-row-list,
  .content-config-workspace-dense .content-card-section .content-row-list {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* content-config-sortable.css */
/* Content configuration card sorting */
.content-sort-status {
  margin: 8px 10px 0;
  padding: 7px 9px;
  border: 1px dashed rgba(111, 169, 216, 0.28);
  border-radius: 8px;
  background: #f8fbff;
  color: #637083;
  font-size: 11px;
  line-height: 1.45;
}

.content-sort-status.is-dirty {
  border-style: solid;
  border-color: rgba(232, 135, 155, 0.32);
  background: #fff7fa;
  color: #8f4055;
  font-weight: 800;
}

.content-sort-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.content-sort-handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid rgba(111, 169, 216, 0.24);
  border-radius: 8px;
  background: #f7fbff;
  color: #526176;
  cursor: grab;
  font-size: 11px;
  font-weight: 800;
}

.content-sort-handle:active {
  cursor: grabbing;
}

.content-sort-handle:focus-visible {
  outline: 2px solid rgba(109, 168, 206, 0.52);
  outline-offset: 2px;
}

.content-sort-position {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #eef4fa;
  color: #637083;
  font-size: 11px;
  font-weight: 900;
}

.content-sortable-list .content-row.is-sort-chosen {
  border-color: rgba(111, 169, 216, 0.42);
}

.content-sortable-list .content-row.is-sort-ghost {
  opacity: 0.42;
}

/* skin-manager.css */
.skin-manager { max-width: 1280px; margin: 0 auto; padding: 20px; background: #f7f9fc; border: 1px solid #e1e7ef; border-radius: 18px; }
.skin-header, .skin-preview header { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.skin-header h2 { margin: 0 0 4px; font-size: 18px; color: #263d4c; }
.skin-header p { margin: 0; }
.skin-header p, .skin-hint, .skin-custom p { color: #637489; line-height: 1.7; font-size: 13px; }
.skin-eyebrow { display: none; }
.skin-receipt { margin: 12px 0 18px; padding: 8px 12px; background: #eef3fa; border-radius: 8px; font-size: 12px; }
.skin-receipt[data-state="error"] { color: #9e3434; background: #fff0ef; }
.skin-receipt[data-state="success"] { color: #246e51; background: #ebf8f0; }
.skin-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.skin-settings { min-width: 0; padding: 4px 0; }
.skin-current { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #425d72; }
.skin-catalog { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.skin-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-content: center; min-height: 76px; padding: 12px; text-align: left; background: white; border: 2px solid #e2e7ef; border-radius: 12px; cursor: pointer; color: #263d4c; }
.skin-card.selected { border-color: #a267a1; box-shadow: 0 0 0 2px #eedfea; }
.skin-card strong { align-self: end; font-size: 14px; line-height: 1.4; }
.skin-card small { align-self: start; color: #69778a; font-size: 12px; line-height: 1.4; }
.skin-swatch { grid-row: 1 / 3; align-self: center; height: 44px; border-left: 8px solid; border-radius: 7px; }
.skin-manager button:focus-visible, .skin-manager input:focus-visible { outline: 3px solid #7a6db0; outline-offset: 3px; }
.skin-custom label, .skin-schedule [data-skin-dates] label { display: grid; gap: 7px; margin: 12px 0; font-size: 13px; }
.skin-custom input:not([type="color"]), .skin-schedule input[type="datetime-local"] { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: white; color: #263d4c; }
.skin-colors { display: flex; gap: 20px; }
.skin-colors input { width: 64px; height: 36px; }
.skin-custom details { margin: 14px 0; padding: 12px; background: white; border: 1px solid #e1e7ef; border-radius: 12px; }
.skin-custom summary { cursor: pointer; font-weight: 600; }
.skin-schedule { min-width: 0; margin: 18px 0; padding: 10px 0 0; border: 0; border-top: 1px solid #d6deea; border-radius: 0; }
.skin-schedule legend { padding: 0 8px 0 0; font-size: 13px; font-weight: 600; color: #425d72; }
.skin-schedule > label { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.skin-schedule input[type="radio"] { flex: 0 0 17px; width: 17px; height: 17px; min-height: 0; padding: 0; margin: 0; accent-color: #93658c; }
.skin-schedule small { display: block; line-height: 1.6; color: #617387; }
.skin-actions { display: flex; gap: 10px; }
.skin-preview { min-width: 0; padding: 20px; background: #fff; border: 1px solid #e1e7ef; border-radius: 14px; }
.skin-preview header { font-size: 16px; }
.skin-preview header span { font-size: 12px; color: #637489; }
.skin-preview nav { display: flex; justify-content: center; gap: 10px; margin: 16px 0 20px; }
.skin-preview nav button { background: white; border: 1px solid #ccd6e0; border-radius: 20px; padding: 7px 18px; cursor: pointer; }
.skin-preview nav button[aria-pressed="true"] { background: #f6e6f0; border-color: #b77fa1; }
.skin-phone-scroll { max-height: 780px; overflow: auto; width: 452px; margin: 0 auto; border: 1px solid #d5dce7; border-radius: 22px; box-shadow: 0 12px 36px #50608015; }
.skin-phone { width: 375px; zoom: 1.2; }
@media (max-width: 1050px) { .skin-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 18px; } .skin-header { align-items: flex-start; } .skin-phone { zoom: 1; } .skin-phone-scroll { width: 377px; } .skin-preview { padding: 14px; } }
@media (max-width: 800px) { .skin-layout { grid-template-columns: 1fr; } .skin-preview { grid-row: 1; } .skin-settings { max-width: 440px; width: 100%; margin: 0 auto; } }
@media (max-width: 480px) { .skin-manager { padding: 12px; } .skin-phone-scroll { max-width: 100%; } .skin-header, .skin-preview header { flex-direction: column; align-items: flex-start; gap: 8px; } .skin-preview { padding: 10px; } }

/* content-visual-editor.css */
.content-visual-dialog {
  --cv-ink: #263d4c;
  --cv-muted: #617787;
  --cv-line: #dfE8ee;
  --cv-accent: #984669;
  width: min(1480px, calc(100vw - 32px));
  max-width: none;
  height: calc(100dvh - 32px);
  max-height: none;
  padding: 0;
  border: 1px solid var(--cv-line);
  border-radius: 16px;
  color: var(--cv-ink);
  background: #fff;
  box-shadow: 0 24px 80px #1f39452b;
}
.content-visual-dialog::backdrop { background: #2337466b; backdrop-filter: blur(3px); }
.cv-workspace { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cv-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--cv-line); }
.cv-eyebrow { font-size: 11px; color: var(--cv-muted); letter-spacing: .1em; }
.cv-header h2 { margin: 4px 0 0; font-size: 21px; }
.cv-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cv-receipt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; font-size: 12px; color: #4e6574; background: #f7fafc; border-bottom: 1px solid var(--cv-line); }
.cv-receipt[data-state="pending"] { color: #875530; background: #fff9ef; }
.cv-receipt[data-state="error"] { color: #a23f37; background: #fff1ef; }
.cv-receipt[data-state="success"] { color: #28705b; background: #eefaf5; }
.cv-receipt button,.cv-footer button { flex-shrink: 0; border: 0; background: none; color: var(--cv-accent); padding: 4px 0; font-size: 12px; cursor: pointer; }
.cv-body { display: grid; grid-template-columns: 174px minmax(340px, 1fr) minmax(300px, 370px); min-height: 0; flex: 1; overflow: hidden; }
.cv-pages { padding: 20px 12px; border-right: 1px solid var(--cv-line); overflow: auto; }
.cv-pages button { display: grid; grid-template-columns: 24px 1fr; text-align: left; gap: 5px; width: 100%; border: 1px solid transparent; border-radius: 10px; background: none; padding: 13px 9px; margin-bottom: 8px; color: var(--cv-ink); cursor: pointer; }
.cv-pages button>span { font-size: 11px; grid-row: span 2; color: #8da0ac; padding-top: 2px; }
.cv-pages button>b { font-size: 13px; font-weight: 600; }
.cv-pages button>small { font-size: 10px; color: var(--cv-muted); }
.cv-pages button[aria-current="true"] { background: #fff3f8; border-color: #eccfdd; }
.cv-pages button[aria-current="true"] b { color: var(--cv-accent); }
.cv-pages p { margin: 24px 9px; font-size: 11px; color: var(--cv-muted); line-height: 1.8; }
.cv-canvas { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 18px 24px 10px; background: #f3f6f8; overflow: hidden; }
.cv-canvas-caption { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; margin-bottom: 14px; }
.cv-canvas-caption b { font-size: 13px; font-weight: 600; }
.cv-canvas-caption span { font-size: 11px; color: var(--cv-muted); }
.cv-phone-frame { width: 389px; max-width: 100%; min-height: 0; flex: 1; max-height: 850px; overflow: hidden; padding: 6px; background: white; border: 1px solid #dbe4ea; border-radius: 30px; box-shadow: 0 8px 28px #314b6110; }
.cv-phone-scroll { width: 100%; height: 100%; overflow: auto; border-radius: 24px; scrollbar-width: none; overscroll-behavior: contain; }
.cv-phone-scroll::-webkit-scrollbar { display: none; }
.cv-phone { width: 375px; transform-origin: top left; }
.cv-preview-note { max-width: 375px; flex-shrink: 0; margin: 10px 0 0; color: var(--cv-muted); font-size: 10px; line-height: 1.6; text-align: center; }
.cv-inspector { border-left: 1px solid var(--cv-line); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; }
.cv-inspector-heading { padding: 18px 20px; border-bottom: 1px solid var(--cv-line); display: grid; gap: 8px; flex-shrink: 0; }
.cv-inspector-heading>span { font-size: 11px; color: var(--cv-muted); }
.cv-record-picker { display: grid; gap: 7px; padding-top: 6px; font-size: 11px; color: var(--cv-muted); }
.cv-fields { flex: 1; min-height: 0; overflow: auto; padding: 0 20px 24px; overscroll-behavior: contain; }
.cv-system-id { color: #80909c; font-size: 10px; margin: 14px 0; overflow-wrap: anywhere; }
.cv-field { padding: 15px 0; border-bottom: 1px solid #edf1f4; display: grid; gap: 8px; }
.cv-field-label { display: flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 600; color: var(--cv-ink); }
.cv-field-label>span { color: #9b7587; font-size: 9px; font-weight: 400; }
.cv-field small { color: var(--cv-muted); font-size: 10px; line-height: 1.7; }
.cv-field input:not([type="checkbox"]):not([type="file"]),.cv-field textarea,.cv-field select,.cv-inspector-heading select { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #dce6ed; border-radius: 7px; color: var(--cv-ink); background: #fff; font: inherit; font-size: 12px; outline-offset: 2px; }
.cv-field textarea { resize: vertical; line-height: 1.7; min-height: 78px; }
.cv-field :focus-visible,.cv-inspector-heading select:focus-visible { outline: 2px solid #b55c86; border-color: #ba7899; }
.cv-check { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.6; }
.cv-check input { width: 15px; height: 15px; margin: 0; accent-color: #a44d75; }
.cv-studio-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cv-upload { display: flex; flex-direction: column; gap: 8px; border: 1px dashed #cbd9e3; border-radius: 8px; padding: 12px; color: var(--cv-accent); font-size: 12px; background: #fcfafd; }
.cv-upload input { width: 100%; font-size: 11px; color: var(--cv-muted); }
.cv-image-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.cv-image-item { overflow: hidden; border: 1px solid var(--cv-line); border-radius: 7px; }
.cv-image-item .admin-image-loading-frame { display: block; width: 100%; height: 105px; }
.cv-image-item .admin-image-loading-image { width: 100%; height: 100%; object-fit: contain; }
.cv-image-item>div { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px; align-items: center; font-size: 10px; }
.cv-image-item>div>span { flex: 1; }
.cv-image-item button { padding: 2px; font-size: 10px; background: none; border: 0; color: var(--cv-accent); cursor: pointer; }
.cv-legacy { margin-top: 20px; color: #778794; font-size: 11px; }
.cv-field-group > h3 { margin: 20px 0 0; font-size: 13px; color: var(--cv-ink); }
.cv-legacy summary { cursor: pointer; line-height: 1.6; }
.cv-footer { display: flex; justify-content: space-between; gap: 12px; padding: 10px 24px; border-top: 1px solid var(--cv-line); font-size: 11px; color: var(--cv-muted); }
.cv-footer>span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-empty { color: var(--cv-muted); font-size: 12px; line-height: 1.8; padding: 20px 0; }
.content-visual-dialog button:disabled { cursor: default; opacity: .5; }
.content-visual-dialog button:focus-visible { outline: 2px solid #a94974; outline-offset: 3px; }
@media(max-width:1100px) {
  .cv-body { grid-template-columns: 132px minmax(320px,1fr) minmax(280px,320px); }
  .cv-pages { padding: 14px 6px; }
  .cv-pages button { grid-template-columns: 1fr; }
  .cv-pages button>span { display: none; }
  .cv-canvas { padding-inline: 12px; }
}
@media(max-width:850px) {
  .content-visual-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 12px; }
  .cv-body { grid-template-columns: minmax(290px,1fr) minmax(260px,1fr); grid-template-rows: auto minmax(0,1fr); }
  .cv-pages { grid-column: 1/-1; display: flex; padding: 8px 12px; gap: 6px; border: 0; border-bottom: 1px solid var(--cv-line); }
  .cv-pages button { margin: 0; padding: 8px; }
  .cv-pages p,.cv-pages button small { display: none; }
  .cv-header { padding: 12px 16px; }
  .cv-header h2 { font-size: 17px; }
  .cv-receipt { padding: 9px 16px; }
}
@media(max-width:600px) {
  .cv-header { align-items: flex-start; gap: 8px; }
  .cv-header-actions { justify-content: flex-end; gap: 4px; }
  .cv-header-actions button { font-size: 10px; padding: 7px; min-height: 32px; }
  .cv-header-actions [data-cv-action="history"] { display: none; }
  .cv-header h2 { font-size: 15px; white-space: nowrap; }
  .cv-body { display: flex; flex-direction: column; overflow: auto; }
  .cv-pages { flex-shrink: 0; overflow: visible; }
  .cv-pages button b { font-size: 11px; }
  .cv-canvas { min-height: 480px; flex-shrink: 0; padding: 14px 10px; }
  .cv-phone-frame { flex: none; height: 430px; }
  .cv-canvas-caption span { font-size: 10px; }
  .cv-inspector { flex-shrink: 0; overflow: visible; border-left: 0; }
  .cv-fields { overflow: visible; flex: none; }
  .cv-receipt { font-size: 10px; gap: 8px; }
  .cv-footer { padding-inline: 12px; }
}

.cv-record-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.cv-record-actions button,.cv-record-manager button{border:1px solid #d8e7ee;border-radius:8px;padding:8px 12px;background:#f4faff;color:#36586e;cursor:pointer}.cv-record-manager{width:min(800px,94vw);max-height:85vh;border:1px solid #d8e7ee;border-radius:20px;padding:24px;color:#304d60;background:#fff}.cv-record-manager::backdrop{background:#1b34464d}.cv-record-manager header{display:flex;justify-content:space-between;align-items:center}.cv-record-manager h2{font-size:20px;margin:0}.cv-record-manager p{font-size:13px;color:#637f91}.cv-managed-list{max-height:55vh;overflow:auto}.cv-managed-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #e7f0f5}.cv-managed-row [data-action="edit"]{flex:1;text-align:left;background:white}.cv-managed-row span{font-size:12px;color:#6f8694}.cv-managed-handle{cursor:grab!important}.cv-manager-status{color:#b34062!important}
.cv-filter-management h3{font-size:16px;margin:24px 0 12px}.cv-filter-management h4{font-size:13px}.cv-filter-management p{font-size:12px;color:#718899;line-height:1.7}.cv-option-tags{display:flex;flex-wrap:wrap;gap:6px}.cv-option-tags>span{background:#eff7fb;padding:5px 8px;border-radius:8px;font-size:12px}.cv-option-tags button{border:0;background:none;color:#aa4d71;cursor:pointer}.cv-record-actions input{min-width:80px;width:140px;border:1px solid #d6e6ef;border-radius:8px;padding:8px}
.cv-pages{overflow-y:auto}
.cv-copy-search{position:sticky;top:0;padding:12px;background:#f0f8fc;border:1px solid #d6e6ef;border-radius:10px;margin-bottom:14px;z-index:2}.cv-copy-search label{display:grid;gap:8px;font-size:12px}.cv-copy-search input{width:100%;padding:9px;border:1px solid #cbdfe9;border-radius:8px}.cv-copy-search small{display:block;margin-top:8px;color:#6b8091;line-height:1.6}.cv-field[hidden]{display:none}.cv-manager-columns{display:flex;flex-wrap:wrap;gap:8px}.cv-manager-columns label{border:1px solid #ddeaf1;border-radius:8px;padding:6px;font-size:12px}.cv-manager-columns button{padding:2px 6px}.cv-business-toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 12px}.cv-business-toolbar button,.cv-business-toolbar select{border:1px solid #d4e5ee;border-radius:8px;background:white;color:#3e6177;padding:7px;font-size:11px}.cv-business-toolbar small{flex-basis:100%;text-align:center;color:#75899a;font-size:10px}.cv-photographer-editor{width:min(1040px,94vw);max-height:90vh;border:1px solid #d4e5ee;border-radius:22px;padding:24px;color:#35566c;background:#f8fcff}.cv-photographer-editor::backdrop{background:#18374755}.cv-photographer-editor header{display:flex;justify-content:space-between;gap:20px}.cv-photographer-editor h2{margin:0;font-size:22px}.cv-photographer-editor h3{margin-top:30px;padding-top:20px;border-top:1px solid #d9e7ef}.cv-photographer-editor p{color:#6d8595;font-size:13px;line-height:1.7}.cv-photographer-editor button{border:1px solid #cbdfeb;border-radius:9px;background:white;color:#385e76;padding:8px 12px;cursor:pointer}.cv-photographer-editor button:disabled{opacity:.45;cursor:default}.cv-photographer-editor input,.cv-photographer-editor select,.cv-photographer-editor textarea{padding:8px;border:1px solid #cbdfe9;border-radius:8px;background:white;font:inherit;max-width:100%}.cv-photo-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cv-photo-fields label{display:grid;gap:8px;font-size:13px}.cv-photo-fields textarea{min-height:64px;resize:vertical}.cv-photo-fields input[type=checkbox]{justify-self:start}.cv-photo-images{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.cv-photo-images>div{width:160px;padding:8px;border:1px solid #dce9f0;border-radius:12px;background:white}.cv-photo-images img,.cv-photographer-editor>img{width:140px;height:160px;object-fit:contain}.cv-photo-images button{padding:5px;font-size:11px;margin:4px}.cv-photo-album{background:#fff;padding:16px;margin:12px 0;border-radius:14px;border:1px solid #dce9f0}.cv-photo-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cv-photo-calendar button{display:grid;gap:6px}.cv-photo-calendar .active{background:#fde7f0;border-color:#d999b4}.cv-photo-calendar small{font-size:10px;color:#7890a0}.cv-photographer-editor [role=status]{padding:12px;background:#eaf6fe;border-radius:10px;position:sticky;top:0;z-index:3}.cv-photographer-editor [data-error=true]{color:#a83960;background:#fff0f5}

.cv-manager-table-scroll{overflow:auto;margin:16px 0;max-height:55vh}.cv-manager-table{border-collapse:collapse;min-width:100%;font-size:13px}.cv-manager-table th,.cv-manager-table td{border-bottom:1px solid #dce8f0;padding:10px;text-align:left;vertical-align:top;min-width:110px}.cv-manager-table th{background:#eff7fc;position:sticky;top:0}.cv-manager-table th div{resize:horizontal;overflow:auto;min-width:90px}.cv-manager-table td img{width:80px;height:95px;object-fit:cover}.cv-manager-table td small{display:block;color:#8298a7}.cv-manager-table td button{white-space:normal;line-height:1.5}.cv-service-tier{padding:14px 0;border-bottom:1px solid #dce8f0}

.cv-photographer-editor>.admin-image-loading-frame{width:160px;height:160px;display:block;margin:12px 0}.cv-photographer-editor>.admin-image-loading-frame img{width:100%;height:100%;object-fit:contain}.cv-photo-fields label:has(input[type=checkbox]){display:flex;align-items:center;align-self:center;gap:10px}.cv-photo-fields input[type=checkbox]{width:18px;height:18px}.cv-photo-fields textarea[data-photo-field]:not([data-photo-field=intro]){min-height:38px;height:40px}.cv-photo-fields textarea[data-photo-field=intro]{min-height:88px}.cv-photo-images .admin-image-loading-frame{height:160px;width:140px;display:block}@media(max-width:640px){.cv-photo-fields{grid-template-columns:1fr}}

.cv-history-dialog { width:min(760px,calc(100vw - 32px)); max-height:80vh; padding:24px; border:1px solid #dce6f0; border-radius:14px; color:#2d455d; background:#fff; }
.cv-history-dialog::backdrop { background:#20384b55; }
.cv-history-dialog header { display:flex; justify-content:space-between; gap:20px; align-items:start; padding-bottom:16px; border-bottom:1px solid #e4ecf4; }
.cv-history-dialog h2 { margin:0 0 8px; font-size:20px; }
.cv-history-dialog p { font-size:13px; color:#5b7186; }
.cv-history-dialog article { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid #e4ecf4; }
.cv-history-dialog article div { display:grid; gap:5px; }
.cv-history-dialog article span,.cv-history-dialog small { font-size:12px; color:#5b7186; }
.cv-history-dialog button { padding:8px 14px; border:1px solid #d7e4ef; border-radius:8px; background:#f2f8fd; color:#365f7e; cursor:pointer; }
.cv-history-dialog button:disabled { opacity:.5; cursor:default; }

/* Image order uses the existing draft/save flow and Sortable auto-scroll. */
.cv-image-item > .cv-image-drag { display: block; padding: 0; }
.cv-image-sort-note { margin-bottom: 8px; }
[data-cv-image-sort] .cv-image-drag,
.cv-image-item button[data-cv-image-handle] { cursor: grab; touch-action: none; user-select: none; }
.cv-image-item button[data-cv-image-handle] { font-size: 18px; line-height: 1; padding: 2px 5px; }
[data-cv-image-sort] .cv-image-drag img { -webkit-user-drag: none; }
.cv-image-chosen { outline: 2px solid var(--cv-accent); }
.cv-image-ghost { opacity: .35; outline: 2px dashed var(--cv-accent); background: #e8f4fc; }
.cv-image-fallback { opacity: .92; background: white; box-shadow: 0 8px 24px #36576a40; pointer-events: none; }

/* staging-gallery.css */
.staging-gallery-panel { container-type: inline-size; --staging-cell-x: 5px; --staging-cell-y: 6px; --staging-control-h: 28px; --staging-table-font: 11px; --staging-header-font: 10px; --staging-thumb-w: 52px; --staging-thumb-h: 42px; }

.staging-gallery-table-wrap { overflow-x: auto; overflow-y: visible; width: 100%; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; overscroll-behavior-inline: contain; scrollbar-color: #829bb1 #edf3f7; scrollbar-width: auto; }

.staging-gallery-table-wrap::-webkit-scrollbar { height: 14px; }
.staging-gallery-table-wrap::-webkit-scrollbar-track { border-radius: 999px; background: #edf3f7; }
.staging-gallery-table-wrap::-webkit-scrollbar-thumb { min-width: 48px; border: 2px solid #edf3f7; border-radius: 999px; background: #829bb1; }
.staging-gallery-table-wrap::-webkit-scrollbar-thumb:hover { background: #637f98; }
.staging-gallery-table-wrap::-webkit-scrollbar-thumb:active { background: #4f6d87; }
.staging-gallery-table-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.staging-gallery-edit-table { width: max-content; min-width: 1900px; border-collapse: collapse; table-layout: auto; }

.staging-gallery-edit-table th,
.staging-gallery-edit-table td { min-width: 0; padding: var(--staging-cell-y) var(--staging-cell-x); border-bottom: 1px solid var(--line); border-right: 1px solid rgba(111, 169, 216, .12); vertical-align: top; background: #fff; font-size: var(--staging-table-font); overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }

.staging-gallery-edit-table th { position: sticky; top: 0; z-index: 1; background: #f7fbff; color: var(--muted); font-size: var(--staging-header-font); font-weight: 850; text-align: left; }

.staging-gallery-edit-table th span { display: block; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.staging-gallery-edit-table tr.needs-gallery-update td { background: rgba(255, 244, 248, .72); }

.staging-gallery-edit-table tr.is-filtered-hidden { display: none; }

.staging-gallery-edit-table .is-column-hidden { display: none; }

.staging-header-filter,
.staging-edit-input,
.staging-edit-textarea,
.staging-edit-select { width: 100%; min-width: 0; max-width: 100%; height: var(--staging-control-h); border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font-size: var(--staging-table-font); font-weight: 650; }

.staging-header-filter { height: 26px; color: var(--muted); font-size: 10px; }

.staging-edit-input { padding: 0 6px; }
.staging-edit-textarea { min-height: 58px; max-height: 76px; padding: 6px; overflow-y: auto; line-height: 1.45; resize: none; }
.staging-edit-select,
.staging-header-filter { padding: 0 5px; }
.staging-edit-input + .staging-edit-input,
.staging-edit-input + .status-chip { margin-top: 5px; }
.staging-edit-input.is-id { color: var(--muted); font-size: 10px; font-weight: 700; }

.staging-gallery-edit-table :is(col, th, td)[data-staging-column="select"] { width: 42px; min-width: 42px; padding-left: 3px; padding-right: 3px; text-align: center; white-space: nowrap; }
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="image"],
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="actions"] { width: 72px; min-width: 72px; text-align: center; white-space: nowrap; }
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="image"] { width: 78px; min-width: 78px; }
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="identity"] { width: 180px; min-width: 180px; }
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="themeTags"],
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="style"],
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="colorTags"],
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="availableStudios"] { width: 132px; min-width: 132px; }
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="coreElements"] { width: 320px; min-width: 260px; max-width: 420px; }
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="maintenanceNote"] { width: 280px; min-width: 220px; max-width: 360px; }
.staging-gallery-edit-table [data-staging-column="coreElements"] [data-field="coreElements"] { width: clamp(260px, 24vw, 420px); min-width: 260px; max-width: 420px; }
.staging-gallery-edit-table [data-staging-column="maintenanceNote"] [data-field="maintenanceNote"] { width: clamp(220px, 20vw, 360px); min-width: 220px; max-width: 360px; }
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="sceneType"],
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="modifiableType"],
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="status"] { width: 104px; min-width: 104px; }
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="price"] { width: 112px; min-width: 112px; }
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="usageCount"] { width: 110px; min-width: 110px; }
.staging-gallery-edit-table :is(col, th, td)[data-staging-column="propRequirements"] { width: 240px; min-width: 240px; }
.staging-gallery-edit-table [data-staging-column="propRequirements"] .prop-scene-button { display: block; width: 100%; max-width: 100%; height: auto; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.5; }
.staging-gallery-edit-table [data-staging-column="select"] input { width: 14px; height: 14px; margin: 0; }
.staging-multi-field { min-width: 0; }
.staging-multi-display { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; width: 100%; min-height: var(--staging-control-h); min-width: 0; padding: 3px 5px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); text-align: left; }
.staging-multi-display:focus-visible { outline: 2px solid rgba(111, 169, 216, .38); outline-offset: 1px; }
.staging-multi-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 1px 5px; border: 1px solid rgba(111, 169, 216, .28); border-radius: 999px; background: rgba(240, 249, 255, .86); color: var(--text); font-size: 10px; font-weight: 760; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staging-multi-empty { color: var(--muted); font-size: 10px; font-weight: 700; }

.staging-multi-dialog { width: min(520px, calc(100vw - 32px)); max-height: min(680px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 24px 72px rgba(15, 23, 42, .22); color: var(--text); }
.staging-multi-dialog::backdrop { background: rgba(15, 23, 42, .28); backdrop-filter: blur(3px); }
.staging-multi-dialog form { display: grid; gap: 12px; padding: 16px; }
.staging-multi-dialog-head h3 { margin: 0; font-size: 16px; line-height: 1.35; }
.staging-multi-dialog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; max-height: min(46vh, 360px); overflow: auto; padding: 2px; }
.staging-multi-dialog-option { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(248, 251, 255, .76); color: var(--text); font-size: 12px; font-weight: 760; }
.staging-multi-dialog-option input { width: 14px; height: 14px; flex: 0 0 auto; }
.staging-multi-dialog-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.staging-edit-thumb-cell,
.staging-table-actions,
.staging-action-group,
.staging-row-actions,
.staging-option-group,
.staging-option-group div {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

.staging-edit-thumb-cell { justify-content: center; }
.staging-edit-thumb-cell .compact { min-width: 48px; min-height: 24px; padding: 0 6px; }
.staging-table-thumb { width: var(--staging-thumb-w); height: var(--staging-thumb-h); object-fit: cover; }
.staging-table-thumb-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }

.staging-edit-hidden { display: none; }
.staging-gallery-edit-table .status-chip { display: inline-flex; max-width: 100%; }
.staging-maintenance-reasons { display: block; margin: 4px 0; color: var(--red); font-size: 10px; font-weight: 760; line-height: 1.35; overflow-wrap: anywhere; }

.staging-usage-total { display: inline-flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.staging-usage-total > span { color: var(--muted); font-size: 11px; }
.staging-usage-total > strong { color: var(--text); font-size: 13px; font-weight: 800; }

.staging-bonus-summary { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid rgba(111, 169, 216, .28); border-radius: 10px; background: linear-gradient(135deg, rgba(248, 251, 255, .98), rgba(255, 255, 255, .98)); }
.staging-bonus-summary.has-milestone { border-color: rgba(220, 38, 38, .42); background: linear-gradient(135deg, rgba(254, 242, 242, .94), rgba(255, 255, 255, .98)); }
.staging-bonus-summary-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.staging-bonus-summary-head > div { display: grid; gap: 2px; }
.staging-bonus-summary-head span { color: var(--muted); font-size: 11px; font-weight: 800; }
.staging-bonus-summary-head strong { color: var(--text); font-size: 15px; font-weight: 900; }
.staging-bonus-count { padding: 5px 9px; border-radius: 999px; background: #b91c1c; color: #fff !important; font-size: 12px !important; font-weight: 900 !important; }
.staging-bonus-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.staging-bonus-cards article { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid rgba(111, 169, 216, .2); border-radius: 8px; background: #fff; }
.staging-bonus-cards article.is-milestone { border-color: rgba(220, 38, 38, .5); background: rgba(254, 242, 242, .8); }
.staging-bonus-cards span,
.staging-bonus-cards small { color: var(--muted); font-size: 10px; font-weight: 760; line-height: 1.45; }
.staging-bonus-cards strong { color: var(--text); font-size: 14px; font-weight: 900; }
.staging-bonus-cards article.is-milestone strong { color: #b91c1c; }
.staging-bonus-months { display: flex; flex-wrap: wrap; gap: 6px; }
.staging-bonus-months span { padding: 3px 7px; border: 1px solid rgba(111, 169, 216, .2); border-radius: 999px; background: #fff; color: #475569; font-size: 10px; font-weight: 800; }
.staging-bonus-unavailable { margin: 0; color: #b45309; font-size: 11px; font-weight: 800; }

.staging-table-toolbar { display: grid; gap: 10px; margin: 10px 0; }

.staging-table-actions { justify-content: flex-start; }
.staging-action-group { padding-right: 14px; border-right: 1px solid var(--line); }
.staging-action-save { margin-left: auto; }

.staging-gallery-pager {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0;
  min-height: 36px;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid rgba(111, 169, 216, .18);
  border-radius: 6px;
  background: rgba(248, 251, 255, .82);
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.staging-gallery-page-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staging-gallery-page-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  white-space: nowrap;
}

.admin-theme .staging-gallery-page-actions .compact {
  flex: 0 1 auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 0 7px;
  font-size: 12px;
}

.staging-gallery-page-size {
  flex: 0 0 auto;
  max-width: 92px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

.staging-column-panel,
.staging-option-manager { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(248, 251, 255, .78); }

.staging-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 850; }

.staging-column-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

.staging-column-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) 32px 18px 24px; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12px; font-weight: 750; }

.staging-column-item > button:not(.column-drag-handle) { height: 24px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--muted); cursor: pointer; }

.staging-option-manager { display: grid; gap: 8px; }
.staging-option-group { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px; border: 1px solid rgba(111, 169, 216, .18); border-radius: 6px; background: #fff; }
.staging-option-group-head { display: grid; gap: 6px; align-content: start; }
.staging-option-chip-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-height: 96px; overflow: auto; }

.staging-option-group strong,
.staging-option-group em { color: var(--muted); font-size: 12px; font-style: normal; }

.staging-option-chip { display: inline-flex; gap: 4px; align-items: center; max-width: 100%; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 12px; font-weight: 750; }

.staging-option-chip button { border: 0; background: transparent; color: var(--red); cursor: pointer; font: inherit; }

@media (max-width: 760px) {
  .staging-table-actions { justify-content: flex-start; }
  .staging-action-save { margin-left: 0; }
  .staging-gallery-pager { gap: 4px; padding-left: 4px; padding-right: 4px; font-size: 11px; }
  .staging-gallery-page-actions { gap: 3px; }
  .admin-theme .staging-gallery-page-actions .compact { padding: 0 5px; font-size: 11px; }
  .staging-gallery-page-size { max-width: 86px; padding: 0 4px; font-size: 11px; }
  .staging-bonus-cards { grid-template-columns: 1fr; }
}

@container (max-width: 980px) {
  .staging-gallery-panel {
    --staging-cell-x: 3px;
    --staging-cell-y: 5px;
    --staging-control-h: 24px;
    --staging-table-font: 10px;
    --staging-thumb-w: 40px;
    --staging-thumb-h: 32px;
  }

  .staging-edit-thumb-cell { gap: 4px; }
  .staging-edit-thumb-cell .compact { min-width: 40px; padding: 0 4px; font-size: 10px; }
}

/* staging-studio-picker.css */
.staging-studio-picker { overflow-y: auto; }
.staging-studio-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.staging-studio-selection { padding-top: 4px; border-top: 1px solid var(--line); }
.staging-studio-selection h4 { margin: 8px 0 10px; font-size: 13px; }
.staging-studio-selected { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.staging-studio-selected-row { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 5px 10px 5px 5px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.staging-studio-selected-row.is-default-studio { border-color: #aacbe3; background: #f3f9fd; }
.staging-studio-drag-handle { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #69798d; cursor: grab; touch-action: none; font-size: 24px; }
.staging-studio-drag-handle:hover { background: #e8f1f8; }
.staging-studio-drag-handle:focus-visible { outline: 2px solid #6fa9d8; outline-offset: 1px; }
.staging-studio-drag-handle:active { cursor: grabbing; }
.staging-studio-position { color: #65788d; font-size: 12px; font-variant-numeric: tabular-nums; }
.staging-studio-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.staging-studio-name small { display: block; margin-top: 3px; color: #b54154; font-size: 11px; font-weight: 400; }
.staging-studio-default { flex-shrink: 0; padding: 3px 6px; border-radius: 4px; background: #dfedf8; color: #355e80; font-size: 11px; }
.staging-studio-default[hidden], .staging-studio-empty[hidden] { display: none; }
.staging-studio-empty, .staging-studio-status { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.staging-studio-selected-row.is-studio-ghost { opacity: .35; background: #d6e9f7; }
.staging-studio-selected-row.is-studio-chosen { box-shadow: 0 3px 12px rgba(53, 94, 128, .14); }
@media (prefers-reduced-motion: reduce) {
  .staging-studio-selected-row { transition: none !important; }
}

/* staging-gallery-images.css */
.staging-gallery-panel { --staging-thumb-w: 54px; --staging-thumb-h: 72px; }

.staging-edit-thumb-cell { justify-content: center; }

.staging-image-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--staging-thumb-w);
  height: var(--staging-thumb-h);
  min-width: var(--staging-thumb-w);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #f7fbff;
  color: var(--muted);
  cursor: pointer;
}

.staging-image-frame:focus-visible { outline: 2px solid rgba(111, 169, 216, .45); outline-offset: 2px; }

.staging-image-frame .staging-table-thumb {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

.staging-image-frame.is-empty { border-style: dashed; background: rgba(248, 251, 255, .92); }

.staging-image-plus { font-size: 24px; line-height: 1; font-weight: 600; color: rgba(57, 125, 170, .72); }

.staging-image-edit-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.staging-image-upload-status {
  position: absolute;
  inset: auto 4px 4px;
  display: grid;
  gap: 3px;
  padding: 4px;
  border-radius: 5px;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  font-size: 9px;
  font-weight: 780;
  line-height: 1.2;
}

.staging-image-upload-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.staging-image-upload-status i {
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
}

.staging-image-upload-status i::before {
  content: "";
  display: block;
  width: var(--staging-upload-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transition: width .18s ease;
}

.staging-image-upload-status[data-status="error"] { background: rgba(190, 18, 60, .86); }

.staging-image-upload-status[data-status="error"] i { display: none; }

.staging-image-upload-status[data-status="done"] { background: rgba(22, 101, 52, .84); }

@container (max-width: 980px) {
  .staging-gallery-panel { --staging-thumb-w: 44px; --staging-thumb-h: 60px; }
  .staging-image-edit-badge { top: 3px; right: 3px; min-width: 16px; height: 16px; font-size: 9px; }
}

/* staging-gallery-image-detail.css */
.staging-detail-images { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; }
.staging-image-manager { display: grid; gap: 10px; min-width: 0; }
.staging-image-manager-item > span:not(.admin-image-loading-frame) { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 104px); padding: 2px 7px; border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff; font-size: 10px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staging-image-manager-hint { color: var(--muted); font-size: 11px; font-weight: 800; }
.staging-image-manager-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-items: start; gap: 10px; width: 100%; }
.staging-image-manager-item { position: relative; display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; background: #f4f7fa; cursor: grab; overflow: hidden; }
.staging-image-manager-item.is-dragging { opacity: .48; }
.staging-image-manager-item.is-main { outline: 0; }
.staging-image-manager-item .admin-image-loading-frame { display: grid; width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 4; place-items: center; border-radius: 0; background: #f4f7fa; object-fit: contain; }
.staging-image-manager-item .admin-image-loading-image { display: block; width: 100%; height: 100%; max-height: 420px; border-radius: 0; object-fit: contain; }
.staging-image-preview-trigger { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: zoom-in; }
.staging-image-preview-label { position: absolute; top: 7px; right: 7px; padding: 4px 9px; border-radius: 999px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 11px; font-weight: 850; pointer-events: none; box-shadow: 0 2px 8px rgba(15, 23, 42, .22); }
.staging-image-manager-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 6px; min-width: 0; padding: 8px; border-top: 1px solid rgba(148, 163, 184, .24); background: #fff; }
.staging-image-manager-actions button { width: 100%; min-width: 0; min-height: 28px; padding: 0 5px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.staging-image-manager-actions button:hover,
.staging-image-manager-actions button:focus-visible { border-color: var(--blue); color: var(--blue); }
.staging-image-manager-actions button[data-staging-image-action="replace"] { grid-column: 1; }
.staging-image-manager-actions button[data-staging-image-action="setMain"] { grid-column: 2; }
.staging-image-manager-actions button[data-staging-image-action="remove"] { grid-column: 3; margin-left: 0; border-color: rgba(239, 68, 68, .3); color: var(--red); }
.staging-image-manager-actions button[aria-busy="true"] { cursor: wait; opacity: .62; }
.staging-image-manager-empty { display: grid; place-items: center; min-height: 220px; width: 100%; border: 1px dashed var(--line-strong); border-radius: 8px; background: rgba(248, 251, 255, .86); color: var(--muted); font-size: 12px; font-weight: 760; text-align: center; }
.staging-large-preview-dialog { width: min(96vw, 1440px); max-width: none; height: min(94vh, 1080px); max-height: none; padding: 0; border: 0; border-radius: 14px; background: #080c14; color: #fff; overflow: hidden; }
.staging-large-preview-dialog::backdrop { background: rgba(4, 8, 16, .88); backdrop-filter: blur(5px); }
.staging-large-preview-frame { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; }
.staging-large-preview-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; min-height: 52px; padding: 8px 12px 8px 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); background: rgba(8, 12, 20, .96); }
.staging-large-preview-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staging-large-preview-head span { color: rgba(255, 255, 255, .72); font-weight: 800; }
.staging-large-preview-head button { min-height: 34px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 800; cursor: pointer; }
.staging-large-preview-stage { display: grid; min-width: 0; min-height: 0; place-items: center; padding: 18px 72px 24px; overflow: hidden; }
.staging-large-preview-stage .admin-image-loading-frame { display: grid; width: fit-content; height: fit-content; min-width: 180px; min-height: 120px; max-width: 100%; max-height: 100%; place-items: center; background: transparent; object-fit: contain; }
.staging-large-preview-stage .admin-image-loading-image,
.staging-large-preview-image { display: block; width: auto !important; height: auto !important; max-width: 100% !important; max-height: calc(94vh - 112px) !important; border-radius: 0; background: transparent; object-fit: contain !important; }
.staging-large-preview-nav { position: absolute; top: 50%; z-index: 2; display: grid; width: 46px; height: 64px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; place-items: center; background: rgba(0, 0, 0, .42); color: #fff; font-size: 42px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.staging-large-preview-nav.is-prev { left: 14px; }
.staging-large-preview-nav.is-next { right: 14px; }
.staging-large-preview-nav:disabled { display: none; }
@media (max-width: 760px) {
  .staging-image-manager-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staging-large-preview-dialog { width: 100vw; height: 100vh; border-radius: 0; }
  .staging-large-preview-stage { padding: 12px 48px 20px; }
  .staging-large-preview-nav { width: 38px; height: 54px; }
  .staging-large-preview-nav.is-prev { left: 5px; }
  .staging-large-preview-nav.is-next { right: 5px; }
}

/* staging-action-record.css */
.staging-action-record-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.staging-action-record-page { align-content: start; }

.staging-action-record-head,
.staging-action-record-toolbar,
.staging-action-record-list,
.staging-action-record-form-grid {
  display: grid;
  gap: 12px;
}

.staging-action-record-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.staging-action-record-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.staging-action-record-toolbar h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: #29445e;
}

.staging-action-month-filter { display:flex; align-items:center; gap:8px; }
.staging-action-month-filter > span { font-size:12px; color:#60758a; }
.staging-action-month-filter input { width:156px; min-height:36px; }
.staging-action-record-summary { display:flex; flex-wrap:wrap; gap:8px; }
.staging-action-summary-filter {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; min-height:36px;
  border:1px solid #e3ebf3; border-radius:8px;
  color:#526c83; background:#fff; cursor:pointer;
}
.staging-action-summary-filter span { font-size:12px; }
.staging-action-summary-filter strong { font-size:16px; line-height:1; font-weight:650; font-variant-numeric:tabular-nums; }
.staging-action-summary-filter:hover { border-color:#a8c2d7; background:#f7faff; }
.staging-action-summary-filter[aria-pressed="true"] { border-color:#aacde6; background:#eaf5fd; color:#2e648a; }
.staging-action-summary-filter:focus-visible { outline:2px solid #4d8bb5; outline-offset:2px; }
.staging-action-summary-filter:disabled { cursor:wait; opacity:.6; }
.staging-action-filter-status { font-size:12px; color:#a23d61; }
.staging-action-filter-status[hidden] { display:none; }

.staging-action-record-form {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.staging-action-record-form.is-editing {
  border-color: rgba(111, 169, 216, .68);
  box-shadow: inset 4px 0 0 rgba(111, 169, 216, .72);
  background: #f8fcff;
}

.staging-action-record-form-grid {
  grid-template-columns:
    minmax(116px, .65fr)
    minmax(168px, 1fr)
    minmax(104px, .65fr)
    minmax(176px, 1.15fr)
    minmax(190px, 1.25fr)
    minmax(104px, .65fr)
    minmax(150px, 1fr)
    auto;
  gap: 8px;
  align-items: end;
}

.staging-action-record-form-grid > label { min-width: 0; }

.staging-action-field-error {
  display: block;
  color: var(--red);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.35;
}

.staging-action-field-error[hidden] { display: none; }

[data-staging-action-field-shell].is-invalid {
  border-color: rgba(197, 70, 91, .7);
  box-shadow: 0 0 0 2px rgba(197, 70, 91, .1);
}

.staging-action-order-field { min-width: 0; }

.staging-action-scene-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.staging-action-scene-field > span,
.staging-action-upload-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.staging-action-order-field > small {
  min-height: 16px;
  color: var(--muted);
  font-size: 10px;
}

.staging-action-remark textarea {
  height: 38px;
  min-height: 38px;
  padding: 8px 10px;
  resize: none;
}

.staging-action-upload-stage {
  position: relative;
  display: grid;
  gap: 4px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 6px;
  overflow: hidden;
  border: 1px dashed rgba(111, 169, 216, .58);
  border-left: 3px solid #f27a9a;
  border-radius: 8px;
  background: #fbfdff;
}

.staging-action-file-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  min-width: 0;
  cursor: pointer;
}

.staging-action-file-field > small {
  overflow: hidden;
  color: #647087;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staging-action-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(219, 76, 118, .32);
  border-radius: 8px;
  background: #fff;
  color: #a23d61;
  font-size: 11px;
  font-weight: 820;
  cursor: pointer;
  box-shadow: none;
}

.staging-action-file-button:hover {
  border-color: rgba(219, 76, 118, .58);
  background: #fff8fb;
}

.staging-action-scene-choice {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.staging-action-scene-choice:hover { border-color: rgba(111, 169, 216, .58); background: #f8fcff; }

.staging-action-scene-choice > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }

.staging-action-scene-choice small,
.staging-action-scene-choice em { color: var(--muted); font-size: 9px; font-style: normal; }

.staging-action-scene-choice strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.staging-action-scene-choice > b { color: #4f7fa8; font-size: 10px; white-space: nowrap; }

.staging-action-scene-choice-thumb,
.staging-action-scene-thumb-empty,
.staging-action-scene-empty-mark,
.staging-action-scene-custom-mark {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.staging-action-scene-thumb-empty,
.staging-action-scene-empty-mark,
.staging-action-scene-custom-mark,
.staging-action-scene-option-custom {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #edf7ff, #fff2f6);
}

.staging-action-scene-thumb-empty i,
.staging-action-scene-empty-mark i,
.staging-action-scene-custom-mark i,
.staging-action-scene-option-custom i {
  width: 18px;
  height: 14px;
  border: 2px solid #6fa9d8;
  border-radius: 3px;
  transform: rotate(-4deg);
}

.staging-action-scene-choice.is-custom { border-color: rgba(242, 122, 154, .36); background: #fff8fb; }

.staging-action-scene-choice.is-custom .staging-action-scene-custom-mark,
.staging-action-scene-option.is-custom .staging-action-scene-option-custom { background: #fff2f6; }

.staging-action-scene-choice.is-custom i,
.staging-action-scene-option.is-custom i { border-color: #db4c76; }

.staging-action-scene-choice.is-empty { border-style: dashed; }

.staging-action-scene-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 28px 70px rgba(28, 43, 63, .28);
}

.staging-action-scene-dialog::backdrop { background: rgba(23, 32, 51, .48); backdrop-filter: blur(2px); }

.staging-action-scene-dialog-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: min(760px, calc(100vh - 32px)); }

.staging-action-scene-dialog header,
.staging-action-scene-dialog footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.staging-action-scene-dialog header div { display: grid; gap: 3px; }
.staging-action-scene-dialog header small { color: #a23d61; font-size: 11px; font-weight: 820; letter-spacing: .08em; }
.staging-action-scene-dialog header h3 { margin: 0; font-size: 20px; }
.staging-action-scene-dialog header p { margin: 0; color: var(--muted); font-size: 12px; }
.staging-action-scene-dialog footer { border-top: 1px solid var(--line); border-bottom: 0; color: var(--muted); font-size: 12px; }

.staging-action-scene-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}

.staging-action-scene-filters button {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.staging-action-scene-filters button.active { border-color: rgba(111, 169, 216, .48); background: #edf7ff; color: #355d80; font-weight: 800; }

.staging-action-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  align-content: start;
  overflow-y: auto;
  padding: 16px 18px 20px;
}

.staging-action-scene-option {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 88px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.staging-action-scene-option:hover { border-color: rgba(111, 169, 216, .58); box-shadow: 0 6px 16px rgba(70, 88, 116, .09); }
.staging-action-scene-option.is-selected { border-color: rgba(219, 76, 118, .42); box-shadow: inset 0 0 0 1px rgba(219, 76, 118, .12); }
.staging-action-scene-option[hidden] { display: none; }
.staging-action-scene-option-thumb,
.staging-action-scene-option-custom { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.staging-action-scene-option > span:nth-child(2) { display: grid; gap: 5px; min-width: 0; }
.staging-action-scene-option strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.staging-action-scene-option small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.staging-action-scene-option > b { color: #4f7fa8; font-size: 10px; white-space: nowrap; }

.staging-action-upload-preview {
  position: absolute;
  inset: 4px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  border: 1px solid rgba(111, 169, 216, .28);
  border-radius: 6px;
  background: #fff;
  pointer-events: none;
}

.staging-action-upload-preview[hidden] { display: none; }

.staging-action-upload-preview img {
  width: 42px;
  height: 42px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--muted-bg);
}

.staging-action-upload-preview div {
  display: grid; gap: 2px; min-width: 0;
}

.staging-action-upload-preview strong { font-size: 10px; }
.staging-action-upload-preview span,
.staging-action-upload-preview small { font-size: 8px; }

.staging-action-upload-preview span,
.staging-action-upload-preview small {
  overflow-wrap: anywhere;
}

.staging-action-record-form-actions {
  align-self: end;
  flex-wrap: nowrap;
  margin-top: 0;
  padding-bottom: 2px;
  white-space: nowrap;
}

.staging-action-record-form-actions button { padding-inline: 9px; }

.staging-action-record-status {
  min-height: 0;
  color: var(--muted);
  font-size: 11px;
}

.staging-action-record-status:empty { display: none; }

.staging-action-record-list { gap: 8px; }

.staging-action-record-list-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}

.staging-action-record-list-head span {
  color: var(--muted); font-size: 12px;
}

.staging-action-record-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}

.staging-action-record-table {
  width: 100%; min-width: 720px; border-collapse: collapse;
}

.staging-action-record-table th,
.staging-action-record-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle;
}

.staging-action-record-table th {
  background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 750;
}

.staging-action-record-table td { overflow-wrap: anywhere; }

.staging-action-record-table td:first-child { width: 96px; }

.staging-action-record-action-head,
.staging-action-record-action-cell {
  position: sticky;
  right: 0;
  width: 152px;
  min-width: 152px;
  white-space: nowrap;
  box-shadow: -8px 0 12px -12px rgba(28, 43, 63, .45);
}

.staging-action-record-action-head {
  z-index: 2;
  background: var(--panel) !important;
}

.staging-action-record-action-cell {
  z-index: 1;
  background: var(--surface);
}

.staging-action-record-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.staging-action-record-table tr:last-child td { border-bottom: 0; }

.staging-action-record-table td strong,
.staging-action-record-table td small {
  display: block;
}

.staging-action-record-table td small {
  margin-top: 4px; color: var(--muted);
}

.staging-action-record-empty-row td { color: var(--muted); text-align: center; }

.staging-action-record-thumb {
  width: 72px;
  aspect-ratio: 1; border-radius: 6px; object-fit: cover; background: var(--muted-bg);
}

.staging-action-linked-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px;
}

.staging-action-linked-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px; align-items: center;
}

.staging-action-linked-card .staging-action-record-thumb { width: 48px; }

.staging-action-linked-card span { overflow-wrap: anywhere; }

@media (max-width: 1180px) {
  .staging-action-record-form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .staging-action-record-form-grid > label { grid-column: span 2; }
  .staging-action-order-field,
  .staging-action-scene-field { grid-column: span 3 !important; }
  .staging-action-upload-stage { grid-column: span 2; }
  .staging-action-remark { grid-column: span 4 !important; }
  .staging-action-record-form-actions { grid-column: span 2; }
}

@media (max-width: 760px) {
  .staging-action-record-head,
  .staging-action-record-toolbar,
  .staging-action-record-form-grid {
    grid-template-columns: 1fr;
  }

  .staging-action-record-form-grid > label,
    .staging-action-order-field,
    .staging-action-scene-field,
    .staging-action-remark,
    .staging-action-record-form-actions,
    .staging-action-upload-stage { grid-column: 1 / -1 !important; }

  .staging-action-upload-stage {
    grid-template-columns: 1fr;
    gap: 5px;
    min-height: 68px;
    padding: 7px;
  }

  .staging-action-file-field { grid-template-columns: 1fr; }
  .staging-action-record-form-actions { justify-content: flex-end; }

  .staging-action-scene-grid { grid-template-columns: 1fr; padding: 12px; }
  .staging-action-scene-dialog header,
  .staging-action-scene-dialog footer { padding: 14px; }

  .staging-action-record-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
}

/* Page composition; embedded order records retain their compact layout. */
.staging-action-record-page { padding:16px; gap:14px; border-radius:14px; background:#fff; }
.staging-action-record-head h2 { margin:0; font-size:19px; font-weight:650; color:#263c52; }
.staging-action-record-head p { margin:7px 0 0; font-size:13px; color:#5c7186; }
.staging-action-record-page .staging-action-record-form { padding:10px; gap:8px; background:#f6f9fc; border:1px solid #e3ebf3; border-radius:10px; }
.staging-action-record-form-heading { display:flex; align-items:baseline; gap:14px; }
.staging-action-record-form-heading strong { font-size:14px; color:#29445e; }
.staging-action-record-form-heading span { font-size:12px; color:#62758a; }
/* Keep all desktop inputs and actions in one compact row. */
.admin-theme .staging-action-record-page .staging-action-record-form-grid {
  grid-template-columns: 90px 140px minmax(78px,.65fr) minmax(140px,1.25fr) minmax(155px,1.2fr) 110px minmax(88px,.65fr) minmax(100px,1fr) auto;
  gap:8px;
  align-items:start;
}
.admin-theme .staging-action-record-page .staging-action-record-form-grid > * { grid-column:auto; grid-row:auto; min-width:0; }
.staging-action-record-page .staging-action-upload-stage { min-height:68px; padding:5px; border:1px dashed #a8c2d7; border-radius:8px; background:#fff; }
.staging-action-record-page .staging-action-file-field { gap:3px; text-align:center; }
.staging-action-record-page .staging-action-file-button { min-height:28px; font-size:11px; }
.staging-action-record-page .staging-action-file-field small { font-size:9px; }
.staging-action-record-page .staging-action-record-form-actions { align-self:start; padding-top:21px; gap:5px; }
.staging-action-record-page .staging-action-upload-preview { inset:3px; grid-template-columns:1fr; padding:2px; justify-items:center; }
.staging-action-record-page .staging-action-upload-preview img { width:54px; height:54px; object-fit:contain; }
.staging-action-record-page .staging-action-upload-preview div { display:none; }
.staging-action-record-page .staging-action-record-form input:not([type=file]):not([type=hidden]),
.staging-action-record-page .staging-action-record-form select,
.staging-action-record-page .staging-action-remark textarea { min-height:34px; height:34px; font-size:12px; padding-inline:7px; background:#fff; }
.staging-action-record-page .staging-action-record-form input[readonly] { background:#eef5fa; color:#3a6786; }
.staging-action-record-page .staging-action-record-form-grid > label,
.staging-action-record-page .staging-action-scene-field { gap:4px; }
.staging-action-record-page .staging-action-scene-choice { min-height:34px; height:34px; padding:3px 5px; gap:5px; grid-template-columns:26px minmax(0,1fr) auto; }
.staging-action-record-page .staging-action-scene-choice-thumb,
.staging-action-record-page .staging-action-scene-thumb-empty,
.staging-action-record-page .staging-action-scene-empty-mark,
.staging-action-record-page .staging-action-scene-custom-mark { width:26px; height:26px; }
.staging-action-record-page .staging-action-scene-choice small,
.staging-action-record-page .staging-action-scene-choice em { display:none; }
.staging-action-price-head { width:165px; }
.staging-action-price-cell { font-variant-numeric:tabular-nums; }
.staging-action-record-table .staging-action-price-missing { color:#a23d61; font-size:12px; }
.staging-action-price-summary { display:flex; align-items:center; padding:9px 12px; border-radius:7px; background:#eff6fb; color:#315b7a; font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.staging-action-record-table { table-layout:fixed; }
.staging-action-record-table th:first-child { width:100px; }
.staging-action-record-table td { font-size:13px; color:#344f68; }
.staging-action-record-table td small { font-size:11px; color:#60758a; }
.staging-action-record-table tbody tr:hover { background:#f7faff; }
.staging-action-record-table .admin-image-loading-frame.staging-action-record-thumb { display:block; width:72px; height:72px; min-height:0; max-width:72px; aspect-ratio:auto; }
.staging-action-record-table .admin-image-loading-image.staging-action-record-thumb { width:100%; height:100%; object-fit:cover; }
.staging-action-record-table .admin-image-loading-state b { font-size:9px; }
@media (min-width:761px) and (max-width:1279px) {
  .staging-action-record-page .staging-action-record-form { overflow-x:auto; }
  .admin-theme .staging-action-record-page .staging-action-record-form-grid { min-width:1170px; }
}
@media (max-width:760px) {
  .staging-action-record-page { padding:14px; }
  .admin-theme .staging-action-record-page .staging-action-record-form-grid { grid-template-columns:minmax(0,1fr); }
  .admin-theme .staging-action-record-page .staging-action-record-form-grid > * { grid-column:1 !important; grid-row:auto; }
  .staging-action-record-page .staging-action-record-form-actions { padding-top:0; justify-content:flex-end; }
  .staging-action-record-page .staging-action-upload-stage { min-height:68px; }
  .staging-action-record-summary { gap:8px; }
}

.staging-action-price-edit { display:grid; gap:3px; padding:5px 0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.staging-action-price-edit span { color:#60758a; font-size:11px; }
.staging-action-price-edit:hover strong { text-decoration:underline; }
.staging-action-price-edit:focus-visible { outline:2px solid #407fab; outline-offset:3px; border-radius:3px; }
.staging-action-price-editor { display:grid; gap:5px; }
.staging-action-price-editor input { width:100%; min-width:0; min-height:32px; padding:5px 7px; border:1px solid #a7c4db; border-radius:5px; background:#fff; font:inherit; }
.staging-action-price-editor > div { display:flex; gap:5px; }
.staging-action-price-editor .compact { min-height:28px; padding:3px 8px; font-size:12px; }
.staging-action-price-editor [data-staging-price-status]:empty { display:none; }
.staging-action-price-editor [data-staging-price-status] { color:#8b3c52; white-space:normal; }

/* Full record editing stays inside its original table row. */
.staging-action-record-table .is-editing-row > td { padding:8px; white-space:normal; }
.staging-action-record-table .staging-action-inline-form { margin:0; min-width:0; border-left:3px solid #72a7cd; }
.staging-action-inline-form [data-staging-action-status] { white-space:normal; }
.staging-action-price-field [data-staging-price-source] { font-size:11px; color:#60758a; }
.staging-action-price-field [data-staging-action-record="restoreOrderPrice"] { padding:2px 4px; min-height:22px; font-size:11px; }
.staging-action-price-field { row-gap:2px; }
.staging-action-price-field [data-staging-action-record="restoreOrderPrice"] { line-height:16px; }
.staging-action-price-field [data-staging-action-record="restoreOrderPrice"][hidden] { display:none; }

/* order-staging.css */
.order-staging-linked {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(226, 119, 168, 0.22);
  border-radius: 7px;
  background: #fff7fb;
  padding: 4px;
  color: var(--primary);
  text-align: left;
  cursor: pointer;
}

.order-staging-linked:hover {
  border-color: rgba(226, 119, 168, 0.44);
  box-shadow: 0 8px 18px rgba(31, 41, 55, 0.08);
}

.order-staging-linked > .order-staging-linked-thumb,
.order-staging-linked > .admin-image-loading-frame.order-staging-linked-thumb {
  width: 38px;
  height: 50px;
  min-width: 38px;
  min-height: 50px;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  object-fit: cover;
  object-position: center;
  background: #edf1f6;
}

.order-staging-linked .admin-image-loading-image.order-staging-linked-thumb {
  width: 100%;
  height: 100%;
}

.order-staging-linked .admin-image-loading-state b {
  display: none;
}

.order-staging-linked-thumb-empty {
  display: grid;
  place-items: center;
  color: #7a8797;
  font-size: 9px;
  font-weight: 850;
}

.order-staging-linked-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.order-staging-linked-name,
.order-staging-linked-code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-staging-linked-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  color: #24384f;
  font-size: 11px !important;
  font-weight: 900;
  line-height: 1.2;
}

.order-staging-linked-code {
  color: var(--primary) !important;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1.1;
}

.order-staging-linked-count {
  position: absolute;
  right: 3px;
  bottom: 3px;
  border-radius: 999px;
  background: #ffffff;
  padding: 1px 4px;
  color: var(--primary);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.1;
}

.order-staging-picker-dialog {
  width: min(1120px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.order-staging-picker-dialog::backdrop {
  background: rgba(15, 23, 42, 0.34);
}

.order-staging-picker-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(760px, calc(100vh - 48px));
}

.order-staging-picker-head,
.order-staging-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.order-staging-picker-foot {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.order-staging-picker-status {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.order-staging-picker-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.order-staging-picker-head strong {
  display: block;
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.3;
}

.order-staging-picker-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.62fr);
  gap: 0;
}

.order-staging-picker-list {
  order: 2;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  border-left: 1px solid var(--line);
  background: #f8fafc;
}

.order-staging-picker-list-head { display: grid; gap: 2px; margin-bottom: 8px; }
.order-staging-picker-list-head strong { font-size: 13px; }
.order-staging-picker-list-head small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.order-staging-picker-load-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 12px; border-radius: 10px; background: #f4f7fb; color: #52627a; font-size: 13px; }
.order-staging-picker-load-state.is-error { border: 1px solid #f1b8bd; background: #fff5f5; color: #a43843; }

.order-staging-picker-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.order-staging-picker-row.is-selected {
  border-color: rgba(226, 119, 168, 0.52);
  background: #fff7fb;
}

.order-staging-picker-custom .order-staging-picker-thumb-empty {
  color: #3b74ad;
  background: linear-gradient(135deg, #eef7ff, #fff1f7);
}

.order-staging-picker-thumb {
  width: 58px;
  height: 58px;
  border-radius: 6px;
  object-fit: cover;
  background: #edf1f6;
}

.order-staging-picker-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.order-staging-picker-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.order-staging-picker-main span,
.order-staging-picker-main small,
.order-staging-picker-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-staging-picker-main span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}

.order-staging-picker-main strong {
  font-size: 14px;
  line-height: 1.35;
}

.order-staging-picker-main small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.order-staging-picker-actions {
  display: grid;
  gap: 6px;
}

.order-staging-picker-detail {
  order: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background: #fff;
}

.order-staging-scene-detail {
  display: grid;
  gap: 14px;
}

.order-staging-current-badge { display: inline-flex; width: fit-content; border-radius: 999px; padding: 3px 8px; background: #eaf5ff; color: var(--primary); font-size: 12px; font-weight: 800; }

.order-staging-preview-empty.is-custom {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid rgba(242, 122, 154, .28);
  border-radius: 7px;
  background: var(--pink-soft, #fff2f6);
  color: var(--pink-strong, #d9537a);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.order-staging-scene-detail-head strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  line-height: 1.25;
}

.order-staging-scene-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.75fr);
  gap: 12px;
  align-items: start;
}

.order-staging-scene-main-image { display: grid; width: 100%; aspect-ratio: 16 / 10; place-items: center; border-radius: 8px; object-fit: cover; background: #edf1f6; color: var(--muted); font-size: 13px; font-weight: 800; }

.order-staging-scene-detail-grid {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.order-staging-scene-detail-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.order-staging-scene-detail-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.order-staging-scene-detail-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.order-staging-scene-detail-images img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
  background: #edf1f6;
}

.order-staging-scene-detail-images span,
.order-staging-scene-detail-empty,
.order-staging-picker-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.order-staging-scene-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.order-staging-internal-note {
  display: grid;
  gap: 6px;
}

.order-staging-internal-note span {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.order-staging-internal-note textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--text);
  background: #fff;
  font: inherit;
  line-height: 1.5;
}

.order-staging-note-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-staging-note-actions small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 860px) {
  .order-staging-picker-dialog {
    width: calc(100vw - 20px);
  }

  .order-staging-picker-body {
    grid-template-columns: 1fr;
  }

  .order-staging-picker-list {
    max-height: 50vh;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .order-staging-scene-hero {
    grid-template-columns: 1fr;
  }

  .order-staging-picker-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .order-staging-picker-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
}

/* upload-status.css */
.admin-upload-status {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.admin-upload-status[hidden] {
  display: none;
}

.admin-upload-status-card {
  border: 1px solid rgba(87, 105, 126, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 32px rgba(23, 35, 54, 0.16);
  padding: 10px 12px;
}

.admin-upload-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-upload-status-head strong {
  min-width: 0;
  font-size: 13px;
  color: #172033;
}

.admin-upload-status-head span {
  flex: 0 0 auto;
  font-size: 12px;
  color: #5d6b80;
}

.admin-upload-status-card p {
  margin: 5px 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #5d6b80;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-upload-status-bar {
  height: 5px;
  border-radius: 999px;
  background: #e9eef5;
  overflow: hidden;
}

.admin-upload-status-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e56f9f, #6e9df5);
  transition: width 180ms ease;
}

.admin-upload-status-card[data-status="success"] .admin-upload-status-bar i {
  background: #35a36b;
}

.admin-upload-status-card[data-status="error"] {
  border-color: rgba(210, 80, 80, 0.28);
}

.admin-upload-status-card[data-status="error"] .admin-upload-status-head span,
.admin-upload-status-card[data-status="error"] p {
  color: #b04444;
}

.admin-upload-status-card[data-status="error"] .admin-upload-status-bar i {
  background: #df6b6b;
}

.admin-image-loading-frame {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  min-width: 28px;
  min-height: 28px;
  overflow: hidden;
  vertical-align: middle;
  background: linear-gradient(90deg, #eef3f8 0%, #f9fbfd 42%, #eef3f8 82%);
  background-size: 220% 100%;
  animation: sanmiao-admin-image-loading 1.2s ease-in-out infinite;
}

.admin-image-loading-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: inherit;
}

.admin-image-loading-frame[data-image-state="loading"] .admin-image-loading-image[data-cloud-preview-placeholder="true"] {
  opacity: 0;
}

.admin-image-loading-state,
.admin-image-error-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 6px;
  color: #5d6b80;
  background: rgba(246, 249, 252, 0.72);
  font-size: 11px;
  font-weight: 760;
  text-align: center;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.admin-image-loading-state i {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(109, 126, 148, 0.22);
  border-top-color: #6e9df5;
  border-radius: 50%;
  animation: sanmiao-admin-image-spin 720ms linear infinite;
}

.admin-image-loading-state b {
  max-width: 100%;
  overflow: hidden;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-image-error-state {
  opacity: 0;
  color: #b04444;
  background: #fff5f6;
}

.admin-image-loading-frame[data-image-state="loaded"] {
  animation: none;
}

.admin-image-loading-frame[data-image-state="loaded"] .admin-image-loading-state,
.admin-image-loading-frame[data-image-state="loaded"] .admin-image-error-state {
  opacity: 0;
}

.admin-image-loading-frame[data-image-state="error"] {
  animation: none;
}

.admin-image-loading-frame[data-image-state="error"] .admin-image-loading-image,
.admin-image-loading-frame[data-image-state="error"] .admin-image-loading-state {
  opacity: 0;
}

.admin-image-loading-frame[data-image-state="error"] .admin-image-error-state {
  opacity: 1;
}

@keyframes sanmiao-admin-image-loading {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@keyframes sanmiao-admin-image-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-image-loading-frame,
  .admin-image-loading-state i {
    animation: none;
  }
}

/* staging-root-cause-fixes.css */
.hidden-file-input {
  position: fixed !important;
  top: 0 !important;
  left: -10000px !important;
  display: block !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.staging-image-manager-item,
.staging-image-manager-item .admin-image-loading-frame,
.staging-image-manager-item .admin-image-loading-image {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
}

.staging-image-manager-item .admin-image-loading-frame {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: contain !important;
}

.staging-image-manager-item .admin-image-loading-image {
  height: 100% !important;
  object-fit: contain !important;
}

/* business-stats.css */
/* Business stats module: dense operational ledger, not a card dashboard. */
.business-stats-ledger {
  display: grid;
  gap: 10px;
  color: #172033;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-variant-numeric: tabular-nums;
}

.business-stats-ledger,
.business-stats-ledger * {
  box-sizing: border-box;
}

.business-stats-toolbar {
  position: sticky;
  top: 8px;
  z-index: 24;
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid #dfe5eb;
  border-left: 3px solid #397daa;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(23, 32, 51, 0.06);
  backdrop-filter: blur(12px);
}
.business-stats-action-group {
  display: flex;
  align-items: end;
  gap: 7px;
}
.business-stats-action-group button {
  min-height: 32px;
  height: 32px;
}

.business-stats-action-group button {
  padding: 0 11px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
}
.is-member-number {
  color: #397daa;
}
.is-risk-number {
  color: #c95b5b;
}

.business-ledger-scroll {
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

.business-ledger-table {
  width: 100%;
  min-width: 520px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  color: #3f4d61;
  font-size: 11px;
  line-height: 1.3;
}

.is-primary-pane .business-ledger-table {
  min-width: 680px;
}

.business-ledger-table thead,
.business-ledger-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.business-ledger-table th {
  padding: 6px 7px;
  border-right: 1px solid #e5eaf0;
  border-bottom: 1px solid #d8e0e7;
  background: #eef2f6;
  color: #526074;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
}

.business-ledger-table th:last-child,
.business-ledger-table td:last-child {
  border-right: 0;
}

.business-ledger-table td {
  max-width: 360px;
  padding: 6px 7px;
  border-right: 1px solid #edf1f4;
  border-bottom: 1px solid #edf1f4;
  background: #ffffff;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.business-ledger-table tbody tr:nth-child(even) td {
  background: #fafbfd;
}

.business-ledger-table tbody tr:hover td {
  background: #f2f8fc;
}

.business-ledger-table tbody tr:last-child td {
  border-bottom: 0;
}

.business-ledger-empty {
  height: 52px;
  color: #8a95a5;
  text-align: center;
  vertical-align: middle !important;
}

.business-status-text {
  color: #397daa;
  font-weight: 760;
}

.business-ledger-table .import-batch-report {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.business-ledger-table .import-batch-report span,
.business-ledger-table .import-batch-report em {
  margin: 0;
  color: #68758a;
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

.business-definition-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid #cdddeb;
  border-radius: 4px;
  background: #f4f8fb;
  color: #506176;
  font-size: 10px;
  line-height: 1.4;
}

.business-definition-note strong {
  flex: 0 0 auto;
  color: #274d6c;
  font-size: 11px;
}

.business-month-toolbar .business-month-field {
  width: 128px;
}
.business-revenue-composition > .business-ledger-scroll {
  margin: 8px;
  width: calc(100% - 16px);
}

.business-monthly-analytics .business-detail-pane {
  max-height: 520px;
  overflow: auto;
}

.business-monthly-analytics .business-table-note {
  margin: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.business-monthly-analytics .business-ledger-table {
  min-width: 680px;
}

.business-share-cell {
  display: grid;
  grid-template-columns: 46px minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 190px;
}

.business-share-cell > span {
  color: #536174;
  font-weight: 760;
  text-align: right;
}

.business-insight-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 8px;
  padding: 8px;
}

.business-insight {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #dce5ec;
  border-left: 3px solid #6fa9d8;
  background: #fbfcfd;
}

.business-insight.is-warning {
  border-left-color: #d88774;
  background: #fff9f6;
}

.business-insight strong {
  color: #26364a;
  font-size: 11px;
}

.business-insight p {
  margin-top: 5px;
  color: #68758a;
  font-size: 10px;
  line-height: 1.5;
}

.business-appendix-section .business-ledger-table {
  min-width: 440px;
}

.business-simple-report {
  overflow: hidden;
  border-color: #b7c7d6;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.07);
}

.business-simple-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px 15px;
  border-bottom: 1px solid #d9e2ea;
  background: #f8fafc;
}

.business-simple-report-head > div {
  min-width: 0;
}

.business-simple-report-head h2 {
  margin-top: 3px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.business-simple-report-head p {
  margin-top: 6px;
  color: #617086;
  font-size: 12px;
  line-height: 1.5;
}

.business-simple-eyebrow {
  color: #397daa;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.business-simple-order-count {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid #cddbe7;
  border-radius: 4px;
  background: #ffffff;
  color: #617086;
  font-size: 11px;
}

.business-simple-order-count strong {
  margin: 0 3px;
  color: #172033;
  font-size: 18px;
}

.business-cash-flow {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 30px minmax(180px, 1fr) 30px minmax(220px, 1.12fr);
  align-items: stretch;
  padding: 16px 20px 0;
}

.business-cash-cell {
  display: grid;
  min-width: 0;
  min-height: 108px;
  align-content: center;
  gap: 5px;
  padding: 15px 17px;
  border: 1px solid #d5e0e7;
  border-top-width: 3px;
  background: #ffffff;
}

.business-cash-flow > b,
.business-cash-subflow > b {
  display: grid;
  place-items: center;
  color: #7b899a;
  font-size: 22px;
}

.business-cash-cell span,
.business-cash-subflow span,
.business-simple-reconciliation dt {
  color: #67758a;
  font-size: 11px;
  font-weight: 720;
}

.business-cash-cell strong {
  color: #172033;
  font-size: 29px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.business-cash-cell small {
  color: #8994a3;
  font-size: 10px;
  line-height: 1.35;
}

.business-cash-cell.is-revenue {
  border-top-color: #287963;
  background: #f3faf7;
}

.business-cash-cell.is-revenue span,
.business-cash-cell.is-revenue strong {
  color: #176653;
}

.business-cash-cell.is-member {
  border-top-color: #a87532;
  background: #fffaf1;
}

.business-cash-cell.is-member span,
.business-cash-cell.is-member strong {
  color: #855d21;
}

.business-cash-cell.is-inflow {
  border-color: #397daa;
  border-top-width: 3px;
  background: #edf6fc;
}

.business-cash-cell.is-inflow span,
.business-cash-cell.is-inflow strong {
  color: #245f88;
}

.business-cash-subflow {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) 28px minmax(160px, 1fr) 28px minmax(160px, 1fr);
  align-items: stretch;
  margin: 10px 20px 0;
  border: 1px solid #cbdce5;
  border-left: 3px solid #287963;
  background: #f7fbf9;
}

.business-cash-subflow-primary,
.business-cash-subflow-item {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
}

.business-cash-subflow-primary {
  border-right: 1px solid #d9e6e0;
}

.business-cash-subflow strong {
  color: #176653;
  font-size: 17px;
  font-weight: 860;
  line-height: 1.35;
}

.business-simple-basis {
  display: flex;
  gap: 5px;
  margin: 10px 20px 0;
  padding: 8px 10px;
  border-left: 3px solid #d88774;
  background: #fff8f4;
  color: #795348;
  font-size: 11px;
  line-height: 1.5;
}

.business-simple-reconciliation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 1.35fr);
  margin: 10px 20px 0;
  border: 1px solid #dce4eb;
  background: #fbfcfd;
}

.business-simple-reconciliation > div {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 10px 12px;
  border-right: 1px solid #dce4eb;
}

.business-simple-reconciliation > div:last-child {
  border-right: 0;
}

.business-simple-reconciliation dt,
.business-simple-reconciliation dd {
  margin: 0;
}

.business-simple-reconciliation dd {
  color: #33445a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.business-simple-reconciliation .is-excluded {
  background: #fffdfb;
}

.business-simple-reconciliation .is-excluded dd {
  color: #795348;
  font-size: 12px;
}

.business-simple-structure {
  margin-top: 10px;
  border-top: 1px solid #dce4eb;
}

.business-simple-structure > summary {
  display: flex;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  color: #33445a;
}

.business-simple-structure > summary::-webkit-details-marker {
  display: none;
}

.business-simple-structure > summary:focus-visible {
  outline: 3px solid rgba(57, 125, 170, 0.3);
  outline-offset: -3px;
}

.business-simple-structure > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.business-simple-structure > summary strong {
  font-size: 12px;
}

.business-simple-structure > summary small {
  color: #7c8899;
  font-size: 10px;
}

.business-simple-structure > summary > span:last-child {
  color: #397daa;
  font-size: 11px;
  font-weight: 780;
}

.business-simple-structure[open] > summary {
  border-bottom: 1px solid #dce4eb;
  background: #f7f9fb;
}

.business-simple-structure[open] > summary > span:last-child {
  font-size: 0;
}

.business-simple-structure[open] > summary > span:last-child::after {
  content: "收起";
  font-size: 11px;
}

.business-simple-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 20px 20px;
}

.business-simple-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce4eb;
  background: #ffffff;
}

.business-simple-panel h3 {
  min-height: auto;
  padding: 9px 10px;
  border-bottom: 1px solid #dce4eb;
  background: #f5f7f9;
  color: #33445a;
  font-size: 12px;
}

.business-simple-panel .business-ledger-table {
  min-width: 0;
}

.business-simple-panel .business-ledger-table th,
.business-simple-panel .business-ledger-table td {
  padding: 7px 9px;
}

.business-simple-panel .business-ledger-table th:last-child,
.business-simple-panel .business-ledger-table td:last-child {
  width: 42%;
}

.business-audit-details {
  min-width: 0;
  border: 1px solid #dfe5eb;
  border-radius: 4px;
  background: #ffffff;
}

.business-audit-details > summary {
  display: flex;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 13px;
  color: #33445a;
}

.business-audit-details > summary::-webkit-details-marker {
  display: none;
}

.business-audit-details > summary:focus-visible {
  outline: 3px solid rgba(57, 125, 170, 0.3);
  outline-offset: 2px;
}

.business-audit-details > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.business-audit-details > summary strong {
  font-size: 12px;
}

.business-audit-details > summary small {
  color: #7c8899;
  font-size: 10px;
}

.business-audit-details > summary > span:last-child {
  color: #397daa;
  font-size: 11px;
  font-weight: 780;
}

.business-audit-details[open] > summary {
  border-bottom: 1px solid #dfe5eb;
}

.business-audit-details[open] > summary > span:last-child {
  font-size: 0;
}

.business-audit-details[open] > summary > span:last-child::after {
  content: "收起";
  font-size: 11px;
}

.business-audit-details-body {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: #f7f9fb;
}

@media (max-width: 1100px) {

  .business-insight-list {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .business-cash-flow {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  }

  .business-cash-flow > b:nth-of-type(2),
  .business-cash-flow > .is-inflow {
    grid-column: 1 / -1;
  }

  .business-cash-flow > b:nth-of-type(2) {
    min-height: 24px;
  }

  .business-simple-reconciliation,
  .business-simple-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-simple-reconciliation > .is-excluded {
    grid-column: 1 / -1;
    border-top: 1px solid #dce4eb;
    border-right: 0;
  }

  .business-simple-grid > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .business-stats-toolbar {
    position: static;
    align-items: stretch;
  }
.business-stats-action-group {
    align-items: stretch;
  }

  .business-stats-action-group {
    margin-left: auto;
  }

  .business-definition-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .business-insight-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-simple-report-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 15px 14px 13px;
  }

  .business-simple-report-head h2 {
    font-size: 20px;
  }

  .business-cash-flow {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 14px 0;
  }

  .business-cash-flow > b,
  .business-cash-flow > b:nth-of-type(2),
  .business-cash-flow > .is-inflow {
    grid-column: auto;
  }

  .business-cash-flow > b {
    min-height: 25px;
  }

  .business-cash-cell {
    min-height: 96px;
  }

  .business-cash-cell strong {
    font-size: 26px;
  }

  .business-cash-subflow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 10px 14px 0;
  }

  .business-cash-subflow > b {
    min-height: 22px;
  }

  .business-cash-subflow-primary {
    border-right: 0;
    border-bottom: 1px solid #d9e6e0;
  }

  .business-simple-reconciliation {
    grid-template-columns: minmax(0, 1fr);
    margin: 10px 14px 0;
  }

  .business-simple-reconciliation > div,
  .business-simple-reconciliation > .is-excluded {
    border-right: 0;
    border-bottom: 1px solid #dce4eb;
  }

  .business-simple-reconciliation > div:last-child {
    border-bottom: 0;
  }

  .business-simple-basis {
    align-items: flex-start;
    flex-direction: column;
    margin: 10px 14px 0;
  }

  .business-simple-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 14px 16px;
  }

  .business-simple-structure > summary {
    align-items: flex-start;
    padding: 10px 14px;
  }

  .business-simple-grid > :last-child {
    grid-column: auto;
  }
}

/* The three reading paths share the approved admin theme and keep detailed tables on demand. */
.business-monthly-analytics { gap: 16px; color: var(--text, #243347); }
.business-monthly-analytics .business-stats-toolbar {
  position: static;
  padding: 12px 14px;
  border: 1px solid var(--line-strong, #d7e2ec);
  border-radius: 12px;
  box-shadow: var(--shadow-card, 0 7px 26px #233e6407);
}
.business-monthly-analytics .business-stats-action-group button { min-height: 38px; height: 38px; border-radius: 8px; font-size: 13px; }
.business-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line, #e5ebf2);
  border-radius: 12px;
  background: #fff;
  width: max-content;
  max-width: 100%;
}
.business-tabs button {
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #52677e);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.business-tabs button[aria-selected="true"] { border-color: #d6e9f5; background: var(--blue-soft, #edf6fc); color: #275e83; }
.business-tabs button:hover { background: #f5f8fb; }
.business-tabs button:focus-visible { outline: 2px solid #397daa; outline-offset: 2px; }
.business-tab-badge { margin-left: 8px; color: var(--red, #b44952); font-size: 11px; }
.business-tab-panel { display: grid; gap: 16px; min-width: 0; }
.business-tab-panel[hidden] { display: none; }
.business-panel-intro { margin: 0; color: var(--muted, #52677e); font-size: 14px; line-height: 1.6; }
.business-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line-strong, #d7e2ec);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card, 0 7px 26px #233e6407);
}
.business-lead-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 176px;
  padding: 22px 28px;
  border-radius: 10px;
  background: var(--blue-soft, #edf6fc);
  color: #275e83;
}
.business-lead-main > span,
.business-lead-side span,
.business-shooting-summary span,
.business-reconcile-summary span { font-size: 14px; font-weight: 650; }
.business-lead-main > strong { margin: 8px 0; font-size: clamp(32px, 3vw, 48px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.business-lead-main p { margin: 0; font-size: 14px; }
.business-lead-side { display: grid; grid-template-rows: repeat(2, 1fr); gap: 10px; }
.business-lead-side > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 20px;
  border: 1px solid var(--line, #e5ebf2);
  border-radius: 10px;
  background: #fff;
}
.business-lead-side strong { margin: 3px 0; color: var(--text, #243347); font-size: 26px; line-height: 1.2; }
.business-lead-side small,
.business-shooting-summary small,
.business-reconcile-summary small { color: var(--muted, #52677e); font-size: 12px; line-height: 1.5; }
.business-footnote { margin: 0; padding: 0 2px; color: var(--muted, #52677e); font-size: 13px; }
.business-shooting-summary,
.business-reconcile-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.business-reconcile-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.business-shooting-summary > div,
.business-reconcile-summary > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line, #e5ebf2);
  border-radius: 12px;
  background: #fff;
}
.business-shooting-summary strong,
.business-reconcile-summary strong { margin: 8px 0; color: var(--text, #243347); font-size: 27px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.business-reconcile-summary > div:has(strong:not(:empty)) { border-top: 3px solid var(--blue, #709ebd); }
.business-shooting-breakdown,
.business-baseline-action,
.business-reconcile-differences {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line, #e5ebf2);
  border-radius: 12px;
  background: #fff;
}
.business-shooting-breakdown-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.business-shooting-breakdown h2,
.business-baseline-action h2,
.business-reconcile-differences h2 { margin: 0; color: var(--text, #243347); font-size: 18px; }
.business-shooting-breakdown-head p,
.business-baseline-action p,
.business-reconcile-differences p { margin: 4px 0 0; color: var(--muted, #52677e); font-size: 13px; line-height: 1.6; }
.business-shooting-breakdown .business-simple-grid { padding: 16px 0 0; gap: 12px; }
.business-shooting-breakdown .business-simple-panel { border-radius: 8px; }
.business-shooting-breakdown .business-simple-panel h3 { padding: 12px; background: #f8fafc; font-size: 14px; }
.business-shooting-breakdown .business-simple-panel th,
.business-shooting-breakdown .business-simple-panel td { font-size: 13px; }
.business-baseline-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.business-baseline-action > div { max-width: 700px; }
.business-reconcile-differences .business-ledger-table { margin-top: 14px; }
.business-tab-more { min-width: 0; border: 1px solid var(--line, #e5ebf2); border-radius: 12px; background: #fff; }
.business-tab-more > summary { padding: 16px 20px; color: #275e83; font-size: 14px; font-weight: 700; cursor: pointer; }
.business-tab-more > summary:focus-visible { outline: 2px solid #397daa; outline-offset: -3px; }
.business-tab-more-body { display: grid; gap: 14px; padding: 0 14px 14px; }
@media (max-width: 980px) {
  .business-lead { grid-template-columns: minmax(0, 1fr); }
  .business-lead-side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .business-shooting-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.business-monthly-analytics .business-stats-toolbar,
.business-monthly-analytics .business-stats-action-group { flex-wrap: wrap; }
  .business-monthly-analytics .business-stats-action-group { margin-left: 0; }
.business-monthly-analytics .business-stats-action-group button { min-height: 44px; height: 44px; }
  .business-tabs { width: 100%; }
  .business-tabs button { flex: 1 1 auto; min-height: 44px; padding: 8px 10px; font-size: 13px; }
  .business-lead { padding: 10px; }
  .business-lead-main { min-height: 145px; padding: 20px; }
  .business-lead-side { grid-template-columns: minmax(0, 1fr); }
  .business-shooting-summary,
  .business-reconcile-summary { grid-template-columns: minmax(0, 1fr); }
  .business-shooting-breakdown .business-simple-grid { grid-template-columns: minmax(0, 1fr); }
  .business-shooting-breakdown .business-simple-grid > :last-child { grid-column: auto; }
}

/* Cash details stay in the reading flow and use the same scale as the new overview. */
.business-cash-details { display: grid; min-width: 0; gap: 16px; }
.business-cash-details-head { display: grid; gap: 5px; padding: 4px 2px 0; }
.business-cash-details-head h2 { margin: 0; color: var(--text, #243347); font-size: 22px; line-height: 1.3; }
.business-cash-details-head p { margin: 0; color: var(--muted, #52677e); font-size: 14px; line-height: 1.6; }
.business-cash-details .business-cash-trend-pair { grid-template-columns: minmax(0, 1fr); }
.business-cash-details .business-detail-pane { max-height: none; overflow: visible; }
.business-cash-details .business-cash-receipt-pair > :last-child h3 { background: #f8f5fb; }
.business-cash-details .business-ledger-scroll { max-width: 100%; border-radius: 0 0 10px 10px; }
.business-cash-details .business-ledger-table { min-width: 0; color: var(--text, #243347); font-size: 13px; line-height: 1.5; }
.business-cash-details .business-ledger-table th {
  padding: 10px 14px;
  border-color: var(--line, #e5ebf2);
  background: #f4f8fc;
  color: var(--muted, #52677e);
  font-size: 12px;
  letter-spacing: 0;
}
.business-cash-details .business-ledger-table td { padding: 11px 14px; border-color: var(--line, #e5ebf2); font-size: 13px; }
.business-cash-details .business-ledger-table tbody tr:nth-child(even) td { background: #fbfdff; }
.business-cash-details .business-ledger-table tbody tr:hover td { background: #f1f7fc; }
.business-cash-details .business-table-note { padding: 10px 14px; font-size: 12px; }

.business-loading-skeleton { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.business-loading-skeleton i,.business-loading-skeleton b { display:block; height:110px; border-radius:12px; background:#e8eef5; }
.business-loading-skeleton b { grid-column:1/-1; height:260px; }
.business-refresh-note { margin:0; padding:10px 16px; background:#edf6fc; color:#365c79; border-radius:8px; font-size:13px; }

/* business-summary.css */
/* One monthly report with three primary figures and compact, visible breakdowns. */
.business-summary { gap: 12px; width: 100%; max-width: 980px; margin-inline: auto; }
.business-summary .business-stats-toolbar { position: static; border: 1px solid #dce7f1; border-radius: 12px; box-shadow: none; padding: 14px 16px; background: #fff; }
.business-summary .business-month-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.business-summary .business-month-field { display: grid; width: 150px; flex: 0 0 150px; gap: 5px; color: #61758b; font-size: 12px; }
.business-summary .business-month-field input { width: 150px; min-height: 34px; }
.business-summary-basis { margin: 0; color: #61758b; font-size: 13px; line-height: 1.6; }
.business-summary-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; border: 1px solid #dce7f1; border-radius: 12px; overflow: hidden; background: #fff; }
.business-summary-top > div { min-width: 0; padding: 20px; }
.business-summary-top > div + div { border-left: 1px solid #e5edf4; }
.business-summary-top span { color: #58728a; font-size: 13px; }
.business-summary-top strong { display: block; margin: 8px 0; font-size: 28px; line-height: 1.2; color: #263e53; }
.business-summary-top p { margin: 6px 0 0; color: #6c8093; font-size: 12px; line-height: 1.5; }
.business-summary-revenue { background: #edf7fd; }
.business-summary-revenue strong { color: #28688f; font-size: 38px; }
.business-summary-member form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.business-summary-member input { width: 130px; height: 32px; min-height: 32px; padding: 6px 8px; border: 1px solid #dce7f1; border-radius: 6px; font-size: 13px; }
.business-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.business-summary-quantity > header { margin: 2px 0 10px; }
.business-summary-quantity > header h2 { margin: 0 0 5px; color: #273f54; font-size: 16px; }
.business-summary-quantity > header p { margin: 0; color: #6c8093; font-size: 12px; line-height: 1.6; }
.business-summary-section {  min-width: 0; background: #fff; border: 1px solid #dce7f1; border-radius: 12px; overflow: hidden; }
.business-summary-section header { padding: 12px 16px 10px; }
.business-summary-section h2 { margin: 0 0 5px; font-size: 16px; color: #273f54; }
.business-summary-section header p, .business-summary-note { margin: 0; color: #6c8093; font-size: 12px; line-height: 1.6; }
.business-summary-note { padding: 8px 16px; }
.business-summary-section .business-ledger-table { min-width: 0; width: 100%; }
.business-summary-section .business-ledger-table th { font-size: 12px; padding: 8px 16px; color: #597289; background: #f6f9fc; }
.business-summary-section .business-ledger-table td { font-size: 13px; padding: 8px 16px; white-space: normal; }
.business-summary-section .business-ledger-table th:not(:first-child), .business-summary-section .business-ledger-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.business-summary-fees { display: flex; gap: 24px; padding: 0 16px 12px; }
.business-summary-fees span { display: block; color: #6c8093; font-size: 12px; }
.business-summary-fees strong { display: block; margin-top: 6px; color: #273f54; font-size: 22px; }
@media (max-width: 800px) {
  .business-summary-top { grid-template-columns: 1fr 1fr; }
  .business-summary-top > div:first-child { grid-column: 1 / -1; }
  .business-summary-top > div:nth-child(2) { border-left: 0; }
  .business-summary-top > div:not(:first-child) { border-top: 1px solid #e5edf4; }
}
@media (max-width: 480px) {
  .business-summary-top { grid-template-columns: 1fr; }
  .business-summary-top > div { padding: 18px; }
  .business-summary-top > div + div { border-left: 0; }
  .business-summary .business-stats-toolbar { padding: 12px; }
  .business-summary-section .business-ledger-table th, .business-summary-section .business-ledger-table td { padding: 10px 8px; }
  .business-summary-member input { height: 44px; min-height: 44px; }
  .business-summary button { min-height: 44px; }
}

.business-change-up { color: #28764f; font-weight: 600; }
.business-change-down { color: #b64755; font-weight: 600; }
.business-change-flat { color: #61758b; }

.business-summary-bonus { border-top: 1px solid #dce7f1; }
.business-summary-bonus header strong { display: block; margin-top: 8px; color: #28688f; font-size: 14px; }

/* mobile-viewport.css */
/* Mobile admin viewport: keep the shell and main surface inside the real viewport. */
@media (max-width: 720px) {
  .app-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* autosave-feedback.css */
.global-cloud-sync-receipt {
  display: grid;
  grid-template-columns: auto minmax(130px, 220px) auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(43, 58, 84, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
}

.global-cloud-sync-receipt[hidden] { display: none; }
.global-cloud-sync-receipt[data-phase="verified"] {
  grid-template-columns: auto auto auto;
  min-height: 32px;
  padding: 5px 9px;
}
.global-cloud-sync-receipt[data-phase="verified"] [data-cloud-receipt-message] { display: none; }
.global-cloud-sync-receipt[data-phase="pending"] [data-cloud-receipt-message],
.global-cloud-sync-receipt[data-phase="local"] [data-cloud-receipt-message] {
  white-space: normal;
  overflow-wrap: anywhere;
}

.global-cloud-sync-receipt::before,
.cloud-receipt-icon::before {
  content: "○";
  font-weight: 900;
}

.global-cloud-sync-receipt strong,
.global-cloud-sync-receipt span {
  display: block;
}

.global-cloud-sync-receipt strong {
  font-size: 12px;
}

.global-cloud-sync-receipt [data-cloud-receipt-message],
.global-cloud-sync-receipt [data-cloud-receipt-time] {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-cloud-sync-receipt[data-phase="pending"],
.global-cloud-sync-receipt[data-phase="saving"],
.content-cloud-receipt[data-phase="pending"],
.content-cloud-receipt[data-phase="saving"] {
  border-color: rgba(196, 132, 34, 0.38);
  background: #fffaf0;
}

.global-cloud-sync-receipt[data-phase="pending"]::before,
.content-cloud-receipt[data-phase="pending"] .cloud-receipt-icon::before {
  content: "…";
}

.global-cloud-sync-receipt[data-phase="saving"]::before,
.content-cloud-receipt[data-phase="saving"] .cloud-receipt-icon::before {
  content: "↻";
}

.global-cloud-sync-receipt[data-phase="acknowledged"],
.content-cloud-receipt[data-phase="acknowledged"] {
  border-color: rgba(48, 118, 170, 0.4);
  background: #f2f8fd;
}

.global-cloud-sync-receipt[data-phase="acknowledged"]::before,
.content-cloud-receipt[data-phase="acknowledged"] .cloud-receipt-icon::before {
  content: "↑";
}

.global-cloud-sync-receipt[data-phase="verified"],
.content-cloud-receipt[data-phase="verified"] {
  border-color: rgba(39, 139, 91, 0.42);
  background: #f1fbf6;
}

.global-cloud-sync-receipt[data-phase="verified"]::before,
.content-cloud-receipt[data-phase="verified"] .cloud-receipt-icon::before {
  content: "✓";
}

.global-cloud-sync-receipt[data-phase="error"],
.content-cloud-receipt[data-phase="error"] {
  border-color: rgba(194, 65, 65, 0.45);
  background: #fff5f5;
}

.global-cloud-sync-receipt[data-phase="error"] {
  grid-template-columns: auto minmax(280px, 520px) auto;
  grid-column: 1 / -1;
  grid-row: 2;
  align-items: start;
  width: 100%;
  max-width: 680px;
  justify-self: end;
}

.top-actions:has(> .global-cloud-sync-receipt[data-phase="error"]) {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  flex: 1 1 680px;
  justify-content: end;
  min-width: 0;
}

.global-cloud-sync-receipt[data-phase="error"] [data-cloud-receipt-message] {
  overflow: visible;
  overflow-wrap: anywhere;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}

.global-cloud-sync-receipt[data-phase="error"] [data-cloud-receipt-time] {
  padding-top: 1px;
}

.global-cloud-sync-receipt[data-phase="error"]::before,
.content-cloud-receipt[data-phase="error"] .cloud-receipt-icon::before {
  content: "!";
}

.global-cloud-sync-receipt[data-phase="local"]::before,
.content-cloud-receipt[data-phase="local"] .cloud-receipt-icon::before {
  content: "⌂";
}

.content-cloud-receipt {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(280px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 2px solid rgba(43, 58, 84, 0.16);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(43, 58, 84, 0.08);
}

.content-cloud-receipt-main {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.cloud-receipt-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(43, 58, 84, 0.08);
  font-size: 17px;
}

.content-cloud-receipt-main strong,
.content-cloud-receipt-main span,
.content-cloud-receipt-meta strong,
.content-cloud-receipt-meta span {
  display: block;
}

.content-cloud-receipt-main strong {
  font-size: 15px;
}

.content-cloud-receipt-main span,
.content-cloud-receipt-meta span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.content-cloud-receipt-meta strong {
  font-size: 12px;
}

.content-cloud-receipt-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  .content-cloud-receipt {
    grid-template-columns: 1fr;
  }

  .content-cloud-receipt-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .topbar:has(.global-cloud-sync-receipt[data-phase="error"]) {
    flex-wrap: wrap;
  }

  .top-actions:has(> .global-cloud-sync-receipt[data-phase="error"]) {
    display: flex;
    flex-basis: 100%;
  }

  .global-cloud-sync-receipt[data-phase="error"] {
    grid-template-columns: auto minmax(0, 1fr);
    flex: 1 0 100%;
    order: 2;
    max-width: none;
  }

  .global-cloud-sync-receipt[data-phase="error"] [data-cloud-receipt-time] {
    grid-column: 2;
  }
}

/* accessibility.css */
.hidden-file-input[aria-hidden="true"] {
  user-select: none;
}

.staging-gallery-table td,
.staging-detail-dialog button {
  font-size: max(12px, 0.75rem);
}

dialog:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid rgba(194, 95, 61, 0.55);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  button:not(.schedule-empty):not(.schedule-block):not(.schedule-continuation),
  select,
  input:not([type="checkbox"]):not([type="radio"]),
  textarea {
    min-height: 44px;
  }

  .topbar {
    align-items: flex-start;
    gap: 12px;
  }

  .top-actions {
    width: 100%;
  }

  .source-badge {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  .staging-gallery-pager button.ghost-button.compact[data-staging-page-action],
  .staging-header-filter,
  .staging-gallery-page-size {
    min-height: 32px;
  }

  .staging-gallery-pager button.ghost-button.compact[data-staging-page-action] {
    height: 32px;
    line-height: 1;
    white-space: nowrap;
  }
}

/* navigation-notification.css */
.nav-item {
  position: relative;
}

.nav-notification-badge {
  position: absolute;
  top: 6px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--panel, #fff);
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(183, 28, 28, 0.24);
  pointer-events: none;
}

.nav-notification-badge[hidden] {
  display: none;
}

.navigation-notification-toast {
  position: fixed;
  z-index: 1800;
  top: 18px;
  left: 50%;
  display: grid;
  gap: 3px;
  min-width: min(360px, calc(100vw - 32px));
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid #f2b8b5;
  border-radius: 10px;
  background: #fff8f7;
  color: #8f1d1a;
  box-shadow: 0 12px 32px rgba(44, 24, 24, 0.18);
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: opacity 160ms ease, transform 160ms ease;
}

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

.navigation-notification-toast strong {
  font-size: 14px;
}

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

@media (max-width: 760px) {
  .navigation-notification-toast {
    top: 10px;
  }
}

/* site-compliance.css */
.site-compliance-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  margin: 24px 0 0;
  padding: 18px 24px 22px;
  border-top: 1px solid rgba(57, 125, 170, 0.14);
  color: #718096;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.site-compliance-footer a {
  color: #526881;
  text-decoration: none;
}

.site-compliance-footer a:hover,
.site-compliance-footer a:focus-visible {
  color: #245f8f;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .site-compliance-footer {
    flex-direction: column;
    padding-inline: 16px;
  }
}

/* member-orders.css */
.member-order-toolbar { padding: 16px; margin-bottom: 16px; border: 1px solid #d7e6f1; border-radius: 12px; background: #f5faff; color: #26384d; }
.member-order-heading,.member-order-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.member-order-heading { justify-content:space-between; margin-bottom:12px; }
.member-order-heading strong { font-size:17px; margin-right:14px; }
.member-order-controls label,.member-order-person label,.member-order-link-dialog label { display:flex; flex-direction:column; gap:5px; font-size:12px; }
.member-order-controls select,.member-order-person select,.member-order-link-dialog select,.member-order-link-dialog input { padding:9px; background:white; border:1px solid #cddce9; border-radius:7px; color:inherit; min-width:180px; max-width:100%; }
.member-order-toolbar p { font-size:12px; margin:12px 0 0; }
.member-order-person { margin:16px; padding:14px; border:1px solid #cddce9; border-radius:8px; display:grid; gap:10px; }
.member-order-person small { color:#59708a; }
.member-order-badge { display:block; white-space:normal; color:#3079a0; margin-top:4px; line-height:1.5; }
.member-order-link-dialog { width:min(680px,92vw); border:1px solid #cddce9; border-radius:14px; padding:24px; }
.member-order-link-dialog form { display:grid; gap:14px; }
.member-order-link-dialog::backdrop { background:#24384d66; }

.member-orders-context #newOfflineOrder,.member-orders-context #orderCategoryTabs { display:none; }
.member-orders-context .order-amount-guidance { display:none; }

#memberPreviewPanel:not(.hidden) { display:grid; grid-template-columns:456px minmax(0,1fr); gap:16px; align-items:start; }
#memberPreviewPanel .member-preview-frame { border:0; border-radius:0; background:transparent; width:min(456px,100%); height:max(820px,calc(100vh - 190px)); }
.member-order-surface { min-width:0; }
.member-order-empty { background:white; border:1px solid #d7e6f1; border-radius:12px; padding:24px; color:#65768a; }
.member-order-surface .member-order-toolbar { padding:14px; background:white; }
.member-order-surface .member-order-heading strong { font-size:17px; }
.member-order-surface .member-order-controls { gap:8px; }
.member-order-surface .member-order-controls select { min-width:140px; }
.member-order-surface .orders-panel { min-width:0; }
.member-order-surface .orders-panel > .panel-heading { flex-wrap:wrap; gap:10px; }
@media(max-width:1100px) { #memberPreviewPanel:not(.hidden) { grid-template-columns:1fr; } #memberPreviewPanel .member-preview-frame { height:780px; } }

.admin-theme #memberPreviewPanel #ordersWorkspace .order-grid-table,
.admin-theme #memberPreviewPanel #ordersWorkspace .order-grid-row { min-width:var(--order-grid-full-width) !important; }
.admin-theme #memberPreviewPanel #ordersWorkspace .order-grid-row { grid-template-columns:var(--order-grid-full-template) !important; }
.member-order-surface .orders-panel > .panel-head { flex-wrap:wrap; gap:10px; }

.member-profile-columns { min-width:0; }

.member-order-link-dialog input[type=checkbox] { min-width:0; width:auto; }
.member-history-choices { max-height:40vh; overflow-y:auto; display:grid; gap:10px; }
.member-history-choices label { flex-direction:row; align-items:center; }

.member-order-person label { display:grid; gap:6px; min-width:0; }
.member-order-person input,.member-order-person select { width:100%; min-width:0; box-sizing:border-box; }
.member-order-person [data-member-draft-feedback] { margin:0; font-size:12px; overflow-wrap:anywhere; }
.member-order-person [data-member-card-retry] { justify-self:start; }

/* member-preview.css */
.member-preview-frame {
  display: block;
  width: 100%;
  height: max(900px, calc(100vh - 230px));
  border: 1px solid #dde4ed;
  border-radius: 14px;
  background: #f4f7fb;
}
.main:has(#memberPreviewPanel:not(.hidden)) .global-cloud-sync-receipt {
  display: none;
}
@media (max-width: 720px) {
  .main:has(#memberPreviewPanel:not(.hidden)) > .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .main:has(#memberPreviewPanel:not(.hidden)) .top-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* admin-theme.css */
/* Approved membership-inspired visual system. Order tracks, fields and editors
   stay owned by their existing modules; this file never defines table columns. */
body.admin-theme {
  --bg: #f4f7fb;
  --bg-2: #f4f7fb;
  --surface: #fff;
  --surface-strong: #fff;
  --surface-soft: #f8fafc;
  --line: #e5ebf2;
  --line-strong: #d7e2ec;
  --text: #243347;
  --muted: #52677e;
  --subtle: #61758a;
  --pink: #c67b94;
  --pink-strong: #ae607b;
  --pink-soft: #fbf0f4;
  --blue: #709ebd;
  --blue-strong: #397daa;
  --blue-hover: #306b93;
  --focus-ring: #709ebd66;
  --radius-control: 7px;
  --blue-soft: #edf6fc;
  --green: #338572;
  --green-soft: #edf7f2;
  --amber: #986235;
  --amber-soft: #fff5e8;
  --red: #b44952;
  --red-soft: #fff0f0;
  --gradient-primary: linear-gradient(#397daa, #397daa);
  --gradient-accent: linear-gradient(120deg, #edf6fc, #fbf0f4);
  --gradient-soft: linear-gradient(110deg, #f0f7fc, #fff 65%, #fbf1f5);
  --gradient-page: linear-gradient(#f4f7fb, #f4f7fb);
  --shadow-card: 0 7px 26px #233e6407;
  --shadow-float: 0 18px 65px #233e641c;
  --radius-panel: 14px;
  --radius-card: 10px;
  --admin-page-scale: 1;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.admin-theme .app-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  backdrop-filter: none;
}
.admin-theme .main {
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  padding: 0 32px 18px;
  zoom: 1;
}
.admin-theme .sidebar {
  background: #ffffffed;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 25px 17px 18px;
  gap: 20px;
  color: var(--text);
  backdrop-filter: none;
}
.admin-theme .brand {
  padding: 0 10px;
  gap: 11px;
  border: 0;
  background: none;
  box-shadow: none;
}
.admin-theme .brand-mark {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 38px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--gradient-accent);
  box-shadow: none;
  color: #537c9a;
  font: 25px "Songti SC", serif;
}
.admin-theme .brand-name { font-size: 15px; font-weight: 600; letter-spacing: .4px; }
.admin-theme .brand-subtitle { font-size: 9px; color: var(--subtle); letter-spacing: 1px; }
.admin-theme .sidebar .brand { display: flex; flex-shrink: 0; }
.admin-theme .sidebar .brand > div:not(.brand-mark) { display: block; }
.admin-theme .sidebar .brand-mark { display: block; position: relative; overflow: hidden; flex-shrink: 0; }
.admin-theme .brand-mark img { position: absolute; width: 68px; max-width: none; height: auto; top: -2px; left: 50%; transform: translateX(-50%); }
.admin-theme .nav-notification-badge { top: 11px; right: 10px; min-width: 17px; height: 17px; border: 0; border-radius: 5px; background: #f9eaf0; color: #ad5978; box-shadow: none; font-size: 10px; font-weight: 500; }
.admin-theme .sidebar .nav-list { display: grid; gap: 16px; overflow: visible; }
.admin-theme .sidebar .nav-group { padding: 0; border: 0; background: none; box-shadow: none; }
.admin-theme .sidebar .nav-group summary {
  min-height: 24px;
  padding: 0 12px;
  margin-bottom: 8px;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
}
.admin-theme .sidebar .nav-sublist { display: grid; gap: 4px; padding: 0; }
.admin-theme .sidebar .nav-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  justify-items: start;
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
  color: #5f7388;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  transform: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.admin-theme .sidebar .nav-item > small { display: none; }
.admin-theme .nav-icon { width: 17px; height: 17px; grid-row: 1; grid-column: 1; opacity: .8; }
.admin-theme .sidebar .nav-item > span:not(.nav-notification-badge) { grid-column: 2; }
.admin-theme .sidebar .nav-subitem { min-height: 32px; padding: 7px 12px 7px 39px; grid-template-columns: minmax(0, 1fr); border-left: 1px solid transparent; font-size: 11px; }
.admin-theme .sidebar .nav-subitem > span:not(.nav-notification-badge) { grid-column: 1; }
.admin-theme .sidebar .nav-item:hover { background: #f5f8fb; transform: none; }
.admin-theme .sidebar .nav-item.active { background: var(--blue-soft); border-color: #dfedf6; color: #275e83; font-weight: 600; }
.admin-theme .sidebar-follow-indicator { display: none; }
.admin-theme .sidebar .sidebar-note { margin-top: auto; padding: 16px 10px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; font-size: 10px; line-height: 1.8; }
.admin-theme .sidebar-note .note-label { color: var(--muted); font-size: 10px; font-weight: 500; }
.admin-theme .topbar {
  min-height: 120px;
  margin: 0 0 25px;
  padding: 27px 0 23px;
  gap: 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.admin-theme .page-eyebrow { display: block; margin-bottom: 9px; color: #668ba7; font-size: 9px; font-weight: 600; letter-spacing: 2px; }
.admin-theme .topbar h1 { font-size: 25px; font-weight: 600; line-height: 1.35; letter-spacing: .6px; }
.admin-theme .topbar p { margin-top: 8px; font-size: 12px; line-height: 1.7; }
.admin-theme .source-badge { border-color: var(--line); background: #ffffffab; color: #52677e; border-radius: 7px; font-size: 11px; font-weight: 500; }
.admin-theme .global-cloud-sync-receipt[data-phase="idle"] { min-height: 0; padding: 7px 10px; border-color: transparent; background: transparent; box-shadow: none; }
.admin-theme .global-cloud-sync-receipt[data-phase="idle"] strong { color: #52677e; font-size: 11px; font-weight: 500; }
.admin-theme .global-cloud-sync-receipt[data-phase="idle"] [data-cloud-receipt-message], .admin-theme .global-cloud-sync-receipt[data-phase="idle"] [data-cloud-receipt-time] { font-size: 10px; color: #61758a; }
.admin-theme :is(.primary-button, .ghost-button, .danger-button) {
  border-radius: 7px;
  font-weight: 600;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.admin-theme .primary-button { background: #397daa; border: 1px solid #397daa; color: #fff; }
.admin-theme .primary-button:hover:not(:disabled) { background: #275e83; border-color: #275e83; box-shadow: 0 3px 10px #397daa20; }
.admin-theme .ghost-button { background: #fff; border-color: #dbe5ed; color: #405e77; }
.admin-theme .ghost-button:hover:not(:disabled), .admin-theme .ghost-button.is-active { background: var(--blue-soft); border-color: #b8d6e9; color: #275e83; }
.admin-theme :is(input, select, textarea) { border-color: #dbe5ed; border-radius: 7px; }
.admin-theme :is(input, select, textarea):focus-visible { outline: 2px solid #83b9db; outline-offset: 2px; }
.admin-theme :is(button, a):focus-visible { outline: 2px solid #83b9db; outline-offset: 3px; }
.admin-theme .metric-grid {
  gap: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 26px;
  padding: 24px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--gradient-soft);
  box-shadow: var(--shadow-card);
}
.admin-theme .metric-card {
  min-height: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.admin-theme .metric-card + .metric-card { border-left: 1px solid #e1e8ef; }
.admin-theme .metric-card::before { display: none; }
.admin-theme .metric-card span { font-size: 12px; color: var(--muted); font-weight: 600; }
.admin-theme .metric-card strong { margin: 9px 0 6px; font: 500 32px/1.2 "Avenir Next", "PingFang SC", sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
.admin-theme .metric-card:first-child strong { color: var(--blue-strong); }
.admin-theme .metric-card:nth-child(2) strong { color: var(--pink); }
.admin-theme .metric-card small { font-size: 11px; line-height: 1.5; color: var(--muted); }
.admin-theme :is(.today-flow-card, .tomorrow-plan-panel, .orders-panel, .module-panel, .import-preview-panel, .service-consult-panel, .order-column-panel) {
  border-color: var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.admin-theme :is(.today-flow-card, .module-panel, .orders-panel)::before { display: none; }
.admin-theme .today-flow-grid { gap: 23px; margin-bottom: 23px; }
.admin-theme :is(.today-flow-head, .panel-head) { padding: 20px 22px 17px; gap: 16px; background: transparent; border-bottom-color: var(--line); }
.admin-theme :is(.today-flow-head h2, .panel-head h2, .module-panel h2) { font-size: 16px; font-weight: 600; color: var(--text); }
.admin-theme :is(.today-flow-head p, .panel-head p) { font-size: 12px; line-height: 1.55; color: var(--muted); }
.admin-theme .today-flow-summary-inline { color: #607b92; background: #f2f7fb; border-color: #e4edf5; font-weight: 500; }
.admin-theme .table-status-row { background: #f8fafc; border-color: var(--line); }
.admin-theme .order-amount-guidance { color: #697b90; background: #f8fafc; border-color: var(--line); line-height: 1.7; }
/* Keep all order geometry and semantic status backgrounds in order-table.css. */
.admin-theme .order-grid-header-row .order-grid-cell { color: #61788e; font-weight: 500; background-color: #f4f8fc; }
.admin-theme :is(.status-chip, .schedule-state-chip) { font-weight: 600; }
.admin-theme .module-panel { padding: 22px; }
.admin-theme .module-panel .panel-head { padding-left: 0; padding-right: 0; }
.admin-theme :is(.content-config-card, .content-studio-card, .staging-action-record-card) { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow-card); }
.admin-theme .module-panel input, .admin-theme .module-panel select, .admin-theme .module-panel textarea { background-color: #fff; }
.admin-theme .staging-action-record-panel { min-width: 0; }
.admin-theme dialog { border-color: var(--line); box-shadow: var(--shadow-float); }
.admin-theme dialog[open]:not(.content-visual-embedded) { animation: admin-dialog-enter .2s ease-out; }
.admin-theme dialog::backdrop { background: #26384c45; backdrop-filter: blur(3px); }
.admin-theme :is(.dialog-head, .modal-head, .order-detail-dialog-header) { background: #f8fafc; border-color: var(--line); }
.admin-theme .detail-section { border-color: var(--line); box-shadow: none; }
.admin-theme .site-compliance-footer { margin-top: 26px; border-top-color: var(--line); color: #7d8fa2; }
.admin-theme .admin-view-enter { animation: admin-view-enter .2s ease-out; }
@keyframes admin-view-enter { from { opacity: .4; } to { opacity: 1; } }
@keyframes admin-dialog-enter { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 1041px) {
  .admin-theme .app-shell { grid-template-columns: 218px minmax(0, 1fr); }
  .admin-theme .main { grid-column: 2; }
  .admin-theme .sidebar { position: fixed; inset: 0 auto 0 0; width: 218px; max-width: 218px; height: 100dvh; max-height: 100dvh; transform: none; overflow-y: auto; overflow-x: hidden; box-shadow: none; scrollbar-width: thin; }
  .admin-theme .sidebar-toggle, .admin-theme .sidebar-hover-zone { display: none; }
  .admin-theme .sidebar .nav-list { flex: 0 0 auto; }
}
@media (min-width: 1041px) and (max-width: 1400px) {
  .admin-theme .main { padding-inline: 24px; }
  .admin-theme .metric-card { padding-inline: 13px; }
  .admin-theme .topbar { flex-wrap: wrap; }
  .admin-theme .top-actions { margin-left: auto; }
}
@media (max-width: 1040px) {
  .admin-theme .main { padding: 0 18px 16px; }
  .admin-theme .topbar { min-height: 102px; padding: 20px 0; flex-wrap: wrap; gap: 12px; }
  .admin-theme .topbar h1 { font-size: 22px; }
  .admin-theme .sidebar { top: var(--sidebar-visible-top, 12px); padding: 18px 12px; border-radius: 12px; gap: 20px; }
  .admin-theme .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .admin-theme .metric-card:nth-child(4) { border-left: 0; }
  .admin-theme .top-actions { width: 100%; }
}
@media (max-width: 720px) {
  .admin-theme .main { padding-inline: 12px; }
  .admin-theme .metric-grid { padding: 20px 0; }
  .admin-theme .metric-card { padding-inline: 12px; }
  .admin-theme .metric-card strong { font-size: 27px; }
  .admin-theme .metric-card small { font-size: 10px; }
  .admin-theme :is(.today-flow-head, .panel-head) { padding: 16px 12px; }
  .admin-theme .module-panel { padding: 14px; }
  .admin-theme .topbar h1 { font-size: 20px; }
  .admin-theme .topbar p { font-size: 11px; }
  .admin-theme .page-eyebrow { font-size: 8px; letter-spacing: 1.5px; }
}
/* The fixed desktop navigation leaves less width than the former zoomed canvas. */
@media (min-width: 761px) and (max-width: 1650px) {
  .admin-theme .staging-action-record-panel:not(.staging-action-record-page) .staging-action-record-form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .admin-theme .staging-action-record-panel:not(.staging-action-record-page) .staging-action-record-form-grid > label { grid-column: span 2; }
  .admin-theme .staging-action-record-panel:not(.staging-action-record-page) .staging-action-order-field,
  .admin-theme .staging-action-record-panel:not(.staging-action-record-page) .staging-action-scene-field { grid-column: span 3 !important; }
  .admin-theme .staging-action-record-panel:not(.staging-action-record-page) .staging-action-upload-stage { grid-column: span 2; }
  .admin-theme .staging-action-record-panel:not(.staging-action-record-page) .staging-action-remark { grid-column: span 4 !important; }
  .admin-theme .staging-action-record-panel:not(.staging-action-record-page) .staging-action-record-form-actions { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-theme *, .admin-theme *::before, .admin-theme *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* top-navigation.css */
/* Direct navigation entries share the same geometry at every width. */
html:has(body.admin-theme), body.admin-theme { overflow-x: clip; }
.admin-theme .app-shell { display: block; overflow-x: clip; overflow-y: visible; }
.admin-theme .main { width: 100%; grid-column: auto; min-height: calc(100vh - 80px); }
.admin-theme .top-navigation {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 20px;
  width: 100%; padding: 12px 24px;
  border-bottom: 1px solid var(--line); background: #fff;
}
.admin-theme .top-navigation .brand { display: flex; flex: 0 0 auto; padding: 0; }
.admin-theme .top-navigation .brand > div { display: block; }
.admin-theme .top-navigation .brand-mark { display: block; position: relative; overflow: hidden; flex-shrink: 0; }
.admin-theme .top-navigation .nav-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: stretch; flex: 1; gap: 4px; min-width: 0; padding: 0; overflow: visible;
}
.admin-theme .top-navigation .nav-group,
.admin-theme .top-navigation .nav-sublist { display: contents; }
.admin-theme .top-navigation .nav-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  width: 100%; min-width: 0; min-height: 38px; height: 38px; margin: 0; padding: 8px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; box-shadow: none; color: #4c6077;
  font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  cursor: pointer; transition: background .16s ease, color .16s ease;
}
.admin-theme .top-navigation .nav-item > small { display: none; }
.admin-theme .top-navigation .nav-item:hover { background: #f5f8fb; transform: none; }
.admin-theme .top-navigation .nav-item.active { color: #275e83; border-color: #dfedf6; background: var(--blue-soft); }
.admin-theme .top-navigation .nav-icon { width: 16px; height: 16px; flex-shrink: 0; }
.admin-theme .top-navigation .nav-notification-badge { position: static; flex: 0 0 auto; margin-left: 1px; }
.admin-theme .topbar { position: static; }
@media (max-width: 1240px) {
  .admin-theme .top-navigation { gap: 8px; flex-wrap: wrap; }
  .admin-theme .top-navigation .nav-list { flex-basis: 100%; }
}
@media (max-width: 720px) {
  .admin-theme .top-navigation { position: static; padding: 10px 12px; }
  .admin-theme .top-navigation .brand-name { font-size: 14px; }
  .admin-theme .top-navigation .brand-subtitle { font-size: 8px; }
  .admin-theme .top-navigation .brand-mark { height: 34px; width: 32px; }
  .admin-theme .top-navigation .nav-list { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 2px; }
  .admin-theme .top-navigation .nav-item { font-size: 11px; min-height: 36px; height: 36px; padding: 6px; gap: 5px; }
  .admin-theme .top-navigation .nav-icon { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) { .admin-theme .top-navigation * { transition: none; } }

/* admin-order-theme.css */
/* Membership-style finish for the ONE shared order table. No fields are hidden,
   reordered or replaced. Tracks still come from order-table-layout.js. */
.admin-theme :is(.today-flow-card, .tomorrow-plan-panel, .orders-panel) {
  border: 1px solid #e5ebf2;
  background: #fff;
  box-shadow: 0 7px 26px #233e6407;
}
.admin-theme :is(.today-flow-head, .orders-panel > .panel-head) {
  padding: 24px 24px 21px;
  border-bottom: 0;
}
.admin-theme .today-flow-title-row { gap: 12px; }
.admin-theme .today-flow-title-row h2 { flex-shrink: 0; }
.admin-theme .today-flow-summary-inline {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #52677e;
  font-size: 12px;
  font-weight: 500;
}
.admin-theme .today-flow-head > span { min-width: 0; padding: 5px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.admin-theme .today-flow-head p { margin-top: 7px; }
.admin-theme .workbench-head-actions { gap: 9px; }
.admin-theme .workbench-head-actions .ghost-button { min-height: 34px; padding: 8px 12px; font-size: 12px; }
.admin-theme .order-table-wrap,
.admin-theme #ordersWorkspace .table-wrap {
  width: calc(100% - 48px);
  max-width: calc(100% - 48px);
  margin: 0 24px 22px;
  border: 0;
  border-radius: 7px;
}
.admin-theme #ordersWorkspace .order-grid-row,
.admin-theme .order-table-wrap .order-grid-row {
  column-gap: 0;
  background: #fff;
}
.admin-theme #ordersWorkspace .order-grid-head,
.admin-theme .order-table-wrap .order-grid-head {
  border-bottom: 0;
  background: #f6f8fb;
}
.admin-theme #ordersWorkspace .order-grid-body,
.admin-theme .order-table-wrap .order-grid-body {
  background: #edf1f5;
  row-gap: 1px;
}
.admin-theme #ordersWorkspace .order-grid-cell,
.admin-theme .order-table-wrap .order-grid-cell {
  padding: 22px 12px;
  align-content: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #243347;
  text-align: left;
}
.admin-theme #ordersWorkspace .order-grid-body-cell,
.admin-theme .order-table-wrap .order-grid-body-cell { min-height: 76px; }
.admin-theme #ordersWorkspace .order-grid-header-cell,
.admin-theme .order-table-wrap .order-grid-header-cell {
  min-height: 46px;
  padding: 13px 12px;
  background: #f6f8fb;
  border: 0;
  color: #4c6077;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  box-shadow: none;
}
.admin-theme #ordersWorkspace .order-grid-header-cell.is-filterable { min-height: 76px; }
.admin-theme #ordersWorkspace .order-grid-header-cell .table-sort-button,
.admin-theme .order-table-wrap .order-grid-header-cell .table-sort-button {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.admin-theme .table-sort-button em:empty { display: none; }
.admin-theme .table-sort-button span { text-align: left; }
.admin-theme .order-grid-header-cell .order-table-heading { font-weight: 600; }
.admin-theme #ordersWorkspace .order-grid-header-cell .order-header-filter {
  height: 27px;
  margin-top: 5px;
  padding-left: 7px;
  border: 1px solid #e7edf3;
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
  font-weight: 500;
  color: #52677e;
}
.admin-theme #ordersWorkspace .order-grid-cell .cell-main,
.admin-theme .order-table-wrap .order-grid-cell .cell-main { color: #243347; font-size: 13px; font-weight: 500; line-height: 1.5; }
.admin-theme #ordersWorkspace .order-grid-cell[data-order-column="customer"] .cell-main,
.admin-theme .order-table-wrap .order-grid-cell[data-order-column="customer"] .cell-main { font-weight: 600; color: #243347; }
.admin-theme .order-grid-cell .cell-sub { font-size: 11px; font-weight: 500; color: #52677e; margin-top: 5px; }
.admin-theme #ordersWorkspace .order-grid-cell[data-order-column="customerType"] .customer-type-chip,
.admin-theme .order-table-wrap .order-grid-cell[data-order-column="customerType"] .customer-type-chip {
  min-height: 0;
  padding: 5px 7px;
  border: 0;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.admin-theme .order-table-wrap .status-chip { border: 0; padding: 5px 7px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1.4; }
.admin-theme .order-grid-cell .status-chip:not(.done):not(.info):not(.cancel):not(.warn):not([class*="order-status-"]) { color: #98455f; }
.admin-theme .order-grid-cell .status-chip.done,
.admin-theme .order-grid-cell .customer-type-trial { color: #2c6489; }
/* Order lifecycle colors are shared by the order list and workbench tables. */
.admin-theme .order-grid-cell[data-order-column="status"] .order-status-completed { color: #166534; background: #dcfce7; }
.admin-theme .order-grid-cell[data-order-column="status"] .order-status-locked { color: #1e40af; background: #dbeafe; }
.admin-theme .order-grid-cell[data-order-column="status"] .order-status-deposit { color: #9a3412; background: #ffedd5; }
.admin-theme .order-grid-cell[data-order-column="status"] .order-status-balance { color: #6b21a8; background: #f3e8ff; }
.admin-theme .order-grid-cell[data-order-column="status"] .order-status-abnormal { color: #b42318; background: #fee4e2; }
.admin-theme .order-grid-cell[data-order-column="status"] .order-status-cancelled { color: #475569; background: #e2e8f0; }
.admin-theme .order-grid-cell .customer-type-member { color: #98455f; }
.admin-theme .order-grid-cell:is([data-order-column="total"], [data-order-column="deposit"], [data-order-column="finalPayment"], [data-order-column="settlementTotal"], [data-order-column="stagingFee"], [data-order-column="extraPaid"], [data-order-column="overtimeFee"]) { font-variant-numeric: tabular-nums; }
.admin-theme .order-staging-linked { border: 1px solid transparent; background: transparent; box-shadow: none; padding: 0; gap: 9px; }
.admin-theme .order-staging-linked:hover { background: #f2f7fb; border-color: #dbe8f1; box-shadow: none; }
.admin-theme .order-staging-linked .order-staging-linked-name { font-weight: 600; line-height: 1.5; }
.admin-theme .order-staging-linked-count { color: #52677e; background: #f2f6fa; font-weight: 600; border-radius: 4px; }
.admin-theme .order-table-wrap .order-staging-preview-empty { font-weight: 500; color: #52677e; }
.admin-theme .order-table-wrap .settlement-pending { font-size: 11px; line-height: 1.5; color: #52677e; font-weight: 500; }
.admin-theme #ordersWorkspace .order-grid-row:not(.order-abnormal-row):hover .order-grid-body-cell:not(.is-active-cell):not(.is-editing),
.admin-theme .order-table-wrap .order-grid-row:not(.order-abnormal-row):hover .order-grid-body-cell:not(.is-active-cell):not(.is-editing) { background: #f8fbfd; }
.admin-theme .orders-panel .table-status-row { margin: 0 24px 14px; padding: 11px 12px; border: 0; border-radius: 7px; background: #f7f9fc; font-size: 12px; }
.admin-theme .orders-panel .order-amount-guidance { margin: 0 24px 18px; padding: 11px 13px; border: 0; border-radius: 7px; font-size: 12px; color: #52677e; background: #f8fafc; }
.admin-theme .order-month-filter, .admin-theme #ordersWorkspace .order-exact-date-filter { font-weight: 500; border-color: #e1e9f1; background: #fff; }
/* Fit every desktop column to the actual panel width. Reuse the shared weighted
   track emitted by order-table-layout.js; never clip overflow to fake a fit. */
@media (min-width: 721px) {
  .admin-theme .order-table-wrap,
  .admin-theme #ordersWorkspace .table-wrap { container: order-table / inline-size; }
  .admin-theme #ordersWorkspace .order-grid-table,
  .admin-theme .order-table-wrap .order-grid-table,
  .admin-theme #ordersWorkspace .order-grid-row,
  .admin-theme .order-table-wrap .order-grid-row {
    width: 100% !important;
    min-width: 0 !important;
  }
  .admin-theme #ordersWorkspace .order-grid-row,
  .admin-theme .order-table-wrap .order-grid-row {
    grid-template-columns: var(--order-grid-fit-template) !important;
  }
  .admin-theme #ordersWorkspace .order-grid-cell,
  .admin-theme .order-table-wrap .order-grid-cell {
    padding-inline: clamp(3px, .35cqw, 10px);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .admin-theme #ordersWorkspace .order-grid-cell .cell-main,
  .admin-theme .order-table-wrap .order-grid-cell .cell-main {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .admin-theme #ordersWorkspace .order-grid-cell :is(.status-chip, .customer-type-chip),
  .admin-theme .order-table-wrap .order-grid-cell :is(.status-chip, .customer-type-chip) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    padding-inline: 3px;
  }
  .admin-theme .table-sort-button span { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .admin-theme #ordersWorkspace .order-grid-header-cell .order-header-filter { padding-inline: 2px; max-width: 100%; }
  .admin-theme .order-remark-cell-preview { flex-wrap: wrap; }
}
@container order-table (max-width: 1600px) {
  .admin-theme .order-staging-linked { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 5px; }
  .admin-theme .order-staging-linked > .order-staging-linked-thumb,
  .admin-theme .order-staging-linked > .admin-image-loading-frame.order-staging-linked-thumb { width: 28px; min-width: 0; height: 38px; min-height: 0; max-width: 100%; }
  .admin-theme .order-staging-linked-main { text-align: center; }
  .admin-theme .order-staging-linked-count { right: 0; top: 0; bottom: auto; }
}
/* Reuse header whitespace so the larger labels still fit beside the actions. */
@media (min-width: 721px) and (max-width: 1000px) {
  .admin-theme .today-flow-title-row { gap: 8px; }
  .admin-theme .workbench-head-actions { gap: 7px; }
  .admin-theme .workbench-head-actions .ghost-button { padding-inline: 8px; }
}
@media(max-width:720px) {
  .admin-theme .order-table-wrap, .admin-theme #ordersWorkspace .table-wrap { width: calc(100% - 24px); max-width: calc(100% - 24px); margin: 0 12px 15px; }
  .admin-theme :is(.today-flow-head, .orders-panel > .panel-head) { padding: 20px 12px 17px; }
  .admin-theme .today-flow-title-row { gap: 9px; flex-wrap: wrap; }
  .admin-theme .orders-panel .table-status-row, .admin-theme .orders-panel .order-amount-guidance { margin-left: 12px; margin-right: 12px; }
}

/* content-visual-workspace.css */
/* Embedded navigation workspace. The existing editor owns fields and saving. */
.visual-workspace-loading { padding: 42px 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--text); }
.visual-workspace-loading strong { font-size: 16px; font-weight: 600; }
.visual-workspace-loading p { margin: 12px 0 20px; font-size: 12px; color: var(--muted); }
.content-visual-embedded[open] {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 100%;
  height: max(720px, calc(100dvh - 190px));
  max-height: none;
  margin: 0;
  border: 1px solid #e5ebf2;
  border-radius: 14px;
  box-shadow: 0 7px 26px #233e6407;
  --cv-ink: #243347;
  --cv-muted: #697b90;
  --cv-line: #e5ebf2;
  --cv-accent: #397daa;
}
.content-visual-embedded .cv-header { padding: 18px 22px; }
.content-visual-embedded .cv-header h2 { font-size: 17px; font-weight: 600; }
.content-visual-embedded .cv-eyebrow { font-size: 10px; letter-spacing: 1px; }
.content-visual-embedded .cv-body { grid-template-columns: 168px minmax(290px, 1fr) minmax(260px, 320px); }
.content-visual-embedded .cv-pages button { border-radius: 8px; transition: background .16s ease, border-color .16s ease; }
.content-visual-embedded .cv-pages button[aria-current="true"] { background: #edf6fc; border-color: #dfedf6; }
.content-visual-embedded .cv-pages button b { font-size: 12px; }
.content-visual-embedded .cv-canvas { background: radial-gradient(#dce5ee 1px, transparent 1px), #f7f9fc; background-size: 16px 16px; }
.content-visual-embedded .cv-phone-frame { border: 5px solid #fff; outline: 1px solid #dfe6ee; padding: 0; box-shadow: 0 14px 35px #31496110; }
.content-visual-embedded .cv-phone-scroll { border-radius: 24px; }
.content-visual-embedded .cv-field :focus-visible, .content-visual-embedded .cv-inspector-heading select:focus-visible, .content-visual-embedded button:focus-visible { outline-color: #83b9db; border-color: #83b9db; }
.content-visual-embedded .cv-check input { accent-color: #397daa; }
.content-visual-embedded .cv-upload { background: #f8fbfd; }
@media (max-width: 1250px) and (min-width: 851px) {
  .content-visual-embedded .cv-body { grid-template-columns: minmax(300px, 1fr) minmax(260px, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .content-visual-embedded .cv-pages { grid-column: 1 / -1; display: flex; padding: 8px 12px; gap: 6px; border: 0; border-bottom: 1px solid var(--cv-line); }
  .content-visual-embedded .cv-pages button { margin: 0; padding: 9px; grid-template-columns: 1fr; }
  .content-visual-embedded .cv-pages p, .content-visual-embedded .cv-pages small, .content-visual-embedded .cv-pages button > span { display: none; }
}
@media (max-width: 850px) {
  .content-visual-embedded .cv-body { grid-template-columns: minmax(290px, 1fr) minmax(260px, 1fr); }
}
@media (max-width: 600px) {
  .content-visual-embedded[open] { height: auto; }
  .content-visual-embedded .cv-header { padding: 14px 12px; flex-wrap: wrap; }
  .content-visual-embedded .cv-header h2 { font-size: 16px; }
  .content-visual-embedded .cv-body { overflow: visible; }
  .content-visual-embedded .cv-pages button { min-width: 0; }
  .content-visual-embedded .cv-footer { flex-wrap: wrap; }
}

/* activity-manager.css */
.activity-manager-mode { --cv-ink:var(--text); --cv-muted:var(--muted); --cv-line:var(--line); --cv-accent:var(--pink-strong); }
.activity-manager-mode .cv-body { grid-template-columns: 240px minmax(300px, 1fr) minmax(340px, 420px); grid-template-rows: minmax(0, 1fr); }
.activity-manager-mode .cv-pages { display: block; grid-column: auto; padding: 20px 14px; }
.activity-manager-mode .cv-pages button { display: block; white-space: normal; }
.activity-manager-mode .cv-pages h3 { margin: 0 0 12px; }
.activity-manager-mode .cv-pages p { display: block; margin: 12px 0; font-size: 12px; line-height: 1.7; }
.activity-manager-mode .cv-pages > .primary-button { width: 100%; margin: 12px 0; }
.activity-manager-mode [data-cv-section], .activity-manager-mode [data-cv-action="skins"], .activity-manager-mode [data-cv-action="history"], .activity-manager-mode [data-cv-action="manage-records"], .activity-manager-mode [data-cv-field-wrap="category"] { display: none; }
.activity-manager-mode .cv-inspector { max-width: none; }
.activity-manager-mode .cv-inspector [data-cv-field-wrap="description"] textarea { min-height: 150px; }
.activity-manager-mode .am-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.activity-manager-mode .am-filters button { margin: 0; padding: 8px; font-size: 12px; white-space: nowrap; }
.activity-manager-mode .am-list button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: left; }
.activity-manager-mode .am-list b { font-size: 14px; white-space: normal; }
.activity-manager-mode .am-list span { display: block; grid-row: auto; font-size: 12px; color: var(--muted); }
.activity-manager-mode .am-list small { display: block; grid-column: 1; font-size: 11px; }
.activity-manager-mode .am-list button[aria-pressed="true"], .activity-manager-mode .am-filters button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
.activity-manager-mode .am-categories, .activity-manager-mode .am-preview-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.activity-manager-mode .am-categories button, .activity-manager-mode .am-preview-toggle button { margin: 0; padding: 8px 4px; font-size: 12px; }
.activity-manager-mode .am-categories button[aria-pressed="true"], .activity-manager-mode .am-preview-toggle button[aria-pressed="true"] { background: var(--pink-soft); border-color: var(--pink); color: var(--pink-strong); }
.activity-manager-mode .am-thumbnail { width: 100%; aspect-ratio: 3 / 2; background: var(--surface-soft); border-radius: 8px; display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: 12px; }
.activity-manager-mode .am-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.activity-manager-mode .cv-header { padding: 12px 18px; }
.activity-manager-mode .cv-eyebrow { display: none; }
.activity-manager-mode .cv-header h2 { margin: 0; font-size: 16px; }
.activity-manager-mode .cv-receipt { padding: 8px 18px; }
.activity-manager-mode .cv-inspector-heading { padding: 12px 18px; gap: 5px; }
.activity-manager-mode .am-current-name { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.activity-manager-mode .cv-field-group { padding-top: 18px; }
.activity-manager-mode .cv-field-group > h3 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--cv-line); color: var(--cv-ink); font-size: 13px; font-weight: 600; }
.activity-manager-mode .cv-field { padding: 12px 0; }
.activity-manager-mode .cv-field-label { font-size: 13px; }
.activity-manager-mode .cv-field small { font-size: 11px; }
.activity-manager-mode .cv-canvas-caption b { display: none; }
body:has(#activityManagerPanel:not(.hidden)) .topbar { min-height: 82px; padding: 14px 0 16px; margin-bottom: 16px; }
body:has(#activityManagerPanel:not(.hidden)) .topbar .page-eyebrow { display: none; }
@media (max-width: 1100px) { .activity-manager-mode .cv-body { grid-template-columns: 200px minmax(300px, 1fr); } .activity-manager-mode .cv-canvas { display: none; } }
@media (max-width: 640px) { .activity-manager-mode .cv-body { display: block; } .activity-manager-mode .cv-pages { max-height: 260px; overflow: auto; } }

.activity-manager-mode .am-filters button, .activity-manager-mode .am-categories button, .activity-manager-mode .am-preview-toggle button { min-height:36px; border-radius:var(--radius-control); }
.activity-manager-mode .am-filters button[aria-pressed="true"], .activity-manager-mode .am-categories button[aria-pressed="true"], .activity-manager-mode .am-preview-toggle button[aria-pressed="true"] { font-weight:600; box-shadow:inset 0 -2px currentColor; }
.activity-manager-mode :is(button, input, textarea, select):focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.activity-manager-mode .cv-receipt[data-state="error"] { color:var(--red); background:var(--red-soft); }
.activity-manager-mode .cv-receipt[data-state="success"] { color:var(--green); background:var(--green-soft); }
.activity-manager-mode .cv-receipt[data-state="pending"] { color:var(--amber); background:var(--amber-soft); }

/* schedule-workspace.css */
/* Daily schedule: one working surface, consistent with the administration shell. */
.schedule-workspace { padding:20px; border-radius:14px; background:#fff; }
.schedule-workspace .panel-head { margin:0 0 12px; padding:0; border:0; }
.schedule-workspace .panel-head h2 { font-size:19px; font-weight:650; }
.schedule-workspace .panel-head p { margin:5px 0 0; color:#5e7187; font-size:12px; }
.schedule-view-controls { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; }
.schedule-view-controls > div { display:flex; padding:3px; gap:3px; border-radius:9px; background:#eef3f8; }
.schedule-view-controls button { min-height:30px; padding:5px 14px; border:0; border-radius:7px; background:transparent; color:#566c82; font-size:12px; font-weight:600; }
.schedule-view-controls button[aria-pressed=true] { background:#fff; color:#2a648b; box-shadow:0 1px 3px #22334415; }
.schedule-workspace #scheduleDateFilter { width:156px; min-width:156px; }
.schedule-workspace .schedule-toolbar { margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid #e6edf4; }
.schedule-workspace .schedule-legend-row { border:0; background:transparent; padding:0; margin-bottom:10px; gap:14px; }
.schedule-workspace .schedule-legend-row span { font-size:11px; font-weight:500; color:#52677d; }
.schedule-workspace .schedule-matrix-wrap { max-height:var(--schedule-available-height); overflow:auto; border-color:#e1e9f2; border-radius:10px; }
.schedule-workspace .schedule-matrix th,.schedule-workspace .schedule-matrix td { box-sizing:border-box; height:var(--schedule-row-height); padding:0; border-color:#e9eef4; }
.schedule-workspace .schedule-matrix thead th { height:32px; padding:4px; font-size:11px; font-weight:600; background:#f3f7fb; }
.schedule-workspace .schedule-matrix .time-col { width:58px; min-width:58px; font-size:11px; font-weight:500; }
.schedule-workspace .schedule-matrix tbody td:hover,.schedule-workspace .schedule-matrix tbody td:focus-within { transform:scale(1.015); box-shadow:inset 0 0 0 2px #6fa9d8; }
.schedule-workspace .schedule-empty-actions,.schedule-workspace .schedule-empty,.schedule-workspace .schedule-block,.schedule-workspace .schedule-continuation { height:var(--schedule-row-height); min-height:0; margin:0; padding:0 4px; border-radius:0; line-height:1; font-size:11px; }
.schedule-workspace .schedule-block-label { font-size:11px; line-height:1; }
.schedule-workspace.is-day-overview .schedule-continuation .schedule-block-label { visibility:hidden; }
.schedule-workspace.is-day-overview .schedule-continuation:focus .schedule-block-label,.schedule-workspace.is-day-overview .schedule-continuation:hover .schedule-block-label { visibility:visible; }
.schedule-workspace .schedule-empty-buttons { display:none; }
.schedule-workspace .schedule-control-drawer { margin-top:10px; }
.schedule-workspace .schedule-control-drawer summary { color:#506980; font-size:12px; }
.schedule-workspace.is-expanded { position:fixed; inset:16px; z-index:70; overflow:auto; box-shadow:0 0 0 100vmax #23354955; }
.schedule-page-grid .schedule-calendar,.schedule-page-grid .schedule-summary-table { font-size:12px; }
.schedule-page-grid .schedule-day { border-radius:9px; box-shadow:none; }
@media (max-width:760px) {
  .schedule-workspace { padding:12px; }
  .schedule-workspace .schedule-matrix { min-width:900px; }
  .schedule-workspace.is-expanded { inset:6px; }
  .schedule-workspace .panel-head { align-items:flex-start; }
}

.schedule-workspace .schedule-matrix tbody th { line-height:1; }
.schedule-workspace .schedule-matrix td { line-height:1; }

.schedule-workspace .panel-head { flex-wrap:wrap; gap:10px 18px; }
.schedule-workspace .panel-head > div:first-child { flex:1; }
.schedule-workspace .schedule-view-controls { margin:0; align-items:center; }
.schedule-workspace.is-day-overview td > [data-schedule-order-id] ~ [data-schedule-order-id] { display:none; }
.schedule-workspace .schedule-stack-note { min-height:0; height:14px; top:1px; right:1px; background:#fff; border-radius:3px; }
.admin-theme .main:has(.schedule-workspace) .topbar { min-height:100px; padding:16px 0; }

/* customer-analytics.css */
.ca-tabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.ca-tabs button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 7px; min-height: 36px; padding: 8px 18px; font: inherit; cursor: pointer; }
.ca-tabs button[aria-selected="true"] { background: var(--blue-soft, #eaf5fd); color: var(--text); font-weight: 600; }
.customer-analytics { color: var(--text); }
.customer-analytics[hidden], [data-ca-monthly][hidden] { display: none; }
.customer-analytics label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.customer-analytics input { min-height: 36px; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font: inherit; color: var(--text); background: var(--surface); min-width: 0; max-width: 100%; }
.ca-toolbar, .ca-filters, .ca-pagination { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.ca-toolbar { margin-bottom: 16px; }
.ca-feedback { font-size: 12px; color: var(--muted); padding: 9px 0; }
.ca-feedback[role="alert"] { color: #9e3049; }
.ca-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.ca-metrics > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.ca-metrics span { display: block; font-size: 12px; color: var(--muted); }
.ca-metrics strong { display: block; font-size: 25px; margin-top: 8px; }
.ca-filters { margin-bottom: 12px; }
.ca-filters > span { padding: 9px 0; color: var(--muted); font-size: 12px; }
.ca-search { flex: 1; min-width: 160px; max-width: 300px; }
.ca-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.customer-analytics table { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 13px; }
.customer-analytics th, .customer-analytics td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.customer-analytics th { color: var(--muted); font-size: 12px; font-weight: 500; }
.customer-analytics td b { font-weight: 500; }
.customer-analytics td small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.ca-tag { display: inline-block; margin: 3px 5px 3px 0; padding: 4px 7px; border-radius: 7px; background: var(--blue-soft, #eaf5fd); white-space: nowrap; }
.ca-muted, .ca-basis, .ca-coverage { color: var(--muted); }
.ca-basis, .ca-coverage { font-size: 12px; line-height: 1.7; }
.ca-coverage summary { cursor: pointer; }
.ca-pagination { justify-content: flex-end; align-items: center; margin-top: 12px; font-size: 12px; }
.ca-empty { text-align: center !important; padding: 32px !important; color: var(--muted); }
@media (max-width: 900px) { .ca-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ca-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ca-filters label { flex: 1; min-width: 120px; } .ca-search { max-width: none; } .ca-metrics > div { padding: 12px; } }

.ca-filter-group { flex-basis: 100%; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 12px; }
.ca-filter-group > span { color: var(--muted); font-size: 12px; padding-top: 10px; }
.ca-filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-filter-options button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; }
.ca-filter-options button[aria-pressed="true"] { background: var(--blue-soft, #eaf5fd); border-color: var(--blue, #598da7); font-weight: 600; }
.ca-filter-options button:hover { border-color: var(--blue, #598da7); }
.ca-filter-options button:focus-visible { outline: 2px solid var(--blue, #598da7); outline-offset: 2px; }
@media (max-width: 520px) { .ca-filter-group { grid-template-columns: minmax(0, 1fr); gap: 7px; } .ca-filter-group > span { padding-top: 0; } }

/* ui-component-contract.css */
/* Shared controls approved with the 2026-10-25 native A candidate.
   Operational colors stay blue/white; table density and navigation are unchanged. */
.admin-theme {
  --radius-control: 7px;
  --radius-card: 14px;
}

.admin-theme button {
  box-sizing: border-box;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, transform 100ms ease-out;
}

.admin-theme button:not(.nav-button):not(.icon-button):not(:disabled):active {
  transform: scale(.985);
}

.admin-theme .primary-button,
.admin-theme .ghost-button,
.admin-theme .danger-button {
  min-height: 36px;
  height: 36px;
  padding: 7px 16px;
  line-height: 20px;
  font-size: 14px;
  border-radius: 7px;
  font-weight: 500;
  box-shadow: none;
}

.admin-theme .primary-button {
  background: #2e6d88;
  border: 1px solid #2e6d88;
  color: #fff;
}

.admin-theme .ghost-button {
  background: #fff;
  border: 1px solid #cfdde4;
  color: #294857;
}

.admin-theme .compact {
  height: 32px;
  min-height: 32px;
  padding: 5px 12px;
  font-size: 13px;
}

.admin-theme .inline-actions .primary-button,
.admin-theme .inline-actions .ghost-button {
  height: 36px;
  min-height: 36px;
  padding: 7px 16px;
  font-size: 14px;
}

.admin-theme button:focus-visible,
.admin-theme input:focus-visible,
.admin-theme select:focus-visible,
.admin-theme textarea:focus-visible {
  outline: 2px solid #2e6d88;
  outline-offset: 3px;
}

.admin-theme input,
.admin-theme select,
.admin-theme textarea {
  border-radius: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-theme *, .admin-theme *::before, .admin-theme *::after {
    animation: none !important;
    transition: none !important;
  }
}