.arbe-fr {
  --arbe-bg: #f1f5f9;
  --arbe-card: #ffffff;
  --arbe-text: #0f172a;
  --arbe-muted: #64748b;
  --arbe-border: #dbe3ef;
  --arbe-ok-bg: #ecfdf5;
  --arbe-ok-text: #047857;
  --arbe-warn-bg: #fffbeb;
  --arbe-warn-text: #b45309;
  --arbe-stop-bg: #fef2f2;
  --arbe-stop-text: #b91c1c;
  color: var(--arbe-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--arbe-bg);
  padding: 20px;
  border-radius: 18px;
  box-sizing: border-box;
}

.arbe-fr * { box-sizing: border-box; }

.arbe-fr-header {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}

.arbe-fr-kicker { font-size: 13px; color: #48658d; font-weight: 600; }
.arbe-fr h2, .arbe-fr h3 { margin: 0; }
.arbe-fr-title { font-size: 30px; line-height: 1.1; font-weight: 750; margin: 4px 0; }
.arbe-fr-subtitle { color: #334155; font-size: 14px; margin: 0; }

.arbe-fr-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.arbe-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--arbe-border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 650;
  background: #f8fafc;
  color: #334155;
  white-space: nowrap;
}
.arbe-badge.ok { background: var(--arbe-ok-bg); color: var(--arbe-ok-text); border-color: #bbf7d0; }
.arbe-badge.warn { background: var(--arbe-warn-bg); color: var(--arbe-warn-text); border-color: #fde68a; }
.arbe-badge.stop { background: var(--arbe-stop-bg); color: var(--arbe-stop-text); border-color: #fecaca; }

.arbe-card {
  background: var(--arbe-card);
  border: 1px solid var(--arbe-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07);
  margin-bottom: 18px;
}

.arbe-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 750;
  margin-bottom: 14px;
}

.arbe-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.arbe-grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 18px; }
.arbe-col-4 { grid-column: span 4; }
.arbe-col-5 { grid-column: span 5; }
.arbe-col-3 { grid-column: span 3; }
.arbe-col-8 { grid-column: span 8; }

.arbe-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.arbe-field input[type="text"],
.arbe-field input[type="number"] {
  width: 100%;
  border: 1px solid var(--arbe-border);
  border-radius: 12px;
  background: white;
  padding: 10px 12px;
  font-size: 14px;
}
.arbe-field input:focus { outline: 2px solid #0f172a; outline-offset: 1px; }

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

.arbe-pair-line {
  padding: 14px;
  border-radius: 12px;
  font-size: 14px;
}
.arbe-pair-line.ok { background: var(--arbe-ok-bg); color: var(--arbe-ok-text); }
.arbe-pair-line.stop { background: var(--arbe-stop-bg); color: var(--arbe-stop-text); }

.arbe-button {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 750;
  background: #0f172a;
  color: white;
  cursor: pointer;
}
.arbe-button:disabled { background: #8b949e; cursor: not-allowed; }
.arbe-button.secondary {
  width: auto;
  min-height: unset;
  background: white;
  color: #0f172a;
  border: 1px solid var(--arbe-border);
}

.arbe-alert {
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
}
.arbe-alert.stop { background: var(--arbe-stop-bg); color: var(--arbe-stop-text); }
.arbe-alert.warn { background: var(--arbe-warn-bg); color: var(--arbe-warn-text); }
.arbe-alert.ok { background: var(--arbe-ok-bg); color: var(--arbe-ok-text); }

.arbe-swatch-row { display: flex; gap: 14px; align-items: center; }
.arbe-swatch { width: 76px; height: 76px; border-radius: 18px; border: 1px solid var(--arbe-border); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); flex: 0 0 auto; }
.arbe-swatch.small { width: 64px; height: 64px; border-radius: 14px; }
.arbe-muted { color: var(--arbe-muted); }

.arbe-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.arbe-mini-box { background: #f8fafc; border-radius: 12px; padding: 10px; font-size: 13px; }
.arbe-mini-box strong { display:block; font-size:14px; margin-top: 2px; }

.arbe-matrix-wrap { overflow-x: auto; border: 1px solid var(--arbe-border); border-radius: 14px; background: white; padding: 12px; }
.arbe-matrix { display: grid; gap: 4px; align-items: center; }
.arbe-matrix-label { font-size: 12px; font-weight: 700; padding: 4px; border-radius: 5px; text-align: left; border: 0; background: transparent; cursor:pointer; }
.arbe-matrix-label.active { background: #0f172a; color: white; }
.arbe-matrix-cell { width: 18px; height: 18px; border-radius: 4px; border: 1px solid white; cursor: pointer; }
.arbe-matrix-cell.active { outline: 2px solid #0f172a; }
.arbe-wl-label { transform: rotate(-65deg); font-size: 9px; color: #94a3b8; height: 22px; }

.arbe-tabs { display:flex; flex-wrap:wrap; gap: 8px; }
.arbe-tab { border: 1px solid var(--arbe-border); border-radius: 8px; background: white; padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 700; min-width: 64px; color: #0f172a !important; line-height: 1.2; text-indent: 0 !important; opacity: 1 !important; }
.arbe-tab.active { background:#0f172a; color:white !important; }
.arbe-tab-label { display:block; width:100%; text-align:center; color: inherit !important; opacity: 1 !important; visibility: visible !important; }

.arbe-chart-wrap { height: 340px; border: 1px solid var(--arbe-border); border-radius: 14px; background:white; padding: 10px; }
.arbe-chart { width: 100%; height: 100%; display:block; overflow: visible; }
.arbe-legend { display:flex; gap: 12px; flex-wrap:wrap; font-size: 12px; margin-top: 6px; color: #334155; }
.arbe-legend span:before { content:""; display:inline-block; width: 16px; height: 3px; vertical-align: middle; margin-right: 5px; background: #2563eb; }
.arbe-legend .b:before { background:#0284c7; border-top: 2px dashed #0284c7; height: 0; }
.arbe-legend .s:before { background:#9333ea; border-top: 2px dashed #9333ea; height: 0; }

.arbe-flight-record {
  background: #0f172a;
  color: #f8fafc;
  border-radius: 14px;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-x: auto;
}

.arbe-test-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.arbe-test { border: 1px solid var(--arbe-border); border-radius: 12px; padding: 10px; font-size: 12px; }
.arbe-test.pass { background: var(--arbe-ok-bg); color: var(--arbe-ok-text); }
.arbe-test.fail { background: var(--arbe-stop-bg); color: var(--arbe-stop-text); }

@media (max-width: 980px) {
  .arbe-fr-header { align-items: flex-start; flex-direction: column; }
  .arbe-grid-4, .arbe-grid-12, .arbe-test-grid { grid-template-columns: 1fr; }
  .arbe-col-4, .arbe-col-5, .arbe-col-3, .arbe-col-8 { grid-column: span 1; }
}

.arbeitmp{}
.arbe-select{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:8px 10px;background:#fff;font-size:13px;}


.arbe-chart-stack { display: flex; flex-direction: column; gap: 6px; }
.arbe-delta-chart-wrap { height: 150px; border: 1px solid var(--arbe-border); border-radius: 14px; background: white; padding: 8px 10px; }
.arbe-delta-legend .delta-ab:before { background:#0f766e; }
.arbe-delta-legend .delta-corr:before { background:#be123c; border-top: 2px dashed #be123c; height: 0; }


/* v1.4 hover window for matrix cells and spectral curve bands */
.arbe-fr { position: relative; }
.arbe-hover-window {
  position: absolute;
  z-index: 9999;
  max-width: 340px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .08s ease, transform .08s ease;
  background: #0f172a;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(15,23,42,.25);
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}
.arbe-hover-window.active {
  opacity: 1;
  transform: translateY(0);
}
.arbe-matrix-cell[data-hover],
.arbe-chart [data-hover] {
  cursor: crosshair;
}
.arbe-tab {
  min-width: 64px;
  color: #0f172a;
}
.arbe-tab.active {
  color: #ffffff;
}
.arbe-tab-label {
  display: block;
  width: 100%;
  text-align: center;
}

.arbeit-dummy{}
.arbe-pair-line.run{background:#0f172a!important;color:#f8fafc!important;border-color:#0f172a!important;}


/* v2.2.1 precision controls: sliders remain available, numeric entry is authoritative. */
.arbe-control-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 92px;
  gap: 8px;
  align-items: center;
}
.arbe-field input.arbe-range[type="range"] {
  width: 100%;
  height: 34px;
  padding: 0;
  cursor: pointer;
  accent-color: #0f172a;
}
.arbe-field input.arbe-range[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
}
.arbe-field input.arbe-range[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
}
.arbe-field input.arbe-number[type="number"] {
  width: 92px;
  min-height: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.arbe-step-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 7px 0 6px;
}
.arbe-step-row button {
  border: 1px solid var(--arbe-border);
  background: #fff;
  color: #0f172a;
  border-radius: 10px;
  min-height: 34px;
  font-weight: 750;
  cursor: pointer;
}
.arbe-step-row button:hover { background: #f1f5f9; }

.arbeitmp{}
.arbe-checkline{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:#475569;line-height:1.25}.arbe-checkline input{width:auto;margin:0}


/* v2.3.0 Atlas Stability Matrix */
.arbe-atlas-matrix-card {
  overflow: hidden;
}
.arbe-atlas-controls {
  display: grid;
  grid-template-columns: 2fr repeat(4, minmax(120px, 1fr)) 1fr;
  gap: 12px;
  align-items: end;
}
.arbe-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--arbe-text);
}
.arbe-check-row label,
.arbe-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.arbe-atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 10px;
  margin-top: 12px;
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}
.arbe-atlas-cell {
  background: #fff;
  border: 1px solid var(--arbe-border);
  border-radius: 14px;
  padding: 10px;
  min-height: 112px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.arbe-atlas-cell.ok {
  border-color: #86efac;
  background: #f0fdf4;
}
.arbe-atlas-cell.warn {
  border-color: #fde68a;
  background: #fffbeb;
}
.arbe-atlas-cell.stop {
  border-color: #fecaca;
  background: #fef2f2;
}
.arbe-atlas-swatch {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  margin-bottom: 8px;
}
.arbe-atlas-id {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
  word-break: break-word;
}
.arbe-atlas-metrics,
.arbe-atlas-relation {
  font-size: 11px;
  color: var(--arbe-muted);
  margin-top: 4px;
}
@media (max-width: 980px) {
  .arbe-atlas-controls {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .arbe-atlas-controls {
    grid-template-columns: 1fr;
  }
  .arbe-atlas-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}


/* v2.3.3 Matrix → B handoff */
.arbe-atlas-cell {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.arbe-atlas-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}
.arbe-atlas-cell.selected-b {
  outline: 3px solid #0f172a;
  outline-offset: 2px;
}
.arbe-mini-action {
  margin-top: 8px;
  width: 100%;
  border: 1px solid var(--arbe-border);
  background: #0f172a;
  color: #f8fafc;
  border-radius: 10px;
  min-height: 30px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.arbe-atlas-cell.selected-b .arbe-mini-action {
  background: #166534;
  border-color: #166534;
}
.arbe-mini-action:hover {
  filter: brightness(1.05);
}


/* v2.3.5 Max-X handoff */
.arbe-atlas-cell.max-x {
  outline: 2px solid #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}
.arbe-max-x-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.arbe-max-x-box code {
  font-weight: 800;
}