:root {
  --bg: #edf3f8;
  --surface: #fbfdff;
  --surface-2: #e7eef6;
  --text: #162b49;
  --muted: #60718a;
  --line: #cbd8e6;
  --primary: #1f5aa6;
  --green: #168f7a;
  --orange: #c87819;
  --red: #b91c1c;
  --navy: #193762;
  --shadow: 0 3px 12px rgba(25, 55, 98, .09);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
}

.shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid #173359;
  border-radius: 10px;
  background: var(--navy);
  box-shadow: 0 5px 16px rgba(25, 55, 98, .18);
  color: #ffffff;
}

.header-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 24px;
  font-weight: 600;
}

h2 {
  font-size: 16px;
  font-weight: 600;
}

p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.page-header p {
  color: #dbe7f4;
}

.dashboard-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.dashboard-nav-item {
  flex: 0 0 auto;
  height: 34px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-nav-item.is-active {
  border-color: #c8dbf5;
  background: #eaf3ff;
  color: var(--primary);
  font-weight: 600;
}

.page-section {
  display: none !important;
}

.page-section.is-active.toolbar,
.page-section.is-active.stats,
.page-section.is-active.grid {
  display: grid !important;
}

.page-section.is-active.panel {
  display: block !important;
}

.status {
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  box-shadow: none;
  color: #e4eef9;
  font-size: 13px;
  text-align: right;
}

.download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #d8e4f0;
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: var(--shadow);
  color: var(--primary);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.download-link:hover {
  border-color: var(--primary);
  background: #eff6ff;
}

.toolbar,
.panel,
.stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-title h2,
.table-title h2 {
  color: #17385f;
}

.toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr)) minmax(260px, 1.6fr) auto;
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
  align-items: end;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

input,
select,
button {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

input,
select {
  padding: 0 10px;
  min-width: 0;
}

button {
  padding: 0 14px;
  cursor: pointer;
  background: var(--surface-2);
}

button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

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

.stat {
  padding: 14px;
  min-height: 94px;
}

.stat span,
.stat em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

.stat strong {
  display: block;
  margin: 6px 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.panel {
  padding: 14px;
  min-width: 0;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-title span {
  color: var(--muted);
  font-size: 13px;
}

.bars {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 64px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track {
  height: 10px;
  border-radius: 999px;
  background: #e4ebf3;
  overflow: hidden;
}

.fill {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.bar-value {
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mini-chart {
  display: block;
  min-height: 300px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0 0;
  overflow: hidden;
}

.trend-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 8px;
}

.trend-track {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  height: 248px;
  padding: 12px 10px 0;
}

.trend-column {
  position: relative;
  display: flex;
  flex: 0 0 21px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.trend-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 20px;
  max-height: 210px;
  min-height: 2px;
  overflow: hidden;
  border-radius: 4px 4px 1px 1px;
  background: #dbe5ef;
  box-shadow: 0 0 0 1px rgba(25, 55, 98, .08);
}

.trend-segment {
  width: 100%;
  min-height: 1px;
  border-top: 1px solid rgba(255, 255, 255, .45);
}

.trend-total {
  position: absolute;
  bottom: 215px;
  display: none;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--navy);
  color: #ffffff;
  font-size: 10px;
  white-space: nowrap;
}

.trend-column:hover .trend-total {
  display: block;
}

.trend-day-label {
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  transform: rotate(-45deg) translate(-5px, 5px);
  transform-origin: top center;
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin: 6px 10px 2px;
  padding-top: 8px;
  border-top: 1px solid #e1e8f0;
}

.trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.trend-legend-item i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.day-bar {
  flex: 1;
  min-width: 4px;
  background: var(--green);
  border-radius: 4px 4px 0 0;
}

.day-bar.low {
  background: var(--orange);
}

.daily-monitor-panel {
  margin-bottom: 14px;
}

.daily-monitor-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--line);
}

.daily-monitor-toolbar label {
  min-width: 150px;
}

.daily-monitor-search {
  flex: 1 1 240px;
  min-width: 240px !important;
}

.daily-monitor-relation-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px 0 2px;
}

.daily-monitor-relation-card {
  height: auto;
  min-height: 72px;
  padding: 11px 13px;
  text-align: left;
  border-left: 4px solid var(--primary);
  background: var(--surface-2);
}

.daily-monitor-relation-card span,
.daily-monitor-relation-card strong {
  display: block;
}

.daily-monitor-relation-card span {
  color: var(--muted);
  font-size: 12px;
}

.daily-monitor-relation-card strong {
  margin-top: 7px;
  color: var(--text);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.daily-monitor-relation-card.cooperative { border-left-color: var(--green); }
.daily-monitor-relation-card.opportunity { border-left-color: var(--primary); }
.daily-monitor-relation-card.backup { border-left-color: #7c3aed; }
.daily-monitor-relation-card.anomaly { border-left-color: var(--orange); }

.period-switch {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.period-switch-button {
  height: 30px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

.period-switch-button.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow);
}

.daily-monitor-summary {
  color: var(--primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.daily-monitor-availability {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--orange);
  font-size: 12px;
}

.daily-monitor-grid {
  display: grid;
  grid-template-columns: minmax(360px, .85fr) minmax(480px, 1.15fr);
  gap: 24px;
  padding-top: 14px;
}

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

.subpanel-title h3 {
  margin: 0;
  font-size: 14px;
}

.subpanel-title .pager {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.daily-monitor-days,
.daily-monitor-products {
  display: grid;
  gap: 0;
}

.daily-monitor-day,
.daily-monitor-product {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.daily-monitor-day {
  grid-template-columns: minmax(100px, .7fr) minmax(150px, 1fr) minmax(100px, .75fr);
}

.daily-monitor-product {
  grid-template-columns: minmax(160px, .75fr) minmax(280px, 1.35fr) minmax(140px, auto);
}

.daily-monitor-day:first-child,
.daily-monitor-product:first-child {
  border-top: 0;
}

.daily-monitor-day-main,
.daily-monitor-product-main {
  min-width: 0;
}

.daily-monitor-day-main strong,
.daily-monitor-product-main strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.daily-monitor-day-main span,
.daily-monitor-product-main span,
.daily-monitor-day-category,
.daily-monitor-product-time {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.daily-monitor-day-bar {
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 8px;
  align-items: center;
}

.daily-monitor-day-bar em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-align: right;
  white-space: nowrap;
}

.daily-monitor-day-category {
  margin-top: 0;
}

.daily-monitor-factories {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-left: 10px;
  border-left: 2px solid #dbe5ef;
}

.daily-monitor-factory-title {
  color: var(--muted);
  font-size: 11px;
}

.daily-monitor-factory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-top: 1px solid #e6edf4;
  font-size: 12px;
}

.daily-monitor-factory-row strong {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.daily-monitor-factory-row span,
.daily-monitor-factory-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.daily-monitor-factory-row em {
  grid-column: 1 / -1;
}

.daily-monitor-factory-badges {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.daily-monitor-factory-badges b {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.daily-monitor-factory-badges small {
  color: var(--muted);
  font-size: 10px;
}

.factory-relation-badge,
.sku-relation-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.factory-relation-badge.cooperative { background:#dcfce7; color:#166534; }
.factory-relation-badge.uncooperative { background:#f3e8ff; color:#6b21a8; }
.sku-relation-badge.linked { background:#dbeafe; color:#1d4ed8; }
.sku-relation-badge.unlinked { background:#fef3c7; color:#92400e; }
.sku-relation-badge.mixed { background:#e0e7ff; color:#4338ca; }

.factory-name-with-relation,
.factory-detail-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.factory-watch-action,
.factory-monitor-mode {
  grid-column: 1 / -1;
  justify-self: start;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
}

.factory-monitor-mode {
  display: inline-flex;
  align-items: center;
  background: #dcfce7;
  color: #166534;
}

.factory-watch-action.watched {
  background: #eef2ff;
  color: #4338ca;
}

.factory-monitor-panel {
  overflow: hidden;
}

.factory-monitor-status,
.factory-monitor-range {
  color: var(--muted);
  font-size: 12px;
}

.factory-monitor-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.factory-monitor-card {
  padding: 12px;
  border: 1px solid #cfe0f5;
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: #f8fbff;
}

.factory-monitor-card.backup { border-left-color: #7c3aed; }
.factory-monitor-card.alert { border-left-color: var(--orange); }
.factory-monitor-card.material { border-left-color: var(--primary); }

.factory-monitor-card span,
.factory-monitor-card strong {
  display: block;
}

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

.factory-monitor-card strong {
  margin-top: 5px;
  font-size: 20px;
}

.factory-monitor-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.factory-monitor-toolbar label {
  min-width: 180px;
}

.factory-monitor-search {
  flex: 1;
  min-width: 260px !important;
}

.factory-monitor-list {
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.factory-monitor-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) minmax(140px, .7fr) minmax(160px, .75fr) minmax(230px, 1fr) minmax(120px, .55fr);
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #e6edf4;
}

.factory-monitor-main strong,
.factory-monitor-main span,
.factory-monitor-metric span,
.factory-monitor-metric strong,
.factory-monitor-metric em,
.factory-monitor-top span,
.factory-monitor-action span {
  display: block;
}

.factory-monitor-main > strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.factory-monitor-main > span,
.factory-monitor-metric span,
.factory-monitor-metric em,
.factory-monitor-top span,
.factory-monitor-action span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.factory-monitor-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.monitor-mode-badge,
.monitor-alert {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 600;
}

.monitor-alert {
  background: #fee2e2;
  color: #b91c1c;
}

.monitor-alert.material {
  background: #fef3c7;
  color: #92400e;
}

.factory-monitor-metric strong {
  margin-top: 3px;
  font-size: 18px;
}

.factory-monitor-top strong {
  color: var(--text);
}

.factory-monitor-action {
  display: grid;
  justify-items: start;
  gap: 7px;
}

.factory-detail-action {
  height: 28px;
  padding: 0 9px;
  border-color: #b9d2f2;
  background: #eef6ff;
  color: var(--primary);
  font-size: 12px;
}

.overview-factory-directory {
  margin-bottom: 14px;
}

.overview-factory-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.overview-factory-tools label {
  min-width: 160px;
}

.overview-factory-directory .panel-title {
  flex-wrap: wrap;
}

#overviewFactoryPeriod,
#uncooperativeRange,
.factory-monitor-range {
  display: block;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.overview-factory-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 640px;
  overflow: auto;
}

.overview-factory-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  height: auto;
  min-height: 62px;
  padding: 9px 10px;
  border-color: #d7e3ef;
  background: #f8fbff;
  text-align: left;
}

.overview-factory-row:hover {
  background: #eef6ff;
}

.overview-factory-row > b {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.overview-factory-row span,
.overview-factory-row strong,
.overview-factory-row em {
  display: block;
  min-width: 0;
}

.overview-factory-row span > strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
}

.overview-factory-row em {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-factory-sales {
  min-width: 72px !important;
  text-align: right;
}

.overview-factory-sales strong {
  color: var(--primary) !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums;
}

.factory-detail-panel {
  margin-bottom: 14px;
}

.factory-detail-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.factory-detail-toolbar label {
  min-width: 145px;
}

.factory-detail-search {
  flex: 1 1 280px;
  min-width: 240px !important;
}

.factory-detail-status {
  padding-bottom: 9px;
  color: var(--muted);
  font-size: 12px;
}

.factory-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.factory-detail-stat {
  padding: 12px;
  border: 1px solid #cfe0f5;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #f8fbff;
}

.factory-detail-stat.is-alert {
  border-left-color: var(--orange);
  background: #fffaf0;
}

.factory-detail-stat span,
.factory-detail-stat em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.factory-detail-stat strong {
  display: block;
  margin: 4px 0;
  font-size: 22px;
}

.factory-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 14px;
}

.factory-detail-block {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.factory-detail-trend {
  display: grid;
  gap: 7px;
}

.factory-detail-trend-row {
  display: grid;
  grid-template-columns: 190px minmax(100px, 1fr) 70px 90px;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  font-size: 12px;
}

.factory-detail-trend-row.is-alert {
  color: var(--orange);
}

.factory-detail-trend-period,
.factory-detail-trend-row em {
  color: var(--muted);
  font-style: normal;
  white-space: nowrap;
}

.factory-detail-trend-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #e6eef7;
}

.factory-detail-trend-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--primary);
}

.factory-detail-trend-row.is-alert .factory-detail-trend-bar i {
  background: var(--orange);
}

.factory-detail-trend-row strong,
.factory-detail-material-row strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.growth-alert {
  color: var(--orange) !important;
  font-weight: 600;
}

.factory-detail-materials {
  display: grid;
  max-height: 360px;
  overflow: auto;
}

.factory-detail-material-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 72px 70px;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  border-top: 1px solid #edf2f7;
  font-size: 12px;
}

.factory-detail-material-row:first-child {
  border-top: 0;
}

.factory-detail-material-row span {
  overflow-wrap: anywhere;
}

.factory-detail-material-row em {
  color: var(--muted);
  font-style: normal;
  text-align: right;
}

.factory-detail-material-row.is-alert em {
  color: var(--orange);
  font-weight: 600;
}

.factory-detail-list-heading {
  margin-top: 16px;
}

.factory-detail-rows {
  border-top: 1px solid var(--line);
}

.factory-detail-rows .factory-detail-row {
  display: grid;
  grid-template-columns: 70px minmax(180px, 1.4fr) minmax(130px, .8fr) 100px 90px;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 9px 0;
  border-top: 1px solid #edf2f7;
  font-size: 12px;
}

.factory-detail-rows .factory-detail-row:first-child {
  border-top: 0;
}

.factory-detail-dimension {
  color: var(--primary);
}

.factory-detail-rows .factory-detail-row strong {
  overflow-wrap: anywhere;
}

.factory-detail-rows .factory-detail-row span,
.factory-detail-rows .factory-detail-row em {
  color: var(--muted);
  font-style: normal;
  overflow-wrap: anywhere;
}

.factory-detail-rows .factory-detail-row b {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.uncooperative-panel {
  margin-bottom: 14px;
}

.uncooperative-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 14px;
}

.uncooperative-panel .panel-title > div:first-child {
  flex: 1;
  min-width: 0;
}

.uncooperative-panel .pager {
  flex-shrink: 0;
  white-space: nowrap;
}

.uncooperative-toolbar label {
  min-width: 190px;
}

.uncooperative-search {
  flex: 1 1 300px;
}

.uncooperative-list {
  border-top: 1px solid var(--line);
}

.uncooperative-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.2fr) repeat(3, minmax(130px, .65fr)) minmax(130px, .7fr) 100px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e6edf4;
}

.uncooperative-main strong,
.uncooperative-main span,
.uncooperative-metric span,
.uncooperative-metric strong,
.uncooperative-metric em {
  display: block;
}

.uncooperative-seller span,
.uncooperative-seller strong {
  display: block;
}

.uncooperative-seller span {
  color: var(--muted);
  font-size: 11px;
}

.uncooperative-seller strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.uncooperative-main strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.uncooperative-name-button {
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.uncooperative-name-button:hover strong {
  color: var(--primary);
  text-decoration: underline;
}

.uncooperative-main span,
.uncooperative-metric span,
.uncooperative-metric em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.uncooperative-metric strong {
  margin-top: 3px;
  font-size: 16px;
}

.uncooperative-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.uncooperative-action .factory-watch-action,
.uncooperative-action .factory-detail-action {
  grid-column: auto;
  justify-self: end;
}

.daily-monitor-factory {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  padding: 3px 7px;
  border: 1px solid #cfe0f5;
  border-radius: 999px;
  background: #f4f9ff;
  color: #1f4f86;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.daily-monitor-factory em {
  color: var(--muted);
  font-style: normal;
  white-space: nowrap;
}

.recommendation-panel {
  margin-bottom: 14px;
}

.recommendation-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
  border-bottom: 1px solid var(--line);
}

.recommendation-scopes button {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 12px 2px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
}

.recommendation-scopes button[aria-pressed="true"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.recommendation-criteria {
  padding: 10px 0;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.recommendation-reasons {
  margin: 8px 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.75;
  color: #22635a;
}

.recommendation-main .recommendation-checks {
  color: #87601d;
}

.recommendation-price small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.recommendation-factories button.recommendation-factory {
  height: auto;
  white-space: normal;
  text-align: left;
  max-width: 100%;
}

.recommendation-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--line);
}

.recommendation-toolbar label {
  min-width: 150px;
}

.recommendation-search {
  flex: 1 1 240px;
  min-width: 240px !important;
}

.recommendation-summary {
  color: var(--primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.recommendation-availability {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--orange);
  font-size: 12px;
}

.recommendation-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 4px;
}

.recommendation-category-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #cfe0f5;
  border-radius: 6px;
  background: #f4f9ff;
  color: #1f4f86;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.recommendation-category-chip:hover,
.recommendation-category-chip:focus-visible {
  border-color: var(--primary);
  background: #e8f1ff;
  outline: none;
}

.recommendation-category-chip em {
  color: var(--muted);
  font-style: normal;
}

.recommendation-list-title {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.recommendation-list-title h3 {
  margin: 0;
  font-size: 14px;
}

.recommendation-list {
  display: grid;
  gap: 0;
}

.recommendation-row {
  display: grid;
  grid-template-columns: 42px minmax(280px, 1.5fr) minmax(140px, .7fr) minmax(150px, .75fr) 135px;
  gap: 14px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

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

.recommendation-rank {
  padding-top: 2px;
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.recommendation-main,
.recommendation-match,
.recommendation-price {
  min-width: 0;
}

.recommendation-main strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.recommendation-main span,
.recommendation-main small,
.recommendation-match span,
.recommendation-price span,
.recommendation-price em,
.recommendation-time {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.recommendation-main small {
  color: #486581;
  line-height: 1.5;
}

.recommendation-match {
  padding: 7px 9px;
  border-left: 3px solid var(--green);
  background: #effaf7;
}

.recommendation-match strong {
  display: block;
  color: #13715f;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.recommendation-match b,
.recommendation-match small {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.recommendation-match b {
  color: #13715f;
  font-size: 12px;
}

.recommendation-match small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.recommendation-match span {
  color: #277b6c;
}

.recommendation-match.not-listed {
  border-left-color: var(--primary);
  background: #eff6ff;
}

.recommendation-match.not-listed strong,
.recommendation-match.not-listed b {
  color: #1d5fc1;
}

.recommendation-match.suspected {
  border-left-color: #d99000;
  background: #fff8e7;
}

.recommendation-match.suspected strong,
.recommendation-match.suspected b {
  color: #9a6500;
}

.recommendation-sales.alert {
  color: #b42318;
  font-weight: 700;
}

.recommendation-match.not-listed span {
  color: #346cae;
}

.recommendation-match.listed {
  border-left-color: #94a3b8;
  background: #f8fafc;
}

.recommendation-match.listed strong,
.recommendation-match.listed b,
.recommendation-match.listed span {
  color: #64748b;
}

.recommendation-match.unconfirmed {
  border-left-color: var(--orange);
  background: #fff7ed;
}

.recommendation-match.unconfirmed strong,
.recommendation-match.unconfirmed b {
  color: #b45309;
}

.recommendation-match.unconfirmed span {
  color: #c26917;
}

.recommendation-price {
  font-variant-numeric: tabular-nums;
}

.recommendation-factories {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.recommendation-factory {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 240px;
  padding: 3px 7px;
  border: 1px solid #d4e2ef;
  border-radius: 999px;
  background: #f8fbff;
  color: #365b82;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.recommendation-factory em {
  color: var(--muted);
  font-style: normal;
  white-space: normal;
}

.recommendation-time {
  text-align: right;
  white-space: nowrap;
}

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

.factory-list {
  display: grid;
  gap: 0;
}

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

.weekly-sku-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.weekly-sku-heading h3 {
  margin: 0;
  font-size: 14px;
}

.weekly-sku-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}

.weekly-sku-summary {
  margin: 8px 0 2px;
  padding: 8px 10px;
  border-left: 3px solid var(--primary);
  background: #f8fbff;
  color: #43546a;
  font-size: 12px;
  line-height: 1.6;
}

.weekly-sku-list {
  display: grid;
  gap: 0;
  max-height: 620px;
  overflow: auto;
}

.weekly-sku-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(190px, .9fr) minmax(180px, .8fr) minmax(140px, auto);
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.weekly-sku-row:first-child {
  border-top: 0;
}

.weekly-sku-main,
.weekly-sku-meta,
.weekly-sku-price {
  min-width: 0;
}

.weekly-sku-main strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.weekly-sku-main span,
.weekly-sku-meta span,
.weekly-sku-meta em,
.weekly-sku-price span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.weekly-sku-meta em {
  color: #1f4f86;
}

.weekly-sku-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.weekly-row {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.2fr) minmax(150px, auto);
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

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

.weekly-main {
  min-width: 0;
}

.weekly-main strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.weekly-main span,
.weekly-time,
.weekly-bar em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.weekly-bar {
  display: grid;
  grid-template-columns: 1fr 82px;
  gap: 10px;
  align-items: center;
}

.weekly-bar em {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.weekly-time {
  text-align: right;
  white-space: nowrap;
}

.factory-row {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(420px, 1.6fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

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

.factory-tools {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.factory-material-search {
  min-width: 190px;
}

.factory-material-search input {
  width: 190px;
}

.factory-main {
  min-width: 0;
}

.factory-main strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 600;
}

.factory-main span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

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

.factory-chip {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #cfe0f5;
  border-radius: 999px;
  background: #f4f9ff;
  color: #1f4f86;
  font-size: 12px;
  white-space: nowrap;
}

.factory-chip em {
  color: var(--muted);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.factory-chip.muted,
.factory-one {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--line);
}

.factory-one {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.factory-inline {
  position: relative;
}

.factory-inline summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}

.factory-inline-list {
  min-width: 260px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.factory-detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid #eef2f7;
  font-size: 12px;
}

.factory-detail-row:first-child {
  border-top: 0;
}

.factory-detail-row span {
  overflow-wrap: anywhere;
}

.factory-detail-row em,
.factory-more {
  color: var(--muted);
  font-style: normal;
  white-space: nowrap;
}

.table-title {
  align-items: center;
}

.sku-detail-tools {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 12px;
}

.sku-detail-tools label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.sku-detail-tools input {
  width: 220px;
}

.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.pager button {
  height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}

.table-wrap {
  overflow: auto;
  max-height: 620px;
}

table {
  width: 100%;
  min-width: 1420px;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  font-weight: 600;
  color: #334155;
}

td {
  line-height: 1.45;
}

.code {
  max-width: 240px;
  font-weight: 600;
  word-break: break-all;
}

.money {
  min-width: 88px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-change {
  display: block;
  width: fit-content;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fef3c7;
  color: var(--orange);
  font-size: 11px;
  line-height: 1.35;
}

.badge {
  display: inline-flex;
  min-width: 64px;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  background: #e0f2fe;
  color: #075985;
  font-size: 12px;
  white-space: nowrap;
}

.confidence-low {
  background: #ffedd5;
  color: var(--orange);
}

.empty {
  padding: 34px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 980px) {
  .toolbar,
  .stats,
  .grid {
    grid-template-columns: 1fr 1fr;
  }

  .factory-row {
    grid-template-columns: 1fr;
  }

  .weekly-row {
    grid-template-columns: 1fr;
  }

  .daily-monitor-grid {
    grid-template-columns: 1fr;
  }

  .daily-monitor-relation-cards {
    grid-template-columns: 1fr 1fr;
  }

  .factory-monitor-cards {
    grid-template-columns: 1fr 1fr;
  }

  .factory-monitor-row {
    grid-template-columns: 1fr 1fr;
  }

  .factory-monitor-main,
  .factory-monitor-top,
  .factory-monitor-action {
    grid-column: 1 / -1;
  }

  .factory-detail-grid {
    grid-template-columns: 1fr;
  }

  .overview-factory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factory-detail-rows .factory-detail-row {
    grid-template-columns: 70px minmax(160px, 1fr) 90px 80px;
  }

  .factory-detail-rows .factory-detail-row span:nth-child(3) {
    display: none;
  }

  .daily-monitor-product {
    grid-template-columns: 1fr 1fr;
  }

  .daily-monitor-product-time {
    text-align: right;
  }

  .weekly-sku-row {
    grid-template-columns: 1fr 1fr;
  }

  .recommendation-row {
    grid-template-columns: 36px minmax(0, 1fr) minmax(130px, .7fr);
  }

  .recommendation-price,
  .recommendation-time {
    grid-column: 2 / -1;
    text-align: left;
  }

  .weekly-time {
    text-align: left;
  }

  .toolbar .search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .uncooperative-panel .panel-title,
  .recommendation-panel .panel-title {
    flex-direction: column;
    align-items: stretch;
  }

  .uncooperative-panel .pager,
  .recommendation-list-title .pager {
    flex-wrap: wrap;
  }

  .pager button {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .uncooperative-search,
  .recommendation-search {
    flex: 0 1 auto;
  }

  .shell {
    padding: 12px;
  }

  .page-header,
  .toolbar,
  .stats,
  .grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .header-actions {
    justify-content: flex-start;
  }

  .status {
    min-width: 0;
    text-align: left;
  }

  .weekly-sku-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .weekly-sku-tools {
    width: 100%;
    justify-content: space-between;
  }

  .weekly-sku-row {
    grid-template-columns: 1fr;
  }

  .recommendation-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .recommendation-toolbar label {
    min-width: 0;
  }

  .recommendation-row {
    grid-template-columns: 30px 1fr;
  }

  .recommendation-match,
  .recommendation-price,
  .recommendation-time {
    grid-column: 2;
  }

  .recommendation-time {
    text-align: left;
  }

  .daily-monitor-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .daily-monitor-toolbar label {
    min-width: 0;
  }

  .factory-tools {
    width: 100%;
  }

  .factory-material-search {
    flex: 1;
  }

  .factory-material-search input {
    width: 100%;
  }

  .sku-detail-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .sku-detail-tools input {
    width: 100%;
  }

  .daily-monitor-grid {
    gap: 14px;
  }

  .daily-monitor-relation-cards {
    grid-template-columns: 1fr;
  }

  .factory-monitor-cards,
  .factory-monitor-row {
    grid-template-columns: 1fr;
  }

  .factory-monitor-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .factory-monitor-toolbar label,
  .factory-monitor-search {
    min-width: 0 !important;
  }

  .factory-detail-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .factory-detail-toolbar label,
  .factory-detail-search {
    min-width: 0 !important;
  }

  .factory-detail-status {
    padding-bottom: 0;
  }

  .factory-detail-summary {
    grid-template-columns: 1fr;
  }

  .overview-factory-tools {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .overview-factory-tools label {
    min-width: 0;
  }

  .overview-factory-list {
    grid-template-columns: 1fr;
  }

  .factory-detail-trend-row {
    grid-template-columns: 155px minmax(60px, 1fr) 58px 76px;
  }

  .uncooperative-row {
    grid-template-columns: 1fr 1fr;
  }

  .uncooperative-main,
  .uncooperative-action {
    grid-column: 1 / -1;
  }

  .uncooperative-action {
    align-items: flex-start;
    text-align: left;
  }

  .factory-detail-rows .factory-detail-row {
    grid-template-columns: 58px minmax(0, 1fr) 76px;
  }

  .factory-detail-rows .factory-detail-row span:nth-child(3),
  .factory-detail-rows .factory-detail-row em {
    display: none;
  }

  .daily-monitor-day,
  .daily-monitor-product {
    grid-template-columns: 1fr;
  }

  .daily-monitor-day-category,
  .daily-monitor-product-time {
    margin-top: 0;
    text-align: left;
  }

  .daily-monitor-factory-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .daily-monitor-factory-row em {
    grid-column: 1 / -1;
  }

  .uncooperative-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .uncooperative-toolbar label,
  .uncooperative-search {
    min-width: 0;
  }

  .uncooperative-row {
    grid-template-columns: 1fr;
  }

  .uncooperative-main,
  .uncooperative-action {
    grid-column: auto;
  }
}

.auth-gate { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:rgba(25,55,98,.96); }
.auth-gate[hidden] { display:none; }
.auth-card { width:min(390px,100%); box-sizing:border-box; padding:28px; border-radius:8px; background:#fff; }
.auth-card h1 { font-size:22px; }
.auth-card input,.auth-card button { width:100%; box-sizing:border-box; margin-top:10px; }
.auth-error { margin-top:12px; color:#b42318; }
.factory-watch-action { display:none !important; }