/* Unified premium desktop UI layer. Keeps the product dense, quiet and operational. */
:root {
  --premium-primary: #3b69a7;
  --premium-primary-hover: #2b568f;
  --premium-primary-soft: #eef4fb;
  --premium-ink: #102846;
  --premium-text: #304765;
  --premium-muted: #687891;
  --premium-page: #f3f6fa;
  --premium-surface: #ffffff;
  --premium-surface-subtle: #f7f9fc;
  --premium-border: #dbe3ed;
  --premium-border-soft: #e9eef5;
  --premium-radius: 8px;
  --premium-control-radius: 6px;
  --premium-shadow: 0 1px 2px rgba(24, 45, 72, .035), 0 8px 24px rgba(24, 45, 72, .035);
  --premium-shadow-hover: 0 2px 4px rgba(24, 45, 72, .05), 0 14px 32px rgba(24, 45, 72, .08);

  --ui-primary: var(--premium-primary);
  --ui-primary-hover: var(--premium-primary-hover);
  --ui-primary-soft: var(--premium-primary-soft);
  --ui-bg: var(--premium-page);
  --ui-surface: var(--premium-surface);
  --ui-border: var(--premium-border);
  --ui-border-soft: var(--premium-border-soft);
  --ui-text: var(--premium-ink);
  --ui-muted: var(--premium-muted);
  --ui-radius: var(--premium-control-radius);

  --product-shell-line: var(--premium-border);
  --product-shell-muted: var(--premium-muted);
  --product-shell-ink: var(--premium-ink);
  --product-shell-brand: var(--premium-primary);
  --product-shell-brand-hover: var(--premium-primary-hover);
  --product-shell-surface: var(--premium-surface);

  --admin-primary: var(--premium-primary);
  --admin-primary-hover: var(--premium-primary-hover);
  --admin-primary-soft: var(--premium-primary-soft);
  --admin-border: var(--premium-border);
  --admin-border-subtle: var(--premium-border-soft);
  --admin-surface: var(--premium-surface);
  --admin-surface-subtle: var(--premium-surface-subtle);

  --five-blue: var(--premium-primary);
  --agent-blue-text: #264d7e;
  --agent-blue-bg: rgba(59, 105, 167, .045);
  --agent-blue-bg-strong: rgba(59, 105, 167, .085);
  --agent-blue-border: rgba(59, 105, 167, .22);
  --agent-blue-border-strong: rgba(59, 105, 167, .50);
  --text-bg-blue: var(--premium-primary);
  --text-bg-blue-hover: var(--premium-primary-hover);
  --text-bg-border: rgba(59, 105, 167, .46);
}

html {
  color-scheme: light;
  background: var(--premium-page);
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

body,
.chat-app,
.workspace,
.canvas {
  background: var(--premium-page);
  color: var(--premium-text);
}

/* Application shell */
.side {
  border-right-color: #dce4ef;
  background: #ffffff;
  box-shadow: 8px 0 28px rgba(25, 48, 78, .045);
}

.brand {
  margin-bottom: 16px;
}

.nav {
  gap: 6px;
}

.nav-item {
  height: 44px;
  border-color: transparent;
  border-radius: var(--premium-control-radius);
  background: transparent;
  color: #38506e;
  font-weight: 500;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.nav-item:hover {
  border-color: #dbe5f1;
  background: #f5f8fc;
  color: var(--premium-primary-hover);
}

.nav-item.active {
  border-color: #a9c1e1;
  background: var(--premium-primary-soft);
  color: var(--premium-primary-hover);
  box-shadow: inset 3px 0 0 var(--premium-primary);
}

.nav-item.active::before {
  display: none;
}

.nav-item .nav-icon {
  color: currentColor;
}

.mini-icons {
  gap: 8px;
  border-bottom-color: var(--premium-border);
}

.mini-icon {
  height: 32px;
  border-color: #dce4ef;
  border-radius: var(--premium-control-radius);
  background: #ffffff;
  color: #526985;
}

.mini-icon:hover,
.mini-icon.active {
  border-color: #a9c1e1;
  background: var(--premium-primary-soft);
  color: var(--premium-primary-hover);
}

.login-status {
  border-top-color: var(--premium-border-soft);
}

body.show-role-switcher .workspace::before,
.product-page-shell--portal .module-head.product-page-header,
.product-page-shell--agent .chat-agent-head.product-page-header {
  background: rgba(243, 246, 250, .97);
}

body.show-role-switcher .workspace::before {
  border-bottom-color: #dce4ef;
}

.role-switcher {
  height: 36px;
  border-color: #bfcbd9;
  border-radius: var(--premium-control-radius);
  background-color: #ffffff;
  color: var(--premium-ink);
  box-shadow: 0 1px 2px rgba(24, 45, 72, .04);
}

.role-switcher:focus {
  border-color: var(--premium-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 105, 167, .13);
}

/* Page hierarchy */
.product-page-shell {
  color: var(--premium-text);
}

.product-page-header {
  min-height: 96px;
  padding: 16px 0 18px;
  border-bottom-color: var(--premium-border);
}

.product-page-header h1,
.module-view h1,
.agent-original-mode .agent-conversation-pane .chat-agent-head h1,
.five-hero h1 {
  color: var(--premium-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.product-page-header p,
.module-head p,
.user-org-titlebar p,
.business-system-head p {
  color: var(--premium-muted);
}

.product-page-eyebrow,
.product-page-header .five-eyebrow,
.product-page-header > div:first-child > span:first-child,
.business-system-head > div:first-child > span {
  color: var(--premium-primary);
}

.product-page-header-meta,
.product-page-shell--system .business-system-head > div:last-child {
  border-left-color: var(--premium-primary);
  background: #f6f8fb;
}

.business-system-head b {
  color: var(--premium-primary);
}

.business-system-flow i {
  background: var(--premium-primary);
  box-shadow: 0 0 0 4px var(--premium-primary-soft);
}

.product-primary-nav,
.product-primary-nav.business-system-tabs {
  border-color: var(--premium-border);
  border-radius: var(--premium-control-radius);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(24, 45, 72, .025);
}

.product-primary-nav .system-nav-item.active,
.product-primary-nav.business-system-tabs > button.active,
.product-primary-nav .five-step.active,
.product-page-shell--dste .product-primary-nav .five-step.active {
  color: var(--premium-primary);
}

.product-primary-nav .system-nav-item.active::after,
.product-primary-nav.business-system-tabs > button.active::after,
.product-primary-nav .five-step.active::after {
  background: var(--premium-primary);
}

.product-secondary-nav {
  border-radius: var(--premium-control-radius);
  background: #eaf0f6;
}

.product-secondary-nav > button.active,
.product-secondary-nav .system-nav-item.active {
  color: var(--premium-ink);
  box-shadow: 0 1px 3px rgba(24, 45, 72, .10);
}

/* Surfaces and controls */
.panel,
.stat,
.module-card,
.brief-card,
.board-card,
.approval-card,
.chat-agent-card,
.agent-card,
.five-panel,
.five-stage-head,
.five-stepper,
.admin-unified-page .foundation-panel,
.admin-unified-page .user-org-panel,
.admin-unified-page .user-org-tree,
.business-system-panel,
.foundation-section-card,
.foundation-agent-card,
.dmp-panel,
.dmp-workspace-panel {
  border-color: var(--premium-border);
  border-radius: var(--premium-radius);
  background: #ffffff;
  box-shadow: var(--premium-shadow);
}

.module-card-button,
.chat-agent-card,
.agent-card,
.foundation-section-card,
.foundation-agent-card,
.portal-stat {
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.module-card-button:hover,
.chat-agent-card:hover,
.agent-card:hover,
.foundation-section-card:hover,
.foundation-agent-card:hover,
.portal-stat:hover {
  border-color: #a9bed9;
  background: #ffffff;
  box-shadow: var(--premium-shadow-hover);
  transform: translateY(-1px);
}

.btn,
.five-btn,
.dmp-btn,
.business-system-search button,
.foundation-empty-actions button {
  min-height: 34px;
  border-color: #c9d4e2;
  border-radius: var(--premium-control-radius);
  background: #ffffff;
  color: #36506f;
  font-weight: 650;
  box-shadow: none;
}

.btn.primary,
.dataset-page .btn.primary,
.five-btn.primary,
.v3-primary,
.dmp-btn.primary,
.admin-unified-page .btn.primary,
.admin-unified-page .btn.success,
.business-system-page .btn.primary,
.send {
  border-color: var(--premium-primary);
  background: var(--premium-primary);
  color: #ffffff;
}

.btn.primary:hover,
.dataset-page .btn.primary:hover,
.five-btn.primary:hover,
.v3-primary:hover,
.dmp-btn.primary:hover,
.send:hover:not(:disabled) {
  border-color: var(--premium-primary-hover);
  background: var(--premium-primary-hover);
}

input,
select,
textarea,
.dataset-filters input,
.dataset-filters select,
.form-field input,
.form-field select {
  border-color: #c9d4e2;
  border-radius: var(--premium-control-radius);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--premium-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 105, 167, .12);
}

.dataset-table th,
.user-org-table th,
.business-system-table th,
.five-table th,
.dmp-table th {
  border-bottom-color: var(--premium-border);
  background: #f4f7fb;
  color: #50647f;
  font-weight: 700;
}

.dataset-table td,
.user-org-table td,
.business-system-table td,
.five-table td,
.dmp-table td {
  border-bottom-color: var(--premium-border-soft);
  color: var(--premium-text);
}

.dataset-table tbody tr:hover,
.user-org-table tbody tr:hover,
.business-system-table tbody tr:hover,
.five-table tbody tr:hover,
.dmp-table tbody tr:hover {
  background: #f7faff;
}

.portal-link,
.user-org-link,
.five-link,
.five-table-action,
.dmp-table-action,
.portal-entry-action {
  color: var(--premium-primary);
}

/* Strategic portal */
.product-page-shell--portal {
  gap: 16px;
}

.product-page-shell--portal .portal-function-grid,
.product-page-shell--portal .portal-metrics-band {
  gap: 14px;
}

.product-page-shell--portal .portal-function-grid .module-card {
  position: relative;
  min-height: 140px;
  overflow: hidden;
  border-top: 3px solid var(--premium-primary);
  padding: 15px 16px 14px;
  background: #ffffff;
}

.product-page-shell--portal .portal-function-grid .module-card::after {
  position: absolute;
  inset: 0 0 auto;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(59, 105, 167, .045), rgba(59, 105, 167, 0));
  content: "";
}

.product-page-shell--portal .portal-function-grid .module-card h3 {
  position: relative;
  z-index: 1;
  color: var(--premium-ink);
}

.product-page-shell--portal .portal-function-grid .module-card p {
  color: #53677f;
}

.product-page-shell--portal .portal-metrics-band .stat {
  min-height: 92px;
  border-top: 2px solid #d5e0ed;
}

.product-page-shell--portal .portal-metrics-band .stat strong {
  color: var(--premium-ink);
  font-weight: 750;
}

.portal-work-tabs button.active {
  border-color: #a7bfe0;
  background: var(--premium-primary-soft);
  color: var(--premium-primary-hover);
}
/* Portal current-work context: compact and subordinate to the page heading. */
.five-portal-band.v3-current-work,
.five-portal-band.v3-current-work[data-role="manager"],
.five-portal-band.v3-current-work[data-role="subsidiary"] {
  --role-accent: var(--premium-primary);
  --role-accent-ring: rgba(59, 105, 167, .12);
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(520px, 1fr);
  column-gap: 20px;
  margin-bottom: 14px;
  padding: 9px 14px 8px;
  overflow: hidden;
  border: 1px solid var(--premium-border);
  border-left: 1px solid var(--premium-border);
  border-radius: var(--premium-radius);
  background: #ffffff;
  box-shadow: var(--premium-shadow);
}

.v3-current-work-head {
  min-width: 0;
  gap: 12px;
}

.v3-current-work-head > div {
  min-width: 0;
}

.v3-current-work-head > div > small {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--premium-primary-soft);
  color: var(--premium-primary);
  font-size: 10px;
  line-height: 20px;
}

.v3-current-work-head h2 {
  margin: 3px 0 2px;
  overflow: hidden;
  color: var(--premium-ink);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-current-work-head p {
  overflow: hidden;
  color: var(--premium-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-current-work-head > button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--premium-control-radius);
  align-self: center;
}

.v3-current-work-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 18px;
  border: 0;
  border-left: 1px solid var(--premium-border-soft);
}

.v3-current-work-body > div {
  min-width: 0;
  padding: 0 12px;
}

.v3-current-work-body > div:first-child {
  padding-left: 0;
}

.v3-current-work-body > div + div {
  padding-left: 12px;
}

.v3-current-work-body small {
  color: var(--premium-muted);
  font-size: 10px;
}

.v3-current-work-body b {
  margin-top: 4px;
  overflow: hidden;
  color: var(--premium-text);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-portal-progress {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 7px;
  padding-top: 7px;
  overflow: visible;
  border-top: 1px solid var(--premium-border-soft);
}

.v3-portal-progress span {
  min-width: 0;
  gap: 7px;
  color: #7a889a;
  font-size: 11px;
}

.v3-portal-progress span:not(:last-child)::after {
  margin: 0 10px;
  background: #dce4ed;
}

.v3-portal-progress i {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: #eef2f6;
  color: #718096;
  font-size: 10px;
}

.v3-portal-progress .active {
  color: var(--premium-primary);
}

.v3-portal-progress .active i {
  background: var(--premium-primary);
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--premium-primary-soft);
}

@media (max-width: 1180px) {
  .five-portal-band.v3-current-work {
    grid-template-columns: 1fr;
  }

  .v3-current-work-body {
    margin-top: 10px;
    padding: 10px 0 0;
    border-top: 1px solid var(--premium-border-soft);
    border-left: 0;
  }
}

/* DSTE Agent */
.product-page-shell--agent .chat-agent-picker.product-workbench-surface {
  border-color: var(--premium-border);
  border-radius: var(--premium-radius);
  background: #ffffff;
  box-shadow: var(--premium-shadow);
}

.product-page-shell--agent .chat-agent-grid {
  gap: 10px;
}

.product-page-shell--agent .chat-agent-card,
.agent-original-mode .agent-conversation-pane .chat-agent-card {
  min-height: 102px;
  border-color: var(--premium-border);
  border-radius: var(--premium-radius);
  background: #ffffff;
  box-shadow: none;
}

.product-page-shell--agent .chat-agent-card:hover,
.product-page-shell--agent .chat-agent-card.active,
.agent-original-mode .agent-conversation-pane .chat-agent-card:hover,
.agent-original-mode .agent-conversation-pane .chat-agent-card.active {
  border-color: #9fb9dc;
  background: var(--premium-primary-soft);
  box-shadow: 0 8px 22px rgba(38, 77, 126, .09);
}

.chat-agent-card b,
.agent-session-item b,
.agent-context-item b,
.agent-side-head b {
  color: var(--premium-ink);
}

.message .bubble,
.thinking-card,
.task-step-card,
.agent-conversation-flow,
.agent-scenario-choice,
.agent-version-diff > div {
  border-color: var(--premium-border);
  border-radius: var(--premium-radius);
  box-shadow: none;
}

.message.assistant .bubble,
.message.result .bubble,
.thinking-card,
.task-step-card {
  background: #ffffff;
}

.message.user .bubble {
  border-color: var(--premium-primary);
  background: var(--premium-primary);
  color: #ffffff;
}

.agent-conversation-stage.current,
.agent-scenario-choice:hover {
  background: var(--premium-primary-soft);
}

.agent-conversation-stage.current i {
  background: var(--premium-primary);
}

.composer,
body.dste-agent-mode .composer {
  border-color: #cfd9e6;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(24, 45, 72, .12);
}

.composer:focus-within {
  border-color: #92afd5;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 105, 167, .11), 0 14px 36px rgba(24, 45, 72, .13);
}

.composer textarea,
.composer-foot,
.agent-select {
  color: var(--premium-text);
}

.send {
  height: 36px;
  border-radius: var(--premium-control-radius);
  padding: 0 16px;
}

/* Enterprise foundation and system management */
.foundation-sections {
  gap: 12px;
}

.foundation-section-card {
  min-height: 132px;
  padding: 14px;
  color: var(--premium-text);
}

.foundation-section-card:hover,
.foundation-section-card.active {
  border-color: #9fb9dc;
  background: #f3f7fc;
}

.foundation-section-card.active {
  box-shadow: inset 0 3px 0 var(--premium-primary), var(--premium-shadow);
}

.foundation-section-card b,
.foundation-panel-head h2,
.business-system-panel-head h2 {
  color: var(--premium-ink);
}

.foundation-panel-head,
.business-system-panel-head {
  border-bottom-color: var(--premium-border-soft);
}

.foundation-agent-card {
  min-height: 160px;
}

.foundation-agent-icon {
  background: var(--premium-primary-soft);
  color: var(--premium-primary);
}

.foundation-agent-card > b {
  color: var(--premium-primary);
}

.business-system-page {
  gap: 16px;
}

.business-system-panel {
  overflow: hidden;
}

.business-system-list > button {
  border-color: var(--premium-border-soft);
  background: #ffffff;
}

.business-system-list > button:hover {
  background: #f6f9fd;
}

.dste-product-tabs-location em,
.dste-tab-state[data-state="current"] {
  border-color: #a9bed9;
  background: var(--premium-primary-soft);
  color: var(--premium-primary);
}

.five-loop-page .dste-product-tabs .five-step.active,
.five-loop-page .dste-secondary-tabs .five-subtab.active,
.business-system-tabs button:hover,
.business-system-tabs button.active {
  border-bottom-color: var(--premium-primary);
  background: var(--premium-primary-soft);
  color: var(--premium-primary);
}

.business-system-table td button,
.business-system-search button,
.business-system-drawer header small,
.agent-workbench-linkbar button {
  color: var(--premium-primary);
}

.business-system-drawer-note {
  border-left-color: var(--premium-primary);
  background: var(--premium-primary-soft);
}

.foundation-agent-card:focus-visible {
  outline-color: rgba(59, 105, 167, .22);
}

.agent-workbench-linkbar button:hover {
  border-color: #9fb9dc;
  background: var(--premium-primary-soft);
}

/* DSTE management refinements */
.dste-management-product-v2 {
  gap: 16px;
}

.dmp-lifecycle,
.dmp-summary,
.dmp-object-meta,
.dmp-inline-summary,
.dmp-panel,
.dmp-workspace-panel,
.dmp-workbench-tabs {
  border-radius: var(--premium-radius);
  box-shadow: var(--premium-shadow);
}

.dmp-lifecycle,
.dmp-workbench-tabs {
  box-shadow: 0 1px 2px rgba(24, 45, 72, .03);
}

.dmp-life-tab.active,
.dmp-workbench-tabs button.active {
  background: var(--premium-primary-soft);
}

.dmp-summary > div:first-child {
  box-shadow: inset 0 3px 0 var(--premium-primary);
}

.dmp-command-bar {
  border-radius: var(--premium-radius);
  box-shadow: 0 -8px 24px rgba(24, 45, 72, .08);
}

/* Drawers, dialogs and transient feedback */
.dmp-drawer,
.product-task-drawer,
.system-user-detail-panel,
.demo-flow-drawer,
.agent-evidence-drawer,
.artifact-viewer {
  border-left-color: var(--premium-border);
  background: #ffffff;
  box-shadow: -18px 0 48px rgba(19, 38, 63, .18);
}

.dmp-confirm,
.five-rule-modal,
.agent-action-confirm,
.quick-modal-card {
  border: 1px solid var(--premium-border);
  border-radius: var(--premium-radius);
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(19, 38, 63, .22);
}

.quick-modal {
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, .30);
  box-shadow: none;
}

.quick-modal-origin {
  display: grid;
  gap: 2px;
  max-width: 300px;
  margin-left: auto;
  padding: 7px 11px;
  border-left: 2px solid var(--premium-primary);
  background: var(--premium-surface-muted);
}

.quick-modal-origin small {
  color: var(--premium-text-muted);
  font-size: 10px;
  font-weight: 600;
}

.quick-modal-origin strong {
  overflow: hidden;
  color: var(--premium-text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast {
  border: 1px solid #cbd8e8;
  border-radius: var(--premium-control-radius);
  background: #173654;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(19, 38, 63, .20);
}

/* Keyboard and reduced motion */
button:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid rgba(59, 105, 167, .22);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Portal management journey */
.product-page-shell--portal .portal-function-grid {
  position: relative;
}

.product-page-shell--portal .portal-function-grid::before {
  position: absolute;
  z-index: 0;
  top: 31px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: #d7e2f0;
  content: "";
}

.product-page-shell--portal .portal-function-grid .portal-flow-card {
  z-index: 1;
  min-height: 182px;
}

.product-page-shell--portal .portal-entry-state {
  display: flex;
  min-height: 24px;
  margin: 7px 0 4px;
}

.product-page-shell--portal .portal-entry-state span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #b8cee8;
  border-radius: 999px;
  background: #eef5fc;
  color: #27588f;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  white-space: normal;
}

.product-page-shell--portal .portal-entry-state.red span {
  border-color: #efc2bc;
  background: #fff3f1;
  color: #b13f32;
}

.product-page-shell--portal .portal-entry-state.amber span {
  border-color: #f0cf8b;
  background: #fff9eb;
  color: #986512;
}

.product-page-shell--portal .portal-entry-state.green span {
  border-color: #b9ddc5;
  background: #edf8f1;
  color: #2f764c;
}

.product-page-shell--portal .portal-function-grid .portal-flow-card p {
  min-height: 44px;
}

.product-page-shell--portal .portal-metrics-band .portal-stat.blue {
  border-top-color: #8eb2da;
}

.product-page-shell--portal .portal-metrics-band .portal-stat.red {
  border-top-color: #dfa69e;
}

.product-page-shell--portal .portal-metrics-band .portal-stat.amber {
  border-top-color: #e3c47c;
}

.product-page-shell--portal .portal-metrics-band .portal-stat.green {
  border-top-color: #99c6a8;
}