:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172235;
  background: #f2f5f9;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.page-shell { width: 100%; max-width: none; margin: 0; padding: 40px 28px 36px; }
.is-hidden { display: none !important; }
.page-shell.is-auth-pending { visibility: hidden; }

.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; margin-bottom: 26px; }
.page-heading { min-width: 0; }

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; color: #102a4b; font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -0.035em; }
h2 { margin-bottom: 0; font-size: 1.05rem; }
.eyebrow { margin-bottom: 8px; color: #426c9a; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.muted, .footnote { color: #66758a; }
.footnote { margin: 18px 0 0; font-size: .82rem; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.topbar-panel { display: grid; grid-template-columns: auto auto; align-items: center; justify-self: end; gap: 18px; }
.toolbar { display: grid; grid-template-columns: minmax(190px, 360px) 300px auto; align-items: center; gap: 10px; min-width: 0; }
.toolbar-actions { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; justify-content: start; gap: 7px 8px; }
.toolbar-updated-at { display: flex; align-items: center; min-width: 0; gap: 7px; margin: 0; overflow: hidden; color: #667a91; font-size: .74rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.toolbar-updated-at::before { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #25b55c; box-shadow: 0 0 0 4px rgb(37 181 92 / 12%); content: ""; }
.toolbar-updated-at.is-current { color: #287257; }
.toolbar-updated-at.is-current::before { background: #25b55c; box-shadow: 0 0 0 4px rgb(37 181 92 / 12%); }
.toolbar-updated-at.is-updating { color: #9c6c12; }
.toolbar-updated-at.is-updating::before { background: #e1a21a; box-shadow: 0 0 0 4px rgb(225 162 26 / 16%); animation: sync-indicator-pulse 1.25s ease-in-out infinite; }
.toolbar-updated-at.is-error { color: #b54742; }
.toolbar-updated-at.is-error::before { background: #d35d58; box-shadow: 0 0 0 4px rgb(211 93 88 / 14%); }
@keyframes sync-indicator-pulse { 50% { opacity: .48; transform: scale(.82); } }
.toolbar .date-range-button { min-height: 56px; justify-content: flex-start; gap: 11px; border-radius: 11px; padding: 8px 12px; color: #172235; text-align: left; box-shadow: 0 2px 8px rgb(24 50 78 / 3%); }
.date-range-button:hover { border-color: #91a8c0; background: #f9fbfd; }
.date-range-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.date-range-copy > span { overflow: hidden; color: #718197; font-size: .74rem; font-weight: 650; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.date-range-copy > strong { overflow: hidden; color: #1e3655; font-size: .98rem; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.control-icon { width: 23px; height: 23px; flex: 0 0 23px; }
.date-range-button .control-icon, .export-button .control-icon { color: #244d79; }
.control-chevron { width: 18px; height: 18px; flex: 0 0 18px; color: #526f8f; }
.toolbar-actions .button { width: 100%; min-width: 0; gap: 9px; min-height: 56px; border-radius: 10px; padding: 0 16px; white-space: nowrap; box-shadow: 0 2px 8px rgb(24 50 78 / 3%); }
.toolbar-actions .export-button { width: auto; }
.export-button { color: #1e3655; }
.export-button:hover { border-color: #91a8c0; background: #f9fbfd; }
.account-controls { position: relative; min-width: 0; border-left: 1px solid #d7e1ec; padding-left: 18px; }
.account-menu-button { display: flex; align-items: center; gap: 10px; min-height: 54px; max-width: 290px; border: 0; border-radius: 11px; padding: 5px 7px; color: #172235; background: transparent; cursor: pointer; font: inherit; text-align: left; transition: background .16s ease; }
.account-menu-button:hover, .account-menu-button[aria-expanded="true"] { background: #f4f7fa; }
.account-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 50%; color: #fff; background: #143c69; font-size: .92rem; font-weight: 760; letter-spacing: .02em; }
.account-identity { display: grid; min-width: 0; gap: 2px; }
.account-identity strong, .account-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity strong { font-size: .88rem; line-height: 1.2; }
.account-identity span { color: #718197; font-size: .76rem; line-height: 1.2; }
.account-chevron { width: 18px; height: 18px; flex: 0 0 18px; margin-left: 4px; color: #526f8f; transition: transform .16s ease; }
.account-menu-button[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }
.account-menu { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: 224px; overflow: hidden; border: 1px solid #dce5ef; border-radius: 12px; padding: 6px; background: #fff; box-shadow: 0 14px 30px rgb(24 50 78 / 16%); }
.account-menu-action { display: flex; width: 100%; align-items: center; gap: 11px; border: 0; border-radius: 8px; padding: 11px 10px; color: #27384d; background: transparent; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 650; text-align: left; }
.account-menu-action + .account-menu-action { margin-top: 2px; border-top: 1px solid #edf1f5; }
.account-menu-action svg { width: 21px; height: 21px; flex: 0 0 21px; color: #426c9a; }
.account-menu-action:hover { color: #143c69; background: #f2f6fa; }
.button:focus-visible, .account-menu-button:focus-visible, .account-menu-action:focus-visible { outline: 3px solid rgb(43 104 163 / 28%); outline-offset: 2px; }
.button {
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0 15px;
  color: inherit;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
}
.button:disabled { opacity: .64; cursor: wait; }
.button-primary { color: #fff; background: #143c69; }
.button-primary:hover { background: #0d3159; }
.button-progress { --sync-progress: 0%; position: relative; min-width: 174px; isolation: isolate; overflow: hidden; }
.button-progress::before { position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--sync-progress); background: #0d3159; content: ""; transition: width .32s ease-out; }
.button-progress > span { position: relative; z-index: 1; white-space: nowrap; }
.button-progress.is-progress { background: #6f90b2; }
.button-progress.is-progress:hover { background: #6f90b2; }
.button-secondary { border-color: #cbd7e5; }

.notice { margin: 0 0 18px; border-radius: 9px; padding: 12px 14px; font-size: .92rem; }
.notice.is-hidden { display: none; }
.notice.is-error { color: #8d2525; background: #fff0f0; border: 1px solid #f1c6c6; }
.notice.is-success { color: #166342; background: #ecfaf3; border: 1px solid #bee7ce; }

.summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.summary-card { min-height: 124px; padding: 18px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; box-shadow: 0 2px 12px rgb(24 50 78 / 4%); }
.summary-card span { display: block; color: #66758a; font-size: .86rem; }
.summary-card strong { display: block; margin-top: 10px; color: #143c69; font-size: 1.85rem; letter-spacing: -0.03em; }
.summary-card small { display: block; margin-top: 8px; color: #66758a; font-size: .75rem; }
.summary-card small.summary-card-order-count { margin-top: 4px; color: #143c69; font-size: .82rem; font-weight: 700; }
.summary-card small.summary-card-order-count + small { margin-top: 3px; }
.summary-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; margin: 10px 0 0; }
.summary-metrics div { min-width: 0; }
.summary-metrics dt { overflow: hidden; color: #66758a; font-size: .69rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.summary-metrics dd { overflow: hidden; margin: 2px 0 0; color: #143c69; font-size: 1rem; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.summary-card-button { width: 100%; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.summary-card-button:hover { border-color: #8aa8c7; box-shadow: 0 4px 16px rgb(24 50 78 / 10%); }
.summary-card-button:focus-visible { outline: 3px solid rgb(43 104 163 / 28%); outline-offset: 2px; }
.spp-card-panel { display: flex; min-height: 124px; flex-direction: column; padding: 0; overflow: hidden; }
.spp-card-details { width: 100%; min-height: 0; flex: 1 1 auto; border: 0; padding: 18px; background: transparent; }
.spp-card-panel .spp-card-details:hover { border-color: transparent; box-shadow: none; background: #fbfdff; }
.applied-filters-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.applied-filters-heading { display: flex !important; width: 100%; align-items: center; justify-content: space-between; gap: 10px; }
.applied-filters-heading > strong { flex: 0 0 auto; color: #1a4777 !important; font-size: 1rem !important; font-weight: 750; line-height: 1; }
.applied-filters-list { display: flex !important; width: 100%; max-height: 54px; flex-wrap: wrap; gap: 5px; margin-top: 12px; overflow: auto; padding-right: 2px; scrollbar-width: thin; }
.applied-filter-tag { max-width: 100%; overflow: hidden; border: 1px solid #d4e1ed; border-radius: 999px; padding: 3px 7px; color: #426c9a !important; background: #f5f9fd; font-size: .68rem !important; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.applied-filter-tag.is-default { color: #718398 !important; background: #f8fafc; }

.filters { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 68px; align-items: end; gap: 14px; margin: 0; }
.filters > label, .filters > .filter-field { height: 68px; }
.filters label > span, .filter-field > span { display: block; margin-bottom: 6px; color: #536177; font-size: .83rem; font-weight: 650; }
select, input[type="search"], input[type="number"] { width: 100%; min-height: 40px; border: 1px solid #bfccdc; border-radius: 8px; padding: 0 11px; color: #172235; background: #fff; font: inherit; }
.multi-select { position: relative; }
.multi-select-button { display: flex; width: 100%; height: 40px; min-height: 40px; align-items: center; justify-content: space-between; gap: 10px; overflow: hidden; border: 1px solid #bfccdc; border-radius: 8px; padding: 0 11px; color: #172235; background: #fff; cursor: pointer; font: inherit; text-align: left; }
.multi-select-button > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-chevron { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; color: #345d88; transition: transform .16s ease; }
.select-chevron svg { display: block; width: 18px; height: 18px; }
.multi-select-button[aria-expanded="true"] .select-chevron { transform: rotate(180deg); }
.multi-select-button:hover, .multi-select-button[aria-expanded="true"] { border-color: #6c94be; box-shadow: 0 0 0 3px rgb(43 104 163 / 10%); }
.multi-select-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: none; flex-direction: column; width: max(100%, 360px); max-width: calc(100vw - 24px); max-height: var(--multi-select-menu-max-height, min(560px, calc(100dvh - 24px))); overflow: hidden; border: 1px solid #bfccdc; border-radius: 9px; padding: 7px; background: #fff; box-shadow: 0 12px 28px rgb(24 50 78 / 18%); }
.multi-select-menu.is-open { display: flex; }
.multi-select-menu.is-open-above { top: auto; bottom: calc(100% + 6px); box-shadow: 0 -12px 28px rgb(24 50 78 / 18%); }
.multi-select-menu.is-viewport-panel { position: fixed; top: 12px; bottom: 12px; left: var(--multi-select-menu-left, 12px); width: min(460px, calc(100vw - 24px)); max-height: none; }
.multi-select-menu-header { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid #e4ebf3; }
.multi-select-search { min-width: 0; min-height: 36px; padding: 0 9px; }
.multi-select-close { display: grid; width: 36px; min-width: 36px; height: 36px; place-items: center; border: 1px solid #bfccdc; border-radius: 7px; padding: 0; color: #426c9a; background: #fff; cursor: pointer; font: inherit; font-size: 1.25rem; line-height: 1; }
.multi-select-close:hover { border-color: #6c94be; color: #143c69; background: #f2f6fa; }
.multi-select-clear { flex: 0 0 auto; width: 100%; border: 0; border-bottom: 1px solid #e4ebf3; padding: 7px 8px 9px; color: #426c9a; background: transparent; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 650; text-align: left; }
.multi-select-clear:hover { color: #143c69; }
.multi-select-options { min-height: 0; overflow: auto; padding-top: 4px; overscroll-behavior: contain; scrollbar-width: auto; }
.multi-select-options::-webkit-scrollbar { width: 12px; }
.multi-select-options::-webkit-scrollbar-thumb { border: 3px solid #fff; border-radius: 10px; background: #8fa3b8; }
.multi-select-options::-webkit-scrollbar-thumb:hover { background: #6c849c; }
.multi-select-option { display: flex; align-items: center; gap: 8px; border-radius: 6px; padding: 7px 8px; cursor: pointer; font-size: .88rem; line-height: 1.25; }
.multi-select-option:hover { background: #f2f6fa; }
.multi-select-option:focus-within { outline: 2px solid rgb(43 104 163 / 28%); outline-offset: -2px; background: #f2f6fa; }
.multi-select-option[hidden] { display: none; }
.multi-select-option input { width: 15px; height: 15px; margin: 0; accent-color: #143c69; flex: 0 0 auto; }
.multi-select-no-results { margin: 14px 8px; color: #66758a; font-size: .84rem; line-height: 1.35; }
.warehouse-option-group + .warehouse-option-group { margin-top: 6px; border-top: 1px solid #e4ebf3; padding-top: 6px; }
.warehouse-option-group-title { padding: 4px 8px 3px; color: #426c9a; font-size: .72rem; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.warehouse-option-group-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.warehouse-option-group-toggle input { width: 15px; height: 15px; margin: 0; accent-color: #143c69; }
.warehouse-option-group-toggle-hint { color: #6c7b8e; font-size: .68rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.stock-filter-menu { width: 276px; padding: 12px; }
.stock-filter-control { display: grid; gap: 5px; margin-bottom: 10px; color: #536177; font-size: .8rem; font-weight: 650; }
.stock-filter-control select, .stock-filter-control input { min-height: 36px; }
.stock-filter-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 2px; }
.stock-filter-actions .button { min-height: 36px; padding: 0 12px; font-size: .84rem; }
.stock-filter-reset { border: 0; padding: 8px; color: #426c9a; background: transparent; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 650; }
.stock-filter-reset:hover { color: #143c69; }
.spp-recommendation-filter-field { grid-column: span 2; }
.spp-recommendation-filter-menu { width: 356px; padding: 12px; }
.spp-recommendation-price-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.spp-recommendation-price-fields input { min-width: 0; font-variant-numeric: tabular-nums; }

.filters-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: visible; border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 28%); }
.filters-dialog::backdrop { background: rgb(10 30 56 / 38%); }
.filters-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 18px; border-bottom: 1px solid #d7e1ec; }
.filters-dialog-heading p { margin: 6px 0 0; color: #66758a; font-size: .88rem; }
.filters-dialog-content { padding: 20px 24px 12px; }
.filters-dialog .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.table-grouping-settings { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 20px 0 0; border: 1px solid #d7e1ec; border-radius: 10px; padding: 14px; background: #fbfdff; }
.table-grouping-settings legend { padding: 0 4px; color: #536177; font-size: .83rem; font-weight: 700; }
.table-grouping-settings p { grid-column: 1 / -1; margin: -2px 0 0; color: #718398; font-size: .76rem; line-height: 1.35; }
.table-grouping-options { display: flex; min-width: 0; flex-wrap: wrap; gap: 8px; }
.table-grouping-option { min-height: 36px; border-radius: 8px; padding: 7px 10px; background: #fff; font-size: .8rem; }
.table-grouping-option.is-selected { border-color: #91b3d3; background: #eaf3fc; }
.table-grouping-reset { align-self: center; }
.filters-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px 20px; border-top: 1px solid #d7e1ec; }
.filters-dialog-footer .muted { font-size: .78rem; line-height: 1.35; }
.filters-dialog-actions { display: flex; flex: 0 0 auto; gap: 8px; }

.table-card { overflow: hidden; border: 1px solid #c8d6e5; border-radius: 12px; background: #fff; box-shadow: 0 2px 12px rgb(24 50 78 / 4%); }
.table-heading { display: flex; height: 60px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-bottom: 1px solid #cbd8e6; }
.table-heading-actions { display: flex; align-items: center; gap: 12px; }
.table-row-count { white-space: nowrap; }
.table-search-field { width: min(320px, 24vw); min-width: 190px; }
.table-search-field input { min-height: 34px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.table-view-options { display: grid; min-height: 0; flex: 1 1 auto; max-height: 320px; overflow-y: auto; padding: 6px; }
.table-view-section-title { margin: 8px 7px 4px; color: #6a8096; font-size: .69rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.table-view-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; border-radius: 7px; padding: 9px 8px; color: #27384d; background: transparent; cursor: pointer; font: inherit; font-size: .84rem; text-align: left; }
.table-view-option:hover, .table-view-option.is-active { color: #143c69; background: #eaf2fa; }
.table-view-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-view-option small { color: #718398; font-size: .7rem; }
.table-view-actions { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 10px; border-top: 1px solid #e4ebf3; }
.table-view-actions .button { min-height: 36px; }
.column-settings-button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #b9cadb; border-radius: 9px; padding: 0; color: #345d88; background: #f8fafc; cursor: pointer; line-height: 1; }
.filter-settings-button svg { display: block; width: 21px; height: 21px; }
.column-settings-button:hover { border-color: #7396ba; color: #143c69; background: #edf4fb; }
.column-settings-button:focus-visible { outline: 3px solid rgb(43 104 163 / 28%); outline-offset: 2px; }
.column-order-lock.is-unlocked { border-color: #5d8ebd; color: #143c69; background: #e8f2fc; }
.settings-icon { display: grid; width: 18px; height: 18px; place-items: center; }
.settings-icon svg { display: block; width: 18px; height: 18px; }
.lock-icon { display: grid; width: 18px; height: 18px; place-items: center; }
.lock-icon svg { display: block; width: 18px; height: 18px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.table-scroll { overflow-x: auto; padding-right: 12px; }
table { --table-number-size: .9rem; width: max-content; min-width: 0; border-collapse: collapse; table-layout: fixed; font-size: .9rem; }
#stock-table, #sticky-stock-table {
  /* Collapse + sticky cells leaves a 1px seam in Chromium while scrolling. */
  border-collapse: separate;
  border-spacing: 0;
}
th, td { overflow: hidden; padding: 12px 14px; border-right: 1px solid #dbe4ee; border-bottom: 1px solid #d5e0eb; vertical-align: top; text-align: left; }
th:last-child, td:last-child { border-right: 0; box-shadow: inset -1px 0 #dbe4ee; }
thead tr { height: 62px; }
th { position: relative; height: 62px; overflow: hidden; padding-top: 0; padding-bottom: 0; vertical-align: middle; color: #536177; background: #f5f8fb; font-size: .76rem; letter-spacing: .025em; text-transform: uppercase; }
th.is-draggable { cursor: grab; }
th.is-draggable:active { cursor: grabbing; }
th.is-resizable { user-select: none; }
.column-resize-handle { position: absolute; z-index: 8; top: 0; right: -5px; width: 10px; height: 100%; cursor: col-resize; touch-action: none; }
.column-resize-handle::after { position: absolute; top: 18px; bottom: 18px; left: 4px; width: 2px; border-radius: 2px; background: transparent; content: ""; transition: background .16s ease; }
th.is-resizable:hover .column-resize-handle::after, .column-resize-handle:hover::after { background: #5d8ebd; }
th.is-dragging { opacity: .45; }
th.is-drag-target { box-shadow: inset 3px 0 #3d78ae; }
.sticky-table-header { position: fixed; z-index: 50; top: 0; display: none; overflow: hidden; border: 1px solid #c8d6e5; border-top: 0; border-radius: 0 0 10px 10px; background: #f5f8fb; box-shadow: 0 6px 16px rgb(24 50 78 / 16%); }
.sticky-table-header.is-visible { display: block; }
.sticky-table-header table { margin: 0; }
.sticky-table-header th { background: #f5f8fb; }
.column-header-label { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; text-overflow: ellipsis; }
.column-sort { display: flex; width: 100%; height: 100%; align-items: center; gap: 5px; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; }
th.align-right .column-sort { justify-content: flex-end; text-align: right; }
.column-sort:hover { color: #143c69; }
.column-sort:focus-visible { outline: 2px solid #5a85b0; outline-offset: -2px; }
.column-sort-indicator { flex: 0 0 auto; color: #8092a7; font-size: .92rem; line-height: 1; }
.column-sort.is-active .column-sort-indicator { color: #143c69; }
.column-menu-trigger { display: flex; width: 100%; height: 100%; min-width: 0; align-items: center; gap: 5px; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; }
th.align-right .column-menu-trigger { justify-content: flex-end; text-align: right; }
.column-menu-trigger:hover { color: #143c69; }
.column-menu-trigger:focus-visible { outline: 2px solid #5a85b0; outline-offset: -2px; }
.column-menu-trigger .column-header-label { flex: 1 1 auto; }
.column-header-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.column-menu-trigger .column-sort-indicator { font-size: .86rem; }
.column-menu-trigger .column-sort-indicator.is-active { color: #143c69; }
.column-filter-indicator { display: inline-grid; width: 12px; height: 12px; place-items: center; color: #7890a8; font-size: .82rem; line-height: 1; }
.column-menu-trigger.has-filter .column-filter-indicator { color: #1d74bf; font-size: .64rem; }
.column-filter-menu { position: fixed; z-index: 140; box-sizing: border-box; overflow: hidden; border: 1px solid #b9cadb; border-radius: 11px; color: #27384d; background: #fff; box-shadow: 0 14px 34px rgb(21 52 85 / 22%); }
.column-filter-menu[hidden] { display: none; }
.column-filter-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 14px 11px; border-bottom: 1px solid #e0e8f0; background: #f8fbfe; }
.column-filter-heading strong, .column-filter-heading small { display: block; }
.column-filter-heading strong { color: #254f7a; font-size: .88rem; line-height: 1.25; }
.column-filter-heading small { margin-top: 3px; color: #718398; font-size: .7rem; line-height: 1.3; }
.column-filter-close { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 6px; padding: 0; color: #607a95; background: transparent; cursor: pointer; font-size: 1.25rem; line-height: 1; }
.column-filter-close:hover { color: #143c69; background: #e8f1fa; }
.column-filter-section { display: grid; gap: 9px; padding: 12px 14px; }
.column-filter-section + .column-filter-section { border-top: 1px solid #e5edf4; }
.column-filter-section-title { color: #607a95; font-size: .68rem; font-weight: 760; letter-spacing: .065em; text-transform: uppercase; }
.column-filter-sort-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.column-filter-sort-actions button, .column-filter-clear-sort, .column-filter-reset { min-height: 32px; border: 1px solid #c7d6e5; border-radius: 7px; padding: 6px 8px; color: #345d88; background: #f8fbfe; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 650; line-height: 1.15; }
.column-filter-sort-actions button:hover, .column-filter-sort-actions button.is-active, .column-filter-clear-sort:hover, .column-filter-reset:hover { border-color: #8eafce; color: #143c69; background: #eaf3fc; }
.column-filter-clear-sort { justify-self: start; border: 0; padding: 2px 0; color: #57728d; background: transparent; }
.column-filter-operator-field, .column-filter-value-field, .column-filter-range label { display: grid; gap: 5px; color: #61738a; font-size: .72rem; font-weight: 650; }
.column-filter-menu select, .column-filter-menu input[type="number"], .column-filter-menu input[type="date"] { width: 100%; min-width: 0; min-height: 34px; box-sizing: border-box; border: 1px solid #c6d5e5; border-radius: 7px; padding: 6px 8px; color: #213952; background: #fff; font: inherit; font-size: .82rem; font-variant-numeric: tabular-nums; }
.column-filter-menu select:focus, .column-filter-menu input:focus { border-color: #6f99c3; outline: 3px solid rgb(65 130 190 / 18%); outline-offset: 0; }
.column-filter-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.column-filter-empty { display: flex; align-items: center; gap: 8px; color: #536d87; font-size: .75rem; line-height: 1.25; cursor: pointer; }
.column-filter-empty input { width: 16px; height: 16px; margin: 0; accent-color: #1d6fb8; }
.column-filter-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px 13px; border-top: 1px solid #e0e8f0; background: #fbfdff; }
.column-filter-footer .button { min-height: 34px; padding: 0 12px; font-size: .78rem; }
tbody tr:hover { background: #f8fbff; }
tbody tr:last-child td { border-bottom: 0; }
.table-scroll tbody tr:not(.group-row) { height: 84px; }
.table-scroll tbody tr:not(.group-row) td { height: 84px; max-height: 84px; line-height: 1.28; }
.cell-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.28; }
.column-drr .cell-text { display: block; white-space: nowrap; }
.spp-recommendation { display: grid; gap: 3px; justify-items: end; color: #1f6a45; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spp-recommendation strong { font-weight: 720; }
.spp-recommendation small { color: #62768b; font-size: .72rem; }
.spp-recommendation-change { color: #426c9a !important; font-weight: 650; }
.spp-recommendation-empty { display: grid; gap: 3px; justify-items: end; color: #8a97a7; line-height: 1.22; }
.spp-recommendation-empty strong { font-weight: 620; }
.spp-recommendation-empty small { max-width: 180px; color: #718095; font-size: .7rem; text-align: right; }
.group-row { background: #edf4fb; }
.group-row td { padding: 9px 14px; border-top: 1px solid #b8cce0; border-bottom-color: #c8d8e8; color: #254f7a; background: #edf4fb; font-size: .83rem; font-weight: 740; vertical-align: middle; }
.group-row:first-child td { border-top: 0; }
.group-row.group-level-1 { background: #f4f8fc; }
.group-row.group-level-1 td { border-top-color: #cfdae7; color: #426588; background: #f4f8fc; }
.group-row.group-level-2 { background: #fafcff; }
.group-row.group-level-2 td { border-top-color: #dfe7ef; color: #607a95; background: #fafcff; }
.group-row.group-level-1 .group-label-cell { --group-label-inset: 32px; padding-left: 32px; }
.group-row.group-level-2 .group-label-cell { --group-label-inset: 50px; padding-left: 50px; }
.group-label-cell { --group-label-inset: 14px; position: sticky; z-index: 4; left: 0; box-shadow: 3px 0 7px rgb(24 50 78 / 8%); }
.table-scroll.is-horizontally-scrolled .group-label-cell { clip-path: inset(0 max(0px, calc(100% - var(--frozen-columns-width, 180px))) 0 0); }
.group-toggle { display: inline-flex; width: 100%; max-width: 100%; min-width: 0; align-items: center; gap: 7px; overflow: hidden; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; font-weight: inherit; text-align: left; transition: max-width 190ms ease; }
.table-scroll.is-horizontally-scrolled .group-toggle { max-width: max(0px, calc(var(--frozen-columns-width, 180px) - var(--group-label-inset) - 14px)); }
.group-toggle:focus-visible { outline: 2px solid #5a85b0; outline-offset: 3px; }
.group-toggle-indicator { flex: 0 0 auto; width: 12px; color: #426c9a; font-size: 1rem; line-height: 1; }
.group-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-count { flex: 0 0 auto; color: #607a95; white-space: nowrap; }
.group-total-cell { color: #254f7a; text-align: right; white-space: nowrap; }
.group-total-empty { color: transparent; }
.table-scroll th.sticky-primary,
.table-scroll td.sticky-primary,
.sticky-table-header th.sticky-primary { position: sticky; left: 0; }
.table-scroll th.sticky-primary { z-index: 4; box-shadow: inset -1px 0 #dbe4ee; }
.sticky-table-header th.sticky-primary { z-index: 4; box-shadow: inset -1px 0 #dbe4ee; }
.table-scroll td.sticky-primary { z-index: 2; background: #fff; box-shadow: inset -1px 0 #dbe4ee; }
.table-scroll th.sticky-secondary,
.table-scroll td.sticky-secondary,
.sticky-table-header th.sticky-secondary { position: sticky; left: var(--sticky-primary-width, 74px); }
.table-scroll th.sticky-secondary { z-index: 5; box-shadow: 3px 0 7px rgb(24 50 78 / 8%); }
.sticky-table-header th.sticky-secondary { z-index: 5; box-shadow: 3px 0 7px rgb(24 50 78 / 8%); }
.table-scroll td.sticky-secondary { z-index: 3; background: #fff; box-shadow: 3px 0 7px rgb(24 50 78 / 8%); }
.table-scroll th.sticky-tertiary,
.table-scroll td.sticky-tertiary,
.sticky-table-header th.sticky-tertiary { position: sticky; left: var(--frozen-columns-width, 180px); }
.table-scroll th.sticky-tertiary { z-index: 6; box-shadow: none; }
.sticky-table-header th.sticky-tertiary { z-index: 6; box-shadow: none; }
.table-scroll td.sticky-tertiary { z-index: 4; background: #fff; box-shadow: none; }
.table-scroll tbody .group-row td { background: #edf4fb; }
.table-scroll tbody .group-row.group-level-1 td { background: #f4f8fc; }
.table-scroll tbody .group-row.group-level-2 td { background: #fafcff; }
.table-scroll tbody .group-row .group-label-cell { z-index: 4; background: #edf4fb; }
.table-scroll tbody .group-row.group-level-1 .group-label-cell { background: #f4f8fc; }
.table-scroll tbody .group-row.group-level-2 .group-label-cell { background: #fafcff; }
.table-scroll tbody .group-row .sticky-tertiary { z-index: 5; background: #edf4fb; }
.table-scroll tbody .group-row.group-level-1 .sticky-tertiary { background: #f4f8fc; }
.table-scroll tbody .group-row.group-level-2 .sticky-tertiary { background: #fafcff; }
.table-scroll tbody tr:hover td.sticky-primary,
.table-scroll tbody tr:hover td.sticky-secondary,
.table-scroll tbody tr:hover td.sticky-tertiary { background: #f8fbff; }
.product-title { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-weight: 400; line-height: 1.28; }
.product-link { color: #143c69; text-decoration: none; }
.product-link:hover { color: #0d3159; text-decoration: underline; }
.product-subtitle, .cell-subtitle { display: block; margin-top: 3px; color: #6c7b8e; font-size: .78rem; }
.product-photo { display: block; width: 46px; height: 58px; border-radius: 6px; background: #edf2f7; cursor: zoom-in; object-fit: cover; }
.photo-placeholder { display: grid; width: 46px; height: 58px; place-items: center; border-radius: 6px; color: #7a8798; background: #edf2f7; }
.photo-preview { position: fixed; z-index: 100; display: none; width: 260px; height: 332px; padding: 6px; border: 1px solid #cbd7e5; border-radius: 10px; background: #fff; box-shadow: 0 16px 34px rgb(24 50 78 / 24%); pointer-events: none; }
.photo-preview.is-visible { display: block; }
.photo-preview img { display: block; width: 100%; height: 100%; border-radius: 6px; object-fit: contain; }
.feedback-rating { display: inline-flex; align-items: baseline; gap: 3px; color: #9a6400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-scroll td[data-feedback-nm-id] { cursor: help; }
.table-scroll td[data-feedback-nm-id]:hover { color: #0d4f8f; background: #edf6ff; }
.table-scroll td[data-feedback-nm-id]:hover .feedback-rating { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.table-scroll td[data-feedback-nm-id]:focus-visible { outline: 2px solid #5a85b0; outline-offset: -3px; }
.feedback-rating small { color: #6c7b8e; font-size: .76rem; }
.feedback-rating-empty { color: #8a97a7; }
.feedback-preview { position: fixed; z-index: 110; display: none; box-sizing: border-box; width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-x: hidden; overflow-y: auto; border: 1px solid #cbd7e5; border-radius: 11px; padding: 14px; color: #172235; background: #fff; box-shadow: 0 16px 34px rgb(24 50 78 / 24%); pointer-events: none; }
.feedback-preview.is-visible { display: block; }
.feedback-preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.feedback-preview-heading strong { color: #9a6400; font-size: 1.18rem; }
.feedback-preview-heading span { color: #536177; font-size: .8rem; }
.feedback-preview-distribution { margin-top: 4px; color: #6c7b8e; font-size: .72rem; font-variant-numeric: tabular-nums; }
.feedback-preview-agent { margin: 9px 0 -2px; color: #536177; font-size: .72rem; }
.feedback-preview-open-hint { margin: 11px 0 -3px; color: #176198; font-size: .71rem; font-weight: 650; }
.feedback-preview-variant { margin-top: 12px; }
.feedback-preview-variant + .feedback-preview-variant { padding-top: 11px; border-top: 1px solid #e4ebf3; }
.feedback-preview-variant > h3 { margin: 0; color: #344a66; font-size: .73rem; letter-spacing: .03em; }
.feedback-preview-section { margin-top: 8px; }
.feedback-preview-section h4 { margin: 0 0 5px; color: #536177; font-size: .69rem; letter-spacing: .06em; text-transform: uppercase; }
.feedback-preview-section ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.feedback-preview-section li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; color: #27384d; font-size: .79rem; line-height: 1.25; }
.feedback-preview-section li span { min-width: 0; overflow-wrap: anywhere; }
.feedback-preview-section li small { align-self: start; color: #6c7b8e; font-size: .75rem; font-variant-numeric: tabular-nums; }
.feedback-preview-positive h4 { color: #218449; }
.feedback-preview-negative h4 { color: #aa4a3b; }
.feedback-preview-empty { color: #8290a1; font-size: .78rem; }
.feedback-preview-updated { margin: 12px 0 0; padding-top: 9px; border-top: 1px solid #e4ebf3; color: #718095; font-size: .7rem; line-height: 1.35; }
.table-scroll td.align-right,
.table-scroll .stock-value,
.table-scroll .ff-cost,
.table-scroll .group-total-cell,
.table-scroll .group-count {
  font-family: inherit;
  font-size: var(--table-number-size);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.28;
}
.stock-value { color: #143c69; }
.ff-cost { color: #143c69; white-space: nowrap; }
.align-right { text-align: right; }
td.align-right { text-align: right; }
.empty-state { padding: 34px; color: #66758a; text-align: center; }
.turnover-dialog { width: min(680px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 28%); }
.turnover-dialog::backdrop { background: rgb(10 30 56 / 38%); }
.turnover-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 18px; border-bottom: 1px solid #e4ebf3; }
.turnover-dialog-heading p { margin: 6px 0 0; color: #66758a; font-size: .88rem; }
.dialog-close { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 8px; color: #536177; background: #f2f5f9; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.dialog-close:hover { color: #143c69; background: #e5edf6; }
.turnover-dialog-table-wrap { max-height: min(54vh, 520px); overflow: auto; }
.turnover-dialog-table { width: 100%; min-width: 560px; table-layout: auto; }
.turnover-dialog-table th { position: static; height: 42px; }
.turnover-dialog-table th, .turnover-dialog-table td { padding: 12px 16px; }
.turnover-dialog-table .warehouse-turnover-group th { height: auto; padding: 9px 16px; border-top: 1px solid #b8cce0; border-bottom-color: #c8d8e8; color: #254f7a; background: #edf4fb; font-size: .78rem; font-weight: 740; text-align: left; }
.turnover-dialog-table .warehouse-turnover-group:first-child th { border-top: 0; }
.spp-dialog { width: min(1240px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); flex-direction: column; overflow: hidden; border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 28%); }
.spp-dialog[open] { display: flex; }
.spp-dialog::backdrop { background: rgb(10 30 56 / 38%); }
.spp-dialog-default-limit { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 24px; border-bottom: 1px solid #e1e8f0; background: #f8fbff; }
.spp-dialog-default-limit > div { display: grid; gap: 3px; }
.spp-dialog-default-limit strong { color: #254f7a; font-size: .88rem; }
.spp-dialog-default-limit small { color: #66758a; font-size: .78rem; }
.spp-default-limit-field { display: flex; align-items: center; gap: 10px; color: #536177; font-size: .78rem; font-weight: 700; }
.spp-default-limit-field > span:last-child { display: flex; align-items: center; gap: 6px; }
.limit-stepper { display: inline-flex; align-items: center; gap: 4px; color: #536177; white-space: nowrap; }
.limit-stepper input { width: 52px !important; min-height: 34px !important; border-color: #cddbeb; padding: 0 4px !important; color: #143c69; font-size: .86rem; font-weight: 760; text-align: center; appearance: textfield; }
.limit-stepper input::-webkit-outer-spin-button, .limit-stepper input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.limit-stepper-button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #ccdbea; border-radius: 8px; padding: 0; color: #315f91; background: #f5f9fd; box-shadow: 0 1px 1px rgb(25 64 103 / 8%); cursor: pointer; font-size: 1.15rem; font-weight: 650; line-height: 1; transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; }
.limit-stepper-button:hover { border-color: #99b9d8; color: #123f70; background: #e8f3fd; }
.limit-stepper-button:active { transform: translateY(1px); }
.limit-stepper-button:focus-visible, .spp-subject-cell:focus-visible { outline: 3px solid rgb(51 132 211 / 32%); outline-offset: -3px; }
.limit-stepper-suffix { margin-left: 1px; color: #536177; font-size: .86rem; font-weight: 760; }
.spp-dialog-content { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 20px 24px 24px; overflow: hidden; }
.spp-dialog-section { display: flex; min-width: 0; min-height: 0; flex-direction: column; border: 1px solid #d7e1ec; border-radius: 10px; overflow: hidden; background: #fbfdff; }
.spp-dialog-section h3 { margin: 0; padding: 14px 16px 12px; color: #426c9a; font-size: .76rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.spp-by-price-description { min-height: 34px; margin: -2px 16px 10px; color: #66758a; font-size: .8rem; line-height: 1.35; }
.spp-subject-limit-control { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 16px 12px; border: 1px solid #d6e3f0; border-radius: 9px; padding: 10px 12px; background: #f4f8fc; }
.spp-subject-limit-control > div { display: grid; min-width: 0; gap: 2px; }
.spp-subject-limit-control strong { color: #254f7a; font-size: .81rem; }
.spp-subject-limit-control small { color: #66758a; font-size: .73rem; line-height: 1.3; }
.spp-dialog-table-wrap { min-height: 0; flex: 1 1 auto; overflow: auto; border-top: 1px solid #e1e8f0; }
.spp-dialog-table { width: 100%; min-width: 360px; table-layout: auto; }
.spp-dialog-table th { position: static; height: 42px; }
.spp-dialog-table th, .spp-dialog-table td { padding: 12px 16px; }
.spp-subject-cell { cursor: pointer; transition: color .14s ease, background .14s ease; }
.spp-subject-row:hover .spp-subject-cell { color: #143c69; background: #f1f7fd; }
.spp-subject-row.is-selected td { background: #eaf3fc; }
.spp-subject-row.is-selected .spp-subject-cell { color: #143c69; font-weight: 720; }
.spp-limit-cell { min-width: 156px; }
.spp-limit-cell .limit-stepper { justify-content: flex-end; }
.spp-limit-conflict { display: block; margin-top: 4px; color: #9a6700; font-size: .68rem; font-weight: 650; }
.table-scroll td.spp-history-cell { cursor: pointer; }
.table-scroll tbody tr:hover td.spp-history-cell, .table-scroll td.spp-history-cell:hover { color: #0d4f8f; background: #edf6ff; }
.table-scroll td.spp-history-cell:focus-visible { outline: 2px solid #5a85b0; outline-offset: -3px; }
.spp-history-dialog { width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 28%); }
.spp-history-dialog::backdrop { background: rgb(10 30 56 / 38%); }
.spp-history-content { padding: 20px 24px 24px; }
.spp-history-legend { display: flex; flex-wrap: wrap; gap: 16px; color: #536177; font-size: .8rem; font-weight: 650; }
.spp-history-legend span { display: inline-flex; align-items: center; gap: 7px; }
.spp-history-legend-mark { width: 22px; height: 3px; border-radius: 3px; background: currentColor; }
.spp-history-legend-mark--spp { color: #805ad5; }
.spp-history-legend-mark--buyer { color: #169c87; }
.spp-history-legend-mark--orders { color: #d97827; }
.spp-history-period { margin: 8px 0 14px; color: #718197; font-size: .78rem; }
.spp-history-chart { position: relative; min-height: 330px; border: 1px solid #d7e1ec; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #fbfdff 0%, #f8fbfe 100%); touch-action: none; }
.spp-history-svg { display: block; width: 100%; height: auto; min-height: 330px; }
.spp-history-grid { stroke: #dbe6f0; stroke-width: 1; stroke-dasharray: 3 4; }
.spp-history-axis { stroke: #bbcddd; stroke-width: 1; }
.spp-history-axis-label { fill: #718197; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; }
.spp-history-axis-label--spp { fill: #7650c2; text-anchor: end; }
.spp-history-axis-label--buyer { fill: #147b6e; text-anchor: start; }
.spp-history-axis-label--date { fill: #64768a; text-anchor: middle; }
.spp-history-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.spp-history-line--spp { stroke: #805ad5; }
.spp-history-line--buyer { stroke: #169c87; }
.spp-history-point { stroke: #fff; stroke-width: 2; }
.spp-history-point--spp { fill: #805ad5; }
.spp-history-point--buyer { fill: #169c87; }
.spp-history-orders-section { margin-top: 18px; border: 1px solid #d7e1ec; border-radius: 10px; overflow: hidden; background: #fbfdff; }
.spp-history-orders-section h3 { margin: 0; padding: 12px 14px 10px; color: #426c9a; font-size: .76rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.spp-history-orders-chart { position: relative; min-height: 190px; border-top: 1px solid #e1e8f0; overflow: hidden; background: linear-gradient(180deg, #fbfdff 0%, #f8fbfe 100%); touch-action: none; }
.spp-history-orders-svg { display: block; width: 100%; height: auto; min-height: 190px; }
.spp-history-orders-axis-label { fill: #718197; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; text-anchor: end; }
.spp-history-orders-line { fill: none; stroke: #d97827; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.spp-history-orders-point { fill: #d97827; stroke: #fff; stroke-width: 2; }
.spp-history-tooltip, .spp-history-orders-tooltip { position: absolute; z-index: 2; top: 12px; left: 50%; box-sizing: border-box; width: min(288px, calc(100% - 20px)); min-height: 108px; border: 1px solid #b9cadb; border-radius: 9px; padding: 9px 10px; color: #fff; background: #172c44; box-shadow: 0 10px 22px rgb(18 48 79 / 24%); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px); transition: opacity .12s ease, transform .12s ease; will-change: left, transform, opacity; }
.spp-history-tooltip.is-visible, .spp-history-orders-tooltip.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.spp-history-tooltip strong, .spp-history-tooltip span, .spp-history-orders-tooltip strong, .spp-history-orders-tooltip span { display: block; }
.spp-history-tooltip strong, .spp-history-orders-tooltip strong { margin-bottom: 5px; color: #fff; font-size: .76rem; }
.spp-history-tooltip span, .spp-history-orders-tooltip span { color: #d8e6f4; font-size: .72rem; line-height: 1.45; white-space: nowrap; }
.spp-history-tooltip .spp-history-tooltip-value, .spp-history-orders-tooltip .spp-history-tooltip-value { display: flex; align-items: center; gap: 7px; }
.spp-history-tooltip-value i { display: block; width: 16px; height: 3px; flex: 0 0 16px; border-radius: 3px; background: #d8e6f4; }
.spp-history-tooltip-value--spp i { background: #9a7be6; }
.spp-history-tooltip-value--buyer i { background: #28b59e; }
.spp-history-tooltip-value--orders i { background: #ed9850; }
.spp-history-empty { display: grid; min-height: 330px; place-items: center; margin: 0; padding: 24px; color: #718197; font-size: .88rem; text-align: center; }
.spp-history-orders-empty { display: grid; min-height: 190px; place-items: center; margin: 0; padding: 18px; color: #718197; font-size: .84rem; text-align: center; }
.feedback-reviews-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: hidden; border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 28%); }
.feedback-reviews-dialog::backdrop { background: rgb(10 30 56 / 38%); }
.feedback-reviews-content { display: grid; max-height: min(680px, calc(100dvh - 142px)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px 24px 24px; overflow-y: auto; overscroll-behavior: contain; }
.feedback-review-column { min-width: 0; }
.feedback-review-column > h3 { margin: 0 0 10px; color: #426c9a; font-size: .76rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.feedback-review-column--positive > h3 { color: #218449; }
.feedback-review-column--negative > h3 { color: #aa4a3b; }
.feedback-review-card { display: grid; gap: 9px; margin-bottom: 10px; border: 1px solid #d7e1ec; border-radius: 10px; padding: 12px; background: #fbfdff; }
.feedback-review-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.feedback-review-card header strong { color: #9a6400; font-size: .86rem; }
.feedback-review-card time { color: #718197; font-size: .72rem; white-space: nowrap; }
.feedback-review-match { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: #5f7288; font-size: .71rem; }
.feedback-review-match > span { margin-right: 2px; }
.feedback-review-match b { border-radius: 999px; padding: 3px 7px; color: #176198; background: #e8f4ff; font-size: .69rem; font-weight: 680; }
.feedback-review-text { margin: 0; color: #27384d; font-size: .83rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.feedback-review-fields { display: grid; gap: 5px; margin: 0; }
.feedback-review-fields div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
.feedback-review-fields dt { color: #718197; font-size: .71rem; }
.feedback-review-fields dd { margin: 0; color: #4d6178; font-size: .74rem; line-height: 1.35; overflow-wrap: anywhere; }
.feedback-review-fallback { margin: -2px 0 0; color: #718197; font-size: .71rem; }
.feedback-reviews-empty, .feedback-reviews-loading { display: grid; min-height: 132px; place-items: center; margin: 0; border: 1px solid #d7e1ec; border-radius: 10px; padding: 18px; color: #718197; background: #fbfdff; font-size: .82rem; line-height: 1.4; text-align: center; }
.performance-dialog { width: min(1240px, calc(100vw - 32px)); height: min(850px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); flex-direction: column; overflow: hidden; border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 28%); }
.performance-dialog[open] { display: flex; }
.performance-dialog::backdrop { background: rgb(10 30 56 / 38%); }
.performance-dialog-content { display: grid; min-height: 0; flex: 1 1 auto; align-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 20px 24px 24px; overflow-y: auto; overscroll-behavior: contain; }
.performance-section { min-width: 0; border: 1px solid #d7e1ec; border-radius: 10px; padding: 14px; background: #fbfdff; }
.performance-section h3 { margin: 0 0 12px; color: #426c9a; font-size: .76rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.performance-metrics { display: grid; gap: 9px; margin: 0; }
.performance-section--advertising .performance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 11px; }
.performance-metrics div { min-width: 0; }
.performance-metrics dt { overflow: hidden; color: #66758a; font-size: .75rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.performance-metrics dd { overflow: hidden; margin: 2px 0 0; color: #143c69; font-size: .98rem; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.performance-chart-section { grid-column: 1 / -1; }
.performance-chart-heading { margin-bottom: 14px; }
.performance-chart-heading h3 { margin-bottom: 0; }
.performance-chart-heading p { margin: 5px 0 0; color: #66758a; font-size: .8rem; line-height: 1.35; }
.performance-charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.performance-chart-group { min-width: 0; }
.performance-chart-group + .performance-chart-group { border-left: 1px solid #e1e8f0; padding-left: 28px; }
.performance-chart-group h4 { margin: 0 0 12px; color: #143c69; font-size: .9rem; }
.performance-chart-layout { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: start; gap: 18px; }
.orders-donut-chart { position: relative; display: grid; width: 176px; aspect-ratio: 1; place-items: center; border-radius: 50%; }
.orders-donut-chart.is-empty { background: conic-gradient(#e6edf4 0deg 360deg); }
.orders-donut-chart::after { display: none; position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: #fbfdff; content: ""; }
.orders-donut-chart.is-empty::after { display: block; }
.orders-donut-chart-slices { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orders-donut-chart-slice { cursor: pointer; vector-effect: non-scaling-stroke; transition: opacity .16s ease, transform .16s ease; transform-box: fill-box; transform-origin: center; }
.orders-donut-chart-slice:not(circle) { stroke: #fbfdff; stroke-width: .45; }
.orders-donut-chart-slice:hover, .orders-donut-chart-slice:focus, .orders-donut-chart-slice.is-active { opacity: .8; outline: none; transform: scale(1.045); }
.orders-donut-chart-center { position: relative; z-index: 1; display: grid; max-width: 102px; gap: 3px; pointer-events: none; text-align: center; }
.orders-donut-chart-center strong { color: #143c69; font-size: .92rem; line-height: 1.1; }
.orders-donut-chart-center span { color: #66758a; font-size: .7rem; line-height: 1.2; }
.orders-donut-tooltip { position: absolute; z-index: 3; top: 50%; left: 50%; width: max-content; max-width: 152px; padding: 7px 9px; border-radius: 8px; color: #fff; background: #172235; box-shadow: 0 8px 20px rgb(10 30 56 / 24%); opacity: 0; pointer-events: none; text-align: center; transform: translate(-50%, -50%) scale(.96); transition: opacity .16s ease, transform .16s ease; }
.orders-donut-tooltip strong, .orders-donut-tooltip span { display: block; }
.orders-donut-tooltip strong { overflow-wrap: anywhere; font-size: .72rem; line-height: 1.25; }
.orders-donut-tooltip span { margin-top: 2px; color: #d7e8fb; font-size: .68rem; line-height: 1.2; }
.orders-donut-chart.has-tooltip .orders-donut-tooltip { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.orders-chart-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.orders-chart-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: start; gap: 7px; border-radius: 6px; color: #536177; font-size: .73rem; line-height: 1.25; transition: background-color .16s ease, color .16s ease; }
.orders-chart-legend li.is-highlighted { color: #143c69; background: #eaf3fc; }
.orders-chart-legend strong { color: #143c69; font-size: .73rem; white-space: nowrap; }
.orders-chart-legend-label { overflow-wrap: anywhere; }
.orders-chart-legend-label small { color: #8190a3; }
.orders-chart-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--chart-color); }
.orders-chart-empty { display: block !important; padding: 8px 0; color: #8190a3 !important; }
.column-settings-dialog { width: min(1040px, calc(100vw - 48px)); max-height: calc(100vh - 48px); border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 28%); }
.column-settings-dialog::backdrop { background: rgb(10 30 56 / 38%); }
.column-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 28px 18px; border-bottom: 1px solid #d7e1ec; }
.column-settings-heading p { margin: 6px 0 0; color: #66758a; font-size: .88rem; }
.table-view-settings { padding: 18px 28px 0; border-bottom: 1px solid #d7e1ec; }
.table-view-settings-heading h3 { margin: 0; color: #426c9a; font-size: .76rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.table-view-settings-heading p { margin: 4px 0 10px; color: #718398; font-size: .76rem; }
.table-view-settings-options { max-height: min(176px, 22dvh); border: 1px solid #d7e1ec; border-radius: 9px; background: #fbfdff; }
.table-view-settings .table-view-actions { grid-template-columns: max-content max-content; justify-content: space-between; padding: 10px 0; border-top: 0; }
.column-settings-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; max-height: min(38dvh, 500px); overflow-y: auto; padding: 20px 28px; }
.column-settings-section { min-width: 0; border: 1px solid #d7e1ec; border-radius: 10px; background: #fbfdff; padding: 14px; }
.column-settings-section + .column-settings-section { border-top: 1px solid #d7e1ec; padding-top: 14px; }
.column-settings-section h3 { margin: 0 0 11px; color: #426c9a; font-size: .76rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.column-settings-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.column-setting-option { display: flex; min-height: 40px; align-items: center; gap: 9px; border: 1px solid #d7e1ec; border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: .88rem; line-height: 1.22; }
.column-setting-option:hover { border-color: #9bb5cf; background: #f8fbff; }
.column-setting-option input { width: 16px; height: 16px; margin: 0; accent-color: #143c69; }
.column-settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 28px 24px; }
.column-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.table-view-dialog, .users-dialog { width: min(620px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 28%); }
.table-view-dialog::backdrop, .users-dialog::backdrop, .auth-dialog::backdrop { background: rgb(10 30 56 / 52%); }
.table-view-form, .create-user-form { display: grid; gap: 16px; padding: 20px 28px 0; }
.table-view-form > label, .create-user-form label, .auth-form label { display: grid; gap: 6px; color: #536177; font-size: .82rem; font-weight: 650; }
.table-view-scope-field { display: grid; gap: 9px; margin: 0; border: 1px solid #d7e1ec; border-radius: 10px; padding: 13px; }
.table-view-scope-field legend { padding: 0 4px; color: #536177; font-size: .82rem; font-weight: 700; }
.table-view-scope-field label { display: flex; align-items: center; gap: 8px; color: #27384d; font-size: .87rem; }
.table-view-scope-field input { width: 16px; height: 16px; margin: 0; accent-color: #143c69; }
.users-list { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; padding: 18px 28px; }
.user-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #d7e1ec; border-radius: 9px; padding: 11px 12px; background: #fbfdff; }
.user-row strong, .user-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row strong { color: #254f7a; font-size: .88rem; }
.user-row small { margin-top: 3px; color: #718398; font-size: .75rem; }
.user-row select { width: 148px; min-height: 34px; font-size: .8rem; }
.user-row.is-inactive { opacity: .58; }
.create-user-form { border-top: 1px solid #d7e1ec; padding-top: 18px; }
.create-user-form h3 { margin: 0; color: #254f7a; font-size: .9rem; }
.users-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.auth-dialog { width: min(420px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 32%); }
.auth-heading { padding: 28px 28px 8px; }
.auth-heading h1 { margin-bottom: 8px; font-size: 1.75rem; }
.auth-form { display: grid; gap: 14px; padding: 16px 28px 28px; }
.auth-form #auth-display-name-label { display: block; }
.auth-form .button { width: 100%; margin-top: 2px; }
.date-range-dialog { width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 28%); }
.date-range-dialog::backdrop { background: rgb(10 30 56 / 38%); }
.date-range-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 24px 16px; border-bottom: 1px solid #d7e1ec; }
.date-range-heading p { margin: 6px 0 0; color: #66758a; font-size: .84rem; line-height: 1.35; }
.date-range-content { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 348px; }
.date-range-presets { display: grid; align-content: start; gap: 2px; padding: 14px; border-right: 1px solid #e0e8f0; background: #fbfdff; }
.date-range-presets button { border: 0; border-radius: 7px; padding: 9px 10px; color: #27384d; background: transparent; cursor: pointer; font: inherit; font-size: .9rem; text-align: left; }
.date-range-presets button:hover, .date-range-presets button.is-active { color: #143c69; background: #eaf2fa; }
.date-range-calendar-panel { min-width: 0; padding: 16px 20px 14px; }
.date-range-selection { min-height: 22px; color: #426c9a; font-size: .84rem; font-weight: 700; }
.date-range-calendar-navigation { display: flex; justify-content: space-between; margin: 4px 0 7px; }
.date-range-calendar-navigation button { display: grid; width: 36px; height: 34px; place-items: center; border: 1px solid #c9d5e1; border-radius: 8px; color: #526274; background: #fff; cursor: pointer; font-size: 1.8rem; line-height: 1; }
.date-range-calendar-navigation button:hover { border-color: #7fa0c1; color: #143c69; background: #f4f8fc; }
.date-range-calendars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.date-range-month { min-width: 0; }
.date-range-month-title { margin-bottom: 10px; color: #27384d; font-size: 1rem; font-weight: 750; text-align: center; text-transform: capitalize; }
.date-range-weekdays, .date-range-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.date-range-weekdays { margin-bottom: 4px; color: #6e7b8c; font-size: .72rem; font-weight: 700; text-align: center; }
.date-range-days { gap: 2px; }
.date-range-day { display: grid; aspect-ratio: 1; min-width: 0; place-items: center; border: 0; border-radius: 6px; color: #27384d; background: transparent; cursor: pointer; font: inherit; font-size: .86rem; }
.date-range-day:hover { background: #e9f2fb; }
.date-range-day.is-outside { color: #a6b0bd; }
.date-range-day.is-in-range { border-radius: 0; background: #e8f1fa; }
.date-range-day.is-range-start, .date-range-day.is-range-end { border-radius: 6px; color: #fff; background: #2da65a; font-weight: 700; }
.date-range-day.is-today:not(.is-range-start):not(.is-range-end) { box-shadow: inset 0 -2px #426c9a; }
.date-range-day:disabled { color: #c2cad4; background: transparent; cursor: not-allowed; }
.date-range-footer { display: flex; justify-content: space-between; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid #e0e8f0; }
.sync-dialog { width: min(1380px, calc(100vw - 32px)); height: auto; min-height: 0; max-height: min(900px, calc(100dvh - 32px)); border: 0; border-radius: 14px; padding: 0; color: #172235; box-shadow: 0 24px 56px rgb(10 30 56 / 28%); overflow: visible; }
.sync-dialog[open] { display: flex; flex-direction: column; }
.sync-dialog::backdrop { background: rgb(10 30 56 / 38%); }
.sync-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 18px; border-bottom: 1px solid #d7e1ec; }
.sync-dialog-heading p { margin: 6px 0 0; color: #66758a; font-size: .88rem; line-height: 1.4; }
.sync-dialog-content { min-height: 0; flex: 0 1 auto; max-height: calc(min(900px, 100dvh - 32px) - 106px); overflow: auto; padding: 18px 24px 24px; }
.sync-period-settings { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #c7d8ea; border-radius: 10px; background: #f7fbff; }
.sync-period-settings h3 { margin: 0; color: #254f7a; font-size: .9rem; }
.sync-period-settings p { margin: 4px 0 0; color: #66758a; font-size: .77rem; line-height: 1.35; }
.sync-period-controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.sync-period-controls label, .sync-schedule-field { display: grid; gap: 4px; color: #64738a; font-size: .7rem; font-weight: 700; }
.sync-period-controls input, .sync-schedule-control select, .sync-schedule-control input { min-height: 34px; border: 1px solid #bfcee0; border-radius: 7px; padding: 6px 8px; color: #233c59; background: #fff; font: inherit; font-size: .8rem; }
.sync-period-controls input { width: 142px; }
.sync-settings-save-state { min-width: 126px; padding-bottom: 8px; color: #6280a0; font-size: .72rem; font-weight: 650; }
.sync-tasks-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 12px; }
.sync-tasks-summary { color: #526e8c; font-size: .8rem; font-weight: 650; }
.sync-tasks-table-wrap { overflow-x: auto; border: 1px solid #d6e1ec; border-radius: 12px; background: #f8fbfe; }
.sync-tasks-table { width: 100%; min-width: 1180px; border-collapse: collapse; table-layout: fixed; }
.sync-tasks-table td:nth-child(1) { width: 28%; }
.sync-tasks-table td:nth-child(2) { width: 9%; }
.sync-tasks-table td:nth-child(3) { width: 29%; }
.sync-tasks-table td:nth-child(4) { width: 21%; }
.sync-tasks-table td:nth-child(5) { width: 13%; }
.sync-task-row { border-top: 1px solid #d9e4ef; background: #fff; }
.sync-task-row:first-child { border-top: 0; }
.sync-task-row.is-ready, .sync-task-row.is-completed { background: #fbfdff; }
.sync-task-row.is-running { background: #fff9e8; }
.sync-task-row.is-queued { background: #f6f9fc; }
.sync-task-row.is-warning { background: #fffaf0; }
.sync-task-row.is-error { background: #fff6f5; }
.sync-tasks-table td { padding: 12px 14px; vertical-align: middle; }
.sync-task-row td:first-child { box-shadow: inset 4px 0 #7892ae; }
.sync-task-row.is-running td:first-child { box-shadow: inset 4px 0 #d97800; }
.sync-task-row.is-queued td:first-child { box-shadow: inset 4px 0 #637b96; }
.sync-task-row.is-error td:first-child { box-shadow: inset 4px 0 #d86861; }
.sync-task-row.is-completed td:first-child { box-shadow: inset 4px 0 #37a86e; }
.sync-task-title strong, .sync-task-title small { display: block; }
.sync-task-title strong { color: #203c5e; font-size: .92rem; }
.sync-task-title small { max-width: 440px; margin-top: 3px; color: #6b7b90; font-size: .74rem; line-height: 1.32; }
.spp-reports-toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; border: 0; padding: 0; color: #2a659d; background: transparent; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 750; }
.spp-reports-toggle:hover { color: #173f69; text-decoration: underline; }
.spp-reports-toggle span { display: inline-grid; width: 12px; place-items: center; font-size: .95rem; }
.spp-reports-expansion td { padding: 0 !important; background: #f7fbff; }
.spp-reports-panel { border-top: 1px solid #cedfed; padding: 16px 18px 18px; }
.spp-reports-heading { display: grid; gap: 4px; margin-bottom: 13px; }
.spp-reports-heading strong { color: #254f7a; font-size: .86rem; }
.spp-reports-heading span { color: #6b7b90; font-size: .73rem; line-height: 1.35; }
.spp-reports-grid { display: grid; gap: 8px; }
.spp-report-row { display: grid; grid-template-columns: minmax(210px, 1.45fr) minmax(100px, .65fr) minmax(230px, 1fr) minmax(190px, 1fr) auto; align-items: center; gap: 13px; border: 1px solid #d6e2ee; border-radius: 9px; padding: 11px 12px; background: #fff; }
.spp-report-row.is-error { border-color: #efc8c4; background: #fff8f7; }
.spp-report-title strong, .spp-report-title small { display: block; }
.spp-report-title strong { color: #274a6f; font-size: .82rem; }
.spp-report-title small { margin-top: 3px; color: #6f7e91; font-size: .7rem; line-height: 1.32; }
.spp-report-status { color: #5c7189; font-size: .72rem; line-height: 1.35; }
.spp-report-status.is-error { color: #b54a43; }
.sync-toggle { display: inline-flex; align-items: center; gap: 6px; color: #66758a; font-size: .72rem; font-weight: 700; cursor: pointer; }
.sync-toggle input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.sync-toggle span { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #a9b8c8; transition: background .18s ease; }
.sync-toggle span::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(10 30 56 / 24%); content: ""; transition: transform .18s ease; }
.sync-toggle input:checked + span { background: #14867f; }
.sync-toggle input:checked + span::after { transform: translateX(16px); }
.sync-toggle input:focus-visible + span { outline: 2px solid #4b8ed4; outline-offset: 2px; }
.sync-toggle input:disabled + span { opacity: .55; cursor: not-allowed; }
.sync-schedule-control { display: grid; gap: 7px; min-width: 0; }
.sync-schedule-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #d8e2ed; border-radius: 8px; background: #eff4f8; }
.sync-schedule-mode { min-height: 34px; border: 0; border-right: 1px solid #d8e2ed; padding: 0 10px; color: #637188; background: transparent; cursor: pointer; font: inherit; font-size: .74rem; font-weight: 750; white-space: nowrap; }
.sync-schedule-mode:last-child { border-right: 0; }
.sync-schedule-mode:hover:not(:disabled) { color: #235c70; background: #f8fbfd; }
.sync-schedule-mode.is-active { color: #10746e; background: #fff; box-shadow: 0 2px 7px rgb(31 64 93 / 12%); }
.sync-schedule-mode:focus-visible { position: relative; z-index: 1; outline: 2px solid #4b8ed4; outline-offset: -2px; }
.sync-schedule-details { display: flex; align-items: flex-end; gap: 7px; min-height: 30px; }
.sync-schedule-control > select { width: 91px; }
.sync-schedule-control .sync-schedule-field input { width: 76px; }
.sync-schedule-control .sync-schedule-field select { width: 104px; }
.sync-manual-hint { color: #718398; font-size: .76rem; line-height: 1.35; }
.sync-schedule-control.is-disabled { opacity: .55; }
.sync-schedule-control select, .sync-schedule-control input { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
.sync-task-state { display: inline-flex; align-items: center; max-width: 100%; border-radius: 999px; padding: 4px 9px; color: #31775f; background: #e9f6ef; font-size: .72rem; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.sync-task-state.is-running, .sync-task-state.is-warning { color: #a56607; background: #fff0cd; }
.sync-task-state.is-queued { color: #506781; background: #e5edf5; }
.sync-task-state.is-error { color: #b54a43; background: #fde9e7; }
.sync-task-state.is-completed { color: #28765f; background: #e7f6ee; }
.sync-task-status { min-height: 18px; margin-top: 5px; color: #5b7089; font-size: .72rem; line-height: 1.3; }
.sync-task-row.is-running .sync-task-status { color: #a66a0c; font-weight: 700; }
.sync-task-row.is-error .sync-task-status { color: #b54a43; }
.sync-task-row.is-completed .sync-task-status { color: #27735d; }
.sync-task-status-cell > small { display: block; margin-top: 4px; color: #78899e; font-size: .68rem; line-height: 1.25; }
.sync-task-action { text-align: right; }
.sync-task-action .button { width: 100%; min-width: 0; max-width: 100%; min-height: 40px; justify-content: center; overflow: hidden; padding-right: 12px; padding-left: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sync-task-button { position: relative; gap: 8px; border-color: #108078; color: #fff; background: #108078; box-shadow: 0 2px 5px rgb(9 81 76 / 20%); }
.sync-task-button:hover:not(:disabled) { border-color: #0b6963; background: #0b6963; }
.sync-task-button.is-running { border-color: #c66b00; background: #e68200; }
.sync-task-button.is-running:disabled, .sync-task-button.is-queued:disabled, .sync-task-button.is-completed:disabled { opacity: 1; }
.sync-task-button.is-running:disabled { cursor: wait; }
.sync-task-button.is-queued { border-color: #526a85; color: #fff; background: #627a95; }
.sync-task-button.is-completed { border-color: #6cae91; color: #2a795d; background: #e8f6ee; }
.sync-task-button.is-error { border-color: #d86861; color: #a33e39; background: #fde9e7; }
.sync-task-button-spinner { width: 15px; height: 15px; flex: 0 0 15px; border: 2px solid rgb(255 255 255 / 48%); border-top-color: #fff; border-radius: 50%; animation: sync-task-spin .85s linear infinite; }
@keyframes sync-task-spin { to { transform: rotate(360deg); } }
.sync-tasks-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sync-history-panel { margin-top: 18px; border: 1px solid #d6e1ec; border-radius: 10px; overflow: hidden; background: #fbfdff; }
.sync-history-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 15px 16px; border-bottom: 1px solid #dce6f0; }
.sync-history-heading h3 { margin: 0; color: #203c5e; font-size: .92rem; }
.sync-history-heading p { margin: 4px 0 0; color: #6b7b90; font-size: .75rem; }
.sync-history-heading label { display: grid; gap: 4px; color: #64738a; font-size: .7rem; font-weight: 700; }
.sync-history-heading select { min-width: 185px; min-height: 34px; border: 1px solid #bfcee0; border-radius: 7px; padding: 6px 8px; color: #233c59; background: #fff; font: inherit; font-size: .8rem; }
.sync-history-table-wrap { max-height: 370px; overflow: auto; }
.sync-history-table { width: 100%; min-width: 940px; border-collapse: collapse; table-layout: fixed; }
.sync-history-table th { position: sticky; z-index: 1; top: 0; padding: 10px 12px; color: #f7fbff; background: #24364a; text-align: left; font-size: .72rem; font-weight: 750; }
.sync-history-table th:nth-child(1), .sync-history-table th:nth-child(2) { width: 16%; }
.sync-history-table th:nth-child(3) { width: 18%; }
.sync-history-table th:nth-child(4) { width: 13%; }
.sync-history-table th:nth-child(5) { width: 12%; }
.sync-history-table td { padding: 11px 12px; border-top: 1px solid #dce6f0; color: #536177; font-size: .76rem; line-height: 1.35; vertical-align: middle; }
.sync-history-table td strong { color: #203c5e; }
.sync-history-message { overflow: hidden; max-width: 0; color: #6b7b90 !important; text-overflow: ellipsis; white-space: nowrap; }
.sync-history-empty { padding: 20px !important; color: #718398 !important; text-align: center; }
.sync-history-status { display: inline-flex; border-radius: 999px; padding: 4px 8px; font-size: .71rem; font-weight: 700; white-space: nowrap; }
.sync-history-status.is-success { color: #28765f; background: #e7f6ee; }
.sync-history-status.is-running { color: #9b6d12; background: #fff2d3; }
.sync-history-status.is-partial { color: #a36b15; background: #fff2d3; }
.sync-history-status.is-failed { color: #b54a43; background: #fde9e7; }
.sync-history-status.is-skipped { color: #627188; background: #edf1f5; }

@media (min-width: 1101px) and (max-width: 1760px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 22px; }
  .topbar h1 { font-size: clamp(1.8rem, 3vw, 2.02rem); }
  .topbar-panel { grid-template-columns: auto auto; width: auto; justify-self: end; gap: 12px; }
  .toolbar { grid-template-columns: minmax(170px, 280px) 250px auto; gap: 8px; }
  .toolbar-actions { grid-template-columns: minmax(0, 158px) 108px; gap: 6px 8px; }
  .toolbar-actions .button { min-height: 52px; gap: 8px; padding: 0 12px; font-size: .84rem; }
  .toolbar .date-range-button { min-height: 52px; gap: 9px; padding: 7px 10px; }
  .date-range-copy > span { font-size: .7rem; }
  .date-range-copy > strong { font-size: .85rem; }
  .control-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .account-menu-button { min-height: 46px; max-width: 170px; gap: 8px; padding: 4px; }
  .account-avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: .8rem; }
  .account-identity strong { font-size: .78rem; }
  .account-identity span { font-size: .69rem; }
  .account-chevron { width: 16px; height: 16px; flex-basis: 16px; margin-left: 0; }
  .account-controls { padding-left: 12px; }
  .toolbar-updated-at { font-size: .7rem; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .topbar { grid-template-columns: 1fr; gap: 16px; }
  .topbar-panel { grid-template-columns: 1fr; width: 100%; justify-self: stretch; }
  .toolbar { grid-template-columns: minmax(0, 1fr) minmax(250px, 340px) minmax(0, 1fr); gap: 12px; }
}

@media (min-width: 761px) and (max-width: 1550px) {
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page-shell { padding: 24px 16px; }
  .filters { grid-template-columns: 1fr; display: grid; }
  .filters-dialog { overflow-y: auto; }
  .filters-dialog-content { padding: 16px 18px 10px; }
  .filters-dialog .filters { grid-template-columns: 1fr; grid-auto-rows: 68px; }
  .table-grouping-settings { grid-template-columns: 1fr; margin-top: 16px; }
  .table-grouping-reset { justify-self: start; }
  .filters-dialog-footer { align-items: flex-end; flex-direction: column; padding: 14px 18px 18px; }
  .filters-dialog-actions { width: 100%; }
  .filters-dialog-footer .button { width: 100%; }
  .spp-recommendation-filter-field { grid-column: span 1; }
  .topbar { grid-template-columns: 1fr; gap: 18px; }
  .topbar-panel { grid-template-columns: 1fr; width: 100%; justify-self: stretch; gap: 14px; }
  .toolbar { grid-template-columns: 1fr; gap: 12px; }
  .toolbar-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .summary-grid { grid-template-columns: 1fr; }
  .table-heading { height: auto; min-height: 60px; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
  .table-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
  .table-search-field { width: 100%; min-width: min(100%, 260px); }
  .account-controls { width: 100%; justify-self: stretch; border-top: 1px solid #d7e1ec; border-left: 0; padding-top: 12px; padding-left: 0; }
  .column-settings-dialog { width: min(720px, calc(100vw - 32px)); }
  .column-settings-options { grid-template-columns: 1fr; padding: 16px; }
  .column-settings-heading { padding: 20px 18px 16px; }
  .table-view-settings { padding: 16px 18px 0; }
  .column-settings-footer { padding: 0 18px 18px; }
  .column-settings-section-grid { grid-template-columns: 1fr; }
  .table-view-form, .create-user-form { padding-right: 18px; padding-left: 18px; }
  .users-list { padding-right: 18px; padding-left: 18px; }
  .users-form-grid { grid-template-columns: 1fr; }
  .date-range-content { grid-template-columns: 1fr; }
  .date-range-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid #e0e8f0; }
  .date-range-calendars { grid-template-columns: 1fr; gap: 16px; }
  .date-range-heading { padding: 20px 18px 16px; }
  .date-range-calendar-panel { padding: 14px 16px; }
  .date-range-footer { padding: 14px 18px 18px; }
  .sync-dialog-heading { padding: 20px 18px 16px; }
  .sync-dialog-content { padding: 16px 18px 18px; }
  .sync-period-settings { align-items: flex-start; flex-direction: column; }
  .sync-period-controls { justify-content: flex-start; }
  .sync-tasks-toolbar, .sync-history-heading { align-items: flex-start; flex-direction: column; }
  .sync-tasks-actions { justify-content: flex-start; }
  .spp-report-row { grid-template-columns: 1fr 1fr; }
  .spp-report-title { grid-column: 1 / -1; }
  .spp-dialog { height: min(820px, calc(100dvh - 32px)); }
  .spp-dialog-default-limit { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px 18px; }
  .spp-subject-limit-control { align-items: flex-start; flex-direction: column; gap: 8px; }
  .spp-dialog-content { grid-template-columns: 1fr; grid-auto-rows: minmax(360px, 1fr); padding: 16px 18px 18px; overflow-y: auto; }
  .spp-history-content { padding: 16px 18px 18px; }
  .spp-history-chart, .spp-history-svg, .spp-history-empty { min-height: 280px; }
  .spp-history-orders-chart, .spp-history-orders-svg, .spp-history-orders-empty { min-height: 175px; }
  .spp-history-axis-label { font-size: 11px; }
  .performance-dialog-content { grid-template-columns: 1fr; padding: 16px 18px 18px; }
  .performance-section--advertising .performance-metrics { grid-template-columns: 1fr; }
  .performance-charts-grid { grid-template-columns: 1fr; gap: 18px; }
  .performance-chart-group + .performance-chart-group { border-top: 1px solid #e1e8f0; border-left: 0; padding-top: 18px; padding-left: 0; }
  .performance-chart-layout { grid-template-columns: 1fr; }
  .orders-donut-chart { margin: 0 auto; }
}

@media (max-width: 480px) {
  .toolbar-actions { grid-template-columns: minmax(0, 1fr) max-content; }
  .date-range-button { min-width: 0; }
  .account-menu { left: 0; right: auto; width: min(224px, calc(100vw - 56px)); }
  .spp-recommendation-filter-menu { width: min(356px, calc(100vw - 24px)); }
}

@media (min-width: 761px) and (max-width: 1350px) {
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 761px) and (max-width: 1120px) {
  .performance-dialog-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-section:last-child { grid-column: span 2; }
}