/* Meridian UI 1.1 — authoritative specification: docs/ui/Amazon_AI_Workbench_UI_Spec.md */
.review-report .overview-tabs {
  margin: 0;
  gap: 10px
}


.review-report .overview-tabs>[aria-selected=true] {
  box-shadow: inset 0 -3px var(--accent)
}

.review-input,
.review-history,
.review-report,
.review-admin {
  padding: 24px;
  margin-bottom: 22px;
  min-width: 0
}

.review-input>.panel-heading,
.review-history>.panel-heading,
.review-report>.panel-heading,
.review-admin>.panel-heading {
  padding: 0 0 20px
}

.review-input-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
  gap: 24px
}

.review-input-grid textarea {
  min-height: 204px;
  resize: vertical;
  line-height: 1.8
}

.review-form-side {
  display: grid;
  gap: 14px
}

.review-input .field,
.review-admin .field,
.review-filter-grid .field,
.review-report-tools .field,
.review-dialog-fields .field {
  margin: 0;
  min-width: 0
}

.review-input input,
.review-input textarea,
.review-input select,
.review-filter-grid input,
.review-filter-grid select,
.review-report-tools select,
.review-admin input:not([type=checkbox]),
.review-admin select,
.review-dialog-fields input:not([type=checkbox]),
.review-dialog-fields select,
.review-dialog-fields textarea {
  width: 100%;
  min-width: 0
}

.review-form-footer,
.review-history-item,
.review-channel,
.review-work,
.review-analysis-heading {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between
}

.review-form-footer {
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted)
}

.review-history-item,
.review-channel {
  padding: 20px 0;
  border-top: 1px solid var(--divider)
}

.review-history-item strong,
.review-channel h3 {
  font-size: 14px;
  color: var(--heading);
  overflow-wrap: anywhere
}

.review-history-item p,
.review-channel p,
.review-work p,
.review-analysis-heading p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin: 6px 0
}

.review-history-item small,
.review-channel small,
.review-work small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
  overflow-wrap: anywhere
}

.review-history-item>div:first-child,
.review-channel>div:first-child,
.review-work>div:first-child {
  min-width: 0
}

.review-history-item .button-row,
.review-channel .button-row {
  flex-shrink: 0
}

.review-progress {
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0
}

.review-progress>summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9
}

.review-progress>summary .badge {
  margin-right: 10px
}

.review-batch-summary {
  display: grid;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--divider))
}

.review-batch-summary>div {
  min-width: 0
}

.review-batch-summary small,
.review-batch-summary p {
  display: block;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  overflow-wrap: anywhere
}

.review-work {
  padding: 14px 0;
  border-top: 1px solid var(--divider);
  margin-top: 10px
}

.review-work strong {
  font-size: 12px;
  margin-right: 12px
}

.review-report-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  margin: 22px 0;
  min-width: 0
}

.review-report-tools .field {
  flex: 1;
  min-width: 190px;
  max-width: 350px
}

.review-report-tools .button-row {
  margin-left: auto
}

.review-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0
}

.review-stat-grid .overview-card {
  padding: 22px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  background: var(--paper)
}

.review-stat-grid .overview-card>span {
  font-size: 12px;
  color: var(--muted)
}

.review-stat-grid .overview-card>strong {
  font-size: 25px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums
}

.review-stat-grid .overview-card>small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8
}

.review-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px
}

.review-reading {
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 24px
}

.review-reading h3 {
  font-size: 15px
}

.review-reading>p {
  font-size: 12px;
  color: var(--muted);
  margin: 7px 0 24px
}

.review-star {
  display: grid;
  grid-template-columns: 32px minmax(40px, 1fr) 64px 64px;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: 12px
}

.review-star meter {
  width: 100%;
  height: 14px;
  appearance: none;
  border: none;
  background: var(--canvas);
  border-radius: 9px;
  overflow: hidden
}

.review-star meter::-webkit-meter-bar {
  background: var(--canvas);
  border: 0
}

.review-star meter::-webkit-meter-optimum-value {
  background: var(--accent);
  border-radius: 9px
}

.review-star strong {
  text-align: right;
  font-variant-numeric: tabular-nums
}

.review-star small {
  color: var(--muted);
  text-align: right
}

.review-reading .definition {
  font-size: 12px;
  grid-template-columns: 86px minmax(0, 1fr)
}

.review-reading .definition dd {
  line-height: 1.9
}

.review-analysis-heading {
  margin: 24px 0 20px
}

.review-analysis-heading>div,
.review-report #review-panel,
.review-comparison {
  min-width: 0
}

.review-analysis-heading h3 {
  font-size: 16px
}

.review-analysis-heading h3 small {
  color: var(--muted);
  margin-left: 10px;
  font-weight: 400
}

.review-themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px
}

.review-theme {
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  min-width: 0
}

.review-theme-heading {
  display: flex;
  align-items: center;
  gap: 12px
}

.review-theme-rank {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  flex-shrink: 0
}

.review-theme h4 {
  font-size: 15px;
  line-height: 1.6;
  flex: 1;
  overflow-wrap: anywhere
}

.review-theme-heading>div {
  text-align: right
}

.review-theme-heading strong {
  font-size: 23px;
  font-variant-numeric: tabular-nums
}

.review-theme-heading small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 6px
}

.review-theme blockquote {
  margin: 18px 0;
  padding: 10px 14px;
  border-left: 2px solid var(--accent);
  background: var(--canvas);
  font-size: 12px;
  line-height: 1.9;
  overflow-wrap: anywhere;
  white-space: pre-wrap
}

.review-interpretation {
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
  margin: 14px 0 0
}

.review-interpretation b {
  color: var(--heading);
  font-weight: 500
}

.review-theme-footer {
  margin-top: auto;
  padding-top: 12px
}

.review-filter-grid {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) repeat(3, minmax(100px, 1fr)) auto;
  align-items: end;
  gap: 14px;
  margin: 22px 0
}

.review-history .review-filter-grid {
  grid-template-columns: 2fr 1fr 1fr auto
}

.review-original {
  padding: 22px 0;
  border-top: 1px solid var(--divider);
  background: var(--paper)
}

.review-original-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px
}

.review-original-meta strong {
  color: var(--accent-text)
}

.review-original h4 {
  font-size: 15px;
  margin: 10px 0;
  line-height: 1.8;
  overflow-wrap: anywhere
}

.review-original-body {
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--heading);
  max-width: 100ch
}

.review-original-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 16px
}

.review-original small {
  font-size: 11px;
  color: var(--muted)
}

.review-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px
}

.review-routing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0
}

.review-routing fieldset {
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 18px;
  font-size: 12px
}

.review-routing legend {
  padding: 0 8px;
  color: var(--muted)
}

.review-routing label,
.review-member-list label {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0
}

.review-dialog-fields {
  display: grid;
  gap: 16px
}

.review-member-list {
  max-height: 360px;
  overflow: auto
}

.review-analysis-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--paper)
}

.review-analysis-state.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--divider));
  box-shadow: inset 3px 0 var(--accent)
}

.review-analysis-state>div:first-child {
  min-width: 0;
  flex: 1
}

.review-analysis-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px
}

.review-analysis-state h3,
.review-analysis-state p {
  margin: 0
}

.review-analysis-state p,
.review-analysis-state small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  overflow-wrap: anywhere
}

.review-analysis-state progress {
  display: block;
  width: min(540px, 100%);
  height: 10px;
  margin: 12px 0 6px;
  accent-color: var(--accent)
}

.review-comparison-scroll {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--readable)
}

.review-comparison-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px
}

.review-comparison table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px
}

.review-comparison th,
.review-comparison td {
  min-width: 120px;
  padding: 14px;
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.review-comparison th:nth-child(1) {
  min-width: 56px;
  width: 56px
}

.review-comparison th:nth-child(2) {
  min-width: 180px
}

.review-comparison th:nth-child(3) {
  min-width: 84px
}

.review-comparison thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--heading);
  background: var(--accent-soft)
}

.review-comparison thead small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 400
}

.review-comparison tbody th {
  color: var(--accent-text);
  background: var(--paper)
}

.review-comparison .review-global-overview {
  min-width: 320px;
  color: var(--ink);
  font-weight: 650;
  line-height: 1.75;
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--readable))
}

.review-cell-evidence {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--divider)
}

.review-cell-evidence summary {
  cursor: pointer;
  color: var(--accent-text);
  font-weight: 650
}

.review-cell-evidence blockquote,
.review-cell-evidence p {
  margin: 8px 0 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--canvas);
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.review-cell-evidence small {
  display: block;
  margin-top: 5px;
  color: var(--muted)
}

.review-analysis-limitations,
.review-evidence-guide {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--paper);
  font-size: 12px;
  line-height: 1.8
}

.review-analysis-limitations summary {
  cursor: pointer;
  font-weight: 650
}

.review-evidence-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}

.review-evidence-guide p {
  margin: 0
}

.review-analysis-confirm ul {
  margin-bottom: 0
}

@media(max-width:1250px) {
  .review-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .review-report-tools .button-row {
    margin-left: 0
  }

  .review-channel {
    align-items: flex-start;
    flex-direction: column
  }

  .review-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:760px) {

  .review-input-grid,
  .review-overview-grid,
  .review-themes,
  .review-config-grid,
  .review-routing {
    grid-template-columns: 1fr
  }

  .review-input,
  .review-history,
  .review-report,
  .review-admin {
    padding: 18px
  }

  .review-history .review-filter-grid {
    grid-template-columns: 1fr 1fr
  }

  .review-form-footer,
  .review-history-item,
  .review-work,
  .review-analysis-state,
  .review-evidence-guide {
    flex-direction: column;
    align-items: flex-start
  }

  .review-report-tools .field {
    min-width: 0;
    flex-basis: 100%;
    max-width: none
  }

  .review-stat-grid {
    gap: 10px
  }

  .review-stat-grid .overview-card {
    padding: 16px;
    min-height: 130px
  }

  .review-stat-grid .overview-card>strong {
    font-size: 22px
  }

  .review-theme {
    padding: 16px
  }

  .review-theme-heading {
    flex-wrap: wrap
  }

  .review-theme-heading h4 {
    min-width: 120px
  }

  .review-theme-heading>div {
    flex-basis: 100%;
    text-align: left;
    margin-left: 42px
  }

  .review-theme-heading small {
    display: inline;
    margin-left: 10px
  }

  .review-reading {
    padding: 16px
  }

  .review-star {
    grid-template-columns: 28px minmax(30px, 1fr) 55px 48px;
    gap: 8px
  }

  .review-report>.panel-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .review-reading .definition {
    grid-template-columns: 74px minmax(0, 1fr)
  }

  .review-original-body {
    font-size: 13px
  }

  .review-report .overview-tabs {
    overflow-x: auto
  }

  .review-report .overview-tabs button {
    white-space: nowrap
  }
}

.ai-classification-dialog[open] {
  display: flex;
  flex-direction: column;
  width: min(1500px, calc(100vw - 40px));
  height: min(1000px, calc(100dvh - 40px));
  max-width: none;
  overflow: hidden
}

.ai-classification-dialog .dialog-head {
  flex-shrink: 0;
  position: static
}

.ai-classification-dialog .dialog-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  gap: 14px;
  padding: 20px 24px
}

.ai-review-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0
}

.ai-review-heading h3 {
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  color: var(--heading)
}

.ai-review-heading p,
.ai-review-footer p,
.ai-stage p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9;
  margin: 6px 0 0
}

.ai-review-heading .badge {
  white-space: nowrap
}

.ai-stage {
  padding: 36px 28px;
  border: 1px solid var(--divider);
  background: var(--paper);
  border-radius: 16px
}

.ai-stage .button {
  margin: 20px 8px 0 0
}

.ai-review-controls {
  flex-shrink: 0;
  min-width: 0
}

.ai-group-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 2px 2px 12px
}

.ai-group-tab {
  flex-shrink: 0;
  padding: 9px 13px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  color: var(--muted);
  background: var(--paper);
  font-size: 12px
}

.ai-group-tab span {
  margin-left: 6px;
  font-variant-numeric: tabular-nums
}

.ai-group-tab.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 650
}

.ai-review-toolbar,
.ai-batch-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px
}

.ai-review-toolbar .search-field {
  flex: 1;
  min-width: 210px;
  max-width: none
}

.ai-batch-toolbar {
  padding: 10px 12px;
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted)
}

.ai-batch-toolbar label {
  display: flex;
  gap: 6px;
  align-items: center
}

.ai-batch-toolbar select {
  max-width: 220px;
  min-width: 140px
}

.ai-batch-toolbar label:last-child {
  margin-left: auto
}

.ai-type-editor {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 2fr) minmax(140px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px
}

.ai-type-editor .field {
  margin: 0;
  min-width: 0
}

.ai-type-editor .field>span {
  font-size: 12px
}

.ai-type-editor input,
.ai-type-editor select {
  min-width: 0;
  width: 100%
}

.ai-review-scroll {
  flex: 1;
  min-height: 180px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  padding: 3px;
  background: var(--paper)
}

.ai-review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px
}

.ai-review-card {
  padding: 14px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--paper);
  min-width: 0
}

.ai-review-card.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft)
}

.ai-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px
}

.ai-card-heading label {
  display: flex;
  padding: 5px
}

.ai-card-main {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 14px
}

.ai-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 110px;
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: 10px;
  font-size: 11px;
  color: var(--muted)
}

.ai-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px
}

.ai-card-image img[hidden] {
  display: none
}

.ai-card-main strong {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--heading)
}

.ai-card-main small {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  color: var(--muted);
  overflow-wrap: anywhere
}

.ai-review-card .field {
  margin: 0
}

.ai-review-card .field span {
  font-size: 11px
}

.ai-review-card select {
  width: 100%;
  min-width: 0;
  font-size: 12px
}

.ai-card-reason {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  margin: 10px 0 0;
  overflow-wrap: anywhere
}

.ai-review-footer {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-top: 1px solid var(--divider);
  padding-top: 12px
}

.ai-review-footer p {
  margin: 0;
  max-width: 620px
}

.ai-job-history {
  flex-shrink: 0;
  max-width: 420px;
  margin: 0;
  font-size: 12px
}

.ai-no-products {
  padding: 36px;
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 13px
}

.ai-login-steps {
  font-size: 13px;
  line-height: 2;
  padding-left: 20px
}

.ai-login-command {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--canvas);
  padding: 14px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  font-size: 12px
}

@media(max-width:1250px) {
  .ai-review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .ai-card-main {
    grid-template-columns: 86px minmax(0, 1fr)
  }

  .ai-card-image {
    width: 86px;
    height: 100px
  }

  .ai-review-footer {
    align-items: flex-start
  }

  .ai-review-footer .button-row {
    flex-shrink: 0
  }
}

@media(max-width:900px) {
  .ai-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .ai-type-editor {
    grid-template-columns: 1fr 1fr
  }

  .ai-review-footer {
    flex-direction: column
  }

}

@media(max-width:600px) {
  .ai-classification-dialog[open] {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    border-radius: 18px
  }

  .ai-classification-dialog .dialog-head {
    padding: 16px
  }

  .ai-classification-dialog .dialog-body {
    padding: 14px;
    overflow-y: auto
  }

  .ai-review-grid {
    grid-template-columns: 1fr
  }

  .ai-review-scroll {
    flex: none;
    min-height: 0;
    overflow: visible
  }

  .ai-review-controls {
    position: static
  }

  .ai-review-toolbar .search-field {
    flex-basis: 100%;
    min-width: 0
  }

  .ai-type-editor {
    grid-template-columns: 1fr
  }

  .ai-batch-toolbar label:last-child {
    margin-left: 0
  }

  .ai-review-footer {
    position: static
  }

  .ai-card-main {
    grid-template-columns: 108px minmax(0, 1fr)
  }

  .ai-card-image {
    width: 108px;
    height: 112px
  }
}

.type-content {
  min-height: 0
}

.type-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: 12px
}

.type-summary>span {
  font-size: 13px;
  color: var(--muted)
}

.type-summary strong {
  font-size: 20px;
  font-weight: 650;
  color: var(--heading);
  font-variant-numeric: tabular-nums
}

.type-summary .type-complete {
  color: var(--success);
  margin-left: auto
}

.type-summary>.button {
  margin-left: auto
}

.type-foot {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8
}

.type-foot {
  margin: 14px 0 0
}

.type-table {
  max-height: 526px;
  overflow: auto;
  scrollbar-gutter: stable
}

.type-table table {
  min-width: 720px
}

.type-table th {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 1
}

.type-table th,
.type-table td {
  padding: 10px 14px
}

.type-table td:first-child {
  width: 43%;
  min-width: 260px;
  overflow-wrap: anywhere
}

.type-table .type-numeric {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.type-table tr.is-selected {
  background: var(--accent-soft)
}

.type-identity {
  display: flex;
  align-items: center;
  gap: 14px
}

.type-thumbnails {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  width: 109px
}

.type-mini-image {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 8px
}

.type-mini-image img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.type-mini-image .product-image-empty {
  padding: 3px;
  font-size: 10px;
  line-height: 1.5;
  text-align: center
}

.type-mini-image>[hidden] {
  display: none
}

.type-name {
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  text-align: left;
  min-height: 40px;
  padding: 4px 0;
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere
}

.type-name:hover {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 4px
}

.type-definition-copy {
  font-size: 14px;
  line-height: 1.9;
  overflow-wrap: anywhere
}

.type-definition-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px
}

.type-definition-examples .type-product-image img {
  height: 230px
}

.type-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 9px
}

.type-color-0 {
  background: var(--accent)
}

.type-color-1 {
  background: var(--success)
}

.type-color-2 {
  background: #68839c
}

.type-color-3 {
  background: #af9272
}

.type-color-4 {
  background: #9987aa
}

.type-color-5 {
  background: #798e6f
}

.type-color-6 {
  background: #9b9185
}

.type-color-7 {
  background: #b4b4ad
}

.type-fill-0 {
  fill: var(--accent)
}

.type-fill-1 {
  fill: var(--success)
}

.type-fill-2 {
  fill: #68839c
}

.type-fill-3 {
  fill: #af9272
}

.type-fill-4 {
  fill: #9987aa
}

.type-fill-5 {
  fill: #798e6f
}

.type-fill-6 {
  fill: #9b9185
}

.type-fill-7 {
  fill: #b4b4ad
}

.type-stroke-0 {
  stroke: var(--accent)
}

.type-stroke-1 {
  stroke: var(--success)
}

.type-stroke-2 {
  stroke: #68839c
}

.type-stroke-3 {
  stroke: #af9272
}

.type-stroke-4 {
  stroke: #9987aa
}

.type-stroke-5 {
  stroke: #798e6f
}

.type-stroke-6 {
  stroke: #9b9185
}

.type-stroke-7 {
  stroke: #b4b4ad
}

.type-color-8 {
  background: hsl(205 38% 37%)
}

.type-fill-8 {
  fill: hsl(205 38% 37%)
}

.type-stroke-8 {
  stroke: hsl(205 38% 37%)
}

.type-color-9 {
  background: hsl(343 45% 42%)
}

.type-fill-9 {
  fill: hsl(343 45% 42%)
}

.type-stroke-9 {
  stroke: hsl(343 45% 42%)
}

.type-color-10 {
  background: hsl(120 52% 47%)
}

.type-fill-10 {
  fill: hsl(120 52% 47%)
}

.type-stroke-10 {
  stroke: hsl(120 52% 47%)
}

.type-color-11 {
  background: hsl(258 38% 52%)
}

.type-fill-11 {
  fill: hsl(258 38% 52%)
}

.type-stroke-11 {
  stroke: hsl(258 38% 52%)
}

.type-color-12 {
  background: hsl(35 45% 37%)
}

.type-fill-12 {
  fill: hsl(35 45% 37%)
}

.type-stroke-12 {
  stroke: hsl(35 45% 37%)
}

.type-color-13 {
  background: hsl(173 52% 42%)
}

.type-fill-13 {
  fill: hsl(173 52% 42%)
}

.type-stroke-13 {
  stroke: hsl(173 52% 42%)
}

.type-color-14 {
  background: hsl(310 38% 47%)
}

.type-fill-14 {
  fill: hsl(310 38% 47%)
}

.type-stroke-14 {
  stroke: hsl(310 38% 47%)
}

.type-color-15 {
  background: hsl(88 45% 52%)
}

.type-fill-15 {
  fill: hsl(88 45% 52%)
}

.type-stroke-15 {
  stroke: hsl(88 45% 52%)
}

.type-color-16 {
  background: hsl(225 52% 37%)
}

.type-fill-16 {
  fill: hsl(225 52% 37%)
}

.type-stroke-16 {
  stroke: hsl(225 52% 37%)
}

.type-color-17 {
  background: hsl(3 38% 42%)
}

.type-fill-17 {
  fill: hsl(3 38% 42%)
}

.type-stroke-17 {
  stroke: hsl(3 38% 42%)
}

.type-color-18 {
  background: hsl(140 45% 47%)
}

.type-fill-18 {
  fill: hsl(140 45% 47%)
}

.type-stroke-18 {
  stroke: hsl(140 45% 47%)
}

.type-color-19 {
  background: hsl(278 52% 52%)
}

.type-fill-19 {
  fill: hsl(278 52% 52%)
}

.type-stroke-19 {
  stroke: hsl(278 52% 52%)
}

.type-color-20 {
  background: hsl(55 38% 37%)
}

.type-fill-20 {
  fill: hsl(55 38% 37%)
}

.type-stroke-20 {
  stroke: hsl(55 38% 37%)
}

.type-color-21 {
  background: hsl(193 45% 42%)
}

.type-fill-21 {
  fill: hsl(193 45% 42%)
}

.type-stroke-21 {
  stroke: hsl(193 45% 42%)
}

.type-color-22 {
  background: hsl(330 52% 47%)
}

.type-fill-22 {
  fill: hsl(330 52% 47%)
}

.type-stroke-22 {
  stroke: hsl(330 52% 47%)
}

.type-color-23 {
  background: hsl(108 38% 52%)
}

.type-fill-23 {
  fill: hsl(108 38% 52%)
}

.type-stroke-23 {
  stroke: hsl(108 38% 52%)
}

.type-color-24 {
  background: hsl(245 45% 37%)
}

.type-fill-24 {
  fill: hsl(245 45% 37%)
}

.type-stroke-24 {
  stroke: hsl(245 45% 37%)
}

.type-color-25 {
  background: hsl(23 52% 42%)
}

.type-fill-25 {
  fill: hsl(23 52% 42%)
}

.type-stroke-25 {
  stroke: hsl(23 52% 42%)
}

.type-color-26 {
  background: hsl(160 38% 47%)
}

.type-fill-26 {
  fill: hsl(160 38% 47%)
}

.type-stroke-26 {
  stroke: hsl(160 38% 47%)
}

.type-color-27 {
  background: hsl(298 45% 52%)
}

.type-fill-27 {
  fill: hsl(298 45% 52%)
}

.type-stroke-27 {
  stroke: hsl(298 45% 52%)
}

.type-color-28 {
  background: hsl(75 52% 37%)
}

.type-fill-28 {
  fill: hsl(75 52% 37%)
}

.type-stroke-28 {
  stroke: hsl(75 52% 37%)
}

.type-color-29 {
  background: hsl(213 38% 42%)
}

.type-fill-29 {
  fill: hsl(213 38% 42%)
}

.type-stroke-29 {
  stroke: hsl(213 38% 42%)
}

.type-color-30 {
  background: hsl(350 45% 47%)
}

.type-fill-30 {
  fill: hsl(350 45% 47%)
}

.type-stroke-30 {
  stroke: hsl(350 45% 47%)
}

.type-color-31 {
  background: hsl(128 52% 52%)
}

.type-fill-31 {
  fill: hsl(128 52% 52%)
}

.type-stroke-31 {
  stroke: hsl(128 52% 52%)
}

.type-charts {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px
}

.type-chart h3 {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
  color: var(--heading)
}

.type-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 335px
}

.type-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px
}

.type-chart-heading>span {
  font-size: 11px;
  color: var(--muted)
}

.type-chart>.type-foot {
  margin: 14px 0 0;
  font-size: 11px
}

.type-sales-heading strong {
  color: var(--heading);
  font-size: 16px;
  margin: 0 4px;
  font-variant-numeric: tabular-nums
}

.type-bars {
  max-height: 430px;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 3px;
  min-height: 160px
}

.type-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 48px;
  gap: 9px 10px;
  align-items: center;
  width: 100%;
  padding: 12px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  color: var(--text);
  font-size: 12px
}

.type-bar-name {
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
  line-height: 1.6
}

.type-bar strong {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.type-bar-share {
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums
}

.type-bar svg {
  grid-column: 1/-1;
  width: 100%;
  height: 8px;
  display: block
}

.type-bar:hover,
.type-legend-row:hover {
  background: var(--canvas)
}

.type-bar.is-selected,
.type-legend-row.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent)
}

.type-track {
  fill: var(--canvas)
}

.type-sales-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--canvas);
  min-height: 64px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8
}

.type-sales-detail p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px
}

.type-sales-detail strong {
  color: var(--heading)
}

.type-pie-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1;
  min-width: 0
}

.type-pie-layout>svg {
  width: 180px;
  height: 180px;
  flex: 0 0 180px;
  max-width: 100%
}

.type-pie-layout circle.is-muted {
  opacity: .28
}

.type-pie-layout circle.is-selected {
  stroke-width: 28
}

.type-color-remainder {
  background: #a69d91
}

.type-stroke-remainder {
  stroke: #a69d91
}

.type-pie-label {
  fill: var(--heading);
  font: 600 16px var(--font)
}

.type-pie-caption {
  fill: var(--muted);
  font: 11px var(--font)
}

.type-legend {
  flex: 1;
  min-width: 180px;
  padding: 2px
}

.type-legend-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 4px 8px;
  width: 100%;
  min-height: 42px;
  padding: 9px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  text-align: left;
  align-items: center;
  font-size: 12px
}

.type-legend-row>span {
  overflow-wrap: anywhere
}

.type-legend-row strong {
  font-size: 12px;
  color: var(--heading);
  font-weight: 600
}

.type-new-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin: 0 0 18px
}

.type-new-toolbar p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
  margin: 0
}

.type-new-toolbar label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  max-width: 100%
}

.type-new-toolbar select {
  font-size: 12px;
  max-width: 100%;
  min-width: 0;
  width: 230px
}

.type-new-table {
  max-height: 526px;
  overflow: auto;
  scrollbar-gutter: stable
}

.type-new-table table {
  min-width: 920px;
  width: 100%
}

.type-new-table th,
.type-new-table td {
  padding: 12px 14px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  text-align: left
}

.type-new-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  font-size: 12px;
  white-space: nowrap
}

.type-new-table tbody th {
  width: 26%;
  min-width: 200px;
  font-weight: 400
}

.type-new-table tbody tr {
  cursor: pointer
}

.type-new-table tbody tr:hover,
.type-new-table tbody tr.is-selected {
  background: var(--accent-soft)
}

.type-new-table td {
  white-space: nowrap
}

.type-new-table small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
  margin-top: 5px
}

.type-new-name {
  gap: 12px;
  width: 100%;
  min-width: 0
}

.type-new-name .type-mini-image {
  width: 44px;
  height: 44px;
  flex: 0 0 44px
}

.type-new-name>span:last-child {
  min-width: 0;
  overflow-wrap: anywhere
}

.type-new-name small {
  font-size: 10px;
  color: var(--accent-text)
}

.type-new-ratio {
  max-width: 120px;
  min-width: 80px
}

.type-new-ratio strong {
  font-size: 14px;
  color: var(--heading);
  font-weight: 650
}

.type-new-ratio svg {
  width: 100%;
  height: 5px;
  display: block;
  margin-top: 7px
}

.type-new-charts .overview-card {
  min-width: 0
}

.type-new-product {
  min-width: 0
}

.type-new-product>p {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 10px
}

@media(max-width:700px) {
  .type-new-toolbar {
    align-items: stretch;
    gap: 12px
  }

  .type-new-toolbar label {
    width: 100%
  }

  .type-new-toolbar select {
    flex: 1;
    width: auto
  }

  .type-new-table {
    max-height: 610px;
    border: 0
  }

  .type-new-table table,
  .type-new-table tbody {
    display: block;
    min-width: 0
  }

  .type-new-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%)
  }

  .type-new-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 14px;
    border: 1px solid var(--divider);
    border-radius: 12px;
    margin-bottom: 12px
  }

  .type-new-table tbody th {
    grid-column: 1/-1;
    width: auto;
    min-width: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--divider)
  }

  .type-new-table td {
    display: block;
    padding: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    border: 0;
    min-width: 0
  }

  .type-new-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 6px
  }

  .type-new-table .type-new-ratio {
    min-width: 0;
    max-width: 100%
  }

  .type-new-name {
    padding: 0
  }

  .type-new-table small {
    font-size: 10px
  }

  .type-new-charts {
    grid-template-columns: minmax(0, 1fr)
  }
}

.type-group-select {
  display: none;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  max-width: 100%;
  margin-bottom: 18px
}

.type-group-select>span {
  white-space: nowrap
}

.type-group-select select {
  max-width: 300px;
  min-width: 0
}

.type-top-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 22px
}

.type-top-nav {
  border-right: 1px solid var(--divider);
  padding-right: 14px;
  min-width: 0
}

.type-top-nav>span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  padding: 5px 8px 14px
}

.type-top-nav>div {
  max-height: 470px;
  overflow: auto;
  padding: 3px;
  scrollbar-gutter: stable
}

.type-top-nav button {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  width: 100%;
  padding: 10px 8px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5
}

.type-top-nav button span {
  overflow-wrap: anywhere
}

.type-top-nav button strong {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums
}

.type-top-nav button:hover {
  background: var(--canvas)
}

.type-top-nav button.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text)
}

.type-top-main {
  min-width: 0
}

.type-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px
}

.type-product {
  padding: 16px;
  min-width: 0;
  background: var(--paper)
}

.type-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px
}

.type-product-main {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 104px
}

.type-top-grid .type-product-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px
}

.type-top-grid .type-product-image img {
  height: 166px
}

.type-top-grid .product-title {
  min-height: 64px
}

.type-product .type-product-main .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.65;
  font-size: 13px;
  min-height: 64px;
  overflow-wrap: anywhere;
  color: var(--heading)
}

.type-product-image,
.type-edit-image {
  display: grid;
  place-items: center;
  background: var(--canvas);
  border-radius: 10px;
  min-height: 90px;
  overflow: hidden
}

.type-product-image img,
.type-edit-image img {
  width: 100%;
  height: 94px;
  object-fit: contain;
  background: #fff
}

.type-product-image>[hidden],
.type-edit-image>[hidden],
.type-dialog [data-type-error][hidden] {
  display: none
}

.type-product-image .product-image-empty,
.type-edit-image .product-image-empty {
  font-size: 11px;
  line-height: 1.5;
  padding: 10px;
  text-align: center;
  color: var(--muted)
}

.type-asin {
  display: block;
  font-size: 10px;
  margin-top: 8px;
  color: var(--muted);
  overflow-wrap: anywhere
}

.type-product-basics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 11px;
  color: var(--muted)
}

.type-product-basics strong {
  font-size: 14px;
  color: var(--heading);
  font-variant-numeric: tabular-nums
}

.type-product-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  margin: 12px 0 0
}

.type-product-values dt {
  font-size: 10px;
  color: var(--muted);
  margin: 0 0 6px
}

.type-product-values dd {
  font-size: 13px;
  font-weight: 650;
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums
}

.type-footer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px
}

.type-dialog.dialog--drawer {
  width: min(1080px, calc(100vw - 24px));
  max-width: 1080px
}

.type-manage-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 20px
}

.type-manage-heading p {
  font-size: 13px;
  line-height: 1.8;
  max-width: 480px;
  color: var(--muted)
}

.type-manage-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 12px;
  margin: 16px 0
}

.type-batch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: 12px;
  margin-bottom: 14px;
  font-size: 12px
}

.type-batch select {
  max-width: 240px;
  min-width: 140px
}

.type-batch label {
  display: flex;
  align-items: center;
  gap: 6px
}

.type-manage-scroll {
  max-height: 58vh;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain
}

.type-edit-row {
  display: grid;
  grid-template-columns: 20px 74px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--divider);
  padding: 18px 4px
}

.type-edit-image {
  min-height: 78px
}

.type-edit-image img {
  height: 80px
}

.type-edit-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.type-edit-identity>strong {
  font-size: 12px;
  line-height: 1.7;
  color: var(--heading);
  overflow-wrap: anywhere
}

.type-edit-identity>span,
.type-edit-identity>small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  overflow-wrap: anywhere
}

.type-edit-identity>label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  margin-top: 6px
}

.type-edit-identity select {
  max-width: 260px;
  min-width: 0;
  width: 100%
}

.type-definition {
  border: 1px solid var(--divider);
  border-radius: 12px;
  margin: 20px 0;
  padding: 18px;
  background: var(--paper)
}

.type-definition legend {
  font-size: 13px;
  font-weight: 650;
  padding: 0 8px
}

.type-definition small {
  font-size: 11px;
  color: var(--muted);
  margin-left: 14px
}

.type-definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.type-definition .field {
  min-width: 0;
  margin: 0
}

.type-definition .field input,
.type-definition .field select {
  width: 100%;
  min-width: 0
}

.type-definition textarea {
  min-height: 70px;
  resize: vertical
}

.type-definition-wide {
  grid-column: 1/-1
}

.type-definition>label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 14px
}

[data-standard-next] {
  margin-top: 18px
}

.type-history article {
  padding: 18px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 13px
}

.type-history p {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
  line-height: 1.8
}

.type-history ul {
  padding-left: 18px;
  font-size: 12px;
  line-height: 2
}

.type-all-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-height: 75vh;
  overflow: auto;
  padding: 4px
}

@media(max-width:1200px) {
  .type-top-nav {
    display: none
  }

  .type-top-layout {
    grid-template-columns: minmax(0, 1fr)
  }

  .type-group-select {
    display: flex
  }

  .type-pie-layout {
    gap: 10px
  }
}

@media(max-width:950px) {
  .type-charts {
    grid-template-columns: minmax(0, 1fr)
  }

  .type-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:700px) {
  .type-summary {
    gap: 10px 18px;
    padding: 12px
  }

  .type-summary strong {
    font-size: 20px
  }

  .type-summary>span {
    font-size: 12px
  }

  .type-summary .type-complete,
  .type-summary>.button {
    margin-left: 0
  }

  .type-top-grid,
  .type-all-products {
    grid-template-columns: 1fr
  }

  .type-group-select {
    align-items: flex-start;
    flex-direction: column;
    width: 100%
  }

  .type-group-select select {
    max-width: 100%;
    width: 100%
  }

  .type-sales-heading strong {
    font-size: 14px
  }

  .type-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px
  }

  .type-bar-share {
    grid-row: 2;
    grid-column: 2
  }

  .type-bar svg {
    grid-row: 2;
    grid-column: 1
  }

  .type-bars {
    max-height: 420px
  }

  .type-pie-layout {
    gap: 18px
  }

  .type-pie-layout>svg {
    width: 148px;
    height: 148px;
    flex-basis: 148px
  }

  .type-sales-detail {
    padding: 12px
  }

  .type-sales-detail p {
    gap: 4px
  }

  .type-top-grid .type-product-main {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px
  }

  .type-top-grid .type-product-image img {
    height: 130px
  }

  .type-top-grid .product-title {
    min-height: 0
  }

  .type-manage-tools {
    grid-template-columns: minmax(0, 1fr) 105px
  }

  .type-edit-row {
    grid-template-columns: 18px 58px minmax(0, 1fr);
    gap: 9px
  }

  .type-edit-row>.button {
    grid-column: 3;
    justify-self: end
  }

  .type-edit-identity>label {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px
  }

  .type-definition-grid {
    grid-template-columns: 1fr
  }

  .type-definition-wide {
    grid-column: auto
  }

  .type-batch select {
    max-width: 100%
  }

  .type-batch {
    padding: 10px
  }

  .type-manage-scroll {
    max-height: 52vh
  }

  .type-definition {
    padding: 12px
  }
}

.category-overview {
  scroll-margin-top: 94px;
  overflow: hidden;
  background: var(--paper)
}

.category-overview[hidden] {
  display: none
}

.overview-heading {
  align-items: center;
  padding-bottom: 14px
}

.overview-heading p {
  overflow-wrap: anywhere
}

.overview-snapshot-badge {
  flex-shrink: 0;
  white-space: nowrap
}

.overview-scope {
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
  margin: 0 24px 18px;
  font-size: 12px;
  color: var(--muted)
}

.overview-applied-status {
  color: var(--accent-text)
}

.overview-tabs {
  display: flex;
  position: relative;
  gap: 12px;
  margin: 0 24px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--divider);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  isolation: isolate
}

.overview-tabs>[role=tab] {
  position: relative;
  flex: 0 0 auto;
  min-height: 52px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 18px 15px;
  white-space: nowrap
}

.overview-tabs>[role=tab]:hover {
  background: var(--canvas);
  color: var(--heading)
}

.overview-tabs>[role=tab][aria-selected=true] {
  color: var(--accent-text);
  background: linear-gradient(0deg, var(--accent-soft), transparent 85%)
}

.overview-tabs>[role=tab]:focus-visible {
  outline-offset: -4px
}

.overview-tabs.page-design-tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  gap: 8px;
}

.page-design-switcher {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--divider);
}

.page-design-switcher .page-design-tabs {
  border-bottom: 0;
}

.page-design-actions {
  flex: 0 0 auto;
  padding: 0 0 7px;
}

.page-design-actions .button {
  min-height: 38px;
  white-space: nowrap;
}

.page-design-actions [data-full-research-export]:disabled {
  border-color: #C8C1B9 !important;
  background: #E2DCD5 !important;
  color: #596372 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.page-design-tabs>[role=tab] {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.page-design-tabs>[role=tab][aria-selected=true] {
  box-shadow: inset 0 -3px var(--accent);
}

#page-design-content {
  min-width: 0;
}

@media (max-width: 600px) {
  .page-design-switcher {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
  }

  .page-design-switcher .page-design-tabs,
  .page-design-actions {
    flex-basis: 100%;
  }

  .page-design-actions {
    padding-bottom: 12px;
  }

  .page-design-actions .button {
    width: 100%;
  }

  .overview-tabs.page-design-tabs>[role=tab] {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 13px;
  }
}

.overview-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  pointer-events: none;
  transition: transform 180ms ease, width 180ms ease
}

.overview-load-status {
  margin: 18px 24px 0;
  border: 1px solid var(--divider);
  background: var(--canvas);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px
}

.overview-load-status[hidden],
.overview-content>[hidden] {
  display: none
}

.overview-content {
  padding: 24px;
  min-height: 480px
}

.overview-content>[role=tabpanel]:focus-visible {
  outline-offset: 8px
}

.overview-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap
}

.overview-section-heading h3 {
  font-size: 16px;
  color: var(--heading);
  margin: 0 0 6px;
  font-weight: 650
}

.overview-section-heading p {
  font-size: 12px;
  line-height: 1.6
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px
}

.low-review-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px
}

.low-review-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 12px
}

.low-review-card {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.low-review-value {
  color: var(--heading);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere
}

.low-review-note {
  font-size: 12px;
  line-height: 1.7;
  min-height: 21px;
  margin: 0;
  color: var(--muted)
}

.low-review-card .overview-card-foot {
  margin-top: auto
}

.low-review-chart {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px
}

.low-review-chart .overview-ring {
  width: 124px;
  height: 124px;
  max-width: 100%
}

.low-review-chart .overview-ring-value {
  font-size: 23px
}

.low-review-legend {
  display: grid;
  gap: 4px;
  min-width: 0
}

.low-review-legend button {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 5px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 5px;
  font: 11px var(--font);
  color: var(--muted);
  cursor: pointer
}

.low-review-legend button[aria-pressed=true] {
  background: var(--canvas);
  border-color: var(--divider)
}

.low-review-legend button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

.low-review-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent)
}

.low-review-legend .overview-color-1 {
  background: var(--success)
}

.low-review-legend .overview-color-unknown {
  background: #B4B4AD
}

.low-review-legend button>span {
  overflow-wrap: anywhere
}

.low-review-legend button>span:last-of-type {
  text-align: right;
  font-variant-numeric: tabular-nums
}

.low-review-legend strong {
  grid-column: 2/4;
  color: var(--heading);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere
}

.low-review-readout {
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  margin: 3px 0;
  min-height: 38px;
  overflow-wrap: anywhere
}

.low-review-chart .overview-ring-arc {
  cursor: pointer
}

.low-review-chart .overview-ring-arc.is-active {
  stroke-width: 17
}

.low-review-products {
  max-height: 67dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 2px 6px 2px 2px
}

.low-review-products:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

.low-review-product {
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--paper)
}

.low-review-product-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted)
}

.low-review-product-heading strong {
  color: var(--accent-ink)
}

.low-review-product .product-identity {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0
}

.low-review-product .product-table-image {
  min-width: 64px;
  overflow: hidden
}

.low-review-product [hidden] {
  display: none
}

.low-review-product .product-title {
  overflow-wrap: anywhere
}

.low-review-product-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 14px 0 0;
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  font-size: 12px
}

.low-review-product-metrics dt {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 3px
}

.low-review-product-metrics dd {
  margin: 0;
  color: var(--heading);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere
}

@media(max-width:1550px) and (min-width:1101px) {
  .low-review-chart {
    grid-template-columns: minmax(0, 1fr)
  }

  .low-review-chart .overview-ring {
    justify-self: center
  }

  .low-review-readout {
    min-height: 19px
  }
}

@media(max-width:1100px) {
  .low-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .low-review-grid>.low-review-card:last-child {
    grid-column: 1/-1
  }

  .low-review-grid>.low-review-card:last-child .low-review-chart {
    max-width: 500px
  }
}

@media(max-width:800px) {
  .overview-grid.low-review-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .low-review-grid>.low-review-card:last-child {
    grid-column: auto
  }
}

.overview-card {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 2px 5px #5D442405
}

.overview-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  font-size: 13px;
  flex-wrap: wrap
}

.overview-card-label h4 {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
  color: var(--heading)
}

.overview-card-label>.muted {
  font-size: 12px
}

.overview-kpi {
  min-height: 248px;
  display: flex;
  flex-direction: column
}

.overview-kpi-symbol {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 21px
}

.overview-kpi-value {
  font-size: clamp(25px, 2.4vw, 38px);
  line-height: 1.4;
  margin: 22px 0 12px;
  font-weight: 650;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  letter-spacing: -.6px
}

.overview-kpi-value small {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 10px;
  color: var(--muted)
}

.overview-kpi p {
  font-size: 12px;
  margin: 0 0 14px
}

.overview-kpi-note {
  display: block;
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  margin-top: auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7
}

.overview-details {
  border-top: 1px solid var(--divider);
  margin-top: 24px;
  padding-top: 14px;
  font-size: 12px
}

.overview-details summary {
  min-height: 30px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted)
}

.overview-details>div {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  max-width: 980px
}

.overview-details p {
  line-height: 1.8;
  margin: 0
}

.overview-details ul {
  padding-left: 20px;
  line-height: 2
}

.overview-new-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted)
}

.overview-new-selector .button {
  padding: 7px 12px;
  min-height: 34px
}

.overview-ring-layout {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 210px;
  padding: 8px 0
}

.overview-ring {
  display: block;
  width: 170px;
  height: 170px;
  flex: 0 0 170px;
  overflow: visible
}

.overview-ring-track {
  stroke: var(--canvas)
}

.overview-ring-value {
  font: 650 25px var(--font);
  fill: var(--heading);
  font-variant-numeric: tabular-nums
}

.overview-ring-caption {
  font: 11px var(--font);
  fill: var(--muted)
}

.overview-ring-arc.overview-color-0 {
  stroke: var(--accent)
}

.overview-ring-arc.overview-color-1 {
  stroke: var(--success)
}

.overview-ring-arc.overview-color-2 {
  stroke: #68839C
}

.overview-ring-arc.overview-color-3 {
  stroke: #AF9272
}

.overview-ring-arc.overview-color-4 {
  stroke: #9987AA
}

.overview-ring-arc.overview-color-5 {
  stroke: #A8B8A3
}

.overview-ring-arc.overview-color-unknown {
  stroke: #B4B4AD
}

.overview-ring-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  flex: 1;
  min-width: 0;
  font-size: 12px
}

.overview-ring-legend li {
  display: grid;
  grid-template-columns: 8px minmax(48px, 1fr) auto minmax(42px, auto);
  gap: 7px;
  align-items: center;
  color: var(--muted)
}

.overview-ring-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%
}

.overview-ring-legend .overview-color-0 {
  background: var(--accent)
}

.overview-ring-legend .overview-color-1 {
  background: var(--success)
}

.overview-ring-legend .overview-color-2 {
  background: #68839C
}

.overview-ring-legend .overview-color-3 {
  background: #AF9272
}

.overview-ring-legend .overview-color-4 {
  background: #9987AA
}

.overview-ring-legend .overview-color-5 {
  background: #A8B8A3
}

.overview-ring-legend .overview-color-unknown {
  background: #B4B4AD
}

.overview-ring-legend li>span:first-of-type {
  overflow-wrap: anywhere
}

.overview-ring-legend li>span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums
}

.overview-ring-legend strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
  white-space: nowrap
}

.overview-ring-legend small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 3px
}

.overview-ring-layout--money .overview-ring-legend li {
  grid-template-columns: 8px minmax(0, 1fr) auto
}

.overview-ring-layout--money .overview-ring-legend strong {
  grid-column: 2/4;
  grid-row: 2;
  white-space: normal;
  overflow-wrap: anywhere
}

.overview-ring-layout--money .overview-ring-legend li>span:last-child {
  grid-column: 3;
  grid-row: 1
}

.overview-card-foot {
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.7
}

.overview-unavailable {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 20px 18px
}

.overview-empty-icon {
  font-size: 32px;
  line-height: 1.2;
  color: var(--subtle)
}

.overview-unavailable p {
  font-size: 13px;
  line-height: 1.9;
  max-width: 350px
}

.overview-distribution .trend-ranges {
  padding: 3px;
  gap: 2px
}

.overview-distribution .trend-ranges .button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px
}

.overview-chart-unit {
  font-size: 11px;
  margin: 14px 0 0;
  color: var(--muted)
}

.overview-bars svg {
  display: block;
  width: 100%;
  height: 320px
}

.overview-bars text {
  font: 11px var(--font);
  fill: var(--muted)
}

.overview-bar-axis {
  stroke: var(--divider);
  stroke-width: 1
}

.overview-bar-track {
  fill: var(--canvas)
}

.overview-bar-fill {
  fill: var(--accent);
  fill-opacity: .72
}

.overview-bar-point {
  cursor: pointer;
  outline: 0
}

.overview-bar-hit {
  fill: transparent
}

.overview-bar-point.is-active .overview-bar-fill {
  fill-opacity: 1
}

.overview-bar-point:focus-visible .overview-bar-hit {
  stroke: var(--accent-text);
  stroke-width: 2
}

.overview-bar-number {
  font-variant-numeric: tabular-nums;
  fill: var(--heading)
}

.overview-chart-readout {
  font-size: 12px;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--canvas);
  color: var(--heading);
  line-height: 1.6;
  overflow-wrap: anywhere
}

.overview-distribution-hint {
  margin-top: 14px
}

#overview-panel-monthly .panel-heading {
  padding: 0 0 16px
}

#overview-panel-monthly .panel-heading h3 {
  font-size: 16px;
  margin: 0 0 6px
}

#overview-panel-monthly .panel-heading p {
  font-size: 12px
}

#overview-panel-monthly .panel-body {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0
}

@media(max-width:1350px) {
  .overview-ring-layout {
    gap: 6px
  }

  .overview-ring {
    width: 140px;
    height: 140px;
    flex-basis: 140px
  }

  .overview-card {
    padding: 18px
  }
}

@media(max-width:800px) {
  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px
  }

  .overview-card {
    padding: 20px
  }

  .overview-ring-layout {
    gap: 24px
  }

  .overview-ring {
    width: 160px;
    height: 160px;
    flex-basis: 160px
  }

  .overview-kpi {
    min-height: 224px
  }

  .overview-tabs {
    gap: 6px
  }

  .overview-tabs>[role=tab] {
    font-size: 13px;
    padding-inline: 14px
  }
}

@media(max-width:520px) {
  .overview-heading {
    align-items: start;
    gap: 12px;
    flex-wrap: wrap
  }

  .overview-scope {
    margin: 0 16px 12px;
    gap: 5px;
    font-size: 11px;
    flex-direction: column
  }

  .overview-tabs {
    margin: 0 16px;
    gap: 2px
  }

  .overview-content {
    padding: 20px 16px;
    min-height: 460px
  }

  .overview-card {
    padding: 14px
  }

  .overview-section-heading {
    gap: 12px;
    margin-bottom: 16px
  }

  .overview-new-selector {
    align-items: start;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0
  }

  .overview-new-selector .trend-ranges {
    width: 100%
  }

  .overview-new-selector .button {
    flex: 1;
    padding: 7px 9px
  }

  .overview-ring-layout {
    min-height: 205px;
    gap: 8px
  }

  .overview-ring {
    width: 124px;
    height: 124px;
    flex-basis: 124px
  }

  .overview-ring-legend li {
    gap: 5px;
    grid-template-columns: 7px minmax(30px, 1fr) auto
  }

  .overview-ring-legend li>span:last-child {
    grid-column: 2/4;
    text-align: left;
    font-size: 11px
  }

  .overview-ring-legend {
    gap: 10px
  }

  .overview-kpi-value {
    font-size: 28px
  }

  .overview-load-status {
    margin: 16px 16px 0
  }

  .overview-kpi .badge {
    font-size: 10px
  }

  .overview-card-label {
    gap: 8px
  }
}

@media(max-width:520px) {
  .overview-section-heading {
    flex-direction: column;
    align-items: stretch
  }

  .overview-new-selector {
    flex: auto;
    width: 100%
  }

  .overview-section-heading>.badge {
    align-self: flex-start
  }
}

@media(prefers-reduced-motion:reduce) {
  .overview-tab-indicator {
    transition: none
  }
}

.trend-heading {
  align-items: center
}

.trend-heading p {
  overflow-wrap: anywhere;
  max-width: 900px
}

.trend-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--accent-text);
  font-weight: 650;
  margin-bottom: 5px
}

.trend-body {
  padding-top: 0
}

.trend-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap
}

.trend-legend {
  display: flex;
  gap: 24px;
  color: var(--ink);
  font-size: 13px
}

.trend-legend>span {
  display: flex;
  align-items: center;
  gap: 8px
}

.trend-legend i {
  display: inline-block;
  flex-shrink: 0
}

.trend-legend-bar {
  width: 10px;
  height: 14px;
  background: var(--accent);
  border-radius: 3px
}

.trend-legend-line {
  width: 20px;
  height: 3px;
  background: var(--success);
  border-radius: 3px;
  position: relative
}

.trend-legend-line:after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--success);
  border: 1px solid var(--paper);
  border-radius: 50%;
  left: 7px;
  top: -2px
}

.trend-ranges {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: 12px
}

.trend-ranges .button {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  white-space: nowrap
}

.trend-ranges .button[aria-pressed=true] {
  color: var(--accent-text);
  background: var(--paper);
  border-color: #F3C9AA
}

.trend-scope {
  font-size: 12px;
  margin: 16px 0 8px
}

.trend-chart {
  position: relative;
  width: 100%;
  min-width: 0;
  background: var(--paper);
  margin: 10px 0 0
}

.trend-tooltip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 8px;
  min-width: 210px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 138, 47, .26);
  border-radius: 12px;
  background: rgba(255, 253, 249, .96);
  box-shadow: 0 14px 34px rgba(69, 48, 30, .16);
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transform: translateX(-50%);
  backdrop-filter: blur(14px)
}

.trend-tooltip[hidden] {
  display: none
}

.trend-tooltip--left {
  transform: translateX(-100%)
}

.trend-tooltip--right {
  transform: none
}

.trend-tooltip strong,
.trend-tooltip span {
  display: flex;
  align-items: center
}

.trend-tooltip strong {
  justify-content: space-between;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--divider);
  color: var(--heading);
  font-size: 14px
}

.trend-tooltip strong small {
  margin-left: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400
}

.trend-tooltip span i {
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--accent)
}

.trend-tooltip span i.trend-tooltip-revenue {
  border-radius: 50%;
  background: var(--success)
}

.trend-tooltip span b {
  margin-left: auto;
  padding-left: 18px;
  color: var(--heading);
  font-size: 13px
}

.trend-tooltip span small {
  width: 28px;
  margin-left: 5px;
  color: var(--muted);
  font-size: 10px
}

.trend-chart svg {
  width: 100%;
  height: 340px;
  overflow: visible
}

.trend-chart text {
  font: 12px var(--font);
  fill: var(--muted)
}

.trend-chart .trend-axis-title {
  font-size: 11px;
  fill: var(--heading)
}

.trend-grid line {
  stroke: var(--divider);
  stroke-dasharray: 3 5;
  stroke-width: 1
}

.trend-bar {
  fill: var(--accent);
  fill-opacity: .75
}

.trend-line {
  stroke: var(--success);
  fill: none;
  stroke-width: 2.3;
  stroke-linejoin: round;
  pointer-events: none
}

.trend-dot {
  fill: var(--paper);
  stroke: var(--success);
  stroke-width: 2;
  pointer-events: none
}

.trend-hit {
  fill: transparent
}

.trend-guide {
  stroke: var(--subtle);
  stroke-dasharray: 4 4;
  opacity: 0;
  pointer-events: none
}

.trend-point {
  cursor: pointer;
  outline: none
}

.trend-point.is-active .trend-bar {
  fill-opacity: 1
}

.trend-point.is-active .trend-guide {
  opacity: .6
}

.trend-point:focus-visible .trend-hit {
  stroke: var(--accent-text);
  stroke-width: 2;
  rx: 4
}

.trend-point:focus-visible .trend-bar {
  fill-opacity: 1
}

.trend-readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: 12px;
  min-height: 54px;
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted)
}

.trend-readout strong {
  font-size: 14px;
  color: var(--heading)
}

.trend-readout b {
  font-size: 15px;
  color: var(--heading);
  margin-left: 7px;
  font-weight: 650
}

.trend-readout small {
  font-size: 11px;
  margin-left: 6px;
  font-weight: 400;
  color: var(--muted)
}

.trend-notice {
  margin-top: 14px;
  font-size: 12px
}

.trend-details {
  border-top: 1px solid var(--divider);
  margin-top: 20px;
  padding-top: 12px
}

.trend-details summary {
  cursor: pointer;
  min-height: 36px;
  color: var(--heading);
  font-size: 13px;
  font-weight: 600
}

.trend-details summary span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 12px;
  display: inline-block
}

.trend-provenance {
  display: grid;
  gap: 8px;
  font-size: 12px;
  margin: 8px 0 16px;
  max-width: 960px
}

.trend-table {
  max-height: 360px;
  overscroll-behavior: contain
}

.trend-table table {
  min-width: 520px;
  font-variant-numeric: tabular-nums
}

.trend-table th {
  position: sticky;
  top: 0;
  background: var(--paper)
}

.trend-table th:nth-child(2),
.trend-table th:nth-child(3),
.trend-table td:nth-child(2),
.trend-table td:nth-child(3) {
  text-align: right
}

.trend-empty {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 0;
  padding-bottom: 28px;
  min-height: 110px
}

.trend-empty-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid var(--divider);
  background: var(--canvas);
  border-radius: 12px;
  font-size: 28px;
  color: var(--subtle)
}

.trend-empty h3 {
  font-size: 14px;
  margin-bottom: 6px
}

.trend-empty p {
  font-size: 13px;
  max-width: 740px
}

@media(max-width:650px) {
  .trend-heading {
    gap: 10px;
    align-items: start
  }

  .trend-heading .badge {
    white-space: nowrap
  }

  .trend-toolbar {
    gap: 14px
  }

  .trend-ranges {
    width: 100%
  }

  .trend-ranges .button {
    flex: 1;
    padding: 7px 8px
  }

  .trend-legend {
    gap: 22px
  }

  .trend-readout {
    gap: 8px 16px;
    justify-content: start;
    padding: 12px
  }

  .trend-readout>strong {
    flex-basis: 100%
  }

  .trend-readout>span {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap
  }

  .trend-readout b {
    font-size: 14px
  }

  .trend-readout small {
    margin-left: 4px
  }

  .trend-details summary span {
    display: block;
    margin: 4px 0 8px
  }

  .trend-empty {
    align-items: start
  }

  .trend-heading p {
    font-size: 12px
  }
}

:root {
  --canvas: #FAFDFF;
  --paper: #FFFFFF;
  --cream: #E5F3FC;
  --sun: #D9EFFD;
  --ink: #252729;
  --heading: #172130;
  --muted: #596372;
  --subtle: #68717B;
  --accent: #FF7A1A;
  --accent-light: #FFA43A;
  --accent-hot: #FF6A0B;
  --accent-text: #AA4308;
  --accent-soft: #FFF0E2;
  --divider: #DDE8EF;
  --control-border: #7D8995;
  --success: #14795E;
  --success-bg: #E9F5EF;
  --danger: #B13B26;
  --danger-bg: #FFF0EA;
  --info: #315D91;
  --info-bg: #EAF2FE;
  --lilac-bg: #EEE9FA;
  --glass: rgba(255, 255, 255, .86);
  --readable: rgba(255, 255, 255, .97);
  --edge: rgba(255, 255, 255, .93);
  --shadow: 0 2px 3px #5D442407, 0 10px 26px #5D44240B;
  --raised: 0 2px 4px #5D442410, 0 18px 36px #5D442419;
  --radius: 18px;
  --control-radius: 12px;
  --sidebar: 232px;
  --motion: 150ms;
  --font: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* SellerSprite enrichment uses the same surface and control tokens. */
.seller-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 14px;
  margin-top: 12px;
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--paper)
}

.seller-strip-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  flex: 1;
  min-width: 220px;
  font-size: 12px;
  color: var(--muted)
}

.seller-strip-summary strong {
  color: var(--heading)
}

.seller-progress {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted)
}

.seller-progress .button {
  min-height: 30px
}

.seller-metrics {
  container: seller-metrics / inline-size;
  margin-top: 10px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--success-bg);
  padding: 9px 10px;
  color: var(--heading);
  font-variant-numeric: tabular-nums
}

.seller-metrics-label {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--success);
  font-weight: 650;
  margin-bottom: 7px
}

.seller-metrics dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(94px, 1fr);
  margin: 0;
  gap: 9px 6px
}

.seller-metrics dl>div {
  min-width: 0
}

.seller-metrics dl>div:nth-child(2n) {
  border-left: 1px solid var(--divider);
  padding-left: 6px
}

.seller-metrics dt {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
  overflow-wrap: anywhere
}

.seller-metrics dd {
  margin: 3px 0 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere
}

.seller-number {
  display: block;
  white-space: nowrap
}

.seller-retained {
  color: var(--accent-text);
  margin-left: 3px
}

.product-table .seller-metrics {
  min-width: 330px;
  margin: 0
}

.seller-identity dd {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 4px;
  font-size: 12px;
  min-height: 19.5px
}

.seller-country {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.seller-country.is-unknown,
.seller-identity-separator {
  color: var(--muted);
  font-weight: 400
}

.seller-identity-separator {
  display: none
}

.seller-type {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 3px;
  border: 1px solid var(--divider);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.4;
  background: var(--paper);
  color: var(--heading)
}

.seller-type.is-unknown {
  color: var(--muted);
  font-weight: 400
}

.seller-metrics--detail dl {
  grid-template-columns: minmax(0, 1fr)
}

.seller-metrics--detail dl>div {
  border-left: 0;
  padding-left: 0
}

@container seller-metrics (min-width:250px) {
  .seller-metrics:not(.seller-metrics--detail) dl {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(94px, 1fr)
  }

  .seller-metrics:not(.seller-metrics--detail) dl>div {
    border-left: 0;
    padding-left: 0
  }

  .seller-metrics:not(.seller-metrics--detail) dl>div:not(:nth-child(3n+1)) {
    border-left: 1px solid var(--divider);
    padding-left: 6px
  }
}

@container seller-metrics (min-width:320px) {
  .seller-metrics--detail dl {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .seller-metrics--detail dl>div:nth-child(2n) {
    border-left: 1px solid var(--divider);
    padding-left: 6px
  }
}

@container seller-metrics (min-width:480px) {
  .seller-metrics--detail dl {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .seller-metrics--detail dl>div {
    border-left: 0;
    padding-left: 0
  }

  .seller-metrics--detail dl>div:not(:nth-child(3n+1)) {
    border-left: 1px solid var(--divider);
    padding-left: 6px
  }
}

.seller-coverage {
  margin: 12px 0;
  border-top: 1px solid var(--divider);
  padding-top: 10px
}

.seller-coverage summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--heading);
  padding: 4px 0
}

.seller-coverage dl {
  margin: 8px 0;
  display: grid;
  gap: 0
}

.seller-coverage dl>div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 12px
}

.seller-coverage dt,
.seller-coverage dd {
  margin: 0
}

.seller-coverage dd span {
  display: block;
  color: var(--muted);
  margin-top: 3px
}

.seller-date-range {
  grid-column: 1/-1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end
}

.seller-date-range .field {
  max-width: 220px;
  flex: 1;
  min-width: 160px
}

.seller-history-row {
  display: grid;
  gap: 5px;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider)
}

.seller-history-row>span {
  color: var(--muted);
  font-size: 12px
}

.seller-verification {
  display: flex;
  gap: 12px;
  align-items: end;
  margin-top: 20px;
  flex-wrap: wrap
}

.seller-verification>.field {
  flex: 1;
  min-width: 240px;
  max-width: 700px
}

#seller-admin .panel-body>.button-row {
  margin-top: 16px
}

@media(max-width:650px) {
  .seller-strip {
    padding: 12px
  }

  .seller-strip>.button-row {
    width: 100%
  }

  .seller-verification>.field {
    min-width: 0;
    width: 100%;
    flex-basis: 100%
  }

  .seller-date-range .field {
    min-width: 125px
  }
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: radial-gradient(ellipse at 88% 0%, #EAF6FF55, transparent 48%), var(--canvas);
  color: var(--ink);
  font: 14px/1.65 var(--font);
  min-width: 320px
}

button,
input,
select,
textarea {
  font: inherit
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent
}

button {
  cursor: pointer
}

button:disabled {
  cursor: not-allowed;
  opacity: .5
}

button,
a,
input,
select,
textarea,
summary {
  outline-offset: 4px
}

:focus-visible {
  outline: 3px solid #95501D
}

button,
a {
  touch-action: manipulation
}

a {
  color: var(--accent-text);
  text-decoration: none
}

h1,
h2,
h3,
p {
  margin: 0
}

h1,
h2,
h3 {
  color: var(--heading);
  line-height: 1.35
}

h1 {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -.7px
}

h2 {
  font-size: 17px;
  font-weight: 700
}

h3 {
  font-size: 15px;
  font-weight: 650
}

p {
  color: var(--muted)
}

small {
  font-size: 12px
}

svg {
  display: block
}

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.muted {
  color: var(--muted)
}

.mono {
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--edge);
  box-shadow: inset 0 -1px 1px #94816B17, var(--shadow);
  border-radius: var(--radius)
}

.glass--readable {
  background: var(--readable);
  border-color: #E9E1D7
}

.glass--raised {
  box-shadow: inset 0 1px 0 #FFFFFF, var(--raised)
}

@supports(backdrop-filter:blur(10px)) {
  .glass:not(.glass--readable) {
    backdrop-filter: blur(10px)
  }
}

html[data-glass=off] .glass,
html[data-glass=off] .topbar,
html[data-glass=off] dialog {
  background: var(--paper);
  backdrop-filter: none;
  box-shadow: 0 2px 8px #5D442409
}

.button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--divider);
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
  padding: 9px 16px;
  border-radius: var(--control-radius);
  font-weight: 600;
  line-height: 1.4;
  transition: background var(--motion), box-shadow var(--motion), transform var(--motion)
}

.button:hover:not(:disabled),
.icon-button:hover:not(:disabled) {
  background: #F3EDE5
}

.button:active:not(:disabled),
.icon-button:active:not(:disabled) {
  transform: translateY(1px)
}

.button--primary {
  border-color: #F07926;
  color: #302013;
  background: linear-gradient(160deg, var(--accent-light) -35%, var(--accent) 65%, var(--accent-hot));
  box-shadow: inset 0 1px 1px #FFF8, 0 4px 10px #EC7A1E22
}

.button--primary:hover:not(:disabled) {
  background: linear-gradient(160deg, #FFB34B -35%, #FF8B2E 65%, #FF781B);
  box-shadow: inset 0 1px 1px #FFFA, 0 5px 12px #EC7A1E32
}

.button--quiet {
  border-color: transparent;
  background: transparent;
  box-shadow: none
}

.button--danger {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: #E8B7A6
}

.button--small {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 10px
}

.button-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.icon-button {
  width: 42px;
  padding: 8px;
  flex-shrink: 0;
  background: transparent;
  border-color: transparent;
  border-radius: 50%
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0
}

.brand-mark {
  display: block;
  width: 46px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}

.brand-text { min-width: 0; }
.brand-caption { white-space: nowrap; }
.auth-story > .brand .brand-mark { width: 68px; height: 62px; }
.auth-story > .brand .brand-name { font-size: 26px; }
.auth-story > .brand .brand-caption { font-size: 12px; }
.auth-brand-footer { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--divider); }
.auth-brand-footer > .brand { justify-content: center; }
.auth-brand-footer .brand-name { font-size: 16px; }
.auth-brand-footer .brand-caption { font-size: 9px; }
.workspace-brand .brand { justify-content: center; }
.workspace-brand .brand-name { font-size: 15px; }
.workspace-brand .brand-caption { font-size: 9px; }
.workspace-brand .brand-mark { width: 36px; height: 33px; }

.brand-name {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.5px
}

.brand-caption {
  display: block;
  font-size: 10px;
  letter-spacing: 0;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 2px
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  transition: grid-template-columns var(--motion) ease;
  margin: 18px;
  min-height: calc(100vh - 36px);
  border: 1px solid #FFF;
  border-radius: 26px;
  background: #FAFDFFEB;
  box-shadow: 0 10px 40px #6043260B
}

.app-shell[data-nav-state=hidden] {
  grid-template-columns: 0 minmax(0, 1fr)
}

.sidebar {
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  padding: 28px 18px 16px;
  border-right: 1px solid #DDECF7;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #EFF9FF, #E5F3FD);
  border-radius: 26px 0 0 26px;
  min-height: 0;
  min-width: 0;
  overflow: hidden
}

.sidebar[hidden] {
  display: none
}

.sidebar>.brand {
  margin: 0 10px 34px
}

.navigation {
  display: grid;
  gap: 12px;
  align-content: start
}

.nav-caption {
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--subtle);
  padding: 8px 12px;
  margin: 0
}

.nav-section-links {
  display: grid;
  gap: 4px
}

.nav-link {
  position: relative;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-height: 46px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap
}

.nav-link>.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0
}

.nav-group>summary>.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 1.75
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}

.nav-link:hover {
  background: #FFFFFF85;
  color: var(--ink)
}

.nav-link[aria-current=page] {
  color: var(--accent-text);
  font-weight: 650;
  background: var(--accent-soft)
}

.nav-link[aria-current=page]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent)
}

.nav-group {
  min-width: 0
}

.nav-group>summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--muted)
}

.nav-group>summary::-webkit-details-marker {
  display: none
}

.nav-group>summary:hover {
  background: #FFFFFF85;
  color: var(--ink)
}

.nav-parent-label {
  flex: 1;
  min-width: 0
}

.nav-group.is-current>summary {
  color: var(--accent-text);
  background: var(--accent-soft)
}

.nav-chevron {
  display: flex;
  flex-shrink: 0;
  transition: transform var(--motion)
}

.nav-chevron .icon {
  width: 14px;
  height: 14px
}

.nav-group:not([open])>summary .nav-chevron {
  transform: rotate(-90deg)
}

.nav-current-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0
}

.nav-group[open]>summary .nav-current-dot {
  display: none
}

.nav-children {
  display: grid;
  gap: 4px;
  margin: 4px 0 0 20px
}

.nav-link--child {
  min-height: 44px;
  padding: 9px 12px 9px 20px;
  font-size: 13px;
  gap: 10px;
  border-radius: 9px
}

.nav-child-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  flex-shrink: 0
}

.nav-link--child[aria-current=page] .nav-child-dot {
  opacity: 1
}

.sidebar-bottom {
  margin-top: auto;
  padding-top: 32px
}

.sidebar-preference {
  padding: 14px 10px;
  border-top: 1px solid #E1D7C9
}

.sidebar-preference .preference-row {
  font-size: 12px;
  gap: 8px
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 10px 0;
  border-top: 1px solid #E1D7C9
}

.sidebar-user small {
  display: block;
  line-height: 1.4;
  color: var(--muted)
}

.sidebar-user .user-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px
}

.avatar {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(145deg, #4F4841, #252729);
  color: #FFF8EE;
  font-weight: 650;
  flex-shrink: 0
}

.app-main {
  min-width: 0;
  grid-column: 2
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 74px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--divider);
  background: var(--glass);
  backdrop-filter: blur(10px);
  border-radius: 0 26px 0 0
}

.app-shell[data-nav-state=hidden] .topbar {
  border-top-left-radius: 26px
}

.topbar .nav-toggle {
  width: 44px;
  min-height: 44px;
  border-radius: 10px
}

.nav-toggle:hover {
  background: #FFFFFFB8
}

.topbar .search-launch {
  margin-right: auto;
  min-width: 0
}

.search-launch {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF9;
  border: 1px solid #E5DDD3;
  min-height: 40px;
  border-radius: 12px;
  color: var(--muted);
  padding: 8px 12px;
  width: 280px;
  text-align: left;
  font-size: 12px
}

.search-launch kbd {
  margin-left: auto;
  font: 10px var(--font);
  padding: 2px 6px;
  background: #F2EDE7;
  border: 1px solid #DED5C9;
  border-radius: 4px;
  color: #68645F
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px
}

.today-label {
  font-size: 12px;
  color: var(--muted);
  padding-right: 13px;
  border-right: 1px solid var(--divider)
}

.account-button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 4px;
  border-radius: 24px;
  color: var(--muted)
}

.account-button .icon {
  width: 16px
}

.notification-button {
  position: relative
}

.notification-dot {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  border: 1px solid var(--paper)
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 30px;
  z-index: 50;
  padding: 10px;
  background: var(--paper)
}

.skip-link:focus {
  top: 24px
}

.content {
  max-width: 1550px;
  margin: auto;
  padding: 28px 30px 16px;
  min-height: calc(100vh - 163px)
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 25px
}

.page-heading p {
  font-size: 13px;
  margin-top: 8px
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-text);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  margin-bottom: 14px
}

.eyebrow::before {
  content: "";
  width: 17px;
  height: 2px;
  background: var(--accent)
}

.workspace-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 4px;
  font-size: 11px;
  color: var(--subtle);
  gap: 12px
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 6px
}

.hero {
  min-height: 292px;
  padding: 32px 34px;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20360%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23E1F3FE%22%20d%3D%22M200%20360C330%20280%20440%2040%20590%20150S850%20330%201000%20220V360Z%22%2F%3E%3Cpath%20fill%3D%22%23CFEAFF%22%20fill-opacity%3D%22.7%22%20d%3D%22M420%20360C610%20300%20690%20200%20810%20270S930%20345%201000%20290V360Z%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat, linear-gradient(110deg, #FCFEFF, #F7FCFF);
  border: 1px solid #FFF9;
  box-shadow: inset 0 1px 0 #FFF, var(--shadow);
  margin-bottom: 22px
}

.hero h1 {
  font-size: clamp(27px, 2.5vw, 39px);
  line-height: 1.35;
  letter-spacing: -1px;
  font-weight: 760
}

.hero h1 em {
  font-style: normal;
  color: var(--accent-text)
}

.hero-copy>p {
  max-width: 400px;
  margin: 15px 0 24px;
  font-size: 13px;
  line-height: 1.9
}

.hero-scene {
  position: relative;
  padding: 15px 8px 22px 24px
}

.hero-scene::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at 35% 28%, #E7F6FFB0, #CDEBFF55 66%, transparent 70%);
  right: -35px;
  top: -25px;
  box-shadow: inset 0 2px 4px #FFF8
}

.mini-workspace {
  position: relative;
  background: linear-gradient(150deg, #FFFFFFF5, #FFFFFFE0);
  border: 1px solid #FFF;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: inset -1px -2px 2px #C7B39835, 0 17px 32px #80552118;
  transform: rotate(-1.5deg)
}

.mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 650;
  padding-bottom: 12px;
  border-bottom: 1px solid #E9DECF;
  margin-bottom: 5px
}

.mini-dots {
  display: flex;
  gap: 4px
}

.mini-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #D1C5B7
}

.mini-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #ECE3DACC;
  font-size: 11px
}

.mini-task:last-child {
  border: 0
}

.mini-task .icon {
  width: 16px;
  height: 16px;
  color: var(--success)
}

.mini-task.pending .icon {
  color: var(--accent-text)
}

.mini-task span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.scene-note {
  position: absolute;
  bottom: 5px;
  right: -3px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 17px;
  border-radius: 13px;
  font-size: 11px;
  box-shadow: inset 0 1px 0 #FFF, 0 8px 22px #A45B231B;
  background: #FFFBF3F2;
  border: 1px solid #FFF
}

.scene-note .icon {
  color: var(--accent-text)
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 25px
}

.stat {
  padding: 20px 22px;
  position: relative;
  min-height: 132px
}

.stat-label {
  font-size: 12px;
  color: var(--muted)
}

.stat-value {
  display: block;
  font-size: 31px;
  line-height: 1.1;
  font-weight: 720;
  letter-spacing: -1px;
  margin: 12px 0 8px;
  color: var(--heading)
}

.stat-note {
  font-size: 11px;
  color: var(--subtle)
}

.icon-tile {
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-text);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex-shrink: 0;
  border: 1px solid #FFF8;
  box-shadow: inset 0 1px 0 #FFF8
}

.stat>.icon-tile {
  position: absolute;
  top: 20px;
  right: 20px
}

.icon-tile.blue {
  background: var(--info-bg);
  color: var(--info)
}

.icon-tile.green {
  background: var(--success-bg);
  color: var(--success)
}

.icon-tile.purple {
  background: var(--lilac-bg);
  color: #685290
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 26px 0 13px
}

.section-heading p {
  font-size: 12px;
  margin-top: 3px
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 26px
}

.quick-card {
  padding: 17px 16px;
  text-align: left;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: center;
  font: inherit;
  transition: transform var(--motion), box-shadow var(--motion)
}

.quick-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--raised)
}

.quick-card h3 {
  font-size: 13px;
  margin-bottom: 3px
}

.quick-card p {
  font-size: 11px
}

.quick-card>.icon {
  margin-left: auto;
  width: 16px;
  color: var(--subtle)
}

.panel {
  border: 1px solid #E9E1D7;
  border-radius: var(--radius);
  background: var(--readable);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
  min-width: 0
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 23px 19px
}

.panel-heading p {
  font-size: 12px;
  margin-top: 5px
}

.panel-body {
  padding: 2px 23px 24px
}

.table-wrap {
  overflow-x: auto;
  width: 100%;
  border-radius: 0 0 var(--radius) var(--radius)
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  font-size: 12px
}

th {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: #F8F5F0;
  padding: 12px 20px;
  white-space: nowrap;
  border-top: 1px solid #EEE6DD;
  border-bottom: 1px solid #EEE6DD
}

td {
  padding: 18px 20px;
  border-bottom: 1px solid #EFE9E1;
  vertical-align: middle
}

tr:last-child td {
  border-bottom: 0
}

tbody tr:hover {
  background: #FFFAF4
}

/* Amazon selection and keyword strategy */
.selection-category-panel{display:grid;gap:12px;margin-bottom:18px;padding:14px;border:1px solid #eee6dd;border-radius:14px;background:#fffaf4}
.selection-category-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.selection-category-head p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.selection-category-selector{margin-top:4px}
.selection-category-path{margin:0;font-size:13px;color:var(--ink);line-height:1.5}
.selection-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.selection-mode{position:relative}.selection-mode input{position:absolute;opacity:0}.selection-mode span{display:flex;min-height:76px;flex-direction:column;gap:5px;padding:15px;border:1px solid #e9e1d7;border-radius:14px;background:#fffaf4;cursor:pointer}.selection-mode input:checked+span{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,122,26,.13);background:#fff4e7}.selection-mode small,.selection-product small,.selection-series,.strategy-results small{display:block;color:var(--muted);margin-top:4px}.selection-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.selection-checks{display:flex;gap:22px;margin-top:14px}.selection-summary,.strategy-stats{display:flex;gap:12px;padding:0 23px 18px;flex-wrap:wrap}.selection-summary span,.strategy-stats span{min-width:120px;padding:12px 14px;border:1px solid #eee6dd;border-radius:12px;background:#fffaf4}.selection-result-scroll{max-height:min(68vh,760px);overflow:auto;padding:0 18px 18px;overscroll-behavior:contain}.selection-result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.selection-result-card{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:start;padding:12px;border:1px solid #e9e1d7;border-radius:14px;background:#fffaf4;cursor:pointer}.selection-result-card.is-selected,.selection-result-card:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,122,26,.13);background:#fff4e7}.selection-result-card>input{position:absolute;top:12px;right:12px;margin:0}.selection-result-card img{width:72px;height:72px;object-fit:contain;border-radius:10px;background:#fff}.selection-result-body{min-width:0}.selection-result-head{display:flex;align-items:center;gap:8px;padding-right:28px;margin-bottom:4px}.selection-result-body strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.4}.selection-result-body>small{display:block;margin-top:4px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selection-result-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin:10px 0 0}.selection-result-metrics div{min-width:0}.selection-result-metrics dt{font-size:11px;color:var(--muted)}.selection-result-metrics dd{margin:1px 0 0;font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selection-empty{margin:0;padding:28px;text-align:center;color:var(--muted)}.selection-product{display:flex;gap:12px;align-items:flex-start;min-width:340px}.selection-product img{width:64px;height:64px;object-fit:contain;border-radius:10px;background:white}.selection-product strong{display:block;max-width:430px;margin-top:5px;line-height:1.45}.selection-recommendations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.selection-recommendations article{padding:18px;border:1px solid #e9e1d7;border-radius:14px;background:#fffaf4}.selection-recommendations article>div{display:flex;justify-content:space-between;gap:12px}.selection-recommendations dl,.strategy-profile dl{display:grid;grid-template-columns:minmax(9.5rem,max-content) minmax(0,1fr);column-gap:18px;row-gap:10px;margin-top:14px;align-items:start}.strategy-profile dt{font-weight:650;color:var(--heading);line-height:1.45;padding-top:1px;white-space:nowrap}.strategy-profile dd{margin:0;min-width:0;line-height:1.55;overflow-wrap:anywhere;word-break:break-word}.selection-recommendations dt{font-weight:650;color:var(--heading)}.selection-recommendations dd{margin:0}.strategy-mode-tabs{display:flex;gap:10px;margin-bottom:18px}.strategy-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.strategy-asins,.strategy-notes{grid-column:span 1}.strategy-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}.strategy-history{position:sticky;top:82px;max-height:calc(100vh - 100px);overflow:auto}.strategy-task-list{padding:0 10px 12px}.strategy-task{width:100%;display:flex;flex-direction:column;gap:7px;text-align:left;border:1px solid transparent;border-radius:12px;background:transparent;padding:12px;cursor:pointer}.strategy-task:hover,.strategy-task.is-active{background:#fff5e6;border-color:#f0dbbd}.strategy-task>span{display:flex;justify-content:space-between;gap:8px}.strategy-task small{color:var(--muted)}.strategy-empty{padding:30px;text-align:center}.strategy-progress{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;align-items:center}.strategy-progress div{display:flex;flex-direction:column;gap:5px}.strategy-review-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 23px 24px}.strategy-review-grid label{display:flex;gap:9px;align-items:flex-start;border:1px solid #e9e1d7;border-radius:12px;padding:10px;background:#fffaf4}.strategy-review-grid img{width:58px;height:58px;object-fit:contain;background:white;border-radius:8px}.strategy-review-grid small{display:block;max-height:44px;overflow:hidden;color:var(--muted);margin-top:4px}.strategy-profile>summary{cursor:pointer;font-weight:650;padding:20px 23px}.strategy-profile-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.strategy-toolbar{display:flex;gap:12px;padding:0 23px 16px}.strategy-toolbar .search-field{flex:1}.strategy-toolbar .field{width:160px}.strategy-results td{vertical-align:top;min-width:110px}.strategy-results td:first-child,.strategy-results td:last-child{min-width:240px}
@media(max-width:1000px){.selection-modes{grid-template-columns:repeat(2,minmax(0,1fr))}.selection-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.selection-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.strategy-layout{grid-template-columns:1fr}.strategy-history{position:static;max-height:none}.strategy-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.selection-modes,.selection-fields,.selection-recommendations,.selection-result-grid,.strategy-form-grid,.strategy-profile-form,.strategy-review-grid{grid-template-columns:1fr}.strategy-asins,.strategy-notes{grid-column:auto}.strategy-progress{grid-template-columns:1fr}.strategy-toolbar{flex-direction:column}.strategy-toolbar .field{width:auto}}

.task-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px
}

.task-mark {
  display: grid;
  place-items: center;
  border: 1px solid #F0DBBD;
  background: #FFF5E6;
  border-radius: 11px;
  width: 35px;
  height: 38px;
  flex-shrink: 0;
  color: var(--accent-text)
}

.task-mark.is-done {
  background: var(--success-bg);
  border-color: #DCEBDD;
  color: var(--success)
}

.task-mark .icon {
  width: 17px;
  height: 17px
}

.task-copy {
  min-width: 0
}

.task-title {
  display: block;
  font-weight: 620;
  color: var(--heading);
  text-align: left;
  word-break: break-word;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 620;
  line-height: 1.5
}

button.task-title:hover {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px
}

.task-description {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--subtle);
  font-size: 11px;
  margin-top: 4px;
  max-width: 340px;
  overflow-wrap: anywhere
}

.table-actions {
  display: flex;
  gap: 4px;
  white-space: nowrap
}

.table-actions .button {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 11px;
  background: transparent
}

.table-actions .action-delete {
  color: var(--danger);
  border-color: transparent
}

.date-cell {
  color: var(--subtle);
  white-space: nowrap;
  font-size: 11px
}

.owner-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 11px
}

.owner-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ECE4D9;
  width: 23px;
  height: 23px;
  color: #65533F;
  font-size: 10px;
  flex-shrink: 0
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid #F4D8BA;
  border-radius: 7px;
  font-size: 10px;
  white-space: nowrap;
  padding: 4px 8px;
  line-height: 1.5
}

.badge.done {
  background: var(--success-bg);
  color: var(--success);
  border-color: #D4E9DE
}

.badge.off {
  background: #EEEBE7;
  color: var(--muted);
  border-color: #E1DDD6
}

.badge.info {
  background: var(--info-bg);
  color: var(--info);
  border-color: #D6E5F4
}

.badge.error {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #EAC8BA
}

.filters {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #F2EDE6;
  border: 1px solid #EAE1D5;
  border-radius: 11px;
  flex-shrink: 0
}

.filter {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 11px;
  min-height: 32px;
  padding: 6px 12px;
  color: var(--muted)
}

.filter[aria-pressed=true] {
  background: #FFFDF9;
  color: var(--accent-text);
  border-color: #E8DBC9;
  box-shadow: 0 2px 3px #815F3021
}

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 23px 18px
}

.search-field {
  position: relative;
  display: block;
  max-width: 330px;
  flex: 1
}

.search-field>.icon {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 17px;
  height: 17px;
  color: var(--subtle);
  pointer-events: none
}

.search-field input:not([type=checkbox], [type=range]) {
  padding-left: 38px
}

.sort-field select {
  min-width: 140px
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid #ECE4DB;
  gap: 12px;
  color: var(--subtle);
  font-size: 11px
}

.pagination .button-row {
  gap: 5px
}

.pagination .icon-button {
  min-height: 32px;
  width: 32px
}

.empty {
  text-align: center;
  padding: 42px 20px
}

.empty>.icon-tile {
  margin: 0 auto 14px;
  width: 46px;
  height: 46px
}

.empty h3 {
  margin-bottom: 7px
}

.empty p {
  font-size: 12px;
  margin-bottom: 18px
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #F3EEE5;
  border: 1px solid #E5DBCE;
  border-radius: 12px;
  color: var(--muted);
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.8;
  margin-top: 18px
}

.notice>.icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0
}

.notice.success {
  background: var(--success-bg);
  border-color: #D4E9DE;
  color: var(--success)
}

.notice.error {
  background: var(--danger-bg);
  border-color: #EAC8BA;
  color: var(--danger)
}

.notice.info {
  background: var(--info-bg);
  border-color: #D6E5F4;
  color: var(--info)
}

.error-message {
  color: var(--danger);
  font-size: 12px;
  margin: 13px 0;
  background: var(--danger-bg);
  padding: 10px 12px;
  border-radius: 9px;
  overflow-wrap: anywhere
}

.error-message:empty {
  display: none
}

.definition {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  margin: 0;
  gap: 0
}

.definition dt,
.definition dd {
  padding: 14px 0;
  border-bottom: 1px solid #EDE5DB;
  margin: 0;
  font-size: 13px
}

.definition dt {
  color: var(--muted)
}

.definition dd {
  overflow-wrap: anywhere
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 8px
}

.step-number {
  font: 600 11px var(--font);
  letter-spacing: 1px;
  color: var(--accent-text);
  margin-bottom: 12px;
  display: block
}

.step p {
  font-size: 12px;
  margin-top: 8px
}

.field {
  display: block;
  margin-bottom: 17px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink)
}

.field>span {
  display: block;
  margin-bottom: 7px
}

.field small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px
}

input:not([type=checkbox], [type=range]),
textarea,
select {
  width: 100%;
  min-height: 44px;
  background: #FFFEFC;
  color: var(--ink);
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  padding: 10px 12px;
  box-shadow: inset 0 1px 2px #5D442405;
  line-height: 1.5;
  font-size: 13px;
  font-weight: 400
}

input::placeholder,
textarea::placeholder {
  color: var(--subtle);
  opacity: 1
}

input:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) {
  border-color: #756C61
}

input:focus,
textarea:focus,
select:focus {
  border-color: #A9612C;
  outline: 2px solid #C5763466;
  outline-offset: 2px
}

input:disabled {
  background: #ECE8E2
}

textarea {
  min-height: 115px;
  resize: vertical
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

dialog {
  border: 1px solid #FFF;
  border-radius: 22px;
  padding: 0;
  width: min(540px, calc(100vw - 32px));
  max-height: 90vh;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 25px 90px #2517093D;
  overflow: auto
}

.cf-preview-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.cf-image-preview {
  width: min(1400px, calc(100vw - 32px));
  height: min(900px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
.cf-image-preview[open] { display: flex; flex-direction: column; }
.cf-image-preview .dialog-head { flex-shrink: 0; }
.cf-image-preview .dialog-head h2 { min-width: 0; overflow-wrap: anywhere; }
.cf-image-preview .dialog-head button { flex-shrink: 0; }
.cf-preview-toolbar { padding: 12px 20px; flex-shrink: 0; }
.cf-preview-toolbar .button-row { flex-wrap: wrap; align-items: center; }
.cf-preview-toolbar p { margin: 8px 0 0; }
.cf-preview-stage {
  position: relative;
  flex: 1;
  min-height: 100px;
  overflow: hidden;
  background: #242424;
  color: #fff8ef;
  touch-action: none;
  cursor: grab;
}
.cf-preview-stage:active { cursor: grabbing; }
.cf-preview-stage img { position: absolute; top: 0; left: 0; max-width: none; max-height: none; transform-origin: 0 0; user-select: none; pointer-events: none; }
.cf-preview-feedback { position: absolute; inset: 16px; pointer-events: none; }
.cf-preview-feedback button { pointer-events: auto; }
.cf-image-preview [hidden] { display: none !important; }
.cf-preview-help { padding: 10px 20px; margin: 0; flex-shrink: 0; }
@media (max-width: 600px) {
  .cf-image-preview { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); border-radius: 14px; }
  .cf-preview-toolbar { padding: 8px 12px; }
  .cf-preview-toolbar .button { min-height: 40px; padding: 8px 10px; }
  .cf-preview-help { padding: 8px 12px; }
}
dialog::backdrop {
  background: #30271D66;
  backdrop-filter: blur(4px)
}

html[data-glass=off] dialog::backdrop {
  backdrop-filter: none
}

.dialog-body>.search-field {
  max-width: none
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 18px 24px;
  border-bottom: 1px solid #E8DED1;
  background: #FAF5EE;
  position: sticky;
  top: 0;
  z-index: 1
}

.dialog-head h2 {
  font-size: 18px
}

.dialog-head .icon-button {
  min-height: 36px;
  width: 36px
}

.dialog-body {
  padding: 23px 24px 24px
}

.dialog-intro {
  font-size: 13px;
  line-height: 1.9;
  margin-bottom: 20px;
  overflow-wrap: anywhere
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #E8DED1;
  flex-wrap: wrap
}

.detail-description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.9;
  margin: 20px 0
}

.detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted)
}

.preference-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.preference-row p {
  font-size: 12px;
  margin-top: 4px
}

.switch {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 23px;
  flex-shrink: 0;
  cursor: pointer
}

.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  z-index: 1;
  cursor: pointer
}

.switch-track {
  position: absolute;
  inset: 0;
  background: #9F9A92;
  border: 1px solid #89837A;
  border-radius: 20px;
  box-shadow: inset 0 1px 2px #0001
}

.switch-track::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 15px;
  height: 15px;
  background: #FFFDF8;
  border-radius: 50%;
  box-shadow: 0 1px 3px #0002;
  transition: transform var(--motion)
}

.switch input:checked+.switch-track {
  background: var(--accent);
  border-color: #C66A23
}

.switch input:checked+.switch-track::after {
  transform: translateX(15px)
}

.switch input:focus-visible+.switch-track {
  outline: 3px solid #95501D;
  outline-offset: 4px
}

.account-info {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 25px
}

.account-info .avatar {
  width: 47px;
  height: 47px;
  font-size: 19px
}

.account-info p {
  font-size: 12px;
  margin-top: 2px
}

.account-actions {
  display: grid;
  gap: 10px;
  margin-top: 24px
}

.account-actions .button {
  justify-content: flex-start
}

.search-results {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  max-height: 390px;
  overflow: auto
}

.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: var(--ink);
  padding: 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px
}

.search-result:hover {
  background: #F5EDE1;
  border-color: #E7DBC9
}

.search-result strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere
}

.search-result small {
  font-size: 11px;
  color: var(--subtle)
}

.notification-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--divider)
}

.notification-item p {
  font-size: 12px;
  color: var(--ink)
}

.notification-item small {
  font-size: 10px;
  color: var(--subtle)
}

.toast-region {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  z-index: 20;
  pointer-events: none
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 12px 13px 16px;
  background: var(--paper);
  border: 1px solid #DADFCF;
  box-shadow: var(--raised);
  border-radius: 14px;
  pointer-events: auto;
  font-size: 12px;
  animation: toast-in .18s ease-out
}

.toast>.icon {
  color: var(--success);
  width: 18px
}

.toast.is-error {
  border-color: #DCA493
}

.toast.is-error>.icon {
  color: var(--danger)
}

.toast .icon-button {
  margin-left: auto;
  width: 30px;
  min-height: 30px
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.boot-screen {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
  text-align: center
}

.spinner {
  border: 2px solid #E7D9C9;
  border-top-color: var(--accent-text);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-block;
  animation: spin .8s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.loading-state {
  padding: 80px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: var(--muted);
  font-size: 13px
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 28px;
  background: radial-gradient(ellipse at 15% 20%, #EFF9FF88, transparent 50%), var(--canvas)
}

.auth-frame {
  max-width: 1120px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  min-height: 660px;
  border: 1px solid #FFF;
  box-shadow: 0 25px 65px #70461E10;
  background: #FFFFFFEB
}

.auth-story {
  display: flex;
  flex-direction: column;
  padding: 44px 45px 26px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20800%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23D7EFFF%22%20d%3D%22M0%20660C180%20550%20300%20400%20600%20270V800H0Z%22%2F%3E%3Cpath%20fill%3D%22%23BFE5FD%22%20fill-opacity%3D%22.65%22%20d%3D%22M0%20800C210%20740%20350%20590%20600%20480V800Z%22%2F%3E%3Cpath%20fill%3D%22%23E5F5FF%22%20d%3D%22M0%20240C180%20340%2040%20450%200%20520Z%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat, linear-gradient(145deg, #FCFEFF, #F4FAFF);
  border-right: 1px solid #E2EEF7
}

.auth-story>.brand {
  margin-bottom: 55px
}

.auth-story h1 {
  font-size: 36px;
  line-height: 1.45;
  letter-spacing: -1px
}

.auth-story h1 em {
  color: var(--accent-text);
  font-style: normal
}

.auth-story>p {
  font-size: 13px;
  margin-top: 17px;
  max-width: 320px;
  line-height: 1.9
}

.auth-preview {
  margin-top: 28px;
  padding: 20px 23px;
  background: linear-gradient(135deg, #FFFFFFEF, #FFFFFFC9);
  border-radius: 16px;
  border: 1px solid #FFF;
  box-shadow: inset 0 -1px 1px #9A704020, 0 12px 23px #7B573214;
  transform: rotate(-1.1deg)
}

.auth-preview>h3 {
  font-size: 12px;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 12px;
  margin-bottom: 4px
}

.auth-preview .mini-task {
  font-size: 12px
}

.auth-story-footer {
  margin-top: auto;
  padding-top: 32px;
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--muted)
}

.auth-main {
  padding: 64px 50px;
  display: flex;
  justify-content: center;
  flex-direction: column
}

.auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-text);
  font-size: 11px;
  background: var(--accent-soft);
  border: 1px solid #F2D7BD;
  border-radius: 20px;
  padding: 5px 10px;
  align-self: flex-start;
  margin-bottom: 20px
}

.auth-kicker .icon {
  width: 14px;
  height: 14px
}

.auth-main h2 {
  font-size: 26px;
  letter-spacing: -.5px
}

.auth-main>p {
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 32px
}

.auth-main form>.button {
  width: 100%;
  margin-top: 8px
}

.auth-main .field {
  margin-bottom: 21px
}

.password-wrap {
  position: relative
}

.password-wrap input {
  padding-right: 45px
}

.password-wrap .icon-button {
  position: absolute;
  top: 1px;
  right: 2px;
  min-height: 42px;
  width: 40px
}

.password-wrap .icon {
  width: 17px;
  height: 17px
}

.auth-help {
  font-size: 11px;
  color: var(--muted);
  margin-top: 23px;
  text-align: center;
  line-height: 1.8
}

.auth-version {
  font-size: 10px;
  color: var(--subtle);
  text-align: center;
  margin-top: 45px;
  letter-spacing: .5px
}

.auth-mobile-brand {
  display: none
}

.design-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.design-grid .panel {
  margin: 0
}

.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .7px;
  margin-bottom: 15px;
  display: block;
  color: var(--subtle)
}

.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px
}

.swatch {
  height: 65px;
  border-radius: 10px;
  border: 1px solid #DBCAB7;
  margin-bottom: 7px
}

.swatch-canvas {
  background: var(--canvas)
}

.swatch-accent {
  background: var(--accent)
}

.swatch-ink {
  background: var(--ink)
}

.swatch-sun {
  background: var(--sun)
}

.swatches small {
  font-size: 10px;
  display: block
}

progress {
  display: block;
  width: 100%;
  height: 7px;
  appearance: none;
  border: 0;
  border-radius: 10px;
  background: #E8DED3;
  overflow: hidden
}

progress::-webkit-progress-bar {
  background: #E8DED3;
  border-radius: 10px
}

progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: 10px
}

progress::-moz-progress-bar {
  background: var(--accent);
  border-radius: 10px
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin: 18px 0 10px
}

input[type=range] {
  width: 100%;
  accent-color: var(--accent);
  margin: 20px 0 10px
}

.demo-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 12px
}

.demo-checks input {
  accent-color: var(--accent-text)
}

@media(min-width:1700px) {
  .hero {
    min-height: 320px
  }

  .hero h1 {
    font-size: 42px
  }

  .stat {
    min-height: 146px
  }

  .content {
    padding: 34px 42px 18px
  }

  .hero-scene {
    padding: 20px 35px 22px 40px
  }
}

@media(max-width:1250px) {
  .sidebar {
    padding-left: 12px;
    padding-right: 12px
  }

  .topbar {
    padding: 0 24px
  }

  .content {
    padding: 24px
  }

  .hero {
    padding: 28px;
    gap: 14px
  }

  .hero-scene {
    padding-left: 10px
  }

  .quick-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .today-label {
    display: none
  }

  td,
  th {
    padding-left: 15px;
    padding-right: 15px
  }

  .stat {
    padding: 18px
  }

  .stat>.icon-tile {
    right: 15px
  }

  .task-description {
    max-width: 220px
  }
}

@media(max-width:1000px) {
  .app-shell {
    grid-template-columns: 0 minmax(0, 1fr);
    transition: none
  }

  .sidebar {
    display: none
  }
}

@media(max-width:800px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 29px
  }

  .hero-scene {
    display: none
  }

  .hero h1 {
    font-size: 31px
  }

  .auth-frame {
    max-width: 480px;
    grid-template-columns: 1fr;
    min-height: auto
  }

  .auth-story {
    display: none
  }

  .auth-main {
    padding: 38px
  }

  .auth-mobile-brand {
    display: block;
    margin-bottom: 36px
  }

  .design-grid {
    grid-template-columns: 1fr
  }

  .steps {
    grid-template-columns: 1fr
  }

  .stat-note {
    font-size: 10px
  }

  .stat-label {
    font-size: 11px
  }

  .stat>.icon-tile {
    width: 29px;
    height: 29px;
    top: 14px;
    right: 13px
  }

  .stat>.icon-tile .icon {
    width: 16px
  }

  .stat-value {
    font-size: 28px
  }

  .panel-heading {
    padding: 20px
  }

  .list-toolbar {
    padding: 0 20px 18px
  }
}

@media(max-width:650px) {
  body {
    font-size: 13px
  }

  .app-shell {
    margin: 0;
    display: block;
    border: 0;
    min-height: 100vh;
    border-radius: 0
  }

  .sidebar {
    display: none
  }

  .topbar {
    top: 0;
    height: 65px;
    padding: 0 16px;
    border-radius: 0;
    gap: 7px
  }

  .app-shell[data-nav-state=hidden] .topbar {
    border-radius: 0
  }

  .search-launch {
    width: auto;
    flex: 1;
    background: transparent;
    border-color: transparent;
    padding: 7px;
    font-size: 11px
  }

  .search-launch kbd {
    display: none
  }

  .search-launch .icon {
    width: 18px
  }

  .topbar-actions {
    gap: 3px
  }

  .topbar-actions>.icon-button {
    width: 36px;
    min-height: 40px
  }

  .account-button .icon {
    display: none
  }

  .account-button .avatar {
    width: 31px;
    height: 31px
  }

  .content {
    padding: 23px 16px 14px
  }

  .page-heading {
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 10px
  }

  .page-heading h1 {
    font-size: 24px
  }

  .page-heading p {
    font-size: 11px
  }

  .page-heading .button {
    font-size: 11px;
    white-space: nowrap;
    padding: 9px 12px
  }

  .page-heading .button .icon {
    width: 15px
  }

  .hero {
    padding: 26px 23px;
    min-height: 280px;
    margin-bottom: 16px;
    border-radius: 18px
  }

  .hero h1 {
    font-size: 30px
  }

  .hero-copy>p {
    font-size: 12px;
    line-height: 1.8;
    margin: 14px 0 20px
  }

  .hero .button {
    font-size: 12px;
    padding: 10px 14px
  }

  .eyebrow {
    font-size: 9px
  }

  .stats {
    gap: 8px;
    margin-bottom: 23px
  }

  .stat {
    padding: 14px 12px;
    min-height: 122px;
    border-radius: 13px
  }

  .stat>.icon-tile {
    display: none
  }

  .stat-value {
    font-size: 27px;
    margin-top: 11px
  }

  .stat-label {
    font-size: 10px
  }

  .stat-note {
    line-height: 1.5;
    display: block;
    font-size: 9px
  }

  .quick-grid {
    gap: 9px
  }

  .quick-card {
    padding: 14px 11px;
    gap: 8px;
    border-radius: 13px
  }

  .quick-card>.icon {
    display: none
  }

  .quick-card .icon-tile {
    width: 30px;
    height: 32px;
    border-radius: 9px
  }

  .quick-card .icon-tile .icon {
    width: 16px
  }

  .quick-card h3 {
    font-size: 11px
  }

  .quick-card p {
    font-size: 9px
  }

  .section-heading {
    margin-top: 22px
  }

  .section-heading h2 {
    font-size: 16px
  }

  .section-heading .button {
    font-size: 10px;
    padding: 6px 9px
  }

  .panel-heading {
    padding: 18px 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px
  }

  .panel-heading h2 {
    font-size: 15px
  }

  .panel-heading p {
    font-size: 11px
  }

  .panel-body {
    padding: 0 16px 20px
  }

  .filters {
    width: 100%;
    justify-content: space-between
  }

  .filter {
    flex: 1;
    min-height: 34px
  }

  .list-toolbar {
    padding: 0 16px 15px;
    gap: 8px
  }

  .sort-field select {
    min-width: 110px;
    font-size: 11px;
    padding: 10px 6px
  }

  .search-field input {
    font-size: 11px;
    padding-left: 33px
  }

  .search-field>.icon {
    left: 10px
  }

  table {
    min-width: 570px
  }

  .task-cell {
    min-width: 175px
  }

  .task-description {
    max-width: 190px
  }

  .panel {
    margin-bottom: 18px
  }

  td {
    padding-top: 16px;
    padding-bottom: 16px
  }

  .pagination {
    font-size: 10px;
    padding: 11px 14px
  }

  .notice {
    font-size: 11px;
    padding: 12px
  }

  .workspace-footer {
    font-size: 9px;
    padding-top: 12px;
    flex-wrap: wrap
  }

  .workspace-footer>span:last-child {
    display: none
  }

  .definition {
    grid-template-columns: 105px 1fr
  }

  .definition dt,
  .definition dd {
    font-size: 12px
  }

  .auth-page {
    padding: 20px 16px
  }

  .auth-main {
    padding: 30px 25px
  }

  .auth-main h2 {
    font-size: 25px
  }

  .auth-version {
    margin-top: 30px
  }

  .dialog-head {
    padding: 14px 18px
  }

  .dialog-body {
    padding: 20px 18px
  }

  .dialog-head h2 {
    font-size: 17px
  }

  .field-grid {
    grid-template-columns: 1fr;
    gap: 0
  }

  .toast-region {
    right: 16px;
    bottom: 16px
  }
}

@media(max-width:650px) {
  .task-table {
    display: block;
    min-width: 0
  }

  .task-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0)
  }

  .task-table tbody {
    display: block
  }

  .task-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 17px 16px;
    border-top: 1px solid #EFE6DB
  }

  .task-table td {
    display: block;
    padding: 0;
    border: 0
  }

  .task-table .task-main-cell {
    width: 100%
  }

  .task-table .task-cell {
    min-width: 0;
    align-items: flex-start
  }

  .task-table .task-title {
    font-size: 12px
  }

  .task-table .task-description {
    max-width: none;
    line-height: 1.7;
    -webkit-line-clamp: 2
  }

  .task-table .task-owner-cell {
    flex: 1;
    min-width: 130px
  }

  .task-table .task-owner-cell .owner-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 10px
  }

  .task-table .task-date-cell {
    font-size: 10px;
    margin-left: auto
  }

  .task-table .task-actions-cell {
    width: 100%;
    padding-top: 9px;
    border-top: 1px dashed #EAE1D5
  }

  .task-table .table-actions {
    gap: 7px
  }

  .task-table .table-actions .button {
    flex: 1;
    min-height: 40px;
    font-size: 11px
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }

  .spinner {
    border-color: var(--accent-text)
  }
}

/* Market research uses the same paper, glass and control tokens as the workbench. */
.sidebar .navigation {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  padding-right: 3px
}

.sidebar-bottom {
  padding-top: 18px;
  flex-shrink: 0
}

.sidebar>.brand {
  margin-bottom: 18px
}

html.nav-drawer-open {
  overflow: hidden;
  scrollbar-gutter: stable
}

dialog.dialog--navigation {
  position: fixed;
  inset: 0 auto 0 0;
  margin: 0;
  width: min(280px, calc(100vw - 32px));
  height: 100dvh;
  max-height: 100dvh;
  max-width: none;
  border-radius: 0 20px 20px 0;
  padding: 0;
  background: var(--paper);
  animation: navigation-enter var(--motion) ease-out
}

.dialog--navigation .dialog-head {
  padding: 18px 16px;
  min-height: 74px;
  gap: 8px
}

.dialog--navigation .dialog-head h2 {
  font-size: 16px
}

.dialog--navigation .dialog-head .icon-button {
  width: 44px;
  min-height: 44px
}

.dialog--navigation .dialog-body {
  padding: 12px 16px 24px;
  min-height: 0;
  max-height: calc(100dvh - 82px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin
}

.dialog--navigation .navigation {
  padding: 4px
}

@keyframes navigation-enter {
  from {
    transform: translateX(-18px);
    opacity: .5
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}

/* Research controls and product workspace share the standard theme and controls. */
.research-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px
}

.research-page-head .page-heading {
  margin-bottom: 0
}

.research-page-head>.button-row {
  padding-top: 5px;
  flex-shrink: 0
}

.research-controls .panel-body {
  padding: 20px
}

.research-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px
}

.research-selector .field {
  min-width: 0;
  margin: 0
}

.research-selector .field>span {
  font-size: 12px
}

.research-selector select {
  min-width: 0;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 13px;
  min-height: 44px;
  padding: 10px 12px
}

.category-path {
  display: flex;
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere
}

.research-list-picker {
  display: flex;
  margin-bottom: 16px
}

.research-list-picker .field {
  width: 300px;
  max-width: 100%;
  margin: 0
}

.research-list-picker .field>span {
  font-size: 12px
}

.research-list-picker select {
  min-height: 44px;
  font-size: 13px
}

.category-level-hint {
  display: block;
  line-height: 1.5;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere
}

.category-level-hint:empty {
  display: none
}

.category-level select:disabled {
  background: var(--canvas);
  opacity: .7;
  cursor: not-allowed
}

.category-directory-status {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere
}

.category-directory-status:empty {
  display: none
}

@media(max-width:650px) {
  .research-selector {
    grid-template-columns: 1fr !important
  }

  .research-list-picker {
    margin-bottom: 12px
  }

  .research-list-picker .field {
    width: 100%
  }

  .category-path {
    line-height: 1.65
  }
}

.research-command-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap
}

.research-command-row>.button-row {
  gap: 8px
}

.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px
}

.check-label input,
.product-table input,
.product-card input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent-text)
}

.research-status {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 44px;
  font-size: 12px;
  margin-left: auto
}

.research-status:empty {
  display: none
}

.research-status-label {
  display: flex;
  gap: 8px;
  align-items: center
}

.research-status .badge {
  font-size: 12px
}

.research-stage {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.research-status .button {
  min-height: 44px;
  padding: 8px 10px
}

.research-warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 13px
}

.research-warning .icon {
  width: 17px;
  height: 20px
}

.category-children {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 12px
}

.category-children:empty {
  display: none
}

.research-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere
}

.research-results-head {
  padding: 18px 20px 12px;
  align-items: flex-start
}

.research-results-head h2 {
  font-size: 18px
}

.research-results-head p {
  font-size: 12px;
  margin-top: 6px
}

.research-results-head .button-row {
  gap: 6px
}

.research-results-tools.panel-body {
  padding: 0 20px 16px
}

.research-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.research-toolbar .field {
  margin: 0;
  min-width: 0
}

.research-toolbar .research-search {
  flex: 1;
  min-width: 210px
}

.research-toolbar .research-sort {
  width: 145px
}

.research-toolbar input,
.research-toolbar select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  font-size: 13px
}

.research-toolbar>.button {
  min-height: 44px
}

.research-view-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: 12px
}

.research-view-switch .button {
  min-height: 36px;
  min-width: 54px;
  border-color: transparent;
  background: transparent
}

.research-view-switch .button[aria-pressed=true] {
  background: var(--paper);
  border-color: #EDCFB6;
  color: var(--accent-text);
  box-shadow: 0 1px 4px #6043260D
}

.research-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  padding: 12px 14px;
  margin: 12px 0;
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: 12px
}

.research-filters .field {
  flex: 1;
  min-width: 0;
  margin: 0
}

.research-filters .field>span {
  font-size: 12px
}

.research-filters select {
  min-height: 44px;
  width: 100%;
  padding: 9px 10px;
  font-size: 13px
}

.research-filters select:disabled {
  background: #EDE9E3;
  color: var(--muted);
  opacity: 1;
  cursor: not-allowed
}

.research-filters>.button {
  min-height: 44px
}

.research-filter-help {
  display: flex;
  align-items: baseline;
  gap: 8px 20px;
  flex-wrap: wrap;
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6
}

.research-price-help {
  margin-left: auto;
  max-width: 100%
}

.research-price-help summary {
  color: var(--accent-text);
  cursor: pointer;
  outline-offset: 3px
}

.research-price-help p {
  max-width: 520px;
  margin-top: 6px
}

.research-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  margin-top: 12px
}

.research-hint {
  font-size: 12px;
  margin: 12px 0;
  color: var(--muted);
  line-height: 1.8
}

.research-results-tools .research-hint {
  margin: 7px 0 0
}

.research-result-count {
  font-variant-numeric: tabular-nums
}

.research-hidden-selection {
  display: block;
  color: var(--accent-text);
  margin-top: 3px
}

.research-empty-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 20px 24px
}

.research-empty-actions:empty {
  display: none
}

.research-rank-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--divider);
  background: var(--paper)
}

.research-rank-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.research-rank-links .button {
  min-height: 38px;
  gap: 9px;
  background: var(--canvas);
  border-color: var(--divider);
  font-variant-numeric: tabular-nums
}

.research-rank-links .button[aria-current=location] {
  background: var(--accent-soft);
  border-color: var(--accent-text);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent-text)
}

.research-rank-links .button::after {
  content: attr(data-count);
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px
}

.research-rank-links .button[aria-current=location]::after {
  color: var(--accent-text)
}

.research-rank-current {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap
}

.research-product-scroll {
  position: relative;
  max-height: min(60vh, 560px);
  max-height: min(60dvh, 560px);
  overflow: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-gutter: stable;
  scrollbar-color: #AD9C89 var(--canvas);
  border-top: 1px solid var(--divider);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--canvas)
}

.research-product-scroll::-webkit-scrollbar {
  width: 11px;
  height: 11px
}

.research-product-scroll::-webkit-scrollbar-track {
  background: var(--canvas)
}

.research-product-scroll::-webkit-scrollbar-thumb {
  border: 2px solid var(--canvas);
  border-radius: 8px;
  background: #AD9C89
}

.research-product-scroll:focus-visible {
  outline-offset: -3px
}

.research-rank-section+.research-rank-section {
  border-top: 1px solid var(--divider)
}

.research-rank-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 12px
}

.research-rank-heading h3 {
  font-size: 13px;
  color: var(--accent-text);
  font-weight: 650
}

.research-rank-heading>span {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums
}

.product-grid.product-grid--sorted {
  padding-top: 16px
}

.research-product-scroll .product-table {
  width: 100%;
  margin: 0
}

.research-product-scroll .product-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--divider)
}

.product-table .research-rank-table-heading th {
  padding: 0;
  background: var(--canvas)
}

.product-table {
  min-width: 780px
}

.product-table td {
  padding-top: 18px;
  padding-bottom: 18px
}

.product-table td:nth-child(3) {
  width: 55%
}

.product-table td:not(:nth-child(3)) {
  white-space: nowrap
}

.product-table th {
  font-size: 12px
}

.product-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 220px
}

.product-identity img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 10px;
  flex-shrink: 0
}

.product-image-empty {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--canvas);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0
}

.product-identity>div {
  min-width: 0
}

.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6
}

.product-title:hover {
  color: var(--accent-text);
  text-decoration: underline
}

.product-subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
  overflow-wrap: anywhere
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0 20px 20px
}

.product-card {
  container: product-card / inline-size;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 12px;
  background: var(--paper);
  min-width: 0;
  box-shadow: 0 2px 6px #5D442407
}

.product-card.is-selected {
  border-color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent-text)
}

.product-card-layout {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: 24px 63px 18px auto;
  gap: 6px 10px;
  align-items: start
}

.product-card-media.button {
  grid-column: 1;
  grid-row: 1/4;
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  min-height: 112px;
  padding: 0;
  background: #fff;
  border-radius: 11px;
  overflow: hidden
}

.product-card-media.button:hover {
  border-color: var(--accent-text);
  background: #fff
}

.product-card-media img {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain
}

.product-card-media .product-image-empty {
  width: 100%;
  height: 100%;
  min-height: 110px;
  padding: 27px 5px 10px;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center
}

.product-card-media [hidden],
.product-detail-image [hidden] {
  display: none
}

.product-card-rank {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700
}

.product-card-brand-row {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  height: 24px
}

.product-card-brand {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 3px 5px;
  background: #F1EFE9;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600
}

.product-card-brand>span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0
}

.product-brand-inferred {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 400
}

.product-card-select {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  margin-right: -4px
}

.product-card-select input {
  margin: 0;
  cursor: pointer
}

.product-card .product-title {
  grid-column: 2;
  font-size: 13px;
  font-weight: 500;
  line-height: 21px;
  min-height: 63px;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere
}

.product-card-asin {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap
}

.product-card-asin .mono {
  font-size: 12px
}

.product-card-metrics {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--divider);
  min-width: 0
}

.product-card-metrics>div {
  min-width: 0;
  padding: 0 7px;
  border-left: 1px solid var(--divider)
}

.product-card-metrics>div:first-child {
  padding-left: 0;
  border: 0
}

.product-card-metrics>div:last-child {
  padding-right: 0
}

.product-card-metrics dt {
  font-size: 12px;
  line-height: 17px;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere
}

.product-card-metrics dd {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere
}

.product-card-price dd,
.product-rating-star {
  color: var(--accent-text)
}

.product-rating-star {
  font-size: 12px
}

.product-detail-image {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 240px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 20px;
  overflow: hidden
}

.product-detail-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px
}

.product-detail-image .product-image-empty {
  width: 100%;
  height: 100%;
  background: #fff
}

.product-detail-title {
  display: block;
  color: var(--heading);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 600;
  overflow-wrap: anywhere;
  margin-bottom: 24px
}

.product-detail-title:hover {
  color: var(--accent-text);
  text-decoration: underline
}

/* Reflow within each card: four desktop columns keep legible metrics at every width. */
@container product-card (max-width:213px) {
  .product-asin-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
  }
}

@container product-card (min-width:294px) {
  .product-card-layout {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: 24px 44px 18px auto;
    column-gap: 12px
  }

  .product-card-media.button {
    grid-row: 1/5
  }

  .product-card .product-title {
    font-size: 14px;
    line-height: 22px;
    min-height: 44px;
    -webkit-line-clamp: 2
  }

  .product-card-metrics {
    grid-column: 2;
    padding-top: 5px;
    margin-top: 0
  }
}

@media(pointer:coarse) {
  .product-card-layout {
    grid-template-rows: 44px 63px 18px auto
  }

  .product-card-brand-row {
    height: 44px
  }

  .product-card-select {
    width: 44px;
    height: 44px;
    margin-right: -6px
  }

  @container product-card (min-width:294px) {
    .product-card-layout {
      grid-template-rows: 44px 44px 18px auto
    }
  }
}

.collector-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px
}

.sys-packaging-prompt > summary {
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  color: var(--ink);
}

.sys-packaging-prompt textarea {
  overflow-wrap: anywhere;
}

.sys-bundle-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 4px;
}

.sys-bundle-list .button {
  width: 100%;
  justify-content: flex-start;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
}

.sys-bundle-list [aria-pressed="true"] {
  border-color: var(--control-border);
  background: var(--accent-soft, #FFF0E2);
}

#sys-packaging-bundle-panel code {
  overflow-wrap: anywhere;
}

.pkg-analysis-input { padding: 16px; }
.pkg-analysis-copy { white-space: pre-wrap; }
.pkg-composer [data-workflow-version-panel]:not(:empty) { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 10px; }
.pkg-version-label { flex: 1 1 220px; min-width: 0; }
.pkg-version-label select { display: block; width: 100%; min-width: 0; margin-top: 4px; }
.pkg-composer [data-workflow-version-panel] .research-hint { flex-basis: 100%; margin: 0; }
[data-workflow-goal], [data-workflow-reply] { overflow-wrap: anywhere; }

/* Packaging analysis follows document flow; never squeeze uploads inside a viewport-height card. */
.pkg-workspace.pkg-workspace--steps {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  max-width: 1120px;
  margin-inline: auto;
  gap: 24px;
}
.pkg-workspace--steps .pkg-panel--form{
  max-height: none;
}
.pkg-workspace--steps .pkg-form-scroll {
  flex: none;
  overflow: visible;
  max-height: none;
  display: block;
}
.pkg-workspace--steps .pkg-asset-main .pkg-upload { min-height: 150px; }
.pkg-workspace--steps .pkg-asset-main .pkg-upload--filled img { max-height: 200px; object-fit: contain; }

.connector-test {
  margin: 20px 0
}

.connector-test .field {
  margin: 0
}

.request-detail-list>div {
  padding: 14px 0;
  border-top: 1px solid var(--divider);
  font-size: 12px
}

.request-detail-list p {
  margin: 6px 0
}

.badge.danger {
  background: var(--danger-bg);
  color: var(--danger)
}

dialog.dialog--drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(580px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  max-width: 100vw;
  border-radius: 20px 0 0 20px
}

.dialog--drawer .dialog-head {
  padding: 20px 24px
}

.dialog--drawer .dialog-body {
  padding: 22px 24px
}

.dialog--drawer .dialog-head .icon-button {
  width: 44px;
  min-height: 44px
}

.dialog--drawer .definition {
  grid-template-columns: 105px minmax(0, 1fr)
}

.dialog--drawer .definition dd {
  overflow-wrap: anywhere
}

.research-detail-status {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 13px
}

.dialog--drawer .panel-heading {
  padding: 0 0 16px
}

.dialog--drawer .panel-heading h2 {
  display: none
}

.dialog--drawer .table-wrap table {
  min-width: 460px
}

.dialog--drawer td,
.dialog--drawer th {
  padding-left: 10px;
  padding-right: 10px
}

.dialog--drawer .pagination {
  padding: 16px 0 0
}

@media(max-width:1279px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .research-command-row .check-label {
    margin-left: 0
  }

  .research-status {
    margin-left: 0
  }

  .research-page-head>.button-row .badge {
    display: none
  }
}

@media(max-width:1200px) {
  .research-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:1000px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:650px) {
  #research-filter-fields .field {
    flex-basis: 100%;
    min-width: 0
  }

  .research-filter-help {
    gap: 5px
  }

  .research-price-help {
    margin-left: 0
  }

  .research-rank-nav {
    padding: 12px 16px
  }

  .research-rank-links {
    gap: 6px
  }

  .research-rank-heading {
    padding: 12px 16px
  }

  .research-product-scroll {
    max-height: 65vh;
    max-height: 65dvh
  }
}

@media(max-width:650px) {
  .research-page-head {
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px
  }

  .research-page-head .page-heading {
    margin: 0
  }

  .research-page-head>.button-row {
    padding: 0
  }

  .research-controls .panel-body {
    padding: 16px
  }

  .research-selector {
    gap: 10px
  }

  .research-selector select {
    padding: 9px 6px;
    font-size: 12px
  }

  .research-status {
    width: 100%;
    justify-content: flex-start
  }

  .research-stage {
    max-width: 160px
  }

  .research-command-row>.button-row .check-label {
    width: 100%;
    min-height: 32px;
    margin-left: 0
  }

  .research-results-head {
    padding: 16px;
    gap: 10px;
    flex-wrap: wrap
  }

  .research-results-tools.panel-body {
    padding: 0 16px 14px
  }

  .research-toolbar {
    gap: 8px
  }

  .research-toolbar .research-search {
    flex-basis: 100%;
    min-width: 0
  }

  .research-toolbar .research-sort {
    flex: 1;
    min-width: 115px
  }

  .research-toolbar>.button {
    padding: 8px;
    flex: 1
  }

  .research-view-switch {
    flex-shrink: 0
  }

  .research-view-switch .button {
    min-width: 44px;
    padding: 6px
  }

  .research-filters {
    padding: 10px;
    gap: 10px
  }

  .research-filters .field {
    min-width: calc(50% - 8px)
  }

  .research-actions {
    gap: 8px
  }

  .research-actions>.button-row {
    width: 100%;
    gap: 6px
  }

  .research-actions .button {
    flex: 1;
    white-space: nowrap;
    font-size: 12px;
    padding: 8px 6px
  }

  .product-grid {
    grid-template-columns: 1fr;
    padding: 0 16px 18px
  }

  .collector-config-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }

  .collector-config-grid .field>span {
    font-size: 12px
  }

  .dialog--drawer .dialog-head {
    padding: 14px 16px
  }

  .dialog--drawer .dialog-body {
    padding: 18px 16px
  }

  dialog.dialog--drawer {
    border-radius: 0
  }
}

/* Competitor redesign scaffold: keep A–E zones visible while iterating layout. */
.comp-zone {
  margin: 0 0 18px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden
}

.comp-zone-row--setup {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr);
  align-items: start;
  gap: 18px;
  margin-bottom: 18px
}

.comp-zone-row--setup>.comp-zone {
  min-width: 0;
  height: 100%;
  margin-bottom: 0
}

.comp-zone-row--setup>.comp-zone:only-child {
  grid-column: 1 / -1
}

@media (max-width: 960px) {
  .comp-zone-row--setup {
    grid-template-columns: 1fr
  }

  .comp-analysis-picker {
    grid-template-columns: 1fr
  }

  .comp-image-analysis .comp-ai-result {
    grid-template-columns: 120px minmax(0, 1fr)
  }

  .comp-image-analysis .comp-ai-result-image .comp-image-button,
  .comp-image-analysis .comp-ai-result-image img {
    width: 120px;
    height: 120px
  }

  .comp-carousel-overview-layout {
    grid-template-columns: minmax(0, 1fr)
  }

  .comp-carousel-overview dl {
    grid-template-columns: 82px minmax(0, 1fr)
  }
}

.comp-config-divider {
  height: 1px;
  margin: 16px 0;
  background: var(--divider)
}

.comp-config-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px 2px
}

.comp-config-entry>div {
  min-width: 0
}

.comp-config-entry strong {
  display: block;
  margin-bottom: 4px;
  color: var(--heading);
  font-size: 13px
}

.comp-config-entry p {
  margin: 0;
  line-height: 1.5
}

.comp-config-entry>.button,
.comp-config-entry>.badge {
  flex: 0 0 auto
}

.comp-image-ai-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px
}

.comp-image-ai-fields input {
  min-width: 0
}

.comp-image-ai-config>.muted {
  display: block;
  margin: 10px 0 0;
  line-height: 1.45
}

.comp-zone-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--divider);
  background: #F7F2EB
}

.comp-zone-id {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700
}

.comp-zone-head strong {
  font-size: 13px;
  color: var(--heading)
}

.comp-zone-body {
  padding: 14px 16px 16px
}

.comp-zone-body>.page-heading {
  margin: 0 0 8px
}

.comp-zone-body>.account-scope {
  margin: 0
}

.comp-zone-body>.notice {
  margin: 0
}

.comp-zone-body>.comp-input-panel,
.comp-zone-body>.comp-history,
.comp-zone-body>.comp-workspace {
  margin: 0
}

.comp-zone-body>.comp-history {
  padding: 12px;
  display: flex;
  align-items: end;
  gap: 16px
}

.comp-http-progress {
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: #EDE6DC;
  overflow: hidden;
  border: 1px solid var(--divider)
}

.comp-http-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .35s ease
}

.comp-http-progress-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted)
}

/* Competitor research: shared design tokens, bounded comparison surfaces. */
.comp-input-panel {
  margin-bottom: 20px;
  padding: 0;
  overflow: hidden
}

.comp-input-panel>details>summary {
  padding: 20px 24px;
  font-weight: 650;
  cursor: pointer
}

.comp-input-panel summary span {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
  margin-left: 14px
}

.comp-input-body {
  padding: 0 24px 24px
}

.comp-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0
}

.comp-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.comp-actions .button {
  min-height: 40px
}

.comp-history {
  display: flex;
  align-items: end;
  gap: 16px;
  margin: 20px 0
}

.comp-history>.field {
  flex: 1;
  min-width: 0
}

.comp-history select {
  width: 100%;
  max-width: 100%
}

.comp-batch {
  margin-bottom: 24px
}

.comp-batch-body {
  padding: 0 24px 22px
}

.comp-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 16px 0
}

.comp-selection label,
.comp-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px
}

.comp-selection input,
.comp-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent)
}

.comp-panel {
  margin-bottom: 26px;
  overflow: hidden
}

.comp-compare-scroll {
  max-height: 70vh;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--paper);
  border-top: 1px solid var(--divider)
}

.comp-columns {
  display: flex;
  align-items: stretch;
  min-width: 100%
}

.comp-column {
  flex: 1 0 320px;
  min-width: 320px;
  max-width: 480px;
  border-right: 1px solid var(--divider);
  background: var(--paper)
}

.comp-column:last-child {
  border-right: 0
}

.comp-source-title {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--divider);
  min-height: 120px
}

.comp-source-title>div {
  min-width: 0
}

.comp-source-title strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--heading);
  font-size: 13px;
  line-height: 1.5
}

.comp-source-title small {
  display: block
}

.comp-source-title .eyebrow {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .03em
}

.comp-column-content {
  padding: 18px
}

.comp-image-button {
  display: block;
  flex-shrink: 0;
  width: 70px;
  height: 80px;
  padding: 4px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: #fff;
  overflow: hidden
}

.comp-image-button img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.comp-image-button.is-large {
  width: 100%;
  height: auto;
  min-height: 110px;
  max-height: 420px
}

.comp-image-button.is-large img {
  display: block;
  height: auto;
  max-height: 400px;
  object-fit: contain
}

.comp-image-empty {
  display: grid;
  place-items: center;
  padding: 12px;
  min-height: 70px;
  color: var(--muted);
  font-size: 12px;
  background: var(--canvas);
  border-radius: 10px
}

.comp-bullets {
  padding-left: 23px;
  margin: 0 0 16px
}

.comp-bullets li {
  padding: 0 0 20px
}

.comp-bullets summary {
  font-weight: 650;
  cursor: pointer;
  font-size: 12px;
  color: var(--accent-text)
}

.comp-bullets p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  line-height: 1.8;
  font-size: 13px;
  padding-top: 8px
}

.comp-part-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
  font-size: 11px;
  color: var(--muted)
}

.comp-part-meta .button {
  font-size: 12px;
  min-height: 34px;
  padding: 6px 10px
}

.comp-image-analysis {
  margin: 0 0 20px;
  border: 1px solid rgba(236, 112, 20, .24);
  border-radius: 12px;
  background: #fffaf4;
  overflow: hidden
}

.comp-image-analysis>summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 700;
  color: var(--heading)
}

.comp-image-analysis>summary span:last-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600
}

.comp-image-analysis-body {
  padding: 0 14px 14px
}

.comp-image-analysis-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--divider)
}

.comp-image-analysis-actions p {
  margin: 0;
  color: var(--muted);
  font-size: 12px
}

.comp-ai-results {
  display: grid;
  gap: 12px;
  margin-top: 14px
}

.comp-analysis-carousel {
  padding: 12px;
  border: 1px solid rgba(236, 112, 20, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72)
}

.comp-analysis-carousel .comp-carousel-head {
  margin-bottom: 10px
}

.comp-analysis-carousel-viewport {
  position: relative
}

.comp-analysis-carousel-slide {
  margin: 0
}

.comp-analysis-carousel-slide[hidden] {
  display: none
}

.comp-analysis-carousel .comp-carousel-arrow {
  top: 50%;
  z-index: 5
}

.comp-analysis-carousel-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  padding: 5px;
  overflow-x: auto;
  border-radius: 9px;
  background: #26231f
}

.comp-analysis-carousel-nav-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap
}

.comp-analysis-carousel-nav-btn:hover,
.comp-analysis-carousel-nav-btn.is-active {
  background: rgba(255, 255, 255, .12);
  color: #fff
}

.comp-analysis-carousel-nav-btn.is-active {
  box-shadow: inset 0 -2px 0 var(--accent)
}

.comp-analysis-carousel.has-dot-nav>.comp-carousel-dots {
  justify-content: center
}

.comp-ai-result {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: #fff
}

.comp-ai-result-image .comp-image-button,
.comp-ai-result-image img {
  width: 220px;
  height: 220px;
  object-fit: contain
}

.comp-ai-result-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center
}

.comp-ai-result dl {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 6px 10px;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55
}

.comp-ai-result dt {
  color: var(--muted);
  font-weight: 650
}

.comp-ai-result dd {
  margin: 0;
  overflow-wrap: anywhere
}

.comp-ai-result ul {
  margin: 0;
  padding-left: 18px
}

.comp-ai-visual-details,
.comp-analysis-meta {
  margin-top: 10px;
  border-top: 1px solid var(--divider)
}

.comp-ai-visual-details>summary,
.comp-analysis-meta>summary {
  padding: 9px 0 0;
  cursor: pointer;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 650
}

.comp-ai-visual-details dl {
  margin-top: 9px
}

.comp-analysis-meta span {
  display: block;
  padding-top: 6px;
  color: var(--muted)
}

.comp-carousel-overviews {
  display: grid;
  gap: 12px;
  margin-top: 14px
}

.comp-carousel-overview {
  padding: 14px;
  border: 1px solid rgba(236, 112, 20, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .78)
}

.comp-carousel-overview>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px
}

.comp-carousel-overview h5 {
  margin: 3px 0 0;
  color: var(--heading);
  font-size: 14px
}

.comp-carousel-overview-layout {
  display: grid;
  grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
  gap: 16px
}

.comp-carousel-overview-images {
  display: grid;
  gap: 8px;
  align-content: start
}

.comp-carousel-overview-images .comp-image-button,
.comp-carousel-overview-images img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #fff
}

.comp-carousel-overview dl {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 7px 10px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55
}

.comp-carousel-overview dt {
  color: var(--muted);
  font-weight: 650
}

.comp-carousel-overview dd {
  margin: 0;
  overflow-wrap: anywhere
}

.comp-carousel-overview ul {
  margin: 0;
  padding-left: 18px
}

.comp-carousel-state-roles {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px
}

.comp-carousel-state-roles li span,
.comp-carousel-state-roles li small {
  display: block
}

.comp-carousel-state-roles li small {
  color: var(--muted)
}

.comp-analysis-picker-scroll {
  max-height: 55vh;
  overflow: auto;
  margin: 16px 0
}

.comp-analysis-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: none;
  overflow: visible;
  margin: 0
}

.comp-analysis-group {
  margin: 14px 0 0
}

.comp-analysis-group>h4,
.comp-ai-result-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700
}

.comp-analysis-group>h4 span,
.comp-ai-result-group span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500
}

.comp-ai-result-group {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--divider)
}

.comp-ai-results>.comp-ai-result-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0
}

.comp-analysis-picker label {
  display: grid;
  grid-template-columns: auto 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--surface)
}

.comp-analysis-picker img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff
}

.comp-analysis-picker span,
.comp-analysis-picker small {
  display: block;
  min-width: 0
}

.comp-analysis-picker strong {
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere
}

.comp-analysis-picker small {
  margin-top: 4px;
  color: var(--muted)
}

.comp-asset-group {
  margin-bottom: 20px
}

.comp-asset-group>summary {
  cursor: pointer;
  font-weight: 650;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider)
}

.comp-asset-group>summary span {
  color: var(--muted);
  font-size: 12px
}

.comp-asset-group figure {
  margin: 14px 0
}

.comp-asset-group figcaption {
  font-size: 11px;
  color: var(--muted);
  margin-top: 7px;
  overflow-wrap: anywhere
}

.comp-asset-group>p {
  padding: 14px 0;
  font-size: 12px
}

.comp-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 10px;
  overflow-wrap: anywhere
}

.comp-warnings {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted)
}

.comp-warnings summary {
  cursor: pointer
}

.comp-empty {
  padding: 32px;
  color: var(--muted);
  text-align: center
}

.comp-full-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain
}

.comp-admin {
  padding: 24px;
  margin-bottom: 22px
}

.comp-admin>p {
  margin: 12px 0
}

.comp-record-link {
  border: 0;
  background: none;
  color: var(--accent-text);
  text-align: left;
  padding: 8px 0
}

.collection-service-picker {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px
}

.collection-service-picker .field {
  min-width: 180px
}

.collection-service-content {
  min-width: 0
}

.comp-admin .table-wrap {
  margin-top: 16px
}

@media(min-width:1600px) {
  .comp-column {
    flex-basis: 340px
  }
}

.comp-preview-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px
}

.comp-preview-scroll {
  max-height: 70vh;
  overflow: auto;
  overscroll-behavior: contain
}

.comp-preview-scroll .comp-natural {
  width: auto;
  max-width: none
}

.comp-module+.comp-module {
  margin-top: 18px
}

.comp-column {
  max-width: none
}

.comp-column:only-child {
  max-width: 720px
}

.comp-bullets {
  list-style: none;
  padding-left: 0
}

@media(max-width:1150px) {
  .comp-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .comp-history {
    flex-wrap: wrap
  }

  .comp-history>.field {
    flex-basis: 100%
  }
}

@media(max-width:600px) {
  .comp-link-grid {
    grid-template-columns: 1fr
  }

  .comp-input-body {
    padding: 0 16px 18px
  }

  .comp-input-panel>details>summary {
    padding: 16px
  }

  .comp-input-panel summary span {
    display: block;
    margin: 6px 0 0
  }

  .comp-column {
    flex-basis: 280px;
    min-width: 280px
  }

  .comp-batch-body {
    padding: 0 16px 18px
  }

  .comp-admin {
    padding: 16px
  }

  .comp-compare-scroll {
    max-height: 68vh
  }
}

/* Competitor reading: one bounded workspace, G0 content, shared selection. */
.comp-input-panel {
  margin-bottom: 14px
}

.comp-input-panel>details>summary {
  padding: 15px 20px
}

.comp-history {
  margin: 14px 0 18px;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px
}

.comp-collect-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 12px 24px;
}

.comp-collect-option {
  display: grid;
  gap: 6px;
  max-width: 100%;
}

.comp-collect-option .button {
  justify-self: start;
}

.comp-collect-reason {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.comp-input-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}

.comp-input-extras summary {
  cursor: pointer;
}

.comp-input-extras p {
  margin: 8px 0 0;
}

.comp-input-extras .button-row {
  margin-top: 8px;
}

.comp-results-empty {
  margin: 18px 0;
  color: var(--muted);
  line-height: 1.7;
}

.comp-planning-option {
  margin: 0 0 16px;
}

.comp-planning-option p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

.comp-planning-continuation {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--paper);
  overflow-wrap: anywhere;
}

.comp-planning-continuation p {
  margin: 10px 0 0;
  font-size: 13px;
}

.comp-planning-candidates {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  min-width: 0;
}

.comp-planning-candidates .comp-check {
  align-items: start;
  margin: 8px 0;
}

.comp-planning-candidates small {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pp-source-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .comp-planning-continuation .button {
    white-space: normal;
    min-height: 44px;
  }
}

.comp-history .button {
  font-size: 12px;
  min-height: 38px;
  padding: 8px 12px
}

.comp-workspace {
  display: flex;
  flex-direction: column;
  height: min(960px, calc(100dvh - 106px));
  min-height: 480px;
  scroll-margin-top: 88px;
  isolation: isolate
}

.comp-workspace .comp-batch {
  margin: 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--divider);
  background: var(--paper);
  flex-shrink: 0
}

.comp-batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.comp-batch-head>div:first-child {
  min-width: 0
}

.comp-batch-head h2 {
  font-size: 17px;
  overflow-wrap: anywhere
}

.comp-batch-head p {
  font-size: 11px;
  margin-top: 5px
}

.comp-batch-head .comp-actions {
  gap: 8px;
  flex-shrink: 0
}

.comp-batch-head .button {
  font-size: 12px;
  min-height: 34px;
  padding: 6px 10px
}

.comp-workspace .comp-batch-body {
  padding: 0;
  font-size: 12px
}

.comp-batch-body>p,
.comp-batch-body>.notice {
  margin: 10px 0 0
}

.comp-reading-tools {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  padding: 12px 20px 10px;
  flex-shrink: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--divider)
}

.comp-view-row {
  display: contents
}

.comp-view-row>.comp-tabs:not(.comp-material-tabs) {
  grid-column: 1;
  grid-row: 1
}

.comp-view-row>.comp-check,
.comp-view-row>.comp-mode {
  grid-column: 3;
  grid-row: 1;
  margin-left: 12px
}

.comp-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #F5F0E9;
  border: 1px solid var(--divider);
  border-radius: 12px;
  width: fit-content
}

.comp-tabs>[role=tab] {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 9px 14px;
  border-radius: 9px;
  min-height: 40px;
  font-weight: 600;
  white-space: nowrap;
  font-size: 13px
}

.comp-tabs>[role=tab]:hover {
  background: #FFFFFFA8;
  color: var(--ink)
}

.comp-tabs>[role=tab][aria-selected=true] {
  background: var(--paper);
  border-color: #EFC5A2;
  color: var(--accent-text);
  box-shadow: 0 2px 4px #5D442407
}

.comp-view-row .comp-check {
  font-size: 12px;
  min-height: 38px
}

.comp-mode {
  margin: 0;
  min-width: 0
}

.comp-mode select {
  min-height: 38px;
  padding: 7px 28px 7px 10px;
  font-size: 12px
}

.comp-product-tools {
  grid-column: 1/-1;
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 10px
}

.comp-workspace .comp-selection {
  flex: 1;
  min-width: 0;
  gap: 6px;
  margin: 0;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin
}

.comp-workspace .comp-selection label {
  flex-shrink: 0
}

.comp-workspace .comp-selection label {
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--divider);
  border-radius: 9px;
  background: var(--paper);
  font-size: 10px;
  min-height: 42px;
  line-height: 1.35;
  cursor: pointer
}

.comp-selection label:has(input:checked) {
  border-color: #EFC5A2;
  background: #FFF5E9
}

.comp-selection label:hover {
  background: #F5F0E9
}

.comp-selection label span {
  display: block;
  min-width: 0
}

.comp-selection label b {
  display: block;
  font: 11px/1.5 "Cascadia Code", Consolas, monospace;
  color: var(--ink)
}

.comp-pin-control {
  display: grid;
  gap: 3px;
  flex: 0 0 190px;
  min-width: 0;
  font-size: 10px;
  color: var(--muted)
}

.comp-pin-control select {
  font-size: 11px;
  min-height: 33px;
  width: 100%;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  padding: 5px 8px
}

.comp-material-tabs {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin-left: 12px;
  background: transparent;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
  gap: 6px
}

.comp-view-row>.comp-material-tabs {
  grid-column: 2;
  grid-row: 1
}

.comp-material-tabs>[role=tab] {
  min-height: 34px;
  padding: 6px 13px;
  border-color: var(--divider);
  font-size: 12px
}

.comp-material-tabs>[role=tab][aria-selected=true] {
  background: var(--accent-soft);
  box-shadow: none
}

.comp-material-anchors {
  grid-column: 1/-1;
  grid-row: 3;
  display: flex;
  gap: 6px;
  min-width: 0;
  margin-top: 9px;
  overflow-x: auto;
  scrollbar-width: thin
}

.comp-material-anchors .button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11px;
  white-space: nowrap
}

.comp-material-anchors [aria-current=location] {
  border-color: #EFC5A2;
  background: var(--accent-soft);
  color: var(--accent-text)
}

.comp-reading-tools:has(.comp-material-anchors) .comp-reading-hint {
  grid-row: 4
}

.comp-reading-hint {
  grid-column: 1/-1;
  grid-row: 3;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 8px;
  color: var(--muted)
}

.comp-overflow-hint {
  margin-left: 12px
}

.comp-narrow-hint {
  display: none
}

.comp-reading-panel {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0
}

.comp-workspace .comp-compare-scroll {
  width: 100%;
  height: 100%;
  max-height: none;
  border-top: 0;
  container-type: inline-size;
  scrollbar-color: #B8B0A6 #F3EEE7;
  scrollbar-width: auto;
  overflow-anchor: none
}

.comp-workspace .comp-columns {
  width: max-content;
  height: fit-content;
  min-height: 100%
}

.comp-workspace .comp-column {
  width: 640px;
  flex: 1 0 640px;
  min-width: 640px;
  position: relative;
  max-width: none
}

.comp-workspace .comp-column:only-child {
  max-width: 1280px
}

.comp-workspace .comp-column.is-pinned {
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 5px 0 9px #5D442418;
  border-right-color: #DEBEA1
}

.comp-workspace .comp-source-title {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 4px;
  align-content: start;
  min-height: 146px;
  padding: 12px 18px;
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--divider)
}

.comp-source-identity {
  display: contents
}

.comp-source-identity>div {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  flex-wrap: wrap;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 20px
}

.comp-source-identity .comp-image-button {
  grid-column: 1;
  grid-row: 1/span 2;
  width: 46px;
  height: 58px;
  border-radius: 8px
}

.comp-source-identity .comp-source-image-empty {
  grid-column: 1;
  grid-row: 1/span 2;
  width: 46px;
  height: 58px;
  min-height: 0;
  padding: 4px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.4;
  text-align: center
}

.comp-source-identity .eyebrow {
  margin-bottom: 0;
  font-size: 10px;
  letter-spacing: 0
}

.comp-source-identity .mono {
  font-size: 11px
}

.comp-pinned-label {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 1px 5px
}

.comp-source-name {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.5;
  font-size: 13px
}

.comp-source-name summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  min-height: 39px
}

.comp-source-name summary:hover {
  color: var(--accent-text)
}

.comp-source-name p {
  padding: 10px 0 4px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.7;
  overflow-wrap: anywhere
}

.comp-workspace .comp-part-meta {
  grid-column: 1/-1;
  grid-row: 3;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  gap: 8px;
  min-height: 25px
}

.comp-part-meta .badge {
  font-size: 10px;
  padding: 3px 7px
}

.comp-part-meta .button {
  min-height: 27px;
  padding: 4px 8px;
  font-size: 11px;
  margin-left: auto
}

.comp-capture-time {
  grid-column: 1/-1;
  grid-row: 4;
  font-size: 10px;
  color: var(--muted);
  margin: 0
}

.comp-column-content {
  padding: 14px 18px 24px
}

.comp-part-notes {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 18px
}

.comp-part-notes>summary {
  cursor: pointer;
  width: fit-content;
  padding: 4px 0
}

.comp-part-notes>div {
  padding: 10px 12px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: #F9F5EF;
  line-height: 1.7;
  margin-top: 5px
}

.comp-part-notes ul {
  padding-left: 16px;
  margin: 0 0 10px
}

.comp-part-notes .button {
  margin-top: 9px;
  min-height: 32px;
  font-size: 11px;
  padding: 6px 9px
}

.comp-part-notes .comp-error {
  margin: 0;
  font-size: 12px
}

.comp-bullets li {
  padding-bottom: 24px
}

.comp-bullets p,
.comp-aligned-point details p {
  font-size: 14px;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-top: 10px;
  color: var(--ink)
}

.comp-bullets summary,
.comp-aligned-point details summary {
  font-size: 12px;
  font-weight: 650;
  color: var(--accent-text);
  cursor: pointer
}

.comp-aligned-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  min-width: 0
}

.comp-aligned-table th,
.comp-aligned-table td {
  min-width: 380px;
  max-width: 760px;
  border: 0;
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 0;
  vertical-align: top;
  background: var(--paper);
  white-space: normal;
  font-weight: 400;
  text-align: left
}

.comp-aligned-table th {
  position: sticky;
  top: 0;
  z-index: 2
}

.comp-aligned-table th:last-child,
.comp-aligned-table td:last-child {
  border-right: 0
}

.comp-aligned-table .comp-source-title {
  position: static;
  border: 0
}

.comp-aligned-table td.comp-aligned-point {
  padding: 18px
}

.comp-aligned-table .comp-notes-row td {
  padding: 10px 18px 0
}

.comp-aligned-table .comp-notes-row .comp-part-notes {
  margin-bottom: 10px
}

.comp-aligned-table td.is-pinned {
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 5px 0 9px #5D442418
}

.comp-aligned-table th.is-pinned {
  left: 0;
  z-index: 4;
  box-shadow: 5px 0 9px #5D442418
}

.comp-material-table .comp-material-category-head th {
  position: static;
  min-width: 0;
  max-width: none;
  padding: 9px 16px;
  background: #F7F1E9;
  color: var(--ink);
  font-weight: 700
}

.comp-material-category-bar {
  position: sticky;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 64px)
}

.comp-material-category-head .button {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600
}

.comp-material-table .comp-material-cell {
  padding: 12px 16px 14px;
  isolation: isolate
}

.comp-material-table thead th {
  z-index: 5
}

.comp-material-table thead th.is-pinned {
  z-index: 6
}

.comp-material-cell-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px
}

.comp-material-cell-head span {
  color: var(--muted);
  white-space: nowrap
}

.comp-material-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.comp-material-list figure {
  min-width: 0;
  margin: 0
}

.comp-source-retry {
  grid-column: 1/-1;
  grid-row: 5;
  min-width: 0;
  display: grid;
  gap: 5px;
  justify-items: start;
}

.comp-source-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  font-size: 11px;
}

.comp-source-statuses>span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.comp-source-retry .badge {
  padding: 3px 6px;
  font-size: 10px;
}

.comp-source-retry .button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
}

.comp-source-retry p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: normal;
}

.comp-source-retry-reason,.comp-source-analysis-note {
  color: var(--muted);
}

.comp-source-failure {
  color: var(--danger, #9b352b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comp-source-attempt-error {
  min-width: 0;
  color: var(--danger, #9b352b);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.comp-source-attempt-error summary {
  cursor: pointer;
}

@media (max-width: 600px) {
  .comp-source-retry .button {min-height: 44px;}
}

.comp-material-list .comp-image-button.is-large {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  cursor: zoom-in
}

.comp-material-list .comp-image-button.is-large img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain
}

.comp-material-list figcaption {
  padding-top: 5px;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere
}

.comp-material-list figcaption span,
.comp-material-list figcaption small {
  display: block
}

.comp-material-list figcaption small {
  margin-top: 2px;
  color: var(--muted)
}

.comp-material-module-list,
.comp-material-brand {
  display: grid;
  gap: 14px;
  min-width: 0
}

.comp-material-module-list .comp-asset-group,
.comp-material-brand .comp-asset-group {
  min-width: 0
}

.comp-material-brand-component {
  min-width: 0
}

.comp-material-brand-component > strong {
  display: block;
  margin-bottom: 8px
}

.comp-brand-stage--compare {
  min-height: 300px;
  aspect-ratio: 1/1
}

.comp-brand-stage--compare .comp-brand-stage-panels {
  display: block;
  left: 28%;
  right: 3%;
  top: 16%;
  bottom: 5%
}

.comp-brand-stage--compare.is-coverless .comp-brand-stage-panels {
  left: 4%
}

.comp-material-brand-carousel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: rgba(255,255,255,.9);
  border-radius: 8px;
  padding: 8px
}

.comp-material-brand-carousel .comp-brand-panel {
  display: block;
  flex: 1;
  min-height: 0
}

.comp-material-brand-carousel [data-comp-carousel-slide][hidden] {
  display: none
}

.comp-material-brand-carousel .comp-brand-card-panel {
  height: 100%
}

.comp-material-brand-controls {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px
}

.comp-unavailable,
.comp-order-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  padding: 10px 0
}

.comp-order-note {
  margin-bottom: 12px
}

.comp-asset-group>summary {
  font-size: 13px
}

.comp-asset-group h3 {
  font-size: 13px
}

.comp-asset-group figure {
  margin: 12px 0
}

.comp-asset-group figcaption span {
  display: block;
  color: var(--ink)
}

.comp-asset-group figcaption small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  max-width: 100%
}

.comp-asset-list .comp-image-button.is-large {
  height: 310px;
  max-height: 310px;
  background: #fff
}

.comp-asset-list .comp-image-button.is-large img {
  height: 100%;
  width: 100%;
  max-height: none
}

.comp-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start
}

.comp-brand-copy {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: rgba(255, 252, 247, .72)
}

.comp-brand-copy h3 {
  margin: 0 0 8px;
  font-size: 15px
}

.comp-brand-copy p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text)
}

.comp-brand-copy p:last-child {
  margin-bottom: 0
}

.comp-brand-heading {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3
}

.comp-brand-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1464/625;
  min-height: 540px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--divider);
  background: #f3f3f3;
  container-type: inline-size;
  container-name: brand-stage
}

.comp-brand-stage-bg {
  position: absolute;
  inset: 0
}

.comp-brand-stage-bg .comp-image-button,
.comp-brand-stage-bg .comp-image-button.is-large {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent
}

.comp-brand-stage-bg .comp-image-button img,
.comp-brand-stage-bg .comp-image-button.is-large img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center left
}

.comp-brand-stage-panels {
  position: absolute;
  left: 31%;
  right: 4%;
  top: 22%;
  bottom: 5%;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.8%;
  min-height: 0
}

/* hero_image_logo：对齐亚马逊 — 封面全幅 + 轮播卡水平叠在 logo 区右侧 */
.comp-brand-stage--hero .comp-brand-stage-panels {
  left: 31.7%;
  right: 0;
  top: 23.8%;
  bottom: 3.7%;
  width: auto;
  display: block;
  grid-template-columns: none
}

.comp-brand-carousel {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 2.05cqw;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 2%;
  scrollbar-width: thin
}

.comp-brand-slide {
  position: relative;
  flex: 0 0 auto;
  width: 24.73cqw;
  height: 100%;
  aspect-ratio: 362 / 453;
  border-radius: 2px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12)
}

.comp-brand-slide--media .comp-brand-card {
  width: 100%;
  height: 100%;
  margin: 0
}

.comp-brand-slide--media .comp-brand-card .comp-image-button,
.comp-brand-slide--media .comp-brand-card .comp-image-button.is-large {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 0
}

.comp-brand-slide--media .comp-brand-card .comp-image-button img,
.comp-brand-slide--media .comp-brand-card .comp-image-button.is-large img {
  object-fit: cover
}

.comp-brand-slide-caption {
  margin: 8px 10px 10px;
  font-size: clamp(11px, 1.1cqw, 13px);
  line-height: 1.3;
  color: #0f1111
}

.comp-brand-slide-caption--overlay {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .72);
  border-radius: 2px
}

.comp-brand-slide-caption--overlay strong,
.comp-brand-slide-caption--overlay p {
  display: block;
  margin: 0
}

.comp-brand-slide-caption--overlay p+p,
.comp-brand-slide-caption--overlay strong+p {
  margin-top: 4px
}

.comp-brand-slide--about {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #0f1111
}

.comp-brand-slide-logo {
  flex: 0 0 auto;
  padding: 16px 14px 0
}

.comp-brand-slide-logo .comp-image-button,
.comp-brand-slide-logo .comp-image-button.is-large {
  width: 100%;
  height: auto;
  aspect-ratio: 315 / 145;
  max-height: none;
  padding: 0;
  border: 0;
  background: #111
}

.comp-brand-slide-logo .comp-image-button img,
.comp-brand-slide-logo .comp-image-button.is-large img {
  object-fit: contain
}

.comp-brand-slide-copy {
  flex: 1;
  padding: 14px 16px 16px;
  overflow: auto
}

.comp-brand-slide-copy strong {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(12px, 1.2cqw, 14px);
  letter-spacing: .04em
}

.comp-brand-slide-copy p {
  margin: 0 0 8px;
  font-size: clamp(11px, 1.05cqw, 13px);
  line-height: 1.45;
  color: #333
}

.comp-brand-slide--asin {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #fff
}

.comp-brand-asin-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  min-height: 0
}

.comp-brand-asin-cell {
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #eee;
  background: #fafafa
}

.comp-brand-asin-cell .comp-image-button,
.comp-brand-asin-cell .comp-image-button.is-large {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  border: 0
}

.comp-brand-asin-cell .comp-image-button img,
.comp-brand-asin-cell .comp-image-button.is-large img {
  object-fit: cover
}

.comp-brand-slide--asin .comp-brand-slide-caption {
  flex: 0 0 auto;
  margin: 8px 2px 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.comp-brand-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 7px 8px 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08)
}

.comp-brand-card-panel {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  min-width: 0;
  min-height: 0
}

.comp-brand-card {
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff
}

.comp-brand-card .comp-image-button,
.comp-brand-card .comp-image-button.is-large {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff
}

.comp-brand-card .comp-image-button img,
.comp-brand-card .comp-image-button.is-large img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center
}

.comp-brand-card .comp-error {
  display: block;
  margin-top: 2px;
  font-size: 11px
}

.comp-brand-panel-cta {
  margin: 8px 2px 2px;
  font-size: clamp(11px, 1.35vw, 14px);
  line-height: 1.25;
  font-weight: 700;
  color: #0f1111;
  flex: 0 0 auto
}

.comp-module--story-strip figcaption small {
  display: block;
  margin-top: 4px;
  opacity: .72
}

.comp-thumbnail-grid figure {
  min-width: 0;
  margin: 12px 0 4px
}

.comp-thumbnail-grid .comp-image-button.is-large {
  aspect-ratio: 1;
  height: auto;
  max-height: none;
  min-height: 0;
  padding: 6px;
  background: #fff
}

.comp-thumbnail-grid .comp-image-button.is-large img {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: 1
}

.comp-module .comp-image-button.is-large {
  height: 205px;
  min-height: 0;
  background: #fff
}

.comp-module .comp-image-button.is-large img {
  height: 100%;
  max-height: none;
  width: 100%
}

.comp-module .comp-thumbnail-grid .comp-image-button.is-large {
  height: auto
}

.comp-carousel-states>summary {
  font-size: 12px;
  cursor: pointer;
  padding: 6px 0;
  color: var(--accent-text)
}

.comp-module--carousel {
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 252, 247, .72)
}

.comp-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

.comp-carousel-head strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink)
}

.comp-carousel-count {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums
}

.comp-carousel-viewport {
  position: relative
}

.comp-carousel-slide {
  margin: 0
}

.comp-carousel-slide figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted)
}

.comp-carousel-arrow {
  position: absolute;
  top: 102px;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 1px 6px rgba(28, 25, 23, .18);
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1
}

.comp-carousel-arrow span {
  display: block;
  margin-top: -2px
}

.comp-carousel-arrow:hover {
  background: #fff;
  color: var(--accent-text)
}

.comp-carousel-arrow--prev {
  left: 8px
}

.comp-carousel-arrow--next {
  right: 8px
}

.comp-carousel-tabs,
.comp-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px
}

.comp-carousel-tab {
  appearance: none;
  border: 1px solid var(--divider);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer
}

.comp-carousel-tab.is-active {
  border-color: var(--accent);
  background: rgba(255, 138, 61, .12);
  color: var(--accent-text)
}

.comp-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #D9D0C4;
  cursor: pointer
}

.comp-carousel-dot.is-active {
  background: var(--accent)
}

.comp-module .comp-image-button {
  cursor: zoom-in
}

/* 无文案轮播：圆点叠在图片底部（Amazon module-13） */
.comp-module--plain-carousel .comp-carousel-viewport {
  overflow: hidden;
  border-radius: 10px
}

.comp-module--plain-carousel .comp-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 3;
  margin: 0;
  justify-content: center;
  gap: 8px;
  pointer-events: none
}

.comp-module--plain-carousel .comp-carousel-dot {
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background: #fff;
  box-sizing: border-box
}

.comp-module--plain-carousel .comp-carousel-dot.is-active {
  background: #DE7921
}

.comp-module--plain-carousel .comp-carousel-slide .comp-image-button.is-large {
  border-radius: 0
}

/* 文案轮播：贴合 Amazon 顶部黑条 + 白字 + 下划线激活 */
.comp-module--nav-carousel .comp-carousel-viewport {
  overflow: hidden;
  border-radius: 10px
}

.comp-carousel-topnav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 8px;
  padding: 6px 44px;
  background: rgba(0, 0, 0, .8);
  min-height: 44px;
  box-sizing: border-box
}

.comp-carousel-topnav-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 8px 10px;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: .8em;
  text-decoration-thickness: 3px;
  white-space: nowrap
}

.comp-carousel-topnav-btn.is-active {
  text-decoration: underline
}

.comp-carousel-topnav-btn:hover {
  opacity: .92
}

.comp-module--nav-carousel .comp-carousel-arrow {
  top: calc(44px + (205px / 2));
  z-index: 4
}

.comp-module--nav-carousel .comp-carousel-slide .comp-image-button.is-large {
  border-radius: 0
}

/* Amazon Premium Module 5：商品比较表是横向商品列，不是逐图轮播 */
.comp-comparison-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 200px);
  gap: 18px;
  overflow-x: auto;
  padding: 12px 4px 18px;
  scrollbar-gutter: stable
}

.comp-comparison-strip figure {
  margin: 0;
  min-width: 0
}

.comp-comparison-strip .comp-image-button.is-large,
.comp-comparison-strip .comp-image-button.is-large img {
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 225;
  object-fit: contain;
  background: #fff
}

.comp-comparison-strip figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center
}

.comp-image-failure {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.6
}

.comp-image-failure[hidden],
.comp-image-button img[hidden] {
  display: none
}

.comp-workspace .comp-empty {
  font-size: 13px;
  line-height: 1.8
}

dialog.dialog--media {
  width: min(1480px, calc(100vw - 48px));
  height: calc(100dvh - 48px);
  max-width: none;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  padding: 0
}

dialog.dialog--media:has(.comp-ai-compare-shell) {
  width: min(96vw, calc(100vw - 24px))
}

.comp-material-compare-dialog {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  gap: 10px
}

.comp-material-dialog-categories {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px
}

.comp-material-dialog-categories .button {
  white-space: nowrap
}

.comp-material-dialog-categories [aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent)
}

.comp-material-dialog-lightbox {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface, #fffaf4)
}

.comp-material-dialog-lightbox[hidden] {
  display: none
}

.comp-material-dialog-lightbox .comp-preview-scroll {
  flex: 1;
  min-height: 0
}

.comp-ai-compare-shell {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: #F1EDE7;
  overscroll-behavior: contain
}

.comp-ai-compare-board {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  padding: 14px;
  box-sizing: border-box
}

.comp-ai-compare-board[data-count="1"] {
  min-width: 0;
  width: 100%
}

.comp-ai-compare-board[data-count="1"] .comp-ai-compare-column {
  width: min(720px, 100%);
  flex-basis: min(720px, 100%)
}

/* 2–4 列均分弹窗宽度，避免固定 320×N 撑出横向滚动条 */
.comp-ai-compare-board[data-count="2"],
.comp-ai-compare-board[data-count="3"],
.comp-ai-compare-board[data-count="4"] {
  width: 100%;
  min-width: 0
}

.comp-ai-compare-board[data-count="2"] .comp-ai-compare-column,
.comp-ai-compare-board[data-count="3"] .comp-ai-compare-column,
.comp-ai-compare-board[data-count="4"] .comp-ai-compare-column {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none
}

/* 窄屏保留可读列宽，在弹窗内部横向滚动比较。 */
@media (max-width: 768px) {
  .comp-ai-compare-board[data-count="2"],
  .comp-ai-compare-board[data-count="3"],
  .comp-ai-compare-board[data-count="4"] {
    width: max-content;
    min-width: 100%
  }

  .comp-ai-compare-board[data-count="2"] .comp-ai-compare-column,
  .comp-ai-compare-board[data-count="3"] .comp-ai-compare-column,
  .comp-ai-compare-board[data-count="4"] .comp-ai-compare-column {
    flex: 0 0 320px;
    width: 320px;
    min-width: 320px
  }
}

.comp-ai-compare-column {
  display: flex;
  flex-direction: column;
  flex: 0 0 320px;
  width: 320px;
  min-width: 320px;
  height: calc(100dvh - 220px);
  max-height: calc(100dvh - 220px);
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden
}

.comp-ai-compare-column > header {
  flex-shrink: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--divider);
  background: #F7F3EE
}

.comp-ai-compare-column > header .eyebrow {
  display: block;
  margin-bottom: 4px
}

.comp-ai-compare-column > header strong {
  display: block;
  font-size: 14px
}

.comp-ai-compare-column > header p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.comp-ai-compare-column-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  display: grid;
  gap: 12px;
  align-content: start;
  overscroll-behavior: contain
}

.comp-ai-compare-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: #FFFCFA
}

.comp-ai-compare-carousel {
  padding: 10px;
  background: #FFFCFA
}

.comp-ai-compare-carousel .comp-analysis-carousel-viewport {
  display: grid;
  gap: 0
}

.comp-ai-compare-carousel .comp-ai-compare-card {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent
}

.comp-ai-compare-group {
  margin: 4px 0 0;
  font-size: 12px
}

.comp-ai-compare-card-image {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
  background: #F1EDE7;
  border-radius: 10px;
  overflow: hidden
}

.comp-ai-compare-thumb {
  display: block;
  max-width: 100%;
  max-height: 280px;
  width: auto;
  height: auto;
  object-fit: contain
}

.comp-ai-compare-card-body strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px
}

.comp-ai-compare-card-body dl {
  display: grid;
  gap: 8px;
  margin: 0
}

.comp-ai-compare-card-body dt {
  font-size: 11px;
  color: var(--muted)
}

.comp-ai-compare-card-body dd {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink)
}

.comp-ai-compare-card-body ul {
  margin: 4px 0 0;
  padding-left: 1.1em
}

.dialog--media .dialog-body:has(.comp-ai-compare-shell) {
  gap: 10px;
  overflow: hidden
}

.dialog--media .dialog-body:has(.comp-ai-compare-shell) > .dialog-intro {
  flex-shrink: 0;
  margin: 0
}

dialog.dialog--media[open] {
  display: flex;
  flex-direction: column
}

.dialog--media .dialog-head {
  flex-shrink: 0;
  position: static;
  padding: 15px 22px
}

.dialog--media .dialog-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding: 16px 22px 22px
}

.dialog--media .comp-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-shrink: 0
}

.comp-preview-context {
  min-width: 0
}

.comp-preview-context strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px
}

.comp-preview-context p {
  font-size: 11px;
  margin-top: 5px
}

.comp-preview-toolbar .button-row {
  flex-shrink: 0
}

.dialog--media .comp-preview-scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
  background: #F1EDE7;
  border: 1px solid var(--divider);
  border-radius: 12px;
  position: relative
}

.dialog--media .comp-full-image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  padding: 12px
}

.dialog--media .comp-full-image.comp-natural {
  width: auto;
  height: auto;
  max-width: none;
  object-fit: initial;
  padding: 0
}

.dialog--media .comp-full-image[hidden] {
  display: none
}

.comp-preview-status {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 12px;
  background: var(--paper);
  padding: 4px 8px;
  border-radius: 6px
}

.comp-preview-status:empty {
  display: none
}

@container(max-width:760px) {
  .comp-workspace .comp-column.is-pinned {
    position: relative;
    left: auto;
    box-shadow: none
  }

  .comp-aligned-table td.is-pinned {
    position: static;
    box-shadow: none
  }

  .comp-aligned-table th.is-pinned {
    left: auto;
    box-shadow: none
  }
}

@media(max-width:1000px) {
  .comp-product-tools {
    flex-wrap: wrap;
    gap: 8px
  }

  .comp-pin-control {
    display: flex;
    align-items: center;
    flex-basis: auto;
    gap: 8px
  }

  .comp-pin-control select {
    max-width: 240px
  }

  .comp-batch-head {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .comp-batch-head .comp-actions {
    flex-wrap: wrap
  }

  .comp-overflow-hint {
    display: none
  }
}

@media(max-width:800px) {
  .comp-reading-tools {
    display: flex;
    flex-direction: column;
    align-items: stretch
  }

  .comp-view-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px
  }

  .comp-view-row>.comp-check,
  .comp-view-row>.comp-mode {
    margin-left: 0
  }

  .comp-material-tabs {
    margin: 10px 0 0
  }

  .comp-product-tools {
    width: 100%
  }

  .comp-pin-control>span {
    white-space: nowrap
  }
}

@media(max-width:600px) {
  .comp-workspace {
    height: calc(100dvh - 84px);
    min-height: 570px;
    scroll-margin-top: 72px;
    border-radius: 14px
  }

  .comp-workspace .comp-batch {
    padding: 12px
  }

  .comp-batch-head {
    gap: 8px
  }

  .comp-batch-head h2 {
    font-size: 15px
  }

  .comp-batch-head .button {
    font-size: 11px;
    min-height: 30px;
    padding: 5px 8px
  }

  .comp-reading-tools {
    padding: 10px 12px
  }

  .comp-view-row {
    gap: 7px
  }

  .comp-tabs>[role=tab] {
    font-size: 12px;
    min-height: 36px;
    padding: 7px 10px
  }

  .comp-view-row .comp-check {
    min-height: 30px;
    font-size: 11px
  }

  .comp-product-tools {
    margin-top: 8px
  }

  .comp-workspace .comp-selection {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    flex-basis: 100%;
    padding-bottom: 5px
  }

  .comp-workspace .comp-selection label {
    flex-shrink: 0
  }

  .comp-mode select {
    font-size: 11px;
    min-height: 32px
  }

  .comp-material-tabs {
    margin-top: 8px;
    gap: 4px
  }

  .comp-material-tabs>[role=tab] {
    font-size: 11px;
    min-height: 32px;
    padding: 5px 9px
  }

  .comp-pin-control {
    font-size: 10px
  }

  .comp-pin-control select {
    font-size: 10px;
    max-width: 205px;
    min-height: 29px
  }

  .comp-reading-hint {
    font-size: 10px;
    margin-top: 7px
  }

  .comp-narrow-hint {
    display: block
  }

  .comp-workspace .comp-column {
    width: 285px;
    flex-basis: 285px;
    min-width: 285px
  }

  .comp-aligned-table th,
  .comp-aligned-table td {
    min-width: 285px
  }

  .comp-workspace .comp-source-title {
    padding: 10px 12px;
    min-height: 148px
  }

  .comp-column-content {
    padding: 10px 12px 18px
  }

  .comp-aligned-table td.comp-aligned-point {
    padding: 14px 12px
  }

  .comp-material-table .comp-material-cell {
    padding: 10px 12px 12px
  }

  .comp-material-list {
    gap: 7px
  }

  .comp-bullets p,
  .comp-aligned-point details p {
    font-size: 14px;
    line-height: 1.8
  }

  .comp-thumbnail-grid {
    gap: 8px
  }

  .comp-asset-list .comp-image-button.is-large {
    height: 240px
  }

  .comp-history>.field {
    flex-basis: 100%
  }

  .comp-history .comp-actions {
    gap: 7px
  }

  .comp-history .button {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 11px
  }

  dialog.dialog--media {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0
  }

  .dialog--media .dialog-head {
    padding: 12px 14px
  }

  .dialog--media .dialog-body {
    padding: 12px;
    gap: 0
  }

  .dialog--media .comp-preview-toolbar {
    flex-wrap: wrap;
    gap: 10px
  }

  .comp-preview-toolbar .button-row {
    width: 100%;
    justify-content: space-between
  }

  .comp-preview-context p {
    font-size: 10px
  }
}

/* Collection quality belongs to the existing compact reading toolbar. */
.research-quality-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px
}

.research-quality-summary>span:first-child {
  font-weight: 650;
  color: var(--ink)
}

.research-quality-actions {
  margin-bottom: 14px;
  gap: 8px;
  align-items: center;
  font-size: 12px
}

.research-quality-actions>.muted {
  margin-left: auto
}

.product-table-image {
  width: 64px;
  min-width: 64px;
  height: 64px;
  display: grid;
  place-items: center
}

.product-table-image img {
  width: 64px;
  height: 64px;
  object-fit: contain
}

.product-table-image .product-image-empty {
  font-size: 11px;
  text-align: center
}

.research-quality-actions .button {
  white-space: normal
}

#research-filter-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto
}

#research-filter-fields>.field {
  min-width: 0
}

#research-filter-fields>.seller-date-range,
#research-filter-fields>.research-filter-help {
  grid-column: 1/-1
}

#research-filter-fields .research-filter-help {
  display: grid;
  gap: 5px
}

#research-review-coverage[hidden] {
  display: none
}

@media(max-width:1150px) {
  #research-filter-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  #research-filter-fields>.button {
    grid-column: 1/-1;
    justify-self: end
  }
}

@media(max-width:650px) {
  #research-filter-fields {
    grid-template-columns: minmax(0, 1fr)
  }

  #research-filter-fields>.field {
    min-width: 0
  }

  #research-filter-fields>.button {
    justify-self: stretch
  }
}

@media(max-width:720px) {
  .research-quality-actions>.muted {
    margin-left: 0;
    flex-basis: 100%
  }

  .research-quality-summary {
    gap: 5px 12px
  }
}


.ai-classification-dialog [hidden] {
  display: none !important;
}

/* Saved offer prices share the existing card, table and overview surfaces. */
.offer-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  max-width: 100%;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.offer-price .offer-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.offer-price .offer-amount {
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
}

.offer-price .offer-original {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.offer-price .offer-tag {
  display: inline-block;
  max-width: 100%;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.offer-price .offer-tag--muted {
  background: var(--canvas);
  color: var(--muted);
}

.offer-price .offer-provenance {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.research-price-basis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: 14px 0 12px;
}

.research-price-basis>span:first-child {
  font-size: 12px;
  font-weight: 600;
}

.research-price-basis .research-hint {
  margin: 0;
  flex: 1 1 250px;
}

.product-card-metrics .offer-price {
  gap: 3px;
}

.type-product-basics>.offer-price {
  font-size: 15px;
  min-width: 0;
}

.type-product-basics {
  align-items: flex-start;
}

@media (max-width:600px) {
  .research-price-basis .research-hint {
    flex-basis: 100%;
  }

  .research-price-basis .trend-ranges {
    flex-wrap: wrap;
  }
}

/* Shared category directory uses the existing readable panels and controls. */
.catalog-reader-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
  color: var(--color-ink-muted, #596579);
  font-size: 12px
}

.catalog-time {
  display: block;
  font-size: 17px;
  line-height: 1.6;
  margin: 12px 0;
  overflow-wrap: anywhere
}

#catalog-live .stat {
  min-width: 0
}

.catalog-scope {
  border: 1px solid var(--color-border, #e6ddd3);
  border-radius: 12px;
  padding: 18px;
  margin: 18px 0;
  min-width: 0
}

.catalog-scope legend {
  padding: 0 8px;
  font-weight: 600
}

.catalog-root-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

.catalog-root-grid .check-label {
  align-items: flex-start;
  white-space: normal
}

#catalog-config [hidden] {
  display: none
}

#catalog-live .notice {
  margin: 16px 0
}

#catalog-live details {
  margin-top: 18px;
  overflow-wrap: anywhere
}

@media(max-width:900px) {
  .catalog-root-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:650px) {
  .catalog-root-grid {
    grid-template-columns: 1fr
  }

  .catalog-reader-meta {
    align-items: flex-start
  }

  .catalog-time {
    font-size: 15px
  }
}

@media(max-width:650px) {

  #catalog-live .stats,
  #catalog-config .collector-config-grid {
    grid-template-columns: 1fr
  }

  #catalog-live .stat {
    padding: 12px 0
  }

  .catalog-time {
    margin: 6px 0
  }
}

/* Category maintenance uses the shared warm G0 reading surface. */
.catalog-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0
}

.catalog-counts>div {
  padding: 12px 16px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.catalog-counts strong {
  font-size: 24px
}

.catalog-counts span {
  font-size: 13px
}

.catalog-errors article {
  padding: 16px 0;
  border-bottom: 1px solid var(--divider);
  overflow-wrap: anywhere
}

.catalog-errors article>strong {
  font-size: 14px
}

.catalog-errors p {
  margin: 8px 0
}

.catalog-error-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px
}

#catalog-live details {
  margin-top: 18px
}

#catalog-live summary {
  cursor: pointer;
  padding: 8px 0
}

.catalog-diagnostic {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  max-height: 65vh;
  overflow: auto
}

@media(max-width:600px) {
  .catalog-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px
  }

  .catalog-counts>div {
    padding: 10px
  }

  .catalog-time {
    overflow-wrap: anywhere
  }
}

#catalog-live .notice {
  display: block
}

#catalog-live .notice strong {
  display: block
}

#catalog-live .notice p {
  margin: 7px 0 0
}

.catalog-branch-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
  margin-bottom: 20px
}

.catalog-branch-options .field {
  margin: 0;
  min-width: 0
}

.catalog-branch-options select {
  width: 100%;
  min-width: 0
}

.catalog-branch-target {
  padding: 16px 18px;
  margin: 16px 0;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--paper);
  overflow-wrap: anywhere
}

.catalog-branch-target>span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px
}

.catalog-branch-target>strong {
  font-size: 14px;
  line-height: 1.7
}

.catalog-branch-target>p {
  font-size: 13px;
  margin: 8px 0 0
}

.catalog-branch-progress {
  border-top: 1px solid var(--divider);
  margin-top: 24px;
  padding-top: 20px;
  overflow-wrap: anywhere
}

.catalog-branch-progress .panel-heading {
  padding: 0;
  border: 0;
  align-items: flex-start
}

.catalog-branch-progress .panel-heading>div {
  min-width: 0
}

.catalog-branch-progress h3 {
  font-size: 16px;
  margin: 0
}

.catalog-branch-progress details {
  margin-top: 16px
}

.catalog-branch-progress summary {
  cursor: pointer;
  padding: 8px 0
}

@media(max-width:650px) {
  .catalog-branch-options {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .catalog-branch-progress .button-row>.button {
    flex: 1 1 40%;
    white-space: normal
  }

  #catalog-branch-picker>.button-row>.button {
    flex: 1 1 auto;
    white-space: normal
  }

  .catalog-branch-target {
    padding: 12px
  }
}

/* Category translation uses existing readable panels and controls. */
.catalog-zh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--divider)
}

.catalog-zh-row>div {
  min-width: 0;
  overflow-wrap: anywhere
}

.catalog-zh-row p {
  margin: 6px 0
}

.catalog-zh-row .button {
  flex-shrink: 0
}

#catalog-zh-records {
  margin-top: 20px
}

#catalog-zh-records .catalog-branch-options {
  align-items: end
}

.catalog-workspace [hidden] {
  display: none !important
}

.catalog-workspace {
  min-width: 0
}

#catalog-summary {
  padding: 22px 24px;
  margin-bottom: 18px
}

.catalog-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px
}

.catalog-summary-grid>div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.catalog-summary-grid>div+div {
  border-left: 1px solid var(--divider);
  padding-left: 24px
}

.catalog-summary-grid span,
.catalog-summary-grid small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere
}

.catalog-summary-grid strong {
  font-size: 25px;
  color: var(--heading);
  line-height: 1.5
}

.catalog-summary-grid .catalog-summary-time {
  font-size: 19px
}

.catalog-budget-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0
}

.catalog-budget-values dt {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6
}

.catalog-budget-values dd {
  margin: 4px 0 0;
  font-size: 25px;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  line-height: 1.5
}

.catalog-budget-values dd[data-budget=remaining] {
  color: var(--accent-text)
}

.catalog-summary-status {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--divider);
  margin-top: 18px;
  padding-top: 14px;
  overflow-wrap: anywhere
}

.catalog-summary-status>strong {
  color: var(--accent-text);
  font-size: 14px
}

.catalog-summary-status>span {
  flex: 1;
  min-width: 160px;
  font-size: 13px
}

#catalog-summary .research-hint {
  margin: 10px 0 0
}

#catalog-tabs {
  margin: 0 0 20px
}

#catalog-tabs>[aria-selected=true] {
  box-shadow: inset 0 -3px var(--accent)
}

.catalog-task {
  min-width: 0;
  overflow-wrap: anywhere
}

.catalog-task .panel-heading {
  padding: 0;
  border: 0;
  align-items: flex-start;
  gap: 14px
}

.catalog-task .panel-heading>div {
  min-width: 0
}

.catalog-task h3 {
  font-size: 16px;
  margin: 0
}

.catalog-task .panel-heading p {
  margin: 7px 0 0;
  line-height: 1.6
}

.catalog-task-reason {
  display: block;
  margin: 14px 0 !important
}

.catalog-task-reason p {
  margin: 6px 0 0;
  font-size: 12px
}

.catalog-task-reason p:empty {
  display: none
}

.catalog-task details {
  margin-top: 16px
}

.catalog-task summary {
  cursor: pointer;
  padding: 8px 0;
  font-size: 13px
}

#catalog-branch-status {
  border-top: 1px solid var(--divider);
  margin-top: 18px;
  padding-top: 18px
}

.catalog-workspace .catalog-counts {
  margin: 16px 0 10px;
  gap: 10px
}

.catalog-workspace .catalog-counts>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 12px 14px;
  background: var(--paper)
}

.catalog-workspace .catalog-counts strong {
  font-size: 23px
}

.catalog-workspace .catalog-branch-target {
  margin: 12px 0;
  padding: 12px 16px
}

.catalog-workspace .catalog-branch-options {
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px
}

.catalog-workspace .catalog-branch-cascade {
  gap: 14px
}

.catalog-translation-target {
  padding: 12px 16px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--paper);
  font-size: 13px;
  overflow-wrap: anywhere
}

@media(max-width:900px) {
  .catalog-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
  }

  .catalog-summary-grid>div:first-child {
    grid-column: 1/-1
  }

  .catalog-summary-grid>div+div {
    border-left: 0;
    border-top: 1px solid var(--divider);
    padding: 14px 0 0
  }

  .catalog-workspace .catalog-branch-options {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:650px) {
  #catalog-summary {
    padding: 16px
  }

  .catalog-summary-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .catalog-summary-grid>div+div {
    border-left: 0;
    border-top: 1px solid var(--divider);
    padding: 14px 0 0
  }

  .catalog-summary-grid strong {
    font-size: 22px
  }

  .catalog-summary-status>span {
    flex-basis: 100%
  }

  .catalog-workspace .catalog-branch-options {
    grid-template-columns: 1fr
  }

  .catalog-workspace .catalog-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .catalog-task .button-row>.button {
    flex: 1 1 42%;
    white-space: normal
  }

  #catalog-tabs>[role=tab] {
    padding-left: 13px;
    padding-right: 13px
  }

  .catalog-workspace .panel-heading {
    flex-wrap: wrap
  }
}

@media(max-width:540px) {
  .catalog-zh-row {
    align-items: flex-start;
    flex-direction: column
  }
}

/* Account workspace: readable content, shared Meridian controls. */
.account-panel {
  padding: 24px;
  margin-block: 20px
}

.account-panel .panel-heading {
  padding: 0 0 18px
}

.account-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px
}

.account-filters .field {
  flex: 1 1 155px;
  margin: 0
}

.account-filters .field:first-child {
  flex-basis: 220px
}

.account-secondary {
  display: block;
  margin-top: 5px;
  color: var(--text-secondary, #626975);
  font-weight: 400;
  font-size: 12px
}

.account-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap
}

.account-pagination>span {
  margin-right: auto;
  color: var(--text-secondary, #626975)
}

.account-panel td {
  vertical-align: middle
}

.account-panel td:first-child {
  max-width: 350px
}

.account-panel td strong {
  overflow-wrap: anywhere
}

.account-object {
  max-width: 220px;
  overflow-wrap: anywhere
}

.account-panel .button-row {
  margin-block: 16px
}

.account-shortcuts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px
}

.account-stat {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
  padding: 24px;
  text-align: left;
  color: inherit;
  cursor: pointer
}

.account-stat strong {
  font-size: 34px
}

.account-stat small {
  color: var(--text-secondary, #626975)
}

.account-permissions {
  border: 1px solid var(--border, #e4d9ce);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px
}

.account-permission-group {
  padding: 12px 0;
  border-top: 1px solid var(--border, #e4d9ce)
}

.account-permission-group>div {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px
}
.account-permission-group>[hidden]{display:none!important}

.account-permission-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px
}

.account-permission-summary {
  margin-block: 20px
}

.dialog--account {
  width: min(720px, calc(100vw - 32px));
  max-width: 720px
}

.account-required {
  width: min(540px, calc(100vw - 32px));
  padding: 32px;
  margin: 24px auto
}

.account-required h1 {
  margin-top: 30px
}

.account-required .field {
  margin-block: 16px
}

.account-json {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 350px;
  overflow: auto;
  background: var(--canvas, #f7f3ee);
  padding: 16px;
  border-radius: 10px
}

.account-draft {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  margin-block: 12px
}

.account-panel [data-account=work-detail] {
  white-space: nowrap
}

.account-scope {
  font-size: 12px;
  margin: 0 0 16px;
  color: var(--text-secondary, #626975)
}

/* Account home: compact operational overview using real account work and agenda data. */
.content:has(.account-home) {
  width: 100%;
  max-width: none;
  padding: clamp(12px, 1.5vw, 24px)
}

.account-home {
  display: grid;
  gap: 10px;
  min-width: 0
}

.account-home-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px
}

.account-home-heading h2 {
  margin: 1px 0 2px;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.03em
}

.account-home-heading p {
  margin: 0;
  color: var(--text-secondary, #626975);
  font-size: 12px;
  line-height: 15px
}

.account-home-kicker {
  display: block;
  color: var(--accent-strong, #c7531f);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 14px
}

.account-home-scope {
  flex: 0 0 auto;
  padding: 6px 10px;
  color: var(--accent-strong, #c7531f);
  background: var(--accent-soft, #fff0e6);
  border: 1px solid color-mix(in srgb, var(--accent, #f26b2d) 35%, var(--border, #e4d9ce));
  border-radius: 999px;
  font-size: 11px
}

.account-home-shortcuts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px
}

.account-home-shortcuts>button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 10px;
  color: var(--text, #252321);
  background: var(--surface, #fffdf8);
  border: 1px solid var(--border, #e4d9ce);
  border-radius: 12px;
  box-shadow: var(--shadow-soft, 0 6px 18px rgba(67, 47, 29, .05));
  text-align: left
}

.account-home-shortcuts>button:hover,
.account-home-shortcuts>button:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #f26b2d) 48%, var(--border, #e4d9ce));
  background: color-mix(in srgb, var(--accent-soft, #fff0e6) 48%, var(--surface, #fffdf8))
}

.account-home-shortcuts>button>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500
}

.account-home-shortcut-icon {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--accent-strong, #c7531f);
  background: var(--accent-soft, #fff0e6);
  border-radius: 9px
}

.account-home-shortcut-icon .icon {
  width: 15px;
  height: 15px
}

.account-home-stats {
  display: flex;
  align-items: stretch;
  min-height: 40px;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--surface, #fffdf8) 86%, transparent);
  border: 1px solid var(--border, #e4d9ce);
  border-radius: 12px
}

.account-home-stats>button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1;
  padding: 4px 12px;
  color: var(--text, #252321);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--divider, #ece3d8);
  text-align: left
}

.account-home-stats>button:last-child {
  border-right: 0
}

.account-home-stats>button:hover,
.account-home-stats>button:focus-visible {
  background: var(--accent-soft, #fff0e6);
  border-radius: 8px
}

.account-home-stats span {
  color: var(--text-secondary, #626975);
  white-space: nowrap
}

.account-home-stats em {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 4px;
  color: #a43e33;
  background: #fff0ed;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  vertical-align: 1px
}

.account-home-stats strong {
  color: var(--text, #252321);
  font-size: 20px;
  font-weight: 500
}

.account-home-stats small {
  margin-left: auto;
  color: var(--muted, #77716a);
  font-size: 11px;
  white-space: nowrap
}

.account-home .account-source-status,
.account-home-password {
  margin: 0;
  padding: 9px 12px
}

.account-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(265px, 1fr);
  gap: 10px;
  min-width: 0
}

.account-home-work,
.account-home-agenda,
.account-home-results {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible
}

.account-home-work>.panel-heading,
.account-home-agenda>.panel-heading,
.account-home-results>.panel-heading {
  box-sizing: border-box;
  min-height: 40px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--divider, #ece3d8)
}

.account-home .panel-heading h2 {
  font-size: 14px;
  line-height: 17px
}

.account-home .panel-heading p {
  margin-top: 1px;
  font-size: 11px;
  line-height: 14px
}

.account-home-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  background: var(--canvas, #f7f3ee);
  border: 1px solid var(--divider, #ece3d8);
  border-radius: 9px
}

.account-home-tabs button {
  min-height: 29px;
  padding: 4px 9px;
  color: var(--text-secondary, #626975);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 11px;
  white-space: nowrap
}

.account-home-tabs button[aria-pressed=true] {
  color: var(--text, #252321);
  background: var(--surface, #fffdf8);
  box-shadow: 0 2px 8px rgba(67, 47, 29, .08)
}

.account-home-tabs span {
  color: inherit
}

.account-home-work-list {
  min-height: 172px
}

.account-home-work-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(175px, 1.4fr) minmax(125px, 1fr) 82px 74px 74px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 43px;
  padding: 3px 10px;
  color: var(--text, #252321);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--divider, #ece3d8);
  text-align: left
}

.account-home-work-row:last-child {
  border-bottom: 0
}

.account-home-work-row:hover,
.account-home-work-row:focus-visible,
.account-home-result-row:hover,
.account-home-result-row:focus-visible,
.account-home-agenda-item:hover,
.account-home-agenda-item:focus-visible {
  background: color-mix(in srgb, var(--accent-soft, #fff0e6) 46%, transparent)
}

.account-home-work-main,
.account-home-work-note,
.account-home-work-owner,
.account-home-work-row time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.account-home-work-main strong,
.account-home-work-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.account-home-work-main strong {
  font-size: 12px;
  font-weight: 500;
  line-height: 15px
}

.account-home-work-main small,
.account-home-work-note,
.account-home-work-owner,
.account-home-work-row time {
  color: var(--text-secondary, #626975);
  font-size: 11px;
  line-height: 14px
}

.account-home-status {
  justify-self: end;
  min-width: 62px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--accent-strong, #c7531f);
  background: var(--accent-soft, #fff0e6);
  font-size: 11px;
  text-align: center;
  white-space: nowrap
}

.account-home-status[data-tone=danger] {
  color: #a43e33;
  background: #fff0ed
}

.account-home-status[data-tone=done] {
  color: #28785b;
  background: #e9f5ef
}

.account-home-status[data-tone=waiting] {
  color: #456d8d;
  background: #edf4f8
}

.account-home-agenda>[data-home-agenda] {
  padding: 1px 10px 3px
}

.account-home-agenda-group {
  padding: 4px 0 3px
}

.account-home-agenda-group+.account-home-agenda-group {
  border-top: 1px solid var(--divider, #ece3d8)
}

.account-home-agenda-group h3 {
  margin: 0 0 1px;
  color: var(--text-secondary, #626975);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px
}

.account-home-agenda-item {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  min-height: 34px;
  padding: 2px 3px;
  color: var(--text, #252321);
  background: transparent;
  border: 0;
  border-radius: 7px;
  text-align: left
}

.account-home-agenda-date {
  display: flex;
  flex-direction: column;
  align-self: center;
  color: var(--accent-strong, #c7531f);
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  white-space: nowrap
}

.account-home-agenda-date small {
  color: inherit;
  font-size: 10px;
  line-height: 12px
}

.account-home-agenda-item strong,
.account-home-agenda-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.account-home-agenda-item strong {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px
}

.account-home-agenda-item small,
.account-home-empty,
.account-home-more,
.account-home-truncated {
  margin: 0;
  color: var(--text-secondary, #626975);
  font-size: 11px;
  line-height: 14px
}

.account-home-empty {
  padding: 8px 2px
}

.account-home-more {
  padding: 3px 2px;
  border-top: 1px solid var(--divider, #ece3d8)
}

.account-home-truncated {
  padding: 4px 0 7px;
  border-top: 1px solid var(--divider, #ece3d8)
}

.account-home-state {
  padding: 16px 2px
}

.account-home-state p {
  margin: 4px 0 10px;
  color: var(--text-secondary, #626975);
  font-size: 12px
}

.account-home-results>.panel-heading>div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0
}

.account-home-results>.panel-heading p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.account-home-results>.panel-heading .button {
  min-height: 28px;
  padding: 4px 10px
}

.account-home-result-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(220px, 2fr) 105px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 3px 10px;
  color: var(--text, #252321);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--divider, #ece3d8);
  text-align: left
}

.account-home-result-row strong,
.account-home-result-row span,
.account-home-result-row time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.account-home-result-row strong {
  font-size: 12px;
  font-weight: 500
}

.account-home-result-row span,
.account-home-result-row time {
  color: var(--text-secondary, #626975);
  font-size: 11px
}

.account-home-result-row time {
  text-align: right
}

.account-home .empty-state {
  min-height: 0;
  padding: 22px 16px
}

@media(max-width:1100px) {
  .account-home-work-row {
    grid-template-columns: minmax(150px, 1.3fr) minmax(110px, 1fr) 72px 68px
  }

  .account-home-work-owner {
    display: none
  }

  .account-home-shortcuts>button {
    padding-inline: 8px
  }
}

@media(max-width:820px) {
  .account-home-grid {
    grid-template-columns: 1fr
  }

  .account-home-shortcuts {
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    overflow-x: auto;
    padding-bottom: 3px
  }

  .account-home-agenda>[data-home-agenda] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
  }

  .account-home-agenda-group+.account-home-agenda-group {
    border-top: 0;
    border-left: 1px solid var(--divider, #ece3d8);
    padding-left: 12px
  }
}

@media(max-width:560px) {
  .content:has(.account-home) {
    padding: 12px
  }

  .account-home-heading h2 {
    font-size: 24px
  }

  .account-home-heading p {
    max-width: 245px
  }

  .account-home-scope {
    padding-inline: 8px
  }

  .account-home-stats {
    padding-inline: 3px
  }

  .account-home-stats>button {
    display: grid;
    gap: 0;
    padding-inline: 7px
  }

  .account-home-stats strong {
    grid-row: 1;
    font-size: 18px
  }

  .account-home-stats span {
    grid-row: 2;
    font-size: 11px
  }

  .account-home-stats small {
    display: none
  }

  .account-home-work>.panel-heading {
    align-items: flex-start
  }

  .account-home-work-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    min-height: 58px
  }

  .account-home-work-note {
    grid-column: 1
  }

  .account-home-work-row time,
  .account-home-work-owner {
    display: none
  }

  .account-home-status {
    grid-column: 2;
    grid-row: 1/span 2
  }

  .account-home-agenda>[data-home-agenda] {
    display: block
  }

  .account-home-agenda-group+.account-home-agenda-group {
    border-top: 1px solid var(--divider, #ece3d8);
    border-left: 0;
    padding-left: 0
  }

  .account-home-results>.panel-heading>div {
    display: block
  }

  .account-home-result-row {
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 3px 8px
  }

  .account-home-result-row span {
    grid-column: 1;
    grid-row: 2
  }

  .account-home-result-row time {
    grid-column: 2;
    grid-row: 1/span 2
  }
}

@media(max-width:700px) {
  .account-panel {
    padding: 16px
  }

  .account-stats {
    grid-template-columns: 1fr
  }

  .account-stat {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 16px;
    gap: 8px
  }

  .account-stat small {
    grid-column: 1/-1
  }

  .account-stat strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 28px
  }

  .account-filters .field {
    flex: 1 1 140px
  }

  .account-shortcuts {
    gap: 8px
  }

  .account-permission-group>div {
    display: grid;
    grid-template-columns: 1fr
  }

  .account-required {
    padding: 20px
  }

  .account-panel .table-wrap {
    max-width: 100%;
    overflow: auto
  }

  .account-pagination {
    justify-content: start
  }
}
/* Planned navigation entries have no route or executable action. */
.nav-link--planned,
.nav-link--planned:hover {
  color: var(--muted, #6b6660);
  background: transparent;
  cursor: default;
}
.nav-link--planned small {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
}

/* Packaging design workspace — fluid three-column shell */
.content:has(.pkg-workspace) {
  max-width: none;
  width: 100%;
  padding-inline: clamp(12px, 1.4vw, 28px);
  padding-block: clamp(16px, 2vw, 28px) 16px;
  container-type: inline-size;
  container-name: pkg-page
}

.content:has(.pkg-workspace) > .page-heading {
  margin-bottom: clamp(14px, 1.6vw, 22px)
}

.pkg-workspace {
  display: grid;
  grid-template-columns:
    minmax(min(100%, 300px), clamp(300px, 28cqi, 440px))
    minmax(0, 1fr)
    minmax(min(100%, 240px), clamp(240px, 22cqi, 340px));
  gap: clamp(10px, 1.2cqi, 18px);
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: clamp(480px, calc(100dvh - 180px), 1180px);
  margin-bottom: 12px
}

.pkg-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow: hidden
}

.pkg-panel--form{
  max-height: clamp(480px, calc(100dvh - 180px), 1180px)
}

.pkg-form-head,
.pkg-chat-head,
.pkg-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(12px, 1.2cqi, 16px) clamp(12px, 1.4cqi, 16px) 12px;
  border-bottom: 1px solid var(--divider)
}

.pkg-form-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0
}

.pkg-step {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700
}

.pkg-form-title h2,
.pkg-chat-head h2,
.pkg-history-head h2 {
  margin: 0;
  font-size: clamp(15px, 1.3cqi, 17px);
  color: var(--heading)
}

.pkg-form-title p,
.pkg-chat-head p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45
}

.pkg-form-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px clamp(12px, 1.4cqi, 16px) 8px;
  display: grid;
  gap: 12px;
  align-content: start
}

.pkg-section {
  display: grid;
  gap: 10px
}

.pkg-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap
}

.pkg-section-head strong {
  font-size: 13px;
  color: var(--heading)
}

.pkg-section-head span,
.pkg-hint,
.pkg-composer-hint{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45
}

.pkg-hint {
  margin: 0
}

.pkg-asset-main .pkg-upload {
  min-height: clamp(160px, 22cqi, 240px)
}

.pkg-asset-main .pkg-upload--filled {
  min-height: clamp(180px, 24cqi, 260px)
}

.pkg-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.pkg-asset-wide {
  grid-column: 1 / -1
}

.pkg-drop {
  position: relative;
  min-width: 0;
  border-radius: calc(var(--control-radius) + 2px);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--motion), background var(--motion)
}

.pkg-drop.is-drag {
  outline-color: var(--accent-hot);
  background: var(--accent-soft)
}

.pkg-upload {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 100%;
  min-height: 88px;
  padding: 12px;
  border: 1px dashed var(--control-border);
  border-radius: var(--control-radius);
  background: linear-gradient(180deg, #FFFDFA, #F8F4EE);
  color: var(--heading);
  text-align: center;
  cursor: pointer
}

.pkg-upload:hover {
  border-color: var(--accent);
  background: var(--accent-soft)
}

.pkg-upload strong {
  font-size: 13px
}

.pkg-upload small {
  color: var(--muted);
  font-size: 11px
}

.pkg-upload-plus {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--divider);
  font-size: 18px;
  line-height: 1;
  color: var(--accent-text)
}

.pkg-upload--filled {
  padding: 0;
  overflow: hidden;
  border-style: solid;
  cursor: default;
  place-items: stretch;
  text-align: left
}

.pkg-upload--filled img {
  width: 100%;
  height: clamp(140px, 20cqi, 220px);
  object-fit: contain;
  object-position: center;
  background:
    linear-gradient(45deg, #EFEAE3 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, #EFEAE3 25%, transparent 25%) 0 8px / 16px 16px,
    #FFFDFA;
  display: block
}

.pkg-asset-grid .pkg-upload--filled img {
  height: clamp(96px, 14cqi, 128px)
}

.pkg-upload-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--divider);
  background: var(--readable)
}

.pkg-upload-meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px
}

.pkg-upload-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto
}

.pkg-text-btn {
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px
}

.pkg-text-btn:hover {
  text-decoration: underline
}

.pkg-icon-btn {
  width: 28px;
  height: 28px
}

.pkg-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.pkg-panel--form .field {
  margin: 0;
  min-width: 0
}

.pkg-panel--form .field span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap
}

.pkg-panel--form .field span small {
  font-weight: 400;
  color: var(--muted)
}

.pkg-panel--form .req {
  color: var(--danger);
  font-style: normal;
  font-weight: 700
}

.pkg-panel--form input,
.pkg-panel--form select,
.pkg-panel--form textarea {
  width: 100%;
  min-width: 0
}

.pkg-more {
  border: 1px solid var(--divider);
  border-radius: var(--control-radius);
  background: var(--readable);
  padding: 0 12px 12px
}

.pkg-more > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading)
}

.pkg-more > summary::-webkit-details-marker {
  display: none
}

.pkg-more > summary small {
  margin-left: 6px;
  font-weight: 400;
  color: var(--muted)
}

.pkg-msg {
  display: flex
}

.pkg-msg--user {
  justify-content: flex-end
}

.pkg-msg--assistant {
  justify-content: flex-start
}

.pkg-msg-body {
  max-width: min(100%, 52rem);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--divider);
  background: var(--paper);
  box-shadow: var(--shadow)
}

.pkg-msg--user .pkg-msg-body {
  background: var(--accent-soft);
  border-color: #F3D7BC
}

.pkg-msg-body > p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55
}

.pkg-ref-row{
  display: grid;
  gap: 10px;
  margin-top: 12px
}

.pkg-ref-row {
  grid-template-columns: repeat(auto-fill, minmax(88px, 110px))
}

.pkg-ref{
  margin: 0;
  min-width: 0
}

.pkg-ref img{
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--divider);
  background: #F0EAE2;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  padding: 0;
  cursor: zoom-in
}

.pkg-ref img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #F7F3EC
}

.pkg-ref figcaption{
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.35
}

.pkg-zoom {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px
}

.pkg-zoom-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(28, 24, 20, .55);
  cursor: pointer
}

.pkg-zoom-panel {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 16px;
  border: 1px solid var(--divider);
  background: var(--paper);
  overflow: hidden
}

.pkg-zoom-head,
.pkg-zoom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--divider)
}

.pkg-zoom-actions {
  border-bottom: 0;
  border-top: 1px solid var(--divider);
  justify-content: flex-end
}

.pkg-zoom-head strong {
  min-width: 0;
  color: var(--heading);
  font-size: 14px
}

.pkg-zoom-body {
  overflow: auto;
  padding: 16px;
  background: #F7F3EC;
  display: grid;
  place-items: center
}

.pkg-zoom-body img {
  max-width: 100%;
  max-height: min(72dvh, 820px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px
}

.pkg-composer {
  border-top: 1px solid var(--divider);
  padding: 12px clamp(12px, 1.4cqi, 14px) 14px;
  background: var(--readable);
  display: grid;
  gap: 10px
}

.pkg-composer textarea {
  width: 100%;
  min-height: clamp(72px, 10dvh, 110px);
  resize: vertical
}

.pkg-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap
}

.pkg-composer-bar .button {
  flex: 0 0 auto
}

.pkg-composer-hint {
  flex: 1 1 180px;
  min-width: 0
}

.pkg-history-list {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px;
  display: grid;
  gap: 8px;
  align-content: start
}

.pkg-history-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--paper);
  padding: 12px;
  cursor: pointer;
  display: grid;
  gap: 8px
}

.pkg-history-item:hover,
.pkg-history-item.is-active {
  border-color: var(--accent);
  background: var(--accent-soft)
}

.pkg-history-item small {
  color: var(--muted);
  font-size: 11px
}

.pkg-history-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--muted)
}

.pkg-history-empty p {
  margin: 0 0 6px;
  color: var(--heading);
  font-weight: 600
}

/* Content-area breakpoints: follow available width after sidebar, not just monitor size */
@container pkg-page (max-width: 1240px) {
  .pkg-workspace {
    grid-template-columns:
      minmax(min(100%, 280px), clamp(280px, 34cqi, 400px))
      minmax(0, 1fr)
      minmax(min(100%, 220px), clamp(220px, 24cqi, 300px))
  }
}

@container pkg-page (max-width: 1080px) {
  .pkg-workspace {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
    min-height: 0
  }

  .pkg-panel--form{
    max-height: min(720px, calc(100dvh - 200px))
  }
}

@container pkg-page (max-width: 760px) {
  .pkg-workspace {
    grid-template-columns: 1fr;
    min-height: 0
  }

  .pkg-panel--form{
    max-height: none
  }

  .pkg-form-scroll {
    max-height: min(62dvh, 560px)
  }

  .pkg-field-row {
    grid-template-columns: 1fr
  }

  .pkg-composer-bar {
    flex-direction: column;
    align-items: stretch
  }

  .pkg-composer-bar .button {
    width: 100%;
    justify-content: center
  }
}

@container pkg-page (max-width: 420px) {
  .pkg-asset-grid {
    grid-template-columns: 1fr
  }

  .pkg-form-title p,
  .pkg-chat-head p {
    display: none
  }
}

/* Fallback when container queries are unavailable */
@supports not (width: 1cqi) {
  @media (max-width: 1400px) {
    .pkg-workspace {
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) minmax(220px, 280px)
    }
  }

  @media (max-width: 1180px) {
    .pkg-workspace {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr)
    }
  }

  @media (max-width: 900px) {
    .pkg-workspace {
      grid-template-columns: 1fr
    }

    .pkg-field-row {
      grid-template-columns: 1fr
    }
  }
}
.pkg-workflow-panel{min-width:0}
.pkg-workflow-conversation{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;align-items:start}
.pkg-workflow-conversation .pkg-msg{max-width:100%;margin:16px 0}
.pkg-workflow-conversation .pkg-msg--user{margin-left:12%;white-space:pre-wrap}
.pkg-workflow-conversation .pkg-msg-body{min-width:0;max-width:100%;overflow-wrap:anywhere}
.pkg-workflow-history{min-width:0}
.pkg-workflow-history .pkg-history-item{display:grid;width:100%;gap:8px;text-align:left;color:var(--ink);background:var(--paper)}
.pkg-workflow-history .pkg-history-item strong{overflow-wrap:anywhere;white-space:normal}
.pkg-workflow-history .pkg-history-item.is-active{border-color:var(--accent);background:var(--accent-soft)}
@media(max-width:800px){.pkg-workflow-conversation{grid-template-columns:1fr}.pkg-workflow-conversation .pkg-msg--user{margin-left:6%}}
.pkg-workspace.pkg-workspace--conversation{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr) 180px;max-width:none;gap:16px;align-items:start}
.pkg-workspace--conversation [data-packaging-workflow-host],.pkg-workspace--conversation .pkg-workflow-conversation{display:contents}
.pkg-workspace--conversation .pkg-workflow-panel,.pkg-workspace--conversation .pkg-workflow-history{margin:0;min-width:0}
.pkg-workspace--conversation .pkg-workflow-images{grid-template-columns:1fr}
.pkg-workspace--conversation .pkg-workflow-panel .panel-body{padding:16px}
.pkg-workspace--conversation .pkg-workflow-panel .pkg-msg--assistant .pkg-msg-body{width:100%}
.pkg-workspace--conversation .pkg-composer{position:static;min-width:0}
.pkg-workspace--conversation .pkg-composer textarea{width:100%;min-width:0;box-sizing:border-box}
@media(max-width:1100px){.pkg-workspace.pkg-workspace--conversation{grid-template-columns:minmax(230px,270px) minmax(0,1fr) 150px;gap:12px}}
@media(max-width:850px){.pkg-workspace.pkg-workspace--conversation{grid-template-columns:minmax(0,1fr)}}
@media(min-width:851px){
  .pkg-workspace--conversation>.pkg-panel--form{display:block;max-height:calc(100dvh - 230px);overflow:auto;overscroll-behavior:contain}
  .pkg-workspace--conversation .pkg-workflow-panel{display:flex;flex-direction:column;height:calc(100dvh - 230px);min-height:320px;overflow:hidden}
  .pkg-workspace--conversation .pkg-workflow-panel>.pkg-chat-head,.pkg-workspace--conversation .pkg-workflow-panel>.pkg-composer{flex:0 0 auto}
  .pkg-workspace--conversation .pkg-workflow-panel>[data-workflow-body]{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
  .pkg-workspace--conversation .pkg-workflow-history{max-height:calc(100dvh - 230px);overflow:auto;overscroll-behavior:contain}
}
[data-workflow-turn]{scroll-margin-top:105px}
.pkg-workflow-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:18px 0}
.pkg-workflow-images figure{min-width:0;margin:0}
.pkg-workflow-preview{display:block;width:100%;padding:10px;border:1px solid var(--divider);border-radius:14px;background:var(--paper);cursor:zoom-in}
.pkg-workflow-preview img{display:block;width:100%;height:340px;object-fit:contain}
.pkg-workflow-images figcaption{margin:10px 0;font-weight:600}
.pkg-workflow-panel details{overflow-wrap:anywhere}
.pkg-workflow-panel [data-workflow-clarification]{display:block;overflow-wrap:anywhere}
@media(max-width:700px){.pkg-workflow-images{grid-template-columns:1fr}.pkg-workflow-preview img{height:260px}}
.sys-packaging-config #sys-packaging-bundle-panel{margin:0;border:0;box-shadow:none;background:transparent}
.sys-packaging-config #sys-packaging-bundle-panel>.panel-heading,.sys-packaging-config #sys-packaging-bundle-panel>.panel-body{padding-left:0;padding-right:0}
.sys-packaging-config-fold{margin-top:18px;border-top:1px solid var(--divider);padding-top:14px;min-width:0}
.sys-packaging-config-fold>summary{padding:10px 0;font-weight:700;cursor:pointer}
.sys-packaging-fold-body{padding-top:12px;min-width:0}
.sys-packaging-fold-body>section{margin-bottom:18px}
.sys-packaging-config textarea{max-width:100%;box-sizing:border-box}
.sys-packaging-image-prompt{margin-top:22px;padding-top:18px;border-top:1px solid var(--divider)}
[data-packaging-analysis-prompt],[data-packaging-knowledge]{margin-top:22px;min-width:0}
[data-packaging-legacy-prompt]{margin:16px 0;padding:12px;border:1px solid var(--divider);border-radius:12px}
[data-packaging-legacy-prompt]>summary{font-weight:600;cursor:pointer}
[data-packaging-legacy-prompt] textarea{width:100%;margin:10px 0}
.sys-packaging-config [hidden]{display:none!important}
[data-packaging-source-routing]{min-width:0;overflow-wrap:anywhere}
[data-packaging-source-routing] textarea{display:block;width:100%;min-width:0;box-sizing:border-box}
.sys-review-prompt textarea{display:block;width:100%;max-width:100%;box-sizing:border-box;line-height:1.65;resize:vertical}
.sys-review-prompt-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sys-review-prompt-meta p{margin-top:0}
.sys-review-knowledge{margin-top:22px;padding-top:18px;border-top:1px solid var(--divider)}
.sys-review-knowledge>.panel-heading{padding:0 0 14px}
.sys-review-knowledge-workspace{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,1fr);gap:18px;align-items:start}
.sys-review-knowledge-workspace nav{min-width:0;padding-right:14px;border-right:1px solid var(--divider)}
.sys-review-knowledge-workspace .sys-bundle-list{margin:0;display:grid;gap:8px}
.sys-review-knowledge-workspace .sys-bundle-list .button{width:100%;max-width:100%;justify-content:flex-start;overflow-wrap:anywhere;text-align:left}
.sys-review-runtime-policy{margin-top:20px;padding:14px;border:1px solid var(--divider);border-radius:12px;background:var(--readable)}
.sys-review-runtime-policy>summary{cursor:pointer;font-weight:650}
.sys-review-runtime-policy pre{max-height:360px;overflow:auto;margin:14px 0;padding:14px;border-radius:10px;background:var(--canvas);white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.75 var(--mono,monospace)}
.sys-review-prompt-actions{margin-top:18px}
/* Packaging settings: preserve each tab's DOM and unsaved form values. */
.sys-packaging-tabs{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--divider)}
.sys-packaging-tabs [aria-selected="true"]{background:var(--accent-soft,#fff0e2);color:var(--ink);border-color:var(--accent);font-weight:700}
[data-config-pane][hidden],[data-config-service][hidden]{display:none!important}
[data-config-pane]>.panel{margin-bottom:20px}
[data-config-service-select]{max-width:100%}
.sys-packaging-config [role="tabpanel"]{min-width:0}
.sys-packaging-config [role="tabpanel"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sys-bundle-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:14px}
.sys-bundle-toolbar p{margin:0 0 8px}
.sys-bundle-metadata{max-width:48%;min-width:100px;overflow-wrap:anywhere}
.sys-bundle-metadata summary,.sys-bundle-more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink)}
.sys-bundle-workspace{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:20px;align-items:start}
.sys-bundle-files{min-width:0;border-right:1px solid var(--divider);padding-right:14px}
.sys-bundle-files .sys-bundle-list{margin:0}
.sys-bundle-editor{min-width:0}
.sys-bundle-editor>.field{margin:0}
.sys-bundle-editor textarea{width:100%;min-height:420px;line-height:1.65;resize:vertical}
.sys-bundle-editor [data-bundle-editor-label]{overflow-wrap:anywhere}
.sys-bundle-mobile{display:none}
.sys-bundle-actions{margin-top:16px;align-items:flex-start;flex-wrap:wrap}
.sys-bundle-more{min-width:120px;max-width:100%}
.sys-bundle-more summary{padding:0 12px}
.sys-bundle-more[open]{flex-basis:100%}
.sys-bundle-more[open] summary{padding-left:0}
.sys-packaging-connections{display:grid;gap:24px}
.sys-packaging-connections #sys-packaging-analysis-panel{margin:0;border:0;box-shadow:none;background:transparent}
.sys-packaging-connections .panel-heading{padding:0 0 14px}
.sys-packaging-connections .panel-body{padding:0}
.sys-packaging-connections #sys-packaging-ai-panel{padding-top:20px;border-top:1px solid var(--divider)}
.sys-packaging-config .sys-packaging-image-prompt{margin:0;padding:0;border:0}
@media(max-width:700px){
  .sys-packaging-tabs{gap:4px}
  .sys-packaging-tabs .button{padding:10px 12px}
  .sys-bundle-toolbar{display:block}
  .sys-bundle-metadata{max-width:100%}
  .sys-bundle-workspace{grid-template-columns:minmax(0,1fr)}
  .sys-bundle-files{display:none}
  .sys-bundle-mobile{display:flex!important;margin-bottom:14px!important}
  .sys-bundle-mobile select{width:100%;min-width:0}
  .sys-bundle-editor textarea{min-height:360px}
  .sys-review-knowledge-workspace{grid-template-columns:minmax(0,1fr)}
  .sys-review-knowledge-workspace nav{padding:0 0 12px;border-right:0;border-bottom:1px solid var(--divider)}
  .sys-review-prompt>.panel-heading,.sys-review-knowledge>.panel-heading{align-items:flex-start;flex-direction:column}
}
/* Compact packaging materials: one form scroller, with actions outside it. */
.pkg-workspace--conversation>.pkg-panel--form{min-width:0}
.pkg-workspace--conversation .pkg-form-scroll{min-width:0;max-height:none}
.pkg-workspace--conversation .pkg-form-scroll>*{min-width:0}
.pkg-workspace--conversation .pkg-basic-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.pkg-workspace--conversation .pkg-basic-fields textarea{min-height:0;resize:vertical;line-height:1.6}
.pkg-workspace--conversation .pkg-product-compact{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border:1px solid var(--divider);background:var(--readable)}
.pkg-product-preview{display:block;width:88px;height:88px;min-width:0;padding:0;border:1px solid var(--divider);border-radius:var(--control-radius);background:var(--paper);cursor:zoom-in}
.pkg-product-preview img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.pkg-product-meta{display:grid;gap:6px;min-width:0}
.pkg-product-meta strong{font-size:13px;overflow-wrap:anywhere}
.pkg-product-filename{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.pkg-workspace--conversation .pkg-asset-main .pkg-upload{min-height:100px;padding:10px}
.pkg-workspace--conversation .pkg-upload{box-sizing:border-box;min-width:0}
.pkg-workspace--conversation .pkg-upload-meta{min-width:0}
.pkg-workspace--conversation .pkg-upload-meta>span{flex:1 1 0;width:0}
.pkg-workspace--conversation .pkg-upload-actions{flex-shrink:0}
.pkg-workspace--conversation .pkg-asset-grid{grid-template-columns:minmax(0,1fr)}
.pkg-workspace--conversation .pkg-asset-grid .pkg-upload--filled img{height:96px}
.pkg-workspace--conversation .pkg-more{min-width:0;padding-bottom:0}
.pkg-workspace--conversation .pkg-more[open]{padding-bottom:12px}
.pkg-workspace--conversation .pkg-more>summary{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;overflow-wrap:anywhere}
.pkg-workspace--conversation .pkg-more>summary>small{margin:0;font-size:11px;line-height:1.5}
.pkg-workspace--conversation .pkg-more>summary>span:after{content:'＋';float:right;color:var(--muted)}
.pkg-workspace--conversation .pkg-more[open]>summary>span:after{content:'−'}
.pkg-workspace--conversation .pkg-more>.field{margin-top:10px}
.pkg-workspace--conversation .pkg-more .pkg-field-row{grid-template-columns:repeat(2,minmax(0,1fr));margin:10px 0}
.pkg-workspace--conversation .pkg-analysis-input{border-top:1px solid var(--divider);padding:12px;background:var(--readable)}
.pkg-workspace--conversation .pkg-analysis-input .button-row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.pkg-workspace--conversation .pkg-analysis-input .button{width:100%;min-width:0;justify-content:center}
@media(min-width:851px){
  .pkg-workspace--conversation>.pkg-panel--form{display:flex;flex-direction:column;height:calc(100dvh - 230px);min-height:320px;max-height:none;overflow:clip}
  .pkg-workspace--conversation .pkg-form-head,.pkg-workspace--conversation .pkg-analysis-input{flex:0 0 auto}
  .pkg-workspace--conversation .pkg-form-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:850px){
  .pkg-workspace--conversation>.pkg-panel--form{display:block;height:auto;max-height:none;overflow:visible}
  .pkg-workspace--conversation .pkg-form-scroll{max-height:none;overflow:visible}
}
/* Keep conversation controls outside the independently scrolling content. */
.pkg-workspace--conversation .pkg-chat-head{align-items:center;flex-wrap:wrap}
.pkg-workspace--conversation .pkg-chat-head>div{min-width:0}
.pkg-chat-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pkg-chat-actions .pkg-mobile-action{display:none}
.pkg-stop-button{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);white-space:nowrap}
.pkg-workspace--conversation .pkg-workflow-history{display:flex;flex-direction:column;overflow:hidden}
.pkg-workspace--conversation .pkg-history-head{flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.pkg-history-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-width:0}
.pkg-history-heading .icon-button{flex:0 0 auto;font-size:23px}
.pkg-workspace--conversation .pkg-history-head>[data-workflow="new"]{width:100%;justify-content:center;white-space:nowrap}
.pkg-workspace--conversation .pkg-history-list{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain}
.pkg-workspace--conversation .pkg-history-item:disabled{cursor:not-allowed}
@media(min-width:851px){
  .pkg-workspace--conversation .pkg-workflow-history{height:calc(100dvh - 230px);min-height:320px;max-height:none}
}
@media(max-width:850px){
  .pkg-workspace--conversation .pkg-workflow-panel{display:flex;flex-direction:column;height:calc(100dvh - 100px);min-height:440px;max-height:800px;overflow:hidden}
  .pkg-workspace--conversation .pkg-workflow-panel>.pkg-chat-head,.pkg-workspace--conversation .pkg-workflow-panel>.pkg-composer{flex:0 0 auto}
  .pkg-workspace--conversation .pkg-workflow-panel>[data-workflow-body]{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
  .pkg-chat-actions .pkg-mobile-action{display:inline-flex}
  .pkg-workspace--conversation .pkg-composer-hint{flex:0 0 auto}
  .pkg-chat-actions{width:100%;gap:6px}
  .pkg-chat-actions .button{padding:8px 10px;min-height:38px;font-size:12px}
  .pkg-chat-actions .pkg-stop-button{margin-left:auto}
  .pkg-workspace--conversation .pkg-workflow-history{height:360px;scroll-margin-top:90px}
  .pkg-workspace--conversation .pkg-history-head{flex-direction:row;flex-wrap:wrap}
  .pkg-workspace--conversation .pkg-history-head>.pkg-history-heading{flex:1 1 140px;width:auto}
  .pkg-workspace--conversation .pkg-history-head>[data-workflow="new"]{width:auto}
  .pkg-workspace--conversation .pkg-history-head>.pkg-hint{flex-basis:100%}
}

/* Creative node workflow: local native DOM/SVG surface. */
.cf-workbench{min-width:0;max-width:100%}.cf-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.cf-head h1{font-size:21px;margin:0}.cf-head p{margin:4px 0;font-size:12px}
.cf-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0}.cf-bar input,.cf-bar select{min-height:34px;max-width:200px;padding:5px 8px}.cf-bar .button,.cf-head .button{font-size:12px;padding:6px 10px;min-height:34px}
.cf-status-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.cf-status-row p{font-size:12px;margin:3px 0 8px;overflow-wrap:anywhere}
.cf-layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:12px}.cf-stage{position:relative;overflow:hidden;min-width:0;height:calc(100vh - 325px);min-height:440px;max-height:900px;border:1px solid #364252;border-radius:14px;background-color:#171d26;background-image:radial-gradient(#a9bdd31c .8px,transparent .8px),radial-gradient(ellipse at 50% 42%,#232c38 0%,#171d26 78%);background-size:28px 28px,100% 100%;touch-action:none;overscroll-behavior:contain}
.cf-world{position:absolute;left:0;top:0;transform-origin:0 0;width:1px;height:1px}.cf-node{position:absolute;width:260px;border:1px solid #cbd5e2;border-radius:14px;background:#f5f7fa;color:#202c3d;box-shadow:0 4px 14px #080e1829,inset 0 1px 0 #ffffffb3;overflow:visible}.cf-node--selected{border:2px solid #ff922f;box-shadow:0 0 0 2px #ff922f1a,0 3px 14px #ff922f12}.cf-node header{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:#dfe8f3;border-radius:13px 13px 0 0;cursor:grab;touch-action:none;user-select:none}.cf-node header strong{font-size:15px}.cf-node header small{color:#53647b;font-size:11px}.cf-node-body{padding:12px}.cf-node-body img{width:100%;max-height:190px;object-fit:contain;display:block;border-radius:8px;background:#e9eef5}.cf-node-body textarea{width:100%;min-height:130px;resize:vertical;font-size:13px}.cf-node-body .field{margin:0}.cf-node-body select{max-width:100%;font-size:12px}.cf-node-body .button{margin-top:8px;font-size:12px;padding:6px 10px}.cf-node-body p{font-size:12px;overflow-wrap:anywhere}.cf-placeholder{height:135px;display:grid;place-items:center;background:#eaf0f7;color:#53647b;border:1px dashed #b6c5d7;border-radius:8px;font-size:13px;text-align:center}.cf-state{display:inline-block;padding:4px 8px;background:#e0e9f4;color:#3e526d;border-radius:6px;font-size:12px}
/* Graphite-blue theme is confined to canvas nodes; outer workspace stays warm. */
.cf-stage { --paper: #f5f7fa; --ink: #202c3d; --muted: #53647b; --subtle: #65758a; --divider: #cbd5e2; --control-border: #b8c7d9; }
.cf-node :is(input,textarea,select,.button) { background: #f9fbfe; color: #202c3d; border-color: #b8c7d9; box-shadow: inset 0 1px 1px #ffffff80; }
.cf-node :is(input,textarea,select):hover:not(:disabled) { border-color: #728cac; }
.cf-node .button:hover:not(:disabled) { background: #e6eef8; border-color: #8ba2c0; }
.cf-node .button:active:not(:disabled) { background: #dce7f5; }
.cf-generation-actions { margin-top: 12px; }
.cf-generation-actions .button { width: 100%; }
.cf-generation-actions [hidden] { display: none !important; }
.cf-node .cf-generation-actions .button--primary { color: #302013; border-color: #df772a; background: linear-gradient(155deg,#ffb264,#ff861f); box-shadow: inset 0 1px 0 #ffffff80,0 2px 6px #ff922f1a; }
.cf-node .cf-generation-actions .button--primary:hover:not(:disabled) { background: linear-gradient(155deg,#ffbd79,#ff922f); border-color: #c66b25; }
.cf-node .cf-generation-actions .button--primary:active:not(:disabled) { background: #ff922f; }
.cf-node .cf-generation-actions .button--primary:disabled { background: #e5ebf3; color: #586b82; border-color: #c2cfdf; box-shadow: none; }
.cf-generation-actions p:empty { display: none; }
.cf-node :is(input,textarea,select):focus { border-color: #52749c; outline: 2px solid #6f96c4; outline-offset: 2px; }
.cf-node:focus-visible,.cf-node :is(button,input,textarea,select):focus-visible { outline: 2px solid #52749c; outline-offset: 3px; }
.cf-node :is(input,textarea,select,.button):disabled { background: #e5ebf3; color: #586b82; border-color: #c2cfdf; opacity: 1; box-shadow: none; }
.cf-node :is(input,textarea)::placeholder { color: #65758a; }
.cf-node--selected .cf-dot { background: #ff922f; box-shadow: 0 0 0 1px #c96c24; }
.cf-port:disabled { color: #65758a; opacity: 1; }
.cf-ports{display:flex;flex-direction:column;gap:6px;padding:10px 0 12px}.cf-port{border:0;background:transparent;display:flex;align-items:center;gap:8px;max-width:100%;font-size:12px;min-height:28px;cursor:crosshair;color:#475c76}.cf-port--in{align-self:flex-start;margin-left:-7px}.cf-port--out{align-self:flex-end;margin-right:-7px;flex-direction:row-reverse}.cf-dot{width:13px;height:13px;border-radius:50%;background:#91abc9;border:2px solid #f5f7fa;box-shadow:0 0 0 1px #718baa;flex-shrink:0}
.cf-wires{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}.cf-wire{fill:none;stroke:#91a7c2;stroke-width:2.5;pointer-events:stroke;cursor:pointer}.cf-wire:hover,.cf-wire:focus{stroke:#ffac62;stroke-width:5;outline:none}
.cf-inspector{border:1px solid #e1d6c8;background:#fffdf9;border-radius:14px;padding:14px;max-height:calc(100vh - 325px);min-height:440px;overflow:auto}.cf-inspector h3{margin:0 0 12px;font-size:16px}.cf-inspector h4{font-size:13px}.cf-inspector .field{margin:10px 0}.cf-inspector select{max-width:100%;font-size:12px}.cf-inspector .button{font-size:12px;min-height:30px;padding:5px 8px}.cf-inspector details>.button{display:block;margin:6px 0;width:100%;text-align:left}.cf-inspector .notice{font-size:12px;line-height:1.6;margin-top:14px}.cf-inspector p{font-size:12px}.cf-edge-list{list-style:none;margin:8px 0;padding:0}.cf-edge-list li{font-size:12px;display:flex;gap:6px;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #eee5da;overflow-wrap:anywhere}
@media(max-width:850px){.cf-layout{grid-template-columns:1fr}.cf-stage{height:55vh;min-height:360px}.cf-inspector{min-height:0;max-height:none}.cf-head{align-items:flex-start}.cf-bar input,.cf-bar select{max-width:165px}.cf-status-row{display:block}.cf-head .button-row{flex-wrap:wrap}}/* Packaging layered delivery: uses existing paper and control tokens. */
.pkg-layered{margin:18px 0;padding:16px;border:1px solid var(--divider);border-radius:14px;background:var(--paper);overflow-wrap:anywhere}
.pkg-layered article+article{margin-top:24px;padding-top:20px;border-top:1px solid var(--divider)}
.pkg-layered .button-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.pkg-layered [data-layered-editor]{display:grid;gap:12px;margin-top:12px}
.pkg-layered fieldset{display:flex;flex-wrap:wrap;gap:12px;min-width:0;border:1px solid var(--divider);border-radius:10px;padding:12px}
.pkg-layered fieldset label{display:grid;gap:4px;flex:1 1 160px;min-width:0}
.pkg-layered fieldset input{width:100%;min-width:0}
.pkg-studio-layered{flex:0 1 auto;max-height:34%;min-height:132px;overflow:auto;padding:12px 16px;border-top:1px solid var(--divider);background:var(--paper);overflow-wrap:anywhere}
.pkg-studio-layered h3{font-size:15px;margin:0 0 8px}
.pkg-studio-layered h3 small{font-size:12px;font-weight:400;color:var(--muted)}
.pkg-studio-layered label{display:flex;align-items:center;gap:8px;font-size:12px}
.pkg-studio-layered select{flex:1;min-width:0}
.pkg-studio-layered p{margin:8px 0;font-size:12px}
.pkg-studio-layered .button-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.pkg-studio-layered .button{font-size:12px;min-height:32px;padding:6px 10px}
.pkg-studio-layered [aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.pkg-layered-comparison{display:block;width:100%;border:1px solid var(--divider);border-radius:10px;background:var(--readable);cursor:zoom-in;padding:6px}
.pkg-layered-comparison img{display:block;max-width:100%;height:150px;object-fit:contain;margin:auto}
/* Team management separates module visibility from actions without changing permission keys. */
.account-permission-section{border-top:1px solid var(--divider);padding:12px 0}
.account-permission-section>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:650;cursor:pointer;padding:7px 2px}
.account-permission-section>summary small{color:var(--text-secondary,#626975);font-weight:500;text-align:right}
.account-permission-section-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 12px;padding:10px 12px;border:1px solid var(--divider);border-radius:10px;background:var(--canvas,#f7f3ee)}
.account-permission-section-tools p{margin:0;color:var(--text-secondary,#626975);font-size:12px;line-height:1.55}
.account-permission-section-tools>div{display:flex;flex:0 0 auto;gap:8px;flex-wrap:wrap}
.account-permission-group{margin:10px 0;padding:13px 14px;border:1px solid var(--divider);border-left:4px solid var(--divider);border-radius:11px;background:var(--paper,#fffdf9)}
.account-permission-group[data-authorized=true]{border-left-color:var(--accent,#f47b20);background:color-mix(in srgb,var(--accent-soft,#fff1e3) 42%,var(--paper,#fffdf9))}
.account-permission-group>div{margin-top:0}
.account-permission-module-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.account-permission-module-head>strong{font-size:14px;line-height:1.45}
.account-module-toggle{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 11px;border:1px solid var(--accent,#f47b20);border-radius:999px;background:var(--paper,#fffdf9);color:var(--text-primary,#30343a);font-size:13px;font-weight:650;cursor:pointer}
.account-module-toggle input{accent-color:var(--accent,#f47b20)}
.account-admin-permission{margin:0;padding:7px 10px;border-radius:999px;background:var(--accent-soft,#fff1e3);color:var(--text-primary,#30343a);font-size:12px;font-weight:650}
.account-operation-permissions{display:grid!important;grid-template-columns:110px minmax(0,1fr);align-items:start;gap:10px!important;margin-top:10px!important;padding-top:10px;border-top:1px dashed var(--divider)}
.account-operation-permissions>span{padding-top:9px;color:var(--text-secondary,#626975);font-size:12px;font-weight:650}
.account-operation-permissions>div{display:flex;flex-wrap:wrap;gap:7px 14px}
.account-operation-permissions label{display:inline-flex;align-items:center;gap:6px;min-height:34px;font-size:13px}
.account-operation-permissions[aria-disabled=true]{color:var(--text-secondary,#626975)}
.account-operation-permissions input:disabled{opacity:.58}
.account-permission-group>[hidden],.account-permission-section-tools[hidden],[data-employee-permission-control][hidden],[data-admin-permission-summary][hidden],[data-operation-controls][hidden]{display:none!important}
.account-result-image{display:block;max-width:100%;max-height:520px;object-fit:contain}
[data-member-change-preview]{overflow-wrap:anywhere}
[data-member-change-preview]:not(:empty){border:1px solid var(--divider);border-radius:12px;padding:14px;margin-top:14px;background:var(--paper)}
@media(max-width:600px){.account-permissions{padding:12px}.account-permission-section>summary{align-items:flex-start}.account-permission-section-tools{align-items:stretch;flex-direction:column}.account-permission-section-tools>div{display:grid;grid-template-columns:1fr 1fr}.account-permission-section-tools .button{white-space:normal}.account-permission-group{display:block;padding:12px}.account-permission-module-head{align-items:flex-start;flex-direction:column}.account-module-toggle{align-self:stretch;justify-content:center}.account-operation-permissions{grid-template-columns:1fr}.account-operation-permissions>span{padding-top:0}.account-operation-permissions>div{display:flex;flex-direction:column;align-items:flex-start}.account-panel .table-wrap{max-width:100%;overflow:auto}.dialog--account .button-row{flex-wrap:wrap}}

/* Creative canvas: readable result nodes and selection-local connection emphasis. */
.cf-node--preview { width: 320px; }
.cf-node--preview .cf-node-body img { height: 292px; max-height: 292px; }
.cf-node--preview header { background: #d9e5f3; }
.cf-node--preview header small { color: #435c7b; font-weight: 650; }
.cf-wire.cf-wire--active { stroke: #ff9b45; stroke-width: 4; }
.cf-wire:focus-visible { stroke: #e4efff; stroke-width: 5; outline: none; }

/* Page-local fullscreen uses the native modal top layer, not browser fullscreen. */
.cf-canvas-bar [data-cf-full-name] { display: none; }
[data-cf-properties][hidden] { display: none !important; }
.cf-fullscreen[open] { display: flex; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; padding: 8px; overflow: hidden; background: var(--paper); }
.cf-fullscreen .cf-workbench { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.cf-fullscreen .cf-head,.cf-fullscreen .cf-project-bar,.cf-fullscreen .cf-workbench>p,.cf-fullscreen [data-cf-connection] { display: none; }
.cf-fullscreen .cf-canvas-bar { flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; margin: 0 0 6px; padding: 3px 0 6px; }
.cf-fullscreen .cf-canvas-bar>* { flex-shrink: 0; }
.cf-fullscreen .cf-canvas-bar [data-cf-full-name] { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-fullscreen [data-cf-fullscreen] { order: 99; position: sticky; right: 0; box-shadow: -6px 0 8px var(--paper); }
.cf-fullscreen .cf-status-row { flex-shrink: 0; max-height: 56px; overflow: auto; }
.cf-fullscreen .cf-layout { flex: 1; min-height: 0; grid-template-columns: minmax(0,1fr); }
.cf-fullscreen .cf-stage { height: 100%; min-height: 0; max-height: none; }
.cf-fullscreen .cf-inspector { display: none; min-height: 0; max-height: 100%; }
.cf-fullscreen--properties .cf-layout { grid-template-columns: minmax(0,1fr) 255px; }
.cf-fullscreen--properties .cf-inspector { display: block; }
@media (max-width: 650px) {
  .cf-fullscreen[open] { padding: 4px; }
  .cf-fullscreen .cf-canvas-bar [data-cf-full-name] { max-width: 110px; }
  .cf-fullscreen--properties .cf-layout { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) minmax(0,35%); }
}

/* Local image runtime diagnostics remain readable for long absolute paths. */
#sys-runtime-panel { min-width: 0; }
#sys-runtime-panel p, #sys-runtime-panel li { overflow-wrap: anywhere; }
#sys-runtime-form input { min-width: 0; width: 100%; }

/* Packaging result-first workspace; industrial design retains its existing layout. */
.pkg-studio { min-width:0; display:flex; flex-direction:column; gap:12px; }
.pkg-studio-tools,.pkg-studio-preview-head,.pkg-studio-preview-foot { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.pkg-studio-tools { justify-content:space-between; }
.pkg-studio-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(310px,1fr); gap:16px; height:calc(100dvh - 210px); min-height:480px; }
.pkg-studio-grid > *, .pkg-studio [data-packaging-workflow-host], .pkg-studio .pkg-workflow-conversation { min-width:0; min-height:0; height:100%; }
.pkg-studio .pkg-workflow-conversation { display:block; }
.pkg-studio .pkg-workflow-panel { display:flex; flex-direction:column; height:100%; min-height:0; margin:0; overflow:hidden; }
.pkg-studio .pkg-chat-head { padding:14px; flex:none; }
.pkg-studio .pkg-chat-head h2 { font-size:16px; }
.pkg-studio .pkg-chat-actions .pkg-mobile-action { display:none; }
.pkg-studio .pkg-workflow-panel > [data-workflow-body] { flex:1; min-height:0; overflow:auto; padding:12px; overscroll-behavior:contain; }
.pkg-studio .pkg-composer { flex:none; padding:12px; }
.pkg-studio .pkg-composer textarea { width:100%; min-height:66px; height:78px; max-height:160px; resize:vertical; box-sizing:border-box; }
.pkg-studio .pkg-composer [data-workflow-version-panel] { margin:0 0 7px; }
.pkg-studio [data-workflow-composer-error] { display:block; margin:0 0 8px; padding:8px 10px; overflow-wrap:anywhere; max-height:100px; overflow:auto; }
.pkg-studio [data-workflow-composer-error][hidden] { display:none; }
.pkg-studio .pkg-composer-bar { gap:8px; margin-top:8px; }
.pkg-studio .pkg-msg { padding:10px; }
.pkg-studio .pkg-workflow-images { display:flex; flex-wrap:wrap; gap:8px; }
.pkg-studio .pkg-workflow-images figure { flex:1 1 90px; min-width:0; max-width:150px; }
.pkg-studio .pkg-workflow-preview img { height:100px; width:100%; object-fit:contain; }
.pkg-studio .pkg-workflow-images figure .button-row { display:none; }
.pkg-studio .pkg-workflow-images figcaption { font-size:11px; }
.pkg-studio .pkg-ref-row img { max-height:64px; }
.pkg-studio .pkg-msg .notice { display:block; }
.pkg-studio-preview { display:flex; flex-direction:column; min-width:0; min-height:0; margin:0; overflow:hidden; }
.pkg-studio-preview-head,.pkg-studio-preview-foot { flex:none; padding:12px 16px; background:var(--readable); }
.pkg-studio-preview-head h2 { font-size:17px; margin:0; }
.pkg-studio-preview-head label { display:flex; align-items:center; gap:6px; flex:1; min-width:140px; white-space:nowrap; }
.pkg-studio-preview-head select { min-width:0; width:100%; }
.pkg-studio-preview-foot > p { flex-basis:100%; margin:0; font-size:12px; color:var(--muted); }
.pkg-studio-preview-foot .button { min-height:34px; padding:6px 10px; font-size:12px; }
.pkg-studio [data-studio-use-version][hidden] { display:none; }
.pkg-studio [data-workflow-latest][hidden] { display:none; }
.pkg-studio-latest { font-size:12px; min-height:30px; padding:4px 10px; margin-bottom:6px; }
.pkg-studio-preview-foot output { min-width:40px; text-align:center; }
.pkg-studio-image-stage { flex:1; min-height:160px; min-width:0; position:relative; overflow:hidden; background:var(--paper); touch-action:none; cursor:grab; }
.pkg-studio-image-stage:active { cursor:grabbing; }
.pkg-studio-image-stage img { position:absolute; top:50%; left:50%; max-width:none; max-height:none; width:auto; height:auto; transform-origin:center; user-select:none; pointer-events:none; }
.pkg-studio-image-stage [role=status] { position:relative; padding:12px; pointer-events:none; }
.pkg-studio-empty { margin:auto; padding:24px; text-align:center; }
.pkg-studio-tabs { display:none; }
.pkg-studio-zoom { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; }
.pkg-studio-drawer { width:min(520px,calc(100vw - 24px)); max-width:none; max-height:calc(100dvh - 24px); padding:0; border:1px solid var(--divider); border-radius:18px; background:var(--paper); color:var(--ink); overflow:auto; }
.pkg-studio-drawer::backdrop,.pkg-studio-expanded::backdrop { background:rgba(25,22,18,.38); }
.pkg-studio-drawer-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:var(--readable); border-bottom:1px solid var(--divider); }
.pkg-studio-drawer-head h2 { margin:0; font-size:18px; }
.pkg-studio-drawer .pkg-panel--form { width:auto; margin:0; max-height:none; height:auto; border:0; }
.pkg-studio-drawer .pkg-form-scroll { max-height:none; overflow:visible; }
.pkg-studio-drawer .pkg-workflow-history { height:auto; max-height:none; margin:0; }
.pkg-studio-drawer .pkg-history-list { max-height:none; }
.pkg-studio-expanded { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:14px; box-sizing:border-box; border:0; border-radius:0; background:var(--paper); color:var(--ink); overflow:hidden; }
.pkg-studio-expanded > .pkg-studio { height:100%; }
.pkg-studio-expanded .pkg-studio-grid { flex:1; height:auto; min-height:0; }
@media(max-width:900px) {
 .pkg-studio-grid { grid-template-columns:minmax(0,1fr); min-height:420px; height:calc(100dvh - 250px); }
 .pkg-studio-tabs { display:flex; gap:8px; }
 .pkg-studio[data-tab=result] [data-packaging-workflow-host],.pkg-studio[data-tab=chat] .pkg-studio-preview { display:none; }
 .pkg-studio-tools .button { padding:8px 10px; font-size:12px; }
 .pkg-studio-tools { gap:8px; }
 .pkg-studio-preview-head,.pkg-studio-preview-foot { padding:10px; gap:8px; }
 .pkg-studio-preview-head h2 { display:none; }
 .pkg-studio-preview-foot .button-row { flex-wrap:wrap; }
 .pkg-studio-expanded .pkg-studio-grid { min-height:0; }
 .pkg-studio .pkg-composer-bar { flex-direction:row; align-items:center; }
 .pkg-studio .pkg-composer-bar .button { width:auto; }
}
/* Page planning: one reading surface, isolated from other design workbenches. */
.page-planning{min-width:0}.pp-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}.pp-toolbar h2{margin:0;margin-right:auto}.pp-config{margin:18px 0}.pp-config>summary{padding:18px;cursor:pointer;font-weight:650}.pp-config form{display:grid;gap:14px}.pp-config textarea{resize:vertical}.pp-task{margin:18px 0}.pp-products{display:flex;gap:12px;flex-wrap:wrap}.pp-products>span{padding:6px 10px;border:1px solid var(--border,#e6dace);border-radius:8px}.pp-results{overflow:hidden;background:var(--surface-solid,#fffdfa)}.pp-table-scroll{max-height:70vh;overflow:auto}.pp-table{border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:1100px;width:max-content}.pp-table th,.pp-table td{padding:14px;vertical-align:top;border-right:1px solid #e6dace;border-bottom:1px solid #e6dace;width:300px;max-width:300px;text-align:left;background:#fffdfa}.pp-table th:first-child{width:170px;min-width:170px;max-width:170px;position:sticky;left:0;z-index:2;background:#f7f1e9}.pp-table th:nth-child(2),.pp-table td:nth-child(2){width:130px;max-width:130px}.pp-table th:nth-child(3),.pp-table td:nth-child(3){width:220px;max-width:220px}.pp-table thead th{position:sticky;top:0;z-index:3;background:#f7f1e9}.pp-table thead th:first-child{z-index:4}.pp-table th img{display:block;width:64px;height:64px;object-fit:contain;margin-bottom:8px}.pp-cell{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.75}.pp-cell summary{cursor:pointer}.pp-cell summary span{color:#b44b00}.pp-cell[open] summary{margin-bottom:10px}.pp-cell pre{white-space:pre-wrap}.pp-evidence{margin:16px}.pp-empty{padding:36px;margin-top:20px}.pp-history{position:fixed;inset:80px 20px 20px auto;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 100px);margin:0;z-index:120;overflow:auto;border:1px solid #e6dace;border-radius:20px;padding:20px;background:#fffdfa;box-shadow:0 12px 60px #34231430}.pp-history-item{width:100%;display:flex;flex-direction:column;align-items:flex-start;margin:10px 0;text-align:left}.pp-wide{position:fixed;inset:12px;z-index:100;background:var(--canvas,#faf7f0);border:1px solid #e6dace;border-radius:20px;padding:20px;overflow:auto}.pp-wide .pp-table-scroll{max-height:75vh}.pp-toolbar [aria-selected=true]{border-color:#ff7918;color:#a94400;background:#fff1e2}.page-planning [hidden]{display:none!important}@media(max-width:700px){.pp-wide{inset:4px;padding:12px}.pp-table th:first-child{width:115px;min-width:115px;max-width:115px}.pp-toolbar .button{padding:9px 12px}.pp-config>summary{padding:14px}.pp-history{top:20px;max-height:calc(100vh - 40px)}}
/* Six analysis categories share the original result and export data. */
.page-planning .pp-category-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:thin;border-bottom:1px solid #e6dace;background:#faf6ef;padding:0 14px}.page-planning .pp-category-tabs button{flex:1 0 150px;min-height:65px;max-width:240px;padding:12px 14px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:#60594f;font:inherit;font-size:13px;line-height:1.55;cursor:pointer;white-space:normal}.page-planning .pp-category-tabs button[aria-selected=true]{border-bottom-color:#ff7918;color:#a94400;background:linear-gradient(0deg,#fff0df,transparent)}.page-planning .pp-category-tabs button:focus-visible{outline:2px solid #b44b00;outline-offset:-5px}.page-planning .pp-focus-table th:first-child{width:190px;min-width:190px;max-width:190px}.page-planning .pp-focus-table th:nth-child(2),.page-planning .pp-focus-table td:nth-child(2){width:190px;min-width:190px;max-width:190px}.page-planning .pp-focus-table th:nth-child(n+3),.page-planning .pp-focus-table td:nth-child(n+3){width:310px;min-width:310px;max-width:310px}.page-planning .pp-weight{font-size:12px;color:#8f4d21;margin-top:9px;font-weight:400}.page-planning .pp-product-heading{display:flex;gap:12px;align-items:flex-start;overflow-wrap:anywhere;font-size:13px;line-height:1.7}.page-planning .pp-product-heading img{width:64px;height:64px;object-fit:contain;flex:none}.page-planning .pp-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:0 22px 22px}.page-planning .pp-product-card{min-width:0;border:1px solid #e6dace;border-radius:14px;padding:22px;background:#fffdfa}.page-planning .pp-product-card .pp-product-heading{border-bottom:1px solid #e6dace;padding-bottom:16px;margin-bottom:18px}.page-planning .pp-full-content{font-size:14px;line-height:1.95;overflow-wrap:anywhere;white-space:pre-wrap}.page-planning .pp-overview{padding:24px;max-width:1160px;margin:auto}.page-planning .pp-category-intro{padding:20px 22px}.page-planning .pp-category-intro h3,.page-planning .pp-overview h3{margin:0 0 14px}.page-planning .pp-comment summary{font-size:12px;color:#8b552a}.page-planning .pp-comment[open]>div{margin-top:12px}.page-planning .pp-overview>.pp-comment{margin-bottom:18px}.page-planning .pp-limitations{padding:16px 22px;border-top:1px solid #e6dace;color:#655d53;font-size:12px}.page-planning .pp-limitations summary{cursor:pointer}@media(max-width:700px){.page-planning .pp-category-tabs{padding:0 8px}.page-planning .pp-category-tabs button{flex:0 0 auto;max-width:none;min-height:50px;white-space:nowrap;padding:10px 14px}.page-planning .pp-product-grid{grid-template-columns:minmax(0,1fr);padding:0 12px 12px;gap:12px}.page-planning .pp-product-card{padding:16px}.page-planning .pp-overview,.page-planning .pp-category-intro{padding:18px 14px}.page-planning .pp-focus-table th:first-child{width:135px;min-width:135px;max-width:135px}.page-planning .pp-focus-table th:nth-child(2),.page-planning .pp-focus-table td:nth-child(2){width:170px;min-width:170px;max-width:170px}}
.page-planning .pp-reading-panel{max-height:70vh;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.page-planning .pp-reading-panel:focus-visible{outline:2px solid #b44b00;outline-offset:-3px}.page-planning.pp-wide .pp-reading-panel{max-height:75vh}
.page-planning .pp-product-selection,.page-planning .pp-product-detail{margin:18px 0;padding:20px;border:1px solid var(--border,#e6dace);border-radius:16px;background:var(--surface-solid,#fffdfa);min-width:0}.page-planning .pp-product-selection h3,.page-planning .pp-product-detail h3{margin:0}.page-planning .pp-product-selection p{margin:8px 0 16px}.page-planning .pp-product-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:12px}.page-planning .pp-product-option{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;padding:15px;border:1px solid var(--border,#e6dace);border-radius:12px;background:#fffdfa;color:inherit;font:inherit;text-align:left;cursor:pointer;box-shadow:0 2px 10px #3423140d}.page-planning .pp-product-option:hover{border-color:#e8995f}.page-planning .pp-product-option[aria-pressed=true]{border-color:#d65c04;background:#fff1e2;box-shadow:inset 0 0 0 1px #d65c04}.page-planning .pp-product-option:focus-visible{outline:3px solid #a94400;outline-offset:2px}.page-planning .pp-product-url{font-size:12px;line-height:1.5;overflow-wrap:anywhere;color:#655d53}.page-planning .pp-product-status{display:inline-block;font-size:13px;font-weight:650;color:#874010}.page-planning .pp-product-detail .pp-toolbar{margin-top:0}.page-planning .pp-product-detail h3{min-width:0;overflow-wrap:anywhere}.page-planning .pp-product-detail .pp-toolbar .button{white-space:normal;text-align:center}.page-planning .pp-product-detail .notice{overflow-wrap:anywhere}@media(max-width:700px){.page-planning .pp-product-selection,.page-planning .pp-product-detail{padding:14px;margin:12px 0}.page-planning .pp-product-list{grid-template-columns:minmax(0,1fr)}.page-planning .pp-product-detail .pp-toolbar .button{width:100%}}
.page-planning .pp-source-preview{margin:0 0 14px;padding-left:20px;overflow-wrap:anywhere}.page-planning .pp-source-preview li+li{margin-top:5px}
.cf-node.cf-node--drop-target { outline:3px solid var(--accent); outline-offset:4px; box-shadow:0 0 0 8px var(--accent-soft); }
.cf-node--drop-target .cf-node-body { background:var(--accent-soft); }
.cf-stage { -webkit-user-select:none; user-select:none; }
.cf-stage input,.cf-stage textarea,.cf-stage [contenteditable]:not([contenteditable="false"]) { -webkit-user-select:text; user-select:text; }
.cf-template-dialog{width:min(760px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--divider);border-radius:18px;padding:22px;background:var(--paper);color:var(--ink)}
.cf-template-dialog::backdrop{background:#18202c66}
.cf-template-dialog header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cf-template-dialog .field{display:grid;gap:6px;margin:12px 0}
.cf-template-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:0 16px}
.cf-template-dialog input:not([type=checkbox]),.cf-template-dialog select,.cf-template-dialog textarea{width:100%;min-width:0}
.cf-template-dialog [data-template-thumb]{max-width:150px;height:90px;object-fit:contain}
.cf-template-dialog pre,[data-creative-template-admin] pre{white-space:pre-wrap;overflow-wrap:anywhere}
.cf-template-dialog footer{margin-top:16px}
.cf-template-dialog [hidden]{display:none!important}

.cf-template-dialog header button { flex-shrink:0; white-space:nowrap; }

/* Keep the keyword result table inside its grid track; the table itself scrolls in .table-wrap. */
.strategy-layout,.strategy-main{min-width:0}

/* Operations work calendar */
@media(min-width:651px){.app-shell:has(.oc-calendar){min-height:calc(100dvh - 38px)}.app-shell:has(.oc-calendar) .sidebar{height:calc(100dvh - 38px)}}
.oc-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;min-width:0}
.oc-workspace.has-editor{grid-template-columns:minmax(690px,1fr) minmax(340px,400px)}
.oc-main{min-width:0}
.oc-page-heading{align-items:center;gap:18px;margin-bottom:12px}
.oc-title{display:flex;align-items:center;gap:9px;flex:none}.oc-title h1{font-size:25px;line-height:1.15}.oc-admin-view{display:inline-flex;padding:3px 7px;border:1px solid #e3cdb7;border-radius:999px;background:#fff7ed;color:#7f4a22;font-size:9px;font-weight:750;white-space:nowrap}
.oc-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;margin-left:auto}
.oc-toolbar{padding:10px 12px;margin-bottom:10px}
.oc-month-controls{display:flex;align-items:center;gap:10px;min-height:44px}
.oc-month-controls strong{min-width:116px;font-size:17px;color:var(--heading)}
.oc-month-controls .icon-button{border:1px solid var(--divider);background:var(--paper)}
.oc-view-switch{flex:none}
.oc-filter-toggle-row{display:none;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px}
.oc-filter-row{display:flex;align-items:center;gap:8px;min-width:0}
.oc-filter-row[hidden]{display:flex}
.oc-filter-row>.search-field{min-width:180px;max-width:none;flex:1 1 240px}
.oc-filter-row>label:not(.search-field){min-width:126px;flex:0 1 158px}
.oc-filter-row select,.oc-filter-row input{min-height:40px}
.oc-quick{display:flex;gap:6px;flex:none}
.oc-quick .button[aria-pressed=true]{color:var(--accent-text);border-color:#eda86e;background:var(--accent-soft)}
.oc-active-filter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:7px 9px 7px 12px;border-radius:10px;background:#fff3e5;color:var(--accent-text);font-size:12px}
.oc-surface{min-width:0;max-height:var(--oc-surface-height,calc(100dvh - 318px));overflow:auto;overscroll-behavior:contain;background:var(--readable);border-color:#eadfd2}
.oc-calendar{min-width:0}
.oc-weekdays,.oc-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.oc-weekdays{position:sticky;top:0;z-index:3;background:#f8f1e7;border-bottom:1px solid var(--divider)}
.oc-weekdays span{padding:8px;text-align:center;color:var(--muted);font-size:11px;font-weight:700;border-right:1px solid var(--divider)}
.oc-weekdays span:last-child{border-right:0}
.oc-days{height:calc(var(--oc-surface-height,450px) - 37px)}
.oc-calendar[data-weeks="4"] .oc-days{min-height:320px;max-height:496px;grid-template-rows:repeat(4,minmax(80px,1fr))}
.oc-calendar[data-weeks="5"] .oc-days{min-height:400px;max-height:620px;grid-template-rows:repeat(5,minmax(80px,1fr))}
.oc-calendar[data-weeks="6"] .oc-days{min-height:480px;max-height:744px;grid-template-rows:repeat(6,minmax(80px,1fr))}
.oc-day{min-width:0;min-height:0;padding:4px 6px;overflow:hidden;border-right:1px solid var(--divider);border-bottom:1px solid var(--divider);background:#fffdfa}
.oc-day:nth-child(7n){border-right:0}.oc-day:nth-last-child(-n+7){border-bottom:0}
.oc-day.is-outside{background:#f6f1ea;color:var(--subtle)}
.oc-day.is-selected{box-shadow:inset 0 0 0 2px var(--accent)}
.oc-day-number{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:25px;padding:0 3px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.oc-day-number time{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-weight:650}
.oc-day-number span{color:var(--accent-text);font-size:10px}
.oc-day.is-today .oc-day-number time{background:var(--accent);color:#332011}
.oc-day-events{display:grid;gap:3px;margin-top:3px;min-width:0}
.oc-event{display:flex;align-items:center;gap:4px;min-width:0;min-height:21px;padding:2px 6px;border:0;border-left:3px solid #79a6dd;border-radius:5px;background:#e9f2fc;color:#314c70;text-align:left;font:600 10px var(--font);cursor:pointer}
.oc-plan-summary{display:flex;align-items:center;min-width:0;flex:1;white-space:nowrap}.oc-plan-title,.oc-plan-content{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-plan-title{flex:1}.oc-plan-summary.has-content .oc-plan-title{flex:0 1 auto;max-width:42%}.oc-plan-content{flex:1 1 0}.oc-plan-separator{flex:none;margin:0 6px;font-weight:500;opacity:.65}.oc-event-direction{flex:none}.oc-event small{flex:none;margin-left:auto;font-size:9px;font-weight:500}.oc-event--owner{--oc-owner-tone:#647A91;--oc-owner-tint:#EDF1F3;--oc-owner-ink:#2C3742}.oc-event.oc-event--owner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:14px 15px;grid-template-areas:"main main" "content state";gap:1px 5px;min-height:35px;padding:2px 5px;border-left-color:var(--oc-owner-tone);background:var(--oc-owner-tint);color:var(--oc-owner-ink);text-decoration:none}.oc-event.oc-event--owner.oc-event--middle{border-left-color:var(--oc-owner-tone)}.oc-owner-event-main{grid-area:main;display:flex;align-items:center;gap:3px;min-width:0;line-height:14px}.oc-owner-event-main .oc-plan-title{font-size:10px;font-weight:800}.oc-event-owner{flex:0 1 36%;min-width:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--oc-owner-ink);font-weight:850}.oc-event-owner-separator{flex:none;margin:0 2px;font-style:normal;opacity:.5}.oc-owner-event-content{grid-area:content;display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;color:var(--oc-owner-ink);font-size:9px;font-weight:550;line-height:15px;opacity:.82}.oc-owner-event-content .oc-event-time{flex:none;margin:0;font:800 9px var(--font)}.oc-event-time-separator{flex:none;margin:0 3px;font-style:normal;opacity:.55}.oc-event-content-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-event-state{grid-area:state;display:inline-flex;align-items:center;gap:2px;flex:none;min-height:15px;padding:0 4px;border:1px solid #cddff4;border-radius:999px;background:#f3f7fc;color:#3b6090;font-size:8px;font-weight:800;line-height:13px;white-space:nowrap}.oc-event-state b{font-size:9px}.oc-event-state--in_progress{border-color:#edc796;background:#fff4e8;color:#8d4b18}.oc-event-state--completed{border-color:#bdddc9;background:#f0f8f3;color:#28734a}.oc-event-state--overdue{border-color:#df716b;background:#fff0ef;color:#9f302d;box-shadow:0 0 0 1px #fff inset}.oc-event-state--cancelled{border-color:#d2cbc5;background:#f3f0ed;color:#6f6862}.oc-event.oc-event--owner.oc-event--cancelled .oc-plan-title,.oc-event.oc-event--owner.oc-event--cancelled .oc-owner-event-content{text-decoration:line-through}
.oc-event--in_progress{border-left-color:#ed934e;background:#fff0df;color:#854718}
.oc-event--completed{border-left-color:#68b68e;background:#e9f7ef;color:#286f4a}
.oc-event--overdue{border-left-color:#de6b68;background:#fdebea;color:#a43f3d}
.oc-event--cancelled{border-left-color:#aaa29a;background:#efedea;color:#746d66;text-decoration:line-through}
.oc-event--multi{border-radius:3px}.oc-event--middle{border-left-color:transparent;border-radius:0}.oc-event--end{border-radius:0 6px 6px 0}
.oc-more{min-height:19px;padding:0 6px;border:0;background:transparent;color:var(--accent-text);font:600 10px var(--font);text-align:left;cursor:pointer}
.oc-list{display:grid}.oc-list-item{border-bottom:1px solid var(--divider)}.oc-list-item:last-child{border-bottom:0}.oc-list-item--owner{--oc-owner-tone:#647A91;--oc-owner-tint:#EDF1F3;--oc-owner-ink:#2C3742;border-left:4px solid var(--oc-owner-tone);background:linear-gradient(90deg,var(--oc-owner-tint),#fffdfa 24%)}
.oc-list-main{display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:15px 18px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.oc-list-main:hover{background:#fff7ed}.oc-list-date{display:grid;place-items:center;padding:7px;border-radius:10px;background:#f7efe5}.oc-list-date strong{font-size:20px}.oc-list-date small{font-size:9px;color:var(--muted)}
.oc-list-copy{display:grid;gap:4px;min-width:0}.oc-list-summary{display:flex;align-items:center;gap:6px;min-width:0}.oc-list-summary>i{flex:none;color:var(--muted);font-style:normal}.oc-list-owner{flex:0 1 26%;min-width:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--oc-owner-ink);font-size:11px;font-weight:850}.oc-list-copy .oc-plan-summary{width:100%;font-weight:700}.oc-list-copy .oc-plan-content{color:var(--muted);font-weight:550}.oc-list-copy small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.oc-empty{padding:52px 20px;text-align:center}.oc-empty p{margin:8px 0 18px;color:var(--muted);font-size:12px}
.oc-status{display:inline-flex;align-items:center;width:max-content;padding:4px 8px;border:1px solid #cddff4;border-radius:999px;background:#eaf3fd;color:#3b6090;font-size:10px;white-space:nowrap}
.oc-status--in_progress{border-color:#f3d0ac;background:#fff0df;color:#92501d}.oc-status--completed{border-color:#cde7d8;background:#e9f7ef;color:#28734a}.oc-status--overdue{border-color:#efc2be;background:#fdebea;color:#a33f3c}.oc-status--cancelled{border-color:#dbd5cf;background:#efedea;color:#746d66}
.oc-legend{display:flex;align-items:center;gap:13px;min-width:0;padding:7px 4px;color:var(--muted);font-size:10px}.oc-owner-legend{display:flex;align-items:center;gap:7px;min-width:0;flex:1}.oc-owner-legend>strong{flex:none;color:var(--ink);font-size:10px}.oc-owner-legend-strip{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:thin}.oc-owner-legend-item{--oc-owner-tone:#647A91;display:inline-flex;align-items:center;gap:4px;flex:none;max-width:105px;min-height:25px;padding:2px 7px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);font:inherit;cursor:pointer}.oc-owner-legend-item i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--oc-owner-tone);box-shadow:0 0 0 1px #fff,0 0 0 2px color-mix(in srgb,var(--oc-owner-tone) 48%,#bcb4aa)}.oc-owner-legend-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-owner-legend-item:hover,.oc-owner-legend-item[aria-pressed=true]{border-color:color-mix(in srgb,var(--oc-owner-tone) 45%,#d9cec2);background:var(--oc-owner-tint,#f2eee9);color:var(--oc-owner-ink,var(--ink))}.oc-owner-legend-all i{background:conic-gradient(#d9782b 0 25%,#3f8c5a 0 50%,#6673b8 0 75%,#ae6b63 0)}.oc-owner-legend-more{position:relative;flex:none}.oc-owner-legend-more summary{display:inline-flex;align-items:center;min-height:25px;padding:2px 7px;border:1px solid var(--divider);border-radius:999px;background:#fffdfa;color:var(--accent-text);font-weight:750;cursor:pointer;list-style:none;white-space:nowrap}.oc-owner-legend-more summary::-webkit-details-marker{display:none}.oc-owner-legend-more>div{position:absolute;right:0;bottom:calc(100% + 6px);z-index:15;display:grid;gap:3px;width:max-content;min-width:150px;max-width:min(260px,80vw);max-height:230px;padding:7px;overflow:auto;border:1px solid var(--divider);border-radius:12px;background:#fffdfa;box-shadow:0 10px 28px #30231c2b}.oc-owner-legend-more .oc-owner-legend-item{width:100%;max-width:240px;justify-content:flex-start}.oc-status-legend{display:flex;align-items:center;gap:10px;flex:none}.oc-status-legend>span{display:flex;align-items:center;gap:5px;white-space:nowrap}.oc-dot{width:8px;height:8px;border-radius:50%;background:#83ace0}.oc-dot--in_progress{background:#ed934e}.oc-dot--completed{background:#68b68e}.oc-dot--overdue{background:#de6b68}.oc-dot--cancelled{background:#aaa29a}
.oc-editor{position:sticky;top:80px;max-height:var(--oc-editor-height,calc(100vh - 100px));overflow:hidden;background:var(--readable);border-color:#eadfd2}
.oc-editor[hidden]{display:none!important}.oc-editor-form{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:var(--oc-editor-height,calc(100vh - 100px))}
.oc-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 19px;border-bottom:1px solid var(--divider)}.oc-editor-head h2{margin:0 0 8px;font-size:19px}
.oc-editor-scroll{overflow:auto;padding:18px 19px;overscroll-behavior:contain}.oc-editor .field{margin-bottom:14px}.oc-editor textarea{white-space:pre-wrap;line-height:1.7}
.oc-all-day{display:flex;align-items:center;gap:9px;margin:0 0 15px;font-size:12px;font-weight:650}.oc-all-day input{width:18px;height:18px;margin:0}
.oc-time-fields[hidden]{display:none!important}
.oc-owner{color:var(--muted);font-size:11px}.oc-editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:13px 19px;border-top:1px solid var(--divider);background:#fbf6ef}
.oc-plan-actions{display:flex;gap:6px;flex:1;flex-wrap:wrap}.oc-action-fields{padding:14px;border:1px solid #f0d4b9;border-radius:12px;background:#fff5e9}.oc-action-fields h3{margin:0 0 13px;font-size:14px}
.oc-history{margin-top:14px;padding:12px;border:1px solid var(--divider);border-radius:10px}.oc-history summary{cursor:pointer;font-size:12px;font-weight:650}.oc-history ol{margin:12px 0 0;padding-left:22px}.oc-history li+li{margin-top:9px}.oc-history li{font-size:11px}.oc-history small{display:block;color:var(--muted);margin-top:3px}
@media(max-width:1250px){.oc-page-heading{align-items:flex-start}.oc-header-actions{flex-wrap:wrap}.oc-filter-toggle-row{display:flex}.oc-filter-row[hidden]{display:none}.oc-filter-row{align-items:stretch;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px solid var(--divider)}.oc-filter-row>.search-field{flex:1 1 100%}.oc-workspace.has-editor{grid-template-columns:minmax(0,1fr)}.oc-editor{position:fixed;inset:10px;z-index:90;max-height:calc(100dvh - 20px);overflow:auto}.oc-editor-form{max-height:none;min-height:calc(100dvh - 22px)}.oc-editor-scroll{overflow:visible}.oc-editor-actions{position:sticky;bottom:0;z-index:2}.oc-main{order:1}.oc-legend{align-items:flex-start;flex-wrap:wrap}.oc-owner-legend{flex-basis:100%}}
@media(max-width:700px){.oc-page-heading{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}.oc-title h1{font-size:23px}.oc-header-actions{justify-content:flex-start;margin:0}.oc-month-controls{display:grid;grid-template-columns:44px minmax(104px,1fr) 44px auto;width:100%}.oc-month-controls strong{text-align:center}.oc-view-switch{width:100%}.oc-view-switch .filter{flex:1}.oc-header-actions>.button--primary{width:100%}.oc-toolbar{padding:9px}.oc-filter-row{align-items:stretch}.oc-filter-row>label:not(.search-field),.oc-filter-row>.search-field{flex:1 1 100%;min-width:0}.oc-quick{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.oc-surface{max-height:var(--oc-surface-height,calc(100dvh - 250px))}.oc-list-main{grid-template-columns:52px minmax(0,1fr);padding:13px 10px}.oc-list-main>.oc-status{grid-column:2}.oc-list-owner{flex-basis:34%;max-width:92px}.oc-editor{inset:0;border-radius:0}.oc-editor-form{min-height:100dvh}.oc-editor-head,.oc-editor-scroll,.oc-editor-actions{padding-left:14px;padding-right:14px}.oc-editor .field-grid{grid-template-columns:1fr}.oc-plan-actions{flex-basis:100%}.oc-calendar{min-width:760px}.oc-owner-legend>strong{display:none}.oc-owner-legend-item{max-width:88px}.oc-status-legend{gap:8px;max-width:100%;overflow-x:auto;padding-bottom:2px}}
@media(prefers-reduced-motion:reduce){.oc-editor,.oc-event{scroll-behavior:auto;transition:none}}

/* Sales planning uses the shared cream/orange workbench controls. */
.sp-page{min-width:0}.sp-heading{align-items:center;margin-bottom:13px}.sp-heading h1{margin:0;font-size:28px;letter-spacing:-.5px}.sp-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sp-filters{display:flex;align-items:center;gap:20px;padding:10px 16px;border:1px solid var(--divider);border-radius:14px;margin-bottom:10px}.sp-filters label{display:flex;align-items:center;gap:10px;min-width:0;font-size:12px;font-weight:650}.sp-filters select{min-width:130px;max-width:280px;min-height:37px}.sp-filters .sp-product-filter{flex:1}.sp-product-filter select{width:100%;max-width:390px}.sp-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.sp-stat{display:flex;align-items:center;gap:14px;padding:14px 18px;min-width:0;border:1px solid var(--divider);border-radius:14px}.sp-stat-icon{display:grid;place-items:center;flex:none;width:45px;height:45px;border-radius:50%;background:#fff0df;color:var(--accent-text);font-size:28px}.sp-stat-icon--1{background:#ecf8f0;color:#28734a}.sp-stat-icon--2{background:#edf3fd;color:#365b91}.sp-stat>div{min-width:0}.sp-stat>div>span{display:block;font-size:12px;color:var(--muted)}.sp-stat strong{display:block;margin-top:3px;font-size:23px;line-height:1.25;overflow-wrap:anywhere}.sp-stat small{margin-left:6px;font-size:13px}.sp-allocation{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:8px 0 13px;color:var(--muted);font-size:12px}.sp-allocation small{font-size:10px}.sp-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}.sp-workspace.has-editor{grid-template-columns:minmax(0,1fr) 310px}.sp-workspace.has-batch{grid-template-columns:minmax(0,1fr) minmax(490px,.9fr)}.sp-main{min-width:0;padding:12px 12px 0;background:var(--readable);border-color:#eadfd2}.sp-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}.sp-month{display:flex;align-items:center;gap:10px}.sp-month strong{font-size:19px;min-width:116px;text-align:center}.sp-month .icon-button{width:38px;height:35px;min-height:35px;border:1px solid var(--divider);background:#fffdfa;border-radius:12px;font-size:22px}.sp-view{display:flex;gap:2px}.sp-view .filter{min-height:34px;padding:5px 14px}.sp-surface{max-height:var(--sp-height,calc(100dvh - 355px));overflow:auto;overscroll-behavior:contain;border:1px solid #eadfd2;border-radius:12px;background:#fffdfa}.sp-weekdays,.sp-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.sp-weekdays{position:sticky;top:0;z-index:2;background:#f8f1e7}.sp-weekdays span{padding:6px;text-align:center;font-size:11px;color:var(--muted);border-right:1px solid #eadfd2;border-bottom:1px solid #eadfd2}.sp-weekdays span:last-child{border-right:0}.sp-days{height:calc(var(--sp-height,475px) - 30px);min-height:calc(var(--sp-weeks,5)*86px);grid-template-rows:repeat(var(--sp-weeks,5),minmax(86px,1fr))}.sp-day{position:relative;min-width:0;min-height:0;border-right:1px solid #eadfd2;border-bottom:1px solid #eadfd2;padding:5px 7px;overflow:hidden}.sp-day:nth-child(7n){border-right:0}.sp-day:nth-last-child(-n+7){border-bottom:0}.sp-day.is-outside{background:#f7f2eb;color:var(--subtle)}.sp-day.is-today,.sp-day.is-selected{background:#fff5e9;box-shadow:inset 0 0 0 1.5px var(--accent);border-radius:6px}.sp-day-number{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:23px;font-size:12px;font-weight:700}.sp-day-number time{display:grid;place-items:center;min-width:23px;height:23px;border-radius:50%}.sp-day.is-today time{background:var(--accent);color:#332011}.sp-day-number small{color:var(--accent-text);font-size:10px;font-weight:500}.sp-day-record{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.sp-day-record>.sp-dot{position:absolute;top:13px;left:37px}.sp-day-values{display:grid;gap:3px;color:var(--muted);font-size:10px;line-height:1.35}.sp-day-values>span{display:flex;align-items:center;justify-content:space-between;gap:5px;white-space:nowrap}.sp-day-values b{font-weight:550;color:var(--ink);overflow:hidden;text-overflow:ellipsis}.sp-status--done,.sp-status--done b{color:#28734a!important}.sp-status--behind,.sp-status--behind b{color:#a34c0e!important}.sp-day-products{display:grid;gap:3px}.sp-mini-record{display:flex;gap:4px;align-items:center;width:100%;padding:3px 4px;border:0;border-radius:4px;background:#fcf1e4;color:var(--ink);text-align:left;font:inherit;font-size:10px;cursor:pointer;min-width:0}.sp-mini-record>span:not(.sp-dot){flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sp-mini-record>b{flex:none;max-width:48%;font-size:9px;overflow:hidden;text-overflow:ellipsis}.sp-day-products>.button{padding:0;min-height:18px;font-size:10px}.sp-dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:#aaa9a5}.sp-dot--done,.sp-dot--recorded{background:#39a775}.sp-dot--behind{background:#e9a11d}.sp-dot--future{background:#eadfcf}.sp-dot--missing{background:#a6adb8}.sp-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:9px 3px;color:var(--muted);font-size:10px}.sp-legend>span{display:flex;align-items:center;gap:6px}.sp-list-day{padding:12px 14px;border-bottom:1px solid var(--divider)}.sp-list-day:last-child{border:0}.sp-list-day h3{margin:0 0 8px;font-size:13px}.sp-list-record{display:flex;align-items:center;gap:10px;width:100%;padding:9px 4px;border:0;border-top:1px solid #f1e8de;background:none;text-align:left;color:var(--ink);font:inherit;cursor:pointer}.sp-list-product{display:grid;gap:4px;min-width:0;flex:1}.sp-list-product strong{font-size:12px;overflow-wrap:anywhere}.sp-list-product small{font-size:10px;color:var(--muted);overflow-wrap:anywhere}.sp-list-record .sp-day-values{width:115px;flex:none}.sp-empty{padding:52px 20px;text-align:center}.sp-empty h3{margin:0;font-size:18px}.sp-empty p{margin:10px 0 18px;color:var(--muted);font-size:12px}.sp-editor{position:sticky;top:82px;min-width:0;max-height:var(--sp-editor-height,calc(100dvh - 110px));overflow:hidden;background:var(--readable);border-color:#eadfd2}.sp-editor[hidden]{display:none!important}.sp-editor form{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:var(--sp-editor-height,calc(100dvh - 110px));min-height:0}.sp-editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;border-bottom:1px solid var(--divider)}.sp-editor-head h2{margin:0;font-size:18px;overflow-wrap:anywhere}.sp-editor-head .icon-button{font-size:23px}.sp-editor-scroll{padding:17px;overflow:auto;overscroll-behavior:contain;min-height:0;font-size:12px}.sp-editor .field{margin-bottom:15px}.sp-editor .field span{font-size:12px}.sp-editor input,.sp-editor select,.sp-editor textarea{min-height:38px}.sp-editor textarea{white-space:pre-wrap;line-height:1.6}.sp-editor-actions{display:flex;justify-content:flex-end;gap:9px;padding:12px 17px;border-top:1px solid var(--divider);background:#fcf7f0}.sp-editor-actions .button{flex:1}.sp-editor-product{display:grid;gap:6px;margin-bottom:20px}.sp-editor-product strong{font-size:14px;overflow-wrap:anywhere}.sp-editor-product small{font-size:11px;color:var(--muted);overflow-wrap:anywhere}.sp-help{color:var(--muted);font-size:11px;line-height:1.7;margin:0 0 16px}.sp-check{display:flex;gap:9px;align-items:center;margin:0 0 12px;font-size:12px}.sp-check input{width:17px;min-height:17px;margin:0;flex:none}.sp-batch-wrap{max-width:100%;overflow:auto}.sp-batch{width:100%;border-collapse:collapse;table-layout:fixed}.sp-batch th,.sp-batch td{padding:5px 4px;text-align:left;border-bottom:1px solid var(--divider);font-size:11px}.sp-batch th:first-child{width:55px}.sp-batch th:nth-child(2),.sp-batch th:nth-child(3){width:81px}.sp-batch input{min-width:0;width:100%;min-height:32px;padding:5px;font-size:11px}.sp-batch thead{position:sticky;top:0;background:#fcf7f0;z-index:1}.sp-more-product{display:block;width:100%;padding:14px 5px;border:0;border-bottom:1px solid var(--divider);background:none;text-align:left;color:var(--ink);font:inherit;cursor:pointer;overflow-wrap:anywhere}.sp-loading{padding:9px 0;color:var(--muted);font-size:12px}.sp-editor .notice{margin-bottom:14px;overflow-wrap:anywhere}.sp-editor .notice .button{margin-top:8px}.sp-editor details{margin-top:8px;font-size:11px}.sp-editor details summary{cursor:pointer}.sp-editor details p{white-space:pre-wrap}.sp-page button:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}.sp-day-record:hover,.sp-mini-record:hover,.sp-list-record:hover{background:#fff0de}.sp-page [data-sp-new-shop][hidden],.sp-page [data-sp-range][hidden]{display:none!important}
@media(max-width:1500px){.sp-filters{gap:12px;flex-wrap:wrap}.sp-filters select{min-width:110px}.sp-stat{padding:12px;gap:9px}.sp-stat-icon{width:36px;height:36px;font-size:23px}.sp-stat strong{font-size:21px}.sp-workspace.has-editor{grid-template-columns:minmax(0,1fr) 285px}.sp-workspace.has-batch{grid-template-columns:minmax(0,1fr) 480px}.sp-workspace.has-editor .sp-calendar-toolbar{gap:8px}.sp-workspace.has-editor .sp-calendar-toolbar>.sp-actions{width:100%;justify-content:flex-end}}
@media(max-width:1250px){.sp-workspace.has-editor,.sp-workspace.has-batch{grid-template-columns:minmax(0,1fr)}.sp-editor{position:fixed;inset:16px 16px 16px auto;width:min(540px,calc(100vw - 32px));z-index:95;max-height:calc(100dvh - 32px);box-shadow:0 10px 100px #30231c50}.sp-editor form{height:calc(100dvh - 34px);max-height:calc(100dvh - 34px)}.sp-editor--wide{width:min(780px,calc(100vw - 32px))}.sp-workspace.has-editor .sp-calendar-toolbar>.sp-actions{width:auto}.sp-filters label{flex:1 1 190px}.sp-filters select{width:100%;max-width:none;min-width:0}.sp-filters .sp-product-filter{flex:1 1 260px}}
@media(max-width:700px){.sp-heading{align-items:flex-start;gap:12px;flex-wrap:wrap}.sp-heading h1{font-size:25px}.sp-heading>.sp-actions{width:100%;gap:6px}.sp-heading>.sp-actions .button{flex:1;padding-left:8px;padding-right:8px;font-size:11px}.sp-filters{padding:10px;gap:9px}.sp-filters label,.sp-filters .sp-product-filter{flex:1 1 100%;display:grid;grid-template-columns:48px minmax(0,1fr);font-size:11px}.sp-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sp-stat{padding:10px;gap:8px}.sp-stat-icon{width:30px;height:30px;font-size:21px}.sp-stat strong{font-size:20px}.sp-stat>div>span{font-size:11px}.sp-stat small{font-size:11px}.sp-allocation{margin-bottom:10px}.sp-allocation small{line-height:1.5}.sp-main{padding:10px 9px 0}.sp-month{width:100%;justify-content:space-between;gap:5px}.sp-month strong{font-size:17px}.sp-calendar-toolbar>.sp-actions,.sp-workspace.has-editor .sp-calendar-toolbar>.sp-actions{width:100%;justify-content:flex-end}.sp-calendar{min-width:720px}.sp-list-day{padding:10px}.sp-list-record{gap:7px}.sp-list-record .sp-day-values{width:90px}.sp-editor,.sp-editor--wide{inset:0;width:100%;border-radius:0;max-height:100dvh}.sp-editor form{height:100dvh;max-height:100dvh}.sp-editor .field-grid{grid-template-columns:1fr}.sp-batch th:nth-child(2),.sp-batch th:nth-child(3){width:70px}.sp-batch th:first-child{width:45px}.sp-legend{gap:9px}.sp-empty{padding:36px 14px}}
@media(prefers-reduced-motion:reduce){.sp-page *{scroll-behavior:auto;transition:none}}
.sp-filters label{white-space:nowrap}.sp-backdrop{position:fixed;inset:0;z-index:94;background:#30231c35}.sp-backdrop[hidden]{display:none!important}
.sp-calendar[data-weeks="4"]{--sp-weeks:4}.sp-calendar[data-weeks="5"]{--sp-weeks:5}.sp-calendar[data-weeks="6"]{--sp-weeks:6}
.sp-surface{position:relative}.sp-main,.sp-editor{margin-bottom:0}.sp-workspace{min-height:0}
.sp-days{min-height:calc(var(--sp-weeks,5)*52px);grid-template-rows:repeat(var(--sp-weeks,5),minmax(52px,1fr))}.sp-calendar[data-density="compact"] .sp-day{padding:3px 5px}.sp-calendar[data-density="compact"] .sp-day-number{min-height:19px;height:19px}.sp-calendar[data-density="compact"] .sp-day-number time{height:19px;min-width:19px}.sp-calendar[data-density="compact"] .sp-day-record>.sp-dot{top:9px;left:30px}.sp-calendar[data-density="compact"] .sp-day-values{gap:1px;font-size:10px;line-height:1.25}.sp-calendar[data-density="compact"] .sp-day-values>span:nth-child(3){display:none}.sp-calendar[data-density="compact"] .sp-mini-record{padding:1px 3px;min-height:15px}.sp-calendar[data-density="compact"] .sp-day-products{gap:1px}.sp-calendar[data-density="compact"] .sp-day-products>.button{min-height:15px;line-height:1.1}
@media(min-width:701px) and (max-height:820px){.sp-heading{margin-bottom:9px}.sp-heading h1{font-size:24px}.sp-heading .button{min-height:34px;padding-top:6px;padding-bottom:6px}.sp-filters{padding:6px 12px;margin-bottom:8px;gap:12px}.sp-filters select{min-height:32px;height:32px;padding-top:4px;padding-bottom:4px}.sp-stat{padding:8px 12px;gap:9px}.sp-stat-icon{width:30px;height:30px;font-size:22px}.sp-stat strong{font-size:20px;line-height:1.2}.sp-stat>div>span{font-size:11px;line-height:1.4}.sp-allocation{margin:6px 0 8px;line-height:1.4}.sp-main{padding-top:8px}.sp-calendar-toolbar{margin-bottom:7px}.sp-month .icon-button{height:30px;min-height:30px}.sp-month strong{font-size:17px}.sp-calendar-toolbar .button{min-height:30px;padding-top:4px;padding-bottom:4px}.sp-view .filter{min-height:30px}.sp-legend{padding-top:6px;padding-bottom:6px}}
.sp-days{height:calc(var(--sp-height,475px) - 34px)}.sp-calendar[data-density="compact"] .sp-day-number,.sp-calendar[data-density="compact"] .sp-day-number time{height:18px;min-height:18px}.sp-calendar[data-density="compact"] .sp-mini-record{height:13px;min-height:13px;padding-top:0;padding-bottom:0;line-height:13px}.sp-calendar[data-density="compact"] .sp-day-products>.button{height:13px;min-height:13px;line-height:13px}
@media(min-width:701px) and (max-height:820px){.sp-heading{margin-bottom:6px}.sp-filters{margin-bottom:6px}.sp-stat{padding-top:7px;padding-bottom:7px}.sp-allocation{margin-top:4px;margin-bottom:6px}}
.sp-calendar[data-density="compact"] .sp-day-products{display:flex;align-items:center;gap:3px}.sp-calendar[data-density="compact"] .sp-mini-record{height:22px;min-height:22px;line-height:22px;flex:1;padding:0 3px}.sp-calendar[data-density="compact"] .sp-mini-record b{display:none}.sp-calendar[data-density="compact"] .sp-day-products>.button{height:22px;min-height:22px;line-height:22px;flex:none;padding:0 3px}
.sp-trend-title{font-size:18px}.sp-trend-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px}.sp-trend-controls label{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}.sp-trend-controls input{width:120px;min-height:33px;padding:5px 8px}.sp-trend-controls input[type="month"]{width:160px}.sp-trend-controls>small{font-size:11px;color:var(--muted)}.sp-surface--trend{height:var(--sp-height,475px);min-height:220px;overflow:hidden}.sp-trend{display:grid;grid-template-rows:auto minmax(120px,1fr) auto;height:100%;min-width:0}.sp-trend-caption{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 14px 6px;font-size:12px}.sp-trend-caption>span{display:flex;align-items:center;gap:6px}.sp-trend-caption small{font-size:11px;color:var(--muted)}.sp-trend-swatch{display:inline-block;width:13px;height:13px;border-radius:3px}.sp-trend-target{fill:#d5d1ca;background:#d5d1ca;stroke:#8c8277}.sp-trend-actual{fill:var(--accent);background:var(--accent);stroke:var(--accent-text)}.sp-trend-zero{stroke-width:4;vector-effect:non-scaling-stroke}.sp-trend-grid{stroke:#e9e0d5;stroke-width:1;vector-effect:non-scaling-stroke}.sp-trend-axis{fill:var(--muted);font:11px var(--font-sans,Arial,sans-serif)}.sp-trend-scroll{min-height:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain}.sp-trend-plot{position:relative;width:100%;min-width:var(--sp-plot-width);height:100%;min-height:120px}.sp-trend-plot>svg{display:block;width:100%;height:100%;pointer-events:none}.sp-trend-hits{position:absolute;inset:0 var(--sp-axis-right) 0 var(--sp-axis-left);display:flex}.sp-trend-hit{position:relative;flex:1;min-width:0;min-height:44px;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;touch-action:pan-x pan-y}.sp-trend-hit:hover,.sp-trend-hit:focus-visible{background:#ffb45b12}.sp-trend-hit:focus-visible{outline-offset:-3px!important}.sp-trend-date{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;line-height:22px;white-space:nowrap}.sp-trend-flag{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);font-size:9px;color:var(--muted);white-space:nowrap}.sp-trend-tip{display:none;position:absolute;z-index:5;top:12px;left:50%;transform:translateX(-50%);width:255px;padding:10px 12px;border:1px solid var(--divider);border-radius:10px;background:var(--readable,#fffdfa);box-shadow:0 6px 20px #38281920;color:var(--ink);font-size:11px;line-height:1.65;text-align:left;pointer-events:none;white-space:normal}.sp-trend-hit:hover .sp-trend-tip,.sp-trend-hit:focus .sp-trend-tip{display:block}.sp-trend-hit:nth-child(-n+4) .sp-trend-tip{left:0;transform:none}.sp-trend-hit:nth-last-child(-n+4) .sp-trend-tip{left:auto;right:0;transform:none}.sp-trend-coverage{margin:0;padding:9px 14px;border-top:1px solid var(--divider);color:var(--muted);font-size:11px;line-height:1.6;overflow-wrap:anywhere}.sp-surface--trend>.sp-empty{padding:35px 16px}
@media(min-width:1400px){.sp-trend-plot{min-width:min(var(--sp-plot-width),100%)}}
@media(max-width:700px){.sp-trend-controls{gap:8px}.sp-trend-controls label{font-size:11px;gap:4px}.sp-trend-controls input{width:100px}.sp-trend-title{font-size:16px}.sp-trend-caption{gap:8px 14px;padding:10px 10px 5px}.sp-trend-caption small{width:100%}.sp-surface--trend{min-height:300px}.sp-trend-coverage{padding:8px 10px}.sp-trend-hit .sp-trend-tip{width:220px}}

/* Purchase and shipment plans */
.sup-page{min-width:0}.sup-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:10px}.sup-heading h1{margin:0;font-size:28px;letter-spacing:-.5px}.sup-heading-actions{display:flex;gap:8px;flex-wrap:wrap}.sup-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:8px 12px;margin-bottom:8px;border:1px solid var(--divider);border-radius:14px;background:var(--glass-bg)}.sup-filters label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-width:0;flex:1 1 170px;font-size:11px;font-weight:700}.sup-filters label:first-child{flex:1.5 1 260px}.sup-filters .sup-query{flex:1.2 1 220px}.sup-filters select,.sup-filters input{width:100%;min-width:0;min-height:32px;height:32px;padding:4px 9px;font-size:11px}.sup-summary{display:flex;align-items:center;gap:8px;margin-bottom:8px;overflow:auto}.sup-summary span{flex:1;min-width:120px;padding:6px 11px;border:1px solid var(--divider);border-radius:12px;background:#fffdfa;color:var(--muted);font-size:11px;white-space:nowrap}.sup-summary b{margin-right:3px;color:var(--ink);font-size:17px}.sup-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;min-height:0}.sup-workspace.has-editor{grid-template-columns:minmax(0,1fr) 340px}.sup-main,.sup-editor{margin-bottom:0}.sup-main{min-width:0;padding:10px;background:var(--readable);border-color:#eadfd2}.sup-calendar-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.sup-month,.sup-view{display:flex;align-items:center}.sup-month{gap:10px}.sup-view{gap:2px}.sup-month strong{min-width:116px;text-align:center;font-size:19px}.sup-month .icon-button{width:38px;height:35px;min-height:35px;border:1px solid var(--divider);border-radius:12px;background:#fffdfa;font-size:22px}.sup-view .filter{min-height:34px;padding:5px 14px}.sup-surface{height:var(--sup-height,420px);min-height:0;max-height:var(--sup-height,420px);overflow:auto;border:1px solid #eadfd2;border-radius:12px;background:#fffdfa;overscroll-behavior:contain}.sup-calendar{display:grid;grid-template-rows:auto repeat(var(--sup-weeks,5),minmax(61px,1fr));height:100%;min-height:calc(27px + var(--sup-weeks,5)*61px)}.sup-weekdays{position:sticky;top:0;z-index:8;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:#f8f1e7}.sup-weekdays span{padding:5px;text-align:center;color:var(--muted);font-size:10px;border-right:1px solid #eadfd2;border-bottom:1px solid #eadfd2}.sup-weekdays span:last-child{border-right:0}.sup-week{position:relative;min-height:61px;border-bottom:1px solid #eadfd2}.sup-week:last-child{border-bottom:0}.sup-week-days{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.sup-day{min-width:0;padding:5px 7px;border-right:1px solid #eadfd2}.sup-day:last-child{border-right:0}.sup-day.is-outside{background:#f7f2eb;color:var(--subtle)}.sup-day.is-today{background:#fff5e9;box-shadow:inset 0 0 0 1px var(--accent)}.sup-day time{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:750}.sup-day.is-today time{background:var(--accent);color:#332011}.sup-week-bars{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-flow:row;gap:3px 0;height:100%;padding:25px 5px 5px;pointer-events:none}.sup-calendar[data-lanes="1"] .sup-week-bars{grid-template-rows:17px}.sup-calendar[data-lanes="2"] .sup-week-bars{grid-template-rows:repeat(2,17px)}.sup-calendar[data-lanes="3"] .sup-week-bars{grid-template-rows:repeat(3,17px)}.sup-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;height:17px;padding:0 7px;border:0;border-left:3px solid #d28a47;border-radius:5px;background:#f8dfc5;color:#50351f;font:inherit;font-size:9px;text-align:left;cursor:pointer;pointer-events:auto;overflow:hidden}.sup-more{position:absolute;right:7px;bottom:1px;z-index:4;min-height:17px;padding:0 5px;border:0;border-radius:5px;background:#fff7ec;color:var(--accent-text);font-size:9px;font-weight:750;cursor:pointer;pointer-events:auto}.sup-bar>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sup-bar small{flex:none;font-size:8px;white-space:nowrap}.sup-bar--in_progress{border-color:#d87317;background:#ffd8b1}.sup-bar--completed{border-color:#3c8d61;background:#dcefe3;color:#21563a}.sup-bar--cancelled{border-color:#aaa09a;background:#eee9e4;color:#746d68;text-decoration:line-through}.sup-bar.is-overdue{box-shadow:inset 0 0 0 1px #b94d31}.sup-bar.is-end::after{content:"";position:absolute;right:0;top:3px;bottom:3px;width:3px;border-radius:3px;background:currentColor;opacity:.65}.sup-list{display:grid}.sup-list-item{display:grid;grid-template-columns:145px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:11px 13px;border:0;border-bottom:1px solid var(--divider);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.sup-list-item:hover,.sup-more-item:hover{background:#fff0de}.sup-list-item time{font-size:10px;color:var(--muted)}.sup-list-product{display:grid;gap:3px;min-width:0}.sup-list-product strong{font-size:12px;overflow-wrap:anywhere}.sup-list-product small{color:var(--muted);font-size:10px;overflow-wrap:anywhere}.sup-status,.sup-overdue{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border-radius:999px;background:#f1ebe4;color:#625c56;font-size:9px;font-weight:750;white-space:nowrap}.sup-status--in_progress{background:#fff0df;color:#9b4a0b}.sup-status--completed{background:#e4f2e9;color:#28734a}.sup-status--cancelled{background:#ece9e6;color:#736d68}.sup-overdue{margin-left:4px;background:#f9e3dc;color:#9d3f29}.sup-empty{padding:55px 20px;text-align:center}.sup-empty h3{margin:0}.sup-empty p{color:var(--muted)}.sup-loading{padding:8px 12px;color:var(--muted);font-size:11px}.sup-editor{position:sticky;top:82px;min-width:0;height:var(--sup-editor-height,520px);max-height:var(--sup-editor-height,520px);overflow:hidden;background:var(--readable);border-color:#eadfd2}.sup-editor[hidden]{display:none!important}.sup-editor>form,.sup-editor>div{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;max-height:100%}.sup-editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--divider)}.sup-editor-head p{margin:0;color:var(--muted);font-size:10px}.sup-editor-head h2{margin:2px 0 0;font-size:17px;overflow-wrap:anywhere}.sup-editor-head .icon-button{font-size:22px}.sup-editor-scroll{min-height:0;padding:15px;overflow:auto;overscroll-behavior:contain;font-size:11px}.sup-editor .field{margin-bottom:12px}.sup-editor .field span{font-size:11px}.sup-editor input,.sup-editor select,.sup-editor textarea{min-height:36px}.sup-editor textarea{white-space:pre-wrap;line-height:1.55}.sup-editor .field-grid{gap:9px}.sup-editor-actions{display:flex;justify-content:flex-end;gap:8px;padding:11px 15px;border-top:1px solid var(--divider);background:#fcf7f0}.sup-editor-actions .button{flex:1}.sup-editor-actions--wrap{flex-wrap:wrap}.sup-duration{margin:-3px 0 12px;padding:7px 9px;border-radius:9px;background:#fff0df;color:var(--accent-text);font-weight:700}.sup-detail{margin:15px 0;padding:12px;border:1px solid var(--divider);border-radius:12px;background:#fffdfa}.sup-detail h3{margin:0 0 9px;font-size:12px}.sup-detail dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;margin:0}.sup-detail dt{color:var(--muted)}.sup-detail dd{margin:0;overflow-wrap:anywhere}.sup-product-spec,.sup-note{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.sup-history{margin-top:16px;border-top:1px solid var(--divider);padding-top:12px}.sup-history summary{cursor:pointer;font-weight:750}.sup-history ol{display:grid;gap:9px;padding-left:20px}.sup-history li span{display:block;color:var(--muted);font-size:9px}.sup-history li p{margin:3px 0;white-space:pre-wrap}.sup-more-item{display:grid;gap:4px;width:100%;padding:11px 5px;border:0;border-bottom:1px solid var(--divider);background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}.sup-more-item small{color:var(--muted)}.sup-page button:focus-visible,.sup-page input:focus-visible,.sup-page select:focus-visible,.sup-page textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.sup-day-head{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:4px}.sup-day-more{min-width:23px;min-height:20px;padding:1px 5px;border:1px solid #e0cbb6;border-radius:999px;background:#fff8ef;color:var(--accent-text);font:inherit;font-size:10px;font-weight:800;line-height:16px;cursor:pointer;pointer-events:auto}.sup-calendar--purchase .sup-week-bars{gap:3px 0}.sup-calendar--purchase[data-lanes="1"] .sup-week-bars{grid-template-rows:31px}.sup-calendar--purchase[data-lanes="2"] .sup-week-bars{grid-template-rows:repeat(2,31px)}.sup-milestone{display:grid;grid-template-rows:13px 12px;gap:1px;align-content:center;min-width:0;height:31px;padding:2px 5px;border:0;border-left:3px solid #d87317;border-radius:6px;background:#ffead4;color:#59371f;font:inherit;font-size:12px;line-height:1;text-align:left;cursor:pointer;pointer-events:auto;overflow:hidden}.sup-milestone--ready{border-left-color:#2f8f88;background:#dcf0ed;color:#174d49}.sup-milestone--combined{border-left-color:#9b6739;background:linear-gradient(100deg,#ffead4 0 49%,#dcf0ed 51% 100%);color:#3e3a34}.sup-milestone-line,.sup-milestone-meta{display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap}.sup-milestone-kind{display:flex;align-items:center;gap:3px;flex:none;max-width:68px;font-size:10px;font-weight:800}.sup-milestone--combined .sup-milestone-kind{max-width:94px}.sup-milestone-kind i,.sup-more-node-kind i{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#d87317}.sup-milestone--ready .sup-milestone-kind i,.sup-more-node--ready .sup-more-node-kind i{background:#2f8f88}.sup-milestone--combined .sup-milestone-kind i,.sup-more-node--combined .sup-more-node-kind i{background:linear-gradient(90deg,#d87317 0 50%,#2f8f88 50%)}.sup-milestone-line strong{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:800}.sup-milestone-state{display:grid;place-items:center;flex:none;width:14px;height:14px;border-radius:50%;background:#fff9f1;color:#7c461e;font-size:10px;font-weight:900}.sup-milestone-meta{justify-content:space-between;color:#725136;font-size:11px}.sup-milestone--ready .sup-milestone-meta{color:#2a625d}.sup-milestone-meta b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:750}.sup-milestone-meta span{flex:none}.sup-milestone.is-linked{z-index:3;outline:2px solid #3f332a;outline-offset:1px;box-shadow:0 2px 8px #3c2b1e32}.sup-more-node-kind{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px;font-weight:800}.sup-more-node.is-linked{background:#fff0de;box-shadow:inset 3px 0 var(--accent)}.sup-milestone{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:13px 12px;grid-template-areas:"kind product state" "quantity quantity pair";gap:1px 4px}.sup-milestone-kind{grid-area:kind}.sup-milestone-product{grid-area:product;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800}.sup-milestone-state{grid-area:state}.sup-milestone-state:empty{width:0;background:transparent}.sup-milestone-quantity{grid-area:quantity;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#725136;font-size:11px;font-weight:750}.sup-milestone--ready .sup-milestone-quantity{color:#2a625d}.sup-milestone-pair{grid-area:pair;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#725136;font-size:11px}.sup-milestone--ready .sup-milestone-pair{color:#2a625d}.sup-milestone-pair-full{display:none}.sup-calendar--purchase[data-density="comfortable"][data-lanes="1"] .sup-week-bars{grid-template-rows:50px}.sup-calendar--purchase[data-density="comfortable"][data-lanes="2"] .sup-week-bars{grid-template-rows:repeat(2,50px)}.sup-calendar--purchase[data-density="comfortable"] .sup-milestone{height:50px;padding:3px 6px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:12px 17px 13px;grid-template-areas:"kind kind" "product quantity" "pair state";gap:1px 5px}.sup-calendar--purchase[data-density="comfortable"] .sup-milestone-kind{max-width:none;font-size:11px}.sup-calendar--purchase[data-density="comfortable"] .sup-milestone-product{font-size:13px}.sup-calendar--purchase[data-density="comfortable"] .sup-milestone-quantity{font-size:13px}.sup-calendar--purchase[data-density="comfortable"] .sup-milestone-pair{font-size:11px}.sup-calendar--purchase[data-density="comfortable"] .sup-milestone-pair-short{display:none}.sup-calendar--purchase[data-density="comfortable"] .sup-milestone-pair-full{display:inline}.sup-tone-0{--sup-product-tone:#2f8f88;--sup-product-tint:#dcf0ed;--sup-product-ink:#174d49}.sup-tone-1{--sup-product-tone:#6673b8;--sup-product-tint:#e8eaf8;--sup-product-ink:#39447e}.sup-tone-2{--sup-product-tone:#ae6b63;--sup-product-tint:#f5e5df;--sup-product-ink:#6f3c37}.sup-tone-3{--sup-product-tone:#718447;--sup-product-tint:#e9efdc;--sup-product-ink:#445329}.sup-tone-4{--sup-product-tone:#4f83a6;--sup-product-tint:#e2eef5;--sup-product-ink:#2c556e}.sup-tone-5{--sup-product-tone:#b37b35;--sup-product-tint:#f6ead8;--sup-product-ink:#70491d}.sup-tone-6{--sup-product-tone:#876aa4;--sup-product-tint:#eee7f4;--sup-product-ink:#553d70}.sup-tone-7{--sup-product-tone:#667d7c;--sup-product-tint:#e3ecea;--sup-product-ink:#3b5150}
/* Shipment month view packs non-overlapping date ranges into compact shared lanes. */
.sup-calendar--shipment[data-lanes="1"] .sup-week-bars{grid-template-rows:24px}.sup-calendar--shipment[data-lanes="2"] .sup-week-bars{grid-template-rows:repeat(2,24px)}.sup-calendar--shipment[data-lanes="3"] .sup-week-bars{grid-template-rows:repeat(3,24px)}.sup-calendar--shipment .sup-weekdays span{padding:3px 5px}.sup-calendar--shipment .sup-week-bars{gap:0;padding:20px 4px 0}.sup-calendar--shipment .sup-day{padding:1px 5px}.sup-calendar--shipment .sup-day time{width:20px;height:18px;font-size:10px;line-height:18px}.sup-calendar--shipment .sup-week-more{top:0;right:5px;bottom:auto;max-width:82px;height:20px;min-height:20px;padding:0 7px;border:1px solid #e0cbb6;border-radius:999px;background:#fff8ef;font-size:10px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-production-card{position:relative;z-index:2;display:block;min-width:0;height:24px;margin:0 1px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--sup-product-ink);font:inherit;text-align:left;cursor:pointer;pointer-events:auto;overflow:visible}.sup-production-track{position:absolute;z-index:0;left:3px;right:3px;bottom:1px;height:7px;border-radius:999px;background:color-mix(in srgb,var(--sup-product-tone) 35%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sup-product-tone) 48%,transparent)}.sup-production-card.is-continued-left .sup-production-track::before{content:"‹";position:absolute;left:-1px;bottom:-4px;color:var(--sup-product-tone);font-size:15px;font-weight:800;line-height:1}.sup-production-chip{position:relative;z-index:3;display:flex;align-items:center;gap:4px;width:max-content;max-width:calc(100% - 7px);height:21px;margin-left:3px;padding:2px 5px;border:1px solid color-mix(in srgb,var(--sup-product-tone) 38%,#fff);border-left:3px solid var(--sup-product-tone);border-radius:6px;background:var(--sup-product-tint);box-shadow:0 2px 5px #42362718;white-space:nowrap;overflow:hidden}.sup-production-card.is-end .sup-production-chip{max-width:calc(100% - 13px)}.sup-production-chip strong{flex:1 1 70px;min-width:34px;overflow:hidden;text-overflow:ellipsis;font-size:12px}.sup-production-chip b{flex:none;font-size:11px}.sup-production-chip em{flex:none;color:var(--sup-product-ink);font-size:10px;font-style:normal;font-weight:800}.sup-production-chip .sup-production-status{min-height:14px;padding:0 4px;font-size:9px}.sup-production-card.is-single-day .sup-production-chip em,.sup-production-card.is-single-day .sup-production-chip .sup-production-status{display:none}.sup-production-endpoint{position:absolute;z-index:5;right:2px;bottom:1px;width:7px;height:7px;border:2px solid var(--sup-product-tone);background:#fffdfa;transform:rotate(45deg);pointer-events:none}.sup-production-continuation{position:absolute;z-index:5;right:1px;bottom:-4px;color:var(--sup-product-tone);font-size:15px;font-style:normal;font-weight:800;line-height:1;pointer-events:none}.sup-production-status{display:inline-flex;align-items:center;flex:none;min-height:16px;padding:1px 5px;border-radius:999px;background:#f1ebe4;color:#625c56;font-size:9px;font-style:normal;font-weight:800;line-height:1.2;white-space:nowrap}.sup-production-status--in_progress{background:#fff0df;color:#9b4a0b}.sup-production-status--completed{background:#e4f2e9;color:#28734a}.sup-production-status--cancelled{background:#ece9e6;color:#736d68}.sup-production-status--overdue{background:#f9e3dc;color:#9d3f29}.sup-production-card.is-linked,.sup-schedule-period.is-linked{z-index:5;outline:2px solid var(--sup-product-tone);outline-offset:1px;box-shadow:0 2px 10px #30231c35}.sup-production-card:hover .sup-production-chip,.sup-production-card:focus-visible .sup-production-chip{box-shadow:0 0 0 2px color-mix(in srgb,var(--sup-product-tone) 52%,transparent),0 3px 8px #30231c24}.sup-more-production{border-left:4px solid var(--sup-product-tone);padding-left:9px}.sup-more-production>span{justify-self:start}
.sup-list-item[class*="sup-tone-"]{border-left:4px solid var(--sup-product-tone);background:linear-gradient(90deg,var(--sup-product-tint),#fffdfa 20%)}.sup-production-schedule{height:100%;max-width:100%;overflow:auto;overscroll-behavior:contain}.sup-schedule-grid{--sup-schedule-left:210px;--sup-schedule-days:31;min-width:1120px;color:var(--ink)}.sup-schedule-grid[data-days="28"]{--sup-schedule-days:28}.sup-schedule-grid[data-days="29"]{--sup-schedule-days:29}.sup-schedule-grid[data-days="30"]{--sup-schedule-days:30}.sup-schedule-grid[data-days="31"]{--sup-schedule-days:31}.sup-schedule-axis,.sup-schedule-row{display:grid;grid-template-columns:var(--sup-schedule-left) minmax(0,1fr)}.sup-schedule-axis{position:sticky;top:0;z-index:10;min-height:34px;background:#f8f1e7;border-bottom:1px solid #eadfd2}.sup-schedule-axis>strong{position:sticky;left:0;z-index:12;display:flex;align-items:center;padding:6px 10px;background:#f8f1e7;border-right:1px solid #eadfd2;font-size:11px}.sup-schedule-axis>div,.sup-schedule-track{display:grid;grid-template-columns:repeat(var(--sup-schedule-days),minmax(26px,1fr))}.sup-schedule-axis span{display:grid;place-items:center;border-right:1px solid #eadfd2;color:var(--muted);font-size:10px}.sup-schedule-axis span.is-today{background:#ffdfbf;color:#6f350c;font-weight:850}.sup-schedule-row{min-height:62px;border-bottom:1px solid #eadfd2}.sup-schedule-label{position:sticky;left:0;z-index:6;display:grid;align-content:center;gap:2px;min-width:0;padding:7px 10px;border:0;border-left:4px solid var(--sup-product-tone);border-right:1px solid #eadfd2;background:#fffdfa;color:inherit;font:inherit;text-align:left;cursor:pointer}.sup-schedule-label strong,.sup-schedule-label span,.sup-schedule-label small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sup-schedule-label strong{font-size:12px}.sup-schedule-label span{color:var(--sup-product-ink);font-size:11px}.sup-schedule-label small{color:var(--muted);font-size:10px}.sup-schedule-track{position:relative;align-content:center;background-color:#fffdfa;background-image:linear-gradient(to right,#eadfd280 1px,transparent 1px);background-size:calc(100% / var(--sup-schedule-days)) 100%}.sup-schedule-period{position:relative;z-index:2;grid-row:1;height:30px;margin:0 1px;padding:3px 7px;border:0;border-left:3px solid var(--sup-product-tone);border-radius:6px;background:var(--sup-product-tint);color:var(--sup-product-ink);display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;font:inherit;font-size:10px;cursor:pointer;overflow:hidden}.sup-schedule-period>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sup-schedule-period.is-continued-left::before{content:"‹";flex:none;font-size:16px}.sup-schedule-period.is-continued-right::after{content:"›";flex:none;font-size:16px}.sup-schedule-today{position:relative;grid-row:1;align-self:stretch;justify-self:center;z-index:1;width:2px;background:#ef944d;pointer-events:none}.sup-schedule-row.is-linked .sup-schedule-label{box-shadow:inset 0 0 0 2px var(--sup-product-tone)}
@media(max-width:1600px){.sup-page--shipment .sup-workspace.has-editor{grid-template-columns:minmax(0,1fr)}.sup-page--shipment .sup-editor{position:fixed;inset:12px 12px 12px auto;width:min(420px,calc(100vw - 24px));height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);z-index:95;box-shadow:0 10px 100px #30231c50}.sup-page--shipment .sup-editor>form,.sup-page--shipment .sup-editor>div{height:100%;max-height:100%}}
.sup-schedule-start-1{grid-column-start:1}.sup-schedule-span-1{grid-column-end:span 1}.sup-schedule-today-1{grid-column:1}
.sup-schedule-start-2{grid-column-start:2}.sup-schedule-span-2{grid-column-end:span 2}.sup-schedule-today-2{grid-column:2}
.sup-schedule-start-3{grid-column-start:3}.sup-schedule-span-3{grid-column-end:span 3}.sup-schedule-today-3{grid-column:3}
.sup-schedule-start-4{grid-column-start:4}.sup-schedule-span-4{grid-column-end:span 4}.sup-schedule-today-4{grid-column:4}
.sup-schedule-start-5{grid-column-start:5}.sup-schedule-span-5{grid-column-end:span 5}.sup-schedule-today-5{grid-column:5}
.sup-schedule-start-6{grid-column-start:6}.sup-schedule-span-6{grid-column-end:span 6}.sup-schedule-today-6{grid-column:6}
.sup-schedule-start-7{grid-column-start:7}.sup-schedule-span-7{grid-column-end:span 7}.sup-schedule-today-7{grid-column:7}
.sup-schedule-start-8{grid-column-start:8}.sup-schedule-span-8{grid-column-end:span 8}.sup-schedule-today-8{grid-column:8}
.sup-schedule-start-9{grid-column-start:9}.sup-schedule-span-9{grid-column-end:span 9}.sup-schedule-today-9{grid-column:9}
.sup-schedule-start-10{grid-column-start:10}.sup-schedule-span-10{grid-column-end:span 10}.sup-schedule-today-10{grid-column:10}
.sup-schedule-start-11{grid-column-start:11}.sup-schedule-span-11{grid-column-end:span 11}.sup-schedule-today-11{grid-column:11}
.sup-schedule-start-12{grid-column-start:12}.sup-schedule-span-12{grid-column-end:span 12}.sup-schedule-today-12{grid-column:12}
.sup-schedule-start-13{grid-column-start:13}.sup-schedule-span-13{grid-column-end:span 13}.sup-schedule-today-13{grid-column:13}
.sup-schedule-start-14{grid-column-start:14}.sup-schedule-span-14{grid-column-end:span 14}.sup-schedule-today-14{grid-column:14}
.sup-schedule-start-15{grid-column-start:15}.sup-schedule-span-15{grid-column-end:span 15}.sup-schedule-today-15{grid-column:15}
.sup-schedule-start-16{grid-column-start:16}.sup-schedule-span-16{grid-column-end:span 16}.sup-schedule-today-16{grid-column:16}
.sup-schedule-start-17{grid-column-start:17}.sup-schedule-span-17{grid-column-end:span 17}.sup-schedule-today-17{grid-column:17}
.sup-schedule-start-18{grid-column-start:18}.sup-schedule-span-18{grid-column-end:span 18}.sup-schedule-today-18{grid-column:18}
.sup-schedule-start-19{grid-column-start:19}.sup-schedule-span-19{grid-column-end:span 19}.sup-schedule-today-19{grid-column:19}
.sup-schedule-start-20{grid-column-start:20}.sup-schedule-span-20{grid-column-end:span 20}.sup-schedule-today-20{grid-column:20}
.sup-schedule-start-21{grid-column-start:21}.sup-schedule-span-21{grid-column-end:span 21}.sup-schedule-today-21{grid-column:21}
.sup-schedule-start-22{grid-column-start:22}.sup-schedule-span-22{grid-column-end:span 22}.sup-schedule-today-22{grid-column:22}
.sup-schedule-start-23{grid-column-start:23}.sup-schedule-span-23{grid-column-end:span 23}.sup-schedule-today-23{grid-column:23}
.sup-schedule-start-24{grid-column-start:24}.sup-schedule-span-24{grid-column-end:span 24}.sup-schedule-today-24{grid-column:24}
.sup-schedule-start-25{grid-column-start:25}.sup-schedule-span-25{grid-column-end:span 25}.sup-schedule-today-25{grid-column:25}
.sup-schedule-start-26{grid-column-start:26}.sup-schedule-span-26{grid-column-end:span 26}.sup-schedule-today-26{grid-column:26}
.sup-schedule-start-27{grid-column-start:27}.sup-schedule-span-27{grid-column-end:span 27}.sup-schedule-today-27{grid-column:27}
.sup-schedule-start-28{grid-column-start:28}.sup-schedule-span-28{grid-column-end:span 28}.sup-schedule-today-28{grid-column:28}
.sup-schedule-start-29{grid-column-start:29}.sup-schedule-span-29{grid-column-end:span 29}.sup-schedule-today-29{grid-column:29}
.sup-schedule-start-30{grid-column-start:30}.sup-schedule-span-30{grid-column-end:span 30}.sup-schedule-today-30{grid-column:30}
.sup-schedule-start-31{grid-column-start:31}.sup-schedule-span-31{grid-column-end:span 31}.sup-schedule-today-31{grid-column:31}@media(max-width:1600px){.sup-page--purchase .sup-workspace.has-editor{grid-template-columns:minmax(0,1fr)}.sup-page--purchase .sup-editor{position:fixed;inset:12px 12px 12px auto;width:min(420px,calc(100vw - 24px));height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);z-index:95;box-shadow:0 10px 100px #30231c50}.sup-page--purchase .sup-editor>form,.sup-page--purchase .sup-editor>div{height:100%;max-height:100%}}@media(max-width:1250px){.sup-workspace.has-editor{grid-template-columns:minmax(0,1fr)}.sup-editor{position:fixed;inset:12px 12px 12px auto;width:min(540px,calc(100vw - 24px));height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);z-index:95;box-shadow:0 10px 100px #30231c50}.sup-editor>form,.sup-editor>div{height:100%;max-height:100%}.sup-filters label{flex-basis:calc(50% - 5px)}}
@media(max-width:700px){.sup-heading{align-items:center;flex-wrap:wrap}.sup-heading h1{font-size:24px}.sup-heading-actions{width:100%}.sup-heading-actions .button{flex:1}.sup-filters{padding:9px}.sup-filters label,.sup-filters label:first-child,.sup-filters .sup-query{grid-template-columns:55px minmax(0,1fr);flex-basis:100%}.sup-summary span{min-width:105px}.sup-summary b{font-size:16px}.sup-calendar-tools{flex-wrap:wrap}.sup-month{width:100%;justify-content:space-between}.sup-view{width:100%}.sup-view .filter{flex:1}.sup-surface{height:auto;min-height:220px;max-height:none}.sup-calendar{min-width:720px;height:auto;min-height:calc(27px + var(--sup-weeks,5)*54px)}.sup-list-item{grid-template-columns:1fr auto;gap:5px;padding:10px}.sup-list-item time{grid-column:1/-1}.sup-editor{inset:0;width:100%;height:100dvh;max-height:100dvh;border-radius:0}.sup-editor>form,.sup-editor>div{height:100%;max-height:100%}.sup-editor .field-grid{grid-template-columns:1fr}.sup-editor-head,.sup-editor-scroll,.sup-editor-actions{padding-left:14px;padding-right:14px}}
@media(min-width:701px) and (max-height:820px){.sup-heading{margin-bottom:7px}.sup-heading h1{font-size:23px}.sup-filters{padding:6px 10px;margin-bottom:6px}.sup-summary{margin-bottom:6px}.sup-summary span{padding:4px 9px}.sup-summary b{font-size:15px}.sup-main{padding:7px}.sup-calendar-tools{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){.sup-page *{scroll-behavior:auto;transition:none}}
.sp-trend-yaxis{position:absolute;inset:0 auto 0 0;width:var(--sp-axis-left);pointer-events:none;font-size:10px;color:var(--muted)}.sp-trend-unit{position:absolute;top:3px;left:7px;white-space:nowrap;font-size:10px}.sp-trend-tick{position:absolute;right:8px;transform:translateY(-50%);line-height:16px;white-space:nowrap}.sp-trend-tick--4{top:9.0323%}.sp-trend-tick--3{top:29.0323%}.sp-trend-tick--2{top:49.0323%}.sp-trend-tick--1{top:69.0323%}.sp-trend-tick--0{top:89.0323%}.sp-trend-hits:has(.sp-trend-hit:hover) .sp-trend-hit:focus:not(:hover) .sp-trend-tip{display:none}

/* Product reference editor shared by work calendar and sales products. */
.product-reference-field textarea {
  min-height: 104px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55
}

.product-reference-preview,
.product-reference-detail {
  margin: -5px 0 15px;
  padding: 11px 12px;
  border: 1px solid var(--divider);
  border-radius: 11px;
  background: var(--paper, #fffdfa);
  min-width: 0
}

.product-reference-detail {
  margin: 0 0 15px
}

.product-reference-detail>h3 {
  margin: 0 0 9px;
  font-size: 12px
}

.product-reference-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 10px
}

.product-reference-summary strong {
  color: var(--ink);
  font-size: 11px
}

.product-reference-list {
  margin: 8px 0 0;
  padding-left: 22px
}

.product-reference-list li {
  padding: 6px 0;
  min-width: 0;
  font-size: 11px;
  line-height: 1.55
}

.product-reference-list li+li {
  border-top: 1px solid var(--divider)
}

.product-reference-kind,
.product-reference-value {
  display: block;
  overflow-wrap: anywhere
}

.product-reference-kind {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px
}

.product-reference-list a {
  color: var(--accent-text);
  overflow-wrap: anywhere;
  word-break: break-word
}

.product-reference-error {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #d68a73;
  border-radius: 9px;
  background: #fff2ee;
  color: #8a3526;
  font-size: 11px;
  line-height: 1.5
}

.product-reference-empty,
.product-reference-note {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55
}

.product-reference-note {
  margin-top: 7px
}

.product-reference-more {
  margin-top: 5px
}

.product-reference-more>summary,
.product-reference-detail>summary {
  cursor: pointer;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 650
}

.product-reference-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0 0 15px;
  padding: 10px 12px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--paper, #fffdfa);
  font-size: 11px
}

.product-reference-identity span {
  color: var(--muted)
}

.product-reference-identity strong {
  overflow-wrap: anywhere
}

@media(max-width:700px) {
  .product-reference-preview,
  .product-reference-detail {
    padding: 10px
  }

  .product-reference-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px
  }
}

/* CSP-safe calendar positioning: all grid placement is predeclared. */
.sup-calendar[data-weeks="4"]{--sup-weeks:4}.sup-calendar[data-weeks="5"]{--sup-weeks:5}.sup-calendar[data-weeks="6"]{--sup-weeks:6}
.sup-lane-1{grid-row:1}.sup-lane-2{grid-row:2}.sup-lane-3{grid-row:3}
.sup-span-1-1{grid-column:1/2}.sup-span-1-2{grid-column:1/3}.sup-span-1-3{grid-column:1/4}.sup-span-1-4{grid-column:1/5}.sup-span-1-5{grid-column:1/6}.sup-span-1-6{grid-column:1/7}.sup-span-1-7{grid-column:1/8}
.sup-span-2-2{grid-column:2/3}.sup-span-2-3{grid-column:2/4}.sup-span-2-4{grid-column:2/5}.sup-span-2-5{grid-column:2/6}.sup-span-2-6{grid-column:2/7}.sup-span-2-7{grid-column:2/8}
.sup-span-3-3{grid-column:3/4}.sup-span-3-4{grid-column:3/5}.sup-span-3-5{grid-column:3/6}.sup-span-3-6{grid-column:3/7}.sup-span-3-7{grid-column:3/8}
.sup-span-4-4{grid-column:4/5}.sup-span-4-5{grid-column:4/6}.sup-span-4-6{grid-column:4/7}.sup-span-4-7{grid-column:4/8}
.sup-span-5-5{grid-column:5/6}.sup-span-5-6{grid-column:5/7}.sup-span-5-7{grid-column:5/8}.sup-span-6-6{grid-column:6/7}.sup-span-6-7{grid-column:6/8}.sup-span-7-7{grid-column:7/8}

@media(max-width:700px){.sup-page--shipment .sup-production-schedule{height:clamp(300px,calc(100dvh - 260px),540px);min-height:300px;overflow:auto}.sup-page--shipment .sup-schedule-grid{--sup-schedule-left:180px}}

/* Supply plans share one product color across purchase and shipment views. */
.sup-tone-8{--sup-product-tone:#c05a78;--sup-product-tint:#f5e5e9;--sup-product-ink:#4d282f}.sup-tone-9{--sup-product-tone:#3f8c5a;--sup-product-tint:#e0ede5;--sup-product-ink:#243826}.sup-tone-10{--sup-product-tone:#d06f32;--sup-product-tint:#f7e8de;--sup-product-ink:#522f19}.sup-tone-11{--sup-product-tone:#426f97;--sup-product-tint:#e1e8ee;--sup-product-ink:#252f39}.sup-tone-12{--sup-product-tone:#9b6b3e;--sup-product-tint:#efe7e0;--sup-product-ink:#412e1d}.sup-tone-13{--sup-product-tone:#527a3d;--sup-product-tint:#e3eae0;--sup-product-ink:#2a331c}.sup-tone-14{--sup-product-tone:#a35b9b;--sup-product-tint:#f0e5ef;--sup-product-ink:#44293a}.sup-tone-15{--sup-product-tone:#397d73;--sup-product-tint:#dfeae9;--sup-product-ink:#22342e}
.sup-calendar--purchase .sup-milestone.sup-product-color{border-left-color:var(--sup-product-tone);background:var(--sup-product-tint);color:var(--sup-product-ink)}
.sup-calendar--purchase .sup-milestone.sup-product-color .sup-milestone-quantity,.sup-calendar--purchase .sup-milestone.sup-product-color .sup-milestone-pair{color:var(--sup-product-ink)}
.sup-calendar--purchase .sup-milestone.sup-product-color.is-linked{outline-color:var(--sup-product-tone)}
.sup-more-node.sup-product-color{border-left:4px solid var(--sup-product-tone);background:linear-gradient(90deg,var(--sup-product-tint),#fffdfa 28%);padding-left:9px}
.sup-list-item.sup-product-color{border-left:4px solid var(--sup-product-tone);background:linear-gradient(90deg,var(--sup-product-tint),#fffdfa 20%)}
.sup-detail-color{display:inline-flex;align-items:center;gap:7px;color:var(--sup-product-ink);font-weight:750}.sup-detail-color i{display:block;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:var(--sup-product-tone);box-shadow:0 0 0 1px var(--sup-product-tone)}
.sup-color-editor{display:grid;gap:10px;margin:12px 0 15px;padding:12px;border:1px solid #e4d8ca;border-radius:13px;background:#fffcf7}.sup-color-editor.is-empty{padding:10px 12px}.sup-color-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.sup-color-editor-head h3{margin:0 0 3px;font-size:13px}.sup-color-editor-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.45}.sup-color-value{display:inline-flex;align-items:center;min-height:27px;padding:4px 8px;border:1px solid var(--sup-product-tone);border-radius:999px;background:var(--sup-product-tint);color:var(--sup-product-ink);font-size:10px;font-weight:800;white-space:nowrap}
.sup-color-palette{display:grid;grid-template-columns:repeat(8,minmax(28px,1fr));gap:5px}.sup-color-swatch{position:relative;display:grid;place-items:center;min-width:0;height:32px;padding:3px;border:1px solid transparent;border-radius:9px;background:#f6f0e9;cursor:pointer}.sup-color-swatch span{display:block;width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:var(--sup-swatch);box-shadow:0 0 0 1px #3a312933}.sup-color-swatch:hover:not(:disabled){background:#fff1df}.sup-color-swatch.is-selected{border-color:var(--accent-text);background:#fff3e5}.sup-color-swatch.is-selected::after{content:"✓";position:absolute;right:1px;bottom:0;display:grid;place-items:center;width:13px;height:13px;border-radius:50%;background:#2e2823;color:#fff;font-size:9px;font-weight:900}.sup-color-swatch.is-used{cursor:not-allowed;opacity:.46}.sup-color-swatch.is-used span{background-image:linear-gradient(135deg,transparent 43%,#fff 44% 55%,transparent 56%)}
.sup-color-swatch[data-color="#2F8F88"]{--sup-swatch:#2f8f88}.sup-color-swatch[data-color="#6673B8"]{--sup-swatch:#6673b8}.sup-color-swatch[data-color="#AE6B63"]{--sup-swatch:#ae6b63}.sup-color-swatch[data-color="#718447"]{--sup-swatch:#718447}.sup-color-swatch[data-color="#4F83A6"]{--sup-swatch:#4f83a6}.sup-color-swatch[data-color="#B37B35"]{--sup-swatch:#b37b35}.sup-color-swatch[data-color="#876AA4"]{--sup-swatch:#876aa4}.sup-color-swatch[data-color="#667D7C"]{--sup-swatch:#667d7c}.sup-color-swatch[data-color="#C05A78"]{--sup-swatch:#c05a78}.sup-color-swatch[data-color="#3F8C5A"]{--sup-swatch:#3f8c5a}.sup-color-swatch[data-color="#D06F32"]{--sup-swatch:#d06f32}.sup-color-swatch[data-color="#426F97"]{--sup-swatch:#426f97}.sup-color-swatch[data-color="#9B6B3E"]{--sup-swatch:#9b6b3e}.sup-color-swatch[data-color="#527A3D"]{--sup-swatch:#527a3d}.sup-color-swatch[data-color="#A35B9B"]{--sup-swatch:#a35b9b}.sup-color-swatch[data-color="#397D73"]{--sup-swatch:#397d73}
.sup-color-custom{margin:0!important}.sup-color-custom input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}.sup-color-message{min-height:16px;margin:0;font-size:10px;line-height:1.45}.sup-color-message.is-muted{color:var(--muted)}.sup-color-message.is-ok{color:#28734a}.sup-color-message.is-warning{color:#95500f}.sup-color-message.is-error{color:var(--danger,#a43f3c)}
.sup-color-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:7px;border:1px solid color-mix(in srgb,var(--sup-product-tone) 38%,#e4d8ca);border-radius:10px;background:#fff}.sup-color-preview>div{display:grid;gap:2px;min-width:0;padding:6px 7px;border-left:3px solid var(--sup-product-tone);border-radius:6px;background:var(--sup-product-tint);color:var(--sup-product-ink)}.sup-color-preview strong,.sup-color-preview span,.sup-color-preview small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sup-color-preview strong{font-size:11px}.sup-color-preview small,.sup-color-preview span{font-size:9px}.sup-color-preview .sup-color-node--purchase{color:#9b4a0b}.sup-color-preview .sup-color-node--ready{color:#19716a}.sup-color-preview .sup-color-preview-production{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;align-items:center}
@media(max-width:420px){.sup-color-editor{padding:10px}.sup-color-palette{grid-template-columns:repeat(8,minmax(26px,1fr));gap:3px}.sup-color-swatch{height:30px}.sup-color-swatch span{width:18px;height:18px}.sup-color-preview{grid-template-columns:1fr}.sup-color-preview .sup-color-preview-production{grid-column:auto;grid-template-columns:1fr}.sup-color-editor-head{align-items:center}.sup-color-editor-head p{max-width:210px}}

/* Per-plan viewer permissions stay inside the editor so calendar density is unchanged. */
.sup-viewer-editor{display:grid;gap:10px;margin:12px 0 15px;padding:12px;border:1px solid #e4d8ca;border-radius:13px;background:#fffcf7}.sup-viewer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.sup-viewer-head h3{margin:0 0 3px;font-size:13px}.sup-viewer-head p,.sup-viewer-plan-note{margin:0;color:var(--muted);font-size:10px;line-height:1.55}.sup-viewer-head>span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:26px;padding:3px 8px;border:1px solid #e8c9a7;border-radius:999px;background:#fff2e3;color:var(--accent-text);font-size:10px;font-weight:800;white-space:nowrap}.sup-viewer-chips{display:flex;flex-wrap:wrap;gap:6px}.sup-viewer-chip,.sup-viewer-detail-name{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 5px 3px 8px;border:1px solid #e3c6a7;border-radius:999px;background:#fff1df;color:#754214;font-size:10px;font-weight:700}.sup-viewer-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sup-viewer-chip button{display:grid;place-items:center;flex:none;width:20px;height:20px;min-height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;font-size:15px;line-height:1;cursor:pointer}.sup-viewer-chip button:hover{background:#efcfab}.sup-viewer-chip.is-ineligible,.sup-viewer-detail-name.is-ineligible{border-style:dashed;border-color:#c8bdb3;background:#f3efeb;color:#746c65}.sup-viewer-empty{margin:0;padding:7px 9px;border-radius:9px;background:#f7f2ec;color:var(--muted);font-size:10px}.sup-viewer-search{margin:0!important}.sup-viewer-options{display:grid;gap:3px;max-height:190px;padding:4px;border:1px solid var(--divider);border-radius:10px;background:#fff;overflow:auto;overscroll-behavior:contain}.sup-viewer-options>label{display:flex;align-items:center;gap:9px;min-height:38px;padding:6px 8px;border-radius:8px;cursor:pointer}.sup-viewer-options>label:hover,.sup-viewer-options>label:has(input:focus-visible){background:#fff1df}.sup-viewer-options input{flex:none;width:17px;height:17px;min-height:17px;margin:0;accent-color:var(--accent-text)}.sup-viewer-options label>span{display:grid;gap:1px;min-width:0}.sup-viewer-options strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.sup-viewer-options small{color:#806f62;font-size:9px;line-height:1.4}.sup-viewer-options>p{margin:0;padding:10px;color:var(--muted);font-size:10px;text-align:center}.sup-viewer-options [hidden],.sup-viewer-no-results[hidden]{display:none!important}.sup-viewer-plan-note{padding:9px 10px;border-radius:9px;background:#f8f2ea}.sup-detail [data-sup-viewer-detail]{display:flex;flex-wrap:wrap;gap:4px}.sup-viewer-detail-name{padding:2px 7px}.sup-detail [data-sup-viewer-detail]:not(:has(span)){color:var(--muted)}

@media(max-width:420px){.sup-viewer-editor{padding:10px}.sup-viewer-head{align-items:center}.sup-viewer-options{max-height:34dvh}.sup-viewer-chip{max-width:calc(100vw - 48px);overflow-wrap:anywhere}.sup-viewer-detail-name{white-space:normal}}

/* Logistics progress keeps the cross-month list primary and uses the calendar for milestone points only. */
.logistics-page{min-width:0}.logistics-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}.logistics-heading h1{margin:0;font-size:28px}.logistics-heading p{margin:3px 0 0;color:var(--muted);font-size:12px}.logistics-heading-actions{display:flex;gap:7px;flex:none}.logistics-filters{display:grid;grid-template-columns:minmax(190px,1.4fr) repeat(3,minmax(130px,.8fr));gap:8px;margin-bottom:8px;padding:9px 10px;border:1px solid var(--divider);border-radius:13px;background:#fffcf8}.logistics-filters label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;min-width:0;color:var(--muted);font-size:10px}.logistics-filters input,.logistics-filters select{width:100%;min-width:0;height:34px;padding:5px 8px;border:1px solid #d9cfc5;border-radius:9px;background:#fffdfa;color:var(--ink);font:inherit;font-size:11px}.logistics-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:8px}.logistics-summary span{display:flex;align-items:baseline;gap:6px;padding:7px 10px;border:1px solid #eadfd2;border-radius:11px;background:#fffdfa;color:var(--muted);font-size:10px}.logistics-summary b{color:var(--ink);font-size:17px}.logistics-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:35px;margin-bottom:8px}.logistics-date-controls{display:flex;align-items:center;gap:10px;min-width:0}.logistics-date-scope{display:flex;align-items:center;gap:6px;flex:none;color:var(--muted);font-size:10px;font-weight:750}.logistics-date-scope>div{display:flex;gap:2px;padding:3px;border-radius:10px;background:#eee6dd}.logistics-date-scope button{min-height:29px;padding:4px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:10px;font-weight:750;cursor:pointer}.logistics-date-scope button[aria-pressed=true]{background:#fffdfa;color:var(--ink);box-shadow:0 1px 5px #3f2b1a18}.logistics-date-help{min-width:0;color:var(--muted);font-size:10px;line-height:1.35;white-space:nowrap}.logistics-view{display:flex;gap:3px;margin-left:auto;padding:3px;border-radius:10px;background:#eee6dd}.logistics-view button{min-height:29px;padding:4px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:750;cursor:pointer}.logistics-view button[aria-pressed=true]{background:#fffdfa;color:var(--ink);box-shadow:0 1px 5px #3f2b1a18}.logistics-month{display:flex;align-items:center;gap:10px}.logistics-month strong{min-width:116px;text-align:center;font-size:19px}.logistics-month .icon-button{width:38px;height:35px;min-height:35px;border:1px solid var(--divider);border-radius:12px;background:#fffdfa;font-size:22px}.logistics-month[hidden]{display:none!important}.logistics-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}.logistics-workspace.has-drawer{grid-template-columns:minmax(0,1fr) minmax(350px,410px)}.logistics-surface,.logistics-drawer{min-width:0;border:1px solid #dfd4c8;border-radius:15px;background:#fffdfa;box-shadow:0 8px 22px #4b342014}.logistics-surface{overflow:hidden}.logistics-loading,.logistics-empty{display:grid;place-items:center;align-content:center;gap:7px;min-height:250px;padding:25px;color:var(--muted);text-align:center}.logistics-empty h2,.logistics-empty h3,.logistics-empty p{margin:0}.logistics-empty h3{color:var(--ink);font-size:14px}.logistics-error{margin:10px}.logistics-list{display:grid}.logistics-row{display:grid;grid-template-columns:minmax(190px,1.25fr) minmax(155px,1fr) auto;align-items:center;gap:10px;min-height:66px;padding:7px 11px;border:0;border-bottom:1px solid #eee5db;border-left:4px solid var(--logistics-product-tone,#a77b58);background:linear-gradient(90deg,var(--logistics-product-tint,#f8efe6),#fffdfa 24%);color:inherit;font:inherit;text-align:left;cursor:pointer}.logistics-row:last-child{border-bottom:0}.logistics-row:hover,.logistics-row:focus-visible,.logistics-row[aria-selected=true]{background:linear-gradient(90deg,var(--logistics-product-tint,#f8efe6),#fff4e7 34%)}.logistics-row[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--logistics-product-tone,#a77b58)}.logistics-row-main,.logistics-row-route{display:grid;gap:2px;min-width:0}.logistics-row strong,.logistics-row span,.logistics-row small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logistics-row strong{font-size:12px}.logistics-row span{font-size:11px}.logistics-row small{color:var(--muted);font-size:10px}.logistics-statuses{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}.logistics-status{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:3px 8px;border:1px solid #dfd2c5;border-radius:999px;background:#f4eee8;color:#66594f;font-size:10px;font-weight:800;white-space:nowrap}.logistics-status--in_transit{border-color:#d7b585;background:#fff0dc;color:#7a4217}.logistics-status--exception,.logistics-status--overdue{border-color:#d99583;background:#fff0eb;color:#943d2d}.logistics-status--delivered{border-color:#96c4aa;background:#eaf5ee;color:#276845}.logistics-status--cancelled{border-color:#c8c0b8;background:#f2efeb;color:#726a63;text-decoration:line-through}.logistics-eta-delay{color:#a34a2a!important;font-weight:750}.logistics-pagination{display:flex;align-items:center;justify-content:center;gap:9px;padding:9px;border-top:1px solid #eee5db;color:var(--muted);font-size:10px}.logistics-calendar{min-width:700px}.logistics-calendar-scroll{overflow:auto;overscroll-behavior:contain}.logistics-calendar-head,.logistics-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.logistics-calendar-head span{padding:7px;border-bottom:1px solid #e8ddd1;background:#f8f2eb;color:var(--muted);font-size:10px;text-align:center}.logistics-day{min-height:92px;padding:5px;border-right:1px solid #eee5db;border-bottom:1px solid #eee5db;background:#fffdfa}.logistics-day:nth-child(7n){border-right:0}.logistics-day.is-outside{background:#f8f4ef;color:#9b928a}.logistics-day.is-today{box-shadow:inset 0 0 0 2px #ef944d}.logistics-day>time{display:block;margin-bottom:4px;font-size:10px;font-weight:800}.logistics-milestone{display:grid;grid-template-columns:7px minmax(0,1fr);align-items:center;gap:4px;width:100%;min-height:21px;margin:2px 0;padding:2px 4px;border:0;border-radius:6px;background:#f7eee5;color:#4e4035;font:inherit;font-size:9px;text-align:left;cursor:pointer}.logistics-milestone i{display:block;width:7px;height:7px;border-radius:50%;background:#c78037}.logistics-milestone--eta i{background:#4f83a6}.logistics-milestone--delivered i{background:#3f8c5a}.logistics-milestone span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logistics-day-more{width:100%;min-height:20px;padding:1px 4px;border:0;background:transparent;color:var(--accent-text);font:inherit;font-size:9px;cursor:pointer}.logistics-drawer{position:fixed;top:101px;right:max(48px,calc(18px + (100vw - 1818px)/2));bottom:12px;width:410px;overflow:hidden;z-index:19}.app-shell[data-nav-state=hidden] .logistics-drawer{right:max(48px,calc(18px + (100vw - 1586px)/2))}.logistics-drawer>form,.logistics-drawer>.logistics-detail{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;max-height:100%}.logistics-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 14px 10px;border-bottom:1px solid #e8ddd1}.logistics-drawer-head p,.logistics-drawer-head h2{margin:0}.logistics-drawer-head p{color:var(--muted);font-size:10px}.logistics-drawer-head h2{margin-top:2px;font-size:16px}.logistics-drawer-scroll{min-height:0;padding:12px 14px;overflow:auto;overscroll-behavior:contain}.logistics-drawer-actions{display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px;border-top:1px solid #e8ddd1;background:#fffaf4}.logistics-drawer-actions .button{flex:1;min-width:0;padding-inline:6px;white-space:nowrap}.logistics-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;margin:0 0 13px;font-size:11px;line-height:1.5}.logistics-facts dt{color:var(--muted)}.logistics-facts dd{min-width:0;margin:0;overflow-wrap:anywhere}.logistics-latest{margin:10px 0;padding:9px 10px;border-left:3px solid #e18436;border-radius:8px;background:#fff2e3;font-size:11px;line-height:1.5}.logistics-latest strong{display:block;margin-bottom:2px}.logistics-timeline{position:relative;display:grid;gap:0;margin:8px 0 14px;padding:0;list-style:none}.logistics-timeline li{position:relative;min-height:56px;padding:0 0 10px 25px;font-size:10px;line-height:1.45}.logistics-timeline li::before{content:"";position:absolute;top:3px;left:4px;width:9px;height:9px;border:2px solid #b9aa9e;border-radius:50%;background:#fffdfa;z-index:1}.logistics-timeline li::after{content:"";position:absolute;top:14px;bottom:-3px;left:9px;width:1px;background:#d9cec4}.logistics-timeline li:last-child::after{display:none}.logistics-timeline li.is-exception::before{border-color:#b84d38;background:#b84d38}.logistics-timeline li.is-current::before{border-color:#e18436;background:#e18436}.logistics-timeline li.is-done::before{border-color:#3f8c5a;background:#3f8c5a}.logistics-timeline strong,.logistics-timeline span{display:block}.logistics-timeline span{color:var(--muted)}.logistics-section-title{margin:14px 0 7px;font-size:12px}.logistics-day-list{display:grid;gap:6px}.logistics-day-list>button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px;border:1px solid #eadfd2;border-radius:9px;background:#fffaf4;color:inherit;font:inherit;text-align:left;cursor:pointer}.logistics-day-list>button>span:first-child{display:grid;gap:2px;min-width:0}.logistics-day-list strong,.logistics-day-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logistics-day-list strong{font-size:11px}.logistics-day-list small{color:var(--muted);font-size:9px}.logistics-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.logistics-drawer .field{margin-bottom:10px}.logistics-drawer textarea{resize:vertical}.logistics-viewer-editor{display:grid;gap:8px;margin:12px 0;padding:10px;border:1px solid #e4d8ca;border-radius:11px;background:#fffcf7}.logistics-viewer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.logistics-viewer-head h3,.logistics-viewer-head p{margin:0}.logistics-viewer-head h3{font-size:12px}.logistics-viewer-head p{color:var(--muted);font-size:10px}.logistics-viewer-chips{display:flex;flex-wrap:wrap;gap:5px}.logistics-viewer-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 5px 3px 7px;border:1px solid #e3c6a7;border-radius:999px;background:#fff1df;color:#754214;font-size:10px}.logistics-viewer-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logistics-viewer-chip button{display:grid;place-items:center;width:19px;height:19px;min-height:19px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;cursor:pointer}.logistics-viewer-chip.is-ineligible{border-style:dashed;border-color:#c8bdb3;background:#f3efeb;color:#746c65}.logistics-viewer-options{display:grid;gap:2px;max-height:170px;padding:3px;border:1px solid var(--divider);border-radius:9px;background:#fff;overflow:auto}.logistics-viewer-options label{display:flex;align-items:center;gap:8px;min-height:36px;padding:5px 7px;border-radius:7px;cursor:pointer}.logistics-viewer-options label:hover,.logistics-viewer-options label:has(input:focus-visible){background:#fff1df}.logistics-viewer-options input{width:16px;height:16px;margin:0;accent-color:var(--accent-text)}.logistics-viewer-options span{display:grid;min-width:0}.logistics-viewer-options strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.logistics-viewer-options small{color:var(--muted);font-size:9px}.logistics-viewer-options [hidden],.logistics-viewer-no-results[hidden]{display:none!important}.logistics-owner-transfer{margin:12px 0;padding:10px;border:1px solid #e4d8ca;border-radius:11px;background:#f8f2ea}.logistics-owner-transfer h3,.logistics-owner-transfer p{margin:0 0 6px}.logistics-owner-transfer h3{font-size:12px}.logistics-owner-transfer p{color:var(--muted);font-size:10px}.logistics-node-exception{display:flex;align-items:center;gap:7px;margin:7px 0 11px;font-size:11px}.logistics-node-exception input{width:17px;height:17px;margin:0;accent-color:#b84d38}
@media(max-width:1250px){.logistics-workspace.has-drawer{grid-template-columns:minmax(0,1fr)}.logistics-drawer{position:fixed;inset:12px 12px 12px auto;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);z-index:95;box-shadow:0 10px 100px #30231c50}.logistics-drawer>form,.logistics-drawer>.logistics-detail{height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}}
@media(max-width:700px){.logistics-heading{align-items:center;flex-wrap:wrap}.logistics-heading h1{font-size:24px}.logistics-heading-actions{width:100%}.logistics-heading-actions .button{flex:1}.logistics-filters{grid-template-columns:1fr}.logistics-filters label{grid-template-columns:58px minmax(0,1fr)}.logistics-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.logistics-tools{align-items:stretch;flex-direction:column}.logistics-view{width:100%}.logistics-view button{flex:1}.logistics-month{justify-content:space-between}.logistics-row{grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;min-height:78px;padding:9px}.logistics-row-route{grid-column:1/-1}.logistics-calendar{min-width:0}.logistics-calendar-head span{padding:5px 2px}.logistics-day{min-height:66px;padding:3px}.logistics-day>time{font-size:9px}.logistics-milestone{grid-template-columns:8px;padding:2px;place-content:center}.logistics-milestone span{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.logistics-milestone i{width:8px;height:8px}.logistics-drawer{inset:0;width:100%;height:100dvh;max-height:100dvh;border-radius:0}.logistics-drawer>form,.logistics-drawer>.logistics-detail{height:100dvh;max-height:100dvh}.logistics-field-grid{grid-template-columns:1fr}.logistics-drawer input,.logistics-drawer select,.logistics-drawer textarea{font-size:16px}.logistics-drawer-head,.logistics-drawer-scroll,.logistics-drawer-actions{padding-left:14px;padding-right:14px}}
@media(prefers-reduced-motion:reduce){.logistics-page *{scroll-behavior:auto;transition:none}}
.logistics-time-note{margin:-2px 0 9px;color:var(--muted);font-size:11px;line-height:1.45}.logistics-node-audit{display:block;margin-top:3px;color:#8b7d72;font-size:11px}.logistics-timeline .button{margin-top:5px}

/* Logistics milestone cards reuse the product tone while keeping node state independent. */
.logistics-calendar-scroll{height:var(--logistics-calendar-height,calc(100dvh - 390px));min-height:330px;overflow:auto;overscroll-behavior:contain}.logistics-calendar{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-width:770px}.logistics-calendar-grid{height:auto;min-height:0}.logistics-calendar[data-weeks="4"] .logistics-calendar-grid{min-height:228px;grid-template-rows:repeat(4,minmax(57px,1fr))}.logistics-calendar[data-weeks="5"] .logistics-calendar-grid{min-height:285px;grid-template-rows:repeat(5,minmax(57px,1fr))}.logistics-calendar[data-weeks="6"] .logistics-calendar-grid{min-height:342px;grid-template-rows:repeat(6,minmax(57px,1fr))}.logistics-day{min-height:0;padding:1px 4px;overflow:hidden}.logistics-day-number{display:flex;align-items:center;justify-content:space-between;min-height:18px;margin-bottom:1px}.logistics-day-number time{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:850}.logistics-day-note{display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:0;color:var(--accent-text);font-size:9px;font-weight:750}.logistics-day-note b{font:inherit}.logistics-day.is-today{box-shadow:inset 0 0 0 2px #ef944d}.logistics-day.is-today .logistics-day-number time{background:var(--accent);color:#332011}.logistics-day-events{display:grid;gap:2px;min-width:0}.logistics-milestone{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:14px 15px;gap:1px;width:100%;min-width:0;min-height:35px;margin:0;padding:2px 5px;border:0;border-left:3px solid var(--logistics-product-tone,#a77b58);border-radius:5px;background:var(--logistics-product-tint,#f7eee5);color:#493d33;font:600 9px var(--font);text-align:left;cursor:pointer}.logistics-milestone:hover,.logistics-milestone:focus-visible{box-shadow:inset 0 0 0 1px var(--logistics-product-tone,#a77b58);background:color-mix(in srgb,var(--logistics-product-tint,#f7eee5) 78%,#fff)}.logistics-milestone i{display:inline;width:auto;height:auto;border-radius:0;background:none}.logistics-milestone-main,.logistics-milestone-meta{display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap}.logistics-milestone-main{gap:3px;line-height:14px}.logistics-milestone-main strong,.logistics-milestone-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logistics-milestone-main strong{flex:0 1 55%;font-size:10px;font-weight:850}.logistics-milestone-main>span{flex:1}.logistics-milestone-main>i{flex:none;margin:0 2px;font-style:normal;opacity:.5}.logistics-milestone-meta{justify-content:space-between;gap:4px;color:#63564c;line-height:15px}.logistics-milestone-meta>span{display:flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logistics-milestone-meta b{flex:none;font-size:9px}.logistics-milestone-meta i{flex:none;margin:0 3px;font-style:normal;opacity:.55}.logistics-milestone-state{display:inline-flex;align-items:center;flex:none;max-width:48%;min-height:14px;padding:0 4px;border:1px solid #dfd2c5;border-radius:999px;background:#f6f1ec;color:#62564d;font-style:normal;font-size:9px;font-weight:850;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logistics-milestone-state--exception,.logistics-milestone-state--overdue{border-color:#df9b8c;background:#fff0eb;color:#923d2d}.logistics-milestone-state--delay{border-color:#e2bd8a;background:#fff4e4;color:#8b4c1d}.logistics-milestone-state--delivered{border-color:#9fcab0;background:#edf7f0;color:#286b48}.logistics-milestone-state--cancelled{border-color:#ccc3bb;background:#f2efec;color:#716961;text-decoration:line-through}.logistics-day-more{width:auto;min-height:16px;padding:0 2px;border-radius:4px;text-align:right;font-size:9px;font-weight:800;white-space:nowrap}.logistics-day-more:hover,.logistics-day-more:focus-visible{background:#fff0df}
@media(max-width:700px){.logistics-tools{align-items:stretch}.logistics-date-controls{order:2;width:100%;flex-wrap:wrap}.logistics-date-scope{order:1;width:100%}.logistics-date-scope>div{flex:1}.logistics-date-scope button{flex:1}.logistics-month{order:2;width:100%}.logistics-date-help{order:3;width:100%;white-space:normal}.logistics-view{order:1}.logistics-calendar-scroll{min-height:330px}.logistics-calendar{min-width:700px}.logistics-day{min-height:58px;padding:2px 3px}.logistics-day>time{font-size:inherit}.logistics-milestone{grid-template-columns:minmax(0,1fr);grid-template-rows:14px 15px;place-content:normal;min-height:35px;padding:2px 4px}.logistics-milestone span{position:static;width:auto;height:auto;clip-path:none}.logistics-milestone-main strong{font-size:9px}.logistics-milestone-state{max-width:43%;padding-inline:3px}.logistics-milestone-meta>span>span{max-width:38px;overflow:hidden;text-overflow:ellipsis}}

/* Northern operations workspace — approved pale blue / white / orange. */
.n-workbench{min-width:0;color:var(--ink,#252729)}
.n-workbench .page-heading{gap:18px;align-items:flex-start;flex-wrap:wrap}
.n-workbench h1{font-size:27px;letter-spacing:-.5px;margin:5px 0 8px}
.n-workbench h2{font-size:17px;margin:0 0 14px}.n-workbench h3{font-size:15px;margin:22px 0 12px}
.n-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;color:#5384a3}
.n-scope{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 22px;font-size:12px;color:#617285}
.n-scope>span:last-child{margin-left:auto}.n-badge{display:inline-flex;padding:5px 9px;border-radius:7px;font-size:11px;line-height:1.25;white-space:nowrap;background:#f2f5f8;color:#596677}
.n-badge--blue{background:#eaf6ff;color:#28759f}.n-badge--green{background:#ecfaf1;color:#248250}.n-badge--orange{background:#fff2e6;color:#bd671e}.n-badge--red{background:#fff0ef;color:#b74942}
.n-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(230px,.8fr);gap:32px;background:linear-gradient(115deg,#f4fbff,#eaf7ff);border:1px solid #e0f1fb;border-radius:16px;padding:32px;margin-bottom:20px;position:relative;overflow:hidden}
.n-hero:before{content:'';position:absolute;width:320px;height:210px;border-radius:50%;background:#e3f3ff;bottom:-150px;left:30%;transform:rotate(-28deg);pointer-events:none}
.n-hero>div{position:relative}.n-hero h2{font-size:32px;line-height:1.3;margin:9px 0 12px;letter-spacing:-1px}.n-hero p{font-size:13px;color:#62778a;line-height:1.8;margin:0 0 20px}.n-hero-note{align-self:center;background:rgba(255,255,255,.82);border-radius:14px;padding:24px;border:1px solid #fff}.n-hero-note strong{font-size:17px}.n-hero-note p{margin-top:12px}.n-hero-note a{font-size:13px;color:#d97020}
.n-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:22px}.n-stat{padding:20px}.n-stat span{display:block;font-size:12px;color:#6a7685}.n-stat strong{display:block;font-size:29px;font-weight:650;margin-top:12px}.n-number--blue{color:#2b80b2}.n-number--orange{color:#dc7a30}.n-number--red{color:#b95b55}.n-number--green{color:#33906b}
.n-panel{padding:24px;margin-bottom:20px;min-width:0}.n-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.n-section-head h2,.n-section-head h3{margin:0}.n-section-head>a{font-size:12px;color:#6e7e8b}.n-section-head small{color:#7b8794;font-size:11px}.n-section-title{margin:26px 0 14px!important}
.n-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.n-shortcut{position:relative;padding:22px 30px 22px 20px;text-decoration:none;color:inherit}.n-shortcut strong{font-size:14px}.n-shortcut span{display:block;margin-top:9px;font-size:11px;color:#728091;line-height:1.6}.n-shortcut b{position:absolute;right:15px;top:24px;color:#6c96b2;font-weight:400}
.n-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;background:#f7fcff;border:1px solid #e6f1f8;padding:18px;border-radius:12px;margin-bottom:20px}.n-filters .field{margin:0;flex:1 1 130px;min-width:100px}.n-filters .field input,.n-filters .field select{width:100%}.n-filters .button{flex:0 0 auto}
.n-info-strip{background:#eff8ff;border:1px solid #deedf8;color:#597082;border-radius:10px;padding:15px 18px;font-size:12px;line-height:1.8;margin:0 0 20px}.n-help{font-size:12px;color:#728091;line-height:1.8;margin:12px 0}.n-help.n-wide{margin:0}
.n-table-wrap{overflow:auto;max-width:100%;background:#fff;border:1px solid #e6edf3;border-radius:12px;margin-bottom:20px}.n-table{border-collapse:collapse;width:100%;min-width:780px;font-size:12px}.n-table th{background:#f5faff;color:#617688;font-weight:600;white-space:nowrap;text-align:left;padding:14px 16px;border-bottom:1px solid #e5edf3}.n-table td{padding:15px 16px;border-bottom:1px solid #edf2f6;vertical-align:middle}.n-table tbody tr:last-child td{border-bottom:0}.n-table tbody tr:hover{background:#fbfdff}.n-table td strong{font-size:12px;font-weight:600;display:block;max-width:260px;overflow-wrap:anywhere}.n-table small{display:block;margin-top:5px;color:#84909d;font-size:10px}.n-table .button{padding:6px 10px;min-height:30px;font-size:11px}
.n-empty{padding:32px 22px;text-align:center;background:#fbfdff;border:1px dashed #dce9f3;border-radius:12px;color:#718394;font-size:13px}.n-empty strong{font-weight:550}.n-empty p{font-size:12px;margin:10px 0 0;line-height:1.8}
.n-task-list{display:grid;gap:0}.n-task{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:17px 5px;border-bottom:1px solid #edf2f7}.n-task:last-child{border-bottom:0}.n-task strong{font-size:13px}.n-task p{font-size:11px;color:#778797;margin:7px 0}.n-task small{font-size:11px;color:#89939f}.n-task-end{display:flex;gap:10px;align-items:center;flex-shrink:0}.n-task .button{font-size:11px;padding:7px 12px;min-height:30px}
.n-provider-grid,.n-org-grid,.n-knowledge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.n-provider{padding:24px;min-width:0}.n-provider p{font-size:12px;color:#6f7d8a;overflow-wrap:anywhere}.n-provider small{font-size:11px;color:#8494a3}.n-provider-usage{display:flex;gap:12px;flex-wrap:wrap;padding:15px 0;font-size:11px;color:#627d91}.n-group-chips{display:flex;gap:10px;flex-wrap:wrap}.n-record{padding:17px 0;border-bottom:1px solid #edf2f7}.n-record:last-child{border:0}.n-record summary{font-size:13px;cursor:pointer;line-height:1.8}.n-record p{font-size:12px;line-height:1.8;color:#6b7e8d}.n-record>.button{margin-left:12px;padding:5px 10px;min-height:28px;font-size:11px}.n-history-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid #edf2f7;font-size:12px;color:#6d8090}
.n-editor{padding:25px;margin-top:24px;border:1px solid #cce4f5;box-shadow:0 8px 26px rgba(38,103,142,.07);scroll-margin-top:25px}.n-editor:focus{outline:2px solid #b8dff7;outline-offset:3px}.n-editor h2{font-size:19px}.n-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.n-form-grid .field{margin:0;min-width:0}.n-form-grid .field>span{font-size:12px}.n-form-grid input:not([type=checkbox]),.n-form-grid select,.n-form-grid textarea{width:100%;min-width:0;box-sizing:border-box}.n-form-grid textarea{resize:vertical;line-height:1.8;min-height:95px}.n-wide,.n-form-actions{grid-column:1/-1}.n-form-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:6px}.n-check{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:#6c7887;line-height:1.8}.n-check input{margin-top:4px}.n-editor-error:not(:empty){background:#fff3f0;padding:13px;border-radius:8px;margin-top:20px}
.n-detail-title>strong{font-size:18px}.n-detail-title>p{font-size:12px;line-height:1.8;color:#718394}.n-detail-title>.button-row{margin:18px 0}.n-detail-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.n-detail-metrics>div{background:#f5faff;border-radius:10px;padding:16px}.n-detail-metrics span{font-size:11px;color:#788c9b;display:block}.n-detail-metrics strong{display:block;font-size:16px;margin-top:10px;font-weight:600}.n-prose{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;font-size:13px;color:#4a5e6e;margin:16px 0}.n-data{white-space:pre-wrap;overflow-wrap:anywhere;max-height:380px;overflow:auto;font-size:11px;line-height:1.8;padding:15px;background:#f5f9fc;border:1px solid #e5edf3;border-radius:8px}.n-workbench details>summary{font-size:12px;cursor:pointer;color:#5f7e94;padding:8px 0}.n-source-grid,.n-money-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.n-source{background:#f7fbff;padding:18px;border-radius:10px;min-width:0}.n-source p,.n-money-grid p{font-size:12px;line-height:1.8;color:#718294}.n-source h3{margin:0}
@media(max-width:1200px){.n-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.n-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}.n-hero{gap:20px;padding:25px}.n-detail-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.n-workbench h1{font-size:23px}.n-workbench .page-heading>.button-row{width:100%}.n-workbench .page-heading .button{font-size:11px;padding:8px 11px}.n-scope>span:last-child{margin-left:0;width:100%;font-size:10px}.n-hero{grid-template-columns:1fr;padding:22px;gap:15px}.n-hero h2{font-size:27px}.n-hero-note{padding:18px}.n-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.n-stat{padding:16px}.n-stat strong{font-size:25px}.n-provider-grid,.n-org-grid,.n-knowledge-grid,.n-form-grid,.n-source-grid,.n-money-grid{grid-template-columns:1fr}.n-panel,.n-provider,.n-editor{padding:18px}.n-detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.n-shortcuts{gap:10px}.n-shortcut{padding:18px 24px 18px 15px}.n-task{align-items:flex-start}.n-task-end{flex-direction:column;align-items:flex-end}.n-filters{padding:14px;gap:10px}.n-filters .field{flex-basis:calc(50% - 10px)}.n-form-actions{justify-content:flex-start;flex-wrap:wrap}.n-history-row{align-items:flex-start}.n-section-head{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.n-workbench *{scroll-behavior:auto!important}}