:root {
  --bg: #f5f7f3;
  --panel: #ffffff;
  --panel-soft: #f9fbf8;
  --ink: #17201d;
  --muted: #66736f;
  --line: #dfe6e2;
  --line-strong: #cbd8d1;
  --accent: #087f5b;
  --accent-soft: #e6f5ef;
  --amber: #b7791f;
  --amber-soft: #fff6db;
  --danger: #b42318;
  --danger-soft: #fff0ee;
  --info: #335c99;
  --info-soft: #edf4ff;
  --sidebar: #13231f;
  --sidebar-muted: #aebdb7;
  --shadow: 0 14px 35px rgba(26, 42, 36, .08);
}

/* V111 · 系统设置中的大模型安全配置台 */
.view-root[data-view="settings"] .assistant-config-panel {
  position: relative;
  overflow: hidden;
  border-color: #d9e4f3;
  box-shadow: 0 14px 34px rgba(39, 63, 104, .08);
}

.view-root[data-view="settings"] .assistant-config-panel::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: #8a9ab5;
}

.view-root[data-view="settings"] .assistant-config-panel.is-online::before {
  background: #0eb39b;
  box-shadow: 0 0 18px rgba(14, 179, 155, .38);
}

.assistant-config-heading {
  border-bottom: 1px solid #e6ecf5;
}

.assistant-model-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #dce4ef;
  border-radius: 999px;
  color: #66748c;
  background: #f7f9fc;
  font-size: 12px;
  font-weight: 700;
}

.assistant-model-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a0b4;
}

.assistant-model-state.is-online {
  border-color: #bde9df;
  color: #087b6a;
  background: #effbf8;
}

.assistant-model-state.is-online i {
  background: #0eb39b;
  box-shadow: 0 0 0 5px rgba(14, 179, 155, .12);
}

.assistant-config-body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 22px;
  padding: 20px;
}

.assistant-config-summary {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  background: #f7f9fd;
}

.assistant-config-summary > span {
  color: #77859d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.assistant-config-summary > strong {
  overflow: hidden;
  margin-top: 6px;
  color: #172640;
  font-size: 18px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-config-summary dl {
  display: grid;
  gap: 8px;
  margin: 16px 0 14px;
}

.assistant-config-summary dl div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  font-size: 12px;
}

.assistant-config-summary dt {
  color: #8a96aa;
}

.assistant-config-summary dd {
  overflow: hidden;
  margin: 0;
  color: #3d4d66;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-config-summary > small {
  margin-top: auto;
  color: #8a96aa;
  font-size: 11px;
  line-height: 1.6;
}

.assistant-config-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 16px;
  align-content: start;
}

.assistant-config-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.assistant-config-field-wide {
  grid-column: 1 / -1;
}

.assistant-config-field > span {
  color: #273850;
  font-size: 12px;
  font-weight: 750;
}

.assistant-config-field input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #ced9e9;
  border-radius: 10px;
  outline: none;
  color: #172640;
  background: #fff;
  font: 500 13px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.assistant-config-field input:focus {
  border-color: #5468e7;
  box-shadow: 0 0 0 3px rgba(84, 104, 231, .12);
}

.assistant-config-field small {
  color: #8895aa;
  font-size: 11px;
  line-height: 1.45;
}

.assistant-config-links {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  font-size: 12px;
}

.assistant-config-links a {
  color: #4f63dc;
  font-weight: 700;
  text-decoration: none;
}

.assistant-config-links a:hover {
  text-decoration: underline;
}

#assistantModelTestResult {
  overflow: hidden;
  margin-left: auto;
  color: #75839a;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#assistantModelTestResult.is-success { color: #087b6a; }
#assistantModelTestResult.is-error { color: #c13d55; }
#assistantModelTestResult.is-testing { color: #596bd9; }

.assistant-config-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.assistant-config-actions .small-button {
  min-width: 104px;
}

.assistant-config-security {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 11px 20px;
  border-top: 1px solid #e7edf5;
  color: #77859b;
  background: #fbfcfe;
  font-size: 11px;
}

.assistant-config-security span::before {
  margin-right: 6px;
  color: #0aa38d;
  content: "✓";
  font-weight: 800;
}

/* V115 · 货架OCR：本地优先，云端补识别。保持单行任务流，避免设置页堆叠。 */
.view-root[data-view="settings"] .shelf-ocr-config-panel {
  border-color: #dce7e3;
  box-shadow: 0 10px 28px rgba(26, 63, 54, .06);
}

.shelf-ocr-config-heading {
  border-bottom: 1px solid #e5ece8;
}

.shelf-ocr-config-body {
  display: grid;
  grid-template-columns: minmax(250px, .75fr) minmax(0, 1.6fr);
  gap: 22px;
  padding: 18px 20px;
}

.shelf-ocr-config-copy {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 4px 2px;
}

.shelf-ocr-config-copy strong {
  color: #16362d;
  font-size: 15px;
}

.shelf-ocr-config-copy span {
  color: #5e706a;
  font-size: 13px;
  line-height: 1.7;
}

.shelf-ocr-config-copy small {
  color: #879892;
  font-size: 11px;
  line-height: 1.55;
}

.shelf-ocr-config-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: end;
}

.shelf-ocr-config-form select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 30px 0 12px;
  border: 1px solid #ced9e9;
  border-radius: 10px;
  color: #172640;
  background: #fff;
}

.shelf-ocr-toggle {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  color: #273850;
  font-size: 13px;
  font-weight: 750;
}

.shelf-ocr-toggle input {
  width: 17px;
  height: 17px;
  accent-color: #087f5b;
}

.shelf-ocr-config-actions {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding-top: 2px;
}

.shelf-ocr-config-actions a {
  color: #087f5b;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.shelf-ocr-config-actions a:hover { text-decoration: underline; }

#shelfOcrTestResult {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  color: #75839a;
  font-size: 12px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#shelfOcrTestResult.is-success { color: #087b6a; }
#shelfOcrTestResult.is-error { color: #c13d55; }
#shelfOcrTestResult.is-testing { color: #596bd9; }

@media (max-width: 980px) {
  .assistant-config-body {
    grid-template-columns: 1fr;
  }

  .assistant-config-summary {
    min-height: 0;
  }

  .shelf-ocr-config-body { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .assistant-config-body {
    gap: 16px;
    padding: 15px;
  }

  .assistant-config-form {
    grid-template-columns: 1fr;
  }

  .assistant-config-field-wide {
    grid-column: auto;
  }

  .assistant-config-links,
  .assistant-config-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #assistantModelTestResult {
    margin-left: 0;
    text-align: left;
    white-space: normal;
  }

  .assistant-config-actions .small-button {
    width: 100%;
  }

  .shelf-ocr-config-body { gap: 14px; padding: 15px; }
  .shelf-ocr-config-form { grid-template-columns: 1fr; }
  .shelf-ocr-config-actions { align-items: stretch; flex-direction: column; }
  #shelfOcrTestResult { text-align: left; white-space: normal; }
}

/* V101 · replaceable brand logo, persisted in the independent database. */
.brand-mark.has-custom-logo {
  overflow: hidden !important;
  padding: 3px !important;
  background: #fff !important;
}

.brand-mark.has-custom-logo::after {
  display: none !important;
}

.brand-mark.has-custom-logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
}

.view-root[data-view="settings"] .brand-settings-panel {
  margin-bottom: 14px;
  overflow: hidden;
}

.view-root[data-view="settings"] .brand-settings-panel .panel-header {
  min-height: 74px;
}

.brand-settings-body {
  display: grid;
  grid-template-columns: 88px minmax(260px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
}

.brand-logo-preview {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid #d8e0ee;
  border-radius: 20px;
  background: linear-gradient(145deg, #665df6, #426bd8 64%, #21b6aa);
  box-shadow: 0 12px 28px rgba(67, 82, 180, .16);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
}

.brand-logo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
  object-fit: contain;
}

.brand-settings-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.brand-settings-copy strong {
  color: #17233b;
  font-size: 15px;
}

.brand-settings-copy span,
.brand-settings-copy small {
  color: #6f7e95;
  line-height: 1.55;
}

.brand-settings-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 820px) {
  .brand-settings-body {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 16px;
  }

  .brand-logo-preview {
    width: 72px;
    height: 72px;
    border-radius: 17px;
  }

  .brand-settings-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Work-plan intelligence: owner reminders, evidence-based scoring and coaching. */
.office-reminder-center {
  margin: 14px 0 18px;
  padding: 18px 20px;
  border: 1px solid #d9e3f0;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 32px rgba(25, 51, 92, .07);
}

.office-reminder-center > header,
.office-performance-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.office-reminder-center > header > div > span,
.office-performance-panel > header > div > span {
  display: block;
  margin-bottom: 5px;
  color: #63769a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.office-reminder-center h3,
.office-performance-panel h3 {
  margin: 0;
  color: #16233d;
  font-size: 20px;
  line-height: 1.2;
}

.office-reminder-center h3 b {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  margin-left: 7px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #f05267;
  font-size: 12px;
}

.office-reminder-center > header button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #ccd8ec;
  border-radius: 10px;
  color: #365781;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.office-reminder-center > header small {
  color: #557394;
  font-size: 12px;
}

.office-reminder-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.office-reminder-list article {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 13px 14px;
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  background: #fff;
}

.office-reminder-list article > i {
  width: 5px;
  height: 42px;
  border-radius: 5px;
  background: #e3a126;
}

.office-reminder-list article.critical > i { background: #ed5268; }
.office-reminder-list article.warning > i { background: #e3a126; }
.office-reminder-list article > div { min-width: 0; }
.office-reminder-list article span,
.office-reminder-list article strong,
.office-reminder-list article small { display: block; }
.office-reminder-list article span { color: #be4b5d; font-size: 11px; font-weight: 800; }
.office-reminder-list article strong { margin: 4px 0; overflow: hidden; color: #1d2b45; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.office-reminder-list article small { color: #72809a; font-size: 11px; line-height: 1.5; }
.office-reminder-list article button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #d4dff0;
  border-radius: 9px;
  color: #3d5e8d;
  background: #f8fbff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.office-reminder-center.is-clear {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  box-shadow: none;
}
.office-reminder-center.is-clear > div { display: flex; align-items: baseline; gap: 12px; }
.office-reminder-center.is-clear span { color: #078b7b; font-size: 12px; font-weight: 800; }
.office-reminder-center.is-clear strong { color: #243650; font-size: 14px; }
.office-reminder-center.is-clear small { color: #8290a6; font-size: 12px; }
.office-reminder-center.is-clear > button {
  min-height: 32px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid #ccd8ec;
  border-radius: 9px;
  color: #365781;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.office-reminder-center.is-clear > em { flex: 0 0 auto; color: #0a8b77; font-size: 11px; font-style: normal; font-weight: 700; }

.office-performance-panel {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #d9e3f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(25, 51, 92, .08);
}

.office-performance-panel > header { padding: 22px 24px 18px; }
.office-performance-panel > header p { margin: 7px 0 0; color: #75839a; font-size: 12px; }
.office-performance-summary { display: flex; align-items: stretch; gap: 8px; }
.office-performance-summary span {
  min-width: 78px;
  padding: 10px 12px;
  border: 1px solid #e0e8f3;
  border-radius: 12px;
  color: #7a879b;
  background: #f8fafd;
  font-size: 10px;
  text-align: center;
}
.office-performance-summary b { display: block; margin-bottom: 2px; color: #172640; font-size: 19px; }
.office-performance-note { padding: 9px 24px; color: #8b6415; background: #fff8e9; font-size: 11px; }
.office-performance-table { overflow-x: auto; }
.office-performance-head,
.office-performance-table article {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) 82px 78px 78px 78px 78px minmax(220px, 2fr) 56px;
  align-items: center;
  gap: 12px;
  min-width: 980px;
  padding: 12px 22px;
}
.office-performance-head { color: #8290a7; background: #f5f8fc; font-size: 10px; font-weight: 800; }
.office-performance-table article { border-top: 1px solid #edf1f7; color: #263651; }
.office-performance-table article:hover { background: #fbfdff; }
.office-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.office-person > b { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; color: #365fea; background: #edf2ff; font-size: 13px; }
.office-person span,
.office-performance-table article > span { display: block; min-width: 0; }
.office-person strong,
.office-person small,
.office-performance-table article > span b,
.office-performance-table article > span small { display: block; }
.office-person strong { overflow: hidden; color: #17243c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.office-person small,
.office-performance-table article > span small { margin-top: 3px; color: #8b97aa; font-size: 9px; }
.office-performance-table article > span b { color: #293a57; font-size: 13px; }
.office-score { display: flex; align-items: baseline; gap: 4px; }
.office-score strong { color: #395fdd; font-size: 25px; line-height: 1; }
.office-score small { color: #71809b; font-size: 9px; }
.office-score.provisional strong { color: #b17719; }
.office-score.provisional small { color: #aa741e; }
.office-risk-count b { color: #d3485e !important; }
.office-performance-table article > p { margin: 0; color: #65738a; font-size: 11px; line-height: 1.55; }
.office-performance-table article > button { min-height: 30px; border: 1px solid #d5def0; border-radius: 9px; color: #3d5ca0; background: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.office-performance-empty { padding: 36px; color: #8390a5; text-align: center; }

.office-performance-detail { display: grid; gap: 16px; }
.office-performance-score-card { padding: 20px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #182640, #273d66); }
.office-performance-score-card span,
.office-performance-score-card small { display: block; }
.office-performance-score-card strong { display: block; margin: 5px 0; font-size: 50px; line-height: 1; }
.office-performance-score-card small { color: #bac7df; }
.office-performance-components { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.office-performance-components > div { padding: 12px; border: 1px solid #e0e7f2; border-radius: 12px; }
.office-performance-components span,
.office-performance-components b,
.office-performance-components i { display: block; }
.office-performance-components span { color: #7a879c; font-size: 10px; }
.office-performance-components b { margin: 6px 0 8px; color: #263a59; font-size: 13px; }
.office-performance-components i { height: 4px; overflow: hidden; border-radius: 4px; background: #edf1f7; }
.office-performance-components em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4366ed, #20b5a7); }
.office-performance-facts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.office-performance-facts article { padding: 12px; border-radius: 12px; background: #f5f8fc; }
.office-performance-facts span,
.office-performance-facts b { display: block; }
.office-performance-facts span { color: #8490a3; font-size: 9px; }
.office-performance-facts b { margin-top: 5px; color: #1e304e; font-size: 18px; }
.office-performance-recommendations { padding: 16px; border: 1px solid #dfe7f2; border-radius: 14px; }
.office-performance-recommendations h4 { margin: 0 0 10px; }
.office-performance-recommendations p { display: flex; gap: 10px; margin: 8px 0 0; color: #586983; font-size: 12px; }
.office-performance-recommendations p b { color: #4966d7; }
.office-plan-due > em {
  display: block;
  margin-top: 3px;
  color: #71809a;
  font-size: 10px;
  font-style: normal;
}
.office-detail-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.office-completion-review {
  padding: 16px 18px;
  border: 1px solid #dce5f1;
  border-radius: 16px;
  background: #f8fbff;
}
.office-completion-review > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.office-completion-review > header span { color: #6e7fa0; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.office-completion-review h4 { margin: 4px 0 0; color: #20324f; }
.office-completion-review > header > strong { color: #d48a16; font-size: 21px; letter-spacing: .08em; }
.office-completion-review > p { margin: 12px 0 0; color: #596b85; font-size: 12px; line-height: 1.7; }
.office-completion-review > small { display: block; margin-top: 8px; color: #8793a6; font-size: 10px; }
.office-completion-review.is-pending > header > strong { color: #9aa5b5; font-size: 13px; }
.office-evaluation-form { display: grid; gap: 16px; }
.office-evaluation-form > section { padding: 16px; border-radius: 14px; background: #f3f7fc; }
.office-evaluation-form > section span,
.office-evaluation-form > section strong,
.office-evaluation-form > section small { display: block; }
.office-evaluation-form > section span { color: #7a879b; font-size: 10px; }
.office-evaluation-form > section strong { margin: 5px 0; color: #1f304c; font-size: 17px; }
.office-evaluation-form > section small,
.office-evaluation-form > p { color: #7a879b; font-size: 11px; line-height: 1.6; }
.office-evaluation-form > p { margin: 0; padding: 11px 13px; border-radius: 10px; background: #fff7e8; }

@media (max-width: 1200px) {
  .office-reminder-list { grid-template-columns: 1fr; }
  .office-performance-panel > header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
  .office-reminder-center.is-clear > div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .office-reminder-center.is-clear { align-items: flex-start; flex-direction: column; }
  .office-performance-summary { width: 100%; overflow-x: auto; }
  .office-performance-components { grid-template-columns: repeat(2, 1fr); }
  .office-performance-facts { grid-template-columns: repeat(3, 1fr); }
  .office-detail-facts { grid-template-columns: 1fr; }
}

.modal:has(.order-database-modal) {
  width: min(1240px, 96vw);
  max-height: calc(100vh - 28px);
}

.order-database-modal {
  gap: 12px;
  font-size: 13px;
}

.order-database-identity {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.order-database-identity > div {
  min-width: 0;
  padding: 8px 10px;
  display: grid;
  gap: 3px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.order-database-identity > div:nth-child(6n) {
  border-right: 0;
}

.order-database-identity > div:nth-last-child(-n + 6) {
  border-bottom: 0;
}

.order-database-identity span,
.order-database-section-head span,
.order-status-timeline time,
.order-status-timeline em {
  color: var(--muted);
  font-size: 11px;
}

.order-database-identity strong {
  overflow-wrap: anywhere;
}

.order-database-section {
  display: grid;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.order-database-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.order-financial-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--surface);
  border-left: 3px solid var(--accent);
}

.order-financial-strip span {
  padding: 8px 10px;
  display: grid;
  gap: 2px;
  color: var(--muted);
  border-right: 1px solid var(--line);
}

.order-financial-strip span:last-child {
  border-right: 0;
}

.order-financial-strip strong {
  color: var(--ink);
}

.order-status-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 16px;
  background: var(--line);
}

.order-status-timeline li {
  min-width: 0;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 115px minmax(130px, auto) minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  background: #fff;
}

.order-status-timeline li span {
  overflow-wrap: anywhere;
}

.order-status-timeline li em {
  grid-column: 2 / -1;
  font-style: normal;
}

.order-database-activity {
  padding: 8px 10px;
  background: var(--surface);
  border-left: 3px solid var(--line-strong);
}

.order-database-activity summary {
  cursor: pointer;
  font-weight: 700;
}

.order-database-activity p {
  margin: 7px 0 0;
  display: grid;
  grid-template-columns: 130px 160px minmax(0, 1fr);
  gap: 8px;
}

@media (max-width: 900px) {
  .order-database-identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-database-identity > div,
  .order-database-identity > div:nth-child(6n),
  .order-database-identity > div:nth-last-child(-n + 6) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .order-database-identity > div:nth-child(2n) {
    border-right: 0;
  }

  .order-database-identity > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .order-financial-strip,
  .order-status-timeline {
    grid-template-columns: 1fr;
  }

  .order-status-timeline li {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .order-status-timeline li span,
  .order-status-timeline li em {
    grid-column: 1 / -1;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

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

button {
  cursor: pointer;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--bg);
}

.login-panel {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
}

.login-brand .brand-mark {
  background: var(--sidebar);
}

.login-brand strong {
  color: var(--ink);
}

.login-brand small {
  color: var(--muted);
}

.login-panel h1 {
  margin: 8px 0 2px;
  font-size: 24px;
  letter-spacing: 0;
}

.login-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.login-panel input {
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 11px;
  color: var(--ink);
}

.login-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger);
}

.login-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.app-shell {
  min-height: 100vh;
  display: block;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 220px;
  height: 100vh;
  overflow-y: auto;
  background: var(--sidebar);
  color: #fff;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #c9f1df;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 16px;
  letter-spacing: 0;
}

.brand small {
  margin-top: 1px;
  color: var(--sidebar-muted);
  font-size: 11px;
}

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

.nav button {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sidebar-muted);
  text-align: left;
  padding: 0 11px;
  font-size: 13px;
}

.nav button.active,
.nav button:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.nav button.locked {
  opacity: .42;
  cursor: not-allowed;
}

.nav button.locked:hover {
  background: transparent;
  color: var(--sidebar-muted);
}

.nav-group {
  display: grid;
}

.nav-group-toggle {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,.65);
  text-align: left;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-group-toggle:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

.nav-group-arrow {
  font-size: 10px;
  transition: transform .15s ease;
  width: 14px;
  text-align: center;
}

.nav-group-toggle[aria-expanded="false"] .nav-group-arrow {
  transform: rotate(-90deg);
}

.nav-sub {
  display: grid;
  gap: 1px;
  padding-left: 14px;
  border-left: 2px solid rgba(255,255,255,.1);
  margin: 2px 0 4px 6px;
}

.nav-group-toggle[aria-expanded="false"] + .nav-sub {
  display: none;
}

.nav-sub-item {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sidebar-muted);
  text-align: left;
  padding: 0 11px;
  font-size: 13px;
  cursor: pointer;
}

.nav-sub-item.active,
.nav-sub-item:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.nav-sub-item.locked {
  opacity: .42;
  cursor: not-allowed;
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--sidebar-muted);
  font-size: 12px;
}

.sidebar-footer strong {
  color: #c9f1df;
}

.main {
  margin-left: 220px;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
}

.topbar h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

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

.user-label {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.view-root {
  padding: 14px 20px 24px;
  display: grid;
  gap: 12px;
}

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

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

.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  min-height: 80px;
  display: grid;
  align-content: space-between;
  box-shadow: 0 6px 18px rgba(26, 42, 36, .05);
}

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

.metric strong {
  font-size: 28px;
  letter-spacing: 0;
}

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

.metric.warning strong {
  color: var(--amber);
}

.metric.danger strong {
  color: var(--danger);
}

.ops-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  align-items: center;
}

.ops-hero h2 {
  margin: 2px 0 10px;
  font-size: 20px;
  letter-spacing: 0;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

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

.health-card {
  border-left: 1px solid var(--line);
  padding-left: 14px;
  display: grid;
  gap: 6px;
}

.health-card span,
.health-card small {
  color: var(--muted);
  font-size: 12px;
}

.health-card strong {
  font-size: 38px;
  line-height: 1;
}

.progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #edf1ee;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.insight-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 12px;
  align-items: start;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 12px;
  align-items: start;
}

.scanner-layout {
  display: grid;
  gap: 10px;
}

.scanner-panel-header > span {
  color: var(--muted);
  font-size: 12px;
}

.scanner-form {
  display: grid;
  gap: 8px;
}

.scanner-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.scanner-upload-field {
  gap: 3px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.panel-header {
  min-height: 42px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel-header h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0;
}

.panel-body {
  padding: 12px 14px;
}

.suggestion-list,
.rank-list,
.movement-feed {
  display: grid;
}

.suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.suggestion:last-child {
  border-bottom: 0;
}

.suggestion strong,
.suggestion span {
  display: block;
}

.suggestion span,
.suggestion small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.suggestion-numbers {
  text-align: right;
}

.suggestion-numbers b {
  font-size: 22px;
  color: var(--danger);
}

.rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.rank-row:last-child {
  border-bottom: 0;
}

.rank-main {
  display: grid;
  gap: 6px;
}

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

.rank-row b {
  text-align: right;
  font-size: 22px;
}

.movement-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.movement-item:last-child {
  border-bottom: 0;
}

.movement-item p,
.movement-item small {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.movement-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  background: var(--info);
}

.movement-dot.warning {
  background: var(--amber);
}

.movement-dot.ok {
  background: var(--accent);
}

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

.role-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 6px;
}

.role-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.role-card-heading,
.role-card-actions,
.role-permission-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.role-card-heading .badge {
  white-space: nowrap;
}

.role-card-actions {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.role-card-actions small {
  color: var(--muted);
}

.role-permission-form {
  gap: 14px;
}

.role-permission-groups {
  display: grid;
  gap: 12px;
}

.role-permission-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.role-permission-group-title {
  margin-bottom: 10px;
}

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

.role-permission-option {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.role-permission-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.role-permission-option span {
  flex: 1;
}

.role-permission-option small {
  color: var(--amber-strong);
}

.role-permission-option.is-protected {
  background: var(--amber-soft);
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .role-permission-grid {
    grid-template-columns: 1fr;
  }
}

/* XingTang neural command login · v52 */
.login-screen {
  --login-cyan: #66f5e2;
  --login-blue: #58a7ff;
  --login-violet: #8a7dff;
  --login-parallax-x: 0px;
  --login-parallax-y: 0px;
  grid-template-columns: minmax(430px, 1fr) minmax(410px, 474px);
  gap: clamp(56px, 9vw, 150px);
  padding: clamp(34px, 5vw, 74px) clamp(32px, 7.5vw, 142px);
  background:
    radial-gradient(circle at 16% 18%, rgba(90, 82, 255, .28), transparent 30%),
    radial-gradient(circle at 78% 82%, rgba(35, 221, 202, .17), transparent 31%),
    radial-gradient(circle at 52% 48%, rgba(49, 91, 193, .13), transparent 36%),
    linear-gradient(137deg, #020512 0%, #07112b 48%, #041b27 100%);
}

.login-screen::before {
  z-index: -4;
  opacity: .56;
  background-image:
    linear-gradient(rgba(122, 146, 221, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 146, 221, .065) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, .92) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(94, 248, 229, .82) 0 1px, transparent 1.7px);
  background-size: 72px 72px, 72px 72px, 157px 191px, 239px 263px;
  animation-duration: 15s;
}

.login-screen::after {
  z-index: -3;
  top: 50%;
  left: 50%;
  width: min(60vw, 920px);
  border: 0;
  opacity: .54;
  background:
    conic-gradient(from 190deg,
      transparent 0 11%,
      rgba(97, 88, 255, .28) 17%,
      transparent 28% 52%,
      rgba(72, 239, 220, .22) 61%,
      transparent 72% 100%);
  box-shadow: none;
  filter: blur(42px);
  transform: translate(
    calc(-50% + var(--login-parallax-x)),
    calc(-50% + var(--login-parallax-y))
  ) rotate(-10deg);
  animation: login-aurora-turn 18s linear infinite;
}

.login-neural-field {
  z-index: -1;
}

.login-neural-field::before {
  width: 2px;
  opacity: .72;
  background: linear-gradient(transparent, rgba(118, 255, 239, .68), transparent);
  box-shadow:
    62px 0 34px rgba(113, 104, 255, .28),
    -88px 0 48px rgba(49, 230, 210, .18);
}

.login-neural-field::after {
  background:
    radial-gradient(circle at 20% 31%, rgba(116, 105, 255, .18), transparent 15%),
    radial-gradient(circle at 76% 22%, rgba(55, 234, 215, .14), transparent 18%),
    radial-gradient(circle at 62% 88%, rgba(101, 76, 234, .13), transparent 20%);
}

.login-data-stream span {
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(112, 126, 255, .3), #86fff0 72%, transparent);
}

.login-core-viz {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 49%;
  width: clamp(430px, 44vw, 650px);
  aspect-ratio: 1;
  pointer-events: none;
  perspective: 900px;
  transform:
    translate3d(
      calc(-50% + var(--login-parallax-x)),
      calc(-50% + var(--login-parallax-y)),
      0
    );
  transition: transform .22s ease-out;
}

.login-core-viz::before,
.login-core-viz::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}

.login-core-viz::before {
  inset: 21%;
  opacity: .78;
  background:
    radial-gradient(circle, rgba(88, 248, 228, .24), rgba(91, 94, 238, .08) 42%, transparent 69%);
  filter: blur(20px);
  animation: login-core-breathe 4.4s ease-in-out infinite;
}

.login-core-viz::after {
  inset: 2%;
  border: 1px solid rgba(110, 134, 224, .08);
  box-shadow:
    0 0 0 48px rgba(93, 106, 217, .018),
    0 0 0 96px rgba(52, 213, 198, .012);
}

.login-core-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border: 1px solid rgba(117, 147, 234, .24);
  border-radius: 50%;
  box-shadow:
    inset 0 0 30px rgba(69, 238, 220, .035),
    0 0 30px rgba(82, 103, 217, .045);
}

.login-core-ring::before,
.login-core-ring::after {
  position: absolute;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: #8bfff2;
  box-shadow:
    0 0 9px #6aebdf,
    0 0 24px rgba(84, 226, 212, .8);
}

.login-core-ring::before {
  top: 17%;
  left: 10%;
}

.login-core-ring::after {
  right: 8%;
  bottom: 20%;
}

.login-core-ring-a {
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%) rotateX(68deg) rotateZ(8deg);
  animation: login-core-ring-a 11s linear infinite;
}

.login-core-ring-b {
  width: 63%;
  height: 63%;
  border-color: rgba(98, 246, 229, .2);
  transform: translate(-50%, -50%) rotateY(64deg) rotateZ(-14deg);
  animation: login-core-ring-b 8.5s linear infinite reverse;
}

.login-core-ring-c {
  width: 47%;
  height: 47%;
  border-style: dashed;
  border-color: rgba(143, 126, 255, .33);
  transform: translate(-50%, -50%) rotateX(42deg) rotateY(22deg);
  animation: login-core-ring-c 7s linear infinite;
}

.login-core-scan {
  position: absolute;
  inset: 18%;
  display: block;
  opacity: .55;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 77%,
    rgba(102, 245, 226, .02) 82%,
    rgba(102, 245, 226, .4) 98%,
    transparent 100%
  );
  filter: blur(.2px);
  animation: login-core-scan 5.2s linear infinite;
}

.login-core-heart {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 122px;
  height: 122px;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  color: #f5fbff;
  border: 1px solid rgba(154, 175, 255, .42);
  border-radius: 36% 64% 59% 41% / 43% 43% 57% 57%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .18), transparent 30%),
    linear-gradient(145deg, rgba(102, 93, 243, .88), rgba(42, 99, 190, .76) 54%, rgba(35, 206, 188, .72));
  box-shadow:
    0 0 0 12px rgba(94, 105, 235, .055),
    0 0 0 26px rgba(57, 220, 205, .025),
    0 24px 70px rgba(1, 8, 31, .5),
    0 0 46px rgba(71, 222, 209, .28),
    inset 0 1px rgba(255, 255, 255, .28);
  transform: translate(-50%, -50%) rotate(-6deg);
  animation: login-core-heart 4s ease-in-out infinite;
}

.login-core-heart::before {
  position: absolute;
  inset: -40%;
  content: "";
  background: linear-gradient(105deg, transparent 39%, rgba(255, 255, 255, .38) 49%, transparent 59%);
  transform: translateX(-70%) rotate(12deg);
  animation: login-core-glint 5.8s ease-in-out infinite;
}

.login-core-heart i {
  width: 8px;
  height: 8px;
  margin-bottom: 7px;
  border-radius: 50%;
  background: #b7fff7;
  box-shadow:
    0 0 12px #92fff2,
    0 0 30px rgba(132, 255, 241, .8);
}

.login-core-heart strong {
  position: relative;
  font-family: "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.login-core-heart small {
  position: relative;
  margin-top: 5px;
  color: rgba(227, 250, 255, .72);
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 2px;
}

.login-core-node {
  position: absolute;
  z-index: 4;
  min-width: 88px;
  display: grid;
  grid-template-columns: 9px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  padding: 8px 10px;
  color: #e6eeff;
  border: 1px solid rgba(130, 154, 224, .22);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(11, 24, 55, .88), rgba(6, 18, 42, .58));
  box-shadow:
    0 12px 28px rgba(0, 5, 24, .28),
    inset 0 1px rgba(255, 255, 255, .045);
  backdrop-filter: blur(12px);
  animation: login-core-node-float 4.8s ease-in-out infinite;
}

.login-core-node > i {
  grid-row: 1 / span 2;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--login-cyan);
  box-shadow:
    0 0 8px var(--login-cyan),
    0 0 18px rgba(102, 245, 226, .5);
}

.login-core-node b {
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .5px;
}

.login-core-node small {
  margin-top: 2px;
  color: #7383a5;
  font-size: 7px;
  font-weight: 720;
  letter-spacing: 1.2px;
}

.login-core-node-order { top: 11%; left: 44%; animation-delay: -.6s; }
.login-core-node-stock { top: 45%; right: 1%; animation-delay: -1.8s; }
.login-core-node-supply { right: 20%; bottom: 8%; animation-delay: -2.9s; }
.login-core-node-fulfill { bottom: 4%; left: 42%; animation-delay: -3.8s; }

.login-hud-copy {
  z-index: 5;
  max-width: 590px;
}

.login-hud-kicker {
  min-height: 30px;
  padding: 0 13px;
  color: #9efff2;
  border-color: rgba(111, 241, 225, .3);
  background: rgba(45, 203, 187, .075);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .055),
    0 0 26px rgba(55, 214, 199, .06);
  font-size: 9px;
  letter-spacing: 1.9px;
}

.login-hud-copy h2 {
  margin: 24px 0 18px;
  font-family: "Arial Narrow", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: clamp(50px, 4.5vw, 72px);
  font-weight: 840;
  line-height: 1.06;
  letter-spacing: -3px;
  text-wrap: balance;
}

.login-hud-copy h2 em {
  margin-top: 6px;
  background: linear-gradient(94deg, #969dff 0%, #eef1ff 42%, #76f5e5 100%);
  font-size: .78em;
  letter-spacing: -2px;
  filter:
    drop-shadow(0 0 22px rgba(105, 222, 211, .16))
    drop-shadow(0 6px 22px rgba(20, 34, 87, .32));
}

.login-hud-copy > p {
  max-width: 510px;
  color: #98a7c6;
  font-size: 14px;
  line-height: 1.9;
}

.login-hud-stats {
  max-width: 560px;
  gap: 9px;
  margin-top: 30px;
}

.login-hud-stats > div {
  position: relative;
  padding: 13px 14px 12px;
  overflow: hidden;
  border-color: rgba(131, 153, 217, .2);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(17, 33, 72, .68), rgba(7, 20, 48, .42));
}

.login-hud-stats > div::after {
  position: absolute;
  right: -30%;
  bottom: 0;
  width: 60%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--login-cyan));
  animation: login-stat-line 3.8s ease-in-out infinite;
}

.login-hud-stats strong {
  color: #eef4ff;
  font-size: 11px;
  letter-spacing: 1.05px;
}

.login-hud-stats span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8291b0;
  font-size: 9px;
}

.login-hud-stats span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--login-cyan);
  box-shadow: 0 0 9px rgba(102, 245, 226, .8);
  animation: login-status-pulse 2s ease-in-out infinite;
}

.login-panel {
  z-index: 7;
  max-width: 474px;
  gap: 16px;
  padding: 30px 32px 28px;
  color: #eff4ff;
  border-color: rgba(142, 163, 233, .27);
  background:
    radial-gradient(circle at 100% 0, rgba(79, 93, 223, .17), transparent 33%),
    radial-gradient(circle at 0 100%, rgba(38, 210, 192, .085), transparent 34%),
    linear-gradient(145deg, rgba(12, 23, 52, .93), rgba(6, 16, 38, .88));
  box-shadow:
    0 42px 110px rgba(0, 4, 20, .56),
    0 0 0 1px rgba(119, 148, 225, .07),
    0 0 62px rgba(62, 103, 217, .1),
    inset 0 1px rgba(255, 255, 255, .075);
  backdrop-filter: blur(30px) saturate(132%);
}

.login-panel::before {
  inset: 0 24px auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8079ff 18%, #68aeff 54%, #55edda 84%, transparent);
  box-shadow:
    0 2px 16px rgba(101, 116, 244, .58),
    0 0 28px rgba(65, 226, 208, .22);
}

.login-panel::after {
  border-color: rgba(105, 119, 238, .1);
  box-shadow:
    0 0 0 28px rgba(99, 109, 235, .024),
    0 0 0 58px rgba(42, 197, 184, .016);
}

.login-screen.login-live .login-panel {
  animation:
    login-panel-arrive .74s .14s cubic-bezier(.2, .8, .2, 1) both,
    login-command-panel-aura 5.4s 1s ease-in-out infinite;
}

.login-system-state {
  color: #73819f;
  border-color: rgba(132, 151, 208, .14);
}

.login-system-state i {
  background: var(--login-cyan);
  box-shadow: 0 0 11px rgba(102, 245, 226, .75);
}

.login-system-state em {
  color: #7ef3df;
}

.login-brand .brand-mark {
  border-color: rgba(139, 148, 255, .34);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .2), transparent 43%),
    linear-gradient(145deg, #756fff, #4d6de1 54%, #26c7b5);
  box-shadow:
    0 14px 32px rgba(54, 69, 194, .4),
    0 0 28px rgba(55, 221, 204, .12),
    inset 0 1px rgba(255, 255, 255, .32);
}

.login-brand strong {
  color: #f3f6ff;
  font-size: 18px;
}

.login-brand small {
  color: #6f7f9f;
}

.login-panel h1 {
  margin: 8px 0 -8px;
  color: #f4f7ff;
  font-size: 29px;
  letter-spacing: -.7px;
}

.login-subtitle {
  color: #7c8aa7;
}

.login-panel label {
  color: #8896b3;
}

.login-panel input {
  color: #eef4ff;
  border-color: rgba(122, 145, 207, .23);
  background:
    linear-gradient(90deg, rgba(96, 105, 230, .07), transparent 42%),
    rgba(3, 12, 31, .66);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, .2),
    0 0 0 0 rgba(99, 230, 214, 0);
}

.login-panel input::placeholder {
  color: #52617f;
}

.login-panel input:hover {
  border-color: rgba(139, 157, 221, .42);
}

.login-panel input:focus {
  color: #fff;
  border-color: rgba(102, 245, 226, .72);
  background-color: rgba(5, 15, 37, .92);
  box-shadow:
    0 0 0 4px rgba(72, 221, 204, .09),
    0 12px 28px rgba(0, 7, 27, .24),
    inset 0 0 18px rgba(83, 105, 229, .045);
}

.login-panel .primary-button {
  min-height: 50px;
  border: 1px solid rgba(155, 176, 255, .18);
  background:
    radial-gradient(circle at 86% 12%, rgba(100, 255, 235, .48), transparent 30%),
    linear-gradient(105deg, #5d5ce8 0%, #596de7 46%, #249fc7 100%);
  box-shadow:
    0 16px 34px rgba(43, 68, 188, .35),
    0 0 28px rgba(53, 210, 196, .09),
    inset 0 1px rgba(255, 255, 255, .24);
}

.login-panel .primary-button:hover {
  box-shadow:
    0 20px 42px rgba(43, 68, 188, .45),
    0 0 38px rgba(53, 226, 208, .16),
    inset 0 1px rgba(255, 255, 255, .28);
}

.login-hint {
  color: #667593;
  border-color: rgba(133, 151, 204, .13);
}

@keyframes login-aurora-turn {
  from {
    transform: translate(
      calc(-50% + var(--login-parallax-x)),
      calc(-50% + var(--login-parallax-y))
    ) rotate(-10deg);
  }
  to {
    transform: translate(
      calc(-50% + var(--login-parallax-x)),
      calc(-50% + var(--login-parallax-y))
    ) rotate(350deg);
  }
}

@keyframes login-core-breathe {
  0%, 100% { opacity: .56; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.13); }
}

@keyframes login-core-ring-a {
  from { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(8deg); }
  to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(368deg); }
}

@keyframes login-core-ring-b {
  from { transform: translate(-50%, -50%) rotateY(64deg) rotateZ(-14deg); }
  to { transform: translate(-50%, -50%) rotateY(64deg) rotateZ(346deg); }
}

@keyframes login-core-ring-c {
  from { transform: translate(-50%, -50%) rotateX(42deg) rotateY(22deg) rotateZ(0); }
  to { transform: translate(-50%, -50%) rotateX(42deg) rotateY(22deg) rotateZ(360deg); }
}

@keyframes login-core-scan {
  to { transform: rotate(360deg); }
}

@keyframes login-core-heart {
  0%, 100% {
    border-radius: 36% 64% 59% 41% / 43% 43% 57% 57%;
    transform: translate(-50%, -50%) rotate(-6deg) scale(.96);
  }
  50% {
    border-radius: 58% 42% 37% 63% / 55% 61% 39% 45%;
    transform: translate(-50%, -50%) rotate(5deg) scale(1.05);
  }
}

@keyframes login-core-glint {
  0%, 28% { opacity: 0; transform: translateX(-80%) rotate(12deg); }
  42% { opacity: .82; }
  62%, 100% { opacity: 0; transform: translateX(80%) rotate(12deg); }
}

@keyframes login-core-node-float {
  0%, 100% { transform: translateY(0); border-color: rgba(130, 154, 224, .22); }
  50% { transform: translateY(-7px); border-color: rgba(100, 241, 224, .34); }
}

@keyframes login-stat-line {
  0%, 22% { opacity: 0; transform: translateX(-10%); }
  48% { opacity: .9; }
  76%, 100% { opacity: 0; transform: translateX(210%); }
}

@keyframes login-command-panel-aura {
  0%, 100% {
    box-shadow:
      0 42px 110px rgba(0, 4, 20, .56),
      0 0 0 1px rgba(119, 148, 225, .07),
      0 0 52px rgba(62, 103, 217, .08),
      inset 0 1px rgba(255, 255, 255, .075);
  }
  50% {
    box-shadow:
      0 46px 124px rgba(0, 4, 20, .64),
      0 0 0 1px rgba(92, 230, 214, .16),
      0 0 78px rgba(51, 208, 194, .14),
      inset 0 1px rgba(255, 255, 255, .09);
  }
}

@media (max-width: 1120px) and (min-width: 861px) {
  .login-screen {
    grid-template-columns: minmax(350px, 1fr) minmax(390px, 440px);
    gap: 38px;
    padding-inline: 5vw;
  }

  .login-hud-copy h2 {
    font-size: clamp(43px, 4.8vw, 56px);
  }

  .login-core-viz {
    left: 47%;
    width: 500px;
    opacity: .78;
  }
}

@media (max-height: 760px) and (min-width: 861px) {
  .login-screen {
    padding-block: 24px;
  }

  .login-hud-copy h2 {
    margin-block: 18px 13px;
    font-size: clamp(43px, 4vw, 58px);
  }

  .login-hud-stats {
    margin-top: 22px;
  }

  .login-panel {
    gap: 13px;
    padding-block: 24px 23px;
  }
}

@media (max-width: 860px) {
  .login-screen {
    grid-template-columns: minmax(0, 470px);
    justify-content: center;
    padding: 30px 20px;
  }

  .login-hud-copy,
  .login-core-viz {
    display: none;
  }

  .login-panel {
    width: 100%;
    max-width: 470px;
  }

  .login-screen::after {
    left: 50%;
    width: 120vw;
  }
}

@media (max-width: 520px) {
  .login-screen {
    padding: 16px 13px;
  }

  .login-panel {
    gap: 14px;
    padding: 24px 21px 22px;
    border-radius: 22px;
  }

  .login-panel h1 {
    font-size: 27px;
  }
}

/* v53 quiet command — one focal composition, no decorative stacking */
body[data-ui-version="44"] .login-screen {
  grid-template-columns: minmax(420px, 1fr) minmax(410px, 460px);
  gap: clamp(72px, 10vw, 178px);
  padding: clamp(36px, 6vw, 84px) clamp(38px, 8vw, 154px);
  background:
    radial-gradient(ellipse at 10% 10%, rgba(100, 86, 255, .22), transparent 34%),
    radial-gradient(ellipse at 92% 92%, rgba(40, 220, 201, .14), transparent 34%),
    linear-gradient(135deg, #030612 0%, #071128 51%, #041923 100%);
}

body[data-ui-version="44"] .login-screen::after {
  top: 54%;
  left: 28%;
  width: min(58vw, 850px);
  opacity: .22;
  border: 1px solid rgba(117, 145, 225, .16);
  background:
    conic-gradient(from 220deg, transparent 0 68%, rgba(96, 236, 219, .16) 78%, transparent 88% 100%);
  box-shadow:
    0 0 0 92px rgba(91, 104, 220, .012),
    0 0 0 184px rgba(50, 208, 193, .008);
  filter: none;
}

body[data-ui-version="44"] .login-core-viz {
  display: none !important;
}

body[data-ui-version="44"] .login-neural-field {
  opacity: .62;
}

body[data-ui-version="44"] .login-data-stream {
  opacity: .32;
}

body[data-ui-version="44"] .login-hud-copy {
  grid-column: 1;
  grid-row: 1;
  max-width: 610px;
}

body[data-ui-version="44"] .login-hud-copy::before {
  display: none;
}

body[data-ui-version="44"] .login-hud-copy h2 {
  margin: 27px 0 20px;
  font-size: clamp(54px, 4.8vw, 78px);
  line-height: 1.02;
  letter-spacing: -3.6px;
}

body[data-ui-version="44"] .login-hud-copy h2 em {
  margin-top: 10px;
  font-size: .72em;
  letter-spacing: -2px;
}

body[data-ui-version="44"] .login-hud-copy > p {
  max-width: 470px;
  color: #91a0bd;
  font-size: 14px;
  line-height: 1.95;
}

body[data-ui-version="44"] .login-hud-stats {
  max-width: 540px;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 35px;
  padding-top: 19px;
  border-top: 1px solid rgba(136, 155, 211, .16);
}

body[data-ui-version="44"] .login-hud-stats > div {
  flex: 1 1 0;
  padding: 0 19px;
  border: 0;
  border-left: 1px solid rgba(136, 155, 211, .14);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
}

body[data-ui-version="44"] .login-hud-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

body[data-ui-version="44"] .login-hud-stats > div::after {
  display: none;
}

body[data-ui-version="44"] .login-hud-stats strong {
  font-size: 10px;
  letter-spacing: 1.3px;
}

body[data-ui-version="44"] .login-hud-stats span {
  margin-top: 7px;
  font-size: 9px;
}

body[data-ui-version="44"] .login-panel {
  grid-column: 2;
  grid-row: 1;
  max-width: 460px;
  padding: 31px 32px 28px;
  border-color: rgba(143, 163, 224, .23);
  border-radius: 22px;
  background:
    linear-gradient(150deg, rgba(12, 23, 51, .95), rgba(6, 16, 37, .92));
  box-shadow:
    0 44px 120px rgba(0, 4, 20, .62),
    0 0 0 1px rgba(119, 148, 225, .055),
    inset 0 1px rgba(255, 255, 255, .07);
}

body[data-ui-version="44"] .login-panel::after {
  display: none;
}

body[data-ui-version="44"] .login-panel::before {
  inset: 0 28px auto;
  opacity: .9;
}

body[data-ui-version="44"] .login-screen.login-live .login-panel {
  animation: login-panel-arrive .72s .12s cubic-bezier(.2, .8, .2, 1) both;
}

@media (max-width: 1120px) and (min-width: 861px) {
  body[data-ui-version="44"] .login-screen {
    grid-template-columns: minmax(350px, 1fr) minmax(390px, 440px);
    gap: 44px;
    padding-inline: 5vw;
  }

  body[data-ui-version="44"] .login-hud-copy h2 {
    font-size: clamp(44px, 5vw, 58px);
  }

  body[data-ui-version="44"] .login-hud-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-ui-version="44"] .login-hud-stats > div {
    padding: 0;
    border-left: 0;
  }
}

@media (max-width: 860px) {
  body[data-ui-version="44"] .login-screen {
    grid-template-columns: minmax(0, 460px);
    justify-content: center;
    gap: 0;
    padding: 28px 18px;
  }

  body[data-ui-version="44"] .login-hud-copy {
    display: none;
  }

  body[data-ui-version="44"] .login-panel {
    grid-column: 1;
    width: 100%;
  }
}

@media (max-width: 520px) {
  body[data-ui-version="44"] .login-screen {
    padding: 15px 12px;
  }

  body[data-ui-version="44"] .login-panel {
    padding: 24px 21px 22px;
    border-radius: 20px;
  }
}

/* v55 editorial hierarchy */
body[data-ui-version="44"] .login-hud-kicker {
  position: relative;
  min-height: 20px;
  padding: 0 0 0 30px;
  color: #84eee2;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 1.75px;
}

body[data-ui-version="44"] .login-hud-kicker::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 19px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, #65ecdf, rgba(101, 236, 223, .16));
  box-shadow: 0 0 10px rgba(101, 236, 223, .3);
}

body[data-ui-version="44"] .login-hud-copy h2 {
  max-width: 560px;
  margin: 25px 0 21px;
  color: #f5f7ff;
  font-size: clamp(58px, 5vw, 80px);
  font-weight: 840;
  line-height: .98;
  letter-spacing: -4px;
}

body[data-ui-version="44"] .login-hud-copy h2 em {
  display: block;
  margin-top: 13px;
  font-size: .57em;
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -1.7px;
}

body[data-ui-version="44"] .login-hud-copy > p {
  position: relative;
  max-width: 420px;
  margin: 0;
  padding-left: 16px;
  color: #8d9bb7;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: .08px;
}

body[data-ui-version="44"] .login-hud-copy > p::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 2px;
  content: "";
  border-radius: 99px;
  background: linear-gradient(#7a79f3, #53d9ca);
  opacity: .72;
}

@media (max-width: 1120px) and (min-width: 861px) {
  body[data-ui-version="44"] .login-hud-copy h2 {
    font-size: clamp(46px, 5vw, 60px);
  }

  body[data-ui-version="44"] .login-hud-copy > p {
    max-width: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-core-viz,
  .login-core-viz::before,
  .login-core-ring,
  .login-core-scan,
  .login-core-heart,
  .login-core-heart::before,
  .login-core-node,
  .login-hud-stats > div::after {
    animation: none !important;
    transition: none !important;
  }
}

/* v84 · compact product ledger: all essential fields fit without horizontal dragging */
.view-root[data-view="productCatalog"] .panel-header {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.view-root[data-view="productCatalog"] .panel-header .toolbar {
  justify-content: flex-end;
}

.view-root[data-view="productCatalog"] #productSearch {
  width: clamp(220px, 24vw, 360px);
}

.catalog-sort-control {
  display: inline-flex;
  align-items: center;
  height: 34px;
  overflow: hidden;
  border: 1px solid #d8e1ec;
  border-radius: 8px;
  background: #fff;
}

.catalog-sort-control > span {
  padding: 0 7px 0 9px;
  color: #718096;
  font-size: 11px;
  font-weight: 700;
}

.catalog-sort-control select {
  height: 100%;
  min-width: 94px;
  border: 0;
  border-left: 1px solid #e7edf4;
  border-radius: 0;
  background: transparent;
  padding: 0 24px 0 8px;
  color: #243247;
  font-size: 12px;
  font-weight: 700;
}

.catalog-sort-direction {
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}

.view-root[data-view="productCatalog"] .erp-master-table .table-wrap {
  max-height: calc(100vh - 292px);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-top: 1px solid #e7edf4;
  scrollbar-gutter: stable;
}

.view-root[data-view="productCatalog"] .erp-master-table table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.view-root[data-view="productCatalog"] .erp-master-table th,
.view-root[data-view="productCatalog"] .erp-master-table td {
  padding: 6px 6px !important;
  line-height: 1.25;
  vertical-align: middle;
}

.view-root[data-view="productCatalog"] .erp-master-table th {
  height: 34px;
  color: #66758a;
  background: #f6f8fb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
}

.view-root[data-view="productCatalog"] .erp-master-table td {
  height: 54px;
  color: #27364a;
  font-size: 12px;
}

.view-root[data-view="productCatalog"] .erp-master-table tbody tr:hover td {
  background: #f8fbff;
}

.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(1),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(1) { width: 34px; text-align: center; }
.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(2),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(2) { width: 72px; }
.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(3),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(3) { width: 96px; }
.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(4),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(4) { width: auto; }
.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(5),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(5) { width: 70px; }
.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(6),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(6) { width: 76px; }
.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(7),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(7) { width: 68px; }
.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(8),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(8) { width: 104px; }
.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(9),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(9) { width: 140px; }
.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(10),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(10) { width: 50px; text-align: center; }
.view-root[data-view="productCatalog"] .erp-master-table th:nth-child(11),
.view-root[data-view="productCatalog"] .erp-master-table td:nth-child(11) { width: 84px; }

.catalog-material-code,
.catalog-upc {
  display: block;
  overflow: hidden;
  color: #40516a;
  font-family: "Bahnschrift", "DIN Alternate", Consolas, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-product-summary {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.catalog-product-summary > strong,
.catalog-product-summary > span,
.catalog-product-summary > small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-product-summary > strong {
  color: #17243a;
  font-size: 12px;
  font-weight: 800;
}

.catalog-product-summary > span {
  color: #607089;
  font-size: 11px;
}

.catalog-product-summary > small {
  color: #8a98aa;
  font-size: 10px;
}

.catalog-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  color: #506078;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.catalog-price-grid > span {
  display: flex;
  min-width: 0;
  gap: 3px;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-price-grid i {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  border-radius: 4px;
  background: #edf2f8;
  color: #67788f;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.catalog-price-grid strong {
  color: #17243a;
  font-weight: 850;
}

.catalog-row-actions {
  flex-wrap: nowrap;
  gap: 3px;
}

.catalog-row-actions .small-button {
  min-width: 0;
  height: 27px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 11px;
}

@media (max-width: 1280px) {
  .view-root[data-view="productCatalog"] .panel-header {
    grid-template-columns: 1fr;
  }

  .view-root[data-view="productCatalog"] .panel-header .toolbar {
    justify-content: flex-start;
  }

  .view-root[data-view="productCatalog"] #productSearch {
    flex: 1 1 220px;
    width: auto;
  }
}

@media (max-width: 900px) {
  .view-root[data-view="productCatalog"] .erp-master-table .table-wrap {
    max-height: none;
    overflow: visible !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table table,
  .view-root[data-view="productCatalog"] .erp-master-table thead,
  .view-root[data-view="productCatalog"] .erp-master-table tbody,
  .view-root[data-view="productCatalog"] .erp-master-table tr,
  .view-root[data-view="productCatalog"] .erp-master-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table thead {
    display: none !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table tbody {
    display: grid !important;
    gap: 8px;
    padding: 10px;
  }

  .view-root[data-view="productCatalog"] .erp-master-table tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr);
    height: auto !important;
    min-height: 24px;
    gap: 7px;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td::before {
    display: block !important;
    color: #8390a2;
    content: "";
    font-size: 10px;
    font-weight: 800;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(1)::before { content: "选择"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(2)::before { content: "商品编号"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(3)::before { content: "物料编码"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(4)::before { content: "商品资料"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(5)::before { content: "分类"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(6)::before { content: "供应商"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(7)::before { content: "状态"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(8)::before { content: "UPC/条码"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(9)::before { content: "价格"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(10)::before { content: "库存线"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(11)::before { content: "操作"; }

  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(4),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(9),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(11) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .view-root[data-view="productCatalog"] .erp-master-table tr {
    grid-template-columns: 1fr;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(n) {
    grid-column: 1;
  }
}

/* V112 · unified sidebar icon system
   The existing icon classes remain as semantic hooks, while SVG owns the artwork. */
body[data-ui-version="44"] .nav > button,
body[data-ui-version="44"] .nav .nav-group-toggle {
  min-height: 52px !important;
  gap: 11px !important;
}

body[data-ui-version="44"] .nav-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 1px 0 0 !important;
  overflow: hidden !important;
  color: #66738a !important;
  border: 1px solid #dfe5ef !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f5f7fb 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 9px rgba(43, 58, 90, 0.07) !important;
  transform: none !important;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

body[data-ui-version="44"] .nav-icon::before,
body[data-ui-version="44"] .nav-icon::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  content: none !important;
}

body[data-ui-version="44"] .nav-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

body[data-ui-version="44"] .nav > button:hover .nav-icon,
body[data-ui-version="44"] .nav .nav-group-toggle:hover .nav-icon {
  color: #4e57c8 !important;
  border-color: #cbd2f7 !important;
  background: linear-gradient(145deg, #ffffff 0%, #eef1ff 100%) !important;
  box-shadow: inset 0 1px 0 #fff, 0 5px 13px rgba(82, 91, 205, 0.13) !important;
  transform: translateY(-1px) !important;
}

body[data-ui-version="44"] .nav > button.active .nav-icon,
body[data-ui-version="44"] .nav-group:has(.nav-sub-item.active) > .nav-group-toggle .nav-icon {
  color: #ffffff !important;
  border-color: rgba(90, 102, 222, 0.2) !important;
  background: linear-gradient(145deg, #6366e8 0%, #5167d9 52%, #23a99e 130%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 7px 16px rgba(76, 86, 194, 0.22) !important;
}

body[data-ui-version="44"] .nav .nav-group-toggle[aria-expanded="true"] .nav-icon:not(:has(svg:focus)) {
  border-color: #d2d7f7 !important;
}

@media (max-width: 980px) {
  body[data-ui-version="44"] .nav-icon {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }
}

/* v85 · high-frequency product ledger density */
.view-root[data-view="productCatalog"] .panel {
  border-radius: 12px;
}

.view-root[data-view="productCatalog"] .catalog-compact-header {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 10px 12px;
}

.catalog-header-copy {
  min-width: 0;
  padding-left: 9px;
  border-left: 3px solid #24a993;
}

.catalog-header-copy h2 {
  margin: 0;
  color: #1c2a41;
  font-size: 17px;
  line-height: 1.2;
}

.catalog-header-copy .hint {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-commandbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.catalog-filter-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 112px 146px 60px;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.catalog-filter-row > input,
.catalog-filter-row > select,
.catalog-filter-row > button,
.catalog-filter-row .catalog-sort-control,
.catalog-command-actions .small-button {
  height: 30px;
}

.view-root[data-view="productCatalog"] #productSearch {
  width: 100%;
  min-width: 0;
  padding: 0 8px;
  font-size: 11px;
}

.catalog-filter-row > select {
  padding: 0 22px 0 7px;
  font-size: 11px;
}

.catalog-filter-row .catalog-sort-control {
  border-radius: 7px;
}

.catalog-filter-row .catalog-sort-control > span {
  padding-right: 5px;
  padding-left: 7px;
  font-size: 10px;
}

.catalog-filter-row .catalog-sort-control select {
  min-width: 86px;
  padding-right: 20px;
  padding-left: 6px;
  font-size: 11px;
}

.catalog-filter-row .catalog-sort-direction {
  min-width: 60px;
  padding: 0 6px;
  font-size: 10px;
}

.catalog-command-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
}

.catalog-command-actions .small-button {
  padding: 0 8px;
  border-radius: 7px;
  font-size: 10px;
  white-space: nowrap;
}

.view-root[data-view="productCatalog"] .product-catalog-actions {
  min-height: 38px;
  margin: 0;
  padding: 5px 10px;
  gap: 5px;
  border-radius: 0;
  border-right: 0;
  border-left: 0;
  box-shadow: none;
}

.view-root[data-view="productCatalog"] .product-catalog-actions .check-field {
  min-height: 28px;
  font-size: 10px;
}

.view-root[data-view="productCatalog"] .product-catalog-actions .hint {
  margin-right: auto;
  font-size: 10px;
  white-space: nowrap;
}

.view-root[data-view="productCatalog"] .product-catalog-actions .small-button {
  height: 27px;
  min-height: 27px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 10px;
}

@media (min-width: 1181px) {
  .view-root[data-view="productCatalog"] .erp-master-table .table-wrap {
    max-height: calc(100vh - 238px);
  }

  .view-root[data-view="productCatalog"] .erp-master-table th,
  .view-root[data-view="productCatalog"] .erp-master-table td {
    height: 42px;
    padding: 4px 5px !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table th {
    height: 30px;
    font-size: 10px;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td {
    font-size: 10.5px;
  }

  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(11),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(11) {
    width: 70px !important;
  }
}

.catalog-product-summary {
  gap: 1px;
}

.catalog-product-summary > strong {
  font-size: 11px;
  line-height: 1.15;
}

.catalog-product-summary > span {
  font-size: 9.5px;
  line-height: 1.15;
}

.catalog-product-summary > span > small {
  color: #8b97a7;
  font-size: 9px;
}

.catalog-price-grid {
  gap: 1px 5px;
  font-size: 9px;
}

.catalog-price-grid i {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  font-size: 8px;
}

.catalog-row-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
  align-items: center;
}

.catalog-row-actions .small-button {
  width: 31px;
  min-width: 31px;
  height: 25px;
  padding: 0 3px;
  font-size: 9px;
}

.view-root[data-view="productCatalog"] .pagination-bar {
  min-height: 38px;
  padding: 5px 10px;
  gap: 6px;
}

.view-root[data-view="productCatalog"] .pagination-bar select,
.view-root[data-view="productCatalog"] .pagination-bar .small-button {
  height: 27px;
  min-height: 27px;
  font-size: 10px;
}

@media (max-width: 1280px) and (min-width: 901px) {
  .view-root[data-view="productCatalog"] .catalog-compact-header {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .catalog-header-copy {
    display: flex;
    align-items: baseline;
    gap: 9px;
  }

  .catalog-header-copy .hint {
    margin-top: 0;
  }
}

@media (max-width: 1080px) and (min-width: 901px) {
  .catalog-commandbar {
    grid-template-columns: 1fr;
  }

  .catalog-command-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 1180px) {
  .view-root[data-view="productCatalog"] .catalog-compact-header,
  .catalog-commandbar,
  .catalog-filter-row {
    grid-template-columns: 1fr;
  }

  .catalog-command-actions {
    justify-content: flex-start;
  }
}

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

.toolbar input,
.toolbar select,
.field input,
.field select,
.field textarea {
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 0 9px;
  background: #fff;
  color: var(--ink);
  min-width: 0;
  font-size: 13px;
}

.field textarea {
  height: auto;
  min-height: 72px;
  padding: 8px;
  resize: vertical;
}

.check-field {
  min-height: 34px;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

.check-field input {
  width: 15px;
  height: 15px;
}

.toolbar input {
  width: min(320px, 100%);
}

.check {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.check input {
  width: 16px;
  height: 16px;
}

.primary-button,
.ghost-button,
.text-button,
.danger-button,
.small-button {
  min-height: 34px;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 13px;
}

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

.ghost-button {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--ink);
}

.text-button {
  background: transparent;
  color: var(--accent);
  padding-inline: 6px;
}

.danger-button {
  background: var(--danger-soft);
  color: var(--danger);
}

.small-button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 13px;
  background: #fff;
  border-color: var(--line-strong);
  color: var(--ink);
}

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

.small-button.danger {
  background: var(--danger-soft);
  border-color: #ffd2cc;
  color: var(--danger);
}

.product-catalog-actions,
.pagination-bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pagination-bar {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
}

.pagination-bar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.pagination-bar select {
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  padding: 0 8px;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.erp-master-table table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.erp-master-table th,
.erp-master-table td {
  padding: 8px 7px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.erp-master-table .table-wrap {
  max-height: calc(100vh - 280px);
  overflow: auto;
}

.erp-master-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f4f7f5;
  border-top: 1px solid var(--line);
  box-shadow: 0 2px 0 var(--line), 0 8px 14px rgba(15, 35, 29, .06);
}

.erp-master-table .catalog-code {
  color: var(--accent);
}

.erp-master-table th:nth-child(1),
.erp-master-table td:nth-child(1) {
  width: 44px;
  text-align: center;
}

.erp-master-table th:nth-child(2),
.erp-master-table td:nth-child(2) {
  width: 72px;
}

.erp-master-table th:nth-child(3),
.erp-master-table td:nth-child(3) {
  width: 180px;
}

.erp-master-table th:nth-child(4),
.erp-master-table td:nth-child(4) {
  width: 72px;
}

.erp-master-table th:nth-child(5),
.erp-master-table td:nth-child(5) {
  width: 104px;
}

.erp-master-table th:nth-child(6),
.erp-master-table td:nth-child(6) {
  width: 86px;
}

.erp-master-table th:nth-child(7),
.erp-master-table td:nth-child(7) {
  width: 82px;
}

.erp-master-table th:nth-child(8),
.erp-master-table td:nth-child(8) {
  width: 102px;
}

.erp-master-table th:nth-child(9),
.erp-master-table td:nth-child(9),
.erp-master-table th:nth-child(10),
.erp-master-table td:nth-child(10),
.erp-master-table th:nth-child(11),
.erp-master-table td:nth-child(11),
.erp-master-table th:nth-child(12),
.erp-master-table td:nth-child(12) {
  width: 72px;
}

.erp-master-table th:nth-child(13),
.erp-master-table td:nth-child(13) {
  width: 76px;
}

.erp-master-table th:nth-child(14),
.erp-master-table td:nth-child(14) {
  width: 104px;
}

.erp-master-table td:nth-child(9),
.erp-master-table td:nth-child(10),
.erp-master-table td:nth-child(11),
.erp-master-table td:nth-child(12),
.erp-master-table td:nth-child(13) {
  font-variant-numeric: tabular-nums;
}

.erp-master-table .product-name-cell,
.erp-master-table .spec-cell,
.erp-master-table .supplier-cell {
  display: block;
  max-width: 100%;
}

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

th {
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 12px;
  font-weight: 700;
}

td {
  font-size: 13px;
}

.num {
  font-variant-numeric: tabular-nums;
}

.product-name-cell {
  max-width: 20em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.spec-cell {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.supplier-cell {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .erp-master-table .table-wrap {
    max-height: none;
    overflow: visible;
  }

  .erp-master-table table,
  .erp-master-table thead,
  .erp-master-table tbody,
  .erp-master-table tr,
  .erp-master-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .erp-master-table thead {
    display: none;
  }

  .erp-master-table tbody {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .erp-master-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    padding: 10px 12px;
  }

  .erp-master-table td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    border-bottom: 0;
    padding: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .erp-master-table tr > td:nth-child(n) {
    width: 100%;
  }

  .erp-master-table td::before {
    color: var(--muted);
    content: "";
    font-size: 12px;
    font-weight: 700;
  }

  .erp-master-table td:nth-child(1)::before { content: "选择"; }
  .erp-master-table td:nth-child(2)::before { content: "商品编号"; }
  .erp-master-table td:nth-child(3)::before { content: "商品名称"; }
  .erp-master-table td:nth-child(4)::before { content: "分类"; }
  .erp-master-table td:nth-child(5)::before { content: "规格"; }
  .erp-master-table td:nth-child(6)::before { content: "供应商"; }
  .erp-master-table td:nth-child(7)::before { content: "商品状态"; }
  .erp-master-table td:nth-child(8)::before { content: "UPC/条码"; }
  .erp-master-table td:nth-child(9)::before { content: "售价"; }
  .erp-master-table td:nth-child(10)::before { content: "公司进货价"; }
  .erp-master-table td:nth-child(11)::before { content: "供货价"; }
  .erp-master-table td:nth-child(12)::before { content: "折扣价"; }
  .erp-master-table td:nth-child(13)::before { content: "建议最低库存"; }
  .erp-master-table td:nth-child(14)::before { content: "操作"; }

  .erp-master-table td:nth-child(3),
  .erp-master-table td:nth-child(14) {
    grid-column: 1 / -1;
  }

  .erp-master-table .product-name-cell,
  .erp-master-table .spec-cell,
  .erp-master-table .supplier-cell {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .erp-master-table tbody {
    padding: 10px;
  }

  .erp-master-table tr {
    grid-template-columns: 1fr;
  }

  .erp-master-table td {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}

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

.stack {
  display: grid;
  gap: 4px;
}

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

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  background: var(--info-soft);
  color: var(--info);
}

.badge.pending,
.badge.pending_supplier,
.badge.purchased,
.badge.executing,
.badge.partially_fulfilled,
.badge.partially_received {
  background: var(--amber-soft);
  color: var(--amber);
}

.badge.ready,
.badge.approved,
.badge.received,
.badge.confirmed,
.badge.fulfilled,
.badge.arrived,
.badge.shelved {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge.cancelled,
.badge.closed,
.badge.low {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge.picked_up {
  background: #eef0f1;
  color: #52605b;
}

.badge.delivering {
  background: var(--info-soft, #e3f2fd);
  color: var(--info, #1565c0);
}

.badge.sent_supplier,
.badge.shipped {
  background: #eef2ff;
  color: #4338ca;
}

.badge.return_pending {
  background: var(--amber-soft);
  color: var(--amber);
}

.badge.returned {
  background: var(--danger-soft);
  color: var(--danger);
}

.empty {
  min-height: 80px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
}

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

.field {
  display: grid;
  gap: 4px;
}

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

.field.full {
  grid-column: 1 / -1;
}

.ocr-upload-zone {
  min-height: 72px;
  border: 1px dashed #79a997;
  border-radius: 6px;
  background: #f3faf6;
  display: grid;
  place-content: center;
  gap: 3px;
  text-align: center;
  color: var(--accent) !important;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
  padding: 10px;
}

.ocr-upload-zone:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ocr-upload-zone strong {
  color: var(--accent);
  font-size: 14px;
}

.ocr-upload-zone span,
.ocr-upload-zone small,
.ocr-file-meta {
  color: var(--muted);
  font-size: 12px;
}

.ocr-paste-zone {
  min-height: 58px;
  outline: none;
}

.ocr-paste-zone:focus-visible,
.ocr-paste-zone.is-dragging,
.ocr-paste-zone.is-recognizing {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(13, 139, 100, .14);
}

.ocr-paste-zone small {
  line-height: 1.5;
}

.ocr-file-meta {
  min-height: 15px;
  line-height: 1.25;
}

.ocr-trigger {
  justify-self: start;
}

.ocr-result {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel-soft);
}

.ocr-result-header {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.ocr-result-header strong,
.ocr-result-header span {
  display: block;
}

.ocr-result-header strong {
  font-size: 14px;
}

.ocr-result-header > div > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.ocr-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.ocr-meta-grid > div {
  padding: 7px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.ocr-meta-grid > div:nth-child(4n) {
  border-right: 0;
}

.ocr-meta-grid > div:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.ocr-meta-grid span,
.ocr-meta-grid strong {
  min-width: 0;
}

.ocr-meta-grid span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.ocr-meta-grid strong {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.ocr-items-heading {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 12px;
  padding: 7px 12px 5px;
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  font-weight: 700;
}

.ocr-items-grid {
  display: grid;
  gap: 5px;
  padding: 5px 8px 8px;
  background: #fff;
}

.ocr-item-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 12px;
  align-items: center;
}

.ocr-item-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, .38fr);
  gap: 8px;
  align-items: center;
}

.ocr-item-main,
.ocr-item-side {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ocr-item-main > strong {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
}

.ocr-item-main > strong i {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.ocr-item-main strong,
.ocr-item-main span,
.ocr-item-side small {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.ocr-item-main span,
.ocr-item-side small {
  color: var(--muted);
  font-size: 12px;
}

.ocr-item-shipment {
  border-left: 1px solid var(--line);
  padding-left: 12px;
  display: grid;
  min-width: 0;
}

.shipment-inline-title {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.ocr-match {
  color: var(--accent);
  font-size: 12px;
}

.ocr-unmatched {
  color: var(--amber);
  font-size: 12px;
}

.ocr-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 10px;
  color: #805b12;
  background: var(--amber-soft);
  font-size: 12px;
  line-height: 1.4;
}

.ocr-notes span + span::before {
  content: "· ";
}

.shipment-panel {
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
  padding: 8px 10px;
  display: grid;
  gap: 12px;
}

.shipment-panel.compact {
  background: #fff;
}

.shipment-header,
.shipment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.shipment-header strong,
.shipment-header span {
  display: block;
}

.shipment-header span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.6;
}

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

.shipment-row {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) 86px minmax(0, 1.4fr) 64px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.shipment-row.inline {
  grid-template-columns: minmax(105px, .62fr) 58px minmax(0, 1.38fr);
  gap: 7px;
  padding: 0;
  border: 0;
}

.shipment-row.inline.is-stock-error {
  padding: 9px;
  border: 1px solid #d65b50;
  background: #fff4f1;
}

.shipment-row .qty-field input {
  text-align: center;
}

.shipment-product {
  min-height: 34px;
  display: grid;
  align-content: center;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.shipment-product strong {
  color: var(--ink);
  font-size: 13px;
}

.shipment-product span {
  overflow-wrap: anywhere;
}

.shipment-stock-alert {
  color: var(--danger);
  font-size: 13px;
  line-height: 1.45;
}

.ocr-item-card.has-shortage {
  align-items: start;
  border-color: #e5b9b2;
  background: #fffdfc;
}

.shortage-resolution {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.shortage-resolution-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shortage-resolution-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.shortage-resolution-head strong {
  color: var(--danger);
  font-size: 12px;
}

.shortage-resolution-head span {
  color: var(--muted);
  font-size: 10px;
}

.refund-button {
  flex: 0 0 auto;
  border-color: #d98a80;
  color: #a43e33;
}

.refund-button.is-selected {
  border-color: #b54237;
  background: #b54237;
  color: #fff;
}

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

.substitute-option {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.substitute-option:hover,
.substitute-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.substitute-option strong,
.substitute-option span,
.substitute-option small,
.substitute-option em {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.substitute-option strong {
  font-size: 11px;
}

.substitute-option span,
.substitute-option small,
.substitute-option em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.substitute-option small {
  color: var(--accent);
}

.substitute-option-title {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.substitute-option-title strong {
  min-width: 0;
}

.substitute-option-title b {
  flex: 0 0 auto;
  border-radius: 3px;
  padding: 2px 4px;
  background: #e8f4ee;
  color: #176b4d;
  font-size: 9px;
}

.substitute-option em {
  margin-top: 3px;
  color: #9a4b24;
  font-size: 9px;
  font-style: normal;
}

.substitute-empty {
  grid-column: 1 / -1;
  padding: 7px;
  border: 1px dashed var(--line-strong);
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
}

.substitute-picker {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.substitute-picker > label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.substitute-picker select {
  width: 100%;
  height: 36px;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 0 9px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
}

.substitute-preview {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-soft);
}

.substitute-preview > span,
.substitute-preview > small,
.substitute-preview > em {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

.substitute-preview > small {
  color: var(--accent);
}

.substitute-preview > em {
  color: #9a4b24;
}

.substitute-priority-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 3px 0;
}

.substitute-priority-line span {
  min-width: 0;
  padding: 4px 5px;
  border-left: 2px solid #58a287;
  background: #f2f8f5;
  color: #214a3c;
  font-size: 9px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.substitute-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.substitute-preview-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.substitute-preview-head b {
  flex: 0 0 auto;
  border-radius: 3px;
  padding: 2px 4px;
  background: #e8f4ee;
  color: #176b4d;
  font-size: 9px;
}

@media (max-width: 720px) {
  .substitute-priority-line {
    grid-template-columns: 1fr;
  }
}

.resolution-status {
  padding: 5px 7px;
  border-radius: 4px;
  background: var(--amber-soft);
  color: #805b12;
  font-size: 11px;
  font-weight: 700;
}

.resolution-status.refund {
  background: #fff0ee;
  color: #a43e33;
}

.shortage-resolution-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.shortage-resolution-actions [hidden] {
  display: none;
}

.shortage-shipment-editor[hidden] {
  display: none;
}

.shipment-footer input {
  flex: 1 1 auto;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 10px;
  min-width: 0;
}

.shipment-footer > div {
  display: grid;
  gap: 3px;
  min-width: min(190px, 100%);
}

.shipment-footer > div span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.shipment-footer > div span.shipment-blocking-message {
  color: var(--danger);
  font-weight: 700;
}

.shipment-footer #resetShipmentItems {
  flex: 0 0 auto;
}

.scanner-manual-entry {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-soft);
}

.scanner-manual-entry summary {
  padding: 7px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.scanner-manual-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 0 8px 8px;
}

.scanner-manual-body textarea {
  min-height: 58px;
}

.scanner-submit-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 2px;
}

.scanner-submit-bar span {
  color: var(--muted);
  font-size: 11px;
}

.knowledge-preview {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.knowledge-tabs {
  margin-bottom: 12px;
}

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

.knowledge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 250px;
}

.knowledge-tags i {
  border-radius: 3px;
  padding: 2px 5px;
  background: #edf5f1;
  color: #176b4d;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.knowledge-cell-note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.knowledge-safety {
  display: block;
  max-width: 300px;
  color: #805b12;
  font-size: 11px;
  line-height: 1.4;
}

.knowledge-confidence {
  display: inline-block;
  min-width: 42px;
  border-radius: 3px;
  padding: 3px 5px;
  background: #e8f4ee;
  color: #176b4d;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.knowledge-confidence.low {
  background: var(--amber-soft);
  color: #805b12;
}

.knowledge-product-identity {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
}

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

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(12, 20, 17, .52);
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(9, 19, 16, .24);
}

.modal-header,
.modal-footer {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.modal-footer {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
}

.modal-body {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.order-status-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.order-status-summary > div {
  min-width: 0;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-right: 1px solid var(--line);
}

.order-status-summary > div:last-child {
  border-right: 0;
}

.order-status-summary span,
.order-status-items span,
.order-status-impact span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.order-status-summary strong,
.order-status-items span {
  overflow-wrap: anywhere;
}

.order-status-items {
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  background: var(--surface);
  border-left: 3px solid var(--line-strong);
}

.order-status-impact {
  min-height: 62px;
  padding: 11px 12px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.order-status-impact.deduct {
  border-color: #f0b89f;
  background: #fff5ef;
}

.order-status-impact.restore {
  border-color: #a6d8c4;
  background: #effaf5;
}

.order-status-impact.deduct strong {
  color: #a43f13;
}

.order-status-impact.restore strong {
  color: #087457;
}

.order-status-reasons {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.order-status-reasons-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.order-status-reasons-head span {
  color: var(--muted);
  font-size: 12px;
}

.order-status-reason-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.order-status-reason-option {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid #cad8d2;
  border-radius: 4px;
  background: #f8fbf9;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

.order-status-reason-option:hover {
  border-color: var(--accent);
  background: #eff8f4;
}

.order-status-reason-option.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.order-status-reason-custom {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.order-status-reason-custom textarea {
  width: 100%;
  min-height: 64px;
}

.badge.inventory-deducted {
  background: #fff0e8;
  color: #a43f13;
}

.badge.inventory-clear {
  background: #edf8f3;
  color: #087457;
}

.item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 38px;
  gap: 8px;
  align-items: end;
}

@media (max-width: 720px) {
  .order-status-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-status-summary > div:nth-child(2) {
    border-right: 0;
  }

  .order-status-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .order-status-reason-custom {
    grid-template-columns: 1fr;
  }
}

.item-row button {
  height: 38px;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: min(360px, calc(100vw - 44px));
  background: var(--ink);
  color: #fff;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 30;
}

.delivery-reminder-root {
  position: fixed;
  top: auto;
  right: 18px;
  bottom: 74px;
  z-index: 36;
  width: min(390px, calc(100vw - 36px));
  max-height: min(560px, calc(100dvh - 108px));
  overflow: hidden;
  border: 1px solid #e2b94f;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 45, 39, .2);
}

.delivery-reminder-root.is-collapsed {
  width: min(236px, calc(100vw - 36px));
}

.delivery-reminder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid #f0d993;
  background: #fff8df;
}

.delivery-reminder-root.is-collapsed .delivery-reminder-header {
  border-bottom: 0;
}

.delivery-reminder-header > div,
.delivery-reminder-card-head > div,
.delivery-followup-summary,
.delivery-followup-cell {
  display: grid;
  gap: 3px;
}

.delivery-reminder-header span,
.delivery-reminder-card-head span,
.delivery-followup-summary span,
.delivery-reminder-card small,
.delivery-followup-cell span {
  color: var(--muted);
  font-size: 11px;
}

.delivery-reminder-list {
  display: grid;
  gap: 8px;
  max-height: min(480px, calc(100dvh - 172px));
  padding: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.delivery-reminder-card {
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid #ead9a4;
  border-left: 4px solid #d69d16;
  border-radius: 6px;
  background: #fffdf7;
}

.delivery-reminder-card.urgent_5,
.delivery-reminder-card.overdue {
  border-color: #f0b5ad;
  border-left-color: var(--danger);
  background: #fff8f7;
}

.delivery-reminder-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.delivery-reminder-card-head b {
  flex: 0 0 auto;
  color: #9a6b00;
  font-size: 12px;
}

.delivery-reminder-card.urgent_5 .delivery-reminder-card-head b,
.delivery-reminder-card.overdue .delivery-reminder-card-head b {
  color: var(--danger);
}

.delivery-reminder-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.delivery-reminder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.delivery-reminder-actions .delivery-confirm {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.delivery-followup-summary {
  padding: 11px 12px;
  border-left: 3px solid #d69d16;
  background: #fff8df;
}

.delivery-followup-cell {
  min-width: 112px;
}

.delivery-followup-cell .badge {
  width: fit-content;
}

.pickup-delivery-followup {
  padding: 9px 10px;
  border: 1px solid #ead9a4;
  background: #fffdf7;
}

.ocr-meta-grid .ocr-delivery-time {
  align-items: center;
}

.ocr-meta-grid .ocr-editable-meta {
  align-items: center;
}

.ocr-editable-meta input {
  width: 100%;
  min-width: 0;
  height: 28px;
  border: 1px solid #9abaae;
  border-radius: 4px;
  padding: 0 6px;
  background: #f7fbf9;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.ocr-editable-meta input:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(12, 139, 101, .12);
}

.ocr-editable-meta input:disabled {
  border-color: transparent;
  background: transparent;
  opacity: 1;
}

.ocr-delivery-time input {
  min-width: 92px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0 6px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.ocr-delivery-time input:disabled {
  border-color: transparent;
  background: transparent;
  opacity: 1;
}

.pickup-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.pickup-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.pickup-code {
  font-size: 38px;
  line-height: 1;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 6px;
}

.pickup-order-items {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-left: 3px solid var(--accent);
  background: var(--panel-soft);
}

.pickup-order-items span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-box {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: #30413c;
  line-height: 1.7;
}

.module-intro {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  gap: 5px;
}

.module-intro strong {
  font-size: 16px;
}

.module-intro span {
  color: var(--muted);
  line-height: 1.7;
}

.result-stack {
  display: grid;
  gap: 14px;
}

.result-grid,
.blueprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.result-card,
.blueprint-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 13px;
  display: grid;
  gap: 6px;
  min-height: 96px;
}

.result-card.warning {
  border-color: #efd79b;
  background: #fffaf0;
}

.result-card span,
.result-card small,
.blueprint-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.copy-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 13px;
  white-space: pre-wrap;
  line-height: 1.8;
}

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

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .app-shell {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    inset: auto;
    width: auto;
    height: auto;
    overflow-y: visible;
    top: 0;
    z-index: 10;
    padding: 12px;
    gap: 12px;
  }

  .main {
    margin-left: 0;
  }

  .brand,
  .sidebar-footer {
    display: none;
  }

  .nav {
    grid-template-columns: repeat(3, 1fr);
  }

  .nav button {
    text-align: center;
    padding: 0 6px;
  }

  .topbar {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .metric-grid,
  .metric-grid.compact,
  .ops-hero,
  .insight-grid,
  .content-grid,
  .form-grid,
  .scanner-control-grid,
  .ocr-meta-grid,
  .ocr-items-heading,
  .ocr-item-card,
  .ocr-item-top,
  .shipment-row {
    grid-template-columns: 1fr;
  }

  .ocr-meta-grid > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .ocr-meta-grid > div:last-child {
    border-bottom: 0;
  }

  .ocr-item-shipment {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 8px;
  }

  .substitute-options {
    grid-template-columns: 1fr;
  }

  .health-card {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 16px;
  }
}

@media (max-width: 560px) {
  .view-root {
    padding: 14px;
  }

  .topbar {
    padding: 16px 14px;
  }

  .nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .topbar-actions > * {
    flex: 1 1 100%;
  }

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

  .shipment-header,
  .shipment-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .scanner-manual-body {
    grid-template-columns: 1fr;
  }

  .scanner-submit-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .suggestion {
    grid-template-columns: 1fr;
  }

  .suggestion-numbers {
    text-align: left;
  }
}

/* Product import UI */
.import-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 16px 20px;
}

.import-row .inline-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
}

.import-row .inline-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
}

.import-result {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.import-result .badge {
  margin-right: 8px;
}

.hint {
  font-size: 13px;
  color: var(--muted);
  font-weight: normal;
  margin-left: 12px;
}

.ocr-result-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ocr-result-actions .small-button {
  white-space: nowrap;
}

/* 门店商品页 — 选项卡卡片 */
.tab-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 2px;
}
.tab-card {
  flex: 1;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  text-align: left;
  font: inherit;
  color: var(--ink);
}
.tab-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.tab-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(8,127,91,.15);
}
.tab-card strong {
  font-size: 15px;
}
.tab-card span {
  color: var(--muted);
  font-size: 13px;
}

/* 撤回 Toast */
.toast-undo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.undo-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.undo-btn:hover {
  background: #066b4b;
}

/* 门店商品列表内联编辑 */
.editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--line-strong);
  padding: 2px 4px;
  border-radius: 2px;
  transition: background .12s;
  min-width: 40px;
  display: inline-block;
}
.editable:hover {
  background: var(--accent-soft);
}

@media (max-width: 780px) {
  .import-row {
    grid-template-columns: 1fr;
  }
}

/* 实景货架与订单指引 */
.shelf-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.shelf-guide-head h2 {
  margin: 0;
  font-size: 22px;
}

.shelf-guide-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.shelf-active-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #f0c36a;
  border-left: 4px solid #e89b20;
  background: #fff8e8;
}

.shelf-active-order > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.shelf-active-order span,
.shelf-active-order small {
  color: #76551b;
  font-size: 12px;
}

.shelf-active-order strong {
  color: #33250c;
  font-size: 14px;
}

.shelf-active-order-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.shelf-ready-order-queue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-block: 1px solid var(--line);
  background: #f7faf8;
}

.shelf-ready-order-queue.is-empty {
  display: flex;
  color: var(--muted);
}

.shelf-ready-order-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}

.shelf-ready-order-head strong,
.shelf-ready-order-queue.is-empty strong {
  color: var(--ink);
  font-size: 13px;
}

.shelf-ready-order-head span,
.shelf-ready-order-queue.is-empty span {
  color: var(--muted);
  font-size: 11px;
}

.shelf-ready-order-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.shelf-ready-order-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.shelf-ready-order-button strong {
  font-size: 12px;
}

.shelf-ready-order-button span {
  color: var(--muted);
  font-size: 11px;
}

.shelf-ready-order-button:hover,
.shelf-ready-order-button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.shelf-ready-order-button.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.shelf-guide-controls,
.compact-select {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compact-select span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.compact-select select {
  min-width: 210px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  padding: 0 10px;
  color: var(--ink);
}

.segmented-control {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #edf1ef;
}

@media (max-width: 900px) {
  .shelf-ready-order-queue {
    grid-template-columns: 1fr;
  }

  .shelf-ready-order-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .shelf-active-order {
    align-items: flex-start;
    flex-direction: column;
  }

  .shelf-active-order-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.segmented-control button {
  min-height: 32px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 0 14px;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.segmented-control button.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(21, 35, 30, .14);
  font-weight: 700;
}

.segmented-control button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.shelf-order-query {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}

.shelf-order-query textarea {
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel);
  padding: 11px 13px;
  font: inherit;
  line-height: 1.5;
}

.shelf-order-query .primary-button {
  min-width: 132px;
}

.shelf-order-narrative {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px 0 12px;
  padding: 10px 12px;
  border: 1px solid #e6c77d;
  border-radius: 6px;
  background: #fff9e9;
}

.shelf-order-narrative > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.shelf-order-narrative-title {
  color: #765000;
  font-size: 12px;
}

.shelf-order-narrative-items {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 7px;
  color: #5d4a1c;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.shelf-order-narrative-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}

.shelf-order-narrative-item strong {
  color: #5b3f00;
  font-size: 13px;
}

.shelf-order-narrative-item em {
  margin-left: 8px;
  color: #8a651d;
  font-size: 12px;
  font-style: normal;
}

.shelf-order-narrative-separator {
  color: #9a7b35;
  font-style: normal;
}

.shelf-order-narrative .small-button {
  flex: 0 0 auto;
}

.shelf-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.shelf-overview-empty {
  grid-column: 1 / -1;
  min-height: 112px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px dashed var(--line-strong);
  border-radius: 7px;
  background: var(--panel);
  color: var(--muted);
  padding: 18px;
  text-align: center;
}

.shelf-overview-empty strong {
  color: var(--ink);
}

.shelf-thumb {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  padding: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.shelf-thumb:hover,
.shelf-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(8, 127, 91, .12);
}

.shelf-thumb.has-order {
  border-color: #e58a18;
  box-shadow: 0 0 0 2px rgba(229, 138, 24, .18);
}

.shelf-thumb-photo {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #e9eeeb;
  overflow: hidden;
}

.shelf-thumb-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #dfe6e2;
}

.shelf-thumb-order-items {
  position: absolute;
  right: 5px;
  bottom: 5px;
  left: 5px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 229, 177, .8);
  border-radius: 5px;
  background: rgba(63, 39, 0, .88);
  padding: 5px 6px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(42, 26, 0, .28);
}

.shelf-thumb-order-items > span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
}

.shelf-thumb-order-items strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.shelf-thumb-order-items em,
.shelf-thumb-order-items small {
  color: #ffe7b7;
  font-size: 9px;
  font-style: normal;
}

.shelf-thumb-empty {
  color: #82908a;
  font-size: 11px;
}

.shelf-order-count {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #f2a12c;
  color: #241300;
  display: grid;
  place-items: center;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(63, 38, 0, .25);
}

.shelf-thumb-meta {
  display: grid;
  gap: 2px;
  padding: 8px;
}

.shelf-thumb-meta strong {
  font-size: 13px;
}

.shelf-thumb-meta small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.shelf-group-total {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.shelf-workspace {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  min-height: 760px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.shelf-workspace.is-guide-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  min-height: 0;
  overflow: visible;
}

.shelf-workspace.is-guide-mode .shelf-photo-viewport {
  width: min(96%, 720px);
  max-width: 100%;
  height: auto;
}

.shelf-workspace.is-guide-mode .shelf-side-panel {
  align-self: stretch;
}

.shelf-workspace.is-guide-mode .shelf-guide-items {
  max-height: none;
  min-height: 0;
  overflow: visible;
}

.shelf-workspace.is-guide-mode .shelf-guide-layers.is-photo-aligned {
  position: relative;
  width: calc(100% - 28px);
  margin-right: 14px;
  margin-left: 14px;
  background: transparent;
}

.shelf-workspace.is-guide-mode .shelf-guide-layers.is-photo-aligned .shelf-guide-layer {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0;
  transform: translateY(-50%);
  border: 1px solid #cbd8d2;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(21, 35, 30, .08);
}

.shelf-workspace.is-guide-mode .shelf-guide-layer-head {
  position: static;
}

.shelf-visual-column {
  min-width: 0;
  background: #eef2f0;
}

.shelf-stage-toolbar,
.shelf-side-title {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 10px 14px;
}

.shelf-stage-toolbar > div:first-child,
.shelf-side-title > div {
  display: grid;
  gap: 2px;
}

.shelf-stage-toolbar span,
.shelf-side-title span {
  color: var(--muted);
  font-size: 12px;
}

.shelf-photo-scroll {
  min-height: 0;
  overflow: visible;
  padding: 14px;
}

.shelf-photo-content {
  width: 100%;
  margin: 0 auto;
}

.shelf-photo-view-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 auto 8px;
}

.shelf-zoom-control {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 5px;
  box-shadow: 0 2px 8px rgba(21, 35, 30, .08);
}

.shelf-zoom-control button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  padding: 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
}

.shelf-zoom-control button:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.shelf-zoom-control button:disabled {
  opacity: .35;
  cursor: default;
}

.shelf-zoom-control input[type="range"] {
  width: 124px;
  accent-color: var(--accent);
}

.shelf-zoom-control output {
  width: 42px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.shelf-zoom-control .shelf-fit-button {
  width: auto;
  padding: 0 9px;
  font-size: 12px;
}

.shelf-detected-rail {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin-bottom: 10px;
  border: 1px solid rgba(14, 121, 91, .34);
  border-radius: 6px;
  background: rgba(250, 253, 252, .96);
  padding: 8px 10px;
  box-shadow: 0 5px 18px rgba(20, 44, 35, .16);
  backdrop-filter: blur(8px);
}

.shelf-detected-rail.is-empty {
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: #d4a344;
  background: rgba(255, 250, 236, .97);
}

.shelf-detected-summary {
  display: grid;
  gap: 2px;
  min-width: 160px;
}

.shelf-detected-summary strong {
  font-size: 13px;
}

.shelf-detected-summary span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.shelf-detected-list {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 0 3px;
  scrollbar-width: thin;
}

.shelf-detected-list button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid #b9cbc4;
  border-radius: 5px;
  background: #fff;
  padding: 5px 7px;
  color: #17372c;
  cursor: pointer;
}

.shelf-detected-list button:hover,
.shelf-detected-list button:focus-visible {
  border-color: #08795b;
  background: #eaf7f2;
  outline: none;
}

.shelf-detected-list button.is-order {
  border-color: #e39a19;
  background: #fff2ce;
  color: #744800;
}

.shelf-detected-list strong {
  font-size: 13px;
}

.shelf-detected-list span {
  color: var(--muted);
  font-size: 10px;
}

.shelf-order-strip {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 12px 14px 14px;
}

.shelf-order-strip-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.shelf-order-strip-title span {
  color: var(--muted);
  font-size: 12px;
}

.shelf-order-strip-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.shelf-order-strip-items button {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 9px;
  align-items: center;
  border: 1px solid #e4a13b;
  border-radius: 6px;
  background: #fff8e8;
  padding: 9px 10px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.shelf-order-strip-items button:hover {
  background: #fff1cf;
}

.shelf-order-strip-items strong {
  grid-row: 1 / 3;
  min-width: 52px;
  color: #815000;
  font-size: 14px;
}

.shelf-order-strip-items span,
.shelf-order-strip-items em {
  min-width: 0;
  font-size: 12px;
  font-style: normal;
}

.shelf-order-strip-items em {
  color: var(--muted);
}

.shelf-photo-viewport {
  position: relative;
  width: 50%;
  min-width: 0;
  margin: 0 auto;
  background: #cfd7d3;
  box-shadow: 0 8px 24px rgba(21, 35, 30, .16);
  overflow: hidden;
  touch-action: pan-y;
}

.shelf-photo-viewport.is-zoomed {
  cursor: grab;
  touch-action: none;
}

.shelf-photo-viewport.is-panning {
  cursor: grabbing;
}

.shelf-photo-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(var(--shelf-pan-x, 0), var(--shelf-pan-y, 0), 0) scale(var(--shelf-zoom, 1));
  transform-origin: center;
  transition: transform 120ms ease-out;
}

.shelf-photo-viewport.is-panning .shelf-photo-stage {
  transition: none;
}

.shelf-photo-stage > img,
.shelf-annotation-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shelf-photo-stage > img {
  object-fit: contain;
  background: #d8dedb;
  user-select: none;
  pointer-events: none;
}

.shelf-annotation-layer {
  z-index: 2;
}

.shelf-position {
  position: absolute;
  min-width: 22px;
  min-height: 11px;
  overflow: visible;
  border: 1px solid #15e0ae;
  border-radius: 3px;
  background: rgba(21, 224, 174, .12);
  padding: 0;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .86);
}

.shelf-position.is-editable {
  touch-action: none;
}

.shelf-position-caption {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  z-index: 2;
  min-width: 42px;
  width: max-content;
  max-width: 76px;
  display: grid;
  justify-items: center;
  gap: 1px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 3px;
  background: rgba(8, 43, 33, .92);
  padding: 2px 4px;
  color: #fff;
  box-shadow: 0 1px 5px rgba(7, 35, 27, .45);
  pointer-events: none;
}

.shelf-position-caption strong {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.1;
}

.shelf-position-caption em {
  color: #bdf9e8;
  font-size: 7px;
  font-style: normal;
  line-height: 1.1;
  white-space: nowrap;
}

.shelf-position.is-low {
  border-color: #b94b3e;
  background: rgba(185, 75, 62, .13);
}

.shelf-position.is-low .shelf-position-caption {
  background: rgba(95, 28, 22, .92);
}

.shelf-position.is-order {
  z-index: 4;
  border-color: #ffb423;
  background: rgba(255, 214, 86, .25);
  box-shadow: 0 0 0 3px rgba(255, 180, 35, .28), 0 0 22px rgba(255, 180, 35, .7);
  animation: shelf-order-pulse 1.45s ease-in-out infinite;
}

.shelf-position.is-order .shelf-position-caption {
  border-color: #fff1bd;
  background: rgba(163, 101, 0, .94);
  color: #fff;
}

.shelf-position.is-order .shelf-position-caption {
  min-width: 88px;
  max-width: 150px;
}

.shelf-position.is-order .shelf-position-caption strong {
  max-width: 140px;
  font-size: 10px;
}

.shelf-position.is-order .shelf-position-caption em {
  color: #fff1bd;
  font-size: 8px;
}

.shelf-position.is-editable {
  cursor: move;
}

.shelf-position.is-selected {
  z-index: 5;
  border-color: #1677d2;
  box-shadow: 0 0 0 3px rgba(22, 119, 210, .26);
}

.shelf-position.is-selected .shelf-position-caption {
  background: rgba(13, 79, 139, .94);
}

.shelf-resize-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1677d2;
  cursor: nwse-resize;
}

@keyframes shelf-order-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 180, 35, .22), 0 0 12px rgba(255, 180, 35, .45); }
  50% { box-shadow: 0 0 0 5px rgba(255, 180, 35, .3), 0 0 28px rgba(255, 180, 35, .85); }
}

.shelf-empty-stage {
  min-height: 560px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 28px;
  text-align: center;
}

.shelf-empty-stage strong {
  color: var(--ink);
  font-size: 18px;
}

.shelf-empty-stage.is-uploadable {
  outline: 2px dashed #98aaa2;
  outline-offset: -22px;
}

.shelf-empty-stage.is-dragging {
  background: var(--accent-soft);
  outline-color: var(--accent);
}

.shelf-side-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: var(--panel);
}

.shelf-guide-items {
  max-height: calc(100vh - 520px);
  min-height: 280px;
  overflow-y: auto;
}

.shelf-guide-layers {
  background: #edf2ef;
}

.shelf-guide-layer {
  background: #fff;
}

.shelf-guide-layer + .shelf-guide-layer {
  margin-top: 6px;
}

.shelf-guide-layer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f1f6f3;
  padding: 6px 9px;
}

.shelf-guide-layer:first-child .shelf-guide-layer-head {
  border-top: 0;
}

.shelf-guide-layer-head strong {
  color: var(--ink);
  font-size: 12px;
}

.shelf-guide-layer-head span {
  color: var(--muted);
  font-size: 10px;
}

.shelf-guide-layer-items {
  display: flex;
  align-items: stretch;
  align-content: flex-start;
  gap: 2px;
  flex-wrap: nowrap;
  padding: 5px;
}

.shelf-guide-item {
  position: relative;
  width: 0;
  min-width: 0;
  min-height: 36px;
  flex: 1 1 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 1px 2px;
  align-items: center;
  border: 1px solid #b9c9c2;
  border-radius: 3px;
  background: #fff;
  padding: 3px 2px;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.shelf-guide-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.shelf-guide-item.warning {
  border-color: #c76b5e;
  background: #fff5f2;
}

.shelf-guide-item.is-order {
  border-color: #e89a19;
  background: #fff8e7;
  box-shadow: inset 0 -2px #e89a19;
}

.shelf-guide-item.is-order:hover {
  background: #fff0c8;
}

.shelf-guide-item > strong {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-guide-item > span,
.shelf-guide-item > small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-guide-item.is-order > span {
  color: #965c00;
  font-weight: 800;
}

.shelf-script {
  margin: auto 12px 12px;
  border-left: 3px solid #e59627;
  background: #fff8e8;
  padding: 10px 12px;
  color: #55411f;
  font-size: 12px;
  line-height: 1.6;
}

.shelf-product-search {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.shelf-section-label,
.shelf-form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.shelf-section-label strong,
.shelf-form-heading strong {
  color: var(--ink);
  font-size: 13px;
}

.shelf-section-label span,
.shelf-form-heading span {
  color: var(--muted);
  font-size: 11px;
}

.shelf-product-search > input,
.shelf-add-grid input,
.shelf-position-form select,
.shelf-position-form input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  padding: 0 10px;
  color: var(--ink);
  font: inherit;
}

.shelf-add-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.shelf-add-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.shelf-product-matches {
  max-height: 246px;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.shelf-product-matches > button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 9px 10px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.shelf-product-matches > button:last-child {
  border-bottom: 0;
}

.shelf-product-matches > button:hover {
  background: var(--accent-soft);
}

.shelf-product-matches span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.shelf-product-matches small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-product-matches em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.shelf-position-form {
  display: grid;
  gap: 12px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
}

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

.shelf-position-form .form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shelf-selected-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-left: 3px solid var(--accent);
  background: #f3f8f6;
  padding: 8px 10px;
}

.shelf-selected-product span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.shelf-selected-product small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-selected-product em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.shelf-position-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.shelf-position-list-section {
  min-height: 0;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.shelf-position-list {
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.shelf-layer-sequence {
  max-height: 360px;
}

.shelf-sequence-layer + .shelf-sequence-layer {
  border-top: 5px solid #edf2ef;
}

.shelf-sequence-layer-head {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f2f6f4;
  padding: 6px 8px;
}

.shelf-sequence-layer-head > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.shelf-sequence-layer-head small {
  color: var(--muted);
  font-size: 10px;
}

.shelf-sequence-layer-head button,
.shelf-sequence-actions button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.shelf-sequence-layer-head button:hover,
.shelf-sequence-actions button:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.shelf-sequence-actions button:disabled {
  opacity: .3;
  cursor: default;
}

.shelf-sequence-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-top: 1px solid var(--line);
}

.shelf-sequence-item.active {
  box-shadow: inset 3px 0 var(--accent);
  background: var(--accent-soft);
}

.shelf-sequence-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 8px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.shelf-sequence-main > em {
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.shelf-sequence-main > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.shelf-sequence-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-sequence-actions {
  display: flex;
  gap: 3px;
  padding-right: 6px;
}

.shelf-position-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 8px 9px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.shelf-position-list > button:last-child {
  border-bottom: 0;
}

.shelf-position-list > button:hover,
.shelf-position-list > button.active {
  background: var(--accent-soft);
}

.shelf-position-list > button.active {
  box-shadow: inset 3px 0 var(--accent);
}

.shelf-position-list > button span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.shelf-position-list > button small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-position-list > button em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.shelf-direct-layout {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 12px;
}

.shelf-direct-layer {
  border-bottom: 1px solid var(--line);
  padding: 10px 0 12px;
}

.shelf-direct-layer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.shelf-direct-layer-head > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.shelf-direct-layer-head strong {
  font-size: 13px;
}

.shelf-direct-layer-head small {
  color: var(--muted);
  font-size: 10px;
}

.shelf-direct-layer-head > button,
.shelf-insert-slot {
  display: grid;
  place-items: center;
  border: 1px dashed #9db1a8;
  border-radius: 4px;
  background: #fff;
  color: #577168;
  padding: 0;
  cursor: pointer;
  font-weight: 800;
}

.shelf-direct-layer-head > button {
  width: 27px;
  height: 27px;
}

.shelf-direct-layer-head > button:hover,
.shelf-insert-slot:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.shelf-direct-products {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.shelf-insert-slot {
  width: 20px;
  height: 31px;
  flex: 0 0 20px;
  opacity: .72;
  font-size: 12px;
}

.shelf-sku-chip {
  min-width: 54px;
  height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  border: 1px solid #b9c9c2;
  border-radius: 5px;
  background: #fff;
  padding: 0 7px;
  color: var(--ink);
  cursor: pointer;
}

.shelf-sku-chip:hover,
.shelf-sku-chip:focus-visible,
.shelf-sku-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.shelf-sku-chip.active {
  box-shadow: inset 0 -2px var(--accent);
}

.shelf-sku-chip.is-unmatched {
  border-color: #d08b2d;
  background: #fff8e8;
  color: #7a4700;
}

.shelf-sku-chip.is-unmatched:hover,
.shelf-sku-chip.is-unmatched:focus-visible,
.shelf-sku-chip.is-unmatched.active {
  border-color: #b86d08;
  background: #ffefc7;
}

.shelf-sku-chip.is-unmatched small {
  color: #a15c00;
  font-weight: 700;
}

.shelf-sku-chip strong {
  font-size: 12px;
  white-space: nowrap;
}

.shelf-sku-chip small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
}

.shelf-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, auto);
  gap: 6px;
  align-items: end;
  margin-top: 9px;
  border-left: 3px solid var(--accent);
  background: #f3f8f6;
  padding: 8px;
}

.shelf-inline-form label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shelf-inline-form label span {
  color: var(--muted);
  font-size: 10px;
}

.shelf-inline-form input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  padding: 0 8px;
  color: var(--ink);
  font: inherit;
}

.shelf-inline-edit {
  grid-template-columns: minmax(0, 1fr) repeat(5, auto);
}

.shelf-inline-edit > button[data-move-shelf-position] {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.shelf-inline-edit > button[data-move-shelf-position]:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.shelf-add-layer {
  width: 100%;
  min-height: 36px;
  margin-top: 10px;
  border: 1px dashed #9db1a8;
  border-radius: 5px;
  background: #f8faf9;
  color: #47645a;
  cursor: pointer;
}

.shelf-add-layer:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.shelf-product-hover-card {
  position: fixed;
  z-index: 1200;
  min-width: 180px;
  max-width: 300px;
  border: 1px solid rgba(18, 45, 36, .24);
  border-radius: 5px;
  background: #18372d;
  padding: 7px 9px;
  color: #fff;
  box-shadow: 0 7px 20px rgba(18, 37, 31, .24);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

.shelf-side-empty {
  padding: 28px 18px;
  color: var(--muted);
  text-align: center;
}

.shelf-side-empty.compact {
  padding: 18px 12px;
  font-size: 12px;
}

.shelf-layout-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 12px;
}

.shelf-layout-footer span {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1280px) {
  .shelf-workspace {
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
  }

  .shelf-workspace.is-guide-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .shelf-guide-head,
  .shelf-guide-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .compact-select,
  .compact-select select {
    width: 100%;
  }

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

  .shelf-workspace.is-guide-mode {
    grid-template-columns: 1fr;
  }

  .shelf-workspace.is-guide-mode .shelf-photo-viewport {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .shelf-side-panel {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .shelf-photo-scroll,
  .shelf-empty-stage {
    min-height: 480px;
    height: auto;
  }

  .shelf-photo-viewport {
    width: 100%;
  }

  .shelf-guide-items {
    max-height: 420px;
  }

  .shelf-overview {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  }
}

@media (max-width: 620px) {
  .shelf-order-query {
    grid-template-columns: 1fr;
  }

  .shelf-order-narrative {
    align-items: stretch;
    flex-direction: column;
  }

  .segmented-control,
  .segmented-control button {
    width: 100%;
  }

  .shelf-stage-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .shelf-photo-scroll {
    padding: 8px;
  }

  .shelf-photo-view-tools,
  .shelf-zoom-control {
    width: 100%;
  }

  .shelf-inline-form,
  .shelf-inline-edit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shelf-inline-form label {
    grid-column: 1 / -1;
  }

  .shelf-zoom-control input[type="range"] {
    min-width: 0;
    flex: 1;
  }

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

  .shelf-order-strip-items {
    grid-template-columns: 1fr;
  }
}

/* Headquarters live operations dashboard */
.dashboard-command-strip {
  min-height: 96px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto 170px;
  gap: 18px;
  align-items: center;
  color: #f7fbf9;
  background: #142a24;
  border: 1px solid #203b33;
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(16, 35, 30, .14);
}

.dashboard-command-copy {
  min-width: 0;
}

.dashboard-live-line,
.dashboard-command-actions,
.dashboard-chart-legend {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-live-line {
  color: #b9cbc5;
  font-size: 11px;
}

.dashboard-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  color: #dff8ed;
  background: rgba(45, 178, 126, .12);
  border: 1px solid rgba(84, 206, 157, .3);
  border-radius: 4px;
  font-weight: 800;
}

.dashboard-live-badge i {
  width: 7px;
  height: 7px;
  background: #51d79f;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(81, 215, 159, .55);
  animation: dashboard-live-pulse 1.8s infinite;
}

.dashboard-command-copy h2 {
  margin: 7px 0 3px;
  color: #fff;
  font-size: 20px;
  letter-spacing: 0;
}

.dashboard-command-copy p {
  margin: 0;
  color: #aebfb9;
  font-size: 12px;
}

.dashboard-command-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dashboard-command-actions .small-button {
  color: #eaf4f0;
  background: transparent;
  border-color: #496159;
}

.dashboard-command-actions .small-button:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #729087;
}

.dashboard-command-actions .small-button.primary {
  color: #fff;
  background: #0b8a62;
  border-color: #0b8a62;
}

.dashboard-sync-state {
  min-height: 62px;
  padding-left: 16px;
  display: grid;
  align-content: center;
  gap: 2px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}

.dashboard-sync-state span,
.dashboard-sync-state small {
  color: #9fb3ac;
  font-size: 10px;
}

.dashboard-sync-state strong {
  font-size: 12px;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-kpi {
  position: relative;
  min-width: 0;
  min-height: 103px;
  padding: 11px 12px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 5px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid #8da99d;
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(20, 42, 34, .045);
  overflow: hidden;
}

button.dashboard-kpi {
  cursor: pointer;
}

button.dashboard-kpi:hover {
  border-color: #a9bcb3;
  background: #fbfdfc;
  transform: translateY(-1px);
}

.dashboard-kpi.revenue {
  border-top-color: #2d5f98;
}

.dashboard-kpi.warning {
  border-top-color: #d18b22;
}

.dashboard-kpi.danger {
  border-top-color: var(--danger);
}

.dashboard-kpi > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.dashboard-kpi > strong {
  min-width: 0;
  align-self: center;
  overflow: hidden;
  color: #111a17;
  font-size: 25px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-kpi > div {
  display: grid;
  gap: 3px;
}

.dashboard-kpi small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-kpi-delta {
  width: fit-content;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.dashboard-kpi-delta.up {
  color: #087a57;
}

.dashboard-kpi-delta.down {
  color: var(--danger);
}

.dashboard-primary-grid,
.dashboard-operations-grid,
.dashboard-secondary-grid {
  display: grid;
  gap: 10px;
  align-items: stretch;
}

.dashboard-primary-grid {
  grid-template-columns: minmax(0, 1.75fr) minmax(350px, .95fr);
}

.dashboard-operations-grid {
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, .75fr);
}

.dashboard-secondary-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(270px, .75fr) minmax(0, 1.15fr);
}

.dashboard-panel-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.dashboard-chart-legend {
  color: var(--muted);
  font-size: 10px;
}

.dashboard-chart-legend span::before {
  width: 9px;
  height: 9px;
  margin-right: 5px;
  display: inline-block;
  border-radius: 2px;
  content: '';
}

.dashboard-chart-legend .revenue::before {
  background: #78b69e;
}

.dashboard-chart-legend .orders::before {
  background: #2d5f98;
  border-radius: 50%;
}

.dashboard-trend-body {
  min-height: 252px;
  padding: 4px 10px 6px;
}

.dashboard-trend-chart {
  width: 100%;
  height: 245px;
  display: block;
  overflow: visible;
}

.dashboard-trend-chart text {
  fill: #72817b;
  font-size: 9px;
}

.dashboard-chart-grid {
  stroke: #e4eae7;
  stroke-width: 1;
}

.dashboard-chart-bar {
  fill: #79b89f;
  opacity: .86;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: dashboard-bar-rise .65s ease-out both;
}

.dashboard-chart-bar:hover {
  fill: #14835f;
  opacity: 1;
}

.dashboard-order-line {
  fill: none;
  stroke: #2d5f98;
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: dashboard-line-draw 1.1s .15s ease-out forwards;
}

.dashboard-chart-point {
  fill: #fff;
  stroke: #2d5f98;
  stroke-width: 2;
}

.dashboard-fulfillment-body {
  min-height: 252px;
  padding: 10px 12px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.dashboard-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.dashboard-pipeline-stage {
  min-width: 0;
  padding: 7px 5px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 5px;
  color: var(--ink);
  text-align: left;
  background: #f7f9f8;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.dashboard-pipeline-stage:hover {
  background: #eef6f2;
}

.dashboard-pipeline-stage > span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #748a81;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
}

.dashboard-pipeline-stage div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dashboard-pipeline-stage em {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-pipeline-stage strong {
  font-size: 18px;
}

.dashboard-pipeline-stage i {
  height: 3px;
  background: #7ea797;
  border-radius: 2px;
}

.dashboard-pipeline-stage.ready > span,
.dashboard-pipeline-stage.ready i {
  background: #d18b22;
}

.dashboard-pipeline-stage.delivering > span,
.dashboard-pipeline-stage.delivering i {
  background: #2d5f98;
}

.dashboard-pipeline-stage.completed > span,
.dashboard-pipeline-stage.completed i {
  background: #087a57;
}

.dashboard-fulfillment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.dashboard-fulfillment-summary span {
  padding: 6px 8px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  background: #fff;
  border-right: 1px solid var(--line);
}

.dashboard-fulfillment-summary span:last-child {
  border-right: 0;
}

.dashboard-fulfillment-summary strong {
  color: var(--ink);
  font-size: 13px;
}

.dashboard-live-queue {
  display: grid;
}

.dashboard-live-queue > button {
  min-height: 37px;
  padding: 5px 2px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 54px;
  gap: 7px;
  align-items: center;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.dashboard-live-queue > button:hover {
  background: #f5f9f7;
}

.dashboard-live-queue > button > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dashboard-live-queue strong,
.dashboard-live-queue em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-live-queue em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.dashboard-live-queue b {
  color: var(--danger);
  font-size: 10px;
  text-align: right;
}

.dashboard-queue-empty {
  padding: 14px;
  color: var(--muted);
  text-align: center;
  background: var(--panel-soft);
  border: 1px dashed var(--line-strong);
}

.dashboard-store-matrix .table-wrap {
  max-height: 332px;
}

.dashboard-store-matrix table {
  min-width: 860px;
}

.dashboard-store-matrix th,
.dashboard-store-matrix td {
  height: 42px;
  padding: 6px 8px;
}

.dashboard-rank-index {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: #6f817a;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}

.dashboard-store-matrix tbody tr:first-child .dashboard-rank-index {
  background: #0b8560;
}

.dashboard-health-cell {
  min-width: 95px;
  display: grid;
  grid-template-columns: 30px minmax(45px, 1fr);
  gap: 6px;
  align-items: center;
}

.dashboard-health-cell .progress {
  height: 5px;
}

.dashboard-danger-text {
  color: var(--danger);
}

.dashboard-risk-list {
  display: grid;
}

.dashboard-risk-row {
  min-height: 49px;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.dashboard-risk-row:last-child {
  border-bottom: 0;
}

.dashboard-risk-row:hover {
  background: #f5f9f7;
}

.dashboard-risk-row > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: 1px 8px;
  align-items: center;
}

.dashboard-risk-row i {
  grid-row: 1 / 3;
  width: 7px;
  height: 24px;
  background: #567a9d;
  border-radius: 2px;
}

.dashboard-risk-row.warning i {
  background: #d18b22;
}

.dashboard-risk-row.danger i {
  background: var(--danger);
}

.dashboard-risk-row strong {
  font-size: 12px;
}

.dashboard-risk-row em {
  grid-column: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-risk-row > b {
  font-size: 20px;
}

.dashboard-hot-list {
  display: grid;
}

.dashboard-hot-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.dashboard-hot-row:last-child {
  border-bottom: 0;
}

.dashboard-hot-row > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.dashboard-hot-row > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-hot-row strong,
.dashboard-hot-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-hot-row em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.dashboard-hot-row i {
  width: 0;
  max-width: 100%;
  height: 4px;
  background: #4d9a7c;
  border-radius: 2px;
  animation: dashboard-hot-grow .8s .1s ease-out forwards;
}

.dashboard-hot-row > b {
  font-size: 12px;
  text-align: right;
}

.dashboard-platform-mix {
  min-height: 225px;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.dashboard-donut {
  width: 116px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  animation: dashboard-donut-in .7s ease-out both;
}

.dashboard-donut > span {
  width: 70px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
}

.dashboard-donut strong,
.dashboard-donut em {
  display: block;
}

.dashboard-donut strong {
  font-size: 22px;
}

.dashboard-donut em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.dashboard-platform-legend {
  display: grid;
}

.dashboard-platform-legend > div {
  min-height: 34px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 30px 34px;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.dashboard-platform-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.dashboard-platform-legend span,
.dashboard-platform-legend em {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-platform-legend em {
  color: var(--muted);
  font-style: normal;
  text-align: right;
}

.dashboard-movement-panel .panel-body {
  max-height: 292px;
  overflow: auto;
}

.dashboard-movement-panel .movement-item {
  padding: 7px 0;
}

@keyframes dashboard-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(81, 215, 159, .52); }
  70% { box-shadow: 0 0 0 7px rgba(81, 215, 159, 0); }
  100% { box-shadow: 0 0 0 0 rgba(81, 215, 159, 0); }
}

@keyframes dashboard-bar-rise {
  from { transform: scaleY(0); opacity: .2; }
  to { transform: scaleY(1); opacity: .86; }
}

@keyframes dashboard-line-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes dashboard-hot-grow {
  from { width: 0; }
}

@keyframes dashboard-donut-in {
  from { transform: rotate(-40deg) scale(.85); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}

@media (max-width: 1360px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-movement-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1080px) {
  .dashboard-command-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-sync-state {
    display: none;
  }

  .dashboard-primary-grid,
  .dashboard-operations-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .dashboard-command-strip {
    grid-template-columns: 1fr;
  }

  .dashboard-command-actions {
    justify-content: flex-start;
  }

  .dashboard-kpi-grid,
  .dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-movement-panel {
    grid-column: auto;
  }

  .dashboard-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-platform-mix {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .dashboard-platform-legend {
    width: 100%;
  }
}

.restock-mode-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.restock-mode-switch > span {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
}

.restock-mode-button {
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
}

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

.manual-restock-builder {
  margin-bottom: 12px;
}

.manual-restock-header {
  align-items: center;
}

.manual-restock-store-field {
  display: grid;
  gap: 3px;
  min-width: 240px;
}

.manual-restock-store-field > span,
.manual-restock-code-add label > span,
.manual-restock-formbar label > span {
  color: var(--muted);
  font-size: 11px;
}

.manual-restock-entry {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) auto;
  align-items: end;
  gap: 10px 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.manual-restock-code-add {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 120px auto;
  align-items: end;
  gap: 10px;
}

.manual-restock-code-add label {
  display: grid;
  gap: 4px;
}

.manual-restock-code-add input {
  width: 100%;
}

.manual-restock-import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.manual-restock-entry > span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.manual-restock-formbar {
  display: grid;
  grid-template-columns: 190px minmax(260px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.manual-restock-formbar label {
  display: grid;
  gap: 4px;
}

.manual-restock-formbar input {
  width: 100%;
}

.manual-restock-formbar > strong {
  padding-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  white-space: nowrap;
}

.manual-restock-table .table-wrap {
  max-height: 440px;
  overflow: auto;
}

.manual-restock-table table {
  min-width: 1040px;
}

.manual-restock-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-soft);
}

.manual-restock-table th,
.manual-restock-table td {
  padding: 8px 9px;
  vertical-align: middle;
}

.manual-restock-table th:first-child,
.manual-restock-table td:first-child {
  width: 230px;
  text-align: left;
}

.manual-restock-table th:nth-child(2),
.manual-restock-table td:nth-child(2) {
  width: 140px;
}

.manual-restock-quantity {
  width: 90px;
  min-height: 32px;
  padding: 0 7px;
}

.manual-restock-import-modal {
  display: grid;
  gap: 14px;
}

.manual-restock-import-guide {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: 8px;
  background: var(--accent-soft);
}

.manual-restock-import-guide > span,
.manual-restock-import-file > span {
  color: var(--muted);
  font-size: 12px;
}

.manual-restock-import-paste {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.manual-restock-import-paste textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.6;
}

.manual-restock-import-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.manual-restock-import-divider::before,
.manual-restock-import-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.manual-restock-import-file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.manual-restock-import-result {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 12px;
}

.manual-restock-import-result.is-error {
  background: var(--danger-soft);
  color: var(--danger);
}

.manual-restock-records {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.manual-restock-record {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.manual-restock-record > summary {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(320px, 1.4fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #f7faf8;
  cursor: pointer;
  list-style: none;
}

.manual-restock-record > summary::-webkit-details-marker {
  display: none;
}

.manual-restock-record[open] > summary {
  border-bottom: 1px solid var(--line);
}

.manual-restock-record-title {
  display: grid;
  gap: 2px;
}

.manual-restock-record-title > span,
.manual-restock-record-title > small {
  color: var(--muted);
  font-size: 11px;
}

.manual-restock-record-title > strong {
  color: var(--accent);
  font-size: 15px;
}

.manual-restock-record-stats,
.manual-restock-record-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}

.manual-restock-record-stats > span,
.manual-restock-record-status > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.manual-restock-record-stats b {
  color: var(--text);
  font-size: 13px;
}

.manual-restock-record-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.manual-restock-record-open {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.manual-restock-record-open::after {
  content: ' ▾';
}

.manual-restock-record[open] .manual-restock-record-open::after {
  content: ' ▴';
}

.manual-restock-record-body .table-wrap {
  max-height: 360px;
  overflow: auto;
}

.manual-restock-record-body table {
  min-width: 1180px;
}

.replenishment-unified-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}

.replenishment-unified-handoff > div {
  display: grid;
  gap: 5px;
}

.replenishment-unified-handoff span {
  color: var(--muted);
  font-size: 13px;
}

.unified-order-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 190px) minmax(150px, 190px) auto;
  align-items: end;
  gap: 14px;
  padding: 16px 18px;
}

.unified-order-toolbar > div,
.unified-order-toolbar label {
  display: grid;
  gap: 5px;
}

.unified-order-toolbar > div > span,
.unified-order-toolbar label > span {
  color: var(--muted);
  font-size: 12px;
}

.unified-order-list {
  display: grid;
  gap: 14px;
}

.unified-order-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgb(15 23 42 / 5%);
}

.unified-order-header {
  display: grid;
  grid-template-columns: minmax(360px, 1.3fr) minmax(280px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.unified-order-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
}

.unified-order-identity > div,
.unified-supplier-name,
.unified-supplier-po,
.unified-supplier-logistics,
.unified-supplier-status {
  display: grid;
  gap: 3px;
}

.unified-order-identity > div > span,
.unified-supplier-main span {
  color: var(--muted);
  font-size: 11px;
}

.unified-order-identity > div > strong {
  font-size: 14px;
}

.replenishment-source-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #047857;
  font-size: 12px;
  font-weight: 800;
}

.replenishment-source-tag.is-smart {
  background: #eef2ff;
  color: #4338ca;
}

.unified-order-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 14px;
}

.unified-order-summary span {
  color: var(--muted);
  font-size: 12px;
}

.unified-order-summary b {
  color: var(--text);
}

.unified-order-summary small {
  width: 100%;
  color: var(--muted);
}

.unified-order-header-actions,
.unified-supplier-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.unified-order-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  padding: 14px 18px 12px;
  background: var(--panel-soft);
}

.unified-order-progress-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.unified-order-progress-step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -20%;
  width: 40%;
  height: 2px;
  background: var(--line);
}

.unified-order-progress-step:last-child::after {
  display: none;
}

.unified-order-progress-step > span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}

.unified-order-progress-step.is-done,
.unified-order-progress-step.is-current {
  color: var(--accent);
}

.unified-order-progress-step.is-done > span,
.unified-order-progress-step.is-current > span {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.unified-order-progress-step.is-done::after {
  background: var(--accent);
}

.unified-order-progress-note,
.unified-order-cancelled {
  padding: 0 18px 12px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.unified-order-cancelled {
  padding-top: 12px;
  color: var(--danger);
  font-weight: 700;
}

.unified-supplier-list {
  display: grid;
  gap: 0;
}

.unified-supplier-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}

.unified-supplier-order:first-child {
  border-top: 0;
}

.unified-supplier-order.is-cancelled {
  opacity: .62;
  background: #fafafa;
}

.unified-supplier-main {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(220px, 1.4fr) minmax(130px, .8fr);
  align-items: center;
  gap: 18px;
}

.unified-supplier-main strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.unified-supplier-main small {
  color: var(--muted);
  font-size: 11px;
}

.unified-supplier-logistics.has-tracking > strong {
  color: var(--accent);
}

.replenishment-logistics-form textarea {
  min-height: 96px;
}

@media (max-width: 1180px) {
  .unified-order-header,
  .unified-order-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .unified-order-header-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .unified-supplier-order {
    grid-template-columns: 1fr;
  }

  .unified-supplier-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .replenishment-unified-handoff,
  .unified-order-toolbar,
  .unified-order-header {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .replenishment-unified-handoff {
    flex-direction: column;
  }

  .unified-order-progress {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .unified-order-progress-step {
    justify-content: flex-start;
  }

  .unified-order-progress-step::after {
    display: none;
  }

  .unified-supplier-main {
    grid-template-columns: 1fr 1fr;
  }
}

.restock-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.restock-flow > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 12px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.restock-flow > div:last-child {
  border-right: 0;
}

.restock-flow strong {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
}

.restock-request-meta,
.restock-stock-reference,
.restock-receive-summary,
.restock-history-item > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.restock-request-meta span,
.restock-stock-reference span,
.restock-receive-summary > span,
.restock-history-item span {
  color: var(--muted);
  font-size: 12px;
}

.restock-stock-reference {
  min-height: 42px;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.restock-receive-summary {
  margin-bottom: 14px;
  padding: 12px;
  border-left: 3px solid var(--accent);
  background: var(--panel-soft);
}

.restock-history-list {
  display: grid;
  gap: 0;
}

.restock-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  padding: 0 0 16px;
}

.restock-history-item::before {
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: var(--line);
  content: '';
}

.restock-history-item:last-child::before {
  display: none;
}

.restock-history-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
}

.restock-history-item p {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 13px;
}

.restock-source-cell {
  display: inline-block;
  max-width: 190px;
  color: var(--text);
  line-height: 1.5;
  white-space: normal;
}

@media (max-width: 760px) {
  .delivery-reminder-root {
    top: auto;
    right: 12px;
    bottom: 70px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 96px);
  }

  .delivery-reminder-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .restock-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .restock-flow > div:nth-child(2) {
    border-right: 0;
  }

  .restock-flow > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .restock-mode-switch {
    align-items: stretch;
    flex-direction: column;
  }

  .restock-mode-switch > span {
    margin-left: 0;
  }

  .manual-restock-formbar {
    grid-template-columns: 1fr;
  }

  .manual-restock-entry,
  .manual-restock-code-add {
    grid-template-columns: 1fr;
  }

  .manual-restock-import-actions {
    justify-content: flex-start;
  }

  .manual-restock-formbar > strong {
    padding-bottom: 0;
  }

  .manual-restock-record > summary {
    grid-template-columns: 1fr;
  }

  .manual-restock-record-actions {
    justify-content: flex-start;
  }
}

/* Procurement suggestions */
.purchase-store-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, 320px) minmax(220px, auto) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
}

.purchase-store-toolbar > div:first-child,
.purchase-store-toolbar label,
.purchase-store-current {
  display: grid;
  gap: 4px;
}

.purchase-store-toolbar label > span,
.purchase-store-current span {
  color: var(--muted);
  font-size: 12px;
}

.purchase-store-toolbar select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  padding: 0 10px;
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.purchase-store-current {
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
}

.purchase-store-current.ready {
  border-color: #b8ddcf;
  background: #edf8f3;
}

.purchase-store-current.warning {
  border-color: #ecd79f;
  background: #fff8e7;
}

.purchase-export-main {
  white-space: nowrap;
}

.purchase-suggestion-panel {
  overflow: hidden;
}

.purchase-suggestion-header {
  align-items: center;
}

.purchase-suggestion-header .stack {
  gap: 2px;
}

.purchase-suggestion-actions,
.selection-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selection-toggle {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.purchase-formula-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: #f4f8f6;
  color: var(--muted);
  font-size: 12px;
}

.purchase-formula-bar strong {
  flex: 0 0 auto;
  color: var(--text);
}

.purchase-suggestion-qty {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.purchase-suggestion-qty span {
  color: var(--accent);
  font-size: 11px;
  white-space: nowrap;
}

.purchase-batch-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.purchase-batch-toolbar .selection-toggle {
  padding: 0 6px;
}

.purchase-batch-list {
  display: grid;
  gap: 12px;
  padding: 12px 0 2px;
}

.purchase-batch-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 35, 29, .04);
}

.purchase-batch-card.is-unbatched {
  border-style: dashed;
}

.purchase-batch-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: #f5faf7;
}

.purchase-batch-ident {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 280px;
}

.purchase-batch-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}

.purchase-batch-select.is-disabled {
  color: var(--muted);
}

.purchase-batch-title-block {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.purchase-batch-eyebrow {
  color: var(--muted);
  font-size: 11px;
}

.purchase-batch-title-block strong {
  overflow: hidden;
  color: var(--accent-strong, var(--accent));
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-batch-meta {
  color: var(--muted);
  font-size: 11px;
}

.purchase-batch-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  min-width: 260px;
  padding-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.purchase-batch-stats span {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  white-space: nowrap;
}

.purchase-batch-stats b {
  color: var(--text);
  font-size: 14px;
}

.purchase-batch-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 190px;
}

.purchase-batch-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfdfc;
}

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

.purchase-batch-status-item .badge {
  min-height: 21px;
  padding: 0 7px;
  font-size: 11px;
}

.purchase-batch-orders .table-wrap {
  border: 0;
}

.purchase-batch-orders table {
  min-width: 1080px;
}

.purchase-batch-orders th,
.purchase-batch-orders td {
  padding: 9px 10px;
  vertical-align: middle;
}

.purchase-batch-orders th:first-child,
.purchase-batch-orders td:first-child {
  width: 46px;
  text-align: center;
}

.purchase-batch-orders th:nth-child(2),
.purchase-batch-orders td:nth-child(2) {
  width: 150px;
}

.purchase-batch-orders th:nth-child(3),
.purchase-batch-orders td:nth-child(3) {
  width: 150px;
}

.purchase-batch-orders th:nth-child(5),
.purchase-batch-orders td:nth-child(5) {
  width: 110px;
}

.purchase-batch-orders th:nth-child(6),
.purchase-batch-orders td:nth-child(6) {
  width: 96px;
}

.purchase-batch-orders th:nth-child(7),
.purchase-batch-orders td:nth-child(7) {
  width: 88px;
}

.purchase-batch-orders th:nth-child(8),
.purchase-batch-orders td:nth-child(8) {
  width: 126px;
}

.purchase-order-number,
.purchase-quantity-cell {
  display: grid;
  gap: 3px;
}

.purchase-order-number strong {
  color: var(--accent);
}

.purchase-order-number span,
.purchase-quantity-cell span,
.purchase-order-items-summary {
  color: var(--muted);
  font-size: 11px;
}

.purchase-order-items-summary {
  max-width: 300px;
  overflow: hidden;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: normal;
}

.purchase-quantity-cell strong {
  color: var(--text);
}

@media (max-width: 1120px) {
  .purchase-batch-card-header {
    flex-wrap: wrap;
  }

  .purchase-batch-stats {
    justify-content: flex-start;
    min-width: 0;
  }

  .purchase-batch-card-actions {
    justify-content: flex-start;
    min-width: 0;
  }
}

.purchase-receive-modal {
  max-width: 1180px;
}

.purchase-details-modal {
  max-width: 1180px;
}

.purchase-details-table-wrap {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--line);
}

.purchase-details-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 12px;
}

.purchase-details-table th,
.purchase-details-table td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.purchase-details-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-soft);
  color: var(--muted);
}

.purchase-details-table td > strong,
.purchase-details-table td > span {
  display: block;
}

.purchase-receive-table-wrap {
  overflow: auto;
  max-height: 55vh;
  border: 1px solid var(--line);
}

.purchase-receive-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 12px;
}

.purchase-receive-table th,
.purchase-receive-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.purchase-receive-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-soft);
  color: var(--muted);
}

.purchase-receive-table td > span,
.purchase-receive-table td > strong {
  display: block;
}

.purchase-receive-table td > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.purchase-receive-table input {
  width: 84px;
  min-height: 32px;
  padding: 0 6px;
}

.purchase-receive-table td:last-child input {
  width: 150px;
}

.purchase-formula-bar em {
  margin-left: auto;
  color: var(--danger);
  font-style: normal;
  font-weight: 700;
}

.purchase-suggestion-table .table-wrap {
  max-height: 430px;
  overflow: auto;
}

.purchase-suggestion-table table {
  min-width: 1280px;
  table-layout: fixed;
}

.purchase-suggestion-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--line);
}

.purchase-suggestion-table th,
.purchase-suggestion-table td {
  padding: 7px 8px;
  vertical-align: middle;
}

.purchase-suggestion-table th:first-child,
.purchase-suggestion-table td:first-child {
  width: 42px;
  text-align: center;
}

.purchase-suggestion-table th:nth-child(2),
.purchase-suggestion-table td:nth-child(2) {
  width: 74px;
}

.purchase-suggestion-table th:nth-child(3),
.purchase-suggestion-table td:nth-child(3) {
  width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.purchase-suggestion-table th:nth-child(4),
.purchase-suggestion-table td:nth-child(4) {
  width: 94px;
}

.purchase-suggestion-table th:nth-child(5),
.purchase-suggestion-table td:nth-child(5),
.purchase-suggestion-table th:nth-child(7),
.purchase-suggestion-table td:nth-child(7),
.purchase-suggestion-table th:nth-child(8),
.purchase-suggestion-table td:nth-child(8) {
  width: 78px;
}

.purchase-suggestion-table th:nth-child(6),
.purchase-suggestion-table td:nth-child(6) {
  width: 92px;
}

.purchase-suggestion-table th:nth-child(9),
.purchase-suggestion-table td:nth-child(9) {
  width: 76px;
}

.purchase-suggestion-table th:nth-child(10),
.purchase-suggestion-table td:nth-child(10) {
  width: 92px;
}

.purchase-suggestion-table th:nth-child(11),
.purchase-suggestion-table td:nth-child(11) {
  width: 170px;
}

.purchase-priority {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.purchase-priority.critical {
  color: #a51d25;
  background: #feecee;
  border: 1px solid #f7c9cd;
}

.purchase-priority.urgent {
  color: #8d5200;
  background: #fff4d8;
  border: 1px solid #f0d69a;
}

.purchase-priority.attention {
  color: #1d5d49;
  background: #eaf6f1;
  border: 1px solid #c8e6d9;
}

.purchase-stock-cell,
.purchase-sales-cell,
.purchase-reason {
  display: grid;
  gap: 2px;
}

.purchase-stock-cell span,
.purchase-sales-cell span,
.purchase-reason span {
  color: var(--muted);
  font-size: 11px;
}

.purchase-reason {
  min-width: 210px;
  max-width: 300px;
  white-space: normal;
}

.purchase-reason strong {
  font-size: 12px;
}

.suggestion-quantity-input {
  width: 68px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-weight: 800;
  text-align: center;
}

.purchase-missing-supplier {
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
}

.purchase-line-total {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.purchase-selection-summary {
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: #f5faf8;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

@media (max-width: 900px) {
  .purchase-store-toolbar {
    grid-template-columns: 1fr;
  }

  .purchase-suggestion-header,
  .purchase-formula-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .purchase-formula-bar em {
    margin-left: 0;
  }

  .purchase-suggestion-actions {
    flex-wrap: wrap;
  }
}

/* Service console refinement: dense, risk-led and scan-friendly. */
:root {
  --bg: #f2f5f3;
  --panel-soft: #f7f9f8;
  --ink: #111916;
  --muted: #5f6e68;
  --line: #d9e1dd;
  --line-strong: #c5d1cb;
  --accent: #087a57;
  --accent-soft: #e5f4ed;
  --amber: #a8640f;
  --amber-soft: #fff4d6;
  --danger: #b72b22;
  --danger-soft: #fff0ee;
  --info: #2d5f98;
  --info-soft: #edf4fc;
  --sidebar: #10231e;
  --sidebar-muted: #a8bbb4;
  --shadow: 0 8px 24px rgba(20, 42, 34, .065);
}

html {
  scrollbar-gutter: stable;
}

body {
  font-size: 13px;
}

button,
input,
select,
textarea,
summary {
  outline: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(8, 122, 87, .14) !important;
}

.sidebar {
  width: 204px;
  padding: 12px 10px;
  gap: 10px;
  border-right: 1px solid rgba(255, 255, 255, .06);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.brand {
  min-height: 46px;
  padding: 0 6px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

.brand strong {
  font-size: 15px;
}

.nav {
  gap: 1px;
}

.nav button,
.nav-group-toggle,
.nav-sub-item {
  min-height: 31px;
  border-radius: 4px;
  padding-inline: 10px;
  font-size: 12px;
}

.nav-group-toggle {
  color: #d7e2de;
  letter-spacing: 0;
}

.nav-sub {
  margin: 1px 0 3px 7px;
  padding-left: 9px;
  border-left-color: rgba(255, 255, 255, .12);
}

.nav button.active,
.nav-sub-item.active {
  position: relative;
  background: rgba(255, 255, 255, .105);
  color: #fff;
  font-weight: 700;
}

.nav button.active::before,
.nav-sub-item.active::before {
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  border-radius: 2px;
  background: #41c38e;
  content: '';
}

.sidebar-footer {
  padding: 10px 4px 2px;
  font-size: 11px;
}

.main {
  margin-left: 204px;
}

.topbar {
  min-height: 56px;
  padding: 7px 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 10px rgba(20, 42, 34, .035);
}

.topbar p {
  margin-bottom: 1px;
  font-size: 10px;
}

.topbar h1 {
  font-size: 19px;
}

.topbar-actions {
  gap: 6px;
}

.topbar-actions select {
  width: clamp(190px, 21vw, 260px);
}

.user-label {
  max-width: 230px;
  overflow: hidden;
  border-radius: 4px;
  padding: 5px 8px;
  background: var(--panel-soft);
  text-overflow: ellipsis;
}

.view-root {
  padding: 12px 16px 18px;
  gap: 10px;
}

.panel,
.ops-hero,
.module-intro,
.pickup-card {
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.panel-header {
  min-height: 40px;
  padding: 8px 12px;
  background: #fff;
}

.panel-header h2 {
  font-size: 14px;
}

.panel-body {
  padding: 10px 12px;
}

.metric-grid,
.metric-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}

.metric {
  position: relative;
  min-height: 70px;
  padding: 9px 12px 8px 15px;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(20, 42, 34, .04);
}

.metric::before {
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 2px;
  background: #8aa69a;
  content: '';
}

.metric.warning::before {
  background: #d59a2b;
}

.metric.danger::before {
  background: var(--danger);
}

.metric strong {
  font-size: 24px;
  line-height: 1.05;
}

.metric span,
.metric small {
  line-height: 1.25;
}

.primary-button,
.ghost-button,
.text-button,
.danger-button,
.small-button {
  min-height: 32px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}

.small-button {
  min-height: 28px;
  padding-inline: 8px;
}

.primary-button:hover,
.small-button.primary:hover {
  background: #076c4d;
}

.ghost-button:hover,
.small-button:hover {
  border-color: #92aa9f;
  background: #f7faf8;
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

.toolbar {
  gap: 6px;
}

.toolbar input,
.toolbar select,
.field input,
.field select,
.field textarea {
  height: 32px;
  border-radius: 4px;
  font-size: 12px;
}

.field textarea {
  height: auto;
}

.table-wrap {
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #a8b8b1 #edf1ef;
}

th,
td {
  height: 38px;
  padding: 7px 9px;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f3f6f4;
  box-shadow: inset 0 -1px 0 var(--line);
  color: #53635d;
  font-size: 11px;
}

td {
  font-size: 12px;
}

tbody tr:nth-child(even) td {
  background: #fbfcfb;
}

tbody tr:hover td {
  background: #f0f7f3;
}

.erp-master-table .table-wrap {
  max-height: calc(100vh - 238px);
}

.erp-master-table th,
.erp-master-table td {
  height: 39px;
  padding: 6px 7px;
}

.erp-master-table th:nth-child(1),
.erp-master-table td:nth-child(1),
.erp-master-table th:nth-child(2),
.erp-master-table td:nth-child(2),
.erp-master-table th:nth-child(3),
.erp-master-table td:nth-child(3) {
  position: sticky;
  z-index: 2;
  background: #fff;
}

.erp-master-table th:nth-child(1),
.erp-master-table td:nth-child(1) {
  left: 0;
}

.erp-master-table th:nth-child(2),
.erp-master-table td:nth-child(2) {
  left: 44px;
}

.erp-master-table th:nth-child(3),
.erp-master-table td:nth-child(3) {
  left: 116px;
  box-shadow: 7px 0 10px rgba(20, 42, 34, .045);
}

.erp-master-table thead th:nth-child(-n+3) {
  z-index: 6;
  background: #f3f6f4;
}

.badge {
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 700;
}

.scanner-form {
  gap: 7px;
}

.scanner-panel-header {
  border-bottom-color: #cedbd5;
}

.scanner-control-grid {
  gap: 7px;
}

.scanner-layout.has-order .scanner-control-grid {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-soft);
}

.scanner-layout.has-order .scanner-panel > .panel-header {
  background: linear-gradient(90deg, #fff 0%, #f3faf6 100%);
}

.scanner-replace-order,
.scanner-manual-entry,
.pickup-script-details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.scanner-replace-order summary,
.scanner-manual-entry summary,
.pickup-script-details summary {
  min-height: 30px;
  padding: 7px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.scanner-replace-order .scanner-upload-field {
  padding: 0 9px 8px;
}

.scanner-layout.has-order .ocr-paste-zone {
  min-height: 42px;
  grid-template-columns: auto auto;
  gap: 8px;
}

.scanner-layout.has-order .ocr-paste-zone strong,
.scanner-layout.has-order .ocr-paste-zone span {
  font-size: 11px;
}

.ocr-result {
  border-color: #cbd9d2;
  background: #fff;
}

.ocr-result-header {
  padding: 7px 10px;
}

.ocr-command-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(105px, .55fr)) minmax(230px, 1.5fr);
  border-bottom: 1px solid var(--line);
  background: #f8faf9;
}

.ocr-command-strip > div {
  min-height: 47px;
  padding: 7px 10px;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ocr-command-strip > div span {
  margin-right: auto;
  color: var(--muted);
  font-size: 10px;
}

.ocr-command-strip > div strong {
  font-size: 21px;
  line-height: 1;
}

.ocr-command-strip > div em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.ocr-command-strip > div.primary strong {
  color: var(--accent);
}

.ocr-command-strip > div.warning {
  background: var(--amber-soft);
}

.ocr-command-strip > div.warning strong {
  color: var(--amber);
}

.ocr-command-strip > div.danger {
  background: var(--danger-soft);
}

.ocr-command-strip > div.danger strong {
  color: var(--danger);
}

.ocr-command-strip > p {
  min-width: 0;
  margin: 0;
  padding: 7px 10px;
  display: grid;
  align-content: center;
  gap: 2px;
}

.ocr-command-strip > p strong {
  color: var(--accent);
  font-size: 10px;
}

.ocr-command-strip > p span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocr-meta-grid > div {
  min-height: 37px;
  padding: 6px 8px;
}

.ocr-item-card {
  padding: 7px 9px;
  border-radius: 4px;
}

.ocr-item-card.has-shortage {
  border-color: #e6a7a1;
  box-shadow: inset 3px 0 0 var(--danger);
}

.shipment-panel {
  padding: 7px 9px;
}

.scanner-submit-bar {
  position: sticky;
  bottom: 8px;
  z-index: 8;
  border: 1px solid #bfd2c8;
  border-radius: 5px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 7px 22px rgba(20, 42, 34, .12);
}

.queue-status-strip {
  min-height: 52px;
  border: 1px solid #bcd5c9;
  border-radius: 6px;
  padding: 8px 12px;
  background: #f1faf6;
  display: flex;
  align-items: center;
  gap: 16px;
}

.queue-status-strip > div {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.queue-status-strip span,
.queue-status-strip em,
.queue-status-strip p {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.queue-status-strip strong {
  color: var(--accent);
  font-size: 25px;
}

.queue-status-strip p {
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid #cdded6;
}

.pickup-list {
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 10px;
}

.pickup-card {
  padding: 12px;
  gap: 8px;
}

.pickup-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pickup-card-head .stack > strong {
  font-size: 14px;
}

.pickup-queue-sequence {
  width: fit-content;
  border: 1px solid #b9d5c8;
  border-radius: 4px;
  padding: 2px 6px;
  background: #edf8f3;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.pickup-code-block {
  min-width: 132px;
  border-left: 1px solid var(--line);
  padding-left: 12px;
}

.pickup-code-block > span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
}

.pickup-code {
  font-size: 31px;
  letter-spacing: 4px;
}

.pickup-order-items {
  padding: 7px 9px;
}

.pickup-order-items span {
  white-space: normal;
}

.pickup-location-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #d5ded9;
  border-radius: 5px;
  background: #f7f9f8;
}

.pickup-location-strip strong {
  color: var(--ink);
  font-size: 11px;
  white-space: nowrap;
}

.pickup-location-strip span {
  color: #40534a;
  font-size: 11px;
  line-height: 1.55;
}

.picked-up-strip {
  border-color: #c9d6e5;
  background: #f4f7fb;
}

.picked-up-card {
  border-left: 3px solid #547899;
}

.pickup-script-details .message-box {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.55;
}

.pickup-card .row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pickup-confirm-button {
  margin-left: auto;
  border-color: #b8d3c6;
  color: var(--accent);
}

.orders-panel table {
  min-width: 980px;
  table-layout: fixed;
}

.orders-panel th:nth-child(1),
.orders-panel td:nth-child(1) {
  width: 135px;
}

.orders-panel th:nth-child(2),
.orders-panel td:nth-child(2) {
  width: 145px;
}

.orders-panel th:nth-child(3),
.orders-panel td:nth-child(3) {
  width: 220px;
}

.orders-panel th:nth-child(4),
.orders-panel td:nth-child(4) {
  width: 105px;
}

.orders-panel th:nth-child(5),
.orders-panel td:nth-child(5) {
  width: 125px;
}

.orders-panel th:nth-child(6),
.orders-panel td:nth-child(6) {
  width: 60px;
}

.orders-panel th:nth-child(7),
.orders-panel td:nth-child(7) {
  width: 190px;
}

.orders-panel td:nth-child(2),
.orders-panel td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-panel td:last-child > div,
.orders-panel td:last-child .row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.orders-panel td:last-child button {
  min-height: 25px;
  padding-inline: 6px;
  font-size: 10px;
}

.order-state-stack,
.order-delivery-stack {
  display: grid;
  justify-items: start;
  gap: 3px;
}

.order-state-stack > span:last-child,
.order-delivery-stack > span:last-child {
  color: var(--muted);
  font-size: 10px;
}

.store-inventory-panel .table-wrap {
  max-height: calc(100vh - 250px);
}

.store-inventory-panel table {
  min-width: 1320px;
}

.store-inventory-panel th:nth-child(1),
.store-inventory-panel td:nth-child(1),
.store-inventory-panel th:nth-child(2),
.store-inventory-panel td:nth-child(2),
.store-inventory-panel th:nth-child(3),
.store-inventory-panel td:nth-child(3) {
  position: sticky;
  z-index: 2;
  background: #fff;
}

.store-inventory-panel th:nth-child(1),
.store-inventory-panel td:nth-child(1) {
  left: 0;
  width: 40px;
}

.store-inventory-panel th:nth-child(2),
.store-inventory-panel td:nth-child(2) {
  left: 40px;
  width: 78px;
}

.store-inventory-panel th:nth-child(3),
.store-inventory-panel td:nth-child(3) {
  left: 118px;
  min-width: 240px;
  box-shadow: 7px 0 10px rgba(20, 42, 34, .045);
}

.store-inventory-panel thead th:nth-child(-n+3) {
  z-index: 6;
  background: #f3f6f4;
}

.shelf-guide-shell {
  gap: 8px;
}

.shelf-guide-head,
.shelf-guide-controls {
  gap: 8px;
}

.shelf-order-query textarea {
  min-height: 56px;
}

.shelf-overview {
  gap: 7px;
}

.shelf-thumb {
  border-radius: 5px;
}

.shelf-workspace {
  border-radius: 6px;
}

.message-box,
.result-card,
.blueprint-card,
.role-card {
  border-radius: 5px;
}

@media (max-width: 1180px) {
  .ocr-command-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ocr-command-strip > p {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }

  .user-label {
    display: none;
  }
}

@media (max-width: 980px) {
  .sidebar {
    width: auto;
  }

  .main {
    margin-left: 0;
  }

  .nav-group {
    display: contents;
  }

  .nav-group-toggle {
    display: none;
  }

  .nav-sub {
    display: contents !important;
  }

  .ocr-command-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 620px) {
  .view-root {
    padding: 9px;
  }

  .topbar {
    padding: 9px;
  }

  .queue-status-strip,
  .pickup-card-head {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .queue-status-strip {
    display: grid;
    gap: 5px;
  }

  .queue-status-strip p,
  .pickup-code-block {
    padding: 6px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .ocr-command-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ocr-command-strip > div {
    padding: 6px;
    display: grid;
  }

  .ocr-command-strip > div strong {
    font-size: 18px;
  }

  .pickup-confirm-button {
    margin-left: 0;
  }
}

/* SaaS data visualization system · v18 */
:root {
  --bg: #f3f6fb;
  --panel: rgba(255, 255, 255, .96);
  --panel-soft: #f6f8fc;
  --surface: #f7f9fc;
  --ink: #172033;
  --text: #172033;
  --muted: #6e7890;
  --line: #e4e9f2;
  --line-strong: #d2dae8;
  --accent: #5b5fe9;
  --accent-strong: #4146d8;
  --accent-soft: #efefff;
  --cyan: #12b8c4;
  --cyan-soft: #e8fbfc;
  --violet: #8b5cf6;
  --amber: #d58a12;
  --amber-strong: #a86608;
  --amber-soft: #fff7df;
  --danger: #df4256;
  --danger-soft: #fff0f2;
  --info: #3978ed;
  --info-soft: #edf4ff;
  --sidebar: #0b1123;
  --sidebar-muted: #8d99b4;
  --shadow: 0 18px 46px rgba(24, 35, 65, .09);
  --shadow-hover: 0 24px 54px rgba(35, 45, 92, .14);
}

html {
  background: #f3f6fb;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% -12%, rgba(91, 95, 233, .12), transparent 32%),
    radial-gradient(circle at 94% 30%, rgba(18, 184, 196, .08), transparent 24%),
    linear-gradient(180deg, #f8faff 0, #f3f6fb 46%, #f6f8fc 100%);
  color: var(--ink);
  font-family: Inter, "SF Pro Display", "Segoe UI", "Microsoft YaHei", sans-serif;
}

* {
  scrollbar-color: #c7d0e2 transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

*::-webkit-scrollbar-thumb {
  background: #c7d0e2;
  border-radius: 999px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

::selection {
  color: #fff;
  background: rgba(91, 95, 233, .8);
}

.login-screen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(86, 105, 255, .36), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(18, 184, 196, .25), transparent 30%),
    linear-gradient(135deg, #081022, #101a36 56%, #0a2432);
}

.login-screen::before,
.login-screen::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.login-screen::before {
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.login-screen::after {
  width: 420px;
  height: 420px;
  border: 1px solid rgba(111, 233, 232, .2);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(111, 233, 232, .035),
    0 0 0 140px rgba(91, 95, 233, .025);
  animation: saas-orbit-float 8s ease-in-out infinite;
}

.login-panel {
  position: relative;
  z-index: 1;
  width: min(438px, 100%);
  padding: 32px;
  gap: 17px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 32px 90px rgba(0, 8, 30, .42);
  backdrop-filter: blur(24px);
}

.login-panel::before {
  position: absolute;
  inset: 0 32px auto;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--accent), var(--cyan), var(--violet));
  content: "";
}

.login-brand .brand-mark,
.brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #686cff, #7c4df0 58%, #19b9ca);
  box-shadow: 0 10px 26px rgba(86, 90, 234, .34);
}

.brand-mark::after {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px;
  content: "";
}

.brand small {
  margin-top: 3px;
  letter-spacing: 1.3px;
  font-size: 9px;
}

.login-panel h1 {
  margin-top: 12px;
  font-size: 27px;
  font-weight: 760;
}

.login-panel input {
  height: 46px;
  border-radius: 11px;
}

.login-panel .primary-button {
  min-height: 46px;
  margin-top: 4px;
}

.sidebar {
  width: 252px;
  padding: 20px 14px 16px;
  gap: 18px;
  overflow-x: hidden;
  color: #fff;
  border-right: 1px solid rgba(148, 167, 255, .13);
  background:
    radial-gradient(circle at 16% 7%, rgba(100, 104, 255, .28), transparent 25%),
    radial-gradient(circle at 88% 82%, rgba(20, 190, 198, .13), transparent 26%),
    linear-gradient(180deg, #111832 0%, #0b1226 48%, #091322 100%);
  box-shadow: 18px 0 42px rgba(18, 26, 53, .12);
}

.sidebar::before {
  position: fixed;
  inset: 0 auto 0 0;
  width: 252px;
  pointer-events: none;
  opacity: .15;
  background-image:
    linear-gradient(rgba(159,173,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,173,255,.13) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 54%);
  content: "";
}

.sidebar > * {
  position: relative;
  z-index: 1;
}

.sidebar > .brand {
  min-height: 48px;
  padding: 0 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.sidebar .brand strong {
  font-size: 17px;
  letter-spacing: .5px;
}

.sidebar .brand small {
  color: #7f8ca9;
}

.nav {
  gap: 4px;
}

.nav button,
.nav-sub-item {
  position: relative;
  min-height: 40px;
  border-radius: 10px;
  padding-inline: 13px;
  color: #94a0bb;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.nav > button::before,
.nav-sub-item::before {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  margin-right: 9px;
  display: inline-block;
  vertical-align: 2px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  content: "";
}

.nav button.active,
.nav button:hover,
.nav-sub-item.active,
.nav-sub-item:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(102, 105, 255, .25), rgba(69, 199, 208, .08));
  transform: translateX(2px);
}

.nav button.active,
.nav-sub-item.active {
  box-shadow: inset 2px 0 #7e82ff, 0 8px 20px rgba(4, 8, 30, .16);
}

.nav button.active::after,
.nav-sub-item.active::after {
  position: absolute;
  right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #52e2dc;
  box-shadow: 0 0 10px rgba(82, 226, 220, .9);
  content: "";
}

.nav-group-toggle {
  min-height: 33px !important;
  margin-top: 6px;
  padding-inline: 9px !important;
  color: #68758f !important;
  font-size: 10px !important;
  letter-spacing: 1.15px;
}

.nav-group-toggle:hover {
  color: #9aa6c2 !important;
  background: transparent !important;
  transform: none !important;
}

.nav-sub {
  margin: 1px 0 2px 7px;
  padding-left: 8px;
  gap: 2px;
  border-left-color: rgba(125, 134, 194, .15);
}

.nav-sub-item {
  min-height: 37px !important;
}

.sidebar-footer {
  padding: 14px 5px 2px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-top-color: rgba(255,255,255,.09);
  color: #68758e;
  line-height: 1.45;
  font-size: 10px;
}

.sidebar-footer strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #66e1c2;
}

.sidebar-footer strong::before {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #43dfb4;
  box-shadow: 0 0 9px #43dfb4;
  content: "";
}

.main {
  margin-left: 252px;
  background: transparent;
}

.topbar {
  min-height: 74px;
  padding: 11px 24px;
  border-bottom: 1px solid rgba(212, 220, 235, .78);
  background: rgba(248, 250, 255, .78);
  box-shadow: 0 8px 30px rgba(27, 36, 71, .035);
  backdrop-filter: blur(22px) saturate(150%);
}

.topbar p {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.topbar h1 {
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -.35px;
}

.topbar-actions {
  gap: 9px;
}

.cloud-status {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #287b73;
  background: rgba(227, 249, 247, .82);
  border: 1px solid #c9efeb;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.cloud-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18b69c;
  box-shadow: 0 0 0 4px rgba(24, 182, 156, .1);
  animation: dashboard-live-pulse 1.8s infinite;
}

.user-label {
  max-width: 190px;
  overflow: hidden;
  padding: 7px 10px;
  color: #515c73;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 9px;
  text-overflow: ellipsis;
}

.view-root {
  padding: 20px 24px 32px;
  gap: 16px;
}

.view-root > * {
  animation: saas-section-in .42s cubic-bezier(.2,.7,.2,1) both;
}

.view-root > *:nth-child(2) {
  animation-delay: .05s;
}

.view-root > *:nth-child(3) {
  animation-delay: .1s;
}

.view-root > *:nth-child(4) {
  animation-delay: .15s;
}

.panel,
.metric,
.ops-hero,
.role-card,
.result-card,
.blueprint-card,
.message-box,
.restock-mode-switch {
  border-color: rgba(220, 226, 239, .9);
  border-radius: 15px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 34px rgba(33, 42, 76, .06);
  backdrop-filter: blur(12px);
}

.panel {
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.panel:hover {
  border-color: rgba(194, 202, 225, .95);
  box-shadow: 0 16px 44px rgba(33, 42, 76, .085);
}

.panel-header {
  min-height: 56px;
  padding: 12px 16px;
  border-bottom-color: #edf0f6;
  background:
    linear-gradient(90deg, rgba(246, 248, 253, .95), rgba(255,255,255,.82));
}

.panel-header h2 {
  color: #202940;
  font-size: 15px;
  font-weight: 760;
}

.panel-body {
  padding: 15px 16px;
}

.metric-grid,
.metric-grid.compact {
  gap: 12px;
}

.metric {
  position: relative;
  min-height: 100px;
  padding: 16px;
  overflow: hidden;
}

.metric::after {
  position: absolute;
  right: -25px;
  bottom: -38px;
  width: 100px;
  height: 100px;
  pointer-events: none;
  border: 18px solid rgba(91, 95, 233, .055);
  border-radius: 50%;
  content: "";
}

.metric strong {
  color: #202940;
  font-size: 29px;
  font-weight: 760;
}

.metric span {
  color: #7b8498;
  font-weight: 650;
}

.toolbar input,
.toolbar select,
.field input,
.field select,
.field textarea,
.topbar select,
.pagination-bar select,
.login-panel input,
input,
select,
textarea {
  border-color: var(--line-strong);
  border-radius: 9px;
  background-color: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.toolbar input:focus,
.toolbar select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.topbar select:focus,
.login-panel input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #8588ee;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(91, 95, 233, .12);
}

.primary-button,
.ghost-button,
.text-button,
.danger-button,
.small-button {
  border-radius: 9px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.primary-button,
.small-button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #6266ed, #5155df 62%, #7655e7);
  box-shadow: 0 8px 18px rgba(81, 85, 223, .2);
}

.primary-button:hover,
.small-button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgba(81, 85, 223, .29);
}

.ghost-button,
.small-button {
  border-color: #dbe1ec;
  background: rgba(255,255,255,.92);
}

.ghost-button:hover,
.small-button:hover {
  border-color: #bfc8da;
  background: #f9faff;
  transform: translateY(-1px);
}

.text-button {
  color: var(--accent);
}

.chip,
.badge {
  border-radius: 999px;
}

.table-wrap {
  background: rgba(255,255,255,.68);
}

th,
td {
  height: 44px;
  border-bottom-color: #edf0f5;
}

th {
  color: #6d778c;
  background: #f5f7fb;
  font-size: 11px;
  letter-spacing: .25px;
}

td {
  color: #30394e;
}

tbody tr {
  transition: background .16s ease;
}

tbody tr:hover {
  background: #f7f8ff;
}

.erp-master-table thead th,
.store-inventory-panel thead th:nth-child(-n+3) {
  background: #f2f5fa;
  box-shadow: 0 2px 0 #e5eaf2, 0 10px 18px rgba(33, 42, 76, .055);
}

.store-inventory-panel th:nth-child(-n+3),
.store-inventory-panel td:nth-child(-n+3) {
  background: #fff;
}

.store-inventory-panel tbody tr:hover td:nth-child(-n+3) {
  background: #f7f8ff;
}

.progress {
  background: #e9edf5;
}

.progress i {
  background: linear-gradient(90deg, #5b5fe9, #19b7c6);
}

.modal-root {
  padding: 18px;
  background: rgba(10, 16, 34, .52);
  backdrop-filter: blur(10px);
}

.modal {
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 34px 100px rgba(8, 14, 34, .3);
  animation: saas-modal-in .24s cubic-bezier(.2,.8,.2,1) both;
}

.modal-header,
.modal-footer {
  background: #f8f9fd;
}

.toast {
  border-radius: 12px;
  background: #10182c;
  box-shadow: 0 18px 42px rgba(8,14,34,.3);
}

/* Dashboard cockpit */
.dashboard-command-strip {
  position: relative;
  min-height: 142px;
  padding: 22px 24px;
  grid-template-columns: minmax(420px, 1fr) auto 214px;
  gap: 24px;
  overflow: hidden;
  border: 1px solid rgba(139, 151, 255, .28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 10%, rgba(100, 107, 255, .28), transparent 30%),
    radial-gradient(circle at 84% 75%, rgba(19, 204, 201, .18), transparent 28%),
    linear-gradient(118deg, #111a36 0%, #152044 52%, #0e2e3d 100%);
  box-shadow: 0 25px 60px rgba(18, 27, 61, .19);
}

.dashboard-command-strip::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(142,154,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142,154,255,.22) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
  content: "";
}

.dashboard-command-strip > *:not(.dashboard-data-field) {
  position: relative;
  z-index: 2;
}

.dashboard-data-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.dashboard-data-field::before,
.dashboard-data-field::after {
  position: absolute;
  right: 9%;
  top: 50%;
  border: 1px solid rgba(117, 238, 232, .17);
  border-radius: 50%;
  transform: translateY(-50%);
  content: "";
}

.dashboard-data-field::before {
  width: 230px;
  height: 230px;
  animation: saas-radar-sweep 14s linear infinite;
}

.dashboard-data-field::after {
  width: 142px;
  height: 142px;
  box-shadow: 0 0 0 34px rgba(105, 119, 255, .025);
}

.dashboard-data-field i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #65e6de;
  box-shadow: 0 0 13px #65e6de;
  animation: saas-data-blink 2.8s ease-in-out infinite;
}

.dashboard-data-field i:nth-child(1) { right: 24%; top: 22%; }
.dashboard-data-field i:nth-child(2) { right: 8%; top: 62%; animation-delay: -.6s; }
.dashboard-data-field i:nth-child(3) { right: 34%; top: 76%; animation-delay: -1.2s; }
.dashboard-data-field i:nth-child(4) { right: 15%; top: 35%; animation-delay: -1.8s; }
.dashboard-data-field i:nth-child(5) { right: 43%; top: 48%; animation-delay: -2.3s; }

.dashboard-live-line {
  color: #aebbd5;
  letter-spacing: .3px;
}

.dashboard-live-badge {
  padding: 5px 9px;
  color: #a9fff0;
  border-color: rgba(99, 233, 208, .32);
  border-radius: 999px;
  background: rgba(31, 187, 161, .1);
}

.dashboard-command-copy h2 {
  margin: 12px 0 6px;
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 760;
  letter-spacing: -.45px;
}

.dashboard-command-copy p {
  color: #95a4c1;
  font-size: 12px;
}

.dashboard-command-actions {
  max-width: 300px;
}

.dashboard-command-actions .small-button {
  min-height: 35px;
  padding-inline: 12px;
  border-color: rgba(180, 191, 225, .25);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(8px);
}

.dashboard-command-actions .small-button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #6469f1, #4f55dc);
  box-shadow: 0 10px 25px rgba(67,72,208,.3);
}

.dashboard-sync-state {
  min-height: 78px;
  padding-left: 20px;
  grid-template-columns: 58px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  border-left-color: rgba(255,255,255,.13);
}

.dashboard-sync-state > div:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-sync-state strong {
  overflow: hidden;
  color: #f5f8ff;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-sync-orbit {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(100, 233, 220, .2);
  border-radius: 50%;
  background: rgba(16, 33, 59, .56);
}

.dashboard-sync-orbit::before {
  position: absolute;
  inset: 4px;
  border: 3px solid rgba(91, 102, 174, .35);
  border-top-color: #55e1d2;
  border-right-color: #7379f7;
  border-radius: 50%;
  content: "";
  animation: saas-radar-spin 4s linear infinite;
}

.dashboard-sync-orbit i {
  position: absolute;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #65e6de;
  box-shadow: 0 0 11px #65e6de;
}

.dashboard-sync-orbit b {
  color: #e9fffb;
  font-size: 11px;
}

.dashboard-kpi-grid {
  gap: 12px;
}

.dashboard-kpi {
  min-height: 132px;
  padding: 15px 16px;
  gap: 8px;
  border: 1px solid rgba(220, 226, 239, .94);
  border-top: 0;
  border-radius: 15px;
  background:
    radial-gradient(circle at 92% 10%, rgba(91,95,233,.1), transparent 28%),
    linear-gradient(145deg, #fff, #fbfcff);
  box-shadow: 0 12px 34px rgba(33, 42, 76, .065);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.dashboard-kpi::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 15px 0 0 15px;
  background: linear-gradient(180deg, #696df1, #20bcc7);
  content: "";
}

.dashboard-kpi.revenue {
  background:
    radial-gradient(circle at 92% 10%, rgba(44,126,238,.12), transparent 28%),
    linear-gradient(145deg, #fff, #fbfcff);
}

.dashboard-kpi.warning::before {
  background: linear-gradient(180deg, #f0a225, #ffca63);
}

.dashboard-kpi.danger::before {
  background: linear-gradient(180deg, #e44b60, #ff8e9d);
}

button.dashboard-kpi:hover {
  border-color: #c9d0e3;
  background-color: #fff;
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.dashboard-kpi header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-kpi header > span {
  color: #778198;
  font-size: 11px;
  font-weight: 720;
}

.dashboard-kpi header > i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: #565bdd;
  background: #efefff;
  border: 1px solid #e2e3ff;
  border-radius: 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.dashboard-kpi.warning header > i {
  color: #aa6a05;
  background: #fff6db;
  border-color: #f7e5ad;
}

.dashboard-kpi.danger header > i {
  color: #c93449;
  background: #fff0f2;
  border-color: #ffd8dd;
}

.dashboard-kpi > strong {
  color: #1c253b;
  font-size: 29px;
  font-weight: 770;
  letter-spacing: -.65px;
}

.dashboard-kpi-delta {
  padding: 3px 7px;
  border-radius: 999px;
  background: #f0f2f7;
}

.dashboard-kpi-delta.up {
  color: #10806e;
  background: #e8f8f4;
}

.dashboard-kpi-delta.down {
  color: #cb354b;
  background: #fff0f2;
}

.dashboard-primary-grid,
.dashboard-operations-grid,
.dashboard-secondary-grid {
  gap: 14px;
}

.dashboard-panel-sub {
  margin-top: 4px;
  color: #8891a5;
}

.dashboard-chart-legend span::before {
  border-radius: 999px;
}

.dashboard-chart-legend .revenue::before {
  background: linear-gradient(180deg, #7478ef, #9ea1f8);
}

.dashboard-chart-legend .orders::before {
  background: #17b7c4;
  box-shadow: 0 0 0 3px rgba(23, 183, 196, .1);
}

.dashboard-trend-body {
  min-height: 282px;
  padding: 12px 14px 8px;
  background: linear-gradient(180deg, rgba(248,249,254,.78), rgba(255,255,255,.2));
}

.dashboard-trend-chart {
  height: 264px;
}

.dashboard-chart-grid {
  stroke: #e8ebf3;
  stroke-dasharray: 4 4;
}

.dashboard-chart-bar {
  fill: #767aef;
  opacity: .82;
}

.dashboard-chart-bar:hover {
  fill: #555bdd;
}

.dashboard-order-line {
  stroke: #14b7c3;
  stroke-width: 2.7;
  filter: drop-shadow(0 3px 4px rgba(20, 183, 195, .2));
}

.dashboard-chart-point {
  stroke: #14b7c3;
}

.dashboard-fulfillment-body {
  min-height: 282px;
  padding: 14px 15px;
  gap: 12px;
}

.dashboard-pipeline {
  gap: 7px;
}

.dashboard-pipeline-stage {
  min-height: 74px;
  padding: 9px 7px;
  border-color: #e3e8f1;
  border-radius: 9px;
  background: #f7f8fc;
}

.dashboard-pipeline-stage:hover {
  border-color: #ccd4e4;
  background: #f1f3fb;
  transform: translateY(-1px);
}

.dashboard-pipeline-stage > span {
  background: #6d7391;
}

.dashboard-pipeline-stage i {
  background: linear-gradient(90deg, #777bef, #22bcc7);
}

.dashboard-fulfillment-summary {
  border-color: #e4e8f1;
  border-radius: 9px;
}

.dashboard-fulfillment-summary span {
  background: #fafbfe;
}

.dashboard-live-queue > button {
  min-height: 42px;
  padding-inline: 7px;
  border-radius: 7px;
}

.dashboard-live-queue > button:hover,
.dashboard-risk-row:hover {
  background: #f5f6fe;
}

.dashboard-risk-row {
  min-height: 55px;
  padding-inline: 14px;
}

.dashboard-risk-row i {
  border-radius: 999px;
  background: linear-gradient(180deg, #5c61e8, #25b7c2);
}

.dashboard-risk-row > b {
  color: #263048;
  font-size: 22px;
}

.dashboard-rank-index {
  border-radius: 7px;
  background: #747d94;
}

.dashboard-store-matrix tbody tr:first-child .dashboard-rank-index {
  background: linear-gradient(135deg, #6266ed, #19b7c3);
  box-shadow: 0 5px 12px rgba(86, 91, 222, .22);
}

.dashboard-hot-row i {
  background: linear-gradient(90deg, #6166eb, #17b8c4);
}

.dashboard-donut {
  box-shadow: 0 14px 32px rgba(49, 58, 104, .12);
}

.dashboard-donut > span {
  width: 72px;
  border: 5px solid rgba(255,255,255,.84);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 8px 18px rgba(27,37,72,.1);
}

.dashboard-platform-legend > div {
  border-bottom-color: #edf0f5;
}

@keyframes saas-section-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes saas-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes saas-radar-spin {
  to { transform: rotate(360deg); }
}

@keyframes saas-radar-sweep {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes saas-data-blink {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.35); }
}

@keyframes saas-orbit-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -18px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .view-root:not([data-view="dashboard"]) > *,
  .modal,
  .cloud-status i,
  .dashboard-sync-orbit::before,
  .login-screen::after {
    animation: none !important;
  }
}

/* v42 · 数据底座控制舱 */
.view-root[data-view="database"] {
  background:
    radial-gradient(circle at 82% 2%, rgba(73, 102, 247, .10), transparent 29%),
    radial-gradient(circle at 6% 44%, rgba(21, 198, 171, .07), transparent 25%),
    #f4f7fb;
}

.database-console {
  --db-ink: #17213a;
  --db-muted: #6d7993;
  --db-line: #e1e7f0;
  --db-blue: #4966f7;
  --db-cyan: #17b9d4;
  --db-green: #15aa7a;
  display: grid;
  gap: 18px;
  width: min(100%, 1560px);
  margin: 0 auto;
}

.database-core-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) 210px minmax(240px, .65fr);
  align-items: center;
  min-height: 240px;
  overflow: hidden;
  padding: 30px 32px;
  border: 1px solid rgba(212, 221, 234, .9);
  border-radius: 26px;
  color: var(--db-ink);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .98) 0 46%, rgba(242, 247, 255, .95) 72%, rgba(235, 246, 249, .94) 100%);
  box-shadow: 0 22px 60px rgba(46, 65, 104, .12);
  isolation: isolate;
}

.database-core-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .42;
  background-image:
    linear-gradient(rgba(73, 102, 247, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 102, 247, .055) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent 28%, #000 58%);
}

.database-core-hero::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -210px;
  z-index: -1;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(73, 102, 247, .16);
  border-radius: 50%;
  box-shadow:
    0 0 0 48px rgba(73, 102, 247, .035),
    0 0 0 96px rgba(23, 185, 212, .025);
}

.database-eyebrow,
.database-panel-kicker {
  color: #5b6a88;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.database-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.database-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--db-green);
  box-shadow: 0 0 0 5px rgba(21, 170, 122, .11);
}

.database-core-copy h2 {
  max-width: 620px;
  margin: 14px 0 9px;
  font-size: clamp(28px, 2.7vw, 42px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.database-core-copy > p {
  max-width: 650px;
  margin: 0;
  color: var(--db-muted);
  font-size: 14px;
  line-height: 1.8;
}

.database-core-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.database-core-actions .primary-button {
  min-width: 138px;
  box-shadow: 0 12px 28px rgba(73, 102, 247, .25);
}

.database-health-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  justify-self: center;
  border-radius: 50%;
  background:
    conic-gradient(from -90deg, var(--db-green) calc(var(--database-score) * 1%), rgba(203, 213, 229, .55) 0);
  box-shadow: 0 18px 40px rgba(54, 76, 123, .14);
}

.database-health-orbit::before,
.database-health-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.database-health-orbit::before {
  inset: 8px;
  background: #f7faff;
}

.database-health-orbit::after {
  inset: -18px;
  border: 1px dashed rgba(73, 102, 247, .23);
  animation: database-orbit-spin 16s linear infinite;
}

.database-health-ring {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 28px rgba(73, 102, 247, .06);
}

.database-health-ring strong {
  color: var(--db-ink);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.06em;
}

.database-health-ring span {
  margin-top: 6px;
  color: var(--db-muted);
  font-size: 11px;
  font-weight: 700;
}

.database-orbit-dot {
  position: absolute;
  z-index: 3;
  top: -19px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--db-blue);
  box-shadow: 0 0 0 6px rgba(73, 102, 247, .12);
}

.database-core-status {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
  padding-left: 27px;
  border-left: 1px solid var(--db-line);
}

.database-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(21, 170, 122, .18);
  border-radius: 999px;
  color: #0d855f;
  background: rgba(21, 170, 122, .08);
  font-size: 12px;
  font-weight: 800;
}

.database-status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(21, 170, 122, .10);
}

.database-core-hero.warning .database-status-pill {
  border-color: rgba(224, 157, 44, .2);
  color: #af6b0c;
  background: #fff7e9;
}

.database-core-hero.critical .database-status-pill {
  border-color: rgba(224, 75, 92, .2);
  color: #c53b4c;
  background: #fff0f2;
}

.database-core-status > strong {
  overflow: hidden;
  color: var(--db-ink);
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-core-status > small {
  color: var(--db-muted);
  line-height: 1.6;
}

.database-flow-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--db-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 35px rgba(43, 61, 96, .07);
}

.database-flow-rail article {
  position: relative;
  display: grid;
  grid-template-columns: 28px 12px 1fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 18px 20px;
}

.database-flow-rail article + article {
  border-left: 1px solid var(--db-line);
}

.database-flow-rail article > span {
  color: #9aa6bc;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.database-flow-rail article > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b8c1d1;
  box-shadow: 0 0 0 5px rgba(184, 193, 209, .14);
}

.database-flow-rail article.is-online > i {
  background: var(--db-green);
  box-shadow: 0 0 0 5px rgba(21, 170, 122, .11);
}

.database-flow-rail article.is-warning > i {
  background: #e1a031;
  box-shadow: 0 0 0 5px rgba(225, 160, 49, .11);
}

.database-flow-rail article div {
  display: grid;
  min-width: 0;
}

.database-flow-rail strong {
  color: var(--db-ink);
  font-size: 13px;
}

.database-flow-rail small {
  overflow: hidden;
  margin-top: 3px;
  color: var(--db-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.database-metric-grid article {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 124px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid var(--db-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 12px 32px rgba(43, 61, 96, .065);
}

.database-metric-grid article::after {
  content: "";
  position: absolute;
  top: -34px;
  right: -32px;
  width: 92px;
  height: 92px;
  border: 18px solid rgba(73, 102, 247, .035);
  border-radius: 50%;
}

.database-metric-grid span {
  color: var(--db-muted);
  font-size: 12px;
  font-weight: 700;
}

.database-metric-grid strong {
  color: var(--db-ink);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -.04em;
}

.database-metric-grid small {
  overflow: hidden;
  color: #8b96aa;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, .8fr);
  gap: 16px;
  align-items: start;
}

.database-bento-grid > .panel {
  min-width: 0;
  overflow: hidden;
  border-color: var(--db-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 15px 38px rgba(43, 61, 96, .07);
}

.database-bento-grid .panel-header {
  min-height: 76px;
  padding: 18px 21px;
  border-bottom-color: var(--db-line);
}

.database-bento-grid .panel-header > div {
  display: grid;
  gap: 5px;
}

.database-bento-grid .panel-header h2 {
  margin: 0;
  color: var(--db-ink);
  font-size: 17px;
}

.database-generated-at {
  color: #919caf;
  font-size: 11px;
}

.database-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--db-line);
}

.database-check-grid article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  min-height: 124px;
  padding: 20px;
  background: #fff;
}

.database-check-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #0b8f65;
  background: #e9f9f3;
  font-size: 15px;
  font-weight: 900;
}

.database-check-grid .is-warning .database-check-icon {
  color: #af6b0c;
  background: #fff4df;
}

.database-check-grid .is-fail .database-check-icon {
  color: #c53b4c;
  background: #ffedf0;
}

.database-check-grid article > div {
  display: grid;
  align-content: start;
  min-width: 0;
}

.database-check-grid small {
  color: var(--db-muted);
  font-size: 11px;
}

.database-check-grid strong {
  margin-top: 6px;
  color: var(--db-ink);
  font-size: 14px;
}

.database-check-grid p {
  overflow: hidden;
  margin: 5px 0 0;
  color: #98a2b4;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-backup-list {
  display: grid;
  max-height: 372px;
  overflow: auto;
}

.database-backup-list article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  gap: 11px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--db-line);
}

.database-backup-mark {
  color: var(--db-blue);
  font: 800 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

.database-backup-list article > div {
  display: grid;
  min-width: 0;
}

.database-backup-list article strong {
  overflow: hidden;
  color: var(--db-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-backup-list article small {
  margin-top: 5px;
  color: var(--db-muted);
  font-size: 10px;
}

.database-verified {
  color: #c53b4c;
  font-size: 10px;
  font-weight: 800;
}

.database-verified.is-pass {
  color: #0d8d65;
}

.database-empty-state {
  display: grid;
  place-items: center;
  min-height: 225px;
  padding: 28px;
  text-align: center;
}

.database-empty-state > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 15px;
  border: 1px solid #dbe3f0;
  border-radius: 18px;
  color: var(--db-blue);
  background: #f3f6ff;
  font: 900 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.database-empty-state strong {
  color: var(--db-ink);
  font-size: 14px;
}

.database-empty-state p {
  max-width: 320px;
  margin: 8px auto 0;
  color: var(--db-muted);
  font-size: 11px;
  line-height: 1.7;
}

.database-empty-state.compact {
  min-height: 110px;
}

.database-safety-note {
  margin: 0;
  padding: 12px 18px;
  color: #7d889d;
  background: #f8fafe;
  font-size: 10px;
  line-height: 1.6;
}

.database-index-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  padding: 7px 20px 16px;
}

.database-index-list > div {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid #edf1f6;
}

.database-index-list i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c7cfdd;
}

.database-index-list .is-active i {
  background: var(--db-green);
  box-shadow: 0 0 0 4px rgba(21, 170, 122, .09);
}

.database-index-list .is-missing i {
  background: #e1a031;
}

.database-index-list span {
  overflow: hidden;
  color: #35415b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-index-list small {
  color: #97a1b4;
  font-size: 9px;
}

.database-migration-list {
  display: grid;
}

.database-migration-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 57px;
  padding: 9px 19px;
  border-bottom: 1px solid var(--db-line);
}

.database-migration-list article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #687792;
  background: #f1f4f9;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.database-migration-list article > div {
  display: grid;
  min-width: 0;
}

.database-migration-list strong {
  overflow: hidden;
  color: var(--db-ink);
  font: 700 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-migration-list small {
  margin-top: 4px;
  color: var(--db-muted);
  font-size: 9px;
}

@keyframes database-orbit-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
  .database-core-hero {
    grid-template-columns: minmax(0, 1.4fr) 170px minmax(210px, .6fr);
  }

  .database-health-orbit {
    width: 146px;
    height: 146px;
  }

  .database-bento-grid {
    grid-template-columns: 1fr;
  }

  .database-backup-panel {
    order: 2;
  }
}

@media (max-width: 900px) {
  .database-core-hero {
    grid-template-columns: minmax(0, 1fr) 150px;
  }

  .database-core-status {
    grid-column: 1 / -1;
    padding: 18px 0 0;
    border-top: 1px solid var(--db-line);
    border-left: 0;
  }

  .database-flow-rail,
  .database-metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  .database-flow-rail article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--db-line);
  }

  .database-flow-rail article:nth-child(4) {
    border-top: 1px solid var(--db-line);
  }
}

@media (max-width: 640px) {
  .database-core-hero {
    grid-template-columns: 1fr;
    padding: 23px 20px;
  }

  .database-health-orbit {
    justify-self: start;
    width: 132px;
    height: 132px;
    margin: 8px 0;
  }

  .database-health-ring {
    width: 104px;
    height: 104px;
  }

  .database-health-ring strong {
    font-size: 32px;
  }

  .database-flow-rail,
  .database-metric-grid,
  .database-check-grid,
  .database-index-list {
    grid-template-columns: 1fr;
  }

  .database-flow-rail article + article {
    border-top: 1px solid var(--db-line);
    border-left: 0;
  }

  .database-check-grid article {
    min-height: 0;
  }

  .database-backup-list article {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .database-backup-list article .database-verified {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .database-health-orbit::after {
    animation: none !important;
  }
}

@media (max-width: 1360px) {
  .cloud-status {
    display: none;
  }

  .dashboard-command-strip {
    grid-template-columns: minmax(360px, 1fr) auto 190px;
  }
}

@media (max-width: 1080px) {
  .dashboard-command-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-sync-state {
    display: none;
  }
}

@media (max-width: 980px) {
  .sidebar {
    width: auto;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 167, 255, .15);
    box-shadow: 0 12px 32px rgba(12,18,38,.16);
  }

  .sidebar::before {
    display: none;
  }

  .nav button,
  .nav-sub-item {
    min-height: 38px;
  }

  .nav button.active,
  .nav button:hover,
  .nav-sub-item.active,
  .nav-sub-item:hover {
    transform: none;
  }

  .main {
    margin-left: 0;
  }

  .topbar {
    min-height: auto;
    padding: 13px 16px;
  }

  .view-root {
    padding: 16px;
  }
}

@media (max-width: 760px) {
  .dashboard-command-strip {
    min-height: 0;
    padding: 19px;
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .dashboard-command-copy h2 {
    font-size: 22px;
  }

  .dashboard-data-field {
    opacity: .5;
  }

  .dashboard-kpi {
    min-height: 120px;
  }
}

@media (max-width: 620px) {
  .topbar h1 {
    font-size: 20px;
  }

  .view-root {
    padding: 10px;
    gap: 10px;
  }

  .panel,
  .metric,
  .ops-hero,
  .role-card,
  .result-card,
  .blueprint-card,
  .message-box,
  .restock-mode-switch {
    border-radius: 12px;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .topbar-actions > * {
    width: 100%;
  }
}

/* Showcase-grade layout refinement · v19 */
:root {
  --control-height: 38px;
  --control-height-sm: 34px;
  --radius-card: 14px;
  --radius-control: 9px;
  --page-gutter: 24px;
}

body {
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sidebar {
  width: 236px;
  padding: 18px 13px 15px;
}

.sidebar::before {
  width: 236px;
}

.sidebar > .brand {
  min-height: 50px;
  padding: 0 8px 12px;
}

.sidebar .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.sidebar .brand strong {
  font-size: 16px;
}

.nav {
  gap: 3px;
}

.nav button,
.nav-sub-item {
  min-height: 38px;
  padding-inline: 12px;
  font-size: 13px;
}

.nav-group-toggle {
  min-height: 30px !important;
  margin-top: 4px;
  font-size: 10px !important;
}

.nav-sub {
  margin-bottom: 1px;
}

.nav-sub-item {
  min-height: 35px !important;
}

.main {
  margin-left: 236px;
}

.topbar {
  min-height: 72px;
  padding: 10px var(--page-gutter);
}

.topbar > div:first-child {
  min-width: 150px;
}

.topbar p {
  margin-bottom: 2px;
  font-size: 10px;
}

.topbar h1 {
  font-size: 23px;
  line-height: 1.2;
}

.topbar-actions {
  min-width: 0;
  justify-content: flex-end;
}

.topbar-actions select {
  width: clamp(180px, 22vw, 270px);
  height: var(--control-height);
  padding: 0 34px 0 11px;
}

.user-label {
  max-width: 185px;
  min-height: var(--control-height);
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  white-space: nowrap;
}

.view-root {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 20px var(--page-gutter) 36px;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.view-root > *,
.content-grid > *,
.insight-grid > *,
.dashboard-primary-grid > *,
.dashboard-operations-grid > *,
.dashboard-secondary-grid > * {
  min-width: 0;
  max-width: 100%;
}

.panel,
.metric,
.ops-hero,
.role-card,
.result-card,
.blueprint-card,
.message-box,
.restock-mode-switch {
  border-radius: var(--radius-card);
}

.panel {
  box-shadow: 0 9px 28px rgba(31, 42, 78, .055);
}

.panel:hover {
  box-shadow: 0 13px 36px rgba(31, 42, 78, .075);
}

.panel-header {
  min-height: 58px;
  padding: 13px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,254,.96));
}

.panel-header > div:first-child {
  min-width: 0;
}

.panel-header h2 {
  font-size: 16px;
  line-height: 1.35;
}

.panel-header .hint,
.panel-header .muted,
.dashboard-panel-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
}

.panel-body {
  padding: 16px;
}

.metric-grid,
.metric-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.metric {
  min-height: 94px;
  padding: 14px 16px 13px 18px;
  align-content: space-between;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(31, 42, 78, .05);
}

.metric::before {
  inset: 14px auto 14px 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #686cef, #23b8c4);
}

.metric::after {
  display: none;
}

.metric span {
  font-size: 11px;
  line-height: 1.35;
}

.metric strong {
  font-size: 27px;
  line-height: 1.05;
}

.metric small {
  font-size: 10px;
  line-height: 1.35;
}

.primary-button,
.ghost-button,
.text-button,
.danger-button,
.small-button {
  min-height: var(--control-height);
  padding-inline: 13px;
  border-radius: var(--radius-control);
  font-size: 12px;
  line-height: 1;
}

.small-button {
  min-height: var(--control-height-sm);
  padding-inline: 11px;
}

button:disabled {
  cursor: not-allowed;
  filter: saturate(.5);
  opacity: .5;
  box-shadow: none !important;
  transform: none !important;
}

.toolbar {
  gap: 8px;
}

.toolbar input,
.toolbar select,
.field input,
.field select,
.topbar select,
.pagination-bar select,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="password"],
select {
  height: var(--control-height);
  padding-inline: 10px;
  border-radius: var(--radius-control);
  font-size: 13px;
}

textarea {
  border-radius: var(--radius-control);
  font-size: 13px;
  line-height: 1.6;
}

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

.message-box {
  padding: 13px 15px;
  line-height: 1.65;
}

.badge {
  min-height: 24px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1.2;
}

.table-wrap {
  overflow: auto;
}

th,
td {
  height: 48px;
  padding: 9px 11px;
  vertical-align: middle;
}

th {
  height: 42px;
  color: #667188;
  font-size: 11px;
  font-weight: 750;
}

td {
  font-size: 12px;
  line-height: 1.45;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.product-name-cell {
  line-height: 1.45;
}

.pagination-bar {
  min-height: 54px;
  padding: 10px 14px;
}

/* The three replenishment pages share one clear workspace navigation. */
.restock-mode-switch {
  min-height: 58px;
  margin: 0;
  padding: 9px 12px;
  gap: 7px;
  border-color: #dfe4ef;
  background: rgba(255,255,255,.92);
}

.restock-mode-button {
  min-height: 38px;
  padding: 0 18px;
  border-color: #d8deea;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 720;
}

.restock-mode-button.active {
  border-color: transparent;
  background: linear-gradient(135deg, #6266ed, #5155df);
  box-shadow: 0 8px 18px rgba(81,85,223,.2);
}

.restock-mode-switch > span {
  min-width: 0;
  margin-left: 10px;
  padding-left: 16px;
  overflow: hidden;
  color: #7d879b;
  border-left: 1px solid #e4e8f0;
  font-size: 11px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Manual replenishment: one action per visual row. */
.manual-restock-builder {
  margin: 0;
}

.manual-restock-header {
  min-height: 76px;
  padding: 14px 18px;
}

.manual-restock-header > div:first-child {
  max-width: 600px;
}

.manual-restock-header .hint {
  max-width: 660px;
}

.manual-restock-header .toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 300px) auto;
  align-items: end;
  gap: 10px;
}

.manual-restock-store-field {
  min-width: 0;
}

.manual-restock-store-field > span,
.manual-restock-code-add label > span,
.manual-restock-formbar label > span {
  margin-bottom: 2px;
  color: #6f7990;
  font-size: 11px;
  font-weight: 700;
}

.manual-restock-entry {
  grid-template-columns: minmax(420px, 1fr) auto;
  gap: 9px 16px;
  padding: 16px 18px 14px;
  background: #fff;
}

.manual-restock-code-add {
  grid-template-columns: minmax(240px, 1fr) 116px auto;
  gap: 9px;
}

.manual-restock-import-actions {
  flex-wrap: nowrap;
  gap: 7px;
}

.manual-restock-entry > span {
  padding-top: 2px;
  color: #8992a5;
  font-size: 11px;
}

.manual-restock-formbar {
  grid-template-columns: 190px minmax(260px, 1fr) auto;
  gap: 14px;
  padding: 13px 18px;
  background: #f8f9fc;
}

.manual-restock-formbar > strong {
  min-width: 230px;
  padding: 0 0 9px;
  color: #5156dc;
  font-size: 12px;
  text-align: right;
}

.manual-restock-table .empty {
  min-height: 86px;
  display: grid;
  place-items: center;
  color: #8790a3;
  border: 1px dashed #d8deea;
  border-radius: 10px;
  background: #fbfcfe;
}

.manual-restock-table .table-wrap {
  max-height: 430px;
}

.replenishment-unified-handoff {
  min-height: 74px;
  padding: 15px 18px;
  border-left: 3px solid #6468ec;
}

.replenishment-unified-handoff > div {
  gap: 3px;
}

.replenishment-unified-handoff span {
  font-size: 11px;
}

/* Smart replenishment selection and calculation area. */
.purchase-store-toolbar {
  grid-template-columns: minmax(190px, .8fr) minmax(230px, 1fr) minmax(220px, .85fr) auto;
  gap: 14px;
  padding: 15px 17px;
}

.purchase-store-toolbar > div:first-child {
  align-self: center;
}

.purchase-store-toolbar > div:first-child > strong {
  font-size: 15px;
}

.purchase-store-toolbar label > span,
.purchase-store-current span {
  color: #778197;
  font-size: 11px;
  font-weight: 700;
}

.purchase-store-toolbar select {
  min-height: var(--control-height);
  border-radius: var(--radius-control);
}

.purchase-store-current {
  min-height: 58px;
  padding: 9px 12px;
  border-radius: 10px;
}

.purchase-store-current strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-suggestion-header {
  min-height: 68px;
  gap: 18px;
}

.purchase-suggestion-actions {
  max-width: 650px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.purchase-formula-bar {
  min-height: 44px;
  padding: 9px 16px;
  flex-wrap: wrap;
  gap: 7px 10px;
  background: #f7f9fc;
  font-size: 11px;
}

.purchase-formula-bar strong {
  color: #414b62;
}

.purchase-selection-summary {
  min-height: 44px;
  padding: 11px 15px;
  font-size: 12px;
}

/* Unified orders use stable columns with a strong hierarchy. */
.unified-order-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(150px, 190px) auto;
  gap: 12px;
  padding: 16px 18px;
}

.unified-order-toolbar > div > strong {
  font-size: 15px;
}

.unified-order-toolbar > div > span,
.unified-order-toolbar label > span {
  font-size: 11px;
}

.unified-order-list {
  gap: 16px;
}

.unified-order-card {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(31,42,78,.055);
}

.unified-order-header {
  grid-template-columns: minmax(340px, 1.25fr) minmax(250px, .9fr) auto;
  gap: 16px;
  padding: 15px 18px;
}

.unified-order-identity {
  gap: 10px 18px;
}

.unified-order-identity > div > span,
.unified-supplier-main span {
  font-size: 10px;
  font-weight: 700;
}

.unified-order-identity > div > strong {
  font-size: 13px;
}

.unified-order-progress {
  padding: 13px 18px;
}

.unified-order-progress-step {
  font-size: 11px;
}

.unified-supplier-order {
  padding: 14px 18px;
}

/* Inventory catalogue toolbar is now a real grid, not inline fragments. */
.catalog-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(210px, 1fr) minmax(140px, .65fr) auto auto auto;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(31,42,78,.05);
}

.catalog-filter-bar > select,
.catalog-filter-bar > input {
  width: 100%;
  min-width: 0;
}

.catalog-filter-stat,
.catalog-filter-total {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #778197;
  font-size: 11px;
  white-space: nowrap;
}

.catalog-filter-stat b,
.catalog-filter-total b {
  color: #454bd3;
  font-size: 13px;
}

.tab-row {
  gap: 10px;
}

.tab-card {
  min-height: 58px;
  padding: 10px 16px;
  border-radius: 12px;
}

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

.tab-card span {
  font-size: 11px;
}

.product-catalog-actions {
  min-height: 50px;
  padding: 9px 16px;
  gap: 12px;
  background: #fbfcfe;
}

.store-inventory-panel th,
.store-inventory-panel td {
  height: 46px;
}

/* Order list controls stay on one intentional row. */
.view-root[data-view="orders"] .orders-panel .panel-header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(380px, 470px);
  align-items: center;
}

.view-root[data-view="orders"] .orders-panel .panel-header .toolbar {
  display: grid;
  grid-template-columns: 145px minmax(220px, 1fr);
}

.view-root[data-view="orders"] .orders-panel .panel-header .toolbar input {
  width: 100%;
}

.orders-panel td:last-child .row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.orders-panel td:last-child button {
  width: 100%;
  min-height: 30px;
  padding-inline: 5px;
  font-size: 10px;
}

/* User and permission management is presentation-ready without dense walls of text. */
.view-root[data-view="settings"] > .message-box {
  min-height: 46px;
  display: flex;
  align-items: center;
  color: #536079;
  border-left: 3px solid #666aeb;
  background: rgba(255,255,255,.92);
}

.view-root[data-view="settings"] .content-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr);
  gap: 16px;
}

.view-root[data-view="settings"] .role-list {
  gap: 11px;
}

.view-root[data-view="settings"] .role-card {
  padding: 13px 14px;
  gap: 8px;
  border-color: #e1e6ef;
  background: #fbfcff;
  box-shadow: none;
}

.view-root[data-view="settings"] .role-card > span {
  max-height: 3.2em;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.6;
}

.role-card-actions {
  padding-top: 9px;
}

/* Existing shelf workspace keeps its proven compact interaction density. */
.view-root[data-view="shelfGuide"] {
  padding: 12px 16px 24px;
  gap: 8px;
}

.view-root[data-view="shelfGuide"] .small-button {
  min-height: 30px;
  padding-inline: 9px;
  font-size: 11px;
}

.view-root[data-view="shelfGuide"] input,
.view-root[data-view="shelfGuide"] select {
  height: 34px;
}

/* Dashboard composition: actions and health occupy explicit regions. */
@media (max-width: 1500px) and (min-width: 1081px) {
  .dashboard-command-strip {
    grid-template-columns: minmax(0, 1fr) 210px;
    grid-template-rows: auto auto;
    gap: 12px 20px;
    min-height: 158px;
  }

  .dashboard-command-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-command-actions {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    justify-content: flex-start;
  }

  .dashboard-sync-state {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

.dashboard-kpi {
  min-height: 126px;
  padding: 14px 15px;
}

.dashboard-kpi > strong {
  font-size: 28px;
}

.dashboard-trend-body,
.dashboard-fulfillment-body {
  min-height: 292px;
}

.dashboard-pipeline-stage {
  min-height: 86px;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.dashboard-pipeline-stage > span {
  width: 20px;
  height: 20px;
}

.dashboard-pipeline-stage div {
  width: 100%;
  justify-items: center;
}

.dashboard-pipeline-stage em {
  white-space: normal;
}

.dashboard-pipeline-stage i {
  width: 100% !important;
  max-width: 46px;
}

@media (max-width: 1280px) {
  :root {
    --page-gutter: 18px;
  }

  .topbar-actions .user-label {
    display: none;
  }

}

@media (max-width: 1120px) {
  .manual-restock-header {
    align-items: stretch;
    flex-direction: column;
  }

  .manual-restock-header .toolbar {
    width: 100%;
  }

  .manual-restock-entry {
    grid-template-columns: 1fr;
  }

  .manual-restock-import-actions {
    justify-content: flex-start;
  }

  .purchase-store-toolbar,
  .catalog-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-export-main {
    grid-column: auto;
    justify-self: stretch;
  }

  .view-root[data-view="settings"] .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .main {
    margin-left: 0;
  }

  .sidebar {
    width: auto;
  }
}

@media (max-width: 760px) {
  :root {
    --page-gutter: 12px;
  }

  .restock-mode-switch {
    align-items: stretch;
    flex-direction: column;
  }

  .restock-mode-switch > span {
    margin: 3px 0 0;
    padding: 9px 3px 0;
    border-top: 1px solid #e4e8f0;
    border-left: 0;
    white-space: normal;
  }

  .manual-restock-header .toolbar,
  .manual-restock-code-add,
  .manual-restock-formbar,
  .purchase-store-toolbar,
  .catalog-filter-bar,
  .view-root[data-view="orders"] .orders-panel .panel-header,
  .view-root[data-view="orders"] .orders-panel .panel-header .toolbar {
    grid-template-columns: 1fr;
  }

  .manual-restock-formbar > strong {
    min-width: 0;
    padding-bottom: 0;
    text-align: left;
  }

  .purchase-suggestion-header {
    align-items: stretch;
    flex-direction: column;
  }

  .purchase-suggestion-actions {
    max-width: none;
    justify-content: flex-start;
  }
}

/* Signature Bento presentation system · v20 */
:root {
  --bento-radius: 22px;
  --bento-gap: 16px;
  --bento-shadow: 0 18px 46px rgba(33, 43, 79, .08);
}

.view-root:not([data-view="shelfGuide"]) {
  gap: var(--bento-gap);
}

.view-root:not([data-view="shelfGuide"]) > .panel,
.view-root:not([data-view="shelfGuide"]) > .message-box,
.view-root:not([data-view="shelfGuide"]) > .restock-mode-switch,
.view-root:not([data-view="shelfGuide"]) > .content-grid > .panel {
  border-radius: var(--bento-radius);
}

.view-root:not([data-view="shelfGuide"]) .metric {
  border-radius: 18px;
}

.view-root:not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4n + 1) {
  background: linear-gradient(145deg, #f7f7ff, #eef0ff);
  border-color: #e1e3ff;
}

.view-root:not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4n + 2) {
  background: linear-gradient(145deg, #f5fcff, #eaf9fb);
  border-color: #d9f1f4;
}

.view-root:not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4n + 3) {
  background: linear-gradient(145deg, #fffaf3, #fff3e2);
  border-color: #f7e8ce;
}

.view-root:not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4n) {
  background: linear-gradient(145deg, #f8f5ff, #f1eafe);
  border-color: #e8ddfb;
}

.view-root:not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4n + 2)::before {
  background: linear-gradient(180deg, #14b8c4, #3bd6c5);
}

.view-root:not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4n + 3)::before {
  background: linear-gradient(180deg, #f0a225, #ffcb68);
}

.view-root:not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4n)::before {
  background: linear-gradient(180deg, #8b5cf6, #b579f5);
}

.view-root:not([data-view="shelfGuide"]) .panel,
.view-root:not([data-view="shelfGuide"]) .metric,
.view-root:not([data-view="shelfGuide"]) .restock-mode-switch,
.view-root:not([data-view="shelfGuide"]) .message-box {
  box-shadow: var(--bento-shadow);
}

.dashboard-bento-lead {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(300px, .85fr);
  gap: var(--bento-gap);
}

.dashboard-bento-lead .dashboard-command-strip {
  min-width: 0;
  min-height: 306px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 75% 22%, rgba(121, 128, 255, .3), transparent 26%),
    radial-gradient(circle at 92% 82%, rgba(20, 212, 199, .22), transparent 27%),
    linear-gradient(130deg, #121a38 0%, #182454 56%, #0b3542 100%);
  box-shadow: 0 28px 66px rgba(16, 25, 58, .22);
}

.dashboard-bento-lead .dashboard-command-copy {
  max-width: 620px;
}

.dashboard-bento-lead .dashboard-command-copy h2 {
  max-width: 620px;
  margin: 20px 0 10px;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.18;
  letter-spacing: -1.1px;
}

.dashboard-bento-lead .dashboard-command-copy p {
  max-width: 560px;
  color: #a8b5d0;
  font-size: 13px;
}

.dashboard-bento-lead .dashboard-command-actions {
  max-width: none;
  justify-content: flex-start;
}

.dashboard-bento-lead .dashboard-command-actions .small-button {
  min-height: 40px;
  padding-inline: 15px;
}

.dashboard-bento-lead .dashboard-data-field::before {
  right: 6%;
  width: 310px;
  height: 310px;
}

.dashboard-bento-lead .dashboard-data-field::after {
  right: 12%;
  width: 176px;
  height: 176px;
}

.dashboard-bento-focus {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--bento-gap);
}

.dashboard-focus-card {
  position: relative;
  min-width: 0;
  min-height: 145px;
  padding: 17px 18px;
  overflow: hidden;
  color: #1e2940;
  text-align: left;
  border: 1px solid rgba(218, 224, 239, .88);
  border-radius: 24px;
  box-shadow: var(--bento-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}

.dashboard-focus-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(33,43,79,.13);
}

.dashboard-focus-card.inventory {
  background:
    radial-gradient(circle at 100% 0, rgba(118, 123, 244, .2), transparent 36%),
    linear-gradient(145deg, #f7f6ff, #ececff);
}

.dashboard-focus-card.supply {
  background:
    radial-gradient(circle at 100% 0, rgba(65, 212, 189, .2), transparent 38%),
    linear-gradient(145deg, #f3fffb, #e5f8f4);
}

.dashboard-focus-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-focus-card header > span {
  font-size: 13px;
  font-weight: 800;
}

.dashboard-focus-card header > em {
  overflow: hidden;
  color: #778199;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-focus-inventory {
  margin-top: 11px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.dashboard-health-ring {
  --health-color: #6166eb;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--health-color) calc(var(--health-score) * 1%),
    rgba(103, 108, 198, .14) 0
  );
  box-shadow: 0 10px 24px rgba(83, 88, 210, .18);
}

.dashboard-health-ring > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: rgba(255,255,255,.93);
}

.dashboard-health-ring strong,
.dashboard-health-ring small {
  display: block;
}

.dashboard-health-ring strong {
  font-size: 17px;
}

.dashboard-health-ring small {
  color: #8790a5;
  font-size: 8px;
}

.dashboard-focus-inventory > div:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.dashboard-focus-inventory > div:last-child strong {
  font-size: 24px;
  line-height: 1;
}

.dashboard-focus-inventory > div:last-child span {
  color: #556077;
  font-size: 10px;
  font-weight: 700;
}

.dashboard-focus-inventory > div:last-child small {
  margin-top: 3px;
  overflow: hidden;
  color: #8a93a6;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-focus-supply {
  position: relative;
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-focus-supply > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.dashboard-focus-supply strong {
  font-size: 25px;
  line-height: 1;
}

.dashboard-focus-supply span {
  color: #587269;
  font-size: 10px;
  font-weight: 700;
}

.dashboard-focus-supply i {
  position: absolute;
  right: -28px;
  bottom: -30px;
  width: 88px;
  height: 88px;
  border: 16px solid rgba(37, 179, 158, .08);
  border-radius: 50%;
}

.dashboard-focus-card.supply > small {
  margin-top: 10px;
  display: block;
  color: #7f938d;
  font-size: 8px;
}

.view-root[data-view="dashboard"] .dashboard-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bento-gap);
}

.view-root[data-view="dashboard"] .dashboard-kpi {
  min-height: 136px;
  padding: 16px 17px;
  border: 0;
  border-radius: 22px;
  box-shadow: var(--bento-shadow);
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(1) {
  background: linear-gradient(145deg, #ffffff, #eff3ff);
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(2) {
  background: linear-gradient(145deg, #f0fbff, #e1f7fa);
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(3) {
  background: linear-gradient(145deg, #fff9ed, #fff0d7);
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(4) {
  background: linear-gradient(145deg, #faf5ff, #efe6ff);
}

.view-root[data-view="dashboard"] .dashboard-kpi::before {
  inset: auto 17px 13px 17px;
  width: auto;
  height: 3px;
  border-radius: 999px;
  opacity: .8;
}

.view-root[data-view="dashboard"] .dashboard-kpi > strong {
  font-size: 30px;
}

.view-root[data-view="dashboard"] .panel {
  border: 0;
  border-radius: 24px;
  box-shadow: var(--bento-shadow);
}

.view-root[data-view="dashboard"] .panel:hover {
  box-shadow: 0 24px 54px rgba(33,43,79,.11);
}

.view-root[data-view="dashboard"] .panel-header {
  min-height: 68px;
  padding: 15px 18px;
  border-bottom-color: rgba(221, 227, 239, .7);
  background: transparent;
}

.dashboard-primary-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(370px, .9fr);
  gap: var(--bento-gap);
}

.dashboard-operations-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .7fr);
  gap: var(--bento-gap);
}

.dashboard-secondary-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr) minmax(0, 1.05fr);
  gap: var(--bento-gap);
}

.dashboard-trend-panel {
  background:
    linear-gradient(180deg, #fff, #f8f9ff);
}

.dashboard-fulfillment-panel {
  background:
    radial-gradient(circle at 100% 0, rgba(96, 104, 236, .12), transparent 32%),
    linear-gradient(145deg, #f7f8ff, #edf0ff);
}

.dashboard-fulfillment-panel .dashboard-fulfillment-summary span {
  background: rgba(255,255,255,.56);
}

.dashboard-risk-panel {
  color: #eaf0ff;
  background:
    radial-gradient(circle at 90% 12%, rgba(102, 112, 255, .25), transparent 30%),
    linear-gradient(145deg, #151d39, #101a34);
}

.dashboard-risk-panel .panel-header {
  border-bottom-color: rgba(255,255,255,.09);
}

.dashboard-risk-panel .panel-header h2 {
  color: #f7f9ff;
}

.dashboard-risk-panel .dashboard-panel-sub {
  color: #8f9bb6;
}

.dashboard-risk-panel .dashboard-risk-row {
  color: #e8eeff;
  border-bottom-color: rgba(255,255,255,.08);
  background: transparent;
}

.dashboard-risk-panel .dashboard-risk-row:hover {
  background: rgba(255,255,255,.06);
}

.dashboard-risk-panel .dashboard-risk-row em {
  color: #8e9ab4;
}

.dashboard-risk-panel .dashboard-risk-row > b {
  color: #fff;
}

.dashboard-hot-panel {
  background: linear-gradient(145deg, #fffaf1, #fff3de);
}

.dashboard-platform-panel {
  background: linear-gradient(145deg, #f7f3ff, #eee7ff);
}

.dashboard-movement-panel {
  background: linear-gradient(145deg, #f3fcfb, #e9f8f6);
}

.dashboard-hot-panel .panel-header,
.dashboard-platform-panel .panel-header,
.dashboard-movement-panel .panel-header {
  border-bottom-color: rgba(88, 98, 130, .09);
}

.restock-mode-switch {
  border: 0;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,248,255,.96));
}

.manual-restock-builder,
.purchase-store-toolbar,
.purchase-suggestion-panel,
.unified-order-toolbar,
.replenishment-unified-handoff,
.catalog-filter-bar,
.tab-card,
.view-root[data-view="settings"] > .message-box {
  border-radius: 20px;
}

.manual-restock-builder,
.purchase-suggestion-panel,
.unified-order-card,
.store-inventory-panel,
.orders-panel,
.view-root[data-view="settings"] .content-grid > .panel {
  box-shadow: var(--bento-shadow);
}

.purchase-store-toolbar {
  border: 0;
  background:
    radial-gradient(circle at 100% 0, rgba(96,102,235,.1), transparent 28%),
    linear-gradient(145deg, #fff, #f6f7ff);
  box-shadow: var(--bento-shadow);
}

.unified-order-toolbar {
  border: 0;
  background:
    radial-gradient(circle at 100% 0, rgba(31,190,195,.1), transparent 28%),
    linear-gradient(145deg, #fff, #f3fbfb);
  box-shadow: var(--bento-shadow);
}

.catalog-filter-bar {
  border: 0;
  background:
    radial-gradient(circle at 100% 0, rgba(91,95,233,.09), transparent 24%),
    linear-gradient(145deg, #fff, #f7f8ff);
  box-shadow: var(--bento-shadow);
}

.tab-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: var(--bento-gap);
}

.tab-card {
  border: 0;
  background: linear-gradient(145deg, #fff, #f6f7fc);
  box-shadow: var(--bento-shadow);
}

.tab-card.active {
  color: #3439c8;
  background:
    radial-gradient(circle at 100% 0, rgba(99,104,237,.14), transparent 38%),
    linear-gradient(145deg, #f8f7ff, #ebeaff);
  box-shadow: inset 0 0 0 1px #bfc2ff, var(--bento-shadow);
}

.view-root[data-view="settings"] .content-grid {
  gap: var(--bento-gap);
}

.view-root[data-view="settings"] .content-grid > .panel:first-child table {
  min-width: 620px;
  table-layout: fixed;
}

.view-root[data-view="settings"] .content-grid > .panel:first-child th,
.view-root[data-view="settings"] .content-grid > .panel:first-child td {
  overflow: hidden;
  padding-inline: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-root[data-view="settings"] .content-grid > .panel:first-child th:nth-child(1) { width: 70px; }
.view-root[data-view="settings"] .content-grid > .panel:first-child th:nth-child(2) { width: 110px; }
.view-root[data-view="settings"] .content-grid > .panel:first-child th:nth-child(3) { width: 82px; }
.view-root[data-view="settings"] .content-grid > .panel:first-child th:nth-child(4) { width: 125px; }
.view-root[data-view="settings"] .content-grid > .panel:first-child th:nth-child(5) { width: 62px; }
.view-root[data-view="settings"] .content-grid > .panel:first-child th:nth-child(6) { width: 105px; }
.view-root[data-view="settings"] .content-grid > .panel:first-child th:nth-child(7) { width: 66px; }

@media (max-width: 1180px) {
  .dashboard-bento-lead {
    grid-template-columns: 1fr;
  }

  .dashboard-bento-focus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .view-root[data-view="dashboard"] .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-primary-grid,
  .dashboard-operations-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-movement-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .dashboard-bento-lead .dashboard-command-strip {
    min-height: 330px;
    padding: 22px;
  }

  .dashboard-bento-lead .dashboard-command-copy h2 {
    font-size: 28px;
  }

  .dashboard-bento-focus,
  .view-root[data-view="dashboard"] .dashboard-kpi-grid,
  .dashboard-secondary-grid,
  .tab-row {
    grid-template-columns: 1fr;
  }

  .dashboard-movement-panel {
    grid-column: auto;
  }
}

/* Navigation typography and spacing refinement · v21 */
@media (min-width: 981px) {
  .sidebar {
    width: 252px;
    padding: 18px 14px 15px;
  }

  .sidebar::before {
    width: 252px;
  }

  .main {
    margin-left: 252px;
  }
}

.sidebar > .brand {
  min-height: 54px;
  padding: 0 8px 13px;
}

.sidebar .brand strong {
  font-size: 18px;
  font-weight: 780;
  letter-spacing: .25px;
}

.sidebar .brand small {
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 1.25px;
}

.nav {
  gap: 4px;
}

.nav > button {
  min-height: 44px;
  padding-inline: 13px;
  font-size: 15px;
  font-weight: 630;
  line-height: 1.25;
  letter-spacing: .08px;
}

.nav-group-toggle {
  min-height: 44px !important;
  margin-top: 2px;
  padding-inline: 13px !important;
  color: #94a0bb !important;
  font-size: 15px !important;
  font-weight: 630;
  line-height: 1.25;
  letter-spacing: .08px;
}

.nav-group-arrow {
  font-size: 11px;
}

.nav-sub {
  margin: 1px 0 3px 8px;
  padding-left: 9px;
  gap: 2px;
}

.nav .nav-sub-item {
  min-height: 42px !important;
  padding-inline: 12px;
  font-size: 14px;
  font-weight: 570;
  line-height: 1.25;
  letter-spacing: .04px;
}

.nav > button::before,
.nav-sub-item::before {
  width: 6px;
  height: 6px;
  margin-right: 10px;
}

.nav button.active,
.nav-sub-item.active {
  font-weight: 720;
}

.sidebar-footer {
  padding-top: 15px;
  font-size: 11px;
}

@media (max-width: 980px) {
  .nav > button {
    min-height: 40px;
    font-size: 13.5px;
  }

  .nav-group-toggle {
    min-height: 40px !important;
    font-size: 13.5px !important;
  }

  .nav .nav-sub-item {
    min-height: 38px !important;
    font-size: 13px;
  }
}

/* Premium navigation system · v23 */
@media (min-width: 981px) {
  .sidebar {
    width: 268px;
    padding: 18px 14px 14px;
  }

  .sidebar::before {
    width: 268px;
  }

  .main {
    margin-left: 268px;
  }
}

.sidebar {
  gap: 10px;
  border-right-color: rgba(133, 148, 220, .14);
  background:
    radial-gradient(circle at 12% 5%, rgba(111, 104, 255, .24), transparent 22%),
    radial-gradient(circle at 88% 88%, rgba(21, 191, 190, .11), transparent 23%),
    linear-gradient(180deg, #10162d 0%, #0b1123 48%, #08111f 100%);
  box-shadow: 20px 0 54px rgba(12, 18, 42, .15);
}

.sidebar::before {
  opacity: .1;
  background-size: 32px 32px;
}

.sidebar > .brand {
  min-height: 58px;
  margin: 0 3px 4px;
  padding: 0 7px 15px;
  gap: 11px;
  border-bottom-color: rgba(255,255,255,.1);
}

.sidebar .brand-mark {
  width: 42px;
  height: 42px;
  border-color: rgba(182, 187, 255, .55);
  border-radius: 13px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(126, 109, 255, .98), rgba(82, 80, 228, .98));
  box-shadow:
    0 10px 24px rgba(66, 58, 220, .36),
    inset 0 1px rgba(255,255,255,.28);
}

.sidebar .brand strong {
  font-size: 18px;
  font-weight: 780;
  letter-spacing: .2px;
}

.sidebar .brand small {
  margin-top: 2px;
  color: #7e8aa6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.nav {
  gap: 2px;
  padding: 0 2px 10px;
}

.nav-section-label {
  margin: 13px 11px 6px;
  display: block;
  color: #606c87;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.6px;
}

.nav-section-label:first-child {
  margin-top: 3px;
}

.nav > button,
.nav .nav-group-toggle {
  min-height: 48px !important;
  margin: 0;
  padding: 6px 10px !important;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #a7b1c8 !important;
  font-size: 15px !important;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  transform: none;
}

.nav > button::before,
.nav .nav-group-toggle::before {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin: 0;
  display: grid;
  place-items: center;
  color: #8f9bb6;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
  border: 1px solid rgba(153, 167, 205, .12);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  opacity: 1;
  content: attr(data-icon);
}

.nav > button:hover,
.nav .nav-group-toggle:hover {
  color: #f7f9ff !important;
  border-color: rgba(142, 151, 225, .12) !important;
  background: linear-gradient(90deg, rgba(105, 108, 226, .13), rgba(37, 171, 184, .04)) !important;
  transform: none !important;
}

.nav > button:hover::before,
.nav .nav-group-toggle:hover::before {
  color: #dfe3ff;
  border-color: rgba(157, 164, 236, .2);
  background: rgba(117, 120, 229, .12);
}

.nav > button.active {
  color: #fff !important;
  border-color: rgba(143, 149, 255, .3);
  background:
    radial-gradient(circle at 92% 18%, rgba(65, 225, 216, .13), transparent 34%),
    linear-gradient(95deg, rgba(102, 96, 238, .34), rgba(75, 83, 181, .15));
  box-shadow:
    inset 1px 0 rgba(183, 186, 255, .75),
    0 10px 24px rgba(3, 7, 27, .2);
}

.nav > button.active::before {
  color: #fff;
  border-color: rgba(181, 184, 255, .48);
  background: linear-gradient(145deg, #7772f4, #5158dc);
  box-shadow: 0 7px 16px rgba(66, 67, 210, .34);
}

.nav > button.active::after {
  right: 13px;
  width: 6px;
  height: 6px;
  background: #54e1d6;
  box-shadow: 0 0 12px rgba(84, 225, 214, .88);
}

.nav .nav-group-toggle[aria-expanded="true"],
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle {
  color: #f6f8ff !important;
  border-color: rgba(133, 144, 220, .12);
  background: linear-gradient(90deg, rgba(91, 99, 203, .12), rgba(31, 161, 173, .035));
}

.nav .nav-group-toggle[aria-expanded="true"]::before,
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle::before {
  color: #dfe3ff;
  border-color: rgba(150, 158, 235, .22);
  background: rgba(107, 110, 225, .14);
}

.nav-group-arrow {
  width: 18px;
  margin-left: auto;
  color: #69758f;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  transition: color .18s ease, transform .18s ease;
}

.nav-group-toggle[aria-expanded="false"] .nav-group-arrow {
  transform: rotate(-90deg);
}

.nav-group-toggle[aria-expanded="true"] .nav-group-arrow {
  color: #b9c1d7;
}

.nav-sub {
  margin: 3px 8px 7px 25px;
  padding: 2px 0 3px 17px;
  gap: 1px;
  border-left: 1px solid rgba(126, 139, 184, .22);
}

.nav .nav-sub-item {
  min-height: 36px !important;
  padding: 5px 10px !important;
  color: #8995ae;
  font-size: 13px;
  font-weight: 570;
  line-height: 1.25;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
}

.nav .nav-sub-item::before {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  margin-right: 9px;
  background: #55617a;
  box-shadow: none;
  opacity: 1;
}

.nav .nav-sub-item:hover {
  color: #eef1fb;
  border-color: rgba(131, 143, 190, .1);
  background: rgba(255,255,255,.045);
  transform: none;
}

.nav .nav-sub-item.active {
  color: #fff;
  font-weight: 680;
  border-color: rgba(105, 208, 205, .14);
  background: linear-gradient(90deg, rgba(69, 191, 189, .14), rgba(90, 96, 206, .08));
  box-shadow: none;
  transform: none;
}

.nav .nav-sub-item.active::before {
  background: #50ddd0;
  box-shadow: 0 0 8px rgba(80, 221, 208, .8);
}

.nav .nav-sub-item.active::after {
  display: none;
}

.sidebar-footer {
  margin: 4px 2px 0;
  padding: 11px 12px;
  border: 1px solid rgba(143, 155, 204, .11);
  border-radius: 12px;
  color: #65718b;
  font-size: 9.5px;
  background: rgba(255,255,255,.025);
}

.sidebar-footer strong {
  color: #5be0c1;
  font-size: 10px;
}

@media (max-width: 980px) {
  .nav-section-label {
    grid-column: 1 / -1;
    margin: 8px 4px 4px;
  }

  .nav > button {
    min-height: 44px !important;
    justify-content: flex-start;
    padding-inline: 8px !important;
    font-size: 13px !important;
  }

  .nav > button::before {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 8px;
    font-size: 10px;
  }

  .nav .nav-sub-item {
    min-height: 40px !important;
    padding-inline: 8px !important;
    font-size: 12.5px;
  }
}

/* Precision navigation system · v24 */
@media (min-width: 981px) {
  .sidebar {
    width: 252px;
    padding: 18px 14px 14px;
  }

  .sidebar::before {
    width: 252px;
  }

  .main {
    margin-left: 252px;
  }
}

.sidebar {
  gap: 12px;
  border-right-color: rgba(129, 142, 190, .13);
  background:
    radial-gradient(circle at 18% -2%, rgba(94, 88, 210, .17), transparent 24%),
    linear-gradient(180deg, #10152a 0%, #0b1020 52%, #09101d 100%);
  box-shadow: 16px 0 44px rgba(15, 21, 45, .13);
}

.sidebar::before {
  opacity: .055;
  background-size: 36px 36px;
}

.sidebar > .brand {
  min-height: 56px;
  margin: 0 4px 2px;
  padding: 0 6px 15px;
  gap: 11px;
}

.sidebar .brand-mark {
  width: 40px;
  height: 40px;
  border-color: rgba(163, 168, 236, .38);
  border-radius: 12px;
  background: linear-gradient(145deg, #6763df, #4e55c5);
  box-shadow:
    0 8px 20px rgba(51, 52, 161, .28),
    inset 0 1px rgba(255,255,255,.24);
}

.sidebar .brand strong {
  font-size: 17px;
  font-weight: 760;
  letter-spacing: .2px;
}

.sidebar .brand small {
  color: #737e98;
  font-size: 8.5px;
  letter-spacing: 1.35px;
}

.nav {
  gap: 1px;
  padding: 0 1px 8px;
}

.nav-section-label {
  margin: 14px 12px 6px;
  color: #7d88a1;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: .7px;
}

.nav-section-label:first-child {
  margin-top: 2px;
}

.nav > button,
.nav .nav-group-toggle {
  min-height: 42px !important;
  margin: 0;
  padding: 0 12px !important;
  gap: 11px;
  color: #9aa5bc !important;
  font-size: 14px !important;
  font-weight: 620;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.nav > button::before,
.nav .nav-group-toggle::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin: 0;
  border: 1px solid #56617a;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  content: "";
}

.nav > button:hover,
.nav .nav-group-toggle:hover {
  color: #edf0f8 !important;
  border-color: transparent !important;
  background: rgba(255,255,255,.035) !important;
  transform: none !important;
}

.nav > button:hover::before,
.nav .nav-group-toggle:hover::before {
  border-color: #8d99ba;
  background: #8d99ba;
  box-shadow: none;
}

.nav > button.active {
  color: #fff !important;
  border-color: rgba(135, 142, 225, .16);
  background: linear-gradient(90deg, rgba(101, 98, 215, .19), rgba(85, 93, 180, .075));
  box-shadow: inset 2px 0 #8588ee;
}

.nav > button.active::before {
  border-color: #73d8d1;
  background: #73d8d1;
  box-shadow: 0 0 8px rgba(115, 216, 209, .55);
}

.nav > button.active::after {
  display: none;
}

.nav .nav-group-toggle[aria-expanded="true"],
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle {
  color: #f2f4fa !important;
  border-color: transparent;
  background: rgba(255,255,255,.025);
}

.nav .nav-group-toggle[aria-expanded="true"]::before,
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle::before {
  border-color: #8186e4;
  background: #8186e4;
  box-shadow: 0 0 7px rgba(129, 134, 228, .35);
}

.nav-group-arrow {
  width: 16px;
  margin-left: auto;
  color: #68738c;
  font-size: 15px;
}

.nav-sub {
  margin: 1px 3px 6px 15px;
  padding: 2px 0 3px 17px;
  gap: 0;
  border-left: 1px solid rgba(121, 133, 175, .2);
}

.nav .nav-sub-item {
  min-height: 35px !important;
  padding: 4px 11px !important;
  color: #7f8aa2;
  font-size: 13px;
  font-weight: 540;
  line-height: 1.25;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.nav .nav-sub-item::before {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  margin-right: 9px;
  background: #4f5a72;
  box-shadow: none;
}

.nav .nav-sub-item:hover {
  color: #e8ebf3;
  border: 0;
  background: rgba(255,255,255,.03);
}

.nav .nav-sub-item.active {
  color: #f6f8ff;
  font-weight: 650;
  border: 0;
  background: rgba(105, 111, 211, .095);
  box-shadow: none;
}

.nav .nav-sub-item.active::before {
  background: #6bd5cc;
  box-shadow: 0 0 7px rgba(107, 213, 204, .58);
}

.sidebar-footer {
  margin: 3px 3px 0;
  padding: 10px 11px;
  border-color: rgba(127, 139, 180, .1);
  border-radius: 10px;
  color: #626d84;
  font-size: 9px;
  background: rgba(255,255,255,.018);
}

.sidebar-footer strong {
  color: #58d8b9;
  font-size: 9.5px;
}

@media (max-width: 980px) {
  .nav > button {
    min-height: 40px !important;
    justify-content: flex-start;
    padding-inline: 9px !important;
    font-size: 13px !important;
  }

  .nav > button::before {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
  }

  .nav .nav-sub-item {
    min-height: 38px !important;
    font-size: 12.5px;
  }
}

/* Alabaster navigation system · v26 */
@media (min-width: 981px) {
  .sidebar {
    width: 256px;
    padding: 18px 14px 14px;
  }

  .sidebar::before {
    width: 256px;
  }

  .main {
    margin-left: 256px;
  }
}

.sidebar {
  gap: 12px;
  color: #222941;
  border-right: 1px solid #e4e7f0;
  background:
    radial-gradient(circle at 15% 0, rgba(102, 96, 220, .095), transparent 25%),
    linear-gradient(180deg, #fbfbfe 0%, #f7f8fc 54%, #f3f5fa 100%);
  box-shadow: 14px 0 42px rgba(40, 46, 78, .055);
}

.sidebar::before {
  opacity: .18;
  background-image:
    linear-gradient(rgba(111, 120, 160, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 120, 160, .045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 38%);
}

.sidebar > .brand {
  min-height: 58px;
  margin: 0 4px 3px;
  padding: 0 6px 16px;
  border-bottom: 1px solid #e2e5ef;
}

.sidebar .brand-mark {
  width: 40px;
  height: 40px;
  color: #fff;
  border: 1px solid rgba(82, 78, 191, .26);
  border-radius: 12px;
  background: linear-gradient(145deg, #716de3, #5057c9);
  box-shadow:
    0 9px 22px rgba(72, 69, 185, .23),
    inset 0 1px rgba(255,255,255,.26);
}

.sidebar .brand strong {
  color: #20263d;
  font-size: 17px;
  font-weight: 780;
}

.sidebar .brand small {
  color: #8b93a6;
  font-size: 8.5px;
  font-weight: 720;
  letter-spacing: 1.25px;
}

.nav {
  gap: 1px;
  padding: 0 1px 8px;
}

.nav-section-label {
  margin: 15px 12px 7px;
  color: #9098aa;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: .55px;
}

.nav-section-label:first-child {
  margin-top: 2px;
}

.nav > button,
.nav .nav-group-toggle {
  min-height: 44px !important;
  margin: 0;
  padding: 0 11px !important;
  gap: 11px;
  color: #566078 !important;
  font-size: 14px !important;
  font-weight: 640;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.nav > button::before,
.nav .nav-group-toggle::before {
  display: none;
}

.nav-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  color: #7c869e;
  box-sizing: border-box;
}

.nav-icon::before,
.nav-icon::after {
  position: absolute;
  box-sizing: border-box;
  content: "";
}

.icon-dashboard {
  border: 1.5px solid currentColor;
  border-radius: 5px;
}

.icon-dashboard::before {
  inset: 4px;
  border-radius: 2px;
  background:
    radial-gradient(circle, currentColor 0 1.2px, transparent 1.4px) 0 0 / 6px 6px;
}

.icon-product::before {
  inset: 3px 2px 2px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
}

.icon-product::after {
  top: 1px;
  left: 6px;
  width: 6px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.icon-inventory::before {
  left: 2px;
  bottom: 2px;
  width: 3px;
  height: 9px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 5px -4px 0 currentColor, 10px -1px 0 currentColor;
}

.icon-sync::before {
  top: 4px;
  left: 2px;
  width: 13px;
  height: 10px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.icon-sync::after {
  top: 2px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.icon-order::before {
  inset: 2px 3px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor, currentColor) 4px 4px / 6px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 8px / 6px 1.5px no-repeat;
}

.icon-service::before {
  inset: 2px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.icon-service::after {
  right: 1px;
  bottom: 1px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  transform: rotate(42deg);
}

.icon-insight::before {
  left: 2px;
  bottom: 2px;
  width: 3px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 5px -4px 0 currentColor, 10px -8px 0 currentColor;
}

.icon-insight::after {
  right: 1px;
  bottom: 1px;
  width: 15px;
  height: 15px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0 0 3px;
}

.icon-ai::before {
  top: 1px;
  left: 8px;
  width: 2px;
  height: 16px;
  border-radius: 99px;
  background: currentColor;
}

.icon-ai::after {
  top: 8px;
  left: 1px;
  width: 16px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  transform: rotate(45deg);
}

.icon-governance::before {
  inset: 2px 3px;
  border: 1.5px solid currentColor;
  border-radius: 5px 5px 8px 8px;
}

.icon-governance::after {
  top: 6px;
  left: 7px;
  width: 4px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(42deg);
}

.nav > button:hover,
.nav .nav-group-toggle:hover {
  color: #303852 !important;
  border-color: #e8eaf2 !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 5px 14px rgba(50, 57, 89, .045);
  transform: none !important;
}

.nav > button:hover .nav-icon,
.nav .nav-group-toggle:hover .nav-icon {
  color: #5c63c9;
}

.nav > button.active {
  color: #3f43b7 !important;
  border-color: #dedffd;
  background: linear-gradient(95deg, #ebeafd, #f4f5ff);
  box-shadow:
    inset 3px 0 #6869dc,
    0 8px 20px rgba(70, 70, 168, .09);
}

.nav > button.active .nav-icon {
  color: #555bd0;
}

.nav > button.active::after {
  display: none;
}

.nav .nav-group-toggle[aria-expanded="true"],
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle {
  color: #303752 !important;
  border-color: #e9eaf3;
  background: rgba(255,255,255,.68);
  box-shadow: 0 4px 14px rgba(46, 54, 88, .04);
}

.nav .nav-group-toggle[aria-expanded="true"] .nav-icon,
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle .nav-icon {
  color: #5d63ca;
}

.nav-group-arrow {
  width: 16px;
  margin-left: auto;
  color: #98a0b1;
  font-size: 15px;
}

.nav-group-toggle[aria-expanded="true"] .nav-group-arrow {
  color: #676e82;
}

.nav-sub {
  margin: 2px 4px 7px 20px;
  padding: 3px 0 3px 20px;
  border-left: 1px solid #dfe2ec;
}

.nav .nav-sub-item {
  min-height: 36px !important;
  padding: 5px 10px !important;
  color: #737d92;
  font-size: 13px;
  font-weight: 560;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.nav .nav-sub-item::before {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  margin-right: 9px;
  background: #b3b9c8;
}

.nav .nav-sub-item:hover {
  color: #343b55;
  background: #eef0f7;
}

.nav .nav-sub-item.active {
  color: #474bb9;
  font-weight: 680;
  background: #ebeafd;
}

.nav .nav-sub-item.active::before {
  background: #5e63d5;
  box-shadow: 0 0 0 3px rgba(94, 99, 213, .1);
}

.sidebar-footer {
  margin: 4px 3px 0;
  padding: 10px 11px;
  color: #8b93a5;
  border: 1px solid #e1e4ec;
  border-radius: 10px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 5px 16px rgba(53, 60, 94, .04);
}

.sidebar-footer strong {
  color: #13906e;
  font-size: 9.5px;
}

.sidebar-footer strong::before {
  background: #22b58a;
  box-shadow: 0 0 8px rgba(34, 181, 138, .4);
}

@media (max-width: 980px) {
  .sidebar {
    background: rgba(249,250,253,.96);
  }

  .nav > button {
    min-height: 42px !important;
    justify-content: flex-start;
    padding-inline: 9px !important;
  }

  .nav-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .nav .nav-sub-item {
    min-height: 38px !important;
  }
}

/* Store catalogue parity with master product catalogue · v27 */
.store-catalog-panel {
  overflow: hidden;
}

.store-catalog-panel .panel-header {
  align-items: flex-start;
  gap: 18px;
}

.store-catalog-toolbar {
  max-width: 720px;
  display: grid !important;
  grid-template-columns: minmax(190px, 1.15fr) minmax(190px, 1fr) minmax(130px, .65fr) auto auto;
  align-items: center;
  gap: 8px !important;
}

.store-catalog-toolbar > select,
.store-catalog-toolbar > input {
  width: 100%;
  min-width: 0;
}

.store-catalog-actions {
  min-height: 52px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.catalog-view-switch {
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #e1e4ef;
  border-radius: 10px;
  background: #f1f3f8;
}

.catalog-view-switch .small-button {
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  color: #747e93;
  box-shadow: none;
}

.catalog-view-switch .small-button.active {
  border-color: #dfe1fb;
  background: #fff;
  color: #4549c2;
  box-shadow: 0 4px 12px rgba(62, 66, 151, .1);
}

.store-catalog-panel .erp-master-table .table-wrap {
  max-height: calc(100vh - 330px);
}

/* 门店商品：商品编号、公司物料码、UPC/69码必须同时可见。 */
.store-catalog-panel .store-product-ledger th:nth-child(1),
.store-catalog-panel .store-product-ledger td:nth-child(1) { width: 36px; }
.store-catalog-panel .store-product-ledger th:nth-child(2),
.store-catalog-panel .store-product-ledger td:nth-child(2) { width: 70px; }
.store-catalog-panel .store-product-ledger th:nth-child(3),
.store-catalog-panel .store-product-ledger td:nth-child(3) { width: 112px; }
.store-catalog-panel .store-product-ledger th:nth-child(4),
.store-catalog-panel .store-product-ledger td:nth-child(4) { width: 132px; }
.store-catalog-panel .store-product-ledger th:nth-child(5),
.store-catalog-panel .store-product-ledger td:nth-child(5) { width: 21%; }
.store-catalog-panel .store-product-ledger th:nth-child(6),
.store-catalog-panel .store-product-ledger td:nth-child(6) { width: 7%; }
.store-catalog-panel .store-product-ledger th:nth-child(7),
.store-catalog-panel .store-product-ledger td:nth-child(7) { width: 13%; }
.store-catalog-panel .store-product-ledger th:nth-child(8),
.store-catalog-panel .store-product-ledger td:nth-child(8) { width: 11%; }
.store-catalog-panel .store-product-ledger th:nth-child(9),
.store-catalog-panel .store-product-ledger td:nth-child(9) { width: 9%; }
.store-catalog-panel .store-product-ledger th:nth-child(10),
.store-catalog-panel .store-product-ledger td:nth-child(10) { width: 8%; }
.store-catalog-panel .store-product-ledger th:nth-child(11),
.store-catalog-panel .store-product-ledger td:nth-child(11) { width: 8%; }
.store-catalog-panel .store-product-ledger th:nth-child(12),
.store-catalog-panel .store-product-ledger td:nth-child(12) { width: 64px; }

.store-catalog-panel .catalog-upc {
  display: block;
  color: #263e68;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}

.view-loading-state {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--text);
}

.view-loading-state small {
  color: var(--muted);
}

.view-loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: view-loading-spin .7s linear infinite;
}

@keyframes view-loading-spin {
  to { transform: rotate(360deg); }
}

.store-catalog-panel .pagination-bar {
  min-height: 52px;
  background: #fbfcfe;
}

.store-catalog-panel #tabContentMovements .erp-master-table .table-wrap {
  max-height: calc(100vh - 260px);
}

@media (max-width: 1180px) {
  .store-catalog-panel .panel-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .store-catalog-toolbar {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
  }
}

@media (max-width: 760px) {
  .store-catalog-toolbar {
    grid-template-columns: 1fr;
  }

  .store-catalog-toolbar > button {
    width: 100%;
  }

  .store-catalog-actions {
    align-items: stretch;
  }

  .catalog-view-switch {
    width: 100%;
  }

  .catalog-view-switch .small-button {
    flex: 1;
  }
}

/* Dashboard motion system · v28 */
.view-root[data-view="dashboard"] .dashboard-command-strip {
  isolation: isolate;
}

.view-root[data-view="dashboard"] .dashboard-command-strip::before {
  position: absolute;
  inset: -45% 58% -45% -58%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 24%,
    rgba(100, 220, 222, .04) 39%,
    rgba(119, 126, 255, .14) 50%,
    rgba(91, 219, 202, .06) 59%,
    transparent 74%
  );
  content: "";
  transform: translate3d(-45%, 0, 0);
  animation: dashboard-scan-stream 8s ease-in-out infinite;
}

.view-root[data-view="dashboard"] .dashboard-data-field::after {
  animation: dashboard-orbit-breathe 4.8s ease-in-out infinite;
}

.view-root[data-view="dashboard"] .dashboard-health-ring {
  animation: dashboard-health-float 4.5s ease-in-out infinite;
}

.view-root[data-view="dashboard"] .dashboard-chart-point {
  transform-box: fill-box;
  transform-origin: center;
  animation: dashboard-point-pulse 2.4s ease-in-out infinite;
}

.view-root[data-view="dashboard"] .dashboard-risk-row.danger i {
  animation: dashboard-risk-danger 2.2s ease-in-out infinite;
}

.view-root[data-view="dashboard"] .dashboard-risk-row.warning i {
  animation: dashboard-risk-warning 2.8s ease-in-out infinite;
}

.view-root[data-view="dashboard"] .dashboard-kpi header > i {
  animation: dashboard-glyph-float 4s ease-in-out infinite;
}

.view-root[data-view="dashboard"] .dashboard-focus-supply i {
  animation: dashboard-supply-orbit 5.5s ease-in-out infinite;
}

.view-root[data-view="dashboard"] .dashboard-kpi {
  overflow: hidden;
}

.view-root[data-view="dashboard"] .dashboard-kpi::after {
  position: absolute;
  inset: -55% auto -55% -44%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent);
  content: "";
  transform: translateX(-190%) rotate(12deg);
  animation: dashboard-kpi-sheen 6.8s ease-in-out infinite;
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(2)::after {
  animation-delay: -1.4s;
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(3)::after {
  animation-delay: -2.8s;
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(4)::after {
  animation-delay: -4.2s;
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(2) header > i {
  animation-delay: -.8s;
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(3) header > i {
  animation-delay: -1.6s;
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(4) header > i {
  animation-delay: -2.4s;
}

.view-root[data-view="dashboard"]:not(.dashboard-intro) > * {
  animation: none;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-bento-lead {
  animation: dashboard-hero-enter .72s cubic-bezier(.16, 1, .3, 1) both;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-focus-card {
  animation: dashboard-card-enter .62s cubic-bezier(.16, 1, .3, 1) both;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-focus-card:nth-child(1) {
  animation-delay: .14s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-focus-card:nth-child(2) {
  animation-delay: .22s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-kpi {
  animation: dashboard-card-enter .6s cubic-bezier(.16, 1, .3, 1) both;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-kpi:nth-child(1) {
  animation-delay: .26s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-kpi:nth-child(2) {
  animation-delay: .33s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-kpi:nth-child(3) {
  animation-delay: .4s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-kpi:nth-child(4) {
  animation-delay: .47s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-primary-grid > .panel,
.view-root[data-view="dashboard"].dashboard-intro .dashboard-operations-grid > .panel,
.view-root[data-view="dashboard"].dashboard-intro .dashboard-secondary-grid > .panel {
  animation: dashboard-panel-enter .66s cubic-bezier(.16, 1, .3, 1) both;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-primary-grid > .panel:nth-child(1) {
  animation-delay: .54s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-primary-grid > .panel:nth-child(2) {
  animation-delay: .61s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-operations-grid > .panel:nth-child(1) {
  animation-delay: .68s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-operations-grid > .panel:nth-child(2) {
  animation-delay: .75s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-secondary-grid > .panel:nth-child(1) {
  animation-delay: .82s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-secondary-grid > .panel:nth-child(2) {
  animation-delay: .89s;
}

.view-root[data-view="dashboard"].dashboard-intro .dashboard-secondary-grid > .panel:nth-child(3) {
  animation-delay: .96s;
}

@keyframes dashboard-hero-enter {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(18px) scale(.985);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboard-card-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboard-panel-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashboard-scan-stream {
  0%,
  14% {
    opacity: 0;
    transform: translate3d(-48%, 0, 0);
  }
  32% {
    opacity: .9;
  }
  72%,
  100% {
    opacity: 0;
    transform: translate3d(265%, 0, 0);
  }
}

@keyframes dashboard-orbit-breathe {
  0%,
  100% {
    opacity: .58;
    transform: translateY(-50%) scale(.94);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.06);
  }
}

@keyframes dashboard-health-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes dashboard-point-pulse {
  0%,
  100% {
    opacity: .76;
    transform: scale(.86);
  }
  50% {
    opacity: 1;
    transform: scale(1.28);
  }
}

@keyframes dashboard-risk-danger {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(228, 75, 96, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(228, 75, 96, .16);
  }
}

@keyframes dashboard-risk-warning {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(240, 162, 37, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(240, 162, 37, .13);
  }
}

@keyframes dashboard-glyph-float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-3px) rotate(2deg);
  }
}

@keyframes dashboard-supply-orbit {
  0%,
  100% {
    opacity: .72;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate3d(-8px, -8px, 0) scale(1.12);
  }
}

@keyframes dashboard-kpi-sheen {
  0%,
  18% {
    opacity: 0;
    transform: translateX(-190%) rotate(12deg);
  }
  32% {
    opacity: .72;
  }
  54%,
  100% {
    opacity: 0;
    transform: translateX(620%) rotate(12deg);
  }
}

/* Cosmic dashboard scene · v30 */
.view-root[data-view="dashboard"] {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 124px);
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(112, 131, 210, .2);
  border-radius: 32px;
  background:
    radial-gradient(circle at 14% 6%, rgba(79, 87, 218, .42), transparent 29%),
    radial-gradient(circle at 92% 32%, rgba(13, 183, 191, .26), transparent 31%),
    radial-gradient(circle at 46% 94%, rgba(116, 50, 181, .22), transparent 34%),
    linear-gradient(145deg, #080d22 0%, #11183a 48%, #071c2a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 28px 76px rgba(14, 22, 55, .18);
}

.view-root[data-view="dashboard"] > *:not(.dashboard-cosmos) {
  position: relative;
  z-index: 2;
}

.dashboard-cosmos {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  overflow: hidden;
  pointer-events: none;
  animation: none !important;
}

.dashboard-cosmos::before,
.dashboard-cosmos::after,
.dashboard-cosmos > i {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
  will-change: opacity, transform;
}

.dashboard-cosmos::before {
  inset: -18%;
  background:
    radial-gradient(circle at 20% 24%, rgba(255,255,255,.95) 0 1px, transparent 1.7px),
    radial-gradient(circle at 71% 17%, rgba(159,190,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 43% 79%, rgba(255,255,255,.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 67%, rgba(116,244,229,.8) 0 1px, transparent 1.7px);
  background-size: 137px 149px, 211px 193px, 173px 227px, 263px 239px;
  opacity: .5;
  animation: dashboard-cosmos-drift 32s linear infinite;
}

.dashboard-cosmos::after {
  inset: -25%;
  background:
    radial-gradient(ellipse at 19% 30%, rgba(101,92,255,.24), transparent 26%),
    radial-gradient(ellipse at 76% 37%, rgba(33,211,203,.18), transparent 30%),
    radial-gradient(ellipse at 55% 84%, rgba(166,70,231,.15), transparent 28%);
  filter: blur(22px);
  animation: dashboard-nebula-breathe 16s ease-in-out infinite alternate;
}

.dashboard-cosmos-stars.far {
  inset: -10%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.42) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(139,224,255,.38) 0 1px, transparent 1.4px);
  background-position: 0 0, 47px 71px;
  background-size: 92px 92px, 151px 151px;
  opacity: .42;
  animation: dashboard-stars-far 48s linear infinite;
}

.dashboard-cosmos-stars.near {
  inset: -16%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.96) 0 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(116,241,228,.78) 0 1.1px, transparent 1.7px);
  background-position: 18px 34px, 101px 12px;
  background-size: 241px 211px, 307px 271px;
  filter: drop-shadow(0 0 3px rgba(158,211,255,.55));
  opacity: .66;
  animation: dashboard-stars-near 25s linear infinite;
}

.dashboard-cosmos-orbit {
  top: 8%;
  right: -10%;
  width: 52%;
  aspect-ratio: 1;
  border: 1px solid rgba(127, 151, 255, .15);
  border-radius: 50%;
  box-shadow:
    0 0 0 58px rgba(91, 106, 221, .025),
    0 0 0 118px rgba(38, 190, 196, .018),
    inset 0 0 70px rgba(61, 201, 210, .035);
  transform: rotateX(66deg) rotateZ(-12deg);
  animation: dashboard-orbit-turn 22s linear infinite;
}

.dashboard-cosmos-orbit::before,
.dashboard-cosmos-orbit::after {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #77eee1;
  box-shadow: 0 0 10px #77eee1, 0 0 24px rgba(119,238,225,.8);
  content: "";
}

.dashboard-cosmos-orbit::before {
  top: 8%;
  left: 29%;
}

.dashboard-cosmos-orbit::after {
  right: 10%;
  bottom: 22%;
  background: #a4a8ff;
  box-shadow: 0 0 10px #a4a8ff, 0 0 24px rgba(164,168,255,.8);
}

.dashboard-cosmos-comet {
  top: 18%;
  left: -20%;
  width: 170px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(153,221,255,.15), #fff);
  box-shadow: 0 0 9px rgba(116,228,255,.7);
  transform: rotate(-19deg);
  animation: dashboard-comet-pass 13s ease-in infinite;
}

.view-root[data-view="dashboard"] .dashboard-command-strip {
  border: 1px solid rgba(145, 166, 255, .2);
  background:
    radial-gradient(circle at 75% 22%, rgba(121,128,255,.31), transparent 26%),
    radial-gradient(circle at 92% 82%, rgba(20,212,199,.24), transparent 27%),
    linear-gradient(130deg, rgba(18,26,56,.96), rgba(24,36,84,.94) 56%, rgba(11,53,66,.94));
  backdrop-filter: blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 28px 66px rgba(2, 8, 30, .34);
}

.view-root[data-view="dashboard"] .dashboard-focus-card,
.view-root[data-view="dashboard"] .dashboard-kpi,
.view-root[data-view="dashboard"] .panel:not(.dashboard-risk-panel) {
  border: 1px solid rgba(255,255,255,.62);
  backdrop-filter: blur(20px) saturate(118%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 20px 52px rgba(5, 12, 39, .2);
}

.view-root[data-view="dashboard"] .panel:not(.dashboard-risk-panel) {
  background: rgba(249, 251, 255, .9);
}

.view-root[data-view="dashboard"] .dashboard-focus-card.inventory {
  background:
    radial-gradient(circle at 100% 0, rgba(118,123,244,.22), transparent 36%),
    linear-gradient(145deg, rgba(250,249,255,.94), rgba(234,235,255,.9));
}

.view-root[data-view="dashboard"] .dashboard-focus-card.supply {
  background:
    radial-gradient(circle at 100% 0, rgba(65,212,189,.22), transparent 38%),
    linear-gradient(145deg, rgba(247,255,252,.94), rgba(226,248,243,.9));
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(1) {
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(234,239,255,.89));
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(2) {
  background: linear-gradient(145deg, rgba(240,252,255,.94), rgba(217,246,249,.89));
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(3) {
  background: linear-gradient(145deg, rgba(255,250,239,.94), rgba(255,237,207,.89));
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(4) {
  background: linear-gradient(145deg, rgba(251,246,255,.94), rgba(235,223,255,.89));
}

@keyframes dashboard-cosmos-drift {
  from {
    transform: translate3d(-2%, -2%, 0) rotate(0);
  }
  to {
    transform: translate3d(3%, 4%, 0) rotate(.8deg);
  }
}

@keyframes dashboard-nebula-breathe {
  0% {
    opacity: .58;
    transform: translate3d(-2%, 0, 0) scale(.96) rotate(-2deg);
  }
  100% {
    opacity: .94;
    transform: translate3d(3%, -2%, 0) scale(1.08) rotate(3deg);
  }
}

@keyframes dashboard-stars-far {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-92px, 92px, 0);
  }
}

@keyframes dashboard-stars-near {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(118px, 84px, 0);
  }
}

@keyframes dashboard-orbit-turn {
  from {
    transform: rotateX(66deg) rotateZ(-12deg);
  }
  to {
    transform: rotateX(66deg) rotateZ(348deg);
  }
}

@keyframes dashboard-comet-pass {
  0%,
  18% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-19deg);
  }
  24% {
    opacity: 1;
  }
  54%,
  100% {
    opacity: 0;
    transform: translate3d(125vw, 38vh, 0) rotate(-19deg);
  }
}

@media (max-width: 760px) {
  .view-root[data-view="dashboard"] {
    padding: 14px;
    border-radius: 24px;
  }

  .dashboard-cosmos-orbit {
    right: -34%;
    width: 96%;
  }
}

/* Aurora graphite colour system · v31 */
:root {
  --bg: #f2f4f9;
  --panel: #ffffff;
  --panel-soft: #f7f8fc;
  --ink: #192137;
  --muted: #737d95;
  --line: #e2e6f0;
  --line-strong: #cdd4e2;
  --accent: #6267e8;
  --accent-soft: #eeefff;
  --amber: #d5912d;
  --amber-soft: #fff5df;
  --danger: #df4d67;
  --danger-soft: #fff0f3;
  --info: #347bd5;
  --info-soft: #edf5ff;
  --sidebar: #0c1124;
  --sidebar-muted: #aab4cc;
  --shadow: 0 14px 36px rgba(27, 36, 70, .08);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 70% -12%, rgba(111,116,255,.1), transparent 31%),
    radial-gradient(circle at 105% 54%, rgba(45,207,195,.07), transparent 29%),
    #f2f4f9;
}

.sidebar {
  color: #edf1ff;
  border-right-color: rgba(133, 147, 201, .15);
  background:
    radial-gradient(circle at 13% -3%, rgba(112,105,255,.22), transparent 27%),
    radial-gradient(circle at 107% 38%, rgba(39,210,198,.11), transparent 31%),
    linear-gradient(180deg, #0d1227 0%, #111831 54%, #0a1125 100%);
  box-shadow: 18px 0 54px rgba(13, 19, 43, .16);
}

.sidebar::before {
  opacity: .24;
  background-image:
    linear-gradient(rgba(148,160,217,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,160,217,.055) 1px, transparent 1px);
}

.sidebar > .brand {
  border-bottom-color: rgba(148,160,217,.15);
}

.sidebar .brand-mark {
  border-color: rgba(167,170,255,.3);
  background: linear-gradient(145deg, #7b78ff 0%, #6068e9 52%, #31bfc0 100%);
  box-shadow:
    0 12px 28px rgba(94, 96, 226, .34),
    inset 0 1px rgba(255,255,255,.32);
}

.sidebar .brand strong {
  color: #f4f6ff;
}

.sidebar .brand small {
  color: #7f8aa7;
}

.nav-section-label {
  color: #66718e;
}

.nav > button,
.nav .nav-group-toggle {
  color: #a9b3cb !important;
}

.nav-icon {
  color: #727e9e;
}

.nav > button:hover,
.nav .nav-group-toggle:hover {
  color: #f1f4ff !important;
  border-color: rgba(143,151,219,.14) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: none;
}

.nav > button:hover .nav-icon,
.nav .nav-group-toggle:hover .nav-icon {
  color: #8f93ff;
}

.nav > button.active {
  color: #ffffff !important;
  border-color: rgba(126,130,255,.24);
  background:
    radial-gradient(circle at 0 50%, rgba(49,212,199,.11), transparent 34%),
    linear-gradient(90deg, rgba(105,102,255,.22), rgba(99,103,232,.1));
  box-shadow:
    inset 3px 0 #7b7fff,
    0 10px 28px rgba(41, 44, 119, .2);
}

.nav > button.active .nav-icon {
  color: #a8abff;
}

.nav .nav-group-toggle[aria-expanded="true"],
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle {
  color: #edf1ff !important;
  border-color: rgba(137,146,207,.14);
  background: rgba(255,255,255,.045);
  box-shadow: none;
}

.nav .nav-group-toggle[aria-expanded="true"] .nav-icon,
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle .nav-icon {
  color: #9094ff;
}

.nav-group-arrow {
  color: #65708d;
}

.nav-group-toggle[aria-expanded="true"] .nav-group-arrow {
  color: #a5aec5;
}

.nav-sub {
  border-left-color: rgba(133,145,196,.2);
}

.nav .nav-sub-item {
  color: #808ca8;
}

.nav .nav-sub-item::before {
  background: #56617d;
}

.nav .nav-sub-item:hover {
  color: #dbe1f4;
  background: rgba(255,255,255,.045);
}

.nav .nav-sub-item.active {
  color: #c8cbff;
  background: rgba(112,113,245,.14);
}

.nav .nav-sub-item.active::before {
  background: #8589ff;
  box-shadow: 0 0 0 3px rgba(133,137,255,.13), 0 0 10px rgba(133,137,255,.42);
}

.sidebar-footer {
  color: #79849f;
  border-color: rgba(137,149,200,.14);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.sidebar-footer strong {
  color: #50d7bb;
}

.sidebar-footer strong::before {
  background: #42d4b5;
  box-shadow: 0 0 10px rgba(66,212,181,.65);
}

.topbar {
  border-bottom-color: rgba(205,212,229,.82);
  background: rgba(248,250,255,.84);
  box-shadow: 0 8px 30px rgba(31,39,73,.045);
}

.topbar p {
  color: #6267e8;
}

.cloud-status {
  color: #247f76;
  border-color: #ccece7;
  background: rgba(232,249,246,.88);
}

.user-label {
  color: #566079;
  background: rgba(255,255,255,.8);
}

.view-root[data-view="dashboard"] {
  --dash-ink: #edf2ff;
  --dash-muted: #8e9ab8;
  --dash-line: rgba(143,157,204,.16);
  border-color: rgba(120,132,211,.24);
  background:
    radial-gradient(circle at 12% 4%, rgba(103,102,255,.31), transparent 30%),
    radial-gradient(circle at 94% 28%, rgba(37,205,195,.19), transparent 32%),
    radial-gradient(circle at 48% 102%, rgba(102,73,190,.16), transparent 36%),
    linear-gradient(145deg, #070b19 0%, #0d132b 48%, #071821 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 80px rgba(13,20,50,.22);
}

.view-root[data-view="dashboard"] .dashboard-command-strip {
  border-color: rgba(139,146,255,.23);
  background:
    radial-gradient(circle at 78% 22%, rgba(111,115,255,.24), transparent 29%),
    radial-gradient(circle at 93% 84%, rgba(40,210,198,.18), transparent 29%),
    linear-gradient(132deg, rgba(15,22,49,.94), rgba(20,31,67,.92) 58%, rgba(8,42,51,.92));
}

.view-root[data-view="dashboard"] .dashboard-focus-card,
.view-root[data-view="dashboard"] .dashboard-kpi,
.view-root[data-view="dashboard"] .panel {
  color: var(--dash-ink);
  border-color: rgba(145,158,207,.17);
  background: linear-gradient(145deg, rgba(18,25,52,.88), rgba(11,18,41,.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 20px 52px rgba(2,7,25,.26);
}

.view-root[data-view="dashboard"] .panel:not(.dashboard-risk-panel) {
  background: linear-gradient(145deg, rgba(17,24,50,.88), rgba(10,18,40,.84));
}

.view-root[data-view="dashboard"] .dashboard-risk-panel {
  background:
    radial-gradient(circle at 90% 8%, rgba(229,76,104,.08), transparent 31%),
    linear-gradient(145deg, rgba(17,24,50,.92), rgba(9,16,36,.9));
}

.view-root[data-view="dashboard"] .dashboard-focus-card.inventory,
.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(1) {
  background:
    radial-gradient(circle at 100% 0, rgba(112,116,255,.15), transparent 38%),
    linear-gradient(145deg, rgba(21,28,59,.93), rgba(12,19,43,.86));
}

.view-root[data-view="dashboard"] .dashboard-focus-card.supply,
.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(2) {
  background:
    radial-gradient(circle at 100% 0, rgba(46,214,199,.13), transparent 39%),
    linear-gradient(145deg, rgba(17,40,53,.91), rgba(10,27,41,.86));
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(3) {
  background:
    radial-gradient(circle at 100% 0, rgba(242,182,91,.11), transparent 38%),
    linear-gradient(145deg, rgba(39,33,50,.92), rgba(24,23,43,.86));
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(4) {
  background:
    radial-gradient(circle at 100% 0, rgba(165,138,247,.13), transparent 38%),
    linear-gradient(145deg, rgba(31,27,56,.92), rgba(18,20,44,.86));
}

.view-root[data-view="dashboard"] .panel-header {
  border-bottom-color: var(--dash-line);
}

.view-root[data-view="dashboard"] .panel-header h2,
.view-root[data-view="dashboard"] .dashboard-focus-card header > span,
.view-root[data-view="dashboard"] .dashboard-kpi > strong,
.view-root[data-view="dashboard"] .dashboard-kpi header > span,
.view-root[data-view="dashboard"] .dashboard-focus-inventory > div:last-child strong,
.view-root[data-view="dashboard"] .dashboard-focus-supply strong,
.view-root[data-view="dashboard"] .dashboard-hot-row strong,
.view-root[data-view="dashboard"] .dashboard-hot-row > b,
.view-root[data-view="dashboard"] .dashboard-platform-legend strong,
.view-root[data-view="dashboard"] .movement-item strong {
  color: var(--dash-ink);
}

.view-root[data-view="dashboard"] .dashboard-panel-sub,
.view-root[data-view="dashboard"] .dashboard-chart-legend,
.view-root[data-view="dashboard"] .dashboard-focus-card header > em,
.view-root[data-view="dashboard"] .dashboard-focus-card small,
.view-root[data-view="dashboard"] .dashboard-focus-inventory > div:last-child span,
.view-root[data-view="dashboard"] .dashboard-focus-inventory > div:last-child small,
.view-root[data-view="dashboard"] .dashboard-focus-supply span,
.view-root[data-view="dashboard"] .dashboard-kpi header > span,
.view-root[data-view="dashboard"] .dashboard-kpi small,
.view-root[data-view="dashboard"] .dashboard-hot-row > span,
.view-root[data-view="dashboard"] .dashboard-hot-row em,
.view-root[data-view="dashboard"] .dashboard-platform-legend em,
.view-root[data-view="dashboard"] .movement-item p,
.view-root[data-view="dashboard"] .movement-item small {
  color: var(--dash-muted);
}

.view-root[data-view="dashboard"] .text-button {
  color: #69dfd5;
}

.view-root[data-view="dashboard"] .dashboard-health-ring > span {
  color: var(--dash-ink);
  background: rgba(10,17,38,.94);
  box-shadow: inset 0 0 0 1px rgba(145,158,207,.14);
}

.view-root[data-view="dashboard"] .dashboard-kpi header > i {
  color: #b7bcff;
  border-color: rgba(132,138,255,.18);
  background: rgba(112,116,255,.12);
}

.view-root[data-view="dashboard"] .dashboard-kpi.warning header > i {
  color: #f3c574;
  border-color: rgba(242,182,91,.2);
  background: rgba(242,182,91,.1);
}

.view-root[data-view="dashboard"] .dashboard-kpi-delta.neutral {
  color: #9aa5c0;
  background: rgba(145,158,207,.1);
}

.view-root[data-view="dashboard"] .dashboard-kpi-delta.up {
  color: #56d9b4;
  background: rgba(46,214,199,.1);
}

.view-root[data-view="dashboard"] .dashboard-kpi-delta.down {
  color: #ff8295;
  background: rgba(223,77,103,.12);
}

.view-root[data-view="dashboard"] .dashboard-chart-legend .revenue::before,
.view-root[data-view="dashboard"] .dashboard-chart-bar {
  fill: #7478ff;
  background: #7478ff;
}

.view-root[data-view="dashboard"] .dashboard-chart-legend .orders::before {
  background: #2ed6c7;
}

.view-root[data-view="dashboard"] .dashboard-order-line {
  stroke: #2ed6c7;
  filter: drop-shadow(0 3px 5px rgba(46,214,199,.25));
}

.view-root[data-view="dashboard"] .dashboard-chart-point {
  fill: #101733;
  stroke: #60e5d8;
}

.view-root[data-view="dashboard"] .dashboard-trend-chart text {
  fill: #7f8ba9;
}

.view-root[data-view="dashboard"] .dashboard-chart-grid {
  stroke: rgba(138,151,196,.14);
}

.view-root[data-view="dashboard"] .dashboard-pipeline-stage {
  color: var(--dash-ink);
  border-color: var(--dash-line);
  background: rgba(255,255,255,.035);
}

.view-root[data-view="dashboard"] .dashboard-pipeline-stage:hover,
.view-root[data-view="dashboard"] .dashboard-live-queue > button:hover,
.view-root[data-view="dashboard"] .dashboard-risk-row:hover {
  background: rgba(117,122,255,.08);
}

.view-root[data-view="dashboard"] .dashboard-pipeline-stage em {
  color: var(--dash-muted);
}

.view-root[data-view="dashboard"] .dashboard-pipeline-stage > span,
.view-root[data-view="dashboard"] .dashboard-pipeline-stage i {
  background: #697493;
}

.view-root[data-view="dashboard"] .dashboard-pipeline-stage.ready > span,
.view-root[data-view="dashboard"] .dashboard-pipeline-stage.ready i {
  background: #e0a64d;
}

.view-root[data-view="dashboard"] .dashboard-pipeline-stage.delivering > span,
.view-root[data-view="dashboard"] .dashboard-pipeline-stage.delivering i {
  background: #7478ff;
}

.view-root[data-view="dashboard"] .dashboard-pipeline-stage.completed > span,
.view-root[data-view="dashboard"] .dashboard-pipeline-stage.completed i {
  background: #2ecba9;
}

.view-root[data-view="dashboard"] .dashboard-fulfillment-summary {
  border-color: var(--dash-line);
}

.view-root[data-view="dashboard"] .dashboard-fulfillment-summary span {
  color: var(--dash-muted);
  border-right-color: var(--dash-line);
  background: rgba(255,255,255,.025);
}

.view-root[data-view="dashboard"] .dashboard-fulfillment-summary strong {
  color: var(--dash-ink);
}

.view-root[data-view="dashboard"] .dashboard-live-queue > button {
  color: var(--dash-ink);
  border-bottom-color: var(--dash-line);
}

.view-root[data-view="dashboard"] .dashboard-live-queue em,
.view-root[data-view="dashboard"] .dashboard-queue-empty {
  color: var(--dash-muted);
}

.view-root[data-view="dashboard"] .dashboard-queue-empty {
  border-color: rgba(143,157,204,.23);
  background: rgba(255,255,255,.025);
}

.view-root[data-view="dashboard"] .dashboard-store-matrix .table-wrap {
  border-color: var(--dash-line);
  background: transparent;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix table {
  color: var(--dash-ink);
  background: transparent;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix th {
  color: #8f9bb8;
  border-color: var(--dash-line);
  background: rgba(255,255,255,.035);
}

.view-root[data-view="dashboard"] .dashboard-store-matrix td {
  color: #dfe6f8;
  border-color: var(--dash-line);
  background: transparent;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover td {
  background: rgba(116,120,255,.065);
}

.view-root[data-view="dashboard"] .dashboard-store-matrix .small-button {
  color: #cbd0ff;
  border-color: rgba(127,133,255,.22);
  background: rgba(111,116,255,.1);
}

.view-root[data-view="dashboard"] .dashboard-risk-row {
  color: var(--dash-ink);
  border-bottom-color: var(--dash-line);
  background: transparent;
}

.view-root[data-view="dashboard"] .dashboard-risk-row em {
  color: var(--dash-muted);
}

.view-root[data-view="dashboard"] .dashboard-hot-row,
.view-root[data-view="dashboard"] .dashboard-platform-legend > div,
.view-root[data-view="dashboard"] .movement-item {
  border-bottom-color: var(--dash-line);
}

.view-root[data-view="dashboard"] .dashboard-hot-row i {
  background: linear-gradient(90deg, #7478ff, #2ed6c7);
  box-shadow: 0 0 10px rgba(46,214,199,.2);
}

.view-root[data-view="dashboard"] .dashboard-donut > span {
  color: var(--dash-ink);
  background: #10172f;
  box-shadow: inset 0 0 0 1px var(--dash-line);
}

.view-root[data-view="dashboard"] .dashboard-donut em {
  color: var(--dash-muted);
}

.view-root[data-view="dashboard"] .dashboard-kpi::after {
  background: linear-gradient(90deg, transparent, rgba(137,144,255,.17), transparent);
}

@media (max-width: 980px) {
  .sidebar {
    background:
      radial-gradient(circle at 12% 0, rgba(112,105,255,.2), transparent 31%),
      linear-gradient(180deg, #0d1227, #0a1125);
  }
}

/* Midnight chart surface · v32 */
.view-root[data-view="dashboard"] .dashboard-trend-panel {
  border-color: rgba(126, 139, 196, .14);
  background:
    radial-gradient(circle at 72% 28%, rgba(91, 101, 220, .075), transparent 38%),
    linear-gradient(145deg, rgba(15, 22, 47, .94), rgba(8, 15, 34, .92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 22px 56px rgba(1, 6, 23, .3);
}

.view-root[data-view="dashboard"] .dashboard-trend-panel .panel-header {
  border-bottom-color: rgba(136, 150, 201, .1);
  background: transparent;
}

.view-root[data-view="dashboard"] .dashboard-trend-body {
  background:
    linear-gradient(rgba(125, 139, 193, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 139, 193, .025) 1px, transparent 1px),
    radial-gradient(circle at 48% 42%, rgba(89, 99, 207, .07), transparent 56%);
  background-size: 100% 56px, 72px 100%, auto;
}

.view-root[data-view="dashboard"] .dashboard-trend-chart text {
  fill: #7886a6;
}

.view-root[data-view="dashboard"] .dashboard-chart-grid {
  stroke: rgba(139, 153, 203, .12);
  stroke-dasharray: 4 7;
}

.view-root[data-view="dashboard"] .dashboard-chart-bar {
  fill: url(#dashboardRevenueGradient);
  opacity: .78;
  filter: drop-shadow(0 5px 7px rgba(103, 109, 238, .18));
}

.view-root[data-view="dashboard"] .dashboard-chart-bar:hover {
  fill: #9699ff;
  opacity: 1;
}

.view-root[data-view="dashboard"] .dashboard-order-area {
  fill: url(#dashboardOrderAreaGradient);
  pointer-events: none;
}

.view-root[data-view="dashboard"] .dashboard-order-line {
  stroke: #34dfcf;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 5px rgba(52, 223, 207, .34));
}

.view-root[data-view="dashboard"] .dashboard-chart-point {
  fill: #0e1731;
  stroke: #4ee6d8;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(78,230,216,.4));
}

.view-root[data-view="dashboard"] .dashboard-chart-legend .revenue::before {
  background: #8589ff;
  box-shadow: 0 0 8px rgba(133,137,255,.28);
}

.view-root[data-view="dashboard"] .dashboard-chart-legend .orders::before {
  background: #34dfcf;
  box-shadow: 0 0 8px rgba(52,223,207,.28);
}

.view-root[data-view="dashboard"] .dashboard-fulfillment-body,
.view-root[data-view="dashboard"] .dashboard-hot-panel .panel-body,
.view-root[data-view="dashboard"] .dashboard-platform-panel .panel-body,
.view-root[data-view="dashboard"] .dashboard-movement-panel .panel-body {
  background: transparent;
}

/* Enterprise application canvas · v33 */
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) {
  --page-card: rgba(255,255,255,.96);
  --page-card-soft: #f8f9fc;
  --page-line: #e2e6ef;
  --page-line-strong: #cfd6e4;
  --page-ink: #1c253b;
  --page-muted: #747f96;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .ops-hero,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .module-intro,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .message-box,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .role-card,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .result-card,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .blueprint-card,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-switch {
  color: var(--page-ink);
  border: 1px solid var(--page-line);
  background: var(--page-card);
  box-shadow:
    0 12px 34px rgba(25, 34, 67, .065),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel {
  border-radius: 18px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel:hover {
  border-color: #d9deea;
  box-shadow: 0 16px 42px rgba(25,34,67,.085);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header {
  position: relative;
  min-height: 62px;
  border-bottom-color: #e9ecf3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,249,252,.97));
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header::before {
  position: absolute;
  top: 0;
  left: 18px;
  width: 38px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #686de9, #2bc8c1);
  content: "";
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header h2 {
  color: #202942;
  font-weight: 770;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .hint,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .muted,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .hint,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .muted {
  color: var(--page-muted);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric {
  min-height: 104px;
  overflow: hidden;
  color: var(--page-ink);
  border: 1px solid var(--page-line);
  background:
    radial-gradient(circle at 100% 0, rgba(104,109,233,.075), transparent 36%),
    linear-gradient(145deg, #fff, #f8f9fd);
  box-shadow: 0 10px 28px rgba(25,34,67,.055);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4n + 2) {
  background:
    radial-gradient(circle at 100% 0, rgba(43,200,193,.09), transparent 36%),
    linear-gradient(145deg, #fff, #f5fbfb);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4n + 3) {
  background:
    radial-gradient(circle at 100% 0, rgba(215,153,58,.08), transparent 36%),
    linear-gradient(145deg, #fff, #fdfaf4);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4n) {
  background:
    radial-gradient(circle at 100% 0, rgba(148,112,226,.08), transparent 36%),
    linear-gradient(145deg, #fff, #faf8fd);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric span,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric small {
  color: var(--page-muted);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric strong {
  color: #202942;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric.warning strong {
  color: #bd7a20;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric.danger strong {
  color: #d6425c;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .table-wrap {
  border-color: #e4e8f0;
  background: #fff;
  scrollbar-color: #c6cede transparent;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) table {
  color: var(--page-ink);
  background: #fff;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) th {
  color: #68748c;
  border-bottom-color: #dfe4ed;
  background: #f5f7fa;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) td {
  color: #303a51;
  border-bottom-color: #edf0f5;
  background: transparent;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) tbody tr:hover td {
  background: #f7f8ff;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) input,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) select,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) textarea {
  color: #273148;
  border-color: #d6dce7;
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgba(24,33,65,.025);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) input::placeholder,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) textarea::placeholder {
  color: #a0a9ba;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) input:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) select:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) textarea:hover {
  border-color: #bdc5d6;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) input:focus,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) select:focus,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) textarea:focus {
  border-color: #777bec;
  box-shadow: 0 0 0 3px rgba(104,109,233,.11);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .primary-button,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .small-button.primary,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #696eea, #565cd5);
  box-shadow: 0 8px 18px rgba(86,92,213,.2);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .primary-button:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .small-button.primary:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-button.active:hover {
  background: linear-gradient(135deg, #7479ef, #6066dc);
  box-shadow: 0 11px 23px rgba(86,92,213,.25);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .ghost-button,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .small-button,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-button {
  color: #48536b;
  border-color: #d8dee9;
  background: #fff;
  box-shadow: 0 3px 10px rgba(26,35,68,.035);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .ghost-button:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .small-button:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-button:hover {
  color: #4b50bf;
  border-color: #c7caf7;
  background: #f6f6ff;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .text-button {
  color: #575dce;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .danger-button {
  color: #d23f59;
  border-color: #f1cbd3;
  background: #fff5f7;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge {
  border: 1px solid transparent;
  font-weight: 720;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.pending,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.pending_supplier,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.purchased,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.executing,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.partially_fulfilled,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.partially_received,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.return_pending {
  color: #a86a16;
  border-color: #f2dfb7;
  background: #fff6e4;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.ready,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.approved,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.received,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.confirmed,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.fulfilled,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.arrived,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.shelved {
  color: #157c67;
  border-color: #c9eadf;
  background: #eaf8f3;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.sent_supplier,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.shipped,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.delivering {
  color: #3e62c4;
  border-color: #d5def8;
  background: #eef2ff;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.cancelled,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.closed,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.low,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge.returned {
  color: #ca3c56;
  border-color: #f2cdd4;
  background: #fff0f3;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .message-box {
  color: #526078;
  border-color: #dce2ed;
  background:
    linear-gradient(135deg, #f9faff, #f5f7fb);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .module-intro {
  background:
    radial-gradient(circle at 100% 0, rgba(104,109,233,.075), transparent 28%),
    linear-gradient(145deg, #fff, #f7f8fd);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-switch {
  border-color: #dfe4ee;
  background: rgba(255,255,255,.96);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-switch > span {
  color: #7b859a;
  border-left-color: #e3e7ef;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .purchase-store-toolbar,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .unified-order-toolbar,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .catalog-filter-bar {
  border: 1px solid #e1e5ef;
  background:
    radial-gradient(circle at 100% 0, rgba(104,109,233,.055), transparent 29%),
    linear-gradient(145deg, #fff, #f8f9fd);
  box-shadow: 0 10px 28px rgba(25,34,67,.055);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .tab-card {
  color: #3f4960;
  border: 1px solid #e0e4ed;
  background: linear-gradient(145deg, #fff, #f7f8fb);
  box-shadow: 0 8px 24px rgba(25,34,67,.05);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .tab-card:hover {
  border-color: #c8ccf4;
  box-shadow: 0 0 0 3px rgba(104,109,233,.075);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .tab-card.active {
  color: #4348bb;
  border-color: #c8caf6;
  background:
    radial-gradient(circle at 100% 0, rgba(104,109,233,.11), transparent 38%),
    linear-gradient(145deg, #fafaff, #eff0ff);
  box-shadow: inset 3px 0 #696eea, 0 10px 28px rgba(61,65,163,.08);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .pagination-bar,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .product-catalog-actions,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .store-catalog-actions {
  color: var(--page-muted);
  border-color: #e6e9f0;
  background: #fafbfc;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .empty {
  color: #8a94a8;
  border-color: #dfe4ed;
  background:
    radial-gradient(circle at 50% 0, rgba(104,109,233,.05), transparent 42%),
    #fafbfc;
}

.modal {
  color: #202a41;
  border-color: #dfe4ed;
  background: #fff;
  box-shadow: 0 30px 90px rgba(17,25,54,.25);
}

.modal-header,
.modal-footer {
  border-color: #e5e9f1;
  background: #f8f9fc;
}

/* Dashboard interaction contrast guard · v34 */
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr {
  background: transparent;
  transition: background-color .16s ease;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within {
  background: #171e3d !important;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover td,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within td {
  color: #f1f4ff !important;
  background: #171e3d !important;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover td strong,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within td strong {
  color: inherit;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover .dashboard-danger-text,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within .dashboard-danger-text {
  color: #ff6680 !important;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover .dashboard-rank-index,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within .dashboard-rank-index {
  color: #fff;
  background: linear-gradient(135deg, #7478ff, #2abfb8);
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover .small-button,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within .small-button,
.view-root[data-view="dashboard"] .dashboard-store-matrix .small-button:hover,
.view-root[data-view="dashboard"] .dashboard-store-matrix .small-button:focus-visible {
  color: #fff !important;
  border-color: rgba(142,147,255,.48) !important;
  background: #30366f !important;
  box-shadow: 0 7px 18px rgba(4,8,28,.28);
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover .progress,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within .progress {
  background: rgba(224,230,255,.16);
}

/* Store order records containment · v35 */
.view-root[data-view="storeOrders"] {
  min-width: 0;
  overflow-x: hidden;
}

.store-order-records-panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.store-order-records-panel .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.store-order-records-panel table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
}

.store-order-records-panel th,
.store-order-records-panel td {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.store-order-records-panel th:nth-child(1),
.store-order-records-panel td:nth-child(1) {
  width: 92px;
}

.store-order-records-panel th:nth-child(2),
.store-order-records-panel td:nth-child(2) {
  width: 162px;
}

.store-order-records-panel th:nth-child(3),
.store-order-records-panel td:nth-child(3) {
  width: 82px;
}

.store-order-records-panel th:nth-child(4),
.store-order-records-panel td:nth-child(4) {
  width: auto;
}

.store-order-records-panel th:nth-child(5),
.store-order-records-panel td:nth-child(5) {
  width: 50px;
  text-align: center;
}

.store-order-records-panel th:nth-child(6),
.store-order-records-panel td:nth-child(6) {
  width: 94px;
}

.store-order-records-panel th:nth-child(7),
.store-order-records-panel td:nth-child(7) {
  width: 96px;
}

.store-order-records-panel th:nth-child(8),
.store-order-records-panel td:nth-child(8) {
  width: 112px;
}

.store-order-records-panel th:nth-child(9),
.store-order-records-panel td:nth-child(9) {
  width: 64px;
  text-align: center;
}

.store-order-records-panel th:nth-child(10),
.store-order-records-panel td:nth-child(10) {
  width: 126px;
}

.store-order-records-panel td:nth-child(2) {
  overflow-wrap: anywhere;
  white-space: normal;
}

.store-order-records-panel td:nth-child(4) {
  display: table-cell;
  overflow: hidden;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: normal;
}

.store-order-records-panel td:nth-child(4)::after {
  display: block;
  max-height: 0;
  content: "";
}

.store-order-records-panel th:last-child,
.store-order-records-panel td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
  box-shadow: -8px 0 14px rgba(28,37,73,.055);
}

.store-order-records-panel th:last-child {
  z-index: 4;
  background: #f5f7fa;
}

.store-order-records-panel tbody tr:hover td:last-child {
  background: #f7f8ff;
}

.store-order-records-panel .row-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.store-order-records-panel .row-actions .small-button {
  width: 100%;
  min-width: 0;
  padding-inline: 7px;
}

@media (max-width: 1180px) {
  .store-order-records-panel table {
    min-width: 1050px;
  }
}

/* Executive navigation rail · v36
   One final navigation layer replaces the accumulated visual variants above
   without changing any route, view name or interaction. */
@media (min-width: 981px) {
  .sidebar {
    width: 276px;
    padding: 0 14px 14px;
    gap: 0;
    overflow: hidden;
  }

  .sidebar::before {
    width: 276px;
  }

  .main {
    margin-left: 276px;
  }
}

.sidebar {
  isolation: isolate;
  color: #f4f6ff;
  border-right: 1px solid rgba(146, 158, 211, .14);
  background:
    radial-gradient(circle at 12% -3%, rgba(116, 111, 255, .24), transparent 27%),
    radial-gradient(circle at 106% 42%, rgba(42, 207, 195, .105), transparent 30%),
    linear-gradient(180deg, #10162d 0%, #10182f 48%, #0b1226 100%);
  box-shadow:
    18px 0 54px rgba(9, 15, 37, .17),
    inset -1px 0 rgba(255, 255, 255, .018);
}

.sidebar::before {
  z-index: -2;
  opacity: .3;
  background-image:
    linear-gradient(rgba(156, 166, 218, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 166, 218, .04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .52) 38%, transparent 78%);
  pointer-events: none;
}

.sidebar::after {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #7773ff 0%, #9d6fff 48%, #35d7c6 100%);
  box-shadow: 0 0 24px rgba(114, 119, 255, .48);
}

.sidebar > .brand {
  min-height: 84px;
  flex: 0 0 auto;
  margin: 0 4px;
  padding: 18px 8px 17px;
  gap: 12px;
  border-bottom: 1px solid rgba(149, 160, 211, .14);
}

.sidebar .brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: #fff;
  border: 1px solid rgba(184, 188, 255, .34);
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 46%),
    linear-gradient(145deg, #7b78ff 0%, #6269ed 54%, #2cc9c0 100%);
  box-shadow:
    0 12px 30px rgba(79, 86, 222, .36),
    inset 0 1px rgba(255, 255, 255, .3);
  font-size: 15px;
  letter-spacing: -.3px;
}

.sidebar .brand-mark::after {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  content: "";
  border: 2px solid #10172e;
  border-radius: 50%;
  background: #40dfbd;
  box-shadow: 0 0 11px rgba(64, 223, 189, .72);
}

.sidebar .brand strong {
  color: #f7f8ff;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -.25px;
}

.sidebar .brand small {
  margin-top: 5px;
  color: #7985a3;
  font-size: 9px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: 1.45px;
}

.nav {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 3px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(133, 145, 198, .24) transparent;
}

.nav::-webkit-scrollbar {
  width: 4px;
}

.nav::-webkit-scrollbar-track {
  background: transparent;
}

.nav::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(133, 145, 198, .24);
}

.nav-section-label {
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 11px 7px;
  color: #6f7b99;
  font-size: 11px;
  font-weight: 740;
  line-height: 1;
  letter-spacing: 1.15px;
  white-space: nowrap;
}

.nav-section-label:first-child {
  margin-top: 3px;
}

.nav-section-label::before {
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  content: "";
  border-radius: 50%;
  background: #697593;
  box-shadow: 0 0 0 3px rgba(105, 117, 147, .1);
}

.nav-section-label::after {
  height: 1px;
  flex: 1;
  content: "";
  background: linear-gradient(90deg, rgba(125, 138, 187, .2), transparent);
}

.nav > button,
.nav .nav-group-toggle {
  position: relative;
  min-height: 48px !important;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 13px !important;
  gap: 12px;
  overflow: hidden;
  color: #aeb8d0 !important;
  border: 1px solid transparent !important;
  border-radius: 13px;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 640;
  line-height: 1;
  letter-spacing: .05px;
  transform: none !important;
  transition:
    color .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.nav > button::before,
.nav .nav-group-toggle::before {
  display: none !important;
}

.nav > button::after {
  display: none;
}

.nav-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0 5px;
  color: #7c88a7;
  filter: drop-shadow(0 0 0 transparent);
  transition:
    color .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

.nav > button:hover,
.nav .nav-group-toggle:hover {
  color: #f2f4ff !important;
  border-color: rgba(150, 160, 216, .13) !important;
  background: rgba(255, 255, 255, .052) !important;
}

.nav > button:hover .nav-icon,
.nav .nav-group-toggle:hover .nav-icon {
  color: #a4a7ff;
  filter: drop-shadow(0 0 7px rgba(135, 140, 255, .26));
}

.nav > button:focus-visible,
.nav .nav-group-toggle:focus-visible,
.nav .nav-sub-item:focus-visible {
  outline: 2px solid rgba(134, 139, 255, .8);
  outline-offset: 2px;
}

.nav > button.active {
  color: #fff !important;
  border-color: rgba(141, 145, 255, .24) !important;
  background:
    radial-gradient(circle at 0 50%, rgba(43, 215, 199, .13), transparent 38%),
    linear-gradient(96deg, rgba(111, 108, 255, .25), rgba(108, 111, 235, .105)) !important;
  box-shadow:
    inset 3px 0 #8588ff,
    inset 0 1px rgba(255, 255, 255, .04),
    0 10px 26px rgba(32, 38, 106, .2) !important;
}

.nav > button.active .nav-icon {
  color: #bec1ff;
  filter: drop-shadow(0 0 8px rgba(142, 147, 255, .46));
}

.nav-group {
  min-width: 0;
  display: grid;
  gap: 0;
}

.nav .nav-group-toggle[aria-expanded="true"],
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle {
  color: #f2f4ff !important;
  border-color: rgba(142, 151, 207, .13) !important;
  background: rgba(255, 255, 255, .045) !important;
}

.nav .nav-group-toggle[aria-expanded="true"] .nav-icon,
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle .nav-icon {
  color: #9ca0ff;
  filter: drop-shadow(0 0 7px rgba(134, 139, 255, .28));
}

.nav-group-arrow {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin: 0 3px 0 auto;
  color: transparent !important;
  font-size: 0 !important;
  border-right: 1.5px solid #6e7998;
  border-bottom: 1.5px solid #6e7998;
  transform: rotate(-45deg);
  transition:
    transform .18s ease,
    border-color .18s ease;
}

.nav-group-toggle[aria-expanded="false"] .nav-group-arrow {
  transform: rotate(-45deg);
}

.nav-group-toggle[aria-expanded="true"] .nav-group-arrow {
  border-color: #aeb7d0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.nav-sub {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 3px 5px 8px 30px;
  padding: 4px 0 4px 15px;
  border-left: 1px solid rgba(132, 145, 197, .21);
}

.nav-sub::before {
  position: absolute;
  top: 7px;
  left: -1px;
  width: 1px;
  height: 21px;
  content: "";
  background: linear-gradient(#8589ff, rgba(133, 137, 255, 0));
  opacity: .62;
}

.nav-group-toggle[aria-expanded="false"] + .nav-sub {
  display: none;
}

.nav .nav-sub-item {
  position: relative;
  min-height: 38px !important;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 11px !important;
  gap: 0;
  overflow: hidden;
  color: #8995b0 !important;
  border: 1px solid transparent !important;
  border-radius: 9px;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: .05px;
  transition:
    color .16s ease,
    border-color .16s ease,
    background-color .16s ease;
}

.nav .nav-sub-item::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  margin-right: 10px;
  content: "";
  border-radius: 50%;
  background: #5d6886;
  box-shadow: none;
}

.nav .nav-sub-item:hover {
  color: #e7eaff !important;
  border-color: rgba(145, 156, 211, .1) !important;
  background: rgba(255, 255, 255, .045) !important;
}

.nav .nav-sub-item:hover::before {
  background: #8f93ff;
}

.nav .nav-sub-item.active {
  color: #d6d8ff !important;
  border-color: rgba(131, 136, 255, .14) !important;
  background: linear-gradient(90deg, rgba(117, 119, 245, .18), rgba(117, 119, 245, .08)) !important;
  font-weight: 690;
}

.nav .nav-sub-item.active::before {
  background: #9296ff;
  box-shadow:
    0 0 0 3px rgba(146, 150, 255, .11),
    0 0 10px rgba(146, 150, 255, .46);
}

.sidebar-footer {
  min-height: 42px;
  flex: 0 0 auto;
  margin: 2px 3px 0;
  padding: 9px 11px;
  align-items: center;
  color: #78839f;
  border: 1px solid rgba(139, 151, 201, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .035),
    0 8px 22px rgba(2, 7, 23, .12);
  font-size: 10px;
  letter-spacing: .05px;
}

.sidebar-footer strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #53dbbd;
  font-size: 10px;
  font-weight: 720;
  white-space: nowrap;
}

.sidebar-footer strong::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  content: "";
  border-radius: 50%;
  background: #47d7b8;
  box-shadow: 0 0 10px rgba(71, 215, 184, .68);
}

@media (max-width: 980px) {
  .sidebar {
    width: auto;
    padding: 10px 12px;
    gap: 8px;
    overflow: visible;
    background:
      radial-gradient(circle at 10% 0, rgba(112, 105, 255, .2), transparent 30%),
      linear-gradient(180deg, #10162d, #0b1226);
  }

  .nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    padding: 0;
  }

  .nav-section-label {
    grid-column: 1 / -1;
    margin: 8px 8px 3px;
  }

  .nav-section-label:first-child {
    margin-top: 0;
  }

  .nav > button,
  .nav .nav-group-toggle {
    min-height: 44px !important;
    justify-content: flex-start;
    padding: 0 10px !important;
    gap: 8px;
    font-size: 13px !important;
  }

  .nav-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    margin: 0 2px;
  }

  .nav-sub {
    margin-left: 16px;
    padding-left: 10px;
  }

  .nav .nav-sub-item {
    min-height: 36px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 620px) {
  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Porcelain cloud light theme · v37 */
:root {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --panel-soft: #f7f9fd;
  --ink: #1d2740;
  --muted: #748099;
  --line: #e2e7f0;
  --line-strong: #ccd4e2;
  --accent: #5d65dc;
  --accent-soft: #eef0ff;
  --amber: #c98523;
  --amber-soft: #fff5df;
  --danger: #d94c65;
  --danger-soft: #fff0f3;
  --info: #347bd5;
  --info-soft: #edf5ff;
  --sidebar: #f8faff;
  --sidebar-muted: #66738d;
  --shadow: 0 15px 38px rgba(32, 45, 78, .075);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 72% -10%, rgba(100, 109, 229, .105), transparent 31%),
    radial-gradient(circle at 105% 56%, rgba(39, 194, 181, .07), transparent 28%),
    linear-gradient(180deg, #f7f9fd 0%, #f1f5fa 100%);
}

.login-screen {
  background:
    radial-gradient(circle at 16% 18%, rgba(104, 113, 235, .2), transparent 30%),
    radial-gradient(circle at 84% 76%, rgba(36, 194, 184, .16), transparent 31%),
    linear-gradient(145deg, #eef3fb 0%, #f8faff 52%, #edf8f7 100%);
}

.login-screen::before {
  opacity: .5;
  background-image:
    linear-gradient(rgba(103, 116, 166, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 116, 166, .08) 1px, transparent 1px);
}

.login-screen::after {
  border-color: rgba(83, 174, 183, .18);
  box-shadow:
    0 0 0 70px rgba(84, 191, 186, .04),
    0 0 0 140px rgba(100, 109, 229, .03);
}

.login-panel {
  border-color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .93);
  box-shadow:
    0 32px 90px rgba(43, 58, 94, .16),
    0 0 0 1px rgba(205, 214, 232, .74);
}

.sidebar {
  color: #202a42;
  border-right-color: #e1e6f0;
  background:
    radial-gradient(circle at 10% 0, rgba(103, 108, 224, .105), transparent 27%),
    radial-gradient(circle at 108% 42%, rgba(40, 191, 181, .075), transparent 31%),
    linear-gradient(180deg, #fcfdff 0%, #f8faff 54%, #f3f6fb 100%);
  box-shadow:
    16px 0 46px rgba(36, 48, 82, .07),
    inset -1px 0 rgba(255, 255, 255, .78);
}

.sidebar::before {
  opacity: .7;
  background-image:
    linear-gradient(rgba(104, 119, 166, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 119, 166, .045) 1px, transparent 1px);
}

.sidebar::after {
  height: 3px;
  background: linear-gradient(90deg, #7773f2 0%, #8b7bed 48%, #33c6b8 100%);
  box-shadow: 0 3px 18px rgba(100, 109, 229, .24);
}

.sidebar > .brand {
  border-bottom-color: #e2e7f0;
}

.sidebar .brand-mark {
  border-color: rgba(91, 93, 203, .18);
  box-shadow:
    0 11px 25px rgba(83, 88, 204, .25),
    inset 0 1px rgba(255, 255, 255, .32);
}

.sidebar .brand-mark::after {
  border-color: #f9fbff;
}

.sidebar .brand strong {
  color: #202941;
}

.sidebar .brand small {
  color: #929db2;
}

.nav {
  scrollbar-color: rgba(115, 127, 164, .24) transparent;
}

.nav::-webkit-scrollbar-thumb {
  background: rgba(115, 127, 164, .24);
}

.nav-section-label {
  color: #8b96aa;
}

.nav-section-label::before {
  background: #adb6c7;
  box-shadow: 0 0 0 3px rgba(135, 147, 173, .1);
}

.nav-section-label::after {
  background: linear-gradient(90deg, rgba(139, 151, 179, .21), transparent);
}

.nav > button,
.nav .nav-group-toggle {
  color: #5f6b84 !important;
}

.nav-icon {
  color: #8995ac;
}

.nav > button:hover,
.nav .nav-group-toggle:hover {
  color: #28334d !important;
  border-color: #e6e9f2 !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 7px 18px rgba(39, 51, 85, .055) !important;
}

.nav > button:hover .nav-icon,
.nav .nav-group-toggle:hover .nav-icon {
  color: #6268d7;
  filter: drop-shadow(0 0 6px rgba(98, 104, 215, .2));
}

.nav > button.active {
  color: #454ab9 !important;
  border-color: #dcdffd !important;
  background:
    radial-gradient(circle at 0 50%, rgba(45, 196, 181, .09), transparent 38%),
    linear-gradient(96deg, #eeefff, #f6f7ff) !important;
  box-shadow:
    inset 3px 0 #686de1,
    0 9px 23px rgba(66, 70, 164, .09) !important;
}

.nav > button.active .nav-icon {
  color: #5a60cf;
  filter: drop-shadow(0 0 6px rgba(90, 96, 207, .2));
}

.nav .nav-group-toggle[aria-expanded="true"],
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle {
  color: #303a54 !important;
  border-color: #e4e8f0 !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: 0 6px 17px rgba(40, 52, 85, .045) !important;
}

.nav .nav-group-toggle[aria-expanded="true"] .nav-icon,
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle .nav-icon {
  color: #6268d7;
}

.nav-group-arrow {
  border-color: #9aa4b7;
}

.nav-group-toggle[aria-expanded="true"] .nav-group-arrow {
  border-color: #697388;
}

.nav-sub {
  border-left-color: #dfe4ed;
}

.nav-sub::before {
  background: linear-gradient(#777be6, rgba(119, 123, 230, 0));
  opacity: .48;
}

.nav .nav-sub-item {
  color: #758197 !important;
}

.nav .nav-sub-item::before {
  background: #b1b9c9;
}

.nav .nav-sub-item:hover {
  color: #343e57 !important;
  border-color: #e6e9f1 !important;
  background: #f0f3f8 !important;
}

.nav .nav-sub-item:hover::before {
  background: #777be2;
}

.nav .nav-sub-item.active {
  color: #4b50bd !important;
  border-color: #e0e2fc !important;
  background: linear-gradient(90deg, #ebedff, #f2f3ff) !important;
}

.nav .nav-sub-item.active::before {
  background: #686ddc;
  box-shadow:
    0 0 0 3px rgba(104, 109, 220, .1),
    0 0 9px rgba(104, 109, 220, .25);
}

.sidebar-footer {
  color: #8b95a9;
  border-color: #e0e5ee;
  background: rgba(255, 255, 255, .78);
  box-shadow:
    inset 0 1px #fff,
    0 7px 18px rgba(42, 54, 87, .045);
}

.sidebar-footer strong {
  color: #198d79;
}

.sidebar-footer strong::before {
  background: #2cbaa0;
  box-shadow: 0 0 9px rgba(44, 186, 160, .4);
}

.topbar {
  border-bottom-color: rgba(214, 221, 234, .9);
  background: rgba(251, 252, 255, .9);
  box-shadow: 0 8px 26px rgba(37, 49, 82, .045);
}

.cloud-status {
  color: #237e72;
  border-color: #ccece6;
  background: #edf9f6;
}

.user-label {
  color: #59657d;
  border-color: #e0e5ee;
  background: #fff;
}

/* Keep the dashboard motion, but render it as a light data atmosphere. */
.view-root[data-view="dashboard"] {
  --dash-ink: #202a42;
  --dash-muted: #748099;
  --dash-line: #e1e6ef;
  border-color: #dfe5ef;
  background:
    radial-gradient(circle at 12% 4%, rgba(105, 109, 229, .13), transparent 30%),
    radial-gradient(circle at 94% 28%, rgba(43, 196, 184, .105), transparent 32%),
    radial-gradient(circle at 48% 102%, rgba(139, 112, 211, .075), transparent 36%),
    linear-gradient(145deg, #f8faff 0%, #f2f6fb 50%, #f2faf9 100%);
  box-shadow:
    inset 0 1px #fff,
    0 24px 64px rgba(32, 45, 78, .085);
}

.dashboard-cosmos::before {
  background:
    radial-gradient(circle at 20% 24%, rgba(89, 98, 165, .42) 0 1px, transparent 1.7px),
    radial-gradient(circle at 71% 17%, rgba(91, 108, 195, .34) 0 1px, transparent 1.8px),
    radial-gradient(circle at 43% 79%, rgba(97, 111, 174, .28) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 67%, rgba(37, 172, 163, .36) 0 1px, transparent 1.7px);
  background-size: 137px 149px, 211px 193px, 173px 227px, 263px 239px;
  opacity: .32;
}

.dashboard-cosmos::after {
  background:
    radial-gradient(ellipse at 19% 30%, rgba(111, 105, 241, .11), transparent 26%),
    radial-gradient(ellipse at 76% 37%, rgba(41, 196, 185, .09), transparent 30%),
    radial-gradient(ellipse at 55% 84%, rgba(152, 92, 205, .065), transparent 28%);
  opacity: .7;
}

.dashboard-cosmos-stars.far,
.dashboard-cosmos-stars.near {
  opacity: .16;
  filter: none;
}

.dashboard-cosmos-orbit {
  border-color: rgba(99, 110, 201, .12);
  box-shadow:
    0 0 0 58px rgba(91, 106, 221, .02),
    0 0 0 118px rgba(38, 190, 196, .015),
    inset 0 0 70px rgba(61, 201, 210, .025);
}

.dashboard-cosmos-comet {
  opacity: .35;
  background: linear-gradient(90deg, transparent, rgba(99, 122, 188, .08), rgba(83, 111, 184, .42));
  box-shadow: 0 0 8px rgba(86, 120, 190, .18);
}

.view-root[data-view="dashboard"] .dashboard-command-strip {
  color: #202a42;
  border-color: rgba(194, 202, 226, .9);
  background:
    radial-gradient(circle at 78% 22%, rgba(104, 111, 230, .12), transparent 29%),
    radial-gradient(circle at 93% 84%, rgba(38, 194, 181, .11), transparent 29%),
    linear-gradient(132deg, rgba(255, 255, 255, .94), rgba(244, 246, 255, .93) 58%, rgba(237, 249, 247, .94));
  box-shadow:
    inset 0 1px #fff,
    0 20px 48px rgba(37, 48, 83, .085);
}

.dashboard-command-strip::after {
  opacity: .17;
  background-image:
    linear-gradient(rgba(103, 116, 166, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 116, 166, .14) 1px, transparent 1px);
}

.dashboard-live-line,
.dashboard-command-copy p {
  color: #78849b;
}

.dashboard-live-badge {
  color: #168d78;
  border-color: #bfe7de;
  background: #eaf8f5;
}

.dashboard-command-copy h2,
.dashboard-sync-state strong {
  color: #202a42;
}

.dashboard-command-actions .small-button:not(.primary) {
  color: #525f78;
  border-color: #d6ddeb;
  background: rgba(255, 255, 255, .78);
}

.dashboard-sync-state {
  border-left-color: #dce2ec;
}

.dashboard-sync-orbit {
  border-color: rgba(50, 182, 169, .22);
  background: rgba(239, 249, 248, .92);
}

.dashboard-sync-orbit b {
  color: #247f73;
}

.view-root[data-view="dashboard"] .dashboard-focus-card,
.view-root[data-view="dashboard"] .dashboard-kpi,
.view-root[data-view="dashboard"] .panel,
.view-root[data-view="dashboard"] .panel:not(.dashboard-risk-panel),
.view-root[data-view="dashboard"] .dashboard-trend-panel {
  color: var(--dash-ink);
  border-color: rgba(219, 225, 237, .96);
  background:
    radial-gradient(circle at 100% 0, rgba(105, 109, 229, .055), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(247, 249, 253, .95));
  box-shadow:
    inset 0 1px #fff,
    0 14px 38px rgba(35, 47, 81, .07);
}

.view-root[data-view="dashboard"] .dashboard-risk-panel {
  background:
    radial-gradient(circle at 90% 8%, rgba(217, 76, 101, .06), transparent 31%),
    linear-gradient(145deg, #fff, #fbf9fc);
}

.view-root[data-view="dashboard"] .dashboard-focus-card.inventory,
.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(1) {
  background:
    radial-gradient(circle at 100% 0, rgba(105, 109, 229, .1), transparent 38%),
    linear-gradient(145deg, #fff, #f5f6ff);
}

.view-root[data-view="dashboard"] .dashboard-focus-card.supply,
.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(2) {
  background:
    radial-gradient(circle at 100% 0, rgba(43, 196, 184, .1), transparent 39%),
    linear-gradient(145deg, #fff, #f1faf8);
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(3) {
  background:
    radial-gradient(circle at 100% 0, rgba(219, 151, 48, .09), transparent 38%),
    linear-gradient(145deg, #fff, #fffaf1);
}

.view-root[data-view="dashboard"] .dashboard-kpi:nth-child(4) {
  background:
    radial-gradient(circle at 100% 0, rgba(150, 116, 218, .09), transparent 38%),
    linear-gradient(145deg, #fff, #faf6ff);
}

.view-root[data-view="dashboard"] .dashboard-trend-body {
  background:
    linear-gradient(rgba(119, 133, 173, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 133, 173, .05) 1px, transparent 1px),
    radial-gradient(circle at 48% 42%, rgba(100, 109, 229, .045), transparent 56%);
  background-size: 100% 56px, 72px 100%, auto;
}

.view-root[data-view="dashboard"] .dashboard-trend-chart text {
  fill: #8893a9;
}

.view-root[data-view="dashboard"] .dashboard-chart-grid {
  stroke: rgba(119, 133, 173, .15);
}

.view-root[data-view="dashboard"] .dashboard-chart-point {
  fill: #fff;
  stroke: #2ebdad;
}

.view-root[data-view="dashboard"] .dashboard-health-ring > span,
.view-root[data-view="dashboard"] .dashboard-donut > span {
  color: var(--dash-ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--dash-line);
}

.view-root[data-view="dashboard"] .dashboard-pipeline-stage {
  color: var(--dash-ink);
  border-color: var(--dash-line);
  background: #f8f9fc;
}

.view-root[data-view="dashboard"] .dashboard-pipeline-stage:hover,
.view-root[data-view="dashboard"] .dashboard-live-queue > button:hover,
.view-root[data-view="dashboard"] .dashboard-risk-row:hover {
  background: #f0f2ff;
}

.view-root[data-view="dashboard"] .dashboard-fulfillment-summary span {
  background: #f8f9fc;
}

.view-root[data-view="dashboard"] .dashboard-queue-empty {
  border-color: #dce2ec;
  background: #f8fafc;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix .table-wrap,
.view-root[data-view="dashboard"] .dashboard-store-matrix table {
  background: #fff;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix th {
  color: #6f7b92;
  border-color: var(--dash-line);
  background: #f5f7fb;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix td {
  color: #2f3a53;
  border-color: var(--dash-line);
  background: #fff;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover td,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within td {
  color: #28334d !important;
  background: #f1f3ff !important;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover .dashboard-danger-text,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within .dashboard-danger-text {
  color: #d94c65 !important;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix .small-button,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover .small-button,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within .small-button,
.view-root[data-view="dashboard"] .dashboard-store-matrix .small-button:hover,
.view-root[data-view="dashboard"] .dashboard-store-matrix .small-button:focus-visible {
  color: #4c52bd !important;
  border-color: #d8dbf7 !important;
  background: #eef0ff !important;
  box-shadow: none;
}

.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover .progress,
.view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within .progress {
  background: #e3e7f0;
}

.modal {
  color: #202a41;
  border-color: #dfe4ed;
  background: #fff;
  box-shadow: 0 30px 90px rgba(34, 45, 77, .2);
}

.toast {
  color: #f8faff;
  background: #27324b;
  box-shadow: 0 18px 42px rgba(34, 45, 77, .22);
}

@media (max-width: 980px) {
  .sidebar {
    background:
      radial-gradient(circle at 10% 0, rgba(103, 108, 224, .1), transparent 29%),
      linear-gradient(180deg, #fcfdff, #f3f6fb);
  }
}

/* Arctic sci-fi login command deck · v38 */
.app-shell[hidden] {
  display: none !important;
}

.login-screen {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(440px, 1fr) minmax(420px, 500px);
  align-items: center;
  gap: clamp(48px, 8vw, 138px);
  overflow: hidden;
  padding: clamp(34px, 5vw, 76px) clamp(28px, 8vw, 150px);
  background:
    radial-gradient(circle at 13% 18%, rgba(99, 91, 255, .32), transparent 28%),
    radial-gradient(circle at 82% 74%, rgba(21, 211, 205, .22), transparent 31%),
    radial-gradient(circle at 52% 112%, rgba(79, 119, 255, .2), transparent 38%),
    linear-gradient(137deg, #050a19 0%, #0b1330 48%, #071e2a 100%);
}

.login-screen.login-live {
  animation: login-stage-wake .72s cubic-bezier(.2, .8, .2, 1) both;
}

.login-screen::before {
  position: absolute;
  z-index: -3;
  inset: -25%;
  content: "";
  opacity: .46;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(129, 149, 219, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 149, 219, .07) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(73, 235, 224, .72) 0 1px, transparent 1.7px);
  background-position: 0 0, 0 0, 12px 24px, 84px 119px;
  background-size: 64px 64px, 64px 64px, 173px 193px, 251px 271px;
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .86) 68%, transparent 100%);
  transform: perspective(900px) rotateX(58deg) translateY(22%);
  transform-origin: 50% 100%;
  animation: login-grid-drift 17s linear infinite;
}

.login-screen::after {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 46%;
  width: min(48vw, 690px);
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(123, 145, 255, .15);
  border-radius: 50%;
  background:
    conic-gradient(from 30deg, transparent 0 12%, rgba(82, 232, 219, .22) 14%, transparent 17% 47%, rgba(129, 126, 255, .2) 50%, transparent 53% 100%);
  box-shadow:
    0 0 0 70px rgba(110, 119, 255, .023),
    0 0 0 142px rgba(45, 210, 199, .018),
    inset 0 0 90px rgba(79, 109, 239, .035);
  transform: translate(-50%, -50%) rotateX(67deg) rotateZ(-8deg);
  animation: login-orbit-spin 22s linear infinite;
}

.login-neural-field {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-neural-field::before {
  position: absolute;
  top: -22%;
  left: 52%;
  width: 1px;
  height: 145%;
  content: "";
  opacity: .64;
  background: linear-gradient(transparent, rgba(105, 245, 230, .48), transparent);
  box-shadow:
    54px 0 25px rgba(103, 111, 255, .2),
    -72px 0 42px rgba(38, 215, 205, .12);
  transform: rotate(21deg);
  animation: login-scan-pass 8s ease-in-out infinite;
}

.login-neural-field::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 18% 35%, rgba(131, 134, 255, .12), transparent 16%),
    radial-gradient(circle at 76% 18%, rgba(50, 219, 207, .095), transparent 18%),
    radial-gradient(circle at 62% 88%, rgba(99, 72, 222, .1), transparent 18%);
  filter: blur(20px);
  animation: login-nebula-breathe 9s ease-in-out infinite alternate;
}

.login-neural-field i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #73ece1;
  box-shadow:
    0 0 8px #73ece1,
    0 0 23px rgba(115, 236, 225, .72);
  animation: login-node-pulse 3s ease-in-out infinite;
}

.login-neural-field i::before,
.login-neural-field i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1px;
  content: "";
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(100, 229, 220, .42), transparent);
}

.login-neural-field i::before {
  width: 120px;
  transform: rotate(24deg);
}

.login-neural-field i::after {
  width: 82px;
  transform: rotate(148deg);
}

.login-neural-field i:nth-child(1) { top: 17%; left: 10%; animation-delay: -.4s; }
.login-neural-field i:nth-child(2) { top: 31%; left: 35%; animation-delay: -1.5s; }
.login-neural-field i:nth-child(3) { top: 72%; left: 19%; animation-delay: -2.2s; }
.login-neural-field i:nth-child(4) { top: 83%; left: 47%; animation-delay: -.9s; }
.login-neural-field i:nth-child(5) { top: 20%; right: 14%; animation-delay: -1.9s; }
.login-neural-field i:nth-child(6) { top: 61%; right: 7%; animation-delay: -.2s; }
.login-neural-field i:nth-child(7) { top: 44%; left: 55%; animation-delay: -2.7s; }

.login-data-stream {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.login-data-stream span {
  position: absolute;
  left: -34%;
  width: clamp(220px, 28vw, 520px);
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(116, 128, 255, .22), #7df9e8 72%, transparent);
  box-shadow:
    0 0 10px rgba(82, 228, 215, .55),
    0 0 28px rgba(91, 99, 235, .2);
  transform: rotate(-7deg);
  animation: login-data-beam 6.4s cubic-bezier(.38, 0, .2, 1) infinite;
}

.login-data-stream span::after {
  position: absolute;
  top: -2px;
  right: 12%;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: #d8fffb;
  box-shadow:
    0 0 8px #71f1e3,
    0 0 20px rgba(113, 241, 227, .82);
}

.login-data-stream span:nth-child(1) { top: 23%; animation-delay: -1.1s; }
.login-data-stream span:nth-child(2) { top: 54%; animation-delay: -4.6s; }
.login-data-stream span:nth-child(3) { top: 79%; animation-delay: -2.8s; }

.login-hud-copy {
  position: relative;
  z-index: 2;
  max-width: 660px;
  color: #f5f7ff;
  text-shadow: 0 2px 22px rgba(4, 10, 31, .42);
}

.login-screen.login-live .login-hud-copy {
  animation: login-hud-arrive .92s .08s cubic-bezier(.2, .8, .2, 1) both;
}

.login-hud-copy::before {
  position: absolute;
  top: -48px;
  left: -48px;
  width: 128px;
  height: 84px;
  content: "";
  border-top: 1px solid rgba(119, 236, 227, .46);
  border-left: 1px solid rgba(119, 236, 227, .28);
  clip-path: polygon(0 0, 100% 0, 100% 1px, 1px 1px, 1px 100%, 0 100%);
}

.login-hud-kicker {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  color: #8ff9eb;
  border: 1px solid rgba(102, 233, 218, .25);
  border-radius: 999px;
  background: rgba(26, 195, 177, .08);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 1.65px;
}

.login-hud-copy h2 {
  margin: 22px 0 18px;
  font-size: clamp(42px, 4.5vw, 72px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -2.4px;
}

.login-hud-copy h2 em {
  display: block;
  color: transparent;
  background: linear-gradient(92deg, #a5aaff 0%, #ecedff 44%, #71efe0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: .78em;
  font-style: normal;
  letter-spacing: -1.7px;
  white-space: nowrap;
  filter: drop-shadow(0 0 20px rgba(107, 215, 215, .15));
}

.login-hud-copy > p {
  max-width: 560px;
  margin: 0;
  color: #aeb9d2;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .15px;
}

.login-hud-stats {
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 34px;
}

.login-hud-stats > div {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid rgba(135, 151, 213, .16);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .055),
    0 12px 30px rgba(2, 7, 23, .14);
  backdrop-filter: blur(12px);
}

.login-screen.login-live .login-hud-stats > div {
  animation: login-stat-float 5.4s ease-in-out infinite;
}

.login-screen.login-live .login-hud-stats > div:nth-child(2) {
  animation-delay: -.9s;
}

.login-screen.login-live .login-hud-stats > div:nth-child(3) {
  animation-delay: -1.8s;
}

.login-hud-stats strong,
.login-hud-stats span {
  display: block;
}

.login-hud-stats strong {
  overflow: hidden;
  color: #eff2ff;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-hud-stats span {
  margin-top: 6px;
  color: #7885a3;
  font-size: 10px;
}

.login-panel {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 480px;
  display: grid;
  gap: 16px;
  padding: 30px 32px 28px;
  overflow: hidden;
  color: #202a42;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 25px;
  background:
    radial-gradient(circle at 100% 0, rgba(107, 112, 241, .1), transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(243, 247, 253, .92));
  box-shadow:
    0 38px 100px rgba(0, 7, 28, .44),
    0 0 0 1px rgba(119, 136, 196, .14),
    inset 0 1px rgba(255, 255, 255, .92);
  backdrop-filter: blur(28px) saturate(125%);
  animation: none;
}

.login-screen.login-live .login-panel {
  animation:
    login-panel-arrive .74s .14s cubic-bezier(.2, .8, .2, 1) both,
    login-panel-aura 5.6s 1s ease-in-out infinite;
}

.login-panel::before {
  position: absolute;
  inset: 0 30px auto;
  height: 3px;
  content: "";
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, #7478ff, #a86df0 48%, #2ed5c7);
  box-shadow: 0 2px 18px rgba(103, 109, 238, .42);
}

.login-panel::after {
  position: absolute;
  right: -54px;
  bottom: -54px;
  width: 180px;
  height: 180px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(102, 108, 226, .13);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(102, 108, 226, .026),
    0 0 0 58px rgba(42, 197, 184, .018);
}

.login-system-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 11px;
  color: #8b96aa;
  border-bottom: 1px solid #e5e9f1;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 1px;
}

.login-system-state span,
.login-system-state em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.login-system-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2bc3a8;
  box-shadow: 0 0 9px rgba(43, 195, 168, .55);
  animation: login-status-pulse 2s ease-in-out infinite;
}

.login-system-state em {
  color: #198d79;
  font-style: normal;
  letter-spacing: 1.25px;
}

.login-panel .login-brand {
  min-height: 50px;
  margin-top: 2px;
}

.login-brand .brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(130, 132, 255, .25);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 45%),
    linear-gradient(145deg, #7478ff, #6b68e9 52%, #2ac9bd);
  box-shadow:
    0 12px 28px rgba(87, 91, 213, .3),
    inset 0 1px rgba(255, 255, 255, .3);
}

.login-brand strong {
  color: #212a41;
  font-size: 17px;
}

.login-brand small {
  color: #929db2;
}

.login-panel h1 {
  margin: 8px 0 -8px;
  color: #1e2740;
  font-size: 30px;
  font-weight: 790;
  letter-spacing: -.6px;
}

.login-subtitle {
  margin: 0 0 3px;
  color: #7a859b;
  font-size: 12px;
}

.login-panel label {
  display: grid;
  gap: 8px;
  color: #6e7990;
  font-size: 12px;
  font-weight: 620;
}

.login-panel input {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  color: #202a42;
  border: 1px solid #d6ddea;
  border-radius: 11px;
  outline: 0;
  background:
    linear-gradient(90deg, rgba(102, 108, 226, .035), transparent 38%),
    rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 1px 2px rgba(36, 46, 77, .025),
    0 0 0 0 rgba(99, 105, 224, 0);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.login-panel input:hover {
  border-color: #c3cce0;
}

.login-panel input:focus {
  border-color: #7c81e8;
  background-color: #fff;
  box-shadow:
    0 0 0 4px rgba(100, 106, 224, .11),
    0 10px 24px rgba(55, 66, 111, .06);
}

.login-panel .primary-button {
  position: relative;
  min-height: 49px;
  overflow: hidden;
  margin-top: 4px;
  color: #fff;
  border: 0;
  border-radius: 11px;
  background:
    radial-gradient(circle at 88% 15%, rgba(65, 223, 207, .45), transparent 29%),
    linear-gradient(105deg, #5d64e5 0%, #6a57e6 58%, #367fd8 100%);
  box-shadow:
    0 14px 30px rgba(79, 84, 205, .3),
    inset 0 1px rgba(255, 255, 255, .22);
  font-size: 14px;
  font-weight: 740;
  letter-spacing: .8px;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.login-panel .primary-button::before {
  position: absolute;
  top: -90%;
  left: -28%;
  width: 19%;
  height: 280%;
  content: "";
  opacity: .7;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: rotate(20deg);
  animation: login-button-sheen 4.8s ease-in-out infinite;
}

.login-panel .primary-button:hover {
  filter: saturate(112%) brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 18px 36px rgba(79, 84, 205, .36),
    inset 0 1px rgba(255, 255, 255, .24);
}

.login-panel .primary-button:active {
  transform: translateY(0);
}

.login-hint {
  position: relative;
  z-index: 1;
  margin: 1px 0 0;
  padding-top: 12px;
  color: #8994a8;
  border-top: 1px solid #e6eaf2;
  font-size: 11px;
  line-height: 1.7;
}

@keyframes login-grid-drift {
  from { background-position: 0 0, 0 0, 12px 24px, 84px 119px; }
  to { background-position: 64px 64px, 64px 64px, 185px 217px, 335px 390px; }
}

@keyframes login-stage-wake {
  from { opacity: 0; filter: saturate(.72) brightness(.7); }
  to { opacity: 1; filter: saturate(1) brightness(1); }
}

@keyframes login-hud-arrive {
  from { opacity: 0; transform: translate3d(-30px, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes login-data-beam {
  0%, 12% { opacity: 0; transform: translate3d(-12vw, 0, 0) rotate(-7deg); }
  24% { opacity: .72; }
  68% { opacity: .28; }
  82%, 100% { opacity: 0; transform: translate3d(146vw, -13vh, 0) rotate(-7deg); }
}

@keyframes login-stat-float {
  0%, 100% { transform: translateY(0); border-color: rgba(135, 151, 213, .16); }
  50% { transform: translateY(-5px); border-color: rgba(111, 235, 224, .24); }
}

@keyframes login-panel-aura {
  0%, 100% {
    box-shadow:
      0 38px 100px rgba(0, 7, 28, .44),
      0 0 0 1px rgba(119, 136, 196, .14),
      0 0 42px rgba(82, 101, 232, .05),
      inset 0 1px rgba(255, 255, 255, .92);
  }
  50% {
    box-shadow:
      0 42px 112px rgba(0, 7, 28, .5),
      0 0 0 1px rgba(111, 230, 219, .22),
      0 0 64px rgba(63, 205, 198, .14),
      inset 0 1px rgba(255, 255, 255, .96);
  }
}

@keyframes login-orbit-spin {
  from { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(-8deg); }
  to { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(352deg); }
}

@keyframes login-scan-pass {
  0%, 100% { opacity: .2; transform: translateX(-44vw) rotate(21deg); }
  48%, 58% { opacity: .72; }
  72% { opacity: .18; transform: translateX(55vw) rotate(21deg); }
}

@keyframes login-nebula-breathe {
  from { opacity: .58; transform: scale(.96) translate3d(-1%, 1%, 0); }
  to { opacity: 1; transform: scale(1.08) translate3d(2%, -2%, 0); }
}

@keyframes login-node-pulse {
  0%, 100% { opacity: .45; transform: scale(.72); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes login-status-pulse {
  0%, 100% { opacity: .65; box-shadow: 0 0 0 0 rgba(43, 195, 168, 0); }
  50% { opacity: 1; box-shadow: 0 0 0 4px rgba(43, 195, 168, .12); }
}

@keyframes login-panel-arrive {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes login-button-sheen {
  0%, 32% { opacity: 0; transform: translateX(-160%) rotate(20deg); }
  42% { opacity: .72; }
  62%, 100% { opacity: 0; transform: translateX(780%) rotate(20deg); }
}

@media (max-width: 1050px) {
  .login-screen {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 460px);
    gap: 44px;
    padding-inline: 5vw;
  }

  .login-hud-copy h2 {
    font-size: clamp(36px, 5vw, 56px);
  }

  .login-hud-stats {
    grid-template-columns: 1fr;
    max-width: 230px;
  }
}

@media (max-width: 820px) {
  .login-screen {
    grid-template-columns: minmax(0, 470px);
    justify-content: center;
    padding: 30px 20px;
  }

  .login-hud-copy {
    display: none;
  }

  .login-screen::after {
    left: 50%;
    width: 92vw;
  }

  .login-panel {
    max-width: 470px;
  }
}

@media (max-width: 520px) {
  .login-screen {
    align-items: center;
    padding: 18px 14px;
  }

  .login-panel {
    gap: 14px;
    padding: 24px 21px 22px;
    border-radius: 21px;
  }

  .login-panel h1 {
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-screen::before,
  .login-screen::after,
  .login-neural-field::before,
  .login-neural-field::after,
  .login-neural-field i,
  .login-data-stream span,
  .login-system-state i,
  .login-hud-copy,
  .login-hud-stats > div,
  .login-panel,
  .login-panel .primary-button::before {
    animation: none !important;
  }
}

/* Spacious luminous navigation · v39 */
@media (min-width: 981px) {
  .sidebar {
    width: 286px;
    padding-inline: 15px;
  }

  .sidebar::before {
    width: 286px;
  }

  .main {
    margin-left: 286px;
  }
}

.sidebar > .brand {
  min-height: 88px;
  gap: 13px;
  padding-inline: 9px;
}

.sidebar .brand-mark {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 14px;
}

.sidebar .brand strong {
  font-size: 19px;
  font-weight: 790;
  letter-spacing: -.3px;
}

.sidebar .brand small {
  margin-top: 5px;
  font-size: 9.5px;
  letter-spacing: 1.5px;
}

.nav {
  gap: 3px;
  padding-inline: 2px;
}

.nav-section-label {
  min-height: 22px;
  gap: 10px;
  margin: 20px 12px 8px;
  color: #7f8ba2;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 1.05px;
}

.nav-section-label::before {
  width: 4px;
  height: 4px;
  flex-basis: 4px;
  background: linear-gradient(135deg, #7277e5, #35bbaa);
  box-shadow:
    0 0 0 3px rgba(102, 108, 220, .09),
    0 0 8px rgba(67, 177, 168, .2);
}

.nav-section-label::after {
  background: linear-gradient(90deg, rgba(114, 125, 162, .24), transparent);
}

.nav > button,
.nav .nav-group-toggle {
  min-height: 52px !important;
  padding: 0 14px !important;
  gap: 13px;
  border-radius: 14px;
  font-size: 16px !important;
  font-weight: 660;
  letter-spacing: 0;
}

.nav-icon {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
  margin: 0 7px;
  color: #7f8ba4;
  border-radius: 6px;
  box-shadow: 0 0 0 7px rgba(121, 133, 166, .07);
}

.nav > button:hover,
.nav .nav-group-toggle:hover {
  border-color: #dfe4ef !important;
  background:
    radial-gradient(circle at 0 50%, rgba(48, 193, 179, .05), transparent 34%),
    #fff !important;
  box-shadow:
    0 9px 22px rgba(38, 50, 84, .065),
    inset 0 1px #fff !important;
}

.nav > button:hover .nav-icon,
.nav .nav-group-toggle:hover .nav-icon {
  color: #5f65d1;
  box-shadow:
    0 0 0 7px rgba(101, 106, 217, .09),
    0 0 14px rgba(95, 101, 209, .1);
}

.nav > button.active {
  color: #3f44b1 !important;
  border-color: #d8dbfa !important;
  background:
    radial-gradient(circle at 100% 0, rgba(44, 196, 181, .09), transparent 34%),
    linear-gradient(96deg, #e9ebff 0%, #f5f6ff 78%) !important;
  box-shadow:
    inset 3px 0 #656add,
    0 11px 25px rgba(66, 70, 164, .11),
    inset 0 1px #fff !important;
}

.nav > button.active::after {
  position: absolute;
  right: 15px;
  width: 6px;
  height: 6px;
  display: block;
  content: "";
  border: 2px solid #f4f5ff;
  border-radius: 50%;
  background: #37bda8;
  box-shadow: 0 0 9px rgba(55, 189, 168, .44);
}

.nav > button.active .nav-icon {
  color: #555bc9;
  box-shadow:
    0 0 0 7px rgba(94, 99, 210, .11),
    0 0 15px rgba(85, 91, 201, .13);
}

.nav .nav-group-toggle[aria-expanded="true"],
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle {
  color: #2d3852 !important;
  border-color: #e0e5ef !important;
  background:
    radial-gradient(circle at 100% 0, rgba(105, 109, 229, .055), transparent 33%),
    rgba(255, 255, 255, .88) !important;
  box-shadow:
    0 8px 20px rgba(39, 52, 86, .055),
    inset 0 1px #fff !important;
}

.nav .nav-group-toggle[aria-expanded="true"] .nav-icon,
.nav-group:has(.nav-sub-item.active) > .nav-group-toggle .nav-icon {
  color: #5e64d0;
  box-shadow:
    0 0 0 7px rgba(100, 105, 214, .09),
    0 0 14px rgba(94, 100, 208, .1);
}

.nav-group-arrow {
  width: 9px;
  height: 9px;
  flex-basis: 9px;
  margin-right: 4px;
}

.nav-sub {
  gap: 3px;
  margin: 4px 5px 9px 34px;
  padding: 5px 0 5px 17px;
}

.nav .nav-sub-item {
  min-height: 40px !important;
  padding-inline: 12px !important;
  border-radius: 10px;
  font-size: 14px !important;
  font-weight: 580;
}

.nav .nav-sub-item::before {
  width: 5px;
  height: 5px;
  flex-basis: 5px;
  margin-right: 11px;
}

.nav .nav-sub-item:hover {
  background:
    linear-gradient(90deg, rgba(101, 106, 220, .055), rgba(255, 255, 255, .72)) !important;
}

.nav .nav-sub-item.active {
  font-weight: 710;
  background:
    radial-gradient(circle at 100% 0, rgba(45, 196, 181, .07), transparent 36%),
    linear-gradient(90deg, #e8eaff, #f4f5ff) !important;
  box-shadow:
    inset 2px 0 #777be4,
    0 6px 16px rgba(66, 70, 164, .055);
}

.sidebar-footer {
  min-height: 44px;
  padding-inline: 12px;
  font-size: 11px;
}

.sidebar-footer strong {
  font-size: 10.5px;
}

@media (max-width: 980px) {
  .nav-section-label {
    font-size: 11px;
  }

  .nav > button,
  .nav .nav-group-toggle {
    min-height: 45px !important;
    padding-inline: 10px !important;
    gap: 8px;
    font-size: 14px !important;
  }

  .nav-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    margin-inline: 3px;
    box-shadow: 0 0 0 5px rgba(121, 133, 166, .07);
  }

  .nav .nav-sub-item {
    min-height: 37px !important;
    font-size: 13px !important;
  }
}

/* Label-free navigation rhythm · v40 */
.nav {
  padding-top: 14px;
}

.nav > button[data-view="dashboard"] {
  margin-bottom: 7px;
}

.nav-group:has(.icon-product) {
  position: relative;
  padding-top: 8px;
}

.nav-group:has(.icon-product)::before,
.nav-group:has(.icon-insight)::before {
  position: absolute;
  top: 0;
  right: 12px;
  left: 12px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(124, 137, 171, .2), transparent);
}

.nav-group:has(.icon-insight) {
  position: relative;
  margin-top: 8px;
  padding-top: 10px;
}

@media (max-width: 980px) {
  .nav {
    padding-top: 0;
  }

  .nav > button[data-view="dashboard"] {
    margin-bottom: 0;
  }

  .nav-group:has(.icon-product),
  .nav-group:has(.icon-insight) {
    margin-top: 0;
    padding-top: 0;
  }

  .nav-group:has(.icon-product)::before,
  .nav-group:has(.icon-insight)::before {
    display: none;
  }
}

/* Retail operations ledger · v41
   Visual direction: porcelain work surface, ink hierarchy, mint live state,
   and a single indigo action color. Structural accents encode workflow state. */
:root {
  --retail-canvas: #f3f6fa;
  --retail-surface: #ffffff;
  --retail-surface-soft: #f7f9fc;
  --retail-ink: #17233b;
  --retail-copy: #3d4960;
  --retail-muted: #738098;
  --retail-line: #e1e7f0;
  --retail-line-strong: #cfd7e5;
  --retail-action: #5862d8;
  --retail-action-deep: #454db9;
  --retail-action-soft: #eef0ff;
  --retail-live: #20a88f;
  --retail-live-soft: #eaf8f4;
  --retail-warn: #c78324;
  --retail-warn-soft: #fff5e3;
  --retail-danger: #d94f67;
  --retail-danger-soft: #fff0f3;
  --retail-shadow: 0 14px 38px rgba(29, 42, 73, .07);
  --retail-shadow-raised: 0 22px 54px rgba(29, 42, 73, .1);
}

body,
button,
input,
select,
textarea {
  font-family:
    "HarmonyOS Sans SC",
    "MiSans",
    "Microsoft YaHei UI",
    "PingFang SC",
    system-ui,
    sans-serif;
}

.topbar {
  min-height: 92px;
  padding: 17px 26px;
  border-bottom: 1px solid rgba(210, 219, 234, .88);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(249, 251, 255, .92));
  box-shadow: 0 9px 28px rgba(38, 51, 84, .05);
  backdrop-filter: blur(18px) saturate(120%);
}

.topbar > div:first-child {
  position: relative;
  padding-left: 15px;
}

.topbar > div:first-child::before {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 3px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(180deg, var(--retail-action), var(--retail-live));
  box-shadow: 0 0 13px rgba(62, 158, 162, .22);
}

.topbar p {
  margin-bottom: 4px;
  color: #6976a6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.25px;
}

.topbar h1 {
  color: var(--retail-ink);
  font-size: 26px;
  font-weight: 790;
  letter-spacing: -.55px;
}

.topbar-actions {
  gap: 9px;
}

.topbar-actions select,
.topbar-actions button,
.topbar-actions .user-label,
.topbar-actions .cloud-status {
  min-height: 42px;
  border-radius: 11px;
}

.topbar-actions select {
  min-width: 220px;
  color: #2c3851;
  border: 1px solid #d8dfeb;
  background-color: rgba(255, 255, 255, .92);
}

.topbar-actions select:focus-visible,
.topbar-actions button:focus-visible {
  outline: 3px solid rgba(88, 98, 216, .14);
  outline-offset: 2px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) {
  --page-card: var(--retail-surface);
  --page-card-soft: var(--retail-surface-soft);
  --page-line: var(--retail-line);
  --page-line-strong: var(--retail-line-strong);
  --page-ink: var(--retail-ink);
  --page-muted: var(--retail-muted);
  gap: 18px;
  padding: 22px 24px 34px;
  color: var(--retail-ink);
  background:
    linear-gradient(rgba(113, 129, 167, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 129, 167, .022) 1px, transparent 1px);
  background-size: 32px 32px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) > * {
  animation: retail-surface-arrive .34s cubic-bezier(.2, .75, .25, 1) both;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) > *:nth-child(2) {
  animation-delay: 45ms;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) > *:nth-child(3) {
  animation-delay: 80ms;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel {
  overflow: clip;
  border: 1px solid var(--retail-line);
  border-radius: 16px;
  background: var(--retail-surface);
  box-shadow: var(--retail-shadow);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel:hover {
  border-color: #d8dfeb;
  box-shadow: var(--retail-shadow-raised);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header {
  position: relative;
  min-height: 78px;
  gap: 20px;
  padding: 18px 20px 17px 23px;
  border-bottom: 1px solid #e8ecf3;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header::before {
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 3px;
  height: auto;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--retail-action), var(--retail-live));
  box-shadow: 0 0 12px rgba(71, 120, 188, .18);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header > div:first-child {
  min-width: 220px;
  display: grid;
  align-content: center;
  gap: 4px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header h2 {
  margin: 0;
  color: var(--retail-ink);
  font-size: 18px;
  font-weight: 780;
  line-height: 1.35;
  letter-spacing: -.2px;
}

.panel-eyebrow {
  color: #6d76b5;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .hint,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .muted {
  color: var(--retail-muted);
  font-size: 11px;
  line-height: 1.55;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .toolbar {
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) input,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) select,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) textarea {
  min-height: 41px;
  color: #29364e;
  border: 1px solid #d6deea;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    inset 0 1px 2px rgba(25, 37, 65, .025),
    0 1px 1px rgba(255, 255, 255, .8);
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) input:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) select:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) textarea:hover {
  border-color: #bcc7d8;
  background-color: #fefeff;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) input:focus,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) select:focus,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) textarea:focus {
  border-color: #777fe4;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(88, 98, 216, .105);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .small-button,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .ghost-button,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-button {
  min-height: 38px;
  padding: 0 14px;
  color: #44516a;
  border: 1px solid #d8dfeb;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(31, 44, 75, .035);
  font-size: 12px;
  font-weight: 680;
  line-height: 36px;
  text-decoration: none;
  transition:
    color .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .small-button:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .ghost-button:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-button:hover {
  color: var(--retail-action-deep);
  border-color: #c7ccf2;
  background: #f6f7ff;
  box-shadow: 0 7px 16px rgba(55, 65, 131, .08);
  transform: translateY(-1px);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .small-button.primary,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .primary-button,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-button.active {
  color: #fff;
  border-color: var(--retail-action);
  background: var(--retail-action);
  box-shadow: 0 8px 18px rgba(69, 77, 185, .19);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .small-button.primary:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .primary-button:hover,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .restock-mode-button.active:hover {
  border-color: var(--retail-action-deep);
  background: var(--retail-action-deep);
  box-shadow: 0 11px 23px rgba(69, 77, 185, .24);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .small-button:focus-visible,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .primary-button:focus-visible,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .ghost-button:focus-visible {
  outline: 3px solid rgba(88, 98, 216, .14);
  outline-offset: 2px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric-grid,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric-grid.compact {
  gap: 12px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric {
  min-height: 102px;
  padding: 17px 18px;
  border: 1px solid var(--retail-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(31, 44, 76, .05);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric::before {
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 2px;
  content: "";
  border-radius: 0 0 999px 999px;
  background: #8a91e8;
  opacity: .85;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(2)::before {
  background: var(--retail-live);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(3)::before {
  background: var(--retail-warn);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric-grid .metric:nth-child(4)::before {
  background: #9675cf;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric span,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric small {
  color: var(--retail-muted);
  font-size: 11px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .metric strong {
  color: var(--retail-ink);
  font-size: clamp(24px, 2.1vw, 31px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.7px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 0;
  border-radius: 0 0 15px 15px;
  background: #fff;
  scrollbar-color: #c8d0df transparent;
  scrollbar-width: thin;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) table {
  width: 100%;
  color: var(--retail-copy);
  border-spacing: 0;
  background: #fff;
  font-size: 12px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) th {
  position: sticky;
  z-index: 2;
  top: 0;
  height: 44px;
  padding: 0 13px;
  color: #65728a;
  border-bottom: 1px solid #dce3ed;
  background: #f4f7fb;
  box-shadow: inset 0 -1px #dce3ed;
  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: .2px;
  white-space: nowrap;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) td {
  min-height: 52px;
  padding: 13px;
  color: #344159;
  border-bottom: 1px solid #edf0f5;
  background: #fff;
  line-height: 1.55;
  vertical-align: middle;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) tbody tr:nth-child(even) td {
  background: #fcfdff;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) tbody tr {
  transition: box-shadow .15s ease;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) tbody tr:hover {
  box-shadow: inset 3px 0 var(--retail-action);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) tbody tr:hover td {
  color: #27344d;
  background: #f4f6ff;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .badge {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding-inline: 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .pagination-bar,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .product-catalog-actions,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .store-catalog-actions,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .purchase-store-toolbar,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .unified-order-toolbar,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .catalog-filter-bar {
  border: 1px solid #e3e8f1;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: inset 0 1px #fff;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .product-catalog-actions,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .store-catalog-actions {
  position: relative;
  margin: 12px 18px;
  padding: 10px 12px 10px 15px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .product-catalog-actions::before,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .store-catalog-actions::before {
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 2px;
  content: "";
  border-radius: 999px;
  background: var(--retail-live);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .catalog-view-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  background: #eef2f7;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .catalog-view-switch .small-button {
  min-height: 31px;
  padding-inline: 12px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  line-height: 29px;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .catalog-view-switch .small-button.active {
  color: var(--retail-action-deep);
  border-color: #d9def0;
  background: #fff;
  box-shadow: 0 4px 10px rgba(34, 48, 79, .07);
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .empty {
  min-height: 168px;
  display: grid;
  place-items: center;
  margin: 18px;
  color: #8490a5;
  border: 1px dashed #cfd8e6;
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 0, rgba(88, 98, 216, .045), transparent 45%),
    #fafbfd;
  font-size: 12px;
}

/* Store-management signature: one integrated network ledger, not a card mosaic. */
.store-portfolio-brief {
  position: relative;
  min-height: 206px;
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(600px, 1.55fr);
  gap: 24px;
  overflow: hidden;
  padding: 24px;
  color: var(--retail-ink);
  border: 1px solid #dce3ee;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 18%, rgba(88, 98, 216, .1), transparent 28%),
    radial-gradient(circle at 95% 82%, rgba(32, 168, 143, .09), transparent 29%),
    linear-gradient(125deg, #ffffff 0%, #f7f9ff 54%, #f3faf8 100%);
  box-shadow: var(--retail-shadow);
}

.store-portfolio-brief::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(106, 121, 164, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 121, 164, .035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent 18%, #000 68%);
}

.store-portfolio-copy,
.store-portfolio-metrics {
  position: relative;
  z-index: 1;
}

.store-portfolio-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 3px 8px;
}

.store-portfolio-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6974ae;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 1.1px;
}

.store-portfolio-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--retail-live);
  box-shadow: 0 0 0 4px rgba(32, 168, 143, .1), 0 0 12px rgba(32, 168, 143, .24);
  animation: retail-live-pulse 2.4s ease-in-out infinite;
}

.store-portfolio-copy h2 {
  max-width: 480px;
  margin: 14px 0 8px;
  color: var(--retail-ink);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -1px;
}

.store-portfolio-copy p {
  max-width: 560px;
  margin: 0;
  color: #68758d;
  font-size: 12px;
  line-height: 1.75;
}

.store-portfolio-sync {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 6px 9px;
  color: #197f6d;
  border: 1px solid #cce9e2;
  border-radius: 999px;
  background: rgba(235, 249, 245, .82);
  font-size: 10px;
  font-weight: 720;
}

.store-portfolio-sync::before {
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--retail-live);
}

.store-portfolio-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(208, 218, 232, .92);
  border-radius: 15px;
  background: rgba(255, 255, 255, .78);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .9),
    0 13px 34px rgba(37, 50, 84, .055);
  backdrop-filter: blur(10px);
}

.store-portfolio-metrics article {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 17px;
}

.store-portfolio-metrics article + article {
  border-left: 1px solid #e4e9f1;
}

.store-portfolio-metrics article::before {
  position: absolute;
  top: 0;
  right: 17px;
  left: 17px;
  height: 2px;
  content: "";
  border-radius: 0 0 999px 999px;
  background: var(--retail-action);
  opacity: .76;
}

.store-portfolio-metrics article:nth-child(2)::before {
  background: var(--retail-live);
}

.store-portfolio-metrics article:nth-child(3)::before {
  background: var(--retail-warn);
}

.store-portfolio-metrics article:nth-child(4)::before {
  background: #8c72c7;
}

.store-portfolio-metrics span,
.store-portfolio-metrics small {
  overflow: hidden;
  color: #7b879c;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-portfolio-metrics span {
  font-size: 10px;
  font-weight: 730;
}

.store-portfolio-metrics strong {
  margin: 9px 0 7px;
  color: var(--retail-ink);
  font-size: clamp(25px, 2.6vw, 38px);
  font-weight: 790;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.store-portfolio-metrics strong em {
  margin-left: 2px;
  color: #6d7890;
  font-size: 13px;
  font-style: normal;
  font-weight: 690;
}

.store-portfolio-metrics small {
  font-size: 9.5px;
}

.store-directory-panel .panel-header {
  align-items: center;
}

.store-directory-table .table-wrap {
  max-height: calc(100vh - 390px);
  min-height: 230px;
}

.store-directory-table th:first-child,
.store-directory-table td:first-child {
  padding-left: 20px;
}

.store-code {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 8px;
  color: #4e56ba;
  border: 1px solid #d9ddfa;
  border-radius: 7px;
  background: #f1f2ff;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .2px;
}

.store-name {
  color: #202d45;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.store-stock {
  color: #167e6b;
  font-size: 13px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.view-root[data-view="catalog"] .store-catalog-panel {
  box-shadow: 0 18px 48px rgba(28, 41, 72, .08);
}

.view-root[data-view="catalog"] .store-catalog-toolbar {
  max-width: min(100%, 880px);
}

.view-root[data-view="catalog"] .store-catalog-toolbar input {
  min-width: 230px;
}

@keyframes retail-surface-arrive {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes retail-live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(32, 168, 143, .08), 0 0 8px rgba(32, 168, 143, .16);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(32, 168, 143, .035), 0 0 15px rgba(32, 168, 143, .28);
  }
}

@media (max-width: 1320px) {
  .store-portfolio-brief {
    grid-template-columns: minmax(270px, .8fr) minmax(500px, 1.4fr);
  }

  .store-portfolio-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-portfolio-metrics article:nth-child(3) {
    border-top: 1px solid #e4e9f1;
    border-left: 0;
  }

  .store-portfolio-metrics article:nth-child(4) {
    border-top: 1px solid #e4e9f1;
  }
}

@media (max-width: 1080px) {
  .topbar {
    align-items: flex-start;
  }

  .topbar-actions {
    justify-content: flex-end;
  }

  .topbar-actions select {
    min-width: 180px;
  }

  .store-portfolio-brief {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) {
    padding: 15px 13px 25px;
  }

  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header {
    align-items: stretch;
    padding: 16px;
  }

  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .toolbar {
    justify-content: flex-start;
  }

  .store-portfolio-brief {
    min-height: 0;
    padding: 19px;
  }

  .store-portfolio-copy {
    padding: 0;
  }

  .store-portfolio-copy h2 {
    font-size: 25px;
  }

  .store-portfolio-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .topbar {
    padding: 14px;
  }

  .topbar h1 {
    font-size: 23px;
  }

  .store-portfolio-metrics {
    grid-template-columns: 1fr;
  }

  .store-portfolio-metrics article + article,
  .store-portfolio-metrics article:nth-child(3) {
    border-top: 1px solid #e4e9f1;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) > *,
  .store-portfolio-kicker i {
    animation: none !important;
  }

  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .small-button,
  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .ghost-button,
  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) tbody tr {
    transition: none !important;
  }
}

/* Inventory decision rail · scoped intelligent replenishment workspace */
.view-root[data-view="purchases"] {
  --strategy-paper: #f6f8fb;
  --strategy-ink: #19263b;
  --strategy-indigo: #5862d8;
  --strategy-teal: #1e9b82;
  --strategy-amber: #c4832c;
  --strategy-coral: #d95367;
  min-width: 0;
  padding-bottom: 42px;
  background:
    linear-gradient(rgba(83, 99, 138, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 99, 138, .022) 1px, transparent 1px),
    var(--strategy-paper);
  background-size: 32px 32px;
}

.view-root[data-view="purchases"] .restock-mode-switch {
  min-height: 48px;
  padding: 5px;
  gap: 4px;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(31, 46, 78, .045);
}

.view-root[data-view="purchases"] .restock-mode-switch > span {
  margin-left: auto;
  padding: 0 12px;
  color: #77839a;
  font-size: 11px;
}

.view-root[data-view="purchases"] .restock-mode-button {
  min-height: 36px;
  padding: 0 15px;
  color: #68758c;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 12px;
  font-weight: 680;
}

.view-root[data-view="purchases"] .restock-mode-button:hover {
  color: var(--strategy-ink);
  background: #f2f4f9;
}

.view-root[data-view="purchases"] .restock-mode-button.active {
  color: #fff;
  background: var(--strategy-indigo);
  box-shadow: 0 7px 16px rgba(88, 98, 216, .22);
}

.view-root[data-view="purchases"] .inventory-strategy-hero {
  position: relative;
  overflow: hidden;
  border-color: #dce3ed;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(88, 98, 216, .032) 1px, transparent 1px),
    #fff;
  background-size: 78px 100%;
  box-shadow: 0 20px 54px rgba(29, 42, 72, .085);
}

.view-root[data-view="purchases"] .inventory-strategy-hero::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--strategy-indigo), var(--strategy-teal));
}

.view-root[data-view="purchases"] .inventory-strategy-heading {
  min-height: 148px;
  padding: 27px 30px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid #e6ebf2;
}

.view-root[data-view="purchases"] .inventory-strategy-heading > div:first-child {
  max-width: 720px;
}

.view-root[data-view="purchases"] .inventory-strategy-kicker {
  display: block;
  color: #6973ac;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 1.15px;
}

.view-root[data-view="purchases"] .inventory-strategy-heading h2 {
  margin: 13px 0 8px;
  color: var(--strategy-ink);
  font-family: "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(25px, 2.3vw, 36px);
  font-weight: 820;
  line-height: 1.15;
  letter-spacing: -1.15px;
}

.view-root[data-view="purchases"] .inventory-strategy-heading p {
  max-width: 660px;
  margin: 0;
  color: #68758c;
  font-size: 12px;
  line-height: 1.75;
}

.view-root[data-view="purchases"] .inventory-strategy-controls {
  width: min(510px, 44%);
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto auto;
  align-items: end;
  gap: 8px;
}

.view-root[data-view="purchases"] .inventory-strategy-controls label {
  display: grid;
  gap: 6px;
}

.view-root[data-view="purchases"] .inventory-strategy-controls label > span {
  color: #7a869a;
  font-size: 9.5px;
  font-weight: 720;
}

.view-root[data-view="purchases"] .inventory-strategy-controls select,
.view-root[data-view="purchases"] .inventory-strategy-controls .small-button {
  min-height: 40px;
  border-radius: 10px;
}

.view-root[data-view="purchases"] .inventory-strategy-controls select {
  width: 100%;
  color: #26334b;
  border: 1px solid #d4dce8;
  background: #fff;
  font-weight: 650;
}

.view-root[data-view="purchases"] .inventory-strategy-controls select:focus-visible,
.view-root[data-view="purchases"] .inventory-strategy-controls button:focus-visible,
.view-root[data-view="purchases"] .strategy-risk-switch button:focus-visible,
.view-root[data-view="purchases"] .strategy-evidence button:focus-visible,
.view-root[data-view="purchases"] .strategy-decision-table tr:focus-visible,
.view-root[data-view="purchases"] .strategy-decision-table input:focus-visible,
.view-root[data-view="purchases"] .strategy-basket button:focus-visible,
.view-root[data-view="purchases"] .strategy-mobile-basket button:focus-visible {
  outline: 3px solid rgba(88, 98, 216, .2);
  outline-offset: 2px;
}

.view-root[data-view="purchases"] .stock-waterline {
  padding: 36px 31px 18px;
}

.view-root[data-view="purchases"] .stock-waterline-scale {
  position: relative;
  height: 23px;
  margin: 0 9px;
}

.view-root[data-view="purchases"] .stock-waterline-scale span {
  position: absolute;
  bottom: 5px;
  color: #7c879b;
  font-family: "DIN Alternate", "JetBrains Mono", "SFMono-Regular", monospace;
  font-size: 9px;
  font-weight: 690;
  transform: translateX(-50%);
  white-space: nowrap;
}

.view-root[data-view="purchases"] .stock-waterline-scale span:first-child {
  transform: none;
}

.view-root[data-view="purchases"] .stock-waterline-scale span:last-child {
  transform: translateX(-100%);
}

.view-root[data-view="purchases"] .stock-waterline-scale span.is-lead {
  color: var(--strategy-amber);
}

.view-root[data-view="purchases"] .stock-waterline-track {
  position: relative;
  height: 21px;
  margin: 0 9px;
  border: 1px solid #dbe2ec;
  border-radius: 999px;
  background: #edf1f6;
  box-shadow:
    inset 0 2px 5px rgba(30, 43, 71, .08),
    0 1px rgba(255, 255, 255, .9);
}

.view-root[data-view="purchases"] .stock-waterline-track::before,
.view-root[data-view="purchases"] .stock-waterline-track::after {
  position: absolute;
  top: -7px;
  bottom: -7px;
  z-index: 1;
  width: 1px;
  content: "";
  background: rgba(83, 96, 126, .3);
}

.view-root[data-view="purchases"] .stock-waterline-track::before {
  left: var(--strategy-lead-point);
  background: rgba(196, 131, 44, .6);
}

.view-root[data-view="purchases"] .stock-waterline-track::after {
  left: 50%;
}

.view-root[data-view="purchases"] .stock-waterline-zone {
  position: absolute;
  top: 0;
  bottom: 0;
}

.view-root[data-view="purchases"] .stock-waterline-zone.is-risk {
  left: 0;
  width: var(--strategy-lead-point);
  border-radius: 999px 0 0 999px;
  background: rgba(217, 83, 103, .15);
}

.view-root[data-view="purchases"] .stock-waterline-zone.is-watch {
  left: var(--strategy-lead-point);
  width: calc(50% - var(--strategy-lead-point));
  background: rgba(196, 131, 44, .14);
}

.view-root[data-view="purchases"] .stock-waterline-zone.is-healthy {
  right: 0;
  left: 50%;
  border-radius: 0 999px 999px 0;
  background: rgba(30, 155, 130, .13);
}

.view-root[data-view="purchases"] .stock-waterline-dot {
  position: absolute;
  top: 5px;
  z-index: 2;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: var(--strategy-amber);
  box-shadow: 0 1px 4px rgba(41, 54, 84, .24);
  opacity: .55;
  transform: translateX(-50%);
  transition: top .22s ease, width .22s ease, height .22s ease, opacity .22s ease;
}

.view-root[data-view="purchases"] .stock-waterline-dot:nth-of-type(3n + 1) {
  top: 2px;
}

.view-root[data-view="purchases"] .stock-waterline-dot:nth-of-type(3n + 2) {
  top: 8px;
}

.view-root[data-view="purchases"] .stock-waterline-dot.critical {
  background: var(--strategy-coral);
}

.view-root[data-view="purchases"] .stock-waterline-dot.review {
  background: var(--strategy-teal);
}

.view-root[data-view="purchases"] .stock-waterline-dot.blocked {
  background: #7e899c;
}

.view-root[data-view="purchases"] .stock-waterline-dot.is-active {
  top: 4px;
  z-index: 5;
  width: 12px;
  height: 12px;
  opacity: 1;
  box-shadow:
    0 0 0 4px rgba(88, 98, 216, .13),
    0 2px 8px rgba(41, 54, 84, .3);
}

.view-root[data-view="purchases"] .stock-waterline-marker {
  position: absolute;
  top: -13px;
  z-index: 4;
  height: 47px;
  border-left: 2px solid var(--strategy-indigo);
  transform: translateX(-1px);
  transition: left .28s cubic-bezier(.2, .75, .25, 1);
}

.view-root[data-view="purchases"] .stock-waterline-marker b {
  position: absolute;
  top: -1px;
  left: -5px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--strategy-indigo);
  box-shadow: 0 2px 6px rgba(88, 98, 216, .28);
}

.view-root[data-view="purchases"] .stock-waterline-marker span {
  position: absolute;
  bottom: -26px;
  left: 50%;
  max-width: 190px;
  overflow: hidden;
  padding: 4px 7px;
  color: #fff;
  border-radius: 6px;
  background: var(--strategy-indigo);
  box-shadow: 0 5px 13px rgba(88, 98, 216, .2);
  font-size: 8.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  white-space: nowrap;
}

.view-root[data-view="purchases"] .stock-waterline-caption {
  min-height: 32px;
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #7c8799;
  font-size: 9.5px;
}

.view-root[data-view="purchases"] .stock-waterline-caption strong {
  color: #5d6880;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 650;
}

.view-root[data-view="purchases"] .strategy-risk-switch {
  margin: 0 30px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 13px;
  background: #f8f9fc;
}

.view-root[data-view="purchases"] .strategy-risk-switch button {
  min-height: 53px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #66738a;
  border: 0;
  border-right: 1px solid #e2e7ef;
  background: transparent;
  font-size: 11px;
  font-weight: 650;
}

.view-root[data-view="purchases"] .strategy-risk-switch button:last-child {
  border-right: 0;
}

.view-root[data-view="purchases"] .strategy-risk-switch button:hover {
  color: var(--strategy-ink);
  background: #fff;
}

.view-root[data-view="purchases"] .strategy-risk-switch button.active {
  color: #343d9d;
  background: #f0f1ff;
  box-shadow: inset 0 -2px var(--strategy-indigo);
}

.view-root[data-view="purchases"] .strategy-risk-switch button strong {
  min-width: 27px;
  padding: 3px 7px;
  color: #334059;
  border-radius: 999px;
  background: #fff;
  font-family: "DIN Alternate", "JetBrains Mono", monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Adaptive replenishment stage ledger · v214 */
.view-root[data-view="purchases"] .adaptive-stage-grid {
  margin: 14px 30px 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.view-root[data-view="purchases"] .adaptive-stage-grid button {
  min-width: 0;
  min-height: 72px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  text-align: left;
  color: #526079;
  border: 1px solid #dfe5ee;
  border-radius: 11px;
  background: #fff;
}

.view-root[data-view="purchases"] .adaptive-stage-grid button:hover,
.view-root[data-view="purchases"] .adaptive-stage-grid button.active {
  color: #303a94;
  border-color: #aeb6ee;
  background: linear-gradient(135deg, #f7f8ff, #eef1ff);
  box-shadow: 0 7px 18px rgba(55, 65, 145, .08);
}

.view-root[data-view="purchases"] .adaptive-stage-grid span {
  font-size: 10.5px;
  font-weight: 760;
}

.view-root[data-view="purchases"] .adaptive-stage-grid strong {
  color: #202c45;
  font-family: "DIN Alternate", "JetBrains Mono", monospace;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.view-root[data-view="purchases"] .adaptive-stage-grid small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #8590a2;
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-root[data-view="purchases"] .strategy-stage-badge {
  margin-top: 5px;
  padding: 3px 7px;
  display: inline-flex;
  width: max-content;
  color: #44516a;
  border: 1px solid #d8dfeb;
  border-radius: 999px;
  background: #f6f8fb;
  font-size: 8px;
  font-weight: 720;
  white-space: nowrap;
}

.view-root[data-view="purchases"] .strategy-stage-badge.stage-opening { color: #19715f; border-color: #b9e1d7; background: #ecfaf6; }
.view-root[data-view="purchases"] .strategy-stage-badge.stage-ramp { color: #8a5a12; border-color: #ead5aa; background: #fff8e9; }
.view-root[data-view="purchases"] .strategy-stage-badge.stage-mature { color: #3945a8; border-color: #cbd0f5; background: #f1f3ff; }
.view-root[data-view="purchases"] .strategy-stage-badge.stage-data_pending { color: #a14b4b; border-color: #efc7c7; background: #fff2f2; }

.view-root[data-view="purchases"] .strategy-product-cell .strategy-evidence-chain {
  max-width: 390px;
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.view-root[data-view="purchases"] .strategy-queue-actions label:has(#strategySituationFilter) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #748096;
  font-size: 9px;
  white-space: nowrap;
}

.view-root[data-view="purchases"] #strategySituationFilter {
  width: auto;
  min-width: 112px;
  min-height: 34px;
  padding: 0 30px 0 9px;
  border-color: #d8dfeb;
  border-radius: 8px;
  background-color: #fff;
  font-size: 9px;
}

.view-root[data-view="purchases"] .inventory-strategy-summary {
  min-height: 65px;
  margin-top: 17px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  border-top: 1px solid #edf0f5;
  background: #fafbfd;
}

.view-root[data-view="purchases"] .inventory-strategy-summary span {
  color: #6e7a90;
  font-size: 10px;
  white-space: nowrap;
}

.view-root[data-view="purchases"] .inventory-strategy-summary b {
  margin-right: 4px;
  color: var(--strategy-ink);
  font-family: "DIN Alternate", "JetBrains Mono", monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.view-root[data-view="purchases"] .inventory-strategy-summary small {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: #7c879a;
  font-size: 9px;
  line-height: 1.55;
  text-align: right;
  text-overflow: ellipsis;
}

.view-root[data-view="purchases"] .inventory-strategy-empty {
  min-height: 240px;
  padding: 50px 30px;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
}

.view-root[data-view="purchases"] .inventory-strategy-empty strong {
  color: var(--strategy-ink);
  font-size: 22px;
}

.view-root[data-view="purchases"] .inventory-strategy-empty span {
  color: #778399;
  font-size: 12px;
}

.view-root[data-view="purchases"] .inventory-strategy-workspace {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 18px;
}

.view-root[data-view="purchases"] .strategy-decision-queue {
  min-width: 0;
  overflow: hidden;
}

.view-root[data-view="purchases"] .strategy-queue-header {
  min-height: 92px;
  padding: 18px 20px 16px 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-bottom: 1px solid #e6ebf2;
  background: #fff;
}

.view-root[data-view="purchases"] .strategy-queue-header > div:first-child > span,
.view-root[data-view="purchases"] .strategy-evidence header > div:first-child > span {
  color: #737db2;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 8.5px;
  font-weight: 760;
  letter-spacing: 1px;
}

.view-root[data-view="purchases"] .strategy-queue-header h2,
.view-root[data-view="purchases"] .strategy-evidence h2 {
  margin: 5px 0 3px;
  color: var(--strategy-ink);
  font-size: 16px;
  font-weight: 770;
  letter-spacing: -.25px;
}

.view-root[data-view="purchases"] .strategy-queue-header p {
  margin: 0;
  color: #7b8799;
  font-size: 9.5px;
}

.view-root[data-view="purchases"] .strategy-queue-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.view-root[data-view="purchases"] .strategy-queue-actions label {
  min-height: 34px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #637086;
  border: 1px solid #dce3ed;
  border-radius: 9px;
  background: #f8f9fc;
  font-size: 9.5px;
  font-weight: 640;
  white-space: nowrap;
}

.view-root[data-view="purchases"] .strategy-queue-actions input,
.view-root[data-view="purchases"] .strategy-check-cell input {
  accent-color: var(--strategy-indigo);
}

.view-root[data-view="purchases"] .strategy-table-wrap {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  background: #fff;
}

.view-root[data-view="purchases"] .strategy-decision-table {
  width: 100%;
  min-width: 1370px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.view-root[data-view="purchases"] .strategy-decision-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 42px;
  padding: 0 9px;
  color: #758198;
  border-bottom: 1px solid #dce3ed;
  background: #f5f7fa;
  font-size: 9px;
  font-weight: 750;
  text-align: left;
  white-space: nowrap;
}

.view-root[data-view="purchases"] .strategy-decision-table th:nth-child(1) {
  width: 42px;
  text-align: center;
}

.view-root[data-view="purchases"] .strategy-decision-table th:nth-child(2) {
  width: 102px;
}

.view-root[data-view="purchases"] .strategy-decision-table th:nth-child(3) {
  width: 205px;
}

.view-root[data-view="purchases"] .strategy-decision-table th:nth-child(4) {
  width: 126px;
}

.view-root[data-view="purchases"] .strategy-decision-table th:nth-child(5) {
  width: 150px;
}

.view-root[data-view="purchases"] .strategy-decision-table th:nth-child(6) {
  width: 145px;
}

.view-root[data-view="purchases"] .strategy-decision-table th:nth-child(7) {
  width: 142px;
}

.view-root[data-view="purchases"] .strategy-decision-table th:nth-child(8) {
  width: 95px;
}

.view-root[data-view="purchases"] .strategy-decision-table th:nth-child(9) {
  width: 170px;
}

.view-root[data-view="purchases"] .strategy-decision-table td {
  min-width: 0;
  padding: 12px 9px;
  color: #354158;
  border-bottom: 1px solid #edf0f5;
  background: #fff;
  font-size: 10px;
  line-height: 1.45;
  vertical-align: middle;
}

.view-root[data-view="purchases"] .strategy-decision-table tr {
  outline: 0;
}

.view-root[data-view="purchases"] .strategy-decision-table tbody tr:hover td,
.view-root[data-view="purchases"] .strategy-decision-table tbody tr:focus td {
  background: #fafbff;
}

.view-root[data-view="purchases"] .strategy-decision-table tbody tr.is-selected td {
  background: #f4f5ff;
}

.view-root[data-view="purchases"] .strategy-decision-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 var(--strategy-indigo);
}

.view-root[data-view="purchases"] .strategy-check-cell {
  text-align: center;
}

.view-root[data-view="purchases"] .strategy-not-orderable {
  color: #a5aebb;
}

.view-root[data-view="purchases"] .strategy-risk-cell,
.view-root[data-view="purchases"] .strategy-product-cell,
.view-root[data-view="purchases"] .strategy-coverage-cell,
.view-root[data-view="purchases"] .strategy-demand-cell,
.view-root[data-view="purchases"] .strategy-inbound-cell,
.view-root[data-view="purchases"] .strategy-target-cell,
.view-root[data-view="purchases"] .strategy-supplier-cell {
  overflow: hidden;
}

.view-root[data-view="purchases"] .strategy-risk-badge,
.view-root[data-view="purchases"] .strategy-abc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.view-root[data-view="purchases"] .strategy-risk-badge {
  min-height: 23px;
  padding: 0 7px;
  color: #8b591d;
  border: 1px solid #eed3a9;
  border-radius: 7px;
  background: #fff6e6;
  font-size: 8.5px;
  font-weight: 760;
}

.view-root[data-view="purchases"] .strategy-risk-badge.critical {
  color: #a8364a;
  border-color: #f0c5cc;
  background: #fff0f3;
}

.view-root[data-view="purchases"] .strategy-risk-badge.review {
  color: #147963;
  border-color: #bfe5dc;
  background: #edf9f6;
}

.view-root[data-view="purchases"] .strategy-risk-badge.blocked {
  color: #626d7f;
  border-color: #d8dee7;
  background: #f1f3f6;
}

.view-root[data-view="purchases"] .strategy-abc {
  min-width: 28px;
  min-height: 21px;
  margin-top: 5px;
  padding: 0 6px;
  border-radius: 6px;
  font-family: "DIN Alternate", "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 800;
}

.view-root[data-view="purchases"] .strategy-abc.abc-a {
  color: #4049b4;
  background: #eef0ff;
}

.view-root[data-view="purchases"] .strategy-abc.abc-b {
  color: #2d7668;
  background: #edf8f5;
}

.view-root[data-view="purchases"] .strategy-abc.abc-c {
  color: #6e7889;
  background: #f1f3f6;
}

.view-root[data-view="purchases"] .strategy-abc.abc-u {
  color: #8a611f;
  background: #fff5df;
}

.view-root[data-view="purchases"] .strategy-product-cell strong,
.view-root[data-view="purchases"] .strategy-coverage-cell strong,
.view-root[data-view="purchases"] .strategy-demand-cell strong,
.view-root[data-view="purchases"] .strategy-inbound-cell strong,
.view-root[data-view="purchases"] .strategy-target-cell strong,
.view-root[data-view="purchases"] .strategy-supplier-cell strong {
  display: block;
  overflow: hidden;
  color: #22304a;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-root[data-view="purchases"] .strategy-product-cell > strong {
  color: #4d57bd;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: .15px;
}

.view-root[data-view="purchases"] .strategy-product-cell > span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #27354e;
  font-size: 10.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-root[data-view="purchases"] .strategy-product-cell small,
.view-root[data-view="purchases"] .strategy-coverage-cell span,
.view-root[data-view="purchases"] .strategy-demand-cell span,
.view-root[data-view="purchases"] .strategy-demand-cell small,
.view-root[data-view="purchases"] .strategy-inbound-cell span,
.view-root[data-view="purchases"] .strategy-inbound-cell small,
.view-root[data-view="purchases"] .strategy-target-cell span,
.view-root[data-view="purchases"] .strategy-target-cell small,
.view-root[data-view="purchases"] .strategy-supplier-cell span,
.view-root[data-view="purchases"] .strategy-supplier-cell small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #7b879a;
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-root[data-view="purchases"] .strategy-coverage-cell > i {
  position: relative;
  width: 100%;
  height: 4px;
  margin-top: 7px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edf3;
}

.view-root[data-view="purchases"] .strategy-coverage-cell > i b {
  width: var(--strategy-coverage);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--strategy-coral), var(--strategy-amber) 42%, var(--strategy-teal));
}

.view-root[data-view="purchases"] .strategy-quantity-cell input {
  width: 76px;
  min-height: 35px;
  padding: 0 7px;
  color: #27344d;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  background: #fff;
  font-family: "DIN Alternate", "JetBrains Mono", monospace;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.view-root[data-view="purchases"] .strategy-quantity-cell input:focus {
  border-color: var(--strategy-indigo);
  box-shadow: 0 0 0 3px rgba(88, 98, 216, .1);
}

.view-root[data-view="purchases"] .strategy-quantity-cell > strong {
  color: #7f8999;
  font-size: 8.5px;
}

.view-root[data-view="purchases"] .strategy-supplier-missing {
  color: var(--strategy-coral) !important;
}

.view-root[data-view="purchases"] .strategy-queue-empty {
  min-height: 250px;
  display: grid;
  place-content: center;
  gap: 7px;
  text-align: center;
}

.view-root[data-view="purchases"] .strategy-queue-empty strong {
  color: var(--strategy-ink);
  font-size: 16px;
}

.view-root[data-view="purchases"] .strategy-queue-empty span {
  color: #7a879a;
  font-size: 10px;
}

.view-root[data-view="purchases"] .strategy-pagination {
  min-height: 57px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #e8edf3;
  background: #fafbfd;
}

.view-root[data-view="purchases"] .strategy-pagination > span {
  margin-right: auto;
  color: #788499;
  font-size: 9.5px;
}

.view-root[data-view="purchases"] .strategy-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #788499;
  font-size: 9px;
}

.view-root[data-view="purchases"] .strategy-pagination select {
  min-height: 31px;
  border-color: #d7deea;
  border-radius: 8px;
}

.view-root[data-view="purchases"] .strategy-basket {
  position: sticky;
  top: 18px;
  min-height: 490px;
  padding: 24px;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px),
    #1d2943;
  background-size: 24px 24px;
  box-shadow: 0 25px 58px rgba(25, 36, 62, .23);
}

.view-root[data-view="purchases"] .strategy-basket::after {
  position: absolute;
  right: -85px;
  bottom: -95px;
  width: 230px;
  height: 230px;
  content: "";
  border: 1px solid rgba(93, 216, 190, .18);
  border-radius: 50%;
  box-shadow:
    0 0 0 35px rgba(93, 216, 190, .025),
    0 0 0 70px rgba(88, 98, 216, .02);
}

.view-root[data-view="purchases"] .strategy-basket > * {
  position: relative;
  z-index: 1;
}

.view-root[data-view="purchases"] .strategy-basket-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aeb9d0;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .7px;
}

.view-root[data-view="purchases"] .strategy-basket-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5dd8be;
  box-shadow: 0 0 0 4px rgba(93, 216, 190, .1), 0 0 13px rgba(93, 216, 190, .35);
}

.view-root[data-view="purchases"] .strategy-basket h2 {
  margin: 16px 0 7px;
  color: #fff;
  font-size: 20px;
  font-weight: 790;
  letter-spacing: -.45px;
}

.view-root[data-view="purchases"] .strategy-basket > p {
  margin: 0;
  color: #9facbf;
  font-size: 9.5px;
  line-height: 1.7;
}

.view-root[data-view="purchases"] .strategy-basket-total {
  margin: 27px 0 17px;
  padding-bottom: 17px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.view-root[data-view="purchases"] .strategy-basket-total span {
  padding-bottom: 6px;
  color: #9facbf;
  font-size: 10px;
}

.view-root[data-view="purchases"] .strategy-basket-total strong {
  color: #fff;
  font-family: "DIN Alternate", "JetBrains Mono", monospace;
  font-size: 36px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.view-root[data-view="purchases"] .strategy-basket-total em {
  margin-left: 4px;
  color: #99a7be;
  font-size: 12px;
  font-style: normal;
}

.view-root[data-view="purchases"] .strategy-basket dl {
  margin: 0 0 17px;
  display: grid;
  gap: 0;
}

.view-root[data-view="purchases"] .strategy-basket dl > div {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.view-root[data-view="purchases"] .strategy-basket dt {
  color: #98a6bd;
  font-size: 9.5px;
}

.view-root[data-view="purchases"] .strategy-basket dd {
  margin: 0;
  color: #f2f5fb;
  font-family: "DIN Alternate", "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.view-root[data-view="purchases"] .strategy-basket dd.has-exception {
  color: #ffc86f;
}

.view-root[data-view="purchases"] .strategy-basket-note {
  min-height: 34px;
  margin-bottom: 12px;
  padding: 8px 9px;
  color: #aab7cb;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  font-size: 8.5px;
  line-height: 1.55;
}

.view-root[data-view="purchases"] .strategy-basket .primary-button {
  width: 100%;
  min-height: 43px;
  border: 0;
  border-radius: 10px;
  background: #6972e8;
  box-shadow: 0 10px 24px rgba(5, 10, 25, .25);
  font-size: 11px;
  font-weight: 750;
}

.view-root[data-view="purchases"] .strategy-basket .primary-button:hover {
  background: #7780ee;
  transform: translateY(-1px);
}

.view-root[data-view="purchases"] .strategy-basket .primary-button:disabled {
  color: #7f8ba2;
  background: #34415c;
  box-shadow: none;
  transform: none;
}

.view-root[data-view="purchases"] .strategy-basket .small-button {
  width: 100%;
  min-height: 37px;
  margin-top: 8px;
  color: #bac4d5;
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .04);
}

.view-root[data-view="purchases"] .strategy-evidence {
  overflow: hidden;
}

.view-root[data-view="purchases"] .strategy-evidence header {
  min-height: 78px;
  padding: 16px 20px 14px 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e6ebf2;
}

.view-root[data-view="purchases"] .strategy-evidence header > div[role="tablist"] {
  padding: 3px;
  display: flex;
  gap: 3px;
  border: 1px solid #dde3ed;
  border-radius: 10px;
  background: #f5f7fa;
}

.view-root[data-view="purchases"] .strategy-evidence button {
  min-height: 31px;
  padding: 0 11px;
  color: #69758a;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 9.5px;
  font-weight: 680;
}

.view-root[data-view="purchases"] .strategy-evidence button.active {
  color: #3d46ad;
  background: #fff;
  box-shadow: 0 3px 10px rgba(35, 48, 80, .08);
}

.view-root[data-view="purchases"] .strategy-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.view-root[data-view="purchases"] .strategy-evidence-grid article {
  min-height: 112px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #e8edf3;
}

.view-root[data-view="purchases"] .strategy-evidence-grid article:last-child {
  border-right: 0;
}

.view-root[data-view="purchases"] .strategy-evidence-grid span {
  color: #78849a;
  font-size: 9px;
  font-weight: 670;
}

.view-root[data-view="purchases"] .strategy-evidence-grid strong {
  margin: 8px 0 5px;
  color: var(--strategy-ink);
  font-family: "DIN Alternate", "JetBrains Mono", monospace;
  font-size: 23px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.55px;
}

.view-root[data-view="purchases"] .strategy-evidence-grid em {
  margin-left: 2px;
  color: #768299;
  font-size: 10px;
  font-style: normal;
}

.view-root[data-view="purchases"] .strategy-evidence-grid small {
  color: #8a95a6;
  font-size: 8.5px;
}

.view-root[data-view="purchases"] .strategy-mobile-basket {
  display: none;
}

@media (max-width: 1380px) {
  .view-root[data-view="purchases"] .inventory-strategy-controls {
    width: min(470px, 48%);
    grid-template-columns: minmax(190px, 1fr) auto;
  }

  .view-root[data-view="purchases"] .inventory-strategy-controls .small-button:last-child {
    grid-column: 1 / -1;
  }

  .view-root[data-view="purchases"] .inventory-strategy-workspace {
    grid-template-columns: minmax(0, 1fr) 292px;
  }
}

@media (max-width: 1180px) {
  .view-root[data-view="purchases"] .inventory-strategy-heading {
    display: grid;
  }

  .view-root[data-view="purchases"] .inventory-strategy-controls {
    width: 100%;
    grid-template-columns: minmax(230px, 1fr) auto auto;
  }

  .view-root[data-view="purchases"] .inventory-strategy-controls .small-button:last-child {
    grid-column: auto;
  }

  .view-root[data-view="purchases"] .inventory-strategy-workspace {
    grid-template-columns: 1fr;
  }

  .view-root[data-view="purchases"] .strategy-basket {
    position: relative;
    top: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(160px, .6fr));
    gap: 13px 24px;
  }

  .view-root[data-view="purchases"] .strategy-basket h2,
  .view-root[data-view="purchases"] .strategy-basket > p {
    grid-column: 1;
  }

  .view-root[data-view="purchases"] .strategy-basket-total {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-left: 1px solid rgba(255, 255, 255, .1);
  }

  .view-root[data-view="purchases"] .strategy-basket dl {
    grid-column: 3;
    grid-row: 1 / span 3;
    margin: 0;
  }

  .view-root[data-view="purchases"] .strategy-basket-note {
    grid-column: 1 / span 2;
    margin: 0;
  }

  .view-root[data-view="purchases"] .strategy-basket .primary-button,
  .view-root[data-view="purchases"] .strategy-basket .small-button {
    grid-column: 3;
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 980px) {
  .view-root[data-view="purchases"] {
    padding-bottom: 104px;
  }

  .view-root[data-view="purchases"] .restock-mode-switch > span {
    display: none;
  }

  .view-root[data-view="purchases"] .strategy-basket {
    display: none;
  }

  .view-root[data-view="purchases"] .strategy-mobile-basket {
    position: fixed;
    right: 12px;
    bottom: 11px;
    left: 12px;
    z-index: 80;
    min-height: 68px;
    padding: 10px 11px 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    background: rgba(29, 41, 67, .96);
    box-shadow: 0 18px 48px rgba(18, 28, 49, .3);
    backdrop-filter: blur(16px);
  }

  .view-root[data-view="purchases"] .strategy-mobile-basket > div {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .view-root[data-view="purchases"] .strategy-mobile-basket span {
    color: #aab6ca;
    font-size: 9px;
  }

  .view-root[data-view="purchases"] .strategy-mobile-basket strong {
    overflow: hidden;
    color: #fff;
    font-family: "DIN Alternate", "JetBrains Mono", monospace;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .view-root[data-view="purchases"] .strategy-mobile-basket .primary-button {
    min-height: 43px;
    padding-inline: 17px;
    border: 0;
    border-radius: 11px;
    background: #6972e8;
    white-space: nowrap;
  }

  .view-root[data-view="purchases"] .strategy-evidence-grid {
    grid-template-columns: 1fr;
  }

  .view-root[data-view="purchases"] .strategy-evidence-grid article {
    min-height: 88px;
    border-right: 0;
    border-bottom: 1px solid #e8edf3;
  }

  .view-root[data-view="purchases"] .strategy-evidence-grid article:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .view-root[data-view="purchases"] {
    padding-inline: 12px;
  }

  .view-root[data-view="purchases"] .restock-mode-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .view-root[data-view="purchases"] .restock-mode-button {
    min-width: 0;
    padding: 0 7px;
    font-size: 10px;
  }

  .view-root[data-view="purchases"] .inventory-strategy-heading {
    min-height: 0;
    padding: 22px 18px 18px;
    gap: 20px;
  }

  .view-root[data-view="purchases"] .inventory-strategy-heading h2 {
    font-size: 26px;
  }

  .view-root[data-view="purchases"] .inventory-strategy-controls {
    grid-template-columns: 1fr 1fr;
  }

  .view-root[data-view="purchases"] .inventory-strategy-controls label {
    grid-column: 1 / -1;
  }

  .view-root[data-view="purchases"] .stock-waterline {
    padding: 34px 17px 15px;
  }

  .view-root[data-view="purchases"] .stock-waterline-scale span.is-lead {
    display: none;
  }

  .view-root[data-view="purchases"] .stock-waterline-marker span {
    display: none;
  }

  .view-root[data-view="purchases"] .stock-waterline-caption {
    margin-top: 12px;
    display: grid;
  }

  .view-root[data-view="purchases"] .stock-waterline-caption strong {
    font-size: 8px;
  }

  .view-root[data-view="purchases"] .strategy-risk-switch {
    margin: 0 17px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .view-root[data-view="purchases"] .strategy-risk-switch button:nth-child(2n) {
    border-right: 0;
  }

  .view-root[data-view="purchases"] .strategy-risk-switch button:nth-child(-n + 4) {
    border-bottom: 1px solid #e2e7ef;
  }

  .view-root[data-view="purchases"] .strategy-risk-switch button:last-child {
    grid-column: 1 / -1;
  }

  .view-root[data-view="purchases"] .adaptive-stage-grid {
    margin: 12px 17px 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .view-root[data-view="purchases"] .adaptive-stage-grid button:first-child {
    grid-column: 1 / -1;
  }

  .view-root[data-view="purchases"] .inventory-strategy-summary {
    padding: 14px 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .view-root[data-view="purchases"] .inventory-strategy-summary small {
    grid-column: 1 / -1;
    margin-left: 0;
    text-align: left;
  }

  .view-root[data-view="purchases"] .strategy-queue-header {
    align-items: stretch;
    display: grid;
  }

  .view-root[data-view="purchases"] .strategy-queue-actions {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .view-root[data-view="purchases"] .strategy-table-wrap {
    overflow: visible;
  }

  .view-root[data-view="purchases"] .strategy-decision-table {
    min-width: 0;
    display: block;
  }

  .view-root[data-view="purchases"] .strategy-decision-table thead {
    display: none;
  }

  .view-root[data-view="purchases"] .strategy-decision-table tbody {
    padding: 10px;
    display: grid;
    gap: 10px;
    background: #f5f7fa;
  }

  .view-root[data-view="purchases"] .strategy-decision-table tr {
    position: relative;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid #dde4ed;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 7px 19px rgba(35, 49, 79, .045);
  }

  .view-root[data-view="purchases"] .strategy-decision-table td {
    min-height: 58px;
    padding: 10px 8px;
    border-bottom: 1px solid #edf0f5;
    background: transparent !important;
  }

  .view-root[data-view="purchases"] .strategy-decision-table td::before {
    display: block;
    margin-bottom: 5px;
    color: #8993a4;
    content: attr(data-label);
    font-size: 8px;
    font-weight: 690;
  }

  .view-root[data-view="purchases"] .strategy-check-cell {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 30px;
    min-height: 30px !important;
    padding: 6px !important;
    border: 0 !important;
  }

  .view-root[data-view="purchases"] .strategy-check-cell::before {
    display: none !important;
  }

  .view-root[data-view="purchases"] .strategy-risk-cell,
  .view-root[data-view="purchases"] .strategy-product-cell {
    grid-column: 1 / -1;
  }

  .view-root[data-view="purchases"] .strategy-product-cell {
    padding-right: 38px !important;
  }

  .view-root[data-view="purchases"] .strategy-supplier-cell {
    grid-column: 1 / -1;
    border-bottom: 0 !important;
  }

  .view-root[data-view="purchases"] .strategy-pagination {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .view-root[data-view="purchases"] .strategy-pagination > span {
    width: 100%;
  }

  .view-root[data-view="purchases"] .strategy-evidence header {
    align-items: stretch;
    display: grid;
  }

  .view-root[data-view="purchases"] .strategy-evidence header > div[role="tablist"] {
    width: 100%;
  }

  .view-root[data-view="purchases"] .strategy-evidence button {
    flex: 1;
  }
}

@media (max-width: 520px) {
  .view-root[data-view="purchases"] .inventory-strategy-heading h2 {
    font-size: 23px;
  }

  .view-root[data-view="purchases"] .inventory-strategy-summary {
    grid-template-columns: 1fr;
  }

  .view-root[data-view="purchases"] .strategy-decision-table tr {
    grid-template-columns: 1fr;
  }

  .view-root[data-view="purchases"] .adaptive-stage-grid {
    grid-template-columns: 1fr;
  }

  .view-root[data-view="purchases"] .adaptive-stage-grid button:first-child {
    grid-column: 1;
  }

  .view-root[data-view="purchases"] .strategy-risk-cell,
  .view-root[data-view="purchases"] .strategy-product-cell,
  .view-root[data-view="purchases"] .strategy-supplier-cell {
    grid-column: 1;
  }

  .view-root[data-view="purchases"] .strategy-queue-actions .small-button {
    font-size: 9px;
  }

  .view-root[data-view="purchases"] .strategy-mobile-basket .primary-button {
    padding-inline: 12px;
    font-size: 9.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-root[data-view="purchases"] .stock-waterline-dot,
  .view-root[data-view="purchases"] .stock-waterline-marker,
  .view-root[data-view="purchases"] .strategy-basket .primary-button {
    transition: none !important;
  }
}

body[data-ui-version="44"] .view-root[data-view="purchases"] .strategy-basket {
  color: #fff !important;
  border-color: transparent !important;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px),
    #1d2943 !important;
  background-size: 24px 24px !important;
}

/* Mobile navigation drawer · v43 */
.mobile-nav-toggle,
.mobile-nav-backdrop {
  display: none;
}

@media (max-width: 980px) {
  body.mobile-nav-lock {
    overflow: hidden;
  }

  .app-shell {
    display: block !important;
  }

  .mobile-nav-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 162;
    min-width: 46px;
    height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #273653;
    border: 1px solid rgba(117, 130, 163, .24);
    border-radius: 13px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 9px 28px rgba(45, 62, 94, .13);
    backdrop-filter: blur(16px);
    font: inherit;
    font-size: 11px;
    font-weight: 760;
  }

  .mobile-nav-toggle-lines {
    width: 16px;
    display: grid;
    gap: 3px;
  }

  .mobile-nav-toggle-lines i {
    width: 100%;
    height: 1.5px;
    display: block;
    border-radius: 999px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }

  .app-shell.mobile-nav-open .mobile-nav-toggle-lines i:nth-child(1) {
    transform: translateY(4.5px) rotate(45deg);
  }

  .app-shell.mobile-nav-open .mobile-nav-toggle-lines i:nth-child(2) {
    opacity: 0;
  }

  .app-shell.mobile-nav-open .mobile-nav-toggle-lines i:nth-child(3) {
    transform: translateY(-4.5px) rotate(-45deg);
  }

  .mobile-nav-backdrop:not([hidden]) {
    position: fixed;
    z-index: 150;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(24, 35, 58, .3);
    backdrop-filter: blur(3px);
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 158 !important;
    width: min(86vw, 306px) !important;
    max-width: 306px !important;
    padding: 8px 14px 18px !important;
    display: flex !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(calc(-100% - 18px));
    transition: transform .24s cubic-bezier(.22, .72, .22, 1);
    box-shadow: 22px 0 54px rgba(36, 51, 82, .16) !important;
  }

  .app-shell.mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  .sidebar .nav {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .sidebar .nav-group,
  .sidebar .nav > button {
    width: 100% !important;
  }

  .main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .topbar {
    min-height: 68px;
    padding-left: 76px !important;
  }
}

@media (max-width: 520px) {
  .mobile-nav-toggle {
    top: 10px;
    left: 10px;
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .mobile-nav-toggle > span:last-child {
    display: none;
  }

  .topbar {
    min-height: 64px;
    padding-left: 64px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .mobile-nav-toggle-lines i {
    transition: none !important;
  }
}

/* Operations decision runway · v44
   Final authority layer: light SaaS shell, one high-contrast decision runway,
   and demand-qualified inventory signals. */
body[data-ui-version="44"] {
  --v44-canvas: #eef3f8;
  --v44-surface: #ffffff;
  --v44-surface-soft: #f7f9fc;
  --v44-ink: #16243a;
  --v44-copy: #3f4d64;
  --v44-muted: #748198;
  --v44-line: #dfe6ef;
  --v44-line-strong: #cbd6e4;
  --v44-indigo: #4f57c8;
  --v44-indigo-dark: #3f47ae;
  --v44-indigo-soft: #eef0ff;
  --v44-teal: #168e7c;
  --v44-teal-soft: #eaf7f3;
  --v44-amber: #c47b27;
  --v44-amber-soft: #fff5e6;
  --v44-coral: #d65369;
  --v44-coral-soft: #fff0f3;
  --v44-shadow: 0 14px 34px rgba(28, 44, 72, .07);
  --v44-shadow-raised: 0 22px 52px rgba(28, 44, 72, .11);
  color: var(--v44-ink);
  background:
    radial-gradient(circle at 78% -8%, rgba(79, 87, 200, .085), transparent 29%),
    linear-gradient(180deg, #f5f7fb 0%, var(--v44-canvas) 100%);
}

body[data-ui-version="44"] .sidebar {
  width: 260px;
  padding: 14px 14px 16px;
  gap: 12px;
  color: var(--v44-ink);
  border-right: 1px solid #dce4ee;
  background:
    radial-gradient(circle at 8% -4%, rgba(79, 87, 200, .1), transparent 24%),
    linear-gradient(180deg, #fbfcff 0%, #f6f8fc 58%, #f1f5fa 100%);
  box-shadow: 12px 0 34px rgba(29, 46, 75, .055);
}

body[data-ui-version="44"] .sidebar::before {
  opacity: .42;
  background-image:
    linear-gradient(rgba(101, 119, 151, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 119, 151, .04) 1px, transparent 1px);
  background-size: 24px 24px;
}

body[data-ui-version="44"] .sidebar::after {
  height: 3px;
  background: linear-gradient(90deg, var(--v44-indigo), #6970e1 54%, var(--v44-teal));
  box-shadow: 0 5px 18px rgba(79, 87, 200, .2);
}

body[data-ui-version="44"] .sidebar > .brand {
  min-height: 70px;
  padding: 7px 8px 15px;
  border-bottom: 1px solid #dfe6ef;
}

body[data-ui-version="44"] .sidebar .brand-mark {
  width: 43px;
  height: 43px;
  color: #fff;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(145deg, #6570e8, #4f57c8 58%, #1ca38d);
  box-shadow: 0 12px 24px rgba(70, 79, 183, .24);
}

body[data-ui-version="44"] .sidebar .brand strong {
  color: var(--v44-ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.35px;
}

body[data-ui-version="44"] .sidebar .brand small {
  margin-top: 3px;
  color: #8b98ac;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 1.4px;
}

body[data-ui-version="44"] .nav {
  gap: 4px;
  padding-right: 2px;
}

body[data-ui-version="44"] .nav > button,
body[data-ui-version="44"] .nav .nav-group-toggle {
  min-height: 46px;
  padding: 0 12px;
  gap: 11px;
  color: #526078 !important;
  border: 1px solid transparent !important;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 720;
  letter-spacing: -.1px;
  text-transform: none;
}

body[data-ui-version="44"] .nav > button:hover,
body[data-ui-version="44"] .nav .nav-group-toggle:hover {
  color: var(--v44-ink) !important;
  border-color: #e2e7f0 !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 7px 16px rgba(34, 49, 78, .05) !important;
}

body[data-ui-version="44"] .nav > button.active,
body[data-ui-version="44"] .nav-group:has(.nav-sub-item.active) > .nav-group-toggle {
  color: var(--v44-indigo-dark) !important;
  border-color: #d9def7 !important;
  background:
    linear-gradient(90deg, #e9ecff 0%, #f1f3ff 64%, rgba(235, 248, 245, .7) 100%) !important;
  box-shadow:
    inset 3px 0 var(--v44-indigo),
    0 8px 20px rgba(64, 72, 160, .085) !important;
}

body[data-ui-version="44"] .nav-icon {
  width: 19px;
  height: 19px;
  color: #7f8da4;
}

body[data-ui-version="44"] .nav > button.active .nav-icon,
body[data-ui-version="44"] .nav-group:has(.nav-sub-item.active) > .nav-group-toggle .nav-icon {
  color: var(--v44-indigo);
}

body[data-ui-version="44"] .nav-sub {
  margin: 2px 0 5px 21px;
  padding: 2px 0 2px 13px;
  border-left: 1px solid #d8e0ea;
}

body[data-ui-version="44"] .nav .nav-sub-item {
  min-height: 39px;
  padding: 0 12px;
  color: #68768c !important;
  border: 1px solid transparent !important;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 650;
}

body[data-ui-version="44"] .nav .nav-sub-item:hover {
  color: var(--v44-ink) !important;
  background: #eef2f7 !important;
}

body[data-ui-version="44"] .nav .nav-sub-item.active {
  color: var(--v44-indigo-dark) !important;
  border-color: #dfe3f8 !important;
  background: #e9ecff !important;
}

body[data-ui-version="44"] .sidebar-footer {
  min-height: 46px;
  padding: 10px 11px;
  align-items: center;
  color: #7c899e;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 7px 18px rgba(33, 48, 75, .04);
  font-size: 10px;
}

body[data-ui-version="44"] .sidebar-footer strong {
  color: var(--v44-teal);
  font-size: 10px;
}

body[data-ui-version="44"] .main {
  margin-left: 260px;
  background:
    linear-gradient(rgba(109, 126, 157, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 126, 157, .02) 1px, transparent 1px),
    var(--v44-canvas);
  background-size: 32px 32px;
}

body[data-ui-version="44"] .topbar {
  min-height: 82px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(207, 217, 231, .9);
  background: rgba(250, 252, 255, .92);
  box-shadow: 0 10px 28px rgba(31, 48, 76, .045);
  backdrop-filter: blur(18px) saturate(120%);
}

body[data-ui-version="44"] .topbar > div:first-child {
  padding-left: 14px;
}

body[data-ui-version="44"] .topbar > div:first-child::before {
  width: 3px;
  background: linear-gradient(180deg, var(--v44-indigo), var(--v44-teal));
}

body[data-ui-version="44"] .topbar p {
  color: #6976a5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

body[data-ui-version="44"] .topbar h1 {
  color: var(--v44-ink);
  font-size: 25px;
  font-weight: 800;
}

body[data-ui-version="44"] .topbar-actions select,
body[data-ui-version="44"] .topbar-actions button,
body[data-ui-version="44"] .topbar-actions .user-label,
body[data-ui-version="44"] .topbar-actions .cloud-status {
  min-height: 40px;
  border-radius: 10px;
}

body[data-ui-version="44"] .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) {
  gap: 16px;
  padding: 22px 24px 34px;
  background: transparent;
}

body[data-ui-version="44"] .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel {
  border-color: var(--v44-line);
  border-radius: 15px;
  background: var(--v44-surface);
  box-shadow: var(--v44-shadow);
}

body[data-ui-version="44"] .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header {
  min-height: 72px;
  padding: 16px 20px 15px 23px;
  border-bottom-color: #e8edf3;
  background: linear-gradient(180deg, #fff, #fbfcfe);
}

body[data-ui-version="44"] .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header h2 {
  font-size: 18px;
}

body[data-ui-version="44"] .view-root:not([data-view="shelfGuide"]) .table-wrap {
  scrollbar-color: #b8c4d3 #eef2f7;
}

body[data-ui-version="44"] .view-root:not([data-view="shelfGuide"]) table th {
  color: #68768d;
  background: #f5f7fa;
}

body[data-ui-version="44"] .view-root:not([data-view="shelfGuide"]) table td {
  color: #2d3a51;
}

body[data-ui-version="44"] .view-root:not([data-view="shelfGuide"]) table tbody tr:hover td,
body[data-ui-version="44"] .view-root:not([data-view="shelfGuide"]) table tbody tr:focus-within td {
  color: #24324a !important;
  background: #f0f3ff !important;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] {
  --dash-ink: var(--v44-ink);
  --dash-muted: var(--v44-muted);
  --dash-line: var(--v44-line);
  min-height: calc(100vh - 82px);
  gap: 16px;
  padding: 20px 22px 34px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 12% 4%, rgba(79, 87, 200, .07), transparent 27%),
    radial-gradient(circle at 96% 22%, rgba(22, 142, 124, .06), transparent 28%),
    transparent;
  box-shadow: none;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-cosmos {
  opacity: .48;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-cosmos::before {
  opacity: .18;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-cosmos::after {
  opacity: .34;
  filter: blur(30px);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-cosmos-stars,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-cosmos-orbit,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-cosmos-comet {
  opacity: .12;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-bento-lead {
  grid-template-columns: minmax(0, 1.72fr) minmax(296px, .78fr);
  gap: 16px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-strip {
  min-height: 366px;
  padding: 25px 27px 22px;
  color: #f5f8ff;
  border: 1px solid rgba(131, 149, 220, .22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 16%, rgba(92, 107, 224, .36), transparent 27%),
    radial-gradient(circle at 94% 88%, rgba(26, 170, 146, .26), transparent 30%),
    linear-gradient(132deg, #132039 0%, #1b2852 56%, #123d43 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .08),
    0 24px 54px rgba(25, 41, 74, .2);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-strip::before {
  z-index: 1;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-strip::after {
  opacity: .18;
  background-image:
    linear-gradient(rgba(153, 174, 232, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153, 174, 232, .075) 1px, transparent 1px);
  background-size: 28px 28px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-copy {
  width: 100%;
  max-width: none;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-live-line {
  color: #aab6cf;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-live-badge {
  color: #7ce2cf;
  border-color: rgba(82, 204, 182, .32);
  background: rgba(35, 163, 143, .13);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-copy h2 {
  max-width: 760px;
  margin: 17px 0 8px;
  color: #fff;
  font-family: "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(29px, 2.45vw, 39px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.75px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-copy > p {
  max-width: 720px;
  margin: 0;
  color: #b7c2d8;
  font-size: 12px;
  line-height: 1.7;
}

body[data-ui-version="44"] .dashboard-freshness {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body[data-ui-version="44"] .dashboard-freshness > span {
  padding: 5px 8px;
  color: #93a1bc;
  border: 1px solid rgba(151, 170, 218, .14);
  border-radius: 7px;
  background: rgba(9, 20, 43, .2);
  font-size: 8px;
}

body[data-ui-version="44"] .dashboard-freshness strong {
  margin-left: 4px;
  color: #dfe7f8;
  font-weight: 700;
}

body[data-ui-version="44"] .dashboard-freshness .stale {
  color: #ffc4ce;
  border-color: rgba(222, 91, 113, .28);
  background: rgba(189, 55, 79, .14);
}

body[data-ui-version="44"] .dashboard-freshness .stale strong {
  color: #ffdce2;
}

body[data-ui-version="44"] .dashboard-decision-runway {
  position: relative;
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body[data-ui-version="44"] .dashboard-decision-runway::before {
  position: absolute;
  top: 16px;
  right: 10%;
  left: 10%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(112, 126, 224, .35), rgba(58, 207, 181, .38));
}

body[data-ui-version="44"] .dashboard-decision-runway button {
  position: relative;
  min-width: 0;
  padding: 8px 8px 7px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: #dfe7f8;
  text-align: left;
  border: 1px solid rgba(148, 168, 216, .15);
  border-radius: 10px;
  background: rgba(9, 19, 42, .26);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

body[data-ui-version="44"] .dashboard-decision-runway button:hover,
body[data-ui-version="44"] .dashboard-decision-runway button:focus-visible {
  border-color: rgba(129, 153, 232, .42);
  background: rgba(32, 47, 91, .72);
  outline: 0;
  transform: translateY(-2px);
}

body[data-ui-version="44"] .dashboard-decision-runway button > i {
  position: relative;
  z-index: 1;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: #8ea0c5;
  border: 1px solid rgba(134, 154, 211, .26);
  border-radius: 50%;
  background: #172546;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

body[data-ui-version="44"] .dashboard-decision-runway button.active > i {
  color: #fff;
  border-color: rgba(109, 226, 205, .44);
  background: linear-gradient(145deg, var(--v44-indigo), var(--v44-teal));
  box-shadow: 0 0 14px rgba(50, 186, 164, .26);
}

body[data-ui-version="44"] .dashboard-decision-runway button > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 5px;
  align-items: end;
}

body[data-ui-version="44"] .dashboard-decision-runway em {
  overflow: hidden;
  color: #a7b3ca;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="44"] .dashboard-decision-runway strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: #fff;
  font-family: "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-size: 20px;
  line-height: 1;
}

body[data-ui-version="44"] .dashboard-decision-runway small {
  color: #71809f;
  font-size: 7px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-actions {
  position: relative;
  z-index: 3;
  gap: 7px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-actions .small-button {
  min-height: 38px;
  padding-inline: 14px;
  color: #dce5f6;
  border-color: rgba(157, 176, 220, .24);
  background: rgba(11, 23, 48, .34);
  box-shadow: none;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-actions .small-button.primary {
  color: #fff;
  border-color: #6872df;
  background: linear-gradient(135deg, #616bdc, #4f57c8);
  box-shadow: 0 10px 22px rgba(53, 61, 154, .28);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-bento-focus {
  gap: 16px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-focus-card {
  min-height: 175px;
  padding: 18px 19px 15px;
  color: var(--v44-ink);
  border: 1px solid var(--v44-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--v44-shadow);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-focus-card.inventory {
  background:
    radial-gradient(circle at 100% 0, rgba(79, 87, 200, .085), transparent 37%),
    #fff;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-focus-card.supply {
  background:
    radial-gradient(circle at 100% 0, rgba(22, 142, 124, .09), transparent 37%),
    #fff;
}

body[data-ui-version="44"] .dashboard-focus-card header > span {
  color: var(--v44-ink);
  font-size: 13px;
}

body[data-ui-version="44"] .dashboard-focus-card header > em {
  max-width: 58%;
  color: var(--v44-muted);
}

body[data-ui-version="44"] .dashboard-focus-metric {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: end;
}

body[data-ui-version="44"] .dashboard-focus-metric > strong {
  color: var(--v44-ink);
  font-family: "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-size: 37px;
  line-height: .92;
  letter-spacing: -1px;
}

body[data-ui-version="44"] .dashboard-focus-metric > strong small {
  margin-left: 3px;
  color: #75829a;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0;
}

body[data-ui-version="44"] .dashboard-focus-metric > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-ui-version="44"] .dashboard-focus-metric span {
  overflow: hidden;
  color: #4c5a70;
  font-size: 10px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="44"] .dashboard-focus-metric em {
  overflow: hidden;
  color: #8995a8;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="44"] .dashboard-focus-card footer {
  margin-top: 15px;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border-top: 1px solid #e9edf3;
}

body[data-ui-version="44"] .dashboard-focus-card footer span {
  padding: 4px 6px;
  color: #647189;
  border-radius: 6px;
  background: #f3f6f9;
  font-size: 8px;
  font-weight: 650;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi-grid {
  gap: 14px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi {
  position: relative;
  min-height: 128px;
  padding: 17px 17px 15px;
  color: var(--v44-ink);
  border: 1px solid var(--v44-line);
  border-radius: 15px;
  background: #fff !important;
  box-shadow: var(--v44-shadow);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi::before {
  top: 0;
  right: 14px;
  bottom: auto;
  left: 14px;
  height: 3px;
  background: var(--v44-indigo);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi:nth-child(2)::before {
  background: var(--v44-teal);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi:nth-child(3)::before {
  background: var(--v44-coral);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi:nth-child(4)::before {
  background: var(--v44-amber);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi::after {
  display: none;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi > strong {
  color: var(--v44-ink);
  font-family: "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-size: 31px;
  letter-spacing: -.8px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi header span {
  color: #66748b;
  font-size: 10px;
  font-weight: 750;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi header > i {
  color: #6670d5;
  border-color: #e0e4f9;
  background: #f0f2ff;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .panel {
  color: var(--v44-ink);
  border: 1px solid var(--v44-line);
  border-radius: 17px;
  background: #fff !important;
  box-shadow: var(--v44-shadow);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .panel:hover {
  border-color: #d2dce8;
  box-shadow: var(--v44-shadow-raised);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .panel-header {
  min-height: 66px;
  padding: 15px 17px;
  border-bottom: 1px solid #e9edf3;
  background: transparent;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .panel-header h2 {
  color: var(--v44-ink);
  font-size: 16px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-panel-sub {
  color: var(--v44-muted);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-primary-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
  gap: 14px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-operations-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .72fr);
  gap: 14px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-secondary-grid {
  gap: 14px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-trend-body {
  background:
    linear-gradient(rgba(111, 129, 158, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 129, 158, .04) 1px, transparent 1px);
  background-size: 100% 56px, 70px 100%;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-pipeline-stage {
  color: var(--v44-ink);
  border-color: #e1e7ef;
  background: #f7f9fc;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-fulfillment-summary span,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-queue-empty {
  color: #59667d;
  border-color: #e1e7ef;
  background: #f7f9fc;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-panel .panel-header h2 {
  color: var(--v44-ink);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-panel .dashboard-panel-sub {
  color: var(--v44-muted);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row {
  min-height: 58px;
  padding: 9px 12px;
  color: var(--v44-ink);
  border: 1px solid #e5eaf1;
  border-radius: 11px;
  background: #f9fafc;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row + .dashboard-risk-row {
  margin-top: 7px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row:hover {
  color: var(--v44-ink);
  border-color: #d4dceb;
  background: #f1f3ff;
  transform: translateX(2px);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row > span {
  min-width: 0;
  grid-template-columns: 26px minmax(0, 1fr);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #77849a;
  border-radius: 7px;
  background: #e9edf3;
  font-size: 7px;
  font-style: normal;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row.danger i {
  color: var(--v44-coral);
  background: var(--v44-coral-soft);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row.warning i {
  color: var(--v44-amber);
  background: var(--v44-amber-soft);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row.review i {
  color: var(--v44-indigo);
  background: var(--v44-indigo-soft);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row strong {
  color: var(--v44-ink);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row em {
  overflow: hidden;
  color: #78859a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row > b {
  color: var(--v44-ink);
  font-family: "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-size: 22px;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-risk-row > b small {
  margin-left: 2px;
  color: #8793a6;
  font-size: 8px;
}

body[data-ui-version="44"] .dashboard-action-empty {
  min-height: 190px;
  display: grid;
  place-content: center;
  gap: 6px;
  color: var(--v44-muted);
  text-align: center;
}

body[data-ui-version="44"] .dashboard-action-empty strong {
  color: var(--v44-teal);
  font-size: 15px;
}

body[data-ui-version="44"] .dashboard-decision-count {
  min-width: 30px;
  padding: 4px 7px;
  display: inline-grid;
  place-items: center;
  color: #6d7a8f;
  border-radius: 999px;
  background: #edf1f5;
  font-weight: 800;
}

body[data-ui-version="44"] .dashboard-decision-count.active {
  color: var(--v44-coral);
  background: var(--v44-coral-soft);
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix .table-wrap,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix table,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix td {
  background: #fff;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix th {
  color: #6a778c;
  border-color: #e4e9f0;
  background: #f5f7fa;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover td,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within td {
  color: #24324a !important;
  background: #eef1ff !important;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover .dashboard-danger-text,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within .dashboard-danger-text {
  color: var(--v44-coral) !important;
}

body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix .small-button,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:hover .small-button,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix tbody tr:focus-within .small-button,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix .small-button:hover,
body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-store-matrix .small-button:focus-visible {
  color: var(--v44-indigo-dark) !important;
  border-color: #d8dcf6 !important;
  background: var(--v44-indigo-soft) !important;
}

@media (max-width: 1180px) {
  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-bento-lead {
    grid-template-columns: 1fr;
  }

  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-bento-focus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-primary-grid,
  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-operations-grid {
    grid-template-columns: 1fr;
  }

  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-movement-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  body[data-ui-version="44"] .sidebar {
    width: min(88vw, 314px) !important;
    max-width: 314px !important;
    padding: 10px 14px 18px !important;
  }

  body[data-ui-version="44"] .main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body[data-ui-version="44"] .topbar {
    min-height: 70px;
    padding-left: 78px !important;
  }

  body[data-ui-version="44"] .view-root[data-view="dashboard"] {
    min-height: calc(100vh - 70px);
    padding: 16px;
  }

  body[data-ui-version="44"] .nav > button,
  body[data-ui-version="44"] .nav .nav-group-toggle {
    font-size: 16px;
  }

  body[data-ui-version="44"] .nav .nav-sub-item {
    font-size: 15px;
  }
}

@media (max-width: 720px) {
  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-strip {
    min-height: 0;
    padding: 21px 18px;
  }

  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-copy h2 {
    font-size: 28px;
  }

  body[data-ui-version="44"] .dashboard-decision-runway {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-ui-version="44"] .dashboard-decision-runway::before {
    display: none;
  }

  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-bento-focus,
  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-kpi-grid,
  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }

  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-movement-panel {
    grid-column: auto;
  }

  body[data-ui-version="44"] .dashboard-command-actions {
    width: 100%;
  }

  body[data-ui-version="44"] .dashboard-command-actions .small-button {
    flex: 1 1 120px;
  }

  body[data-ui-version="44"] .dashboard-freshness {
    display: grid;
  }
}

@media (max-width: 520px) {
  body[data-ui-version="44"] .topbar {
    min-height: 66px;
    padding-left: 65px !important;
  }

  body[data-ui-version="44"] .topbar h1 {
    font-size: 20px;
  }

  body[data-ui-version="44"] .view-root[data-view="dashboard"] {
    padding: 11px;
  }

  body[data-ui-version="44"] .view-root[data-view="dashboard"] .dashboard-command-copy h2 {
    font-size: 24px;
  }

  body[data-ui-version="44"] .dashboard-decision-runway button {
    grid-template-columns: 25px minmax(0, 1fr);
    padding-inline: 6px;
  }

  body[data-ui-version="44"] .dashboard-decision-runway button > i {
    width: 25px;
    height: 25px;
  }

  body[data-ui-version="44"] .dashboard-focus-metric > strong {
    font-size: 33px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-version="44"] .dashboard-cosmos::before,
  body[data-ui-version="44"] .dashboard-cosmos::after,
  body[data-ui-version="44"] .dashboard-cosmos > i,
  body[data-ui-version="44"] .dashboard-command-strip::before,
  body[data-ui-version="44"] .dashboard-risk-row i,
  body[data-ui-version="44"] .dashboard-kpi header > i {
    animation: none !important;
  }
}

/* v45 · 数据安全账本
   视觉签名仅保留一条“写入 → 校验 → 备份 → 恢复”的实时保护链路。 */
.view-root[data-view="database"] {
  background:
    linear-gradient(rgba(17, 37, 39, .025) 1px, transparent 1px),
    #f3f6f5;
  background-size: 100% 32px;
}

.database-console.database-ledger {
  --ledger-paper: #ffffff;
  --ledger-canvas: #f3f6f5;
  --ledger-ink: #122225;
  --ledger-muted: #6f7e80;
  --ledger-line: #dce4e2;
  --ledger-green: #167764;
  --ledger-green-soft: #e5f2ed;
  --ledger-indigo: #5956dd;
  --ledger-indigo-soft: #eeedff;
  --ledger-amber: #ad741f;
  --ledger-amber-soft: #fff4df;
  --ledger-red: #bf4751;
  --ledger-red-soft: #fff0f1;
  width: min(100%, 1480px);
  gap: 14px;
  color: var(--ledger-ink);
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", sans-serif;
}

.database-ledger-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px;
  align-items: stretch;
  min-height: 214px;
  padding: 26px 28px 26px 32px;
  overflow: hidden;
  border: 1px solid var(--ledger-line);
  border-radius: 16px;
  background: var(--ledger-paper);
  box-shadow: 0 16px 40px rgba(26, 48, 48, .07);
}

.database-ledger-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ledger-green);
}

.database-ledger-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.database-ledger-kicker,
.database-ledger-section-head > div > span,
.database-protection-track header span {
  color: #607476;
  font-family: Bahnschrift, "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.database-ledger-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
}

.database-ledger-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ledger-green);
  box-shadow: 0 0 0 5px var(--ledger-green-soft);
}

.database-ledger-copy h2 {
  margin: 14px 0 9px;
  color: var(--ledger-ink);
  font-size: clamp(31px, 3vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.055em;
}

.database-ledger-copy h2 em {
  color: var(--ledger-green);
  font-style: normal;
}

.database-ledger-copy > p {
  max-width: 730px;
  margin: 0;
  color: var(--ledger-muted);
  font-size: 13px;
  line-height: 1.8;
}

.database-ledger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.database-ledger-actions .primary-button {
  min-width: 128px;
  color: #fff;
  border-color: var(--ledger-indigo);
  background: var(--ledger-indigo);
  box-shadow: 0 10px 24px rgba(89, 86, 221, .22);
}

.database-ledger-actions .primary-button:hover,
.database-ledger-actions .primary-button:focus-visible {
  border-color: #4542c7;
  background: #4542c7;
}

.database-ledger-actions .small-button {
  color: #354548;
  border-color: var(--ledger-line);
  background: #fff;
}

.database-ledger-actions .small-button:hover,
.database-ledger-actions .small-button:focus-visible {
  color: var(--ledger-indigo);
  border-color: #c8c7f7;
  background: var(--ledger-indigo-soft);
}

.database-health-ticket {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-width: 0;
  padding: 19px 20px 17px;
  border: 1px solid #d7e4df;
  border-radius: 13px;
  background: #eef4f1;
}

.database-health-ticket::after {
  content: "DB";
  position: absolute;
  right: 16px;
  bottom: -13px;
  color: rgba(22, 119, 100, .055);
  font: 900 84px/1 Bahnschrift, sans-serif;
  letter-spacing: -.08em;
  pointer-events: none;
}

.database-health-ticket-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.database-health-ticket-head > span {
  color: #607476;
  font: 700 10px/1 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: .14em;
}

.database-health-ticket-head > b,
.database-ledger-section-head > b {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--ledger-green);
  background: #dceee7;
  font-size: 11px;
  font-weight: 800;
}

.database-health-ticket-head > b.is-warning,
.database-ledger-section-head > b.is-warning {
  color: var(--ledger-amber);
  background: var(--ledger-amber-soft);
}

.database-health-ticket > strong {
  position: relative;
  z-index: 1;
  align-self: end;
  color: var(--ledger-ink);
  font: 800 58px/.95 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: -.06em;
}

.database-health-ticket > strong small {
  margin-left: 5px;
  color: #758487;
  font-size: 13px;
  letter-spacing: 0;
}

.database-health-meter {
  position: relative;
  z-index: 1;
  height: 4px;
  margin: 12px 0 13px;
  overflow: hidden;
  border-radius: 99px;
  background: #d6e1dd;
}

.database-health-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ledger-green);
}

.database-health-ticket dl {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  margin: 0;
}

.database-health-ticket dl > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.database-health-ticket dt,
.database-health-ticket dd {
  margin: 0;
  font-size: 11px;
}

.database-health-ticket dt {
  color: #718184;
}

.database-health-ticket dd {
  overflow: hidden;
  color: #2f4143;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-protection-track {
  overflow: hidden;
  color: #eef9f5;
  border: 1px solid #173e3a;
  border-radius: 15px;
  background: #122f2c;
  box-shadow: 0 14px 32px rgba(18, 47, 44, .14);
}

.database-protection-track header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 20px 11px;
  border-bottom: 1px solid rgba(218, 242, 234, .11);
}

.database-protection-track header > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.database-protection-track header span {
  color: #7ec4b4;
  font-size: 10px;
}

.database-protection-track header strong {
  font-size: 14px;
  letter-spacing: -.02em;
}

.database-protection-track header small {
  color: #9eb9b3;
  font-size: 11px;
}

.database-protection-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.database-protection-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  min-width: 720px;
  padding: 14px 16px 16px;
}

.database-protection-stages::before {
  content: "";
  position: absolute;
  top: 29px;
  right: 10%;
  left: 10%;
  height: 1px;
  background: rgba(187, 224, 214, .23);
}

.database-protection-stages::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 9%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #77e5c8;
  box-shadow: 0 0 0 5px rgba(119, 229, 200, .10), 0 0 18px rgba(119, 229, 200, .75);
  animation: database-ledger-pulse 5.8s cubic-bezier(.45, 0, .2, 1) infinite;
}

.database-protection-stages article {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 0 8px;
  text-align: center;
}

.database-protection-stages article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(156, 208, 195, .28);
  border-radius: 50%;
  color: #9ebdb5;
  background: #173b37;
  font: 700 9px/1 Bahnschrift, "Arial Narrow", sans-serif;
}

.database-protection-stages article.is-ready > span {
  color: #b8f5e3;
  border-color: rgba(119, 229, 200, .42);
  background: #174b42;
}

.database-protection-stages article.is-warning > span {
  color: #ffe0a8;
  border-color: rgba(226, 175, 82, .5);
  background: #57411f;
}

.database-protection-stages article strong {
  margin-top: 9px;
  color: #f3fbf8;
  font-size: 12px;
}

.database-protection-stages article small {
  overflow: hidden;
  max-width: 100%;
  margin-top: 3px;
  color: #8fa9a4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-ledger-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ledger-line);
  border-radius: 13px;
  background: var(--ledger-paper);
}

.database-ledger-metrics article {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 92px;
  padding: 15px 19px;
}

.database-ledger-metrics article + article {
  border-left: 1px solid var(--ledger-line);
}

.database-ledger-metrics span {
  color: #758487;
  font-size: 11px;
  font-weight: 700;
}

.database-ledger-metrics strong {
  margin-top: 5px;
  color: var(--ledger-ink);
  font: 750 25px/1.05 Bahnschrift, "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  letter-spacing: -.035em;
}

.database-ledger-metrics small {
  overflow: hidden;
  margin-top: 5px;
  color: #849194;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-ledger-main,
.database-ledger-secondary {
  display: grid;
  gap: 14px;
  align-items: start;
}

.database-ledger-main {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
}

.database-ledger-secondary {
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
}

.database-ledger-main > .panel,
.database-ledger-secondary > .panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ledger-line);
  border-radius: 14px;
  background: var(--ledger-paper);
  box-shadow: 0 12px 28px rgba(25, 47, 47, .055);
}

.database-ledger-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 69px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--ledger-line);
}

.database-ledger-section-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.database-ledger-section-head > div > span {
  color: #718083;
  font-size: 10px;
}

.database-ledger-section-head h2 {
  margin: 0;
  color: var(--ledger-ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.database-audit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.database-audit-list article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 82px;
  padding: 14px 17px;
  border-bottom: 1px solid #e8eeec;
}

.database-audit-list article:nth-child(odd) {
  border-right: 1px solid #e8eeec;
}

.database-audit-list article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.database-audit-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  color: var(--ledger-green);
  background: var(--ledger-green-soft);
  font-size: 13px;
  font-weight: 900;
}

.database-audit-list .is-warning .database-audit-mark {
  color: var(--ledger-amber);
  background: var(--ledger-amber-soft);
}

.database-audit-list .is-fail .database-audit-mark {
  color: var(--ledger-red);
  background: var(--ledger-red-soft);
}

.database-audit-list small {
  color: #7a888b;
  font-size: 11px;
}

.database-audit-list strong {
  overflow: hidden;
  color: #26383a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-audit-list p {
  grid-column: 2;
  overflow: hidden;
  margin: -2px 0 0;
  color: #909b9d;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-recovery-ticket {
  display: grid;
  margin: 16px;
  padding: 17px;
  border: 1px solid #d8e4e0;
  border-radius: 11px;
  background: #f0f5f3;
}

.database-recovery-ticket > span {
  color: var(--ledger-green);
  font: 700 10px/1 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: .12em;
}

.database-recovery-ticket > strong {
  overflow: hidden;
  margin-top: 10px;
  color: var(--ledger-ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-recovery-ticket dl {
  display: grid;
  gap: 7px;
  margin: 15px 0;
  padding: 12px 0;
  border-top: 1px solid #d8e4e0;
  border-bottom: 1px solid #d8e4e0;
}

.database-recovery-ticket dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.database-recovery-ticket dt,
.database-recovery-ticket dd {
  margin: 0;
  font-size: 11px;
}

.database-recovery-ticket dt {
  color: #778689;
}

.database-recovery-ticket dd {
  color: #2f4244;
  font-weight: 700;
  text-align: right;
}

.database-recovery-ticket .small-button {
  justify-self: start;
  color: var(--ledger-indigo);
  border-color: #cfcef8;
  background: var(--ledger-indigo-soft);
}

.database-ledger-note {
  margin: 0;
  padding: 11px 16px;
  color: #778689;
  border-top: 1px solid var(--ledger-line);
  background: #fafcfb;
  font-size: 10px;
  line-height: 1.6;
}

.database-recovery-empty {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 26px;
  text-align: center;
}

.database-recovery-empty strong {
  color: var(--ledger-ink);
  font-size: 14px;
}

.database-recovery-empty p {
  max-width: 320px;
  margin: 8px auto 0;
  color: var(--ledger-muted);
  font-size: 10px;
  line-height: 1.7;
}

.database-recovery-empty.compact {
  min-height: 100px;
}

.database-ledger-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  padding: 4px 18px 13px;
}

.database-ledger-index-grid > div {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px solid #e9eeed;
}

.database-ledger-index-grid i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #c3cecb;
}

.database-ledger-index-grid .is-active i {
  background: var(--ledger-green);
  box-shadow: 0 0 0 4px var(--ledger-green-soft);
}

.database-ledger-index-grid .is-missing i {
  background: var(--ledger-amber);
  box-shadow: 0 0 0 4px var(--ledger-amber-soft);
}

.database-ledger-index-grid span {
  overflow: hidden;
  color: #3e4f52;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-ledger-index-grid small {
  color: #829093;
  font: 700 9px/1 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: .08em;
}

.database-ledger-history-list {
  display: grid;
}

.database-ledger-history-list article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 52px;
  padding: 8px 17px;
  border-bottom: 1px solid #e8eeec;
}

.database-ledger-history-list article > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #6f7f82;
  background: #edf1f0;
  font: 700 9px/1 Bahnschrift, "Arial Narrow", sans-serif;
}

.database-ledger-history-list article > div {
  display: grid;
  min-width: 0;
}

.database-ledger-history-list strong {
  overflow: hidden;
  color: #344649;
  font: 700 11px/1.4 Consolas, "Microsoft YaHei UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-ledger-history-list small {
  margin-top: 3px;
  color: #849194;
  font-size: 10px;
}

@keyframes database-ledger-pulse {
  0%, 8% { left: 9%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  92%, 100% { left: 90%; opacity: 0; }
}

@media (max-width: 1120px) {
  .database-ledger-hero {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .database-ledger-main,
  .database-ledger-secondary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .database-ledger-hero {
    grid-template-columns: 1fr;
  }

  .database-health-ticket {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto;
    gap: 12px 24px;
  }

  .database-health-ticket > strong {
    grid-row: 2;
  }

  .database-health-meter {
    align-self: end;
    margin: 0 0 8px;
  }

  .database-health-ticket dl {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }

  .database-ledger-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .database-ledger-metrics article:nth-child(3) {
    border-top: 1px solid var(--ledger-line);
    border-left: 0;
  }

  .database-ledger-metrics article:nth-child(4) {
    border-top: 1px solid var(--ledger-line);
  }
}

@media (max-width: 640px) {
  .database-ledger-hero {
    gap: 22px;
    padding: 22px 18px 20px 22px;
  }

  .database-ledger-copy h2 {
    font-size: 29px;
  }

  .database-ledger-copy h2 em {
    display: block;
    margin-top: 4px;
  }

  .database-ledger-copy > p {
    font-size: 12px;
  }

  .database-ledger-actions > button {
    flex: 1 1 130px;
  }

  .database-health-ticket {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .database-health-ticket > strong,
  .database-health-ticket dl {
    grid-column: auto;
    grid-row: auto;
  }

  .database-protection-track header {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .database-ledger-metrics,
  .database-audit-list,
  .database-ledger-index-grid {
    grid-template-columns: 1fr;
  }

  .database-ledger-metrics article + article,
  .database-ledger-metrics article:nth-child(3) {
    border-top: 1px solid var(--ledger-line);
    border-left: 0;
  }

  .database-audit-list article:nth-child(odd) {
    border-right: 0;
  }

  .database-ledger-section-head {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .database-protection-stages::after {
    animation: none !important;
  }
}

/* v46 · 门店今日作战台
   首页只保留一条真实履约跑道，其余区域采用安静的数据账本。 */
body[data-ui-version="44"] .view-root[data-view="dashboard"] {
  min-height: calc(100vh - 82px);
  padding: 20px;
  color: #162426;
  background:
    linear-gradient(rgba(18, 45, 42, .024) 1px, transparent 1px),
    #f3f6f5;
  background-size: 100% 34px;
}

body[data-ui-version="44"] .ops-home-v46 {
  --ops-paper: #ffffff;
  --ops-ink: #162426;
  --ops-muted: #718083;
  --ops-line: #dce4e2;
  --ops-green: #137765;
  --ops-green-soft: #e4f2ed;
  --ops-indigo: #5a57dd;
  --ops-indigo-soft: #efeeff;
  --ops-amber: #ae751f;
  --ops-amber-soft: #fff4df;
  --ops-coral: #c94e5b;
  --ops-coral-soft: #fff0f1;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(100%, 1480px);
  margin: 0 auto;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", sans-serif;
}

body[data-ui-version="44"] .ops-command-center {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, .72fr);
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--ops-line);
  border-radius: 18px;
  background: var(--ops-paper);
  box-shadow: 0 18px 44px rgba(24, 48, 47, .08);
}

body[data-ui-version="44"] .ops-brief {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 28px 34px 24px 38px;
  overflow: hidden;
}

body[data-ui-version="44"] .ops-brief::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ops-green);
}

body[data-ui-version="44"] .ops-brief::after {
  content: "TODAY";
  position: absolute;
  right: 22px;
  bottom: -22px;
  color: rgba(19, 119, 101, .035);
  font: 900 102px/.85 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: -.07em;
  pointer-events: none;
}

body[data-ui-version="44"] .ops-live-line {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
  color: #728184;
  font: 700 10px/1 Bahnschrift, "Microsoft YaHei UI", sans-serif;
  letter-spacing: .08em;
}

body[data-ui-version="44"] .ops-live-line > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ops-green);
  letter-spacing: .12em;
}

body[data-ui-version="44"] .ops-live-line > span i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ops-green);
  box-shadow: 0 0 0 5px var(--ops-green-soft);
}

body[data-ui-version="44"] .ops-live-line b {
  padding-left: 13px;
  border-left: 1px solid var(--ops-line);
  color: #46585a;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-ui-version="44"] .ops-brief h2 {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 17px 0 10px;
  color: var(--ops-ink);
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.055em;
}

body[data-ui-version="44"] .ops-brief > p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  color: var(--ops-muted);
  font-size: 13px;
  line-height: 1.8;
}

body[data-ui-version="44"] .ops-brief-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 19px;
}

body[data-ui-version="44"] .ops-brief-actions .primary-button {
  min-width: 132px;
  color: #fff;
  border-color: var(--ops-indigo);
  background: var(--ops-indigo);
  box-shadow: 0 10px 22px rgba(90, 87, 221, .2);
}

body[data-ui-version="44"] .ops-brief-actions .small-button {
  color: #35484a;
  border-color: var(--ops-line);
  background: #fff;
}

body[data-ui-version="44"] .ops-source-ledger {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 20px;
  padding-top: 13px;
  border-top: 1px solid #e8edeb;
}

body[data-ui-version="44"] .ops-source-ledger span {
  display: flex;
  gap: 7px;
  color: #849194;
  font-size: 10px;
}

body[data-ui-version="44"] .ops-source-ledger strong {
  color: #495b5d;
  font-weight: 700;
}

body[data-ui-version="44"] .ops-now {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  padding: 20px;
  color: #f2fbf8;
  background: #132f2c;
}

body[data-ui-version="44"] .ops-now > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px 15px;
  border-bottom: 1px solid rgba(218, 242, 234, .13);
}

body[data-ui-version="44"] .ops-now > header > div {
  display: grid;
  gap: 4px;
}

body[data-ui-version="44"] .ops-now > header span {
  color: #79c5b4;
  font: 700 9px/1 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: .16em;
}

body[data-ui-version="44"] .ops-now > header h3 {
  margin: 0;
  color: #fff;
  font-size: 17px;
}

body[data-ui-version="44"] .ops-now > header > b {
  color: #fff;
  font: 800 34px/.9 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: -.04em;
}

body[data-ui-version="44"] .ops-now > header > b small {
  margin-left: 3px;
  color: #8fb0a8;
  font-size: 10px;
}

body[data-ui-version="44"] .ops-action-list {
  display: grid;
  align-content: start;
  min-width: 0;
}

body[data-ui-version="44"] .ops-action-list > button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 9px 2px;
  color: inherit;
  border: 0;
  border-bottom: 1px solid rgba(218, 242, 234, .11);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

body[data-ui-version="44"] .ops-action-list > button:hover,
body[data-ui-version="44"] .ops-action-list > button:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .055);
  outline: none;
}

body[data-ui-version="44"] .ops-action-list > button > i {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  color: #b7d1ca;
  background: rgba(255, 255, 255, .075);
  font: 700 8px/1 Bahnschrift, "Arial Narrow", sans-serif;
  font-style: normal;
}

body[data-ui-version="44"] .ops-action-list > button.danger > i {
  color: #ffb7bd;
  background: rgba(201, 78, 91, .2);
}

body[data-ui-version="44"] .ops-action-list > button.warning > i {
  color: #ffdda3;
  background: rgba(174, 117, 31, .23);
}

body[data-ui-version="44"] .ops-action-list > button.review > i {
  color: #c7c5ff;
  background: rgba(90, 87, 221, .23);
}

body[data-ui-version="44"] .ops-action-list > button > span {
  display: grid;
  min-width: 0;
}

body[data-ui-version="44"] .ops-action-list strong {
  overflow: hidden;
  color: #f3faf8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="44"] .ops-action-list small {
  overflow: hidden;
  margin-top: 3px;
  color: #92aca6;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="44"] .ops-action-list > button > b {
  color: #fff;
  font: 800 23px/1 Bahnschrift, "Arial Narrow", sans-serif;
}

body[data-ui-version="44"] .ops-action-list > button > b em {
  margin-left: 2px;
  color: #8fa9a3;
  font: 700 8px/1 "Microsoft YaHei UI", sans-serif;
  font-style: normal;
}

body[data-ui-version="44"] .ops-action-empty {
  display: grid;
  place-content: center;
  min-height: 180px;
  color: #99b3ad;
  text-align: center;
}

body[data-ui-version="44"] .ops-action-empty strong {
  color: #e7f4f0;
  font-size: 14px;
}

body[data-ui-version="44"] .ops-action-empty span {
  margin-top: 6px;
  font-size: 10px;
}

body[data-ui-version="44"] .ops-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ops-line);
  border-radius: 14px;
  background: #fff;
}

body[data-ui-version="44"] .ops-ledger > button {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 104px;
  padding: 16px 20px;
  color: var(--ops-ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

body[data-ui-version="44"] .ops-ledger > button + button {
  border-left: 1px solid var(--ops-line);
}

body[data-ui-version="44"] .ops-ledger > button:hover,
body[data-ui-version="44"] .ops-ledger > button:focus-visible {
  background: #f7f9f8;
  outline: none;
}

body[data-ui-version="44"] .ops-ledger > button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}

body[data-ui-version="44"] .ops-ledger > button.is-warning::before {
  background: var(--ops-coral);
}

body[data-ui-version="44"] .ops-ledger > button.is-active::before {
  background: var(--ops-green);
}

body[data-ui-version="44"] .ops-ledger span {
  color: #748386;
  font-size: 11px;
  font-weight: 700;
}

body[data-ui-version="44"] .ops-ledger strong {
  overflow: hidden;
  margin-top: 6px;
  color: var(--ops-ink);
  font: 800 29px/1.05 Bahnschrift, "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  letter-spacing: -.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="44"] .ops-ledger strong em {
  margin-left: 3px;
  color: #6f7f82;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0;
}

body[data-ui-version="44"] .ops-ledger small {
  overflow: hidden;
  margin-top: 5px;
  color: #879497;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="44"] .ops-home-v46 > .panel,
body[data-ui-version="44"] .ops-supply-grid > .panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ops-line) !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(24, 48, 47, .055) !important;
  transform: none !important;
}

body[data-ui-version="44"] .ops-home-v46 > .panel:hover,
body[data-ui-version="44"] .ops-supply-grid > .panel:hover {
  box-shadow: 0 12px 30px rgba(24, 48, 47, .055) !important;
  transform: none !important;
}

body[data-ui-version="44"] .ops-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--ops-line);
}

body[data-ui-version="44"] .ops-section-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-ui-version="44"] .ops-section-head > div > span {
  color: #6e7f81;
  font: 700 9px/1 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: .15em;
}

body[data-ui-version="44"] .ops-section-head h2 {
  margin: 0;
  color: var(--ops-ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.025em;
}

body[data-ui-version="44"] .ops-section-head small {
  color: #7e8c8f;
  font-size: 10px;
}

body[data-ui-version="44"] .ops-section-head .text-button {
  flex: 0 0 auto;
  color: var(--ops-indigo);
  font-size: 11px;
}

body[data-ui-version="44"] .ops-fulfillment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  min-height: 235px;
}

body[data-ui-version="44"] .ops-runway {
  min-width: 0;
  padding: 20px 18px 16px;
}

body[data-ui-version="44"] .ops-runway .dashboard-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(105px, 1fr));
  min-width: 640px;
  gap: 0;
  padding: 7px 0 17px;
}

body[data-ui-version="44"] .ops-runway .dashboard-pipeline::before {
  content: "";
  position: absolute;
  top: 26px;
  right: 9%;
  left: 9%;
  height: 1px;
  background: #d6e1de;
}

body[data-ui-version="44"] .ops-runway .dashboard-pipeline::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 8%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2fc4a8;
  box-shadow: 0 0 0 5px rgba(47, 196, 168, .12), 0 0 15px rgba(47, 196, 168, .55);
  animation: ops-runway-scan 5.4s cubic-bezier(.45, 0, .2, 1) infinite;
}

body[data-ui-version="44"] .ops-runway .dashboard-pipeline-stage {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 8px;
  color: #253638;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-ui-version="44"] .ops-runway .dashboard-pipeline-stage:hover,
body[data-ui-version="44"] .ops-runway .dashboard-pipeline-stage:focus-visible {
  color: var(--ops-indigo);
  background: transparent;
  outline: none;
}

body[data-ui-version="44"] .ops-runway .dashboard-pipeline-stage > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--ops-green);
  border: 1px solid #c8ddd7;
  border-radius: 50%;
  background: #edf6f2;
  font: 800 10px/1 Bahnschrift, "Arial Narrow", sans-serif;
}

body[data-ui-version="44"] .ops-runway .dashboard-pipeline-stage > div {
  display: grid;
  justify-items: center;
  min-width: 0;
}

body[data-ui-version="44"] .ops-runway .dashboard-pipeline-stage em {
  color: #68777a;
  font-size: 10px;
  font-style: normal;
}

body[data-ui-version="44"] .ops-runway .dashboard-pipeline-stage strong {
  margin-top: 5px;
  color: var(--ops-ink);
  font: 800 24px/1 Bahnschrift, "Arial Narrow", sans-serif;
}

body[data-ui-version="44"] .ops-runway .dashboard-pipeline-stage i {
  display: none;
}

body[data-ui-version="44"] .ops-runway .dashboard-fulfillment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--ops-line);
  border-radius: 9px;
  background: #f7f9f8;
}

body[data-ui-version="44"] .ops-runway .dashboard-fulfillment-summary span {
  min-width: 0;
  padding: 10px;
  color: #79878a;
  font-size: 10px;
  text-align: center;
}

body[data-ui-version="44"] .ops-runway .dashboard-fulfillment-summary span + span {
  border-left: 1px solid var(--ops-line);
}

body[data-ui-version="44"] .ops-runway .dashboard-fulfillment-summary strong {
  margin-right: 4px;
  color: var(--ops-ink);
  font: 800 15px/1 Bahnschrift, "Arial Narrow", sans-serif;
}

body[data-ui-version="44"] .ops-order-queue {
  min-width: 0;
  padding: 17px;
  border-left: 1px solid var(--ops-line);
  background: #fafcfb;
}

body[data-ui-version="44"] .ops-order-queue > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}

body[data-ui-version="44"] .ops-order-queue > header strong {
  color: var(--ops-ink);
  font-size: 12px;
}

body[data-ui-version="44"] .ops-order-queue > header span {
  color: #7b898c;
  font-size: 10px;
}

body[data-ui-version="44"] .ops-order-queue .dashboard-live-queue {
  display: grid;
}

body[data-ui-version="44"] .ops-order-queue .dashboard-live-queue > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 43px;
  padding: 7px 0;
  color: var(--ops-ink);
  border: 0;
  border-top: 1px solid #e5ebea;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

body[data-ui-version="44"] .ops-order-queue .dashboard-live-queue > button:hover,
body[data-ui-version="44"] .ops-order-queue .dashboard-live-queue > button:focus-visible {
  color: var(--ops-indigo);
  background: transparent;
  outline: none;
}

body[data-ui-version="44"] .ops-order-queue .dashboard-live-queue > button > span {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

body[data-ui-version="44"] .ops-order-queue .dashboard-live-queue strong,
body[data-ui-version="44"] .ops-order-queue .dashboard-live-queue em,
body[data-ui-version="44"] .ops-order-queue .dashboard-live-queue b {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="44"] .ops-order-queue .dashboard-live-queue em {
  max-width: 96px;
  color: #748285;
  font-style: normal;
}

body[data-ui-version="44"] .ops-order-queue .dashboard-live-queue b {
  color: var(--ops-coral);
}

body[data-ui-version="44"] .ops-order-queue .dashboard-queue-empty {
  display: grid;
  place-content: center;
  min-height: 142px;
  color: #879497;
  border: 1px dashed #d7dfdd;
  border-radius: 10px;
  background: #fff;
  font-size: 11px;
}

body[data-ui-version="44"] .ops-supply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr);
  gap: 14px;
  align-items: start;
}

body[data-ui-version="44"] .ops-replenishment-body {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 190px;
}

body[data-ui-version="44"] .ops-replenishment-primary {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 20px;
  color: var(--ops-ink);
  border: 0;
  border-right: 1px solid var(--ops-line);
  border-radius: 0;
  background: #edf5f2;
  text-align: left;
}

body[data-ui-version="44"] .ops-replenishment-primary:hover,
body[data-ui-version="44"] .ops-replenishment-primary:focus-visible {
  background: #e6f1ed;
  outline: none;
}

body[data-ui-version="44"] .ops-replenishment-primary > span {
  color: #657679;
  font-size: 11px;
  font-weight: 700;
}

body[data-ui-version="44"] .ops-replenishment-primary > strong {
  margin-top: 9px;
  color: var(--ops-green);
  font: 800 45px/.95 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: -.05em;
}

body[data-ui-version="44"] .ops-replenishment-primary > strong small {
  margin-left: 4px;
  color: #758689;
  font-size: 10px;
  letter-spacing: 0;
}

body[data-ui-version="44"] .ops-replenishment-primary > p {
  margin: 10px 0 0;
  color: #78878a;
  font-size: 10px;
  line-height: 1.6;
}

body[data-ui-version="44"] .ops-supply-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-ui-version="44"] .ops-supply-stages > button {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 18px;
  color: var(--ops-ink);
  border: 0;
  border-radius: 0;
  background: #fff;
  text-align: left;
}

body[data-ui-version="44"] .ops-supply-stages > button + button {
  border-left: 1px solid var(--ops-line);
}

body[data-ui-version="44"] .ops-supply-stages > button:hover,
body[data-ui-version="44"] .ops-supply-stages > button:focus-visible {
  background: #f7f9f8;
  outline: none;
}

body[data-ui-version="44"] .ops-supply-stages span {
  color: #748285;
  font-size: 10px;
}

body[data-ui-version="44"] .ops-supply-stages strong {
  margin-top: 7px;
  color: var(--ops-ink);
  font: 800 28px/1 Bahnschrift, "Arial Narrow", sans-serif;
}

body[data-ui-version="44"] .ops-supply-stages small {
  overflow: hidden;
  margin-top: 7px;
  color: #879497;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-ui-version="44"] .ops-supply-stages .weekly {
  background: #fbfaf6;
}

body[data-ui-version="44"] .ops-confidence {
  display: grid;
  padding: 22px 20px 18px;
}

body[data-ui-version="44"] .ops-confidence > strong {
  color: var(--ops-ink);
  font: 800 36px/1 Bahnschrift, "Arial Narrow", sans-serif;
  letter-spacing: -.04em;
}

body[data-ui-version="44"] .ops-confidence > strong small {
  color: #7b898c;
  font-size: 11px;
  letter-spacing: 0;
}

body[data-ui-version="44"] .ops-confidence > span {
  margin-top: 8px;
  color: #718083;
  font-size: 10px;
}

body[data-ui-version="44"] .ops-confidence > div {
  height: 5px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 99px;
  background: #e6ebea;
}

body[data-ui-version="44"] .ops-confidence > div i {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: var(--ops-green);
}

body[data-ui-version="44"] .ops-analysis-gate > footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ops-line);
  background: #fafcfb;
}

body[data-ui-version="44"] .ops-analysis-gate > footer span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px 8px;
  color: #7a898b;
  font-size: 8px;
  text-align: center;
}

body[data-ui-version="44"] .ops-analysis-gate > footer span + span {
  border-left: 1px solid var(--ops-line);
}

body[data-ui-version="44"] .ops-analysis-gate > footer strong {
  color: var(--ops-ink);
  font: 800 16px/1 Bahnschrift, "Arial Narrow", sans-serif;
}

body[data-ui-version="44"] .ops-store-board .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  background: #fff !important;
}

body[data-ui-version="44"] .ops-store-board table {
  min-width: 960px;
  background: #fff !important;
}

body[data-ui-version="44"] .ops-store-board th {
  color: #68777a !important;
  border-color: #e1e8e6 !important;
  background: #f6f8f7 !important;
  font-size: 10px;
}

body[data-ui-version="44"] .ops-store-board td {
  color: #354749 !important;
  border-color: #e7eceb !important;
  background: #fff !important;
  font-size: 11px;
}

body[data-ui-version="44"] .ops-store-board tbody tr:hover td,
body[data-ui-version="44"] .ops-store-board tbody tr:focus-within td {
  color: #26383a !important;
  background: #edf5f2 !important;
}

body[data-ui-version="44"] .ops-store-board .small-button,
body[data-ui-version="44"] .ops-store-board .small-button:hover,
body[data-ui-version="44"] .ops-store-board .small-button:focus-visible {
  color: var(--ops-indigo) !important;
  border-color: #cfcef7 !important;
  background: var(--ops-indigo-soft) !important;
}

@keyframes ops-runway-scan {
  0%, 8% { left: 8%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  92%, 100% { left: 91%; opacity: 0; }
}

@media (max-width: 1180px) {
  body[data-ui-version="44"] .ops-command-center,
  body[data-ui-version="44"] .ops-supply-grid {
    grid-template-columns: 1fr;
  }

  body[data-ui-version="44"] .ops-now {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 18px;
  }

  body[data-ui-version="44"] .ops-now > header {
    align-items: center;
    border-right: 1px solid rgba(218, 242, 234, .13);
    border-bottom: 0;
  }

  body[data-ui-version="44"] .ops-action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }
}

@media (max-width: 980px) {
  body[data-ui-version="44"] .view-root[data-view="dashboard"] {
    min-height: calc(100vh - 70px);
    padding: 16px;
  }

  body[data-ui-version="44"] .ops-fulfillment-layout {
    grid-template-columns: 1fr;
  }

  body[data-ui-version="44"] .ops-runway {
    overflow-x: auto;
  }

  body[data-ui-version="44"] .ops-order-queue {
    border-top: 1px solid var(--ops-line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  body[data-ui-version="44"] .ops-brief {
    padding: 24px 21px 21px 25px;
  }

  body[data-ui-version="44"] .ops-brief h2 {
    font-size: 31px;
  }

  body[data-ui-version="44"] .ops-now {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body[data-ui-version="44"] .ops-now > header {
    border-right: 0;
    border-bottom: 1px solid rgba(218, 242, 234, .13);
  }

  body[data-ui-version="44"] .ops-action-list {
    grid-template-columns: 1fr;
  }

  body[data-ui-version="44"] .ops-ledger {
    grid-template-columns: 1fr 1fr;
  }

  body[data-ui-version="44"] .ops-ledger > button:nth-child(3) {
    border-top: 1px solid var(--ops-line);
    border-left: 0;
  }

  body[data-ui-version="44"] .ops-ledger > button:nth-child(4) {
    border-top: 1px solid var(--ops-line);
  }

  body[data-ui-version="44"] .ops-replenishment-body {
    grid-template-columns: 1fr;
  }

  body[data-ui-version="44"] .ops-replenishment-primary {
    border-right: 0;
    border-bottom: 1px solid var(--ops-line);
  }
}

@media (max-width: 560px) {
  body[data-ui-version="44"] .view-root[data-view="dashboard"] {
    padding: 11px;
  }

  body[data-ui-version="44"] .ops-command-center {
    border-radius: 14px;
  }

  body[data-ui-version="44"] .ops-brief h2 {
    font-size: 28px;
  }

  body[data-ui-version="44"] .ops-source-ledger {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  body[data-ui-version="44"] .ops-brief-actions > button {
    flex: 1 1 130px;
  }

  body[data-ui-version="44"] .ops-ledger,
  body[data-ui-version="44"] .ops-supply-stages {
    grid-template-columns: 1fr;
  }

  body[data-ui-version="44"] .ops-ledger > button + button,
  body[data-ui-version="44"] .ops-ledger > button:nth-child(3),
  body[data-ui-version="44"] .ops-supply-stages > button + button {
    border-top: 1px solid var(--ops-line);
    border-left: 0;
  }

  body[data-ui-version="44"] .ops-section-head {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-version="44"] .ops-runway .dashboard-pipeline::after {
    animation: none !important;
  }
}

/* v47 · 补货订单双价账本 */
body[data-ui-version="44"] .unified-order-summary > span[class^="is-"] {
  min-width: 104px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

body[data-ui-version="44"] .unified-order-summary > span[class^="is-"] small {
  display: block;
  margin-bottom: 3px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body[data-ui-version="44"] .unified-order-summary .is-company-cost {
  box-shadow: inset 3px 0 #4f46e5;
}

body[data-ui-version="44"] .unified-order-summary .is-franchise-price {
  box-shadow: inset 3px 0 #0f9f8f;
}

body[data-ui-version="44"] .unified-order-summary .is-price-difference {
  box-shadow: inset 3px 0 #d97706;
}

body[data-ui-version="44"] .unified-supplier-price {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin-top: 5px;
  color: #4f46e5 !important;
  font-weight: 700;
}

body[data-ui-version="44"] .unified-supplier-price b {
  color: #087f73;
  font-weight: 800;
}

body[data-ui-version="44"] .purchase-dual-price-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-ui-version="44"] .purchase-dual-price-summary > div {
  padding: 13px 15px;
  border: 1px solid #dbe4ee;
  border-radius: 14px;
  background: #f8fafc;
}

body[data-ui-version="44"] .purchase-dual-price-summary > div:nth-child(1) {
  border-top: 3px solid #4f46e5;
}

body[data-ui-version="44"] .purchase-dual-price-summary > div:nth-child(2) {
  border-top: 3px solid #0f9f8f;
}

body[data-ui-version="44"] .purchase-dual-price-summary > div:nth-child(3) {
  border-top: 3px solid #d97706;
}

body[data-ui-version="44"] .purchase-dual-price-summary span,
body[data-ui-version="44"] .purchase-dual-price-summary strong {
  display: block;
}

body[data-ui-version="44"] .purchase-dual-price-summary span {
  margin-bottom: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

body[data-ui-version="44"] .purchase-dual-price-summary strong {
  color: #172033;
  font-size: 18px;
}

body[data-ui-version="44"] .price-missing {
  color: #c2410c;
  font-size: 12px;
  font-weight: 800;
}

body[data-ui-version="44"] .dual-price-line-total,
body[data-ui-version="44"] .manual-restock-dual-price {
  display: grid;
  gap: 3px;
}

body[data-ui-version="44"] .dual-price-line-total span,
body[data-ui-version="44"] .manual-restock-dual-price > span:first-child {
  color: #4f46e5;
}

body[data-ui-version="44"] .dual-price-line-total b,
body[data-ui-version="44"] .manual-restock-dual-price > span:nth-child(2) {
  color: #087f73;
  font-weight: 800;
}

body[data-ui-version="44"] .manual-restock-dual-price small {
  display: grid;
  gap: 2px;
  padding-top: 4px;
  border-top: 1px dashed #dbe4ee;
}

body[data-ui-version="44"] .purchase-details-table {
  min-width: 1120px;
}

body[data-ui-version="44"] .modal:has(.purchase-details-table-wrap),
body[data-ui-version="44"] .modal:has(.purchase-receive-table-wrap) {
  width: min(1180px, calc(100vw - 40px));
  max-width: 1180px;
}

@media (max-width: 900px) {
  body[data-ui-version="44"] .purchase-dual-price-summary {
    grid-template-columns: 1fr;
  }

  body[data-ui-version="44"] .unified-order-summary > span[class^="is-"] {
    min-width: 0;
  }
}

/* Customer service command centre · v48
   Calm light SaaS workspace with one signature SLA response runway. */
body[data-ui-version="44"] .view-root[data-view="customerAi"] {
  --support-canvas: #f3f6fb;
  --support-card: #fff;
  --support-soft: #f7f9fd;
  --support-ink: #17233a;
  --support-muted: #718098;
  --support-line: #e1e7f0;
  --support-indigo: #555dc8;
  --support-indigo-soft: #eef0ff;
  --support-teal: #168e7c;
  --support-amber: #c47b27;
  --support-rose: #d65369;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(85, 93, 200, .07), transparent 24%),
    var(--support-canvas);
}

.customer-command-deck {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 1.25fr) minmax(430px, .95fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(210, 219, 233, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 42px rgba(53, 68, 103, .08);
}

.customer-command-deck::after {
  content: "";
  position: absolute;
  top: -70px;
  right: 27%;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(85, 93, 200, .11);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(85, 93, 200, .025), 0 0 0 62px rgba(22, 142, 124, .018);
  pointer-events: none;
}

.customer-command-copy,
.customer-command-metrics,
.customer-new-case,
.customer-readonly-badge {
  position: relative;
  z-index: 1;
}

.customer-live-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--support-teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

.customer-live-line i,
.customer-facts-freshness i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--support-teal);
  box-shadow: 0 0 0 5px rgba(22, 142, 124, .11);
}

.customer-command-copy h2 {
  margin: 7px 0 5px;
  color: var(--support-ink);
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.15;
  letter-spacing: -.045em;
}

.customer-command-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--support-muted);
  font-size: 13px;
  line-height: 1.75;
}

.customer-command-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  gap: 8px;
  min-width: 0;
}

.customer-command-metrics article {
  display: grid;
  min-height: 88px;
  padding: 12px 13px;
  border: 1px solid var(--support-line);
  border-radius: 13px;
  background: var(--support-soft);
}

.customer-command-metrics article.warning {
  border-color: rgba(214, 83, 105, .24);
  background: #fff6f8;
}

.customer-command-metrics span,
.customer-command-metrics small {
  color: var(--support-muted);
  font-size: 11px;
}

.customer-command-metrics strong {
  align-self: end;
  color: var(--support-ink);
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.customer-command-metrics .warning strong {
  color: var(--support-rose);
}

.customer-new-case {
  min-width: 116px;
  white-space: nowrap;
}

.customer-readonly-badge {
  padding: 9px 12px;
  border: 1px solid var(--support-line);
  border-radius: 999px;
  color: var(--support-muted);
  background: var(--support-soft);
  font-size: 12px;
  white-space: nowrap;
}

.customer-queue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--support-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(53, 68, 103, .05);
}

.customer-queue-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.customer-queue-tabs::-webkit-scrollbar {
  display: none;
}

.customer-queue-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  color: #66738a;
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.customer-queue-tabs button:hover,
.customer-queue-tabs button:focus-visible {
  color: var(--support-ink);
  background: #f1f4f9;
}

.customer-queue-tabs button.active {
  color: #4048af;
  background: var(--support-indigo-soft);
}

.customer-queue-tabs b {
  min-width: 21px;
  padding: 2px 6px;
  border-radius: 999px;
  color: inherit;
  background: rgba(85, 93, 200, .08);
  font-size: 11px;
  text-align: center;
}

.customer-search {
  display: flex;
  gap: 6px;
  flex: 0 1 360px;
}

.customer-search input {
  min-width: 180px;
}

.customer-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 280px) minmax(430px, 1fr) minmax(300px, 340px);
  gap: 12px;
  min-width: 0;
  height: min(720px, calc(100vh - 286px));
  min-height: 600px;
}

.customer-case-queue,
.customer-conversation,
.customer-facts {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--support-line);
  border-radius: 16px;
  background: var(--support-card);
  box-shadow: 0 14px 34px rgba(53, 68, 103, .06);
}

.customer-case-queue {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.customer-case-queue > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 15px;
  border-bottom: 1px solid var(--support-line);
}

.customer-case-queue > header span {
  color: var(--support-ink);
  font-size: 14px;
  font-weight: 800;
}

.customer-case-queue > header small {
  color: var(--support-muted);
}

.customer-case-list,
.customer-message-thread,
.customer-facts {
  scrollbar-color: #cfd7e6 transparent;
  scrollbar-width: thin;
}

.customer-case-list {
  min-height: 0;
  overflow-y: auto;
  padding: 7px;
}

.customer-case-card {
  display: grid;
  width: 100%;
  gap: 8px;
  margin: 0 0 5px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--support-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.customer-case-card:hover,
.customer-case-card:focus-visible {
  border-color: #dce2ed;
  background: #f7f9fc;
  outline: none;
}

.customer-case-card.active {
  border-color: rgba(85, 93, 200, .28);
  background: var(--support-indigo-soft);
  box-shadow: inset 3px 0 var(--support-indigo);
}

.customer-case-card-top,
.customer-case-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.customer-case-card-top time {
  margin-left: auto;
  color: var(--support-muted);
  font-size: 10px;
  font-weight: 700;
}

.customer-channel,
.customer-priority {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.customer-channel {
  color: #3e47aa;
  background: #e8ebff;
}

.customer-priority {
  color: #6f7a8e;
  background: #eef1f5;
}

.customer-priority.high {
  color: #a66216;
  background: #fff1dc;
}

.customer-priority.urgent {
  color: #b93851;
  background: #ffe7ec;
}

.customer-case-card > strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-case-preview {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  color: var(--support-muted);
  font-size: 11px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.customer-case-card-meta {
  color: #8490a4;
  font-size: 10px;
}

.customer-case-card-meta b,
.customer-case-card-meta i {
  overflow: hidden;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-case-card-meta small {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
}

.customer-queue-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 220px;
  color: var(--support-muted);
  text-align: center;
}

.customer-queue-empty strong {
  color: var(--support-ink);
}

.customer-conversation {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.customer-conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 15px 17px;
  border-bottom: 1px solid var(--support-line);
}

.customer-conversation-header > div:first-child {
  min-width: 0;
}

.customer-case-kicker {
  display: block;
  color: var(--support-indigo);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.customer-conversation-header h2 {
  overflow: hidden;
  margin: 3px 0 4px;
  color: var(--support-ink);
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-conversation-header p {
  overflow: hidden;
  margin: 0;
  color: var(--support-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-case-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.customer-collision-guard {
  margin: 10px 13px 0;
  padding: 9px 11px;
  border: 1px solid #f0d7a9;
  border-radius: 10px;
  color: #855b25;
  background: #fff9ed;
  font-size: 11px;
}

.customer-message-thread {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background-color: #fafbfd;
  background-image: linear-gradient(rgba(232, 237, 246, .42) 1px, transparent 1px);
  background-size: 100% 38px;
}

.customer-message {
  position: relative;
  display: grid;
  width: min(84%, 620px);
  gap: 8px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid var(--support-line);
  border-radius: 13px 13px 13px 4px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(53, 68, 103, .05);
}

.customer-message.agent {
  margin-left: auto;
  border-color: rgba(85, 93, 200, .22);
  border-radius: 13px 13px 4px 13px;
  background: #f2f3ff;
}

.customer-message.internal_note {
  width: 94%;
  margin-inline: auto;
  border-style: dashed;
  border-color: #e7c68e;
  background: #fffaf1;
}

.customer-message.ai_draft {
  width: 96%;
  margin-inline: auto;
  border-color: rgba(22, 142, 124, .27);
  border-radius: 14px;
  background: #f3fbf9;
  box-shadow: 0 8px 22px rgba(22, 142, 124, .07);
}

.customer-message.system {
  width: auto;
  max-width: 88%;
  margin-inline: auto;
  padding: 7px 11px;
  border: 0;
  border-radius: 999px;
  color: var(--support-muted);
  background: #eef1f5;
  box-shadow: none;
  text-align: center;
}

.customer-message header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.customer-message header span {
  color: var(--support-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.customer-message header time,
.customer-message footer {
  color: #8d98aa;
  font-size: 9px;
}

.customer-message-content {
  color: #354156;
  font-size: 12px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.customer-ai-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.customer-ai-evidence span {
  padding: 5px 7px;
  border: 1px solid rgba(22, 142, 124, .14);
  border-radius: 7px;
  color: #567069;
  background: rgba(255, 255, 255, .7);
  font-size: 9px;
}

.customer-message details {
  color: var(--support-muted);
  font-size: 10px;
}

.customer-message details p {
  margin: 6px 0 0;
  line-height: 1.6;
}

.customer-ai-warning {
  display: grid;
  gap: 4px;
}

.customer-ai-warning span {
  color: #86602f;
  font-size: 10px;
  line-height: 1.45;
}

.customer-ai-warning span::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 50%;
  color: #fff;
  background: var(--support-amber);
  font-size: 8px;
  font-weight: 900;
}

.customer-message-actions {
  display: flex;
  justify-content: flex-end;
}

.customer-copilot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-top: 1px solid var(--support-line);
  background: #fff;
}

.customer-copilot-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
}

.customer-copilot-title > div {
  display: grid;
  gap: 2px;
}

.customer-copilot-title span {
  color: var(--support-teal);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.customer-copilot-title strong {
  color: var(--support-ink);
  font-size: 12px;
}

.customer-copilot > p {
  display: none;
  margin: 0;
  color: var(--support-muted);
  font-size: 10px;
}

.customer-message-composer {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px 13px 13px;
  border-top: 1px solid var(--support-line);
  background: #fff;
}

.customer-message-composer label {
  display: grid;
  gap: 4px;
  color: var(--support-muted);
  font-size: 10px;
}

.customer-message-composer textarea {
  min-height: 62px;
  resize: vertical;
}

.customer-readonly-note {
  display: block;
  margin: 10px 13px 13px;
  padding: 10px;
  border: 1px solid var(--support-line);
  border-radius: 9px;
  color: var(--support-muted);
  background: var(--support-soft);
  font-size: 11px;
  text-align: center;
}

.customer-empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  place-items: center;
  align-content: center;
  padding: 36px;
  text-align: center;
}

.customer-empty-state > strong {
  margin-top: 20px;
  color: var(--support-ink);
  font-size: 18px;
}

.customer-empty-state > p {
  max-width: 420px;
  margin: 10px 0 0;
  color: var(--support-muted);
  line-height: 1.7;
}

.customer-workspace.is-empty {
  height: min(620px, calc(100vh - 345px));
  min-height: 480px;
}

.customer-chat-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #f7f9fc;
}

.customer-chat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--support-line);
  background: rgba(255, 255, 255, .92);
}

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

.customer-chat-agent-avatar,
.customer-chat-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #1aa58d, #5661d8);
  box-shadow: 0 8px 20px rgba(68, 92, 180, .18);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.customer-chat-agent-avatar {
  width: 40px;
  height: 40px;
}

.customer-chat-agent div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.customer-chat-agent strong {
  overflow: hidden;
  color: var(--support-ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-chat-agent small {
  overflow: hidden;
  color: var(--support-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-chat-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #168e7c;
  font-size: 11px;
  font-weight: 800;
}

.customer-chat-online i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1ab193;
  box-shadow: 0 0 0 4px rgba(26, 177, 147, .1);
}

.customer-chat-thread {
  min-height: 0;
  overflow-y: auto;
  padding: 24px 20px;
  background:
    radial-gradient(circle at 82% 12%, rgba(85, 93, 200, .065), transparent 27%),
    linear-gradient(rgba(224, 231, 240, .36) 1px, transparent 1px);
  background-size: auto, 100% 42px;
}

.customer-chat-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
}

.customer-chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.customer-chat-bubble {
  padding: 14px 16px;
  border: 1px solid #dfe6ee;
  border-radius: 5px 17px 17px 17px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(36, 53, 81, .07);
}

.customer-chat-bubble strong {
  display: block;
  margin-bottom: 6px;
  color: var(--support-ink);
  font-size: 15px;
}

.customer-chat-bubble p {
  margin: 0;
  color: #67748a;
  font-size: 12px;
  line-height: 1.75;
}

.customer-chat-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 0 44px;
}

.customer-chat-prompts button {
  padding: 7px 11px;
  border: 1px solid #dce4ec;
  border-radius: 999px;
  color: #536077;
  background: rgba(255, 255, 255, .88);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}

.customer-chat-prompts button:hover,
.customer-chat-prompts button:focus-visible {
  border-color: rgba(22, 142, 124, .45);
  color: #147b6b;
  outline: none;
  transform: translateY(-1px);
}

.customer-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid var(--support-line);
  background: #fff;
}

.customer-chat-input {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px 7px;
  border: 1px solid #ccd7e2;
  border-radius: 14px;
  background: #fbfcfe;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.customer-chat-input:focus-within {
  border-color: #25a18b;
  box-shadow: 0 0 0 3px rgba(37, 161, 139, .11);
}

.customer-chat-input textarea {
  width: 100%;
  min-height: 42px;
  max-height: 130px;
  padding: 0;
  resize: none;
  border: 0;
  outline: 0;
  color: var(--support-ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
}

.customer-chat-input small {
  overflow: hidden;
  color: #8993a4;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 92px;
  min-height: 66px;
  border-radius: 14px;
}

.customer-chat-send b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .16);
  font-size: 15px;
}

.customer-fast-start {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(22, 142, 124, .05), transparent 42%),
    var(--support-card);
}

.customer-fast-start::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(85, 93, 200, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 93, 200, .045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.customer-fast-start > * {
  position: relative;
  z-index: 1;
}

.customer-fast-start-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(22, 142, 124, .22);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #1aa58d, #5661d8);
  box-shadow:
    0 14px 30px rgba(55, 93, 171, .18),
    0 0 0 9px rgba(22, 142, 124, .055);
}

.customer-fast-start-mark span {
  font-size: 30px;
  font-weight: 850;
  line-height: 1;
  transform: translateY(-1px);
}

.customer-fast-capabilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 8px;
}

.customer-fast-capabilities span {
  padding: 6px 10px;
  border: 1px solid #dbe4eb;
  border-radius: 999px;
  color: #526077;
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 750;
}

.customer-fast-hint {
  margin-top: 13px;
  color: #168e7c;
  font-size: 11px;
  font-weight: 800;
}

.customer-empty-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(85, 93, 200, .22);
  border-radius: 50%;
  color: #fff;
  background: var(--support-indigo);
  box-shadow: 0 0 0 18px rgba(85, 93, 200, .06);
}

.customer-empty-orbit i {
  position: absolute;
  width: 118px;
  height: 48px;
  border: 1px solid rgba(22, 142, 124, .35);
  border-radius: 50%;
  transform: rotate(-22deg);
}

.customer-empty-orbit span {
  font-weight: 900;
  letter-spacing: .08em;
}

.customer-facts {
  display: grid;
  align-content: start;
  gap: 9px;
  overflow-y: auto;
  padding: 9px;
  background: #f9fafc;
}

.customer-sla-runway,
.customer-fact-card,
.customer-facts-empty {
  border: 1px solid var(--support-line);
  border-radius: 12px;
  background: #fff;
}

.customer-sla-runway {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 13px;
  overflow: hidden;
  border-color: rgba(85, 93, 200, .2);
  background: linear-gradient(90deg, rgba(85, 93, 200, .07), transparent 48%), #fff;
}

.customer-sla-runway header,
.customer-fact-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.customer-sla-runway header span {
  color: var(--support-indigo);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.customer-sla-runway header b {
  color: var(--support-teal);
  font-size: 10px;
}

.customer-sla-runway.at_risk header b,
.customer-sla-runway.at_risk > strong {
  color: var(--support-amber);
}

.customer-sla-runway.breached header b,
.customer-sla-runway.breached > strong {
  color: var(--support-rose);
}

.customer-sla-track {
  position: relative;
  height: 14px;
}

.customer-sla-track::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: #e4e8f1;
}

.customer-sla-track i,
.customer-sla-track span,
.customer-sla-track em {
  position: absolute;
  top: 3px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--support-indigo);
  box-shadow: 0 0 0 1px rgba(85, 93, 200, .25);
}

.customer-sla-track i { left: 0; }
.customer-sla-track span { left: 50%; }
.customer-sla-track em { right: 0; background: var(--support-teal); }
.customer-sla-runway.at_risk .customer-sla-track span { background: var(--support-amber); }
.customer-sla-runway.breached .customer-sla-track span {
  background: var(--support-rose);
  box-shadow: 0 0 0 5px rgba(214, 83, 105, .12);
}

.customer-sla-runway > strong {
  color: var(--support-ink);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.customer-sla-runway > p {
  margin: 0;
  color: var(--support-muted);
  font-size: 10px;
}

.customer-fact-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.customer-fact-card > header {
  padding-bottom: 8px;
  border-bottom: 1px solid #edf0f5;
}

.customer-fact-card > header span {
  color: var(--support-ink);
  font-size: 11px;
  font-weight: 900;
}

.customer-fact-card > header time {
  color: var(--support-teal);
  font-size: 9px;
}

.customer-fact-card > strong {
  overflow-wrap: anywhere;
  color: var(--support-ink);
  font-size: 12px;
}

.customer-fact-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.customer-fact-card dl div {
  display: grid;
  gap: 2px;
}

.customer-fact-card dt,
.customer-stock-triplet small {
  color: var(--support-muted);
  font-size: 9px;
}

.customer-fact-card dd {
  overflow-wrap: anywhere;
  margin: 0;
  color: #344056;
  font-size: 10px;
  font-weight: 700;
}

.customer-inventory-fact {
  display: grid;
  gap: 8px;
}

.customer-inventory-fact + .customer-inventory-fact {
  padding-top: 10px;
  border-top: 1px solid #edf0f5;
}

.customer-inventory-fact > strong {
  overflow-wrap: anywhere;
  color: #344056;
  font-size: 10px;
}

.customer-stock-triplet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.customer-stock-triplet span {
  display: grid;
  gap: 2px;
  padding: 7px;
  border: 1px solid #e8ecf2;
  border-radius: 8px;
  background: var(--support-soft);
}

.customer-stock-triplet span.available {
  border-color: rgba(22, 142, 124, .2);
  background: #eef9f6;
}

.customer-stock-triplet b {
  color: var(--support-ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.customer-stock-triplet .available b {
  color: var(--support-teal);
}

.customer-inventory-fact p {
  margin: 0;
  color: #69768c;
  font-size: 9px;
  line-height: 1.5;
}

.customer-inventory-fact em {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #4650ad;
  background: var(--support-indigo-soft);
  font-style: normal;
}

.customer-fact-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.customer-fact-card li {
  padding-left: 12px;
  color: #59667b;
  font-size: 9px;
  line-height: 1.55;
}

.customer-fact-card li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 7px 1px -12px;
  border-radius: 50%;
  background: var(--support-indigo);
}

.customer-fact-missing {
  padding: 10px;
  border-radius: 8px;
  color: var(--support-muted);
  background: var(--support-soft);
  font-size: 9px;
  line-height: 1.6;
}

.customer-facts-freshness {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 5px 7px;
  color: #7c889c;
  font-size: 8px;
  line-height: 1.5;
}

.customer-facts-empty {
  display: grid;
  align-content: center;
  min-height: 260px;
  padding: 24px;
  text-align: center;
}

.customer-facts-empty span {
  color: var(--support-indigo);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.customer-facts-empty strong {
  margin: 8px 0;
  color: var(--support-ink);
}

.customer-facts-empty p {
  margin: 0;
  color: var(--support-muted);
  font-size: 10px;
  line-height: 1.7;
}

.customer-create-note {
  display: grid;
  gap: 3px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(85, 93, 200, .16);
  border-radius: 10px;
  color: #69758a;
  background: #f5f6ff;
}

.customer-create-note strong {
  color: #333b8e;
}

.customer-create-note span {
  font-size: 11px;
}

@media (max-width: 1500px) {
  .customer-command-deck {
    grid-template-columns: minmax(330px, 1fr) minmax(380px, .85fr) auto;
  }

  .customer-workspace {
    grid-template-columns: minmax(235px, 260px) minmax(400px, 1fr) minmax(280px, 315px);
  }
}

@media (max-width: 1240px) {
  .customer-command-deck {
    grid-template-columns: 1fr auto;
  }

  .customer-command-metrics {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .customer-workspace {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  }

  .customer-case-queue,
  .customer-conversation {
    height: 650px;
  }

  .customer-facts {
    grid-column: 1 / -1;
    grid-template-columns: minmax(240px, .8fr) repeat(3, minmax(200px, 1fr));
    overflow: visible;
  }

  .customer-facts-freshness {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  body[data-ui-version="44"] .view-root[data-view="customerAi"] {
    padding: 10px;
  }

  .customer-command-deck {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .customer-command-metrics,
  .customer-command-deck .customer-new-case,
  .customer-command-deck .customer-readonly-badge {
    grid-column: 1;
  }

  .customer-command-metrics {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }

  .customer-new-case {
    justify-self: start;
  }

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

  .customer-search {
    flex-basis: auto;
  }

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

  .customer-case-queue,
  .customer-conversation {
    height: auto;
    min-height: 520px;
  }

  .customer-case-queue {
    max-height: 420px;
  }

  .customer-conversation {
    min-height: 680px;
  }

  .customer-facts {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .customer-message-composer {
    grid-template-columns: 1fr;
  }

  .customer-conversation-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-case-actions {
    justify-content: flex-start;
  }
}
/* v49 · fast service, industry signal and ERP product tables */
.view-root[data-view="productCatalog"] .erp-master-table .table-wrap,
.view-root[data-view="catalog"] .erp-master-table .table-wrap {
  max-height: calc(100vh - 308px);
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.view-root[data-view="productCatalog"] .erp-master-table table,
.view-root[data-view="catalog"] .erp-master-table table {
  display: table !important;
  width: 100% !important;
  min-width: 1760px !important;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.view-root[data-view="productCatalog"] .erp-master-table thead,
.view-root[data-view="catalog"] .erp-master-table thead {
  display: table-header-group !important;
}

.view-root[data-view="productCatalog"] .erp-master-table tbody,
.view-root[data-view="catalog"] .erp-master-table tbody {
  display: table-row-group !important;
  padding: 0 !important;
}

.view-root[data-view="productCatalog"] .erp-master-table tr,
.view-root[data-view="catalog"] .erp-master-table tr {
  display: table-row !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.view-root[data-view="productCatalog"] .erp-master-table th,
.view-root[data-view="productCatalog"] .erp-master-table td,
.view-root[data-view="catalog"] .erp-master-table th,
.view-root[data-view="catalog"] .erp-master-table td {
  display: table-cell !important;
  width: auto;
  padding: 9px 8px !important;
  border-bottom: 1px solid #e8edf3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.view-root[data-view="productCatalog"] .erp-master-table td::before,
.view-root[data-view="catalog"] .erp-master-table td::before {
  display: none !important;
  content: none !important;
}

.view-root[data-view="productCatalog"] .erp-master-table .product-name-cell,
.view-root[data-view="productCatalog"] .erp-master-table .spec-cell,
.view-root[data-view="productCatalog"] .erp-master-table .supplier-cell,
.view-root[data-view="catalog"] .erp-master-table .product-name-cell,
.view-root[data-view="catalog"] .erp-master-table .spec-cell,
.view-root[data-view="catalog"] .erp-master-table .supplier-cell {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.customer-quick-entry {
  position: relative;
  overflow: hidden;
  border: 1px solid #dbe5e5;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(20, 145, 126, .06), transparent 26%),
    #fff;
  box-shadow: 0 14px 36px rgba(25, 46, 74, .07);
}

.customer-quick-entry::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: linear-gradient(180deg, #1aa58d, #5661d8);
}

.customer-quick-entry form {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 17px 18px 17px 22px;
}

.customer-quick-copy {
  display: grid;
  gap: 3px;
}

.customer-quick-copy > span {
  color: #168e7c;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
}

.customer-quick-copy strong {
  color: #17243a;
  font-size: 16px;
  line-height: 1.35;
}

.customer-quick-copy small {
  color: #7b8799;
  font-size: 11px;
  line-height: 1.45;
}

.customer-quick-input {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.customer-quick-input textarea {
  min-height: 74px;
  resize: vertical;
  border: 1px solid #cad7df;
  border-radius: 12px;
  background: #fbfdfd;
  padding: 12px 14px;
  color: #1d2b42;
  font-size: 14px;
  line-height: 1.55;
  outline: none;
}

.customer-quick-input textarea:focus {
  border-color: #28a58f;
  box-shadow: 0 0 0 3px rgba(40, 165, 143, .12);
}

.customer-quick-settings {
  width: 132px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.customer-quick-settings select,
.customer-quick-settings button {
  width: 100%;
  min-height: 34px;
}

.customer-quick-settings select {
  border-radius: 9px;
  font-size: 12px;
}

.customer-command-deck .customer-new-case {
  align-self: flex-start;
  color: #4e5a70;
  background: #fff;
}

@media (max-width: 760px) {
  .customer-workspace.is-empty {
    height: auto;
    min-height: 0;
  }

  .customer-chat-shell {
    min-height: 560px;
  }

  .customer-chat-thread {
    padding: 18px 12px;
  }

  .customer-chat-prompts {
    margin-left: 0;
  }

  .customer-chat-composer {
    grid-template-columns: 1fr;
  }

  .customer-chat-send {
    min-height: 44px;
  }
}

.news-signal-board {
  position: relative;
  overflow: hidden;
  min-height: 164px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: 24px;
  align-items: center;
  padding: 24px 26px;
  border: 1px solid #dce5ec;
  border-radius: 18px;
  background:
    radial-gradient(circle at 77% 42%, rgba(81, 96, 214, .09), transparent 28%),
    linear-gradient(135deg, #ffffff, #f7fafb);
  box-shadow: 0 18px 44px rgba(30, 46, 71, .08);
}

.news-signal-board::after {
  position: absolute;
  right: 24%;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(83, 98, 205, .09);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 24px rgba(83, 98, 205, .025), 0 0 0 48px rgba(23, 151, 129, .018);
  pointer-events: none;
}

.news-signal-copy {
  position: relative;
  z-index: 1;
  max-width: 540px;
}

.news-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #168e7c;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
}

.news-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1cac93;
  box-shadow: 0 0 0 4px rgba(28, 172, 147, .1);
}

.news-signal-copy h2 {
  margin: 8px 0 7px;
  color: #17243a;
  font-size: clamp(24px, 2.25vw, 34px);
  font-weight: 850;
  letter-spacing: -.035em;
}

.news-signal-copy p {
  margin: 0;
  color: #6f7c91;
  font-size: 13px;
  line-height: 1.7;
}

.news-signal-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 8px;
}

.news-signal-metrics article {
  min-width: 96px;
  padding: 12px 13px;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  background: rgba(255, 255, 255, .84);
}

.news-signal-metrics article.warning {
  border-color: #f0d6b4;
  background: #fffaf3;
}

.news-signal-metrics span {
  display: block;
  color: #7b8799;
  font-size: 11px;
}

.news-signal-metrics strong {
  display: block;
  margin-top: 4px;
  color: #1b2940;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.news-filter-bar {
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #e0e6ed;
  border-radius: 14px;
  background: #fff;
}

.news-topic-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: #f1f4f7;
}

.news-topic-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0 14px;
  color: #69768b;
  font-weight: 750;
  cursor: pointer;
}

.news-topic-tabs button.active {
  color: #4550bd;
  background: #fff;
  box-shadow: 0 4px 12px rgba(49, 59, 116, .1);
}

.news-filter-bar form {
  display: flex;
  gap: 7px;
}

.news-filter-bar form input {
  min-width: 260px;
}

.news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 16px;
  align-items: start;
}

.news-stream {
  display: grid;
  gap: 10px;
}

.news-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 17px 18px;
  border: 1px solid #e0e6ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(30, 46, 71, .045);
}

.news-card.unread {
  border-left: 4px solid #5661d8;
  padding-left: 15px;
}

.news-card-meta,
.news-card footer {
  display: flex;
  gap: 8px;
  align-items: center;
}

.news-card-meta time {
  margin-left: auto;
  color: #8b95a6;
  font-size: 11px;
}

.news-topic,
.news-review {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 800;
}

.news-topic.adult_products {
  color: #9d4e78;
  background: #faedf4;
}

.news-topic.takeaway {
  color: #9b691d;
  background: #fff5df;
}

.news-review.approved {
  color: #137b6c;
  background: #e8f7f3;
}

.news-review.pending {
  color: #a36a1d;
  background: #fff4df;
}

.news-review.rejected {
  color: #8b5962;
  background: #f5edef;
}

.news-card-title {
  color: #1d2b42;
  font-size: 17px;
  font-weight: 810;
  line-height: 1.45;
  text-decoration: none;
}

.news-card-title:hover {
  color: #4f57c8;
}

.news-card p {
  margin: 0;
  color: #647187;
  font-size: 13px;
  line-height: 1.65;
}

.news-card footer {
  justify-content: space-between;
  padding-top: 4px;
  color: #8792a4;
  font-size: 11px;
}

.news-source-rail {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dfe6ec;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(30, 46, 71, .05);
}

.news-source-rail > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.news-source-rail > header strong {
  color: #202e45;
  font-size: 15px;
}

.news-source-rail > header span {
  color: #8b95a5;
  font-size: 10px;
}

.news-source-list {
  display: grid;
  gap: 4px;
}

.news-source-list article {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #edf1f4;
}

.news-source-list article i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20a48e;
}

.news-source-list article.error i {
  background: #d65c6e;
}

.news-source-list article div {
  display: grid;
  gap: 2px;
}

.news-source-list article strong {
  color: #334158;
  font-size: 12px;
}

.news-source-list article span {
  color: #8a95a6;
  font-size: 10px;
}

.news-source-list article b {
  color: #168e7c;
  font-size: 10px;
}

.news-source-list article.error b {
  color: #c65365;
}

.news-knowledge-rule {
  padding: 12px;
  border-radius: 11px;
  background: #f4f7f9;
}

.news-knowledge-rule strong {
  color: #334158;
  font-size: 12px;
}

.news-knowledge-rule p {
  margin: 5px 0 0;
  color: #758195;
  font-size: 11px;
  line-height: 1.6;
}

.news-empty {
  min-height: 260px;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  border: 1px dashed #d7e0e8;
  border-radius: 15px;
  background: rgba(255, 255, 255, .72);
}

.news-empty strong {
  color: #334158;
}

.news-empty span {
  color: #8994a5;
  font-size: 12px;
}

@media (max-width: 1380px) {
  .news-signal-board {
    grid-template-columns: 1fr auto;
  }

  .news-signal-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .news-signal-board > .primary-button {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 1080px) {
  .customer-quick-entry form {
    grid-template-columns: 1fr;
  }

  .customer-quick-input {
    grid-template-columns: 1fr;
  }

  .customer-quick-settings {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .news-layout {
    grid-template-columns: 1fr;
  }

  .news-source-rail {
    position: static;
  }

  .news-filter-bar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .customer-quick-settings,
  .news-signal-board,
  .news-signal-metrics {
    grid-template-columns: 1fr;
  }

  .news-signal-board > .primary-button,
  .news-signal-metrics {
    grid-column: 1;
    grid-row: auto;
  }

  .news-filter-bar form,
  .news-topic-tabs,
  .news-card footer {
    align-items: stretch;
    flex-direction: column;
  }

  .news-filter-bar form input {
    min-width: 0;
    width: 100%;
  }
}

/* v52 final cascade — keep the neural command deck above legacy login themes */
body[data-ui-version="44"] .login-screen {
  --login-cyan: #66f5e2;
  --login-blue: #58a7ff;
  --login-violet: #8a7dff;
  --login-parallax-x: 0px;
  --login-parallax-y: 0px;
  grid-template-columns: minmax(340px, 1fr) minmax(260px, 330px) minmax(410px, 474px);
  gap: clamp(20px, 2.6vw, 46px);
  padding: clamp(34px, 5vw, 74px) clamp(28px, 4.5vw, 86px);
  background:
    radial-gradient(circle at 16% 18%, rgba(90, 82, 255, .28), transparent 30%),
    radial-gradient(circle at 78% 82%, rgba(35, 221, 202, .17), transparent 31%),
    radial-gradient(circle at 52% 48%, rgba(49, 91, 193, .13), transparent 36%),
    linear-gradient(137deg, #020512 0%, #07112b 48%, #041b27 100%);
}

body[data-ui-version="44"] .login-hud-copy {
  z-index: 5;
  grid-column: 1;
  grid-row: 1;
  max-width: 590px;
}

body[data-ui-version="44"] .login-core-viz {
  position: relative;
  top: auto;
  left: auto;
  width: min(100%, 330px);
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  transform: translate3d(var(--login-parallax-x), var(--login-parallax-y), 0);
}

body[data-ui-version="44"] .login-hud-copy h2 {
  margin: 24px 0 18px;
  color: #f5f7ff;
  font-family: "Arial Narrow", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: clamp(50px, 4.5vw, 72px);
  font-weight: 840;
  line-height: 1.06;
  letter-spacing: -3px;
}

body[data-ui-version="44"] .login-hud-copy h2 em {
  display: block;
  margin-top: 6px;
  color: transparent;
  background: linear-gradient(94deg, #969dff 0%, #eef1ff 42%, #76f5e5 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: .78em;
  font-style: normal;
  letter-spacing: -2px;
  white-space: nowrap;
  filter:
    drop-shadow(0 0 22px rgba(105, 222, 211, .16))
    drop-shadow(0 6px 22px rgba(20, 34, 87, .32));
}

body[data-ui-version="44"] .login-hud-copy > p {
  max-width: 438px;
  color: #98a7c6;
  font-size: 14px;
  line-height: 1.9;
}

body[data-ui-version="44"] .login-hud-stats {
  max-width: 560px;
  gap: 9px;
  margin-top: 30px;
}

body[data-ui-version="44"] .login-hud-stats > div {
  padding: 13px 14px 12px;
  border-color: rgba(131, 153, 217, .2);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(17, 33, 72, .82), rgba(7, 20, 48, .68));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .05),
    0 14px 32px rgba(0, 6, 27, .2);
}

body[data-ui-version="44"] .login-hud-stats strong {
  color: #eef4ff;
  font-size: 11px;
  letter-spacing: 1.05px;
}

body[data-ui-version="44"] .login-hud-stats span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8291b0;
  font-size: 9px;
}

body[data-ui-version="44"] .login-panel {
  z-index: 7;
  width: 100%;
  max-width: 474px;
  grid-column: 3;
  grid-row: 1;
  gap: 16px;
  padding: 30px 32px 28px;
  color: #eff4ff;
  border: 1px solid rgba(142, 163, 233, .27);
  border-radius: 25px;
  background:
    radial-gradient(circle at 100% 0, rgba(79, 93, 223, .17), transparent 33%),
    radial-gradient(circle at 0 100%, rgba(38, 210, 192, .085), transparent 34%),
    linear-gradient(145deg, rgba(12, 23, 52, .94), rgba(6, 16, 38, .91));
  box-shadow:
    0 42px 110px rgba(0, 4, 20, .6),
    0 0 0 1px rgba(119, 148, 225, .07),
    0 0 62px rgba(62, 103, 217, .11),
    inset 0 1px rgba(255, 255, 255, .075);
  backdrop-filter: blur(30px) saturate(132%);
}

body[data-ui-version="44"] .login-panel::before {
  inset: 0 24px auto;
  height: 2px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, transparent, #8079ff 18%, #68aeff 54%, #55edda 84%, transparent);
  box-shadow:
    0 2px 16px rgba(101, 116, 244, .58),
    0 0 28px rgba(65, 226, 208, .22);
}

body[data-ui-version="44"] .login-panel::after {
  border-color: rgba(105, 119, 238, .1);
  box-shadow:
    0 0 0 28px rgba(99, 109, 235, .024),
    0 0 0 58px rgba(42, 197, 184, .016);
}

body[data-ui-version="44"] .login-system-state {
  color: #73819f;
  border-color: rgba(132, 151, 208, .14);
}

body[data-ui-version="44"] .login-system-state em {
  color: #7ef3df;
}

body[data-ui-version="44"] .login-brand strong {
  color: #f3f6ff;
  font-size: 18px;
}

body[data-ui-version="44"] .login-brand small {
  color: #6f7f9f;
}

body[data-ui-version="44"] .login-panel h1 {
  margin: 8px 0 -8px;
  color: #f4f7ff;
  font-size: 29px;
  letter-spacing: -.7px;
}

body[data-ui-version="44"] .login-subtitle {
  color: #7c8aa7;
}

body[data-ui-version="44"] .login-panel label {
  color: #8896b3;
}

body[data-ui-version="44"] .login-panel input {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  color: #eef4ff;
  border: 1px solid rgba(122, 145, 207, .23);
  border-radius: 11px;
  outline: 0;
  background:
    linear-gradient(90deg, rgba(96, 105, 230, .07), transparent 42%),
    rgba(3, 12, 31, .66);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, .2),
    0 0 0 0 rgba(99, 230, 214, 0);
}

body[data-ui-version="44"] .login-panel input::placeholder {
  color: #52617f;
}

body[data-ui-version="44"] .login-panel input:-webkit-autofill,
body[data-ui-version="44"] .login-panel input:-webkit-autofill:hover,
body[data-ui-version="44"] .login-panel input:-webkit-autofill:focus {
  border-color: rgba(122, 145, 207, .3);
  -webkit-text-fill-color: #eef4ff;
  caret-color: #eef4ff;
  box-shadow:
    0 0 0 1000px #08142f inset,
    inset 0 1px 3px rgba(0, 0, 0, .2);
  transition: background-color 9999s ease-out 0s;
}

body[data-ui-version="44"] .login-panel input:hover {
  border-color: rgba(139, 157, 221, .42);
}

body[data-ui-version="44"] .login-panel input:focus {
  color: #fff;
  border-color: rgba(102, 245, 226, .72);
  background-color: rgba(5, 15, 37, .92);
  box-shadow:
    0 0 0 4px rgba(72, 221, 204, .09),
    0 12px 28px rgba(0, 7, 27, .24),
    inset 0 0 18px rgba(83, 105, 229, .045);
}

body[data-ui-version="44"] .login-panel .primary-button {
  min-height: 50px;
  color: #fff;
  border: 1px solid rgba(155, 176, 255, .18);
  background:
    radial-gradient(circle at 86% 12%, rgba(100, 255, 235, .48), transparent 30%),
    linear-gradient(105deg, #5d5ce8 0%, #596de7 46%, #249fc7 100%);
  box-shadow:
    0 16px 34px rgba(43, 68, 188, .35),
    0 0 28px rgba(53, 210, 196, .09),
    inset 0 1px rgba(255, 255, 255, .24);
}

body[data-ui-version="44"] .login-hint {
  color: #667593;
  border-color: rgba(133, 151, 204, .13);
}

@media (max-width: 1180px) and (min-width: 861px) {
  body[data-ui-version="44"] .login-screen {
    grid-template-columns: minmax(350px, 1fr) minmax(390px, 440px);
    gap: 38px;
    padding-inline: 5vw;
  }

  body[data-ui-version="44"] .login-core-viz {
    display: none;
  }

  body[data-ui-version="44"] .login-hud-copy {
    grid-column: 1;
  }

  body[data-ui-version="44"] .login-panel {
    grid-column: 2;
  }

  body[data-ui-version="44"] .login-hud-copy h2 {
    font-size: clamp(43px, 4.8vw, 56px);
  }
}

@media (max-width: 1499px) and (min-width: 1181px) {
  body[data-ui-version="44"] .login-core-node {
    display: none;
  }
}

@media (max-height: 760px) and (min-width: 861px) {
  body[data-ui-version="44"] .login-screen {
    padding-block: 24px;
  }

  body[data-ui-version="44"] .login-hud-copy h2 {
    margin-block: 18px 13px;
    font-size: clamp(43px, 4vw, 58px);
  }

  body[data-ui-version="44"] .login-panel {
    gap: 13px;
    padding-block: 24px 23px;
  }
}

@media (max-width: 860px) {
  body[data-ui-version="44"] .login-screen {
    grid-template-columns: minmax(0, 470px);
    justify-content: center;
    padding: 30px 20px;
  }

  body[data-ui-version="44"] .login-hud-copy,
  body[data-ui-version="44"] .login-core-viz {
    display: none;
  }

  body[data-ui-version="44"] .login-panel {
    width: 100%;
    max-width: 470px;
    grid-column: 1;
  }
}

@media (max-width: 520px) {
  body[data-ui-version="44"] .login-screen {
    padding: 16px 13px;
  }

  body[data-ui-version="44"] .login-panel {
    gap: 14px;
    padding: 24px 21px 22px;
    border-radius: 22px;
  }
}

/* v53 authoritative final cascade */
body[data-ui-version="44"] .login-screen {
  grid-template-columns: minmax(420px, 1fr) minmax(410px, 460px);
  gap: clamp(72px, 10vw, 178px);
  padding: clamp(36px, 6vw, 84px) clamp(38px, 8vw, 154px);
  background:
    radial-gradient(ellipse at 10% 10%, rgba(100, 86, 255, .22), transparent 34%),
    radial-gradient(ellipse at 92% 92%, rgba(40, 220, 201, .14), transparent 34%),
    linear-gradient(135deg, #030612 0%, #071128 51%, #041923 100%);
}

body[data-ui-version="44"] .login-core-viz {
  display: none !important;
}

body[data-ui-version="44"] .login-hud-copy {
  grid-column: 1;
  grid-row: 1;
  max-width: 610px;
}

body[data-ui-version="44"] .login-hud-copy::before {
  display: none;
}

body[data-ui-version="44"] .login-hud-copy h2 {
  margin: 27px 0 20px;
  font-size: clamp(54px, 4.8vw, 78px);
  line-height: 1.02;
  letter-spacing: -3.6px;
}

body[data-ui-version="44"] .login-hud-copy h2 em {
  margin-top: 10px;
  font-size: .72em;
  letter-spacing: -2px;
}

body[data-ui-version="44"] .login-hud-copy > p {
  max-width: 470px;
  color: #91a0bd;
  font-size: 14px;
  line-height: 1.95;
}

body[data-ui-version="44"] .login-hud-stats {
  max-width: 540px;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 35px;
  padding-top: 19px;
  border-top: 1px solid rgba(136, 155, 211, .16);
}

body[data-ui-version="44"] .login-hud-stats > div {
  flex: 1 1 0;
  padding: 0 19px;
  border: 0;
  border-left: 1px solid rgba(136, 155, 211, .14);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
}

body[data-ui-version="44"] .login-hud-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

body[data-ui-version="44"] .login-hud-stats > div::after {
  display: none;
}

body[data-ui-version="44"] .login-panel {
  grid-column: 2;
  grid-row: 1;
  max-width: 460px;
  padding: 31px 32px 28px;
  border-color: rgba(143, 163, 224, .23);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(12, 23, 51, .95), rgba(6, 16, 37, .92));
  box-shadow:
    0 44px 120px rgba(0, 4, 20, .62),
    0 0 0 1px rgba(119, 148, 225, .055),
    inset 0 1px rgba(255, 255, 255, .07);
}

body[data-ui-version="44"] .login-panel::after {
  display: none;
}

body[data-ui-version="44"] .login-screen.login-live .login-panel {
  animation: login-panel-arrive .72s .12s cubic-bezier(.2, .8, .2, 1) both;
}

@media (max-width: 1120px) and (min-width: 861px) {
  body[data-ui-version="44"] .login-screen {
    grid-template-columns: minmax(350px, 1fr) minmax(390px, 440px);
    gap: 44px;
    padding-inline: 5vw;
  }

  body[data-ui-version="44"] .login-hud-copy h2 {
    font-size: clamp(44px, 5vw, 58px);
  }

  body[data-ui-version="44"] .login-hud-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-ui-version="44"] .login-hud-stats > div {
    padding: 0;
    border-left: 0;
  }
}

@media (max-width: 860px) {
  body[data-ui-version="44"] .login-screen {
    grid-template-columns: minmax(0, 460px);
    justify-content: center;
    gap: 0;
    padding: 28px 18px;
  }

  body[data-ui-version="44"] .login-hud-copy {
    display: none;
  }

  body[data-ui-version="44"] .login-panel {
    grid-column: 1;
    width: 100%;
  }
}

@media (max-width: 520px) {
  body[data-ui-version="44"] .login-screen {
    padding: 15px 12px;
  }

  body[data-ui-version="44"] .login-panel {
    padding: 24px 21px 22px;
    border-radius: 20px;
  }
}

/* v55 authoritative editorial hierarchy */
body[data-ui-version="44"] .login-hud-kicker {
  position: relative;
  min-height: 20px;
  padding: 0 0 0 30px;
  color: #84eee2;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 1.75px;
}

body[data-ui-version="44"] .login-hud-kicker::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 19px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, #65ecdf, rgba(101, 236, 223, .16));
  box-shadow: 0 0 10px rgba(101, 236, 223, .3);
}

body[data-ui-version="44"] .login-hud-copy h2 {
  max-width: 560px;
  margin: 25px 0 21px;
  color: #f5f7ff;
  font-size: clamp(58px, 5vw, 80px);
  font-weight: 840;
  line-height: .98;
  letter-spacing: -4px;
}

body[data-ui-version="44"] .login-hud-copy h2 em {
  display: block;
  margin-top: 13px;
  font-size: .57em;
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -1.7px;
}

body[data-ui-version="44"] .login-hud-copy > p {
  position: relative;
  max-width: 420px;
  margin: 0;
  padding-left: 16px;
  color: #8d9bb7;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: .08px;
}

body[data-ui-version="44"] .login-hud-copy > p::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 2px;
  content: "";
  border-radius: 99px;
  background: linear-gradient(#7a79f3, #53d9ca);
  opacity: .72;
}

@media (max-width: 1120px) and (min-width: 861px) {
  body[data-ui-version="44"] .login-hud-copy h2 {
    font-size: clamp(46px, 5vw, 60px);
  }

  body[data-ui-version="44"] .login-hud-copy > p {
    max-width: 360px;
  }
}

/* v56 full-page command layout */
body[data-ui-version="44"] .login-screen {
  min-height: 100vh;
  grid-template-columns: minmax(420px, 1fr) minmax(400px, 438px);
  grid-template-rows: 54px minmax(0, 1fr) 58px;
  align-items: center;
  column-gap: clamp(72px, 9vw, 154px);
  row-gap: 18px;
  padding: 28px clamp(46px, 6vw, 116px) 24px;
}

.login-masthead {
  position: relative;
  z-index: 8;
  min-width: 0;
  height: 54px;
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center;
  gap: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(129, 149, 207, .14);
}

.login-masthead::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 120px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(91, 239, 221, .82));
  box-shadow: 0 0 14px rgba(91, 239, 221, .34);
}

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

.login-masthead-brand .brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(142, 151, 255, .34);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .2), transparent 43%),
    linear-gradient(145deg, #756fff, #4d6de1 54%, #26c7b5);
  box-shadow:
    0 10px 28px rgba(54, 69, 194, .34),
    0 0 24px rgba(55, 221, 204, .11),
    inset 0 1px rgba(255, 255, 255, .28);
  font-size: 14px;
}

.login-masthead-brand strong,
.login-masthead-brand small {
  display: block;
}

.login-masthead-brand strong {
  color: #f3f6ff;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: .2px;
}

.login-masthead-brand small {
  margin-top: 3px;
  color: #647493;
  font-size: 7px;
  letter-spacing: 1.5px;
}

.login-maker {
  display: grid;
  gap: 2px;
  padding-left: 22px;
  border-left: 1px solid rgba(129, 149, 207, .16);
}

.login-maker span {
  color: #5f6f8d;
  font-size: 8px;
  letter-spacing: 1.15px;
}

.login-maker strong {
  color: #9ca9c2;
  font-size: 11px;
  font-weight: 660;
  letter-spacing: .5px;
}

.login-masthead-state {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: #71809d;
  font-size: 9px;
  letter-spacing: .7px;
}

.login-masthead-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #63e8d8;
  box-shadow: 0 0 11px rgba(99, 232, 216, .68);
  animation: login-status-pulse 2.2s ease-in-out infinite;
}

.login-masthead-state em {
  margin-left: 6px;
  color: #7cebdd;
  font-size: 8px;
  font-style: normal;
  font-weight: 730;
  letter-spacing: 1.4px;
}

body[data-ui-version="44"] .login-hud-copy {
  align-self: center;
  grid-column: 1;
  grid-row: 2;
}

body[data-ui-version="44"] .login-panel {
  align-self: center;
  grid-column: 2;
  grid-row: 2;
  max-width: 438px;
  gap: 14px;
  padding: 27px 30px 25px;
}

body[data-ui-version="44"] .login-system-state {
  padding-bottom: 10px;
}

body[data-ui-version="44"] .login-system-state span,
body[data-ui-version="44"] .login-system-state em {
  color: #6f7f9d;
  font-size: 8px;
  letter-spacing: 1.4px;
}

body[data-ui-version="44"] .login-panel h1 {
  margin: 10px 0 -6px;
  font-size: 30px;
}

.login-ops-rail {
  position: relative;
  z-index: 7;
  min-width: 0;
  height: 58px;
  display: grid;
  grid-template-columns: auto repeat(4, auto) minmax(90px, 1fr);
  grid-column: 1 / -1;
  grid-row: 3;
  align-items: center;
  gap: clamp(18px, 2.7vw, 44px);
  overflow: hidden;
  padding: 12px 16px 9px;
  color: #71809d;
  border-top: 1px solid rgba(129, 149, 207, .13);
  font-size: 9px;
  letter-spacing: .35px;
}

.login-ops-rail > span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.login-ops-rail > span + span::before {
  width: 1px;
  height: 14px;
  margin-right: 6px;
  content: "";
  background: rgba(127, 146, 205, .13);
}

.login-ops-rail b {
  color: #4e5e7d;
  font-family: Consolas, "Microsoft YaHei UI", sans-serif;
  font-size: 8px;
  font-weight: 620;
}

.login-ops-live {
  color: #83eee2;
  font-family: Consolas, "Microsoft YaHei UI", sans-serif;
  font-size: 8px;
  font-weight: 720;
  letter-spacing: 1.4px;
}

.login-ops-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #67eadb;
  box-shadow: 0 0 10px rgba(103, 234, 219, .66);
}

.login-ops-track {
  position: relative;
  min-width: 90px;
  height: 1px;
  overflow: visible;
  background: linear-gradient(90deg, rgba(118, 139, 199, .08), rgba(118, 139, 199, .32), rgba(97, 232, 217, .08));
}

.login-ops-track i {
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a0fff4;
  box-shadow:
    0 0 8px #67eadb,
    0 0 20px rgba(103, 234, 219, .65);
  animation: login-ops-signal 4.8s ease-in-out infinite;
}

@keyframes login-ops-signal {
  0%, 12% { opacity: 0; transform: translateX(0); }
  24% { opacity: 1; }
  78% { opacity: .9; }
  90%, 100% { opacity: 0; transform: translateX(max(86px, calc(100% - 5px))); }
}

@media (max-height: 760px) and (min-width: 861px) {
  body[data-ui-version="44"] .login-screen {
    grid-template-rows: 48px minmax(0, 1fr) 48px;
    row-gap: 12px;
    padding-block: 20px 16px;
  }

  .login-masthead {
    height: 48px;
    padding-bottom: 10px;
  }

  .login-ops-rail {
    height: 48px;
    padding-block: 8px 6px;
  }

  body[data-ui-version="44"] .login-panel {
    gap: 12px;
    padding-block: 23px 21px;
  }
}

@media (max-width: 1120px) and (min-width: 861px) {
  body[data-ui-version="44"] .login-screen {
    grid-template-columns: minmax(350px, 1fr) minmax(390px, 430px);
    column-gap: 42px;
    padding-inline: 5vw;
  }

  .login-ops-rail {
    grid-template-columns: auto repeat(4, auto);
  }

  .login-ops-track {
    display: none;
  }
}

@media (max-width: 860px) {
  body[data-ui-version="44"] .login-screen {
    grid-template-columns: minmax(0, 460px);
    grid-template-rows: 52px minmax(0, 1fr);
    row-gap: 16px;
    padding: 18px 14px;
  }

  .login-masthead {
    height: 52px;
    grid-column: 1;
    padding-bottom: 11px;
  }

  .login-maker,
  .login-masthead-state span,
  .login-masthead-state em,
  .login-ops-rail {
    display: none;
  }

  body[data-ui-version="44"] .login-hud-copy {
    display: none;
  }

  body[data-ui-version="44"] .login-panel {
    width: 100%;
    grid-column: 1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-masthead-state i,
  .login-ops-track i {
    animation: none !important;
  }
}

.login-masthead,
.login-ops-rail {
  width: 100%;
  justify-self: stretch;
}

@media (max-width: 860px) {
  .login-masthead-state {
    display: none;
  }
}

/* Company execution OS — persistent plans, follow-up and management review */
body[data-ui-version="44"] #viewRoot[data-view="officeAi"] {
  --office-ink: #17233d;
  --office-muted: #6c7891;
  --office-line: #dfe5ef;
  --office-soft: #f5f7fb;
  --office-indigo: #5965e8;
  --office-teal: #0d9f89;
  --office-amber: #c98513;
  --office-red: #d8465a;
  --office-night: #17213a;
  color: var(--office-ink);
}

.office-os-page {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding-bottom: 30px;
}

.office-os-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  gap: clamp(28px, 4vw, 74px);
  min-height: 292px;
  overflow: hidden;
  padding: clamp(30px, 4vw, 54px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 26px;
  background:
    radial-gradient(circle at 83% 18%, rgba(96, 224, 203, .14), transparent 30%),
    linear-gradient(115deg, #17213a 0%, #202b4a 54%, #172641 100%);
  box-shadow: 0 22px 54px rgba(31, 46, 82, .18);
}

.office-os-hero::before,
.office-os-hero::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.office-os-hero::before {
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, #000, transparent 74%);
}

.office-os-hero::after {
  top: -140px;
  right: -100px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(125, 238, 218, .14);
  border-radius: 50%;
  box-shadow:
    0 0 0 58px rgba(125, 238, 218, .025),
    0 0 0 118px rgba(125, 238, 218, .018);
}

.office-os-hero-copy,
.office-os-command {
  position: relative;
  z-index: 2;
}

.office-os-hero-copy {
  align-self: center;
}

.office-os-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #8ff4e2;
  font-family: Consolas, "Microsoft YaHei UI", sans-serif;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 1.8px;
}

.office-os-eyebrow i {
  width: 22px;
  height: 1px;
  background: #71e7d3;
  box-shadow: 0 0 12px rgba(113, 231, 211, .58);
}

.office-os-hero h2 {
  max-width: 740px;
  margin: 18px 0 16px;
  color: #fff;
  font-size: clamp(30px, 3.1vw, 50px);
  font-weight: 810;
  line-height: 1.12;
  letter-spacing: -1.8px;
}

.office-os-hero h2 em {
  color: #b6c4ff;
  font-style: normal;
}

.office-os-hero-copy > p {
  max-width: 700px;
  margin: 0;
  color: #aeb8cf;
  font-size: 14px;
  line-height: 1.9;
}

.office-os-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.office-os-actions .primary-button {
  border-color: transparent;
  background: linear-gradient(135deg, #7179f4, #5965e8);
  box-shadow: 0 12px 26px rgba(87, 101, 232, .28);
}

.office-os-actions .ghost-button {
  color: #d6def0;
  border-color: rgba(195, 208, 235, .22);
  background: rgba(255, 255, 255, .045);
}

.office-os-command {
  align-self: center;
  min-width: 0;
  padding: 25px 26px 22px;
  border: 1px solid rgba(185, 201, 235, .14);
  border-radius: 19px;
  background: rgba(10, 18, 37, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(12px);
}

.office-os-command > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(180, 195, 224, .13);
}

.office-os-command > header span {
  color: #8ff4e2;
  font-size: 11px;
  font-weight: 720;
}

.office-os-command > header small {
  color: #74829e;
  font-size: 9px;
}

.office-os-command > strong {
  display: block;
  margin: 19px 0 8px;
  color: #f5f7ff;
  font-size: 21px;
  font-weight: 760;
}

.office-os-command > p {
  min-height: 44px;
  margin: 0;
  color: #99a5bd;
  font-size: 12px;
  line-height: 1.75;
}

.office-os-rhythm {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

.office-os-rhythm span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  color: #6f7d98;
  border: 1px solid rgba(164, 180, 213, .17);
  border-radius: 50%;
  font-size: 9px;
}

.office-os-rhythm i {
  height: 1px;
  background: linear-gradient(90deg, rgba(117, 232, 213, .32), rgba(121, 137, 176, .15));
}

.office-os-rhythm .done,
.office-os-rhythm .live {
  color: #8ff4e2;
  border-color: rgba(115, 233, 213, .42);
  background: rgba(79, 206, 185, .09);
}

.office-os-rhythm .live {
  box-shadow: 0 0 0 4px rgba(95, 226, 204, .045), 0 0 22px rgba(95, 226, 204, .12);
}

.office-os-rhythm .risk {
  color: #ffc66d;
  border-color: rgba(255, 190, 89, .42);
  background: rgba(255, 181, 60, .08);
}

.office-scorecard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--office-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(41, 56, 91, .07);
}

.office-scorecard article {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 16px;
  min-width: 0;
  padding: 21px 23px 19px;
}

.office-scorecard article + article {
  border-left: 1px solid var(--office-line);
}

.office-scorecard article::before {
  position: absolute;
  top: 19px;
  left: 0;
  width: 3px;
  height: 28px;
  border-radius: 0 3px 3px 0;
  content: "";
  background: #8090b1;
}

.office-scorecard article.active::before { background: var(--office-indigo); }
.office-scorecard article.risk::before { background: var(--office-amber); }
.office-scorecard article.blocked::before { background: var(--office-red); }
.office-scorecard article.complete::before { background: var(--office-teal); }

.office-scorecard span {
  color: var(--office-muted);
  font-size: 11px;
  font-weight: 650;
}

.office-scorecard strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--office-ink);
  font-family: "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  font-size: 30px;
  font-weight: 760;
  letter-spacing: -1px;
}

.office-scorecard small {
  overflow: hidden;
  color: #9aa4b8;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px;
  border: 1px solid var(--office-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .92);
}

.office-view-tabs {
  display: flex;
  gap: 3px;
}

.office-view-tabs button {
  min-height: 38px;
  padding: 0 16px;
  color: var(--office-muted);
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 11px;
  font-weight: 680;
  cursor: pointer;
}

.office-view-tabs button.active {
  color: #fff;
  background: var(--office-night);
  box-shadow: 0 8px 18px rgba(28, 40, 70, .16);
}

.office-filter-fields {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.office-filter-fields select,
.office-search {
  height: 38px;
  border: 1px solid #dfe5ee;
  border-radius: 10px;
  background: #f9fafc;
}

.office-filter-fields select {
  min-width: 108px;
  padding-inline: 11px 30px;
  color: #4d5a74;
  font-size: 10px;
}

.office-search {
  display: flex;
  align-items: center;
  width: min(240px, 20vw);
  min-width: 170px;
  padding: 0 11px;
}

.office-search span {
  color: #8b97ad;
  font-size: 17px;
}

.office-search input {
  width: 100%;
  height: 100%;
  padding: 0 0 0 7px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 10px;
}

.office-execution-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  align-items: start;
  gap: 18px;
  min-width: 0;
}

.office-plan-ledger,
.office-advice-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--office-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(41, 56, 91, .055);
}

.office-ledger-header,
.office-advice-panel > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--office-line);
}

.office-ledger-header span,
.office-advice-panel > header > span {
  display: block;
  margin-bottom: 5px;
  color: var(--office-indigo);
  font-family: Consolas, "Microsoft YaHei UI", sans-serif;
  font-size: 8px;
  font-weight: 740;
  letter-spacing: 1.5px;
}

.office-ledger-header h3,
.office-advice-panel h3 {
  margin: 0;
  color: var(--office-ink);
  font-size: 17px;
}

.office-ledger-header > small,
.office-advice-panel > header > small {
  color: #8c97aa;
  font-size: 9px;
}

.office-ledger-columns,
.office-plan-row {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.7fr)
    minmax(112px, .62fr)
    72px
    minmax(105px, .58fr)
    minmax(115px, .62fr)
    126px;
  gap: 14px;
  align-items: center;
}

.office-ledger-columns {
  min-width: 900px;
  padding: 10px 18px 9px;
  color: #939daf;
  border-bottom: 1px solid var(--office-line);
  background: #f8f9fc;
  font-size: 8px;
}

.office-plan-list {
  min-width: 0;
}

.office-plan-row {
  position: relative;
  min-width: 900px;
  padding: 15px 18px;
  border-bottom: 1px solid #edf0f5;
  transition: background .18s ease, box-shadow .18s ease;
}

.office-plan-row:last-child {
  border-bottom: 0;
}

.office-plan-row::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: transparent;
}

.office-plan-row.health-critical::before { background: var(--office-red); }
.office-plan-row.health-warning::before { background: var(--office-amber); }
.office-plan-row.health-done::before { background: var(--office-teal); }

.office-plan-row:hover {
  z-index: 1;
  background: #fafbfe;
  box-shadow: 0 8px 22px rgba(42, 58, 92, .07);
}

.office-plan-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 0;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.office-plan-index {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #52607b;
  border: 1px solid #dde3ee;
  border-radius: 10px;
  background: #f6f8fb;
  font-family: Consolas, "Microsoft YaHei UI", sans-serif;
  font-size: 8px;
  font-weight: 720;
}

.office-plan-copy {
  display: block;
  min-width: 0;
}

.office-plan-tags {
  display: flex;
  gap: 6px;
  min-width: 0;
  margin-bottom: 5px;
}

.office-plan-tags b,
.office-plan-tags em {
  overflow: hidden;
  max-width: 130px;
  padding: 2px 6px;
  color: #5c6894;
  border-radius: 4px;
  background: #eef1ff;
  font-size: 7px;
  font-style: normal;
  font-weight: 670;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-plan-tags em {
  color: #778197;
  background: #f1f3f7;
}

.office-plan-tags em.assignment-review {
  max-width: 230px;
  color: #a25a00;
  border: 1px solid #f5d394;
  background: #fff7e7;
}

.office-plan-copy > strong {
  display: block;
  overflow: hidden;
  color: var(--office-ink);
  font-size: 12px;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-plan-copy > small {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #828da1;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-plan-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.office-plan-owner > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: #fff;
  border-radius: 9px;
  background: linear-gradient(135deg, #7079ed, #4e5ec6);
  font-size: 10px;
  font-weight: 720;
}

.office-plan-owner div,
.office-plan-due,
.office-plan-health {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.office-plan-owner strong,
.office-plan-due strong {
  overflow: hidden;
  color: #33405a;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-plan-owner small,
.office-plan-due small {
  overflow: hidden;
  color: #909aad;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-plan-due.overdue strong,
.office-plan-due.overdue small {
  color: var(--office-red);
}

.office-plan-progress {
  display: grid;
  gap: 7px;
}

.office-plan-progress > div {
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: #e9edf4;
}

.office-plan-progress > div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5d68e8, #52cbb4);
}

.office-plan-progress > small {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: #8c96aa;
  font-size: 7px;
}

.office-plan-progress b {
  color: #4f5e78;
}

.office-plan-progress em {
  font-style: normal;
}

.office-plan-health > span {
  justify-self: start;
  padding: 4px 8px;
  color: #647089;
  border-radius: 999px;
  background: #eef1f6;
  font-size: 8px;
  font-weight: 710;
}

.office-plan-health > span.critical { color: #b62d43; background: #fff0f2; }
.office-plan-health > span.warning { color: #a76908; background: #fff6df; }
.office-plan-health > span.healthy { color: #3562bd; background: #edf3ff; }
.office-plan-health > span.done { color: #087b69; background: #e9f8f4; }

.office-plan-health > small {
  overflow: hidden;
  color: #8a95a8;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-plan-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.office-plan-actions .small-button {
  min-height: 27px;
  padding-inline: 8px;
  font-size: 7px;
}

.office-edit-action {
  color: #7a8497;
  border-color: transparent !important;
  background: transparent !important;
}

.office-reassign-action {
  color: #7b4d00 !important;
  border-color: #f0c875 !important;
  background: #fff8e8 !important;
}

.office-reassign-action:hover {
  color: #603900 !important;
  border-color: #dda83c !important;
  background: #ffefc8 !important;
}

.office-advice-panel {
  position: sticky;
  top: 16px;
}

.office-advice-panel > header {
  display: block;
}

.office-advice-panel > header > small {
  display: block;
  margin-top: 6px;
}

.office-advice-list {
  display: grid;
}

.office-advice-list > article {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 11px;
  padding: 17px 19px;
  border-bottom: 1px solid #edf0f5;
}

.office-advice-list > article > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: #6e7890;
  border: 1px solid #dde3ed;
  border-radius: 8px;
  font-family: Consolas, "Microsoft YaHei UI", sans-serif;
  font-size: 8px;
}

.office-advice-list > article.critical > span {
  color: var(--office-red);
  border-color: #f1bdc5;
  background: #fff5f6;
}

.office-advice-list > article.warning > span {
  color: var(--office-amber);
  border-color: #ecd7ab;
  background: #fffaf0;
}

.office-advice-list > article.good > span {
  color: var(--office-teal);
  border-color: #b9e1d9;
  background: #f0faf7;
}

.office-advice-list article div {
  min-width: 0;
}

.office-advice-list strong {
  display: block;
  color: #27334c;
  font-size: 10px;
  line-height: 1.5;
}

.office-advice-list p {
  margin: 5px 0;
  color: #778298;
  font-size: 8px;
  line-height: 1.65;
}

.office-advice-list small {
  display: block;
  color: #56637c;
  font-size: 8px;
  line-height: 1.65;
}

.office-advice-list button {
  margin-top: 8px;
  padding: 0;
  color: var(--office-indigo);
  border: 0;
  background: transparent;
  font-size: 8px;
  font-weight: 680;
  cursor: pointer;
}

.office-advice-panel > footer {
  padding: 17px 19px 19px;
  background: #f7f8fb;
}

.office-advice-panel > footer strong {
  color: #4a5770;
  font-size: 9px;
}

.office-advice-panel > footer p {
  margin: 6px 0 0;
  color: #8993a5;
  font-size: 8px;
  line-height: 1.65;
}

.office-empty-plan {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 40px 20px;
  text-align: center;
}

.office-empty-plan > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 13px;
  color: var(--office-indigo);
  border: 1px solid #d8def2;
  border-radius: 16px;
  background: #f3f5ff;
  font-size: 22px;
}

.office-empty-plan strong {
  color: var(--office-ink);
  font-size: 15px;
}

.office-empty-plan p {
  max-width: 480px;
  margin: 8px 0 18px;
  color: var(--office-muted);
  font-size: 10px;
  line-height: 1.75;
}

.modal:has(.office-plan-form) {
  width: min(720px, calc(100vw - 36px));
  max-width: 720px;
}

.modal:has(.office-plan-detail) {
  width: min(940px, calc(100vw - 36px));
  max-width: 940px;
}

.office-form-guidance {
  display: grid;
  gap: 5px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--office-indigo, #5965e8);
  border-radius: 0 10px 10px 0;
  background: #f4f6ff;
}

.office-form-guidance strong {
  color: #2f3d60;
  font-size: 11px;
}

.office-form-guidance span {
  color: #7c879c;
  font-size: 9px;
}

.office-plan-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.office-plan-quick-grid .full {
  grid-column: 1 / -1;
}

.office-plan-quick-grid .field {
  margin: 0;
}

.office-plan-quick-grid label {
  color: #34415b;
  font-size: 10px;
  font-weight: 750;
}

.office-plan-quick-grid input,
.office-plan-quick-grid select,
.office-plan-quick-grid textarea {
  min-height: 46px;
  border-color: #d8deea;
  border-radius: 10px;
  background: #fbfcff;
}

.office-plan-quick-grid textarea {
  min-height: 78px;
  line-height: 1.65;
  resize: vertical;
}

.office-plan-quick-grid .office-plan-command {
  min-height: 94px;
  padding: 15px 16px;
  background: linear-gradient(135deg, #fbfcff 0%, #f5f7ff 100%);
  color: #25324c;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.7;
}

.office-command-recognition {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid #d9e1ef;
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 0%, rgba(89, 101, 232, 0.1), transparent 34%),
    linear-gradient(145deg, #fbfcff 0%, #f4f7fb 100%);
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.office-command-recognition::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #aab5c8;
}

.office-command-recognition.is-loading {
  border-color: #cfd5ff;
  box-shadow: 0 10px 28px rgba(89, 101, 232, 0.09);
}

.office-command-recognition.is-loading::before {
  background: linear-gradient(180deg, #5965e8, #26c7bb, #5965e8);
  background-size: 100% 200%;
  animation: office-recognition-scan 1.2s linear infinite;
}

.office-command-recognition.is-ready,
.office-command-recognition.is-review {
  border-color: rgba(28, 169, 153, 0.32);
  background:
    radial-gradient(circle at 92% 0%, rgba(28, 169, 153, 0.11), transparent 35%),
    linear-gradient(145deg, #fbfffe 0%, #f3f9f8 100%);
}

.office-command-recognition.is-ready::before,
.office-command-recognition.is-review::before {
  background: #1ca999;
}

.office-command-recognition.is-error {
  border-color: rgba(219, 77, 93, 0.35);
  background: #fff8f8;
}

.office-command-recognition.is-error::before {
  background: #db4d5d;
}

.office-command-recognition > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.office-recognition-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2f3d60;
  font-size: 10px;
}

.office-recognition-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #aab5c8;
  box-shadow: 0 0 0 4px rgba(170, 181, 200, 0.15);
}

.is-loading .office-recognition-status i {
  background: #5965e8;
  box-shadow: 0 0 0 4px rgba(89, 101, 232, 0.14);
  animation: office-recognition-pulse 1s ease-in-out infinite;
}

.is-ready .office-recognition-status i,
.is-review .office-recognition-status i {
  background: #1ca999;
  box-shadow: 0 0 0 4px rgba(28, 169, 153, 0.14);
}

.office-command-recognition > header small {
  color: #7c879c;
  font-size: 8px;
}

.office-recognition-grid {
  display: grid;
  grid-template-columns: 1.55fr .9fr 1fr 1fr;
  gap: 8px;
}

.office-recognition-grid > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(216, 222, 234, 0.8);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
}

.office-recognition-grid span,
.office-recognition-grid strong {
  display: block;
}

.office-recognition-grid span {
  margin-bottom: 5px;
  color: #8a95a9;
  font-size: 8px;
}

.office-recognition-grid strong {
  overflow: hidden;
  color: #28354f;
  font-size: 10px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-command-recognition > p {
  margin: 0;
  color: #748096;
  font-size: 8px;
  line-height: 1.6;
}

.office-plan-quick-grid label small {
  margin-left: 5px;
  color: #1c8f83;
  font-size: 8px;
  font-weight: 600;
}

@keyframes office-recognition-scan {
  to { background-position: 0 200%; }
}

@keyframes office-recognition-pulse {
  50% { transform: scale(.72); opacity: .62; }
}

.office-plan-quick-grid input:focus,
.office-plan-quick-grid select:focus,
.office-plan-quick-grid textarea:focus {
  border-color: var(--office-indigo, #5965e8);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(89, 101, 232, 0.1);
}

.office-plan-advanced {
  margin-top: 18px;
  border: 1px solid #e1e6ef;
  border-radius: 12px;
  background: #fafbfd;
  overflow: hidden;
}

.office-plan-advanced summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 15px;
  color: #44516b;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.office-plan-advanced summary::-webkit-details-marker {
  display: none;
}

.office-plan-advanced summary::before {
  content: "+";
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 6px;
  background: #eef1ff;
  color: var(--office-indigo, #5965e8);
  font-size: 14px;
  font-weight: 700;
}

.office-plan-advanced[open] summary::before {
  content: "−";
}

.office-plan-advanced summary span {
  font-size: 10px;
  font-weight: 750;
}

.office-plan-advanced summary small {
  margin-left: auto;
  color: #8b95a7;
  font-size: 8px;
}

.office-plan-advanced-grid {
  padding: 15px;
  border-top: 1px solid #e1e6ef;
  background: #fff;
}

.office-followup-head {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 17px;
}

.office-followup-head > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #e0e5ee;
  border-radius: 11px;
  background: #f8f9fb;
}

.office-followup-head span {
  color: #8a95a8;
  font-size: 8px;
}

.office-followup-head strong {
  color: #33405a;
  font-size: 13px;
  line-height: 1.5;
}

.office-plan-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e6ef;
}

.office-plan-detail > header span {
  color: #77839a;
  font-size: 8px;
}

.office-plan-detail > header h3 {
  max-width: 700px;
  margin: 8px 0 0;
  color: #26334c;
  font-size: 16px;
  line-height: 1.65;
}

.office-detail-state {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: #edf1f7;
  font-weight: 700;
}

.office-detail-state.critical { color: #b62d43; background: #fff0f2; }
.office-detail-state.warning { color: #9b6307; background: #fff5dd; }
.office-detail-state.healthy { color: #315ba8; background: #edf3ff; }
.office-detail-state.done { color: #0b7969; background: #e9f8f4; }

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

.office-detail-facts article {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #e0e5ee;
  border-radius: 11px;
  background: #fafbfd;
}

.office-detail-facts span,
.office-detail-facts small {
  color: #8994a7;
  font-size: 8px;
}

.office-detail-facts strong {
  color: #33405a;
  font-size: 10px;
  line-height: 1.5;
}

.office-detail-risk {
  display: grid;
  gap: 5px;
  margin-bottom: 18px;
  padding: 15px 16px;
  border: 1px solid #f0d3b3;
  border-radius: 11px;
  background: #fff9ed;
}

.office-detail-risk strong {
  color: #9b6307;
  font-size: 9px;
}

.office-detail-risk span,
.office-detail-risk p {
  margin: 0;
  color: #715b39;
  font-size: 9px;
  line-height: 1.65;
}

.office-child-plans,
.office-update-timeline {
  margin-top: 20px;
}

.office-child-plans h4,
.office-update-timeline h4 {
  margin: 0 0 11px;
  color: #34415a;
  font-size: 11px;
}

.office-child-plans {
  display: grid;
  gap: 7px;
}

.office-child-plans button {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 11px 13px;
  text-align: left;
  color: #43516b;
  border: 1px solid #e1e6ef;
  border-radius: 9px;
  background: #fafbfd;
  cursor: pointer;
}

.office-child-plans button span {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-child-plans button b {
  color: var(--office-indigo, #5965e8);
  font-size: 9px;
}

.office-child-plans button small {
  color: #8994a7;
  font-size: 8px;
}

.office-update-timeline {
  display: grid;
}

.office-update-timeline > article {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  padding: 0 0 17px;
}

.office-update-timeline > article::before {
  position: absolute;
  top: 11px;
  bottom: -2px;
  left: 5px;
  width: 1px;
  content: "";
  background: #dfe4ed;
}

.office-update-timeline > article:last-child::before {
  display: none;
}

.office-update-timeline > article > i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border: 3px solid #e9edfb;
  border-radius: 50%;
  background: var(--office-indigo, #5965e8);
}

.office-update-timeline article div {
  padding: 12px 13px;
  border: 1px solid #e1e6ef;
  border-radius: 10px;
  background: #fafbfd;
}

.office-update-timeline article header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.office-update-timeline article header strong {
  color: #34415a;
  font-size: 9px;
}

.office-update-timeline article header span {
  margin-left: auto;
  color: #929caf;
  font-size: 8px;
}

.office-update-timeline article header b {
  color: var(--office-indigo, #5965e8);
  font-size: 9px;
}

.office-update-timeline article p {
  margin: 8px 0 5px;
  color: #5c6880;
  font-size: 9px;
  line-height: 1.65;
}

.office-update-timeline article small {
  display: block;
  margin-top: 4px;
  color: #718099;
  font-size: 8px;
  line-height: 1.55;
}

.office-update-timeline article small.blocker {
  color: #b43b4c;
}

@media (max-width: 1500px) {
  .office-execution-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .office-advice-panel {
    position: static;
  }

  .office-advice-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .office-advice-list > article {
    border-right: 1px solid #edf0f5;
  }
}

@media (max-width: 1120px) {
  .office-os-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .office-scorecard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .office-scorecard article:nth-child(3) {
    border-top: 1px solid var(--office-line);
    border-left: 0;
  }

  .office-scorecard article:nth-child(4) {
    border-top: 1px solid var(--office-line);
  }

  .office-filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .office-filter-fields {
    flex-wrap: wrap;
  }

  .office-search {
    width: 100%;
    flex: 1 1 210px;
  }

  .office-plan-ledger {
    overflow-x: auto;
  }

  .office-advice-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .office-os-hero {
    gap: 24px;
    min-height: 0;
    padding: 26px 22px;
    border-radius: 19px;
  }

  .office-os-hero h2 {
    font-size: 29px;
    letter-spacing: -1px;
  }

  .office-os-command {
    padding: 20px;
  }

  .office-scorecard {
    grid-template-columns: 1fr;
  }

  .office-scorecard article + article {
    border-top: 1px solid var(--office-line);
    border-left: 0;
  }

  .office-view-tabs {
    overflow-x: auto;
  }

  .office-view-tabs button {
    flex: 0 0 auto;
  }

  .office-filter-fields select {
    flex: 1 1 calc(50% - 8px);
  }

  .office-plan-quick-grid {
    grid-template-columns: 1fr;
  }

  .office-plan-quick-grid .full {
    grid-column: auto;
  }

  .office-command-recognition {
    grid-column: auto;
  }

  .office-recognition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .office-plan-advanced summary small {
    display: none;
  }

  .office-followup-head,
  .office-detail-facts {
    grid-template-columns: 1fr;
  }
}

/* Dashboard work execution scorecard */
.dashboard-work-os {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid #dce5f3;
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 0%, rgba(60, 205, 193, .12), transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #f7faff 56%, #f1f7fb 100%);
  box-shadow: 0 20px 48px rgba(34, 55, 95, .1);
}

.dashboard-work-os::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  top: -248px;
  right: 8%;
  border: 1px solid rgba(51, 194, 184, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(91, 104, 232, .035), 0 0 0 104px rgba(91, 104, 232, .025);
  pointer-events: none;
}

.dashboard-work-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px 20px;
  border-bottom: 1px solid rgba(213, 225, 241, .86);
}

.dashboard-work-head > div > span {
  display: block;
  margin-bottom: 7px;
  color: #6070d8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.dashboard-work-head h2 {
  margin: 0;
  color: #172640;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.7px;
}

.dashboard-work-head small {
  display: block;
  margin-top: 7px;
  color: #718098;
  font-size: 13px;
}

.dashboard-work-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .78fr);
  gap: 22px;
  padding: 24px 30px;
}

.dashboard-work-score {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  align-items: center;
  gap: 25px;
  min-width: 0;
}

.dashboard-work-ring {
  display: grid;
  width: 164px;
  height: 164px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#545fe6 0 var(--work-progress), #dfe7f4 var(--work-progress) 360deg);
  box-shadow: 0 17px 36px rgba(64, 78, 167, .14);
}

.dashboard-work-ring::before {
  content: '';
  grid-area: 1 / 1;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e4ebf5;
}

.dashboard-work-ring > span {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dashboard-work-ring strong {
  color: #182640;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -2px;
}

.dashboard-work-ring small {
  margin-top: 8px;
  color: #7d899f;
  font-size: 12px;
}

.dashboard-work-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.dashboard-work-kpis article {
  position: relative;
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid #e1e8f3;
  border-radius: 15px;
  background: rgba(255, 255, 255, .78);
}

.dashboard-work-kpis article::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #40c5b8;
  box-shadow: 0 0 0 5px rgba(64, 197, 184, .1);
}

.dashboard-work-kpis article.is-alert::before {
  background: #ed6c78;
  box-shadow: 0 0 0 5px rgba(237, 108, 120, .1);
}

.dashboard-work-kpis span,
.dashboard-work-kpis em {
  display: block;
  overflow: hidden;
  color: #7a879c;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-work-kpis strong {
  display: block;
  margin: 5px 0 4px;
  color: #1b2943;
  font-size: 25px;
  line-height: 1.1;
}

.dashboard-work-kpis strong small {
  color: #697892;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-work-assistant {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(94, 111, 226, .18);
  border-radius: 19px;
  background: linear-gradient(145deg, #172642, #1b3150);
  box-shadow: 0 17px 34px rgba(25, 45, 80, .16);
  color: #f5f8ff;
}

.dashboard-work-assistant header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #a8b8d1;
  font-size: 11px;
}

.dashboard-work-assistant header span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: .5px;
}

.dashboard-work-assistant header i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ad4c7;
  box-shadow: 0 0 0 5px rgba(74, 212, 199, .12);
}

.dashboard-work-assistant.critical header i {
  background: #ff7884;
  box-shadow: 0 0 0 5px rgba(255, 120, 132, .12);
}

.dashboard-work-assistant.warning header i {
  background: #f4ba5d;
  box-shadow: 0 0 0 5px rgba(244, 186, 93, .12);
}

.dashboard-work-assistant header b {
  padding: 5px 8px;
  border: 1px solid rgba(167, 190, 224, .18);
  border-radius: 99px;
  color: #d3def0;
  font-size: 10px;
}

.dashboard-work-assistant h3 {
  margin: 17px 0 13px;
  font-size: 18px;
  line-height: 1.4;
}

.dashboard-work-assistant p {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 9px;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid rgba(185, 202, 228, .11);
  color: #c4d0e1;
  font-size: 12px;
  line-height: 1.55;
}

.dashboard-work-assistant p b {
  color: #58dacd;
  font-size: 10px;
}

.dashboard-work-assistant > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding: 12px 0 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.dashboard-work-assistant > button span {
  color: #55d6ca;
  font-size: 18px;
}

.dashboard-work-list {
  position: relative;
  z-index: 1;
  margin: 0 30px 26px;
  overflow: hidden;
  border: 1px solid #e0e7f2;
  border-radius: 17px;
  background: rgba(255, 255, 255, .84);
}

.dashboard-work-list > header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 17px;
  border-bottom: 1px solid #e5ebf4;
  color: #1d2b45;
}

.dashboard-work-list > header span {
  color: #8793a7;
  font-size: 11px;
}

.dashboard-work-item {
  display: grid;
  grid-template-columns: 8px minmax(250px, 1.4fr) minmax(100px, .55fr) minmax(190px, .8fr) minmax(105px, .5fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 17px;
  border: 0;
  border-bottom: 1px solid #edf1f7;
  background: transparent;
  color: #1c2941;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.dashboard-work-item:last-child {
  border-bottom: 0;
}

.dashboard-work-item:hover {
  background: #f5f8ff;
  transform: translateX(2px);
}

.dashboard-work-item > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fc1b5;
}

.dashboard-work-item.critical > i { background: #ec6674; box-shadow: 0 0 0 4px rgba(236, 102, 116, .09); }
.dashboard-work-item.warning > i { background: #e9ab49; box-shadow: 0 0 0 4px rgba(233, 171, 73, .09); }
.dashboard-work-item.done > i { background: #8793a6; }

.dashboard-work-item > span {
  min-width: 0;
}

.dashboard-work-item small {
  display: block;
  overflow: hidden;
  color: #8a96a9;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-work-item strong {
  display: block;
  overflow: hidden;
  color: #26344c;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-work-title strong {
  margin-bottom: 5px;
  font-size: 13px;
}

.dashboard-work-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 8px;
}

.dashboard-work-progress > em {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: #e4eaf3;
}

.dashboard-work-progress > em > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5963e7, #42c8bc);
}

.dashboard-work-empty {
  padding: 28px;
  color: #7c899e;
  text-align: center;
}

.dashboard-work-empty strong,
.dashboard-work-empty span {
  display: block;
}

.dashboard-work-empty strong {
  margin-bottom: 7px;
  color: #24324a;
}

@media (max-width: 1220px) {
  .dashboard-work-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-work-assistant {
    min-height: 250px;
  }

  .dashboard-work-item {
    grid-template-columns: 8px minmax(220px, 1.2fr) minmax(90px, .5fr) minmax(175px, .8fr) minmax(100px, .5fr);
  }
}

@media (max-width: 900px) {
  .dashboard-work-score {
    grid-template-columns: 1fr;
  }

  .dashboard-work-ring {
    margin: 0 auto;
  }

  .dashboard-work-list {
    overflow-x: auto;
  }

  .dashboard-work-item {
    min-width: 780px;
  }
}

@media (max-width: 620px) {
  .dashboard-work-head,
  .dashboard-work-layout {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dashboard-work-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-work-kpis {
    grid-template-columns: 1fr;
  }

  .dashboard-work-list {
    margin-right: 18px;
    margin-left: 18px;
  }
}

/* Dashboard v76: quiet daily operations layout */
.clean-home-v76 {
  --clean-ink: #17243d;
  --clean-muted: #718097;
  --clean-line: #dfe6f0;
  --clean-surface: #ffffff;
  --clean-teal: #169e91;
  --clean-indigo: #5864d9;
  --clean-amber: #d7932d;
  display: grid;
  gap: 16px;
  color: var(--clean-ink);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

.clean-home-v76 button {
  font-family: inherit;
}

.clean-focus-card,
.clean-card,
.clean-kpi-row {
  border: 1px solid var(--clean-line);
  background: var(--clean-surface);
  box-shadow: 0 8px 24px rgba(37, 55, 88, .055);
}

.clean-focus-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  min-height: 170px;
  padding: 28px 30px;
  overflow: hidden;
  border-radius: 18px;
}

.clean-focus-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--clean-teal);
}

.clean-focus-copy {
  max-width: 820px;
}

.clean-focus-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 17px;
  color: var(--clean-muted);
  font-size: 12px;
}

.clean-focus-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clean-focus-meta i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clean-teal);
  box-shadow: 0 0 0 4px rgba(22, 158, 145, .1);
}

.clean-focus-meta b {
  padding-left: 14px;
  border-left: 1px solid var(--clean-line);
  color: #42516a;
}

.clean-focus-card h2 {
  margin: 0;
  color: var(--clean-ink);
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.18;
  letter-spacing: -1.4px;
}

.clean-focus-card p {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--clean-muted);
  font-size: 13px;
  line-height: 1.7;
}

.clean-focus-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.clean-focus-actions .primary-button,
.clean-focus-actions .small-button {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 10px;
}

.clean-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 16px;
}

.clean-kpi-row > button {
  min-width: 0;
  padding: 19px 21px;
  border: 0;
  border-right: 1px solid var(--clean-line);
  background: transparent;
  color: var(--clean-ink);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease;
}

.clean-kpi-row > button:last-child {
  border-right: 0;
}

.clean-kpi-row > button:hover,
.clean-kpi-row > button:focus-visible {
  background: #f7f9fc;
}

.clean-kpi-row > button.alert strong {
  color: #c64e5d;
}

.clean-kpi-row span,
.clean-kpi-row small {
  display: block;
  overflow: hidden;
  color: var(--clean-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clean-kpi-row strong {
  display: block;
  margin: 5px 0 4px;
  color: var(--clean-ink);
  font-family: Bahnschrift, "Arial Narrow", sans-serif;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -.7px;
}

.clean-kpi-row strong em {
  margin-left: 3px;
  font-family: inherit;
  font-size: 12px;
  font-style: normal;
}

.clean-card {
  overflow: hidden;
  border-radius: 16px;
}

.clean-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 22px 16px;
  border-bottom: 1px solid var(--clean-line);
}

.clean-section-head h2 {
  margin: 0;
  color: var(--clean-ink);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.3px;
}

.clean-section-head p {
  margin: 5px 0 0;
  color: var(--clean-muted);
  font-size: 11px;
}

.clean-section-head > b {
  padding: 5px 9px;
  border-radius: 99px;
  background: #eef2f8;
  color: #52617a;
  font-size: 11px;
}

.clean-link {
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--clean-indigo);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.clean-work-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--clean-line);
}

.clean-work-summary article {
  padding: 18px 22px;
  border-right: 1px solid var(--clean-line);
}

.clean-work-summary article:last-child {
  border-right: 0;
}

.clean-work-summary span,
.clean-work-summary small {
  display: block;
  color: var(--clean-muted);
  font-size: 11px;
}

.clean-work-summary strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--clean-ink);
  font-family: Bahnschrift, "Arial Narrow", sans-serif;
  font-size: 24px;
}

.clean-work-summary article.alert strong {
  color: #c64e5d;
}

.clean-assistant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 15px 22px;
  padding: 13px 15px;
  border: 1px solid #cfe8e4;
  border-radius: 11px;
  background: #f3fbf9;
}

.clean-assistant.warning {
  border-color: #ecdcbf;
  background: #fffaf0;
}

.clean-assistant.critical {
  border-color: #efd0d5;
  background: #fff7f8;
}

.clean-assistant > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #267c74;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.clean-assistant > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clean-teal);
}

.clean-assistant > div {
  min-width: 0;
}

.clean-assistant > div strong,
.clean-assistant > div small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clean-assistant > div strong {
  color: #23314a;
  font-size: 12px;
}

.clean-assistant > div small {
  margin-top: 3px;
  color: var(--clean-muted);
  font-size: 10px;
}

.clean-assistant > button {
  padding: 6px 10px;
  border: 1px solid #c8d5e6;
  border-radius: 8px;
  background: #fff;
  color: #3f4f69;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

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

.clean-work-row {
  display: grid;
  grid-template-columns: 7px minmax(260px, 1fr) minmax(90px, .34fr) minmax(110px, .38fr) 48px;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 22px;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  background: transparent;
  color: var(--clean-ink);
  text-align: left;
  cursor: pointer;
}

.clean-work-row:last-child {
  border-bottom: 0;
}

.clean-work-row:hover,
.clean-work-row:focus-visible {
  background: #f8fafc;
}

.clean-work-row > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clean-teal);
}

.clean-work-row.warning > i { background: var(--clean-amber); }
.clean-work-row.critical > i { background: #cf5968; }
.clean-work-row.done > i { background: #94a0b2; }

.clean-work-row > span {
  min-width: 0;
}

.clean-work-row strong,
.clean-work-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clean-work-row strong {
  color: #26344b;
  font-size: 12px;
}

.clean-work-row small {
  margin-top: 4px;
  color: var(--clean-muted);
  font-size: 10px;
}

.clean-work-row > b {
  color: #45546d;
  font-family: Bahnschrift, sans-serif;
  font-size: 13px;
  text-align: right;
}

.clean-operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  gap: 16px;
}

.clean-action-list > button {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 22px;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  background: transparent;
  color: var(--clean-ink);
  text-align: left;
  cursor: pointer;
}

.clean-action-list > button:last-child {
  border-bottom: 0;
}

.clean-action-list > button:hover,
.clean-action-list > button:focus-visible {
  background: #f8fafc;
}

.clean-action-list > button > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a97a9;
}

.clean-action-list > button.danger > i { background: #cd5565; }
.clean-action-list > button.warning > i { background: var(--clean-amber); }
.clean-action-list > button.review > i { background: var(--clean-indigo); }

.clean-action-list span {
  min-width: 0;
}

.clean-action-list strong,
.clean-action-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clean-action-list strong {
  color: #26344c;
  font-size: 12px;
}

.clean-action-list small {
  margin-top: 3px;
  color: var(--clean-muted);
  font-size: 10px;
}

.clean-action-list > button > b {
  min-width: 26px;
  color: var(--clean-ink);
  font-family: Bahnschrift, sans-serif;
  font-size: 18px;
  text-align: right;
}

.clean-status-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px;
}

.clean-status-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  border: 1px solid var(--clean-line);
  border-radius: 10px;
  background: #fafbfd;
  color: var(--clean-muted);
  font-size: 11px;
  cursor: pointer;
}

.clean-status-list button strong {
  color: var(--clean-ink);
  font-family: Bahnschrift, sans-serif;
  font-size: 18px;
}

.clean-data-note {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 18px;
  padding: 0 20px 17px;
  color: var(--clean-muted);
  font-size: 10px;
}

.clean-data-note strong {
  margin-left: 4px;
  color: #3b4961;
}

.clean-data-note p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid var(--clean-line);
}

.clean-store-list > button {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(80px, .28fr) minmax(100px, .34fr) 90px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 13px 22px;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  background: transparent;
  color: var(--clean-ink);
  text-align: left;
  cursor: pointer;
}

.clean-store-list > button:last-child {
  border-bottom: 0;
}

.clean-store-list > button:hover,
.clean-store-list > button:focus-visible {
  background: #f8fafc;
}

.clean-store-list span {
  min-width: 0;
}

.clean-store-list strong,
.clean-store-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clean-store-list strong {
  color: #26344c;
  font-size: 12px;
}

.clean-store-list small {
  margin-top: 4px;
  color: var(--clean-muted);
  font-size: 10px;
}

.clean-store-list > button > b {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 99px;
  background: #f0f3f7;
  color: #6f7c90;
  font-size: 10px;
}

.clean-store-list > button > b.active {
  background: #fff4df;
  color: #a36d17;
}

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

.clean-empty strong,
.clean-empty span {
  display: block;
}

.clean-empty strong {
  margin-bottom: 5px;
  color: #34425a;
  font-size: 12px;
}

.clean-empty span {
  font-size: 10px;
}

@media (max-width: 1050px) {
  .clean-operations-grid {
    grid-template-columns: 1fr;
  }

  .clean-work-row {
    grid-template-columns: 7px minmax(220px, 1fr) minmax(90px, .35fr) minmax(105px, .4fr) 45px;
  }
}

@media (max-width: 760px) {
  .clean-focus-card {
    align-items: stretch;
    flex-direction: column;
  }

  .clean-focus-actions {
    align-self: flex-start;
  }

  .clean-kpi-row,
  .clean-work-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clean-kpi-row > button:nth-child(2),
  .clean-work-summary article:nth-child(2) {
    border-right: 0;
  }

  .clean-kpi-row > button:nth-child(-n+2),
  .clean-work-summary article:nth-child(-n+2) {
    border-bottom: 1px solid var(--clean-line);
  }

  .clean-assistant {
    grid-template-columns: 1fr auto;
  }

  .clean-assistant > span {
    grid-column: 1 / -1;
  }

  .clean-work-list,
  .clean-store-list {
    overflow-x: auto;
  }

  .clean-work-row {
    min-width: 700px;
  }

  .clean-store-list > button {
    min-width: 650px;
  }
}

@media (max-width: 520px) {
  .clean-focus-card {
    padding: 22px 20px;
  }

  .clean-focus-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .clean-focus-meta b {
    padding-left: 0;
    border-left: 0;
  }

  .clean-kpi-row,
  .clean-work-summary,
  .clean-status-list {
    grid-template-columns: 1fr;
  }

  .clean-kpi-row > button,
  .clean-work-summary article {
    border-right: 0;
    border-bottom: 1px solid var(--clean-line);
  }

  .clean-kpi-row > button:last-child,
  .clean-work-summary article:last-child {
    border-bottom: 0;
  }

  .clean-assistant {
    margin-right: 14px;
    margin-left: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clean-home-v76 *,
  .clean-home-v76 *::before,
  .clean-home-v76 *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* v85 density controls · neutralize legacy 38px controls */
.view-root[data-view="productCatalog"] .product-catalog-actions {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  gap: 4px !important;
  border-radius: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

.view-root[data-view="productCatalog"] .product-catalog-actions .check-field {
  align-self: center !important;
  height: 26px !important;
  min-height: 26px !important;
  font-size: 10px !important;
}

.view-root[data-view="productCatalog"] .product-catalog-actions .check-field input {
  width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.view-root[data-view="productCatalog"] .product-row-check {
  width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.view-root[data-view="productCatalog"] .product-catalog-actions .hint {
  margin-right: auto;
  font-size: 10px;
  white-space: nowrap;
}

.view-root[data-view="productCatalog"] .product-catalog-actions .small-button,
.view-root[data-view="productCatalog"] .catalog-row-actions .small-button,
.view-root[data-view="productCatalog"] .pagination-bar .small-button {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 7px !important;
  border-radius: 6px !important;
  font-size: 9.5px !important;
  line-height: 24px !important;
}

.view-root[data-view="productCatalog"] .catalog-row-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
  align-items: center !important;
}

.view-root[data-view="productCatalog"] .catalog-row-actions .small-button {
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 2px !important;
}

.view-root[data-view="productCatalog"] .pagination-bar {
  min-height: 0 !important;
  padding: 4px 8px !important;
  gap: 5px !important;
}

.view-root[data-view="productCatalog"] .pagination-bar select {
  height: 26px !important;
  min-height: 26px !important;
  font-size: 10px !important;
}

/* v84 final authority · overrides the legacy v49 1760px product ledger */
@media (min-width: 1181px) {
  .view-root[data-view="productCatalog"] .erp-master-table .table-wrap {
    max-height: calc(100vh - 225px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table thead {
    display: table-header-group !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table tbody {
    display: table-row-group !important;
    padding: 0 !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table tr {
    display: table-row !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table th,
  .view-root[data-view="productCatalog"] .erp-master-table td {
    display: table-cell !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 3px 4px !important;
    overflow: hidden !important;
    line-height: 1.2;
    text-overflow: ellipsis !important;
    vertical-align: middle;
  }

  .view-root[data-view="productCatalog"] .erp-master-table th {
    height: 28px !important;
    font-size: 10px;
    white-space: nowrap !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td {
    font-size: 10px;
    white-space: normal !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td::before {
    display: none !important;
    content: none !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(1),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(1) { width: 32px !important; text-align: center; }
  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(2),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(2) { width: 68px !important; }
  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(3),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(3) { width: 92px !important; }
  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(4),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(4) { width: auto !important; }
  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(5),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(5) { width: 66px !important; }
  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(6),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(6) { width: 72px !important; }
  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(7),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(7) { width: 64px !important; }
  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(8),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(8) { width: 100px !important; }
  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(9),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(9) { width: 136px !important; }
  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(10),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(10) { width: 48px !important; text-align: center; }
  .view-root[data-view="productCatalog"] .erp-master-table th:nth-child(11),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(11) { width: 70px !important; }
}

@media (max-width: 1180px) {
  .view-root[data-view="productCatalog"] .erp-master-table .table-wrap {
    max-height: none;
    overflow: visible !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table table,
  .view-root[data-view="productCatalog"] .erp-master-table thead,
  .view-root[data-view="productCatalog"] .erp-master-table tbody,
  .view-root[data-view="productCatalog"] .erp-master-table tr,
  .view-root[data-view="productCatalog"] .erp-master-table td {
    width: 100% !important;
    min-width: 0 !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table table,
  .view-root[data-view="productCatalog"] .erp-master-table tbody,
  .view-root[data-view="productCatalog"] .erp-master-table td {
    display: block !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table thead {
    display: none !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table tbody {
    display: grid !important;
    gap: 8px;
    padding: 10px !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr);
    height: auto !important;
    min-height: 24px;
    gap: 7px;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td::before {
    display: block !important;
    color: #8390a2;
    content: "";
    font-size: 10px;
    font-weight: 800;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(1)::before { content: "选择"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(2)::before { content: "商品编号"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(3)::before { content: "物料编码"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(4)::before { content: "商品资料"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(5)::before { content: "分类"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(6)::before { content: "供应商"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(7)::before { content: "状态"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(8)::before { content: "UPC/条码"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(9)::before { content: "价格"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(10)::before { content: "库存线"; }
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(11)::before { content: "操作"; }

  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(4),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(9),
  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(11) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .view-root[data-view="productCatalog"] .erp-master-table tr {
    grid-template-columns: 1fr;
  }

  .view-root[data-view="productCatalog"] .erp-master-table td:nth-child(n) {
    grid-column: 1;
  }
}