#orderCenterMount { width: 100%; min-width: 0; }

.oc-shell {
  --oc-wine: #87263a;
  --oc-wine-dark: #6f1e30;
  --oc-wine-soft: #f8ecef;
  --oc-ink: #26292f;
  --oc-muted: #777b84;
  --oc-line: #e5e0dc;
  --oc-panel: #fff;
  --oc-canvas: #faf8f5;
  min-width: 0;
  padding-top: 70px;
  color: var(--oc-ink);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.oc-shell *, .oc-shell *::before, .oc-shell *::after { box-sizing: border-box; }
.oc-shell button, .oc-shell input, .oc-shell select, .oc-shell textarea { font: inherit; }
.oc-shell button { cursor: pointer; }
.oc-shell .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.oc-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

.oc-tabs {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(24px, 2vw, 36px);
  height: var(--software-primary-submenu-height, 56px);
  min-height: var(--software-primary-submenu-height, 56px);
  margin: -4px 0 18px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-bottom: 1px solid #ead9dc;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}
.oc-tabs::-webkit-scrollbar { display: none; }
.oc-tabs button {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: auto;
  height: var(--software-primary-submenu-height, 56px);
  min-height: var(--software-primary-submenu-height, 56px);
  padding: 0 2px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #2d2024;
  box-shadow: none;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  font-size: var(--software-primary-submenu-font-size, 15px);
  font-weight: var(--software-primary-submenu-font-weight, 700);
  line-height: 1.2;
  white-space: nowrap;
}
.oc-tabs button::after { display: none; }
.oc-tabs button:hover { border-bottom-color: #d9a9b5; color: var(--brand, var(--oc-wine)); background: transparent; }
.oc-tabs button.active { border-bottom-color: var(--brand, var(--oc-wine)); color: var(--brand, var(--oc-wine)); background: transparent; }

.oc-page { position: relative; min-width: 0; }
.oc-page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.oc-page-head > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; min-width: 0; }
.oc-page-head h2 { margin: 0; color: #25282d; font-size: 28px; line-height: 1.25; font-weight: 760; letter-spacing: -.5px; }
.oc-page-head p { margin: 0; color: var(--oc-muted); font-size: 13px; }
.oc-access-banner { display: flex; align-items: center; gap: 11px; margin: 0 0 14px; padding: 11px 14px; border: 1px solid #dfe4eb; border-radius: 8px; background: #f7f9fc; color: #3c4655; }
.oc-access-banner > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.oc-access-banner b { color: #252b34; font-size: 13px; }
.oc-access-banner span { color: #687180; font-size: 12px; }
.oc-access-banner.all { border-color: #cddfd7; background: #f3faf6; color: #347054; }
.oc-access-banner.shops { border-color: #d8dfef; background: #f5f8ff; color: #496a9e; }
.oc-access-banner.warehouse { border-color: #e2d8ee; background: #faf7fd; color: #775595; }
.oc-access-banner.blocked { border-color: #ead4d4; background: #fff7f7; color: #a24a4a; }
.oc-sync-note { display: inline-flex; align-items: center; gap: 6px; color: #8a8e96; font-size: 12px; }
.oc-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }

.oc-button, .oc-primary, .oc-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #d9d4d0;
  border-radius: 6px;
  background: #fff;
  color: #35383e;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.oc-button:hover { border-color: #bcaeb1; color: var(--oc-wine); background: #fffafa; }
.oc-primary { border-color: var(--oc-wine); background: var(--oc-wine); color: #fff; box-shadow: 0 5px 13px rgba(116, 27, 47, .12); }
.oc-primary:hover { background: var(--oc-wine-dark); border-color: var(--oc-wine-dark); }

.oc-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.oc-metric {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 84px;
  padding: 13px 16px;
  border: 1px solid var(--oc-line);
  border-radius: 8px;
  background: #fff;
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.oc-metric:hover, .oc-metric.selected { transform: translateY(-1px); border-color: color-mix(in srgb, currentColor 35%, var(--oc-line)); box-shadow: 0 7px 18px rgba(47, 38, 34, .06); }
.oc-metric i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: currentColor; background: color-mix(in srgb, currentColor 10%, white); }
.oc-metric span { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: #585c64; font-size: 13px; font-style: normal; }
.oc-metric strong { color: currentColor; font-size: 25px; line-height: 1; font-weight: 760; }
.oc-metric.wine { color: #9c2941; }.oc-metric.orange { color: #dd7217; }.oc-metric.amber { color: #d89d05; }
.oc-metric.green { color: #2b9167; }.oc-metric.blue { color: #3378bd; }.oc-metric.red { color: #e33a41; }
.oc-metric.purple { color: #7761b1; }.oc-metric.cyan { color: #33928c; }

.oc-filter-bar { display: grid; grid-template-columns: 180px 210px 170px minmax(220px, 1fr) auto; align-items: end; gap: 14px; padding: 15px 16px; border: 1px solid var(--oc-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fff; }
.oc-filter-bar.orders { grid-template-columns: 205px 205px 185px minmax(260px, 1fr) auto; border: 0; border-top: 1px solid #eee9e6; border-radius: 0; padding: 13px 0 0; }
.oc-filter-bar label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #494d54; font-size: 12px; font-weight: 600; }
.oc-filter-bar select, .oc-filter-bar input { width: 100%; height: 38px; border: 1px solid #dcd7d3; border-radius: 5px; outline: 0; background: #fff; color: #3e4248; padding: 0 12px; font-size: 13px; }
.oc-filter-bar select:focus, .oc-filter-bar input:focus { border-color: #a35b69; box-shadow: 0 0 0 3px rgba(135, 38, 58, .08); }
.oc-search { position: relative; align-self: end; }
.oc-search .oc-icon { position: absolute; left: 12px; bottom: 10px; color: #878b93; }
.oc-search input { padding-left: 39px; }

.oc-table-card { min-width: 0; overflow: hidden; border: 1px solid var(--oc-line); border-radius: 0 0 8px 8px; background: #fff; }
.oc-table-wrap { min-width: 0; overflow: auto; }
.oc-table { width: 100%; border-collapse: collapse; color: #3c4047; table-layout: fixed; }
.oc-table th { height: 43px; padding: 0 13px; border-bottom: 1px solid var(--oc-line); background: #fcfbfa; color: #4b4f56; font-size: 12px; font-weight: 700; text-align: left; white-space: nowrap; }
.oc-table td { height: 66px; padding: 9px 13px; border-bottom: 1px solid #eeeae7; color: #41454b; font-size: 12px; vertical-align: middle; }
.oc-table tr:last-child td { border-bottom: 0; }
.oc-table tbody tr:hover, .oc-table tbody tr.selected { background: #fff9fa; }
.oc-table td > b, .oc-table td > small { display: block; }
.oc-table td > b { color: #353940; font-size: 12px; }
.oc-table td > small { margin-top: 5px; color: #81858d; font-size: 11px; line-height: 1.25; }
.oc-table .check { width: 42px; padding-left: 17px; padding-right: 4px; }
.oc-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--oc-wine); }
.oc-table.workbench th:nth-child(2) { width: 170px; }.oc-table.workbench th:nth-child(3) { width: 285px; }.oc-table.workbench th:nth-child(4) { width: 150px; }.oc-table.workbench th:nth-child(5) { width: 150px; }.oc-table.workbench th:nth-child(6) { width: 160px; }.oc-table.workbench th:nth-child(7) { width: 168px; text-align: center; }
.oc-table.workbench td:last-child { text-align: center; }
.oc-table.all-orders { min-width: 1160px; }
.oc-table.all-orders th:nth-child(2) { width: 160px; }.oc-table.all-orders th:nth-child(3) { width: 155px; }.oc-table.all-orders th:nth-child(4) { width: 245px; }.oc-table.all-orders th:nth-child(5) { width: 135px; }.oc-table.all-orders th:nth-child(6) { width: 150px; }.oc-table.all-orders th:nth-child(7) { width: 155px; }.oc-table.all-orders th:nth-child(8) { width: 125px; }.oc-table.all-orders th:nth-child(9) { width: 86px; }

.oc-order-link { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 0; border: 0; background: transparent; color: #2d3036; text-align: left; }
.oc-order-link b { font-size: 12px; font-weight: 700; }
.oc-source { display: inline-flex; align-items: center; gap: 4px; min-height: 21px; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 650; line-height: 1; white-space: nowrap; }
.oc-source.orange { color: #d66b16; background: #fff1e5; }.oc-source.blue { color: #3976bd; background: #eaf3ff; }.oc-source.cyan { color: #268696; background: #e8f8fa; }.oc-source.purple { color: #6556b4; background: #f0edff; }.oc-source.red { color: #c7424b; background: #ffeaec; }

.oc-product { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.oc-product-thumb { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 6px; color: #fff; background: linear-gradient(145deg, #9b8f88, #d6cdc5); }
.oc-product-thumb.wine { background: linear-gradient(145deg, #7f3143, #bd7582); }.oc-product-thumb.sand { background: linear-gradient(145deg, #a78363, #dcc9b6); }.oc-product-thumb.blue { background: linear-gradient(145deg, #3f6e92, #8eafc8); }.oc-product-thumb.green { background: linear-gradient(145deg, #447966, #96b9a8); }.oc-product-thumb.purple { background: linear-gradient(145deg, #665c87, #aea5c8); }
.oc-product span:nth-child(2) { min-width: 0; }
.oc-product b, .oc-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-product b { color: #363a40; font-size: 12px; }.oc-product small { margin-top: 4px; color: #858991; font-size: 10px; }.oc-product em { color: #575b62; font-size: 11px; font-style: normal; }

.oc-status { display: inline-flex; align-items: center; justify-content: center; min-width: 65px; min-height: 22px; padding: 2px 9px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.oc-status.gray { color: #686c74; background: #eeeef0; }.oc-status.orange { color: #d56c16; background: #fff0e2; }.oc-status.amber { color: #bd8400; background: #fff4d8; }.oc-status.green { color: #278159; background: #e4f4eb; }.oc-status.blue { color: #2e72bd; background: #e6f0ff; }.oc-status.red { color: #d53b45; background: #ffe7e9; }
.oc-next { min-width: 112px; min-height: 35px; padding: 0 13px; background: #fff; }
.oc-next.small { min-width: 70px; min-height: 30px; }
.oc-next.wine { border-color: #aa3e55; color: #a52d45; }.oc-next.orange { border-color: #e5842f; color: #d86912; }.oc-next.amber { border-color: #d6a11c; color: #b77d00; }.oc-next.green { border-color: #3b9a72; color: #267e58; }.oc-next.blue { border-color: #3d7fc4; color: #2f70b5; }.oc-next.danger { border-color: #db4b54; color: #cb323c; }
.oc-next:hover { color: #fff; filter: brightness(.96); }
.oc-next.wine:hover { background: #a52d45; }.oc-next.orange:hover { background: #d86912; }.oc-next.amber:hover { background: #b77d00; }.oc-next.green:hover { background: #267e58; }.oc-next.blue:hover { background: #2f70b5; }.oc-next.danger:hover { background: #cb323c; }
.oc-deadline { display: block; font-size: 12px; }.oc-deadline.urgent { color: #e14043; }.oc-deadline.safe { color: #2d9467; }.oc-deadline.done { color: #2d9467; }
.oc-progress { display: flex; flex-direction: column; gap: 8px; }
.oc-progress > span { display: flex; align-items: center; gap: 8px; }.oc-progress > span b { color: #60646c; font-size: 10px; }
.oc-progress > i { width: 100%; height: 4px; overflow: hidden; border-radius: 4px; background: #e9e9eb; }.oc-progress > i em { display: block; height: 100%; border-radius: inherit; background: #387ec8; }
.oc-link-button, .oc-more { padding: 3px 5px; border: 0; background: transparent; color: #34383e; font-size: 11px; }.oc-link-button:hover, .oc-more:hover { color: var(--oc-wine); }
.oc-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 8px 16px; border-top: 1px solid #ece8e5; color: #6d7179; font-size: 11px; }
.oc-table-footer nav { display: flex; align-items: center; gap: 6px; }.oc-table-footer button, .oc-table-footer select { height: 28px; min-width: 30px; border: 1px solid #dfdbd8; border-radius: 4px; background: #fff; color: #565a61; font-size: 11px; }.oc-table-footer button.active { border-color: var(--oc-wine); background: var(--oc-wine); color: #fff; }.oc-table-footer button:disabled { opacity: .42; cursor: default; }.oc-table-footer select { padding: 0 8px; }
.oc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 160px; color: #9a9da4; text-align: center; }.oc-empty b { color: #5c6067; font-size: 14px; }.oc-empty span { font-size: 11px; }.oc-empty.large { min-height: 360px; border: 1px solid var(--oc-line); border-radius: 8px; background: #fff; }

.oc-scan-dock { position: fixed; right: 95px; bottom: 18px; z-index: 20; display: grid; grid-template-columns: 28px minmax(220px, 310px) auto; align-items: center; gap: 8px; padding: 8px 9px 8px 13px; border: 1px solid #d8d3cf; border-radius: 8px; background: rgba(255,255,255,.96); color: var(--oc-wine); box-shadow: 0 8px 24px rgba(50, 36, 38, .13); backdrop-filter: blur(8px); }
.oc-scan-dock input { height: 34px; border: 0; outline: 0; color: #4d5158; background: transparent; font-size: 12px; }.oc-scan-dock button { height: 32px; padding: 0 13px; border: 0; border-radius: 5px; background: var(--oc-wine); color: #fff; font-size: 11px; }

.oc-orders-filters { margin-bottom: 0; padding: 13px 16px 15px; border: 1px solid var(--oc-line); border-radius: 8px 8px 0 0; background: #fff; }
.oc-source-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }.oc-source-filters > span { margin-right: 4px; color: #575b62; font-size: 12px; font-weight: 650; }.oc-source-filters button { min-height: 30px; padding: 0 12px; border: 1px solid #ddd8d4; border-radius: 5px; background: #fff; color: #5a5e65; font-size: 11px; }.oc-source-filters button.active { border-color: #b55568; color: var(--oc-wine); background: #fff8f9; }
.orders-card { border-radius: 0 0 8px 8px; }

.oc-dgj-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.oc-dgj-page-head { align-items: flex-start; flex-wrap: wrap; gap: 14px 28px; }
.oc-dgj-page-head > .oc-dgj-title { display: grid; grid-template-columns: max-content minmax(210px, 1fr); align-items: center; gap: 0 18px; flex: 1 1 455px; padding-top: 4px; }
.oc-dgj-page-head > .oc-dgj-title p { margin: 0; max-width: 420px; line-height: 1.55; }
.oc-dgj-page-head > .oc-dgj-head-tools { display: flex; flex: 1 1 650px; align-items: flex-start; justify-content: flex-end; min-width: 0; }
.oc-dgj-head-tools .oc-head-actions { width: 100%; }
.oc-dgj-accounts { margin-bottom: 13px; overflow: hidden; border: 1px solid var(--oc-line); border-radius: 8px; background: #fff; }
.oc-dgj-accounts > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 10px 15px; border-bottom: 1px solid #ece7e4; }
.oc-dgj-accounts > header h3 { margin: 0 0 4px; color: #3f3a3d; font-size: 13px; }
.oc-dgj-accounts > header p { margin: 0; color: #8b878d; font-size: 9px; }
.oc-dgj-accounts > header > span { flex: 0 0 auto; padding: 4px 8px; border-radius: 12px; background: #f7edef; color: var(--oc-wine); font-size: 9px; font-weight: 700; }
.oc-dgj-account-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.oc-dgj-account { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; min-width: 0; padding: 12px; border: 1px solid #e6e1de; border-radius: 7px; background: #fff; }
.oc-dgj-account.selected { border-color: #bd7180; background: #fffafb; box-shadow: inset 3px 0 var(--oc-wine); }
.oc-dgj-account.disabled { opacity: .62; background: #faf9f8; }
.oc-dgj-account > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f5e9ec; color: var(--oc-wine); }
.oc-dgj-account > div { min-width: 0; }
.oc-dgj-account header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oc-dgj-account header b, .oc-dgj-account span, .oc-dgj-account small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-dgj-account header b { color: #3e4248; font-size: 11px; }
.oc-dgj-account header em { padding: 2px 6px; border-radius: 8px; background: #edf6f1; color: #28815a; font-size: 8px; font-style: normal; white-space: nowrap; }
.oc-dgj-account.selected header em { background: #f4e4e8; color: var(--oc-wine); }
.oc-dgj-account.disabled header em { background: #ecebed; color: #777b82; }
.oc-dgj-account span { margin-top: 5px; color: #5d6168; font-size: 10px; }
.oc-dgj-account small { margin-top: 3px; color: #97939a; font-size: 8px; }
.oc-dgj-account p { display: flex; align-items: center; gap: 4px; margin: 7px 0 0; color: #716c72; font-size: 8px; }
.oc-dgj-account p .oc-icon { color: #398762; }
.oc-dgj-account > footer { grid-column: 1 / -1; display: flex; gap: 6px; padding-top: 9px; border-top: 1px solid #f0ece9; }
.oc-dgj-account > footer button { min-height: 27px; padding: 0 9px; border: 1px solid #ddd7d4; border-radius: 4px; background: #fff; color: #5b575c; font-size: 8px; }
.oc-dgj-account > footer button:hover { border-color: #b56575; color: var(--oc-wine); }
.oc-dgj-account > footer button:disabled { opacity: .45; cursor: not-allowed; }
.oc-dgj-account-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 88px; color: var(--oc-wine); }
.oc-dgj-account-empty span { display: flex; flex-direction: column; gap: 4px; }
.oc-dgj-account-empty b { color: #474249; font-size: 11px; }.oc-dgj-account-empty small { color: #8d8990; font-size: 9px; }
.oc-dgj-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; margin-bottom: 13px; padding: 10px 14px; border: 1px solid #ead8dc; border-radius: 7px; background: #fffafb; }
.oc-dgj-status > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }.oc-dgj-status b { display: flex; align-items: center; gap: 8px; color: #423b3e; font-size: 12px; }.oc-dgj-status b i { width: 8px; height: 8px; border-radius: 50%; }.oc-dgj-status b i.ready { background: #2d9869; box-shadow: 0 0 0 4px #e7f5ed; }.oc-dgj-status b i.manual { background: #db8a21; box-shadow: 0 0 0 4px #fff2dc; }.oc-dgj-status span { overflow: hidden; color: #858188; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.oc-dgj-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 11px; min-height: 590px; }
.oc-dgj-account-rail { display: flex; flex-direction: column; min-width: 0; min-height: 590px; margin-bottom: 0; }
.oc-dgj-account-rail > header { align-items: flex-start; min-height: 64px; padding: 11px 12px; }.oc-dgj-account-rail > header p { margin-top: 3px; line-height: 1.35; }
.oc-dgj-account-rail .oc-dgj-account-list { grid-template-columns: 1fr; align-content: start; flex: 1; overflow-y: auto; padding: 9px; }
.oc-dgj-account-rail .oc-dgj-account { padding: 10px; }.oc-dgj-account-rail .oc-dgj-account > footer { flex-wrap: wrap; }.oc-dgj-account-rail .oc-dgj-account > footer button { flex: 1 1 auto; padding: 0 6px; }
.oc-dgj-account-rail .oc-dgj-account-empty { flex-direction: column; min-height: 210px; padding: 16px 8px; text-align: center; }.oc-dgj-account-rail .oc-dgj-account-empty span { align-items: center; }.oc-dgj-account-rail .oc-dgj-account-empty .oc-primary { width: 100%; }
.oc-dgj-account-note { display: flex; align-items: flex-start; gap: 6px; padding: 10px 11px; border-top: 1px solid #eadfdc; background: #fffaf4; color: #817579; font-size: 8px; line-height: 1.5; }.oc-dgj-account-note .oc-icon { flex: 0 0 auto; color: var(--oc-wine); }
.oc-dgj-ledger, .oc-dgj-embed { min-width: 0; overflow: hidden; border: 1px solid var(--oc-line); border-radius: 8px; background: #fff; }
.oc-dgj-ledger { display: flex; flex-direction: column; }.oc-dgj-ledger > header, .oc-dgj-embed > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 0 14px; border-bottom: 1px solid #ece7e4; }.oc-dgj-ledger h3 { margin: 0; font-size: 13px; }.oc-dgj-ledger > header span { color: #8b878d; font-size: 9px; }.oc-dgj-ledger > div { flex: 1; overflow-y: auto; }.oc-dgj-ledger article { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 68px; padding: 9px 12px; border-bottom: 1px solid #f0ece9; }.oc-dgj-ledger article > i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 6px; background: #f5e9ec; color: var(--oc-wine); }.oc-dgj-ledger article > i.failed { background: #ffe9eb; color: #d73f49; }.oc-dgj-ledger article > i.partial { background: #fff3df; color: #d77b18; }.oc-dgj-ledger article div { min-width: 0; }.oc-dgj-ledger article b, .oc-dgj-ledger article span, .oc-dgj-ledger article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.oc-dgj-ledger article b { color: #454147; font-size: 10px; }.oc-dgj-ledger article span { margin: 3px 0; color: #6f6b71; font-size: 9px; }.oc-dgj-ledger article small, .oc-dgj-ledger article time { color: #99959a; font-size: 8px; }.oc-dgj-ledger > footer { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-top: 1px solid #eadfdc; background: #fffaf4; }.oc-dgj-ledger > footer b { color: #6a5558; font-size: 10px; }.oc-dgj-ledger > footer span { color: #8d7e80; font-size: 9px; line-height: 1.55; }
.oc-dgj-embed { position: relative; display: grid; grid-template-rows: 50px minmax(440px, 1fr) auto; }.oc-dgj-embed > header > div { display: flex; flex-direction: column; gap: 3px; }.oc-dgj-embed > header b { color: #433f44; font-size: 12px; }.oc-dgj-embed > header span { color: #8b878d; font-size: 9px; }.oc-dgj-embed > header button { border: 0; background: transparent; color: var(--oc-wine); font-size: 9px; }.oc-dgj-embed iframe { width: 100%; height: 100%; min-height: 440px; border: 0; background: #faf8f5; }.oc-dgj-embed-note { display: flex; align-items: center; gap: 7px; min-height: 39px; padding: 8px 12px; border-top: 1px solid #ece7e4; background: #fcfbfa; color: #7e7a80; font-size: 9px; line-height: 1.45; }

.oc-drawer { position: fixed; top: 0; right: 72px; bottom: 0; z-index: 80; width: min(410px, calc(100vw - 100px)); overflow-y: auto; padding: 21px 20px 94px; border-left: 1px solid var(--oc-line); background: #fff; box-shadow: -15px 0 35px rgba(50, 39, 40, .11); }
.oc-drawer > header { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 22px; }.oc-drawer > header > div { display: flex; align-items: center; gap: 10px; }.oc-drawer h3 { margin: 0; font-size: 21px; }.oc-drawer > header > button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f5f2f1; color: #555960; }
.oc-order-identity { margin: 0 0 20px; }.oc-order-identity div { display: grid; grid-template-columns: 90px 1fr; min-height: 31px; align-items: center; }.oc-order-identity dt { color: #777b83; font-size: 11px; }.oc-order-identity dd { margin: 0; color: #35383f; font-size: 12px; font-weight: 600; }
.oc-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 20px; padding: 6px 0 0; }.oc-steps::before { content: ""; position: absolute; top: 21px; left: 12%; right: 12%; border-top: 1px dashed #cfcac7; }.oc-steps span { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #63676f; font-size: 10px; }.oc-steps span i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #e9e9eb; color: #454951; font-style: normal; }.oc-steps span.active { color: var(--oc-wine); }.oc-steps span.active i, .oc-steps span.done i { background: var(--oc-wine); color: #fff; }.oc-steps span b { font-weight: 650; }
.oc-drawer-card { margin-bottom: 13px; padding: 14px; border: 1px solid var(--oc-line); border-radius: 7px; background: #fff; }.oc-drawer-card > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }.oc-drawer-card h4 { margin: 0; color: #35383e; font-size: 12px; }.oc-drawer-card header span { color: #898d94; font-size: 10px; }.oc-drawer-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 12px; border-top: 1px solid #ebe7e4; color: #72767e; font-size: 11px; }.oc-drawer-card footer b { color: #33373d; font-size: 13px; }.oc-drawer-card dl { margin: 0; }.oc-drawer-card dl div { display: grid; grid-template-columns: 105px 1fr; min-height: 28px; align-items: center; }.oc-drawer-card dt { color: #797d85; font-size: 10px; }.oc-drawer-card dd { margin: 0; color: #44484f; font-size: 11px; }
.oc-drawer-actions { position: fixed; right: 72px; bottom: 0; width: min(410px, calc(100vw - 100px)); display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--oc-line); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }

.oc-exception-layout { display: grid; grid-template-columns: 185px minmax(590px, 1fr) 345px; gap: 13px; min-width: 0; align-items: stretch; }
.oc-exception-nav, .oc-exception-detail { border: 1px solid var(--oc-line); border-radius: 8px; background: #fff; }
.oc-exception-nav { padding: 13px 0; }.oc-exception-nav h3 { margin: 0 15px 10px; color: #3e4248; font-size: 12px; }.oc-exception-nav button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 43px; padding: 0 15px; border: 0; border-left: 3px solid transparent; background: transparent; color: #4f535a; font-size: 11px; }.oc-exception-nav button b { display: grid; place-items: center; min-width: 23px; height: 21px; padding: 0 6px; border-radius: 10px; background: #ededef; color: #656970; font-size: 10px; }.oc-exception-nav button.active { border-left-color: var(--oc-wine); background: var(--oc-wine-soft); color: var(--oc-wine); }.oc-exception-nav button.active b { background: var(--oc-wine); color: #fff; }
.oc-exception-table { border-radius: 8px; }.oc-exception-table > header { min-height: 48px; display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--oc-line); }.oc-exception-table h3 { margin: 0; font-size: 12px; }.oc-exception-table h3 span { color: #888c93; font-weight: 500; }.oc-exception-table .oc-table { min-width: 720px; }.oc-exception-table .oc-table th:nth-child(1) { width: 132px; }.oc-exception-table .oc-table th:nth-child(2) { width: 130px; }.oc-exception-table .oc-table th:nth-child(3) { width: 90px; }.oc-exception-table .oc-table th:nth-child(4) { width: 100px; }.oc-exception-table .oc-table th:nth-child(5) { width: 90px; }.oc-exception-table .oc-table th:nth-child(6) { width: 90px; }.oc-exception-table .oc-table th:nth-child(7) { width: 90px; }.oc-wait { color: #e3721a; font-size: 11px; }
.oc-exception-detail { padding: 15px; }.oc-exception-detail > header span { color: #5e6269; font-size: 11px; }.oc-exception-detail > header h3 { margin: 5px 0 12px; font-size: 20px; }.oc-alert-strip { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 8px 10px; border: 1px solid #f2afb5; border-radius: 5px; background: #fff1f2; color: #d33a43; font-size: 11px; font-weight: 650; }.oc-exception-detail section h4 { margin: 16px 0 9px; color: #454950; font-size: 11px; }
.oc-checklist { margin: 0; padding: 0; border: 1px solid #e8e4e1; border-radius: 5px; list-style: none; }.oc-checklist li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; min-height: 34px; padding: 0 10px; border-bottom: 1px solid #efebe8; color: #555960; font-size: 10px; }.oc-checklist li:last-child { border-bottom: 0; }.oc-checklist li.done .oc-icon, .oc-checklist li.done b { color: #28a068; }.oc-checklist li.pending .oc-icon, .oc-checklist li.pending b { color: #e58918; }.oc-checklist li b { font-weight: 650; }
.oc-owner { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; color: #4f535a; font-size: 10px; }.oc-owner span { flex: 1; }.oc-owner button { border: 0; background: transparent; color: #6b7078; font-size: 10px; }
.oc-exception-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.oc-exception-actions .oc-primary { grid-column: 1 / -1; }
.oc-audit ol { margin: 0; padding: 0 0 0 7px; list-style: none; }.oc-audit li { position: relative; display: grid; grid-template-columns: 85px 1fr; gap: 8px; min-height: 38px; padding: 0 0 7px 13px; border-left: 1px solid #d8d4d1; color: #8b8f96; font-size: 9px; }.oc-audit li i { position: absolute; left: -3px; top: 1px; width: 6px; height: 6px; border-radius: 50%; background: #8d9198; }.oc-audit li b { color: #5a5e65; font-size: 9px; font-weight: 500; }

.oc-settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 680px; border: 1px solid var(--oc-line); border-radius: 8px; background: #fff; overflow: hidden; }
.oc-settings-nav { padding: 16px 0; border-right: 1px solid var(--oc-line); background: #fcfbfa; }.oc-settings-nav button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 51px; padding: 0 22px; border: 0; border-left: 3px solid transparent; background: transparent; color: #4d5158; font-size: 12px; font-weight: 650; text-align: left; }.oc-settings-nav button.active { border-left-color: var(--oc-wine); background: var(--oc-wine-soft); color: var(--oc-wine); }
.oc-settings-main { min-width: 0; padding: 16px 18px 18px; }.oc-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 13px; }.oc-settings-head h3 { margin: 0; font-size: 19px; }.oc-settings-head p { margin: 5px 0 0; color: #858991; font-size: 10px; }
.settings-table { min-width: 970px; }.settings-table th:nth-child(1) { width: 210px; }.settings-table th:nth-child(2) { width: 130px; }.settings-table th:nth-child(3), .settings-table th:nth-child(4), .settings-table th:nth-child(5) { width: 125px; }.settings-table th:nth-child(6) { width: 140px; }.settings-table th:nth-child(7) { width: 120px; }.settings-table th:nth-child(8) { width: 70px; }
.oc-capability { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; }.oc-capability.yes { color: #299461; }.oc-capability.no { color: #d7464f; }.oc-capability.pending { color: #d78817; }
.oc-setting-status { display: inline-flex; align-items: center; min-height: 23px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 650; }.oc-setting-status.green { color: #28845b; background: #e7f5ed; border: 1px solid #a9d8bc; }.oc-setting-status.orange { color: #d77a13; background: #fff3df; border: 1px solid #f2c680; }.oc-setting-status.blue { color: #2779bd; background: #e8f4ff; border: 1px solid #a8ceee; }
.oc-setting-detail { margin-top: 13px; padding: 13px; border: 1px solid var(--oc-line); border-radius: 7px; background: #fff; }.oc-setting-detail > header { margin-bottom: 10px; color: #42464c; font-size: 11px; }.oc-setting-detail > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.oc-setting-detail article { min-height: 145px; padding: 12px 14px; border: 1px solid #e9e5e2; border-radius: 6px; }.oc-setting-detail h4 { margin: 0 0 10px; font-size: 12px; }.oc-setting-detail dl { margin: 0; }.oc-setting-detail dl div { display: grid; grid-template-columns: 90px 1fr; min-height: 27px; align-items: center; }.oc-setting-detail dt { color: #858991; font-size: 9px; }.oc-setting-detail dd { margin: 0; color: #4d5158; font-size: 9px; }
.oc-settings-notice { display: flex; align-items: center; gap: 9px; min-height: 45px; margin-top: 14px; padding: 9px 14px; border: 1px solid #edbd74; border-radius: 6px; background: #fffaf0; color: #665f55; font-size: 10px; }.oc-settings-notice .oc-icon { color: #e18a16; }
.oc-settings-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.oc-config-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.oc-config-grid article { display: grid; grid-template-columns: 44px 1fr; gap: 11px; min-height: 168px; padding: 18px; border: 1px solid var(--oc-line); border-radius: 8px; background: #fff; }.oc-config-grid article > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--oc-wine-soft); color: var(--oc-wine); }.oc-config-grid h4 { margin: 2px 0 7px; font-size: 14px; }.oc-config-grid p { margin: 0; color: #7f838b; font-size: 10px; line-height: 1.6; }.oc-config-grid button { grid-column: 1 / -1; align-self: end; justify-self: start; }

.oc-modal-bg { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 28px; background: rgba(31, 26, 27, .48); backdrop-filter: blur(3px); }
.oc-side-modal-bg { place-items: stretch end; padding: 0; }
.oc-side-modal { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(620px, calc(100vw - 108px)); height: 100%; overflow: hidden; border-left: 1px solid var(--oc-line); background: #fff; box-shadow: -20px 0 55px rgba(35, 24, 27, .22); }
.oc-side-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; min-height: 98px; padding: 21px 22px 17px; border-bottom: 1px solid var(--oc-line); background: linear-gradient(120deg, #fff 0%, #fff8f9 100%); }.oc-side-modal > header span { color: var(--oc-wine); font-size: 10px; font-weight: 750; letter-spacing: 1.4px; }.oc-side-modal > header h3 { margin: 5px 0 4px; font-size: 22px; }.oc-side-modal > header p { margin: 0; color: #858087; font-size: 12px; }.oc-side-modal > header button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e4dedd; border-radius: 7px; background: #fff; color: #555960; }
.oc-side-modal > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; padding: 13px 22px; border-top: 1px solid var(--oc-line); background: #fff; }.oc-side-modal > footer > span { color: #8b878d; font-size: 11px; }.oc-side-modal > footer > div { display: flex; gap: 9px; }.oc-side-modal > footer button { min-height: 38px; padding: 8px 16px; font-size: 13px; }
.oc-import-record-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 22px; border-bottom: 1px solid #eee9e6; background: #fcfbfa; }.oc-import-record-summary article { padding: 12px 14px; border: 1px solid #e8e2df; border-radius: 8px; background: #fff; }.oc-import-record-summary span { display: block; color: #858087; font-size: 11px; }.oc-import-record-summary strong { display: block; margin-top: 5px; color: #3d393e; font-size: 21px; }
.oc-import-record-list { overflow-y: auto; padding: 16px 22px 22px; }
.oc-import-record-card { margin-bottom: 12px; overflow: hidden; border: 1px solid #e5dfdc; border-radius: 9px; background: #fff; }.oc-import-record-card > header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px 14px; border-bottom: 1px solid #eeeae7; }.oc-import-record-card > header > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: #f6e9ec; color: var(--oc-wine); }.oc-import-record-card > header > i.failed { background: #ffe9eb; color: #d5404a; }.oc-import-record-card > header > i.partial, .oc-import-record-card > header > i.processing { background: #fff2de; color: #d37b18; }.oc-import-record-card > header > div { min-width: 0; }.oc-import-record-card > header b, .oc-import-record-card > header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.oc-import-record-card > header b { color: #403c41; font-size: 13px; }.oc-import-record-card > header span { margin-top: 4px; color: #8b878d; font-size: 10px; }.oc-import-record-card > header em { padding: 4px 8px; border-radius: 12px; background: #e8f5ee; color: #2d8b62; font-size: 10px; font-style: normal; white-space: nowrap; }.oc-import-record-card > header em.partial, .oc-import-record-card > header em.processing { background: #fff1db; color: #c97012; }.oc-import-record-card > header em.failed { background: #ffe8ea; color: #cc3943; }
.oc-import-record-card > div { display: grid; grid-template-columns: repeat(4, 1fr); padding: 11px 14px; }.oc-import-record-card > div span { color: #88848a; font-size: 10px; }.oc-import-record-card > div strong { display: block; margin-top: 3px; color: #49454a; font-size: 14px; }.oc-import-record-card > footer { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid #f0ece9; background: #fcfbfa; color: #99949a; font-size: 9px; }.oc-import-record-card > footer code { overflow: hidden; color: #6d686e; font-family: inherit; text-overflow: ellipsis; white-space: nowrap; }
.oc-import-record-empty { display: flex; min-height: 320px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #aaa5aa; text-align: center; }.oc-import-record-empty b { color: #565157; font-size: 15px; }.oc-import-record-empty span { max-width: 330px; font-size: 11px; line-height: 1.55; }
.oc-modal { width: min(760px, 94vw); max-height: 92vh; overflow: auto; border-radius: 10px; background: #fff; box-shadow: 0 24px 70px rgba(25, 18, 20, .25); }.oc-modal.intake { width: min(680px, 94vw); }.oc-modal.print { width: min(880px, 94vw); }
.oc-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 15px; border-bottom: 1px solid var(--oc-line); }.oc-modal > header span { color: var(--oc-wine); font-size: 9px; font-weight: 750; letter-spacing: 1.5px; }.oc-modal > header h3 { margin: 4px 0 3px; font-size: 21px; }.oc-modal > header p { margin: 0; color: #858991; font-size: 10px; }.oc-modal > header button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f3f0ef; color: #5c6067; }
.oc-modal > footer, .oc-modal form > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--oc-line); }
.oc-dgj-account-modal { width: min(920px, 94vw); }
.oc-dgj-account-modal > header span { font-size: 10px; }
.oc-dgj-account-modal > header h3 { font-size: 22px; }
.oc-dgj-account-modal > header p { font-size: 12px; }
.oc-account-security-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 22px 16px; padding: 11px 12px; border: 1px solid #ead19c; border-radius: 6px; background: #fffaf0; color: #746a5d; font-size: 11px; line-height: 1.55; }
.oc-account-security-note .oc-icon { flex: 0 0 auto; color: #b77616; }
.oc-import-modal { width: min(720px, 94vw); }.oc-import-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; padding: 20px 22px; }.oc-file-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 190px; padding: 20px; border: 1px dashed #c9adb4; border-radius: 8px; background: #fffafb; color: var(--oc-wine); text-align: center; }.oc-file-drop b { margin: 10px 0 6px; color: #443d40; font-size: 13px; }.oc-file-drop span { max-width: 330px; color: #858087; font-size: 10px; line-height: 1.55; }.oc-file-drop input { width: 100%; margin-top: 14px; padding: 8px; border: 1px solid #ddd5d7; border-radius: 5px; background: #fff; color: #555057; font-size: 10px; }.oc-import-body section { padding: 14px; border: 1px solid #e7e1de; border-radius: 8px; }.oc-import-body h4 { margin: 0 0 11px; font-size: 12px; }.oc-import-body ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }.oc-import-body li { display: flex; align-items: flex-start; gap: 7px; color: #656168; font-size: 10px; line-height: 1.45; }.oc-import-body li .oc-icon { color: #39946d; }
.oc-intake-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 22px; }.oc-intake-grid button { display: grid; grid-template-columns: 42px 1fr; gap: 3px 12px; min-height: 105px; padding: 18px; border: 1px solid var(--oc-line); border-radius: 8px; background: #fff; color: #4c5057; text-align: left; }.oc-intake-grid button:hover { border-color: #b86979; background: #fffafb; }.oc-intake-grid .oc-icon { grid-row: 1 / span 2; align-self: center; color: var(--oc-wine); }.oc-intake-grid b { align-self: end; color: #33373d; font-size: 13px; }.oc-intake-grid span { color: #888c93; font-size: 10px; line-height: 1.5; }
.oc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 20px 22px; }.oc-form-grid label, .oc-print-options label { display: flex; flex-direction: column; gap: 6px; color: #4f535a; font-size: 10px; font-weight: 650; }.oc-form-grid label.wide { grid-column: 1 / -1; }.oc-form-grid input, .oc-form-grid select, .oc-form-grid textarea, .oc-print-options input, .oc-print-options select { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid #dcd7d3; border-radius: 5px; outline: 0; color: #44484f; resize: vertical; }.oc-form-grid input:focus, .oc-form-grid textarea:focus, .oc-print-options input:focus, .oc-print-options select:focus { border-color: #a95b6c; box-shadow: 0 0 0 3px rgba(135,38,58,.08); }
.oc-dgj-account-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; padding: 18px 22px; }
.oc-dgj-account-form-grid label { gap: 7px; font-size: 12px; }
.oc-dgj-account-form-grid label.span-2 { grid-column: span 2; }
.oc-dgj-account-form-grid input, .oc-dgj-account-form-grid select, .oc-dgj-account-form-grid textarea { min-height: 42px; padding: 9px 11px; font-size: 13px; line-height: 1.45; }
.oc-dgj-account-form-grid textarea { height: 42px; min-height: 42px; max-height: 74px; }
.oc-dgj-account-modal form > footer button { min-height: 38px; padding: 8px 16px; font-size: 13px; }
.oc-print-layout { display: grid; grid-template-columns: 315px 1fr; gap: 20px; padding: 20px 22px; }.oc-label-preview { aspect-ratio: 2 / 3; padding: 16px; border: 1px solid #a9a5a2; border-radius: 6px; background: #fff; box-shadow: 0 7px 18px rgba(45,35,35,.08); }.oc-label-preview > header { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid #333; font-size: 10px; }.oc-label-preview > div { display: flex; flex-direction: column; height: calc(100% - 30px); }.oc-label-preview strong { padding: 28px 0 18px; border-bottom: 1px dashed #777; font-size: 18px; text-align: center; }.oc-label-preview p { margin: 14px 0 0; color: #4c5057; font-size: 10px; line-height: 1.6; }.oc-label-preview code { margin-top: auto; padding: 12px; border-top: 1px solid #333; color: #222; font-size: 16px; letter-spacing: 2px; text-align: center; }
.oc-print-layout form { display: flex; flex-direction: column; }.oc-print-options { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.oc-modal-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 10px; border: 1px solid #e4c386; border-radius: 5px; background: #fffaf0; color: #73695b; font-size: 10px; line-height: 1.55; }.oc-print-layout form footer { margin-top: auto; padding-left: 0; padding-right: 0; padding-bottom: 0; }

/* Order center type scale and the two reference-page layouts. */
.oc-shell { --oc-metric-strip-height: 132px; font-size: 14px; line-height: 1.5; }
.oc-page-head h2 { font-size: 24px; font-weight: 700; letter-spacing: 0; }
.oc-page-head p { font-size: 14px; }
.oc-button, .oc-primary, .oc-next { min-height: 40px; font-size: 14px; }
.oc-table th { height: 44px; font-size: 13px; }
.oc-table td { height: 70px; font-size: 13px; }
.oc-table td > b, .oc-order-link b, .oc-product b { font-size: 13px; }
.oc-table td > small, .oc-product small { font-size: 12px; }
.oc-product em, .oc-link-button, .oc-more { font-size: 13px; }
.oc-source, .oc-status { min-height: 24px; font-size: 12px; }
.oc-progress > span b { font-size: 12px; }
.oc-table-footer, .oc-table-footer button, .oc-table-footer select { font-size: 12px; }
.oc-source-filters > span, .oc-source-filters button { font-size: 13px; }
.oc-source-filters button { min-height: 34px; padding: 0 14px; }

.oc-metric-strip { width: 100%; height: var(--oc-metric-strip-height); min-height: var(--oc-metric-strip-height); margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; border: 1px solid #ddd9d5; border-radius: 10px; background: #fff; scrollbar-width: none; }
.oc-metric-strip::-webkit-scrollbar { display: none; }

.oc-overview-strip { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); }
.oc-overview-primary { position: relative; display: flex; align-items: center; gap: 20px; padding: 20px 26px; color: #fff; background: linear-gradient(135deg, #7d2036 0%, #a42e4a 100%); }
.oc-overview-primary::after { content: ""; position: absolute; top: 50%; right: -10px; width: 20px; height: 20px; background: #9e2d48; transform: translateY(-50%) rotate(45deg); }
.oc-overview-primary > span { display: grid; flex: 0 0 auto; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.52); border-radius: 10px; }
.oc-overview-primary > div { display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 14px; }
.oc-overview-primary b { grid-column: 1 / -1; font-size: 14px; font-weight: 650; }
.oc-overview-primary strong { font-size: 38px; line-height: 1; font-weight: 700; }
.oc-overview-primary small { padding-bottom: 3px; color: rgba(255,255,255,.78); font-size: 12px; }
.oc-overview-items { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)); min-width: 0; padding-left: 10px; }
.oc-overview-item { display: flex; align-items: center; justify-content: center; gap: 18px; min-width: 0; padding: 18px; border-left: 1px solid #ebe8e5; }
.oc-overview-item > span { color: #33383f; }
.oc-overview-item > div { min-width: 0; }
.oc-overview-item b { display: flex; align-items: center; gap: 8px; color: #555a62; font-size: 13px; font-weight: 600; white-space: nowrap; }
.oc-overview-item b i { width: 7px; height: 7px; border-radius: 50%; background: #b9bdc2; }
.oc-overview-item.orange b i { background: #df871b; }.oc-overview-item.blue b i { background: #4b84bb; }.oc-overview-item.green b i { background: #2d8a62; }.oc-overview-item.purple b i { background: #8069a4; }
.oc-overview-item strong { display: block; margin-top: 8px; color: #292d33; font-size: 32px; line-height: 1; font-weight: 680; }

.oc-workflow-strip { position: relative; display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); padding: 12px 28px; }
.oc-workflow-strip::before { content: ""; position: absolute; top: 79px; left: 7%; right: 7%; height: 1px; background: #d8d5d2; }
.oc-workflow-metric { position: relative; z-index: 1; display: grid; grid-template-rows: 34px 24px 18px 1fr; place-items: center; min-width: 0; padding: 0 8px; border: 0; background: transparent; color: #3e434a; }
.oc-workflow-metric:hover, .oc-workflow-metric.selected { color: var(--oc-wine); }
.oc-workflow-icon { display: grid; place-items: center; color: currentColor; }
.oc-workflow-metric b { font-size: 13px; font-weight: 600; }
.oc-workflow-metric > i { display: block; width: 15px; height: 15px; margin-top: 2px; border: 2px solid #8b9096; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #fff; }
.oc-workflow-metric strong { color: #292d33; font-size: 28px; line-height: 1; font-weight: 670; }
.oc-workflow-metric.orange > i, .oc-workflow-metric.amber > i { border-color: #df8a17; box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff; background: #df8a17; }
.oc-workflow-metric.green > i { border-color: #348b66; box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff; background: #348b66; }
.oc-workflow-metric.blue > i { border-color: #4a83ba; box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff; background: #4a83ba; }
.oc-workflow-metric.red > i { border-color: #d63145; box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff; background: #d63145; }
.oc-workflow-metric.red { color: #c5283d; }

.oc-exception-strip { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
.oc-exception-primary { display: flex; align-items: center; gap: 20px; padding: 20px 26px; border: 0; border-right: 1px solid #ead4d9; background: #fff; color: #9d203a; text-align: left; }
.oc-exception-primary:hover, .oc-exception-primary.selected { background: #fff8f9; box-shadow: inset 3px 0 #a62943; }
.oc-exception-primary > span { display: grid; flex: 0 0 auto; place-items: center; width: 52px; height: 52px; }
.oc-exception-primary > div { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 15px; }
.oc-exception-primary b { grid-column: 1 / -1; color: #4b3d41; font-size: 14px; }
.oc-exception-primary strong { font-size: 34px; line-height: 1; }
.oc-exception-primary small { padding: 4px 9px; border: 1px solid #c46a7d; border-radius: 4px; color: #9d203a; font-size: 11px; white-space: nowrap; }
.oc-exception-metric-items { display: grid; grid-template-columns: repeat(5, minmax(115px, 1fr)); min-width: 0; }
.oc-exception-metric { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; padding: 14px; border: 0; border-left: 1px solid #ebe8e5; background: #fff; color: #343940; text-align: left; }
.oc-exception-metric:hover, .oc-exception-metric.selected { background: #fcfaf9; }
.oc-exception-metric > span { flex: 0 0 auto; color: #454a50; }
.oc-exception-metric > div { min-width: 0; }
.oc-exception-metric b { display: block; color: #555a61; font-size: 13px; font-weight: 600; white-space: nowrap; }
.oc-exception-metric strong { display: block; margin: 3px 0; color: #292d33; font-size: 28px; line-height: 1; font-weight: 670; }
.oc-exception-metric small { display: flex; align-items: center; gap: 6px; color: #8c9096; font-size: 11px; white-space: nowrap; }
.oc-exception-metric small i { width: 11px; height: 1px; background: #afb2b6; }
.oc-exception-metric.red, .oc-exception-metric.red b, .oc-exception-metric.red strong, .oc-exception-metric.red small { color: #a8273f; }
.oc-exception-metric.red small i { width: 7px; height: 7px; border-radius: 50%; background: #d42b41; }

.oc-orders-filters { padding: 14px 16px 16px; }
.oc-filter-bar.orders { display: block; padding: 14px 0 0; }
.oc-filter-fields { display: grid; grid-template-columns: 205px 205px 205px minmax(330px, 1fr); align-items: end; gap: 16px; }
.oc-filter-bar label { gap: 7px; font-size: 13px; }
.oc-filter-bar select, .oc-filter-bar input { height: 40px; font-size: 14px; }
.oc-date-filter > div { display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; overflow: hidden; border: 1px solid #dcd7d3; border-radius: 6px; background: #fff; }
.oc-date-filter > div:focus-within { border-color: #a35b69; box-shadow: 0 0 0 3px rgba(135, 38, 58, .08); }
.oc-date-filter input { min-width: 0; border: 0; border-radius: 0; box-shadow: none !important; }
.oc-date-filter i { color: #92969d; font-style: normal; text-align: center; }
.oc-filter-search-row { display: grid; grid-template-columns: minmax(300px, 1fr) 120px 120px; gap: 14px; margin-top: 14px; }
.oc-filter-search-row .oc-search { display: block; }
.oc-filter-search-row .oc-search .oc-icon { bottom: 11px; }
.oc-filter-submit { gap: 7px; }
.orders-card .oc-table tbody tr.selected { background: #f4f8fd; }
.orders-card .oc-table tbody tr.selected td:first-child { box-shadow: inset 3px 0 #5a8fc5; }

.oc-drawer { width: min(420px, calc(100vw - 100px)); padding: 24px 20px 96px; }
.oc-drawer > header { margin-bottom: 18px; }
.oc-drawer h3 { font-size: 22px; font-weight: 700; }
.oc-drawer > header > button { border-radius: 6px; background: #fff; }
.oc-order-identity { margin-bottom: 22px; }
.oc-order-identity div { grid-template-columns: 100px 1fr; min-height: 36px; }
.oc-order-identity dt { font-size: 13px; }
.oc-order-identity dd { font-size: 14px; }
.oc-steps { margin-bottom: 24px; padding-top: 8px; }
.oc-steps::before { top: 24px; }
.oc-steps span { gap: 9px; font-size: 13px; }
.oc-steps span i { width: 34px; height: 34px; font-size: 14px; }
.oc-drawer-card { margin-bottom: 14px; padding: 14px; border-radius: 6px; }
.oc-drawer-card > header { margin-bottom: 14px; }
.oc-drawer-card h4 { font-size: 14px; }
.oc-drawer-card header span { font-size: 12px; }
.oc-drawer-card dl div { grid-template-columns: 120px 1fr; min-height: 36px; }
.oc-drawer-card dt, .oc-drawer-card dd { font-size: 13px; }
.oc-drawer-card footer { font-size: 13px; }
.oc-drawer-card footer b { font-size: 15px; }
.oc-drawer-product { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; gap: 10px; }
.oc-drawer-product .oc-product { grid-template-columns: 50px minmax(0, 1fr); }
.oc-drawer-product .oc-product-thumb { width: 50px; height: 50px; }
.oc-drawer-product .oc-product em { display: none; }
.oc-drawer-product dl div { grid-template-columns: 46px 1fr; min-height: 28px; }
.oc-drawer-progress { display: flex; align-items: center; gap: 10px; }
.oc-drawer-progress i { flex: 1; height: 6px; overflow: hidden; border-radius: 4px; background: #e7e7e8; }
.oc-drawer-progress i em { display: block; height: 100%; border-radius: inherit; background: #2586d2; }
.oc-drawer-progress b { min-width: 34px; font-size: 12px; font-weight: 500; }
.oc-drawer-actions { width: min(420px, calc(100vw - 100px)); padding: 14px 20px; }

.oc-settings-layout { grid-template-columns: 230px minmax(0, 1fr); }
.oc-settings-nav { padding: 16px 0; background: #fff; }
.oc-settings-nav button { min-height: 54px; padding: 0 24px; font-size: 14px; }
.oc-settings-nav button .oc-icon { width: 22px; height: 22px; }
.oc-settings-main { padding: 16px 18px 18px; }
.oc-settings-head { margin-bottom: 14px; }
.oc-settings-head h3 { font-size: 20px; }
.oc-settings-head p { margin-top: 5px; font-size: 13px; }
.oc-settings-table-card { border-radius: 7px; }
.settings-table { min-width: 1120px; }
.settings-table th:nth-child(1) { width: 250px; }.settings-table th:nth-child(2) { width: 145px; }.settings-table th:nth-child(3), .settings-table th:nth-child(4), .settings-table th:nth-child(5) { width: 135px; }.settings-table th:nth-child(6) { width: 155px; }.settings-table th:nth-child(7) { width: 125px; }.settings-table th:nth-child(8) { width: 68px; }
.settings-table td { height: 62px; }
.settings-table tbody tr { cursor: pointer; }
.settings-table tbody tr.selected { background: #fff6f7; }
.settings-table tbody tr.selected td:first-child { box-shadow: inset 3px 0 var(--oc-wine); }
.oc-shop-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.oc-shop-name b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.oc-platform-mark { display: inline-grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #fff; font-size: 20px; font-weight: 800; line-height: 1; }
.oc-platform-mark.taobao { background: #ff6a13; }
.oc-platform-mark.tiktok { background: #111; text-shadow: -1px 0 #20d5ec, 1px 0 #ff2d55; }
.oc-platform-mark.tiktok b { transform: translateY(-1px); font-size: 23px; }
.oc-platform-mark.crm { background: #2d8eea; }
.oc-platform-mark.offline { background: #1f9a48; }
.oc-platform-mark.amazon { background: #1f2933; color: #ffae27; font-family: Georgia, serif; }
.oc-platform-mark.generic { background: #7c8794; }
.oc-capability { gap: 7px; font-size: 13px; white-space: nowrap; }
.oc-capability > i { display: inline-grid; flex: 0 0 auto; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 15px; font-style: normal; font-weight: 800; line-height: 1; }
.oc-capability.yes > i { background: #169641; }.oc-capability.no > i { background: #ed3f4b; }.oc-capability.pending > i { background: #f0a12c; }
.oc-setting-status { min-height: 26px; padding: 2px 9px; font-size: 12px; }
.oc-setting-detail { margin-top: 14px; padding: 14px; }
.oc-setting-detail > header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; }
.oc-setting-detail > header .oc-platform-mark { width: 28px; height: 28px; border-radius: 7px; font-size: 17px; }
.oc-setting-detail > div { gap: 10px; }
.oc-setting-detail article { min-height: 190px; padding: 14px 16px; }
.oc-setting-detail h4 { margin-bottom: 10px; font-size: 14px; }
.oc-setting-detail dl div { grid-template-columns: 105px 1fr; min-height: 30px; }
.oc-setting-detail dt, .oc-setting-detail dd { font-size: 12px; }
.oc-setting-detail dd { display: flex; align-items: center; gap: 5px; }
.oc-setting-detail dd .oc-icon { color: #1e9a45; }
.oc-health-dot { width: 8px; height: 8px; border-radius: 50%; background: #14a044; }
.oc-settings-notice { min-height: 52px; font-size: 13px; }
.oc-settings-actions { margin-top: 16px; }

/* Keep the rest of the order-center module on the same readable scale. */
.oc-empty span, .oc-dgj-accounts > header p, .oc-dgj-account-note, .oc-dgj-embed > header span, .oc-dgj-embed > header button, .oc-dgj-embed-note, .oc-config-grid p, .oc-exception-nav button, .oc-exception-detail > header span, .oc-alert-strip, .oc-exception-detail section h4, .oc-checklist li, .oc-owner { font-size: 12px; }
.oc-dgj-accounts > header h3, .oc-dgj-embed > header b, .oc-config-grid h4, .oc-exception-nav h3, .oc-exception-table h3 { font-size: 14px; }
.oc-modal > header p, .oc-intake-grid span, .oc-file-drop span, .oc-import-body li, .oc-form-grid label, .oc-print-options label, .oc-modal-notice { font-size: 12px; }
.oc-modal > header h3 { font-size: 22px; }

@media (max-width: 1350px) {
  .oc-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc-filter-bar { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .oc-filter-bar.orders { display: block; }
  .oc-filter-fields { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
  .oc-filter-bar .oc-search { grid-column: 1 / span 2; }
  .oc-exception-layout { grid-template-columns: 160px minmax(520px, 1fr); }
  .oc-exception-detail { grid-column: 1 / -1; }
  .oc-setting-detail > div { grid-template-columns: 1fr 1fr; }
  .oc-dgj-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc-dgj-account-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .oc-tabs { gap: 24px; }
  .oc-filter-bar, .oc-filter-bar.orders { grid-template-columns: 1fr 1fr; }.oc-filter-bar .oc-search { grid-column: 1 / -1; }.oc-filter-bar .oc-primary { grid-column: 1 / -1; }
  .oc-filter-bar.orders { display: block; }
  .oc-filter-search-row { grid-template-columns: minmax(220px, 1fr) 100px 100px; }
  .oc-exception-layout, .oc-settings-layout { grid-template-columns: 1fr; }.oc-exception-nav, .oc-settings-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--oc-line); }.oc-exception-nav h3 { display: none; }.oc-exception-nav button, .oc-settings-nav button { flex: 0 0 auto; width: auto; border-left: 0; border-bottom: 3px solid transparent; }.oc-exception-nav button.active, .oc-settings-nav button.active { border-left: 0; border-bottom-color: var(--oc-wine); }
  .oc-exception-detail { grid-column: auto; }.oc-config-grid { grid-template-columns: 1fr; }
  .oc-dgj-page-head > .oc-dgj-title { flex-basis: 100%; }.oc-dgj-page-head > .oc-dgj-head-tools { flex-basis: 100%; }
  .oc-dgj-layout { grid-template-columns: 1fr; }.oc-dgj-account-rail { min-height: auto; max-height: 430px; }.oc-dgj-account-rail .oc-dgj-account-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-scan-dock { right: 18px; }
  .oc-overview-strip { grid-template-columns: 210px minmax(500px, 1fr); }
  .oc-overview-primary { gap: 13px; padding: 16px 18px; }
  .oc-overview-items { grid-template-columns: repeat(4, minmax(125px, 1fr)); }
  .oc-overview-item { gap: 10px; padding: 12px; }
  .oc-workflow-strip { grid-template-columns: repeat(6, minmax(105px, 1fr)); padding-inline: 18px; }
  .oc-exception-strip { grid-template-columns: 210px minmax(520px, 1fr); }
  .oc-exception-primary { gap: 12px; padding: 16px 18px; }
  .oc-exception-metric-items { grid-template-columns: repeat(5, minmax(104px, 1fr)); }
  .oc-exception-metric { gap: 8px; padding: 10px; }
}

@media (min-width: 1501px) {
  .oc-shell { padding-top: 0; }
}

@media (max-width: 720px) {
  .oc-shell { padding-top: 64px; }
  .oc-page-head { align-items: flex-start; flex-direction: column; }.oc-page-head h2 { font-size: 23px; }
  .oc-metrics { grid-template-columns: 1fr 1fr; }.oc-metric { min-height: 74px; padding: 10px; }.oc-metric strong { font-size: 21px; }
  .oc-filter-bar, .oc-filter-bar.orders { grid-template-columns: 1fr; }.oc-filter-bar .oc-search { grid-column: auto; }
  .oc-filter-fields, .oc-filter-search-row { grid-template-columns: 1fr; }
  .oc-intake-grid, .oc-form-grid, .oc-print-layout, .oc-print-options { grid-template-columns: 1fr; }.oc-label-preview { max-width: 300px; margin: 0 auto; }
  .oc-dgj-account-form-grid label.span-2 { grid-column: auto; }
  .oc-import-body { grid-template-columns: 1fr; }.oc-head-actions { justify-content: flex-start; }
  .oc-dgj-accounts > header { align-items: flex-start; flex-direction: column; }.oc-dgj-account-list, .oc-dgj-account-rail .oc-dgj-account-list { grid-template-columns: 1fr; }
  .oc-side-modal { width: 100vw; }
  .oc-side-modal > footer { align-items: flex-start; flex-direction: column; }.oc-side-modal > footer > div { align-self: stretch; }.oc-side-modal > footer button { flex: 1; }
  .oc-setting-detail > div { grid-template-columns: 1fr; }
  .oc-scan-dock { left: 12px; right: 12px; grid-template-columns: 26px 1fr auto; }
  .oc-drawer { right: 0; width: 100vw; }.oc-drawer-actions { right: 0; width: 100vw; }
}

@media (max-width: 520px) {
  .oc-dgj-page-head > .oc-dgj-title { grid-template-columns: 1fr; gap: 6px; }
}

@media print {
  .oc-shell { display: none !important; }
}