/* Hallmark · v2.0.0 · shape: app screen · genre: modern-minimal · theme: Console, paper · console: paper · signature: cross-store listing ledger */
/* Critique: dense tables and a fixed task summary carry the workflow without decorative cards. */
html, body { margin: 0; min-height: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--color-paper); color: var(--color-ink); font: 16px/1.5 var(--font-body); scrollbar-color: var(--color-rule-2) var(--color-paper); }
button, input, select, textarea { font: inherit; caret-color: var(--color-cool); }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
input[type="checkbox"] { accent-color: var(--color-accent); width: 16px; height: 16px; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--color-accent-soft); }
.shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100dvh; }
.sidebar { background: var(--color-sidebar); color: var(--color-sidebar-ink); display: flex; flex-direction: column; min-height: 100dvh; }
.brand { height: 68px; display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-lg); font-weight: 600; font-size: 17px; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; background: var(--color-accent); color: var(--color-accent-ink); border-radius: 5px; font-size: 22px; line-height: 1; }
.nav { padding: var(--space-lg) var(--space-sm); display: grid; align-content: start; gap: 2px; }
.nav-link { min-height: 42px; width: 100%; display: flex; align-items: center; gap: var(--space-sm); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-sidebar-ink); text-align: left; padding: 0 var(--space-sm); font-size: 14px; }
.nav-link svg { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-link:hover, .nav-link.is-active { background: var(--color-sidebar-2); }
.nav-link.is-active { color: var(--color-accent); }
.nav-link:focus-visible { outline-offset: -2px; }
.sidebar-bottom { margin-top: auto; padding: var(--space-lg); color: var(--color-sidebar-ink); font-size: 13px; border-top: 1px solid var(--color-sidebar-2); display: grid; gap: 2px; }
.sidebar-bottom span { opacity: .7; }
.workspace { min-width: 0; }
.topbar { height: 68px; border-bottom: 1px solid var(--color-rule); background: var(--color-paper-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 0 var(--space-xl); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: var(--space-md); white-space: nowrap; font-size: 14px; }
.workspace-name { font-weight: 500; }
.topbar-divider { width: 1px; height: 18px; background: var(--color-rule); }
#breadcrumb { color: var(--color-muted); }
.demo-indicator { color: var(--color-muted); }
.avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink-2); font-size: 13px; }
.mobile-menu { display: none !important; }
.main { max-width: 1720px; padding: 32px var(--space-xl) 80px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: 0; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
h1 { font-size: 28px; line-height: 1.25; }
h2 { font-size: 17px; line-height: 1.35; }
p { text-wrap: pretty; }
.page-head p { color: var(--color-muted); font-size: 14px; margin-top: var(--space-2xs); }
.head-actions, .preview-actions { display: flex; align-items: center; gap: var(--space-xs); }
.button { min-height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border-radius: var(--radius-control); border: 1px solid var(--color-rule-2); padding: 0 var(--space-md); background: var(--color-paper-3); color: var(--color-ink); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color var(--dur-short); }
.button svg, .text-button svg { width: 16px; height: 16px; }
.button:hover { background: var(--color-paper-2); }
.button:active, .icon-button:active { transform: translateY(1px); }
.button-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.button-primary:hover { background: var(--color-accent-soft); }
.button-disabled { background: var(--color-paper-2); }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--color-rule); background: var(--color-paper-3); border-radius: var(--radius-control); color: var(--color-ink); }
.icon-button svg { width: 18px; height: 18px; }
.icon-button:hover { background: var(--color-paper-2); }
.demo-note { display: flex; align-items: center; gap: var(--space-xs); background: var(--color-cool-soft); color: var(--color-ink-2); border: 1px solid var(--color-cool); border-radius: var(--radius-control); padding: var(--space-sm); font-size: 13px; margin-bottom: var(--space-lg); }
.demo-note svg { width: 16px; height: 16px; color: var(--color-cool); flex: 0 0 auto; }
.setup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-lg); align-items: start; }
.setup-main { min-width: 0; }
.section-block { border-top: 1px solid var(--color-rule); padding: var(--space-lg) 0 var(--space-xl); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.section-hint { color: var(--color-muted); font-size: 13px; }
.section-heading > div > .section-hint { margin-top: 2px; }
.platform-options { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.platform-choice { min-height: var(--control-height); display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper-3); cursor: pointer; font-size: 14px; white-space: nowrap; }
.platform-choice:has(input:checked) { border-color: var(--color-cool); background: var(--color-cool-soft); }
.platform-choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.platform-choice input { margin: 0; }
.store-toolbar, .product-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.store-toolbar > label { font-size: 14px; font-weight: 500; }
.store-actions { display: flex; align-items: center; gap: var(--space-sm); }
.input { min-height: var(--control-height); border: 1px solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper-3); color: var(--color-ink); padding: 0 var(--space-sm); outline: 2px solid transparent; outline-offset: -3px; }
.input:hover { background: var(--color-paper-2); }
.input:focus-visible { outline-color: var(--color-focus); }
textarea.input { padding: var(--space-sm); }
#store-search { width: 190px; }
.text-button { border: 0; background: transparent; color: var(--color-cool); font-size: 13px; padding: var(--space-xs); white-space: nowrap; }
.text-button:hover { text-decoration: underline; }
.store-groups { display: grid; gap: var(--space-xs); }
.store-group { border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper-3); }
.store-group-head { display: flex; justify-content: space-between; align-items: center; min-height: 39px; padding: 0 var(--space-md); border-bottom: 1px solid var(--color-rule); font-size: 13px; }
.store-group-head strong { font-weight: 500; }
.store-group-head span { color: var(--color-muted); }
.store-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.store-item { display: flex; align-items: center; gap: var(--space-xs); min-height: 42px; padding: 0 var(--space-md); font-size: 13px; cursor: pointer; min-width: 0; }
.store-item:hover { background: var(--color-paper-2); }
.store-item:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.store-item input { margin: 0; flex: 0 0 auto; }
.store-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-item small { margin-left: auto; color: var(--color-muted); white-space: nowrap; font-size: 12px; }
.search-field { display: flex; align-items: center; gap: var(--space-xs); width: min(280px, 100%); height: var(--control-height); border: 1px solid var(--color-muted); background: var(--color-paper-3); border-radius: var(--radius-control); padding: 0 var(--space-sm); }
.search-field:focus-within { outline: 2px solid var(--color-focus); outline-offset: -3px; }
.search-field svg { width: 16px; height: 16px; color: var(--color-muted); }
.search-field input { width: 100%; height: 36px; min-width: 0; border: 0; outline: none; background: transparent; color: var(--color-ink); font-size: 13px; }
.search-field input:focus-visible { outline: none; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { border-collapse: collapse; width: 100%; text-align: left; font-size: 13px; }
.data-table th { color: var(--color-muted); font-weight: 500; white-space: nowrap; background: var(--color-paper-2); }
.data-table th, .data-table td { padding: var(--space-sm); border-bottom: 1px solid var(--color-rule); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--color-paper-3); }
.data-table input[type="checkbox"] { vertical-align: middle; }
.data-table th:first-child, .data-table td:first-child { padding-left: var(--space-md); }
.data-table th:last-child, .data-table td:last-child { padding-right: var(--space-md); }
.mono { font-family: var(--font-measured); font-variant-numeric: tabular-nums; font-size: 12px; }
.status { display: inline-flex; align-items: center; min-height: 23px; padding: 0 var(--space-xs); border-radius: var(--space-2xs); font-size: 12px; font-weight: 500; white-space: nowrap; }
.status-ok { color: var(--color-ok); background: var(--color-ok-soft); }
.status-wait { color: var(--color-cool); background: var(--color-cool-soft); }
.status-bad { color: var(--color-bad); background: var(--color-bad-soft); }
.status-neutral { color: var(--color-ink-2); background: var(--color-paper-2); }
.summary-panel { position: sticky; top: 24px; border: 1px solid var(--color-rule); border-radius: var(--radius-panel); background: var(--color-paper-3); padding: var(--space-lg); }
.summary-panel h2 { margin-bottom: var(--space-md); }
.summary-line, .summary-total { display: flex; justify-content: space-between; align-items: center; padding: var(--space-xs) 0; font-size: 13px; }
.summary-line span, .summary-total span { color: var(--color-muted); }
.summary-line strong, .summary-total strong { font: 500 16px/1.2 var(--font-measured); font-variant-numeric: tabular-nums; }
.summary-total { border-top: 1px solid var(--color-rule); margin-top: var(--space-xs); padding-top: var(--space-md); }
.summary-total strong { font-size: 24px; color: var(--color-cool); }
.summary-panel p { color: var(--color-muted); font-size: 12px; line-height: 1.5; margin-top: var(--space-md); }
.preview-section { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
.preview-section .section-heading { align-items: flex-end; }
.preview-table td:first-child { font-weight: 500; }
.preview-table td:first-child small, #record-rows td:first-child small { display: block; color: var(--color-muted); font-weight: 400; font-size: 12px; }
.empty-row { text-align: center; color: var(--color-muted); padding: 32px !important; }
.tabs { display: flex; gap: var(--space-lg); border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-md); }
.tab { min-height: 42px; padding: 0 var(--space-2xs); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-muted); font-size: 14px; }
.tab:hover { color: var(--color-ink); }
.tab.is-active { color: var(--color-cool); border-bottom-color: var(--color-cool); }
.filterbar { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.filterbar label { display: grid; gap: var(--space-2xs); min-width: 175px; color: var(--color-muted); font-size: 13px; }
.filterbar .input { min-width: 175px; }
.empty-state { border-top: 1px solid var(--color-rule); padding: 72px var(--space-lg); text-align: center; color: var(--color-muted); }
.empty-state svg { width: 29px; height: 29px; margin-bottom: var(--space-md); color: var(--color-cool); }
.empty-state h2 { color: var(--color-ink); margin-bottom: var(--space-xs); }
.empty-state p { font-size: 13px; }
.commander-box { max-width: 720px; border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); display: grid; gap: var(--space-xs); }
.commander-box > label { font-size: 14px; font-weight: 500; }
.commander-box textarea { width: 100%; min-height: 160px; resize: vertical; }
.commander-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); }
.commander-actions span { color: var(--color-muted); font-size: 13px; }
.dialog { width: min(460px, calc(100% - 32px)); max-height: min(80dvh, 700px); position: fixed; inset: 0; margin: auto; padding: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-panel); background: var(--color-paper-3); color: var(--color-ink); }
.dialog::backdrop { background: var(--color-sidebar); opacity: .65; }
.dialog form { padding: var(--space-lg); display: grid; gap: var(--space-xs); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xs); }
.dialog form > p { color: var(--color-muted); font-size: 13px; }
.dialog form > label { font-size: 13px; font-weight: 500; margin-top: var(--space-sm); }
.dialog .input { width: 100%; }
.field-help { min-height: 1lh; color: var(--color-bad) !important; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-sm); }
@media (max-width: 1100px) { .setup-layout { grid-template-columns: minmax(0, 1fr); } .summary-panel { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); align-items: end; } .summary-panel h2 { grid-column: 1 / -1; margin: 0; } .summary-panel p { grid-column: 1 / -1; margin: 0; } .summary-total { border: 0; margin: 0; padding: var(--space-xs) 0; } }
@media (max-width: 960px) { .shell { grid-template-columns: minmax(0, 1fr); } .sidebar { display: none; position: fixed; z-index: 300; inset: 0 auto 0 0; width: 228px; } .sidebar.is-open { display: flex; } .mobile-menu { display: grid !important; } .topbar { padding: 0 var(--space-lg); } .main { padding: 28px var(--space-lg) 64px; } }
@media (max-width: 680px) { .topbar { height: 58px; } .topbar-divider, .workspace-name, .demo-indicator { display: none; } .main { padding: var(--space-lg) var(--space-md) 48px; } .page-head { align-items: flex-start; flex-direction: column; } .head-actions { width: 100%; } .head-actions .button { flex: 1; } .store-toolbar, .product-toolbar { align-items: flex-start; flex-direction: column; } .store-actions, .search-field, #store-search, #batch-edit { width: 100%; } .store-actions .input { flex: 1; min-width: 0; } .store-items { grid-template-columns: minmax(0, 1fr); } .summary-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-md); } .preview-section .section-heading { align-items: flex-start; flex-direction: column; } .preview-actions { width: 100%; } .preview-actions .button { flex: 1; } .data-table { display: block; } .data-table thead { display: none; } .data-table tbody { display: grid; gap: var(--space-xs); } .data-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--color-rule); background: var(--color-paper-3); border-radius: var(--radius-control); padding: var(--space-xs); } .data-table td { display: grid; gap: 2px; border: 0; padding: var(--space-2xs) var(--space-xs) !important; min-width: 0; overflow-wrap: break-word; } .data-table td::before { content: attr(data-label); color: var(--color-muted); font-size: 11px; } .data-table td:first-child:has(input) { display: flex; align-items: center; } .data-table td:first-child:has(input)::before { display: none; } .product-table td:nth-child(2) { grid-column: span 2; } .preview-table td:first-child { grid-column: span 2; } .filterbar label { width: 100%; } .filterbar .input { width: 100%; } .commander-actions { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* Listing and product detail */
.setup-layout { display: block; }
.setup-main { max-width: 1120px; }
.store-pickers { display: grid; gap: 8px; }
.store-picker-row { display: grid; grid-template-columns: 132px 210px minmax(0,1fr); gap: 12px; align-items: center; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--color-rule); }
.store-picker-head { display: grid; font-size: 13px; }
.store-picker-head span { color: var(--color-muted); font-size: 12px; }
.store-dropdown { position: relative; }
.store-dropdown summary { list-style: none; display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 10px; border: 1px solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper-3); cursor: pointer; font-size: 13px; }
.store-dropdown summary::-webkit-details-marker { display: none; }
.store-dropdown summary svg { width: 15px; height: 15px; }
.store-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: max(280px, 100%); padding: 8px; background: var(--color-paper-3); border: 1px solid var(--color-rule-2); box-shadow: 0 8px 24px #0002; border-radius: var(--radius-control); }
.store-menu .input { width: 100%; }
.store-options { max-height: 240px; overflow-y: auto; margin-top: 5px; }
.store-option { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 6px; font-size: 13px; cursor: pointer; }
.store-option:hover { background: var(--color-paper-2); }
.store-option[hidden] { display: none; }
.store-option small { margin-left: auto; color: var(--color-muted); }
.selected-stores { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.store-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 9px; border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper-3); font-size: 12px; white-space: nowrap; }
.login-demo { color: var(--color-muted); }
.store-chip button { border: 0; background: transparent; color: var(--color-muted); font-size: 17px; line-height: 1; padding: 0 2px; }
.product-toolbar { justify-content: flex-start; }
.product-picker { position: relative; width: min(360px, 100%); }
.product-picker .search-field { width: 100%; }
.picker-options { position: absolute; z-index: 10; top: calc(100% + 4px); width: 100%; max-height: 260px; overflow-y: auto; border: 1px solid var(--color-rule-2); background: var(--color-paper-3); box-shadow: 0 8px 24px #0002; border-radius: var(--radius-control); }
.picker-options button { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; border-bottom: 1px solid var(--color-rule); background: transparent; padding: 10px; text-align: left; font-size: 13px; }
.picker-options button:hover { background: var(--color-paper-2); }
.picker-options small { color: var(--color-muted); }
.picker-empty, .empty-inline { padding: 20px; color: var(--color-muted); font-size: 13px; border: 1px dashed var(--color-rule-2); }
.picker-empty { border: 0; }
.listing-products { display: grid; gap: 12px; }
.listing-product { border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper-3); overflow: hidden; }
.listing-product-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--color-rule); }
.listing-product-head > div { display: grid; min-width: 0; }
.listing-product-head strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.listing-product-head small { color: var(--color-muted); font-size: 12px; }
.listing-product-head .icon-button { margin-left: auto; width: 30px; height: 30px; flex: 0 0 auto; }
.listing-sku { display: grid; grid-template-columns: 180px minmax(0,1fr) 240px; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--color-rule); }
.listing-sku:last-child { border-bottom: 0; }
.listing-sku-name { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.listing-sku-name span { display: grid; }
.listing-sku-name small { color: var(--color-muted); }
.listing-prices { display: flex; flex-wrap: wrap; gap: 5px 16px; }
.listing-price { display: inline-flex; gap: 5px; font-size: 12px; }
.listing-price small { color: var(--color-muted); }
.listing-price strong { font-weight: 500; }
.stock-pair { display: flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.stock-pair > span:first-child { color: var(--color-muted); }
.stock-pair .input { width: 58px; min-height: 32px; padding: 0 4px; text-align: center; }
.sku-price { display: flex; gap: 8px; justify-content: space-between; min-width: 160px; }
.sku-price strong { font-weight: 500; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.product-entry { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; color: var(--color-ink); text-align: left; cursor: pointer; }
.product-entry:hover .product-entry-name { text-decoration: underline; }
.product-thumb { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; background: white; border: 1px solid var(--color-rule); border-radius: 3px; overflow: hidden; color: var(--color-muted); }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-thumb svg { width: 16px; height: 16px; }
.product-entry-name { font-size: 13px; }
.detail-back { margin-bottom: 10px; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 28px; }
.detail-main { min-width: 0; }
.detail-section { padding: 18px 0 26px; border-top: 1px solid var(--color-rule); }
.basic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.detail-field { display: grid; gap: 4px; color: var(--color-muted); font-size: 12px; }
.detail-field .input { width: 100%; color: var(--color-ink); font-size: 13px; }
.detail-side { align-self: start; display: grid; gap: 10px; }
.detail-image { aspect-ratio: 1; display: grid; place-content: center; gap: 6px; text-align: center; border: 1px solid var(--color-rule); background: white; color: var(--color-muted); font-size: 12px; }
.detail-image img { width: 100%; height: 100%; object-fit: contain; }
.detail-image svg { width: 30px; height: 30px; margin: auto; }
.upload-label { cursor: pointer; }
.detail-platform { display: grid; gap: 4px; margin-top: 12px; font-size: 13px; }
.detail-help { color: var(--color-muted); font-size: 12px; margin-top: 8px; }
.sku-input { width: 100%; min-width: 95px; font-size: 12px; }
.sku-small { min-width: 78px; }
.sku-remove { width: 30px; height: 30px; }
.sku-editors { display: grid; gap: 20px; }
.sku-editor { border-bottom: 1px solid var(--color-rule); padding-bottom: 18px; }
.sku-editor > .section-heading strong { font-size: 13px; font-weight: 500; }
.sku-image-details { margin-top: 12px; }
.sku-image-details > summary { cursor: pointer; font-size: 12px; color: var(--color-muted); margin-bottom: 10px; }
.listing-title-section { padding: 16px 12px; border-bottom: 1px solid var(--color-rule); }
.listing-title-section h3 { font-size: 13px; margin-bottom: 10px; }
.required-mark { font-size: 11px; font-weight: 400; color: var(--color-muted); margin-left: 6px; }
.listing-title-field { margin-bottom: 10px; }
.listing-title-field textarea { resize: vertical; padding: 8px 10px; min-height: 66px; line-height: 1.6; }
.listing-source-note { padding: 12px; color: var(--color-muted); font-size: 12px; }
.imagegen-layout { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 28px; }
.imagegen-product-panel { align-self: start; padding-top: 18px; }
.imagegen-product-panel h3 { margin-top: 12px; font-size: 14px; }
.imagegen-white-image { display: block; width: 100%; max-height: 240px; object-fit: contain; margin: 16px 0; background: var(--color-paper-3); }
.imagegen-missing { margin: 16px 0; font-size: 13px; color: var(--color-muted); line-height: 1.7; }
.imagegen-product-panel .text-button { margin-top: 12px; }
.imagegen-form textarea { width: 100%; padding: 10px; line-height: 1.7; resize: vertical; }
.imagegen-checks { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 13px; }
.imagegen-checks label { display: flex; align-items: center; gap: 6px; }
.imagegen-reference-preview img { display: block; max-height: 220px; max-width: 100%; margin-top: 12px; }
.imagegen-reference-preview { margin-bottom: 14px; }
.imagegen-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 28px; }
.imagegen-draft { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--color-rule); }
.imagegen-draft strong { font-size: 14px; font-weight: 500; }
.imagegen-draft p, .imagegen-draft small { font-size: 12px; color: var(--color-muted); }
.imagegen-draft-actions { display: flex; align-items: center; gap: 14px; }
@media (max-width: 900px) { .imagegen-layout { grid-template-columns: minmax(0,1fr); } .imagegen-product-panel { grid-row: 1; } .imagegen-white-image { max-width: 180px; } }
@media (max-width: 700px) { .imagegen-draft { flex-direction: column; gap: 10px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.platform-store-options { display: grid; gap: 16px; }
.target-picker-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.target-picker-field { display: grid; gap: 6px; width: 210px; min-width: 0; font-size: 12px; color: var(--color-muted); }
.target-picker-field > .input { width: 100%; font-size: 13px; }
.target-picker-field .store-dropdown { color: var(--color-ink); }
.target-count { margin-left: auto; padding-bottom: 9px; }
.target-selections { display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid var(--color-rule); }
.target-selection-row { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 8px; align-items: start; }
.target-platform-name { padding-top: 6px; font-size: 12px; color: var(--color-muted); }
.listing-product > summary { list-style: none; cursor: pointer; }
.listing-product > summary::-webkit-details-marker { display: none; }
.listing-product:not([open]) > summary { border-bottom: 0; }
.listing-product > summary:hover { background: var(--color-paper-2); }
.listing-product-title { flex: 1; }
.collapse-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-muted); }
.collapse-label svg { width: 16px; height: 16px; }
.listing-product[open] .collapse-label svg { transform: rotate(180deg); }
.listing-product .when-open, .listing-product[open] .when-closed { display: none; }
.listing-product[open] .when-open { display: inline; }
.listing-product-head .icon-button { margin-left: 0; }
.listing-gallery-section { padding: 16px 12px; border-bottom: 1px solid var(--color-rule); }
.listing-gallery-section h3 { font-size: 13px; }
.listing-gallery-section .section-heading { margin-bottom: 12px; }
.sku-section-label { padding: 10px 12px 4px; color: var(--color-muted); font-size: 12px; }
.gallery-items { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-item { width: 110px; position: relative; border: 1px solid var(--color-rule); background: white; border-radius: 4px; overflow: hidden; cursor: grab; }
.gallery-item.is-dragging { opacity: .4; }
.gallery-item img { display: block; width: 108px; height: 94px; object-fit: contain; pointer-events: none; }
.image-order { position: absolute; top: 3px; left: 3px; padding: 0 5px; font-size: 11px; line-height: 20px; background: var(--color-paper-2); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: 2px; }
.image-actions { display: flex; justify-content: space-between; border-top: 1px solid var(--color-rule); background: var(--color-paper-3); }
.image-actions button { padding: 4px 6px; border: 0; background: transparent; font-size: 12px; color: var(--color-ink-2); }
.image-actions button:hover { background: var(--color-paper-2); }
.gallery-add { position: relative; display: grid; align-content: center; justify-items: center; gap: 3px; width: 110px; min-height: 124px; border: 1px dashed var(--color-rule-2); border-radius: 4px; font-size: 12px; cursor: pointer; overflow: hidden; color: var(--color-muted); }
.gallery-add > span:first-child { font-size: 24px; }
.gallery-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gallery-add:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.gallery-help { margin-top: 8px; color: var(--color-muted); font-size: 12px; }
.detail-side .gallery-items { gap: 6px; }
.detail-side .gallery-item, .detail-side .gallery-add { width: 104px; }
.detail-side .gallery-item img { width: 102px; }
.renewal-editor { padding: 20px; margin-bottom: 28px; border: 1px solid var(--color-rule); background: var(--color-paper-3); border-radius: var(--radius-panel); }
.renewal-form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.renewal-store-field, .renewal-types { grid-column: 1 / -1; }
.renewal-store-field > .section-heading { margin-bottom: 6px; font-size: 13px; }
.renewal-store-field > .input { width: min(360px,100%); }
.renewal-store-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px 20px; padding-top: 10px; max-height: 200px; overflow-y: auto; }
.renewal-store-choice { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.renewal-store-choice small { color: var(--color-muted); font-size: 11px; }
.renewal-types { margin: 0; padding: 12px 0; border: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.renewal-types legend { font-size: 12px; color: var(--color-muted); padding: 0; margin-bottom: 5px; }
.renewal-types label { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.renewal-filters { align-items: end; }
.renewal-filters > span { margin-left: auto; padding-bottom: 8px; }
.renewal-tasks { display: grid; gap: 14px; }
.renewal-task { padding: 20px; background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-control); }
.renewal-task-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.renewal-task-heading h2 { font-size: 16px; }
.renewal-task-heading p { font-size: 12px; color: var(--color-muted); margin-top: 3px; }
.renewal-task-stores { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.renewal-task-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding-top: 12px; border-top: 1px solid var(--color-rule); }
.renewal-task-meta > div { display: grid; gap: 3px; font-size: 13px; }
.renewal-task-meta span { color: var(--color-muted); font-size: 12px; }
.renewal-task-meta strong { font-weight: 500; }
.renewal-task-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }
@media (max-width: 1100px) { .renewal-store-options { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .target-picker-bar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; } .target-picker-field { width: 100%; } .target-count { grid-column: 1 / -1; margin-left: 0; padding-bottom: 0; } .target-selection-row { grid-template-columns: minmax(0,1fr); gap: 3px; } .listing-gallery-section .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; } .renewal-form-grid, .renewal-store-options { grid-template-columns: minmax(0,1fr); } .renewal-task-meta { grid-template-columns: repeat(2,minmax(0,1fr)); } .renewal-editor, .renewal-task { padding: 14px; } .collapse-label { font-size: 11px; } .collapse-label svg { display: none; } .target-picker-field .store-menu { left: auto; right: 0; width: min(300px,calc(100vw - 40px)); } }
@media (max-width: 1100px) { .listing-sku { grid-template-columns: 160px minmax(0,1fr); } .stock-pair { grid-column: 2; } .basic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .store-picker-row { grid-template-columns: minmax(0,1fr); gap: 7px; } .store-dropdown { max-width: 360px; } .store-menu { width: min(320px, calc(100vw - 42px)); } .selected-stores { padding-bottom: 4px; } .product-toolbar { align-items: stretch; } .product-picker { width: 100%; } .listing-sku { grid-template-columns: minmax(0,1fr); gap: 8px; } .stock-pair { grid-column: auto; flex-wrap: wrap; } .detail-layout { grid-template-columns: minmax(0,1fr); } .detail-side { grid-row: 1; max-width: 240px; } .basic-grid { grid-template-columns: minmax(0,1fr); } }
.image-service-access { padding: 18px 22px; margin-bottom: 22px; border: 1px solid var(--border, #e1e4e1); border-radius: 12px; background: #f8faf8; }
.image-service-access p { margin: 0 0 10px; }
.image-service-access .detail-field { min-width: 240px; }
.imagegen-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.image-result { border: 1px solid #e1e4e1; border-radius: 12px; overflow: hidden; padding: 12px; }
.image-result img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #f5f6f5; margin-bottom: 12px; }
.image-result p { color: #69736d; font-size: 12px; }
#imagegen-prompt-preview { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; font: inherit; font-size: 13px; line-height: 1.7; padding: 16px; background: #f6f8f6; }