:root {
  color-scheme: light;
  --bg: #eef3f8;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-solid: #ffffff;
  --panel-soft: #edf7fb;
  --panel-tint: #f6fbff;
  --line: #d4e1ea;
  --line-strong: #c6d0df;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #4f5bd5;
  --accent-dark: #30378f;
  --accent-soft: #dfe4ff;
  --aqua: #14a098;
  --aqua-soft: #e2f8ee;
  --warn: #9a5a12;
  --danger: #b73d3d;
  --blue: #2563eb;
  --radius-card: 16px;
  --radius-control: 12px;
  --shadow: 0 14px 30px rgba(37, 99, 111, 0.055), 0 4px 10px rgba(37, 99, 111, 0.035);
  --shadow-soft: 0 10px 24px rgba(37, 99, 111, 0.045), 0 2px 6px rgba(37, 99, 111, 0.03);
}

.category-template-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 120px);
}

.ct-header {
  align-items: center;
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.ct-header p {
  color: #64748b;
  font-size: 12px;
  margin: 0 0 4px;
}

.ct-header h1 {
  color: #0f172a;
  font-size: 22px;
  margin: 0;
}

.ct-header-actions,
.ct-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ct-kpis {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
}

.ct-kpi {
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  padding: 10px 12px;
}

.ct-kpi span {
  color: #64748b;
  display: block;
  font-size: 12px;
}

.ct-kpi strong {
  color: #0f172a;
  display: block;
  font-size: 22px;
  line-height: 1.2;
  margin-top: 3px;
}

.ct-tabs {
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 10px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 6px;
}

.ct-tabs button {
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #475569;
  cursor: pointer;
  font-weight: 700;
  padding: 8px 12px;
  white-space: nowrap;
}

.ct-tabs button.active {
  background: #e8f1ff;
  color: #1d4ed8;
}

.ct-toolbar,
.ct-grid-form {
  align-items: center;
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(220px, 1.4fr) minmax(130px, 0.7fr) minmax(120px, 0.7fr) minmax(140px, 0.8fr) auto auto minmax(160px, 1fr);
  padding: 10px;
}

.ct-grid-form {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  margin-bottom: 10px;
}

.ct-grid-form-binding {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.ct-toolbar input,
.ct-toolbar select,
.ct-grid-form input,
.ct-grid-form select,
.ct-grid-form textarea {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  color: #0f172a;
  font: inherit;
  min-height: 34px;
  min-width: 0;
  padding: 6px 9px;
}

.ct-grid-form textarea {
  grid-column: span 2;
  resize: vertical;
}

.ct-toolbar button,
.ct-grid-form button,
.ct-header button,
.ct-panel button,
.ct-drawer button {
  background: #fff;
  border: 1px solid #b9c9df;
  border-radius: 7px;
  color: #0f172a;
  cursor: pointer;
  font-weight: 700;
  min-height: 32px;
  padding: 6px 10px;
}

.ct-toolbar button:hover,
.ct-grid-form button:hover,
.ct-panel button:hover,
.ct-drawer button:hover {
  border-color: #2563eb;
  color: #1d4ed8;
}

.ct-toolbar button:disabled,
.ct-grid-form button:disabled,
.ct-panel button:disabled,
.ct-drawer button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ct-notice {
  color: #2563eb;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-panel {
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 10px;
  overflow: hidden;
}

.ct-panel-head {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid #dbe6f2;
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}

.ct-panel-head h2 {
  color: #0f172a;
  font-size: 16px;
  margin: 0;
}

.ct-panel-head span {
  color: #64748b;
  font-size: 12px;
}

.ct-panel-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ct-split {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.2fr);
}

.ct-table-wrap {
  max-width: 100%;
  overflow: auto;
}

.ct-table-wrap-short {
  max-height: 520px;
}

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

.ct-table th,
.ct-table td {
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  line-height: 1.35;
  max-width: 260px;
  padding: 8px 9px;
  text-align: left;
  vertical-align: top;
}

.ct-table th {
  background: #f1f5f9;
  color: #334155;
  font-weight: 800;
  position: sticky;
  top: 0;
  z-index: 1;
}

.ct-table tr:hover td {
  background: #f8fbff;
}

.ct-coverage .ct-table {
  min-width: 1680px;
}

.ct-ellipsis {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}

.ct-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 8px;
  white-space: nowrap;
}

.ct-status-ok {
  background: #dcfce7;
  color: #166534;
}

.ct-status-warn {
  background: #fff7ed;
  color: #c2410c;
}

.ct-status-muted {
  background: #eef2ff;
  color: #334155;
}

.ct-validation-groups {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  padding: 12px;
}

.ct-automation-note {
  background: #f8fbff;
  border-bottom: 1px solid #e2e8f0;
  color: #475569;
  font-size: 13px;
  padding: 10px 12px;
}

.ct-manual-panel {
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 10px;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding-bottom: 12px;
}

.ct-manual-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) auto auto;
  padding: 0 12px;
}

.ct-manual-grid input,
.ct-manual-grid select,
.ct-manual-upload input,
.ct-manual-upload textarea {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  color: #0f172a;
  font: inherit;
  min-height: 34px;
  min-width: 0;
  padding: 6px 9px;
}

.ct-manual-grid button,
.ct-manual-upload button {
  background: #fff;
  border: 1px solid #b9c9df;
  border-radius: 7px;
  color: #0f172a;
  cursor: pointer;
  font-weight: 700;
  min-height: 34px;
  padding: 6px 10px;
}

.ct-manual-grid button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.ct-manual-upload {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 240px;
  padding: 0 12px;
}

.ct-manual-upload label,
.ct-manual-side {
  display: grid;
  gap: 8px;
}

.ct-manual-upload label span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.ct-manual-upload textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  min-height: 190px;
  resize: vertical;
}

.ct-manual-side pre {
  background: #0f172a;
  border-radius: 8px;
  color: #e2e8f0;
  margin: 0;
  max-height: 150px;
  overflow: auto;
  padding: 8px;
}

.ct-manual-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ct-manual-summary span {
  background: #f7faff;
  border: 1px solid #d8e2ef;
  border-radius: 999px;
  color: #42526e;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
}

.ct-validation-groups section {
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  min-height: 140px;
  padding: 10px;
}

.ct-validation-groups h3 {
  align-items: center;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  margin: 0 0 8px;
}

.ct-validation-item {
  border-top: 1px solid #e2e8f0;
  padding: 8px 0;
}

.ct-validation-item p {
  margin: 4px 0;
}

.ct-validation-item em {
  color: #64748b;
  font-style: normal;
}

.ct-drawer {
  background: #fff;
  border-left: 1px solid #dbe6f2;
  box-shadow: -16px 0 32px rgba(15, 23, 42, 0.12);
  bottom: 0;
  max-width: min(980px, 88vw);
  overflow: auto;
  padding: 18px;
  position: fixed;
  right: 0;
  top: 0;
  width: 760px;
  z-index: 40;
}

.ct-drawer h2 {
  margin: 0 42px 4px 0;
}

.ct-drawer-close {
  position: absolute;
  right: 14px;
  top: 14px;
}

.ct-drawer pre {
  background: #0f172a;
  border-radius: 8px;
  color: #e2e8f0;
  max-height: 240px;
  overflow: auto;
  padding: 10px;
}

@media (max-width: 1100px) {
  .ct-kpis {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .ct-toolbar,
  .ct-grid-form,
  .ct-grid-form-binding,
  .ct-manual-grid,
  .ct-manual-upload,
  .ct-split,
  .ct-validation-groups {
    grid-template-columns: 1fr;
  }
}

/* Temu product collection follows a Feishu-like horizontal field table:
   only selector and row number are frozen; product fields scroll naturally. */
.temu-product-table th[data-field="media"],
.temu-product-table td[data-column="media"],
.temu-product-table th[data-field="main_image"],
.temu-product-table td[data-column="main_image"],
.temu-product-table th[data-field="video"],
.temu-product-table td[data-column="video"],
.temu-product-table th[data-field="title"],
.temu-product-table td[data-column="title"],
.temu-product-table th[data-field^="product_image_"],
.temu-product-table td[data-column^="product_image_"] {
  position: static;
  left: auto;
  z-index: auto;
  box-shadow: none;
}

.temu-product-table tbody tr:hover td[data-column="video"],
.temu-product-table tbody tr:hover td[data-column="title"],
.temu-product-table tbody tr:hover td[data-column^="product_image_"] {
  background: inherit;
}

.temu-product-ai-header-run {
  opacity: 1 !important;
  width: auto;
  min-width: auto;
  height: 20px;
  padding: 0 6px;
  border: 1px solid #c7d2fe;
  border-radius: 4px;
  background: #eef2ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
}

.ai-hub {
  display: grid;
  gap: 16px;
}

.ai-hub-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #f8fafc;
  padding: 5px;
  width: fit-content;
}

.ai-hub-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #42526b;
  font-weight: 700;
  padding: 0 12px;
}

.ai-hub-tabs button.active {
  background: #172033;
  color: #fff;
}

.ai-hub-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
  align-items: start;
}

.ai-hub-compose form,
.ai-hub-provider-picker,
.ai-hub-action-list,
.ai-hub-action-buttons {
  display: grid;
  gap: 10px;
}

.ai-hub-compose label {
  color: #59667c;
  font-size: 12px;
  font-weight: 800;
}

.ai-hub-compose textarea,
.ai-hub-compose select {
  width: 100%;
}

.ai-hub-provider-pill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
}

.ai-hub-provider-pill.disabled {
  opacity: 0.62;
}

.ai-hub-run-feedback {
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #f8fafc;
  color: #42526b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  min-height: 34px;
  padding: 8px 10px;
}

.ai-hub-run-feedback:empty {
  display: none;
}

.ai-hub-run-feedback.running {
  border-color: #a5b4fc;
  background: #eef2ff;
  color: #3730a3;
}

.ai-hub-run-feedback.error {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #9f1239;
}

.ai-hub-provider-pill span,
.ai-hub-provider-card div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ai-hub-provider-pill strong,
.ai-hub-provider-card strong,
.ai-hub-output-head strong,
.ai-hub-run-list strong,
.ai-hub-action-item strong,
.ai-hub-template-grid strong {
  overflow-wrap: anywhere;
}

.ai-hub-provider-pill em,
.ai-hub-provider-card em,
.ai-hub-run-list em,
.ai-hub-action-item em {
  color: #6d788a;
  font-size: 12px;
  font-style: normal;
}

.ai-hub-results {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ai-hub-result-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: linear-gradient(135deg, #172033 0%, #25364d 54%, #0f766e 100%);
  color: #fff;
  padding: 16px;
}

.ai-hub-result-head span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 800;
}

.ai-hub-result-head h2 {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.35;
}

.ai-hub-output-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.ai-hub-output-card,
.ai-hub-provider-card,
.ai-hub-template-grid article,
.ai-hub-run-list button,
.ai-hub-action-item {
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #fff;
}

.ai-hub-output-card {
  display: grid;
  gap: 10px;
  min-height: 260px;
  padding: 14px;
}

.ai-hub-output-card.adopted {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

.ai-hub-output-card.pending {
  border-color: #a5b4fc;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.ai-hub-output-head,
.ai-hub-output-meta,
.ai-hub-output-actions,
.ai-hub-provider-status .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-hub-output-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-hub-output-head span,
.ai-hub-template-grid span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.ai-hub-output-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.ai-hub-output-meta span,
.ai-hub-template-grid em {
  border-radius: 999px;
  background: #eef4ff;
  color: #24436f;
  font-size: 12px;
  padding: 4px 8px;
}

.ai-hub-output-body {
  min-height: 118px;
  max-height: 260px;
  overflow: auto;
  border-radius: 8px;
  background: #f8fafc;
  color: #24324a;
  line-height: 1.65;
  padding: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai-hub-output-body.error {
  background: #fff1f2;
  color: #9f1239;
}

.ai-hub-run-list {
  display: grid;
  gap: 8px;
}

.ai-hub-run-list button {
  display: grid;
  gap: 3px;
  min-height: 70px;
  text-align: left;
  padding: 10px 12px;
}

.ai-hub-run-list button.active {
  border-color: #2563eb;
  background: #eff6ff;
}

.ai-hub-run-list span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
}

.ai-hub-action-buttons {
  grid-template-columns: 1fr;
}

.ai-hub-action-item {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.ai-hub-action-item span {
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
}

.ai-hub-provider-grid,
.ai-hub-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.ai-hub-provider-status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}

.ai-hub-provider-card,
.ai-hub-template-grid article {
  display: grid;
  gap: 10px;
  min-height: 150px;
  padding: 14px;
}

.ai-hub-provider-card.configured {
  border-color: #0f766e;
}

.ai-hub-provider-card.disabled {
  background: #f8fafc;
}

.ai-hub-provider-card.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.ai-hub-provider-card-actions {
  display: flex;
  justify-content: flex-start;
}

.ai-hub-provider-card p,
.ai-hub-template-grid p {
  margin: 0;
  color: #59667c;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ai-hub-provider-config-panel {
  display: grid;
  gap: 12px;
}

.ai-hub-provider-config-form {
  display: grid;
  gap: 10px;
}

.ai-hub-provider-config-form label {
  display: grid;
  gap: 6px;
  color: #59667c;
  font-size: 12px;
  font-weight: 800;
}

.ai-hub-provider-config-form input {
  min-width: 0;
  width: 100%;
}

.ai-hub-provider-config-check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
}

.ai-hub-provider-config-check input {
  width: auto;
  margin-top: 2px;
}

.ai-hub-provider-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-hub-template-grid article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 1180px) {
  .ai-hub-workspace {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  }

  .ai-hub-actions {
    grid-column: 1 / -1;
  }

  .ai-hub-provider-status-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .ai-hub-tabs {
    width: 100%;
  }

  .ai-hub-tabs button {
    flex: 1 1 120px;
  }

  .ai-hub-workspace {
    grid-template-columns: 1fr;
  }

  .ai-hub-result-head,
  .ai-hub-output-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.performance-toolbar input,
.performance-toolbar select {
  min-width: 150px;
}

.performance-toolbar button {
  min-width: 72px;
  white-space: nowrap;
}

.performance-stats .performance-stat em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.performance-grid {
  margin-top: 14px;
}

.performance-source-list {
  display: grid;
  gap: 10px;
}

.performance-mini {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-tint);
}

.performance-mini > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.performance-mini strong,
.performance-kr strong {
  display: block;
}

.performance-mini span,
.performance-kpi-head span,
.performance-okr-head span,
.performance-kpi-meta,
.performance-initiative-row,
.performance-kr span {
  color: var(--muted);
  font-size: 12px;
}

.performance-mini p,
.performance-okr-card p {
  margin: 0;
  color: #334155;
  line-height: 1.6;
}

.performance-mini-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cycle-toolbar .toolbar-left {
  align-items: center;
}

.cycle-stats {
  margin-top: 14px;
}

.cycle-visual-panel {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.cycle-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cycle-visual-card,
.cycle-factor-strip article,
.cycle-report-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-tint);
}

.cycle-visual-card.risk,
.cycle-report-card.risk,
.cycle-person.risk {
  border-left: 4px solid var(--danger);
}

.cycle-visual-card span,
.cycle-visual-card em,
.cycle-factor-strip span,
.cycle-report-card em,
.cycle-report-card p,
.cycle-person span,
.cycle-person em,
.cycle-person small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.cycle-visual-card strong {
  font-size: 26px;
}

.cycle-factor-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.cycle-board-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.cycle-board-layout.single {
  grid-template-columns: minmax(0, 1fr);
}

.cycle-queue-panel,
.cycle-detail,
.cycle-column,
.cycle-column-list,
.cycle-people-list {
  display: grid;
  gap: 12px;
  align-content: start;
}

.cycle-person {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: left;
}

.cycle-person.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.cycle-person.watch,
.cycle-report-card.watch {
  border-left: 4px solid #d9902f;
}

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

.cycle-report-head,
.cycle-score-line,
.cycle-report-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cycle-report-head strong {
  display: block;
  margin-top: 3px;
}

.cycle-report-head > div:last-child,
.cycle-report-actions {
  flex-wrap: wrap;
}

.cycle-report-card p {
  display: grid;
  gap: 3px;
  margin: 0;
  line-height: 1.55;
}

.cycle-report-card p b {
  color: var(--text);
}

.cycle-history-panel {
  margin-top: 14px;
}

.cycle-history-panel summary {
  cursor: pointer;
  font-weight: 700;
}

.performance-table-panel {
  margin-top: 14px;
}

.work-report-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-solid);
  box-shadow: var(--shadow-soft);
}

.work-report-head span,
.work-report-head p,
.work-report-stat-strip em,
.work-report-queue-item em,
.work-report-queue-item small,
.work-report-card-head span,
.work-report-card-meta,
.work-report-score-row span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.work-report-head h1 {
  margin: 3px 0;
  font-size: 24px;
  line-height: 1.2;
}

.work-report-head p {
  margin: 0;
}

.work-report-head-actions,
.work-report-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.work-report-toolbar {
  margin-top: 10px;
}

.work-report-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.work-report-stat-strip article {
  display: grid;
  gap: 2px;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.work-report-stat-strip article.risk {
  border-left: 4px solid var(--danger);
}

.work-report-stat-strip strong {
  font-size: 24px;
  line-height: 1.1;
}

.work-report-layout {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}

.work-report-layout.single {
  grid-template-columns: minmax(0, 1fr);
}

.work-report-layout.single .work-report-queue {
  display: none;
}

.work-report-queue,
.work-report-main,
.work-report-card-list,
.work-report-queue-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.work-report-queue {
  position: sticky;
  top: 76px;
}

.work-report-queue-item {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-align: left;
}

.work-report-queue-item span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.work-report-queue-item.risk,
.work-report-card.risk {
  border-left: 4px solid var(--danger);
}

.work-report-queue-item.watch,
.work-report-card.watch {
  border-left: 4px solid #d9902f;
}

.work-report-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-tint);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.work-report-card.focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 91, 213, 0.16);
}

.work-report-card-head,
.work-report-score-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.work-report-card-head strong {
  display: block;
  margin-top: 3px;
  line-height: 1.35;
}

.work-report-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.work-report-score-row {
  align-items: center;
}

.work-report-score-row .progress-track {
  max-width: 180px;
}

.work-report-card-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr 0.95fr;
  gap: 8px;
}

.work-report-card-grid section {
  display: grid;
  gap: 4px;
  min-height: 84px;
  padding: 9px 10px;
  border: 1px solid rgba(212, 225, 234, 0.9);
  border-radius: 8px;
  background: #fff;
}

.work-report-card-grid b {
  font-size: 13px;
}

.work-report-card-grid p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
}

.work-report-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-report-card-meta span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.work-report-card-actions {
  justify-content: flex-start;
}

.work-report-history-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
}

.work-report-history-panel summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.work-report-empty {
  min-height: 140px;
}

.daily-visual-board {
  display: grid;
  gap: 14px;
}

.daily-fallback-notice {
  margin: 0;
}

.daily-visual-summary {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr) minmax(260px, 1.2fr);
  gap: 12px;
}

.daily-submit-ring-card,
.daily-focus-card,
.daily-department-card,
.daily-person-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.daily-submit-ring-card,
.daily-focus-card,
.daily-department-card {
  min-height: 190px;
  padding: 14px;
}

.daily-submit-ring-card {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.daily-submit-ring {
  display: grid;
  place-items: center;
  width: 126px;
  aspect-ratio: 1;
  border-radius: 50%;
}

.daily-submit-ring > div {
  display: grid;
  place-items: center;
  width: 86px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.daily-submit-ring strong,
.daily-focus-card strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.daily-submit-ring span,
.daily-focus-card span,
.daily-department-card > span {
  color: var(--muted);
  font-size: 12px;
}

.daily-ring-legend,
.daily-focus-list,
.daily-dept-bars {
  display: grid;
  gap: 8px;
}

.daily-ring-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #334155;
  font-size: 12px;
}

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

.daily-ring-legend i.ok {
  background: #18a77d;
}

.daily-ring-legend i.submitted {
  background: #4f5bd5;
}

.daily-ring-legend i.draft {
  background: #d9902f;
}

.daily-ring-legend i.risk {
  background: #d94f4f;
}

.daily-focus-card {
  display: grid;
  align-content: start;
  gap: 8px;
}

.daily-focus-card em {
  color: var(--muted);
  font-style: normal;
}

.daily-focus-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  text-align: left;
}

.daily-focus-list button.risk {
  border-left: 4px solid var(--danger);
}

.daily-focus-list button.watch {
  border-left: 4px solid #d9902f;
}

.daily-focus-list button span {
  color: #4f5bd5;
  font-weight: 700;
}

.daily-department-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.daily-dept-row {
  display: grid;
  gap: 6px;
}

.daily-dept-row > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.daily-dept-row b {
  color: var(--text);
}

.daily-dept-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.daily-dept-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eef4;
}

.daily-dept-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d9902f, #d94f4f);
}

.daily-person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 12px;
}

.daily-department-comparison {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.daily-comparison-head,
.daily-dept-summary-title,
.daily-dept-pressure,
.daily-comparison-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.daily-comparison-head span {
  color: var(--muted);
  font-size: 12px;
}

.daily-comparison-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
}

.daily-comparison-head em,
.daily-dept-summary-title span,
.daily-dept-pressure span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.daily-dept-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.daily-dept-summary-card {
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.daily-dept-summary-card.risk {
  border-left: 4px solid var(--danger);
}

.daily-dept-summary-card.watch {
  border-left: 4px solid #d9902f;
}

.daily-dept-summary-title strong {
  font-size: 16px;
}

.daily-dept-summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.daily-dept-summary-metrics span {
  display: grid;
  gap: 2px;
  min-height: 54px;
  padding: 7px 8px;
  border: 1px solid rgba(212, 225, 234, 0.85);
  border-radius: 8px;
  background: #fff;
}

.daily-dept-summary-metrics b {
  font-size: 18px;
  line-height: 1.1;
}

.daily-dept-summary-metrics em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.daily-dept-stacked,
.daily-dept-pressure div,
.daily-inline-bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eef4;
}

.daily-dept-stacked i {
  display: block;
  height: 100%;
}

.daily-dept-stacked .done {
  background: #18a77d;
}

.daily-dept-stacked .submitted {
  background: #4f5bd5;
}

.daily-dept-stacked .draft {
  background: #d9902f;
}

.daily-dept-stacked .risk {
  background: #d94f4f;
}

.daily-dept-pressure div {
  flex: 1;
}

.daily-dept-pressure i,
.daily-inline-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d9902f, #d94f4f);
}

.daily-comparison-table {
  display: grid;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.daily-comparison-row {
  display: grid;
  grid-template-columns: 92px 130px 104px minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr);
  justify-content: stretch;
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.daily-comparison-row:first-child {
  border-top: 0;
}

.daily-comparison-row.head {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  background: #f8fbfd;
}

.daily-comparison-row > span,
.daily-comparison-row > strong {
  min-width: 0;
}

.daily-inline-bar {
  margin-top: 5px;
}

.daily-theme-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.daily-theme-chips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid #d7e7df;
  border-radius: 999px;
  background: #f2fbf7;
  color: #17624f;
  font-size: 12px;
}

.daily-theme-chips.risk span {
  border-color: #f0d0d0;
  background: #fff6f6;
  color: #9f3737;
}

.daily-theme-chips.plan span {
  border-color: #d5ddff;
  background: #f5f7ff;
  color: #3948ad;
}

.daily-theme-chips span.empty-chip {
  border-color: var(--line);
  background: #f8fbfd;
  color: var(--muted);
}

.daily-theme-chips em {
  color: inherit;
  font-size: 10px;
  font-style: normal;
  opacity: 0.72;
}

.daily-person-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.daily-person-card:hover,
.work-report-card:hover {
  border-color: rgba(79, 91, 213, 0.45);
  box-shadow: 0 10px 24px rgba(30, 41, 59, 0.08);
}

.daily-person-card.focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 91, 213, 0.16);
}

.daily-person-card.risk {
  border-left: 4px solid var(--danger);
}

.daily-person-card.watch {
  border-left: 4px solid #d9902f;
}

.daily-person-head,
.daily-person-body,
.daily-person-meta,
.daily-person-tags {
  display: flex;
  gap: 10px;
}

.daily-person-head {
  align-items: center;
}

.daily-person-avatar {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e8f5f2;
  color: #14735c;
  font-weight: 800;
}

.daily-person-head strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
}

.daily-person-head span,
.daily-person-meta span {
  color: var(--muted);
  font-size: 12px;
}

.daily-person-tags {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.daily-person-body {
  align-items: stretch;
}

.daily-score-ring {
  display: grid;
  flex: 0 0 74px;
  place-items: center;
  width: 74px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#4f5bd5 calc(var(--score) * 1%), #e6eef4 0);
}

.daily-score-ring strong,
.daily-score-ring span {
  grid-area: 1 / 1;
}

.daily-score-ring strong {
  align-self: center;
  color: #111827;
  font-size: 18px;
  z-index: 1;
}

.daily-score-ring span {
  align-self: end;
  margin-bottom: 13px;
  color: var(--muted);
  font-size: 10px;
  z-index: 1;
}

.daily-score-ring::after {
  content: "";
  grid-area: 1 / 1;
  width: 52px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}

.daily-person-snippets {
  display: grid;
  flex: 1;
  gap: 7px;
  min-width: 0;
}

.daily-person-snippets p {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

.daily-person-snippets b {
  color: var(--text);
}

.daily-person-meta {
  flex-wrap: wrap;
}

.daily-person-meta span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fbfd;
}

.work-report-detail-modal {
  width: min(1080px, calc(100vw - 28px));
}

.work-report-detail-modal .modal-head {
  align-items: flex-start;
}

.work-report-detail-modal .modal-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.work-report-detail-body {
  display: grid;
  gap: 12px;
}

.work-report-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px minmax(180px, 0.5fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.work-report-detail-hero.risk {
  border-left: 4px solid var(--danger);
}

.work-report-detail-hero.watch {
  border-left: 4px solid #d9902f;
}

.work-report-detail-hero span,
.work-report-detail-tags span {
  color: var(--muted);
  font-size: 12px;
}

.work-report-detail-hero strong {
  display: block;
  margin: 3px 0;
  font-size: 24px;
}

.work-report-detail-hero p {
  margin: 0;
  color: #334155;
  line-height: 1.55;
}

.work-report-detail-score {
  display: grid;
  place-items: center;
  width: 104px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff 58%, transparent 59%), conic-gradient(#4f5bd5 0 var(--score-deg), #e6eef4 var(--score-deg) 360deg);
}

.work-report-detail-score strong {
  font-size: 26px;
}

.work-report-detail-tags,
.work-report-source-pills,
.work-report-detail-kv {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.work-report-detail-tags {
  align-content: center;
}

.work-report-detail-tags > span,
.work-report-source-pills span,
.work-report-detail-kv span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fbfd;
}

.work-report-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.work-report-detail-block,
.work-report-detail-review,
.work-report-detail-sources {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.work-report-detail-block h3,
.work-report-detail-review h3,
.work-report-detail-sources h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.work-report-detail-block p,
.work-report-detail-review p {
  margin: 0;
  color: #334155;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.work-report-detail-block p.muted {
  color: var(--muted);
}

.work-report-detail-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.35fr);
  gap: 12px;
}

.work-report-detail-review > div:last-child {
  display: grid;
  align-content: start;
  gap: 4px;
}

.work-report-detail-review span {
  color: var(--muted);
  font-size: 12px;
}

.work-report-detail-kv span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 8px;
}

.work-report-detail-kv b {
  margin-right: 6px;
}

.work-report-detail-kv em {
  color: #334155;
  font-style: normal;
  overflow-wrap: anywhere;
}

.daily-hub {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.daily-hub > *,
.daily-hub-hero > div,
.daily-hub-main,
.daily-hub-side,
.daily-hub-management,
.daily-hub-report-strip,
.daily-report-flow {
  min-width: 0;
  max-width: 100%;
}

.daily-hub-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.daily-hub-hero span,
.daily-hub-hero p,
.daily-hub-kpis em,
.daily-hub-priority-item em,
.daily-hub-priority-item small,
.daily-hub-dept-card span,
.daily-hub-dept-card em,
.daily-hub-report-head span,
.daily-hub-missing-note span,
.daily-hub-section-head span,
.daily-hub-audit summary span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.daily-hub-hero h1 {
  margin: 3px 0;
  font-size: 26px;
  line-height: 1.2;
}

.daily-hub-hero p {
  margin: 0;
}

.daily-hub-actions,
.daily-hub-inline-actions,
.daily-hub-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.daily-hub-toolbar {
  margin-top: 0;
  min-width: 0;
}

.daily-hub-period-range {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.daily-hub-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 10px;
  min-width: 0;
}

.daily-hub-kpis article {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.daily-hub-kpis article.risk {
  border-left: 4px solid var(--danger);
}

.daily-hub-kpis article.watch {
  border-left: 4px solid #d9902f;
}

.daily-hub-kpis span {
  color: #26364f;
  font-size: 13px;
  font-weight: 700;
}

.daily-hub-kpis strong {
  font-size: 26px;
  line-height: 1;
}

.daily-hub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.daily-hub-tabs button {
  flex: 0 0 auto;
  border-color: transparent;
  background: transparent;
}

.daily-hub-tabs button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
}

.daily-hub-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 12px;
  align-items: start;
}

.daily-hub-side,
.daily-hub-main,
.daily-hub-tab-panel,
.daily-hub-priority-list,
.daily-hub-missing-list,
.daily-hub-report-strip,
.daily-hub-review-grid {
  display: grid;
  gap: 12px;
  align-content: start;
}

.daily-hub-side {
  position: sticky;
  top: 76px;
}

.daily-hub-priority-item,
.daily-hub-missing-row,
.daily-hub-report-card,
.daily-hub-dept-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.daily-hub-priority-item {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 10px;
  text-align: left;
}

.daily-hub-priority-item span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.daily-hub-priority-item.risk,
.daily-hub-report-card.risk,
.daily-hub-dept-card.risk {
  border-left: 4px solid var(--danger);
}

.daily-hub-priority-item.watch,
.daily-hub-report-card.watch,
.daily-hub-dept-card.watch {
  border-left: 4px solid #d9902f;
}

.daily-hub-priority-item.missing,
.daily-hub-report-card.missing {
  border-left: 4px solid #475569;
  background: #f8fbfd;
}

.daily-hub-missing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
}

.daily-hub-missing-row strong,
.daily-hub-missing-row span {
  display: block;
}

.daily-hub-missing-row span,
.daily-hub-missing-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.daily-hub-work-summary {
  display: grid;
  gap: 12px;
}

.daily-hub-summary-text {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

.daily-hub-summary-keywords,
.daily-hub-summary-columns,
.daily-hub-summary-depts {
  display: grid;
  gap: 10px;
}

.daily-hub-summary-keywords {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.daily-hub-summary-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.daily-hub-summary-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.daily-hub-summary-list h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.daily-hub-summary-list > div {
  display: grid;
  gap: 6px;
}

.daily-hub-summary-item {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  text-align: left;
}

.daily-hub-summary-item.risk {
  border-color: #f0d0d0;
  background: #fff8f7;
}

.daily-hub-summary-item.plan {
  border-color: #d5ddff;
  background: #f8f9ff;
}

.daily-hub-summary-item span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.daily-hub-summary-item em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-hub-summary-item strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.daily-hub-summary-depts {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.daily-hub-summary-depts button {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #d9e6ee;
  border-radius: 8px;
  background: #f8fbfd;
  text-align: left;
}

.daily-hub-summary-depts span,
.daily-hub-summary-depts em {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-hub-departments {
  display: grid;
  gap: 12px;
}

.daily-hub-dept-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.daily-hub-dept-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  text-align: left;
}

.daily-hub-dept-card > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.daily-hub-dept-card strong {
  font-size: 16px;
}

.daily-hub-dept-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.daily-hub-dept-metrics span {
  display: grid;
  gap: 2px;
  min-height: 50px;
  padding: 7px;
  border: 1px solid rgba(212, 225, 234, 0.85);
  border-radius: 8px;
  background: #f8fbfd;
}

.daily-hub-dept-metrics b {
  color: var(--text);
  font-size: 17px;
}

.daily-hub-stack {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eef4;
}

.daily-hub-stack i {
  display: block;
  height: 100%;
}

.daily-hub-stack .done {
  background: #18a77d;
}

.daily-hub-stack .risk {
  background: #d94f4f;
}

.daily-hub-dept-table {
  display: grid;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.daily-hub-dept-row {
  display: grid;
  grid-template-columns: 90px 110px 120px minmax(170px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 900px;
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.daily-hub-dept-row:first-child {
  border-top: 0;
}

.daily-hub-dept-row.head {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  background: #f8fbfd;
}

.daily-hub-employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.daily-hub-report-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.daily-hub-report-card:hover,
.daily-hub-dept-card:hover,
.daily-hub-priority-item:hover {
  border-color: rgba(79, 91, 213, 0.45);
  box-shadow: 0 10px 24px rgba(30, 41, 59, 0.08);
}

.daily-hub-report-card.compact .daily-hub-report-body {
  grid-template-columns: 68px minmax(0, 1fr);
}

.daily-hub-report-head,
.daily-hub-report-body,
.daily-hub-section-head,
.daily-hub-audit summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.daily-hub-report-head {
  align-items: center;
}

.daily-hub-report-head strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
}

.daily-hub-report-body {
  align-items: stretch;
  justify-content: flex-start;
}

.daily-hub-report-actions {
  justify-content: flex-start;
}

.daily-hub-missing-note {
  display: grid;
  gap: 4px;
  min-height: 78px;
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #fff;
}

.daily-hub-section-head {
  align-items: center;
}

.daily-hub-section-head h2 {
  margin: 2px 0 0;
  font-size: 20px;
}

.daily-hub-section-head strong {
  font-size: 18px;
}

.daily-hub-audit summary {
  align-items: center;
  cursor: pointer;
  font-weight: 800;
}

.daily-hub-audit {
  max-width: 100%;
  overflow-x: auto;
}

.daily-hub-audit:not([open]) > :not(summary) {
  display: none !important;
}

.daily-hub-workbench {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr) 304px;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.daily-hub-date-rail,
.daily-hub-management {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.daily-hub-date-rail {
  padding: 10px;
}

.daily-hub-date-rail button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f8fbfd;
  color: var(--text);
  text-align: left;
}

.daily-hub-date-rail button:hover,
.daily-hub-date-rail button.active {
  border-color: rgba(79, 91, 213, 0.38);
  background: #eef2ff;
}

.daily-hub-date-rail button.warn {
  border-left: 4px solid var(--danger);
}

.daily-hub-date-rail strong,
.daily-hub-date-rail span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-hub-date-rail span {
  color: var(--muted);
  font-size: 11px;
}

.daily-hub-report-strip {
  min-width: 0;
  padding: 12px;
}

.daily-report-flow {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.daily-report-day-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.daily-report-day-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  background: #f8fbfd;
}

.daily-report-day-group > header div {
  display: grid;
  gap: 1px;
}

.daily-report-day-group > header span,
.daily-report-day-group > header em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.daily-report-row {
  display: grid;
  grid-template-columns: 76px minmax(104px, 0.72fr) minmax(108px, 0.72fr) minmax(150px, 1.35fr) minmax(124px, 1fr) minmax(124px, 1fr) minmax(110px, auto);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 8px 10px;
  border-top: 1px solid #e8f0f6;
  background: #fff;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.daily-report-day-group .daily-report-row:first-of-type {
  border-top: 0;
}

.daily-report-row:hover,
.daily-report-row:focus-visible {
  background: #fbfdff;
  box-shadow: inset 3px 0 0 rgba(79, 91, 213, 0.42);
  outline: none;
}

.daily-report-row.risk,
.daily-report-row.missing {
  box-shadow: inset 4px 0 0 rgba(217, 79, 79, 0.82);
}

.daily-report-row.watch {
  box-shadow: inset 4px 0 0 rgba(217, 144, 47, 0.82);
}

.daily-report-row-date,
.daily-report-row-owner,
.daily-report-row-status,
.daily-report-row p,
.daily-report-row-empty {
  min-width: 0;
}

.daily-report-row-date {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.daily-report-row-owner {
  display: grid;
  gap: 2px;
}

.daily-report-row-owner strong,
.daily-report-row-owner span,
.daily-report-row p,
.daily-report-row-empty {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-report-row-owner span,
.daily-report-row p b,
.daily-report-row-status em,
.daily-report-row-empty {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.daily-report-row-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.daily-report-row p {
  display: flex;
  gap: 6px;
  margin: 0;
  color: var(--text);
  line-height: 1.35;
}

.daily-report-row p b {
  flex: 0 0 auto;
  font-weight: 800;
}

.daily-report-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.daily-report-row-actions button {
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 12px;
  white-space: nowrap;
}

.daily-hub-workbench .daily-report-row {
  grid-template-columns: 72px minmax(96px, 0.72fr) minmax(100px, 0.72fr) minmax(0, 1.6fr) minmax(88px, auto);
}

.daily-hub-workbench .daily-report-row p:nth-of-type(2),
.daily-hub-workbench .daily-report-row p:nth-of-type(3) {
  display: none;
}

.daily-hub-workbench .daily-report-row-actions {
  justify-content: flex-end;
}

.daily-hub-management .panel,
.daily-hub-compact-summary,
.daily-hub-compact-depts {
  min-width: 0;
}

.daily-hub-management .panel {
  padding: 10px;
}

.daily-hub-compact-summary,
.daily-hub-compact-depts {
  display: grid;
  gap: 10px;
}

.daily-hub-mini-columns {
  display: grid;
  gap: 8px;
}

.daily-hub-mini-columns section {
  display: grid;
  gap: 6px;
}

.daily-hub-mini-columns h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.daily-hub-compact-depts .daily-hub-summary-depts {
  grid-template-columns: 1fr;
}

.daily-hub-compact-depts .daily-hub-summary-depts button {
  padding: 8px;
}

.daily-detail-backdrop {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}

.daily-detail-drawer {
  width: min(760px, 94vw);
  max-width: none;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 12px 0 0 12px;
  box-shadow: -20px 0 48px rgba(15, 23, 42, 0.22);
}

.daily-detail-drawer .modal-body {
  overflow: auto;
}

.performance-okr-list,
.performance-kpi-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.performance-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.performance-okr-card,
.performance-kpi-card {
  display: grid;
  gap: 12px;
}

.performance-okr-head,
.performance-kpi-head,
.performance-kpi-meta,
.performance-progress-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.performance-okr-head,
.performance-kpi-head {
  align-items: flex-start;
}

.performance-okr-head h2,
.performance-kpi-head h2 {
  margin: 3px 0 0;
  font-size: 18px;
}

.performance-okr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-track {
  height: 7px;
  min-width: 120px;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe7ee;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aqua), var(--accent));
}

.performance-kr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.performance-kr {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.performance-initiative-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.performance-initiative-row span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
}

.performance-kpi-values {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.performance-kpi-values strong {
  font-size: 28px;
}

.performance-self-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--aqua);
  border-radius: 12px;
  background: var(--panel-solid);
  box-shadow: var(--shadow-soft);
}

.performance-self-hero > div,
.performance-self-layout > *,
.performance-self-side .panel {
  min-width: 0;
}

.performance-self-side .compact-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.performance-self-side .compact-table th,
.performance-self-side .compact-table td {
  overflow-wrap: anywhere;
  white-space: normal;
}

.performance-self-hero.watch {
  border-left-color: #d9902f;
}

.performance-self-hero.risk {
  border-left-color: var(--danger);
}

.performance-self-hero span,
.performance-section-head span,
.performance-draft-preview .panel-head span,
.performance-self-kpi small,
.performance-self-kr-meta {
  color: var(--muted);
  font-size: 12px;
}

.performance-self-hero h2,
.performance-section-head h2 {
  margin: 4px 0;
}

.performance-self-hero p {
  margin: 0;
  color: #334155;
}

.performance-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.performance-period-tabs button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.performance-self-stats {
  margin-top: 14px;
}

.performance-self-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 14px;
  margin-top: 14px;
}

.performance-self-main,
.performance-self-side,
.performance-self-objectives,
.performance-action-list {
  display: grid;
  gap: 12px;
  align-content: start;
}

.performance-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(198, 208, 223, 0.86);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0.88), rgba(255, 255, 255, 0.94)),
    var(--panel-solid);
  box-shadow: var(--shadow-soft);
}

.performance-section-head h2 {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.25;
}

.performance-section-head span {
  display: block;
  letter-spacing: 0;
}

.performance-section-head button {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
}

.performance-self-objective {
  display: grid;
  gap: 12px;
}

.performance-self-kr-list,
.performance-self-kpis,
.performance-draft-grid {
  display: grid;
  gap: 10px;
}

.performance-self-kpis,
.performance-draft-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.performance-self-kr,
.performance-self-kpi,
.performance-action,
.performance-draft-block {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-tint);
}

.performance-self-kr > div,
.performance-self-kpi > div,
.performance-self-kpi p,
.performance-action > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.performance-self-kpi p,
.performance-action p {
  margin: 0;
}

.performance-self-kpi b {
  font-size: 24px;
}

.performance-self-kr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.performance-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.performance-next-actions span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.performance-action.watch {
  border-left: 4px solid #d9902f;
}

.performance-action.risk {
  border-left: 4px solid var(--danger);
}

.performance-action span {
  color: var(--muted);
  font-size: 12px;
}

.performance-action button {
  justify-self: flex-start;
}

.performance-empty-action {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 132px;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 100% 0, rgba(79, 91, 213, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.92)),
    var(--panel-solid);
}

.performance-empty-action strong {
  font-size: 18px;
  line-height: 1.35;
}

.performance-empty-action p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  line-height: 1.65;
}

.performance-empty-action button {
  justify-self: flex-start;
  margin-top: 2px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
}

.performance-self-objectives > .performance-empty-action,
.performance-self-kpis > .performance-empty-action {
  grid-column: 1 / -1;
}

.performance-evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.performance-evidence-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.performance-evidence-column .panel-head span {
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.performance-evidence-list,
.performance-draft-block ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.performance-evidence-list li {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.performance-evidence-list span,
.performance-evidence-list em,
.performance-draft-block span,
.performance-draft-block p {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.performance-draft-preview {
  margin-top: 14px;
}

.performance-draft-preview .panel-head > div:first-child {
  display: grid;
  gap: 3px;
}

.performance-draft-block {
  background: #fff;
}

.performance-draft-block ul {
  line-height: 1.55;
}

.performance-draft-block li {
  position: relative;
  padding-left: 12px;
}

.performance-draft-block li::before {
  position: absolute;
  left: 0;
  content: "•";
  color: var(--accent);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 74% 16%, rgba(220, 232, 255, 0.46), transparent 26%),
    radial-gradient(circle at 12% 86%, rgba(215, 244, 239, 0.42), transparent 28%),
    linear-gradient(135deg, rgba(20, 160, 152, 0.06), transparent 36%),
    var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

.security-watermark {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background-repeat: repeat;
  opacity: 0.9;
  mix-blend-mode: multiply;
}

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

button {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

button:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: #fff;
}

button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

button.primary:hover {
  background: var(--accent-dark);
  color: #fff;
}

button.danger {
  border-color: #e2b8b8;
  color: var(--danger);
}

button.icon {
  width: 32px;
  padding: 0;
}

button.icon.text-icon {
  width: auto;
  min-width: 34px;
  min-height: 26px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  border-radius: var(--radius-control);
  padding: 7px 9px;
  outline: none;
}

textarea {
  min-height: 88px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 91, 213, 0.12);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  background:
    radial-gradient(circle at 78% 22%, rgba(220, 232, 255, 0.48), transparent 28%),
    var(--bg);
}

.login-panel {
  background: #fff;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow);
}

.login-brand {
  margin-bottom: 34px;
}

.login-brand h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
}

.login-aside {
  padding: 44px 64px;
}

.field {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}

.field label {
  color: #37454d;
  font-weight: 600;
}

.error {
  color: var(--danger);
  margin: 10px 0 0;
}

.app-shell {
  height: 100vh;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
  transition: grid-template-columns 0.18s ease;
}

.sidebar {
  height: 100vh;
  min-height: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(219, 228, 245, 0.26)),
    #edf4fa;
  border-right: 1px solid var(--line-strong);
  box-shadow: inset -10px 0 18px rgba(148, 163, 184, 0.08), inset -1px 0 0 rgba(255, 255, 255, 0.72);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-width: 0;
  backdrop-filter: blur(20px);
  font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  transition: box-shadow 0.18s ease, background 0.18s ease;
}

.brand {
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(198, 208, 223, 0.74);
}

.sidebar > .brand {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

.brand-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.brand .brand-logo {
  display: none;
  width: 36px;
  height: 36px;
  margin-top: 0;
  border: 1px solid rgba(79, 91, 213, 0.22);
  border-radius: 12px;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(79, 91, 213, 0.12), rgba(255, 255, 255, 0.86)),
    rgba(255, 255, 255, 0.7);
  color: var(--accent-dark);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  flex: 0 0 auto;
}

.brand-copy {
  min-width: 0;
}

.brand strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.brand span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  margin-top: 4px;
}

.brand .brand-subline {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.brand-subline em {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border: 1px solid rgba(79, 91, 213, 0.22);
  border-radius: 999px;
  background: rgba(79, 91, 213, 0.1);
  color: var(--accent-dark);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.sidebar-collapse-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-color: rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.58);
  color: #64748b;
  box-shadow: none;
  flex: 0 0 auto;
  font-family: "Segoe UI", Arial, sans-serif;
}

.sidebar-collapse-btn:hover {
  border-color: rgba(79, 91, 213, 0.36);
  background: rgba(255, 255, 255, 0.84);
  color: var(--accent-dark);
}

.sidebar-collapse-icon {
  display: block;
  margin-top: -1px;
  color: inherit;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.sidebar-edit-toggle {
  min-height: 28px;
  padding: 0 9px;
  border-color: rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: #46566f;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
}

.sidebar-edit-toggle:hover,
.sidebar-edit-toggle.active {
  border-color: rgba(79, 91, 213, 0.42);
  background: rgba(79, 91, 213, 0.12);
  color: var(--accent-dark);
}

.sidebar-editbar {
  display: grid;
  gap: 7px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(198, 208, 223, 0.72);
  background: rgba(255, 255, 255, 0.7);
}

.sidebar-editbar span {
  color: #46566f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.sidebar-editbar > div {
  display: flex;
  gap: 6px;
}

.sidebar-editbar button {
  flex: 1 1 0;
  min-height: 28px;
  padding: 0 7px;
  font-size: 12px;
}

.nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.nav-group {
  display: grid;
  gap: 2px;
}

.nav button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: #273449;
  display: flex;
  gap: 9px;
  align-items: center;
  box-shadow: none;
  font-weight: 500;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
}

.nav-title-label,
.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav .nav-title {
  min-height: 21px;
  justify-content: space-between;
  gap: 6px;
  padding: 0 6px;
  border-color: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.nav .nav-title:hover {
  border-color: rgba(174, 185, 255, 0.32);
  background: rgba(255, 255, 255, 0.46);
}

.nav-title-meta {
  margin-left: auto;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.6);
  color: #64748b;
  font-size: 10px;
  line-height: 1.4;
}

.nav-title-chevron {
  width: 14px;
  color: #94a3b8;
  font-size: 11px;
  text-align: center;
  transition: transform 0.16s ease;
}

.nav-group.expanded .nav-title {
  color: #46566f;
}

.nav-group.expanded .nav-title-chevron {
  transform: rotate(180deg);
}

.nav-items {
  display: grid;
  gap: 2px;
  min-height: 0;
}

.nav-group.collapsed .nav-items {
  display: none;
}

.nav-items button {
  min-height: 22px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 500;
}

.nav button:hover {
  border-color: rgba(174, 185, 255, 0.46);
  background: rgba(255, 255, 255, 0.58);
  color: var(--accent-dark);
}

.nav button.active {
  border-color: #aeb9ff;
  background:
    linear-gradient(90deg, rgba(79, 91, 213, 0.12), rgba(255, 255, 255, 0.78)),
    rgba(255, 255, 255, 0.82);
  color: #1f2a78;
  font-weight: 600;
}

.nav .mark {
  width: 28px;
  height: 17px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(148, 163, 184, 0.16);
  color: #64748b;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.nav button.active .mark {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.sidebar-editing .nav button[draggable="true"] {
  cursor: grab;
}

.sidebar-editing .nav {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar-editing .nav button[draggable="true"]:active {
  cursor: grabbing;
}

.sidebar-editing .nav button.nav-dragging {
  opacity: 0.5;
}

.nav-drop-preview {
  height: 26px;
  display: grid;
  place-items: center;
  margin: 2px 0;
  border: 1px dashed rgba(79, 91, 213, 0.62);
  border-radius: 8px;
  background: rgba(79, 91, 213, 0.1);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}

.nav-drop-preview span {
  line-height: 1;
}

.sidebar-editing .nav-group.nav-drop-target {
  border-radius: 10px;
  background: rgba(79, 91, 213, 0.06);
}

.sidebar-editing .nav-items.nav-drop-target,
.sidebar-editing .nav-group.nav-drop-target .nav-items {
  outline: 1px dashed rgba(79, 91, 213, 0.58);
  outline-offset: 2px;
  background: rgba(79, 91, 213, 0.07);
}

.nav-edit-empty {
  min-height: 30px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(148, 163, 184, 0.46);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}

.sidebar-foot {
  margin-top: auto;
  padding: 7px 10px 9px;
  border-top: 1px solid rgba(198, 208, 223, 0.72);
}

.user-chip {
  display: grid;
  gap: 2px;
  margin-bottom: 6px;
  font-size: 12px;
}

.sidebar-foot button {
  min-height: 26px;
  padding: 0 8px;
}

.user-chip strong {
  color: var(--text);
}

.user-chip span {
  color: var(--muted);
}

@media (min-width: 761px) {
  .app-shell.sidebar-collapsed {
    grid-template-columns: 72px 1fr;
  }

  .sidebar-collapsed .sidebar > .brand {
    min-height: 86px;
    padding: 10px 8px 8px;
    display: grid;
    justify-items: center;
    gap: 8px;
  }

  .sidebar-collapsed .brand-main {
    justify-content: center;
  }

  .sidebar-collapsed .brand-actions {
    display: grid;
    justify-items: center;
    gap: 6px;
  }

  .sidebar-collapsed .brand .brand-logo {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-grid;
  }

  .sidebar-collapsed .brand-copy {
    display: none;
  }

  .sidebar-collapsed .sidebar-edit-toggle {
    display: none;
  }

  .sidebar-collapsed .sidebar-collapse-btn {
    width: 34px;
    height: 30px;
    min-height: 30px;
  }

  .sidebar-collapsed .sidebar-collapse-icon {
    margin-top: -2px;
  }

  .sidebar-collapsed .nav {
    padding: 8px 8px;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .sidebar-collapsed .nav-group {
    gap: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(198, 208, 223, 0.72);
  }

  .sidebar-collapsed .nav-group:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .sidebar-collapsed .nav .nav-title {
    display: none;
  }

  .sidebar-collapsed .nav-group.collapsed .nav-items,
  .sidebar-collapsed .nav-group.expanded .nav-items {
    display: grid;
    gap: 5px;
  }

  .sidebar-collapsed .nav-items button {
    min-height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
  }

  .sidebar-collapsed .nav-label {
    display: none;
  }

  .sidebar-collapsed .nav .mark {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    font-size: 9px;
  }

  .sidebar-collapsed .nav button.active {
    border-color: rgba(79, 91, 213, 0.42);
    box-shadow: inset 3px 0 0 rgba(79, 91, 213, 0.55);
  }

  .sidebar-collapsed .sidebar-foot {
    padding: 8px;
    display: grid;
    gap: 7px;
  }

  .sidebar-collapsed .user-chip {
    display: none;
  }

  .sidebar-collapsed .sidebar-foot button {
    width: 100%;
    min-height: 34px;
    padding: 0;
    font-size: 0;
  }

  .sidebar-collapsed .sidebar-foot button::before {
    content: "OUT";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
  }
}

.content {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 50px;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid var(--line);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  backdrop-filter: blur(18px);
}

.topbar.embedded {
  display: none;
}

.topbar.embedded.previewing {
  min-height: 44px;
  display: none;
  justify-content: flex-end;
  padding: 8px 24px 0;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

.topbar.embedded.previewing > div:first-child,
.topbar.embedded.previewing #refreshBtn {
  display: none;
}

.topbar-title {
  min-width: 0;
}

.topbar h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.topbar p {
  margin: 3px 0 0;
  color: var(--muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.knowledge-shell {
  display: grid;
  gap: 12px;
}

.knowledge-toolbar select {
  width: 150px;
}

.knowledge-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.knowledge-toolbar .toolbar-left {
  display: grid;
  grid-template-columns: 150px minmax(260px, 1fr) 64px;
  gap: 8px;
  min-width: 0;
}

.knowledge-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.knowledge-toolbar button {
  min-width: 64px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  white-space: nowrap;
  word-break: keep-all;
  line-height: 1;
}

.knowledge-tabs {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-control);
  overflow-x: auto;
  flex-wrap: nowrap;
}

.knowledge-tabs button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
}

.knowledge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 12px;
  align-items: start;
}

.knowledge-map-card,
.knowledge-detail {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.knowledge-metrics {
  margin-bottom: 10px;
}

.knowledge-map {
  width: 100%;
  min-height: 560px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdfe, #f4faf9);
}

.kg-ring {
  fill: none;
  stroke: #dbe8ed;
  stroke-dasharray: 4 8;
}

.kg-ring-label {
  fill: var(--muted);
  font-size: 12px;
}

.kg-center {
  fill: #102331;
  stroke: rgba(13, 148, 136, 0.34);
  stroke-width: 8;
}

.kg-center-title,
.kg-center-sub {
  text-anchor: middle;
  fill: #fff;
  pointer-events: none;
}

.kg-center-title {
  font-weight: 700;
  font-size: 14px;
}

.kg-center-sub {
  font-size: 11px;
  opacity: 0.78;
}

.kg-edge {
  stroke: #a8b8c0;
  stroke-width: 1.2;
  opacity: 0.72;
}

.kg-edge.soft {
  stroke-dasharray: 4 5;
}

.kg-edge.highlight {
  stroke: var(--accent);
  stroke-width: 2.4;
  opacity: 1;
}

.kg-node {
  cursor: pointer;
}

.kg-node circle {
  stroke: #fff;
  stroke-width: 3;
  filter: drop-shadow(0 4px 10px rgba(15, 35, 49, 0.16));
}

.kg-node text {
  fill: #1f303a;
  font-size: 11px;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.kg-node.selected circle,
.kg-node.highlight circle {
  stroke: #facc15;
  stroke-width: 4;
}

.knowledge-detail {
  position: sticky;
  top: 72px;
  display: grid;
  gap: 12px;
}

.knowledge-detail-head span {
  color: var(--muted);
  font-size: 12px;
}

.knowledge-detail-head h2 {
  margin: 6px 0 10px;
  font-size: 20px;
  line-height: 1.3;
}

.knowledge-detail-list {
  margin: 0;
  display: grid;
  gap: 8px;
}

.knowledge-detail-list dt {
  color: var(--muted);
  font-weight: 700;
}

.knowledge-detail-list dd {
  margin: -4px 0 4px;
  line-height: 1.55;
}

.knowledge-empty {
  min-height: 360px;
  display: grid;
  place-items: center;
}

.knowledge-split {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 12px;
  align-items: start;
}

.knowledge-split.wide {
  grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.2fr);
}

.knowledge-entry-form textarea {
  min-height: 132px;
  resize: vertical;
}

.knowledge-entry-form select,
.knowledge-quick-modal select {
  width: 100%;
}

.knowledge-target-field {
  max-width: 260px;
  opacity: 0.78;
}

.knowledge-target-field label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.knowledge-target-field select {
  min-height: 38px;
  border-color: rgba(212, 225, 234, 0.75);
  background: rgba(248, 252, 255, 0.72);
  color: var(--muted);
  font-size: 13px;
}

.knowledge-quick-modal .knowledge-target-field {
  margin-top: -4px;
}

.knowledge-entry-form {
  display: grid;
}

.knowledge-entry-form .field {
  margin: 0;
  padding: 16px 16px 0;
  gap: 8px;
}

.knowledge-entry-form .field label {
  width: fit-content;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.knowledge-entry-form .knowledge-quick-input {
  min-height: 156px;
  border-radius: var(--radius-control);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.92)),
    #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.knowledge-entry-form .panel-actions {
  justify-content: flex-end;
  padding: 12px 16px 16px;
}

.knowledge-quick-modal {
  width: min(620px, 100%);
}

.knowledge-quick-input {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.6;
}

.knowledge-entry-list,
.knowledge-recommend-list,
.knowledge-gap-matrix {
  display: grid;
  gap: 10px;
}

.knowledge-entry-card,
.knowledge-kb-card,
.knowledge-recommend-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.knowledge-entry-card p,
.knowledge-kb-card p,
.knowledge-recommend-card p {
  margin: 0;
  color: #334155;
  line-height: 1.55;
}

.knowledge-card-meta,
.knowledge-score-row {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.knowledge-kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.knowledge-score-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.knowledge-heatmap {
  display: grid;
  gap: 10px;
}

.heat-row,
.gap-row {
  display: grid;
  gap: 6px;
}

.heat-row {
  grid-template-columns: 100px minmax(120px, 1fr) 54px;
  align-items: center;
}

.heat-row span,
.gap-row span {
  color: var(--muted);
  font-size: 12px;
}

.heat-row div,
.gap-bar {
  height: 10px;
  border-radius: 999px;
  background: #edf2f7;
  overflow: hidden;
}

.heat-row i,
.gap-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d9488, #2563eb);
}

.heat-row b,
.gap-row b {
  color: #102331;
}

.knowledge-source-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.knowledge-source-chips span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef7ff;
  color: #1d4ed8;
  font-size: 12px;
}

.gap-row {
  grid-template-columns: minmax(120px, 1fr) 110px minmax(120px, 0.8fr) 54px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.knowledge-manager-shell {
  display: grid;
  gap: 12px;
}

.knowledge-manager-overview .panel-head {
  align-items: center;
  gap: 12px;
}

.knowledge-manager-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.knowledge-manager-actions button {
  border-radius: 999px;
  white-space: nowrap;
}

.knowledge-manager-metrics {
  margin-bottom: 0;
}

.knowledge-manager-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.knowledge-manager-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.76), rgba(255, 255, 255, 0.96)),
    var(--panel-solid);
  box-shadow: var(--shadow-soft);
}

.knowledge-manager-card-head,
.knowledge-manager-row {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.knowledge-manager-card-head span,
.knowledge-manager-row span,
.knowledge-manager-shell .muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.knowledge-manager-card-head strong,
.knowledge-manager-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knowledge-manager-list {
  display: grid;
}

.knowledge-manager-row {
  padding: 9px 0;
  border-top: 1px solid rgba(212, 225, 234, 0.72);
}

.knowledge-manager-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.knowledge-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.knowledge-table-actions button {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .knowledge-layout,
  .knowledge-split,
  .knowledge-split.wide,
  .knowledge-manager-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-detail {
    position: static;
  }
}

.main {
  flex: 1 1 auto;
  min-height: 0;
  padding: 26px 28px 30px;
  overflow-x: hidden;
  overflow-y: auto;
}

.app-embedded-shell {
  min-height: 100vh;
  background: var(--bg);
}

.app-embedded-main {
  min-height: 100vh;
  padding: 0;
  overflow: auto;
}

.topbar.embedded + .main {
  padding-top: 0;
}

.topbar.embedded.previewing + .main {
  padding-top: 0;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.search {
  width: min(360px, 45vw);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.filter-bar select {
  min-width: 118px;
  max-width: 180px;
}

.material-filter-bar {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.material-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.material-view-toggle button {
  min-height: 30px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
}

.material-view-toggle button.active {
  background: var(--accent);
  color: #fff;
}

.material-gallery {
  display: grid;
  gap: 14px;
}

.material-gallery-group {
  display: grid;
  gap: 8px;
}

.material-gallery-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.material-gallery-heading h2 {
  margin: 0;
  font-size: 16px;
}

.material-gallery-heading span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #e8f1f2;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
}

.material-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

.material-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(20, 33, 43, 0.04);
}

.material-card-image {
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #f7fafc;
  cursor: zoom-in;
  overflow: hidden;
}

.material-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.material-card-image.empty-image {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.material-card-body {
  display: grid;
  gap: 4px;
  padding: 9px;
}

.material-card-body strong,
.material-card-body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-card-body strong {
  font-size: 14px;
}

.material-card-body span {
  color: var(--muted);
  font-size: 12px;
}

.material-card-thumbs {
  display: flex;
  gap: 5px;
  margin-top: 2px;
}

.material-card-thumbs button {
  width: 30px;
  height: 30px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
}

.material-card-thumbs img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.material-card-actions {
  display: flex;
  gap: 6px;
  padding: 0 9px 9px;
}

.material-card-actions button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 30px;
}

.material-card-actions button.active,
.material-compare-tray button.active,
.material-insight-actions button.active,
.material-color-point button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.attendance-admin {
  display: grid;
  gap: 14px;
}

.attendance-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.attendance-shortcut-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.attendance-shortcut-group {
  display: grid;
  gap: 8px;
  align-content: start;
}

.attendance-shortcut-group h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.attendance-shortcut-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.attendance-shortcut-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  min-width: 0;
}

.attendance-shortcut-actions .mark {
  flex: 0 0 auto;
  width: 28px;
  height: 22px;
  border-radius: 6px;
  background: #edf2f7;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.attendance-shortcut-actions button span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e8f7f4;
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.attendance-tag.warn {
  background: #fff7d6;
  color: #a16207;
}

.attendance-tag.danger {
  background: #fee2e2;
  color: #b91c1c;
}

.attendance-request-list {
  display: grid;
  gap: 8px;
}

.attendance-request {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.attendance-request strong,
.attendance-request span {
  display: block;
}

.attendance-request span,
.attendance-request p {
  color: var(--muted);
  font-size: 12px;
}

.attendance-request p {
  margin: 4px 0 0;
}

.attendance-request-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.material-science-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  align-items: start;
}

.material-map-main {
  min-width: 0;
}

.material-map-legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.material-map-legend strong {
  font-size: 16px;
}

.material-map-legend span {
  color: var(--muted);
  font-size: 12px;
}

.material-color-map {
  display: grid;
  grid-template-columns: 56px repeat(9, minmax(96px, 1fr));
  gap: 6px;
  min-width: 980px;
  overflow: visible;
}

.material-map-axis {
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef4f6;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.material-map-axis.color-red {
  background: #ffe5e8;
}

.material-map-axis.color-orange {
  background: #ffe9d5;
}

.material-map-axis.color-yellow {
  background: #fff6c7;
}

.material-map-axis.color-green {
  background: #dcfce7;
}

.material-map-axis.color-cyan {
  background: #cffafe;
}

.material-map-axis.color-blue {
  background: #dbeafe;
}

.material-map-axis.color-purple {
  background: #ede9fe;
}

.material-map-axis.color-pink {
  background: #fce7f3;
}

.material-map-axis.color-gray {
  background: #e5e7eb;
}

.lightness-label {
  min-height: 132px;
}

.material-map-cell {
  min-height: 132px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.material-color-point {
  position: relative;
  width: 74px;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--material-color), white 78%), #fff 46%),
    #fff;
  box-shadow: inset 0 3px 0 var(--material-color);
}

.material-color-point.selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.material-color-point > button:first-child {
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.material-color-point img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.image-preview-mini {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  min-height: 22px;
  padding: 0;
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.image-preview-mini:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.material-color-point strong,
.material-color-point span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-color-point strong {
  font-size: 11px;
}

.material-color-point span {
  color: var(--muted);
  font-size: 10px;
}

.material-color-point [data-compare-material] {
  min-height: 24px;
  padding: 0 4px;
  font-size: 10px;
}

.material-phenomena {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.material-phenomena span {
  min-height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--accent-dark);
  font-size: 10px;
  line-height: 18px;
}

.material-insight-panel {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(20, 33, 43, 0.06);
}

.material-insight-cover {
  border-radius: 8px;
  background: color-mix(in srgb, var(--material-color), white 78%);
  overflow: hidden;
  box-shadow: inset 0 4px 0 var(--material-color);
}

.material-insight-cover button {
  width: 100%;
  aspect-ratio: 1.1;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

.material-insight-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.material-insight-body {
  display: grid;
  gap: 6px;
}

.material-insight-body > strong {
  font-size: 16px;
}

.material-insight-body > span {
  color: var(--muted);
  font-size: 12px;
}

.material-insight-actions {
  display: flex;
  gap: 6px;
}

.material-insight-actions button {
  flex: 1 1 0;
  min-width: 0;
}

.material-insight-thumbs,
.material-card-thumbs {
  display: flex;
  gap: 5px;
}

.material-insight-thumbs button {
  width: 42px;
  height: 42px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
}

.material-insight-thumbs img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.material-similar-band {
  display: grid;
  gap: 6px;
}

.material-similar-band h3 {
  margin: 4px 0 0;
  font-size: 14px;
}

.material-similar-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px;
  border-color: color-mix(in srgb, var(--material-color), #94a3b8 45%);
  background: color-mix(in srgb, var(--material-color), white 86%);
}

.material-similar-item img {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
}

.material-similar-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.material-compare-tray {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 34px rgba(20, 33, 43, 0.12);
  backdrop-filter: blur(12px);
}

.material-compare-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.material-compare-head span {
  color: var(--muted);
  font-size: 12px;
}

.material-compare-head button {
  margin-left: auto;
  min-height: 30px;
}

.material-compare-items {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.material-compare-item {
  flex: 0 0 180px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.material-compare-item > button:first-child {
  width: 46px;
  height: 46px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.material-compare-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.material-compare-item strong,
.material-compare-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-compare-item span,
.material-compare-empty {
  color: var(--muted);
  font-size: 12px;
}

.material-compare-empty {
  padding: 8px 2px;
}

.grid {
  display: grid;
  gap: 14px;
}

.stats {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.stat {
  position: relative;
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.78) 0%, rgba(255, 255, 255, 0.94) 36%),
    var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.stat span {
  color: var(--muted);
}

.stat strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
}

.stat::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--aqua), rgba(79, 91, 213, 0.18));
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 14px;
  margin-top: 14px;
}

.page-hero {
  min-height: 132px;
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 80% 22%, rgba(220, 232, 255, 0.5), transparent 34%),
    linear-gradient(135deg, rgba(237, 247, 251, 0.9), rgba(255, 255, 255, 0.95)),
    rgba(255, 255, 255, 0.9);
  padding: 22px;
  box-shadow: var(--shadow);
}

.page-hero-copy {
  min-width: 0;
}

.page-hero-copy span {
  color: var(--muted);
  font-size: 14px;
}

.page-hero-copy h2 {
  margin: 6px 0 0;
  font-size: 30px;
  line-height: 1.16;
}

.page-hero-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.page-hero-kpis div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.86);
  padding: 12px;
  box-shadow: 0 6px 16px rgba(37, 99, 111, 0.035);
}

.page-hero-kpis span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.page-hero-kpis strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-hero-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: -4px;
}

.page-hero-product_publish_workbench {
  display: none;
  min-height: 0;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  padding: 0;
}

.page-hero-product_publish_workbench .page-hero-copy h2 {
  font-size: 26px;
}

.page-hero-product_publish_workbench .page-hero-kpis {
  grid-template-columns: repeat(6, minmax(98px, 1fr));
}

.page-hero-product_publish_workbench .page-hero-kpis div {
  padding: 10px 12px;
}

.page-hero-product_publish_workbench .page-hero-kpis strong {
  margin-top: 4px;
  font-size: 20px;
}

.page-hero + .toolbar,
.page-hero + .ha-shell,
.page-hero + .knowledge-shell,
.page-hero + .notice,
.page-hero + .grid,
.page-hero + .panel,
.page-hero + .role-toolbar,
.page-hero + .print-consumable-shell,
.page-hero + .production-management-shell,
.page-hero + .attendance-admin {
  margin-top: 14px;
}

.page-hero-review_dashboard {
  min-height: 96px;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1.66fr);
  gap: 10px;
  padding: 12px;
}

.page-hero-review_dashboard .page-hero-copy h2 {
  font-size: 24px;
}

.page-hero-review_dashboard .page-hero-kpis {
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  gap: 6px;
}

.page-hero-review_dashboard .page-hero-kpis div {
  padding: 8px 10px;
}

.page-hero-review_dashboard .page-hero-kpis strong {
  margin-top: 3px;
  font-size: 18px;
}

.page-hero-products {
  min-height: 54px;
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1.58fr);
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.page-hero-products .page-hero-copy span {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.page-hero-products .page-hero-copy h2 {
  margin-top: 2px;
  font-size: 19px;
  line-height: 1.05;
}

.page-hero-products .page-hero-kpis {
  grid-template-columns: repeat(5, minmax(88px, 1fr));
  gap: 5px;
}

.page-hero-products .page-hero-kpis div {
  padding: 5px 7px;
  border-radius: 7px;
  box-shadow: none;
}

.page-hero-products .page-hero-kpis span {
  font-size: 10.5px;
  line-height: 1.1;
}

.page-hero-products .page-hero-kpis strong {
  margin-top: 1px;
  font-size: 15px;
  line-height: 1.1;
}

.page-hero-products + .sku-sheet-toolbar {
  margin-top: 6px;
}

.page-hero-home_assistant {
  min-height: 42px;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 6px 10px;
}

.page-hero-home_assistant .page-hero-copy h2 {
  margin-top: 2px;
  font-size: 18px;
}

.page-hero-home_assistant .page-hero-copy span {
  font-size: 12px;
}

.page-hero-home_assistant .page-hero-kpis {
  display: none;
}

.page-hero-home_assistant .page-hero-kpis div {
  padding: 5px 7px;
  border-radius: 8px;
}

.page-hero-home_assistant .page-hero-kpis span {
  font-size: 10px;
}

.page-hero-home_assistant .page-hero-kpis strong {
  margin-top: 2px;
  font-size: 14px;
}

.page-hero-home_assistant .page-hero-actions {
  margin-top: -2px;
}

.page-hero-home_assistant .page-hero-actions button {
  min-height: 28px;
  padding: 0 10px;
}

.page-hero + .production-screen-shell {
  margin-top: 8px;
}

.ha-config-disclosure {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ha-config-disclosure[hidden] {
  display: none !important;
}

.ha-config-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
}

.ha-config-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ha-config-disclosure > summary strong {
  color: var(--text);
  font-size: 13px;
}

.ha-config-disclosure > summary span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.ha-config-disclosure[open] {
  padding-bottom: 10px;
}

.ha-config-disclosure .ha-shell {
  margin: 0;
  padding: 0 10px 10px;
}

.ha-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
}

.ha-intake-panel,
.ha-summary-panel,
.ha-choice-panel,
.ha-scope-panel,
.ha-route-panel {
  min-width: 0;
}

.ha-intake-panel .panel-head span,
.ha-choice-panel .panel-head span,
.ha-scope-panel .panel-head span,
.ha-route-panel .panel-head span {
  color: var(--muted);
  font-size: 12px;
}

.ha-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.ha-form-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ha-form-grid label.wide {
  grid-column: 1 / -1;
}

.ha-form-grid label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.ha-form-grid textarea {
  min-height: 112px;
  resize: vertical;
}

.ha-connect-panel {
  display: grid;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 12px;
  border: 1px solid rgba(20, 160, 152, 0.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.64), rgba(255, 255, 255, 0.92));
}

.ha-connect-panel > div:first-child {
  display: grid;
  gap: 4px;
}

.ha-connect-panel strong {
  color: var(--text);
  font-size: 13px;
}

.ha-connect-panel span,
.ha-connect-panel em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.ha-connect-panel #haServerConfigBadge {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: var(--muted);
  font-weight: 800;
}

.ha-connect-panel #haServerConfigBadge.ready {
  background: rgba(20, 160, 152, 0.14);
  color: #0f766e;
}

.ha-connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ha-connect-actions button {
  min-height: 32px;
}

.ha-connection-result {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
}

.ha-connection-result.pending {
  border-color: rgba(79, 91, 213, 0.28);
  background: rgba(239, 242, 255, 0.78);
}

.ha-connection-result.success {
  border-color: rgba(20, 160, 152, 0.34);
  background: rgba(236, 253, 245, 0.78);
}

.ha-connection-result.error {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 242, 242, 0.82);
}

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

.ha-result-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.86);
}

.ha-result-grid strong,
.ha-result-grid span,
.ha-result-grid em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ha-result-grid span {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-weight: 800;
}

.ha-realtime-panel {
  margin: 0 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}

.ha-realtime-panel .panel-head {
  align-items: start;
}

.ha-realtime-panel .panel-head > div:first-child {
  display: grid;
  gap: 4px;
}

.ha-realtime-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  justify-content: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.ha-realtime-actions button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 9px;
}

.ha-realtime-status {
  display: grid;
  gap: 4px;
  margin: 12px 14px 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbff;
}

.ha-realtime-status strong {
  color: var(--text);
  font-size: 14px;
}

.ha-realtime-status span {
  color: var(--muted);
  font-size: 12px;
}

.ha-realtime-status.streaming {
  border-color: rgba(20, 160, 152, 0.34);
  background: rgba(236, 253, 245, 0.78);
}

.ha-realtime-status.not_configured {
  border-color: rgba(100, 116, 139, 0.24);
  background: rgba(248, 250, 252, 0.9);
}

.ha-realtime-status.reconnecting,
.ha-realtime-status.connecting,
.ha-realtime-status.authenticating,
.ha-realtime-status.subscribing,
.ha-realtime-status.snapshot_loading {
  border-color: rgba(79, 91, 213, 0.28);
  background: rgba(239, 242, 255, 0.78);
}

.ha-realtime-status.auth_invalid,
.ha-realtime-status.dependency_missing {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 242, 242, 0.82);
}

.ha-realtime-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px;
}

.ha-realtime-kpis div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.ha-realtime-kpis span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.ha-realtime-kpis strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.ha-realtime-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 14px 14px;
}

.ha-realtime-grid section {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.86);
}

.ha-realtime-grid h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 13px;
}

.ha-realtime-bars,
.ha-realtime-list {
  display: grid;
  gap: 8px;
}

.ha-realtime-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  overflow: hidden;
}

.ha-realtime-bar span,
.ha-realtime-bar strong {
  position: relative;
  z-index: 1;
}

.ha-realtime-bar span {
  min-width: 0;
  overflow: hidden;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ha-realtime-bar strong {
  color: var(--text);
  font-size: 12px;
}

.ha-realtime-bar em {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(20, 160, 152, 0.18), rgba(79, 91, 213, 0.1));
}

.ha-realtime-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
}

.ha-realtime-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
}

.ha-realtime-row span {
  color: var(--accent-dark);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 800;
}

.ha-realtime-row em {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.ha-realtime-row .ha-realtime-inline-action {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
}

.ha-realtime-row .ha-realtime-inline-action.danger {
  border-color: rgba(190, 18, 60, 0.28);
  color: #be123c;
  background: #fff1f2;
}

.ha-realtime-empty {
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.production-screen-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px;
  align-items: start;
  height: auto;
  min-height: 0;
  margin-bottom: 8px;
  overflow: visible;
}

.production-screen-shell > .panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.production-screen-shell .panel-head {
  min-height: 30px;
  padding: 5px 8px;
}

.production-screen-shell .panel-head h2 {
  font-size: 12px;
}

.production-screen-shell .panel-head span {
  font-size: 10px;
}

.production-screen-main {
  grid-column: 1 / 2;
  grid-row: 1;
  overflow: visible;
}

.production-screen-main > .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  flex: 0 0 auto;
  gap: 5px;
}

.production-screen-main > .panel-head > div:first-child {
  min-width: 0;
}

.production-screen-main > .panel-head h2,
.production-screen-main > .panel-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-screen-main .ha-realtime-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  overflow: visible !important;
  max-width: none;
  transform: none;
}

.production-screen-main .ha-realtime-actions button {
  flex: 0 1 auto;
  min-width: 66px;
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.production-screen-main .ha-realtime-actions button.primary {
  min-width: 88px;
}

.production-screen-time-filters {
  display: grid;
  grid-template-columns: 94px 148px 148px;
  align-items: end;
  justify-content: start;
  gap: 5px 6px;
}

.production-screen-time-filters label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.production-screen-time-filters span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.production-screen-time-filters select,
.production-screen-time-filters input {
  width: 100%;
  min-width: 0;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 11px;
}

.production-screen-orders-panel {
  grid-column: 1 / 2;
  grid-row: 2;
}

.production-screen-side-panel {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  max-height: clamp(360px, calc(100vh - 130px), 760px);
  overflow: hidden;
}

.production-screen-handoff-panel {
  margin-top: 8px;
  overflow: hidden;
}

.production-screen-handoff-panel > summary.panel-head {
  cursor: pointer;
  list-style: none;
}

.production-screen-handoff-panel > summary.panel-head::-webkit-details-marker {
  display: none;
}

.production-screen-handoff-panel > summary.panel-head > strong {
  flex: 0 0 auto;
  color: var(--accent-dark);
  font-size: 12px;
}

.production-screen-handoff-panel[open] > summary.panel-head > strong {
  color: var(--muted);
}

.production-screen-handoff-tools {
  display: flex;
  justify-content: flex-end;
  padding: 5px 8px 0;
}

.production-screen-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 4px;
  padding: 5px 8px;
}

.production-screen-kpis div {
  gap: 2px;
  min-height: 36px;
  padding: 4px 6px;
  border-radius: 7px;
}

.production-screen-kpis span {
  font-size: 9px;
}

.production-screen-kpis strong {
  font-size: 15px;
}

.production-screen-progress {
  display: grid;
  flex: 0 0 auto;
  gap: 4px;
  padding: 0 8px 5px;
}

.production-screen-progress > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.production-screen-progress strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.production-screen-flow {
  display: grid;
  flex: 0 0 48px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(96px, 1fr);
  grid-auto-rows: 40px;
  grid-template-columns: none;
  gap: 4px;
  height: 48px;
  padding: 0 8px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: auto;
  scrollbar-gutter: stable;
}

.production-screen-flow-item {
  position: relative;
  display: grid;
  gap: 1px;
  min-width: 0;
  min-height: 0;
  height: 40px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(248, 251, 255, 0.9);
  overflow: hidden;
}

.production-screen-flow-item span,
.production-screen-flow-item strong,
.production-screen-flow-item em {
  position: relative;
  z-index: 1;
}

.production-screen-flow-item span {
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 900;
}

.production-screen-flow-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 10px;
  line-height: 1.1;
}

.production-screen-flow-item em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.production-screen-flow-item i {
  position: absolute;
  inset: auto auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(20, 160, 152, 0.85), rgba(79, 91, 213, 0.75));
}

.production-screen-compact-section {
  display: grid;
  gap: 4px;
  margin: 0 8px 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(248, 251, 255, 0.86);
}

.production-screen-compact-section h3,
.production-screen-record-group h3 {
  margin: 0;
  color: var(--text);
  font-size: 11px;
}

.production-screen-orders-panel {
  align-self: stretch;
  min-height: 0;
}

.production-screen-order-list {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 8px;
  scrollbar-gutter: stable;
}

.production-screen-order-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: clamp(180px, calc(100vh - 430px), 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.production-screen-order {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 96px;
  max-height: 112px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
}

.production-screen-order > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.production-screen-order strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-screen-order p {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #334155;
  font-size: 10px;
  line-height: 1.24;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.production-screen-order em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.production-screen-order-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.production-screen-order-metrics span {
  min-width: 0;
  padding: 3px 4px;
  border-radius: 5px;
  background: #f8fbff;
  color: #475569;
  font-size: 9px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-screen-side-grid,
.production-screen-handoff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
}

.production-screen-handoff-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.production-screen-side-grid section,
.production-screen-handoff-grid section {
  min-width: 0;
  max-height: 320px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(248, 251, 255, 0.86);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.production-screen-side-grid h3,
.production-screen-handoff-grid h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 11px;
}

.production-screen-record-list {
  display: grid;
  align-content: start;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: clamp(360px, calc(100vh - 170px), 700px);
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.production-screen-record-group {
  display: grid;
  gap: 5px;
  min-width: 0;
  align-content: start;
  max-height: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(248, 251, 255, 0.86);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.production-screen-record-group h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.production-screen-record-group h3 span {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef6ff;
  color: #31547a;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.production-screen-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 2px 6px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.production-screen-record strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-screen-record span {
  color: var(--accent-dark);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 900;
}

.production-screen-record.failed span {
  color: #be123c;
}

.production-screen-record em {
  grid-column: 1 / 3;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-screen-record .ha-realtime-inline-action {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  min-height: 22px;
  padding: 1px 7px;
  border-radius: 6px;
  border-color: var(--line);
  background: #f8fbff;
  color: #334155;
  font-size: 10px;
}

.production-screen-decision-panel {
  margin-top: 8px;
  overflow: visible;
}

.production-screen-decision-panel > summary {
  cursor: pointer;
  list-style: none;
}

.production-screen-decision-panel > summary::-webkit-details-marker {
  display: none;
}

.production-screen-decision-panel > summary > strong {
  color: var(--muted);
  font-size: 11px;
}

.production-screen-decision-db {
  padding: 7px 8px 8px;
}

.production-screen-decision-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
}

.production-screen-decision-scope strong {
  color: var(--text);
}

.production-screen-decision-filters {
  display: grid;
  grid-template-columns: 108px 108px minmax(220px, 360px) auto auto;
  gap: 5px 6px;
  align-items: end;
  justify-content: start;
  margin-bottom: 5px;
}

.production-screen-decision-filters label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.production-screen-decision-filters span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.production-screen-decision-filters select,
.production-screen-decision-filters input {
  width: 100%;
  min-width: 0;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 11px;
}

.production-screen-decision-filters > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fbff;
  color: #334155;
  font-size: 11px;
  white-space: nowrap;
}

.production-screen-decision-filters button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 999px;
}

.production-screen-decision-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
}

.production-screen-decision-pager > div {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.production-screen-decision-pager strong {
  min-width: 58px;
  color: #334155;
  text-align: center;
  white-space: nowrap;
}

.production-screen-decision-pager button {
  min-height: 25px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 999px;
}

.production-screen-decision-pager button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.production-screen-decision-table-wrap {
  max-height: clamp(260px, calc(100vh - 260px), 520px);
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.production-screen-decision-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  font-size: 10px;
}

.production-screen-decision-table th,
.production-screen-decision-table td {
  padding: 5px 7px;
  border-bottom: 1px solid #e2edf7;
  color: #475569;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.production-screen-decision-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fbff;
  color: #1f3450;
  font-weight: 900;
}

.production-screen-decision-table td:nth-child(5),
.production-screen-decision-table td:nth-child(10) {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.production-screen-decision-table strong {
  color: var(--text);
}

.production-screen-decision-table span {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef6ff;
  color: #31547a;
  font-weight: 900;
}

.production-screen-decision-table tr.failed span {
  background: #fff1f2;
  color: #be123c;
}

.production-screen-decision-table tr.non_work_order span {
  background: #ecfeff;
  color: #0f766e;
}

.production-screen-decision-table tr.counted span {
  background: #f0fdf4;
  color: #15803d;
}

.production-screen-decision-table tr.ignored {
  opacity: 0.68;
}

.production-screen-decision-table tr.ignored span {
  background: #f1f5f9;
  color: #64748b;
}

.ha-summary-panel {
  align-self: start;
}

.ha-summary-panel .panel-head button {
  min-height: 30px;
  padding: 0 10px;
}

.ha-summary-score {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(226, 248, 238, 0.7), rgba(255, 255, 255, 0.9));
}

.ha-summary-score strong {
  font-size: 34px;
  line-height: 1;
}

.ha-summary-score span {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
}

.ha-summary-lines {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.ha-summary-lines div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ha-summary-lines span {
  color: var(--muted);
  font-size: 12px;
}

.ha-summary-lines strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ha-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
}

.ha-summary-tags span,
.ha-summary-tags em {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: #285a65;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.ha-summary-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.58);
}

.ha-detail-grid,
.ha-ops-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.ha-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ha-ops-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: start;
}

.ha-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.ha-check {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 11px 12px 11px 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.ha-check.selected {
  border-color: rgba(20, 160, 152, 0.42);
  background: linear-gradient(135deg, rgba(226, 248, 238, 0.74), rgba(255, 255, 255, 0.92));
}

.ha-check input {
  position: absolute;
  top: 13px;
  left: 12px;
}

.ha-check span {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.ha-check em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.ha-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.ha-scope-card {
  display: grid;
  gap: 7px;
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.ha-scope-card.active {
  border-color: rgba(79, 91, 213, 0.34);
  background: linear-gradient(180deg, rgba(223, 228, 255, 0.48), rgba(255, 255, 255, 0.92));
}

.ha-scope-card span {
  width: 34px;
  padding: 3px 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.ha-scope-card strong {
  color: var(--text);
  font-size: 14px;
}

.ha-scope-card p {
  margin: 0;
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
}

.ha-scope-card em {
  margin-top: auto;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}

.ha-api-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.ha-api-list div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.ha-api-list span {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
}

.ha-api-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.ha-api-list em {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ha-timeline {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.ha-timeline div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.ha-timeline div.active {
  border-color: rgba(20, 160, 152, 0.38);
  background: var(--aqua-soft);
}

.ha-timeline span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 24px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ha-timeline strong {
  color: var(--text);
  font-size: 13px;
}

.ha-summary-copy {
  padding: 0 14px 14px;
}

.ha-summary-copy pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
  color: #334155;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.eyebrow {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.priority-紧急 {
  background: #fdeeee;
  color: var(--danger);
}

.priority-高 {
  background: #fff4db;
  color: #9a5b00;
}

.priority-历史 {
  background: #eef1f5;
  color: var(--muted);
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
}

.compact-empty {
  margin: 12px;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 14px;
  margin-top: 14px;
}

.panel {
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.72) 0%, rgba(255, 255, 255, 0.94) 36%),
    var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.panel-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.56);
}

.panel-head h2 {
  margin: 0;
  font-size: 15px;
}

.sidebar-nav-manager {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 14px;
}

.sidebar-nav-preview-panel,
.sidebar-nav-editor-panel {
  min-width: 0;
}

.sidebar-nav-preview-panel .panel-head span,
.sidebar-nav-savebar span {
  color: var(--muted);
  font-size: 12px;
}

.sidebar-nav-preview {
  height: min(620px, calc(100vh - 260px));
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(219, 228, 245, 0.26)),
    #edf4fa;
}

.preview-brand {
  flex-shrink: 0;
}

.preview-nav {
  padding: 8px 10px 12px;
  overflow: auto;
}

.sidebar-nav-editor-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.sidebar-nav-edit-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.sidebar-nav-edit-group-head {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-tint);
}

.sidebar-nav-title-field {
  display: grid;
  gap: 5px;
}

.sidebar-nav-title-field label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sidebar-nav-move-actions,
.sidebar-nav-module-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-nav-move-actions .icon,
.sidebar-nav-module-row .icon {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
}

.sidebar-nav-module-list {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.sidebar-nav-module-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: 34px minmax(150px, 1fr) minmax(140px, 190px) 28px 28px;
  gap: 7px;
}

.sidebar-nav-module-row .mark {
  width: 32px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(148, 163, 184, 0.16);
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.sidebar-nav-edit-group input,
.sidebar-nav-edit-group select {
  min-height: 30px;
  width: 100%;
}

.sidebar-nav-empty-group {
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
}

.sidebar-nav-savebar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.status-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.security-grid {
  margin-top: 14px;
}

.security-bars {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.security-bars div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--panel-tint);
}

.security-bars span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.security-bars strong {
  color: var(--text);
}

.security-severity {
  display: inline-flex;
  min-width: 36px;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef7f6;
  color: var(--accent-dark);
  font-size: 12px;
}

.security-severity.medium {
  background: #fff7e6;
  color: #9a5a12;
}

.security-severity.high,
.security-severity.critical {
  background: #fdeeee;
  color: var(--danger);
}

.status-pill {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 12px;
  background: var(--panel-tint);
}

.status-pill span {
  display: block;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill strong {
  display: block;
  font-size: 22px;
  margin-top: 6px;
}

.table-wrap {
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.72), rgba(255, 255, 255, 0.94) 36%),
    var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: auto;
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 7px 9px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  line-height: 1.25;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(244, 249, 251, 0.96);
  color: #475569;
  font-size: 12px;
  backdrop-filter: blur(12px);
}

td {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

tr:hover td {
  background: #f6fbfd;
}

.skc-parent-row td {
  background: rgba(247, 250, 252, 0.72);
}

.skc-group-table {
  min-width: 760px;
  table-layout: fixed;
}

.skc-group-table th:nth-child(1),
.skc-group-table td:nth-child(1) {
  width: 44px;
}

.skc-group-table th:nth-child(2),
.skc-group-table td:nth-child(2) {
  width: 130px;
}

.skc-group-table th:nth-child(4),
.skc-group-table td:nth-child(4) {
  width: 78px;
}

.skc-group-table th:nth-child(7),
.skc-group-table td:nth-child(7) {
  width: 138px;
}

.skc-group-table th:nth-child(8),
.skc-group-table td:nth-child(8) {
  width: 132px;
}

.skc-child-row > td {
  padding: 0;
  background: #fff;
  max-width: 0;
  overflow: hidden;
}

.nested-sku-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.nested-sku-table {
  min-width: 1120px;
  border-left: 42px solid #f3f7f9;
}

.nested-sku-table th {
  position: static;
}

.compact-empty {
  padding: 14px 18px 14px 60px;
}

.product-workbench-toolbar {
  align-items: center;
  min-height: 30px;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: nowrap;
}

.product-entry-tabs {
  min-height: 26px;
  padding: 2px;
}

.product-entry-tabs button {
  min-height: 22px;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
}

.skc-workbench-table {
  min-width: 1040px;
  table-layout: fixed;
}

.skc-workbench-table th:nth-child(1),
.skc-workbench-table td:nth-child(1) {
  width: 240px;
}

.skc-workbench-table th:nth-child(2),
.skc-workbench-table td:nth-child(2) {
  width: 180px;
}

.skc-workbench-table th:nth-child(3),
.skc-workbench-table td:nth-child(3) {
  width: 92px;
}

.skc-workbench-table th:nth-child(4),
.skc-workbench-table td:nth-child(4) {
  width: 178px;
}

.skc-workbench-table th:nth-child(5),
.skc-workbench-table td:nth-child(5),
.skc-workbench-table th:nth-child(6),
.skc-workbench-table td:nth-child(6) {
  width: 128px;
}

.skc-workbench-table th:nth-child(7),
.skc-workbench-table td:nth-child(7) {
  width: 180px;
}

.skc-workbench-table .skc-child-row > td {
  max-width: none;
  overflow: visible;
}

.skc-title-cell,
.sku-name-cell,
.sku-mini-stack,
.status-stack,
.production-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skc-title-cell strong,
.sku-name-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skc-title-cell span,
.sku-name-cell span,
.subtle-code,
.muted-inline,
.sku-mini-stack span,
.production-summary span {
  color: var(--muted);
  font-size: 12px;
}

.platform-chip-list,
.material-color-rail,
.sku-platform-links {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  min-width: 0;
}

.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 19px;
  max-width: 100%;
  padding: 1px 5px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  line-height: 1.1;
}

.platform-chip strong,
.platform-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-chip em {
  font-style: normal;
  color: #0f766e;
  font-weight: 800;
}

.platform-chip.more,
.material-overflow {
  color: #475569;
  background: #eef2ff;
}

.ecommerce-platform-shell {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.page-hero-platforms {
  min-height: 58px;
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1.58fr);
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.page-hero-platforms .page-hero-copy span {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.page-hero-platforms .page-hero-copy h2 {
  margin-top: 2px;
  font-size: 20px;
  line-height: 1.08;
}

.page-hero-platforms .page-hero-kpis {
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 6px;
}

.page-hero-platforms .page-hero-kpis div {
  padding: 6px 8px;
  border-radius: 7px;
  box-shadow: none;
}

.page-hero-platforms .page-hero-kpis span {
  font-size: 10.5px;
  line-height: 1.1;
}

.page-hero-platforms .page-hero-kpis strong {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.05;
}

.ecommerce-control-panel {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.platform-sync-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 6px;
  margin: 0;
}

.platform-sync-cards article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "note value";
  align-items: center;
  column-gap: 8px;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-left: 3px solid #0f766e;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

.platform-sync-cards span,
.platform-sync-cards small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-sync-cards span {
  grid-area: label;
  font-weight: 800;
}

.platform-sync-cards small {
  grid-area: note;
}

.platform-sync-cards strong {
  grid-area: value;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.model-management-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 0;
}

.model-management-cards article {
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #2563eb;
  border-radius: 8px;
  background: #fff;
}

.model-management-cards article:nth-child(2) {
  border-left-color: #059669;
}

.model-management-cards article:nth-child(3),
.model-management-cards article:nth-child(5) {
  border-left-color: #dc2626;
}

.model-management-cards span,
.model-management-cards small {
  display: block;
  color: #64748b;
  font-size: 11px;
  line-height: 1.08;
  font-weight: 700;
}

.model-management-cards strong {
  display: block;
  margin: 1px 0;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.05;
}

.modal-note {
  margin: 0 0 10px;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.form-error {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 12px;
  font-weight: 800;
}

.model-management-table {
  min-width: 1080px;
  table-layout: fixed;
}

.model-col-identity {
  min-width: 290px;
}

.model-col-file {
  min-width: 280px;
}

.model-col-sku-summary {
  min-width: 210px;
}

.model-col-specs {
  min-width: 160px;
}

.model-col-status {
  min-width: 70px;
}

.model-management-table th,
.model-management-table td {
  padding: 3px 5px;
}

.model-identity-cell,
.model-file-cell,
.model-production-cell,
.model-product-link-cell,
.model-sku-summary-cell,
.model-spec-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.model-identity-with-preview {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.model-preview-cell,
.model-preview-placeholder {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  background: #f8fafc;
}

.model-preview-cell {
  padding: 0;
  cursor: zoom-in;
}

.model-preview-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.model-preview-placeholder {
  background: linear-gradient(135deg, #e0f2fe 0%, #eef2ff 52%, #f8fafc 100%);
  color: #1e3a8a;
}

.model-preview-placeholder strong {
  font-size: 11px;
  line-height: 1;
}

.model-preview-placeholder span,
.sku-image-placeholder span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.model-identity-cell strong,
.model-file-cell strong,
.model-production-cell strong {
  color: #0f172a;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.25;
}

.model-identity-cell span,
.model-file-cell span,
.model-production-cell span,
.model-production-cell small,
.model-product-link-cell span {
  color: #334155;
  font-size: 11px;
}

.model-product-link-cell button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
}

.model-product-link-cell button strong {
  color: #2563eb;
}

.model-management-table .model-product-link-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.model-management-table .model-product-link-cell button {
  flex: 0 0 auto;
  line-height: 1.15;
}

.model-management-table .model-product-link-cell span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-management-table .sku-sheet-actions {
  flex-wrap: nowrap;
  gap: 1px;
}

.model-management-table .sku-sheet-actions .text-icon {
  width: auto;
  min-width: 0;
  min-height: 18px;
  padding: 1px 3px;
  font-size: 10px;
  line-height: 1;
}

.model-chip-list,
.model-color-list,
.model-pack-list,
.model-issue-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
}

.model-sku-summary-cell,
.model-spec-cell {
  overflow: hidden;
}

.model-spec-cell .model-color-list,
.model-spec-cell .model-pack-list,
.model-sku-summary-cell .model-chip-list {
  min-height: 17px;
}

.model-chip-list span,
.model-chip-list em,
.model-issue-list span {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 0 5px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.model-analysis-list {
  display: grid;
  gap: 10px;
}

.model-analysis-block {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dbeafe;
  border-left: 4px solid #2563eb;
  border-radius: 8px;
  background: #f8fbff;
}

.model-analysis-block > strong {
  color: #0f172a;
  font-size: 13px;
}

.model-analysis-block > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.model-analysis-block span,
.model-analysis-block article {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #fff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 700;
}

.model-analysis-conflict {
  border-color: #fed7aa;
  border-left-color: #f97316;
  background: #fff7ed;
}

.model-analysis-conflict article {
  display: grid;
  justify-items: start;
  border-color: #fed7aa;
  border-radius: 8px;
  color: #9a3412;
}

.model-analysis-conflict article em {
  color: #c2410c;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.model-color-list span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 19px;
  padding: 1px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}

.model-color-list em {
  color: #64748b;
  font-style: normal;
  font-weight: 800;
}

.model-management-row.status-missing_model td:first-child {
  box-shadow: inset 4px 0 0 #dc2626;
}

.model-management-row.status-model_field_conflict td:first-child {
  box-shadow: inset 4px 0 0 #f59e0b;
}

.model-sku-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.model-sku-matrix article {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.model-sku-matrix strong {
  overflow-wrap: anywhere;
}

.model-sku-matrix span,
.model-sku-matrix em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.model-drawer-actions,
.skc-model-upload {
  margin-top: 10px;
}

.ecommerce-platform-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ecommerce-platform-toolbar .toolbar-left {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 58px;
  gap: 6px;
  min-width: 0;
}

.ecommerce-platform-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.ecommerce-platform-toolbar .search {
  min-height: 32px;
  height: 32px;
}

.ecommerce-platform-toolbar button,
.ecommerce-platform-toolbar select {
  min-height: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: 7px;
  white-space: nowrap;
}

.ecommerce-platform-toolbar select {
  width: auto;
  max-width: 132px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
}

.platform-config-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0;
  background: transparent;
}

.platform-config-head,
.platform-config-list,
.platform-config-list article {
  display: flex;
  align-items: center;
  gap: 8px;
}

.platform-config-head {
  min-width: 118px;
  justify-content: flex-start;
}

.platform-config-head span {
  color: var(--muted);
  font-size: 12px;
  margin-right: 0;
}

.platform-config-head button {
  display: none;
}

.platform-config-list {
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  padding: 6px 1px;
  scrollbar-width: thin;
}

.platform-config-list article {
  flex: 0 0 206px;
  max-width: 206px;
  min-height: 38px;
  padding: 5px 7px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  background: #fff;
}

.platform-config-list article > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.platform-config-list strong,
.platform-config-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-config-list span {
  color: var(--muted);
  font-size: 11px;
}

.ecommerce-platform-table-wrap {
  margin-top: 0;
  border-radius: 0 0 8px 8px;
}

.ecommerce-table-panel {
  display: grid;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.ecommerce-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 6px 9px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(90deg, rgba(240, 249, 255, 0.88), rgba(248, 250, 252, 0.92));
}

.ecommerce-table-head div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ecommerce-table-head strong {
  color: #0f172a;
  font-size: 13px;
}

.ecommerce-table-head span,
.ecommerce-table-head em {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecommerce-platform-table-wrap.sku-sheet-wrap {
  max-height: calc(100vh - 270px);
  border: 0;
  box-shadow: none;
}

.sku-sheet-table.ecommerce-platform-table {
  width: max-content;
  min-width: max-content;
}

.ecommerce-platform-table th,
.ecommerce-platform-table td {
  height: 54px;
  padding: 2px 4px;
}

.ecommerce-platform-table .sku-sheet-group-row th {
  height: 18px;
  padding: 1px 4px;
}

.ecommerce-platform-table .sku-sheet-column-row th {
  top: 18px;
  height: 28px;
}

.ecommerce-platform-table th:nth-child(1),
.ecommerce-platform-table td:nth-child(1) {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  text-align: center;
}

.ecommerce-platform-table th:nth-child(2),
.ecommerce-platform-table td:nth-child(2) {
  left: 50px;
  width: clamp(172px, 9vw, 182px);
  min-width: 172px;
  max-width: 182px;
}

.ecommerce-platform-table .name-col {
  width: clamp(88px, 6vw, 108px);
  min-width: 88px;
  max-width: 108px;
}

.ecommerce-platform-table .status-col {
  width: clamp(66px, 4.5vw, 82px);
  min-width: 66px;
  max-width: 82px;
}

.ecommerce-platform-table .owner-col {
  width: clamp(56px, 4vw, 68px);
  min-width: 56px;
  max-width: 68px;
}

.ecommerce-platform-table .color-col {
  width: clamp(112px, 7vw, 132px);
  min-width: 112px;
  max-width: 132px;
}

.ecommerce-platform-table .number-col {
  width: clamp(48px, 3.5vw, 60px);
  min-width: 48px;
  max-width: 60px;
}

.ecommerce-platform-table .title-col {
  width: clamp(138px, 10vw, 176px);
  min-width: 138px;
  max-width: 176px;
}

.ecommerce-platform-table .platform-col {
  width: clamp(118px, 8vw, 142px);
  min-width: 118px;
  max-width: 142px;
}

.ecommerce-platform-table .route-col,
.ecommerce-platform-table .warehouse-col {
  width: clamp(94px, 6vw, 114px);
  min-width: 94px;
  max-width: 114px;
}

.ecommerce-platform-table .note-col,
.ecommerce-platform-table .actions-col {
  width: clamp(78px, 5vw, 96px);
  min-width: 78px;
  max-width: 96px;
}

.sku-sheet-table.ecommerce-platform-table th:nth-child(1),
.sku-sheet-table.ecommerce-platform-table td:nth-child(1),
.sku-sheet-table.ecommerce-platform-table .image-col {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  text-align: center;
}

.sku-sheet-table.ecommerce-platform-table th:nth-child(2),
.sku-sheet-table.ecommerce-platform-table td:nth-child(2),
.sku-sheet-table.ecommerce-platform-table .sku-main-col {
  left: 50px;
  width: 182px;
  min-width: 182px;
  max-width: 182px;
}

.sku-sheet-table.ecommerce-platform-table .name-col {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
}

.sku-sheet-table.ecommerce-platform-table .status-col {
  width: 66px;
  min-width: 66px;
  max-width: 66px;
}

.sku-sheet-table.ecommerce-platform-table .owner-col {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
}

.sku-sheet-table.ecommerce-platform-table .color-col {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
}

.sku-sheet-table.ecommerce-platform-table .number-col {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

.sku-sheet-table.ecommerce-platform-table .title-col {
  width: 138px;
  min-width: 138px;
  max-width: 138px;
}

.sku-sheet-table.ecommerce-platform-table .platform-col {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
}

.sku-sheet-table.ecommerce-platform-table .route-col,
.sku-sheet-table.ecommerce-platform-table .warehouse-col {
  width: 94px;
  min-width: 94px;
  max-width: 94px;
}

.sku-sheet-table.ecommerce-platform-table .stock-request-col {
  width: 74px;
  min-width: 74px;
  max-width: 74px;
}

.sku-sheet-table.ecommerce-platform-table .stock-delivery-col {
  width: 102px;
  min-width: 102px;
  max-width: 102px;
}

.sku-sheet-table.ecommerce-platform-table .sku-todo-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

.sku-sheet-table.ecommerce-platform-table .workflow-col {
  width: 132px;
  min-width: 132px;
  max-width: 132px;
}

.sku-sheet-table.ecommerce-platform-table th.workflow-col,
.sku-sheet-table.ecommerce-platform-table td.workflow-col {
  position: sticky;
  right: 0;
  z-index: 6;
  background: linear-gradient(90deg, rgba(248, 250, 252, 0.96), #ffffff 34%);
  box-shadow: -8px 0 14px rgba(15, 23, 42, 0.08), -1px 0 0 rgba(148, 163, 184, 0.32);
}

.sku-sheet-table.ecommerce-platform-table th.workflow-col {
  z-index: 10;
  background: linear-gradient(90deg, #eef6ff, #ffffff);
}

.ecommerce-platform-table .sku-sheet-group-row th:last-child {
  position: sticky;
  right: 0;
  z-index: 11;
  background: linear-gradient(90deg, #e0f2fe, #f8fafc);
  box-shadow: -8px 0 14px rgba(15, 23, 42, 0.08);
}

.platform-product-image,
.platform-product-empty-image {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: #f8fafc;
  overflow: hidden;
}

.platform-product-image {
  display: inline-flex;
  padding: 0;
  cursor: zoom-in;
}

.platform-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-product-empty-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.platform-product-sku,
.platform-product-title,
.platform-product-platform,
.platform-product-link {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.platform-product-sku {
  align-content: center;
  justify-content: center;
  width: 100%;
}

.platform-product-sku strong,
.platform-product-title strong,
.platform-product-platform strong,
.platform-product-link strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-product-sku span,
.platform-product-sku small,
.platform-product-title span,
.platform-product-platform span,
.platform-product-platform small,
.platform-product-link span,
.platform-product-link small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-product-detail-link {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.platform-product-detail-link strong {
  display: block;
}

.platform-product-detail-link:hover strong,
.platform-product-detail-link:focus-visible strong {
  color: #2563eb;
  text-decoration: underline;
}

.sku-workflow-cell {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.sku-workflow-status-line {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.sku-workflow-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 62px;
  min-height: 18px;
  padding: 1px 5px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.sku-workflow-pill {
  cursor: pointer;
}

button.sku-workflow-pill:disabled {
  cursor: default;
  opacity: 1;
}

.sku-workflow-pill.has-task {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.sku-workflow-pill.has-stock {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

.sku-workflow-pill.is-empty {
  background: #f8fafc;
  color: #94a3b8;
}

.sku-stock-panel-btn {
  width: 100%;
  min-height: 24px;
  padding: 2px 6px;
  border-color: #86efac;
  border-radius: 8px;
  background: linear-gradient(180deg, #dcfce7, #bbf7d0);
  color: #065f46;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.sku-stock-delivery-select {
  width: 94px;
  min-width: 0;
  height: 28px;
  padding: 2px 20px 2px 8px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 999px;
  background-color: rgba(248, 250, 252, 0.94);
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
}

.sku-todo-input {
  width: 92px;
  min-width: 0;
  height: 28px;
  padding: 3px 7px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  font-size: 11px;
}

.sku-todo-input::placeholder {
  color: #94a3b8;
}

.ecommerce-stock-modal {
  width: min(680px, calc(100vw - 28px));
}

.ecommerce-stock-modal .modal-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ecommerce-stock-modal .modal-head span {
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecommerce-stock-body {
  display: grid;
  gap: 12px;
}

.ecommerce-stock-summary {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(240, 249, 255, 0.86), rgba(255, 255, 255, 0.92));
}

.ecommerce-stock-summary > div {
  min-width: 0;
}

.ecommerce-stock-summary strong,
.ecommerce-stock-summary span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecommerce-stock-summary strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.ecommerce-stock-summary span {
  color: #64748b;
  font-size: 12px;
}

.ecommerce-stock-summary em {
  padding: 5px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.ecommerce-stock-fields {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(170px, 0.9fr);
  gap: 10px;
}

.ecommerce-stock-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.ecommerce-stock-fields input,
.ecommerce-stock-fields select,
.ecommerce-stock-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-weight: 700;
}

.ecommerce-stock-fields input,
.ecommerce-stock-fields select {
  height: 34px;
  padding: 5px 9px;
}

.ecommerce-stock-fields textarea {
  resize: vertical;
  min-height: 92px;
  padding: 8px 9px;
}

.ecommerce-stock-note-field {
  grid-column: 1 / -1;
}

.ecommerce-stock-hint {
  padding: 8px 10px;
  border-left: 3px solid #0ea5e9;
  border-radius: 6px;
  background: #f0f9ff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.platform-product-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.platform-product-pager div {
  display: flex;
  gap: 8px;
}

.temu-product-bitable {
  display: grid;
  min-height: calc(100vh - 104px);
  border: 1px solid #dfe5eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.temu-product-bitable-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 12px 18px;
  border-bottom: 1px solid #e5e9ef;
  background: #fff;
}

.temu-product-bitable-titlebar h1 {
  margin: 2px 0 0;
  color: #1f2937;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}

.temu-product-bitable-titlebar span {
  color: #7b8794;
  font-size: 12px;
}

.temu-product-bitable-stats {
  display: grid;
  grid-template-columns: repeat(3, auto auto);
  gap: 4px 8px;
  align-items: baseline;
  color: #7b8794;
  font-size: 12px;
}

.temu-product-bitable-stats strong {
  color: #1f2937;
  font-size: 14px;
  font-weight: 800;
}

.temu-product-view-tabs {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 42px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 16px;
  border-bottom: 1px solid #e5e9ef;
  background: #f7f8fa;
}

.temu-product-view-tabs button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 7px 7px 0 0;
  background: transparent;
  color: #5b6472;
  font-size: 13px;
  font-weight: 700;
}

.temu-product-view-tabs button.active {
  background: #fff;
  color: #2563eb;
  box-shadow: inset 0 -2px 0 #2563eb;
}

.temu-product-view-tabs button span {
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-view-tabs button small {
  display: block;
  max-width: 148px;
  overflow: hidden;
  color: #8b96a5;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-tab-add {
  width: 34px;
  justify-content: center;
  color: #8b96a5;
}

.temu-product-bitable-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e9ef;
  background: #fff;
}

.temu-product-bitable-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.temu-product-bitable-actions button,
.temu-product-column-picker summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #4b5563;
  font-size: 12px;
  font-weight: 700;
}

.temu-product-bitable-actions button:hover,
.temu-product-column-picker summary:hover {
  border-color: #d8e0e8;
  background: #f5f7fa;
}

.temu-product-bitable-actions button.primary,
.temu-product-bitable-actions button.active {
  border-color: rgba(37, 99, 235, 0.18);
  background: #eff6ff;
  color: #2563eb;
}

.temu-product-bitable-actions .temu-product-ai-add-field-btn {
  border-color: rgba(37, 99, 235, 0.28);
  background: #2563eb;
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
}

.temu-product-bitable-actions .temu-product-ai-add-field-btn:hover {
  border-color: #1d4ed8;
  background: #1d4ed8;
}

.temu-product-bitable-actions button em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e8f0ff;
  color: #2563eb;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.temu-product-toolbar-notice {
  max-width: 360px;
  overflow: hidden;
  padding: 6px 9px;
  border-radius: 6px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-toolbar-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 12px;
  z-index: 12;
  width: min(620px, calc(100vw - 280px));
  padding: 12px;
  border: 1px solid #d8e0e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.temu-product-toolbar-popover.narrow {
  width: 320px;
}

.temu-product-toolbar-popover header,
.temu-product-toolbar-popover footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.temu-product-toolbar-popover header {
  margin-bottom: 10px;
}

.temu-product-toolbar-popover header strong {
  color: #1f2937;
  font-size: 14px;
}

.temu-product-toolbar-popover p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.temu-product-toolbar-filter-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) repeat(3, minmax(106px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.temu-product-toolbar-popover input,
.temu-product-toolbar-popover select {
  height: 32px;
  min-height: 32px;
  border-radius: 6px;
  font-size: 12px;
}

.temu-product-toolbar-choice-row,
.temu-product-row-height-options,
.temu-product-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.temu-product-row-height-options button.active {
  border-color: rgba(37, 99, 235, 0.26);
  background: #eff6ff;
  color: #2563eb;
}

.temu-product-selection-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 12px;
  border-bottom: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.temu-product-selection-bar strong {
  margin-right: 4px;
}

.temu-product-selection-bar button {
  height: 26px;
  min-height: 26px;
  padding: 0 9px;
  border-color: rgba(37, 99, 235, 0.18);
  border-radius: 6px;
  background: #fff;
  color: #1d4ed8;
  font-size: 12px;
}

.temu-product-grid-shell {
  min-width: 0;
  min-height: 420px;
}

.temu-product-sheet-only {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100vh - 72px);
  border: 1px solid #dfe5eb;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.temu-product-table-wrap {
  width: 100%;
  max-height: calc(100vh - 116px);
  overflow: auto;
  background: #fff;
}

.temu-product-table {
  width: 100%;
  min-width: 3180px;
  border-collapse: separate;
  border-spacing: 0;
}

.temu-product-table th,
.temu-product-table td {
  border-right: 1px solid #e5e9ef;
  border-bottom: 1px solid #e5e9ef;
  padding: 7px 10px;
  text-align: left;
  vertical-align: middle;
}

.temu-product-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 38px;
  background: #f7f8fa;
  color: #4b5563;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.temu-product-table tbody tr {
  min-height: 96px;
  background: #fff;
}

.temu-product-table tbody tr:hover {
  background: #f7fbff;
}

.temu-product-table tbody tr.selected,
.temu-product-table tbody tr.selected .temu-product-check-col,
.temu-product-table tbody tr.selected .temu-product-row-number-col {
  background: #eff6ff;
}

.temu-product-check-col,
.temu-product-row-number-col {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  background: #fff;
  text-align: center !important;
}

.temu-product-row-number-col {
  left: 42px;
  z-index: 3;
  color: #8b96a5;
  font-size: 12px;
}

.temu-product-table.no-selection .temu-product-row-number-col {
  left: 0;
}

th.temu-product-check-col,
th.temu-product-row-number-col {
  z-index: 4;
  background: #f7f8fa;
}

.temu-product-check-col input {
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
}

.temu-product-field-header {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.temu-product-field-header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 22px;
  height: 18px;
  border-radius: 4px;
  background: #edf2f7;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.temu-product-field-header strong {
  min-width: 0;
  overflow: hidden;
  color: #374151;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-field-header button {
  margin-left: auto;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #9aa4b2;
  font-size: 14px;
}

.temu-product-field-header button:hover {
  background: #e9eef5;
  color: #4b5563;
}

.temu-product-field-menu-popover {
  position: fixed;
  z-index: 1000;
  display: grid;
  gap: 4px;
  width: 250px;
  max-height: min(76vh, 620px);
  overflow: auto;
  padding: 8px;
  border: 1px solid #d8e0e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}

.temu-product-field-menu-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px 8px;
  border-bottom: 1px solid #eef2f7;
}

.temu-product-field-menu-title span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  border-radius: 5px;
  background: #edf2f7;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.temu-product-field-menu-title strong {
  color: #1f2937;
  font-size: 13px;
}

.temu-product-field-menu-popover button {
  justify-content: flex-start;
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.temu-product-field-menu-popover button:hover {
  background: #f3f6f9;
}

.temu-product-field-menu-popover button:disabled {
  cursor: not-allowed;
  color: #9aa4b2;
  background: transparent;
}

.temu-product-table td[data-column="media"] {
  width: 260px;
  min-width: 260px;
}

.temu-product-table td[data-column="product"] {
  width: 390px;
  min-width: 390px;
}

.temu-product-table td[data-column="category_attrs"] {
  width: 320px;
  min-width: 320px;
}

.temu-product-table td[data-column="commercial"] {
  width: 220px;
  min-width: 220px;
}

.temu-product-table td[data-column="sku_summary"] {
  width: 420px;
  min-width: 420px;
}

.temu-product-table td[data-column="store"],
.temu-product-table td[data-column="fulfillment"] {
  width: 260px;
  min-width: 260px;
}

.temu-product-table td[data-column="reviews"] {
  width: 360px;
  min-width: 360px;
}

.temu-product-table td[data-column="assets"] {
  width: 310px;
  min-width: 310px;
}

.temu-product-table td[data-column="seo_ai"] {
  width: 380px;
  min-width: 380px;
}

.temu-product-table td[data-column="title"] {
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}

.temu-product-table td[data-column="goods_id"],
.temu-product-table td[data-column="price"],
.temu-product-table td[data-column="sales"],
.temu-product-table td[data-column="review"],
.temu-product-table td[data-column="review_sample_score"],
.temu-product-table td[data-column="review_sample_date"],
.temu-product-table td[data-column="sku1_id"],
.temu-product-table td[data-column="sku1_price"],
.temu-product-table td[data-column="sku1_stock"],
.temu-product-table td[data-column="sku2_id"],
.temu-product-table td[data-column="sku2_price"],
.temu-product-table td[data-column="sku2_stock"],
.temu-product-table td[data-column="sku3_id"],
.temu-product-table td[data-column="sku3_price"],
.temu-product-table td[data-column="sku3_stock"],
.temu-product-table td[data-column="mall"],
.temu-product-table td[data-column="seo"],
.temu-product-table td[data-column="collected_at"] {
  width: 150px;
  min-width: 150px;
}

.temu-product-table td[data-column="category"] {
  width: 260px;
  min-width: 260px;
}

.temu-product-table td[data-column="material"],
.temu-product-table td[data-column="power_mode"],
.temu-product-table td[data-column="age_group"],
.temu-product-table td[data-column="origin"],
.temu-product-table td[data-column="sku_prices"],
.temu-product-table td[data-column="sku_stock"],
.temu-product-table td[data-column="shop_sold"],
.temu-product-table td[data-column="shop_score"],
.temu-product-table td[data-column="seller_type"],
.temu-product-table td[data-column="image_count"],
.temu-product-table td[data-column="video_url"] {
  width: 150px;
  min-width: 150px;
}

.temu-product-table td[data-column="sku_summary"],
.temu-product-table td[data-column="shipping_title"],
.temu-product-table td[data-column="return_policy"],
.temu-product-table td[data-column="image_specs"],
.temu-product-table td[data-column="review_sample_sku"],
.temu-product-table td[data-column="sku1_style"],
.temu-product-table td[data-column="sku1_spec"],
.temu-product-table td[data-column="sku2_style"],
.temu-product-table td[data-column="sku2_spec"],
.temu-product-table td[data-column="sku3_style"],
.temu-product-table td[data-column="sku3_spec"] {
  width: 220px;
  min-width: 220px;
}

.temu-product-table td[data-column="sku_styles"],
.temu-product-table td[data-column="review_sample_text"],
.temu-product-table td[data-column="review2_text"],
.temu-product-table td[data-column="review3_text"],
.temu-product-table td[data-column="seo_title"],
.temu-product-table td[data-column="seo_description"],
.temu-product-table td[data-column="seo_keywords"] {
  width: 320px;
  min-width: 320px;
}

.temu-product-table td[data-column="ai_outputs"] {
  width: 280px;
  min-width: 280px;
}

.temu-product-table td[data-column="sku_images"],
.temu-product-table td[data-column="sku1_image"],
.temu-product-table td[data-column="sku2_image"],
.temu-product-table td[data-column="sku3_image"],
.temu-product-table td[data-column="review_sample_images"] {
  width: 220px;
  min-width: 220px;
}

.temu-product-table td[data-column="media_gallery"] {
  width: 300px;
  min-width: 300px;
}

.temu-product-table td[data-column="source_url"] {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}

.temu-product-table td[data-column="media"] {
  width: 260px;
  min-width: 260px;
}

.temu-product-table td[data-column="product"] {
  width: 390px;
  min-width: 390px;
}

.temu-product-table td[data-column="category_attrs"] {
  width: 320px;
  min-width: 320px;
}

.temu-product-table td[data-column="commercial"] {
  width: 220px;
  min-width: 220px;
}

.temu-product-table td[data-column="sku_summary"] {
  width: 420px;
  min-width: 420px;
}

.temu-product-table td[data-column="store"],
.temu-product-table td[data-column="fulfillment"] {
  width: 260px;
  min-width: 260px;
}

.temu-product-table td[data-column="reviews"] {
  width: 360px;
  min-width: 360px;
}

.temu-product-table td[data-column="assets"] {
  width: 310px;
  min-width: 310px;
}

.temu-product-table td[data-column="seo_ai"] {
  width: 380px;
  min-width: 380px;
}

.temu-product-cell {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.temu-product-info-cell {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-content: start;
}

.temu-product-main-cell {
  gap: 7px;
}

.temu-product-platform-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.temu-product-platform-cell strong {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #0f172a;
  background: #f8fafc;
  font-size: 12px;
  line-height: 1.3;
}

.temu-product-platform-cell small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-title-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.temu-product-title-text .temu-product-editable {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.38;
  white-space: normal;
}

.temu-product-link-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.temu-product-link-actions span,
.temu-product-sub-meta span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-sub-meta {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.temu-product-info-line {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.temu-product-info-line em,
.temu-product-metric-grid em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.temu-product-info-line strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.temu-product-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid #d8e5f0;
  border-radius: 999px;
  background: #f6f9fc;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
}

.temu-product-pill em {
  color: #64748b;
  font-style: normal;
  font-weight: 700;
}

.temu-product-pill strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-pill.good {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.temu-product-pill.warn {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.temu-product-metric-cell {
  display: grid;
  gap: 6px;
}

.temu-product-metric-cell > strong {
  font-size: 14px;
}

.temu-product-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.temu-product-metric-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
}

.temu-product-metric-grid b {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-sku-variants {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  min-width: 0;
  padding-bottom: 2px;
}

.temu-product-sku-variants span {
  display: grid;
  grid-template-columns: 34px minmax(72px, 1fr);
  grid-template-rows: auto auto;
  column-gap: 6px;
  flex: 0 0 124px;
  min-width: 0;
  padding: 5px;
  border: 1px solid #d8e5f0;
  border-radius: 7px;
  background: #fbfdff;
}

.temu-product-sku-variants img {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border: 1px solid #d8e0e8;
  border-radius: 5px;
  object-fit: cover;
}

.temu-product-sku-variants b,
.temu-product-sku-variants em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-sku-variants b {
  color: var(--ink);
  font-size: 11px;
}

.temu-product-sku-variants em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.temu-product-review-summary p,
.temu-product-info-cell p {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-review-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.temu-product-review-head strong {
  color: #1d4ed8;
  font-size: 14px;
}

.temu-product-review-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.temu-product-cell strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.temu-product-cell small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-source-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.temu-product-editable {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td[data-column="title"] .temu-product-editable {
  font-size: 13px;
  font-weight: 800;
  padding-right: 10px;
}

.temu-product-editable:hover {
  border-color: #d8e0e8;
  background: #f8fbff;
}

.temu-product-editable:focus {
  overflow: auto;
  border-color: #2563eb;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
  text-overflow: clip;
}

.temu-product-editable.saving {
  border-color: #f59e0b;
  background: #fffbeb;
}

.temu-product-editable.saved {
  border-color: #22c55e;
  background: #f0fdf4;
}

.temu-product-editable.error {
  border-color: #ef4444;
  background: #fff1f2;
}

.temu-product-inline-score {
  display: flex;
  align-items: center;
  gap: 4px;
}

.temu-product-inline-score .temu-product-editable {
  width: 54px;
  flex: 0 0 54px;
}

.temu-product-inline-thumbs {
  display: flex;
  gap: 5px;
  align-items: center;
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 2px;
}

.temu-product-inline-thumbs img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #eef3f8;
}

.temu-product-inline-thumbs em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.temu-product-source-link {
  display: block;
  overflow: hidden;
  max-width: 240px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-link-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.temu-product-link-cell:hover {
  border-color: #93c5fd;
  background: #dbeafe;
}

.temu-product-table-media {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.temu-product-media-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding: 1px 0 4px;
  scrollbar-width: thin;
}

.temu-product-media-strip a {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.temu-product-media-more {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 48px;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.temu-product-table-media img,
.temu-product-table-media video {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef3f8;
}

.temu-product-table-media small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.temu-product-no-media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  min-height: 28px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.temu-product-column-picker {
  position: relative;
}

.temu-product-column-picker summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  white-space: nowrap;
}

.temu-product-column-picker summary::-webkit-details-marker {
  display: none;
}

.temu-product-column-picker[open] summary {
  border-color: rgba(37, 99, 235, 0.36);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.temu-product-column-picker > div {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 4;
  width: 190px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.temu-product-column-picker > div > p {
  margin: 0 0 4px;
  padding: 7px 8px;
  border-radius: 6px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.temu-product-column-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.temu-product-column-picker label:hover {
  background: #f4f8fb;
}

.temu-product-column-picker input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.temu-product-sheet-hint {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.temu-product-sheet-only {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: calc(100vh - 56px);
}

.temu-product-grid-shell {
  min-height: 0;
}

.temu-product-table-wrap {
  max-height: calc(100vh - 188px);
}

.temu-product-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

.temu-product-table th,
.temu-product-table td {
  height: 42px;
  padding: 5px 8px;
}

.temu-product-row-height-low .temu-product-table th,
.temu-product-row-height-low .temu-product-table td {
  height: 34px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.temu-product-row-height-high .temu-product-table th,
.temu-product-row-height-high .temu-product-table td {
  height: 58px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.temu-product-row-height-extra .temu-product-table th,
.temu-product-row-height-extra .temu-product-table td {
  height: 76px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.temu-product-table td {
  position: relative;
}

.temu-product-table .temu-product-check-col,
.temu-product-table .temu-product-row-number-col {
  position: sticky;
  z-index: 6;
  background: #fff;
}

.temu-product-table .temu-product-check-col {
  left: 0;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
}

.temu-product-table .temu-product-row-number-col {
  left: 42px;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
}

.temu-product-table.no-selection .temu-product-row-number-col {
  left: 0;
}

.temu-product-table th.temu-product-check-col,
.temu-product-table th.temu-product-row-number-col {
  z-index: 8;
  background: #f7f8fa;
}

.temu-product-table td[rowspan] {
  vertical-align: top;
}

.temu-product-table tbody tr {
  min-height: 42px;
}

.temu-product-row-number-col {
  width: 46px;
  min-width: 46px;
  max-width: 46px;
}

.temu-product-table th[data-field],
.temu-product-table td[data-column] {
  box-sizing: border-box;
}

.temu-product-table th[data-field="media"],
.temu-product-table td[data-column="media"] {
  position: sticky;
  left: 88px;
  z-index: 3;
  background: #fff;
}

.temu-product-table th[data-field="media"] {
  z-index: 5;
}

.temu-product-table th[data-field="title"],
.temu-product-table td[data-column="title"] {
  position: sticky;
  left: 88px;
  z-index: 3;
  background: #fff;
  box-shadow: 1px 0 0 #dbe2ea;
}

.temu-product-table th[data-field="title"] {
  z-index: 5;
}

.temu-product-table tbody tr:hover td[data-column="media"],
.temu-product-table tbody tr:hover td[data-column="title"] {
  background: #f7fbff;
}

.temu-product-table tbody tr.selected td[data-column="media"],
.temu-product-table tbody tr.selected td[data-column="title"] {
  background: #eff6ff;
}

.temu-product-group-base .temu-product-field-header span,
.temu-product-table th.temu-product-group-base {
  border-top: 3px solid #60a5fa;
}

.temu-product-group-collector .temu-product-field-header span,
.temu-product-table th.temu-product-group-collector {
  border-top: 3px solid #f59e0b;
}

.temu-product-group-category .temu-product-field-header span,
.temu-product-table th.temu-product-group-category {
  border-top: 3px solid #34d399;
}

.temu-product-group-commercial .temu-product-field-header span,
.temu-product-table th.temu-product-group-commercial {
  border-top: 3px solid #f59e0b;
}

.temu-product-group-sku .temu-product-field-header span,
.temu-product-table th.temu-product-group-sku {
  border-top: 3px solid #8b5cf6;
}

.temu-product-group-store .temu-product-field-header span,
.temu-product-table th.temu-product-group-store {
  border-top: 3px solid #14b8a6;
}

.temu-product-group-review .temu-product-field-header span,
.temu-product-table th.temu-product-group-review {
  border-top: 3px solid #f43f5e;
}

.temu-product-group-asset .temu-product-field-header span,
.temu-product-table th.temu-product-group-asset {
  border-top: 3px solid #06b6d4;
}

.temu-product-group-seo_ai .temu-product-field-header span,
.temu-product-table th.temu-product-group-seo_ai {
  border-top: 3px solid #6366f1;
}

.temu-product-table td.temu-product-group-category {
  background: #fbfffd;
}

.temu-product-table td.temu-product-group-commercial {
  background: #fffdf8;
}

.temu-product-table td.temu-product-group-sku {
  background: #fdfcff;
}

.temu-product-table td.temu-product-group-review {
  background: #fffafb;
}

.temu-product-table td.temu-product-group-asset {
  background: #f8feff;
}

.temu-product-table td.temu-product-group-seo_ai {
  background: #fbfbff;
}

.temu-product-table td.temu-product-group-collector {
  background: #fffdf8;
}

.temu-product-table tbody tr.temu-product-collector-caution .temu-product-row-number-col {
  box-shadow: inset 3px 0 0 #f59e0b;
}

.temu-product-field-header {
  position: relative;
  height: 24px;
  padding-right: 22px;
}

.temu-product-field-header span {
  height: 17px;
  min-width: 24px;
  background: #f1f5f9;
}

.temu-product-field-header button {
  opacity: 0;
}

.temu-product-table th:hover .temu-product-field-header button {
  opacity: 1;
}

.temu-product-col-resize {
  position: absolute;
  top: -7px;
  right: -8px;
  width: 8px;
  height: 38px;
  cursor: col-resize;
}

.temu-product-col-resize:hover {
  background: rgba(37, 99, 235, 0.16);
}

.temu-product-cell-selected {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  background: #eff6ff !important;
}

.temu-product-cell-selected::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 6px;
  height: 6px;
  border: 1px solid #fff;
  background: #2563eb;
}

.temu-product-peer-cursor {
  box-shadow: inset 0 0 0 2px #7c3aed;
}

.temu-product-peer-label {
  position: absolute;
  top: -19px;
  left: 4px;
  z-index: 6;
  max-width: 90px;
  overflow: hidden;
  padding: 2px 6px;
  border-radius: 5px;
  background: #7c3aed;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-source-cell {
  display: grid;
  gap: 3px;
  align-content: center;
}

.temu-product-source-cell span {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-source-cell .temu-product-editable {
  max-width: 100%;
  padding: 1px 3px;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.temu-product-source-cell .temu-product-editable:focus {
  min-width: 360px;
}

.temu-product-table-media {
  gap: 2px;
}

.temu-product-media-strip {
  gap: 3px;
  padding: 0;
}

.temu-product-table-media img,
.temu-product-table-media video {
  width: 34px;
  height: 34px;
  border-radius: 4px;
}

.temu-product-media-more {
  flex-basis: 28px;
  width: 28px;
  height: 34px;
  border-radius: 4px;
  font-size: 10px;
}

.temu-product-table-media small {
  font-size: 10px;
}

.temu-product-cell {
  gap: 2px;
}

.temu-product-cell strong,
.temu-product-editable {
  font-size: 12px;
}

.temu-product-editable {
  min-height: 24px;
  padding: 2px 5px;
}

.temu-product-editable:focus {
  position: relative;
  z-index: 7;
  min-width: 220px;
  white-space: normal;
}

.temu-product-inline-thumbs img {
  width: 30px;
  height: 30px;
  border-radius: 4px;
}

.temu-product-column-picker > div {
  width: 390px;
  max-height: 520px;
  overflow: auto;
  grid-template-columns: 1fr;
}

.temu-product-column-picker > div > header {
  position: sticky;
  top: -8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid #edf2f7;
  background: #fff;
}

.temu-product-column-picker > div > header strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.temu-product-column-picker > div > header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-field-config-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid #edf2f7;
  border-radius: 6px;
  background: #f8fafc;
}

.temu-product-field-config-search span {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.temu-product-field-config-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-size: 13px;
  outline: none;
}

.temu-product-column-picker section {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 6px;
  border: 1px solid #edf2f7;
  border-radius: 6px;
}

.temu-product-column-picker section > strong {
  color: #334155;
  font-size: 12px;
}

.temu-product-field-config-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px 30px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 4px;
  border-radius: 6px;
}

.temu-product-field-config-row:hover {
  background: #f8fafc;
}

.temu-product-field-config-row.is-hidden {
  opacity: 0.56;
}

.temu-product-field-config-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border-radius: 6px;
  background: #eef4ff;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
}

.temu-product-field-config-row b,
.temu-product-field-config-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-field-config-row b {
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}

.temu-product-field-config-row small {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
}

.temu-product-field-config-eye,
.temu-product-field-config-more,
.temu-product-field-config-add {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.temu-product-field-config-eye:hover,
.temu-product-field-config-more:hover,
.temu-product-field-config-add:hover {
  border-color: #d8e0e8;
  background: #f1f5f9;
}

.temu-product-field-config-eye:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.temu-product-field-config-add {
  width: 100%;
  justify-content: flex-start;
  margin-top: 4px;
  color: #2563eb;
}

.temu-product-field-drawer {
  border-bottom: 1px solid #e5e9ef;
  background: #fbfcfe;
}

.temu-product-field-drawer > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 14px;
  color: #4b5563;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
}

.temu-product-field-drawer > summary::-webkit-details-marker {
  display: none;
}

.temu-product-field-drawer > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #eef2f7;
  color: #64748b;
}

.temu-product-field-drawer[open] > summary::before {
  content: "-";
}

.temu-product-field-drawer > summary strong {
  color: #7b8794;
  font-size: 12px;
  font-weight: 700;
}

.temu-product-field-drawer > summary button {
  margin-left: auto;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #d6e1ec;
  border-radius: 6px;
  background: #fff;
  color: #39506b;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-field-center {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
  gap: 12px;
  padding: 0 12px 12px;
}

.temu-product-field-paths,
.temu-product-ai-shortcuts {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-soft);
}

.temu-product-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.temu-product-field-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.temu-product-field-head span,
.temu-product-field-head em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.temu-product-path-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 230px;
  overflow: auto;
  padding: 10px;
}

.temu-product-path-groups details {
  min-width: 0;
  border: 1px solid rgba(183, 202, 217, 0.72);
  border-radius: 8px;
  background: #f8fbfc;
}

.temu-product-path-groups summary {
  cursor: pointer;
  padding: 8px 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.temu-product-path-groups summary span {
  color: var(--muted);
  font-weight: 700;
}

.temu-product-path-groups details > div {
  display: grid;
  gap: 5px;
  padding: 0 8px 8px;
}

.temu-product-path-groups button {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid rgba(183, 202, 217, 0.72);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.temu-product-path-groups button.copied {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.16);
}

.temu-product-path-groups button strong,
.temu-product-path-groups button code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-path-groups button strong {
  font-size: 12px;
}

.temu-product-path-groups button code,
.temu-product-ai-card code,
.temu-product-ai-output-grid code {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef6ff;
  color: #255b8f;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-shortcuts {
  display: grid;
  align-content: start;
}

.temu-product-ai-select {
  display: grid;
  gap: 5px;
  padding: 10px 12px 0;
}

.temu-product-ai-select span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-card {
  display: grid;
  gap: 8px;
  margin: 10px 12px 12px;
  padding: 10px;
  border: 1px solid rgba(183, 202, 217, 0.72);
  border-radius: 8px;
  background: #f8fbfc;
}

.temu-product-ai-card strong {
  color: var(--ink);
  font-size: 14px;
}

.temu-product-ai-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.temu-product-ai-card > div,
.temu-product-ai-output-grid article > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.temu-product-ai-run-result {
  margin: 0 12px 12px;
  padding: 7px 9px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-shortcut-panel {
  border-bottom: 1px solid #dbe5ee;
  background: #fbfcfe;
}

.temu-product-ai-field-drawer {
  position: fixed;
  top: 96px;
  left: clamp(360px, 47vw, 760px);
  z-index: 120;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 126px);
  overflow: hidden;
  border: 1px solid #dbe5ee;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.temu-product-ai-shortcut-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e9ef;
}

.temu-product-ai-shortcut-panel > header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-shortcut-panel > header h2 {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 16px;
}

.temu-product-ai-shortcut-grid {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

.temu-product-ai-drawer-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.temu-product-ai-field-drawer .temu-product-ai-shortcut-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.temu-product-ai-form-row {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
}

.temu-product-ai-title-field input,
.temu-product-ai-field-type-card input,
.temu-product-ai-field-type-card select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
}

.temu-product-ai-field-type-card {
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.temu-product-ai-field-type-card > strong {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.temu-product-ai-type-row {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) minmax(170px, 0.8fr);
  align-items: center;
  gap: 8px !important;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid #dbe5ee;
  border-radius: 7px;
  background: #f8fafc;
}

.temu-product-ai-model-row {
  border-color: #c7d7ff;
  background: #eef4ff;
}

.temu-product-ai-type-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 24px;
  border-radius: 6px;
  background: #e9f1ff;
  color: #315ec9;
  font-size: 11px;
  font-weight: 900;
}

.temu-product-ai-type-row b,
.temu-product-ai-type-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-type-row b {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.temu-product-ai-type-row small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.temu-product-ai-row-action {
  justify-self: end;
  min-height: 30px;
  padding: 0 12px;
  border-color: #c7d7ff;
  border-radius: 7px;
  background: #fff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.temu-product-ai-row-action:hover {
  background: #eff6ff;
}

.temu-product-ai-prompt-card {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 10px;
  border-radius: 8px;
  background: #f5f6f8;
}

.temu-product-ai-prompt-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.temu-product-ai-prompt-card button {
  min-height: 28px;
  border-color: transparent;
  background: transparent;
  color: #2563eb;
  font-weight: 900;
}

.temu-product-ai-prompt-card textarea {
  min-height: 190px;
  padding: 12px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.7;
}

.temu-product-ai-image-config {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #f5f6f8;
}

.temu-product-ai-image-config h3 {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.temu-product-ai-config-line {
  display: grid;
  gap: 6px;
}

.temu-product-ai-config-line > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.temu-product-ai-config-line button {
  min-height: 26px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: #2563eb;
  font-weight: 900;
}

.temu-product-ai-seedream-config {
  border: 1px solid #e1e7ef;
  background: #f8fafc;
}

.temu-product-ai-inline-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.temu-product-ai-reference-value {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 42px;
  padding: 8px;
  border: 1px solid #dbe5ee;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.temu-product-ai-config-grid label {
  display: grid;
  gap: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.temu-product-ai-config-grid input,
.temu-product-ai-config-grid select {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
}

.temu-product-ai-config-section {
  display: grid;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: #fff;
}

.temu-product-ai-config-section summary {
  cursor: pointer;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  list-style: none;
}

.temu-product-ai-config-section summary::-webkit-details-marker {
  display: none;
}

.temu-product-ai-config-section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.temu-product-ai-reference-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.temu-product-ai-reference-control > div {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.temu-product-ai-reference-control button {
  min-height: 28px;
  padding: 0 9px;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.temu-product-ai-config-section label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-config-section select {
  min-height: 32px;
  width: 100%;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
}

.temu-product-ai-config-chip {
  display: inline-flex;
  align-items: center;
  max-width: 190px;
  min-height: 24px;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 6px;
  background: #eef4ff;
  color: #315ec9;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-shortcut-picker,
.temu-product-ai-provider-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
}

.temu-product-ai-shortcut-picker summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
}

.temu-product-ai-shortcut-picker summary::-webkit-details-marker {
  display: none;
}

.temu-product-ai-shortcut-picker summary strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.temu-product-ai-shortcut-picker summary span {
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-section-title,
.temu-product-ai-provider-panel > header,
.temu-product-ai-reference-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.temu-product-ai-section-title div {
  display: grid;
  gap: 2px;
}

.temu-product-ai-section-title strong,
.temu-product-ai-provider-panel > header strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.temu-product-ai-section-title span,
.temu-product-ai-provider-panel > header span,
.temu-product-ai-reference-toolbar span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.temu-product-ai-section-title em {
  max-width: 190px;
  overflow: hidden;
  color: #315ec9;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-shortcut-list {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
}

.temu-product-ai-shortcut-list .temu-product-ai-shortcut-group > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.temu-product-ai-shortcut-list [data-temu-product-ai-preset] {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 8px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  text-align: left;
}

.temu-product-ai-shortcut-list [data-temu-product-ai-preset].active,
.temu-product-ai-shortcut-list [data-temu-product-ai-preset]:hover {
  border-color: #8bb7ff;
  background: #f2f7ff;
}

.temu-product-ai-shortcut-list [data-temu-product-ai-preset] span {
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 24px;
  border-radius: 6px;
  background: #eaf2ff;
  color: #315ec9;
  font-size: 11px;
  font-weight: 900;
}

.temu-product-ai-shortcut-list [data-temu-product-ai-preset] b,
.temu-product-ai-shortcut-list [data-temu-product-ai-preset] em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-shortcut-list [data-temu-product-ai-preset] em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.temu-product-ai-shortcut-grid aside {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.temu-product-ai-shortcut-grid aside > strong {
  color: #334155;
  font-size: 12px;
}

.temu-product-ai-shortcut-search {
  display: grid;
  gap: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-shortcut-search input {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
}

.temu-product-ai-path-center-link {
  border-color: #e5e7eb !important;
  background: #f3f4f6 !important;
}

.temu-product-ai-shortcut-group {
  display: grid;
  gap: 6px;
}

.temu-product-ai-shortcut-group h3 {
  margin: 8px 0 2px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-shortcut-grid aside button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 8px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  text-align: left;
}

.temu-product-ai-shortcut-grid aside button[hidden],
.temu-product-ai-shortcut-group[hidden] {
  display: none;
}

.temu-product-ai-shortcut-grid aside button.active,
.temu-product-ai-shortcut-grid aside button:hover {
  border-color: #8bb7ff;
  background: #f2f7ff;
}

.temu-product-ai-shortcut-grid aside button span {
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 6px;
  background: #eaf2ff;
  color: #315ec9;
  font-size: 11px;
  font-weight: 900;
}

.temu-product-ai-shortcut-grid aside button b,
.temu-product-ai-shortcut-grid aside button em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-shortcut-grid aside button em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.temu-product-ai-shortcut-form {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(180px, 0.35fr);
  gap: 10px;
  min-width: 0;
}

.temu-product-ai-shortcut-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-shortcut-form label.wide,
.temu-product-ai-reference-box,
.temu-product-ai-selected-shortcut,
.temu-product-ai-run-options,
.temu-product-ai-shortcut-form footer {
  grid-column: 1 / -1;
}

.temu-product-ai-existing-fields {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  background: #fbfbff;
}

.temu-product-ai-existing-fields > div:last-child {
  display: grid;
  gap: 6px;
}

.temu-product-ai-existing-fields article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e5e9ef;
  border-radius: 7px;
  background: #fff;
}

.temu-product-ai-existing-fields article.active {
  border-color: #93c5fd;
  background: #eff6ff;
}

.temu-product-ai-existing-fields article > span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 6px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 11px;
  font-weight: 900;
}

.temu-product-ai-existing-fields strong,
.temu-product-ai-existing-fields small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-existing-fields strong {
  color: #111827;
  font-size: 13px;
  font-weight: 900;
}

.temu-product-ai-existing-fields small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.temu-product-ai-existing-fields button {
  height: 28px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-existing-fields button:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.temu-product-ai-shortcut-form textarea {
  min-height: 74px;
  resize: vertical;
}

.temu-product-ai-selected-shortcut {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(96px, max-content) max-content;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
}

.temu-product-ai-selected-shortcut span,
.temu-product-ai-selected-shortcut small {
  color: #64748b;
  font-weight: 800;
}

.temu-product-ai-selected-shortcut button {
  min-height: 30px;
  padding: 0 10px;
  border-color: #8bb7ff;
  color: #1d4ed8;
  font-weight: 900;
}

.temu-product-ai-selected-shortcut strong {
  color: #0f172a;
}

.temu-product-ai-selected-shortcut em {
  overflow: hidden;
  color: #0f172a;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-default-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e5e9ef;
  border-radius: 8px;
  background: #f8fafc;
}

.temu-product-ai-default-card > strong {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.temu-product-ai-suggestion-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.temu-product-ai-suggestion-row button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-suggestion-row button.active,
.temu-product-ai-suggestion-row button:hover:not(:disabled) {
  border-color: #8bb7ff;
  background: #eef4ff;
  color: #1d4ed8;
}

.temu-product-ai-shortcut-empty {
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-shortcut-flyout {
  position: absolute;
  top: 62px;
  left: calc(100% + 10px);
  z-index: 2;
  display: grid;
  gap: 10px;
  width: clamp(280px, calc(100vw - 620px), 360px);
  max-height: calc(100vh - 160px);
  overflow: auto;
  padding: 12px;
  border: 1px solid #d8e2ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.temu-product-ai-shortcut-flyout header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.temu-product-ai-shortcut-flyout header strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.temu-product-ai-shortcut-flyout header button {
  min-height: 28px;
  padding: 0 9px;
  border-color: #d8e2ec;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-run-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-run-options label {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.temu-product-ai-run-options input[type="number"] {
  width: 96px;
  min-height: 30px;
}

.temu-product-ai-auto-update {
  margin-left: auto !important;
}

.temu-product-ai-reference-box {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
}

.temu-product-ai-reference-box[hidden] {
  display: none;
}

.temu-product-ai-reference-box > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
}

.temu-product-ai-reference-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 230px;
  overflow: auto;
}

.temu-product-ai-reference-groups details {
  border: 1px solid #e5e9ef;
  border-radius: 8px;
  background: #fbfcfe;
}

.temu-product-ai-reference-groups summary {
  cursor: pointer;
  padding: 7px 9px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.temu-product-ai-reference-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-top: 1px solid #eef2f7;
}

.temu-product-ai-reference-row.active {
  background: #eef4ff;
}

.temu-product-ai-reference-row > button:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 34px;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: #0f172a;
  text-align: left;
}

.temu-product-ai-reference-row > button:first-child span,
.temu-product-ai-reference-row > button:first-child small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-reference-row > button:first-child span {
  font-size: 13px;
  font-weight: 900;
}

.temu-product-ai-reference-row > button:first-child small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.temu-product-ai-copy-path {
  min-height: 24px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 11px;
}

.temu-product-ai-copy-path.copied::after {
  content: "已复制";
  margin-left: 4px;
  color: #1d4ed8;
}

.temu-product-ai-shortcut-form footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: sticky;
  bottom: -12px;
  padding: 10px 0 0;
  background: #fff;
  border-top: 1px solid #eef2f7;
}

.temu-product-ai-shortcut-form footer > div {
  display: inline-flex;
  gap: 8px;
}

.temu-product-ai-provider-panel {
  background: #f8fafc;
}

.temu-product-ai-provider-panel label {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-ai-provider-panel input {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
}

.temu-product-ai-field-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.temu-product-ai-field-cell > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.temu-product-ai-field-cell strong,
.temu-product-ai-field-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-field-cell strong {
  color: #0f172a;
  font-size: 12px;
}

.temu-product-ai-field-cell.failed strong {
  color: #b91c1c;
}

.temu-product-ai-field-cell span {
  color: #64748b;
  font-size: 11px;
}

.temu-product-ai-field-cell.failed span {
  color: #ef4444;
}

.temu-product-ai-field-cell button {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
}

.temu-product-ai-field-cell.object-field {
  align-items: flex-start;
}

.temu-product-ai-object-result {
  max-width: 280px;
  margin-top: 3px;
  color: #334155;
  font-size: 11px;
}

.temu-product-ai-object-result summary {
  cursor: pointer;
  color: #2563eb;
  font-weight: 900;
}

.temu-product-ai-object-result section {
  margin-top: 5px;
  padding: 6px;
  border: 1px solid #dbe5ee;
  border-radius: 6px;
  background: #f8fafc;
}

.temu-product-ai-object-result b,
.temu-product-ai-object-result p {
  display: block;
  overflow: visible;
  margin: 0;
  white-space: normal;
}

.temu-product-ai-object-result p {
  margin-top: 3px;
  line-height: 1.45;
}

.temu-product-bitable-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 7px 12px;
  border-top: 1px solid #e5e9ef;
  background: #fff;
  color: #7b8794;
  font-size: 12px;
  font-weight: 700;
}

.temu-product-bitable-footer div {
  display: flex;
  gap: 6px;
}

.temu-product-bitable-footer button {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
}

.temu-product-ai-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.temu-product-ai-cell strong,
.temu-product-ai-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-ai-cell strong {
  color: var(--ink);
  font-size: 12px;
}

.temu-product-ai-cell span {
  color: var(--muted);
  font-size: 12px;
}

.temu-product-table th[data-field="main_image"],
.temu-product-table td[data-column="main_image"] {
  position: sticky;
  left: 88px;
  z-index: 3;
  background: #fff;
}

.temu-product-table th[data-field="video"],
.temu-product-table td[data-column="video"] {
  position: sticky;
  left: 174px;
  z-index: 3;
  background: #fff;
}

.temu-product-table th[data-field="title"],
.temu-product-table td[data-column="title"] {
  left: 260px;
}

.temu-product-table th[data-field="main_image"],
.temu-product-table th[data-field="video"],
.temu-product-table th[data-field="title"] {
  z-index: 5;
}

.temu-product-table tbody tr:hover td[data-column="main_image"],
.temu-product-table tbody tr:hover td[data-column="video"],
.temu-product-table tbody tr:hover td[data-column="title"] {
  background: #f7fbff;
}

.temu-product-table tbody tr.selected td[data-column="main_image"],
.temu-product-table tbody tr.selected td[data-column="video"],
.temu-product-table tbody tr.selected td[data-column="title"] {
  background: #eff6ff;
}

.temu-product-table th[data-field="video"],
.temu-product-table td[data-column="video"],
.temu-product-table th[data-field="title"],
.temu-product-table td[data-column="title"] {
  position: relative;
  left: auto;
  z-index: auto;
  box-shadow: none;
}

.temu-product-single-media {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #f4f8fb;
  cursor: zoom-in;
}

.temu-product-single-media img,
.temu-product-single-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.temu-product-single-media small {
  position: absolute;
  right: 2px;
  bottom: 2px;
  max-width: 42px;
  padding: 1px 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.68);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-sku-image-cell,
.temu-product-sku-empty-image {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #f4f8fb;
  color: #7b8794;
  cursor: zoom-in;
  font-size: 11px;
  font-weight: 800;
}

.temu-product-sku-image-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.temu-product-video-thumb span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.temu-product-detail-btn {
  width: 100%;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-detail-btn:hover {
  background: #dbeafe;
}

.temu-product-sku-detail-list {
  display: grid;
  gap: 4px;
  max-height: 150px;
  overflow: auto;
  padding-right: 2px;
}

.temu-product-sku-detail-row {
  display: grid;
  grid-template-columns: 34px minmax(92px, 1fr) 62px 92px;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 3px 4px;
  border: 1px solid #e1eaf2;
  border-radius: 6px;
  background: #fbfdff;
}

.temu-product-sku-detail-row a,
.temu-product-sku-detail-row .temu-product-sku-empty-image {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid #d8e0e8;
  border-radius: 5px;
  background: #f4f8fb;
  color: #7b8794;
  font-size: 10px;
  font-weight: 800;
}

.temu-product-sku-detail-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.temu-product-sku-detail-row strong,
.temu-product-sku-detail-row small,
.temu-product-sku-detail-row em,
.temu-product-sku-detail-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-sku-detail-row strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

.temu-product-sku-detail-row small {
  display: block;
  color: #6b7b91;
  font-size: 11px;
  font-weight: 700;
}

.temu-product-sku-detail-row em,
.temu-product-sku-detail-row b {
  color: #475569;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.temu-product-seo-prompt-cell .temu-product-editable {
  min-height: 40px;
  white-space: normal;
}

.temu-product-seo-review-bundle-cell {
  display: grid;
  gap: 6px;
  align-content: start;
}

.temu-product-seo-review-bundle-cell .temu-product-seo-prompt-cell .temu-product-editable {
  min-height: 34px;
  max-height: 62px;
  overflow: auto;
  padding: 6px 8px;
  border: 1px solid #e0e7ff;
  border-radius: 6px;
  background: #fbfbff;
}

.temu-product-bundle-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.temu-product-bundle-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.temu-product-bundle-meta small {
  display: block;
  overflow: hidden;
  color: #60708a;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-collector-cell {
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
}

.temu-product-collector-cell small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-collector-cell .temu-product-collector-warning {
  color: #9a5a12;
}

.temu-product-collector-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  padding: 0 7px;
  overflow: hidden;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-collector-badge.good {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.temu-product-collector-badge.warn {
  border-color: #fde68a;
  background: #fffbeb;
  color: #9a5a12;
}

.temu-product-collector-badge.danger {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #b73d3d;
}

.temu-product-collector-badge.muted {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}

.temu-product-missing-field-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}

.temu-product-missing-field-cell span,
.temu-product-missing-field-cell em {
  max-width: 100%;
  padding: 2px 6px;
  overflow: hidden;
  border: 1px solid #fde68a;
  border-radius: 6px;
  background: #fffbeb;
  color: #9a5a12;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-detail-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.24);
}

.temu-product-detail-drawer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, calc(100vw - 42px));
  height: 100%;
  border-left: 1px solid #d8e0e8;
  background: #fff;
  box-shadow: -18px 0 36px rgba(15, 23, 42, 0.16);
}

.temu-product-detail-drawer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e9ef;
}

.temu-product-detail-drawer h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.temu-product-detail-drawer header span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.temu-product-detail-drawer header button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.temu-product-detail-drawer-body {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.temu-product-detail-drawer-body section,
.temu-product-detail-drawer-body .temu-product-raw {
  border: 1px solid #d8e0e8;
  border-radius: 8px;
  background: #fff;
}

.temu-product-detail-drawer-body h3 {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e9ef;
  font-size: 14px;
}

.temu-product-collector-alert {
  margin: 10px 12px 0;
  padding: 8px 10px;
  border: 1px solid #fde68a;
  border-radius: 6px;
  background: #fffbeb;
  color: #9a5a12;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.temu-product-drawer-kv {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 0;
  padding: 6px 0;
}

.temu-product-drawer-kv > div {
  display: contents;
}

.temu-product-drawer-kv span,
.temu-product-drawer-kv strong {
  min-width: 0;
  padding: 7px 12px;
  border-bottom: 1px solid #eef2f7;
  font-size: 12px;
}

.temu-product-drawer-kv span {
  color: #64748b;
  font-weight: 800;
}

.temu-product-drawer-kv strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 700;
}

.temu-product-list {
  display: grid;
  gap: 0;
}

.temu-product-row {
  display: grid;
  grid-template-columns: 78px minmax(260px, 1.8fr) minmax(120px, 0.55fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr);
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
}

.temu-product-row:last-child {
  border-bottom: 0;
}

.temu-product-cover {
  width: 64px;
  height: 64px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f8fb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.temu-product-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.temu-product-main,
.temu-product-metrics,
.temu-product-status {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.temu-product-main button {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-main button:hover {
  color: var(--accent);
  text-decoration: underline;
}

.temu-product-main span,
.temu-product-main small,
.temu-product-metrics span,
.temu-product-status span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-metrics strong,
.temu-product-status strong {
  color: var(--ink);
  font-size: 15px;
}

.temu-product-status .tag {
  width: fit-content;
}

.temu-product-detail-modal {
  width: min(1120px, calc(100vw - 28px));
}

.temu-product-detail-modal .modal-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.temu-product-detail-body {
  display: grid;
  gap: 14px;
}

.temu-product-detail-body section,
.temu-product-raw {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.temu-product-detail-body h3 {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.temu-product-overview,
.temu-product-detail-summary {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
}

.temu-product-detail-kv,
.temu-product-detail-summary > div:last-child {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px 10px;
  align-content: start;
}

.temu-product-detail-kv span,
.temu-product-detail-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.temu-product-detail-kv strong,
.temu-product-detail-kv a,
.temu-product-detail-summary strong,
.temu-product-detail-summary a {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-subtable-wrap {
  overflow: auto;
}

.temu-product-subtable {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

.temu-product-subtable th,
.temu-product-subtable td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

.temu-product-subtable th {
  background: #f4f8fb;
  color: #475569;
  font-weight: 800;
  white-space: nowrap;
}

.temu-product-subtable img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef3f8;
}

.temu-product-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 12px;
}

.temu-product-media-grid article {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.temu-product-media-grid article > a:first-child {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  background: #eef3f8;
}

.temu-product-media-grid img,
.temu-product-media-grid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.temu-product-media-grid em {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.temu-product-media-grid strong,
.temu-product-media-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-media-grid strong {
  color: var(--ink);
  font-size: 12px;
}

.temu-product-media-grid span {
  color: var(--muted);
  font-size: 11px;
}

.temu-product-open-original {
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.temu-product-review-table {
  min-width: 1050px;
}

.temu-product-review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.temu-product-review-images img {
  width: 42px;
  height: 42px;
}

.temu-product-seo-grid {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.temu-product-seo-grid > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.temu-product-seo-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.temu-product-seo-grid strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.temu-product-ai-output-grid {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.temu-product-ai-output-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.temu-product-ai-output-grid article > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.temu-product-ai-output-grid strong {
  color: var(--ink);
  font-size: 13px;
}

.temu-product-ai-output-grid span {
  color: var(--muted);
  font-size: 12px;
}

.temu-product-ai-output-grid p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.temu-product-media {
  display: grid;
  gap: 8px;
  align-content: start;
}

.temu-product-media img,
.temu-product-media video {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f8fb;
}

.temu-product-video-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.temu-product-video-thumb {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  text-decoration: none;
}

.temu-product-video-thumb video {
  display: block;
}

.temu-product-video-thumb span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.76);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.temu-product-flat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.temu-product-flat-grid > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.temu-product-flat-grid span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-product-flat-grid strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.temu-product-sample-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.temu-product-sample-list pre,
.temu-product-raw pre {
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f172a;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.temu-product-raw summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.temu-product-raw pre {
  margin: 0 12px 12px;
  max-height: 360px;
}

@media (max-width: 1180px) {
  .temu-product-field-center {
    grid-template-columns: 1fr;
  }

  .ecommerce-platform-toolbar {
    grid-template-columns: 1fr;
  }

  .ecommerce-platform-toolbar .toolbar-right {
    justify-content: flex-start;
    flex-wrap: wrap;
    min-width: 0;
  }

  .temu-product-toolbar .toolbar-left {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .temu-product-row {
    grid-template-columns: 68px minmax(230px, 1.4fr) minmax(110px, 0.6fr) minmax(120px, 0.6fr);
  }

  .temu-product-status {
    grid-column: 2 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .platform-sync-cards {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

  .platform-config-strip {
    grid-template-columns: 1fr;
  }
}

.material-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 19px;
  max-width: 96px;
  padding: 1px 5px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
}

.material-color-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.material-overflow {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.sku-count-badge,
.production-inline {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
}

.status-stack span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-stack strong {
  color: var(--text);
}

.production-summary strong {
  color: #0f766e;
}

.sku-detail-table {
  min-width: 1080px;
  border-left: 42px solid #f3f7f9;
}

.sku-detail-table th,
.sku-detail-table td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.sku-detail-table th:nth-child(1),
.sku-detail-table td:nth-child(1) {
  width: 150px;
}

.sku-detail-table th:nth-child(2),
.sku-detail-table td:nth-child(2) {
  width: 210px;
}

.sku-detail-table th:nth-child(3),
.sku-detail-table td:nth-child(3),
.sku-detail-table th:nth-child(4),
.sku-detail-table td:nth-child(4) {
  width: 180px;
}

.sku-detail-table th:nth-child(8),
.sku-detail-table td:nth-child(8) {
  width: 150px;
}

.sku-platform-links span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 138px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 11px;
}

.sku-platform-links b {
  color: #0f766e;
}

.material-binding-section .section-hint {
  max-width: 420px;
}

.material-binding-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.material-binding-grid.compact {
  max-height: 220px;
}

.material-picker-selected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

.material-picker-empty {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.material-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 180px;
  min-height: 26px;
  padding: 2px 6px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 800;
}

.material-selected-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-selected-chip b {
  color: #64748b;
  font-size: 13px;
  line-height: 1;
}

.material-picker-tools {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.material-picker-tools select,
.material-picker-tools input {
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
}

.material-picker-tools span {
  min-width: 56px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.material-binding-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

.material-picker-no-results {
  display: grid;
  place-items: center;
  min-height: 88px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  background: #f8fafc;
}

.material-picker-no-results[hidden] {
  display: none;
}

.material-picker-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 28px;
  border-top: 1px solid #e2e8f0;
  padding-top: 6px;
}

.material-picker-pager span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.material-picker-pager button {
  min-height: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 12px;
}

.material-picker-pager button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.material-binding-item[hidden],
.material-picker-pager[hidden] {
  display: none;
}

.material-binding-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.material-binding-item:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.material-binding-item.selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

.material-binding-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.material-option-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.material-option-text strong,
.material-option-text small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-option-text strong {
  color: #0f172a;
  font-size: 12px;
}

.material-option-text small {
  color: #64748b;
  font-size: 11px;
}

@media (max-width: 720px) {
  .material-picker-tools {
    grid-template-columns: 1fr;
  }

  .material-picker-tools span {
    text-align: left;
  }
}

.sku-sheet-toolbar .toolbar-left {
  flex: 1 1 520px;
}

.sku-sheet-toolbar {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
}

.sku-sheet-toolbar .search {
  min-width: min(520px, 52vw);
  height: 28px;
  padding: 4px 8px;
}

.sku-sheet-toolbar button {
  min-height: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.sku-filter-strip {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  height: 32px;
  min-height: 32px;
  margin: 4px 0 6px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.sku-filter-strip::-webkit-scrollbar {
  display: none;
}

.sku-filter-strip label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.sku-filter-strip select {
  min-width: 108px;
  height: 26px;
  padding: 2px 6px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
}

.sku-filter-strip button {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 7px;
  font-size: 12px;
}

.sku-filter-check {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 5px;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
}

.sku-pagination {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  margin: 0 0 5px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.sku-pagination-summary {
  white-space: nowrap;
}

.sku-pagination-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
}

.sku-pagination-controls button {
  min-height: 24px;
  height: 24px;
  padding: 0 7px;
  font-size: 12px;
}

.sku-pagination-controls button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sku-pagination-controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sku-pagination-controls select {
  height: 24px;
  padding: 1px 5px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
}

.sku-sheet-wrap {
  max-height: calc(100vh - 182px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sku-sheet-table {
  width: max-content;
  min-width: max-content;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  color: #1f2937;
}

.sku-sheet-table th,
.sku-sheet-table td {
  height: 64px;
  padding: 2px 4px;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  vertical-align: middle;
  overflow: hidden;
  white-space: normal;
  line-height: 1.18;
}

.sku-sheet-table th {
  height: 30px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8fafc;
  color: #111827;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 #dbe2ea;
}

.sku-sheet-table .sku-sheet-group-row th {
  top: 0;
  z-index: 8;
  height: 22px;
  padding: 2px 4px;
  border-bottom: 1px solid #cbd5e1;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sku-sheet-table .sku-sheet-column-row th {
  top: 22px;
}

.sku-sheet-table .sku-sheet-group-row th:nth-child(1),
.sku-sheet-table .sku-sheet-group-row th:nth-child(2) {
  left: auto;
  width: auto;
  box-shadow: inset 0 -1px 0 #cbd5e1;
}

.sku-header-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

.sku-header-cell span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sku-ai-header-btn {
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  place-items: center;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.sku-ai-header-btn:hover:not(:disabled) {
  border-color: #2563eb;
  background: #dbeafe;
}

.sku-ai-header-btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

.sku-sheet-table tbody tr:nth-child(even) td {
  background: #fbfcfe;
}

.sku-sheet-table tbody tr:hover td {
  background: #f0f7ff;
}

.sku-sheet-row {
  cursor: pointer;
}

.sku-sheet-table th:nth-child(1),
.sku-sheet-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 4;
  width: 66px;
  min-width: 66px;
  max-width: 66px;
  background: #fff;
}

.sku-sheet-table th:nth-child(1) {
  z-index: 7;
  background: #f8fafc;
}

.sku-sheet-table th:nth-child(2),
.sku-sheet-table td:nth-child(2) {
  position: sticky;
  left: 66px;
  z-index: 4;
  width: clamp(214px, 12vw, 240px);
  min-width: 214px;
  max-width: 240px;
  background: #fff;
  box-shadow: 1px 0 0 #cbd5e1;
}

.sku-sheet-table th:nth-child(2) {
  z-index: 7;
  background: #f8fafc;
}

.sku-sheet-table .sku-sheet-group-row th,
.sku-sheet-table .sku-sheet-group-row th:nth-child(1),
.sku-sheet-table .sku-sheet-group-row th:nth-child(2) {
  position: sticky;
  top: 0;
  left: auto;
  z-index: 8;
  width: auto;
  background-color: #f1f5f9;
  box-shadow: inset 0 -1px 0 #cbd5e1;
}

.sku-sheet-table tbody tr:nth-child(even) td:nth-child(1),
.sku-sheet-table tbody tr:nth-child(even) td:nth-child(2) {
  background-color: #fbfcfe;
}

.sku-sheet-table tbody tr:hover td:nth-child(1),
.sku-sheet-table tbody tr:hover td:nth-child(2) {
  background-color: #f0f7ff;
}

.sku-sheet-table .image-col {
  width: 66px;
  min-width: 66px;
  max-width: 66px;
}

.sku-sheet-table .name-col {
  width: clamp(102px, 7vw, 126px);
  min-width: 102px;
  max-width: 126px;
}

.sku-sheet-table .sku-main-col {
  width: clamp(214px, 12vw, 240px);
  min-width: 214px;
  max-width: 240px;
}

.sku-sheet-table .status-col {
  width: clamp(76px, 5vw, 94px);
  min-width: 76px;
  max-width: 94px;
}

.sku-sheet-table .actions-col {
  width: clamp(90px, 6vw, 112px);
  min-width: 90px;
  max-width: 112px;
}

.sku-sheet-table .days-col,
.sku-sheet-table .number-col,
.sku-sheet-table .price-col,
.sku-sheet-table .rate-col {
  width: clamp(58px, 4.5vw, 76px);
  min-width: 58px;
  max-width: 76px;
}

.sku-sheet-table .title-col {
  width: clamp(168px, 12vw, 220px);
  min-width: 168px;
  max-width: 220px;
}

.sku-sheet-table .category-col {
  width: clamp(104px, 7vw, 132px);
  min-width: 104px;
  max-width: 132px;
}

.sku-sheet-table .code-col {
  width: clamp(92px, 6vw, 112px);
  min-width: 92px;
  max-width: 112px;
}

.sku-sheet-table .sku-code-col {
  width: clamp(102px, 7vw, 122px);
  min-width: 102px;
  max-width: 122px;
}

.sku-sheet-table .color-col {
  width: clamp(126px, 8vw, 148px);
  min-width: 126px;
  max-width: 148px;
}

.sku-sheet-table .platform-col {
  width: clamp(136px, 9vw, 164px);
  min-width: 136px;
  max-width: 164px;
}

.sku-sheet-table .platform-tag-col {
  width: clamp(96px, 6vw, 120px);
  min-width: 96px;
  max-width: 120px;
}

.sku-sheet-table .route-col {
  width: clamp(108px, 7vw, 128px);
  min-width: 108px;
  max-width: 128px;
}

.sku-sheet-table .warehouse-col {
  width: clamp(106px, 7vw, 128px);
  min-width: 106px;
  max-width: 128px;
}

.sku-sheet-table .pack-col,
.sku-sheet-table .note-col,
.sku-sheet-table .source-col,
.sku-sheet-table .label-col {
  width: clamp(92px, 6vw, 112px);
  min-width: 92px;
  max-width: 112px;
}

.sku-sheet-table .link-col {
  width: clamp(82px, 5vw, 98px);
  min-width: 82px;
  max-width: 98px;
}

.sku-sheet-table .date-col {
  width: clamp(86px, 5vw, 100px);
  min-width: 86px;
  max-width: 100px;
}

.sku-sheet-table .owner-col {
  width: clamp(58px, 4vw, 72px);
  min-width: 58px;
  max-width: 72px;
}

.sku-sheet-table .ops-col {
  width: clamp(72px, 5vw, 96px);
  min-width: 72px;
  max-width: 96px;
}

.sku-image-cell {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  overflow: hidden;
  cursor: zoom-in;
}

.sku-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  display: block;
}

.sku-image-empty {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 7px;
  color: #94a3b8;
  background: #f8fafc;
  font-size: 11px;
}

.sku-image-placeholder {
  gap: 2px;
  border-style: solid;
  background: linear-gradient(135deg, #e0f2fe 0%, #eef2ff 100%);
  color: #1e3a8a;
  font-weight: 800;
}

.sku-image-placeholder strong {
  font-size: 13px;
  line-height: 1;
}

.sku-main-code {
  display: grid;
  gap: 1px;
  min-width: 0;
  align-content: center;
}

.sku-main-code .sku-code-line,
.platform-product-sku .sku-code-line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 3px;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  color: #334155;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.platform-product-sku .sku-code-line {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 6px;
  text-align: left;
}

.sku-main-code .sku-code-line b,
.platform-product-sku .sku-code-line b {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-weight: 800;
  text-overflow: ellipsis;
}

.platform-product-sku .sku-code-line b {
  overflow: visible;
  text-overflow: clip;
}

.sku-main-code .sku-code-line em,
.platform-product-sku .sku-code-line em {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
}

.sku-main-code .sku-code-line.platform-sku em,
.sku-main-code .sku-code-line.platform-skc em,
.platform-product-sku .sku-code-line.platform-sku em,
.platform-product-sku .sku-code-line.platform-skc em {
  color: #475569;
  font-weight: 800;
}

.sku-title-text {
  display: -webkit-box;
  max-height: 51px;
  overflow: hidden;
  color: #111827;
  font-size: 11px;
  line-height: 1.16;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.sku-category-text {
  display: -webkit-box;
  max-height: 51px;
  overflow: hidden;
  color: #111827;
  font-size: 11px;
  line-height: 1.16;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.sku-sheet-status {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 7px;
  background: #e8f7ef;
  color: #166534;
  font-weight: 800;
  line-height: 1.1;
}

.sku-sheet-status.warn {
  background: #fff7ed;
  color: #c2410c;
}

.sku-sheet-status.danger {
  background: #fef2f2;
  color: #b91c1c;
}

.sku-association-workbench {
  display: grid;
  gap: 8px;
  margin: 6px 0;
  padding: 10px;
  border: 1px solid #d6dde8;
  border-radius: 8px;
  background: #fff;
}

.sku-association-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sku-association-head > div:first-child {
  min-width: 0;
}

.sku-association-head span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sku-association-head h3 {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 15px;
}

.sku-association-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}

.sku-association-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  min-width: 0;
  padding: 9px 10px 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
  border-left-width: 4px;
}

.sku-association-card > i {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #e5e7eb;
  color: #334155;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.sku-association-card strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
}

.sku-association-card p {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 12px;
}

.sku-association-card dl {
  grid-column: 1 / -1;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 0;
}

.sku-association-card dl div {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.sku-association-card dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.sku-association-card dd {
  margin: 0;
  color: #111827;
  font-size: 12px;
  font-weight: 800;
}

.sku-association-card.tone-model {
  border-left-color: #2563eb;
}

.sku-association-card.tone-sales {
  border-left-color: #059669;
}

.sku-association-card.tone-platform {
  border-left-color: #7c3aed;
}

.sku-association-card.tone-fulfillment {
  border-left-color: #0891b2;
}

.sku-association-card.tone-exception {
  border-left-color: #dc2626;
}

.sku-association-rules,
.sku-association-alerts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sku-association-rules span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.sku-association-alerts button {
  display: inline-flex;
  max-width: 420px;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #fed7aa;
  border-radius: 7px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
}

.sku-association-alerts button span,
.sku-association-alerts button em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sku-association-alerts button em {
  color: #c2410c;
  font-style: normal;
}

.sku-association-status {
  display: inline-flex;
  min-height: 19px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e8f7ef;
  color: #166534;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.sku-association-status.warn {
  background: #fff7ed;
  color: #c2410c;
}

.sku-association-status.danger {
  background: #fef2f2;
  color: #b91c1c;
}

.sku-inline-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.sku-inline-tag.tone-prepack {
  background: #e8eef7;
  color: #334155;
}

.sku-inline-tag.tone-bundle {
  background: #ecfeff;
  color: #0e7490;
}

.sku-inline-tag.tone-expanded {
  background: #f3e8ff;
  color: #7e22ce;
}

.sku-inline-tag.tone-multi {
  background: #eef2ff;
  color: #4338ca;
}

.sku-inline-tag.tone-warn {
  background: #fff7ed;
  color: #c2410c;
}

.sku-tag-stack {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  min-width: 0;
}

.sku-route-cell,
.sku-warehouse-cell {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.sku-route-cell span,
.sku-route-cell small,
.sku-route-cell em,
.sku-warehouse-cell span,
.sku-warehouse-cell small {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sku-warehouse-cell strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sku-sheet-table th.group-basic,
.sku-sheet-table td.sku-col-basic {
  background-image: linear-gradient(90deg, rgba(5, 150, 105, 0.06), rgba(5, 150, 105, 0));
}

.sku-sheet-table th.group-model,
.sku-sheet-table td.sku-col-model {
  background-image: linear-gradient(90deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0));
}

.sku-sheet-table th.group-platform,
.sku-sheet-table td.sku-col-platform {
  background-image: linear-gradient(90deg, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0));
}

.sku-sheet-table th.group-route,
.sku-sheet-table td.sku-col-route {
  background-image: linear-gradient(90deg, rgba(8, 145, 178, 0.07), rgba(8, 145, 178, 0));
}

.sku-sheet-table th.group-warehouse,
.sku-sheet-table td.sku-col-warehouse {
  background-image: linear-gradient(90deg, rgba(71, 85, 105, 0.06), rgba(71, 85, 105, 0));
}

.sku-sheet-table th.group-opsdata,
.sku-sheet-table td.sku-col-opsdata {
  background-image: linear-gradient(90deg, rgba(217, 119, 6, 0.05), rgba(217, 119, 6, 0));
}

.sku-sheet-table th.group-actions,
.sku-sheet-table td.sku-col-actions {
  background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0));
}

.sku-sheet-table .platform-row-missing td {
  background-color: #fffbeb;
}

.sku-sheet-table .platform-row-missing:hover td {
  background-color: #fff7ed;
}

.sku-sheet-table.model-management-table {
  min-width: 1080px;
  table-layout: fixed;
}

.sku-sheet-table.model-management-table th,
.sku-sheet-table.model-management-table td {
  height: 38px;
  padding: 2px 5px;
  line-height: 1.14;
}

.sku-sheet-table.model-management-table .sku-sheet-group-row th {
  left: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 16px;
  padding: 0 5px;
  z-index: 10;
}

.sku-sheet-table.model-management-table .sku-sheet-column-row th {
  top: 16px;
  z-index: 9;
}

.sku-sheet-table.model-management-table .sku-sheet-column-row th:nth-child(1),
.sku-sheet-table.model-management-table tbody td:nth-child(1) {
  left: auto;
  width: 290px;
  min-width: 290px;
  max-width: 290px;
  box-shadow: none;
}

.sku-sheet-table.model-management-table tbody td:nth-child(1),
.sku-sheet-table.model-management-table tbody td:nth-child(2) {
  position: static;
  left: auto;
  z-index: auto;
}

.sku-sheet-table.model-management-table .sku-sheet-column-row th:nth-child(2),
.sku-sheet-table.model-management-table tbody td:nth-child(2) {
  left: auto;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  box-shadow: none;
}

.sku-sheet-table.model-management-table .sku-sheet-column-row th:nth-child(3),
.sku-sheet-table.model-management-table tbody td:nth-child(3) {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
}

.sku-sheet-table.model-management-table .sku-sheet-column-row th:nth-child(4),
.sku-sheet-table.model-management-table tbody td:nth-child(4) {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

.sku-sheet-table.model-management-table .sku-sheet-column-row th:nth-child(5),
.sku-sheet-table.model-management-table tbody td:nth-child(5) {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

.model-management-table .model-identity-cell strong,
.model-management-table .model-file-cell strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

.model-management-table .model-identity-cell {
  display: block;
}

.model-management-table .model-identity-cell span,
.model-management-table .model-identity-cell small {
  display: inline-block;
  margin-right: 6px;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.model-management-table .model-chip-list span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-management-table .model-chip-list,
.model-management-table .model-color-list,
.model-management-table .model-pack-list,
.model-management-table .model-issue-list {
  flex-wrap: nowrap;
  overflow: hidden;
}

.model-management-table .model-color-list span,
.model-management-table .model-pack-list .sku-inline-tag,
.model-management-table .model-issue-list span {
  flex: 0 0 auto;
}

.sku-sheet-row.assoc-danger td:first-child {
  box-shadow: inset 3px 0 0 #dc2626;
}

.sku-sheet-row.assoc-warn td:first-child {
  box-shadow: inset 3px 0 0 #f59e0b;
}

.sku-sheet-row.assoc-ok td:first-child {
  box-shadow: inset 3px 0 0 #16a34a;
}

.ecommerce-platform-table .sku-sheet-row.assoc-danger td:first-child,
.ecommerce-platform-table .sku-sheet-row.assoc-warn td:first-child,
.ecommerce-platform-table .sku-sheet-row.assoc-ok td:first-child {
  box-shadow: none;
}

.sku-action-tags {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.sku-action-tags span,
.sku-action-tags em {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 5px;
  border-radius: 7px;
  background: #eef2ff;
  color: #334155;
  font-style: normal;
  font-weight: 700;
}

.sku-sheet-actions {
  flex-wrap: nowrap;
  gap: 4px;
}

.sku-detail-backdrop {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(15, 23, 42, 0.28);
}

.sku-detail-drawer {
  display: flex;
  flex-direction: column;
  width: min(760px, 92vw);
  height: 100vh;
  background: #f8fafc;
  border-left: 1px solid #cbd5e1;
  box-shadow: -18px 0 40px rgba(15, 23, 42, 0.18);
}

.sku-detail-head,
.sku-detail-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.sku-detail-foot {
  border-top: 1px solid #e2e8f0;
  border-bottom: 0;
  justify-content: flex-end;
}

.sku-detail-head span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.sku-detail-head h2 {
  margin: 2px 0;
  font-size: 20px;
  letter-spacing: 0;
}

.sku-detail-head p {
  margin: 0;
  color: #64748b;
}

.sku-detail-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px;
}

.sku-detail-section {
  position: relative;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-left-width: 4px;
  border-radius: 8px;
  background: #fff;
}

.sku-detail-section-summary {
  border-left-color: #059669;
}

.sku-detail-section-model {
  border-left-color: #2563eb;
}

.sku-detail-section-platform {
  border-left-color: #7c3aed;
}

.sku-detail-section-route {
  border-left-color: #0891b2;
}

.sku-detail-section-warehouse {
  border-left-color: #475569;
}

.sku-detail-section-exception {
  border-left-color: #dc2626;
  background: #fffafa;
}

.sku-detail-section-image,
.sku-detail-section-material,
.sku-detail-section-fields {
  border-left-color: #94a3b8;
}

.sku-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sku-detail-section-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 14px;
}

.sku-detail-section-head h3::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}

.sku-detail-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.sku-detail-image-grid button {
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  cursor: zoom-in;
}

.sku-detail-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.sku-detail-platforms,
.sku-detail-materials,
.sku-bom-list,
.sku-exception-list {
  display: grid;
  gap: 8px;
}

.sku-detail-platforms article,
.sku-detail-materials article,
.sku-bom-list article,
.sku-exception-list article {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.sku-detail-platforms strong,
.sku-detail-materials strong,
.sku-bom-list strong,
.sku-exception-list strong {
  color: #0f172a;
}

.sku-detail-platforms span,
.sku-detail-platforms em,
.sku-detail-materials span,
.sku-bom-list span,
.sku-bom-list em,
.sku-exception-list span {
  color: #64748b;
  font-style: normal;
  font-size: 12px;
}

.sku-detail-materials article {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.sku-detail-materials article span {
  grid-column: 2;
}

.sku-detail-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 8px;
}

.sku-detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 8px;
}

.sku-association-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 8px;
}

.sku-detail-field-grid > div,
.sku-detail-summary-grid > div,
.sku-association-detail-grid > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
}

.sku-detail-field-grid span,
.sku-detail-summary-grid span,
.sku-association-detail-grid span {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.sku-detail-field-grid strong,
.sku-detail-summary-grid strong,
.sku-association-detail-grid strong {
  display: block;
  min-width: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sku-bom-list {
  margin-top: 8px;
}

.sku-bom-list article {
  grid-template-columns: minmax(0, 1.3fr) auto auto;
  align-items: center;
}

.sku-exception-list article.warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.sku-exception-list article.danger {
  border-color: #fecaca;
  background: #fef2f2;
}

.sku-association-editor textarea {
  min-height: 74px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.product-section.sku-editor-basic,
.product-section.sku-editor-sales,
.product-section.sku-editor-model,
.product-section.sku-editor-fulfillment,
.product-section.sku-editor-platform,
.product-section.sku-editor-warehouse {
  border-left-width: 4px;
}

.product-section.sku-editor-basic {
  border-left-color: #059669;
}

.product-section.sku-editor-sales {
  border-left-color: #16a34a;
}

.product-section.sku-editor-model {
  border-left-color: #2563eb;
  background: #f8fbff;
}

.product-section.sku-editor-fulfillment {
  border-left-color: #0891b2;
  background: #f8fdff;
}

.product-section.sku-editor-platform {
  border-left-color: #7c3aed;
}

.product-section.sku-editor-warehouse {
  border-left-color: #475569;
}

.sku-editor-readonly-list {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.sku-editor-readonly-list article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
}

.sku-editor-readonly-list strong,
.sku-editor-readonly-list span,
.sku-editor-readonly-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sku-editor-readonly-list span,
.sku-editor-readonly-list em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.sku-editor-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 8px;
  padding: 8px;
}

.sku-editor-summary-grid > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
}

.sku-editor-summary-grid span {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.sku-editor-summary-grid strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.actions .text-icon {
  flex: 0 0 auto;
}

.json-block {
  max-height: 320px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
  color: #24313a;
  background: #f7fafc;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 160px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--accent-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag.success {
  background: #dcfce7;
  color: #166534;
}

.tag.danger {
  background: #fee2e2;
  color: var(--danger);
}

.inline-task-btn {
  min-width: 86px;
  min-height: 34px;
  border-color: rgba(42, 111, 151, 0.35);
  background: #eef7ff;
  color: #1266a7;
  font-weight: 700;
}

.inline-task-btn.secondary {
  background: #f5f7f9;
  color: #334155;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.segmented button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.print-consumable-shell {
  display: grid;
  gap: 14px;
}

.production-management-shell {
  display: grid;
  gap: 14px;
}

.production-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 14px;
  align-items: start;
}

.production-demand-panel,
.production-schedule-panel,
.production-print-panel,
.production-audit-panel {
  grid-column: 1 / -1;
}

.production-panel {
  min-width: 0;
}

.production-panel .panel-head {
  align-items: flex-start;
  gap: 12px;
}

.production-panel .panel-head > div {
  min-width: 0;
}

.production-panel .panel-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.production-table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.production-table-wrap table {
  min-width: 1060px;
}

.production-preview-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.production-preview-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 10px;
}

.production-preview-summary div {
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-tint);
}

.production-preview-summary span,
.production-gantt-row span,
.production-printer-card dt {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.production-preview-summary strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 22px;
}

.production-strategy {
  padding: 10px 12px;
  border: 1px solid rgba(20, 160, 152, 0.24);
  border-radius: 8px;
  background: var(--aqua-soft);
  color: #0f5d56;
  font-size: 13px;
  font-weight: 700;
}

.production-conflicts {
  display: grid;
  gap: 8px;
}

.production-conflicts span {
  padding: 8px 10px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
}

.production-gantt-list {
  display: grid;
  gap: 10px;
}

.production-gantt-row {
  position: relative;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.production-gantt-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-gantt-row em {
  position: absolute;
  left: 12px;
  right: auto;
  bottom: 7px;
  width: var(--pm-width, 34%);
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--aqua), var(--accent));
}

.production-printer-grid {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.production-printer-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.production-printer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.production-printer-head strong {
  display: block;
  color: var(--text);
}

.production-printer-head span {
  color: var(--muted);
  font-size: 12px;
}

.production-printer-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}

.production-printer-card dd {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-printer-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.58);
}

.production-printer-form input,
.production-printer-form select {
  width: 100%;
  min-width: 0;
}

.production-printer-form button {
  min-width: 120px;
}

.production-material-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
}

.production-material-list span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
}

.consumable-table table {
  min-width: 1180px;
}

.consumable-thumb {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  border: 1px solid var(--line);
  object-fit: cover;
  background: #fff;
  display: block;
}

.image-preview-trigger {
  display: inline-flex;
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.thumb-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.inline-number-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  gap: 8px;
  min-width: 280px;
}

.inline-number-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.inline-number-grid input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 6px 8px;
}

.muted-line {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subtle {
  background: #fbfcfd;
  color: var(--muted);
}

.consumable-recognize-grid {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}

.recognize-preview {
  margin-bottom: 12px;
}

.recognize-preview .consumable-thumb {
  width: 96px;
  height: 96px;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compact-table {
  min-width: 640px;
}

.task-notice-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 66px;
  justify-content: center;
}

.task-notice-btn strong {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
}

.task-hero {
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 78% 28%, rgba(220, 232, 255, 0.48), transparent 34%),
    linear-gradient(135deg, rgba(237, 247, 251, 0.9), rgba(255, 255, 255, 0.94)),
    rgba(255, 255, 255, 0.9);
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1.58fr);
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
}

.task-hero span {
  color: var(--muted);
}

.task-hero h2 {
  margin: 4px 0 0;
  font-size: 24px;
}

.task-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

.task-kpis div,
.task-metric-list div,
.task-detail-grid div {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.86);
  padding: 12px;
  min-width: 0;
  box-shadow: 0 6px 16px rgba(37, 99, 111, 0.035);
}

.task-kpis span,
.task-metric-list span,
.task-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.task-kpis strong,
.task-metric-list strong,
.task-detail-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.task-module-card {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-content: start;
  align-items: center;
  text-align: left;
  border-color: var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.76), rgba(255, 255, 255, 0.96) 42%),
    #fff;
  padding: 10px;
  box-shadow: var(--shadow-soft);
}

.task-module-card span {
  width: 32px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(79, 91, 213, 0.18);
  border-radius: 999px;
  background: rgba(79, 91, 213, 0.08);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.task-module-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.task-module-card b {
  justify-self: end;
  font-size: 20px;
  line-height: 1.1;
}

.task-module-card em {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-module-card.active {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(238, 242, 255, 0.92), rgba(255, 255, 255, 0.98) 46%),
    #fff;
  box-shadow: 0 0 0 3px rgba(79, 91, 213, 0.12), var(--shadow-soft);
}

.task-module-card.active span {
  background: var(--accent);
  color: #fff;
}

.task-layout {
  display: grid;
  grid-template-columns: minmax(560px, 7fr) minmax(300px, 3fr);
  gap: 14px;
  align-items: start;
}

.task-list-panel,
.task-detail-panel {
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.72), rgba(255, 255, 255, 0.94) 36%),
    var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  min-width: 0;
}

.task-list-head {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.task-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.task-card-list {
  display: grid;
  gap: 14px;
  padding: 12px;
  max-height: calc(100vh - 330px);
  overflow: auto;
}

.task-card-group {
  display: grid;
  gap: 8px;
}

.task-card-group-collapsible {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.task-card-group-collapsible summary {
  display: block;
  list-style: none;
  cursor: pointer;
}

.task-card-group-collapsible summary::-webkit-details-marker {
  display: none;
}

.task-card-group-collapsible:not([open]) .task-card-group-head {
  min-height: 42px;
  padding: 4px 8px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.58);
}

.task-card-group-collapsible:not([open]) .task-card-group-head::after {
  content: "展开";
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.task-card-group-collapsible[open] .task-card-group-body {
  margin-top: 8px;
}

.task-card-group-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.task-card-group-head div {
  min-width: 0;
}

.task-card-group-head strong,
.task-card-group-head span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-group-head strong {
  font-size: 14px;
}

.task-card-group-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.task-card-group-head b {
  flex: 0 0 auto;
  min-width: 42px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.task-card-group-body {
  display: grid;
  gap: 10px;
}

.task-group-empty {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-size: 13px;
}

.task-card {
  width: 100%;
  height: auto;
  min-height: 132px;
  text-align: left;
  display: grid;
  gap: 8px;
  align-content: start;
  border-color: var(--line);
  border-radius: var(--radius-control);
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.66), rgba(255, 255, 255, 0.96) 40%),
    #fff;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.task-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 91, 213, 0.12), var(--shadow-soft);
}

.task-card-top,
.task-card-foot,
.task-card-meta,
.task-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.task-card strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-type,
.task-card-meta,
.task-card-foot {
  color: var(--muted);
  font-size: 12px;
}

.task-card-meta span,
.task-card-foot span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-foot b {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff1f1;
  color: var(--danger);
}

.task-employee-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1.05fr) minmax(420px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.task-employee-main {
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.72), rgba(255, 255, 255, 0.94) 36%),
    var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.task-employee-head {
  height: auto;
  min-height: 58px;
}

.task-employee-head > div:first-child {
  min-width: 0;
}

.task-employee-head strong,
.task-employee-head span {
  display: block;
}

.task-employee-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.task-employee-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.task-employee-kpi-grid .task-metric-list,
.task-employee-kpi-grid div {
  min-width: 0;
}

.task-employee-kpi-grid > div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.task-employee-kpi-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.task-employee-kpi-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.task-employee-sections {
  display: grid;
  gap: 12px;
  padding: 12px;
  max-height: calc(100vh - 390px);
  overflow: auto;
}

.task-workbench-section {
  display: grid;
  gap: 8px;
}

.task-workbench-section-collapsible {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.task-workbench-section-collapsible summary {
  display: block;
  list-style: none;
  cursor: pointer;
}

.task-workbench-section-collapsible summary::-webkit-details-marker {
  display: none;
}

.task-workbench-section-collapsible:not([open]) .task-workbench-section-head {
  min-height: 42px;
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.64);
}

.task-workbench-section-collapsible:not([open]) .task-workbench-section-head::after {
  content: "展开";
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.task-workbench-section-collapsible[open] .task-workbench-card-list {
  margin-top: 8px;
}

.task-workbench-section-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-workbench-section-head div {
  min-width: 0;
}

.task-workbench-section-head strong,
.task-workbench-section-head span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-kpis div {
  min-height: 50px;
  display: grid;
  align-content: center;
  padding: 6px 8px;
}

.task-kpis span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-kpis strong {
  margin-top: 2px;
  font-size: 18px;
}

.task-workbench-section-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.task-workbench-section-head b {
  flex: 0 0 auto;
  min-width: 42px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.task-workbench-card-list {
  display: grid;
  gap: 8px;
}

.task-workbench-card-list.compact {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.task-workbench-card {
  width: 100%;
  min-width: 0;
  min-height: 116px;
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.66), rgba(255, 255, 255, 0.96) 40%),
    #fff;
  box-shadow: var(--shadow-soft);
}

.task-workbench-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 91, 213, 0.12), var(--shadow-soft);
}

.task-workbench-card.priority-urgent {
  border-color: rgba(224, 72, 72, 0.34);
}

.task-workbench-card.priority-high {
  border-color: rgba(241, 139, 51, 0.36);
}

.task-workbench-card-top,
.task-workbench-card-foot,
.task-workbench-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.task-workbench-card-top {
  justify-content: flex-start;
}

.task-workbench-card-foot {
  justify-content: space-between;
}

.task-workbench-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.task-workbench-card-top > span,
.task-workbench-card-meta,
.task-workbench-card-foot {
  color: var(--muted);
  font-size: 12px;
}

.task-workbench-card-meta span,
.task-workbench-card-foot span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-workbench-card-foot small {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.task-workbench-card-foot b {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(224, 72, 72, 0.1);
  color: var(--danger);
  font-size: 12px;
}

.task-employee-archive {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.task-employee-archive-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.task-employee-archive-metrics span {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 12px;
}

.task-employee-archive-metrics b {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 17px;
}

.task-executor-board,
.task-executor-gantt {
  display: grid;
  gap: 8px;
  padding-bottom: 4px;
}

.task-executor-board-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.task-executor-column {
  min-width: 210px;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(248, 251, 255, 0.8);
}

.task-executor-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-executor-column-head strong {
  font-size: 14px;
}

.task-executor-column-head b {
  min-width: 28px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(79, 91, 213, 0.08);
  color: var(--accent);
  font-size: 12px;
}

.task-executor-column-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.task-executor-column .task-workbench-card {
  min-height: 104px;
  padding: 9px;
}

.task-executor-gantt-axis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.task-executor-gantt-axis span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-executor-gantt-list {
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow: auto;
}

.task-executor-gantt-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(170px, 0.9fr) minmax(180px, 1.5fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  text-align: left;
}

.task-executor-gantt-row strong,
.task-executor-gantt-row span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-executor-gantt-row span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.task-assigner-layout {
  display: grid;
  grid-template-columns: minmax(640px, 7fr) minmax(300px, 3fr);
  gap: 14px;
  align-items: start;
}

.task-assigner-main {
  min-width: 0;
  display: grid;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.72), rgba(255, 255, 255, 0.94) 36%),
    var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.task-assigner-kpis {
  border-bottom: 0;
  padding-bottom: 0;
}

.task-assigner-board {
  display: grid;
  gap: 8px;
  padding: 0 12px;
}

.task-assigner-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 10px;
  max-height: 340px;
  overflow: auto;
}

.task-assigner-group {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.84);
}

.task-assigner-group.is-risk {
  border-color: rgba(224, 72, 72, 0.34);
  background: rgba(255, 247, 247, 0.86);
}

.task-assigner-gantt {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.task-assigner-gantt-legend {
  justify-content: flex-end;
}

.task-assigner-gantt-axis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding-left: 210px;
  color: var(--muted);
  font-size: 12px;
}

.task-assigner-gantt-axis span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-assigner-gantt-list {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}

.task-assigner-gantt-group {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.82);
}

.task-assigner-gantt-group.is-risk {
  border-color: rgba(224, 72, 72, 0.34);
  background: rgba(255, 247, 247, 0.86);
}

.task-assigner-gantt-person {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.task-assigner-gantt-person strong,
.task-assigner-gantt-person span,
.task-assigner-gantt-person em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-assigner-gantt-person span,
.task-assigner-gantt-person em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.task-assigner-gantt-rows {
  display: grid;
  gap: 6px;
}

.task-assigner-gantt-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(220px, 1.4fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248, 251, 255, 0.78);
  text-align: left;
}

.task-assigner-gantt-row strong,
.task-assigner-gantt-row span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-assigner-gantt-row span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.task-assigner-main > .task-workbench-section {
  padding: 0 12px 12px;
}

.task-assigner-main > .task-workbench-section + .task-workbench-section {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.task-assigner-archive {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.task-assigner-archive-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.task-assigner-archive-metrics span {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 12px;
}

.task-assigner-archive-metrics b {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 17px;
}

.task-assigner-archive-list {
  display: grid;
  gap: 8px;
}

.task-assigner-archive-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  text-align: left;
}

.task-assigner-archive-card.is-late {
  border-color: rgba(224, 72, 72, 0.34);
  background: rgba(255, 247, 247, 0.86);
}

.task-assigner-archive-card strong,
.task-assigner-archive-card span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-assigner-archive-card span,
.task-assigner-archive-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.task-assigner-archive-card b {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(13, 148, 136, 0.12);
  color: #0f766e;
  font-size: 12px;
}

.task-assigner-archive-card.is-late b {
  background: rgba(224, 72, 72, 0.12);
  color: #c0262d;
}

.task-detail-panel {
  padding: 14px;
  position: sticky;
  top: 86px;
}

.task-detail-head {
  align-items: flex-start;
  margin-bottom: 12px;
}

.task-detail-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.task-detail-meta-line span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-meta-line b {
  flex: 0 0 auto;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(79, 91, 213, 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.task-detail-head h3 {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-word;
}

.task-detail-head > div {
  min-width: 0;
}

.task-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.task-detail-grid div {
  min-height: 64px;
  display: grid;
  align-content: center;
  padding: 9px 12px;
}

.task-detail-grid strong {
  font-size: 14px;
  line-height: 1.35;
}

.task-description {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--panel-tint);
  padding: 10px 12px;
  color: #35444d;
  line-height: 1.55;
  white-space: pre-wrap;
}

.task-attachments {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #fff;
  padding: 10px 12px;
}

.task-attachments h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.task-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-attachment-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.task-attachment-image-card {
  position: relative;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.task-attachment-image-card > button:not(.task-attachment-delete) {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #f8fafc;
  overflow: hidden;
}

.task-attachment-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-attachment-image-card figcaption {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-top: 1px solid var(--line);
}

.task-attachment-image-card a {
  min-width: 0;
  overflow: hidden;
  color: var(--accent-dark);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-attachment-card {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--panel-tint);
  padding: 0 9px;
  color: var(--accent-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-attachment-file-wrap {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.task-attachment-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(224, 72, 72, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #c0262d;
  font-size: 18px;
  line-height: 1;
  box-shadow: var(--shadow-soft);
  z-index: 2;
}

.task-attachment-file-wrap .task-attachment-delete {
  top: -9px;
  right: -9px;
}

.task-attachment-delete:hover {
  border-color: rgba(224, 72, 72, 0.8);
  background: #fff7f7;
}

.task-attachment-delete:disabled {
  cursor: wait;
  opacity: 0.6;
}

.task-attachment-card.with-preview {
  gap: 8px;
  width: min(100%, 280px);
  min-height: 74px;
  padding: 6px;
  background: #fff;
}

.task-attachment-thumb {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  min-height: 62px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.task-attachment-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-attachment-link {
  min-width: 0;
  overflow: hidden;
  color: var(--accent-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.task-actions button {
  min-height: 34px;
  padding: 0 13px;
}

.task-suggestion-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(241, 139, 51, 0.32);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255, 250, 242, 0.94), rgba(255, 255, 255, 0.96)),
    #fff;
  box-shadow: var(--shadow-soft);
}

.task-suggestion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-suggestion-head strong,
.task-suggestion-card strong {
  display: block;
  color: var(--text);
}

.task-suggestion-head span,
.task-suggestion-card span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.task-suggestion-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.task-suggestion-card,
.task-suggestion-more {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid rgba(241, 139, 51, 0.28);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.88);
}

.task-suggestion-card {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.task-suggestion-card:hover,
.task-suggestion-more:hover {
  border-color: #f18b33;
  box-shadow: 0 0 0 3px rgba(241, 139, 51, 0.1);
}

.task-suggestion-card strong,
.task-suggestion-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-suggestion-card em {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(241, 139, 51, 0.14);
  color: #b85c00;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.task-suggestion-more {
  justify-content: center;
  padding: 0 12px;
  color: #b85c00;
  font-weight: 800;
}

.task-auto-sync-modal {
  max-width: 760px;
}

.task-auto-sync-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.task-auto-sync-head span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.task-auto-sync-list {
  display: grid;
  gap: 8px;
  max-height: min(56vh, 520px);
  overflow: auto;
}

.task-auto-candidate {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #fff;
  padding: 12px;
}

.task-auto-candidate input {
  margin-top: 2px;
}

.task-auto-candidate span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.task-auto-candidate strong,
.task-auto-candidate em,
.task-auto-candidate small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-auto-candidate strong b {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(241, 139, 51, 0.14);
  color: #b85c00;
  font-size: 12px;
}

.task-auto-candidate em,
.task-auto-candidate small {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.task-timeline h4 {
  margin: 0 0 8px;
}

.task-event {
  display: grid;
  grid-template-columns: 104px 64px 1fr;
  gap: 8px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding: 8px 0;
}

.task-event span,
.task-event p {
  margin: 0;
  color: var(--muted);
}

.task-stats-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(300px, 1fr);
  gap: 14px;
}

.task-stats-grid .panel:last-child {
  grid-column: 1 / -1;
}

.task-metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.task-admin-review {
  display: grid;
  gap: 14px;
}

.task-admin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.task-admin-kpis > div {
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.74), rgba(255, 255, 255, 0.96) 42%),
    #fff;
  box-shadow: var(--shadow-soft);
}

.task-admin-kpis span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.task-admin-kpis strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 24px;
}

.task-admin-overview-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.35fr) minmax(320px, 0.65fr);
  gap: 14px;
  align-items: stretch;
}

.task-admin-employee-board,
.task-admin-archive,
.task-admin-gantt-panel {
  min-width: 0;
}

.task-admin-employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 12px;
  max-height: 440px;
  overflow: auto;
}

.task-admin-employee-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.84);
}

.task-admin-employee-card.is-risk {
  border-color: rgba(224, 72, 72, 0.34);
  background: rgba(255, 247, 247, 0.86);
}

.task-admin-employee-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.task-admin-employee-head strong,
.task-admin-employee-head span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-admin-employee-head strong {
  color: var(--text);
}

.task-admin-employee-head span,
.task-admin-employee-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.task-admin-employee-head em {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(79, 91, 213, 0.08);
  color: var(--accent);
  font-weight: 700;
}

.task-admin-employee-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.task-admin-employee-metrics span {
  min-width: 0;
  padding: 6px;
  border-radius: 8px;
  background: rgba(241, 247, 253, 0.9);
  color: var(--muted);
  font-size: 12px;
}

.task-admin-employee-metrics b {
  color: var(--text);
}

.task-admin-employee-tasks {
  display: grid;
  gap: 6px;
}

.task-admin-employee-task,
.task-admin-gantt-row,
.task-admin-archive-list button {
  width: 100%;
  min-width: 0;
  text-align: left;
}

.task-admin-employee-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 6px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.task-admin-employee-task.is-overdue {
  border-color: rgba(224, 72, 72, 0.42);
}

.task-admin-employee-task span,
.task-admin-employee-task small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-admin-employee-task small {
  grid-column: 1 / 2;
  color: var(--muted);
  font-size: 12px;
}

.task-priority-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(79, 91, 213, 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.task-priority-chip.urgent {
  background: rgba(224, 72, 72, 0.12);
  color: #c0262d;
}

.task-priority-chip.high {
  background: rgba(241, 139, 51, 0.14);
  color: #b85c00;
}

.task-priority-chip.low {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
}

.task-admin-gantt-panel {
  overflow: hidden;
}

.task-admin-gantt-panel .panel-head {
  gap: 10px;
  flex-wrap: wrap;
}

.task-admin-gantt-tools {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-gantt-filters {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.task-gantt-filters select {
  min-width: 132px;
  max-width: 190px;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-size: 12px;
}

.task-gantt-filter-reset {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 700;
}

.task-gantt-filter-reset:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.task-gantt-filter-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.task-admin-legend {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.task-admin-legend span {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.task-admin-legend .urgent {
  background: rgba(241, 139, 51, 0.14);
  color: #b85c00;
}

.task-admin-legend .overdue {
  background: rgba(224, 72, 72, 0.12);
  color: #c0262d;
}

.task-admin-legend .done {
  background: rgba(13, 148, 136, 0.12);
  color: #0f766e;
}

.task-admin-gantt-axis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px 12px 6px 252px;
  color: var(--muted);
  font-size: 12px;
}

.task-admin-gantt-axis span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-admin-gantt-list {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
  max-height: 430px;
  overflow: auto;
}

.task-admin-gantt-row {
  display: grid;
  grid-template-columns: 106px minmax(120px, 1fr) minmax(220px, 2fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.task-admin-gantt-row strong,
.task-admin-gantt-row span,
.task-admin-gantt-row em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-admin-gantt-row span,
.task-admin-gantt-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.task-admin-gantt-track {
  position: relative;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(205, 217, 232, 0.55);
}

.task-admin-gantt-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--accent);
}

.task-admin-gantt-track i.urgent,
.task-admin-gantt-track i.high {
  background: #f18b33;
}

.task-admin-gantt-track i.overdue {
  background: #e04848;
}

.task-admin-gantt-track i.done {
  background: #0d9488;
}

.task-admin-gantt-track i.low {
  background: #64748b;
}

.task-admin-archive {
  display: grid;
  gap: 12px;
}

.task-admin-archive-bar {
  display: flex;
  height: 14px;
  margin: 12px 12px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(205, 217, 232, 0.55);
}

.task-admin-archive-bar i.done {
  background: #0d9488;
}

.task-admin-archive-bar i.open {
  background: #4f5bd5;
}

.task-admin-archive-bar i.cancel {
  background: #94a3b8;
}

.task-admin-archive-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  padding: 0 12px;
}

.task-admin-archive-metrics span {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 12px;
}

.task-admin-archive-metrics b {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 18px;
}

.task-admin-archive-list {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
  max-height: 194px;
  overflow: auto;
}

.task-admin-archive-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.task-admin-archive-list span,
.task-admin-archive-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-admin-archive-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.task-admin-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.task-admin-departments {
  grid-column: 1 / -1;
}

.task-admin-load-panel,
.task-admin-critical-panel {
  grid-column: span 6;
}

.task-review-table td,
.task-review-table th {
  white-space: nowrap;
}

.task-review-table {
  min-width: 0;
  table-layout: fixed;
}

.task-review-table th:nth-child(1),
.task-review-table td:nth-child(1) {
  width: 15%;
}

.task-review-table th:nth-child(2),
.task-review-table td:nth-child(2),
.task-review-table th:nth-child(3),
.task-review-table td:nth-child(3),
.task-review-table th:nth-child(4),
.task-review-table td:nth-child(4) {
  width: 13%;
}

.task-review-table th:nth-child(5),
.task-review-table td:nth-child(5) {
  width: 22%;
}

.task-review-table th:nth-child(6),
.task-review-table td:nth-child(6) {
  width: 24%;
}

.task-review-table tr.is-risk td:first-child strong {
  color: var(--danger);
}

.task-review-progress {
  min-width: 110px;
  display: grid;
  grid-template-columns: minmax(52px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.task-review-progress span {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(205, 217, 232, 0.72);
}

.task-review-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.task-review-progress b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.task-review-assignee-list,
.task-review-critical-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  max-height: 360px;
  overflow: auto;
}

.task-review-assignee,
.task-review-critical {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.78);
}

.task-review-assignee {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.46fr);
  align-items: center;
}

.task-review-assignee strong,
.task-review-critical strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-review-assignee span,
.task-review-critical span,
.task-review-critical em {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-review-assignee.is-risk {
  border-color: rgba(224, 72, 72, 0.32);
  background: rgba(255, 247, 247, 0.82);
}

.task-review-critical {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  text-align: left;
}

.task-review-critical:hover {
  border-color: var(--accent);
}

.task-review-critical small {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.task-review-critical small b:not(.task-priority-chip) {
  min-width: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(79, 91, 213, 0.08);
  color: var(--accent);
  font-size: 11px;
}

.task-admin-workbench {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 3fr);
  gap: 14px;
  align-items: start;
}

.task-admin-filters {
  display: grid;
  grid-template-columns: 130px 130px minmax(160px, 1fr) auto;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.task-admin-task-list {
  display: grid;
  gap: 8px;
  max-height: 540px;
  overflow: auto;
  padding: 12px;
}

.task-admin-task-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.82);
}

.task-admin-task-row.active,
.task-admin-task-row:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 91, 213, 0.1);
}

.task-admin-task-row > div {
  min-width: 0;
}

.task-admin-task-row strong,
.task-admin-task-row span,
.task-admin-task-row em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-admin-task-row strong {
  color: var(--text);
}

.task-admin-task-row span,
.task-admin-task-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.task-admin-task-row small {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.task-admin-task-row small b:not(.task-priority-chip) {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(79, 91, 213, 0.08);
  color: var(--accent);
  font-size: 11px;
}

.task-admin-pager {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px 12px;
}

.task-admin-pager span {
  color: var(--muted);
  font-size: 12px;
}

.task-admin-detail-panel {
  position: sticky;
  top: 12px;
}

.temu-return-hero {
  margin-bottom: 12px;
}

.temu-return-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.receipt-hero {
  margin-bottom: 12px;
}

.receipt-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.receipt-workbench {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
}

.receipt-manual,
.receipt-photo,
.receipt-result-body {
  min-width: 0;
}

.receipt-scan-box {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.receipt-scan-head,
.receipt-scan-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.receipt-scan-head {
  justify-content: space-between;
}

.receipt-scan-head strong {
  font-size: 14px;
}

.receipt-scan-actions {
  justify-content: flex-end;
}

.receipt-scan-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 360px;
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #0f172a;
  object-fit: cover;
}

.success-text {
  color: #0f766e;
}

.danger-text {
  color: var(--danger);
}

.receipt-toolbar,
.receipt-inline-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 160px 150px;
  gap: 8px;
  padding: 12px;
}

.receipt-inline-form {
  grid-template-columns: minmax(180px, 1fr) 110px minmax(160px, 1fr) auto;
  padding: 0;
  margin-top: 10px;
}

.receipt-result {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.receipt-result-media {
  min-height: 110px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.receipt-result-media img {
  width: 100%;
  height: 100%;
  max-height: 170px;
  object-fit: cover;
  display: block;
}

.receipt-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.receipt-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, auto);
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.receipt-card-main,
.receipt-card-side,
.receipt-card-link {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.receipt-card-main strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.receipt-card-main span,
.receipt-card-side span,
.receipt-card-link {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.receipt-card-side {
  justify-items: end;
  text-align: right;
}

.receipt-card-link {
  grid-column: 1 / -1;
}

.linklike {
  width: auto;
  min-height: auto;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  font-weight: 700;
}

.receipt-linked-list {
  display: grid;
  gap: 8px;
}

.receipt-linked-list > div:not(.empty) {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.receipt-linked-list span {
  color: var(--muted);
  font-size: 12px;
}

.temu-return-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 140px 130px 130px 140px 110px auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.temu-return-data-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.temu-return-insight {
  min-width: 0;
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.temu-return-insight span,
.temu-return-insight small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.temu-return-insight strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}

.temu-return-analysis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.temu-return-wide-panel {
  grid-column: span 2;
}

.temu-return-bars {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.temu-return-bar {
  display: grid;
  gap: 5px;
}

.temu-return-bar div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  font-size: 12px;
}

.temu-return-bar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-return-bar span {
  color: var(--muted);
}

.temu-return-bar i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #2563eb);
}

.temu-return-action-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.temu-return-action-insights > div,
.temu-return-concentration > div,
.temu-return-risk-grid > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.temu-return-action-insights strong,
.temu-return-concentration strong,
.temu-return-risk-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-return-action-insights span,
.temu-return-concentration span,
.temu-return-concentration em,
.temu-return-risk-grid span,
.temu-return-risk-grid em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.temu-return-action-insights span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.temu-return-concentration,
.temu-return-risk-grid {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.temu-return-concentration strong,
.temu-return-risk-grid strong {
  font-size: 18px;
}

.temu-return-buckets {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.temu-return-buckets > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.temu-return-buckets > div > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.temu-return-buckets strong,
.temu-return-buckets span,
.temu-return-buckets small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-return-buckets span,
.temu-return-buckets small {
  color: var(--muted);
  font-size: 12px;
}

.temu-return-buckets i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #2563eb);
}

.temu-return-action-queue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.temu-return-action-queue button {
  width: 100%;
  min-width: 0;
  min-height: 96px;
  display: grid;
  gap: 7px;
  align-content: start;
  text-align: left;
  border-color: var(--line);
  background: #fff;
  padding: 12px;
}

.temu-return-action-queue button:hover {
  border-color: var(--accent);
}

.temu-return-action-queue div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.temu-return-action-queue strong,
.temu-return-action-queue span,
.temu-return-action-queue p,
.temu-return-action-queue small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-return-action-queue p,
.temu-return-action-queue small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.temu-return-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(460px, 1.22fr);
  gap: 14px;
  align-items: start;
}

.temu-return-list-panel,
.temu-return-detail-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(20, 33, 43, 0.04);
}

.temu-return-package-list {
  display: grid;
  gap: 10px;
  padding: 12px;
  max-height: calc(100vh - 420px);
  overflow: auto;
}

.temu-return-package {
  width: 100%;
  min-height: 118px;
  height: auto;
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
  border-color: var(--line);
  background: #fff;
  padding: 12px;
}

.temu-return-package.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.temu-return-package-top,
.temu-return-package-foot,
.temu-return-package-meta,
.temu-return-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.temu-return-package-top strong,
.temu-return-package-meta span,
.temu-return-package-foot span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temu-return-package-meta,
.temu-return-package-foot {
  color: var(--muted);
  font-size: 12px;
}

.temu-return-package-meta > span {
  flex: 1 1 0;
}

.temu-return-package-meta > span:nth-child(2) {
  text-align: center;
}

.temu-return-package-meta > span:nth-child(3) {
  text-align: right;
}

.temu-return-waybill {
  display: grid;
  gap: 2px;
  color: var(--text);
  line-height: 1.2;
  min-width: 0;
}

.temu-return-waybill b,
.temu-return-waybill em,
.temu-return-waybill small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  min-width: 0;
}

.temu-return-waybill b {
  color: var(--muted);
  font-weight: 500;
}

.temu-return-waybill em {
  font-size: 13px;
  font-weight: 700;
}

.temu-return-waybill small {
  color: var(--muted);
}

.temu-return-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.temu-return-flags b {
  border-radius: 999px;
  background: #fff7e6;
  color: var(--warn);
  padding: 2px 7px;
  font-size: 12px;
}

.temu-return-detail-panel {
  padding: 16px;
  position: sticky;
  top: 86px;
}

.temu-return-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.temu-return-detail-head span {
  color: var(--muted);
}

.temu-return-detail-head h3 {
  margin: 5px 0 0;
  font-size: 20px;
}

.temu-return-action {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.temu-return-action .field {
  margin-bottom: 0;
}

.temu-return-action .field.full,
.temu-return-actions {
  grid-column: 1 / -1;
}

.temu-return-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.temu-return-detail-section {
  margin-top: 14px;
}

.temu-return-detail-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.temu-return-timeline {
  display: grid;
  gap: 8px;
}

.temu-return-timeline div {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.temu-return-timeline span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 3px;
}

.temu-return-timeline p {
  margin: 0;
  line-height: 1.5;
}

.temu-return-raw {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px 12px;
}

.temu-return-raw pre {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.empty {
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(15, 23, 42, 0.38);
  display: grid;
  place-items: center;
  padding: 22px;
}

.modal {
  width: min(980px, 100%);
  max-height: min(760px, calc(100dvh - 24px));
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.78), rgba(255, 255, 255, 0.97) 34%),
    rgba(255, 255, 255, 0.97);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-head,
.modal-foot {
  min-height: 50px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.modal-foot {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
  gap: 8px;
}

.modal-head h2 {
  margin: 0;
  font-size: 17px;
}

.ops-workflow-shell {
  display: grid;
  gap: 14px;
}

.ops-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-solid);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.ops-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.ops-panel-head h2,
.ops-suggestion-group h3,
.ops-workflow-detail-body h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.ops-panel-head span,
.ops-suggestion-card p,
.ops-suggestion-card em,
.ops-suggestion-meta span,
.ops-sku-stack span,
.ops-sku-stack em,
.ops-workflow-title span,
.ops-detail-step-grid span,
.ops-detail-step-grid em,
.ops-completed-list span,
.ops-task-window-head span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ops-panel-head b,
.ops-suggestion-group h3 span {
  display: inline-flex;
  min-width: 28px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--accent-dark);
  font-size: 12px;
}

.ops-suggestion-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  padding: 14px;
}

.ops-module-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  padding: 12px;
}

@media (max-width: 1180px) {
  .ops-module-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .ops-module-grid {
    grid-template-columns: 1fr;
  }
}

.ops-module-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  min-width: 0;
  height: clamp(300px, 42vh, 420px);
  max-height: 420px;
  min-height: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-tint);
}

.ops-module-card.tone-price {
  border-left-color: #2563eb;
}

.ops-module-card.tone-sku {
  border-left-color: #64748b;
}

.ops-module-card.tone-jit,
.ops-module-card.tone-stock {
  border-left-color: #d9902f;
}

.ops-module-card.tone-stock-order {
  border-left-color: #f97316;
}

.ops-module-card.tone-sales {
  border-left-color: #16a34a;
}

.ops-module-card.tone-review {
  border-left-color: #7c3aed;
}

.ops-module-card.tone-traffic {
  border-left-color: #0891b2;
}

.ops-module-card.tone-competitor {
  border-left-color: #0f766e;
}

.ops-module-card header,
.ops-mini-issue,
.ops-followup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ops-module-card header strong {
  display: block;
  font-size: 13px;
  line-height: 1.15;
}

.ops-module-card header span,
.ops-mini-issue span,
.ops-module-items > em,
.ops-followup-row span {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.ops-module-card header b {
  display: inline-flex;
  min-width: 24px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-size: 12px;
}

.ops-module-buckets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.ops-module-buckets button {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: #fff;
}

.ops-module-buckets button.active {
  box-shadow: inset 0 0 0 1px currentColor;
}

.ops-module-buckets .bucket-activity,
.ops-mini-issue.kind-activity {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.ops-module-buckets .bucket-activity,
.ops-mini-issue.kind-activity {
  color: #1d4ed8;
}

.ops-module-buckets .bucket-declared,
.ops-mini-issue.kind-declared {
  border-color: #fed7aa;
  background: #fff7ed;
}

.ops-module-buckets .bucket-declared,
.ops-mini-issue.kind-declared {
  color: #c2410c;
}

.ops-module-buckets .bucket-launch,
.ops-mini-issue.kind-launch,
.ops-module-buckets .bucket-mapping,
.ops-mini-issue.kind-mapping {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
}

.ops-module-buckets .bucket-jit,
.ops-mini-issue.kind-jit {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.ops-module-buckets .bucket-stock,
.ops-mini-issue.kind-stock {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.ops-module-buckets .bucket-stock-request,
.ops-mini-issue.kind-stock-request {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.ops-module-buckets .bucket-stock-check,
.ops-mini-issue.kind-stock-check {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.ops-module-buckets .bucket-stock-receive,
.ops-mini-issue.kind-stock-receive {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

.ops-module-buckets .bucket-warehouse,
.ops-mini-issue.kind-warehouse {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.ops-module-buckets .bucket-trend,
.ops-mini-issue.kind-trend {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.ops-module-buckets .bucket-review,
.ops-mini-issue.kind-review,
.ops-module-buckets .bucket-diagnosis,
.ops-mini-issue.kind-diagnosis {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #5b21b6;
}

.ops-module-buckets .bucket-traffic,
.ops-mini-issue.kind-traffic {
  border-color: #a5f3fc;
  background: #ecfeff;
  color: #0e7490;
}

.ops-module-buckets .bucket-competitor,
.ops-mini-issue.kind-competitor {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
}

.ops-module-items,
.ops-followup-list {
  display: grid;
  gap: 5px;
}

.ops-module-items {
  align-content: start;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.ops-module-empty {
  min-height: 28px;
  display: grid;
  align-items: center;
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
}

.ops-mini-issue {
  grid-template-columns: minmax(0, 1fr) 88px;
  align-self: start;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.ops-mini-issue.kind-activity {
  border-left: 4px solid #2563eb;
}

.ops-mini-issue.kind-declared {
  border-left: 4px solid #f97316;
}

.ops-mini-title,
.ops-mini-title-static {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}

.ops-mini-title {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.ops-mini-title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ops-mini-codes {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 5px;
  row-gap: 1px;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.18;
}

.ops-mini-codes span {
  color: var(--muted);
  font-weight: 700;
  text-align: right;
}

.ops-mini-codes strong {
  min-width: 0;
  overflow: hidden;
  color: #53627a;
  font-size: 10.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-mini-actions,
.ops-followup-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.ops-mini-actions {
  display: grid;
  grid-template-columns: 24px 38px 22px;
  justify-content: end;
  align-self: center;
  gap: 4px;
}

.ops-mini-actions b,
.ops-followup-row b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.ops-mini-actions button,
.ops-followup-actions button {
  min-height: 22px;
  padding: 2px 6px;
  font-size: 11px;
}

.ops-mini-actions .primary {
  padding-inline: 0;
}

.ops-skc-detail-drawer {
  width: min(820px, 94vw);
}

.ops-skc-sku-list {
  display: grid;
  gap: 8px;
}

.ops-skc-sku-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.ops-skc-sku-list strong,
.ops-skc-sku-list span,
.ops-skc-sku-list em {
  display: block;
  min-width: 0;
}

.ops-skc-sku-list strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-skc-sku-list span,
.ops-skc-sku-list em {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.ops-followup-list {
  padding: 12px;
}

.ops-followup-row {
  grid-template-columns: minmax(0, 1.5fr) minmax(120px, 0.8fr) auto;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-tint);
}

.ops-followup-row.is-done {
  opacity: 0.76;
}

.ops-followup-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-manual-followup-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ops-manual-followup-form .full,
.ops-manual-followup-form .check-row {
  grid-column: 1 / -1;
}

.ops-manual-followup-form .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-suggestion-group {
  display: grid;
  gap: 10px;
  align-content: start;
}

.ops-suggestion-group h3 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ops-suggestion-group > div,
.ops-completed-list,
.ops-detail-step-grid {
  display: grid;
  gap: 10px;
}

.ops-suggestion-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-tint);
}

.ops-suggestion-card.severity-urgent {
  border-left-color: var(--danger);
}

.ops-suggestion-card.severity-high {
  border-left-color: #d9902f;
}

.ops-suggestion-main,
.ops-suggestion-meta,
.ops-sku-stack,
.ops-workflow-title,
.ops-detail-step-grid article,
.ops-task-window-head > div {
  display: grid;
  gap: 5px;
}

.ops-suggestion-main span,
.ops-risk-tag,
.ops-ok-tag {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
}

.ops-suggestion-card p {
  margin: 0;
  line-height: 1.5;
}

.ops-suggestion-meta {
  justify-items: end;
}

.ops-suggestion-meta > div,
.ops-workflow-filters,
.ops-log-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-workflow-filters {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.ops-workflow-filters input {
  min-width: min(420px, 100%);
}

.ops-workflow-table th,
.ops-workflow-table td {
  vertical-align: middle;
}

.ops-workflow-title {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.ops-step-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 220px;
}

.ops-step-pills button,
.ops-step-pills span {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.ops-step-pills .active {
  border-color: var(--blue);
  background: #eff6ff;
  color: var(--blue);
}

.ops-step-pills .done {
  border-color: #22a06b;
  background: #ecfdf5;
  color: #047857;
}

.ops-step-pills .canceled {
  border-color: #f0b4b4;
  background: #fff1f2;
  color: var(--danger);
}

.ops-risk-tag {
  background: #fff1f2;
  color: var(--danger);
}

.ops-ok-tag {
  background: var(--aqua-soft);
  color: #047857;
}

.ops-completed-list {
  padding: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ops-completed-list button {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-tint);
  text-align: left;
}

.ops-workflow-detail-modal {
  width: min(1080px, calc(100vw - 34px));
}

.ops-workflow-detail-body {
  display: grid;
  gap: 16px;
}

.ops-detail-step-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ops-detail-step-grid article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-tint);
}

.ops-detail-step-grid article.active {
  border-left: 4px solid var(--blue);
}

.ops-detail-step-grid article.done {
  border-left: 4px solid #22a06b;
}

.ops-detail-step-grid article.waiting {
  border-left: 4px solid var(--line-strong);
}

.ops-log-form {
  align-items: stretch;
}

.ops-log-form input {
  min-width: 180px;
}

.ops-log-form textarea {
  flex: 1 1 360px;
  min-height: 78px;
}

.ops-task-window {
  position: fixed;
  z-index: 70;
  width: min(340px, calc(100vw - 24px));
  max-height: min(720px, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-solid);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.ops-task-window-head,
.ops-task-window-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.ops-task-window-foot {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
}

.ops-task-window-body {
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.ops-task-window .task-detail-actions {
  display: none;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.model-split-modal {
  width: min(1040px, calc(100vw - 28px));
}

.model-split-body {
  display: grid;
  gap: 10px;
}

.model-split-target {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #0ea5e9;
  border-radius: 8px;
  background: rgba(248, 251, 255, 0.8);
}

.model-split-target span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.model-split-note {
  margin: 0;
}

.model-split-scroll {
  max-height: min(420px, 52vh);
}

.model-split-table {
  min-width: 940px;
  border-left-width: 0;
}

.model-split-table th:first-child,
.model-split-table td:first-child {
  width: 38px;
  text-align: center;
}

.model-split-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.model-split-count {
  justify-self: end;
  font-size: 12px;
  color: var(--muted);
}

.modal-actions {
  min-height: 50px;
  padding: 9px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.image-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 12, 16, 0.58);
}

.image-preview-modal {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 14px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.image-preview-modal img,
.image-preview-modal video {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 108px);
  margin: 0 auto;
  border-radius: 6px;
  object-fit: contain;
}

.image-preview-modal video {
  background: #020617;
}

.image-preview-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
}

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

.task-create-modal {
  width: min(720px, 100%);
}

.task-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.task-create-grid textarea {
  min-height: 120px;
}

.task-type-field {
  min-width: 0;
}

.task-type-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  margin-top: 6px;
}

.task-type-custom[hidden] {
  display: none;
}

.task-type-custom input {
  min-width: 0;
}

.task-type-custom button {
  min-height: 34px;
}

.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.task-attachment-upload {
  margin-top: 12px;
}

.material-upload-modal {
  width: min(1180px, 100%);
}

.material-upload-box {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(260px, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.material-upload-actions {
  justify-content: flex-end;
  margin-bottom: 8px;
}

.material-upload-table table {
  min-width: 1040px;
}

.product-modal {
  width: min(1040px, 100%);
}

.skc-group-modal {
  height: min(760px, calc(100dvh - 24px));
}

.work-order-modal {
  width: min(1080px, 100%);
}

.work-order-editor {
  display: grid;
  gap: 10px;
}

.work-order-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}

.attachment-drop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-control);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.attachment-drop:focus-visible {
  outline: 3px solid rgba(79, 91, 213, 0.18);
  border-color: var(--accent);
}

.attachment-drop.dragging,
.attachment-drop.has-file {
  border-color: var(--accent);
  background: rgba(79, 91, 213, 0.06);
}

.attachment-drop strong {
  display: block;
  margin-bottom: 5px;
}

.attachment-drop span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.attachment-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.task-attachment-summary {
  min-width: min(100%, 360px);
  flex: 1 1 360px;
}

.task-attachment-preview-list {
  display: grid;
  flex: 1 0 100%;
  gap: 8px;
}

.task-attachment-preview-list:empty {
  display: none;
}

.task-attachment-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(205, 217, 232, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.task-attachment-preview > div {
  min-width: 0;
}

.task-attachment-preview strong {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-attachment-preview small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.task-attachment-preview button {
  flex: 0 0 auto;
}

.product-editor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.skc-group-editor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.product-editor > .product-section,
.product-editor > .model-panel {
  flex: 0 0 auto;
}

.skc-group-editor > .product-section,
.skc-group-editor > .skc-style-section {
  flex: 0 0 auto;
}

.product-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  overflow: hidden;
}

.product-section-head {
  min-height: 32px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.product-section-head h3 {
  flex: 0 0 auto;
  margin: 0;
  font-size: 14px;
}

.section-hint {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.skc-form-grid {
  padding: 8px;
}

.skc-parent-section {
  border-color: #a9d7cf;
  background: linear-gradient(180deg, #f3fbf9 0%, #fbfcfd 100%);
  box-shadow: 0 8px 24px rgba(22, 124, 113, 0.08);
}

.skc-parent-head {
  min-height: 44px;
  border-bottom-color: #cbe6e1;
  background: #eaf8f5;
}

.skc-section-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.skc-section-title.compact {
  gap: 7px;
}

.skc-section-title h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
}

.skc-section-title p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.skc-step {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.skc-default-mark {
  min-width: 38px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #fff2d4;
  color: #6f4700;
  font-size: 12px;
  font-weight: 800;
}

.skc-parent-badge,
.skc-apply-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.skc-parent-badge {
  color: var(--primary);
  background: #fff;
  border: 1px solid #b9dfd9;
}

.skc-apply-badge {
  color: #5a3b00;
  background: #fff2d4;
  border: 1px solid #f0cd83;
}

.skc-group-image-panel {
  margin: 0 8px 8px;
  border: 1px solid #cbe6e1;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.skc-group-image-head {
  min-height: 42px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.skc-group-image-head h4 {
  margin: 0;
  font-size: 14px;
}

.skc-group-image-head span {
  color: var(--muted);
  font-size: 12px;
}

.skc-group-image-grid {
  padding: 8px;
}

.skc-style-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  overflow: hidden;
}

.skc-variant-section {
  border-color: #d4e1e6;
  background: #f7fafb;
}

.skc-style-toolbar {
  min-height: 36px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.skc-main-toolbar {
  min-height: 48px;
  background: #fff;
}

.skc-style-toolbar h3 {
  margin: 0;
  font-size: 14px;
}

.skc-style-toolbar p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.skc-style-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.skc-style-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.skc-style-sync-status {
  color: var(--primary);
  font-size: 12px;
  white-space: nowrap;
}

.skc-style-list {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.skc-variant-workbench {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px;
}

.skc-sku-pane,
.skc-defaults-pane {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.skc-sku-pane {
  background: #fbfcfd;
}

.skc-defaults-pane {
  border-color: #cbe6e1;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.skc-pane-head {
  min-height: 38px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.skc-defaults-pane .skc-pane-head {
  min-height: 44px;
  border-bottom-color: #cbe6e1;
  background: #eaf8f5;
}

.skc-sku-pane .skc-pane-head {
  background: #f7fafb;
}

.skc-pane-head strong {
  font-size: 14px;
}

.skc-pane-head span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.skc-common-sku {
  padding: 8px;
}

.skc-common-sku > .skc-style-block:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.skc-upload-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.skc-defaults-pane .skc-upload-compact {
  grid-template-columns: 1fr;
}

.skc-defaults-pane .product-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skc-sku-table-wrap {
  overflow-x: auto;
  padding: 0;
}

.skc-sku-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.skc-sku-table th,
.skc-sku-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
  text-align: left;
  vertical-align: middle;
}

.skc-sku-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.skc-sku-table td:nth-child(1) {
  width: 28%;
}

.skc-sku-table td:nth-child(2),
.skc-sku-table td:nth-child(3) {
  width: 18%;
}

.skc-sku-table input {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  background: #fff;
}

.sku-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #cfe7e2;
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--primary);
  background: #eefaf7;
  font-size: 12px;
  white-space: nowrap;
}

.sku-status.empty {
  border-color: var(--line);
  color: var(--muted);
  background: #fff;
}

.sku-status.overridden {
  border-color: #f5c781;
  color: #8a5600;
  background: #fff8e9;
}

.skc-sku-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.skc-sku-row-actions button:not(.icon) {
  min-height: 32px;
  padding: 5px 9px;
}

.skc-sku-table tr.has-override td {
  background: #fffdf7;
}

.skc-sku-detail-row > td {
  padding: 0 8px 10px;
  background: #fff;
}

.skc-sku-detail {
  display: grid;
  gap: 8px;
  border: 1px solid #dbe7ec;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 8px;
}

.skc-sku-detail > .skc-style-block:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.skc-style-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.skc-style-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.skc-style-card-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.skc-style-head strong {
  font-size: 14px;
}

.skc-style-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.skc-style-grid .wide {
  grid-column: span 2;
}

.skc-style-grid .full {
  grid-column: 1 / -1;
}

.skc-style-block {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.skc-style-block-head {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.skc-style-block-head h4 {
  margin: 0;
  font-size: 13px;
}

.skc-style-block-head span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skc-style-upload-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.skc-style-upload-row span,
.skc-style-upload-row a {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.skc-style-file .model-upload {
  justify-content: flex-start;
}

.review-grid {
  align-items: start;
}

.review-field {
  margin-bottom: 0;
}

.review-field input {
  min-height: 34px;
}

.review-field small {
  min-height: 15px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auto-metrics,
.accessory-grid {
  display: grid;
  gap: 6px;
}

.auto-metrics {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  padding: 6px 8px;
}

.auto-metrics div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
  min-height: 30px;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.auto-metrics span,
.empty-inline {
  color: var(--muted);
}

.auto-metrics span {
  display: inline;
  flex: 0 0 auto;
  font-size: 12px;
}

.auto-metrics strong {
  display: block;
  margin-top: 0;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.product-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 128px));
  gap: 6px;
  padding: 8px;
}

.product-image-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.product-image-card img,
.image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  background: var(--panel-soft);
}

.image-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.product-image-meta {
  display: grid;
  gap: 4px;
  padding: 6px;
}

.product-image-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-image-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pending-images {
  display: grid;
  gap: 6px;
  padding: 0 8px 8px;
}

.pending-title {
  color: var(--muted);
  font-weight: 700;
}

.pending-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 128px));
  gap: 8px;
}

.pending-image-card {
  position: relative;
  min-width: 0;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.pending-image-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  background: #eef4f6;
}

.pending-image-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  width: 24px;
  min-height: 24px;
  padding: 0;
  border-color: rgba(183, 61, 61, 0.35);
  background: rgba(255, 255, 255, 0.92);
  color: var(--danger);
  line-height: 1;
}

.pending-image-meta {
  display: grid;
  gap: 4px;
  padding: 6px;
}

.pending-image-meta strong,
.pending-image-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-image-meta span {
  color: var(--muted);
  font-size: 12px;
}

.pending-image-original {
  min-height: 28px;
  padding: 4px 6px;
}

.pending-image-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 6px 8px;
}

.pending-image-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-image-row b {
  font-size: 13px;
}

.model-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  overflow: hidden;
}

.model-panel-head {
  min-height: 32px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.model-panel-head h3 {
  flex: 0 0 auto;
  margin: 0;
  font-size: 14px;
}

.model-upload {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
}

.model-link-input {
  width: min(320px, 34vw);
  min-width: 180px;
}

.model-upload span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.model-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  padding: 6px 8px;
}

.model-summary div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  min-height: 30px;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.model-summary span,
.model-empty {
  color: var(--muted);
}

.model-summary span {
  display: inline;
  flex: 0 0 auto;
  font-size: 12px;
}

.model-summary strong {
  display: block;
  margin-top: 0;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-empty {
  padding: 8px;
}

.field.wide {
  grid-column: span 2;
}

.field.full {
  grid-column: 1 / -1;
}

.permission-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.permission-toolbar div {
  margin-right: auto;
}

.permission-toolbar strong {
  color: var(--text);
}

.role-workbench {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.role-audit-panel {
  position: sticky;
  top: 12px;
}

.role-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.role-audit-grid div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.role-audit-grid span,
.role-domain-row span,
.role-domain-row em,
.role-card-head span,
.role-card p,
.role-card-metrics span,
.role-group-chips em,
.role-empty-chip,
.role-more-chip {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.role-audit-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.role-domain-map {
  display: grid;
  gap: 9px;
  padding: 0 12px 12px;
}

.role-domain-map h3 {
  margin: 2px 0 0;
  font-size: 13px;
}

.role-domain-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(90px, 0.9fr) 42px;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.role-domain-row strong,
.role-domain-row span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-domain-row em {
  text-align: right;
}

.role-domain-bar,
.role-coverage-line {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eef5;
}

.role-domain-bar i,
.role-coverage-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aqua), var(--accent));
}

.role-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.role-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 251, 255, 0.96)),
    var(--panel-solid);
  box-shadow: var(--shadow-soft);
}

.role-card.is-system {
  border-left: 4px solid var(--accent);
}

.role-card-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.role-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #c8d6e8;
  border-radius: 10px;
  background: linear-gradient(135deg, #eef7ff, #e5edff);
  color: var(--accent-dark);
  font-weight: 800;
}

.role-card h3,
.role-card p {
  margin: 0;
}

.role-card h3,
.role-card-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-card h3 {
  font-size: 17px;
}

.role-card p {
  min-height: 38px;
  line-height: 1.55;
}

.role-card-badges,
.role-card-actions,
.role-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.role-card-badges {
  justify-content: flex-end;
}

.role-card-badges span,
.role-group-chips span,
.role-empty-chip,
.role-more-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  max-width: 100%;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.role-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.role-card-metrics div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: rgba(246, 251, 255, 0.72);
}

.role-card-metrics strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.role-group-chips span {
  min-width: 0;
  background: var(--panel-tint);
}

.role-group-chips b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-card-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.role-card-actions button {
  min-height: 32px;
  padding: 0 11px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.permission-section {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: rgba(246, 251, 255, 0.58);
}

.permission-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
}

.permission-section-title > div {
  min-width: 0;
}

.permission-section-title span,
.permission-section-title em {
  display: block;
}

.permission-section-title em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.permission-section-title button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.role-preview-modal {
  width: min(900px, 100%);
}

.preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.preview-metrics div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}

.preview-metrics span {
  display: block;
  color: var(--muted);
}

.preview-metrics strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

.role-preview-note {
  border: 1px solid #d5c598;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff8e3;
  color: #5d4412;
  margin-bottom: 12px;
}

.role-preview-groups {
  display: grid;
  gap: 12px;
}

.role-preview-groups section {
  display: grid;
  gap: 8px;
}

.role-preview-groups h3 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.role-preview-modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.role-preview-modules span {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.72);
}

.role-preview-modules b,
.role-preview-modules em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-preview-modules em {
  margin-top: 3px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 38px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.64);
}

.check-item:has(input:checked) {
  border-color: rgba(79, 91, 213, 0.42);
  background: rgba(223, 228, 255, 0.62);
}

.check-item input {
  width: auto;
}

.check-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .role-workbench {
    grid-template-columns: 1fr;
  }

  .role-audit-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  .role-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .role-toolbar .toolbar-left,
  .role-toolbar .toolbar-right {
    width: 100%;
    flex-wrap: wrap;
  }

  .role-toolbar .search {
    width: 100%;
  }

  .role-card-grid,
  .role-audit-grid,
  .role-card-metrics {
    grid-template-columns: 1fr;
  }

  .role-card-head {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .role-card-badges {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .role-domain-row {
    grid-template-columns: minmax(0, 1fr) 46px;
  }

  .role-domain-bar {
    grid-column: 1 / -1;
    order: 3;
  }
}

.import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
}

.mapping-box {
  min-height: 290px;
  font-family: Consolas, "Courier New", monospace;
}

.review-toolbar select,
.review-toolbar input {
  min-width: 126px;
}

.review-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(183, 202, 217, 0.72);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0.82), rgba(255, 255, 255, 0.68)),
    rgba(255, 255, 255, 0.64);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.review-toolbar .toolbar-left {
  display: grid;
  grid-template-columns: minmax(150px, 1.05fr) minmax(150px, 1.05fr) minmax(150px, 1fr) repeat(2, minmax(142px, 0.9fr)) minmax(72px, 0.42fr);
  gap: 8px;
  width: 100%;
}

.review-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.review-toolbar button {
  min-width: 72px;
  white-space: nowrap;
}

.review-toolbar .toolbar-right button {
  min-width: 92px;
  padding: 0 12px;
  border-radius: 999px;
}

.review-toolbar .toolbar-left > *,
.review-toolbar .toolbar-right > * {
  box-shadow: 0 8px 18px rgba(93, 117, 142, 0.08);
}

.review-agent-output {
  margin: 0;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 10px;
  font-family: Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}

.review-import-modal {
  width: min(1120px, 94vw);
}

.review-import-preview table {
  min-width: 980px;
}

.review-evidence-table {
  min-width: 1220px;
}

.review-evidence-table th:nth-child(3),
.review-evidence-table td:nth-child(3) {
  min-width: 260px;
}

.review-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.86);
  padding: 8px;
  box-shadow: 0 8px 18px rgba(37, 99, 111, 0.04);
}

.review-toolbar .toolbar-left {
  display: grid;
  grid-template-columns:
    minmax(160px, 1.2fr)
    minmax(128px, 0.8fr)
    minmax(112px, 0.75fr)
    minmax(120px, 0.7fr)
    minmax(120px, 0.7fr)
    auto;
  gap: 8px;
  align-items: center;
}

.review-toolbar .toolbar-right {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.review-toolbar select,
.review-toolbar input,
.review-toolbar button {
  min-width: 0;
  height: 32px;
}

.review-toolbar + .notice {
  margin: 0 0 8px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.35;
}

.review-detail-panel {
  margin-bottom: 12px;
}

.review-detail-panel .panel-head {
  align-items: center;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding: 8px 10px;
}

.review-detail-panel .panel-head > div {
  min-width: 0;
}

.review-detail-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.review-detail-collapse-btn {
  min-width: 64px;
}

.review-detail-panel.is-collapsed .panel-head {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.review-detail-pagination {
  margin-top: 8px;
}

.review-detail-wrap {
  max-height: 660px;
}

.review-detail-filterbar {
  display: grid;
  grid-template-columns:
    minmax(84px, 0.42fr)
    minmax(126px, 0.58fr)
    minmax(126px, 0.58fr)
    minmax(220px, 1.25fr)
    minmax(116px, 0.58fr)
    minmax(126px, 0.62fr)
    minmax(138px, 0.68fr)
    minmax(150px, 0.78fr)
    auto
    auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
}

.review-detail-filterbar input {
  width: 100%;
}

.review-detail-filterbar select {
  width: 100%;
}

.review-detail-filterbar input,
.review-detail-filterbar select {
  min-width: 0;
  height: 36px;
}

.review-detail-filterbar button {
  height: 36px;
  min-width: 68px;
  padding: 0 12px;
  white-space: nowrap;
}

.review-detail-body {
  min-width: 0;
  overflow-x: auto;
}

.review-detail-time-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  height: clamp(360px, calc(100vh - 260px), 620px);
  overflow: hidden;
}

.review-detail-time-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(183, 202, 217, 0.76);
  border-left: 4px solid #64748b;
  border-radius: 8px;
  background: #f8fbfe;
  overflow: hidden;
}

.review-detail-time-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(183, 202, 217, 0.72);
  background: #f5f9fc;
  color: #475569;
}

.review-detail-time-section:nth-child(1) {
  border-left-color: #2563eb;
}

.review-detail-time-section:nth-child(2) {
  border-left-color: #059669;
}

.review-detail-time-section:nth-child(3) {
  border-left-color: #ca8a04;
}

.review-detail-time-section > header strong {
  color: var(--text);
  font-size: 14px;
}

.review-detail-time-section > header span {
  color: var(--muted);
  font-size: 12px;
}

.review-detail-time-list {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.review-detail-time-row {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(183, 202, 217, 0.72);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.88);
}

.review-detail-time-row:last-child {
  border-bottom: 1px solid rgba(183, 202, 217, 0.72);
}

.review-detail-time-row time {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.review-detail-time-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.review-detail-title-link {
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.32;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.review-detail-title-link:hover {
  color: #255b8f;
  text-decoration: underline;
}

.review-detail-time-main span,
.review-detail-time-score span,
.review-detail-time-source,
.review-detail-time-media {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-detail-time-score {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.review-detail-time-score b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 2px 7px;
  background: #e9f5ff;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.review-detail-time-score span {
  flex: 1 1 auto;
  min-width: 0;
}

.review-detail-time-media {
  text-align: left;
}

.review-detail-time-empty {
  display: grid;
  place-items: center;
  min-height: 90px;
  border: 1px dashed rgba(148, 163, 184, 0.54);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font-size: 12px;
}

.review-detail-star-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 8px;
  height: clamp(360px, calc(100vh - 260px), 620px);
  min-width: 980px;
  overflow: hidden;
}

.review-detail-star-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(183, 202, 217, 0.76);
  border-left: 4px solid #64748b;
  border-radius: 8px;
  background: #f8fbfe;
  overflow: hidden;
}

.review-detail-star-section.tone-star-1 {
  border-left-color: #dc2626;
  background: #fff7f7;
}

.review-detail-star-section.tone-star-2 {
  border-left-color: #f97316;
  background: #fff8ed;
}

.review-detail-star-section.tone-star-3 {
  border-left-color: #ca8a04;
  background: #fffbeb;
}

.review-detail-star-section.tone-star-4 {
  border-left-color: #2563eb;
  background: #f5f9ff;
}

.review-detail-star-section.tone-star-5 {
  border-left-color: #059669;
  background: #f0fdf8;
}

.review-detail-star-section > header {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(183, 202, 217, 0.72);
  background: rgba(255, 255, 255, 0.64);
}

.review-detail-star-head-main {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.review-detail-star-section > header strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}

.review-detail-media-toggle {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(183, 202, 217, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.review-detail-media-toggle b {
  color: #1f3f8b;
  font-size: 11px;
}

.review-detail-media-toggle.active {
  border-color: #65a30d;
  background: #84cc16;
  color: #17320a;
  box-shadow: 0 0 0 2px rgba(132, 204, 22, 0.18);
}

.review-detail-media-toggle.active b {
  color: #17320a;
}

.review-detail-media-toggle:disabled {
  cursor: wait;
  opacity: 0.62;
}

.review-detail-star-section > header span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 2px 7px;
  background: #fff;
  color: #1f3f8b;
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(183, 202, 217, 0.75);
}

.review-detail-star-list {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.review-detail-star-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(183, 202, 217, 0.72);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.88);
}

.review-detail-star-main {
  display: grid;
  min-width: 0;
}

.review-detail-star-review {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #40516a;
  font-size: 12px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.review-detail-star-average {
  width: fit-content;
  min-width: 0;
  border-radius: 999px;
  padding: 3px 8px;
  background: #e9f5ff;
  color: #39536f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.review-detail-star-empty {
  display: grid;
  place-items: center;
  min-height: 90px;
  border: 1px dashed rgba(148, 163, 184, 0.54);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font-size: 12px;
}

.review-detail-modal {
  width: min(980px, calc(100vw - 28px));
}

.review-detail-modal-body {
  display: grid;
  gap: 12px;
}

.review-detail-modal-title,
.review-detail-modal-grid > div,
.review-detail-modal-text,
.review-detail-modal-media {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(183, 202, 217, 0.72);
  border-radius: 7px;
  background: #fbfdff;
}

.review-detail-modal-title {
  display: grid;
  gap: 4px;
}

.review-detail-modal-title strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}

.review-detail-modal-title span {
  color: var(--muted);
  font-size: 12px;
}

.review-detail-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(120px, 0.55fr) minmax(0, 1fr);
  gap: 10px;
}

.review-detail-modal h3 {
  margin: 0 0 7px;
  color: #475569;
  font-size: 13px;
}

.review-detail-modal-text p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.review-detail-review-cell {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.review-detail-review-cell p {
  margin: 0;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.review-detail-inline-media .review-media-strip {
  min-width: 0;
  gap: 4px;
}

.review-detail-inline-media .review-media-thumb {
  width: 44px;
  height: 44px;
}

.review-detail-inline-snapshot {
  padding-top: 0;
}

.review-backend-product,
.review-backend-platform,
.review-backend-sku,
.review-backend-review,
.review-detail-meta,
.review-detail-product-sku,
.review-detail-rating,
.review-detail-original,
.review-detail-snapshot {
  display: grid;
  gap: 3px;
  align-content: start;
}

.review-backend-product strong,
.review-backend-product span,
.review-backend-product b,
.review-backend-product em,
.review-backend-platform strong,
.review-backend-platform span,
.review-backend-sku strong,
.review-backend-sku span,
.review-backend-review p,
.review-detail-meta strong,
.review-detail-meta span,
.review-detail-product-sku strong,
.review-detail-product-sku span,
.review-detail-original p,
.review-detail-original span,
.review-detail-snapshot strong,
.review-detail-snapshot span,
.review-detail-snapshot em,
.review-rating-value {
  display: block;
}

.review-backend-product strong,
.review-backend-platform strong,
.review-backend-sku strong,
.review-detail-meta strong,
.review-detail-product-sku strong {
  color: var(--text);
  line-height: 1.28;
}

.review-detail-product-sku strong,
.review-detail-product-sku span,
.review-backend-platform span,
.review-detail-meta span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.review-backend-product span,
.review-backend-platform span,
.review-backend-sku span,
.review-detail-meta span,
.review-detail-product-sku span {
  color: var(--muted);
  font-style: normal;
}

.review-backend-product em {
  width: fit-content;
  border-radius: 4px;
  padding: 2px 7px;
  background: rgba(15, 23, 42, 0.32);
  color: #fff;
  font-size: 12px;
  font-style: normal;
}

.review-backend-product b {
  width: fit-content;
  border-radius: 4px;
  padding: 2px 6px;
  background: #e7f7ff;
  color: #0875c9;
  font-size: 12px;
}

.review-backend-review p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.review-detail-original p {
  margin: 0;
  overflow-wrap: anywhere;
}

.review-snapshot-line {
  color: #475569;
  overflow-wrap: anywhere;
}

.review-detail-snapshot span {
  color: #475569;
  overflow-wrap: anywhere;
}

.review-detail-original p,
.review-detail-snapshot span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.review-detail-snapshot em {
  color: var(--muted);
  font-style: normal;
}

.review-rating-value {
  color: var(--text);
  line-height: 1.35;
}

.review-detail-tags,
.review-detail-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.review-detail-status span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  white-space: nowrap;
}

.review-media-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 132px;
}

.review-media-thumb {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  text-decoration: none;
  cursor: zoom-in;
}

.review-media-thumb img,
.review-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-media-thumb.video span {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 1px 4px;
  border-radius: 4px;
  color: #fff;
  background: rgba(15, 23, 42, 0.72);
}

.review-media-more {
  color: var(--muted);
  font-size: 12px;
}

.review-media-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px dashed #f2b56b;
  border-radius: 6px;
  background: #fff8ed;
  color: #8a4b0f;
  font-size: 12px;
  white-space: nowrap;
}

.review-media-pending em {
  color: var(--muted);
  font-style: normal;
}

.review-command-center {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.55fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.review-command-center .review-radar-panel {
  margin-bottom: 0;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 104px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.review-command-workbench {
  min-width: 0;
}

.review-decision-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.review-decision-rail article {
  position: relative;
  min-height: 118px;
  display: grid;
  gap: 6px;
  align-content: start;
  overflow: hidden;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(240, 253, 250, 0.95), rgba(255, 255, 255, 0.96) 58%),
    radial-gradient(circle at 100% 0, rgba(45, 212, 191, 0.24), transparent 38%);
  padding: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.review-decision-rail article::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #14b8a6, #38bdf8);
}

.review-decision-rail span {
  width: fit-content;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 999px;
  padding: 2px 7px;
  color: #0f766e;
  background: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 700;
}

.review-decision-rail strong {
  font-size: 13px;
  color: var(--muted);
}

.review-decision-rail b {
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
}

.review-decision-rail em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.review-product-summary-strip {
  margin-bottom: 14px;
}

.review-workbench-section {
  margin-bottom: 16px;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.review-workbench-section .panel-head {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.review-workbench-section .panel-head h2 {
  position: relative;
  padding-left: 10px;
}

.review-workbench-section .panel-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 999px;
  background: #14b8a6;
}

.review-workbench-section:last-child {
  margin-bottom: 0;
}

.review-radar-media-preview {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.review-radar-media-preview.empty {
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  background: #f8fafc;
}

.review-radar-media-preview > em {
  font-style: normal;
  white-space: nowrap;
}

.review-radar-media-thumb {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  cursor: zoom-in;
}

.review-media-thumb:hover,
.review-radar-media-thumb:hover {
  border-color: var(--accent);
}

.review-radar-media-thumb img,
.review-radar-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-radar-media-thumb em {
  position: absolute;
  left: 3px;
  bottom: 3px;
  border-radius: 4px;
  padding: 1px 4px;
  color: #fff;
  background: rgba(15, 23, 42, 0.72);
  font-size: 10px;
  font-style: normal;
}

.review-media-overview-panel {
  margin-bottom: 14px;
}

.review-media-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  gap: 12px;
  padding: 14px;
}

.review-media-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 124px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.78), rgba(255, 255, 255, 0.96) 38%),
    #fff;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.review-media-card-preview .review-media-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 44px);
  gap: 6px;
  align-content: start;
}

.review-media-card-preview .review-media-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.review-media-card-copy {
  min-width: 0;
}

.review-media-card-copy strong,
.review-media-card-copy em {
  display: block;
}

.review-media-card-copy strong {
  line-height: 1.28;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.review-media-card-copy p {
  margin: 6px 0;
  color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

.review-media-card-copy em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.notice {
  border: 1px solid #d5c598;
  background: #fff8e3;
  color: #5d4412;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}

.notice.success {
  border-color: #abefc6;
  background: #f6fef9;
  color: #067647;
}

.review-radar-panel {
  margin-bottom: 14px;
}

.review-radar-panel .panel-head {
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.segmented button,
.segmented button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 7px 10px;
  font-size: 13px;
  white-space: nowrap;
}

.segmented button.active,
.segmented button.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.knowledge-tabs {
  max-width: 100%;
  margin-bottom: 0;
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-control);
  overflow-x: auto;
  flex-wrap: nowrap;
}

.knowledge-tabs button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
}

.review-radar-list {
  display: grid;
  gap: 8px;
  max-height: none;
  overflow: auto;
  padding-right: 4px;
}

.review-product-radar-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr) repeat(4, minmax(96px, 0.7fr));
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 10px;
  text-align: left;
  color: var(--text);
}

.review-product-radar-row:hover,
.review-product-radar-row.selected {
  border-color: #0f9f95;
  box-shadow: 0 10px 24px rgba(15, 159, 149, 0.12);
}

.review-product-radar-row.selected {
  background: #f0fdfa;
}

.review-command-center .review-product-radar-row {
  grid-template-columns: minmax(0, 1fr) minmax(108px, 0.46fr) minmax(108px, 0.46fr);
  gap: 10px 12px;
  align-items: start;
  min-height: 126px;
  padding: 14px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.review-command-center .review-product-main {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 0 12px 0 0;
  border-right: 1px solid rgba(212, 225, 234, 0.78);
  border-bottom: 0;
}

.review-command-center .review-product-main strong {
  display: -webkit-box;
  min-height: 24px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 17px;
  line-height: 1.35;
}

.review-command-center .review-product-main em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-command-center .review-radar-media-preview {
  min-height: 42px;
  margin-top: 2px;
  overflow: hidden;
}

.review-command-center .review-radar-media-preview.empty {
  min-height: 34px;
  align-items: center;
}

.review-command-center .review-radar-media-thumb {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.review-command-center .review-product-radar-row > span:not(.review-product-main):not(.review-radar-metrics) {
  display: block;
  min-width: 0;
}

.review-command-center .review-product-radar-row > span:nth-of-type(2),
.review-command-center .review-product-radar-row > span:nth-of-type(3) {
  align-self: stretch;
  min-width: 0;
}

.review-command-center .review-product-radar-row > span:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}

.review-command-center .review-product-radar-row > span:nth-of-type(3) {
  grid-column: 3;
  grid-row: 1;
  margin-top: 0;
}

.review-command-center .review-product-radar-row > .review-radar-metrics:nth-of-type(4) {
  grid-column: 2 / 4;
  grid-row: 2;
}

.review-command-center .review-product-radar-row > .review-radar-metrics:nth-of-type(5) {
  grid-column: 2 / 4;
  grid-row: 3;
}

.review-command-center .review-product-radar-row > .review-radar-metrics:nth-of-type(n + 6) {
  display: none;
}

.review-product-main {
  min-width: 0;
}

.review-product-main strong,
.review-product-main em {
  display: block;
  overflow-wrap: anywhere;
}

.review-product-main em,
.review-radar-metrics em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.review-score {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  align-items: center;
  min-width: 0;
}

.review-score span {
  color: var(--muted);
  font-size: 12px;
}

.review-score strong {
  font-size: 14px;
}

.review-score i {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: #e5e7eb;
}

.review-score b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #16a34a;
}

.review-score.risk b {
  background: #dc2626;
}

.review-score.opportunity b {
  background: #2563eb;
}

.review-radar-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.review-command-center .review-radar-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding-top: 2px;
}

.review-radar-metrics span {
  display: grid;
  gap: 2px;
}

.review-command-center .review-radar-metrics span {
  min-height: 30px;
  align-content: start;
}

.review-radar-metrics b {
  font-size: 17px;
}

.review-radar-metrics.danger b {
  color: #b42318;
}

.review-product-hero {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(240px, 0.8fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 100% 0, rgba(20, 160, 152, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(246, 251, 255, 0.86), rgba(255, 255, 255, 0.96) 40%),
    #fff;
  color: var(--text);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.review-product-title-block {
  min-width: 0;
}

.review-product-cover {
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--panel-tint);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.review-product-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-product-hero strong {
  display: block;
  font-size: 20px;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.review-product-hero p {
  margin: 0 0 8px;
  color: var(--muted);
}

.review-section-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  border: 1px solid rgba(20, 160, 152, 0.28);
  border-radius: 999px;
  padding: 3px 8px;
  color: #10845f;
  background: rgba(226, 248, 238, 0.72);
  font-size: 12px;
}

.review-product-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.review-product-codes span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.76);
  color: #475569;
  font-size: 12px;
}

.review-product-scores {
  display: grid;
  gap: 8px;
}

.review-product-hero .review-score span,
.review-product-hero .review-score strong {
  color: var(--text);
}

.review-product-hero .review-score i {
  background: #dce8ec;
}

.review-product-hero .primary {
  border-color: rgba(255, 255, 255, 0.24);
  background: #14b8a6;
  color: #fff;
}

.review-dist-pills {
  display: grid;
  gap: 8px;
}

.review-dist-pills span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
}

.review-dist-pills em {
  color: var(--muted);
  font-style: normal;
  text-align: right;
}

.review-matrix-wrap {
  overflow: auto;
}

.review-aspect-matrix {
  min-width: 860px;
}

.review-aspect-matrix th:first-child {
  width: 210px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 10px 0 18px rgba(15, 23, 42, 0.04);
}

.review-aspect-matrix th strong,
.review-aspect-matrix th span {
  display: block;
}

.review-aspect-matrix th span {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  margin-top: 3px;
}

.review-heat-cell {
  width: 100%;
  min-height: 74px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(6, 78, 59, 0.08);
  border-radius: 8px;
  padding: 8px;
  text-align: left;
  background: #f6fef9;
  color: #064e3b;
}

.review-heat-cell:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.review-heat-cell:disabled {
  opacity: 0.48;
  cursor: default;
}

.review-heat-cell strong,
.review-heat-cell span,
.review-heat-cell em {
  display: block;
}

.review-heat-cell em {
  font-style: normal;
  font-size: 12px;
}

.review-heat-cell.heat-中 {
  background: #fffaeb;
  color: #93370d;
}

.review-heat-cell.heat-高 {
  background: #fef3f2;
  color: #912018;
}

.review-observation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.review-observation-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.13), transparent 34%);
  padding: 12px;
  display: grid;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.review-observation-card.severity-高 {
  border-color: #fecdca;
}

.review-observation-head,
.review-observation-foot,
.review-observation-foot div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-observation-head strong {
  margin-left: auto;
  font-size: 18px;
}

.review-observation-card h3 {
  margin: 0;
  font-size: 16px;
}

.review-observation-card p,
.review-observation-card dl {
  margin: 0;
}

.review-observation-card dl {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 5px 8px;
  color: var(--muted);
}

.review-observation-card dt {
  color: var(--text);
  font-weight: 700;
}

.review-observation-foot {
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.review-psychology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.review-psychology-grid section,
.review-action-board section,
.review-action-board article,
.review-evidence-summary,
.review-unit-list span {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
}

.review-psychology-grid section {
  padding: 12px;
  display: grid;
  gap: 8px;
  background:
    linear-gradient(180deg, #ffffff, #fbfdff),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.12), transparent 36%);
}

.review-psychology-grid section > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.review-psychology-grid span,
.review-psychology-grid em {
  color: var(--muted);
  font-style: normal;
}

.review-psychology-grid p,
.review-psychology-grid blockquote {
  margin: 0;
}

.review-psychology-grid blockquote {
  color: var(--muted);
  border-left: 3px solid #d0d5dd;
  padding-left: 8px;
}

.review-action-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
}

.review-action-board section {
  padding: 10px;
  min-width: 220px;
  background: #fbfdff;
}

.review-action-board h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.review-action-board article {
  padding: 10px;
  margin-bottom: 8px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
}

.review-action-board article p {
  margin: 6px 0;
  color: var(--muted);
}

.review-action-board article div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.review-evidence-drawer {
  width: min(1080px, 94vw);
  max-height: 92vh;
  margin-left: auto;
  background: #fff;
  border-radius: 8px 0 0 8px;
  overflow: auto;
  box-shadow: -18px 0 42px rgba(15, 23, 42, 0.18);
}

.review-evidence-summary {
  padding: 12px;
  margin-bottom: 12px;
}

.review-evidence-summary p {
  margin: 6px 0 0;
  color: var(--muted);
}

.review-unit-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.review-unit-list span {
  display: grid;
  gap: 4px;
  padding: 8px;
}

.review-unit-list em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.temu-embed-shell {
  min-height: calc(100vh - 124px);
  display: grid;
  grid-template-rows: minmax(560px, 1fr);
}

.temu-embed-frame {
  width: 100%;
  height: 100%;
  min-height: 560px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(20, 33, 43, 0.04);
}

.prompt-guide-main-embed {
  min-height: calc(100vh - 286px);
  display: grid;
  grid-template-rows: minmax(680px, 1fr);
  margin-top: 14px;
}

.prompt-guide-main-frame {
  width: 100%;
  height: 100%;
  min-height: 680px;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.prompt-image-main-embed,
.ecommerce-image-studio-main-embed,
.product-publish-main-embed,
.receiver-export-main-embed,
.task3d-main-embed,
.cloisonne-generator-main-embed,
.bridge-monitor-main-embed {
  min-height: calc(100vh - 286px);
  display: grid;
  grid-template-rows: minmax(720px, 1fr);
  margin-top: 14px;
}

.product-publish-main-embed {
  min-height: calc(100vh - 92px);
  grid-template-rows: minmax(calc(100vh - 92px), 1fr);
  margin-top: 0;
}

.product-publish-main-frame {
  min-height: calc(100vh - 92px);
}

.prompt-image-main-frame,
.ecommerce-image-studio-main-frame,
.product-publish-main-frame,
.receiver-export-main-frame,
.task3d-main-frame,
.cloisonne-generator-main-frame,
.bridge-monitor-main-frame {
  width: 100%;
  height: 100%;
  min-height: 720px;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.receiver-export-main-embed {
  min-height: calc(100vh - 56px);
  grid-template-rows: minmax(calc(100vh - 56px), 1fr);
  margin-top: 0;
}

.receiver-export-main-frame {
  min-height: calc(100vh - 56px);
}

.temu-frame-wrap {
  position: relative;
  min-height: 560px;
}

.temu-frame-wrap .temu-embed-frame {
  display: block;
}

.temu-embed-campaigns,
.temu-embed-campaigns .temu-frame-wrap,
.temu-embed-campaigns .temu-embed-frame {
  min-height: calc(100vh - 44px);
}

.temu-embed-campaigns {
  margin-top: 26px;
}

.temu-embed-campaigns .temu-embed-frame {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Locked card surface: keep structure, share the reference-like card treatment. */
:is(
  .knowledge-map-card,
  .knowledge-detail,
  .knowledge-entry-card,
  .knowledge-kb-card,
  .knowledge-recommend-card,
  .material-card,
  .material-insight-panel,
  .material-color-point,
  .attendance-request,
  .receipt-card,
  .receipt-result,
  .temu-return-action,
  .temu-return-package-card,
  .temu-return-detail-panel,
  .review-media-card,
  .review-product-radar-row,
  .review-dist-pills span,
  .review-observation-card,
  .review-psychology-grid section,
  .review-action-board section,
  .review-action-board article,
  .review-evidence-summary,
  .review-unit-list span,
  .temu-embed-frame
) {
  border-color: var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.72), rgba(255, 255, 255, 0.95) 36%),
    var(--panel-solid);
  box-shadow: var(--shadow-soft);
}

:is(
  .knowledge-entry-card,
  .knowledge-kb-card,
  .knowledge-recommend-card,
  .material-card,
  .material-color-point,
  .attendance-request,
  .review-action-board article,
  .review-dist-pills span,
  .review-unit-list span
) {
  border-radius: var(--radius-control);
}

.hidden {
  display: none !important;
}

@media (max-width: 1280px) {
  .task-module-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

@media (max-width: 1100px) {
  .stats {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .performance-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cycle-board-layout,
  .cycle-columns,
  .work-report-layout,
  .work-report-card-grid,
  .daily-visual-summary,
  .daily-hub-workbench,
  .daily-hub-dashboard-grid,
  .daily-hub-summary-columns,
  .daily-hub-summary-keywords,
  .daily-hub-kpis {
    grid-template-columns: 1fr;
  }

  .work-report-queue,
  .daily-hub-side,
  .daily-hub-date-rail,
  .daily-hub-management {
    position: static;
  }

  .daily-hub-date-rail {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .daily-hub-date-rail .panel-head {
    grid-column: 1 / -1;
  }

  .daily-hub-management {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-report-stat-strip {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .cycle-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-detail-panel,
  .task-admin-detail-panel,
  .temu-return-detail-panel {
    position: static;
  }

  .temu-return-toolbar,
  .temu-return-data-strip,
  .temu-return-analysis,
  .temu-return-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .temu-return-toolbar input:first-child,
  .temu-return-wide-panel,
  .temu-return-detail-panel {
    grid-column: 1 / -1;
  }

  .receipt-workbench {
    grid-template-columns: 1fr;
  }

  .receipt-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .task-employee-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-admin-gantt-axis {
    padding-left: 12px;
  }

  .task-admin-gantt-tools,
  .task-gantt-filters {
    justify-content: flex-start;
  }

  .task-gantt-filters select {
    max-width: none;
    flex: 1 1 140px;
  }

  .task-assigner-gantt-axis {
    padding-left: 0;
  }

  .task-assigner-gantt-group {
    grid-template-columns: 1fr;
  }

  .task-admin-gantt-row {
    grid-template-columns: 92px minmax(100px, 1fr);
  }

  .task-admin-gantt-row .task-admin-gantt-track,
  .task-admin-gantt-row .task-priority-chip {
    grid-column: 1 / -1;
  }

  .task-executor-gantt-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .task-assigner-gantt-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .task-executor-gantt-row .task-admin-gantt-track {
    grid-column: 1 / -1;
  }

  .task-assigner-gantt-row .task-admin-gantt-track {
    grid-column: 1 / -1;
  }

  .review-command-center .review-radar-panel {
    position: static;
    max-height: none;
  }

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

  .review-product-hero {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .review-product-scores,
  .review-product-hero .primary {
    grid-column: 1 / -1;
  }

  .review-toolbar {
    grid-template-columns: 1fr;
  }

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

  .review-toolbar .toolbar-left button {
    justify-content: center;
  }

  .review-toolbar .toolbar-right {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 13px;
  }

  .cycle-visual-grid,
  .cycle-factor-strip,
  .cycle-columns,
  .work-report-stat-strip,
  .work-report-card-grid,
  .daily-visual-summary,
  .daily-dept-summary-grid,
  .daily-person-grid,
  .daily-hub-kpis,
  .daily-hub-dashboard-grid,
  .daily-hub-dept-cards,
  .daily-hub-employee-grid,
  .daily-hub-summary-columns,
  .daily-hub-summary-keywords,
  .daily-hub-summary-depts,
  .daily-hub-review-grid {
    grid-template-columns: 1fr;
  }

  .cycle-report-head,
  .cycle-score-line,
  .cycle-report-actions,
  .work-report-head,
  .daily-hub-hero,
  .work-report-card-head,
  .work-report-score-row,
  .daily-hub-report-head,
  .daily-hub-report-body,
  .daily-hub-section-head {
    display: grid;
    justify-content: stretch;
  }

  .work-report-head-actions,
  .daily-hub-actions,
  .daily-hub-inline-actions,
  .work-report-card-actions,
  .daily-hub-report-actions,
  .work-report-tags {
    justify-content: flex-start;
  }

  .daily-submit-ring-card,
  .daily-person-body {
    grid-template-columns: 1fr;
  }

  .daily-submit-ring-card,
  .daily-person-body {
    display: grid;
  }

  .work-report-detail-hero,
  .work-report-detail-grid,
  .work-report-detail-review {
    grid-template-columns: 1fr;
  }

  .daily-comparison-head,
  .daily-dept-summary-title,
  .daily-dept-pressure {
    align-items: flex-start;
    flex-direction: column;
  }

  .daily-dept-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-comparison-row {
    grid-template-columns: 88px 118px 96px minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr);
    min-width: 820px;
  }

  .daily-hub-dept-row {
    grid-template-columns: 88px 104px 112px minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr);
    min-width: 820px;
  }

  .daily-report-row {
    grid-template-columns: 72px minmax(92px, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .daily-report-row-status,
  .daily-report-row p:nth-of-type(2),
  .daily-report-row p:nth-of-type(3) {
    display: none;
  }

  .daily-report-row-actions {
    justify-content: flex-start;
  }

  .daily-hub-management {
    grid-template-columns: 1fr;
  }

  .daily-hub {
    gap: 10px;
  }

  .daily-hub-hero {
    max-width: 100%;
    padding: 12px;
  }

  .daily-hub-hero h1 {
    font-size: 22px;
    overflow-wrap: anywhere;
  }

  .daily-hub-hero p {
    overflow-wrap: anywhere;
  }

  .daily-hub-actions {
    justify-content: flex-start;
  }

  .daily-hub-actions button {
    flex: 1 1 128px;
    min-width: 0;
    justify-content: center;
  }

  .daily-hub-toolbar {
    display: grid;
    width: 100%;
    max-width: 100%;
  }

  .daily-hub-toolbar .toolbar-left {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }

  .daily-hub-toolbar .toolbar-left > * {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .daily-hub-period-range {
    justify-content: flex-start;
    white-space: normal;
  }

  .daily-hub-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .daily-hub-tabs button {
    flex: 0 0 auto;
  }

  .daily-hub-date-rail {
    grid-template-columns: 1fr;
  }

  .daily-report-day-group > header {
    display: grid;
    justify-content: stretch;
  }

  .daily-detail-drawer {
    width: 100vw;
    border-radius: 0;
  }

  .daily-hub-dept-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-workbench-grid,
  .production-gantt-row,
  .production-printer-card dl {
    grid-template-columns: 1fr;
  }

  .production-demand-panel,
  .production-schedule-panel,
  .production-print-panel,
  .production-audit-panel {
    grid-column: auto;
  }

  .production-panel .panel-head {
    display: grid;
  }

  .production-panel .panel-actions {
    width: 100%;
    justify-content: stretch;
  }

  .production-panel .panel-actions button {
    flex: 1 1 130px;
  }

  .production-printer-form {
    grid-template-columns: 1fr;
  }

  .production-preview-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-module-grid {
    grid-template-columns: 1fr;
  }

  .temu-return-toolbar,
  .temu-return-data-strip,
  .temu-return-analysis,
  .temu-return-layout {
    grid-template-columns: 1fr;
  }

  .temu-return-toolbar input:first-child,
  .temu-return-wide-panel,
  .temu-return-detail-panel {
    grid-column: auto;
  }

  .temu-return-action-insights,
  .temu-return-action-queue {
    grid-template-columns: 1fr;
  }

  .task-employee-kpi-grid,
  .task-workbench-card-list.compact,
  .task-employee-archive-metrics,
  .task-assigner-group-grid {
    grid-template-columns: 1fr;
  }

  .task-employee-head,
  .task-workbench-card-top,
  .task-workbench-card-foot,
  .task-workbench-card-meta {
    align-items: stretch;
    flex-direction: column;
  }

  .task-employee-head .task-list-actions {
    width: 100%;
    justify-content: stretch;
  }

  .task-employee-head .task-list-actions button {
    flex: 1 1 130px;
  }

  .task-assigner-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-assigner-archive-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .task-assigner-archive-card b {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .task-review-assignee,
  .task-review-critical {
    grid-template-columns: 1fr;
  }

  .task-admin-filters,
  .task-admin-task-row {
    grid-template-columns: 1fr;
  }

  .task-review-critical small {
    justify-content: flex-start;
  }

  .review-decision-rail,
  .review-media-card,
  .performance-evidence-grid,
  .performance-self-kpis,
  .performance-draft-grid {
    grid-template-columns: 1fr;
  }

  .performance-self-hero,
  .performance-section-head,
  .performance-self-kpi > div,
  .performance-self-kpi p,
  .performance-action > div {
    align-items: stretch;
    flex-direction: column;
  }

  .review-toolbar .toolbar-left {
    grid-template-columns: 1fr;
  }

  .review-product-hero {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 12px;
  }

  .review-product-cover {
    width: 56px;
    height: 56px;
  }

  .page-hero {
    min-height: 0;
    padding: 16px;
  }

  .page-hero-copy h2 {
    font-size: 24px;
  }

  .page-hero-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero-product_publish_workbench {
    grid-template-columns: 1fr;
  }

  .page-hero-product_publish_workbench .page-hero-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  button {
    min-height: 30px;
    padding: 0 8px;
  }

  button.icon {
    width: 30px;
  }

  input,
  textarea,
  select {
    padding: 6px 8px;
  }

  .receipt-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 12px;
  }

  .receipt-hero h2 {
    font-size: 22px;
  }

  .task-kpis.receipt-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .receipt-kpis div {
    padding: 9px 10px;
  }

  .receipt-kpis strong {
    font-size: 19px;
  }

  .receipt-workbench,
  .receipt-toolbar,
  .receipt-inline-form,
  .receipt-result,
  .receipt-card {
    grid-template-columns: 1fr;
  }

  .receipt-toolbar,
  .receipt-inline-form {
    padding: 10px;
  }

  .receipt-inline-form {
    margin-top: 10px;
  }

  .receipt-scan-head {
    display: grid;
    justify-content: stretch;
  }

  .receipt-scan-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .receipt-scan-actions button {
    width: 100%;
    justify-content: center;
  }

  .receipt-scan-video {
    max-height: 300px;
  }

  .receipt-inline-form button {
    width: 100%;
    justify-content: center;
  }

  .receipt-result {
    gap: 10px;
    padding: 10px;
  }

  .receipt-result-media {
    min-height: 160px;
  }

  .receipt-result-media img {
    max-height: 240px;
    object-fit: contain;
    background: #fff;
  }

  .receipt-list {
    padding: 10px;
  }

  .receipt-card {
    gap: 8px;
    padding: 10px;
  }

  .receipt-card-side {
    justify-items: start;
    text-align: left;
  }

  .receipt-result strong {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .sidebar-nav-manager {
    grid-template-columns: 1fr;
  }

  .sidebar-nav-preview {
    height: auto;
    min-height: 260px;
    max-height: 360px;
  }

  .sidebar-nav-edit-group-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .sidebar-nav-move-actions {
    justify-content: flex-end;
  }

  .sidebar-nav-module-row {
    grid-template-columns: 34px minmax(0, 1fr) 28px 28px;
  }

  .sidebar-nav-module-row select {
    grid-column: 2 / -1;
  }

  .sidebar-nav-savebar {
    align-items: stretch;
    flex-direction: column;
  }

  th,
  td {
    padding: 6px 8px;
  }

  .modal-backdrop {
    padding: 8px;
    place-items: start center;
  }

  .modal {
    width: 100%;
    max-height: calc(100dvh - 16px);
  }

  .skc-group-modal {
    height: calc(100dvh - 16px);
  }

  .modal-head,
  .modal-foot {
    min-height: 46px;
    padding: 8px 10px;
  }

  .modal-body {
    padding: 8px;
  }

  .product-editor {
    gap: 8px;
  }

  .skc-style-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .skc-style-actions {
    justify-content: space-between;
  }

  .skc-variant-workbench {
    grid-template-columns: 1fr;
    padding: 8px;
  }

  .skc-pane-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .skc-section-title {
    align-items: flex-start;
  }

  .skc-group-image-head {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .skc-defaults-pane .product-form-grid {
    grid-template-columns: 1fr;
  }

  .skc-upload-compact {
    grid-template-columns: 1fr;
  }

  .skc-sku-table-wrap {
    padding: 6px;
  }

  .skc-style-card-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .skc-style-block-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .skc-style-grid {
    grid-template-columns: 1fr;
  }

  .skc-style-grid .wide,
  .skc-style-grid .full {
    grid-column: auto;
  }

  .product-section-head,
  .model-panel-head {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .product-section-head h3,
  .model-panel-head h3 {
    line-height: 1.25;
  }

  .model-upload {
    justify-content: flex-start;
  }

  .model-link-input {
    width: 100%;
    min-width: 0;
  }

  .model-upload span {
    line-height: 1.35;
  }

  .attachment-drop {
    align-items: stretch;
    flex-direction: column;
  }

  .attachment-actions {
    width: 100%;
  }

  .attachment-actions button,
  .attachment-actions a {
    width: 100%;
    justify-content: center;
  }

  .pending-image-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .login-shell,
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell {
    min-height: 100dvh;
    grid-template-rows: 92px minmax(0, 1fr);
  }

  .app-shell.sidebar-editing {
    grid-template-rows: 132px minmax(0, 1fr);
  }

  .login-aside {
    display: none;
  }

  .sidebar {
    height: 92px;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  .sidebar-editing .sidebar {
    height: 132px;
  }

  .content {
    min-height: 0;
  }

  .brand {
    min-height: 34px;
    padding: 7px 10px 5px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .brand strong {
    font-size: 15px;
  }

  .brand span {
    display: none;
  }

  .sidebar-collapse-btn {
    display: none;
  }

  .sidebar-edit-toggle {
    min-height: 26px;
    padding: 0 7px;
  }

  .sidebar-editbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
  }

  .sidebar-editbar span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-editbar > div {
    flex: 0 0 auto;
  }

  .sidebar-editbar button {
    min-height: 26px;
    padding: 0 7px;
  }

  .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 5px 8px 8px;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-group {
    display: contents;
  }

  .nav .nav-title {
    display: none;
  }

  .nav-items,
  .nav-group.collapsed .nav-items,
  .nav-group.expanded .nav-items {
    display: contents;
  }

  .nav button {
    width: auto;
    min-height: 30px;
    padding: 0 8px;
    gap: 5px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .nav .mark {
    width: 28px;
    height: 16px;
    font-size: 9px;
  }

  .sidebar-foot {
    display: none;
  }

  .topbar,
  .toolbar {
    height: auto;
    padding: 8px;
  }

  .topbar {
    min-height: 48px;
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .topbar h1 {
    font-size: 18px;
  }

  .topbar p {
    display: none;
  }

  .topbar-actions {
    flex: 0 0 auto;
  }

  .toolbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }

  .toolbar-left,
  .toolbar-right {
    width: auto;
  }

  .toolbar-left {
    flex: 1 1 100%;
  }

  .toolbar-right {
    margin-left: auto;
  }

  .search {
    width: 100%;
  }

  .filter-bar select,
  .filter-bar button {
    flex: 1 1 130px;
    max-width: none;
  }

  .material-science-shell {
    grid-template-columns: 1fr;
    padding-bottom: 12px;
  }

  .material-color-map {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .material-map-axis:not(.lightness-label) {
    display: none;
  }

  .lightness-label {
    min-height: 30px;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .material-map-cell {
    min-height: 0;
  }

  .material-color-point {
    width: calc(50% - 3px);
  }

  .material-insight-panel {
    position: static;
  }

  .material-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-compare-tray {
    margin-bottom: 10px;
  }

  .attendance-kpis,
  .attendance-shortcut-groups,
  .attendance-request {
    grid-template-columns: 1fr;
  }

  .attendance-shortcut-actions {
    grid-template-columns: 1fr;
  }

  .attendance-request-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .main {
    padding: 8px;
  }

  .stats,
  .status-list,
  .ha-form-grid,
  .ha-check-grid,
  .ha-scope-grid,
  .ha-result-grid,
  .ha-realtime-kpis,
  .ha-realtime-grid,
  .product-image-grid,
  .model-summary,
  .auto-metrics,
  .product-form-grid,
  .task-create-grid,
  .accessory-grid,
  .task-metric-list,
  .form-grid,
  .permission-grid,
  .preview-metrics,
  .role-preview-modules {
    grid-template-columns: 1fr;
  }

  .task-kpis {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  }

  .task-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auto-metrics,
  .model-summary,
  .product-form-grid,
  .accessory-grid,
  .product-image-grid,
  .pending-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field.wide {
    grid-column: 1 / -1;
  }

  .page-hero-kpis {
    grid-template-columns: 1fr;
  }

  .permission-toolbar {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .permission-toolbar div {
    width: 100%;
    margin-right: 0;
  }

  .ha-connect-actions button {
    flex: 1 1 150px;
  }

  .ha-realtime-panel .panel-head {
    display: grid;
    gap: 10px;
  }

  .ha-realtime-actions {
    justify-content: flex-start;
  }

  .ha-realtime-actions button {
    flex: 1 1 120px;
  }
}

@media (max-width: 820px) {
  .production-screen-shell {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    overflow: visible;
  }

  .production-screen-main,
  .production-screen-orders-panel,
  .production-screen-side-panel,
  .production-screen-handoff-panel {
    grid-column: 1 / -1;
    grid-row: auto;
    overflow: visible;
  }

  .production-screen-flow {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
  }

  .production-screen-side-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-screen-order-list,
  .production-screen-record-list {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .page-hero-home_assistant {
    grid-template-columns: 1fr;
  }

  .production-screen-shell {
    gap: 10px;
  }

  .production-screen-main > .panel-head {
    grid-template-columns: 1fr;
  }

  .production-screen-main .ha-realtime-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow-x: visible;
  }

  .production-screen-main .ha-realtime-actions button {
    flex: 1 1 118px;
  }

  .production-screen-time-filters {
    grid-template-columns: 1fr 1fr;
  }

  .production-screen-time-filters label:first-child {
    grid-column: 1 / -1;
  }

  .production-screen-kpis,
  .production-screen-flow,
  .production-screen-side-grid,
  .production-screen-handoff-grid {
    grid-template-columns: 1fr;
  }

  .production-screen-order-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-screen-flow-item {
    min-height: 74px;
  }

  .production-screen-side-grid,
  .production-screen-handoff-grid,
  .production-screen-order-list {
    padding: 10px;
  }

  .production-screen-record-list {
    max-height: none;
  }

  .production-screen-decision-filters {
    grid-template-columns: 1fr 1fr;
  }

  .production-screen-decision-filters .wide,
  .production-screen-decision-filters > strong,
  .production-screen-decision-filters button {
    grid-column: 1 / -1;
  }

  .production-screen-decision-pager {
    align-items: stretch;
    flex-direction: column;
  }

  .production-screen-decision-pager > div {
    justify-content: space-between;
  }

  .production-screen-decision-table-wrap {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
  }
}

@media (max-width: 1100px) {
}

@media (max-width: 760px) {
}

@media (max-width: 480px) {
  .task-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
}

@media (max-width: 760px) {
}

@media (max-width: 1180px) {
}

@media (min-width: 1500px) {
}

.notification-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.notification-topbar {
  display: grid;
  grid-template-columns: minmax(260px, max-content) minmax(220px, 1fr) max-content;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
}

.notification-tabs {
  min-width: 0;
}

.notification-table-wrap table {
  min-width: 980px;
}

.notification-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #d6dde3;
  border-radius: 6px;
  background: #f6f8fa;
  color: #4b5563;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.notification-tag.success {
  border-color: #b8dec4;
  background: #eef8f0;
  color: #25723e;
}

.notification-tag.warning {
  border-color: #efd194;
  background: #fff8e8;
  color: #8a5b00;
}

.notification-tag.danger {
  border-color: #f0b8b8;
  background: #fff0f0;
  color: #a83232;
}

.notification-checks > div {
  display: flex;
  min-height: 40px;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.notification-checks label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  font-weight: 500;
}

.notification-modal {
  width: min(940px, calc(100vw - 28px));
}

.notification-preview-modal {
  width: min(1040px, calc(100vw - 28px));
}

.notification-preview-result {
  margin-top: 14px;
}

.notification-preview-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 12px;
}

.notification-preview-grid section {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
}

.notification-preview-grid h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.notification-preview-grid p {
  margin: 0;
  color: #4b5563;
  line-height: 1.6;
  white-space: pre-wrap;
}

.notification-json {
  max-height: 340px;
  min-height: 120px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  border-radius: 6px;
  background: #16202a;
  color: #eaf0f5;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .notification-topbar {
    grid-template-columns: 1fr;
  }

  .notification-topbar .toolbar-left,
  .notification-topbar .toolbar-right {
    width: 100%;
  }

  .notification-preview-grid {
    grid-template-columns: 1fr;
  }

  .review-toolbar {
    grid-template-columns: 1fr;
  }

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

  .review-toolbar .toolbar-left button {
    justify-self: start;
  }

  .review-toolbar .toolbar-right {
    justify-content: flex-start;
  }

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

  .review-detail-filterbar input {
    grid-column: 1 / -1;
  }

  .review-detail-time-board {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .review-detail-time-section {
    min-width: 0;
  }

  .review-detail-star-board {
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    min-width: 880px;
  }
}

@media (max-width: 760px) {
  .main {
    padding: 12px 8px 18px;
  }

  .page-hero-review_dashboard {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 8px 10px;
  }

  .page-hero-review_dashboard .page-hero-copy span {
    font-size: 11px;
  }

  .page-hero-review_dashboard .page-hero-copy h2 {
    margin-top: 1px;
    font-size: 18px;
    line-height: 1.08;
  }

  .page-hero-review_dashboard .page-hero-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .page-hero-review_dashboard .page-hero-kpis div {
    min-height: 40px;
    padding: 4px 5px;
    border-radius: 6px;
  }

  .page-hero-review_dashboard .page-hero-kpis span {
    font-size: 10px;
    line-height: 1.1;
  }

  .page-hero-review_dashboard .page-hero-kpis strong {
    margin-top: 2px;
    font-size: 14px;
  }

  .review-toolbar {
    gap: 7px;
    margin: 7px 0;
    padding: 7px;
  }

  .review-toolbar .toolbar-left {
    grid-template-columns: 88px 88px 78px 104px 104px 58px;
    gap: 6px;
    overflow-x: auto;
  }

  .review-toolbar .toolbar-right {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
  }

  .review-toolbar .toolbar-right button,
  .review-toolbar .toolbar-left button {
    min-width: 58px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .review-toolbar select,
  .review-toolbar input {
    height: 30px;
    padding: 5px 7px;
    font-size: 12px;
  }

  .review-toolbar + .notice {
    margin-bottom: 7px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .review-detail-panel .panel-head {
    align-items: center;
    gap: 8px;
    min-height: 38px;
  }

  .review-detail-head-actions {
    flex: 0 0 auto;
  }

  .review-detail-filterbar {
    grid-template-columns: 76px 118px 118px 150px 78px 82px 104px 112px 56px 56px;
    gap: 6px;
    overflow-x: auto;
  }

  .review-detail-filterbar button {
    min-width: 56px;
    width: 100%;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .review-detail-filterbar input,
  .review-detail-filterbar select {
    grid-column: auto;
    height: 30px;
    padding: 5px 7px;
    font-size: 12px;
  }

  .review-detail-time-board {
    grid-template-columns: 760px;
    max-height: min(480px, calc(100vh - 250px));
    overflow-x: auto;
  }

  .review-detail-time-section {
    min-width: 0;
  }

  .review-detail-star-board {
    grid-template-columns: repeat(5, minmax(154px, 1fr));
    min-width: 820px;
    height: clamp(300px, calc(100vh - 250px), 480px);
  }

  .review-detail-star-section {
    min-width: 0;
  }

  .review-detail-modal-grid {
    grid-template-columns: 1fr;
  }

  .sku-pagination.review-detail-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .review-command-center {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .page-hero-review_dashboard {
    grid-template-columns: 1fr;
  }

  .page-hero-review_dashboard .page-hero-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-detail-filterbar input {
    grid-column: auto;
  }
}

.finance-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.finance-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  padding: 20px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fbfc 0%, #eef5f1 52%, #f9f3ea 100%);
}

.finance-hero span,
.finance-hero small,
.finance-panel .panel-head span {
  color: #5b6673;
  font-size: 12px;
}

.finance-hero h1 {
  margin: 4px 0 0;
  font-size: 28px;
  letter-spacing: 0;
}

.finance-hero-state {
  min-width: 126px;
  padding: 10px 12px;
  border: 1px solid rgba(32, 45, 57, 0.12);
  border-radius: 8px;
  background: #fff;
  text-align: right;
}

.finance-hero-state b {
  display: block;
  color: #1f8a5b;
}

.finance-hero-state.warn b {
  color: #c84630;
}

.finance-filterbar {
  display: grid;
  grid-template-columns: repeat(9, minmax(104px, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
}

.finance-filterbar label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
}

.finance-filterbar input,
.finance-filterbar select,
.finance-import-box input {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #d6dde3;
  border-radius: 6px;
  background: #fff;
  color: #202d39;
}

.finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.finance-kpi {
  min-height: 118px;
  padding: 14px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.finance-kpi:hover,
.finance-kpi.active {
  border-color: rgba(37, 91, 143, 0.38);
  box-shadow: 0 8px 22px rgba(32, 45, 57, 0.08);
}

.finance-kpi.active {
  background: #f5f9fc;
}

.finance-kpi span {
  display: block;
  color: #5b6673;
  font-size: 12px;
}

.finance-kpi strong {
  display: block;
  margin-top: 6px;
  font-size: 23px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.finance-kpi em {
  display: block;
  margin-top: 6px;
  color: #5b6673;
  font-size: 11px;
  font-style: normal;
}

.finance-sparkline {
  width: 100%;
  height: 34px;
  margin-top: 8px;
}

.finance-kpi-drilldown {
  display: grid;
  gap: 8px;
}

.finance-kpi-drill-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  min-width: 0;
}

.finance-kpi-daily {
  overflow: auto;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
}

.finance-kpi-daily table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 12px;
}

.finance-kpi-daily th,
.finance-kpi-daily td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(32, 45, 57, 0.08);
  text-align: right;
  white-space: nowrap;
}

.finance-kpi-daily th:first-child,
.finance-kpi-daily td:first-child {
  text-align: left;
}

.finance-kpi-daily tr {
  cursor: pointer;
}

.finance-kpi-daily tbody tr:hover {
  background: #f5f9fc;
}

.finance-panel .panel-head.compact {
  margin-bottom: 6px;
}

.finance-kpi-modal {
  width: min(1180px, calc(100vw - 28px));
  max-height: min(820px, calc(100dvh - 28px));
}

.finance-kpi-modal .modal-body {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 12px;
}

.finance-kpi-modal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.finance-kpi-modal-summary article,
.finance-kpi-modal-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
}

.finance-kpi-modal-summary span {
  display: block;
  color: #5b6673;
  font-size: 11px;
}

.finance-kpi-modal-summary strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #202d39;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-kpi-modal-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  min-width: 0;
}

.finance-kpi-modal-card.wide {
  grid-column: 1 / -1;
}

.finance-kpi-modal-card h3,
.finance-kpi-modal-head h3 {
  margin: 0 0 8px;
  color: #202d39;
  font-size: 14px;
}

.finance-kpi-modal-card.muted {
  background: #f8fafb;
}

.finance-kpi-modal-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.finance-kpi-modal-head h3 {
  margin: 0;
}

.finance-kpi-modal-head.compact {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(32, 45, 57, 0.08);
}

.finance-kpi-modal-head span {
  color: #5b6673;
  font-size: 11px;
}

.finance-kpi-daily.compact {
  max-height: 330px;
}

.finance-sparkline path,
.finance-sparkline polyline {
  fill: none;
  stroke: #255b8f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finance-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #f6f8fa;
}

.finance-tabs button,
.segmented.mini button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #4b5563;
  white-space: nowrap;
}

.finance-tabs button.active,
.segmented.mini button.active {
  background: #fff;
  color: #202d39;
  box-shadow: 0 1px 3px rgba(32, 45, 57, 0.12);
}

.finance-layout-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: 14px;
}

.finance-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
}

.finance-panel .panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.finance-panel .panel-head h2 {
  margin: 0;
  font-size: 16px;
}

.finance-panel-head-stack {
  align-items: flex-start;
}

.finance-panel-head-stack > div:first-child {
  min-width: 240px;
}

.finance-sku-metric-tabs {
  flex: 0 0 auto;
  align-self: flex-start;
}

.finance-chart-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 220px;
}

.finance-chart-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

.finance-chart-scroll::after {
  display: block;
  margin-top: 2px;
  color: #7b8794;
  content: "共 " attr(data-points) " 个日点，横向滚动查看全部";
  font-size: 10px;
  text-align: right;
}

.finance-chart-scroll.compact {
  padding-bottom: 0;
}

.finance-chart-scroll.compact::after {
  content: attr(data-points) " 个日点";
}

.finance-chart-scroll .finance-chart-svg {
  width: auto;
  max-width: none;
}

.finance-chart-svg .axis {
  stroke: #cbd5df;
  stroke-width: 1;
}

.finance-trend-snapshot {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.finance-trend-snapshot button {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #f8fafb;
  text-align: left;
}

.finance-trend-snapshot button.good {
  border-color: rgba(31, 138, 91, 0.22);
  background: #f0f8f3;
}

.finance-trend-snapshot button.bad {
  border-color: rgba(200, 70, 48, 0.22);
  background: #fff4f1;
}

.finance-trend-snapshot span {
  display: block;
  color: #5b6673;
  font-size: 11px;
}

.finance-trend-snapshot strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #202d39;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
  color: #5b6673;
  font-size: 12px;
}

.finance-trend-legend span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.finance-trend-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.finance-trend-legend .settlement {
  background: #1f8a5b;
}

.finance-trend-legend .expense {
  background: #c84630;
}

.finance-trend-legend .withdrawal {
  background: #255b8f;
}

.finance-trend-legend .operating {
  background: #b8771a;
}

.finance-trend-legend em {
  margin-left: auto;
  font-style: normal;
}

.finance-chart-svg text {
  fill: #4b5563;
  font-size: 11px;
}

.finance-waterfall rect,
.finance-trend rect,
.finance-trend .operating-point,
.finance-pareto rect {
  cursor: pointer;
}

.finance-trend .grid {
  stroke: rgba(32, 45, 57, 0.05);
  stroke-width: 1;
}

.finance-trend .grid.major {
  stroke: rgba(32, 45, 57, 0.1);
}

.finance-waterfall rect.positive,
.finance-trend .settlement {
  fill: #1f8a5b;
}

.finance-waterfall rect.negative,
.finance-trend .expense {
  fill: #c84630;
}

.finance-waterfall rect.total,
.finance-trend .withdrawal {
  fill: #255b8f;
}

.finance-trend .operating-line,
.finance-pareto .pareto-line {
  fill: none;
  stroke: #b8771a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finance-trend .operating-point {
  fill: #fff;
  stroke: #b8771a;
  stroke-width: 2.2;
}

.finance-trend .operating-point.negative {
  stroke: #c84630;
}

.finance-trend [data-finance-modal-date].active,
.finance-trend [data-finance-modal-range].active,
.finance-mini-trend [data-finance-modal-date].active,
.finance-mini-trend [data-finance-modal-range].active {
  opacity: 1;
  outline: 2px solid #202d39;
  outline-offset: 2px;
}

.finance-kpi-daily tr.active {
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #255b8f;
}

.finance-grain-controls {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #f6f8fa;
}

.finance-grain-controls button {
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #5b6673;
  font-size: 12px;
}

.finance-grain-controls button.active {
  background: #fff;
  color: #202d39;
  box-shadow: 0 1px 3px rgba(32, 45, 57, 0.13);
}

.finance-trend .context-series {
  opacity: 0.46;
}

.finance-trend .focus-series {
  opacity: 1;
}

.finance-metric-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.finance-metric-matrix article {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #f8fafb;
}

.finance-metric-matrix article.active {
  border-color: color-mix(in srgb, var(--metric-color) 46%, #d8e1ea);
  background: #fff;
  box-shadow: inset 3px 0 0 var(--metric-color);
}

.finance-metric-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}

.finance-metric-head span {
  color: #5b6673;
  font-size: 11px;
  font-weight: 700;
}

.finance-metric-head strong {
  overflow: hidden;
  color: #202d39;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-mini-trend {
  min-height: 92px;
}

.finance-mini-trend rect {
  cursor: pointer;
  opacity: 0.78;
}

.finance-mini-trend rect:hover {
  opacity: 1;
}

.finance-mini-trend polyline {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finance-metric-matrix button {
  width: 100%;
  margin-top: 4px;
  overflow: hidden;
  padding: 5px 6px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 6px;
  background: #fff;
  color: #5b6673;
  font-size: 11px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-metric-matrix button:hover {
  border-color: rgba(37, 91, 143, 0.28);
  color: #255b8f;
}

.cost-workbench-shell {
  display: grid;
  gap: 12px;
}

.cost-workbench-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.cost-workbench-cards article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
}

.cost-workbench-cards span {
  display: block;
  color: #5b6673;
  font-size: 12px;
}

.cost-workbench-cards strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #202d39;
  font-size: 20px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-workbench-cards small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #7b8794;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-workbench-toolbar {
  align-items: center;
}

.cost-period-chip {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cost-workbench-table-panel {
  min-width: 0;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.cost-workbench-table-wrap {
  max-height: calc(100vh - 330px);
  min-height: 360px;
}

.cost-workbench-table {
  min-width: 1380px;
}

.cost-workbench-table .trend-col {
  width: 210px;
  min-width: 210px;
}

.cost-workbench-table .roi-col {
  width: 210px;
  min-width: 210px;
}

.cost-sku-cell,
.cost-money-cell,
.cost-status-stack,
.cost-roi-editor {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cost-sku-cell strong,
.cost-money-cell strong {
  overflow: hidden;
  color: #202d39;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-sku-cell span,
.cost-money-cell span {
  overflow: hidden;
  color: #5b6673;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-sku-cell small,
.cost-money-cell small {
  overflow: hidden;
  color: #7b8794;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-money-cell.negative strong,
.cost-money-cell.negative span {
  color: #c84630;
}

.cost-price-trend {
  display: block;
  width: 180px;
  height: 56px;
}

.cost-price-trend polyline {
  fill: none;
  stroke: #255b8f;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cost-price-trend circle {
  fill: #fff;
  stroke: #1f8a5b;
  stroke-width: 1.8;
}

.cost-price-trend text {
  fill: #7b8794;
  font-size: 9px;
}

.cost-trend-empty {
  display: grid;
  width: 180px;
  height: 56px;
  place-items: center;
  border: 1px dashed rgba(32, 45, 57, 0.18);
  border-radius: 6px;
  color: #7b8794;
  font-size: 11px;
}

.cost-roi-editor {
  grid-template-columns: 70px minmax(0, 1fr) 44px;
  align-items: center;
}

.cost-roi-editor input {
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  border: 1px solid #d6dde3;
  border-radius: 6px;
  background: #fff;
  color: #202d39;
  font-size: 12px;
}

.cost-roi-editor button {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.cost-status-stack {
  align-content: start;
}

.cost-workbench-pager {
  margin-top: -2px;
}

@media (max-width: 980px) {
  .cost-workbench-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cost-workbench-toolbar {
    grid-template-columns: 1fr;
  }
}

.finance-day-detail {
  background: #fbfdff;
}

.finance-day-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.finance-day-kpis article {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
}

.finance-day-kpis span {
  display: block;
  color: #5b6673;
  font-size: 11px;
}

.finance-day-kpis strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #202d39;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-day-detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
}

.finance-day-detail-grid section {
  min-width: 0;
}

.finance-day-detail-grid h4 {
  margin: 0 0 6px;
  color: #202d39;
  font-size: 13px;
}

.finance-day-breakdown {
  display: grid;
  gap: 6px;
}

.finance-day-breakdown div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 8px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
}

.finance-day-breakdown span {
  overflow: hidden;
  color: #202d39;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-day-breakdown strong {
  color: #202d39;
  font-size: 12px;
}

.finance-day-breakdown em {
  grid-column: 1 / -1;
  color: #7b8794;
  font-size: 11px;
  font-style: normal;
}

.finance-day-breakdown p {
  margin: 0;
  padding: 10px;
  border: 1px dashed rgba(32, 45, 57, 0.18);
  border-radius: 8px;
  color: #7b8794;
  font-size: 12px;
}

.finance-heatmap rect {
  cursor: pointer;
  stroke: rgba(32, 45, 57, 0.08);
}

.finance-pareto rect {
  fill: #255b8f;
}

.finance-donut-wrap {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  align-items: center;
}

.finance-donut {
  width: 190px;
  height: 190px;
  transform: rotate(-90deg);
}

.finance-donut text {
  transform: rotate(90deg);
  transform-origin: center;
  fill: #202d39;
}

.finance-donut .donut-bg,
.finance-donut .donut-segment {
  fill: none;
  stroke-width: 18;
}

.finance-donut .donut-bg {
  stroke: #e8edf2;
}

.finance-donut .donut-total {
  font-size: 20px;
  font-weight: 700;
}

.finance-donut .donut-caption {
  font-size: 11px;
  fill: #5b6673;
}

.finance-donut-legend,
.finance-risk-grid,
.finance-mini-stats,
.finance-day-grid,
.finance-rank-list,
.finance-recon-grid,
.finance-coverage-summary,
.finance-import-box {
  display: grid;
  gap: 8px;
}

.finance-donut-legend {
  font-size: 12px;
}

.finance-donut-legend span {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.finance-donut-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.finance-risk-grid article,
.finance-mini-stats div {
  padding: 10px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #f8fbfc;
}

.finance-risk-grid article.danger {
  border-color: rgba(200, 70, 48, 0.35);
  background: #fff4f1;
}

.finance-risk-grid article.warning {
  border-color: rgba(184, 119, 26, 0.35);
  background: #fff8ea;
}

.finance-risk-grid article.info {
  border-color: rgba(37, 91, 143, 0.26);
  background: #f0f6fb;
}

.finance-risk-grid span,
.finance-mini-stats span {
  display: block;
  color: #5b6673;
  font-size: 12px;
}

.finance-risk-grid strong,
.finance-mini-stats strong {
  display: block;
  margin-top: 4px;
  color: #202d39;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-risk-grid p {
  margin: 6px 0 0;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.5;
}

.finance-mini-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-day-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.finance-site-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.finance-site-grid button {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
  color: #202d39;
  text-align: left;
}

.finance-site-grid button.active {
  border-color: rgba(37, 91, 143, 0.45);
  background: #f1f7fc;
  box-shadow: inset 3px 0 0 #255b8f;
}

.finance-site-grid button.empty {
  background: #f8fafb;
  color: #7b8794;
}

.finance-site-grid span {
  color: #5b6673;
  font-size: 12px;
}

.finance-site-grid strong {
  color: #202d39;
  font-size: 18px;
}

.finance-site-grid strong.warn,
.finance-site-grid small.warn {
  color: #b66a00;
}

.finance-site-grid em,
.finance-site-grid small {
  overflow: hidden;
  color: #5b6673;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-day-grid button,
.finance-rank-list button,
.finance-recon-grid button {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
  color: #202d39;
  text-align: left;
}

.finance-rank-list button {
  grid-template-columns: 26px 1fr auto;
  align-items: center;
}

.finance-rank-list button.finance-rank-detail {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
}

.finance-rank-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-rank-list .finance-rank-detail > strong {
  grid-column: 2;
  color: #202d39;
  font-size: 15px;
  text-align: left;
  line-height: 1.25;
}

.finance-rank-list .finance-rank-detail span {
  display: grid;
  gap: 4px;
  white-space: normal;
}

.finance-rank-list .finance-rank-detail span strong,
.finance-rank-list .finance-rank-detail span em,
.finance-rank-list .finance-rank-detail span small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-rank-list .finance-rank-detail span em,
.finance-rank-list .finance-rank-detail span small {
  color: #5b6673;
  font-style: normal;
  font-size: 12px;
}

.finance-rank-list .finance-rank-detail span small.warn,
.finance-muted {
  color: #b8771a;
}

.finance-rank-list .finance-rank-detail.active {
  border-color: rgba(37, 91, 143, 0.45);
  background: #f1f7fc;
  box-shadow: inset 3px 0 0 #255b8f;
}

.finance-muted {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.product-penalty-summary,
.product-penalty-detail {
  display: grid;
  gap: 10px;
}

.product-penalty-main {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.75fr);
}

.product-penalty-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-penalty-alias-warn {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-penalty-alias-warn span {
  padding: 5px 8px;
  border: 1px solid rgba(184, 119, 26, 0.32);
  border-radius: 6px;
  background: #fff8ea;
  color: #7a530d;
  font-size: 12px;
}

.product-penalty-rank .finance-rank-list {
  max-height: 640px;
  overflow: auto;
}

.product-penalty-rank .finance-rank-list button.finance-rank-detail {
  padding: 9px;
}

.product-penalty-rank .finance-rank-detail > strong {
  color: #c84630;
}

.product-penalty-pager {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.product-penalty-pager span {
  color: #5b6673;
  font-size: 12px;
  text-align: center;
}

.product-penalty-rate {
  align-self: start;
  padding: 6px 10px;
  border: 1px solid rgba(200, 70, 48, 0.25);
  border-radius: 6px;
  background: #fff4f1;
  color: #c84630;
}

.product-penalty-rate.muted {
  border-color: rgba(91, 102, 115, 0.2);
  background: #f8fafb;
  color: #5b6673;
}

.product-penalty-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 10px;
}

.product-penalty-detail h3 {
  margin: 4px 0 8px;
  font-size: 14px;
}

.finance-table-wrap.compact {
  max-height: 360px;
  overflow: auto;
}

.finance-table-wrap.compact table {
  font-size: 12px;
}

.finance-table-wrap.compact th,
.finance-table-wrap.compact td {
  padding: 6px 7px;
  white-space: nowrap;
}

.finance-table-wrap.compact tr.warn {
  background: #fff8ea;
}

.product-penalty-category-list,
.product-penalty-source-list {
  display: grid;
  gap: 6px;
}

.product-penalty-category-list div,
.product-penalty-source-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 6px;
  background: #f8fbfc;
  font-size: 12px;
}

.product-penalty-category-list span,
.product-penalty-source-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-penalty-source-list em {
  color: #5b6673;
  font-style: normal;
}

.finance-recon-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finance-recon-grid .matched {
  border-color: rgba(31, 138, 91, 0.26);
  background: #f0f8f3;
}

.finance-recon-grid .mismatch {
  border-color: rgba(200, 70, 48, 0.32);
  background: #fff4f1;
}

.finance-scatter circle {
  cursor: pointer;
  fill: rgba(37, 91, 143, 0.55);
  stroke: #255b8f;
}

.finance-scatter circle.missing {
  fill: rgba(200, 70, 48, 0.28);
  stroke: #c84630;
}

.finance-scatter circle.skc {
  fill: rgba(200, 70, 48, 0.28);
  stroke: #c84630;
}

.finance-table-wrap {
  max-height: 430px;
  overflow: auto;
}

.finance-table-wrap table {
  min-width: 720px;
}

.finance-table-wrap td,
.finance-table-wrap th {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-status {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef3f7;
  color: #4b5563;
  font-size: 12px;
}

.finance-status.reconciled,
.finance-status.matched {
  background: #e9f7ee;
  color: #1f7a4f;
}

.finance-status.reconcile_failed,
.finance-status.mismatch {
  background: #fff1ed;
  color: #c84630;
}

.finance-coverage-summary {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
}

.finance-coverage-summary article {
  padding: 6px 8px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 8px;
  background: #fff;
}

.finance-coverage-summary span {
  display: block;
  color: #5b6673;
  font-size: 11px;
}

.finance-coverage-summary strong {
  display: block;
  margin-top: 2px;
  color: #202d39;
  font-size: 16px;
}

.finance-coverage-controls {
  display: grid;
  grid-template-columns: minmax(110px, 0.6fr) minmax(110px, 0.6fr) minmax(180px, 1fr) auto;
  gap: 6px;
  align-items: end;
  margin-bottom: 8px;
}

.finance-coverage-controls label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #5b6673;
  font-size: 11px;
  font-weight: 700;
}

.finance-coverage-controls select,
.finance-coverage-controls input {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #d3dde7;
  border-radius: 8px;
  background: #fff;
  color: #202d39;
  font-size: 12px;
}

.finance-coverage-controls button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #d3dde7;
  border-radius: 8px;
  background: #fff;
  color: #202d39;
  font-weight: 700;
}

.coverage-store-pickbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  align-items: start;
  min-width: 0;
}

.coverage-store-pickbar > span {
  padding-top: 7px;
  color: #5b6673;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.coverage-store-picklist {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.coverage-store-picklist button {
  max-width: none;
  min-height: 28px;
  height: auto;
  padding: 0 9px;
  overflow: visible;
  border-color: #d9e2eb;
  background: #f8fbfc;
  color: #425466;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}

.coverage-store-picklist button.active {
  border-color: rgba(37, 91, 143, 0.42);
  background: #eef6fc;
  color: #255b8f;
}

.coverage-month-group {
  display: grid;
  gap: 4px;
  margin-top: 7px;
}

.coverage-month-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(37, 91, 143, 0.12);
  border-radius: 8px;
  background: #f7fafc;
}

.coverage-month-head strong {
  color: #202d39;
  font-size: 13px;
}

.coverage-month-head span,
.coverage-month-head em {
  overflow: hidden;
  color: #5b6673;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-coverage-grid {
  display: grid;
  grid-template-columns: minmax(132px, 0.82fr) repeat(var(--coverage-cols, 4), minmax(88px, 1fr));
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.coverage-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px 6px;
  border-bottom: 1px solid #dbe2e8;
  background: #fff;
  color: #5b6673;
  font-size: 11px;
  font-weight: 700;
}

.coverage-store,
.coverage-cell {
  min-width: 0;
  min-height: 34px;
  padding: 4px 6px;
  border: 1px solid rgba(32, 45, 57, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #202d39;
  text-align: left;
}

button.coverage-store,
button.coverage-cell {
  cursor: pointer;
}

.coverage-store strong,
.coverage-cell b,
.coverage-cell-line {
  display: flex;
  gap: 5px;
  align-items: center;
  overflow: hidden;
  color: #202d39;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coverage-cell-line {
  width: 100%;
}

.coverage-cell-line b {
  flex: 0 0 auto;
}

.coverage-cell-line em {
  min-width: 0;
  overflow: hidden;
  color: #5b6673;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coverage-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  flex: 0 0 auto;
}

.coverage-dot.ready {
  background: #37a66b;
}

.coverage-dot.empty-state {
  background: #4f8fc7;
}

.coverage-dot.missing {
  background: #d45b44;
}

.coverage-dot.duplicate {
  background: #c78a2c;
}

.coverage-store span,
.coverage-cell > span:not(.coverage-cell-line),
.coverage-cell > em {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #5b6673;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coverage-store.no-data {
  border-style: dashed;
}

.coverage-row-status-ready {
  border-color: rgba(31, 138, 91, 0.28);
  background: #f0f8f3;
}

.coverage-row-status-warning,
.coverage-row-status-duplicate {
  border-color: rgba(184, 119, 26, 0.32);
  background: #fff8ea;
}

.coverage-row-status-missing,
.coverage-cell.missing,
.coverage-cell.error {
  border-color: rgba(200, 70, 48, 0.32);
  background: #fff4f1;
}

.coverage-cell.ready {
  border-color: rgba(31, 138, 91, 0.28);
  background: #f0f8f3;
}

.coverage-cell.empty {
  border-color: rgba(37, 91, 143, 0.24);
  background: #f0f6fb;
}

.coverage-cell.duplicate {
  border-color: rgba(184, 119, 26, 0.32);
  background: #fff8ea;
}

.finance-coverage-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.finance-coverage-legend span {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #4b5563;
  font-size: 12px;
}

.finance-coverage-legend i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.finance-coverage-legend .ready {
  background: #37a66b;
}

.finance-coverage-legend .empty {
  background: #4f8fc7;
}

.finance-coverage-legend .missing {
  background: #d45b44;
}

.finance-coverage-legend .duplicate {
  background: #c78a2c;
}

.finance-duplicate-groups {
  display: grid;
  gap: 8px;
}

.finance-duplicate-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.finance-duplicate-toolbar button,
.finance-duplicate-title button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #d3dde7;
  border-radius: 8px;
  background: #fff;
  color: #202d39;
  font-size: 12px;
  font-weight: 700;
}

.finance-duplicate-toolbar button.danger {
  border-color: rgba(200, 70, 48, 0.34);
  background: #fff4f1;
  color: #b83d28;
}

.finance-duplicate-toolbar button:disabled,
.finance-duplicate-title button:disabled {
  border-color: #d8e0e8;
  background: #f3f6f8;
  color: #8a96a3;
}

.finance-duplicate-toolbar span {
  color: #5b6673;
  font-size: 11px;
}

.finance-duplicate-group {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(184, 119, 26, 0.22);
  border-radius: 8px;
  background: #fffaf0;
}

.finance-duplicate-title {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.finance-duplicate-title strong,
.finance-duplicate-row strong {
  overflow: hidden;
  color: #202d39;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-duplicate-title span {
  color: #5b6673;
  font-size: 11px;
  white-space: nowrap;
}

.finance-duplicate-table {
  display: grid;
  gap: 5px;
}

.finance-duplicate-row {
  display: grid;
  grid-template-columns: 24px 72px minmax(180px, 1.5fr) minmax(130px, 0.8fr) minmax(260px, 1.4fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(32, 45, 57, 0.1);
  border-radius: 7px;
  background: #fff;
}

.finance-duplicate-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.finance-duplicate-check input {
  width: 16px;
  height: 16px;
  accent-color: #c84630;
}

.finance-duplicate-row.effective {
  border-color: rgba(31, 138, 91, 0.26);
  background: #f0f8f3;
}

.finance-duplicate-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #fff2d8;
  color: #9b6417;
  font-size: 11px;
  font-weight: 700;
}

.finance-duplicate-row.effective .finance-duplicate-badge {
  background: #dff3e8;
  color: #1f7a4f;
}

.finance-duplicate-row em,
.finance-duplicate-row small {
  overflow: hidden;
  color: #5b6673;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-duplicate-row button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(200, 70, 48, 0.3);
  border-radius: 8px;
  background: #fff4f1;
  color: #b83d28;
  font-weight: 700;
}

.finance-duplicate-row button:disabled {
  border-color: #d8e0e8;
  background: #f3f6f8;
  color: #8a96a3;
}

.finance-import-box label {
  display: grid;
  gap: 5px;
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
}

.finance-chart-empty,
.finance-loading {
  display: grid;
  min-height: 160px;
  place-items: center;
  border: 1px dashed #cbd5df;
  border-radius: 8px;
  color: #5b6673;
  background: #f8fbfc;
}

@media (max-width: 1180px) {
  .finance-filterbar {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }

  .finance-coverage-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .finance-coverage-controls {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }

  .finance-coverage-controls button {
    grid-column: span 4;
  }

  .finance-kpi-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .finance-trend-snapshot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finance-layout-2 {
    grid-template-columns: 1fr;
  }

  .product-penalty-main,
  .product-penalty-detail-grid {
    grid-template-columns: 1fr;
  }

  .finance-kpi-drill-grid {
    grid-template-columns: 1fr;
  }

  .finance-kpi-modal-grid,
  .finance-kpi-modal-summary {
    grid-template-columns: 1fr;
  }

  .finance-metric-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-day-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-day-detail-grid {
    grid-template-columns: 1fr;
  }

  .finance-recon-grid,
  .finance-day-grid,
  .finance-site-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-duplicate-row {
    grid-template-columns: 24px 72px minmax(160px, 1fr) minmax(130px, 0.8fr) auto;
  }

  .finance-duplicate-row small {
    grid-column: 3 / -1;
  }

  .temu-product-toolbar .toolbar-left {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .temu-product-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
  }

  .temu-product-metrics,
  .temu-product-status {
    grid-column: 2;
  }

  .temu-product-detail-summary,
  .temu-product-flat-grid,
  .temu-product-sample-list {
    grid-template-columns: 1fr;
  }

  .temu-product-media img {
    width: 100%;
    height: auto;
    max-height: 280px;
  }
}

@media (max-width: 680px) {
  .finance-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-filterbar,
  .finance-kpi-grid,
  .finance-trend-snapshot,
  .finance-recon-grid,
  .finance-day-grid,
  .finance-site-grid,
  .finance-mini-stats,
  .product-penalty-kpis,
  .finance-donut-wrap {
    grid-template-columns: 1fr;
  }

  .finance-kpi strong {
    font-size: 20px;
  }

  .finance-coverage-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-coverage-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-coverage-controls button {
    grid-column: span 2;
  }

  .coverage-store-pickbar {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .coverage-store-pickbar > span {
    padding-top: 0;
  }

  .coverage-month-head {
    grid-template-columns: 1fr auto;
  }

  .coverage-month-head em {
    grid-column: 1 / -1;
  }

  .finance-coverage-grid {
    grid-template-columns: minmax(130px, 0.9fr) repeat(var(--coverage-cols, 4), minmax(102px, 1fr));
  }

  .finance-coverage-legend {
    grid-template-columns: 1fr;
  }

  .finance-duplicate-title {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .finance-duplicate-row {
    grid-template-columns: 1fr;
  }

  .finance-panel .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .finance-chart-svg {
    min-height: 190px;
  }

  .finance-metric-matrix {
    grid-template-columns: 1fr;
  }

  .finance-mini-trend {
    min-height: 88px;
  }

  .finance-day-kpis {
    grid-template-columns: 1fr;
  }

  .temu-product-toolbar .toolbar-left,
  .temu-product-toolbar .toolbar-right {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .temu-product-row {
    padding: 10px;
  }

  .temu-product-cover {
    width: 56px;
    height: 56px;
  }

  .temu-product-main button {
    white-space: normal;
  }

  .temu-product-detail-modal {
    width: calc(100vw - 16px);
  }
}