@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@500;600&display=swap");

:root {
  --bg-0: #09121c;
  --bg-1: #111f2e;
  --card: #162739;
  --card-2: #0f1f30;
  --line: #284159;
  --text: #f6fbff;
  --muted: #bfd3e6;
  --label: #d8e8f8;
  --accent: #f5a524;
  --accent-2: #2cc5b5;
  --danger: #f56a6a;
  --ok: #63d48f;
  /* Derived tokens — keep hardcoded values out of component rules */
  --accent-border: #e1a140;      /* amber button border */
  --accent-text: #2c1b00;        /* dark text on amber buttons */
  --input-bg: var(--card-2);     /* field background = deepest card shade */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Avenir Next", "IBM Plex Sans", "Segoe UI", sans-serif;
  background:
    radial-gradient(1400px 540px at 10% -5%, #274c70, transparent 60%),
    radial-gradient(1200px 580px at 95% 0%, #173f4d, transparent 56%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
}

.topbar {
  padding: 18px 24px 8px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}

.hidden {
  display: none !important;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.status-banner {
  margin: 0 24px 8px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 9px 12px 9px 14px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-banner::before {
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}

.status-info {
  background: #10263b;
  color: #cfe6ff;
  border-left-color: #3b82f6;
}
.status-info::before { content: "ℹ"; color: #60a5fa; }

.status-success {
  background: #112b22;
  border-color: #2b6d50;
  border-left-color: #22c55e;
  color: #9fe9c0;
}
.status-success::before { content: "✓"; color: #4ade80; }

.status-warn {
  background: #2d2613;
  border-color: #6f5923;
  border-left-color: #f59e0b;
  color: #fbd78a;
}
.status-warn::before { content: "⚠"; color: #fbbf24; }

.status-error {
  background: #3a1212;
  border-color: #a33a3a;
  border-left-color: #ef4444;
  color: #fca5a5;
}
.status-error::before { content: "✕"; color: #f87171; }

h1 {
  margin: 0;
  letter-spacing: 0.2px;
  font-size: 26px;
}

.subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.topbar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.badge {
  border: 1px solid var(--line);
  background: #10263b;
  color: #cfe6ff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.2px;
}

.user-bar {
  display: none;
  align-items: center;
  gap: 10px;
}

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

.logout-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 3px 10px;
  transition: border-color 0.15s, color 0.15s;
}
.logout-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
}

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

.flow-nav {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(150deg, #11263a, #102334);
  padding: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.flow-btn {
  background: transparent;
  border: 1px solid #37546b;
  color: #d6e9fb;
  border-radius: 9px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 12px;
}

.flow-btn.active {
  background: linear-gradient(180deg, #ffc35c, var(--accent));
  border-color: var(--accent-border);
  color: var(--accent-text);
}

[data-flow-step].flow-hidden {
  display: none;
}

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(155deg, var(--card), var(--card-2));
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}

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

h2 {
  margin: 0 0 10px;
  font-size: 16px;
}

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

label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--label);
}

input,
select,
textarea {
  width: 100%;
  color: var(--text);
  background: #0e1a28;
  border: 1px solid #2c4258;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 1px solid var(--accent-2);
  border-color: var(--accent-2);
}

input::placeholder,
textarea::placeholder {
  color: #9fb7cb;
}

.input-error {
  border-color: #c85b5b !important;
  outline: 1px solid #c85b5b !important;
}

.field-error {
  margin-top: 2px;
  font-size: 11px;
  color: #f4b6b6;
  font-weight: 600;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

button {
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #ffc35c, var(--accent));
  color: var(--accent-text);
  font-weight: 700;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.05);
}

button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  filter: none;
}

button.is-busy {
  position: relative;
  padding-right: 30px;
}

button.is-busy::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid rgba(44, 27, 0, 0.4);
  border-top-color: rgba(44, 27, 0, 0.95);
  animation: spin 0.75s linear infinite;
}

button.ghost {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: center;
  color: var(--label);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.checkbox input {
  width: auto;
  transform: scale(1.1);
  margin-top: 2px;
}

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

.small-note {
  color: #d0e3f5;
  font-size: 13px;
  margin-bottom: 8px;
}

.review-gate {
  margin-top: 12px;
  border: 1px solid #6f5923;
  border-radius: 10px;
  padding: 10px;
  background: #2d2613;
}

.result-controls {
  display: grid;
  grid-template-columns: 1.8fr 1fr auto auto auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}

.result-controls #result-count {
  margin: 0;
  text-align: right;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  border-bottom: 1px solid #22384c;
  padding: 7px 8px;
  font-size: 12px;
  white-space: nowrap;
}

th {
  color: #cfe3f5;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: #102336;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  background: #14314a;
}

th.sortable.active-sort {
  color: #ffd588;
}

.risk-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1px;
}

.risk-low {
  background: rgba(99, 212, 143, 0.18);
  color: #8be3ae;
}

.risk-pass {
  background: rgba(99, 212, 143, 0.18);
  color: #8be3ae;
}

.risk-medium {
  background: rgba(245, 197, 93, 0.18);
  color: #f8cf79;
}

.risk-high {
  background: rgba(245, 106, 106, 0.18);
  color: #ffb0b0;
}

.risk-fail,
.risk-fail-additive {
  background: rgba(245, 106, 106, 0.24);
  color: #ffd0d0;
}

.risk-unknown {
  background: rgba(157, 179, 200, 0.18);
  color: #c2d2e3;
}

.summary {
  margin: 0;
  padding: 10px;
  background: #0d1826;
  border: 1px solid #2a3f53;
  border-radius: 10px;
  color: #dff3ff;
  overflow-x: auto;
  max-height: 220px;
}

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

.cell-inspect {
  display: inline-flex;
  width: 100%;
  justify-content: flex-start;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  padding: 3px 6px;
  cursor: pointer;
  font: inherit;
}

.cell-inspect:hover {
  border-color: #35506b;
  background: rgba(67, 99, 129, 0.18);
}

.cell-inspect.tone-success {
  color: #9fe9c0;
}

.cell-inspect.tone-warn {
  color: #fbd78a;
}

.cell-inspect.tone-error {
  color: #f3b6b6;
}

.cell-inspect.tone-info {
  color: #cfe6ff;
}

.component-details-row td {
  white-space: normal;
  background: rgba(16, 35, 54, 0.65);
}

.component-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 8px 2px;
}

.component-detail-wide {
  grid-column: 1 / -1;
}

.component-details h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: #d6e9fb;
}

.component-details-line {
  font-size: 12px;
  color: #c5dcf0;
  line-height: 1.35;
}

.mono {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
}

.stability-overview {
  border: 1px solid #264055;
  border-radius: 10px;
  padding: 10px;
  background: #0d1826;
  color: #dff3ff;
}

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

.stab-card {
  border: 1px solid #2b465d;
  border-radius: 10px;
  padding: 9px;
  background: #0f2131;
}

.stab-title {
  font-size: 12px;
  color: #c6dcf0;
}

.stab-value {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
}

.stab-low .stab-value {
  color: #63d48f;
}

.stab-med .stab-value {
  color: #f5c55d;
}

.stab-high .stab-value {
  color: #f56a6a;
}

.stab-unk .stab-value {
  color: #9db3c8;
}

.stability-data-panel {
  border: 1px solid #264055;
  border-radius: 10px;
  padding: 10px;
  background: #0d1826;
  color: #dff3ff;
}

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

.stability-data-card {
  border: 1px solid #2b465d;
  border-radius: 10px;
  padding: 9px;
  background: #0f2131;
}

.stability-data-label {
  font-size: 12px;
  color: #c6dcf0;
}

.stability-data-value {
  margin-top: 4px;
  font-size: 21px;
  font-weight: 700;
  color: #f5c55d;
}

.stability-data-path {
  word-break: break-all;
  color: #9fd8ff;
}

.stability-data-table {
  margin-top: 10px;
}

.model-performance-panel {
  border: 1px solid #264055;
  border-radius: 10px;
  padding: 10px;
  background: #0d1826;
  color: #dff3ff;
}

.model-performance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.model-performance-card {
  border: 1px solid #2b465d;
  border-radius: 10px;
  padding: 9px;
  background: #0f2131;
}

.model-performance-label {
  font-size: 12px;
  color: #c6dcf0;
}

.model-performance-value {
  margin-top: 4px;
  font-size: 21px;
  font-weight: 700;
  color: #63d48f;
}

.model-performance-path {
  word-break: break-all;
  color: #9fd8ff;
}

.decision-card-top,
.admin-dashboard-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.decision-card-top h3 {
  margin: 0;
}

.confidence-pill,
.quality-pill {
  border: 1px solid #35546c;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.confidence-high,
.quality-strong {
  color: #84e6a9;
  border-color: #347a55;
  background: rgba(52, 122, 85, 0.18);
}

.confidence-medium,
.quality-usable {
  color: #f5c55d;
  border-color: #8b6a28;
  background: rgba(139, 106, 40, 0.18);
}

.confidence-low,
.quality-weak,
.quality-lab {
  color: #ffb0a6;
  border-color: #8b433d;
  background: rgba(139, 67, 61, 0.18);
}

.admin-dashboard-details {
  border: 1px solid #274059;
  border-radius: 8px;
  background: #0f2131;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.admin-dashboard-details summary {
  cursor: pointer;
  color: #dff3ff;
  font-weight: 700;
}

.admin-dashboard-details > .small-note {
  margin-top: 6px;
}

.admin-dashboard-preview-table {
  margin-top: 8px;
}

.admin-json-preview {
  max-height: 320px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 10px;
  border: 1px solid #274059;
  border-radius: 8px;
  background: #08131f;
  color: #cfe6ff;
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.decision-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.decision-hero-copy {
  max-width: 760px;
}

.decision-actions {
  margin-top: 0;
  justify-content: flex-end;
}

.decision-readiness-grid,
.decision-workflow-grid,
.decision-trust-topline {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
  margin-bottom: 12px;
}

.decision-score,
.decision-claim,
.decision-list-block {
  border: 1px solid #2b465d;
  border-radius: 10px;
  padding: 12px;
  background: #0f2131;
}

.decision-score-value {
  font-size: 42px;
  line-height: 1;
  font-weight: 800;
  color: var(--accent);
}

.decision-score-label,
.decision-claim-title {
  margin-top: 8px;
  color: #f3d48e;
  font-size: 13px;
  font-weight: 800;
}

.decision-positioning {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.decision-claim p,
.decision-model-card p {
  margin: 6px 0 0;
  color: #d8e8f8;
  font-size: 13px;
  line-height: 1.45;
}

.decision-kpi-grid,
.decision-card-grid,
.decision-status-grid,
.decision-validation-summary,
.decision-chart-grid,
.decision-mini-grid,
.decision-demo-grid,
.decision-report-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.decision-kpi-card,
.decision-model-card,
.decision-status-card,
.decision-validation-card,
.decision-chart-card,
.decision-demo-card,
.decision-mini-grid > div {
  border: 1px solid #2b465d;
  border-radius: 8px;
  padding: 10px;
  background: #0f2131;
}

.decision-mini-grid strong {
  display: block;
  color: var(--ok);
  font-size: 20px;
}

.decision-mini-grid span {
  display: block;
  color: #c6dcf0;
  font-size: 12px;
  margin-top: 3px;
}

.source-qa-buckets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.source-qa-bucket {
  border: 1px solid #2b465d;
  border-radius: 8px;
  padding: 10px;
  background: #0f2131;
}

.source-qa-bucket strong,
.source-qa-bucket span,
.source-qa-bucket small {
  display: block;
}

.source-qa-bucket strong {
  color: var(--ok);
  font-size: 20px;
}

.source-qa-bucket span {
  color: #e7f0fa;
  font-size: 12px;
  font-weight: 800;
  margin-top: 2px;
}

.source-qa-bucket small {
  color: #9fb7cb;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 4px;
}

.decision-kpi-label,
.decision-model-target,
.decision-model-metrics {
  color: #c6dcf0;
  font-size: 12px;
}

.decision-kpi-value {
  margin-top: 4px;
  color: var(--ok);
  font-size: 24px;
  font-weight: 800;
}

/* ── Admin KPI summary structured grid ──────────────────────────────────── */
.kpi-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 8px 0;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.kpi-section {
  background: var(--bg-2, #eef2f7);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.kpi-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.kpi-dl {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 4px;
  margin: 0;
}
.kpi-dt {
  font-size: 11px;
  color: var(--muted);
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-dd {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  margin: 0;
}

.decision-status-label,
.decision-validation-class {
  color: #c6dcf0;
  font-size: 12px;
  font-weight: 800;
}

.decision-status-value,
.decision-validation-class {
  margin-top: 4px;
  color: var(--accent);
  text-transform: uppercase;
}

.decision-model-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.decision-model-topline h3,
.decision-list-block h3 {
  margin: 0;
  font-size: 15px;
}

.decision-confidence {
  border: 1px solid #37546b;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.confidence-high {
  border-color: #4f9a70;
  color: #a8edc6;
}

.confidence-medium {
  border-color: #a77b2d;
  color: #f4cf84;
}

.confidence-low {
  border-color: #a05252;
  color: #f3b6b6;
}

.quality-strong {
  border-color: rgba(99, 212, 143, 0.58);
}

.quality-usable {
  border-color: rgba(245, 197, 93, 0.58);
}

.quality-weak {
  border-color: rgba(245, 166, 91, 0.68);
}

.quality-lab {
  border-color: rgba(245, 106, 106, 0.72);
}

.decision-model-status {
  margin: 7px 0;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 800;
}

.decision-model-metrics {
  font-family: "JetBrains Mono", monospace;
  line-height: 1.45;
}

.decision-model-metrics.subdued {
  color: #9fb7cb;
}

.decision-list-block ol {
  margin: 8px 0 0;
  padding-left: 20px;
  color: #d8e8f8;
}

.decision-list-block li {
  margin: 6px 0;
  line-height: 1.4;
}

.decision-chart-card h3,
.decision-demo-card h3 {
  margin: 0;
  font-size: 14px;
}

.decision-chart {
  display: block;
  width: 100%;
  min-height: 150px;
  margin-top: 8px;
  border: 1px solid rgba(40, 65, 89, 0.8);
  border-radius: 8px;
  background: #0b1825;
}

.decision-scatter circle {
  fill: rgba(44, 197, 181, 0.66);
}

.decision-histogram rect {
  fill: rgba(245, 165, 36, 0.72);
}

.decision-one-to-one {
  stroke: rgba(216, 232, 248, 0.42);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

.decision-demo-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.decision-demo-meta {
  margin: 6px 0;
  color: #c6dcf0;
  font-size: 12px;
}

.decision-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.decision-report-section-grid {
  margin-top: 10px;
}

.blend-decision-panel {
  border: 1px solid #264055;
  border-radius: 10px;
  padding: 10px;
  background: #0d1826;
}

.blend-decision-summary,
.blend-decision-grid {
  display: grid;
  gap: 10px;
}

.blend-decision-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
}

.blend-decision-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blend-decision-count,
.blend-decision-card {
  border: 1px solid #2b465d;
  border-radius: 10px;
  padding: 10px;
  background: #0f2131;
}

.blend-decision-card {
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.blend-decision-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent-2);
}

.blend-decision-count-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--ok);
}

.blend-decision-count-label,
.blend-decision-meta,
.blend-decision-labs {
  color: #c6dcf0;
  font-size: 12px;
}

.blend-decision-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.blend-decision-topline h3 {
  margin: 0;
  font-size: 14px;
}

.blend-decision-topline span {
  border: 1px solid #37546b;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.blend-decision-reasons {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  color: #d8e8f8;
  font-size: 12px;
  line-height: 1.35;
}

.decision-test {
  border-color: rgba(99, 212, 143, 0.65);
}

.decision-confirm {
  border-color: rgba(245, 197, 93, 0.7);
}

.decision-review {
  border-color: rgba(159, 216, 255, 0.55);
}

.decision-avoid {
  border-color: rgba(245, 106, 106, 0.78);
}

.stability-training-lab-panel {
  border: 1px solid #264055;
  border-radius: 10px;
  padding: 10px;
  background: #0d1826;
  color: #dff3ff;
}

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

.stability-lab-card {
  border: 1px solid #2b465d;
  border-radius: 10px;
  padding: 9px;
  background: #0f2131;
}

.stability-lab-label {
  font-size: 12px;
  color: #c6dcf0;
}

.stability-lab-value {
  margin-top: 4px;
  font-size: 21px;
  font-weight: 700;
  color: #f5c55d;
}

.stability-lab-path {
  word-break: break-all;
  color: #9fd8ff;
}

.stability-formula-sandbox {
  margin-top: 12px;
  border: 1px solid rgba(245, 165, 36, 0.35);
  border-radius: 14px;
  padding: 12px;
  background:
    radial-gradient(720px 220px at 0% 0%, rgba(245, 165, 36, 0.16), transparent 55%),
    radial-gradient(620px 220px at 100% 20%, rgba(44, 197, 181, 0.16), transparent 58%),
    linear-gradient(135deg, rgba(15, 33, 49, 0.98), rgba(10, 21, 34, 0.98));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.stability-formula-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.stability-formula-controls label {
  font-size: 12px;
  color: #c6dcf0;
}

.stability-formula-controls input,
.stability-formula-controls select,
.coef-input {
  width: 100%;
  margin-top: 4px;
  border: 1px solid #355873;
  border-radius: 9px;
  background: #081827;
  color: var(--text);
  padding: 8px 9px;
}

.stability-formula-result-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.stability-formula-metric {
  border: 1px solid #2b465d;
  border-radius: 10px;
  background: rgba(13, 24, 38, 0.86);
  padding: 8px;
}

.stability-formula-metric strong {
  display: block;
  color: #f5c55d;
  font-size: 18px;
  margin-top: 3px;
}

.stability-lab-panel-title {
  margin: 0 0 8px;
  color: #f5c55d;
  letter-spacing: 0.2px;
}

.table-wrap {
  overflow: auto;
  max-height: 430px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

#results-table tr.clickable {
  cursor: pointer;
}

#results-table tr.clickable:hover {
  background: rgba(48, 197, 181, 0.12);
}

#results-table tr.selected {
  background: rgba(245, 165, 36, 0.17);
}

.dist-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.dist-meta {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0e1a29;
  padding: 10px;
}

.dist-caption {
  margin: 0 0 8px;
  color: #c8deef;
  font-size: 12px;
}

.dist-table td:first-child {
  color: var(--muted);
  width: 50%;
}

.chart-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0b1828;
  padding: 8px;
}

#distillation-chart {
  width: 100%;
  height: 300px;
  display: block;
}

.chart-axis {
  stroke: #34526e;
  stroke-width: 1;
}

.chart-grid {
  stroke: #1b3145;
  stroke-width: 1;
}

.chart-line {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 3;
}

.chart-point {
  fill: var(--accent);
  stroke: #0b1828;
  stroke-width: 1.5;
}

.chart-label {
  fill: #d1e7f8;
  font-size: 11px;
}

.chart-title {
  fill: #d7ebfb;
  font-size: 12px;
  font-weight: 600;
}

.result-detail {
  display: grid;
  gap: 12px;
}

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

.detail-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0e1a29;
  padding: 12px;
}

.detail-card-full {
  margin-top: 12px;
}

.detail-title {
  font-size: 13px;
  font-weight: 700;
  color: #d7ebfb;
  margin-bottom: 8px;
}

.detail-subtitle {
  margin-top: 12px;
}

.detail-line {
  margin-bottom: 6px;
  color: #d8e8f8;
  font-size: 13px;
}

.detail-list {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.detail-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.prov-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid var(--line);
}

.prov-info {
  background: #10263b;
  color: #cfe6ff;
}

.prov-success {
  background: #112b22;
  color: #9fe9c0;
}

.prov-warn {
  background: #2d2613;
  color: #fbd78a;
}

.prov-error {
  background: #351a1a;
  color: #f3b6b6;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table th,
.detail-table td {
  border-bottom: 1px solid rgba(40, 65, 89, 0.8);
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
}

.detail-table th {
  color: var(--muted);
  font-weight: 700;
}

.detail-checks {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.celebration-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}

.firework-particle {
  position: absolute;
  width: 10px;
  height: 18px;
  border-radius: 999px;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
  animation: firework-burst 900ms ease-out forwards;
  box-shadow: 0 0 14px currentColor;
}

@keyframes firework-burst {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)) scale(1);
  }
}

@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

.section-sep {
  border: none;
  border-top: 1px solid #274059;
  margin: 14px 0 10px;
}

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

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

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

.datahub-block {
  border: 1px solid #274059;
  border-radius: 10px;
  background: #0d1826;
  padding: 10px;
}

.datahub-block h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--accent);
}

.datahub-upload-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.datahub-table-wrap {
  max-height: 260px;
}

#hub-lineage-view,
#hub-impute-view {
  max-height: 260px;
}

#review-table td .review-actions {
  display: flex;
  gap: 6px;
}

.hidden-block {
  display: none;
  margin-top: 10px;
}

.hidden-block.show {
  display: block;
}

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

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

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

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

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

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

  .component-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .stability-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stability-lab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stability-formula-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stability-formula-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .result-controls {
    grid-template-columns: 1fr 1fr;
  }

  .result-controls #result-count {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .topbar {
    flex-direction: column;
    padding: 16px 14px 6px;
  }

  .grid {
    padding: 12px 14px 18px;
  }

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

  .component-details {
    grid-template-columns: 1fr;
  }

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

  .stability-data-grid {
    grid-template-columns: 1fr;
  }

  .model-performance-grid {
    grid-template-columns: 1fr;
  }

  .stability-lab-grid {
    grid-template-columns: 1fr;
  }

  .stability-formula-controls,
  .stability-formula-result-grid {
    grid-template-columns: 1fr;
  }

  .regression-plots {
    grid-template-columns: 1fr;
  }

  .result-controls {
    grid-template-columns: 1fr;
  }
}

/* Trader cockpit redesign: dense, light, decision-first. */
:root {
  --bg-0: #eef2f5;
  --bg-1: #f6f8fa;
  --bg-2: #e7edf2;
  --card: #ffffff;
  --card-2: #f8fafc;
  --card-solid: #ffffff;
  --line: #d5dde5;
  --line-strong: #aebbc8;
  --text: #17212b;
  --muted: #627181;
  --label: #263442;
  --accent: #b7791f;
  --accent-2: #0f766e;
  --accent-3: #2563eb;
  --danger: #b91c1c;
  --ok: #047857;
  --shadow-md: 0 8px 22px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.11);
  --radius-xl: 8px;
  --radius-lg: 8px;
  --radius-md: 6px;
}

html,
body {
  background: var(--bg-1) !important;
}

body {
  color: var(--text);
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
}

body::before,
body::after,
.topbar::before,
.card::before,
.summary-stat-card::after,
.stability-data-card::after,
.model-performance-card::after,
.stability-lab-card::after,
.stability-formula-metric::after,
.stab-card::after {
  display: none !important;
}

.topbar {
  width: 100%;
  margin: 0;
  min-height: 72px;
  padding: 14px 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

h1 {
  color: var(--text);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-family: "Manrope", "Avenir Next", sans-serif;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: 0;
}

.topbar-subtitle {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topbar-subtitle::before {
  content: "Pilot desk";
  color: #0f766e;
  border-color: #99d5ce;
  background: #e7f6f4;
}

.mode-bar {
  width: 100%;
  margin: 0;
  padding: 0 24px;
  gap: 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
}

.mode-btn {
  border-radius: 0;
  padding: 12px 14px 11px;
  color: #51606f;
  background: transparent;
  font-weight: 800;
  letter-spacing: 0;
}

.mode-btn:hover:not(.active) {
  color: var(--text);
  background: #f2f5f8;
  transform: none;
}

.mode-btn.active {
  color: #0f766e;
  border-bottom-color: #0f766e;
  background: transparent;
  box-shadow: none;
}

.grid,
.status-banner {
  width: min(1600px, calc(100% - 32px));
}

.grid {
  padding-top: 16px;
  gap: 12px;
}

.card,
.flow-nav,
.stability-overview,
.stability-data-panel,
.model-performance-panel,
.stability-training-lab-panel,
.summary,
.detail-card,
.datahub-block,
.dist-meta,
.chart-wrap,
.verdict-card,
.scenario-result-preview,
.run-history-item,
.decision-score,
.decision-claim,
.decision-list-block,
.decision-kpi-card,
.decision-model-card,
.decision-status-card,
.decision-validation-card,
.decision-chart-card,
.decision-demo-card,
.blend-decision-panel,
.blend-decision-count,
.blend-decision-card {
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}

.card {
  padding: 15px;
  overflow: visible;
}

.card:hover {
  transform: none;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

h2 {
  color: var(--text);
  font-family: "Manrope", "Avenir Next", sans-serif;
  font-size: 17px;
  letter-spacing: 0;
}

h2::before {
  display: none;
}

h3 {
  color: var(--text);
}

.small-note,
.decision-model-target,
.decision-model-metrics,
.decision-demo-meta,
.blend-decision-count-label,
.blend-decision-meta,
.blend-decision-labs,
.decision-list-block ol,
.decision-claim p,
.decision-model-card p {
  color: var(--muted);
}

input,
select,
textarea,
.library-search,
.stability-formula-controls input,
.stability-formula-controls select,
.coef-input {
  color: var(--text);
  background: #ffffff;
  border-color: #c8d2dc;
  border-radius: 6px;
  min-height: 36px;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus,
.library-search:focus,
.coef-input:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
  background: #ffffff;
}

button,
.new-screen-btn,
.logout-btn,
.lib-use-btn,
.lib-del-btn {
  border-radius: 6px;
  box-shadow: none;
  transform: none;
}

button {
  color: #ffffff;
  background: #0f766e;
  border: 1px solid #0f766e;
}

button:hover {
  transform: none;
  filter: none;
  background: #115e59;
  box-shadow: none;
}

button.ghost,
.new-screen-btn,
.logout-btn {
  color: #263442;
  background: #ffffff;
  border: 1px solid #c8d2dc;
}

button.ghost:hover,
.new-screen-btn:hover,
.logout-btn:hover {
  color: #0f766e;
  border-color: #0f766e;
  background: #eefbf9;
}

.flow-nav {
  padding: 8px;
  position: static;
}

.flow-btn {
  border-radius: 6px;
  color: #4b5b6b;
  background: #f8fafc;
  border-color: var(--line);
}

.flow-btn.active {
  color: #ffffff;
  background: #17212b;
  border-color: #17212b;
}

.flow-btn:not(:last-child)::after {
  display: none;
}

.table-wrap,
.datahub-table-wrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
}

.table-wrap::before,
.datahub-table-wrap::before {
  display: none;
}

table {
  background: #ffffff;
  color: var(--text);
}

th {
  background: #f1f5f9;
  color: #465666;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.02em;
}

td {
  color: #1f2933;
  border-bottom: 1px solid #edf1f5;
}

tbody tr:hover td {
  background: #f7fafc;
}

#results-table tr.selected td {
  background: #e7f6f4;
}

.risk-chip,
.prov-chip,
.decision-confidence,
.badge,
.trader-status-chip {
  border-radius: 999px;
  font-weight: 800;
}

.risk-good,
.risk-pass,
.risk-low,
.prov-success,
.decision-test,
.tradable {
  color: #047857;
  border-color: #9ad9bf !important;
  background: #ecfdf5;
  box-shadow: none;
}

.risk-medium,
.risk-warn,
.prov-warn,
.decision-confirm,
.lab {
  color: #92400e;
  border-color: #f4c684 !important;
  background: #fffbeb;
  box-shadow: none;
}

.risk-bad,
.risk-fail,
.risk-high,
.prov-error,
.decision-avoid {
  color: #b91c1c;
  border-color: #f0a4a4 !important;
  background: #fef2f2;
  box-shadow: none;
}

.risk-unknown,
.prov-info,
.decision-review,
.unknown {
  color: #475569;
  border-color: #cbd5e1 !important;
  background: #f8fafc;
  box-shadow: none;
}

.decision-hero {
  align-items: center;
  border-left: 4px solid #0f766e;
}

.decision-actions {
  gap: 8px;
}

.decision-score-value,
.decision-kpi-value,
.blend-decision-count-value,
.model-performance-value,
.stability-data-value,
.stability-lab-value,
.stab-value {
  color: #17212b;
  font-family: "Manrope", "Avenir Next", sans-serif;
  letter-spacing: 0;
}

.decision-score-label,
.decision-claim-title,
.decision-status-value,
.decision-validation-class,
.decision-model-status {
  color: #0f766e;
}

.decision-chart {
  border-color: var(--line);
  background: #ffffff;
}

.chart-axis,
.chart-grid {
  stroke: #cbd5e1;
}

.chart-label {
  fill: #64748b;
}

.decision-scatter circle {
  fill: rgba(15, 118, 110, 0.72);
}

.decision-histogram rect {
  fill: rgba(183, 121, 31, 0.72);
}

.trader-opportunity-card {
  border-top: 4px solid #17212b;
}

.trader-desk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
  gap: 12px;
}

.trader-desk-primary,
.trader-desk-side,
.trader-lane,
.trader-demo-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.trader-status-line,
.trader-model-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trader-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  font-size: 11px;
  border: 1px solid;
}

.trader-board-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.trader-board-kpi {
  min-height: 88px;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px;
}

.trader-board-kpi span,
.trader-readout-row span,
.trader-table-title {
  color: #657586;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trader-board-kpi strong {
  display: block;
  margin-top: 8px;
  color: #17212b;
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.trader-board-kpi small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.trader-model-pill {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 150px;
  padding: 7px 9px;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 12px;
}

.trader-model-pill strong {
  text-transform: uppercase;
  font-size: 10px;
}

.trader-desk-side h3,
.trader-lane h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.trader-readout-row {
  display: grid;
  gap: 4px;
  padding: 9px 0;
  border-top: 1px solid #edf1f5;
}

.trader-readout-row:first-of-type {
  border-top: 0;
}

.trader-readout-row strong {
  color: #17212b;
  font-size: 13px;
  line-height: 1.35;
}

.trader-workflow-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.trader-lane {
  min-height: 110px;
}

.trader-lane p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.trader-demo-table-wrap {
  margin-top: 10px;
  padding: 0;
  overflow: hidden;
}

.trader-table-title {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.blend-decision-panel {
  background: #f8fafc;
}

.blend-decision-summary {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.blend-decision-card {
  min-height: 158px;
  box-shadow: none;
}

.blend-decision-card:hover {
  transform: none;
  border-color: #0f766e;
}

.blend-decision-topline span {
  color: inherit;
  background: rgba(255, 255, 255, 0.54);
}

.detail-card,
.verdict-card,
.summary,
.dist-meta,
.chart-wrap {
  background: #ffffff;
}

.mono,
code,
pre,
.summary,
.decision-model-metrics {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
}

::-webkit-scrollbar-track {
  background: #eef2f5;
}

::-webkit-scrollbar-thumb {
  background: #b8c4cf;
  border: 3px solid #eef2f5;
}

@media (max-width: 1000px) {
  .trader-desk-grid,
  .trader-workflow-lanes {
    grid-template-columns: 1fr;
  }

  .trader-board-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .topbar,
  .mode-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .grid,
  .status-banner {
    width: min(100% - 20px, 1600px);
  }

  .mode-btn {
    flex: 1 1 140px;
  }

  .trader-board-kpis,
  .blend-decision-summary {
    grid-template-columns: 1fr;
  }
}

/* Regression Results */
#regression-results h3 {
  font-size: 14px;
  margin: 12px 0 8px;
  color: var(--accent);
}
#regression-summary-table td {
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 12px;
}
.regression-plots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.regression-plots .plot-card {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.regression-plots .plot-card img {
  width: 100%;
  border-radius: 4px;
}
.regression-plots .plot-card p {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Advanced fields toggle ── */
.adv-toggle {
  margin-top: 10px;
  font-size: 12px;
  padding: 6px 10px;
  color: var(--muted);
  border-color: #233649;
}

.adv-toggle:hover {
  color: var(--text);
}

.adv-group {
  margin-top: 12px;
}

.adv-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent-2);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #1e3448;
}

/* ── Field tips (tooltips inline) ── */
.field-with-tip {
  position: relative;
}

.field-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 240px;
  background: #0d2035;
  border: 1px solid #2c4a65;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 400;
  color: #b8d4ec;
  line-height: 1.45;
  z-index: 10;
  pointer-events: none;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.field-with-tip:focus-within .field-tip,
.field-with-tip input:hover + .field-tip {
  display: block;
}

/* Show tip on label hover too */
.field-with-tip:hover .field-tip {
  display: block;
}

/* ── Recommended banner ── */
.recommended-banner {
  background: linear-gradient(135deg, #0d2a1a, #112b22);
  border: 1px solid #2b6d50;
  border-radius: 12px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 14px;
  align-items: center;
}

.recommended-label {
  grid-column: 1;
  grid-row: 1;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #63d48f;
  background: rgba(99,212,143,0.12);
  border: 1px solid rgba(99,212,143,0.3);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  align-self: start;
  margin-top: 2px;
}

.recommended-recipe {
  grid-column: 2;
  grid-row: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.recommended-chips {
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.recommended-note {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  color: var(--muted);
}

/* ── Column preset buttons ── */
.col-preset-wrap {
  display: flex;
  gap: 4px;
  align-items: end;
}

.col-preset-btn {
  font-size: 12px;
  padding: 7px 10px;
}

.col-preset-btn.active-preset {
  background: rgba(44,197,181,0.15);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* ── Admin toggle row ── */
.admin-toggle-row {
  display: flex;
  justify-content: flex-start;
  padding: 0;
}

.admin-toggle-btn {
  font-size: 12px;
  padding: 6px 12px;
  color: var(--muted);
  border-color: #233649;
}

.admin-toggle-btn:hover {
  color: var(--text);
}

.admin-panel {
  /* hidden by default via .hidden class */
}

/* ── PDF review gate — inline editable ── */
.review-gate-header {
  margin-bottom: 10px;
}

.review-gate-title {
  font-size: 13px;
  font-weight: 700;
  color: #fbd78a;
  display: block;
  margin-bottom: 3px;
}

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

.review-fields-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.review-field-item {
  display: grid;
  gap: 3px;
  padding: 5px 7px 5px 9px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
/* Low-confidence fields get a strong amber left-border + warm background */
.review-field-item.review-item-low {
  border-left-color: var(--accent, #f5a524);
  background: rgba(245,165,36,0.08);
}
/* Missing fields get a muted red left-border */
.review-field-item.review-item-missing {
  border-left-color: var(--danger, #f56a6a);
  background: rgba(245,106,106,0.06);
}

.review-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--label);
  display: flex;
  align-items: center;
  gap: 5px;
}

.review-field-conf {
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
}

.review-conf-high {
  background: rgba(99,212,143,0.15);
  color: #8be3ae;
}

.review-conf-low {
  background: rgba(245,165,36,0.22);
  color: #f8cf79;
}

.review-conf-missing {
  background: rgba(245,106,106,0.18);
  color: #f0a0a0;
}

.review-field-input {
  width: 100%;
  color: var(--text);
  background: #0e1a28;
  border: 1px solid #2c4258;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 13px;
}

.review-field-input.low-conf {
  border-color: var(--accent, #f5a524);
  background: rgba(245,165,36,0.07);
  color: #fde6aa;
}

.review-field-input:focus {
  outline: 1px solid var(--accent-2);
  border-color: var(--accent-2);
}

/* ── Empty states ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 6px;
  text-align: center;
}

.empty-state-icon {
  font-size: 28px;
  opacity: 0.4;
  line-height: 1;
}

.empty-state-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.empty-state-sub {
  font-size: 12px;
  color: #7a99b5;
  max-width: 320px;
  line-height: 1.45;
}

/* ── Run Summary structured cards ── */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.summary-stat-card {
  background: #0d1826;
  border: 1px solid #264055;
  border-radius: 10px;
  padding: 10px 12px;
}

.summary-stat-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.summary-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-top: 3px;
  line-height: 1.2;
}

.summary-stat-sub {
  font-size: 11px;
  color: #7a99b5;
  margin-top: 2px;
}

.summary-raw-wrap {
  margin-top: 6px;
}

.summary-raw-toggle {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.summary-raw-toggle::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s;
}

details[open] .summary-raw-toggle::before {
  transform: rotate(90deg);
}

.summary-raw-wrap .summary {
  margin-top: 6px;
}

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

/* ── Data Hub sub-tabs ── */
.hub-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}

.hub-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px 10px;
  margin-bottom: -1px;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
}

.hub-tab-btn:hover:not(.active) {
  color: var(--text);
}

.hub-tab-btn.active {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
  background: transparent;
}

.hub-section.hub-hidden {
  display: none;
}

/* ── Mobile scroll hint ── */
@media (max-width: 720px) {
  .table-wrap {
    position: relative;
  }

  .table-wrap::after {
    content: "scroll →";
    display: block;
    text-align: right;
    font-size: 10px;
    color: #4a6a84;
    padding: 3px 6px 0;
    pointer-events: none;
  }
}

/* ── Step connector in flow nav ── */
.flow-nav {
  position: relative;
  align-items: center;
}

.flow-btn {
  position: relative;
  flex: 1;
}

.flow-btn:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #3d576e;
  pointer-events: none;
  z-index: 1;
}

/* ── Login page styles (shared from styles.css) ── */
body.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1400px 540px at 10% -5%, #274c70, transparent 60%),
    radial-gradient(900px 400px at 90% 110%, #1a3a2e, transparent 55%),
    var(--bg-0);
}

.login-wrap {
  width: 100%;
  max-width: 400px;
  padding: 24px 16px;
}

.login-brand {
  text-align: center;
  margin-bottom: 28px;
}

.login-brand h1 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}

.login-brand p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 28px 24px;
}

.login-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.login-tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 0 0 12px;
  margin-bottom: -1px;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
}

.login-tab-btn.active {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
}

.login-tab-btn:hover:not(.active) {
  color: var(--text);
}

.login-form-section {
  display: none;
}

.login-form-section.active {
  display: block;
}

.login-field {
  margin-bottom: 16px;
}

.login-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--label);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  text-transform: uppercase;
  grid: unset;
}

.login-field input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s;
}

.login-field input:focus {
  border-color: var(--accent-2);
}

.login-submit-btn {
  width: 100%;
  margin-top: 8px;
  padding: 11px 0;
  background: linear-gradient(180deg, #ffc35c, var(--accent));
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  color: var(--accent-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1px;
  transition: opacity 0.15s;
}

.login-submit-btn:hover {
  opacity: 0.9;
  filter: none;
}

.login-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.login-error {
  display: none;
  background: #3a1212;
  border: 1px solid #8a3a3a;
  border-radius: 8px;
  color: #f3b6b6;
  font-size: 13px;
  margin-top: 14px;
  padding: 10px 12px;
}

.login-error.visible {
  display: block;
}

.login-footer-note {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 20px;
}

/* ── Mode switcher ── */
.mode-bar {
  display: flex;
  gap: 2px;
  padding: 0 24px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 18, 28, 0.6);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.mode-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 18px 13px;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.1px;
}

.mode-btn:hover:not(.active) {
  color: var(--text);
  filter: none;
  background: transparent;
}

.mode-btn.active {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
  background: transparent;
}

.mode-section {
  display: none;
}

.mode-section.active {
  display: contents;
}

/* ── New Screen button in topbar ── */
.new-screen-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  transition: border-color 0.15s, color 0.15s;
}

.new-screen-btn:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  filter: none;
  background: transparent;
}

/* ── Cargo Screening mode ── */
.screening-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .screening-layout {
    grid-template-columns: 1fr;
  }
}

.verdict-card {
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
  background: var(--card);
}

.verdict-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.verdict-badge {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  padding: 6px 18px;
  border-radius: 10px;
  line-height: 1.2;
}

.verdict-badge.pass {
  background: rgba(99, 212, 143, 0.15);
  color: #63d48f;
  border: 1px solid rgba(99, 212, 143, 0.3);
}

.verdict-badge.fail {
  background: rgba(245, 106, 106, 0.15);
  color: #f56a6a;
  border: 1px solid rgba(245, 106, 106, 0.3);
}

.verdict-badge.unknown {
  background: rgba(157, 179, 200, 0.12);
  color: #9db3c8;
  border: 1px solid rgba(157, 179, 200, 0.2);
}

.verdict-cargo-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

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

.verdict-props {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.verdict-prop {
  background: #0d1826;
  border: 1px solid #1e3450;
  border-radius: 8px;
  padding: 7px 10px;
}

.verdict-prop-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.verdict-prop-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}

.verdict-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 8px;
  color: var(--muted);
}

.verdict-empty-icon {
  font-size: 36px;
  opacity: 0.3;
}

.verdict-empty-text {
  font-size: 14px;
  color: var(--muted);
}
.verdict-empty-hint {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.6;
  margin-top: 4px;
  font-style: italic;
}

/* ── My Cargoes (Component Library) ── */
.library-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.library-search {
  flex: 1;
  min-width: 160px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
}

.library-search:focus {
  border-color: var(--accent-2);
}

.library-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.library-table th {
  text-align: left;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--line);
}

.library-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #1a2e42;
  vertical-align: middle;
  color: var(--text);
}

.library-table tr:hover td {
  background: rgba(48, 197, 181, 0.05);
}

.library-table .lib-actions {
  display: flex;
  gap: 6px;
}

.lib-use-btn {
  background: rgba(44, 197, 181, 0.12);
  border: 1px solid rgba(44, 197, 181, 0.3);
  border-radius: 6px;
  color: var(--accent-2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  transition: background 0.15s;
}

.lib-use-btn:hover {
  background: rgba(44, 197, 181, 0.22);
  filter: none;
}

.lib-del-btn {
  background: transparent;
  border: 1px solid #2a3f55;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 9px;
  transition: border-color 0.15s, color 0.15s;
}

.lib-del-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
  filter: none;
}

.lib-del-btn-armed {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  background: rgba(220, 38, 38, 0.1) !important;
  font-weight: 700;
  animation: armed-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes armed-pulse {
  from { opacity: 1; }
  to   { opacity: 0.7; }
}

.library-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
}

/* ── Run History ── */
.run-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.run-history-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  background: #0d1826;
  border: 1px solid #1e3450;
  border-radius: 9px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.run-history-item:hover {
  border-color: var(--accent-2);
  background: rgba(44, 197, 181, 0.06);
}

.run-history-item-active {
  border-color: var(--accent) !important;
  background: rgba(245, 165, 36, 0.08) !important;
}

.run-history-active-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(245, 165, 36, 0.18);
  color: var(--accent);
  margin-left: auto;
  flex-shrink: 0;
}

.run-history-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(44, 197, 181, 0.12);
  color: var(--accent-2);
}

.run-history-type.evaluate {
  background: rgba(245, 165, 36, 0.12);
  color: var(--accent);
}

.run-history-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.run-history-meta {
  font-size: 11px;
  color: var(--muted);
}

.run-history-right {
  text-align: right;
  flex-shrink: 0;
}

.run-history-cost {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.run-history-ts {
  font-size: 10px;
  color: #4a6a84;
  margin-top: 1px;
}

/* ── Scenario card (in saved scenarios dropdown replacement) ── */
.scenario-result-preview {
  background: #0d1826;
  border: 1px solid #1e3450;
  border-radius: 9px;
  padding: 10px 12px;
  margin-top: 8px;
  display: none;
}

.scenario-result-preview.visible {
  display: block;
}

.scenario-preview-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.scenario-preview-label {
  font-size: 11px;
  color: var(--muted);
  margin-right: 4px;
}

/* ── Topbar subtitle tweak ── */
.topbar-subtitle {
  font-size: 12px;
  color: #4a7a9b;
  margin: 2px 0 0;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* ──────────────────────────────────────────────────────────────────────────
   2026 visual refresh: editorial control room, no workflow changes.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --bg-0: #050b12;
  --bg-1: #0a1520;
  --bg-2: #102234;
  --card: rgba(17, 34, 50, 0.78);
  --card-2: rgba(10, 22, 35, 0.86);
  --card-solid: #0e1d2d;
  --line: rgba(129, 164, 194, 0.20);
  --line-strong: rgba(156, 191, 220, 0.34);
  --text: #f5fbff;
  --muted: #a8bed3;
  --label: #d5e4f2;
  --accent: #f0a83b;
  --accent-2: #2cd2c4;
  --accent-3: #87a8ff;
  --danger: #ff6f75;
  --ok: #69dfa1;
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 16px 46px rgba(0, 0, 0, 0.25);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
}

html {
  background: var(--bg-0);
}

body {
  min-height: 100vh;
  font-family: "Manrope", "Avenir Next", sans-serif;
  background:
    radial-gradient(900px 420px at 8% -8%, rgba(44, 210, 196, 0.24), transparent 62%),
    radial-gradient(760px 420px at 92% 3%, rgba(240, 168, 59, 0.18), transparent 60%),
    radial-gradient(660px 500px at 50% 34%, rgba(135, 168, 255, 0.11), transparent 64%),
    linear-gradient(145deg, #07111b 0%, #0d1c2c 42%, #050b12 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 78%);
}

::selection {
  background: rgba(44, 210, 196, 0.28);
  color: #ffffff;
}

.topbar {
  margin: 18px auto 10px;
  width: min(1600px, calc(100% - 40px));
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(19, 40, 59, 0.82), rgba(7, 18, 29, 0.72)),
    radial-gradient(420px 160px at 8% 0%, rgba(44, 210, 196, 0.14), transparent 65%);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px) saturate(1.1);
}

h1 {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -1.2px;
  line-height: 0.95;
  background: linear-gradient(92deg, #ffffff 0%, #d8f9ff 42%, #ffd18a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topbar-subtitle {
  margin-top: 9px;
  color: #9fc9df;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.user-bar {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5, 13, 22, 0.42);
}

.mode-bar {
  width: min(1600px, calc(100% - 40px));
  margin: 0 auto 14px;
  padding: 7px;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(6, 16, 26, 0.72);
  box-shadow: 0 14px 46px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.mode-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 18px;
  color: #afc5d8;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.mode-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: #eef8ff;
  transform: translateY(-1px);
}

.mode-btn.active {
  color: #061018;
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, var(--accent-2), #a8f0e8 45%, #ffd089 100%);
  box-shadow: 0 10px 28px rgba(44, 210, 196, 0.18);
}

.grid {
  width: min(1600px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 34px;
  gap: 18px;
}

.flow-nav,
.card,
.stability-overview,
.stability-data-panel,
.model-performance-panel,
.stability-training-lab-panel,
.summary,
.detail-card,
.datahub-block,
.dist-meta,
.chart-wrap,
.verdict-card,
.scenario-result-preview,
.run-history-item {
  border-color: var(--line);
  background:
    linear-gradient(145deg, rgba(18, 37, 55, 0.82), rgba(8, 19, 31, 0.86)),
    radial-gradient(420px 140px at 0% 0%, rgba(44, 210, 196, 0.08), transparent 64%);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 18px;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(44, 210, 196, 0.18), transparent 22%, transparent 78%, rgba(240, 168, 59, 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%);
  opacity: 0.75;
}

.card > * {
  position: relative;
  z-index: 1;
}

h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 20px;
  letter-spacing: -0.35px;
}

h2::before {
  content: "";
  width: 9px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 22px rgba(44, 210, 196, 0.35);
}

.small-note {
  color: #b7cee2;
  line-height: 1.45;
}

.flow-nav {
  border-radius: var(--radius-lg);
  padding: 10px;
}

.flow-btn {
  border-radius: 999px;
  border-color: rgba(151, 185, 214, 0.24);
  color: #c7d9e9;
  background: rgba(255, 255, 255, 0.035);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.flow-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(44, 210, 196, 0.54);
  background: rgba(44, 210, 196, 0.08);
}

.flow-btn.active {
  color: #061018;
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, var(--accent), #ffd68e);
}

input,
select,
textarea,
.library-search,
.stability-formula-controls input,
.stability-formula-controls select,
.coef-input {
  border-color: rgba(139, 174, 205, 0.24);
  background: rgba(4, 13, 22, 0.74);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

input:focus,
select:focus,
textarea:focus,
.library-search:focus,
.coef-input:focus {
  outline: none;
  border-color: rgba(44, 210, 196, 0.75);
  box-shadow: 0 0 0 4px rgba(44, 210, 196, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: rgba(6, 18, 30, 0.92);
}

button,
.new-screen-btn,
.logout-btn,
.lib-use-btn,
.lib-del-btn {
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

button {
  background: linear-gradient(135deg, #ffbf57, #f0a83b 52%, #ffdd9f);
  box-shadow: 0 12px 26px rgba(240, 168, 59, 0.20);
}

button:hover {
  transform: translateY(-1px);
  filter: none;
  box-shadow: 0 16px 34px rgba(240, 168, 59, 0.26);
}

button.ghost,
.new-screen-btn,
.logout-btn {
  border-color: rgba(151, 185, 214, 0.28);
  background: rgba(255, 255, 255, 0.035);
  color: #d7e8f5;
  box-shadow: none;
}

button.ghost:hover,
.new-screen-btn:hover {
  border-color: rgba(44, 210, 196, 0.62);
  background: rgba(44, 210, 196, 0.10);
  color: #eaffff;
}

.status-banner {
  width: min(1600px, calc(100% - 40px));
  margin: 0 auto 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

th {
  background: rgba(9, 24, 39, 0.96);
  color: #e3f1fb;
  font-size: 11px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

td {
  border-bottom-color: rgba(136, 170, 200, 0.14);
}

tbody tr:hover td {
  background: rgba(44, 210, 196, 0.055);
}

.table-wrap,
.datahub-table-wrap {
  border-color: rgba(129, 164, 194, 0.18);
  border-radius: var(--radius-md);
  background: rgba(4, 12, 21, 0.32);
}

.risk-chip,
.prov-chip,
.badge,
.run-history-type,
.lib-use-btn,
.lib-del-btn {
  border-radius: 999px;
}

.stability-data-card,
.model-performance-card,
.stability-lab-card,
.stab-card,
.stability-formula-metric,
.verdict-prop {
  border-color: rgba(151, 185, 214, 0.22);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(18, 39, 59, 0.9), rgba(7, 18, 30, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 28px rgba(0, 0, 0, 0.18);
}

.stability-data-value,
.model-performance-value,
.stability-lab-value,
.stab-value,
.stability-formula-metric strong {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: -0.4px;
}

.stability-formula-sandbox {
  border-radius: var(--radius-xl);
  padding: 16px;
  background:
    radial-gradient(900px 260px at -10% 0%, rgba(240, 168, 59, 0.22), transparent 62%),
    radial-gradient(760px 260px at 110% 12%, rgba(44, 210, 196, 0.22), transparent 60%),
    linear-gradient(135deg, rgba(17, 35, 52, 0.96), rgba(5, 14, 24, 0.96));
  box-shadow: var(--shadow-lg);
}

.stability-lab-panel-title {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 18px;
}

.verdict-card {
  min-height: 300px;
  border-radius: var(--radius-xl);
}

.verdict-badge {
  border-radius: 999px;
}

.chart-wrap,
.dist-meta {
  border-radius: var(--radius-lg);
}

.chart-line {
  stroke-width: 3.6;
  filter: drop-shadow(0 0 10px rgba(44, 210, 196, 0.35));
}

.mono,
code,
pre,
.summary {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
}

.summary {
  border-radius: var(--radius-md);
  background: rgba(4, 12, 21, 0.68);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: rgba(5, 12, 20, 0.55);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(44, 210, 196, 0.42), rgba(240, 168, 59, 0.38));
  border: 3px solid rgba(5, 12, 20, 0.8);
  border-radius: 999px;
}

@media (prefers-reduced-motion: no-preference) {
  .card,
  .flow-nav,
  .mode-bar {
    animation: surface-rise 420ms ease both;
  }

  @keyframes surface-rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* 2026b polish: stronger hierarchy for the app shell and model workspaces. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(520px 360px at 18% 22%, rgba(255, 255, 255, 0.045), transparent 72%),
    radial-gradient(500px 360px at 82% 62%, rgba(44, 210, 196, 0.065), transparent 70%);
  mix-blend-mode: screen;
}

.topbar {
  min-height: 96px;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.topbar::before {
  content: "";
  position: absolute;
  inset: auto -80px -130px auto;
  width: 420px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(240, 168, 59, 0.19), transparent 68%);
  pointer-events: none;
}

.topbar > * {
  position: relative;
  z-index: 1;
}

.topbar-subtitle::before {
  content: "Live data hub";
  display: inline-flex;
  margin-right: 10px;
  padding: 4px 9px;
  border: 1px solid rgba(44, 210, 196, 0.28);
  border-radius: 999px;
  color: #bdf8ef;
  background: rgba(44, 210, 196, 0.08);
  letter-spacing: 0.08em;
}

.mode-section {
  width: 100%;
}

.mode-section.active {
  animation: mode-fade 220ms ease both;
}

@keyframes mode-fade {
  from {
    opacity: 0.84;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flow-nav {
  position: sticky;
  top: 10px;
  z-index: 20;
}

.card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  border-color: rgba(44, 210, 196, 0.28);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.34);
  transform: translateY(-1px);
}

.card:has(.stability-training-lab-panel),
.card:has(.model-performance-panel),
.card:has(.stability-data-panel),
.card:has(.stability-overview) {
  background:
    linear-gradient(150deg, rgba(16, 36, 55, 0.9), rgba(7, 17, 29, 0.92)),
    radial-gradient(560px 220px at 100% 0%, rgba(135, 168, 255, 0.12), transparent 70%);
}

.card:has(.stability-training-lab-panel) h2::after,
.card:has(.model-performance-panel) h2::after,
.card:has(.stability-data-panel) h2::after,
.card:has(.stability-overview) h2::after {
  content: "model workspace";
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid rgba(135, 168, 255, 0.23);
  border-radius: 999px;
  color: #cbd8ff;
  background: rgba(135, 168, 255, 0.07);
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

label {
  color: #dceaf6;
}

label:focus-within {
  color: #ffffff;
}

input,
select,
textarea {
  min-height: 38px;
}

textarea {
  line-height: 1.45;
}

button:active {
  transform: translateY(0);
}

button:disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

.actions {
  align-items: center;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
}

tr:last-child td {
  border-bottom: 0;
}

.table-wrap::before,
.datahub-table-wrap::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 3;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44, 210, 196, 0.42), transparent);
}

.summary-cards,
.scenario-grid,
.datahub-grid,
.screening-layout,
.stability-data-grid,
.model-performance-grid,
.stability-lab-grid,
.stability-formula-result-grid {
  gap: 12px;
}

.summary-stat-card,
.scenario-result-preview,
.empty-state,
.run-history-item,
.detail-card,
.datahub-block,
.stability-data-card,
.model-performance-card,
.stability-lab-card,
.stability-formula-metric,
.stab-card {
  position: relative;
  overflow: hidden;
}

.summary-stat-card::after,
.stability-data-card::after,
.model-performance-card::after,
.stability-lab-card::after,
.stability-formula-metric::after,
.stab-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 36%);
  opacity: 0.75;
}

.summary-stat-label,
.stability-data-label,
.model-performance-label,
.stability-lab-label,
.summary-stat-sub {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stability-data-value,
.model-performance-value,
.stability-lab-value,
.summary-stat-value,
.stab-value {
  font-variant-numeric: tabular-nums;
}

.stability-formula-sandbox {
  border-color: rgba(255, 214, 142, 0.28);
}

.stability-formula-controls {
  padding: 12px;
  border: 1px solid rgba(151, 185, 214, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(4, 12, 21, 0.32);
}

.stability-lab-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stability-lab-panel-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 0 16px rgba(44, 210, 196, 0.6);
}

.empty-state {
  border: 1px dashed rgba(151, 185, 214, 0.24);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(4, 12, 21, 0.25);
}

.empty-state-icon {
  color: var(--accent-2);
  text-shadow: 0 0 22px rgba(44, 210, 196, 0.36);
}

.verdict-empty-icon {
  color: var(--accent);
  text-shadow: 0 0 22px rgba(240, 168, 59, 0.38);
}

.risk-bad,
.risk-fail,
.risk-high {
  box-shadow: 0 0 0 1px rgba(255, 111, 117, 0.22), 0 0 22px rgba(255, 111, 117, 0.10);
}

.risk-good,
.risk-pass,
.risk-low {
  box-shadow: 0 0 0 1px rgba(105, 223, 161, 0.22), 0 0 22px rgba(105, 223, 161, 0.10);
}

.chart-wrap svg,
.dist-chart {
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.22));
}

@media (max-width: 900px) {
  .topbar,
  .mode-bar,
  .grid,
  .status-banner {
    width: min(100% - 24px, 1600px);
  }

  .topbar {
    align-items: flex-start;
    border-radius: 20px;
  }

  .mode-bar {
    border-radius: 18px;
  }

  .mode-btn {
    flex: 1 1 160px;
  }

  .flow-nav {
    position: static;
  }

  .decision-hero,
  .decision-readiness-grid,
  .decision-workflow-grid,
  .decision-trust-topline {
    grid-template-columns: 1fr;
    display: grid;
  }

  .decision-kpi-grid,
  .decision-card-grid,
  .decision-status-grid,
  .decision-validation-summary,
  .decision-chart-grid,
  .decision-demo-grid,
  .decision-report-section-grid,
  .blend-decision-summary,
  .blend-decision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  h1 {
    font-size: 28px;
  }

  .topbar-subtitle {
    letter-spacing: 0.1em;
  }

  .topbar-subtitle::before {
    display: flex;
    width: max-content;
    margin: 0 0 8px;
  }

  .card {
    border-radius: 18px;
    padding: 14px;
  }

  .decision-kpi-grid,
  .decision-card-grid,
  .decision-status-grid,
  .decision-validation-summary,
  .decision-chart-grid,
  .decision-demo-grid,
  .decision-report-section-grid,
  .blend-decision-summary,
  .blend-decision-grid {
    grid-template-columns: 1fr;
  }

  .card:has(.stability-training-lab-panel) h2::after,
  .card:has(.model-performance-panel) h2::after,
  .card:has(.stability-data-panel) h2::after,
  .card:has(.stability-overview) h2::after {
    display: none;
  }
}

/* Final trader cockpit overrides. Keep this block last. */
:root {
  --bg-0: #eef2f5;
  --bg-1: #f6f8fa;
  --card: #ffffff;
  --card-2: #f8fafc;
  --line: #d5dde5;
  --line-strong: #aebbc8;
  --text: #17212b;
  --muted: #627181;
  --label: #263442;
  --accent: #b7791f;
  --accent-2: #0f766e;
  --danger: #b91c1c;
  --ok: #047857;
  --shadow-md: 0 8px 22px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.11);
  --radius-xl: 8px;
  --radius-lg: 8px;
  --radius-md: 6px;
}

html,
body {
  background: #f6f8fa !important;
}

body {
  color: var(--text);
}

body::before,
body::after,
.topbar::before,
.card::before,
.summary-stat-card::after,
.stability-data-card::after,
.model-performance-card::after,
.stability-lab-card::after,
.stability-formula-metric::after,
.stab-card::after {
  display: none !important;
}

.topbar {
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 14px 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

h1 {
  color: var(--text);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-family: "Manrope", "Avenir Next", sans-serif;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: 0;
}

.topbar-subtitle {
  color: var(--muted);
  letter-spacing: 0.04em;
}

.topbar-subtitle::before {
  content: "Pilot desk";
  color: #0f766e;
  border-color: #99d5ce;
  background: #e7f6f4;
}

.mode-bar {
  width: 100%;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
}

.mode-btn {
  border-radius: 0;
  color: #51606f;
  background: transparent;
  font-weight: 800;
}

.mode-btn:hover:not(.active) {
  color: var(--text);
  background: #f2f5f8;
  transform: none;
}

.mode-btn.active {
  color: #0f766e;
  border-bottom-color: #0f766e;
  background: transparent;
  box-shadow: none;
}

.grid,
.status-banner {
  width: min(1600px, calc(100% - 32px));
}

.grid {
  padding-top: 16px;
  gap: 12px;
}

.card,
.flow-nav,
.stability-overview,
.stability-data-panel,
.model-performance-panel,
.stability-training-lab-panel,
.summary,
.detail-card,
.datahub-block,
.dist-meta,
.chart-wrap,
.verdict-card,
.scenario-result-preview,
.run-history-item,
.decision-score,
.decision-claim,
.decision-list-block,
.decision-kpi-card,
.decision-model-card,
.decision-status-card,
.decision-validation-card,
.decision-chart-card,
.decision-demo-card,
.blend-decision-panel,
.blend-decision-count,
.blend-decision-card,
.trader-desk-primary,
.trader-desk-side,
.trader-lane,
.trader-demo-table-wrap {
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}

.card {
  padding: 15px;
  overflow: visible;
}

.card:hover {
  transform: none;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

h2 {
  color: var(--text);
  font-family: "Manrope", "Avenir Next", sans-serif;
  font-size: 17px;
  letter-spacing: 0;
}

h2::before {
  display: none;
}

.small-note,
.decision-model-target,
.decision-model-metrics,
.decision-demo-meta,
.blend-decision-count-label,
.blend-decision-meta,
.blend-decision-labs,
.decision-list-block ol,
.decision-claim p,
.decision-model-card p,
.trader-lane p {
  color: var(--muted);
}

input,
select,
textarea,
.library-search,
.stability-formula-controls input,
.stability-formula-controls select,
.coef-input {
  color: var(--text);
  background: #ffffff;
  border-color: #c8d2dc;
  border-radius: 6px;
  box-shadow: none;
}

button,
.new-screen-btn,
.logout-btn,
.lib-use-btn,
.lib-del-btn {
  border-radius: 6px;
  box-shadow: none;
  transform: none;
}

button {
  color: #ffffff;
  background: #0f766e;
  border: 1px solid #0f766e;
}

button:hover {
  transform: none;
  background: #115e59;
  box-shadow: none;
}

button.ghost,
.new-screen-btn,
.logout-btn {
  color: #263442;
  background: #ffffff;
  border: 1px solid #c8d2dc;
}

button.ghost:hover,
.new-screen-btn:hover,
.logout-btn:hover {
  color: #0f766e;
  border-color: #0f766e;
  background: #eefbf9;
}

.flow-nav {
  position: static;
}

.flow-btn {
  border-radius: 6px;
  color: #4b5b6b;
  background: #f8fafc;
  border-color: var(--line);
}

.flow-btn.active {
  color: #ffffff;
  background: #17212b;
  border-color: #17212b;
}

.flow-btn:not(:last-child)::after,
.table-wrap::before,
.datahub-table-wrap::before {
  display: none;
}

.table-wrap,
.datahub-table-wrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
}

table {
  color: var(--text);
  background: #ffffff;
}

th {
  color: #465666;
  background: #f1f5f9;
  border-bottom: 1px solid var(--line);
}

td {
  color: #1f2933;
  border-bottom: 1px solid #edf1f5;
}

tbody tr:hover td {
  background: #f7fafc;
}

#results-table tr.selected td {
  background: #e7f6f4;
}

.risk-good,
.risk-pass,
.risk-low,
.prov-success,
.decision-test,
.tradable {
  color: #047857;
  border-color: #9ad9bf !important;
  background: #ecfdf5;
  box-shadow: none;
}

.risk-medium,
.risk-warn,
.prov-warn,
.decision-confirm,
.lab {
  color: #92400e;
  border-color: #f4c684 !important;
  background: #fffbeb;
  box-shadow: none;
}

.risk-bad,
.risk-fail,
.risk-fail-additive,
.risk-high,
.prov-error,
.decision-avoid {
  color: #b91c1c;
  border-color: #f0a4a4 !important;
  background: #fef2f2;
  box-shadow: none;
}

.risk-unknown,
.prov-info,
.decision-review,
.unknown {
  color: #475569;
  border-color: #cbd5e1 !important;
  background: #f8fafc;
  box-shadow: none;
}

.decision-hero {
  align-items: center;
  border-left: 4px solid #0f766e;
}

.decision-score-value,
.decision-kpi-value,
.blend-decision-count-value,
.model-performance-value,
.stability-data-value,
.stability-lab-value,
.stab-value {
  color: #17212b;
  font-family: "Manrope", "Avenir Next", sans-serif;
  letter-spacing: 0;
}

.decision-score-label,
.decision-claim-title,
.decision-status-value,
.decision-validation-class,
.decision-model-status {
  color: #0f766e;
}

.decision-chart {
  border-color: var(--line);
  background: #ffffff;
}

.trader-opportunity-card {
  border-top: 4px solid #17212b;
}

.trader-desk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
  gap: 12px;
}

.trader-desk-primary,
.trader-desk-side,
.trader-lane,
.trader-demo-table-wrap {
  padding: 12px;
}

.trader-status-line,
.trader-model-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trader-status-chip,
.risk-chip,
.prov-chip,
.decision-confidence {
  border-radius: 999px;
  font-weight: 800;
}

.trader-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  font-size: 11px;
  border: 1px solid;
}

.trader-board-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.trader-board-kpi {
  min-height: 88px;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px;
}

.trader-board-kpi span,
.trader-readout-row span,
.trader-table-title {
  color: #657586;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trader-board-kpi strong {
  display: block;
  margin-top: 8px;
  color: #17212b;
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.trader-board-kpi small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.trader-model-pill {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 150px;
  padding: 7px 9px;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 12px;
}

.trader-model-pill strong {
  text-transform: uppercase;
  font-size: 10px;
}

.trader-readout-row {
  display: grid;
  gap: 4px;
  padding: 9px 0;
  border-top: 1px solid #edf1f5;
}

.trader-readout-row:first-of-type {
  border-top: 0;
}

.trader-workflow-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.trader-lane {
  min-height: 110px;
}

.trader-demo-table-wrap {
  margin-top: 10px;
  padding: 0;
  overflow: hidden;
}

.trader-table-title {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.blend-decision-panel {
  background: #f8fafc;
}

.blend-decision-card {
  min-height: 158px;
  box-shadow: none;
}

.blend-decision-card:hover {
  transform: none;
  border-color: #0f766e;
}

.blend-commercial-picks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.blend-commercial-pick {
  display: grid;
  gap: 5px;
  min-height: 90px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.blend-commercial-pick span {
  color: #657586;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blend-commercial-pick strong {
  color: #17212b;
  font-size: 14px;
}

.blend-commercial-pick small {
  color: var(--muted);
}

.risk-profile {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.risk-profile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.risk-profile-label {
  color: #657586;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.risk-profile-action {
  margin-top: 4px;
  color: #17212b;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.risk-profile-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.risk-profile-score {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: end;
  gap: 2px;
}

.risk-profile-score span {
  color: #17212b;
  font-size: 25px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.risk-profile-score small {
  margin-bottom: 4px;
  color: #657586;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.risk-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.risk-profile-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) auto;
  gap: 6px 8px;
  align-items: center;
  min-height: 58px;
  border: 1px solid #edf1f5;
  border-radius: 6px;
  padding: 8px;
  background: #ffffff;
}

.risk-profile-row span {
  font-weight: 800;
}

.risk-profile-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.35;
}

.risk-profile-lower {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.risk-profile-lower > div,
.risk-profile-audit {
  border: 1px solid #edf1f5;
  border-radius: 6px;
  padding: 10px;
  background: #ffffff;
}

.risk-profile-lower h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.risk-profile-lower ol {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.risk-profile-audit {
  margin: 0 12px 12px;
}

.risk-profile-audit summary {
  cursor: pointer;
  font-weight: 800;
}

.risk-profile-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.risk-profile-audit-grid div {
  display: grid;
  gap: 3px;
  border-top: 1px solid #edf1f5;
  padding-top: 8px;
}

.risk-profile-audit-grid span {
  color: var(--muted);
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  word-break: break-word;
}

.mono,
code,
pre,
.summary,
.decision-model-metrics {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
}

body:not(.admin-visible) .admin-only-card {
  display: none !important;
}

.cell-trust-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid #d7e0e8;
  background: #f6f8fb;
  color: #536170;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.cell-trust-badge.prov-success {
  border-color: #9bcbb7;
  background: #eefaf5;
  color: #087443;
}

.cell-trust-badge.prov-warn {
  border-color: #e5c678;
  background: #fff8e6;
  color: #8a6100;
}

.cell-trust-badge.prov-error {
  border-color: #efb2a8;
  background: #fff1ef;
  color: #b42318;
}

.blend-comparison-wrap {
  margin: 14px 0;
  border: 1px solid #d9e2ea;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.blend-comparison-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5ebf0;
}

.blend-comparison-head h3 {
  margin: 0;
  font-size: 15px;
}

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

.blend-comparison-scroll {
  overflow-x: auto;
}

.blend-comparison-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.blend-comparison-table th,
.blend-comparison-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #edf1f5;
  border-right: 1px solid #edf1f5;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
}

.blend-comparison-table thead th {
  background: #f4f7fa;
  font-weight: 850;
}

.blend-comparison-table tbody th {
  width: 150px;
  background: #fbfcfd;
  color: #536170;
  font-weight: 850;
}

.blend-comparison-table th[data-blend-decision-idx] {
  cursor: pointer;
}

.blend-comparison-table td.decision-test {
  color: #087443;
  font-weight: 850;
}

.blend-comparison-table td.decision-confirm {
  color: #9a6700;
  font-weight: 850;
}

.blend-comparison-table td.decision-avoid {
  color: #b42318;
  font-weight: 850;
}

@media (max-width: 1000px) {
  .trader-desk-grid,
  .trader-workflow-lanes {
    grid-template-columns: 1fr;
  }

  .trader-board-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .topbar,
  .mode-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .grid,
  .status-banner {
    width: min(100% - 20px, 1600px);
  }

  .trader-board-kpis,
  .blend-decision-summary,
  .blend-commercial-picks,
  .risk-profile-grid,
  .risk-profile-lower,
  .risk-profile-audit-grid {
    grid-template-columns: 1fr;
  }

  .risk-profile-head {
    grid-template-columns: 1fr;
  }

  .risk-profile-score {
    justify-items: start;
  }
}

/* ═══════════════════════════════════════════════════
   RUN HISTORY — TYPE BADGES
   ═══════════════════════════════════════════════════ */

.hist-type-opt {
  background: rgba(44, 197, 181, 0.12);
  color: var(--accent-2);
  border-radius: 3px;
}

.hist-type-scr {
  background: rgba(245, 165, 36, 0.12);
  color: var(--accent);
  border-radius: 3px;
}

.run-history-rows {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #4d7a9e;
}

/* ═══════════════════════════════════════════════════
   RESULTS TABLE — EXPANDED ROW STATE
   ═══════════════════════════════════════════════════ */

#results-table tbody tr.row-expanded {
  background: rgba(44, 95, 139, 0.22);
  border-left: 2px solid var(--accent);
}

/* ═══════════════════════════════════════════════════
   DESIGN SYSTEM ENHANCEMENTS
   ═══════════════════════════════════════════════════ */

/* Monospace for all numeric table cells */
td.num,
.num {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, ui-monospace, monospace;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Tighter, consistent numeric column alignment in results */
#results-table td:not(:first-child):not(:last-child) {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#results-table td:first-child {
  font-weight: 600;
}

/* Provenance dots — inline after property values */
.prov-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.prov-measured  { background: #f6fbff; }
.prov-imputed   { background: #64748b; }
.prov-modelled  { background: #7c3aed; }
.prov-missing   { background: #1e3347; border: 1px solid #374151; }

.prov-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #8aa6c0;
  margin-bottom: 8px;
  align-items: center;
}
.prov-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ═══════════════════════════════════════════════════
   ADMIN MODE — 5TH TAB
   ═══════════════════════════════════════════════════ */

/* Show admin tab when role is admin */
.mode-btn-admin {
  border-left: 1px solid var(--line);
  margin-left: 4px;
  opacity: 0.7;
}
.mode-btn-admin.active,
.mode-btn-admin:hover {
  opacity: 1;
}

/* Admin status bar */
.admin-status-bar {
  padding: 10px 14px;
}
.admin-status-grid {
  display: flex;
  gap: 0;
  align-items: stretch;
  flex-wrap: wrap;
}
.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 20px 6px 0;
  margin-right: 20px;
  border-right: 1px solid var(--line);
}
.admin-stat:last-of-type {
  border-right: none;
}
.admin-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #6b8eab;
}
.admin-stat-value {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.admin-stat-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Admin tab navigation within admin mode */
[data-admin-section] {
  display: none;
  padding-top: 14px;
}
[data-admin-section].hub-section-active {
  display: block;
}

/* ═══════════════════════════════════════════════════
   SKELETON LOADING STATES
   ═══════════════════════════════════════════════════ */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.7; }
}

.skeleton {
  background: linear-gradient(90deg, #182d42 25%, #1e3a52 50%, #182d42 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.6s ease-in-out infinite;
  border-radius: 8px;
  min-height: 40px;
}

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

.skeleton-tall {
  min-height: 120px;
}

.skeleton-chart {
  min-height: 180px;
}

.skeleton-table {
  min-height: 80px;
}

.skeleton-line {
  height: 12px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-line-short {
  width: 60%;
}

/* ═══════════════════════════════════════════════════
   FORMULA SANDBOX CARD
   ═══════════════════════════════════════════════════ */

.admin-sandbox-card {
  border-color: #3b2f6e;
  background: linear-gradient(155deg, #1a1535, #141228);
}

.admin-badge-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
  border: 1px solid #5b3fa8;
  border-radius: 4px;
  padding: 2px 7px;
  vertical-align: middle;
  margin-left: 8px;
}

.sandbox-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  margin-top: 10px;
}

.sandbox-controls {
  border: 1px solid #3b2f6e;
  border-radius: 10px;
  padding: 12px;
  background: rgba(124, 58, 237, 0.06);
}

.sandbox-output {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #0d1826;
  font-size: 12px;
  overflow: auto;
}

/* ═══════════════════════════════════════════════════
   CARGO FORM — PRIMARY/SECONDARY FIELD HIERARCHY
   ═══════════════════════════════════════════════════ */

/* Primary fields — larger, more prominent */
.form-grid-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

.form-grid-primary input,
.form-grid-primary select {
  font-size: 15px;
  padding: 10px 12px;
  border-color: #3a5570;
  background: #0b1927;
}

.form-grid-primary label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #e2f0ff;
}

.primary-field-marker {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

/* Field grouping label */
.form-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #4d7a9e;
  margin: 12px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #1e3347;
}

/* ═══════════════════════════════════════════════════
   STEP 2 SCREEN SETUP — GRADE PROMINENT, TUNING COLLAPSED
   ═══════════════════════════════════════════════════ */

.screen-setup-primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid #3a5570;
  border-radius: 10px;
  background: #0b1927;
  margin-bottom: 10px;
}

.screen-setup-primary select,
.screen-setup-primary input {
  font-size: 15px;
  padding: 10px 12px;
}

.screen-setup-primary label {
  font-weight: 700;
  color: #e2f0ff;
}

.adv-tuning-toggle {
  font-size: 12px;
  color: #6b8eab;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  background: none;
  border: none;
  padding: 0;
  font-weight: 600;
}
.adv-tuning-toggle:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════
   STEP 2 CARGO SUMMARY BAR
   ═══════════════════════════════════════════════════ */
.step2-cargo-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.step2-cargo-summary .cs-count {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
.step2-cargo-summary .cs-names {
  color: var(--text);
  font-weight: 600;
}
.step2-cargo-summary .cs-cost {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  font-weight: 600;
  margin-left: auto;
}
.step2-cargo-summary .cs-sep {
  color: var(--line);
}

/* ═══════════════════════════════════════════════════
   RESULT TABLE ENHANCEMENTS
   ═══════════════════════════════════════════════════ */

/* Verdict badge — flat, no gradient */
.verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.verdict-accept      { background: rgba(34,197,94,0.15);  color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.verdict-screen-labs { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.verdict-defer       { background: rgba(249,115,22,0.15); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); }
.verdict-reject      { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.verdict-unknown     { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); }

/* Row highlight on select */
#results-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
#results-table tbody tr:hover {
  background: rgba(44, 95, 139, 0.15);
}
#results-table tbody tr.row-selected {
  background: rgba(44, 95, 139, 0.28);
  outline: 1px solid #2d5f8b;
}

/* Expandable result row */
.result-expand-row td {
  white-space: normal;
  background: rgba(11, 25, 39, 0.85);
  padding: 0;
  border-bottom: 1px solid #284159;
}
.result-expand-inner {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.result-expand-section {
  border: 1px solid #1e3347;
  border-radius: 8px;
  padding: 10px;
  background: #0d1c2e;
}
.result-expand-section h4 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #4d7a9e;
}
.result-expand-row-data {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px 8px;
  align-items: center;
  font-size: 12px;
}
.result-expand-prop-name {
  color: #8aa6c0;
}
.result-expand-prop-value {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text);
}
.result-expand-action {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.result-expand-action.action-warn {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.25);
  color: #fbbf24;
}
.result-expand-action.action-danger {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  color: #f87171;
}
.result-expand-action.action-ok {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  color: #4ade80;
}

/* ═══════════════════════════════════════════════════
   MISC IMPROVEMENTS
   ═══════════════════════════════════════════════════ */

/* Remove gradient from body — use flat deep background */
body {
  background: var(--bg-0);
}

/* Tighter topbar */
.topbar h1 {
  font-size: 20px;
  letter-spacing: -0.2px;
}
.topbar-subtitle {
  font-size: 11px;
  color: #4d7a9e;
  margin: 2px 0 0;
}

/* Mode bar — cleaner pill style */
.mode-bar {
  display: flex;
  gap: 2px;
  padding: 8px 24px;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.mode-btn {
  background: transparent;
  border: none;
  color: #6b8eab;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.mode-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  filter: none;
}
.mode-btn.active {
  background: rgba(245,165,36,0.12);
  color: var(--accent);
  border: none;
}

/* Cards — reduce border radius, remove gradient */
.card {
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* h2 — tighter, uppercase section headers */
h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8aa6c0;
  margin: 0 0 12px;
}

/* h3 inside cards */
h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6b8eab;
  margin: 0 0 10px;
}

/* Table header — flat, no background gradient */
th {
  background: rgba(10, 24, 38, 0.9);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #4d7a9e;
  padding: 6px 8px;
}

/* Inputs — slightly tighter */
input, select, textarea {
  border-radius: 6px;
  font-size: 13px;
  padding: 7px 9px;
}

/* Primary action button — flat, no gradient */
button:not(.ghost) {
  background: var(--accent);
  border-radius: 6px;
  font-size: 12px;
  padding: 7px 14px;
  color: #1a0f00;
  font-weight: 700;
  letter-spacing: 0.2px;
}
button.ghost {
  border-radius: 6px;
  font-size: 12px;
  padding: 7px 12px;
}

/* Flow nav — flat step buttons */
.flow-btn {
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 6px 14px;
}
.flow-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0f00;
}

/* Risk chips — flat, no border-radius pill */
.risk-chip {
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.3px;
  padding: 2px 6px;
}

/* Section separator — more subtle */
.section-sep {
  border: none;
  border-top: 1px solid #1a3045;
  margin: 12px 0;
}

/* Empty states — less decorative */
.empty-state-icon {
  font-size: 18px;
  color: #2a4560;
  margin-bottom: 6px;
}
.empty-state-text {
  font-size: 13px;
  color: #4d7a9e;
  font-weight: 600;
}
.empty-state-sub {
  font-size: 11px;
  color: #2e5070;
  margin-top: 4px;
}

/* Hub tabs — consistent with mode bar style */
.hub-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.hub-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #6b8eab;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px 8px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
}
.hub-tab-btn:hover {
  color: var(--text);
  filter: none;
  background: transparent;
}
.hub-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}

/* ═══════════════════════════════════════════════════
   DESIGN IMPROVEMENTS — BATCH 2
   ═══════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY SCALE TOKENS ── */
:root {
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
}

/* ── 2. RISK / SPEC CHIP ICONS ── */
/* Prepend status icons via ::before so screen readers skip them */
.risk-pass::before,
.risk-good::before,
.risk-low::before,
.prov-success::before {
  content: "✓ ";
  font-weight: 900;
}

.risk-medium::before,
.risk-warn::before,
.prov-warn::before {
  content: "⚠ ";
  font-weight: 900;
}

.risk-fail::before,
.risk-fail-additive::before,
.risk-bad::before,
.risk-high::before,
.prov-error::before {
  content: "✕ ";
  font-weight: 900;
}

.risk-unknown::before,
.prov-info::before {
  content: "· ";
  font-weight: 900;
}

/* ── 3. TABLE IMPROVEMENTS ── */
/* Row striping */
tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.022);
}

/* Larger readable font */
td {
  font-size: var(--text-base);
}

th {
  font-size: var(--text-xs);
}

/* iOS momentum scrolling on all table wrappers */
.table-wrap,
.datahub-table-wrap {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

/* ── 4. FORM SECTION LABEL — light-mode override ── */
/* The existing .form-section-label targets dark theme; override for light */
.form-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── 5. MICRO-INTERACTIONS ── */
button {
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.card {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input,
select,
textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.risk-chip,
.prov-chip,
.verdict-badge,
.badge {
  transition: opacity 0.12s ease;
}

.run-history-item {
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mode-btn,
.flow-btn,
.hub-tab-btn {
  transition: background 0.12s ease, color 0.12s ease,
              border-color 0.12s ease;
}

/* ── 6. BUTTON HIERARCHY ── */
/* Secondary — grey fill */
button.secondary {
  background: var(--bg-2, #e7edf2);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 600;
}
button.secondary:hover {
  background: var(--line);
  border-color: var(--line-strong);
  color: var(--text);
}

/* Tertiary — link style */
button.tertiary {
  background: transparent;
  border: none;
  color: var(--accent-2);
  font-weight: 600;
  padding: 4px 6px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.tertiary:hover {
  opacity: 0.75;
  background: transparent;
}

/* Danger variant */
button.danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-weight: 600;
}
button.danger:hover {
  background: rgba(185, 28, 28, 0.08);
}

/* ── 7. TOPBAR USERNAME ── */
.user-email {
  max-width: 260px;
  cursor: default;
}
.user-email[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #17212b;
  color: #f0f4f8;
  border: 1px solid #2a3a4a;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

/* ── 8. ADMIN BADGE TAG — light-mode override ── */
.admin-badge-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 4px;
  padding: 2px 7px;
  vertical-align: middle;
  margin-left: 6px;
}

/* ── 9. SKELETON LOADERS — light-mode shimmer ── */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #e8edf2 25%,
    #f4f7fa 50%,
    #e8edf2 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
  border-radius: 6px;
  min-height: 40px;
}

.skeleton-line {
  height: 12px;
  background: linear-gradient(
    90deg,
    #e8edf2 25%,
    #f4f7fa 50%,
    #e8edf2 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* ── 10. FIELD TIPS — light-mode override ── */
.field-tip {
  background: #17212b;
  border: 1px solid #2a3a4a;
  color: #d0e4f4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* ── 11. REVIEW FIELD INPUTS — light-mode override ── */
.review-field-input {
  background: #f8fafc;
  border: 1px solid #c8d2dc;
  color: var(--text);
}
.review-field-input.low-conf {
  border-color: #d97706;
  background: #fffbeb;
  color: #7c4a00;
}
.review-field-item.review-item-low {
  border-left-color: #d97706;
  background: rgba(217,119,6,0.07);
}
.review-field-item.review-item-missing {
  border-left-color: #dc2626;
  background: rgba(220,38,38,0.05);
}
.review-field-input:focus {
  border-color: var(--accent-2);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* ── 12. FORM-GRID-PRIMARY — light-mode override ── */
.form-grid-primary input,
.form-grid-primary select {
  border-color: var(--line-strong, #aebbc8);
  background: #ffffff;
  color: var(--text);
}
.form-grid-primary label {
  color: var(--label);
}
.screen-setup-primary {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2, #f8fafc);
}
.screen-setup-primary select,
.screen-setup-primary input {
  background: #ffffff;
  color: var(--text);
  border-color: var(--line-strong, #aebbc8);
}
.screen-setup-primary label {
  color: var(--label);
}

/* ── 13. EMPTY STATES — improve visibility ── */
.empty-state-icon {
  font-size: 30px;
  opacity: 0.55;
  color: var(--accent-2);
}
.empty-state-text {
  font-size: var(--text-base);
  color: var(--muted);
  font-weight: 600;
}
.empty-state-sub {
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 340px;
  line-height: 1.5;
  margin-top: 4px;
}

/* ── 14. MOBILE RESPONSIVE ADDITIONS ── */
@media (max-width: 640px) {
  /* Flow nav stacks vertically */
  .flow-nav {
    flex-direction: column;
    gap: 4px;
  }
  .flow-btn:not(:last-child)::after {
    content: "↓";
    right: 50%;
    top: auto;
    bottom: -10px;
    transform: translateX(50%);
  }

  /* Result controls stack */
  .result-controls {
    flex-direction: column;
    gap: 6px;
  }

  /* Topbar wraps */
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Status banner full width */
  .status-banner {
    margin: 0 8px 8px;
    border-radius: 8px;
  }
}

/* ── 15. SUMMARY STAT CARDS — light-mode override ── */
.summary-stat-card {
  background: var(--card-2, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.summary-stat-label {
  color: var(--muted);
}
.summary-stat-value {
  color: var(--text);
}
.summary-stat-sub {
  color: var(--muted);
}

/* ── 16. SANDBOX OUTPUT — light-mode override ── */
.sandbox-output {
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--text);
}

/* ── 17. RUN HISTORY TIMESTAMPS — style the ts span ── */
.run-history-ts {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}
.run-history-ts-relative {
  font-size: var(--text-xs);
  color: var(--accent-2);
  font-weight: 700;
  margin-right: 4px;
}

/* ── USER ADMIN BADGE ── */
.user-admin-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 4px;
  padding: 2px 7px;
  cursor: default;
  transition: background 0.15s;
}
.user-admin-badge:hover {
  background: rgba(124, 58, 237, 0.2);
}

/* ── DECISION TALLY BAR (above result table) ── */
@keyframes _tallyUpdate {
  from { opacity: 0.4; transform: translateY(-3px); }
  to   { opacity: 1;   transform: translateY(0); }
}
.result-decision-tally {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--card-2, #f8fafc);
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  animation: _tallyUpdate 0.18s ease;
}
.result-decision-tally + .result-pager {
  border-radius: 0; /* pager sits directly below tally */
}
.rdt-avoid  { color: var(--danger,  #f56a6a); }
.rdt-test   { color: var(--accent,  #f5a524); }
.rdt-trade  { color: var(--ok,      #63d48f); }
.rdt-total  { color: var(--muted);  margin-left: auto; font-weight: 400; }

/* ── RESULT TABLE PAGINATION BAR ── */
.result-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--card-2, #f8fafc);
  border-radius: 6px 6px 0 0;
}
.result-pager-btn {
  font-size: 12px;
  padding: 4px 12px;
  min-height: unset;
}
.result-pager-info {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .result-pager-info { font-size: 10px; }
  .result-pager-btn  { font-size: 11px; padding: 3px 8px; }
  .result-decision-tally { font-size: 11px; gap: 4px; padding: 6px 8px; }
}

/* ── Ultra-small screens (≤ 360 px — tight phones / portrait wearables) ── */
@media (max-width: 360px) {
  /* Topbar: stack logo and buttons */
  .topbar { padding: 10px 12px 6px; gap: 8px; flex-wrap: wrap; }
  .topbar-right { gap: 4px; }

  /* Mode bar: allow 2-column wrap */
  .mode-bar { flex-wrap: wrap; gap: 4px; padding: 6px 10px; }
  .mode-btn { font-size: 10px; padding: 5px 8px; }

  /* Flow nav: compress step labels */
  .flow-nav { gap: 4px; padding: 6px 10px; }
  .flow-btn { font-size: 10px; padding: 5px 8px; }

  /* Cards: remove horizontal padding */
  .card { padding: 10px; border-radius: 10px; }

  /* Form grids: force single column */
  .form-grid,
  .form-grid-3,
  .adv-grid { grid-template-columns: 1fr !important; }

  /* Result controls: stack vertically */
  .result-controls { flex-direction: column; align-items: stretch; gap: 6px; }
  .result-controls label,
  .result-controls select,
  .result-controls button { width: 100%; }

  /* Pager: shrink further */
  .result-pager-info { font-size: 9px; }
  .result-pager-btn  { font-size: 10px; padding: 2px 6px; }

  /* Decision tally: wrap chips */
  .result-decision-tally { flex-wrap: wrap; font-size: 10px; }

  /* Shortcuts panel: full-width, anchored to bottom on tiny screens */
  #shortcuts-panel {
    top: auto;
    bottom: 12px;
    right: 8px;
    left: 8px;
    min-width: unset;
  }

  /* Session expired card: tighter padding */
  .session-expired-card { padding: 20px 16px; }

  /* KPI grid: single column */
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ── KEYBOARD SHORTCUTS PANEL ── */
@keyframes _kbFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#shortcuts-panel {
  position: fixed;
  top: 76px;
  right: 24px;
  z-index: 600;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  min-width: 280px;
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,0.12));
  font-size: 12px;
  color: var(--text);
  animation: _kbFadeIn 0.12s ease;
}
.shortcuts-panel-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}
#shortcuts-panel-close {
  margin-top: 12px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}

/* ── SESSION EXPIRED OVERLAY ── */
#session-expired-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(9, 18, 28, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.session-expired-card {
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 36px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.session-expired-icon { font-size: 28px; margin-bottom: 12px; }
.session-expired-title {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--text);
}
.session-expired-body {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.session-expired-signin {
  display: inline-block;
  padding: 10px 28px;
  background: var(--accent-2, #0f766e);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.session-expired-dismiss {
  display: block;
  margin: 14px auto 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
}

/* ════════════════════════════════════════════════════
   PRINT STYLESHEET
   ════════════════════════════════════════════════════ */
@media print {
  /* Hide all chrome */
  .topbar,
  .mode-bar,
  .flow-nav,
  #status-banner,
  .result-controls,
  .result-pager,
  .component-actions,
  .lib-use-btn,
  .lib-del-btn,
  .new-screen-btn,
  .logout-btn,
  #shortcuts-help-btn,
  #session-expired-overlay,
  #shortcuts-panel,
  .adv-tuning-toggle,
  .adv-tuning-block,
  button:not(.print-keep),
  .mode-btn,
  .hub-tabs,
  .run-history-panel,
  .step2-cargo-summary,
  .stability-training-lab-panel,
  .admin-sandbox-card {
    display: none !important;
  }

  /* Reset layout to single column */
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt;
    font-family: "Helvetica Neue", Arial, sans-serif;
  }

  .grid {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    margin-bottom: 12pt !important;
    page-break-inside: avoid;
  }

  /* Table formatting */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 9pt !important;
    page-break-inside: auto;
  }

  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }

  th {
    background: #f0f0f0 !important;
    color: #000 !important;
    border: 1px solid #bbb !important;
    padding: 4pt 6pt !important;
    font-size: 8pt !important;
    text-transform: uppercase;
    letter-spacing: 0.3pt;
  }

  td {
    border: 1px solid #ddd !important;
    padding: 3pt 6pt !important;
    color: #000 !important;
    background: #fff !important;
  }

  tr:nth-child(odd) td {
    background: #f9f9f9 !important;
  }

  /* Risk chips — use borders instead of colour for B&W printing */
  .risk-chip {
    border: 1px solid #666 !important;
    background: transparent !important;
    color: #000 !important;
    padding: 1pt 4pt !important;
    font-size: 8pt !important;
  }

  .risk-pass::before, .risk-low::before   { content: "✓ "; }
  .risk-medium::before                    { content: "⚠ "; }
  .risk-fail::before, .risk-high::before  { content: "✕ "; }

  /* Verdict badges */
  .verdict-badge {
    border: 1px solid #666 !important;
    background: transparent !important;
    color: #000 !important;
    padding: 1pt 5pt !important;
  }

  /* Recommended banner */
  .recommended-banner {
    border: 2px solid #000 !important;
    background: transparent !important;
    color: #000 !important;
    padding: 8pt !important;
  }

  /* Page breaks */
  h2 { page-break-after: avoid; }
  .card { page-break-inside: avoid; }
  #results-section { page-break-before: always; }

  /* Show URL after links */
  a[href]::after {
    content: none;  /* suppress URLs — they clutter trading docs */
  }

  /* Print header */
  body::before {
    content: "FuelOS — Blend Risk & Optimisation Report";
    display: block;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    padding-bottom: 8pt;
    border-bottom: 2px solid #000;
    margin-bottom: 16pt;
  }
}

/* ════════════════════════════════════════════════════
   TABLET BREAKPOINT  (600 – 900 px)
   Covers iPad portrait, Surface, and similar devices.
   ════════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 900px) {
  /* ── Layout: collapse two-column into single column ── */
  .screening-layout {
    flex-direction: column;
    gap: 16px;
  }
  .detail-grid {
    grid-template-columns: 1fr !important;
  }
  .trader-desk-grid,
  .decision-mini-grid {
    grid-template-columns: 1fr 1fr;
  }
  .trader-board-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-grid-primary {
    grid-template-columns: repeat(2, 1fr);
  }
  .screen-setup-primary {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ── Mode bar: wrap instead of overflow ── */
  .mode-bar {
    flex-wrap: wrap;
    gap: 4px;
  }
  .mode-btn {
    flex: 1 1 auto;
    min-width: 80px;
    font-size: 12px;
    padding: 6px 10px;
  }

  /* ── Flow nav buttons: ensure they fit ── */
  .flow-btn {
    font-size: 12px;
    padding: 7px 12px;
  }

  /* ── Cards: reduce horizontal padding ── */
  .card, .card-2 {
    padding: 16px;
  }
  .topbar {
    padding: 12px 16px 6px;
  }
  main {
    padding: 0 12px 40px;
  }

  /* ── Result table: ensure horizontal scroll ── */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Result tally + pager: stack nicely ── */
  .result-decision-tally {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Distillation chart: scale down ── */
  #distillation-chart {
    max-width: 100%;
    height: auto;
  }

  /* ── Inspector / blend decision panels ── */
  .result-inspector-grid,
  .blend-decision-panel {
    grid-template-columns: 1fr;
  }

  /* ── Upload grid ── */
  .upload-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════
   Pilot cockpit polish
   Keeps the trader UI quieter while preserving existing layout contracts.
   ════════════════════════════════════════════════════ */

:root {
  --pilot-ink: #172331;
  --pilot-muted: #607184;
  --pilot-line: #d6e0ea;
  --pilot-panel: #ffffff;
  --pilot-soft: #f5f8fb;
  --pilot-accent: #b77816;
  --pilot-teal: #0f766e;
}

body {
  background: #f4f7fa;
}

.topbar {
  align-items: center;
}

.topbar h1,
.topbar-subtitle,
.mode-btn,
.card h2,
.datahub-block h3 {
  letter-spacing: 0;
}

.user-bar {
  background: #f4f7fa;
  border: 1px solid var(--pilot-line);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 18px rgba(22, 35, 49, 0.08);
}

.new-screen-btn,
.logout-btn,
button {
  border-radius: 6px;
}

button,
.new-screen-btn,
.flow-btn.active,
.hub-tab-btn.active {
  background: #b97b16;
  border-color: #a86f13;
  color: #111827;
  box-shadow: none;
}

button:hover,
.new-screen-btn:hover,
.flow-btn.active:hover,
.hub-tab-btn.active:hover {
  background: #a96f12;
  border-color: #96620f;
  color: #111827;
  filter: none;
}

button.ghost,
.logout-btn,
.new-screen-btn {
  background: #ffffff;
  border-color: #cbd8e4;
  color: #263648;
}

button.ghost:hover,
.logout-btn:hover,
.new-screen-btn:hover {
  background: #edf4f7;
  border-color: #98b5c6;
  color: #0f766e;
}

.mode-bar {
  padding-top: 8px;
  gap: 6px;
}

.mode-btn {
  border-radius: 6px 6px 0 0;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
}

.mode-btn.active {
  background: #fff6e8;
  border-color: #f0d6ac;
  border-bottom-color: #b97b16;
  color: #7a4b09;
}

.flow-nav {
  padding: 10px;
  background: #ffffff;
  border-color: var(--pilot-line);
}

.flow-btn {
  border-color: #d2dee9;
  color: #405265;
  background: #f7fafc;
}

.grid {
  align-items: start;
}

.optimiser-brief {
  min-height: 0;
  border-left: 4px solid #0f766e;
}

.optimiser-brief-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.optimiser-brief-top h2 {
  margin-bottom: 6px;
}

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

.optimiser-brief-grid > div {
  border: 1px solid #d8e3ed;
  background: #f7fafc;
  border-radius: 8px;
  padding: 12px;
  min-height: 76px;
}

.optimiser-brief-grid strong {
  display: block;
  color: #0f766e;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 8px;
}

.optimiser-brief-grid span {
  color: #435469;
  font-size: 13px;
  line-height: 1.45;
}

.optimiser-risk-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.optimiser-risk-strip span {
  border: 1px solid #d9e4ed;
  background: #ffffff;
  border-radius: 999px;
  color: #536579;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
}

.card[data-flow-step="1"]:not(.optimiser-brief) {
  grid-column: 1 / -1;
}

.card[data-flow-step="1"]:not(.optimiser-brief) .form-grid-primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decision-score,
.decision-claim,
.decision-list-block,
.decision-kpi-card,
.decision-model-card,
.decision-status-card,
.decision-validation-card,
.decision-chart-card,
.decision-demo-card,
.model-performance-card,
.datahub-block {
  box-shadow: 0 8px 18px rgba(22, 35, 49, 0.07);
}

.admin-status-bar {
  padding: 10px 14px;
}

.admin-status-grid {
  align-items: center;
}

.admin-stat-value {
  color: #172331;
}

.skeleton,
.skeleton-line,
.skeleton-chart,
.skeleton-table {
  background: linear-gradient(90deg, #eef3f7, #f8fafc, #eef3f7);
  border: 1px solid #e1e8ef;
}

#admin2-dashboard-cards:not(:empty),
#admin2-model-cards:not(:empty),
#admin2-regressions:not(:empty) {
  min-height: 0;
}

@media (min-width: 1100px) {
  .optimiser-brief {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .optimiser-brief-top,
  .optimiser-brief-grid {
    grid-template-columns: 1fr;
  }

  .optimiser-brief-top {
    display: grid;
  }

  .card[data-flow-step="1"]:not(.optimiser-brief) .form-grid-primary {
    grid-template-columns: 1fr;
  }
}

.mode-btn:not(.active),
.hub-tab-btn:not(.active) {
  background: #ffffff;
  border-color: transparent;
  color: #27364a;
}

.mode-btn:not(.active):hover,
.hub-tab-btn:not(.active):hover {
  background: #f2f6fa;
  border-color: #d8e3ed;
  color: #0f766e;
}

.hub-tabs {
  background: #223445;
  border-bottom-color: #d8e3ed;
}

.model-performance-card {
  background: #f7fafc;
  border-color: #d8e3ed;
  color: #172331;
}

.model-performance-label,
.model-performance-value,
.model-performance-card .small-note {
  color: #172331;
}

.model-performance-card .small-note {
  color: #607184;
}

.datahub-block.full-row:first-child .model-performance-card {
  min-height: 96px;
}

.model-observatory-card,
.model-lab-card {
  border-left: 4px solid #0f766e;
}

.model-observatory-controls,
.model-lab-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  margin: 12px 0;
}

.model-lab-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.model-observatory {
  border-top: 1px solid #d8e3ed;
  padding-top: 12px;
}

.model-observatory-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
  gap: 12px;
}

.model-observatory-grid.lower {
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
}

.model-observatory-main,
.model-observatory-side > *,
.model-point-inspector {
  border: 1px solid #d8e3ed;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.model-observatory-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.model-lab-chart {
  display: block;
  width: 100%;
  min-height: 250px;
  margin-top: 10px;
  border: 1px solid #e1e8ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.model-lab-scatter .model-lab-point {
  fill: #0f766e;
  opacity: 0.68;
  cursor: pointer;
}

.model-lab-scatter .model-lab-point:hover {
  opacity: 1;
}

.model-lab-scatter .model-lab-point.outlier {
  fill: #b77816;
}

.model-lab-scatter .model-lab-point.selected {
  fill: #d9480f;
  stroke: #111827;
  stroke-width: 1.5;
  opacity: 1;
}

.model-point-inspector pre,
#admin2-lab-config-preview {
  white-space: pre-wrap;
  max-height: 260px;
  overflow: auto;
}

.model-lab-points-table tr {
  cursor: pointer;
}

.model-lab-points-table tr.selected-row td {
  background: #fff6e8;
  color: #172331;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .model-observatory-controls,
  .model-lab-grid,
  .model-observatory-grid,
  .model-observatory-grid.lower {
    grid-template-columns: 1fr;
  }
}