:root {color-scheme: light;--bg: #f2f5f7;--surface: #ffffff;--surface-2: #f6f8f9;--surface-3: #edf2f4;--line: #d4dce1;--line-strong: #a9b6bf;--text: #182128;--muted: #66747e;--soft: #3e4c55;--accent: #168a4e;--accent-strong: #0f7440;--yellow: #9a6500;--red: #bd3838;--blue: #176bbc;--radius: 8px;--shadow: 0 12px 32px rgba(26, 40, 52, 0.1);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;}
* {box-sizing: border-box;}
[hidden] {display: none !important;}
html {min-width: 320px;-webkit-text-size-adjust: 100%;text-size-adjust: 100%;}
body {margin: 0;min-height: 100vh;background:
linear-gradient(180deg, rgba(22, 138, 78, 0.05), transparent 220px),
var(--bg);color: var(--text);overflow-x: hidden;text-rendering: optimizeLegibility;}
button,
input,
textarea,
select {font: inherit;max-width: 100%;}
button {border: 0;touch-action: manipulation;-webkit-tap-highlight-color: transparent;}
a {color: inherit;text-decoration: none;}
button,
[role="button"],
input,
textarea,
select,
a {min-width: 0;}
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {outline: 2px solid var(--accent);outline-offset: 2px;}
.mobile-shell {width: min(1180px, 100%);margin: 0 auto;padding: 18px;}
.mobile-shell {max-width: 680px;padding-bottom: 104px;}
body.manage-mode .mobile-shell,
body.wechat-mode .mobile-shell {max-width: 1180px;padding-bottom: 32px;}
@media (min-width: 1204px) {body.manage-mode .mobile-shell,
body.wechat-mode .mobile-shell {width: max(1180px, calc(100% - 24px));max-width: none;}}
.app-header {min-height: 66px;display: flex;align-items: center;justify-content: space-between;gap: 16px;}
.app-header-actions {display: flex;align-items: center;justify-content: flex-end;gap: 8px;}
.unified-home-link {min-height: 44px;border: 1px solid var(--line-strong);border-radius: var(--radius);display: inline-flex;align-items: center;justify-content: center;padding: 0 13px;background: var(--surface);color: var(--soft);font-size: 13px;font-weight: 800;white-space: nowrap;}
.unified-home-link:hover {border-color: var(--accent);color: var(--accent-strong);}
.brand {margin: 0 0 4px;color: var(--accent);font-size: 12px;font-weight: 800;letter-spacing: 0;}
h1,
h2,
h3,
p {margin: 0;letter-spacing: 0;}
h1 {font-size: 27px;line-height: 1.18;}
h2 {font-size: 17px;}
h3 {font-size: 15px;}
.system-state {min-height: 34px;border: 1px solid rgba(37, 196, 119, 0.38);border-radius: 999px;display: inline-flex;align-items: center;justify-content: center;padding: 0 11px;background: rgba(37, 196, 119, 0.12);color: #a7f0ca;font-size: 12px;font-weight: 800;white-space: nowrap;}
.system-state.warning {border-color: rgba(233, 185, 73, 0.45);background: rgba(233, 185, 73, 0.14);color: #f6d98a;}
.system-state.error {border-color: rgba(238, 106, 106, 0.55);background: rgba(238, 106, 106, 0.14);color: #ffc4c4;}
.admin-link,
.secondary,
.primary,
.stat-item {min-height: 44px;border: 1px solid transparent;border-radius: var(--radius);display: inline-flex;align-items: center;justify-content: center;padding: 0 14px;cursor: pointer;line-height: 1.25;text-align: center;white-space: nowrap;}
.admin-link,
.secondary {background: var(--surface-2);border-color: var(--line);color: var(--text);}
.primary {background: var(--accent);color: #06150e;font-weight: 800;}
.secondary:hover,
.admin-link:hover {border-color: var(--accent);}
.secondary.active {border-color: var(--accent);background: rgba(37, 196, 119, 0.14);color: #a7f0ca;}
.secondary.danger {border-color: rgba(238, 106, 106, 0.5);background: rgba(238, 106, 106, 0.08);color: #ffc4c4;}
.secondary.danger:hover {border-color: rgba(238, 106, 106, 0.85);background: rgba(238, 106, 106, 0.14);}
.primary:hover {background: var(--accent-strong);}
button:disabled,
.disabled {cursor: not-allowed;opacity: 0.55;}
button.is-progress {position: relative;overflow: hidden;isolation: isolate;opacity: 0.92;}
button.is-progress:disabled {opacity: 0.92;}
button.is-progress .button-progress-fill {position: absolute;inset: 0 auto 0 0;z-index: 0;width: 0;min-width: 2px;background:
linear-gradient(90deg, rgba(37, 196, 119, 0.72), rgba(99, 168, 255, 0.42));pointer-events: none;transition: width 220ms ease;}
.primary.is-progress .button-progress-fill {background:
linear-gradient(90deg, rgba(244, 247, 248, 0.42), rgba(99, 168, 255, 0.34));}
button.is-progress[data-progress-tone="done"] .button-progress-fill {background:
linear-gradient(90deg, rgba(37, 196, 119, 0.88), rgba(37, 196, 119, 0.48));}
button.is-progress[data-progress-tone="error"] .button-progress-fill {background:
linear-gradient(90deg, rgba(238, 106, 106, 0.88), rgba(233, 185, 73, 0.48));}
button.is-progress .button-progress-label {position: relative;z-index: 1;display: block;min-width: 0;max-width: 100%;overflow: visible;color: inherit;font-weight: 800;line-height: 1.25;text-overflow: clip;white-space: normal;overflow-wrap: anywhere;}
@media (prefers-reduced-motion: reduce) {button.is-progress .button-progress-fill {transition: none;}}
.notice-band,
.ops-card,
.form-section,
.receipt,
.toolbar,
.admin-order,
.ops-monitor-panel,
.logistics-panel,
.delivery-monitor-panel,
.cart-monitor-panel,
.outbox-panel {background: var(--surface);border: 1px solid var(--line);border-radius: var(--radius);box-shadow: var(--shadow);}
.notice-band {padding: 13px 14px;display: flex;gap: 10px;color: var(--soft);}
.notice-band strong {flex: 0 0 auto;color: var(--accent);}
.notice-band.manual strong {color: var(--yellow);}
.ops-rail {margin: 0 0 12px;display: grid;grid-template-columns: repeat(4, minmax(0, 1fr)) auto;gap: 8px;align-items: stretch;}
.ops-status-panel {margin: 0 0 12px;}
.ops-status-panel > summary {padding-right: 12px;padding-left: 12px;border: 1px solid var(--line);border-radius: var(--radius);background: var(--surface-2);color: var(--soft);box-shadow: none;}
.ops-status-panel > summary strong {color: var(--text);}
.ops-status-panel > summary .advanced-ops-cue {color: #145ea8;}
.ops-status-panel[open] > summary {margin-bottom: 8px;}
.ops-card {min-width: 0;min-height: 54px;padding: 10px 12px;border-radius: 10px;display: grid;gap: 3px;align-content: center;}
.ops-card span {color: var(--muted);font-size: 11px;}
.ops-card strong {min-width: 0;color: var(--text);font-size: 15px;line-height: 1.25;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.ops-card.success {border-color: rgba(37, 196, 119, 0.45);background: rgba(37, 196, 119, 0.1);}
.ops-card.warning {border-color: rgba(233, 185, 73, 0.48);background: rgba(233, 185, 73, 0.1);}
.ops-card.error {border-color: rgba(238, 106, 106, 0.55);background: rgba(238, 106, 106, 0.1);}
.ops-card.checking {border-color: rgba(99, 168, 255, 0.45);background: rgba(99, 168, 255, 0.1);}
.ops-check-btn {min-height: 54px;align-self: stretch;white-space: nowrap;}
.first-task-chooser {margin: 8px 0 12px;padding: 18px;display: grid;gap: 14px;border: 1px solid rgba(37, 196, 119, 0.45);border-radius: var(--radius);background: linear-gradient(135deg, rgba(37, 196, 119, 0.15), rgba(99, 168, 255, 0.08));box-shadow: var(--shadow);}
.first-task-chooser[hidden] {display: none;}
.first-task-copy,
.first-task-copy h2,
.first-task-copy p {margin: 0;}
.first-task-kicker {color: var(--accent);font-size: 11px;font-weight: 800;letter-spacing: 0.08em;}
.first-task-copy h2 {margin-top: 3px;font-size: 20px;line-height: 1.3;}
.first-task-copy p:last-child {margin-top: 5px;color: var(--muted);font-size: 13px;line-height: 1.45;}
.first-task-options {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 10px;}
.first-task-option {min-height: 74px;padding: 12px 14px;display: grid;gap: 4px;align-content: center;border: 1px solid var(--line);border-radius: var(--radius);background: var(--surface);color: var(--text);text-decoration: none;text-align: left;cursor: pointer;}
.first-task-option:hover,
.first-task-option:focus-visible {border-color: var(--accent);background: rgba(37, 196, 119, 0.12);}
.first-task-options strong {font-size: 14px;}
.first-task-options span {color: var(--muted);font-size: 12px;line-height: 1.4;}
.role-tabs {margin: 8px 0 12px;display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 8px;}
.role-tabs button {min-height: 44px;border: 1px solid var(--line);border-radius: var(--radius);background: var(--surface);color: var(--muted);cursor: pointer;}
.role-tabs button.active {border-color: var(--accent);background: rgba(37, 196, 119, 0.14);color: var(--text);font-weight: 800;}
.task-guide {margin: 0 0 12px;padding: 14px 16px;display: none;grid-template-columns: minmax(0, 1fr) auto;gap: 12px 16px;align-items: center;border: 1px solid rgba(37, 196, 119, 0.38);border-radius: var(--radius);background: linear-gradient(135deg, rgba(37, 196, 119, 0.12), rgba(99, 168, 255, 0.08));box-shadow: var(--shadow);}
body.price-mode [data-task-guide-view="price"],
body.request-mode [data-task-guide-view="request"],
body.manage-mode [data-task-guide-view="manage"],
body.wechat-mode [data-task-guide-view="wechat"] {display: grid;}
.task-guide-copy {grid-column: 1 / -1;}
.task-guide-kicker,
.task-guide-copy h2,
.task-guide-copy p {margin: 0;}
.task-guide-kicker {color: var(--accent);font-size: 11px;font-weight: 800;letter-spacing: 0.08em;}
.task-guide-copy h2 {margin-top: 3px;font-size: 18px;line-height: 1.3;}
.task-guide-copy p:last-child {margin-top: 4px;color: var(--muted);font-size: 13px;line-height: 1.45;}
.task-guide-steps {min-width: 0;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 8px;list-style: none;}
.task-guide-steps li {min-width: 0;display: flex;gap: 7px;align-items: center;color: var(--soft);font-size: 12px;line-height: 1.35;}
.task-guide-steps li > span:first-child {width: 24px;height: 24px;flex: 0 0 24px;display: inline-grid;place-items: center;border-radius: 999px;background: var(--accent);color: var(--accent-ink);font-weight: 900;}
.task-guide-action {min-height: 44px;white-space: nowrap;}
.view[hidden] {display: none !important;}
.wechat-sourcing-panel {display: grid;gap: 18px;padding: 20px;border: 1px solid var(--line);border-radius: 12px;background: var(--surface);box-shadow: var(--shadow);}
.wechat-sourcing-heading {align-items: center;}
.wechat-sourcing-progress-card {display: grid;grid-template-columns: minmax(0, 1fr) minmax(220px, 2fr);align-items: center;gap: 14px;padding: 16px;border: 1px solid rgba(22, 138, 78, 0.3);border-radius: var(--radius);background: rgba(22, 138, 78, 0.07);}
.wechat-sourcing-progress-copy {display: grid;gap: 4px;}
.wechat-sourcing-progress-copy strong {color: var(--accent-strong);font-size: clamp(28px, 4vw, 42px);font-variant-numeric: tabular-nums;line-height: 1;}
.wechat-sourcing-progress-copy span {color: var(--muted);font-size: 12px;line-height: 1.5;}
.wechat-sourcing-progress-card progress {width: 100%;height: 18px;accent-color: var(--accent);}
.wechat-sourcing-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 12px;}
.wechat-sourcing-card {min-width: 0;padding: 14px;border: 1px solid var(--line);border-radius: var(--radius);background: var(--surface-2);}
.wechat-sourcing-card h3 {margin: 0 0 10px;font-size: 14px;}
.wechat-sourcing-list {display: grid;gap: 8px;}
.wechat-sourcing-row {display: flex;align-items: center;justify-content: space-between;gap: 10px;min-width: 0;padding: 10px;border: 1px solid var(--line);border-radius: 7px;background: var(--surface);}
.wechat-sourcing-row > div {display: grid;min-width: 0;gap: 3px;}
.wechat-sourcing-row strong,
.wechat-sourcing-row small {overflow-wrap: anywhere;}
.wechat-sourcing-row small {color: var(--muted);font-size: 11px;line-height: 1.45;}
.wechat-sourcing-badge {flex: 0 0 auto;max-width: 45%;padding: 4px 7px;border-radius: 999px;background: var(--surface-3);color: var(--soft);font-size: 11px;font-weight: 800;line-height: 1.3;overflow-wrap: anywhere;text-align: center;}
.wechat-sourcing-capsolver,
.wechat-sourcing-boundary {margin: 10px 0 0;color: var(--muted);font-size: 12px;line-height: 1.5;}
.wechat-sourcing-boundary {margin: 0;padding: 11px 13px;border-left: 3px solid var(--accent);background: var(--surface-2);}
@media (max-width: 900px) {
.wechat-sourcing-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.wechat-sourcing-panel {
padding: 14px;
}
.wechat-sourcing-progress-card {
grid-template-columns: 1fr;
}
.wechat-sourcing-heading {
display: grid;
}
}
.order-form {
margin-top: 14px;
display: grid;
gap: 14px;
}
.request-start-panel {
padding: 16px;
display: grid;
gap: 14px;
border: 1px solid rgba(99, 168, 255, 0.42);
border-radius: var(--radius);
background: var(--surface);
}
.request-start-copy {
display: grid;
gap: 4px;
}
.request-start-copy h2,
.request-start-copy p,
.request-start-note {
margin: 0;
}
.request-start-copy p,
.request-start-note {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.request-start-kicker {
color: var(--accent);
font-size: 12px;
font-weight: 800;
}
.request-start-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.request-start-option {
min-height: 76px;
padding: 13px 14px;
display: grid;
align-content: center;
gap: 5px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-3);
color: var(--text);
text-decoration: none;
}
.request-start-option:is(:hover, .is-active) {
border-color: var(--accent);
}
.request-start-option:focus-visible {
outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
outline-offset: 2px;
}
.request-start-option strong {
font-size: 14px;
}
.request-start-option span {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.form-section {
padding: 16px;
display: grid;
gap: 13px;
}
.section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.section-head p {
margin-top: 4px;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.wechat-parser {
border-color: rgba(37, 196, 119, 0.34);
background:
linear-gradient(180deg, rgba(37, 196, 119, 0.08), rgba(23, 27, 31, 0.98) 150px),
var(--surface);
}
.wechat-parser textarea {
min-height: 132px;
}
.quick-actions {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(104px, 0.9fr) minmax(86px, 0.7fr);
gap: 10px;
}
.quick-actions .primary,
.quick-actions .secondary {
min-width: 0;
padding-right: 12px;
padding-left: 12px;
white-space: normal;
}
.parse-status {
margin: 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-3);
color: var(--soft);
font-size: 13px;
line-height: 1.45;
}
.parse-status.success {
border-color: rgba(37, 196, 119, 0.5);
background: rgba(37, 196, 119, 0.1);
color: #a7f0ca;
}
.parse-status.warning {
border-color: rgba(233, 185, 73, 0.5);
background: rgba(233, 185, 73, 0.1);
color: #f6d98a;
}
.parse-status.error {
border-color: rgba(238, 106, 106, 0.5);
background: rgba(238, 106, 106, 0.1);
color: #ffc4c4;
}
.price-search-panel,
.request-cart-panel,
.request-price-panel,
.price-compare-section {
border: 1px solid rgba(99, 168, 255, 0.25);
background:
linear-gradient(180deg, rgba(99, 168, 255, 0.07), rgba(23, 27, 31, 0.98) 150px),
var(--surface);
}
.price-search-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.price-site-links {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.price-site-link {
min-height: 54px;
padding: 9px 10px;
display: grid;
gap: 3px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-3);
color: var(--text);
text-decoration: none;
}
.price-site-link strong {
font-size: 13px;
}
.price-site-link span {
color: var(--muted);
font-size: 11px;
}
.price-site-link:hover {
border-color: var(--blue);
}
.price-site-link.is-disabled {
opacity: 0.55;
pointer-events: none;
}
.price-lookup-actions {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.price-lookup-actions .primary,
.price-lookup-actions .secondary {
min-width: 0;
line-height: 1.35;
white-space: normal;
overflow-wrap: anywhere;
}
.login-tools-toggle {
white-space: nowrap;
}
.login-tools-toggle[aria-pressed="true"] {
border-color: rgba(99, 168, 255, 0.56);
background: rgba(99, 168, 255, 0.16);
color: #d8ebff;
}
.external-browser-notice {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 80;
pointer-events: none;
}
.external-browser-panel {
width: min(560px, 100%);
margin: 0 auto;
display: grid;
gap: 8px;
padding: 12px;
border: 1px solid rgba(99, 168, 255, 0.42);
border-radius: var(--radius);
background: rgba(16, 18, 20, 0.96);
box-shadow: var(--shadow);
pointer-events: auto;
}
.external-browser-notice[data-tone="error"] .external-browser-panel {
border-color: rgba(238, 106, 106, 0.56);
}
.external-browser-notice[data-tone="success"] .external-browser-panel {
border-color: rgba(37, 196, 119, 0.52);
}
.external-browser-title {
color: var(--text);
font-size: 14px;
font-weight: 850;
}
.external-browser-body {
margin: 0;
color: var(--soft);
font-size: 12px;
line-height: 1.48;
}
.external-browser-actions {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 8px;
}
.external-browser-actions button {
min-height: 38px;
padding: 0 11px;
white-space: nowrap;
}
@media (max-width: 460px) {
.external-browser-notice {
left: 10px;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.external-browser-actions {
grid-template-columns: 1fr 1fr;
}
.external-browser-actions [data-external-browser-action="close"] {
grid-column: 1 / -1;
}
}
.selected-cart-summary,
.request-price-summary {
padding: 12px;
border: 1px solid rgba(37, 196, 119, 0.38);
border-radius: var(--radius);
background: rgba(37, 196, 119, 0.1);
color: #a7f0ca;
font-size: 13px;
line-height: 1.45;
}
.selected-cart-summary {
display: grid;
gap: 3px;
}
.selected-cart-summary strong {
color: var(--text);
font-size: 13px;
}
.selected-cart-summary span {
color: inherit;
}
.selected-cart-summary.is-empty {
border-color: rgba(233, 185, 73, 0.38);
background: rgba(233, 185, 73, 0.1);
color: #f6d98a;
}
.selected-cart-summary.is-filled {
border-color: rgba(37, 196, 119, 0.5);
background: rgba(37, 196, 119, 0.12);
}
.selected-cart-summary.requires-refresh {
border-color: rgba(245, 158, 11, 0.48);
background: rgba(245, 158, 11, 0.12);
color: #f6d98a;
}
.request-cart-list {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.request-cart-account-group {
min-width: 0;
padding: 10px;
display: grid;
gap: 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(17, 21, 24, 0.56);
}
.request-cart-account-group.success {
border-color: rgba(37, 196, 119, 0.4);
}
.request-cart-account-group.warning {
border-color: rgba(233, 185, 73, 0.42);
}
.request-cart-account-group.error {
border-color: rgba(238, 106, 106, 0.48);
}
.request-cart-account-row {
min-height: 38px;
padding: 0;
display: grid;
grid-template-columns: minmax(84px, auto) auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
}
.request-cart-account-row strong {
font-size: 13px;
}
.request-cart-account-row > span:not(.request-cart-account-actions) {
justify-self: start;
padding: 4px 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 900;
}
.request-cart-account-row small {
min-width: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.request-cart-account-actions {
display: flex;
justify-content: flex-end;
}
.request-cart-account-row.success > span:not(.request-cart-account-actions) {
background: rgba(37, 196, 119, 0.16);
color: #a7f0ca;
}
.request-cart-account-row.warning > span:not(.request-cart-account-actions) {
background: rgba(233, 185, 73, 0.16);
color: #f6d98a;
}
.request-cart-account-row.error > span:not(.request-cart-account-actions) {
background: rgba(238, 106, 106, 0.16);
color: #ffc4c4;
}
.request-cart-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.request-cart-card {
position: relative;
min-width: 0;
padding: 10px 10px 34px;
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-3);
color: var(--text);
text-align: left;
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.request-cart-card:hover {
border-color: var(--blue);
transform: translateY(-1px);
}
.request-cart-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.request-cart-card.is-selected {
border-color: var(--accent);
background: rgba(37, 196, 119, 0.12);
}
.request-cart-card:disabled,
.request-cart-card.requires-refresh {
border-color: rgba(245, 158, 11, 0.45);
background: rgba(245, 158, 11, 0.08);
color: var(--text);
cursor: not-allowed;
opacity: 0.82;
}
.request-cart-card:disabled:hover {
border-color: rgba(245, 158, 11, 0.45);
transform: none;
}
.request-cart-card.requires-refresh .request-cart-pick-pill {
border-color: rgba(245, 158, 11, 0.4);
background: rgba(245, 158, 11, 0.14);
color: #fbbf24;
}
.request-cart-thumb {
width: 54px;
aspect-ratio: 1;
object-fit: cover;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-2);
}
.request-cart-thumb.empty {
display: grid;
place-items: center;
color: var(--muted);
font-weight: 800;
}
.request-cart-body {
min-width: 0;
display: grid;
gap: 4px;
align-content: start;
}
.request-cart-body strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
.request-cart-body span,
.request-cart-meta {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.request-cart-pick-pill {
position: absolute;
right: 10px;
bottom: 9px;
padding: 3px 8px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 999px;
background: rgba(148, 163, 184, 0.12);
color: var(--muted);
font-size: 11px;
font-weight: 900;
line-height: 1.2;
}
.request-cart-card.is-selected .request-cart-pick-pill {
border-color: transparent;
background: var(--accent);
color: #03130b;
}
.request-cart-empty {
min-height: 58px;
padding: 12px;
display: flex;
align-items: center;
border: 1px dashed var(--line);
border-radius: var(--radius);
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.request-cart-overview {
border-style: solid;
background: rgba(233, 185, 73, 0.1);
color: #f6d98a;
}
.price-compare-section {
border: 1px solid rgba(99, 168, 255, 0.25);
background:
linear-gradient(180deg, rgba(99, 168, 255, 0.08), rgba(17, 21, 24, 0.96) 160px),
var(--surface);
}
.price-market-grid {
display: grid;
gap: 8px;
min-width: 0;
max-width: 100%;
}
.price-market-row {
min-width: 0;
max-width: 100%;
min-height: 54px;
padding: 8px 10px;
display: grid;
grid-template-columns: minmax(112px, 1fr) minmax(92px, 0.72fr) 22px minmax(92px, 0.66fr) minmax(100px, 0.78fr) minmax(96px, 0.68fr);
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(17, 21, 24, 0.74);
overflow: hidden;
}
.price-market-row > * {
min-width: 0;
}
.price-market-row.is-filled {
border-color: rgba(99, 168, 255, 0.42);
}
.price-market-row.is-lowest {
border-color: rgba(37, 196, 119, 0.74);
background: rgba(37, 196, 119, 0.12);
}
.price-market-row.is-reference {
border-color: rgba(234, 179, 8, 0.44);
background: rgba(234, 179, 8, 0.08);
}
.price-market-row.is-manual {
border-color: rgba(99, 168, 255, 0.52);
background: rgba(99, 168, 255, 0.1);
}
.price-market-row.is-sale:not(.is-lowest) {
border-color: rgba(34, 197, 94, 0.42);
background: rgba(34, 197, 94, 0.07);
}
.price-market-row.is-not-sale {
border-color: rgba(248, 113, 113, 0.35);
}
.price-market-row.is-not-sale .price-market-name strong {
color: #fecaca;
}
.price-market-row.is-needs-check {
border-color: rgba(96, 165, 250, 0.38);
background: rgba(96, 165, 250, 0.08);
}
.price-market-row.is-needs-check .price-market-name strong {
color: #bfdbfe;
}
.price-market-row.is-sold-out {
border-color: rgba(245, 158, 11, 0.36);
background: rgba(245, 158, 11, 0.08);
}
.price-market-row.is-sold-out .price-market-name strong {
color: #fde68a;
}
.price-market-row.is-reference.is-lowest {
border-color: rgba(234, 179, 8, 0.68);
background: rgba(234, 179, 8, 0.12);
}
.price-market-row.is-brand-checked:not(.is-lowest) {
border-color: rgba(99, 168, 255, 0.34);
}
.price-market-row.is-sold-out:not(.is-lowest) {
border-color: rgba(245, 158, 11, 0.36);
background: rgba(245, 158, 11, 0.08);
}
.price-market-row.is-candidate-excluded {
border-color: rgba(248, 113, 113, 0.42);
background: rgba(248, 113, 113, 0.08);
}
.price-market-name {
min-width: 0;
display: grid;
gap: 2px;
}
.price-market-name strong {
color: var(--text);
font-size: 13px;
overflow-wrap: break-word;
word-break: keep-all;
}
.price-market-name small,
.price-unit {
min-width: 0;
color: var(--muted);
font-size: 12px;
overflow-wrap: break-word;
word-break: keep-all;
}
.price-market-status {
min-width: 0;
width: 100%;
max-width: 100%;
padding: 2px 6px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.14);
color: var(--muted);
font-size: 11px;
line-height: 1.45;
text-align: center;
overflow-wrap: break-word;
word-break: keep-all;
}
.price-market-status[hidden] {
display: none;
}
.price-market-status.success {
background: rgba(37, 196, 119, 0.16);
color: #7ee7aa;
}
.price-market-status.warning {
background: rgba(234, 179, 8, 0.16);
color: #f8d66d;
}
.price-market-status.error {
background: rgba(248, 113, 113, 0.15);
color: #ffaaaa;
}
.price-sale-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
max-width: 100%;
min-height: 24px;
padding: 2px 9px;
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 999px;
background: rgba(148, 163, 184, 0.12);
color: var(--muted);
font-size: 11px;
font-weight: 900;
line-height: 1.35;
white-space: nowrap;
}
.price-sale-badge[hidden] {
display: none;
}
.price-sale-badge.sale {
border-color: rgba(34, 197, 94, 0.38);
background: rgba(34, 197, 94, 0.16);
color: #bbf7d0;
}
.price-sale-badge.not-sale {
border-color: rgba(248, 113, 113, 0.32);
background: rgba(248, 113, 113, 0.12);
color: #fecaca;
}
.price-sale-badge.sold-out {
border-color: rgba(245, 158, 11, 0.42);
background: rgba(245, 158, 11, 0.16);
color: #fde68a;
}
.price-sale-badge.needs-check {
border-color: rgba(96, 165, 250, 0.42);
background: rgba(96, 165, 250, 0.15);
color: #bfdbfe;
}
.price-market-result {
min-width: 0;
width: 100%;
max-width: 100%;
padding: 6px 8px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 8px;
background: rgba(148, 163, 184, 0.1);
color: var(--text);
font-size: 12px;
font-weight: 900;
line-height: 1.35;
text-align: center;
white-space: normal;
overflow-wrap: break-word;
word-break: keep-all;
}
.price-market-result[hidden] {
display: none;
}
.price-market-result.success {
border-color: rgba(37, 196, 119, 0.42);
background: rgba(37, 196, 119, 0.13);
color: #96f0bb;
}
.price-market-result.warning {
border-color: rgba(234, 179, 8, 0.42);
background: rgba(234, 179, 8, 0.13);
color: #f7d978;
}
.price-market-tools {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
min-width: 0;
}
.price-profile-button {
display: none;
align-items: center;
justify-content: center;
width: auto;
max-width: 100%;
min-height: 24px;
padding: 3px 7px;
border: 1px solid rgba(99, 168, 255, 0.32);
border-radius: 999px;
background: rgba(99, 168, 255, 0.1);
color: #b8d9ff;
font-size: 11px;
font-weight: 800;
line-height: 1.35;
white-space: normal;
overflow-wrap: anywhere;
cursor: pointer;
}
body.show-price-login-tools .price-profile-button {
display: inline-flex;
}
.price-profile-button:hover {
border-color: rgba(99, 168, 255, 0.62);
background: rgba(99, 168, 255, 0.18);
}
.price-brand-button {
min-width: 0;
width: 100%;
max-width: 100%;
min-height: 34px;
padding: 6px 10px;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow-wrap: normal;
word-break: keep-all;
border: 1px solid rgba(99, 168, 255, 0.36);
border-radius: 8px;
background: rgba(99, 168, 255, 0.1);
color: #b8d9ff;
font-size: 12px;
font-weight: 900;
line-height: 1.35;
cursor: pointer;
}
.price-brand-button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.price-brand-button:not(:disabled):hover {
border-color: rgba(99, 168, 255, 0.64);
background: rgba(99, 168, 255, 0.18);
}
.price-candidate-toggle {
min-width: 0;
width: 100%;
min-height: 34px;
padding: 6px 9px;
display: none;
align-items: center;
justify-content: center;
gap: 4px;
border: 1px solid rgba(248, 113, 113, 0.32);
border-radius: 8px;
background: rgba(248, 113, 113, 0.08);
color: #ffc0c0;
font-size: 12px;
font-weight: 800;
white-space: normal;
overflow-wrap: break-word;
word-break: keep-all;
cursor: pointer;
}
.price-market-row.is-filled .price-candidate-toggle {
display: inline-flex;
}
.price-market-row.is-filled .price-candidate-toggle[hidden] {
display: none;
}
.price-candidate-toggle input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.price-candidate-toggle:hover {
border-color: rgba(248, 113, 113, 0.58);
background: rgba(248, 113, 113, 0.14);
}
.price-market-row.is-candidate-excluded .price-candidate-toggle {
border-color: rgba(37, 196, 119, 0.42);
background: rgba(37, 196, 119, 0.1);
color: #9ef0bd;
}
.price-market-row input {
width: 100%;
min-width: 0;
min-height: 38px;
padding: 8px 10px;
text-align: right;
}
.price-rule-grid {
display: grid;
grid-template-columns: minmax(170px, 1fr) minmax(170px, 0.9fr) minmax(124px, 0.55fr);
gap: 10px;
align-items: stretch;
}
.price-rule-grid select,
.price-rate-field select {
width: 100%;
min-width: 0;
min-height: 40px;
}
.price-toggle {
min-height: 66px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 9px;
border: 1px solid rgba(48, 57, 65, 0.86);
border-radius: var(--radius);
background: rgba(16, 18, 20, 0.76);
color: var(--text);
}
.price-toggle input {
width: 18px;
height: 18px;
flex: 0 0 auto;
accent-color: var(--accent);
}
.price-toggle span {
min-width: 0;
font-size: 13px;
line-height: 1.35;
}
.price-footer {
display: grid;
grid-template-columns: minmax(120px, 0.52fr) minmax(170px, 0.72fr) minmax(0, 1fr);
gap: 10px;
align-items: stretch;
}
.price-rate-field input {
min-height: 40px;
}
.price-rate-field small {
color: var(--muted);
font-size: 11px;
}
.exchange-rate-controls {
min-width: 0;
padding: 10px 12px;
display: grid;
gap: 7px;
align-content: center;
border: 1px solid rgba(48, 57, 65, 0.86);
border-radius: var(--radius);
background: rgba(16, 18, 20, 0.76);
}
.exchange-rate-controls .secondary {
width: 100%;
min-width: 0;
min-height: 38px;
padding-right: 10px;
padding-left: 10px;
white-space: normal;
}
.exchange-rate-meta {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.exchange-rate-meta.success {
color: #a7f0ca;
}
.exchange-rate-meta.warning {
color: #ffd89a;
}
.price-result {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
gap: 8px;
}
.price-result div {
min-width: 0;
padding: 10px 12px;
border: 1px solid rgba(48, 57, 65, 0.86);
border-radius: var(--radius);
background: rgba(16, 18, 20, 0.76);
}
.price-result span {
display: block;
color: var(--muted);
font-size: 12px;
}
.price-result strong {
display: block;
margin-top: 4px;
color: var(--text);
font-size: 16px;
line-height: 1.2;
overflow-wrap: normal;
word-break: keep-all;
}
label,
.capture-field {
display: grid;
gap: 7px;
min-width: 0;
color: var(--muted);
font-size: 13px;
}
.field-note {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
input,
textarea,
select {
width: 100%;
min-height: 44px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-3);
color: var(--text);
padding: 10px 12px;
outline: none;
}
textarea {
resize: vertical;
min-height: 86px;
}
input::placeholder,
textarea::placeholder {
color: #75818b;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37, 196, 119, 0.16);
}
.thumbs,
.progress-capture-preview {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
gap: 10px;
}
.preview-item {
position: relative;
display: grid;
gap: 6px;
min-width: 0;
}
.preview-item img,
.thumbs img,
.progress-capture-preview img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-3);
}
.preview-item span {
min-width: 0;
overflow: hidden;
color: var(--muted);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-remove {
position: absolute;
top: 6px;
right: 6px;
min-height: 28px;
padding: 4px 8px;
border: 1px solid rgba(238, 106, 106, 0.78);
border-radius: 999px;
background: rgba(16, 18, 20, 0.86);
color: #ffc4c4;
font-size: 12px;
font-weight: 800;
}
.sticky-actions {
margin: 10px 0 0;
padding-top: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
border-top: 1px solid var(--line);
}
.message,
.receipt {
padding: 13px 14px;
color: var(--muted);
}
.message.error {
border: 1px solid rgba(238, 106, 106, 0.7);
border-radius: var(--radius);
color: #ffc4c4;
}
.message.success {
border: 1px solid rgba(37, 196, 119, 0.72);
border-radius: var(--radius);
color: #a7f0ca;
}
.message.warning {
border: 1px solid rgba(233, 185, 73, 0.7);
border-radius: var(--radius);
color: #f6d98a;
}
.receipt {
margin-top: 14px;
display: grid;
gap: 8px;
}
.receipt strong {
font-size: 22px;
}
.request-admin-panel {
margin-top: 16px;
display: grid;
gap: 12px;
}
.request-orders-list {
display: grid;
gap: 10px;
}
.request-order-card {
padding: 13px;
display: grid;
gap: 10px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.request-order-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.request-order-head strong {
display: block;
font-size: 14px;
}
.request-order-head p {
margin-top: 4px;
color: var(--soft);
word-break: break-word;
}
.request-order-meta {
color: var(--muted) !important;
font-size: 12px;
}
.request-order-status {
flex: 0 0 auto;
min-width: 72px;
border: 1px solid rgba(99, 168, 255, 0.42);
border-radius: 999px;
padding: 5px 9px;
background: rgba(99, 168, 255, 0.1);
color: #bddbff;
font-size: 12px;
font-weight: 800;
text-align: center;
}
.request-order-status.pending {
border-color: rgba(233, 185, 73, 0.48);
background: rgba(233, 185, 73, 0.12);
color: #f6d98a;
}
.request-order-status.done {
border-color: rgba(37, 196, 119, 0.52);
background: rgba(37, 196, 119, 0.12);
color: #a7f0ca;
}
.request-order-address {
max-height: 92px;
overflow: auto;
padding: 10px;
background: var(--surface-3);
border: 1px solid rgba(48, 57, 65, 0.72);
border-radius: var(--radius);
color: var(--muted);
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.request-order-price {
margin: 0;
padding: 9px 10px;
border: 1px solid rgba(37, 196, 119, 0.42);
border-radius: var(--radius);
background: rgba(37, 196, 119, 0.1);
color: #a7f0ca;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
word-break: break-word;
}
.request-order-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.toolbar {
padding: 14px;
display: grid;
gap: 12px;
}
.toolbar {
position: sticky;
top: 0;
z-index: 8;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
background: rgba(23, 27, 31, 0.96);
backdrop-filter: blur(12px);
}
.toolbar-fields {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(118px, 140px) minmax(118px, 140px);
gap: 12px;
}
.toolbar-actions {
display: grid;
grid-template-columns: repeat(5, minmax(78px, auto));
gap: 8px;
justify-content: end;
}
.toolbar-actions .secondary {
min-width: 0;
padding-right: 12px;
padding-left: 12px;
}
.order-card-toolbar {
position: static;
margin: 4px 0 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.toolbar-intro {
grid-column: 1 / -1;
min-width: 0;
}
.toolbar-intro h2,
.toolbar-intro p {
margin: 0;
}
.toolbar-intro h2 {
margin-top: 3px;
font-size: 17px;
}
.toolbar-intro p {
margin-top: 4px;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.sheet-sync-strip {
min-width: 0;
padding: 12px 14px;
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(300px, auto) auto;
align-items: center;
gap: 12px;
border: 1px solid var(--line);
border-left: 4px solid var(--line-strong);
border-radius: var(--radius);
background: rgba(23, 27, 31, 0.92);
}
.sheet-sync-strip.is-synced {
border-left-color: var(--accent);
}
.sheet-sync-strip.is-waiting,
.sheet-sync-strip.is-stale {
border-left-color: #e9b949;
}
.sheet-sync-strip.is-failed {
border-left-color: #ee6a6a;
}
.sheet-sync-copy {
min-width: 0;
display: grid;
gap: 3px;
}
.sheet-sync-copy strong,
.sheet-sync-copy small {
overflow-wrap: anywhere;
}
.sheet-sync-copy small {
color: var(--muted);
font-size: 12px;
}
.sheet-sync-stages {
min-width: 0;
display: grid;
grid-template-columns: repeat(3, minmax(88px, 1fr));
gap: 6px;
}
.sheet-sync-stages span {
min-height: 34px;
padding: 7px 9px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--muted);
background: rgba(32, 38, 43, 0.74);
font-size: 12px;
font-weight: 800;
text-align: center;
}
.sheet-sync-stages span::before {
content: "";
width: 7px;
height: 7px;
margin-right: 6px;
flex: 0 0 auto;
border-radius: 999px;
background: currentColor;
}
.sheet-sync-stages span.is-ok {
border-color: rgba(37, 196, 119, 0.4);
color: #a7f0ca;
background: rgba(37, 196, 119, 0.09);
}
.sheet-sync-stages span.is-waiting {
border-color: rgba(233, 185, 73, 0.42);
color: #f6d98a;
background: rgba(233, 185, 73, 0.08);
}
.sheet-sync-stages span.is-failed {
border-color: rgba(238, 106, 106, 0.45);
color: #ffc4c4;
background: rgba(238, 106, 106, 0.08);
}
.advanced-ops {
min-width: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* Author-level panel layouts must not override the native closed-details state. */
.advanced-ops:not([open]) > :not(summary) {
display: none !important;
}
.advanced-ops > summary {
min-height: 56px;
padding: 10px 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: var(--soft);
cursor: pointer;
list-style: none;
}
.advanced-ops > summary::-webkit-details-marker {
display: none;
}
.advanced-ops > summary > span:first-child {
min-width: 0;
display: grid;
gap: 3px;
}
.advanced-ops > summary small {
color: var(--muted);
font-size: 12px;
font-weight: 500;
overflow-wrap: anywhere;
}
.advanced-ops-cue {
min-width: 64px;
color: #bddbff;
font-size: 12px;
font-weight: 800;
text-align: right;
}
.advanced-ops[open] .advanced-ops-cue::before {
content: "접기";
}
.advanced-ops[open] .advanced-ops-cue {
font-size: 0;
}
.advanced-ops[open] .advanced-ops-cue::before {
font-size: 12px;
}
.advanced-ops > section:last-child {
margin-bottom: 14px;
}
.outbox-panel,
.order-ops-panel,
.ops-monitor-panel,
.logistics-panel,
.delivery-monitor-panel,
.cart-monitor-panel {
margin-top: 4px;
padding: 14px;
display: grid;
gap: 12px;
}
.order-ops-panel {
gap: 12px;
}
.ops-monitor-panel {
gap: 12px;
}
.ops-monitor-panel.has-fail {
border-color: rgba(238, 106, 106, 0.48);
}
.ops-monitor-panel.has-warning {
border-color: rgba(233, 185, 73, 0.42);
}
.logistics-panel.has-fail {
border-color: rgba(238, 106, 106, 0.52);
}
.logistics-panel.is-read-only .qms-sheet-grid input:disabled,
.logistics-panel.is-read-only .qms-sheet-grid select:disabled {
cursor: not-allowed;
opacity: 0.72;
}
.logistics-panel.is-read-only .qms-sheet-grid td.is-operator {
background: #f7eeee;
}
.logistics-title > div:first-child {
min-width: 0;
}
.logistics-title p {
overflow-wrap: anywhere;
}
.logistics-trust {
min-height: 42px;
padding: 10px 12px;
display: flex;
align-items: center;
border: 1px solid rgba(99, 168, 255, 0.34);
border-radius: var(--radius);
background: rgba(99, 168, 255, 0.09);
color: var(--text);
font-size: 13px;
font-weight: 700;
line-height: 1.45;
overflow-wrap: anywhere;
}
.logistics-trust[data-tone="ok"] {
border-color: rgba(37, 196, 119, 0.42);
background: rgba(37, 196, 119, 0.1);
color: #14623d;
}
.logistics-trust[data-tone="warning"] {
border-color: rgba(233, 185, 73, 0.5);
background: rgba(233, 185, 73, 0.12);
color: #795100;
}
.logistics-trust[data-tone="error"] {
border-color: rgba(238, 106, 106, 0.52);
background: rgba(238, 106, 106, 0.12);
color: #9b2525;
}
.logistics-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
gap: 8px;
}
.logistics-search,
.logistics-filter-label {
min-width: 0;
}
.logistics-toolbar .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.logistics-readiness-details summary,
.logistics-worktable-help summary {
min-height: 44px;
padding: 12px 0;
color: var(--soft);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
#deliveryOperationsReadiness .ops-head > div { min-width: 0; }
#deliveryOperationsReadinessAction { min-height: 44px; flex-shrink: 0; white-space: nowrap; }
.logistics-readiness-details[open] { display: grid; gap: 8px; }
.logistics-worktable-help { border-top: 1px solid var(--line); }
.logistics-worktable-help-content { display: grid; gap: 10px; padding: 0 0 10px; }
.logistics-worktable-help-content p { margin: 0; color: var(--soft); font-size: 13px; line-height: 1.5; }
.logistics-panel.is-compact .logistics-count[data-logistics-filter="auto_confirmed"]:not(.active),
.logistics-panel.is-compact .logistics-count[data-logistics-filter="auto_candidate"]:not(.active),
.logistics-panel.is-compact .logistics-count[data-logistics-filter="auto_stale"]:not(.active),
.logistics-panel.is-compact .logistics-count[data-logistics-filter="auto_conflict"]:not(.active) {
display: none;
}
.logistics-search input,
.logistics-filter-label select {
width: 100%;
min-height: 44px;
}
.logistics-counts {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.logistics-count {
min-width: 0;
min-height: 54px;
padding: 8px 10px;
display: grid;
gap: 2px;
align-content: center;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-3);
color: var(--muted);
cursor: pointer;
}
.logistics-count span {
font-size: 11px;
line-height: 1.25;
overflow-wrap: anywhere;
}
.logistics-count strong {
color: var(--text);
font-size: 18px;
line-height: 1.2;
}
.logistics-count.active {
border-color: rgba(37, 196, 119, 0.56);
background: rgba(37, 196, 119, 0.13);
color: #a7f0ca;
}
.ops-monitor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
grid-auto-rows: max-content;
align-items: start;
gap: 8px;
}
.ops-monitor-card {
min-width: 0;
padding: 10px;
display: grid;
align-self: start;
gap: 7px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.ops-monitor-card.ok {
border-color: rgba(37, 196, 119, 0.34);
}
.ops-monitor-card.warning {
border-color: rgba(233, 185, 73, 0.44);
}
.ops-monitor-card.error {
border-color: rgba(238, 106, 106, 0.52);
}
.ops-monitor-title {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.ops-monitor-title strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ops-monitor-title span {
flex: 0 0 auto;
font-size: 11px;
font-weight: 900;
}
.ops-monitor-meta,
.ops-monitor-buckets {
min-width: 0;
display: grid;
gap: 6px;
}
.ops-monitor-meta {
grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.75fr));
}
.ops-monitor-buckets {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ops-monitor-metric {
max-width: 100%;
min-height: 42px;
padding: 5px 7px;
display: grid;
align-content: center;
gap: 1px;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--surface-2);
overflow: hidden;
color: var(--soft);
line-height: 1.3;
}
.ops-monitor-metric small {
overflow: hidden;
color: var(--muted);
font-size: 10px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.ops-monitor-metric strong {
overflow: hidden;
color: var(--text);
font-size: 12px;
font-weight: 900;
overflow-wrap: anywhere;
text-overflow: clip;
white-space: normal;
}
.ops-monitor-flags {
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.ops-monitor-flag {
max-width: 100%;
min-height: 24px;
padding: 4px 7px;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--surface-3);
overflow: hidden;
color: var(--soft);
font-size: 11px;
font-weight: 800;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.ops-monitor-risk-list {
display: grid;
gap: 8px;
}
.ops-monitor-risk {
min-width: 0;
padding: 9px 10px;
display: grid;
gap: 4px;
background: rgba(13, 17, 19, 0.74);
border: 1px solid var(--line);
border-left: 3px solid rgba(233, 185, 73, 0.75);
border-radius: var(--radius-sm);
}
.ops-monitor-risk.error {
border-left-color: rgba(238, 106, 106, 0.9);
}
.ops-monitor-risk.ok {
border-left-color: rgba(37, 196, 119, 0.85);
}
.ops-monitor-risk strong,
.ops-monitor-risk span {
min-width: 0;
overflow-wrap: anywhere;
}
.ops-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.ops-head h2 {
margin: 0;
font-size: 15px;
}
.ops-head p,
.ops-head span {
margin-top: 4px;
color: var(--muted);
font-size: 12px;
}
.ops-focus-grid {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: 8px;
}
.ops-focus-card {
min-width: 0;
min-height: 76px;
padding: 10px;
display: grid;
gap: 4px;
justify-items: start;
background: var(--surface-3);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text);
text-align: left;
}
.ops-focus-card:hover,
.ops-focus-card:focus-visible {
border-color: var(--accent);
outline: none;
}
.ops-focus-card.active {
background: rgba(37, 196, 119, 0.12);
border-color: rgba(37, 196, 119, 0.62);
}
.ops-focus-card span,
.ops-focus-card small {
color: var(--muted);
font-size: 12px;
}
.ops-focus-card strong {
font-size: 24px;
line-height: 1;
}
.ops-pipeline {
display: grid;
grid-template-columns: repeat(5, minmax(96px, 1fr));
gap: 8px;
}
.ops-pipeline-step {
min-width: 0;
min-height: 54px;
padding: 9px 10px;
display: grid;
gap: 4px;
justify-items: start;
background: rgba(32, 38, 43, 0.78);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text);
}
.ops-pipeline-step.active,
.ops-pipeline-step:hover,
.ops-pipeline-step:focus-visible {
border-color: rgba(37, 196, 119, 0.7);
outline: none;
}
.ops-pipeline-step span {
color: var(--muted);
font-size: 12px;
}
.ops-pipeline-step strong {
font-size: 20px;
}
.ops-insight-panel {
min-width: 0;
padding: 12px;
display: grid;
gap: 10px;
background: rgba(17, 21, 24, 0.74);
border: 1px solid rgba(48, 57, 65, 0.88);
border-radius: var(--radius);
}
.ops-insight-panel.has-issues {
border-color: rgba(233, 185, 73, 0.42);
}
.ops-insight-panel p {
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.ops-filter-bar {
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ops-filter-chip {
min-width: 0;
min-height: 32px;
padding: 0 10px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
cursor: pointer;
font-size: 12px;
font-weight: 900;
white-space: nowrap;
}
.ops-filter-chip:hover,
.ops-filter-chip:focus-visible {
border-color: var(--accent);
outline: none;
}
.ops-filter-chip.active {
background: rgba(37, 196, 119, 0.18);
border-color: rgba(37, 196, 119, 0.72);
color: #a7f0ca;
}
.ops-filter-chip.info.active {
background: rgba(99, 168, 255, 0.18);
border-color: rgba(99, 168, 255, 0.72);
color: #bddbff;
}
.ops-filter-chip.warning.active {
background: rgba(233, 185, 73, 0.18);
border-color: rgba(233, 185, 73, 0.72);
color: #f6d98a;
}
.ops-filter-chip.danger.active {
background: rgba(238, 106, 106, 0.18);
border-color: rgba(238, 106, 106, 0.72);
color: #ffc4c4;
}
.ops-issue-list {
min-width: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 8px;
}
.ops-issue {
min-width: 0;
padding: 9px 10px;
display: grid;
gap: 4px;
background: rgba(13, 17, 19, 0.82);
border: 1px solid var(--line);
border-left: 3px solid rgba(148, 163, 184, 0.58);
border-radius: var(--radius);
}
.ops-issue strong {
font-size: 12px;
line-height: 1.3;
}
.ops-issue span {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.ops-issue.success {
border-left-color: rgba(37, 196, 119, 0.72);
}
.ops-issue.warning {
border-left-color: rgba(233, 185, 73, 0.72);
}
.ops-issue.error,
.ops-issue.danger {
border-left-color: rgba(238, 106, 106, 0.72);
}
.cart-monitor-panel.is-collapsed {
gap: 0;
padding-bottom: 12px;
}
.panel-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.panel-title p {
margin-top: 4px;
color: var(--muted);
font-size: 12px;
}
.panel-actions,
.outbox-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.delivery-sync-schedule {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-2);
}
.delivery-sync-lane {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto;
align-items: center;
gap: 8px 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.delivery-sync-toggle,
.delivery-sync-interval {
display: flex;
align-items: center;
gap: 9px;
}
.delivery-sync-toggle input {
width: 20px;
height: 20px;
flex: 0 0 auto;
accent-color: var(--accent);
}
.delivery-sync-toggle span {
display: grid;
gap: 2px;
}
.delivery-sync-toggle small,
.delivery-sync-schedule-status {
color: var(--muted);
font-size: 12px;
}
.delivery-sync-interval {
white-space: nowrap;
color: var(--soft);
font-size: 13px;
font-weight: 700;
}
.delivery-sync-interval input {
width: 88px;
min-height: 42px;
padding: 8px 10px;
border: 1px solid var(--line-strong);
border-radius: 7px;
background: var(--surface);
color: var(--text);
text-align: right;
}
.delivery-sync-schedule-status {
grid-column: 1 / -1;
margin: 0;
}
.delivery-sync-schedule > button {
justify-self: end;
}
.delivery-sync-schedule-status[data-tone="success"] {
color: var(--accent-strong);
}
.delivery-sync-schedule-status[data-tone="warning"] {
color: var(--yellow);
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.cart-snapshot-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-auto-rows: max-content;
align-items: start;
gap: 10px;
}
.delivery-snapshot-list {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: max-content;
align-items: start;
gap: 12px;
}
.delivery-site-tabs {
display: flex;
gap: 8px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
padding: 2px 1px 8px;
}
.delivery-site-tab {
flex: 0 0 auto;
min-height: 44px;
padding: 8px 12px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text);
background: var(--surface);
font: inherit;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.delivery-site-tab:hover {
border-color: var(--line-strong);
}
.delivery-site-tab[aria-selected="true"] {
border-color: var(--accent);
color: var(--accent);
background: #edf8f2;
box-shadow: inset 0 -3px 0 var(--accent);
}
.delivery-site-tab.warning:not([aria-selected="true"]) {
border-color: #d9bd78;
}
.delivery-site-tab.error:not([aria-selected="true"]) {
border-color: #dfaaaa;
}
.delivery-site-tab-count {
min-width: 24px;
padding: 2px 6px;
border-radius: 999px;
color: var(--muted);
background: var(--surface-3);
font-size: 12px;
line-height: 18px;
text-align: center;
}
.delivery-site-tab[aria-selected="true"] .delivery-site-tab-count {
color: #fff;
background: var(--accent);
}
.delivery-snapshot-list.is-site-filtered {
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1180px) {
.delivery-snapshot-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.delivery-review-panel {
padding: 14px;
display: grid;
gap: 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--surface-2);
}
.delivery-review-panel[hidden] {
display: none;
}
.delivery-review-panel[data-state="error"] {
border-color: #c96a6a;
}
.delivery-review-panel[data-state="ready"] {
border-color: var(--accent);
}
.delivery-review-panel h3:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 4px;
}
.delivery-review-status {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.55;
}
.delivery-review-list {
display: grid;
gap: 10px;
}
.delivery-review-state,
.delivery-review-card {
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.delivery-review-state {
color: var(--muted);
text-align: center;
}
.delivery-review-card {
display: grid;
gap: 7px;
}
.delivery-review-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.delivery-review-card-title,
.delivery-review-card p {
margin: 0;
}
.delivery-review-card-title {
font-size: 15px;
}
.delivery-review-card-status {
flex: 0 0 auto;
padding: 3px 8px;
border-radius: 999px;
color: #744b00;
background: #fff1c7;
font-size: 12px;
font-weight: 800;
}
.delivery-review-card-reason {
font-weight: 800;
}
.delivery-review-card-action {
line-height: 1.55;
}
.delivery-review-card-time,
.delivery-review-card-count {
color: var(--muted);
font-size: 12px;
}
.cart-monitor-panel.is-collapsed .cart-snapshot-list {
display: none;
}
.cart-monitor-toggle {
min-width: 96px;
}
.cart-snapshot {
min-width: 0;
padding: 12px;
display: grid;
align-self: start;
gap: 10px;
background: var(--surface-3);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.cart-snapshot.empty {
border-style: dashed;
}
.cart-snapshot.success {
border-color: rgba(37, 196, 119, 0.34);
}
.cart-snapshot.warning {
border-color: rgba(233, 185, 73, 0.36);
}
.cart-snapshot.error {
border-color: rgba(238, 106, 106, 0.45);
}
.cart-snapshot-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.cart-snapshot-head .cart-snapshot-meta {
flex: 0 0 auto;
display: grid;
justify-items: end;
gap: 4px;
}
.cart-snapshot-head small {
color: var(--muted);
font-size: 12px;
}
.cart-status-badge {
padding: 4px 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 900;
line-height: 1;
}
.cart-status-badge.success {
background: rgba(37, 196, 119, 0.16);
color: #a7f0ca;
}
.cart-status-badge.warning {
background: rgba(233, 185, 73, 0.16);
color: #f6d98a;
}
.cart-status-badge.error {
background: rgba(238, 106, 106, 0.16);
color: #ffc4c4;
}
.cart-mini-list {
display: grid;
gap: 8px;
}
.cart-mini-item {
min-width: 0;
padding: 8px;
display: grid;
gap: 4px;
background: rgba(32, 38, 43, 0.58);
border: 1px solid rgba(48, 57, 65, 0.72);
border-radius: var(--radius);
}
.cart-mini-item span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cart-mini-item small,
.cart-empty-text {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.delivery-site-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
gap: 6px;
}
.delivery-site-stat {
min-width: 0;
padding: 7px 8px;
display: grid;
gap: 2px;
background: rgba(17, 21, 24, 0.48);
border: 1px solid rgba(48, 57, 65, 0.66);
border-radius: var(--radius);
}
.delivery-site-stat b {
color: var(--muted);
font-size: 10px;
font-weight: 900;
}
.delivery-site-stat span {
min-width: 0;
color: var(--text);
font-size: 13px;
font-weight: 900;
overflow-wrap: anywhere;
}
.delivery-item-list {
min-width: 0;
display: grid;
gap: 9px;
}
.delivery-item-card {
min-width: 0;
padding: 10px;
display: grid;
gap: 8px;
background: rgba(32, 38, 43, 0.7);
border: 1px solid rgba(48, 57, 65, 0.78);
border-left: 3px solid rgba(99, 168, 255, 0.46);
border-radius: var(--radius);
}
.delivery-item-card.success {
border-left-color: rgba(37, 196, 119, 0.78);
}
.delivery-item-card.warning {
border-left-color: rgba(233, 185, 73, 0.8);
}
.delivery-item-card.error {
border-left-color: rgba(238, 106, 106, 0.86);
}
.delivery-item-card.has-warning {
border-color: rgba(233, 185, 73, 0.58);
background: rgba(233, 185, 73, 0.08);
}
.delivery-diagnosis {
min-width: 0;
margin-top: 2px;
padding: 9px 10px;
display: grid;
gap: 3px;
background: rgba(13, 17, 19, 0.72);
border: 1px solid var(--line);
border-left: 3px solid rgba(148, 163, 184, 0.56);
border-radius: var(--radius);
}
.delivery-diagnosis strong {
font-size: 12px;
}
.delivery-diagnosis span,
.delivery-diagnosis small {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.delivery-diagnosis.success {
border-left-color: rgba(37, 196, 119, 0.72);
}
.delivery-diagnosis.warning {
border-left-color: rgba(233, 185, 73, 0.72);
}
.delivery-diagnosis.error {
border-left-color: rgba(238, 106, 106, 0.72);
}
.delivery-item-top {
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.delivery-state-badge {
flex: 0 0 auto;
padding: 4px 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 900;
line-height: 1;
}
.delivery-state-badge.success {
background: rgba(37, 196, 119, 0.16);
color: #a7f0ca;
}
.delivery-state-badge.warning {
background: rgba(233, 185, 73, 0.16);
color: #f6d98a;
}
.delivery-classification {
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.delivery-status-pill {
flex: 0 0 auto;
padding: 3px 7px;
background: rgba(148, 163, 184, 0.14);
border-radius: 999px;
color: var(--muted);
font-size: 11px;
font-weight: 900;
white-space: nowrap;
}
.delivery-status-pill.success {
background: rgba(37, 196, 119, 0.16);
color: #a7f0ca;
}
.delivery-status-pill.warning {
background: rgba(233, 185, 73, 0.16);
color: #f6d98a;
}
.delivery-status-pill.error {
background: rgba(238, 106, 106, 0.16);
color: #ffc4c4;
}
.delivery-state-badge.error {
background: rgba(238, 106, 106, 0.16);
color: #ffc4c4;
}
.delivery-arrival {
min-width: 0;
color: var(--soft);
font-size: 12px;
font-weight: 800;
overflow-wrap: anywhere;
}
.delivery-product-title {
min-width: 0;
color: var(--text);
font-size: 13px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.delivery-facts {
min-width: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
gap: 6px;
}
.delivery-fact {
min-width: 0;
padding: 7px;
display: grid;
gap: 2px;
background: rgba(17, 21, 24, 0.46);
border: 1px solid rgba(48, 57, 65, 0.62);
border-radius: var(--radius);
}
.delivery-fact.missing {
border-color: rgba(238, 106, 106, 0.34);
}
.delivery-fact b {
color: var(--muted);
font-size: 10px;
font-weight: 900;
}
.delivery-fact span {
color: var(--text);
font-size: 12px;
font-weight: 800;
overflow-wrap: anywhere;
}
.delivery-latest {
margin: 0;
color: var(--soft);
font-size: 12px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.delivery-warning-list {
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.delivery-warning-chip {
min-height: 28px;
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 4px 8px;
border: 1px solid rgba(233, 185, 73, 0.46);
border-radius: 999px;
background: rgba(233, 185, 73, 0.12);
color: #f6d98a;
font-size: 11px;
font-weight: 800;
line-height: 1.2;
overflow-wrap: anywhere;
}
.delivery-timeline {
min-width: 0;
display: grid;
gap: 1px;
}
.delivery-timeline-row {
min-width: 0;
padding-top: 6px;
display: grid;
grid-template-columns: minmax(72px, 0.34fr) minmax(78px, 0.32fr) minmax(0, 1fr);
gap: 6px;
align-items: start;
border-top: 1px solid rgba(48, 57, 65, 0.52);
}
.delivery-timeline-row time,
.delivery-timeline-row b,
.delivery-timeline-row span {
min-width: 0;
font-size: 11px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.delivery-timeline-row time {
color: var(--muted);
}
.delivery-timeline-row b {
color: var(--text);
}
.delivery-timeline-row span {
color: var(--muted);
}
.delivery-item-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.delivery-item-actions a {
min-height: 30px;
padding: 7px 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text);
font-size: 12px;
font-weight: 800;
text-decoration: none;
background: rgba(17, 21, 24, 0.54);
}
.delivery-item-actions a:hover {
border-color: rgba(45, 212, 133, 0.54);
}
.cart-link-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cart-link-actions a,
.cart-action-button {
min-height: 30px;
padding: 7px 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text);
font-size: 12px;
font-family: inherit;
font-weight: 800;
text-decoration: none;
background: rgba(32, 38, 43, 0.72);
cursor: pointer;
}
.cart-link-actions a:hover,
.cart-action-button:hover {
border-color: rgba(45, 212, 133, 0.54);
}
.musinsa-workbox,
.shipping-workbox {
padding: 12px;
display: grid;
gap: 10px;
background: rgba(17, 21, 24, 0.76);
border: 1px solid rgba(99, 168, 255, 0.32);
border-radius: var(--radius);
}
.mini-panel-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.mini-panel-title span {
color: var(--muted);
font-size: 12px;
}
.musinsa-work-grid,
.shipping-grid {
display: grid;
grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
gap: 10px;
}
.shipping-grid .wide {
grid-column: 1 / -1;
}
.musinsa-tools,
.shipping-tools {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.musinsa-tools .secondary,
.shipping-tools .primary,
.shipping-tools .secondary {
flex: 1 1 112px;
min-width: 0;
padding-right: 10px;
padding-left: 10px;
}
.cart-match-status {
min-height: 32px;
padding: 8px 10px;
background: rgba(99, 168, 255, 0.08);
border: 1px solid rgba(99, 168, 255, 0.28);
border-radius: var(--radius);
color: #bddbff;
font-size: 12px;
line-height: 1.35;
}
.cart-match-list {
display: grid;
gap: 8px;
}
.cart-match-item {
width: 100%;
min-height: 54px;
padding: 9px 10px;
display: grid;
gap: 4px;
background: rgba(32, 38, 43, 0.82);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text);
text-align: left;
cursor: pointer;
}
.cart-match-item:not(:disabled):hover,
.cart-match-item:focus-visible {
border-color: var(--accent);
outline: none;
}
.cart-match-item:disabled {
opacity: 1;
cursor: not-allowed;
}
.cart-match-item .cart-match-action {
color: var(--text);
white-space: normal;
overflow-wrap: anywhere;
}
.cart-match-item strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
.cart-match-item span,
.cart-match-empty {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.cart-match-empty {
padding: 9px 10px;
border: 1px dashed var(--line);
border-radius: var(--radius);
}
.delivery-auto-match {
display: grid;
gap: 8px;
}
.delivery-match-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.delivery-match-summary {
color: var(--soft);
text-align: right;
}
.delivery-match-list {
display: grid;
gap: 8px;
}
.delivery-match-item {
min-width: 0;
min-height: 58px;
padding: 9px 10px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
background: rgba(32, 38, 43, 0.82);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.delivery-match-item.success {
border-color: rgba(37, 196, 119, 0.32);
}
.delivery-match-item.warning {
border-color: rgba(233, 185, 73, 0.34);
}
.delivery-match-item.error {
border-color: rgba(238, 106, 106, 0.38);
}
.delivery-match-item div {
min-width: 0;
display: grid;
gap: 3px;
}
.delivery-match-item strong,
.delivery-match-item span,
.delivery-match-item small {
min-width: 0;
overflow-wrap: anywhere;
}
.delivery-match-item strong {
font-size: 13px;
}
.delivery-match-item span,
.delivery-match-item small,
.delivery-match-empty {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.delivery-match-empty {
padding: 9px 10px;
border: 1px dashed var(--line);
border-radius: var(--radius);
}
.official-store-delivery-state.warning {
border-color: rgba(233, 185, 73, 0.5);
background: rgba(233, 185, 73, 0.06);
}
.official-store-delivery-state.error {
border-color: rgba(238, 106, 106, 0.52);
background: rgba(238, 106, 106, 0.06);
}
.official-store-delivery-state.success {
border-color: rgba(37, 196, 119, 0.46);
background: rgba(37, 196, 119, 0.06);
}
.delivery-apply-btn {
min-width: 58px;
min-height: 34px;
}
.outbox-list {
display: grid;
gap: 10px;
}
.outbox-item {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-3);
padding: 12px;
display: grid;
gap: 10px;
}
.outbox-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.outbox-title {
display: block;
word-break: break-word;
}
.outbox-meta {
margin-top: 4px;
color: var(--muted);
font-size: 12px;
}
.outbox-status {
flex: 0 0 auto;
min-width: 68px;
min-height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 9px;
background: rgba(233, 185, 73, 0.15);
color: #f6d98a;
font-size: 12px;
font-weight: 800;
}
.outbox-status.copied {
background: rgba(99, 168, 255, 0.16);
color: #bddbff;
}
.outbox-status.sent {
background: rgba(37, 196, 119, 0.14);
color: #a7f0ca;
}
.outbox-status.failed {
background: rgba(238, 106, 106, 0.16);
color: #ffc4c4;
}
.outbox-text {
min-height: 150px;
font-family: "Consolas", "SFMono-Regular", monospace;
font-size: 13px;
line-height: 1.45;
}
.stats-grid {
margin-top: 0;
display: grid;
grid-template-columns: repeat(2, minmax(140px, 1fr));
gap: 8px;
}
.stat-item {
min-height: 58px;
padding: 9px 10px;
flex-direction: column;
gap: 4px;
background: var(--surface);
border-color: var(--line);
color: var(--text);
}
.stat-item span {
color: var(--muted);
font-size: 12px;
}
.stat-item strong {
font-size: 20px;
}
.stat-item.active {
border-color: var(--accent);
background: rgba(37, 196, 119, 0.12);
}
.admin-list {
display: grid;
gap: 10px;
}
.admin-order {
overflow: hidden;
scroll-margin-top: 92px;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
align-items: stretch;
transition:
border-color 0.16s ease,
box-shadow 0.16s ease,
transform 0.16s ease,
background 0.16s ease;
}
.admin-order.ready-to-save {
border-color: rgba(37, 196, 119, 0.58);
}
.admin-order.needs-attention.is-active {
border-color: rgba(233, 185, 73, 0.42);
}
.admin-order.is-done {
border-color: rgba(99, 168, 255, 0.34);
}
.admin-order.is-done:not(.is-active) {
background:
linear-gradient(90deg, rgba(99, 168, 255, 0.07), transparent 220px),
var(--surface);
}
.admin-order.is-active {
border-color: rgba(37, 196, 119, 0.56);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
}
.admin-order:not(.is-active):hover {
border-color: rgba(99, 168, 255, 0.48);
transform: translateY(-1px);
}
.admin-order:not(.is-active) .order-work-panel {
display: none;
}
.order-info-panel,
.order-work-panel {
min-width: 0;
padding: 15px;
display: grid;
align-content: start;
gap: 13px;
}
.order-info-panel {
cursor: pointer;
outline: none;
transition:
background 0.16s ease,
box-shadow 0.16s ease;
}
.order-info-panel:focus-visible {
box-shadow: inset 0 0 0 2px var(--accent);
}
.admin-order.is-active .order-info-panel {
background: rgba(37, 196, 119, 0.035);
}
.admin-order:not(.is-active) .order-info-panel {
padding-top: 13px;
padding-bottom: 13px;
}
.order-work-panel {
border-left: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(37, 196, 119, 0.08), transparent 150px),
rgba(17, 21, 24, 0.62);
}
.admin-order-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.order-operator-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(160px, 0.42fr);
gap: 8px;
}
.order-next-action,
.order-risk-pill {
min-width: 0;
min-height: 50px;
padding: 9px 10px;
display: grid;
gap: 3px;
background: rgba(32, 38, 43, 0.78);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.order-next-action span,
.order-risk-pill span {
color: var(--muted);
font-size: 11px;
font-weight: 800;
}
.order-next-action strong,
.order-risk-pill strong {
min-width: 0;
overflow-wrap: anywhere;
font-size: 13px;
}
.order-risk-pill.ok,
.order-risk-pill.ready,
.order-risk-pill.shipping,
.order-risk-pill.done {
border-color: rgba(37, 196, 119, 0.36);
background: rgba(37, 196, 119, 0.08);
}
.order-risk-pill.warning {
border-color: rgba(233, 185, 73, 0.42);
background: rgba(233, 185, 73, 0.08);
}
.order-risk-pill.danger {
border-color: rgba(238, 106, 106, 0.45);
background: rgba(238, 106, 106, 0.08);
}
.order-flow-mini {
display: grid;
grid-template-columns: repeat(5, minmax(54px, 1fr));
gap: 6px;
}
.order-flow-step {
min-width: 0;
min-height: 26px;
padding: 5px 6px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
font-size: 11px;
font-weight: 800;
text-align: center;
}
.order-flow-step.is-done {
border-color: rgba(37, 196, 119, 0.5);
color: #b6f3d1;
background: rgba(37, 196, 119, 0.1);
}
.order-flow-step.is-current {
border-color: rgba(99, 168, 255, 0.55);
color: #cde3ff;
background: rgba(99, 168, 255, 0.12);
}
.order-heading {
min-width: 0;
}
.order-id {
display: block;
font-size: 15px;
}
.order-title {
margin: 5px 0 0;
color: var(--soft);
word-break: break-word;
}
.order-meta {
margin: 5px 0 0;
color: var(--muted);
font-size: 12px;
}
.order-badges {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.badge {
flex: 0 0 auto;
min-width: 72px;
min-height: 28px;
padding: 6px 9px;
border-radius: 999px;
background: rgba(37, 196, 119, 0.14);
color: #a7f0ca;
font-size: 12px;
font-weight: 800;
text-align: center;
}
.open-work-cue {
flex: 0 0 auto;
min-height: 28px;
padding: 6px 9px;
border: 1px solid rgba(99, 168, 255, 0.34);
border-radius: 999px;
background: rgba(99, 168, 255, 0.1);
color: #bddbff;
font-size: 12px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
}
.admin-order.is-active .open-work-cue {
border-color: rgba(37, 196, 119, 0.42);
background: rgba(37, 196, 119, 0.14);
color: #a7f0ca;
}
.work-status,
.work-progress-label {
min-height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 9px;
background: rgba(99, 168, 255, 0.14);
color: #bddbff;
font-size: 12px;
font-weight: 800;
text-align: center;
white-space: nowrap;
}
.work-status.partial {
background: rgba(233, 185, 73, 0.16);
color: #f6d98a;
}
.work-status.ready {
background: rgba(37, 196, 119, 0.16);
color: #a7f0ca;
}
.work-status.done {
background: rgba(99, 168, 255, 0.18);
color: #bddbff;
}
.work-status.ordered,
.work-progress-label.ordered {
background: rgba(99, 168, 255, 0.16);
color: #bddbff;
}
.work-status.shipped,
.work-progress-label.shipped {
background: rgba(77, 208, 225, 0.16);
color: #b4f2fb;
}
.work-progress-label {
background: rgba(37, 196, 119, 0.12);
color: #a7f0ca;
}
.work-progress-label.partial {
background: rgba(233, 185, 73, 0.16);
color: #f6d98a;
}
.work-progress-label.ready {
background: rgba(37, 196, 119, 0.16);
color: #a7f0ca;
}
.work-progress-label.done {
background: rgba(99, 168, 255, 0.18);
color: #bddbff;
}
.work-checklist {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.work-checklist span {
min-height: 34px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(233, 185, 73, 0.36);
border-radius: var(--radius);
background: rgba(233, 185, 73, 0.1);
color: #f6d98a;
font-size: 12px;
font-weight: 900;
white-space: nowrap;
}
.work-checklist span::before {
content: "";
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 999px;
background: currentColor;
}
.work-checklist span.is-done {
border-color: rgba(37, 196, 119, 0.42);
background: rgba(37, 196, 119, 0.12);
color: #a7f0ca;
}
.work-checklist span.is-missing {
border-style: dashed;
}
.badge.pending {
background: rgba(233, 185, 73, 0.16);
color: #f6d98a;
}
.badge.ordered {
background: rgba(99, 168, 255, 0.16);
color: #bddbff;
}
.badge.shipped {
background: rgba(77, 208, 225, 0.16);
color: #b4f2fb;
}
.badge.delivered {
background: rgba(37, 196, 119, 0.16);
color: #a7f0ca;
}
.badge.done {
background: rgba(37, 196, 119, 0.16);
color: #a7f0ca;
}
.badge.urgent {
background: rgba(238, 106, 106, 0.16);
color: #ffc4c4;
}
.detail-grid {
margin: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 12px;
}
.detail-grid div {
min-width: 0;
padding-bottom: 10px;
border-bottom: 1px solid rgba(48, 57, 65, 0.72);
}
.detail-grid .wide {
grid-column: 1 / -1;
}
.address-block {
border-left: 3px solid var(--line-strong);
padding-left: 10px;
}
.price-summary-block {
border-left: 3px solid rgba(37, 196, 119, 0.72);
padding-left: 10px;
}
.price-summary-block dd {
color: #a7f0ca;
font-weight: 800;
}
.shipping-summary-block {
border-left: 3px solid rgba(99, 168, 255, 0.72);
padding-left: 10px;
}
.shipping-summary-block dd {
color: #bddbff;
font-weight: 800;
}
.address-block dd {
max-height: 108px;
overflow: auto;
padding-right: 6px;
}
.admin-order:not(.is-active) .detail-grid {
grid-template-columns: minmax(140px, 1fr) 72px minmax(120px, 0.8fr);
gap: 8px 12px;
}
.admin-order:not(.is-active) .detail-grid div {
padding-bottom: 0;
border-bottom: 0;
}
.admin-order:not(.is-active) .address-block,
.admin-order:not(.is-active) .price-summary-block,
.admin-order:not(.is-active) .shipping-summary-block {
display: none;
}
dt {
color: var(--muted);
font-size: 12px;
}
dd {
margin: 4px 0 0;
word-break: break-word;
}
.progress-panel {
display: grid;
gap: 12px;
}
.progress-panel h3 {
font-size: 15px;
}
.work-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 2px;
}
.order-action-context {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 3px 10px;
padding: 10px 12px;
border: 1px solid rgba(93, 174, 255, 0.42);
border-radius: var(--radius);
background: rgba(50, 132, 213, 0.1);
}
.order-action-context > span {
color: var(--muted);
font-size: 11px;
font-weight: 800;
}
.order-action-context strong {
min-width: 0;
overflow-wrap: anywhere;
color: #d7ebff;
font-size: 13px;
}
.order-action-context small {
grid-column: 1 / -1;
color: var(--soft);
line-height: 1.45;
}
.order-action-context.is-busy {
border-color: rgba(255, 184, 77, 0.7);
background: rgba(255, 184, 77, 0.12);
}
.order-action-context.is-busy small {
color: #ffe0a6;
font-weight: 800;
}
.admin-order[aria-busy="true"] .order-work-panel {
box-shadow: inset 0 0 0 1px rgba(255, 184, 77, 0.34);
}
.progress-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.progress-grid .wide {
grid-column: 1 / -1;
}
.store-presets {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.store-preset {
min-width: 0;
min-height: 40px;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0 8px;
background: rgba(32, 38, 43, 0.82);
color: var(--soft);
cursor: pointer;
font-size: 12px;
font-weight: 800;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.store-preset:hover,
.store-preset:focus-visible {
border-color: var(--accent);
color: var(--text);
outline: none;
}
.store-preset.active {
border-color: rgba(37, 196, 119, 0.76);
background: rgba(37, 196, 119, 0.14);
color: #a7f0ca;
}
.store-custom {
border-style: dashed;
color: #bddbff;
}
.capture-dropzone {
min-height: 56px;
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
display: grid;
align-items: center;
background: var(--surface-3);
color: var(--text);
cursor: pointer;
outline: none;
transition:
border-color 0.16s ease,
background 0.16s ease,
box-shadow 0.16s ease;
}
.capture-dropzone:hover,
.capture-dropzone:focus-visible,
.capture-dropzone.is-dragging {
border-color: var(--accent);
background: rgba(37, 196, 119, 0.1);
box-shadow: 0 0 0 3px rgba(37, 196, 119, 0.14);
}
.capture-dropzone.has-files {
border-style: solid;
}
.progress-captures {
display: none;
}
.capture-dropzone-main {
min-height: 56px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.capture-dropzone-main strong {
min-width: 0;
color: var(--text);
font-size: 14px;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.capture-count {
min-width: 44px;
border-radius: 999px;
padding: 4px 8px;
background: rgba(99, 168, 255, 0.16);
color: #bddbff;
font-size: 12px;
font-weight: 800;
text-align: center;
}
.progress-address {
min-height: 104px;
background: #151a1e;
resize: vertical;
}
.shipping-memo {
min-height: 68px;
resize: vertical;
}
.progress-actions {
display: grid;
grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(92px, 0.65fr));
gap: 10px;
}
.progress-actions .primary,
.progress-actions .secondary,
.order-controls .primary,
.order-controls .secondary,
.order-controls select {
min-width: 0;
}
.order-controls {
display: grid;
grid-template-columns: minmax(112px, 1fr) minmax(100px, 0.72fr) minmax(100px, 0.72fr);
gap: 8px;
}
.order-more-menu {
min-width: 0;
position: relative;
}
.order-more-menu > summary {
min-height: 44px;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
color: var(--soft);
background: #20262b;
cursor: pointer;
font-size: 13px;
font-weight: 800;
list-style: none;
}
.order-more-menu > summary::-webkit-details-marker {
display: none;
}
.order-more-menu[open] > summary {
border-color: rgba(99, 168, 255, 0.52);
color: #cde3ff;
}
.order-more-actions {
margin-top: 8px;
display: grid;
grid-template-columns: repeat(5, minmax(86px, 1fr));
gap: 8px;
}
.order-more-menu[open] {
grid-column: 1 / -1;
}
.empty {
padding: 30px 16px;
color: var(--muted);
text-align: center;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius);
}
body.dialog-open {
overflow: hidden;
}
.edit-dialog {
position: fixed;
inset: 0;
z-index: 40;
display: grid;
place-items: center;
padding: 18px;
}
.edit-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.62);
backdrop-filter: blur(6px);
}
.edit-card {
position: relative;
width: min(720px, 100%);
max-height: calc(100vh - 36px);
overflow: auto;
padding: 16px;
display: grid;
gap: 13px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.edit-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.eyebrow {
color: var(--accent);
font-size: 12px;
font-weight: 800;
}
#editOrderId {
display: block;
margin-top: 5px;
color: var(--muted);
font-size: 12px;
}
.edit-close-btn {
min-height: 36px;
padding: 0 10px;
}
.edit-fields {
display: grid;
gap: 12px;
}
.edit-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.edit-conflict-panel {
display: grid;
gap: 12px;
margin-top: 16px;
padding: 15px;
border: 2px solid rgba(233, 185, 73, 0.82);
border-radius: var(--radius);
background: rgba(233, 185, 73, 0.09);
}
.edit-conflict-panel[hidden] {
display: none;
}
.edit-conflict-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.edit-conflict-head h3,
.edit-conflict-guide,
.edit-conflict-footnote {
margin: 0;
}
.edit-conflict-count {
flex: 0 0 auto;
padding: 5px 9px;
border-radius: 999px;
background: rgba(233, 185, 73, 0.18);
color: #f6d98a;
font-size: 12px;
font-weight: 800;
}
.edit-conflict-guide,
.edit-conflict-footnote {
color: var(--muted);
line-height: 1.55;
}
.edit-conflict-rows {
display: grid;
gap: 10px;
}
.edit-conflict-row {
display: grid;
gap: 9px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface-2);
}
.edit-conflict-row.is-conflict {
border-color: rgba(238, 106, 106, 0.72);
}
.edit-conflict-row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.edit-conflict-row-head strong {
overflow-wrap: anywhere;
}
.edit-conflict-status {
color: var(--muted);
font-size: 12px;
font-weight: 700;
text-align: right;
}
.edit-conflict-row.is-conflict .edit-conflict-status {
color: #ffc4c4;
}
.edit-conflict-choices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 0;
padding: 0;
border: 0;
}
.edit-conflict-choice {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
align-items: start;
min-width: 0;
padding: 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
cursor: pointer;
}
.edit-conflict-choice:has(input:checked) {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.edit-conflict-choice input {
margin-top: 3px;
}
.edit-conflict-choice-copy {
display: grid;
gap: 4px;
min-width: 0;
}
.edit-conflict-choice-copy small {
color: var(--muted);
line-height: 1.45;
overflow-wrap: anywhere;
}
.edit-conflict-auto-result {
margin: 0;
color: var(--muted);
line-height: 1.5;
}
.edit-conflict-apply {
width: 100%;
min-height: 46px;
}
.redirect-link {
margin-top: 14px;
}
.redirect-link a {
color: var(--accent);
font-weight: 800;
}
.admin-link,
.secondary,
.primary,
.stat-item,
.toolbar-actions .secondary,
.panel-actions .secondary,
.outbox-actions .secondary,
.progress-actions .primary,
.progress-actions .secondary,
.order-controls .primary,
.order-controls .secondary,
.external-browser-actions button {
overflow-wrap: anywhere;
}
.admin-order,
.request-order-card,
.request-cart-card,
.cart-snapshot,
.delivery-snapshot,
.delivery-item-card,
.outbox-item,
.price-market-row {
contain: layout paint;
}
.admin-order,
.request-order-card,
.request-cart-card,
.cart-snapshot,
.delivery-snapshot,
.delivery-item-card,
.outbox-item,
.price-market-row,
.message,
.receipt,
.order-heading,
.order-next-action,
.order-risk-pill,
.ops-issue,
.price-market-result {
overflow-wrap: anywhere;
}
@media (min-width: 1041px) {
.admin-order.is-active {
grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr);
align-items: start;
}
}
@media (max-width: 1040px) {
.toolbar {
position: static;
grid-template-columns: 1fr;
align-items: stretch;
backdrop-filter: none;
}
.toolbar-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: stretch;
}
.sheet-sync-strip {
grid-template-columns: minmax(0, 1fr) auto;
}
.sheet-sync-stages {
grid-column: 1 / -1;
grid-row: 2;
}
.ops-focus-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-pipeline {
grid-template-columns: repeat(5, minmax(96px, 1fr));
overflow-x: auto;
padding-bottom: 2px;
}
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-order {
grid-template-columns: 1fr;
}
.order-work-panel {
border-top: 1px solid var(--line);
border-left: 0;
}
}
@media (max-width: 760px) {
.sheet-sync-strip {
grid-template-columns: 1fr;
}
.sheet-sync-stages,
.sheet-sync-strip > .secondary {
grid-column: 1;
}
.sheet-sync-strip > .secondary {
width: 100%;
}
.logistics-toolbar {
grid-template-columns: 1fr;
}
.logistics-counts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.toolbar-fields {
grid-template-columns: 1fr;
}
.cart-snapshot-list,
.delivery-snapshot-list,
.musinsa-work-grid,
.shipping-grid {
grid-template-columns: 1fr;
}
.price-search-grid,
.price-site-links,
.request-cart-list,
.price-lookup-actions,
.progress-actions {
grid-template-columns: 1fr;
}
.order-operator-strip,
.delivery-timeline-row,
.delivery-match-item {
grid-template-columns: 1fr;
}
.detail-grid,
.order-controls {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.order-more-menu {
grid-column: 1 / -1;
}
.order-more-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.store-presets {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.price-rule-grid {
grid-template-columns: 1fr;
}
.price-result {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-rail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-check-btn {
grid-column: 1 / -1;
}
}
@media (max-width: 620px) {
.first-task-options {
grid-template-columns: 1fr;
}
.request-start-options {
grid-template-columns: 1fr;
}
.first-task-option {
min-height: 64px;
}
.task-guide {
grid-template-columns: 1fr;
}
.task-guide-action {
width: 100%;
}
.delivery-sync-schedule {
grid-template-columns: 1fr;
}
.delivery-sync-lane {
grid-template-columns: 1fr;
}
.delivery-sync-interval {
justify-content: space-between;
}
.delivery-sync-schedule > button {
width: 100%;
}
.advanced-ops > summary {
align-items: flex-start;
}
.logistics-title {
display: grid;
grid-template-columns: 1fr;
align-items: start;
}
.logistics-title .secondary {
width: 100%;
}
.mobile-shell {
padding: 12px;
}
h1 {
font-size: 24px;
}
.section-head,
.toolbar,
.toolbar-fields,
.role-tabs,
.price-footer,
.price-rule-grid,
.progress-grid,
.shipping-grid {
grid-template-columns: 1fr;
}
.toolbar-actions,
.detail-grid,
.order-controls {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.order-more-actions > :last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.ops-focus-grid {
grid-template-columns: 1fr;
}
.ops-pipeline {
grid-template-columns: repeat(5, minmax(86px, 1fr));
}
.order-flow-mini {
grid-template-columns: repeat(5, minmax(52px, 1fr));
overflow-x: auto;
padding-bottom: 2px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-right: 0;
margin-left: 0;
padding: 0;
overflow: visible;
}
.stats-grid::-webkit-scrollbar {
display: none;
}
.stat-item {
min-height: 56px;
}
.section-head {
display: grid;
grid-template-columns: 1fr;
justify-content: stretch;
align-items: start;
}
.section-head > div {
min-width: 0;
}
.section-head > .primary,
.section-head > .secondary {
width: 100%;
}
.toolbar-actions .secondary,
.order-controls .primary,
.order-controls .secondary {
padding-right: 8px;
padding-left: 8px;
white-space: normal;
}
.price-market-row {
min-height: 0;
padding: 12px;
grid-template-columns: minmax(0, 1fr) 22px;
align-items: start;
gap: 10px;
}
.price-market-name {
grid-column: 1 / -1;
gap: 4px;
}
.price-market-tools {
grid-column: 1 / -1;
width: 100%;
margin-top: 4px;
}
.price-profile-button {
min-height: 28px;
padding: 4px 8px;
}
.price-brand-button,
.price-candidate-toggle {
grid-column: 1 / -1;
width: 100%;
max-width: 100%;
justify-content: center;
}
.price-market-result {
grid-column: 1 / -1;
width: 100%;
text-align: center;
white-space: normal;
}
.price-market-row input {
grid-column: 1 / 2;
width: 100%;
}
.price-unit {
align-self: center;
padding-top: 9px;
}
.detail-grid .wide,
.progress-grid .wide,
.shipping-grid .wide {
grid-column: 1 / -1;
}
.order-info-panel,
.order-work-panel {
padding: 12px;
}
.admin-order:not(.is-active) .detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-order:not(.is-active) .detail-grid div:nth-child(3) {
grid-column: 1 / -1;
}
.admin-order-head,
.work-panel-head {
display: grid;
}
.request-cart-account-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.request-cart-account-group {
padding: 10px;
}
.request-cart-items {
grid-template-columns: 1fr;
}
.request-cart-account-row small {
grid-column: 1 / -1;
}
.request-cart-account-actions {
grid-column: 1 / -1;
justify-content: stretch;
}
.request-cart-account-actions .cart-action-button {
flex: 1;
}
.work-checklist {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.order-badges {
justify-content: flex-start;
}
.notice-band,
.panel-title,
.request-order-head,
.cart-snapshot-head,
.delivery-snapshot .cart-snapshot-head,
.outbox-head {
display: grid;
}
.request-order-actions,
.edit-actions {
grid-template-columns: 1fr;
}
.edit-dialog {
padding: 12px;
}
.edit-card {
max-height: calc(100vh - 24px);
padding: 14px;
}
.edit-conflict-head,
.edit-conflict-row-head {
display: grid;
}
.edit-conflict-status {
text-align: left;
}
.edit-conflict-choices {
grid-template-columns: 1fr;
}
.notice-band strong {
flex: initial;
}
.quick-actions {
grid-template-columns: 1fr;
}
.panel-actions,
.outbox-actions {
justify-content: stretch;
}
.panel-actions > *,
.outbox-actions > * {
flex: 1 1 130px;
}
.sticky-actions {
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
}
}
@media (max-width: 520px) {
.app-header {
align-items: stretch;
flex-direction: column;
gap: 10px;
}
.app-header > div:first-child {
min-width: 0;
}
.app-header-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width: 100%;
}
.unified-home-link,
.system-state {
width: 100%;
}
.system-state {
max-width: none;
min-height: 32px;
padding: 6px 9px;
border-radius: var(--radius);
line-height: 1.25;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}
.toolbar-actions > :last-child:nth-child(odd),
.order-controls > :last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.toolbar-actions .secondary,
.panel-actions > *,
.outbox-actions > *,
.external-browser-actions button,
.progress-actions .primary,
.progress-actions .secondary,
.order-controls .primary,
.order-controls .secondary {
min-height: 44px;
line-height: 1.25;
white-space: normal;
}
.ops-filter-chip {
flex: 1 1 calc(50% - 8px);
justify-content: center;
white-space: normal;
}
.price-sale-badge,
.price-market-status {
border-radius: var(--radius);
white-space: normal;
}
}
.qms-recipient-dialog{width:min(620px,calc(100vw - 32px));max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:24px;color:var(--text);background:var(--surface)}
.qms-recipient-dialog::backdrop{background:rgba(15,30,45,.4)}
.qms-recipient-dialog h3{margin-top:0}
.qms-recipient-dialog p{line-height:1.5;overflow-wrap:anywhere}
.qms-recipient-dialog form{display:grid;gap:12px}
.qms-recipient-dialog label{display:grid;gap:6px;font-weight:700}
.qms-recipient-dialog input,.qms-recipient-dialog textarea{box-sizing:border-box;width:100%;padding:10px;border:1px solid var(--line);border-radius:6px}
.qms-recipient-dialog textarea{min-height:76px;resize:vertical}
.qms-recipient-edit{display:block;margin-top:6px;white-space:nowrap}
@media (max-width: 430px) {
.logistics-counts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-pipeline {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
overflow-x: hidden;
}
.ops-pipeline-step {
min-height: 58px;
padding: 8px 5px;
justify-items: center;
text-align: center;
}
.ops-pipeline-step span {
font-size: 11px;
line-height: 1.2;
}
.ops-pipeline-step strong {
font-size: 18px;
line-height: 1;
}
.price-result {
grid-template-columns: 1fr;
}
}
/* Operator light theme: keep every work surface readable in bright offices. */
body {
background: var(--bg);
}
.wechat-parser {
background:
linear-gradient(180deg, rgba(22, 138, 78, 0.07), transparent 150px),
#fbfdfc;
}
.price-search-panel,
.request-cart-panel,
.request-price-panel {
background:
linear-gradient(180deg, rgba(23, 107, 188, 0.06), transparent 150px),
#fbfcfd;
}
.external-browser-panel,
.request-cart-account-group,
.price-market-row,
.price-toggle,
.exchange-rate-controls,
.price-result div,
.sheet-sync-stages span,
.ops-monitor-risk,
.ops-pipeline-step,
.ops-insight-panel,
.ops-issue,
.cart-mini-item,
.delivery-site-stat,
.delivery-item-card,
.delivery-diagnosis,
.delivery-fact,
.delivery-item-actions a,
.cart-link-actions a,
.cart-action-button,
.musinsa-workbox,
.shipping-workbox,
.cart-match-item,
.delivery-match-item,
.order-next-action,
.order-risk-pill,
.store-preset,
.order-more-menu > summary {
background: var(--surface-2);
}
.toolbar {
position: static;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: none;
box-shadow: 0 1px 0 var(--line);
}
.sheet-sync-strip {
background: #ffffff;
}
.order-work-panel {
background:
linear-gradient(180deg, rgba(22, 138, 78, 0.06), transparent 150px),
#fbfdfc;
}
.progress-address {
background: #ffffff;
}
.preview-remove {
background: rgba(255, 255, 255, 0.96);
color: #a52d2d;
}
.login-tools-toggle[aria-pressed="true"],
.advanced-ops-cue,
.outbox-status.copied,
.work-status.done,
.work-progress-label.ordered,
.work-progress-label.shipped,
.work-progress-label.done,
.badge.ordered,
.badge.shipped,
.shipping-summary-block dd,
.store-custom {
color: #145ea8;
}
.system-state:not(.warning):not(.error),
.secondary.active,
.parse-status.success,
.selected-cart-summary,
.request-cart-account-row.success > span:not(.request-cart-account-actions),
.exchange-rate-meta.success,
.message.success,
.request-order-status.done,
.sheet-sync-stages span.is-ok,
.logistics-count.active,
.ops-filter-chip.active:not(.info):not(.warning):not(.danger),
.cart-status-badge.success,
.delivery-state-badge.success,
.delivery-status-pill.success,
.outbox-status.sent,
.store-preset.active,
.work-status.ready,
.work-progress-label.ready,
.badge.delivered,
.badge.done,
.price-summary-block dd {
color: #087443;
}
.system-state.warning,
.parse-status.warning,
.selected-cart-summary.is-empty,
.selected-cart-summary.requires-refresh,
.request-cart-account-row.warning > span:not(.request-cart-account-actions),
.request-cart-overview,
.exchange-rate-meta.warning,
.message.warning,
.request-order-status.pending,
.sheet-sync-stages span.is-waiting,
.ops-filter-chip.warning.active,
.cart-status-badge.warning,
.delivery-state-badge.warning,
.delivery-status-pill.warning,
.outbox-status.pending,
.work-status.partial,
.work-progress-label.partial,
.badge.pending {
color: #7a5500;
}
.system-state.error,
.secondary.danger,
.parse-status.error,
.request-cart-account-row.error > span:not(.request-cart-account-actions),
.exchange-rate-meta.error,
.message.error,
.sheet-sync-stages span.is-failed,
.ops-filter-chip.danger.active,
.cart-status-badge.error,
.delivery-state-badge.error,
.delivery-status-pill.error,
.outbox-status.failed,
.badge.urgent {
color: #b42323;
}
.request-order-status,
.ops-filter-chip.info.active,
.open-work-cue,
.work-status.ordered,
.work-status.shipped {
color: #145ea8;
}
.qms-sheet-scale .icon-button {
width: 44px;
min-width: 44px;
min-height: 44px;
}
.qms-sheet-scale #logisticsFitBtn {
min-height: 44px;
}
.qms-sheet-legend .is-internal::before {
background: #d9dfe3;
}
.ops-monitor-card,
.delivery-item-card {
align-self: start;
}
button:not([hidden]),
[role="button"]:not([hidden]),
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.price-site-link,
.price-profile-button,
.price-brand-button,
.price-candidate-toggle,
.ops-filter-chip,
.delivery-item-actions a,
.cart-link-actions a,
.cart-action-button,
.store-preset,
.edit-close-btn,
.external-browser-actions button {
min-height: 44px;
}
.price-site-link,
.price-profile-button,
.price-brand-button,
.price-candidate-toggle,
.ops-filter-chip,
.delivery-item-actions a,
.cart-link-actions a,
.cart-action-button,
.store-preset,
.edit-close-btn,
.external-browser-actions button {
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
}
.price-market-row input,
.price-rule-grid select,
.price-rate-field select,
.price-rate-field input,
.exchange-rate-controls .secondary {
min-height: 44px;
}
@media (max-width: 380px) {
.task-guide {
padding: 12px;
gap: 10px;
}
.task-guide-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
}
.task-guide-steps li {
align-items: flex-start;
flex-direction: column;
gap: 4px;
font-size: 11px;
}
.task-guide-steps li > span:first-child {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.mobile-shell {
padding-right: 10px;
padding-left: 10px;
}
.role-tabs {
gap: 6px;
}
.role-tabs button {
padding-right: 6px;
padding-left: 6px;
font-size: 12px;
line-height: 1.2;
white-space: normal;
overflow-wrap: anywhere;
}
.ops-card {
padding-right: 8px;
padding-left: 8px;
}
.ops-card strong {
font-size: 13px;
white-space: normal;
overflow-wrap: anywhere;
}
.toolbar-actions,
.order-controls {
gap: 8px;
}
}
.qms-sheet-panel{min-width:0;overflow:hidden;padding:14px;gap:10px;border-radius:6px}
.qms-sheet-panel .panel-title{align-items:center}
.qms-sheet-panel .panel-title h2{font-size:19px;line-height:1.3}
.logistics-panel-actions{align-items:center}
.delivery-refresh-help{margin:0 0 10px;color:var(--muted,#596579);font-size:13px;line-height:1.6}
.delivery-refresh-status{margin:0 0 12px;padding:14px 16px;border:1px solid #b9cde6;border-radius:10px;background:#f2f7ff;color:#183650}
.delivery-refresh-status[hidden]{display:none}
.delivery-refresh-status p{margin:0 0 6px;line-height:1.6}
.delivery-refresh-status label{display:block;font-size:13px}
.delivery-refresh-status progress{display:block;width:100%;height:14px;margin:6px 0;accent-color:#2163b6}
.delivery-refresh-status [hidden]{display:none}
.delivery-refresh-status #deliveryRefreshMessage{font-weight:700}
.delivery-refresh-status #deliveryRefreshDetail{margin:0;font-size:13px}
.delivery-refresh-status[data-phase="complete"]{background:#effaf3;border-color:#90c6a6;color:#16452a}
.delivery-refresh-status:is([data-phase="partial"],[data-phase="failed"],[data-phase="table-pending"],[data-phase="pending"],[data-phase="launch-unknown"]){background:#fff8e8;border-color:#dabc73;color:#674600}
.qms-sheet-scale{min-height:44px;padding:3px;display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2)}
.qms-sheet-scale .icon-button{width:44px;min-width:44px;min-height:44px;padding:0;font-size:20px;line-height:1}
.qms-sheet-scale output{width:50px;color:var(--text);font-size:12px;font-weight:900;text-align:center;font-variant-numeric:tabular-nums}
.qms-sheet-scale #logisticsFitBtn{min-height:44px;padding:7px 10px}
.qms-sheet-compact-toggle{display:inline-flex;}
.logistics-counts-help{margin:2px 0 6px;color:var(--muted);font-size:12px;line-height:1.45}
.logistics-filter-panel{border-block:1px solid var(--line);background:var(--surface-2)}
.logistics-filter-panel summary{min-height:44px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;color:var(--text);font-size:13px;font-weight:900}
.logistics-filter-panel summary::marker{color:var(--accent)}
.filter-condition-count{flex:0 0 auto;color:var(--muted);font-size:11px}
.logistics-filter-content{padding:0 10px 10px;display:grid;gap:10px}
.logistics-filter-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.logistics-filter-group{min-width:0;display:grid;align-content:start;gap:7px}
.logistics-filter-group-head{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.logistics-filter-group-head strong{font-size:12px}
.logistics-filter-mode{padding:2px;display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.logistics-filter-mode button{min-width:44px;min-height:44px;padding:8px 10px;border-radius:3px;background:transparent;color:var(--muted);font-size:11px;font-weight:800;cursor:pointer}
.logistics-filter-mode button.is-active{background:var(--accent);color:#ffffff}
.logistics-filter-mode button[data-logistics-filter-mode="exclude"].is-active{background:#a85d00}
.logistics-filter-options{max-height:164px;padding:4px;display:grid;align-content:start;gap:2px;overflow-y:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.logistics-filter-option{min-height:38px;padding:5px 6px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:6px;border-radius:3px;color:var(--soft);cursor:pointer}
.logistics-filter-option:hover{background:var(--surface-3)}
.logistics-filter-option input{width:18px;height:18px;accent-color:var(--accent)}
.logistics-filter-option span {
min-width: 0;
overflow: hidden;
font-size: 12px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.logistics-filter-option small{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.logistics-filter-footer{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;font-weight:700}
.qms-sheet-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12px; }
.qms-sheet-legend span{display:inline-flex;align-items:center;gap:6px}
.qms-sheet-legend span::before{width:10px;height:10px;border:1px solid currentColor;border-radius:2px;content:""}
.qms-sheet-legend .is-auto::before { background: rgba(99, 168, 255, 0.2); }
.qms-sheet-legend .is-operator::before { background: rgba(37, 196, 119, 0.24); }
.qms-sheet-legend .is-internal::before { background: rgba(255, 255, 255, 0.08); }
.qms-sheet-legend .is-attention::before { background: rgba(233, 185, 73, 0.25); }
.logistics-counts {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.qms-sheet-scroll-help {
display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;padding:10px 12px;border:1px solid rgba(99,168,255,.42);border-radius:8px;background:rgba(99,168,255,.1);color:var(--text);font-size:13px;font-weight:700;line-height:1.5;
}
.qms-sheet-scroll-help > span:first-child{color:var(--blue);font-size:18px}
.qms-sheet-viewport {
width: calc(100% + 28px);
margin-inline: -14px;
max-height: min(68vh, 720px);
overflow: auto;
border: 1px solid var(--line);
border-radius: 4px;
background: #ffffff;
scrollbar-gutter: stable;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.qms-sheet-viewport:focus-visible {
outline: 2px solid rgba(99, 168, 255, 0.72);
outline-offset: 2px;
}
.qms-sheet-pager {
width: calc(100% + 28px);
min-height: 52px;
margin-inline: -14px;
padding: 4px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--line);
}
.qms-sheet-page-actions,
.qms-sheet-page-size {
display: flex;
align-items: center;
gap: 4px;
}
.qms-sheet-pager .icon-button {
width: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
font-size: 20px;
line-height: 1;
}
.qms-sheet-page-actions output {
min-width: 164px;
padding-inline: 8px;
color: var(--text);
font-size: 12px;
font-weight: 800;
text-align: center;
font-variant-numeric: tabular-nums;
}
.qms-sheet-page-size {
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.qms-sheet-page-size select {
width: 88px;
min-height: 44px;
}
.qms-sheet-grid {
width: 2380px;
min-width: 2380px;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
color: var(--text);
font-size: 12px;
line-height: 1.35;
}
.qms-sheet-grid .col-b { width: 150px; }
.qms-sheet-grid .col-c { width: 120px; }
.qms-sheet-grid .col-d { width: 260px; }
.qms-sheet-grid .col-e { width: 110px; }
.qms-sheet-grid .col-f { width: 90px; }
.qms-sheet-grid .col-g { width: 62px; }
.qms-sheet-grid .col-h { width: 130px; }
.qms-sheet-grid .col-i { width: 62px; }
.qms-sheet-grid .col-j { width: 170px; }
.qms-sheet-grid .col-k { width: 62px; }
.qms-sheet-grid .col-l { width: 130px; }
.qms-sheet-grid .col-m { width: 140px; }
.qms-sheet-grid .col-n { width: 260px; }
.qms-sheet-grid .col-o { width: 100px; }
.qms-sheet-grid .col-p { width: 150px; }
.qms-sheet-grid .col-q { width: 152px; }
.qms-sheet-grid .col-r { width: 132px; }
.qms-sheet-grid .col-u { width: 100px; }
.qms-sheet-grid th,
.qms-sheet-grid td {
min-width: 0;
padding: 5px 7px;
overflow: hidden;
border-right: 1px solid #d5dde2;
border-bottom: 1px solid #d5dde2;
background: #ffffff;
text-align: left;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.qms-sheet-grid th:first-child,
.qms-sheet-grid td:first-child {
border-left: 0;
}
.qms-sheet-grid thead th {
position: sticky;
z-index: 4;
color: #eef4f8;
font-weight: 800;
text-align: center;
white-space: normal;
}
.qms-sheet-grid .sheet-document-meta th {
top: 0;
height: 40px;
background: #f7f9fb;
color: #26333b;
border-color: #b9c3ca;
text-align: left;
}
.qms-sheet-grid .sheet-document-meta .sheet-document-title {
color: #14212a;
font-size: 15px;
}
.qms-sheet-grid .sheet-document-meta .sheet-document-title span {
color: #168a4e;
}
.qms-sheet-grid .sheet-document-meta .sheet-document-trigger {
color: #c74343;
font-size: 11px;
text-align: center;
}
.qms-sheet-grid .sheet-document-meta .sheet-document-trigger small {
display: block;
font-size: 10px;
font-weight: 700;
}
.qms-sheet-grid .sheet-document-meta .sheet-document-note {
color: #167d49;
font-size: 12px;
text-align: center;
}
.qms-sheet-grid .sheet-column-letters th {
top: 40px;
height: 24px;
padding: 2px 5px;
background: #e8edf0;
color: #52616b;
font-size: 11px;
}
.qms-sheet-grid .sheet-header-ko th {
top: 64px;
height: 48px;
background: #dcebf3;
color: #173c50;
}
.qms-sheet-grid .sheet-header-cn th {
top: 112px;
height: 42px;
background: #e3f0e8;
color: #214b35;
}
.qms-sheet-grid .sheet-column-letters th:first-child,
.qms-sheet-grid .sheet-header-ko th:first-child,
.qms-sheet-grid .sheet-header-cn th:first-child {
left: 0;
z-index: 7;
}
.qms-sheet-grid tbody td:first-child {
position: sticky;
left: 0;
z-index: 2;
box-shadow: 1px 0 0 #aebbc4;
}
.qms-sheet-grid tbody tr {
height: 52px;
}
.qms-sheet-grid tbody tr:hover td {
filter: brightness(0.975);
}
.qms-sheet-grid td.is-auto { background: #edf6fd; }
.qms-sheet-grid td.is-operator { background: #eef8f2; }
.qms-sheet-grid td.is-internal { background: #f1f3f4; color: #66747e; }
.qms-sheet-grid td.is-reserved { background: #f7f8f8; color: transparent; }
.qms-sheet-grid tr.needs-attention td { box-shadow: inset 0 2px 0 rgba(233, 185, 73, 0.65), inset 0 -2px 0 rgba(233, 185, 73, 0.65); }
.qms-sheet-grid tr.is-completed td { color: #416d54; background-color: #edf7f1; }
.qms-sheet-grid tr.is-cancelled td { color: #77838b; background-color: #f3f4f5; text-decoration-color: rgba(119, 131, 139, 0.5); }
.qms-sheet-grid tr.is-queued td:first-child { box-shadow: inset 3px 0 0 #c99012, 1px 0 0 #aebbc4; }
.qms-sheet-grid tr.is-saving td:first-child { box-shadow: inset 3px 0 0 #176bbc, 1px 0 0 #aebbc4; }
.qms-sheet-grid tr.is-saved td:first-child { box-shadow: inset 3px 0 0 #168a4e, 1px 0 0 #aebbc4; }
.qms-sheet-grid tr.has-error td:first-child { box-shadow: inset 3px 0 0 #bd3838, 1px 0 0 #aebbc4; }
.qms-sheet-grid tr.has-error { height: auto; min-height: 52px; }
.qms-sheet-grid tr.automation-confirmed .qms-row-save-state { color: #147746; }
.qms-sheet-grid tr.automation-candidate .qms-row-save-state,
.qms-sheet-grid tr.automation-stale .qms-row-save-state { color: #956100; }
.qms-sheet-grid tr.automation-conflict .qms-row-save-state { color: #b52f2f; }
.qms-sheet-grid tr.automation-conflict td { box-shadow: inset 0 2px 0 rgba(238, 106, 106, 0.7), inset 0 -2px 0 rgba(238, 106, 106, 0.7); }
.qms-sheet-grid input:not([type="checkbox"]),
.qms-sheet-grid select {
width: 100%;
min-width: 0;
height: var(--qms-sheet-control-size, 44px);
min-height: var(--qms-sheet-control-size, 44px);
padding: 5px 7px;
border: 1px solid #8eb7a0;
border-radius: 3px;
background: #ffffff;
color: #183326;
font: inherit;
}
.qms-sheet-grid input:focus,
.qms-sheet-grid select:focus {
border-color: #25c477;
outline: 2px solid rgba(37, 196, 119, 0.24);
outline-offset: 0;
}
.qms-sheet-check{width:var(--qms-sheet-control-size,44px);height:var(--qms-sheet-control-size,44px);margin:-5px auto;display:grid;place-items:center;cursor:pointer}
.qms-sheet-check input{width:var(--qms-sheet-checkbox-size,20px);height:var(--qms-sheet-checkbox-size,20px);accent-color:#25c477;cursor:pointer}
.qms-row-save-state{display:block;margin-top:4px;color:#445d70;font-size:12px;font-weight:700;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.qms-row-save-recovery{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.qms-row-save-recovery[hidden]{display:none}
.qms-row-recovery-button{min-height:44px;padding:6px 8px;border:1px solid #a52d2d;border-radius:4px;background:#fff5f5;color:#8f2424;font:inherit;font-size:12px;font-weight:800;line-height:1.4;white-space:normal;cursor:pointer}
.qms-row-recovery-button.is-discard{border-color:#697985;background:#f7f9fa;color:#394852}
.qms-row-recovery-button:focus-visible{outline:3px solid rgba(20,111,190,.35);outline-offset:1px}
.qms-row-recovery-button:disabled{cursor:default;opacity:.55}
.qms-sheet-grid .qms-sheet-order-editor{padding-block:3px}
.qms-sheet-grid .qms-sheet-order-editor input{height:var(--qms-sheet-control-size,44px);min-height:var(--qms-sheet-control-size,44px);padding-block:3px;font-variant-numeric:tabular-nums}
.qms-sheet-order-editor:focus-within{box-shadow:inset 3px 0 0 #168a4e,1px 0 0 #aebbc4}
.qms-sheet-number{text-align:right!important;font-variant-numeric:tabular-nums}
.qms-sheet-recipient{line-height:1.35;text-overflow:clip!important;white-space:normal!important}
.qms-sheet-recipient-value{display:block;white-space:pre-line;overflow-wrap:anywhere}
.qms-sheet-recipient-toggle{
min-height:32px;
margin-top:6px;
padding:4px 9px;
border:1px solid var(--line);
border-radius:6px;
background:var(--surface);
color:var(--accent);
font:inherit;
font-size:12px;
font-weight:900;
cursor:pointer;
}
.qms-sheet-recipient-toggle:hover,.qms-sheet-recipient-toggle:focus-visible{border-color:var(--accent);outline-offset:2px}
.qms-sheet-empty{height:auto;min-height:96px;text-align:center!important;color:var(--muted)}
.qms-sheet-empty-message{margin:12px 0;white-space:normal;line-height:1.5}
.qms-sheet-empty-reset{min-height:44px;margin-bottom:12px;white-space:normal}
#logisticsGridStatus{min-height:22px;color:var(--muted);font-size:12px;font-weight:700}
#logisticsGridStatus.is-saving{color:#176bbc}
#logisticsGridStatus.is-waiting{color:#956100}
#logisticsGridStatus.is-verified{color:#147746}
#logisticsGridStatus.has-error{color:#b52f2f}
.ops-pipeline{grid-template-columns:repeat(6,minmax(96px,1fr))}
.sheet-header-compact,.qms-compact-detail{display:none}
.qms-row-freshness,.qms-row-attention{display:block;margin-top:6px;font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.qms-row-freshness{color:#445d70}
.qms-row-attention{color:#795100;font-weight:800}
.qms-row-attention[hidden]{display:none}
.logistics-panel.is-compact .qms-sheet-scale .icon-button,
.logistics-panel.is-compact .qms-sheet-scale output,
.logistics-panel.is-compact #logisticsFitBtn{display:none}
.logistics-panel.is-compact .qms-sheet-grid{width:100%;min-width:0;zoom:1!important;--qms-sheet-control-size:44px!important;--qms-sheet-checkbox-size:20px!important;font-size:14px}
.logistics-panel.is-compact .qms-sheet-grid colgroup,
.logistics-panel.is-compact .qms-sheet-grid thead tr:not(.sheet-header-compact){display:none}
.logistics-panel.is-compact .sheet-header-compact{display:table-row}
.logistics-panel.is-compact .sheet-header-compact th{top:0;height:48px;white-space:normal;vertical-align:middle;background:#e8f0f6;color:#243b4d}
.logistics-panel.is-compact .sheet-header-compact th:nth-child(1){width:16%}
.logistics-panel.is-compact .sheet-header-compact th:nth-child(2){width:28%}
.logistics-panel.is-compact .sheet-header-compact th:nth-child(3){width:7%}
.logistics-panel.is-compact .sheet-header-compact th:nth-child(4){width:20%}
.logistics-panel.is-compact .sheet-header-compact th:nth-child(5){width:7%}
.logistics-panel.is-compact .sheet-header-compact th:nth-child(6){width:22%}
.logistics-panel.is-compact .qms-sheet-grid tbody tr{height:auto}
.logistics-panel.is-compact .qms-sheet-grid tbody td{display:none;padding:10px 8px;white-space:normal;vertical-align:top}
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="workingOrderNumber"],
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="productName"],
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="ordered"],
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="trackingNumber"],
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="completed"],
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="status"],
.logistics-panel.is-compact .qms-sheet-grid tbody td.qms-sheet-empty{display:table-cell}
.logistics-panel.is-compact .qms-sheet-grid tbody td:first-child{position:static;left:auto;z-index:auto}
.logistics-panel.is-compact .qms-compact-detail{display:block;margin-top:6px;font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.qms-product-name{display:block;font-weight:800;white-space:normal;overflow-wrap:anywhere}
.qms-product-origin{color:#445d70}
.qms-product-options{color:#243b4d;font-weight:700}
.logistics-panel.is-compact .qms-sheet-check{margin:0 auto}
@media (max-width: 1040px) {
.logistics-counts{grid-template-columns:repeat(3,minmax(0,1fr))}
.logistics-filter-groups{grid-template-columns:1fr}
.qms-sheet-viewport{max-height:64vh}
.ops-pipeline{grid-template-columns:repeat(6,minmax(96px,1fr))}
.logistics-panel.is-compact .qms-sheet-viewport{overflow-x:hidden}
.logistics-panel.is-compact .qms-sheet-grid{display:block;border:0}
.logistics-panel.is-compact .qms-sheet-grid thead{display:none}
.logistics-panel.is-compact .qms-sheet-grid tbody{display:grid;gap:12px;padding:2px 10px 10px}
.logistics-panel.is-compact .qms-sheet-grid tbody tr{display:grid;height:auto;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.logistics-panel.is-compact .qms-sheet-grid tbody tr[hidden]{display:none}
.logistics-panel.is-compact .qms-sheet-grid tbody td{min-width:0;min-height:44px;padding:10px;border:0;border-bottom:1px solid var(--line)}
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="workingOrderNumber"],
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="productName"],
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="ordered"],
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="trackingNumber"],
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="completed"],
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field="status"]{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:start;gap:6px 10px}
.logistics-panel.is-compact td[data-field]::before{grid-column:1;grid-row:1;align-self:center;color:#445d70;font-size:12px;font-weight:900}
.logistics-panel.is-compact td[data-field] > *{grid-column:2;min-width:0}
.logistics-panel.is-compact td[data-field=workingOrderNumber]::before{content:"주문번호"}
.logistics-panel.is-compact td[data-field=productName]::before{content:"상품 · 옵션"}
.logistics-panel.is-compact td[data-field=ordered]::before{content:"센터 도착"}
.logistics-panel.is-compact td[data-field=trackingNumber]::before{content:"운송장번호"}
.logistics-panel.is-compact td[data-field=completed]::before{content:"업무 완료"}
.logistics-panel.is-compact td[data-field=status]::before{content:"주문 상태 · 확인 안내"}
.logistics-panel.is-compact .qms-sheet-grid tbody td[data-field=workingOrderNumber]{box-shadow:none;background:var(--surface-2)}
.logistics-panel.is-compact td[data-field=status]{border-bottom:0}
.logistics-panel.is-compact .qms-sheet-grid tbody td.qms-sheet-empty{display:block;padding:20px 12px;text-align:center}
.logistics-panel.is-compact .qms-sheet-check{margin:0}
}
@media (max-width: 760px) {
input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;}
.qms-sheet-panel{padding:10px}
.logistics-panel.is-compact{gap:6px}
.logistics-panel.is-compact .logistics-trust{padding-block:8px}
.logistics-panel.is-compact .delivery-refresh-help{margin:0}
.logistics-panel.is-compact .qms-sheet-scroll-help{margin-bottom:0}
.qms-sheet-panel .panel-title{align-items:flex-start}
.qms-sheet-panel .panel-actions{width:100%}
.qms-sheet-panel .panel-actions>button{flex:1 1 150px}
.qms-sheet-scale{flex:1 1 220px;justify-content:center}
.logistics-panel.is-compact .qms-sheet-scale,
.logistics-panel.is-compact .panel-actions>button{flex:1 1 0;min-width:0}
.logistics-panel.is-compact .qms-sheet-scale{padding:0;border:0;background:transparent}
.logistics-panel.is-compact .qms-sheet-compact-toggle{width:100%;min-height:44px}
.logistics-panel.is-compact .panel-actions>button,
.logistics-panel.is-compact .qms-sheet-compact-toggle{font-size:13px;padding:8px 6px;white-space:nowrap}
#deliveryOperationsReadiness .ops-head{flex-direction:column;gap:8px}
#deliveryOperationsReadinessAction{align-self:flex-start;max-width:100%}
.qms-sheet-viewport{width:calc(100% + 20px);margin-inline:-10px;max-height:62vh}
.qms-sheet-pager{width:calc(100% + 20px);margin-inline:-10px}
.qms-sheet-grid input:not([type="checkbox"]),.qms-sheet-grid select{font-size:16px}
}
@media (max-width: 430px) {
.logistics-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
.logistics-panel.is-compact .logistics-counts{grid-template-columns:repeat(3,minmax(0,1fr))}
.qms-sheet-legend{gap:5px 10px}
.qms-sheet-grid{font-size:12px}
.qms-sheet-pager{align-items:stretch;flex-direction:column}
.qms-sheet-page-actions{justify-content:space-between}
.qms-sheet-page-actions output{min-width:0;flex:1 1 auto}
.qms-sheet-page-size{justify-content:flex-end}
.logistics-filter-footer{align-items:stretch;flex-direction:column}
.logistics-filter-footer button{width:100%}
.ops-pipeline{grid-template-columns:repeat(3,minmax(0,1fr));overflow-x:hidden}
}
/* Legacy extension diagnostics are not part of the operator worktable. */
#hanarik-order-tab-recovery-panel,
#hanarik-extension-collection-panel{display:none!important}
#logisticsPanel .logistics-counts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
#logisticsPanel .logistics-count{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;flex:0 1 auto}
#logisticsPanel .logistics-count span{font-size:13px}
#logisticsPanel .logistics-count strong{font-size:15px}
#logisticsPanel .logistics-count[data-logistics-filter^="auto_"]:not(.active){display:none}
#logisticsPanel .logistics-toolbar{grid-template-columns:minmax(0,1fr)}
#logisticsPanel .logistics-filter-label{display:block;margin-bottom:12px}
#logisticsPanel .logistics-filter-label select{width:100%;max-width:360px;min-height:44px}
#logisticsPanel .delivery-refresh-help{margin:4px 0 8px;font-size:12px}
#logisticsPanel .delivery-refresh-status{padding:10px 12px;margin:8px 0}
#logisticsPanel .delivery-refresh-status p{margin:0 0 6px}
#logisticsPanel .delivery-refresh-status progress{height:6px}
#logisticsPanel .delivery-refresh-results summary{cursor:pointer;padding:8px 0;font-size:12px}
#logisticsPanel .delivery-refresh-results p{font-size:12px;line-height:1.6}
#logisticsPanel .logistics-trust{padding:8px 12px;margin:8px 0;font-size:12px}
#deliveryOperationsReadiness{padding:10px 12px;margin:8px 0}
#deliveryOperationsReadiness .ops-head{align-items:center;gap:8px;margin:0}
#deliveryOperationsReadinessTitle{font-size:14px;margin:0}
.logistics-connection-tools,.logistics-readiness-details{margin-top:12px;border:1px solid #d6e1e7;border-radius:8px;background:#f8fafb}
.logistics-connection-tools>summary,.logistics-readiness-details>summary{cursor:pointer;min-height:44px;padding:12px;font-size:13px}
#logisticsConnectionTools,.logistics-readiness-details>p,.logistics-readiness-details>.ops-monitor-grid{margin:0 12px 12px}
#logisticsConnectionTools:empty{margin-bottom:0}
#cnkrConnectionNotice{font-size:12px;color:#856000;margin-left:8px}
#logisticsConnectionTools .qms-cnkr-recipient-batch{min-height:44px;padding:8px 12px;margin:8px 0}
@media(max-width:640px){
#logisticsPanel .logistics-count{flex:1 1 calc(50% - 8px);min-width:0;padding:8px 6px;gap:5px}
#logisticsPanel .logistics-count span{font-size:12px}
#deliveryOperationsReadiness .ops-head{align-items:flex-start}
#cnkrConnectionNotice{display:block;margin:4px 0 0}
}