/* Hallmark · macrostructure: Catalogue (bidding table and history) · genre: modern-minimal · theme: Cobalt with existing fonts · nav: sidebar workspace · footer: Ft2 · enrichment: none
 * audience: sellers · use: inspect product prices · tone: utilitarian
 * design-system: design.md · designed-as-app · pre-emit critique: P4 H5 E5 S5 R5 V4 */
@import url('/assets/tokens.css');

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 400 16px/1.6 var(--font-body); }
[hidden] { display: none !important; }
h1,h2,h3 { font-family: var(--font-display); font-style: normal; line-height: 1.25; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(26px, 2.6vw, 36px); margin: 0 0 var(--space-sm); font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 24px; margin: 0 0 var(--space-md); } h3 { font-size: 20px; margin: 0 0 var(--space-md); }
p { margin: 0 0 var(--space-md); } button,input,select { font: inherit; }
button,a { -webkit-tap-highlight-color: var(--color-accent-soft); }
button { border: 1px solid var(--color-control); background: var(--color-surface); color: var(--color-ink); border-radius: 6px; padding: 9px 16px; cursor: pointer; white-space: nowrap; min-height: 44px; transition: transform 120ms var(--ease-out); }
button:hover:not(:disabled) { background: var(--color-soft); border-color: var(--color-ink); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
button[aria-busy="true"] { cursor: wait; }
button.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface); }
button.primary:hover:not(:disabled) { background: var(--color-ink); }
button.text-button { border-color: var(--color-paper); background: var(--color-paper); padding: 8px; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
input,select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--color-control); border-radius: 6px; color: var(--color-ink); background: var(--color-surface); padding: 10px 12px; }
input::placeholder { color: var(--color-muted); } input[aria-invalid="true"] { border-color: var(--color-error); }
label { display: grid; gap: var(--space-sm); font-size: 14px; font-weight: 600; min-width: 0; }
.muted { color: var(--color-muted); } .small { font-size: 14px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: clip; clip-path: inset(50%); }
.skip { position: fixed; top: -100px; left: 12px; z-index: 3; padding: 12px; background: var(--color-surface); color: var(--color-ink); }
.skip:focus { top: 12px; }
.shell { display: grid; grid-template-columns: 216px minmax(0,1fr); min-height: 100dvh; }
.sidebar { padding: var(--space-xl) var(--space-lg); border-right: 1px solid var(--color-rule); display: flex; flex-direction: column; background: var(--color-soft); }
.brand { display: flex; gap: 12px; align-items: center; color: var(--color-ink); text-decoration: none; font-family: var(--font-display); line-height: 1.25; }
.brand-mark { font-size: 32px; font-weight: 700; letter-spacing: -.07em; }
.sidebar-caption { margin: var(--space-2xl) 0 var(--space-md); color: var(--color-muted); font-size: 14px; }
nav { display: grid; gap: var(--space-sm); } nav button { text-align: left; border-color: var(--color-soft); background: var(--color-soft); font-size: 14px; }
nav button span { float: right; } nav button[aria-current="page"] { background: var(--color-surface); border-color: var(--color-rule); color: var(--color-accent); font-weight: 700; }
.sidebar-foot { margin-top: auto; padding-top: var(--space-3xl); font-size: 13px; } .sidebar-foot p { color: var(--color-muted); margin-top: var(--space-sm); }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--color-muted); }
main { min-width: 0; padding: 0 var(--space-2xl); max-width: 1640px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 80px; border-bottom: 1px solid var(--color-rule); font-size: 14px; color: var(--color-muted); }
.topbar div { display: flex; align-items: center; gap: 12px; min-width: 0; } #account-name { overflow-wrap: anywhere; }
.auth-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: var(--space-3xl); padding: 72px 0 96px; align-items: start; }
.auth-intro { max-width: 470px; padding-top: var(--space-xl); } .auth-intro h1 { font-size: clamp(32px,3.6vw,48px); margin-bottom: var(--space-lg); }
.auth-intro p { max-width: 35ch; } .intro-rule { width: 48px; height: 2px; background: var(--color-accent); margin: var(--space-xl) 0; }
.auth-panel { max-width: 390px; padding-top: var(--space-xl); } #auth-form,#activation-form { display: grid; gap: var(--space-lg); margin: var(--space-lg) 0 var(--space-md); }
.notice { margin: var(--space-lg) 0; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: 6px; background: var(--color-surface); font-size: 14px; overflow-wrap: anywhere; }
.notice[data-state="error"] { color: var(--color-error); border-color: var(--color-error); } .notice[data-state="success"] { color: var(--color-good); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding: var(--space-2xl) 0 var(--space-lg); } .section-head p { color: var(--color-muted); margin: 0; }
.toolbar { display: grid; grid-template-columns: minmax(160px,1fr) minmax(180px,1.5fr) auto; align-items: end; gap: var(--space-md); padding: var(--space-lg) 0; }
.table-wrap { border-top: 1px solid var(--color-rule); } table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
th { font-size: 14px; color: var(--color-muted); font-weight: 400; text-align: left; padding: var(--space-md) 12px; }
th:first-child { width: 49%; } th:last-child { width: 130px; } td { padding: 20px 12px; border-top: 1px solid var(--color-rule); vertical-align: middle; overflow-wrap: anywhere; }
td:first-child, th:first-child { padding-left: 0; } td:last-child,th:last-child { padding-right: 0; text-align: right; }
.product-title { display: block; font-weight: 600; margin-bottom: var(--space-xs); } .product-meta { color: var(--color-muted); font-size: 13px; }
.amount { font-weight: 600; white-space: nowrap; } .badge { font-size: 13px; color: var(--color-muted); } .badge.good { color: var(--color-good); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--space-lg) 0; } .pagination div { display: flex; gap: var(--space-sm); }
.empty { padding: var(--space-3xl) var(--space-lg); text-align: center; border-bottom: 1px solid var(--color-rule); } .empty p { color: var(--color-muted); }
.store-row,.audit-row { padding: var(--space-lg) 0; border-top: 1px solid var(--color-rule); display: flex; align-items: start; justify-content: space-between; gap: 16px; overflow-wrap: anywhere; }
.store-row h2 { font-size: 20px; margin-bottom: 8px; } .store-row p,.audit-row p { margin: 0; font-size: 14px; color: var(--color-muted); }
.connect-form { border-top: 1px solid var(--color-rule); padding-top: var(--space-xl); margin-top: var(--space-xl); max-width: 720px; } .connect-form button { margin-top: var(--space-lg); } .connect-form p { max-width: 60ch; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
footer { margin: var(--space-3xl) 0 var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: 13px; color: var(--color-muted); display: flex; justify-content: space-between; gap: 16px; }
dialog { width: min(720px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: 10px; background: var(--color-surface); color: var(--color-ink); }
dialog::backdrop { background: var(--color-overlay); } .dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; } .dialog-head h2 { max-width: 30ch; } .dialog-head p { margin-bottom: 8px; overflow-wrap: anywhere; }
.price-line { font-size: 20px; font-variant-numeric: tabular-nums; } .detail-section { border-top: 1px solid var(--color-rule); margin-top: var(--space-lg); padding-top: var(--space-lg); }
.checkbox-label { display: flex; align-items: center; gap: 10px; } .checkbox-label input { width: 20px; height: 20px; min-height: 20px; accent-color: var(--color-accent); }
output { display: block; padding: var(--space-md) 0 0; color: var(--color-good); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { main { padding: 0 var(--space-lg); } .shell { grid-template-columns: 180px minmax(0,1fr); } .sidebar { padding: 24px 16px; } .auth-layout { gap: var(--space-xl); } .toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); } .toolbar button { justify-self: start; } }
@media (max-width: 768px) {
  .shell { display: block; } .sidebar { border-right: 0; border-bottom: 1px solid var(--color-rule); padding: 16px; }
  .brand { font-size: 14px; } .brand br { display: none; } .brand strong { margin-left: 4px; } .brand-mark { font-size: 26px; }
  .sidebar-caption,.sidebar-foot { display: none; } nav { display: flex; gap: 4px; margin-top: 16px; flex-wrap: wrap; } nav button { padding: 8px 12px; } nav button span { display: none; }
  .topbar { min-height: 64px; } .topbar > span { display: none; } .topbar div { width: 100%; justify-content: space-between; }
  .auth-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-lg); padding: 32px 0; } .auth-intro { padding: 0; } .auth-intro h1 { font-size: 32px; } .auth-intro .intro-rule,.auth-intro > p:last-child { display: none; } .auth-panel { max-width: none; }
  .section-head { display: block; padding-top: 32px; } .section-head button { margin-top: 16px; } .toolbar { grid-template-columns: minmax(0,1fr); }
  table,tbody,tr,td { display: block; } thead { display: none; } tr { border-top: 1px solid var(--color-rule); padding: 16px 0; } td { border: 0; padding: 4px 0; } td:last-child { text-align: left; padding-top: 12px; }
  .product-title { font-size: 16px; } .pagination { align-items: start; flex-direction: column; } .store-row { flex-direction: column; }
  .form-grid { grid-template-columns: minmax(0,1fr); } footer { flex-direction: column; gap: 4px; margin-top: 40px; }
  dialog { padding: 20px; } .dialog-head { align-items: start; } .dialog-head button { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:active:not(:disabled) { transform: none; } }

/* The authenticated workspace retains the original auth and detail forms. */
.sidebar-description { font-size: 14px; color: var(--color-muted); }
.workspace-nav { display: flex; align-items: center; gap: var(--space-lg); border-bottom: 1px solid var(--color-rule); padding-top: var(--space-md); }
.workspace-nav button { border: 0; border-radius: 0; border-bottom: 2px solid var(--color-paper); background: var(--color-paper); padding: var(--space-md) var(--space-sm); }
.workspace-nav button[aria-current="page"] { background: var(--color-paper); border-bottom-color: var(--color-accent); }
.workspace-nav .store-settings { margin-left: auto; color: var(--color-muted); }
#workspace .section-head { padding-top: var(--space-lg); padding-bottom: var(--space-md); }
#workspace h1 { font-size: 28px; } #workspace .section-head p { font-size: 14px; }
.allocation-strip { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-surface); }
.budget-overview,.interval-overview { padding: var(--space-md) var(--space-lg); min-width: 0; }
.budget-overview { border-right: 1px solid var(--color-rule); }
.allocation-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 44px; font-size: 14px; }
.allocation-heading button { background: var(--color-surface); padding-inline: var(--space-sm); font-size: 13px; }
#budget-value { display: block; font: 600 24px/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
progress { display: block; width: 100%; height: 6px; margin: var(--space-sm) 0; accent-color: var(--color-ink); }
progress::-webkit-progress-bar { background: var(--color-soft); border-radius: 4px; } progress::-webkit-progress-value { background: var(--color-ink); border-radius: 4px; }
.allocation-strip p { margin: var(--space-sm) 0 0; font-size: 12px; }
.interval-counts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-md); }
.interval-counts div { display: grid; gap: var(--space-xs); }
.interval-counts strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.execution-note { font-size: 13px; color: var(--color-muted); padding-top: var(--space-md); margin-bottom: 0; }
#workspace .toolbar { grid-template-columns: minmax(140px,1fr) minmax(180px,1.7fr) minmax(140px,.8fr) auto; padding-block: var(--space-lg) var(--space-md); }
#workspace .toolbar button { background: var(--color-ink); color: var(--color-surface); border-color: var(--color-ink); }
.list-meta { display: flex; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); } .list-meta p { margin: 0; }
.product-table,.history-table,.plan-table { font-size: 14px; }
.product-table th:first-child { width: 27%; } .product-table th:last-child { width: 112px; }
.product-table th:nth-child(5) { width: 18%; }
.sales-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-block: var(--space-md); }
.sales-toolbar>div { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.allocation-help { font-size: 14px; border-bottom: 1px solid var(--color-rule); padding-block: var(--space-sm); }
.allocation-help summary { cursor: pointer; color: var(--color-ink); }
.allocation-help p { max-width: 90ch; color: var(--color-muted); line-height: 1.6; }
.allocation-cell { font-size: 12px; color: var(--color-muted); max-width: 180px; }
@media (max-width: 768px) { .sales-toolbar { align-items: flex-start; flex-direction: column; } .allocation-cell { max-width: none; } }
.product-table th { font-size: 13px; font-weight: 600; background: var(--color-soft); }
.product-table td { padding-block: var(--space-md); }
.product-table td:first-child,.product-table th:first-child { padding-left: 12px; }
.product-table td:last-child,.product-table th:last-child { padding-right: 12px; }
.product-meta { display: block; margin-top: var(--space-xs); font-size: 12px; }
.status-label { display: inline-block; font-size: 12px; padding: var(--space-xs) var(--space-sm); background: var(--color-soft); border-radius: 4px; white-space: nowrap; }
.status-label.good { color: var(--color-good); }
.history-toolbar { display: grid; grid-template-columns: repeat(2,minmax(160px,240px)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.history-table th:first-child { width: 20%; } .history-table th:nth-child(2) { width: 15%; } .history-table th:nth-child(3) { width: 23%; } .history-table th:last-child { width: 42%; }
.history-table td:last-child,.history-table th:last-child { text-align: left; }
.history-table td:first-child,.history-table th:first-child { padding-left: 12px; }
.history-table td:last-child,.history-table th:last-child { padding-right: 12px; }
.history-table td { font-size: 13px; padding-block: var(--space-md); } .history-table th { background: var(--color-soft); }
.history-empty { text-align: left; padding: var(--space-xl) var(--space-md); }
#plan-dialog { width: min(1320px,calc(100% - 32px)); }
.plan-table th:first-child { width: 16%; } .plan-table th:last-child { width: 12%; }
.plan-bands { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-sm) var(--space-md); margin-block: var(--space-lg); }
.plan-bands p { font-size: 13px; margin: 0; }
.plan-table td { padding-block: var(--space-md); }
.plan-help { margin-top: var(--space-lg); }
:focus-visible { outline-color: var(--color-focus); }
/* Detail editing keeps the product context in view while configuration scrolls. */
html { scrollbar-gutter: stable; }
html:has(dialog[open]),body:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; }
.status-label { padding: var(--space-xs) var(--space-sm); border-radius: 999px; font-weight: 600; }
.status-label.good { color: var(--color-good); background: var(--color-good-soft); }
.status-label.warning { color: var(--color-warning); background: var(--color-warning-soft); }
.status-label.error { color: var(--color-error); background: var(--color-error-soft); }
.status-label.neutral { color: var(--color-muted); background: var(--color-soft); }
.store-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,400px); gap: var(--space-lg); align-items: start; }
#store-list { display: grid; gap: var(--space-md); }
.store-workspace .store-row { display: block; border: 1px solid var(--color-rule); border-radius: 8px; padding: var(--space-lg); }
.store-card-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.store-card-heading h2 { margin: 0; }
.store-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md); margin-block: var(--space-lg) var(--space-md); }
.store-facts dt { color: var(--color-muted); font-size: 12px; }
.store-facts dd { margin: var(--space-xs) 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.store-row .sync-progress { padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.store-workspace .store-actions { margin-top: var(--space-md); }
.store-workspace .connect-form { max-width: none; margin: 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-soft); }
.store-workspace .connect-form h2 { font-size: 18px; }
.store-workspace .connect-form .form-grid { grid-template-columns: minmax(0,1fr); }
.store-workspace .connect-form button { width: 100%; margin-top: var(--space-sm); }
#remove-store-dialog { width: min(520px,calc(100% - 32px)); }
#remove-store-dialog .dialog-head h2 { font-size: 20px; }
.ui-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-text { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.workspace-nav [data-icon] { display: inline-flex; align-items: center; float: none; flex: 0 0 20px; }
.external-offer-link { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--color-rule); border-radius: 6px; color: var(--color-accent); background: var(--color-surface); text-decoration: none; }
.external-offer-link:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }
.silent-toolbar { display: grid; grid-template-columns: minmax(0,1fr) 100px; gap: 16px; margin: 12px 0; }
.silent-table { font-size: 13px; table-layout: auto; min-width: 1060px; }
.silent-table th:first-child { width: 42px; }.silent-table th:nth-child(2) { width: 64px; }.silent-table th:nth-child(3) { min-width: 200px; }
#silent-view .table-wrap { overflow-x: auto; }
.bulk-bound-control { display:grid;gap:6px; }.bulk-bound-control>label { font-size:12px; }
.percent-control { display:flex;align-items:center;gap:6px; }.percent-control input { width:68px;padding:6px; }.percent-control button { padding:6px 10px; }
.percent-control>span { color:var(--color-muted);font-size:13px; }
.inline-bound-confirmation { border:1px solid var(--color-control);border-radius:6px;padding:12px;margin-bottom:12px;background:var(--color-soft);font-size:13px; }
.inline-bound-confirmation p { margin-bottom:8px; }.inline-bound-actions { display:flex;gap:8px;flex-wrap:wrap; }
.batch-failures { color: var(--color-error); padding-left: 24px; font-size: 13px; max-height: 180px; overflow: auto; }
@media(max-width:768px) { .silent-table td::before { content:attr(data-label);display:block;color:var(--color-muted);font-size:11px; }.silent-table { min-width:0;table-layout:auto; }.silent-table td { min-width:0;max-width:none; }.silent-table th:nth-child(3) { min-width:0; } }
@media(max-width:640px) { .bulk-bound-control { flex:1 1 130px; }.percent-control input { flex:1;min-width:0; }.silent-toolbar { grid-template-columns: minmax(0,1fr); }.external-offer-link { width:44px;height:44px; } }
#offer-dialog { width: min(1320px,calc(100% - 48px)); height: min(880px,calc(100dvh - 48px)); max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; }
#offer-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr); }
.offer-header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); background: var(--color-surface); }
.offer-header>div { min-width: 0; flex: 1; }
.offer-header h2 { max-width: none; margin: 0 0 var(--space-sm); font-size: 20px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.offer-heading-meta { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.offer-heading-meta .small { font-size: 12px; }
.offer-body { display: grid; grid-template-columns: 264px minmax(0,1fr); min-height: 0; }
.offer-summary { padding: var(--space-lg) var(--space-md); border-right: 1px solid var(--color-rule); min-width: 0; overflow: hidden; background: var(--color-soft); }
#offer-image .product-image { width: 100%; height: 184px; border: 0; background: var(--color-surface); }
.offer-summary .price-line { display: grid; gap: var(--space-xs); margin-block: var(--space-md); }
.offer-summary .price-line strong { font-size: 24px; }
.offer-facts { display: grid; gap: var(--space-sm); margin: var(--space-md) 0; }
.offer-facts>div { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: var(--space-sm); align-items: start; }
.offer-facts dt { color: var(--color-muted); font-size: 11px; }
.offer-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-size: 12px; font-variant-numeric: tabular-nums; }
.product-link { display: block; padding: var(--space-sm); border: 1px solid var(--color-control); border-radius: 6px; color: var(--color-accent); text-align: center; text-decoration: none; font-size: 12px; }
.offer-content { overflow-y: auto; overflow-x: hidden; min-height: 0; overscroll-behavior: contain; padding: var(--space-lg); scrollbar-gutter: stable; }
.offer-content .notice { margin: 0 0 var(--space-md); }
.offer-content .detail-section { border: 1px solid var(--color-rule); border-radius: 8px; padding: var(--space-lg); margin: 0; background: var(--color-surface); min-width: 0; }
.offer-content h3 { font-size: 18px; margin-bottom: var(--space-sm); }
.offer-content p { margin-bottom: var(--space-sm); }
.offer-content .small { font-size: 12px; }
.offer-content .form-grid { margin-block: var(--space-md); }
.participation-actions { display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; }
.detail-help { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.detail-help summary { cursor: pointer; font-size: 12px; color: var(--color-muted); }
.detail-help p { padding-top: var(--space-sm); }
.detail-lower { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: var(--space-md); margin-top: var(--space-md); align-items: start; }
.detail-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-sm); }
.detail-heading select { width: 106px; min-height: 32px; padding: var(--space-xs); }
.preview-controls { display: flex; gap: var(--space-sm); align-items: end; padding-top: var(--space-md); margin-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.preview-controls label { flex: 1; }
.rule-help { margin-top: var(--space-md); }
.price-history-item { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.price-history-heading { display: flex; gap: var(--space-sm); align-items: start; justify-content: space-between; }
.price-history-heading p { font-size: 13px; margin: 0; font-variant-numeric: tabular-nums; }
.price-history-item>.small { margin: var(--space-xs) 0 0; }
.history-pagination { padding-bottom: 0; gap: var(--space-sm); }
.offer-history-section .history-empty { padding: var(--space-lg) 0; }
@media (max-width: 1100px) { .store-workspace { grid-template-columns: minmax(0,1fr); }.detail-lower { grid-template-columns: minmax(0,1fr); }.offer-body { grid-template-columns: 216px minmax(0,1fr); }.offer-content { padding: var(--space-md); }.offer-content .detail-section { padding: var(--space-md); } }
@media (min-width: 769px) and (max-height: 740px) { #offer-image .product-image { height: 100px; }.offer-summary { padding: var(--space-md); }.offer-facts { gap: var(--space-xs); }.offer-summary .price-line { margin-block: var(--space-sm); } }
@media (max-width: 768px) {
  .store-workspace .store-row,.store-workspace .connect-form { padding: var(--space-md); }.store-facts { grid-template-columns: minmax(0,1fr); gap: var(--space-sm); }
  #offer-dialog { width: calc(100% - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .offer-header { padding: var(--space-sm) var(--space-md); }.offer-header h2 { font-size: 16px; }.offer-header button { padding-inline: var(--space-sm); }
  .offer-body { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); }
  .offer-summary { display: grid; grid-template-columns: 80px minmax(0,1fr); grid-template-areas: 'image facts' 'price facts' 'link link'; gap: var(--space-sm) var(--space-md); padding: var(--space-sm) var(--space-md); border-right: 0; border-bottom: 1px solid var(--color-rule); }
  #offer-image { grid-area: image; }#offer-image .product-image { height: 80px; }.offer-summary .price-line { grid-area: price; margin: 0; }.offer-summary .price-line strong { font-size: 18px; }.offer-summary .price-line .small { font-size: 11px; }
  .offer-facts { grid-area: facts; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-xs) var(--space-sm); margin: 0; }.offer-facts>div { display: block; min-width: 0; }.offer-facts dt { font-size: 10px; }.offer-facts dd { font-size: 11px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .offer-summary .product-link { grid-area: link; padding: var(--space-xs); }.offer-content { padding: var(--space-sm); }.offer-content .form-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-sm); }
  .offer-content .detail-section { padding: var(--space-md); }.offer-content h3 { font-size: 16px; }.participation-actions,.preview-controls { align-items: stretch; flex-direction: column; }.detail-heading { flex-wrap: wrap; }.detail-heading select { min-height: 44px; }
}
button.primary { color: var(--color-accent-ink); }
@media (hover: hover) {
  input:hover:not(:disabled),select:hover:not(:disabled) { background: var(--color-soft); }
  .product-table tbody tr:hover { background: var(--color-surface); }
  .workspace-nav button:hover { background: var(--color-soft); }
}
input:disabled,select:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 1100px) {
  #workspace .toolbar { grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); }
  #workspace .toolbar button { justify-self: start; }
  .product-table th:first-child { width: 27%; }
  .product-table th:nth-child(5) { width: 19%; }
  .product-table th,.product-table td { padding-inline: var(--space-sm); }
  .budget-overview,.interval-overview { padding-inline: var(--space-md); }
}
@media (max-width: 768px) {
  .sidebar-description { display: none; }
  .workspace-nav { gap: var(--space-sm); flex-wrap: nowrap; } .workspace-nav button { font-size: 14px; padding-inline: var(--space-xs); }
  #workspace .section-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-sm); }
  #workspace .section-head > div { display: contents; }
  #workspace .section-head h1 { grid-column: 1; margin: 0; align-self: center; }
  #workspace .section-head p { grid-column: 1 / -1; grid-row: 2; }
  #workspace .section-head > button { grid-column: 2; grid-row: 1; margin: 0; }
  .allocation-strip { grid-template-columns: minmax(0,1fr); }
  .budget-overview { border-right: 0; border-bottom: 1px solid var(--color-rule); }
  .interval-counts { gap: var(--space-md) var(--space-sm); } .allocation-heading { flex-wrap: wrap; }
  .interval-counts strong { font-size: 16px; } .interval-counts .small { font-size: 12px; }
  .plan-bands { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #workspace .toolbar,.history-toolbar { grid-template-columns: minmax(0,1fr); }
  .list-meta { flex-direction: column; gap: var(--space-xs); }
  .product-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-sm); }
  .product-table td:first-child,.product-table td:last-child { grid-column: 1 / -1; padding-inline: 0; }
  .product-table td { padding: 0; }
  .product-table td[data-label]::before,.history-table td[data-label]::before,.plan-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--color-muted); margin-bottom: var(--space-xs); }
  .product-table .product-title { font-size: 15px; }
  .history-table td:first-child,.history-table td:last-child { width: auto; padding-inline: 0; }
  .plan-table td { padding: var(--space-xs) 0; }
}


/* Shared workbench: sidebar + dense comparison tables. */
body { font-size: 14px; }
.shell { grid-template-columns: 208px minmax(0,1fr); }
.sidebar { padding: 24px 12px; position: sticky; top: 0; height: 100dvh; }
.brand { margin-inline: 12px; }
.sidebar-caption { margin: 32px 12px 12px; }
.workspace-nav { display: grid; align-items: stretch; gap: 4px; border: 0; padding: 0; }
.workspace-nav button { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border: 1px solid var(--color-soft); border-radius: 6px; background: var(--color-soft); }
.workspace-nav button span { float: none; font-size: 18px; line-height: 1; }
.workspace-nav button[aria-current="page"] { background: var(--color-accent-soft); border: 1px solid var(--color-rule); color: var(--color-accent); }
.nav-group { margin: 20px 16px 4px; font-size: 12px; color: var(--color-muted); }
.sidebar-foot { padding: 24px 12px 0; font-size: 12px; }
main { max-width: none; padding: 0 24px; }
.topbar { min-height: 64px; }
.workspace-context { display: flex; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--color-rule); }
.workspace-context label { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.workspace-context select { min-width: 180px; width: auto; }
button,input,select { font-size: 13px; min-height: 36px; }
label { font-size: 12px; gap: 6px; }
#workspace h1 { font-size: 24px; }
.quota-panel { border: 1px solid var(--color-rule); border-radius: 6px; margin-bottom: 20px; background: var(--color-soft); }
.quota-panel>summary { display: flex; gap: 20px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; }
.quota-panel>summary::-webkit-details-marker { display: none; }
#quota-summary { color: var(--color-muted); font-size: 12px; }
.collapse-label { margin-left: auto; font-size: 12px; color: var(--color-accent); white-space: nowrap; }
.quota-panel>section,.quota-panel>.sales-toolbar,.quota-panel>.allocation-help,.quota-panel>.execution-note { margin: 0 16px 12px; }
.quota-panel .allocation-strip { border-radius: 4px; }
.interval-counts { gap: 8px 16px; }
.budget-overview,.interval-overview { padding: 8px 16px 12px; }
.allocation-heading { min-height: 32px; }
#budget-value { font-size: 22px; }
#workspace .toolbar,.catalog-toolbar,.history-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 0; margin-bottom: 16px; }
.search-field { flex: 1 1 280px; }
.toolbar label:not(.search-field),.catalog-toolbar label:not(.search-field),.history-toolbar label:not(.search-field) { flex: 0 1 170px; }
.catalog-toolbar label:last-of-type,.history-toolbar label:last-of-type { flex-basis: 72px; }
.bulk-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.bulk-toolbar .checkbox-label { align-self: center; }
.bulk-toolbar>span { align-self: center; }
.bulk-toolbar .page-size { margin-left: auto; width: 72px; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--color-rule); border-radius: 6px; }
.catalog-table,.product-table,.execution-table { min-width: 1160px; width: 100%; table-layout: auto; font-size: 13px; }
.catalog-table { min-width: 1320px; }
.catalog-table th:first-child,.catalog-table th:last-child,.execution-table th:first-child,.execution-table th:last-child { width: auto; }
.catalog-table .status-cell { min-width: 88px; white-space: nowrap; }
.catalog-table th,.product-table th,.execution-table th { background: var(--color-soft); color: var(--color-muted); padding: 10px 12px; white-space: nowrap; font-weight: 600; text-align: left; }
.catalog-table td,.product-table td,.execution-table td { padding: 12px; vertical-align: middle; text-align: left; }
.product-table th:first-child,.product-table th:nth-child(5),.product-table th:last-child { width: auto; }
.product-table td:first-child input { width: 16px; height: 16px; min-height: 16px; accent-color: var(--color-accent); }
.identity-cell { min-width: 240px; max-width: 430px; }
.title-button { border: 0 !important; padding: 0; min-height: 24px; background: none; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-size: 13px; line-height: 1.5; font-weight: 600; width: 100%; }
.title-button:hover { color: var(--color-accent); background: none !important; }
.product-image { display: block; width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--color-rule); border-radius: 6px; background: var(--color-surface); }
.product-meta { font-size: 11px; color: var(--color-muted); overflow-wrap: anywhere; }
.product-table td:nth-child(6) { min-width: 108px; }
.product-table td:nth-child(6) input { width: 84px; min-height: 32px; padding: 6px; }
.product-table td:nth-child(7) { min-width: 160px; }
.product-table td:nth-child(7) select { width: 154px; padding: 6px; }
.date-cell { font-size: 11px; min-width: 100px; max-width: 120px; color: var(--color-muted); }
.amount { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.compact-button { padding: 6px 10px; min-height: 32px; }
button.text-button { background: none; border-color: transparent; color: var(--color-accent); min-height: 32px; }
.danger,button.danger { color: var(--color-error); }
.price-warning { color: var(--color-error); }
.good { color: var(--color-good); }
.catalog-table td:last-child a { display: inline-block; padding: 8px; color: var(--color-accent); text-decoration: none; font-size: 20px; }
.execution-table { min-width: 800px; }
.execution-table td:nth-child(2) { display: flex; gap: 12px; align-items: center; min-width: 240px; }
.old-price { color: var(--color-muted); text-decoration: line-through; }
.operations { margin-top: 24px; border-top: 1px solid var(--color-rule); padding-top: 16px; }
.operations>summary { cursor: pointer; }
.store-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.store-row { gap: 20px; }
.store-row h2 { font-size: 18px; }
@media (min-width: 1600px) { .catalog-table,.product-table { min-width: 0; } }
@media (max-width: 1100px) { .shell { grid-template-columns: 176px minmax(0,1fr); } main { padding: 0 16px; } .sidebar { padding-inline: 8px; } }
@media (max-width: 768px) {
  .shell { display: block; }.sidebar { position: static; height: auto; padding: 16px; }
  .workspace-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 16px; }
  .workspace-nav button { font-size: 13px; padding: 8px 12px; min-width: 0; }.nav-group { display: none; }
  .workspace-nav button span { display: inline; }.sidebar-caption { display: none; }
  button,input,select,button.text-button { min-height: 44px; }.workspace-context { align-items: start; flex-direction: column; gap: 8px; }
  .workspace-context label { width: 100%; }.workspace-context select { min-width: 0; flex: 1; }
  .quota-panel>summary { flex-wrap: wrap; gap: 8px; }.collapse-label { margin-left: 0; }
  #quota-summary { width: 100%; }.allocation-strip { grid-template-columns: minmax(0,1fr); }.budget-overview { border-right: 0; border-bottom: 1px solid var(--color-rule); }
  .interval-counts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-toolbar,.history-toolbar,#workspace .toolbar { display: grid; grid-template-columns: minmax(0,1fr); }
  .bulk-toolbar { align-items: center; }.bulk-toolbar label:not(.checkbox-label) { width: 100%; }.bulk-toolbar .page-size { width: 100%; margin: 0; }
  .table-wrap { padding: 0 12px; }.catalog-table,.product-table,.execution-table { min-width: 0; table-layout: auto; }
  .catalog-table td,.product-table td,.execution-table td { padding: 6px 0; min-width: 0; max-width: none; }
  .catalog-table td::before,.execution-table td::before { content: attr(data-label); display: block; color: var(--color-muted); font-size: 11px; }
  .product-table td:nth-child(6),.product-table td:nth-child(7) { min-width: 0; }.product-table td:nth-child(7) select { width: 100%; }
  .product-table td:nth-child(6) input { width: 160px; }.product-title { font-size: 14px !important; }.identity-cell { max-width: 100%; }
  .execution-table td:nth-child(2) { display: block; }.execution-table .product-image { margin-bottom: 8px; }
  .list-meta { flex-direction: column; gap: 4px; }.store-actions { width: 100%; }.store-row { align-items: start; }
  .date-cell { white-space: normal; }.product-meta { font-size: 12px; }
}

/* Persistent navigation and compact, explicit setup workflow. */
@media (min-width: 769px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 208px; overflow: hidden; }
  .shell>main { grid-column: 2; }
  .workspace-nav { flex: 0 0 auto; }
  .section-head { padding-top: 24px; }
  .quota-panel .allocation-strip { grid-template-columns: minmax(250px,.7fr) minmax(0,1.3fr); }
  .budget-overview,.interval-overview { padding: 8px 16px; }
  .interval-counts { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .interval-counts strong { font-size: 16px; }
  .interval-counts .small { font-size: 11px; }
  #workspace .toolbar { display: grid; grid-template-columns: minmax(200px,1fr) 140px 140px 164px auto; }
  .bulk-toolbar { padding: 10px 12px; background: var(--color-soft); border: 1px solid var(--color-rule); border-radius: 6px; }
  .product-table { min-width: 1400px; }
  .product-table td { padding-block: 10px; }
  .product-table .identity-cell { min-width: 220px; max-width: 350px; }
  .product-table td:nth-child(7) { min-width: 150px; }
  .product-table td:nth-child(7) select { width: 144px; }
  .catalog-table tbody tr:hover,.product-table tbody tr:hover,.execution-table tbody tr:hover { background: var(--color-soft); }
  .table-wrap { isolation: isolate; }
}
.setup-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-sm) 0 var(--space-md); color: var(--color-muted); font-size: 13px; }
.execution-note { margin: 12px 0 8px; font-size: 12px; color: var(--color-muted); }
.allocation-help { margin: 8px 0; font-size: 12px; }
.allocation-help p { margin-top: 12px; max-width: 100ch; }
.sales-toolbar { margin: 0; padding: 12px 0; border-top: 1px solid var(--color-rule); }
.sales-toolbar p { margin: 0; }
.market-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 20px; padding: 12px 16px; background: var(--color-soft); border-radius: 6px; }
.market-toolbar>div { flex: 1 1 280px; }
.market-toolbar p { margin: 4px 0 0; font-size: 12px; }
.bounds-inputs { display: grid; grid-template-columns: repeat(2,82px); gap: 6px; }
.bounds-inputs label { font-size: 11px; font-weight: 400; color: var(--color-muted); }
.product-table td.price-bounds { min-width: 184px; }
.product-table td.price-bounds input { width: 82px; padding: 6px; }
.price-bounds button { padding: 4px 0; }
.product-table .status-label { display: inline-flex; margin: 2px 4px 2px 0; white-space: nowrap; }
.store-row { background: var(--color-surface); }
.detail-section .form-grid { margin: 16px 0; gap: 12px; }
.participation-section .detail-heading p { margin-bottom: 0; }
.detail-help { padding-top: 12px; margin-top: 12px; }
.recovery-proposal { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-rule); font-size: 12px; color: var(--color-muted); }
.recovery-proposal summary { color: var(--color-ink); cursor: pointer; }
.recovery-proposal p { margin: 10px 0 0; }
@media (min-width: 769px) and (max-width: 1100px) {
  .sidebar { width: 176px; }
  #workspace .toolbar { grid-template-columns: minmax(200px,1fr) repeat(2,140px); }
  .interval-counts { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .market-toolbar>button { flex: 1 1 100%; }
  .product-table td.price-bounds { min-width: 0; }
  .bounds-inputs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-table td.price-bounds input { width: 100%; }
}

/* One frozen store/account bar, compact rows and aligned participation controls. */
html { scroll-padding-top: 80px; }
.topbar { position: sticky; top: 0; z-index: 10; min-height: 72px; background: var(--color-surface); }
.topbar:has(.workspace-context:not([hidden]))>.workspace-label { display: none; }
.topbar .workspace-context { padding: 0; margin: 0; border: 0; width: auto; }
.topbar .workspace-context label { gap: var(--space-sm); }
.topbar .account-menu { width: auto; margin-left: auto; }
.workflow-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin-block: var(--space-md); }
.workflow-line .sales-toolbar { border: 0; padding: 0; margin: 0; }
.workflow-line p { margin: 0; }
.quota-panel .allocation-help { margin-bottom: 0; }
#collection-form label { align-content: start; gap: var(--space-xs); }
.participation-section #collection-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
#collection-form .form-grid { display: contents; }
#collection-form .participation-actions { align-self: end; gap: var(--space-md); min-height: 44px; }
.participation-section .detail-help { margin-top: var(--space-sm); padding-top: var(--space-sm); }
.offer-content .participation-section { padding: var(--space-md); }
.offer-content .detail-lower { margin-top: var(--space-md); }
.price-bounds[data-save="saved"] input { border-color: var(--color-good); }
.price-bounds[data-save="error"] input { border-color: var(--color-error); }
.price-bounds[data-save="loading"] input { background: var(--color-soft); }
@media (min-width: 769px) {
  .product-table { min-width: 1280px; table-layout: fixed; }
  .product-table th:nth-child(1) { width: 42px; }
  .product-table th:nth-child(2) { width: 64px; }
  .product-table th:nth-child(4) { width: 82px; }
  .product-table th:nth-child(5) { width: 120px; }
  .product-table th:nth-child(6) { width: 188px; }
  .product-table th:nth-child(7) { width: 152px; }
  .product-table th:nth-child(8) { width: 110px; }
  .product-table th:nth-child(9) { width: 108px; }
  .product-table th:nth-child(10) { width: 170px; }
  .product-table .identity-cell { min-width: 0; max-width: none; }
  .product-table td { padding: var(--space-sm); }
  .product-table .product-meta { margin-top: 2px; line-height: 1.5; }
  .product-table .title-button { white-space: nowrap; }
  .bulk-toolbar>label { display: flex; align-items: center; gap: var(--space-sm); }
  .bulk-toolbar #bulk-mode { width: 128px; }
  .bulk-toolbar .page-size { width: auto; white-space: nowrap; }
  .bulk-toolbar .page-size select { width: 72px; flex: 0 0 72px; }
}
@media (max-width: 1100px) {
  .participation-section #collection-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #collection-form .participation-actions { grid-column: 1 / -1; flex-direction: row; }
}
@media (max-width: 768px) {
  html { scroll-padding-top: 120px; }
  .topbar { flex-wrap: wrap; padding-block: var(--space-sm); gap: var(--space-sm); }
  .topbar .workspace-context { flex: 1 1 100%; }
  .topbar .workspace-context label { flex-direction: row; }
  .topbar .account-menu { flex: 1 1 100%; justify-content: space-between; }
  .participation-section #collection-form { grid-template-columns: minmax(0,1fr); }
  #collection-form .participation-actions { flex-direction: column; align-items: stretch; }
}
.sync-notices { position: fixed; top: 84px; right: 24px; width: min(350px,calc(100vw - 32px)); z-index: 30; display: grid; gap: 8px; pointer-events: none; }
.sync-toast { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 8px; box-shadow: 0 3px 12px #0002; pointer-events: auto; }
.sync-toast > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.sync-toast strong { font-size: 14px; }
.sync-toast button { padding: 0 4px; min-width: 28px; min-height: 28px; font-size: 20px; line-height: 1; }
.sync-toast progress { width: 100%; height: 6px; margin-top: 5px; accent-color: var(--color-accent); }
.sync-spinner { width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid var(--color-rule); border-top-color: var(--color-accent); border-radius: 50%; margin-top: 3px; animation: sync-spin 1s linear infinite; }
.sync-complete .sync-mark { color: var(--color-good); }
.sync-failed .sync-mark { color: var(--color-ink); }
.sync-cadence { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; }
.sync-cadence select { width: auto; min-width: 130px; }
@keyframes sync-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sync-spinner { animation: none; } }
@media (max-width: 768px) { .sync-notices { top: auto; bottom: 20px; right: 16px; } }