:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #17213a;
  background: #f5f7fb;
  --navy-950: #0b1020;
  --navy-900: #111a35;
  --navy-800: #1e2d55;
  --blue-800: #1e3a8a;
  --blue-700: #274db3;
  --blue-100: #eaf1ff;
  --cyan-400: #58d8eb;
  --cyan-300: #8ee7f2;
  --text: #17213a;
  --muted: #65758f;
  --line: #dce5f2;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --success: #137a55;
  --success-bg: #daf7e8;
  --warning: #9a6311;
  --warning-bg: #fff0cb;
  --danger: #ba2d2d;
  --danger-bg: #fde9e8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { min-width: 320px; margin: 0; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button {
  display: inline-flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid var(--blue-700);
  border-radius: 10px;
  background: var(--blue-700);
  color: #fff;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
button:hover:not(:disabled) { border-color: var(--blue-800); background: var(--blue-800); }
button:disabled { cursor: not-allowed; opacity: .48; }
button.secondary {
  border-color: #cfe0fb;
  background: #eef5ff;
  color: var(--blue-800);
}
button.secondary:hover:not(:disabled) { border-color: #b8d3fb; background: #e0edff; }
button.primary { background: var(--blue-700); }
button.danger { border-color: var(--danger); background: var(--danger); }
button.success { border-color: var(--success); background: var(--success); }
button.link-button {
  min-height: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--blue-800);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.link-button:hover:not(:disabled) { background: transparent; color: var(--blue-700); }
button.compact { min-height: 0; padding: 4px 8px; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid rgb(88 216 235 / 54%);
  outline-offset: 2px;
}

input, select, textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid #cbd9eb;
  border-radius: 7px;
  padding: 6px 9px;
  background: #fff;
  color: var(--text);
}
input::placeholder { color: #91a0b8; }
textarea { resize: vertical; }

.portal-shell { min-height: 100vh; }
.login-panel {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 72% 18%, rgb(88 216 235 / 20%), transparent 27%), linear-gradient(135deg, var(--navy-950), var(--navy-900));
}
.login-system-status {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgb(174 207 255 / 28%);
  border-radius: 999px;
  background: rgb(255 255 255 / 10%);
  box-shadow: 0 10px 28px rgb(3 10 27 / 20%);
  color: #dce8fb;
  font-size: 13px;
  line-height: 1;
  backdrop-filter: blur(12px);
}
.login-system-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #91a0b8;
  box-shadow: 0 0 0 4px rgb(145 160 184 / 13%);
}
.login-system-status-label { color: #b9c8df; }
.login-system-status-value { color: #f7fbff; font-weight: 800; }
.login-system-status.online .login-system-status-dot { background: #56d59a; box-shadow: 0 0 0 4px rgb(86 213 154 / 14%); }
.login-system-status.offline .login-system-status-dot { background: #f29b91; box-shadow: 0 0 0 4px rgb(242 155 145 / 14%); }
.login-system-status.checking .login-system-status-dot { animation: login-status-pulse 1.2s ease-in-out infinite; }
@keyframes login-status-pulse { 50% { opacity: .45; } }
.login-form {
  width: min(100%, 388px);
  padding: 32px;
  border: 1px solid rgb(174 207 255 / 35%);
  border-radius: 16px;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 22px 56px rgb(3 10 27 / 42%);
}
@media (max-width: 560px) {
  .login-system-status { top: 14px; right: 14px; }
  .login-system-status-label { display: none; }
}
.login-form h1, .topbar h1, .brand-block h1 { margin: 3px 0 8px; font-size: 26px; line-height: 1.25; }
.login-form label, .toolbar label { display: grid; gap: 5px; color: #465774; font-size: 13px; font-weight: 700; }
.login-form label { margin-top: 16px; }
.login-form button { margin-top: 20px; }
.login-form .login-submit {
  width: 100%;
  min-height: 40px;
  gap: 8px;
}
.login-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgb(255 255 255 / 42%);
  border-top-color: #fff;
  border-radius: 50%;
}
.login-submit.is-loading .login-submit-spinner {
  display: inline-block;
  animation: login-button-spin .72s linear infinite;
}
@keyframes login-button-spin { to { transform: rotate(360deg); } }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 44px; }
.login-form .password-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 32px;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 4px;
  transform: translateY(-50%);
  border-color: transparent;
  background: transparent;
  color: var(--blue-800);
}
.login-form .password-toggle:hover:not(:disabled) { border-color: #cfe0fb; background: #eef5ff; }
.password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.eyebrow { margin: 0; color: var(--blue-700); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.muted, small { color: var(--muted); font-size: 13px; }
.form-error, .notice {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid #f2c8c5;
  border-radius: 10px;
  background: var(--danger-bg);
  color: #8d2f2f;
  font-size: 14px;
}

.app-shell { min-height: 100vh; background: #fff; }
.workspace { min-width: 0; min-height: 100vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.topbar {
  position: relative;
  display: grid;
  height: 128px;
  min-height: 128px;
  margin: 10px 12px 0;
  padding: 18px 32px;
  overflow: hidden;
  border: 1px solid #dce9e5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgb(18 69 62 / 4%);
}
.topbar::before {
  position: absolute;
  z-index: 0;
  width: 78%;
  height: 310%;
  top: -205%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, transparent 0 53%, rgb(226 246 242 / 76%) 54% 60%, transparent 61%);
  content: '';
  pointer-events: none;
}
.topbar::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse at 86% 6%, rgb(233 248 245 / 82%), transparent 39%);
  content: '';
  pointer-events: none;
}
.topbar-upper { position: relative; z-index: 1; display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; align-items: center; gap: 24px; }
.topbar-main { min-width: 0; }
.topbar .eyebrow { display: none; }
.topbar h1 { margin: 0; color: #087e73; font-size: 30px; letter-spacing: -.04em; }
.app-version { display: none; }
.production-flow { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 24px; margin: 0; padding: 0; color: #284e48; list-style: none; }
.production-flow-step { display: grid; min-width: 0; justify-items: center; gap: 8px; color: #173d37; font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.production-flow-step i { width: 8px; height: 8px; border-radius: 50%; background: #008b7d; box-shadow: 0 0 0 4px rgb(0 139 125 / 8%); }
.production-flow-arrow { display: grid; width: 20px; place-items: center; color: #76928d; font-size: 20px; font-weight: 400; line-height: 1; transform: translateY(-8px); }
.workflow-status-panel { min-width: 0; padding: 30px 34px 0; background: #fff; }
.workflow-statuses { display: flex; min-width: 0; overflow-x: auto; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 20px; margin: 0; padding: 0 0 4px; }
.workflow-status {
  --status-dot: #008b7d;
  --status-border: #d7e7e3;
  --status-text: #31534d;
  display: flex;
  flex: 0 0 auto;
  width: auto;
  height: 54px;
  max-width: none;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  margin: 0;
  min-width: 0;
  min-height: 0;
  justify-content: flex-start;
  padding: 4px 12px;
  border-color: var(--status-border);
  background: #fff;
  color: var(--status-text);
  box-shadow: 0 1px 2px rgb(18 69 62 / 4%);
  text-align: left;
  white-space: nowrap;
}
.workflow-status:is([data-portal-stage="layout_ready"], [data-portal-stage="laying_out"], [data-portal-stage="laid_out"]) {
  --status-dot: #7153a2;
}
.workflow-status:is([data-portal-stage="completed"], [data-portal-stage="import_failed"], [data-portal-stage="needs_handling"]) {
  --status-dot: #e06d59;
}
.workflow-status:is([data-portal-stage="imported"], [data-portal-stage="producible"], [data-portal-stage="completed"]) {
  --status-dot: #008b7d;
}
.workflow-status[data-portal-stage="unproduced"] { --status-dot: #788d91; }
.workflow-status[data-portal-stage="generating"] { --status-dot: #217fd3; }
.workflow-status[data-portal-stage="produced"] { --status-dot: #2e9d69; }
.workflow-status[data-portal-stage="layout_ready"] { --status-dot: #f2a118; }
.workflow-status[data-portal-stage="laying_out"] { --status-dot: #7456a2; }
.workflow-status[data-portal-stage="laid_out"] { --status-dot: #008b7d; }
.workflow-status[data-portal-stage="completed"] { --status-dot: #128b65; }
.workflow-status[data-portal-stage="import_failed"] { --status-dot: #e36558; }
.workflow-status[data-portal-stage="needs_handling"] { --status-dot: #e99019; }
.workflow-status-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--status-dot); }
.workflow-status strong, .workflow-status span { display: block; margin: 0; padding: 0; line-height: 1.15; white-space: nowrap; }
.workflow-status strong { color: var(--status-text); font-size: 14px; font-weight: 800; }
.workflow-status span { font-size: 14px; font-weight: 800; }
.workflow-status:hover:not(:disabled), .workflow-status.active, .workflow-status:focus-visible {
  border-color: #63b9ad;
  outline-color: #008b7d;
  background: #e7f6f2;
  color: #154c43;
  box-shadow: inset 0 0 0 1px rgb(0 139 125 / 9%);
}
.workflow-status:hover:not(:disabled) strong, .workflow-status.active strong, .workflow-status:focus-visible strong { color: #154c43; }
.account { display: grid; grid-template-columns: 48px 48px 76px 48px; align-items: start; justify-content: end; gap: 14px; color: #0b7067; font-size: 12px; font-weight: 700; white-space: nowrap; }
.account-name, .topbar-action { box-sizing: border-box; display: grid; width: 48px; min-width: 48px; min-height: 60px; grid-template-rows: 22px 15px; align-content: start; justify-items: center; gap: 7px; padding: 2px 0 0; line-height: 15px; text-align: center; }
.account-name { width: 76px; min-width: 76px; }
.account-name #user-name, .topbar-action span { display: block; max-width: 76px; overflow: hidden; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-action {
  border-color: transparent;
  background: transparent;
  color: #0b7067;
  backdrop-filter: none;
}
.topbar .icon-button { width: 48px; height: 60px; min-height: 60px; padding: 2px 0 0; font-size: 12px; }
.topbar-action:hover:not(:disabled) { border-color: transparent; background: rgb(0 139 125 / 7%); color: #008b7d; }
.topbar-action:focus-visible { border-radius: 8px; outline-color: rgb(0 139 125 / 52%); }
.topbar-action svg, .account-name svg { display: block; width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.topbar-action.is-refreshing svg { animation: refresh-spin .75s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
.portal-content { overflow: auto; padding: 22px 34px 44px; background: #fff; }
.selection-bar { display: flex; align-items: center; gap: 16px; min-height: 54px; padding: 0; color: var(--muted); font-size: 14px; }
.selection-bar > #selection-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.selection-bar strong { color: var(--blue-800); }
.selection-file-summary { color: var(--blue-800); font-size: 13px; font-weight: 700; white-space: nowrap; }
.selection-page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.selection-page-actions button { width: auto; min-width: 0; font-size: 12px; line-height: 1.15; white-space: nowrap; }
.date-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border: 1px solid #dce9e5; border-radius: 10px; background: #fff; color: #31534d; font: inherit; white-space: nowrap; }
.date-filter svg, .toolbar-action svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.date-filter input { width: 123px; min-height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #31534d; font: inherit; }
.date-filter input:focus-visible { outline: 0; }
.date-filter:focus-within { border-color: #43a99b; box-shadow: 0 0 0 3px rgb(0 139 125 / 10%); }
.date-filter-separator { color: #55746e; }
.category-filter { display: inline-flex; min-width: 148px; min-height: 46px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #dce9e5; border-radius: 10px; background: #fff; color: #31534d; font: inherit; white-space: nowrap; }
.category-filter > span { color: #55746e; font-size: 13px; font-weight: 700; }
.category-filter select { min-width: 0; flex: 1; min-height: 34px; padding: 0 20px 0 0; border: 0; border-radius: 0; background: transparent; color: #31534d; font: inherit; }
.category-filter:focus-within { border-color: #43a99b; box-shadow: 0 0 0 3px rgb(0 139 125 / 10%); }
.toolbar-action { display: inline-flex; min-height: 46px; align-items: center; gap: 9px; padding: 4px 16px; border-radius: 10px; font-size: 14px; }
.toolbar-action.secondary { border-color: #dce9e5; background: #fff; color: #0b7067; }
.toolbar-action.secondary:hover:not(:disabled) { border-color: #8ccdc2; background: #f1faf7; }
.toolbar-action.primary { border-color: #008b7d; background: #008b7d; box-shadow: 0 7px 14px rgb(0 139 125 / 16%); }
.notice { display: flex; min-width: 0; margin: 0 0 14px; align-items: flex-start; gap: 12px; border-color: #cdddf7; background: #eff6ff; color: var(--blue-800); }
.notice-message { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.notice-close { width: 24px; height: 24px; flex: 0 0 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: currentColor; font-size: 20px; font-weight: 500; line-height: 1; opacity: .72; }
.notice-close:hover:not(:disabled) { border-color: transparent; background: rgb(15 49 95 / 8%); color: currentColor; opacity: 1; }
.notice[data-type="success"] { border-color: #b9ebd2; background: var(--success-bg); color: #106b4b; }
.notice[data-type="error"] { border-color: #f2c8c5; background: var(--danger-bg); color: #8d2f2f; }
.notice[data-type="warning"] { border-color: #f1d699; background: var(--warning-bg); color: #80500d; }

.table-region { overflow: hidden; border: 1px solid #dce9e5; border-radius: 14px; background: var(--surface); box-shadow: 0 8px 24px rgb(18 69 62 / 5%); }
.table-scroll { overflow-x: auto; }
.orders-table { width: 100%; min-width: 1100px; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.orders-table th, .orders-table td { padding: 5px 10px; border-bottom: 1px solid #e1ece9; vertical-align: top; text-align: left; }
.orders-table th:not(:last-child), .orders-table td:not(:last-child) { border-right: 1px solid #e1ece9; }
.orders-table th { padding-top: 12px; padding-bottom: 12px; }
.orders-table th { position: sticky; top: 0; z-index: 3; background: #f8fbfa; box-shadow: 0 1px 0 #e1ece9; color: #3e635d; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.orders-table th:nth-child(1) { width: 44px; }
.orders-table th:nth-child(3), .orders-table th:nth-child(5) { width: auto; }
.orders-table:not(.layout-stage-table) th:nth-child(2),
.orders-table:not(.layout-stage-table) th:nth-child(4) { width: 200px; }
.orders-table:not(.layout-stage-table) th:nth-child(6) { width: 100px; }
.orders-table:not(.layout-stage-table) th:nth-child(7) { width: 300px; }
.orders-table.layout-stage-table { width: 100%; min-width: 1671px; }
.orders-table.layout-stage-table th:nth-child(1) { width: 44px; }
.orders-table.layout-stage-table th:nth-child(2) { width: 220px; }
.orders-table.layout-stage-table th:nth-child(3) { width: 220px; }
.orders-table.layout-stage-table th:nth-child(4) { width: auto; }
.orders-table.layout-stage-table th:nth-child(6) { width: 400px; }
.orders-table.layout-stage-table th:nth-child(7) { width: 400px; }
.orders-table.layout-stage-table .order-spec-data { gap: 7px; }
.orders-table.layout-stage-table .layout-status-cell { min-width: 0; max-width: 400px; }
.orders-table.layout-stage-table .row-actions-inner { display: grid; width: max-content; max-width: 100%; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 10px; }
.orders-table.layout-stage-table .row-actions button { width: auto; min-width: 0; justify-self: start; font-size: 12px; line-height: 1.15; }
.orders-table.import-failed-table th:nth-child(5) { width: 300px; }
.orders-table.import-failed-table .media-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orders-table th:first-child, .orders-table td:first-child { padding-right: 0; padding-left: 0; }
.orders-table th:last-child, .orders-table td:last-child { padding-right: 20px; }
.orders-table th.select-column, .orders-table td.select-column { width: 44px; vertical-align: middle; text-align: center; white-space: nowrap; }
.select-all-label { display: inline-flex; width: 100%; align-items: center; justify-content: center; cursor: pointer; }
.select-all-label input, .orders-table td.select-column > input { display: inline-block; width: 16px; height: 16px; min-height: 16px; margin: 0; vertical-align: middle; }
.cell-detail-trigger { display: block; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; color: inherit; text-align: left; user-select: text; -webkit-user-select: text; }
.orders-table .order-spec-data, .orders-table .layout-status-cell, .orders-table .order-exception-reason, .orders-table .order-exception-reason-inline { user-select: text; -webkit-user-select: text; }
.cell-detail-trigger:hover:not(:disabled) { border-color: transparent; background: #f1faf7; }
.cell-detail-trigger:focus-visible { outline: 2px solid #008b7d; outline-offset: 2px; }
.order-cell b { display: block; overflow: hidden; color: var(--text); font-weight: 800; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.product-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; color: var(--text); font-weight: 800; line-height: 1.45; }
.order-cell small, .product-cell small { display: block; overflow: hidden; margin-top: 3px; text-overflow: ellipsis; white-space: nowrap; }
.orders-table small, .orders-table dt { font-size: 11px; }
.product-cell, .order-spec-cell { min-width: 0; }
.order-spec-data { display: grid; gap: 10px; margin: 0; }
.order-spec-data div { min-width: 0; }
.order-spec-data dt { line-height: 1.4; }
.order-spec-data dd { display: -webkit-box; overflow: hidden; margin: 2px 0 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #3c4d69; line-height: 1.4; }
.order-spec-data-compact { gap: 4px; }
.order-spec-data-compact div { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; gap: 4px; }
.order-spec-data-compact dt, .order-spec-data-compact dd { margin: 0; font-size: 12px; line-height: 1.35; }
.order-spec-data-compact dd { display: block; min-width: 0; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.media-frames { display: grid; width: 100%; max-width: 480px; grid-template-columns: repeat(4, minmax(36px, 1fr)); gap: 10px; justify-content: start; }
.media-frame {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}
.media-frame:hover:not(:disabled) { border-color: transparent; background: transparent; }
.media-frame:disabled { cursor: default; opacity: 1; }
.media-frame-visual { display: grid; width: 100%; aspect-ratio: 1; overflow: hidden; place-items: center; border: 1px solid #d8e7e3; border-radius: 8px; background: #fbfdfc; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.media-frame-visual > * { grid-area: 1 / 1; }
.media-frame-visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.media-frame:hover:not(:disabled) .media-frame-visual, .media-frame:focus-visible .media-frame-visual { border-color: #43a99b; background: #f1faf7; box-shadow: 0 0 0 3px rgb(0 139 125 / 10%); }
.media-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #7b9791; font-size: 9px; }
.media-frame small { overflow: hidden; margin-top: 5px; color: #55746e; font-size: 9px; line-height: 1.2; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.media-frame b { position: absolute; right: 4px; bottom: 20px; min-width: 22px; padding: 2px 4px; border-radius: 5px; background: rgb(0 126 113 / 90%); color: #fff; font-size: 9px; line-height: 1.2; text-align: center; }
.quantity-cell { color: var(--navy-800); font-weight: 800; white-space: nowrap; }
.status { display: inline-flex; width: auto; height: auto; min-width: 0; min-height: 0; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 10px; font-size: 11px; font-weight: 800; line-height: 1.25; text-align: center; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.status-imported { color: #58667c; background: #edf1f7; }
.status-generating { color: #8a5b09; background: var(--warning-bg); }
.status-produced { color: #245a92; background: #e2efff; }
.status-layout_ready { color: #5a468c; background: #eee9ff; }
.status-waiting { color: #58667c; background: #edf1f7; }
.status-distributed { color: #5a468c; background: #eee9ff; }
.status-transferring { color: #245a92; background: #e2efff; }
.status-laying_out { color: #24628c; background: #def2fc; }
.status-saving { color: #8a5b09; background: var(--warning-bg); }
.status-uploading { color: #245a92; background: #e2efff; }
.status-completed { color: #126b4d; background: var(--success-bg); }
.status-exception { color: #a33333; background: var(--danger-bg); }
.status-needs_handling { color: #a33333; background: var(--danger-bg); }
.status-failed { color: #a33333; background: var(--danger-bg); }
.order-status-detail { display: grid; min-width: 0; justify-items: start; gap: 6px; }
.order-exception-reason { display: block; width: 100%; color: #8d2f2f; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
.order-exception-reason strong { font-weight: 800; }
.orders-table .order-status-actions-cell { padding: 0 !important; vertical-align: top; }
.orders-table .order-status-actions-grid { display: grid; grid-template-columns: 100px minmax(0, 1fr); }
.orders-table .order-status-actions-grid > .order-status-cell { padding: 5px 10px; border-right: 1px solid #e1ece9; }
.orders-table .order-status-actions-grid > .row-actions { padding: 5px 20px 5px 10px; }
.orders-table .order-exception-reason-inline { display: grid; grid-column: 1 / -1; width: 360px; max-width: 100%; gap: 4px; padding: 8px 10px; border: 1px solid #e6e9ee; border-radius: 10px; background: transparent; color: #4f5560; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
.orders-table .order-exception-reason-inline strong { font-weight: 800; }
.orders-table .order-exception-reason-inline span { display: block; }
.order-status-cell-content { display: grid; min-width: 0; justify-items: start; gap: 5px; }
.order-status-cell-content .order-owner-account { display: block; width: 100%; }
.layout-status-cell { display: grid; min-width: 120px; max-width: 180px; justify-items: start; gap: 5px; }
.layout-status-cell small { display: block; color: var(--muted); font-size: 10px; line-height: 1.35; white-space: normal; }
.layout-status-cell .layout-result-summary { color: #315d50; font-weight: 800; }
.row-actions { white-space: nowrap; }
.row-actions-inner { display: grid; width: max-content; max-width: 100%; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 10px; }
.row-actions button { min-width: 0; }
.orders-table:not(.layout-stage-table) .row-actions button { width: auto; justify-self: start; font-size: 12px; line-height: 1.15; }
.orders-table tbody tr { transition: background-color .15s ease; }
.orders-table tbody tr:hover > td, .orders-table tbody tr:focus-within > td { background: #f8fcfb; }
.inline-exception-form {
  position: fixed;
  z-index: 30;
  width: min(400px, calc(100vw - 20px));
  padding: 0;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 34px rgb(17 36 70 / 24%);
}
.inline-exception-input { position: relative; width: 100%; }
.inline-exception-input textarea {
  display: block;
  width: 100%;
  min-height: 132px;
  resize: vertical;
  padding: 12px 78px 46px 12px;
  border-color: #d9a4a4;
  border-radius: 8px;
  background: #fff;
  line-height: 1.55;
}
.inline-exception-input textarea:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(185 64 64 / 12%); }
.inline-exception-input button { position: absolute; right: 10px; bottom: 10px; min-width: 58px; }
.inline-exception-progress { display: flex; align-items: center; gap: 8px; margin: 8px 10px 0; color: #596577; font-size: 12px; font-weight: 700; }
.inline-exception-spinner { width: 14px; height: 14px; border: 2px solid #cbd5e1; border-top-color: #3158bf; border-radius: 50%; animation: inline-exception-spin .7s linear infinite; }
.inline-exception-success { position: fixed; z-index: 31; min-width: 140px; padding: 12px; border: 1px solid #cbe6d7; border-radius: 10px; background: #fff; color: #24633e; font-size: 13px; font-weight: 800; box-shadow: 0 12px 34px rgb(17 36 70 / 18%); }
@keyframes inline-exception-spin { to { transform: rotate(360deg); } }
.inline-exception-status { margin: 8px 0 0; border-radius: 7px; padding: 8px 10px; background: var(--danger-bg); color: #a33333; font-size: 12px; font-weight: 700; }
.inline-handle-exception-form { position: fixed; z-index: 30; width: min(800px, calc(100vw - 20px)); padding: 18px; border: 1px solid #d6e1ef; border-radius: 10px; background: #fff; box-shadow: 0 12px 34px rgb(17 36 70 / 24%); }
.inline-handle-exception-form.exception-form { gap: 14px; padding: 18px; }
.inline-handle-exception-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; color: var(--text); }
.inline-handle-exception-header strong { font-size: 16px; }
.empty-state { padding: 50px 20px; color: var(--muted); text-align: center; }
.pagination { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; color: #31534d; font-size: 13px; line-height: 1.35; }
.pagination-summary { flex: 0 0 auto; white-space: nowrap; }
.pagination-controls { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; white-space: nowrap; }
.pagination .page-size-control { display: inline-flex; flex: 0 0 auto; margin: 0; }
.pagination .page-size-control select { width: auto; min-width: 112px; min-height: 36px; padding: 5px 30px 5px 12px; border-color: #e1ece9; border-radius: 8px; color: #31534d; font-size: 13px; line-height: 1.35; }
.pagination-nav, .pagination-page { display: grid; width: 36px; min-width: 36px; min-height: 36px; padding: 0; place-items: center; border-color: #e1ece9; border-radius: 8px; background: #fff; color: #31534d; font-size: 13px; font-weight: 700; line-height: 1; }
.pagination-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.pagination-nav:hover:not(:disabled), .pagination-page:hover:not(:disabled) { border-color: #8ccdc2; background: #f1faf7; color: #008b7d; }
.pagination-nav:disabled { border-color: #edf2f0; background: #fafcfb; color: #a3b2ae; opacity: 1; }
.pagination-pages { display: inline-flex; align-items: center; gap: 8px; }
.pagination-page.active { border-color: #008b7d; background: #008b7d; color: #fff; box-shadow: 0 5px 12px rgb(0 139 125 / 16%); }
.pagination-page.active:hover:not(:disabled) { border-color: #007b6f; background: #007b6f; color: #fff; }
.pagination-ellipsis { display: grid; width: 24px; min-height: 36px; place-items: center; color: #55746e; font-size: 18px; font-weight: 800; line-height: 1; }
.pagination-jump { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; color: #31534d; font-size: 13px; font-weight: 700; }
.pagination-jump input { width: 58px; min-height: 36px; padding: 5px 7px; border-color: #e1ece9; border-radius: 8px; color: #31534d; text-align: center; }
.pagination-jump input::-webkit-inner-spin-button, .pagination-jump input::-webkit-outer-spin-button { margin: 0; }

.detail-dialog { width: min(700px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 0; box-shadow: 0 24px 72px rgb(14 31 68 / 34%); }
#detail-dialog { width: calc(100vw - 100px); max-width: none; }
.detail-dialog::backdrop, .settings-dialog::backdrop, .settings-editor-dialog::backdrop { background: rgb(10 20 43 / 42%); backdrop-filter: blur(3px); }
.detail-dialog > section { padding: 22px; }
.detail-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.detail-dialog h2, .detail-dialog h3 { margin: 0; color: var(--text); font-size: 18px; }
.detail-loading, .detail-error { min-height: 180px; margin: 18px 0 0; padding: 70px 18px; border: 1px dashed #ccd8ea; border-radius: 12px; color: var(--muted); text-align: center; }
.detail-error { border-color: #efc9c7; background: var(--danger-bg); color: #8d2f2f; }
.file-list-dialog { width: min(920px, calc(100vw - 32px)); }
.file-list-dialog header { margin-bottom: 16px; }
.file-list-table-wrap { overflow: auto; }
.file-list-table { width: 100%; min-width: 700px; border-collapse: collapse; }
.file-list-table th, .file-list-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.file-list-table th { color: #61728e; font-size: 12px; }
.file-list-loading, .file-list-empty { margin: 24px 0; color: var(--muted); text-align: center; }
.order-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.order-detail div { border-bottom: 1px solid #e7edf6; padding-bottom: 9px; }
.order-detail .wide { grid-column: 1 / -1; }
.layout-progress-card { margin: 18px 0; border: 1px solid #dbe5f3; border-radius: 12px; padding: 16px; background: #f8fbff; }
.layout-progress-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0; border: 0; }
.layout-progress-card > header div { display: flex; align-items: center; gap: 10px; }
.layout-progress-card > header strong { color: #334867; font-size: 13px; }
.layout-progress-card > header small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.layout-progress-card ol { display: grid; grid-template-columns: repeat(8, minmax(54px, 1fr)); gap: 6px; margin: 16px 0 12px; padding: 0; list-style: none; }
.layout-progress-card li { display: grid; justify-items: center; gap: 5px; color: #91a0b5; font-size: 10px; text-align: center; }
.layout-progress-card li span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #cfd9e7; border-radius: 50%; background: #fff; font-weight: 800; }
.layout-progress-card li.done { color: #247457; }
.layout-progress-card li.done span { border-color: #8ecbb4; background: #e7f7ef; }
.layout-progress-card li.current { color: #245a92; }
.layout-progress-card li.current span { border-color: #7eb7e8; background: #e2efff; box-shadow: 0 0 0 3px rgb(80 150 216 / 12%); }
.layout-progress-card li.exception { color: #a33333; }
.layout-progress-card li.exception span { border-color: #e2a5a5; background: var(--danger-bg); }
.layout-progress-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.layout-progress-meta span { border-radius: 999px; padding: 5px 9px; background: #eaf1fa; color: #415675; font-size: 11px; font-weight: 700; }
.layout-progress-error { margin: 12px 0 0; border-radius: 8px; padding: 9px 11px; background: var(--danger-bg); color: #a33333; font-size: 12px; font-weight: 700; }
.exception-detail dd { color: var(--danger); font-weight: 700; }
dt { color: var(--muted); font-size: 12px; } dd { margin: 4px 0 0; word-break: break-word; }
.media-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); padding: 16px 0; }
.media-detail h3, .media-detail > .muted { grid-column: 1 / -1; }
.media-detail figure { min-width: 0; margin: 0; }
.detail-media-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.media-detail figcaption { overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.detail-media-button { position: relative; display: grid; width: 100%; min-height: 0; aspect-ratio: 1; padding: 0; overflow: hidden; place-items: center; border: 1px solid #d8e7e3; border-radius: 10px; background: #fbfdfc; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.detail-media-button.image-load-failed::after, .product-card-image.image-load-failed::after { content: '加载失败'; color: #7b9791; font-size: 12px; }
.detail-media-button:hover:not(:disabled), .detail-media-button:focus-visible { border-color: #43a99b; background: #f1faf7; box-shadow: 0 0 0 3px rgb(0 139 125 / 10%); }
.layout-order-dialog { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.layout-order-form { display: grid; gap: 18px; padding-top: 18px; }
.layout-order-items { display: grid; max-height: 210px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; }
.layout-order-items label { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #e7edf6; }
.layout-order-items label:last-child { border-bottom: 0; }
.layout-order-items span, .layout-order-items small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-order-batch-summary { margin: 0; padding: 14px; color: #465774; line-height: 1.6; }
.layout-order-form fieldset { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 7px; }
.layout-order-form legend { padding: 0 6px; color: #465774; font-size: 13px; font-weight: 800; }
.layout-parameter-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); align-items: stretch; gap: 20px; }
.layout-parameter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 12px; }
.layout-parameter-grid label { display: grid; gap: 5px; color: #465774; font-size: 12px; font-weight: 700; }
.layout-preview { display: grid; min-width: 0; grid-template-rows: auto minmax(300px, 1fr) auto; gap: 10px; border-left: 1px solid var(--line); padding-left: 20px; }
.layout-preview-heading { display: flex; min-height: 24px; align-items: center; justify-content: space-between; gap: 12px; color: #465774; }
.layout-preview-heading strong { color: var(--text); font-size: 13px; }
.layout-preview-heading span, .layout-preview-summary { color: var(--muted); font-size: 11px; }
.layout-preview-stage { display: grid; min-height: 300px; overflow: hidden; place-items: center; border: 1px solid #dce5f1; border-radius: 7px; padding: 12px; background: #f2f5f9; }
.layout-preview-sheet { position: relative; flex: none; overflow: hidden; border: 1px solid #aebdd0; border-radius: 2px; background: #fff; box-shadow: 0 8px 20px rgb(30 53 87 / 12%); }
.layout-preview-safe-area { position: absolute; box-sizing: border-box; min-width: 2px; min-height: 2px; border: 1px dashed #6d91b8; background: rgb(222 235 250 / 28%); }
.layout-preview-padding-area { box-sizing: border-box; width: 100%; height: 100%; background: rgb(61 125 190 / 6%); }
.layout-preview-grid { display: grid; box-sizing: border-box; width: 100%; height: 100%; }
.layout-preview-frame { display: grid; box-sizing: border-box; min-width: 0; min-height: 0; place-items: center; padding: var(--layout-preview-padding-y, 0) var(--layout-preview-padding-x, 0); border: 1px solid #3c78b5; background: #dfeeff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 72%); }
.layout-preview-image { display: block; width: var(--layout-preview-image-size, 50px); height: var(--layout-preview-image-size, 50px); border: 1px solid #6d91b8; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 80%); }
.layout-preview-grid.layout-preview-plan { position: relative; display: block; }
.layout-preview-grid.layout-preview-plan .layout-preview-frame { position: absolute; display: block; min-width: 1px; min-height: 1px; padding: 0; }
.layout-preview-grid.layout-preview-plan .layout-preview-image { position: absolute; box-sizing: border-box; }
.layout-preview-summary { min-height: 16px; margin: 0; overflow-wrap: anywhere; text-align: center; }
.layout-order-form footer { display: flex; justify-content: flex-end; }
.layout-source-orders { border-top: 1px solid var(--line); padding: 16px 0; }
.layout-source-orders h3 { margin: 0 0 8px; }
.layout-source-orders > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid #edf1f7; }

.image-viewer {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #fff;
  background-image: linear-gradient(45deg, #dce5e4 25%, transparent 25%), linear-gradient(-45deg, #dce5e4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dce5e4 75%), linear-gradient(-45deg, transparent 75%, #dce5e4 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
  color: #fff;
}
.image-viewer::backdrop {
  background: rgb(9 25 22 / 92%);
}
.image-viewer figure { display: grid; width: 100%; height: 100%; margin: 0; padding: 48px 72px 44px; place-items: center; touch-action: pan-y; }
.image-viewer img { display: block; max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; cursor: zoom-in; transition: transform 120ms ease-out; transform-origin: center; will-change: transform; }
.image-viewer img[data-zoomed="true"] { cursor: zoom-out; }
.image-viewer img[hidden] { display: none; }
.viewer-footer { position: fixed; bottom: 12px; left: 50%; display: flex; max-width: calc(100vw - 160px); padding: 8px 12px; align-items: center; gap: 14px; border: 1px solid rgb(186 231 220 / 22%); border-radius: 10px; background: rgb(12 42 37 / 88%); transform: translateX(-50%); }
.image-viewer figcaption { overflow: hidden; color: #d7eee8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.viewer-footer .viewer-original { width: auto; min-width: 58px; min-height: 28px; padding: 4px 10px; border: 1px solid rgb(138 224 208 / 55%); border-radius: 7px; background: transparent; color: #8ae0d0; font-size: 13px; font-weight: 700; line-height: 1.3; }
.viewer-footer .viewer-original:hover:not(:disabled) { border-color: #8ae0d0; background: rgb(97 196 180 / 16%); }
.viewer-footer .viewer-original:disabled { cursor: default; opacity: 1; }
.viewer-footer a { flex: 0 0 auto; color: #8ae0d0; font-size: 13px; font-weight: 700; }
.viewer-close, .viewer-nav { position: fixed; z-index: 2; display: grid; width: 44px; height: 44px; min-height: 44px; padding: 0; place-items: center; border: 1px solid rgb(186 231 220 / 24%); border-radius: 50%; background: rgb(12 42 37 / 88%); color: #e5faf5; font-size: 30px; line-height: 1; }
.viewer-close svg, .viewer-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.viewer-close { top: 18px; right: 22px; }
.viewer-nav { top: 50%; transform: translateY(-50%); font-size: 42px; }
.viewer-prev { left: 18px; }
.viewer-next { right: 18px; }
.viewer-close:hover:not(:disabled), .viewer-nav:hover:not(:disabled) { border-color: #61c4b4; background: #0b5a51; }
.exception-form { display: grid; gap: 16px; padding-top: 18px; }
.exception-form label { display: grid; gap: 6px; color: #465774; font-size: 13px; font-weight: 700; }
.exception-form-status { margin: 0; border: 1px solid #c9daf5; border-radius: 10px; padding: 10px 12px; background: #eef5ff; color: #1d3f75; font-size: 13px; font-weight: 700; }
.exception-form-status[data-type="success"] { border-color: #b8dfc8; background: #edf8f1; color: #246b43; }
.exception-form-status[data-type="error"] { border-color: #efc0bc; background: #fff0ee; color: #a43a31; }
.exception-form footer { display: flex; justify-content: flex-end; gap: 10px; }
.exception-summary { display: grid; gap: 5px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.exception-summary span { color: var(--muted); font-size: 13px; }
.result-list { border-top: 1px solid var(--line); padding-top: 16px; }
.result-list h3 { margin-bottom: 8px; }
.result-file-summary { margin: 0; border-radius: 8px; padding: 9px 11px; background: #edf7f2; color: #315d50; font-size: 13px; font-weight: 800; }
.result-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e7edf6; }
.result-list span, .result-list small { display: block; }
.result-list span { min-width: 0; }
.result-list span b { display: block; margin-bottom: 3px; font-size: 13px; }
.result-list .result-file-meta { margin-top: 3px; color: #657690; }

.settings-dialog { width: calc(100vw - 100px); height: calc(100vh - 40px); max-width: none; max-height: none; margin: 20px 50px; border: 0; border-radius: 18px; padding: 0; box-shadow: 0 24px 72px rgb(14 31 68 / 34%); }
.settings-dialog > section { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; padding: 0; background: var(--surface); }
.settings-dialog > section > header { display: flex; height: 50px; min-height: 50px; align-items: center; justify-content: space-between; gap: 18px; padding: 0 50px; border-bottom: 1px solid var(--line); }
.settings-dialog h2, .settings-dialog h3 { margin: 0; color: var(--text); }
.settings-dialog h2 { margin-top: 4px; font-size: 22px; }
.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 0; }
.settings-nav { display: flex; flex-direction: column; gap: 8px; padding: 20px 14px; border-right: 1px solid var(--line); background: #f7f9fd; }
.settings-nav button { justify-content: center; border-color: transparent; background: transparent; color: #53647e; text-align: center; }
.settings-nav button:hover:not(:disabled) { border-color: #d3e1f7; background: #eaf2ff; color: var(--blue-800); }
.settings-nav button.active { border-color: #c8daf8; background: var(--blue-100); color: var(--blue-800); box-shadow: inset 3px 0 0 var(--cyan-400); }
.settings-content { min-width: 0; overflow: auto; padding: 22px 50px 28px; background: #fbfcff; }
.settings-content h3 { margin-bottom: 16px; font-size: 18px; }
.settings-table-scroll { max-height: 490px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.settings-table { width: 100%; min-width: 660px; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.settings-table th, .settings-table td { padding: 12px 11px; border-bottom: 1px solid #e6edf7; text-align: left; vertical-align: middle; }
.settings-table th { position: sticky; top: 0; z-index: 1; background: #f5f8fd; color: #5d6e88; font-size: 12px; }
.settings-table tr:last-child td { border-bottom: 0; }
.settings-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; }
.settings-loading, .settings-empty, .settings-error { margin: 0; padding: 42px 18px; border: 1px dashed #ccd8ea; border-radius: 12px; color: var(--muted); text-align: center; }
.settings-error { border-color: #efc9c7; background: var(--danger-bg); color: #8d2f2f; }
.settings-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.settings-kpis article { min-width: 0; padding: 15px 16px; border: 1px solid #d9e5f5; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgb(29 58 112 / 5%); }
.settings-kpis span, .settings-kpis small { display: block; color: var(--muted); }
.settings-kpis strong { display: block; margin: 5px 0 2px; color: var(--blue-800); font-size: 25px; line-height: 1.1; }
.settings-toolbar { display: flex; align-items: end; gap: 10px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.settings-toolbar label { display: grid; flex: 0 1 150px; gap: 5px; color: #52647f; font-size: 12px; font-weight: 700; }
.settings-toolbar .settings-search { flex: 1 1 250px; }
.settings-toolbar-copy { display: grid; flex: 1 1 auto; gap: 3px; }
.settings-toolbar-copy span { color: var(--muted); font-size: 13px; }
.settings-selection-note { color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.billing-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.billing-breakdown article { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.billing-breakdown h4 { margin: 0 0 9px; color: var(--text); }
.billing-breakdown ul { max-height: 145px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.billing-breakdown li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid #edf1f7; font-size: 13px; }
.billing-breakdown li:last-child { border-bottom: 0; }
.billing-breakdown li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing-breakdown li strong { flex: 0 0 auto; color: var(--blue-800); font-size: 12px; }
.usage-type, .settings-state { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 4px 8px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.usage-image_generation { color: #24588f; background: #e7f1ff; }
.usage-layout { color: #6d4d9c; background: #f0e9ff; }
.settings-state.active { color: #126b4d; background: var(--success-bg); }
.settings-state.inactive { color: #68768a; background: #edf1f6; }
.settings-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px 0; color: var(--muted); font-size: 13px; }
.settings-pagination div { display: flex; align-items: center; gap: 10px; }
.billing-table { min-width: 930px; }
.product-grid, .pipeline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product-card { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgb(29 58 112 / 5%); }
.sku-select { position: absolute; z-index: 1; top: 9px; left: 9px; display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #cfdae9; border-radius: 7px; background: rgb(255 255 255 / 92%); color: #52647f; font-size: 12px; font-weight: 800; }
.sku-select input { width: 16px; min-height: 16px; margin: 0; }
.checkerboard { background-color: #fff; background-image: linear-gradient(45deg, #e5eaf2 25%, transparent 25%), linear-gradient(-45deg, #e5eaf2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5eaf2 75%), linear-gradient(-45deg, transparent 75%, #e5eaf2 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; }
.product-card-image { display: grid; min-height: 190px; place-items: center; border-right: 1px solid var(--line); color: #8190a6; font-size: 13px; }
.product-card-image img { width: 100%; height: 190px; object-fit: contain; }
.product-card-main { min-width: 0; padding: 15px; }
.product-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.product-card-heading > div { min-width: 0; }
.product-card-heading code { color: var(--blue-700); font-weight: 800; }
.product-card-name-inline { display: -webkit-box; width: 100%; overflow: hidden; margin: 6px 0 0; padding: 0; border: 0; background: transparent; color: var(--text); cursor: text; font: inherit; font-size: 17px; font-weight: 800; line-height: 1.4; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-card-name-inline:hover { color: var(--blue-700); text-decoration: underline dotted; text-underline-offset: 3px; }
.product-card-name-inline:focus-visible { border-radius: 4px; outline: 2px solid #8db7ee; outline-offset: 3px; }
.product-card-name-editor { display: block; box-sizing: border-box; width: 100%; min-height: 54px; margin: 6px 0 0; padding: 4px 6px; resize: vertical; border: 1px solid #8db7ee; border-radius: 6px; background: #fff; color: var(--text); font: inherit; font-size: 17px; font-weight: 800; line-height: 1.4; }
.product-card-name-editor:focus { border-color: var(--blue-700); outline: 2px solid rgb(59 130 246 / 18%); outline-offset: 1px; }
.product-card-name-editor.is-saving { cursor: wait; opacity: .65; }
.product-card-main > p { margin: 8px 0 12px; color: var(--muted); font-size: 13px; }
.sku-tags { display: grid; gap: 6px; margin: 0 0 12px; }
.sku-tags > strong { color: #52647f; font-size: 12px; }
.sku-tags > div { display: flex; flex-wrap: wrap; gap: 6px; }
.sku-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px; background: #edf2f8; color: #596b84; font-size: 12px; font-weight: 700; }
.sku-tag.primary { background: #e4f0ff; color: #24588f; }
.sku-tag.empty { color: #718096; }
.sku-tag b { color: inherit; font-size: 10px; }
.product-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 13px; }
.product-card dl div { min-width: 0; padding: 9px; border-radius: 9px; background: #f5f8fd; }
.product-card dd { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.product-group-card { align-items: start; }
.product-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.product-conflict-note { padding: 8px 10px; border: 1px solid #f2cc8f; border-radius: 9px; background: #fff8e8; color: #8a5b14 !important; }
.product-sku-list { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.product-sku-list article { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.product-sku-list article > .checkerboard { display: grid; width: 54px; height: 54px; overflow: hidden; place-items: center; border-radius: 8px; }
.product-sku-list article img { width: 100%; height: 100%; object-fit: contain; }
.product-sku-list article > div:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.product-sku-list article code, .product-sku-list article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgb(29 58 112 / 5%); }
.pipeline-card header, .pipeline-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pipeline-card header p { margin: 0 0 5px; color: var(--blue-700); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.pipeline-card h4 { margin: 0; font-size: 17px; }
.pipeline-flow { display: flex; align-items: center; gap: 7px; overflow-x: auto; min-height: 64px; margin: 13px 0; padding: 12px; border: 1px dashed #cad8eb; border-radius: 10px; background: #f8faff; }
.pipeline-flow span { flex: 0 0 auto; padding: 6px 9px; border-radius: 8px; background: var(--blue-100); color: var(--blue-800); font-size: 12px; font-weight: 800; }
.pipeline-flow i { color: #8191aa; font-style: normal; }
.pipeline-skus { margin-bottom: 13px; color: var(--muted); font-size: 12px; }
.pipeline-skus > div { display: flex; gap: 6px; margin-top: 7px; }
.pipeline-skus span, .pipeline-skus b { max-width: 170px; overflow: hidden; padding: 5px 8px; border-radius: 999px; background: #f0f4fa; color: #53647e; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-skus b { flex: 0 0 auto; color: var(--blue-800); }
.pipeline-card footer > span { color: var(--muted); font-size: 12px; }
.pipeline-card footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.settings-editor-dialog { width: min(820px, calc(100vw - 64px)); max-height: calc(100vh - 80px); border: 0; border-radius: 16px; padding: 0; box-shadow: 0 24px 72px rgb(14 31 68 / 34%); }
.settings-editor-dialog.pipeline-settings-editor { width: min(1120px, calc(100vw - 64px)); }
.settings-editor-dialog form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 80px); background: #fff; }
.settings-editor-dialog header, .settings-editor-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.settings-editor-dialog footer { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }
.settings-editor-dialog h2 { margin: 0; font-size: 20px; }
#settings-editor-body { overflow: auto; padding: 20px; }
.settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.settings-form-grid > label { display: grid; gap: 6px; color: #52647f; font-size: 13px; font-weight: 700; }
.settings-form-grid .wide, .settings-form-grid fieldset { grid-column: 1 / -1; }
.settings-form-grid fieldset { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 11px; padding: 13px; }
.settings-form-grid legend { padding: 0 5px; color: #52647f; font-size: 13px; font-weight: 800; }
.settings-switch { display: flex !important; align-items: center; gap: 8px !important; }
.settings-switch input, .settings-check input { width: 17px; min-height: 17px; margin: 0; }
.settings-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 240px; overflow: auto; }
.settings-check { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid #e2e9f3; border-radius: 9px; background: #fafcff; }
.settings-check span { display: grid; min-width: 0; }
.settings-check strong, .settings-check small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.sku-tag-editor { display: grid; gap: 8px; min-height: 46px; margin-bottom: 10px; }
.sku-tag-editor-item { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid #dce5f1; border-radius: 9px; background: #f8fbff; cursor: grab; }
.sku-tag-editor-item small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.sku-tag-drag { color: #7688a2; font-size: 20px; line-height: 1; }
.sku-tag-add { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.sku-tag-add select { min-width: 0; flex: 1 1 auto; }
.tag-picker { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid #dce5f1; border-radius: 12px; background: #f8fbff; }
.tag-picker-search { position: relative; display: block; }
.tag-picker-search::before { position: absolute; top: 50%; left: 11px; color: #7d8da5; content: '⌕'; font-size: 18px; line-height: 1; transform: translateY(-50%); }
.tag-picker-search input { width: 100%; min-height: 36px; padding-left: 34px; border: 0; border-radius: 8px; background: #eef3f9; box-shadow: none; }
.tag-picker-search input:focus { outline: 2px solid #b5d0fa; background: #fff; }
.tag-picker-options { display: grid; max-height: 244px; overflow: auto; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 2px; }
.tag-picker-option { display: grid; min-height: 62px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 8px; padding: 9px 10px; border: 1px solid #dfe7f2; border-radius: 9px; background: #fff; color: #1f3152; text-align: left; }
.tag-picker-option:hover, .tag-picker-option:focus-visible { border-color: #5b8fe4; background: #f3f7ff; }
.tag-picker-option.selected { border-color: #3f7fe0; background: #eaf2ff; }
.tag-picker-option span { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.tag-picker-option small { overflow: hidden; grid-column: 1; color: #7688a2; text-overflow: ellipsis; white-space: nowrap; }
.tag-picker-option i { display: none; grid-column: 2; grid-row: 1 / span 2; width: 19px; height: 19px; border-radius: 50%; place-items: center; background: #316ccd; color: #fff; font-size: 13px; font-style: normal; }
.tag-picker-option.selected i { display: grid; }
.tag-picker-create { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; padding-top: 10px; border-top: 1px solid #dfe7f2; }
.tag-picker-create label { display: grid; gap: 5px; color: #52647f; font-size: 12px; font-weight: 700; }
.tag-picker-create-actions { display: flex; align-items: center; gap: 10px; }
.tag-picker footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tag-picker .link-button { padding: 0; border: 0; background: transparent; color: #275bb1; font-weight: 800; }
.tag-picker.compact { max-width: 720px; margin: 0; border: 0; background: transparent; }
.tag-picker.compact .tag-picker-create { border-top: 0; padding-top: 0; }
.tag-picker .muted { margin: 8px 0; color: var(--muted); }
.category-manager { display: grid; gap: 14px; }
.category-manager-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.category-manager-list { display: grid; gap: 8px; }
.category-manager-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; }
.category-manager-list article > div { display: grid; gap: 3px; }
.category-manager-list small { color: var(--muted); }
.quick-category-creator { display: grid; gap: 12px; max-width: 720px; }
.pipeline-combination-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 12px; }
.pipeline-combination-head h3, .pipeline-combination-head p { margin: 0; }
.pipeline-combination-head p, .pipeline-combination-head > span, .pipeline-card-note { color: var(--muted); font-size: 12px; }
.pipeline-step-list { display: grid; gap: 10px; }
.pipeline-step-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f8faff; }
.pipeline-step-card.selected { border-color: #a9c5f0; background: #fff; box-shadow: 0 5px 16px rgb(29 58 112 / 7%); }
.pipeline-step-card > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; }
.pipeline-step-card > header > div { display: flex; gap: 8px; }
.pipeline-step-toggle { display: flex; min-width: 0; align-items: center; gap: 10px; cursor: pointer; }
.pipeline-step-toggle input, .pipeline-inline-check input { flex: 0 0 17px; width: 17px; min-height: 17px; margin: 0; }
.pipeline-step-toggle span { display: grid; min-width: 0; gap: 2px; }
.pipeline-step-toggle small { white-space: normal; }
.pipeline-step-card > section { padding: 14px; border-top: 1px solid var(--line); background: #fff; }
.pipeline-param-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pipeline-param-grid label { display: grid; min-width: 0; gap: 5px; color: #52647f; font-size: 12px; font-weight: 700; }
.pipeline-param-grid .wide { grid-column: 1 / -1; }
.pipeline-card-note { margin: 0 0 12px; line-height: 1.5; }
.pipeline-check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.pipeline-inline-check { display: inline-flex !important; align-items: center; gap: 7px !important; }
.pipeline-advanced { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8faff; }
.pipeline-advanced summary { cursor: pointer; color: var(--blue-800); font-size: 13px; font-weight: 800; }
.pipeline-advanced .pipeline-param-grid { margin-top: 12px; }
.pipeline-text-layers { display: grid; gap: 10px; margin: 14px 0; }
.pipeline-text-layer { overflow: hidden; border: 1px dashed #bdcce1; border-radius: 9px; background: #fbfcff; }
.pipeline-text-layer > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pipeline-text-layer .pipeline-param-grid { padding: 12px; }
.icon-button { display: grid; width: 38px; height: 38px; min-height: 38px; padding: 0; place-items: center; font-size: 22px; line-height: 1; }
.settings-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.settings-form label { display: grid; gap: 6px; color: #465774; font-size: 13px; font-weight: 700; }
.settings-form button[type="submit"] { min-height: 0; }
.settings-section-bar { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.settings-section-bar span { min-width: 0; overflow-wrap: anywhere; }
.settings-online { display: inline-flex; padding: 4px 7px; border-radius: 3px; font-size: 12px; font-weight: 700; }
.settings-online.yes { color: #14644c; background: #dff4e8; }
.settings-online.no { color: #6b7477; background: #edf0f1; }
.settings-metrics { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); border: 1px solid var(--line); border-radius: 8px; }
.settings-metrics div { min-height: 76px; padding: 14px 16px; border-right: 1px solid var(--line); }
.settings-metrics div:last-child { border-right: 0; }
.settings-metrics small, .settings-metrics b { display: block; }
.settings-metrics b { margin-top: 6px; color: var(--text); font-size: 16px; }
.settings-alerts { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.settings-alerts:empty { display: none; }
.settings-alerts li { padding: 9px 11px; border-left: 3px solid #bd8b17; background: #fff8df; color: #6d5110; font-size: 13px; }
.settings-alerts li[data-severity="critical"] { border-color: #a33b36; background: #fff0ee; color: #8a302c; }

@media (min-width: 1181px) {
  .portal-content { overflow: visible; }
  .table-region { overflow: clip; }
  .table-scroll { overflow: visible; }
}

@media (max-width: 1180px) {
  .portal-content, .workflow-status-panel { padding-left: 24px; padding-right: 24px; }
  .topbar { height: auto; min-height: 0; margin-right: 24px; margin-left: 24px; padding-right: 24px; padding-left: 24px; }
  .topbar-upper { grid-template-columns: 200px minmax(0, 1fr) auto; }
  .production-flow { gap: 11px; }
  .production-flow-step { font-size: 12px; }
  .workflow-statuses { gap: 16px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .workflow-status { flex: 0 0 auto; width: auto; }
  .settings-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid, .pipeline-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .topbar-upper { grid-template-columns: minmax(0, 1fr) auto; }
  .production-flow { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .workflow-status { flex-basis: auto; width: auto; }
  .layout-parameter-layout { grid-template-columns: 1fr; }
  .layout-preview { min-height: 360px; border-top: 1px solid var(--line); border-left: 0; padding-top: 16px; padding-left: 0; }
}
@media (max-width: 680px) {
  .topbar { height: auto; min-height: 0; margin: 8px 16px 0; padding: 16px; }
  .topbar-upper { grid-template-columns: 1fr; gap: 12px; }
  .topbar h1 { font-size: 24px; }
  .production-flow { grid-column: 1; grid-row: auto; width: 100%; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; }
  .production-flow-step { font-size: 11px; }
  .account { width: 100%; justify-content: flex-start; gap: 18px; }
  .workflow-status-panel { padding: 20px 16px 0; }
  .workflow-statuses { width: 100%; gap: 14px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .workflow-status { flex: 0 0 auto; width: auto; min-width: 0; }
  .portal-content { padding: 16px; }
  .selection-bar { flex-wrap: wrap; }
  .date-filter { width: 100%; }
  .date-filter input { flex: 1 1 0; min-width: 0; }
  .category-filter { width: 100%; }
  .order-detail { grid-template-columns: 1fr; }
  #detail-dialog { width: calc(100vw - 32px); }
  .settings-layout { display: block; min-height: 0; }
  .settings-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-nav button { flex: 0 0 auto; }
  .settings-content { padding: 18px 16px 22px; }
  .settings-dialog { width: calc(100vw - 32px); height: calc(100vh - 40px); margin: 20px 16px; }
  .settings-toolbar { align-items: stretch; flex-direction: column; }
  .settings-toolbar label, .settings-toolbar .settings-search { flex-basis: auto; }
  .settings-kpis, .billing-breakdown, .settings-form-grid, .settings-check-list { grid-template-columns: 1fr; }
  .pipeline-param-grid { grid-template-columns: 1fr; }
  .pipeline-step-card > header { grid-template-columns: 1fr; }
  .pipeline-step-card > header > div { justify-content: flex-start; }
  .product-card { grid-template-columns: 110px minmax(0, 1fr); }
  .product-card-image { min-height: 150px; }
  .product-card-image img { height: 150px; }
  .settings-form { grid-template-columns: 1fr; }
  .settings-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-metrics div:nth-child(2n) { border-right: 0; }
  .layout-parameter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-preview { min-height: 330px; }
  .layout-preview-stage { min-height: 270px; }
  .image-viewer figure { padding: 58px 16px 54px; }
  .viewer-nav { top: auto; bottom: 8px; transform: none; }
}

/* 2026-08-25 layout action and global completion reminder polish. */
.global-reminder {
  display: flex;
  min-width: 0;
  margin: 0 34px 10px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #9dd8cc;
  border-radius: 10px;
  background: #eefaf7;
  color: #0b7067;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 4px 12px rgb(18 69 62 / 7%);
}
.global-reminder span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.global-reminder-close {
  flex: 0 0 auto;
  min-height: 0;
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: currentColor;
  font-size: 20px;
  line-height: 1;
}
.global-reminder-close:hover:not(:disabled) { border-color: transparent; background: rgb(0 139 125 / 9%); color: currentColor; }

.selection-bar {
  gap: 10px;
  min-height: 36px;
  margin: 10px 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}
.selection-bar button {
  min-height: 0;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.2;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
}
.selection-page-actions {
  margin-left: 0;
  flex: 0 0 auto;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.selection-page-actions button { font-size: 14px; line-height: 1.2; }
.date-filter, .category-filter { flex: 0 0 auto; min-height: 36px; padding-top: 5px; padding-bottom: 5px; }
.toolbar-action { min-height: 0; padding-top: 5px; padding-bottom: 5px; }

.orders-table.layout-actions-inline { min-width: 1220px; }
.orders-table.layout-actions-inline:not(.layout-stage-table) th:nth-child(7) { width: 420px; }
.orders-table.layout-actions-inline .row-actions-inner {
  display: flex;
  width: max-content;
  max-width: none;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}
.orders-table.layout-actions-inline .row-actions button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.2;
  justify-self: start;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .global-reminder { margin: 0 16px 10px; }
  .selection-bar { flex-wrap: nowrap; }
  .date-filter, .category-filter { width: auto; }
  .selection-page-actions { width: auto; margin-left: 0; }
}

/* 2026-08-25 workflow toolbar polish: status filters stay readable while the
   adjacent action row keeps compact, even spacing. */
.workflow-status-panel {
  padding-top: 16px;
}
.workflow-statuses {
  gap: 16px;
  padding-bottom: 0;
}
.workflow-status {
  height: 46px;
  padding: 5px 12px;
  border-radius: 10px;
  background: #fff;
}

/* Group state filters by their operational meaning without changing the
   underlying filter behaviour. */
.workflow-status:is([data-portal-stage="imported"], [data-portal-stage="producible"], [data-portal-stage="import_failed"]) {
  --status-dot: #c66b6b;
  --status-border: #e6c4c4;
  --status-text: #8d5050;
  --status-active-bg: #fbefef;
  --status-active-border: #ebcece;
}
.workflow-status:is([data-portal-stage="produced"], [data-portal-stage="completed"], [data-portal-stage="needs_handling"]) {
  --status-dot: #6fa483;
  --status-border: #c8dfd0;
  --status-text: #47765a;
  --status-active-bg: #eff7f1;
  --status-active-border: #d6e9dc;
}
.workflow-status:is([data-portal-stage="unproduced"], [data-portal-stage="generating"]) {
  --status-dot: #d4a24f;
  --status-border: #ead9ae;
  --status-text: #80642f;
  --status-active-bg: #fbf5e8;
  --status-active-border: #edddae;
}
.workflow-status:is([data-portal-stage="layout_ready"], [data-portal-stage="laying_out"], [data-portal-stage="laid_out"]) {
  --status-dot: #5a86bd;
  --status-border: #c7d8ee;
  --status-text: #486b9d;
  --status-active-bg: #eff5fd;
  --status-active-border: #d7e4f5;
}
.workflow-status-dot {
  width: 9px;
  height: 9px;
  flex-basis: 9px;
}
.workflow-status:hover:not(:disabled),
.workflow-status.active,
.workflow-status:focus-visible {
  border-color: var(--status-dot);
  background: var(--status-active-bg);
  color: var(--status-text);
  box-shadow: inset 0 0 0 1px var(--status-active-border);
}
.workflow-status:hover:not(:disabled) strong,
.workflow-status.active strong,
.workflow-status:focus-visible strong {
  color: var(--status-text);
}

/* Keep this row 10px from surrounding content and give controls a minimum of
   5px vertical text padding. */
.selection-bar {
  gap: 10px;
  min-height: 36px;
  margin: 10px 0;
}
.date-filter,
.category-filter {
  min-height: 36px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.date-filter,
.category-filter {
  padding-right: 10px;
  padding-left: 10px;
}
.date-filter input,
.category-filter select {
  min-height: 24px;
}
.selection-page-actions {
  margin-left: auto;
  gap: 10px;
  justify-content: flex-end;
}
.selection-page-actions button {
  padding-right: 10px;
  padding-left: 10px;
}

@media (max-width: 680px) {
  .selection-bar {
    gap: 10px;
    margin: 10px 0;
  }
  .selection-page-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* Final toolbar invariants: one horizontal action row, shared typography and
   left alignment on every portal stage. */
.selection-bar {
  min-height: 36px;
  margin: 10px 0;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.selection-bar button {
  height: 31px;
  min-height: 0;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 19px;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
}
.selection-page-actions {
  margin-left: 0;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.selection-page-actions button { font-size: 14px; line-height: 1.2; }

@media (max-width: 680px) {
  .selection-bar { flex-wrap: nowrap; }
  .date-filter, .category-filter { width: auto; }
  .selection-page-actions { width: auto; margin-left: 0; }
}

/* Equal vertical rhythm: the toolbar row is 20px from both neighbours. */
.portal-content { padding-top: 10px; }
.selection-bar { margin: 10px 0 20px; }

/* Keep the status row inside the banner so the existing banner artwork remains
   continuous and its lower border follows the row. The extra 50px belongs to
   this row's top spacing; the banner content above it keeps its coordinates. */
.topbar {
  height: auto;
  min-height: 0;
}
.topbar .workflow-status-panel {
  position: relative;
  z-index: 1;
  padding: 66px 0 0;
  background: transparent;
}
.topbar .workflow-statuses {
  gap: 16px;
  padding-bottom: 0;
}

/* Normal order-table column contract: checkbox 30px, order 160px,
   adaptive order information, media 1000px,
   status 100px, and actions 260px. */
.orders-table:not(.layout-stage-table) { min-width: 1550px; }
.orders-table:not(.layout-stage-table) th:nth-child(1),
.orders-table:not(.layout-stage-table) th.select-column,
.orders-table:not(.layout-stage-table) td.select-column { width: 30px; }
.orders-table:not(.layout-stage-table) th:nth-child(2) { width: 160px; }
.orders-table:not(.layout-stage-table) th:nth-child(5) { width: 1000px; }
.orders-table:not(.layout-stage-table) th:nth-child(6) { width: 100px; }
.orders-table:not(.layout-stage-table) th:nth-child(7) { width: 100px; }
.orders-table:not(.layout-stage-table) .order-spec-cell,
.orders-table:not(.layout-stage-table) .order-spec-data,
.orders-table:not(.layout-stage-table) .order-spec-data-compact dd,
.orders-table:not(.layout-stage-table) .order-status-cell { min-width: 0; }
.orders-table:not(.layout-stage-table) .order-spec-data-compact dd,
.orders-table:not(.layout-stage-table) .order-status-cell,
.orders-table:not(.layout-stage-table) .status { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.orders-table:not(.layout-stage-table) .row-actions-inner {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  flex-direction: column;
  flex-wrap: nowrap;
}
.orders-table:not(.layout-stage-table) .row-actions button {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}
.orders-table:not(.layout-stage-table) .media-frames {
  max-width: 1000px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: row;
}
.orders-table.spec-column-hidden #orders-header-spec,
.orders-table.spec-column-hidden .order-spec-column-hidden { display: none; }
.orders-table:not(.layout-stage-table) .order-cell > .order-spec-data-compact { margin-top: 8px; }
.orders-table:not(.layout-stage-table) .order-cell > .cell-detail-trigger + .order-spec-data-compact { margin-top: 1.45em; }
.orders-table:not(.layout-stage-table) .product-name { -webkit-line-clamp: 8; }
.orders-table:not(.layout-stage-table) .product-name + small { margin-top: 1.45em; }
.orders-table .order-cell b + small { margin-top: 1.45em; }