:root {
  color-scheme: dark;
  --app-bg: #060c17;
  --app-bg-soft: #0a1220;
  --sidebar-bg: rgba(5, 12, 24, 0.95);
  --panel: rgba(18, 29, 45, 0.88);
  --panel-soft: rgba(17, 27, 43, 0.72);
  --panel-hover: rgba(25, 39, 59, 0.92);
  --line: rgba(135, 158, 190, 0.18);
  --line-strong: rgba(148, 174, 207, 0.28);
  --text: #f2f6fb;
  --muted: #78879b;
  --muted-2: #526176;
  --cyan: #53e5ca;
  --cyan-soft: rgba(83, 229, 202, 0.14);
  --blue: #5aa8ff;
  --purple: #9676ff;
  --rose: #ff6f9f;
  --yellow: #f3ca6a;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.toast {
  border: 1px solid var(--line-strong);
  background: rgba(9, 18, 31, 0.96);
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.toast.toast-success {
  border-color: rgba(83, 229, 202, 0.58);
  background: linear-gradient(135deg, rgba(83, 229, 202, 0.2), rgba(9, 18, 31, 0.97));
  color: var(--cyan);
}

.toast.toast-error {
  border-color: rgba(255, 111, 159, 0.62);
  background: linear-gradient(135deg, rgba(255, 111, 159, 0.2), rgba(9, 18, 31, 0.97));
  color: #ffb0ca;
}

* {
  scrollbar-color: #27384d #09111e;
}

html,
body {
  color: var(--text);
  background:
    radial-gradient(
      circle at 37% 0%,
      rgba(24, 151, 169, 0.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 100% 38%,
      rgba(103, 73, 197, 0.14),
      transparent 34%
    ),
    linear-gradient(135deg, #050b14 0%, #08111e 52%, #0a0c1c 100%);
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

body::after {
  content: "";
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cyan),
    var(--purple),
    transparent
  );
  opacity: 0.38;
  pointer-events: none;
}

.toolbar,
.main {
  position: relative;
  z-index: 1;
}

.toolbar {
  width: calc(100% - 20px);
  height: 56px;
  margin: 8px 10px 0;
  padding: 0 14px;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(7, 15, 27, 0.78);
  box-shadow: 0 15px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px) saturate(130%);
}

.toolbar button {
  color: #9dacbf;
  border: 1px solid transparent;
  transition: 0.18s ease;
}

.toolbar button:hover,
.toolbar .dropdown.open > button {
  color: #fff;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.055);
}

.brand {
  height: 38px;
  margin-right: 20px;
  padding: 5px 10px;
  border-right: 1px solid var(--line);
}

.brand-logo {
  height: 30px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

#server-account-button {
  border-color: rgba(99, 224, 207, 0);
  background: rgba(69, 205, 189, 0);
  color: #c6e8e4;
}

.main,
.main.workspace-open {
  height: calc(100vh - 64px);
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
}

.main.nav-collapsed,
.main.nav-collapsed.workspace-open {
  grid-template-columns: 0 minmax(0, 1fr);
}

.navigation {
  position: relative;
  min-width: 0;
  padding: 18px 12px 18px 56px;
  overflow-x: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(
    160deg,
    rgba(8, 17, 31, 0.97),
    rgba(4, 10, 21, 0.98)
  );
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}

.nav-rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  border-right: 1px solid var(--line);
  background: linear-gradient(
    180deg,
    rgba(18, 29, 47, 0.92),
    rgba(7, 13, 25, 0.96)
  );
  color: #8e9eb1;
}

.nav-rail span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  font-size: 13px;
}

.nav-rail .rail-mark {
  margin-bottom: 3px;
  border: 1px solid rgba(89, 232, 210, 0.42);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
}

.nav-rail .rail-bottom {
  margin-top: auto;
}

.main.nav-collapsed .navigation {
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
}

.nav-overview {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin-bottom: 12px;
}

.nav-item,
.nav-group summary,
.nav-project-group .nav-project-item {
  color: #8b9aad;
  border-radius: 10px;
  font-size: 11px;
  transition: 0.17s ease;
}

.nav-item:hover,
.nav-group summary:hover,
.nav-project-group .nav-project-item:hover {
  color: #eaf7f5;
  background: rgba(39, 60, 81, 0.36);
  transform: translateX(2px);
}

.nav-item.active,
.pd-nav.active,
.nav-project-group .nav-project-item.active {
  color: #e9fffb;
  background: linear-gradient(
    135deg,
    rgba(38, 181, 171, 0.26),
    rgba(42, 104, 128, 0.18)
  );
  box-shadow:
    inset 0 0 0 1px rgba(83, 229, 202, 0.2),
    0 9px 22px rgba(0, 0, 0, 0.14);
}

.nav-item.active .nav-icon,
.pd-nav.active > span {
  color: var(--cyan);
}

.nav-group {
  margin: 7px 0;
}

.nav-group summary {
  min-height: 32px;
  padding: 8px;
  color: #5f6f82;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-group summary::after {
  color: #445368;
}

.nav-group-items,
.nav-project-group .nav-project-list {
  border-left-color: rgba(105, 130, 159, 0.12);
}

.nav-account {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.canvas {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(6, 13, 24, 0.72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.canvas-inner {
  max-width: 1480px;
  padding: 24px;
}

.page-title,
.card-title,
.section-title,
.workspace-title,
.model-name,
.data-name,
.project-breadcrumb strong {
  color: var(--text) !important;
}

.page-description,
.card-subtitle,
.section-description,
.workspace-system,
.data-meta,
.model-io,
.project-breadcrumb {
  color: var(--muted) !important;
}

.server-viewer-notice {
  align-self: center;
  padding: 7px 11px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.16);
  color: #bfdbfe;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.card,
.workspace-file,
.model-row,
.data-row,
.pd-card,
.library-card,
.model-library-card,
.workspace-library-card,
.workspace-section,
.result-card {
  border-color: var(--line) !important;
  background: var(--panel-soft) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(16px);
}

.card:hover,
.workspace-file:hover,
.model-row:hover,
.data-row:hover {
  border-color: var(--line-strong) !important;
  background: var(--panel-hover) !important;
}

.primary-btn {
  border: 1px solid rgba(153, 128, 255, 0.44) !important;
  background: linear-gradient(135deg, #6657ef, #8b64ff) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(104, 79, 245, 0.28);
}

.primary-btn:hover {
  background: linear-gradient(135deg, #7869ff, #9d79ff) !important;
  transform: translateY(-1px);
}

.secondary-btn,
.data-action,
.library-view-btn,
.model-library-tab {
  border-color: var(--line) !important;
  background: rgba(20, 32, 50, 0.78) !important;
  color: #b8c4d3 !important;
}

.secondary-btn:hover,
.data-action:hover,
.library-view-btn:hover,
.model-library-tab:hover,
.model-library-tab.active {
  border-color: var(--line-strong) !important;
  background: linear-gradient(
    135deg,
    rgba(38, 181, 171, 0.26),
    rgba(42, 104, 128, 0.18)
  ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(83, 229, 202, 0.2),
    0 9px 22px rgba(0, 0, 0, 0.14);
  color: #fff !important;
}

input,
select,
textarea,
.search-box,
.model-select,
.form-input {
  border-color: var(--line) !important;
  background: rgba(8, 16, 29, 0.82) !important;
  color: var(--text) !important;
}

input::placeholder,
textarea::placeholder {
  color: #566477 !important;
}

.dropdown-menu,
.manage-menu,
.modal-content {
  border-color: var(--line-strong) !important;
  background: rgba(11, 20, 34, 0.96) !important;
  color: var(--text) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(26px);
}

.dropdown-menu button,
.manage-menu button {
  color: #b7c4d3 !important;
}

.dropdown-menu button:hover,
.manage-menu button:hover {
  background: rgba(52, 72, 99, 0.36) !important;
  color: #fff !important;
}

.status.valid {
  background: rgba(65, 211, 171, 0.13) !important;
  color: #7ee1c5 !important;
}

.status.warning {
  background: rgba(241, 196, 91, 0.12) !important;
  color: #f0ca72 !important;
}

.status.error {
  background: rgba(255, 100, 140, 0.12) !important;
  color: #ff88a9 !important;
}

/* Overview dashboard */
.overview-page {
  display: grid;
  gap: 14px;
  min-height: 100%;
  color: var(--text);
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.overview-header h1 {
  margin: 0;
  color: #f4f8fc;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.035em;
}

.overview-header h1 span {
  color: var(--cyan);
  font-size: 15px;
}

.overview-header p,
.overview-panel header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.overview-header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.overview-search {
  width: 190px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(16, 26, 42, 0.82);
  color: #647388;
}

.overview-search input {
  min-width: 0;
  flex: 1;
  padding: 0 !important;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  font-size: 9px;
}

.overview-search kbd {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: #667489;
  font-size: 8px;
}

.overview-icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(17, 28, 45, 0.82);
  color: #b5c1cf;
}

.overview-create-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 9px;
  font-weight: 700;
}

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

.overview-metric-card {
  position: relative;
  width: 100%;
  min-height: 94px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(27, 46, 62, 0.84),
    rgba(15, 24, 39, 0.88)
  );
  color: inherit;
  text-align: left;
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.overview-metric-card:hover,
.overview-metric-card:focus-visible {
  transform: translateY(-2px);
  border-color: currentColor;
  outline: none;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

.overview-metric-card::after {
  content: "";
  position: absolute;
  inset: auto -25px -45px auto;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.055;
  filter: blur(3px);
}

.metric-top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8291a4;
  font-size: 9px;
}

.metric-top i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: currentColor;
}

.metric-top b {
  margin-left: auto;
  color: #58667a;
  font-size: 8px;
  letter-spacing: 1px;
}

.overview-metric-card > strong {
  display: block;
  margin-top: 10px;
  color: #f5f8fb;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.overview-metric-card > small {
  display: block;
  margin-top: 3px;
  color: #617085;
  font-size: 7px;
}

.overview-metric-card > small em {
  margin-right: 4px;
  padding: 2px 5px;
  border-radius: 7px;
  background: rgba(83, 229, 202, 0.13);
  color: #6de1cd;
  font-style: normal;
}

.metric-bars {
  position: absolute;
  right: 12px;
  bottom: 13px;
  width: 54px;
  height: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2px;
  color: currentColor;
  opacity: 0.78;
}

.metric-bars i {
  width: 5px;
  min-height: 3px;
  border-radius: 3px 3px 1px 1px;
  background: currentColor;
}

.metric-teal {
  color: var(--cyan);
}
.metric-blue {
  color: var(--blue);
}
.metric-purple {
  color: var(--purple);
}
.metric-rose {
  color: var(--rose);
}

.overview-analytics-grid,
.overview-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr);
  gap: 11px;
}

.overview-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(18, 29, 45, 0.92),
    rgba(14, 22, 37, 0.9)
  );
  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.16);
}

.overview-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0;
}

.overview-panel header h2 {
  margin: 0;
  color: #edf4f8;
  font-size: 12px;
  font-weight: 620;
}

.overview-panel header button {
  border: 0;
  background: transparent;
  color: #99a7b8;
  font-size: 8px;
  cursor: pointer;
}

.overview-chart-panel {
  min-height: 235px;
}

.overview-chart-panel header button {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.overview-period select {
  padding: 6px 24px 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #b7c3d1;
  font-size: 8px;
  cursor: pointer;
}

.chart-legend {
  display: flex;
  gap: 18px;
  padding: 12px 16px 0;
  color: #76859a;
  font-size: 8px;
}

.chart-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-legend i {
  width: 14px;
  height: 2px;
  border-radius: 3px;
  background: var(--cyan);
}

.chart-legend span:nth-child(2) i {
  background: var(--purple);
}

.overview-line-chart {
  position: relative;
  height: 160px;
  margin: 4px 16px 10px 38px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 36px,
    rgba(132, 155, 183, 0.09) 37px
  );
}

.overview-line-chart svg {
  width: 100%;
  height: 135px;
  overflow: visible;
  cursor: crosshair;
}

.overview-chart-guide {
  position: absolute;
  top: 0;
  bottom: 25px;
  width: 1px;
  border-left: 1px dashed rgba(196, 224, 232, 0.36);
  pointer-events: none;
}

.overview-chart-guide[hidden],
.overview-chart-tooltip[hidden] {
  display: none;
}

.overview-chart-guide > i {
  position: absolute;
  left: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid #07111f;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 2px rgba(83, 229, 202, 0.25);
  transform: translateY(-50%);
}

.overview-chart-guide > i.run-dot {
  background: var(--purple);
  box-shadow: 0 0 0 2px rgba(150, 118, 255, 0.24);
}

.overview-chart-tooltip {
  position: absolute;
  top: 10px;
  z-index: 4;
  min-width: 142px;
  padding: 9px 10px;
  border: 1px solid rgba(83, 229, 202, 0.22);
  border-radius: 10px;
  background: rgba(6, 15, 27, 0.96);
  color: #dce8ee;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  transform: translateX(-50%);
}

.overview-chart-tooltip strong,
.overview-chart-tooltip span {
  display: block;
}

.overview-chart-tooltip strong {
  margin-bottom: 6px;
  color: #f3fbfa;
  font-size: 9px;
}

.overview-chart-tooltip span {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 5px;
  align-items: center;
  margin-top: 4px;
  color: #8292a6;
  font-size: 7px;
}

.overview-chart-tooltip span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

.overview-chart-tooltip span:nth-child(3) i {
  background: var(--purple);
}

.overview-chart-tooltip span b {
  color: #eef7f6;
  font-size: 8px;
}

.chart-area {
  fill: url(#chartFill);
}
.chart-line {
  fill: none;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.chart-line-primary {
  stroke: var(--cyan);
  filter: drop-shadow(0 0 5px rgba(83, 229, 202, 0.32));
}
.chart-line-secondary {
  stroke: var(--purple);
  opacity: 0.9;
}

.chart-y {
  position: absolute;
  left: -31px;
  color: #4e5d71;
  font-size: 7px;
}
.chart-y.y1 {
  top: 2px;
}
.chart-y.y2 {
  top: 39px;
}
.chart-y.y3 {
  top: 76px;
}
.chart-y.y4 {
  top: 113px;
}

.chart-months {
  display: flex;
  justify-content: space-between;
  color: #4f5e72;
  font-size: 7px;
}

.overview-mix-panel {
  background: linear-gradient(
    145deg,
    rgba(24, 32, 55, 0.94),
    rgba(36, 29, 64, 0.86)
  );
}

.model-mix-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 12px 10px;
}

.model-donut {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--cyan) 0 var(--mix-a),
    var(--blue) var(--mix-a) var(--mix-b),
    var(--purple) var(--mix-b) 100%
  );
  box-shadow: 0 0 28px rgba(83, 229, 202, 0.08);
}

.model-donut > div {
  width: 68px;
  height: 68px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: #182038;
}

.model-donut strong,
.model-donut span,
.model-mix-top strong,
.model-mix-top span,
.model-mix-top small {
  display: block;
}

.model-donut strong {
  font-size: 18px;
}
.model-donut span {
  margin-top: 2px;
  color: #718095;
  font-size: 7px;
}
.model-mix-top small {
  color: #77849a;
  font-size: 7px;
}
.model-mix-top strong {
  max-width: 92px;
  margin-top: 5px;
  color: #f1f5fa;
  font-size: 12px;
}
.model-mix-top span {
  margin-top: 3px;
  color: #78869a;
  font-size: 7px;
}

.model-mix-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 5px 16px 15px;
  list-style: none;
}

.model-mix-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 9px;
  align-items: center;
  color: #7f8da1;
  font-size: 8px;
}

.model-mix-list li span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

.model-mix-list .mix-1 span::before {
  background: var(--blue);
}
.model-mix-list .mix-2 span::before {
  background: var(--purple);
}
.model-mix-list b {
  color: #dce5ee;
  font-size: 8px;
}
.model-mix-list em {
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #b5c0cd;
  font-size: 7px;
  font-style: normal;
}

.overview-bottom-grid {
  min-height: 210px;
}

.overview-table {
  padding: 10px 16px 12px;
}

.overview-table-head,
.overview-table-row {
  display: grid;
  grid-template-columns: 1.7fr 0.75fr 0.6fr 1.1fr 0.85fr;
  gap: 8px;
  align-items: center;
}

.overview-table-head {
  padding: 6px 5px;
  color: #526176;
  font-size: 7px;
  text-transform: uppercase;
}

.overview-table-row {
  width: 100%;
  padding: 7px 5px;
  border: 0;
  border-top: 1px solid rgba(126, 149, 179, 0.08);
  background: transparent;
  color: #8190a3;
  text-align: left;
  font-size: 8px;
  cursor: pointer;
}

.overview-table-row:hover {
  background: rgba(255, 255, 255, 0.025);
}
.overview-table-row:disabled {
  cursor: default;
}
.overview-table-row > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.overview-table-row span > i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: #273246;
  color: #d8e1eb;
  font-size: 7px;
  font-style: normal;
}
.overview-table-row span > b {
  overflow: hidden;
  color: #dbe5ed;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview-table-row em {
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 7px;
  font-style: normal;
  white-space: nowrap;
}
.overview-table-row em.complete {
  background: rgba(83, 229, 202, 0.12);
  color: #78dbc8;
}
.overview-table-row em.progress {
  background: rgba(243, 202, 106, 0.12);
  color: #e8c878;
}

.activity-list {
  display: grid;
  padding: 10px 16px;
}

.activity-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid rgba(126, 149, 179, 0.08);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.activity-list > button:hover,
.activity-list > button:focus-visible {
  background: rgba(255, 255, 255, 0.025);
  outline: none;
}

.activity-list > button > i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(83, 229, 202, 0.1);
  color: var(--cyan);
  font-size: 9px;
  font-style: normal;
}
.activity-list > button > i.activity-1 {
  background: rgba(90, 168, 255, 0.1);
  color: var(--blue);
}
.activity-list > button > i.activity-2 {
  background: rgba(150, 118, 255, 0.1);
  color: var(--purple);
}
.activity-list > button > i.activity-3 {
  background: rgba(255, 111, 159, 0.1);
  color: var(--rose);
}
.activity-list span strong,
.activity-list span small {
  display: block;
}
.activity-list span strong {
  color: #dce5ed;
  font-size: 8px;
  font-weight: 600;
}
.activity-list span small {
  margin-top: 2px;
  color: #607085;
  font-size: 7px;
}
.activity-list time {
  color: #526176;
  font-size: 7px;
}
.overview-activity-panel footer {
  padding: 0 16px 13px;
  color: #526176;
  font-size: 7px;
}
.overview-activity-panel footer i {
  color: var(--cyan);
  font-style: normal;
}
.overview-empty {
  color: var(--muted);
  font-size: 9px;
}

/* Login follows the same dark liquid-glass language as the application shell. */
.login-experience {
  background:
    radial-gradient(
      circle at 18% 24%,
      rgba(45, 212, 191, 0.16),
      transparent 31%
    ),
    radial-gradient(
      circle at 78% 72%,
      rgba(124, 92, 255, 0.18),
      transparent 34%
    ),
    linear-gradient(145deg, #06101d 0%, #091525 55%, #0d1829 100%);
  color: #f1f7fa;
}

.login-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(112, 143, 163, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 143, 163, 0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to right, #000, transparent 72%);
  pointer-events: none;
}

.login-orb-one {
  top: -15%;
  left: -8%;
  width: 42vw;
  height: 42vw;
  background: rgba(42, 209, 188, 0.12);
  filter: blur(22px);
}

.login-orb-two {
  right: 15%;
  bottom: -24%;
  width: 46vw;
  height: 46vw;
  background: rgba(126, 92, 255, 0.13);
  filter: blur(28px);
}

.login-brand {
  top: 32px;
  right: auto;
  left: 42px;
  transform: none;
}

.login-brand-logo {
  width: auto;
  height: 42px;
  max-width: 170px;
  filter: brightness(0) invert(1) opacity(0.9);
  transform: none;
}

.login-glass-card {
  right: 8vw;
  border-color: rgba(118, 151, 174, 0.2);
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(17, 31, 49, 0.92),
    rgba(9, 20, 35, 0.88)
  );
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(26px) saturate(130%);
}

.login-kicker {
  color: var(--cyan);
}

.login-glass-card h1 {
  color: #f4f8fb;
}

.login-glass-card h1 em {
  color: #8ee5d6;
}

.login-lead,
.login-form label > span,
.login-local,
.login-footnote {
  color: #93a4b7;
}

.login-form input {
  border-color: rgba(112, 143, 163, 0.22);
  background: rgba(5, 14, 26, 0.72);
  color: #eef7f6;
}

.login-form input:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(83, 229, 202, 0.12);
}

.login-form .login-recovery-toggle {
  justify-self: start;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #8ee5d6;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.login-form .login-recovery-toggle:hover,
.login-form .login-recovery-toggle:focus-visible {
  color: #c9fff5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  border: 1px solid rgba(112, 143, 163, 0.3);
  border-radius: 12px;
  background: rgba(5, 14, 26, 0.48);
  color: #eaf3f5;
  font:
    600 12px Inter,
    "Segoe UI",
    sans-serif;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.login-google:hover:not(:disabled) {
  border-color: rgba(83, 229, 202, 0.62);
  background: rgba(13, 31, 49, 0.82);
  transform: translateY(-1px);
}

.login-google:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.google-mark {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.login-auth-switch {
  margin: 14px 0 6px;
  color: #93a4b7;
  font-size: 11px;
  text-align: center;
}

.login-register {
  padding: 0;
  border: 0;
  background: none;
  color: #8ee5d6;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  text-decoration: none;
}

.login-register:hover,
.login-register:focus-visible {
  color: #c9fff5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.signup-only[hidden] {
  display: none;
}

.login-experience.signup-mode .login-glass-card {
  position: fixed;
  top: 50%;
  bottom: auto;
  width: min(520px, calc(100vw - 40px));
  max-height: calc(100vh - 32px);
  padding: 26px 30px;
  overflow-y: auto;
  transform: translateY(-50%);
}

.login-experience.signup-mode .login-glass-card h1 {
  margin-bottom: 8px;
  font-size: 30px;
}

.login-experience.signup-mode .login-lead {
  margin-bottom: 14px;
}

.login-experience.signup-mode .login-divider {
  margin: 10px 0;
}

.login-experience.signup-mode .login-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.login-experience.signup-mode .login-error,
.login-experience.signup-mode .water-login-button {
  grid-column: 1 / -1;
}

.login-experience.signup-mode .login-auth-switch {
  margin-top: 10px;
}

@media (max-width: 700px) {
  .login-experience.signup-mode .login-glass-card {
    top: 72px;
    bottom: 18px;
    overflow-y: auto;
    transform: none;
  }

  .login-experience.signup-mode .login-form {
    grid-template-columns: 1fr;
  }
}

.water-login-button {
  border-color: rgba(124, 92, 255, 0.48);
  background: linear-gradient(115deg, #6652ed, #8a62ff);
  box-shadow:
    0 13px 30px rgba(98, 76, 227, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.28);
}

.water-login-button:hover {
  box-shadow:
    0 18px 38px rgba(98, 76, 227, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.36);
}

.login-divider {
  color: #617388;
}

.login-divider::before,
.login-divider::after {
  background: rgba(112, 143, 163, 0.18);
}

.login-local:hover {
  color: #d7f4ef;
}

@media (max-width: 700px) {
  .login-brand {
    top: 24px;
    left: 24px;
  }

  .login-glass-card {
    right: 20px;
  }
}

body.dark-mode,
body.dark-mode .toolbar,
body.dark-mode .navigation,
body.dark-mode .canvas {
  background-color: transparent !important;
}

body.dark-mode .toolbar {
  background: rgba(7, 15, 27, 0.82) !important;
}
body.dark-mode .navigation {
  background: linear-gradient(
    160deg,
    rgba(8, 17, 31, 0.98),
    rgba(4, 10, 21, 0.99)
  ) !important;
}
body.dark-mode .canvas {
  background: rgba(6, 13, 24, 0.78) !important;
}
body.dark-mode .nav-item.active,
body.dark-mode .navigation .pd-nav.active {
  background: linear-gradient(
    135deg,
    rgba(38, 181, 171, 0.26),
    rgba(42, 104, 128, 0.18)
  ) !important;
  color: #e9fffb !important;
}

@media (max-width: 1050px) {
  .main,
  .main.workspace-open {
    grid-template-columns: 205px minmax(0, 1fr);
  }
  .overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .overview-analytics-grid,
  .overview-bottom-grid {
    grid-template-columns: 1fr;
  }
  .overview-search {
    display: none;
  }
}

@media (max-width: 700px) {
  .toolbar {
    width: calc(100% - 12px);
    margin: 6px 6px 0;
    overflow-x: auto;
    border-radius: 13px;
  }
  .brand {
    margin-right: 5px;
  }
  .main,
  .main.workspace-open {
    height: calc(100vh - 62px);
    grid-template-columns: 0 minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
  }
  .main:not(.nav-collapsed) .navigation {
    width: 216px;
    border-radius: 15px;
  }
  .canvas {
    border-radius: 15px;
  }
  .canvas-inner {
    padding: 13px;
  }
  .overview-header {
    align-items: flex-start;
  }
  .overview-header h1 {
    font-size: 20px;
  }
  .overview-header-actions .overview-icon-btn {
    display: none;
  }
  .overview-create-btn {
    padding: 0 10px;
  }
  .overview-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .overview-table-head,
  .overview-table-row {
    grid-template-columns: 1.5fr 0.55fr 0.55fr 0.85fr;
  }
  .overview-table-head span:nth-child(4),
  .overview-table-row > span:nth-child(4) {
    display: none;
  }
}

/* Final dark-glass consistency pass. */
.toolbar {
  z-index: 1000;
  overflow: visible;
}

.main {
  z-index: 1;
}

.toolbar .dropdown {
  position: relative;
  z-index: 1100;
}

.toolbar .dropdown.open {
  z-index: 1300;
}

.toolbar .dropdown-menu {
  top: calc(100% + 8px);
  z-index: 1400 !important;
  min-width: 205px;
  overflow: visible;
  border: 1px solid rgba(150, 179, 211, 0.28) !important;
  border-radius: 12px;
  background: #101c2c !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.62) !important;
}

.navigation {
  padding-left: 14px;
}

.navigation .nav-item,
.navigation .nav-group summary,
.navigation .nav-project-item,
.navigation .pd-nav,
.navigation .nav-account {
  font-size: 12px !important;
}

.navigation .nav-group summary {
  font-size: 12px !important;
  letter-spacing: 0.035em;
}

.canvas,
.canvas
  :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    label,
    small,
    th,
    td,
    dt,
    dd,
    legend,
    li,
    strong,
    b
  ),
.navigation :where(button, summary, span, div),
.toolbar .dropdown-menu :where(button, a) {
  color: #e9fffb !important;
}

.canvas :where(input, select, textarea, button) {
  color: #e9fffb !important;
}

.canvas :where(input, textarea)::placeholder {
  color: #e9fffb !important;
  opacity: 0.58;
}

.canvas
  :where(
    .page-description,
    .card-subtitle,
    .section-description,
    .workspace-system,
    .data-meta,
    .model-io,
    .project-breadcrumb
  ) {
  color: #e9fffb !important;
  opacity: 0.82;
}

.model-composition-form {
  gap: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.model-composition-form .composition-section {
  padding: 18px !important;
  border: 1px solid rgba(139, 169, 203, 0.22) !important;
  border-radius: 15px !important;
  background: linear-gradient(
    145deg,
    rgba(19, 31, 48, 0.9),
    rgba(11, 20, 34, 0.9)
  ) !important;
  box-shadow: 0 15px 36px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(18px);
}

.model-composition-form .composition-section:hover {
  border-color: rgba(83, 229, 202, 0.27) !important;
  background: linear-gradient(
    145deg,
    rgba(23, 38, 57, 0.94),
    rgba(13, 24, 39, 0.94)
  ) !important;
}

.model-composition-form .composition-section h3,
.model-composition-form .composition-section p,
.model-composition-form .composition-section label,
.model-composition-form .composition-section th,
.model-composition-form .composition-section td {
  color: #e9fffb !important;
}

.model-composition-form .composition-section h3 {
  font-size: 15px;
  letter-spacing: -0.01em;
}

.model-composition-form .composition-section p {
  opacity: 0.78;
}

.model-composition-form input,
.model-composition-form select,
.model-composition-form textarea,
.model-composition-form .source-editor {
  border: 1px solid rgba(140, 168, 200, 0.24) !important;
  border-radius: 10px !important;
  background: rgba(5, 13, 25, 0.76) !important;
  color: #e9fffb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.model-composition-form input:focus,
.model-composition-form select:focus,
.model-composition-form textarea:focus {
  outline: 0;
  border-color: rgba(83, 229, 202, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(83, 229, 202, 0.09);
}

.model-composition-form .parameter-definition-table,
.model-composition-form .parameter-definition-table thead,
.model-composition-form .parameter-definition-table tbody,
.model-composition-form .parameter-definition-table tr,
.model-composition-form .parameter-definition-table th,
.model-composition-form .parameter-definition-table td {
  border-color: rgba(139, 169, 203, 0.15) !important;
  background: transparent !important;
}

.model-composition-form .math-definition-subsection + .math-definition-subsection {
  border-color: rgba(139, 169, 203, 0.15) !important;
}

.model-composition-form .implementation-mode label {
  border-color: rgba(140, 168, 200, 0.24) !important;
  background: rgba(5, 13, 25, 0.52);
}

.canvas:has(.projects-dashboard) {
  overflow: auto !important;
}

.canvas-inner:has(.projects-dashboard),
.projects-dashboard {
  height: auto !important;
  min-height: 100%;
}

.projects-dashboard .pd-card {
  min-height: 500px;
  border-color: rgba(139, 169, 203, 0.2) !important;
  background: linear-gradient(
    145deg,
    rgba(19, 31, 48, 0.92),
    rgba(11, 20, 34, 0.92)
  ) !important;
}

.projects-dashboard .pd-card select {
  border-color: rgba(139, 169, 203, 0.22) !important;
  background: rgba(5, 13, 25, 0.72) !important;
  color: #e9fffb !important;
}

.projects-dashboard .pd-card option {
  background: #101c2c !important;
  color: #e9fffb !important;
}

.projects-dashboard .pd-findings {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  overflow: hidden !important;
  border: 1px solid rgba(139, 169, 203, 0.2) !important;
  border-radius: 12px;
  background: rgba(6, 15, 28, 0.72) !important;
  color: #e9fffb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.projects-dashboard .pd-findings > p {
  margin: 12px 0 8px;
  color: #e9fffb !important;
  font-size: 14px;
}

.projects-dashboard .pd-findings > strong {
  color: #e9fffb !important;
}

.projects-dashboard .pd-findings .pd-label {
  color: #53e5ca !important;
}

.projects-dashboard .pd-pager {
  width: 100%;
  min-height: 30px;
  flex: none;
  margin-top: auto;
  padding-top: 12px;
  color: #e9fffb !important;
}

.projects-dashboard .pd-pager button {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-color: rgba(139, 169, 203, 0.23) !important;
  background: rgba(20, 33, 51, 0.84) !important;
  color: #e9fffb !important;
}

.projects-dashboard .pd-pager button:disabled {
  opacity: 0.35;
}

.projects-dashboard
  :where(
    .pd-dates,
    .pd-dates b,
    .pd-stats span,
    .pd-completion,
    .pd-subtitle,
    .pd-label
  ) {
  color: #e9fffb !important;
}

.toolbar :where(button, span, a),
.toolbar .dropdown > button {
  color: #e9fffb !important;
}

.canvas-inner
  :where(
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "],
    [class$="-section"],
    [class*="-section "]
  ) {
  border-color: rgba(139, 169, 203, 0.2) !important;
  background-color: #0d172600 !important;
  color: #e9fffb !important;
}

.overview-header h1 span,
.projects-dashboard .pd-findings .pd-label,
.overview-activity-panel footer i {
  color: #53e5ca !important;
}

.metric-teal .metric-bars {
  color: var(--cyan) !important;
}
.metric-blue .metric-bars {
  color: var(--blue) !important;
}
.metric-purple .metric-bars {
  color: var(--purple) !important;
}
.metric-rose .metric-bars {
  color: var(--rose) !important;
}

/* Preserve the original semantic runtime badge palette. */
.canvas .model-runtime-badges span {
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff !important;
}

.canvas .model-audit-badge.verified {
  border-color: #bbf7d0 !important;
  background: #4974e1bf !important;
  color: #ffffff !important;
}

.canvas .model-audit-badge.experimental {
  border-color: #fde68a !important;
  background: #473a06 !important;
  color: #ffffff !important;
}

.canvas .model-audit-badge.custom {
  border-color: #c7d2fe !important;
  background: #e7873f !important;
  color: #4338ca !important;
}

.canvas .model-audit-badge.deprecated {
  border-color: #fecaca !important;
  background: #fef2f2 !important;
  color: #991b1b !important;
}

.canvas .model-runtime-badge {
  border-color: #bfdbfe !important;
  background: #0a377196 !important;
  color: #ffffff !important;
}

.workspace-file-name,
.workspace-file-meta,
.workspace-file-updated {
  color: #e9fffb !important;
}

.breadcrumb-home,
.canvas .breadcrumb-home {
  color: #2563eb !important;
}

.breadcrumb-home:hover,
.canvas .breadcrumb-home:hover {
  color: #60a5fa !important;
}

.workspace-model-flow,
.model-formula.workspace-model-flow {
  border: 1px solid rgba(139, 169, 203, 0.2) !important;
  border-radius: 10px !important;
  background: rgba(6, 15, 28, 0.76) !important;
  color: #e9fffb !important;
}

.workspace-model-flow code,
.workspace-model-flow span {
  background: transparent !important;
  color: #e9fffb !important;
}

.model-library-system-header,
.workspace-library-system-group > .model-library-system-header {
  border-bottom-color: rgba(139, 169, 203, 0.26) !important;
  color: #e9fffb !important;
}

.model-library-system-header::after {
  color: #e9fffb !important;
}

.calculation-trace-panel {
  border-color: var(--line-strong) !important;
  background: rgba(6, 14, 26, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  color: var(--text) !important;
}

.calculation-trace-header {
  border-color: var(--line) !important;
  background: linear-gradient(
    135deg,
    rgba(17, 29, 46, 0.94),
    rgba(8, 19, 34, 0.94)
  ) !important;
  color: var(--text) !important;
}

.calculation-trace-header small {
  color: var(--cyan) !important;
}

.calculation-trace-header strong {
  color: var(--text) !important;
}

#calculationTraceStatus {
  border: 1px solid var(--line-strong) !important;
  background: rgba(120, 135, 155, 0.12) !important;
  color: #b7c3d2 !important;
}

#calculationTraceStatus.running {
  border-color: rgba(90, 168, 255, 0.3) !important;
  background: rgba(90, 168, 255, 0.12) !important;
  color: #9dcbff !important;
}

#calculationTraceStatus.success {
  border-color: rgba(83, 229, 202, 0.3) !important;
  background: var(--cyan-soft) !important;
  color: #8cf3df !important;
}

#calculationTraceStatus.error {
  border-color: rgba(255, 111, 159, 0.3) !important;
  background: rgba(255, 111, 159, 0.12) !important;
  color: #ffabc7 !important;
}

.calculation-trace-body {
  border-color: var(--line) !important;
  background: rgba(5, 12, 23, 0.74) !important;
  color: #c9d5e4 !important;
}

.trace-empty {
  color: var(--muted) !important;
}

.calculation-trace-message {
  border: 1px solid var(--line) !important;
  background: rgba(18, 30, 47, 0.78) !important;
  color: #aebccd !important;
}

.calculation-trace-message.start,
.calculation-trace-message.model {
  border-color: rgba(90, 168, 255, 0.2) !important;
  background: rgba(90, 168, 255, 0.08) !important;
  color: #d8e8fa !important;
}

.calculation-trace-message.success {
  border-color: rgba(83, 229, 202, 0.22) !important;
  background: rgba(83, 229, 202, 0.08) !important;
  color: #86ead7 !important;
}

.calculation-trace-message.warning {
  border-color: rgba(243, 202, 106, 0.24) !important;
  background: rgba(243, 202, 106, 0.09) !important;
  color: #f4d58d !important;
}

.calculation-trace-message.error {
  border-color: rgba(255, 111, 159, 0.24) !important;
  background: rgba(255, 111, 159, 0.09) !important;
  color: #ffabc7 !important;
}

.calculation-trace-model {
  border-color: var(--line-strong) !important;
  background: rgba(9, 19, 33, 0.92) !important;
}

.calculation-trace-model > summary {
  background: rgba(11, 23, 39, 0.92) !important;
  color: var(--text) !important;
  transition: background 0.18s ease;
}

.calculation-trace-model > summary:hover {
  background: var(--panel-hover) !important;
}

.trace-model-status.success {
  background: rgba(83, 229, 202, 0.15) !important;
  color: #8cf3df !important;
}

.trace-model-heading strong {
  color: var(--text) !important;
}

.trace-model-heading small,
.trace-step-count {
  color: #91a1b5 !important;
}

.calculation-trace-model-body {
  border-color: var(--line) !important;
  background: rgba(7, 16, 29, 0.82) !important;
  color: #c9d5e4 !important;
}

.trace-section {
  color: #c9d5e4 !important;
}

.trace-label {
  color: #94a8bf !important;
}

.trace-main-formula,
.trace-formula,
.trace-substitution {
  border: 1px solid rgba(83, 229, 202, 0.16) !important;
  background: rgba(83, 229, 202, 0.065) !important;
  color: #d9fff7 !important;
}

.trace-json {
  border: 1px solid var(--line) !important;
  background: rgba(3, 9, 18, 0.9) !important;
  color: #c6dcf5 !important;
}

.trace-summary-grid > div {
  border-color: var(--line) !important;
  background: rgba(17, 29, 46, 0.72) !important;
}

.trace-summary-grid span {
  color: #91a1b5 !important;
}

.trace-summary-grid strong {
  color: var(--text) !important;
}

.trace-step-number {
  background: rgba(150, 118, 255, 0.16) !important;
  color: #c2b2ff !important;
}

.trace-step-content,
.trace-result {
  color: #b8c6d7 !important;
}

.trace-step-content strong {
  color: #edf4fc !important;
}

.trace-result strong {
  color: #8cf3df !important;
}

.trace-engine-note {
  border-left-color: var(--blue) !important;
  background: rgba(90, 168, 255, 0.08) !important;
  color: #aebed1 !important;
}

.trace-warning-section {
  border-color: rgba(243, 202, 106, 0.25) !important;
  background: rgba(243, 202, 106, 0.075) !important;
}

.trace-warning-section ul {
  color: #ead39b !important;
}

#section-visualization > .card,
#section-data > .card,
.visual-tabs,
#visual-chart,
#visual-map,
#visual-table,
.data-list,
.result-interpretation,
.chart-controls,
.chart-stage,
.map-stage,
.table-stage {
  border-color: rgba(139, 169, 203, 0.2) !important;
  background: rgba(7, 16, 29, 0.82) !important;
  color: #e9fffb !important;
}

.visual-tabs :where(button, select, label, span),
#section-data :where(button, label, span),
#section-visualization :where(button, label, span) {
  color: #e9fffb !important;
}

.visual-tabs .visual-tab,
.visual-tabs select,
#chart-type,
#downloadWorkspaceXlsxBtn,
#downloadPngBtn,
.data-toolbar button {
  border-color: rgba(139, 169, 203, 0.22) !important;
  background: rgba(18, 31, 49, 0.92) !important;
  color: #e9fffb !important;
}

.visual-tabs .visual-tab.active,
.data-toolbar .primary-btn {
  border-color: rgba(153, 128, 255, 0.44) !important;
  background: linear-gradient(135deg, #6657ef, #8b64ff) !important;
  color: #fff !important;
}

.data-list > *,
#visual-chart > *,
#visual-map > *,
#visual-table > * {
  border-color: rgba(139, 169, 203, 0.17) !important;
  background-color: rgba(10, 20, 34, 0.88) !important;
  color: #e9fffb !important;
}

.workspace-file,
.workspace-file-list,
.workspace-file-actions,
.manage-wrapper {
  overflow: visible !important;
}

.workspace-file {
  position: relative;
  z-index: 1;
}

.workspace-file:has(.manage-menu.show) {
  z-index: 1200 !important;
}

.workspace-file .manage-wrapper:has(.manage-menu.show) {
  z-index: 1300 !important;
}

.workspace-file .manage-menu.show {
  display: grid !important;
  z-index: 1400 !important;
  min-width: 190px;
  padding: 7px !important;
  border: 1px solid rgba(139, 169, 203, 0.3) !important;
  border-radius: 11px !important;
  background: #101c2c !important;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.62) !important;
}

.workspace-file .manage-menu.show button {
  position: relative;
  z-index: 1;
  display: block !important;
  min-height: 34px;
  background: transparent !important;
  color: #e9fffb !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.workspace-file .manage-menu.show button:hover {
  background: rgba(83, 229, 202, 0.09) !important;
}

.workspace-file .manage-menu.show button.danger {
  color: #ff8fac !important;
}

/* =========================================================
   SCREENSHOT-SPECIFIC CONTRAST FIXES
   Scope intentionally limited to the affected Project/Data/
   Visualization surfaces shown in the supplied screenshots.
   ========================================================= */

/* Project > Manage dropdown: keep menu options readable on the dark UI. */
.project-manage button {
  border-color: rgba(139, 169, 203, 0.24) !important;
  background: #101c2c !important;
  color: #e9fffb !important;
}

.project-manage button:hover,
.project-manage button:focus-visible {
  border-color: rgba(139, 169, 203, 0.34) !important;
  background: #1a2a3d !important;
  color: #ffffff !important;
}

.project-manage button[data-op="delete"] {
  color: #ff8fac !important;
}

.project-outline-section {
  border-color: var(--line) !important;
  background: linear-gradient(
    145deg,
    var(--panel),
    var(--panel-soft)
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.project-outline-section-number {
  background: var(--cyan-soft) !important;
  color: var(--cyan) !important;
}

.project-outline-section-content h2,
.project-outline-label {
  color: var(--text) !important;
}

.project-outline-form input,
.project-outline-form textarea {
  border-color: var(--line-strong) !important;
  background: rgba(7, 16, 29, 0.84) !important;
  color: var(--text) !important;
}

.project-outline-form input:focus,
.project-outline-form textarea:focus {
  border-color: rgba(83, 229, 202, 0.6) !important;
  outline: 2px solid rgba(83, 229, 202, 0.13);
}

.project-outline-counter {
  border-color: var(--line-strong) !important;
  background: rgba(7, 16, 29, 0.7);
  color: var(--muted) !important;
}

.project-outline-counter.limit-reached {
  border-color: rgba(243, 202, 106, 0.55) !important;
  color: var(--yellow) !important;
}

/* Data Model: schema-driven input card and its nested light legacy surfaces. */
#section-data .adaptive-model-input,
#section-data .input-source,
#section-data .model-output-preview,
#section-data .model-parameter-table,
#section-data .model-series-editor,
#section-data .series-editor-head {
  border-color: rgba(139, 169, 203, 0.2) !important;
  background: rgba(10, 20, 34, 0.92) !important;
  color: #e9fffb !important;
}

#section-data .adaptive-head h3,
#section-data .adaptive-head small,
#section-data .adaptive-head p,
#section-data .input-source span,
#section-data .adaptive-fields label > span,
#section-data .mapping-row > span,
#section-data .model-parameter-table th,
#section-data .model-parameter-table td,
#section-data .series-editor-head strong,
#section-data .series-editor-head small,
#section-data #model-input-message {
  color: #e9fffb !important;
}

#section-data .adaptive-head p,
#section-data .series-editor-head small,
#section-data #model-input-message {
  opacity: 0.78;
}

#section-data .model-parameter-table thead th,
#section-data .model-parameter-table tbody th,
#section-data .model-output-preview-header {
  border-color: rgba(139, 169, 203, 0.18) !important;
  background: rgba(18, 31, 49, 0.94) !important;
  color: #e9fffb !important;
}

#section-data .input-source select,
#section-data .adaptive-fields input,
#section-data .adaptive-fields select,
#section-data .mapping-row select,
#section-data .model-parameter-table input,
#section-data .model-parameter-table select {
  border-color: rgba(139, 169, 203, 0.22) !important;
  background: rgba(8, 16, 29, 0.88) !important;
  color: #e9fffb !important;
}

/* Keep semantic status badges intentionally light and readable. */
#section-data .input-state.ready,
#section-data .model-input-badge.ready {
  background: #dcfce7 !important;
  color: #166534 !important;
}

#section-data .input-state.missing,
#section-data .model-input-badge.missing {
  background: #fff7ed !important;
  color: #9a3412 !important;
}

/* Visualization table: remove white legacy table cells in the glass theme. */
#section-visualization .embedded-sheet,
#section-visualization .embedded-sheet thead,
#section-visualization .embedded-sheet tbody,
#section-visualization .embedded-sheet tr,
#section-visualization .embedded-sheet th,
#section-visualization .embedded-sheet td {
  border-color: rgba(139, 169, 203, 0.2) !important;
  background: rgba(10, 20, 34, 0.94) !important;
  color: #e9fffb !important;
}

#section-visualization .embedded-sheet th {
  background: rgba(18, 31, 49, 0.98) !important;
}

#section-visualization .embedded-sheet tbody tr:nth-child(even),
#section-visualization .embedded-sheet tbody tr:nth-child(even) td {
  background: rgba(13, 24, 40, 0.94) !important;
}

/* Preserve the anomaly highlight instead of turning warning cells dark. */
#section-visualization .embedded-sheet td.result-cell-warning,
#section-visualization
  .embedded-sheet
  tbody
  tr:nth-child(even)
  td.result-cell-warning {
  background: #fef3c7 !important;
  color: #78350f !important;
}

#section-visualization .embedded-sheet td.result-cell-warning:hover,
#section-visualization .embedded-sheet td.result-cell-warning:focus {
  background: #fde68a !important;
  color: #78350f !important;
}

/* Result Interpretation: values were inheriting legacy dark text on dark cards. */
#section-visualization .result-interpretation .interpret-section-head,
#section-visualization .result-interpretation .interpret-phrase,
#section-visualization .result-interpretation .interpret-value {
  color: #e9fffb !important;
}

#section-visualization .result-interpretation .interpret-section-head,
#section-visualization .result-interpretation .interpret-phrase {
  opacity: 0.72;
}

/* Keep interpretation cards dark even when body.dark-mode is not the active switch. */
#section-visualization .interpret-card.insight {
  border-color: #315a91 !important;
  background: #17243a !important;
}

#section-visualization .interpret-card.pattern {
  border-color: #28704d !important;
  background: #152a23 !important;
}

#section-visualization .interpret-card.warning {
  border-color: #8a691c !important;
  background: #2e2817 !important;
}

/* Integrate result panel: replace the remaining white legacy panel. */
#section-visualization #result-integrate,
#result-integrate {
  border: 1px solid rgba(139, 169, 203, 0.2) !important;
  background: rgba(10, 20, 34, 0.92) !important;
  color: #e9fffb !important;
}

#result-integrate h3,
#result-integrate p,
#result-integrate label,
#result-integrate span,
#result-integrate small {
  color: #e9fffb !important;
}

#result-integrate p,
#result-integrate small {
  opacity: 0.78;
}

/* =========================================================
   SCREENSHOT-SPECIFIC CONTRAST FIXES — V2
   Additional overrides only for the remaining light surfaces
   visible in Model Data tables and Data Visualization.
   ========================================================= */

/* Model Data series editor: table body, headers and cells. */
#section-data .model-series-editor,
#section-data .model-input-table,
#section-data .model-input-table thead,
#section-data .model-input-table tbody,
#section-data .model-input-table tr,
#section-data .model-input-table th,
#section-data .model-input-table td {
  border-color: rgba(139, 169, 203, 0.2) !important;
  background: rgba(10, 20, 34, 0.94) !important;
  color: #e9fffb !important;
}

#section-data .model-input-table thead th {
  background: rgba(18, 31, 49, 0.98) !important;
  color: #e9fffb !important;
}

#section-data .model-input-table tbody tr:nth-child(even),
#section-data .model-input-table tbody tr:nth-child(even) td {
  background: rgba(13, 24, 40, 0.94) !important;
}

/* Inputs inside the model data grid must stay dark as well. */
#section-data .model-input-table input,
#section-data .model-input-table select,
#section-data .model-input-table textarea,
#section-data .data-cell-input {
  border-color: rgba(139, 169, 203, 0.22) !important;
  background: rgba(8, 16, 29, 0.9) !important;
  color: #e9fffb !important;
}

#section-data .model-input-table .data-cell-input.active-grid-cell {
  background: rgba(25, 49, 79, 0.95) !important;
}

/* Data Visualization block inside each model data editor. */
#section-data .model-series-data-preview,
#section-data .model-series-chart-body,
#section-data .model-series-chart-settings,
#section-data .data-preview-section,
#section-data .data-editor-chart-surface,
#section-data .chart-surface,
#section-data .chart-axis-settings,
#section-data .chart-plot {
  border-color: rgba(139, 169, 203, 0.2) !important;
  background: rgba(7, 16, 29, 0.88) !important;
  color: #e9fffb !important;
}

#section-data .model-series-data-preview > summary {
  border-color: rgba(139, 169, 203, 0.2) !important;
  background: rgba(18, 31, 49, 0.96) !important;
  color: #e9fffb !important;
}

#section-data .model-series-data-preview > summary::before {
  color: #9fb3c9 !important;
}

#section-data .chart-heading h3,
#section-data .chart-eyebrow,
#section-data .chart-legend,
#section-data .chart-axis-settings > label > span,
#section-data .chart-axis-settings legend,
#section-data .chart-y-scale label,
#section-data .data-preview-heading h3 {
  color: #e9fffb !important;
}

#section-data .chart-eyebrow,
#section-data .chart-legend,
#section-data .chart-y-scale label {
  opacity: 0.78;
}

#section-data .chart-axis-settings select,
#section-data .chart-y-scale input,
#section-data .chart-series-options label,
#section-data .model-series-chart-settings select,
#section-data .model-series-chart-settings input {
  border-color: rgba(139, 169, 203, 0.22) !important;
  background: rgba(18, 31, 49, 0.94) !important;
  color: #e9fffb !important;
}

#section-data .chart-series-options label:has(input:checked) {
  border-color: rgba(83, 229, 202, 0.42) !important;
  background: rgba(83, 229, 202, 0.12) !important;
  color: #bff9ee !important;
}

/* Canvas is transparent in the editor; this removes the remaining white panel. */
#section-data .model-series-chart-body canvas,
#section-data .data-editor-chart-surface .chart-plot canvas,
#section-data .chart-plot canvas {
  border-color: rgba(139, 169, 203, 0.2) !important;
  background: rgba(7, 16, 29, 0.96) !important;
}

/* Formula-fill controls used by the same editor. */
#section-data .formula-fill-panel,
#section-data .model-fill-columns label {
  border-color: rgba(139, 169, 203, 0.2) !important;
  background: rgba(10, 20, 34, 0.92) !important;
  color: #e9fffb !important;
}

#section-data .model-fill-columns label:has(input:checked) {
  border-color: rgba(83, 229, 202, 0.42) !important;
  background: rgba(83, 229, 202, 0.12) !important;
  color: #bff9ee !important;
}

/* =========================================================
   DATA + RESULT CHART VISUAL STYLE — MATCH OVERVIEW
   Only chart appearance is changed. Data, axes, formulas,
   interaction and rendering logic remain untouched.
   ========================================================= */

/* Use the same dark glass chart surface as Overview. */
#section-data .model-series-chart-body .chart-plot,
#section-data .data-editor-chart-surface .chart-plot,
#section-data .chart-surface,
#section-visualization .chart-surface,
#section-visualization #visual-chart,
#section-visualization .chart-stage,
#section-visualization .chart-plot {
  border-color: rgba(135, 158, 190, 0.18) !important;
  background: linear-gradient(
    145deg,
    rgba(18, 29, 45, 0.92),
    rgba(14, 22, 37, 0.9)
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

/*
 * The chart renderer already draws the axes/grid/series into canvas.
 * Keep its bitmap intact, but replace the old white CSS surface with
 * the Overview dark plotting surface.
 */
#section-data .model-series-chart-body canvas,
#section-data .data-editor-chart-surface canvas,
#section-data .chart-plot canvas,
#section-visualization .chart-plot canvas,
#section-visualization #result-chart,
#section-visualization #visual-chart canvas {
  border-color: rgba(135, 158, 190, 0.12) !important;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 54px,
      rgba(132, 155, 183, 0.075) 55px
    ),
    linear-gradient(145deg, rgba(18, 29, 45, 0.96), rgba(14, 22, 37, 0.96)) !important;

  /*
   * Existing renderer uses a blue primary series.
   * Rotate it to the same aqua/teal family used by Overview.
   * Neutral gray axis/grid text is effectively unchanged.
   */
  filter: hue-rotate(-52deg) saturate(0.78) brightness(1.02);
}

/* Dark, low-contrast plot frame like the Overview card. */
#section-data .model-series-chart-body canvas,
#section-data .data-editor-chart-surface canvas,
#section-data .chart-plot canvas {
  border: 1px solid rgba(135, 158, 190, 0.12) !important;
  border-radius: 10px !important;
}

/* Controls and labels around Data charts use the Overview text hierarchy. */
#section-data .model-series-data-preview > summary,
#section-data .chart-axis-settings > label > span,
#section-data .chart-axis-settings legend,
#section-data .chart-y-scale label,
#section-data .chart-legend,
#section-data .chart-eyebrow {
  color: #dce7ef !important;
}

#section-data .chart-legend,
#section-data .chart-eyebrow,
#section-data .chart-y-scale label {
  color: #76859a !important;
  opacity: 1;
}

/* Result chart wrapper follows the same Overview panel treatment. */
#section-visualization #visual-chart,
#section-visualization .chart-stage,
#section-visualization .chart-surface {
  overflow: hidden;
  border: 1px solid rgba(135, 158, 190, 0.18) !important;
  border-radius: 16px !important;
  background: linear-gradient(
    145deg,
    rgba(18, 29, 45, 0.92),
    rgba(14, 22, 37, 0.9)
  ) !important;
}

/* Result bars/HTML fallback use Overview aqua rather than legacy blue. */
#section-visualization .result-bars > div > span,
#visual-chart .result-bars > div > span {
  background: #53e5ca !important;
  box-shadow: 0 0 8px rgba(83, 229, 202, 0.2);
}

#section-visualization .result-bars small,
#visual-chart .result-bars small {
  color: #76859a !important;
}

/* =========================================================
   CANVAS CHART FINALIZATION — COLORS NOW RENDERED IN JS
   Keep only the dark glass frame; do not recolor canvas pixels.
   ========================================================= */

#section-data .model-series-chart-body canvas,
#section-data .data-editor-chart-surface canvas,
#section-data .chart-plot canvas,
#section-visualization .chart-plot canvas,
#section-visualization #result-chart,
#section-visualization #visual-chart canvas {
  filter: none !important;
  background: transparent !important;
}

/* =========================================================
   GLOBAL SELECT + DROPDOWN THEME
   Keep every native and enhanced picker aligned with the
   dark glass shell, including controls rendered dynamically.
   ========================================================= */

body select {
  color-scheme: dark !important;
  accent-color: var(--cyan);
}

body select option,
body select optgroup {
  background-color: #101c2c !important;
  color: #e9fffb !important;
}

body select option:checked {
  background: linear-gradient(
    90deg,
    rgba(83, 229, 202, 0.2),
    rgba(90, 168, 255, 0.14)
  ) !important;
  box-shadow: 0 0 0 100vmax rgba(31, 83, 91, 0.94) inset;
  color: #ffffff !important;
}

body select option:hover,
body select option:focus {
  background-color: #1a3545 !important;
  color: #ffffff !important;
}

body select option:disabled,
body select:disabled {
  color: #728196 !important;
  cursor: not-allowed;
}

body select:focus-visible {
  outline: 0;
  border-color: rgba(83, 229, 202, 0.58) !important;
  box-shadow: 0 0 0 3px rgba(83, 229, 202, 0.1) !important;
}

/* Chromium's customizable picker removes the operating-system blue/gray menu. */
@supports (appearance: base-select) {
  body select:not([multiple]),
  ::picker(select) {
    appearance: base-select;
  }

  body select:not([multiple]) {
    border-color: var(--line) !important;
    background-color: rgba(8, 16, 29, 0.94) !important;
    color: var(--text) !important;
  }

  body select:not([multiple])::picker-icon {
    color: #8fa2b8;
    transition:
      rotate 0.18s ease,
      color 0.18s ease;
  }

  body select:not([multiple]):open::picker-icon {
    rotate: 180deg;
    color: var(--cyan);
  }

  ::picker(select) {
    max-height: min(360px, 60vh);
    margin-top: 5px;
    padding: 5px;
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #101c2c;
    color: var(--text);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.62);
    scrollbar-color: #31475f #101c2c;
  }

  body select option {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 7px;
    background: transparent !important;
    color: #c8d5e4 !important;
  }

  body select option:hover,
  body select option:focus-visible {
    background: rgba(90, 168, 255, 0.1) !important;
    color: #ffffff !important;
  }

  body select option:checked {
    background: rgba(83, 229, 202, 0.14) !important;
    box-shadow: none;
    color: #c9fff4 !important;
  }

  body select option::checkmark {
    color: var(--cyan);
  }
}

.dropdown-menu :is(button, a):focus-visible,
.manage-menu :is(button, a):focus-visible {
  outline: 0;
  border-color: rgba(83, 229, 202, 0.38) !important;
  background: rgba(83, 229, 202, 0.1) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--cyan);
}

/* =========================================================
   SERVER ACCOUNT DIALOG
   Override the legacy light and inline presentation while
   retaining the existing Account/API behavior.
   ========================================================= */

.server-account-dialog {
  border: 1px solid var(--line-strong) !important;
  background: linear-gradient(
    145deg,
    rgba(18, 30, 47, 0.985),
    rgba(7, 15, 28, 0.99)
  ) !important;
  color: var(--text) !important;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  scrollbar-color: #31475f #091321;
}

.server-account-dialog::backdrop {
  background: rgba(2, 8, 18, 0.72) !important;
  backdrop-filter: blur(7px) saturate(80%);
}

.server-account-dialog h2 {
  margin-right: 52px;
  color: var(--text) !important;
  letter-spacing: -0.02em;
}

.server-account-dialog h3 {
  color: #dce8f5 !important;
}

.server-account-dialog p,
.server-account-dialog label {
  color: #aebed1 !important;
}

.server-account-dialog #account-error {
  color: #ff9fbd !important;
}

.server-account-dialog #account-error:not(:empty) {
  padding: 10px 12px;
  border: 1px solid rgba(255, 111, 159, 0.25);
  border-radius: 9px;
  background: rgba(255, 111, 159, 0.09);
}

.server-account-dialog input,
.server-account-dialog select {
  border-color: var(--line) !important;
  background-color: rgba(5, 13, 25, 0.84) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.server-account-dialog input::placeholder {
  color: #617187 !important;
}

.server-account-dialog input:focus-visible,
.server-account-dialog select:focus-visible {
  outline: 0;
  border-color: rgba(83, 229, 202, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(83, 229, 202, 0.1) !important;
}

.server-account-dialog button {
  border-color: var(--line) !important;
  background: rgba(20, 33, 51, 0.88) !important;
  color: #dbe7f4 !important;
}

.server-account-dialog button:hover,
.server-account-dialog button:focus-visible {
  outline: 0;
  border-color: rgba(83, 229, 202, 0.34) !important;
  background: rgba(83, 229, 202, 0.1) !important;
  color: #ffffff !important;
}

.server-account-dialog button[type="submit"] {
  border-color: rgba(153, 128, 255, 0.46) !important;
  background: linear-gradient(135deg, #6657ef, #8b64ff) !important;
  color: #ffffff !important;
  box-shadow: 0 9px 22px rgba(104, 79, 245, 0.24);
}

.server-account-dialog button[type="submit"]:hover {
  background: linear-gradient(135deg, #7869ff, #9d79ff) !important;
}

.server-account-dialog #account-close {
  border-color: var(--line-strong) !important;
  background: rgba(17, 29, 46, 0.94) !important;
  color: #aebed1 !important;
}

.server-account-dialog #account-close:hover,
.server-account-dialog #account-close:focus-visible {
  border-color: rgba(255, 111, 159, 0.32) !important;
  background: rgba(255, 111, 159, 0.1) !important;
  color: #ffabc7 !important;
}

.server-account-dialog #switch-auth,
.server-account-dialog #back-projects {
  color: #86ead7 !important;
}

.server-account-dialog table,
.server-account-dialog thead,
.server-account-dialog tbody,
.server-account-dialog tr,
.server-account-dialog th,
.server-account-dialog td {
  border-color: var(--line) !important;
  background: transparent !important;
  color: #c8d5e4 !important;
}

.server-account-dialog th {
  background: rgba(18, 31, 49, 0.94) !important;
  color: #eef6ff !important;
}

/* Account page: compact session action aligned with the dark glass system. */
.account-page-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-page-actions {
  display: flex;
  justify-content: flex-end;
}

.account-page-layout > .card {
  width: min(100%, 760px);
  margin: 0;
  border-color: var(--line) !important;
  background: linear-gradient(
    145deg,
    rgba(17, 30, 47, 0.94),
    rgba(7, 15, 27, 0.96)
  ) !important;
}

.account-card-kicker {
  margin: 0 0 8px;
  color: var(--cyan) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.account-page-layout h3 {
  margin: 0 0 10px;
  color: var(--text);
}

.account-page-layout .account-local-usage {
  margin: 14px 0 0;
  color: var(--muted);
}

.account-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 111, 159, 0.34) !important;
  background: rgba(255, 111, 159, 0.1) !important;
  color: #ffabc7 !important;
}

.account-logout-btn:hover,
.account-logout-btn:focus-visible {
  outline: 0;
  border-color: rgba(255, 111, 159, 0.58) !important;
  background: rgba(255, 111, 159, 0.17) !important;
  color: #ffd2e1 !important;
}

.account-logout-btn:disabled {
  cursor: wait;
  opacity: 0.68;
}

.logout-confirmation {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 111, 159, 0.22);
  border-radius: 12px;
  background: rgba(255, 111, 159, 0.07);
}

.logout-confirmation p {
  margin: 0;
  color: #dbe7f4 !important;
}

.logout-confirmation-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 111, 159, 0.13);
  color: #ffabc7;
}

/* Projects Dashboard selectors: rounded glass fields with a stable right icon. */
body .projects-dashboard .pd-card select.pd-project,
body .projects-dashboard .pd-card select.pd-result {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 12px !important;
  border: 1px solid rgba(139, 169, 203, 0.34) !important;
  border-radius: 11px !important;
  background: linear-gradient(
    135deg,
    rgba(13, 27, 44, 0.96),
    rgba(7, 17, 31, 0.96)
  ) !important;
  color: #e9fffb !important;
  line-height: 1.2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(0, 0, 0, 0.12);
}

body .projects-dashboard .pd-card select.pd-project:hover,
body .projects-dashboard .pd-card select.pd-result:hover,
body .projects-dashboard .pd-card select.pd-project:open,
body .projects-dashboard .pd-card select.pd-result:open {
  border-color: rgba(83, 229, 202, 0.5) !important;
  background: linear-gradient(
    135deg,
    rgba(22, 55, 67, 0.96),
    rgba(10, 29, 43, 0.96)
  ) !important;
}

body .projects-dashboard .pd-card select.pd-project::picker-icon,
body .projects-dashboard .pd-card select.pd-result::picker-icon {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Project-level integration monitor. Result integration remains in Workspace. */
.integration-manager {
  display: grid;
  gap: 10px;
}

.integration-manager-help {
  margin: 0 0 4px;
  padding: 11px 13px;
  border: 1px solid rgba(83, 229, 202, 0.16);
  border-radius: 10px;
  background: rgba(83, 229, 202, 0.065) !important;
  color: #b9c9da !important;
  line-height: 1.55;
}

.integration-manager-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  background: rgba(8, 18, 32, 0.82) !important;
}

.integration-manager-flow {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--text) !important;
  font-weight: 700;
}

.integration-manager-flow span {
  overflow: hidden;
  color: #edf6ff !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-manager-flow strong {
  color: var(--cyan) !important;
}

.integration-manager-meta {
  display: flex;
  grid-column: 1;
  flex-wrap: wrap;
  gap: 6px;
  color: #8fa1b7 !important;
  font-size: 10px;
}

.integration-manager-meta > span {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #9fb0c3 !important;
}

.integration-manager-meta .integration-health.active {
  border-color: rgba(83, 229, 202, 0.25);
  background: rgba(83, 229, 202, 0.1) !important;
  color: #8cf3df !important;
}

.integration-manager-meta .integration-health.empty {
  border-color: rgba(243, 202, 106, 0.24);
  background: rgba(243, 202, 106, 0.08) !important;
  color: #efd48e !important;
}

.integration-manager-item > .danger-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.integration-manager-empty {
  padding: 28px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: #8fa1b7 !important;
  text-align: center;
}

@media (max-width: 620px) {
  .integration-manager-item {
    grid-template-columns: 1fr;
  }

  .integration-manager-item > .danger-btn {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* =========================================================
   GLOBAL MODAL THEME
   Covers static and dynamically rendered modal content.
   ========================================================= */

body .modal-overlay {
  padding: 18px;
  background: rgba(2, 8, 18, 0.74) !important;
  backdrop-filter: blur(8px) saturate(82%);
}

body .modal-overlay .modal {
  position: relative;
  border: 1px solid var(--line-strong) !important;
  border-radius: 18px !important;
  background: linear-gradient(
    145deg,
    rgba(18, 30, 47, 0.99),
    rgba(7, 15, 28, 0.995)
  ) !important;
  color: var(--text) !important;
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  scrollbar-color: #31475f #091321;
}

body .modal-overlay .modal::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(83, 229, 202, 0.48),
    rgba(150, 118, 255, 0.42),
    transparent
  );
  pointer-events: none;
}

body .modal-overlay .modal-title {
  margin-right: 46px;
  color: var(--text) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body .modal-overlay .modal-subtitle,
body .modal-overlay .section-description,
body .modal-overlay .card-subtitle,
body .modal-overlay .import-intro,
body .modal-overlay .help-intro {
  color: #93a4b8 !important;
}

body .modal-overlay .modal :where(h1, h2, h3, h4, h5, h6) {
  color: #edf5fc !important;
}

body .modal-overlay .modal :where(p, li, label, dt, dd, small) {
  color: #b2c0d1 !important;
}

body .modal-overlay .modal :where(strong, b) {
  color: #eef7ff !important;
}

body .modal-overlay .modal a {
  color: #86ead7 !important;
}

body .modal-overlay .modal :where(input, select, textarea) {
  border-color: var(--line) !important;
  background-color: rgba(5, 13, 25, 0.88) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

body .modal-overlay .modal :where(input, textarea)::placeholder {
  color: #607087 !important;
  opacity: 1;
}

body .modal-overlay .modal :where(input, select, textarea):focus-visible {
  outline: 0;
  border-color: rgba(83, 229, 202, 0.56) !important;
  box-shadow: 0 0 0 3px rgba(83, 229, 202, 0.1) !important;
}

body .modal-overlay .modal :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--cyan);
}

body .modal-overlay .modal-actions {
  border-top-color: var(--line) !important;
}

body .modal-overlay .modal button:not(.primary-btn):not(.danger-btn) {
  border-color: rgb(135 158 190 / 0%) !important;
  background: rgb(20 33 51 / 0%) !important;
  color: #dbe7f4 !important;
}

body .modal-overlay .modal button:not(.primary-btn):not(.danger-btn):hover,
body
  .modal-overlay
  .modal
  button:not(.primary-btn):not(.danger-btn):focus-visible {
  outline: 0;
  border-color: rgba(83, 229, 202, 0.34) !important;
  background: rgba(83, 229, 202, 0.1) !important;
  color: #ffffff !important;
}

body .modal-overlay .modal .danger-btn {
  border-color: rgba(255, 111, 159, 0.42) !important;
  background: rgba(255, 111, 159, 0.13) !important;
  color: #ffc2d5 !important;
}

body .modal-overlay .modal .danger-btn:hover,
body .modal-overlay .modal .danger-btn:focus-visible {
  outline: 0;
  border-color: rgba(255, 111, 159, 0.62) !important;
  background: rgba(255, 111, 159, 0.22) !important;
  color: #ffffff !important;
}

body .modal-overlay .modal button:disabled {
  border-color: var(--line) !important;
  background: rgba(28, 41, 59, 0.72) !important;
  color: #718096 !important;
  opacity: 1;
}

body .modal-overlay .modal-dismiss-actions {
  z-index: 3;
}

body .modal-overlay .modal-dismiss-btn {
  border: 1px solid var(--line-strong) !important;
  background: rgba(17, 29, 46, 0.94) !important;
  color: #aebed1 !important;
}

body .modal-overlay .modal-dismiss-btn:hover,
body .modal-overlay .modal-dismiss-btn:focus-visible {
  border-color: rgba(255, 111, 159, 0.32) !important;
  background: rgba(255, 111, 159, 0.1) !important;
  color: #ffabc7 !important;
}

body .modal-overlay .info-grid {
  gap: 7px;
}

body .modal-overlay .info-label,
body .modal-overlay .info-value {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

body .modal-overlay .info-label {
  color: #8496aa !important;
}

body .modal-overlay .info-value {
  color: #e4edf7 !important;
}

body .modal-overlay .modal :where(table, thead, tbody, tr, th, td) {
  border-color: var(--line) !important;
  color: #c8d5e4 !important;
}

body .modal-overlay .modal :where(table, tbody, tr, td) {
  background: rgba(7, 16, 29, 0.42) !important;
}

body .modal-overlay .modal th {
  background: rgba(18, 31, 49, 0.96) !important;
  color: #eef6ff !important;
}

body .modal-overlay .modal td input {
  background: transparent !important;
}

body .modal-overlay .modal hr {
  border: 0;
  border-top: 1px solid var(--line);
}

body .modal-overlay .modal :where(pre, code, .source-editor) {
  border-color: var(--line) !important;
  background: rgba(3, 9, 18, 0.9) !important;
  color: #d9fff7 !important;
}

body .modal-overlay .modal .card {
  border-color: var(--line) !important;
  background: rgba(10, 20, 34, 0.82) !important;
  color: var(--text) !important;
}

body .modal-overlay .delete-confirmation {
  border-color: rgba(255, 111, 159, 0.25) !important;
  background: rgba(255, 111, 159, 0.075) !important;
}

body .modal-overlay .delete-confirmation > span {
  background: rgba(255, 111, 159, 0.16) !important;
  color: #ffabc7 !important;
}

body .modal-overlay .delete-confirmation strong {
  color: #ffd6e3 !important;
}

body .modal-overlay .delete-confirmation p {
  color: #c5d1df !important;
}

body .modal-overlay .delete-confirmation small {
  color: #93a4b8 !important;
}

body .modal-overlay .run-blocked-warning {
  padding: 14px 16px;
  border: 1px solid rgba(243, 202, 106, 0.24);
  border-radius: 12px;
  background: rgba(243, 202, 106, 0.075) !important;
  color: #d7e1ec !important;
}

body .modal-overlay .run-blocked-warning > strong {
  color: #f5d891 !important;
}

body .modal-overlay .run-blocked-warning li::marker {
  color: var(--yellow);
}

body .modal-overlay .model-detail-dialog dl > div,
body .modal-overlay .formula-fill-panel,
body .modal-overlay .forecast-feature-mapping,
body .modal-overlay .formula-column-list li {
  border-color: var(--line) !important;
  background: rgba(12, 24, 40, 0.78) !important;
  color: #c8d5e4 !important;
}

body .modal-overlay .model-formula-fill-dialog fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
}

body .modal-overlay .model-formula-fill-dialog legend {
  color: #91a2b6 !important;
}

body .modal-overlay .model-fill-columns label {
  border-color: var(--line) !important;
  background: rgba(8, 18, 32, 0.82) !important;
  color: #becbd9 !important;
}

body .modal-overlay .model-fill-columns label:has(input:checked) {
  border-color: rgba(83, 229, 202, 0.42) !important;
  background: rgba(83, 229, 202, 0.12) !important;
  color: #c9fff4 !important;
}

body .modal-overlay .model-detail-dialog dt,
body .modal-overlay .formula-fill-head span,
body .modal-overlay .forecast-feature-mapping small {
  color: #91a2b6 !important;
}

body .modal-overlay .model-detail-dialog dd,
body .modal-overlay .forecast-feature-mapping strong {
  color: #e7f0f9 !important;
}

body .modal-overlay .forecast-feature-option {
  border-color: var(--line) !important;
  background: rgba(9, 20, 35, 0.82) !important;
  color: #becbd9 !important;
}

body .modal-overlay .forecast-feature-option:has(input:checked) {
  border-color: rgba(83, 229, 202, 0.42) !important;
  background: rgba(83, 229, 202, 0.12) !important;
  color: #c9fff4 !important;
}

body .modal-overlay .import-dropzone {
  border-color: rgba(139, 169, 203, 0.34) !important;
  background: rgba(8, 18, 32, 0.72) !important;
  color: #c8d5e4 !important;
}

body .modal-overlay .import-dropzone:hover,
body .modal-overlay .import-dropzone.is-dragging {
  border-color: rgba(83, 229, 202, 0.58) !important;
  background: rgba(83, 229, 202, 0.08) !important;
}

body .modal-overlay .import-icon {
  background: rgba(83, 229, 202, 0.12) !important;
  color: #8cf3df !important;
}

body .modal-overlay .import-dropzone strong {
  color: #eef7ff !important;
}

body .modal-overlay .import-dropzone :where(span, small),
body .modal-overlay .import-file-meta {
  color: #91a2b6 !important;
}

body .modal-overlay .help-workflow li {
  border-color: var(--line) !important;
  background: rgba(10, 20, 34, 0.82) !important;
}

body .modal-overlay .help-workflow li > span {
  background: rgba(83, 229, 202, 0.14) !important;
  color: #8cf3df !important;
}

body .modal-overlay .help-workflow li:not(:last-child)::after {
  color: #60738a !important;
}

body .modal-overlay .help-note,
body .modal-overlay .model-mode-notice {
  border-color: rgba(90, 168, 255, 0.22) !important;
  background: rgba(90, 168, 255, 0.075) !important;
  color: #b8cbe0 !important;
}

body
  .modal-overlay
  :where(
    #upgrade-error,
    #sheet-error,
    #grid-error,
    #formula-column-error,
    .form-error,
    [role="alert"]
  ):not(:empty) {
  color: #ffabc7 !important;
}

/* The guided workflow is modal-like and uses the same glass palette. */
.guided-tour-highlight {
  border-color: var(--cyan) !important;
  box-shadow:
    0 0 0 9999px rgba(2, 8, 18, 0.72),
    0 0 0 5px rgba(83, 229, 202, 0.2) !important;
}

.guided-tour-tooltip {
  border-color: var(--line-strong) !important;
  background: linear-gradient(
    145deg,
    rgba(18, 30, 47, 0.99),
    rgba(7, 15, 28, 0.995)
  ) !important;
  color: var(--text) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.guided-tour-tooltip h3 {
  color: #edf5fc !important;
}

.guided-tour-tooltip p {
  color: #aebed1 !important;
}

.guided-tour-progress {
  color: var(--cyan) !important;
}

.guided-tour-tooltip button:not(.primary-btn) {
  border-color: var(--line) !important;
  background: rgba(20, 33, 51, 0.88) !important;
  color: #dbe7f4 !important;
}

.scenario-run-history {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.scenario-run-heading,
.scenario-run-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scenario-run-heading > span { color: var(--muted); }
.scenario-run-latest { margin: 12px 0; }
.scenario-run-list { display: grid; gap: 8px; margin: 12px 0; }
.scenario-run-row { border-top: 1px solid var(--line); padding-top: 8px; }
.scenario-run-row em { color: #68d6a7; font-style: normal; font-size: 0.82em; }
.scenario-run-row button,
#viewAllScenarioRuns { border: 0; background: transparent; color: var(--accent); cursor: pointer; }
.saved-run-result { max-height: 58vh; overflow: auto; }
.saved-run-result pre { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  body .modal-overlay {
    align-items: flex-end;
    padding: 8px;
  }

  body .modal-overlay .modal {
    width: 100% !important;
    max-width: none;
    max-height: 90vh;
    border-radius: 16px 16px 10px 10px !important;
    padding: 18px !important;
  }

  body .modal-overlay .info-grid {
    grid-template-columns: 1fr;
  }
}

/* Scenario Lab: replace its legacy light surfaces with the shared glass theme. */
.canvas .scenario-lab {
  color: var(--text) !important;
}

.canvas .scenario-lab-title,
.canvas .scenario-lab-section-heading h2,
.canvas .scenario-lab-side-header h2 {
  color: var(--text) !important;
}

.canvas .scenario-lab-eyebrow {
  color: var(--cyan) !important;
}

.canvas .scenario-lab-canvas,
.canvas .scenario-lab-graph {
  border-color: var(--line) !important;
  background: linear-gradient(
    145deg,
    rgba(18, 29, 45, 0.92),
    rgba(11, 20, 34, 0.94)
  ) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
}

.canvas .scenario-lab-side {
  background: transparent !important;
}

.canvas .scenario-lab-side + .scenario-lab-side {
  border-color: var(--line) !important;
}

.canvas .scenario-lab-field {
  color: var(--muted) !important;
}

.canvas .scenario-lab-field select {
  border-color: var(--line-strong) !important;
  background: rgba(5, 13, 25, 0.76) !important;
  color: var(--text) !important;
}

.canvas .scenario-lab-field select option,
.canvas .scenario-lab-field select optgroup {
  background: #101c2c !important;
  color: var(--text) !important;
}

.canvas .scenario-lab-runline {
  color: #c9d5e4 !important;
}

.canvas .scenario-lab-runline strong {
  color: var(--text) !important;
}

.canvas .scenario-lab-pill {
  border: 1px solid var(--line);
  background: rgba(120, 135, 155, 0.12) !important;
  color: #b7c3d2 !important;
}

.canvas .scenario-lab-pill.warning {
  border-color: rgba(243, 202, 106, 0.3);
  background: rgba(243, 202, 106, 0.12) !important;
  color: var(--yellow) !important;
}

.canvas .scenario-lab-note,
.canvas .scenario-lab-chain-title,
.canvas .scenario-lab-chain-number,
.canvas .scenario-lab-chain-version,
.canvas .scenario-lab-empty {
  color: var(--muted) !important;
}

.canvas .scenario-lab-historical {
  border-left-color: var(--yellow) !important;
  background: rgba(243, 202, 106, 0.08) !important;
  color: #d7c58f !important;
}

.canvas .scenario-lab-historical strong {
  color: var(--yellow) !important;
}

.canvas .scenario-lab-chain,
.canvas .scenario-lab-value,
.canvas .scenario-lab-data {
  border-color: var(--line) !important;
  background: rgba(7, 16, 29, 0.72) !important;
}

.canvas .scenario-lab-empty {
  border-color: var(--line-strong) !important;
  background: rgba(7, 16, 29, 0.48) !important;
}

.canvas .scenario-lab-chart {
  border-color: var(--line) !important;
  background: linear-gradient(
    145deg,
    rgba(18, 29, 45, 0.92),
    rgba(14, 22, 37, 0.9)
  ) !important;
}

.canvas .scenario-lab-gridline {
  stroke: rgba(135, 158, 190, 0.2) !important;
}

.canvas .scenario-lab-axis-label {
  fill: #91a1b5 !important;
}

.canvas .scenario-lab-legend,
.canvas .scenario-lab-stats {
  color: #aebccd !important;
}

.canvas .scenario-lab-scalar {
  color: var(--text) !important;
}

.canvas .scenario-lab-value strong {
  color: var(--text) !important;
}

.canvas .scenario-lab-value small {
  color: var(--muted) !important;
}

.canvas .scenario-lab-bar {
  background: rgba(135, 158, 190, 0.2) !important;
}

.canvas .scenario-lab-data th,
.canvas .scenario-lab-data td {
  border-color: var(--line) !important;
  color: #c9d5e4 !important;
}

.canvas .scenario-lab-data th {
  background: rgba(18, 31, 49, 0.98) !important;
  color: var(--text) !important;
}

.canvas .scenario-lab-data tbody tr:nth-child(even),
.canvas .scenario-lab-data tbody tr:nth-child(even) td {
  background: rgba(13, 24, 40, 0.72) !important;
}

@media (max-width: 850px) {
  .canvas .scenario-lab-side + .scenario-lab-side {
    border-top-color: var(--line) !important;
  }
}