.detail-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.detail-tabs button { background: none; border: 0; padding: 0 2px 8px; color: var(--text-secondary); position: relative; font-size: 14px; }
.detail-tabs button[aria-selected="true"] { color: var(--brand); font-weight: 600; }
.detail-tabs button[aria-selected="true"]::after { position: absolute; content: ''; height: 3px; background: var(--brand); bottom: -1px; left: 0; right: 0; border-radius: 3px 3px 0 0; }
.overview-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.overview-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.overview-label .muted { font-weight: 400; font-size: 11px; }
.date-control { display: flex; align-items: center; gap: var(--space-2); }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 10px; overflow: hidden; }
.kpi { padding: 10px 14px; position: relative; }
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi-label { color: var(--text-muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.kpi-value { font-size: 23px; font-weight: 600; margin: 3px 0 2px; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.kpi-unit { font-size: 13px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }

.plans-panel { overflow: hidden; }
.panel-top { padding: 9px 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.panel-top h2 { margin: 0; font-size: 15px; }
.panel-top p { margin: 0; font-size: 11px; color: var(--text-muted); }
.filters { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search-form { width: 310px; position: relative; }
.search-input-wrap { position: relative; flex: 1; min-width: 0; }
.search-input-wrap .mo-input { padding-left: 32px; }
.search-input-wrap > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.filter-status { width: 138px; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 6px; align-items: center; }
.filter-chip { border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; background: var(--surface-subtle); font-size: 11px; display: inline-flex; align-items: center; gap: 7px; }
.filter-chip button { padding: 0; border: 0; background: transparent; color: var(--text-muted); min-width: 24px; min-height: 24px; }
.table-tools { padding: 6px 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); }
.mo-list-query + .table-tools { border-top:0; }
.table-tools-left, .list-query-actions { display: flex; align-items: center; gap: 8px; }
.table-tools small { color: var(--text-muted); }
.table-viewport { width: 100%; overflow: auto; max-height: max(260px, calc(100dvh - 420px)); scroll-padding-top: 38px; }
.plan-table { min-width:1280px; table-layout:fixed; }
.plan-table th { position:sticky; top:0; z-index:3; text-align:right; }
.plan-table th.align-left, .plan-table td.align-left { text-align: left; }
.plan-table th:first-child, .plan-table td:first-child { text-align: center; padding: 0 10px; }
.plan-table td { text-align:right; }
.plan-table .sticky-check { position: sticky; left: 0; z-index: 2; }
.plan-table .sticky-account { position: sticky; left: var(--table-check-width); z-index: 2; }
.plan-table .sticky-name { position: sticky; left: calc(var(--table-check-width) + var(--table-account-width)); z-index: 2; border-right: 1px solid var(--border); }
.plan-table th.sticky-check, .plan-table th.sticky-account, .plan-table th.sticky-name { z-index: 4; }
.plan-cell { display: flex; gap: 11px; align-items: center; min-width: 0; }
.plan-copy { min-width: 0; flex: 1; }
.plan-name { font-size: 12px; text-align: left; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; padding: 0; border: 0; background: none; line-height: 1.5; }
.plan-name:hover { color: var(--brand); }
.plan-id { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.product-thumb { width: 32px; height: 36px; border-radius: 7px; display: grid; place-items: center; color: var(--text-secondary); flex-shrink: 0; background: var(--surface-subtle); }
.product-thumb.mint, .material-art.mint { background: #e5eee5; }
.product-thumb.sand, .material-art.sand { background: #f2eadd; }
.product-thumb.olive, .material-art.olive { background: #e6ebd8; }
.product-thumb.rose, .material-art.rose { background: #f3e4e1; }
.product-thumb.lilac, .material-art.lilac { background: #eae5f3; }
.product-thumb.blue, .material-art.blue { background: #e1eaf1; }
.table-subtext { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.row-actions { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.row-actions .text-link { font-size: 12px; white-space: nowrap; }
.sort-button { display: inline-flex; gap: 5px; align-items: center; border: 0; padding: 5px 0; color: inherit; background: none; }
.sort-button.active { color: var(--brand); }
.sort-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--text-muted); }
.sort-button.active .sort-mark { color: var(--brand); }
.switch { width: 29px; height: 17px; border: 0; padding: 2px; border-radius: 10px; background: var(--border); position: relative; flex-shrink: 0; }
.switch::after { content: ''; display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); transition: transform var(--motion-fast); }
.switch[aria-checked="true"] { background: var(--brand); }
.switch[aria-checked="true"]::after { transform: translateX(12px); }
.switch:disabled { opacity: .5; }
.status-cell { display: flex; gap: 8px; align-items: center; }
.prototype-footnote { margin-top: 8px; color: var(--text-muted); font-size: 11px; display: flex; justify-content: space-between; gap: 12px; }
.creator-note { color: var(--text-muted); display: block; font-size: 11px; }
@media (max-width: 1250px) { .kpi { padding: 9px 12px; } .kpi-value { font-size: 23px; } }
@media (max-width: 1020px) { .kpi-value { font-size: 21px; } .overview-label .muted { display: none; } }
@media (max-width: 720px) { .overview-topline, .panel-top { align-items: flex-start; flex-wrap: wrap; } .filters { padding: 10px 12px; } .search-form { width: 100%; } .table-tools { padding: 10px 12px; flex-wrap: wrap; }  .prototype-footnote { flex-direction: column; } .date-control { flex-wrap: wrap; } }

.extra-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 0 12px 10px; }
.extra-filters > label { display: grid; gap: 3px; color: var(--text-secondary); font-size: 12px; }
.extra-filters select { min-width: 100px; }
.extra-filters input { width: 145px; }
.extra-filters .field-error { flex-basis: 100%; }
.extra-filters .field-error:empty { display: none; }

.kpi-value { white-space: nowrap; }
@container (max-width: 600px) {
  .kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .kpi:nth-child(n) { border-left: 0; border-top: 0; }
  .kpi:nth-child(3n+2), .kpi:nth-child(3n+3) { border-left: 1px solid var(--border); }
  .kpi:nth-child(n+4) { border-top: 1px solid var(--border); }
}
@container (max-width: 440px) {
  .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kpi:nth-child(n) { border-left: 0; border-top: 0; }
  .kpi:nth-child(even) { border-left: 1px solid var(--border); }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
}

.filter-account{width:245px}
.account-cell .creator-note{font-size:13px;color:var(--text);font-weight:600}.account-cell .account-name{font-size:12px;color:var(--text-muted)}
.product-data>span{display:block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.list-query-actions { margin-left: auto; }